/* 案C 近くの窓口：空色と生成り、丸みのある文字、指で触れる地域切り替え */
:root{--sky:#d6e8f4;--sky2:#eaf4fa;--cream:#fbf7ee;--navy:#12305a;--navy2:#40597c;--amber:#e3a33d;--amber-d:#8a5c10;--line:rgba(18,48,90,.2);--gut:clamp(16px,4.2vw,68px);--dr-bg:#12305a;--bar-bg:#12305a;--bar-cta:#e3a33d;--bar-cta-fg:#12305a;--focus:#8a5c10;--req:#12305a}
body{background:var(--cream);color:var(--navy);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-size:17px;font-weight:500}
@media(max-width:767.98px){body{font-size:16px}}
.h-xl{font-size:clamp(58px,8.6vw,140px);font-weight:900;line-height:1.1;letter-spacing:-.015em}
.h-lg{font-size:clamp(38px,5vw,80px);font-weight:900;line-height:1.18;letter-spacing:-.01em}
.h-lg .ln{white-space:nowrap}
@media(max-width:767.98px){.h-lg{font-size:min(8.8vw,48px)}}
.h-md{font-size:clamp(30px,3.6vw,54px);font-weight:900;line-height:1.25}
mark{background:none;color:inherit;background-image:linear-gradient(transparent 88%,var(--amber) 88%,var(--amber) 96%,transparent 96%)}
.btn{background:var(--navy);color:#fff;border-radius:999px}.btn:hover{background:var(--amber-d)}
.hd{color:var(--navy)}
.hd.is-scrolled{background:rgba(251,247,238,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.logo-t{color:var(--navy)}
body.menu-open .hd{color:#fff;background:none;box-shadow:none}body.menu-open .logo{visibility:hidden}
.tel{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1.25}
.tel b{font-size:clamp(30px,3vw,44px);font-weight:900;letter-spacing:.01em}
.tel small{font-size:13px}

/* ヒーロー */
.hero{position:relative;display:grid;grid-template-columns:1.02fr .98fr;min-height:100svh;padding:clamp(100px,13vh,130px) var(--gut) clamp(40px,7vh,70px);gap:clamp(10px,3vw,50px);align-items:center;overflow:hidden}
.hero-sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 62%,var(--cream) 100%);z-index:-1}
.hero-lead{margin-top:24px;font-size:clamp(17px,1.5vw,21px);line-height:1.8}
.pick{margin-top:24px}
.pick-q{font-weight:700;margin-bottom:10px}
.pick-btns{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:92px;height:54px;padding:0 24px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px var(--navy);font-size:19px;font-weight:900;text-decoration:none;transition:background .25s,color .25s,transform .3s}
.chip:hover{background:var(--navy);color:#fff;transform:translateY(-3px)}
.hero-act{margin-top:24px}
.hero-collage{position:relative;height:min(76vh,740px);min-height:480px}
.hero-collage .pic{position:absolute;border-radius:clamp(14px,1.6vw,26px);box-shadow:0 22px 50px rgba(18,48,90,.2)}
.c1{right:0;top:0;width:62%;height:82%}
.c2{left:0;bottom:0;width:44%;aspect-ratio:3/4}
.c3{right:6%;bottom:0;width:44%;aspect-ratio:719/426}
.c1 img{object-position:50% 30%}
.free-badge{position:absolute;left:12%;top:6%;width:clamp(110px,10vw,150px);aspect-ratio:1;border-radius:50%;background:var(--amber);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.3;z-index:3;font-size:clamp(13px,1vw,15px);font-weight:700}
.free-badge b{font-size:clamp(28px,2.6vw,38px);font-weight:900;line-height:1.1}
@media(max-width:899.98px){
  .hero{grid-template-columns:1fr;padding-top:88px;gap:26px}
  .h-xl{font-size:clamp(54px,16.4vw,110px)}
  .hero-collage{height:auto;min-height:0;aspect-ratio:1/1;max-height:90vw;order:-0}
  .chip{flex:1;min-width:0;padding:0 8px}
}

/* 流れる言葉 */
.ticker{overflow:hidden;background:var(--navy);color:#fff;padding:14px 0}
.ticker-in{display:flex;gap:40px;width:max-content;animation:tick 34s linear infinite;font-weight:700;font-size:clamp(17px,1.5vw,21px)}
@keyframes tick{to{transform:translateX(-50%)}}

/* サービス：重なるカード */
.hub{padding:clamp(80px,14vh,170px) var(--gut) clamp(50px,8vh,90px)}
.hub-head{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:end;margin-bottom:clamp(36px,7vh,70px)}
.stack{display:grid;gap:18px}
.card{position:sticky;top:calc(92px + var(--i)*14px);display:grid;grid-template-columns:1fr 1.25fr;min-height:clamp(340px,58vh,560px);background:#fff;border-radius:clamp(18px,2vw,32px);overflow:hidden;box-shadow:0 -6px 30px rgba(18,48,90,.1)}
.card:nth-child(even){background:var(--sky2)}
.card-t{padding:clamp(24px,3.4vw,56px);display:flex;flex-direction:column;justify-content:flex-start}
.card-n{width:42px;height:42px;border-radius:50%;background:var(--amber);display:grid;place-items:center;font-weight:900}
.card h3{font-size:clamp(30px,3.6vw,58px);font-weight:900;line-height:1.2;margin-top:18px}
.card-t p{margin-top:12px;max-width:24em}
.card-pic img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}.card:hover .card-pic img{transform:scale(1.05)}
@media(max-width:767.98px){
  .hub-head{grid-template-columns:1fr}
  .card{grid-template-columns:1fr;top:calc(72px + var(--i)*8px);min-height:0}
  .card-pic{aspect-ratio:16/10;order:-1}
  .card-t{padding:16px 20px 22px;position:relative}
  .card-n{position:absolute;right:16px;top:14px;margin:0}
  .card h3{margin-top:0;font-size:29px;padding-right:50px}
}

/* 理由 */
.reason{padding:clamp(70px,12vh,150px) var(--gut)}
.reason .h-lg{font-size:clamp(38px,4.6vw,76px)}
@media(max-width:767.98px){.reason .h-lg{font-size:min(7.7vw,48px)}}
.reason-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);margin-top:clamp(36px,7vh,70px);align-items:start}
.rs-pic{border-radius:clamp(18px,2vw,32px);aspect-ratio:4/3;position:sticky;top:100px}
.rs-list li{padding:clamp(20px,3.6vh,36px) 0;border-top:2px solid var(--navy)}
.rs-list h3{font-size:clamp(23px,2.4vw,36px);font-weight:900;line-height:1.3;margin-bottom:8px}
@media(max-width:767.98px){.reason-grid{grid-template-columns:1fr}.rs-pic{position:relative;top:0}}

/* 地域 */
.area{background:var(--sky2);padding:clamp(80px,14vh,170px) var(--gut)}
.area-head{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:end;margin-bottom:clamp(36px,7vh,70px)}
.area-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,70px);align-items:start}
.map{position:sticky;top:96px}
.tiles{--s:clamp(28px,4.2vw,70px);position:relative;display:grid;grid-template-columns:repeat(12,var(--s));grid-auto-rows:var(--s);gap:clamp(2px,.4vw,5px);width:max-content;max-width:100%}
.t{grid-column:calc(var(--x) + 1);grid-row:calc(var(--y) + 1);display:grid;place-items:center;font-size:clamp(9px,.95vw,14px);font-weight:700;border-radius:clamp(5px,.6vw,10px);background:rgba(18,48,90,.08);color:rgba(18,48,90,.55);line-height:1;transition:background .4s,color .4s,box-shadow .4s}
.t.on{background:#8fb7d8;color:var(--navy)}
.t.hq{background:var(--navy);color:#fff;box-shadow:0 0 0 3px var(--amber)}
.t.lit{outline:3px solid var(--amber);outline-offset:1px}
.map-key{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;flex-wrap:wrap}
.k{display:inline-block;width:18px;height:18px;border-radius:5px;margin-left:10px}.k:first-child{margin-left:0}.k.hq{background:var(--navy);box-shadow:0 0 0 2px var(--amber)}.k.on{background:#8fb7d8}
.tab-btns{display:flex;gap:8px}
.tab{flex:1;height:56px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--navy);cursor:pointer;font-size:19px;font-weight:900;transition:background .25s,color .25s}
.tab[aria-selected=true]{background:var(--navy);color:#fff}
.panel{margin-top:22px}
.panel[hidden]{display:none}
html:not(.tabs-ready) .tab-btns{display:none}
html:not(.tabs-ready) .panel{margin-bottom:50px}
.pn-pic{border-radius:18px;aspect-ratio:3/2}
.panel h3{display:flex;align-items:baseline;justify-content:space-between;font-size:22px;font-weight:900;margin-top:16px}
.panel h3 span{font-size:clamp(40px,4.4vw,66px);line-height:1.1}
.pn-addr{font-size:15.5px}
.pn-pref{font-weight:700;margin-top:6px}
.pn-cases li{display:grid;grid-template-columns:clamp(140px,44%,240px) 1fr;gap:14px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.pc-pic{border-radius:10px;aspect-ratio:2/1}
.pn-cases h4{font-size:18px;font-weight:900;line-height:1.35}
.pn-cases p{font-size:14px}
.pc-y{font-size:15px!important}.pc-y b{font-size:30px;font-weight:900;margin:0 2px}
@media(max-width:899.98px){
  .area-head,.area-grid{grid-template-columns:1fr}
  .map{position:relative;top:0}
  .tiles{--s:min(calc((100vw - 2*var(--gut) - 24px)/12),44px)}
  .t{font-size:clamp(8px,2.2vw,12px)}
}

/* 事例 */
.works{padding:clamp(70px,12vh,150px) var(--gut)}
.wk-head{display:flex;flex-wrap:wrap;gap:8px 30px;align-items:baseline;justify-content:space-between;margin-bottom:24px}
.wk-table li{display:grid;grid-template-columns:1.2fr 1fr auto;gap:6px 20px;align-items:baseline;padding:clamp(12px,2.2vh,20px) 0;border-top:1px solid var(--line);font-weight:700;font-size:clamp(17px,1.5vw,21px);transition:padding .35s}
.wk-table li:hover{padding-left:12px}
.wk-table b{font-size:clamp(25px,2.6vw,38px);font-weight:900}
.snap{display:grid;grid-template-columns:.8fr 1.4fr .8fr;gap:clamp(10px,1.4vw,20px);margin-top:clamp(36px,6vh,60px);align-items:end}
.snap .pic{border-radius:clamp(14px,1.6vw,26px)}
.s1,.s3{aspect-ratio:3/4}.s2{aspect-ratio:4/3}
.snap-cap{font-size:13px;margin-top:10px}
@media(max-width:767.98px){.wk-table li{grid-template-columns:1fr auto}.wk-table li span:nth-child(2){grid-column:1;grid-row:2;font-size:14px}.wk-table b{grid-column:2;grid-row:1/3;align-self:center}.snap{grid-template-columns:1fr 1fr}.s2{grid-column:1/-1;grid-row:1}}

/* 流れ */
.flow{background:var(--navy);color:#fff;padding:clamp(80px,14vh,170px) var(--gut);--line:rgba(255,255,255,.3)}
.road{position:relative;margin-top:clamp(40px,8vh,80px)}
.road-line{position:absolute;left:0;right:0;top:0;width:100%;height:90px;overflow:visible}
.road-line path{fill:none;stroke:var(--amber);stroke-width:3;vector-effect:non-scaling-stroke}
.road-list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,40px);position:relative}
.stop{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--amber);color:var(--navy);font-size:24px;font-weight:900;margin:16px 0 22px}
.road-list h3{font-size:clamp(23px,2.2vw,34px);font-weight:900;line-height:1.3;margin-bottom:10px}
@media(max-width:899.98px){
  .road-line{display:none}
  .road-list{grid-template-columns:1fr;gap:0;border-left:3px solid var(--amber);margin-left:28px;padding-left:0}
  .road-list li{position:relative;padding:0 0 34px 44px}
  .stop{position:absolute;left:-30px;top:0;margin:0}
}

/* FAQ・会社情報 */
.faq{padding:clamp(70px,12vh,150px) var(--gut);display:grid;grid-template-columns:.7fr 1.3fr;gap:30px clamp(20px,4vw,70px);align-items:start}
.faq-item{background:#fff;border-radius:16px;margin-bottom:10px}
.faq-item summary{padding:18px 20px;font-weight:700;font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.faq-a{padding:0 48px 20px 20px}
@media(max-width:899.98px){.faq{grid-template-columns:1fr}}
.company{padding:0 var(--gut) clamp(70px,12vh,150px)}
.company h2{margin-bottom:24px}
.co>div{display:grid;grid-template-columns:clamp(100px,13vw,170px) 1fr;padding:15px 0;border-top:1px solid var(--line)}
.co dt{font-weight:900}
.bases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,24px);margin-top:26px}
.bases li{background:var(--sky2);border-radius:18px;padding:20px}
.bases h3{font-size:20px;font-weight:900}.bases p{font-size:15px}
@media(max-width:767.98px){.bases{grid-template-columns:1fr}.co>div{grid-template-columns:1fr}}

.contact{background:var(--sky);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);padding:clamp(80px,14vh,170px) var(--gut)}
.ct-left p{margin:20px 0 22px;max-width:26em}
.ct-right{background:#fff;border-radius:clamp(18px,2vw,30px);padding:clamp(20px,2.8vw,42px)}
.f-row input,.f-row select,.f-row textarea{border-radius:10px}
@media(max-width:899.98px){.contact{grid-template-columns:1fr}}

.ft{background:var(--navy);color:#fff;padding:44px var(--gut);display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center}
.ft .logo-t{color:#fff;font-size:26px}
.ft-c{margin-left:auto;font-size:13px;opacity:.75}