/* 森のキャンプ場 どんぐり谷（デモ） */
:root {
  --deep: #1F3B2D;
  --deep2: #2A4A39;
  --ember: #F07F2E;
  --sand: #E8DCC2;
  --lt: #F5EFE3;
  --river: #9FB7A8;
  --grass: #D9D6B5;
  --white: #FFFFFF;
  --fj: "M PLUS 1p", "Hiragino Sans", "Yu Gothic", sans-serif;
  --fe: "Bitter", "M PLUS 1p", serif;
  --pad: clamp(18px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; font-family: var(--fj); font-weight: 400; color: var(--deep); background: var(--lt); font-size: clamp(15px, 1.05vw + 10px, 17px); line-height: 1.8; letter-spacing: .02em; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.4; font-feature-settings: "palt"; text-wrap: balance; word-break: auto-phrase; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--sand); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.num { font-family: var(--fe); font-variant-numeric: tabular-nums lining-nums; font-weight: 600; letter-spacing: .01em; }
.wrap { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 820px; }

/* ---------- 等高線・星 ---------- */
.contour { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: var(--deep); stroke-opacity: .1; stroke-width: 1; }
.contour path { vector-effect: non-scaling-stroke; }
.contour--night { stroke: var(--sand); stroke-opacity: .12; }
.stars { position: absolute; inset: 0; pointer-events: none; }
.star { position: absolute; left: var(--x); top: var(--y); width: var(--z); height: var(--z); border-radius: 50%; background: var(--sand); opacity: .9; }
html.js .star.tw { animation: tw var(--d) ease-in-out var(--o) infinite; }
@keyframes tw { 0%, 100% { opacity: .9; } 50% { opacity: .36; } }

/* ---------- ロゴ ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sand); }
.logo__mark { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--sand); padding: 4px 6px 3px; overflow: visible; }
.logo__t { display: flex; flex-direction: column; line-height: 1.15; }
.logo__en { font-family: var(--fe); font-weight: 700; font-size: 19px; letter-spacing: .08em; }
.logo__ja { font-weight: 500; font-size: 11.5px; letter-spacing: .12em; margin-top: 3px; }
.demo { font-family: var(--fe); font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--sand); border: 1px solid rgba(232, 220, 194, .5); border-radius: 3px; padding: 0 5px; line-height: 16px; margin-left: 8px; opacity: .85; }

/* ---------- ボタン ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 28px 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 50px; padding: 12px 28px; border-radius: 9999px; font-family: var(--fj); font-weight: 700; font-size: 15.5px; letter-spacing: .06em; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .25s var(--ease), background-color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn--fire { background: var(--ember); color: var(--deep); }
.btn--fire:hover { background: #F48D41; }
.btn--line { border-color: var(--deep); color: var(--deep); background: transparent; }
.btn--line:hover { background: rgba(31, 59, 45, .06); }
.btn--line-n { border-color: var(--sand); color: var(--sand); background: transparent; }
.btn--line-n:hover { background: rgba(232, 220, 194, .1); }
.btn--deep { background: var(--deep); color: var(--sand); }
.tl { font-weight: 500; color: var(--deep); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.btns + p .tl { display: inline-block; margin-top: 14px; }
.tl:hover { text-decoration-color: var(--ember); }

/* ---------- ヘッダー ---------- */
.hd { position: sticky; top: 0; z-index: 50; background: var(--deep); color: var(--sand); }
.hd--over { position: absolute; left: 0; right: 0; background: transparent; }
html.jsr .hd--over { position: fixed; transition: background-color .35s; }
.hd--over.is-solid { background: var(--deep); }
.hd--over::before { content: ""; position: absolute; inset: 0 0 -40px; background: linear-gradient(rgba(10, 20, 14, .55), rgba(10, 20, 14, 0)); pointer-events: none; transition: opacity .35s; }
.hd--over.is-solid::before { opacity: 0; }
.hd__in { position: relative; display: flex; align-items: center; gap: 22px; max-width: 1400px; margin: 0 auto; padding: 12px var(--pad); min-height: 76px; }
.hd .logo { margin-right: -14px; }
.gnav { margin-left: auto; }
.gnav ul { display: flex; gap: 22px; }
.gnav a { position: relative; display: block; padding: 8px 0; font-size: 14px; font-weight: 500; letter-spacing: .06em; color: var(--sand); text-decoration: none; white-space: nowrap; }
.gnav a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 2px; margin-left: -9px; background: var(--ember); transform: scaleX(0); transition: transform .25s var(--ease); }
.gnav a:hover::after, .gnav a[aria-current="page"]::after { transform: scaleX(1); }
.hd__tel { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.hd__num { font-family: var(--fe); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-decoration: none; font-variant-numeric: tabular-nums; }
.hd__tel span { font-size: 10.5px; letter-spacing: .06em; opacity: .85; }
.hd__cta { min-height: 44px; padding: 8px 22px; font-size: 14.5px; }
.hd__sp, .menu { display: none; }
.menu { margin-left: auto; width: 52px; height: 48px; background: none; border: 0; color: var(--sand); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; }
.menu__bars, .menu__bars::before, .menu__bars::after { display: block; width: 26px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.menu__bars { position: relative; }
.menu__bars::before, .menu__bars::after { content: ""; position: absolute; left: 0; }
.menu__bars::before { top: -7px; }
.menu__bars::after { top: 7px; }
.menu__label { font-family: var(--fe); font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.is-menu .menu__bars { background: transparent; }
.is-menu .menu__bars::before { transform: translateY(7px) rotate(45deg); }
.is-menu .menu__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .hd__in { min-height: 64px; gap: 12px; }
  .hd__tel, .hd__cta { display: none; }
  .menu { display: flex; }
  .gnav { position: fixed; inset: 64px 0 0; margin: 0; background: var(--deep); padding: 28px var(--pad) 120px; overflow: auto; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; }
  .gnav ul { flex-direction: column; gap: 0; }
  .gnav a { font-size: 18px; padding: 16px 4px; border-bottom: 1px solid rgba(232, 220, 194, .18); }
  .gnav a::after { left: 4px; margin: 0; bottom: 10px; }
  .is-menu .gnav { visibility: visible; opacity: 1; }
  .is-menu .hd--over { background: var(--deep); }
  .hd__sp { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--deep); border-top: 1px solid rgba(232, 220, 194, .2); }
  .hd__spb { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 9999px; font-weight: 700; font-size: 15px; letter-spacing: .06em; text-decoration: none; }
  .hd__spb--tel { border: 1.5px solid var(--sand); color: var(--sand); }
  .hd__spb--yoyaku { background: var(--ember); color: var(--deep); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .logo__mark { width: 38px; height: 38px; }
  .logo__en { font-size: 16px; }
  .logo__ja { font-size: 10.5px; letter-spacing: .08em; }
  .demo { margin-left: 4px; }
}

/* ---------- 見出し・札 ---------- */
.h2 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(23px, 2.2vw + 12px, 34px); letter-spacing: .03em; margin-bottom: 22px; }
.h2__acorn { flex: none; width: 14px; height: 18px; transform: translateY(1px); }
.h2--n { color: var(--sand); }
.h2--n .h2__acorn { filter: drop-shadow(0 0 0 var(--sand)); }
.lead { max-width: 44em; }
.note { font-size: .84em; line-height: 1.75; opacity: .9; }
.note--n { color: var(--sand); }
.stake { display: inline-block; background: var(--deep); padding: 1.5px; clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%, 0 9px); vertical-align: top; }
.stake > span { display: flex; flex-direction: column; align-items: center; background: var(--sand); color: var(--deep); clip-path: polygon(8.4px 0, calc(100% - 8.4px) 0, 100% 8.4px, 100% 100%, 0 100%, 0 8.4px); padding: 12px 16px 9px; font-family: var(--fe); font-weight: 700; line-height: 1.3; text-align: center; }
.stake--big > span { font-size: 54px; padding: 26px 26px 14px; min-width: 96px; }
.stake--on { position: absolute; top: 14px; left: 14px; z-index: 1; }
.stake--on > span { font-size: 15px; letter-spacing: .06em; padding: 10px 14px 7px; }

/* ---------- 写真 ---------- */
.ph { position: relative; border-radius: 6px; overflow: hidden; background: var(--grass); }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 区画 ---------- */
.sec { position: relative; overflow: hidden; padding: clamp(68px, 8vw, 116px) 0; }
.sec--sand { background: var(--sand); }
.sec--lt { background: var(--lt); }
.sec--white { background: var(--white); }
.sec--night { background: var(--deep); color: var(--sand); }
.sec--night a:not(.btn) { color: var(--sand); }

/* ---------- 最初の画面 ---------- */
.hero { position: relative; display: grid; background: var(--deep); color: var(--sand); }
.hero__ph { grid-area: 1 / 1; position: relative; height: calc(100svh - 46px); min-height: 600px; max-height: 1000px; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.hero__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 18, 12, .62) 0%, rgba(8, 18, 12, .34) 38%, rgba(8, 18, 12, 0) 64%), linear-gradient(0deg, rgba(8, 18, 12, .45) 0%, rgba(8, 18, 12, 0) 30%); pointer-events: none; }
.hero__ph .stars { z-index: 1; }
.hero__season { position: absolute; right: var(--pad); bottom: 112px; z-index: 2; margin: 0; font-size: 14px; letter-spacing: .14em; color: var(--sand); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.hero__txt { grid-area: 1 / 1; position: relative; z-index: 2; align-self: start; width: min(640px, 92%); margin: clamp(120px, 17vh, 190px) 0 0 max(var(--pad), calc((100vw - 1320px) / 2)); }
.hero__h { font-size: clamp(34px, 3.4vw + 12px, 60px); line-height: 1.38; letter-spacing: .04em; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); margin-bottom: 24px; }
.hero__lead { max-width: 31em; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
html.js .hero__h, html.js .hero__more { animation: up .7s var(--ease) both; }
html.js .hero__more { animation-delay: .18s; }
@keyframes up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.aki { grid-area: 1 / 1; align-self: end; position: relative; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; background: var(--deep); color: var(--sand); padding: 14px max(var(--pad), calc((100vw - 1320px) / 2)); border-top: 1px solid rgba(232, 220, 194, .2); }
.aki p { margin: 0; }
.aki__h { display: flex; flex-direction: column; line-height: 1.3; font-size: 14px; font-weight: 500; }
.aki__h .num { font-size: 12px; letter-spacing: .16em; opacity: .8; }
.aki__tags { display: flex; gap: 10px; }
.stake--wide > span { flex-direction: row; align-items: baseline; gap: 8px; padding: 9px 14px 7px; font-family: var(--fj); font-weight: 500; font-size: 13px; }
.aki__k { font-weight: 700; }
.aki__n b { font-size: 22px; font-weight: 700; line-height: 1; }
.aki__of { font-size: 11.5px; }
.aki__mihon { font-weight: 700; font-size: 16px; letter-spacing: .06em; }
.aki__real { margin-left: auto !important; font-size: 13px; max-width: 100%; }
@media (min-width: 1181px) { .aki { flex-wrap: nowrap; } .aki__real { max-width: 20em; text-align: right; line-height: 1.6; } }
.aki__real a { display: inline-block; }
.aki__real a { margin-left: 6px; font-weight: 700; white-space: nowrap; color: var(--sand); }

.oshirase { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; padding: 16px max(var(--pad), calc((100vw - 1320px) / 2)); background: var(--lt); border-bottom: 1px solid rgba(31, 59, 45, .14); font-size: 14.5px; }
.oshirase ul { display: flex; flex-wrap: wrap; gap: 4px 32px; }
.oshirase time { margin-right: .8em; font-size: 14px; }
.oshirase__mihon { margin: 0 0 0 auto; font-size: 12px; opacity: .8; }

/* サイトは2種類 */
.two { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: end; margin-top: 36px; }
.two__big .ph { aspect-ratio: 3 / 2; }
.two__sm .ph { aspect-ratio: 4 / 3; }
.two__h { display: flex; align-items: baseline; gap: 8px; font-size: 21px; margin: 18px 0 8px; }
.two__h .num { font-size: 30px; font-weight: 700; }
.two__h small { font-size: 14px; font-weight: 500; }
.plain li { padding: 2px 0; }
.plain b { font-weight: 700; }

/* 地図 */
.mapwrap { margin: 34px 0 14px; }
.mp { display: block; width: 100%; height: auto; overflow: visible; }
.mp--v { display: none; }
.mp-contour path { fill: none; stroke: var(--deep); stroke-opacity: .1; stroke-width: 1; }
.mp-trees circle { fill: #C9D2BF; stroke: var(--deep); stroke-opacity: .45; stroke-width: 1.2; }
.mp-trees circle.o { fill: #DCD9BF; }
.mp-trees path { stroke: var(--deep); stroke-opacity: .45; stroke-width: 1.4; stroke-linecap: round; }
.mp-river { fill: none; stroke: var(--river); stroke-linecap: round; }
.mp-river-l { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 2 12; stroke-linecap: round; }
.mp-arrow path { fill: none; stroke: var(--deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.js .mp-arrow { animation: flowx 6s ease-in-out infinite; animation-delay: calc(var(--i) * -2s); }
@keyframes flowx { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.mp-road { fill: none; stroke: var(--deep); stroke-width: 1.6; stroke-dasharray: 6 6; stroke-linecap: round; opacity: .8; }
.mp-free path { fill: var(--grass); stroke: var(--deep); stroke-width: 1.5; }
.mp-steps path, .mp-steps-i { fill: none; stroke: var(--ember); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mp-stake path { fill: var(--sand); stroke: var(--deep); stroke-width: 1.5; }
.mp-stake text { font-family: var(--fe); font-weight: 700; fill: var(--deep); }
.mp-paw { fill: var(--deep); }
.mp-roof { fill: none; stroke: var(--deep); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.mp-bld .mp-roof { fill: var(--sand); }
.mp-box rect, .mp-box path { fill: var(--sand); stroke: var(--deep); stroke-width: 1.5; stroke-linejoin: round; }
.mp-box path.mp-ash { stroke: var(--ember); stroke-width: 2; }
.mp-gate path { fill: var(--ember); }
.mp-park rect { fill: rgba(255, 255, 255, .5); stroke: var(--deep); stroke-width: 1.5; }
.mp-p { font-family: var(--fe); font-weight: 700; fill: var(--deep); }
.mp-t, .mp-ts { font-family: var(--fj); fill: var(--deep); paint-order: stroke; stroke: var(--lt); stroke-width: 4px; stroke-linejoin: round; }
.mp-t { font-weight: 700; }
.mp-ts { font-weight: 500; }
.mp-lgbox { fill: rgba(255, 255, 255, .6); stroke: var(--deep); stroke-opacity: .3; }
.mp-lgstake { fill: var(--sand); stroke: var(--deep); stroke-width: 1.5; }
.mp-north path { fill: var(--deep); }
.mp-north text { font-family: var(--fe); font-weight: 700; fill: var(--deep); }
html.js .mp-in { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--i) * 80ms); }
html.js .mapwrap.is-in .mp-in { opacity: 1; transform: none; }
[data-place] { cursor: pointer; }
.mp .is-on .mp-roof, .mp .is-on rect, .mp .is-on path:not(.mp-ash) { stroke: var(--ember); stroke-width: 2.6; }
.mp .is-on .mp-t { fill: #8A3D0C; }
.mp [data-place]:focus { outline: none; }
.mp [data-place]:focus-visible .mp-t { text-decoration: underline; }
@media (max-width: 900px) {
  .mp--h { display: none; }
  .mp--v { display: block; max-width: 520px; margin: 0 auto; }
}
.places { margin-top: 18px; }
.places__btns { display: none; }
.places__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 28px; margin: 0; }
.places__list div { padding: 8px 0; border-top: 1px solid rgba(31, 59, 45, .2); }
.places__list dt { font-weight: 700; }
.places__list dd { margin: 0; }
html.jsr .places__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
html.jsr .places__btns button { font: 500 14px/1 var(--fj); letter-spacing: .04em; color: var(--deep); background: var(--white); border: 1.5px solid var(--deep); border-radius: 9999px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
html.jsr .places__btns button[aria-pressed="true"] { background: var(--deep); color: var(--sand); }
html.jsr .places__list { display: block; }
html.jsr .places__list div { display: none; border: 0; background: var(--white); border-left: 4px solid var(--ember); padding: 14px 18px; border-radius: 0 6px 6px 0; }
html.jsr .places__list div.is-on { display: block; }

/* 焚き火 */
.fire { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.fire__ph { aspect-ratio: 1; }
.clock { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.clock .stake > span { font-family: var(--fj); font-weight: 500; font-size: 13px; padding: 10px 14px 8px; }
.clock b { font-family: var(--fe); font-size: 20px; font-weight: 700; }
.clock--day .stake > span { gap: 2px; }

/* 川 */
.kawa { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
.ph--wide { aspect-ratio: 16 / 10; }
.lines { margin-top: 18px; }
.lines li { padding: 12px 2px; border-bottom: 1px solid rgba(31, 59, 45, .35); font-size: .95em; }
.lines li:first-child { border-top: 1px solid rgba(31, 59, 45, .35); }

/* 流れ D-2 */
.fl { position: relative; margin: 40px 0 10px; }
.fl__band { position: absolute; left: 0; right: 0; top: 34px; height: 56px; border-radius: 28px; background: linear-gradient(90deg, #142a1e 0%, #183223 72%, #6f7a62 80%, #C9C0A6 90%, var(--sand) 100%); border: 1px solid rgba(232, 220, 194, .25); overflow: hidden; }
.fl__band .stars { right: 36%; }
.fl__list { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); }
.fl__i { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.fl__t { height: 30px; font-size: 17px; font-weight: 700; color: var(--sand); white-space: nowrap; }
.fl__i:first-child .fl__t { font-size: 15px; }
.fl__dot { height: 56px; margin-top: 4px; display: flex; align-items: center; }
.fl__dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 4px rgba(232, 220, 194, .18); }
.fl__i--am .fl__dot::before { background: var(--deep); box-shadow: 0 0 0 4px rgba(31, 59, 45, .2); }
.fl__x { margin-top: 14px; font-size: 13.5px; line-height: 1.65; }
.fl__fire { position: absolute; top: 30px; left: calc(50% + 10px); width: 16px; height: 20px; fill: var(--ember); }
html.js .fl__fire { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
html.js .fl .fl__i { opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(var(--i) * 100ms); }
html.js .fl.is-in .fl__i { opacity: 1; }
@media (max-width: 900px) {
  .fl__band { top: 0; bottom: 0; left: 0; right: auto; width: 44px; height: auto; border-radius: 22px; background: linear-gradient(180deg, #142a1e 0%, #183223 70%, #6f7a62 78%, #C9C0A6 90%, var(--sand) 100%); }
  .fl__band .stars { right: 0; bottom: 36%; }
  .fl__list { grid-template-columns: 1fr; padding: 10px 0; }
  .fl__i { display: grid; grid-template-columns: 44px 112px 1fr; align-items: start; text-align: left; padding: 10px 0; }
  .fl__dot { grid-column: 1; grid-row: 1; height: auto; margin: 0; justify-content: center; padding-top: 8px; }
  .fl__t { grid-column: 2; grid-row: 1; height: auto; padding-left: 12px; font-size: 16px; }
  .fl__i:first-child .fl__t { font-size: 14px; white-space: normal; line-height: 1.4; }
  .fl__x { grid-column: 3; grid-row: 1; margin: 0; padding-top: 1px; }
  .fl__fire { top: -4px; left: 14px; }
}

/* ご予約 */
.book { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.book__box { padding: 30px 30px 24px; background: var(--white); border-radius: 6px; border: 1.5px solid rgba(31, 59, 45, .3); }
.book__box .btns { margin: 0 0 12px; flex-direction: column; }
.book__box .btn { width: 100%; }
.book__cx { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(31, 59, 45, .25); font-size: .95em; max-width: 46em; }
.book__cx a { font-weight: 700; }

/* 来る前に */
.maeni { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 56px; margin: 30px 0 34px; }
.maeni p { position: relative; margin: 0; padding-top: 18px; }
.maeni p::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 3px; background: var(--ember); }
.maeni b { display: block; font-size: 1.12em; margin-bottom: 6px; }

/* ---------- 下層の頭 ---------- */
.ph-head { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 62px); }
.ph-head--night { background: var(--deep); color: var(--sand); }
.ph-head--sand { background: var(--sand); }
.ph-head__h { font-size: clamp(30px, 3vw + 14px, 50px); letter-spacing: .05em; margin: 14px 0 10px; }
.ph-head__lead { max-width: 40em; margin: 0; }
.crumb ol { display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; }
.crumb li + li::before { content: "＞"; margin: 0 6px; opacity: .6; }
.crumb a { text-underline-offset: 3px; }
.toc ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.toc a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 9999px; border: 1.5px solid currentColor; text-decoration: none; font-size: 14px; font-weight: 500; }
.toc a:hover { background: rgba(240, 127, 46, .16); }

/* サイトと料金 */
.zone { display: grid; grid-template-columns: 150px 1fr; gap: 40px; }
.zone--r { grid-template-columns: 1fr 150px; }
.zone--r .zone__mark { order: 2; }
.zone__mark { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; padding-top: 4px; }
.zone__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; margin-top: 22px; align-items: start; }
.zone__grid .ph { aspect-ratio: 4 / 3; }
.tags { margin: 0 0 12px; }
.tags div { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(31, 59, 45, .35); }
.tags dt { font-weight: 700; }
.tags dd { margin: 0; }
.freez { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.freez__ph { aspect-ratio: 4 / 5; }
.fee { width: 100%; border-collapse: collapse; margin: 22px 0 14px; background: rgba(255, 255, 255, .5); }
.fee caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.fee th, .fee td { padding: 14px 16px; border-bottom: 1px solid rgba(31, 59, 45, .25); text-align: left; vertical-align: top; }
.fee thead th { font-size: 13px; font-weight: 500; border-bottom: 2px solid var(--deep); }
.fee tbody th { font-weight: 700; }
.fee .r { text-align: right; }
.fee td.num { font-size: 1.02em; }
.fee__day th, .fee__day td { background: rgba(31, 59, 45, .05); }
.shop { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; margin-top: 30px; }
.shop .ph { aspect-ratio: 3 / 2; }
.shop__col--sm .ph { aspect-ratio: 4 / 3; }
.shop__h { font-size: 19px; margin: 18px 0 8px; }
.shop__h small { font-size: 13px; font-weight: 500; }
.price li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid rgba(31, 59, 45, .2); }
.price b { font-size: 1.05em; }
.price small { flex-basis: 100%; font-size: .84em; }
.shop__no { margin: 30px 0 6px; font-weight: 700; }
.faqw { max-width: 900px; }
.faq details { border-top: 1px solid rgba(31, 59, 45, .3); }
.faq details:last-child { border-bottom: 1px solid rgba(31, 59, 45, .3); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 18px 44px 18px 2.2em; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; position: absolute; left: 0; top: 16px; font-family: var(--fe); font-weight: 700; color: var(--ember); font-size: 1.15em; }
.faq summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2px solid var(--deep); border-bottom: 2px solid var(--deep); transform: rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 0 20px 2.2em; margin: 0; }
.end { text-align: center; }
.end .h2 { justify-content: center; }
.end .btns { justify-content: center; }

/* 場内の設備 */
.kan { display: grid; grid-template-columns: 1.2fr 1fr; gap: 52px; align-items: center; }
.kan__ph { aspect-ratio: 3 / 2; }
.eq { display: grid; gap: 22px; margin-top: 30px; }
.eq__i { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; padding: 18px; background: rgba(255, 255, 255, .45); border-radius: 6px; }
.eq__ph { aspect-ratio: 4 / 3; }
.eq__i:nth-child(1) .eq__ph { aspect-ratio: 1; }
.eq__big { display: flex; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 4 / 3; border-radius: 6px; background: var(--deep); color: var(--sand); }
.eq__min, .eq__yen { font-size: 46px; font-weight: 700; line-height: 1; }
.eq__big small { font-family: var(--fj); font-size: 16px; font-weight: 500; margin-left: 2px; }
.eq__h { font-size: 20px; margin-bottom: 6px; }
.eq__h small { font-size: 14px; font-weight: 500; }
.eq__i p { margin: 0; }
.eq__no { margin: 28px 0 0; font-weight: 700; }

/* きまり */
.rl { display: grid; grid-template-columns: 1.3fr 1fr; gap: 52px; align-items: start; }
.rl__ph { aspect-ratio: 1; }
.rl__ph--tall { aspect-ratio: 896 / 1152; }
.rl__lead { font-weight: 500; }
.rules li { position: relative; padding: 6px 0 6px 22px; }
.rules li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.rules--n li { color: var(--sand); }
.fuda { margin: 34px 0 10px; padding: 16px 20px; border: 1.5px solid var(--deep); border-radius: 4px; background: rgba(255, 255, 255, .4); max-width: 52em; }
.oto { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.post { display: grid; gap: 0; }
.post li { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; padding: 10px 0; }
.post li + li { border-top: 1px dashed rgba(232, 220, 194, .3); }
.post .stake > span { font-size: 21px; padding: 12px 10px 8px; }
.post p { margin: 0; }
.inu { display: grid; grid-template-columns: .8fr 1.2fr; gap: 52px; align-items: start; }
.inu__ph { aspect-ratio: 896 / 1152; }

/* D-4 ごみ */
.gm { margin: 30px 0 18px; }
.gm__cap { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.gm__row { display: grid; grid-template-columns: 3fr 1.12fr; gap: 20px; }
.gm__area { border: 1.5px solid rgba(31, 59, 45, .5); border-radius: 6px; padding: 14px 16px 18px; background: rgba(255, 255, 255, .5); }
.gm__area--ash { border-color: var(--ember); }
.gm__a { font-weight: 700; margin: 0 0 10px; }
.gm__a small { font-weight: 500; font-size: .85em; }
.gm__set { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gm__area--ash .gm__set { grid-template-columns: 1fr; }
.gm__c { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gm__t { font-weight: 700; font-size: 14.5px; min-height: 2.8em; display: flex; align-items: flex-end; line-height: 1.4; }
.gm__c svg { width: 100%; max-width: 170px; margin: 6px 0; }
.gm-box, .gm-lid { fill: var(--sand); stroke: var(--deep); stroke-width: 1.6; stroke-linejoin: round; }
.gm__c--e .gm-box, .gm__c--e .gm-lid { stroke: var(--ember); stroke-width: 2.4; }
.gm-plank { fill: none; stroke: var(--deep); stroke-opacity: .25; }
.gm-ic * { fill: var(--lt); stroke: var(--deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gm__l { font-size: 13.5px; }
.gm__no { display: flex; gap: 10px; align-items: baseline; margin: 16px 0 0; font-weight: 500; }
.gm__x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--deep); color: var(--sand); font-weight: 700; font-size: 14px; line-height: 1; }

/* ご予約とキャンセル */
.mihon { display: inline-block; padding: 12px 18px; border: 1.5px solid var(--deep); border-radius: 4px; background: var(--white); margin-bottom: 20px; }
.mihon b { font-size: 1.08em; margin-right: .4em; }
.cal { background: var(--white); border-radius: 6px; padding: 20px; }
.cal__mon { font-weight: 700; font-size: 22px; margin: 0 0 10px; }
.cal__w, .cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__w li { text-align: center; font-size: 12px; letter-spacing: .1em; padding: 4px 0; }
.cal__w li:first-child { color: #A3471A; }
.cal__c { min-height: 78px; padding: 6px 8px; border-radius: 4px; background: var(--lt); font-size: 13px; }
.cal__c--x { background: none; }
.cal__c--off { background: rgba(31, 59, 45, .08); }
.cal__c--sat { background: #EFE5D0; }
.cal__d { display: block; font-size: 15px; font-weight: 700; }
.cal__m { display: flex; flex-direction: column; line-height: 1.5; }
.cal__m span { display: flex; justify-content: space-between; }
.cal__m i { font-style: normal; font-size: 11px; opacity: .8; }
.cal__off { display: block; font-size: 13px; opacity: .8; }
.cal__key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; font-size: 13px; }
.cal__key div { display: flex; gap: 6px; }
.cal__key dt { font-weight: 700; }
.cal__key dd { margin: 0; }
.how { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; margin: 26px 0 36px; }
.how > div { padding: 22px 24px; border-radius: 6px; background: var(--lt); }
.how__h { font-size: 19px; margin-bottom: 8px; }
.how__h small { font-size: 13px; font-weight: 500; margin-left: 4px; }
.how__tel { font-size: 20px; font-weight: 700; text-decoration: none; }
.how p { margin: 0; }
.form { max-width: 880px; padding: clamp(20px, 3vw, 36px); border: 1.5px solid rgba(31, 59, 45, .4); border-radius: 6px; background: var(--white); }
.form__use { font-weight: 500; padding-bottom: 14px; border-bottom: 1px solid rgba(31, 59, 45, .2); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 18px; }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f--w { grid-column: 1 / -1; }
.f__l { font-weight: 700; font-size: 14.5px; }
.f__l em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--white); background: #A3471A; border-radius: 3px; padding: 1px 6px; margin-left: 8px; vertical-align: 2px; }
.f__h { font-size: 12.5px; opacity: .85; }
.f input, .f select, .f textarea { font: 400 16px/1.5 var(--fj); color: var(--deep); background: var(--lt); border: 1.5px solid rgba(31, 59, 45, .45); border-radius: 4px; padding: 10px 12px; min-height: 46px; width: 100%; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--ember); outline-offset: 1px; }
.f--set { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
.f--set legend { margin-bottom: 8px; padding: 0; }
.f--set label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.f--set input { width: 96px; }
.is-checked :invalid { border-color: #B3261E; background: #FFF4F2; }
.form__err { color: #B3261E; font-weight: 700; margin: 18px 0 0; }
.form__go { margin: 22px 0 0; }
.form__done { margin: 14px 0 0; padding: 12px 16px; background: var(--deep); color: var(--sand); border-radius: 4px; font-weight: 700; }

.cx { margin: 30px 0 10px; padding: 22px 22px 18px; background: var(--lt); border-radius: 6px; }
.cx__cap { font-weight: 700; font-size: 16px; }
.cx__ex { font-size: 13px; margin: 2px 0 14px; opacity: .85; }
.cx__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-left: 1px solid rgba(31, 59, 45, .2); }
.cx__c { display: flex; flex-direction: column; align-items: stretch; text-align: center; border-right: 1px solid rgba(31, 59, 45, .2); padding: 0 6px; }
.cx__en { font-size: 13px; letter-spacing: .08em; opacity: .75; }
.cx__ja { font-weight: 700; font-size: 14px; line-height: 1.35; min-height: 2.7em; display: flex; align-items: center; justify-content: center; }
.cx__box { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 200px; padding-top: 30px; border-bottom: 2px solid var(--deep); }
.cx__b { flex: 1; max-width: 70px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.cx__v { font-size: 15px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; }
.cx__b--0 .cx__v { font-family: var(--fj); font-size: 11.5px; letter-spacing: 0; white-space: nowrap; line-height: 1.35; margin-bottom: 8px; }
.cx__bar { display: block; width: 100%; height: calc(var(--v) * 1.5px); background: var(--deep); border-radius: 3px 3px 0 0; transform-origin: 50% 100%; }
.cx__sub { position: absolute; bottom: -24px; font-size: 11px; white-space: nowrap; }
.cx__b { position: relative; }
html.js .cx .cx__bar { transform: scaleY(0); transition: transform .6s var(--ease); transition-delay: calc(var(--j) * 90ms); }
html.js .cx.is-in .cx__bar { transform: none; }
.cx__mark { position: absolute; top: 4px; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--ember); }
.cx__mark span { position: absolute; top: -2px; left: 6px; font-size: 11px; font-weight: 700; color: #A3471A; white-space: nowrap; }
.cx__c--tick .cx__box::after { content: ""; position: absolute; top: 30px; bottom: 0; left: 50%; border-left: 1px dashed rgba(31, 59, 45, .5); }
.cx__day { margin-top: 30px; font-size: 12.5px; opacity: .8; min-height: 1.6em; }
.cx__warn { margin: 18px 0 0; padding: 14px 18px; background: var(--deep); color: var(--sand); border-radius: 4px; font-weight: 500; }
.fee--cx { background: var(--white); }
.cx__reply { font-weight: 500; padding: 14px 18px; border-left: 4px solid var(--ember); background: rgba(255, 255, 255, .55); }
.wx { display: grid; gap: 14px; margin: 26px 0 22px; max-width: 900px; }
.wx__i { position: relative; background: var(--sand); color: var(--deep); padding: 20px 24px 16px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px); }
.wx__i h3 { font-size: 18px; margin-bottom: 6px; }
.wx__i p { margin: 0 0 .5em; }
.ln .btns { margin-top: 18px; }
.kv { width: 100%; border-collapse: collapse; }
.kv th, .kv td { text-align: left; vertical-align: top; padding: 14px 12px; border-bottom: 1px solid rgba(31, 59, 45, .22); }
.kv th { width: 13em; font-weight: 700; }
.kv--mise th { width: 15em; }

/* アクセス */
.road { display: grid; grid-template-columns: 1fr 1.3fr; gap: 44px; align-items: start; }
.em { margin: 0; }
.em svg { width: 100%; height: auto; background: var(--lt); border-radius: 6px; }
.em svg .contour { display: none; }
.em path:not(.contour path) { fill: none; }
.em-river { stroke: var(--river); stroke-width: 16; stroke-linecap: round; }
.em-road { stroke: var(--deep); stroke-width: 4; stroke-linecap: round; }
.em-narrow { stroke: var(--ember); stroke-width: 4; stroke-dasharray: 9 7; stroke-linecap: round; }
.em-wrong { stroke: var(--deep); stroke-opacity: .35; stroke-width: 2.5; stroke-dasharray: 3 6; stroke-linecap: round; }
.em-x path { stroke: #A3471A; stroke-width: 3; stroke-linecap: round; }
.em-pt rect, .em-pt path { fill: var(--white) !important; stroke: var(--deep); stroke-width: 2; }
.em-pin { fill: var(--ember); stroke: var(--deep); stroke-width: 1.5; }
.em-t { font: 700 19px var(--fj); fill: var(--deep); paint-order: stroke; stroke: var(--lt); stroke-width: 5px; }
.em-t--b { font-size: 21px; }
.em-s { font: 500 16px var(--fj); fill: var(--deep); paint-order: stroke; stroke: var(--lt); stroke-width: 5px; }
.em .note { margin-top: 6px; }
.mc { margin: 34px 0 20px; }
.mc__row { display: flex; align-items: stretch; }
.mc__s { position: relative; flex: 1; padding: 34px 8px 0; text-align: center; }
.mc__s::before { content: ""; position: absolute; top: 12px; left: 50%; right: -50%; height: 4px; background: var(--deep); }
.mc__s:last-child::before { display: none; }
.mc__s:nth-child(3)::before, .mc__s:nth-child(4)::before { background: repeating-linear-gradient(90deg, var(--ember) 0 10px, transparent 10px 17px); }
.mc__s::after { content: ""; position: absolute; top: 6px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--sand); border: 3px solid var(--deep); }
.mc__s--goal::after { background: var(--ember); }
.mc__n { display: block; font-weight: 700; font-size: 14.5px; }
.mc__d { display: block; font-size: 14px; }
.mc__s--narrow .mc__n, .mc__s--narrow .mc__d { color: #8A3D0C; }
.kr { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.kr__ph { margin: 0; }
.kr__ph .ph { aspect-ratio: 4 / 3; }
.kr__ph img { object-position: 50% 100%; }
.kr__ph figcaption { font-size: 13.5px; margin-top: 10px; }
.ss { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 32px 0 36px; border-top: 1px solid rgba(232, 220, 194, .3); }
.ss li { padding: 20px 20px 4px 0; }
.ss li + li { padding-left: 20px; border-left: 1px solid rgba(232, 220, 194, .3); }
.ss__en { display: block; font-size: 13px; letter-spacing: .16em; color: var(--ember); font-weight: 700; }
.ss__m { display: block; font-weight: 700; font-size: 18px; margin: 4px 0 8px; }
.ss p { font-size: .94em; margin: 0; }
.ss__ph { aspect-ratio: 21 / 8; }
.ss__ph img { object-position: 50% 0; }

/* ---------- フッター ---------- */
.ft { position: relative; overflow: hidden; background: #172E22; color: var(--sand); padding: 64px 0 22px; }
.ft__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; max-width: 1160px; margin: 0 auto; padding: 0 var(--pad); }
.ft__addr { font-style: normal; margin: 22px 0 14px; font-size: 14.5px; line-height: 1.9; }
.ft__addr a { color: var(--sand); }
.ft__season { font-size: 13.5px; opacity: .9; }
.ft__season .num { display: block; font-size: 13px; letter-spacing: .14em; color: var(--ember); margin-bottom: 2px; }
.ft__nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.ft__nav a { display: block; padding: 8px 0; color: var(--sand); text-decoration: none; font-size: 14.5px; }
.ft__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ft__sub { margin-top: 14px; font-size: 13.5px; }
.ft__sub a { color: var(--sand); }
.ft__copy { position: relative; z-index: 1; text-align: center; margin: 44px 0 0; font-size: 12px; opacity: .7; }

/* ---------- 見えたら出す ---------- */
html.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .rv.is-in { opacity: 1; transform: none; }

/* ---------- スマホ・タブレット ---------- */
@media (max-width: 960px) {
  .book { grid-template-columns: 1fr; gap: 28px; }
  .two, .fire, .kawa, .freez, .shop, .kan, .rl, .oto, .inu, .road, .kr { grid-template-columns: 1fr; gap: 30px; }
  .fire__ph { aspect-ratio: 4 / 3; order: -1; }
  .kawa__txt { order: -1; }
  .freez__ph { aspect-ratio: 4 / 3; }
  .rl__ph { aspect-ratio: 4 / 3; max-width: 560px; }
  .rl__ph--tall { aspect-ratio: 4 / 5; }
  .inu__ph { aspect-ratio: 4 / 5; max-width: 440px; }
  .kr__ph .ph { aspect-ratio: 3 / 2; }
  .zone, .zone--r { grid-template-columns: 1fr; gap: 14px; }
  .zone--r .zone__mark { order: 0; }
  .zone__mark { flex-direction: row; align-items: center; gap: 14px; }
  .stake--big > span { font-size: 40px; padding: 18px 20px 10px; min-width: 70px; }
  .ss { grid-template-columns: 1fr 1fr; }
  .ss li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ss li:nth-child(n+3) { border-top: 1px solid rgba(232, 220, 194, .3); }
  .gm__row { grid-template-columns: 1fr; }
  .gm__area--ash .gm__set { grid-template-columns: repeat(3, 1fr); }
  .aki__real { margin-left: 0 !important; }
  .hero__season { bottom: 150px; }
}
@media (max-width: 700px) {
  .hero__ph { height: 70svh; min-height: 440px; }
  .hero__ph::after { background: linear-gradient(0deg, rgba(8, 18, 12, .82) 0%, rgba(8, 18, 12, .2) 42%, rgba(8, 18, 12, 0) 60%), linear-gradient(rgba(8, 18, 12, .4), rgba(8, 18, 12, 0) 22%); }
  .hero__txt { display: contents; }
  .hero__h { grid-area: 1 / 1; align-self: end; position: relative; z-index: 2; padding: 0 var(--pad); margin: 0 0 22px; font-size: clamp(29px, 7.6vw, 38px); }
  .hero__more { grid-area: 2 / 1; padding: 20px var(--pad) 30px; }
  .hero__season { top: 76px; bottom: auto; font-size: 12px; }
  .aki { grid-area: 3 / 1; align-self: auto; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px var(--pad) 20px; }
  .aki__tags { flex-wrap: wrap; }
  .btns .btn { flex: 1 1 100%; }
  .oshirase { flex-direction: column; gap: 6px; }
  .oshirase ul { flex-direction: column; }
  .oshirase__mihon { margin: 0; }
  .maeni { grid-template-columns: 1fr; gap: 26px; }
  .zone__grid { grid-template-columns: 1fr; gap: 20px; }
  .eq__i { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .eq__i:nth-child(1) .eq__ph { aspect-ratio: 4 / 3; }
  .eq__ph { max-width: none; }
  .eq__big { aspect-ratio: auto; padding: 22px 0; }
  .post li { grid-template-columns: 80px 1fr; gap: 14px; }
  .post .stake > span { font-size: 18px; }
  .fee th, .fee td { padding: 12px 8px; font-size: 14.5px; }
  .fee thead th:nth-child(2), .fee tbody td:nth-child(2):not(.num) { white-space: nowrap; }
  .gm__set, .gm__area--ash .gm__set { grid-template-columns: 1fr 1fr; }
  .gm__t { min-height: 0; }
  .cal { padding: 12px 8px; }
  .cal__c { min-height: 64px; padding: 4px 3px; font-size: 12px; }
  .cal__m i { display: none; }
  .cal__m span { justify-content: center; }
  .cal__d { font-size: 13px; text-align: center; }
  .cal__off { text-align: center; }
  .cal__sp { display: block !important; }
  .how { grid-template-columns: 1fr; gap: 14px; }
  .form__grid { grid-template-columns: 1fr; }
  .cx { padding: 16px 12px 14px; }
  .cx__row { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .cx__box { height: 180px; }
  .cx__b--0 .cx__v { white-space: normal; font-size: 11px; }
  .kv th, .kv td { display: block; width: auto; padding: 4px 0; border: 0; }
  .kv th { padding-top: 14px; }
  .kv tr { display: block; border-bottom: 1px solid rgba(31, 59, 45, .22); padding-bottom: 12px; }
  .mc__row { flex-direction: column; }
  .mc__s { text-align: left; padding: 0 0 22px 38px; }
  .mc__s::before { top: 14px; bottom: -14px; left: 9px; right: auto; width: 4px; height: auto; }
  .mc__s:nth-child(3)::before, .mc__s:nth-child(4)::before { background: repeating-linear-gradient(180deg, var(--ember) 0 10px, transparent 10px 17px); }
  .mc__s::after { top: 2px; left: 11px; }
  .mc__n, .mc__d { display: inline; margin-right: 8px; }
  .ss { grid-template-columns: 1fr; }
  .ss li, .ss li + li { padding: 16px 0 6px; border-left: 0; }
  .ss li + li { border-top: 1px solid rgba(232, 220, 194, .3); }
  .ss__ph { aspect-ratio: 2 / 1; }
  .ft__in { grid-template-columns: 1fr; }
}
.cal__sp { display: none; font-size: 12.5px; margin: 0 0 8px; }

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