@charset "utf-8";

/* ============================================================
   diagnosis.css — 東邦ガスくらしマイショップ入会診断 専用スタイル

   ・既存の base.css / project.css の共通基盤の上に載せる
   ・myshop.css には依存しない
   ・クラス接頭辞は dg- で統一し、既存クラスと衝突させない
   ・ブランド要素（色・書体・角丸・CTA）は既存コードから踏襲する
   ============================================================ */

:root {
  --dg-blue: #004da0;      /* project.css の --main-blue と同値 */
  --dg-blue-sub: #009cd0;  /* 現行 #procedure の背景色 */
  --dg-cyan: #17cae5;      /* 現行 #membership の番号バッジ色 */
  --dg-beige: #f8f3f1;     /* 現行 #membership / .more の背景色 */
  --dg-line: #d8e2ee;
  --dg-ink: #14293f;
  --dg-muted: #5b7189;

  /* 診断ゾーンと、その上に載る要素の配色 */
  --dg-stage-bg: var(--dg-blue);          /* 診断ゾーンの面 */
  --dg-on-stage: #fff;                    /* 面に載る文字（強） */
  --dg-on-stage-strong: #fff;             /* 面に載る大見出し */
  --dg-on-stage-soft: rgba(255, 255, 255, .85);  /* 同（弱） */
  --dg-on-stage-faint: rgba(255, 255, 255, .75); /* 同（最弱）・罫線 */
  --dg-on-stage-hairline: rgba(255, 255, 255, .6); /* 面上の細い枠線 */

  /* 開始ボタン（面の上に置くため、面の色に合わせて変える） */
  --dg-start-border: #fff;
  --dg-start-bg: transparent;
  --dg-start-color: #fff;
  --dg-start-hover-bg: #fff;
  --dg-start-hover-color: var(--dg-blue);

  /* 判定バッジ・アイコン（結果の種別ごと） */
  --dg-tone-ok-bg: #e8f6ee;
  --dg-tone-ok-fg: #0f7a43;
  --dg-tone-ok-icon: #12994f;
  --dg-tone-step-bg: #e6f5fc;
  --dg-tone-step-fg: #0b6c93;
  --dg-tone-step-icon: var(--dg-blue-sub);
  --dg-tone-ng-bg: #eef1f5;
  --dg-tone-ng-fg: #46586c;
  --dg-tone-ng-icon: #8fa3b8;
}

/* クリック／タップ時に一瞬だけ黒（PC）やオレンジ（SPの一部ブラウザ）の
   枠が見えてしまう対策。base.css（Bootstrap Reboot由来・変更不可）に
   `button:focus { outline: 5px auto -webkit-focus-ring-color; }` があり、
   キーボード操作以外のフォーカス（クリック・タップ）でもこの既定アウトラインが
   一瞬入ってしまうのが原因。ここでは「キーボード操作ではないフォーカス」
   （:focus はつくが :focus-visible にはならない場合）だけアウトラインを消し、
   キーボード操作時の水色アウトライン（各要素の :focus-visible）はそのまま残す。
   これにより、クリック・タップ時は既存のホバーと同じ青い枠線のままになる。 */
.dg-choice:focus:not(:focus-visible),
.dg-btn:focus:not(:focus-visible),
.dg-textlink:focus:not(:focus-visible),
.dg-answers__ttl:focus:not(:focus-visible),
.dg-ctas .link-btn a:focus:not(:focus-visible),
.dg-step .link-btn a:focus:not(:focus-visible) {
  outline: none;
}

/* ---------------- ヘッダー ---------------- */
header {
  background: #fff;
}

/* ---------------- レイアウト ---------------- */

.dg-main {
  padding-top: 130px;      /* 固定ヘッダーぶん */
  padding-bottom: 40px;
  background: #fff;
}

/* 診断ゾーン。ページ内で独立した面として見せる */
.dg-stage {
  padding: 40px 0 76px;
  border-radius: 0 0 48px 48px;
  background: var(--dg-stage-bg);
}

/* ページタイトルはあくまで案内。主役は診断カード（Q番号・設問・選択肢）
   なので、タイトルは控えめにして早くカードへ視線が移るようにする。 */
.dg-head {
  margin-bottom: 22px;
  text-align: center;
  color: var(--dg-on-stage);
}

.dg-head__title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--dg-on-stage);
  /* 日本語の文節単位で折り返す（非対応ブラウザは通常の折り返しになる） */
  word-break: auto-phrase;
}

.dg-head__lead {
  margin-top: 8px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--dg-on-stage-soft);
  word-break: auto-phrase;
}

/* ---------------- カード ---------------- */

.dg-card {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 60px 52px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(0, 45, 95, .35);
  /* この診断コンテンツの最小高さ＝Q1の高さ（2026-08-31指示）。
     開始画面・対象外結果など要素の少ない画面でも、画面が変わるたびに
     診断ゾーンの高さが大きく変わらないようにする。
     値は diagnosis-ui.js が実測して .dg-stage へ渡す（PC/SPで異なるため）。
     未計測時（JS無効時等）は 0 のまま＝従来どおりコンテンツに応じた高さ。 */
  min-height: var(--dg-min-card-h, 0);
}

/* 開始画面と結果画面は白いカードを使わず、青い面の上に直接置く。
   設問画面（白カード）との差で「画面が変わった」ことを伝える。 */
.dg-card--intro,
.dg-card--result {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ---------------- 設問 ----------------
   進行状況バーは置かない。
   回答内容によっては途中で終了しCVへ至るため、残り設問数の予告が実態と合わない。 */

.dg-qnum {
  margin-bottom: 10px;
  color: var(--dg-blue);
  font-family: 'Barlow', sans-serif;
  font-size: 4.4rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-align: center;
}

.dg-question {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  color: var(--dg-ink);
  word-break: auto-phrase;
}

.dg-qnote {
  margin-top: 12px;
  color: var(--dg-muted);
  font-size: 1.4rem;
  line-height: 1.7;
  text-align: center;
}

/* ---------------- 選択肢 ---------------- */

.dg-choices {
  margin-top: 34px;
}

.dg-choices > li + li {
  margin-top: 14px;
}

.dg-choice {
  display: block;
  position: relative;
  width: 100%;
  padding: 22px 64px 22px 30px;
  border: 2px solid var(--dg-line);
  border-radius: 18px;
  background: #fff;
  color: var(--dg-ink);
  font-family: inherit;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s, background-color .3s, color .3s, box-shadow .3s;
}

.dg-choice:hover {
  border-color: var(--dg-blue);
  background: #f2f8ff;
}

.dg-choice:focus-visible {
  outline: 3px solid var(--dg-cyan);
  outline-offset: 3px;
}

/* 前回の回答（戻ってきたときの手がかり）
   ホバー状態と紛らわしくなるため、枠線・背景は変えず
   「前回の回答」バッジ（.dg-choice__mark）だけで示す。 */

/* 「進む」ことが分かる矢印（CSSのみ。アイコンフォントに依存しない） */
.dg-choice::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 28px;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-top: 2px solid var(--dg-blue);
  border-right: 2px solid var(--dg-blue);
  transform: rotate(45deg);
  transition: right .3s;
}

.dg-choice:hover::after {
  right: 22px;
}

.dg-choice:disabled {
  cursor: default;
}

/* 選択直後の一瞬の確認表示（全設問共通）。
   「押した」ことが分かるよう塗りつぶし、矢印をチェックマークへ切り替える。 */
.dg-choice--confirming {
  border-color: var(--dg-blue);
  background: var(--dg-blue);
  color: #fff;
}

.dg-choice--confirming .dg-choice__items li {
  color: rgba(255, 255, 255, .85);
}

.dg-choice--confirming::after {
  top: 50%;
  right: 30px;
  width: 9px;
  height: 15px;
  margin-top: -9px;
  border-top: 0;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
}

/* ラベルとバッジをまとめて横並びにする箱。
   選択肢に説明文（.dg-choice__items）が続く場合でも、
   バッジは常にタイトルの隣に来る（説明文の下に流れ落ちない）。 */
.dg-choice__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* 前回の回答バッジ */
.dg-choice__mark {
  display: inline-block;
  flex: 0 0 auto;
  padding: 3px 12px;
  border-radius: 12px;
  background: var(--dg-cyan);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
}

/* 選択肢の内訳（対象料金メニュー等） */
.dg-choice__items {
  margin-top: 10px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.85;
}

.dg-choice__items li {
  padding-left: 1em;
  text-indent: -1em;
  color: var(--dg-muted);
  transition: color .3s;
}

.dg-choice__items li::before {
  content: '・';
}

/* ---------------- 操作ボタン ---------------- */

.dg-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 38px;
}

.dg-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: 200px;
  height: 62px;
  padding: 0 34px;
  border: 2px solid var(--dg-blue);
  border-radius: 31px;
  background: var(--dg-blue);
  color: #fff;
  font-family: inherit;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: .3s;
}

.dg-btn:hover:not(:disabled) {
  background: #fff;
  color: var(--dg-blue);
}

.dg-btn:focus-visible {
  outline: 3px solid var(--dg-cyan);
  outline-offset: 3px;
}

.dg-btn:disabled {
  border-color: #d3dce6;
  background: #d3dce6;
  color: #fff;
  cursor: not-allowed;
}

.dg-btn--ghost {
  min-width: 150px;
  border-color: #b9cbdd;
  background: #fff;
  color: var(--dg-muted);
}

.dg-btn--ghost:hover:not(:disabled) {
  border-color: var(--dg-blue);
  background: #fff;
  color: var(--dg-blue);
}

.dg-btn--ghost:disabled {
  border-color: #e6ecf2;
  background: #fff;
  color: #c3ced9;
}

/* コンバージョンカラー（既存サイトのCTAと同じブランドブルー塗り）。
   結果画面で「最初からやり直す」だけに使い、「前の質問へ戻る」と区別する。 */
.dg-btn--cv {
  border-color: var(--dg-blue);
  background: var(--dg-blue);
  color: #fff;
}

.dg-btn--cv:hover:not(:disabled) {
  background: #fff;
  color: var(--dg-blue);
}

/* ============================================================
   診断開始画面（data.intro があるときだけ表示）
   ============================================================ */

/* 青い面に白文字で置く（白カードは使わない）。
   .dg-card の min-height（Q1の高さ）に対して、中身（見出し・開始ボタン・くらしベア）が
   上下左右中央になるよう配置する（2026-08-31指示）。
   横方向は従来どおり text-align: center。縦方向は flex の主軸中央寄せで揃える
   （align-items は既定の stretch のまま＝子の横幅・text-align の効きは変えない）。
   上下のpaddingは、以前は下に注記文（削除済み）の分だけ広く取っていた名残で
   非対称だった（24px/40px）。中央寄せと矛盾するため、対称な値に揃える。 */
.dg-card--intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  color: var(--dg-on-stage);
}

.dg-intro__eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  padding: 6px 20px;
  border: 1px solid var(--dg-on-stage-hairline);
  border-radius: 16px;
  color: var(--dg-on-stage);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
}

/* サブコピー（小）→ 見出し（大）の順で見せる */
.dg-intro__sub {
  margin-bottom: 6px;
  color: var(--dg-on-stage-soft);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5;
  word-break: auto-phrase;
}

.dg-intro__heading {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--dg-on-stage-strong);
  word-break: auto-phrase;
}

/* 診断名を「東邦ガスくらしマイショップ」「入会診断」の2つのかたまりに分け、
   かたまりの内側では折り返させない。幅が足りるPCでは1行のまま、
   足りないSPではこの区切りで折り返るため、「断」だけが次行へ落ちない。 */
.dg-intro__heading-part {
  display: inline-block;
  white-space: nowrap;
}

.dg-intro__body {
  margin-top: 20px;
  font-size: 1.7rem;
  line-height: 1.9;
  color: var(--dg-on-stage-soft);
  word-break: auto-phrase;
}

/* 診断面の上に置く開始ボタン */
.dg-btn--start {
  min-width: 320px;
  height: 72px;
  border-color: var(--dg-start-border);
  background: var(--dg-start-bg);
  color: var(--dg-start-color);
  font-size: 2rem;
}

.dg-btn--start:hover:not(:disabled) {
  background: var(--dg-start-hover-bg);
  color: var(--dg-start-hover-color);
}

.dg-intro__note {
  max-width: 40em;
  margin: 22px auto 0;
  color: var(--dg-on-stage-faint);
  font-size: 1.3rem;
  line-height: 1.7;
  text-align: left;
}

.dg-actions--single {
  justify-content: center;
}

/* ============================================================
   結果
   ============================================================ */

/* --- 判定 --- */

.dg-result__head {
  padding: 8px 20px 34px;
  text-align: center; /* 判定バッジ（inline-flex）を中央に置く */
  color: var(--dg-on-stage); /* 面の上に置くため、面の色に応じて変わる */
}

/* 「診断結果」の見出し。ここが白いパネルの外にあることで
   設問画面から画面が変わったことを伝える。
   囲みバッジだと「小さな補助ラベル」に見えて画面の切り替わりを伝えきれないため、
   囲みを外して見出しとして立てる（下の罫線で区切りを示す）。 */
.dg-result__label {
  display: block;
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 16px;
  color: var(--dg-on-stage);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
}

.dg-result__label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 44px;
  height: 2px;
  margin-left: -22px;
  border-radius: 1px;
  background: var(--dg-on-stage-faint);
}

/* 判定バッジ。結果の性質を色と記号で最初に伝える */
.dg-result__verdict {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 28px 12px 22px;
  border-radius: 32px;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.dg-result__verdict-text {
  word-break: auto-phrase;
}

/* 記号はCSSのみで作る（アイコンフォントに依存させない） */
.dg-result__icon {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

/* 入会できる：チェック */
[data-tone="ok"] .dg-result__verdict {
  background: var(--dg-tone-ok-bg);
  color: var(--dg-tone-ok-fg);
}

[data-tone="ok"] .dg-result__icon {
  background: var(--dg-tone-ok-icon);
}

[data-tone="ok"] .dg-result__icon::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 10px;
  width: 8px;
  height: 14px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
}

/* 切り替えが必要：矢印 */
[data-tone="step"] .dg-result__verdict {
  background: var(--dg-tone-step-bg);
  color: var(--dg-tone-step-fg);
}

[data-tone="step"] .dg-result__icon {
  background: var(--dg-tone-step-icon);
}

[data-tone="step"] .dg-result__icon::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 9px;
  width: 9px;
  height: 9px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}

/* 対象外：横棒（×は拒絶感が強いため） */
[data-tone="ng"] .dg-result__verdict {
  background: var(--dg-tone-ng-bg);
  color: var(--dg-tone-ng-fg);
}

[data-tone="ng"] .dg-result__icon {
  background: var(--dg-tone-ng-icon);
}

[data-tone="ng"] .dg-result__icon::before {
  content: '';
  position: absolute;
  top: 13.5px;
  left: 7px;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
}

.dg-result__heading {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--dg-on-stage-strong);
  word-break: auto-phrase;
}

.dg-result__body {
  /* 1行が長くなりすぎると読みにくいため、日本語で読みやすい上限（約40字）に抑える */
  max-width: 34em;
  margin: 18px auto 0;
  font-size: 1.7rem;
  line-height: 1.9;
  text-align: center;
  color: var(--dg-on-stage-soft);
  word-break: auto-phrase;
}

/* 判定より下（やること・根拠・操作）をまとめる白いパネル */
.dg-result__panel {
  padding: 40px 60px 46px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(0, 45, 95, .35);
}

/* パネル内で最初に来るブロックの上余白は不要 */
.dg-result__panel > :first-child {
  margin-top: 0;
}

/* CTAリンクのフォーカス枠。
   .link-btn は project.css（共通）側の定義でフォーカス指定を持たないため、
   診断内のCTAに限ってここで補う。 */
.dg-ctas .link-btn a:focus-visible,
.dg-step .link-btn a:focus-visible {
  outline: 3px solid var(--dg-cyan);
  outline-offset: 3px;
}

/* --- 次のお手続き（CTA）--- */

/* 見出し「次のお手続き」と、CTAを囲っていた薄い水色の枠は
   20260826修正依頼（スライド3・4・5）により削除。
   入れ物だけを残し、前後のブロックとの間隔を保つ。
   枠と内側paddingが無くなったぶん、先頭要素の上余白は落とす
   （枠だけ消して空白が残るのを防ぐ）。 */
.dg-action {
  margin-top: 32px;
}

.dg-action > :first-child {
  margin-top: 0;
}

/* 入会条件の再掲（原稿：「（3つの入会条件を記載）」） */
.dg-conditions {
  margin-top: 32px;
  padding: 30px 34px;
  border-radius: 18px;
  background: var(--dg-beige);
  counter-reset: dg-cond;
}

.dg-conditions__ttl {
  margin-bottom: 18px;
  color: var(--dg-ink);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.dg-conditions ol > li {
  counter-increment: dg-cond;
  position: relative;
  padding-left: 52px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75;
}

.dg-conditions ol > li + li {
  margin-top: 16px;
}

.dg-conditions ol > li::before {
  content: '0' counter(dg-cond);
  position: absolute;
  top: 2px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--dg-cyan);
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.dg-conditions .dg-cond__note {
  margin-top: 6px;
  color: var(--dg-muted);
  font-size: 1.3rem;
  line-height: 1.7;
}

/* CTA */
.dg-ctas {
  margin-top: 34px;
}

.dg-ctas .link-btn a {
  width: 100%;
  max-width: 460px;
  height: 68px;
  margin: 0 auto;
  padding: 0 56px;
  border-radius: 34px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* STEP形式のCTA（結果B） */
.dg-steps {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  margin-top: 34px;
}

.dg-step {
  flex: 1 1 0;
  max-width: 340px;
  padding: 24px 20px 26px;
  border: 2px solid var(--dg-blue-sub);
  border-radius: 18px;
  background: #f4fbfe;
  text-align: center;
}

.dg-step__no {
  display: block;
  margin-bottom: 14px;
  color: var(--dg-blue);
  font-family: 'Barlow', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
}

.dg-step .link-btn a {
  width: 100%;
  height: 64px;
  /* 外側の囲いを外したぶんボタンが広がり、SPで「東邦ガスくらしマイショップに入／会」と
     最後の1文字だけが next line へ落ちるようになったため、文節で折り返す。
     未対応ブラウザは通常の折り返しになる（本ファイル内の他の指定と同じ扱い）。 */
  word-break: auto-phrase;
  padding: 0 44px 0 20px;
  border-radius: 32px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.dg-step__note {
  max-width: 40em;
  margin: 16px auto 0;
  color: var(--dg-muted);
  font-size: 1.4rem;
  line-height: 1.7;
  text-align: center;
}

/* 注釈（常時表示）
   入会条件と同じく判定の根拠にあたるため折りたたまない。 */
.dg-notes-block {
  margin-top: 26px;
  padding: 20px 20px 22px;
  border: 1px solid var(--dg-line);
  border-radius: 14px;
  background: #fafcfe;
}

.dg-notes-block__ttl {
  margin-bottom: 10px;
  color: var(--dg-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 注釈内のリンク（例：契約情報の紐づけ手順）。
   本文と同じ大きさのまま、下線と色でリンクだと分かるようにする。 */
.dg-textlink {
  color: var(--dg-blue);
  text-decoration: underline;
}

.dg-textlink:hover {
  text-decoration: none;
}

.dg-textlink:focus-visible {
  outline: 3px solid var(--dg-cyan);
  outline-offset: 2px;
}

/* 注釈本文 */
.dg-notes {
  max-width: 46em; /* 1行が長くなりすぎないように */
  color: var(--dg-muted);
  font-size: 1.35rem;
  line-height: 1.8;
}

.dg-notes > p {
  margin-left: 1em;
  text-indent: -1em;
}

.dg-notes > p + p {
  margin-top: 8px;
}

.dg-notes ul {
  margin-top: 4px;
  padding-left: 1em;
}

.dg-notes ul li {
  margin-left: 1em;
  text-indent: -1em;
}

.dg-notes ul li::before {
  content: '・';
}

/* 回答内容（折りたたみ・読み取り専用）
   「なぜこの結果になったか」を示すための要約。CTA・注釈より優先度が低いため
   既定は閉じる。<details>/<summary> はJSなしでキーボード操作・読み上げに対応できる。 */
.dg-answers {
  margin-top: 22px;
  padding: 20px 24px 22px;
  border: 1px solid var(--dg-line);
  border-radius: 14px;
  background: #fafcfe;
}

/* 閉じているときは中身が無いので、枠の下余白はサマリー自身のpaddingだけで足りる。
   親のpadding-bottomが残ると見出しの下に空白が二重に付く。 */
.dg-answers:not([open]) {
  padding-bottom: 0;
}

.dg-answers__ttl {
  display: block;
  position: relative;
  margin: -20px -24px 0;
  padding: 20px 48px 20px 24px; /* タップ領域を44px以上確保する */
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--dg-ink);
  cursor: pointer;
  list-style: none;
}

.dg-answers__ttl::-webkit-details-marker {
  display: none;
}

.dg-answers__ttl:focus-visible {
  outline: 3px solid var(--dg-cyan);
  outline-offset: 2px;
  border-radius: 8px;
}

/* 開閉の矢印（CSSのみ） */
.dg-answers__ttl::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 22px;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--dg-blue);
  border-bottom: 2px solid var(--dg-blue);
  transform: rotate(45deg);
  transition: transform .25s;
}

.dg-answers[open] .dg-answers__ttl::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.dg-answers__list {
  margin-top: 12px;
}

.dg-answers__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 11px 0;
  border-top: 1px dashed var(--dg-line);
  font-size: 1.35rem;
  line-height: 1.7;
}

.dg-answers__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.dg-answers__q {
  min-width: 0; /* 長い設問でも列からあふれさせない */
  color: var(--dg-muted);
}

.dg-answers__a {
  margin: 0; /* ブラウザ既定の dd の字下げを消す */
  font-weight: 700;
  color: var(--dg-ink);
  text-align: right;
}

/* スクリーンリーダー専用 */
.dg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   SP（既存サイトのブレークポイント 767px を踏襲）
   ============================================================ */

@media (max-width: 767px) {
  .dg-main {
    padding-top: 75px;
    padding-bottom: 20px;
  }

  .dg-stage {
    padding: 24px 0 34px;
    border-radius: 0 0 24px 24px;
  }

  .dg-head {
    margin-bottom: 18px;
  }

  .dg-head__title {
    font-size: 1.8rem;
    line-height: 1.5;
  }

  .dg-head__lead {
    margin-top: 6px;
    font-size: 1.25rem;
    line-height: 1.7;
    text-align: center;
  }

  .dg-card {
    padding: 26px 18px 30px;
    border-radius: 18px;
  }

  .dg-card--intro,
  .dg-card--result {
    padding: 0;
  }

  .dg-qnum {
    margin-bottom: 6px;
    font-size: 2.8rem;
  }

  .dg-question {
    font-size: 1.9rem;
    line-height: 1.6;
  }

  .dg-qnote {
    margin-top: 10px;
    font-size: 1.2rem;
    text-align: left;
  }

  .dg-choices {
    margin-top: 22px;
  }

  .dg-choices > li + li {
    margin-top: 10px;
  }

  .dg-choice {
    padding: 16px 50px 16px 18px;
    border-radius: 14px;
    font-size: 1.6rem;
  }

  .dg-choice::after {
    right: 18px;
    width: 9px;
    height: 9px;
    margin-top: -5px;
  }

  .dg-choice__mark {
    padding: 2px 10px;
    font-size: 1.1rem;
  }

  .dg-choice__items {
    margin-top: 8px;
    font-size: 1.25rem;
    line-height: 1.8;
  }

  .dg-actions {
    gap: 10px;
    margin-top: 26px;
  }

  .dg-btn {
    min-width: 0;
    flex: 1 1 auto;
    height: 54px;
    padding: 0 16px;
    border-radius: 27px;
    font-size: 1.6rem;
  }

  .dg-btn--ghost {
    flex: 0 1 110px;
    min-width: 0;
  }

  /* 結果画面の操作ボタンは「前の質問へ戻る」「最初からやり直す」と
     どちらも長い文言のため、上と同じ幅制限をかけると改行してしまう。
     ここだけ両方を等幅にし、文字サイズ・余白を絞って1行に収める。 */
  .dg-actions--result {
    gap: 8px;
  }

  .dg-actions--result .dg-btn,
  .dg-actions--result .dg-btn--ghost {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    font-size: 1.3rem;
    white-space: nowrap;
  }

  /* --- 開始画面 --- */
  .dg-card--intro {
    padding: 16px 0;
  }

  .dg-intro__eyebrow {
    margin-bottom: 14px;
    padding: 5px 14px;
    font-size: 1.2rem;
  }

  .dg-intro__sub {
    margin-bottom: 4px;
    font-size: 1.5rem;
  }

  .dg-intro__heading {
    font-size: 2.2rem;
    line-height: 1.5;
  }

  .dg-intro__body {
    margin-top: 14px;
    font-size: 1.4rem;
    line-height: 1.85;
  }

  .dg-btn--start {
    min-width: 0;
    width: 100%;
    height: 62px;
    font-size: 1.7rem;
  }

  .dg-intro__note {
    margin-top: 16px;
    font-size: 1.2rem; /* 12px未満にしない */
  }

  /* --- 結果 --- */
  .dg-result__head {
    padding: 4px 0 24px;
  }

  .dg-result__panel {
    padding: 24px 18px 28px;
    border-radius: 18px;
  }

  .dg-result__label {
    margin-bottom: 16px;
    padding-bottom: 12px;
    font-size: 1.7rem;
    letter-spacing: .12em;
  }

  .dg-result__label::after {
    width: 36px;
    margin-left: -18px;
  }

  .dg-result__verdict {
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 20px 10px 16px;
    border-radius: 26px;
    font-size: 1.7rem;
  }

  .dg-result__icon {
    width: 24px;
    height: 24px;
  }

  [data-tone="ok"] .dg-result__icon::before {
    top: 6px;
    left: 8px;
    width: 6px;
    height: 11px;
    border-right-width: 2.5px;
    border-bottom-width: 2.5px;
  }

  [data-tone="step"] .dg-result__icon::before {
    top: 8px;
    left: 7px;
    width: 7px;
    height: 7px;
    border-top-width: 2.5px;
    border-right-width: 2.5px;
  }

  [data-tone="ng"] .dg-result__icon::before {
    top: 11px;
    left: 6px;
    width: 12px;
    height: 2.5px;
  }

  .dg-result__heading {
    font-size: 1.9rem;
    line-height: 1.5;
  }

  .dg-result__body {
    margin-top: 14px;
    font-size: 1.4rem;
    line-height: 1.85;
    text-align: center;
  }

  /* --- 次のお手続き（見出し・外枠は削除済み） --- */
  .dg-action {
    margin-top: 24px;
  }

  .dg-conditions {
    margin-top: 24px;
    padding: 20px 16px;
    border-radius: 14px;
  }

  .dg-conditions__ttl {
    margin-bottom: 14px;
    font-size: 1.5rem;
  }

  .dg-conditions ol > li {
    padding-left: 40px;
    font-size: 1.4rem;
  }

  .dg-conditions ol > li::before {
    width: 30px;
    height: 30px;
    font-size: 1.4rem;
  }

  .dg-ctas {
    margin-top: 24px;
  }

  .dg-ctas .link-btn a {
    height: 66px;
    /* 右paddingは、project.css側の矢印アイコン（right:24px + 幅約13px）と
       重ならないよう、アイコン分＋余白を確保した値にしている。
       文言が折り返っても最終行がアイコン領域へ入り込まないよう、
       中身の幅そのものをアイコンの手前で止める。 */
    padding: 0 46px 0 18px;
    border-radius: 33px;
    font-size: 1.5rem;
  }

  .dg-steps {
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
  }

  .dg-step {
    max-width: none;
    padding: 18px 14px 20px;
    border-radius: 14px;
  }

  .dg-step__no {
    margin-bottom: 10px;
    font-size: 1.5rem;
  }

  .dg-step .link-btn a {
    height: 62px;
    /* .dg-ctas と同じ理由でアイコン分の右paddingを広げている */
    padding: 0 44px 0 16px;
    font-size: 1.4rem;
  }

  .dg-step__note {
    margin-top: 12px;
    font-size: 1.2rem;
    text-align: left;
  }

  .dg-notes-block {
    margin-top: 20px;
    padding: 16px 16px 18px;
    border-radius: 12px;
  }

  .dg-notes-block__ttl {
    font-size: 1.35rem;
  }

  .dg-notes {
    font-size: 1.2rem;
  }

  .dg-answers {
    margin-top: 18px;
    padding: 16px 16px 18px;
    border-radius: 12px;
  }

  .dg-answers__ttl {
    margin: -16px -16px 0; /* 親.dg-answersのpaddingに合わせる */
    padding: 16px 40px 16px 16px; /* タップ領域を44px以上確保する */
    font-size: 1.35rem;
  }

  .dg-answers__ttl::after {
    right: 16px;
    width: 8px;
    height: 8px;
  }

  /* SPでは「設問」と「回答」を2段に分ける。
     PCと同じ2カラムのままだと設問の列が潰れ、1〜2文字ずつ改行されてしまう。 */
  .dg-answers__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
    font-size: 1.25rem;
  }

  .dg-answers__q {
    line-height: 1.65;
  }

  .dg-answers__a {
    line-height: 1.5;
    text-align: left;
  }
}

/* ============================================================
   くらしベア（案内役）

   画像：/assets/images/myshop/diagnosis/bear/
   割り当て（質問IDとの対応）は diagnosis-ui.js の
   BEAR_BY_QUESTION / BEAR_BY_TONE に一覧で書いてある。

   ★方針（デザイン調整指示に基づく改訂）★
   ・キャラクターは主役にしない。常にテキスト情報が先に理解できることを優先する
   ・開始画面：注記（.dg-intro__note）の下に配置。PC/SP共通
   ・設問画面：カード右上に寄り添わせる（PC: right 30px／SP: 見出し上に小さく）
   ・結果画面：「診断結果」ラベルと判定バッジ（結果内容）の間に配置
   ・絵ごとに縦横比が違う（pekori は縦長、他は横広め）が、
     枠の比率を共通にして contain ＋ 下端そろえで置くことで、
     画面が切り替わってもベアの位置とサイズ感が揺れないようにする
   ・SVGの色はそのまま使う（着色しない）
   ============================================================ */

.dg-bear {
  display: block;
  /* 下端をそろえる。素材ごとの縦横比の違いは枠の中で吸収させる */
  background: no-repeat center bottom / contain;
  pointer-events: none; /* 選択肢のタップを邪魔しない */
}

/* ---- 開始画面：注記（.dg-intro__note）の下 ---- */
.dg-bear--intro {
  width: 72px;
  aspect-ratio: 100 / 125;
  margin: 18px auto 0;
}

/* ---- 設問画面（PC）：カードの右上に寄せる。
   位置の基準は .dg-card（position: relative）。 */
@media (min-width: 768px) {
  .dg-bear--question {
    position: absolute;
    top: 46px;
    right: 30px;
    width: 84px;
    aspect-ratio: 100 / 125;
  }
}

/* ---- 結果画面：「診断結果」と判定バッジの間 ---- */
.dg-bear--result {
  width: 84px;
  aspect-ratio: 100 / 125;
  margin: 0 auto 14px;
}

/* ---- SP ---- */
@media (max-width: 767px) {
  /* 設問見出しの上に小さく添える（本文の前に来るようDOM順で先頭にある） */
  .dg-bear--question {
    width: 60px;
    aspect-ratio: 100 / 125;
    margin: 0 auto 12px;
  }

  .dg-bear--intro {
    width: 56px;
  }

  .dg-bear--result {
    width: 64px;
  }
}

/* ============================================================
   診断エリアの背景と装飾
   ============================================================ */

.dg-stage {
  position: relative;
  overflow: hidden;
  background: var(--dg-stage-bg);
}

.dg-stage > .inner {
  position: relative;
  z-index: 1;
}

.dg-stage::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -22%;
  left: -14%;
  width: 46%;
  padding-top: 34%;
  border-radius: 58% 42% 47% 53% / 45% 52% 48% 55%;
  background: rgba(255, 255, 255, .07);
  pointer-events: none;
}

.dg-stage::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: -16%;
  bottom: -26%;
  width: 52%;
  padding-top: 38%;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: rgba(255, 255, 255, .055);
  pointer-events: none;
}

.dg-stage > .inner::before {
  content: '';
  position: absolute;
  top: -14px;
  left: -6px;
  width: 46px;
  height: 46px;
  background-image: radial-gradient(rgba(255, 255, 255, .34) 1.5px, transparent 1.5px);
  background-size: 13px 13px;
  pointer-events: none;
}

/* 入会できる */
.dg-stage:has([data-tone="ok"]) {
  --dg-tone-ok-bg: #ffffff;
  --dg-tone-ok-fg: #00559f;
  --dg-tone-ok-icon: #0b74c4;
}

/* 入会できない */
.dg-stage:has([data-tone="ng"]) {
  --dg-stage-bg: #fff6ee;
  --dg-on-stage: #7a3609;
  --dg-on-stage-strong: #b4400a;
  --dg-on-stage-soft: #7a3609;
  --dg-on-stage-faint: rgba(122, 54, 9, .8);
  --dg-on-stage-hairline: rgba(122, 54, 9, .3);
  --dg-tone-ng-bg: #ffffff;
  --dg-tone-ng-fg: #a83c09;
  --dg-tone-ng-icon: #e2660f;
}

/* 契約の切り替えが必要 */
.dg-stage:has([data-tone="step"]) {
  --dg-stage-bg: #eef8f0;
  --dg-on-stage: #1d6b40;
  --dg-on-stage-strong: #17703f;
  --dg-on-stage-soft: #1d6b40;
  --dg-on-stage-faint: rgba(29, 107, 64, .8);
  --dg-on-stage-hairline: rgba(29, 107, 64, .3);
  --dg-tone-step-bg: #ffffff;
  --dg-tone-step-fg: #146537;
  --dg-tone-step-icon: #17a05a;
}

.dg-stage:has([data-tone="ng"])::before,
.dg-stage:has([data-tone="step"])::before {
  background: rgba(0, 0, 0, .035);
}

.dg-stage:has([data-tone="ng"])::after,
.dg-stage:has([data-tone="step"])::after {
  background: rgba(0, 0, 0, .028);
}

.dg-stage:has([data-tone="ng"]) > .inner::before,
.dg-stage:has([data-tone="step"]) > .inner::before {
  background-image: radial-gradient(rgba(0, 0, 0, .12) 1.5px, transparent 1.5px);
}

@media (max-width: 767px) {
  .dg-stage::before {
    top: -14%;
    left: -26%;
    width: 72%;
    padding-top: 54%;
  }

  .dg-stage::after {
    right: -30%;
    bottom: -16%;
    width: 78%;
    padding-top: 58%;
  }

  .dg-stage > .inner::before {
    top: -10px;
    left: -4px;
    width: 34px;
    height: 34px;
    background-size: 11px 11px;
  }
}