@charset "UTF-8";
/* =====================================================================
   BAGZY 公式サイト v2 — 共通スタイル（トップ＋4 店舗ページ）
   方向：ファッション誌の誌面。生成り・墨・金＋暖色の 3 色＋1。角丸・影なし。
   スマホ 390px 基準 → 768px → 1024px。

   ■ 色の役割（変えない）
     金のベタ   = 予約（.btn-book）だけ。「金を見たら予約」
     墨のベタ   = ページ内移動・店舗を見る・地図を開く（.btn-go）
     細い枠線   = Instagram・電話（.btn-line / .btn-ig）

   ■ 部品の一覧（この順でファイルに並ぶ）
     00 土台        :root の変数 / .wrap / .sec（.sec--warm .sec--ink .sec--tight）/ .nb / .note / .reveal
     01 ボタン      .btn ＋ .btn-book（金・予約）/ .btn-go（墨）/ .btn-line（枠）/ .btn-ig（Instagram）
                    大きさ .btn--sm（ヘッダー用 40px）/ .btn--block（横いっぱい）/ .btn-go--down（下向き矢印）
     02 ヘッダー    .hd > .hd-in > .hd-brand（.hd-mark ＋ .hd-shop）/ .hd-nav
     03 見出し      .head > .head-en（大きな欧文の添え字）/ .head-ja（h2）/ .head-lead
     04 流れる帯    .strip > .strip-track > .strip-item（.is-wide）> .strip-ph > img（.ph-s1 … .ph-s25）＋ figcaption
     05 実績の帯    .proof > .proof-tgc ＋ .proof-hpb（.proof-score / .note / ボタン）
     06 学生特典    札 .ticket（トップ最初の画面）/ 大枠 .student（トップ）/ 小枠 .offerbox（店舗）
                    共通の文字 .offer-tag .offer-pre .offer-big .offer-cond / 手順 .steps
     07 トップ      .hero（.hero-mast .hero-title .hero-vert .hero-lead .hero-cta）
                    4 店 .shops > .shop（.shop-photo .shop-no .shop-name .shop-catch .shop-desc .shop-addr .shop-actions）
                    ピックアップ .pickup-list / 締め .closing（店舗ページは .closing--ink）
     08 店舗        最初の画面 .shophero（.shophero-img .shophero-en .shophero-eyebrow .shophero-title .shophero-lead .shophero-stats .shophero-cta）
                    　.shophero-stats = 最初の画面の数字（中間・八幡・黒崎共通。白・本文と同じ書体で 1 行ずつ。li の中を span 2 つに分けてもよい）
                    基本情報 .facts > .fact ＋ .dl（dt/dd の表。店舗情報でも使う）
                    強み .reasons > .reason / 流れ .flow > .flow-step
                    スタッフ .staff（.staff-photo .staff-head .staff-body .staff-badge .staff-role .staff-name .staff-en .staff-meta .staff-motto .staff-bio .tags）
                    料金 .menu > .menu-row（.menu-tag .menu-line .menu-name .menu-price .menu-sub .menu-desc）
                    声 .voices > .voice / FAQ .faq > details.faq-item
                    他店 .others > .other / 店舗情報 .storeinfo ＋ 地図 .map（.map-cover）
     09 フッター    .ft（.ft-mark .ft-cols .ft-col .ft-notes .ft-copy）
     10 固定の帯    .dock（スマホだけ。data-hide-on="#id" でその欄が画面の中ほどにある間は隠す。
                    data-hide-while=".shophero-cta" でその部品が少しでも見えている間は隠す＝最初の画面でボタンを二重にしない）

     11 圧縮版      （2026-10-12 追加。ファイルの末尾。店舗ページを半分の長さにするための部品）
                    body.compact      <body class="compact has-dock"> で .sec .head .menu .voice .faq .other .dl .ft などの余白と文字を詰める
                                      （料金は名前と価格が 1 行になる。HTML は従来の .menu-row のまま）
                    特徴 .feats > .feat（.feat-no .feat-title .feat-text）  ＝旧「○○店について」＋「強み」。3〜4 点
                    要点 .points > li  ＝その店だけの売りの欄で、短い文の下に置く 3 つまでの箇条書き
                    実績の細い帯 .proofbar > .wrap > .proofbar-lines（.proofbar-line ×2）＋ .note  ＝特徴の欄の直後
                    短いスタイリスト札 .stfs > .stf（.stf-photo .stf-main（.stf-badge .stf-name .stf-role .tags）.stf-word）
                    たたむ部品 details.more > summary（.more-open ／ .more-close）＋ .more-body
                                      声は <div class="more-body voices">、FAQ は <div class="more-body faq">、表などは .more-body だけ
                    .sec--after-tight ＝学生特典（.sec--tight）の直後の欄。上の余白を詰める
                    .ft-col--wide     ＝フッターの列を横いっぱいにし、リンクを 2 列に（スマホ）
                    ほかの店 .other   ＝ figure.other-photo ＋ div.other-body（.other-name .other-catch）＋ span.other-more の 3 つを並べる

   ■ 他店ページを組むとき
     kokura/index.html を写し、文言と画像だけ差し替える。店ごとの色は足さない。
     現行ページにしか無い欄（中間の almo cafe、八幡のショート/ボブ、黒崎の歴史）は
     .sec ＋ .head ＋ .reasons（または .prose）で「強み」の直後に置く。
   ===================================================================== */

/* ---------- 00 土台 ---------- */
:root{
  --paper:#fbf8f3; --ink:#1a1a1a; --gold:#c9a96e; --gold-deep:#a8884a; --warm:#efe6d4;
  --ink-2:rgba(26,26,26,.76); --rule:rgba(26,26,26,.2); --rule-gold:rgba(201,169,110,.75);
  --on-ink-2:rgba(255,255,255,.78);
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  --en:"Cormorant Garamond","Times New Roman",serif;
  --gutter:20px; --maxw:1200px; --hd:56px; --strip-h:300px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.9;letter-spacing:.03em;font-feature-settings:"palt" 1;line-break:strict;overflow-wrap:anywhere;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
[hidden]{display:none!important}
[id]{scroll-margin-top:calc(var(--hd) + 12px)}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.sec--ink :focus-visible,.hd :focus-visible,.ft :focus-visible,.shophero :focus-visible{outline-color:var(--gold)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:72px 0}
.sec--tight{padding:48px 0}
.sec.sec--flush{padding-bottom:0}
.sec--warm{background:var(--warm)}
.sec--ink{background:var(--ink);color:#fff}
.sec--rule{border-top:1px solid var(--ink)}
.nb{display:inline-block}
/* 行末の整え：見出し級は行の長さをそろえ、本文は 1〜2 文字だけの行を作らない（文言は変えず、切れ目は .nb で指定） */
p,li,dd,figcaption{text-wrap:pretty}
.faq-item summary,.head-ja,.reason-title,.flow-title,.staff-motto,.menu-name,.closing-title,.shop-catch,.shophero-title,.storeinfo-name{text-wrap:balance;word-break:auto-phrase}
.note{font-size:12px;line-height:1.8;color:var(--ink-2);padding-left:1em;text-indent:-1em}
.sec--ink .note,.ft .note{color:var(--on-ink-2)}
.center{text-align:center}

/* スクロールでの出現（JS が動いたときだけ隠す。動かなければ最初から全部見える） */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- 01 ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:6px 28px;border:1px solid transparent;border-radius:0;font-family:var(--sans);font-weight:700;font-size:15px;line-height:1.3;letter-spacing:.16em;text-align:center;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.btn-book{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-book:hover{background:#dcc08a;border-color:#dcc08a}
.btn-go{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-go:hover{background:#3a3a3a;border-color:#3a3a3a}
.btn-go--down::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink);font-weight:500}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-ig{background:transparent;color:var(--ink);border-color:var(--ink);font-family:var(--en);font-weight:500;font-size:19px;letter-spacing:.1em;min-height:48px}
.btn-ig:hover{background:var(--ink);color:#fff}
.sec--ink .btn-line,.sec--ink .btn-ig,.shophero .btn-ig,.hd .btn-ig{color:#fff;border-color:rgba(255,255,255,.7)}
.sec--ink .btn-line:hover,.sec--ink .btn-ig:hover,.shophero .btn-ig:hover,.hd .btn-ig:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--sm{min-height:40px;padding:4px 13px;font-size:13px;letter-spacing:.1em;position:relative;white-space:nowrap}
.btn--sm::before{content:"";position:absolute;inset:-4px 0}/* タップ領域を 48px に広げる */
.btn-ig.btn--sm{font-size:15.5px;padding:4px 9px;letter-spacing:.06em}
.btn--block{display:flex;width:100%}

/* ---------- 02 ヘッダー ---------- */
.hd{position:sticky;top:0;z-index:100;background:var(--ink);color:#fff;border-bottom:1px solid var(--rule-gold)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:10px;height:var(--hd);max-width:var(--maxw);margin:0 auto;padding:0 16px}
.hd-brand{display:flex;align-items:center;min-height:44px;flex:none;white-space:nowrap}
.hd-mark{font-family:var(--en);font-weight:600;font-size:21px;line-height:1;letter-spacing:.2em;margin-right:-.2em}
.hd-shop{font-family:var(--en);font-weight:600;font-size:11px;line-height:1;letter-spacing:.12em;color:var(--gold);padding-left:8px;margin-left:10px;border-left:1px solid var(--rule-gold);white-space:nowrap}
.hd-nav{display:flex;align-items:center;gap:5px;flex:none}
.hd-link{display:none}

/* ---------- 03 見出し ---------- */
.head{margin-bottom:40px}
.head-en{font-family:var(--en);font-style:italic;font-weight:500;font-size:64px;line-height:.9;letter-spacing:-.01em;color:var(--gold-deep);margin-left:-.04em}
.head-ja{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.55;letter-spacing:.08em;margin-top:10px}
.head-lead{margin-top:14px;color:var(--ink-2);max-width:38em}
.sec--ink .head-en{color:var(--gold)}
.sec--ink .head-lead{color:var(--on-ink-2)}

/* ---------- 04 流れる帯（右から左へ） ----------
   .strip-track は同じ 8 枚を 2 回並べ、-50% まで動かして継ぎ目なく回す。 */
.strip{overflow:hidden}
.strip-track{display:flex;width:max-content;animation:strip-flow 60s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-item{flex:none;margin:0 4px 0 0;width:calc(var(--strip-h) * .75)}
.strip-item.is-wide{width:calc(var(--strip-h) * 1.3333)}
.strip-ph{display:block;height:var(--strip-h);overflow:hidden;background:var(--warm)}
.strip-ph img{width:100%;height:100%;object-fit:cover}
.strip-item figcaption{padding:10px 2px 0;font-family:var(--serif);font-size:12.5px;line-height:1.6;letter-spacing:.06em;color:var(--ink-2)}
@keyframes strip-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 写真ごとの切り位置（現行サイトの指定を引き継ぐ。男性の写真 s1・s25 が見切れないように） */
.ph-s22{object-position:50% 30%}
.ph-s25{object-position:50% 20%;object-view-box:inset(1.5% 2% 0 0)}
@supports not (object-view-box:inset(0)){.ph-s25{transform:scale(1.04);transform-origin:0 100%}}
.ph-s21{object-position:50% 35%}
.ph-s1{object-position:50% 10%}
.ph-s7{object-position:50% 15%}
.ph-s15{object-position:50% 40%}
.ph-s9{object-position:50% 0%}

/* ---------- 05 実績の帯 ---------- */
.proof{display:grid;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.proof-tgc{background:var(--ink);color:#fff;padding:44px var(--gutter) 46px}
.proof-tgc p{font-family:var(--serif);font-weight:600;font-size:clamp(24px,6.6vw,30px);line-height:1.6;letter-spacing:.06em}
.proof-tgc p span{display:block}
.proof-tgc::before{content:"";display:block;width:56px;height:1px;background:var(--gold);margin-bottom:22px}
.proof-hpb{padding:34px var(--gutter) 40px;display:flex;flex-direction:column;gap:14px}
.proof-score{font-family:var(--serif);font-weight:600;font-size:clamp(24px,6.6vw,30px);line-height:1.5;letter-spacing:.06em}
.proof-hpb .btn{margin-top:10px}

/* ---------- 06 学生特典 ---------- */
.offer-tag{display:inline-block;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:700;font-size:13px;line-height:1;letter-spacing:.3em;padding:9px 10px 9px 14px}
.offer-pre{display:block;font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.5;letter-spacing:.08em;margin-top:18px}
.offer-big{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(44px,13.4vw,60px);line-height:1.25;letter-spacing:.01em;white-space:nowrap;margin-top:2px}
.offer-cond{margin-top:18px;font-size:14px;line-height:1.9;color:var(--ink-2)}
.offer-cond strong{color:var(--ink);font-weight:700}
.steps{counter-reset:step;border-top:1px solid var(--ink)}
.steps li{counter-increment:step;display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.6;letter-spacing:.06em}
.steps li::before{content:counter(step);font-family:var(--en);font-style:italic;font-weight:500;font-size:30px;line-height:1;color:var(--gold-deep);flex:none;width:.7em}

/* 札（トップ最初の画面） */
.ticket{display:flex;align-items:stretch;background:var(--warm);border:1px solid var(--ink);color:var(--ink);transition:background-color .25s}
.ticket:hover{background:#e7dbc3}
.ticket-tag{flex:none;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-weight:700;font-size:13px;letter-spacing:.3em;writing-mode:vertical-rl;padding:12px 11px 9px}
.ticket-text{flex:1;min-width:0;padding:13px 14px 14px 16px;font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.55;letter-spacing:.04em}
.ticket-label{display:block;font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.24em;margin-bottom:2px}
.ticket-arrow{flex:none;align-self:center;width:8px;height:8px;margin:0 18px 4px 0;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg)}

/* 大枠（トップ #student） */
.student{background:var(--warm);padding:64px 0 60px;border-top:1px solid var(--rule-gold);border-bottom:1px solid var(--rule-gold)}
.student-kicker{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.student-kicker .en{font-family:var(--en);font-style:italic;font-weight:500;font-size:44px;line-height:.9;color:var(--gold-deep)}
.student-kicker .ja{font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.3em}
.student-side{margin-top:34px;display:flex;flex-direction:column;gap:22px}

/* 小枠（店舗ページ） */
.offerbox{background:var(--warm);border:1px solid var(--ink);padding:28px 22px 26px}
.offerbox .offer-label{font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.3em;margin-bottom:14px}
.offerbox .offer-pre{font-size:19px;margin-top:14px}
.offerbox .offer-big{font-size:clamp(38px,11.6vw,54px)}
.offerbox .btn{margin-top:22px}
.offerbox .offer-step{margin-top:12px;font-size:13px;color:var(--ink-2)}

/* ---------- 07 トップ ---------- */
.hero{padding:22px 0 0}
.hero-mast{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);line-height:1.4}
.hero-mast .ja{font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.34em}
.hero-mast .en{font-family:var(--en);font-weight:500;font-size:12.5px;letter-spacing:.2em;white-space:nowrap}
.hero-titlewrap{position:relative;margin-top:30px}
.hero-title{font-family:var(--serif);font-weight:600;font-size:clamp(44px,13.2vw,96px);line-height:1.34;letter-spacing:.02em}
.hero-title span{display:block;white-space:nowrap}
.hero-vert{display:none;position:absolute;white-space:nowrap;top:.9em;right:0;writing-mode:vertical-rl;font-family:var(--serif);font-size:11px;line-height:1;letter-spacing:.34em;color:var(--ink-2);padding-top:34px}
.hero-vert::before{content:"";position:absolute;top:0;left:50%;width:1px;height:26px;background:var(--gold-deep)}
.hero-lead{margin-top:22px;max-width:30em}
.hero-cta{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.hero .strip{margin-top:44px}

.shops{border-top:1px solid var(--ink)}
.shop{padding:44px 0 48px;border-bottom:1px solid var(--rule)}
.shop:last-child{border-bottom:0}
.shop-photo{margin:0 0 0 var(--gutter);aspect-ratio:4/3;overflow:hidden;background:var(--warm)}
.shop:nth-child(even) .shop-photo{margin:0 var(--gutter) 0 0}
.shop-photo img{width:100%;height:100%;object-fit:cover}
.shop-body{padding:22px var(--gutter) 0}
.shop-no{display:flex;align-items:center;gap:14px;font-family:var(--en);line-height:1;color:var(--gold-deep)}
.shop-no .no{font-style:italic;font-weight:500;font-size:52px;letter-spacing:-.01em}
.shop-no .en{font-weight:600;font-size:15px;letter-spacing:.3em;color:var(--ink)}
.shop-no::after{content:"";flex:1;height:1px;background:var(--rule-gold);order:1}
.shop-no .en{order:2}
.shop-name{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.4;letter-spacing:.1em;margin-top:14px}
.shop-catch{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.7;letter-spacing:.08em;margin-top:6px}
.shop-desc{margin-top:14px;color:var(--ink-2)}
.shop-addr{margin-top:10px;font-size:13px;line-height:1.7;padding-top:10px;border-top:1px solid var(--rule)}
.shop-actions{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shop-actions .btn{padding-left:8px;padding-right:8px;min-height:58px}
.shop-actions .btn-ig{grid-column:1/-1;min-height:48px}

.pickup-list{display:grid;gap:14px}
.pickup-list a{display:block;border:1px solid var(--rule);transition:opacity .25s}
.pickup-list a:hover{opacity:.86}
.pickup-list img{width:100%}

.closing{padding:76px 0 80px;background:var(--warm);border-top:1px solid var(--rule-gold)}
.closing-title{font-family:var(--serif);font-weight:600;font-size:clamp(27px,7.6vw,52px);line-height:1.6;letter-spacing:.06em}
.closing-text{margin-top:16px;color:var(--ink-2);max-width:36em}
.closing-cta{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.closing--ink{background:var(--ink);color:#fff;border-top:0}
.closing--ink .closing-text{color:var(--on-ink-2)}
.closing--ink .closing-en{color:var(--gold)}
.closing-en{font-family:var(--en);font-style:italic;font-weight:500;font-size:44px;line-height:1;color:var(--gold-deep);margin-bottom:18px}

/* ---------- 08 店舗 ---------- */
.shophero{position:relative;display:flex;align-items:flex-end;min-height:600px;min-height:clamp(580px,88svh,760px);background:var(--ink);color:#fff;overflow:hidden}
.shophero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shophero::after{content:"";position:absolute;inset:0;background:rgba(20,18,16,.7)}/* 暗幕。文字が必ず読める濃さ */
.shophero-in{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:56px var(--gutter) 44px}
.shophero-en{font-family:var(--en);font-style:italic;font-weight:500;font-size:clamp(84px,25vw,200px);line-height:.8;letter-spacing:-.02em;color:var(--gold);margin-left:-.04em}
.shophero-eyebrow{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:13px;font-weight:500;letter-spacing:.2em}
.shophero-eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.shophero-title{margin-top:12px;font-family:var(--serif);font-weight:600;font-size:clamp(32px,9.4vw,64px);line-height:1.45;letter-spacing:.05em}
.shophero-shop{display:block;font-family:var(--sans);font-weight:500;font-size:14px;line-height:1.6;letter-spacing:.24em;margin-bottom:8px}
.shophero-lead{margin-top:18px;max-width:34em;color:rgba(255,255,255,.92)}
.shophero-stats{margin-top:18px;padding-top:12px;border-top:1px solid rgba(255,255,255,.34);max-width:34em;font-size:13px;font-weight:500;line-height:1.85;letter-spacing:.08em;color:#fff}
.shophero-stats li span + span{margin-left:.9em}
.shophero-cta{margin-top:26px;display:grid;grid-template-columns:1.5fr 1fr;gap:8px}
.shophero-cta .btn{padding-left:8px;padding-right:8px;min-height:56px}

.facts{border-top:1px solid var(--ink)}
.fact{display:grid;grid-template-columns:7.2em 1fr;column-gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}
.fact-key{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.4;letter-spacing:.06em;grid-row:1/3}
.fact-lbl{font-weight:700;font-size:14px;line-height:1.6}
.fact-note{font-size:13px;line-height:1.6;color:var(--ink-2)}

.dl{border-top:1px solid var(--ink)}
.dl>div{display:grid;grid-template-columns:5.6em 1fr;column-gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.dl dt{font-weight:700;font-size:13px;letter-spacing:.12em;line-height:1.9;padding-top:1px}
.dl dd{line-height:1.8}
.dl dd small{display:block;font-size:12px;color:var(--ink-2)}
.dl a{border-bottom:1px solid var(--gold-deep)}
.facts + .dl{margin-top:40px}

.reasons{border-top:1px solid var(--ink)}
.reason{display:grid;grid-template-columns:52px 1fr;column-gap:10px;padding:26px 0 28px;border-bottom:1px solid var(--rule)}
.reason-no{font-family:var(--en);font-style:italic;font-weight:500;font-size:38px;line-height:1;color:var(--gold-deep)}
.reason-title{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.6;letter-spacing:.06em}
.reason-text{grid-column:2;margin-top:10px;color:var(--ink-2)}
.prose{max-width:40em;color:var(--ink-2)}
.prose p + p{margin-top:1em}

.flow{display:grid;gap:0;border-top:1px solid var(--ink)}
.flow-step{padding:22px 0 24px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:52px 1fr;column-gap:10px}
.flow-no{font-family:var(--en);font-style:italic;font-weight:500;font-size:38px;line-height:1;color:var(--gold-deep)}
.flow-title{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.6;letter-spacing:.06em}
.flow-text{grid-column:2;margin-top:6px;color:var(--ink-2);font-size:14px}
.sec-cta{margin-top:32px}

.staffs{border-top:1px solid var(--ink)}
.staff{display:flex;flex-wrap:wrap;gap:22px 18px;padding:34px 0 38px;border-bottom:1px solid var(--rule)}
.staff-photo{flex:0 0 40%;max-width:40%;aspect-ratio:3/4;overflow:hidden;background:var(--warm);align-self:flex-start}
.staff-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.staff-head{flex:1 1 50%;min-width:0;align-self:flex-end}
.staff-body{flex:0 0 100%}
.staff-badge{display:inline-block;border:1px solid var(--ink);font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.14em;padding:4px 8px 4px 10px}
.staff-role{margin-top:14px;font-family:var(--en);font-weight:600;font-size:12px;line-height:1.5;letter-spacing:.16em;color:var(--ink-2)}
.staff-name{margin-top:6px;font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.4;letter-spacing:.1em}
.staff-en{margin-top:4px;font-family:var(--en);font-weight:500;font-size:13.5px;line-height:1.5;letter-spacing:.12em;color:var(--ink-2)}
.staff-meta{margin-top:12px;font-size:12.5px;line-height:1.7}
.staff-meta li{padding:5px 0;border-top:1px solid var(--rule)}
.staff-meta li:last-child{border-bottom:1px solid var(--rule)}
.staff-motto{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.75;letter-spacing:.05em;margin-left:-.5em}
.staff-bio{margin-top:14px;color:var(--ink-2)}
/* 得意分野タグ：金の縦罫は各タグの左に置き、行頭に来た罫は枠の外（左 -13px）に出して切り落とす */
.tags{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:16px;font-size:12.5px;line-height:1.5;overflow:hidden}
.tags li{padding:0 25px 0 12px;margin-left:-13px;border-left:1px solid var(--gold-deep)}
.staff .btn{margin-top:22px}

.menu{border-top:1px solid var(--ink)}
.menu-row{padding:24px 0 26px;border-bottom:1px solid var(--rule)}
.menu-tag{display:inline-block;border:1px solid var(--ink);font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.14em;padding:3px 8px 3px 10px;margin-bottom:10px}
/* 料金の行：スマホ〜タブレットは 2 段（名前 → 点線＋価格）。1024px〜は 1 行（下の @media） */
.menu-line{display:block}
.menu-name{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.55;letter-spacing:.05em}
.menu-price{display:flex;align-items:baseline;margin-top:4px;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.4;letter-spacing:.02em;white-space:nowrap}
.menu-price::before{content:"";flex:1;min-width:16px;margin-right:12px;border-bottom:1px dotted rgba(26,26,26,.45);transform:translateY(-5px)}
.menu-from{font-family:var(--en);font-style:italic;font-weight:500;font-size:16px;margin-right:6px;color:var(--ink-2)}
.menu-sub{margin-top:6px;font-size:12.5px;letter-spacing:.06em;color:var(--ink-2)}
.menu-desc{margin-top:8px;font-size:14px;color:var(--ink-2)}

.voices-score{display:flex;flex-direction:column;gap:8px;margin-bottom:30px;padding:20px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.voices-score p:first-child{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.06em;line-height:1.5}
.voice{padding:26px 0 26px;border-bottom:1px solid var(--rule);position:relative}
.voice::before{content:"\201C";display:block;font-family:var(--en);font-size:60px;line-height:.6;height:26px;color:var(--gold-deep)}
.voice-text{font-family:var(--serif);font-weight:500;font-size:16px;line-height:1.95;letter-spacing:.04em}
.voice-by{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:0 14px}
.voice-date{font-family:var(--en);font-size:15px;letter-spacing:.08em}

.faq{border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{display:flex;align-items:flex-start;gap:14px;min-height:60px;padding:17px 0;cursor:pointer;list-style:none;font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.65;letter-spacing:.04em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"Q";flex:none;font-family:var(--en);font-style:italic;font-weight:500;font-size:24px;line-height:1.1;color:var(--gold-deep);width:.9em}
.faq-item summary::after{content:"";flex:none;margin:9px 4px 0 auto;width:9px;height:9px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);transition:transform .25s}
.faq-item[open] summary::after{transform:translateY(5px) rotate(-135deg)}
.faq-a{padding:0 26px 22px 36px;color:var(--ink-2)}

.others{border-top:1px solid var(--ink)}
.other{display:grid;grid-template-columns:112px 1fr;column-gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule);transition:background-color .25s}
.other:hover{background:rgba(201,169,110,.12)}
.other-photo{aspect-ratio:1/1;overflow:hidden;background:var(--warm)}
.other-photo img{width:100%;height:100%;object-fit:cover}
.other-en{font-family:var(--en);font-weight:600;font-size:12.5px;line-height:1.4;letter-spacing:.26em;color:var(--ink-2)}
.other-name{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.5;letter-spacing:.1em}
.other-catch{font-size:13px;line-height:1.6;color:var(--ink-2)}
.other-more{display:inline-block;margin-top:6px;font-weight:700;font-size:13px;letter-spacing:.12em;border-bottom:1px solid var(--ink);line-height:1.7}

.storeinfo{display:grid;gap:32px}
.storeinfo-name{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.5;letter-spacing:.08em}
.storeinfo-en{font-family:var(--en);font-weight:600;font-size:13px;letter-spacing:.26em;color:var(--ink-2);margin-bottom:18px}
.storeinfo-actions{margin-top:24px;display:grid;grid-template-columns:1.5fr 1fr;gap:8px}
.storeinfo-actions .btn{padding-left:8px;padding-right:8px}
.map{position:relative;aspect-ratio:4/3;background:var(--warm);border:1px solid var(--rule)}
.map iframe{display:block;width:100%;height:100%;border:0}
.map-cover{position:absolute;inset:0;z-index:2}
.map-wrap .btn{margin-top:10px}

/* ---------- 09 フッター ---------- */
.ft{background:var(--ink);color:#fff;padding:60px 0 36px}
.ft-mark{font-family:var(--en);font-weight:600;font-size:clamp(56px,17vw,120px);line-height:1;letter-spacing:.2em;margin-right:-.2em}
.ft-sub{margin-top:10px;font-family:var(--en);font-weight:500;font-size:13px;letter-spacing:.24em;color:var(--gold)}
.ft-lead{margin-top:20px;font-size:13.5px;line-height:1.95;color:var(--on-ink-2)}
.ft-cols{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:32px 24px;padding-top:28px;border-top:1px solid rgba(255,255,255,.22)}
.ft-col h2{font-family:var(--en);font-style:italic;font-weight:500;font-size:20px;line-height:1.2;color:var(--gold);margin-bottom:8px}
.ft-col a{display:flex;align-items:center;min-height:44px;font-size:14px;line-height:1.5;border-bottom:1px solid rgba(255,255,255,.14)}
.ft-col a:hover{color:var(--gold)}
.ft-notes{margin-top:36px;display:grid;gap:4px}
.ft-copy{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);font-size:11.5px;line-height:1.8;letter-spacing:.08em;color:rgba(255,255,255,.66)}

/* ---------- 10 固定の帯（スマホ） ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(251,248,243,.97);border-top:1px solid var(--ink);transition:transform .35s ease}
.dock .btn{flex:1 1 0;min-height:50px;padding:4px 8px;font-size:14.5px}
.dock .btn-book{flex:1.6 1 0}
.dock .btn-ig{font-size:18px}
.dock.is-hidden{transform:translateY(110%)}
.has-dock .ft{padding-bottom:calc(36px + 70px + env(safe-area-inset-bottom))}

/* ---------- 〜389px（幅 375・360 のスマホ。ヘッダー「BAGZY｜店名／予約する／Instagram」を 1 行に収める） ---------- */
@media (max-width:389px){
  .hd-in{padding:0 10px;gap:6px}
  .hd-mark{font-size:19px;letter-spacing:.16em;margin-right:-.16em}
  .hd-shop{font-size:10px;letter-spacing:.1em;padding-left:7px;margin-left:8px}
  .hd-nav{gap:5px}
  .btn--sm{padding:4px 10px;letter-spacing:.06em}
  .btn-ig.btn--sm{padding:4px 8px;letter-spacing:.03em}
}

/* ---------- 768px〜 ---------- */
@media (min-width:768px){
  :root{--gutter:40px;--hd:64px;--strip-h:400px}
  body{font-size:16px}
  .sec{padding:104px 0}
  .sec--tight{padding:64px 0}
  .hd-in{padding:0 var(--gutter)}
  .hd-mark{font-size:28px;letter-spacing:.22em;margin-right:-.22em}
  .hd-shop{font-size:13.5px;letter-spacing:.16em;padding-left:16px;margin-left:14px}
  .hd-nav{gap:10px}
  .btn--sm{padding:4px 22px;font-size:13.5px;letter-spacing:.12em}
  .btn-ig.btn--sm{font-size:17px;padding:4px 18px}
  .head{margin-bottom:56px}
  .head-en{font-size:104px}
  .head-ja{font-size:32px;margin-top:16px}
  .sec-cta{display:flex;justify-content:center;margin-top:48px}
  .sec-cta .btn{max-width:440px}
  .hero{padding-top:32px}
  .hero-mast .ja,.hero-mast .en{font-size:14px}
  .hero-titlewrap{margin-top:48px}
  .hero-vert{display:block;font-size:13px}
  .hero-cta{flex-direction:row;align-items:stretch;max-width:760px}
  .hero-cta .ticket{flex:1}
  .hero-cta .btn{flex:none}
  .hero .strip{margin-top:64px}
  .proof-tgc,.proof-hpb{padding:64px var(--gutter)}
  .proof-tgc p,.proof-score{font-size:34px}
  .proof-hpb .btn{align-self:flex-start}
  .student{padding:104px 0 96px}
  .student-kicker .en{font-size:72px}
  .offer-pre{font-size:28px}
  .offer-big{font-size:clamp(72px,10.5vw,128px)}
  .offer-cond{font-size:15px}
  .student-side .btn{align-self:flex-start}
  .offerbox{padding:44px 48px}
  .offerbox .offer-big{font-size:64px}
  .offerbox .btn{min-width:280px;max-width:440px}
  .shop-photo{aspect-ratio:16/9}
  .shop-actions{max-width:520px}
  .pickup-list{grid-template-columns:repeat(3,1fr);gap:20px}
  .closing{padding:120px 0}
  .closing-cta{flex-direction:row}
  .closing-en{font-size:72px}
  .shophero-in{padding-bottom:72px}
  .shophero-cta{display:flex}
  .shophero-cta .btn{min-width:220px}
  .shophero-stats{display:flex;flex-wrap:wrap;gap:0 28px;max-width:44em;font-size:14px}
  .shophero-stats li{white-space:nowrap}
  .facts{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;border-top:0}
  .fact{display:block;border-top:1px solid var(--ink);padding:20px 0 22px}
  .fact-key{font-size:30px;margin-bottom:6px}
  .dl>div{grid-template-columns:8em 1fr}
  .reasons{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
  .flow{grid-template-columns:1fr 1fr;column-gap:56px}
  /* 写真が無い（読めない）人も列の位置がずれないよう、写真の列は幅だけ残す */
  .staff{display:grid;grid-template-columns:200px 200px minmax(0,1fr);column-gap:40px;row-gap:0;align-items:start;padding:48px 0 52px}
  .staff-photo{grid-column:1;max-width:none}
  .staff-head{grid-column:2;align-self:start}
  .staff-body{grid-column:3;min-width:0}
  .staff-motto{font-size:21px}
  .menu{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
  .voices{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
  .others{display:grid;grid-template-columns:repeat(3,1fr);column-gap:28px;border-top:0}
  .other{display:block;border-top:1px solid var(--ink);border-bottom:0;padding:0 0 8px}
  .other-photo{aspect-ratio:4/3;margin-bottom:16px}
  .storeinfo-actions{display:flex}
  .storeinfo-actions .btn{min-width:200px}
  .ft{padding:88px 0 40px}
  .ft-cols{grid-template-columns:repeat(4,1fr)}
}

/* ---------- 900px〜（固定の帯をやめ、4 店を左右交互の見開きに） ---------- */
@media (min-width:900px){
  .dock{display:none}
  .has-dock .ft{padding-bottom:40px}
  .proof{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .proof-tgc{display:flex;flex-direction:column;justify-content:center;padding:72px 56px 72px max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)))}
  .proof-tgc p{font-size:clamp(34px,3.5vw,46px)}
  .proof-hpb{justify-content:center;padding:56px max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter))) 56px 56px}
  .student-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:64px;align-items:end}
  .student .offer-big{font-size:clamp(60px,7.8vw,108px)}
  .student-side{margin-top:0}
  .student-side .btn{align-self:stretch}
  .shops{--edge:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)))}
  .shop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch;padding:0;border-bottom:1px solid var(--ink)}
  .shop:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .shop-photo,.shop:nth-child(even) .shop-photo{position:relative;margin:0;aspect-ratio:auto;min-height:540px}
  .shop-photo img{position:absolute;inset:0}
  .shop-body{align-self:center;padding:64px var(--edge) 64px clamp(40px,5vw,72px)}
  .shop:nth-child(even) .shop-photo{order:2}
  .shop:nth-child(even) .shop-body{padding:64px clamp(40px,5vw,72px) 64px var(--edge)}
  .shop-actions{max-width:440px}
  .shop-no .no{font-size:76px}
  .shop-name{font-size:40px}
  .storeinfo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:start}
  .map{aspect-ratio:auto;height:480px}
  .voices{grid-template-columns:repeat(3,1fr);column-gap:44px}
  .hd-link{display:inline-flex;align-items:center;min-height:44px;font-size:13px;letter-spacing:.14em;margin-right:14px;border-bottom:1px solid transparent}
  .hd-link:hover{color:var(--gold)}
}

/* ---------- 1024px〜（最初の画面を左右非対称に） ---------- */
@media (min-width:1024px){
  :root{--strip-h:460px}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:56px;align-items:end;margin-top:56px}
  .hero-titlewrap{margin-top:0}
  .hero-title{font-size:clamp(72px,8vw,104px)}
  .hero-lead{margin-top:0}
  .hero-cta{flex-direction:column;max-width:none}
  .head--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:end}
  .head--split .head-lead{margin-top:0;padding-bottom:10px}
  .facts-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px;align-items:start}
  .facts-grid .facts{grid-template-columns:1fr;column-gap:0}
  .facts-grid .facts + .dl{margin-top:0}
  .facts-grid .fact{display:grid;grid-template-columns:8em 1fr}
  .staff{grid-template-columns:240px 240px minmax(0,1fr);column-gap:56px}
  .menu-line{display:flex;align-items:baseline;gap:12px}
  .menu-line::after{content:"";flex:1;min-width:16px;border-bottom:1px dotted rgba(26,26,26,.45);transform:translateY(-5px);order:1}
  .menu-price{display:block;order:2;flex:none;margin-top:0}
  .menu-price::before{content:none}
  /* フッター：左に BAGZY と営業時間、右にリンクの列（右半分を空けない） */
  .ft>.wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto 1fr;column-gap:64px}
  .ft-mark{font-size:clamp(72px,7vw,96px)}
  .ft-mark,.ft-sub,.ft-lead{grid-column:1}
  .ft-cols{grid-column:2;grid-row:1/4;margin-top:0;padding-top:0;border-top:0;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-content:start}
  .ft-notes,.ft-copy{grid-column:1/-1}
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strip-track{animation:none}
  .strip{overflow-x:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn,.dock,.faq-item summary::after{transition:none}
}

/* 2026-10 最上部の「美容室」を折り返さない（狭い画面） */
.hero-mast .ja{white-space:nowrap;flex:none}
@media (max-width:389px){.hero-mast .en{letter-spacing:.12em;font-size:11px}}

/* 2026-10-11 帯の写真を 8 枚から 12 枚に（流れる速さは同じ） */
.strip-track{animation-duration:90s}
.ph-s14{object-position:70% 35%}
.ph-s12{object-position:50% 20%}

/* 2026-10-12 帯の写真を 20 枚に（流れる速さは同じ）／メンズスタイルの動画欄 */
.strip-track{animation-duration:150s}
.movie .head{margin-bottom:28px}
.reel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 var(--gutter) 6px;scroll-padding:0 var(--gutter);scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.reel-item{flex:none;width:62vw;max-width:300px;height:auto;aspect-ratio:9/16;object-fit:cover;background:#111;scroll-snap-align:start;display:block}
.movie-cta{margin-top:32px}
.btn--onink{background:#fff;color:var(--ink)}
.btn--onink:hover{background:var(--gold);color:var(--ink)}
@media (min-width:1024px){
  .reel{max-width:var(--maxw);margin:0 auto;overflow:visible;gap:16px}
  .reel-item{width:calc((100% - 48px) / 4);max-width:none}
  .movie-cta .btn{max-width:440px}
}
.movie-cta .btn{display:flex;width:100%}

/* 2026-10-12 帯の写真を 25 枚に（流れる速さは同じ） */
.strip-track{animation-duration:188s}

/* 2026-10-12 店舗ページのヘッダーに「スタイリスト」（予約するの右。スタイリスト欄へ移動） */
.hd .hd-staff{color:#fff;border-color:rgba(255,255,255,.7);background:transparent}
.hd .hd-staff:hover{background:#fff;color:var(--ink);border-color:#fff}
#stylist{scroll-margin-top:calc(var(--hd) + 8px)}
@media (max-width:767px){
  /* スマホ：店名を BAGZY の下に置いて、ボタン 3 つの幅を空ける */
  .hd-brand:has(.hd-shop){flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
  .hd-brand:has(.hd-shop) .hd-shop{padding-left:0;margin-left:0;border-left:0;font-size:9px;letter-spacing:.2em}
  .hd-brand:has(.hd-shop) .hd-mark{font-size:18px}
  .hd-nav:has(.hd-staff){gap:4px}
  .hd-nav:has(.hd-staff) .btn--sm{padding-left:9px;padding-right:9px;font-size:11.5px;letter-spacing:.04em}
}
@media (max-width:767px){.hd-nav:has(.hd-staff) .btn-ig.btn--sm{font-size:14px;padding-left:7px;padding-right:7px;letter-spacing:.02em}}

/* 2026-10-12 ヘッダーの「スタイリスト」を目立たせる：白のベタ＋墨の太字（金は予約だけのまま） */
.hd .hd-staff{background:#fff;color:var(--ink);border-color:#fff;font-weight:700}
.hd .hd-staff:hover{background:var(--warm);border-color:var(--warm);color:var(--ink)}
@media (max-width:767px){.hd-nav:has(.hd-staff) .hd-staff{font-size:12px;padding-left:10px;padding-right:10px}}

/* =====================================================================
   11 圧縮版の店舗ページ（2026-10-12 追加。既存の部品は消していない。使い方は冒頭の一覧「11」）
   <body class="compact has-dock"> のときだけ効く詰めと、どこでも使える新しい部品。
   ===================================================================== */

/* ---- 11-1 新しい部品（body.compact が無くても使える） ---- */

/* 特徴の欄：番号＋見出し（12 字前後）＋説明 1 文 */
.feats{border-top:1px solid var(--ink)}
.feat{display:grid;grid-template-columns:38px 1fr;column-gap:8px;align-items:baseline;padding:14px 0 15px;border-bottom:1px solid var(--rule)}
.feat-no{font-family:var(--en);font-style:italic;font-weight:500;font-size:26px;line-height:1;color:var(--gold-deep)}
.feat-title{font-family:var(--serif);font-weight:600;font-size:17.5px;line-height:1.55;letter-spacing:.05em;text-wrap:balance;word-break:auto-phrase}
.feat-text{grid-column:2;margin-top:3px;font-size:14px;line-height:1.75;color:var(--ink-2)}

/* 要点の箇条書き（3 つまで。その店だけの売りの欄で、短い文の下に置く） */
.points{border-top:1px solid var(--rule);margin-top:16px}
.points li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.7}
.points li::before{content:"";position:absolute;left:2px;top:1.45em;width:10px;height:1px;background:var(--gold-deep)}

/* 実績の細い帯：TGC ／ ★4.85 ＋注記（特徴の欄の直後。墨の地） */
.proofbar{background:var(--ink);color:#fff;padding:16px 0 15px}
.proofbar-line{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(13px,3.9vw,15.5px);line-height:1.75;letter-spacing:.06em;white-space:nowrap}
.proofbar .note{margin-top:6px;font-size:11px;line-height:1.65;color:var(--on-ink-2)}

/* 短いスタイリスト札：写真（左）＋ 肩書・名前・欧文の肩書・タグ（右）＋ ひとこと 1 文（下） */
.stfs{border-top:1px solid var(--ink)}
.stf{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 14px;padding:18px 0;border-bottom:1px solid var(--rule)}
.stf-photo{flex:0 0 92px;aspect-ratio:3/4;overflow:hidden;background:var(--warm)}
.stf-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.stf-main{flex:1 1 0;min-width:0}
.stf-badge{display:inline-block;border:1px solid var(--ink);font-weight:700;font-size:11px;line-height:1.4;letter-spacing:.12em;padding:2px 7px 2px 9px}
.stf-name{margin-top:6px;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.4;letter-spacing:.1em}
.stf-role{font-family:var(--en);font-weight:600;font-size:11px;line-height:1.5;letter-spacing:.14em;color:var(--ink-2)}
.stf .tags{margin-top:8px;font-size:12px;gap:3px 0}
.stf-word{flex:0 0 100%;font-size:14px;line-height:1.75;color:var(--ink-2)}

/* たたむ部品（JS なしで開く）：<details class="more"><summary>…</summary><div class="more-body">…</div></details> */
.more{margin-top:16px}
.more>summary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:6px 20px;border:1px solid var(--ink);cursor:pointer;list-style:none;font-weight:700;font-size:14px;line-height:1.4;letter-spacing:.14em;transition:background-color .25s,color .25s}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.more[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.more .more-close{display:none}
.more[open] .more-open{display:none}
.more[open] .more-close{display:inline}
.more-body{margin-top:16px}
.more-body.voices{border-top:1px solid var(--rule)}
@media (hover:hover){.more>summary:hover{background:var(--ink);color:#fff}}
.sec--ink .more>summary{border-color:rgba(255,255,255,.7)}

/* 店舗情報：店名のすぐ下に表を置くとき（欧文の店名を省いた形）の間隔 */
.storeinfo-name + .dl{margin-top:14px}

/* フッターの列を横いっぱいにして、リンクを 2 列に並べる（スマホ） */
@media (max-width:767px){
  .ft-col--wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
  .ft-col--wide h2{grid-column:1/-1}
}

/* ---- 11-2 body.compact：既存の部品を詰める ---- */
.compact .sec{padding:44px 0}
.compact .sec--tight{padding:28px 0}
.compact .sec--after-tight{padding-top:16px}
.compact .sec.sec--flush{padding-bottom:0}
.compact .head{margin-bottom:20px}
.compact .head-en{font-size:40px}
.compact .head-ja{font-size:23px;line-height:1.5;margin-top:6px}
.compact .head-lead{margin-top:10px;font-size:14px;line-height:1.8}
.compact .sec-cta{margin-top:24px}
.compact .shophero{min-height:540px;min-height:clamp(540px,78svh,720px)}
.compact .voices-score{gap:4px;margin-bottom:0;padding:12px 0}
.compact .voices-score p:first-child{font-size:17px}
.compact .faq-item summary{min-height:54px;padding:14px 0;font-size:15.5px}
.compact .faq-a{padding-bottom:18px;font-size:14px}
/* 料金：名前と価格を 1 行に（スマホから）。説明は 1 文 */
.compact .menu-row{padding:14px 0 15px}
.compact .menu-tag{margin-bottom:6px;font-size:11px;padding:2px 7px 2px 9px}
.compact .menu-line{display:flex;align-items:baseline;gap:10px}
.compact .menu-name{font-size:16.5px}
.compact .menu-price{display:block;flex:none;margin:0 0 0 auto;font-size:18px}
.compact .menu-price::before{content:none}
.compact .menu-from{font-size:14.5px;margin-right:5px}
.compact .menu-sub{margin-top:2px;font-size:12px}
.compact .menu-desc{margin-top:2px;font-size:13.5px;line-height:1.7}
/* 2 行になる短い文は、最後の行に 2〜3 文字だけ残さない */
.compact .menu-desc,.compact .head-lead,.stf-word{text-wrap:balance;word-break:auto-phrase}
.compact .ft-col a{line-height:1.35;padding:5px 0}
.compact .closing{padding:44px 0 48px}
.compact .closing-text{margin-top:8px}
.compact .closing-cta{margin-top:20px}

@media (max-width:767px){
  .compact .shophero-in{padding:40px var(--gutter) 30px}
  .compact .shophero-lead{margin-top:14px}
  .compact .shophero-stats{margin-top:14px;padding-top:10px}
  .compact .shophero-cta{margin-top:20px}
  .compact{--strip-h:260px}
  .compact .offerbox{padding:20px 20px 18px}
  .compact .offerbox .offer-label{margin-bottom:10px}
  .compact .offerbox .offer-pre{font-size:17px;margin-top:10px}
  .compact .offerbox .offer-big{font-size:clamp(34px,10.4vw,48px)}
  .compact .offer-cond{margin-top:10px;font-size:13px;line-height:1.75}
  .compact .offerbox .btn{margin-top:14px}
  .compact .offerbox .offer-step{margin-top:8px;font-size:12.5px}
  .compact .voice{padding:18px 0}
  .compact .voice::before{font-size:44px;height:18px}
  .compact .voice-text{font-size:15px;line-height:1.8}
  .compact .voice-by{margin-top:8px}
  .compact .closing-title{font-size:clamp(23px,6.4vw,30px)}
  .compact .closing-cta{display:grid;grid-template-columns:1.5fr 1fr;gap:8px}
  .compact .closing-cta .btn{padding-left:8px;padding-right:8px;min-height:56px}
  /* ほかの店：写真（小）＋店名と 1 行＋「店舗を見る」を横 1 段に */
  .compact .other{grid-template-columns:72px 1fr auto;column-gap:12px;padding:10px 0}
  .compact .other-name{font-size:18px}
  .compact .other-catch{font-size:12.5px}
  .compact .other-more{margin-top:0;font-size:12px;letter-spacing:.08em}
  .compact .dl>div{padding:10px 0}
  .compact .storeinfo{gap:24px}
  .compact .storeinfo-name{font-size:21px}
  .compact .storeinfo-actions{margin-top:18px}
  .compact .map{aspect-ratio:16/10}
  .compact .ft{padding-top:40px}
  .compact .ft-mark{font-size:clamp(40px,12vw,56px)}
  .compact .ft-sub{margin-top:6px}
  .compact .ft-lead{margin-top:10px}
  .compact .ft-cols{margin-top:20px;padding-top:18px;gap:18px 24px}
  .compact .ft-copy{margin-top:22px;padding-top:14px}
}

@media (min-width:768px){
  .feats{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
  .feat{padding:20px 0 22px}
  .feat-title{font-size:20px}
  .feat-text{font-size:15px}
  .proofbar{padding:22px 0 20px}
  .proofbar-lines{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 36px}
  .proofbar-line{font-size:19px}
  .proofbar-line + .proofbar-line{padding-left:36px;border-left:1px solid var(--rule-gold)}
  .proofbar .note{font-size:12px}
  .stfs{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
  .stf{padding:26px 0}
  .stf-photo{flex-basis:120px}
  .stf-name{font-size:24px}
  .stf-word{font-size:15px}
  .more>summary{max-width:440px;margin:0 auto}
  .more-body{margin-top:28px}
  .other .other-more{margin-top:6px}
  .compact .sec{padding:76px 0}
  .compact .sec--tight{padding:48px 0}
  .compact .sec--after-tight{padding-top:28px}
  .compact .head{margin-bottom:36px}
  .compact .head-en{font-size:72px}
  .compact .head-ja{font-size:30px;margin-top:10px}
  .compact .head-lead{font-size:15px}
  .compact .sec-cta{margin-top:40px}
  .compact .closing{padding:84px 0}
  .compact .menu-name{font-size:18px}
  .compact .menu-price{font-size:20px}
  .compact .voices-score{margin-bottom:8px;padding:18px 0}
}
@media (min-width:1024px){
  .feats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));column-gap:40px;border-top:0}
  .feat{display:block;border-top:1px solid var(--ink);border-bottom:0;padding:20px 0 0}
  .feat-no{font-size:34px;margin-bottom:12px}
  .feat-text{margin-top:8px}
  .stfs{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:44px}
  .compact .menu-price{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.more>summary{transition:none}}

/* 2026-10-12 実績の細い帯を 1 行に：「東京ガールズコレクション4年連続出場サロン ｜ HPB口コミ評価 ★4.85」。
   スマホでも折り返さないよう、画面の幅に合わせて文字の大きさを変える。中央ぞろえ。 */
.proofbar{text-align:center}
.proofbar .wrap{padding-left:12px;padding-right:12px}
.proofbar-lines{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:0}
.proofbar-line{font-size:min(17px,calc((100vw - 26px) / 33));letter-spacing:0;line-height:1.9}
.proofbar-line + .proofbar-line{padding-left:.7em;margin-left:.7em;border-left:1px solid var(--gold)}
.proofbar .note{display:inline-block;text-align:left;padding-left:1em;text-indent:-1em;max-width:34em}
@media (min-width:768px){
  .proofbar-lines{gap:0}
  .proofbar-line{font-size:17px;letter-spacing:.06em}
  .proofbar-line + .proofbar-line{padding-left:28px;margin-left:28px}
}

/* 2026-10-12 店舗ページも「左に寄って右が空く」をやめる：学生特典の枠・見出し・締めを中央ぞろえに（トップと同じ作法） */
.offerbox{position:relative;text-align:center;background:#fff;padding:34px 20px 28px}
.offerbox::before{content:"";position:absolute;inset:6px;border:1px solid var(--rule-gold);pointer-events:none}
.offerbox>*{position:relative}
.offerbox .offer-label{color:var(--gold-deep)}
.offerbox .offer-big{display:inline-block;background:linear-gradient(transparent 68%,rgba(201,169,110,.5) 68%);padding:0 .08em}
.offerbox .offer-cond{max-width:30em;margin-left:auto;margin-right:auto}
.offerbox .btn{max-width:440px;margin-left:auto;margin-right:auto}
@media (max-width:1023px){
  .compact .head{text-align:center}
  .compact .head-en{margin-left:0}
  .compact .head-lead{margin-left:auto;margin-right:auto}
}
.compact .closing{text-align:center}
.compact .closing-text{margin-left:auto;margin-right:auto}
.compact .closing-cta{max-width:520px;margin-left:auto;margin-right:auto;justify-content:center}

/* =====================================================================
   12 2026-10-12 fix3（利用者目線の監査 v3_ux の直し。5 ページ共通。既存の部品は消していない）
   決まり：左に寄せて右を空けない（短い文・見出し・枠は中央）／大事な数字は大きく／金のベタは予約だけ
   新しい部品
     .shophero-stats > li > .shs-lbl（小さい説明。small は補足）＋ .shs-num（大きい数字。数字と単位は同じ書体）
     .offerchip（最初の画面の学生特典の札。同じページの #student へ）> .offerchip-tag ＋ .offerchip-text（.offerchip-hl）
     .stfs.stfs--n5 / --n6 / --n7 > .stf > figure.stf-photo（写真が無い人は .is-noimg の代替枠）＋ .stf-main（.stf-badge .stf-name .tags .stf-word）
   ===================================================================== */

/* 帯の写真は 21 枚（1 枚あたり 7.5 秒） */
.strip-track{animation-duration:158s}

/* ---- 見出しはどの幅でも中央（左右 2 列に割る .head--split のパソコン幅だけ左） ---- */
.compact .head{text-align:center}
.compact .head-en{margin-left:0}
.compact .head-lead{margin-left:auto;margin-right:auto}
@media (min-width:1024px){.compact .head--split{text-align:left}}

/* ---- 最初の画面：中央ぞろえ。数字 3 つは「大きい数字＋小さい説明」の横並び。予約の上に学生特典の札 ---- */
.compact .shophero-in{text-align:center}
.compact .shophero-en{margin-left:0}
.compact .shophero-eyebrow{justify-content:center}
.compact .shophero-eyebrow::after{content:"";width:28px;height:1px;background:var(--gold)}
.compact .shophero-lead{margin-left:auto;margin-right:auto}
.compact .shophero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:520px;margin-left:auto;margin-right:auto;font-size:11px;line-height:1.5;letter-spacing:.04em;font-weight:500}
.compact .shophero-stats li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 4px;white-space:normal;min-width:0}
.compact .shophero-stats li + li{border-left:1px solid rgba(255,255,255,.34)}
.compact .shophero-stats li span + span{margin-left:0}
.shs-num{order:-1;font-family:var(--serif);font-weight:600;font-size:clamp(22px,6.3vw,34px);line-height:1.25;letter-spacing:.04em;white-space:nowrap;color:#fff}
.shs-lbl{color:rgba(255,255,255,.92)}
.shs-lbl small{display:block;font-size:10px;line-height:1.45;color:rgba(255,255,255,.8)}
.offerchip{display:flex;align-items:center;justify-content:center;gap:10px;max-width:440px;min-height:50px;margin:18px auto 0;padding:6px 10px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px var(--rule-gold);font-family:var(--serif);font-weight:600;font-size:clamp(13px,3.75vw,16px);line-height:1.3;letter-spacing:.02em;white-space:nowrap;transition:background-color .25s}
.offerchip:hover{background:var(--warm)}
.offerchip-tag{flex:none;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:700;font-size:11px;line-height:1;letter-spacing:.14em;padding:6px 6px 6px 8px}
.offerchip-hl{background:linear-gradient(transparent 62%,rgba(201,169,110,.55) 62%);padding:0 .1em}
.offerchip::after{content:"";flex:none;width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.compact .shophero-cta{max-width:440px;margin-left:auto;margin-right:auto;margin-top:10px}
@media (max-width:767px){
  .compact .shophero-in{padding:28px var(--gutter) 26px}
  .compact .shophero-en{font-size:clamp(56px,17vw,84px)}
  .compact .shophero-eyebrow{margin-top:16px}
  .compact .shophero-stats{margin-top:14px;padding-top:14px}
  .compact .offerchip{margin-top:16px}
  .compact .shophero-cta{margin-top:10px}
}
@media (min-width:768px){
  .compact .shophero-en{font-size:clamp(120px,15vw,180px)}
  .compact .shophero-stats{max-width:600px;font-size:13px;margin-top:22px;padding-top:20px}
  .shs-lbl small{font-size:11.5px}
  .compact .shophero-cta{max-width:560px;justify-content:center;margin-top:12px}
  .compact .shophero-cta .btn{flex:1 1 0;min-width:0}
  .offerchip{max-width:560px;min-height:56px;margin-top:26px;font-size:17px}
  .offerchip-tag{font-size:12px}
}

/* ---- 学生特典の枠：最大 720px を中央に ---- */
.offerbox{max-width:720px;margin-left:auto;margin-right:auto}

/* ---- 特徴：560px〜は番号を上に置いた中央ぞろえの札。奇数のときは最後の 1 つを中央に ---- */
@media (min-width:560px){
  .feats{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;border-top:0}
  .feat{display:block;text-align:center;border-top:1px solid var(--ink);border-bottom:0;padding:18px 0 22px}
  .feat-no{font-size:30px;margin-bottom:8px}
  .feat-text{margin-top:6px}
}
@media (min-width:560px) and (max-width:1023px){
  .feat:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 16px);justify-self:center}
}
@media (min-width:1024px){
  .feats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));column-gap:40px}
  .feat{padding:20px 0 0}
}

/* ---- 要点の箇条書き：幅が広いときは枠ごと中央に（八幡の 3 列は対象外） ---- */
@media (min-width:560px) and (max-width:1023px){.compact .points:not(.yh-points){max-width:520px;margin-left:auto;margin-right:auto}}

/* ---- スタイリスト：英語の肩書なし・タグ 3 個。スマホ＝写真（左）＋文字（右）。パソコン＝写真を上にした札を人数に合わせて並べる ---- */
.stf{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:14px;padding:14px 0}
.stf-photo{flex:0 0 84px;position:relative}
.stf-main{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px}
.stf-name{order:-1;margin-top:0;font-size:20px}
.stf .tags{flex:0 0 100%;display:block;overflow:visible;margin-top:1px;font-size:12px;line-height:1.6}
.stf .tags li{display:inline-block;padding:0;margin:0;border:0;white-space:nowrap}
.stf .tags li + li::before{content:"／";margin:0 .3em;color:var(--gold-deep)}
.stf-word{flex:0 0 100%;margin-top:3px;font-size:13.5px;line-height:1.65}
/* 写真が無い人・読めなかった写真：同じ寸法の代替枠（暖色の地＋金の細罫＋小さな BAGZY）。列をそろえる */
.stf-photo.is-noimg{background:var(--warm)}
.stf-photo.is-noimg::before{content:"";position:absolute;inset:5px;border:1px solid var(--rule-gold)}
.stf-photo.is-noimg::after{content:"BAGZY";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:.2em;font-family:var(--en);font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--gold-deep)}
@media (min-width:560px){
  .stf{gap:20px;padding:18px 0}
  .stf-photo{flex-basis:112px}
  .stf-name{font-size:22px}
  .stf-word{font-size:14.5px}
  .stf-photo.is-noimg::after{font-size:13px}
}
@media (min-width:560px) and (max-width:767px){.stfs{max-width:520px;margin-left:auto;margin-right:auto}}
@media (min-width:768px) and (max-width:1023px){
  .stfs{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
  .stf:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 20px);justify-self:center}
}
@media (min-width:1024px){
  .stfs{display:flex;flex-wrap:wrap;justify-content:center;gap:44px 32px;border-top:0}
  .stf{flex:0 0 auto;width:calc((100% - 64px) / 3);max-width:280px;flex-direction:column;align-items:center;gap:16px;padding:0;border-bottom:0;text-align:center}
  .stfs--n5 .stf{width:calc((100% - 128px) / 5)}
  .stfs--n7 .stf{width:calc((100% - 96px) / 4)}
  .stf-photo{flex:none;width:100%}
  .stf-main{flex:none;width:100%;display:block}
  .stf-name{font-size:23px;margin-top:8px}
  .stf .tags{margin-top:6px;font-size:12.5px}
  .stf-word{margin-top:8px;font-size:14px;line-height:1.75}
  .stf-photo.is-noimg::after{font-size:17px}
}

/* ---- 料金：768px〜も 1 列。最大 760px を中央に（行数が奇数でも余らない） ---- */
@media (min-width:768px){.compact .menu{display:block;max-width:760px;margin-left:auto;margin-right:auto}}

/* ---- お客様の声：★4.85 は実績の帯の 1 回だけ。並びは中央寄せ（最後の段が余っても右を空けない） ---- */
.compact .wrap>.voices{border-top:1px solid var(--ink)}
@media (min-width:768px){
  .compact .voices{display:flex;flex-wrap:wrap;justify-content:center;column-gap:44px}
  .compact .voice{flex:0 0 calc((100% - 44px) / 2)}
}
@media (min-width:900px){.compact .voice{flex-basis:calc((100% - 88px) / 3)}}

/* ---- よくある質問：最大 820px を中央に ---- */
.compact .faq{max-width:820px;margin-left:auto;margin-right:auto}

/* ---- 店舗情報：899px 以下は表を中央に置き、店名とボタンも中央 ---- */
@media (max-width:899px){
  .compact .storeinfo{max-width:600px;margin-left:auto;margin-right:auto}
  .compact .storeinfo-name{text-align:center}
  .compact .storeinfo-actions{justify-content:center}
}

/* ---- フッター：1023px 以下は BAGZY と営業時間を中央に ---- */
@media (max-width:1023px){
  .ft-mark{margin-right:0;padding-left:.2em;text-align:center}
  .ft-sub,.ft-lead,.ft-copy{text-align:center}
  .ft-sub{padding-left:.24em}
}

/* ---- 店舗情報：560〜899px は表と地図を 500px の幅で中央に（表の右を空けない） ---- */
@media (min-width:560px) and (max-width:899px){.compact .storeinfo{max-width:500px}}
/* ---- 締めの帯：768px〜はボタンを大きく。ほかの 3 店：768px〜は文字も中央 ---- */
@media (min-width:768px){
  .compact .closing-cta .btn{min-width:220px}
  .compact .other{text-align:center}
}

/* 2026-10-25 小倉・八幡の店の写真ギャラリーは速めに流す（1 枚 5 秒） */
.strip-track:has(.ph-g_k01){animation-duration:110s}
.strip-track:has(.ph-g_y01){animation-duration:90s}