/* CAWAZ base — riverside outdoor base in Koma, Hidaka.
   Layout: full-bleed photography with type set directly on it; content in a paper column between.
   Bold Japanese display headlines, small letter-spaced English labels, one ember accent for booking. */
:root{
  --paper:#F4F1E8;
  --card:#FFFFFF;
  --ink:#1C221E;
  --muted:#5E675F;
  --line:#DCD8CB;
  --moss:#3F5E46;
  --moss-pale:#E6ECE2;
  --night:#141A16;
  --ember:#D86A2B;
  --ember-dark:#B9551C;
  --f-head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --f-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-en:"Josefin Sans","Futura","Helvetica Neue",sans-serif;
  --wrap:1180px;
  --gl:max(20px, env(safe-area-inset-left, 0px));
  --gr:max(20px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15.5px;line-height:1.9;letter-spacing:.03em;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--moss)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:900;line-height:1.4;letter-spacing:.04em;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.en{font-family:var(--f-en);font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:12.5px}
.sec{padding-block:112px}
.hl{background:linear-gradient(transparent 62%,rgba(216,106,43,.28) 62%);font-weight:700;font-style:normal}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--night)}
.hdr{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px;max-width:none}
.hdr.solid,.page .hdr{background:rgba(20,26,22,.92);backdrop-filter:blur(8px)}
.logo{display:flex;align-items:baseline;gap:8px;color:#fff;text-decoration:none}
.logo b{font-family:var(--f-en);font-weight:700;font-size:22px;letter-spacing:.14em}
.logo span{font-family:var(--f-en);font-size:13px;letter-spacing:.3em;opacity:.85}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:#fff;text-decoration:none;font-size:13.5px;font-weight:500;letter-spacing:.08em;opacity:.92}
.nav a:hover,.nav a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ember);color:#fff!important;text-decoration:none;font-weight:700;font-size:14.5px;letter-spacing:.1em;padding:14px 30px;border-radius:999px;border:none;cursor:pointer;transition:background .2s,transform .2s;font-family:var(--f-body)}
.btn:hover{background:var(--ember-dark);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.85)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-line{background:transparent;color:var(--ink)!important;border:1.5px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff!important}
.nav .btn{padding:10px 22px;font-size:13px;opacity:1}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.6);color:#fff;border-radius:999px;height:40px;padding:0 16px;font-family:var(--f-en);font-weight:600;letter-spacing:.16em;font-size:12px;cursor:pointer}
@media (max-width:960px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:calc(68px + env(safe-area-inset-top,0px)) 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--night);padding:8px var(--gr) 28px var(--gl);display:none;max-height:calc(100vh - 68px);overflow:auto}
  .nav.open{display:flex}
  .nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px}
  .nav .btn{margin-top:20px;padding:15px}
}

/* hero video */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--night)}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,12,.45) 0%,rgba(10,14,12,0) 30%,rgba(10,14,12,.15) 55%,rgba(10,14,12,.78) 100%)}
.hero-in{position:relative;z-index:1;width:100%;padding-block:0 72px}
.hero .en{opacity:.9}
.hero h1{font-size:clamp(34px,5.6vw,72px);line-height:1.3;margin-top:16px;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero p.sub{margin-top:20px;font-size:16px;font-weight:500;max-width:34em;opacity:.95}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.3);font-size:13.5px}
.facts b{font-weight:700}

/* page hero (photo) */
.phero{position:relative;min-height:min(70vh,620px);display:flex;align-items:flex-end;color:#fff;background:var(--night) center/cover no-repeat;overflow:hidden}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,12,.5) 0%,rgba(10,14,12,0) 35%,rgba(10,14,12,.72) 100%)}
.phero .wrap{position:relative;z-index:1;width:100%;padding-block:0 56px}
.phero h1{font-size:clamp(32px,5vw,60px);margin-top:12px}
.phero p{margin-top:14px;font-size:16px;font-weight:500;max-width:36em}

/* section head */
.sh{margin-bottom:48px}
.sh .en{color:var(--ember)}
.sh h2{font-size:clamp(26px,3.4vw,40px);margin-top:10px}
.sh p{margin-top:16px;color:var(--muted);max-width:40em}
.sh.center{text-align:center}.sh.center p{margin-inline:auto}

/* experience tiles */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.tile{position:relative;display:block;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;min-height:380px;background:var(--night);isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;z-index:-2}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%);z-index:-1}
.tile:hover img{transform:scale(1.05)}
.tile .in{position:absolute;inset:auto 0 0 0;padding:26px 26px 24px}
.tile .en{opacity:.85;font-size:11.5px}
.tile h3{font-size:28px;margin-top:6px}
.tile p{font-size:14px;margin-top:8px;opacity:.92;line-height:1.7}
.tile .price{display:inline-block;margin-top:14px;font-weight:700;font-size:14px;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);padding:5px 14px;border-radius:999px}
.tile .price:empty{display:none}
.t-a{grid-column:span 4;min-height:460px}.t-b{grid-column:span 2;min-height:460px}
.t-c{grid-column:span 2}.t-d{grid-column:span 2}.t-e{grid-column:span 2}
.tile[hidden]{display:none}

/* statement band */
.band{position:relative;min-height:560px;display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--night)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,12,.72) 0%,rgba(10,14,12,.25) 60%,rgba(10,14,12,0) 100%)}
.band .wrap{position:relative;z-index:1;width:100%}
.band h2{font-size:clamp(34px,5vw,64px);line-height:1.3}
.band p{margin-top:20px;max-width:30em;font-size:16px}
.band .btn{margin-top:28px}

/* reasons */
.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.reasons li{list-style:none;padding:28px 24px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.reasons li:last-child{border-right:none}
.reasons .n{font-family:var(--f-en);font-weight:700;color:var(--ember);font-size:13px;letter-spacing:.2em}
.reasons h3{font-size:19px;margin-top:10px;line-height:1.5}
.reasons p{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.8}
ul.reasons{padding:0;margin:0}

/* gallery strip */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,32%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.strip img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;scroll-snap-align:start}

/* more (low-key) */
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.more a{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:var(--card);border-radius:14px;padding:12px;text-decoration:none;color:var(--ink)}
.more img{width:120px;height:90px;object-fit:cover;border-radius:10px}
.more h3{font-size:16px}
.more p{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:4px}

/* access */
.access{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.access img.map{border-radius:16px;width:100%}
.dl{display:grid;grid-template-columns:120px 1fr;margin:0}
.dl dt,.dl dd{padding:14px 0;border-bottom:1px solid var(--line);margin:0;font-size:14.5px}
.dl dt{color:var(--muted);font-weight:500}
.contact-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.line-btn{background:#06C755}.line-btn:hover{background:#05a948}

/* plans (data-driven) */
.plans{display:grid;gap:28px}
.plan{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--card);border-radius:20px;overflow:hidden}
.plan .ph{position:relative;min-height:320px;background:var(--moss-pale)}
.plan .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plan .bd{padding:34px 36px 32px;display:flex;flex-direction:column;gap:14px;min-width:0}
.plan h3{font-size:24px}
.plan .tag{font-family:var(--f-head);font-weight:700;color:var(--moss);font-size:15.5px;line-height:1.7}
.plan .desc{font-size:14px;color:var(--muted)}
.price-box{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.price-box .p{font-family:var(--f-en);font-weight:700;font-size:28px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.price-box .u{font-size:13px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:12.5px;font-weight:500;background:var(--moss-pale);color:var(--moss);padding:4px 12px;border-radius:999px;font-variant-numeric:tabular-nums}
.plan details{border-top:1px solid var(--line);padding-top:10px}
.plan details+details{border-top:none;padding-top:0}
.plan summary{cursor:pointer;font-weight:700;font-size:13.5px;padding:6px 0;list-style:none;display:flex;justify-content:space-between}
.plan summary::after{content:"＋";color:var(--muted)}
.plan details[open] summary::after{content:"－"}
.plan ul{margin:6px 0 10px;padding-left:1.1em;font-size:13.5px;color:var(--muted);line-height:1.8}
.plan .act{margin-top:auto;padding-top:8px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.plan .act small{color:var(--muted);font-size:12px}
.plan.skeleton .bd{min-height:280px}
.plan.skeleton h3,.plan.skeleton .tag{color:transparent;background:var(--moss-pale);border-radius:6px}
.plan:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.plan:nth-child(even) .ph{order:2}
.policy{background:var(--card);border-radius:16px;padding:28px 32px}
.policy h3{font-size:17px}
.policy ul{margin:12px 0 0;padding-left:1.1em;font-size:14px;line-height:1.9}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.gal img:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}
.note{font-size:13px;color:var(--muted)}
.load-err{background:#FFF4EC;border:1px solid #F1C9AC;border-radius:12px;padding:16px 20px;font-size:14px}

/* spots */
.spots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.spot img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px}
.spot h3{font-size:17px;margin-top:12px}
.spot p{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.8}
.spot-list{columns:2;column-gap:40px;padding:0;margin:0;list-style:none}
.spot-list li{break-inside:avoid;padding:14px 0;border-bottom:1px solid var(--line)}
.spot-list b{display:block;font-size:15px}
.spot-list span{font-size:13px;color:var(--muted)}

/* sticky booking bar (mobile) */
.book-bar{display:none}
@media (max-width:720px){
  .book-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:10px;padding:10px var(--gr) calc(10px + env(safe-area-inset-bottom,0px)) var(--gl);background:rgba(20,26,22,.94);backdrop-filter:blur(8px)}
  .book-bar .btn{flex:1;padding:13px}
  .book-bar .line-btn{flex:0 0 auto}
  body{padding-bottom:72px}
}

/* footer */
.ftr{background:var(--night);color:#C9D1CA;font-size:13.5px}
.ftr .wrap{padding-block:72px 36px}
.ftr-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px}
.ftr h4{font-family:var(--f-en);font-size:12px;letter-spacing:.24em;color:#8FA593;margin-bottom:14px;font-weight:600}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ftr a{color:#fff;text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr .logo{margin-bottom:14px}
.copy{margin-top:56px;padding-top:22px;border-top:1px solid #2C352E;font-size:11.5px;color:#7E8A80;letter-spacing:.06em}

@media (max-width:980px){
  .tiles{grid-template-columns:1fr 1fr}
  .t-a,.t-b,.t-c,.t-d,.t-e{grid-column:span 1;min-height:340px}
  .t-a{grid-column:span 2}
  .reasons{grid-template-columns:1fr 1fr}
  .reasons li:nth-child(2){border-right:none}
  .more{grid-template-columns:1fr}
  .access{grid-template-columns:1fr;gap:32px}
  .plan,.plan:nth-child(even){grid-template-columns:1fr}
  .plan:nth-child(even) .ph{order:0}
  .plan .ph{min-height:240px}
  .spots{grid-template-columns:1fr 1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:620px){
  body{font-size:15px}
  .sec{padding-block:76px}
  .hero{min-height:88vh}
  .hero-in{padding-block:0 48px}
  .hero p.sub{font-size:14.5px}
  .facts{font-size:12.5px;gap:6px 18px}
  .tiles{grid-template-columns:1fr;gap:14px}
  .t-a{grid-column:span 1}
  .tile,.t-a,.t-b,.t-c,.t-d,.t-e{min-height:300px}
  .tile h3{font-size:24px}
  .band{min-height:480px}
  .band::after{background:linear-gradient(180deg,rgba(10,14,12,.3) 0%,rgba(10,14,12,.75) 100%)}
  .reasons{grid-template-columns:1fr}
  .reasons li{border-right:none}
  .strip{grid-auto-columns:72%}
  .plan .bd{padding:24px 20px}
  .policy{padding:22px 20px}
  .gal{grid-template-columns:1fr 1fr}
  .spots{grid-template-columns:1fr}
  .spot-list{columns:1}
  .dl{grid-template-columns:96px 1fr}
  .more a{grid-template-columns:96px 1fr}.more img{width:96px;height:80px}
}

/* one-day timeline */
.day-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:d;position:relative}
.day-line li{position:relative}
.day-line img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.day-line .t{font-family:var(--f-en);font-weight:700;font-size:26px;letter-spacing:.04em;margin-top:16px;color:var(--ember);font-variant-numeric:tabular-nums}
.day-line .t::after{content:"";display:inline-block;width:calc(100% - 90px);height:1px;background:var(--line);vertical-align:middle;margin-left:14px}
.day-line h3{font-size:19px;margin-top:4px}
.day-line li>p:last-child{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.8}
@media (max-width:980px){.day-line{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.day-line{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:70%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.day-line li{scroll-snap-align:start}}
.ftr small{color:#8E998F}
.dl small{color:var(--muted);font-size:12.5px;display:block;margin-top:4px;line-height:1.7}
.load-err ul{margin:8px 0 0;padding-left:1.2em}

/* instagram */
.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.ig-grid .instagram-media,.ig-grid iframe{min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important;border-radius:14px!important}
.ig-grid blockquote.instagram-media{background:var(--card);border:0;padding:40px 16px;text-align:center;min-height:360px;display:flex;align-items:center;justify-content:center}
.ig .contact-row{margin-top:28px}
@media (max-width:980px){.ig-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(300px,80%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.ig-grid>*{scroll-snap-align:start}}
.t-f{grid-column:span 6;min-height:340px}
.t-f h3{font-size:32px}
@media (max-width:980px){.t-f{grid-column:span 2;min-height:320px}}
@media (max-width:620px){.t-f{grid-column:span 1;min-height:320px}.t-f h3{font-size:24px}}

/* よくあるご質問（2026-10-26） */
.faq{max-width:820px;display:grid;gap:12px}
.faq details{background:var(--card);border-radius:14px;padding:0 24px;border:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-weight:700;font-size:16px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--ember);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 20px;color:var(--muted);font-size:15px;line-height:1.9}

/* 料金・時間の表、日帰りガイド（2026-11-03） */
.psum{margin:0 0 36px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.psum h3{font-size:17px;margin:0 0 14px}
.ptable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.7}
.ptable th,.ptable td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ptable thead th{font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.ptable tbody th{font-weight:700;min-width:11em}
.ptable td{color:var(--ink)}
.psum .note{margin-top:12px}
.glance{max-width:900px}
.glance dt{white-space:nowrap}
@media (max-width:620px){
  .psum{padding:18px 16px}
  .ptable{font-size:13.5px}
  .ptable th,.ptable td{padding-right:10px}
  .glance{grid-template-columns:84px 1fr}
}

/* シーン別おすすめ（2026-11-03） */
.points{list-style:none;margin:0;padding:0;max-width:900px}
.points li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.8}
.points li::before{content:"";position:absolute;left:4px;top:1.15em;width:7px;height:7px;border-radius:50%;background:var(--ember)}
.scene+.scene{border-top:0}