@charset "utf-8";
/* demo-multi v2.1 — 構造レイヤ（2026-09-23）
   正本: wireframes/2026-09-22/{blanc,leads,idol}（オーナー合格済みの構造）
         03b_デモ生成v2_設計_2026-09-22.md §12.2

   このファイルは「幅・文字階級・余白・並び」だけを持つ。色と書体は :root の
   トークン（build.py が salon.design から書き込む）と、themes/P0x.css（パターン層）で決まる。
   ワイヤーの .note（設計注記）はテンプレに入れない。 */

/* 見出し書体の和文グリフ差し替え（統括2026-09-23検品「with」対応）。
   design.fonts.heading にはカルテが design/デザインカタログ_2026-09-22.md の白リスト
   （build.py GOOGLE_FAMILIES）から選んだ書体が入る。ほとんどは和文の本文にも耐える
   書体だが、"Dela Gothic One" は Google Fonts 上も Display 分類の欧文向け極太書体で、
   同名で配布されている和文グリフ（ひらがな・カタカナ・漢字）も同じ極太で作られており、
   見出し規模より小さいボタン文言・電話番号に当てると潰れて見える。
   欠字によるフォールバック（ブラウザの通常のフォントスタック解決）では直せない
   （このフォントは和文グリフを実際に持っているため）ので、同名 @font-face を和文の
   unicode-range だけに限定して宣言し、その範囲だけ端末の和文書体に逃がす
   （unicode-range が重なる場合は後勝ちなので、Google Fonts の <link>（head内・本CSSより前）
   より後に読み込まれるこの宣言が優先される。端末に候補が無ければ黙って
   --font-heading の和文フォールバック列（Noto Sans JP 等）へ続く＝安全側）。
   他の白リスト書体は Display 分類ではなく和文の地の文としても成立するため対象にしない。 */
@font-face{
  font-family:"Dela Gothic One";
  unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF;
  src:local("Hiragino Sans"),local("Hiragino Kaku Gothic ProN"),local("Yu Gothic"),
      local("Meiryo"),local("Noto Sans CJK JP"),local("MS Gothic");
}

:root{
  /* --- 色（build.py が salon.design.palette から算出して差し込む） --- */
  --base:#f6f1e6;
  --surface:#ffffff;
  --ink:#241a14;
  --ink2:#6b635b;
  --faint:#989088;
  --main:#6a4a30;
  --accent:#c2842a;
  --on-main:#ffffff;
  --on-accent:#ffffff;
  --line:#d0cac0;
  --line2:#e3ded3;
  --box:#e9e4d9;
  --scrim:rgba(16,12,9,.78);
  --dark:#140e0b;
  --on-dark:#fcfbf8;
  --on-dark2:#a4a19e;
  --dark-line:#47423f;

  /* 電話アイコン（自己ホストの inline SVG。build.py の svg_icon("phone") と同じ形を
     mask 用に white 塗りで持つ。build.py 側で svg タグを直接差せない箇所だけここで使う。
     オーナー指摘 2026-09-23・設計書 03b §決定12b） */
  --i-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.58 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");

  /* --- 書体 --- */
  --font-heading:"Noto Sans JP","Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --font-body:"Noto Sans JP","Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --heading-weight:700;
  --heading-track:0em;
  --brand-track:.04em;

  /* --- 余白のリズム（themes が上書きする。ワイヤーの act / act--tight / beat） --- */
  --act:56px;        --act-lg:108px;
  --act-tight:38px;  --act-tight-lg:72px;
  --beat:26px;       --beat-lg:40px;

  /* --- 幅（ワイヤーの3階級。themes では変えない＝構造だから） --- */
  --w-read:640px;    /* 読ませる帯 */
  --w-main:1080px;   /* 既定 */
  --w-wide:1240px;   /* 写真・一覧 */

  /* --- 面の性格（themes が上書きする） --- */
  --radius:0px;
  --radius-photo:0px;
  --rule:1px solid var(--line);
  --rule-soft:1px solid var(--line2);
  --btn-radius:0px;
  --chip-radius:0px;
  --hero-media-ar:4/3;
  --fade-dur:.6s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  line-break:strict;
  word-break:normal;
  overflow-wrap:anywhere;
}
body.has-mobile-cta{padding-bottom:calc(65px + env(safe-area-inset-bottom,0px))}
html{scroll-padding-block:80px 96px}
:focus-visible{outline:2px solid var(--main);outline-offset:3px}
@media(min-width:900px){ body{font-size:15px} body.has-mobile-cta{padding-bottom:0} }

img{max-width:100%;height:auto;display:block;border-radius:var(--radius-photo)}
a{color:inherit}
/* button は UA スタイルで color/font を継承しない（<a> と違い既定で黒文字・既定フォントに
   戻る）。currentColor 前提のアイコンボタン（.mnav__toggle 等）がダーク反転パターンで
   見えなくなるバグの原因だったため、ここで一括して継承させる（統括2026-09-23検品）。 */
button{color:inherit;font:inherit}
h1,h2,h3,h4,p,figure,dl,dd,table{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
iframe{border:0;display:block;width:100%}

/* ---------- 幅とリズム ---------- */
.wrap{width:100%;max-width:var(--w-main);margin-inline:auto;padding-inline:20px}
.wrap--narrow{max-width:var(--w-read)}
.wrap--wide{max-width:var(--w-wide)}

.act{padding-block:var(--act)}
.act--tight{padding-block:var(--act-tight)}
.beat{padding-block:var(--beat)}
.act--line{border-top:var(--rule)}
.act--tint{background:var(--base)}
@media(min-width:900px){
  .act{padding-block:var(--act-lg)}
  .act--tight{padding-block:var(--act-tight-lg)}
  .beat{padding-block:var(--beat-lg)}
}

/* ---------- 文字の階層（同じ強さを並べない） ---------- */
.h1,.h2,.h3,.h4{font-family:var(--font-heading);font-weight:var(--heading-weight);letter-spacing:var(--heading-track)}
.h1{font-size:clamp(27px,7.4vw,56px);line-height:1.3}
.h2{font-size:clamp(20px,5vw,32px);line-height:1.45}
.h3{font-size:clamp(16px,3.6vw,20px);line-height:1.6}
.h4{font-size:14px;line-height:1.7}
@media(min-width:900px){ .h4{font-size:15px} }
.eyebrow{font-size:12px;color:var(--ink2);margin-bottom:12px;line-height:1.7;letter-spacing:.02em}
.lead{font-size:clamp(15px,3.7vw,18px);line-height:1.95;color:var(--ink2)}
.body{line-height:1.95}
.small{font-size:12px;color:var(--ink2);line-height:1.8}
.faint{color:var(--faint)}
.num{font-family:var(--font-heading);font-size:clamp(23px,6.2vw,38px);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.num--sm{font-size:clamp(18px,4.6vw,24px)}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:12px 20px;border:1px solid var(--main);
  background:var(--main);color:var(--on-main);text-decoration:none;
  /* 見出し書体ではなく本文書体を使う。カルテの見出し書体は「Dela Gothic One」等の
     極太ディスプレイ書体になりうり、電話番号・CTA文言のような小さめの実用テキストに
     当てると和文が潰れて見える（統括2026-09-23検品「with」で確認）。ボタン・電話番号は
     常に本文書体で読みやすさを優先する。 */
  font-family:var(--font-body);font-weight:700;font-size:14.5px;line-height:1.45;
  text-align:center;border-radius:var(--btn-radius);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--block{display:flex;width:100%}
.btn--lg{min-height:62px;font-size:16.5px}
.btns{display:flex;flex-direction:column;gap:10px}
@media(min-width:900px){ .btns--row{flex-direction:row;flex-wrap:wrap} .btns--row>.btn{flex:1 1 220px} }
.btn__num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.more{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:700;
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;font-size:14.5px;
}
.recept{font-size:12px;color:var(--ink2);line-height:1.8;margin-top:10px}
.svg-i{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;
       stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em;margin-right:.45em}
.btn .svg-i,.more .svg-i{margin-right:0}
.hero__hours .svg-i,.recept .svg-i{margin-right:.4em}
.cpn__name a{text-decoration:none;border-bottom:1px solid var(--line)}

/* ---------- ヘッダー ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:var(--rule)}
.site-header__in{display:flex;align-items:center;gap:10px;min-height:56px}
.site-header__name{
  font-family:var(--font-heading);font-weight:700;font-size:15px;text-decoration:none;
  flex:1 1 auto;min-width:0;line-height:1.35;letter-spacing:var(--brand-track);
}
.nav{display:none}

/* スマホは電話・ハンバーガーの2つの角ボタンを右端にまとめる（店名は縮んで1〜2行に
   折り返す。切り詰め・省略はしない＝min-width:0 で折り返しに任せるだけ）。 */
.site-header__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.site-header__tel{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:44px;height:44px;padding:0;flex:0 0 auto;
  font-weight:700;font-size:12.5px;text-decoration:none;
  border:1px solid var(--ink);border-radius:var(--btn-radius);
}
.site-header__tel .svg-i{margin-right:0}
.site-header__tel-num{display:none}

/* ---------- スマホのメニュー（ハンバーガー） ----------
   構造: button（開閉・aria-expanded/aria-controls/aria-label）+ ul（ナビ本体、ヘッダー直下の
   オーバーレイ）。既定（JS無効時を含む）はボタンを隠してナビを縦並びで常時表示＝どんな環境でも
   ナビに到達できる。html.js（head の1行スクリプトが即時に付ける）が付いた環境だけ、ボタンで
   開閉するオーバーレイに切り替える（下のコンテンツは押し下げない）。
   オーナー指摘 2026-09-23「スマホで入りきらない→ハンバーガーに」「1行に収める」
   （設計書 03b §決定12b）。 */
.mnav{display:contents}
.mnav__toggle{
  display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  /* color を固定せず currentColor で継承する（.site-header の文字色に自動で追従）。
     ダーク反転パターン（P08/P01/P09/P10）は .is-dark .site-header で color を
     on-dark に上書きするので、ここを var(--ink) 固定にすると暗地に暗い枠・線になって
     見えなくなる（統括2026-09-23検品で実測: コントラスト比1.14。オーナー指摘）。
     color:inherit が必須: <button> は UA スタイルで color を継承しない要素なので、
     currentColor だけでは button 自身の既定色（黒）を拾ってしまい直らない
     （inherit を外した状態で再計測しても比1.10のまま＝button特有のバグと確認済み）。 */
  color:inherit;border:1px solid currentColor;background:transparent;cursor:pointer;
  border-radius:var(--btn-radius);flex:0 0 auto;
}
.mnav__bars,.mnav__bars::before,.mnav__bars::after{content:"";display:block;width:18px;height:2px;background:currentColor}
.mnav__bars{position:relative}
.mnav__bars::before,.mnav__bars::after{position:absolute;left:0;transition:transform .15s ease,top .15s ease,opacity .15s ease}
.mnav__bars::before{top:-6px}
.mnav__bars::after{top:6px}
.site-header.is-open .mnav__bars{background:transparent}
.site-header.is-open .mnav__bars::before{top:0;transform:rotate(45deg)}
.site-header.is-open .mnav__bars::after{top:0;transform:rotate(-45deg)}
.mnav__list{display:block;position:static;background:var(--surface);padding:4px 20px 14px}
.mnav__list a{display:block;padding:12px 0;border-bottom:var(--rule-soft);text-decoration:none}
/* JS 無効時はナビが縦並びで常に出る（下の .js 切替が効かない）ので、スマホではヘッダーを画面上部に
   固定しない（縦並びのナビが画面を塞ぎ続けないように）。nav.js が読めない場合の開閉は head のインライン最小開閉が担う。 */
@media(max-width:899px){ html:not(.js) .site-header{position:relative} }

/* JSが動く環境だけハンバーガー方式にする。それ以外（JS無効・読み込み前）は上のルールで
   常時縦並び表示のまま＝ナビに到達できなくなることがない。 */
.js .mnav__toggle{display:inline-flex}
.js .mnav__list{
  display:none;position:absolute;left:0;right:0;top:100%;z-index:25;
  border-bottom:var(--rule);padding:4px 20px 14px;
}
.js .site-header.is-open .mnav__list{display:block}

@media(min-width:900px){
  .mnav{display:none}
  .mnav__list,.js .mnav__list,.js .site-header.is-open .mnav__list{display:none}
  .nav{display:flex;gap:24px;margin-right:18px}
  .nav a{text-decoration:none;font-size:13.5px}
  .nav a[aria-current="page"]{font-weight:700;border-bottom:2px solid var(--main);padding-bottom:2px}
  .site-header__tel{width:auto;height:auto;padding:9px 12px;white-space:nowrap}
  .site-header__tel-num{display:inline}
}

/* ---------- 電話番号のインラインアイコン（自己ホスト。外部アイコンフォント不使用） ----------
   ヘッダー・ボタン類は build.py 側で <svg class="svg-i"> を直接差し込み済み。
   ここは build.py が単なる <a href="tel:…"> しか出さない箇所（店舗情報テーブル等）向けの
   フォールバック。同じ電話マークを mask 画像として自己ホストで埋め込む。
   オーナー指摘 2026-09-23（設計書 03b §決定12b）。 */
a[href^="tel:"]:not(.btn):not(.site-header__tel):not(:has(svg))::before{
  content:"";display:inline-block;width:.85em;height:.85em;margin-right:.4em;
  vertical-align:-.08em;background-color:currentColor;
  -webkit-mask:var(--i-tel) center/contain no-repeat;
  mask:var(--i-tel) center/contain no-repeat;
}

/* ---------- スマホ固定CTA ---------- */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);
  border-top:var(--rule);padding:8px 20px calc(8px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;
}
.mobile-cta .btn{flex:1 1 0;min-height:48px;font-size:14px;padding:8px 10px}
/* コントラスト対策（オーナー指摘 2026-09-23）: テーマの --main/--on-main の組み合わせ次第では
   固定バーの短い文言が読みにくくなりうるため、ここだけは本文と同じ --ink/--surface の
   ペア（サイト全体で読める前提のペア＝WCAG AA 4.5:1 を満たす想定）で固定して塗る。 */
.mobile-cta .btn{background:var(--main);color:var(--on-main);border-color:var(--main)}
.mobile-cta .btn--ghost{background:var(--main);color:var(--on-main);border-color:var(--main)}
@media(min-width:900px){ .mobile-cta{display:none} }

/* ---------- 一覧・表 ---------- */
.prow{display:flex;gap:14px;align-items:baseline;justify-content:space-between;padding:13px 0;border-bottom:var(--rule-soft)}
.prow__n{flex:1 1 auto;min-width:0}
.prow__p{flex:0 0 auto;font-family:var(--font-heading);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.prow__note{display:block;font-size:11.5px;color:var(--ink2);line-height:1.7;margin-top:2px}
.menu-group+.menu-group{margin-top:48px}
.menu-group__name{margin-bottom:12px}
.menu-group__note{font-size:12px;color:var(--ink2);line-height:1.8;margin-top:10px}

.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;vertical-align:top;font-weight:400}
@media(min-width:900px){
  .tbl th,.tbl td{border-bottom:var(--rule-soft);padding:13px 0}
  .tbl th{width:32%;padding-right:16px;color:var(--ink2);font-size:12.5px}
}
@media(max-width:899px){
  .tbl th,.tbl td{display:block;padding:0;border:0}
  .tbl th{color:var(--ink2);font-size:12px;padding-top:14px}
  .tbl td{padding-bottom:14px;border-bottom:var(--rule-soft)}
}

.grid{display:grid;gap:14px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .grid{gap:22px}
}

/* features が短語のときはチップ、文のときは箇条書き（build.py が出し分ける）。
   文をチップの1行に流し込むと読点で折り返して読めなくなるため。 */
.bullets{margin-top:12px}
.bullets li{position:relative;padding-left:16px;line-height:1.95;font-size:13.5px;color:var(--ink2)}
.bullets li+li{margin-top:6px}
.bullets li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--accent)}

.chips{display:flex;flex-wrap:wrap;gap:8px 10px}
.chip{display:inline-flex;align-items:center;gap:6px;border:var(--rule);padding:6px 11px;font-size:12px;color:var(--ink2);border-radius:var(--chip-radius)}

.news{margin-top:12px}
.news li{display:flex;flex-wrap:wrap;gap:4px 14px;padding:9px 0;border-bottom:var(--rule-soft);font-size:12.5px}
.news time{color:var(--faint);font-variant-numeric:tabular-nums;flex:0 0 auto}

.faq dt{position:relative;padding:14px 0 0 24px;font-weight:700;font-size:13.5px;line-height:1.7}
.faq dt::before{content:"Q";position:absolute;left:0;top:14px;color:var(--accent);font-family:var(--font-heading);font-size:12px;font-weight:700}
.faq dd{position:relative;margin:6px 0 0;padding:0 0 14px 24px;border-bottom:var(--rule-soft);font-size:12.5px;color:var(--ink2);line-height:1.9}
.faq dd::before{content:"A";position:absolute;left:0;top:0;color:var(--faint);font-family:var(--font-heading);font-size:12px;font-weight:700}

/* ---------- フッター ---------- */
/* フッターは色面（--base）なので内側余白を十分に取る（2026-09-23 夜 オーナー指摘。旧 32px 40px） */
.site-footer{border-top:var(--rule);padding-block:48px 56px;background:var(--base)}
@media(min-width:900px){ .site-footer{padding-block:72px 80px} }
.site-footer__nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.site-footer__nav a{text-decoration:none;font-size:13px}
.demo-notice{font-size:11px;color:var(--faint);line-height:1.8;margin-top:20px}

/* ================= ヒーロー（lead_role で構造が変わる） ================= */
.hero{padding-block:32px 42px}
@media(min-width:900px){ .hero{padding-block:64px 92px} }
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media(min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:52px;align-items:center}
}
.hero__media{position:relative}
.hero__media img{width:100%;aspect-ratio:var(--hero-media-ar);object-fit:cover}
.hero__hours{display:block;font-size:12px;color:var(--ink2);line-height:1.8;margin-top:10px}
.hero__note{font-size:11.5px;color:var(--faint);line-height:1.8;margin-top:8px}

/* 金額主役（blanc）: ページで一番大きい文字が金額を含む一文 */
.hero--price .hero__grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){ .hero--price .hero__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)} }
.hero--price .hero__catch{font-size:clamp(27px,7.4vw,56px);line-height:1.3}
.hero--price .hero__amount{display:block;font-family:var(--font-heading);font-weight:700;
  font-size:clamp(34px,10vw,72px);line-height:1.1;letter-spacing:-.02em;color:var(--accent);
  font-variant-numeric:tabular-nums;margin-top:4px}

/* photo-full: 全幅の帯。ただし元画像の幅を超えて引き伸ばさない（超えると粗くなる）。
   帯の左右は --base で埋めるので、原寸が狭い店でも「中途半端に伸びた写真」にならない。 */
.hero--fullband{background:var(--base)}
.hero--fullband .hero__band{width:100%;max-width:var(--hero-band-max,var(--w-wide));margin-inline:auto}
.hero--fullband .hero__media img{width:100%}

/* split: 写真は添えるだけ。右カラムを広げすぎない */
@media(min-width:900px){
  .hero--split .hero__media{max-width:var(--hero-split-max,420px);margin-left:auto}
}

/* 写真主役（leads）: 写真が画面で一番大きい要素。見出しは h2 相当まで落とす */
.hero--photo{padding-block:10px 34px}
.hero--photo .hero__media{margin-block:0 14px}
/* スマホの電話ボタン到達性（qa_volume.py telFold・基準600px以内）向けの詰め。
   見出し書体の和文マスク（本ファイル冒頭の @font-face）を入れた副作用で、キャッチ文言の
   和文グリフがDela Gothic Oneより1文字あたり広くなる書体があり、折り返し行数が増えて
   ボタンが基準を超えることがある（with2006.jp実機で598px→627pxに悪化を確認）。
   文字を削らず、見出し〜リード〜ボタンの余白だけで吸収する。 */
.hero--photo .hero__point{margin-top:8px}
.hero--photo .btns{margin-top:14px}
/* object-position:center top はここでは採用していない（差し戻し）。モデル写真担当の依頼どおり
   試したが、rodeo の実写真（image07.jpg・頭上からの角度）で天井と後頭部だけが写り顔が
   完全に切れる回帰を実機確認したため（比較: op_compare.png）。既定の center center は
   同じ写真でも顔が見える。role=model のAI生成写真だけ上寄りにしたい場合は、build.py側で
   その画像だけに判別用クラス（例: is-model-photo）を振ってもらえれば、テンプレ側で
   `.hero--photo .hero__media img.is-model-photo{object-position:center top}` のように
   絞って対応できる（現状は判別する印がHTML側に無いため、全店一律の指定はできない）。 */
.hero--photo .hero__media img{aspect-ratio:16/9}
.hero--photo .hero__catch{font-size:clamp(20px,5vw,32px);line-height:1.45}
@media(min-width:900px){
  /* PCのファーストビュー: 写真＋キャッチ＋電話CTAが1画面（目安800px高）に収まるよう、
     写真の高さに上限（60〜70vhの下寄り）と余白を詰める（統括2026-09-23検品・
     work/rodeo/qa/fv/fv_1280.pngで実測、写真だけで697px＋見出し等で1067px＝
     1画面に収まっていなかった）。object-fit:cover のままなので歪まない。 */
  .hero--photo{padding-block:20px 32px}
  .hero--photo .hero__media{margin-block:0 18px}
  .hero--photo .hero__media img{max-height:58vh}
}

/* ---------- エディトリアル広告型 FV（設計書 §13.6・2026-09-23 夜 オーナー指示） ----------
   build.py render_hero_editorial() が出す。写真は文字の無い広告写真で、キャッチを重ねる
   「抜け」が構図に作ってある（スマホ用 fv_sp は上部・PC 用 fv_pc は textZone の側）。
   重ねる文字は build.py 既定では単色の帯（.ed__tape）に載せる。この店では下の「FV のタイポグラフィ」で
   見出しの帯を外し、写真の抜け＋薄いグラデーションで読ませる（実測値はそのブロックの注記）。
   帯の色は --surface/--ink（サイト全体の本文と同じ組＝AA 前提）、地域はその反転。--accent/--on-accent は\n   店によって 3:1 程度しか無い（rodeo 実測 3.17:1）ので小さい文字の帯には使わない。
   セレクタを .hero.hero--editorial で始めるのは、themes/*.css の .hero--photo 系の
   比率・余白指定（後から読み込まれる）より強くするため。 */
.hero.hero--editorial{padding:0;--ed-tape-bg:var(--surface);--ed-tape-ink:var(--ink)}
.is-dark .hero.hero--editorial{--ed-tape-bg:var(--dark);--ed-tape-ink:var(--on-dark)}
.hero.hero--editorial .ed{display:grid;grid-template-columns:minmax(0,1fr)}
.hero.hero--editorial .ed__media{grid-area:1/1;margin:0}
.hero.hero--editorial .ed__media picture{display:block}
.hero.hero--editorial .ed__media img{
  width:100%;height:auto;aspect-ratio:3/4;max-height:calc(100svh - 150px);
  object-fit:cover;object-position:50% 0;border-radius:0}
.hero.hero--editorial .ed__text{display:contents}
.hero.hero--editorial .ed__head{grid-area:1/1;align-self:start;position:relative;z-index:2;padding:30px 16px 0}
.hero.hero--editorial .ed__foot{grid-area:2/1;padding:16px 20px 30px}
.hero.hero--editorial .ed__tape{
  background:var(--ed-tape-bg);color:var(--ed-tape-ink);padding:.1em .38em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero.hero--editorial .ed__area{margin:0 0 6px;font-size:11.5px;line-height:2;letter-spacing:.06em;font-weight:700}
.hero.hero--editorial .ed__area .ed__tape{background:var(--ed-tape-ink);color:var(--ed-tape-bg);padding:.25em .6em}
.hero.hero--editorial .ed__catch{
  font-family:var(--font-heading);font-weight:var(--heading-weight);letter-spacing:var(--heading-track);
  font-size:clamp(19px,5.5vw,28px);line-height:1.66;max-width:16.5em;
  /* 「く。」だけが最終行に落ちる泣き別れを防ぐ（文節で折り返す。未対応ブラウザは通常の折り返し） */
  word-break:auto-phrase;text-wrap:pretty}
.hero.hero--editorial .ed__foot .btns{margin-top:0}
.hero.hero--editorial,.is-dark .hero.hero--editorial{border-bottom:0}  /* PC で 1280x800 に 1px はみ出さない */
.hero.hero--editorial .ed__foot .hero__point{margin-top:14px;font-size:14px;line-height:1.85;color:var(--ink2)}
.hero.hero--editorial .ed__foot .hero__hours,.hero.hero--editorial .ed__foot .hero__note{margin-top:8px}
/* スマホでは写真の外（地の色の上）に置くので帯は要らない */
.hero.hero--editorial .ed__foot .ed__tape{background:none;color:inherit;padding:0}
.is-dark .hero.hero--editorial .ed__foot .hero__point{color:var(--on-dark2)}
@media(min-width:900px){
  .hero.hero--editorial .ed{display:block;position:relative}
  .hero.hero--editorial .ed__media img{
    aspect-ratio:auto;height:clamp(520px,calc(100svh - 57px),780px);max-height:none;object-position:50% 30%}
  .hero.hero--editorial .ed__text{
    display:flex;flex-direction:column;justify-content:center;position:absolute;top:0;bottom:0;z-index:2;
    width:min(46%,560px);padding-block:48px}
  .hero.hero--ed-left .ed__text{left:0;padding-left:max(40px,calc((100vw - var(--w-wide)) / 2 + 20px))}
  .hero.hero--ed-right .ed__text{right:0;padding-right:max(40px,calc((100vw - var(--w-wide)) / 2 + 20px))}
  .hero.hero--editorial .ed__head{padding:0}
  .hero.hero--editorial .ed__catch{font-size:clamp(26px,2.6vw,38px);line-height:1.7;max-width:none}
  .hero.hero--editorial .ed__foot{padding:0;margin-top:26px;max-width:420px}
  .hero.hero--editorial .ed__foot .ed__tape{background:var(--ed-tape-bg);color:var(--ed-tape-ink);padding:.12em .45em}
  .hero.hero--editorial .ed__foot .hero__point{color:inherit;font-size:14.5px;line-height:2}
  .hero.hero--editorial .ed__foot .hero__hours{font-size:12.5px;line-height:2;color:inherit}
  /* 写真の上に置くボタンは必ず塗りつぶし（P08 の枠線だけの透明ボタンは写真の上で読めない） */
  .hero.hero--editorial .ed__foot .btn{background:var(--main);color:var(--on-main);border-color:var(--main)}
  .hero.hero--editorial .ed__foot .btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--surface)}
}

/* ---------- FV のタイポグラフィ（2026-09-23 オーナー指示「FV のテキストデザインを上げる」） ----------
   案B「縦組みの明朝 × イタリック欧文」を採用（比較: 案A 横組みのずらし／案C 長体ゴシック＋巨大アウトライン）。
   写真は変えない。build.py render_hero_editorial() がキャッチを 文(.ed__s1/.ed__s2)・句(.ed__c1/.ed__c2)・
   欧文(.ed__lat) に分けて出すので、ここで組み方だけを決める（文字列は原文のまま）。
   - 「未来の基本、」… Shippori Mincho B1 の極太を縦組みで左の抜け（葉陰の壁）に立てる。ページで一番大きい文字
   - 「FUTURE STANDERD。」… Playfair Display イタリックを焦げ琥珀で右上に2段。明朝の縦と欧文の横が直交する
   - 1文目「多賀城・高橋の美容室 RODEO HAIR。」… 字間を開いた小さな見出し＋琥珀の罫で雑誌の柱のように
   - 地域行 … 右端に縦組みの小さなラベル（罫つき）。スマホは写真右の壁、PC は左端
   可読性は帯を使わず、写真の抜け（明るい壁）＋ごく薄い生成りのグラデーション（文字の裏だけ）で担保する。
   実測（文字色 vs 文字の真下の画素・文字を消して撮影）: _report の数値を参照。 */
.hero.hero--editorial{--ed-ink:#241a14;--ed-amber:#8a4a14;--ed-rule:#b8782a}
.hero.hero--editorial .ed__head{align-self:stretch;padding:16px 16px 0;position:relative;color:var(--ed-ink)}
.hero.hero--editorial .ed__head .ed__tape,
.hero.hero--editorial .ed__area .ed__tape{background:none;padding:0;color:inherit}
.hero.hero--editorial .ed__head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(251,247,240,.72) 0,rgba(251,247,240,.5) 16%,rgba(251,247,240,0) 30%),
             linear-gradient(180deg,rgba(251,247,240,.5) 0,rgba(251,247,240,0) 28%)}
.hero.hero--editorial .ed__catch{max-width:none;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;
  font-family:var(--font-body);font-weight:500;letter-spacing:0;line-height:1;color:var(--ed-ink);word-break:normal;text-wrap:wrap}
.hero.hero--editorial .ed__s1{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.22em;line-height:1.6}
.hero.hero--editorial .ed__s1::after{content:"";flex:1 1 auto;height:1px;background:var(--ed-rule);opacity:.8}
.hero.hero--editorial .ed__lat{font-family:"Playfair Display",Georgia,serif;font-style:italic}
.hero.hero--editorial .ed__s1 .ed__lat{letter-spacing:.08em;font-size:1.12em}
.hero.hero--editorial .ed__s2{display:contents}
.hero.hero--editorial .ed__s2 .ed__c1{grid-column:1;grid-row:2;writing-mode:vertical-rl;
  font-family:"Shippori Mincho B1",var(--font-heading);font-weight:800;
  font-size:clamp(40px,12.6vw,50px);line-height:1;letter-spacing:.04em;margin-top:18px}
.hero.hero--editorial .ed__s2 .ed__c2{grid-column:2;grid-row:2;justify-self:end;align-self:start;text-align:right;margin-top:22px;
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(30px,9.8vw,40px);line-height:.95;
  color:var(--ed-amber);max-width:5.6em;overflow-wrap:normal;word-break:keep-all}
.hero.hero--editorial .ed__area{position:absolute;right:14px;top:170px;margin:0;writing-mode:vertical-rl;white-space:nowrap;
  font-size:10.5px;letter-spacing:.3em;font-weight:500;line-height:1;color:var(--ed-ink)}
.hero.hero--editorial .ed__area .ed__area-b{margin-top:.8em;letter-spacing:.14em}
.hero.hero--editorial .ed__area::before{content:"";display:block;width:1px;height:30px;margin:0 auto 12px;background:var(--ed-rule)}
@media(min-width:900px){
  /* PC: 縦組みの「未来の基本、」を左の柱に、欧文を右上、電話ボタン群を右下に置く見開きの組み */
  .hero.hero--editorial .ed__head::before{display:none}
  .hero.hero--editorial .ed__text{width:min(54%,700px);justify-content:flex-start;padding-top:72px}
  .hero.hero--editorial .ed__head{padding:0;position:static}
  .hero.hero--editorial .ed__catch{column-gap:40px}
  .hero.hero--editorial .ed__s1{font-size:12.5px}
  .hero.hero--editorial .ed__s2 .ed__c1{font-size:80px;margin-top:30px}
  .hero.hero--editorial .ed__s2 .ed__c2{font-size:clamp(52px,4.9vw,68px);margin-top:44px;justify-self:start;text-align:left;max-width:6em}
  .hero.hero--editorial .ed__area{left:calc(max(40px,calc((100vw - var(--w-wide)) / 2 + 20px)) - 26px);right:auto;top:74px;font-size:11px}
  .hero.hero--editorial .ed__foot{position:absolute;bottom:64px;margin:0;width:400px;
    left:calc(max(40px,calc((100vw - var(--w-wide)) / 2 + 20px)) + 80px + 40px)}
  .hero.hero--editorial .ed__foot .ed__tape{background:none;color:var(--ed-ink);padding:0}
  .hero.hero--editorial .ed__foot .hero__point,.hero.hero--editorial .ed__foot .hero__hours{color:var(--ed-ink)}
}

/* 文字主役（idol）: キャッチが最大。写真は右に小さく添えるだけ */
@media(min-width:900px){ .hero--text .hero__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)} }
.hero--text .hero__catch{font-size:clamp(29px,8.4vw,62px);line-height:1.22}

/* 変化主役: キャッチ＋仕上がり1枚を横帯で */
.hero--change .hero__catch{font-size:clamp(26px,7vw,50px);line-height:1.28}
.hero--change .hero__media img{aspect-ratio:3/4}
@media(min-width:900px){ .hero--change .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.52fr)} }
.hero--change .hero__tag{display:inline-block;margin-top:10px;font-size:11.5px;font-weight:700;
  border:1px solid var(--accent);color:var(--accent);padding:3px 9px;border-radius:var(--chip-radius)}

/* 写真が無いとき（type 型）: 文字組みだけで成立させる */
.hero--notext-media .hero__grid{grid-template-columns:minmax(0,1fr)}

/* 下層ページの見出し帯 */
.phead{padding-block:28px 22px;border-bottom:var(--rule)}
@media(min-width:900px){ .phead{padding-block:52px 38px} }
.phead__label{font-size:11.5px;letter-spacing:.14em;color:var(--faint);margin-bottom:8px}

/* ================= セクション部品 ================= */

/* クーポン（1件を大きく、残りを小さく） */
.cpns{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:900px){
  .cpns{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .cpns>.cpn--lead{grid-column:1 / -1}
}
.cpn{border:var(--rule);padding:18px 16px;border-radius:var(--radius)}
.cpn--lead{border:2px solid var(--main);padding:24px 20px}
@media(min-width:900px){ .cpn--lead{padding:36px 32px} }
.cpn__tag{display:inline-block;border:1px solid var(--accent);color:var(--accent);
  font-size:11px;font-weight:700;padding:2px 9px;margin-bottom:12px;border-radius:var(--chip-radius)}
.cpn__name{font-family:var(--font-heading);font-size:13.5px;line-height:1.7;font-weight:700}
.cpn--lead .cpn__name{font-size:clamp(15px,3.8vw,20px)}
.cpn__cond{font-size:11.5px;color:var(--ink2);line-height:1.75;margin-top:10px}
.cpn .num{color:var(--accent)}

/* スタイル写真（横長1枚＋サムネ最大5枚） */
.style-lead img{width:100%;aspect-ratio:21/9;object-fit:cover}
@media(max-width:559px){ .style-lead img{aspect-ratio:16/10} }
.style-card img{width:100%;aspect-ratio:3/4;object-fit:cover}
.style-card figcaption,.photo-card figcaption,.style-lead figcaption{
  font-size:12px;color:var(--ink2);line-height:1.8;margin-top:8px}

/* 雰囲気写真 */
.photo-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:900px){ .photo-band{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} }
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:900px){ .gallery{gap:22px} }
.photo-card img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* この店にある技術／あるもの（番号つきの行。カードを並べない） */
.tech{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;align-items:baseline;
  padding-block:22px;border-bottom:var(--rule-soft)}
@media(min-width:900px){ .tech{gap:14px 28px;padding-block:32px} }
.tech__no{font-family:var(--font-heading);font-size:clamp(21px,5.6vw,32px);font-weight:700;
  line-height:1.1;color:var(--accent);font-variant-numeric:tabular-nums}
.tech__body{margin-top:8px;line-height:1.95}

/* 読ませる帯 */
.read p{font-size:clamp(15px,3.8vw,17px);line-height:2.05;margin-top:20px}

/* スタッフ（代表を大きく、残りを細い行で） */
.staff-lead{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media(min-width:900px){
  .staff-lead{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:36px;align-items:start}
}
.staff-lead> :only-child{grid-column:1 / -1;min-width:0}
.staff-lead img{width:100%;aspect-ratio:3/4;object-fit:cover}
.staff-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 0;border-bottom:var(--rule-soft)}
.staff-row--noimg{grid-template-columns:minmax(0,1fr)}
.staff-row img{width:100%;aspect-ratio:3/4;object-fit:cover}
.staff-card{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.staff-card img{width:100%;aspect-ratio:3/4;object-fit:cover}
.staff-name{font-family:var(--font-heading);font-weight:700}
.staff-role{font-size:12px;color:var(--ink2);line-height:1.8}
.staff-comment{line-height:1.95;margin-top:8px}

/* LP: できること（スマホ2列・PCは左右交互の大きな行） */
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center;
  padding-block:18px;border-bottom:var(--rule-soft)}
.svc img{width:100%;aspect-ratio:4/3;object-fit:cover}
.svc__tx{min-width:0}
@media(min-width:900px){
  .svc{display:flex;flex-direction:row;align-items:center;gap:44px;padding-block:34px}
  .svc--rev{flex-direction:row-reverse}
  .svc__ph{width:420px;flex:0 0 auto}
  .svc__tx{flex:1 1 auto}
}

/* LP: いま受け付けていること（1件を大きく、残りを行で） */
.offer{border:2px solid var(--main);padding:24px 18px;border-radius:var(--radius)}
@media(min-width:900px){ .offer{padding:44px 40px} }
.offer__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:14px}
.offer__row .num{color:var(--accent)}
.strike{text-decoration:line-through;color:var(--faint);font-size:15px}
.subofr>li{padding:18px 0;border-bottom:var(--rule-soft)}

/* 告知バナー（求人など） */
.banner{border:var(--rule);padding:22px 18px;border-radius:var(--radius)}
@media(min-width:900px){
  .banner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:34px 36px}
  .banner__tx{flex:1 1 auto;min-width:0}
  .banner__act{flex:0 0 auto;margin-top:0}
}
.banner__act{margin-top:16px}
.banner .btn{white-space:nowrap}

/* 求人: 育成の流れ */
.curr>li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px 14px;padding:16px 0;border-bottom:var(--rule-soft)}
.curr__y{font-family:var(--font-heading);font-weight:700;color:var(--accent)}

/* 最終CTA（ページ内で唯一の中央寄せ） */
.endcta{text-align:center}
.endcta .btns{align-items:stretch;text-align:center;max-width:480px;margin-inline:auto}
.endcta .wrap--narrow p{margin-inline:auto}

/* 地図 */
.map{width:100%;aspect-ratio:16/9;background:var(--box)}
@media(max-width:899px){ .map{aspect-ratio:4/3} }

/* フルブリードの差し込み画像（生成モデル写真 cut=bleed1/2・設計書 §13.7）。
   セクション間のブレイク。幅は親（main）いっぱい＝100vw 相当だが 100vw は使わない
   （スクロールバー幅ぶん横スクロールが出るため）。写真は帯より 24% 高く置き、
   ずらしても端が見えない。パララックスは background-attachment:fixed に依存しない
   （iOS Safari で効かず、拡大されて壊れる）。
   1) CSS scroll-driven animation（animation-timeline:view()）が使える環境は CSS だけで動かす
   2) 使えない環境は nav.js が rAF で --bleed-y を書く（同じ量だけずらす）
   3) prefers-reduced-motion: reduce では一切動かさない（静止した帯として成立する） */
.bleed{position:relative;margin:0;overflow:hidden;background:var(--base);
  height:320px}
@media(min-width:900px){ .bleed{height:420px} }
/* 統括差し戻し（Astra r1 指摘1 は撮影側の遅延読み込み未発火による誤認。パララックスはオーナー指示なので戻す） */
.bleed__in{position:absolute;inset:-12% 0;will-change:transform;
  transform:translate3d(0,var(--bleed-y,0px),0)}
.bleed__in img{width:100%;height:100%;object-fit:cover;object-position:var(--bleed-pos,50% 38%)}
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .bleed{view-timeline-name:--bleed;view-timeline-axis:block}
    .bleed__in{animation:bleed-drift linear both;animation-timeline:--bleed;
      animation-range:cover 0% cover 100%}
  }
}
@keyframes bleed-drift{from{transform:translate3d(0,-9%,0)}to{transform:translate3d(0,9%,0)}}
@media(prefers-reduced-motion:reduce){ .bleed__in{transform:none!important;animation:none!important} }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:hover{transform:none}
}

/* ================= 動きは2種だけ（フェードイン／ホバー浮き） ================= */
/* JS が動く環境でだけ隠す（head の1行で html.js を付ける）。
   JS 無効・reduced-motion では最初から見えている＝読めなくならない。 */
.fx,.js .fx{opacity:1;transform:none}


/* ================= 出現の動き（2026-09-23 オーナー指示・設計書 03b §13.10） =================
   仕組みは assets/nav.js の「出現の動き」。ここは見た目だけ。
   - 「出る前」の状態は html.mo-on の下にしか書かない（mo-on は nav.js が自分で付ける）。
     JS が無い・落ちた・reduced-motion・手動停止 のときは何も隠れない（.js .fx のような
     「JS がある前提で先に隠す」書き方は禁止。make_codex_task.py --verify が赤にする）。
   - 速さ・距離・イージング・時間差は下の --mo-* で店ごとに調律する（店専用テンプレの末尾で上書き）。
   - background-attachment:fixed は使わない。動かすのは transform / opacity / clip-path / filter だけ。 */
:root{
  --mo-ease:cubic-bezier(.16,1,.3,1);      /* 立ち上がりは速く、最後は長く減速（expo-out） */
  --mo-dur:1s;                              /* 文字 */
  --mo-y:14px;                              /* 文字の移動距離（短く） */
  --mo-blur:0px;                            /* 文字のぼかし（柔らかい光の店だけ使う） */
  --mo-head-dur:1.1s;                       /* 見出しのマスクからの立ち上がり */
  --mo-img-dur:1.5s;                        /* 写真のマスクリビール */
  --mo-img-scale:1.06;                      /* 写真のゆるいスケール（1.06→1） */
  --mo-img-dir:to top;                      /* 写真の開く向き（to top＝下から / to bottom＝上から） */
  --mo-img-filter:none;                     /* 写真の明るさの立ち上がり（夜の店だけ使う） */
  --mo-rule-dur:1.4s;                       /* 罫線が伸びる */
  --mo-stagger:90;                          /* 同時に入った要素の時間差（ms・数値だけ） */
}
.mo-frame{overflow:hidden}
.mo-on .mo{transition-delay:var(--mo-d,0ms)}
/* 文字: ふわっと・短い距離 */
.mo-on .mo--text{opacity:0;transform:translate3d(0,var(--mo-y),0);filter:blur(var(--mo-blur));
  transition-property:opacity,transform,filter;transition-duration:var(--mo-dur);transition-timing-function:var(--mo-ease)}
/* マスクは clip-path ではなく mask-image で作る（2026-09-23 実測: clip-path で全部隠すと
   IntersectionObserver も loading="lazy" も「画面に入っていない」と判定し、写真が読み込まれず・出現もしない）。
   マスクの位置は @property で登録した数値を遷移させる（未対応ブラウザでは遷移せず即表示＝見えなくはならない）。 */
@property --mo-lift{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --mo-open{syntax:"<percentage>";inherits:false;initial-value:120%}
/* 見出し: その場に固定したマスクの下から立ち上がる（下へずらした量と同じだけ下端を消す＝マスクが動かない） */
.mo-on .mo--head{--mo-lift:100%;transform:translate3d(0,var(--mo-lift),0);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mo-lift)),transparent calc(100% - var(--mo-lift)));
  mask-image:linear-gradient(to bottom,#000 calc(100% - var(--mo-lift)),transparent calc(100% - var(--mo-lift)));
  transition:--mo-lift var(--mo-head-dur) var(--mo-ease) var(--mo-d,0ms)}
.mo-on .mo--head.mo-in{--mo-lift:0%}
/* 写真: 柔らかい縁のマスクで開きながら、ゆっくり等倍へ（開く向きは --mo-img-dir） */
.mo-on .mo--img{--mo-open:0%;transform:scale(var(--mo-img-scale));filter:var(--mo-img-filter);
  -webkit-mask-image:linear-gradient(var(--mo-img-dir),#000 calc(var(--mo-open) - 18%),transparent var(--mo-open));
  mask-image:linear-gradient(var(--mo-img-dir),#000 calc(var(--mo-open) - 18%),transparent var(--mo-open));
  transition:--mo-open var(--mo-img-dur) var(--mo-img-ease,var(--mo-ease)) var(--mo-d,0ms),
    transform calc(var(--mo-img-dur) * 1.6) var(--mo-ease) var(--mo-d,0ms),
    filter calc(var(--mo-img-dur) * 1.2) var(--mo-img-ease,var(--mo-ease)) var(--mo-d,0ms)}
.mo-on .mo--img.mo-in{--mo-open:120%}
.mo-on .mo.mo-in{opacity:1;transform:none;filter:none}
/* 細い罫線が伸びる（.act--line の上罫を左から描く） */
.mo-on .mo-line{position:relative;border-top-color:transparent}
.mo-on .mo-line::before{content:"";position:absolute;left:0;right:0;top:-1px;border-top:var(--rule);
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--mo-rule-dur) var(--mo-ease) .1s}
.mo-on .mo-line.mo-in::before{transform:scaleX(1)}
/* 下層ページの見出し（JS 不要・CSS だけ。LCP を遅らせないよう不透明度は触らず、移動だけ） */
@media (prefers-reduced-motion:no-preference){
  .phead h1,.phead .phead__label{animation:mo-lift var(--mo-head-dur) var(--mo-ease) both}
  .phead .phead__label{animation-delay:.05s}
  .phead h1{animation-delay:.12s}
}
@keyframes mo-lift{from{transform:translate3d(0,10px,0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .mo-on .mo,.mo-on .mo-line::before{opacity:1!important;transform:none!important;filter:none!important;-webkit-mask-image:none!important;mask-image:none!important;transition:none!important}
}
@media print{ .mo-on .mo{opacity:1!important;transform:none!important;filter:none!important;-webkit-mask-image:none!important;mask-image:none!important} }

/* コンセプトページの写真（build.py render_concept_editorial・設計書 03b §13.9）。
   モデル写真を本文の段落の間に組む。1枚目（wide）は読ませる帯からはみ出して幅広く、
   2枚目（side）は PC で本文を回り込ませる。被写体は横の中央4割に収めて生成しているので、
   スマホの縦長トリミングでも顔が切れない。 */
.cphoto{margin:40px 0 8px}
.cphoto__frame{background:transparent}
.cphoto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.cphoto--wide{margin-inline:calc(50% - 50vw)}   /* スマホは画面幅いっぱい（読ませる帯の左右余白を越える） */
.cphoto--wide .cphoto__frame{aspect-ratio:4/5}
.cphoto--side{width:74%;margin-left:auto}
.cphoto--side .cphoto__frame{aspect-ratio:3/4}
.concept-body .read::after{content:"";display:table;clear:both}
/* 写真を組んだコンセプトページだけ、1段落目をリードとして一段大きく（写真の無い店は :has が当たらず不変） */
.concept-body .read:has(.cphoto)>p:first-child{font-size:clamp(17px,4.6vw,21px);line-height:1.95;margin-top:0}
@media(min-width:900px){
  .cphoto{margin:64px 0 16px}
  .cphoto--wide{width:min(1080px,calc(100vw - 80px));margin-left:50%;margin-right:0;transform:translateX(-50%)}
  .cphoto--wide .cphoto__frame{aspect-ratio:21/9}
  .cphoto--side{float:right;width:42%;margin:10px min(-120px,calc((640px - 100vw) / 2 + 40px)) 24px 44px}
  .cphoto--side .cphoto__frame{aspect-ratio:4/5}
}
/* ---------- この店の動き（rodeo: 柔らかい光・生成り。2026-09-23） ----------
   朝の光がゆっくり満ちるように: 長い減速（expo-out）・短い距離・文字はわずかなぼかしから焦点が合う・
   写真は上から光が落ちるように開き、白っぽい光が落ち着いていく。派手な移動・回転・跳ねは使わない。 */
:root{
  --mo-ease:cubic-bezier(.19,1,.22,1);
  --mo-dur:1.4s;--mo-y:10px;--mo-blur:5px;
  --mo-head-dur:1.3s;
  --mo-img-dur:1.9s;--mo-img-scale:1.07;--mo-img-dir:to bottom;
  --mo-img-filter:brightness(1.12) saturate(.88);
  --mo-rule-dur:1.8s;--mo-stagger:110;
}
/* FV の初回表示: 写真は最初から見えている（LCP を遅らせない）。ゆっくり等倍へ寄りながら光が落ち着き、
   文字は 写真 → 小見出しと罫線 → 縦組みのキャッチ（上から筆で書くように） → 欧文 → 地域 の順に立ち上がる。
   電話ボタン（.ed__foot）は動かさない。CSS だけ（JS に依存しない）・約1.8秒で完了。 */
@media (prefers-reduced-motion:no-preference){
  .hero.hero--editorial .ed__media{overflow:hidden}
  .hero.hero--editorial .ed__media img{animation:rodeo-fv-photo 2.8s cubic-bezier(.19,1,.22,1) both}
  .hero.hero--editorial .ed__s1{animation:rodeo-fv-rise 1.2s var(--mo-ease) .2s both}
  .hero.hero--editorial .ed__s1::after{transform-origin:0 50%;animation:rodeo-fv-rule 1.6s var(--mo-ease) .45s both}
  .hero.hero--editorial .ed__s2 .ed__c1{animation:rodeo-fv-brush 1.5s cubic-bezier(.65,.05,.36,1) .35s both}
  .hero.hero--editorial .ed__s2 .ed__c2{animation:rodeo-fv-rise 1.4s var(--mo-ease) .75s both}
  .hero.hero--editorial .ed__area{animation:rodeo-fv-fade 1.4s ease 1s both}
  .hero.hero--editorial .ed__area::before{transform-origin:50% 0;animation:rodeo-fv-vrule 1.2s var(--mo-ease) 1s both}
}
@keyframes rodeo-fv-photo{from{transform:scale(1.05);filter:brightness(1.1) saturate(.9)}to{transform:none;filter:none}}
@keyframes rodeo-fv-rise{from{opacity:0;transform:translate3d(0,12px,0);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes rodeo-fv-brush{from{clip-path:inset(0 -30% 100% -30%)}to{clip-path:inset(0 -30% -10% -30%)}}
@keyframes rodeo-fv-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rodeo-fv-vrule{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rodeo-fv-fade{from{opacity:0}to{opacity:1}}