/* 届いた相談 haiban-plc-koshin の見た目。見本＝endsupp-seo の plan/事例見本_20261101/haiban-plc-koshin.html・作り＝tools/case_pages/port_case.py（2026-11-04） */
.cu-preview{background:#fff4c2;border-bottom:1px solid #b38a00;color:#5c4700;font-size:13.5px;line-height:1.6;padding:8px 40px;text-align:center;margin:0}
.c{--deep:#0a2340;--steel:#0d2a4a;--steel-2:#17406a;--ice:#eaf1f7;--ice-2:#d7e3ee;--ink:#17202c;--mute:#55657a;--copper:#b4693a;--copper-hi:#f0a66a;--cold:rgba(240,245,250,.94);background:var(--ice);color:var(--ink);overflow:hidden}
.c-wrap{max-width:1280px;margin:0 auto;padding-left:40px;padding-right:40px;width:100%}
.c h1,.c h2{font-family:var(--f-display);font-feature-settings:"palt"}
.c-tag span:first-child{background:#f08a1d;color:#fff;font-weight:700;padding:3px 11px;border-radius:999px}
.c-go__btn{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px}
.c-flow{background:#f3f6fb;padding:44px 0 40px;color:var(--ink)}
.c-flow__h{font-family:var(--f-display);font-weight:900;font-size:28px;line-height:1.4;color:var(--ink);margin:2px 0 20px}
.c-flow .c-go__btn{margin-top:24px}
.c-sublink2{font-size:15px;color:var(--ink);text-underline-offset:3px}
.c-sec__n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--f-code);font-weight:500;font-size:17px;line-height:1;margin-right:12px;vertical-align:4px;flex:none}
.c-flow .c-sec__n,.c-others .c-sec__n{vertical-align:3px}
.c-flow .c-flow__h{margin-top:0}
.c-flow__h{font-size:26px}
.c-flow__lead{font-size:15px;line-height:1.7;color:var(--ink);margin:-8px 0 18px;max-width:900px}
.c-flow__lead a{color:var(--blue);text-underline-offset:3px}
.c-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;list-style:none;margin:0;padding:0}
.c-how li{position:relative;background:#fff;border:1px solid #dde3ee;border-radius:10px;padding:22px 18px 20px;text-align:center}
.c-how li+li::before{content:"";position:absolute;left:-22px;top:62px;width:10px;height:10px;border-top:2px solid #8ea3b8;border-right:2px solid #8ea3b8;transform:rotate(45deg)}
.c-how svg{display:block;width:72px;height:72px;margin:0 auto}
.c-how i{display:inline-flex;width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:14px;margin-top:12px}
.c-how b{display:block;font-family:var(--f-display);font-weight:900;font-size:19px;line-height:1.4;margin-top:8px;color:var(--ink)}
.c-how span{display:block;font-size:13.5px;line-height:1.6;color:#4b5a6e;margin-top:6px}
.c-chips{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:18px 0 0;padding:0}
.c-chips li{font-size:13.5px;line-height:1.4;font-weight:700;color:#22397a;background:#fff;border:1px solid #c5d1e0;border-radius:999px;padding:7px 14px}
.c-more{background:#eef3fa;padding:44px 0 40px}
.c-more__h{font-family:var(--f-display);font-weight:900;font-size:26px;line-height:1.4;color:var(--ink);margin:0 0 22px}
.c-more__grid{display:grid;grid-template-columns:1.05fr 1.25fr .9fr;gap:0 28px}
.c-more__col h3{font-size:13.5px;font-weight:700;color:#4b5a6e;letter-spacing:.06em;margin:0 0 10px}
.c-more__card{display:grid;grid-template-columns:56px 1fr;gap:2px 14px;align-items:center;background:#fff;border:1px solid #dde3ee;border-radius:10px;padding:14px 16px;margin-top:10px;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.c-more__card:hover{border-color:#f08a1d;box-shadow:0 2px 10px rgba(23,64,106,.12);color:var(--ink)}
.c-more__card svg{width:56px;height:56px;grid-row:span 2}
.c-more__card b{font-family:var(--f-display);font-weight:900;font-size:18px;line-height:1.4}
.c-more__card span{font-size:13px;line-height:1.55;color:#4b5a6e}
.c-more__card--s{grid-template-columns:44px 1fr}
.c-more__card--s svg{width:44px;height:44px}
.c-more__card--s b{font-size:16px}
.c-more__row{display:grid;grid-template-columns:36px 1fr;gap:0 12px;align-items:center;padding:10px 0;border-top:1px solid #d6dde8;color:var(--ink);text-decoration:none}
.c-more__row:first-of-type{border-top:0;padding-top:4px}
.c-more__row:hover b{color:#b36a0f}
.c-more__row svg{width:36px;height:36px;grid-row:span 2}
.c-more__row b{display:block;font-family:var(--f-display);font-weight:900;font-size:15.5px;line-height:1.45;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c5d1e0}
.c-more__row span{display:block;font-size:12.5px;line-height:1.5;color:#4b5a6e;margin-top:2px}
.c-chips--links{margin-top:12px}
.c-chips--links a{color:#22397a;text-decoration:none}
.c-chips--links li:hover{border-color:#f08a1d}
.c-more__note{font-size:12.5px;line-height:1.6;color:var(--mute);margin-top:14px}
.c-sec__n{flex:none}
.c-small{font-size:12.5px;line-height:1.7;color:var(--mute)}
@media (max-width:899px){
  html,body{overflow-x:hidden}
  .cu-preview{padding:8px 16px}
  .c-wrap{box-sizing:border-box;max-width:100%;padding-left:16px;padding-right:16px}
  .c-sec__n{width:28px;height:28px;font-size:14px;margin-right:8px;vertical-align:3px}
  .c-flow__h{font-size:22px}
  .c-go__btn .btn{width:100%}
  .c-how{grid-template-columns:1fr;gap:14px}
  .c-how li{display:grid;grid-template-columns:56px 1fr;gap:0 14px;align-items:center;text-align:left;padding:16px}
  .c-how svg{width:56px;height:56px;grid-row:span 3}
  .c-how i{margin-top:0}
  .c-how li+li::before{display:none}
  .c-more{padding:36px 0 34px}
  .c-more__h{font-size:22px}
  .c-more__grid{grid-template-columns:1fr;gap:26px}
}
/* この相談だけの見た目。暗い電気室。古い盤は動いていて、開けた1面にだけ明かりが当たる。強調は黄（CTA の橙は使わない＝11/2） */
.m{--gr:#15181b;--gr2:#22262b;--st:#3b4148;--st2:#59616a;--pale:#c9ced3;--amber:#ffd27a;--amber-d:#7a5200;--bg:#eceef0;--ink:#191c20}
.m{background:var(--gr);color:#eef0f2}
.m h1,.m h2,.m h3{font-family:var(--f-display);font-feature-settings:"palt"}
.m-hero{position:relative;height:620px;overflow:hidden;background:linear-gradient(#15181b 0,#15181b 572px,#22262b 572px)}
.m-hero__fig{position:absolute;top:0;right:max(0px,calc((100% - 1280px)/2));width:1280px;height:620px}
.m-hero__fig svg{display:block;width:100%;height:100%}
.m-hero__t{position:relative;padding-top:30px}
.m-hero__t>*{max-width:510px}
.m-hero .c-tag span:first-child{background:#eef0f2;color:var(--gr)}
.c-chips--links li:hover{border-color:var(--gr)}
.m-hero .c-tag{display:flex;gap:16px;align-items:center;color:var(--pale);font-size:15px;font-weight:500}
.m-hero h1{font-weight:900;font-size:38px;line-height:1.3;margin-top:14px;color:#fff}
.m-hero h1 em{font-style:normal;color:var(--amber)}
.m-lead{font-size:18px;font-weight:700;line-height:1.6;margin-top:16px;color:#fff}
.m-go{margin-top:20px}
.m-promise{font-size:14.5px;line-height:1.6;margin-top:12px;color:var(--pale)}
.m-lamp{animation:m-bl 2.4s steps(1) infinite}
@keyframes m-bl{50%{fill:#2c6b45}}
.m-light{animation:m-fl 1.3s .2s linear both}
@keyframes m-fl{0%{opacity:0}12%{opacity:.8}18%{opacity:.1}32%{opacity:.1}38%{opacity:1}44%{opacity:.35}52%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.m-lamp{animation:m-bl 2.4s steps(1) infinite}
@keyframes m-bl{50%{fill:#2c6b45}}
.m-light{animation:none}}

.m-h{font-weight:900;font-size:26px;line-height:1.4;display:flex;align-items:center}
.m .c-sec__n{background:var(--gr);color:#fff}
.m-s1 .c-sec__n{background:#fff;color:var(--gr)}

.m-s1{background:var(--gr2);padding:46px 0 44px}
.m-s1 .m-h{color:#fff}
.m-k{display:block;font-size:15px;font-weight:700;color:var(--pale)}

.m-s2{background:var(--bg);color:var(--ink);padding:48px 0 0}
.m-s2__g{display:grid;grid-template-columns:7fr 5fr;gap:0 28px;margin-top:24px}
.m-have,.m-lack{border-radius:10px;padding:18px 22px 20px}
.m-have{background:#fff;border:1px solid #d4d8dc}
.m-lack{border:3px dashed #8d949b;background:transparent}
.m-s2 h3{font-weight:900;font-size:19px;line-height:1.4}
.m-s2 h3 small{display:block;font-family:var(--f-body);font-size:13px;font-weight:500;color:#5a626b}
.m-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin-top:14px;list-style:none;padding:0}
.m-items li{display:grid;grid-template-columns:56px 1fr;gap:0 12px;align-items:center;font-size:15.5px;font-weight:700;line-height:1.5}
.m-items svg{display:block;width:56px;height:56px}
.m-lack__in{display:grid;grid-template-columns:96px 1fr;gap:0 18px;margin-top:14px;align-items:start}
.m-lack__in svg{display:block;width:96px;height:auto}
.m-lack ul{list-style:none;padding:0;margin:0}
.m-lack li{font-size:15.5px;font-weight:700;line-height:1.55;color:#3f464e;margin-bottom:10px}
.m-band{background:var(--gr);color:#fff;margin-top:40px;padding:34px 0 34px}
.m-why1{font-family:var(--f-display);font-weight:900;font-size:46px;line-height:1.3;color:var(--amber)}
.m-why2{font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.6;margin-top:12px}
.m-so{font-family:var(--f-display);font-weight:900;font-size:30px;line-height:1.45;color:var(--gr);margin-top:30px;background:#fff;border-left:8px solid var(--st2);border-radius:10px;padding:18px 26px}

.m-s3{background:#fff;color:var(--ink);padding:48px 0 44px}
.m-s3__g{display:grid;grid-template-columns:400px 1fr;gap:0 44px;margin-top:24px;align-items:start}
.m-ask{background:var(--gr);color:#fff;border-radius:10px;padding:26px 26px 28px;position:relative}
.m-ask p{font-family:var(--f-display);font-weight:900;font-size:28px;line-height:1.45}
.m-ask i{font-style:normal;color:var(--amber)}
.m-ask small{display:block;font-size:13.5px;font-weight:700;color:var(--pale);margin-bottom:8px}
.m-rail{list-style:none;padding:0;margin:0;position:relative}
.m-rail::before{content:"";position:absolute;left:47px;top:30px;bottom:30px;width:3px;background:#c7ccd2}
.m-rail li{position:relative;display:grid;grid-template-columns:96px 1fr;gap:0 22px;align-items:center;padding:0 0 22px}
.m-rail li:last-child{padding-bottom:0}
.m-pic{width:96px;height:72px;display:flex;align-items:center;justify-content:center;background:#fff;position:relative}
.m-pic svg{display:block;height:60px;width:auto}
.m-pic img{display:block;width:94px;height:auto}
.m-rail p{font-size:16px;line-height:1.75}
.m-rail p b{font-family:var(--f-display);font-weight:900;font-size:22px;line-height:1.4;display:block;color:var(--ink)}
.m-ans2{margin-top:22px;padding-top:18px;border-top:1px solid #3b4148}
.m-ans2 svg{display:block;width:100%;height:auto}
.m-ans2 p{font-size:24px}
.m-s3 .c-small{margin-top:16px}
/* 段3の動き。JS が .pre を付けた時だけ隠し、画面に入ったら .go で動かす。JS が無い・動きを止める設定なら最後の絵のまま */
.m-hands .m-arm{transform-box:view-box}
.m-ans2.pre .m-hf,.m-ans2.pre .m-bub,.m-ans2.pre p{opacity:0}
.m-ans2.pre .m-arm{transform:rotate(150deg)}
.m-ans2.go .m-hf{animation:m-hf-in .35s calc(var(--i)*.16s) ease-out forwards}
.m-ans2.go .m-arm{animation:m-arm-up .5s calc(var(--i)*.16s + .2s) cubic-bezier(.3,1.5,.5,1) forwards}
.m-ans2.go .m-bub{animation:m-hf-in .35s calc(1.4s + var(--k)*.3s) ease-out forwards}
.m-ans2.go p{animation:m-hf-in .45s 2.1s ease-out forwards}
@keyframes m-hf-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes m-arm-up{from{transform:rotate(150deg)}to{transform:none}}

.m-s4{background:var(--bg);color:var(--ink);padding:48px 0 44px}
.m-ch{display:grid;grid-template-columns:1fr 130px 1fr;align-items:stretch;margin-top:24px}
.m-ch__box{border-radius:12px;padding:18px 22px 22px}
.m-ch__box.is-a{background:#f6f7f8;border:2px dashed #9aa2aa}
.m-ch__box.is-b{background:#fff3df;border:2px solid #f2b33d}
.m-ch__k{font-family:var(--f-display);font-weight:900;font-size:17px;line-height:1.3;color:#59616a}
.m-ch__box.is-b .m-ch__k{color:#a8620a}
.m-ch__m{position:relative;background:#fff;border:1.5px solid #c7ccd2;border-radius:12px;padding:12px 16px;font-family:var(--f-display);font-weight:700;font-size:16.5px;line-height:1.6;margin-top:12px}
.m-ch__m::after{content:"";position:absolute;left:28px;bottom:-9px;width:14px;height:14px;background:#fff;border-right:1.5px solid #c7ccd2;border-bottom:1.5px solid #c7ccd2;transform:rotate(45deg)}
.m-ch__box.is-b .m-ch__m,.m-ch__box.is-b .m-ch__m::after{border-color:#f2b33d}
.m-ch__p{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.m-ch__p li{text-align:center}
.m-ch__p svg{display:block;width:64px;height:64px;margin:0 auto}
.m-ch__p b{display:block;font-family:var(--f-display);font-weight:900;font-size:15.5px;line-height:1.45;margin-top:10px}
.m-ch__p span{display:block;font-size:12.5px;line-height:1.5;color:#59616a;margin-top:4px}
.m-ch__mid{position:relative;display:flex;align-items:center;justify-content:center}
.m-ch__mid::before{content:"";position:absolute;left:10px;right:10px;top:50%;height:3px;background:#3b4148}
.m-ch__mid::after{content:"";position:absolute;right:10px;top:50%;width:12px;height:12px;margin-top:-6px;border-top:3px solid #3b4148;border-right:3px solid #3b4148;transform:translateX(1px) rotate(45deg)}
.m-ch__mid span{position:relative;transform:translateY(-24px);font-family:var(--f-display);font-weight:900;font-size:14px;line-height:1.4;color:#3b4148;text-align:center}
.m-note{font-size:13px;line-height:1.7;color:#59616a;margin-top:16px}

@media (max-width:1240px) and (min-width:900px){
  .m-hero{background:linear-gradient(#15181b 0,#15181b 580px,#22262b 580px)}
  .m-hero__fig{top:110px;width:1050px;height:510px}
  .m-hero__t>*{max-width:390px}
  .m-hero h1{font-size:31px}
}
@media (max-width:899px){
  .m-hero{height:auto;display:flex;flex-direction:column;background:#15181b}
  .m-hero__t{order:1;padding-top:18px}
  .m-hero__t>*{max-width:100%}
  .m-hero h1{font-size:28px;margin-top:10px}
  .m-lead{font-size:16px;margin-top:10px}
  .m-go .btn{width:100%}
  .m-promise{font-size:13.5px}
  .m-hero__fig{position:relative;top:auto;right:auto;order:2;width:100%;height:320px;margin-top:12px}
  .m-h{font-size:22px;align-items:flex-start}
  .m-s1,.m-s3,.m-s4{padding:34px 0}
  .m-s2__g,.m-s3__g{grid-template-columns:1fr;gap:18px}
  .m-s2{padding-top:34px}
  .m-items{grid-template-columns:1fr}
  .m-why1{font-size:32px}
  .m-why2{font-size:18px}
  .m-so{font-size:21px;padding:14px 16px;border-left-width:6px}
  .m-ask p{font-size:24px}
  .m-ans2 p{font-size:20px}
  .m-rail::before{left:35px}
  .m-rail li{grid-template-columns:72px 1fr;gap:0 12px}
  .m-pic{width:72px;height:64px}
  .m-pic svg{height:48px}
  .m-pic img{width:70px}
  .m-rail p{font-size:15px}
  .m-rail p b{font-size:19px}
  .m-ch{grid-template-columns:1fr;margin-top:16px}
  .m-ch__box{padding:14px 14px 18px}
  .m-ch__m{font-size:15px}
  .m-ch__mid{height:84px}
  .m-ch__mid span{transform:none;background:var(--bg);padding:4px 10px}
  .m-ch__mid::before{left:50%;right:auto;top:10px;bottom:10px;width:3px;height:auto;margin-left:-1px}
  .m-ch__mid::after{left:50%;right:auto;top:auto;bottom:10px;margin:0 0 0 -6px;transform:rotate(135deg)}
  .m-ch__p{grid-template-columns:1fr;gap:12px}
  .m-ch__p li{display:grid;grid-template-columns:52px 1fr;gap:0 12px;align-items:center;text-align:left}
  .m-ch__p svg{width:52px;height:52px;grid-row:span 2}
  .m-ch__p b{margin-top:0;font-size:15px}
}
.m-ans{background:var(--bg);color:var(--ink);border-bottom:1px solid #d4d8dc;padding:26px 0}
.m-ans__in{display:flex;align-items:center;justify-content:center;gap:16px 34px;flex-wrap:wrap}
.m-ans__k{font-family:var(--f-display);font-weight:900;font-size:20px;color:var(--gr);margin:0;padding-right:30px;border-right:2px solid #c7ccd2}
.m-ans__n span{display:block;font-size:15px;font-weight:700;color:#59616a}
.m-ans__n b{display:block;font-family:var(--f-display);font-weight:900;font-size:60px;line-height:1.05;color:var(--gr)}
.m-ans__n b small{font-size:24px;margin-left:4px}
.m-ans__n.on b{background:linear-gradient(transparent 68%,#ffd27a 68%)}
.m-ans__ar{font-size:40px;color:#9aa2aa}
.m-ans__go{font-size:15px;font-weight:700;color:var(--gr);text-underline-offset:3px}
.m-s1__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;align-items:center;margin-top:24px}
.m-s1__main svg{display:block;width:100%;height:auto;background:var(--gr);border-radius:6px}
.m-s1__main b{display:block;font-family:var(--f-display);font-weight:900;font-size:38px;line-height:1.3;margin-top:4px;color:#fff}
.m-s1__main p{font-size:20px;font-weight:700;line-height:1.75;margin-top:14px;color:#dfe2e5}
.m-req{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 34px;align-items:center;margin-top:30px;background:var(--gr);border-radius:12px;padding:24px 34px}
.m-req svg{display:block;width:100%;height:auto}
.m-req .m-k{color:var(--amber)}
.m-req b{display:block;font-family:var(--f-display);font-weight:900;font-size:32px;line-height:1.4;margin-top:4px;color:#fff}
.m-req p{font-size:18px;font-weight:700;margin-top:8px;color:var(--pale)}
.m-end{margin-top:28px;background:var(--bg);color:var(--gr);border-left:8px solid #ffd27a;border-radius:10px;padding:18px 26px;font-family:var(--f-display);font-weight:900;font-size:28px;line-height:1.45}
.m-end span{display:block;font-size:20px;color:#59616a}
@media (max-width:899px){
  .m-ans{padding:18px 0}
  .m-ans__in{gap:6px 14px}
  .m-ans__k{flex-basis:100%;text-align:center;border:0;padding:0;font-size:17px}
  .m-ans__n span{font-size:12.5px}
  .m-ans__n b{font-size:40px}
  .m-ans__n b small{font-size:17px}
  .m-ans__ar{font-size:26px}
  .m-ans__go{flex-basis:100%;text-align:center}
  .m-s1__main{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:16px}
  .m-s1__main b{font-size:25px}
  .m-s1__main p{font-size:16px;margin-top:8px}
  .m-req{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px;margin-top:20px}
  .m-req svg{max-width:200px}
  .m-req b{font-size:20px}
  .m-req b br{display:none}
  .m-req p{font-size:15px}
  .m-end{font-size:20px;padding:14px 16px;border-left-width:6px}
  .m-end span{font-size:16px}
}
.m-h small{display:block;font-family:var(--f-body);font-size:16px;font-weight:700;line-height:1.5;margin-top:2px;opacity:.72}
@media (max-width:899px){.m-h small{font-size:13.5px}}
/* 段5の試し：不安を取り除いて相談へ。絵を先に、文は太字1行と小さい1行 */
.f2{--blue:#14478a;--pale:#eaf1f9;--sky:#cfe0f2;--ink:#14233a;--mute:#51627a;--or-d:#2f5d92;color:var(--ink)}
.f2 h2,.f2 h3{font-family:var(--f-display);font-feature-settings:"palt"}
.f2-q{display:flex;align-items:center;gap:12px;font-weight:900;font-size:28px;line-height:1.35;color:var(--ink);margin:0}
.f2-q::before{content:"Q";flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#5f86b3;color:#fff;font-size:21px}
.f2-sec{padding:44px 0 46px}
.f2-what{background:#f3f6fb}
.f2-what__top{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0 30px;align-items:center;margin:0 0 26px}
.f2-what__logo{background:#fff;border:1px solid #dde3ee;border-radius:10px;padding:18px 22px}
.f2-what__logo img{display:block;width:100%;height:auto}
.f2-what__top b{display:block;font-family:var(--f-display);font-weight:900;font-size:27px;line-height:1.4}
.f2-what__top p{font-size:15px;line-height:1.7;margin:6px 0 0}
.f2-what__top a{color:var(--blue);text-underline-offset:3px}

.f2-mk{background:#fff}
.f2-mk__g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);gap:18px;margin-top:20px}
.f2-box{background:#f3f6fb;border-radius:10px;padding:18px 22px 20px;display:flex;flex-direction:column}
.f2-box small{display:block;font-size:14px;font-weight:700;color:var(--mute)}
.f2-box p.f2-num{font-family:var(--f-display);font-weight:900;font-size:26px;line-height:1.1;margin-top:auto;padding-top:14px}
.f2-num em{font-style:normal;font-size:76px;color:var(--blue);margin:0 4px}
.f2-box p{font-size:14px;line-height:1.6;margin:8px 0 0}
.f2-seg{display:flex;gap:2px;height:60px;margin-top:auto}
.f2-seg i{display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:18px;width:calc(var(--v)*1%)}
.f2-seg i:first-child{border-radius:4px 0 0 4px}
.f2-seg i:last-child{border-radius:0 4px 4px 0}
.f2-seg__l{display:flex;gap:2px;margin-top:6px;font-size:13.5px;font-weight:700;line-height:1.35}
.f2-seg__l span{width:calc(var(--v)*1%);text-align:center}
.f2-size{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.f2-size svg{display:block;width:100%;height:auto}
.f2-mk__t{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin:20px 0 0;padding:0;list-style:none}
.f2-mk__t li{font-family:var(--f-display);font-weight:700;font-size:16.5px;color:#fff;background:var(--blue);border-radius:4px;padding:6px 16px}
.f2-mk__t li.x{background:none;color:var(--ink);padding:0;font-size:18px}
.f2-mk__e{font-family:var(--f-display);font-weight:900;font-size:19px;text-align:center;margin:12px 0 0}

.f2-ex{background:#f3f6fb}
.f2-ex__lead{font-size:16px;line-height:1.7;margin:10px 0 0 52px}
.f2-ex__lead a{color:var(--blue);text-underline-offset:3px}
.f2-ex__more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px}
.f2-ex__more p{font-family:var(--f-display);font-weight:900;font-size:17px;margin:0}
.f2-ex__more .c-chips{margin:0}
.f2-rows{list-style:none;margin:20px 0 0;padding:0;background:#fff;border:1px solid #cfd8e4;border-radius:10px}
.f2-rows>li{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;gap:0 30px;padding:20px 26px}
.f2-rows>li+li{border-top:1px solid #dfe5ee}
.f2-r__who small{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.f2-r__body b em{font-style:normal;color:#e86a00}
.f2-r__body b{display:block;font-family:var(--f-display);font-weight:900;font-size:20px;line-height:1.45}
.f2-r__body p{font-size:15px;line-height:1.75;margin:6px 0 0}
.f2-r__st small{display:block;font-size:12.5px;font-weight:700;color:var(--mute)}
.f2-r__st span{display:block;font-size:15px;font-weight:700;line-height:1.5;margin-top:2px}
.f2-r__st a{display:block;font-size:13px;font-weight:700;line-height:1.5;color:var(--or-d);margin-top:8px;text-underline-offset:3px}
.f2-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.f2-tags li{font-size:12.5px;font-weight:700;line-height:1.3;color:var(--blue);border:1px solid #9db4cf;border-radius:4px;padding:3px 7px}

.f2-free{background:#fff}
.f2-sum{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px;margin:22px 0 0;background:#eaf1f9;border-radius:10px;padding:20px 24px}
.f2-sum figure{margin:0;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #c5d6ea;border-radius:8px;padding:12px 22px;font-family:var(--f-display);font-size:19px;font-weight:900}
.f2-sum figure svg{display:block;width:44px;height:44px;flex:none}
.f2-sum figure b{font-weight:900;color:var(--or-d);margin-left:8px}
.f2-sum span{font-size:32px;font-weight:700;color:#7b8796}
.f2-sum strong{font-family:var(--f-display);font-weight:900;font-size:60px;line-height:1;color:var(--or-d)}
.f2-sum strong small{font-size:26px}
.f2-why{font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1.6;text-align:center;margin:14px 0 0}
.f2-fears{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px;list-style:none;margin:28px 0 0;padding:0}
.f2-fears li{display:grid;grid-template-columns:60px minmax(0,1fr);gap:0 16px;align-items:start}
.f2-fears svg{display:block;width:60px;height:60px}
.f2-fears b{display:block;font-family:var(--f-display);font-weight:900;font-size:19px;line-height:1.45}
.f2-fears p{font-size:14.5px;line-height:1.7;margin:3px 0 0}

.f2-go{background:var(--blue);color:#fff;padding:44px 0 46px}
.f2-go__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:0 48px;align-items:center}
.f2-go h2{font-weight:900;font-size:29px;line-height:1.45;margin:0;color:#fff}
.f2-go .c-go__btn{margin-top:20px}
.f2-go p.f2-pr{font-size:14.5px;line-height:1.6;color:var(--sky);margin:12px 0 0}
/* まず話を聞きたい人の入口：電話とメール。メールは聞きたい事を選ぶと、お問い合わせの窓が開く */
.f2-talk{background:#fff;color:var(--ink);border-radius:12px;padding:22px 26px 20px;box-shadow:0 6px 24px rgba(5,20,45,.25)}
.f2-talk h3{font-weight:900;font-size:22px;line-height:1.4;margin:0}
.f2-talk__tel{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:10px 0 14px;border-bottom:1px solid #dfe5ee;color:var(--ink);text-decoration:none}
.f2-talk__tel svg{flex:none;width:44px;height:44px}
.f2-talk__tel small{display:block;font-size:13px;font-weight:700;color:var(--mute)}
.f2-talk__tel b{display:block;font-family:var(--f-display);font-weight:900;font-size:36px;line-height:1.1;letter-spacing:.02em;color:var(--blue)}
.f2-talk__mail{display:flex;align-items:center;gap:12px;margin-top:14px}
.f2-talk__mail svg{flex:none;width:44px;height:44px}
.f2-talk__mail b{display:block;font-family:var(--f-display);font-weight:900;font-size:19px;line-height:1.4}
.f2-talk__mail small{display:block;font-size:13px;font-weight:700;color:var(--mute)}
.f2-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;margin:12px 0 0;padding:0}
.f2-pick button{display:block;width:100%;height:100%;text-align:left;font:inherit;font-size:14.5px;font-weight:700;line-height:1.45;color:var(--blue);background:#f3f6fb;border:1.5px solid #9db4cf;border-radius:8px;padding:10px 12px;cursor:pointer}
.f2-pick button:hover,.f2-pick button:focus-visible{border-color:#5f86b3;background:#eaf1f9}
.f2-talk__s{font-size:13px;line-height:1.6;color:var(--mute);margin:10px 0 0}
.f2-talk__s a{color:var(--blue);text-underline-offset:3px}
.ask-d textarea{width:100%;min-height:130px;font:inherit;font-size:15px;line-height:1.6;border:1px solid #c5d1e0;border-radius:6px;padding:8px 10px;box-sizing:border-box}
.ask-d input{width:100%;font:inherit;font-size:15px;border:1px solid #c5d1e0;border-radius:6px;padding:8px 10px;box-sizing:border-box}
.f2-note{font-size:12.5px;line-height:1.6;color:var(--mute);text-align:right;margin:8px 0 0}

@media (max-width:899px){
  .f2-sec,.f2-go{padding:34px 0}
  .f2-q{font-size:22px;gap:10px;align-items:flex-start}
  .f2-q::before{width:32px;height:32px;font-size:17px}
  .f2-what__top{grid-template-columns:minmax(0,1fr);gap:14px 0}
  .f2-what__logo{max-width:200px;padding:12px 16px}
  .f2-what__top b{font-size:21px}
        .f2-mk__g{grid-template-columns:minmax(0,1fr);gap:10px}
  .f2-num em{font-size:60px}
  .f2-box .f2-seg{margin-top:12px}
  .f2-seg{height:48px}
  .f2-seg i{font-size:14.5px}
  .f2-seg__l{font-size:12.5px}
  .f2-mk__t li{font-size:14px;padding:5px 10px}
  .f2-mk__t li.x{font-size:15px}
  .f2-mk__e{font-size:16.5px}
  .f2-sum{padding:14px 12px;gap:6px 10px;flex-direction:column}
  .f2-sum figure{font-size:16px;padding:8px 14px;gap:8px;width:100%;box-sizing:border-box;justify-content:center}
  .f2-sum figure svg{width:32px;height:32px}
  .f2-sum span{font-size:22px;line-height:1}
  .f2-sum strong{font-size:40px}
  .f2-sum strong small{font-size:18px}
  .f2-why{font-size:15.5px}
  .f2-fears{grid-template-columns:minmax(0,1fr);gap:16px}
  .f2-fears li{grid-template-columns:48px minmax(0,1fr);gap:0 12px}
  .f2-fears svg{width:48px;height:48px}
  .f2-fears b{font-size:17px}
  .f2-go h2{font-size:22px}
  .f2-go .c-go__btn{flex-direction:column}
  .f2-ex__lead{margin-left:0;font-size:15px}
  .f2-rows>li{grid-template-columns:minmax(0,1fr);gap:8px 0;padding:16px}
  .f2-r__body b{font-size:17px}
  .f2-r__body p{font-size:14px}
  .f2-go__in{grid-template-columns:minmax(0,1fr);gap:26px 0}
  .f2-talk{padding:18px 16px 16px}
  .f2-talk h3{font-size:19px}
  .f2-talk__tel b{font-size:30px}
  .f2-talk__tel svg,.f2-talk__mail svg{width:38px;height:38px}
  .f2-pick{grid-template-columns:minmax(0,1fr)}
}
/* 出すと何が届くか：トップの「サービスの流れ」6段と同じ。絵は模式図。件ごとの2行は元の <!--HERE5:…--> <!--HERE6:…--> から入る */
.n3-get{background:#fff;padding:50px 0 52px}
.n3-get h2{font-weight:900;font-size:30px;line-height:1.4;color:var(--ink)}
.n3-get .n3-lead{font-size:16px;line-height:1.7;margin-top:6px}
.n3-get .n3-lead a{color:var(--blue);text-underline-offset:3px}
.n3-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 30px;list-style:none;margin:26px 0 0;padding:0}
.n3-steps>li{display:flex;flex-direction:column}
.n3-t{display:flex;align-items:flex-start;gap:10px;font-family:var(--f-display);font-weight:900;font-size:18px;line-height:1.45}
.n3-t i{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:16px;margin-top:-2px}
.n3-who{display:inline-block;font-size:12px;font-weight:700;line-height:1.3;color:var(--mute);border:1px solid #c5cfdb;border-radius:3px;padding:2px 7px;margin:4px 0 0 40px;align-self:flex-start}
.n3-who.u{color:#fff;background:var(--blue);border-color:var(--blue)}
.n3-scr{display:block;position:relative;height:260px;filter:grayscale(1);margin-top:10px;border:1px solid #c5cfdb;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(20,35,58,.10)}
.n3-scr:hover{border-color:var(--blue)}
.n3-scr span{display:block;overflow:hidden;position:relative}
.n3-scr span+span{border-top:1px solid #dbe2ea}
.n3-scr img{display:block;position:absolute;left:var(--x,0);top:var(--y,0);width:var(--w);height:auto;max-width:none}
.n3-ill{height:auto;aspect-ratio:600/260;filter:none;background:#f3f6fb}
.n3-ill svg{display:block;width:100%;height:100%}
.n3-cap{font-size:14px;font-weight:700;line-height:1.6;margin-top:10px}
.n3-cap span{display:block;font-weight:400;font-size:13px;color:var(--mute);margin-top:2px}
.n3-here{display:block;margin-top:8px;background:var(--pale);border-left:4px solid var(--blue);padding:8px 12px;font-size:15px;font-weight:700;line-height:1.5;color:var(--blue)}
.n3-note{font-size:12.5px;color:var(--mute);margin-top:22px}
@media (max-width:899px){
  .n3-get{padding:34px 0}
  .n3-get h2{font-size:23px}
  .n3-steps{grid-template-columns:minmax(0,1fr);gap:26px}
  .n3-t{font-size:17px}
}
.c-bc{background:#fff;border-bottom:1px solid #e3e6ea}
.c-bc ol{display:flex;flex-wrap:wrap;gap:2px 0;list-style:none;margin:0 auto;padding:8px 24px;max-width:1280px;box-sizing:border-box;font-size:13px;line-height:1.5;color:#5b6068}
.c-bc li+li::before{content:"›";margin:0 8px;color:#9aa1a8}
.c-bc a{color:#14478a;text-decoration:none}
.c-bc a:hover{text-decoration:underline}
@media (max-width:899px){.c-bc ol{padding:6px 16px;font-size:12px}}
.m2{background:#eef3fa;padding:44px 0 42px}
.m2 h2{font-family:var(--f-display);font-weight:900;font-size:26px;line-height:1.4;color:var(--ink);margin:0;display:flex;align-items:center}
.m2-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 20px;list-style:none;margin:22px 0 0;padding:0}
.m2-g a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #dde3ee;border-radius:10px;overflow:hidden;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.m2-g a:hover{border-color:#14478a;box-shadow:0 6px 18px rgba(23,64,106,.16);transform:translateY(-2px)}
.m2-pic{display:block;aspect-ratio:1200/630;background:#14478a;overflow:hidden}
.m2-pic img,.m2-pic svg{display:block;width:100%;height:100%;object-fit:cover;object-position:left center}
.m2-t{display:flex;flex-direction:column;gap:5px;padding:12px 14px 16px}
.m2-t small{align-self:flex-start;font-size:12px;font-weight:700;line-height:1.3;color:#fff;background:#14478a;border-radius:3px;padding:3px 8px}
.m2-t small.c{background:#3d6fa8}
.m2-t small.r{background:#51627a}
.m2-t b{font-family:var(--f-display);font-weight:900;font-size:16.5px;line-height:1.45}
.m2-t span{font-size:13px;line-height:1.55;color:#4b5a6e}
.m2-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:24px}
.m2-foot b{font-size:14px;font-weight:700}
.m2-foot .c-chips{margin:0}
.m2-foot p{font-size:12.5px;color:var(--mute);margin:0}
.m2-sw{display:none}
@media (max-width:899px){
  .m2{padding:34px 0 30px}
  .m2 h2{font-size:22px}
  .m2-g{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px}
  .m2-g li{scroll-snap-align:start}
  .m2-sw{display:block;font-size:12.5px;color:var(--mute);margin:6px 0 0}
}