/* =====================================================================
 * BROWDIA layout.css  — コンテナ・セクション・グリッド
 * base.css の後、components.css の前に読む。
 *
 * ★ブレークポイントは 1024px の1点だけ（2026-08-03 に 768px を廃止）。
 *   768px でPC値に切り替える箇所とMV/検索ボックスが1024pxで切り替わる箇所が混在し、
 *   768〜1023px でレイアウトが破綻していた（ガイド円が166x270の楕円になる等）。
 *   カンプは PC1600 と SP375 の2状態しかないので、
 *   「1023pxまではSPレイアウト、375pxの列を中央に置く」に統一した。
 *   帯ごとの寄せは各ファイル末尾の
 *   `@media (min-width: 768px) and (max-width: 1023px)` にまとめてある。
 * ===================================================================== */

/* コンテナ: SP 345px（左右15px）/ PC 1200px。1240px 未満では左右20pxで縮む */
.l-container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* 全幅セクション（背景画像を敷くもの） */
.l-full { width: 100%; }

/* 縦リズム: セクション上下パディング（PC 80px / SP 40px） */
.l-section { padding-block: var(--section-py); }

/* 背景色つきセクション（区切りは色差のみ。影は使わない） */
.l-section--alt  { background: var(--c-bg-alt); }
.l-section--pink { background: var(--c-bg-pink); }

/* -------- グリッド -------- */
/* 4リンクアイコン: SP 2x2 -> 768px以上で4カラム */
.l-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 28px;
}
@media (min-width: 1024px) {
  .l-grid-4 { grid-template-columns: repeat(4, 1fr); column-gap: 56px; row-gap: 0; }
}

/* 紹介ブロックSPの画像3枚 */
.l-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

/* 左揃えテキストのブロックを中央寄せする頻出パターン。
   text-align:center や固定paddingで代用すると折り返し位置が変わったとき崩れる。
   （SP紹介見出しは最長行560device -> (750-560)/2=95、SPメニューは389device -> 180.5 と厳密一致） */
.l-fit-center { width: fit-content; margin-inline: auto; }

/* 縦積みユーティリティ */
.l-stack { display: flex; flex-direction: column; }

/* =====================================================================
 * サイトヘッダー（全ページ共通）
 * MV上に完全透過で重なる。実測: y=50（ヘッダー内）と y=110（MV内）の
 * 同x座標の色が一致する（x=0 で #D5BCD1 / #D6BDD2、x=400 で #EAD2EC / #EAD1EE）
 * ＝ティントは無い。背景色を付けるとカンプと違う見た目になる。
 * 追尾しない（position: absolute）。スクロール状態のSPカンプにヘッダーが
 * 写っていないことを実測で確認済み。
 * ===================================================================== */
.site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  border-block-end: 1px solid var(--c-white);
  color: var(--c-white);
}
/* PCだけ下線が「高さ100pxの外側」にある。カンプ実測（x=700 縦走査）:
     SP  device y98..99 が白 ＝ CSS y49 ＝ 高さ50pxの内側（border-boxのまま一致）
     PC  y99が背景・y100が白  ＝ 高さ100pxの1px下
   border-box のままだと PC だけ下線が1px上に出るため、PCは高さを101pxにして
   内側の下線を y100 に落とす。中身の上下中央は content-box 100px 基準で変わらない。 */
@media (min-width: 1024px) {
  .site-header { height: calc(var(--header-h) + 1px); }
}

/* MVの無い下層ページ（確定 2026-07-31。Browdia_サロン一覧.jpg のヘッダーを実測）。
   透過ではなく淡いパープルのグラデを敷き、position は relative にして本文を押し下げる。
   実測値: x=20 #DAC2DA / x=400 #CFB3D9 / x=800 #CBA9DB / x=1200 #D7BDDA / x=1580 #E0C2DA
   （中央がやや濃く両端が淡い横グラデ）。ヘッダー下にはパンくず帯 #FBF9FC が入る。 */
body.is-sub .site-header {
  position: relative;
  background: linear-gradient(90deg, #DAC2DA 0%, #CFB3D9 25%, #CBA9DB 50%, #D7BDDA 75%, #E0C2DA 100%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline-start: var(--gutter);
}
/* 48px は「ロゴの絵柄を x51 に置く」ための値。logo.svg は 190x40 の箱の中で
   絵柄が x3..236（幅184）に入っているため、箱を50pxに置くと絵柄が53pxから始まる。
   PSD #1035 BROWDIA_logo_W は L=51 T=34 R=236 B=74（PCカンプ・メニューカンプとも同値）。 */
@media (min-width: 1024px) { .site-header__inner { padding-inline-start: 48px; } }

.site-header__logo { margin-inline-end: auto; }
.site-header__logo img { width: 92px; height: 19px; }
@media (min-width: 1024px) {
  .site-header__logo img { width: 190px; height: 40px; }
  /* 上下中央（y29.5）ではなく T=34。ハンバーガーのアイコンは中央のままで一致するので、
     ロゴだけがカンプで4.5px下がっている（Task 12 の重ね合わせで実測）。 */
  .site-header__logo { align-self: flex-start; margin-block-start: 34px; }
}

/* グロナビは 1024px 未満で非表示（SPカンプにテキストリンクが無い＝実測） */
.global-nav { display: none; }
@media (min-width: 1024px) {
  .global-nav { display: block; margin-inline-end: 54px; }
  .global-nav__list { display: flex; gap: 44px; }
  .global-nav__link { font-size: 14px; letter-spacing: .06em; }
}

/* ハンバーガー: 左辺に1px白の縦罫を持つ正方形セル。
   アイコンはカンプ実測どおり SP 20x13 / PC 40x26。
   タップ領域はセル 50x49（PC 100x100）で 44px 基準を満たす。 */
.site-header__toggle {
  display: grid;
  place-items: center;
  width: 50px;
  height: 100%;
  border-inline-start: 1px solid var(--c-white);
}
.site-header__toggle img { width: 20px; height: 13px; }

@media (min-width: 1024px) {
  .site-header__toggle { width: 100px; }
  .site-header__toggle img { width: 40px; height: 26px; }
}

/* close.svg は正方形なので別サイズ */
.site-header--overlay .site-header__toggle img { width: 18px; height: 18px; }
@media (min-width: 1024px) {
  .site-header--overlay .site-header__toggle img { width: 36px; height: 36px; }
}

/* =====================================================================
 * メニューオーバーレイ（<dialog>）
 * PC背景は bg_mv.png を流用（専用素材は無い。実測で平均絶対差3.52＝最良フィット）。
 * SPは専用の bg_menu_sp.png。
 * リンク文字は大項目・サブ・フッターとも #8D5CA6。ダッシュ・区切り線・© は純白。
 * ===================================================================== */
.gnav {
  /* dialog の既定（width:fit-content / max-width / border / padding / margin）を全部潰す */
  width: 100%;
  max-width: none;
  height: 100dvh;      /* iOSのvh問題回避。100vh は使わない */
  max-height: none;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--c-primary);
  background: url("/assets/img/bg-menu-sp.webp") center / cover no-repeat;
  overflow-y: auto;
  overscroll-behavior: contain;   /* iOSで背面がラバーバンドしないように */
}
@media (min-width: 1024px) {
  .gnav { background-image: url("/assets/img/bg-mv.webp"); }
}

.gnav::backdrop { background: rgba(0, 0, 0, .4); }

/* フェード（prefers-reduced-motion は base.css で一括無効化される）。
   @starting-style 非対応ブラウザでは瞬時表示にフォールバックするだけ。 */
.gnav { opacity: 0; transition: opacity .15s, overlay .15s allow-discrete, display .15s allow-discrete; }
.gnav[open] { opacity: 1; }
@starting-style { .gnav[open] { opacity: 0; } }

.gnav__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* 上端 74.5px ＝ ヘッダーバー50px ＋ 24.5px。
     オーバーレイ内のヘッダーバーは .site-header が position:absolute で流れの外にあるため、
     バーの高さぶんを自分で確保しないと1項目目がバーに食い込む（実測で10px重なっていた）。
     74.5 はカンプ Browdia_menu_sp.jpg の実測値。サブ4項目の位置が
     4つとも device +69（＝CSS +34.5）ずれていたので、padding 40px に足して出した。 */
  padding: 74.5px var(--gutter) 40px;
}
@media (min-width: 1024px) {
  /* ヘッダー下領域(101-900)の上下中央（検索ボックス中心 y=501 ≒ 領域中心 500.5＝実測）。
     オーバーレイ内のヘッダーバーは .site-header が position:absolute で流れの外にあるため、
     margin-block-start でヘッダー高ぶん押し下げないと内容がヘッダーに食い込む。 */
  .gnav__inner {
    justify-content: center;
    min-height: calc(100dvh - var(--header-h));
    margin-block-start: var(--header-h);
    padding: 0;
  }
}

.gnav__cols { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) {
  /* ★PCカンプ（PC/デザイン/Browdia_menu.jpg・1600x900）の組み:
       左に ナビ列（x202/x507 の2列）、その下に フッター（区切り線＋リンク＋©）。
       右に 検索パネル。**左のかたまりと検索パネルが下端でそろう**
       （©のインク下端 ~780 ／ パネル下端 ~770）。
     ★grid にする。flex の1行だと フッターを「ナビの下・検索の左」に置けない。
       DOMの並び（ナビ → 検索 → フッター）は変えずに置き場所だけ変える
       ＝ SPの読み順はカンプのまま。 */
  .gnav__cols {
    display: grid;
    grid-template-columns: 640px minmax(0, 486px);
    grid-template-areas:
      "nav  search"
      "foot search";
    justify-content: space-between;
    align-content: end;             /* 下端そろえ */
    /* カンプ実測: Event のインク上端285・Training 518・フッターのリンク717・©766。
       下端そろえなので、この溝でナビ列の縦位置が決まる。 */
    row-gap: 55px;
    width: min(1200px, 100% - 40px);
    margin-inline: auto;
  }
  /* ★検索パネルが2行にまたがるので、行の高さはパネルの高さで決まる。
       余りをブラウザに配らせず、ナビは行の上・フッターは行の下に固定して、
       ナビの上の余白（41px）でカンプの縦位置に合わせる
       （カンプ: パネル上端230 → Event のインク上端285）。 */
  .gnav__nav    { grid-area: nav; align-self: start; margin-block-start: 41px; }
  .gnav__search { grid-area: search; align-self: end; }
  .gnav__foot   { grid-area: foot; align-self: end; }
}

/* SP: 1カラム。「左揃えテキストのブロックを中央寄せ」パターン。
   最長項目 Training & Certification の描画幅でブロック幅が決まるので、
   padding-left の固定値で組むとフォントが変わったとき中央がずれる。 */
.gnav__nav { width: fit-content; margin-inline: auto; }
@media (min-width: 1024px) {
  /* PCは2カラム。CSS multi-column（column-count）で組んではいけない —
     左3グループ(高さ329px)・右5項目(高さ257px)で高さが違い、
     multicolの高さ均等化アルゴリズムが項目を別の列へ移してしまう。 */
  .gnav__nav { display: flex; gap: 0; width: 640px; margin-inline: 0; }
  .gnav__col { width: 304px; }      /* 列ピッチ304px（1列目 x204 / 2列目 x508＝実測） */
}

.gnav__item { margin-block-end: 8px; }
.gnav__link {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: .03em;
}
@media (min-width: 1024px) {
  .gnav__item { margin-block-end: 0; }
  .gnav__link { font-size: 24px; line-height: 58px; }   /* PSD実測 24px・大項目ピッチ58-59px */
}

.gnav__sub { margin-block: 4px; padding-inline-start: 27px; }
@media (min-width: 1024px) { .gnav__sub { padding-inline-start: 40px; } }

/* サブ項目の先頭記号は「白い2pxの横棒」。em dash ではない（実測: PC 13x2px / SP 10.5x2px）。
   テキストの「—」で組むと色・太さ・長さが再現できない。 */
.gnav__sub-item { position: relative; }
.gnav__sub-item::before {
  content: "";
  position: absolute;
  inset-inline-start: -17px;
  inset-block-start: 50%;
  width: 10.5px;
  height: 2px;
  background: var(--c-white);
}
@media (min-width: 1024px) {
  .gnav__sub-item::before { inset-inline-start: -23px; width: 13px; }
}
.gnav__sub-link { font-size: 14px; line-height: 27px; letter-spacing: .04em; }
@media (min-width: 1024px) { .gnav__sub-link { font-size: 16px; line-height: 30px; } }

.gnav__search { width: 100%; }
@media (min-width: 1024px) { .gnav__search { width: 486px; flex: none; } }   /* カンプ実測 x910..1395 */

.gnav__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-block-start: 20px;
  /* PCはカンプ実測でリンク717 → ©766（49px）。SPは12pxのまま */
  border-block-start: 1px solid var(--c-white);
}
@media (min-width: 1024px) {
  /* 区切り線とフッターはナビ列の左端に揃える（カンプ実測 x200..840 の640px幅）。
     margin-inline:auto で中央寄せすると .gnav__cols（1200px中央）とずれる。
     max() で、ビューポートが1240px未満のときも左に20pxの余白を残す。 */
  /* ★grid のエリアに入れたので、幅と左端は列（640px）が決める。
       margin で寄せていたのは flex だった頃の名残。 */
  .gnav__foot { width: 640px; gap: 20px; }
}

/* SP: 2列2行。PC: 1行＋「｜」区切り */
.gnav__foot-list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 4px 20px;
  justify-content: center;
}
@media (min-width: 1024px) {
  .gnav__foot-list { display: flex; gap: 0; }
  .gnav__foot-item + .gnav__foot-item::before { content: "｜"; margin-inline: 12px; color: var(--c-white); }
}
.gnav__foot-link { font-size: 14px; }
@media (min-width: 1024px) { .gnav__foot-link { font-size: 16px; } }

.gnav__copy { font-size: 12px; font-weight: 700; color: var(--c-white); }

/* JS無効時: dialog は open が無ければ display:none なので、
   リンクはDOMに残りクロールされるが視覚的には出ない。追加の指定は不要。 */

/* ---------------------------------------------------------------- 本文とフッターの間
 * 中身がフッターに付かないように、main の下に余白を置く（2026-08-10 発注者の指示）。
 * それまでは全ページで間が **0** だった（19ページで実測）。
 *
 * カンプ実測（最後の中身の下端 -> フッターの上端）:
 *   PC  サロン一覧 5401->5482 ／ スクール一覧 6248->6329 ／ 固定記事 10731->10812  = どれも80
 *   SP  サロン一覧 15537->15617 ／ スクール一覧 14398->14478 = どちらも80（750幅なので CSS 40）
 *   ※投稿記事だけ 97（PC）/ 100（SP）。ブロックの下余白ぶん多い。3枚が揃う80を採る。
 *
 * ★自分で地色を塗る節がページの最後に来るときは、カンプでも余白は「塗りの中」にある。
 *   サロン詳細の .detail-recommend は下79pxまで塗りが続いてフッターに接している
 *   （Browdia_サロン詳細.jpg 最後のボタン下端8533 -> 塗りの下端8612 -> フッター8613）。
 *   そこへ main の余白を足すと、塗りとフッターの間に地色の帯が挟まって割れて見える。
 *   だから .detail-recommend では同じ量を打ち消す（salon.css 側）。 */
main { padding-bottom: 40px; }
@media (min-width: 1024px) { main { padding-bottom: 80px; } }

/* =====================================================================
 * サイトフッター（全ページ共通）
 * 背景は装飾（内容の無い抽象グラデ）なので background-image ＋ cover でよい。
 * PC/SPで別アートワークなのでメディアクエリで出し分ける。
 *
 * ⚠️ リンク色 --c-primary(#8D5CA6) は背景に対して 3.19:1 で WCAG AA(4.5:1) に
 *    届かない。ただしこれはカンプ自体の仕様で、カンプのリンク色を実測すると
 *    #895BA4（＝#8D5CA6。差はJPEG圧縮）だった。勝手に変えるとカンプからの
 *    無断逸脱になるためカンプ通りに実装している。
 *    是正するなら --c-navy(#414167・6.01:1) へ寄せるか背景に白のオーバーレイ。
 *    発注者確認事項（Task 12 で起票）。
 * ===================================================================== */
.site-footer {
  min-height: 322.5px;
  padding-block: 40px;
  background: url("/assets/img/bg-footer-sp.webp") center / cover no-repeat;
  color: var(--c-primary);
}
@media (min-width: 1024px) {
  .site-footer {
    min-height: 316px;
    padding-block: 0;
    background-image: url("/assets/img/bg-footer.webp");
  }
}

/* SP: 全要素を中央寄せの縦積み */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  height: 100%;
}
/* PC: ロゴ左・リンク群右の横並び */
@media (min-width: 1024px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 316px;
    padding-inline: 43px 53px;
  }
}

.site-footer__logo img { width: 220px; height: 46px; }
@media (min-width: 1024px) { .site-footer__logo img { width: 230px; height: 48px; } }

.site-footer__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
@media (min-width: 1024px) { .site-footer__body { align-items: flex-end; gap: 12px; } }

/* SP: 縦積み・区切り無し（ピッチ30px＝実測）。PC: 横一列＋「｜」 */
.site-footer__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
@media (min-width: 1024px) {
  .site-footer__list { flex-direction: row; gap: 0; }
  .site-footer__item + .site-footer__item::before {
    content: "｜";
    margin-inline: 14px;
    opacity: .6;
  }
}

.site-footer__link { font-size: 14px; letter-spacing: .04em; }
@media (min-width: 1024px) { .site-footer__link { font-size: 16px; } }

/* SNSアイコン（2026-08-20 発注者の依頼）。設定にURLがあるときだけ出る。
   マークは author カードと同じ仮のsvg（mask）。フッターの文字色（紫）で塗り、ホバーで薄く */
.site-footer__sns { display: flex; align-items: center; gap: 22px; }
.site-footer__sns-link {
  display: block; width: 24px; height: 24px;
  background: var(--c-primary);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  transition: opacity .2s;
}
.site-footer__sns-link:hover { opacity: .65; }
.site-footer__sns-link--instagram { -webkit-mask-image: url("/assets/img/icon-instagram.svg"); mask-image: url("/assets/img/icon-instagram.svg"); }
.site-footer__sns-link--x         { -webkit-mask-image: url("/assets/img/icon-x.svg");         mask-image: url("/assets/img/icon-x.svg"); }
.site-footer__sns-link--tiktok    { -webkit-mask-image: url("/assets/img/icon-tiktok.svg");    mask-image: url("/assets/img/icon-tiktok.svg"); }

.site-footer__copy {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-white);
}

/* タブレット帯（768〜1023px）。方針は top.css の同名ブロックのコメント参照。
   オーバーレイとフッターの中身も375pxの列に寄せる。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .gnav__cols,
  .gnav__foot,
  .site-footer__inner { width: min(100%, var(--container)); margin-inline: auto; }
}