/*
 * Front — TOP の帯レイアウト
 *
 * TOP (is_front_page) でだけ読み込む。他ページには一切影響しない。
 * マークアップは front-page.php にある。
 *
 * 構造:
 *   .dra-wire-main--bands   幅・余白を持たない外枠
 *     .dra-band             画面幅いっぱいの帯 (--alt で薄グレー)
 *       .dra-sec            中身。1100px で中央寄せ、カードの装飾は外す
 */

/* ─── 外枠 ───
   .dra-wire-main が持つ 1100px の制限と余白を外す。
   本文の読み幅 (--dra-measure) と図解の横スクロールは
   .dra-wire-main を起点にした指定なので、クラス自体は残す。 */
.dra-wire-main--bands {
  max-width: none;
  padding: 0;
}

/* ─── MV 図解のリード文 ───
   図解の下、「○○のDRAMAP」の下に置くサンプルの一言。
   投稿の「一覧に出すリード文」をそのまま使う。 */
.dra-hero-fig-lead {
  margin: 6px 0 0;
  max-width: none;
  text-align: center;
  font-size: var(--dra-fs-sm);
  line-height: 1.7;
  color: var(--dra-text-muted);
}

/* ─── 帯 ───
   背景が画面端まで届き、中身だけが 1100px で中央に揃う。 */
.dra-band {
  padding: 72px 32px;
  background: var(--dra-bg);
}
.dra-band--alt { background: var(--dra-bg-alt); }

/* 帯の中ではカードの装飾を外す。区切りは背景色と余白が担う。 */
.dra-band > .dra-sec,
.dra-band > .dra-sec--lg,
.dra-band > .dra-sec-5,
.dra-band > .dra-owner-card {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* ─── 見出し ───
   枠線がなくなった分、見出しを大きくして帯の起点にする。
   下線は帯の切れ目と役割が重なるので外す。 */
.dra-band .dra-h2-1,
.dra-band .dra-sec-title {
  margin: 0 0 28px;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 30px;
  line-height: 1.45;
  letter-spacing: .03em;
}

/* 見出しの上に置く小見出し。番号と分野名だけの短いラベル。 */
.dra-band__label {
  margin: 0 0 10px;
  max-width: none;
  color: var(--dra-text-muted);
  font-size: var(--dra-fs-sm);
  font-weight: 600;
  letter-spacing: .12em;
}

/* ─── 文章 + 図解の 2 カラム (01 の帯) ───
   図解は 260px 固定の 2 枚組。右カラムをその合計幅 (260×2 + 20) に合わせる。
   左カラムは残り幅 (約 510px) となり、本文の読み幅にも収まる。 */
.dra-band__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  gap: 48px;
  /* 図解を縦に積むと右カラムが高くなるので、文章を上下中央に置いて釣り合わせる */
  align-items: center;
}
.dra-band__figs {
  display: grid;
  /* 図解は原寸 260px。列を 1fr に固定しないと、狭い画面で
     列そのものが 260px に広がって帯からはみ出す
     (原寸のまま横スクロールさせるのは assets/js/main.js の役目)。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
/* 狭い画面でも左右に並べたまま、2 枚まとめて横スクロールさせる。
   1 枚ずつ別々にスクロールすると 2 枚を見比べられないため、
   .dra-band__figs 自体をスクロール枠にして図解は原寸のまま置く。 */
@media (max-width: 700px) {
  .dra-band__figs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* セクションの内側パディング分だけ左右に広げ、端いっぱいまで見せる
       (他ページの .dra-fig-scroll と同じ寸法) */
    margin-left: -14px;
    margin-right: -14px;
    padding: 0 14px 2px;
  }
  .dra-band__figs > * { flex: 0 0 260px; }
  /* 図解 1 枚ごとのスクロール枠 (assets/js/main.js が付ける) は、
     この中では二重スクロールになるので無効化する。 */
  .dra-band__figs .dra-fig-scroll {
    margin: 0;
    padding: 0;
    overflow: visible;
    max-width: none;
  }
}

/* 段落が続くと読み進めにくいので、意味のまとまりごとに区切る。 */
.dra-band__para + .dra-band__para {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--dra-border);
}
.dra-band__para > p:last-child { margin-bottom: 0; }

/* 図解と本文が窮屈になる前に 1 列へ。MV と同じ折り返し幅にする。 */
@media (max-width: 1000px) {
  .dra-band__split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ─── 9 色チップ (02 の帯) : 左右の入れ替え ───
   2 列のときはチップを左、文章を右に置く。
   1 列に畳んだ後 (860px 以下) は order を戻し、文章が先に来るようにする
   — 読む順序は DOM の並び (文章 → チップ) が正しいため。 */
@media (min-width: 861px) {
  /* 列幅も左右を入れ替える (既定は 1fr 320px) */
  .dra-band .dra-split-chips {
    grid-template-columns: 320px minmax(0, 1fr);
  }
  .dra-band .dra-split-chips > :first-child  { order: 2; }
  .dra-band .dra-split-chips > :nth-child(2) { order: 1; }
}

/* ─── 9 色チップ (02 の帯) ───
   帯が全幅になって右カラムに余裕ができたので、広い画面では
   丸と文字を一回り大きくして図としての存在感を出す。
   丸の寸法は要素ごとのデータとして style 属性に入っているため、
   ここだけ !important で上書きする。 */
@media (min-width: 1001px) {
  /* 見出しは段組みの外にあるので、中央揃えにすると見出しと本文が離れる。
     上揃えのままにして、余った高さはチップ側に残す。 */
  .dra-band .dra-split-chips {
    grid-template-columns: 400px minmax(0, 1fr);
  }
  .dra-band .dra-chips3--v2 { gap: 26px 14px; }
  .dra-band .dra-chips3--v2 [class^="dra-inl-"] {
    width: 58px !important;
    height: 58px !important;
    font-size: 18px;
  }
  .dra-band .dra-chips3--v2 .dra-blk-135 { font-size: var(--dra-fs-base); }
  .dra-band .dra-chips3--v2 .dra-blk-136 { font-size: var(--dra-fs-xs); }
}

/* ─── 関係の向きの図解 4 つ (03 の帯) ───
   PC は 4 つ横並び (220px × 4 + gap 56px × 3 = 1048px)。
   スマホでは 1 列だと縦に伸びるので 2 列に畳み、gap を詰めて
   1 枚あたりの幅を確保する。図解は viewBox を持つので
   列幅に合わせて中身ごと縮む。 */
@media (max-width: 720px) {
  .dra-blk-137 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }
}

/* ─── マップの凡例 (04 の帯) ───
   中央の列を 1fr にすると、図解 (420px) より広い列の中で図解が中央に寄り、
   左右の説明文が図解から離れてしまう。列を図解の幅に合わせ、
   3 列まとめて中央に置く。 */
@media (min-width: 861px) {
  .dra-band .dra-legend {
    grid-template-columns: 180px auto 180px;
    justify-content: center;
    gap: 28px;
  }
}

/* ─── マップの凡例 (04 の帯) ───
   PC は「凡例 / 図解 / 凡例」の 3 列で、左の凡例だけ右揃えにして
   図解に寄せている。1 列に畳んだ後は寄せる相手がいないので左揃えに戻す。
   畳むのは 860px (layout.css の (a) 固定幅列を含む段組み) の時点。 */
@media (max-width: 860px) {
  .dra-blk-140 { text-align: left; }
}

/* ─── 活用シーンのカード (05 の帯) ───
   リンクではなく紹介の並び (遷移は下の「活用シーンを見る」に集約)。
   説明文を 16px にした分、見出しがそれより小さくならないよう上げる。 */
.dra-lnk-8 .dra-article__title { font-size: var(--dra-fs-md); }

/* アイコンは可変フォント。線を細くして図としての主張を抑える。
   opsz (光学サイズ) は実際の表示サイズに合わせると線の太さが自然に見える。 */
.dra-inl-64 { font-variation-settings: 'opsz' 24, 'wght' 300; }

/* PC ではアイコンを主役として大きく見せる (1 列に畳む 700px 以下は 40px のまま) */
@media (min-width: 721px) {
  .dra-inl-63 { width: 80px; height: 80px; }
  .dra-inl-64 { font-size: 40px; font-variation-settings: 'opsz' 48, 'wght' 300; }
}

/* スマホは横幅が足りないので、アイコンと見出しを 1 行に並べ、
   説明文はその下に全幅で置く。
   見出しと説明文を包む span を display:contents にして、
   両方をカード側のグリッドの子として扱う。 */
@media (max-width: 720px) {
  .dra-lnk-8 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
  }
  .dra-inl-65 { display: contents; }
  .dra-lnk-8 .dra-article__title { grid-column: 2; }
  .dra-inl-66 {
    grid-column: 1 / -1;
    /* 1 行目の高さはアイコン (40px) が決めるので、見出しの文字の下に
       10px ほどの余りが残る。その分を打ち消して行間を詰める。 */
    margin-top: -8px;
  }
}

/* ─── 運営者カード (06 の帯) ───
   PC は写真左・本文右の 2 カラム。写真は画面幅によらず 200px。 */
.dra-band .dra-owner-card {
  gap: 28px;
}
.dra-avatar { width: 200px; height: 200px; }

/* スマホは横幅が足りないので 1 カラムで縦に積む */
@media (max-width: 720px) {
  .dra-band .dra-owner-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* ─── ご利用について (07 の帯) ───
   PC は本文左・ボタン右の 2 カラム。スマホはボタンを本文の下に置く。 */
@media (max-width: 720px) {
  .dra-band .dra-sec-5 {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* ─── レスポンシブ ───
   スマホでは帯の余白を詰める。左右は他ページのセクションと同じ 14px。 */
@media (max-width: 720px) {
  .dra-band {
    padding: 40px 14px;
  }
  /* 帯が左右 14px を持っているので、中身は 0 に戻す。
     layout.css がスマホの全セクションに 14px を !important で入れており、
     そのままだと帯の 14px と二重に効いてしまう。 */
  .dra-band > .dra-sec,
  .dra-band > .dra-sec--lg,
  .dra-band > .dra-sec-5,
  .dra-band > .dra-owner-card {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 見出しの大きさは他ページ (pages.css のスマホ見出し) と揃えて 30px。
     帯は上下の余白が詰まるので、見出しの下の余白だけ縮める。 */
  .dra-band .dra-h2-1,
  .dra-band .dra-sec-title {
    margin-bottom: 20px;
    font-size: 30px;
  }
  .dra-band__label {
    font-size: var(--dra-fs-xs);
  }
}