/* 犬と暮らしの教室 あいことば（架空）— Web工房Pono 自主制作。テーマ：合図のことば帳と、散歩道の点線
   色はすべて :root にまとめる（メイン・アクセント・背景・文字・線）。テンプレートの色替えはここだけ触ればよい */
:root {
  /* メイン：デニム */
  --main: #34588F; --main-d: #22406B; --main-l: #E2E9F3;
  /* アクセント：タンジェリン（ボールとリードの色） */
  --accent: #F0863A; --accent-d: #C9621A; --accent-l: #FDEADB;
  /* 背景：生成りの紙 */
  --bg: #F6F2EA; --paper: #FFFCF6; --bg2: #ECE5D8; --white: #FFFFFF;
  /* 文字 */
  --ink: #1E2433; --sub: #565D70; --mute: #8B91A0;
  /* 線 */
  --line: rgba(30,36,51,.13); --line2: rgba(30,36,51,.24);
  --ok: #3A8A58; --err: #C2452D; --err-l: #FBECE8;
  /* 書体 */
  --en: "Fredoka", "Noto Sans JP", sans-serif; --jp: "Noto Sans JP", "Hiragino Sans", sans-serif; --hand: "Yusei Magic", "Noto Sans JP", sans-serif;
  /* 形：一か所だけ角を残した「名札」の角丸 */
  --r: 28px; --r-s: 16px; --tag: 28px 28px 28px 6px; --tag-s: 16px 16px 16px 4px;
  --ease: cubic-bezier(.22,.7,.2,1); --hh: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--jp); font-size: 16px; line-height: 1.95; letter-spacing: .03em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.45; letter-spacing: .03em; word-break: auto-phrase; text-wrap: balance; }
p { margin: 0; } ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; list-style: none; border: 0; }
legend { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.narrow { max-width: 860px; }
.center { text-align: center; margin-top: 40px; }
.hand { font-family: var(--hand); color: var(--accent-d); font-size: 19px; line-height: 1.5; letter-spacing: .04em; }
.paw { width: 1em; height: 1em; fill: currentColor; flex: none; }
.arw { width: 20px; height: 20px; flex: none; transition: transform .35s var(--ease); }
.demo-bar { background: var(--ink); color: rgba(255,255,255,.85); font-size: 12px; text-align: center; padding: 7px 14px; line-height: 1.6; position: relative; z-index: 70; }
.demo-bar a { text-decoration: underline; margin-left: 6px; }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 28px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 16px; letter-spacing: .06em; line-height: 1.4; text-align: center; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.btn:hover .arw, .more:hover .arw { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn--main { background: var(--main); color: #fff; } .btn--main:hover { background: var(--main-d); }
.btn--accent { background: var(--accent); color: #fff; } .btn--accent:hover { background: var(--accent-d); }
.btn--line { border-color: var(--ink); background: transparent; } .btn--line:hover { background: var(--ink); color: #fff; }
.btn--wline { border-color: rgba(255,255,255,.75); color: #fff; } .btn--wline:hover { background: #fff; color: var(--main-d); }
.btn--s { min-height: 46px; padding: 0 20px; font-size: 14.5px; }
.btn--full { width: 100%; }
.btn:disabled { opacity: .38; cursor: default; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--main); border-bottom: 2px solid currentColor; padding-bottom: 2px; }

/* ヘッダー */
.hd { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px; height: var(--hh); padding: 0 28px; background: rgba(246,242,234,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .3s; }
.hd.is-sc { box-shadow: 0 1px 0 var(--line); }
.lg { display: flex; align-items: center; gap: 10px; color: var(--main); }
.lg__m { width: 44px; height: 44px; flex: none; }
.lg span { display: flex; flex-direction: column; line-height: 1.15; color: var(--ink); }
.lg small { font-size: 11px; letter-spacing: .14em; color: var(--sub); font-weight: 500; }
.lg b { font-family: var(--hand); font-weight: 400; font-size: 25px; letter-spacing: .12em; }
.lg--w, .lg--w span, .lg--w small { color: #fff; }
.hd__nav { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; font-weight: 500; }
.hd__nav a { position: relative; padding: 6px 0; }
.hd__nav a::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateX(-50%) scale(0); transition: transform .3s var(--ease); }
.hd__nav a:hover::after, .hd__nav a.is-cur::after { transform: translateX(-50%) scale(1); }
.hd__tel { display: flex; flex-direction: column; font-family: var(--en); font-weight: 600; font-size: 18px; line-height: 1.1; letter-spacing: .04em; }
.hd__tel small { font-family: var(--jp); font-size: 10.5px; color: var(--sub); font-weight: 500; letter-spacing: .1em; }
.mb { display: none; }
.dr { display: none; }

/* セクション */
.sec { padding: 112px 0; position: relative; }
.sec--t { padding-top: 56px; }
.sec--paper { background: var(--paper); }
.sec--blue { background: var(--main); color: #fff; }
.st { margin-bottom: 44px; max-width: 720px; }
.st__en { display: inline-flex; align-items: center; gap: 8px; font-family: var(--en); font-weight: 600; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-d); margin-bottom: 10px; }
.st h2 { font-size: clamp(27px, 4.2vw, 40px); }
.st__l { margin-top: 14px; color: var(--sub); }
.st__h { margin-top: 10px; transform: rotate(-2deg); transform-origin: left; display: inline-block; }
.st--w .st__en { color: #FFD3B0; } .st--w .st__l { color: rgba(255,255,255,.82); }

/* 出現 */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.is-shot .rv { transition: none; }

/* ヒーロー */
.hero { padding: 36px 0 0; overflow: hidden; }
.hero__in { display: grid; grid-template-columns: 1fr 1.18fr; gap: 56px; align-items: center; }
.hero__lb { display: inline-flex; align-items: center; gap: 8px; font-family: var(--en); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--main); font-size: 14px; background: var(--main-l); padding: 6px 16px; border-radius: 999px; }
.hero__t { margin: 22px 0 22px; font-size: clamp(34px, 3.7vw, 52px); line-height: 1.35; letter-spacing: .02em; }
.hero__t { position: relative; z-index: 0; }
.hero__t span { display: block; white-space: nowrap; }
.hero__t em { font-style: normal; font-family: var(--hand); font-weight: 400; color: var(--main); position: relative; white-space: nowrap; }
.hero__t em::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .32em; background: var(--accent); opacity: .35; border-radius: 6px; z-index: -1; transform: skewX(-8deg); }
.hero__d { color: var(--sub); font-size: 16.5px; max-width: 30em; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__ph { position: relative; padding: 28px 0 40px 20px; }
.hero__img { border-radius: 44px 44px 44px 8px; overflow: hidden; aspect-ratio: 5 / 4; background: var(--bg2); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.bub { position: absolute; font-family: var(--hand); font-size: 20px; background: var(--paper); color: var(--ink); padding: 8px 18px; border-radius: 18px; box-shadow: 0 10px 24px rgba(30,36,51,.12); animation: float 5s ease-in-out infinite; white-space: nowrap; }
.bub::after { content: ""; position: absolute; bottom: -8px; width: 16px; height: 12px; background: inherit; clip-path: polygon(0 0, 100% 0, 30% 100%); }
.b1 { top: 6px; left: 0; } .b1::after { left: 22px; }
.b2 { top: 34%; right: -8px; animation-delay: -1.6s; background: var(--main); color: #fff; } .b2::after { right: 22px; clip-path: polygon(0 0, 100% 0, 70% 100%); }
.b3 { bottom: 64px; left: 4px; animation-delay: -3.2s; background: var(--accent); color: #fff; } .b3::after { left: 22px; }
@keyframes float { 50% { transform: translateY(-8px); } }
.hero__badge { position: absolute; right: 22px; bottom: 0; width: 132px; height: 132px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; text-align: center; }
.hero__badge small { font-size: 11.5px; letter-spacing: .08em; }
.hero__badge b { font-family: var(--en); font-size: 40px; font-weight: 600; }
.hero__badge b em { font-style: normal; font-size: 15px; font-family: var(--jp); margin-left: 2px; }
.hero__badge span { font-family: var(--en); font-weight: 600; font-size: 17px; color: #FFC79C; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 2px dashed var(--line2); }
.facts li { padding: 22px 12px; display: flex; flex-direction: column; text-align: center; line-height: 1.5; }
.facts li + li { border-left: 2px dashed var(--line2); }
.facts b { font-size: 20px; color: var(--main); }
.facts span { font-size: 13px; color: var(--sub); }

/* 困りごと */
.pbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pb { display: flex; align-items: center; gap: 12px; padding: 18px 18px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--tag-s); font-weight: 700; font-size: 15.5px; line-height: 1.5; transition: border-color .3s, background .3s, transform .3s var(--ease); }
.pb .ico { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--main-l); color: var(--main); flex: none; }
.pb span { flex: 1; }
.pb .arw { color: var(--accent-d); width: 18px; }
.pb:hover { border-color: var(--main); transform: translateY(-3px); }
.pb:hover .arw { transform: translateX(3px); }

/* 3つの約束 */
.way__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: center; }
.way__img { position: relative; }
.way__img img { border-radius: var(--tag); aspect-ratio: 2 / 3; object-fit: cover; width: 100%; max-height: 640px; }
.way__cap { position: absolute; left: -10px; bottom: 28px; background: var(--paper); padding: 8px 18px; border-radius: 14px; transform: rotate(-3deg); box-shadow: 0 8px 20px rgba(30,36,51,.1); }
.way__l li { display: flex; gap: 22px; padding: 26px 0; border-top: 2px dashed var(--line2); }
.way__l li:last-child { border-bottom: 2px dashed var(--line2); }
.way__l b { font-family: var(--en); font-weight: 600; font-size: 30px; color: var(--accent); line-height: 1.1; }
.way__l h3 { font-size: 20px; margin-bottom: 6px; }
.way__l p { color: var(--sub); }

/* あいことば帳（めくれるカード） */
.cue-row { overflow-x: auto; scrollbar-width: none; cursor: grab; padding: 6px 0 24px; }
.cue-row::-webkit-scrollbar { display: none; }
.cue-row.is-drag { cursor: grabbing; }
.cue-row__in { display: flex; gap: 18px; width: max-content; padding: 0 max(20px, calc((100vw - 1160px) / 2)); }
.cue-c { position: relative; width: 236px; height: 300px; padding: 0; border: 0; background: none; perspective: 900px; text-align: left; flex: none; }
.cue-c > span { position: absolute; inset: 0; border-radius: var(--tag); padding: 24px 22px; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s var(--ease); }
.cue-c__f { background: var(--paper); border: 1.5px solid var(--line); background-image: radial-gradient(var(--line) 1.2px, transparent 1.2px); background-size: 16px 16px; }
.cue-c__f em { font-style: normal; font-family: var(--en); font-weight: 600; font-size: 13px; letter-spacing: .2em; color: var(--accent-d); }
.cue-c__f b { font-family: var(--hand); font-weight: 400; font-size: 40px; color: var(--main); margin: auto 0; line-height: 1.2; }
.cue-c__f small { font-size: 13px; color: var(--sub); line-height: 1.6; }
.cue-c i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--mute); margin-top: 12px; letter-spacing: .1em; }
.cue-c__f i::before { content: "↻ "; }
.cue-c__b { background: var(--main); color: #fff; transform: rotateY(180deg); }
.cue-c__b b { font-family: var(--hand); font-weight: 400; font-size: 24px; margin-bottom: 10px; }
.cue-c__b span { font-size: 14.5px; line-height: 1.85; }
.cue-c__b i { color: rgba(255,255,255,.6); margin-top: auto; }
.cue-c[aria-pressed="true"] .cue-c__f { transform: rotateY(-180deg); }
.cue-c[aria-pressed="true"] .cue-c__b { transform: rotateY(0); }

/* コース（トップ） */
.crss { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.crss > .crs { grid-column: span 2; }
.crss > .crs:nth-child(n+4) { grid-column: span 3; }
.crss > .crs:nth-child(n+4) .crs__img { aspect-ratio: 16 / 7; }
.crs { background: var(--paper); color: var(--ink); border-radius: var(--tag); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease); }
.crs:hover { transform: translateY(-4px); }
.crs__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg2); }
.crs__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.crs:hover .crs__img img { transform: scale(1.04); }
.crs__k { position: absolute; left: 14px; top: 14px; background: var(--paper); color: var(--main); font-size: 12.5px; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.crs__b { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.crs__en { font-family: var(--en); font-weight: 600; font-size: 13px; letter-spacing: .18em; color: var(--accent-d); }
.crs__b h3 { font-size: 21px; }
.crs__l { color: var(--sub); font-size: 14.5px; margin-top: 4px; }
.crs__m { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.crs__m span { font-size: 12.5px; background: var(--bg); padding: 2px 10px; border-radius: 6px; }
.crs__p { margin-top: auto; font-weight: 800; color: var(--main); font-size: 17px; }

/* 流れ */
.flow__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.flow .st { position: sticky; top: 110px; }
.fl { position: relative; }
.fl::before { content: ""; position: absolute; left: 25px; top: 20px; bottom: 30px; border-left: 3px dotted var(--accent); }
.fl li { position: relative; display: flex; gap: 22px; padding-bottom: 34px; }
.fl__n { width: 52px; height: 52px; border-radius: 50%; background: var(--paper); border: 2px solid var(--main); color: var(--main); font-family: var(--en); font-weight: 600; font-size: 22px; display: grid; place-items: center; flex: none; position: relative; }
.fl h3 { font-size: 19px; margin: 10px 0 4px; }
.fl p { color: var(--sub); }

/* 教室（トップ） */
.room__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.room__img img { border-radius: var(--tag); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.room__t .st { margin-bottom: 20px; }
.room__t p { color: var(--sub); margin-bottom: 24px; }

/* CTA帯 */
.ctab { background: var(--ink); color: #fff; padding: 88px 0; position: relative; overflow: hidden; }
.ctab::before { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 3px dotted rgba(240,134,58,.6); }
.ctab__in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; position: relative; }
.ctab__h { color: #FFC79C; margin-bottom: 6px; }
.ctab h2 { font-size: clamp(26px, 3.6vw, 36px); }
.ctab h2 span { display: inline-block; margin-left: 14px; font-family: var(--en); color: #FFC79C; font-weight: 600; }
.ctab p:last-child { color: rgba(255,255,255,.75); margin-top: 10px; }
.ctab__btns { display: flex; flex-direction: column; gap: 12px; }

/* ページ見出し */
.ph { position: relative; padding: 48px 0 64px; overflow: hidden; }
.ph h1 { font-size: clamp(30px, 5vw, 48px); }
.ph__l { margin-top: 12px; color: var(--sub); max-width: 40em; }
.ph__h { margin-top: 10px; transform: rotate(-2deg); display: inline-block; transform-origin: left; }
.ph__path { position: absolute; left: 0; right: 0; bottom: 6px; width: 100%; height: 44px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; opacity: .6; }
.crumb { display: flex; gap: 8px; font-size: 13px; color: var(--mute); margin-bottom: 26px; }
.crumb a { color: var(--sub); text-decoration: underline; }

/* 診断 */
.qz-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: start; }
.qz { background: var(--paper); border-radius: var(--tag); padding: 32px 36px 40px; border: 1.5px solid var(--line); min-height: 520px; }
.qz__top { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.qz__back { border: 0; background: var(--bg); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 700; }
.qz__bar { flex: 1; height: 8px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.qz__bar i { display: block; height: 100%; width: 20%; background: var(--accent); border-radius: 99px; transition: width .5s var(--ease); }
.qz__n { font-family: var(--en); font-weight: 600; color: var(--sub); white-space: nowrap; }
.qz__n b { color: var(--ink); font-size: 20px; }
.qz__q, .qz__res { display: none; }
.qz__q.is-on, .qz__res.is-on { display: block; animation: qin .5s var(--ease); }
@keyframes qin { from { opacity: 0; transform: translateX(16px); } }
.qz__qn { font-family: var(--en); font-weight: 700; color: var(--accent); font-size: 18px; }
.qz__q h2 { font-size: clamp(22px, 3vw, 28px); }
.qz__hint { color: var(--sub); font-size: 14px; }
.qz__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.qz__opts--m { grid-template-columns: repeat(3, 1fr); }
.qo { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 64px; padding: 14px 16px; background: var(--white); border: 2px solid var(--line); border-radius: var(--tag-s); font-weight: 700; line-height: 1.45; transition: border-color .25s, background .25s; }
.qo span { display: flex; flex-direction: column; }
.qo small { font-weight: 400; font-size: 12.5px; color: var(--sub); }
.qo .ico { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--main-l); color: var(--main); flex: none; }
.qo:hover { border-color: var(--main); }
.qo[aria-pressed="true"] { border-color: var(--main); background: var(--main-l); }
.qo[aria-pressed="true"] .ico { background: var(--main); color: #fff; }
.qz__next { margin-top: 24px; }
.qz-side img { border-radius: var(--tag); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.qz-side p { font-size: 14px; color: var(--sub); margin-top: 14px; }
/* 診断の結果 */
.res__lb { font-family: var(--hand); color: var(--accent-d); font-size: 20px; }
.res__main { display: grid; grid-template-columns: 220px 1fr; gap: 22px; margin: 14px 0 22px; padding: 18px; background: var(--main-l); border-radius: var(--tag-s); align-items: center; }
.res__main img { border-radius: 12px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.res__main h2 { font-size: 28px; color: var(--main-d); }
.res__meta { font-size: 13.5px; color: var(--sub); }
.res__price { font-weight: 800; color: var(--main); margin-top: 4px; }
.res__why { margin: 0 0 22px; }
.res__why li, .res__pr li { position: relative; padding-left: 24px; margin-top: 6px; }
.res__why li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.res__pr { background: var(--bg); border-radius: var(--tag-s); padding: 20px 22px; }
.res__pr h3 { font-size: 17px; margin-bottom: 4px; }
.res__pr li b { display: block; font-size: 14.5px; }
.res__pr li span { font-size: 14px; color: var(--sub); }
.res__pr li::before { content: "✓"; position: absolute; left: 0; color: var(--main); font-weight: 800; }
.res__alt { margin-top: 18px; font-size: 14.5px; }
.res__alt a { color: var(--main); font-weight: 700; text-decoration: underline; }
.res__note { font-size: 13px; color: var(--sub); margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--accent-l); border-radius: 0 10px 10px 0; }
.res__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.res__again { margin-top: 14px; border: 0; background: none; color: var(--sub); text-decoration: underline; font-size: 14px; }

/* コース詳細 */
.jump { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { padding: 8px 16px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--line); font-size: 14px; font-weight: 700; }
.jump a.is-calc { background: var(--accent); color: #fff; border-color: var(--accent); }
.cds { display: flex; flex-direction: column; gap: 88px; }
.cd { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; scroll-margin-top: 96px; }
.cd--r .cd__img { order: 2; }
.cd__img { position: relative; position: sticky; top: 100px; }
.cd__img img { border-radius: var(--tag); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.cd__b h2 { font-size: clamp(26px, 3.2vw, 34px); }
.cd__lead { font-family: var(--hand); color: var(--main); font-size: 20px; margin: 4px 0 12px; }
.cd__b > p { color: var(--sub); }
.cd__spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; }
.cd__spec div { background: var(--paper); border-radius: 12px; padding: 10px 14px; }
.cd__spec dt { font-size: 12px; color: var(--mute); font-weight: 700; }
.cd__spec dd { font-weight: 700; font-size: 14.5px; line-height: 1.5; }
.cd__spec--v { grid-template-columns: 1fr; }
.cd__spec--v div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; }
.cd__spec--v dd { font-weight: 500; }
.cd__lt { font-weight: 800; font-size: 14px; color: var(--accent-d); }
.cd__learn { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 6px 0 22px; }
.cd__learn li { position: relative; padding-left: 22px; font-size: 14.5px; }
.cd__learn li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 11px; height: 11px; border: 2px solid var(--accent); border-radius: 50%; }
.pt { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: 14px; overflow: hidden; }
.pt caption { text-align: left; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.pt th, .pt td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14.5px; }
.pt tr:last-child th, .pt tr:last-child td { border-bottom: 0; }
.pt td b { font-family: var(--en); font-weight: 600; font-size: 22px; color: var(--main); }
.pt td:last-child { color: var(--sub); font-size: 13px; text-align: right; }
.cd__note { font-size: 13.5px; color: var(--sub); margin-top: 12px; }
.cd__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }

/* 月謝の計算 */
.calc { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; color: var(--ink); }
.calc__f { background: var(--paper); border-radius: var(--tag); padding: 28px 30px; display: flex; flex-direction: column; gap: 26px; }
.calc__f legend, .lbl { display: flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 12px; font-size: 16px; }
.calc__f legend b { width: 28px; height: 28px; border-radius: 50%; background: var(--main); color: #fff; display: grid; place-items: center; font-family: var(--en); font-size: 15px; }
.cps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp input, .seg input, .ck input, .tg input { position: absolute; opacity: 0; pointer-events: none; }
.cp { position: relative; }
.cp span { display: flex; flex-direction: column; padding: 12px 16px 12px 44px; border: 2px solid var(--line); border-radius: var(--tag-s); background: var(--white); line-height: 1.45; cursor: pointer; transition: border-color .25s, background .25s; height: 100%; }
.cp span::before { content: ""; position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--line2); background: #fff; transition: .25s; }
.cp b { font-size: 15.5px; } .cp small { font-size: 12.5px; color: var(--sub); }
.cp input:checked + span { border-color: var(--main); background: var(--main-l); }
.cp input:checked + span::before { border: 6px solid var(--main); }
.cp input:focus-visible + span, .seg input:focus-visible + span, .ck input:focus-visible + span, .tg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { flex: 1; min-width: 96px; position: relative; }
.seg span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 6px 10px; border: 2px solid var(--line); border-radius: 14px; background: var(--white); font-weight: 700; text-align: center; line-height: 1.3; cursor: pointer; transition: .25s; }
.seg small { font-weight: 400; font-size: 11.5px; color: var(--sub); }
.seg input:checked + span { border-color: var(--main); background: var(--main); color: #fff; }
.seg input:checked + span small { color: rgba(255,255,255,.8); }
.hint { font-size: 13px; color: var(--sub); margin-top: 8px; }
.sel { width: 100%; min-height: 52px; padding: 0 40px 0 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565D70' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; appearance: none; -webkit-appearance: none; font-size: 16px; }
.cks { display: flex; flex-direction: column; gap: 8px; }
.ck { position: relative; display: block; }
.ck span { display: block; padding: 12px 14px 12px 46px; border: 2px solid var(--line); border-radius: 14px; background: var(--white); cursor: pointer; line-height: 1.55; font-size: 14.5px; transition: .25s; }
.ck span::before { content: ""; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line2); background: #fff; transition: .25s; }
.ck span::after { content: ""; position: absolute; left: 21px; top: 17px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); opacity: 0; }
.ck em { display: block; font-style: normal; font-weight: 700; color: var(--main); font-size: 13.5px; }
.ck input:checked + span { border-color: var(--main); background: var(--main-l); }
.ck input:checked + span::before { background: var(--main); border-color: var(--main); }
.ck input:checked + span::after { opacity: 1; }
.ck.is-off { opacity: .4; pointer-events: none; }
.ck--req em { color: var(--sub); font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.ck.is-err span { border-color: var(--err); background: var(--err-l); }
.calc__r { position: sticky; top: 96px; background: var(--paper); border-radius: var(--tag); padding: 28px 28px 26px; box-shadow: 0 20px 40px rgba(20,30,60,.22); }
.calc__rt { font-weight: 800; } .calc__rt small { font-weight: 500; color: var(--sub); font-size: 13px; }
.calc__big { display: flex; align-items: baseline; gap: 4px; color: var(--main); line-height: 1.1; margin-top: 6px; }
.calc__big b { font-family: var(--en); font-weight: 600; font-size: 54px; letter-spacing: 0; }
.calc__big span { font-weight: 800; font-size: 18px; }
.calc__per { font-size: 14px; color: var(--sub); }
.calc__per b { color: var(--ink); font-family: var(--en); font-weight: 600; font-size: 17px; }
.calc__dl { margin: 16px 0; border-top: 2px dashed var(--line2); padding-top: 12px; }
.calc__dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 4px 0; }
.calc__dl dt { color: var(--sub); } .calc__dl dd { font-weight: 700; white-space: nowrap; }
.calc__first { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--accent-l); border-radius: 14px; padding: 14px 16px; }
.calc__first p:first-child { font-weight: 800; line-height: 1.4; } .calc__first small { display: block; font-weight: 400; font-size: 11.5px; color: var(--sub); }
.calc__first p:last-child { white-space: nowrap; }
.calc__first b { font-family: var(--en); font-weight: 600; font-size: 26px; color: var(--accent-d); }
.calc__note { font-size: 12px; color: var(--sub); margin: 14px 0 16px; line-height: 1.7; }

/* きまり・FAQ */
.rules__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rule { background: var(--paper); border-radius: var(--tag-s); padding: 22px; border-top: 4px solid var(--accent); }
.rule h3 { font-size: 17px; margin-bottom: 8px; }
.rule p { font-size: 14.5px; color: var(--sub); }
.fqs { display: flex; flex-direction: column; gap: 10px; }
.fq { background: var(--white); border-radius: var(--tag-s); border: 1.5px solid var(--line); }
.fq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 54px; font-weight: 700; position: relative; line-height: 1.6; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary::before { content: "Q"; position: absolute; left: 18px; top: 16px; font-family: var(--en); font-weight: 700; color: var(--accent); font-size: 20px; }
.fq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border: solid var(--main); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .3s; }
.fq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.fq p { padding: 0 24px 20px 54px; color: var(--sub); font-size: 15px; }

/* 体験予約 */
.tr { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.bk { background: var(--paper); border-radius: var(--tag); padding: 30px 34px 36px; border: 1.5px solid var(--line); scroll-margin-top: 90px; }
.bk__prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 28px; counter-reset: s; }
.bk__prog li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--mute); position: relative; }
.bk__prog li::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; border-top: 2px dotted var(--line2); z-index: 0; }
.bk__prog li:first-child::before { display: none; }
.bk__prog b { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); color: var(--sub); font-family: var(--en); font-weight: 600; }
.bk__prog li.is-on { color: var(--main); } .bk__prog li.is-on b { background: var(--main); color: #fff; }
.bk__prog li.is-on::before { border-color: var(--main); border-top-style: solid; }
.bk__from { background: var(--accent-l); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-bottom: 18px; }
.bk__p { display: none; flex-direction: column; gap: 18px; }
.bk__p.is-on { display: flex; animation: qin .45s var(--ease); }
.bk .lbl { margin: 6px 0 -6px; }
.lbl--row { justify-content: space-between; flex-wrap: wrap; }
.cps--t { grid-template-columns: repeat(3, 1fr); }
.cp--s span { padding: 10px 12px 10px 40px; } .cp--s span::before { left: 13px; }
.cal__lg { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--sub); }
.cal__lg i { width: 10px; height: 10px; border-radius: 50%; margin-left: 6px; }
.cal__lg .o { background: var(--main); } .cal__lg .t { background: var(--accent); } .cal__lg .x { background: var(--bg2); border: 1px solid var(--line2); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__m { grid-column: 1 / -1; font-weight: 800; font-size: 14px; color: var(--sub); }
.cal__w { text-align: center; font-size: 12px; color: var(--mute); font-weight: 700; }
.cal__d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 62px; border: 2px solid var(--line); border-radius: 14px; background: var(--white); line-height: 1.2; padding: 4px 0; transition: .2s; }
.cal__d b { font-family: var(--en); font-weight: 600; font-size: 18px; }
.cal__d small { font-size: 10.5px; color: var(--sub); }
.cal__d i { width: 8px; height: 8px; border-radius: 50%; background: var(--main); }
.cal__d.t i { background: var(--accent); }
.cal__d:disabled { background: var(--bg); color: var(--mute); cursor: default; border-color: transparent; }
.cal__d:disabled i { background: var(--bg2); }
.cal__d.sat b { color: var(--main); } .cal__d.sun b { color: var(--err); }
.cal__d:not(:disabled):hover { border-color: var(--main); }
.cal__d.is-on { background: var(--main); border-color: var(--main); color: #fff; }
.cal__d.is-on b, .cal__d.is-on small { color: #fff; } .cal__d.is-on i { background: #fff; }
.cal__pad { visibility: hidden; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.slots__e { grid-column: 1 / -1; font-size: 14px; color: var(--mute); padding: 18px; text-align: center; background: var(--bg); border-radius: 14px; }
.slot { display: flex; flex-direction: column; align-items: center; min-height: 58px; justify-content: center; border: 2px solid var(--line); border-radius: 14px; background: var(--white); line-height: 1.3; transition: .2s; }
.slot b { font-family: var(--en); font-weight: 600; font-size: 18px; }
.slot small { font-size: 11.5px; color: var(--sub); }
.slot.t small { color: var(--accent-d); font-weight: 700; }
.slot:disabled { background: var(--bg); color: var(--mute); border-color: transparent; cursor: default; text-decoration: line-through; }
.slot:not(:disabled):hover { border-color: var(--main); }
.slot.is-on { background: var(--main); border-color: var(--main); color: #fff; } .slot.is-on small { color: #fff; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fl-l { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14.5px; }
.fl-l input, .fl-l textarea { width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--white); font-size: 16px; font-weight: 400; }
.fl-l textarea { resize: vertical; line-height: 1.7; }
.fl-l input:focus, .fl-l textarea:focus, .sel:focus { outline: none; border-color: var(--main); }
.is-err, .fl-l .is-err, .sel.is-err { border-color: var(--err) !important; background-color: var(--err-l) !important; }
.tgs { display: flex; flex-wrap: wrap; gap: 8px; }
.tg { position: relative; }
.tg span { display: inline-flex; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--white); font-size: 14px; font-weight: 700; cursor: pointer; transition: .2s; }
.tg input:checked + span { background: var(--main); border-color: var(--main); color: #fff; }
.bk__err { color: var(--err); font-weight: 700; font-size: 14px; background: var(--err-l); padding: 10px 14px; border-radius: 12px; }
.bk__warn { color: var(--accent-d); font-weight: 700; font-size: 14px; background: var(--accent-l); padding: 10px 14px; border-radius: 12px; }
.bk__nav { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; margin-top: 6px; }
.bk__area { display: flex; flex-direction: column; }
.conf { border-radius: 16px; overflow: hidden; border: 1.5px solid var(--line); background: var(--white); }
.conf div { display: grid; grid-template-columns: 8em 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.conf div:last-child { border-bottom: 0; }
.conf dt { color: var(--sub); font-weight: 700; }
.conf dd { word-break: break-word; }
.tr__side { position: sticky; top: 96px; }
.side { background: var(--main); color: #fff; border-radius: var(--tag); padding: 26px 26px 28px; }
.side h2 { font-size: 20px; margin-bottom: 10px; }
.side h3 { font-size: 15px; margin: 18px 0 6px; color: #FFD3B0; }
.side__dl div { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.25); font-size: 14px; line-height: 1.6; }
.side__dl dt { color: rgba(255,255,255,.7); }
.side__ul li, .side__ol li { font-size: 14px; padding-left: 20px; position: relative; line-height: 1.7; margin-top: 4px; }
.side__ul li::before { content: ""; position: absolute; left: 4px; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.side__ol { counter-reset: o; }
.side__ol li { counter-increment: o; }
.side__ol li::before { content: counter(o); position: absolute; left: 0; font-family: var(--en); font-weight: 600; color: #FFD3B0; }

/* 教室について */
.msg { display: grid; grid-template-columns: .75fr 1.25fr; gap: 64px; align-items: start; }
.msg__img img { border-radius: var(--tag); aspect-ratio: 2 / 3; object-fit: cover; width: 100%; }
.msg__h { font-size: 22px; }
.msg__t h2 { font-size: clamp(24px, 3vw, 32px); margin: 6px 0 22px; }
.msg__t > p { color: var(--sub); margin-bottom: 16px; }
.sign { font-weight: 700; color: var(--ink) !important; text-align: right; }
.prof { margin-top: 26px; border-top: 2px dashed var(--line2); }
.prof div { display: grid; grid-template-columns: 8em 1fr; gap: 12px; padding: 10px 0; border-bottom: 2px dashed var(--line2); font-size: 14.5px; }
.prof dt { font-weight: 700; color: var(--main); }
.fac { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.fac__img img { border-radius: var(--tag); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.fac__l { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fac__l li { background: var(--bg); border-radius: var(--tag-s); padding: 18px 18px; }
.fac__l h3 { font-size: 15.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.fac__l h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.fac__l p { font-size: 13.5px; color: var(--sub); line-height: 1.75; }
.acc { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.map { position: relative; border-radius: var(--tag); overflow: hidden; background: #EFEADF; }
.map svg { width: 100%; height: auto; }
.m-bg { fill: #EFEADF; } .m-park { fill: #D7E4C8; } .m-river { fill: none; stroke: #A9C6E3; stroke-width: 16; }
.m-rail { stroke: var(--main); stroke-width: 4; stroke-dasharray: 14 8; } .m-road { stroke: #fff; stroke-width: 10; fill: none; }
.m-st { fill: #fff; stroke: var(--main); stroke-width: 4; } .m-walk { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.m-pin path { fill: var(--accent); } .m-pin circle { fill: #fff; }
.map__l { position: absolute; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.92); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.l1 { left: 31%; top: 25%; } .l2 { right: 6%; top: 14%; } .l3 { left: 6%; bottom: 25%; } .l4 { left: 52%; top: 46%; background: var(--accent); color: #fff; }
.map__n { position: absolute; right: 10px; bottom: 6px; font-size: 11px; color: var(--sub); }
.reg { border-radius: 16px; overflow: hidden; }
.reg div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; }
.reg--big { background: var(--white); border: 1.5px solid var(--line); margin-bottom: 14px; }
.reg--big div { padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.reg--big div:last-child { border-bottom: 0; }
.reg--big dt { font-weight: 700; color: var(--main); }

/* フッター */
.ft { background: var(--main-d); color: rgba(255,255,255,.85); padding: 64px 0 28px; }
.ft__in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; }
.ft__ad { font-size: 13.5px; line-height: 1.9; margin: 18px 0; }
.ft__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; font-weight: 700; color: #fff; }
.ft__reg { background: rgba(255,255,255,.07); border-radius: var(--tag-s); padding: 18px 20px; }
.ft__rt { font-weight: 800; color: #fff; font-size: 14px; margin-bottom: 6px; }
.reg--ft div { padding: 4px 0; font-size: 12.5px; line-height: 1.6; border-bottom: 1px dashed rgba(255,255,255,.14); }
.reg--ft div:last-child { border-bottom: 0; }
.reg--ft dt { color: rgba(255,255,255,.6); }
.ft__bt { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); font-size: 12px; font-family: var(--en); letter-spacing: .06em; }
.ft__bt a { text-decoration: underline; }
.spb { display: none; }

/* モーダル */
.modal { position: fixed; inset: 0; z-index: 200; background: rgba(20,24,36,.55); display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__b { background: var(--paper); border-radius: var(--tag); padding: 32px 28px 26px; max-width: 460px; width: 100%; text-align: center; animation: qin .4s var(--ease); }
.modal__t { font-weight: 800; font-size: 19px; margin-bottom: 10px; }
.modal__d { color: var(--sub); font-size: 14.5px; margin-bottom: 22px; text-align: left; white-space: pre-line; }

/* ============ タブレット ============ */
@media (max-width: 1080px) {
  .hd__nav { display: none; }
  .hd__tel { margin-left: auto; }
  .mb { display: grid; place-content: center; gap: 6px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--ink); }
  .mb i { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .35s var(--ease); }
  .is-open .mb i:first-child { transform: translateY(4px) rotate(45deg); } .is-open .mb i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .dr { display: flex; flex-direction: column; position: fixed; inset: var(--hh) 0 0; z-index: 49; background: var(--bg); padding: 16px 24px 32px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .35s var(--ease); }
  .is-open .dr { opacity: 1; visibility: visible; transform: none; }
  .dr nav a { display: flex; align-items: center; gap: 12px; padding: 16px 4px; border-bottom: 2px dashed var(--line2); font-size: 18px; font-weight: 800; }
  .dr nav small { font-family: var(--en); font-weight: 600; font-size: 12px; color: var(--accent-d); width: 5.5em; letter-spacing: .12em; }
  .dr nav .arw { margin-left: auto; color: var(--main); }
  .dr__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
  .dr__note { margin-top: 16px; font-size: 13px; color: var(--sub); text-align: center; }
  .pbs { grid-template-columns: repeat(2, 1fr); }
  .crss { grid-template-columns: repeat(2, 1fr); }
  .crss > .crs, .crss > .crs:nth-child(n+4) { grid-column: auto; }
  .crss > .crs:nth-child(n+4) .crs__img { aspect-ratio: 3 / 2; }
  .rules__g { grid-template-columns: 1fr 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc__r { position: static; }
  .tr, .qz-wrap { grid-template-columns: 1fr; }
  .tr__side { position: static; }
  .qz-side { display: none; }
}

/* ============ スマホ ============ */
@media (max-width: 760px) {
  :root { --hh: 64px; --tag: 22px 22px 22px 6px; }
  body { font-size: 15.5px; padding-bottom: 72px; }
  .wrap { width: calc(100% - 36px); }
  .sec { padding: 72px 0; }
  .sec--t { padding-top: 32px; }
  .st { margin-bottom: 30px; }
  .hd { padding: 0 12px 0 16px; gap: 10px; }
  .lg__m { width: 38px; height: 38px; }
  .lg b { font-size: 21px; } .lg small { font-size: 10px; }
  .hd__tel { display: none; }
  .hd__cta { margin-left: auto; min-height: 42px; padding: 0 16px; font-size: 13.5px; }
  .hero { padding-top: 22px; }
  .hero__in { grid-template-columns: 1fr; gap: 8px; }
  .hero__t { font-size: clamp(28px, 8.6vw, 36px); margin: 16px 0 14px; }
  .hero__d { font-size: 15.5px; }
  .hero__btns { flex-direction: column; margin-top: 22px; }
  .hero__btns .btn { width: 100%; }
  .hero__ph { padding: 30px 0 30px 0; }
  .hero__img { border-radius: 30px 30px 30px 6px; aspect-ratio: 4 / 3; }
  .bub { font-size: 16px; padding: 6px 14px; }
  .b1 { top: 8px; left: 10px; } .b2 { right: 6px; top: 30%; } .b3 { bottom: 44px; left: 10px; }
  .hero__badge { width: 104px; height: 104px; right: 10px; bottom: -4px; }
  .hero__badge b { font-size: 30px; } .hero__badge span { font-size: 14px; } .hero__badge small { font-size: 10.5px; }
  .facts { grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .facts li { padding: 16px 8px; }
  .facts li:nth-child(3) { border-left: 0; }
  .facts li:nth-child(n+3) { border-top: 2px dashed var(--line2); }
  .facts b { font-size: 17px; }
  .pbs { grid-template-columns: 1fr; gap: 10px; }
  .pb { padding: 14px 16px; }
  .way__in, .flow__in, .room__in, .msg, .fac, .acc, .ctab__in, .cd { grid-template-columns: 1fr; gap: 32px; }
  .way__img img { aspect-ratio: 4 / 5; max-height: 460px; }
  .way__cap { left: 8px; bottom: 16px; font-size: 16px; }
  .way__l li { gap: 16px; padding: 20px 0; }
  .way__l b { font-size: 24px; }
  .way__l h3 { font-size: 17.5px; }
  .cue-row__in { padding: 0 18px; gap: 12px; }
  .cue-c { width: 210px; height: 280px; }
  .crss { grid-template-columns: 1fr; gap: 16px; }
  .flow .st { position: static; }
  .fl li { gap: 16px; padding-bottom: 26px; }
  .fl::before { left: 21px; }
  .fl__n { width: 44px; height: 44px; font-size: 19px; }
  .fl h3 { font-size: 17px; margin-top: 7px; }
  .ctab { padding: 64px 0; }
  .ctab::before { right: -150px; top: -170px; }
  .ctab h2 span { display: block; margin: 4px 0 0; }
  .ph { padding: 28px 0 48px; }
  .crumb { margin-bottom: 16px; }
  .qz { padding: 22px 18px 28px; min-height: 0; border-radius: 22px; }
  .qz__top { margin-bottom: 20px; }
  .qz__opts, .qz__opts--m { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  .qo { min-height: 58px; }
  .res__main { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .res__main h2 { font-size: 24px; }
  .res__btns { grid-template-columns: 1fr; }
  .jump { gap: 6px; } .jump a { font-size: 13px; padding: 6px 12px; }
  .cds { gap: 64px; }
  .cd--r .cd__img { order: 0; }
  .cd__img { position: relative; top: 0; }
  .cd__spec { grid-template-columns: 1fr; gap: 0; background: var(--paper); border-radius: 12px; padding: 4px 14px; }
  .cd__spec div { display: grid; grid-template-columns: 4em 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-radius: 0; background: none; }
  .cd__spec div + div { border-top: 1px dashed var(--line2); }
  .cd__spec--v { grid-template-columns: 1fr; }
  .cd__spec--v div { grid-template-columns: 6.5em 1fr; }
  .cd__learn { grid-template-columns: 1fr; }
  .pt th, .pt td { padding: 10px 12px; }
  .pt td b { font-size: 20px; }
  .calc__f { padding: 22px 16px; border-radius: 22px; }
  .cps, .cps--t { grid-template-columns: 1fr; }
  .calc__r { padding: 22px 20px; }
  .calc__big b { font-size: 46px; }
  .rules__g { grid-template-columns: 1fr; }
  .fq summary { padding: 16px 44px 16px 46px; font-size: 15px; }
  .fq summary::before { left: 16px; top: 14px; }
  .fq summary::after { right: 18px; }
  .fq p { padding: 0 18px 18px 46px; font-size: 14.5px; }
  .bk { padding: 20px 16px 26px; border-radius: 22px; }
  .bk__prog span { font-size: 11px; }
  .cal { gap: 4px; }
  .cal__d { min-height: 54px; border-radius: 10px; }
  .cal__d b { font-size: 16px; } .cal__d small { font-size: 9.5px; }
  .slots { grid-template-columns: repeat(3, 1fr); }
  .g2 { grid-template-columns: 1fr; }
  .conf div { grid-template-columns: 7.6em 1fr; padding: 10px 12px; font-size: 14px; }
  .bk__nav { grid-template-columns: 1fr 1.6fr; }
  .bk__nav .btn { padding: 0 14px; }
  .msg__t h2 br { display: none; }
  .msg__img img { aspect-ratio: 4 / 5; max-height: 460px; }
  .prof div, .reg div { grid-template-columns: 7.5em 1fr; gap: 8px; }
  .fac__l { grid-template-columns: 1fr; }
  .reg--big div { padding: 10px 14px; font-size: 14px; }
  .map__l { font-size: 10.5px; }
  .ft { padding: 48px 0 24px; }
  .ft__in { grid-template-columns: 1fr; gap: 28px; }
  .reg--ft div { grid-template-columns: 8.5em 1fr; }
  .spb { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(246,242,234,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 -1px 0 var(--line); transform: translateY(110%); transition: transform .4s var(--ease); }
  .spb.is-on { transform: none; }
  .spb a { display: grid; place-items: center; min-height: 50px; border-radius: 999px; border: 2px solid var(--ink); font-weight: 800; font-size: 14.5px; }
  .spb a.is-main { background: var(--accent); border-color: var(--accent); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}