/* =====================================================================
 * BROWDIA school.css — スクール一覧・詳細のページ専用
 * base -> layout -> components の後に読む。salon.css とは同時に読まない。
 *
 * ★カンプ実測（docs/decisions/2026-08-05-school-comp.md）で分かったこと:
 *   本文カラム 850（x200..1049）／ サイドバー 300（x1100..1399）／
 *   見出しの帯 850x60・#CEAFD9→#DCC0D9・24px
 *   — いずれもサロン詳細と同寸・同色だった。
 *
 * ★だからここに書くのは「スクール固有の節」だけにする。
 *   2段組・帯・カード・ボタンは components.css / layout.css のものを使う。
 *   salon.css を丸写しにしない（同じ値を2箇所に持つと片方だけ直る）。
 * ===================================================================== */

/* ---------------------------------------------------------------- 共有部品
   .c-detail-title（見出しの帯）と .list-layout（2段組）は salon.css にあり、
   スクールでは読み込まれない。同寸・同色なのでここで最小限だけ再定義する。
   ★値を変えるときは salon.css 側と必ず揃えること
   （カンプが同じものなので、片方だけ動くと必ずどちらかがズレる）。 */
/* SPカンプ実測（SP/PSD/Browdia_スクール詳細_sp.psb #504「PGC Schoolsの特徴」・
     走査線 y2011..2090）: 帯 x30..719 y2011..2090 ＝ CSS 345x40 ／ 文字34 ＝ CSS 17px
   → サロン詳細SPの帯（salon.css の実測コメント: CSS 345x40 / 17px）と同寸・同サイズ。
     ★2026-08-06 に測り直して 42px/18px の当て推量を捨てた。値はサロン側と一字一句そろえる。
   ★line-height を明示すること。body の 1.7 を継ぐと行箱が min-height と取り合って
     帯の高さそのものが変わる（salon.css に同じ注意書きあり。あちらで実際に踏んだ）。 */
/* ★.c-detail-title の定義は components.css へ1本化した（2026-08-07・フェーズ6）。
   上の実測コメント（帯 345x40 / 17px ＝サロン詳細SPと同寸）も向こうに写してある。 */

.detail-sec + .detail-sec { margin-top: 40px; }

/* 2段組。カンプ実測: 本文850 ／ 溝50 ／ サイドバー300（合計1200）。
   ★一覧（.list-layout）と詳細（.school-layout）で同じ寸法。
     .list-layout は salon.css にもあるが、そちらはこのページで読み込まれない。
   ★本文も minmax(0, 850px) にすること。850px 固定にすると、
     1024〜1239px（コンテナが1200に届かない幅）でサイドバー列だけが潰れる。
     2026-08-07 に実測: 1024px でサイドバーが **84px**（求人詳細は634/300で正しい）。
     同じ不具合は 2026-08-06 に求人側で見つけて直してあったが、
     スクールはそれより前に書いたので直っていなかった。
     両方を minmax にすれば比率を保って縮む。 */
.school-layout,
.list-layout { display: grid; gap: 30px; padding-block: 20px 0; }
@media (min-width: 1024px) {
  .school-layout,
  .list-layout {
    grid-template-columns: minmax(0, 850px) minmax(0, 300px);
    gap: 50px;
    align-items: start;
  }
}
.school-main,
.list-main { min-width: 0; }

/* ---------------------------------------------------------------- 一覧のヒーロー
   カンプ実測: PC y171..820（650高）／ SP y179..1078（900 ＝ CSS450）

   ★背景写真は 2026-08-06 に支給された 書き出しデータ/共通/イメージ画像/img_schoolmv.png。
     元PNGは文言が焼き込まれた完成画なので、焼き込みの無い右側だけを切り出して
     school-hero.webp（986x821）にしてある（切り出しは scripts/build-assets.php）。
     文言はHTMLの h1・p のまま。画像に置き換えると文言の差し替えができなくなるため
     （2026-08-06 に発注者へ確認して「画像を敷いて文字はHTMLのまま」に決定）。
   ★PCは写真が右・文字が左。SPは写真が上・文字が下（下に向かって地色へ溶ける）。
   ★PCは左揃え（x200＝本文カラム左）、SPは中央。揃え方そのものが違う。
   ★ヒーローの高さ: PC 650（余白 162/152）／ SP 450（余白 277/21）。いずれもカンプ実測。

   実測（PC / SP。SPは÷2）:
     バッジ 400x60・x200 ／ 260x40・中央   地色は90degのグラデ #DBCE9A → #C8B772
     バッジ文字 30 ／ 20   白・Tracking 100
     キャッチ 50・行送り70・Tracking 250 ／ 30・行送り40・Tracking 100
     リード   25・行送り45・Tracking 250 ／ 13.5・行送り22.5・Tracking 200
     キャッチとリードは 90deg のグラデ文字 #C985B0（左）→ #B97CBB（右）。
     ★2行にまたがって1つのグラデ（2行目の左端も同じピンク）。紺ではない。 */
.school-hero {
  position: relative;
  overflow: hidden;
  background-color: #FAF1F2;
  padding-block: 277px 21px;
  text-align: center;
}
/* ★写真は擬似要素に置いて mask で溶かす。background-image を直に敷くと、
   切り出しPNGの端（#FCF8F9）と地色（#FAF1F2）の差が縦の筋になって見える
   （実測 G・B で7段の差。平らな面なので目に付く）。
   mask が効かない環境では固い境目のまま出る＝いまと同じ見え方で、崩れはしない。 */
.school-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/school-hero.webp") 60% top / cover no-repeat;
  /* SP: 写真は上いっぱい。文字が乗る下半分へ向けて消す */
  -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 38%, transparent 72%);
}
/* 文字は写真より上に。擬似要素は position: absolute なので、
   静的なままの中身より後に描かれてしまう */
.school-hero > .l-container { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .school-hero { padding-block: 162px 152px; text-align: left; }
  .school-hero::before {
    /* PC: 写真は右端。高さいっぱいに合わせる（986 x 650/821 ＝ 780） */
    inset: 0 0 0 auto;
    width: min(50%, 780px);
    background-position: right center;
    background-size: auto 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%);
            mask-image: linear-gradient(to right, transparent 0, #000 20%);
  }
}
.school-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-inline: 13.5px;
  background: linear-gradient(90deg, #DBCE9A 0%, #C8B772 100%);
  color: var(--c-white);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  margin-bottom: 6px;
}
@media (min-width: 1024px) {
  .school-hero__eyebrow { min-height: 60px; padding-inline: 25px; font-size: 30px; margin-bottom: 26px; }
}
.school-hero__catch,
.school-hero__lead {
  font-weight: 700;
  font-feature-settings: "palt" 1;
  /* グラデが効かない環境ではこの色で出す。transparent のままだと文字が消える */
  color: var(--c-grad-a);
  /* ★箱を文字幅に詰める。箱が本文カラム幅（PCなら1200）のままだと、
     グラデが箱いっぱいに引き伸ばされて文字の右端まで紫が届かない。
     カンプは文字の左端がピンク・右端が紫で、2行にまたがって1本のグラデ。 */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
@media (min-width: 1024px) { .school-hero__catch, .school-hero__lead { margin-inline: 0; } }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .school-hero__catch,
  .school-hero__lead {
    background: linear-gradient(90deg, var(--c-grad-b) 0%, var(--c-grad-a) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.school-hero__catch { font-size: 30px; line-height: calc(40 / 30); letter-spacing: .1em; }
@media (min-width: 1024px) {
  .school-hero__catch { font-size: 50px; line-height: calc(70 / 50); letter-spacing: .25em; }
}
.school-hero__lead { font-size: 15px; line-height: calc(22.5 / 13.5); letter-spacing: .2em; margin-top: 4px; }
@media (min-width: 1024px) {
  .school-hero__lead { font-size: 25px; line-height: calc(45 / 25); letter-spacing: .25em; margin-top: 20px; }
}
/* キャッチは2行固定。リードはPCだけ2行に割る（カンプがそうなっている） */
.school-hero__catch .school-hero__line { display: block; }
.school-hero__lead .school-hero__line { display: inline; }
@media (min-width: 1024px) { .school-hero__lead .school-hero__line { display: block; } }

/* ---------------------------------------------------------------- 検索パネル
   PCカンプ実測（PC/デザイン/Browdia_スクール一覧.jpg・PSD #422/#421/#414/#419/#409）:
     パネル  x204..1395 y924..1209 ＝ 1192 x 286。地色は #D69EC1 のグラデ面
     見出し  35px（中央・T984）／ 英字 20px（中央・T1034）
     セレクト x251..650 と x670..1069 ＝ 各400・溝20・高さ70（y1084..1153）。文字18px
     ボタン  x1105..1335 ＝ 230 x 66（y1086..1151）。文字20px
   SPカンプ実測（÷2）:
     パネル 345 x 254.5（内側余白 上20・左右15・下20.5）
     見出し 20px ／ 英字 14px
     セレクト 315 x 40（x30）を縦に2つ・あいだ10
     ボタン  275 x 45（x50＝中央）。セレクトの下から15。文字15px
   ★セレクトは「国」と「エリア」の2つ。1つしか無かったのは実装漏れ（2026-08-06 指摘）。 */
.school-search { padding-block: 24px; }
@media (min-width: 1024px) { .school-search { padding-block: 40px; } }
.school-search__panel {
  background: var(--grad-panel);
  border: 1px solid var(--c-panel-border);
  border-radius: var(--r-card);
  padding: 20px 15px 20px;
  color: var(--c-white);
}
/* ★内側の余白は左右で違う（カンプ: 左47・右60）。揃えると「検索」が右へ17pxずれる */
@media (min-width: 1024px) { .school-search__panel { padding: 60px 60px 56px 47px; } }
.school-search__title {
  display: grid;
  gap: 4px;
  font-size: 20px;
  font-weight: 700;
  /* ★行の高さを明示する。body の 1.75 を継ぐと35pxの見出しの行箱が61pxになり、
     パネルが31px高くなる（カンプ286に対して317になっていた） */
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  text-align: center;
  margin-bottom: 18px;
}
.school-search__title span {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .1em;
}
@media (min-width: 1024px) {
  .school-search__title { font-size: 35px; margin-bottom: 29px; }
  .school-search__title span { font-size: 20px; }
}
/* SPは縦積み（カンプ: 国 → エリア → 検索）。PCは 400 / 400 / 230 の1行 */
.school-search__form { display: grid; gap: 10px; }
@media (min-width: 1024px) {
  .school-search__form {
    grid-template-columns: 400px 400px minmax(0, 230px);
    gap: 20px;
    justify-content: space-between;
    align-items: center;
  }
}
.school-search__select {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  background: var(--c-bg-pink);
  font-size: 14px;
  color: var(--c-text);
}
@media (min-width: 1024px) { .school-search__select { height: 70px; font-size: 18px; padding: 0 30px; } }
/* SPのボタンは全幅ではなく 275 の中央寄せ（カンプ実測）。セレクトの下から15あける */
.school-search__submit {
  justify-self: center;
  width: 275px; max-width: 100%; min-width: 0;
  height: 45px; margin-top: 5px; font-size: 15px;
}
@media (min-width: 1024px) {
  .school-search__submit { justify-self: stretch; width: 100%; height: 66px; margin-top: 0; font-size: 20px; }
}

/* 入口ページ（/school/search/）の「国から探す」。JSが無くても国別へ行けるように */
.school-search__countries { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.school-search__countries a { color: var(--c-primary); text-decoration: underline; font-size: 14px; }

/* ---------------------------------------------------------------- 一覧カード
   PCカンプ実測: カード 850x451・溝33・白地。左に写真2枚（縦積み）、右にテキスト

   ★SPは積み順そのものが違う（2026-08-06 に SP/PSD/Browdia_スクール一覧_sp.psb を実測）。
     PC  写真（左列）｜ バッジ＋名前 → キャッチ → 説明 → 罫 → エリア・料金 → ボタン
     SP  バッジ＋名前 → キャッチ → 写真2枚（横並び）→ 説明 → 罫 → エリア・料金 → ボタン
     つまり写真がキャッチと説明の「あいだ」に入る。DOMはPCの並び（写真が先）のままにして、
     SPだけ .school-card__body を display: contents にして order で差し込む。
     DOMを入れ替えると読み上げ順が「写真→名前」から崩れるのでこちらを選んだ。

   SPカンプ実測（750 → CSS は÷2）:
     カード x30..719 y1820..2658  ＝ 345 x 419.5 ／ 内側余白 上15・左右15・下19.5
     バッジ 100x50 ＝ 50x25 ／ スクール名 22 ＝ 11px（紺）
     キャッチ 34/44 ＝ 17px/22px（紺 #3e4066。★紫ではない）
     写真   各 300x225 ＝ 150x112.5（4:3）・溝30 ＝ 15
     説明   22/34 ＝ 11px/17px（3行）
     罫     y2402 x62..688 ＝ 1px #E3E2F2（内容幅いっぱい）
     エリア/料金 26 ＝ 13px。ラベルの原点x61・値の原点x200 → ラベル列 70px
     ボタン x60..689 y2530..2619 ＝ 315x45（内容幅いっぱい・紺）
     カード間の溝 29 ＝ 15 */
.list-cards { display: grid; gap: 15px; }
@media (min-width: 1024px) { .list-cards { gap: 33px; } }

.school-card {
  display: grid;
  gap: 0;
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: 15px 15px 20px;
}
@media (min-width: 1024px) {
  /* PCカンプ実測（PC/PSD/Browdia_スクール一覧.psd の文字原点と走査線）:
     カード x200..1049・y1329..1782 ＝ 850x454／内側余白30
     写真列 x230..484 ＝ 254 ／ 溝41 ／ 本文 x525..1019 ＝ 494 */
  .school-card { grid-template-columns: 254px minmax(0, 1fr); gap: 41px; padding: 30px; }
}
/* ★カンプは2枚だが school_photos が無いあいだは1枚しか出せない（decisions §5）。
   auto-fit にしておくと、枚数をPHPから渡さなくても
     2枚 … 150 + 溝15 + 150 ＝ カンプどおりの横並び
     1枚 … 空のトラックが潰れて全幅315（右半分が空かない）
   になる。★min を 140px にしているのは 2×140+15=295 ≦ 315 < 3×140+30 だから。
   PCは縦積み（カンプどおり）なので下で1列に上書きする。 */
.school-card__media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
}
.school-card__img,
.school-card__media .is-empty {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px;
  background: var(--c-bg-alt);
}
/* ★このブロックは .school-card__img の基本指定より「後ろ」に置くこと。
     前に置くと aspect-ratio: 4/3 が後勝ちして高さが戻る（詳細度が同じため）。 */
@media (min-width: 1024px) {
  /* ★PCは写真を縦に積む（カンプどおり）。
     PCカンプ実測（PC/デザイン/Browdia_スクール一覧.jpg を画素で走査）:
       写真1 x230..484 y1359..1550 ／ 写真2 x230..484 y1561..1752
       ＝ 255x192（4:3）・上下の溝10 ・写真列の合計 394
       カード y1329..1782 ＝ 454（内側余白30 → 394 とぴったり合う）
     だから gap:10 はカンプの実測値。CSSの列は254なので写真は190.5になり、
     カード451（カンプ454との3pxは 254 と 255 の丸め）。

     ★2026-08-24 発注者「画像が縦長になってしまった」。
       2026-08-06 に「写真が1枚しか無いと下に余白ができる」ので
       height:100% + aspect-ratio:auto で列いっぱいに伸ばしていたが、
       これだと本文が長い校ほど写真が引き伸ばされて縦長になる
       （実測: 1枚の校が 254x318、カードが747px。ほかは391px）。
       いまはほとんどの校が2枚あり、2枚なら 190.5x2+10=391 で列は埋まる。
       伸ばすのをやめて4:3に戻す。
     ★align-content:start（1fr で分配しない）にすること。
       余りを行に配ると、写真と写真のあいだの溝が10から広がってカンプとずれる。
       余白は写真の下にまとめて出す。 */
  .school-card__media {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 10px;
    align-content: start;
  }
  .school-card__img,
  .school-card__media .is-empty { height: auto; aspect-ratio: 4 / 3; }
}
/* SPはカードそのものが1列のグリッド。body は箱を消して order で並べ替える */
.school-card__body { display: contents; }
.school-card__meta  { order: 1; }
.school-card__catch { order: 2; margin-top: 7px; }
.school-card__media { order: 3; margin-top: 12px; }
.school-card__desc  { order: 4; margin-top: 12px; }
.school-card__spec  { order: 5; margin-top: 13px; }
.school-card__cta   { order: 6; margin-top: 11px; }
@media (min-width: 1024px) {
  .school-card__body { display: grid; align-content: start; gap: 10px; }
  .school-card__meta,
  .school-card__catch,
  .school-card__media,
  .school-card__desc,
  .school-card__spec,
  .school-card__cta { order: 0; margin-top: 0; }
  .school-card__spec { margin-top: 2px; }
}
.school-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* カンプ実測: スクール名も紺（#3e4067）。説明文だけが本文色 */
.school-card__name { font-size: 13px; color: var(--c-navy); }
@media (min-width: 1024px) { .school-card__name { font-size: 16px; } }
.school-card__catch {
  font-size: 17px;
  font-weight: 700;
  line-height: calc(22 / 17);
  /* ★カンプ実測 #3e4066 ＝ --c-navy。PC・SPとも紺で、紫ではない（2026-08-06 に実測） */
  color: var(--c-navy);
  font-feature-settings: "palt" 1;
}
/* PCカンプ実測: キャッチ 24・行送り34 ／ 説明 16・行送り26（＃294・＃293） */
@media (min-width: 1024px) { .school-card__catch { font-size: 24px; line-height: calc(34 / 24); } }
.school-card__catch a { color: inherit; text-decoration: none; }
.school-card__catch a:hover { text-decoration: underline; }
.school-card__desc { font-size: 13px; line-height: calc(17 / 11); }
@media (min-width: 1024px) { .school-card__desc { font-size: 16px; line-height: calc(26 / 16); } }
/* カンプ実測: 説明の下に1px の罫。その下がエリア・料金の行 */
/* カンプ実測: SPはラベルの原点x30・値の原点x100 → 列は70でぴったり（溝を足さない）。
   PCはラベル525・値608 → 83 */
.school-card__spec {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid #E3E2F2;
  padding-top: 10px;
  font-size: 14px;
  line-height: 1.65;
}
@media (min-width: 1024px) {
  .school-card__spec { grid-template-columns: 83px minmax(0, 1fr); font-size: 16px; line-height: calc(26 / 16); padding-top: 12px; }
}
.school-card__spec dt { color: var(--c-accent); font-weight: 700; }
.school-card__spec dd { margin: 0; }
/* SPは内容幅いっぱいの紺ピル 315x45。
   PCカンプ実測: x600..946 y1666..1715 ＝ 347x50。本文カラム(x485..1049)のほぼ中央 */
.school-card__cta { display: grid; }
.school-card__cta .btn { width: 100%; height: 45px; min-width: 0; font-size: 13px; }
@media (min-width: 1024px) {
  .school-card__cta { display: flex; justify-content: center; }
  .school-card__cta .btn { width: 347px; height: 50px; font-size: 14px; }
}

/* ---------------------------------------------------------------- サイドバー
   カンプの並び: 広告枠 -> 注目のスクール -> 掲載依頼 */
/* ★一覧の右カラムは追尾させない（2026-08-06 発注者の指示）。
     いちど sticky にしたが、サロン一覧に合わせて外した。
     戻すときは `position: sticky` だけでは足りない。このサイドバーは中身が可変
     （広告の枚数・注目のスクールの件数）で実測1005pxあり、画面より高いまま
     top で止めると、はみ出したぶん（＝一番下の「掲載依頼」）が画面外に
     固定されて永久に読めなくなる。max-height ＋ overflow-y をセットで付けること。
     詳細ページの右カラム（.school-card-side）は追尾する。あちらは444pxで
     画面に収まるので同じ問題が起きない。 */
/* ★入れ物（.school-side / __block / __title / __listing）とカードの定義は
     components.css へ移した（2026-08-07・3本のサイドバーで見た目を揃えるため）。
     ここに書き戻さないこと。 */
.school-side__ads { display: grid; gap: 16px; }
.school-side__ad { display: block; }
.school-side__ad-img,
.school-side__ad .is-empty {
  display: block; width: 100%; height: auto; border-radius: 5px; background: var(--c-bg-alt);
}

/* ★2026-08-06、掲載依頼は1枚絵のパネル（img8）に差し替えた。
   絵の中に背景も角丸も入っているので、外側の枠と余白は要らない。
   サロン側（.side-cta）と同じ見た目に揃える。
   ★クラス名は残す。サイドバーの並びを見るテストが目印に使っている。 */

/* ---------------------------------------------------------------- 詳細のMV
   PCカンプ実測: y171..670 ＝ 1600x500（全幅）→ 16:5
   SPカンプ実測: y179..678 ＝ 750x500（全幅）→ 3:2
   ★同じ高さ500をPCとSPで使い回しているので、比率はまったく別物になる。
     16:5 のままSPに出すと375幅で117pxしかなく、カンプ250pxの半分以下だった。 */
.school-mv { width: 100%; }
.school-mv__img,
.school-mv .is-empty {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--c-bg-alt);
}
@media (min-width: 1024px) {
  .school-mv__img,
  .school-mv .is-empty { aspect-ratio: 16 / 5; }
}

/* 詳細のヒーロー。カンプ実測（PC 1:1 ／ SPは÷2）:
     ロゴの丸  PC x200..319 ＝ 120 ／ SP x30..149 ＝ 60。本文はその右
     バッジ    PC 全国16px（箱の左350）／ SP 100x50 ＝ 50x25・13px
     エリア    PC 16px x457.5 ／ SP 22 ＝ 11px
     キャッチ  PC 30px x351 ／ SP 40/60 ＝ 20px/30px x92.5 */
/* 上下の余白はカンプ実測（MV下端→ロゴの丸 30 ／ 写真の帯→見出しの帯 SP30・PC40）。
   ★上は共通で10。.school-layout が既に20空けているので、合わせて30になる。 */
.school-head { display: grid; padding-top: 10px; padding-bottom: 30px; }
@media (min-width: 1024px) { .school-head { padding-bottom: 40px; } }
/* ★SPは上揃え、PCは中央揃え。カンプ実測でそうなっている
     （SP: ロゴ60より文字のほうが高い ／ PC: ロゴ120のほうが高く、文字が縦中央に来る）。 */
.school-head__intro { display: flex; align-items: flex-start; gap: 16.5px; }
@media (min-width: 1024px) { .school-head__intro { align-items: center; gap: 30px; } }
/* ★カンプのロゴは「薄いグレーの丸枠の中にマーク」。枠は装飾なのでCSSで描く。
     画像そのものは四角いこともあるので丸く切り抜かず contain で収める
     （2026-08-06 発注者「カンプ通りに」）。 */
.school-head__logo {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 60px; height: 60px;
  border: 1px solid #E4E3F1; border-radius: 50%;
  background: var(--c-white);
}
.school-head__logo-img { display: block; width: 72%; height: 72%; object-fit: contain; }
/* ★ロゴ自体が丸い画像のとき（schools.logo_is_round）。72%のままだと枠の白い輪が
     ロゴの円の外にもう1本見えて二重の丸になる（2026-08-21 発注者の指摘・BIBI MAKE.）。
     枠いっぱいに重ねて、ロゴの円＝枠の円にする。グレーの縁線はロゴの上に残る。 */
.school-head__logo--round .school-head__logo-img { width: 100%; height: 100%; }
@media (min-width: 1024px) { .school-head__logo { width: 120px; height: 120px; } }
.school-head__text { flex: 1 1 auto; min-width: 0; }
.school-head__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 7px; }
@media (min-width: 1024px) { .school-head__meta { gap: 22px; margin-bottom: 10px; } }
/* カンプ実測 #3e4066 ＝ --c-navy。PC・SPとも紺 */
.school-head__areas { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-navy); }
@media (min-width: 1024px) { .school-head__areas { font-size: 16px; gap: 11px; } }
/* エリア行の頭のピン。共用の icon-area.svg をそのまま使う（サロンのエリア行と同じ絵）。
   ★2026-08-06 まで「素材が無い」と記録していたが、assets/img/icon-area.svg が
     まさにこれだった。新しく起こす前に assets/img を見ること。 */
.school-head__pin {
  flex: 0 0 auto; width: 9px; height: 12px; background: #E589B4;
  -webkit-mask: url("/assets/img/icon-area.svg") no-repeat center / contain;
          mask: url("/assets/img/icon-area.svg") no-repeat center / contain;
}
@media (min-width: 1024px) { .school-head__pin { width: 14px; height: 19px; } }

/* スクールのバッジはカンプ実測 50x25・文字13px（一覧カードも詳細ヒーローも同じ）。
   ★角丸は 3px。カンプのバッジは「角の丸い四角」で、ピルではない
     （2026-08-06 発注者の指摘。1行ずつ左端を走査すると、上下2行だけ1〜2px入って
      あとは真っ直ぐ。SPカンプ y1850..1899 ／ PCカンプ y1361..1390 とも同じ）。
   ★.c-badge はサロンと共用の部品なので本体は触らない。スクール側だけで上書きする。
     共用側は 12px・高さ19・ピル（decisions §5に記録）。 */
.school-card__meta .c-badge,
.school-head__meta .c-badge {
  min-height: 25px;
  padding: 0 11px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: var(--ls-wide);
}
/* ★詳細ヒーローのバッジだけPCで大きい。カンプ実測 x350..409 y719..752 ＝ 60x34・文字16px
     （SPは 88x49 ＝ 44x25・文字13px なのでSPは上の指定のまま）。
     一覧カードのバッジは別物なので巻き込まない（.school-card__meta は据え置き）。 */
@media (min-width: 1024px) {
  .school-head__meta .c-badge { min-height: 34px; padding: 0 13px; font-size: 16px; }
}
/* ★校名（2026-08-27 発注者「1＋A」）。h1を校名にして、キャッチはその下に置いた。
     見た目の主役はキャッチのままなので、校名はひとまわり小さく、間を詰める。 */
.school-head__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
  margin: 0 0 6px;
  letter-spacing: .04em;
}
@media (min-width: 1024px) { .school-head__name { font-size: 20px; margin-bottom: 8px; } }

.school-head__catch {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
  font-feature-settings: "palt" 1;
}
@media (min-width: 1024px) { .school-head__catch { font-size: 30px; } }

/* ---- 導入（バナー → 見出し → 本文 → 写真の帯）
   カンプ実測（PCは1:1・SPは÷2。2026-08-06。decisions §7.5）:
     バナー  PC x200..1049 y851..1250 ＝ 850x400 ／ SP x32..719 y970..1293 ＝ 344x162
             → どちらも 17:8。本文カラムの幅いっぱい
     見出し  PC 30px・行52・字送り.05em ／ SP 32→16px・行42→21・字送り.1em。色 #414067 ＝ 紺
     本文    PC 16px・行26 ／ SP 26→13px・行36→18
     写真帯  PC 各210x210・溝3・4列 ／ SP 各222→111角・溝12→6・3列＋4枚目がはみ出す
   ★見出しと本文で字送りが違う（.05em と .1em）。まとめない。 */
.school-head__banner {
  display: block; width: 100%; aspect-ratio: 17 / 8; object-fit: cover;
  border-radius: 5px; background: var(--c-bg-alt);
  margin-top: 22px;
}
@media (min-width: 1024px) { .school-head__banner { margin-top: 30px; } }
.school-head__lead {
  margin-top: 16px;
  font-size: 16px; line-height: calc(21 / 16); letter-spacing: .1em;
  font-weight: 500; color: var(--c-navy);
}
@media (min-width: 1024px) {
  .school-head__lead { margin-top: 18px; font-size: 30px; line-height: calc(52 / 30); letter-spacing: .05em; }
}
.school-head__body { margin-top: 13px; font-size: 14px; line-height: calc(18 / 13); letter-spacing: .05em; }
@media (min-width: 1024px) { .school-head__body { margin-top: 13px; font-size: 16px; line-height: calc(26 / 16); } }

/* 写真の帯。PCは4列ぴったり、SPは3列ぶんの幅しかないので横スクロールになる。
   ★SPは画面の右端まではみ出させる。コンテナ幅（345）に収めると
     3枚で幅を使い切ってしまい、4枚目が1pxも見えず「スクロールできる」と分からない
     （111*3 + 6*2 = 345 ちょうど）。カンプも4枚目が画面端で切れている。
   ★.l-container は padding ではなく width で内側を作っているので、
     負のマージンぶん（--gutter）がそのまま画面端まで届く。 */
.school-gallery {
  margin-top: 17px;
  /* ★はみ出しぶん（--gutter）を引いてから3等分する。引かないと1枚が116pxになり、
       カンプの111pxより太って4枚目の見え方が変わる。 */
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--gutter) - 12px) / 3);
  gap: 6px; list-style: none; padding: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  margin-right: calc(var(--gutter) * -1);
}
.school-gallery__item { scroll-snap-align: start; }
.school-gallery__img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--c-bg-alt);
}
@media (min-width: 1024px) {
  .school-gallery {
    margin-top: 25px; margin-right: 0;
    grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto; gap: 3px; overflow-x: visible;
  }
}

/* ---------------------------------------------------------------- 特徴
   SPカンプ実測（750 → CSS は÷2。2026-08-06）:
     画像   x30..719 y2131..2568 ＝ 345 x 219（幅いっぱい・比率 345:219）
     番号   54 ＝ 27px・中央・#c66181（--c-rose。★--c-accent ではない）
     タイトル 28 ＝ 14px・中央・紺
     本文   26/36 ＝ 13px/18px・左揃え・幅いっぱい
   ★SPは番号とタイトルが中央、本文だけ左。PCは左揃えのまま（カンプが別レイアウト）。 */
.school-features { display: grid; gap: 24px; }
.school-feature { display: grid; gap: 0; }
.school-feature__text { text-align: center; }
.school-feature__no { margin-top: 21px; }
.school-feature__title { margin-top: 15px; }
.school-feature__body { margin-top: 12px; text-align: left; }
@media (min-width: 1024px) {
  .school-feature { gap: 12px; }
  .school-feature__text { text-align: left; }
  .school-feature__no,
  .school-feature__title,
  .school-feature__body { margin-top: 0; }
}
@media (min-width: 1024px) {
  /* カンプは左右交互。奇数は画像が左、偶数は画像が右。
     ★order だけで入れ替えないこと。列幅が 390 / 1fr のままなので、
       画像が2列目に移ると画像が 1fr（広い方）を取り、本文が390pxに痩せる
       （実際にそう出た）。列の指定ごと入れ替える。
     ★カンプ実測（2026-08-06）: 画像 x200..589 ＝ 390x250・溝30・本文430。
       件と件のあいだに 1px #E4E1F2 の罫が入る（上下に29ずつ空く）。 */
  .school-features { gap: 0; }
  .school-feature { grid-template-columns: 390px minmax(0, 1fr); gap: 30px; align-items: center; }
  .school-feature:nth-child(even) { grid-template-columns: minmax(0, 1fr) 390px; }
  .school-feature:nth-child(even) .school-feature__img { order: 2; }
  /* ★写真が無い件は本文だけになる。列の指定が 390px / 1fr のままなので、
       本文が1列目の390pxに入って半分の幅に痩せる（2026-08-21 実測）。
       2列ぶんまたがせて全幅にする。偶数（1fr / 390px）でも同じ指定で効く。 */
  .school-feature__text:only-child { grid-column: 1 / -1; }
  .school-feature + .school-feature {
    margin-top: 29px; padding-top: 30px; border-top: 1px solid #E4E1F2;
  }
}
.school-feature__img {
  display: block; width: 100%; aspect-ratio: 115 / 73; object-fit: cover;
  border-radius: 5px; background: var(--c-bg-alt);
}
@media (min-width: 1024px) { .school-feature__img { aspect-ratio: 39 / 25; } }   /* 390x250 */
.school-feature__text { display: grid; align-content: start; }
@media (min-width: 1024px) { .school-feature__text { gap: 8px; } }
.school-feature__no {
  font-family: var(--font-en); font-weight: 600; font-size: 27px;
  /* ★カンプ実測 #c66181 ＝ --c-rose。ピンク寄りで、--c-accent ではない */
  color: var(--c-rose); line-height: 1;
}
/* PCカンプ実測（PC/PSD/Browdia_スクール詳細.psd #499・#498・#497）:
   番号34 / タイトル18・行送り26 / 本文14・行送り24。色はPCも #c66181 */
@media (min-width: 1024px) { .school-feature__no { font-size: 34px; } }
.school-feature__title { font-size: 15px; font-weight: 700; color: var(--c-navy); line-height: 1.5; }
@media (min-width: 1024px) { .school-feature__title { font-size: 18px; line-height: calc(26 / 18); } }
.school-feature__body { font-size: 14px; line-height: calc(18 / 13); }
@media (min-width: 1024px) { .school-feature__body { font-size: 14px; line-height: calc(24 / 14); } }

/* ---------------------------------------------------------------- コース
   カンプ実測（PC）: 白地＋1px #E4E3F1 の枠のカード。x200..1049 y3138..3390（850x253）・カード間20
     内側の左余白20／タグの札 → コース名 → 「画像160角＋説明」の2列
   ★2026-08-06 まで枠なしで、区切りが罫線だった（カンプはカード）。
     タグもコース名の下に置いていたが、カンプでは一番上にある。 */
.school-course {
  display: grid; gap: 10px;
  background: var(--c-white); border: 1px solid #E4E3F1; border-radius: var(--r-card);
  padding: 16px;
}
.school-course + .school-course { margin-top: 20px; }
@media (min-width: 1024px) { .school-course { padding: 20px; gap: 12px; } }
/* カンプ実測: 画像は SP 120角（溝15）／ PC 160角（溝28）。画像が無い行は1列にする */
/* ★SPは縦に積む（2026-08-21 発注者「スマホ表示のとき、ここが見にくいので、見やすく
     デザインできますか？」）。カンプの「画像120px＋文字」の2列は説明が3〜4行の
     見本文なら成立するが、実データ（BIBI MAKE.のオンラインコース等）は説明が長く、
     幅210pxの列に文字が詰まって読めなかった。SPは画像を上に全幅で出し、
     説明は下で幅いっぱいに。PCはカンプどおり2列のまま（下のmedia query）。 */
.school-course__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.school-course__row--noimg { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .school-course__row { grid-template-columns: 160px minmax(0, 1fr); gap: 28px; }
  .school-course__row--noimg { grid-template-columns: minmax(0, 1fr); }
}
.school-course__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-card);
}
/* PCはカンプの正方形120→160pxに戻す */
@media (min-width: 1024px) {
  .school-course__img { width: 160px; aspect-ratio: 1; }
}
.school-course__text { display: grid; gap: 8px; align-content: start; }
.school-course__title { font-size: 16px; font-weight: 700; color: var(--c-navy); }
@media (min-width: 1024px) { .school-course__title { font-size: 18px; } }
.school-course__body { font-size: 14px; line-height: 1.85; }
@media (min-width: 1024px) { .school-course__body { font-size: 14px; } }
/* ★ラベルの列は固定幅にしない。「スクール日数」が4emに収まらず2行に折れていた
     （2026-08-06）。max-content なら長いほうのラベルに合い、値の頭も揃う。 */
.school-course__spec {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; font-size: 14px;
  /* ★SPは説明との段差をつける（積みになったぶん境目が要る） */
  margin-top: 2px; padding-top: 10px; border-top: 1px solid #EFECF4;
}
@media (min-width: 1024px) { .school-course__spec { margin-top: 0; padding-top: 0; border-top: 0; } }
@media (min-width: 1024px) { .school-course__spec { font-size: 14px; } }
.school-course__spec dt { color: var(--c-accent); font-weight: 700; }
.school-course__spec dd { margin: 0; }

/* 各コースに含まれる内容。
   カンプ実測: 面 x200..1049 y3967..4100（850x134）・地色 #F7F0F7
     見出し 18px Medium #8D5CA6（＝--c-primary）・面の中の x220.5
     項目   14px / 行24・3列（原点 x221 / 331 / 440 ＝ 送り110）・頭に「・」
     SPは 見出し14px・項目は同じく3列
   ★見出しは面の外ではなく中（2026-08-06 発注者の指摘「ここは一緒に」）。 */
.school-included {
  margin-top: 24px;
  background: #F7F0F7; border-radius: var(--r-card); padding: 10px 15px;
}
@media (min-width: 1024px) { .school-included { margin-top: 30px; padding: 22px 20px; } }
.school-included__title {
  font-size: 15px; font-weight: 500; color: var(--c-primary); margin-bottom: 8px;
  letter-spacing: .05em;
}
@media (min-width: 1024px) { .school-included__title { font-size: 18px; margin-bottom: 12px; } }
.school-included__list {
  display: grid; grid-template-columns: repeat(3, minmax(82px, max-content));
  justify-content: start; column-gap: 8px; row-gap: 0;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 1024px) {
  .school-included__list { grid-template-columns: repeat(3, minmax(110px, max-content)); column-gap: 0; }
}
/* ★カンプの頭の点は「・」の文字。丸を描いていたが、隣の文字との間隔が変わって
     行の頭が揃わなかった。文字そのものを出す。 */
.school-included__list li { font-size: 13px; line-height: calc(20 / 12); }
.school-included__list li::before { content: "・"; }
@media (min-width: 1024px) { .school-included__list li { font-size: 14px; line-height: calc(24 / 14); } }

/* ---------------------------------------------------------------- マシン */
.school-machine { display: grid; gap: 12px; }
.school-machine + .school-machine { margin-top: 24px; }
@media (min-width: 1024px) {
  .school-machine { grid-template-columns: 300px minmax(0, 1fr); gap: 30px; align-items: center; }
}
.school-machine__img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 5px; background: var(--c-bg-alt);
}
.school-machine__text { display: grid; gap: 8px; align-content: start; font-size: 14px; line-height: 1.85; }
.school-machine__title { font-size: 16px; font-weight: 700; color: var(--c-navy); }
@media (min-width: 1024px) { .school-machine__title { font-size: 18px; } }

/* ---------------------------------------------------------------- 流れ
   カンプ実測（PC）: 罫線は無い。STEPのピル（x200..319 y4901..4940 ＝ 120x40）が左にあり、
   その中心（x260）を1pxの縦線 #E1B4D1 が通る。見出しと本文は x351 から。
   ★2026-08-06 まで上下に1pxの罫を引いていた（カンプは縦線のタイムライン）。 */
/* カンプ実測（SPは÷2）:
     ピル   PC 120x40・文字18px ／ SP 156x60 ＝ 78x30・文字28 ＝ 14px（JosefinSans-SemiBold）
     縦線   ピルの中心（PC x260 ／ SP x109.5）を通る 1px #E1B4D1
     本文列 PC x351〜 ／ SP x222 ＝ 111〜
   ★PCとSPで同じ組み方（ピルが左・本文が右）。違うのは寸法だけ。 */
.school-steps { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.school-step {
  position: relative;
  display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 33px; row-gap: 6px;
  padding-bottom: 18px;
}
/* 縦線はピルの中心を通す。最後の1件では引かない（下に伸びる先が無い） */
.school-step::before {
  content: ""; position: absolute; left: 38.5px; top: 15px; bottom: 0; width: 1px; background: #E1B4D1;
}
.school-step:last-child::before { display: none; }
.school-step__head,
.school-step__body { grid-column: 2; }
@media (min-width: 1024px) {
  .school-step { grid-template-columns: 120px minmax(0, 1fr); column-gap: 31px; row-gap: 8px; padding-bottom: 22px; }
  .school-step::before { left: 59.5px; top: 20px; }
}
.school-step__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
/* ★ピルは左の列そのもの。head の中に入れると本文と同じ列に並んでしまう */
.school-step__no {
  grid-row: 1; grid-column: 1; align-self: start;
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 78px; height: 30px;
  font-family: var(--font-en); font-weight: 600; font-size: 14px; line-height: 1;
  letter-spacing: var(--ls-wide);
  color: var(--c-white); background: linear-gradient(90deg, #CEAFD9 0%, #DCC0D9 100%);
  border-radius: var(--r-pill);
}
@media (min-width: 1024px) { .school-step__no { width: 120px; height: 40px; font-size: 18px; } }
.school-step__title { font-size: 15px; font-weight: 700; color: var(--c-navy); }
@media (min-width: 1024px) { .school-step__title { font-size: 17px; } }
.school-step__time { font-size: 13px; font-weight: 700; color: var(--c-navy); }
.school-step__body { font-size: 14px; line-height: 1.85; margin-top: 2px; }
@media (min-width: 1024px) { .school-step__body { font-size: 14px; line-height: calc(24 / 14); margin-top: 0; } }

/* ---------------------------------------------------------------- サポート
   カンプ実測: 地色 #F8F5EE（白ではない）・枠線なし・角丸。アイコンは丸の中。
     PC  カード 270x100・3列・溝20。アイコンの丸65が左、ラベルが右の横並び
     SP  カード 167.5x103・2列・溝10。アイコンの丸50が上、ラベルが下の縦積み
   ★PCとSPで並びそのものが違う。PCを縮めてもSPにはならない。 */
.school-supports {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 1024px) { .school-supports { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.school-support {
  display: grid; justify-items: center; align-content: center; gap: 12px; text-align: center;
  background: #F8F5EE; border-radius: var(--r-card); padding: 16px 12px; min-height: 103px;
}
@media (min-width: 1024px) {
  .school-support {
    grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr);
    justify-items: start; align-items: center; text-align: left;
    gap: 20px; padding: 16px 22px; min-height: 100px;
  }
}
/* 丸はCSSで描く。学校が入れるのは中の絵柄（カンプは白の線画） */
.school-support__icon {
  display: block; width: 50px; height: 50px; padding: 11px;
  border-radius: 50%; background: #C9BA79; object-fit: contain;
}
@media (min-width: 1024px) { .school-support__icon { width: 65px; height: 65px; padding: 14px; } }
.school-support__label { font-size: 14px; font-weight: 700; color: var(--c-navy); line-height: 1.6; }
@media (min-width: 1024px) { .school-support__label { font-size: 15px; } }

/* ---------------------------------------------------------------- アーティスト */
.school-artists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1024px) { .school-artists { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.school-artist { display: grid; gap: 8px; align-content: start; }
.school-artist__img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 5px; background: var(--c-bg-alt);
}
/* ★写真が無いアーティストの枠（2026-08-21）。サロンの施術者（.stylist .is-empty）と
     同じ絵を使う。灰色の四角のままだと「読み込みに失敗した」ように見える。
   ★?v=2 はサロン側と同じ。SVGを直したら両方で数字を上げること。 */
.school-artist__img.is-empty {
  background: var(--c-bg-alt) url("/assets/img/stylist-placeholder.svg?v=2") no-repeat center / 100% auto;
}
.school-artist__name { font-size: 15px; font-weight: 700; color: var(--c-navy); text-align: center; }
.school-artist__spec { font-size: 13px; color: var(--c-accent); text-align: center; }
.school-artist__body { font-size: 13px; line-height: 1.8; }

/* ---------------------------------------------------------------- 実習生の声 */
.school-voice {
  border: 1px solid #E4E3F1; border-radius: var(--r-card); padding: 16px; background: var(--c-white);
}
.school-voice + .school-voice { margin-top: 16px; }
.school-voice__title { font-size: 15px; font-weight: 700; color: var(--c-accent); margin-bottom: 8px; }
@media (min-width: 1024px) { .school-voice__title { font-size: 17px; } }
.school-voice__body { font-size: 14px; line-height: 1.9; }
.school-voice__name { font-size: 13px; color: #8a85a8; text-align: right; margin-top: 8px; }

/* ---------------------------------------------------------------- 代表者

   ★2026-08-06「カンプとは別にいい感じに」で作り変えた節。
     カンプの良いところ（顔まわりは中央・見出し＋罫で節に割る）は残し、
     次の3点を変えた。理由は app/pages/school.php の注記と同じ。
       1) 白いカードに入れて1つの塊にした
       2) 経歴の「年」を列に立てた
       3) 資格に見出しが無く灰色の箱だけが浮いていた -> 見出し＋罫の節にした
   ★カードは .school-voice（実習生の声）と同じ作り（白・枠1px #E4E3F1・角丸）。
     このページの中で「囲まれた塊」の見え方を1つに揃えるため。 */
/* ★白い枠だけを外側（.school-rep-card）に出してある。中の .school-rep はグリッドだけ。
     Message を枠の中に入れる（2026-08-10 発注者の指示）ため。
   ★Message を .school-rep のグリッドに領域として足さないこと。
     経歴も資格も無いスクールで、空の body 行と gap だけが残る。 */
.school-rep-card {
  background: var(--c-white);
  border: 1px solid #E4E3F1;
  border-radius: var(--r-card);
  padding: 24px 16px;
}
@media (min-width: 1024px) { .school-rep-card { padding: 32px; } }
/* 枠の中の Message。上の顔まわりとの間は、経歴と資格の間（22 / PC 22）に合わせる */
.school-rep-card .school-message { margin-top: 16px; }
@media (min-width: 1024px) { .school-rep-card .school-message { margin-top: 22px; } }

/* ★SPでも grid-template-areas を必ず書くこと。子は grid-area で場所を指定しているので、
     領域の定義が無いと3つとも同じ暗黙のセルに置かれて重なる（実際に重なった）。 */
.school-rep {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "img"
    "head"
    "body";
}
/* 写真が無いときは img の行ごと消す（空の行に gap だけが残るため） */
.school-rep.is-nophoto { grid-template-areas: "head" "body"; }
@media (min-width: 1024px) {
  /* ★PCは写真が左・文字がぜんぶ右。写真の幅はカンプの250のまま。
     写真の下に名前を置く（カンプの組み方）と、右カラムが経歴と資格だけになり、
     名前の右に大きな空きが残った（実測: 左380 / 右239 でカードの右下が空く）。
     写真を2行にまたがせて、肩書き・名前・経歴・資格を1本の列に通す。 */
  .school-rep {
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-areas:
      "img head"
      "img body";
    column-gap: 40px; row-gap: 20px;
    align-content: start; align-items: start;
  }
  .school-rep.is-nophoto {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body";
  }
}

/* 顔まわり（肩書き -> 名前 -> 短い罫）。SPは中央・PCは左 */
.school-rep__head { grid-area: head; display: grid; justify-items: center; gap: 3px; text-align: center; }
@media (min-width: 1024px) { .school-rep__head { justify-items: start; text-align: left; } }
/* ★SPは全幅にしない。345px幅いっぱいの顔写真はカードの中で強すぎる。
     カンプもSPは中央に置いた小さめの正方形（x200..549 ＝ CSS 175角）。 */
.school-rep__img {
  grid-area: img;
  display: block; width: min(175px, 62%); aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-card); background: var(--c-bg-alt);
  justify-self: center;
}
@media (min-width: 1024px) { .school-rep__img { width: 100%; } }
.school-rep__title { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--c-accent); }
.school-rep__name {
  font-size: 21px; font-weight: 700; letter-spacing: .06em; color: var(--c-navy);
  font-feature-settings: "palt" 1;
}
/* 名前の下の短い罫。ブランドのグラデをそのまま使う */
.school-rep__head::after {
  content: "";
  width: 40px; height: 2px; margin-top: 12px; border-radius: 1px;
  background: var(--grad-btn);
}

.school-rep__body { grid-area: body; display: grid; gap: 22px; }
/* 見出し＋そのまま右へ伸びる罫（カンプの「略歴 ──」「資格 ──」の作り） */
.school-rep__label {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 700; letter-spacing: .1em;
  color: var(--c-primary);
  margin-bottom: 10px;
}
@media (min-width: 1024px) { .school-rep__label { font-size: 15px; margin-bottom: 12px; } }
.school-rep__label::after { content: ""; flex: 1 1 auto; height: 1px; background: #E7DDEB; }

/* 経歴。年と内容を2列に立てる（school_history_rows が割っている） */
.school-rep__bio {
  display: grid; gap: 8px; list-style: none; margin: 0; padding: 0;
  font-size: 14px; line-height: 1.8;
}
@media (min-width: 1024px) { .school-rep__bio { font-size: 14px; } }
/* ★年の列は minmax(4.6em, max-content)。「1996年」「2002年」は同じ字幅なので
     行ごとのグリッドでも自然に揃う。「2011年 4月」のように長い行だけが伸びる。
     行をまたいで厳密に揃えるには subgrid か display:contents が要るが、
     どちらも代償（対応・読み上げ）のほうが大きい。 */
.school-rep__row {
  display: grid; grid-template-columns: minmax(4.6em, max-content) minmax(0, 1fr); column-gap: 16px;
}
.school-rep__row.is-noyear { grid-template-columns: minmax(0, 1fr); }
.school-rep__year { color: var(--c-primary); font-weight: 700; font-feature-settings: "palt" 1; }

/* 資格。1つずつ札にして流し込む。
   ★2列のグリッドにすると、「美容師」と「ナース」のような短い項目のあいだに
     247pxの空きができ、長い項目だけが2行に折れて並びが崩れた（PCで実測）。
     札を wrap で流すと、短いものは横に並び、長いものは要るだけ幅を取る。
   ★components.css の .c-chip は使わない。あちらは white-space: nowrap なので、
     「Society of Permanent Cosmetic Professionals 加盟」のような長い資格が
     札からはみ出す。こちらは折り返してよい札。 */
.school-rep__qual {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 0;
  font-size: 14px; line-height: 1.7;
}
@media (min-width: 1024px) { .school-rep__qual { font-size: 14px; } }
.school-rep__qual li {
  border: 1px solid #EDE4EF; border-radius: 6px;
  background: #FBF6FB;
  padding: 5px 13px;
  color: var(--c-navy);
  letter-spacing: .03em;
}

/* Message。★帯（.c-detail-title）ではない（2026-08-06 発注者の指摘）。
   カンプ実測: 面 x200..1049 y7720..7984（850x265）・地色 #F7F0F7
     見出し JosefinSans-SemiBold 24px・#8D5CA6・面の中の x228.5（PCは左寄せ）
     本文   16px / 行26・x232
     SPは 見出し34→17px で**中央寄せ**（PCと揃えの向きが違う）

   ★2026-08-10 発注者の指示で、独立した節をやめて代表者紹介の枠の中に入れた
     （.school-rep-card の中）。同じ指示で署名（肩書き＋名前）も消した。
     署名は 2026-08-06 に「誰の言葉か分からず、上の代表者紹介と切れて見える」ので
     足したもので、枠に入れた時点で役目が終わっている。
     地色・見出し・本文・内側の余白はカンプ実測のまま動かしていない。
   ★見出しの要素は枠の中では h3、枠が出ないとき（名前も経歴も無く Message だけ）は h2。
     どちらでも見た目が同じになるよう、font-size / font-weight をここで明示している
     （base.css は h1..h6 の UA既定を消していない）。
   ★引用符の飾りも一度入れたが、2026-08-06「引用符は要らないです」で外した。
     戻すときは ::before ＋ position: relative（面）と、文字が飾りの下に隠れないよう
     見出し・本文にも position: relative が要る。 */
.school-message { background: #F7F0F7; border-radius: var(--r-card); padding: 15px; }
/* 上下23はカンプ実測から逆算した値（見出しのインク上端が面から34、本文の
   インク下端が面まで29。行送りの半分ぶんを引くと箱の余白は23になる）。 */
@media (min-width: 1024px) { .school-message { padding: 23px 28px; } }
.school-message__title {
  font-family: var(--font-en); font-weight: 600; font-size: 17px;
  color: var(--c-primary); letter-spacing: .05em;
  text-align: center; margin-bottom: 12px;
}
@media (min-width: 1024px) {
  .school-message__title { font-size: 24px; text-align: left; margin-bottom: 18px; }
}
.school-message__body { font-size: 14px; line-height: calc(22 / 13); }
@media (min-width: 1024px) { .school-message__body { font-size: 16px; line-height: calc(26 / 16); } }

/* ---------------------------------------------------------------- FAQ */
.school-faqs { display: grid; gap: 10px; }
.school-faq { border: 1px solid #E4E3F1; border-radius: 5px; background: var(--c-white); }
.school-faq__q {
  cursor: pointer; list-style: none;
  padding: 14px 44px 14px 16px; position: relative;
  font-size: 15px; font-weight: 700; color: var(--c-navy); line-height: 1.6;
}
.school-faq__q::-webkit-details-marker { display: none; }
/* 開閉の記号。JSに頼らず details の状態だけで切り替える */
.school-faq__q::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent);
  rotate: 45deg;
}
.school-faq[open] .school-faq__q::after { margin-top: -2px; rotate: -135deg; }
.school-faq__a { padding: 0 16px 16px; font-size: 14px; line-height: 1.9; }

/* ---------------------------------------------------------------- アクセス */
.school-loc + .school-loc { margin-top: 20px; padding-top: 20px; border-top: 1px solid #E4E3F1; }
.school-loc__name { font-size: 15px; font-weight: 700; color: var(--c-navy); margin-bottom: 10px; }
/* 所在地・アクセスの行（2026-08-10 にカンプへ寄せた）。
   カンプ実測:
     PC（PC/デザイン/Browdia_スクール詳細.jpg ／ PSD #81・#80・#78・#77）
       ラベル「所在地」 x204 T=9074 ／ 16px **Bold** ／ Tracking 50 ／ 色 #414167
       値              x349 T=9076 ／ 16px Regular ／ Tracking 50
       罫              y9120・y9196 ／ **1px #E4E3F1** ／ x200..1049（本文の全幅）
       行の高さ        76（罫こみ）＝ 行送り26 ＋ 上下24.5 ＋ 罫1
     SP（SP/デザイン/スクール詳細/Browdia_スクール詳細_sp.jpg ／ ÷2）
       ラベル x33（＝16.5）／ 値 x164（＝82）→ ラベル列 67
       罫 y17035・y17120（2カンプpx＝1）／ x30..719（＝345 全幅）
       行の高さ 42.5（罫こみ）＝ 行送り18 ＋ 上下12.25 ＋ 罫1
   ★前はラベルがピンク（--c-accent）で罫が無かった。**どちらもカンプに無い。**
   ★ラベルの語も「住所」→「所在地」に直した（カンプの語。サロン詳細も同じ語）。
   ★罫は dd に引く。dt に引くと、値が2行になった行でラベル側の罫だけ上に来る。 */
.school-loc__spec {
  display: grid; grid-template-columns: 67px minmax(0, 1fr);
  font-size: 14px; line-height: 19px;
}
@media (min-width: 1024px) {
  .school-loc__spec { grid-template-columns: 149px minmax(0, 1fr); font-size: 16px; line-height: 26px; }
}
.school-loc__spec dt,
.school-loc__spec dd {
  margin: 0; padding-block: 12.25px;
  border-bottom: 1px solid #E4E3F1;
}
@media (min-width: 1024px) {
  .school-loc__spec dt,
  .school-loc__spec dd { padding-block: 24.5px; }
}
/* ★ラベルは紺の太字。カンプのラベルは値より2px上（PC 9074 対 9076）に見えるが、
     これは「所」と「〒」の字面の差で、行の基準線は同じ。ずらさない。 */
.school-loc__spec dt {
  padding-left: 1.5px;
  color: var(--c-navy); font-weight: 700; letter-spacing: .05em;
}
@media (min-width: 1024px) { .school-loc__spec dt { padding-left: 4px; } }
.school-loc__spec dd { letter-spacing: .05em; }
/* 地図は拠点名の上（2026-08-06「カンプ通り、地図は上で」）。
   実体は components.css の .detail-map（押されるまで読み込まない facade）。
   縦横比だけカンプに合わせて上書きする:
     SP 345x200（690x400カンプpx）= 69:40 ／ PC 850x400 = 17:8
   帯の下から地図まで SP20 / PC30、地図から所在地まで SP16。
   ★margin-top は入れない。1件目は見出しの帯の margin-bottom（SP16 / PC30）、
     2件目以降は .school-loc + .school-loc の padding-top 20px が上の空きを持つ。
     ここに margin-top を足すと1件目だけ相殺（margin collapsing）されて、
     1件目と2件目以降で空きが食い違う。 */
.school-loc__map { --map-ratio: 69 / 40; margin: 0 0 16px; }
@media (min-width: 1024px) {
  .school-loc__map { --map-ratio: 17 / 8; margin: 0 0 20px; }
}

/* ---------------------------------------------------------------- 右カラム
   ★SPには出さない。SPは画面下の追従ボタンが受け持つ（カンプが3種ある） */
.school-aside { display: none; }
@media (min-width: 1024px) {
  /* ★align-self: stretch が要る。.school-layout は align-items: start なので、
     何もしないと右カラムの箱が中身の高さまでしか無く、sticky が動く余地がゼロになる
     （position: sticky は書いてあるのに追従しない、という状態だった。
      2026-08-06 発注者の指摘）。箱を本文と同じ高さにして、中のカードが粘る。
     align-content: start はカードを箱の上端に置くため（stretch と両立する）。 */
  .school-aside { display: grid; align-content: start; align-self: stretch; }
  .school-card-side { position: sticky; top: 20px; }
}
.school-card-side {
  display: grid; justify-items: center; gap: 12px;
  border: 1px solid #E4E3F1; border-radius: var(--r-card);
  background: var(--c-white); padding: 24px 20px; text-align: center;
}
/* ★カンプのロゴは薄いグレーの丸枠120の中にマーク（ヒーローと同じ作り）。
     2026-08-06 まで枠なしで画像をそのまま出していた。 */
/* ★幅は min(120px, 100%)。120px を素で指定すると、1024〜1239px で右カラムの枠
     （.school-layout が 850px 固定なので残りが84pxしかない）を突き抜けて
     ページに横スクロールが出る（viewport-check が1024pxでFAILした）。 */
.school-card-side__logo {
  display: grid; place-items: center;
  width: min(120px, 100%); aspect-ratio: 1; height: auto;
  border: 1px solid #E4E3F1; border-radius: 50%; background: var(--c-white);
}
.school-card-side__logo-img { display: block; width: 72%; height: 72%; object-fit: contain; }
/* ★丸いロゴは枠いっぱい（.school-head__logo--round と同じ理由） */
.school-card-side__logo--round .school-card-side__logo-img { width: 100%; height: 100%; }
.school-card-side__name { font-size: 15px; font-weight: 700; color: var(--c-navy); line-height: 1.6; }
/* ★料金の行はカンプに無い（2026-08-06 発注者「消していいです」）。
     .school-card-side__price は使っていない。復活させるならカンプを確認してから。 */
/* カンプ実測: PC右カラムのボタンは 250x68（x1125..1374 ＝ サイドバー左から25） */
.school-card-side__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 250px; min-width: 0; height: 68px; border-radius: var(--r-pill);
}
/* ボタンの中のアイコン。行き先ごとに絵柄が変わる（--official は絵柄なし＝出さない）。
   ★LINEの公式マークは商標なので使えない。汎用の吹き出し（共用の icon-comment.svg）を
     置いてある。公式素材を使うならLINEのブランドガイドに沿って支給してもらうこと。 */
.school-cta__icon {
  flex: 0 0 auto; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
}
.school-cta--line .school-cta__icon {
  -webkit-mask-image: url("/assets/img/icon-comment.svg"); mask-image: url("/assets/img/icon-comment.svg");
}
.school-cta--mail .school-cta__icon {
  width: 24px; height: 18px;
  -webkit-mask-image: url("/assets/img/icon-mail.svg"); mask-image: url("/assets/img/icon-mail.svg");
}

/* ---------------------------------------------------------------- CTAの色
   ★行き先が変わると色も変わる（カンプ実測。PC右カラム・SP追従バーとも同じ3色）:
       LINE #00B300 ／ メール #BA7DB9 ／ 公式 #434369
   ★色はここだけに置く。PCとSPで別々に持つと、片方だけ直したときにズレる
     （実際、2026-08-06 にSPだけ色分けしてPCが1色のままになっていた）。 */
.school-cta--line     { background: #00B300; color: var(--c-white); }
.school-cta--mail     { background: #BA7DB9; color: var(--c-white); }
.school-cta--official { background: #434369; color: var(--c-white); }

/* ---------------------------------------------------------------- SP追従ボタン
   カンプ実測（SP/デザイン/スクール詳細/…（追従ボタン_◯◯）_sp.jpg・÷2）:
     ロゴの丸 直径72（左端15）／ 名前 13px 紺 ／ ボタン 260x45（右端15）
   ★3種とも文言は「無料相談はこちら」。cta_type で行き先と色だけが変わる。
   ★カンプのLINEボタンにはLINEアイコンが入るが、アイコン素材が無いので出していない
     （decisions §5に記録）。

   ★上端は「白のベタ ＋ 1pxの罫」。2026-08-07 発注者「追尾の部分の上が半透明に
     なっているので、これはやめてください」で、カンプの白グラデをやめた。
     カンプは硬い線ではなく、下の本文が y1128 あたりから薄くなって消えるグラデだった
     （最暗値の走査で確認済み。1pxの罫ではない）。
     罫の色 #E4E3F1 はサロン詳細の追尾バー（salon.css の .detail-sticky）と同じ。
     地色を白ベタにしただけだと、白いカード（代表者紹介など）が下を通ったときに
     バーの上端が消える。
   ★高さ97pxは変えていない（body.is-school-detail の padding-bottom と対）。
     上下の余白は 10/15 から 12/13 にして、硬い上端に対して釣り合わせた。 */
.school-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;   /* ヘッダー(--z-header 100)より下・本文より上 */
  display: flex; align-items: center; gap: 13px;
  padding: 12px 15px 13px;
  background: var(--c-white);
  border-top: 1px solid #E4E3F1;
}
@media (min-width: 1024px) { .school-sticky { display: none; } }
.school-sticky__logo {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--c-white);
}
.school-sticky__main { flex: 1 1 auto; min-width: 0; display: grid; justify-items: center; gap: 3px; }
.school-sticky__name {
  font-size: 13px; font-weight: 700; color: var(--c-navy);
  letter-spacing: var(--ls-wide);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.school-sticky__cta {
  width: 100%; max-width: 260px; min-width: 0; height: 45px;
  border-radius: var(--r-pill);
  color: var(--c-white);
  font-size: 14px;
}
/* 追従ボタンのぶん、フッターが隠れないように下を空ける（バーの実測高さぶん）。
   ★98 ＝ 余白12 + ロゴ72 + 余白13 + 上の罫1。罫を足したときに1px増えた。
     バーの寸法を触ったらここも測り直すこと（フッターの最後の行が隠れる）。 */
body.is-school-detail { padding-bottom: 98px; }
@media (min-width: 1024px) { body.is-school-detail { padding-bottom: 0; } }

/* ---- 広告表示（migrations/031・2026-08-21） ----
   ★サロン詳細（.detail-card__pr）と同じ見た目・同じ理由。
     成果報酬を受け取るページには広告であることの表示が要る
     （景品表示法・いわゆるステマ規制）。
   ★文字で出す。背景画像や ::before の content にしない。
     読み上げにも検索エンジンにも拾われる形でなければ、出した意味が無い。
   ★絶対配置で浮かせない。SP（375px）でスクール名や見出しに重なる。 */
.school-head__pr {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: #6B6B6B;
}
.school-head__pr-label {
  padding: 1px 6px;
  border: 1px solid #B9B9C4;
  border-radius: 3px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .08em;
  color: #55555F;
}