/* =========================================================================
   シニアの未来 共通デザインシステム
   方向性: 落ち着いた信頼感（紺 × クリーム × 控えめな金）
   見出しは明朝体、本文はゴシック体。シニア配慮（大きな文字・高コントラスト・
   大きなタップ領域）を保ったまま、余白・奥行き・上質感を足す。
   ========================================================================= */

:root {
  /* --- 文字 --- */
  --color-text: #2b2721;          /* 温かみのある黒に近い茶。クリーム地で最高コントラスト */
  --color-text-muted: #6d6456;    /* 補足テキスト用の落ち着いた灰茶 */

  /* --- 地色・面 --- */
  --color-bg: #f6f1e7;            /* 温かいクリーム（紙のような地色） */
  --color-surface: #fffefb;       /* カード等の面色（地色から少し浮かせる） */
  --color-accent-bg: #f0e9da;     /* パネル用の淡いサンド（囲み・表ヘッダ等） */

  /* --- 紺（ブランド主色） --- */
  --color-primary: #114467;
  --color-primary-dark: #0b3149;

  /* --- 金（控えめな差し色。小面積のみ） --- */
  --color-accent: #a97f36;        /* 真鍮のような金 */
  --color-accent-dark: #7a5c26;   /* 金地の上に置く文字用（コントラスト確保） */
  --color-accent-soft: #f3ebd8;   /* 金の淡いバッジ地 */

  /* --- 罫線 --- */
  --color-border: #ded4c2;        /* 温かいやわらかな罫 */
  --color-border-strong: #ccc0a8;

  /* --- 影（奥行き。地色に合わせた温かい影） --- */
  --shadow-sm: 0 1px 2px rgba(43, 39, 33, 0.05), 0 1px 3px rgba(43, 39, 33, 0.04);
  --shadow-md: 0 2px 4px rgba(43, 39, 33, 0.06), 0 8px 20px rgba(43, 39, 33, 0.07);
  --shadow-lg: 0 4px 10px rgba(43, 39, 33, 0.08), 0 16px 34px rgba(43, 39, 33, 0.10);

  /* --- 角丸 --- */
  --radius: 14px;
  --radius-sm: 10px;

  /* --- 書体 --- */
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "MS PMincho", serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.85;
  /* ごく淡い縦グラデーションで紙のような奥行きを出す（ほぼ無彩・印刷しても崩れない） */
  background-image: linear-gradient(180deg, #f9f5ee 0%, var(--color-bg) 340px);
  background-repeat: no-repeat;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- 見出し（明朝体） --- */
h1,
h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

h1 {
  font-size: 29px;
  line-height: 1.5;
  margin: 0 0 20px;
}

h2 {
  font-size: 23px;
  line-height: 1.5;
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
}

/* h2 の見出しに、金の短い下線アクセントを重ねる（控えめな一点） */
h2 {
  position: relative;
}
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 44px;
  height: 2px;
  background-color: var(--color-accent);
}

h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

a {
  color: var(--color-primary);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-primary-dark);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================================
   ヘッダー
   ========================================================================= */
.site-header {
  background-color: var(--color-surface);
  border-top: 4px solid var(--color-primary);   /* 上端の紺のアクセント帯 */
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: 18px 0;
}

.site-header .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-title {
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--color-primary);
  margin: 0;
  display: flex;
  align-items: center;
}

/* 見出しの前に、金の細い縦棒をロゴマーク代わりに置く */
.site-title::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 26px;
  margin-right: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}

.site-subtitle {
  font-size: 16px;
  color: var(--color-text-muted);
  margin-top: 6px;
  margin-bottom: 0;
  letter-spacing: 0.02em;
}

/* =========================================================================
   メイン
   ========================================================================= */
main {
  padding: 36px 0 8px;
}

/* =========================================================================
   カード（トップのツール一覧）
   ========================================================================= */
.card {
  position: relative;
  display: block;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 22px 52px 22px 24px;
  margin-bottom: 18px;
  text-decoration: none;
  color: var(--color-text);
}

/* 右肩の「›」で、押せる（移動できる）ことを示す */
.card::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  font-size: 30px;
  line-height: 1;
  color: var(--color-primary);
}

.card h2 {
  margin: 0 0 6px;
  padding: 0;
  border: none;
  font-size: 21px;
  color: var(--color-primary);
}
.card h2::after {
  display: none;   /* カード内見出しには金の下線を出さない */
}

.card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 17px;
}

.badge {
  display: inline-block;
  background-color: var(--color-accent-soft);
  color: var(--color-accent-dark);
  border: 1px solid var(--color-accent);
  font-size: 14px;
  font-weight: bold;
  border-radius: 999px;
  padding: 3px 14px;
  margin-top: 12px;
  letter-spacing: 0.04em;
}

/* =========================================================================
   ボタン・タップ領域
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 26px;
  font-size: 20px;
  font-weight: bold;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.btn:hover {
  background-color: var(--color-primary-dark);
  color: #fff;
  box-shadow: var(--shadow-md);
}

/* =========================================================================
   案内ボックス（チャンネル登録など）
   ========================================================================= */
.subscribe-box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px 22px;
  margin: 36px 0;
  text-align: center;
}

.subscribe-box p {
  margin-top: 0;
  color: var(--color-text-muted);
}

/* =========================================================================
   準備中プレースホルダー
   ========================================================================= */
.notice-box {
  background-color: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 20px 0;
}

/* =========================================================================
   ツール共通: 入力フィールド
   ========================================================================= */
.field {
  margin-bottom: 30px;
}

.field-label {
  display: block;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 6px;
}

.field-note {
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}

.field-value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: var(--color-primary);
  margin: 8px 0;
}

/* プリセットボタン */
.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.preset-btn {
  min-height: 48px;
  min-width: 64px;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: bold;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.preset-btn:hover {
  background-color: var(--color-accent-bg);
  border-color: var(--color-primary);
}

.preset-btn.is-selected {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* レンジスライダーのつまみ拡大 */
input[type="range"] {
  width: 100%;
  height: 8px;
  margin: 14px 0;
  background: var(--color-accent-bg);
  border-radius: 4px;
  accent-color: var(--color-primary);
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: var(--color-accent-bg);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  margin-top: -11px;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: var(--color-accent-bg);
}

input[type="range"]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

input[type="range"]:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.field-number {
  width: 100%;
  max-width: 180px;
  min-height: 48px;
  font-size: 18px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  margin-top: 8px;
}

.field-number:focus {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

/* 詳しい設定（折りたたみ） */
details.advanced {
  background-color: var(--color-accent-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 4px 20px 20px;
  margin: 24px 0;
}

details.advanced > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
}

details.advanced > summary::-webkit-details-marker {
  display: none;
}

details.advanced > summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 13px;
  color: var(--color-accent);
}

details.advanced[open] > summary::before {
  content: "▼";
}

/* ボタン群 */
.btn-block {
  display: flex;
  width: 100%;
  margin-top: 8px;
}

.btn-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 20px;
  font-size: 18px;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  margin-top: 12px;
}

.btn-reset:hover {
  background-color: var(--color-accent-bg);
}

/* =========================================================================
   結果エリア
   ========================================================================= */
.result {
  margin-top: 36px;
}

.result-headline {
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-primary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-accent);   /* 金の縦帯で要点を強調 */
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin: 16px 0;
}

.disclaimer-box {
  background-color: var(--color-accent-bg);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 16px 0;
}

.disclaimer-box h3 {
  margin-top: 0;
  font-size: 18px;
}

.disclaimer-box p {
  margin-bottom: 0;
  font-size: 16px;
  color: var(--color-text);
}

.chart-wrap {
  margin: 24px 0;
  padding: 16px;
  /* canvas は --color-bg で塗るため、枠も同色にして継ぎ目を消し、罫と影で浮かせる */
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.chart-wrap canvas {
  width: 100%;
  max-width: 680px;
  height: 260px;
  display: block;
}

.result-note {
  font-size: 18px;
}

.warning-note {
  font-size: 16px;
  background-color: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 12px 0;
}

.assumption-list {
  background-color: var(--color-accent-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.assumption-list ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.assumption-list li {
  margin-bottom: 6px;
}

/* =========================================================================
   提案枠（広告プレースホルダー）
   ========================================================================= */
.promo-slot {
  display: block;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  margin: 24px 0;
}

.promo-label {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: var(--color-text-muted);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  padding: 2px 12px;
  margin: 0 0 12px;
  letter-spacing: 0.08em;
}

.promo-placeholder {
  margin: 0;
}

.last-reviewed {
  font-size: 15px;
  color: var(--color-text-muted);
}

/* =========================================================================
   フッター
   ========================================================================= */
.site-footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  margin-top: 48px;
  padding: 28px 0 40px;
}

.footer-links {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.copyright {
  font-size: 15px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
}

/* 屋号の前に金の小さな菱形を置く（署名のような一点） */
.copyright::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background-color: var(--color-accent);
  transform: rotate(45deg);
}

/* =========================================================================
   モーション（控えめ・reduce-motion 尊重）
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .card::after {
    transition: transform 0.18s ease, right 0.18s ease;
  }
  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
  .card:hover::after {
    right: 18px;
  }
  .btn,
  .btn-reset,
  .preset-btn {
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  a {
    transition: color 0.12s ease;
  }
}