:root{
  /* ブランド：GrowGroup の緑・濃グレー・白 */
  --primary:#297B50; --primary-l:#EAF2ED; --primary-d:#1F5D3C; --primary-x:#3FA76D;
  --stroke:#E5E9E7; --body:#F6F8F7; --white:#FFFFFF;
  --dark:#2A2A2A; --dark3:#3F4442; --dark4:#5A605D; --dark5:#5F6763; --dark6:#6E7571;
  --sidebar:#2A2A2A;
  /* ステータス色：一般的なUIの共通値。ブランドとは別に固定する
     ★成功の緑 #22AD5C はブランド緑 #297B50 より明るい。役割で使い分ける */
  --green:#22AD5C; --green-l:#E6F6EE; --green-d:#136535;
  --red:#E10E0E; --red-l:#FCEAEA; --red-t:#C00A0A;
  --amber:#F5A524; --amber-l:#FEF6E7; --amber-d:#8A5A0B; --amber-s:#96620E;
  /* タイポは7段に固定する。ここ以外で font-size を直書きしない */
  --fs-display:64px;  /* 総合スコア */
  --fs-1:30px;        /* カバーのホスト名 */
  --fs-2:20px;        /* ページタイトル・大きい数値 */
  --fs-3:16px;        /* カードタイトル・改善点の見出し */
  --fs-4:15px;        /* 本文 */
  --fs-5:13px;        /* 補助テキスト */
  --fs-6:11.5px;      /* ラベル・キャプション */
  --r:10px; --r-s:6px;
  --sh:0 1px 3px rgba(166,175,195,.35);
  --mono:"Noto Sans JP",sans-serif;   /* 書体は Noto Sans JP に統一。数字は tnum で桁を揃える */
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--body);color:var(--dark);font-family:"Noto Sans JP",sans-serif;
  font-size:var(--fs-4);line-height:1.8;letter-spacing:.01em;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%} a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.mo{font-family:var(--mono);font-feature-settings:"tnum" 1}
input,select,textarea{font:inherit;color:inherit}

/* ===== トップバー（ra-f6 と同じ1段目だけ。セクションナビは結果画面のもの） ===== */
.thd{position:sticky;top:0;z-index:40;background:var(--white);
  box-shadow:0 1px 0 var(--stroke),0 6px 16px -14px rgba(42,42,42,.55)}
.thd__r1{display:flex;align-items:center;gap:16px;max-width:1320px;margin:0 auto;padding:13px 28px;min-height:68px}
.thd__lg{display:flex;align-items:center;gap:11px;flex:none}
.thd__lg svg{width:148px;height:auto;display:block}
.thd__lg .lg-t{fill:var(--dark)}
.thd__lg .lg-m{fill:var(--primary)}
.thd__nm{font-size:var(--fs-6);letter-spacing:.1em;color:var(--dark5);background:var(--body);
  padding:4px 9px;border-radius:4px;flex:none}
.thd__sp{flex:1}
.thd__step{font-size:var(--fs-5);color:var(--dark5);flex:none}
.thd__step b{color:var(--dark);font-weight:700}

/* ===== 共通のページ枠 ===== */
/* ★内容が短い画面でフッターが画面途中に浮くので、本文で残りを埋めて下端に置く */
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100%}
.wrap{max-width:1320px;margin:0 auto;padding:34px 28px 80px;width:100%;flex:1}
.narrow{max-width:820px}
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:26px 28px}
.eyebrow{font-size:var(--fs-6);letter-spacing:.14em;color:var(--primary);font-weight:700}
h1{font-size:34px;line-height:1.45;font-weight:700;letter-spacing:-.01em}
h2{font-size:var(--fs-2);font-weight:700;line-height:1.55}
.lead{font-size:var(--fs-4);color:var(--dark4);line-height:1.9}
.note{font-size:var(--fs-5);color:var(--dark5);line-height:1.85}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 30px;
  background:var(--primary);color:var(--white);font-weight:700;border-radius:var(--r-s);transition:.16s}
.cta:hover{background:var(--primary-d)}
.cta[disabled]{background:var(--stroke);color:var(--dark6);cursor:not-allowed}
.cta--g{background:var(--white);color:var(--dark3);box-shadow:inset 0 0 0 1px var(--stroke)}
.cta--g:hover{background:var(--body)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-6);font-weight:700;
  padding:4px 10px;border-radius:99px;background:var(--primary-l);color:var(--primary-d)}
.foot{border-top:1px solid var(--stroke);background:var(--white)}
.foot__i{max-width:1320px;margin:0 auto;padding:20px 28px;font-size:var(--fs-6);color:var(--dark5);
  display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
@media(max-width:767px){
  .thd__r1{padding:11px 16px;gap:10px} .thd__lg svg{width:118px}
  /* ★375pxでも設問番号は出したい。折り返さず縮める（隠すと現在位置が分からなくなる） */
  .thd__step{font-size:var(--fs-6);white-space:nowrap}
  .thd__lg{min-width:0}
  .wrap{padding:24px 16px 64px} h1{font-size:25px} .card{padding:20px 18px}
  .foot__i{padding:16px}
}

/* ===== 入口 ===== */
.hero{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:start;padding:52px 0 44px}
.hero h1{margin:14px 0 18px}
.form{display:flex;gap:10px;margin-top:26px}
.form input{flex:1;min-width:0;height:56px;padding:0 16px;background:var(--white);border-radius:var(--r-s);
  box-shadow:inset 0 0 0 1px var(--stroke);font-size:var(--fs-3)}
.form input::placeholder{color:var(--dark6)}
.form input:focus{box-shadow:inset 0 0 0 2px var(--primary);outline:none}
.tri{display:flex;gap:22px;margin-top:14px;font-size:var(--fs-5);color:var(--dark5);flex-wrap:wrap}
.tri b{color:var(--dark3)}
.axes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.ax{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:17px 18px}
.ax b{display:block;font-size:var(--fs-3);font-weight:700}
.ax p{font-size:var(--fs-5);color:var(--dark5);line-height:1.75;margin-top:5px}
.shot{background:var(--white);border-radius:var(--r);box-shadow:0 14px 40px rgba(27,76,51,.16);overflow:hidden}
.shot__f{position:relative;height:452px;overflow:hidden}
.shot__f img{width:100%}
.shot__f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--white))}
.shot__c{padding:13px 16px;font-size:var(--fs-6);color:var(--dark5)}
.err{margin-top:14px;font-size:var(--fs-5);color:var(--red-t);background:var(--red-l);
  padding:11px 14px;border-radius:var(--r-s);display:none}
.err.on{display:block}
/* ===== 10問＋進捗 ===== */
.grid{display:grid;grid-template-columns:1fr 372px;gap:34px;align-items:start;padding-top:8px}
.q{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:30px 32px}
.q__n{display:flex;align-items:baseline;gap:12px}
.q__n b{font-size:var(--fs-6);letter-spacing:.12em;color:var(--primary);font-weight:700}
.q__n span{font-size:var(--fs-6);color:var(--dark6)}
.q__t{font-size:23px;font-weight:700;line-height:1.55;margin:10px 0 6px}
.opts{display:grid;gap:9px;margin-top:22px}
.opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px;text-align:left;
  background:var(--body);border-radius:var(--r-s);font-size:var(--fs-3);transition:.14s;width:100%}
.opt:hover{background:var(--primary-l);color:var(--primary-d)}
.opt.sel{background:var(--primary);color:var(--white)}
.opt i{flex:none;width:24px;height:24px;border-radius:99px;background:var(--white);color:var(--dark6);
  font-style:normal;font-size:var(--fs-6);font-weight:700;display:grid;place-items:center}
.opt:hover i{background:var(--primary);color:var(--white)}
.opt.sel i{background:var(--white);color:var(--primary)}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px}
.skip{font-size:var(--fs-5);color:var(--dark5);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;flex:none;min-height:44px}
.dots{display:flex;gap:5px;flex:1;min-width:0;flex-wrap:wrap}
.dots i{width:22px;height:4px;border-radius:99px;background:var(--stroke)}
.dots i.on{background:var(--primary)} .dots i.dn{background:var(--primary-x)}
.pg{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:24px}
.pg__h{display:flex;align-items:center;gap:9px;font-size:var(--fs-3);font-weight:700}
.pg__h em{font-style:normal;width:9px;height:9px;border-radius:99px;background:var(--primary-x);animation:bl 1.1s infinite}
@keyframes bl{50%{opacity:.25}}
.pg__t{font-size:34px;font-weight:700;letter-spacing:-.02em;margin-top:14px;line-height:1.3}
.pg__t s{text-decoration:none;font-size:var(--fs-4);color:var(--dark5);font-weight:400}
.bar{height:6px;border-radius:99px;background:var(--body);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:var(--primary);width:0;transition:width .6s linear}
.ph{margin-top:20px;display:grid;gap:2px}
.ph div{display:flex;align-items:center;gap:10px;font-size:var(--fs-5);color:var(--dark6);padding:5px 0}
.ph div.on{color:var(--dark)} .ph div.dn{color:var(--dark4)}
.ph s{flex:none;width:18px;height:18px;border-radius:99px;background:var(--body);text-decoration:none;
  display:grid;place-items:center;font-size:10px;color:var(--dark6)}
.ph div.dn s{background:var(--primary-l);color:var(--primary-d)}
.ph div.on s{background:var(--primary);color:var(--white)}
.pg__n{font-size:var(--fs-6);color:var(--dark5);margin-top:18px;line-height:1.8}
/* ===== 組み上がり ===== */
/* ★place-items:center は、内容がコンテナより高いとき上下にはみ出す。
   min-height を固定していたためフッターに重なり、「レポートを見る」が押せなくなっていた
   （実測：クリック位置に居たのは .foot__i）。flex:1 で伸ばし、はみ出しを起こさない形にする。 */
.mid{flex:1;width:100%;display:grid;align-content:center;justify-items:center;padding:40px 20px}
.box{width:100%;max-width:640px;text-align:center}
.box h1{font-size:27px;margin-bottom:8px}
.ring{width:168px;height:168px;margin:26px auto 4px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;font-weight:700;letter-spacing:-.02em}
.ring b s{text-decoration:none;font-size:var(--fs-5);color:var(--dark5);font-weight:400}
.rows{margin-top:26px;display:grid;gap:1px;background:var(--white);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;text-align:left}
.row{display:grid;grid-template-columns:106px 1fr 58px;align-items:center;gap:14px;padding:13px 20px;
  background:var(--white);opacity:.28;transition:opacity .3s}
.row.on{opacity:1}
.row b{font-size:var(--fs-5);font-weight:700}
.row .t{height:6px;border-radius:99px;background:var(--body);overflow:hidden}
.row .t i{display:block;height:100%;width:0;background:var(--primary);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.row .v{text-align:right;font-size:var(--fs-4);font-weight:700}
.done{margin-top:28px;opacity:0;transition:opacity .4s}
.done.on{opacity:1}
/* ===== 結果 ===== */
.rhead{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;padding:8px 0 26px}
.rhead__t{flex:1;min-width:260px}
.rhead__t h1{font-size:28px}
.rhead__t p{font-size:var(--fs-5);color:var(--dark5);margin-top:6px}
.big{display:flex;align-items:baseline;gap:8px}
.big b{font-size:var(--fs-display);font-weight:700;letter-spacing:-.03em;line-height:1}
.big s{text-decoration:none;font-size:var(--fs-4);color:var(--dark5)}
.pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.pl{font-size:var(--fs-6);font-weight:700;padding:4px 10px;border-radius:99px}
.pl--r{background:var(--red-l);color:var(--red-t)} .pl--a{background:var(--amber-l);color:var(--amber-s)}
.pl--n{background:var(--body);color:var(--dark4)} .pl--g{background:var(--green-l);color:var(--green-d)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:22px 24px}
.tile__h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tile__h b{font-size:var(--fs-3);font-weight:700}
.tile__v{font-size:38px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:6px 0 10px}
/* ★span のままだとインラインで height が効かず、バーが巨大な面になる（実測で発覚） */
.tile .t{display:block;height:5px;border-radius:99px;background:var(--body);overflow:hidden}
.tile .t i{display:block;height:100%;background:var(--primary)}
.chips{display:grid;gap:6px;margin-top:14px}
.chip{display:block;font-size:var(--fs-6);line-height:1.7}
.chip b{display:block;font-weight:700;color:var(--dark3)}
.chip em{font-style:normal;color:var(--dark5)}
.tile__w{font-size:var(--fs-5);color:var(--dark4);line-height:1.85;margin-top:12px}
/* ★style属性を使わないための最小ユーティリティ。
   インラインstyleを残すと CSP の style-src に 'unsafe-inline' が必要になり、
   自分たちが INF-18 で減点している状態になる。 */
.mt-s{margin-top:12px}.mt-m{margin-top:14px}.mt-l{margin-top:26px}
.pt-l{padding-top:52px}.pt-xl{padding-top:72px}
.center{max-width:760px;margin:0 auto}
.center--n{max-width:620px;margin:0 auto;text-align:center}
.tlink{color:var(--primary-d);text-decoration:underline;text-underline-offset:2px}
.h-404{margin:12px 0 14px}
.sec{margin-top:38px}
.sec__h{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.sec__h h2{font-size:var(--fs-2)}
.sec__h span{font-size:var(--fs-5);color:var(--dark5)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--stroke);
  border-radius:var(--r);overflow:hidden}
/* 3列に足りない分は白で埋める（余りマスが線の色のまま見えてしまう） */
.fact--pad{background:var(--white)}
.fact{background:var(--white);padding:17px 20px}
.fact b{display:block;font-size:var(--fs-6);letter-spacing:.06em;color:var(--dark5);font-weight:700}
.fact em{font-style:normal;display:block;font-size:var(--fs-3);font-weight:700;margin-top:4px}
.fact span{display:block;font-size:var(--fs-6);color:var(--dark5);margin-top:2px}
.imps{display:grid;gap:12px}
.imp{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:20px 24px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.imp__n{font-size:var(--fs-6);color:var(--dark6);font-weight:700;flex:none}
.imp__t{flex:1;min-width:220px}
.imp__t b{font-size:var(--fs-3)}
.imp__t p{font-size:var(--fs-5);color:var(--dark5);margin-top:3px}
.imp__t .why{color:var(--dark4);line-height:1.8;margin-top:7px}
.imp__t .plan{font-size:var(--fs-6);color:var(--primary-d);margin-top:6px;font-weight:700}
.imp{align-items:flex-start}
.imp__n{padding-top:3px}
.imp__g{font-size:var(--fs-5);color:var(--primary-d);font-weight:700;flex:none}
.gate{margin-top:34px;background:var(--white);border-radius:var(--r);box-shadow:var(--sh);
  padding:28px 30px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.gate__t{flex:1;min-width:260px}
.gate__t h2{font-size:var(--fs-2)}
.gate__t p{font-size:var(--fs-5);color:var(--dark5);margin-top:6px;line-height:1.85}
.deep{display:none;align-items:center;gap:9px;font-size:var(--fs-5);color:var(--dark5);margin-top:10px}
.deep.on{display:flex}
.deep em{font-style:normal;width:8px;height:8px;border-radius:99px;background:var(--primary-x);animation:bl 1.1s infinite}
/* ===== 登録 ===== */
.fm{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:30px 32px}
.fm h1{font-size:25px;margin-bottom:6px}
.fl{display:grid;gap:18px;margin-top:24px}
.f label{display:block;font-size:var(--fs-5);font-weight:700;margin-bottom:6px}
.f label i{font-style:normal;color:var(--red-t);margin-left:4px}
.f label s{text-decoration:none;color:var(--dark6);font-weight:400;margin-left:6px;font-size:var(--fs-6)}
.f input,.f select{width:100%;height:50px;padding:0 14px;background:var(--body);border-radius:var(--r-s);
  box-shadow:inset 0 0 0 1px var(--stroke)}
.f input:focus,.f select:focus{background:var(--white);box-shadow:inset 0 0 0 2px var(--primary);outline:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-5);color:var(--dark4);margin-top:22px}
.agree input{width:20px;height:20px;margin-top:4px;flex:none;accent-color:var(--primary)}
.agree a{color:var(--primary-d);text-decoration:underline;text-underline-offset:2px}
.sub{margin-top:22px}.sub .cta{width:100%}
.side{display:grid;gap:16px}
.ul{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:22px 24px}
.ul b{font-size:var(--fs-3)}
.ul ul{list-style:none;margin-top:12px;display:grid;gap:9px}
.ul li{display:flex;gap:9px;font-size:var(--fs-5);color:var(--dark4);line-height:1.75}
.ul li s{text-decoration:none;color:var(--primary);flex:none;font-weight:700}
/* ===== 完了 ===== */
.peak{text-align:center}
.peak i{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 18px;border-radius:99px;
  background:var(--primary-l);color:var(--primary);font-style:normal}
.peak i svg{width:30px;height:30px}
.peak h1{font-size:29px}
.step{display:grid;grid-template-columns:repeat(4,1fr);margin:34px 0 8px;
  background:var(--white);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.sp{padding:18px 16px;text-align:center;position:relative}
.sp b{display:block;font-size:var(--fs-6);letter-spacing:.1em;color:var(--dark6);font-weight:700}
.sp span{display:block;font-size:var(--fs-5);margin-top:4px;color:var(--dark6)}
.sp.dn b,.sp.dn span{color:var(--primary-d)}
.sp.on b{color:var(--primary)} .sp.on span{color:var(--dark);font-weight:700}
.sp em{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--stroke);font-style:normal}
.sp.dn em,.sp.on em{background:var(--primary)}
.nx{margin-top:26px;display:grid;gap:14px}
.nc{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:22px 26px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.nc__t{flex:1;min-width:220px}
.nc__t b{font-size:var(--fs-3)}
.nc__t p{font-size:var(--fs-5);color:var(--dark5);margin-top:4px;line-height:1.8}
@media(max-width:1023px){
  .hero{grid-template-columns:1fr;gap:34px}.axes{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}.pg{order:-1}
  .tiles{grid-template-columns:repeat(2,1fr)}.facts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  .form{flex-direction:column}.form .cta{width:100%}.axes{grid-template-columns:1fr}
  .q{padding:22px 18px}.q__t{font-size:19px}.opt{font-size:var(--fs-4);min-height:52px;padding:0 14px}
  .tiles,.facts{grid-template-columns:1fr}.rhead__t h1{font-size:21px}.big b{font-size:44px}
  .fm{padding:22px 18px}.fm h1{font-size:20px}.two{grid-template-columns:1fr}
  .peak h1{font-size:22px}.step{grid-template-columns:repeat(2,1fr)}.nc{padding:18px}
  .box h1{font-size:21px}.row{grid-template-columns:84px 1fr 48px;padding:11px 14px}
}