/* lien（デモ）— 文字はHTML。写真はブロブの型（Codexで作った形）で切り抜く。スマホの列の幅を基準に組む */
:root {
  --ground: #F6F4F0; --face: #E6E0D8; --ink: #3F3B37; --sub: #6F6862; --rose: #9A5F58; --paper: #FBFAF7;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--ground); color: var(--ink); font-family: var(--gothic); font-size: 16px; line-height: 1.85; font-feature-settings: "palt"; }
img { display: block; max-width: 100%; height: auto; }
ol, ul { list-style: none; }
h1, h2, h3 { font-weight: 500; word-break: auto-phrase; text-wrap: balance; line-break: strict; }
h2, h3, .fv-title, .closing { word-break: keep-all; overflow-wrap: anywhere; }
/* 本文も文節で改行し、最後の行を1〜2文字にしない（Chrome は auto-phrase、Safari は <wbr> と通常の改行） */
p, li, dt, dd, th, td, figcaption { word-break: auto-phrase; text-wrap: pretty; line-break: strict; }

/* ---- 全体（スマホは1列、PCは 1fr｜560px｜1fr） ---- */
.band { display: none; }
.col { position: relative; background: var(--ground); container-type: inline-size; overflow-x: clip; }
@media (min-width: 900px) {
  .wrap { display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr; }
  .band { display: block; position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .band-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .band-left .band-photo { object-position: right center; }
  .band-right .band-photo { object-position: left center; }
  .band-logo { position: relative; width: min(56%, 230px); margin: 9vh auto 0; }
  .band-cta { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: min(82%, 360px); text-align: center; }
  .band-cta p { margin-top: 10px; font-size: 14px; background: rgba(251, 250, 247, .92); display: inline-block; padding: 4px 14px; border-radius: 6px; }
  .col { box-shadow: 0 0 60px rgba(63, 59, 55, .18); z-index: 2; }
}

/* ---- 共通の部品 ---- */
.sec { position: relative; padding: 9cqw 5cqw 0; }
.card { position: relative; border-radius: 4cqw; padding: 8cqw 6cqw 9cqw; }
.card-face { background: var(--face); }
.card-dark { background: var(--ink); color: var(--ground); }
.card-paper { background: var(--paper); box-shadow: 0 2px 14px rgba(63, 59, 55, .08); }
h2 { font-family: var(--mincho); font-size: clamp(26px, 7.2cqw, 38px); line-height: 1.4; letter-spacing: .04em; }
.lead { margin-top: 3cqw; font-size: 15px; line-height: 1.85; }
.right { text-align: right; }
.note { margin-top: 5cqw; font-size: 13px; color: var(--sub); }
.note.top { margin-top: 2cqw; }
/* ブロブ写真の影：見本A「ふんわり見える」（2026-11-08 かおりさん「Aで入れて」）。写真の形に沿って下へ落とし、すぐ下に薄い接地の影を重ねる */
.shadow { filter: drop-shadow(0 14px 16px rgba(92, 70, 58, .26)) drop-shadow(0 3px 4px rgba(92, 70, 58, .12)); }
/* ブロブ型の写真（型は Codex で作った形の画像。写真の大きさに引きのばして使う） */
.blob { width: 100%; height: 100%; object-fit: cover; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.b1 { -webkit-mask-image: url(img/blob1.png); mask-image: url(img/blob1.png); }
.b1f { -webkit-mask-image: url(img/blob1f.png); mask-image: url(img/blob1f.png); }
.b2 { -webkit-mask-image: url(img/blob2.png); mask-image: url(img/blob2.png); }
.b2f { -webkit-mask-image: url(img/blob2f.png); mask-image: url(img/blob2f.png); }
.b3 { -webkit-mask-image: url(img/blob3.png); mask-image: url(img/blob3.png); }
.b3f { -webkit-mask-image: url(img/blob3f.png); mask-image: url(img/blob3f.png); }
.orn { position: absolute; z-index: 6; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(80, 60, 52, .18)); }

/* ---- ボタン（深いローズのリネンの札。文字はHTML）
   見本B（2026-11-08 かおりさん「Bで進めて」）：札の形のままの濃いローズの厚み＋かざすと浮き、押すと沈む
   ＋画面に入ったとき・かざしたときに、オーロラの光が札の上を1回すべる（くり返さない） ---- */
.btn { --img: url(images/btn-fv-a.webp); position: relative; display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.btn-cta, .btn-band { --img: url(images/btn-cta-a.webp); }
/* A案：ボタンはクーポン券の形。文字は右の半券をよけて、券の本体の真ん中に */
.btn .under { position: absolute; inset: 0; background: #6B3D38; -webkit-mask: var(--img) center / 100% 100% no-repeat; mask: var(--img) center / 100% 100% no-repeat; transform: translateY(6px); }
.btn .face { position: relative; display: block; filter: drop-shadow(0 10px 12px rgba(90, 52, 46, .28)); transition: transform .16s ease, filter .16s ease; }
.btn .face img { width: 100%; }
.btn .shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--img) center / 100% 100% no-repeat; mask: var(--img) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 246, 0) 40%, rgba(255, 240, 250, .55) 46%, rgba(226, 214, 255, .5) 50%, rgba(214, 246, 238, .45) 54%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0; mix-blend-mode: screen; }
.btn.play .shine, .btn:hover .shine { animation: sweep 1.15s ease-out 1; }
@keyframes sweep { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.btn .label { position: absolute; top: 50%; left: 4%; right: 19%; transform: translateY(-50%); text-align: center; font-weight: 700; letter-spacing: .06em; color: #fff; white-space: nowrap; font-size: clamp(15px, 4.4cqw, 21px); line-height: 1.3; text-shadow: 0 1px 0 rgba(60, 30, 26, .35); }
.btn-cta .label, .btn-band .label { right: 17%; font-size: clamp(15px, 4cqw, 19px); letter-spacing: .03em; } /* 申し込みのボタンは枠の中にあって幅が狭いので、文字を少し小さく */
.btn:hover .face { transform: translateY(-2px); filter: drop-shadow(0 14px 16px rgba(90, 52, 46, .32)); }
.btn:active .face, .btn.pressed .face { transform: translateY(6px); filter: drop-shadow(0 2px 3px rgba(90, 52, 46, .25)); transition-duration: .06s; }
.btn:focus-visible { outline: 3px solid var(--rose); outline-offset: 6px; border-radius: 6px; }

/* 冒頭のデモ表記（架空の店舗であることを、最初に伝える） */
.demo-bar { padding: 7px 5cqw; background: var(--face); color: var(--sub); font-size: 13px; line-height: 1.5; text-align: center; letter-spacing: .04em; }

/* ---- 01 FV ---- */
.fv { position: relative; padding: 5cqw 5cqw 4cqw; }
.fv-logo { width: clamp(118px, 30cqw, 170px); }
.fv-label { margin-top: 2.5cqw; font-size: 14px; letter-spacing: .14em; }
.fv-title { font-family: var(--mincho); margin-top: 1cqw; position: relative; z-index: 5; line-height: 1.25; }
.fv-small { display: block; font-size: clamp(22px, 6.4cqw, 34px); font-weight: 500; letter-spacing: .04em; }
.fv-big { display: block; margin-top: 3.4cqw; font-size: min(13cqw, 72px); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.fv-visual { position: relative; aspect-ratio: 1 / 1.08; margin: -3cqw -1cqw 0; }
.fv-visual .layer { position: absolute; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.fv-linen-wrap { position: absolute; left: -2%; top: 3%; width: 86%; height: 80%; }
.fv-film-wrap { position: absolute; right: -2%; bottom: 8%; width: 44%; height: 38%; }
.fv-linen-wrap .layer, .fv-film-wrap .layer { inset: 0; width: 100%; height: 100%; }
.fv-linen { background: url(img/linen.webp) center / cover; -webkit-mask-image: url(img/blob2f.png); mask-image: url(img/blob2f.png); }
.fv-film { background: url(img/film.webp) center / cover; -webkit-mask-image: url(img/blob3.png); mask-image: url(img/blob3.png); opacity: .95; }
.fv-main { position: absolute; left: 8%; top: 6%; width: 90%; height: 82%; z-index: 2; }
.fv-main img { object-position: 52% 42%; }
.fv-inset { position: absolute; left: 0; bottom: 0; width: 42%; aspect-ratio: 1 / 1.08; z-index: 3; }
.blob-rim { position: absolute; inset: 0; background: var(--ground); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.blob-rim.b2 { -webkit-mask-image: url(img/blob2.png); mask-image: url(img/blob2.png); }
.fv-inset img { position: absolute; inset: 4%; width: 92%; height: 92%; object-position: 50% 30%; }
.fv-orn { right: 0; bottom: 4%; width: 46%; z-index: 4; }
.fv-lead { margin-top: 4cqw; font-size: 15px; line-height: 1.85; }
.btn-fv { width: min(86%, 440px); margin: 6cqw auto 0; }

/* ---- 02 体験の中身（ジグザグ） ---- */
.zigzag { margin-top: 7cqw; display: grid; gap: 8cqw; }
.zigzag li { position: relative; display: grid; grid-template-columns: 44% 1fr; gap: 5cqw; align-items: center; }
.zigzag li.rev { grid-template-columns: 1fr 44%; }
.zigzag li.rev .ph { order: 2; }
.zigzag .ph { aspect-ratio: 1 / 1.02; }
.zigzag .num { position: absolute; top: -4cqw; left: 33%; font-family: var(--mincho); font-weight: 600; font-size: clamp(30px, 9cqw, 46px); line-height: 1; color: var(--rose); }
.zigzag li.rev .num { left: auto; right: 33%; }
.zigzag h3 { font-family: var(--mincho); font-size: clamp(18px, 5cqw, 23px); line-height: 1.45; }
.zigzag p { margin-top: 1.5cqw; font-size: 15px; line-height: 1.8; }

/* ---- 03 スタイル実例（ブロブ写真＋吹き出し） ---- */
.sec-style { padding-top: 13cqw; }
/* FVと同じオーロラの膜を、ブロブ型に抜いた飾り（形も膜もCodexで作った素材） */
.aurora-blob { display: block; aspect-ratio: 1 / 1.05; background: url(img/film.webp) center / cover; -webkit-mask: url(img/blob1f.png) center / 100% 100% no-repeat; mask: url(img/blob1f.png) center / 100% 100% no-repeat; opacity: .95; }
/* つなぎ目のオーロラ：画面の端で半分切れる、うすいブロブ。左右交互・形も交互（英字のラベルは付けない） */
.sec { isolation: isolate; } /* つなぎ目のオーロラを、そのセクションの文字・写真・カードの後ろに置くため */
.orn.aurora-seam { z-index: -1; top: -4cqw; width: 42%; opacity: .75; filter: none; }
.aurora-seam .aurora-blob { background-image: url(img/aurora-foil.webp); } /* クーポン券と同じオーロラ箔の色（Codexの素材から切り出し） */
.aurora-seam.as-l { left: -18%; }
.aurora-seam.as-r { right: -18%; }
.aurora-seam.as-l .aurora-blob { -webkit-mask-image: url(img/blob2.png); mask-image: url(img/blob2.png); }
.aurora-seam.as-r .aurora-blob { -webkit-mask-image: url(img/blob3f.png); mask-image: url(img/blob3f.png); }
.voices { margin-top: 6cqw; display: grid; gap: 6cqw; }
.voices li { display: grid; grid-template-columns: 40% 1fr; align-items: center; }
.voices .ph { aspect-ratio: 1 / 1.08; position: relative; z-index: 2; }
.voices .ph img { object-position: 50% 30%; }
.bubble { position: relative; margin-left: -3cqw; background: var(--face); border-radius: 4cqw; padding: 4.5cqw 4.5cqw 4.5cqw 7cqw; }
.bubble p { font-size: 15px; line-height: 1.75; }
.bubble .tag { margin-top: 1.5cqw; font-size: 13px; color: var(--sub); }
.bubble .tag::before, .facts li::before, .where::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--rose); vertical-align: 2px; }

/* ---- 04 完全担当制と店長 ---- */
.sec-tanto { padding-top: 12cqw; }
.steps { margin-top: 6cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.steps li { position: relative; background: var(--paper); border-radius: 3cqw; padding: 7cqw 4cqw 4cqw; }
.steps .dot { position: absolute; top: -4cqw; left: 4cqw; width: clamp(34px, 9.5cqw, 44px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--rose); color: var(--ground); font-family: var(--mincho); font-weight: 600; font-size: clamp(17px, 4.8cqw, 22px); }
.steps h3 { font-family: var(--mincho); font-size: clamp(17px, 4.8cqw, 21px); }
.steps p { margin-top: 1cqw; font-size: 14px; line-height: 1.75; }
.steps { row-gap: 8cqw; padding-top: 3cqw; }
.manager { margin-top: 8cqw; display: grid; grid-template-columns: 38% 1fr; gap: 3cqw; align-items: start; }
.manager-photo { width: 100%; filter: drop-shadow(0 14px 16px rgba(92, 70, 58, .26)) drop-shadow(0 3px 4px rgba(92, 70, 58, .12)); }
.manager-talk { position: relative; background: var(--paper); border-radius: 4cqw; padding: 5cqw; }
.manager-talk .role { font-size: 13px; font-weight: 700; color: var(--rose); letter-spacing: .1em; }
.manager-talk .name { font-family: var(--mincho); font-size: clamp(20px, 5.6cqw, 26px); line-height: 1.3; }
.manager-talk p:last-child { margin-top: 2cqw; font-size: 14px; line-height: 1.8; }

/* ---- 05 スタイリスト ---- */
.sec-staff { padding-top: 13cqw; }
.staff { margin-top: 16cqw; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15cqw 5cqw; } /* 上と段のあいだは、写真の上にはみ出す手書きの年数のぶん広げる */
.staff li { position: relative; }
.staff .ph { aspect-ratio: 1 / 1.05; }
.staff .ph img { object-position: 50% 25%; }
.years { position: absolute; top: 0; left: var(--l); margin-top: var(--t); width: var(--w); height: auto; transform: rotate(7deg); transform-origin: 0% 60%; filter: drop-shadow(0 2px 2px rgba(92, 70, 58, .25)); pointer-events: none; } /* 右へ少し傾ける（書き出しの位置はそのまま） */
/* 経験年数の手書き文字（Codexが各ブロブの右上に沿わせて書いたもの）。位置はブロブの幅を100%として写す */
.y12 { --l: 56.4%; --t: -8.8%; --w: 52.4%; }
.y15 { --l: 50%; --t: -19%; --w: 52.6%; }
.y18 { --l: 55.1%; --t: -18.1%; --w: 52.7%; }
.staff .name { margin-top: 3cqw; font-family: var(--mincho); font-size: clamp(18px, 5cqw, 22px); line-height: 1.4; }
.staff .good { font-size: 13px; color: var(--sub); line-height: 1.6; }
.staff-msg { background: var(--face); border-radius: 4cqw; padding: 6cqw 3.5cqw; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.staff-msg p { font-family: var(--mincho); font-size: clamp(15px, 4.2cqw, 20px); line-height: 1.7; letter-spacing: .02em; }
.staff-msg .small { margin-top: 3cqw; font-family: var(--gothic); font-size: 13px; color: var(--sub); }

/* ---- 06 店内と設備 ---- */
.sec-interior { padding-top: 14cqw; }
.card-dark h2 { color: var(--ground); }
.interior { position: relative; margin-top: 6cqw; }
.interior img { border-radius: 3cqw; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: drop-shadow(0 14px 16px rgba(92, 70, 58, .26)) drop-shadow(0 3px 4px rgba(92, 70, 58, .12)); }
.pin, .pin-s { display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink); font-family: var(--mincho); font-weight: 600; }
.pin { position: absolute; width: clamp(28px, 8cqw, 40px); aspect-ratio: 1; transform: translate(-50%, -50%); font-size: clamp(15px, 4.4cqw, 20px); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.legend { margin-top: 6cqw; display: grid; gap: 4cqw; }
.legend li { display: grid; grid-template-columns: auto 1fr; gap: 3.5cqw; align-items: start; }
.pin-s { width: clamp(28px, 7.6cqw, 36px); aspect-ratio: 1; font-size: clamp(14px, 4cqw, 18px); }
.legend h3 { font-family: var(--mincho); font-size: clamp(17px, 4.8cqw, 21px); line-height: 1.4; }
.legend p { font-size: 14px; line-height: 1.75; opacity: .92; }
.where { margin-top: 6cqw; font-size: 14px; }

/* ---- 07 店内の雰囲気 ---- */
.sec-atmos { padding-top: 12cqw; }
.sec-atmos h2 { text-align: right; }
.atmos-main { position: relative; margin-top: 6cqw; aspect-ratio: 1.3 / 1; }
.atmos-row { margin-top: 5cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
.atmos-row div { aspect-ratio: 1 / 1.05; }
.atmos-fig { margin-top: 6cqw; }
.atmos-fig .atmos-main { margin-top: 0; }
.atmos-fig figcaption, .atmos-row p { margin-top: 2cqw; text-align: center; font-size: 13px; line-height: 1.5; } /* 4枚とも同じ、写真の下の名札 */
.closing { margin-top: 6cqw; text-align: center; font-family: var(--mincho); font-size: clamp(16px, 4.6cqw, 20px); line-height: 1.7; }

/* ---- 08 オリジナル商品 ---- */
.sec-products { padding-top: 12cqw; }
.products-photo { margin-top: 6cqw; aspect-ratio: 1.35 / 1; }
.products { margin-top: 6cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw 5cqw; }
.products li { border-top: 1px solid rgba(63, 59, 55, .18); padding-top: 3cqw; }
.products h3 { display: flex; align-items: baseline; font-family: var(--mincho); font-size: clamp(16px, 4.6cqw, 21px); line-height: 1.4; }
.products h3::before { content: ""; flex: none; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--rose); vertical-align: 3px; }
.products .size { font-size: 13px; color: var(--sub); }
.products p { font-size: 14px; line-height: 1.7; }
.products .price { margin-top: 1.5cqw; font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 5.8cqw, 26px); }

/* ---- 09 メニューと料金 ---- */
.sec-menu { padding-top: 13cqw; }
.price-table { width: 100%; margin-top: 6cqw; border-collapse: collapse; }
.price-table thead th { background: var(--ink); color: var(--ground); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-align: left; padding: 2.4cqw 3cqw; }
.price-table thead th:last-child { text-align: right; }
.price-table tbody th { text-align: left; font-family: var(--mincho); font-weight: 500; font-size: clamp(15px, 4.4cqw, 20px); word-break: keep-all; line-height: 1.45; padding: 3.5cqw 3cqw; }
.price-table tbody th span { display: block; margin-top: 1cqw; font-family: var(--gothic); font-size: 13px; color: var(--sub); line-height: 1.6; }
.price-table td { text-align: right; vertical-align: middle; white-space: nowrap; font-family: var(--mincho); font-weight: 600; font-size: clamp(18px, 5.4cqw, 24px); padding: 3.5cqw 3cqw; }
.price-table tbody tr { border-bottom: 1px solid rgba(63, 59, 55, .14); }
.price-table tr.hi { background: var(--face); }
.pay { margin-top: 6cqw; }
.pay h3 { font-family: var(--mincho); font-size: clamp(17px, 4.8cqw, 21px); }
.pay p { font-size: 14px; }
.coupon-card { position: relative; width: 92%; margin: 7cqw auto 0; --tk: url(images/coupon-a.webp); container-type: inline-size; } /* 券の中の文字は、券の幅に合わせて大きさが変わる */
.coupon-card img { width: 100%; filter: drop-shadow(0 8px 14px rgba(80, 60, 52, .2)); }
/* 券の文字（A案）：リボンの右から切り取り線までの真ん中に。「20%オフ」を大きく */
.cc-text, .pop-text { position: absolute; left: 22%; right: 17%; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.cc-kicker, .pop-kicker { font-size: clamp(13px, 3.6cqw, 15px); font-weight: 700; color: var(--rose); letter-spacing: .04em; line-height: 1.35; white-space: nowrap; margin-bottom: .3em; }
@container (max-width: 420px) { .coupon-card { width: 100%; } } /* 狭い画面では券を幅いっぱいにして、文字をリボンと切り取り線のあいだに収める */
.cc-main, .pop-main { font-family: var(--mincho); font-weight: 600; font-size: clamp(14px, 5cqw, 21px); line-height: 1.2; white-space: nowrap; }
.cc-main b, .pop-main b { display: block; color: var(--rose); font-weight: 600; font-size: clamp(19px, 7.2cqw, 32px); line-height: 1; margin-top: .12em; letter-spacing: .02em; }
.cc-main b .n, .pop-main b .n { font-size: 1.8em; letter-spacing: 0; }
/* 券の光（ボタンと同じ動き）：画面に入ったとき・ポップアップが開いたときに1回だけ */
.tk-shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--tk) center / 100% 100% no-repeat; mask: var(--tk) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, .75) 47%, rgba(255, 238, 248, .6) 50%, rgba(222, 248, 240, .5) 53%, transparent 59%) no-repeat;
  background-size: 260% 100%; background-position: 140% 0; }
.play > .tk-shine { animation: sweep 1.4s ease-out 1; }
.coupon-note { margin-top: 2cqw; text-align: center; font-size: 13px; color: var(--sub); }

/* ---- 10 よくある質問・予約の流れ ---- */
.sec-faq { padding-top: 12cqw; }
.faq { margin-top: 6cqw; display: grid; gap: 3cqw; }
.faq div { border-radius: 3cqw; padding: 4.5cqw 5cqw 4.5cqw 14cqw; position: relative; background: var(--paper); }
.faq div:nth-child(even) { background: var(--face); }
.faq dt { font-family: var(--mincho); font-size: clamp(16px, 4.6cqw, 20px); line-height: 1.5; }
.faq dt::before { content: "Q"; position: absolute; left: 5cqw; top: 3.4cqw; font-size: clamp(22px, 6.4cqw, 30px); color: var(--rose); }
.faq dd { margin-top: 1cqw; font-size: 14px; line-height: 1.75; }
.sub { margin-top: 9cqw; font-family: var(--mincho); font-size: clamp(20px, 5.8cqw, 27px); }
.flow { margin-top: 4cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; }
.flow li { background: var(--paper); border-radius: 3cqw; padding: 3cqw 1cqw; text-align: center; font-size: 13px; line-height: 1.5; }
.flow b { display: block; font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 6cqw, 28px); color: var(--rose); line-height: 1.3; }

/* ---- 11 アクセス ---- */
.sec-access { padding-top: 12cqw; }
.map { position: relative; margin-top: 6cqw; }
.map img { width: 100%; filter: drop-shadow(0 14px 16px rgba(92, 70, 58, .26)) drop-shadow(0 3px 4px rgba(92, 70, 58, .12)); }
.ml { position: absolute; font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1.2; white-space: nowrap; }
.ml-station { left: 6%; top: 88%; color: var(--ground); }
.ml-shop, .ml-walk { background: var(--paper); padding: .35em .75em; border-radius: 6px; box-shadow: 0 2px 6px rgba(63, 59, 55, .14); }
.ml-shop { left: 50%; top: 5%; color: var(--rose); }
.ml-walk { left: 60%; top: 50%; }
.route { position: relative; margin: 7cqw 0 0; display: grid; gap: 4cqw; }
.route::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.4cqw; transform: translateX(-50%); background: var(--face); border-radius: 1cqw; }
.route li { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3cqw; }
.route .dot { grid-column: 2; width: clamp(34px, 9cqw, 42px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--rose); color: var(--ground); font-family: var(--mincho); font-weight: 600; font-size: clamp(17px, 4.8cqw, 21px); z-index: 1; }
.route p { font-size: 14px; line-height: 1.6; }
.route li:nth-child(odd) p { grid-column: 3; grid-row: 1; }
.route li:nth-child(even) p { grid-column: 1; grid-row: 1; text-align: right; }
.info { margin-top: 8cqw; }
.info div { display: grid; grid-template-columns: 26% 1fr; gap: 3cqw; padding: 3cqw 0; border-bottom: 1px solid rgba(63, 59, 55, .14); }
.info dt { font-family: var(--mincho); font-size: 15px; }
.info dd { font-size: 15px; }

/* ---- 12 CTA ---- */
.sec-cta { padding-top: 13cqw; padding-bottom: 6cqw; }
.seam-6 { left: 1%; top: 5cqw; width: 46%; }
.cta-photo img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; object-position: 50% 20%; border-radius: 4cqw; filter: drop-shadow(0 14px 16px rgba(92, 70, 58, .26)) drop-shadow(0 3px 4px rgba(92, 70, 58, .12)); }
.cta-panel { position: relative; width: 90%; margin: -22cqw auto 0; background: rgba(246, 244, 240, .94); border-radius: 4cqw; padding: 6cqw 5cqw 6cqw; text-align: center; box-shadow: 0 6px 20px rgba(63, 59, 55, .12); }
.cta-logo { width: clamp(110px, 30cqw, 160px); margin: 0 auto; }
.cta-panel h2 { margin-top: 2cqw; font-size: clamp(22px, 6.2cqw, 32px); }
.facts { margin-top: 5cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; text-align: left; }
.facts li { background: var(--face); border-radius: 2.4cqw; padding: 2.6cqw 3cqw; font-size: 13px; line-height: 1.5; }
.btn-cta { width: min(96%, 460px); margin: 6cqw auto 0; }
.cta-note { margin-top: 3cqw; font-size: 13px; color: var(--sub); }

/* ---- フッター ---- */
.foot { padding: 8cqw 7% 130px; font-size: 13px; line-height: 1.8; color: var(--sub); }
.foot .copy { margin-top: 8px; letter-spacing: .08em; }
@media (min-width: 1240px) { .foot { padding-bottom: 40px; } }

/* ---- 登場（1回だけ） ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---- スマホの追従ボタン ---- */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); background: rgba(246, 244, 240, .94); box-shadow: 0 -4px 14px rgba(63, 59, 55, .08); }
.sticky[hidden] { display: none; }
.btn-sticky { width: min(80vw, 360px); margin: 0 auto; }
.btn-sticky .label, .btn-pop .label { font-size: 15px; }
@media (min-width: 1240px) { .sticky { display: none !important; } }
/* 右の帯が狭い画面幅（帯が340px未満）では、帯のボタンを出さず、下の追従ボタンにまかせる */
@media (max-width: 1239px) { .band-cta { display: none; } }
.btn-band .label { font-size: clamp(15px, 1.3vw, 19px); }

/* ---- クーポンのポップアップ ---- */
.pop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.pop[hidden] { display: none; }
.pop-bg { position: absolute; inset: 0; background: rgba(63, 59, 55, .5); }
.pop-card { position: relative; width: min(88vw, 440px); text-align: center; animation: pop-in .35s ease both; }
.pop-ticket { position: relative; --tk: url(images/coupon-a.webp); container-type: inline-size; }
.pop-ticket img { width: 100%; filter: drop-shadow(0 12px 22px rgba(30, 24, 20, .3)); }
.pop-note { margin-top: 14px; font-size: 14px; color: var(--paper); }
.btn-pop { width: min(84%, 340px); margin: 14px auto 0; }
.pop-close { position: absolute; right: 0; top: -58px; min-width: 88px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--paper); color: var(--ink); font: 700 14px var(--gothic); letter-spacing: .08em; cursor: pointer; }
.pop-close:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---- お知らせ ---- */
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 120; width: max-content; max-width: 88vw; padding: 12px 18px; border-radius: 10px; background: var(--ink); color: var(--ground); font-size: 14px; line-height: 1.6; text-align: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.toast[hidden] { display: none; }

.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .pop-card { animation: none; }
  .btn .face { transition: none; }
  .btn .shine, .tk-shine { animation: none !important; }
}

/* とても狭い画面（320px前後）でも、ボタンの文字を札の中に収める */
@media (max-width: 359px) {
  .btn .label { letter-spacing: 0; left: 3%; right: 18%; }
  .btn-cta .label { left: 2%; right: 15.5%; } /* とても狭い画面：申し込みのボタンの文字を、切り取り線の手前いっぱいまで使う */
  .btn-cta { width: 100%; }
}