/* Box Sizing Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Base Body Styles (adjust as needed) */
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif; /* Fallback font */
    line-height: 1.6;
}

/* 全体レイアウトの調整 */
#layout, #main,#footer {
  width: 90%; /* 画面幅の90%を使用 */
  max-width: 960px; /* デスクトップでの最大幅を制限 */
  margin: 0 auto; /* 中央寄せ */
  padding: 2px; /* 内側の余白 */
  /* 既存のCSSで固定幅（例: width: 760px;）が設定されている場合は、ここで上書きするか削除してください */
}

/* コンテンツカラムのレイアウト */
/* #main が flex コンテナになるように設定 */
#main {
  display: flex; /* flexboxを有効にする */
  flex-wrap: wrap; /* 画面が狭くなったら折り返す */
  justify-content: space-between; /* 要素間に均等なスペースを配置 */
}

#contents-left {
  flex: 2; /* 画面幅が広い時にcontents-rightの2倍の幅を取る */
  max-width: 65%; /* デスクトップ時の最大幅の例 */
  margin-top: 20px; /* 上にスペースを追加 */
  margin-right: 2%; /* 右側のカラムとの間隔 */
  /* 既存のCSSでfloatが使われている場合は、ここでfloat: none; を設定するか、flexboxに移行してください */
}

#contents-right {
  flex: 1; /* 画面幅が広い時にcontents-leftの0.5倍の幅を取る */
  max-width: 33%; /* デスクトップ時の最大幅の例 */
}

/* PC/デフォルトのスタイル（横1列） */
#gloNav ul {
  display: flex;             /* Flexboxを有効にし、横並びにする（デフォルトでrow） */
  list-style: none;          /* リストのマーカーを削除 */
  padding: 0;                /* デフォルトのパディングを削除 */
  margin: 0;                 /* デフォルトのマージンを削除 */
  justify-content: center;   /* アイテムを中央揃えにする（任意） */
  flex-wrap: wrap;           /* アイテムが多すぎる場合に折り返す */
}

#gloNav li {
  /* PCでの各アイテムのスタイル */
  margin-right: 10px; /* 右隣の画像との間隔 */
  padding: 5px 5px;
  background-color: #f0f0f0; /* 背景色（任意） */
  border: 0px solid #ccc;    /* ボーダー（任意） */
  white-space: nowrap;       /* テキストの折り返しを防ぐ（ナビゲーションに適している場合） */
}

#gloNav li a {
  text-decoration: none;     /* リンクの下線を削除 */
  color: #333;               /* リンクの色 */
  display: block;            /* リンク全体をクリック可能にする */
}

#jacket img {
  max-width: 200px; /* 親要素の幅を超えないようにする */
  height: auto;    /* 縦横比を維持する */
  display: block;  /* 必要に応じて、画像を行ではなくブロックとして扱う */
  border: 1px solid #CCCCCC; /* 薄いグレーの細い枠 */
}

#songlist ul {
  list-style: none; /* リストマーカーを消す */
  padding-left: 0;  /* デフォルトで付く左の余白も消す（好みで） */
  margin-left: 0;   /* デフォルトで付く左の余白も消す（好みで） */
}

@media (max-width: 768px) { /* 768px以下の画面幅に適用 */
  #main {
    flex-direction: column; /* カラムを縦方向に並べ替える */
    align-items: center; /* 中央揃えにする */
  }

  #contents-left,
  #contents-right {
    flex: none; /* flexboxの比率を解除 */
    width: 100%; /* 幅を100%にする */
    max-width: 100%; /* 最大幅も100% */
    margin-right: 0; /* 右マージンをリセット */
    margin-bottom: 20px; /* 下にスペースを追加 */
  }

  h1,
  h2 {
    text-align: center;
  }

  #contents-left,
  #contents-right {
    width: 90%; /* 画面幅に応じて調整 */
    margin: 10px auto; /* 中央揃え */
  }

  /* CDリストの画像も調整 */
  #cdlist img {
    width: 100%; /* モバイルでは画像をいっぱいに表示 */
    height: auto;
  }
}

  #cd-etc1 p,
  #cd-etc2 p {
    margin: 0;
  }

  #cd-etc1 h3,
  #cd-etc2 h3 {
    margin-bottom: 5px;
  }

@media (max-width: 480px) { /* 480px以下の画面幅に適用 */
  #layout, #main {
    width: 100%; /* 画面幅の100%を使用 */
    padding: 5px;
  }

  h1 {
    text-align: center;
    font-size: 1.5em; /* フォントサイズを調整 */
  }
  h2 {
    text-align: center;
    font-size: 1em;
  }

  #gloNav ul {
    flex-direction: column; /* 縦並びにする */
    padding: 0;
    margin-bottom: 10px;
  }

  #gloNav li {
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
  }
}

  #contents-left,
  #contents-right {
    width: 100%; /* 画面幅に応じて調整 */
    margin: 10px auto; /* 中央揃え */
  }

  #cd-etc1 p,
  #cd-etc2 p {
    margin: 0;
  }

  #cd-etc1 h3,
  #cd-etc2 h3 {
    margin-bottom: 5px;
  }