/* ==========================================================================
   esthetique Shirabe — LP stylesheet
   「夜のバーのような隠れ家に入り、整えられて、軽やかに朝へ帰る」
   v2.0: ページ全体を基準グレー #9D9992 一色に。グラデーションは周辺(左右外縁・継ぎ目・
   ヒーロー上端・フッター下端)だけに小さな振幅で残す(設計書 §12)。
   v2.1: ヒーローは ink スクリムで動画を見せる。セクションは 基準/明/写真バンド を交互に置き、
   継ぎ目帯は廃止(設計書 §13)。
   ========================================================================== */

/* ---------- 1. Design tokens(設計書 §3 → §12.1 v2.0) ---------- */
:root{
  /* v2.0 基準グレー系。地色はすべて --c-base。deep/deeper は周辺の帯専用(テキストを載せない) */
  --c-base:        #9D9992;
  --c-base-deep:   #8A857F;
  --c-base-deeper: #7C7771;
  --c-base-light:  #B1ACA5;  /* v2.1 明セクションの地(ink 6.0:1) */
  --c-band:        #2C2B2A;  /* v2.1 写真バンドのスクリム色(文字は --c-text-on-dark) */
  /* v2.0.1 の継ぎ目帯 --c-seam / --seam は v2.1 で廃止(地の色そのものが交互に変わるため) */

  --c-ink:      #2C2B2A;   /* 全テキスト(基準地で 4.98:1) */
  --c-ink-2:    #3B3937;   /* 18px 以上 or 太字のサブテキストのみ(4.05:1) */
  /* 旧トークン(互換のため定義だけ残す。地色への新規使用は禁止 §12.1) */
  --c-mauve:    #6E6A66;
  --c-mauve-2:  #9D9892;
  --c-lilacgray:#C6C1BC;
  --c-lilac:    #DAD5CF;
  --c-paper:    #F3F1EE;
  --c-paper-2:  #E9E6E2;
  /* ゴールドは線・飾り・花線画・ボタン塗り専用。基準地の上の文字には使わない */
  --c-gold:     #B8A06A;
  --c-gold-2:   #D4BF8A;
  --c-text:     var(--c-ink);
  --c-text-on-dark: #F3F1EE;  /* UI 部品・ヒーロー・写真バンド(暗いスクリムの上)専用 */
  --c-muted:    #7D7873;

  --f-serif-jp: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --f-serif-en: "Cormorant Garamond", "Shippori Mincho", serif;
  --f-sans-jp:  "Noto Sans JP", "Hiragino Sans", sans-serif;

  --w-content: 1120px;
  --w-narrow:  760px;
  --gutter:    clamp(16px, 5vw, 48px);
  --sec-pad:   clamp(72px, 10vw, 140px);
  --radius:    2px;
  --ease:      cubic-bezier(.22,.61,.36,1);

  /* ---- 派生トークン(実装用) ---- */
  --c-gold-deep: #8E7D58;   /* 旧: 明るい地のゴールド文字用。v2.0 では文字に使わない */
  --c-ig: #EDEAE6;          /* 旧: Instagram 帯(互換のため残す) */
  --blend: clamp(120px, 14vw, 200px);   /* 周辺グラデの基準幅 */
  --vignette: .18;                       /* 左右外縁ビネットの濃さ */
  --header-h: 80px;
  --fixbar-h: 0px;
}
@supports (color: color-mix(in srgb, red, blue)){
  :root{ --c-ig: color-mix(in srgb, var(--c-paper) 80%, var(--c-lilac)); }
}
@media (max-width: 767px){
  :root{ --header-h: 64px; --fixbar-h: 60px; --vignette: .10; }
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
body{
  margin:0;
  font-variant-numeric: lining-nums;
  font-family: var(--f-serif-jp);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--c-text);
  /* キャンバス(オーバースクロール・固定バー下)はヒーロー上端/フッター下端と同じ deeper */
  background: var(--c-base-deeper);
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--fixbar-h) + env(safe-area-inset-bottom, 0px));
}
body.is-menu-open{ overflow:hidden; }
img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
p, li, td, dd{ text-wrap: pretty; line-break: strict; }
h1,h2,h3,p,ul,ol,figure,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
address{ font-style:normal; }
:focus-visible{ outline:1px solid var(--c-ink); outline-offset:4px; }   /* 基準地ではゴールド枠が 1.1:1 で見えないため ink */

.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; left:12px; top:-60px; z-index:200;
  background:var(--c-gold); color:var(--c-ink); padding:8px 16px; font-size:14px;
  transition: top .3s var(--ease);
}
.skip-link:focus{ top:12px; }

.container{
  width:100%;
  max-width: calc(var(--w-content) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline: var(--gutter);
}
.container--narrow{ max-width: calc(var(--w-narrow) + var(--gutter) * 2); }

.br-sp{ display:none; }
.nowrap{ white-space:nowrap; }
@media (max-width: 767px){
  .br-sp{ display:inline; }
  .br-pc{ display:none; }
}

/* 花の線画(外部 SVG をマスクにして currentColor で塗る) */
.fl{
  display:block;
  background-color: currentColor;
  -webkit-mask: url("../img/flower-line.svg") center / contain no-repeat;
          mask: url("../img/flower-line.svg") center / contain no-repeat;
  pointer-events:none;
}

/* リンク下線: ゴールド 1px が左から伸びる */
.u-link{
  background-image: linear-gradient(var(--c-gold), var(--c-gold));
  background-repeat:no-repeat;
  background-position: left 100%;
  background-size: 0 1px;
  padding-bottom: 2px;
  transition: background-size .6s var(--ease), color .3s;
}
.u-link:hover, .u-link:focus-visible{ background-size:100% 1px; }

/* ---------- 3. Buttons(v2.0: 基準地の上は ink 線 + ink 文字。ゴールドは塗りと線のみ) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:52px; padding: .7em 2.2em;
  font-family: var(--f-serif-jp); font-size: .95rem; letter-spacing:.14em; line-height:1.5;
  text-align:center;
  border:1px solid var(--c-gold);
  border-radius: var(--radius);
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn--sm{ min-height:40px; padding:.4em 1.4em; font-size:.85rem; }
.btn--lg{ min-height:60px; padding:.8em 2.6em; font-size:1rem; }
.btn--gold{ background:var(--c-gold); color:var(--c-ink); }
/* 反転先を「透明 + ゴールド文字」にすると基準地で 1.1:1 になるため、ink 塗り + ゴールド文字(7.8:1)へ反転 */
.btn--gold:hover, .btn--gold:focus-visible{ background:var(--c-ink); border-color:var(--c-ink); color:var(--c-gold-2); }
.btn--line{ background:transparent; color:var(--c-ink); border-color: var(--c-ink); }
.btn--line:hover, .btn--line:focus-visible{ background:var(--c-gold); border-color:var(--c-gold); color:var(--c-ink); }
.btn--ghost{ background:transparent; color:var(--c-ink); border-color: rgba(44,43,42,.55); }
.btn--ghost:hover, .btn--ghost:focus-visible{ background:var(--c-gold); border-color:var(--c-gold); color:var(--c-ink); }
.btn--dark{ background:var(--c-ink); color:var(--c-text-on-dark); }
.btn--dark:hover, .btn--dark:focus-visible{ background:var(--c-gold); color:var(--c-ink); }

/* ---------- 4. Texture(v1.2: マットな布目グレイン + ごく控えめな陰影) ---------- */
/* ページ全面に敷く布目。白/黒の粒をアルファで持つタイルなので、暗い地にも明るい地にも同じ強さで乗る */
body{ position:relative; }
body::after{
  content:""; position:absolute; inset:0; z-index:60; pointer-events:none;
  background: url("../img/grain.png?v=20260930b") repeat 0 0 / 200px 200px;
  opacity: var(--grain, .85);
}
/* v2.0 左右外縁のビネット(固定・全面、grain の下)。
   設計書 §12.2-3 は 14% 幅だが、1280px 未満では 14% がヘッダー/本文の左右余白より広くなり文字に掛かるため、
   「14% とヘッダー内側の左端のうち狭い方」で止める(文字は常にビネットの外) */
body::before{
  --vig-w: min(14%, max(var(--gutter), calc((100% - 1280px) / 2)));
  content:""; position:fixed; inset:0; z-index:55; pointer-events:none;
  background: linear-gradient(to right,
    rgba(44,43,42, var(--vignette)) 0,
    rgba(44,43,42, 0) var(--vig-w),
    rgba(44,43,42, 0) calc(100% - var(--vig-w)),
    rgba(44,43,42, var(--vignette)) 100%);
}
/* 大きな明暗。サテンの艶ではなく、布地に片側から光が当たる程度に */
.satin{ position:relative; isolation:isolate; overflow:hidden; }
.satin::before{
  content:""; position:absolute; inset:-10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 45% at 20% 30%, rgba(255,255,255,.04), transparent 70%),
    radial-gradient(50% 60% at 80% 70%, rgba(0,0,0,.10), transparent 70%);
  /* セクション境界でハイライトが切れないよう上下をフェード */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.satin--dark::before{
  background:
    radial-gradient(55% 40% at 18% 28%, rgba(255,255,255,.03), transparent 70%),
    radial-gradient(50% 60% at 86% 76%, rgba(0,0,0,.12), transparent 70%);
}
.satin--light::before{
  background:
    radial-gradient(60% 45% at 22% 24%, rgba(255,255,255,.12), transparent 70%),
    radial-gradient(45% 65% at 82% 70%, rgba(44,43,42,.04), transparent 70%);
}
@media (prefers-reduced-motion: no-preference){
  .satin::before{ animation: satin-drift 80s ease-in-out infinite alternate; }
}
@keyframes satin-drift{
  from{ transform: translate3d(-2%, 0, 0) scale(1); }
  to  { transform: translate3d(2%, -3%, 0) scale(1.06); }
}

/* ---------- 5. Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height: var(--header-h);
  color: var(--c-text-on-dark);   /* v2.1: 未スクロール時はヒーロー(動画+スクリム)の上なので light */
  transition: background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s, color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(157,153,146,.92);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom-color: rgba(184,160,106,.3);
  color: var(--c-ink);
}
/* v2.2: 未スクロール時は素の動画の上に乗るので、文字に影を付けて明るい被写体の上でも読めるように */
.site-header:not(.is-scrolled){ text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 14px rgba(0,0,0,.45); }
/* 未スクロール時: WEB予約(line)ボタンも light 枠 + light 文字、フォーカスリングは gold-2 */
.site-header:not(.is-scrolled) .btn--line{ color: var(--c-text-on-dark); border-color: rgba(243,241,238,.7); }
.site-header:not(.is-scrolled) .btn--line:hover,
.site-header:not(.is-scrolled) .btn--line:focus-visible{ background:var(--c-gold); border-color:var(--c-gold); color:var(--c-ink); }
.site-header:not(.is-scrolled) :focus-visible{ outline-color: var(--c-gold-2); }
/* SP メニュー展開中はメニュー地(deeper)と一続きに見せ、文字は on-dark */
body.is-menu-open .site-header{
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: rgba(184,160,106,.3);
  color: var(--c-text-on-dark);
}
.site-header__inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width: calc(1280px + var(--gutter) * 2);
  margin-inline:auto; padding-inline: var(--gutter);
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand__mark{ width:44px; height:44px; flex:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1.2; }
.brand__ja{ font-size:10px; letter-spacing:.24em; }
.brand__en{ font-family: var(--f-serif-en); font-size:1.35rem; font-weight:400; letter-spacing:.06em; white-space:nowrap; }

.gnav{ display:flex; align-items:center; gap:36px; }
.gnav__list{ display:flex; gap:28px; font-size:.86rem; letter-spacing:.14em; }

.menu-toggle{
  display:none; align-items:center; gap:12px; height:44px; padding-inline:4px;
  font-family: var(--f-serif-en); font-size:.95rem; letter-spacing:.2em;
}
.menu-toggle__bars{ position:relative; width:28px; height:10px; }
.menu-toggle__bars span{
  position:absolute; left:0; width:100%; height:1px; background:currentColor;
  transition: transform .5s var(--ease), top .5s var(--ease), width .5s var(--ease);
}
.menu-toggle__bars span:nth-child(1){ top:0; }
.menu-toggle__bars span:nth-child(2){ top:9px; width:70%; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1){ top:4.5px; transform:rotate(20deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2){ top:4.5px; width:100%; transform:rotate(-20deg); }

@media (max-width: 1023px){
  .gnav{ display:none; }
  .menu-toggle{ display:inline-flex; }
}
@media (max-width: 767px){
  .brand__mark{ width:36px; height:36px; }
  .brand__en{ font-size:1.15rem; }
  .menu-toggle__label{ display:none; }
  .menu-toggle{ width:44px; justify-content:center; }
}

/* SP 全面メニュー */
.sp-menu{
  position:fixed; inset:0; z-index:90;
  /* 地は base-deeper。on-dark 文字が 4.5:1 を切らないよう ink .15 を一枚重ねる(実効 #706C66 → 4.63:1)。
     明るいハイライト層はコントラストを下げるので外した */
  background:
    url("../img/grain.png?v=20260930b") repeat 0 0 / 200px 200px,
    radial-gradient(50% 50% at 10% 90%, rgba(0,0,0,.12), transparent 70%),
    linear-gradient(rgba(44,43,42,.15), rgba(44,43,42,.15)),
    var(--c-base-deeper);
  color: var(--c-text-on-dark);
  visibility:hidden; opacity:0;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
  overflow-y:auto; overscroll-behavior:contain;
}
.sp-menu.is-open{ visibility:visible; opacity:1; transition: opacity .5s var(--ease), visibility 0s; }
.sp-menu__inner{
  min-height:100%; position:relative;
  padding: calc(var(--header-h) + 32px) var(--gutter) calc(48px + var(--fixbar-h));
  display:flex; flex-direction:column; gap:40px;
  max-width:560px; margin-inline:auto;
}
.sp-menu__list li{ border-bottom:1px solid rgba(184,160,106,.25); }
.sp-menu__list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding: 18px 2px; font-size:1.25rem; letter-spacing:.14em;
}
.sp-menu__en{ order:2; font-family:var(--f-serif-en); font-style:italic; font-size:.95rem; color:var(--c-text-on-dark); letter-spacing:.1em; }
.sp-menu .btn--line{ color: var(--c-text-on-dark); border-color: var(--c-gold); }
.sp-menu .btn--line:hover, .sp-menu .btn--line:focus-visible{ background:var(--c-gold); color:var(--c-ink); }
.sp-menu :focus-visible{ outline-color: var(--c-gold-2); }
.sp-menu__actions{ display:grid; gap:14px; }
.sp-menu__ig{ justify-self:center; margin-top:6px; font-size:.9rem; }
.sp-menu__flower{ position:absolute; right:-10px; bottom: calc(var(--fixbar-h) + 10px); width:180px; height:auto; opacity:.12; z-index:-1; }
.sp-menu.is-open .sp-menu__list li{ animation: rise .7s var(--ease) both; }
.sp-menu.is-open .sp-menu__list li:nth-child(2){ animation-delay:.05s; }
.sp-menu.is-open .sp-menu__list li:nth-child(3){ animation-delay:.1s; }
.sp-menu.is-open .sp-menu__list li:nth-child(4){ animation-delay:.15s; }
.sp-menu.is-open .sp-menu__list li:nth-child(5){ animation-delay:.2s; }
.sp-menu.is-open .sp-menu__list li:nth-child(6){ animation-delay:.25s; }
@media (min-width: 1024px){ .sp-menu{ display:none; } }

/* ---------- 6. Section scaffolding(v2.1: 基準 / 明 / 写真バンド を交互に。設計書 §13.2) ---------- */
/* 継ぎ目帯(v2.0.1 --c-seam)は廃止。地の色そのものが変わるので、セクションは直接隣接させる。
   --sec-bg は子孫(流れの番号の円など)が「いまの地色」で塗りつぶすときにも使う */
.sec{
  position:relative; padding-block: var(--sec-pad);
  --sec-bg: var(--c-base);
  --accent: var(--c-ink);
  color: var(--c-ink);
  background: var(--sec-bg);
}
/* v2.2(§14.2): 明セクションは上下 --blend の幅で隣の地色(--sec-from / --sec-to、既定 base)から滑らかに移る。
   直後が写真バンドの Features / Access は下端を明のまま渡し、バンド側のフェードで受ける */
.sec--features, .sec--flow, .sec--faq, .sec--access{
  --sec-from: var(--c-base); --sec-to: var(--c-base);
  background: linear-gradient(to bottom,
    var(--sec-from) 0, var(--c-base-light) var(--blend),
    var(--c-base-light) calc(100% - var(--blend)), var(--sec-to) 100%);
}
.sec--features, .sec--access{ --sec-to: var(--c-base-light); }
/* 明: 03 Features / 06 Flow / 08 FAQ / 10 Access(02 Concept / 05 Menu / 07 Owner / 09 Instagram は base のまま) */
.sec--features, .sec--flow, .sec--faq, .sec--access{ --sec-bg: var(--c-base-light); }

/* 写真バンド: 04 Space / 11 CTA。写真 + ink スクリム、文字は light、上下にゴールド細線。
   background-attachment は scroll(fixed は iOS で崩れる)。SP も同じ画像の中央を cover */
.sec--space, .sec--cta{
  --sec-bg: var(--c-band);
  --accent: var(--c-text-on-dark);
  color: var(--c-text-on-dark);
  /* v2.2: 上下のゴールド細線は廃止し、::after のフェードで隣の地色へ溶かす。文字がフェードに掛からないよう余白を足す */
  --band-fade: clamp(72px, 9vw, 130px);
  --band-from: var(--c-base-light); --band-to: var(--c-base);
  padding-block: calc(var(--sec-pad) + var(--band-fade) * .6);
  isolation:isolate;
  background-color: var(--c-band);
  background-repeat: no-repeat;
  background-attachment: scroll;
}
/* Space は前景に店内写真 3 枚が乗るので、背景写真は ぼかし(4px)+ .82 スクリム で「気配」程度に落とす(Fable レビュー) */
.sec--space{ overflow:hidden; isolation:isolate; }
.sec--space::before{
  content:""; position:absolute; inset:-12px; z-index:-1; pointer-events:none;
  background-image: linear-gradient(rgba(44,43,42,.82), rgba(44,43,42,.82)), url("../img/bg-space.jpg");
  background-position: center, center;
  background-size: auto, cover;
  background-repeat: no-repeat;
  filter: blur(4px);
}
.sec--space::after, .sec--cta::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--band-from) 0, color-mix(in srgb, var(--band-from) 45%, transparent) 45%, transparent 100%) top / 100% var(--band-fade) no-repeat,
    linear-gradient(to top, var(--band-to) 0, color-mix(in srgb, var(--band-to) 45%, transparent) 45%, transparent 100%) bottom / 100% var(--band-fade) no-repeat;
}
.sec--cta{
  overflow:hidden;
  background-image: linear-gradient(rgba(44,43,42,.72), rgba(44,43,42,.72)), url("../img/bg-cta.jpg");
  background-position: center, center;
  background-size: auto, cover;
}
/* 写真バンドには satin 装飾を付けない(クラスが付いても擬似要素を出さない) */
.sec--space.satin::before, .sec--cta.satin::before{ content:none; display:none; }
/* 写真バンド内の文字・部品 */
.sec--space :focus-visible, .sec--cta :focus-visible{ outline-color: var(--c-gold-2); }
.sec--cta .cta__en{ color: var(--c-text-on-dark); }
.sec--cta .btn--line{ color: var(--c-text-on-dark); border-color: var(--c-text-on-dark); }
.sec--cta .btn--line:hover, .sec--cta .btn--line:focus-visible{ background:var(--c-gold); border-color:var(--c-gold); color:var(--c-ink); }
/* gold ボタンの hover(ink 塗り)は暗いバンドに沈むので、バンド内だけ 透明 + gold-2 枠・文字 に反転(gold-2 on 実効地 ≈ 6:1) */
.sec--cta .btn--gold:hover, .sec--cta .btn--gold:focus-visible{ background:transparent; border-color:var(--c-gold-2); color:var(--c-gold-2); }

/* 花のつる区切り */
.divider{
  width: min(360px, 70%); aspect-ratio: 480 / 60; margin: 0 auto;
  color: var(--c-gold);
  background-color: currentColor;
  -webkit-mask: url("../img/flower-divider.svg") center / contain no-repeat;
          mask: url("../img/flower-divider.svg") center / contain no-repeat;
  opacity:.8;
}
.sec--space .divider--top{ margin-bottom: clamp(48px, 7vw, 88px); }
.sec--cta .divider{ margin-bottom: 40px; }

/* ---------- 7. Section heading ---------- */
.sec-head{ position:relative; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-head__num{
  display:inline-flex; align-items:center; gap:14px;
  font-family: var(--f-serif-en); font-size: 18px; font-weight:400; letter-spacing:.16em;
  color: var(--accent, var(--c-ink));
}
.sec-head__num::after{ content:""; width:48px; height:1px; background: var(--c-gold); opacity:.8; }
/* 見出し左上の小さな花線画 */
.sec-head__num::before{
  content:""; width:40px; height:40px; flex:none;
  background-color: var(--c-gold);
  -webkit-mask: url("../img/flower-line.svg") center / contain no-repeat;
          mask: url("../img/flower-line.svg") center / contain no-repeat;
  opacity:.7;
}
.sec-head__en{
  position:relative;
  margin-top: 6px;
  font-family: var(--f-serif-en); font-weight:300;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.05; letter-spacing:.12em;
  color: var(--accent, var(--c-ink));
}
.sec-head__ja{
  margin-top: 18px;
  font-weight:500;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height:1.7; letter-spacing:.14em;
}
.sec-head--center{ text-align:center; }
.sec-head--center .sec-head__num{ flex-direction:column; gap:10px; }
.sec-head--center .sec-head__num::after{ width:1px; height:28px; }

.prose{ display:grid; gap: 1.2em; line-height: 2.15; font-size: clamp(.95rem, 1.2vw, 1.02rem); }

/* ---------- 8. Hero ---------- */
.hero{
  position:relative;
  height: calc(100svh - var(--fixbar-h));
  min-height: 560px;
  overflow:hidden;
  color: var(--c-text-on-dark);
  background: var(--c-base);
  isolation:isolate;
  z-index:61;   /* v2.2: 全面グレイン(z60)とビネット(z55)より手前に出し、動画に粒・霞を乗せない(ヘッダー z100 / 固定バー z80 はより手前のまま) */
  --hero-shadow: 0 1px 3px rgba(0,0,0,.45), 0 2px 28px rgba(0,0,0,.55);
}
@supports not (height: 100svh){
  .hero{ height: calc(100vh - var(--fixbar-h)); }
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
/* <picture> は SP/PC のポスター出し分けのためだけのラッパー。レイアウトには関与させない(img は .hero__media 基準で absolute) */
.hero__picture{ display:contents; }
.hero__poster, .hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; max-width:none;
}
.hero__video{ opacity:0; transition: opacity 1.4s var(--ease); }
.hero__video.is-ready{ opacity:1; }
/* v2.1 スクリム(§13.1): v2.0 の基準グレー放射ベールは廃止し、ink rgba(44,43,42,α) を重ねて動画を見せる。
   ポスター(静止画)にも同じ層が掛かる。background は上に書いた層ほど手前。
   1. 下端: コンセプト(base)と地続きにするため --blend の高さで transparent → base(スクリムより手前に置かないと境界に段差が出る)。
      直線だと「Scroll」(下端から約 85px)の位置で base が 58% 掛かり light 文字が 3.5:1 まで落ちるため、
      前半 .2 → 後半で base へ急に寄せる 2 段のカーブにした(下端は base のまま)
   2. 上端 0–160px: ヘッダー用
   3. 下から上: テキスト列と Scroll の下地
   4. 左から右(PC のみ): テキスト列の側。SP は --hero-scrim-left を透明に
   5. 全面: config.js の hero.overlay をそのまま α に(main.js が --hero-overlay に設定。既定 .30) */
.hero__veil{
  /* v2.2(§14.1): 全面スクリムは既定 0。文字のある下側と左側、ヘッダーの上端だけを暗くし、画面中央〜右上は素の動画を見せる。
     下端の base ブレンドは最後の 72px だけに短縮(霞に見える範囲を減らす) */
  --hero-scrim-left: linear-gradient(to right, rgba(20,19,18,.46) 0, rgba(20,19,18,.20) 40%, rgba(20,19,18,0) 64%);
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(157,153,146,0) calc(100% - 72px), rgba(157,153,146,.35) calc(100% - 28px), var(--c-base) 100%),
    linear-gradient(to bottom, rgba(20,19,18,.55) 0, rgba(20,19,18,.30) 70px, rgba(20,19,18,0) 150px),
    linear-gradient(to top, rgba(20,19,18,.62) 0, rgba(20,19,18,.34) 34%, rgba(20,19,18,0) 62%),
    var(--hero-scrim-left),
    linear-gradient(rgba(20,19,18, var(--hero-overlay, 0)), rgba(20,19,18, var(--hero-overlay, 0)));
}
@media (max-width: 767px){
  .hero__veil{ --hero-scrim-left: linear-gradient(transparent, transparent); }
}
/* ヒーロー内の部品: ghost ボタンは on-dark 仕様、フォーカスリングは gold-2 */
.hero .btn--ghost{ color: var(--c-text-on-dark); border-color: rgba(243,241,238,.7); }
.hero .btn--ghost:hover, .hero .btn--ghost:focus-visible{ background:var(--c-gold); border-color:var(--c-gold); color:var(--c-ink); }
.hero :focus-visible{ outline-color: var(--c-gold-2); }
.hero__flower{
  position:absolute; z-index:-1;
  right: max(-40px, calc((100vw - 1280px) / 2 - 40px));
  bottom: -6%;
  width: min(54vw, 640px);
  color: var(--c-gold);
  opacity:.6;
  pointer-events:none;
}
.hero__flower svg{ width:100%; height:auto; }

.hero__vertical{
  position:absolute; top: calc(var(--header-h) + 48px);
  right: max(var(--gutter), calc((100vw - var(--w-content)) / 2));
  writing-mode: vertical-rl;
  font-family: var(--f-serif-en); font-style:italic; font-weight:300;
  font-size: 15px; letter-spacing:.32em;
  color: var(--c-text-on-dark);
  text-shadow: var(--hero-shadow);
  display:flex; align-items:center; gap:18px;
}
.hero__vertical::after{ content:""; width:1px; height:72px; background: var(--c-gold); }

.hero__body{
  position:absolute;
  left: max(var(--gutter), calc((100vw - var(--w-content)) / 2));
  right: var(--gutter);
  bottom: clamp(96px, 16vh, 168px);
}
.hero__title{
  font-weight:400;
  font-size: clamp(2.5rem, 6.4vw, 5.4rem);
  line-height:1.35; letter-spacing:.12em;
  text-shadow: var(--hero-shadow);
}
.hero__line{ display:block; }
.hero__line + .hero__line{ padding-left: 1.6em; }
.hero__sub{
  margin-top: 20px;
  font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing:.2em;
  text-shadow: var(--hero-shadow);
}
.hero__note{
  display:inline-flex; flex-wrap:wrap; align-items:center; column-gap:.2em;
  margin-top: 22px; padding-top: 14px;
  border-top: 1px solid rgba(184,160,106,.7);
  font-size: .82rem; letter-spacing:.14em;
  text-shadow: var(--hero-shadow);
}
.hero__sep{ color: var(--c-text-on-dark); }   /* 区切りの縦線(v2.1: ヒーロー内テキストと同色) */
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 32px; }

.hero__scroll{
  position:absolute; left:50%; bottom: 0; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding-top: 8px;
  font-family: var(--f-serif-en); font-size: 13px; letter-spacing:.32em; text-indent:.32em;
  color: var(--c-text-on-dark);
  text-shadow: var(--hero-shadow);
}
.hero__scroll::after{
  content:""; width:1px; height:64px;
  background: linear-gradient(to bottom, var(--c-gold) 0 30%, rgba(184,160,106,.25) 30% 100%);
  background-size: 1px 200%;
}
@media (prefers-reduced-motion: no-preference){
  .hero__scroll::after{ animation: scroll-line 2.4s var(--ease) infinite; }
}
@keyframes scroll-line{
  0%  { background-position: 0 100%; }
  100%{ background-position: 0 -100%; }
}

/* 入場アニメ(CSS のみ) */
@media (prefers-reduced-motion: no-preference){
  .hero__line, .hero__sub, .hero__note, .hero__actions, .hero__vertical{
    animation: rise 1.4s var(--ease) both;
  }
  .hero__line:nth-child(1){ animation-delay:.2s; }
  .hero__line:nth-child(2){ animation-delay:.45s; }
  .hero__sub{ animation-delay:.8s; }
  .hero__note{ animation-delay:1s; }
  .hero__actions{ animation-delay:1.2s; }
  .hero__vertical{ animation-delay:1.4s; animation-name: fade; }
  /* 花線画の描画 */
  .hero__flower.is-drawing path,
  .hero__flower.is-drawing circle{
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: draw 2.4s var(--ease) forwards;
    animation-delay: calc(.3s + var(--i, 0) * .02s);
  }
}
@keyframes rise{ from{ opacity:0; transform: translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes draw{ to{ stroke-dashoffset: 0; } }

@media (max-width: 767px){
  .hero{ min-height: 520px; }
  .hero__body{ left: var(--gutter); right: var(--gutter); bottom: 104px; text-align:center; }
  .hero__line + .hero__line{ padding-left: 0; }
  .hero__title{ font-size: clamp(2.2rem, 10.5vw, 3rem); letter-spacing:.1em; }
  .hero__sub{ letter-spacing:.14em; }
  .hero__note{ justify-content:center; font-size:.74rem; letter-spacing:.08em; }
  .hero__actions{ justify-content:center; }
  .hero__actions{ flex-wrap:nowrap; gap:10px; }
  .hero__actions .btn{ flex: 1 1 0; min-width:0; padding-inline: .6em; font-size:.86rem; letter-spacing:.08em; white-space:nowrap; }
  .hero__note{ flex-direction:column; row-gap:2px; }
  .hero__sep{ display:none; }
  .hero__vertical{ font-size: 12px; top: calc(var(--header-h) + 24px); right: 14px; }
  .hero__vertical::after{ height:40px; }
  .hero__flower{ width: 88vw; right: -18vw; bottom: auto; top: 12%; opacity:.4; }
  .hero__scroll{ font-size:11px; }
  .hero__scroll::after{ height:44px; }
}

/* ---------- 9. Concept ---------- */
.concept{
  position:relative;
  display:grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(48px, 9vw, 128px);
  align-items:start;
  padding-bottom: clamp(40px, 8vw, 120px);
}
.concept__vertical{
  writing-mode: vertical-rl;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  letter-spacing:.34em; line-height:1.8;
  padding-top: 8px;
  position:relative;
}
.concept__vertical::before{
  content:""; position:absolute; top:0; right: -18px; width:1px; height:100%;
  background: linear-gradient(to bottom, var(--c-gold), transparent);
  opacity:.7;
}
.concept__body{ max-width: 620px; position:relative; z-index:1; }
.concept__flower{
  position:absolute; right: var(--gutter); bottom: -40px;
  width: clamp(200px, 30vw, 380px); aspect-ratio:1;
  color: var(--c-gold); opacity:.35;
}
@media (max-width: 767px){
  .concept{ grid-template-columns: minmax(0,1fr); gap: 40px; }
  .concept__vertical{
    writing-mode: horizontal-tb;
    font-size: 1.5rem; letter-spacing:.2em;
    padding: 0 0 0 20px;
  }
  .concept__vertical::before{ right:auto; left:0; width:1px; height:100%; }
  .concept__flower{ width: 220px; bottom: -20px; right: -10px; }
}

/* ---------- 10. Features ---------- */
.features{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
  counter-reset: none;
}
.feature{
  position:relative;
  padding: 44px 26px 36px;
  border: 1px solid rgba(44,43,42,.14);
  border-radius: var(--radius);
  background: rgba(243,241,238,.45);   /* v2.1: 明地(#B1ACA5)に合わせて面を濃く */
  transition: background-color .6s var(--ease), border-color .6s var(--ease);
}
.feature:hover{ background: rgba(243,241,238,.55); border-color: var(--c-gold); }
.feature__num{
  font-family: var(--f-serif-en); font-size: 2rem; font-weight:300; line-height:1;
  color: var(--accent);
}
.feature__en{
  margin-top: 18px;
  font-family: var(--f-serif-en); font-style:italic; font-size: 1.1rem; letter-spacing:.08em;
  color: var(--c-ink);
}
.feature__title{
  margin-top: 6px;
  font-size: 1.12rem; font-weight:500; line-height:1.6; letter-spacing:.08em;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(184,160,106,.45);
}
.feature__text{ font-size: .92rem; line-height:2; }
.feature__flower{
  position:absolute; top: 14px; right: 14px;
  width: 40px; aspect-ratio:1;
  color: var(--c-gold); opacity:.8;
}
@media (max-width: 1023px){
  .features{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 599px){
  .features{ grid-template-columns: minmax(0,1fr); gap:16px; }
  .feature{ padding: 36px 22px 30px; }
}

/* ---------- 11. Space ---------- */
.space{
  display:grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 80px);
  align-items:center;
}
.space__track{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;
}
/* v2.0: 暗帯へ溶かすマスクをやめ、写真の内側にゴールド .6 の細い枠。v2.1: 写真バンドの上で影を付けて浮かせる */
.space__item:nth-child(2){ transform: translateY(56px); }
.space__item:nth-child(3){ transform: translateY(-28px); }
.space__item img{
  width:100%; aspect-ratio: 3 / 4.6; object-fit:cover;
  outline: 1px solid rgba(184,160,106,.6); outline-offset: -8px;
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
}
@media (max-width: 1023px){
  .space{ grid-template-columns: minmax(0,1fr); }
  .space__gallery{ margin-inline: calc(var(--gutter) * -1); }
  .space__track{
    display:flex; gap:12px;
    overflow-x:auto; scroll-snap-type: x mandatory;
    padding: 24px var(--gutter) 64px;   /* 横スクロール枠で影(24px + 48px ぼかし)が切れないよう下に余白 */
    scrollbar-width: none;
  }
  .space__track::-webkit-scrollbar{ display:none; }
  .space__item{ flex: 0 0 min(64vw, 320px); scroll-snap-align: center; }
  .space__item:nth-child(2), .space__item:nth-child(3){ transform:none; }
}

/* ---------- 12. Menu ---------- */
.menu{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(40px, 6vw, 88px);
}
.menu__col{ display:grid; gap: 48px; align-content:start; }
.menu__cat-title{
  display:flex; align-items:baseline; gap:16px;
  font-size: 1.3rem; font-weight:500; letter-spacing:.16em;
  padding-bottom: 12px; margin-bottom: 10px;
  border-bottom: 1px solid var(--c-gold);
}
.menu__cat-title span{
  order:2; margin-left:auto;
  font-family: var(--f-serif-en); font-style:italic; font-weight:400; font-size: 1.05rem; letter-spacing:.06em;
  color: var(--c-ink);
}
.menu__item{
  display:flex; align-items:baseline; gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(44,43,42,.18);
}
.menu__name{ flex: 0 1 auto; font-size: .98rem; line-height:1.7; min-width:0; }
.menu__leader{
  flex: 1 1 20px; min-width: 20px;
  border-bottom: 1px dotted rgba(44,43,42,.45);
  transform: translateY(-.3em);
}
.menu__price{
  flex:none; white-space:nowrap;
  font-family: var(--f-serif-en); font-size: 1.28rem; font-weight:400; letter-spacing:.04em;
}
.badge, .tag{
  display:inline-block; vertical-align: 2px;
  margin-right: .6em; padding: 0 .55em;
  font-size: .72rem; line-height:1.7; letter-spacing:.12em;
  border-radius: var(--radius);
}
.badge{ border:1px solid var(--c-gold); color: var(--c-ink); }
.tag{ border:1px solid rgba(44,43,42,.35); color: var(--c-ink); }
.menu__foot{
  margin-top: 56px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 24px;
  padding-top: 32px; border-top: 1px solid rgba(184,160,106,.6);
}
.menu__notes{ font-family: var(--f-sans-jp); font-size: .82rem; color: var(--c-ink); line-height:1.9; }
@media (max-width: 899px){
  .menu{ grid-template-columns: minmax(0,1fr); gap: 48px; }
}
@media (max-width: 599px){
  .menu__item{ flex-wrap:wrap; column-gap:8px; }
  .menu__name{ flex: 1 1 100%; }
  .menu__leader{ flex: 1 1 20px; transform:none; }
  .menu__foot{ flex-direction:column; align-items:stretch; }
}

/* ---------- 13. Flow ---------- */
.flow{
  position:relative;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px;
}
.flow::before{
  content:""; position:absolute; top: 32px; left: 12.5%; right: 12.5%; height:1px;
  background: var(--c-gold); opacity:.8;
}
.flow__step{ position:relative; text-align:center; }
.flow__num{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:64px; height:64px; margin: 0 auto 24px;
  border:1px solid var(--c-gold); border-radius:50%;
  background: var(--sec-bg, var(--c-base));
  font-family: var(--f-serif-en); font-size: 1.35rem; color: var(--accent);
}
.flow__title{ font-size: 1.12rem; font-weight:500; letter-spacing:.14em; margin-bottom: 10px; }
.flow__text{ font-size: .9rem; line-height:1.95; max-width: 16.5em; margin-inline:auto; }
@media (max-width: 899px){
  .flow{ grid-template-columns: minmax(0,1fr); gap: 36px; max-width: 520px; margin-inline:auto; }
  .flow::before{ top: 32px; bottom: 32px; left: 31.5px; right:auto; width:1px; height:auto; }
  .flow__step{ display:grid; grid-template-columns: 64px minmax(0,1fr); column-gap: 24px; text-align:left; align-items:center; }
  .flow__num{ grid-row: span 2; margin:0; align-self:start; }
  .flow__title{ margin:0 0 4px; }
  .flow__text{ max-width:none; margin:0; }
}

/* ---------- 14. Owner ---------- */
.owner{
  display:grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(48px, 8vw, 112px); align-items:center;
}
.owner__photo{ position:relative; width: min(100%, 420px); justify-self:center; }
.owner__photo img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; }
.owner__ring{
  position:absolute; inset: -14px; border-radius:50%;
  border:1px solid var(--c-gold); opacity:.7;
  transform: translate(12px, -8px);
  pointer-events:none;
}
.owner__name{ margin-top: 36px; display:flex; align-items:baseline; gap: 18px; flex-wrap:wrap; }
.owner__name-en{ font-family: var(--f-serif-en); font-style:italic; font-weight:300; font-size: 2.6rem; line-height:1; letter-spacing:.06em; }
.owner__role{ font-size: .85rem; letter-spacing:.16em; color: var(--c-ink); }
@media (max-width: 767px){
  .owner{ grid-template-columns: minmax(0,1fr); }
  .owner__photo{ width: min(72%, 300px); }
}

/* ---------- 15. FAQ ---------- */
.faq{ border-top: 1px solid rgba(44,43,42,.18); }
.faq__item{ border-bottom: 1px solid rgba(44,43,42,.18); }
.faq__q{
  display:grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 18px; align-items:center;
  padding: 24px 4px;
  cursor:pointer; list-style:none;
  font-size: 1.02rem; letter-spacing:.08em; line-height:1.7;
  transition: color .3s;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:""; }
.faq__q:hover .faq__q-text{ text-decoration: underline 1px var(--c-gold); text-underline-offset: 6px; }
.faq__mark{
  font-family: var(--f-serif-en); font-size: 1.6rem; line-height:1; font-weight:300;
  color: var(--accent); width: 1em;
}
.faq__icon{ position:relative; width: 16px; height:16px; }
.faq__icon::before, .faq__icon::after{
  content:""; position:absolute; left:0; top:50%; width:100%; height:1px; background: var(--c-gold);
  transition: transform .45s var(--ease);
}
.faq__icon::after{ transform: rotate(90deg); }
.faq__item[open] .faq__icon::after{ transform: rotate(0deg); }
.faq__a{
  display:grid; grid-template-columns: auto minmax(0,1fr); gap: 18px;
  padding: 0 4px 28px calc(4px);
}
.faq__a p{ font-size: .94rem; line-height: 2; padding-right: 34px; }
.faq__a .faq__mark{ color: var(--c-ink-2); }   /* 1.6rem の大きな字なので 4.05:1 で可 */
@media (prefers-reduced-motion: no-preference){
  .faq__item[open] .faq__a{ animation: rise .6s var(--ease) both; }
}
@media (max-width: 599px){
  .faq__q{ gap: 12px; font-size: .96rem; padding: 20px 2px; }
  .faq__a{ gap: 12px; }
  .faq__a p{ padding-right: 0; }
}

/* ---------- 16. Instagram ---------- */
.ig__account{ text-align:center; margin: -36px 0 40px; font-family: var(--f-serif-en); font-size: 1.3rem; letter-spacing:.08em; }
.ig{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px;
  max-width: 880px; margin-inline:auto;
}
.ig__item{ position:relative; display:block; overflow:hidden; aspect-ratio:1; }
.ig__item img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.ig__item::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(44,43,42,.25), transparent 60%);
  opacity:0; transition: opacity .6s var(--ease);
}
.ig__item:hover img{ transform: scale(1.05); }
.ig__item:hover::after{ opacity:1; }
@media (max-width: 599px){
  .ig{ gap: 4px; }
  .ig__account{ margin-top: -24px; margin-bottom: 28px; }
}

/* ---------- 17. Access ---------- */
.access{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(32px, 5vw, 64px); align-items:start;
}
.access__table{ width:100%; border-collapse:collapse; }
.access__table th, .access__table td{
  padding: 16px 0; vertical-align:top; text-align:left;
  border-bottom: 1px solid rgba(44,43,42,.18);
}
.access__table tr:first-child th, .access__table tr:first-child td{ border-top: 1px solid var(--c-gold); }
.access__table th{
  width: 6.5em; padding-right: 1em;
  font-weight:500; font-size: .9rem; letter-spacing:.14em; white-space:nowrap;
}
.access__table td{ font-family: var(--f-sans-jp); font-size: .88rem; line-height:1.9; letter-spacing:.04em; overflow-wrap:anywhere; }
.access__table .hours span{ white-space:nowrap; }
.access__map{ position:relative; }
.access__map::before{
  content:""; position:absolute; inset: 12px -12px -12px 12px;
  border:1px solid var(--c-gold); opacity:.7; pointer-events:none;
}
.access__map iframe{
  position:relative; width:100%; height:auto; aspect-ratio: 4 / 3.4; border:0;
  filter: grayscale(.75) contrast(.95);
  background: var(--c-base-light);
}
@media (max-width: 1023px){
  .access{ grid-template-columns: minmax(0,1fr); }
  .access__map::before{ inset: 10px -6px -10px 6px; }
}
@media (max-width: 599px){
  .access__table th{ width: 5.2em; font-size:.84rem; letter-spacing:.08em; }
}

/* ---------- 18. CTA ---------- */
.cta{ position:relative; text-align:center; padding-bottom: 16px; }
.cta__en{ font-family: var(--f-serif-en); font-style:italic; font-size: 1.4rem; letter-spacing:.2em; color: var(--c-ink); }
.cta__title{
  margin-top: 12px;
  font-weight:400; font-size: clamp(1.6rem, 3.6vw, 2.6rem); letter-spacing:.14em; line-height:1.7;
}
.cta__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap: 16px; margin-top: 44px; }
.cta__hours{ margin-top: 28px; font-family: var(--f-sans-jp); font-size: .8rem; letter-spacing:.06em; }
@media (max-width: 599px){
  .cta__actions{ flex-direction:column; }
  .cta__actions .btn{ width:100%; padding-inline: 1em; }
}

/* ---------- 19. Footer ---------- */
/* v2.0: 最下端 --blend×1.5 だけ base → deeper。文字は帯より上(v2.1: CTA は写真バンドになったので、フッターは base から始まる)
   (帯の開始位置に白 .06 の細線。padding-bottom で帯ぶんの余白を確保) */
.site-footer{
  --foot-band: calc(var(--blend) * 1.5);
  position:relative;
  background: linear-gradient(to bottom,
    var(--c-base) 0,
    var(--c-base) calc(100% - var(--foot-band)),
    var(--c-base-deeper) 100%);
  color: var(--c-ink);
  padding: 56px 0 calc(var(--foot-band) + 8px);
  /* 上罫線は CTA(写真バンド)の下端ゴールド細線が兼ねる(v2.1。二重線を避ける) */
}
.site-footer::after{
  content:""; position:absolute; left:0; right:0; bottom: var(--foot-band); height:1px;
  background: rgba(255,255,255,.06);
}
.site-footer__inner{
  display:grid; grid-template-columns: auto 1fr auto; gap: 24px 48px; align-items:center;
}
.site-footer__brand{ display:flex; align-items:center; gap: 16px; }
.site-footer__brand img{ width:64px; height:64px; }
.site-footer__name{ display:flex; flex-direction:column; line-height:1.3; }
.site-footer__name .brand__en{ font-size: 1.5rem; }
.site-footer__flower{ width: 56px; aspect-ratio:1; color: var(--c-gold); opacity:.6; }
.site-footer__info{ font-size: .82rem; line-height: 2; letter-spacing:.06em; }
.site-footer__copy{ font-family: var(--f-serif-en); font-size: .9rem; letter-spacing:.12em; }
@media (max-width: 899px){
  .site-footer__inner{ grid-template-columns: minmax(0,1fr); text-align:center; justify-items:center; }
}

/* ---------- 20. Fixed CTAs ---------- */
.fixbar{
  position:fixed; inset: auto 0 0 0; z-index:80;
  height: calc(var(--fixbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(44,43,42,.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(184,160,106,.3);
  display:none;
}
.fixbar__list{ display:grid; grid-template-columns: 1fr 1.25fr 1fr; height:100%; }
.fixbar__item{
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size: 11px; letter-spacing:.12em; color: var(--c-text-on-dark);
}
.fixbar__item--main{ background: var(--c-gold); color: var(--c-ink); font-size: 12px; }
@media (max-width: 767px){ .fixbar{ display:block; } }
.fixbar :focus-visible, .float-reserve:focus-visible{ outline-color: var(--c-gold-2); }

.float-reserve{
  position:fixed; right: 28px; bottom: 28px; z-index:80;
  width: 112px; height:112px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 2px;
  border:1px solid var(--c-gold);
  background: rgba(44,43,42,.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--c-text-on-dark);
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s linear .6s, background-color .45s var(--ease), color .45s var(--ease);
}
.float-reserve::before{
  content:""; position:absolute; inset: 5px; border-radius:50%;
  border: 1px solid rgba(184,160,106,.45);
}
.float-reserve__en{ font-family: var(--f-serif-en); font-style:italic; font-size: 1.05rem; letter-spacing:.1em; color: var(--c-gold-2); transition: color .45s; }
.float-reserve__ja{ font-size: .82rem; letter-spacing:.14em; }
.float-reserve.is-visible{ opacity:1; visibility:visible; transform:none; transition-delay: 0s; transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s, background-color .45s var(--ease), color .45s var(--ease); }
.float-reserve:hover, .float-reserve:focus-visible{ background: var(--c-gold); color: var(--c-ink); }
.float-reserve:hover .float-reserve__en, .float-reserve:focus-visible .float-reserve__en{ color: var(--c-ink); }
@media (max-width: 767px){ .float-reserve{ display:none; } }

/* ---------- 21. Scroll reveal(JS 有効時のみ隠す) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{
    opacity:0; transform: translateY(24px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
  }
  .js [data-reveal].is-inview{ opacity:1; transform:none; }
  .js .features .feature:nth-child(2), .js .flow .flow__step:nth-child(2){ transition-delay: .12s; }
  .js .features .feature:nth-child(3), .js .flow .flow__step:nth-child(3){ transition-delay: .24s; }
  .js .features .feature:nth-child(4), .js .flow .flow__step:nth-child(4){ transition-delay: .36s; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 大きく拡大する線画も線幅は細いまま保つ */
/* (拡大表示されるぶん viewBox 単位の線幅を細くする。non-scaling-stroke は描画アニメと相性が悪いため使わない) */
.hero__flower svg{ stroke-width: .5; }
.hero__flower .fl-fine{ stroke-width: .4; }
@media (max-width: 767px){ .hero__flower svg{ stroke-width: .7; } .hero__flower .fl-fine{ stroke-width: .55; } }

/* ---------- v2.3 花線画の視認性(design_spec §15) ----------
   ゴールド線は中間グレー地と明度が近く埋もれるため、地に応じて色を振り分ける。
   グレー地: 濃いブロンズ(--c-flower) / 写真・動画・暗地: 明るいゴールド(--c-flower-light)+影 */
:root{ --c-flower: #4A3F2C; --c-flower-light: var(--c-gold-2); }
.sec-head__num::before{ background-color: var(--c-flower); opacity:.78; }
.sec--space .sec-head__num::before, .sec--cta .sec-head__num::before{ background-color: var(--c-flower-light); opacity:.95; }
.concept__flower{ color: var(--c-flower); opacity:.3; }
.feature__flower{ color: var(--c-flower); opacity:.72; }
.divider{ color: var(--c-flower-light); opacity:1; filter: drop-shadow(0 1px 5px rgba(0,0,0,.65)); }
.site-footer__flower{ color: var(--c-flower); opacity:.7; }
.sp-menu__flower{ filter: invert(1); opacity:.28; }
.hero__flower{
  color: var(--c-flower-light); opacity:.95;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(0,0,0,.4));
}
.hero__flower svg{ stroke-width: .9; }
.hero__flower .fl-fine{ stroke-width: .7; }
@media (max-width: 767px){
  .hero__flower{ opacity:.75; }
  .hero__flower svg{ stroke-width: 1.1; } .hero__flower .fl-fine{ stroke-width: .85; }
}

/* ---------- v2.4 ゴールド罫線の視認性 + ヒーローコピー一行(design_spec §16) ----------
   罫線用に明るいゴールド(--c-gold-line)を新設し、1px → 1.5px。ボタン塗りの --c-gold は据え置き */
:root{ --c-gold-line: #E6D3A0; --line-w: 1.5px; }
.u-link{ background-image: linear-gradient(var(--c-gold-line), var(--c-gold-line)); }
.btn{ border-width: var(--line-w); border-color: var(--c-gold-line); }
.btn--gold{ border-color: var(--c-gold); }
.site-header.is-scrolled{ border-bottom-color: rgba(230,211,160,.6); }
.sp-menu__list li{ border-bottom-color: rgba(230,211,160,.5); }
.sp-menu .btn--line{ border-color: var(--c-gold-line); }
.sec-head__num::after{ height: var(--line-w); background: var(--c-gold-line); opacity:1; }
.hero__vertical::after{ width: var(--line-w); background: var(--c-gold-line); }
.hero__note{ border-top: var(--line-w) solid rgba(230,211,160,.9); }
.hero__scroll::after{
  width: var(--line-w);
  background: linear-gradient(to bottom, var(--c-gold-line) 0 30%, rgba(230,211,160,.35) 30% 100%);
  background-size: var(--line-w) 200%;
}
.concept__vertical::before{ width: var(--line-w); background: linear-gradient(to bottom, var(--c-gold-line), transparent); opacity:1; }
.feature:hover{ border-color: var(--c-gold-line); }
.feature__title{ border-bottom: var(--line-w) solid rgba(230,211,160,.9); }
.space__item img{ outline: var(--line-w) solid rgba(230,211,160,.85); }
.menu__cat-title{ border-bottom: var(--line-w) solid var(--c-gold-line); }
.badge{ border: var(--line-w) solid var(--c-gold-line); }
.menu__foot{ border-top: var(--line-w) solid var(--c-gold-line); }
.flow::before{ height: var(--line-w); background: var(--c-gold-line); opacity:1; }
.flow__num{ border: var(--line-w) solid var(--c-gold-line); }
.owner__ring{ border: var(--line-w) solid var(--c-gold-line); opacity:.95; }
.faq__q:hover .faq__q-text{ text-decoration-color: var(--c-gold-line); text-decoration-thickness: var(--line-w); }
.faq__icon::before, .faq__icon::after{ height: var(--line-w); background: var(--c-gold-line); }
.access__table tr:first-child th, .access__table tr:first-child td{ border-top: var(--line-w) solid var(--c-gold-line); }
.access__map::before{ border: var(--line-w) solid var(--c-gold-line); opacity:.95; }
.fixbar{ border-top-color: rgba(230,211,160,.5); }
.float-reserve{ border: var(--line-w) solid var(--c-gold-line); }
.float-reserve::before{ border-color: rgba(230,211,160,.6); }

/* ヒーローコピーは一行固定 */
.hero__title{ white-space: nowrap; font-size: clamp(2.2rem, 5.2vw, 4.6rem); }
.hero__line{ display:inline-block; }
.hero__line + .hero__line{ padding-left: 0; }
@media (max-width: 767px){
  .hero__title{ font-size: clamp(1.4rem, 7.6vw, 3rem); letter-spacing:.08em; }
}

/* ---------- v2.5(design_spec §17) ---------- */
/* ヒーローコピーをさらに小さく */
.hero__title{ font-size: clamp(2rem, 4.2vw, 3.7rem); }
@media (max-width: 767px){ .hero__title{ font-size: clamp(1.3rem, 6.6vw, 2.6rem); } }

/* 特徴カード: 見出しを 2 行ぶんの高さに揃え、下線の位置を 4 枚で一致させる */
@media (min-width: 600px){
  .feature__title{ min-height: calc(1.6em * 2 + 18px + var(--line-w)); }  /* border-box: 2 行 + 下 padding + 下線 */
}

/* ヘッダー(スクロール後)は黒系。文字は light */
.site-header.is-scrolled{
  background: rgba(36,35,34,.92);
  color: var(--c-text-on-dark);
  border-bottom-color: rgba(230,211,160,.45);
}
.site-header.is-scrolled .btn--line{ color: var(--c-text-on-dark); }
.site-header.is-scrolled :focus-visible{ outline-color: var(--c-gold-2); }

/* Instagram アイコン */
.ig-icon{ flex:none; width:1.35em; height:1.35em; }
.ig-link{ display:inline-flex; align-items:center; gap:.5em; }
.ig-link span{ background: linear-gradient(currentColor, currentColor) left 100% / 100% 1px no-repeat; padding-bottom:2px; }
.gnav__ig{
  display:grid; place-items:center; width:44px; height:44px; margin-right:-16px;
  font-size: 18px; border-radius:50%;
  transition: color .45s var(--ease);
}
.gnav__ig:hover, .gnav__ig:focus-visible{ color: var(--c-gold-line); }
.sp-menu__ig{ justify-content:center; }
.ig__follow{
  display:inline-flex; align-items:center; gap:.55em;
  padding: .55em 1.5em; border: var(--line-w) solid var(--c-ink); border-radius: 999px;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.ig__follow:hover, .ig__follow:focus-visible{ background: var(--c-ink); color: var(--c-text-on-dark); }

/* フッター: 最下部の余白(旧 --foot-band ぶん)を詰める */
.site-footer{
  padding: 48px 0 40px;
  background: linear-gradient(to bottom, var(--c-base) 0, var(--c-base) 40%, var(--c-base-deeper) 100%);
}
.site-footer::after{ content:none; }
.ig__account{ margin: -20px 0 40px; }
/* 特徴カードは面が明るく、明るいゴールド線が沈むので、見出し下線だけ濃いゴールド・2px */
.feature__title{ border-bottom: 2px solid var(--c-gold-deep); }
@media (min-width: 600px){ .feature__title{ min-height: calc(1.6em * 2 + 20px); } }
.feature:hover{ border-color: var(--c-gold-deep); }

/* ==========================================================================
   v2.8 PC ヒーロー: 右に大きな動画パネル + 左に装飾のあるコピー面(設計書 §18)
   素材が縦長のため全画面の横帯切り出しは寄りすぎた(v2.5 まで)。v2.7 の 9:16 枠は小さすぎた。
   PC は右端・下端まで届く約 4:5 のパネルに映像を大きく見せ、左のグレー地は
   大きな欧文の透かし・光のにじみ・花の線画・罫線で構成する。SP(767px 以下)は従来どおり全画面。
   ========================================================================== */
@media (min-width: 768px){
  .hero{
    color: var(--c-ink); --hero-shadow: none;
    --hero-side: max(var(--gutter), calc((100vw - 1280px) / 2));   /* v2.9: 左右の余白を揃えて構図を中央に */
    --hero-panel-w: min(44vw, 640px, calc((100svh - var(--header-h) - 72px) * .8));
    background:
      url("../img/grain.png?v=20260930b") repeat 0 0 / 200px 200px,
      linear-gradient(to right,
        rgba(44,43,42, var(--vignette)) 0, rgba(44,43,42,0) min(14%, var(--hero-side)),
        rgba(44,43,42,0) calc(100% - min(14%, var(--hero-side))), rgba(44,43,42, var(--vignette)) 100%),
      /* v2.10: 下端 220px で次のセクションの地色(base)へ溶かし、左右はページ共通のビネットと揃える */
      linear-gradient(to bottom, rgba(159,155,148,0) calc(100% - 220px), #9F9B94 100%),   /* 自前のグレイン(不透明度 1)がページ共通(.85)より僅かに暗く出る分、終点を base より 2 明るく */
      radial-gradient(ellipse 46% 60% at 24% 52%, rgba(203,198,190,.75) 0, rgba(177,172,165,.35) 45%, rgba(157,153,146,0) 72%),
      linear-gradient(115deg, #A6A29B 0%, var(--c-base) 45%, #928E87 100%);
  }
  /* 透かしの欧文 */
  .hero::before{
    content:"Shirabe";
    position:absolute; z-index:-4;
    left: calc(var(--hero-side) - 5vw); bottom: -3.6vw;
    font-family: var(--f-serif-en); font-style: italic; font-weight: 300;
    font-size: min(17.5vw, 330px); line-height: 1; letter-spacing: -.01em;
    color: rgba(243,241,238,.17);
    white-space: nowrap; pointer-events:none;
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 78%);
            mask-image: linear-gradient(to bottom, #000 35%, transparent 78%);
  }
  /* コピー面の罫線: ヘッダー下から降りる縦の細線 */
  .hero::after{
    content:"";
    position:absolute; z-index:-3;
    left: var(--hero-side);
    top: var(--header-h);
    width: var(--line-w); height: calc(50% - var(--header-h) / 2 - 150px);
    background: linear-gradient(to bottom, rgba(230,211,160,0), var(--c-gold-line));
  }
  .hero__media{
    inset: auto;
    top: calc(var(--header-h) + 28px); right: var(--hero-side); bottom: 44px;
    width: var(--hero-panel-w);
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(30,28,26,.24);   /* 影がヒーロー下端で切れて境界線に見えないよう、下余白 44px の内に収める */
  }
  /* パネルの内側に入れるゴールドの額縁線 */
  .hero__media::after{
    content:""; position:absolute; inset: 16px; z-index:1;
    border: 1px solid rgba(230,211,160,.75);
    pointer-events:none;
  }
  .hero__veil{ display:none; }
  .hero__flower{
    z-index: -2;
    right: calc(var(--hero-side) + var(--hero-panel-w) - 150px); left: auto;
    bottom: -7%;
    width: min(36vw, 500px);
    color: var(--c-flower); opacity: .34; filter: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 90%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 90%);
  }
  .hero__vertical{
    top: calc(var(--header-h) + 40px);
    right: calc(var(--hero-side) - 40px);
    color: var(--c-ink);
  }
  .hero__vertical::after{ background: var(--c-gold-deep); }
  .hero__scroll{
    left: var(--hero-side); transform: none;
    align-items: flex-start; color: var(--c-ink);
  }
  .hero__sep{ color: var(--c-ink); }
  .hero__note{ border-top-color: var(--c-gold-deep); }
  .hero .btn--ghost{ color: var(--c-ink); border-color: var(--c-ink); }
  .hero :focus-visible{ outline-color: var(--c-ink); }
  .hero__body{ left: var(--hero-side); bottom: auto; top: calc(50% + var(--header-h) / 2); transform: translateY(-50%); right: auto; }
  .hero__title{ font-size: clamp(1.6rem, 3.3vw, 3.2rem); letter-spacing:.1em; }
  /* 地がグレーになったので、ヘッダーは最上部でも黒帯にする */
  .site-header, .site-header:not(.is-scrolled){
    background: rgba(36,35,34,.92);
    color: var(--c-text-on-dark);
    text-shadow: none;
    border-bottom: var(--line-w) solid rgba(230,211,160,.45);
  }
}
@media (min-width: 768px) and (max-width: 1023px){
  .hero{ --hero-panel-w: 38vw; }
  .hero__note{ flex-direction:column; align-items:flex-start; row-gap:2px; }
  .hero__sep{ display:none; }
  .hero__media{ top: 50%; bottom: auto; height: min(calc(100% - var(--header-h) - 56px), 56vw); margin-top: calc(var(--header-h) / 2); transform: translateY(-50%); }
  .hero__vertical{ display:none; }
}

/* ---------- v2.11 コンセプトの縦書きコピー変更(「ほどく場所。」で一文字増) ----------
   SP は横書き一行に収める */
@media (max-width: 767px){
  .concept__vertical{ font-size: clamp(1.1rem, 5.6vw, 1.5rem); letter-spacing: .12em; white-space: nowrap; }
}

/* ---------- v2.12 ヒーロー補足行に「エステサロン」を追記(SEO)。狭い PC 幅では動画パネルに触れるため二段にする ---------- */
@media (min-width: 1024px) and (max-width: 1239px){
  .hero__note{ flex-direction:column; align-items:flex-start; row-gap:2px; }
  .hero__sep{ display:none; }
}