/* =====================================================================
 * BROWDIA top.css — トップページ固有（MV / タグバー / 紹介ブロック）
 * base -> layout -> components の後に読む。
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * MV
 * 高さ固定の position:relative コンテナに全レイヤーを絶対配置で重ねる。
 * ヘッダー（position:absolute）はこの上に乗る。
 * 重なり順: 背景 < ウォーターマーク < モデル < キャッチ/検索ボックス
 * ------------------------------------------------------------------- */
.mv {
  position: relative;
  height: var(--mv-h);              /* SP 726px / PC 900px */
  overflow: hidden;
  /* SP素材は 750x1452 ＝ SP MV(375x726 CSS)の丁度2倍。cover でピクセル等倍に収まる。
     色相(R-B)が上端・下端ともカンプと一致するので反転しない（PC素材とは扱いが違う） */
  background: url("/assets/img/bg-mv-sp.webp") center / cover no-repeat;
}

/* --- PC背景の置き方（cover ではない） ---
   ★デザインの原寸は 1600px。PSDカンバスは 3277px だが、これは「アートボードが2枚」
     並んでいるため（PSDのアートボードリソース artb で確認）:
       「Browdia」     = (0, 0, 1600, 12631)   ← トップページ本体
       「Browdia_menu」= (1677, 0, 3277, 900)  ← メニュー展開時のカンプ
     3277 = 1600 + 77(ガター) + 1600。裏取り: PC/デザイン/Browdia_menu.jpg は実測1600x900で
     2枚目の矩形と完全一致する。PSDのガイド(image resource 1032)も x=200/800.375/1400 で
     コンテナ(1200px中央)の位置と合う。
     つまり カンプJPEG の x座標 = デザインの x座標（オフセット0）。

   カンプ実測（色相軸 R-B での相関、NCC=+0.911）:
     ・素材を 1.99倍（2000x900 -> 3980x1791）に拡大
     ・上下反転して配置（build-assets.php で焼き込み済み。理由はそちらのコメント）
     ・画像左端 = デザイン x-880 / 画像上端 = デザイン y-120
   縦横比が 1600:900 と一致するので拡大は等方（横だけ伸ばしているのではない）。

   background-position の % は「余白に対する割合」なので
   画像左端 = (vw - imgW) * 50% + L。デザイン上の位置は、コンテナが中央寄せなので
   -880 + (vw - 1600)/2。両者を等しくすると L = imgW/2 - 880 - 800 = 310px。
   （この L は倍率と ox がトレードオフしても 310 でほぼ動かない頑健な値）
   vw が 3360px を超えると画像が画面左端に届かなくなるので max() で追従拡大させる
   （3980/3360 = 1.1846）。 */
@media (min-width: 1024px) {
  .mv {
    background-image: url("/assets/img/bg-mv.webp");
    background-size: max(3980px, 118.46vw) auto;
    background-position: calc(50% + 310px) -120px;
  }
}

/* --- 1. ウォーターマーク（モデルの背面・背景の前面） ---
   値はカンプJPEGの目視ではなく、PSDのテキストレイヤーから直接取得した一次情報
   （PC/PSD/Browdia_top.psd レイヤー#990、2026-08-03）:
     ・レイヤー名も本文も literally「Browdia Browdia」（語間の半角スペースあり）
     ・書体 JosefinSans-Thin / Tracking 0 / HorizontalScale 1.0
     ・/FontSize 300 × 変形行列 1.2795 = 実効 383.9px ＝ 1600px幅で 24vw
     ・レイヤー不透明度 153/255 = 0.60
     ・描画後のインク矩形 L=-35 T=352 R=2363 B=650（2398 x 298）
     ・変形行列の tx=1158.79 はインク中心1164と一致（中央揃え）。
       ty=640.86 がベースライン。640.86-352=288.86 を font の ink-top 0.7520em で割ると
       384.1px となり、変形行列から出した383.9と独立に一致する。

   配置の計算（フォント実測: unitsPerEm 1000 / hhea ascent 750 descent 250 /
   "Browdia Browdia" の ink L=0.1190em top=0.7520em 幅=6.7860em）:
     ・ascent+descent = 1000 = 1em なので line-height:1 だと half-leading が 0 になり、
       ベースラインは box上端から正確に 0.75em。ink上端は box上端の 0.002em 上。
       よって box上端 = 352 - 0.002*383.9 ≈ 352.8 ＝ MV高900の 39.2%
     ・box左端 = ink左(-35) - 0.1190em*383.9*0.9202 = -77.0px ＝ -4.81vw

   ★scaleX(.9202) について:
     配信中の Google Fonts 版 Josefin Sans は、デザインで使われた版より約8%幅広い。
     ink高は 0.7750em*383.9 = 297.6 でPSDの298と完全一致するのに、
     ink幅は 6.7860em*383.9 = 2605 となりPSDの2398より207px広くなる
     （HorizontalScale も Tracking も 1.0/0 なので圧縮指定ではなく字形の版違い）。
     font-size を落として幅を合わせると今度は字高が8%低くなるため、
     字高は font-size で、字幅は scaleX で合わせる。2398/2605 = .9202。
     transform-origin を左にして box左端が動かないようにする。 */
.mv__watermark {
  position: absolute;
  inset-block-start: 34%;
  inset-inline-start: -4vw;
  z-index: 1;
  font-family: var(--font-en);
  font-weight: 100;                 /* JosefinSans-Thin（PSD実測） */
  font-size: 22vw;
  line-height: 1;
  white-space: nowrap;
  color: var(--c-white);
  opacity: .6;                      /* PSDレイヤー不透明度 153/255 */
  transform: scaleX(.9202);
  transform-origin: 0 50%;
  user-select: none;
  pointer-events: none;
}
@media (min-width: 1024px) {
  /* 1600px幅で font-size 383.9px / ink左端 x=-35 / ink上端 y=352 になる比率 */
  .mv__watermark {
    inset-block-start: 39.2%;
    inset-inline-start: -4.81vw;
    font-size: 24vw;
  }
}

/* --- 2. モデル（下端をMV下端に揃える） --- */
/* SP素材は 750x1317（縦横比1.756）。下端合わせなので幅が広がるほど上へ伸びる。
   width:100% のままだと 390px でヘッダーに9px、452pxで118px食い込む（Task 12で実測）。
   カンプ(375px)の見え方は「上端67.5px ＝ ヘッダー下端50pxから17.5px空き」で、
   これを保てる上限がちょうど幅375px なので、そこで頭打ちにする。
   375px以下では min() が 100% を選ぶのでカンプの表示は一切変わらない。 */
.mv__model {
  position: absolute;
  z-index: var(--z-mv-model);
  inset-block-end: 0;
  inset-inline-start: 0;
  width: min(100%, 375px);
}
.mv__model img { width: 100%; height: auto; }
@media (min-width: 1024px) {
  /* カンプ実測: 1600px幅で x=97・幅796。コンテナ(1200px中央)は200..1400なので
     モデル左端はコンテナ左端から103px左。
     ビューポート基準の % で置くとコンテナとの相対位置が幅ごとにずれるため、
     キャッチ・検索ボックスと同じくコンテナ基準（calc(50% - 600px)）で組む。
     max() で1406px未満のときも画面外へ出さない。 */
  .mv__model {
    inset-inline-start: max(0px, calc(50% - 703px));
    width: min(796px, 55%);
    max-width: none;
  }
}

/* --- 3. 回転テキスト --- */
/* 重なり順: 背景 < ウォーターマーク(1) < 回転テキスト(1) < モデル(2) < キャッチ/検索(3)
   カンプでも回転テキストの右下（"make" の末尾）がモデルの髪の後ろに隠れているため、
   モデルを回転テキストより前面に置く（発注者確認 2026-07-31）。
   ウォーターマークと同じ z-index 1 だが、DOM順で回転テキストが後ろにあるため上に描画される。 */
.mv__rotate {
  position: absolute;
  z-index: 1;
  inset-block-start: 80.5px;
  inset-inline-start: 31.5px;
  width: 115px;
  height: 115px;
  pointer-events: none;
  animation: mv-rotate 24s linear infinite;
}
@media (min-width: 1024px) {
  .mv__rotate {
    inset-block-start: 161px;
    /* コンテナ左端 +40px。ビューポートが1200px未満だと calc が負になり
       画面外へ出るため、モデル・SCROLLと同じく max() でクランプする（Task 12）。 */
    inset-inline-start: max(20px, calc(50% - 600px + 40px));
    width: 230px; height: 230px;
  }
}
@keyframes mv-rotate { to { rotate: 360deg; } }

/* --- 4. キャッチコピー --- */
.mv__copy {
  position: absolute;
  z-index: var(--z-mv-copy);
  /* カンプSPの1行目インク上端は device y660 ＝ CSS 330。
     20px/行送り35px の行box上端はインク上端の9px上なので 321px を指定する
     （330 を入れると9px下がる。Task 12で実測） */
  inset-block-start: 321px;
  inset-inline-start: var(--gutter);
}
@media (min-width: 1024px) {
  /* カンプの最終行「アートメイク情報サイト。」は**インク**下端が y817。
     行ボックスの下端はインク下端の13px下（35px/行送り60pxのハーフレディング＋ディセンダ分。
     docs/decisions/2026-08-03-psd-measurement.md「縦位置はインクの上端で指定されている」）なので
     ボックス下端は830 ＝ MV下端899 から 70px 上。
     82px（＝インク下端をそのままCSSに入れた値）だと3行とも12px上にずれる（Task 12で実測）。
     bottom 基準で組むと行数が変わっても崩れない。
     左端はコンテナ左端だが、1200px未満では calc が負になり「美」が画面外へ出るため
     20px でクランプする（1024pxで x=-88 になっていた。Task 12） */
  .mv__copy {
    inset-block-start: auto;
    inset-block-end: 70px;
    inset-inline-start: max(20px, calc(50% - 600px));
  }
}

/* letter-spacing と line-height は明示する。body の 1.75 を継承すると
   行ピッチがカンプ（PC 60-61px / SP 35px）とずれる。
   字送りは PSDテキストレイヤー#995 の /Tracking 250 ＝ .25em（--ls-headline）。
   line-height 60px も同レイヤーの /Leading 60.0 と一致する。
   palt は必須。切ると1行目「美しさを、デザインする。」が38px広くなる（base.css参照）。

   ★letter-spacing は font-size を持つ .mv__catch-line 側に置くこと。
     h1 に書くと `em` が h1 自身の font-size（ブラウザ既定の 32px）で解決され、
     8px という絶対値になって35pxの行に継承される（正しくは 35 x .25 = 8.75px）。
     この1行で PC の1行目が12px、紹介ブロック見出しは20px狭くなっていた（Task 12で実測）。 */
.mv__catch {
  font-weight: 700;
  color: var(--c-white);
  font-feature-settings: "palt" 1;
}
/* SPの値はPSDから取れない（SPは .psb で psd-inspect.php が未対応）ため、
   カンプ Browdia_sp.jpg のインクを実測して逆算した:
     インク高 37/38/38 device ＝ 18.5/19 CSS -> font-size 20px
     インク幅 247.5 / 298.5 / 246.5 CSS  -> letter-spacing .175em で RMS 2.5px
   23px/.25em では3行目が折り返して4行になっていた（Task 12で発覚）。 */
.mv__catch-line {
  display: block;
  font-size: 20px;
  line-height: 35px;
  letter-spacing: .175em;
}
@media (min-width: 1024px) {
  /* PSD の /FontSize 実測値 35px（出現4回＝MVキャッチ）。
     カンプは1600px幅なので 35/1600 = 2.19vw だが、そのまま vw 連動にすると
     1600px超で巨大化する。1186px 未満のときだけ縮めて検索ボックスとの衝突を避ける
     （1024pxで 30.2px）。行送りは 60/35 = 1.7143 の比で追従させる。 */
  .mv__catch-line { font-size: min(var(--fs-mv-copy), 2.95vw); line-height: 1.7143; }
}

/* --- 5. 検索ボックス --- */
.mv__search {
  position: absolute;
  z-index: var(--z-mv-copy);
  inset-block-start: 438.5px;
  inset-inline: var(--gutter);
}
@media (min-width: 1024px) {
  /* 右端をコンテナ右端（1400）に揃える。上端224px。
     キャッチと同じく、1200px未満では calc が負になりパネル右側が画面外へ出るため
     20px でクランプし、幅も 500/1600 = 31.25vw ではなく「1190px未満でだけ縮む」
     42vw で押さえる（1024pxで 430px）。パネル内はすべて % 幅なので追従する。 */
  .mv__search {
    inset-block-start: 224px;
    inset-inline-start: auto;
    inset-inline-end: max(20px, calc(50% - 600px));
    width: min(500px, 42vw);
  }
}

/* --- SCROLL インジケータ ---
   ★SPカンプにも存在する（Browdia_sp.jpg 実測: 縦書きテキスト device y599..676、
     縦線 y702..876、線と文字の中心 x696.5、ドット中心 y726）。
     「PCのみ」としていたのは誤りで、SPでは未実装だった（Task 12で発覚）。

   PCの値は PSD #997（JosefinSans-SemiBold 16px / Tracking 200 / ink L1507 T616 R1520 B695）。
   カンプ実測の縦線は y720..839 の120px。12px/.3em では文字が13px短く、線も22px短かった。 */
.mv__scroll {
  display: flex;
  position: absolute;
  z-index: var(--z-mv-copy);
  /* SP: 文字インク上端 device599 ＝ CSS 299.5（実レンダリングで裏取り済み） */
  inset-block-start: 299px;
  inset-inline-end: 21px;          /* 線の中心が CSS x348（カンプ実測 device 696.5） */
  flex-direction: column;
  align-items: center;
  gap: 13px;                        /* SP: 文字下端676 -> 線上端702 ＝ 26device */
  /* カンプ実測 #BF6AA1（背景#F6DBEAより暗い）。白ではない */
  color: var(--c-accent);
}
.mv__scroll-text {
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 8px;                   /* SPはPCのちょうど半分（インク78device = 39CSS） */
  letter-spacing: .2em;             /* PSD /Tracking 200 */
}
/* 縦線の途中に丸ドットが乗る（カンプ実測）。線を relative にして ::before で置く。
   ドットは線上を下方向へ繰り返し流れる（スクロール誘導）。
   prefers-reduced-motion は base.css で一括停止されるため個別指定は不要。 */
.mv__scroll-line {
  position: relative;
  width: 1px;
  /* SP: 線は検索パネルの上端（CSS 438.5）で隠れる。351..438 の87px */
  height: 87px;
  background: currentColor;
}
.mv__scroll-line::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 0;
  width: 6px;
  height: 6px;
  translate: -50% -50%;
  border-radius: 50%;
  background: currentColor;
  animation: mv-scroll-dot 2.4s cubic-bezier(.45, 0, .25, 1) infinite;
}

/* 1024〜1279px はMVがPCレイアウト（検索パネルが上端224pxから556px）になり、
   コンテナ外側の余白が無いのでSCROLLがパネルに必ず重なる。この帯だけ出さない。 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mv__scroll { display: none; }
}

@media (min-width: 1280px) {
  .mv__scroll {
    inset-block-start: 617px;
    /* カンプ実測(1600px幅): テキスト右端 x=1518 ＝ コンテナ右端1400 から 118px 右。
       ビューポート右端基準(82px固定)だと画面が広いほど右へ離れてしまうため、
       モデル・キャッチ・検索ボックスと同じくコンテナ基準で置く。
       1280pxでもパネルに重ならないよう画面端からの最小距離は12pxにする
       （1280pxで パネル右端1240 / SCROLL左端1247）。 */
    inset-inline-end: max(12px, calc(50% - 718px));
    gap: 26px;
  }
  .mv__scroll-text { font-size: 16px; }
  .mv__scroll-line { height: 120px; }
  .mv__scroll-line::before { width: 9px; height: 9px; }
}

@keyframes mv-scroll-dot {
  0%        { inset-block-start: 0;    opacity: 0; }
  15%       { opacity: 1; }
  80%       { opacity: 1; }
  100%      { inset-block-start: 100%; opacity: 0; }
}

/* ---------------------------------------------------------------------
 * タグバー帯（フェーズ2aは高さのみ確保）
 * 実装時の参考: 実文言は PSDレイヤー#983「＃リップ　＃4D　＃アイ…」
 * （L=-27 T=930 R=1620 B=950、14px / Tracking 50 / #8D5CA6）。
 * ------------------------------------------------------------------- */
.tagbar {
  height: var(--tagbar-h);          /* SP 50px / PC 80px */
  background: var(--c-bg-pink);
  color: var(--c-grad-a);
  overflow: hidden;
}

/* =====================================================================
 * 紹介ブロック
 * 値の出所は PSD の一次情報。カンプJPEGの目視ではない。
 *   取り方: docs/decisions/2026-08-03-psd-measurement.md
 *   再現:   php scripts/psd-inspect.php PC/PSD/Browdia_top.psd --y=1748..2911 --text
 * セクション範囲は PC カンプ y1748..2911（高さ1164px）/ SP y2639..4638（1000 CSS px）。
 * 以下「rel」はセクション上端からの相対値。
 * ===================================================================== */
.intro {
  position: relative;
  min-height: 1000px;
  overflow: hidden;
  color: var(--c-white);
  /* SP素材は 750x2000 ＝ セクション 375x1000 CSS の丁度2倍でアスペクトが完全一致するため
     cover は「倍率0.5・切り取りゼロ」になる。ただしセクション高が1000pxである前提に依存する
     ので、高さが伸びても上端が固定される 100% auto + top center で組む。 */
  background: url("/assets/img/bg-intro-sp.webp") top center / 100% auto no-repeat;
}

/* --- PC背景（cover ではない） ---
   カンプ実測（色相の平均絶対誤差 MAD、内容物は局所分散マスクで除外）:
     向き   通常 1.11 / 左右反転 12.64 / 上下反転 21.95 / 180度 16.57 -> 反転なし
     倍率   1.00（等倍）。cover の 0.97倍は MAD 1.60、center/cover そのものは MAD 5.52 で明確に外れる
     位置   画像左端 = デザイン x-70（±15） / 上端 = セクション上端
   上下2帯（y1755..1855 と y2850..2905）の横断面照合でも独立に倍率1.01・オフセット-79/-82 と出る。

   ※紹介ブロック専用の背景レイヤーはPSDに無く、全ページ共通の背景から2000x1200を
     任意に矩形選択して書き出したもの。だから -70 という半端な値になる。丸めないこと。

   background-position の % は差分に対する割合なので
   画像左端 = (vw - imgW)*50% + L。デザイン上の -70 + (vw-1600)/2 と等しくして L = imgW/2 - 870 = 130px。
   vw が 1740px を超えると画像が画面左端に届かないので max() で追従拡大（2000/1740 = 1.1495）。 */
@media (min-width: 1024px) {
  .intro {
    /* ★2026-08-05 発注者の指示「ここが大きすぎるので、もう少し縮小してください」。
       ブロック全体を1割小さくする（発注者が「ブロック全体を1割」を選択）。
       ここから下の PC の値はすべて「カンプ実測値 x var(--intro-k)」で書く。
       カンプの数字を消さないこと。戻すときは k を1にすれば元に戻る。
       ★背景画像だけは倍率を掛けない。この背景は画面の端から端まで敷く前提で
         倍率と位置を MAD で合わせ込んである（上のコメント）。0.9倍にすると
         1600px幅で画像が左端に届かなくなり、max() の分岐が変わって
         合わせ込んだ -70px のオフセットが約67px ずれる。
         セクションが低くなるぶん下が多く切れるだけなので、見えている範囲は
         カンプのまま保たれる。 */
    /* ★2026-08-06、さらに縮小（発注者「ノートPCで見たとき圧迫感がある」）。
       .9 では 1600x900 の画面でセクション高1048px＝1.16画面分あり、
       スクロールしても収まりきらないのが圧迫感の実体だった。
       .8 で931px＝1.03画面分、.75 で873px＝0.97画面分。
       2026-08-06、発注者の選択で .75（1画面に完全に収まる）を採る。 */
    --intro-k: .75;
    min-height: calc(1164px * var(--intro-k));
    background-image: url("/assets/img/bg-intro.webp");
    background-size: max(2000px, 114.95vw) auto;
    background-position: calc(50% + 130px) 0;
  }
}

/* --- ウォーターマーク（MVの #990 と同一の見た目。詳細はMV側のコメント） --- */
/* PSDレイヤー#830: ink L=-35 T=2127 R=2363 B=650相当（2398x298）、不透明度153/255。
   セクション上端1748基準で ink上端 rel379。
   SPはPSBを解析できていないためカンプ実測: ink上端 rel386 CSS / ink高74 CSS
   -> font-size = 74 / 0.7750em = 95.5px = 25.5vw。
   SPは「B」が完全に画面外で「r」が左端から始まるので、box左端 = -0.6670em*95.5*0.9202 = -58.6px。 */
.intro__watermark {
  position: absolute;
  inset-block-start: 386px;         /* ink上端386 - 0.002em*95.5 ≒ 386 */
  inset-inline-start: -15.63vw;     /* -58.6px @375 */
  z-index: 0;
  font-family: var(--font-en);
  font-weight: 100;
  font-size: 25.5vw;
  line-height: 1;
  white-space: nowrap;
  color: var(--c-white);
  opacity: .6;
  transform: scaleX(.9202);
  transform-origin: 0 50%;
  user-select: none;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .intro__watermark {
    /* カンプ実測 379 / -4.81vw / 24vw に k を掛けている。
       画面の外へはみ出す装飾なので、中心ではなく左端を基準に縮めてある。 */
    inset-block-start: calc(379px * var(--intro-k));    /* ink上端 rel379 */
    inset-inline-start: calc(-4.81vw * var(--intro-k)); /* -77.0px @1600 */
    font-size: calc(24vw * var(--intro-k));             /* 383.9px @1600 */
  }
}

/* --- 写真ストリップ --- */
/* SP: 3枚を等幅グリッド。105x135 CSS・gap15・左右余白15（375 - 15*2 - 15*2 = 315 = 105*3）。
   素材360x460(比0.783)を105x135(比0.778)で使うので0.6%だけ横が余る -> object-fit: cover。 */
.intro__strip {
  position: absolute;
  inset-block-start: 272px;
  inset-inline: var(--gutter);
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.intro__img {
  width: 100%;
  height: 135px;
  object-fit: cover;
  border-radius: 10px;              /* 実測 20 device px @2x */
}
.intro__img--pc { display: none; }  /* img_04 はSPでは使われていない */

/* PC: 4枚とも 360x460・上端 rel120・角丸r20px。等間隔ではない。
   デザイン座標 x -260 / 701 / 1121 / 1541（A→B だけ601px空いてテキスト列になる）。
   コンテナ(1200px中央 = デザイン200..1400)基準に直すと left -460 / 501 / 921 / 1341。
   flex+gap では再現できないので4枚とも絶対配置する。
   ※PSDではフレームに DrSh(ソフトライト・距離0・ぼかし20px) 等の効果が乗っており、
     カンプでも縁の背景が約4.5%暗くなる。他要素は全て影なしで統一されているため省略した。 */
@media (min-width: 1024px) {
  .intro__strip {
    inset-block-start: calc(120px * var(--intro-k));
    inset-inline: 0;
    display: block;
    height: calc(460px * var(--intro-k));
  }
  .intro__img {
    position: absolute;
    inset-block-start: 0;
    width: calc(360px * var(--intro-k));
    height: calc(460px * var(--intro-k));
    border-radius: calc(20px * var(--intro-k));
  }
  .intro__img--pc { display: block; }
  /* ★横は「中心からの距離」に k を掛ける。左端基準で掛けると4枚が左へ寄る。
     元の値（デザイン座標をコンテナ基準に直したもの）は
     -1060 / -99 / +321 / +741（いずれも中心から）。 */
  .intro__img:nth-child(1) { inset-inline-start: calc(50% - 1060px * var(--intro-k)); }
  .intro__img:nth-child(2) { inset-inline-start: calc(50% -   99px * var(--intro-k)); }
  .intro__img:nth-child(3) { inset-inline-start: calc(50% + 321px * var(--intro-k)); }
  .intro__img:nth-child(4) { inset-inline-start: calc(50% + 741px * var(--intro-k)); }
}

/* --- ラベル＋見出し --- */
/* SP: 左揃えテキストのブロックを中央寄せ。最長行280px -> (375-280)/2 = 47.5 と実測が一致する。
   text-align:center や固定paddingで代用すると文言が変わったとき崩れる。 */
/* ★縦位置は「行ボックスの上端」ではなく「インクの上端」で指定されている。
   Noto Sans JP は hhea ascent 1160 / descent 288（合計1.448em）なので line-height を
   1em にすると half-leading が負になり、インクは箱の上端から下にずれる。
   フォント実測したずれ量（ink上端 - 箱上端）:
     ラベル  20px/lh1  +2.84 / 15px/lh1  +2.13
     見出し  35px/lh60 +16.17 / 25px/lh40 +10.12
     リンク  18px/lh1  +2.70 / 14px/lh19  +4.60
   以下の px 値はすべて「カンプのインク位置 - このずれ量」で算出している。 */
.intro__head {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin-inline: auto;
  padding-block-start: 49.37px;     /* ラベルink上端 rel51.5 - 2.13 */
}
@media (min-width: 1024px) {
  .intro__head {
    width: min(calc(var(--container) * var(--intro-k)), 100% - var(--gutter) * 2);
    margin-inline: auto;
    /* ラベルink上端 rel187 - 2.84。ずれ量も font-size に比例するので丸ごと k 倍でよい */
    padding-block-start: calc(184.16px * var(--intro-k));
  }
}

/* PSD #879: NotoSansCJKjp-Bold / 20px(PC)・15px(SP) / Tracking 100 / #8D5CA6。
   Josefin Sans ではない（カンプとのNCC: Noto .893 vs Josefin .764）。 */
.intro__label {
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: var(--ls-wide);   /* Tracking 100 */
  color: var(--c-primary);
}
@media (min-width: 1024px) { .intro__label { font-size: calc(20px * var(--intro-k)); } }

/* PSD #878: NotoSansCJKjp-Bold / 35px(PC)・25px(SP) / Leading 60(PC)・40(SP)
   / Tracking 250 / #FFFFFF。
   letter-spacing は palt 前提の値。palt を切ると1行あたり最大30px広がる
   （フォント実測: palt ON なら .25em で RMS 6.7px、OFF だと .186em でも RMS 12.4px）。 */
.intro__title {
  /* ラベル箱下端 64.37 -> 見出し箱上端 (ink上端 rel87.5 - 10.12 = 77.38) */
  margin-block-start: 13.01px;
  font-weight: 700;
  font-feature-settings: "palt" 1;
  color: var(--c-white);
}
/* letter-spacing は font-size を持つこちら側に置く。h2 に書くと `em` が
   h2 既定の 24px で解決されて 6px になり、35pxの行では 2.75px/字 足りなくなる
   （1行目が20px狭かった。.mv__catch-line と同じ理由。Task 12） */
.intro__title-line {
  display: block;
  font-size: 25px;
  line-height: 40px;
  letter-spacing: var(--ls-headline);
}
@media (min-width: 1024px) {
  /* ラベル箱下端 204.16 -> 見出し箱上端 (ink上端 rel244 - 16.17 = 227.83) */
  .intro__title { margin-block-start: calc(23.67px * var(--intro-k)); }
  .intro__title-line { font-size: calc(35px * var(--intro-k)); line-height: calc(60px * var(--intro-k)); }
}

/* --- 4リンクアイコン --- */
/* SP: 2x2。素材ボックス165x165 CSS（素材330pxを@2x等倍）。列left 15.5/195・行top 470/713。
   --container 345 / --gutter 15 に対し repeat(2,1fr) + gap 15px で列165pxちょうどになる。 */
.intro__guides {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 15px;
  row-gap: 20.5px;                  /* row1ボタン下端 -> row2円上端 */
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  /* 見出し箱下端 (77.38 + 40*4 = 237.38) -> 円上端 rel470 */
  margin-block-start: 232.62px;
}
@media (min-width: 1024px) {
  /* PC: 4カラム。素材ボックス270x270、デザイン左端 201/510/820/1129（ピッチ309/310/309）。
     コンテナ1200を repeat(4,1fr) + gap39px にすると列幅270.75、その中央に270pxを置くので
     左端は 200.375 / 510.125 / 819.875 / 1129.625 となり実測と1px以内で一致する。 */
  .intro__guides {
    grid-template-columns: repeat(4, 1fr);
    /* ★幅にも k を掛ける。1200pxのままだと円だけ小さくなって溝が広がり、
       「1割縮小」ではなく「円が痩せた」見た目になる。 */
    width: min(calc(var(--container) * var(--intro-k)), 100% - var(--gutter) * 2);
    column-gap: calc(39px * var(--intro-k));
    /* 見出し箱下端 (227.83 + 60*4 = 467.83) -> 円上端 rel700 */
    margin-block-start: calc(232.17px * var(--intro-k));
  }
}

.intro__guide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* PNGは円・リング・ハローを内包した完成アセット。CSSで円を足すと二重丸になる。 */
.intro__guide-icon { width: 165px; height: 165px; }
@media (min-width: 1024px) {
  .intro__guide-icon { width: calc(270px * var(--intro-k)); height: calc(270px * var(--intro-k)); }
}

/* PSD #870/#859/#848/#837: NotoSansCJKjp-Medium(500) / 18px(PC)・14px(SP)
   / Tracking 100 / #414167 / Leading 19(SP・2行時)。 */
.intro__guide-label {
  margin-block-start: 5.4px;        /* 円下端 rel635 -> ink上端 rel645 のずれ4.60を引く */
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;                /* PSD /Leading 38 device = 19 CSS（2行時） */
  letter-spacing: var(--ls-wide);
  color: var(--c-navy);
  text-align: center;
}
@media (min-width: 1024px) {
  .intro__guide-label {
    /* 円下端 rel970 -> ink上端 rel990 のずれ2.70を引いた値に k を掛ける */
    margin-block-start: calc(17.3px * var(--intro-k));
    font-size: calc(18px * var(--intro-k));
    line-height: 1;
  }
}

/* SPだけ強制改行する。自動折返しでは切れる位置がカンプと変わる。 */
.intro__br { display: inline; }
@media (min-width: 1024px) { .intro__br { display: none; } }

/* SP: ラベル箱下端(1行なら659.4) -> ボタン上端 rel667.5。2行の3・4枚目も同じ値で
   921.4 -> 930.0 になり実測と一致する。 */
.intro__guide .btn--solid { margin-block-start: 8.1px; }
/* PC: ラベル箱下端 1005.3 -> ボタン上端 rel1028。
   ★ボタン自体（130x34）は縮めない。共通部品で、押す的が小さくなるため。
     位置だけ k を掛ける。 */
@media (min-width: 1024px) { .intro__guide .btn--solid { margin-block-start: calc(22.7px * var(--intro-k)); } }

/* =====================================================================
 * タブレット帯（768〜1023px）
 *
 * カンプは PC1600 と SP375 の2状態しかない。この帯はSPレイアウトのまま通し、
 * 「375px幅で描かれた列」を中央に置いて横への間延びを防ぐ（発注者確認 2026-08-03）。
 * 全幅に伸ばしてよいのは背景だけ。1024px以上はPCレイアウトが引き継ぐ。
 *
 * コンテナ基準の部品（.l-container / .intro__head / .intro__guides）は
 * --container が345pxのままなので自動で中央に来る。ここで寄せるのは
 * 「ガター基準」「vw基準」「絶対配置」で組んだものだけ。
 *
 * max-width を併記しているので 1024px 以上のルールとは競合しない
 * （記述位置に関係なく、この帯の外では一切効かない）。
 * ===================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 375pxの列を中央に置いたときの、画面左端から列左端までの距離 */
  :root { --sp-bleed: max(0px, calc(50% - 187.5px)); }

  /* MV。数値はSP基準値そのまま（-15px = -4vw@375 / 82.5px = 22vw@375 など） */
  .mv__watermark { inset-inline-start: calc(var(--sp-bleed) - 15px); font-size: 82.5px; }
  .mv__model     { inset-inline-start: var(--sp-bleed); }
  .mv__rotate    { inset-inline-start: calc(var(--sp-bleed) + 31.5px); }
  .mv__copy      { inset-inline-start: calc(var(--sp-bleed) + var(--gutter)); }
  .mv__search    { inset-inline: calc(var(--sp-bleed) + var(--gutter)); }
  .mv__scroll    { inset-inline-end: calc(var(--sp-bleed) + 21px); }

  /* 紹介ブロック（-58.6px = -15.63vw@375 / 95.6px = 25.5vw@375） */
  .intro__strip     { inset-inline: calc(var(--sp-bleed) + var(--gutter)); }
  .intro__watermark { inset-inline-start: calc(var(--sp-bleed) - 58.6px); font-size: 95.6px; }
}

/* =====================================================================
 * トップのサロン依存セクション（フェーズ2b Task 12）
 *
 * PSD実測（PC/PSD/Browdia_top.psd）:
 *   Pick Up Salon #820 … Josefin SemiBold 50px / Tracking 50 / 中央寄せ
 *   NEW Salon     #691 … 同上 50px / 中央寄せ
 *   Salon Short   #286 … Josefin SemiBold 40px / Tracking 50 / 左寄せ x=198
 *
 * ★ここから上（MV・タグバー・紹介ブロック）には触らない。
 *   フェーズ2a Task 12 でカンプ一致を確定させた部分。
 * ★カードの見た目は salon.css を共有する（トップだけ別実装にしない）。
 * ===================================================================== */

/* ★色は英字・日本語とも同じ #C16CA4（--c-accent）。日本語だけ本文色にしない。
   実測: PC/デザイン/Browdia.jpg の Pick Up Salon(x633-966 y2991-3040) と
   おすすめサロン(x728-871 y3062-3078) はどちらもインク最頻 #c16ca5、
   NEW Salon / 新着サロンも同じ。SP版(SP/デザイン/Browdia_sp.jpg y4719-4822)も同色。
   ★ただし Salon Short だけは #8D5CA6（--c-primary）。下の --left で戻す。
   ★行間は1に固定する。既定の 1.75 のままだと行箱の余白だけで
     ベースライン間隔が 50px を超え、gap をどれだけ詰めても実測値に届かない。 */
.c-top-title {
  display: grid;
  justify-items: center;
  gap: 5px;                     /* SP実測: 英字ink下端4778 → 日本語ink上端4797（2倍空間で19px） */
  line-height: 1;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 30px;              /* SP実測 PSB60 ÷2 */
  letter-spacing: .05em;
  color: var(--c-accent);
  text-align: center;
  margin-bottom: 28px;
}
.c-top-title__ja {
  font-family: var(--font-jp);
  font-size: 15px;              /* SP実測 PSB30 ÷2 */
  font-weight: 500;
  letter-spacing: .1em;
  color: inherit;
}
@media (min-width: 1024px) {
  /* PSD実測 50px / 日本語20px。ベースライン間隔 47.5px（#820:3030.5 → #821:3078.0、
     NEW Salon #691:4776.5 → #692:4824.0 も同じ47.5）。 */
  .c-top-title { font-size: 50px; margin-bottom: 40px; gap: 16px; }
  .c-top-title__ja { font-size: 20px; }
}

/* ★Salon Short は全幅の色帯（カンプ実測: PC/デザイン/Browdia.jpg の
   x=8 縦走査で y8204 から #f2e1f1 に変わる。一覧の検索パネルと同色）。 */
.top-shorts { background: #F2E1F1; }

/* Salon Short だけ左寄せ・小さい（PSD実測 40px / x=198）。
   ★英字と日本語は1行に並べる（カンプ。2026-08-05 指摘）。
   他の見出し（Pick Up / NEW）は中央の縦積みのままにする。 */
.c-top-title--left {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  justify-items: start;
  text-align: left;
  margin-bottom: 0;
  /* ★Salon Short だけ紫。Pick Up / NEW の #C16CA4 とは別色
     （カンプ実測: Salon Short #286 も 提携サロンショート #287 も #8c5ca6）。 */
  color: var(--c-primary);
}
@media (min-width: 1024px) {
  /* 実測 40px。英字ink右端426 → 日本語ink左端446 で送り20px */
  .c-top-title--left { font-size: 40px; gap: 16px; }
}

/* Japan / Korea の小見出し。
   実測 PC: Japan #815 = Josefin SemiBold 40px / 国内のオススメサロン #816 = 20px。
            英字ink右端313 → 日本語ink左端345（送り32px）で横並び。
            色は英字・日本語とも #8c5ca6（--c-primary）。日本語だけ本文色にしない。
   実測 SP: Japan #767 = PSB50 ÷2 = 25px / #768 = PSB30 ÷2 = 15px。
            SPは横並びではなく縦積み（#767 x30 y4863-4910 の下に #768 x32 y4919-4948)。 */
.c-top-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: .05em;
  color: var(--c-primary);
  margin-bottom: 16px;
}
.c-top-sub a { color: inherit; text-decoration: none; }
.c-top-sub a:hover { text-decoration: underline; }
.c-top-sub__ja {
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
  color: inherit;
}
@media (min-width: 1024px) {
  .c-top-sub {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 25px;
    font-size: 40px;
  }
  .c-top-sub__ja { font-size: 20px; }
}

/* ★NEW Salon は全幅のピンク地（カンプ実測。PC/デザイン/Browdia.jpg の
   x=20 縦走査で y4656 から #f7e8ed に変わり、y6400付近まで単色で続く）。
   実装では地色のままだった（2026-08-05 指摘）。 */
/* 新着サロンの背景（2026-08-06 発注者の指示「書き出しデータ/PC/bg_browdia.png にして」）。
   ★素材は既にビルド済み。bg_browdia.png は build-assets.php で bg-intro.webp
     （SPは bg_browdia_sp.png -> bg-intro-sp.webp）に変換され、紹介ブロックが
     使っている画像と同一。同じ絵なので変換を増やさず流用する。
   ★cover にする理由: PC素材は 2000x1200 だが、このセクションは 1600x1785（実測）で
     高さが585px足りない。100% auto だと下に地色が残って継ぎ目が出る
     （素材下端の平均 #F0D1E4 と地色 #F7E8ED は近いが同じではない）。
     なめらかなグラデーションで切り取っても失われる内容が無いため cover が素直。
   ★SPは縦長の SP素材（750x2000）を当てる。PC素材のまま cover にすると
     横幅の8割以上を捨てることになり、グラデーションの表情が残らない。
     発注者の指定はPC素材だが、対になるSP素材が同じ絵なのでそちらを使う。
   ★地色は残す。画像が落ちたときに白く抜けない。 */
/* ★左右反転する（2026-08-06 発注者の指示）。紹介ブロックと同じ絵をそのまま敷くと
     並んだときに同じ流れが繰り返されるため、こちらは鏡像にする。
   ★素材は増やさず ::before に載せて transform で返す。
     背景画像そのものは transform で返せないので疑似要素が要る。
     向きを変えるのは scaleX(-1) を scaleY(-1)（上下反転）や
     scale(-1)（180度）に書き換えるだけ。素材の作り直しが要らない。
   ★isolation: isolate を付けること。付けないと z-index:-1 の ::before が
     セクションの外（ページの地色）まで抜けて見えなくなる。
   ★地色はセクション側に残す。画像が落ちても白く抜けない。 */
.top-new {
  position: relative;
  isolation: isolate;
  background: #F7E8ED;
}
.top-new::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/img/bg-intro-sp.webp") center / cover no-repeat;
  transform: scaleX(-1);
}
@media (min-width: 1024px) {
  .top-new::before { background-image: url("/assets/img/bg-intro.webp"); }
  /* ★カードの高さを揃える（2026-08-06 発注者の指示）。
     カードの高さは「左の写真列（389px固定）」と「右の本文」の高い方で決まる。
     本文はメニュー行数やキャンペーンの有無で変わるので、実測で 471 / 471 / 429 と
     1枚だけ低くなっていた。grid-auto-rows: 1fr で行を一番高いカードに揃える。
   ★.top-new に限定すること。.list-cards はサロン一覧でも使っていて、
     あちらは24件並ぶので、1件だけ極端に高いと全部がその高さに引き伸ばされる。 */
  .top-new .list-cards { grid-auto-rows: 1fr; }

  /* ★キャンペーン行の高さを写真列に合わせる（2026-08-06 発注者の指示
     「キャンペーンのところが画像との高さと合っていない」）。
     カンプ実測（PC/デザイン/Browdia.jpg・NEW Salon の1枚目）:
       写真2枚目  y5099..5291
       帯         y5198..5278（高さ80）
       金ラベル   y5198..5278（高さ80）… 帯と**ぴったり同じ**。上下の余白なし
     -> カンプでは帯の下端(5278)と写真の下端(5291)がほぼ揃っている（差13px）。
     実装は 帯92 / ラベル72（padding:10px のぶん内側）／帯が写真より42px下だった。
   ★サロン一覧のカンプは別値（帯100・ラベル100・帯が写真の67px下）なので
     .top-new に限定する。.salon-camp はサロン一覧と共有している。 */
  .top-new .salon-camp { padding: 0; }
  .top-new .salon-camp__label { min-height: 80px; }
  /* ★写真列を右カラムの高さまで伸ばして下端を揃える。
     既定は align-self: start（写真の実寸で止まる）。
     2枚が均等に伸び、object-fit: cover なので歪まず切り取りが増えるだけ。 */
  /* ★minmax(0, 1fr) と aspect-ratio: 4/3 を必ず残す。理由はサロン一覧と同じ
       （assets/css/salon.css の body.is-salon-list .salon-card__media）。
       素の 1fr ＋ aspect-ratio: auto にすると、縦長の写真が行の下限になって
       カードが縦に伸びる（2026-08-18 実測）。 */
  .top-new .salon-card__media { align-self: stretch; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .top-new .salon-card__img,
  .top-new .salon-card__media .is-empty { aspect-ratio: 4 / 3; height: 100%; min-height: 0; }
}

.top-pickup__group + .top-pickup__group { margin-top: 40px; }
@media (min-width: 1024px) {
  .top-pickup__group + .top-pickup__group { margin-top: 60px; }
  /* ★4枚目はPCでは出さない。カンプの枚数そのものが PC と SP で違う（2026-08-06）:
       PC（PC/PSD/Browdia_top.psd）… 国ごとに1行3枚
         Japan 福岡 x519 / 東京 x931 / 大阪 x1343（y3197）
         Korea 明洞 x520 / 江南 x931 / 弘大 x1343（y3902）
       SP（SP/PSD/Browdia_sp.psb）… 国ごとに2列×2行の4枚
         Japan 福岡・東京（y5000）/ 大阪・愛知（y5639）
         Korea 明洞・江南（y6432）/ 弘大・明洞（y7071）
     PHP側は4件返し、PCでここだけ隠して3枚にする。
     limit を3に戻すとSPが「2枚＋1枚」の欠けた並びになる（2026-08-06 発注者の指摘
     「3つしか表示されてないので4つ」）。
     ★サロン詳細の Recommend が先に同じ形になっている（salon.css の
       .detail-recommend .hl-grid > :nth-child(4)）。作りを合わせてある。 */
  .top-pickup .hl-grid > :nth-child(4) { display: none; }
}

/* Pick Up のカードは「詳細はこちら」が付く（カンプ実測） */
.hl-card__cta { margin-top: 12px; text-align: center; }
/* ★ここにあった .btn--navy は消した（2026-08-05）。
   同じ「詳細はこちら」ボタンが components.css に .btn--solid として
   PSD実測（PC 130x34 / SP 95x25 / 400 / Tracking75）で入っていたのに、
   トップだけ別定義を持っていて、しかもトップ以外のページ
   （サロン詳細の Recommend）では読み込まれず素の文字列で出ていた。 */

/* ★flex で中央に置く。text-align:center は中の要素が inline-flex などに
   変わると効かないことがあり、実際に左寄りになっていた（2026-08-05 指摘）。 */
.top-more { margin-top: 28px; display: flex; justify-content: center; }
.top-more .btn--outline { min-width: 260px; }

/* Salon Short は全幅の横スクロール */
.top-shorts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.top-shorts__arrows { display: flex; gap: 10px; }
/* ★カンプの矢印は「地色そのままの丸＋細い紫の輪＋紫の山形」で、左右とも同じ見た目。
   カンプ実測（PC/デザイン/Browdia.jpg の Report の矢印・raw y7500..7570）:
     丸の中 #FBF9FC（＝ページの地色。白ではなく塗っていない）
     輪と山形 #AB83BF〜#C6ABD4（1pxの紫がアンチエイリアスで薄く出た値）
   実装は 白塗り＋**白の山形**で、山形が地に溶けて見えていなかった
   （2026-08-06 指摘「右左のボタンの色が違う」）。 */
.top-shorts__arrows .list-hero__arrow {
  position: static;
  translate: none;
  background: transparent;
  border: 1px solid var(--c-primary);
}
/* ★山形を紫にする。共通の .list-hero__arrow はピンクのベタ丸に白い山形
   （サロン一覧のヒーロー用）なので、ここだけ返す。 */
.top-shorts__arrows .list-hero__arrow::before { border-color: var(--c-primary); }
.top-shorts__track {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  /* ★scroll-behavior: smooth を付けないこと。
     自動送りは毎フレーム scrollLeft を書き換えるので、CSS側でsmoothにすると
     1書き込みごとに補間が走って送りが打ち消し合い、ほとんど進まなくなる。
     矢印ボタンは scrollBy に behavior:'smooth' を明示しているのでそちらは効く。 */
  scroll-behavior: auto;
}
.top-shorts__track::-webkit-scrollbar { display: none; }
.top-shorts .short { flex: 0 0 160px; }
.top-shorts .short__img,
.top-shorts .short__facade .is-empty { width: 160px; border-radius: 0; }
.top-shorts .short__channel { font-size: 12px; text-align: center; margin-top: 6px; }
.top-shorts .short__account { font-size: 11px; color: #8a85a8; text-align: center; }
/* Instagram の埋め込み版（salon.css の .short__facade--embed）。枠は 160／200 なので縮尺を合わせる */
.top-shorts .short__facade--embed { width: 160px; --embed-w: 250px; --embed-s: calc(160 / 250); }
@media (min-width: 1024px) {
  .top-shorts .short { flex: 0 0 200px; }
  .top-shorts .short__img,
  .top-shorts .short__facade .is-empty { width: 200px; }
  .top-shorts .short__facade--embed { width: 200px; --embed-w: 250px; --embed-s: calc(200 / 250); }
}

/* タグ帯の中身。実測: 背景 #F8ECF7 / 文字 #B97CBB、帯の高さ PC80px・SP50px。
   ★リンクにしない（タグ別ページが未実装。tagbar.php の理由を参照）。 */
/* カンプではタグ列（#983 L=-27 R=1620、幅1647）がカンバス1600をはみ出していて、
   帯は左右に流れる前提で描かれている。
   ★自動送り（data-marquee）は 2026-08-21 に外した（発注者「トップページのタグが
     動くのは停止してください」）。いまは静止した帯で、はみ出す幅のときだけ
     手の横スクロールが効く。safe center なので収まる幅なら中央寄せになる。 */
.tagbar__track {
  display: flex;
  align-items: center;
  /* ★safe center。ただの center だと、中身が幅を超えたときに
     左右へ均等にはみ出して先頭（#4D）が切れる。safe を付けると
     あふれたときだけ先頭寄せに落ちるので、切れずにスクロールできる
     （2026-08-05 実測で先頭が欠けていた）。 */
  justify-content: safe center;
  /* 実測: カンプのタグ間インク間隔は PC 50px / SP 37px（SPカンプは2倍空間で74px）。
     Photoshopは仮名に文字ツメを掛けるため、同じ送り値でもカンプの方が字面は狭い。
     間隔（見た目のリズム）を優先して合わせる。 */
  gap: 34px;
  height: 100%;
  padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  white-space: nowrap;
  /* 自動送りは毎フレーム scrollLeft を書き換えるので、CSS側でsmoothにしない */
  scroll-behavior: auto;
}
.tagbar__track::-webkit-scrollbar { display: none; }
/* 実測: SP は PSB #901 が Size30 / Tracking100 なので 30÷2 = 15px。
   PC は PSD #983 が Size20 / Tracking100 で 20px。字送りはどちらも .1em。
   ★Photoshop は仮名に文字ツメを掛けるので、カンプのインク幅は
     CSSの実装より数%狭く出る。CSSで再現できないので送り値は揃えない。 */
.tagbar__item { color: #B97CBB; font-size: 15px; letter-spacing: .1em; flex: 0 0 auto; }
/* ★リンク化しても見た目は同じ（2026-08-24）。押せることはホバーの下線で伝える */
a.tagbar__item { text-decoration: none; }
a.tagbar__item:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .tagbar__track { gap: 45px; }
  .tagbar__item { font-size: 20px; }
}

/* =====================================================================
 * フェーズ6a: Event / Report / Art Makeup Column / Jobs New / Training
 *
 * カンプ実測（PC/PSD/Browdia_top.psd と PC/デザイン/Browdia.jpg の走査線）:
 *   Event    y1060  見出し40px（左）／ カード画像 276x276・ピッチ308（溝32）
 *   Report   y7526  同上 ＋ 投稿者（丸アイコン40＋名前14px）
 *   Column   y9150  見出し50px（**中央**）／ 3列・画像 376x283・ピッチ412（溝36）
 *   Jobs New y10339 見出し40px（左）／ 2列・写真240x180・ピッチ614（溝29）・行ピッチ219
 *   Training y11256 見出し40px（左）／ Column と同じ3列
 *   共通  タグ 14px Tracking50 --c-primary（画像の下20〜22）
 *         題名 18px Tracking75 Leading28・--c-text
 *
 * ★Event / Report は**全幅の横スクロール**。カンプは左右の端でカードが見切れている。
 *   Salon Short と同じ作りにする（トラックだけ l-container の外に出す）。
 * ===================================================================== */

.top-arts { display: grid; gap: 0; }
.top-arts__head { margin-bottom: 20px; }
/* カルーセルの節は 見出し と 矢印 を1行に並べる。
   ★SPカンプ（dsf=2・÷2）は英字と日本語が**縦積み**で、右に矢印。
     PCは英字と日本語が1行（.c-top-title--left のまま）。 */
.top-arts__head--row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.top-arts__head--row .c-top-title--left {
  flex-direction: column; align-items: flex-start; gap: 4px;
  /* SPカンプ実測: 英字インク29(÷2=14.5)→21px ／ 日本語は共通の15px */
  font-size: 21px;
}
/* ★Training & Certification だけ背景を白にする（2026-08-25 発注者「ここの背景の色を白にできる？」）。
     この節は色を持っておらず、body.is-top の #F5F4F7 が透けていた。
     前後の Column / Event も同じ地色なので、白にすると節の切れ目がはっきりする。
   ★.l-section の padding-block はそのまま使うので、帯の高さは他の節と揃う。 */
.top-arts--training { background: var(--c-white); }

/* ★Training & Certification のSPだけ小さく（2026-08-21 発注者「モック通りに」）。
     SPカンプ実測: タイトルink h49(÷2=24.5)→25px で**1行**。共通の30pxのままだと
     375px幅で2行に折れていた。日本語（資格・スクール）はタイトルの下の行で、
     行間はink間11px(÷2=5.5)→row-gap 1px（センター系の gap:5 のink間9.5より詰まる）。
     横に並ぶ幅ではcolumn-gapは共通の14px。PCは従来どおり（下のmedia queryで戻す）。 */
.top-arts--training .c-top-title { font-size: 25px; gap: 1px 14px; }
/* 矢印は共通の .c-arrow-group（枠も山形もSVGが持っている）。SPカンプ実測 30x30・溝10 */
.top-arts__arrows { gap: 10px; }
.top-arts__arrows .c-arrow { width: 30px; height: 30px; }
@media (min-width: 1024px) {
  .top-arts__head { margin-bottom: 28px; }
  .top-arts__head--row .c-top-title--left { flex-direction: row; align-items: baseline; gap: 16px; font-size: 40px; }
  /* ★PCは中央揃え（2026-08-21 発注者「PCもタイトルは中央揃えでお願い致します」）。
       --left の flex を打ち消して、Event / Column と同じ「英字の下に日本語」の積みにする。
       大きさは従来の40pxのまま。SPはカンプどおり左寄せ・25px（上の指定）。 */
  .top-arts--training .c-top-title {
    font-size: 40px; gap: 16px;
    display: grid; justify-items: center; text-align: center;
  }
  /* カンプ実測: 60x60・溝20・右端は本文カラムの右端（x1399） */
  .top-arts__arrows { gap: 20px; }
  .top-arts__arrows .c-arrow { width: 60px; height: 60px; }
}

/* --- 横カルーセル（Event / Report）--- */
/* ★左右の余白を入れない。画面の**端から端まで**カードを並べて横に送る
     （2026-08-07 発注者の指示「レポートとイベントは端から端まで、右左スクロール」）。
     2026-08-07 まで l-container と同じ位置（PCなら左右200）から始めていたので、
     止まっている状態では左右に大きな余白が残り、端まで届かなかった。 */
.top-arts__track {
  display: flex;
  gap: 15px;
  padding-inline: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* ★scroll-snap は使わない。padding-inline と併せると、
     ブラウザが最初のカードの左端をスナップ位置に合わせて 200px ぶん勝手に送り、
     カンプの「左端は本文カラムの位置から」が崩れる（2026-08-07 に実測）。 */
}
.top-arts__track::-webkit-scrollbar { display: none; }
/* SPカンプ実測（dsf=2・÷2）: カード 450/2 ＝ **225**・溝 30/2 ＝ 15 */
.top-arts__track > .top-art { flex: 0 0 auto; width: 225px; }
@media (min-width: 1024px) {
  /* ★PCも端から端まで。溝だけカンプ実測（32）に合わせる */
  .top-arts__track { gap: 32px; }
  .top-arts__track > .top-art { width: 276px; }
}

/* --- 3列グリッド（Column / Training）--- */
.top-arts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 15px; }
@media (min-width: 768px)  { .top-arts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; } }
@media (min-width: 1024px) { .top-arts__grid { gap: 40px 36px; } }   /* 376*3 + 36*2 = 1200 */

/* --- カード --- */
.top-art { display: grid; gap: 10px; min-width: 0; align-content: start; }
.top-art__media { display: block; }
.top-art__img,
.top-art__media .is-empty {
  display: block; width: 100%; object-fit: cover;
  border-radius: var(--r-card); background: var(--c-bg-alt);
}
/* アイキャッチが無い記事はロゴの面にする（2026-08-19 発注者）。
   ロゴの指定は base.css の --noimage-logo が正本 */
.top-art__media .is-empty { background: var(--c-bg-alt) var(--noimage-logo); }
/* 比率は節が持つ。カード自身には書かない（同じカードを4節で使い回すため） */
.top-arts--sq   .top-art__img, .top-arts--sq   .top-art__media .is-empty { aspect-ratio: 1; }
.top-arts--wide .top-art__img, .top-arts--wide .top-art__media .is-empty { aspect-ratio: 376 / 283; }

.top-art__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.top-art__tag {
  font-size: 13px; letter-spacing: .05em; color: var(--c-primary); text-decoration: none;
}
.top-art__tag:hover { text-decoration: underline; }
.top-art__title {
  margin: 0;
  font-size: 15px; font-weight: 500;
  line-height: calc(28 / 18);
  letter-spacing: var(--ls-narrow);
  color: var(--c-text);
  /* ★2行で省略（2026-08-24 発注者「2行以下は省略してほしい」。カンプは3行だったが、
     dazzyの長い題名で3行のカードが混ざり、並びの高さが不揃いに見えた） */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.top-art__title a { color: inherit; text-decoration: none; }
.top-art__title a:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  .top-art__tag   { font-size: 14px; }
  .top-art__title { font-size: 18px; }
}

/* Report だけの投稿者。丸アイコン40＋名前 */
.top-art__by { display: flex; align-items: center; gap: 8px; margin: 0; }
.top-art__avatar {
  display: block; width: 34px; height: 34px; flex: 0 0 auto;
  object-fit: cover; border-radius: 50%; background: var(--c-bg-alt);
}
.top-art__name { font-size: 13px; color: var(--c-text); letter-spacing: .05em; }
@media (min-width: 1024px) {
  .top-art__avatar { width: 40px; height: 40px; }
  .top-art__name { font-size: 14px; }
}

/* =====================================================================
 * Jobs New（2列・写真は左）
 * ===================================================================== */
.top-jobs__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 768px) {
  /* カンプ実測: 2列・溝29 */
  .top-jobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 29px; }
}

.top-job {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  /* カンプは1件ごとに細い区切り線 */
  padding-block: 16px;
  border-bottom: 1px solid var(--c-line, #E3DDE6);
  min-width: 0;
}
@media (min-width: 1024px) {
  /* 写真 240x180 ／ 写真と本文の間 30（x440 → x470）／ 行ピッチ219 */
  .top-job { grid-template-columns: 240px minmax(0, 1fr); gap: 30px; padding-block: 19px; }
}
.top-job__media { display: block; }
.top-job__img,
.top-job__media .is-empty {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-card); background: var(--c-bg-alt);
}
.top-job__body { display: grid; gap: 8px; min-width: 0; }
.top-job__meta { margin: 0; }
.top-job__title {
  margin: 0;
  font-size: 15px; font-weight: 500;
  line-height: calc(28 / 18);
  letter-spacing: var(--ls-narrow);
  color: var(--c-text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.top-job__title a { color: inherit; text-decoration: none; }
.top-job__title a:hover { text-decoration: underline; }
/* ★クリニック名は英字の社名が入る前提でカンプが組まれている（FIRST ARTMAKE）。
     色は --c-primary（実測 #8B5CA4）。 */
.top-job__clinic { margin: 0; font-size: 13px; letter-spacing: .05em; color: var(--c-primary); }
@media (min-width: 1024px) {
  .top-job__title  { font-size: 18px; }
  .top-job__clinic { font-size: 14px; }
}