:root{--ink:#2c2c2c;--sub:#4b5563;--acc:#33a3ca;--acc-d:#1f8db3;--btn:#176b8a;--alt:#e8f4f8;--card:#f8f9fa;--line:#e5e7eb;--r:10px;--w:1140px;--sh:0 6px 16px rgba(23,107,138,.22)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;color:var(--ink);background:#fff;line-height:1.85;font-size:16px;-webkit-font-smoothing:antialiased;word-break:auto-phrase;text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:var(--w);margin:0 auto;max-width:100%}
svg{display:block}
.k{display:inline-block}
/* header */
header.site{height:72px;border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:5}
header.site .wrap{display:flex;align-items:center;height:100%;gap:32px}
header.site .logo img{height:30px;width:auto}
header.site nav{margin-left:auto;display:flex;gap:28px;font-size:14.5px;color:var(--sub)}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--line);border-radius:var(--r);align-items:center;justify-content:center;background:#fff;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r);font-weight:700;font-size:15px;height:52px;padding:0 28px;border:1.5px solid var(--btn);white-space:nowrap}
.btn.main{background:var(--btn);color:#fff;box-shadow:var(--sh)}
.btn.sub{background:#fff;color:var(--btn)}
.btn.sm{height:40px;padding:0 18px;font-size:14px}
/* 予約人数（数字は body の data-booked 1か所） */
.booked{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--sub);font-weight:500}
.booked[hidden]{display:none}
.booked .ppl{display:flex}
.booked .ppl svg{width:28px;height:28px;border-radius:50%;background:var(--alt);color:var(--btn);border:2px solid #fff;margin-left:-8px;padding:3px}
.booked .ppl svg:first-child{margin-left:0}
.booked b{color:var(--btn);font-size:17px}
.win{background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(20,60,80,.18),0 0 0 1px rgba(0,0,0,.06);overflow:hidden;position:absolute}
.win .bar{height:24px;background:#f1f3f5;display:flex;gap:6px;align-items:center;padding:0 10px}
.win .bar i{width:8px;height:8px;border-radius:50%;background:#d1d5db}
.win .bar span{white-space:nowrap;margin-left:8px;font-size:11px;color:#4b5563;font-weight:700}
.win img{width:100%;height:auto}
/* hero：Canva で仕上げたバナー（PC 1920×840・スマホ 1080×1200）に、ボタンを HTML で重ねる（899 以下はボタンを絵の下の帯に置く） */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hero{position:relative;overflow:hidden;background:#2a86a8;padding:0}
.hero-in{position:relative;max-width:1920px;margin:0 auto}
.hero-art,.hero-art img{display:block;width:100%}
.hero-art img{height:auto;aspect-ratio:1920/840}
.hero-cta{position:absolute;left:5%;bottom:3.6%;width:clamp(210px,18.75%,360px);display:flex;flex-direction:column;gap:12px}
.hero-cta .btn{width:100%;height:clamp(44px,2.8vw,58px);padding:0 14px;font-size:clamp(14px,.95vw,18px)}
.hero-cta .btn.main{background:#fff;color:var(--btn);border-color:#fff;box-shadow:0 8px 20px rgba(8,52,70,.35)}
.hero-cta .btn.sub{background:rgba(11,74,99,.62);color:#fff;border:2px solid #fff}
.hero-cta .btn:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 8px #0b4a63}
/* 「2つ目からは有料です…」: PC は絵の中の文字で読めるので、読み上げだけ（.vh と同じ）。899px 以下では見せる。同じ文は HTML に1か所だけ */
.hero-note{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* 1920px より広い画面: 左右はバナーの縁の色で埋め、境目をぼかす */
@media (min-width:1921px){.hero{background:linear-gradient(90deg,#2883a4,#358faf)}.hero-art img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}}
/* 信頼の帯 */
.strip{background:var(--alt);height:80px}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);height:100%;align-items:center}
.strip .it{display:flex;align-items:center;gap:14px;font-weight:700;font-size:16px;justify-content:center;line-height:1.5}
.strip .it small{display:block;font-weight:500;font-size:13.5px;color:var(--sub);line-height:1.4}
.strip .ico{width:44px;height:44px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
/* sections：節の見出しは左寄せ、バナーの中の見出しは中央 */
section{padding:96px 0}
h2.t{font-size:36px;font-weight:800;line-height:1.4;position:relative;padding-bottom:20px;margin-bottom:44px;text-align:left}
h2.t:after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--acc)}
.alt{background:var(--alt)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fc{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:#fff}
.fc .h{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.fc .ico{width:56px;height:56px;border-radius:50%;background:var(--btn);display:flex;align-items:center;justify-content:center;flex:none}
.fc h3{font-size:19px;line-height:1.5;font-weight:800}
.fc p{font-size:15px;color:var(--sub)}
/* やること4段（図解バナー） */
.fourb{border:1px solid #d9eaf1;border-radius:20px;background:linear-gradient(180deg,#fbfeff,#f1f8fb);padding:36px 40px 28px}
.fourb .ttl{text-align:center;font-size:14.5px;font-weight:700;color:var(--sub)}
.fourb h3{text-align:center;font-size:34px;font-weight:800;margin:2px 0 26px}
.fourb h3 em{font-style:normal;color:var(--acc-d)}
.fourb .row{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr;align-items:stretch}
.fourb .st{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;position:relative}
.fourb .st .hd{height:48px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:16px;color:#fff;background:var(--btn)}
.fourb .st.g .hd{background:#6b7280}
.fourb .st .hd i{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--btn);font-style:normal;font-size:14px;display:flex;align-items:center;justify-content:center}
.fourb .st.g .hd i{color:#4b5563}
.fourb .st .art2{height:140px;background:linear-gradient(180deg,#f4fafc,#e8f4f8)}
.fourb .st .tx{padding:14px 16px 8px;flex:1}
.fourb .st .tx p{font-size:14px;color:var(--sub);line-height:1.7}
.fourb .st .fee{margin:6px 16px 16px;text-align:center;border-radius:999px;font-weight:800;font-size:14px;height:30px;line-height:30px;background:#d0eaf4;color:#0f5a77}
.fourb .st.g .fee{background:#eceff2;color:#374151}
.fourb .tri{width:0;height:0;border-left:13px solid var(--acc-d);border-top:9px solid transparent;border-bottom:9px solid transparent;margin:auto}
.bt{margin-top:22px;border:1.5px solid #cfe5ee;border-radius:60px;background:#fff;display:flex;align-items:center;gap:18px;padding:14px 28px}
.bt .ar{width:48px;height:48px;border-radius:50%;background:var(--btn);display:flex;align-items:center;justify-content:center;flex:none}
.bt b{font-size:20px}
.bt em{font-style:normal;color:var(--acc-d)}
.bt span.s{font-size:14px;color:var(--sub);display:block;font-weight:500}
/* 流れ（約1か月） */
.brk{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.brk div{border-radius:999px;text-align:center;font-weight:800;font-size:15px;height:38px;line-height:38px;background:#d0eaf4;color:#0f5a77}
.brk div.m{background:#eceff2;color:#374151}
.fl{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.fl:before{content:"";position:absolute;top:19px;left:10%;right:10%;height:3px;background:var(--acc);border-radius:2px}
.fl .nd{width:40px;height:40px;border-radius:50%;background:var(--btn);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;position:relative;box-shadow:0 0 0 5px #fff}
.fl .it{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;height:calc(100% - 52px)}
.fl .it .im{height:130px;background:linear-gradient(180deg,#f0f8fb,#e4f1f6);position:relative;overflow:hidden}
.fl .it .tx{padding:12px 14px 14px}
.fl .it h3{font-size:15.5px;font-weight:800;line-height:1.5;margin-bottom:4px}
.fl .it p{font-size:14px;color:var(--sub);line-height:1.65}
.fl .mini{font-size:12px;line-height:1.5;color:#374151}
.time{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.time div{border:1px solid var(--line);border-radius:var(--r);padding:14px 20px;background:var(--card);font-size:15px}
.time b{display:block;font-size:13px;color:#0f5a77;letter-spacing:.06em}
.note{font-size:13.5px;color:var(--sub);margin-top:10px}
/* 料金表 */
.pt{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.pt .rw{display:grid;grid-template-columns:240px 300px 1fr;border-bottom:1px solid var(--line)}
.pt .rw:last-child{border-bottom:0}
.pt .rw>div{padding:18px 24px;font-size:15px;line-height:1.7}
.pt .h{background:var(--card);font-weight:800;font-size:14px;color:var(--sub)}
.pt .h>div{padding:10px 24px}
.pt .n{font-weight:800}
.pt .p{font-weight:800;font-size:17px}
.pt .p.free{color:var(--btn);font-size:24px}
.pt .p small{display:block;font-weight:500;font-size:13.5px;color:var(--sub)}
.pt .s{color:var(--sub);font-size:14.5px}
.pt .hl{background:#f3fafc}
/* 試算バナー */
.calc{margin-top:48px;border:1px solid #d9eaf1;border-radius:20px;background:linear-gradient(180deg,#fbfeff,#f1f8fb);padding:32px 40px 24px}
.calc .ttl{text-align:center;font-size:14.5px;font-weight:700;color:var(--sub)}
.calc h3{text-align:center;font-size:30px;font-weight:800;margin:2px 0 6px}
.calc h3 em{font-style:normal;color:var(--acc-d)}
.calc .kari{text-align:center;font-size:14px;font-weight:700;color:#8a5a00}
.calc .kari span{background:#fff4d6;border:1px solid #e8c873;border-radius:999px;padding:1px 14px}
.calc .cols{display:grid;grid-template-columns:1fr 36px 1fr 36px 1fr;align-items:stretch;margin-top:22px}
.calc .bx{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.calc .bx h4{font-size:15px;font-weight:800;color:var(--sub);margin-bottom:12px}
.calc .bar{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:14px;font-weight:700}
.calc .bar span{width:30px;flex:none;color:var(--sub)}
.calc .bar div{white-space:nowrap;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:13px}
.calc .eq{font-size:15px;line-height:1.9}
.calc .eq b{font-size:17px}
.calc .eq .big{font-size:22px;font-weight:800;color:var(--ink)}
.calc .cost{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:6px;align-items:baseline;margin-top:12px;border-top:1px solid var(--line);padding-top:10px;font-size:14.5px;line-height:1.6}
.calc .cost dt{white-space:nowrap}
@media (max-width:1139px){.calc .cols{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr)}.calc .cost dt{white-space:normal}}
.calc .cost dd{font-weight:800;font-size:16px;white-space:nowrap;text-align:right}
.calc .cost sup,.calc .res sup{font-size:.7em}
.calc .res{background:var(--btn);color:#fff;border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.calc .res small{font-size:14px;opacity:.95}
.calc .res b{font-size:34px;line-height:1.3;font-weight:800;display:block;margin:4px 0}
.calc .res b span{font-size:20px}
.calc .arrow{display:flex;align-items:center;justify-content:center}
.calc .src{font-size:13px;color:var(--sub);margin-top:16px;line-height:1.7}
/* 安心 */
.two{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}
.why{border:1px solid #cfe5ee;background:#fff;border-radius:20px;padding:32px 34px}
.why .lab{font-size:13.5px;font-weight:800;color:#0f5a77}
.why h3{font-size:24px;line-height:1.5;font-weight:800;margin:4px 0 12px}
.why p{font-size:15.5px;color:var(--sub);margin-bottom:12px}
.why .sg{margin-top:16px;font-weight:700;font-size:15px}
.safe{border:1px solid var(--line);border-radius:20px;padding:32px 34px;background:#fff}
.safe h3{font-size:24px;font-weight:800;margin:4px 0 14px;line-height:1.5}
.safe ul{list-style:none}
.safe li{display:flex;gap:12px;padding:8px 0;font-size:15px;color:#374151;border-bottom:1px solid var(--line)}
.safe li:last-child{border-bottom:0}
.safe li i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--btn);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:3px}
/* 入口の帯（背景：Canva生成。文字はHTML） */
.demo{position:relative;border-radius:20px;overflow:hidden;height:344px;background:#eaf6fa;border:1px solid #d3e9f1}
.demo .bg{position:absolute;right:0;top:0;height:100%;width:58%;object-fit:cover;filter:blur(1.5px)}
.demo:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#eaf6fa 42%,rgba(234,246,250,.85) 58%,rgba(234,246,250,.05));z-index:1}
.demo .in{position:relative;z-index:2;padding:46px 56px;max-width:700px}
.demo .kk{font-size:14px;font-weight:700;color:#0f5a77}
.demo h3{font-size:34px;line-height:1.45;font-weight:800;margin:6px 0 10px}
.demo p{font-size:15px;color:#374151}
.demo .acts{display:flex;gap:12px;margin-top:22px}
.demo .tick{position:absolute;right:56px;top:44px;z-index:2;background:#fff;border-radius:16px;padding:16px 22px;box-shadow:0 12px 28px rgba(20,60,80,.16);font-size:14px;font-weight:700;line-height:1.7}
.demo .tick div{display:flex;gap:8px;align-items:center}
/* 事例 */
.cg{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.case{grid-column:span 2;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.case.w{grid-column:span 3}
.case .th{aspect-ratio:1/1;background:linear-gradient(135deg,#f3fafc,#e3f1f6);position:relative;overflow:hidden;display:flex;flex-direction:column}
.case.w .th{aspect-ratio:auto;height:276px}
.case .th.pic{display:block;background:none}
.case .th.pic img{width:100%;height:100%;object-fit:cover}
.case .res{padding:16px 22px 0}
.case .res b{display:block;font-size:30px;line-height:1.25;font-weight:800;color:var(--ink);white-space:nowrap}
.case .res b i{font-style:normal;color:var(--acc-d)}
.case .res small{display:block;font-size:13.5px;font-weight:700;color:#0f5a77;margin-top:2px}
.case .vis{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 0 12px}
.case .vis img{height:100%;width:auto;max-width:92%;object-fit:contain;border-radius:8px;box-shadow:0 6px 16px rgba(20,60,80,.14)}
.case .vis svg{width:auto;height:auto;max-width:92%;max-height:100%}
.case .bd{padding:16px 20px 20px}
.case .tg{display:inline-block;font-size:12.5px;font-weight:700;background:#eef1f4;color:#374151;padding:0 10px;border-radius:4px;margin-bottom:8px}
.case h3{font-size:16.5px;font-weight:800;line-height:1.55;margin-bottom:12px}
.case .r{display:flex;gap:10px;font-size:14px;line-height:1.65;padding:4px 0;color:#374151}
.case .r span{flex:none;font-size:12px;font-weight:800;border-radius:999px;padding:0 10px;height:22px;line-height:22px;margin-top:2px}
.case .r .a{background:var(--ink);color:#fff}
.case .r .b{background:#d0eaf4;color:#0f5a77}
.more{display:flex;justify-content:center;margin-top:32px}
/* 担当者 */
.person{display:grid;grid-template-columns:400px 1fr;gap:72px;align-items:center}
.person .ph{width:400px;height:480px;border-radius:var(--r);overflow:hidden}
.person .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.person .role{font-size:14px;color:var(--sub)}
.person h3{font-size:34px;font-weight:800;margin:4px 0 14px}
.person p{font-size:15.5px;color:var(--sub);margin-bottom:14px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 0}
.facts div{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;font-size:14px;background:#fff;line-height:1.6}
.facts b{display:block;font-size:12.5px;color:#0f5a77;letter-spacing:.06em}
/* FAQ */
.faq{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.faq details{border-bottom:1px solid var(--line);padding:0 28px}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:center;font-weight:800;font-size:16.5px;height:68px}
.faq summary:before{content:"Q";width:28px;height:28px;border-radius:50%;background:var(--btn);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.faq summary:after{content:"+";margin-left:auto;color:var(--acc-d);font-size:22px}
.faq details[open] summary:after{content:"−"}
.faq .a{padding:0 0 20px 42px;color:var(--sub);font-size:15px}
.final{background:var(--btn);color:#fff;padding:64px 0;text-align:center}
.final h2{font-size:34px;font-weight:800;line-height:1.5}
.final p{margin:10px 0 26px;opacity:.95;font-size:15.5px}
.final .btn{background:#fff;color:var(--btn);border-color:#fff;height:56px;padding:0 40px}
.final .booked{justify-content:center;color:#fff;margin-top:18px}
.final .booked b{color:#fff}
.final .booked .ppl svg{background:#fff;border-color:var(--btn)}
footer{background:#1f2933;color:#d5dde6;padding:56px 0 28px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
footer img{height:30px;width:auto;margin-bottom:14px}
footer .fh{color:#fff;font-size:14px;font-weight:700;line-height:1.85;margin-bottom:10px}
footer li{list-style:none;padding:2px 0}
footer .op{margin-top:10px;font-size:13.5px;line-height:1.9}
footer .c{grid-column:1/-1;border-top:1px solid #374151;padding-top:18px;font-size:13.5px;color:#cbd5e1}

/* ---- もと style="…" だった物（HTML に書かない決まりのため、クラスにした） ---- */
.sprite{position:absolute}
.c-acc{color:var(--acc-d)}.c-w{color:#fff}.c-btn{color:var(--btn)}
.pt .pt-sm{font-weight:500;font-size:14px;color:var(--sub)}
.pt .p.free.fs20{font-size:20px}
.pt0{padding-top:0}
.fl-win1{left:16px;right:16px;top:12px;border-radius:8px}
.fl-win2{left:18px;right:18px;top:10px;border-radius:8px}
.fl-mini{padding:8px 10px}
.fl .fl-mini-t{color:#4b5563}
.fl .fl-pick{border:1.5px solid var(--acc);border-radius:6px;padding:3px 7px;font-weight:700;margin-top:3px;color:#2c2c2c;white-space:nowrap}
.fl .fl-other{color:#6b7280;margin-top:3px;white-space:nowrap}
.win .fl-shot{height:108px;width:100%;object-fit:cover;object-position:top}
.calc .bar .bar-now{width:100%;background:#9ca3af}
.calc .bar .bar-after{width:20%;background:var(--acc-d);min-width:72px}
.calc .eq.mt12{margin-top:12px}
.calc .res .fs24{font-size:24px}
.calc .src.mt6{margin-top:6px}
.safe .lab-s{font-size:13.5px;font-weight:800;color:#0f5a77}
.sec-demo{padding:96px 0}
.note.tc{text-align:center}
.cg + .note{margin-top:28px}  /* 「すべての事例を見る」を付けないので、その分の間は詰める */

/* ---- 実際に動かすための追加（モックには無い。見た目は変えない） ---- */
button,input,select,textarea{font-family:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acc-d);outline-offset:2px}
.btn:focus-visible{outline-offset:3px}
.burger{cursor:pointer}
.burger[aria-expanded="true"]{background:var(--alt);border-color:#cfe5ee}
footer a:hover{text-decoration:underline}
.logo{display:block;line-height:0}
.case .th.pic img{width:100%;height:100%}
.final .btn:focus-visible{outline-color:#fff}
/* 窓の幅 1140〜1179px: 左右に20pxの余白（モックの 1180px 以上と同じ見た目） */
@media (max-width:1179px){.wrap{padding:0 20px}}

/* ---- タブレット（モックは作り込んでいない所。段組みを減らして収める） ---- */
@media (max-width:1139px){
 .wrap{padding:0 24px}
 /* 入口の帯: 背景の絵を外し、チェックの札を文の下へ */
 .demo{height:auto}
 .demo .bg{display:none}
 .demo:before{background:#eaf6fa}
 .demo .in{padding:36px 36px 20px;max-width:none}
 .demo .tick{position:relative;right:auto;top:auto;margin:0 36px 32px;display:inline-block}
 /* 事例: 3つ並び（モックの6分割のまま、文字は小さめ） */
 .case .res b{font-size:26px}
}
@media (min-width:641px) and (max-width:1139px){
 /* 試算の結果の数字は、枠から出ないよう小さめに */
 .calc .res b{font-size:28px}
 .calc .res b span{font-size:18px}
 /* 4段の図解: 見出しは2行になってもよい */
 .fourb .st .hd{height:auto;min-height:48px;padding:6px 8px;text-align:center}
}
@media (max-width:899px){
 /* ヒーロー: ボタンは絵の下の帯に置く（絵の空きでは押せる大きさにならない） */
 .hero{background:var(--btn)}
 .hero-cta{position:static;width:auto;flex-direction:row;gap:12px;padding:16px 24px 10px}
 .hero-note{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;padding:0 24px 22px;color:#fff;font-size:14px;line-height:1.6;font-weight:500}
 .hero-cta .btn{height:48px;font-size:15px;flex:1}
 /* ヘッダー: メニューをボタンにまとめる */
 header.site .wrap{gap:12px}
 header.site .btn{margin-left:auto;height:40px;padding:0 16px;font-size:14px}
 header.site nav{display:none}
 .burger{display:flex}
 header.site.is-open nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;margin:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(20,60,80,.12);padding:4px 24px 12px;font-size:16px}
 header.site.is-open nav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500}
 header.site.is-open nav a:last-child{border-bottom:0}
 /* 段組みを1列に（モックのスマホと同じ） */
 .strip{height:auto;padding:18px 0}.strip .wrap{grid-template-columns:1fr;gap:12px}.strip .it{justify-content:flex-start;font-size:15px}
 .cards3,.fl,.brk,.two,.time{grid-template-columns:1fr}
 .fourb .row{grid-template-columns:1fr}.fourb .tri{transform:rotate(90deg);margin:10px auto}
 .fl:before{display:none}
 .pt .rw{grid-template-columns:1fr}.pt .h{display:none}.pt .rw>div{padding:8px 18px}
 .calc .cols{grid-template-columns:minmax(0,1fr);gap:12px}.calc .cost dt{white-space:normal}.calc .kari span{display:inline-block;border-radius:12px;padding:4px 14px;line-height:1.6}.calc .arrow{transform:rotate(90deg)}
 .cg{grid-template-columns:1fr 1fr}.case,.case.w{grid-column:auto}.case.w:last-child{grid-column:1/-1}
 .person{grid-template-columns:1fr;gap:28px}
 .bt{flex-wrap:wrap}
}

/* ヒーローの絵: 幅 481 以上は PC 用（横長）、480 以下はスマホ用（縦長）。縦長を 481 以上に使うと、高さ 800 の最初の画面にボタンが入らない */
@media (max-width:480px){.hero-art img{aspect-ratio:1080/1200}}

/* ---- スマホ（モックの @media のまま。1列にする所は上の 899px 以下で済ませてある） ---- */
@media (max-width:640px){
 :root{--w:100%}
 .hero-cta{flex-direction:column;padding:16px 20px 10px}
 .hero-note{padding:0 20px 24px}
 .hero-cta .btn{flex:none;width:100%}
 body{font-size:15px}
 .wrap{padding:0 20px}
 header.site{height:60px}header.site .logo img{height:24px}
 header.site .wrap{gap:10px}
 header.site .btn{padding:0 14px;font-size:13px}
 header.site.is-open nav{padding:4px 20px 12px}
 section{padding:60px 0}
 h2.t{font-size:26px;margin-bottom:28px}
 .fourb{padding:24px 16px}.fourb h3{font-size:24px}
 .calc{padding:22px 16px}.calc h3{font-size:22px}
 .demo .in{padding:28px 22px}.demo h3{font-size:24px}.demo .tick{margin:0 22px 22px;display:block}.demo .acts{flex-direction:column}
 .cg{grid-template-columns:1fr}
 .case.w:last-child{grid-column:auto}
 .case .res b{font-size:30px}
 .person{gap:24px}.person .ph{width:100%;height:380px}.facts{grid-template-columns:1fr}
 footer .wrap{grid-template-columns:1fr}.final h2{font-size:24px}
}
/* 事例カードは、まるごとリンク（事例ページへ） */
a.case-link{color:inherit;transition:box-shadow .15s}
a.case-link:hover{box-shadow:0 8px 20px rgba(20,60,80,.12)}
a.case-link:hover h3{text-decoration:underline;text-underline-offset:3px}
a.case-link:focus-visible{outline:2px solid var(--acc-d);outline-offset:3px}
/* 幅480以下は縦長の絵で、絵の中の注記が読める大きさ（約13px）になる。同じ文が2回見えないよう、HTML の注記は読み上げだけにする */
@media (max-width:480px){
 .hero-note{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
 .hero-cta{padding-bottom:22px}
}