/* =====================================================================
 * BROWDIA salon.css — サロン一覧・エリアLP（フェーズ2b Task 9）
 *
 * カンプ: PC/デザイン/Browdia_サロン一覧.jpg（1600 x 5797）
 *         SP/デザイン/Browdia_サロン一覧_sp.jpg（750 x 16262）
 *
 * ★このページのPSDは存在しない。値の出どころと確度は
 *   docs/decisions/2026-08-04-salon-list-comp.md にまとめてある。
 *   「確度高」と書いた段組・帯の寸法は走査線の実測。
 *   文字サイズは配信フォントの版ずれ（同文書§2）があるため暫定で、
 *   Task 14 の重ね合わせで詰める。
 *
 * ★ブレークポイントは 1024px の1点だけ（layout.css の方針に従う）。
 * ===================================================================== */

:root {
  /* --- SPカンプ(PSB)から取れた一次情報 ---
     SPは750px = CSS375pxの2倍。値はすべて÷2してある。
     ★エリアバッジは国で色が違う（日本=ピンク / 韓国=青紫）。
       JPEGを眺めているだけでは絶対に気づけない種類の規則。 */
  --c-badge-jp: #C176A7;   /* 福岡バッジ実測 #c276a7 */
  --c-badge-kr: #8585C1;   /* 釜山・江南バッジ実測 #8585c1 */

  /* Campaign帯は左→右のグラデーション（PC実測 x210 #c6b774 -> x1045 #dbce9a） */
  --camp-a: #C6B774;
  --camp-b: #DBCE9A;

  /* 段組（y=1880 の走査線で実測。850 + 50 + 300 = 1200 で閉じる） */
  --list-main:   850px;
  --list-gap:     50px;
  --list-side:   300px;
  --list-hero-h: 620px;   /* 全幅ヒーロー y171..790 */
}

/* ---------------------------------------------------------------- パンくず
   ★2026-08-06 に components.css へ移した。
     breadcrumbs() は app/templates/ui.php にあってどのページからでも使えるのに、
     見た目だけ salon.css にあったため、スクールのページでは素のHTMLのまま出ていた
     （区切りの前後が詰まり、帯も色も付かない。発注者の指摘で発覚）。
     .list-layout で踏んだのと同じ「共用部品なのに片方のCSSにしか無い」。
   ここには書かないこと。components.css を見ること。 */

/* ---------------------------------------------------------------- ヒーロー */
.list-hero { position: relative; background: var(--c-bg); }

/* ★JSなしでも見られるように、素の横スクロール＋scroll-snap にする。
   矢印はJSがあるときだけ表示する（部品側で hidden、salon.js が外す）。 */
.list-hero__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.list-hero__track::-webkit-scrollbar { display: none; }

.list-hero__slide {
  flex: 0 0 82%;
  scroll-snap-align: center;
}
.list-hero__link { position: relative; display: block; height: 100%; }
.list-hero__img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}
.list-hero__img.is-empty { background: var(--c-bg-alt); }

.list-hero__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: 6px;
  padding: 40px 16px 16px;
  color: var(--c-white);
  /* 写真の上に白文字を置くので、下からの暗がりを必ず敷く。
     写真によっては読めなくなるため（明るいサロン内観が多い） */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 62%);
}
.list-hero__title { font-size: 16px; font-weight: 700; line-height: 1.5; }
.list-hero__desc {
  font-size: 13px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.list-hero__caption .c-badge { justify-self: start; }

.list-hero__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  /* ★カンプ実測: 丸は紫みのピンク #C282B6、矢印は白抜き
     （PC/デザイン/Browdia_サロン一覧.jpg の x372..398 / y465..495）。
     白丸＋紫の矢印にしていたのは逆だった（2026-08-05 指摘）。 */
  background: #C282B6;
  cursor: pointer;
}
.list-hero__arrow::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin-inline: auto;
  border-top: 2px solid var(--c-white);
  border-right: 2px solid var(--c-white);
}
.list-hero__arrow--prev { left: 8px; }
.list-hero__arrow--prev::before { rotate: -135deg; translate: 2px 0; }
.list-hero__arrow--next { right: 8px; }
.list-hero__arrow--next::before { rotate: 45deg; translate: -2px 0; }
.list-hero__arrow[disabled] { opacity: .35; cursor: default; }

@media (min-width: 1024px) {
  /* カンプ: 中央の1枚が大きく、左右が見切れる3枚組。
     ★左右の余白は padding ではなく scroll-padding と併用する。
       padding だけだと1枚目が中央に来ず、左端に貼り付く。 */
  /* ★カンプ実測（y=760 の走査線）:
       左スライド x0..369 / 溝 x370..399(30px) / 中央 x400..1199(800px)
       / 溝 x1200..1229(30px) / 右 x1230..1599
       370 + 30 + 800 + 30 + 370 = 1600 で閉じる。
       3枚とも y171..790 の同じ高さ（中央だけ拡大はしない）。 */
  .list-hero__track {
    gap: 30px;
    padding-inline: calc(50% - 400px);
    scroll-padding-inline: calc(50% - 400px);
  }
  .list-hero__slide { flex: 0 0 800px; }
  .list-hero__img { height: var(--list-hero-h); }
  .list-hero__title { font-size: 22px; }
  .list-hero__desc { font-size: 13px; }
  .list-hero__caption { padding: 60px 28px 28px; }
  .list-hero__arrow { width: 48px; height: 48px; }
  .list-hero__arrow--prev { left: calc(50% - 470px); }
  .list-hero__arrow--next { right: calc(50% - 470px); }
}

/* ---------------------------------------------------------------- 段組 */
.list-layout { display: block; }

@media (min-width: 1024px) {
  .list-layout {
    display: grid;
    /* ★メインは minmax(0, 850px)。850px 固定にしない。
       カンプ幅（コンテナ1200px）では実測どおり 850px になるが、
       1024〜1239px ではコンテナが1200pxに満たないため、固定だと
       850 + 50 + 300 = 1200 を要求して右へはみ出す。
       実測: 1024pxで右端1220px（ビューポート外）まで出ていた（Task 14で発覚）。
       minmax の下限を 0 にするのも必須。auto のままだと中身の
       min-content 幅より縮まず、同じことが起きる。 */
    grid-template-columns: minmax(0, var(--list-main)) var(--list-side);
    column-gap: var(--list-gap);
    align-items: start;
  }
  /* ★SPはカンプ順の1カラム。DOMはSP順のまま、PCだけ配置で寄せる。
     PC用に別のDOMを書かない（同じ内容が2回出る） */
  .list-main { grid-column: 1; }
  /* ★追尾しない。発注者の指示（2026-08-04 目視）。
     sticky だとメイン側の見出しとサイドバーの上端がずれて見える。 */
  .list-side { grid-column: 2; }
  /* ★サイドバーの上端を Highlights の「カード」の上端に合わせる（発注者の指示 2026-08-04）。
     実測 180px = セクション上余白 80（--section-py）+ 見出し 72 + 見出し下余白 28。
     見出しの寸法を変えたら測り直すこと（node scripts/... の probe で
     .hl-grid と .list-side の top の差を見る）。 */
  .list-layout--offset .list-side { margin-top: calc(var(--section-py) + 100px); }
}

/* ---------------------------------------------------------------- 見出し */
/* ★.c-sec-title / .c-sec-title__ja は components.css に移した（2026-08-06）。
   実測値と根拠もそちらに持っていってある。 */

/* Campaign は帯の中に置く。
   PC実測で x210 #c6b774 -> x1045 #dbce9a と連続的に変わるので、単色＋左罫ではなくグラデーション。
   SPカンプ(PSB #635)は Josefin SemiBold 34（CSS 17px）/ Tracking 50 / 白 */
.c-camp-title {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .05em;
  color: var(--c-white);
  background: linear-gradient(90deg, var(--camp-a) 0%, var(--camp-b) 100%);
  padding: 10px 16px;
  margin-bottom: 16px;
}
@media (min-width: 1024px) { .c-camp-title { font-size: 24px; padding: 12px 20px; } }

.c-side-title {
  /* SPカンプ(PSB #204 Ranking) = Josefin SemiBold 60 -> CSS 30px / Tracking 50 */
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: .05em;
  color: var(--c-primary);
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------- 共通の小物 */
/* ★国で色が違う。既定は日本。韓国は --kr を付ける（cards.php が付ける）。
   SPカンプ(PSB #714 福岡 / #701 釜山)の実測。文字は Noto Sans JP Medium 26（CSS 13px）/ Tracking 100 */
.c-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 3px;
  background: var(--c-badge-jp);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.5;
  white-space: nowrap;
}
.c-badge--kr { background: var(--c-badge-kr); }
.c-badge--sm { padding: 1px 8px; font-size: 12px; }

/* ★`c-` で始まる部品はこのファイルに書かないこと。スクールのページは
   $pageCss = ['school'] だけで salon.css を読まないので、ここに書くと
   スクール側だけ素の見た目で出る。components.css へ移した実績:
     .c-breadcrumbs / .list-layout / .list-pager（〜2026-08-05）
     .c-chips・.c-chip（2026-08-06。スクールのコースの札が素の <ul> のままだった）
     .c-badge--over / .c-sec-title・__ja / .list-count / .list-empty（2026-08-06）
     .c-station（2026-08-07。記事のサロン紹介カードが salon.css を読まない）
       ← 機械で全部洗い出した結果。手順と結果は decisions §6。 */

/* .c-station は components.css に移した（記事ページは $pageCss=['article'] だけ）。 */

/* 星。カンプ実測（サロン詳細の識別行 x353..435 と口コミ、サロン一覧 x527..609）は
   どこも「字面15px・送り19px（＝溝4px）」で一致する。
   ★形は近似の多角形をやめて書き出しデータの星（26x25）をマスクにする。
     多角形は箱の中で字面が 10x9 にしかならず、カンプ（15x14）より一回り小さかった。
     箱を15pxにしてもマスクにしないと字面は追いつかない。
   ★icon-star-on.svg と icon-star-off.svg はパスが同じで色だけ違う。
     色は background-color 側で出すので、マスクは on の1本を共用する。 */
.c-stars { display: inline-flex; gap: 4px; }
.c-stars__s {
  width: 15px;
  height: 15px;
  background: var(--c-star-off);
  -webkit-mask: url("/assets/img/icon-star-on.svg") no-repeat center / contain;
          mask: url("/assets/img/icon-star-on.svg") no-repeat center / contain;
}
.c-stars__s.is-full { background: var(--c-star); }
.c-stars__s.is-half {
  background: linear-gradient(90deg, var(--c-star) 50%, var(--c-star-off) 50%);
}

/* ★display と text-align を書かないこと。.btn（components.css）の
   inline-flex + align-items:center による上下中央寄せが打ち消される。
   実測: 高さ68pxの .btn--outline で文字が中心より10px上にあった（2026-08-05 指摘）。 */
.btn--pill {
  padding: 12px 32px;
  border-radius: 999px;
  background: var(--grad-btn);
  color: var(--c-white);
  font-size: 14px;
  text-decoration: none;
  /* カンプ実測: 暦アイコンと文字の間は PC 20px（アイコン右端775 -> 文字796）／
     SP 15.5px（SPカンプ x236..269 -> 文字x300 を÷2） */
  gap: 15px;
}
@media (min-width: 1024px) { .btn--pill { gap: 20px; } }
.btn--outline {
  padding: 11px 32px;
  border: 1px solid var(--c-primary);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-primary);
  font-size: 14px;
  text-decoration: none;
}

/* ---------------------------------------------------------------- Highlights */
/* ★溝はSPカンプ実測 15px（PSB 750px で 30px）。
   15 + 165 + 15 + 165 + 15 = 375 で閉じる。 */
.hl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
@media (min-width: 1024px) {
  .hl-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.hl-card__link { display: block; text-decoration: none; color: inherit; }
.hl-card__media { position: relative; display: block; }
.hl-card__img,
.hl-card__media .is-empty {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--c-bg-alt);
}
.hl-card__name {
  /* ★SPはPSB実測 #709「カード名」= Noto Sans JP Bold 28 / Leading 40
     -> CSS 14px / 行送り 20px（docs/decisions/2026-08-04-salon-list-comp.md §0）。
     PCの22pxをここに書いていたためSPまで大きくなっていた（2026-08-05 指摘）。
     PCの値は下のメディアクエリで上書きする。 */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.43;
  /* ★カンプ実測 #404165（--c-navy）。紫ではない（2026-08-04 目視で指摘） */
  color: var(--c-navy);
  margin: 10px 0 6px;
  /* ★サロン名は2行までで切り、はみ出したら「…」にする
     （2026-08-05 発注者の指示「2行にして、高さを合わせたい」）。
     全部を見せる場所は詳細ページ。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* ★2行ぶんの高さを**必ず取る**指定（min-height: calc(1.43em * 2)）は外した
       （2026-08-18 発注者「タイトルとアクセス文の行間が空きすぎている」）。
       1行の名前だと下に空きが残り、実測でトップの Pick Up が35px、
       サロン一覧の Highlights が35px、サロン詳細の関連サロンが48px空いていた。
       しかも 1.43 はSPの行送りで、PCは 1.55。2行ぶんにすら足りていない値だった。
     ★上限としての2行（-webkit-line-clamp）は残す。長い店名は「…」で切れる。
     ★カードの高さは .hl-card__cta の margin-top: auto でそろう
       （ボタンの位置は名前が1行でも2行でも変わらない）。 */
}
/* ★min-width: 0 は親にも要る。付けないと grid/flex の列が
     中身の最小幅まで広がり、丸めが効かない（2026-08-18）。 */
.hl-card__station { margin-bottom: 6px; min-width: 0; }
.hl-card__desc {
  font-size: 13px;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---------------------------------------------------------------- Campaign */
.camp-grid { display: grid; gap: 12px; }
@media (min-width: 1024px) { .camp-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* ★Campaign 節の下の「キャンペーンをもっと見る」（2026-08-21 発注者の依頼）。
     /salon/campaign/（まとめページ）への入口。ボタンの形は list-pager の
     「もっと見る」（components.css）と同じ白地＋枠線のピルに合わせる。 */
.camp-more { display: grid; justify-items: center; margin: 20px 0 0; }
.camp-more .btn { font-size: 14px; letter-spacing: .1em; min-width: 0; width: 100%; height: 56px; }
@media (min-width: 1024px) { .camp-more { margin-top: 24px; } .camp-more .btn { width: 388px; height: 60px; } }

.camp-card {
  /* ★カンプ実測 #f8f5ee（クリーム）。白ではない（2026-08-04 指摘） */
  /* 発注者の指示（2026-08-04「もう少し濃ゆく」）で、カンプ実測 #f8f5ee より一段濃い */
  background: #F2ECDF;
  border-radius: var(--r-card);
  padding: 12px;
}
.camp-card__salon a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-text);
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee7f0;
  margin-bottom: 10px;
}
/* ★円。カンプのロゴは円形（PC/デザイン/Browdia_サロン一覧.jpg を拡大して確認）。
   角のままだと四角い画像がそのまま出る（2026-08-04 目視で指摘） */
.camp-card__logo { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; }
/* ★カンプ実測: 画像は 140x175 の縦長。90pxの横長ではない（2026-08-04 指摘） */
.camp-card__body { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
/* ★Campaign の地域タグだけ「画像の右上」。他のカード（Highlights・Ranking）は右下。
   カンプ実測（PC/デザイン/Browdia_サロン一覧.jpg の Campaign セクション）で
   明洞・東京のタグが画像の上端に乗っている。 */
.camp-card__media { position: relative; display: block; }
.camp-card__media .c-badge--over {
  top: 0; bottom: auto; right: 0;
  border-radius: 0 3px 0 3px;
}
.camp-card__img {
  width: 140px;
  /* ★正方形に戻した。走査線で 140x175〜197 と出たが、
     これはカードの縦のうち画像以外（上に乗るタグ・下の余白）まで拾っていた。
     「縦長すぎる」との指摘（2026-08-04）を採り、見た目に合わせて 1:1 にする。 */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  background: var(--c-bg-alt);
}
/* ★太く・少し大きく（2026-08-04 指摘） */
.camp-card__title { font-size: 14px; font-weight: 700; line-height: 1.7; }
.camp-card__price { color: var(--c-rose); font-size: 14px; text-align: right; margin-top: 6px; }

/* ---------------------------------------------------------------- Salon List */
/* ★.list-count / .list-count strong / .list-empty は components.css に移した
   （2026-08-06。スクール一覧でも使う） */
/* ★トラックを minmax(0, 1fr) にする。1fr（＝minmax(auto,1fr)）のままだと、
     中身が縮まないカードがあったときにトラックごと広がり、ページに横スクロールが出る。
     2026-08-21、トップの新着サロンで実測: 容器345px に対しカードが374px、
     ページ幅が389px になっていた（375pxのビューポートを14pxはみ出す）。
   ★カードの中身は日々変わる（掲載サロンの文字数はこちらで決められない）。
     入力を短くして直すのではなく、器が広がらないようにする。 */
.list-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* ★グリッド項目の min-width は既定が auto（＝min-content）。0 にしないと
     カード自身がトラックを押し広げる。上の minmax と対で必要。 */
.salon-card { min-width: 0; }

.salon-card {
  display: grid;
  gap: 12px;
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: 14px;
}
/* ★2枚横並びはSPだけ（下の max-width で指定）。
   PCは254pxの左カラムに縦積み（Task 9 のカンプ実測どおり）。
   ここで無条件に2カラムにしたため、PCでも写真が半分の幅になっていた
   （2026-08-05 指摘）。メディアクエリの外にPC/SP固有の値を書かないこと。 */
.salon-card__media { display: grid; gap: 8px; }
@media (max-width: 1023px) {
  /* SPは2枚横並び。縦に積むとカードだけ極端に縦長になる */
  .salon-card__media { grid-template-columns: 1fr 1fr; }
}
.salon-card__img,
.salon-card__media .is-empty {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  background: var(--c-bg-alt);
}
/* ★min-width: 0 はアクセス文（長い）を1行に丸めるため（2026-08-18）。
     flex-wrap があるので、収まらなければまず次の行へ回り、
     それでも長いときに「…」で切れる。 */
.salon-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.salon-card__name { margin: 8px 0; font-size: 17px; line-height: 1.5; }
/* ★カンプ実測 #404165（--c-navy）。紫(--c-primary)ではない。
   inkcolor で Highlights カード名 #404165 / 大カード名 #575676（AA込みの平均）*/
.salon-card__name a { color: var(--c-navy); text-decoration: none; }
.salon-card__name a:hover { text-decoration: underline; }
.salon-card__rating { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.salon-card__score { font-size: 14px; font-weight: 700; }
.salon-card__reviews {
  font-size: 13px;
  color: var(--c-text);
  background: var(--c-bg-alt);
  border-radius: 3px;
  padding: 2px 8px;
}
.salon-card__desc { font-size: 13px; line-height: 1.9; }

.salon-menu { margin-top: 12px; border-top: 1px solid #eee7f0; padding-top: 10px; }
.salon-menu__head { display: flex; align-items: baseline; justify-content: space-between; }
/* SPカンプ(PSB #497 MENU) = Josefin SemiBold 28 -> CSS 14px / Tracking 75。色は実測 #c06ca2 */
.salon-menu__label {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: .075em;
  color: var(--c-accent);
  font-size: 14px;
}
/* SPカンプ(PSB #501 一覧へ) = Noto Sans JP Regular 24 -> CSS 12px / Tracking 50 */
/* ★カンプ: 文字は濃い色＋下線、矢印はピンクで大きめ（2026-08-05 指摘）。
   全体をアクセント色の小さい文字にしていた。 */
.salon-menu__more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; letter-spacing: .05em;
  color: var(--c-text); text-decoration: none;
}
.salon-menu__more span { text-decoration: underline; text-underline-offset: 4px; }
.salon-menu__more::before { content: "▶"; color: var(--c-accent); font-size: 13px; line-height: 1; }
.salon-menu__list { list-style: none; margin: 8px 0 0; padding: 0; }
.salon-menu__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 2;
}
.salon-menu__price { white-space: nowrap; }

/* ★行ごとクリーム地。Campaign カードと同じ（カンプ実測 #f8f5ee を一段濃くした値） */
.salon-camp {
  /* ★ラベルはカンプ実測 100x100 の正方形。64px幅ではない */
  display: grid; grid-template-columns: 100px 1fr; gap: 12px;
  margin-top: 12px; background: #F2ECDF; padding: 10px; border-radius: 4px;
}
.salon-camp__label {
  display: grid;
  place-items: center;
  /* ★単色ではなく斜めのグラデーション（2026-08-04 指摘を受けて実測）。
     カンプのラベル（x526..625 / y3126..3225 = 100x100）の四隅:
       左上 #dbce9a  右上 #cec083  中央 #cec486  左下 #d4c58c  右下 #c8b772
     -> 左上が明るく右下が暗い。ブランド金2色（--camp-b -> --camp-a）の135deg。 */
  background: linear-gradient(135deg, var(--camp-b) 0%, var(--camp-a) 100%);
  color: var(--c-white);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  border-radius: 4px;
  padding: 8px 4px;
}
/* ★太く・少し大きく（2026-08-04 指摘） */
.salon-camp__body { display: grid; gap: 4px; font-size: 14px; line-height: 1.7; }
.salon-camp__title { font-weight: 700; }
/* ★flex の既定 min-width:auto を残す。日本語は1文字幅まで潰れるので
   0 にすると価格に押し負ける（2026-08-21 京都院で実測） */
.salon-camp__body > .salon-camp__title { flex: 1 1 auto; }
.salon-camp__price { color: var(--c-rose); text-align: right; }

@media (min-width: 1024px) {
  /* ★金ラベルは帯とぴったり同じ高さにする（上下の余白なし）。カンプ実測:
       サロン一覧  ラベル x526..626 / y3126..3226 ＝ 100x100、帯も y3126..3226
                   （帯の左端 = ラベルの左端。x520は白・x530から金）
       トップ新着  ラベル・帯とも y5198..5278 ＝ 80
     padding:10px を入れていたためラベルが帯より20px小さく、
     そのぶん帯が厚くなって写真列より下へはみ出していた（2026-08-06 指摘）。
     トップ側の 80 は top.css で上書きする。 */
  .salon-camp { padding: 0; }
  .salon-camp__label { min-height: 100px; }
  /* ★タイトル（左・複数行可）と価格（右）は横並びで上下中央。カンプの
     「【12月限定】…」＋右端の「¥00,000」がこの組み方。
     1カラムのまま縦に積むと価格が下に落ちて、帯の中の余白が上下で偏る
     （2026-08-06 指摘「キャンペーン内のテキストのバランスが悪い」）。
     この指定はSP側（max-width:1023px）にしか無く、PCで効いていなかった。 */
  .salon-camp__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 4px 10px;
    padding-inline: 12px;
  }
  /* ★SP側と同じ理由で nowrap にしない（2026-08-21）。長い価格が器を押し広げる */
  .salon-camp__price { text-align: right; word-break: keep-all; overflow-wrap: anywhere; min-width: 0; margin-inline-start: auto; }

  .salon-card { grid-template-columns: 254px 1fr; gap: 20px; padding: 20px; }
  .salon-card__name { font-size: 20px; }
  .salon-card__desc { font-size: 13px; }
  .salon-menu__list li { font-size: 13px; }
}


/* ---------------------------------------------------------------- サイドバー */
.list-side { display: grid; gap: 32px; margin-top: 40px; }
/* ★PCの上余白は 0 にしないこと。段組の上端はヒーローのスライダーの下端そのもので、
     0だとサイドバーの1枚目（掲載依頼のパネル）がスライダーに接する
     （2026-08-06 発注者の指摘。/salon/japan/ で実測: スライダー下端791・パネル上端791）。
     本文カラム側は .l-section の --section-py（80）で空くので、サイドバーにも同じ値を入れて
     パネルの上端を「Salon List」の見出しと同じ高さに揃える。
   ★Highlights があるページは .list-layout--offset が 180px で上書きする（この下の行より
     詳細度が高いので順序に関係なく勝つ）。あちらは見出しではなくカードの上端に合わせる指定。 */
@media (min-width: 1024px) { .list-side { margin-top: var(--section-py); } }

/* SPカンプ実測: 上 #d48abb -> 下 #c471a7 */
/* ★パネル1枚の画像。背景も文言もボタンも絵の中にある（発注者提供 img6.png）。
   絵のボタンの位置にだけ透明なリンクを重ねる。 */
/* ★掲載依頼パネル（.side-cta）は components.css へ移した（2026-08-06）。
   サロンとスクールの両方のサイドバーで使うため。ページ専用CSSに置くと
   もう片方のページで効かない（同じ罠を3回踏んでいる）。 */
/* SPカンプ(PSB #210 掲載依頼はこちら) = Noto Sans JP Regular 26 -> CSS 13px / Tracking 75 */
.side-cta .btn--pill {
  background: var(--c-white); color: var(--c-primary);
  font-size: 13px; letter-spacing: .075em; padding: 10px 24px;
}

.side-rank__tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.side-rank__tab {
  flex: 1;
  padding: 7px 0;
  border: 1px solid var(--c-primary);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-primary);
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .05em;
  cursor: pointer;
}
.side-rank__tab.is-current { background: var(--grad-btn); border-color: transparent; color: var(--c-white); }
.side-rank__panel { display: grid; gap: 16px; }
.side-rank__panel.is-hidden { display: none; }

.rank-card__link { display: block; text-decoration: none; color: inherit; }
.rank-card__media { position: relative; display: block; }
.rank-card__img,
.rank-card__media .is-empty {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--c-bg-alt);
}
.rank-card__no {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .05em;
  /* ★カンプ実測 #b9a146（inkcolor）。1〜2位はこの金色 */
  color: #B9A146;
  /* ★太字。カンプの No.1 は太い（2026-08-04 指摘） */
  font-weight: 700;
}
.rank-card__crown {
  width: 14px;
  height: 11px;
  background: #d9b45f;
  clip-path: polygon(0 100%, 0 25%, 25% 50%, 50% 0, 75% 50%, 100% 25%, 100% 100%);
}
.rank-card__name { font-size: 14px; line-height: 1.6; color: var(--c-navy); margin-bottom: 4px; }

.side-new__list { display: grid; gap: 12px; }
.mini-card__link {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.mini-card__img,
.mini-card__media .is-empty {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--c-bg-alt);
}
.mini-card__body { display: grid; gap: 4px; justify-items: start; }
/* ★font-weight を必ず書くこと。この要素は h3（W3C Nu 対応）で、
     書かないと UA既定の太字に落ちる（base.css は h1..h6 を一括リセットしていない）。 */
.mini-card__name { font-size: 14px; font-weight: 400; line-height: 1.5; }

/* SPカンプ(PSB #237 もっと見る) = Noto Sans JP Medium 28 -> CSS 14px / Tracking 100 */
.side-more { margin-top: 16px; text-align: center; }
/* ★ページ送り（.list-pager）は components.css へ移した（2026-08-06）。
     サロンとスクールで同じ部品なのにここにしか無く、スクールの「もっと見る」が
     .btn--outline の min-width:315px のまま320px幅で画面外へ出ていた。
     ここには書かないこと。 */
.side-more .btn--outline { font-size: 14px; letter-spacing: .1em; }
/* ★min-width も戻すこと。components.css の .btn--outline は PC で min-width:445px
   （トップの「イベント一覧へ」のカンプ実測値）。300pxのサイドバーでは
   width:100% を書いても min-width が勝ち、ボタンが445pxのまま外へ出る。
   さらに .list-side は grid なので、はみ出した子の min-content が
   トラック幅を445pxへ押し広げ、サイドバー全体が右へずれていた（Task 14で発覚）。 */
/* ★カンプ実測: サイドバーの「もっと見る」は 248 x 60（枠線の行 y3206..3265 / x1126..1373）。
   コンテナ幅いっぱい(300px)でも、components.css の高さ68pxでもない。
   min-width も戻すこと（PC の .btn--outline は 445px で、300pxの列を押し広げる）。 */
.side-more .btn--outline {
  width: 248px; min-width: 0; height: 60px; font-size: 14px;
}

/* ---------------------------------------------------------------- 補助 */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =====================================================================
 * サロン詳細（Task 10）
 * PSD実測: PC/PSD/Browdia_サロン詳細.psd
 *   MV y331..711 は1200px幅 / 本文 y712以降は850px 1カラム（x200..1049）
 *   4アンカーナビ タブ208 x 4 ＋ 溝6 x 3 = 850
 *   見出し Josefin Sans SemiBold 24px / Tracking 50
 * ===================================================================== */

.preview-note {
  background: #fdf5e6;
  color: #97564c;
  font-size: 13px;
  text-align: center;
  padding: 10px 16px;
}

/* ---------------------------------------------------------- サロン名の帯
   カンプ実測: 帯 y171..330（160px）／地色 #F7F0F7
     バッジ y218..234 ／ 駅名 16px Tracking75 ／ サロン名 Bold 30px Tracking50
   文字色はすべて #414167（--c-navy）。 */
.detail-head { background: #F7F0F7; }
.detail-head .l-container { padding-block: 24px 22px; }
.detail-head__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  line-height: 1.2;
  color: var(--c-navy);
}
.detail-head__meta .c-station { font-size: 14px; letter-spacing: .075em; color: var(--c-navy); }
.detail-head__name {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .05em;
  color: var(--c-navy);
}
@media (min-width: 1024px) {
  /* 帯上端171 → バッジink上端218（47px）／サロン名ink下端291 → 帯下端330（39px） */
  .detail-head .l-container { padding-block: 41px 33px; }
  .detail-head__meta .c-station { font-size: 16px; }
  /* 駅名ink下端237 → サロン名ink上端262 で 25px */
  .detail-head__name { margin-top: 21px; font-size: 30px; }
}

/* ---------------------------------------------------------------- MV と2段組
   ★MVから本文までを1つの2段組で囲む。予約カードを追尾させる（sticky）には、
     カードを「ページの高さぶん続く入れ物」の中に置く必要があるため。
     MVの中に閉じ込めたままだとMVの高さぶんしか粘らない。
     2026-08-05 発注者の指示「サイドバーは追尾するように」。
   ★PCでは .detail-layout__main を display:contents にして、中の4つを
     .detail-layout のグリッド項目に昇格させる。こうするとカードだけを
     grid-row: 1/-1 で全行にまたがらせられる（＝ページ全体で粘る）。
     DOMの順は MV -> カード -> 識別行 -> タブ -> 本文 のままなので、
     SPはカンプどおり「MVのすぐ下にカード」で並ぶ。
   ★列幅はカンプ実測。MV x200..1055（855）／溝45／カード x1100..1400（300）。
   ★SPでも grid-template-columns を必ず書く（PC側と同じ理由）。既定のままだと
     gridアイテム（.detail-layout__main）の min-width が auto なので、列が
     中身の min-content（345px）より小さくなれない。コンテナは正しく330pxでも
     列だけ345pxに膨らみ、その中の .detail-nav が margin-inline:-15px で
     「親+30」＝375pxになって、360pxの画面で15pxはみ出す
     （2026-08-05 実測。375px＝SPカンプ幅ちょうどでだけ辻褄が合っていた）。 */
.detail-layout {
  padding-block: 20px 0; display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}
.detail-mv__inner { display: grid; gap: 20px; }
.detail-mv__img,
.detail-mv__media .is-empty {
  display: block;
  width: 100%;
  /* カンプ実測 855 x 449 */
  aspect-ratio: 855 / 449;
  object-fit: cover;
  border-radius: var(--r-card);
  background: var(--c-bg-alt);
}

/* ---- 右のサロンカード（カンプ実測 300 x 340／枠1px #E4E3F1） ---- */
/* ★grid-template-columns を必ず書く。既定だと列幅が中身の max-content になり、
   サロン名の長い行がカードの外へはみ出して、ロゴ・ボタンまで右へずれる
   （2026-08-05 実測: 名前が幅333pxで、300pxのカードから飛び出していた）。 */
/* ★SPには出さない。SPカンプ（Browdia_サロン詳細_sp.jpg）はMVの下がすぐ識別行で、
   予約導線は画面下の追尾ボタン（.detail-sticky）が受け持つ。
   2026-08-05 発注者の指示「（追尾ボタン）_sp にしてください」。 */
.detail-aside { display: none; }
@media (min-width: 1024px) {
  .detail-aside { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
}
.detail-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  border: 1px solid #E4E3F1;
  border-radius: var(--r-card);
  background: var(--c-white);
  padding: 24px 20px;
  text-align: center;
}
.detail-card__logo {
  display: grid;
  place-items: center;
  width: 102px;
  height: 102px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bg-alt);
}
.detail-card__logo-img { width: 100%; height: 100%; object-fit: cover; }
.detail-card__name {
  margin-top: 24px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: .1em;
  color: var(--c-navy);
}
.detail-card__cta { margin-top: 14px; width: 100%; }

/* 広告表示（2026-08-20）。アフィリエイト掲載のサロンにだけ出る。
   ★文字で出す。背景画像や ::before の content にしない。
     読み上げにも検索エンジンにも拾われる形でなければ、表示した意味が無い。
   ★絶対配置で浮かせない。SP（375px）でサロン名や予約ボタンに重なる。 */
.detail-card__pr {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  margin: 0 0 6px auto;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: #6B6B6B;
}
.detail-card__pr-label {
  padding: 1px 6px;
  border: 1px solid #B9B9C4;
  border-radius: 3px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .08em;
  color: #55555F;
}

/* ---- SPの追尾ボタン（カンプ: SP/デザイン/Browdia_サロン詳細（追尾ボタン）_sp.jpg） ----
   実測（750px を ÷2）:
     帯     画面下に固定。高さ100 ／ 白 ／ 上辺に1px #E4E3F1
     ロゴ   直径65の円（左から17.5・帯の上端から15）
     サロン名 Noto Sans JP Bold 13px / Tracking100 / #414167 ／ ボタンと同じ軸で中央
     ボタン x100.5..360（260 x 45）
   ★PCには出さない。PCは右の追尾カード（.detail-aside）が同じ役をする。 */
.detail-sticky {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  /* ★max-width:100vw が要る。ロゴ列がある2列グリッドでは、長い店名（nowrap）の
       min-content が帯の最小幅になり、読み込み時にSPのレイアウトビューポート自体を
       その幅（ファースト・アートメイクの院名で558px）まで広げてしまう。
       上限を切ると店名側の ellipsis が効いて帯は画面幅に収まる（2026-08-25 実測）。 */
  max-width: 100vw;
  display: grid; grid-template-columns: 65px minmax(0, 1fr);
  column-gap: 18px;
  /* ★start にすること。center だとロゴが3px下がる（カンプは帯上端から15px） */
  align-items: start;
  padding: 15px 15px 15px 17px;
  background: var(--c-white);
  border-top: 1px solid #E4E3F1;
}
.detail-sticky__logo,
.detail-sticky .is-empty {
  display: block; width: 65px; height: 65px;
  border-radius: 50%; object-fit: cover; background: var(--c-bg-alt);
}
/* ロゴが無いサロンでは1列にする（PHP側で修飾クラスを付ける。:has は使わない）。
   左の余白は17pxのまま。ロゴの有無で2px変える意味が無い。 */
.detail-sticky--nologo { grid-template-columns: minmax(0, 1fr); }
.detail-sticky__name {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; line-height: 19px;
  color: var(--c-navy); text-align: center;
  /* 長いサロン名でも帯の高さを変えない */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.detail-sticky__cta {
  margin-top: 4px; width: 100%; height: 45px; font-size: 15px;
  font-weight: 500; letter-spacing: .1em;
}
/* ★帯のぶん本文の下に逃げ場を作る。無いとフッターの最後が永久に隠れる */
body.is-salon-detail { padding-bottom: 100px; }
@media (min-width: 1024px) {
  .detail-sticky { display: none; }
  body.is-salon-detail { padding-bottom: 0; }
}

/* ---- MV下の識別行（ロゴ円 ＋ 名前・評価・住所） ---- */
/* SPカンプ実測（PSB・÷2）: ロゴ円60（x15..75）／文字は x90 から
     名前 17px Tracking100 ／ 4.8 は17px ／ 住所ラベルと本文は同じ行（13px Tracking75）
   PCは 102px の円＋48pxの溝（下のメディアクエリ） */
.detail-ident {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap: 15px;
  align-items: center;
  /* 2026-08-05「画像とテキストが近い」の指示で広げた（カンプは詰まっている） */
  margin-top: 24px;
  /* ★下も空ける。住所の行とタブ帯がくっついていた（2026-08-05 指摘）。
     カンプは 住所の字面下端911 -> タブ帯上端951 で 40px。 */
  margin-bottom: 24px;
}
/* ★ロゴが無いサロンは1列（2026-08-17 発注者の指摘）。ロゴの要素を出さない作りなので、
     2列のままだと本文が 60px／102px の1列目に入って店名・住所が1文字ずつ折れる。
     セレクタを2つ重ねているのは、下の PC のメディアクエリ（.detail-ident 単体）に勝つため。 */
.detail-ident.detail-ident--nologo { grid-template-columns: minmax(0, 1fr); }
.detail-ident__logo {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bg-alt);
}
.detail-ident__logo-img { width: 100%; height: 100%; object-fit: cover; }
.detail-ident__body { display: grid; gap: 6px; align-content: center; }
.detail-ident__local {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: .1em;
  color: var(--c-navy);
}
/* ★カタカナと現地表記の区切り。名前そのものより弱く見せる（2026-08-19） */
.detail-ident__sep {
  margin: 0 .15em;
  color: var(--c-navy);
  opacity: .45;
}
.detail-ident__rating { display: flex; align-items: center; gap: 10px; }
.detail-ident__score { font-size: 16px; font-weight: 700; letter-spacing: .05em; }
.detail-ident__reviews {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .05em;
}
.detail-ident__reviews-icon { display: block; }
.detail-ident__reviews-n { text-decoration: underline; text-underline-offset: 3px; }
/* ★ラベルと住所は同じ行。折り返しても住所だけが折り返るようにグリッドで組む
     （flex-wrap だとラベルごと次の行へ落ちて、SPで「住所」だけの行ができていた）。
     カンプ実測: ラベル原点 x96.75 ／ 本文 x136.7（SP・÷2）。 */
.detail-ident__address {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: .075em;
}
.detail-ident__label {
  flex: none;
  align-self: start;
  border: 1px solid #333333;
  padding: 2px 6px;
  font-size: 13px;
  letter-spacing: .075em;
}

@media (min-width: 1024px) {
  /* 帯下端330 → MV上端358（28px）／MV下端807 → 識別行の1行目ink810 */
  /* 帯下端330 → MV上端358 で 28px。実測で3px下に出たので25pxにする */
  /* 帯下端330 → MV上端358 で 28px（実測で27pxが合う）。
     住所ink下端911 → タブ帯上端951 で 40px。行箱はinkより9px高いので31pxにする */
  .detail-mv { padding-block: 27px 31px; }
  /* カンプ実測: 855 + 45 + 300 = 1200。MVは 1fr で 855 になる */
  /* ★grid-template-rows を必ず書く。既定（全部 auto）だと、右カラムの
     .detail-aside（grid-row: 1/-1 で全行にまたがる）の高さが1行目に配分され、
     MVの行が右カラムの高さまで伸びる。
     2026-08-06、誘導バナーを足して右カラムが994pxになった結果、
     MV下端→識別行が 24px から 569px に開いた（発注者の指摘）。
     最後の行を 1fr にすると、はみ出しぶんは本文の行が受け持つので
     MVの行は自分の高さ（449px）のままになる。実測で 24px に戻ることを確認済み。 */
  .detail-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 45px; row-gap: 0;
    align-items: start;
  }
  .detail-layout__main { display: contents; }
  .detail-mv__media,
  .detail-ident,
  .detail-nav,
  .detail-body { grid-column: 1; }
  /* ★grid-row: 1 / -1 で全行にまたがらせる。これでカードの「入れ物」が
     ページの高さになり、sticky が本文の最後まで粘る。
     align-self: start を付けないと列いっぱいに伸びて sticky が効かない。 */
  /* ★カードとバナーをまとめて追尾させる（2026-08-06 発注者の指示）。
     ★追尾できるのは「ビューポートに入る高さ」まで。sticky は top で上端を
       止めるので、入り切らないぶんは常に画面の下に隠れたままになる。
       バナーが300x300のときは 20＋341＋20＋300＋20＋300＝1001px で、
       内寸800pxの画面では下端が201px画面外に居座り、2枚目がずっと見えなかった
       （発注者の指摘「スクロール途中に下が詰まって、埋まって見える」）。
       このとき margin-bottom を広げても画面外の話なので効かない。
     ★そこでバナーを 300x200 にした（発注者の判断）。
       20＋341＋20＋200＋20＋200＝801px。内寸801px以上の画面で全部見える。
       バナーの寸法を変えるときはこの合計を必ず計算し直すこと。 */
  .detail-aside {
    grid-column: 2; grid-row: 1 / -1;
    position: sticky; top: 20px; align-self: start;
  }
  .detail-mv__inner { grid-template-columns: minmax(0, 1fr) 300px; gap: 45px; align-items: start; }
  /* カード上端371 は MV上端358 の13px下 */
  .detail-card { margin-top: 13px; min-height: 340px; padding: 48px 20px 30px; }
  .detail-card__name { margin-top: 24px; }
  /* 予約ボタン x1120..1380（260 x 69） */
  .detail-card__cta { margin-top: 14px; width: 260px; height: 69px; font-size: 18px; }
  /* ★カンプは MV下端807 -> 名前の字面810 で4px だが、2026-08-05 の指示
     「画像とテキストが近いので余白を入れて」で 24px に広げた（意図的にカンプと違う）。 */
  .detail-ident {
    grid-template-columns: 102px minmax(0, 1fr);
    column-gap: 48px;
    margin-top: 24px; margin-bottom: 36px;
  }
  .detail-ident__logo { width: 102px; height: 102px; }
  .detail-ident__body { gap: 8px; }
  .detail-ident__local { font-size: 24px; }
  .detail-ident__rating { gap: 14px; }
  .detail-ident__address { font-size: 16px; }
  .detail-ident__label { font-size: 16px; }
}

/* ---------------------------------------------------------------- 4アンカーナビ */
.detail-nav { background: var(--c-white); }
/* ★2段組の左カラムの中に入ったので、コンテナ幅を自分で持たない（2026-08-05）。
   親が既に 855px の列。以前は全幅の白帯＋中央寄せのリストだった。
   ★SPカンプ実測（PSB・÷2）: 4つが1行。タブ90幅・溝3・左右の外3px（＝ほぼ全幅）。
     高さ54＝地色50＋下に4pxのピンク。今いるタブは全面ピンク。
     文字14px Tracking100。「地図 アクセス」は2行。
     実装は 2x2 の並びだった。 */
/* ★下のピンクの線は「タブ1枚ずつ」ではなく、帯の下を端から端まで通る1本
     （2026-08-05 指摘「アンダーラインみたいのは繋げてください」）。
     カンプ走査で確かめた: SP y1160 は x0..749 が全部 #C16CA5（＝画面の全幅）、
     PC y1011..1013 は x200..1049 が全部 #C36BA5（＝コンテナ幅850）。
     タブの隙間（SP y1075 の x186..191 など）は下まで抜けていない。
     だから線は .detail-nav 側の border-bottom で引く。今いるタブは同じ色なので
     そのまま線と繋がって見える。
   ★SPは全幅なので、コンテナの左右余白（--gutter 15px）を打ち消す。 */
.detail-nav { margin-inline: calc(var(--gutter) * -1); border-bottom: 4px solid var(--c-accent); }
.detail-nav__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  list-style: none;
  margin: 0;
  padding-inline: 3px;
  width: 100%;
}
.detail-nav__link {
  display: grid;
  place-items: center;
  /* カンプ実測: SP タブの地色は50px、その下に4pxの線（＝帯全体で54px） */
  min-height: 50px;
  /* ★左右の余白は0。90pxのタブに「地図・アクセス」を1行で入れるため。
     実測（localhost・配信中のNoto Sans JP・palt有り）で 14px/字送り0 の
     この7文字は 85.8px。2pxずつでも余白を取ると 86px しか残らず折り返して
     「地図・アクセ／ス」になる（検証環境の撮影で確認）。 */
  padding: 6px 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: #f7f1f5;
  color: var(--c-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  /* ★SPは字送りを詰める。カンプSPは Tracking 100（.1em）だが、あれは
     「施術一覧」「地図 アクセス（2行）」用の値。PCの文言に寄せた結果
     「地図・アクセス」7文字を90pxのタブに1行で入れることになり、
     .1em のままだと収まらない。palt を併用して 82px 前後に収める。 */
  font-feature-settings: "palt" 1;
  letter-spacing: 0;
  /* ★万一（別の端末で代替フォントが当たるなど）折り返すときの折り目を決める。
     既定だとカタカナの途中で折れて「地図・アクセ／ス」になる。
     keep-all ならカタカナが1語として扱われ「地図・／アクセス」で折れる。 */
  word-break: keep-all;
  text-decoration: none;
  text-align: center;
}
.detail-nav__link:hover,
.detail-nav__link:focus-visible { background: #efe3ec; }

/* 今いるタブに色を付ける。カンプは詳細＝基本情報、口コミページ＝口コミが塗られている。
   ★スクロール位置では塗り替えない（JSなしの環境と食い違う）。
     塗るのは「いま表示している内容」＝ サーバーが決めた $view だけ。 */
.detail-nav__item.is-current .detail-nav__link { background: #c16ca5; color: var(--c-white); }
.detail-nav__item.is-current .detail-nav__link:hover { background: #b45f97; }

@media (min-width: 1024px) {
  /* ★PCの線は「タブ4枚ぶん」＝850pxで止まる。SPのように全幅ではない
     （カンプ走査: y1013 は x200..1049 だけがピンクで、その外は白）。
     左カラムは855pxあるので、.detail-nav に引くと5px長い。
     max-content にしたリスト側（208x4＋溝6x3 ＝ 850）に引く。 */
  .detail-nav { margin-inline: 0; border-bottom: 0; }
  .detail-nav__list {
    /* PSD実測: 208px x 4 ＋ 溝6px x 3 = 850px。左寄せ */
    grid-template-columns: repeat(4, 208px);
    gap: 6px;
    justify-content: start;
    padding-inline: 0;
    width: max-content;
    border-bottom: 3px solid var(--c-accent);
  }
  /* カンプ実測: タブ帯 y951..1013 ＝ 63px。うち地色が60pxで、下の3pxが線 */
  .detail-nav__link { min-height: 60px; font-size: 18px; letter-spacing: .1em; }
}

/* ---------------------------------------------------------------- 本文 */
/* カンプ実測: サロン詳細はページ全体が白（x=8 の縦走査で y3200..7697 が #ffffff）。
   サイト共通の地色 --c-bg（#F5F4F7）がコンテナの外に出ていたのを止める。
   2026-08-05 発注者の指示「背景がグレーなので白に」。
   ★body ごと白にする（.detail-body だけ白くしても、1200pxのコンテナの
     左右にグレーが残る）。他ページの地色は触らない。 */
body.is-salon-detail { background: var(--c-white); }
.detail-body { padding-block: 28px 48px; background: var(--c-white); }
@media (min-width: 1024px) {
  /* PSD実測: 本文は 850px の1カラムで左寄せ（サイドバー無し） */
  .detail-body > .detail-sec { max-width: 850px; }
  /* タブ帯下端1013 → キャッチink上端1053 で 40px */
  .detail-body { padding-block: 33px 60px; }
  .detail-catch { font-size: 22px; line-height: 32px; margin-bottom: 24px; }
  .detail-desc { font-size: 16px; line-height: 26px; }
}

/* ★scroll-margin-top を必ず入れる。入れないとアンカーで飛んだとき
   見出しがビューポート最上端に貼り付いて、直前の文脈が見えない。 */
.detail-sec { margin-bottom: 40px; scroll-margin-top: 20px; }
.detail-sec:focus { outline: none; }
/* カンプ実測: セクションの間は40px。
   Campaign最終カード下端2586 -> Shorts帯2627 ／ Menuカード下端3951 -> Message 3992 ／
   Message下端4301 -> Stylist帯4342 ／ Photos下端5371 -> Report帯5412。いずれも40px。 */
@media (min-width: 1024px) { .detail-sec { margin-bottom: 40px; } }

/* ★セクション見出しの帯（.c-detail-title）は components.css へ1本化した
     （2026-08-07・フェーズ6）。salon / school / job / article の4本に
     同じ値が書いてあり、カンプが同じものなので片方だけ動くと必ずズレる。
     実測コメントも向こうに移してある。
   ★Campaign の金の帯（.c-detail-title--camp）も向こう。
     --camp-a / --camp-b はこのファイルの :root にあるので、
     サロンのページでだけ金になる（他のページでは既定値にフォールバック）。
   ★Campaign・Shorts・Menu・Stylist・Photos・Report・SalonData・Review の
     8か所すべてが同じ寸法（帯y: 1578/2627/3255/4342/4859/5412/5863/6699、いずれも60px）。 */
.c-detail-sub {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-accent);
  margin: 24px 0 10px;
}

/* カンプ実測: キャッチはこのセクションの見出しそのもの。
   Noto Sans JP Medium 22px / Tracking 100 / 行送り32 / #414167。
   タブ帯下端1013 → ink上端1053 で 40px、ink下端1107 → 本文ink上端1141 で 34px。 */
.detail-catch {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .1em;
  color: var(--c-navy);
  margin-bottom: 20px;
}
/* カンプ実測: 本文 16px / Tracking 50 / 行送り26 */
.detail-desc { font-size: 14px; line-height: 2; letter-spacing: .05em; }

/* 症例（左）と本文（右）の2段組。カンプは 410 + 42 + 394。
   SPは1カラムで、カンプの順（写真 -> 本文）のまま縦に積む。 */
/* ★.detail-layout と同じ理由で SP でも grid-template-columns を書く。
   既定だと .detail-basic__media（gridアイテム・min-width:auto）の min-content で
   列が330pxに固定され、320pxの画面で症例写真・本文・予約ボタンがまとめてはみ出す。 */
.detail-basic { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  /* 症例410 ＋ 溝42 ＋ 本文394 ＝ 846。
     ★このメディアクエリはベース定義より後ろに置くこと。
       前に置くと後から来る gap:20px に column-gap が潰される（実測で発覚）。 */
  .detail-basic { grid-template-columns: 410px minmax(0, 1fr); column-gap: 42px; align-items: start; }
  .detail-case__btn { width: 101px; }
  /* カンプ実測: 予約ボタンは右カラムの下端（メイン写真の下端あたり）に置く */
  .detail-basic__text { display: flex; flex-direction: column; height: 100%; }
  .detail-basic__cta { margin-top: auto; }
  .detail-basic { align-items: stretch; }
  /* カンプ実測: 右カラム下の予約ボタンは幅いっぱいで x650..1049 y1468..1537 ＝ 400x70。
     ★min-width を打ち消すこと（.btn--pill 側の値が残ると幅が効かない） */
  .detail-basic__cta { margin: 28px 0 0; min-width: 0; width: 100%; height: 70px; font-size: 18px; }
  .detail-basic__cta .btn__icon--calendar { width: 24px; height: 24px; }
  .detail-card__cta .btn__icon--calendar { width: 22px; height: 22px; }
}
/* ------------------------------------------------------------- Recommend
   ★2段組コンテナの外に置いた全幅セクション（app/pages/salon.php 参照）。
     カンプは薄紫の帯が端から端まで敷かれ、その中でコンテナ幅（1200px）に
     カードが3枚。詳細本文（850px）の続きではない。
   実測（PC/デザイン/Browdia_サロン詳細.jpg）:
     帯 #F5F0F7 y7698..8612 ／ x=8 の縦走査で確定（--c-bg-alt と一致）
     帯上端 -> 見出しインク上 82 ／ 見出しインク下 -> カード上 41
     カード x200..575 / 612..988 / 1025..1400 ＝ 376幅・溝36（合計1200）
     写真 376x283（＝4:3）／ カード下端 8423
     カード下端 -> もっと見る上端 42 ／ もっと見る 450x68 ／ 下端 -> 帯下端 79
   実測（SP/デザイン/Browdia_サロン詳細_sp.jpg ÷2）:
     帯 y7187.5..8021.5 ／ 帯上端 -> 見出しインク上 41.5
     カード x15..180 / 195..360 ＝ 165幅・溝15 の2列 ／ 写真 165x124（4:3）
     もっと見る 315x44（x30.5..344.5）／ 下端 -> 帯下端 40.5 */
/* ★layout.css の `main { padding-bottom }`（フッター前の余白）をここだけ打ち消す。
     この節はページの最後に来て、しかも自分で地色を塗る。カンプでは塗りがフッターに
     接していて、余白は塗りの中にある（下の padding-block の 79 がそれ）。
     打ち消さないと、塗りとフッターの間に地色の帯が挟まる。
   ★この節を最後以外の場所に置くときは、この打ち消しを外すこと（下の中身に重なる）。 */
.detail-recommend { margin-bottom: -40px; }
@media (min-width: 1024px) { .detail-recommend { margin-bottom: -80px; } }
.detail-recommend {
  background: var(--c-bg-alt);
  /* 上下の値は「帯の縁から見出し・ボタンのインクまで」の実測から、
     行箱の余り（half-leading）を引いた実効値。数字は描画を測って詰めてある。 */
  padding-block: 40px 40.5px;
}
/* ★見出しの中の「英字 -> 日本語」だけカンプが5px詰まっている。
   共通の .c-sec-title（サロン一覧・トップで検証済み）は触らず、ここだけ寄せる。
   配信中の Josefin は版が違って行箱の中の位置がずれるので、
   撮って measure した差をそのまま戻している（インク高40pxは一致している）。 */
.detail-recommend .c-sec-title { margin-bottom: 16px; }
.detail-recommend .c-sec-title__ja { margin-top: -5px; }
.detail-recommend__more { display: flex; justify-content: center; margin-top: 21.5px; }
/* カンプ実測: SP 315x44 ／ PC 450x68。共通の .btn--outline は SP 315x55 なので高さだけ直す */
.detail-recommend__more .btn--outline { height: 44px; background: var(--c-white); }
/* ★カードの写真は 4:3（PC 376x283 / SP 165x124）。共通の .hl-card__img は 3:2 で、
   これはサロン一覧・トップのカンプの値。ここだけ上書きする。 */
.detail-recommend .hl-card__img,
.detail-recommend .hl-card__media .is-empty { aspect-ratio: 4 / 3; }
/* カンプ実測: カード内の左右余白 SP 11.5 / PC 22（共通は16） */
.detail-recommend .hl-card__name,
.detail-recommend .hl-card__station,
.detail-recommend .hl-card__desc,
.detail-recommend .hl-card__cta { padding-inline: 12px; }
/* カンプ実測: 説明文は3行（SP 12px/17 ・ PC 14px/22）。共通のカードは2行 */
.detail-recommend .hl-card__desc { -webkit-line-clamp: 3; line-height: 1.42; margin-bottom: 7px; }
/* ★SPの縦の余白は「カンプのインク間距離」ではなく、そこから行箱の余り
     （half-leading）を引いた実効値を入れること。カンプの値をそのまま
     box margin に入れていたため、カード1枚が 328.7px と 24.2px 膨らんでいた
     （カンプ 304.5px。2026-08-05、カンプと実装スクショを同じ走査にかけて確認）。
   カンプのインク間（カード上端からの相対・÷2）:
     写真下端124 -> 名前1行目ink上 142.0（18.0）
     名前2行目ink下 174.5 -> 駅ink上 186.5（12.0）
     駅ink下 198.0 -> 説明1行目ink上 211.0（13.0）
     説明3行目ink下 254.5 -> ピル上 264.5（10.0）／ピル25／カード下端 304.5
   実装の行箱はinkより 上に4.3〜5.1 / 下に2.3〜7.2 はみ出すので、その分を引いた値。 */
.detail-recommend .hl-card__name { margin: 13.5px 0 4px; }
.detail-recommend .hl-card__station { margin-bottom: 1.5px; }
.detail-recommend .hl-card__cta { padding-bottom: 14.5px; display: flex; justify-content: center; }
@media (min-width: 1024px) {
  /* 77 は「帯上端 -> 見出しインク上 82」から行箱の余りを引いた実効値
     （撮って measure: 72 だとインクが5px上に出た）。 */
  /* ★2026-08-18 発注者「こちらもおすすめの余白もあきすぎています」。
       ここから下の縦の余白はカンプ実測（77/79・31/19・21・22・30）だったが、
       カンプはサロン名が2行の絵で、1行のサロンが並ぶと空きが目立つ。
       **意図してカンプから詰めた**箇所。元の値はこのコメントに残す。 */
  .detail-recommend { padding-block: 48px 56px; }
  .detail-recommend .c-sec-title { margin-bottom: 20px; }
  .detail-recommend .hl-grid { gap: 36px; }
  /* ★4枚目はPCでは出さない。カンプはPCが3枚1行・SPが2列×2行の4枚で、
     枚数そのものが違う。PHP側は4件返し、ここで隠して3枚にする
     （SPで2行目に穴をあけないため。2026-08-05）。 */
  .detail-recommend .hl-grid > :nth-child(4) { display: none; }
  .detail-recommend .hl-card__name,
  .detail-recommend .hl-card__station,
  .detail-recommend .hl-card__desc,
  .detail-recommend .hl-card__cta { padding-inline: 22px; }
  .detail-recommend .hl-card__name { margin: 18px 0 6px; }
  .detail-recommend .hl-card__station { margin-bottom: 10px; }
  .detail-recommend .hl-card__desc { font-size: 14px; line-height: 1.57; margin-bottom: 16px; }
  .detail-recommend .hl-card__cta { padding-bottom: 20px; }
  .detail-recommend__more { margin-top: 42px; }
  .detail-recommend__more .btn--outline { min-width: 450px; height: 68px; }
}
/* ---------------------------------------------------------------- 誘導バナー
   求人・スクールへの誘導（2026-08-06 発注者の承認。カンプには無い）。
   決定: docs/decisions/2026-08-06-salon-detail-ad-banner.md
   寸法は発注者の指定で 300x300（PC/SP共通）。
   ★同じ部品をDOMの2か所に出し、ここで片方だけ表示する。
     PCは右カラム（予約カードの下）、SPは口コミとRecommendの間で、
     置き場所がDOM上まったく別のためCSSでは動かせない。
     .detail-aside（PC）と .detail-sticky（SP）が分かれているのと同じ。
   ★max-width:100% を必ず付ける。320pxの画面では入れ物が290pxしかなく、
     300px固定のままだと横にはみ出す（2026-08-05に同じ形で2件出している）。 */
.detail-ads--aside { display: none; }
.detail-ads--band {
  display: grid;
  justify-items: center;
  gap: 15px;
  padding: 0 var(--gutter) 30px;
}
.detail-ads__item { display: block; max-width: 100%; }
/* ★300x200（3:2）。2026-08-06、当初の 300x300 では追尾する塗りが
   ビューポートに入らなかったため発注者の判断で縮めた（上のコメント参照）。
   PC・SPとも同じ比率にする。画面ごとに比率を変えると、同じ画像が
   片方だけ切り取られて意図しない見え方になる。 */
.detail-ads__img,
.detail-ads .is-empty {
  display: block;
  width: 300px;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--c-bg-alt);
}
@media (min-width: 1024px) {
  .detail-ads--band { display: none; }
  /* 予約カード（300x340）の下。カード側の下端から20pxあけて縦に積む。
     ★下の余白は margin で持つ（2026-08-06 発注者の指示）。
       グリッドの行に持たせるとMVの行まで一緒に伸びる。
     ★バナーは追尾しない（カードだけが sticky）。下の余白は
       「バナーの下端とMVの行の終わりの間」を決めるだけの値。
       以前は追尾の停止位置を決める値だと考えて 40 -> 60 -> 120 と広げたが、
       詰まって見えていた原因は別（追尾ブロックがビューポートに入らないこと）
       だったので、素直な 40px に戻す。 */
  .detail-ads--aside { display: grid; gap: 20px; margin-top: 20px; margin-bottom: 40px; }
}

.detail-empty { font-size: 14px; color: #8a85a8; }
.detail-sec__cta { margin-top: 20px; }

/* 症例はメイン1枚 ＋ その下のサムネ列（カンプ実測: メイン x200..609 y1136..1453
   ＝410x317／サムネは101px角の横並び）。格子ではない。 */
.detail-basic__media { position: relative; }
/* カンプ実測: 白い山形。左 x210..218（写真左端200から10px）／右 x590..599（右端609から10px）、
   縦は写真の中央（y1286..1303 ＝ 高さ18）。丸い枠は無く線だけ。
   13pxの正方形の2辺を45°回すと 9.2 x 18.4 でカンプとほぼ同じ。 */
.detail-case__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  display: flex; align-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.detail-case__nav[hidden] { display: none; }
.detail-case__nav--prev { left: 10px; justify-content: flex-start; }
.detail-case__nav--next { right: 10px; justify-content: flex-end; }
.detail-case__nav::before {
  content: ""; display: block; width: 13px; height: 13px;
  border-top: 2px solid var(--c-white); border-right: 2px solid var(--c-white);
}
.detail-case__nav--prev::before { rotate: -135deg; }
.detail-case__nav--next::before { rotate: 45deg; }

.detail-case__main,
.detail-basic__media > .is-empty {
  display: block; width: 100%; aspect-ratio: 410 / 317;
  object-fit: cover; background: var(--c-bg-alt);
}
.detail-case__thumbs {
  display: flex; gap: 6px; list-style: none; margin: 6px 0 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
  /* ★contain:layout が要る。サムネが5枚を超えると（ファースト銀座の院内7枚で発覚）、
       スクロール中身の幅がページの水平スクロール領域に漏れて、SPで右に168pxの
       空白スクロールが生まれる（レイアウト上は何もはみ出していないのに）。
       containで封じると390pxに収まる（2026-08-25 実測。スクロール操作は影響なし）。 */
  contain: layout;
}
.detail-case__thumbs::-webkit-scrollbar { display: none; }
.detail-case__thumb { flex: 0 0 auto; }
.detail-case__btn {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  width: 78px; opacity: .72; transition: opacity .2s;
}
.detail-case__btn.is-current,
.detail-case__btn:hover { opacity: 1; }
.detail-case__thumb-img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--c-bg-alt);
}
/* SPカンプ実測: 予約ボタンは x60..689 y2349..2448 ＝ CSS 315x50 で、
   セクション（CSS 15..360）の左右から15pxずつ内側。幅いっぱいではない。
   文字は Noto Sans JP Medium 30 ＝ CSS 15px / Tracking 100。 */
.detail-basic__cta {
  /* ★margin:auto では中央に来ない。.btn は inline-flex なので inline レベル。
     親（x15..360）からの内側15pxを margin-inline で直接入れる */
  margin: 20px 15px 0;
  width: calc(100% - 30px); height: 50px;
  font-size: 15px; font-weight: 500; letter-spacing: .1em;
}
/* ★この上書きはベース定義より後ろに置くこと。上の @media (min-width:1024px) の中に
   書いても、後から来るベース定義に潰される（2026-08-05 に2回踏んだ） */
@media (min-width: 1024px) {
  .detail-basic__cta { margin: 28px 0 0; width: 100%; height: 70px; font-size: 18px; letter-spacing: .1em; }
}

/* ---------------------------------------------------------------- Campaign
   カンプ実測（PC/デザイン/Browdia_サロン詳細.jpg、走査線＋PSD）:
     カード x200..1049 y1668..1960（293）／地色 #F8F5EE ／角丸5px ／カード間20px
       内側 22/20/20/20
       タイトル 18px Medium / Tracking50 / 行送り30 / #414167（2行）
       価格     16px Bold / #C66182 / 右端はカード右から20px
                ★タイトルの行に揃えるのではなく、タイトル全体の上下中央
                  （カンプ: タイトル1690..1750の中心1720、価格の字面中心1722）
       タグ札   タイトルの10px下（.c-chip）
       本体     画像140x140（左・x220..359）＋ 18px ＋ 右カラム（x378..1029）
       条件     ラベル14px Medium #C16CA4 ／ 値14px #333333 ／ 行送り23
                ラベル列は x381、値は x476（差95 ＝ ラベル字幅＋18）
   ★以前は白地に薄い枠のカードで、画像もタグも出していなかった。
   ★カンプにある説明文（画像の右上「一本一本の毛流れを…」）は
     salon_campaigns に説明の列が無いので出していない。 */
.detail-camps { display: grid; gap: 15px; }
/* ★置き場所はグリッドの領域名で切り替える。
     PC: [タイトル 価格] / [タグ] / [本体]
     SP: [タイトル] / [タグ 価格] / [本体]（SPカンプは価格が下の行の右端） */
.detail-camp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas:
    "title title"
    "tags  price"
    "body  body";
  align-items: start;
  column-gap: 12px;
  background: #F8F5EE;
  border: 0;
  border-radius: 5px;
  padding: 15px;
}
.detail-camp__title {
  grid-area: title;
  font-size: 15px; font-weight: 500; line-height: 26px;
  letter-spacing: .05em; color: var(--c-navy);
}
.detail-camp__price {
  grid-area: price; justify-self: end; align-self: center; margin-top: 10px;
  color: var(--c-rose); font-size: 14px; font-weight: 700;
  letter-spacing: .05em; white-space: nowrap; margin-right: -.05em;
}
.detail-camp__tags { grid-area: tags; margin-top: 10px; }
/* ★SPだけ条件を下の行に全幅で置く（2026-08-06 発注者の指示。カンプは右カラム）。
     PCはカンプ通り「画像の右に 説明文 -> 条件」。画像は2行にまたがる。
     ★align-items: start が要る。既定の stretch だと、PCで画像が
       説明文＋条件の高さまで伸びる（aspect-ratio が効かなくなる）。 */
.detail-camp__body {
  grid-area: body; margin-top: 12px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-areas:
    "img  text"
    "cond cond";
  align-items: start;
  column-gap: 23px; row-gap: 10px;
}
/* 画像が無いキャンペーンでは、120pxの列に説明文が入ってしまう */
.detail-camp__body.is-noimg {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "cond";
}
.detail-camp__img {
  grid-area: img;
  display: block; width: 100%; aspect-ratio: 1;
  object-fit: cover; background: var(--c-bg-alt);
}
/* カンプ実測: 説明文16px / 行送り26 / Tracking100。その13px下に条件の3行 */
.detail-camp__desc {
  grid-area: text;
  font-size: 13px; line-height: 22px; letter-spacing: .1em; color: var(--c-text);
}
.detail-camp__cond {
  grid-area: cond;
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  /* ★align-content を start にすること。既定の stretch だと、隣の140px画像に
     引き伸ばされて3行が140pxいっぱいに散る（行送り23pxのはずが46pxになった） */
  align-content: start;
  column-gap: 18px; margin: 0;
  font-size: 13px; line-height: 22px; letter-spacing: .1em;
}
.detail-camp__cond dt { color: var(--c-accent); font-weight: 500; }
.detail-camp__cond dd { color: var(--c-text); margin: 0; }
@media (min-width: 1024px) {
  .detail-camps { gap: 20px; }
  .detail-camp {
    grid-template-areas:
      "title price"
      "tags  tags"
      "body  body";
    padding: 22px 20px 20px;
  }
  .detail-camp__title { font-size: 18px; line-height: 30px; }
  .detail-camp__price { font-size: 16px; margin-top: 0; }
  /* PCはカンプ通り。画像が2行にまたがり、右カラムに 説明文 -> 条件 が縦に並ぶ */
  .detail-camp__body {
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-areas:
      "img text"
      "img cond";
    column-gap: 18px; row-gap: 13px; margin-top: 15px;
  }
  .detail-camp__body.is-noimg {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "cond";
  }
  .detail-camp__desc { font-size: 16px; line-height: 26px; }
  .detail-camp__cond { font-size: 14px; line-height: 23px; }
}

/* ---------------------------------------------------------------- Shorts
   カンプ実測: 溝5pxで横に並ぶ。角丸なし。
     PC 3枚（x200..479 / 485..764 / 770..1049 ＝ 280幅）× 高さ498（9:16）
     SP 2枚（x30..369 / 380..719 を÷2 ＝ 170幅）
     矢印は症例と同じ白い山形で、端から16px・縦は中央（カンプ x216..224 y2957..2974）
   ★4枚以上あるサロンのために横スクロールは残す。3枚（SPは2枚）でちょうど
     コンテナに収まるので、カンプどおりのときはスクロールバーも矢印も出ない。 */
.detail-shorts-wrap { position: relative; }
/* ★3枚に満たないときは中央に寄せる（2026-08-05 発注者の指示）。
   safe を付けること。ただの center だと、はみ出したときに左端が
   スクロール範囲の外へ出て、戻れなくなる（4枚以上のサロンで起きる）。 */
/* ★scroll-behavior: smooth を置かない（2026-08-18）。
     この枠に置くと、矢印の scrollBy が**1pxも動かなくなる**（発注者の画面で確認）。
     scrollBy の behavior:'auto' は「CSSの scroll-behavior に従う」意味なので、
     ここが smooth だと送りもすべて smooth 扱いになり、
     枠の中の Instagram 埋め込み iframe の読み込み・寸法変化で
     アニメーションが始まらないまま終わる。behavior:'instant' なら動く（実測）。
     送りのなめらかさは JS 側（assets/js/salon.js）が自前に付ける。 */
.detail-shorts {
  display: flex; gap: 5px; justify-content: safe center;
  overflow-x: auto; scrollbar-width: none;
}
.detail-shorts::-webkit-scrollbar { display: none; }
.short { flex: 0 0 170px; }
@media (min-width: 1024px) { .short { flex: 0 0 280px; } }
.short__facade { position: relative; display: block; }
/* ★Instagramの埋め込みを「絵」として敷く版（2026-08-17 発注者の依頼。app/templates/parts/short-facade.php）。
     ・枠は 9:16 のまま（サムネイル版と高さを揃える）。iframe は枠より背が高く、はみ出しは枠で切る。
       iframe の中身（ヘッダー54＋4:5のカバー＋いいね欄）は 9:16 より背が高く、
       同じ高さにすると iframe の中にスクロールバーが出るため（実測 2026-08-17）。
     ・iframe は pointer-events: none。押下は上に重ねた .short__link が受ける。
     ・狭い枠では Instagram 側のヘッダーが詰まって崩れる（170px で「プロフィールを表示」が名前に重なる。実測）。
       --embed-w の幅で描いて --embed-s で縮める（scale = 枠幅 / --embed-w）。
     ・下端は白へぼかす。いいね欄の途中で切れるのを「切れた」ではなく「続きがある」に見せる。 */
.short__facade--embed { overflow: hidden; aspect-ratio: 9 / 16; background: var(--c-bg-alt); --embed-w: 250px; --embed-s: calc(170 / 250); }
.short__embed {
  /* ★絶対配置で流れから外す。流れに置くと iframe の幅（--embed-w＝250）が flex アイテム（.short）の
       min-content になり、SPで札が 250px に広がって 9:16 が崩れた（実測 2026-08-17）。 */
  position: absolute; top: 0; left: 0;
  display: block; width: var(--embed-w); height: 720px; border: 0;
  transform: scale(var(--embed-s)); transform-origin: 0 0;
  pointer-events: none;
}
.short__facade--embed::after {
  content: ""; position: absolute; inset: auto 0 0; height: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .95) 100%);
  pointer-events: none;
}
.short__link { position: absolute; inset: 0; z-index: 1; }
@media (min-width: 1024px) { .short__facade--embed { --embed-w: 280px; --embed-s: 1; } }
.short__img,
.short__facade .is-empty {
  display: block; width: 100%; aspect-ratio: 9 / 16;
  object-fit: cover; background: var(--c-bg-alt);
}
/* ★丸い背景の付いたボタンにする（2026-08-18 発注者の指示）。
     それまでは白い山形だけで、写真の明るいところに重なると見えず、
     押せることが伝わらなかった。
   ★色と大きさはサロン一覧のスライダー（.list-hero__arrow）に合わせる。
     同じサイトの中で送りの矢印が2通りあると迷う。
   ★カンプ（PC/デザイン/Browdia_サロン詳細.jpg）は白い山形だけ。
     意図してカンプから変えた箇所。 */
.detail-shorts__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: #C282B6;
  cursor: pointer;
  /* ★z-index は .short__link（各ショートを覆う透明なリンク。z-index:1）より上にする。
       同じ 1 だと、DOMで後ろにあるトラック側のリンクが勝ち、
       矢印は**見えているのに押せない**（2026-08-18 発注者「クリックしても
       触っても反応しません」。elementFromPoint が A.short__link を返していた）。 */
  z-index: 2;
}
.detail-shorts__nav[hidden] { display: none; }
.detail-shorts__nav[disabled] { opacity: .35; cursor: default; }
.detail-shorts__nav--prev { left: 16px; }
.detail-shorts__nav--next { right: 16px; }
.detail-shorts__nav::before {
  content: ""; display: block; width: 9px; height: 9px;
  border-top: 2px solid var(--c-white); border-right: 2px solid var(--c-white);
}
/* ★山形は「く」の字なので、見た目の重心が線の側に寄る。
     丸の中心に見えるよう2pxずらす（.list-hero__arrow と同じ手当て）。 */
.detail-shorts__nav--prev::before { rotate: -135deg; translate: 2px 0; }
.detail-shorts__nav--next::before { rotate: 45deg; translate: -2px 0; }
.short__play {
  position: absolute; inset: 0; margin: auto;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .9);
}
.short__play::before {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: 14px solid var(--c-primary);
  border-block: 9px solid transparent;
  translate: 2px 0;
}
/* ★.short__frame（差し替えていた iframe）は消した。Instagramへ移り、
   埋め込まず新しいタブで開くようになったので使う先が無い（2026-08-05）。 */
.short__channel { font-size: 13px; margin-top: 6px; }

/* ---------------------------------------------------------------- Menu
   カンプ実測（PC/デザイン/Browdia_サロン詳細.jpg、走査線）:
     グループは1枚のカード。x200..1049／枠1px #E4E3F1／角丸5px
       カード1 y3345..3635（2行）  カード2 y3656..3950（3行）  カード間 20px
     グループ見出しの帯  高さ40px／地色 #F2E7EB／文字 Noto Sans JP Bold 18px
                        Tracking100 #C16CA4／原点x=214.5（カード左から14.5）
                        ★帯は枠の上にかぶる（x=200 の縦走査が帯色 #f1e7f2）
     行  上下 15px。行の間に1px #E4E3F1
       タイトル  18px Medium / Tracking50 / 行送り26 / #414167
       価格      16px / Tracking50 / 右端はカード右から20px
       説明      14px Regular / Tracking100 / 行送り24 / #333333（タイトルの4px下）
       行高 85/84/84（カード2）＝ 15 + 26 + 4 + 24 + 15
   ★カンプ1つ目のグループは行にタグ（アイブロウ／アイライナー）が付いているが、
     salon_menus にタグの列が無いので出していない（campaigns にはある）。 */
/* ★枠はカードではなく中の <ul> に持たせる。カードに枠を回すと、カンプに無い
     1px の線がグループ帯の上に出る（カンプは帯が枠を覆っていて線が無い）。 */
.menu-card {
  border-radius: 5px;
  overflow: hidden;   /* 帯と枠の角を角丸で切る */
  background: var(--c-white);
}
/* SPカンプ実測（÷2）: カード間15／グループ帯30／行111（タグ付き2行説明）
   グループ名 Bold 28 ＝ CSS 14px / Tracking100 ／ 行の文字 14px・価格13px・説明12px（行送り17） */
.menu-card + .menu-card { margin-top: 15px; }
.menu-card__head {
  background: #F2E7EB;
  color: var(--c-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 30px;
  padding: 0 14px;
}
.menu-list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid #E4E3F1; border-top: 0;
}
/* グループ名が無いサロンでは帯が出ないので、上の枠を戻す */
.menu-card > .menu-list:first-child { border-top: 1px solid #E4E3F1; }
.menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: baseline;
  column-gap: 12px;
  padding: 13px 15px 13px 14px;
}
/* カンプ実測: 札はタイトルの上。札の箱 y3405..3430（行の上端3385から20px）、
   札の下端3430からタイトルの行ボックス上端3440まで9px */
.menu-row__tags { grid-column: 1 / -1; margin: 5px 0 9px; }
.menu-row + .menu-row { border-top: 1px solid #E4E3F1; }
.menu-row__title {
  font-size: 14px; font-weight: 500; letter-spacing: .05em;
  line-height: 22px; color: var(--c-navy);
}
.menu-row__price {
  font-size: 14px; font-weight: 500; letter-spacing: .05em;
  line-height: 24px; color: var(--c-navy); white-space: nowrap;
  /* letter-spacing は最後の1文字の後ろにも余白を足す。右寄せだと字面が
     その分だけ左に残るので打ち消す（components.css の --btn-ls と同じ理由） */
  margin-right: -.05em;
}
.menu-row__desc {
  grid-column: 1 / -1;
  font-size: 13px; letter-spacing: .1em; line-height: 18px;
  color: var(--c-text); margin-top: 3px;
}
@media (min-width: 1024px) {
  .menu-card + .menu-card { margin-top: 20px; }
  .menu-card__head { font-size: 18px; line-height: 40px; }
  /* 右だけ18px。カンプは タイトル左端221（枠から21）／価格右端1030（枠から19）で非対称 */
  .menu-row { padding: 15px 18px 15px 20px; column-gap: 16px; }
  .menu-row__title { font-size: 18px; line-height: 26px; }
  .menu-row__price { font-size: 16px; line-height: 26px; }
  .menu-row__desc { font-size: 14px; line-height: 24px; margin-top: 4px; }
}

/* ---------------------------------------------------------------- Message
   カンプ実測: 淡いピンクの帯（#F7F0F7）に写真250角＋あいさつ文。
     帯 x200..1049 y3992..4301（内側30px）／写真 x230..479 y4022..4271
     見出し Josefin SemiBold 24px（原点x517.5 ＝ 写真の右41px）
     本文 16px / Tracking50 / 行送り26
   SPは写真を上、文字を下に積む（幅345では横並びにすると写真が小さくなりすぎる）。 */
.detail-message {
  display: grid; gap: 16px;
  background: #F7F0F7; border-radius: 5px; padding: 20px;
}
/* ★SPは写真を中央に置く（2026-08-06 発注者の指示「画像を真ん中で」）。
     SPカンプ実測（SP/デザイン/Browdia_サロン詳細_sp.jpg、走査線）:
       帯   x30..719  y6633..7424
       写真 x250..499 y6693..6942 ＝ 250x250カンプpx -> CSS 125角
       写真の左右の余り 220カンプpx ずつ ＝ 中央
       見出し Message x304..446（中心375 ＝ 版面の中心）-> 中央寄せ
     以前は幅345の帯に250角を左寄せで置いていて、右に55px空いていた。
   ★PCはカンプ通り（帯 x200..1049 の中で写真250角が左・文字が右の2段組）。
     こちらは触らない。 */
.detail-message__img {
  display: block; width: 125px; aspect-ratio: 1;
  justify-self: center;
  object-fit: cover; background: var(--c-bg-alt);
}
.detail-message__title {
  font-family: var(--font-en); font-weight: 600; font-size: 20px;
  letter-spacing: .05em; line-height: 1.2; color: var(--c-primary);
  text-align: center;
  margin-bottom: 12px;
}
.detail-message__text {
  font-size: 14px; line-height: 24px; letter-spacing: .05em; color: var(--c-text);
}
@media (min-width: 1024px) {
  .detail-message {
    grid-template-columns: 250px minmax(0, 1fr);
    column-gap: 41px; padding: 30px;
  }
  .detail-message__img { width: 100%; justify-self: stretch; }
  .detail-message__title { font-size: 24px; text-align: left; margin-bottom: 14px; }
  .detail-message__text { font-size: 16px; line-height: 26px; }
}

/* ---------------------------------------------------------------- Stylist
   PCカンプ実測: 3列（270 + 溝20 + 270 + 溝20 + 270 ＝ 850）
     写真 270x270 の正方形（角丸3px）／肩書き14px Medium 中央 ／
     名前 18px Medium 中央 ／ 紹介文14px 行送り24 左寄せ（列の左から約12px内側）
     文字色はどれも #414167
   SPカンプ実測（÷2）: 1件ずつ横並び。写真135x135 が左、右に文字（左寄せ）。
     肩書き12px ／ 名前14px ／ 紹介文12px 行送り17 ／ 送り150px
   ★実装は丸い写真＋Josefin の名前だった。カンプはどちらも違う。 */
/* ★★この .stylist 一式は assets/css/article.css にも**写し**がある
     （掲載イメージのページで「クリニックでの見え方」を出すため。記事ページは
     salon.css を読まない）。**片方だけ直さないこと。**ここが正本。 */
.detail-stylists { display: grid; gap: 15px; }
.stylist { display: grid; grid-template-columns: 135px minmax(0, 1fr); column-gap: 15px; align-items: start; }
.stylist__img,
.stylist .is-empty {
  display: block; width: 100%; aspect-ratio: 1;
  object-fit: cover; border-radius: 3px; background: var(--c-bg-alt);
}
/* ★写真が無い施術者の枠（2026-08-20 発注者「ない場合はサンプルの人形でも」）。
     ★人物写真ふうにしないこと。実在の施術者の名前の横に人物画像を置くと、
       その人の写真だと読まれる。医療機関のページで別人の姿を示すことになる。
       線だけのシルエットにして「これは写真ではない」と一目で分かる形にする。
     ★灰色の四角のままだと「読み込みに失敗した」ようにも見える。 */
.stylist .is-empty {
  background: var(--c-bg-alt) url("/assets/img/stylist-placeholder.svg?v=2") no-repeat center / 100% auto;
  /* ★?v=2 はキャッシュの強制入れ替え（2026-08-21）。最初に置いたSVGは不正XMLで、
       画像は1年キャッシュ（immutable）のため、URLを変えないと直した後も
       一度見た人には壊れたままになる。SVGをまた直したら数字を上げること。 */
}
.stylist__role { font-size: 13px; font-weight: 500; line-height: 22px; letter-spacing: .05em; color: var(--c-navy); }
.stylist__name { font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: .05em; color: var(--c-navy); }
.stylist__desc { font-size: 13px; line-height: 18px; letter-spacing: .1em; color: var(--c-text); margin-top: 8px; }
@media (min-width: 1024px) {
  .detail-stylists { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .stylist { display: block; }
  .stylist__role { font-size: 14px; line-height: 26px; text-align: center; margin-top: 13px; }
  .stylist__name { font-size: 18px; line-height: 26px; text-align: center; }
  /* カンプは紹介文だけ左寄せで、列の左端より約12px内側から始まる */
  .stylist__desc { font-size: 14px; line-height: 24px; margin: 9px 12px 0; }
}

/* ---- Freelance（2026-08-28 発注者「サロン詳細ページにフリーランスの欄を設置して、
     フリーランス詳細ページに飛べるようにしたいです」）。
   ★カードは Stylist の .stylist をそのまま使う。ここは差分だけ。
     在籍スタッフと業務委託でカードの形を変えない（違いの理由が読み手に伝わらない）。 */
.detail-lead {
  font-size: 13px; line-height: 22px; letter-spacing: .06em;
  color: var(--c-text); margin-bottom: 15px;
}
/* 出勤日。名前のすぐ下に置く。ここを見て予約日を決める人がいる */
.stylist__days {
  font-size: 12px; line-height: 18px; letter-spacing: .06em;
  color: var(--c-text); margin-top: 4px;
}
/* 広告表示。.detail-card__pr-label と同じ見た目にそろえる */
.stylist__pr {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border: 1px solid #B9B9C4; border-radius: 3px;
  font-weight: 700; font-size: 10px; letter-spacing: .08em; color: #55555F;
}
/* ★見える文字のリンクにする。カードを透明なリンクで覆わない
     （どこが押せるのか見て分からなくなる） */
.stylist__more { margin-top: 8px; }
.stylist__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; line-height: 20px; letter-spacing: .06em;
  font-weight: 500; color: var(--c-accent); text-decoration: underline;
}
.stylist__link::after { content: "›"; font-size: 15px; line-height: 1; }
@media (min-width: 1024px) {
  .detail-lead { font-size: 14px; line-height: 24px; margin-bottom: 20px; }
  /* PCの .stylist は display:block で文字が中央寄せ。出勤日とリンクもそろえる */
  .stylist__days { font-size: 13px; line-height: 20px; text-align: center; margin-top: 5px; }
  .stylist__more { text-align: center; }
}
/* ---------------------------------------------------------------- Photos
   カンプ実測: 隙間なしの格子。
     PC 4列（850 / 4 ＝ 212.5）× 2行（y4949..5160 / 5160..5371 ＝ 211）でほぼ正方形
     SP 2列（345 / 2 ＝ 172.5）
   ★これまで .detail-gallery のCSSが1行も無く、画像が素のまま縦に並んでいた。 */
/* ★2026-08-17 発注者「全部くっついてみえるので、余白をあけてください」。
   カンプ実測は隙間なしだったが、実機で詰まって見えるため間隔を入れる。
   ★「もっと見る」で開くぶんとの継ぎ目も同じ値にそろえる（下の .detail-more[open]）。
     ここを変えたらあちらも変えること。 */
.detail-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 1024px) { .detail-gallery { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
/* Photos の「もっと見る」（2026-08-17 発注者の指示で10枚だけ見せる）。
   ★<details>/<summary> で作ってあるので、JSが無くても開ける。
   ★summary の既定の三角は消す。Safari は ::-webkit-details-marker が要る。 */
.detail-more { margin-top: 16px; }
.detail-more__btn {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; width: fit-content; min-width: 240px; height: 46px; padding: 0 24px;
  border: 1px solid var(--c-primary); border-radius: 23px;
  color: var(--c-primary); background: transparent;
  font-size: 14px; letter-spacing: .08em; cursor: pointer;
  list-style: none;   /* Firefox の三角 */
}
.detail-more__btn::-webkit-details-marker { display: none; }
.detail-more__btn:hover { background: var(--c-primary); color: var(--c-white); }
/* ★開いたらボタンごと消す（2026-08-17 発注者の指示）。
   summary を隠すと畳み直す手段が無くなるが、一度開いたら出しっぱなしでよい。 */
.detail-more[open] .detail-more__btn { display: none; }
/* ★開いたぶんの継ぎ目を、格子の隙間（.detail-gallery の gap）とそろえる。
     開くとボタンは消えるので、この margin がそのまま上の格子との間隔になる。
     ★.detail-gallery の gap を変えたらここも変えること。 */
.detail-more__body { margin-top: 0; }
.detail-more[open] { margin-top: 8px; }
@media (min-width: 1024px) {
  .detail-more__btn { min-width: 300px; height: 54px; font-size: 15px; }
  .detail-more[open] { margin-top: 10px; }
}

.detail-gallery__img,
.detail-gallery > .is-empty {
  display: block; width: 100%; aspect-ratio: 1;
  object-fit: cover; background: var(--c-bg-alt);
}

/* Report（フェーズ5 Task 9・2026-08-07 に中身を入れた）。
   それまでは記事ルートが無く「準備中」と出していた。
   カンプ実測（docs/decisions/2026-08-05-salon-detail-comp.md §6）:
     丸アイコン 120x120（x200..319）／ 名前と本文は x351 から（＝溝31）／
     ボタン 179x47（x352..530）／ 1件ごとに下に1px #E4E3F1 の罫 ／ 送り191 */
.detail-reports { display: grid; }
.report {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-block: 18px;
  border-bottom: 1px solid #E4E3F1;
}
.report:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  .report { grid-template-columns: 120px minmax(0, 1fr); gap: 31px; padding-block: 30px; }
}
.report__avatar { display: block; }
.report__avatar-img,
.report__avatar .is-empty {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%; background: var(--c-bg-alt);
}
.report__body { display: grid; gap: 8px; min-width: 0; }
/* ★font-size / font-weight を必ず書くこと。この要素は h3（W3C Nu 対応）で、
     書かないと UA既定の 1.17em（18.72px）に落ちる。中の字は子が持っているので
     見た目は変わらないように見えるが、行箱（strut）が伸びて行の高さが3.5px増える
     （2026-08-10 に実測: 28.0 -> 31.5）。 */
.report__who {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0;
  font-size: inherit; font-weight: inherit;
}
.report__name { font-size: 16px; font-weight: 700; color: var(--c-navy); letter-spacing: var(--ls-wide); }
.report__title { font-size: 14px; color: #8a85a8; }
@media (min-width: 1024px) {
  .report__name { font-size: 18px; }
  .report__title { font-size: 14px; }
}
.report__text { margin: 0; font-size: 14px; line-height: 1.8; }
.report__cta { margin: 4px 0 0; }
/* ★min-width: 0 を入れる。.btn--solid は min-width を持っているので、
   狭い画面ではそのまま外へ出る（求人カードで踏んだのと同じ） */
.report__btn {
  min-width: 0; width: 100%; max-width: 179px; height: 47px; font-size: 14px;
  /* カンプは文字の右に白い丸＋「›」。padding は丸のぶんだけ右を広げる */
  position: relative;
  padding-right: 42px;
}
/* 白い丸 */
.report__btn::before {
  content: '';
  position: absolute; right: 12px; top: 50%;
  width: 22px; height: 22px; margin-top: -11px;
  border-radius: 50%;
  background: var(--c-white);
}
/* 「›」。文字ではなく罫で描く（フォントに依存しない） */
.report__btn::after {
  content: '';
  position: absolute; right: 21px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-top: 2px solid var(--c-navy);
  border-right: 2px solid var(--c-navy);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------- SalonData
   カンプ実測（走査線と PSD のテキストレイヤー）:
     行は1px #E4E3F1 の罫で区切る。罫は各行の「上」に入り、最終行の下には無い
       罫 y5953 / 6029 / 6306 / 6382 / 6458 / 6535 / 6612（行送り76px）
     ラベル  Noto Sans JP Bold 16px / Tracking50 / #414167 / 原点x=204.2（左から4px）
     値      Noto Sans JP Regular 16px / Tracking50 / #333333 / 原点x=349.3（左から149px）
     76 ＝ 25 + 行送り26 + 25
   ★地図は「所在地」の行の中、住所の下。x350..1049 y6096..6275 ＝ 700x180。
     セクションの一番下に置いていたのが入れ違いだった。 */
/* SPカンプ実測（PSB #220/#221・走査線。÷2）:
     ラベル原点x33.2 ＝ 左から約2 ／ 値の原点x228.3 ＝ 左から114（列幅99）
     文字はどちらも 26 ＝ CSS 13px、値の行送りは 36 ＝ CSS 18px
     1行の行高42.5 ＝ 12 + 18 + 12 ／ 2行は60 */
.detail-data { display: grid; grid-template-columns: 99px minmax(0, 1fr); font-size: 14px; letter-spacing: .05em; }
.detail-data dt {
  padding: 12px 8px 12px 2px; color: var(--c-navy); font-weight: 700;
  line-height: 18px; border-top: 1px solid #E4E3F1;
}
.detail-data dd {
  padding: 12px 0; line-height: 18px; color: var(--c-text);
  border-top: 1px solid #E4E3F1;
}
/* 電話番号は tel: リンクだが、他の行と同じ見た目にする（表の中で1行だけ
   色が変わると誤って別の意味に見える）。押せることはSPで実際に押せば分かる */
.detail-data__tel { color: inherit; text-decoration: none; }
@media (hover: hover) { .detail-data__tel:hover { text-decoration: underline; } }
@media (min-width: 1024px) {
  .detail-data { grid-template-columns: 149px minmax(0, 1fr); font-size: 16px; }
  .detail-data dt { padding: 25px 12px 25px 4px; line-height: 26px; }
  .detail-data dd { padding: 25px 0; line-height: 26px; }
}

/* ★地図の facade（.detail-map / __facade / __frame / __link）は components.css に
   移した（2026-08-06。スクール詳細のアクセス情報でも使う）。
   サロン詳細ぶんの実測値（PC 700x180 = 35:9 ／ SP 245x150 = 49:30、
   カンプの地図下端6275 -> 行の罫6306 の30px）もそちらに書いてある。 */

/* ---------------------------------------------------------------- Review
   カンプ実測（PC/デザイン/Browdia_サロン詳細.jpg、走査線＋PSD）:
     1件が枠付きのカード x200..1049／枠1px #E4E3F1／角丸5px／カード間20px
       カード y6788..7017 ／ 7038..7267 ／ 7288..7517（いずれも229px）
     内側の余白 20px（本文の原点x=219.3、写真の右端1028 ＝ どちらも枠から約20px）
     ニックネーム  14px Bold #414167（「さん」だけ12px Regular）
     メニュー      18px Medium #414167
     星            15x14 を4px間隔で5つ（x221..311）／4.8 は16px Bold #414167（x321）
     来店時期      12px Regular Tracking75 #888888（x366）
     本文          16px / 行送り26 / #333333。3行で切って右下に「もっと見る」#C16CA4
     写真          120x80・溝10px・右上（1枚のときも右寄せ）
   ★以前は角丸8pxの薄い箱に11〜14pxの文字を詰めた別物だった。 */
.detail-review__summary { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.detail-review__score { font-size: 20px; font-weight: 700; }
.detail-review__count { font-size: 13px; background: var(--c-bg-alt); border-radius: 3px; padding: 2px 8px; }
/* SPカンプ実測（PSB #176/#177/#160・走査線。÷2）:
     カード y12484..13059 ＝ 288 ／ カード間15 ／ 内側の余白14
     ニックネーム12px（「さん」11px）／ メニュー14px ／ 4.8は13px ／ 来店時期11px
     本文13px・行送り18 ／ もっと見る12px
   ★SPは写真が本文の「下」に2列で入る（PCは右上）。カンプ実測 152x101・溝11。 */
.detail-reviews { display: grid; gap: 15px; }
.review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--c-white);
  border: 1px solid #E4E3F1;
  border-radius: 5px;
  padding: 14px;
}
.review-item__head { grid-column: 1; grid-row: 1; }
.review-item__name { font-size: 13px; font-weight: 700; line-height: 24px; color: var(--c-navy); letter-spacing: .05em; }
.review-item__san { font-size: 12px; font-weight: 400; margin-left: 4px; }
.review-item__menu {
  font-size: 14px; font-weight: 500; color: var(--c-navy);
  letter-spacing: .05em; line-height: 22px; margin-top: 2px;
}
.review-item__meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.review-item__score { font-size: 13px; font-weight: 700; color: var(--c-navy); letter-spacing: .05em; }
.review-item__when { font-size: 12px; color: #888888; letter-spacing: .075em; margin-left: 8px; }

/* SPは本文の下に2列。DOM順は 見出し -> 写真 -> 本文 なので行を明示して入れ替える */
.review-item__photos {
  grid-column: 1; grid-row: 3;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px;
  list-style: none; margin: 12px 0 0; padding: 0;
}
.review-item__photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--c-bg-alt); }

/* ---- 口コミ一覧タブの投稿パネル（カンプ: Browdia_サロン詳細（口コミ）.jpg） ----
   実測: パネル x200..1049（枠1px #C16CA4）／見出しの行78px・文字は中央
     入力欄 x400..999（600幅）× 高さ60 ／ 行の間20px ／ 地色 #F5F6F8
     ラベル x250（パネル左から49px）
     投稿ボタン x425..824（400x60・中央） */
.review-panel { margin-bottom: 30px; }
.review-form--panel {
  border: 1px solid var(--c-accent);
  border-radius: 5px;
  background: var(--c-white);
}
.review-form__head {
  list-style: none; cursor: pointer;
  display: grid; place-items: center;
  min-height: 56px; padding: 8px 40px;
  font-family: var(--font-en); font-weight: 600; font-size: 17px;
  letter-spacing: .05em; color: var(--c-accent);
  position: relative;
}
.review-form__head::-webkit-details-marker { display: none; }
/* 開閉の山形（右端）。カンプにも同じ位置に付いている */
.review-form__head::after {
  content: ""; position: absolute; right: 24px; top: 50%;
  width: 9px; height: 9px; translate: 0 -70%; rotate: 135deg;
  border-top: 2px solid var(--c-accent); border-right: 2px solid var(--c-accent);
}
.review-form--panel[open] .review-form__head::after { rotate: -45deg; translate: 0 -30%; }

/* 投稿フォームの中身。カンプ（口コミ）実測:
     ラベル x250（パネル左から49px）／欄 x400..999（600x60）／行の間20px／地色 #F5F6F8
   ★これまでカンプが無く（設計書§6.3）素のフォームだった。 */
.review-form__body { display: grid; gap: 20px; padding: 0 16px 20px; }
.review-form__row { display: grid; gap: 6px; align-items: start; }
.review-form__label { font-size: 14px; font-weight: 500; color: var(--c-navy); }
.review-form__field { display: grid; gap: 4px; }
.review-form__field input[type="text"],
.review-form__field select,
.review-form__field textarea,
.review-form__field input[type="file"] {
  width: 100%; border: 1px solid #E4E3F1; border-radius: 4px;
  background: #F5F6F8; color: var(--c-text);
  font-family: inherit; font-size: 14px; padding: 12px;
}
.review-form__field textarea { min-height: 160px; resize: vertical; }
.review-form__field--visited {
  grid-auto-flow: column; grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr) max-content;
  align-items: center; gap: 8px;
}
.review-form__files { border: 0; margin: 0; padding: 0; display: grid; gap: 20px; }

/* ★honeypot（.form-hp）を隠す規則は components.css へ移した（2026-08-07・フェーズ6）。
   ここに置いていたせいで、salon.css を読まない画面では隠れていなかった:
     ・/job/{slug}/apply/  … 読むのは job.css だけ
     ・/contact/ /listing/ … 読むのは inquiry.css だけ
   app/forms.php は**すべての**公開フォームに .form-hp を出すので、
   規則も全ページが読む components.css に置くのが正しい。 */

/* 必須マーク・補助文・エラー。どれもCSSが無く素のままだった */
.req {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  border-radius: 3px; background: var(--c-accent); color: var(--c-white);
  font-size: 11px; font-weight: 500; letter-spacing: .05em; vertical-align: 2px;
}
.help { display: block; font-size: 13px; color: #8a85a8; }
.field-error { font-size: 13px; color: #C0392B; }
.review-done { font-size: 14px; color: var(--c-navy); margin-bottom: 20px; }
.review-form__actions { display: flex; justify-content: center; margin-top: 4px; }
.review-form__submit { width: 100%; max-width: 400px; height: 55px; font-size: 15px; }
@media (min-width: 1024px) {
  .review-panel { margin-bottom: 40px; }
  .review-form__head { min-height: 78px; font-size: 20px; }
  .review-form__body { padding: 0 49px 40px; }
  .review-form__row {
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 30px; align-items: center; gap: 0;
  }
  .review-form__label { font-size: 16px; }
  .review-form__field input[type="text"],
  .review-form__field select,
  .review-form__field input[type="file"] { height: 60px; font-size: 16px; }
  .review-form__field textarea { min-height: 200px; font-size: 16px; }
  .review-form__submit { height: 60px; font-size: 16px; }
}

/* 本文。JSがあるときだけ3行で切る（切ったままだと読めなくなるので
   is-clamped はJSが付ける。設計判断§8）。
   ★一覧タブ（.is-full）は切らない。カンプは全文がそのまま出ている。 */
.review-item__body {
  grid-column: 1 / -1; grid-row: 2; position: relative;
  font-size: 14px; line-height: 19px; color: var(--c-text); margin-top: 12px;
}
.review-item__body.is-clamped .review-item__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.review-item__more {
  position: absolute; right: 0; bottom: 0;
  padding-left: 12px; background: var(--c-white);
  border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--c-accent); letter-spacing: .05em; line-height: inherit;
}
/* 開いているときは行の上に重ねない。最終行を隠してしまう */
.review-item__body:not(.is-clamped) .review-item__more {
  position: static; display: block; margin-left: auto; padding-left: 0;
}

/* 一覧の下の2つのボタン。カンプ y7558..7617（高さ60）／中央寄せ／間59px
     左 x284..545（262幅）枠と文字 #C16CA4 ＋ 鉛筆18px
     右 x604..965（362幅）枠と文字 #8D5CA6
   ★フォームを開いたときだけ <details> が行いっぱいになり、右のピルは下へ折り返す。
     閉じているあいだはカンプどおり2つが横に並ぶ。 */
.detail-review__actions {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 16px; margin-top: 28px;
}
.btn--review { min-width: 0; width: 100%; max-width: 315px; height: 55px; font-size: 15px; font-weight: 400; --btn-ls: 0em; }
.btn--review-post { border-color: var(--c-accent); color: var(--c-accent); gap: 10px; }
.btn--review-post:hover { background: var(--c-accent); color: var(--c-white); }
/* ★ボタンの中のアイコン（`.btn__icon` 一式）は **components.css** へ移した（2026-08-10）。
     記事の中のサロン紹介カードの「ご予約はこちら」でも同じものが要るのに、
     記事ページは `$pageCss = ['article']` で **salon.css を読まない**（この罠は8回目）。
     ここに書き戻さないこと。 */
/* ★summary の三角（marker）を消す。Safari は ::-webkit-details-marker が要る */
.review-form__summary { list-style: none; cursor: pointer; }
.review-form__summary::-webkit-details-marker { display: none; }
.detail-review__actions .review-form { flex: 0 0 auto; }
/* 開いたら行いっぱいになり、中でピルを中央・フォームを幅いっぱいにする。
   ★margin:auto では中央に来ない。summary は .btn ＝ inline-flex なので inline レベル。
     中央寄せは親側（ここ）の align-items でやる（.detail-basic__cta と同じ罠）。 */
.detail-review__actions .review-form[open] {
  flex: 1 0 100%;
  display: flex; flex-direction: column; align-items: center;
}
.detail-review__actions .review-form[open] .review-form__body { align-self: stretch; }
.detail-review__note { margin-top: 18px; font-size: 13px; color: #8a85a8; }

/* Recommend の日本語だけ詳細ページで大きい。
   カンプ実測（PSD #73）: Noto Sans JP Medium 20px / Tracking 100（PCのみ）。
   SPカンプ（PSB #87）は 30 ＝ CSS 15px で、共通の .c-sec-title__ja と同じなので触らない。
   ★共通クラスを動かすとサロン一覧・トップの見出し（16px で検証済み）まで変わるので
     詳細ページに限定する。 */
@media (min-width: 1024px) {
  .is-salon-detail .c-sec-title__ja { font-size: 20px; font-feature-settings: "palt" 1; }
}

@media (min-width: 1024px) {
  .detail-reviews { gap: 20px; }
  .review-item { grid-template-columns: minmax(0, 1fr) max-content; padding: 22px 20px 24px; }
  .review-item__name { font-size: 14px; line-height: 26px; }
  .review-item__san { font-size: 12px; }
  .review-item__menu { font-size: 18px; line-height: 26px; }
  .review-item__meta { gap: 10px; }
  .review-item__score { font-size: 16px; }
  .review-item__when { font-size: 12px; margin-left: 10px; }
  /* PCは右上に横並び。★写真の上端はニックネームの「字面」の上端と揃う
     （どちらも枠から31px）。行ボックスの上端（枠から23px）ではないので8px下げる */
  .review-item__photos {
    grid-column: 2; grid-row: 1;
    display: flex; justify-content: flex-end; gap: 10px;
    margin: 8px 0 0 16px;
  }
  .review-item__photo { width: 120px; }
  .review-item__body { font-size: 16px; line-height: 26px; margin-top: 17px; }
  .review-item__more { font-size: 14px; padding-left: 20px; }
  .detail-review__actions { gap: 59px; margin-top: 40px; }
  .btn--review { width: 362px; max-width: none; height: 60px; font-size: 16px; }
  .btn--review-post { width: 262px; }
}

/* =====================================================================
 * 一覧ページの検索ボックス（1行版）
 *
 * ★MV用の大きいパネルを一覧に出していたのが誤りだった（2026-08-04 の目視で判明）。
 *   カンプ実測（PC/デザイン/Browdia_サロン一覧.jpg）:
 *     パネル  x203..1049（本文カラム幅850px）/ y2567..2666 = 高さ100px
 *     地色    #f2e1f1
 *     中身    白い選択2つ ＋ ピンクのピル「検 索」を横1行、見出しは出さない
 *     y=2617 の走査で 選択1 x221..510 / 選択2 x531..812 / ボタン x843..1030
 * ===================================================================== */
.searchbox--inline {
  background: #F2E1F1;
  border-radius: var(--r-card);
  padding: 16px;
  margin-bottom: 28px;
}
.searchbox--inline .searchbox__form { display: grid; gap: 12px; }
/* ★1行版は行を1カラムにする。
   components.css の .searchbox__row は「ラベル100px + 入力1fr」の2カラムだが、
   1行版はラベルを u-visually-hidden（position:absolute）で隠すため、
   ラベルがグリッドから外れて select が100pxの列に入ってしまう
   （実測で幅100px。2026-08-05）。1カラムにして全幅にする。 */
.searchbox--inline .searchbox__row { grid-template-columns: 1fr; }
.searchbox--inline .c-select,
.searchbox--inline .searchbox__submit { width: 100%; }
.searchbox--inline .searchbox__row { margin: 0; }
.searchbox--inline .searchbox__submit { width: 100%; min-width: 0; }

/* ★選択は純白。MV用の .c-select は淡い色が付いているが、
   カンプの一覧では #ffffff（y=2600 の走査で確認）。角丸は約4px（角の profile 実測） */
.searchbox--inline .c-select {
  background-color: #fff;
  border-radius: 4px;
}
/* ★影を消す。components.css の .searchbox は MV 用に
   box-shadow: 0 8px 34px rgba(141,92,166,.22) を持っているが、
   カンプの一覧の検索パネルに影は無い（2026-08-04 目視で指摘） */
.searchbox--inline { box-shadow: none; }

@media (min-width: 1024px) {
  /* ★カンプ実測（PC/デザイン/Browdia_サロン一覧.jpg）
       パネル  x203..1049 (847) / y2567..2666 (100)
       選択1   x221..520 (300)  選択2 x531..830 (300)  溝 10px
       ボタン  x843..1030 (188)   選択との間 13px
       選択の高さ y2587..2646 = 60px、上下の余白 20px
     18 + 300 + 10 + 300 + 13 + 188 + 18 = 847 で閉じる */
  .searchbox--inline { padding: 20px 18px; }
  .searchbox--inline .searchbox__form {
    grid-template-columns: 300px 300px 188px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .searchbox--inline .c-select,
  .searchbox--inline .searchbox__submit { height: 60px; min-width: 0; }
  /* ★margin-top を打ち消す。components.css の .searchbox__submit は
     縦積みの MV 用に上マージンを持っており、1行版では選択より31px下がる
     （実測。2026-08-04 指摘） */
  .searchbox--inline .searchbox__submit { width: 188px; font-size: 15px; margin: 0; }
}

/* ★高さを固定したボタンは中身を中央に置く。
   components.css の .btn は padding で高さを作っているので、
   height を上書きするとテキストが上に寄る（2026-08-04 目視で指摘）。 */
.list-pager__more,
.list-pager__prev,
.side-more .btn--outline,
.searchbox--inline .searchbox__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 0;
}

/* ★カードは白。カンプ実測（rect の最頻色が #ffffff 64.7〜87.3%）。
   地色を少しグレーにした（2026-08-04 発注者の指示）ので、
   カードが透明のままだと差が出ず、カードの輪郭が消える。
   .camp-card / .salon-card は元から白。Highlights と Ranking が抜けていた。 */
.hl-card,
.rank-card {
  background: var(--c-white);
  border-radius: var(--r-card);
  overflow: hidden;
}
/* ★カードの高さをそろえ、「詳細はこちら」は下端に貼る。
   カンプ（Recommend）は説明文の長さが違っても3枚のボタンが同じ高さに並ぶ。 */
.hl-card { display: flex; flex-direction: column; height: 100%; }
.hl-card__cta { margin-top: auto; }
/* ★カードの中身に余白。文字がカードの縁に貼り付いていた（2026-08-04 指摘） */
.hl-card__station,
.hl-card__desc,
.hl-card__cta,
.hl-card__name { padding-inline: 16px; }
/* ★padding ではなく margin。-webkit-line-clamp は overflow:hidden で切るが、
   padding 領域には次の行が見えてしまう（Chrome。2026-08-04 実測）。
   下余白を padding-bottom で付けたせいで3行目が覗いていた。 */
.hl-card__desc { margin-bottom: 18px; }
.hl-card__cta { padding-bottom: 18px; }
.rank-card__no,
.rank-card__name,
.rank-card__station { padding-inline: 10px; }
.rank-card__station { padding-bottom: 12px; min-width: 0; }

/* 「もっと見る」でその場に出す残り（サイドバー）。JSが hidden を外す。
   ★[hidden] を必ず勝たせること。クラス指定の display: contents は
     UAの [hidden]{display:none} より強く、そのままだと隠れない。 */
.side-more__rest { display: contents; }
.side-more__rest[hidden] { display: none; }

/* ★順位で色を変える（発注者の指示 2026-08-04）。
     1位=金 / 2位=銀 / 3位=銅 / 4位以降=紫。
     金はカンプ実測 #B9A146。銀・銅はそれに合わせた同系の彩度で置いた実測外の値。
     王冠のSVGは金色なので、順位ごとに色相を回して合わせる。 */
.rank-card__no--1 { color: #B9A146; }
.rank-card__no--2 { color: #9A9AA4; }
.rank-card__no--3 { color: #B0805A; }
.rank-card__no--alt { color: var(--c-primary); }

.rank-card__no--2 .rank-card__crown { filter: grayscale(1) brightness(1.05); }
.rank-card__no--3 .rank-card__crown { filter: hue-rotate(-18deg) saturate(1.15) brightness(.86); }
.rank-card__no--alt .rank-card__crown { filter: hue-rotate(215deg) saturate(1.4) brightness(.82); }

/* ★ここは 2026-08-04 に「ラベルの高さを100pxに固定しない」と決めた箇所。
   当時の理由は『高さを固定すると中身が短い行でラベルだけ間延びし、
   価格が下端まで押し下げられて字面が散らかる』だった。
   ★2026-08-06、カンプどおり タイトル（左）と価格（右）を横並び・上下中央に
   組み直したので、価格が下へ落ちる問題そのものが無くなった。
   前提が変わったので、カンプの値（サロン一覧100 / トップ新着サロン80）に戻す。
   SPは下の max-width:1023px 側で min-height:0 のまま。 */
/* 中身は上詰め。余った高さを行間に配らない（SPの縦積み用） */
.salon-camp__body { align-content: start; }
@media (min-width: 1024px) {
  .salon-camp__label { min-height: 100px; }
  /* PCは1行に横並びなので、余った高さは上下に均等に配る */
  .salon-camp__body  { align-content: center; }
}

/* ★口コミ件数は吹き出しアイコン＋下線（カンプ。2026-08-04 指示）。
   灰色のチップではない。 */
.salon-card__reviews {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--c-text);
  font-size: 13px;
}
.salon-card__reviews-icon { display: block; }
.salon-card__reviews-n { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
 * SPのサイドバー（カンプ 2026-08-04 の指摘に合わせる）
 * ===================================================================== */
@media (max-width: 1023px) {
  /* キャンペーンは上の全幅帯。PCの「左に正方形」を持ち込むと本文がつぶれる */
  .salon-camp { grid-template-columns: 1fr; padding: 0; overflow: hidden; }
  .salon-camp__label { min-height: 0; padding: 8px 0; border-radius: 0; }
  /* ★帯の下は「本文 左 / 価格 右」の横並び（カンプ。2026-08-05 指摘）。
     ★2026-08-21 grid の `1fr auto` から flex + wrap に替えた。
       grid は右（価格）に max-content を先に渡すので、長い価格が来ると
       日本語のタイトルが1文字幅まで潰れた（京都院で4行に割れた）。
       flex の折り返しは「縮める前」に起きるので、収まらない時は
       価格が丸ごと下の行へ落ちる。短い価格はこれまでどおり右端に並ぶ。 */
  .salon-camp__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 12px;
  }
  /* ★nowrap にしない。短い価格（¥50,000）は元々1行に収まるので折り返さない。
       長い価格を nowrap にすると、折り返せずに帯ごとカードを押し広げる。
       2026-08-21 実測: 「1回目 59,800円（通常69,800円）／2回セット 99,800円（通常119,800円）」で
       必要幅515px に対し器346px。ここがカード幅374pxの原因だった。
     ★keep-all で日本語の単語の途中では折らない。 */
  .salon-camp__price { text-align: right; word-break: keep-all; overflow-wrap: anywhere; min-width: 0; margin-inline-start: auto; }

  /* Ranking の見出しとタブは中央寄せ・大きめ */
  .side-rank .c-side-title,
  .side-new .c-side-title { text-align: center; }
  .side-rank__tabs { max-width: 345px; margin-inline: auto; gap: 12px; }
  .side-rank__tab { padding: 12px 0; font-size: 15px; }

  /* ランキングカードは横並び（画像 左 / 文字 右）。
     ★列を明示すること。media に grid-row だけ付けても、
       残りの子は自動配置で1列目へ回り込み、名前と駅名が画像の下に落ちる
       （2026-08-05 指摘）。 */
  .rank-card__link {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-template-rows: auto auto auto;
    align-content: center;
    gap: 4px 12px;
  }
  .rank-card__media { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .rank-card__no      { grid-column: 2; grid-row: 1; align-self: end; }
  .rank-card__name    { grid-column: 2; grid-row: 2; }
  .rank-card__station { grid-column: 2; grid-row: 3; align-self: start; }
  .rank-card__img,
  .rank-card__media .is-empty { aspect-ratio: 1; }
  .rank-card__no,
  .rank-card__name,
  .rank-card__station { padding-inline: 0; margin: 0; }
}

/* ★本文の最後とフッターの間に余白。
   SPでサイドバーの「もっと見る」がフッターに接していた（2026-08-04 指摘）。
   セクションの縦リズム（--section-py）と同じ量を使う。 */
.list-layout { padding-bottom: var(--section-py); }

/* =====================================================================
 * 一覧の大カードの並び（2026-08-04 カンプ合わせ）
 *
 * SP: バッジ+駅名 -> サロン名 -> 写真2枚 -> 評価・説明・MENU・キャンペーン
 * PC: 左に写真、右にそれ以外（従来どおり）
 *
 * ★この並び替えのために meta と name を body の外へ出してある（cards.php）。
 *   body の中にあると CSS の order では写真の上へ持ち上げられない。
 * ===================================================================== */
.salon-card { display: grid; }
.salon-card__meta  { order: 1; }
.salon-card__name  { order: 2; }
.salon-card__media { order: 3; }
.salon-card__body  { order: 4; display: grid; gap: 8px; }

@media (min-width: 1024px) {
  /* 左254px（写真）／右1fr。写真は右カラムの3行すべてにまたがる。
     ★行は grid-template-areas で明示する。
       以前は `grid-row: 1 / -1` で全行にまたがらせるつもりだったが、
       -1 は「明示グリッドの最終ライン」を指す。grid-template-rows を書いて
       いなかったので明示グリッドに行が無く、-1 が1行目に落ちて
       写真は1行目だけを占めていた。その結果
         ・1行目の高さが写真の高さ（約390px）まで伸びる
         ・.salon-card__meta は align-items:center の flex なので
           バッジ・駅名がその中で上下中央に浮く
         ・サロン名以降が写真の下へ回り、大きな空白ができる
       という崩れ方をしていた（2026-08-05 指摘）。
     ★align-content: start も必須。既定の stretch だと右カラムの3行が
       写真の高さに合わせて引き伸ばされ、行間に空きができる。 */
  .salon-card {
    grid-template-columns: 254px 1fr;
    grid-template-areas:
      "media meta"
      "media name"
      "media body";
    /* ★写真が3行にまたがるので、写真の方が高いとその差が各行へ配られて
       バッジ〜名前の間が空く。余りは本文の行だけが吸うようにする。 */
    grid-template-rows: min-content min-content 1fr;
    align-content: start;
  }
  .salon-card__media { order: 0; grid-area: media; align-self: start; }
  .salon-card__meta  { grid-area: meta; }
  .salon-card__name  { grid-area: name; }
  .salon-card__body  { grid-area: body; }
}

/* ★カード名のPC値。PCカンプ実測: 行送り34px・インク高23px
   （1行目 y1173..1195 / 2行目 y1207..1229）-> 22px x 1.55 = 34.1px。
   SPはPSB実測の14px（上のベース）。 */
@media (min-width: 1024px) {
  .hl-card__name { font-size: 22px; line-height: 1.55; }
}

/* ---------------------------------------------------------------- サロン一覧のカード高さ
   2026-08-06 発注者の指示「アートメイクサロン一覧のコンテンツ内の高さも合わせて」。

   カードの高さは「左の写真列（389px固定）」と「右の本文」の高い方で決まるので、
   口コミの有無・メニュー行数・キャンペーンの有無で 504 / 479 と揃っていなかった。

   ★grid-auto-rows: 1fr で一番高いカードに揃える。
   ★写真列も伸ばして下端を本文に合わせる。2枚が均等に伸び、object-fit: cover なので
     歪まず切り取りが増えるだけ。
   ★カンプ（PC/デザイン/Browdia_サロン一覧.jpg）では帯の下端(3226)が写真の下端(3159)より
     67px下で、写真と帯は揃っていない。写真を伸ばすとこの点はカンプから外れる。
     トップの新着サロンと同じ見た目に揃える判断（発注者の指示）。
     戻すときはこのブロックごと消せばよい。
   ★body.is-salon-list に限定する。.list-cards はトップの新着サロンでも使っていて、
     あちらは top.css 側で別に指定してある。 */
@media (min-width: 1024px) {
  body.is-salon-list .list-cards { grid-auto-rows: 1fr; }
  /* ★minmax(0, 1fr) にすること。素の 1fr は minmax(auto, 1fr) で、
       auto の下限に写真の実寸が効く。縦長の写真（1080x1440 等）が入ると
       行がその高さまで広がり、カード全体が縦に伸びる
       （2026-08-18 実測: 254x344 の縦長になり、右カラムに大きな空きができた）。 */
  body.is-salon-list .salon-card__media {
    align-self: stretch;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
  /* ★aspect-ratio を auto に戻さない。ここを auto にすると、写真の縦横比が
       そのまま行の下限になる。4/3 を残したまま height:100% を重ねると、
       「下限は4:3・右カラムが高ければそこまで伸びる」の両方が成り立つ。 */
  body.is-salon-list .salon-card__img,
  body.is-salon-list .salon-card__media .is-empty { aspect-ratio: 4 / 3; height: 100%; min-height: 0; }
}

/* ---------------------------------------------------------------- カードの高さを固定する
   2026-08-06 発注者の指示「文章が長い場合やメニューの多さでズレる可能性があるので、
   最大2行で超える場合は『…』に。メニューは3つまでに」。

   ★メニュー3件は実装済み（app/salons.php の SALON_CARD_MENUS = 3）。
   ★説明は salon_card_desc() が62字で「…」に切っている（PHP側）。
     ただしCSSのクランプが無いため、字数内でも折り返しで3行になりうる。
     PHPの字数制限とCSSのクランプは役割が違うので両方入れる
     （PHP: 内容を切る／CSS: 描画で必ず2行に収める）。
   ★キャンペーンが無いカードは「なし」を出して枠を保つ（app/templates/cards.php）。
     「なし」は本文より薄くして、実際のキャンペーンと読み違えないようにする。 */
.salon-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.salon-camp__title--none { color: #8a85a8; font-weight: 400; }

/* ---------------------------------------------------------------- キャンペーンカードの導線
   2026-08-06 発注者の指示「見出しcampaignの詳細はこちらのボタンいれようかな」。

   ★カンプには無い要素（PC/デザイン/Browdia_サロン一覧.jpg のキャンペーンカードは
     サロン名・画像・タイトル・価格だけ）。意図的にカンプから変えた箇所。
   ★足した理由: 押せるのがサロン名のリンクだけで、画像もタイトルも価格も押せず、
     キャンペーンからサロンへ進む導線が無かった。
   ★「伸びるリンク」にしてカード全体を押せるようにする（発注者の指示 A+B 併用）。
     カードを <a> で包むとサロン名リンクと入れ子になり、HTMLとして不正になるため、
     ボタンの ::after をカード全面に広げる形にする。
     サロン名のリンクは z-index を上げて、そちらはそちらで押せるままにする。 */
.camp-card { position: relative; }
.camp-card__salon a { position: relative; z-index: 1; }
/* ★中央寄せ・カードの下端に固定（2026-08-06 発注者の指示
     「ボタンの高さは固定してください。下のほうがいいかな」）。
     タイトルが2行のカードだけボタンが22px下がっていて、行の中で高さが揃わなかった
     （実測: 2行のカードはボタン上端144 / 1行は122）。
   ★カード全体を縦に伸ばして、ボタンだけ margin-top:auto で下へ落とす。
     .camp-card__body は画像140pxと本文の2列なので、本文側の列も
     いっぱいに伸ばす必要がある（align-items の既定 stretch を使う）。 */
.camp-card { display: flex; flex-direction: column; }
.camp-card__body { flex: 1; }
.camp-card__text { display: flex; flex-direction: column; }
/* ★padding-bottom で少し浮かせる（2026-08-06 発注者の指示「少し上にあげたい」）。
     margin-top:auto でカードの下端に落としていたので、ボタンの下は
     カードの padding 12px しかなく、上には31px空いていた（実測: 価格の下端1613 ->
     ボタンの上端1644 / ボタンの下端1679 -> カードの下端1691）。
     上下10pxずつにして、カードの下端からは 10+12=22px 浮かせる。
   ★写真が140pxで本文列より高いので、ここを足してもカードの高さは変わらない
     （実測でカードは 345x211 のまま）。行の中でボタンの高さが揃うのも保つ。 */
.camp-card__cta { margin-top: auto; padding-top: 10px; padding-bottom: 10px; display: flex; justify-content: center; }
/* ★border-radius は inherit にしないこと。ボタンはピル型（角丸=高さの半分）なので、
     継ぐと当たり判定がピル形に切り取られてカードの四隅が押せなくなる（実測で発覚）。
     カード側の角丸に合わせる。 */
.camp-card__cta .btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
/* キーボードで辿ったときに、カード全面ではなくボタンの形で見えるようにする */
.camp-card__cta .btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ---------------------------------------------------------------- 施術メニューLPのエリア導線
   2026-08-06。施術メニューLP（/salon/menu/{menu-slug}/）にだけ出る。
   「眉アートメイク」で来た人を「東京の眉アートメイク」へ送る内部リンク。
   ★0件のエリアは PHP 側で落としている（空のページへ送らない）。 */
.menu-areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 1024px) {
  .menu-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
.menu-areas a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: var(--c-white);
  border: 1px solid #E4E3F1;
  border-radius: var(--r-card);
  color: var(--c-navy);
  font-size: 14px;
  text-decoration: none;
}
.menu-areas a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.menu-areas__n { color: #8a85a8; font-size: 13px; white-space: nowrap; }