@charset "UTF-8";
/* ==========================================================================
   JSOA LP
   Figma: Desktop - FINAL (1440x5706) / Mobile - FINAL (390x4644)
   数値は design/reference/figma/ の書き出しから実測した値。
   PC は 1440 実寸を min(Xvw, Ypx) で表現し、768px まで比例縮小。
   SP は Mobile - FINAL の実測値を px 固定。
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,li,figure{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
.sprite{display:none}
/* アイコン用の span は inline のままだと width/height が効かないため block 化 */
/* シールドの分割線は背景色で抜く（PCは白地、SPは淡いグリーンのカード上） */
.ico-gap{fill:none;stroke:var(--icon-gap,#fff)}
@media (max-width:767px){.mcard{--icon-gap:var(--green-pale)}}
.pcard__icon,.stat__icon,.chart__headingIcon,.stat__warnIcon,.mcard__icon,
.cmp__actorIcon,.cmp__stepIcon,.cmp__listIcon,.cmp__resultIcon{display:block}

/* ---------- 2. Design tokens ---------- */
:root{
  /* Palette（Figma 実測） */
  /* Figma は緑を用途ごとに使い分けているため、実測値をそれぞれ保持する */
  --green:#1a7c32;            /* CTA帯ボタン・比較セクションのアイコン */
  --green-hero-btn:#449e47;   /* ヒーローのボタン */
  --green-h2:#0f6d30;         /* 「こんなお悩みありませんか？」 */
  --green-card:#2e7d32;       /* メリットカードの見出し */
  --green-card-icon:#14ae5c;  /* メリットカードのアイコン */
  --green-jsoa:#21c560;       /* 関係図・縦フローの JSOA */
  --green-after:#045d10;      /* 比較セクション「JSOA加入後」ラベル */
  --green-footer:#3f8f48;     /* フッター */
  --green-pale:#e8f5e9;       /* ヒーロー左パネル・メリットカード */
  --green-tint:#f5f8f6;       /* 比較セクション右パネル・CTA帯 */
  --green-edge:#8dc63f;       /* SPの左右フチのライン（Figmaにはない追加） */
  --orange:#ff8903;           /* 見出しの強調 */
  --orange-chart:#fe7200;     /* グラフ見出し */
  --orange-bar:#fe8109;       /* グラフ・大きな数字・アイコン */
  --orange-strong:#fe5400;    /* 「これまで」ラベル */
  --cream:#fdf5ed;            /* 相談件数ブロック左パネル */
  --cream-tint:#fef8f2;       /* 比較セクション左パネル */
  --stat-bg:#fffdfb;          /* 相談件数ブロック地色 */
  --stat-border:#fcdfae;
  --stat-rule:#fdcc94;
  --card-border:#d1d5db;
  --text:#000;
  --text-muted:#464646;
  --white:#fff;

  /* Type（SP = Mobile - FINAL 実測） */
  --fs-h1:30px;      --lh-h1:36px;
  --fs-h2:24px;
  --fs-eyebrow:14px;
  --fs-herolead:14px;  --lh-herolead:17px;
  --fs-sublead:12px;   --lh-sublead:14px;
  --fs-card4:24px;     --lh-card4:29px;
  --fs-card4note:16px; --lh-card4note:19px;
  --fs-card3:24px;
  --fs-body:16px;
  --fs-small:12px;
  --fs-nav:14px;

  /* Layout */
  --container:1360px;
  --gutter:10px;
  --radius:10px;
}
@media (min-width:768px){
  :root{
    --fs-h1:min(3.472vw,50px);      --lh-h1:1.22;
    --fs-h2:min(3.472vw,50px);
    --fs-eyebrow:min(2.222vw,32px);
    --fs-herolead:min(1.111vw,16px);  --lh-herolead:1.2;
    --fs-sublead:min(1.667vw,24px);   --lh-sublead:1.21;
    --fs-card4:min(2.639vw,38px);     --lh-card4:1.21;
    --fs-card4note:min(1.667vw,24px); --lh-card4note:1.21;
    --fs-card3:min(2.431vw,35px);
    --fs-body:min(1.667vw,24px);
    --fs-small:min(1.528vw,22px);
    --fs-nav:min(1.111vw,16px);
    --gutter:40px;
    --radius:16px;
  }
}

/* ---------- 3. Base ---------- */
/* SP だけ、画面の左右に黄緑のフチを付けて全体を締める。
   Figma にはない追加（クライアントのご要望）。
   body の border にしているので、線は「上に重なる」のではなく
   幅を取る。中身が自動的に内側へ寄るため、画面の端ぎりぎりに置いた
   ブロック（相談件数のカードなど）と線が重ならない。
   スティッキーCTAは position:fixed なので画面幅いっぱいのままで、
   線の上に乗る（浮いている要素の上を線が横切ると貼り付いて見えるため）。
   PC は左右の余白が広く、線を引くと逆に間延びして見えるため入れていない。 */
@media (max-width:767px){
  body{
    border-left:8px solid var(--green-edge);
    border-right:8px solid var(--green-edge);
  }
}

body{
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:var(--fs-body);font-weight:400;line-height:1.6;
  color:var(--text);background:var(--white);
}
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.pc-only{display:none}
.pcard__br{display:none}
@media (min-width:768px){.pcard__br{display:inline}}
@media (min-width:768px){
  .sp-only{display:none !important}
  .pc-only{display:block}
}
.h2{font-size:var(--fs-h2);font-weight:700;line-height:1.2;text-align:center}
@media (max-width:767px){.problems .h2{font-size:26px}}
.h2--green{color:var(--green-h2)}
.u-orange{color:var(--orange)}
.section__lead{text-align:center;font-weight:700;
  font-size:var(--fs-sublead);line-height:var(--lh-sublead)}
.problems .section__lead{margin-top:31px}
@media (min-width:768px){.problems .section__lead{margin-top:min(3.9vw,56px)}}

/* ---------- 4. Button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:700;line-height:1.3;border-radius:4px;transition:opacity .2s}
.btn--primary{background:var(--green);color:var(--white)}
.btn--primary:hover{opacity:.88}
.btn__icon,.btn__arrow{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor}
.btn__arrow{width:.9em;height:.9em;margin-left:.4em}
.btn--block{width:100%}
.hero__cta{font-size:16px;padding:14px 26px;background:var(--green-hero-btn)}
.btn--lg{font-size:14px;padding:13px 22px}
@media (min-width:768px){
  .hero__cta{font-size:min(1.528vw,22px);padding:min(1.32vw,19px) min(2.71vw,39px)}
  .btn--lg{font-size:min(1.528vw,22px);padding:min(1.32vw,19px) min(2.4vw,35px);border-radius:5px}
}

/* ---------- 5. Header（PCのみ / Figma: 高さ80px） ---------- */
.header{background:var(--white)}
.header__inner{max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;
  height:min(5.56vw,80px);padding-left:min(.83vw,12px);padding-right:min(3.6vw,52px);
  display:flex;align-items:center;justify-content:space-between}
.header__logo img{width:min(3.9vw,56px);height:min(3.9vw,56px)}
.nav__list{display:flex;align-items:center;gap:min(1.11vw,16px);
  font-size:var(--fs-nav);font-weight:700}
.nav__list a:hover{color:var(--green)}
@media (max-width:767px){.header{display:none}}

/* ---------- 6. Hero ---------- */
/* SP: 370px幅の写真の上にテキスト（Figma: 546px高） */
@media (max-width:767px){
  /* height ではなく min-height。390px では Figma と同じ 546px のままで、
     狭い端末で見出しが1行増えてもボタンが切れずに伸びる */
  .hero{position:relative;margin:0 10px;min-height:546px;display:flex;align-items:flex-start;overflow:hidden}
  .hero__media{position:absolute;inset:0;z-index:-2}
  .hero__media picture,.hero__media img{width:100%;height:100%}
  .hero__media img{object-fit:cover;object-position:38% 8%}
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
    linear-gradient(180deg,rgba(6,20,11,.62) 0%,rgba(6,20,11,.16) 14%,
      rgba(6,20,11,.16) 34%,rgba(6,20,11,.52) 46%,rgba(6,20,11,.62) 100%)}
  .hero__panel{width:100%}
  .hero__body{padding:22px 10px 0;color:var(--white);text-shadow:0 1px 4px rgba(0,0,0,.5)}
  .hero__title{margin-top:198px}
  .hero__lead{margin-top:23px}
  .hero__cta{margin-top:32px}
}
/* PC: 左に #e8f5e9 のパネル、右に写真（Figma: 高さ820px / 50:50） */
@media (min-width:768px){
  .hero{background:var(--green-pale);display:grid;grid-template-columns:1fr 1fr;
    min-height:min(56.9vw,820px);overflow:hidden}
  .hero__panel{display:flex;align-items:flex-start}
  .hero__body{width:100%;padding-top:min(16.4vw,236px);
    padding-left:max(var(--gutter),calc((100vw - var(--container))/2));
    padding-right:min(2.8vw,40px)}
  .hero__media picture,.hero__media img{width:100%;height:100%}
  .hero__media img{object-fit:cover;object-position:50% 24%}
  .hero__title{margin-top:min(3.19vw,46px)}
  .hero__lead{margin-top:min(2.36vw,34px)}
  .hero__cta{margin-top:min(2.43vw,35px)}
}
.hero__eyebrow{font-size:var(--fs-eyebrow);font-weight:700;line-height:1.2}
.hero__title{font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-h1)}
.hero__lead{font-size:var(--fs-herolead);line-height:var(--lh-herolead)}

/* ---------- 7. Section paddings（Figma の縦位置から） ---------- */
.problems{padding-top:min(7.8vw,112px);padding-bottom:min(3.1vw,44px)}
.flowsec{padding-top:min(3.1vw,45px);padding-bottom:min(4.9vw,70px)}
.merits{padding-top:min(4.9vw,71px);padding-bottom:min(3.9vw,56px)}
.compare{padding-top:min(3.96vw,57px);padding-bottom:min(1.88vw,27px)}
@media (max-width:767px){
  .problems{padding-top:46px;padding-bottom:19px}
  .flowsec{padding-top:19px;padding-bottom:30px}
  .merits{padding-top:48px;padding-bottom:48px}
  .compare{padding-top:45px;padding-bottom:14px}
}

/* ---------- 8. 4枚カード（お悩み） ---------- */
.pcards{display:grid}
.pcard__icon{color:var(--orange-bar)}
.pcard__icon svg{width:100%;height:100%}
.pcard__title{font-size:var(--fs-card4);font-weight:700;line-height:var(--lh-card4)}
.pcard__note{font-size:var(--fs-card4note);line-height:var(--lh-card4note)}
/* SP: 枠の中にアイコン・見出し・補足すべてを収める（Figma: 330x160） */
@media (max-width:767px){
  .pcards{margin-top:40px;gap:13px;grid-template-columns:minmax(0,1fr)}
  .pcard{position:relative;width:330px;max-width:100%;margin-inline:auto;min-height:160px;
    border:1px solid var(--card-border);border-radius:var(--radius);background:var(--white);
    padding:24px 16px 18px;text-align:center}
  .pcard__icon{position:absolute;left:13px;top:18px;width:48px;height:48px}
  .pcard__note{margin-top:21px}
}
/* PC: アイコンは枠の上、補足は枠の下（Figma: 枠 319x280 / gap 28） */
@media (min-width:768px){
  .pcards{margin-top:min(7.8vw,112px);grid-template-columns:repeat(4,1fr);gap:min(1.94vw,28px)}
  .pcard{height:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
  .pcard__icon{width:min(4.17vw,60px);height:min(4.17vw,60px);margin-bottom:min(.76vw,11px)}
  .pcard__box{width:100%;flex:none;height:min(19.4vw,280px);
    display:flex;align-items:center;justify-content:center;padding:min(1.4vw,20px);
    border:1px solid var(--card-border);border-radius:var(--radius);background:var(--white)}
  .pcard__note{margin-top:min(2.43vw,35px);white-space:nowrap}
}

/* ---------- 9. 相談件数ブロック（Figma: 1260x692） ---------- */
.stat{background:var(--stat-bg);border:1px solid var(--stat-border);border-radius:var(--radius);overflow:hidden}
.stat__lead{background:var(--cream);text-align:center}
.stat__icon{width:44px;height:44px;margin:0 auto 12px;color:var(--orange-bar)}
.stat__icon svg{width:100%;height:100%}
.stat__headline{font-weight:700}
.stat__figure{display:flex;align-items:baseline;justify-content:center;line-height:1}
.stat__num{font-weight:700;color:var(--orange-bar);letter-spacing:-.03em}
.stat__unit{font-weight:700}
.stat__note b{color:var(--orange-bar);font-weight:700}
.chart__heading{display:flex;align-items:center;font-weight:700;color:var(--orange-chart);line-height:1.25}
.chart__headingIcon{display:none;flex:none;color:var(--orange-bar)}
.chart__headingIcon svg{width:100%;height:100%}
.stat__warn{display:flex;align-items:center;gap:14px;background:#fdeee0;border-radius:8px}
.stat__warnIcon{flex:none;color:var(--orange-bar)}
.stat__warnIcon svg{width:100%;height:100%}
.stat__warn b{color:var(--orange);font-weight:700}
.stat__source{text-align:center;color:var(--text-muted)}

/* SP: 縦積み（Figma: 370x821） */
@media (max-width:767px){
  .stat{margin-top:27px}
  .stat__lead{padding:22px 20px 20px}
  .stat__icon{width:28px;height:30px;margin-bottom:9px}
  .stat__headline{font-size:18px;line-height:22px}
  .stat__label{margin-top:17px;font-size:13px;line-height:19px}
  /* SP は「7.9」と「万件」を縦に積む（Figma） */
  .stat__figure{margin-top:17px;flex-direction:column;align-items:center}
  .stat__num{font-size:103px;line-height:.88}
  .stat__unit{font-size:27px;margin-top:12px}
  .stat__note{margin-top:13px;font-size:14px;line-height:24px}
  .stat__chart{padding:30px 20px 20px}
  .chart__heading{justify-content:center;flex-wrap:wrap;text-align:center;
    font-size:15px;line-height:18px}
  .chart__badge{display:inline-block;margin-left:.4em;padding:.15em .7em;border-radius:999px;
    background:var(--orange-bar);color:var(--white);font-size:.85em;vertical-align:middle}
  .stat__warn{margin-top:14px;padding:10px 12px;gap:10px}
  .stat__warnIcon{width:26px;height:26px}
  .stat__warn p{font-size:11px;line-height:1.5}
  .stat__source{margin-top:16px;font-size:10px;line-height:13px}
}
/* PC: 左にクリームのパネル、右にグラフ、出典はブロック中央下 */
@media (min-width:768px){
  .stat{position:relative;width:min(87.5vw,1260px);margin:min(6.04vw,87px) auto 0;padding:0;
    display:grid;grid-template-columns:min(30.6vw,440px) 1fr;grid-template-areas:"lead chart" "src src"}
  /* クリームのパネルはブロックの全高（出典の行にもかかる）— Figma */
  .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;
    width:min(30.6vw,440px);background:var(--cream)}
  .stat__lead{grid-area:lead;position:relative;background:none;
    padding:min(4.3vw,62px) min(1.7vw,24px) 0}
  .stat__headline{font-size:min(2.083vw,30px);line-height:1.57}
  .stat__label{position:relative;margin-top:min(2.08vw,30px);padding-top:min(2.29vw,33px);
    font-size:min(1.667vw,24px);line-height:1.5}
  .stat__label::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:min(8vw,115px);height:2px;background:var(--stat-rule)}
  .stat__figure{margin-top:min(.28vw,4px)}
  .stat__num{font-size:min(10.4vw,150px)}
  .stat__unit{font-size:min(3.6vw,52px);margin-left:min(1.7vw,24px)}
  .stat__note{margin-top:min(2.7vw,39px);font-size:min(1.667vw,24px);line-height:1.21}
  .stat__chart{grid-area:chart;position:relative;padding:min(2.5vw,36px) min(2.1vw,30px) 0}
  .chart__heading{font-size:min(1.806vw,26px)}
  .chart__headingIcon{display:block;width:min(3.19vw,46px);height:min(3.4vw,49px);
    margin-right:min(1.32vw,19px)}
  .chart__badge{font-size:min(1.389vw,20px)}
  .stat__source{grid-area:src;position:relative;margin-top:min(3.13vw,45px);
    padding-bottom:min(2.15vw,31px);font-size:min(1.528vw,22px);line-height:1.45}
}

/* ---------- 10. 棒グラフ（Figma: プロット高329 / 棒幅73 / ピッチ135） ---------- */
.chart{--plot-h:132px;margin-top:12px}
.chart__unitLabel{display:block;font-size:10px;margin-bottom:6px}
.chart__body{display:grid;grid-template-columns:auto 1fr;grid-template-rows:var(--plot-h) auto;column-gap:6px}
.chart__yaxis{position:relative;font-size:11px;text-align:right;min-width:1.6em}
.chart__yaxis span{position:absolute;right:0;bottom:calc(var(--p)*1%);transform:translateY(50%);line-height:1}
.chart__plot{position:relative;border-left:1px solid #888;border-bottom:1px solid #888}
.chart__grid{position:absolute;inset:0}
.chart__grid i{position:absolute;left:0;right:0;bottom:calc(var(--p)*1%);border-top:1px dashed #e7ded3}
.chart__series{position:absolute;inset:0;display:flex;align-items:flex-end}
.chart__series li{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center}
.chart__val{position:absolute;left:50%;bottom:calc(var(--v)/10*100%);transform:translateX(-50%);
  margin-bottom:4px;font-size:11px;font-weight:700;white-space:nowrap;line-height:1}
.chart__val small{font-size:.8em;font-weight:700}
.chart__series li.is-current .chart__val{color:var(--orange)}
.chart__bar{width:54%;max-width:73px;height:calc(var(--v)/10*100%);
  background:linear-gradient(180deg,#fe9b2a 0%,var(--orange-bar) 100%)}
.chart__xaxis{grid-column:2;display:flex;padding-top:6px;font-size:10px}
.chart__xaxis li{flex:1;text-align:center;white-space:nowrap}
.chart__xaxis li.is-current{color:var(--orange);font-weight:700}
@media (min-width:768px){
  .chart{--plot-h:min(22.8vw,329px);margin-top:min(1.7vw,24px)}
  .chart__unitLabel{font-size:min(1.528vw,22px);margin-bottom:min(.9vw,13px)}
  .chart__body{column-gap:min(.8vw,12px)}
  .chart__yaxis{font-size:min(1.528vw,22px)}
  .chart__val{font-size:min(1.667vw,24px);margin-bottom:min(.7vw,10px)}
  .chart__xaxis{font-size:min(1.389vw,20px);padding-top:min(1.6vw,23px)}
  .chart__bar{background:var(--orange-bar)}
}

/* ---------- 11. ブリッジコピー（Figma: 38px / 前半のみオレンジ） ---------- */
.bridge{text-align:center;font-weight:700;line-height:1.21}
@media (max-width:767px){.bridge{margin-top:19px;font-size:19px}}
@media (min-width:768px){.bridge{margin-top:min(6.11vw,88px);font-size:min(2.639vw,38px)}}

/* ---------- 12. 第三者関係図 ---------- */
.triangle{width:100%;max-width:var(--container);margin:min(2.08vw,30px) auto 0;height:auto}
.tri-node{font-size:36px;font-weight:700;fill:var(--text)}
.tri-node--jsoa{font-size:50px;fill:var(--green-jsoa)}
.tri-label{font-size:24px;fill:var(--text)}

/* SPの三角図。viewBox 幅 354 = SPのコンテナ幅なので 1単位 = 1px。
   文字サイズの数値はそのまま画面上の px と一致する */
.trisp{width:100%;margin-top:34px;height:auto}
.trisp-node{font-size:17px;font-weight:700;fill:var(--text)}
.trisp-node--jsoa{font-size:24px;fill:var(--green-jsoa)}
.trisp-label{font-size:12px;fill:var(--text)}
/* 手で改行を入れている段落なので中央揃え（Figma もそうなっている）。
   指定が漏れていて PC・SP ともに左寄せになっていた */
.flowsec__text{text-align:center}
@media (max-width:767px){.flowsec__text{margin-top:38px;font-size:12px;line-height:1.17}}
@media (min-width:768px){
  .flowsec__text{margin-top:min(1.67vw,24px);font-size:min(1.667vw,24px);line-height:1.21;
    max-width:none}
}

/* ---------- 13. メリット3枚（Figma: アイコンは枠の外・角丸なし） ---------- */
.mcards{display:grid}
.mcard__icon{color:var(--green-card-icon)}
.mcard__icon svg{width:100%;height:100%}
.mcard__body{background:var(--green-pale)}
.mcard__title{font-size:var(--fs-card3);font-weight:700;color:var(--green-card);line-height:1.21;text-align:center}
.mcard__text{line-height:1.21}
@media (max-width:767px){
  .mcards{margin-top:37px;gap:19px;grid-template-columns:minmax(0,1fr)}
  .mcard{position:relative;width:330px;max-width:100%;margin-inline:auto;background:var(--green-pale);
    padding:18px 16px 20px}
  .mcard__icon{position:absolute;left:14px;top:20px;width:44px;height:44px}
  .mcard__body{background:none;padding-left:46px}
  .mcard__title{text-align:center}
  .mcard__text{margin-top:16px;font-size:16px;line-height:1.5;padding-left:14px}
}
@media (min-width:768px){
  .mcards{margin-top:min(5.97vw,86px);grid-template-columns:repeat(3,min(24.4vw,351px));
    gap:min(5.97vw,86px);justify-content:center}
  .mcard{display:flex;flex-direction:column;align-items:center}
  .mcard__icon{width:min(4.17vw,60px);height:min(4.17vw,60px);margin-bottom:min(.9vw,13px)}
  .mcard__body{width:100%;height:min(23.9vw,344px);padding:min(1.46vw,21px) min(1.39vw,20px) 0}
  .mcard__text{margin-top:min(3.75vw,54px);font-size:min(1.667vw,24px)}
}

/* ---------- 14. ビフォーアフター比較 ---------- */
@media (min-width:768px){
  .compare .h2{font-size:min(3.056vw,44px)}
  .compare .section__lead{font-weight:400;font-size:min(1.944vw,28px);margin-top:min(.76vw,11px)}
}
@media (max-width:767px){
  /* Figma は1行14pxだが、他セクションの見出し（24〜26px）と揃えて2行に */
  .compare .section__lead{font-weight:400;margin-top:6px}
}
.cmp{display:grid}
.cmp__arrow{display:none}
.cmp__col{border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.cmp__body{flex:1}
.cmp__col--before,.cmp__col--after{background:#fefefe;border:2px solid}
.cmp__col--before{border-color:#fedecf}
.cmp__col--after{border-color:#dde7e2}
.cmp__head{text-align:center;font-weight:700;line-height:1.3}
.cmp__col--before .cmp__head{background:#fef8f2;color:var(--orange-strong)}
.cmp__col--after .cmp__head{background:#f6f9f7;color:var(--green-after)}
.cmp__rel{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.cmp__actor{display:flex;flex-direction:column;align-items:center;flex:none;text-align:center}
.cmp__actorIcon svg{width:100%;height:100%}
.cmp__col--before .cmp__actorIcon{color:var(--orange-bar)}
.cmp__col--after .cmp__actorIcon{color:var(--green)}
.cmp__actorName{font-weight:700;line-height:1.3;white-space:nowrap}
.cmp__actorName--jsoa small{display:block;font-weight:400;color:var(--text)}
.cmp__link{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.cmp__linkLabel{line-height:1.2;white-space:nowrap}
/* 連結線と矢頭（Figma: 線 5px / 矢頭 18x11） */
.cmp__line{position:relative;width:100%;height:var(--ln,1px);background:#555}
.cmp__line--to::after,.cmp__line--both::after{content:"";position:absolute;right:0;top:50%;
  transform:translateY(-50%);border-top:var(--ah,4px) solid transparent;
  border-bottom:var(--ah,4px) solid transparent;border-left:var(--al,4px) solid #555}
.cmp__line--both::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);border-top:var(--ah,4px) solid transparent;
  border-bottom:var(--ah,4px) solid transparent;border-right:var(--al,4px) solid #555}
.cmp__down{display:block;width:var(--ln,1px);background:#555;position:relative}
.cmp__down::after{content:"";position:absolute;bottom:calc(var(--dl,4px) * -1);left:50%;
  transform:translateX(-50%);border-left:var(--dh,4px) solid transparent;
  border-right:var(--dh,4px) solid transparent;border-top:var(--dl,4px) solid #555}
.cmp__steps li{display:flex;align-items:center;background:var(--white);
  border:1px solid var(--card-border);font-weight:700;line-height:1.4}
.cmp__col--before .cmp__steps li{border-color:#fef0e7}
.cmp__col--after .cmp__steps li{border-color:#ebf1ee}
.cmp__steps li + li{position:relative}
.cmp__steps li + li::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:var(--ln,1px);background:#555}
.cmp__steps li + li::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  border-left:var(--dh,4px) solid transparent;border-right:var(--dh,4px) solid transparent;
  border-top:var(--dl,4px) solid #555}
.cmp__stepIcon{flex:none}
.cmp__stepIcon svg{width:100%;height:100%}
.cmp__col--before .cmp__stepIcon{color:var(--orange-bar)}
.cmp__col--after .cmp__stepIcon{color:var(--green)}
.cmp__sub{text-align:center;font-weight:700}
.cmp__col--before .cmp__sub{color:var(--orange)}
.cmp__col--after .cmp__sub{color:var(--green)}
.cmp__list li{display:flex;align-items:center;line-height:1.45}
.cmp__col--before .cmp__list li{background:#fef8f3}
.cmp__col--after .cmp__list li{background:#f6f9f7}
.cmp__listIcon{flex:none}
.cmp__listIcon svg{width:100%;height:100%}
.cmp__col--before .cmp__listIcon{color:var(--orange-bar)}
.cmp__col--after .cmp__listIcon{color:var(--green)}
.cmp__result{display:flex;align-items:center;font-weight:700;line-height:1.4}
.cmp__col--before .cmp__result{background:#fef8f2}
.cmp__col--after .cmp__result{background:#f5f8f6;color:var(--green)}
.cmp__resultIcon{flex:none}
.cmp__resultIcon svg{width:100%;height:100%}
.cmp__col--before .cmp__resultIcon{color:var(--orange-bar)}
.cmp__col--after .cmp__resultIcon{color:var(--green)}

@media (max-width:767px){
  /* Figma(SP): パネル 320x333 / 306、ヘッダー 24 */
  .cmp{margin-top:23px;gap:6px;max-width:320px;margin-inline:auto}
  .cmp__col{--ln:2px;--ah:3px;--al:5px;--dh:3.5px;--dl:4px}
  .cmp__head{padding:4px 10px;font-size:11px}
  .cmp__body{padding:6px 18px 5px}
  .cmp__rel{max-width:232px;margin-inline:auto}
  .cmp__actor{width:24px;gap:3px}
  .cmp__actorIcon{width:22px;height:22px}
  .cmp__actorName{font-size:8.5px}
  .cmp__actorName--jsoa{font-size:8.5px}
  .cmp__actorName--jsoa small{font-size:7px}
  .cmp__link{padding-top:2px;gap:3.5px}
  .cmp__linkLabel{font-size:8px}
  .cmp__line{width:77%}
  .cmp__rel--three .cmp__line{width:58%}
  .cmp__down{height:24px;margin:-20px auto 5px}
  /* Figma(SP): JSOA加入後パネルには下向き矢印がない */
  .cmp__col--after .cmp__down{display:none}
  .cmp__col--after .cmp__steps br{display:none}
  .cmp__steps{margin-inline:2px}
  .cmp__steps li{gap:20px;padding:3.5px 9px 3.5px 40px;border-radius:5px;
    font-size:9.3px;line-height:1.5}
  .cmp__steps li + li{margin-top:7.5px}
  .cmp__steps li + li::before{top:-8.5px;height:5px}
  .cmp__steps li + li::after{top:-4px}
  .cmp__stepIcon{width:18px;height:18px}
  /* SP は見出し＋箇条書きが1枚の色面（Figma） */
  .cmp__sub{margin-top:5px;padding:4px 0 2px;font-size:9.5px;border-radius:5px 5px 0 0}
  .cmp__col--before .cmp__sub{background:#fef8f2}
  .cmp__col--after .cmp__sub{background:#f6f9f7}
  .cmp__list{margin-top:0;display:grid;gap:0}
  .cmp__list li{gap:5px;padding:2.5px 8px;border-radius:0;font-size:7.5px;line-height:1.3}
  .cmp__listIcon{width:12px;height:12px}
  .cmp__result{margin-top:0;gap:10px;padding:4px 9px 4px 13px;
    border-radius:0 0 5px 5px;font-size:10px}
  .cmp__resultIcon{width:20px;height:20px}
}

@media (min-width:768px){
  /* Figma: パネル 627/643 x 838、間のガター 87（矢印 30x50） */
  .cmp{margin-top:min(1.11vw,16px);grid-template-columns:1fr auto 1fr;
    align-items:stretch;gap:min(2.01vw,29px)}
  .cmp__col{--ln:min(.35vw,5px);--ah:min(.63vw,9px);--al:min(.76vw,11px);
    --dh:min(.66vw,9.5px);--dl:min(.83vw,12px)}
  .cmp__arrow{display:block;align-self:start;margin-top:min(22.7vw,327px);width:0;height:0;
    border-top:min(1.74vw,25px) solid transparent;border-bottom:min(1.74vw,25px) solid transparent;
    border-left:min(2.08vw,30px) solid #b2b3b2}
  .cmp__head{padding:min(.715vw,10.3px);font-size:min(1.944vw,28px)}
  .cmp__body{padding:min(1.11vw,16px) min(2.08vw,30px) min(1.39vw,20px)}
  /* 関係図は本文幅いっぱいではなく中央寄せ（Figma: 左 461 / 右 500） */
  .cmp__rel{max-width:min(32vw,461px);margin-inline:auto}
  .cmp__rel--three{max-width:min(34.7vw,500px)}
  .cmp__actor{width:min(4.03vw,58px);gap:min(.63vw,9px)}
  .cmp__actorIcon{width:min(4.03vw,58px);height:min(4.03vw,58px)}
  .cmp__actorName{font-size:min(1.25vw,18px)}
  .cmp__actorName--jsoa small{font-size:min(.97vw,14px)}
  .cmp__linkLabel{font-size:min(1.25vw,18px)}
  .cmp__link{padding-top:min(.35vw,5px);gap:min(.6vw,8.7px)}
  .cmp__line{width:72%}
  .cmp__rel--three .cmp__line{width:55%}
  /* 下向き矢印はパネル中央。Figma では氏名行の高さに食い込む */
  .cmp__down{height:min(3.82vw,55px);
    margin:max(-2.01vw,-29px) auto min(1.25vw,18px)}
  .cmp__col--after .cmp__down{height:min(.63vw,9px);
    margin:min(.35vw,5px) auto min(1.18vw,17px)}
  .cmp__steps{margin-inline:min(.9vw,13px)}
  .cmp__steps li{gap:min(3.13vw,45px);min-height:min(4.86vw,70px);
    padding:min(.56vw,8px) min(1.32vw,19px) min(.56vw,8px) min(5.56vw,80px);
    border-radius:11px;font-size:min(1.389vw,20px);line-height:1.3}
  .cmp__steps li + li{margin-top:min(1.46vw,21px)}
  .cmp__steps li + li::before{top:min(-1.46vw,-21px);height:min(.63vw,9px)}
  .cmp__steps li + li::after{top:max(-.83vw,-12px)}
  .cmp__stepIcon{width:min(3.13vw,45px);height:min(3.13vw,45px)}
  .cmp__sub{margin-top:min(1.6vw,23px);font-size:min(1.53vw,22px);line-height:1.4}
  .cmp__list{margin-top:min(.63vw,9px);display:grid;gap:min(.19vw,2.7px)}
  .cmp__list li{gap:min(1.32vw,19px);padding:min(.38vw,5.5px) min(1.11vw,16px);
    border-radius:5px;font-size:min(1.32vw,19px)}
  .cmp__listIcon{width:min(2.08vw,30px);height:min(2.08vw,30px)}
  .cmp__result{margin-top:min(1.11vw,16px);gap:min(1.11vw,16px);
    padding:min(.42vw,6px) min(1.32vw,19px) min(.42vw,6px) min(1.18vw,17px);
    border-radius:9px;font-size:min(1.53vw,22px)}
  .cmp__resultIcon{width:min(3.33vw,48px);height:min(3.33vw,48px)}
}

/* ---------- 15. CTA帯（Figma: 1356x157 / #f4f8f6） ---------- */
.ctaband{background:var(--green-tint);border-radius:var(--radius);text-align:center;
  max-width:1357px;margin-inline:auto}
.ctaband__title{font-weight:700;line-height:1.4}
.ctaband__sub{color:var(--text-muted);line-height:1.5}
@media (max-width:767px){
  .ctaband{margin-top:8px;padding:8px 14px 10px}
  .ctaband__title{font-size:11px}
  .ctaband__sub{margin-top:2px;font-size:9px}
  .ctaband .btn{margin-top:7px}
  .btn--lg{font-size:11px;padding:6px 16px}
}
@media (min-width:768px){
  .ctaband{margin-top:min(2.15vw,31px);padding:min(1.18vw,17px) min(2.8vw,40px);
    display:flex;align-items:center;justify-content:center;gap:min(3.5vw,50px);text-align:left}
  .ctaband__title{font-size:min(1.944vw,28px)}
  .ctaband__sub{margin-top:min(.4vw,6px);font-size:min(1.389vw,20px)}
  .ctaband .btn{margin-top:0;flex:none}
}

/* ---------- 16. フッター（Figma: #3f8f48 / 高さ280 / ロゴ112） ---------- */
.footer{background:var(--green-footer);color:var(--white)}
.footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.footer__brand{text-align:center}
.footer__nav ul{display:grid;text-align:center}
.footer__nav a:hover{text-decoration:underline}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-top:1px solid rgba(255,255,255,.45)}
@media (max-width:767px){
  /* Figma は約6pxだが可読性のため最小10pxに引き上げている（要確認） */
  .footer{padding:10px 0 3px}
  .footer__logo{width:48px;height:48px}
  .footer__org{margin-top:3px;font-size:10px;line-height:1.4}
  .footer__nav ul{gap:2px;font-size:10px}
  .footer__bottom{margin-top:2px;padding-top:2px}
  .footer__copy,.footer__privacy{font-size:10px}
}
@media (min-width:768px){
  .footer{padding:min(1.32vw,19px) 0 min(1.88vw,27px)}
  .footer__brand{margin-top:min(2.01vw,29px)}
  .footer__logo{width:min(7.8vw,112px);height:min(7.8vw,112px)}
  .footer__org{margin-top:min(.49vw,7px);font-size:min(1.25vw,18px)}
  .footer__nav ul{gap:min(1.25vw,18px);font-size:min(1.389vw,20px)}
  .footer__bottom{margin-top:min(.83vw,12px);padding-top:min(.69vw,10px)}
  .footer__copy,.footer__privacy{font-size:min(1.25vw,18px)}
}

/* ---------- 17. SP 追従CTA ---------- */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  box-shadow:0 -2px 12px rgba(0,0,0,.13);
  transform:translateY(110%);transition:transform .28s ease}
.stickycta.is-visible{transform:translateY(0)}
.stickycta .btn{font-size:15px;padding:13px 16px}
body.has-stickycta{padding-bottom:78px}
@media (min-width:768px){
  .stickycta{display:none !important}
  body.has-stickycta{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.stickycta,.btn{transition:none}}