/* =========================================================
   Kamuy hair care & spa — shared design system
   白基調 × ゴールド × 明朝  /  approved mockup 2026-07-02 ベース
   ========================================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#26231e; --ink-2:#5a544c; --ink-3:#726c63;
  --paper:#fbf9f5; --paper-2:#f3efe7; --paper-3:#efe9de; --line:#e7e1d5;
  --gold:#b08a4a; --gold-2:#8a6a35; --gold-btn:#91713d; --gold-num:#856838; --gold-lt:#c9a768; --gold-bg:#f6efe2;
}
/* scroll-behavior:smooth は付けない。付けるとブラウザ既定のアンカー着地が
   アニメーションになり、main.js の scrollToHash と取り合って途中で止まる
   （実測: 別ページから #hash で来ると着地位置が毎回ばらつく）。
   スムーススクロールは main.js が明示的に behavior:"smooth" で行う。
   scroll-padding-top は JS 無効時の着地位置（固定ヘッダー分）として残す。 */
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media(min-width:768px){html{scroll-padding-top:104px}}
body{font-family:'Noto Sans JP',sans-serif;color:var(--ink);background:var(--paper);line-height:1.95;font-feature-settings:"palt";letter-spacing:.03em;font-size:15px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.serif{font-family:'Cormorant Garamond',serif}
.mincho{font-family:'Shippori Mincho',serif}
.en{font-family:'Cormorant Garamond',serif;letter-spacing:.08em}
/* 改行制御: <wbr> を入れた位置だけを改行候補にする。入り切る幅なら折れない */
.kp{word-break:keep-all;overflow-wrap:anywhere}
/* 金額・数値レンジ・記号+語など、途中で割れると読めなくなる塊 */
.nb{white-space:nowrap}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}.rv.d4{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ===== header ===== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:20px 34px;background:rgba(251,249,245,0);border-bottom:1px solid rgba(231,225,213,0);transition:padding .4s,background .4s,border-color .4s}
.hdr.scr{padding:12px 34px;background:rgba(251,249,245,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(231,225,213,.7)}
body:not(.p-recruit) .hdr.light .brand .nm,body:not(.p-recruit) .hdr.light .brand .tg,body:not(.p-recruit) .hdr.light .nav a{color:#fff}
body:not(.p-recruit) .hdr.light .brand .tg{color:#e7cf9a}
body:not(.p-recruit) .hdr.light .nav .book{border-color:rgba(255,255,255,.7);color:#fff}
body:not(.p-recruit) .hdr.light .burger span{background:#fff}
.brand{display:flex;flex-direction:column;line-height:1;transition:.4s}
.brand .nm{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:30px;font-weight:600;color:var(--ink);transition:color .4s}
.brand .tg{font-size:8.5px;letter-spacing:.36em;color:var(--gold-2);margin-top:4px;font-weight:500;transition:color .4s}
.nav{display:flex;align-items:center;gap:22px}
/* .nav-in はスマホのドロワーで中央寄せに使う包み。PC では箱を作らず、中の a / .grp がそのまま .nav の子になる */
.nav-in{display:contents}
.nav a{font-size:12px;letter-spacing:.06em;color:var(--ink-2);font-weight:500;position:relative;transition:color .4s;white-space:nowrap}
.nav a:not(.book)::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .3s}
.nav a:not(.book):hover::after,.nav a:not(.book).cur::after{width:100%}
.nav a.cur{color:var(--gold-2)}
body:not(.p-recruit) .hdr.light .nav a.cur{color:#e7cf9a}
.nav .book{font-family:'Noto Sans JP';padding:10px 20px;border:1px solid var(--gold);color:var(--gold-2);border-radius:2px;letter-spacing:.1em;font-size:12px;transition:all .25s}
.nav .book:hover{background:var(--gold);color:#fff !important;border-color:var(--gold)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.25s}

/* ===== SP: 右上ヘッダー下に浮かせる「ご予約」ボタン（main.js が body 末尾に注入） ===== */
/* 既定は非表示。スマホ幅でのみ表示し、ハンバーガー展開中（body.nav-on）は隠す */
.fab-book{display:none}
@media(max-width:820px){
  .fab-book{
    display:inline-flex;align-items:center;
    position:fixed;top:84px;right:16px;z-index:95;
    background:var(--gold);color:#fff;
    padding:11px 22px;border-radius:2px;
    font-family:'Noto Sans JP',sans-serif;font-size:12px;letter-spacing:.14em;font-weight:500;
    /* 2重ボーダー（外線=gold → 薄いゴールド帯 → 内線=gold）を inset リングで表現。最後がドロップシャドウ */
    box-shadow:inset 0 0 0 2px var(--gold), inset 0 0 0 3px #c4a777, inset 0 0 0 4px var(--gold), 0 8px 22px rgba(38,35,30,.24);
    transition:opacity .3s,transform .3s,visibility .3s;
  }
  /* ハンバーガー展開中(nav-on) / CTA セクションが画面中央に到達(is-hidden) したら退避 */
  body.nav-on .fab-book,
  .fab-book.is-hidden{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none}
}

/* ===== hero (top page) ===== */
/* 高さは 100vh を先に書き、対応ブラウザでは 100svh（iOS のツールバー分を除いた実表示高）で上書き。
   overflow:hidden は .hero-bg 側だけに残す（本体に付けると背の低い端末で本文が切れる）。
   ヘッダーは透過で重なるので、その分を padding-top で確保し、収まらないときは上詰め（safe center） */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;align-items:safe center;padding-top:86px}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:kb 16s ease-out forwards}
@keyframes kb{to{transform:scale(1)}}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(30,26,20,.66) 0%,rgba(30,26,20,.4) 40%,rgba(30,26,20,.08) 74%)}
.hero-in{position:relative;z-index:1;padding:0 8vw;max-width:1240px}
.hero .eye{display:flex;align-items:center;gap:16px;font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:.4em;color:#e7cf9a;margin-bottom:28px;font-weight:600}
.hero .eye::before{content:'';width:46px;height:1px;background:rgba(231,207,154,.7)}
.hero h1{color:#fff;font-family:'Shippori Mincho',serif;font-size:46px;font-weight:500;line-height:1.62;letter-spacing:.08em;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.hero h1 .lg{font-size:66px;font-weight:600;display:inline-block}
.hero h1 .gd{color:#e7cf9a}
.hero .sub{color:rgba(255,255,255,.92);font-size:15px;margin-top:28px;line-height:2.2;max-width:32em;text-shadow:0 1px 12px rgba(0,0,0,.35);font-weight:300}
.hero .cta{display:inline-flex;align-items:center;gap:12px;margin-top:38px;background:var(--gold-btn);color:#fff;padding:16px 38px;border-radius:2px;font-size:13px;letter-spacing:.16em;font-weight:500;transition:background .25s,transform .25s;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.hero .cta:hover{background:var(--gold-2);transform:translateY(-2px)}
.hero .vlabel{position:absolute;right:36px;top:50%;transform:translateY(-50%);z-index:1;writing-mode:vertical-rl;font-family:'Shippori Mincho',serif;font-size:12px;letter-spacing:.5em;color:rgba(255,255,255,.55)}
.hero .scroll{position:absolute;bottom:30px;left:50%;z-index:1}
.hero .scroll .in{transform:translateX(-50%);font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:.34em;color:rgba(255,255,255,.8);writing-mode:vertical-rl;padding-bottom:44px;position:relative}
.hero .scroll .in::after{content:'';position:absolute;bottom:0;left:50%;width:1px;height:36px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:sl 2s ease-in-out infinite}
@keyframes sl{0%{transform:translateX(-50%) scaleY(0);transform-origin:top}50%{transform:translateX(-50%) scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:translateX(-50%) scaleY(0);transform-origin:bottom}}

/* ===== page hero (sub pages) ===== */
/* 高さは 52vh → 52svh の順（トップの .hero と同じ書き方）。透過ヘッダーが重なるぶんを .phero-in の padding-top で確保する */
.phero{position:relative;min-height:52vh;min-height:52svh;display:flex;align-items:flex-end;overflow:hidden}
.phero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.phero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:kb 18s ease-out forwards}
.phero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,26,20,.72) 0%,rgba(30,26,20,.34) 55%,rgba(30,26,20,.24) 100%)}
.phero-in{position:relative;z-index:1;padding:110px 8vw 62px;max-width:1240px;width:100%}  /* 上 110px＝ヘッダー 86px＋余白 */
.phero .en-t{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;letter-spacing:.28em;color:#e7cf9a;margin-bottom:12px}
.phero h1{color:#fff;font-family:'Shippori Mincho',serif;font-size:38px;font-weight:500;letter-spacing:.08em;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.phero .lead-w{color:rgba(255,255,255,.9);font-size:14px;margin-top:16px;max-width:34em;line-height:2.1;font-weight:300}

/* breadcrumb */
.crumbs{max-width:1120px;margin:0 auto;padding:20px 34px 0;font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.14em;color:var(--ink-3)}
.crumbs a{color:var(--gold-2)}.crumbs a:hover{color:var(--gold)}
.crumbs span{margin:0 8px;opacity:.6}

/* ===== green deco（水彩グリーン素材。コンテンツ背面 z-index:0 に敷く） ===== */
img.leaf{position:absolute;z-index:0;pointer-events:none;user-select:none;-webkit-user-select:none;opacity:.5;height:auto}
/* --edge = セクション外側の余白幅。leaf の負オフセットは min(◯px,var(--edge)) で画面外に出ない */
.sec{--edge:max(0px,calc((100vw - 1120px)/2))}

/* ===== section frame ===== */
.sec{padding:110px 34px;max-width:1120px;margin:0 auto;position:relative}
.sec.narrow{max-width:920px}
/* overflow-x:clip — 透かしは nowrap なので、SP（24vw）では "Message" のような長い語が
   ボックス幅を超えて横スクロールを生む。装飾なので右端で切ってよい。
   overflow:hidden だと line-height:.8 のぶん上下も切れるため、横だけ clip する */
.watermark::before{content:attr(data-wm)}
.watermark{position:absolute;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15vw;color:var(--ink);opacity:.035;line-height:.8;z-index:0;pointer-events:none;top:44px;left:12px;white-space:nowrap;overflow-x:clip}
/* watermark serif がセクション冒頭（先頭の子）にあるときは上余白を詰める。watermark は absolute で流れに乗らないため、詰めても透かしの位置は top:44px のまま */
.sec:has(> .watermark.serif:first-child){padding-top:0}
/* 直前にリード文セクションがある場合だけ、PC で上余白を少し戻す（SP は 0 のまま） */
.sec.pt40:has(> .watermark.serif:first-child){padding-top:40px}
.sec>*{position:relative;z-index:1}
.idx{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.idx .no{font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:.14em;color:var(--gold-num)}
.idx .ln{width:40px;height:1px;background:var(--gold);opacity:.5}
.idx .lb{font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.34em;color:var(--gold-2);font-weight:600}
.sec h2{font-family:'Shippori Mincho',serif;font-size:32px;font-weight:500;line-height:1.55;letter-spacing:.06em;margin-bottom:10px}
.lead{color:var(--ink-2);font-size:15px;line-height:2.15;margin-top:20px}
.lead+.lead{margin-top:16px}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev-l .txt{order:2}
.split .ph{border-radius:4px;overflow:hidden;box-shadow:0 30px 70px rgba(38,35,30,.16);position:relative}
.split .ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.split .ph.port img{aspect-ratio:3/4}
.split .ph.low img{object-position:50% 80%}
.split .ph:hover img{transform:scale(1.05)}
.split .txt{min-width:0}

/* feature chips */
.feats{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.feats span{font-size:11.5px;letter-spacing:.08em;color:var(--gold-2);border:1px solid var(--line);background:#fff;padding:7px 14px;border-radius:20px}

/* concept band */
.band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* story quote */
.story{background:var(--ink);color:#f3ede1;text-align:center;padding:120px 28px;position:relative;overflow:hidden}
.story::before{content:'\201C';position:absolute;top:20px;left:50%;transform:translateX(-50%);font-family:'Cormorant Garamond',serif;font-size:180px;color:rgba(231,207,154,.14);line-height:1}
.story .in{position:relative;z-index:1;max-width:760px;margin:0 auto}
.story .q{font-family:'Shippori Mincho',serif;font-size:26px;line-height:2.05;letter-spacing:.06em;font-weight:400}
.story .q b{color:#e7cf9a;font-weight:600}
.story p{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}  /* 引用段落も同じ型。引用符（::before）と署名の線は中央のまま */
.story .sig{margin-top:32px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;letter-spacing:.1em;color:rgba(243,237,225,.7)}
.story .sig::before{content:'';display:block;width:40px;height:1px;background:rgba(231,207,154,.5);margin:0 auto 18px}

/* flow */
.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:4px;padding:30px 22px;position:relative}
.fcard .fno{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:600;color:var(--gold-lt);line-height:1;margin-bottom:14px}
.fcard h3{font-size:15px;font-weight:500;margin-bottom:10px;letter-spacing:.04em}
.fcard p{font-size:12.5px;color:var(--ink-2);line-height:1.95}

/* menu cards */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
/* 3列版（haircare のはじめての方メニュー等）。1枚あたりが細くなるぶん余白を詰める */
.menu-grid.c3{grid-template-columns:repeat(3,1fr);gap:16px}
.menu-grid.c1{grid-template-columns:1fr;gap:16px}
.menu-grid.c1 .mcard{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:26px;align-items:start}
.menu-grid.c1 .mhead{min-width:0}
.menu-grid.c1 .mhead .pr{margin-bottom:0}
/* 奇数枚のとき 1 枚目を 2 カラムぶん広げる（menu の「おすすめのセットメニュー」）。中身は c1 と同じ左右 2 段組み */
.menu-grid.wide-first .mcard:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:26px;align-items:start}
.menu-grid.wide-first .mcard:first-child .mhead{min-width:0}
.menu-grid.wide-first .mcard:first-child .mhead .pr{margin-bottom:0}
.menu-grid.wide-first .mcard:first-child .mdesc{margin-top:0}
.menu-grid .mcard:has(.mdesc){display:flex;flex-direction:column}
.menu-grid .mdesc{margin-top:4px;flex:1}
.mdesc{min-width:0;background:var(--gold-bg);border-left:3px solid var(--gold);border-radius:0 3px 3px 0;padding:16px 20px}
.mdesc p{margin:0}
.mdesc .mnote{margin-top:9px;font-size:11.5px;color:var(--ink-3)}
.menu-grid.c3 .mcard{padding:24px 20px 22px}
.menu-grid.c3 .mcard h3{font-size:16px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:4px;padding:28px 28px 26px;position:relative;min-width:0;transition:box-shadow .3s,transform .3s}
.mcard:hover{box-shadow:0 20px 46px rgba(38,35,30,.1);transform:translateY(-3px)}
.mcard .mno{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:.2em;color:var(--gold);margin-bottom:10px}
.mcard .mtags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.mcard .mtags span{font-size:10px;line-height:1;letter-spacing:.1em;border:1px solid;border-radius:20px;padding:5px 10px;white-space:nowrap}
.mtags .t-cut{color:#6b6459;background:#f2efe9;border-color:#ddd6c9}
.mtags .t-color{color:#8a6a35;background:#f6efe2;border-color:#dcc59a}
.mtags .t-care{color:#4f7a4a;background:#eef4ea;border-color:#c3d9bd}
.mtags .t-treat{color:#3f7c7a;background:#e9f3f2;border-color:#b6d5d3}
.mtags .t-spa{color:#9c5a72;background:#f8eef2;border-color:#e2c0cd}
.mtags .t-straight{color:#9a5f42;background:#f7eee9;border-color:#e2c3b3}
.mtags .t-gray{color:#7a6a92;background:#f2eff7;border-color:#cfc6de}
/* TOP の MENU は連番のみなので FLOW の数字（.fno 38px）と同じ大きさに揃える（他ページの mno は「SET 01」等のラベルなので据え置き） */
#menu .mcard .mno{font-size:38px;font-weight:600;letter-spacing:.04em;line-height:1;margin-bottom:12px}
.mcard h3{font-size:17px;font-weight:500;margin-bottom:5px;letter-spacing:.04em}
.mcard .pr{color:var(--gold-2);font-size:13px;font-weight:500;margin-bottom:10px;font-family:'Shippori Mincho',serif}
.mcard p{font-size:13px;color:var(--ink-2);line-height:1.95}

/* price table (menu page) */
.price-cat{margin-top:52px}
.price-cat:first-of-type{margin-top:40px}
.price-head{display:flex;align-items:baseline;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--gold);margin-bottom:6px}
.price-head .en-l{font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;color:var(--gold-2)}
.price-head h3{font-family:'Shippori Mincho',serif;font-size:19px;font-weight:500;letter-spacing:.05em}
.price-note{font-size:12px;color:var(--ink-3);margin:10px 0 4px}
.price-sub{font-family:'Shippori Mincho',serif;font-size:13px;letter-spacing:.12em;color:var(--gold-2);background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 3px 3px 0;margin:28px 0 10px;padding:9px 14px}
.price-cat .price-sub:first-of-type{margin-top:18px}
.price-sub+.price-note{margin-top:0;margin-bottom:6px}
.price-gcm{margin:12px 0 0;font-size:14.5px;color:var(--ink-3);letter-spacing:.02em}   /* 文字サイズはメニュー名（.price-row .nm）と同じ。地の文はグレー */
.price-gcm strong{font-weight:600}   /* 「グレーカラーメソッド」だけ太字（色は地の文と同じグレー） */
/* 「グレーカラーメソッドとは」ボタン。recruit-btn の小型版（注記の下に置くので一回り小さく） */
/* .recruit-btn より後ろの定義に負けないよう 2 クラスで書く */
.recruit-btn.price-gcm-btn{margin-top:8px;padding:11px 22px;font-size:12px;background:var(--gold-btn);border-color:var(--gold-btn);color:#fff}
.recruit-btn.price-gcm-btn span{color:rgba(255,255,255,.72) !important}
.recruit-btn.price-gcm-btn:hover{background:var(--gold-2);border-color:var(--gold-2)}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 4px;border-bottom:1px solid var(--line)}
/* 料金一覧（menu の price-cat 内）は見出し（price-head / price-sub）以外を 17px 下げる。price-sub 内の文字位置（左罫線 3px＋余白 14px）に揃える。他ページの price-note には効かせない */
.price-cat .price-note,.price-cat .price-gcm,.price-cat .price-row{padding-left:17px}
.price-cat .price-gcm-btn{margin-left:17px}
.price-row .nm{font-size:14.5px;color:var(--ink);min-width:0}
.price-row .nm small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;letter-spacing:.02em}
.price-row .nm small>span{display:block}
.price-row .opt{display:inline-block;font-size:9px;line-height:1;letter-spacing:.1em;color:var(--gold-2);border:1px solid var(--gold-lt);border-radius:20px;padding:4px 8px;margin-left:8px;vertical-align:1px;white-space:nowrap}
.price-note-global{margin-top:36px;background:#fff;border:1px solid var(--gold-lt);border-radius:6px;padding:14px 20px;font-size:12px;color:var(--ink-2);line-height:2}
.price-row .pr{font-family:'Shippori Mincho',serif;font-size:15px;color:var(--gold-2);white-space:nowrap;font-weight:500}

/* result */
.result-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:52px;align-items:center;margin-top:40px}
.result-wrap .ph{border-radius:4px;overflow:hidden;box-shadow:0 26px 60px rgba(38,35,30,.18);position:relative}
.result-wrap .ph img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.result-wrap .ph:hover img{transform:scale(1.05)}

/* staff */
.staff-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:44px}
.scard{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;gap:20px;align-items:center;padding:20px 22px}
.scard .sph{width:118px;flex:none;aspect-ratio:3/4;overflow:hidden;border-radius:3px}
.scard .sph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.scard:hover .sph img{transform:scale(1.05)}
.scard .sbody{min-width:0}
.scard .snm{font-size:18px;font-weight:500;letter-spacing:.05em}
.scard .snm .roma{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;color:var(--gold-2);margin-left:9px}
.scard .srole{font-size:10px;letter-spacing:.2em;color:var(--gold-2);margin-top:5px}
.scard .sbio{font-size:12px;color:var(--ink-2);line-height:1.9;margin-top:12px}

/* staff detail (staff page) */
.staff-full{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;margin-top:48px}
.staff-full.rev{grid-template-columns:1fr auto}
.staff-full.rev .sf-ph{order:2}
.staff-full .sf-ph{width:300px;border-radius:4px;overflow:hidden;box-shadow:0 26px 60px rgba(38,35,30,.16)}
.staff-full .sf-ph img{width:100%;aspect-ratio:1/1;object-fit:cover}
.staff-full .sf-body{min-width:0}
.staff-full .sf-role{font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.28em;color:var(--gold-2);font-weight:600;margin-bottom:10px}
.staff-full .sf-nm{font-family:'Shippori Mincho',serif;font-size:27px;font-weight:500;letter-spacing:.05em}
.staff-full .sf-nm .roma{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:var(--ink-3);letter-spacing:.1em;margin-top:6px}
.staff-full .sf-body p{color:var(--ink-2);font-size:14px;line-height:2.1;margin-top:20px}
.awards{list-style:none;margin-top:22px;border-top:1px solid var(--line);padding-top:8px}
.awards li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.awards li .k{font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.16em;color:var(--gold-2);flex:none;width:96px;padding-top:2px}
.awards li .v{color:var(--ink-2);min-width:0}

/* voice / reviews */
.voice-summary{display:flex;flex-wrap:wrap;gap:18px;margin-top:40px}
.vstat{flex:1 1 200px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:26px 24px;text-align:center}
.vstat .score{font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:600;color:var(--gold-2);line-height:1}
.vstat .stars{color:var(--gold);letter-spacing:2px;font-size:14px;margin:8px 0 6px}
.vstat .cnt{font-size:12px;color:var(--ink-3);letter-spacing:.06em}
.vstat .src{font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.18em;color:var(--gold-2);margin-top:12px;font-weight:600}

/* access (map main) */
.access-map{border-radius:4px;overflow:hidden;box-shadow:0 26px 60px rgba(38,35,30,.16);margin-top:40px;position:relative}
.access-map iframe{width:100%;height:460px;border:0;display:block;filter:grayscale(.12) contrast(1.02)}
.ainfo{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:22px}
.ainfo .cell{background:#fff;padding:24px 24px}
.ainfo dt{font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.2em;color:var(--gold-2);font-weight:600;margin-bottom:9px}
.ainfo dd{font-size:13.5px;color:var(--ink);line-height:1.85}

/* generic info table */
.info-table{border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:36px}
/* 色背景（.band）セクションのテーブルは白で抜く（recruit の募集要項）。access は素の .sec なので対象外 */
.band .info-table{background:#fff}
/* ラベル列は帯(--paper-2 #f3efe7)と同色だと帯が透けて見えるので、薄いベージュにして白地から浮かせる */
.band .info-table dt{background:var(--paper)}
.info-table dl{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid var(--line)}
.info-table dl:last-child{border-bottom:0}
.info-table dt{background:var(--paper-2);padding:18px 24px;font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.16em;color:var(--gold-2);font-weight:600;display:flex;align-items:center}
.info-table dd{padding:18px 24px;font-size:14px;color:var(--ink);line-height:1.9;min-width:0}

/* recruit blocks */
.rc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.rc-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:30px 26px;min-width:0}
/* 働き方カードの連番「01〜03」は数字のみなので FLOW の数字（.fno 38px）と揃える。待遇・福利厚生カードは漢字アイコンを撤去済みで .ic を使わない */
.rc-card .ic{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:600;letter-spacing:.04em;line-height:1;color:var(--gold);margin-bottom:12px}
/* 待遇・福利厚生：太字見出しを文字色変更＋アンダーラインで強調（漢字アイコンの代わりのアクセント） */
#benefits .rc-card h3{color:var(--gold-2);text-decoration:underline;text-decoration-color:var(--gold-lt);text-decoration-thickness:1.5px;text-underline-offset:4px}
.rc-card h3{font-size:16px;font-weight:500;margin-bottom:10px;letter-spacing:.03em}
.rc-card p{font-size:13px;color:var(--ink-2);line-height:1.95}

/* recruit button */
/* セクション背景が真っ白でない（--paper / --paper-2 いずれもクリーム寄り）ため、白塗りで抜いたほうがコントラストが出る */
.recruit-btn{display:inline-flex;align-items:center;margin-top:30px;background:#fff;border:1px solid var(--gold);color:var(--gold-2);padding:15px 34px;border-radius:2px;font-size:13px;letter-spacing:.14em;transition:all .25s;position:relative}
.recruit-btn:hover{background:var(--gold-btn);color:#fff}
.recruit-btn:hover span{color:rgba(255,255,255,.7) !important}
/* ボタンに添える植物のあしらい。1 ボタンにつき 1 点、位置とサイズは HTML 側 inline style で個別指定 */
/* 葉は常にボタンの前面に（ボタン背景が塗り＝不透明でも裏に隠れないよう z-index:1）。左葉の inline z-index:1 と統一 */
.btn-leaf{position:absolute;z-index:1;pointer-events:none;user-select:none;-webkit-user-select:none;opacity:.55;height:auto;transition:opacity .25s}
.recruit-btn:hover .btn-leaf{opacity:.75}

/* ネット予約への主導線ボタン（明るいセクション用の gold 塗り）。footer と同じカミングスーンの予約ページへ */
.book-btn{display:inline-flex;align-items:center;gap:10px;background:var(--gold-btn);color:#fff;padding:15px 32px;border-radius:2px;font-size:13px;letter-spacing:.14em;transition:background .25s,transform .25s;box-shadow:0 10px 26px rgba(38,35,30,.16)}
.book-btn:hover{background:var(--gold-2);transform:translateY(-2px)}
.book-btn .en{font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.14em;color:#fff}
/* .recruit-btn / .book-btn の基本定義より後ろに置く（同じ詳細度なので前だと負ける）。
   375px 以下では「グレーカラーについて詳しく GRAY COLOR」（13 字＋英字）が 34px の余白だと収まらず最後の 1 文字が落ちる。
   文字サイズは変えず、折り返しを禁じて余白と字間だけ詰める（実測 338px → 307px。360px 幅の余白 312px にも収まる） */
@media(max-width:400px){
  .recruit-btn{white-space:nowrap;padding:15px 22px;letter-spacing:.1em}
  /* スタッフ指名の予約ボタン「KANA を指名して予約する RESERVE →」も 360px で同じ折り返しになるので同じ扱い */
  .book-btn{white-space:nowrap;padding:15px 22px;letter-spacing:.1em}
}
/* 主（予約）＋副（詳細/料金）を並べる行 */
.btn-row{display:flex;gap:32px 26px;flex-wrap:wrap;align-items:center}
.btn-row.center{justify-content:center}
.btn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 26px;width:fit-content;margin:34px auto 0}
.btn-grid>a{margin-top:0;justify-content:center;text-align:center}
/* PCは横並び・SPは縦積み。recruit-btn 自身の margin-top:30px は行内だと高さがズレるため 0 に統一（gap で間隔をとる） */
.btn-row.rsv-stack .recruit-btn{margin-top:0}
/* recruit-btn は 1px の枠線を持つが book-btn は枠線なし（box-shadow のみ）。並べたときに縦幅が2px揃わないため、背景と同色の枠線で高さだけ合わせる */
.btn-row.rsv-stack .book-btn{border:1px solid var(--gold)}
@media(max-width:820px){
  .btn-row.rsv-stack{flex-direction:column;align-items:flex-start}
  .btn-grid{grid-template-columns:1fr;gap:14px;width:100%}
}
/* .split の2カラム内は列幅が常に狭く横並びが折り返してしまうため、PCでも縦積みに固定 */
.split .btn-row.rsv-stack{flex-direction:column;align-items:flex-start}

/* generic gold button */
.btn-gold{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:#fff;padding:15px 36px;border-radius:2px;font-size:13px;letter-spacing:.14em;transition:.25s;box-shadow:0 12px 30px rgba(38,35,30,.14)}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-2px)}
.btn-line{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--gold);color:var(--gold-2);padding:14px 34px;border-radius:2px;font-size:13px;letter-spacing:.14em;transition:.25s}
.btn-line:hover{background:var(--gold);color:#fff}

/* cta band (reservation) */
.cta-band{position:relative;overflow:hidden;color:#fff;text-align:center;padding:0}
.cta-band .bg{position:absolute;inset:0;z-index:0}
.cta-band .bg img{width:100%;height:100%;object-fit:cover}
.cta-band .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(26,22,17,.72),rgba(26,22,17,.6))}
.cta-band .in{position:relative;z-index:1;padding:120px 28px}
.cta-band .idx{justify-content:center}
.cta-band .idx .lb{color:#e7cf9a}.cta-band .idx .no{color:#e7cf9a}.cta-band .idx .ln{background:#e7cf9a}
.cta-band h2{color:#fff;font-family:'Shippori Mincho',serif;font-size:32px;font-weight:500}
.cta-band p{color:rgba(255,255,255,.88);font-size:14.5px;margin-top:18px;line-height:2.1;
  width:fit-content;max-width:100%;margin-inline:auto;text-align:left}  /* 長文はブロックごと中央・文字は左揃え（採用の見学カードと同じ型） */
.cta-band .btns{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta-band .b1{background:var(--gold-btn);color:#fff;padding:16px 38px;border-radius:2px;font-size:13px;letter-spacing:.14em;transition:.25s;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.cta-band .b1:hover{background:var(--gold-2);transform:translateY(-2px)}
.cta-band .b2{border:1px solid rgba(255,255,255,.6);color:#fff;padding:16px 38px;border-radius:2px;font-size:13px;letter-spacing:.14em;transition:all .25s}
.cta-band .b2:hover{background:#fff;color:var(--ink)}
.cta-band .info{margin-top:34px;display:flex;justify-content:center;gap:40px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.75);letter-spacing:.04em}
.cta-band .info b{display:block;color:#e7cf9a;font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.2em;margin-bottom:6px;font-weight:600}
.cta-band .soon{margin-top:24px;font-size:11.5px;letter-spacing:.14em;color:rgba(231,207,154,.85)}

/* footer */
.ft{background:var(--ink);color:rgba(255,255,255,.72);padding:64px 28px 34px;text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.ft .fnm{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:34px;color:#fff;margin-bottom:6px}
.ft .ftg{font-size:9px;letter-spacing:.34em;color:#e7cf9a;margin-bottom:24px}
.ft .finfo{font-size:12px;line-height:2.1;letter-spacing:.04em}
.ft .fnav{display:flex;gap:10px 20px;justify-content:center;flex-wrap:wrap;margin:24px 0;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.ft .fnav a:hover{color:#e7cf9a}
.ft .fsns{margin:22px 0 4px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.ft .fsns a{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.16em;color:#fff;border:none;border-radius:999px;padding:9px 20px;transition:transform .2s,box-shadow .2s,filter .2s;box-shadow:0 3px 12px rgba(0,0,0,.22)}
.ft .fsns a:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 5px 16px rgba(0,0,0,.28)}
.ft .fsns svg{width:15px;height:15px;fill:currentColor}
/* Instagram アイコンは均一な太さのアウトライン描画に（細い塗りグリフの弱さを回避） */
.ft .fsns .sns-ig svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
/* Instagram らしいグラデーション（鮮やかすぎない控えめトーン） */
.ft .fsns .sns-ig{background:linear-gradient(120deg,#c58a5c 0%,#c15f77 40%,#9a5aa0 72%,#5f66ac 100%)}
/* LINE らしいグリーン（鮮やかすぎない控えめトーン） */
.ft .fsns .sns-line{background:#3e845a}
.ft .fcopy{font-size:10px;color:rgba(255,255,255,.5);margin-top:24px;letter-spacing:.1em}

@media(max-width:820px){
  .leaf.sp-off{display:none}
  .hdr{padding:15px 20px}
  .hdr.scr{padding:11px 20px}
  body:not(.p-recruit) .hdr.light .nav a{color:var(--ink-2)}body:not(.p-recruit) .hdr.light .nav .book{color:var(--gold-2);border-color:var(--gold)}
  /* 高さは 100vh → 100dvh の順（iOS のツールバー下に伸びない）。中央寄せは justify-content ではなく
     .nav-in の margin:auto で取る＝収まるときは中央、溢れたら上から並んでスクロールで全項目に届く */
  .nav{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:74vw;max-width:320px;background:var(--paper);flex-direction:column;justify-content:flex-start;transform:translateX(100%);transition:transform .35s;box-shadow:-10px 0 40px rgba(0,0,0,.14);overflow-y:auto;padding:28px 0 calc(28px + env(safe-area-inset-bottom))}
  .nav-in{display:flex;flex-direction:column;align-items:center;gap:19px;width:100%;flex:none;margin:auto 0}
  .nav.on{transform:translateX(0)}
  .nav a{font-size:14px;color:var(--ink-2) !important}
  .nav a.cur{color:var(--gold-2) !important}
  .nav .book{color:var(--gold-2) !important;border-color:var(--gold)}
  .burger{display:flex;z-index:110}
  body:not(.p-recruit) .hdr.light .burger span{background:var(--ink)}
  .burger.on span{background:var(--ink)}
  .burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.on span:nth-child(2){opacity:0;transform:scaleX(0)}
  .burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{padding-top:74px}
  .hero-in{padding:0 30px}
  .hero h1{font-size:31px;line-height:1.6}.hero h1 .lg{font-size:44px}
  .hero .vlabel{display:none}
  .phero{min-height:44vh;min-height:44svh}
  .phero-in{padding:90px 26px 40px}  /* 上 90px＝ヘッダー 74px＋余白。中身が 44vh に収まらないときヘッダーの下に潜らない */
  .phero h1{font-size:27px}
  .crumbs{padding:16px 24px 0}
  .sec{padding:74px 24px}
  /* PC は 0 のまま。SP は透かしが上に被りやすいので上余白 30px を戻す */
  .sec:has(> .watermark.serif:first-child){padding-top:30px}
  /* .pt40（リード文セクション直後）は SP では上余白 0 にする */
  .sec.pt40:has(> .watermark.serif:first-child){padding-top:0}
  .watermark{font-size:24vw;top:30px}
  /* SP: テキスト列（末尾がボタンのことが多い）と画像の間を広めに取り、ボタン直下に画像が迫らないようにする */
  .split{grid-template-columns:1fr;gap:48px}
  .split.rev-l .txt{order:0}
  .flow-grid{grid-template-columns:1fr;gap:14px}
  .menu-grid,.menu-grid.c3{grid-template-columns:1fr}
  .menu-grid.c1 .mcard{grid-template-columns:1fr;gap:16px}
  .menu-grid.wide-first .mcard:first-child{grid-template-columns:1fr;gap:16px}
  .menu-grid.wide-first .mcard:first-child .mhead .pr{margin-bottom:10px}
  .menu-grid.wide-first .mcard:first-child .mdesc{margin-top:4px}
  .mdesc{padding:14px 16px 14px 15px}
  .menu-grid.c3 .mcard{padding:28px 28px 26px}
  .menu-grid.c3 .mcard h3{font-size:17px}
  .result-wrap{grid-template-columns:1fr;gap:40px}
  .staff-grid{grid-template-columns:1fr;gap:16px}
  .scard{padding:16px 18px;gap:16px}
  .scard .sph{width:96px;aspect-ratio:3/4}
  .staff-full{grid-template-columns:1fr;gap:40px}
  .staff-full.rev{grid-template-columns:1fr}
  .staff-full.rev .sf-ph{order:0}
  /* 人物写真は元画像が 330px 角。320px まで伸ばすと高解像度端末で粗く見えるので 200px で止める */
  .staff-full .sf-ph{width:100%;max-width:200px;justify-self:center}
  .awards li{flex-direction:column;gap:2px}.awards li .k{width:auto}
  .rc-grid{grid-template-columns:1fr}
  .access-map iframe{height:300px}
  .ainfo{grid-template-columns:1fr 1fr}
  .ainfo .cell{padding:18px 18px}
  .info-table dl{grid-template-columns:1fr}
  /* SP は dt が独立した色帯になるので、上下パディングを揃えてラベルを縦中央に置く（旧 14px/4px は下寄りに見えた） */
  .info-table dt{padding:9px 18px}
  .info-table dd{padding:6px 18px 16px}
  .sec h2{font-size:25px}
  .cta-band h2{font-size:25px}
  .story{padding:80px 24px}.story .q{font-size:20px;line-height:1.95}
  .cta-band .in{padding:88px 24px}
  .cta-band .info{gap:26px}
}

/* 背の低い画面（375×568 など横向きスマホ含む）: FV の装飾を消して本文の余白を詰め、ドロワーも密に */
@media(max-height:640px){
  .hero .scroll,.hero .vlabel{display:none}
  .hero .eye{margin-bottom:16px}
  .hero .sub{margin-top:16px}
  .hero .cta{margin-top:24px}
  .phero .en-t{margin-bottom:8px}
  .phero .lead-w{line-height:1.8;margin-top:10px}
  .phero-in{padding-bottom:28px}
}
@media(max-width:820px) and (max-height:640px){
  .nav{padding:18px 0 calc(18px + env(safe-area-inset-bottom))}
  .nav-in{gap:12px}
}

/* ===== nav dropdown (SERVICE) ===== */
.nav .grp{position:relative;display:flex;align-items:center}
.nav .glabel{font-size:12px;letter-spacing:.06em;color:var(--ink-2);font-weight:500;white-space:nowrap;cursor:default;display:inline-flex;align-items:center;gap:6px;transition:color .4s}
.nav .glabel::after{content:'';width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
body:not(.p-recruit) .hdr.light .nav .glabel{color:#fff}
.nav .glabel.cur{color:var(--gold-2)}
body:not(.p-recruit) .hdr.light .nav .glabel.cur{color:#e7cf9a}
.nav .gmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.nav .grp:hover .gmenu,.nav .grp:focus-within .gmenu{opacity:1;visibility:visible}
.nav .gmenu .gin{background:rgba(251,249,245,.97);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:3px;box-shadow:0 18px 44px rgba(38,35,30,.14);padding:16px 24px;display:flex;flex-direction:column;gap:14px;min-width:150px}
.nav .gmenu a{color:var(--ink-2) !important;font-size:12px}
.nav .gmenu a.cur{color:var(--gold-2) !important}
.nav .gmenu a::after{bottom:-4px}

/* ===== special menu price (旧価格→特別価格) ===== */
.mcard .pr s{color:var(--ink-3);font-weight:400;font-size:12px;margin-right:8px;text-decoration-color:rgba(138,131,120,.6)}

/* ===== flow 5 steps ===== */
.flow-grid.cols5{grid-template-columns:repeat(5,1fr);gap:16px}

/* ===== Q&A accordion ===== */
.qa-list{margin-top:44px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:16px;padding:22px 38px 22px 4px;font-size:15px;font-weight:500;letter-spacing:.03em;line-height:1.8;position:relative;transition:color .25s}
.qa summary:hover{color:var(--gold-2)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .q{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--gold);flex:none;width:22px}
.qa summary::after{content:'＋';position:absolute;right:6px;top:22px;color:var(--gold-2);font-size:15px;font-weight:300}
.qa[open] summary::after{content:'−'}
.qa .qa-a{display:flex;gap:16px;padding:2px 38px 26px 4px}
.qa .qa-a .a{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--gold-2);flex:none;width:22px}
.qa .qa-a .abody{min-width:0}
.qa .qa-a p{font-size:14px;color:var(--ink-2);line-height:2.05}
.qa .qa-a p+p{margin-top:10px}
.qa .qa-a a{color:var(--gold-2);border-bottom:1px solid var(--gold-lt)}

/* ===== news cards ===== */
.news-list{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
/* お知らせ一覧のカードは ABCMS が同じテンプレートから生成するため、
   .d1 / .d2 のような個別クラスを付けられない。表示アニメの時差は
   並び順（:nth-child）で持たせる。見た目は従来と同じ。 */
.news-list .ncard.rv:nth-child(2){transition-delay:.12s}
.news-list .ncard.rv:nth-child(3){transition-delay:.24s}
.news-list .ncard.rv:nth-child(4){transition-delay:.36s}
.news-list .ncard.rv:nth-child(5){transition-delay:.48s}
.news-list .ncard.rv:nth-child(6){transition-delay:.60s}
.ncard{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:box-shadow .3s,transform .3s}
.ncard:hover{box-shadow:0 20px 46px rgba(38,35,30,.1);transform:translateY(-3px)}
.ncard>a{display:flex;flex-direction:column;height:100%}
.ncard .nph{aspect-ratio:16/9;overflow:hidden}
.ncard .nph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ncard:hover .nph img{transform:scale(1.05)}
.ncard .nbody{padding:20px 24px 24px}
.nmeta{display:flex;align-items:center;gap:12px}
.nmeta time{font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.14em;color:var(--ink-3)}
.nmeta .ncat{font-size:10px;letter-spacing:.12em;color:var(--gold-2);border:1px solid var(--gold-lt);border-radius:20px;padding:3px 11px}
.ncard h3{font-size:15.5px;font-weight:500;letter-spacing:.03em;line-height:1.75;margin-top:10px}
.ncard .nex{font-size:12.5px;color:var(--ink-2);line-height:1.9;margin-top:8px}

/* ===== news article page ===== */
.article{max-width:760px;margin:0 auto;padding:64px 34px 110px}
.article h1{font-family:'Shippori Mincho',serif;font-size:27px;font-weight:500;line-height:1.75;letter-spacing:.05em;margin-top:16px}
.article figure{margin:36px 0 0;border-radius:4px;overflow:hidden;box-shadow:0 22px 50px rgba(38,35,30,.14)}
.article .abody p{font-size:15px;color:var(--ink-2);line-height:2.15;margin-top:22px}
.article .aback{display:inline-flex;align-items:center;gap:10px;margin-top:48px;font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.2em;color:var(--gold-2);border-bottom:1px solid var(--gold-lt);padding-bottom:3px}
.article .aback:hover{color:var(--gold)}
.article .abody h2{font-family:'Shippori Mincho',serif;font-size:19px;font-weight:500;letter-spacing:.06em;line-height:1.8;margin-top:56px}
.article .abody h2::before{content:"";display:block;width:28px;height:1px;background:var(--gold);margin-bottom:16px}
.article .abody ul{margin-top:20px;list-style:none;padding-left:0}
.article .abody li{font-size:14.5px;color:var(--ink-2);line-height:2.05;padding-left:18px;position:relative;margin-top:8px}
.article .abody li>p{margin-top:0;font-size:inherit;line-height:inherit;color:inherit}
/* 記事本文の注記は blockquote（CMS の編集画面で作れる要素に揃える）。中の p は箱の書式を継承 */
.abody blockquote>p{margin-top:0;font-size:inherit;line-height:inherit;color:inherit}
.abody li::before{content:"";position:absolute;left:2px;top:1em;width:7px;height:1px;background:var(--gold-lt)}
.article .abody blockquote{margin-top:30px;padding:20px 24px;background:#fff;border:1px solid var(--line);border-radius:4px;font-size:13.5px;color:var(--ink-2);line-height:2}

@media(max-width:820px){
  .nav .grp{display:contents}
  .nav .glabel{display:none}
  .nav .gmenu{position:static;transform:none;opacity:1;visibility:visible;padding:0;display:contents}
  .nav .gmenu .gin{display:contents}
  .nav .gmenu a{font-size:14px}
  .flow-grid.cols5{grid-template-columns:1fr;gap:14px}
  .qa summary{font-size:14px;padding:18px 32px 18px 2px}
  .qa summary::after{top:18px}
  .qa .qa-a{padding:0 32px 22px 2px}
  .news-list{grid-template-columns:1fr;gap:16px}
  .article{padding:48px 24px 80px}
  .article h1{font-size:21px}
  .article .abody h2{font-size:17.5px;margin-top:46px}
  .article .abody blockquote{padding:16px 18px}
}

/* =========================================================
   採用ページ（recruit.html）専用
   .sec h2 / .cta-band / .idx .ln / .fab-book など共通クラスも
   上書きするため、全セレクタを body.p-recruit にスコープしている。
   recruit.html の <body> に class="p-recruit" が要る。

   設計: docs/superpowers/specs/2026-07-28-recruit-new-lp-design.md
   山を3つ（FV / 共感 / 応募）作り、その間は落ち着いたトーンを維持する。
   ========================================================= */

/* --- トークン追加 --- */
/* --sumi は山1（creed）の地。--umber はページ内の全CTA（帯）と応募の地。
   相談導線はすべて焦茶の帯で表すので、CTAだと分かる色が1つに決まる。 */
/* --brand-line は footer の SNS ボタン（.sns-line）と同じ控えめグリーン。
   LINE 公式の #06C755 ではなくこちらを使うのは、サロンのトーンに馴染ませるため */
body.p-recruit{ --sumi:#17150f; --umber:#3a2a18; --brick:#a8391f; --brand-line:#4a9d6b; }

/* --- CTA の上を光がゆっくり流れる（hideouthair.com の採用ページを参考） ---
   色は足さず、白の反射だけ。LINEボタンにだけ付ける */
body.p-recruit .shine{position:relative;overflow:hidden}
body.p-recruit .shine::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  animation:sheen 4.6s ease-in-out infinite}
@keyframes sheen{0%{left:-100%}42%{left:160%}100%{left:160%}}

/* =========================================================
   LINE ボタン（ページ内の連絡手段は LINE 1本。見た目も1種類に統一する）
   採用の相談は求人用の LINE（ご予約用とは別の窓口）で受ける。
   ヒーロー・帯・応募・追従バーで同じ形にして、どこで読み止めても
   同じ顔のボタンが見つかるようにする。
   ========================================================= */
body.p-recruit .lnbtn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  width:100%;max-width:360px;padding:18px 26px;border-radius:999px;
  background:var(--brand-line);border:1px solid var(--brand-line);color:#fff;
  font-size:15.5px;font-weight:500;letter-spacing:.06em;line-height:1.5;transition:.25s;
  box-shadow:0 10px 26px rgba(74,157,107,.3)}
body.p-recruit .lnbtn svg{width:22px;height:22px;flex:none;fill:currentColor}
/* 押せることを示す矢印。::after は .shine の反射に使っているので ::before を order で末尾へ回す */
body.p-recruit .lnbtn::before{content:'›';order:9;font-family:'Cormorant Garamond',serif;font-size:23px;
  line-height:1;opacity:.85}
body.p-recruit .lnbtn:hover{filter:brightness(1.08);transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(74,157,107,.38)}
/* 焦茶の地の上では緑の落ち影が沈むので、グロー＋深い影で浮かせる */
body.p-recruit .midcta .lnbtn,body.p-recruit .cta-band .lnbtn{box-shadow:0 0 30px rgba(74,157,107,.26),0 14px 32px rgba(0,0,0,.4)}
body.p-recruit .midcta .lnbtn:hover,body.p-recruit .cta-band .lnbtn:hover{box-shadow:0 0 40px rgba(74,157,107,.36),0 18px 38px rgba(0,0,0,.45)}

/* =========================================================
   FV（hideouthair.com の採用ページの見せ方に寄せる）
   全幅の暗い写真1枚から、「写真のコラージュ＋帯の見出し＋キャッチ＋
   条件バッジ＋LINE」を1画面に収める形へ。何の募集か・どんなサロンか・
   条件・連絡先が、スクロールする前に分かる状態にする。
   クラス名を .phero から変えているのは、main.js が `.hero, .phero` を見て
   ヘッダーを白抜き（.hdr.light）にするため。明るいFVでは白抜きだと文字が消える。
   ========================================================= */
body.p-recruit .rhero{position:relative;overflow:hidden;text-align:center;padding:120px 24px 76px;
  background:linear-gradient(180deg,#fdfbf7 0%,var(--paper) 44%,var(--paper-2) 100%);
  border-bottom:1px solid var(--line)}
/* テクスチャ画像を足さずに面の単調さを消す（hideout は漆喰テクスチャ、こちらは金の光） */
body.p-recruit .rhero::before{content:'';position:absolute;left:50%;top:-18%;width:130%;height:72%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,167,104,.18) 0%,rgba(201,167,104,0) 70%)}
body.p-recruit .rhero-in{position:relative;z-index:1;max-width:620px;margin:0 auto}
body.p-recruit .rhero .eyebrow{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;
  letter-spacing:.3em;color:var(--gold-2);margin-bottom:22px}

/* 写真は2枚重ね。小さい方を右下にずらして、静止画1枚より動きのある入口にする */
body.p-recruit .rhero-ph{position:relative;max-width:560px;margin:0 auto 92px}
body.p-recruit .rhero-ph picture{display:block}
body.p-recruit .rhero-ph .ph-main img{width:100%;height:300px;object-fit:cover;border-radius:14px;
  box-shadow:0 10px 34px rgba(38,35,30,.16)}
body.p-recruit .rhero-ph .ph-sub{position:absolute;right:-8px;bottom:-66px;width:36%}
body.p-recruit .rhero-ph .ph-sub img{width:100%;height:196px;object-fit:cover;border-radius:12px;
  border:4px solid #fdfbf7;box-shadow:0 8px 24px rgba(38,35,30,.22)}
/* 見出しは写真の上に置く帯。hideout はオレンジ、こちらは墨地＋金の罫でトーンを合わせる。
   top を 42% にしているのは、右下にずらした小写真の上端と帯が重ならない位置に上げるため */
body.p-recruit .rhero-band{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:2;
  background:rgba(23,21,15,.9);color:#f3ede1;font-family:'Shippori Mincho',serif;
  font-size:29px;font-weight:500;letter-spacing:.18em;line-height:1.5;white-space:nowrap;
  padding:13px 34px;border:1px solid rgba(231,207,154,.55);border-radius:3px;
  box-shadow:0 10px 30px rgba(0,0,0,.3)}

/* キャッチは左右にずらした2行。強調語の下に金のマーカーを引く（hideout の組み方） */
body.p-recruit .rhero-desc{max-width:430px;margin:0 auto;font-family:'Shippori Mincho',serif;color:var(--ink)}
body.p-recruit .rhero-desc .pre{font-size:17px;font-weight:500;letter-spacing:.08em;line-height:1.5;text-align:left}
body.p-recruit .rhero-desc .l1{text-align:left;padding-left:14px;line-height:1.3}
body.p-recruit .rhero-desc .l2{text-align:right;line-height:1.3;margin-top:2px}
body.p-recruit .rhero-desc .ul{position:relative;z-index:0;display:inline-block}
body.p-recruit .rhero-desc .ul::after{content:'';position:absolute;left:0;right:0;bottom:5px;height:9px;z-index:-1;
  background:var(--gold-lt);opacity:.5;border-radius:8px}
body.p-recruit .rhero-desc strong{font-size:34px;font-weight:600;letter-spacing:.04em}
body.p-recruit .rhero-desc small{font-size:21px;font-weight:500;letter-spacing:.06em}
body.p-recruit .rhero-sub{margin-top:26px;font-family:'Shippori Mincho',serif;font-size:16px;font-weight:500;
  line-height:2;letter-spacing:.06em;color:var(--ink-2)}

/* 条件バッジ。hideout はメダル画像だが素材が無いので、金の枠のチップで作る */
body.p-recruit .rhero-badges{margin:30px auto 0;max-width:470px;display:flex;flex-direction:column;gap:9px}
body.p-recruit .rhero-badges .row{display:flex;gap:9px}
body.p-recruit .rhero-badges .bd{flex:1 1 0;min-width:0;background:#fff;border:1px solid var(--gold-lt);
  border-radius:6px;padding:13px 12px;box-shadow:0 2px 8px rgba(176,138,74,.12)}
body.p-recruit .rhero-badges .t{font-size:14px;font-weight:500;letter-spacing:.03em;line-height:1.6;color:var(--gold-2)}
body.p-recruit .rhero-badges .s{font-size:11.5px;color:var(--ink-3);line-height:1.75;margin-top:4px}
body.p-recruit .rhero-badges .wide .t{font-family:'Shippori Mincho',serif;font-size:18px}
body.p-recruit .rhero-badges .wide .amt{font-size:26px;font-weight:600;letter-spacing:.02em;margin:0 3px}

body.p-recruit .rhero-cta{margin-top:32px}
body.p-recruit .rhero-note{margin-top:18px;font-size:12.5px;line-height:1.95;color:var(--ink-3);letter-spacing:.03em}
body.p-recruit .rhero-cond{margin-top:16px;font-size:11.5px;line-height:1.85;color:var(--ink-3);opacity:.85}
/* 2 段落とも長文なので、見学カードと同じくブロックごと中央・文字は左揃え */
body.p-recruit .rhero-note,body.p-recruit .rhero-cond{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}

/* --- 見出しスケール（このページだけ大きく。本文は据え置き） --- */
body.p-recruit .sec h2{font-size:44px;line-height:1.45}
body.p-recruit .cta-band h2{font-size:44px;line-height:1.45}
body.p-recruit .stat .v{font-size:46px}
/* 見出しを大きくしたぶん行長も伸びるので、h2 直後のリードだけ 40em で止める。
   小見出し（.subh）や h3 の後のリードは対象外。
   .sec は 1120px 左揃えなので、幅を絞っても中央寄せは崩れない */
body.p-recruit h2+.lead{max-width:40em}
/* 大事な数字・特にアピールしたい言葉。ゴールドより一段強い赤茶で、
   拾い読みでも要点が目に留まるようにする。1セクション1〜2箇所に絞る */
body.p-recruit .hl{color:var(--brick);font-weight:500}

/* --- 山1: 共感（全幅・墨地） --- */
body.p-recruit .creed{position:relative;overflow:hidden;background:var(--sumi);color:#f3ede1;padding:130px 30px}
body.p-recruit .creed-bg{position:absolute;inset:0;z-index:0}
body.p-recruit .creed-bg img{width:100%;height:100%;object-fit:cover;opacity:.26}
body.p-recruit .creed-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(125% 95% at 50% 42%,rgba(23,21,15,.5) 0%,rgba(23,21,15,.93) 72%)}
body.p-recruit .creed-in{position:relative;z-index:1;max-width:1000px;margin:0 auto;text-align:center}
body.p-recruit .creed .eyebrow{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;
  letter-spacing:.3em;color:#e7cf9a;margin-bottom:46px}
body.p-recruit .creed-q{font-family:'Shippori Mincho',serif;font-size:40px;font-weight:500;
  line-height:1.95;letter-spacing:.07em}
body.p-recruit .creed-q .l{display:block}
body.p-recruit .creed-a{margin:44px auto 0;max-width:30em;font-size:16px;line-height:2.3;
  letter-spacing:.06em;color:rgba(243,237,225,.85)}
body.p-recruit .creed .sig{margin-top:46px;font-size:12.5px;letter-spacing:.18em;color:rgba(243,237,225,.72)}
body.p-recruit .creed .sig::before{content:'';display:block;width:40px;height:1px;
  background:rgba(231,207,154,.5);margin:0 auto 20px}
body.p-recruit .creed .sig b{font-family:'Shippori Mincho',serif;font-size:15px;font-weight:500;
  color:#e7cf9a;letter-spacing:.1em;margin-left:10px}

/* =========================================================
   CTA の帯（ページ内のすべての相談導線をこの1つの見た目に統一する）
   焦茶（--umber）の全幅の帯に、「まずは、聞いてみる」＋LINEボタン＋注記。
   情報のブロックが終わるたびに同じ形で現れるので、
   どこで読み止めても同じ顔の連絡先が見つかる。
   帯の中身は全部の帯で同じにして、読み手が毎回読み直さずに済むようにする。
   ========================================================= */
body.p-recruit .midcta{background:var(--umber);
  border-top:1px solid rgba(231,207,154,.35);border-bottom:1px solid rgba(231,207,154,.35)}
body.p-recruit .midcta-in{max-width:640px;margin:0 auto;padding:58px 34px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:19px}
body.p-recruit .midcta .msg{font-family:'Shippori Mincho',serif;font-size:23px;font-weight:500;
  line-height:1.8;letter-spacing:.08em;color:#f3ede1}
body.p-recruit .midcta .note{margin-top:-5px;font-size:12px;line-height:1.9;
  color:rgba(243,237,225,.6);letter-spacing:.04em}

/* =========================================================
   一覧系コンポーネントの「面」
   カードをやめた 04 / 06 / 08 は、地の上に文字が直に載って
   輪郭が消えていた。カードが占めていた白い層を面として復活させ、
   「セクションの地 → 白い面 → 項目」の3層を保つ。
   面の中の組み方（2列リスト / 縦ステップ / 金額リスト）で
   セクションごとの違いを出す。
   ========================================================= */
body.p-recruit .envlist,body.p-recruit .benefits,body.p-recruit .steps{background:#fff;border:1px solid var(--line);border-radius:4px;
  box-shadow:0 1px 3px rgba(38,35,30,.04)}
/* 2列の罫線リスト（04 働く環境 / 08 福利厚生）は寸法を共有して揃える */
body.p-recruit .envlist,body.p-recruit .benefits{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;padding:24px 56px}

/* --- 09 こんな方と、働きたい（PC 2列。インライン style だと SP の 1 列指定に勝ってしまうのでクラスで持つ） ---
   コンテナ幅を2/3にして、01〜08のカード（3列グリッドの1/3幅）とカードサイズを揃える */
body.p-recruit .rc-2{grid-template-columns:1fr 1fr;max-width:66.6667%;margin-left:auto;margin-right:auto}

/* --- 04 働く環境（一覧。各項目は見出し＋1行説明） --- */
body.p-recruit .envlist{list-style:none;margin-top:40px}
body.p-recruit .envlist li{border-bottom:1px solid var(--line);padding:17px 2px;min-width:0;
  display:flex;flex-direction:column;justify-content:center}
body.p-recruit .envlist li:nth-last-child(-n+2){border-bottom:0}
body.p-recruit .envlist .h{font-size:15.5px;font-weight:500;letter-spacing:.03em;line-height:1.7;color:var(--ink)}
body.p-recruit .envlist .s{font-size:12.5px;color:var(--ink-3);line-height:1.85;margin-top:5px}

/* --- 06 研修（6ヶ月の順序があるので縦のステップで見せる） --- */
body.p-recruit .steps{list-style:none;margin-top:46px;padding:46px 48px}
body.p-recruit .steps li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:30px;padding-bottom:36px}
body.p-recruit .steps li:last-child{padding-bottom:0}
/* 番号どうしを縦線で繋いで順序を示す */
body.p-recruit .steps li:not(:last-child)::before{content:'';position:absolute;left:28px;top:58px;bottom:0;
  width:1px;background:var(--gold-lt);opacity:.5}
body.p-recruit .steps .st-n{position:relative;z-index:1;flex:none;width:57px;height:57px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);border:1px solid var(--gold);color:#fff;
  font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;letter-spacing:.06em;
  box-shadow:0 6px 16px rgba(176,138,74,.28)}
body.p-recruit .steps .st-b{min-width:0;padding-top:11px}
body.p-recruit .steps .st-b h3{font-family:'Shippori Mincho',serif;font-size:19px;font-weight:500;
  letter-spacing:.05em;line-height:1.7;margin-bottom:9px}
body.p-recruit .steps .st-b p{font-size:14px;color:var(--ink-2);line-height:2.05}

/* --- 08 福利厚生（金額を右に大きく出す） --- */
body.p-recruit .benefits{margin-top:44px}
body.p-recruit .bf{border-bottom:1px solid var(--line);padding:19px 2px;min-width:0}
body.p-recruit .bf:nth-last-child(-n+2){border-bottom:0}
body.p-recruit .bf .top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
body.p-recruit .bf dt{font-size:15.5px;font-weight:500;letter-spacing:.03em;line-height:1.7;color:var(--ink);min-width:0}
body.p-recruit .bf .v{flex:none;font-family:'Shippori Mincho',serif;font-size:22px;font-weight:500;
  color:var(--gold-2);letter-spacing:.02em;line-height:1.3;white-space:nowrap}
body.p-recruit .bf .v .u{font-family:'Noto Sans JP',sans-serif;font-size:12px;margin-left:2px}
body.p-recruit .bf dd{font-size:12.5px;color:var(--ink-3);line-height:1.85;margin-top:6px}

/* --- 10 募集要項（職種カード。hideouthair.com の採用ページを参考） ---
   ページ全体に散っている条件を、職種ごとに1枚へまとめる。
   値は体言止めで事実だけを並べる（文章体や※注記に事実を逃さない）。
   PC は2職種を横並びにする。カード幅が半分になるため、行の組みは
   幅を問わず「項目名を上に置く2段」（狭幅と同じ形）で通す。 */
body.p-recruit .jobs{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-top:44px}
body.p-recruit .job{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:6px 34px 16px;box-shadow:0 1px 3px rgba(38,35,30,.04);min-width:0}
body.p-recruit .job__ttl{font-family:'Shippori Mincho',serif;font-size:20px;font-weight:500;letter-spacing:.1em;
  text-align:center;color:var(--ink);padding:22px 0 16px;border-bottom:1px solid var(--gold);margin-bottom:4px}
body.p-recruit .job__row{display:flex;flex-direction:column;gap:6px;padding:16px 2px;border-bottom:1px solid var(--line);min-width:0}
body.p-recruit .job__row:last-child{border-bottom:0}
/* 項目名は先頭に細いゴールドの縦バーを添えた見出し */
body.p-recruit .job__k{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;
  letter-spacing:.16em;color:var(--gold-2)}
body.p-recruit .job__k::before{content:"";flex:none;width:3px;height:15px;background:var(--gold);border-radius:1px}
body.p-recruit .job__v{min-width:0;flex:1 1 auto;font-size:14px;line-height:1.95;color:var(--ink)}
body.p-recruit .job__v small{display:block;font-size:12px;color:var(--ink-3);line-height:1.85;margin-top:5px}
/* 金額行は 08 福利厚生と同じ組み（項目を左、金額を右に大きく） */
body.p-recruit .job__v .pay{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:5px 0;border-bottom:1px dotted var(--line)}
body.p-recruit .job__v .pay:last-of-type{border-bottom:0}
body.p-recruit .job__v .pay .amt{flex:none;font-family:'Shippori Mincho',serif;font-size:17px;font-weight:500;
  color:var(--gold-2);white-space:nowrap}
/* 狭い画面では項目名を割らず、金額側（レンジの 〜 の後）で折る */
body.p-recruit .job__v .pay>span:first-child{white-space:nowrap}
body.p-recruit .job__v .pay .amt--wrap{flex:0 1 auto;white-space:normal;text-align:right}

/* --- 数値の強調（サロンの特徴） --- */
body.p-recruit .stat-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
body.p-recruit .stat{flex:1 1 190px;min-width:0;background:var(--gold-bg);border:1px solid var(--gold-lt);border-radius:4px;padding:30px 20px;text-align:center}
body.p-recruit .stat .v{font-family:'Noto Sans JP',sans-serif;font-weight:700;color:var(--gold-2);line-height:1.3;letter-spacing:.02em}
body.p-recruit .stat .v .unit{font-size:15px}
/* ラベルは和文。Cormorant の .24em はラテン大文字用の字間なので日本語向けに詰める */
body.p-recruit .stat .k{font-family:'Noto Sans JP',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.12em;color:var(--gold-2);margin-top:13px}

/* --- スマホ追従の応募バー --- */
body.p-recruit .entrybar{display:none}
/* main.js の FAB_ENABLED を将来 true に戻したとき、追従バーと重ならないように */
body.p-recruit .fab-book{display:none !important}

/* --- ゴールドの罫が伸びる --- */
body.p-recruit .idx .ln{transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.7,.2,1) .25s}
body.p-recruit .idx.in .ln,body.p-recruit .cta-band .idx .ln{transform:scaleX(1)}
body.p-recruit .subh::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) .15s}
body.p-recruit .subh.in::after{transform:scaleX(1)}

/* --- 応募（ページの着地点。CTAの見た目は上の帯と同じ焦茶に揃え、寸法だけ大きくする） ---
   写真の背景をやめて帯と同じ地にしたのは、ページ内のCTAを1つの顔に統一するため。
   高さ・見出しのサイズ・安心の3点で、途中の帯より一段大きく見せて着地点にする。 */
body.p-recruit .cta-band{background:var(--umber);border-top:1px solid rgba(231,207,154,.35)}
body.p-recruit .cta-band .in{padding:108px 28px}
body.p-recruit .cta-band .btns{gap:16px;margin-top:36px}
/* 応募の手前で不安を落とす3点（「見学だけでもOK」等） */
body.p-recruit .assure{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:34px auto 0;max-width:600px}
body.p-recruit .assure div{flex:1 1 168px;min-width:0;padding:15px 13px;border-radius:6px;
  border:1px solid rgba(231,207,154,.4);background:rgba(255,255,255,.045);
  font-size:12.5px;line-height:1.8;color:rgba(243,237,225,.82);letter-spacing:.02em}
body.p-recruit .assure b{display:block;margin-bottom:5px;font-family:'Shippori Mincho',serif;font-size:15px;
  font-weight:500;letter-spacing:.05em;color:#e7cf9a}

@media(prefers-reduced-motion:reduce){
  body.p-recruit .idx .ln,body.p-recruit .subh::after{transition:none;transform:scaleX(1)}
  body.p-recruit .shine::after{animation:none;opacity:0}
}

/* --- 汎用テーブル（給与・歩合・早上がり・施術時間） --- */
body.p-recruit .gtable{width:100%;border-collapse:collapse;margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
body.p-recruit .band .gtable{background:#fff}
body.p-recruit .gtable caption{caption-side:top;text-align:left;font-size:13px;color:var(--ink-3);padding-bottom:10px;letter-spacing:.03em}
body.p-recruit .gtable th,body.p-recruit .gtable td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;line-height:1.85;min-width:0}
body.p-recruit .gtable thead th{background:var(--paper-2);font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.16em;color:var(--gold-2);font-weight:600;white-space:nowrap}
body.p-recruit .gtable thead th.ja{font-family:'Noto Sans JP',sans-serif;font-size:12px;letter-spacing:.08em}
body.p-recruit .gtable tbody th{font-weight:500;color:var(--ink);white-space:nowrap}
body.p-recruit .gtable tbody tr:last-child th,body.p-recruit .gtable tbody tr:last-child td{border-bottom:0}
body.p-recruit .gtable .amt{font-family:'Shippori Mincho',serif;font-size:16px;color:var(--gold-2);font-weight:500;white-space:nowrap}
body.p-recruit .gtable .sub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px;letter-spacing:.02em}
body.p-recruit .gtable td.num{white-space:nowrap}
body.p-recruit .tnote{font-size:12.5px;color:var(--ink-3);margin-top:12px;line-height:1.9}

/* 店舗見学は「番号付きセクションの並び」から切り離し、中央寄せの案内カードとして見せる。
   上下が band（薄紙）と cta-band（濃茶）に挟まれるため、白地＋brick のトップラインで差をつける */
body.p-recruit .visit-card{max-width:720px;margin-inline:auto;text-align:center;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--brick);
  border-radius:4px;padding:54px 44px;box-shadow:0 24px 60px rgba(38,35,30,.08)}
body.p-recruit .visit-card .idx{justify-content:center;margin-bottom:16px}
/* 左右にラインを置く中央組み。リビール（scaleX(0)→1）は左原点なので、ここでは最初から出す */
body.p-recruit .visit-card .idx .ln{width:32px;transform:scaleX(1)}
/* 本文は「ブロックごと中央に置き、中の文字は左揃え」。text-align:center だと
   折り返した行の左端が揃わず読みにくいため、揃えるのは行頭であって行長ではない。
   width:fit-content + margin-inline:auto でブロック自体を中央に寄せる。
   折り返し自体は .kp（keep-all）ではなく .body-text でブラウザの禁則に任せる */
body.p-recruit .visit-card .lead{
  width:fit-content;max-width:30em;margin-inline:auto;text-align:left}
/* 強調した短い語（「ご来店」）が行をまたいで割れると目立つので、そこだけ折り返さない */
body.p-recruit .visit-card .lead .hl{white-space:nowrap}
/* 注記も同じ扱い。幅は絞らない（絞ると 12.5px の 30em＝375px で不要な折り返しが出る） */
body.p-recruit .visit-card .tnote{
  width:fit-content;max-width:100%;margin-inline:auto;text-align:left}

/* 店舗見学の特典 */
body.p-recruit .visit-offer{margin-top:26px;padding:20px 26px;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px 18px;width:fit-content;
  background:var(--paper-2);border-left:3px solid var(--brick);border-radius:3px}
/* カード内は中央組みなので、左だけの太線ではなく全周の細線にする */
body.p-recruit .visit-card .visit-offer{margin-inline:auto;justify-content:center;
  border:1px solid var(--brick)}
body.p-recruit .visit-offer__label{font-size:12.5px;line-height:1;letter-spacing:.1em;color:var(--ink-2)}
body.p-recruit .visit-offer__main{display:flex;align-items:center;gap:12px;
  font-family:'Shippori Mincho',serif;font-size:20px;line-height:1;letter-spacing:.06em;color:var(--brick)}
body.p-recruit .visit-offer__main b{font-size:27px;line-height:1;font-weight:600}
@media(max-width:820px){
  body.p-recruit .visit-card{padding:38px 22px}
  body.p-recruit .visit-offer{padding:18px 20px;width:auto}
  body.p-recruit .visit-offer__main{font-size:18px}
  body.p-recruit .visit-offer__main b{font-size:24px}
}

/* --- 引用（研修の考え方など） --- */
body.p-recruit .pull{margin-top:40px;padding:30px 34px;background:#fff;border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:4px}
body.p-recruit .band .pull{background:#fff}
body.p-recruit .pull p{font-family:'Shippori Mincho',serif;font-size:19px;line-height:2;letter-spacing:.05em;color:var(--ink)}
body.p-recruit .pull p b{color:var(--gold-2);font-weight:600}

/* --- チェックリスト（求める条件） --- */
body.p-recruit .checks{list-style:none;margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
body.p-recruit .checks li{position:relative;padding-left:30px;font-size:14.5px;color:var(--ink);line-height:1.95;min-width:0}
body.p-recruit .checks li::before{content:'';position:absolute;left:4px;top:.72em;width:11px;height:6px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}

/* --- 小見出し（セクション内の区切り） --- */
body.p-recruit .subh{position:relative;display:flex;align-items:baseline;gap:14px;margin-top:60px;padding-bottom:12px}
body.p-recruit .subh .en-l{font-family:'Cormorant Garamond',serif;font-size:20px;font-style:italic;color:var(--gold-2)}
body.p-recruit .subh h3{font-family:'Shippori Mincho',serif;font-size:19px;font-weight:500;letter-spacing:.05em}
body.p-recruit .subh+.lead{margin-top:18px}

/* --- 応募 CTA の連絡先行 --- */
body.p-recruit .entry-lines{margin-top:30px;display:flex;flex-direction:column;gap:10px;align-items:center;font-size:13px;color:rgba(255,255,255,.8);letter-spacing:.04em}
body.p-recruit .entry-lines a{color:#e7cf9a;border-bottom:1px solid rgba(231,207,154,.5)}

/* --- セクション折りたたみ（アコーディオン） ---
   ページ全高を抑えるため、全セクションを <details class="fold"> で畳む。
   ヘッダー行は従来のセクション見出し（idx + h2）を圧縮して流用し、
   見出し実体（h2）は summary 側に置く（本文側からは除去済み）。 */
body.p-recruit .fold{border-top:1px solid var(--line)}
body.p-recruit .fold:first-of-type{margin-top:40px}
body.p-recruit .fold:last-of-type{border-bottom:1px solid var(--line)}
body.p-recruit .fold-hd{max-width:1120px;margin:0 auto;padding:30px 34px;
  display:flex;align-items:center;gap:22px;cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent}
body.p-recruit .fold-hd::-webkit-details-marker{display:none}
body.p-recruit .fold-hd::marker{content:''}
body.p-recruit .fold-hd .fh-in{display:block;min-width:0}
body.p-recruit .fold-hd .idx{margin-bottom:8px}
body.p-recruit .fold-hd .idx .ln{transform:scaleX(1)}  /* リビール無しで最初から線を出す */
body.p-recruit .fold-hd h2{font-family:'Shippori Mincho',serif;font-size:23px;font-weight:500;
  line-height:1.55;letter-spacing:.06em;margin:0;transition:color .25s}
body.p-recruit .fold-hd:hover h2{color:var(--gold-2)}
/* 開閉アイコン（＋ ⇄ −） */
body.p-recruit .fh-ic{flex:none;margin-left:auto;width:38px;height:38px;border:1px solid var(--gold);
  border-radius:50%;position:relative;opacity:.85;transition:background .25s}
body.p-recruit .fh-ic::before,body.p-recruit .fh-ic::after{content:'';position:absolute;left:50%;top:50%;
  width:14px;height:1px;background:var(--gold-2);transform:translate(-50%,-50%);transition:transform .3s}
body.p-recruit .fh-ic::after{transform:translate(-50%,-50%) rotate(90deg)}
body.p-recruit .fold[open] .fh-ic{background:var(--gold-bg)}
body.p-recruit .fold[open] .fh-ic::after{transform:translate(-50%,-50%) rotate(0deg)}
/* 見出しは summary 側にあるため、開いた本文の上余白を詰める */
body.p-recruit .fold>.sec,body.p-recruit .fold>.band>.sec{padding-top:34px}
body.p-recruit .fold>.cta-band .in{padding-top:64px}
/* fold の区切り線と band 自前の線が二重にならないようにする */
body.p-recruit .fold>.band{border-top:0;border-bottom:0}
/* 高さアニメーション（対応ブラウザのみ。非対応は即時開閉のフォールバック） */
@supports (interpolate-size: allow-keywords){
  body.p-recruit .fold{interpolate-size:allow-keywords}
  body.p-recruit .fold::details-content{block-size:0;overflow-y:clip;
    transition:block-size .5s cubic-bezier(.2,.7,.2,1),content-visibility .5s allow-discrete}
  body.p-recruit .fold[open]::details-content{block-size:auto}
}

@media(max-width:820px){
  /* テーブルはカード積みに変換（横スクロールを出さない） */
  body.p-recruit .gtable{border:0;background:transparent}
  body.p-recruit .gtable thead{display:none}
  body.p-recruit .gtable tbody,body.p-recruit .gtable tr,body.p-recruit .gtable th,body.p-recruit .gtable td{display:block;width:100%}
  body.p-recruit .gtable tr{background:#fff;border:1px solid var(--line);border-radius:4px;margin-bottom:12px;padding:6px 0}
  body.p-recruit .gtable tr:last-child{margin-bottom:0}
  body.p-recruit .gtable tbody th{border-bottom:1px solid var(--line);padding:12px 18px;color:var(--gold-2);font-size:13.5px}
  /* ラベルだけ左に固定（margin-right:auto）し、値側の要素はすべて右に寄せて隣接させる。
     space-between だと「70万」と「以上」が左右に離れてしまうため */
  body.p-recruit .gtable td{border-bottom:0;padding:9px 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
  body.p-recruit .gtable td::before{content:attr(data-l);margin-right:auto;flex:none;font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}
  body.p-recruit .gtable td:not([data-l])::before{display:none}
  body.p-recruit .gtable td .sub{flex-basis:100%;text-align:right;margin-top:2px}
  body.p-recruit .gtable .amt{font-size:15px}
  body.p-recruit .stat-row{gap:10px}
  body.p-recruit .stat{flex:1 1 100%;padding:24px 16px}
  body.p-recruit .pull{padding:24px 22px}
  body.p-recruit .pull p{font-size:16.5px;line-height:1.95}
  body.p-recruit .checks{grid-template-columns:1fr;gap:10px}
  /* 英字ラベルが折り返して「6 / months」と縦割れするのを防ぐ */
  body.p-recruit .subh{margin-top:48px;flex-direction:column;align-items:flex-start;gap:2px}
  body.p-recruit .subh .en-l{font-size:17px}

  /* FV（写真を低く、帯とキャッチを1段小さく。重ねた小写真のぶんの余白は残す） */
  body.p-recruit .rhero{padding:96px 20px 58px}
  body.p-recruit .rhero .eyebrow{font-size:12.5px;margin-bottom:16px}
  body.p-recruit .rhero-ph{margin-bottom:74px}
  body.p-recruit .rhero-ph .ph-main img{height:210px;border-radius:12px}
  body.p-recruit .rhero-ph .ph-sub{right:-4px;bottom:-54px;width:38%}
  body.p-recruit .rhero-ph .ph-sub img{height:146px;border-width:3px}
  body.p-recruit .rhero-band{font-size:20px;letter-spacing:.14em;padding:11px 22px}
  body.p-recruit .rhero-desc{max-width:320px}
  body.p-recruit .rhero-desc .pre{font-size:14.5px}
  body.p-recruit .rhero-desc strong{font-size:26px}
  body.p-recruit .rhero-desc small{font-size:16px}
  body.p-recruit .rhero-desc .ul::after{height:7px;bottom:4px}
  body.p-recruit .rhero-sub{margin-top:20px;font-size:14.5px;line-height:1.95}
  body.p-recruit .rhero-badges{margin-top:24px;max-width:none}
  /* 狭幅では2つ並べると1行に収まらないので、3枚とも縦積みにする */
  body.p-recruit .rhero-badges .row{flex-direction:column;gap:9px}
  body.p-recruit .rhero-badges .bd{padding:12px 14px}
  body.p-recruit .rhero-badges .t{font-size:13.5px}
  body.p-recruit .rhero-badges .wide .t{font-size:16.5px}
  body.p-recruit .rhero-badges .wide .amt{font-size:23px}
  body.p-recruit .rhero-cta{margin-top:26px}

  /* 見出しスケール */
  body.p-recruit .sec h2{font-size:27px;line-height:1.6}
  body.p-recruit .cta-band h2{font-size:27px;line-height:1.6}
  body.p-recruit .stat .v{font-size:28px}

  /* 山1 */
  body.p-recruit .creed{padding:90px 24px}
  body.p-recruit .creed .eyebrow{font-size:13px;margin-bottom:32px}
  body.p-recruit .creed-q{font-size:22px;line-height:2.05}
  body.p-recruit .creed-a{margin-top:32px;font-size:14px;line-height:2.15}
  body.p-recruit .creed .sig{margin-top:34px}

  /* CTA の帯 */
  body.p-recruit .midcta-in{padding:44px 24px;gap:17px}
  body.p-recruit .midcta .msg{font-size:19.5px;line-height:1.85}
  body.p-recruit .lnbtn{padding:16px 20px;font-size:14.5px;gap:9px}
  body.p-recruit .lnbtn svg{width:20px;height:20px}

  /* 研修のステップ */
  body.p-recruit .steps{margin-top:36px;padding:28px 22px}
  body.p-recruit .steps li{gap:18px;padding-bottom:28px}
  body.p-recruit .steps li:not(:last-child)::before{left:23px;top:48px}
  body.p-recruit .steps .st-n{width:47px;height:47px;font-size:18px}
  body.p-recruit .steps .st-b{padding-top:7px}
  body.p-recruit .steps .st-b h3{font-size:17px}
  body.p-recruit .steps .st-b p{font-size:13.5px;line-height:2}

  /* セクション折りたたみ */
  body.p-recruit .fold-hd{padding:22px 24px;gap:14px}
  body.p-recruit .fold-hd .idx{margin-bottom:6px}
  body.p-recruit .fold-hd h2{font-size:18.5px;line-height:1.6}
  body.p-recruit .fh-ic{width:32px;height:32px}
  body.p-recruit .fold>.sec,body.p-recruit .fold>.band>.sec{padding-top:26px}

  /* 募集要項の職種カード（狭幅は1列に戻す。行の2段組みは全幅共通） */
  body.p-recruit .jobs{grid-template-columns:1fr}
  body.p-recruit .job{padding:4px 22px 12px}
  body.p-recruit .job__ttl{font-size:18px;padding:20px 0 14px}
  body.p-recruit .job__row{padding:14px 2px}
  body.p-recruit .job__k{font-size:13.5px}
  body.p-recruit .job__v{font-size:13.5px;line-height:1.9}
  body.p-recruit .job__v .pay .amt{font-size:16px}

  /* 福利厚生 */
  body.p-recruit .benefits{margin-top:36px}
  body.p-recruit .bf{padding:17px 2px}
  body.p-recruit .bf:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  body.p-recruit .bf:last-child{border-bottom:0}
  body.p-recruit .bf .v{font-size:20px}

  /* 09 の2枚も縦積みにする（幅はフルに戻す） */
  body.p-recruit .rc-2{grid-template-columns:1fr;max-width:none}

  /* 2列リストは狭幅では1列。寸法は 04 / 08 で共有 */
  body.p-recruit .envlist,body.p-recruit .benefits{grid-template-columns:1fr;gap:0;padding:8px 22px}
  body.p-recruit .envlist li{padding:15px 2px}
  body.p-recruit .envlist li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  body.p-recruit .envlist li:last-child{border-bottom:0}

  /* 応募の追従バー（LINEのみ。焦茶の帯の上に同じLINEボタンを置いてCTAの見た目を揃える） */
  body.p-recruit .entrybar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:96;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(58,42,24,.93);backdrop-filter:blur(10px);
    border-top:1px solid rgba(231,207,154,.35);
    transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s}
  body.p-recruit .entrybar .lnbtn{display:flex;max-width:420px;margin:0 auto;padding:14px 18px;font-size:14.5px;
    box-shadow:0 0 22px rgba(74,157,107,.22),0 8px 20px rgba(0,0,0,.35)}
  body.p-recruit .entrybar.is-hidden,body.p-recruit.nav-on .entrybar{transform:translateY(110%);opacity:0;pointer-events:none}

  body.p-recruit .cta-band .in{padding:82px 24px}
  body.p-recruit .assure{gap:8px;margin-top:28px}
  body.p-recruit .assure div{flex:1 1 100%;padding:13px 15px;font-size:12px}
  body.p-recruit .assure b{font-size:14.5px}
}

@media(prefers-reduced-motion:reduce){
  body.p-recruit .entrybar{transition:none}
  body.p-recruit .fold::details-content{transition:none}
  body.p-recruit .fh-ic,body.p-recruit .fh-ic::before,body.p-recruit .fh-ic::after{transition:none}
}

/* ===== 日本語ナビ：タブレット横〜小型ノート（ドロワー化の直前帯）で詰める ===== */
@media(min-width:821px) and (max-width:1000px){
  .hdr{padding:16px 20px}
  .hdr.scr{padding:11px 20px}
  .nav{gap:16px}
  .nav a,.nav .glabel{font-size:11px;letter-spacing:.02em}
  .nav .book{padding:9px 14px;font-size:11px;letter-spacing:.06em}
}

/* ===== 長文本文：ブラウザ標準の折り返し（kp の誤適用防止マーカー） ===== */
.body-text{word-break:normal}

/* ===== スマホ限定の明示改行（意図した位置で折る一品物用） ===== */
br.sbr{display:inline}
@media(min-width:769px){br.sbr{display:none}}

/* ===== グレーカラー：一般的な白髪染めとの比較表 ===== */
.gc-table{margin-top:40px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gc-table table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;min-width:0}
.gc-table th,.gc-table td{padding:16px 18px;text-align:left;font-size:13.5px;line-height:1.9;border-bottom:1px solid var(--line);vertical-align:top;min-width:0}
.gc-table thead th{background:var(--ink);color:#fff;font-size:11.5px;font-weight:500;letter-spacing:.1em;padding:14px 18px;white-space:nowrap}
.gc-table thead th.gc-ours{background:var(--gold-2);color:#fff}
.gc-table tbody th.gc-item{width:24%;font-weight:500;font-size:12.5px;letter-spacing:.04em;color:var(--ink-2);background:var(--paper);white-space:nowrap}
.gc-table tbody td{color:var(--ink-2)}
.gc-table tbody td.gc-ours{color:var(--ink);font-weight:500;background:rgba(231,207,154,.12)}
.gc-table tbody tr:last-child th,.gc-table tbody tr:last-child td{border-bottom:0}
@media(max-width:820px){
  /* スマホ：3列テーブルの横スクロールをやめ、項目ごとのカードに変形。
     一般的な白髪染めを小さく添え、矢印でグレーカラーメソッドへ視線を誘導する */
  .gc-table{overflow-x:visible}
  .gc-table table{border:0;border-radius:0;background:none}
  .gc-table table,.gc-table thead,.gc-table tbody,.gc-table tr,.gc-table th,.gc-table td{display:block}
  .gc-table thead{display:none}
  .gc-table tbody tr{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:12px}
  .gc-table tbody tr:last-child{margin-bottom:0}
  .gc-table tbody th.gc-item{width:auto;padding:11px 16px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--gold-2);background:rgba(138,106,53,.2);white-space:normal}
  .gc-table tbody td{padding:10px 16px 3px;font-size:12px;line-height:1.7;border-bottom:0}
  .gc-table tbody td::before{content:"一般的な白髪染め";display:block;font-size:10.5px;letter-spacing:.02em;color:var(--ink-3);margin-bottom:3px}
  .gc-table tbody td.gc-ours{padding:9px 16px 13px;font-size:13.5px}
  .gc-table tbody td.gc-ours::before{content:"↓ グレーカラーメソッドなら";color:var(--gold-2);font-weight:600}
}

/* ===== 特別メニュー：真ん中の推し枠 ===== */
.mcard.pick{border-color:var(--gold);box-shadow:0 14px 34px rgba(200,169,96,.16)}
.mcard.pick:hover{box-shadow:0 22px 48px rgba(200,169,96,.24)}
.mcard .pick-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:10.5px;font-weight:500;letter-spacing:.14em;padding:4px 15px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(200,169,96,.3)}

/* ===== 画面下部の常設アイコンバー（SP・タブレット） ===== */
.fixbar{display:none}
@media(max-width:1000px){
  .fixbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:96;
    background:rgba(251,249,245,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 24px rgba(38,35,30,.09);
    transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s;
  }
  .fixbar a{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;padding:9px 4px 8px;color:var(--ink-2);text-decoration:none;
    border-left:1px solid var(--line);transition:background .2s,color .2s;
  }
  .fixbar a:first-child{border-left:0}
  .fixbar a:active{background:rgba(200,169,96,.1)}
  .fixbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .fixbar span{font-size:10.5px;letter-spacing:.04em;line-height:1;white-space:nowrap}
  .fixbar .fb-ig{color:#a0547e}
  .fixbar .fb-line{color:#367a51}
  .fixbar .fb-book{color:#fff;background:var(--gold-btn);border-left-color:var(--gold-btn)}
  .fixbar .fb-book:active{background:var(--gold-2)}
  .fixbar .fb-map{color:var(--ink-2)}
  /* ドロワーを開いているあいだは引っ込める */
  body.nav-on .fixbar{transform:translateY(110%);opacity:0;pointer-events:none}
  /* バーの高さぶん、ページ末尾に余白を足す */
  body.has-fixbar{padding-bottom:60px}
  /* SCROLL の縦文字はバーの裏に入り、375×667 では予約ボタンの右端にも重なる。バーが出る幅では出さない（バー自体が「下がある」合図になる） */
  .hero .scroll{display:none}
  /* FV の本文（予約ボタン）がバーの裏に入らないよう、中央寄せの計算からバーの高さを除く。
     body.has-fixbar（JS が後から付ける）で条件付けると JS 実行後に本文が 30px 跳ねて CLS になるので、
     TOP のこの幅ではバーが必ず出る前提で最初から確保する */
  .hero{padding-bottom:60px}
  body.has-fixbar .ft{padding-bottom:44px}
}
@media(prefers-reduced-motion:reduce){.fixbar{transition:none}}

/* ===== キャンセルポリシー ===== */
.tnote{font-size:12.5px;color:var(--ink-3);margin-top:14px;line-height:1.9}
.cxl{margin-top:36px;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cxl-row{display:flex;align-items:center;gap:18px;padding:19px 24px;border-bottom:1px solid var(--line)}
.cxl-row:last-child{border-bottom:0}
.cxl-when{flex:0 0 40%;min-width:0;font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--ink);position:relative;padding-left:16px}
.cxl-when::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:7px;height:1px;background:var(--gold-lt)}
.cxl-fee{flex:1 1 auto;min-width:0;font-size:14px;letter-spacing:.03em}
.cxl-free{color:var(--ink-3)}
.cxl-half{color:var(--gold-2);font-weight:500}
.cxl-full{color:var(--ink);font-weight:700}
@media(max-width:820px){
  .cxl{margin-top:28px}
  .cxl-row{flex-direction:column;align-items:flex-start;gap:4px;padding:15px 18px}
  .cxl-when{flex:none;font-size:13px}
  .cxl-fee{font-size:14.5px;padding-left:16px}
}

/* ===== 営業日カレンダー ===== */
.hcal-wrap{margin-top:46px;display:flex;flex-direction:column;align-items:center}
.hcal-head{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.hcal-head .en-l{font-family:'Cormorant Garamond',serif;font-size:20px;font-style:italic;color:var(--gold-2)}
.hcal-head h3{font-family:'Shippori Mincho',serif;font-size:17px;font-weight:500;letter-spacing:.05em}
.hcal{
  /* JS が data-source を読んで中身を描くまで空。実測 400x428px なので高さを先に確保して
     レイアウトシフト（CLS）を防ぐ。6 週の月はここから 1 行ぶん伸びる */
  min-height:428px;
  --cal-font:'Noto Sans JP',sans-serif;
  --cal-border:rgba(176,138,74,.22);
  --cal-text:#26231e;
  --cal-closed-bg:rgba(176,138,74,.14);
  --cal-closed-text:#8a6a35;
  --cal-today-ring:#b08a4a;
  --cal-holiday-dot:#b8574a;
  --cal-radius:4px;
}
@media(max-width:820px){.hcal-wrap{margin-top:38px}}

/* ===== 採用カードの写真つきバリアント ===== */
/* 写真はテキストの下。カードの padding がそのまま写真の余白になる。拡大などの動きは付けない */
.rc-card.has-ph{display:flex;flex-direction:column}
.rc-card.has-ph .rc-body{flex:1 1 auto;min-width:0}
.rc-card .rc-ph{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);border-radius:3px;margin-top:22px;flex:none}
.rc-card .rc-ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){
  .rc-card .rc-ph{aspect-ratio:16/9;margin-top:18px}
}

/* ===== 図版の差し込み枠（素材が届くまでの仮置き。届いたら枠ごと差し替える） ===== */
.fig-slot{margin-top:42px;padding:46px 28px;text-align:center;
  border:1px dashed var(--gold-lt);border-radius:4px;background:#fff}
.fig-slot-badge{display:inline-block;font-size:10.5px;font-weight:500;letter-spacing:.16em;
  color:#fff;background:var(--gold);padding:5px 15px;border-radius:999px;margin-bottom:16px}
.fig-slot-title{font-family:'Shippori Mincho',serif;font-size:16.5px;letter-spacing:.05em;color:var(--ink)}
.fig-slot-note{margin-top:10px;font-size:12.5px;color:var(--ink-3);line-height:1.95}
@media(max-width:820px){
  .fig-slot{padding:36px 20px;margin-top:34px}
  .fig-slot-title{font-size:15px}
}

/* ===== 図版（グレーカラーメソッド解説図など、縦長の告知画像を本文に差し込む） ===== */
.gc-fig{margin:42px auto 0;max-width:440px;text-align:center}
.gc-fig--lg{max-width:520px}
/* 実例を並べる（PC は横並び / スマホは縦積み）。幅は内容に合わせて中央寄せ */
.gc-figs{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:28px;
  margin-top:38px;width:fit-content;margin-inline:auto;max-width:100%}
.gc-figs .gc-fig{margin-top:0;flex:0 1 400px}
#case .price-note{width:fit-content;margin-inline:auto;max-width:100%}
.gc-fig img{width:100%;height:auto;display:block;border-radius:4px;box-shadow:0 24px 60px rgba(38,35,30,.14)}
.gc-fig figcaption{margin-top:14px;font-size:12px;letter-spacing:.08em;color:var(--ink-3)}
@media(max-width:820px){
  .gc-fig{margin-top:34px;max-width:360px}
  /* スマホは解説図を先に見せる（表 → 注釈 → 図 の DOM 順を、図 → 表 → 注釈 に入れ替える）。
     flex 化で margin 相殺が効かなくなるため、上下の余白は明示的に指定する */
  .gc-swap{display:flex;flex-direction:column}
  .gc-swap .gc-fig{order:-1;margin-top:34px}
  /* 図版を .gc-figs でまとめた場合は、ラッパー側に order を効かせる（子の .gc-fig の order は
     .gc-figs 内の並びにしか効かず、表との入れ替えにならないため） */
  .gc-swap > .gc-figs{order:-1;margin-top:34px}
  .gc-swap .gc-table{margin-top:34px}
}

/* ===== QUOTE セクション内の小さな実例写真（円形） ===== */
.story-ph{margin:48px auto 0;width:132px}
/* 写真キャプション → 実線 → 英文 の間隔を揃える（写真のある QUOTE だけに効かせる） */
.story-ph + .sig{margin-top:24px}
.story-ph + .sig::before{margin-bottom:24px}
.story-ph img{width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:50% 28%;display:block;border:2px solid rgba(231,207,154,.45)}
.story-ph span{display:block;margin-top:14px;font-size:11.5px;letter-spacing:.14em;line-height:1.9;color:rgba(243,237,225,.75)}
@media(max-width:820px){ .story-ph{margin-top:44px} }

/* ページ送り（お知らせ一覧。partials/news-pager.html が描画。next-cms オンボードで追加・記事が perPage を超えると現れる） */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:44px}
.pager .pg{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--ink);font-size:13px;letter-spacing:.08em;transition:background .25s,color .25s,border-color .25s}
.pager .pg:hover{border-color:var(--gold);color:var(--gold-2)}
.pager .pg.current{background:var(--gold);border-color:var(--gold);color:#fff;pointer-events:none}
.pager .pg-pos{margin-left:8px;font-size:12px;letter-spacing:.08em;color:var(--ink-3)}