/* 日本防災サービス サイト共通
   緑がメイン、背景はライトグレー。朱は消火器と注意・必須のところだけ。英字は Barlow、和文は OS の書体。 */
:root{
  --green:#0E7A4A; --green-d:#0A5C38; --green-dd:#073F27; --green-l:#2E9E72; --green-p:#E8F3ED;
  --gray:#F3F4F3; --gray-2:#E7E9E8; --line:#DEE2E0; --line-2:#C9CECB;
  --accent:#D9472B; --accent-d:#B93A20;
  --ink:#14241D; --ink-2:#4C5A54; --ink-3:#68756F; --white:#fff;
  --gutter:clamp(20px,4.4vw,64px); --maxw:1240px; --head:76px;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","YuGothic","Noto Sans JP",Meiryo,system-ui,sans-serif;
  --latin:"Barlow","Hiragino Sans","Yu Gothic Medium",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 12px)}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);font-size:16px;line-height:1.95;letter-spacing:.03em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:700;line-height:1.5;font-feature-settings:"palt";word-break:auto-phrase}
.hero-p,.ph-lead,.about p.lead,.band p,.cta p{word-break:auto-phrase}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--green-d);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
.wrap{width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.num{font-variant-numeric:tabular-nums}
.small{font-size:13px;color:var(--ink-3);line-height:1.85}
.en{font-family:var(--latin);font-weight:500;letter-spacing:.01em}
a.link{color:var(--green);border-bottom:1px solid currentColor}
a.link:hover{color:var(--green-d)}

/* ---------- ヘッダー ---------- */
.hd{position:fixed;inset:0 0 auto 0;min-height:var(--head);z-index:40;display:flex;align-items:center;padding:0 var(--gutter);background:#fff;box-shadow:0 1px 0 var(--line)}
.logo{display:flex;align-items:center;gap:11px;color:var(--green)}
.logo-mark{width:38px;height:38px;flex:none}
.logo-t{display:flex;flex-direction:column;line-height:1.2;flex:none}
.logo-ja{font-size:18px;font-weight:700;letter-spacing:.07em;white-space:nowrap}
.logo-u{display:block;margin-top:2px;width:0;min-width:100%}
.logo-u svg{width:100%;height:auto}
.logo-en{font-family:var(--latin);font-size:9.5px;font-weight:600;letter-spacing:.17em;margin-top:4px;white-space:nowrap;opacity:.65}
.gnav{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);font-size:14px;font-weight:500;margin-left:auto}
.gnav a{position:relative;padding:6px 0;white-space:nowrap}
.gnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--green);transition:right .2s}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{right:0}
.hd-cta{margin-left:clamp(14px,2vw,28px)}

/* ---------- ボタン ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:3px;padding:12px 28px;font-weight:700;font-size:15px;line-height:1.4;border:1px solid var(--green);color:var(--green);background:#fff;cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.pill svg{display:none}
.pill:hover{background:var(--green);color:#fff}
.pill.main,.pill.solid{background:var(--green);border-color:var(--green);color:#fff}
.pill.main:hover,.pill.solid:hover{background:var(--green-d);border-color:var(--green-d)}
.pill.white{background:transparent;border-color:#fff;color:#fff}
.pill.white:hover{background:#fff;color:var(--green-d)}
.pill.fill-white{background:#fff;border-color:#fff;color:var(--green-d)}
.pill.fill-white:hover{background:var(--green-dd);border-color:var(--green-dd);color:#fff}
.pill.sm{padding:8px 18px;font-size:14px}
.pill[disabled]{opacity:.65;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.more{display:inline-block;margin-top:8px;font-size:14px;font-weight:700;color:var(--green);border-bottom:1px solid currentColor}
.more:hover{color:var(--green-d)}

/* ---------- 見出し ---------- */
.sec{padding:clamp(64px,8vw,112px) 0}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:clamp(24px,3.2vw,44px)}
.sec-en{font-family:var(--latin);font-weight:500;font-size:clamp(40px,5.4vw,76px);line-height:1.05;letter-spacing:0;color:var(--green)}
.sec-ja{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.06em}
.ph{padding:calc(var(--head) + clamp(32px,4.6vw,64px)) 0 clamp(24px,3vw,40px)}
.ph-en{font-family:var(--latin);font-weight:500;font-size:clamp(44px,6.4vw,92px);line-height:1;color:var(--green);letter-spacing:0}
.ph-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:12px}
.ph-ja{font-size:clamp(17px,1.6vw,20px);font-weight:700;letter-spacing:.06em}
.crumb{font-size:12px;color:var(--ink-3)}
.crumb ol{display:flex;flex-wrap:wrap;gap:4px 8px}
.crumb li{display:flex;align-items:center;gap:8px}
.crumb li+li::before{content:"";width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.crumb a:hover{color:var(--green-d);text-decoration:underline}
.ph-lead{max-width:44em;margin-top:clamp(18px,2.2vw,28px)}

/* ---------- トップ：最初の画面 ---------- */
.hero{position:relative;min-height:max(600px,min(90svh,920px));overflow:hidden;background:#fff}
.hero-copy{position:relative;z-index:2;max-width:calc(var(--maxw) + var(--gutter)*2);margin:0 auto;padding:calc(var(--head) + clamp(40px,8vh,96px)) var(--gutter) clamp(40px,6vh,72px)}
.hero-h1{font-size:clamp(34px,4.7vw,68px);line-height:1.32;letter-spacing:.02em;color:var(--green);font-weight:700}
.hero-p{max-width:25em;margin-top:clamp(16px,2vw,26px)}
.hero .btns{margin-top:clamp(20px,2.4vw,30px)}
.hero-art{position:absolute;z-index:1;--c:min(92vw,1240px);right:calc(var(--c)*-.3);top:calc(var(--head) + 6px);width:var(--c);height:var(--c);border-radius:50%;overflow:hidden;background:#E9EBEA}
.hero-art img{position:absolute;width:148%;max-width:none;left:-26%;top:-9%}

/* ---------- トップ：方針 ---------- */
.policy{position:relative;background:var(--gray);padding:clamp(56px,7vw,96px) 0 clamp(24px,3vw,40px);border-radius:50vw 50vw 0 0/clamp(30px,5vw,80px) clamp(30px,5vw,80px) 0 0;margin-top:clamp(-80px,-5vw,-30px);z-index:3}
.policy-row{display:grid;grid-template-columns:110px minmax(0,4fr) minmax(0,7fr);gap:clamp(16px,3vw,44px);align-items:center;padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--line-2)}
.policy-row:last-child{border-bottom:1px solid var(--line-2)}
.policy-row svg{width:100%;max-width:96px}
.policy-row h3{font-size:clamp(17px,1.6vw,21px);line-height:1.6;letter-spacing:.04em}
.policy-row p{font-size:15px}

/* ---------- トップ：事業内容 ---------- */
.svc{background:var(--gray)}
.svc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:start}
.svc-side{position:sticky;top:calc(var(--head) + 24px)}
.svc-circle{position:relative;aspect-ratio:1;border-radius:50%;background:#fff;overflow:hidden}
.svc-circle img{position:absolute;inset:6%;width:88%;height:88%;opacity:0;transition:opacity .25s}
.svc-circle img.on{opacity:1}
.svc-item{padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--line-2)}
.svc-item:last-child{border-bottom:1px solid var(--line-2)}
.svc-item h3{font-size:clamp(18px,1.7vw,22px);letter-spacing:.04em;margin-bottom:6px}
.svc-item p{font-size:15px}

/* ---------- トップ：私たちについて ---------- */
.about{position:relative;background:var(--green-d);color:#fff;overflow:hidden}
.about-bg{position:absolute;right:-16%;top:-14%;width:88%;max-width:none;opacity:.8;pointer-events:none}
.about .wrap{position:relative;z-index:1}
.about .sec-en,.about .sec-ja{color:#fff}
.about h3{font-size:clamp(21px,2.5vw,32px);line-height:1.55;letter-spacing:.04em;margin-bottom:clamp(12px,1.6vw,20px)}
.about p.lead{max-width:32em}
.about-facts{margin:clamp(22px,2.6vw,34px) 0;max-width:36em;border-top:1px solid rgba(255,255,255,.35)}
.about-facts li{display:flex;gap:18px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.35);font-size:15px}
.about-facts b{flex:none;width:9em;font-weight:700}

/* ---------- 対応の流れの例 ---------- */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.8vw,40px)}
.case-img{aspect-ratio:4/3;background:var(--gray);overflow:hidden;display:grid;place-items:center}
.case-img img{width:78%;height:auto}
.case h3{font-size:18px;margin:14px 0 10px;letter-spacing:.03em}
.case ol{font-size:14px;color:var(--ink-2);border-top:1px solid var(--line);counter-reset:c}
.case ol li{padding:8px 0;border-bottom:1px solid var(--line);line-height:1.7}
.cases-note{margin-top:clamp(18px,2.2vw,28px)}

/* ---------- 対象チェックの帯 ---------- */
.band{background:var(--green);color:#fff;padding:clamp(44px,5.4vw,72px) 0}
.band-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(20px,4vw,56px);align-items:center}
.band h2{font-size:clamp(21px,2.5vw,32px);line-height:1.5;letter-spacing:.04em;color:#fff}
.band p{margin-top:10px;max-width:34em}
.band-right{display:flex;justify-content:flex-end}

/* ---------- 記事の並び ---------- */
.rows{border-top:1px solid var(--line-2)}
.rows a{display:grid;grid-template-columns:88px minmax(0,1fr) 18px;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-2)}
.rows .r-cat{font-size:12.5px;font-weight:700;color:var(--green)}
.rows .r-t{font-size:15.5px;font-weight:500;line-height:1.7}
.rows i{color:var(--ink-3);display:grid;place-items:center}
.rows i svg{width:15px;height:15px}
.rows a:hover .r-t{color:var(--green)}
.sec-more{margin-top:clamp(18px,2.4vw,28px);text-align:right}
.circ{font-weight:700;font-size:14.5px;color:var(--green);border-bottom:1px solid currentColor}
.circ i{display:none}

/* ---------- お問い合わせの帯 ---------- */
.cta{position:relative;background:var(--green-d);color:#fff;overflow:hidden;border-radius:50vw 50vw 0 0/clamp(30px,5vw,80px) clamp(30px,5vw,80px) 0 0}
.cta-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.cta-en{font-family:var(--latin);font-weight:500;font-size:clamp(44px,6.4vw,92px);line-height:1;letter-spacing:0}
.cta p:not(.cta-en){margin-top:12px;max-width:34em}

/* ---------- フッター ---------- */
.ft{background:var(--green-dd);color:#fff;padding:clamp(44px,5vw,64px) 0 26px;font-size:14px}
.ft-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(24px,5vw,72px)}
.ft .logo{color:#fff}
.ft-desc{margin-top:14px;max-width:27em;font-size:13px;opacity:.85;line-height:1.95}
.ft-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ft-nav h4{font-weight:700;font-size:13px;opacity:.7;margin-bottom:8px}
.ft-nav li a{display:block;padding:3px 0;line-height:1.7}
.ft-nav li a:hover{text-decoration:underline}
.ft-bottom{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:12px;opacity:.8}

/* ---------- 下層ページ ---------- */
.block{padding:clamp(40px,5.6vw,76px) 0;border-top:1px solid var(--line)}
.block:first-of-type{border-top:0}
.b-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(16px,4vw,56px)}
.b-grid>h2{font-size:clamp(19px,1.9vw,24px);letter-spacing:.04em}
.s-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,8fr);gap:clamp(18px,3.4vw,48px);align-items:center;padding:clamp(22px,3vw,36px) 0;border-top:1px solid var(--line)}
.s-row:first-child{border-top:0;padding-top:0}
.s-row .c{aspect-ratio:1;border-radius:50%;background:var(--gray);padding:7%;max-width:190px}
.s-row h3{font-size:clamp(18px,1.8vw,22px);letter-spacing:.04em;margin-bottom:8px}
.s-row p{font-size:15px}
.s-row .tag{display:inline-block;font-size:12px;font-weight:700;background:var(--gray-2);color:var(--green-d);padding:2px 10px;margin-left:10px;vertical-align:2px;letter-spacing:.05em}
table.t{width:100%;border-collapse:collapse;font-size:15px;line-height:1.85}
table.t th,table.t td{padding:14px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
table.t tr:first-child th,table.t tr:first-child td{border-top:1px solid var(--line-2)}
table.t th{font-weight:700;white-space:nowrap;width:12em;color:var(--green-d)}
table.t td small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2);counter-reset:f}
.flow li{counter-increment:f;padding:18px 16px 20px;border-right:1px solid var(--line)}
.flow li:first-child{padding-left:0}
.flow li:last-child{border-right:0}
.flow b{display:block;font-size:16px;margin-bottom:6px;line-height:1.6}
.flow b::before{content:counter(f) ". ";color:var(--green)}
.flow span{display:block;font-size:14px;color:var(--ink-2);line-height:1.85}
.nots{border-top:1px solid var(--line-2)}
.nots li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.nots b{display:block;margin-bottom:2px}

/* ---------- 料金 ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--green);border-bottom:1px solid var(--line-2)}
.plan{padding:22px 22px 26px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.plan:first-child{padding-left:0}
.plan:last-child{border-right:0;padding-right:0}
.plan h3{font-size:20px;letter-spacing:.04em}
.plan .for{font-size:14px;color:var(--ink-2);margin:4px 0 12px;line-height:1.85}
.plan .yen{font-size:15px;font-weight:700;color:var(--green-d);margin-bottom:10px}
.plan ul{border-top:1px solid var(--line);margin-bottom:18px;flex:1}
.plan li{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.75}
.plan .pill{align-self:flex-start}
.tool{background:var(--gray);padding:clamp(22px,3.2vw,40px)}
.tool h3{font-size:clamp(19px,1.9vw,24px);letter-spacing:.04em}
.tool-lead{font-size:14.5px;color:var(--ink-2);margin:6px 0 clamp(16px,2vw,24px)}
.field{margin-top:16px}
.field>b,.field label b{display:block;font-size:14px;margin-bottom:8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{background:#fff;border:1px solid var(--line-2);padding:8px 16px;font-size:14px;cursor:pointer;line-height:1.5;transition:background .15s,color .15s,border-color .15s}
.opt:hover{border-color:var(--green)}
.opt.on{background:var(--green);color:#fff;border-color:var(--green)}
.units{width:96px;padding:9px 10px;border:1px solid var(--line-2);background:#fff}
.sim-res{margin-top:22px;background:#fff;padding:18px 22px;border-left:3px solid var(--green)}
.sim-res .l{font-size:13px;color:var(--ink-2)}
.sim-res .r{font-family:var(--latin);font-weight:600;font-size:clamp(26px,3.2vw,38px);color:var(--green-d);line-height:1.3;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sim-res .s{font-size:13px;color:var(--ink-2)}
.sim-res .i{font-size:14px;margin-top:8px;display:none}
.sim-send{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sim-send input{flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--line-2);background:#fff}
.err{display:none;color:var(--accent-d);font-size:13px;margin-top:6px}
.err.on{display:block}
.thanks{display:none;background:#fff;padding:18px 22px;margin-top:16px}
.thanks.on{display:block}

/* ---------- 対象チェック ---------- */
.diag{max-width:720px}
.diag-bar{height:3px;background:var(--gray-2);margin-bottom:20px}
.diag-bar i{display:block;height:100%;width:18%;background:var(--green);transition:width .2s}
.diag-step{display:none}
.diag-step.on{display:block}
.diag-q{font-size:13px;color:var(--ink-3)}
.diag-step h3{font-size:clamp(18px,1.8vw,22px);margin:4px 0 14px;letter-spacing:.03em}
.diag-opt{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line-2);padding:14px 18px;margin-bottom:10px;cursor:pointer;transition:border-color .15s;line-height:1.7}
.diag-opt:hover{border-color:var(--green)}
.diag-opt b{display:block;font-size:15.5px}
.diag-opt span{display:block;font-size:13px;color:var(--ink-2)}
.diag-back{background:none;border:0;padding:6px 0;font-size:13.5px;color:var(--ink-2);cursor:pointer;text-decoration:underline}
.diag-res{display:none}
.diag-res.on{display:block}
.res-badge{display:inline-block;font-size:13px;font-weight:700;padding:3px 12px;color:#fff;background:var(--green-d);letter-spacing:.04em}
.res-badge.high{background:var(--accent)}
.res-badge.low{background:var(--green-l)}
.diag-res h3{font-size:clamp(19px,1.9vw,24px);margin:12px 0}
.res-link{margin-top:8px}
.diag-res .notes{margin-top:16px;font-size:13px;color:var(--ink-2);line-height:1.9;border-top:1px solid var(--line-2);padding-top:12px}
.diag-res .btns{margin-top:18px}
.check-list{margin-top:14px;border-top:1px solid var(--line-2)}
.check-list li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}

/* ---------- フォーム ---------- */
.form{max-width:680px}
.form label,.form .lb{display:block;font-size:14px;font-weight:700;margin:18px 0 6px}
.form .rq,.form .op{font-size:11.5px;font-weight:700;margin-left:8px;padding:1px 7px}
.form .rq{background:var(--accent);color:#fff}
.form .op{color:var(--ink-3);padding:0}
.form input[type=text],.form input[type=email],.form select,.form textarea{display:block;width:100%;padding:12px 14px;border:1px solid var(--line-2);background:#fff;border-radius:0;font-size:16px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
.form textarea{min-height:140px;resize:vertical}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form .wants{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:4px}
.form .wants label{display:inline-flex;align-items:center;gap:7px;font-weight:400;margin:0;font-size:14.5px}
.form .agree{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:14px;margin-top:20px}
.form .agree input{margin-top:6px}
.form .more-btn{background:none;border:0;padding:10px 0 0;font-size:14px;font-weight:700;color:var(--green);cursor:pointer;text-decoration:underline}
.form .detail{display:none}
.form .detail.open{display:block}
.form .pill{margin-top:22px}
.form-note{font-size:13px;color:var(--ink-2);margin-top:10px;line-height:1.85}
.form-note.err2{color:var(--accent-d)}
.form-note.ok{color:var(--green-d);font-weight:700}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px)}

/* ---------- よくある質問 ---------- */
.faq details{border-bottom:1px solid var(--line-2)}
.faq details:first-child{border-top:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:28px minmax(0,1fr) 20px;gap:8px;padding:18px 0;font-weight:700;font-size:15.5px;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq .q{font-family:var(--latin);font-weight:600;color:var(--green);font-size:17px;line-height:1.5}
.faq .chev{position:relative;width:16px;height:16px;margin-top:6px}
.faq .chev::before,.faq .chev::after{content:"";position:absolute;left:0;right:0;top:7px;height:1.5px;background:var(--green-d)}
.faq .chev::after{transform:rotate(90deg)}
.faq details[open] .chev::after{transform:rotate(0)}
.faq .a{padding:0 28px 22px 36px;font-size:15px}

/* ---------- 文章だけのページ ---------- */
.doc{max-width:760px}
.doc h2{font-size:18px;margin:32px 0 8px}
.doc p,.doc li{font-size:15px}
.doc ul{list-style:disc;padding-left:1.4em}
.doc a{color:var(--green);text-decoration:underline}

/* ---------- 幅ごと ---------- */
@media (max-width:1240px){
  .hero-art{right:calc(var(--c)*-.42)}
}
@media (max-width:1100px){
  .gnav{gap:13px;font-size:13px}
  .gnav .pill{font-size:13px}
  .logo-mark{width:34px;height:34px}
  .logo-ja{font-size:16px}
  .hd-cta{padding:7px 12px;font-size:13px;margin-left:14px}
}
/* メニューが7つあるので、1000px 以下はメニューを2段目に下ろす */
@media (max-width:1000px){
  :root{--head:102px}
  html{scroll-padding-top:12px}
  .hd{position:absolute;flex-wrap:wrap;padding:0;align-content:flex-start}
  .hd .logo{height:62px;padding-left:var(--gutter)}
  .hd-cta{margin:0 var(--gutter) 0 auto}
  .gnav{order:3;width:100%;height:40px;margin:0;padding:0 var(--gutter);gap:clamp(10px,2vw,18px);border-top:1px solid var(--line)}
}
@media (max-width:860px){
  .hero{min-height:0;padding-bottom:calc(72vw + 30px)}
  .hero-copy{padding-top:calc(var(--head) + 28px)}
  .hero-art{--c:128vw;top:auto;bottom:calc(var(--c)*-.34);right:calc((100vw - var(--c))/2)}
  .policy-row{grid-template-columns:64px minmax(0,1fr);gap:6px 14px;align-items:start}
  .policy-row p{grid-column:1/3}
  .policy-row svg{max-width:60px}
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .svc-side{display:none}
  .about-bg{width:190%;right:-60%;top:auto;bottom:-6%;opacity:.45}
  .about-facts b{width:7.6em}
  .cases{grid-template-columns:minmax(0,1fr)}
  .band-in{grid-template-columns:minmax(0,1fr)}
  .band-right{justify-content:flex-start}
  .rows a{grid-template-columns:minmax(0,1fr) 16px;gap:2px 12px;padding:14px 0}
  .rows .r-cat{grid-column:1/3}
  .cta-in{grid-template-columns:minmax(0,1fr)}
  .ft-grid{grid-template-columns:minmax(0,1fr)}
  .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-grid{grid-template-columns:minmax(0,1fr)}
  .s-row{grid-template-columns:minmax(0,1fr)}
  .s-row .c{width:min(44vw,160px)}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow li,.flow li:first-child{border-right:0;border-bottom:1px solid var(--line);padding:14px 0}
  .plans{grid-template-columns:minmax(0,1fr)}
  .plan,.plan:first-child,.plan:last-child{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  table.t th{width:auto;white-space:normal;min-width:6.5em}
  .faq .a{padding:0 0 18px 36px}
  .form .two{grid-template-columns:minmax(0,1fr)}
  .pill{white-space:normal}
}
@media (max-width:560px){
  :root{--head:134px}
  .gnav{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;height:auto;gap:0 12px;padding:4px var(--gutter);font-size:13px}
  .gnav a{padding:5px 0;line-height:1.6}
}
@media (max-width:356px){
  :root{--head:164px}
  .gnav{grid-template-columns:repeat(3,auto)}
  .logo-ja{font-size:15px}
  .hd .hd-cta{padding:6px 9px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gnav a::after,.svc-circle img{transition:none}
}
@media print{.hd,.cta{display:none}.ph{padding-top:20px}}