@charset "utf-8";
/* ============================================================
   サブスク成長シミュレーター（/simulator 専用・追加分）
   diagnosis.css を土台に読み込んだうえで、この診断固有の
   ・成長グラフ（SVG）
   ・ポジティブ版ヒーロー（青）／縮小版ヒーロー（橙）
   ・お金の指標（ユニットエコノミクス）ミニカード
   だけを足す。名前空間は diagnosis と同じ .dg- を共有する。
   ============================================================ */

/* ---- ヒーロー：成長=青／縮小=橙 ---- */
.dg .res-hero.grow{ background:linear-gradient(180deg,#f0f9ff,#e6f3fd); border-color:#cfe8f8; }
.dg .res-hero.shrink{ background:linear-gradient(180deg,#fff6ee,#ffeede); border-color:#ffd9b8; }
.dg .res-hero .res-big{ font-size:2.9rem; font-weight:900; line-height:1.08;
  font-family:"Poppins",sans-serif; color:#073b52; }
.dg .res-hero .res-big small{ font-size:1.05rem; font-weight:700; color:#6b7d88; }
.dg .res-hero.grow .res-big{ color:#0561c5; }
.dg .res-hero.shrink .res-big{ color:#d1660f; }
.dg .res-hero .res-year.up{ color:#0288c2; }
.dg .res-hero .res-year.down{ color:#d1660f; }

/* ---- 成長グラフ ---- */
.dg .dg-chart{ margin:2px 0 0; }
.dg .dg-chart__title{ font-weight:800; font-size:1.02rem; color:#26323a; margin:0 0 8px; }
.dg .dg-chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.dg .dg-chart__legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px;
  font-size:.78rem; color:#5a6b75; }
.dg .dg-chart__legend span{ display:inline-flex; align-items:center; gap:6px; }
.dg .dg-chart__legend i{ width:16px; height:0; border-top-width:3px; border-top-style:solid; display:inline-block; }
.dg .dg-chart__legend i.dash{ border-top-style:dashed; }
/* グラフ内テキスト */
.dg .cx-axis{ fill:#8aa1ad; font-size:11px; }
.dg .cx-cap{ font-size:11px; font-weight:700; }
/* 描画アニメ（左→右）。低モーション設定は尊重 */
.dg .cx-line{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:cxDraw 1s ease forwards; }
@keyframes cxDraw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){ .dg .cx-line{ animation:none; stroke-dashoffset:0; } }

/* ---- お金の指標（ユニットエコノミクス）ミニカード ---- */
.dg .dg-kpis{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:2px 0 0; }
.dg .dg-kpi{ background:#f4f9fd; border:1px solid #e3eef5; border-radius:12px; padding:12px 10px; text-align:center; }
.dg .dg-kpi__label{ font-size:.72rem; color:#6b7d88; font-weight:700; line-height:1.4; }
.dg .dg-kpi__value{ font-size:1.12rem; font-weight:900; color:#073b52; margin-top:4px; font-family:"Poppins",sans-serif; }
.dg .dg-kpi.warn{ background:#fff3f2; border-color:#f6c9c4; }
.dg .dg-kpi.warn .dg-kpi__value{ color:#c0392b; }
.dg .dg-kpi.good .dg-kpi__value{ color:#0a7d3c; }
@media (max-width:575px){
  .dg .dg-kpis{ gap:8px; }
  .dg .dg-kpi{ padding:10px 6px; }
  .dg .dg-kpi__value{ font-size:1rem; }
  .dg .res-hero .res-big{ font-size:2.3rem; }
}

/* お金レバーの一言（提案カード内で強調） */
.dg .dg-lever{ font-weight:800; color:#0288c2; }
.dg .res-hero.shrink ~ * .dg-lever{ color:#d1660f; }

/* ---- 診断LP：レポート（報酬サンプル）プレゼント訴求 ---- */
.dg-reward{ max-width:700px; margin:22px auto 0; background:#fff; border:1px solid #e3eef5; border-radius:18px;
  padding:24px 26px 26px; box-shadow:0 20px 50px -34px rgba(1,160,233,.35); text-align:center; }
.dg-reward__badge{ display:inline-block; font-weight:800; font-size:.78rem; color:#fff;
  background:linear-gradient(180deg,#ffb64d,#ff7700); border-radius:99px; padding:6px 14px; letter-spacing:.02em; }
.dg-reward__title{ font-size:1.32rem; font-weight:800; color:#073b52; margin:.7rem 0 0; line-height:1.4; }
.dg-reward__lead{ font-size:.92rem; line-height:1.85; color:#39474f; margin:.7rem auto 0; max-width:600px; text-align:left; }
.dg-reward__lead b{ color:#0561c5; }
.dg-reward__gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0 0; }
.dg-reward__gallery img{ display:block; width:100%; height:auto; border-radius:8px; border:1px solid #e3eef5;
  box-shadow:0 8px 20px -10px rgba(7,59,82,.3); background:#fff; }
.dg-reward__meta{ font-size:.74rem; color:#8aa1ad; line-height:1.7; margin:14px 0 0; }
@media (max-width:575px){
  .dg-reward{ padding:20px 16px 22px; }
  .dg-reward__title{ font-size:1.15rem; }
  .dg-reward__gallery{ gap:9px; }
}

/* ---- 見本サムネのクリック拡大（ライトボックス） ---- */
.dg-zoom{ cursor:zoom-in; }
.dg-zoom:focus-visible{ outline:3px solid #01a0e9; outline-offset:2px; }
.dg-lightbox{ position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(7,25,40,.82); opacity:0; visibility:hidden; transition:opacity .18s ease; }
.dg-lightbox.is-open{ opacity:1; visibility:visible; }
.dg-lightbox img{ max-width:min(1400px,96vw); max-height:92vh; width:auto; height:auto; border-radius:10px;
  background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.4); cursor:zoom-out; }
.dg-lightbox__close{ position:absolute; top:20px; right:24px; width:44px; height:44px; border:none; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.dg-lightbox__close:hover{ background:rgba(255,255,255,.3); }

/* ---- 診断イントロ（LP的ゲート：アイキャッチ画像＋報酬＋「診断を開始する」） ---- */
.dg .dg-intro{ padding:0; }
.dg .dg-intro__eyecatch{ display:block; width:100%; height:auto; }
.dg .dg-intro__inner{ padding:24px 30px 30px; text-align:center; }
.dg .dg-intro__inner .dg-reward__gallery{ grid-template-columns:repeat(3,1fr); max-width:560px; margin:14px auto 0; }
/* イントロ：受け取り方2択（すぐ結果 ／ 詳細レポート無料） */
.dg .dg-intro__ways{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.dg .dg-intro__way{ flex:1 1 240px; max-width:300px; display:flex; align-items:center; gap:11px; text-align:left;
  background:#f4f9fd; border:1px solid #e3eef5; border-radius:12px; padding:12px 15px; }
.dg .dg-intro__way.is-gift{ background:#fff7ee; border-color:#ffe0bd; }
.dg .dg-intro__way svg{ width:26px; height:26px; flex:0 0 auto; fill:none; stroke:#0288c2; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.dg .dg-intro__way.is-gift svg{ stroke:#ef8a1a; }
.dg .dg-intro__way b{ display:block; font-size:.9rem; color:#073b52; font-weight:800; line-height:1.35; }
.dg .dg-intro__way small{ display:block; font-size:.73rem; color:#7c8b95; margin-top:2px; }
.dg .dg-intro__inner .dg-final__uses{ margin-top:12px; }
.dg .dg-intro__start{ margin:22px auto 0; max-width:440px; font-size:1.1rem; padding:17px 24px; }
.dg .dg-intro__ease{ margin:12px 0 0; font-size:.82rem; color:#7c8b95; font-weight:700; }
@media (max-width:575px){
  .dg .dg-intro__inner{ padding:20px 18px 24px; }
  .dg .dg-intro__start{ font-size:1.02rem; }
}

/* 見本PDFへのリンク（イントロの見本サムネ直下） */
.dg-reward__sample{ margin:6px 0 0; text-align:center; }
.dg-reward__sample a{ display:inline-flex; align-items:center; gap:7px; font-size:.9rem; font-weight:700;
  color:#0561c5; text-decoration:underline; text-underline-offset:3px; }
.dg-reward__sample a:hover{ color:#01a0e9; }
.dg-reward__sample svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }