/* =====================================================
   OASIS TOKYO  — デザイン参考: cbycalista.jp
   ===================================================== */
:root {
  --text: #3c3736;
  --navy: #21243c;
  --purple: #a67da0;
  --purple-btn: #ab80a0;
  --purple-deep: #5b255e;
  --purple-footer: #a47a9a;
  --lavender: #f6f1f6;
  --mist: #f5fbfd;
  --gray-band: #edeeed;
  --line: #d9d4d8;
  --gold: #b0894a;
  --gold-light: #f3ecdb;
  --marker: #fff2a8;
  --header-h: 105px;
  --bottom-h: 100px;
  --mincho: "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  --mincho2: "Shippori Mincho", "游明朝", YuMincho, serif;
  --sans: "Noto Sans JP", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--mincho);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.8;
  color: var(--text);
  background: #fff;
  line-break: strict;
  overflow-wrap: break-word;
  word-break: auto-phrase;
  padding-top: var(--header-h);
  padding-bottom: var(--bottom-h);
}
h1, h2, h3, h4, h5, h6 { text-wrap: balance; margin: 0; font-weight: 400; }
p { text-wrap: pretty; margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.container--narrow { max-width: 860px; }
.section { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px); }
.sp-only { display: none; }
@media (max-width: 767px) { .sp-only { display: inline; } .pc-only { display: none; } }

/* ---------- 写真プレースホルダー ---------- */
.ph {
  position: relative;
  background: linear-gradient(135deg, #ece4ea 0%, #f6f2f4 45%, #e3dbe2 100%);
  overflow: hidden;
}
.ph::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12px; letter-spacing: .1em;
  color: #a99aa6;
}
.ph img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }

/* ---------- ヘッダー ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.logo { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--purple-deep); }
.logo__mark { width: 40px; height: 40px; }
.logo__text { font-family: var(--mincho2); font-size: 12px; letter-spacing: .28em; padding-left: .28em; color: var(--text); }
.hamburger {
  position: absolute; right: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: 0; background: none; cursor: pointer; padding: 0;
}
.hamburger span { display: block; width: 40px; height: 1px; background: var(--purple); margin: 10px auto; transition: transform .3s, opacity .3s; }
.is-open .hamburger span:nth-child(1) { transform: translateY(11px) rotate(30deg); }
.is-open .hamburger span:nth-child(2) { opacity: 0; }
.is-open .hamburger span:nth-child(3) { transform: translateY(-11px) rotate(-30deg); }

/* 縦の「ネット予約」タブ */
.side-reserve {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90;
  writing-mode: vertical-rl; letter-spacing: .2em;
  background: var(--purple-btn); color: #fff; font-size: 14px;
  padding: 22px 13px; border-radius: 25px 0 0 25px;
}
@media (max-width: 767px) { .side-reserve { display: none; } }

/* ドロワー */
.drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: #fff; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.is-open .drawer { opacity: 1; visibility: visible; }
.drawer__inner { max-width: 720px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) 24px 140px; }
.drawer__nav li { border-bottom: 1px solid var(--line); }
.drawer__nav a { display: flex; justify-content: space-between; align-items: center; padding: 20px 8px; font-size: clamp(15px, 1.6vw, 18px); letter-spacing: .12em; }
.drawer__nav small { display: block; font-family: var(--sans); font-size: 11px; color: var(--purple); letter-spacing: .1em; }
.drawer__sns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }

/* ---------- ボタン ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 64px; border-radius: 32px;
  background: var(--purple); color: #fff;
  font-size: clamp(14px, 1.2vw, 16px); letter-spacing: .1em;
  transition: opacity .25s;
}
.btn:hover { opacity: .8; }
.btn--arrow::after {
  content: ""; position: absolute; right: 28px; top: 50%;
  width: 9px; height: 9px; border-top: 1px solid #fff; border-right: 1px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}
.btn--lg { min-height: clamp(64px, 6vw, 83px); width: min(507px, 100%); border-radius: 42px; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: .1em; }
.btn--wide { width: min(353px, 100%); }
.btn--outline { background: #fff; color: var(--text); border: 1px solid var(--text); min-height: 32px; padding: 0 28px; font-size: 14px; border-radius: 20px; }
.btn--line { background: #06c755; }
.btn--insta { background: linear-gradient(45deg, #f9a24b, #e44c90 50%, #8a49c9); }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 見出し ---------- */
.ttl { text-align: center; font-size: clamp(20px, 2vw, 24px); letter-spacing: .125em; line-height: 1.7; }
.ttl small { display: block; font-family: var(--mincho2); font-size: 11px; letter-spacing: .3em; color: var(--purple); margin-bottom: 6px; }
.ttl + * { margin-top: clamp(32px, 4vw, 56px); }
.lead { text-align: center; line-height: 2.1; letter-spacing: .06em; }

/* 区切り */
.sep-band { height: 8px; background: var(--gray-band); }
.wave { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }

/* ---------- ヒーロー ---------- */
.hero { position: relative; height: calc(100svh - var(--header-h)); min-height: 520px; max-height: 900px; }
.hero__img { position: absolute; inset: 0; }
.hero__copy {
  position: absolute; left: clamp(16px, 7vw, 120px); top: 42%;
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.4vw, 18px);
}
.hero__copy span {
  background: rgba(255, 255, 255, .92);
  font-family: var(--mincho2); font-weight: 500;
  font-size: clamp(22px, 3vw, 40px); letter-spacing: .14em;
  padding: .12em .45em; line-height: 1.5;
}
.hero__copy .hero__sub { margin-top: 8px; padding: 0; font-family: var(--mincho2); font-size: clamp(12px, 1.1vw, 15px); letter-spacing: .2em; background: none !important; color: #fff; text-shadow: 0 0 8px rgba(0,0,0,.25); }

/* 実績バンド（金のリボン＋月桂樹） */
.badges { position: relative; margin-top: -1px; background: var(--gold-light); padding: 0 0 clamp(40px, 5vw, 64px); }
.badges .wave { position: absolute; top: calc(-1 * clamp(40px, 6vw, 90px) + 1px); left: 0; }
.ribbon {
  position: relative; display: block; width: fit-content; margin: 0 auto;
  background: linear-gradient(180deg, #c9a465, #a9813f);
  color: #fff; font-family: var(--mincho2); font-weight: 600;
  font-size: clamp(16px, 2vw, 26px); letter-spacing: .12em;
  padding: .45em 2.2em; transform: translateY(-30%);
  box-shadow: 0 4px 10px rgba(120, 90, 40, .2);
}
.ribbon::before, .ribbon::after {
  content: ""; position: absolute; top: 18%; width: 1.4em; height: 100%;
  background: #93702f; z-index: -1;
}
.ribbon::before { left: -1em; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.ribbon::after { right: -1em; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.ribbon em { font-style: normal; font-size: 1.3em; }
.laurels { display: flex; justify-content: center; gap: clamp(16px, 5vw, 64px); margin-top: clamp(8px, 1vw, 16px); }
.laurel { position: relative; width: clamp(92px, 12vw, 150px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #7d5a28; line-height: 1.25; }
.laurel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.laurel__s { font-size: clamp(10px, 1vw, 13px); }
.laurel__b { font-family: var(--mincho2); font-weight: 700; font-size: clamp(20px, 2.4vw, 32px); letter-spacing: .02em; }
.laurel__b small { font-size: .5em; }

/* ---------- 初回限定（トライアル） ---------- */
.trial-box {
  max-width: 900px; margin: 0 auto; border: 1px solid #8f8a89;
  padding: clamp(40px, 5vw, 64px) clamp(16px, 4vw, 48px);
  text-align: center;
}
.trial-box__img { aspect-ratio: 16/7; margin: clamp(24px, 3vw, 40px) auto; max-width: 720px; }
.trial-box__lead { display: inline-block; border: 1px solid #8f8a89; padding: 2px clamp(16px, 3vw, 48px); letter-spacing: .1em; }
.price { margin-top: 8px; color: var(--purple); font-family: var(--mincho2); font-weight: 700; line-height: 1.2; }
.price__label { font-size: clamp(18px, 2vw, 26px); letter-spacing: .05em; background: linear-gradient(transparent 60%, var(--marker) 60%); }
.price__num { font-size: clamp(36px, 5vw, 56px); letter-spacing: .02em; background: linear-gradient(transparent 62%, var(--marker) 62%); }
.price__num small { font-size: .3em; vertical-align: top; }
.price__yen { font-size: clamp(18px, 2vw, 26px); background: linear-gradient(transparent 60%, var(--marker) 60%); }
.trial-box__note { font-size: 14px; letter-spacing: .05em; margin-bottom: clamp(24px, 3vw, 40px); }

/* ---------- 水紋背景 ---------- */
.ripple {
  position: relative;
  background:
    radial-gradient(ellipse at 75% 55%, rgba(255,255,255,.7), transparent 60%),
    repeating-radial-gradient(ellipse at 72% 60%, #f3f3f3 0 12px, #eaeaea 18px, #f6f6f6 28px, #efefef 38px),
    #eee;
}
.ripple::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.25)); filter: blur(0);
  pointer-events: none;
}
.ripple > * { position: relative; }
.ripple .wave--top { position: absolute; top: -1px; left: 0; }
.ripple .wave--bottom { position: absolute; bottom: -1px; left: 0; }
.ripple__inner { padding: clamp(90px, 12vw, 180px) 0; }

/* カード（メニュー等） */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(16px, 3vw, 40px); }
.card { background: #fff; padding: clamp(24px, 3vw, 36px) clamp(18px, 2.4vw, 32px) clamp(28px, 3vw, 40px); display: flex; flex-direction: column; }
.card__ttl { text-align: center; font-size: clamp(19px, 2vw, 24px); letter-spacing: .1em; margin-bottom: 18px; }
.card__img { aspect-ratio: 4/3; }
.card__txt { margin: 20px 0 24px; line-height: 1.9; letter-spacing: .05em; flex: 1; }
.card__price { text-align: center; font-family: var(--mincho2); color: var(--purple); font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 20px; }
.card__price small { font-size: 12px; color: var(--text); margin-left: 4px; }
.card .btn { align-self: center; padding: 0 56px; }

/* 丸バッジ */
.circles { display: flex; justify-content: center; gap: clamp(12px, 3vw, 40px); flex-wrap: wrap; }
.circle {
  width: clamp(100px, 12vw, 150px); aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mincho2); font-weight: 600; font-size: clamp(14px, 1.6vw, 21px); letter-spacing: .06em; line-height: 1.45;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #f1edf3 55%, #d9d0de 100%);
  border: 1px solid #fff; box-shadow: 0 0 0 1px #cfc5d4, 0 6px 14px rgba(110, 90, 120, .12);
}
.circle--gold {
  background: radial-gradient(circle at 35% 30%, #fffdf6 0%, #f6efe0 55%, #e3d3b2 100%);
  box-shadow: 0 0 0 1px #d8c49c, 0 6px 14px rgba(140, 110, 50, .14); color: #6d5a3a;
}
.circle--gold em { font-style: normal; font-size: 1.7em; display: block; line-height: 1.1; }

/* 2列テーブル風リンク（店舗一覧スタイル） */
.link-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #8f8a89; }
.link-grid a, .link-grid div { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 12px; border-bottom: 1px solid #8f8a89; font-size: 15px; letter-spacing: .08em; }
.link-grid > :nth-child(odd) { border-right: 1px solid #8f8a89; }
.link-grid a::after { content: "→"; font-family: var(--sans); font-size: 11px; width: 16px; height: 16px; border: 1px solid; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 480px) { .link-grid { grid-template-columns: 1fr; } .link-grid > :nth-child(odd) { border-right: 0; } }

/* ---------- 特徴（なぜ選ばれる） ---------- */
.mist { background: var(--mist); }
.reasons { display: grid; gap: clamp(40px, 6vw, 80px); }
.reason { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.reason:nth-child(even) .reason__img { order: 2; }
.reason__img { aspect-ratio: 3/2; }
.reason__num { font-family: var(--mincho2); color: var(--purple); font-size: 13px; letter-spacing: .3em; }
.reason__num b { font-size: clamp(32px, 4vw, 48px); font-weight: 500; margin-left: 6px; letter-spacing: 0; }
.reason__ttl { font-size: clamp(19px, 2vw, 24px); letter-spacing: .08em; line-height: 1.6; margin: 8px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.reason__txt { line-height: 2; letter-spacing: .04em; }
@media (max-width: 767px) { .reason { grid-template-columns: 1fr; } .reason:nth-child(even) .reason__img { order: 0; } }

.note-box { background: var(--lavender); padding: clamp(28px, 4vw, 48px) clamp(18px, 4vw, 56px); position: relative; }
.note-box__label { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 6px 28px; font-size: 13px; white-space: nowrap; }
.note-box p { font-size: 13px; line-height: 2; }

/* ---------- 口コミ・ビフォーアフター ---------- */
.ba-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 3vw, 40px); }
.ba { background: #fff; border: 1px solid var(--line); padding: clamp(16px, 2vw, 24px); }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; position: relative; }
.ba__pair .ph { aspect-ratio: 3/4; }
.ba__tag { position: absolute; top: 8px; z-index: 2; font-family: var(--sans); font-size: 11px; letter-spacing: .12em; background: rgba(255,255,255,.9); padding: 2px 10px; }
.ba__tag--b { left: 8px; } .ba__tag--a { left: calc(50% + 10px); background: var(--purple); color: #fff; }
.ba__meta { margin-top: 14px; font-size: 13px; color: #7b7473; letter-spacing: .05em; }
.ba__ttl { font-size: 17px; letter-spacing: .06em; margin-top: 4px; }
.disclaimer { margin-top: 24px; font-size: 12px; color: #7b7473; text-align: center; line-height: 1.9; }

.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.voice { background: #fff; padding: clamp(24px, 3vw, 32px); border-top: 3px solid var(--purple); box-shadow: 0 6px 20px rgba(60, 40, 60, .06); }
.voice__stars { color: #d3a94b; letter-spacing: .15em; font-size: 15px; }
.voice__ttl { font-size: 17px; letter-spacing: .06em; line-height: 1.7; margin: 8px 0 12px; }
.voice__txt { font-size: 14px; line-height: 2; }
.voice__who { margin-top: 14px; font-size: 12px; color: #7b7473; }

/* ---------- 流れ ---------- */
.flow { display: grid; gap: 0; max-width: 820px; margin: 0 auto; counter-reset: flow; }
.flow li { position: relative; display: grid; grid-template-columns: clamp(64px, 8vw, 96px) 1fr; gap: clamp(16px, 3vw, 32px); padding: 24px 0; border-bottom: 1px solid var(--line); }
.flow li::before {
  counter-increment: flow; content: "STEP\A" counter(flow, decimal-leading-zero);
  white-space: pre; text-align: center; font-family: var(--mincho2); color: var(--purple); font-size: 11px; letter-spacing: .2em; line-height: 1.5;
  width: clamp(64px, 8vw, 88px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--purple);
  display: flex; align-items: center; justify-content: center;
}
.flow h3 { font-size: clamp(17px, 1.6vw, 20px); letter-spacing: .08em; margin-bottom: 6px; }
.flow p { font-size: 14px; line-height: 1.9; }

/* 料金表 */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { border-bottom: 1px solid var(--line); padding: 18px 12px; text-align: left; vertical-align: top; }
.price-table th { font-weight: 400; letter-spacing: .06em; width: 45%; }
.price-table th small { display: block; font-size: 12px; color: #7b7473; margin-top: 4px; }
.price-table td { font-family: var(--mincho2); text-align: right; white-space: nowrap; font-size: 17px; }
.price-table td .first { display: block; color: var(--purple); font-size: 13px; }
.price-group + .price-group { margin-top: clamp(40px, 5vw, 64px); }
.price-group h3 { font-size: clamp(18px, 1.8vw, 22px); letter-spacing: .1em; padding-left: 14px; border-left: 2px solid var(--purple); margin-bottom: 12px; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 32px 1fr 20px; align-items: center; gap: 12px; padding: 22px 4px; letter-spacing: .05em; line-height: 1.7; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--mincho2); color: var(--purple); font-size: 22px; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 22px; color: var(--purple); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 0 4px 24px; font-size: 14px; line-height: 2; }
.faq .faq__a::before { content: "A"; font-family: var(--mincho2); color: #b8a9b6; font-size: 22px; line-height: 1.3; }

/* ---------- タイプ別診断 ---------- */
.diag { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--line); padding: clamp(28px, 4vw, 56px) clamp(16px, 4vw, 56px); text-align: center; }
.diag__progress { font-family: var(--mincho2); color: var(--purple); font-size: 13px; letter-spacing: .25em; }
.diag__bar { height: 2px; background: var(--gray-band); margin: 10px auto 28px; max-width: 240px; }
.diag__bar i { display: block; height: 100%; background: var(--purple); transition: width .3s; }
.diag__q { font-size: clamp(18px, 2vw, 22px); letter-spacing: .08em; line-height: 1.7; margin-bottom: 28px; }
.diag__opts { display: grid; gap: 12px; }
.diag__opt { min-height: 56px; border: 1px solid var(--purple); background: #fff; color: var(--text); border-radius: 30px; font-size: 15px; letter-spacing: .05em; cursor: pointer; padding: 10px 24px; transition: background .2s, color .2s; }
.diag__opt:hover { background: var(--purple); color: #fff; }
.diag__type { font-family: var(--mincho2); color: var(--purple); font-size: 13px; letter-spacing: .3em; }
.diag__name { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: .1em; margin: 8px 0 16px; }
.diag__desc { line-height: 2; margin-bottom: 20px; text-align: left; }
.diag__menu { background: var(--lavender); padding: 16px; margin-bottom: 28px; letter-spacing: .05em; }
.diag__retry { margin-top: 20px; background: none; border: 0; text-decoration: underline; color: #7b7473; cursor: pointer; font-size: 13px; }

/* ---------- 問い合わせ ---------- */
.contact-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.way { background: #fff; border: 1px solid var(--line); padding: clamp(28px, 3vw, 40px) 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.way svg { color: var(--purple); }
.way h3 { font-size: 19px; letter-spacing: .1em; }
.way p { font-size: 13px; line-height: 1.9; flex: 1; }
.way .btn { width: 100%; padding: 0 40px; }

.form { max-width: 760px; margin: 0 auto; display: grid; gap: 24px; }
.form label { display: block; font-size: 15px; letter-spacing: .06em; margin-bottom: 8px; }
.form .req { font-family: var(--sans); font-size: 11px; color: #fff; background: var(--purple); padding: 1px 8px; margin-left: 8px; vertical-align: 2px; }
.form input, .form select, .form textarea {
  width: 100%; font-size: 16px; font-family: var(--sans);
  border: 1px solid var(--line); background: #fff; padding: 14px 16px; border-radius: 0; color: var(--text);
}
.form textarea { min-height: 180px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--purple); outline-offset: -1px; }
.form .check { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; }
.form .check input { width: 20px; height: 20px; }
.form .btn { justify-self: center; border: 0; cursor: pointer; }

/* ---------- 下層ページ見出し ---------- */
.page-head { position: relative; height: clamp(240px, 32vw, 420px); }
.page-head .ph { position: absolute; inset: 0; }
.page-head__ttl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: rgba(255,255,255,.92); padding: clamp(14px, 2vw, 24px) clamp(28px, 5vw, 64px); text-align: center; white-space: nowrap; }
.page-head__ttl h1 { font-family: var(--mincho2); font-weight: 500; font-size: clamp(22px, 3vw, 34px); letter-spacing: .16em; }
.page-head__ttl small { display: block; font-family: var(--mincho2); font-size: 11px; letter-spacing: .35em; color: var(--purple); }
.breadcrumb { font-family: var(--sans); font-size: 12px; color: #7b7473; padding: 14px 0; }
.breadcrumb a { color: var(--purple); }

/* ---------- CTAセクション ---------- */
.cta { text-align: center; padding: clamp(56px, 7vw, 96px) 0; }
.cta__sub { font-size: clamp(14px, 1.4vw, 17px); letter-spacing: .1em; margin-bottom: 18px; }
.cta__sub::before { content: "＼ "; } .cta__sub::after { content: " ／"; }

/* ---------- 店舗情報 ---------- */
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.shop__img { aspect-ratio: 4/3; }
.shop dl { display: grid; grid-template-columns: 7em 1fr; border-top: 1px solid var(--line); }
.shop dt, .shop dd { margin: 0; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.8; }
.shop dt { color: var(--purple); letter-spacing: .1em; }
.shop__name { font-size: clamp(19px, 2vw, 24px); letter-spacing: .1em; margin-bottom: 16px; }
@media (max-width: 767px) { .shop { grid-template-columns: 1fr; } }
.shop + .shop { margin-top: clamp(48px, 6vw, 80px); }

/* ---------- フッター ---------- */
.footer { background: var(--purple-footer); color: var(--navy); padding: clamp(40px, 5vw, 64px) 0 40px; }
.footer__logo { color: #fff; margin-bottom: 20px; }
.footer__logo .logo__text { color: #fff; }
.footer__about { text-align: center; color: #fff; font-size: 13px; line-height: 2; margin-bottom: clamp(32px, 4vw, 48px); }
.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; max-width: 900px; margin: 0 auto; }
.footer__nav a { display: block; color: #fff; font-size: 13px; letter-spacing: .08em; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.35); }
.footer__sns { display: flex; justify-content: center; gap: 20px; margin-top: 32px; }
.footer__sns a { color: #fff; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; }
.footer__copy { text-align: center; color: #fff; font-family: var(--sans); font-size: 11px; letter-spacing: .1em; margin-top: 32px; }
@media (max-width: 767px) { .footer__nav { grid-template-columns: 1fr 1fr; } }

/* ---------- 固定予約バー ---------- */
.fixed-bar {
  position: fixed; inset: auto 0 0 0; z-index: 95; height: var(--bottom-h);
  background: rgba(255, 255, 255, .96); box-shadow: 0 -2px 12px rgba(0,0,0,.05);
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 48px); padding: 0 16px;
}
.fixed-bar__txt { text-align: center; line-height: 1.5; }
.fixed-bar__txt span { display: block; font-size: 13px; letter-spacing: .08em; }
.fixed-bar__txt span::before { content: "＼ "; } .fixed-bar__txt span::after { content: " ／"; }
.fixed-bar__txt b { font-weight: 400; font-size: 13px; letter-spacing: .05em; }
.fixed-bar__txt b em { font-style: normal; font-family: var(--mincho2); font-size: 22px; margin-left: 8px; }
.fixed-bar .btn { min-height: 52px; width: min(380px, 52vw); padding: 0 40px; }
.fixed-bar .btn::after { content: "≫"; position: absolute; right: 22px; font-family: var(--sans); font-size: 13px; }
@media (max-width: 767px) {
  :root { --header-h: 72px; --bottom-h: 76px; }
  .logo__mark { width: 30px; height: 30px; }
  .logo__text { font-size: 10px; }
  .hamburger span { width: 32px; margin: 8px auto; }
  .is-open .hamburger span:nth-child(1) { transform: translateY(9px) rotate(30deg); }
  .is-open .hamburger span:nth-child(3) { transform: translateY(-9px) rotate(-30deg); }
  .fixed-bar { gap: 10px; }
  .fixed-bar__txt span, .fixed-bar__txt b { font-size: 11px; }
  .fixed-bar__txt b em { font-size: 17px; margin-left: 4px; }
  .fixed-bar .btn { min-height: 48px; font-size: 14px; padding: 0 28px 0 16px; }
  .fixed-bar .btn::after { right: 12px; }
}

/* ---------- フェードイン ---------- */
.fade { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.fade.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

.more { text-align: center; margin-top: clamp(32px, 4vw, 56px); }
.mt-0 { margin-top: 0 !important; }
.todo { background: #fff6cc; outline: 1px dashed #d4b200; }

/* ---------- スマホ調整 ---------- */
.drawer__sns .btn { padding: 0 16px; }
@media (max-width: 600px) {
  .price-table th, .price-table td { display: block; width: 100%; padding: 10px 4px; }
  .price-table th { border-bottom: 0; padding-top: 18px; }
  .price-table td { text-align: left; white-space: normal; }
  .page-head__ttl { white-space: normal; width: calc(100% - 32px); }
}
@media (max-width: 600px) { .compare th, .compare td { display: table-cell; width: auto; } }
.badges { overflow-x: clip; }
@media (max-width: 480px) { .ribbon { padding: .45em 1.2em; font-size: 15px; letter-spacing: .06em; } }
@media (max-width: 480px) {
  .laurels { gap: 6px; }
  .laurel { width: 108px; }
  .laurel__s { font-size: 9px; }
  .laurel__b { font-size: 19px; }
}