/* =====================================================================
 * BROWDIA base.css
 *
 * 読み込み順が仕様: fonts.css -> base.css -> layout.css -> components.css
 *                   -> ページ別(top.css)。@import は禁止（リクエストが直列化し
 *                   FCPが悪化する）。<link> を並べること。
 * 詳細度は全て 0,1,0（単一クラス）に揃え、順序で勝たせる。!important 禁止
 *                   （唯一の例外は prefers-reduced-motion ブロック）。
 * 命名は BEM-lite: block__element--modifier。JSが触る状態だけ .is-open / .is-active。
 * ブレークポイントは 768px / 1024px の2点のみ。増やさないこと
 *                   （カスタムプロパティはメディアクエリの条件式に使えないため
 *                     値はハードコードになる。変更時は全CSSを一括置換）。
 * カラーは PSD の /FillColor・シェイプ塗り・SVG の fill 由来の確定値。
 *                   JPEGカンプからの目視サンプリングで上書きしないこと（必ず1〜3ずれる）。
 *
 * ※ @font-face は assets/css/fonts.css（scripts/build-fonts.php が生成）にある。
 *    Noto Sans JP は unicode-range で124分割されており、ブラウザはページで実際に
 *    使う文字を含む分割ファイルだけを取得する。1本にまとめると1ウェイト1.8MBになる。
 * ===================================================================== */

/* ---------- design tokens ---------- */
:root {
  /* color（PSD /FillColor・シェイプ塗り・SVG fill 由来の確定値） */
  --c-primary:      #8D5CA6;
  --c-navy:         #414167;
  --c-text:         #333333;
  --c-accent:       #C16CA4;
  --c-badge:        #C176A7;
  --c-rose:         #C66182;
  --c-grad-a:       #B97CBB;
  --c-grad-b:       #C985B0;
  --c-pink:         #E589B4;
  --c-star:         #FCBF2D;
  --c-star-off:     #C9C9C9;
  --c-logo-navy:    #7A80BC;
  --c-white:        #FFFFFF;
  /* ★2026-08-04 発注者の指示で「全サイト若干グレー」に。
     カンプ実測は #fbf9fc（PC/デザイン/Browdia_サロン一覧.jpg の最頻色）だが、
     白いカードとの差が弱いとの判断。カンプより 4% ほど暗く、ピンク味を落とした。
     ★サイト全体の地色はこの1変数だけ。個別に書かないこと
     （パンくず帯・ヒーロー・一覧はすべて var(--c-bg) を見ている）。 */
  --c-bg:           #F5F4F7;
  --c-bg-alt:       #F5EFF7;
  --c-bg-pink:      #F8ECF7;
  --c-panel-a:      #D69EC1;
  --c-panel-b:      #CB99CD;
  /* カンプの左辺(背景#EAC6EC->枠#F1D4F2)と上辺(背景#C99BB7->枠#DDB8D1)の
     2式から逆算した実測値。枠幅は1px刻みの走査で4pxと確定 */
  --c-panel-border: rgba(252, 238, 252, .37);

  /* gradient: brand と btn は向きが逆。流用禁止 */
  --grad-brand: linear-gradient(125deg, var(--c-grad-a) 0%, var(--c-grad-b) 100%);
  --grad-btn:   linear-gradient( 90deg, var(--c-grad-b) 0%, var(--c-grad-a) 100%);
  --grad-panel: linear-gradient(135deg, var(--c-panel-a) 0%, var(--c-panel-b) 100%);

  /* アイキャッチが無いカードに敷くBROWDIAのロゴ（2026-08-19 発注者
     「アイキャッチがないものには、内部リンクで使っているBROWDIAの画像を入れて」）。
     ★内部リンクのカード（.blk-link__thumb .is-empty）と同じ指定。値を変えるならあちらも一緒に。
     ★面の色はここに入れない。カードごとに地色が違う（一覧は --c-bg-alt、
       固定ページの関連は紫の帯に乗るので #ECE4F0）。使う側で `background: <色> var(--noimage-logo)`。
     ★紫のロゴ。白地用の logo.svg は白いので、白い面では消える。 */
  --noimage-logo: url("/assets/img/logo-footer.svg") no-repeat center / 62% auto;

  /* typography */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --font-en: "Josefin Sans", var(--font-jp);

  /* 見出しサイズ（PSDのテキストレイヤー /FontSize 実値）
     40px = セクション英字見出し(出現7回) / 50px = 大見出し(5回)
     35px = MVキャッチ(4回) / 300px = ウォーターマーク(6回) */
  --fs-sec-en:    40px;
  --fs-sec-lg:    50px;
  --fs-mv-copy:   35px;
  --fs-watermark: 300px;
  /* 字送り（PSD /Tracking は1/1000em単位。実値は 0 / 50 / 75 / 100 / 200 / 250）
     --ls-headline は 35px の大見出し用。MVキャッチ(#995)と紹介ブロック見出し(#878)が
     どちらも /Tracking 250 なので共有する。
     ★この値は font-feature-settings: "palt" 1 とセットで使うこと。
       Photoshopの日本語組版はプロポーショナル字形が既定で、paltを切ると字幅が合わない。
       カンプ7行のインク幅をフォント実測と突き合わせた結果:
         palt ON  -> 最適 .263em / RMS 4.8px（.25em でも RMS 6.7px・最大14.2px）
         palt OFF -> 最適 .186em / RMS 12.4px・最大23.3px（どの単一値でも行ごとに最大30px振れる）
       paltを切ったまま単一値で合わせようとすると、カタカナ行が広くなり漢字行が狭くなる。 */
  --ls-headline: .25em;
  --ls-wide:    .1em;
  --ls-narrow:  .075em;

  /* layout（SPファースト。PC値は下の @media で上書き） */
  /* ★SPは幅を固定しない。カンプは375px基準で本文345px（左右15px）だが、
     345px で頭打ちにすると、375pxより広い端末（390/412/430px など）で
     本文が広がらず左右の余白だけが増える（2026-08-04 指摘）。
     100% - 15px*2 にすると 375px では 345px でカンプと一致し、
     広い端末では本文が広がる。PCの 1200px 固定は下のメディアクエリのまま。 */
  --container:  100%;
  --gutter:      15px;
  --header-h:    50px;
  --mv-h:       726px;
  --tagbar-h:    50px;
  --section-py:  40px;

  /* radius */
  --r-card:   8px;
  --r-select: 6px;
  --r-panel: 20px;
  --r-pill: 999px;

  /* z-index（<dialog> は top-layer なのでここに含めない） */
  --z-header:   100;
  --z-mv-model:   2;
  --z-mv-copy:    3;
}

@media (min-width: 1024px) {
  :root { --container: 1200px; --gutter: 20px; --section-py: 80px; }
}
@media (min-width: 1024px) {
  :root { --header-h: 100px; --mv-h: 900px; --tagbar-h: 80px; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* ★scrollbar-gutter は使わない。
   縦スクロールバーが右だけを占めるぶん内容が左に寄って見えるので
   `stable both-edges` で左右対称にしてみたが、左端に地色の帯ができて
   MV・タグ帯・NEW Salon の全幅セクションが画面の左端に届かなくなった
   （2026-08-05「PC表示のとき若干左端切れてます？」）。
   全幅で敷くデザインとは両立しないので戻す。 */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-wrap: anywhere;   /* 日本語の長い固有名詞でも横スクロールさせない */
}

@media (min-width: 1024px) { body { font-size: 16px; line-height: 1.75; } }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
/* ★h1..h6 に一括で font-size/font-weight: inherit を掛けてはいけない（2026-08-10 に実測）。
     .c-page-title / .c-section-title / .c-sub-title / .salon-card__name / .rank-card__name /
     .mv__catch / .intro__title / .c-top-title などは**UA既定の太字・em倍率に乗って**いて、
     一括リセットを入れると SP で 28px→14px・700→400 に落ちる（19ページで実測）。
     <p>/<span> を見出しに上げるときは、上げた先のクラスに font-size と font-weight を
     明示すること。実際に上げた6つ（.mini-card__name / .side-card__name /
     .detail-camp__title / .report__who / .review-item__name / .school-message__title）は
     それぞれのクラス側に font-size と font-weight を書いてある。 */
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: .8; }

button {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}

select { font: inherit; color: inherit; }

/* フォーカスリングはキーボード操作時のみ。色は視認性のため濃紺 */
:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 2px; }

/* 装飾アニメーションを一括で止める（回転テキスト・フェード等） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- utilities（増やさない） ---------- */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.u-en { font-family: var(--font-en); font-weight: 600; }