@charset "UTF-8";

/* ===================================================
   これからサポート ミニアプリ共通スタイル v1
   流用元: shukatsu_sindan_app/assets/shared.css(トークンと cl- / diag- / reco- 系を抽出)
   除外: ai-report/テーマカード(ポータル)/Coming Soon。末尾に§6.6調整レイヤー
   注意: CSSコメント内に「アスタリスク+スラッシュ」の並びを書かないこと(コメントが途中で閉じ:rootが死ぬ)
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@600;700&display=swap');

/* --- CSS変数 ---
   プライマリを #2d7a2d に変更（白文字コントラスト比 5.3:1 → WCAG AA合格）
   ─────────────────────────────────────────── */
:root {
  --color-primary:       #2d7a2d;
  --color-primary-dark:  #1f5c1f;
  --color-primary-light: #54B435;
  --color-heading:       #0F172A;
  --color-text:          #2F3B40;
  --color-text-light:    #5a6670;
  --color-bg:            #ffffff;
  --color-bg-warm:       #EDFBE2;
  --color-bg-subtle:     #D5EAD8;
  --color-bg-alt:        #f8faf5;
  --color-border:        #D5EAD8;
  --color-header-bg:     #0F172A;
  --color-footer-bg:     #0F172A;

  --color-accent:        #c84b00;
  --color-accent-light:  #fff3e0;
  --color-accent-border: #ffb74d;

  --color-info-text:     #1a5d1a;
  --color-info-bg:       #EDFBE2;
  --color-info-border:   #a3d977;

  --color-cta-phone:     #ffffff;
  --color-cta-phone-bg:  #1f5c1f;
  --color-cta-phone-hover:#174a17;

  /* タイプ診断カラー */
  --color-type-bg:       #0F172A;
  --color-type-fg:       #ffffff;

  --font-sans: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
  --font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --max-width: 720px;
}

/* --- リセット --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;   /* 17px — シニア向けに標準より少し大きめ */
  font-weight: 400;
  line-height: 1.85;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-dark); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
ul, ol { list-style: none; }

/* --- レイアウト --- */
.cl-container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; }

/* ===== ヘッダー ===== */
.cl-header {
  background: var(--color-header-bg);
  color: #fff;
  padding: 1rem 0;
  padding-top: max(1rem, env(safe-area-inset-top, 0px));
}
.cl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.cl-header__logo {
  height: 44px;
  width: auto;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  padding: 3px;
}
.cl-header__title {
  flex: 1;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.cl-header__title small {
  display: block;
  font-size: 0.8125rem;   /* 13px → バッジより読みやすく */
  font-weight: 400;
  opacity: 0.75;
  margin-top: 0.125rem;
}

/* 拠点切替ボタン */
.cl-branch-toggle { display: flex; gap: 0.25rem; margin-left: auto; }
.cl-branch-btn {
  padding: 0.3rem 0.75rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  color: rgba(255,255,255,0.75);
  font-size: 0.75rem;   /* 12px — タッチ操作しやすく */
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  min-height: 32px;
}
.cl-branch-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.cl-branch-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

/* ===== ヒーロー ===== */
.cl-hero {
  background: linear-gradient(135deg, var(--color-bg-warm) 0%, #d4f0c0 100%);
  padding: 2.5rem 0 2rem;
  text-align: center;
}
.cl-hero__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.cl-hero__lead {
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.8;
  max-width: 480px;
  margin: 0 auto;
}

/* ===== セクション ===== */
.cl-section { padding: 2rem 0; }
.cl-section--alt { background: var(--color-bg-alt); }
.cl-section__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 1.25rem;
  padding-left: 0.875rem;
  border-left: 4px solid var(--color-primary);
  line-height: 1.4;
}
.cl-section__lead {
  font-size: 0.9375rem;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* ===== カード ===== */
.cl-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.cl-card--warm { background: var(--color-bg-warm); }
.cl-card__title {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.cl-card__body { font-size: 0.9375rem; line-height: 1.85; }
.cl-card__body ul { margin-top: 0.5rem; }
.cl-card__body li { position: relative; padding-left: 1.25rem; margin-bottom: 0.375rem; }
.cl-card__body li::before {
  content: '';
  position: absolute; left: 0; top: 0.65em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ===== ヒントボックス ===== */
.cl-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: 12px;
  padding: 1rem 1.125rem;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;   /* 15px — シニア向けに読みやすく */
  color: var(--color-info-text);
  line-height: 1.8;
}
.cl-hint__icon { flex-shrink: 0; font-size: 1.375rem; }

/* ===== アクセントボックス ===== */
.cl-accent-box {
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  color: #5d3200;
  line-height: 1.8;
  text-align: center;
}
.cl-accent-box strong { color: var(--color-accent); }

/* ===== CTAセクション ===== */
.cl-cta {
  background: var(--color-bg-warm);
  padding: 2.5rem 0;
  text-align: center;
}
.cl-cta__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}
.cl-cta__sub {
  font-size: 0.9375rem;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  line-height: 1.8;
}
.cl-cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 360px;
  margin: 0 auto;
}
.cl-cta__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1rem 1.5rem;
  background: var(--color-cta-phone-bg);
  color: var(--color-cta-phone);
  border: none;
  border-radius: 12px;
  font-size: 1.25rem;   /* 大きめ — シニアがタップしやすく */
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  min-height: 60px;     /* タッチターゲット拡大 */
  box-shadow: 0 3px 10px rgba(31,92,31,0.3);
}
.cl-cta__phone:hover, .cl-cta__phone:focus {
  background: var(--color-cta-phone-hover);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}
.cl-cta__phone-icon { font-size: 1.5rem; }
.cl-cta__phone-area {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 0.125rem;
}
.cl-cta__hours {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-top: 0.75rem;
}

/* ===== フッター ===== */
.cl-footer {
  background: var(--color-footer-bg);
  color: rgba(255,255,255,0.85);
  padding: 2rem 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.8;
}
.cl-footer__company { font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: 0.25rem; }
.cl-footer__tagline { font-size: 0.8125rem; color: rgba(255,255,255,0.6); margin-bottom: 0.75rem; }
.cl-footer__nav { margin-bottom: 1rem; }
.cl-footer__nav a {
  color: rgba(255,255,255,0.8);
  margin: 0 0.5rem;
  font-size: 0.875rem;
}
.cl-footer__nav a:hover { color: #fff; }
.cl-footer__info a { color: rgba(255,255,255,0.9); text-decoration: underline; }
.cl-footer__info p { margin-bottom: 0.125rem; }
.cl-footer__copy { margin-top: 1rem; font-size: 0.75rem; color: rgba(255,255,255,0.4); }

/* ===== 診断固有: プログレスバー ===== */
.diag-progress {
  height: 10px;
  background: var(--color-border);
  border-radius: 5px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.diag-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, #4caf50 100%);
  width: 0%;
  transition: width 0.35s ease;
  border-radius: 5px;
}

/* ===== 診断固有: 質問メタ ===== */
.diag-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.diag-category {
  background: var(--color-primary);
  color: #fff;
  padding: 0.3rem 0.875rem;
  border-radius: 20px;
  font-size: 0.875rem;   /* 14px — 従来0.8125remから引き上げ */
  font-weight: 700;
  letter-spacing: 0.01em;
}
.diag-number {
  color: var(--color-text-light);
  font-weight: 700;
  font-size: 0.9375rem;
}

/* ===== 診断固有: 開始画面 ===== */
.diag-start__title {
  color: var(--color-heading);
  font-family: var(--font-serif);
  font-size: 1.375rem;
  margin-bottom: 0.875rem;
  line-height: 1.4;
}
.diag-start__lead {
  color: var(--color-text);
  font-size: 1.0625rem; /* 15px→17px: §6.6本文最小16px違反をT-A4が検出(2026-08-12修正) */
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.diag-start__time {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-light);
}
.diag-start__btn { margin-top: 0.5rem; }

/* ===== 診断固有: 質問カード ===== */
.diag-question-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.diag-question-card h2 {
  color: var(--color-heading);
  margin-bottom: 1.75rem;
  font-size: 1.25rem;
  line-height: 1.7;
  font-family: var(--font-serif);
}

/* ===== 診断固有: 選択肢 ===== */
.diag-choices {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.diag-choice-btn {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  padding: 1.125rem 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-height: 56px;     /* WCAG推奨44pxを超えるタッチターゲット */
  line-height: 1.65;
}
.diag-choice-btn:hover, .diag-choice-btn:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-bg-warm);
  transform: translateX(3px);
  box-shadow: 0 2px 10px rgba(45,122,45,0.15);
  outline: none;
}
.diag-choice-btn.is-selected {
  border-color: var(--color-primary);
  background: var(--color-bg-warm);
}
.diag-choice-label {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1.25rem;
  flex-shrink: 0;
  min-width: 1.5rem;
  line-height: 1.5;
}
.diag-choice-text {
  flex: 1;
  padding-top: 0.1rem;
}

/* ===== 診断固有: アドバイス画面 ===== */
.diag-advice {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.diag-advice__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}
.diag-advice__icon { font-size: 1.5rem; }
.diag-advice h2 {
  color: var(--color-primary-dark);
  font-size: 1.25rem;
  font-family: var(--font-serif);
}
.diag-advice__text {
  margin-bottom: 1.25rem;
  line-height: 1.85;
  color: var(--color-text);
  font-size: 1rem;
  background: var(--color-bg-alt);
  padding: 1.125rem;
  border-radius: 8px;
}
.diag-task {
  background: var(--color-accent-light);
  padding: 1.25rem;
  border-radius: 10px;
  border-left: 4px solid var(--color-accent-border);
  margin-bottom: 1.75rem;
}
.diag-task h3 {
  color: var(--color-accent);
  margin-bottom: 0.5rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.diag-task__icon { font-size: 1.125rem; }
.diag-task p { font-size: 0.9375rem; line-height: 1.8; }

/* ===== 診断固有: 結果画面 ===== */
.diag-result {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
}
.diag-result__header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--color-border);
}
.diag-result__title {
  font-family: var(--font-serif);
  color: var(--color-heading);
  font-size: 1.5rem;
  margin-bottom: 0.625rem;
}
.diag-result__thanks {
  font-size: 1rem; /* §6.6最小16px(2026-08-12 シニアUX監査A5) */
  color: var(--color-text-light);
  line-height: 1.7;
}

/* ----- タイプ診断モード ----- */
.diag-result-type {
  text-align: center;
  background: linear-gradient(145deg, var(--color-heading) 0%, #1e3a5f 100%);
  color: #fff;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(15,23,42,0.2);
}
.diag-result-type__icon {
  font-size: 3.5rem;
  margin-bottom: 0.75rem;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.diag-result-type__label {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 0.375rem;
}

.diag-result-type__desc {
  background: var(--color-bg-warm);
  border: 1px solid var(--color-info-border);
  border-radius: 12px;
  padding: 1.25rem 1.375rem;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--color-text);
}

.diag-result-type__advice {
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  padding: 1.375rem;
  margin-bottom: 1.5rem;
}
.diag-result-type__advice h3 {
  color: var(--color-primary-dark);
  font-size: 1.0625rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-serif);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.diag-result-type__advice p {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--color-text);
}

/* ----- カテゴリ別傾向 ----- */
.diag-category-summary {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.375rem;
  margin-bottom: 1.5rem;
}
.diag-category-summary h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.375rem;
}
.diag-category-summary__note {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  margin-bottom: 1rem;
}
.diag-cat-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}
.diag-cat-row__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 100px;
  flex-shrink: 0;
}
.diag-cat-row__bar-wrap {
  flex: 1;
  height: 10px;
  background: var(--color-border);
  border-radius: 5px;
  overflow: hidden;
}
.diag-cat-row__bar {
  height: 100%;
  border-radius: 5px;
  transition: width 0.6s ease;
}
.diag-cat-row__pct {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-light);
  min-width: 36px;
  text-align: right;
}

/* ----- 準備度モード: 達成率リング ----- */
.diag-score {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--color-bg-warm);
  border-radius: 14px;
  margin-bottom: 1.5rem;
}
.diag-score__ring-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.diag-score__ring {
  --ring-pct: 0%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-primary) 0%,
    var(--color-primary) var(--ring-pct),
    var(--color-border) var(--ring-pct),
    var(--color-border) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.diag-score__ring-inner {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-bg-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.diag-score__number {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1;
}
.diag-score__pct { font-size: 1.25rem; }
.diag-score__label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 0.125rem;
}
.diag-score__message {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.85;
  background: #fff;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  text-align: left;
}

/* ----- 課題一覧（共通） ----- */
.diag-task-list {
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent-border);
  border-radius: 12px;
  padding: 1.375rem;
  margin-bottom: 1.5rem;
}
.diag-task-list h3 {
  color: var(--color-accent);
  margin-bottom: 0.875rem;
  font-size: 1.0625rem;
}
.diag-task-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-accent-border);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.diag-task-list li:last-child { border-bottom: none; }
.diag-task-list__q {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-light);
  margin-bottom: 0.25rem;
}
.diag-task-list__t { display: block; }

/* ----- 回答の詳細（共通） ----- */
.diag-answer-history {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-border);
}
.diag-answer-history h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.375rem;
}
.diag-answer-history__note {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: 1.25rem;
}
.diag-answer-item {
  margin-bottom: 0.875rem;
  padding: 1.125rem;
  background: var(--color-bg-alt);
  border-radius: 10px;
  border-left: 3px solid var(--color-border);
}
.diag-answer-item__cat {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.375rem;
}
.diag-answer-item__q {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 0.375rem;
  line-height: 1.6;
}
.diag-answer-item__sel {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 0.25rem;
}
.diag-answer-item__adv {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.75;
  margin-top: 0.375rem;
}
.diag-answer-item__task {
  font-size: 0.875rem;
  color: var(--color-accent);
  margin-top: 0.25rem;
  line-height: 1.7;
}

/* ===== 汎用ボタン ===== */
.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9375rem 2rem;
  border: none;
  border-radius: 12px;
  font-size: 1.0625rem;   /* 17px — 少し大きめ */
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 52px;       /* タッチターゲット拡大 */
  text-decoration: none;
  letter-spacing: 0.01em;
}
.cl-btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.cl-btn--primary:hover, .cl-btn--primary:focus-visible {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(45,122,45,0.3);
  text-decoration: none;
  color: #fff;
  outline: none;
}
.cl-btn--outline {
  background: transparent;
  color: var(--color-primary-dark);
  border: 2px solid var(--color-primary);
}
.cl-btn--outline:hover {
  background: var(--color-bg-warm);
  text-decoration: none;
}
.cl-btn--large {
  padding: 1.0625rem 2.5rem;
  font-size: 1.125rem;
  min-height: 60px;
}
.cl-btn--block { width: 100%; }

/* ===== スクリーン管理 ===== */
.diag-screen { display: none; }
.diag-screen.is-active { display: block; animation: diagFadeIn 0.3s ease-out; }
@keyframes diagFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 再開バナー ===== */
.diag-resume-banner {
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.diag-resume-banner__text { flex: 1; font-size: 1rem; min-width: 200px; }
.diag-resume-banner__actions { display: flex; gap: 0.5rem; }

/* ===== ユーティリティ ===== */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }

/* ===== レスポンシブ ===== */
@media (min-width: 768px) {
  .cl-container { padding: 0 2rem; }
  .cl-hero { padding: 3.5rem 0 3rem; }
  .cl-hero__title { font-size: 1.875rem; }
  .cl-section { padding: 2.75rem 0; }
  .cl-section__title { font-size: 1.5rem; }
  .cl-cta__buttons { flex-direction: row; max-width: 100%; justify-content: center; }
  .cl-cta__phone { min-width: 280px; }
  .diag-question-card h2 { font-size: 1.375rem; }
  .diag-result-type__label { font-size: 2rem; }
}

/* ===== 印刷用 ===== */
@media print {
  /* 不要な要素を非表示 */
  body { background: #fff; font-size: 11pt; }
  .cl-header, .cl-footer, .cl-cta, .diag-resume-banner,
  .cl-branch-toggle, .diag-start__btn, #diagResultActions,
  .cl-section:has(.cl-theme-grid) { display: none !important; }

  /* コンテナを最大幅に */
  .cl-container { max-width: 100%; padding: 0; }
  .diag-result { box-shadow: none; border: none; padding: 0; }

  /* 結果タイプを印刷用に調整 */
  .diag-result-type {
    background: none;
    border: 2pt solid #0F172A;
    color: #0F172A;
    padding: 1.5rem;
    page-break-inside: avoid;
  }
  .diag-result-type__icon { filter: none; }
  .diag-result-type__label { color: #0F172A; }

  /* 各要素が途中で切れないように */
  .diag-result-type,
  .diag-result-type__desc,
  .diag-result-type__advice,
  .diag-category-summary,
  .diag-task-list,
  .diag-answer-item { page-break-inside: avoid; }

  /* カテゴリバー: 印刷では線で代替 */
  .diag-cat-row__bar-wrap { border: 1pt solid #ccc; }
  .diag-cat-row__bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* 達成率リング: 印刷では数字だけ */
  .diag-score__ring {
    background: none !important;
    width: auto;
    height: auto;
    border-radius: 0;
  }
  .diag-score__ring-inner { width: auto; height: auto; border-radius: 0; background: none; }

  /* ページ分割制御 */
  .diag-answer-history { page-break-before: auto; }
  .diag-answer-item { page-break-inside: avoid; margin-bottom: 0.5rem; }

  /* リンクURLを表示しない */
  a[href]::after { content: none !important; }
}

/* =========================================================
   終活提案レポート（recommendation-engine.js）
   ========================================================= */
.reco {
  margin-top: 2rem;
}
.reco__header { margin-bottom: 1.25rem; }
.reco__title {
  font-size: 1.375rem;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}
.reco__lead {
  color: var(--color-text-light);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.reco__all-done {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  color: var(--color-info-text);
  line-height: 1.8;
}

.reco-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
.reco-card--top {
  border: 2px solid var(--color-primary);
  box-shadow: 0 2px 10px rgba(45, 122, 45, 0.15);
}
.reco-card__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.reco-card__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.reco-card__badge {
  background: var(--color-accent-light);
  color: var(--color-accent);
  border: 1px solid var(--color-accent-border);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.125rem 0.75rem;
}
.reco-card__title {
  font-size: 1.1875rem;
  color: var(--color-heading);
  margin: 0;
  width: 100%;
}
.reco-card__status {
  font-size: 0.9375rem;
  color: var(--color-text-light);
  background: var(--color-bg-alt);
  border-radius: 8px;
  padding: 0.5rem 0.875rem;
  margin-bottom: 0.875rem;
}
.reco-card__why {
  line-height: 1.8;
  margin-bottom: 0.875rem;
}
.reco-card__personal {
  background: var(--color-bg-warm);
  border-radius: 10px;
  padding: 0.875rem 1.125rem;
  margin-bottom: 0.875rem;
}
.reco-card__personal h5,
.reco-card__insight h5,
.reco-card__step h5 {
  font-size: 0.9375rem;
  color: var(--color-heading);
  margin: 0 0 0.5rem;
}
.reco-card__personal ul {
  margin: 0;
  padding-left: 1.25rem;
}
.reco-card__personal li {
  line-height: 1.7;
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
}
.reco-card__note {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 0.875rem;
}
.reco-card__insight {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: 10px;
  padding: 0.875rem 1.125rem;
  margin-bottom: 0.875rem;
}
.reco-card__insight p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-info-text);
  margin: 0;
}
.reco-card__step {
  border-left: 4px solid var(--color-primary);
  padding: 0.25rem 0 0.25rem 1rem;
  margin-bottom: 0.875rem;
}
.reco-card__step p { line-height: 1.7; margin: 0; }
.reco-card__sources {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  margin: 0;
}
.reco-card__sources a {
  color: var(--color-primary);
  text-decoration: underline;
}

.reco__prepared {
  background: var(--color-bg-alt);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.reco__prepared h5 {
  font-size: 0.9375rem;
  color: var(--color-heading);
  margin: 0 0 0.625rem;
}
.reco__prepared-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.reco__chip {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.875rem;
  padding: 0.25rem 0.875rem;
}
.reco__verified {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

@media print {
  .reco-card { page-break-inside: avoid; box-shadow: none; }
  .reco-card__sources a { color: var(--color-text); }
}

/* =========================================================
   ミニアプリ調整レイヤー(SPEC §6.6 デザイン規約)
   フェーズ1の画面実装でHITL承認を経て最終調整する
   ========================================================= */
:root {
  --color-text: #24312a;     /* §6.6 テキスト(shared.cssの#2F3B40を上書き) */
  --color-bg-warm: #f2f8f2;  /* §6.6 淡背景(shared.cssの#EDFBE2を上書き) */
}
body {
  font-size: 1.125rem;  /* 18px — §6.6 本文18px基準(最小16px) */
  line-height: 1.8;
}

/* ===== S-01 診断トップ(SPEC §6.1・§6.6) =====
   ミニアプリはLINEのヘッダーが上に付くため自前ヘッダーは薄く(56px以内) */
/* 認証審査対応(2026-08-20): 提供者の明示フッター。文字は16px以上(§6.6) */
.mini-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.mini-footer p { font-size: 1rem; color: var(--color-text-light); line-height: 1.8; margin: 0.15rem 0; }
.mini-footer__name { font-weight: 700; color: var(--color-text); }

.mini-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--color-header-bg);
  color: #fff;
  padding: 0.5rem 1rem;
  min-height: 48px;
  max-height: 56px;
}
.mini-header__logo {
  height: 32px;
  width: auto;
  background: #fff;
  border-radius: 4px;
  padding: 2px;
}
.mini-header__title { font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; }

.s01-hero { text-align: center; padding: 1.75rem 0 2.5rem; }
.s01-hero .diag-start__title { font-size: 1.5rem; }
.s01-badges {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.9rem 0 1.25rem;
}
.s01-badge {
  background: var(--color-bg-warm);
  border: 1px solid var(--color-info-border);
  color: var(--color-info-text);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.s01-start-btn { width: 100%; min-height: 56px; font-size: 1.1875rem; }
.s01-note {
  font-size: 1rem; /* 安心文言は本文サイズ以上(監査A5) */
  color: var(--color-text-light);
  margin-top: 1rem;
  line-height: 1.8;
}

/* ===== S-02 戻るリンク(SPEC §6.1) ===== */
.diag-back { margin: -0.5rem 0 0.5rem; }
.diag-back a {
  display: inline-block;
  padding: 0.7rem 0.5rem; /* タップ領域の確保(§6.6) */
  color: var(--color-text-light);
  font-size: 0.9375rem;
  text-decoration: none;
}
.diag-back a:hover { text-decoration: underline; }

/* ===== S-03 結果画面(SPEC §6.1) ===== */
.s03-save { text-align: center; padding: 1.5rem 1.25rem; margin: 1.5rem 0; }
.s03-save__sub { margin-top: 0.75rem; font-size: 1rem; }
.s03-save__assure { margin-top: 0.5rem; font-size: 1rem; color: var(--color-text-light); }
.s03-consult { text-align: center; padding: 1.5rem 1.25rem; margin-bottom: 1.5rem; }
.s03-consult__title { font-size: 1.125rem; font-weight: 700; color: var(--color-heading); margin-bottom: 0.25rem; }
.s03-consult__note { font-size: 1rem; color: var(--color-text-light); margin-bottom: 1rem; }
.s03-external-note { font-size: 1rem; color: var(--color-text-light); margin: -0.25rem 0 0.75rem; } /* 外部遷移の事前予告(監査A4) */
.s03-consult .cl-cta__phone { margin: 0.6rem 0; }
.s03-seminar-btn { margin-bottom: 0.75rem; }
.s03-disclaimer {
  font-size: 1rem; /* 免責は読める大きさで(監査A5) */
  color: var(--color-text-light);
  line-height: 1.8;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  margin-top: 0.5rem;
}
.s03-ai-note { display: block; margin-top: 0.4rem; font-size: 1rem; color: var(--color-text-light); }

/* ===== S-04 保存の案内(同意)+保存完了・S-06(SPEC §6.1・§6.6・ADR-0003) ===== */
.s04-card { padding: 1.5rem 1.25rem; }
.s04-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
.s04-intro { font-size: 1.125rem; line-height: 1.9; margin-bottom: 1rem; }
.s04-points {
  list-style: none;
  padding: 0.25rem 0 0.25rem 0.2em;
  margin: 0 0 1rem;
}
.s04-points li {
  position: relative;
  padding-left: 1.7em;
  margin: 0.65rem 0;
  font-size: 1.0625rem;
  line-height: 1.8;
}
.s04-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.1em;
}
.s04-links { font-size: 1rem; color: var(--color-text-light); line-height: 1.9; margin-bottom: 0.5rem; }
.s04-links-note { font-size: 1rem; color: var(--color-text-light); line-height: 1.8; margin-bottom: 1.25rem; } /* 別画面で開く予告(監査B4) */
.s04-success__hint { font-size: 1rem; color: var(--color-text-light); line-height: 1.8; margin: 0.5rem 0 1rem; } /* 見返しの入口案内(監査B3) */
.s04-send { margin: 0.25rem 0 1rem; } /* 結果のLINE返送(ADR-0012) */
/* 見返し画面に置いた受け取り導線(ADR-0019)。保存直後でなくても受け取れるようにする */
.review-delivery { margin: 1.25rem 0; text-align: center; }
/* トークに残ることの事前明示(ADR-0015)。安心文言と同じ16px以上を守る(§6.6) */
.s04-send__note { font-size: 1rem; color: var(--color-text-light); line-height: 1.7; margin-top: 0.5rem; text-align: left; }
/* 周辺診断への導線(ADR-0017)。§6.6=本文16px以上・タップ領域48px以上 */
.other-diag { background: #f4f8f4; border: 1px solid #c8d8c8; border-radius: 12px; padding: 1rem; margin: 1rem 0; text-align: left; }
.other-diag__heading { font-size: 1.125rem; color: var(--color-primary-dark, #1f5c1f); margin: 0 0 0.5rem; }
.other-diag__lead { font-size: 1rem; color: var(--color-text-light); line-height: 1.7; margin: 0 0 0.75rem; }
.other-diag__item {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  min-height: 48px; padding: 0.6rem 0.9rem; margin-bottom: 0.5rem;
  background: #fff; border: 2px solid var(--color-primary, #2d7a2d); border-radius: 10px;
  text-decoration: none;
}
.other-diag__item:last-of-type { margin-bottom: 0.25rem; }
.other-diag__title { font-size: 1.0625rem; font-weight: 600; color: var(--color-primary-dark, #1f5c1f); }
.other-diag__meta { font-size: 0.9375rem; color: var(--color-text-light); white-space: nowrap; }
.other-diag__notice { font-size: 1rem; color: var(--color-text-light); line-height: 1.7; margin: 0.5rem 0 0; }
/* 結果のメール送信(ADR-0013) */
.s04-mail { margin: 0 0 1rem; }
.s04-mail__form { text-align: left; margin-top: 0.75rem; }
.s04-mail__label { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 0.35rem; }
.s04-mail__input {
  width: 100%;
  min-height: 48px;
  font-size: 1.125rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid #9db49d;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  background: #fff;
}
.s04-mail__input:focus { outline: 3px solid var(--color-primary, #2d7a2d); outline-offset: 1px; }
.s04-mail__note { font-size: 0.9375rem; color: var(--color-text-light); margin-top: 0.5rem; line-height: 1.7; }
.s04-actions { display: flex; flex-direction: column; gap: 0.75rem; }
.s04-decline-btn { min-height: 48px; }
.s04-status {
  min-height: 1.5em;
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.8;
  color: #b3261e;
  text-align: center;
  white-space: pre-line; /* 失敗文言+電話の逃げ道の2文を改行表示(監査B5) */
}
/* 成功の案内は赤(エラー色)にしない(ADR-0012)。.s04-statusより後に置く(同一詳細度のため順序で上書き) */
.s04-status.s04-status--ok { color: var(--color-primary-dark, #1f5c1f); }
.s04-success { text-align: center; }
.s04-success__icon { font-size: 2.75rem; line-height: 1; margin-bottom: 0.5rem; }
.s04-success .s04-title { margin-bottom: 0.25rem; }
.s04-success__sub { font-size: 1.125rem; margin-bottom: 1.25rem; }
.s04-back-btn { min-height: 48px; }
/* ===== 詳細版(じっくり診断)への紹介カード(ADR-0006) =====
   淡い緑の提案ブロック。目立たせるのは色・枠・見出しサイズのみで、
   点滅・期限表現・恐怖訴求は使わない(調査原則・§6.6) */
.detail-invite {
  background: #f2f8f2;
  border: 1px solid #c8d8c8;
  border-radius: 10px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  text-align: center;
}
/* S-03設置面は視認性を強化(吉澤氏フィードバック 2026-08-12) */
.detail-invite[data-from="s03"] {
  border: 2px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(45, 122, 45, 0.12);
}
.detail-invite[data-from="s03"] .detail-invite__heading {
  font-size: 1.3125rem;
  color: var(--color-primary-dark);
}
.s04-success .detail-invite { margin: 1.25rem 0; }
.detail-invite__heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 0.5rem;
}
.detail-invite__body {
  font-size: 1rem;
  line-height: 1.9;
  text-align: left;
  margin: 0 0 1rem;
}
.detail-invite__note {
  font-size: 1rem; /* 安心文言は本文サイズ以上(監査A5) */
  color: var(--color-text-light);
  line-height: 1.8;
  text-align: left;
  margin: 0.75rem 0 0;
}
.detail-invite__notice {
  font-size: 1rem;
  color: var(--color-text-light);
  margin: 0.4rem 0 0;
}

.s06-block {
  border-top: 1px solid var(--color-border);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  text-align: center;
}
.s06-lead { font-size: 1rem; line-height: 1.9; margin-bottom: 0.9rem; }
.s06-note { font-size: 1rem; color: var(--color-text-light); margin-top: 0.6rem; }

/* 改善5: 完了画面の下部に「いつでもやめられる」入口を常設(senior-ux-proposal §2-5)
   安心を伝える文字ほど大きく(構造原則8)。注記以外は本文と同じ17pxと通常の本文色にする */
.s04-aftercare {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.s04-aftercare__lead { font-size: 1.0625rem; color: var(--color-text); line-height: 1.85; margin: 0 0 0.375rem; }
.s04-aftercare__links { font-size: 1.0625rem; line-height: 1.9; margin: 0 0 0.5rem; }
.s04-aftercare__links a { display: inline-block; padding: 0.25rem 0; }
.s04-aftercare__sep { margin: 0 0.5rem; color: var(--color-text-light); }
.s04-aftercare__note { font-size: 1rem; color: var(--color-text-light); line-height: 1.8; margin: 0; }

/* ===== ポリシー4ページ共通フッター(相互リンク) =====
   審査資料(docs/shinsa-supplement-draft.md)が「ポリシー各ページはフッター相互リンクあり」と
   記載しているのに実態が伴っていなかったため実装(senior-ux-proposal 改善3)。
   privacy / terms / delete / support の4ページが互いに行き来できる状態にする。

   - いま見ているページ自身へのリンクは出さない(移動しないリンクは混乱のもと)
   - 「診断トップにもどる」は各ページ既存の戻り道として据え置き、その下に置く
     (構造原則1: 戻り道は1つ。ここは「関連ページ」であって戻り道ではない)
   - タップ領域は48px以上(SPEC §6.6) */
.policy-footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.policy-footer__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.25rem;
}
.policy-footer__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.policy-footer__list a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 1rem;
  padding: 0 0.25rem;
  border-bottom: 1px solid var(--color-border);
}