/* ==== theme P12 ==== */
@charset "utf-8";
/* P12 変化が主役（技術訴求） — デザインカタログ_2026-09-22.md §2 P12
   核: 背景は徹底的に引く（髪の色が主役）／見出しはゴシック中／明朝は使わない／
       写真グリッドは詰め気味で技術名のキャプションを必ず出す／暗い面は作らない。 */

:root{
  --heading-weight:700;
  --heading-track:-.005em;
  --brand-track:.02em;

  /* 白〜淡色が8割。base はほぼ白に寄せ、面を作らず罫で割る */
  --base:#fbf9f4;
  --line:#d0cac0;
  --line2:#e3ded3;

  /* 余白は中庸（一覧性を優先） */
  --act:52px;        --act-lg:96px;
  --act-tight:34px;  --act-tight-lg:64px;
  --beat:24px;       --beat-lg:36px;

  --radius:2px;
  --radius-photo:2px;
  --btn-radius:2px;
  --chip-radius:2px;
  --rule:1px solid var(--line);
  --rule-soft:1px solid var(--line2);
  --hero-media-ar:3/4;
  --fade-dur:.5s;
}

/* ヒーローの写真は「仕上がりの艶」を見せる縦長。余白付きで置く（全幅にしない） */
.hero--text .hero__media img,
.hero--price .hero__media img{aspect-ratio:3/4}
.hero--photo .hero__media img{aspect-ratio:16/9}

/* 技術名はタグで出す。アクセントは技術名とCTAにだけ */
.style-card figcaption,.style-lead figcaption{
  font-weight:700;color:var(--ink);font-size:12.5px;
}
.style-card figcaption::before,.style-lead figcaption::before{
  content:"";display:inline-block;width:14px;height:1px;background:var(--accent);
  vertical-align:middle;margin-right:7px;
}

/* 写真グリッドは詰め気味（一覧性） */
.grid{gap:10px}
@media(min-width:720px){ .grid{gap:14px} }
.photo-band,.gallery{gap:10px}
@media(min-width:720px){ .photo-band,.gallery{gap:16px} }

/* 価格表の行間だけは広く（指で押せる） */
.prow{padding:15px 0}

/* 比較検討中の人を待たせない: 価格表と CTA はフェードさせない（カタログ P12 の「動き」） */
.menu-list,.endcta .btns{opacity:1 !important;transform:none !important}

/* セクションの区切りは背景色でなく罫で */
.act--tint{background:var(--base)}

/* ラウンド2: FVの承認済み組版には触れず、本文の階層と配置を完成させる。 */
main>section:not(.hero) .h2,.visit-grid .h2,.phead .h2{
  font-size:26px;line-height:1.4;
}
.section-label{font-size:11px;line-height:1.6;letter-spacing:.16em;color:var(--main);margin-bottom:8px}
.story-layout{display:grid;gap:24px}
.story-layout>*{min-width:0}
.story-layout>p:empty{display:none}
.concept-story,.staff-story{padding-block:56px}
.story-layout .read>p:first-child{margin-top:0}
.story-layout .read p,.staff-story .lead{font-size:15px;line-height:2}
.staff-story .staff-lead{margin-top:0}
.staff-story .staff-name{font-size:20px;line-height:1.6}

/* 実写真だけで組む一覧。先頭と後続を同じ画面で見比べられる寸法にする。 */
.style-selection{padding-block:48px}
.style-selection>.wrap{max-width:1120px}
.style-selection__photos{display:grid;gap:12px;align-items:start}
.style-selection__photos>.grid{margin-top:0;gap:12px}
.style-selection__photos>.style-lead img{aspect-ratio:4/5;object-fit:cover}

/* 本文中のモデル写真。右写真を本文幅の外へfloatさせない。 */
.concept-body{padding-block:40px}
.concept-body .read{display:grid;gap:24px}
.concept-body .read::after{content:none}
.concept-body .read>p{margin:0;font-size:15px;line-height:2}
.concept-body .cphoto{margin-block:0}
.concept-body .cphoto--side{float:none;margin-inline:auto 0}
.page-concept .features-note{margin-top:0}

/* 料金の確認先は薄い面にまとめる。店の事実・本文は既存の出力をそのまま使う。 */
.price-notice{background:var(--base);padding-block:56px}
.price-notice>.wrap{max-width:760px}
.price-notice__body{margin-top:20px}
.price-notice__body>p{font-size:15px;line-height:2}
.price-notice__body>p:first-child{margin-top:0}

.features-note{background:var(--base);padding-block:32px}
.features-note .chips{gap:8px 20px}
.features-note .chip:not(a):not(:has(a)){
  border:0;border-radius:0;padding:0;gap:8px;font-size:13px;line-height:1.9;
}
.features-note .chip:not(a):not(:has(a))::before{
  content:"";width:10px;height:1px;flex:none;background:var(--accent);
}

/* 表と地図、表とFAQ。それぞれの内側paddingを一度だけ取る。 */
.visit-grid,.access-layout{
  display:grid;max-width:1080px;margin-inline:auto;padding:56px 20px;gap:40px;
}
.access-layout{gap:24px;padding-block:40px}
.visit-grid>section,.access-layout>section{min-width:0;padding:0}
.visit-grid>section>.wrap,.access-layout>section>.wrap{padding-inline:0;max-width:none}
.visit-grid .tbl th,.access-details .tbl th{font-size:12px}
.visit-grid .tbl td,.access-details .tbl td{font-size:14px;line-height:1.9}
.faq dt{font-size:14px;padding-top:20px;line-height:1.8}
.faq dt::before{top:20px}
.faq dd{font-size:14px;line-height:1.95;padding-bottom:20px}
.faq-section{padding-block:16px 40px}
.faq-section>.wrap{max-width:800px}
.faq-section .faq{margin-top:20px}
.salon-photo{padding-block:0 40px}
.salon-photo .gallery:has(>.photo-card:only-child){display:block;max-width:260px;margin-inline:auto}

/* 固定CTAは近くに通常CTAがある間だけ退避。フォーカス移動でも本文を見せる。 */
.mobile-cta.is-idle{visibility:hidden;pointer-events:none}
main :is(a,button,[tabindex]){scroll-margin-block:80px 96px}
.phone-inline{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;white-space:nowrap}
.phone-inline:hover{text-decoration:underline;text-underline-offset:4px}
.phone-inline .svg-i{margin-right:6px}

@media(min-width:900px){
  main>section:not(.hero) .h2,.visit-grid .h2,.phead .h2{font-size:32px}
  .style-selection{padding-block:64px}
  .style-selection__photos{grid-template-columns:minmax(0,.95fr) minmax(0,1.5fr);gap:24px;align-items:stretch}
  .style-selection__photos>.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-content:start}
  .style-selection__photos>.style-lead{display:flex;flex-direction:column;min-width:0}
  .style-selection__photos>.style-lead img{height:auto;aspect-ratio:3/4;object-fit:cover}
  .concept-story,.staff-story{padding-block:80px}
  .story-layout{grid-template-columns:220px minmax(0,1fr);gap:24px 64px;align-items:start}
  .story-layout>.read,.story-layout>.staff-lead{max-width:680px}
  .story-layout>.mt24{grid-column:2;margin-top:0}
  .story-layout .read p,.staff-story .lead{font-size:16px;line-height:2}
  .concept-body{padding-block:64px}
  .concept-body .read{max-width:1080px;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:auto auto min-content 1fr;gap:32px 48px;align-items:start}
  .concept-body .read>p:first-child{grid-column:1/-1;max-width:640px;margin-inline:auto}
  .concept-body .read>p{font-size:16px}
  .concept-body .cphoto--wide{grid-column:1/-1;width:100%;margin:0;transform:none}
  .concept-body .cphoto--side{grid-column:2;grid-row:3/span 2;width:100%;margin:0}
  .concept-body .cphoto--side+p{grid-column:1;align-self:start}
  .concept-body .cphoto--wide+p{grid-column:1}
  .price-notice{padding-block:64px}
  .price-notice__body>p{font-size:16px}
  .features-note{padding-block:40px}
  .visit-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;padding-block:64px}
  .access-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding-block:64px}
  .visit-grid .tbl th,.access-details .tbl th{width:26%;padding-right:16px}
  .access-layout .map{aspect-ratio:4/3}
  .faq-section{padding-block:0 56px}
  .salon-photo{padding-bottom:64px}
  .salon-photo .gallery:has(>.photo-card:only-child){max-width:320px}
}

/* ================= デザインレビュー（Claude・2026-09-23）: FV の世界を下層まで通す =================
   FV（オーナー承認済み・触らない）は「縦組みの明朝の極太 × イタリックの欧文 × 琥珀の細い罫」で組まれているのに、
   その下は汎用ゴシックの見出し＋小さな英字ラベルに戻っていた＝スクロールした瞬間に別のサイトになる。
   ここでは FV と同じ3つの部品（Shippori Mincho B1 / Playfair Display イタリック / 琥珀の罫）を
   見出し・ラベル・ページ見出し・ヘッダー・フッターに通し、実写真はトーンを生成りの世界に寄せる。
   文言・事実は変えない（CSS だけ。飾りのタイルの文字は店のコンセプト語＝FV と同じ語）。 */
:root{
  --r-mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --r-lat:"Playfair Display",Georgia,serif;
  --r-amber:#8a4a14;      /* FV の欧文と同じ焦げ琥珀（白地で 7.4:1） */
  --r-rule:#b8782a;       /* FV の罫と同じ琥珀（線だけに使う） */
  --r-cream:#f6f1e6;      /* カルテの base（FV の壁の生成り） */
  --radius-photo:0px;     /* 写真の角は FV・差し込み写真と同じく直角 */
}

/* 見出し: FV の「未来の基本、」と同じ明朝の極太 */
.site-header__name,
main>section:not(.hero) .h2,.visit-grid .h2,.phead h1,
.staff-story .staff-name,.features-note .h4,.site-footer .h4{
  font-family:var(--r-mincho);font-weight:800;letter-spacing:.03em;
}
/* 375px で「RODEO HAIR(ロデオヘアー)」が1行に収まる大きさ（2行に割れると屋号が崩れる） */
.site-header__name{font-size:14px;letter-spacing:.02em;white-space:nowrap}
main>section:not(.hero) .h2,.visit-grid .h2{font-size:28px;line-height:1.35}

/* 英字ラベル: FV の欧文と同じイタリック＋先頭に琥珀の罫（FV の小見出しの罫と同じ語彙） */
.section-label,.phead__label{
  display:flex;align-items:center;gap:12px;margin:0 0 10px;
  font-family:var(--r-lat);font-style:italic;font-weight:500;font-size:14px;line-height:1.4;
  letter-spacing:.12em;color:var(--r-amber);
}
.section-label::before,.phead__label::before{content:"";flex:none;width:28px;height:1px;background:var(--r-rule)}
.endcta .section-label{justify-content:center}
.endcta .section-label::after{content:"";flex:none;width:28px;height:1px;background:var(--r-rule)}

/* 下層ページの見出し帯: 生成りの面に大きな明朝（雑誌の特集扉）。罫は琥珀の短い線だけ */
.phead{background:var(--r-cream);border-bottom:0;padding-block:44px 40px}
.phead h1{font-size:36px;line-height:1.3;margin-top:4px}
.phead h1::after{content:"";display:block;width:44px;height:1px;margin-top:22px;background:var(--r-rule)}
.phead .small{margin-top:14px}

/* 実写真: 店内の蛍光灯・暗い棚の色を、生成り×焦げ茶の世界に寄せる（トーンだけ。切り抜き・合成はしない）。
   フィルタは figure 側に掛ける（img には出現の動きの filter が付いて上書きされるため）。 */
.style-selection figure,.salon-photo figure,.photo-band figure{filter:sepia(.16) saturate(.84) contrast(1.04) brightness(1.02)}
.style-selection>.wrap{max-width:var(--w-main)}   /* 見出しと写真の左端を他の節（1080px の軸）に揃える */

/* 写真の数が列で割り切れないときに残る空き枠を、FV と同じ欧文の小さな扉で埋める（飾り・読み上げない）。
   スマホ 2 列: 後続が奇数枚 / PC 3 列: 後続が 3n+2 枚 のときだけ出す＝ぴったり埋まるときだけ。 */
.style-selection__photos>.grid:has(>:last-child:nth-child(odd))::after{
  content:"FUTURE STANDARD\3002";content:"FUTURE STANDARD\3002" / "";
  display:flex;align-items:flex-end;padding:14px;aspect-ratio:3/4;background:var(--r-cream);
  font-family:var(--r-lat);font-style:italic;font-weight:500;font-size:21px;line-height:1.05;
  color:var(--r-amber);border-top:1px solid var(--r-rule);overflow-wrap:normal;word-break:keep-all;
}

/* スタッフ本文は灰色でなく本文色で（長文を灰色にすると褪せて見える） */
.staff-story .lead{color:var(--ink)}
.staff-story .staff-name{font-size:22px}

/* FAQ の Q/A を見出しと同じ明朝で（イタリックの Q は数字の 2 に見えるので使わない） */
.faq dt::before,.faq dd::before{font-family:var(--r-mincho);font-weight:800;font-size:15px;line-height:1;top:22px}
.faq dt::before{color:var(--r-amber)}
.faq dd::before{top:6px}

/* 地図: Google の原色を落として生成りのトーンに（操作性はそのまま） */
.map{filter:grayscale(.55) sepia(.22) contrast(.96)}

/* 店のこと: 小さな帯の見出しも明朝に */
.features-note .h4{font-size:16px}

/* 最終CTA: 締めの見出しを一段大きく */
.endcta .h2{font-size:30px}

/* フッター: 屋号を明朝で。上端に琥珀の短い罫 */
.site-footer{border-top:0;position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:50%;width:44px;height:1px;margin-left:-22px;background:var(--r-rule)}
.site-footer .h4{font-size:18px}
.salon-photo .gallery:has(>.photo-card:only-child){max-width:300px}

@media(min-width:900px){
  main>section:not(.hero) .h2,.visit-grid .h2{font-size:34px}
  .site-header__name{font-size:17px;letter-spacing:.06em}
  /* 先頭の写真を右の2段と同じ高さまで伸ばす（下端をそろえる） */
  .style-selection__photos>.style-lead img{flex:1 1 auto;min-height:0;height:100%;aspect-ratio:auto}
  .phead{padding-block:84px 72px}
  .phead h1{font-size:52px}
  .phead h1::after{margin-top:30px;width:56px}
  .endcta .h2{font-size:40px}
  /* PC は 3 列: 後続が 3n+2 枚のときだけ扉を出す（2 列の奇数条件を打ち消してから） */
  .style-selection__photos>.grid:has(>:last-child:nth-child(odd))::after{content:none}
  .style-selection__photos>.grid:has(>:last-child:nth-child(3n+2))::after{
    content:"FUTURE STANDARD\3002";content:"FUTURE STANDARD\3002" / "";font-size:26px;padding:20px}
  /* 料金の確認・店のことを、考えかた・スタッフと同じ「左に見出し 220px／右に本文」の軸に揃える */
  .price-notice>.wrap{max-width:var(--w-main);display:grid;grid-template-columns:220px minmax(0,680px);column-gap:64px;align-items:start}
  .price-notice>.wrap>.section-label{grid-column:1;grid-row:1}
  .price-notice>.wrap>.h2{grid-column:1;grid-row:2}
  .price-notice>.wrap>.price-notice__body{grid-column:2;grid-row:1 / span 3;margin-top:0}
  .price-notice>.wrap>.btns{grid-column:2;grid-row:4}
  .features-note>.wrap:not(.wrap--narrow){display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:64px;align-items:baseline}
  .features-note>.wrap:not(.wrap--narrow)>.chips{margin-top:0}
  /* フッター: 左に屋号と所在、右にナビ */
  .site-footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:start}
  .site-footer .wrap>*{grid-column:1}
  .site-footer .wrap>.site-footer__nav{grid-column:2;grid-row:1 / span 2;margin-top:4px}
  .site-footer .wrap>.demo-notice{grid-column:1 / -1}
  .salon-photo .gallery:has(>.photo-card:only-child){max-width:360px}
}

/* 固定電話バーの分の下余白を body でなくフッターの内側で取る（body の地の色の帯がフッターの下に出ないように） */
@media(max-width:899px){
  body.has-mobile-cta{padding-bottom:0}
  body.has-mobile-cta .site-footer{padding-bottom:calc(56px + 65px + env(safe-area-inset-bottom,0px))}
}
/* 固定バーの退避は、消すのでなく下へ滑らせる（reduced-motion では style.css の一括停止で即時） */
.mobile-cta{transition:transform .5s cubic-bezier(.19,1,.22,1),visibility 0s linear 0s}
.mobile-cta.is-idle{transform:translateY(110%);transition:transform .5s cubic-bezier(.19,1,.22,1),visibility 0s linear .5s}