/* =====================================================================
 * BROWDIA components.css — 共通部品
 * 全ルールは単一クラス（詳細度0,1,0）。!important 禁止。
 * ===================================================================== */

/* ---------- ボタン（3種類。全て完全なピル） ---------- */
/* ★字送りは --btn-ls で入れること。letter-spacing に直接書かない。
   letter-spacing は最後の1文字の後ろにも余白を足すので、
   flex の中央寄せだと字面が半文字ぶん左へ寄る（実測: もっと見るで1px）。
   text-indent に同じ値を入れると字面の中心がボタンの中心と一致する。
   ★半分ではなく同じ値。text-indent は行ボックスの幅も広げるので、
     中央寄せで打ち消されて実際にずれるのは指定値の半分になる。
     半分を入れると今度は逆に半文字ぶん左に残る（2026-08-05 実測）。
   （em はその要素の font-size で解決されるので、PC/SP でサイズが変わっても追従する） */
.btn {
  --btn-ls: 0em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  font-weight: 700;
  text-align: center;
  letter-spacing: var(--btn-ls);
  text-indent: var(--btn-ls);
  transition: opacity .2s, background-color .2s, color .2s;
}

/* ボタンの中のアイコン（いまは求人の「応募する」だけ）。
   カンプ実測（SP追尾バー・dsf=2）: 書類アイコン 29x34 ＝ CSS 14.5 x 17、
   文字（15px）との間 11px。文字サイズが変わっても比率が保つよう em で持つ。
   ★text-indent を打ち消す。.btn は字送りの分を text-indent で戻しているが、
     それは文字のためのもので、アイコンにまで効くと右へずれる。 */
.btn__icon {
  flex: 0 0 auto;
  width: 1em; height: 1.17em;      /* 29:34 */
  margin-right: .7em;
  text-indent: 0;
  background: currentColor;
  -webkit-mask: url("/assets/img/icon-apply.svg") no-repeat center / contain;
          mask: url("/assets/img/icon-apply.svg") no-repeat center / contain;
}

/* 「イベント一覧へ」型: 白地＋1px #8D5CA6。PC 445x68 / SP 315x55（実測） */
.btn--outline {
  min-width: 315px; height: 55px;
  border: 1px solid var(--c-primary);
  color: var(--c-primary);
  background: transparent;
  font-size: 15px;
  --btn-ls: .08em;
}
@media (min-width: 1024px) {
  .btn--outline { min-width: 445px; height: 68px; font-size: 17px; }
}
.btn--outline:hover { background: var(--c-primary); color: var(--c-white); opacity: 1; }

/* 「詳細はこちら」型: #414167 の単色（塗り面の全幅サンプルと PSD の /SoCo の両方でグラデでないことを確認）。
   PC 130x34 / SP 95x25。角丸は height/2 の完全ピル。影は無し
   （PSD上でボタンに lfx2/lrFX が無く、カンプ走査でも外周の輝度低下が 0.5/255 未満）。
   文字は PSD #868/#857/#846/#835: NotoSansCJKjp-Regular(400) / 14px(PC)・12px(SP)
   / Tracking 75 / #FFFFFF。.btn の font-weight:700 を打ち消す必要がある。 */
.btn--solid {
  /* ★SPはカンプ実測 95x25 だったが、SPの文字を 12→13px に上げた（2026-08-19）ぶん詰まったので
       110x30・左右 padding 14px に広げた（2026-08-20 発注者「ボタンの余白が少ないので、少し余裕もたせて」）。
       PCはカンプのまま。長い文言（求人詳細はこちら 等）でも padding が左右の逃げを保証する */
  min-width: 110px; height: 30px; padding: 0 14px;
  background: var(--c-navy);
  color: var(--c-white);
  font-weight: 400;
  font-size: 13px;
  --btn-ls: var(--ls-narrow);   /* Tracking 75 */
}
@media (min-width: 1024px) {
  .btn--solid { min-width: 130px; height: 34px; padding: 0 16px; font-size: 14px; }
}

/* 「検索」型: 90deg グラデ（ブランドグラデの左右反転）。白1px枠
   ※ --grad-brand（125deg・左上パープル→右下ピンク）と取り違えないこと。当てると見た目が反転する */
.btn--gradient {
  width: 100%; height: 45px;
  background: var(--grad-btn);
  border: 2px solid var(--c-white);   /* カンプ実測: 純白2px */
  color: var(--c-white);
  font-size: 16px;
  /* ★.4em を text-indent にそのまま入れていたので4px右へ行き過ぎていた（実測）。
     .btn 側で半分だけ戻る */
  --btn-ls: .4em;
}
/* PSD #1005「検 索」: NotoSansCJKjp-Medium 20px / Tracking 100、ink y682..702・幅48px。
   PSDの本文は字間に空白を含むが、読み上げが「けん さく」になるのを避けて
   文言は「検索」のまま letter-spacing で同じ字送りにする。
   高さはカンプ実測 70px（y657..726）。検索ボックスと同じく 1024px から。 */
@media (min-width: 1024px) {
  .btn--gradient { height: 70px; font-size: 20px; font-weight: 500; }
}

/* ---------- 矢印ボタン（カルーセル送り。60x60 の真円・塗り透明） ----------
   ★icon-arrow-left/right.svg は**ボタンまるごと**（60x60の円 ＋ 1px #8D5CA6 の輪 ＋
     中の山形）。書き出しデータの `共通/arrow_left.svg` そのままで、輪はSVGが持っている。
   ★2026-08-07 まで CSS側でも border と border-radius を足し、SVGを 20x20 に縮めていた。
     結果「大きい丸の中に小さい丸と豆粒の山形」という別物になっていた
     （発注者の指摘「矢印はカンプと同じものでお願い致します」）。
     枠はSVGに任せ、CSSは大きさだけ決める。 */
.c-arrow {
  width: 60px; height: 60px;
  border: 0;
  background: transparent center / contain no-repeat;
}
.c-arrow--prev { background-image: url("/assets/img/icon-arrow-left.svg"); }
.c-arrow--next { background-image: url("/assets/img/icon-arrow-right.svg"); }
.c-arrow-group { display: flex; gap: 20px; justify-content: flex-end; }

/* ---------- 施術タグの小札 ----------
   カンプ実測（PC/デザイン/Browdia_サロン詳細.jpg）:
     枠 x220..303 y1760..1785 ＝ 84x26 ／ 1px #C16CA4 ／ 中は白 ／ 札の間6px
     文字 Noto Sans JP Regular 14px / Tracking 50 / #C16CA4
     ★字面は5文字で65px。palt 無しだと72pxになる。Photoshopの日本語組版は
       プロポーショナル字形が既定なので palt を入れる（base.css の注記と同じ理由）。
   SPカンプ（PSB #418）は 24 ＝ CSS 12px。
   ★2026-08-06 まで salon.css にあり、スクール詳細のコースでは素の <ul> のまま
     縦に並んでいた（枠も色も付かない）。共用の部品はここに置く。 */
.c-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.c-chip {
  display: inline-block;
  border: 1px solid var(--c-accent);
  border-radius: 3px;
  background: var(--c-white);
  padding: 0 9px;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: .05em;
  font-feature-settings: "palt" 1;
  color: var(--c-accent);
  white-space: nowrap;
}
@media (min-width: 1024px) { .c-chip { font-size: 14px; line-height: 24px; } }

/* ---------- セレクト（検索ボックス内） ---------- */
.c-select {
  width: 100%;
  height: 40px;
  padding-inline: 16px 44px;
  border: 0;
  border-radius: var(--r-select);
  background: var(--c-bg-pink) url("/assets/img/icon-select-arrow.svg") right 16px center / 14px 11px no-repeat;
  color: var(--c-navy);
  font-size: 14px;
  appearance: none;
  cursor: pointer;
}
/* PSD #1016「エリアを選択」/ #1010「施術メニューを選択」: NotoSansCJKjp-Regular
   18px / Tracking 100。枠は 392x70（カンプ実測 y435..504 / y557..626）。
   検索ボックスのPC変種と同じ 1024px から当てる（768pxだとMVで下が切れる）。 */
@media (min-width: 1024px) {
  .c-select {
    height: 70px;
    padding-inline: 24px 60px;
    font-size: 18px;
    letter-spacing: .1em;
    background-size: 20px 16px;
    background-position: right 24px center;
  }
}

/* ---------- セクション見出し（英字大 ＋ 日本語小） ----------
   カンプ実測（2026-07-31）:
     左揃え型（Event）  : 英字と日本語が「横並び」。どちらも #8C59A4 / #8B5AA9 ＝ --c-primary
     中央型（Pick Up）  : 英字の下に日本語が「縦積み」。どちらも #BF6AA1 ＝ --c-accent
   いずれも日本語だけ色を変えることはしない。色は親で決め、子は継承させる。 */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--c-primary);
}
.sec-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.sec-head__en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .02em;
}
.sec-head__ja {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
}
@media (min-width: 1024px) {
  .sec-head--center { gap: 10px; }
  /* PSDの /FontSize 実測値。40px は出現7回＝セクション英字見出しの数と一致 */
  .sec-head__en { font-size: var(--fs-sec-en); }
  .sec-head__ja { font-size: 16px; }
}

/* Pick Up Salon 型（アクセント色）。色は親に置き、英字・日本語とも継承させる。
   letter-spacing の最終字余白ぶんを負マージンで戻さないと中央がずれる */
.sec-head--accent { color: var(--c-accent); }
.sec-head--accent .sec-head__en { margin-inline-end: -.02em; }
@media (min-width: 1024px) {
  /* PSDの /FontSize 実測値。50px は出現5回＝大見出しの数と一致 */
  .sec-head--accent .sec-head__en { font-size: var(--fs-sec-lg); }
}

/* ---------- カード枠（影は無い。実測でフラット） ---------- */
.c-card {
  border-radius: var(--r-card);
  background: var(--c-white);
  overflow: hidden;
}

/* ---------- 検索ボックス（PNGは黒の焼き込み欠陥があるためCSSで再現） ----------
   元PNG(search_box.png / search_box_sp.png)は外周角に rgba(0,0,0,181〜226) の
   黒が焼き込まれており、背景に重ねると黒い三角のシミが出る（実測確認済み）。
   CSS再現なら29KB削減＋幅可変にできる。
   ※ backdrop-filter は使わないこと。元PNGは不透明でグラスモーフィズムではない */
.searchbox {
  border: 4px solid var(--c-panel-border);
  border-radius: var(--r-panel);            /* 外形20px = 塗り16px + 枠4px */
  background: var(--grad-panel);            /* 135deg #D69EC1 -> #CB99CD */
  background-clip: padding-box;             /* 枠の下に塗りを潜り込ませない */
  padding: 24px 20px;
  color: var(--c-white);
  /* カンプ実測のドロップシャドウ。
     下端 y779 で L=0.616 -> y812 で背景 L=0.768、右端 x1401 で L=0.635 -> x1434 で L=0.763。
     どちらも約34pxで減衰し、最暗は縁に接する＝ぼかし約34px・オフセットは小さい。
     チャンネル別の落ち込みが ΔR-8 / ΔG-27 / ΔB-13 とG成分が突出するため紫寄りの影。
     （Eventカード等は影なし。影があるのはこのパネルだけ） */
  box-shadow: 0 8px 34px rgba(141, 92, 166, .22);
}
/* PC変種は 1024px から。768px から当てると、MVがまだSP版（高さ726px）のうちに
   パネルだけPC版（高さ556px）になり、`.mv { overflow: hidden }` で下半分が切れる
   （768〜1023px で実測。Task 12）。MVのPC切り替えと同じ 1024px に揃える。 */
@media (min-width: 1024px) {
  /* 上下padding非対称はカンプどおり。上75px は PSD #1020「サロンを探す」の
     ink上端 y308 から逆算（パネル上端224 + 枠4 + 75 = 見出しboxの上端303、
     35px/1.2 の ink オフセット5px で 308）。下49px はボタン下端727 → パネル下端780。 */
  .searchbox { padding: 75px 50px 49px; }
}

.searchbox__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-block-end: 20px;
}
/* line-height は明示する。body の 1.75 を継承すると行箱が伸び、
   PCでパネル全体が約50px縦長になる（実測554pxに対して603px） */
.searchbox__title {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-white);   /* カンプ実測 #FFFFFF。濃紺ではない */
}
.searchbox__en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .06em;
  color: var(--c-white);
}
/* PCの値は PSD の一次情報（PC/PSD/Browdia_top.psd）:
     #1020 サロンを探す      NotoSansCJKjp-Bold      35px / Tracking 100 / ink y308..342
     #1019 Art Make Search  JosefinSans-SemiBold    20px / Tracking  50 / ink y358..375
   「34px / 16px」はカンプJPEGの目視で書いた値で、実測すると見出しが31px・
   英字が36px 上にずれていた（Task 12 で重ね合わせ検証して発覚）。 */
@media (min-width: 1024px) {
  .searchbox__head  { gap: 12px; margin-block-end: 20px; }
  .searchbox__title { font-size: 35px; letter-spacing: .1em; }
  .searchbox__en    { font-size: 20px; letter-spacing: .05em; }
}

/* SP: ラベル左・select右の横並び（カンプ実測。PCとは構造が違う） */
.searchbox__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 10px;
  margin-block-end: 10px;
}
/* PC: ラベル上・select下の縦積み */
@media (min-width: 1024px) {
  .searchbox__row {
    grid-template-columns: 1fr;
    gap: 12px;
    /* 実測 y504(select1下端) -> y557(select2上端) の53pxは
       「ラベル2の行box(21.6) + gap(12) + このマージン」の合計。
       row の margin にそのまま53pxを入れると85px空く（Task 12で発覚）。 */
    margin-block-end: 18px;
  }
}
/* 最終行の下マージンは 0 にして .searchbox__submit の margin-block-start
   だけを効かせる（実測: select2下端626 → ボタン上端657 ＝ 31px）。 */
.searchbox__row:last-of-type { margin-block-end: 0; }

.searchbox__label {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-white);   /* カンプ実測 #FFFFFF。パネル内の文字は全て白で、
                              濃紺なのは select の中の値だけ */
}
/* PSD #1017「エリア」/ #1011「施術メニュー」: NotoSansCJKjp-Bold 18px / Tracking 100 */
@media (min-width: 1024px) { .searchbox__label { font-size: 18px; letter-spacing: .1em; } }

.searchbox__submit { margin-block-start: 16px; }
@media (min-width: 1024px) { .searchbox__submit { margin-block-start: 31px; } }

/* ---------- ページ送り（もっと見る / 前のN件） ----------
   サロン一覧とスクール一覧が同じものを使う。
   ★2026-08-06 まで salon.css にあり、スクール一覧では素の .btn--outline のまま出ていた。
     .btn--outline は min-width:315px（トップの「イベント一覧へ」のカンプ実測値）なので、
     320px幅で内容カラム290pxを突き抜けて横スクロールが出た（viewport-check が right=330 で検出）。
   ★カンプ実測: 本文側の「もっと見る」は幅388px（枠線 y5332 / x432..819）。中央寄せ。
     388px はPCだけ。幅を無条件に書くと375pxで画面外へ出る（2026-08-04 に同じ罠）。 */
.list-pager {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 28px;
}
.list-pager__more,
.list-pager__prev { font-size: 14px; letter-spacing: .1em; min-width: 0; width: 100%; height: 56px; }
@media (min-width: 1024px) {
  .list-pager__more,
  .list-pager__prev { width: 388px; height: 60px; }
}

/* ---------- パンくず ----------
   breadcrumbs()（app/templates/ui.php）が出すもの。どのページからも使えるので
   ここに置く。★2026-08-06 まで salon.css にあり、スクールのページでは
   素のHTMLのまま出ていた（発注者の指摘）。ページ専用CSSへ戻さないこと。
   SPカンプ(PSB #747) = Noto Sans JP Regular 24 -> CSS 12px / Tracking 100 */
.c-breadcrumbs {
  /* ★白い帯にしない。カンプのパンくず帯は地色そのまま。
     PC/デザイン/Browdia_サロン一覧.jpg の y118..140 を rect で測ると
     最頻色 #fbf9fc が73.3%（= --c-bg）。白帯は実装側の入れ違いだった（Task 14で発覚）。 */
  background: var(--c-bg);
  font-size: 12px;
  letter-spacing: .1em;
  color: #8a85a8;
}
.c-breadcrumbs .l-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 50px;
}
.c-breadcrumbs a { color: #8a85a8; text-decoration: none; }
.c-breadcrumbs a:hover { text-decoration: underline; }
.c-breadcrumbs__sep { color: #cfc9dd; }

@media (min-width: 1024px) {
  /* カンプ実測: パンくず帯 y101..170 = 70px */
  .c-breadcrumbs .l-container { min-height: 70px; }
}

/* ---------- 地域バッジ ---------- */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--c-badge);
  color: var(--c-white);
  font-size: 13px;
}

/* ---------- 最寄り駅（頭にピン） ----------
   salon.css から移した（2026-08-07）。記事のサロン紹介カードでも使うが、
   記事ページは $pageCss = ['article'] で salon.css を読まないため、
   置いたままだとピンが消えて文字だけになる。 */
.c-station {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--c-text);
  /* ★入れ物からはみ出させない（2026-08-18）。駅名だけなら短いが、
       アクセス文を入れるようにしてからは長い文が来る。
       min-width: 0 が無いと flex の中で縮まず、下の丸めが効かない。 */
  max-width: 100%;
  min-width: 0;
}
.c-station::before {
  content: "";
  width: 10px;
  height: 13px;
  background: var(--c-accent);
  clip-path: path("M5 0C2.2 0 0 2.2 0 5c0 3.7 5 8 5 8s5-4.3 5-8c0-2.8-2.2-5-5-5zm0 7a2 2 0 110-4 2 2 0 010 4z");
  flex: none;
}
/* ★アクセス文を入れるとき用（2026-08-18）。駅名だけなら短いが、
     「地下鉄2・3号線 乙支路3街駅 徒歩5分／地下鉄4号線 明洞駅 徒歩7分」のような
     長い文が入る。折り返すとカードの高さが行ごとにずれるので1行に丸める。
   ★.c-station は ::before のピンを持つ inline-flex なので、
     素の文字ノードには text-overflow が効かない。span で包んだときだけ効く。 */
.c-station__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ---------------------------------------------------------------- 掲載依頼パネル
   サイドバーの「あなたのお店／スクールを掲載しませんか？」。1枚絵で、
   見出しもボタンも絵に焼き込まれている（発注者提供 img7＝サロン / img8＝スクール）。

   ★だから次の3つをセットで守ること。崩すとリンクが押せない・読み上げに出ない。
     ・画像は alt="" で装飾扱い
     ・同じ文言を u-visually-hidden でリンクの中に持たせる
     ・リンクを絵のボタンの位置に重ねる
   ★文字を画像にすると翻訳も検索も効かない。ここは発注者の指示（2026-08-04）。

   ★ボタンの位置は素材から実測する（2026-08-06、img7・img8 とも同値）:
     素材 1254x1254 のうち ボタン x208..1044 / y1028..1154
     -> left 16.6% / top 82.0% / width 66.7% / height 10.0%
     以前の値（left18.3% top80.5% w63.1% h10.4%）は img6 のときのもの。
     素材を差し替えたら必ず測り直す。

   ★salon.css ではなくここに置く。サロンとスクールの両方で使うため。 */
.side-cta { position: relative; }
.side-cta__panel {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}
.side-cta__hit {
  position: absolute;
  left: 16.6%; top: 82.0%; width: 66.7%; height: 10.0%;
  border-radius: 999px;
}
.side-cta__hit:focus-visible { outline: 2px solid var(--c-white); outline-offset: 3px; }

/* =====================================================================
 * salon.css から移した共通部品（2026-08-06）
 *
 * ★スクールのページは $pageCss = ['school'] だけで salon.css を読まない。
 *   なのに salon.css にしか無いクラスを使っていて、素の見た目のまま出ていた。
 *   これで5件目・6件目…なので、機械で全部洗い出した（結果は
 *   docs/decisions/2026-08-05-school-comp.md §6）。洗い出しの手順:
 *
 *     app/pages/school*.php と app/templates/parts/school-*.php の class= を全部集め、
 *     salon.css にあって components/school/base/layout に無いものを出す
 *
 *   2026-08-06 時点の結果は5件（.c-badge--over / .c-sec-title / .c-sec-title__ja /
 *   .list-count / .list-empty）。この6件目以降を作らないため、スクールでも使う
 *   部品はここに置くこと。
 * ===================================================================== */

/* ---------- 画像に重ねる地域バッジ ----------
   スクール一覧のサイドバー（注目のスクール）でも使う。
   ★.c-badge--over ではなく .c-badge.c-badge--over と書くこと（詳細度 0,2,0）。
     salon.css にもう一つ .c-badge があり、あとから読まれて border-radius を
     3px に戻してしまう。2クラスにして、そちらより強くしておく。
   ★カンプ実測: 画像の右上（Highlights の 福岡/釜山/明洞、Campaign の 明洞/東京、
     スクール一覧サイドバーの「全国」とも、画像の上端に乗っている）。 */
.c-badge.c-badge--over {
  position: absolute;
  right: 0; top: 0; bottom: auto;
  border-radius: 0 0 0 3px;
}

/* ---------- セクション見出し ----------
   移動前は salon.css にあり、スクール一覧の2ページ目以降と検索結果の
   「School List」だけが素のh1で出ていた。
   SPは英字と日本語を縦に積み、PCだけ横並びにする（カンプ）。
   ★行間を詰めること。body の line-height 1.7 を継ぐと25pxの英字で行箱が42pxになり、
     2行の間が開きすぎる（2026-08-05 指摘）。 */
.c-sec-title {
  display: grid;
  justify-items: start;
  gap: 2px;
  line-height: 1.2;
  font-family: var(--font-en);
  font-weight: 600;
  /* SPカンプ(PSB #718 Highlights / #556 Salon List) = Josefin SemiBold 50 -> CSS 25px。
     色も実測 #8c5ca4 で --c-primary と一致した */
  font-size: 25px;
  letter-spacing: .05em;
  color: var(--c-primary);
  margin-bottom: 20px;
}
.c-sec-title__ja {
  /* SPカンプ(PSB #719) = Noto Sans JP Medium 30 -> CSS 15px / Tracking 100 */
  line-height: 1.5;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
  /* ★英字と同じ色。--c-text（#333333）にしていたのは色を実測していなかったため
     （2026-08-06 指摘「見出しとサブ文章のカラーを揃えてほしい」）。
     カンプ実測（濃い側の最頻色）:
       サロン一覧 y2495..2530  英字 #8C5CA6 ／ 日本語 #8C5CA6
       サロン詳細 Recommend    英字 #8C5CA6 ／ 日本語 #8C5CA6
     どちらも --c-primary（#8D5CA6）と一致する。 */
  color: inherit;
}
@media (min-width: 1024px) {
  /* ★41px はカンプのインク寸法から決めた実測値（Task 14）。
     配信中の Josefin SemiBold はデザインの版より小さいため、
     PSDの nominal 値やフォント計量からの逆算（42.1〜42.8px と出た）は当てにならない
     ——docs/decisions/2026-08-04-salon-list-comp.md §2。
     実測（PC/デザイン/Browdia_サロン一覧.jpg と重ねて comp-diff.php ink）:
       font-size  Highlights高  Salon List高
         40px          39            31
       → 41px          40            32   ← カンプ（40 / 32）と完全一致
         42px          42            33
         43px          42            33
     幅も Highlights で実装392px / カンプ394px（差2px）。
     ★ここを変えるときは同じ手順で測り直すこと。数値だけ動かさない。 */
  .c-sec-title {
    display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
    font-size: 41px; margin-bottom: 28px;
  }
  .c-sec-title__ja { font-size: 16px; }
}

/* ---------- 一覧の件数行・0件のとき ----------
   移動前は salon.css にあり、スクール一覧では「すべて 13件」が
   地の文のまま（13が20pxの --c-primary にならない）で出ていた。 */
.list-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 18px 0 14px;
  font-size: 14px;
}
.list-count strong { font-size: 20px; color: var(--c-primary); }
/* 「絞り込みを解除」（求人一覧が雇用形態で絞り込まれているときだけ・2026-08-17）。
   件数の隣に小さく。バッジは3画面上にあるので、ここから外せるようにする。 */
.list-count__reset { margin-inline-start: 8px; font-size: 13px; text-decoration: underline; color: var(--c-navy); }
.list-count__reset:hover { opacity: .7; }
.list-empty { padding: 32px 0; font-size: 15px; }

/* ---------- 地図 ----------
   移動前は salon.css にあり、サロン詳細だけで使っていた。
   2026-08-06 からスクール詳細のアクセス情報でも使う（発注者の指示「地図は上で」）。
   ★**最初から iframe を出す。**押されるまで読み込まない facade はやめた
     （スクール詳細 2026-08-07 ／ サロン詳細 2026-08-10。どちらもカンプは地図が出た状態）。
     JSは要らなくなったので salon.js の差し替え処理も消してある。
     ★引き換えに、ページを開いた時点で Google へ通信が出る。
       `loading="lazy"` で画面に入るまでは読み込まない。
   ★縦横比はページごとに違うので --map-ratio を呼び出し側で上書きする。
     ここの既定はサロン詳細のカンプ実測（PC 700x180 = 35:9 ／ SP 245x150 = 49:30）。 */
.detail-map { --map-ratio: 49 / 30; margin: 12px 0 0; }
@media (min-width: 1024px) { .detail-map { --map-ratio: 35 / 9; margin: 16px 0 5px; } }
.detail-map__frame { display: block; width: 100%; aspect-ratio: var(--map-ratio); border: 0; }
.detail-map__link { margin-top: 8px; font-size: 14px; }

/* ---------------------------------------------------------------- 公開フォーム共通
 * ★honeypot を隠す。app/forms.php が **すべての**公開フォームに .form-hp を出す。
 *   もともと salon.css に置いていたため、salon.css を読まない画面
 *   （/job/{slug}/apply/ ・/contact/ ・/listing/）では隠れておらず、
 *   「ここは入力しないでください」が画面に見えていた（2026-08-07 に実測で発覚）。
 *   同じ取りこぼしを二度やらないよう、全ページが読む components.css に置く。
 *   ・display:none にしない（一部のボットが「隠された＝罠」と判断するため。forms.php の注記）
 *   ・左へ飛ばす方式（left:-9999px）にもしない。viewport-check.mjs が
 *     「ビューポートの外にはみ出した要素」として毎回FAILを出す。
 *   u-visually-hidden と同じ、その場で潰す方式にする。 */
.form-hp {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- セクション見出しの帯
 * ★2026-08-07（フェーズ6）に salon / school / job / article の **4本**から1本化した。
 *   カンプが同じものなので、4か所に同じ値を書いていると必ずどれかがズレる。
 *   ここに置いた値は salon.css にあった定義そのもの（4本のうちの上位互換）。
 *
 * カンプ実測（PC/デザイン/Browdia_サロン詳細.jpg）:
 *   帯    x200..1049 ＝ 850x60 / 角丸5px
 *         90degグラデ #CEAFD9(x200) -> #DCC0D9(x1049)
 *   文字  Josefin Sans SemiBold 24px / Tracking 50 / 白
 *   帯下端 -> 次の中身 30px
 * SPカンプ実測（PSB #436 Menu / 走査線。750px＝CSS375pxなので値は÷2）:
 *   帯 x30..719 y5189..5268 ＝ CSS 345x40 ／ 文字 CSS 17px ／ 帯下端 -> 中身 CSS 16
 *
 * ★line-height を明示すること。body の 1.7 を継ぐと24pxで行箱が40.8pxになり、
 *   min-height 60 と padding の取り合いで帯の高さそのものが変わる。
 * ★上の padding は **6px（SP 4px）**。0 でも 12 でもない（2026-08-10 に測り直した）。
 *   `min-height` ＋ `align-items: center` なので、padding-top は入れた値の**半分**だけ
 *   字を下げる。実測（インクの位置。帯は 60px）:
 *     padding-top 0   Josefin 上18（カンプ21）／ 日本語 インク中心が帯の中心より3px上
 *     padding-top 12  Josefin 上24（カンプ21）／ 日本語 3px下   ← 2026-08-10 午前までの値
 *     padding-top 6   Josefin 上21（カンプ21）／ 日本語 帯の中心ちょうど  ← いま
 *   カンプ実測:
 *     Browdia_サロン詳細.jpg   帯 y1578..1637 / Campaign のインク y1599..1620 ＝ 上21/下17
 *     Browdia_スクール詳細.jpg 帯 y7053..7112 のインク y7072..7093 ＝ 上19/下19（中央）
 *                              帯 y8025..8084 のインク y8044..8064 ＝ 上19/下20（中央）
 * ★なぜ「中央寄せ」だけでは合わないか: このクラスは `font-family: var(--font-en)`
 *   なので、**日本語の帯でも行箱（strut）は Josefin の寸法で組まれる。**
 *   Josefin は行箱の中で字面が上寄りなので、中央寄せのままだと字が3px浮く。
 *   記事のH2-01（.art-body .hd-2-1）は日本語のフォントで組まれるため padding 0 でちょうど中央。
 *   **同じ見た目の帯だが値が違うのはこの理由。片方に合わせて揃えないこと。**
 * ★メディアクエリはベース定義の**後ろ**に置くこと（前に置くと後勝ちで潰れる）。 */
.c-detail-title {
  --band-a: #CEAFD9;
  --band-b: #DCC0D9;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 40px;
  line-height: 1.2;
  padding: 4px 14px 0;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--band-a) 0%, var(--band-b) 100%);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .05em;
  color: var(--c-white);
  margin-bottom: 16px;
}
/* Campaign だけ帯が金。★--camp-a/--camp-b は salon.css の :root にある。
   このクラスを使うのはサロン詳細だけだが、値が解決できないと
   background 宣言ごと無効になる（色だけでなくグラデ全体が消える）ので既定値を書く。 */
.c-detail-title--camp {
  --band-a: var(--camp-a, #C6B774);
  --band-b: var(--camp-b, #DBCE9A);
}
@media (min-width: 1024px) {
  .c-detail-title { min-height: 60px; padding: 6px 28px 0; font-size: 24px; margin-bottom: 30px; }
}

/* ---------------------------------------------------------------- 求人のサブメニュー
 * カンプ実測（PC/デザイン/求人/Browdia_サロン求人TOP.jpg・PSD #205）:
 *   帯    y171..250 ＝ 高さ80 ／ 塗り #F7F0F7（パンくずの白の直下）
 *   文字  x201 から。16px ／ Tracking 100（=.1em）／ 4項目
 *         元は1つのテキストレイヤーで、項目の間は全角スペース2つ（16px + tracking で約35px）
 *
 * ★求人TOP・エリア別一覧・詳細・応募の4画面すべてに出る。
 * ★components.css に置くのは、求人特集一覧（/job/feature/）が article.css を読むため。
 *   job.css に置くと、その画面だけ帯が素になる。
 * ★SPはカンプ（SP/デザイン/求人/…_sp.jpg）を測ってから詰める。
 *   いまは横スクロールで逃がしてある（4項目が375pxに収まらないため）。
 */
.job-submenu { background: #F7F0F7; }
.job-submenu__list {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.job-submenu__list::-webkit-scrollbar { display: none; }
.job-submenu__link {
  display: inline-block;
  color: var(--c-primary);
  font-size: 14px;
  letter-spacing: .1em;
  text-decoration: none;
  white-space: nowrap;
}
.job-submenu__link:hover { text-decoration: underline; }
@media (min-width: 1024px) {
  /* カンプ実測: 帯80 / 文字16px / 項目の間 約35px */
  .job-submenu__list { min-height: 80px; gap: 35px; overflow-x: visible; }
  .job-submenu__link { font-size: 16px; }
}

/* ---------------------------------------------------------------- 求人特集記事のカード
 * カンプ実測:
 *   PC（PC/デザイン/求人/Browdia_サロン求人TOP.jpg・y2101..）
 *     2列 ／ **列幅 409 ・ 溝31**（409 + 31 + 409 = 849 ＝ 本文カラム850）
 *     画像 409 x 291（7:5）・角丸 ／ 題名 18px（画像の下・Tracking 75）
 *   SP（SP/デザイン/求人/Browdia_サロン求人TOP_sp.jpg・dsf=2 で y3460..／実測は÷2）
 *     **SPも2列** ／ 列幅 165 ・ 溝15（165 + 15 + 165 = 345 ＝ コンテナ）
 *     画像 165 x 124（4:3。PCの7:5より少し縦長）／ 題名 15px・行ピッチ22.5
 *
 * ★SPを1列で組んでいた（2026-08-07 にSPカンプと並べて気づいた）。
 *   カンプはSPでも2列。1列だと1枚が画面幅いっぱいになり、別物の見え方になる。
 * ★記事一覧の .art-card とは別物。あちらは 日付＋タグ＋題名＋抜粋 を出すが、
 *   特集カードは**画像と題名だけ**。混ぜると片方がカンプとずれる。
 * ★components.css に置くのは、求人TOP（job.css）と求人特集一覧（article.css）の
 *   両方が使うため。片方のCSSに置くと、もう片方でカードが素になる。
 */
.job-features__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 15px;
}
@media (min-width: 1024px) { .job-features__cards { gap: 30px 31px; } }

.job-feat { display: grid; gap: 12px; min-width: 0; }
.job-feat__media { display: block; }
.job-feat__img,
.job-feat__media .is-empty {
  display: block; width: 100%;
  aspect-ratio: 4 / 3;               /* SP 165 x 124 */
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--c-bg-alt);
}
/* アイキャッチが無い記事はロゴの面にする（2026-08-19 発注者）。
   ロゴの指定は base.css の --noimage-logo が正本 */
.job-feat__media .is-empty { background: var(--c-bg-alt) var(--noimage-logo); }
@media (min-width: 1024px) {
  .job-feat__img,
  .job-feat__media .is-empty { aspect-ratio: 7 / 5; }   /* PC 409 x 291 */
}
.job-feat__title {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--ls-narrow, .075em);
  color: var(--c-text);
}
.job-feat__title a { color: inherit; text-decoration: none; }
.job-feat__title a:hover { text-decoration: underline; }
@media (min-width: 1024px) { .job-feat__title { font-size: 18px; } }

/* ---------------------------------------------------------------- サイドバーの共通部品
 * 右カラム（x1100..1399 / 300px）の入れ物とカード。記事・求人・スクールで共通。
 *
 * ★ここに置く理由は2つ:
 *   ① 求人特集の記事（/job/feature/…）は **job-side.php** を出すが、
 *      記事ページは `$pageCss = ['article']` で **job.css を読まない**。
 *      job.css に置いたままだと、サイドバーが枠も余白も無い素の並びになる
 *      （salon.css で6回踏んだのと同じ罠。これが7回目にあたる）。
 *   ② 3本のサイドバーでカードの見た目を揃える（2026-08-07 発注者の指示
 *      「求人（積極採用、未経験OK）とスクール（注目スクール）もカードタイプに」）。
 *
 * ★カードの寸法は記事サイドバーの実測値に揃えた（決定記録 §5-9）:
 *     写真 4:3（300x225）／ 名前 18px 太字 紺 ／ 補足 12px
 *   それまでは3本ばらばらだった（求人 1:1・字14 ／ スクール 5:3・字15）。
 */
.art-side,
.job-side,
.school-side { display: grid; gap: 24px; align-content: start; }

/* カンプ実測: 見出しからカードまで28・カードとカードのあいだ28 */
.job-side__block,
.school-side__block { display: grid; gap: 28px; }

.job-side__title,
.school-side__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-primary);
  text-align: center;
  letter-spacing: var(--ls-wide);
}

/* 広告枠。カンプ実測: 求人は枠の間30 ／ スクールは16 */
.job-side__ads { display: grid; gap: 30px; }
.job-side__ad { display: block; }
.job-side__ad-img,
.job-side__ad .is-empty {
  display: block; width: 100%; aspect-ratio: 6 / 5; object-fit: cover;
  border-radius: 5px; background: var(--c-bg-alt);
}

/* 掲載依頼のパネルは1枚絵。外側の枠と余白は要らない */
.art-side__listing,
.job-side__listing,
.school-side__listing { background: none; padding: 0; }

/* ---------- サイドバーのカード（白いカード） ----------
 * カンプ実測（2026-08-07 発注者「白のカードできますか？」
 * 「サロンのランキングとデザイン合わせてください」）。
 * 一次情報は **スクール一覧のカンプ**（右カラム x1100..1399）:
 *     カード  x1100..1399 / y1879..2199 ＝ **300 x 321**・地は純白・角丸8
 *     写真    y1879..2102 ＝ 300 x 224（**4:3**）・カードの上辺いっぱい
 *     名前    L=1120 T=2119 ／ 18px Bold ／ Tracking 75 ／ Leading 28
 *     補足    L=1119 T=2148 ／ 12px ／ Tracking 75 ／ Leading 22
 *     カードの下端 2199 ＝ 補足のインク下端から 17
 *     次のカードの上端 2227 ＝ **カードの間は28**
 *   投稿記事ページのカンプも同じ寸法（名前 L=1119・18px/28 ／ 駅 L=1144・12px）。
 *
 * ★**記事カンプの地は純白**なので、白いカードが在っても見分けが付かない。
 *   2026-08-07 の最初の実測（決定記録 §5-9）でカードを見落としたのはこれが理由。
 *   カードが在ることはスクール一覧のカンプ（地が #FBF9FC）で確定した。
 * ★写真に border-radius を付けない。カードが overflow: hidden で角を丸めるので、
 *   写真側にも付けると上の2つの角だけ二重に丸まって見える。
 * ★バッジは .c-badge.c-badge--over を写真に重ねる（上の節）。
 * ★順番は「太字の名前 → 小さい補足」。求人は以前これが逆で、
 *   クリニック名（小）が求人タイトル（太字）の上に来ていた。
 */
.side-card {
  background: var(--c-white);
  border-radius: var(--r-card);
  overflow: hidden;
}
.side-card__link { display: block; text-decoration: none; color: inherit; }
.side-card__media { position: relative; display: block; }
.side-card__img,
.side-card__media .is-empty {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--c-bg-alt);
}
/* 文字はまとめて1つの箱に入れて余白を持たせる。
   ★行ごとに padding-inline を書かない。行の数がページで違う
     （記事は 順位・名前・駅の3行／求人とスクールは2行）ので、書き漏らしが出る。 */
/* カンプ実測: 写真の下端 → 最初の行のインク上端が 記事18 / スクール17。
     下は 補足のインク下端 → カードの下端が17（スクール一覧 2182 -> 2199）。 */
.side-card__body { display: block; padding: 12px 20px; }
.side-card__name,
.side-card__sub { display: block; }
.side-card__name {
  margin: 0;
  font-size: 18px; font-weight: 700; line-height: 28px;
  letter-spacing: var(--ls-narrow);   /* Tracking 75 */
  color: var(--c-navy);
}
.side-card__sub {
  margin: 0;
  font-size: 13px; line-height: 24px;
  letter-spacing: var(--ls-narrow);
  color: var(--c-text);
}
.side-card__link:hover .side-card__name { text-decoration: underline; }

/* ---------------------------------------------------------------- ボタンの中のアイコン（種類別）
 * ★ここに置く理由: サロン詳細（`.detail-card__cta`）と**記事のサロン紹介カード**の
 *   両方で使う。記事ページは `$pageCss = ['article']` で salon.css を読まないので、
 *   salon.css に置いたままだと記事側で絵が出ない（この罠は8回目）。
 * ★**`.btn__icon` そのものは上（1em / margin-right .7em / icon-apply.svg）にある。**
 *   ここで作り直さないこと。作り直すと求人の「応募する」の書類アイコンが消える。
 *   ここに書くのは「絵柄と大きさの差し替え」だけ。
 * ★currentColor で塗る。ホバーで文字色が反転しても絵が付いてくる。
 * ★LINEのマークは商標なので使えない。汎用の吹き出し（icon-comment.svg）を置いてある。
 *   LINEのブランドガイドに沿った公式素材の支給を待つ（申し送り）。
 */
/* ★書き出しデータに無いのでSVGは手起こし（build-assets.php の表にも無い）。 */
.btn__icon--pencil {
  width: 18px; height: 18px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/icon-pencil.svg") no-repeat center / contain;
          mask: url("/assets/img/icon-pencil.svg") no-repeat center / contain;
}
/* カンプ実測: 予約ボタンの中の暦アイコンは PC 24x24（基本情報）／22x22（カード）、
   SP 17x17（SPカンプ x236..269 を÷2） */
.btn__icon--calendar {
  width: 17px; height: 17px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/icon-calendar.svg") no-repeat center / contain;
          mask: url("/assets/img/icon-calendar.svg") no-repeat center / contain;
}
/* カンプ実測: 記事のサロン紹介カードのLINEボタン PC 27x26（x697..723 / y4282..4307）
   ／ SP 18x17.5（x215..250 / y6487..6521 を÷2） */
.btn__icon--comment {
  width: 18px; height: 17px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/icon-comment.svg") no-repeat center / contain;
          mask: url("/assets/img/icon-comment.svg") no-repeat center / contain;
}
/* 記事のスクール紹介カードの右ボタン（2026-08-19）。メール／Instagram（公式の窓口が Instagram のスクール）。
   Instagram のマークは author カードと同じ仮の svg（公式のマークは商標。素材の支給を待つ） */
.btn__icon--mail {
  width: 18px; height: 18px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/icon-mail.svg") no-repeat center / contain;
          mask: url("/assets/img/icon-mail.svg") no-repeat center / contain;
}
.btn__icon--instagram {
  width: 18px; height: 18px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/icon-instagram.svg") no-repeat center / contain;
          mask: url("/assets/img/icon-instagram.svg") no-repeat center / contain;
}