@charset "utf-8";
/* ============================================================
   手作業コスト診断（/diagnosis 専用）
   2025本番のデザイン言語（#01a0e9 / #51bfeb / 橙CTA / .section）に統一
   名前空間は .dg- に集約し、他ページと衝突しないようにする
   ============================================================ */

/* 固定ヘッダー分のオフセット。基底 .section{padding:96px 0 !important} を上書きするため !important が必要 */
.dg-section{ padding-top:170px !important; background:#f4f9fd; }
@media (max-width:991px){ .dg-section{ padding-top:130px !important; } }
@media (max-width:575px){ .dg-section{ padding-top:118px !important; } }

/* ---- カード本体 ---- */
.dg{ max-width:700px; margin:0 auto; background:#fff; border-radius:22px;
  box-shadow:0 30px 70px -34px rgba(1,160,233,.45); overflow:hidden; border:1px solid #e3eef5; }

.dg__head{
  background:
    radial-gradient(520px 200px at 100% 0, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(135deg,#51bfeb 0%,#01a0e9 68%,#0288c2 100%);
  color:#fff; padding:30px 30px 26px; position:relative;
}
.dg__kicker{ display:inline-block; font-family:"Poppins",sans-serif; font-weight:700;
  font-size:.72rem; letter-spacing:.18em; opacity:.95; }
.dg__title{ font-size:1.5rem; font-weight:800; line-height:1.4; margin:.45rem 0 0; color:#fff; }
.dg__lead{ margin:.7rem 0 0; font-size:.9rem; line-height:1.7; opacity:.96; }
.dg__progress{ height:7px; background:rgba(255,255,255,.3); border-radius:99px; margin-top:20px; overflow:hidden; }
.dg__progress > span{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,#ffd64d,#ffc527); border-radius:99px;
  transition:width .4s cubic-bezier(.4,0,.2,1); box-shadow:0 0 12px rgba(255,200,40,.6); }

.dg__body{ padding:30px; }

/* ---- 質問 ---- */
.dg .qcount{ color:#0288c2; font-weight:800; font-size:.76rem; letter-spacing:.1em;
  font-family:"Poppins",sans-serif; }
.dg .qtitle{ font-weight:800; font-size:1.18rem; line-height:1.55; margin:6px 0 4px; color:#26323a; }
.dg .opt{ display:flex; align-items:center; width:100%; text-align:left;
  border:2px solid #e3eef5; background:#fff; border-radius:13px; padding:14px 18px; margin-top:11px;
  font-weight:600; font-size:1rem; color:#26323a; cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s; }
.dg .opt::before{ content:""; flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  border:2px solid #cfe0ea; margin-right:.7em; transition:.15s; }
.dg .opt:hover{ border-color:#51bfeb; background:#f4fbff; transform:translateX(3px); }
.dg .opt:hover::before{ border-color:#01a0e9; background:radial-gradient(circle,#01a0e9 0 40%,#fff 45%); }

.dg .nav-row{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; }
.dg .btn-back{ background:none; border:none; color:#8aa1ad; font-weight:700; cursor:pointer;
  transition:color .15s; padding:4px 2px; }
.dg .btn-back:hover{ color:#0288c2; }
.dg .btn-back:disabled{ opacity:0; cursor:default; }

/* ---- 結果 ---- */
.dg .res-hero{ text-align:center; padding:22px 18px 20px; margin-bottom:6px;
  background:linear-gradient(180deg,#f0f9ff,#e6f3fd); border:1px solid #cfe8f8; border-radius:16px; }
.dg .res-label{ color:#0288c2; font-weight:800; font-size:.82rem; letter-spacing:.06em; }
.dg .res-cost{ font-size:2.7rem; font-weight:900; line-height:1.1; font-family:"Poppins",sans-serif; color:#073b52; }
.dg .res-cost small{ font-size:1rem; font-weight:700; color:#6b7d88; }
.dg .res-year{ font-weight:800; color:#d9534f; font-size:1.05rem; margin-top:6px; }
.dg .res-sub{ color:#6b7d88; font-size:.9rem; line-height:1.8; margin-top:8px; }

.dg .res-card{ border:1px solid #e3eef5; border-left:4px solid #01a0e9; border-radius:14px;
  padding:16px 18px; margin-top:14px; background:#f8fcff; }
.dg .res-card.risk{ background:linear-gradient(180deg,#fff9ec,#fff3d6); border-color:#ffe2a8; border-left-color:#f0b000; }
.dg .res-card.dg-type{ background:linear-gradient(180deg,#eef9ff,#e2f3fd); border-color:#bfe6f7; border-left-color:#01a0e9; }
.dg .res-card.dg-type h4{ color:#0561c5; }
.dg .res-card h4{ font-size:1rem; font-weight:800; margin:0 0 8px; color:#26323a;
  display:flex; align-items:center; gap:10px; }

/* 見出しアイコンバッジ */
.dg .res-ico{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; background:#01a0e9; color:#fff; }
.dg .res-ico svg{ width:17px; height:17px; }
.dg .res-card.risk .res-ico{ background:#f0b000; }

/* おすすめプラン＝結果のclimax（CTA直前で視線を集約） */
.dg .res-card.plan{ background:linear-gradient(165deg,#0a4a63,#073b52); border:1px solid #073b52;
  border-left:4px solid #ffc828; margin-top:18px; }
.dg .res-card.plan h4{ color:#fff; }
.dg .res-card.plan div{ color:#dce9f1; }
.dg .res-card.plan .res-ico{ background:rgba(255,255,255,.16); }
.dg .res-card.plan .res-sub{ color:#a9c4d4; }
.dg .res-card.plan .pill{ background:linear-gradient(180deg,#ffd64d,#ffc527); color:#073b52; }
.dg .res-card div{ font-size:.94rem; line-height:1.85; color:#39474f; }
.dg .pill{ display:inline-flex; align-items:center; background:linear-gradient(180deg,#5fc9ee,#0288c2);
  color:#fff; font-weight:800; border-radius:99px; padding:5px 16px; }
.dg .save-line{ font-weight:800; color:#0288c2; }

/* 結果のCTA */
.dg .res-actions{ margin-top:20px; }
.dg .dg-btn{ display:block; width:100%; text-align:center; border-radius:99px; font-weight:800;
  padding:15px 22px; font-size:1.05rem; text-decoration:none; box-sizing:border-box; transition:.15s; }
.dg .dg-btn--main{ color:#fff; background-image:linear-gradient(150deg,rgb(252,176,108),rgb(255,119,0));
  border:2px solid #d78d04; box-shadow:0 8px 20px -6px rgba(255,119,0,.5); }
.dg .dg-btn--main:hover{ filter:brightness(1.03); transform:translateY(-2px); }
.dg .dg-btn--ghost{ color:#0561c5; background:#fff; border:2px solid #51bfeb; margin-top:10px; cursor:pointer; }
.dg .dg-btn--ghost:hover{ background:#f4fbff; }
.dg .dg-note{ text-align:center; color:#8aa1ad; font-size:.8rem; margin-top:8px; }

.dg .mail-box{ display:none; margin-top:12px; }
.dg .mail-box .input-group input{ border:2px solid #e3eef5; }

.dg-disc{ max-width:700px; margin:18px auto 0; color:#8aa1ad; font-size:.78rem; line-height:1.8; text-align:center; }

@media (max-width:575px){
  .dg__head{ padding:24px 20px 22px; }
  .dg__title{ font-size:1.28rem; }
  .dg__body{ padding:22px 18px; }
  .dg .res-cost{ font-size:2.2rem; }
}