@charset "UTF-8";
/* =====================================================================
   宿 灯環（とうわ）— 一棟貸しの宿 / デモサイト
   『サイトのミカタ』制作デモ（架空の店舗）

   トーン: 日暮れから、朝まで。生成りの和紙に外光を大きく置く「中明」。
   ------------------------------------------------------------------
   ⚠ 2026-07-31 全面改訂。初版は夜の藍（平均輝度15）で組んでいたが、
     同じ制作デモの BAR 常夜（8）と見分けがつかない＝「暗くする」が
     店の判断ではなく手癖になっていた。宿が売っているのは夜そのもの
     ではなく「日暮れから朝までの一日」なので、面を紙へ起こし、
     沈めるのは写真の中と CTA の帯だけに限っている。
   ⚠ トークン名は「面＝paper / 文字＝sumi / 灯＝lamp」の役割で読む。
     lamp-ink が最も濃く lamp-fine へ向かって薄くなる（数字ではない）。
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  /* 生成りの和紙（面）。base が地、sunk がいちばん沈む面 */
  --paper-base: #F4EFE4;
  --paper-page: #EDE6D8;
  --paper-sunk: #DFD5C2;
  --paper-card: #F6F1E7;
  --paper-deep: #E5DCCB;
  --paper-warm: #EFE4D0;

  /* 夜の藍（沈める側。CTA帯・フッター・写真の上だけで使う） */
  --ai-900: #16212F;
  --ai-700: #22344A;

  /* 灯の色。紙の上で読める濃さへ振ってある（ink がいちばん濃い） */
  --lamp-ink: #3A2410;
  --lamp-text: #8A4A12;
  --lamp-mark: #A25A16;
  --lamp-label: #93500F;
  --lamp-fine: #7A4110;

  /* 墨（文字） */
  --sumi: #262A2E;
  --sumi-70: rgba(38, 42, 46, 0.76);
  --sumi-45: rgba(38, 42, 46, 0.56);
  --sumi-24: rgba(38, 42, 46, 0.28);

  --hair: rgba(150, 84, 22, 0.30);
  --hair-soft: rgba(38, 42, 46, 0.14);

  /* 写真の上に置く文字（紙の色。photo は明暗どちらもあるので固定値） */
  --on-photo: #F7F2E7;

  --jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
    "MS PMincho", serif;
  --jp-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --en: "Cormorant Garamond", "Shippori Mincho", Georgia, serif;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.24, 1);

  --shell: min(1240px, 92vw);
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(6rem, 13vw, 11rem);
  --r-lg: 2rem;
  --r-md: 1.25rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper-base);
}
body {
  min-height: 100dvh;
  overflow-x: clip;
  /* 紙は一色で塗らない。上端に朝の白、下端に日暮れの温みを回して一日を通す */
  background:
    radial-gradient(120% 68% at 78% -8%, rgba(255, 252, 244, 0.9), transparent 62%),
    radial-gradient(90% 52% at 6% 104%, rgba(206, 176, 128, 0.30), transparent 66%),
    linear-gradient(180deg, var(--paper-base) 0%, var(--paper-page) 46%, var(--paper-warm) 100%);
  background-attachment: scroll;
  color: var(--sumi);
  font-family: var(--jp);
  font-size: clamp(0.98rem, 0.92rem + 0.22vw, 1.06rem);
  line-height: 2.05;
  letter-spacing: 0.055em;
  font-feature-settings: "palt" 1;
  /* Cormorant の既定はオールドスタイル数字で「1」がローマ数字に見えるため、全面ライニングにする */
  font-variant-numeric: lining-nums tabular-nums;
  word-break: auto-phrase;
  line-break: strict;
  text-spacing-trim: trim-start;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--lamp-mark); outline-offset: 4px; border-radius: 2px; }
::selection { background: rgba(150, 84, 22, 0.32); color: var(--lamp-ink); }

/* ---------- 粒子状のフィルムグレイン（固定・非干渉） ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: 59;
  pointer-events: none;
  /* 紙の四隅にだけ日焼けの温みを置く。暗く落とすのではなく色を寄せる */
  background: radial-gradient(130% 96% at 50% 42%, transparent 52%, rgba(150, 110, 58, 0.13) 100%);
  mix-blend-mode: multiply;
}

/* ---------- 共通レイアウト ---------- */
.shell { width: var(--shell); margin-inline: auto; }
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: clamp(4rem, 8vw, 7rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.42em 1.05em;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(150, 84, 22, 0.05);
  font-family: var(--jp-sans);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--lamp-text);
}
.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lamp-label);
}

.en {
  font-family: var(--en);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--lamp-text);
}
.en--caps {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 0.68rem;
  color: var(--sumi-45);
}

.h2 {
  font-size: clamp(1.85rem, 1.1rem + 3.1vw, 3.5rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.h3 {
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.08em;
}
.lead {
  color: var(--sumi-70);
  font-size: clamp(0.95rem, 0.9rem + 0.28vw, 1.08rem);
  line-height: 2.3;
}
.dim { color: var(--sumi-45); }

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, var(--hair), transparent 78%);
  transform-origin: left;
}

/* 縦書きアクセント */
.tate {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-feature-settings: "palt" 0;
}
.tate-label {
  writing-mode: vertical-rl;
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  color: var(--sumi-45);
  font-family: var(--jp-sans);
  padding-block-start: 0.2em;
}
.tate-label::after {
  content: "";
  display: block;
  width: 1px;
  height: clamp(2.5rem, 6vw, 5rem);
  margin: 1.1em auto 0;
  background: linear-gradient(180deg, var(--hair), transparent);
}

/* ---------- 二重縁のプレート（Double-Bezel） ---------- */
.plate {
  padding: 0.5rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--hair-soft);
  background: linear-gradient(160deg, rgba(38, 42, 46, 0.055), rgba(38, 42, 46, 0.012));
  transition: border-color 0.7s var(--ease), transform 0.7s var(--ease);
}
.plate__core {
  position: relative;
  height: 100%;
  border-radius: calc(var(--r-lg) - 0.5rem);
  border: 1px solid var(--hair);
  background:
    radial-gradient(120% 90% at 50% -18%, rgba(150, 84, 22, 0.11), transparent 62%),
    linear-gradient(180deg, var(--paper-card), var(--paper-sunk));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 22px 48px -32px rgba(74, 56, 32, 0.55);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  overflow: hidden;
}
.plate:hover { border-color: rgba(150, 84, 22, 0.28); }

/* ---------- 写真レイヤー ----------
   実写が主役。加工はパレットへ寄せるだけの弱グレーディング（±10%以内）に留め、
   可読性は「方向を持つ局所スクリム」と text-shadow の二重で確保する（全面ヴェール禁止）。
   ⚠ 初版はここで brightness(.94) と落としていたが、面が紙になった今は
     写真だけ沈んで浮いて見える。落とすのをやめ、わずかに起こす側へ振った。
   ------------------------------------------------------------------ */
.ph {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--paper-sunk);
}
.ph img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.97) contrast(1.02) brightness(1.05);
  transition: transform 1.8s var(--ease);
}
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--5x4 { aspect-ratio: 5 / 4; }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--wide { aspect-ratio: 16 / 7; }
.ph--band { aspect-ratio: 21 / 8; }
/* 上端と下端だけを締める。中央（被写体）は素のまま */
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 9, 15, 0.34) 0%, rgba(5, 9, 15, 0) 30%,
    rgba(5, 9, 15, 0) 60%, rgba(5, 9, 15, 0.5) 100%);
}
.ph--plain::after { display: none; }

/* 写真に文字を重ねるときの札 */
.ph__cap {
  position: absolute;
  z-index: 2;
  inset-block-end: clamp(0.9rem, 2vw, 1.4rem);
  inset-inline-start: clamp(0.9rem, 2vw, 1.4rem);
  margin: 0;
  /* 写真の上は紙の色のまま。面が明るくなっても、ここだけは白文字が正しい */
  color: var(--on-photo);
  text-shadow: 0 2px 18px rgba(5, 9, 15, 0.92), 0 0 44px rgba(5, 9, 15, 0.7);
}

/* ---------- ボタン ---------- */
.btn {
  --btn-bg: rgba(38, 42, 46, 0.05);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.62rem 0.62rem 0.62rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--btn-bg);
  font-family: var(--jp-sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--sumi);
  transition: transform 0.6s var(--ease), background-color 0.6s var(--ease),
    border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.btn__ico {
  display: grid;
  place-items: center;
  width: 2.15rem; height: 2.15rem;
  border-radius: 50%;
  background: rgba(150, 84, 22, 0.14);
  color: var(--lamp-text);
  transition: transform 0.6s var(--ease), background-color 0.6s var(--ease);
}
.btn__ico svg { width: 13px; height: 13px; }
.btn:hover {
  background: rgba(150, 84, 22, 0.12);
  border-color: rgba(150, 84, 22, 0.4);
  box-shadow: 0 20px 44px -28px rgba(150, 84, 22, 0.75);
}
.btn:hover .btn__ico { background: rgba(150, 84, 22, 0.26); transform: translate(3px, -2px) scale(1.06); }
.btn:active { transform: scale(0.98); }
/* 主動線。紙面では「枠だけのボタン」は弱いので、ここだけ面で塗る */
.btn--lamp {
  --btn-bg: linear-gradient(180deg, #8A4A12, #6E3A0C);
  border-color: #6E3A0C;
  color: #F8F1E4;
}
.btn--lamp .btn__ico { background: rgba(255, 255, 255, 0.16); color: #F8F1E4; }
.btn--lamp:hover {
  background: linear-gradient(180deg, #9C5516, #7C420E);
  border-color: #7C420E;
  box-shadow: 0 20px 44px -28px rgba(110, 58, 12, 0.9);
}
.btn--lamp:hover .btn__ico { background: rgba(255, 255, 255, 0.28); }

.link-min {
  display: inline-flex; align-items: baseline; gap: 0.7em;
  font-family: var(--jp-sans); font-size: 0.76rem; letter-spacing: 0.16em;
  color: var(--lamp-text);
  padding-bottom: 0.35em;
  border-bottom: 1px solid rgba(150, 84, 22, 0.28);
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease), gap 0.5s var(--ease);
}
.link-min:hover { color: var(--lamp-ink); border-color: var(--lamp-mark); gap: 1.1em; }

/* ---------- ヘッダー（浮遊するガラスの札） ---------- */
.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 90;
  padding: 0.7rem 1.2rem; border-radius: 999px;
  background: var(--paper-card); border: 1px solid var(--hair);
  font-family: var(--jp-sans); font-size: 0.75rem;
}
.skip:focus { top: 1rem; }

.siteheader {
  position: fixed;
  inset-block-start: clamp(0.85rem, 2vw, 1.6rem);
  inset-inline: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  max-width: 94vw;
  padding: 0.5rem 0.55rem 0.5rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(248, 244, 235, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 26px 60px -38px rgba(60, 44, 24, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.8s var(--ease), background-color 0.8s var(--ease);
}
.nav__brand { display: flex; align-items: center; gap: 0.7rem; }
.brandmark { width: 20px; height: 27px; color: var(--lamp-mark); flex: none; }
.nav__brandja { display: block; font-size: 0.88rem; letter-spacing: 0.2em; line-height: 1.3; }
.nav__branden {
  display: block; font-family: var(--en); font-size: 0.56rem;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--sumi-45);
}
.nav__list { display: flex; align-items: center; gap: clamp(0.4rem, 1.4vw, 1rem); }
.nav__list a {
  position: relative;
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-family: var(--jp-sans);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--sumi-45);
  transition: color 0.6s var(--ease), background-color 0.6s var(--ease);
}
.nav__list a:hover { color: var(--sumi); background: rgba(38, 42, 46, 0.06); }
.nav__list a[aria-current="page"] { color: var(--lamp-text); background: rgba(150, 84, 22, 0.10); }
.nav__list a[aria-current="page"]::after {
  content: "";
  position: absolute; left: 50%; bottom: 0.22rem;
  width: 3px; height: 3px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--lamp-label);
}
.nav__cta { margin-inline-start: 0.2rem; }
.nav__toggle {
  display: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: rgba(150, 84, 22, 0.08);
  position: relative;
}
.nav__toggle .bar {
  position: absolute; left: 50%; width: 15px; height: 1px;
  background: var(--lamp-text);
  transform: translateX(-50%);
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}
.nav__toggle .bar:nth-child(1) { top: calc(50% - 4px); }
.nav__toggle .bar:nth-child(2) { top: calc(50% + 4px); }
body.is-menu .nav__toggle .bar:nth-child(1) { transform: translateX(-50%) translateY(4px) rotate(45deg); }
body.is-menu .nav__toggle .bar:nth-child(2) { transform: translateX(-50%) translateY(-4px) rotate(-45deg); }

/* 全画面メニュー */
.menu {
  position: fixed; inset: 0; z-index: 65;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(5.5rem, 16vh, 8rem) var(--gut) clamp(2rem, 6vh, 3.5rem);
  background: rgba(241, 235, 224, 0.94);
  -webkit-backdrop-filter: blur(30px) saturate(1.1);
  backdrop-filter: blur(30px) saturate(1.1);
  opacity: 0; visibility: hidden;
  transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
}
body.is-menu .menu { opacity: 1; visibility: visible; }
.menu__list { display: grid; align-content: center; gap: clamp(0.6rem, 2.4vh, 1.4rem); }
.menu__item { overflow: hidden; }
.menu__item a {
  display: flex; align-items: baseline; gap: 1rem;
  padding-block: 0.4rem;
  font-size: clamp(1.5rem, 8vw, 2.2rem);
  letter-spacing: 0.14em;
  transform: translateY(115%);
  transition: transform 0.85s var(--ease), color 0.5s var(--ease);
}
body.is-menu .menu__item a { transform: translateY(0); }
body.is-menu .menu__item:nth-child(1) a { transition-delay: 0.10s; }
body.is-menu .menu__item:nth-child(2) a { transition-delay: 0.16s; }
body.is-menu .menu__item:nth-child(3) a { transition-delay: 0.22s; }
body.is-menu .menu__item:nth-child(4) a { transition-delay: 0.28s; }
.menu__item a[aria-current="page"] { color: var(--lamp-text); }
.menu__num { font-family: var(--en); font-size: 0.7rem; color: var(--lamp-label); letter-spacing: 0.2em; }
.menu__en { font-family: var(--en); font-style: italic; font-size: 0.85rem; color: var(--sumi-45); }
.menu__foot { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: baseline; color: var(--sumi-45); font-size: 0.72rem; font-family: var(--jp-sans); }

/* ---------- ヒーロー（TOP） ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* 実写のフルブリード＋方向を持つスクリム。
   ⚠ 初版は α.95 の墨で左半分を潰していた。写真の中で明るいのは
     「開いた障子の先の庭」で、そこがこの宿の見せ場なのに、スクリムが
     それごと沈めていた。いまは紙のスクリムを文字の側にだけ寄せ、
     庭と縁側は素のまま残す。文字は墨＝紙のスクリムの上で読ませる。 */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(1) contrast(1.08) brightness(1.06);
  transform: scale(1.04);
  animation: kenburns 36s var(--ease-soft) forwards;
}
@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.16) translate3d(-1.6%, -1.8%, 0); }
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* ⚠ 全面に薄い膜を掛けない。掛けると障子も庭も一様に白茶けて、
     写真が「背景の柄」に落ちる。左端は強く・中央手前で0にする。 */
  background:
    linear-gradient(102deg,
      rgba(246, 241, 231, 0.97) 0%, rgba(246, 241, 231, 0.9) 19%,
      rgba(246, 241, 231, 0.34) 38%, rgba(246, 241, 231, 0) 56%),
    linear-gradient(0deg,
      rgba(240, 233, 220, 0.9) 0%, rgba(240, 233, 220, 0.18) 18%, rgba(240, 233, 220, 0) 38%);
}
/* 縦組みの見出しが乗る右端。ここだけ紙をもう一枚、狭く重ねる */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(34% 86% at 104% 48%,
    rgba(246, 241, 231, 0.95), rgba(246, 241, 231, 0.44) 54%, rgba(246, 241, 231, 0) 82%);
}
.hero__glow {
  position: absolute;
  z-index: -1;
  inset-block-start: 6%;
  inset-inline-end: 4%;
  width: min(58vw, 640px);
  aspect-ratio: 1;
  /* 灯の光ではなく、障子越しの外光。写真を白茶けさせない程度に留める */
  background: radial-gradient(circle at 50% 45%, rgba(255, 253, 246, 0.16), rgba(255, 248, 232, 0.05) 42%, transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}
.hero__inner {
  width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(7rem, 16vh, 10rem) clamp(5rem, 12vh, 8rem);
}
.hero__copy {
  position: relative;
  max-width: min(40ch, 100%);
  display: grid; gap: clamp(1.3rem, 3vw, 2rem); justify-items: start;
}
/* 全面ヴェールの代わり。文字が乗っているところにだけ紙を敷き、
   写真の中央（開いた障子と庭）は最後まで素通しにする。 */
.hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3.5rem -7rem -3rem -8rem;
  background: radial-gradient(66% 76% at 32% 50%,
    rgba(246, 241, 231, 0.93), rgba(246, 241, 231, 0.6) 46%, rgba(246, 241, 231, 0) 78%);
}
.hero__en {
  font-family: var(--en);
  font-size: clamp(1.05rem, 0.85rem + 1.1vw, 1.7rem);
  font-style: italic;
  font-weight: 300;
  color: var(--lamp-text);
  line-height: 1.5;
  letter-spacing: 0.02em;
  /* 紙のスクリムの上に置くので、影ではなく「紙のにじみ」で文字の足元を固める */
  text-shadow: 0 1px 16px rgba(246, 241, 231, 0.95);
}
.hero__lead {
  color: var(--sumi-70); line-height: 2.4;
  font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
  text-shadow: 0 1px 14px rgba(246, 241, 231, 0.95);
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0.55rem 1.4rem;
  font-family: var(--jp-sans); font-size: 0.7rem; letter-spacing: 0.16em;
  color: var(--sumi-45);
}
.hero__meta li { display: flex; align-items: center; gap: 0.7em; }
.hero__meta li + li::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--lamp-fine); margin-inline-end: 0.7em;
}
.hero__title {
  /* ⚠ 縦組みなので「行数」ではなく1行の字数が高さを決める。字数×1.14em が
     max-height(70vh) を越えると、その行が勝手に段割れして手で切った位置が壊れる。
     いまの主コピーは最長8字（いい宿の条件は、）＝ 8×1.14em ≦ 70vh を満たす必要があり、
     幅(vw)だけでなく高さ(vh)でも頭を押さえる。6.9vh は 8字で 62.9vh＝7vh の余裕を残す値。
     1280×800 実測 55.2px（8字=503px ≦ 560px）。字数を増やすならここも下げること。 */
  font-size: clamp(2.25rem, min(4.6vw, 6.9vh), 3.7rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.14em;
  color: var(--lamp-ink);
  text-shadow: 0 2px 26px rgba(246, 241, 231, 0.95), 0 0 60px rgba(246, 241, 231, 0.8);
  justify-self: end;
  max-height: 70vh;
}
.mask { display: block; overflow: hidden; }
.mask__in { display: block; }
html.js .mask__in { transform: translateY(105%); }
.hero__cue {
  position: absolute;
  inset-block-end: clamp(1.4rem, 4vh, 2.6rem);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.8rem;
  font-family: var(--en); font-size: 0.6rem; letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--sumi-45);
}
.hero__cue span.bar {
  width: 1px; height: clamp(2.2rem, 6vh, 3.6rem);
  background: linear-gradient(180deg, var(--lamp-label), transparent);
  transform-origin: top;
  animation: cue 2.8s var(--ease-soft) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(100%); opacity: 0; }
}

/* ---------- 下層ページのヒーロー ---------- */
.phero {
  position: relative;
  padding-block: clamp(8.5rem, 20vh, 13rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.phero::before {
  content: "";
  position: absolute; inset-block-start: -30%; inset-inline-start: 46%;
  width: min(70vw, 780px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(150, 84, 22, 0.14), transparent 62%);
  pointer-events: none;
}
.phero__inner { display: grid; gap: clamp(1.2rem, 3vw, 1.8rem); position: relative; }

/* 下層ページも実写のフルブリード。下端はページ背景へ溶かす */
.phero--img { padding-block: clamp(11rem, 26vh, 15.5rem) clamp(3.5rem, 8vw, 6rem); }
.phero--img::before { display: none; }
.phero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.phero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  filter: saturate(0.96) contrast(1.02) brightness(1.12);
  transform: scale(1.03);
}
/* 下端はページの紙色（--paper-base）へ溶かす。ここを揃えないと帯の切れ目が出る */
.phero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(246, 241, 231, 0.95) 0%, rgba(246, 241, 231, 0.82) 32%,
      rgba(246, 241, 231, 0.3) 66%, rgba(246, 241, 231, 0) 100%),
    linear-gradient(0deg,
      rgba(244, 239, 228, 1) 0%, rgba(244, 239, 228, 0.6) 18%, rgba(244, 239, 228, 0) 54%);
}
.phero--img .phero__inner { z-index: 1; }
.phero--img .phero__title { text-shadow: 0 2px 24px rgba(246, 241, 231, 0.95); }
.phero--img .phero__en,
.phero--img .phero__lead { text-shadow: 0 1px 14px rgba(246, 241, 231, 0.95); }
.phero__title {
  font-size: clamp(2.2rem, 1.3rem + 3.8vw, 4.3rem);
  font-weight: 400; line-height: 1.3; letter-spacing: 0.12em;
  color: var(--lamp-ink);
}
.phero__en { font-family: var(--en); font-style: italic; font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.3rem); color: var(--lamp-text); }
.phero__lead { max-width: 46ch; color: var(--sumi-70); }

/* ---------- セクション見出し ---------- */
.sechead {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.3rem);
  justify-items: start;
  margin-block-end: clamp(2.4rem, 5vw, 4rem);
}
.sechead--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(1.4rem, 4vw, 3.5rem);
}
.sechead--split .sechead__l { display: grid; gap: 1.1rem; justify-items: start; }

/* ---------- 序（プロローグ） ---------- */
.prologue__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.6rem, 5vw, 4.5rem);
  align-items: start;
}
/* 序：写真は脇役（狭い列）、本文が主（広い列） */
.prologue__grid--img { grid-template-columns: auto minmax(0, 0.62fr) minmax(0, 1fr); }
.prologue__fig { border-radius: var(--r-lg); aspect-ratio: 3 / 4; align-self: start; }
.prologue__body { display: grid; gap: 1.6rem; max-width: 60ch; }
.prologue__body p { color: var(--sumi-70); }
.prologue__mark {
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.3rem);
  line-height: 2; letter-spacing: 0.16em; color: var(--lamp-ink);
}

/* ---------- 夜の帯 ----------
   面を紙に起こしたので、暗さは「章の意味があるところ」にだけ落とす。
   ①三つの灯＝灯そのものを見せる章 ②フッター＝一日の終わり ③CTA帯。
   ここ以外を暗くしないことで、暗さが手癖ではなく判断として読める。
   ------------------------------------------------------------------ */
.night {
  background: linear-gradient(180deg, var(--ai-700), var(--ai-900));
  color: #F1E9DA;
}
.night .h2, .night .h3, .night .prologue__mark { color: #F8F1E3; }
.night .lead { color: rgba(241, 233, 218, 0.8); }
.night .en--caps, .night .dim { color: rgba(241, 233, 218, 0.58); }
.night .eyebrow {
  color: #E8B978;
  border-color: rgba(232, 185, 120, 0.36);
  background: rgba(232, 185, 120, 0.08);
}
.night .eyebrow::before { background: #E8B978; }
.night .rule { background: linear-gradient(90deg, rgba(241, 233, 218, 0.42), transparent 78%); }
.night .tate-label { color: rgba(241, 233, 218, 0.55); }
.night .tate-label::after { background: linear-gradient(180deg, rgba(241, 233, 218, 0.42), transparent); }
.night .link-min { color: #E8B978; border-color: rgba(232, 185, 120, 0.42); }
.night .link-min:hover { color: #F6E2C2; border-color: #E8B978; }

/* 帯の上のカードは紙のまま＝藍に浮く和紙、という関係にする。
   ⚠ .night 側の文字色を `p` や `h3` まで広げて当てないこと。カードの中まで
     白文字になり、クリーム地の上で完全に読めなくなる（実測で一度やった）。
     .night は「章の地の色」だけを持ち、カードの中は紙の規則へ戻す。 */
.night .plate { border-color: rgba(241, 233, 218, 0.18); }
.night .plate__core { color: var(--sumi); }
.night .plate__core .lead { color: var(--sumi-70); }
.night .plate__core .en--caps, .night .plate__core .dim { color: var(--sumi-45); }

/* ---------- 三つの灯（実写カード） ---------- */
.lights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.5rem); }
.light .plate, .light .plate__core { height: 100%; }
.light__core {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  gap: 0; padding: 0; align-content: start; min-height: 100%;
}
.light__fig { border-radius: calc(var(--r-lg) - 0.5rem) calc(var(--r-lg) - 0.5rem) 0 0; }
.light__body {
  display: grid; gap: 0.9rem; align-content: start;
  padding: clamp(1.4rem, 2.8vw, 2.1rem);
}
.light__no { font-family: var(--en); font-size: 0.66rem; letter-spacing: 0.3em; color: var(--lamp-fine); }
.light__ttl { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); font-weight: 400; letter-spacing: 0.14em; }
.light__en { font-family: var(--en); font-style: italic; font-size: 0.82rem; color: var(--sumi-45); }
.light__txt { color: var(--sumi-70); font-size: 0.9rem; line-height: 2.1; }
.light .plate:hover { transform: translateY(-4px); }

/* ---------- 抜粋（teaser） ---------- */
.teaser { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 4.5rem); align-items: center; }
.teaser--flip .teaser__media { order: -1; }
.teaser__body { display: grid; gap: clamp(1.1rem, 2.4vw, 1.7rem); justify-items: start; }
.teaser__list { display: grid; gap: 0.85rem; width: 100%; }
.teaser__list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem; align-items: baseline;
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--hair-soft);
  font-size: 0.9rem;
}
.teaser__list .n { font-family: var(--en); font-size: 0.68rem; color: var(--lamp-fine); letter-spacing: 0.2em; }
.teaser__list .e { font-family: var(--en); font-style: italic; font-size: 0.8rem; color: var(--sumi-45); }

/* 客室の抜粋：実写の下端にカードを重ねる */
.rooms-media { display: grid; }
.rooms-media__fig { border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
.rooms-media .stack { position: relative; z-index: 2; margin-block-start: -2.8rem; }

/* 過ごし方の抜粋：帯の実写＋灯りのカード */
.stay-media { display: grid; gap: clamp(0.9rem, 2vw, 1.3rem); }
.stay-media__fig { border-radius: var(--r-lg); aspect-ratio: 16 / 9; }

/* 部屋のカード（Z軸のずらし重ね） */
.stack { position: relative; display: grid; gap: 0.9rem; }
.stack__card .plate__core { padding: clamp(1.15rem, 2.4vw, 1.6rem) clamp(1.3rem, 2.6vw, 1.9rem); }
.stack__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.stack__name { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); letter-spacing: 0.18em; }
.stack__en { font-family: var(--en); font-style: italic; color: var(--sumi-45); font-size: 0.8rem; }
.stack__meta { font-family: var(--jp-sans); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--sumi-45); margin-block-start: 0.55rem; }
.stack__card:nth-child(2) { margin-inline-start: clamp(0rem, 3vw, 2.6rem); }
.stack__card:nth-child(3) { margin-inline-start: clamp(0rem, 6vw, 5.2rem); }

/* 食の抜粋（灯りのカード） */
.lanterns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.lantern__core { display: grid; gap: 0.6rem; align-content: start; }
.lantern__t { font-family: var(--en); font-size: 0.72rem; letter-spacing: 0.24em; color: var(--lamp-label); }
.lantern__h { font-size: 1.02rem; letter-spacing: 0.12em; }
.lantern__d { font-size: 0.82rem; color: var(--sumi-45); line-height: 1.95; }

/* ---------- 主人の言葉 ---------- */
.words__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 4rem); align-items: start; }
.words__fig { border-radius: var(--r-lg); aspect-ratio: 16 / 7; }
.words__q {
  font-size: clamp(1.25rem, 0.95rem + 1.5vw, 2.15rem);
  line-height: 2.1; letter-spacing: 0.12em; color: var(--lamp-ink);
  max-width: 24ch;
}
.words__body { display: grid; gap: 1.4rem; max-width: 54ch; color: var(--sumi-70); font-size: 0.93rem; }
.words__sign { display: flex; align-items: center; gap: 1rem; margin-block-start: 0.6rem; }
.words__sign svg { width: 92px; height: 34px; color: var(--lamp-mark); }
.words__signtxt { font-family: var(--jp-sans); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--sumi-45); }

/* ---------- アクセス抜粋 ---------- */
.access-brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); }
.ab__core { display: grid; gap: 0.55rem; }
.ab__k { font-family: var(--jp-sans); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--lamp-label); }
.ab__v { font-size: 1.02rem; letter-spacing: 0.1em; }
.ab__s { font-size: 0.8rem; color: var(--sumi-45); }

/* ---------- CTA帯（実写を左に置き、文字は空いている側へ逃がす） ----------
   面を紙に起こしたぶん、夜はここ一箇所に集める。ページの終わりで日が暮れる
   ＝「日暮れから、朝まで」の帯を、上から下へ読むだけで一度通れるようにする。
   ------------------------------------------------------------------ */
.cta__core {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  text-align: start;
  background: linear-gradient(146deg, var(--ai-700), var(--ai-900));
  border-color: rgba(246, 238, 223, 0.18);
  box-shadow: inset 0 1px 0 rgba(246, 238, 223, 0.12);
}
.cta__core .en--caps { color: rgba(246, 238, 223, 0.62); }
.cta__core .lead { color: rgba(246, 238, 223, 0.8); }
.cta__core .btn {
  --btn-bg: rgba(246, 238, 223, 0.07);
  color: #F6EEDF;
  border-color: rgba(246, 238, 223, 0.32);
}
.cta__core .btn__ico { background: rgba(246, 238, 223, 0.14); color: #F6EEDF; }
.cta__core .btn:hover { background: rgba(246, 238, 223, 0.14); border-color: rgba(246, 238, 223, 0.5); box-shadow: none; }
.cta__core .btn:hover .btn__ico { background: rgba(246, 238, 223, 0.26); }
/* 藍の上では濃い琥珀が沈むので、主動線だけ灯の側の明るさへ振り直す */
.cta__core .btn--lamp {
  --btn-bg: linear-gradient(180deg, #E0A254, #C4802F);
  border-color: #C4802F;
  color: #2A1806;
}
.cta__core .btn--lamp .btn__ico { background: rgba(42, 24, 6, 0.16); color: #2A1806; }
.cta__core .btn--lamp:hover {
  background: linear-gradient(180deg, #EBB067, #D08D38);
  border-color: #D08D38;
}
.cta__core .btn--lamp:hover .btn__ico { background: rgba(42, 24, 6, 0.26); }
.cta__fig {
  min-height: clamp(14rem, 28vw, 21rem);
  border-radius: calc(var(--r-lg) - 0.5rem) 0 0 calc(var(--r-lg) - 0.5rem);
}
.cta__body {
  display: grid; gap: clamp(1.1rem, 2.4vw, 1.6rem);
  align-content: center; justify-items: start;
  padding: clamp(2rem, 4.4vw, 3.4rem);
}
/* 小画面でも「、」の位置で折れるよう、傾きを実測から逆算した clamp にしている */
.cta__h { font-size: clamp(1.2rem, 0.785rem + 1.905vw, 2.5rem); line-height: 1.8; letter-spacing: 0.12em; color: #F8F1E3; }
.cta__row { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.cta__body .cta__row { justify-content: flex-start; }

/* ---------- 間取り（rooms） ---------- */
.plan { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.plan__sticky { position: sticky; top: clamp(5.5rem, 12vh, 7.5rem); }
.plan__frame .plate__core { padding: clamp(1rem, 2.5vw, 1.8rem); }
.plan svg { width: 100%; height: auto; }
.plan__zone {
  fill: rgba(38, 42, 46, 0.05);
  stroke: rgba(38, 42, 46, 0.14);
  stroke-width: 0.6;
  transition: fill 0.8s var(--ease), stroke 0.8s var(--ease);
}
.plan__zone.is-lit { fill: rgba(150, 84, 22, 0.19); stroke: rgba(150, 84, 22, 0.42); }
.plan__area { fill: rgba(38, 42, 46, 0.04); }
.plan__wall { stroke: rgba(38, 42, 46, 0.62); stroke-width: 1.5; fill: none; stroke-linecap: square; }
.plan__thin { stroke: rgba(38, 42, 46, 0.3); stroke-width: 0.7; fill: none; }
.plan__fire { stroke: rgba(150, 84, 22, 0.55); fill: none; stroke-width: 0.8; }
.plan__note { font-family: var(--jp-sans); font-size: 6.5px; letter-spacing: 0.1em; fill: rgba(38, 42, 46, 0.58); }

/* 共用部（実写に縦組みの名を重ねる） */
.commons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); }
.commons li .plate, .commons li .plate__core { height: 100%; }
.commons__core {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  gap: 0; padding: 0; align-items: start;
}
.commons__fig {
  aspect-ratio: 5 / 4;
  border-radius: calc(var(--r-lg) - 0.5rem) calc(var(--r-lg) - 0.5rem) 0 0;
}
.commons__kanji {
  writing-mode: vertical-rl;
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
  letter-spacing: 0.16em;
  line-height: 1.2;
}
.commons__body { display: grid; gap: 0.6rem; padding: clamp(1.3rem, 2.6vw, 1.8rem); }
.commons__en { font-family: var(--en); font-style: italic; font-size: 0.8rem; color: var(--sumi-45); }
.commons__d { font-size: 0.83rem; color: var(--sumi-70); line-height: 2.05; }
.commons__spec { font-family: var(--jp-sans); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--sumi-45); }
.plan__label { font-family: var(--jp-sans); font-size: 8px; letter-spacing: 0.14em; fill: var(--sumi-45); }
.plan__labelen { font-family: var(--en); font-size: 6px; letter-spacing: 0.18em; fill: rgba(38, 42, 46, 0.5); }
.plan__caption { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; margin-block-start: 1.1rem; font-family: var(--jp-sans); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--sumi-45); }
.plan__caption span { display: inline-flex; align-items: center; gap: 0.5em; }
.plan__swatch { width: 9px; height: 9px; border-radius: 2px; border: 1px solid var(--hair); }

.roomlist { display: grid; gap: 0.85rem; }
.roomtrig {
  width: 100%; text-align: start;
  padding: 0.5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hair-soft);
  background: linear-gradient(160deg, rgba(38, 42, 46, 0.05), rgba(38, 42, 46, 0.01));
  transition: border-color 0.6s var(--ease), transform 0.6s var(--ease);
}
.roomtrig__core {
  border-radius: calc(var(--r-md) - 0.5rem);
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, var(--paper-card), var(--paper-sunk));
  box-shadow: inset 0 1px 0 rgba(255, 252, 245, 0.12);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  display: grid; gap: 0.7rem;
}
.roomtrig:hover, .roomtrig[aria-pressed="true"] { border-color: rgba(150, 84, 22, 0.42); transform: translateX(4px); }
.roomtrig[aria-pressed="true"] .roomtrig__core { background: linear-gradient(180deg, rgba(240, 214, 172, 0.85), var(--paper-warm)); }
.roomtrig__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.roomtrig__name { font-size: 1.14rem; letter-spacing: 0.2em; }
.roomtrig__en { font-family: var(--en); font-style: italic; font-size: 0.78rem; color: var(--sumi-45); }
.roomtrig__txt { font-size: 0.84rem; color: var(--sumi-70); line-height: 2; }
.roomtrig__spec { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-family: var(--jp-sans); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--sumi-45); }

/* 設え */
.fittings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.8vw, 1.2rem); }
.fit__core { display: grid; gap: 0.5rem; align-content: start; }
.fit__n { font-family: var(--en); font-size: 0.62rem; letter-spacing: 0.28em; color: var(--lamp-fine); }
.fit__h { font-size: 0.98rem; letter-spacing: 0.12em; }
.fit__d { font-size: 0.78rem; color: var(--sumi-45); line-height: 1.95; }

/* ---------- 一日の流れ（stay） ---------- */
.flow { display: grid; gap: 0; position: relative; }
.flow__item {
  display: grid;
  grid-template-columns: clamp(3.6rem, 8vw, 5.5rem) auto minmax(0, 1fr);
  gap: clamp(1rem, 2.6vw, 2.2rem);
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-block-start: 1px solid var(--hair-soft);
  align-items: start;
}
.flow__item:last-child { border-block-end: 1px solid var(--hair-soft); }
.flow__time { font-family: var(--en); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem); letter-spacing: 0.08em; color: var(--lamp-mark); font-variant-numeric: lining-nums tabular-nums; }
.flow__dot { position: relative; width: 9px; margin-block-start: 0.55rem; }
.flow__dot::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 3px; width: 1px; height: calc(100% + 3.2rem); background: linear-gradient(180deg, var(--hair), transparent); }
.flow__dot::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--lamp-label); box-shadow: 0 0 12px 2px rgba(150, 84, 22, 0.6); }
.flow__item:last-child .flow__dot::before { display: none; }
.flow__body { display: grid; gap: 0.55rem; }
.flow__h { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); letter-spacing: 0.14em; }
.flow__en { font-family: var(--en); font-style: italic; font-size: 0.78rem; color: var(--sumi-45); }
.flow__d { font-size: 0.87rem; color: var(--sumi-70); line-height: 2.1; max-width: 52ch; }

/* お品書き */
.menu-card .plate__core { padding: clamp(1.6rem, 4vw, 3.2rem); }
.oshinagaki { display: grid; gap: clamp(1.4rem, 3vw, 2.1rem); }
.oshi__row { display: grid; gap: 0.4rem; }
.oshi__line { display: flex; align-items: baseline; gap: 0.9rem; }
.oshi__k { font-family: var(--jp-sans); font-size: 0.64rem; letter-spacing: 0.26em; color: var(--lamp-label); flex: none; width: 3.2em; }
.oshi__n { font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem); letter-spacing: 0.14em; white-space: nowrap; }
.oshi__dots { flex: 1 1 auto; height: 1px; background-image: linear-gradient(90deg, var(--sumi-24) 34%, transparent 0); background-size: 6px 1px; background-repeat: repeat-x; transform: translateY(-0.3em); min-width: 1.5rem; }
.oshi__e { font-family: var(--en); font-style: italic; font-size: 0.76rem; color: var(--sumi-45); flex: none; }
.oshi__d { font-size: 0.82rem; color: var(--sumi-45); padding-inline-start: 4.1em; line-height: 1.95; }

/* 夜の一献（活字遊び） */
.sips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); }
.sip { position: relative; overflow: hidden; }
.sip .plate__core { padding: clamp(1.5rem, 3vw, 2.3rem); display: grid; gap: 1rem; align-content: space-between; min-height: clamp(15rem, 26vw, 19rem); }
.sip__big {
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.5rem);
  line-height: 1.25; letter-spacing: 0.1em; color: var(--lamp-ink);
  transition: letter-spacing 0.9s var(--ease), color 0.7s var(--ease);
}
.sip:hover .sip__big { letter-spacing: 0.2em; color: var(--lamp-text); }
.sip__yomi { font-family: var(--jp-sans); font-size: 0.64rem; letter-spacing: 0.3em; color: var(--sumi-45); }
.sip__en { font-family: var(--en); font-style: italic; font-size: 0.88rem; color: var(--lamp-mark); }
.sip__d { font-size: 0.8rem; color: var(--sumi-45); line-height: 1.95; }
.sip__ghost {
  position: absolute; inset-block-end: -0.35em; inset-inline-end: -0.1em;
  font-family: var(--en); font-size: clamp(3.5rem, 8vw, 6rem);
  color: rgba(150, 84, 22, 0.13); letter-spacing: 0.02em; pointer-events: none;
  transition: transform 1s var(--ease);
}
.sip:hover .sip__ghost { transform: translate(-6px, -6px); }

/* 過ごし方の三枚（実写カード） */
.spends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); }
.spends li .plate, .spends li .plate__core { height: 100%; }
.spend__core {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  gap: 0; padding: 0; align-content: start;
}
.spend__fig { aspect-ratio: 5 / 4; border-radius: calc(var(--r-lg) - 0.5rem) calc(var(--r-lg) - 0.5rem) 0 0; }
.spend__body { display: grid; gap: 0.7rem; align-content: start; padding: clamp(1.3rem, 2.6vw, 1.8rem); }
.spend__h { font-size: 1.02rem; letter-spacing: 0.14em; }
.spend__d { font-size: 0.82rem; color: var(--sumi-45); line-height: 2; }

/* ---------- 料金表（access） ---------- */
.fare .plate__core { padding: clamp(1.4rem, 3.4vw, 3rem); }
.fare__scroll { overflow-x: auto; }
.fare table { min-width: 34rem; }
.fare caption { text-align: start; padding-block-end: 1.4rem; color: var(--sumi-45); font-size: 0.78rem; letter-spacing: 0.14em; font-family: var(--jp-sans); }
.fare th, .fare td { padding: clamp(0.9rem, 2vw, 1.25rem) 0.6rem; text-align: end; vertical-align: baseline; }
.fare thead th { font-weight: 400; font-family: var(--jp-sans); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--lamp-label); border-block-end: 1px solid var(--hair); }
.fare tbody th { text-align: start; font-weight: 400; font-size: 1rem; letter-spacing: 0.14em; }
.fare tbody th small { display: block; font-size: 0.68rem; color: var(--sumi-45); letter-spacing: 0.1em; margin-block-start: 0.35em; font-family: var(--jp-sans); }
.fare tbody tr + tr th, .fare tbody tr + tr td { border-block-start: 1px solid var(--hair-soft); }
.fare .num { font-family: var(--en); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); font-variant-numeric: lining-nums tabular-nums; color: var(--lamp-ink); letter-spacing: 0.02em; }
.fare .num small { font-size: 0.62rem; font-family: var(--jp-sans); color: var(--sumi-45); letter-spacing: 0.14em; margin-inline-start: 0.35em; }
.fare__notes { display: grid; gap: 0.55rem; margin-block-start: clamp(1.4rem, 3vw, 2.2rem); font-size: 0.78rem; color: var(--sumi-45); line-height: 1.95; }
.fare__notes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7em; }
.fare__notes li::before { content: "―"; color: var(--lamp-fine); }

/* 予約の流れ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.8vw, 1.2rem); }
.step__core { display: grid; gap: 0.7rem; align-content: start; }
.step__n { font-family: var(--en); font-size: 1.6rem; color: var(--lamp-label); line-height: 1; }
.step__h { font-size: 0.98rem; letter-spacing: 0.14em; }
.step__d { font-size: 0.78rem; color: var(--sumi-45); line-height: 1.95; }

/* 道のり */
.route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
.route__frame .plate__core { padding: clamp(1.2rem, 3vw, 2.2rem); }
.route svg { width: 100%; height: auto; }
.route__path { stroke: rgba(150, 84, 22, 0.7); stroke-width: 1.4; fill: none; }
.route__line { stroke: rgba(38, 42, 46, 0.42); stroke-width: 1; fill: none; }
.route__node { fill: var(--paper-sunk); stroke: rgba(150, 84, 22, 0.85); stroke-width: 1.4; }
.route__t { font-family: var(--jp-sans); font-size: 8.5px; letter-spacing: 0.1em; fill: var(--sumi); }
.route__s { font-family: var(--en); font-size: 6.5px; letter-spacing: 0.16em; fill: rgba(38, 42, 46, 0.6); }
.route__list { display: grid; gap: 1.5rem; }
.route__list dt { font-family: var(--jp-sans); font-size: 0.68rem; letter-spacing: 0.22em; color: var(--lamp-label); margin-block-end: 0.5rem; }
.route__list dd { font-size: 0.88rem; color: var(--sumi-70); line-height: 2.1; }

/* よくあるご質問 */
.faq { display: grid; gap: 0.7rem; }
.faq details {
  border-radius: var(--r-md);
  border: 1px solid var(--hair-soft);
  background: linear-gradient(160deg, rgba(38, 42, 46, 0.04), transparent);
  padding: 0.45rem;
  transition: border-color 0.6s var(--ease);
}
.faq details[open] { border-color: rgba(150, 84, 22, 0.3); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 1rem;
  padding: clamp(0.9rem, 2vw, 1.25rem);
  font-size: 0.95rem; letter-spacing: 0.1em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "問"; font-size: 0.62rem; letter-spacing: 0.2em; color: var(--lamp-label); flex: none; }
.faq summary::after {
  content: ""; margin-inline-start: auto; flex: none;
  width: 9px; height: 9px;
  border-inline-end: 1px solid var(--lamp-mark);
  border-block-end: 1px solid var(--lamp-mark);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.6s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq__a { padding: 0 clamp(0.9rem, 2vw, 1.25rem) clamp(1.1rem, 2vw, 1.4rem) 2.6rem; font-size: 0.85rem; color: var(--sumi-70); line-height: 2.1; }

/* 問い合わせ */
.contact__core { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.contact__k { font-family: var(--jp-sans); font-size: 0.66rem; letter-spacing: 0.22em; color: var(--lamp-label); margin-block-end: 0.6rem; }
.contact__v { font-size: 1.05rem; letter-spacing: 0.08em; line-height: 1.9; }
.contact__mail { font-family: var(--en); font-size: 1.15rem; letter-spacing: 0.04em; color: var(--lamp-text); border-bottom: 1px solid rgba(150, 84, 22, 0.3); }
.contact__note { font-size: 0.76rem; color: var(--sumi-45); line-height: 1.95; margin-block-start: 1rem; }

/* ---------- フッター ---------- */
.foot { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem); border-block-start: 1px solid var(--hair-soft); }
/* 夜の帯としてのフッター。日暮れから朝までの「朝」で読み終えて、最後に日が落ちる */
.foot.night { border-block-start: 0; }
.night .foot__mark svg { color: #E8B978; }
.night .foot__addr,
.night .foot__nav a,
.night .foot__en,
.night .foot__c { color: rgba(241, 233, 218, 0.64); }
.night .foot__demo { color: rgba(241, 233, 218, 0.56); }
.night .foot__nav a:hover { color: #E8B978; }
.night .foot__bottom { border-block-start-color: rgba(241, 233, 218, 0.2); }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.8rem, 5vw, 4rem); align-items: start; }
.foot__brand { display: grid; gap: 1rem; justify-items: start; }
.foot__mark { display: flex; align-items: center; gap: 0.8rem; }
.foot__mark svg { width: 24px; height: 32px; color: var(--lamp-mark); }
.foot__ja { font-size: 1.05rem; letter-spacing: 0.24em; }
.foot__en { font-family: var(--en); font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--sumi-45); }
.foot__addr { font-size: 0.78rem; color: var(--sumi-45); line-height: 2.05; font-style: normal; }
.foot__nav { display: grid; gap: 0.7rem; }
.foot__nav a { font-family: var(--jp-sans); font-size: 0.76rem; letter-spacing: 0.16em; color: var(--sumi-45); transition: color 0.5s var(--ease); }
.foot__nav a:hover { color: var(--lamp-text); }
.foot__bottom {
  margin-block-start: clamp(2.2rem, 5vw, 3.4rem);
  padding-block-start: clamp(1.2rem, 3vw, 1.8rem);
  border-block-start: 1px solid var(--hair-soft);
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.6rem; align-items: baseline; justify-content: space-between;
}
.foot__c { font-family: var(--en); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--sumi-45); }
.foot__demo { font-family: var(--jp-sans); font-size: 0.66rem; letter-spacing: 0.08em; color: rgba(38, 42, 46, 0.62); line-height: 1.9; }

/* ---------- スクロールの現れ ---------- */
/* 写真は「覆いが下へ引かれる」ように現れ、同時に寄りが引いていく
   （clip-path は img 側に掛けるので figure の角丸を壊さない） */
html.js [data-ph] img { clip-path: inset(0 0 101% 0); transform: scale(1.12); }
html.js [data-ph].is-shown img {
  clip-path: inset(0 0 0% 0);
  transform: scale(1);
  transition: clip-path 1.35s var(--ease), transform 1.9s var(--ease);
}
html.js .plate:hover [data-ph].is-shown img { transform: scale(1.045); }
html.js [data-reveal] { opacity: 0; transform: translate3d(0, 3.2rem, 0); filter: blur(9px); }
html.js [data-reveal].is-in {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease), filter 0.95s var(--ease);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1024px) {
  .lights, .sips, .spends, .access-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lights > *:last-child, .spends > *:last-child, .access-brief > *:last-child { grid-column: 1 / -1; }
  .fittings, .steps, .commons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commons > *:last-child { grid-column: 1 / -1; }
  .plan, .route { grid-template-columns: minmax(0, 1fr); }
  .plan__sticky { position: static; }
  .sechead--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .prologue__grid--img { grid-template-columns: auto minmax(0, 1fr); }
  .prologue__fig { grid-column: 1 / -1; order: -1; aspect-ratio: 16 / 8; }
}

@media (max-width: 860px) {
  .nav__list, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav { width: min(94vw, 30rem); justify-content: space-between; padding-inline: 1.05rem 0.5rem; }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.6rem, 5vw, 2.6rem);
    padding-block: clamp(6rem, 15vh, 8rem) clamp(2.5rem, 6vh, 4rem);
  }
  /* 縦組みの見出しを先に立てて、読みの導線を上から下へ通す */
  .hero__title { order: -1; justify-self: end; max-height: none; }
  /* 小画面は文字が上下に来るので、スクリムの向きを縦に組み替える（中央の庭は素のまま） */
  /* ⚠ 下半分にコピーが全部来るので、52%より下は強く保つ。ここを弱めると
     eyebrow（琥珀の小さな字）が明部の庭に重なって完全に読めなくなる。 */
  .hero__bg::after {
    background:
      linear-gradient(0deg,
        rgba(244, 239, 228, 0.97) 0%, rgba(244, 239, 228, 0.93) 34%,
        rgba(244, 239, 228, 0.68) 52%, rgba(244, 239, 228, 0.2) 70%, rgba(244, 239, 228, 0) 86%);
  }
  /* 縦組みの見出しは上へ回るので、右上へ紙を寄せ直す */
  .hero__bg::before {
    background: radial-gradient(76% 34% at 80% 7%,
      rgba(246, 241, 231, 0.95), rgba(246, 241, 231, 0) 74%);
  }
  /* 明部（庭）に文字が乗る分だけ、コピーの足元に局所スクリムを敷き直す */
  .hero__copy::before {
    inset: -4.5rem -3rem -3rem -3rem;
    background: radial-gradient(92% 78% at 36% 54%,
      rgba(246, 241, 231, 0.94), rgba(246, 241, 231, 0.46) 50%, rgba(246, 241, 231, 0) 80%);
  }
  .hero__copy { max-width: none; }
  .teaser, .words__grid, .prologue__grid, .contact__core { grid-template-columns: minmax(0, 1fr); }
  .teaser--flip .teaser__media { order: 0; }
  .prologue__grid > .tate-label, .words__grid > .tate-label { display: none; }
  .stack__card:nth-child(2), .stack__card:nth-child(3) { margin-inline-start: 0; }
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .rooms-media .stack { margin-block-start: 1rem; }
  .cta__core { grid-template-columns: minmax(0, 1fr); }
  .cta__fig {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--r-lg) - 0.5rem) calc(var(--r-lg) - 0.5rem) 0 0;
  }
}

@media (max-width: 640px) {
  :root { --r-lg: 1.5rem; }
  .lights, .sips, .spends, .access-brief, .lanterns, .fittings, .steps, .commons { grid-template-columns: minmax(0, 1fr); }
  .lights > *:last-child, .spends > *:last-child, .access-brief > *:last-child, .commons > *:last-child { grid-column: auto; }
  .flow__item { grid-template-columns: clamp(3.2rem, 16vw, 4.4rem) auto minmax(0, 1fr); gap: 0.9rem; }
  .oshi__e { display: none; }
  .oshi__d { padding-inline-start: 0; }

  /* 料金表は横スクロールに逃がさず、行ごとの札に組み替える（小画面で金額が隠れないように） */
  .fare__scroll { overflow-x: visible; }
  .fare table { min-width: 0; }
  .fare caption { padding-block-end: 1.1rem; }
  .fare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fare tbody, .fare tbody tr, .fare tbody th, .fare tbody td { display: block; width: 100%; }
  .fare tbody tr { padding-block: 1.2rem; }
  .fare tbody tr + tr { border-block-start: 1px solid var(--hair-soft); }
  .fare tbody tr + tr th, .fare tbody tr + tr td { border-block-start: 0; }
  .fare tbody th { padding: 0 0 0.85rem; }
  .fare tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; }
  .fare tbody td::before {
    content: attr(data-label);
    font-family: var(--jp-sans); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--lamp-label);
  }
  /* 小画面は内側の余白を詰めて、一行に入る文字数を稼ぐ */
  .plate__core,
  .fare .plate__core,
  .menu-card .plate__core,
  .plan__frame .plate__core,
  .route__frame .plate__core { padding: clamp(1.25rem, 5vw, 2rem); }
  .hero__cue { display: none; }
  .sip .plate__core { min-height: auto; }
  .foot__bottom { flex-direction: column; }
  /* 小画面では横長すぎる写真が「帯」に潰れるので、比率を起こす */
  .words__fig, .stay-media__fig { aspect-ratio: 3 / 2; }
  .rooms-media__fig { aspect-ratio: 3 / 2; }
  .prologue__fig { aspect-ratio: 4 / 3; }
  .ph--band { aspect-ratio: 16 / 9; }
  .light__core, .commons__core, .spend__core { grid-template-rows: auto auto; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  html.js .mask__in { transform: none !important; }
  html.js [data-ph] img { clip-path: none !important; transform: none !important; }
  .hero__cue span.bar { animation: none; transform: scaleY(1); opacity: 1; }
  /* Ken Burns は完全停止（fill:forwards で終端へ飛ばさない） */
  .hero__bg img { animation: none !important; transform: scale(1.04) !important; }
  .ph img { transition: none !important; }
  .menu__item a { transform: none; }
  body:not(.is-menu) .menu { display: none; }
}

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }