/* 届いた相談 kesho-ita-hanten の見た目。見本＝endsupp-seo の plan/事例見本_20261101/kesho-ita-hanten.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}
}
/* この相談だけの見た目。木の色の板と、鉄の色の治具。明るい生成りの地に、重さを見せる */
.h{--ink:#1e2a33;--mute:#56616c;--slate:#2f3d4a;--steel:#4a6a85;--wood:#c08a5a;--wood-d:#8a5a32;--cream:#f4eee5;--pale:#f8f5ef;--line:#e2d8c8}
.h{background:#fff;color:var(--ink)}
.h h1,.h h2,.h h3{font-family:var(--f-display);font-feature-settings:"palt"}
.c-chips--links li:hover{border-color:var(--steel)}
.h-hero{background:var(--cream);overflow:hidden}
.h-hero__in{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:0 40px;align-items:center;height:620px;max-width:1280px;margin:0 auto;padding:0 24px}
.h-hero .c-tag{display:flex;gap:16px;align-items:center;font-size:15px;font-weight:500;color:var(--mute)}
.h-hero .c-tag span:first-child{background:var(--slate);color:#fff}
.h-hero h1{font-weight:900;font-size:44px;line-height:1.28;margin-top:14px}
.h-hero h1 em{font-style:normal;color:var(--wood-d)}
.h-lead{font-size:18px;font-weight:700;line-height:1.6;margin-top:16px}
.h-go{margin-top:20px}
.h-promise{font-size:14.5px;line-height:1.6;margin-top:12px;color:var(--mute)}
.h-hero__fig svg{display:block;width:100%;height:auto;max-height:600px}
/* 図の場面＝今の作業1.5秒→頼みたい形4秒→将来の案4秒（1周9.5秒・南條さん 11/4）。図にマウスが載っている間は止まる */
.h-sc{animation:h-sc1 9.5s infinite}
.h-sc.h-sc2{animation-name:h-sc2}
.h-sc.h-sc3{animation-name:h-sc3}
@keyframes h-sc1{0%,14%{opacity:1}16.5%,97%{opacity:0}100%{opacity:1}}
@keyframes h-sc2{0%,13.5%{opacity:0}16%,56%{opacity:1}58.5%,100%{opacity:0}}
@keyframes h-sc3{0%,55.5%{opacity:0}58%,97%{opacity:1}100%{opacity:0}}
/* 札の下の進みの線＝今の場面の時間を左から伸ばす */
.h-pg{transform-box:fill-box;transform-origin:left center;animation:h-pg1 9.5s linear infinite}
.h-pg.h-sc2{animation-name:h-pg2}
.h-pg.h-sc3{animation-name:h-pg3}
@keyframes h-pg1{0%{transform:scaleX(0)}15.7%{transform:scaleX(1)}15.9%,100%{transform:scaleX(0)}}
@keyframes h-pg2{0%,15.8%{transform:scaleX(0)}57.8%{transform:scaleX(1)}58%,100%{transform:scaleX(0)}}
@keyframes h-pg3{0%,57.9%{transform:scaleX(0)}99.8%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.h-flip{transform-box:view-box;animation:h-flip2 9.5s infinite}
.h-sc3 .h-flip{animation-name:h-flip3}
/* 板は、見えている4秒の中で裏返す */
@keyframes h-flip2{0%,22%{transform:none}50%,100%{transform:rotate(180deg)}}
@keyframes h-flip3{0%,62%{transform:none}90%,100%{transform:rotate(180deg)}}
.h-hero__fig svg:hover .h-pg,.h-hero__fig svg:hover .h-sc,.h-hero__fig svg:hover .h-flip{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.h-pg{animation:none;transform:scaleX(0)}.h-sc,.h-flip{animation:none}.h-sc2,.h-sc3{opacity:0}}

.h-h{font-weight:900;font-size:26px;line-height:1.4;display:flex;align-items:center;color:var(--ink)}
.h-h small{display:block;font-family:var(--f-body);font-size:16px;font-weight:700;line-height:1.5;margin-top:2px;opacity:.72}
.h .c-sec__n{background:var(--slate);color:#fff}

.h-ans{background:var(--pale);border-bottom:1px solid var(--line);padding:26px 0}
.h-ans__in{display:flex;align-items:center;justify-content:center;gap:16px 34px;flex-wrap:wrap}
.h-ans__k{font-family:var(--f-display);font-weight:900;font-size:20px;color:var(--slate);margin:0;padding-right:30px;border-right:2px solid var(--line)}
.h-ans__n span{display:block;font-size:15px;font-weight:700;color:var(--mute)}
.h-ans__n b{display:block;font-family:var(--f-display);font-weight:900;font-size:60px;line-height:1.05;color:var(--slate)}
.h-ans__n.on b{background:linear-gradient(transparent 68%,#ffd27a 68%)}
.h-ans__ar{font-size:40px;color:#8d99a8}
.h-ans__go{font-size:15px;font-weight:700;color:var(--steel);text-underline-offset:3px}

.h-s1{padding:46px 0 44px}
.h-s1__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;align-items:center;margin-top:24px}
.h-s1__main svg{display:block;width:100%;height:auto;background:var(--pale);border-radius:12px}
.h-k{font-size:14px;font-weight:700;color:var(--mute);display:block}
.h-s1__t b{display:block;font-family:var(--f-display);font-weight:900;font-size:36px;line-height:1.3;margin-top:4px}
.h-s1__t p{font-size:18px;font-weight:700;line-height:1.75;margin-top:12px}
.h-chip{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.h-chip li{background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:15px;font-weight:700}
.h-req{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 34px;align-items:center;margin-top:30px;background:#eef2f6;border-radius:12px;padding:26px 34px}
.h-req svg{display:block;width:100%;height:auto}
.h-req .h-k{font-size:16px;color:var(--steel)}
.h-req b{display:block;font-family:var(--f-display);font-weight:900;font-size:32px;line-height:1.4;margin-top:4px}
.h-req p{font-size:17px;font-weight:700;margin-top:8px;color:var(--mute)}

.h-s2{background:var(--pale);padding:46px 0 46px}
.h-s2__g{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
.h-box{background:#fff;border:2px solid var(--slate);border-radius:12px;padding:18px 22px 20px}
.h-box.is-open{border:3px dashed #a9b3bd;background:transparent}
.h-box h3{font-size:16px;font-weight:700;color:var(--mute);font-family:var(--f-body)}
.h-box ul{list-style:none;margin:10px 0 0;padding:0}
.h-box li{position:relative;padding-left:34px;font-family:var(--f-display);font-weight:900;font-size:21px;line-height:1.45;margin-top:10px}
.h-box li::before{content:"";position:absolute;left:2px;top:6px;width:18px;height:10px;border-left:4px solid var(--steel);border-bottom:4px solid var(--steel);transform:rotate(-45deg)}
.h-box.is-open li::before{content:"?";border:0;transform:none;top:-2px;left:4px;width:auto;height:auto;font-size:24px;color:var(--wood-d)}
.h-why{margin-top:34px;font-family:var(--f-display);font-weight:900;line-height:1.5;border-left:6px solid var(--wood);padding-left:22px}
.h-why span{display:block;font-size:24px;color:var(--mute)}
.h-why b{display:block;font-size:34px;color:var(--ink)}
.h-why i{display:block;font-style:normal;font-size:26px;color:var(--wood-d);margin-top:4px}
.h-so{font-family:var(--f-display);font-weight:900;font-size:30px;line-height:1.45;color:var(--slate);margin-top:34px;background:#fff;border-left:8px solid var(--slate);border-radius:10px;padding:18px 26px}

.h-s3{background:var(--slate);color:#fff;padding:50px 0 46px}
.h-s3 .h-h{color:#fff}
.h-s3 .c-sec__n{background:#fff;color:var(--slate)}
.h-s3__big{font-family:var(--f-display);font-weight:900;font-size:46px;line-height:1.3;margin-top:20px}
.h-s3__big em{font-style:normal;color:#ffd27a}
.h-crowd{display:grid;grid-template-columns:170px 44px 180px 44px minmax(0,1fr);align-items:center;margin-top:26px}
.h-one{text-align:center;font-size:15px;font-weight:700;line-height:1.4}
.h-one svg{display:block;height:110px;width:auto;margin:0 auto 6px}
.h-ar{font-size:24px;text-align:center;color:#c9d3dc}
.h-logo{background:#fff;border-radius:8px;padding:12px;text-align:center}
.h-logo img{display:block;width:100%;height:auto}
/* 段3の動き（ねじ締め機と同じ作り）。JS が .pre を付けた時だけ隠し、画面に入ったら .go で動かす */
.h-hands{display:block;width:100%;height:auto}
.h-hands .h-arm{transform-box:view-box}
.h-hands.pre .h-hf{opacity:0}
.h-hands.pre .h-arm{transform:rotate(150deg)}
.h-hands.pre .h-bub{opacity:0}
.h-hands.pre .h-hf.on,.h-hands.pre .h-hf.on path{fill:#9db9dc}
.h-hands.pre .h-hf.on .h-arm path{stroke:#9db9dc}
.h-hands.go .h-hf{animation:h-hf-in .3s calc(var(--i)*.09s) ease-out forwards}
.h-hands.go .h-arm{animation:h-arm-up .45s calc(var(--i)*.09s + .15s) cubic-bezier(.3,1.5,.5,1) forwards}
.h-hands.go .h-bub{animation:h-hf-in .35s calc(1.5s + var(--k)*.25s) ease-out forwards}
.h-hands.go .h-hf.on .h-arm path{animation:h-pick-s .5s 2.2s forwards}
.h-hands.go .h-hf.on,.h-hands.go .h-hf.on path{animation:h-hf-in .3s calc(var(--i)*.09s) ease-out forwards,h-pick-f .5s 2.2s forwards}
@keyframes h-hf-in{from{opacity:0}to{opacity:1}}
@keyframes h-arm-up{from{transform:rotate(150deg)}to{transform:none}}
@keyframes h-pick-f{from{fill:#9db9dc}to{fill:#ffd27a}}
@keyframes h-pick-s{from{stroke:#9db9dc}to{stroke:#ffd27a}}
.h-hands+p{font-size:16px;font-weight:700;margin-top:6px}
.h-hands+p b{color:#ffd27a}
.h-steps{margin:28px 0 0;padding:0;list-style:none}
.h-steps li{font-size:18px;font-weight:500;line-height:1.7;margin-top:8px}
.h-end{margin-top:28px;background:#fff;color:var(--slate);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}
.h-end span{display:block;font-size:20px;color:var(--mute)}
.h-s3 .c-small{color:#c9d3dc;margin-top:18px}

.h-s4{padding:46px 0 42px}
.h-ch{display:grid;grid-template-columns:1fr 120px 1fr;margin-top:22px;align-items:stretch}
.h-ch__box{border-radius:14px;padding:20px 22px 22px}
.h-ch__box.is-a{border:3px dashed #a9b3bd}
.h-ch__box.is-b{border:3px solid #f2b33d;background:#fff6e6}
.h-ch__k{font-size:15px;font-weight:700;color:var(--mute)}
.h-ch__m{position:relative;background:#fff;border:2px solid #b6c3d3;border-radius:12px;padding:12px 16px;font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1.55;margin-top:10px}
.is-b .h-ch__m{border-color:#f2b33d}
.h-ch__p{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;margin:16px 0 0;padding:0;text-align:center}
.h-ch__p svg{display:block;width:64px;height:64px;margin:0 auto 6px}
.h-ch__p b{display:block;font-size:15px;line-height:1.45}
.h-ch__mid{align-self:center;text-align:center;font-family:var(--f-display);font-weight:900;font-size:14px;line-height:1.4;color:var(--slate);padding:0 8px}
.h-ch__mid::after{content:"→";display:block;font-size:36px;line-height:1.1;color:#f2b33d}
.h-after{font-size:15px;line-height:1.6;margin-top:14px;font-weight:700}
.h-note{font-size:13px;line-height:1.7;color:var(--mute);margin-top:18px}

@media (max-width:1180px) and (min-width:900px){.h-hero__in{grid-template-columns:minmax(0,1fr) 460px}.h-hero h1{font-size:36px}}
@media (max-width:899px){
  .h-hero__in{grid-template-columns:1fr;height:auto;padding:0 16px 8px;gap:0}
  .h-hero__t{padding-top:18px}
  .h-hero__fig{margin-top:10px}
  .h-hero h1{font-size:30px;margin-top:10px}
  .h-lead{font-size:16px;margin-top:10px}
  .h-go .btn{width:100%}
  .h-promise{font-size:13.5px}
  .h-ans{padding:18px 0}
  .h-ans__in{gap:6px 14px}
  .h-ans__k{flex-basis:100%;text-align:center;border:0;padding:0;font-size:17px}
  .h-ans__n span{font-size:12.5px}
  .h-ans__n b{font-size:40px}
  .h-ans__ar{font-size:26px}
  .h-ans__go{flex-basis:100%;text-align:center}
  .h-h{font-size:22px;align-items:flex-start}
  .h-h small{font-size:13.5px}
  .h-s1,.h-s2,.h-s4{padding:34px 0}
  .h-s1__main{grid-template-columns:1fr;gap:16px;margin-top:16px}
  .h-s1__t{order:-1}
  .h-s1__t b{font-size:25px}
  .h-s1__t p{font-size:16px;margin-top:8px}
  .h-chip li{font-size:13.5px}
  .h-req{grid-template-columns:90px minmax(0,1fr);gap:0 14px;padding:16px;margin-top:20px}
  .h-req b{font-size:21px}
  .h-req b br{display:none}
  .h-req p{font-size:15px}
  .h-s2__g{grid-template-columns:1fr;gap:14px}
  .h-box li{font-size:18px}
  .h-why span{font-size:18px}
  .h-why b{font-size:24px}
  .h-why i{font-size:19px}
  .h-so{font-size:21px;padding:14px 16px;border-left-width:6px}
  .h-s3{padding:34px 0}
  .h-s3__big{font-size:30px}
  .h-crowd{grid-template-columns:96px 24px minmax(0,1fr);gap:8px 4px}
  .h-one svg{height:76px}
  .h-one{font-size:13px}
  .h-ar2{display:none}
  .h-crowd__dots{grid-column:1/-1;margin-top:12px}
  .h-steps li{font-size:15.5px}
  .h-end{font-size:20px;padding:14px 16px;border-left-width:6px}
  .h-end span{font-size:16px}
  .h-ch{grid-template-columns:1fr;gap:14px}
  .h-ch__mid::after{content:"↓"}
  .h-ch__m{font-size:15.5px}
  .h-ch__p svg{width:52px;height:52px}
  .h-ch__p b{font-size:13px}
}
/* 段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}
}