/* =========================================================
   DOMON BOX — section styles (extends corporate site.css)
   Loaded AFTER css/site.css. Reuses all corporate tokens.
   ========================================================= */

/* ---------- section sub-nav (sticky under the fixed header) ---------- */
.subnav{position:sticky; top:var(--header-h); z-index:40; background:color-mix(in oklch,var(--paper) 90%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto; padding:var(--space-5) 0; font-size:.82rem; letter-spacing:.06em; color:var(--ink-2); position:relative; white-space:nowrap; transition:color .3s}
.subnav a::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current="page"]{color:var(--brand)}
.subnav a:hover::after,.subnav a[aria-current="page"]::after{transform:scaleX(1)}
.subnav .cta-lite{margin-left:auto; color:var(--brand); font-family:var(--lat); letter-spacing:.1em; font-size:.78rem}

/* ---------- DOMON BOX brand hero ---------- */
.box-hero{position:relative; padding:calc(var(--header-h) + clamp(56px,11vh,110px)) 0 clamp(48px,8vh,90px); border-bottom:1px solid var(--line); overflow:hidden; background:var(--paper-2)}
.box-hero::after{content:""; position:absolute; right:-8%; top:-40%; width:52%; height:180%; background:radial-gradient(closest-side, color-mix(in oklch,var(--gold) 26%,transparent), transparent 70%); z-index:0; pointer-events:none}
.box-hero .wrap{position:relative; z-index:1}
.box-hero .mark{font-family:var(--lat); letter-spacing:.34em; text-transform:uppercase; font-size:clamp(1.7rem,4.6vw,3rem); color:var(--brand); line-height:1}
.box-hero .mark small{display:block; font-family:var(--lat); letter-spacing:.3em; font-size:.72rem; color:var(--brand-soft); margin-top:var(--space-4)}
.box-hero h1{font-family:var(--disp); font-weight:700; font-size:clamp(1.7rem,3.8vw,2.9rem); line-height:1.35; letter-spacing:.03em; margin:var(--space-6) 0 var(--space-5); color:var(--ink)}
.box-hero .sub{color:var(--ink-2); max-width:52ch; font-size:1.04rem; line-height:1.95}
.box-hero .acts{display:flex; flex-wrap:wrap; gap:var(--space-5); align-items:center; margin-top:var(--space-8)}
.box-hero .tel-lg{font-family:var(--lat); font-size:1.5rem; color:var(--brand); letter-spacing:.04em; display:inline-flex; align-items:center; gap:10px}
.box-hero .tel-lg small{font-family:var(--body); font-size:.72rem; letter-spacing:.06em; color:var(--ink-2)}
.box-hero .crumb{font-size:.76rem; color:var(--ink-2); letter-spacing:.04em; display:flex; gap:var(--space-3); align-items:center; margin-bottom:var(--space-6)}
.box-hero .crumb a:hover{color:var(--brand)} .box-hero .crumb span{color:var(--brand-soft)}

/* ---------- 9 features (extends .principles) ---------- */
.features .p{position:relative}
.features .p .ic{width:34px; height:34px; color:var(--brand); display:block; margin-bottom:var(--space-5)}
.features .p .ic svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.features .p h3{margin-top:0}

/* ---------- rooms / price table ---------- */
.rooms-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line)}
.rooms{width:100%; border-collapse:collapse; min-width:520px; background:var(--paper)}
.rooms caption{caption-side:top; text-align:left; font-family:var(--disp); color:var(--brand); font-size:1.05rem; padding:var(--space-5) var(--space-6); background:var(--paper-2); border-bottom:1px solid var(--line)}
.rooms th,.rooms td{padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--line); text-align:left; font-size:.95rem}
.rooms thead th{font-family:var(--lat); letter-spacing:.1em; text-transform:uppercase; font-size:.72rem; color:var(--brand-soft); background:var(--paper-2); position:sticky; top:0}
.rooms tbody th{font-family:var(--disp); color:var(--ink); font-weight:700; width:5ch}
.rooms td.num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.rooms td.camp{color:var(--brand); font-weight:500}
.rooms tbody tr:hover{background:color-mix(in oklch,var(--gold) 7%,transparent)}
.price-note{margin-top:var(--space-6); color:var(--ink-2); font-size:.84rem; line-height:1.9}
.price-note li{list-style:none; padding-left:1.4em; position:relative}
.price-note li::before{content:"※"; position:absolute; left:0; color:var(--brand-soft)}
.zerobar{display:flex; flex-wrap:wrap; gap:var(--space-4); margin:var(--space-6) 0 var(--space-8)}
.zerobar span{border:1px solid var(--brand); color:var(--brand); font-family:var(--disp); font-size:.9rem; letter-spacing:.06em; padding:8px 16px}

/* ---------- flow steps ---------- */
.steps{counter-reset:st; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--space-6)}
.steps .st{background:var(--paper); padding:clamp(24px,3.2vw,40px); display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,34px); align-items:start}
.steps .st::before{counter-increment:st; content:"0" counter(st); font-family:var(--lat); font-size:1.5rem; color:var(--brand-soft); letter-spacing:.06em; line-height:1}
.steps .st h3{font-family:var(--disp); font-weight:600; font-size:1.2rem; color:var(--ink); margin-bottom:var(--space-3)}
.steps .st p{color:var(--ink-2); font-size:.94rem; max-width:56ch}
.needs{margin-top:var(--space-6); border-top:1px solid var(--line)}
.needs li{display:grid; grid-template-columns:auto 1fr; gap:var(--space-5); padding:var(--space-5) var(--space-3); border-bottom:1px solid var(--line); align-items:baseline; list-style:none; color:var(--ink); font-size:.95rem}
.needs li b{font-family:var(--lat); color:var(--brand-soft); font-weight:400}
.needs .fn{color:var(--ink-2); font-size:.82rem; margin-top:var(--space-4)}

/* ---------- access extras ---------- */
.access-cols{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,6vw,80px); align-items:start; margin-top:var(--space-8)}
.access-cols iframe{width:100%; aspect-ratio:4/3; border:1px solid var(--line); filter:grayscale(.3) contrast(.95); display:block}
.route{list-style:none; margin-top:var(--space-5)}
.route li{display:flex; gap:var(--space-5); padding:var(--space-5) 0; border-top:1px solid var(--line); color:var(--ink); font-size:.95rem}
.route li:last-child{border-bottom:1px solid var(--line)}
.route li b{font-family:var(--disp); color:var(--brand); white-space:nowrap; min-width:7ch}
@media(max-width:920px){.access-cols{grid-template-columns:1fr}}

/* ---------- inquiry (reuses .form-grid/.field/.contact-side) ---------- */
.inq-lead{max-width:var(--measure); color:var(--ink-2); margin-bottom:var(--space-8)}