@charset "utf-8";
/* ============================================================
   doze — ドライヘッドスパ  /  base.css
   思想: うとうとの、その先へ  ／  署名: 光が落ちていく
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* 温かい闇（業界の冷たい紺を捨てる） */
  --night:  #1E1A18;   /* まどろみの底・赤み寄りの深墨 */
  --night2: #15110F;   /* さらに沈める最深部 */
  --paper:  #F0EAE1;   /* 生成りの薄明かり */
  --paper2: #E7DFD3;   /* 生成りの一段濃い面 */
  --ink:    #2B2521;   /* 文字（明地） */
  --glow:   #C8A177;   /* 薄明の琥珀・アクセント1色のみ */
  --glow-d: #A9814F;   /* 琥珀の沈んだ側（線・hover） */

  /* 署名変数：--dusk 0(薄明)→1(まどろみの底)。JSがTOPでスクロール駆動 */
  --dusk: 0;
  /* 文字反転率。地色(--dusk)より急峻に反転させ、中明度の"共倒れ"帯を素早く抜ける。
     JSが smoothstep で上書き。JS無しの既定は --dusk と同値。 */
  --onmix: var(--dusk);
  /* 地色は連続変化（光が落ちる演出）。文字色は onmix で反転（可読性を確保） */
  --ground: color-mix(in oklab, var(--paper) calc((1 - var(--dusk)) * 100%), var(--night));
  --on:     color-mix(in oklab, var(--ink)   calc((1 - var(--onmix)) * 100%), var(--paper));
  --on-mute:color-mix(in oklab, var(--on) 78%, transparent);
  --on-dim: color-mix(in oklab, var(--on) 50%, transparent);
  --line:   color-mix(in oklab, var(--on) 16%, transparent);
  --line-soft: color-mix(in oklab, var(--on) 9%, transparent);
  /* 地色に応じて可読なアクセント：明地=沈んだ琥珀 / 暗地=明るい琥珀（onmix連動） */
  --accent: color-mix(in oklab, var(--glow-d) calc((1 - var(--onmix)) * 100%), var(--glow));

  /* 余白（流体） */
  --pad: clamp(20px, 5vw, 68px);
  --sec-y: clamp(88px, 13vw, 190px);
  --maxw: 1200px;
  --readw: 640px;

  /* 書体 */
  --serif: "Shippori Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN",
           "Hiragino Mincho Pro", "ヒラギノ明朝 ProN W3", serif;
  --latin: "Italiana", "Shippori Mincho", serif;
  --sans:  "Jost", "Shippori Mincho", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{
  font-family:var(--serif);
  font-weight:400;
  color:var(--on);
  background:var(--ground);
  line-height:2.0;
  letter-spacing:.04em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .6s var(--ease), color .6s var(--ease);
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
::selection{ background:var(--glow); color:var(--night) }

/* 行頭禁則 */
h1,h2,h3,h4,p,li,dt,dd,figcaption,.nb{
  line-break:strict; word-break:normal; overflow-wrap:break-word;
}
.nb{ display:inline-block }        /* 文節改行の禁止塊 */
.tel,.mail{ overflow-wrap:anywhere }

/* ============================================================
   loader — 減光型（生成りの明画→暗転してヒーローへ）
   JS/CDN非依存・数秒フェイルセーフ・noscript非表示
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:var(--paper);
  transition:background-color 1.4s var(--ease), opacity 1.1s var(--ease) 1.1s, visibility 0s 2.2s;
}
.loader__mark{
  font-family:var(--latin);
  font-size:clamp(30px,7vw,58px);
  letter-spacing:.42em; text-indent:.42em;
  color:var(--ink);
  opacity:0; transform:translateY(6px);
  animation:loaderIn 1.5s var(--ease) forwards;
}
@keyframes loaderIn{ to{ opacity:1; transform:none } }
.is-dimmed .loader{ background:var(--night); opacity:0; visibility:hidden }
.is-dimmed .loader__mark{ color:var(--paper) }
@media (prefers-reduced-motion: reduce){
  .loader,.loader__mark{ transition:none; animation:none }
  .is-dimmed .loader{ transition:opacity .3s, visibility 0s .3s }
}

/* ============================================================
   header
   ============================================================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:120;   /* drawer(100)より上＝開いても×を押せる */
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.4vw,30px) var(--pad);
  mix-blend-mode:normal;
  transition:padding .5s var(--ease), background-color .5s var(--ease);
}
.hdr--solid{
  padding-top:clamp(11px,1.6vw,18px); padding-bottom:clamp(11px,1.6vw,18px);
  background:color-mix(in oklab, var(--ground) 82%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
/* 既定（ヒーロー/暗い上に乗る間）は淡色。--solid で地色連動へ */
.hdr__logo{
  font-family:var(--latin);
  font-size:clamp(22px,2.4vw,27px);
  letter-spacing:.36em; text-indent:.36em;
  line-height:1; color:var(--paper);
  transition:color .5s var(--ease);
}
.hdr__logo small{ display:block; font-family:var(--sans); font-size:9px; letter-spacing:.5em;
  text-indent:.5em; margin-top:5px; color:color-mix(in oklab,var(--paper) 62%,transparent); font-weight:300 }
.hdr__nav{ display:flex; align-items:center; gap:clamp(20px,2.4vw,38px) }
.hdr__link{
  font-family:var(--latin); font-size:14px; letter-spacing:.18em;
  color:color-mix(in oklab,var(--paper) 74%,transparent); transition:color .3s var(--ease);
}
.hdr__link:hover{ color:var(--paper) }
.hdr__cta{
  font-family:var(--latin); font-size:14px; letter-spacing:.2em;
  color:var(--paper); padding:11px 24px; position:relative;
  border:1px solid color-mix(in oklab,var(--paper) 34%,transparent);
  transition:color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
/* solid（スクロール後・地色に馴染ませる） */
.hdr--solid .hdr__logo{ color:var(--on) }
.hdr--solid .hdr__logo small{ color:var(--on-mute) }
.hdr--solid .hdr__link{ color:var(--on-mute) }
.hdr--solid .hdr__link:hover{ color:var(--on) }
.hdr--solid .hdr__cta{ color:var(--on); border-color:var(--line) }
.hdr__cta:hover{ background:var(--glow); border-color:var(--glow); color:var(--night) }
.hdr__burger{ display:none }
@media (max-width:940px){
  .hdr__nav{ display:none }
  .hdr__burger{
    display:flex; flex-direction:column; gap:6px; width:30px; height:18px;
    justify-content:center; z-index:110; position:relative;
  }
  .hdr__burger span{ height:1px; width:100%; background:var(--paper); transition:transform .45s var(--ease), opacity .3s, background-color .5s }
  .hdr--solid .hdr__burger span{ background:var(--on) }
  .is-menu .hdr__burger span{ background:var(--paper) }
  .is-menu .hdr__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  .is-menu .hdr__burger span:nth-child(2){ opacity:0 }
  .is-menu .hdr__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
}

/* ---------- drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:100;
  background:var(--night); color:var(--paper);
  display:flex; flex-direction:column; justify-content:flex-start;   /* 上寄せ＝多項目でも見切れない */
  padding:clamp(96px,15vh,150px) var(--pad) 10vh;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transition:opacity .55s var(--ease), visibility 0s .55s;
}
.is-menu .drawer{ opacity:1; visibility:visible; transition:opacity .55s var(--ease) }
.drawer__list{ list-style:none; display:flex; flex-direction:column; gap:clamp(14px,3vw,26px) }
.drawer__list a{ display:flex; align-items:baseline; gap:18px }
.drawer__num{ font-family:var(--sans); font-weight:300; font-size:12px; letter-spacing:.2em; color:var(--glow); width:2.4em }
.drawer__en{ font-family:var(--latin); font-size:clamp(26px,6vw,44px); letter-spacing:.06em; line-height:1;
  color:var(--paper); transition:opacity .3s }
.drawer__jp{ font-size:12px; letter-spacing:.24em; color:color-mix(in oklab,var(--paper) 55%, transparent); margin-left:4px }
.drawer__list a:hover .drawer__en{ opacity:.55 }
.drawer__foot{ margin-top:clamp(30px,6vw,60px); font-size:12px; letter-spacing:.2em;
  color:color-mix(in oklab,var(--paper) 55%, transparent); display:flex; flex-wrap:wrap; gap:6px 26px }
.drawer__foot a:hover{ color:var(--glow) }

/* ============================================================
   layout primitives
   ============================================================ */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.sec{ padding-block:var(--sec-y) }
.eyebrow{
  font-family:var(--sans); font-weight:300; font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--accent); opacity:.7 }
.eyebrow--center{ justify-content:center }

.h-sec{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,4.4vw,44px); line-height:1.5; letter-spacing:.08em;
  margin-top:clamp(20px,3vw,34px);
}
.h-sec .en{ display:block; font-family:var(--latin); font-size:.44em; letter-spacing:.24em;
  color:var(--on-mute); margin-top:.9em }
.lead{ font-size:clamp(16px,1.5vw,19px); line-height:2.15; letter-spacing:.06em;
  color:var(--on); max-width:var(--readw) }
.body-t{ font-size:clamp(14.5px,1.15vw,16px); line-height:2.15; color:var(--on-mute); max-width:var(--readw) }
.body-t + .body-t{ margin-top:1.4em }

/* pull quote */
.pull{
  font-family:var(--serif); font-size:clamp(22px,3.6vw,40px);
  line-height:1.9; letter-spacing:.08em; color:var(--on);
}
.pull .glow{ color:var(--accent) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:16px;
  font-family:var(--latin); font-size:15px; letter-spacing:.18em;
  padding:18px 40px; position:relative; color:var(--night);
  background:var(--glow); border:1px solid var(--glow);
  transition:background-color .45s var(--ease), color .45s var(--ease), gap .45s var(--ease);
  overflow:hidden;
}
.btn::after{ content:""; width:26px; height:1px; background:currentColor; transition:width .45s var(--ease) }
.btn:hover{ background:transparent; color:var(--glow); gap:22px }
.btn--ghost{ background:transparent; color:var(--on); border-color:var(--line) }
.btn--ghost:hover{ color:var(--glow); border-color:var(--glow) }
.btn--lg{ padding:22px 52px; font-size:16px }

.arrow-link{
  font-family:var(--latin); font-size:15px; letter-spacing:.14em; color:var(--on);
  display:inline-flex; align-items:center; gap:14px; transition:gap .4s var(--ease), color .4s var(--ease);
}
.arrow-link::after{ content:""; width:30px; height:1px; background:var(--accent); transition:width .4s var(--ease) }
.arrow-link:hover{ gap:20px; color:var(--accent) }
.arrow-link:hover::after{ width:44px }

/* ============================================================
   reveal
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease) }
[data-reveal].in{ opacity:1; transform:none }
[data-reveal][data-d="1"]{ transition-delay:.12s }
[data-reveal][data-d="2"]{ transition-delay:.24s }
[data-reveal][data-d="3"]{ transition-delay:.36s }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none }
}

/* ============================================================
   footer / 店舗情報
   ============================================================ */
.foot{ background:var(--night2); color:var(--paper); padding-block:clamp(70px,9vw,120px) }
.foot .wrap{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(40px,6vw,90px) }
.foot__mark{ font-family:var(--latin); font-size:clamp(40px,7vw,74px); letter-spacing:.2em; line-height:1; color:var(--paper) }
.foot__tag{ font-size:14px; letter-spacing:.14em; color:color-mix(in oklab,var(--paper) 60%, transparent); margin-top:22px; line-height:2 }
.foot__nav{ list-style:none; columns:2; column-gap:40px }
.foot__nav li{ margin-bottom:14px; break-inside:avoid }
.foot__nav a{ font-family:var(--latin); font-size:14px; letter-spacing:.14em;
  color:color-mix(in oklab,var(--paper) 72%, transparent); transition:color .3s }
.foot__nav a:hover{ color:var(--glow) }
.foot__info{ margin-top:34px; font-size:12.5px; letter-spacing:.08em; line-height:2.1;
  color:color-mix(in oklab,var(--paper) 55%, transparent) }
.foot__bottom{ max-width:var(--maxw); margin:clamp(50px,7vw,80px) auto 0; padding:26px var(--pad) 0;
  border-top:1px solid color-mix(in oklab,var(--paper) 12%, transparent);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--sans); font-weight:300; font-size:11px; letter-spacing:.18em;
  color:color-mix(in oklab,var(--paper) 45%, transparent) }
@media (max-width:760px){ .foot .wrap{ grid-template-columns:1fr } }

/* ---------- 固定予約ボタン（フッター到達で消える） ---------- */
.fab{
  position:fixed; right:0; bottom:0; z-index:80;
  font-family:var(--latin); font-size:14px; letter-spacing:.2em;
  color:var(--paper); background:color-mix(in oklab,var(--night) 72%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:16px 30px; display:inline-flex; align-items:center; gap:14px;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft);
}
.fab::after{ content:""; width:22px; height:1px; background:var(--glow) }
.fab:hover{ color:var(--glow) }
.fab.is-hidden{ opacity:0; transform:translateY(100%); pointer-events:none }
@media (max-width:600px){ .fab{ left:0; right:0; justify-content:center; bottom:0 } }

/* ============================================================
   下層ページ共通：page title（減光リビール）
   ============================================================ */
.phead{
  position:relative; min-height:clamp(56vh,64vh,72vh);
  display:flex; align-items:flex-end;
  padding:0 var(--pad) clamp(50px,7vw,90px);
  overflow:hidden; background:var(--night); color:var(--paper);
}
.phead__bg{ position:absolute; inset:0; z-index:0 }
.phead__bg img{ width:100%; height:100%; object-fit:cover;
  animation:pheadFocus 2.4s var(--ease) both }
.phead__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, color-mix(in oklab,var(--night) 40%,transparent) 0%,
     transparent 32%, color-mix(in oklab,var(--night) 78%,transparent) 100%) }
@keyframes pheadFocus{ from{ opacity:0; filter:blur(16px); transform:scale(1.06) } to{ opacity:1; filter:none; transform:none } }
.phead__in{ position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; width:100% }
.phead__crumb{ font-family:var(--sans); font-weight:300; font-size:11px; letter-spacing:.18em;
  color:color-mix(in oklab,var(--paper) 55%, transparent); margin-bottom:clamp(20px,3vw,34px);
  display:flex; gap:10px; align-items:center }
.phead__crumb a{ transition:color .3s } .phead__crumb a:hover{ color:var(--glow) }
.phead__jp{ font-size:clamp(30px,5.2vw,58px); letter-spacing:.1em; line-height:1.4; margin-top:16px; color:var(--paper) }
.phead__en{ font-family:var(--latin); font-size:clamp(13px,1.4vw,16px); letter-spacing:.34em; color:var(--glow) }
.phead__lead{ margin-top:22px; font-size:clamp(15px,1.4vw,18px); line-height:2.1;
  color:color-mix(in oklab,var(--paper) 76%, transparent); max-width:var(--readw) }

/* breadcrumb */
.crumb{ font-family:var(--sans); font-weight:300; font-size:11px; letter-spacing:.16em;
  color:var(--on-dim); padding:calc(var(--pad)) var(--pad) 0 }
.crumb .wrap{ padding-inline:0 }
.crumb a:hover{ color:var(--glow) }

/* 下層は静的（薄明）で読みやすさ優先 */
body.sub{ --dusk:0 }

/* ---------- shared: figure ---------- */
.figure{ position:relative; overflow:hidden; background:var(--night2) }
.figure img{ width:100%; height:100%; object-fit:cover }
.figure figcaption{ position:absolute; left:18px; bottom:14px; font-family:var(--sans); font-weight:300;
  font-size:11px; letter-spacing:.2em; color:var(--paper); mix-blend-mode:difference }

/* ---------- utilities ---------- */
.center{ text-align:center }
.mt-s{ margin-top:clamp(20px,3vw,34px) }
.mt-m{ margin-top:clamp(34px,5vw,60px) }
.mt-l{ margin-top:clamp(50px,8vw,100px) }
.divider{ height:1px; background:var(--line); max-width:var(--maxw); margin-inline:auto }