/* かさね塗装店 — 架空の店舗を想定したサンプルサイト */
:root{
  --red:#C2492D; --red-d:#A63A21; --sky:#9CCBD8; --sky-l:#D3E7ED; --cream:#F7F2E8; --white:#FFFDF8;
  --grey:#B9B6AE; --ink:#232323; --sub:#5A5853; --dark:#2F3A3D;
  --head:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  --num:"Barlow Semi Condensed","Zen Kaku Gothic New",sans-serif;
  --rail:0px; --pad:24px; --max:1176px;
  --u:calc(min(100vw,520px)/390); --base:520px;
  --r1:24px; --r2:16px; --r3:10px;
}
@media (min-width:1000px){:root{--base:1440px;--u:calc(min(100vw,1440px)/1440);--pad:max(48px,calc((100vw - var(--max))/2))}}
@media (min-width:1200px){:root{--rail:64px;--u:calc(min(100vw - 64px,1440px)/1440)}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.9 var(--body);letter-spacing:.03em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
a{color:inherit}
.num{font-family:var(--num);font-weight:600;letter-spacing:.01em;font-feature-settings:"lnum","tnum"}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r3);z-index:100}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
main{overflow-x:clip}
@supports not (overflow-x:clip){body{overflow-x:hidden}}
.wrap{width:min(var(--max),100% - 48px);margin-inline:auto}
@media (min-width:1200px){.wrap{width:min(var(--max),100% - 48px - var(--rail)*2)}}
.note{font-size:12px;line-height:1.7;color:var(--sub)}
.note--w{color:#C9D0D2}

/* アイコン（生成して着色した画像。型抜きは使わない） */
.ico{display:inline-block;width:1em;height:1em;background:center/contain no-repeat;flex:none;vertical-align:-.12em}
.ico--logo{background-image:url(../img/ico/logo-red.png)}
.ico--arrow{background-image:url(../img/ico/arrow-red.png)}
.btn .ico--arrow{background-image:url(../img/ico/arrow-white.png)}
.ico--phone{background-image:url(../img/ico/phone-red.png)}
.ico--plus{background-image:url(../img/ico/plus-red.png)}
.ico--clock{background-image:url(../img/ico/clock-sub.png)}

/* 見出し */
.sec-h .en{font:600 14px/1 var(--num);letter-spacing:.2em;color:var(--red);margin-bottom:14px}
.sec-h h2{font:700 clamp(26px,3vw,40px)/1.45 var(--head);letter-spacing:.04em}
.sec-h__lead{margin-top:18px;max-width:34em;color:var(--sub)}
.sec-h--c{text-align:center}
.ib{display:inline-block}
.sec-h--w{color:#fff}.sec-h--w .en{color:var(--sky)}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:10px 30px;border-radius:40px;background:var(--red);color:#fff;font:700 16px/1.4 var(--head);text-decoration:none;transition:background .25s}
.btn:hover{background:var(--red-d)}
.btn .ico{font-size:20px;transition:translate .25s}.btn:hover .ico{translate:4px 0}
.btn--big{flex-direction:column;gap:2px;width:100%;min-height:76px;font-size:19px;border-radius:var(--r2)}
.btn--big small{font:400 11px/1.4 var(--body);opacity:.9}

/* ヘッダー */
.hd{position:absolute;inset:0 var(--rail) auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:calc(18px + env(safe-area-inset-top,0px)) 24px 0}
.hd__logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.hd__logo .ico{font-size:38px;color:var(--red)}
.hd__name{font:700 18px/1.2 var(--head);letter-spacing:.06em}
.hd__name small{display:block;font:500 11px/1.6 var(--body);color:var(--sub);letter-spacing:.12em}
.hd__tel{display:none}
@media (max-width:1199px){.hd{top:calc(60px + env(safe-area-inset-top,0px));padding-top:14px}}
@media (max-width:999px){.hero .pos{margin-top:64px}section.hero{--h:790}}
@media (min-width:1000px){
  .hd{padding:26px 40px 0}
  .hero{padding-top:0}
  .hd__tel{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;justify-items:end;margin-right:calc(360*var(--u))}
  .hd__tel .ico{font-size:20px;color:var(--red)}
  .hd__tel .telno{font-size:24px;line-height:1}
  .hd__tel small{grid-column:1/-1;font-size:11px;color:var(--sub);line-height:1.6}
}

/* スマホの章チップ */
.chips{position:sticky;top:0;z-index:40;background:var(--ink);padding-top:env(safe-area-inset-top,0px)}
.chips ul{display:flex;gap:6px;overflow-x:auto;padding:8px 16px;scrollbar-width:none}
.chips ul::-webkit-scrollbar{display:none}
.chips a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:22px;color:#fff;font:500 13px/1 var(--body);white-space:nowrap;text-decoration:none}
.chips a.is-active{background:#fff;color:var(--ink)}
.chips__cta{background:var(--red)}
.chips+.rail{display:none}
@media (min-width:1200px){
  .chips{display:none}
  .chips+.rail{display:flex}
}
/* 右端の縦札：画面の高さに合わせて詰め、見積りの札は必ず下に収める */
.rail{position:fixed;right:0;top:0;bottom:0;height:100vh;height:100dvh;width:var(--rail);z-index:40;background:var(--white);flex-direction:column;align-items:center;justify-content:space-between;gap:10px;padding:clamp(8px,2.4vh,22px) 0 calc(clamp(10px,2.4vh,20px) + env(safe-area-inset-bottom,0px))}
.rail ul{display:flex;flex-direction:column;gap:2px;flex:0 1 auto;min-height:0;overflow:hidden}
.rail a{writing-mode:vertical-rl;text-decoration:none;font:500 clamp(11px,1.7vh,13px)/1 var(--body);letter-spacing:.18em}
.rail li a{display:flex;align-items:center;padding:clamp(5px,1.5vh,12px) 0;width:44px;justify-content:center;border-radius:22px;color:var(--sub);transition:background .25s,color .25s}
.rail li a:hover{color:var(--ink)}
.rail li a.is-active{background:var(--sky-l);color:var(--ink)}
.rail__cta{flex:none;display:flex;align-items:center;justify-content:center;width:44px;padding:clamp(10px,2.2vh,20px) 0;border-radius:22px;background:var(--red);color:#fff!important;font-family:var(--head)!important;font-weight:700!important;letter-spacing:.12em!important;transition:background .25s}
.rail__cta:hover{background:var(--red-d)}
@media (max-height:620px){.rail li a{letter-spacing:.06em}.rail__cta{letter-spacing:.04em!important}}
@media (max-height:520px){.rail ul{display:none}.rail{justify-content:flex-end}}
@media (min-width:1200px){main,.ft{margin-right:var(--rail)}}

/* 散らし配置の舞台。位置はすべてここ（CSS）に書く */
.stage{position:relative;height:calc(var(--h)*var(--u))}
.pos{position:absolute;left:calc(max(0px,(100% - var(--base))/2) + var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));rotate:calc(var(--r,0)*1deg)}
@media (min-width:1000px){.stage>.sec-h.pos,.stage>.note.pos{left:calc((100% - min(var(--max),100% - 48px - var(--rail)*2))/2)}}
.il{pointer-events:none;user-select:none}

/* 写真：刷毛の形に切り抜いた画像そのもの。親を見張り、子を拭き取る */
.ph img,.ph picture{width:100%;height:auto;display:block}
/* 写真と文章は、スクロールを待たずに最初から表示する（出現の動きは付けない） */
/* 形：画像生成した形を着色して敷く（同じ形を続けない） */
.sh{background:center/100% 100% no-repeat}

/* 1 ヒーロー */
.hero{--h:800;background:var(--cream)}
.hero__copy{--x:262;--y:100;--w:120;writing-mode:vertical-rl;height:calc(250*var(--u))}
.hero__catch{font:700 calc(40*var(--u))/1.3 var(--head);letter-spacing:.12em;white-space:nowrap}
.hero__sub{font:500 13px/1.9 var(--body);letter-spacing:.1em;color:var(--sub);writing-mode:horizontal-tb;position:absolute;left:calc(-238*var(--u));top:calc(262*var(--u));width:calc(342*var(--u))}
.hero__main{--x:-4;--y:150;--w:262}
.lids{margin:0}
.lid{aspect-ratio:1;background:url(../img/shape/lid-white.webp) center/100% 100% no-repeat}
.lid a{position:absolute;inset:0;display:grid;justify-items:center;align-content:center;gap:calc(2*var(--u));text-decoration:none;transition:scale .3s}
.lid a:hover{scale:1.06}
.lid__l{font:500 11px/1.2 var(--body);color:var(--sub);letter-spacing:.06em}
.lid__n{font:700 12px/1 var(--head);white-space:nowrap}
.lid__n b{font-size:calc(30*var(--u));line-height:1;color:var(--red);margin-right:2px}
.lid--1{--x:20;--y:430;--w:120;--r:-4}
.lid--2{--x:140;--y:452;--w:110;--r:3}
.lid--3{--x:252;--y:428;--w:112;--r:-2}
.lid--2{background-image:url(../img/shape/lid-sky.webp)}
.hero .hero__b{--x:200;--y:580;--w:176;--r:3}
.hero .hero__c,.hero .hero__a{display:none}
.hero__i1{display:none}
.hero__i2{--x:12;--y:610;--w:180}
.hero__i3{--x:30;--y:716;--w:70;display:none}
.hero__i4{display:none}
@media (min-width:1000px){
  .hero{--h:900}
  .hero__copy{left:auto;right:calc(max(0px,(100% - var(--base))/2) + 56*var(--u));--y:130;width:auto;height:calc(600*var(--u));display:flex;flex-direction:column;gap:calc(26*var(--u))}
  .hero__catch{font-size:calc(84*var(--u));line-height:1.25}
  .hero__sub{font-size:max(13px,calc(16*var(--u)));line-height:1.9;letter-spacing:.14em;writing-mode:vertical-rl;position:static;width:auto;padding-top:calc(8*var(--u))}
  .hero__main{--x:130;--y:200;--w:670}
  .lid__l{font-size:max(11px,calc(13*var(--u)))}
  .lid__n{font-size:max(12px,calc(19*var(--u)))}
  .lid__n b{font-size:calc(54*var(--u))}
  .lid--1{--x:830;--y:120;--w:200;--r:-5}
  .lid--2{--x:912;--y:312;--w:170;--r:4}
  .lid--3{--x:836;--y:470;--w:168;--r:-3}
  .hero .hero__b{--x:20;--y:128;--w:230;--r:-5}
  .hero .hero__c{display:block;--x:800;--y:650;--w:170;--r:4}
  .hero .hero__a{display:block;--x:40;--y:650;--w:240;--r:-3}
  .hero__i1{display:block;--x:300;--y:120;--w:90}
  .hero__i2{--x:330;--y:700;--w:380}
  .hero__i3{display:block;--x:1010;--y:680;--w:120}
  .hero__i4{display:block;--x:1200;--y:750;--w:110}
}
/* 読み込み直後の入り：主役の絵と見出しはすぐ映す。丸い札と線画だけ、短くふわっと入れる */
.js .lid,.js .hero .il{opacity:0;translate:0 10px;transition:opacity .4s,translate .4s}
.js.is-ready .lid,.js.is-ready .hero .il{opacity:1;translate:0}
.js.is-ready .lid--1{transition-delay:.05s}
.js.is-ready .lid--2{transition-delay:.12s}
.js.is-ready .lid--3{transition-delay:.19s}
.js.is-ready .hero .il{transition-delay:.3s}

/* 2 心配ごと */
.worry{--h:1230}
.worry__h{--x:24;--y:70;--w:330}
.qa h3{font:700 clamp(20px,2vw,26px)/1.5 var(--head);display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.qa__no{color:var(--red);font-size:1.1em}
.qa p{font-size:15px}
.worry__q1{--x:24;--y:220;--w:316}
.worry__i1{--x:286;--y:140;--w:84}
.worry .worry__p1{--x:170;--y:480;--w:200;--r:2}
.worry__q2{--x:50;--y:700;--w:316}
.worry__i2{--x:30;--y:490;--w:110}
.worry__i3{--x:-6;--y:890;--w:60;display:none}
.worry__q3{--x:24;--y:930;--w:316}
.worry .worry__p2{display:none}
.worry__i4{--x:190;--y:1100;--w:180}
.worry__i5{display:none}
@media (min-width:1000px){
  .worry{--h:1060}
  .worry__h{--x:120;--y:90;--w:520}
  .worry__q1{--x:120;--y:280;--w:400}
  .worry .worry__p1{--x:600;--y:250;--w:230}
  .worry__i1{--x:880;--y:240;--w:150}
  .worry__q2{--x:800;--y:500;--w:400}
  .worry__i2{--x:600;--y:500;--w:150}
  .worry__i3{display:block;--x:1230;--y:420;--w:120}
  .worry__q3{--x:440;--y:790;--w:400}
  .worry .worry__p2{display:block;--x:120;--y:740;--w:240;--r:-3}
  .worry__i4{--x:880;--y:800;--w:230}
  .worry__i5{display:block;--x:1150;--y:760;--w:130}
}

/* 3 数字で答える：形を3つとも変える */
.answer{padding:20px 0 110px}
.trio{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:36px -24px 18px;padding:0 24px 6px;scrollbar-width:none}
.trio::-webkit-scrollbar{display:none}
.trio li{flex:0 0 78%;scroll-snap-align:center;aspect-ratio:3/2.3;display:grid;align-content:center;justify-items:center;text-align:center;padding:0 13%;background:url(../img/shape/cloud-sky.webp) center/100% 100% no-repeat}
.trio li:nth-child(2){background-image:url(../img/shape/drop-white.webp)}
.trio li:nth-child(3){background-image:url(../img/shape/lid-sand.webp);aspect-ratio:1;flex-basis:66%}
.trio__l{font:500 13px/1.5 var(--body);color:var(--sub)}
.trio__n{font:700 18px/1.2 var(--head);margin:4px 0 8px;white-space:nowrap}
.trio__n b{font-size:60px;line-height:1;color:var(--ink);margin-right:4px}
.trio li:nth-child(2) .trio__n b{color:var(--red)}
.trio__t{font-size:13px;line-height:1.7;max-width:13em}
.trio li:nth-child(2){padding:6% 18% 3%}
@media (min-width:1000px){
  .answer{padding:30px 0 150px}
  .trio{display:grid;grid-template-columns:1.15fr 1.1fr .9fr;gap:20px;align-items:center;overflow:visible;margin:56px 0 24px;padding:0}
  .trio li{padding:0 15%}
  .trio li:nth-child(1){rotate:-2deg}
  .trio li:nth-child(2){translate:0 40px;rotate:1.5deg}
  .trio li:nth-child(3){rotate:-1deg;translate:0 -10px}
  .trio__n{font-size:20px}
  .trio__n b{font-size:84px}
  .trio__t{font-size:14px}
  .answer .note{margin-top:70px;text-align:right}
}

/* 4 色えらび（主役）上が曲線の水色の面 */
.color{background:var(--sky-l);border-radius:50% 50% 0 0/60px 60px 0 0;padding:90px 0 90px;position:relative}
.color__in{display:grid;gap:28px;position:relative}
.house{position:relative;aspect-ratio:3/2;background:url(../img/shape/card-white.webp) center/100% 100% no-repeat}
.house__line,.house__c{position:absolute;left:50%;top:50%;translate:-50% -50%;height:86%;width:auto;aspect-ratio:1000/823}
.house__c{transition:opacity .3s}
.house__src{display:none}
.pick{display:grid;gap:22px;align-content:start}
.pick__lead{font-size:15px}
.sw legend{font:700 15px/1 var(--head);margin-bottom:12px;display:flex;gap:12px;align-items:baseline}
.sw output{font:500 13px/1 var(--body);color:var(--sub)}
.sw__list{display:flex;flex-wrap:wrap;gap:10px}
.sw label{position:relative;cursor:pointer}
.sw input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw label span{display:block;width:48px;height:48px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(35,35,35,.18);transition:scale .25s}
.sw input:checked+span{outline:3px solid var(--ink);outline-offset:3px}
.sw input:focus-visible+span{outline:3px solid var(--red);outline-offset:3px}
.sw label:hover span{scale:1.08}
.color__i{display:none}
@media (min-width:1000px){
  .color{border-radius:50% 50% 0 0/120px 120px 0 0;padding:150px 0 110px}
  .color__in{grid-template-columns:1.75fr 1fr;column-gap:64px;row-gap:44px}
  .color .sec-h{grid-column:1/-1}
  .sw label span{width:40px;height:40px}.sw__list{gap:8px}
  .color__i{display:block;position:absolute;left:-90px;bottom:-110px;width:120px;rotate:-8deg}
}

/* 5 工程 */
.process{padding:90px 0 80px}
.process__lead{margin-top:16px;color:var(--sub);font-size:15px}
.process__i{width:150px;margin:20px 0 0 auto}
.steps{display:grid;gap:18px;margin-top:30px}
.step__in{background:url(../img/shape/card-white.webp) center/100% 100% no-repeat;display:grid;padding:10px}
.step:nth-child(even) .step__in{background-image:url(../img/shape/card-sand.webp)}
.step figure{aspect-ratio:3/2;min-width:0;padding:6% 6% 0}
.step figure img{width:100%;height:100%;object-fit:contain}
.step__in>div{padding:22px 24px 28px}
.step__d{font:500 13px/1 var(--body);color:var(--red)}
.step__d b{font-size:30px;margin-right:4px}
.step h3{font:700 22px/1.4 var(--head);margin:10px 0 8px;display:flex;gap:12px;align-items:baseline}
.step h3 span{font-size:15px;color:var(--grey)}
.step p:last-child{font-size:15px}
@media (min-width:1000px){
  .process{padding:150px 0 140px}
  .process__in{display:grid;grid-template-columns:360px 1fr;gap:80px;align-items:start}
  .process__side{position:sticky;top:120px}
  .process__i{width:230px;margin:50px 0 0 -10px}
  .steps{gap:0;margin:0}
  .step{position:sticky;top:calc(110px + var(--i)*22px);height:500px;margin-bottom:60px}
  .step:last-child{margin-bottom:0}
  .step__in{height:440px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;scale:calc(1 - var(--p,0)*.05);filter:brightness(calc(1 - var(--p,0)*.08));transform-origin:50% 0}
  .step figure{height:100%;aspect-ratio:auto;padding:5%}
  .step__in>div{padding:40px 44px}
  .step__d b{font-size:44px}
  .step h3{font-size:28px}
  .step h3{white-space:nowrap}
  .step:nth-child(1){--i:0}.step:nth-child(2){--i:1}.step:nth-child(3){--i:2}.step:nth-child(4){--i:3}.step:nth-child(5){--i:4}
}

@media (min-width:1000px) and (max-width:1299px){
  .process__in{grid-template-columns:280px 1fr;gap:36px}
  .step__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .step__in>div{padding:24px 26px 24px 8px}
  .step h3{font-size:23px;gap:8px}
  .step__d b{font-size:36px}
  .step p:last-child{font-size:14px}
}

/* 6 事例：写真は小さく、数字と線画を寄せる */
.works{--h:1500;background:var(--white)}
.works__h{--x:24;--y:70;--w:330}
.case{position:absolute}
.case .ph{width:100%}
.case__tag{position:absolute;left:4%;top:-8px;background:var(--ink);color:#fff;font:500 12px/1 var(--body);padding:8px 14px;border-radius:20px;rotate:calc(var(--r,0)*-1deg)}
.case__tag--roof{background:var(--red)}
.case__n{display:flex;gap:14px;width:max-content;margin:-18px 0 0 auto;position:relative;background:var(--cream);padding:10px 16px 8px;border-radius:26px 18px 28px 16px/18px 26px 16px 24px;rotate:calc(var(--r,0)*-1deg)}
.case__n div{display:grid}
.case__n dt{font-size:11px;line-height:1.2;color:var(--sub)}
.case__n dd{font:500 12px/1 var(--body)}
.case__n b{font-size:calc(30*var(--u));line-height:1;margin-right:1px}
.case__n div:last-child b{color:var(--red)}
.case__t{font-size:12px;color:var(--sub);margin-top:6px;text-align:right;rotate:calc(var(--r,0)*-1deg)}
.works__c1{--x:24;--y:190;--w:230;--r:-2}
.works__c2{--x:160;--y:470;--w:210;--r:2}
.works__c3{--x:24;--y:740;--w:230;--r:-1.5}
.works__c4{--x:190;--y:990;--w:170;--r:2}
.voice{--x:14;--y:1290;--w:362;aspect-ratio:362/200;display:grid;grid-template-columns:1fr;align-content:center;padding:0 calc(58*var(--u)) calc(6*var(--u));background:url(../img/shape/cloud-sky.webp) center/100% 100% no-repeat}
.voice p{font:500 13px/1.8 var(--body)}
.voice cite{display:block;font-style:normal;font-size:11px;color:var(--sub);margin-top:6px;text-align:right;white-space:nowrap}
.works__i1{--x:290;--y:240;--w:70}
.works__i2{--x:40;--y:500;--w:80}
.works__i3{--x:280;--y:780;--w:90}
.works__i4{--x:60;--y:1010;--w:70}
.works__i5{display:none}
.works__note{--x:24;--y:1480;--w:342}
@media (min-width:1000px){
  .works{--h:1060}
  .works__h{--x:120;--y:110;--w:520}
  .case__n{gap:20px;padding:12px 22px 10px;margin-top:-24px}
  .case__n b{font-size:calc(42*var(--u))}
  .case__t{font-size:13px}
  .works__c1{--x:140;--y:290;--w:330;--r:-2}
  .works__c2{--x:600;--y:170;--w:270;--r:2}
  .works__c3{--x:940;--y:330;--w:340;--r:-1.5}
  .works__c4{--x:520;--y:520;--w:230;--r:2.5}
  .voice{--x:770;--y:730;--w:560;aspect-ratio:560/260;padding:0 calc(96*var(--u)) calc(8*var(--u))}
  .voice p{font-size:15px;line-height:1.9}
  .voice cite{font-size:12px}
  .works__i1{--x:490;--y:330;--w:90}
  .works__i2{--x:1290;--y:200;--w:90}
  .works__i3{--x:900;--y:150;--w:110}
  .works__i4{--x:400;--y:680;--w:90}
  .works__i5{display:block;--x:150;--y:720;--w:120}
  .works__note{--x:120;--y:1010;--w:500}
}

/* 7 息継ぎ：全幅写真はやめ、小さな写真と線画 */
.breath{--h:330;background:var(--white)}
.breath__p{--x:95;--y:40;--w:200;--r:-2}
.breath__i1{--x:60;--y:215;--w:270}
.breath__i2{--x:270;--y:60;--w:100}
.breath__i3{display:none}
@media (min-width:1000px){
  .breath{--h:470}
  .breath__p{--x:570;--y:30;--w:300;--r:-2}
  .breath__i1{--x:480;--y:300;--w:440}
  .breath__i2{--x:1000;--y:120;--w:200}
  .breath__i3{display:block;--x:300;--y:40;--w:130}
}

/* 8 職人 */
.staff{padding:90px 0 100px;position:relative;overflow:hidden}
.staff .wrap{position:relative}
.staff__i{position:absolute;right:0;top:0;width:80px}
.crew{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 24px 10px;scrollbar-width:none}
.crew::-webkit-scrollbar{display:none}
.crew__c{flex:0 0 66%;max-width:280px;scroll-snap-align:center;background:var(--bg,var(--sky-l));border-radius:var(--r1);padding:0 22px 26px;overflow:hidden}
.crew__c:nth-child(2){--bg:#EFE7D6}.crew__c:nth-child(3){--bg:#F3D9CF}.crew__c:nth-child(4){--bg:#E2E0DA}.crew__c:nth-child(5){--bg:var(--sky-l)}
.crew__c img{width:86%;margin:14px auto 12px;aspect-ratio:4/5;object-fit:contain;object-position:50% 100%}
.crew__r{font-size:12px;color:var(--sub);line-height:1.4}
.crew__c h3{font:700 21px/1.5 var(--head);letter-spacing:.1em}
.crew__w{font-size:14px;line-height:1.7;margin-top:6px}
@media (min-width:1000px){
  .staff{padding:150px 0 170px}
  .staff__i{width:120px;right:40px;top:10px}
  .crew{width:min(var(--max) + 60px,100% - 48px - var(--rail)*2);margin:70px auto 0;overflow:visible;padding:0;gap:0;justify-content:center}
  .crew__c{flex:0 0 23%;max-width:none;margin-inline:-1.6%;rotate:var(--rot);translate:0 var(--ty,0);transition:rotate .4s,translate .4s;position:relative}
  .crew__c:nth-child(1){--rot:-4deg;--ty:20px}.crew__c:nth-child(2){--rot:3deg;--ty:-14px}.crew__c:nth-child(3){--rot:-2deg;--ty:26px}.crew__c:nth-child(4){--rot:4deg;--ty:-10px}.crew__c:nth-child(5){--rot:-3deg;--ty:18px}
  .crew__c:hover{rotate:0deg;translate:0 -10px;z-index:3}
  .crew__c img{animation:bob 5s ease-in-out infinite;animation-delay:calc(var(--n,0)*-1s)}
  .crew__c:nth-child(2){--n:1}.crew__c:nth-child(3){--n:2}.crew__c:nth-child(4){--n:3}.crew__c:nth-child(5){--n:4}
}
@keyframes bob{50%{translate:0 -8px}}

/* 9 料金とQ&A：丸い札と、白い線画 */
.price{background:var(--dark);color:#fff;padding:90px 0 200px;border-radius:40px 40px 0 0;position:relative;overflow:hidden}
.price .wrap{position:relative}
.price__i{position:absolute;opacity:.55}
.price__i1{right:-14px;top:70px;width:84px;rotate:10deg}
.price__i2{left:-10px;top:auto;bottom:210px;width:80px;rotate:-12deg}
.price__i3,.price__i4,.price__i5,.price__i6{display:none}
.quad{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px;margin:36px 0 18px;justify-items:center}
.quad li{width:100%;max-width:170px;aspect-ratio:1;display:grid;align-content:center;justify-items:center;color:var(--ink);background:url(../img/shape/lid-white.webp) center/100% 100% no-repeat}
.quad li:nth-child(2){background-image:url(../img/shape/lid-sky.webp);rotate:3deg}
.quad li:nth-child(3){background-image:url(../img/shape/lid-sand.webp);rotate:-3deg}
.quad li:nth-child(4){background-image:url(../img/shape/lid-pink.webp);rotate:2deg}
.quad__l{font-size:12px;color:var(--sub);line-height:1.4}
.quad__n{font:700 12px/1.2 var(--head);margin-top:2px;white-space:nowrap}
.quad__n b{font-size:46px;line-height:1;margin-right:2px;color:var(--ink)}
.quad li:nth-child(2) .quad__n b{color:var(--red)}
.faq{margin-top:56px;display:grid;gap:10px}
.faq details{background:var(--cream);color:var(--ink);border-radius:30px 22px 28px 20px/24px 30px 20px 28px}
.faq details:nth-child(even){border-radius:20px 30px 22px 28px/28px 20px 30px 22px;background:var(--white)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:14px 22px;font:700 16px/1.6 var(--head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{font-size:20px;transition:rotate .3s}
.faq details[open] summary .ico{rotate:45deg}
.faq details p{padding:0 22px 22px;font-size:15px}
@media (min-width:1000px){
  .price{padding:140px 0 300px;border-radius:80px 80px 0 0}
  .price__i{opacity:.6}
  .price__i1{right:6%;top:110px;width:150px}
  .price__i2{left:3%;top:640px;bottom:auto;width:140px}
  .price__i3{display:block;right:4%;top:760px;width:150px;rotate:8deg}
  .price__i4{display:block;left:5%;top:980px;width:120px;rotate:-8deg}
  .price__i5{display:block;right:9%;top:1080px;width:90px;rotate:6deg}
  .price__i6{display:block;left:42%;top:70px;width:110px;rotate:-6deg}
  .quad{grid-template-columns:repeat(4,1fr);gap:0;margin:50px 0 22px}
  .quad li{max-width:250px}
  .quad li:nth-child(odd){translate:0 22px}
  .quad__l{font-size:14px}
  .quad__n{font-size:16px}
  .quad__n b{font-size:76px}
  .faq{margin:100px auto 0;max-width:820px}
  .faq summary{padding:16px 32px;font-size:17px}
  .faq details p{padding:0 32px 28px}
}

/* 10 対応エリアと見積り：白いカードが上の章にまたがる */
.contact{background:var(--sky-l);padding:0 0 90px}
.card{background:var(--white);border-radius:var(--r1);padding:40px 22px 30px;margin-top:-120px;position:relative;display:grid;gap:34px}
.card .sec-h{order:0}.ask{order:1}.area{order:2}
.map{position:relative;border-radius:var(--r2);overflow:hidden;background:#fff}
.map img{width:100%}
.map__l{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;background:var(--ink);color:#fff;font:700 12px/1.2 var(--head);padding:7px 12px;border-radius:20px;white-space:nowrap}
.map__l:not(.map__l--home){background:var(--white);color:var(--ink);font-size:11px;padding:5px 9px}
.m0{--x:44%;--y:50%}.m1{--x:70%;--y:63%}.m2{--x:50%;--y:20%}.m3{--x:68%;--y:30%}.m4{--x:28%;--y:27%}.m5{--x:22%;--y:60%}.m6{--x:44%;--y:77%}
.map__l small{font:500 11px/1 var(--body);margin-left:6px;opacity:.8}
.area__list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:18px 0 12px}
.area__list li{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--grey);padding:7px 2px;font-size:14px}
.area__list b{font-size:22px;margin:0 2px 0 auto}
.ask{display:grid;gap:14px;align-content:start}
.ask__lead{font-size:15px}
.ask__tel{display:flex;align-items:center;gap:10px;color:var(--red)}
.ask__tel .ico{font-size:34px}
.ask__tel .telno{font-size:clamp(34px,10.4vw,64px);line-height:1;color:var(--ink);white-space:nowrap}
.ask__time{font-size:13px;display:flex;align-items:center;gap:8px;color:var(--sub)}
.ask__time .ico{font-size:18px}
.ask__ph{width:76%;margin:10px auto 0;rotate:-1.5deg}
@media (min-width:1000px){
  .contact{padding-bottom:140px}
  .card{margin-top:-190px;padding:70px 70px 60px;grid-template-columns:1.1fr 1fr;column-gap:70px;row-gap:40px}
  .card .sec-h{grid-column:1/-1}
  .area{order:1}.ask{order:2}
  .ask__tel .telno{font-size:calc(66*var(--u))}
}

/* フッター */
.ft{background:var(--ink);color:#EDEAE3;padding:0 0 calc(40px + env(safe-area-inset-bottom,0px));position:relative}
.ft__town{width:100%;max-width:1440px;margin-inline:auto;translate:0 -99%;position:absolute;left:0;right:0;top:0;opacity:.9}
.contact{padding-bottom:calc(90px + 14vw)}
.ft__in{display:grid;gap:30px;padding-top:56px;font-size:13px;line-height:1.9}
.ft__name{font:700 20px/1 var(--head);letter-spacing:.08em;display:flex;align-items:center;gap:10px;margin-bottom:14px;color:#fff}
.ft__name .ico{font-size:34px;color:var(--red)}
.ft__nav{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.ft__nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.14)}
.ft__nav a:hover{color:var(--sky)}
.ft__note{font-size:12px;color:#B5B2AB;line-height:1.8}
.ft__copy{font:500 12px/1 var(--num);letter-spacing:.08em;color:#B5B2AB}
.ft__copy a{display:inline-block;padding:16px 0}
@media (min-width:1000px){
  .contact{padding-bottom:calc(140px + 160px)}
  .ft__in{grid-template-columns:1.2fr 1fr;column-gap:80px;padding-top:80px}
  .ft__note,.ft__copy{grid-column:1/-1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .lid,.js .hero .il{opacity:1;translate:0}
}