body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    padding-bottom: 60px; /* フッターの高さ分の余白を追加 */
    box-sizing: border-box;
    min-height: 100vh; /* ビューポート全体の高さを確保 */
}

/* ここに追記 */
body.level1 nav {
    background-color: #add8e6; /* ライトブルー */
}

body.level2 nav {
    background-color: #ffb3bf; /* バーレーウッド */
}

body.level3 nav {
    background-color: #90ee90; /* ライトグリーン */
}

body.level3_2 nav {
    background-color: #eee8aa; /* 明るい灰みの黄系の色 */
}

body.level4 nav {
    background-color: #ffa07a; /* ライトサーモン */
    .content {
    background-color: transparent;
}
}

body.level5 nav {
    background-color: #dda0dd; /* プラム */
}

body.level6 nav {
    background-color: #eee8aa; /* プラム */
}

.container {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 100px; 
}

header {
    background-color: #deb887;
    color: white;
    padding: 1em 0;
    text-align: center;
}

header h1 {
    font-size: 1.2em; /* フォントサイズを調整 */
}

nav {
    background-color: #add8e6;
    padding: 1em 0;
}

section {
    padding: 1em 0; /* セクションの上下の余白を狭くする */
    margin-bottom: 0px; /* セクション間の余白を狭くする */
}

section h2 {
    margin-top: 0;
}

.content {
    background-color: #f9f9f9;
    padding: 1em;
    border-radius: 5px;
    display: flex;
    flex-direction: column; /* 縦方向にアイテムを並べる */
    align-items: center; /* アイテムを中央揃え */
    gap: 10px; /* アイテム間の余白を設定 */
}

.audio-container {
    display: flex;
    align-items: center;
    gap: 10px; /* ボタンとタイトル間の余白 */
    width: 100%;
    max-width: 600px; /* 最大幅を設定 */
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 10px; /* ボタン間の余白を設定 */
}

.repeat-button, .download-button {
    width: 40px; /* ボタンの幅を統一 */
    height: 40px; /* ボタンの高さを統一 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* パディングをゼロに */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em; /* ボタンのテキストを小さくする */
}

.repeat-button {
    background-color: #e6e6fa; /* リピートボタンの背景色 */
}

.download-button {
    background-color: #e6e6fa; /* ダウンロードボタンの背景色 */
}

.repeat-button:hover {
    background-color: #ffc0cb; /* ホバー時の色変更 */
}

.download-button:hover {
    background-color: #ffc0cb; /* ホバー時の色変更 */
}

.repeat-button.active {
    background-color: #ff9b9b; /* ボタンがアクティブのときの色 */
}

audio {
    width: 100%; /* オーディオプレイヤーがコンテナの幅いっぱいに表示されるように */
    max-width: 600px; /* 必要に応じて最大幅を設定 */
    display: block; /* ブロック要素として表示 */
    margin: 0 auto; /* 中央揃え */
}

.copyright-notice p {
    text-align: center;
}


/* 画像とテキストを中央揃えにするスタイル */
.center-content {
    text-align: center;  /* テキストと画像の中央揃え */
    max-width: 100%;     /* 親要素の幅も100%にする */
    margin: 0 auto;      /* 親要素も中央に配置 */
}

.center-content img {
    max-width: 90%;      /* 画像の幅を画面幅の90%に制限 */
    height: auto;        /* 高さは幅に応じて自動調整 */
    display: block;      /* ブロック要素にして中央揃え */
    margin: 0 auto;      /* 画像を中央に配置 */
}


footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1em 0;
    position: fixed; /* フッターを画面下部に固定 */
    bottom: 0;
    width: 100%;
    z-index: 1;
}

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../images/nola2.svg) no-repeat center center / contain;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 10cm;
  height: 3cm;
  margin-top: 15px;
}

/* ふわふわ */
@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }
  50% {
    transform: translate(0, -7px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}

/* 下線 */

hr {
    border: none;
    border-top: 2px solid #ffffff; /* はっきり見える白線に */
    margin: 2em 0;
    width: 80%;
}

/* 「ここまでで〇週間」のテキストを左寄せに */
.content p {
    text-align: left;
    align-self: flex-start;
}