@charset "UTF-8";
/* te no Wa Reborn — TOP（静的版 v1） */

:root {
  --bg: #eef0f8;           /* 空に合わせた、ごく薄い水色〜紫 */
  --bg-2: #e6e3f2;
  --cream: #ffffff;
  --ink: #3f332f;          /* 濃い色: グレーの入った茶色 */
  --ink-deep: #352b2e; /* 11/07 に #2b2124 から少し明るく */
  --muted: #6b5c55;        /* 小さい文字。背景に対してコントラスト 5.6 以上 */
  --line: rgba(63, 51, 47, 0.24);
  --pink: #e595a3;         /* キーカラー */
  --pink-deep: #c96f84;
  --orange: #f4c39b;       /* キーカラー（薄いオレンジ） */
  --orange-soft: #f9dcc2;
  /* ピンクのボタン。文字が乗る中央は白文字が読める濃さ（コントラスト 3.1〜4.9）、右端だけ黄みのオレンジへ */
  --btn-grad: linear-gradient(120deg, #b04a66, #c25a72 40%, #d27a6c 72%, #e6a46e);
  --btn-grad-hover: linear-gradient(120deg, #e6a46e, #d27a6c 28%, #c25a72 60%, #a94462);
  --glass: rgba(255, 255, 255, 0.72);

  --f-serif: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif; /* 見出し: 丸ゴシック */
  --f-latin: 'Quicksand', 'Zen Maru Gothic', sans-serif;
  --f-sans: 'Zen Kaku Gothic New', 'Hiragino Sans', system-ui, sans-serif;
  --f-num: 'Quicksand', 'Zen Maru Gothic', sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --radius: 28px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  font-feature-settings: 'palt';
  font-variant-numeric: lining-nums;
  word-break: auto-phrase; /* 日本語を文節で折り返す */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* 大きな英字などで横にはみ出さない */
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }

/* ------------------------------------------------ 3D の舞台 */
.stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.stage-fallback { display: none; }
.no-webgl .stage { display: none; }
.no-webgl .stage-fallback {
  display: block; position: fixed; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #a9c9e8 0%, #ddd8f0 48%, #b9c3df 52%, #8d9ac0 100%);
}
.no-webgl .stage-fallback img { position: absolute; bottom: 4vh; left: 50%; height: 72vh; width: auto; transform: translateX(-50%); }

/* ------------------------------------------------ 読み込み */
.loader {
  position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; gap: 22px; justify-items: center; overflow: hidden;
  /* 中央は白。ロゴの後ろにやわらかい光、全体にごく薄い粒子 */
  background:
    radial-gradient(ellipse 52% 40% at 50% 50%, #fff 0%, #fff 35%, rgba(255, 255, 255, 0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0 0.5 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #fff;
  transition: opacity 1.2s var(--ease), visibility 1.2s;
}
.loader > * { position: relative; z-index: 1; }
/* 上は薄い紫〜空色、下はごく薄いオレンジ。少し傾けた帯を、色だまりを重ねてぼかし、ゆっくり漂わせる */
.loader::before, .loader::after {
  content: ''; position: absolute; left: -25%; right: -25%; height: 50%; filter: blur(26px); will-change: transform;
}
.loader::before {
  top: -20%;
  background:
    radial-gradient(ellipse 34% 70% at 28% 62%, #cbc2f0, rgba(203, 194, 240, 0) 70%),
    radial-gradient(ellipse 40% 75% at 72% 55%, #d0c8f2, rgba(208, 200, 242, 0) 70%),
    linear-gradient(180deg, #d3cdf2 0%, #e3dff6 55%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(-7deg);
  animation: loader-sky 6s ease-in-out infinite alternate;
}
.loader::after {
  bottom: -20%;
  background:
    radial-gradient(ellipse 38% 70% at 30% 42%, #fcd9bd, rgba(252, 217, 189, 0) 70%),
    radial-gradient(ellipse 34% 70% at 74% 48%, #f8d2d8, rgba(248, 210, 216, 0) 70%),
    linear-gradient(0deg, #fde0c9 0%, #feebdd 55%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(-7deg);
  animation: loader-dawn 7s ease-in-out infinite alternate;
}
@keyframes loader-sky { to { transform: rotate(-5deg) translate3d(4%, 2%, 0) scale(1.04); } }
@keyframes loader-dawn { to { transform: rotate(-9deg) translate3d(-4%, -2%, 0) scale(1.05); } }
.is-ready .loader { opacity: 0; visibility: hidden; }
.loader__mark { display: none; } /* ロゴ自体に輪があるので、線の演出は出さない */
.loader__half, .loader__reflect { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 158; stroke-dashoffset: 158; animation: draw 1.4s var(--ease) forwards; }
.loader__reflect { stroke: var(--pink); opacity: 0.7; animation-delay: 0.45s; }
.loader__line { stroke: var(--line); stroke-width: 1; }
.loader__name { font-family: var(--f-latin); font-variant-numeric: lining-nums; font-size: 20px; letter-spacing: 0.2em; color: var(--ink); opacity: 0; animation: fade 1s 0.6s forwards; }
.loader__name em { font-style: normal; color: var(--pink-deep); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* ------------------------------------------------ ヘッダー */
.header {
  position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 28px;
  padding: 18px var(--gutter); transition: background 0.6s var(--ease), padding 0.6s var(--ease), box-shadow 0.6s;
}
.header.is-scrolled { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); padding-block: 12px; box-shadow: 0 1px 0 var(--line); }
.logo { display: inline-flex; align-items: center; gap: 26px; text-decoration: none; margin-right: auto; }
.logo__img { height: 64px; width: auto; transition: height 0.6s var(--ease); }
.is-scrolled .logo__img { height: 46px; }
.logo__kana { font-family: var(--f-serif); font-weight: 500; font-size: 15px; letter-spacing: 0.16em; /* 11/14 13→15px */ color: var(--ink); white-space: nowrap; }
.logo__img--footer { height: 72px; }
.loader__logo { width: 150px; height: auto; opacity: 0; animation: fade 1s 0.5s forwards; }
.logo__mark { width: 30px; height: 30px; border-radius: 50%; position: relative; overflow: hidden; }
.logo__mark::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.2px solid var(--ink); clip-path: inset(0 0 50% 0); }
.logo__mark::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.2px solid var(--pink); clip-path: inset(50% 0 0 0); opacity: 0.8; }
.logo__text { font-family: var(--f-latin); font-variant-numeric: lining-nums; font-size: 21px; letter-spacing: 0.12em; white-space: nowrap; }
.logo__text em { font-style: normal; color: var(--pink-deep); }
.nav > ul { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.nav a { text-decoration: none; }
.nav > ul > li > a { font-size: 15px; letter-spacing: 0.12em; position: relative; padding-block: 6px; display: inline-flex; align-items: center; gap: 6px; }
.nav > ul > li > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease); }
.nav > ul > li > a:hover::after, .nav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
/* 今いる場所（2026-11-14）。下線を常に出し、メニューの中ならそのメニューの色で太めに */
.nav > ul > li.is-here > a { color: var(--c, var(--pink-deep)); }
.nav > ul > li.is-here > a::after { transform: scaleX(1); height: 2px; bottom: -1px; background: var(--c, var(--pink-deep)); }

/* メニューの色（下層の [data-theme] と同じ色相）。グロナビのプルダウン・ドロワー・フッターで使う */
[data-c="facial"] { --c: #b8506e; --c-soft: #f2c3cd; }
[data-c="korugi"] { --c: #6c4cae; --c-soft: #d6c9f1; }
[data-c="body"] { --c: #a95a24; --c-soft: #f6d2b2; }
[data-c="wedding"] { --c: #097a80; --c-soft: #bfe9e7; } /* ブライダル＝ティファニーブルー系（#0abab5 寄り、2026-11-10） */
[data-c="men"] { --c: #3a6f9e; --c-soft: #c7def1; } /* 2026-11-10: ブライダルと色を入れ替え（メンズ＝青） */

/* メニュー・料金のプルダウン（マウスを乗せる・Tab で入ると開く） */
.nav__has { position: relative; }
.nav__caret { width: 6px; height: 6px; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor; rotate: 45deg; translate: 0 -2px; opacity: 0.7; }
.mega {
  position: absolute; top: 100%; left: 50%; z-index: 2; width: 560px; padding: 18px; margin-top: 12px; translate: -50% 6px;
  border-radius: 24px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 30px 70px -30px rgba(70, 45, 60, 0.45);
  backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), translate 0.5s var(--ease), visibility 0s 0.35s;
}
.mega::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; } /* リンクからプルダウンへ移る間に閉じないよう、すき間を埋める */
.nav__has:hover .mega, .nav__has:focus-within .mega { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity 0.35s var(--ease), translate 0.5s var(--ease), visibility 0s; }
.mega__all { display: flex; align-items: baseline; gap: 12px; padding: 4px 8px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 14.5px; letter-spacing: 0.08em; color: var(--ink-deep); }
.mega__all span { font-family: var(--f-latin); font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.mega__all:hover { color: var(--pink-deep); }
.mega__list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.mega__item:first-child { grid-row: span 2; }
.mega__item > a { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 10px; padding: 10px 8px 9px; border-bottom: 2px solid var(--c-soft); transition: border-color 0.35s, background 0.35s; border-radius: 6px 6px 0 0; }
.mega__item > a:hover, .mega__item > a[aria-current="page"] { border-color: var(--c); background: color-mix(in srgb, var(--c-soft) 28%, transparent); }
.mega__en { grid-column: 1 / -1; font-family: var(--f-latin); font-size: 12px; letter-spacing: 0.1em; color: var(--c); }
.mega__name { font-family: var(--f-serif); font-weight: 500; font-size: 15.5px; letter-spacing: 0.06em; color: var(--ink-deep); }
.mega__price { font-family: var(--f-num); font-size: 13px; color: var(--muted); }
.mega__kids { display: grid; gap: 2px; padding: 8px 8px 0 12px; }
.mega__kids a { font-size: 13px; color: var(--ink); padding-block: 3px; display: inline-flex; align-items: center; gap: 8px; }
.mega__kids a::before { content: ''; width: 10px; height: 1.5px; background: var(--c); }
.mega__kids a:hover { color: var(--c); }
/* ハンバーガー（11/07〜 PC にも出す。PC は円の枠なしの三本線、1100px 以下は円の枠付き） */
.menu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; }
.menu-toggle span:first-child { width: 24px; height: 15px; border-block: 1.5px solid var(--ink); position: relative; }
.menu-toggle span:first-child::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--ink); }
.menu-toggle[aria-expanded="true"] span:first-child { border-color: transparent; }
.menu-toggle[aria-expanded="true"] span:first-child::before, .menu-toggle[aria-expanded="true"] span:first-child::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--ink); rotate: 45deg; }
.menu-toggle[aria-expanded="true"] span:first-child::before { rotate: -45deg; }
.drawer { position: fixed; inset: 0; z-index: 35; background: rgba(240, 241, 250, 0.96); backdrop-filter: blur(20px); display: block; overflow-y: auto; overscroll-behavior: contain; padding: 140px var(--gutter) 120px; }
/* 開いている間は、ヘッダーに背景を付けて中身と重ならないようにし、下の予約バーは隠す（中に同じボタンがある） */
.is-drawer .header { background: rgba(240, 241, 250, 0.96); box-shadow: 0 1px 0 var(--line); }
.is-drawer .dock { opacity: 0; pointer-events: none; }
.drawer { opacity: 0; transition: opacity 0.45s var(--ease); }
.drawer.is-open { opacity: 1; }
.drawer[hidden] { display: none; }
.drawer a { text-decoration: none; }
.drawer__in { display: grid; gap: 22px; max-width: 720px; margin-inline: auto; }
.drawer__home { font-family: var(--f-serif); font-size: 15px; letter-spacing: 0.12em; }
.drawer__h { font-family: var(--f-serif); font-weight: 500; font-size: 12.5px; letter-spacing: 0.16em; color: var(--muted); opacity: 0.72; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.drawer__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
.drawer__list > li > a { display: block; padding: 9px 0; font-family: var(--f-serif); font-size: 14.5px; letter-spacing: 0.06em; line-height: 1.5; color: var(--ink-deep); }
.drawer__list > li[data-c] > a { padding-left: 14px; position: relative; border-bottom: 2px solid var(--c-soft); }
/* 2026-11-10: 下線が薄くて見えにくいと言われたので、メニューの濃い色を 4 割混ぜる（color-mix 非対応のブラウザは上の淡い色のまま） */
.drawer__list > li[data-c] > a { border-bottom-color: color-mix(in srgb, var(--c) 42%, var(--c-soft)); }
.drawer__list > li[data-c] > a::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c); }
.drawer__list > li.has-sub { grid-column: 1 / -1; } /* 子のあるメニューは 1 行を使い、子を横に並べる */
.drawer__sub { display: flex; flex-wrap: wrap; gap: 0 18px; padding: 6px 0 2px 14px; }
.drawer__sub a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 0; font-size: 13px; color: var(--ink); }
.drawer__sub a::before { content: ''; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--c, var(--pink-deep)); opacity: 0.8; } /* 11/14 子の項目の頭に小さな丸 */
.drawer a[aria-current="page"] { color: var(--pink-deep); }
/* 今いる場所（2026-11-14）。メニューの中ならその色で、「表示中」の印を付ける */
.drawer [data-c] a[aria-current] { color: var(--c); }
.drawer__list > li.is-here > a { font-weight: 600; }
.drawer a[aria-current="page"]::after { content: '表示中'; display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--pink-deep)) 14%, #fff); color: var(--c, var(--pink-deep)); font-family: var(--f-sans, sans-serif); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.6; vertical-align: 1px; }
.drawer__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 20px; }
.drawer__cta .btn { padding-inline: 12px; font-size: 13.5px; }

/* ------------------------------------------------ ボタン */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 26px;
  border-radius: 999px; text-decoration: none; font-weight: 500; letter-spacing: 0.12em; font-size: 14px; white-space: nowrap;
  transition: translate 0.6s var(--ease), background 0.4s, color 0.4s, box-shadow 0.6s var(--ease);
  position: relative; isolation: isolate; overflow: hidden;
}
.btn--primary { color: #fff; text-shadow: 0 1px 2px rgba(110, 30, 50, 0.25); background: var(--btn-grad); box-shadow: 0 14px 30px -14px rgba(201, 111, 132, 0.8); }
.btn--primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--btn-grad-hover); opacity: 0; transition: opacity 0.5s; }
.btn--primary:hover::before { opacity: 1; }
.btn--primary:hover { translate: 0 -2px; box-shadow: 0 20px 40px -16px rgba(201, 111, 132, 0.9); }
.btn--ghost { color: var(--ink); background: rgba(255, 255, 255, 0.62); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.btn--ghost:hover { background: var(--cream); translate: 0 -2px; }
.btn--lg { --h: 56px; padding: 0 34px; font-size: 15px; }
.btn--xl { --h: 64px; padding: 0 44px; font-size: 16px; }
.header__cta { --h: 42px; padding: 0 22px; }

/* ------------------------------------------------ 進み具合（太陽 → 月） */
.orbit { position: fixed; left: var(--gutter); bottom: 26px; z-index: 30; width: 120px; height: 64px; pointer-events: none; }
.orbit svg { width: 120px; height: 64px; overflow: visible; }
.orbit__track { fill: none; stroke: var(--line); stroke-width: 1; }
.orbit__done { fill: none; stroke: var(--pink-deep); stroke-width: 1.2; }
.orbit__body {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  transform: translate(var(--x, 6px), var(--y, 58px));
  background: radial-gradient(circle at 50% 50%, #fff 0 35%, var(--orange) 70%);
  box-shadow: 0 0 18px 4px rgba(255, 214, 170, calc(0.9 - var(--moon, 0) * 0.6));
}
/* 終わりに近づくと三日月になる */
.orbit__body::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: var(--bg); transform: translateX(calc(16px - var(--moon, 0) * 10px)); opacity: calc(var(--moon, 0) * 1.4 - 0.4); }
.orbit__label { position: absolute; left: 0; right: 0; bottom: -6px; text-align: center; font-family: var(--f-latin); font-variant-numeric: lining-nums; font-style: normal; font-size: 13px; letter-spacing: 0.14em; color: var(--muted); }

/* ------------------------------------------------ セクション共通 */
main { position: relative; z-index: 2; }
.scene { position: relative; padding: 7vh var(--gutter); display: flex; align-items: center; }
.walk { height: 2vh; pointer-events: none; } /* セクションの区切り。空白の画面を作らないよう、ほぼ詰める */
.walk__line {
  font-family: var(--f-serif); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.9; letter-spacing: 0.2em; text-align: center;
  color: var(--cream); text-shadow: 0 2px 30px rgba(120, 70, 50, 0.45);
}
.walk__line--en { font-family: var(--f-latin); font-variant-numeric: lining-nums; font-size: clamp(30px, 4vw, 58px); line-height: 1.2; letter-spacing: 0.04em; font-weight: 300; }
.walk__line--en em { color: #ffe2d8; }

.panel {
  width: min(600px, 44vw); background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.65); border-radius: var(--radius);
  padding: clamp(28px, 3.6vw, 56px); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 40px 90px -50px rgba(90, 55, 45, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.scene[data-view^="left"] .panel { margin-left: auto; }
.scene[data-view^="right"] .panel { margin-right: auto; }
.panel--wide { width: min(760px, 56vw); }
.panel--half { width: min(820px, 50vw); } /* お客様の声・はじめての方へ: 画面の半分 */
.panel--full { width: min(1200px, 100%); margin-inline: auto; }

.kicker { display: flex; align-items: center; gap: 14px; font-family: var(--f-latin); font-variant-numeric: lining-nums; font-style: normal; font-size: 17px; letter-spacing: 0.08em; color: var(--pink-deep); margin-bottom: 18px; }
.kicker span { font-style: normal; font-family: var(--f-sans); font-size: 11px; letter-spacing: 0.2em; color: var(--muted); display: inline-flex; align-items: center; gap: 14px; }
.kicker span::after { content: ''; width: 36px; height: 1px; background: var(--line); }
.kicker--center { justify-content: center; }
.title { font-family: var(--f-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.45; letter-spacing: 0.08em; color: var(--ink-deep); margin-bottom: 22px; }
.title .ch, .finale__title .ch, .hero__line .ch, .walk__line .ch { display: inline-block; will-change: transform; }
.nobr { display: inline-block; } /* 見出しで、ここだけは途中で折り返さない */
.lead { color: var(--ink); margin-bottom: 28px; max-width: 40em; }
.note { font-size: 12px; color: var(--muted); margin-top: 18px; }
/* ブロックの中の「一覧へ」などのボタン。角丸・3px の枠をご予約ボタンと同じグラデーションにし、ブロックの右端に置く */
.link {
  --fill: rgba(255, 255, 255, 0.94);
  display: flex; width: fit-content; max-width: 100%; margin: 28px 0 0 auto; align-items: center; justify-content: center; gap: 14px;
  min-height: 50px; padding: 0 22px 0 26px; border: 2px solid transparent; border-radius: 999px;
  background: linear-gradient(var(--fill), var(--fill)) padding-box, var(--btn-grad) border-box;
  color: var(--ink-deep); font-size: 14px; font-weight: 500; letter-spacing: 0.12em; line-height: 1.5; text-decoration: none;
  transition: translate 0.6s var(--ease), box-shadow 0.6s var(--ease), --fill 0.4s;
  box-shadow: 0 12px 26px -18px rgba(176, 74, 102, 0.55);
}
.link::after { content: ''; flex: none; width: 20px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h18M14 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h18M14 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: translate 0.5s var(--ease); }
.link:hover { --fill: rgba(255, 255, 255, 1); translate: 0 -2px; box-shadow: 0 18px 34px -18px rgba(176, 74, 102, 0.6); color: var(--pink-deep); }
.link:hover::after { translate: 4px 0; }
.link:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 3px; }

/* ------------------------------------------------ HERO */
.scene--hero { min-height: 100svh; padding: 0; align-items: stretch; }
.hero { position: relative; width: 100%; height: 100svh; /* 画面の高さちょうど。冒頭文は下から 64px の位置に固定 */ overflow: hidden; padding: 120px var(--gutter) 26px; /* 冒頭文の下端は、左下のナビや Scroll と同じ高さ */ display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; }
.hero__eyebrow { position: absolute; right: var(--gutter); bottom: 26px; /* 右下。グリッドに行を増やさない */ display: flex; justify-content: flex-end; font-family: var(--f-latin); font-variant-numeric: lining-nums; font-style: normal; font-size: 15px; letter-spacing: 0.16em; color: var(--ink); }
.hero__eyebrow span { display: inline-block; }
.hero__title {
  grid-column: 2; grid-row: 1 / 4; align-self: center; writing-mode: vertical-rl; font-family: var(--f-serif); font-weight: 500;
  /* 横幅だけでなく画面の高さにも合わせる（1 行目 10 文字 ≒ 12.2em が、上 120px・下 64px の間に収まる大きさまで） */
  font-size: clamp(30px, min(4.4vw, calc((100svh - 200px) / 13.4)), 68px); line-height: 1.75; letter-spacing: 0.22em; color: var(--ink-deep);
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.9);
}
.hero__line { display: block; overflow: hidden; padding-inline: 0.06em; white-space: nowrap; } /* 縦書きの行の途中で折り返さない */
.hero__line:nth-child(2) { padding-top: 3.2em; }
.hero__foot { grid-column: 1; grid-row: 3; align-self: end; display: grid; gap: 26px; max-width: 460px; margin-left: 150px; } /* 左下の進み具合の弧（幅 120px）と重ならないよう右へ */
.hero__br { display: none; }
.hero__lead { font-size: 14.5px; line-height: 2; color: var(--ink-deep); text-shadow: 0 0 24px rgba(255, 255, 255, 0.95); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.scroll-cue { animation: fade 1.2s 2.6s backwards; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font-family: var(--f-latin); font-variant-numeric: lining-nums; font-style: normal; font-size: 12px; letter-spacing: 0.3em; color: var(--ink); }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--ink), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ------------------------------------------------ 悩み */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; text-decoration: none; font-size: 14px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--line); transition: background 0.4s, border-color 0.4s, transform 0.5s var(--ease), color 0.4s;
}
.chips a:hover { background: #fff; color: var(--pink-deep); border-color: var(--pink); transform: translateY(-2px); }

/* ------------------------------------------------ メニュー */
/* タブが入りきらないときだけ、続きのある側をぼかして矢印を出す（main.js が data-more を付ける） */
.tabs-wrap { position: relative; width: fit-content; max-width: 100%; margin-bottom: 26px; }
.tabs-wrap .tabs { margin-bottom: 0; width: auto; }
.tabs-wrap[data-more~="right"] .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent calc(100% - 40px)); mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent calc(100% - 40px)); }
.tabs-wrap[data-more~="left"] .tabs { -webkit-mask-image: linear-gradient(90deg, transparent 40px, #000 96px); mask-image: linear-gradient(90deg, transparent 40px, #000 96px); }
.tabs-wrap[data-more~="left"][data-more~="right"] .tabs { -webkit-mask-image: linear-gradient(90deg, transparent 40px, #000 96px, #000 calc(100% - 96px), transparent calc(100% - 40px)); mask-image: linear-gradient(90deg, transparent 40px, #000 96px, #000 calc(100% - 96px), transparent calc(100% - 40px)); }
.tabs-nav {
  position: absolute; top: 50%; z-index: 1; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; display: grid; place-items: center;
  border: 0; background: none; color: var(--pink-deep); opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s, translate 0.5s var(--ease);
}
.tabs-nav::before { content: ''; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; translate: -2px 0; rotate: 45deg; animation: nudge-r 1.6s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.25; } }
/* 矢印: 点滅しながら、向いている方へ少し進む（11/14） */
@keyframes nudge-r { 0% { translate: -12px 0; opacity: 0.25; } 55% { translate: 4px 0; opacity: 0.95; } 100% { translate: 4px 0; opacity: 0.25; } }
@keyframes nudge-l { 0% { translate: 12px 0; opacity: 0.25; } 55% { translate: -4px 0; opacity: 0.95; } 100% { translate: -4px 0; opacity: 0.25; } }
.tabs-nav--prev { left: 4px; }
.tabs-nav--prev::before { translate: 2px 0; rotate: -135deg; animation-name: nudge-l; }
.tabs-nav--next { right: 4px; }
.tabs-wrap[data-more~="right"] .tabs-nav--next, .tabs-wrap[data-more~="left"] .tabs-nav--prev { opacity: 1; visibility: visible; transition: opacity 0.35s, visibility 0s, translate 0.5s var(--ease); }
.tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: none; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.5); border: 1px solid var(--line); margin-bottom: 26px; width: fit-content; max-width: 100%; }
.tabs button { flex: none; border: 0; background: transparent; border-radius: 999px; padding: 9px 15px; display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; letter-spacing: 0.1em; }
.tabs button em { font-family: var(--f-latin); font-variant-numeric: lining-nums; font-style: normal; font-size: 13px; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--btn-grad); color: #fff; }
.tabs button[aria-selected="true"] em { color: rgba(255, 255, 255, 0.85); }
.menu__lead { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.menu__items { display: grid; gap: 14px; }
.item { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: start; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.7); position: relative; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.item:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(90, 55, 45, 0.45); }
.item--plain { grid-template-columns: 1fr; }
.item__img { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3.2; }
.item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.item:hover .item__img img { transform: scale(1.06); }
/* チラシの丸い写真（顔が切れないよう、丸のまま見せる） */
.item__img--round { aspect-ratio: 1; border-radius: 50%; }
.item__img--round img { object-fit: contain; filter: contrast(0.86) saturate(0.88) brightness(1.04); /* チラシ由来でコントラストが強い */ }
.item__en { font-family: var(--f-latin); font-variant-numeric: lining-nums; font-style: normal; font-size: 18px; color: var(--pink-deep); line-height: 1.2; }
.item__name { font-family: var(--f-serif); font-weight: 500; font-size: 21px; letter-spacing: 0.08em; color: var(--ink-deep); margin: 2px 0 8px; }
.item__plans { display: grid; gap: 4px; margin-bottom: 10px; }
.item__plans li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.item__min { font-family: var(--f-num); font-size: 22px; font-variant-numeric: tabular-nums; }
.item__min small { font-family: var(--f-sans); font-size: 11px; margin-left: 2px; color: var(--muted); }
.item__price { font-family: var(--f-num); font-size: 26px; font-weight: 500; color: var(--pink-deep); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.item__price::after { content: '\7A0E\8FBC'; /* 税込 */ font-family: var(--f-sans); font-size: 10px; color: var(--muted); margin-left: 6px; letter-spacing: 0.1em; vertical-align: 0.5em; }
.item__note { flex-basis: 100%; font-size: 12px; color: var(--muted); line-height: 1.6; }
.item__desc { font-size: 13.5px; line-height: 1.85; }
.item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.item__tags li { font-size: 11.5px; padding: 2px 10px; border-radius: 999px; background: var(--orange-soft); color: var(--ink); }
.item__more { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--btn-grad) border-box; color: var(--pink-deep); display: grid; place-items: center; text-decoration: none; transition: background 0.4s, color 0.4s, transform 0.6s var(--ease); }
.item__more span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.item__more::before { content: ''; width: 10px; height: 10px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateX(-2px) rotate(45deg); }
.item__more:hover { background: var(--btn-grad) padding-box, var(--btn-grad) border-box; color: #fff; }

/* ------------------------------------------------ お約束（月の満ち欠け） */
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 40px); counter-reset: p; margin-top: 10px; }
.promise { position: relative; padding-top: 26px; border-top: 1px solid var(--line); }
.promise h3 { font-family: var(--f-serif); font-weight: 500; font-size: 19px; line-height: 1.6; letter-spacing: 0.06em; color: var(--ink-deep); margin: 18px 0 12px; }
.promise p { font-size: 13.5px; line-height: 1.95; }
.phase { display: block; width: 54px; height: 54px; border-radius: 50%; position: relative; overflow: hidden; background: radial-gradient(circle at 40% 35%, #fff 0, var(--orange-soft) 60%, var(--orange) 100%); box-shadow: 0 0 30px -4px rgba(244, 195, 155, 0.9); }
.phase::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--bg-2); }
.phase--1::after { transform: translateX(18%); }
.phase--2::after { transform: translateX(50%); }
.phase--3::after { transform: translateX(82%); }
.phase--4::after { transform: translateX(120%); }
.promise::before { counter-increment: p; content: '0' counter(p); position: absolute; right: 0; top: 18px; font-family: var(--f-num); font-size: 58px; font-weight: 300; line-height: 1; color: rgba(201, 111, 132, 0.2); -webkit-text-stroke: 0; }

/* ------------------------------------------------ 声 */
.voices { display: grid; gap: 16px; }
.voice { padding: 22px 24px; border-radius: 20px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.7); position: relative; }
.voice blockquote { padding-left: 16px; border-left: 2px solid var(--pink); font-family: var(--f-sans); font-size: 15px; line-height: 2; color: var(--ink-deep); }
.voice figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.voice figcaption strong { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------ よくある質問 */
.faq-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.faq-filter button { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.5); font-size: 13px; letter-spacing: 0.1em; } /* 選んだときの文字色は切り替えるだけ（フェードすると黒い文字が一瞬残る） */
.faq-filter button[aria-pressed="true"] { background: var(--btn-grad); color: #fff; border-color: transparent; }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: start; }
.qa { border-radius: 18px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.7); transition: background 0.4s, box-shadow 0.6s var(--ease); }
.qa[open] { background: rgba(255, 255, 255, 0.82); box-shadow: 0 24px 50px -36px rgba(90, 55, 45, 0.5); }
.qa summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa__q, .qa__mark { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-latin); font-variant-numeric: lining-nums; font-size: 19px; font-style: normal; line-height: 1; text-box: trim-both cap alphabetic; } /* 文字の上下の余白を切り、大文字の高さで円の中央に置く */
.qa__q { border: 1px solid var(--ink); color: var(--ink); }
.qa__mark { background: var(--btn-grad); color: #fff; flex: none; }
.qa__text { font-family: var(--f-sans); font-weight: 500; font-size: 15.5px; line-height: 1.7; color: var(--ink-deep); }
.qa__icon { width: 14px; height: 14px; position: relative; }
.qa__icon::before, .qa__icon::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform 0.6s var(--ease); }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(0); }
.qa__a { display: flex; gap: 14px; padding: 0 20px 20px; }
.qa__a p { font-size: 14px; line-height: 1.95; }
.qa__a > div { min-width: 0; }
.qa__a p:not(.qa__link) a { color: var(--pink-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.qa__go { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; }
.qa__go a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 16px 8px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pink-deep) 45%, transparent); background: rgba(255, 255, 255, 0.7); color: #a8536a; font-size: 13px; letter-spacing: 0.04em; line-height: 1.5; text-decoration: none; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.qa__arrow { display: inline-block; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.qa__go a:hover, .qa__go a:focus-visible { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; }
.qa__go a:hover .qa__arrow, .qa__go a:focus-visible .qa__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .qa__go a, .qa__arrow { transition: none; } }

/* ------------------------------------------------ はじめての方 */
.flow { display: grid; gap: 4px; counter-reset: f; }
.flow li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.flow__n { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--pink); color: var(--pink-deep); display: grid; place-items: center; font-family: var(--f-num); font-size: 20px; }
.flow h3 { font-family: var(--f-serif); font-weight: 500; font-size: 16.5px; letter-spacing: 0.06em; color: var(--ink-deep); }
.flow p { font-size: 13.5px; line-height: 1.8; }
.room { margin-top: 24px; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; }
.room img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------ 予約・アクセス（夕暮れ） */
.scene--finale { min-height: 100vh; justify-content: center; padding-top: 0; padding-bottom: 10vh; }
.finale { width: min(1100px, 100%); text-align: center; color: var(--ink-deep); align-self: flex-start; }
/* 見出し〜予約ボタンだけで 1 画面を使い、画面の中央に置く（アクセスはその下） */
.finale__intro { min-height: 100svh; padding-top: 70px; /* 固定ヘッダーの分、見た目の中央に合わせる */ display: flex; flex-direction: column; justify-content: center; }
.finale__title { font-family: var(--f-serif); font-weight: 500; font-size: clamp(32px, 4.4vw, 66px); line-height: 1.6; letter-spacing: 0.14em; text-shadow: 0 0 40px rgba(255, 238, 230, 0.9), 0 0 2px rgba(255, 245, 238, 0.6); margin-bottom: 40px; }
.finale__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.finale .btn--ghost { background: rgba(255, 255, 255, 0.72); }
.finale__sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin-top: 26px; font-size: 13px; }
.btn-line { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #06c755; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: 0.08em; }
.btn-line::before { content: 'LINE'; font-size: 10px; padding: 2px 6px; border-radius: 6px; background: #fff; color: #06c755; letter-spacing: 0.04em; }
.btn-line[aria-disabled="true"] { opacity: 0.85; }
.text-link { color: var(--ink); text-underline-offset: 4px; }
.access { width: 100%; margin: 56px auto 0; display: grid; grid-template-columns: 1fr 300px; gap: 48px; /* 受付時間は狭く、地図の列を広く */ text-align: left; color: var(--ink); }
.access h3 { font-family: var(--f-serif); font-weight: 500; font-size: 18px; letter-spacing: 0.1em; color: var(--ink-deep); margin-bottom: 12px; }
.access__addr { font-size: 15px; }
.access .link { margin-top: 18px; }
.access__map { margin-top: 24px; border-radius: 16px; overflow: hidden; height: 300px; border: 1px solid var(--line); background: var(--bg-2); }
.access__map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) sepia(0.32) hue-rotate(-48deg) saturate(1.45) brightness(1.04) contrast(0.92); } /* モノクロにしてから、サイトの淡いピンクの単色に寄せる（11/07 に紫から変更） */
.hours { border-collapse: collapse; width: 100%; font-size: 14px; }
.hours th, .hours td { padding: 6px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400;  font-family: var(--f-num);}
.hours th { width: 3em; color: var(--muted); }
.hours td { font-family: var(--f-latin); font-variant-numeric: lining-nums; font-size: 17px; font-variant-numeric: tabular-nums; }
.hours .is-closed td { font-family: var(--f-sans); font-size: 13px; color: var(--pink-deep); }
.access__closed { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* ------------------------------------------------ フッター */
.footer { position: relative; z-index: 32; /* 左下の進み具合の弧より上 */ /* 下へ向かって薄いオレンジ（読み込み画面の下と同じ色味） */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.86) 35%, rgba(253, 226, 204, 0.94) 100%); backdrop-filter: blur(20px); border-top: 1px solid var(--line); color: var(--ink); padding: 54px var(--gutter) 40px; /* 11/14 上を 80→54px（2/3） */ display: grid; grid-template-columns: 1fr 3fr; gap: 48px; }
.footer__brand .logo__img--footer { display: block; margin-bottom: 20px; }
.footer__brand p { font-size: 13.5px; }
.footer__brand .footer__lead { font-weight: 700; line-height: 1.8; color: var(--ink-deep); }
.footer__brand .footer__name { font-size: 16.5px; letter-spacing: 0.08em; }
@media (max-width: 820px) { .footer__brand .footer__br { display: none; } }
.footer__brand .footer__addr { font-size: 13px; margin-top: 22px; line-height: 1.9; color: var(--muted); }
/* 11/14 住所の右のマップピン（押すと Google マップを別タブで） */
.footer__map { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -5px 0 -5px 6px; vertical-align: middle; border-radius: 50%; background: #fff; color: var(--pink-deep); box-shadow: 0 6px 16px -10px rgba(120, 70, 85, 0.6); transition: background 0.3s, color 0.3s, transform 0.4s var(--ease); }
.footer__station { display: block; margin-top: 1.9em; } /* 11/14 駅からの道のりは住所の 1 行下に */
.footer__map svg { width: 17px; height: 17px; } /* 11/14 ピンは 17px のまま、丸は 30px（40px は大きすぎた） */
.footer__map:hover, .footer__map:focus-visible { background: var(--pink-deep); color: #fff; transform: translateY(-2px); }
.footer__nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.footer__nav h4 { font-family: var(--f-serif); font-weight: 500; font-size: 15.5px; letter-spacing: 0.1em; line-height: 1.5; color: var(--ink-deep); margin-bottom: 14px; }
/* 11/14 折り返したときの行間（1.5）と、項目どうしの間（8px＋行の余白）を分ける */
.footer__nav li + li { margin-top: 8px; }
.footer__nav a { display: inline-block; font-size: 13.5px; text-decoration: none; line-height: 1.5; padding-block: 3px; opacity: 1; transition: opacity 0.3s; }
.footer__nav a:hover { color: var(--pink-deep); }
.footer__copy { grid-column: 1 / -1; font-family: var(--f-latin); font-variant-numeric: lining-nums; font-size: 12px; letter-spacing: 0.2em; color: var(--muted); }

.dock { display: none; }

/* メニューは 1 行に保つ。1101〜1320px はロゴ横のカナを隠して間隔を詰める（TOP は余白が広く、折り返していた） */
.nav > ul > li > a { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1320px) {
  .logo__kana { display: none; }
  .nav > ul { gap: 20px; }
  .nav > ul > li > a { letter-spacing: 0.08em; }
}

/* ------------------------------------------------ 縦長・スマホ */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: 0; border-radius: 50%; border: 1px solid var(--line); background: rgba(251, 247, 241, 0.6); backdrop-filter: blur(8px); }
  .promises { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  body { font-size: 14.5px; }
  .header { gap: 10px; }
  .header__cta { display: none; }
  .logo { gap: 16px; }
  /* 11/14 ロゴを 2 割大きく。上下の負のマージンで場所の高さは前と同じ（50px / 38px）にし、ヘッダーの高さを変えない */
  .logo__img { height: 60px; margin-block: -5px; transition: height 0.6s var(--ease), margin 0.6s var(--ease); }
  .is-scrolled .logo__img { height: 46px; margin-block: -4px; }
  .logo__kana { font-size: 13px; letter-spacing: 0.1em; }
  .orbit { display: none; }
  .scene { padding: 18vh 16px; align-items: flex-start; } /* ボックスの間から女性が見える。11/14 に 12vh から 50% 広げた */
  .scene--hero { padding: 0; } /* KV は画面の高さちょうどにする（上の余白をかけない） */
  .scene--finale { padding-top: 0; }
  .panel, .panel--wide { width: 100%; margin: 0 !important; padding: 26px 20px; border-radius: 22px; }
  .walk { height: 2vh; }
  .hero { padding: 96px 16px 110px; /* 冒頭文は下の予約バーの少し上に固定 */ grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  .hero__eyebrow { position: static; grid-row: 1; flex-direction: column; font-size: 13px; gap: 2px; }
  .hero__title { grid-column: 1; grid-row: 2; writing-mode: horizontal-tb; font-size: clamp(26px, 7.4vw, 36px); line-height: 1.5; letter-spacing: 0.1em; margin-top: 18px; }
  .hero__line:nth-child(2) { padding-top: 0; }
  .hero__line { white-space: normal; }
  .hero__foot { grid-row: 4; margin-left: 0; }
  .hero__actions { display: none; } /* 下の予約バーと重なるため */
  .hero__lead { max-width: none; } /* 11/14 改行は .hero__br で決める（「専門の、」のあとで折る） */
  .hero__br { display: inline; }
  .finale__title { font-size: clamp(24px, 6.6vw, 32px); letter-spacing: 0.08em; }
  .scroll-cue { display: none; }
  .tabs { border-radius: 999px; } /* 中のボタン（999px）とカーブをそろえる（11/14） */
  .item { grid-template-columns: 1fr; padding: 24px 12px; background: rgba(255, 255, 255, 0.78); border-color: rgba(214, 198, 192, 0.55); box-shadow: 0 14px 28px -18px rgba(90, 55, 45, 0.42); } /* 外のボックスとの境をはっきり（11/14） */
  .item__more { top: 24px; } /* 上の余白（24px）にそろえる */
  .item__img { aspect-ratio: 16 / 9; }
  .item__img--round { aspect-ratio: 1; width: 150px; }
  .promises { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .access { grid-template-columns: 1fr; gap: 24px; }
  .access__map { height: 240px; }
  .finale__actions .btn { width: 100%; }
  .footer { grid-template-columns: 1fr; padding-bottom: 104px; } /* 下の予約バーの分だけ空ける */
  .footer__nav { grid-template-columns: 1fr 1fr; row-gap: 40px; } /* 11/14 見出しの上を半行ほど広げる（28→40px） */
  .dock {
    display: grid; grid-template-columns: 46px 1fr auto; /* LINE は文字の幅だけ */ gap: 8px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45;
    padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(16px); box-shadow: 0 20px 40px -20px rgba(70, 40, 30, 0.5);
  }
  .dock .btn { --h: 46px; padding: 0 12px; }
  .dock__tel { padding: 0; }
  .dock__line { min-height: var(--h); font-size: 14px; }
  .dock__line::before { display: none; } /* 小さな「LINE」の札は文言と重複するので出さない */
}

/* 描画が重い環境（画質を 2 段以上落としたとき）: 背景のぼかしを止め、代わりに地を少し濃くする */
.perf-lite .panel, .perf-lite .header.is-scrolled, .perf-lite .btn--ghost, .perf-lite .footer, .perf-lite .dock, .perf-lite .drawer, .perf-lite .menu-toggle { backdrop-filter: none; -webkit-backdrop-filter: none; }
.perf-lite .panel { background: rgba(255, 255, 255, 0.88); }
.perf-lite .header.is-scrolled { background: rgba(255, 255, 255, 0.92); }

@media (prefers-reduced-motion: reduce) {
  .loader::before, .loader::after { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .loader { display: none; }
}
@media (max-width: 1100px) {
  .menu-toggle span:first-child { width: 18px; height: 11px; border-block-width: 1px; }
  .menu-toggle span:first-child::after, .menu-toggle span:first-child::before { height: 1px !important; }
}

@media (max-width: 1100px) { .drawer { padding-top: 96px; } }

/* PC のハンバーガーメニュー（11/07）: 縦を短くするため 4 列に並べる。
   1 列目 肌のお悩み / 2 列目 メニュー・料金 / 3 列目 はじめての方＋リボーンを知る / 4 列目 ご来店＋予約ボタン */
@media (min-width: 1101px) {
  .drawer { padding-top: 130px; display: block; }
  .drawer__in { max-width: 1120px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 44px; align-items: start; }
  .drawer__home { grid-column: 1 / -1; }
  .drawer__group:nth-of-type(1) { grid-column: 1; grid-row: 2 / span 2; }
  .drawer__group:nth-of-type(2) { grid-column: 2; grid-row: 2 / span 2; }
  .drawer__group:nth-of-type(3) { grid-column: 3; grid-row: 2; }
  .drawer__group:nth-of-type(4) { grid-column: 3; grid-row: 3; }
  .drawer__group:nth-of-type(5) { grid-column: 4; grid-row: 2; }
  .drawer__cta { grid-column: 4; grid-row: 3; grid-template-columns: 1fr; align-self: start; }
  .drawer__list { grid-template-columns: 1fr; }
  .drawer__list > li > a { padding: 7px 0; }
  .drawer__sub { padding-top: 2px; }
}