/* =========================
   Design Tokens
========================= */
:root{
  --brand:#FF7A00;
  --accent:#00B7A5;

  /* CTA blues */
  --cta-blue-1:#3A7BFF;
  --cta-blue-2:#1740C8;
  --cta-blue-shadow:#0e2d94;

  /* text & surfaces */
  --ink:#111;
  --muted:#60646C;
  --bg:#FFFFFF;
  --surface:#F7FAF9;
  --surface-2:#EEF7F5;

  /* borders, shadows, radius */
  --border:#E6ECEB;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
  --radius-xl:18px;

  /* accents */
  --headline-blue:#356AC1;

  /* layout */
  --phone:428px;
  --side:16px;
}

/* =========================
   Base
========================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.container{ max-width:var(--phone); margin:0 auto; padding:0 var(--side); }
main>section{ padding:40px 0 }
.sec-title{ font-size:24px; line-height:1.3; text-align:center; margin:0 0 20px }

/* =========================
   Header / Footer
========================= */
.site-header{ position:sticky; top:0; background:#fff; border-bottom:1px solid var(--border); z-index:5 }
.site-header .container{ display:flex; align-items:center; height:52px }
.logo__img{ display:block; }
.site-header .logo{ height:84px; display:inline-flex; align-items:center; line-height:0 }
.site-header .logo__img{ height:100%; width:auto }
.site-footer{ padding:32px 0; border-top:1px solid var(--border); text-align:center; color:var(--muted) }

/* =========================
   FV
========================= */
.fv{ padding:0 }
.fv__visual{
  position:relative; min-height:560px; overflow:hidden;
  border-radius:0 0 28px 28px;
}

/* 画像を全面に敷く */
.fv__visual picture,
.fv__visual .fv__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}

.fv__inner{ position:relative; z-index:1 } /* テキスト/CTA は画像の上に */

.fv__inner{ position:relative; z-index:1; padding:28px 0 18px }
.fv__inner--wide{ padding:40px 24px 24px }

/* Headlines */
.fv-headlines{ display:grid; gap:4px; margin:0 0 10px; font-family:"Hiragino Kaku Gothic ProN" }
.hl-block{
  margin:0 0 5px; display:inline-block; background:#fff; color:var(--headline-blue);
  padding:2px 2px; font-weight:900; font-size:28px; line-height:1.05; letter-spacing:-0.01em; width:max-content;
}

/* Tags */
.tags{ list-style:none; margin:6px 0 12px; padding:0; display:grid; gap:6px }
.tags__item{
  display:inline-block; color:#0F172A; background:rgba(255,255,255,.92);
  border:1px solid rgba(37,99,235,.25); padding:6px 10px; border-radius:999px;
  font-weight:700; font-size:14px; line-height:1; width:max-content;
}

/* Bubbles */
.bubbles{ list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.bubble{
  width:105px; height:105px; margin:0 auto; border-radius:50%;
  background:rgba(254,237,49,0.85); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8px 6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.bubble__cap{ font-size:13px; font-weight:600; line-height:1.2; color:#1b1b1b }
.bubble__num{ font-size:22px; font-weight:900; line-height:1.1; color:#06C755; margin-top:2px }
.bubble__sub{ font-size:12px; font-weight:600; color:#1b1b1b }
.bubble__sub--accent{ color:#06C755; font-weight:800 }

/* =========================
   FV Lead（背景パネル）
========================= */
.fv-lead{ display:grid; gap:7px; margin:14px 0 12px; text-align:left; }
.fv-lead--panel{
  background:rgba(255,255,255,.7);
  backdrop-filter:saturate(110%) blur(2px);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  border-radius:16px;
  padding:16px;
}
.fv-lead__title{ margin:0; font-size:20px; line-height:1.5; font-weight:900; color:#0F172A; text-wrap:balance; }
@media (min-width:390px){ .fv-lead__title{ font-size:22px } }
.fv-lead__sub{ margin:0; font-size:14px; color:#3b3f46; font-weight:700; }

/* ／1分でできる／ */
.pill{
  display:inline-block; padding:6px 12px; border-radius:999px;
  font-weight:900; font-size:12px; letter-spacing:.04em;
  color:#1740C8; background:rgba(23,64,200,.09); width:max-content; margin-top:4px;
}

/* =========================
   CTA
========================= */
.cta{ margin:5px 0 }
.cta--center{ display:grid; place-items:center; }
.cta__link{
  display:block; position:relative; border-radius:14px; text-decoration:none; color:#fff;
  padding:14px 18px; min-width: 280px; text-align:center; font-weight:800; line-height:1;
}
.cta__link--compact{ max-width:320px; width:100% }
.cta__link--blue{ background:linear-gradient(180deg, var(--cta-blue-1), var(--cta-blue-2)); box-shadow:0 6px 0 var(--cta-blue-shadow), 0 14px 24px rgba(0,0,0,.15); }
.cta__link:active{ transform:translateY(1px); box-shadow:0 5px 0 var(--cta-blue-shadow), 0 8px 16px rgba(0,0,0,.12) }
.cta__text{ display:inline-block; font-size:18px; color:#fff; white-space:nowrap; text-align:center; }
@media (min-width:390px){ .cta__text{ font-size:20px } }

/* =========================
   Section Title (Voices)
========================= */
.section-title{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:20px auto 12px; font-weight:900; font-size:18px; letter-spacing:.05em; text-align:center;
}
.section-title span{
  background:linear-gradient(180deg, #0274ee, #1740C8);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.section-title::before, .section-title::after{
  content:""; display:block; width:56px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, #0274ee, #1740C8); transform:skewX(-25deg);
  box-shadow:0 0 0.5px rgba(0,0,0,.1);
}
.section-title::after{ transform:skewX(25deg) scaleX(-1) }
@media (max-width:360px){ .section-title::before, .section-title::after{ width:44px } }

/* =========================
   Voice Card
========================= */
.voice-card{
  margin:14px; padding:14px 14px 16px; background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow);
  border:1px solid rgba(23,64,200,.08);
}
.voice-card__head{ display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center }
.voice-card__avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.08) }
.voice-card__line1{ font-weight:800; font-size:13px; color:var(--muted) }
.voice-card__line2{ font-weight:900; font-size:14px }
.voice-card__badge{padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;white-space:nowrap;background:#FFF6DB;color:#7A4E00;border:1px solid #F4DE9A;box-shadow:none;cursor:default;transition:none;}

.voice-card__figures{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 8px }
.fig{ background:#F2F5FF; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; align-items:flex-start; border:1px solid rgba(23,64,200,.10) }
.fig--before{ background:#EEF2FA }
.fig--after{ background:#FFF7EA; border-color:rgba(255,149,0,.25) }
.fig__label{ font-weight:800; font-size:12px; color:var(--muted); margin-bottom:2px }
.fig__value{ font-weight:900; font-size:22px; line-height:1 }
.fig__unit{ font-size:.55em; margin-left:.15em }
.fig__value--gold{
  background:linear-gradient(180deg,#edb703,#d48600 70%,#7d4900);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 1px rgba(255,255,255,.4);
}
.voice-card__quote{ margin:8px 2px 0; font-size:13.5px }
@media (min-width:390px){
  .voice-card{ padding:16px 16px 18px }
  .voice-card__avatar{ width:56px; height:56px }
  .voice-card__badge{ font-size:13px; padding:7px 12px }
  .fig__value{ font-size:24px }
}

/* =========================
   Worries
========================= */
.worries{ padding:40px 0; background:#fff }
.worries-title{ margin:0 0 18px; font-weight:800; font-size:24px; line-height:1.35; color:#111; text-wrap:balance; }
.marker{
  --marker-h:.30em; --marker-offset:.08em;
  background-image:linear-gradient(#FFEB59, #FFEB59); background-repeat:no-repeat;
  background-size:100% var(--marker-h); background-position:0 calc(100% - var(--marker-offset));
  box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 .02em;
}
.worries-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px }
.worry{
  display:grid; grid-template-columns:44px 1fr; align-items:center; gap:12px; padding:14px 12px;
  border-radius:12px; background:#fff; border:1px solid #E7E7EA; box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.worry__icon{ width:44px; height:44px; border-radius:50%; background:#F2F4F7; display:grid; place-items:center; overflow:hidden }
.worry__icon img{ width:78%; height:78%; object-fit:contain; display:block }
.worry__text{ margin:0; color:#111; font-weight:800; font-size:18px; line-height:1.4 }
@media (max-width:360px){
  .worry{ grid-template-columns:40px 1fr; padding:12px 10px }
  .worry__text{ font-size:16px }
}

/* =========================
   Reasons
========================= */
.reasons{ background:var(--surface); padding-top:28px }
.reason-card{ border:1.5px solid #BEE3DD; border-radius:18px; padding:18px; background:#fff; margin:16px 0 }
.chip{ display:inline-block; background:#DFF3EF; color:#03665C; border:1px solid #BEE3DD; border-radius:999px; padding:4px 10px; font-weight:800; font-size:12px; margin-bottom:8px }
.reason-card__title{ margin:6px 0 6px; font-size:18px; line-height:1.4 }
.reason-card__text{ margin:0; color:var(--ink); font-size:14px }
.illu-img{ width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow); display:block; margin-top:12px }

/* =========================
   Flow
========================= */
.flow{ background:var(--surface-2) }
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.step-card{ background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px; text-align:center }
.step-card__badge{ display:inline-block; background:#E6FAF3; color:#0E7A5E; border:1px solid #BAE8D7; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700 }
.step-card__title{ font-size:16px; line-height:1.5; margin:6px 0 0 }
.step-card__img{ width:60px; aspect-ratio:1/1; height:auto; border-radius:999px; object-fit:cover; display:block; margin:16px auto; box-shadow:0 2px 10px rgba(0,0,0,.06) }

/* =========================
   FAQ
========================= */
.qa{ border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--border); margin:12px 0 }
.qa__summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px 16px; background:#00A090; color:#fff; font-weight:700 }
.qa__summary::-webkit-details-marker{ display:none }
.qa__q{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:999px; background:#fff; color:#00A090; font-weight:900 }
.qa[open]>.qa__summary{ border-bottom:1px solid rgba(255,255,255,.25) }
.qa__body{ padding:14px 16px; color:var(--ink); background:#fff }

/* =========================
   Sticky CTA
========================= */
.sticky-cta{ position:sticky; bottom:0; z-index:5; background:#fff; border-top:1px solid var(--border); padding:7px 0 }
.sticky-cta__row{ display:flex; align-items:center; gap:8px }
.sticky-cta__copy{ flex:1 1 auto; font-size:14px; color:#4b4f56 }
.btn{
  display:inline-block; padding:10px 12px; border-radius:12px; text-decoration:none; font-weight:800; text-align:center;
  color:#fff; background:linear-gradient(180deg,var(--cta-blue-1),var(--cta-blue-2));
  box-shadow:0 4px 0 var(--cta-blue-shadow), 0 10px 18px rgba(0,0,0,.12);
  font-size:15px;
}
.btn:active{ transform:translateY(1px); box-shadow:0 3px 0 var(--cta-blue-shadow), 0 6px 12px rgba(0,0,0,.10) }
.btn--blue{}

/* =========================
   Desktop guard
========================= */
@media (min-width:600px){
  .fv__visual, .voices, .sticky-cta, .site-footer{ max-width:var(--phone); margin-inline:auto; width:100% }
  .voices{ padding-inline:var(--side) }
  .section-title{ max-width:var(--phone); margin-left:auto; margin-right:auto }
}

/* Motion reduce */
@media (prefers-reduced-motion:reduce){
  .btn, .cta__link{ transition:none }
}

/* ===== Diagnosis Modal ===== */
.diag::backdrop{background:rgba(0,0,0,.45)}
.diag{border:none;padding:0;width:min(420px,92vw);margin:auto;border-radius:16px;box-shadow:var(--shadow);background:#fff}
.diag__panel{padding:18px 16px 16px}
.diag__hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.diag__title{margin:0;font-size:18px;font-weight:900}
.diag__close{appearance:none;border:1px solid var(--border);background:#fff;border-radius:10px;width:32px;height:32px;font-weight:900;cursor:pointer}
.diag__lead{margin:4px 0 12px;color:var(--muted);font-size:13px}
.diag__progress{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.diag__bar{flex:1 1 auto;height:8px;border-radius:999px;background:#EEF2FA;overflow:hidden}
.diag__barFill{display:block;height:100%;width:0%;background:linear-gradient(180deg,var(--cta-blue-1),var(--cta-blue-2))}
.diag__stepText{font-size:12px;font-weight:800;color:#4b4f56;min-width:40px;text-align:right}
.diag__qwrap{display:grid;gap:0px}
.diag__q{margin:0 0 4px;font-weight:900;font-size:16px;line-height:1.3}
.diag__opts{display:grid;gap:10px;margin-top:6px}
.diag__opt{display:flex;gap:12px;align-items:center;width:100%;padding:10px;text-align:left;border-radius:12px;cursor:pointer;border:1px solid var(--border);background:#fff;font-weight:800}
.diag__optKey{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:#EEF2FA;color:#173a9b;font-weight:900;flex:0 0 auto}
.diag__optText{line-height:1.3;font-size:16px}
.diag__opt[aria-pressed="true"]{border-color:#8db0fd;background:#cddafe;box-shadow:0 0 0 2px rgba(23,64,200,.08) inset}
.diag__nav{display:flex;gap:10px;margin-top:14px;justify-content:center}
.diag .btn{font-size:16.5px;padding:12px 14px}
.btn[disabled]{opacity:.5;pointer-events:none}
.diag__result{text-align:center;margin-top:10px}
.diag__resultTitle{font-size:20px;margin:12px 0 8px}
.diag__resultText{color:#4b4f56;margin:0 0 14px}
.diag__mini{font-size:12px;color:#6b7280;margin-top:8px}

/* ===== Exit Popup (result-only) ===== */
.exitpop{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);z-index:50}
.exitpop[hidden]{display:none}
.exitpop__card{position:relative;width:min(420px,92vw);background:linear-gradient(180deg,#2e4a86,#243a6a);color:#fff;border-radius:20px;padding:20px 16px 18px;box-shadow:0 24px 40px rgba(0,0,0,.35)}
.exitpop__close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:999px;border:none;background:rgba(255,255,255,.2);color:#fff;font-size:18px;cursor:pointer}
.exitpop__title{margin:6px 0 6px;font-size:22px;font-weight:900;text-align:center}
.exitpop__lead{text-align:center;color:#e0e8ff;margin:0 0 14px}
.exitpop__linebox{display:flex;align-items:center;gap:12px;background:#fff;color:#1f2937;border-radius:14px;padding:10px 12px;margin:6px 0 12px}
.exitpop__lineLogo{font-weight:900;background:#00c300;color:#fff;border-radius:10px;padding:6px 8px}
.exitpop__lineText{font-weight:800;color:#d946ef;opacity:.85}
.exitpop__benefits{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:12px;margin:0 0 12px}
.exitpop__list{margin:0;padding-left:20px}
.exitpop__list li{margin:6px 0}
.exitpop__primary{display:block;text-align:center;margin:2px 0 10px}
.exitpop__later{display:block;margin:0 auto 6px;color:#cbd5e1;background:none;border:none;font-weight:800}
.exitpop__note{text-align:center;color:#cbd5e1;font-size:12px;margin:0}

[hidden]{ display:none !important; }
/* ===== Mid Exit Popup (診断途中用) ===== */
.exitpop--mid{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.55); z-index:60; }
.exitpop--mid[hidden]{ display:none; }

.exitpop__card--mid{
  position:relative;
  width:min(420px,92vw);
  background:linear-gradient(180deg,#0b7a6a,#0a5f53); /* 緑系 */
  color:#fff;
  border-radius:20px;
  padding:20px 16px 18px;
  box-shadow:0 24px 40px rgba(0,0,0,.35);
}

.exitpop--mid .exitpop__title{
  margin:6px 0 6px;
  font-size:20px;
  font-weight:900;
  text-align:center;
}
.exitpop--mid .exitpop__lead{
  text-align:center;
  color:#d5fff7;
  margin:0 0 14px;
  font-weight:700;
}
.exitpop--mid .exitpop__close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:999px;
  border:none; background:rgba(255,255,255,.2); color:#fff;
  font-size:18px; cursor:pointer;
}
.exitpop--mid .exitpop__actions{ display:grid; gap:10px; }
.exitpop--mid .exitpop__primary{
  display:block; text-align:center;
  margin:2px 0 4px;
  background:#fff; color:#0a5f53; /* 反転ボタン */
  box-shadow:none;
}
.exitpop--mid .exitpop__later{
  display:block; margin:0 auto 4px; color:#cfe8e4; background:none; border:none; font-weight:800;
}

/* Footer (dark) */
.site-footer--dark{
  background:#234163; /* 濃い青 */
  padding:28px 0 40px; /* 下に少し余白 */
  color:#E8F0F8;
}
.footer__inner{ text-align:center; }
.footer__nav{
  display:flex; justify-content:center; align-items:center;
  gap:14px; flex-wrap:wrap; margin-bottom:8px;
  font-weight:700; font-size:14px;
}
.footer__link{
  color:#E8F0F8; text-decoration:none; opacity:.95;
}
.footer__link:hover{ text-decoration:underline; }
.footer__sep{ opacity:.55; }
.footer__copy{
  display:block; font-size:13px; opacity:.9;
}

/* もし既存の site-footer の境界線が残る場合は無効化 */
.site-footer.site-footer--dark{ border-top:none; }