/* 山中商店 地域LP（解体工事） — Ponpon Mania の画風・章UI × くにおくん の見出し文法・舞台帯 を再設計 */
:root{
  --ink:#060403; --red:#FC0800; --yel:#FDE300; --blu:#3747AD; --gold:#D5A60A;
  --paper:#F5F3EE; --white:#fff; --mute:#5b5750;
  --city:#64B721; --city-on:#111;
  --line:4px; --r:18px;
  --ff:"Zen Kaku Gothic New",system-ui,sans-serif; --fe:"Inter","Zen Kaku Gothic New",sans-serif;
  --pad:clamp(16px,4vw,56px); --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{font-family:var(--ff);font-weight:500;color:var(--ink);background:var(--paper);line-height:1.85;font-size:16px;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;cursor:pointer}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--ink);color:#fff;padding:8px 14px}
.skip:focus{left:8px}
:focus-visible{outline:4px solid var(--yel);outline-offset:3px}

/* 粒子ノイズ（Ponpon の紙肌）。固定1枚、静的 */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ===== header ===== */
.hd{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:12px;padding:10px var(--pad);pointer-events:none}
.hd>*{pointer-events:auto}
.hd-logo{background:#fff;border:var(--line) solid var(--ink);border-radius:999px;padding:6px 16px;display:flex;align-items:center;box-shadow:4px 4px 0 var(--ink)}
.hd-logo img{height:34px;width:auto}
.chap-btn{margin-left:auto;background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:6px 18px;font-family:var(--fe);font-weight:900;font-size:15px;letter-spacing:.02em;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--ink)}
.chap-btn:hover{transform:rotate(0) scale(1.04)}
.hd-tel{display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;text-decoration:none;border-radius:999px;padding:8px 16px;font-family:var(--fe);font-weight:900;font-size:17px}
.hd-tel svg{width:18px;height:18px}
.hd-cta{background:var(--red);color:#fff;text-decoration:none;border:3px solid var(--ink);border-radius:999px;padding:7px 18px;font-weight:900;box-shadow:4px 4px 0 var(--ink)}
@media (max-width:860px){.hd-tel,.hd-cta{display:none}.hd-logo img{height:26px}}

/* ===== chapter nav (右端の章番号・くにおくん×Ponpon) ===== */
.cnav{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:6px}
.cnav a{display:grid;place-items:center;width:34px;height:34px;border:3px solid var(--ink);border-radius:50%;background:var(--paper);font-family:var(--fe);font-weight:900;font-size:12px;text-decoration:none;transition:transform .25s,background .25s}
.cnav a[aria-current="true"]{background:var(--city);color:var(--city-on);transform:scale(1.18)}
.cnav a span{position:absolute;right:44px;white-space:nowrap;background:var(--ink);color:#fff;border-radius:6px;padding:2px 8px;font-size:12px;opacity:0;transform:translateX(6px);transition:.2s;pointer-events:none}
.cnav a:hover span,.cnav a:focus-visible span{opacity:1;transform:none}
@media (max-width:860px){.cnav{display:none}}

/* 章の一覧（レコードジャケット） */
.chap-dlg{position:fixed;inset:0;z-index:80;background:rgba(6,4,3,.55);display:none;align-items:center;justify-content:center;padding:20px}
.chap-dlg[open],.chap-dlg.is-open{display:flex}
.chap-dlg ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:980px;width:100%}
.chap-dlg li a{display:block;aspect-ratio:1;border:var(--line) solid var(--ink);border-radius:10px;background:var(--c,#fff);text-decoration:none;padding:14px;position:relative;overflow:hidden;box-shadow:6px 6px 0 var(--ink);transition:transform .2s}
.chap-dlg li a:hover{transform:rotate(-2deg) translateY(-4px)}
.chap-dlg li b{font-family:var(--fe);font-size:34px;line-height:1;display:block}
.chap-dlg li em{font-style:normal;font-weight:900;font-size:15px;line-height:1.4;display:block;margin-top:6px}
.chap-dlg .close{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:var(--yel);font-size:24px;font-weight:900}
@media (max-width:700px){.chap-dlg ol{grid-template-columns:repeat(2,1fr)}}

/* ===== 共通: 章見出し（くにおくん型: 極太和文＋●英字● ） ===== */
.ch{position:relative;padding:clamp(88px,12vw,150px) 0 clamp(72px,9vw,120px)}
.ch-no{font-family:var(--fe);font-weight:900;font-size:13px;letter-spacing:.2em;display:inline-flex;align-items:center;gap:10px}
.ch-no::before,.ch-no::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--city)}
.ch-h{font-weight:900;font-size:clamp(34px,6.2vw,84px);line-height:1.12;letter-spacing:-.01em;margin:.25em 0 .35em;text-wrap:balance}
.ch-h .mk{background:linear-gradient(transparent 62%,var(--yel) 62%);padding:0 .06em}
.ch-lead{max-width:40em;font-size:clamp(16px,1.35vw,18px)}
.answer{margin:22px 0 0;max-width:44em;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:16px 20px 16px 56px;position:relative;font-weight:700}
.answer::before{content:"結論";position:absolute;left:12px;top:14px;writing-mode:vertical-rl;font-size:12px;letter-spacing:.2em;background:var(--ink);color:#fff;border-radius:6px;padding:6px 3px}
.src{font-size:12.5px;color:var(--mute);margin-top:10px}
.src a{color:var(--mute)}

/* ボタン */
.btn{display:inline-flex;align-items:center;gap:10px;border:var(--line) solid var(--ink);border-radius:999px;padding:14px 26px;font-weight:900;font-size:18px;text-decoration:none;box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s;background:var(--red);color:#fff}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.tel{background:#fff;color:var(--ink);font-family:var(--fe)}
.btn.tel small{font-family:var(--ff);font-size:12px;font-weight:700;display:block;line-height:1}
.btn svg{width:22px;height:22px}

/* ===== 00 HERO ===== */
.hero{min-height:100svh;display:grid;align-items:center;position:relative;overflow:hidden;padding:110px 0 60px;
  background:radial-gradient(120% 90% at 78% 40%,color-mix(in srgb,var(--city) 55%,#fff) 0%,color-mix(in srgb,var(--city) 20%,var(--paper)) 45%,var(--paper) 75%)}
.hero-word{position:absolute;left:-2vw;bottom:-4vw;font-family:var(--fe);font-weight:900;font-size:22vw;line-height:.8;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--ink) 18%,transparent);white-space:nowrap;pointer-events:none;user-select:none}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(20px,4vw,60px);align-items:center}
.hero-kick{display:inline-block;background:var(--ink);color:#fff;border-radius:999px;padding:4px 14px;font-weight:900;font-size:14px}
.hero h1{font-weight:900;font-size:clamp(38px,5.6vw,90px);line-height:1.08;margin:.3em 0 .3em;letter-spacing:-.02em}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1 .c{color:var(--red);-webkit-text-stroke:0}
.hero h1 small{display:block;font-size:.34em;letter-spacing:.02em;line-height:1.5;margin-bottom:.2em}
.hero-lead{font-size:clamp(16px,1.4vw,19px);max-width:30em;font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;list-style:none}
.hero-badges li{border:2px solid var(--ink);border-radius:999px;background:#fff;padding:2px 12px;font-size:13px;font-weight:700}
.stage{position:relative;aspect-ratio:1;width:min(100%,640px);margin-left:auto}
.stage-disc{position:absolute;inset:0;border-radius:50%;border:var(--line) solid var(--ink);overflow:hidden;background:var(--city);clip-path:circle(50% at 50% 50%)}
.stage-disc img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.stage-map{position:absolute;inset:8%;overflow:visible}
.stage-map path{fill:var(--city);stroke:var(--ink);stroke-width:8;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.stage-ranger{position:absolute;width:40%;left:-8%;bottom:-4%;filter:drop-shadow(6px 6px 0 rgba(6,4,3,.25))}
.sticker{position:absolute;right:-4%;top:-2%;width:32%;aspect-ratio:1}
.sticker svg{width:100%;height:100%}
.sticker .disc{fill:var(--yel);stroke:var(--ink);stroke-width:5}
.sticker text{font-family:var(--fe);font-weight:900;font-size:21px;letter-spacing:2px;fill:var(--ink)}
.sticker .mid{font-family:var(--ff);font-size:30px;letter-spacing:0}
.photo-note{position:absolute;right:12%;bottom:4%;background:rgba(6,4,3,.72);color:#fff;font-size:11px;border-radius:4px;padding:1px 7px}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--fe);font-weight:900;font-size:12px;letter-spacing:.3em}
@media (max-width:860px){
  .hero{padding-top:88px}
  .hero-grid{grid-template-columns:1fr}
  .stage{margin:0 auto;width:min(92%,440px);order:-1}
  .stage-ranger{width:38%;left:-4%}
}

/* ===== 舞台帯（くにおくん: キャラが行進する境目） ===== */
.band{position:relative;height:150px;overflow:hidden;background:var(--city);border-block:var(--line) solid var(--ink)}
.band-track{position:absolute;left:0;bottom:22px;display:flex;gap:40px;align-items:flex-end;will-change:transform}
.band-track img{height:108px;width:auto}
.band-ground{position:absolute;left:0;right:0;bottom:0;height:22px;background:repeating-linear-gradient(90deg,var(--ink) 0 26px,transparent 26px 40px),#8b6a44;background-size:40px 4px,auto;background-repeat:repeat-x;background-position:0 0}
.marq{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;border-block:var(--line) solid var(--ink)}
.marq p{display:inline-block;font-weight:900;font-size:clamp(18px,2.4vw,30px);padding:10px 0;will-change:transform}
.marq b{color:var(--yel)}

/* ===== 01 お悩み（レコードジャケット） ===== */
.sleeves{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:40px;list-style:none}
.sleeve{position:relative}
.sleeve a{display:block;text-decoration:none;position:relative}
.sleeve .jk,.sleeve .vinyl,.sleeve .ico{display:block}
.sleeve .jk{position:relative;z-index:2;aspect-ratio:1;border:var(--line) solid var(--ink);border-radius:8px;overflow:hidden;background:var(--c);box-shadow:6px 6px 0 var(--ink);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.sleeve .jk img{width:100%;height:100%;object-fit:cover}
.sleeve .jk .ico{position:absolute;inset:0;display:grid;place-items:center}
.sleeve .jk .ico img{width:74%;height:auto;object-fit:contain}
.sleeve .vinyl{position:absolute;z-index:1;top:0;margin-top:6%;left:6%;width:88%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 2px,#232323 2px 4px);border:3px solid var(--ink);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.sleeve .vinyl::after{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--city);border:3px solid var(--ink)}
.sleeve:hover .vinyl,.sleeve a:focus-visible .vinyl{transform:translateX(38%) rotate(40deg)}
.sleeve:hover .jk{transform:rotate(-3deg)}
.sleeve .no{position:absolute;z-index:3;top:-12px;left:-10px;background:var(--yel);border:3px solid var(--ink);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-family:var(--fe);font-weight:900}
.sleeve h3{font-size:19px;font-weight:900;line-height:1.35;margin-top:16px}
.sleeve p{font-size:14px;line-height:1.7;margin-top:6px}
@media (max-width:980px){.sleeves{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 18px;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}.sleeve{scroll-snap-align:start}}

/* ===== 02 杉戸のいま ===== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.stat{background:#fff;border:var(--line) solid var(--ink);border-radius:var(--r);padding:22px 22px 18px;box-shadow:6px 6px 0 var(--ink)}
.stat b{display:block;font-family:var(--fe);font-weight:900;font-size:clamp(44px,5.4vw,76px);line-height:1;color:var(--red)}
.stat b small{font-size:.36em;color:var(--ink);margin-left:4px}
.stat span{display:block;font-weight:900;margin-top:8px}
.stat p{font-size:13px;color:var(--mute);margin-top:4px;line-height:1.6}
.dist{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;margin-top:56px}
.dist-map svg{width:100%;height:auto}
.dist-map path{fill:color-mix(in srgb,var(--city) 35%,#fff);stroke:var(--ink);stroke-width:6;vector-effect:non-scaling-stroke}
.bars{list-style:none;display:grid;gap:12px}
.bars li{display:grid;grid-template-columns:5.5em 1fr 3em;align-items:center;gap:12px;font-weight:900}
.bars i{display:block;height:26px;border:3px solid var(--ink);border-radius:999px;background:var(--city);transform-origin:left;width:var(--w)}
.bars li:first-child i{background:var(--red)}
.bars em{font-style:normal;font-family:var(--fe)}
@media (max-width:860px){.stats{grid-template-columns:1fr}.dist{grid-template-columns:1fr}}

/* ===== 03 解体ものがたり（ピン留めスクラブ） ===== */
.story{background:#fff;border-block:var(--line) solid var(--ink)}
.story-pin{height:100svh;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(16px,3vw,40px);align-items:center;padding:84px var(--pad) 24px;max-width:1440px;margin:0 auto}
.steps{list-style:none;counter-reset:s;display:grid;gap:4px}
.steps li{counter-increment:s;padding:10px 14px 10px 54px;border-radius:12px;position:relative;opacity:.38;transition:opacity .3s,background .3s}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:10px;top:10px;font-family:var(--fe);font-weight:900;font-size:15px;width:34px;height:34px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;background:#fff}
.steps li.on{opacity:1;background:var(--paper)}
.steps li.on::before{background:var(--city);color:var(--city-on)}
.steps h3{font-size:18px;font-weight:900;line-height:1.4}
.steps p{font-size:14px;line-height:1.7;display:none}
.steps li.on p{display:block}
.scene{position:relative;border:var(--line) solid var(--ink);border-radius:22px;overflow:hidden;background:#cfe7f5;box-shadow:8px 8px 0 var(--ink)}
.scene svg{width:100%;height:auto}
.scene .rg{position:absolute;width:19%;bottom:15%;left:3%;transform-origin:50% 100%;z-index:2}
.scene .rg img{width:100%}
.scene .rg img+img{position:absolute;inset:0}
.scene-cap{position:absolute;left:14px;top:12px;background:var(--ink);color:#fff;border-radius:999px;padding:3px 14px;font-weight:900;font-size:14px}
.scene-tag{position:absolute;right:14px;top:12px;background:var(--yel);border:3px solid var(--ink);border-radius:999px;padding:1px 12px;font-weight:900;font-size:13px}
.story-no-js .steps li{opacity:1}.story-no-js .steps p{display:block}
@media (max-width:860px){
  .story-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:10px;padding-top:70px}
  .scene{order:-1}
  .steps li{display:none;opacity:1}
  .steps li.on{display:block}
  .scene .rg{width:22%}
}

/* ===== 04 費用 ===== */
.try{display:flex;align-items:flex-end;gap:14px;margin-top:56px}
.try img{width:clamp(64px,7vw,96px);flex:none;transform-origin:50% 100%;animation:tryNod 1.6s ease-in-out infinite}
.try-h{display:inline-block;position:relative;background:var(--yel);border:var(--line) solid var(--ink);border-radius:18px;padding:6px 22px;box-shadow:5px 5px 0 var(--ink);transform:rotate(-2deg)}
.try-h::before{content:"";position:absolute;left:-16px;bottom:14px;border:10px solid transparent;border-right:14px solid var(--ink)}
.try-h span{font-weight:900;font-size:clamp(24px,3.2vw,40px);line-height:1.3}
.try-h span::before{content:"\2714";display:inline-grid;place-items:center;width:1.1em;height:1.1em;margin-right:.35em;background:var(--red);color:#fff;border:3px solid var(--ink);border-radius:8px;font-size:.8em;vertical-align:.08em}
.try-s{font-weight:700;margin-top:12px;font-size:15px}
@media (max-width:860px){.try{align-items:center}.try-h{padding:4px 14px}.try-h::before{display:none}.try-h span{font-size:clamp(17px,5.4vw,22px);white-space:nowrap}.try img{width:56px}.try-s{font-size:14px}}
@keyframes tryNod{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg) translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.try img{animation:none}}
.cost{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:24px;align-items:start}
.factors{list-style:none;display:grid;gap:10px}
.factors label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:12px 16px;cursor:pointer;transition:background .2s,transform .2s}
.factors input{appearance:none;width:26px;height:26px;border:3px solid var(--ink);border-radius:7px;background:#fff;margin-top:2px;display:grid;place-items:center}
.factors input:checked{background:var(--red)}
.factors input:checked::after{content:"";width:8px;height:13px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(45deg) translate(-1px,-2px)}
.factors label:has(input:checked){background:#fff4f0;transform:translateX(4px)}
.factors b{display:block;font-weight:900}
.factors small{display:block;font-size:13.5px;line-height:1.65;color:#333}
.meter{position:sticky;top:110px;background:var(--ink);color:#fff;border-radius:22px;padding:28px;border:var(--line) solid var(--ink)}
.meter svg{width:100%;height:auto}
.meter .arc-bg{fill:none;stroke:#333;stroke-width:26;stroke-linecap:round}
.meter .arc{fill:none;stroke:var(--yel);stroke-width:26;stroke-linecap:round}
.meter .needle{stroke:#fff;stroke-width:6;stroke-linecap:round}
.meter h3{font-size:22px;font-weight:900;margin-top:10px}
.meter p{font-size:14.5px;line-height:1.8;margin-top:8px;color:#ddd}
.meter .btn{margin-top:18px}
@media (max-width:860px){.cost{grid-template-columns:1fr}.meter{position:relative;top:0}}

/* ===== 05 制度と手続き（横年表） ===== */
.subsidy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
.card{background:#fff;border:var(--line) solid var(--ink);border-radius:var(--r);padding:22px;box-shadow:6px 6px 0 var(--ink)}
.card.hot{background:var(--yel)}
.card h3{font-size:19px;font-weight:900;line-height:1.45}
.card p{font-size:14.5px;margin-top:8px;line-height:1.75}
.card .big{font-family:var(--fe);font-weight:900;font-size:40px;line-height:1.05;margin-top:8px}
@media (max-width:860px){.subsidy{grid-template-columns:1fr}}
/* 年表（Swiper・画面の端から端まで） */
.tl{position:relative;margin:34px calc(50% - 50vw) 0;padding:78px 0 8px;overflow:hidden}
.tl .swiper-wrapper{padding-bottom:34px}
.tl .swiper-wrapper{align-items:stretch}
.tl-item{width:360px;height:auto;position:relative;padding-top:66px;user-select:none}
.tl-item::before{content:attr(data-no);position:absolute;top:30px;left:18px;z-index:1;transform:scale(var(--s,1));transform-origin:50% 50%;transition:transform .42s cubic-bezier(.2,.8,.2,1);width:56px;height:56px;border-radius:50%;background:var(--city);color:var(--city-on);border:var(--line) solid var(--ink);display:grid;place-items:center;font-family:var(--fe);font-weight:900;font-size:19px}
.tl-item::after{content:"";position:absolute;top:54px;left:0;right:-26px;height:8px;background:var(--ink)}
.tl-item:last-child::after{right:40%}
.tl-item .card{margin-top:18px;height:calc(100% - 18px);transform:scale(var(--s,1));transform-origin:50% 0;opacity:var(--o,1);transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .42s,box-shadow .3s}
.tl-item.swiper-slide-active .card{box-shadow:10px 10px 0 var(--ink);border-width:5px}
.tl-item .when{display:inline-block;background:var(--ink);color:#fff;border-radius:999px;font-size:12.5px;padding:1px 12px;font-weight:700;margin-bottom:6px}
.tl-runner{position:absolute;top:2px;left:0;width:64px;z-index:3;pointer-events:none}
.tl-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.tl-ctrl button{width:52px;height:52px;border-radius:50%;border:var(--line) solid var(--ink);background:var(--yel);font-weight:900;font-size:20px;box-shadow:3px 3px 0 var(--ink)}
.tl-ctrl button:disabled{background:#eee;opacity:.5;box-shadow:none}
.tl-pg{display:flex;gap:8px;width:auto!important}
.tl-pg .swiper-pagination-bullet{width:12px;height:12px;border:2px solid var(--ink);background:#fff;opacity:1;margin:0!important}
.tl-pg .swiper-pagination-bullet-active{background:var(--city);width:30px;border-radius:999px}
@media (max-width:860px){.tl-item{width:auto}.tl-item::after{right:-16px}}

/* ===== 06 山中商店 ===== */
.co{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:36px}
.mask-photo{position:relative;aspect-ratio:4/5;border:var(--line) solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--red)}
.mask-photo>img:first-child{width:100%;height:100%;object-fit:cover;object-position:50% 70%;-webkit-mask:var(--mask) center/40% no-repeat;mask:var(--mask) center/40% no-repeat}
.mask-photo .mask-rg{position:absolute;left:30%;top:50%;width:40%;transform:translateY(-50%);pointer-events:none}
.mask-photo figcaption{position:absolute;left:10px;bottom:10px;background:#fff;border:2px solid var(--ink);border-radius:999px;font-size:12px;padding:1px 10px;font-weight:700}
.facts{list-style:none;display:grid;gap:0;border:var(--line) solid var(--ink);border-radius:var(--r);overflow:hidden;background:#fff}
.facts li{display:grid;grid-template-columns:8.5em 1fr;border-top:2px solid var(--ink)}
.facts li:first-child{border-top:0}
.facts b{background:var(--paper);padding:12px 14px;font-weight:900;font-size:14px;border-right:2px solid var(--ink)}
.facts span{padding:12px 14px;font-size:14.5px;line-height:1.7}
.reals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:40px;list-style:none}
.reals figure{border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff;position:relative}
.reals img{width:100%;aspect-ratio:4/5;object-fit:cover}
.reals figcaption{font-size:12.5px;padding:6px 10px;font-weight:700;border-top:3px solid var(--ink)}
.map-embed{margin-top:40px;border:var(--line) solid var(--ink);border-radius:var(--r);overflow:hidden;background:#e9e5dc;aspect-ratio:16/7;display:grid;place-items:center;position:relative}
.map-embed iframe{width:100%;height:100%;border:0}
.map-embed button{border:3px solid var(--ink);background:#fff;border-radius:999px;padding:12px 22px;font-weight:900;box-shadow:4px 4px 0 var(--ink)}
@media (max-width:860px){.co{grid-template-columns:1fr}.reals{grid-template-columns:repeat(2,1fr)}.facts li{grid-template-columns:6.5em 1fr}.map-embed{aspect-ratio:4/3}}

/* ===== 07 FAQ・相談 ===== */
.faq{margin-top:36px;display:grid;gap:12px}
.faq details{background:#fff;border:3px solid var(--ink);border-radius:14px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:16px 56px 16px 20px;font-weight:900;font-size:17px;position:relative;line-height:1.55}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--fe);color:var(--red);margin-right:10px}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:3px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:var(--fe);font-weight:900;line-height:1}
.faq details[open] summary::after{content:"−";background:var(--yel)}
.faq .a{padding:0 20px 18px 46px;font-size:15px;line-height:1.85}
.cta{position:relative;margin-top:90px;background:var(--red);color:#fff;border:var(--line) solid var(--ink);border-radius:28px;padding:clamp(28px,5vw,60px);overflow:hidden;box-shadow:10px 10px 0 var(--ink)}
.cta h2{font-weight:900;font-size:clamp(32px,5vw,64px);line-height:1.15}
.cta p{max-width:34em;margin-top:12px;font-weight:700}
.cta .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.cta .btn{background:var(--yel);color:var(--ink)}
.cta .btn.tel{background:#fff}
.cta{min-height:clamp(380px,34vw,520px)}
.cta .bow{position:absolute;right:1%;bottom:-4%;width:min(36%,460px)}
.cta h2,.cta p,.cta .row{position:relative;z-index:1;max-width:min(60%,40em)}
@media (max-width:860px){.cta h2,.cta p,.cta .row{max-width:none}.cta .bow{position:relative;width:78%;margin:12px auto -26px;right:auto;bottom:auto}}
.areas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:30px;list-style:none}
.areas a{display:block;text-decoration:none;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:12px;text-align:center;font-weight:900;transition:transform .2s}
.areas a:hover{transform:translateY(-4px) rotate(-1deg)}
.areas svg{width:100%;height:80px}
.areas path{fill:var(--ac);stroke:var(--ink);stroke-width:5;vector-effect:non-scaling-stroke}
.areas a[aria-current="page"]{background:var(--paper);outline:3px dashed var(--ink);outline-offset:3px}
@media (max-width:860px){.areas{grid-template-columns:repeat(3,1fr)}}

/* ===== footer ===== */
.ft{background:var(--ink);color:#fff;padding:60px 0 110px;margin-top:100px}
.ft .nap{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.ft .emb{align-self:start;height:auto}
.ft .emb{width:110px}
.ft h2{font-size:20px;font-weight:900}
.ft p,.ft li{font-size:14px;line-height:1.9}
.ft ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px}
.ft a{color:#fff}
.ft small{display:block;margin-top:24px;color:#aaa;font-size:12px}

/* SP固定バー */
.spbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--paper);border-top:3px solid var(--ink)}
.spbar a{display:flex;align-items:center;justify-content:center;gap:6px;border:3px solid var(--ink);border-radius:999px;padding:10px;font-weight:900;text-decoration:none;font-size:15px}
.spbar a:first-child{background:#fff}
.spbar a:last-child{background:var(--red);color:#fff}
@media (max-width:860px){.spbar{display:grid}}

/* 動きの初期状態（JSがある時だけ） */
.js [data-rv]{opacity:0;transform:translateY(28px)}

/* 土地カード（第3章の見せ場：更地を読者へ手渡す） */
.scene{perspective:1200px}
.landcard{position:absolute;left:30%;top:9%;width:44%;z-index:3;background:#fff;border:var(--line) solid var(--ink);border-radius:16px;padding:10px 10px 12px;box-shadow:10px 12px 0 var(--ink);opacity:0;visibility:hidden;transform-style:preserve-3d}
.landcard img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;border:3px solid var(--ink)}
.landcard b{display:block;font-weight:900;font-size:clamp(13px,1.35vw,19px);margin:8px 4px 6px;line-height:1.35}
.landcard span{display:inline-block;margin:2px 3px 0;border:2px solid var(--ink);border-radius:999px;padding:0 10px;font-size:clamp(11px,1vw,14px);font-weight:900;background:var(--yel)}
@media (max-width:860px){.landcard{width:56%;left:34%;top:6%}}

/* ===== 市町ごとの動く帯 ===== */
.sband{position:relative;background:var(--ink);border-block:var(--line) solid var(--ink)}
.sb-stage{position:relative;height:clamp(300px,31vw,460px);overflow:hidden}
.sb-bg{position:absolute;inset:0;width:100%;height:100%}
.sb-a{position:absolute;left:0;bottom:var(--b,0);width:clamp(calc(var(--min,80)*1px),calc(var(--w,12)*1%),720px);will-change:transform;pointer-events:none}
.sb-a img{display:block;width:100%;height:auto}
.sb-frames img+img{position:absolute;inset:0;opacity:0}
.sb-frames.f1 img:first-child{opacity:0}.sb-frames.f1 img+img{opacity:1}
.sb-cap{position:relative;background:var(--ink);color:#fff;font-size:13.5px;line-height:1.7;padding:10px var(--pad)}
.sb-cap b{color:var(--yel);margin-right:12px;font-size:15px}
.sb-cap a{color:#fff}.sb-cap span{color:#aaa;font-size:12px}
@keyframes sbBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
@keyframes sbWave{to{transform:translateX(-300px)}}
@keyframes sbSway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
@keyframes sbFlicker{from{opacity:.55}to{opacity:1}}
@keyframes sbPetal{0%{transform:translate(0,-20px) rotate(0)}100%{transform:translate(-160px,440px) rotate(540deg)}}
.toro img{animation:sbBob 3.2s ease-in-out var(--d,0s) infinite;filter:drop-shadow(0 0 16px rgba(255,196,80,.85))}
.toro::after{content:"";position:absolute;left:5%;right:5%;bottom:-8%;height:18%;background:radial-gradient(closest-side,rgba(255,206,100,.6),transparent);z-index:-1}
.boat{animation:none}.boat img{animation:sbBob 4s ease-in-out infinite}
.sb-waves{animation:sbWave 7s linear infinite}
.sb-wis>g{transform-box:fill-box;transform-origin:50% 0;animation:sbSway 3.4s ease-in-out infinite alternate}
.sb-wis>g:nth-child(2n){animation-duration:2.8s;animation-delay:-1s}.sb-wis>g:nth-child(3n){animation-duration:3.9s;animation-delay:-2s}
.sb-garland circle{animation:sbFlicker 1.2s ease-in-out infinite alternate}
.sb-garland circle:nth-child(2n){animation-delay:-.6s}.sb-garland circle:nth-child(3n){animation-duration:.9s}
.float img{filter:drop-shadow(0 0 22px rgba(255,190,90,.7))}.float2 img{filter:brightness(.8) drop-shadow(0 0 14px rgba(255,190,90,.5))}
.sb-rope{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.sb-rope line{stroke:#060403;stroke-width:3}
.kite{z-index:2}.kite img{animation:sbBob 2.6s ease-in-out infinite}
.sb-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sb-petals i{position:absolute;top:-4%;width:13px;height:10px;background:#F9C3D6;border:2px solid var(--ink);border-radius:70% 0 70% 0;animation:sbPetal 7s linear infinite}
.sb-petals i:nth-child(1){left:8%;animation-duration:6s}.sb-petals i:nth-child(2){left:16%;animation-delay:-2s;animation-duration:8s}.sb-petals i:nth-child(3){left:24%;animation-delay:-4s}.sb-petals i:nth-child(4){left:31%;animation-delay:-1s;animation-duration:9s}.sb-petals i:nth-child(5){left:38%;animation-delay:-5s;animation-duration:6.5s}.sb-petals i:nth-child(6){left:45%;animation-delay:-3s}.sb-petals i:nth-child(7){left:52%;animation-delay:-6s;animation-duration:8.5s}.sb-petals i:nth-child(8){left:59%;animation-delay:-2.5s}.sb-petals i:nth-child(9){left:66%;animation-delay:-4.5s;animation-duration:6s}.sb-petals i:nth-child(10){left:73%;animation-delay:-1.5s;animation-duration:9s}.sb-petals i:nth-child(11){left:80%;animation-delay:-3.5s}.sb-petals i:nth-child(12){left:87%;animation-delay:-5.5s;animation-duration:7.5s}.sb-petals i:nth-child(13){left:94%;animation-delay:-.5s}.sb-petals i:nth-child(14){left:12%;animation-delay:-6.5s;animation-duration:10s}.sb-petals i:nth-child(15){left:42%;animation-delay:-7s;animation-duration:8s}.sb-petals i:nth-child(16){left:70%;animation-delay:-3.2s;animation-duration:10s}.sb-petals i:nth-child(17){left:98%;animation-delay:-2.2s}.sb-petals i:nth-child(18){left:56%;animation-delay:-4.8s;animation-duration:6.8s}
.sb-pear{position:absolute;top:44%;width:clamp(28px,2.6vw,42px);aspect-ratio:1;z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 4v6' stroke='%23060403' stroke-width='3'/%3E%3Cpath d='M21 8q8-6 12 0-6 4-12 0z' fill='%2386C05B' stroke='%23060403' stroke-width='2'/%3E%3Ccircle cx='20' cy='24' r='14' fill='%23D8C25A' stroke='%23060403' stroke-width='3'/%3E%3Ccircle cx='15' cy='22' r='1.2' fill='%238a7a2a'/%3E%3Ccircle cx='24' cy='28' r='1.2' fill='%238a7a2a'/%3E%3Ccircle cx='22' cy='19' r='1.2' fill='%238a7a2a'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:860px){.sb-stage{height:280px}.sb-cap{font-size:12.5px}}

.toro.back img{filter:brightness(.85) drop-shadow(0 0 10px rgba(255,196,80,.7))}

/* 2026-09-30 スマホ点検の修正 */
/* 見出しの最後の1〜2字だけが次の行に落ちないよう、文節で折って行の長さを揃える */
h1,h2,h3,summary,.big,.btn,.try-h,td{word-break:auto-phrase}
h1,h2,h3,summary,.big,.btn,.try-h{text-wrap:balance}
/* 手順の番号。スマホでは他の手順を非表示にするため連番が進まない。番号を項目ごとに持つ */
.steps li:nth-child(1)::before{content:"01"}.steps li:nth-child(2)::before{content:"02"}.steps li:nth-child(3)::before{content:"03"}.steps li:nth-child(4)::before{content:"04"}.steps li:nth-child(5)::before{content:"05"}.steps li:nth-child(6)::before{content:"06"}.steps li:nth-child(7)::before{content:"07"}
/* スクロールしたらヘッダーに地の帯を敷き、本文が丸いボタンの裏で重ならないようにする */
.hd{transition:background-color .25s,box-shadow .25s}
.hd.is-s{background:rgba(245,243,238,.94);box-shadow:0 3px 0 var(--ink)}
@supports (backdrop-filter:blur(6px)){.hd.is-s{background:rgba(245,243,238,.84);backdrop-filter:blur(6px)}}
@media (max-width:860px){.card .big{font-size:clamp(28px,8.4vw,40px)}}
@media (max-width:380px){.card .big{font-size:clamp(26px,7.4vw,34px)}}