:root {
  --color-navy: #0f2a4a;
  --color-navy-dark: #091a30;
  --color-navy-light: #1c3f68;
  --color-slate: #55677d;
  --color-slate-light: #8b98a8;
  --color-slate-soft: #eef1f4;
  --color-blue: #3b6ea5;
  --color-blue-dark: #2d5580;
  --color-blue-soft: #e8eef5;
  --color-red: #a83d3d;
  --color-red-dark: #832f2f;
  --color-red-soft: #f6e9e9;
  --color-green-gray: #5c8272;
  --color-green-gray-dark: #456155;
  --color-green-gray-soft: #e7efeb;
  /* グリーングレーと同じ明度・彩度のオレンジ(色相のみ変更、ツール7〜9用) */
  --color-orange: #826f5c;
  --color-orange-dark: #615345;
  --color-orange-soft: #f1ece7;
  --color-gray-800: #2b323d;
  --color-gray-600: #56626f;
  --color-gray-400: #8d97a3;
  --color-gray-200: #dde3e8;
  --color-gray-100: #eef1f4;
  --color-off-white: #f8f9fb;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, "BIZ UDPGothic", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 700;
  color: var(--color-gray-800);
  background-color: #fff;
}

/* 装飾用の英語表記(キッカー・カード英字ラベル・フッター表記)に使うブランドフォント */
/* 印刷シート(PDF出力)やボタン等の業務用テキストにはあえて適用しない */
.font-brand-en {
  /* Tailwind CDNのユーティリティ(font-bold等)より後に読み込まれるため、weight/stretchはimportantで確実に上書きする */
  font-family: "Bahnschrift SemiLight Condensed", Bahnschrift, "Yu Gothic UI Semilight", "Segoe UI", Arial, sans-serif !important;
  font-weight: 350 !important;
  font-stretch: condensed !important;
}

/* 注釈・補足文・本文説明はボールドを解除 */
.annotation,
.notice-box,
.warning-box,
.form-input,
.form-select,
input,
textarea,
select,
.text-xs,
p.text-gray-600,
.text-sm.text-gray-400,
.text-sm.text-gray-600 {
  font-weight: 400;
}

/* ヘッダー */
#site-header {
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
}

/* モバイルメニュー: 画面下端まで使える固定パネルにし、アコーディオンを両方開いても
   スクロール領域を広く確保する(小さい入れ子スクロールは実機のタッチで反応しづらいため) */
#mobile-menu {
  position: fixed;
  top: 5.25rem;
  right: 1.25rem;
  width: 15rem;
  max-width: calc(100vw - 2rem);
  background-color: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.85rem;
  box-shadow: 0 14px 34px rgba(15, 42, 74, 0.16);
  transition: max-height 0.35s ease, opacity 0.25s ease;
  max-height: 0;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 50;
}
#mobile-menu.open {
  max-height: calc(100vh - 6.5rem);
  max-height: calc(100dvh - 6.5rem);
  opacity: 1;
  overflow-y: auto;
}

/* セクション見出しのアンダーライン */
.heading-underline::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  background-color: var(--color-blue);
  margin-top: 0.9rem;
  border-radius: 2px;
}
.heading-underline.center::after {
  margin-left: auto;
  margin-right: auto;
}

/* ボタン全般: ホバーで上品に浮き上がるエフェクト(ヘッダーの.nav-btnは対象外、色のフェードのみ)。
   .btn-primary(試算する/実行する/比較する等のトリガーボタン)だけは下で専用の演出を持つため対象外 */
button,
.btn-accent,
.btn-outline,
.js-pdf-btn,
.metric-tile,
.wobble {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
button:hover,
.btn-accent:hover,
.btn-outline:hover,
.js-pdf-btn:hover,
.metric-tile:hover,
.wobble:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(59, 110, 165, 0.13);
}
button:active,
.btn-accent:active,
.btn-outline:active,
.js-pdf-btn:active,
.metric-tile:active,
.wobble:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15, 42, 74, 0.1);
}

.nav-btn {
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* ホバー時に色が左から右へスライドインする塗り(共通) */
.btn-accent,
.btn-outline {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.btn-accent::before,
.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.btn-accent:hover::before,
.btn-outline:hover::before {
  transform: scaleX(1);
}

.btn-accent {
  background-color: var(--color-blue);
  color: #fff;
}
.btn-accent::before {
  background-color: var(--color-blue-dark);
}
.btn-outline {
  border: 1.5px solid var(--color-gray-400);
  color: var(--color-gray-800);
}
.btn-outline::before {
  background-color: var(--color-gray-100);
}
.btn-outline:hover {
  border-color: var(--color-navy);
}

/* ========== トリガーボタン(試算する/実行する/比較する/保存する等)全体ルール ==========
   ピル型の他ボタンと視覚的に区別するため角丸を控えめにし(□寄りの印象)、色は常にネイビー固定
   (入力充足状況による色の出し分けは廃止)。ホバー時は光が斜めに走るシャインエフェクト＋
   他ボタンよりわずかに強いリフトで、「押すべき主操作」であることを際立たせる */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0.75rem;
  background-color: var(--color-navy);
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.btn-primary:hover {
  background-color: var(--color-navy-light);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(15, 42, 74, 0.32);
}
.btn-primary:hover::after {
  left: 130%;
}
.btn-primary:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(15, 42, 74, 0.22);
}
/* 必須項目が未入力の間、押しても進めないことを事前に示すグレーアウト状態
   (色分けはready/not-readyの2色配色ではなく、無効化の標準表現として適用) */
.btn-primary:disabled {
  background-color: #b7bfc9;
  color: #f0f2f5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-primary:disabled:hover {
  background-color: #b7bfc9;
  transform: none;
  box-shadow: none;
}
.btn-primary:disabled::after {
  display: none;
}

/* セクション単位の「データクリア」リンク: 1回目クリックで警告色に切り替わり、
   本当に消して良いか一目でわかるようにする(window.confirm()に頼らないため) */
.section-clear-btn.is-confirming {
  color: var(--color-red) !important;
  font-weight: 700;
}

/* データクリア系ボタン共通(全ページ): window.confirm()は使わず、1回目クリックで
   ボタン自身が「本当にクリア？」の警告表示に切り替わり、2回目クリックで実行する。
   ヒーローの全データクリア(白ボタン)だけは専用スタイル側で警告表示する */
button.is-confirming:not(.hero-util-btn) {
  color: var(--color-red) !important;
  font-weight: 700;
}
.btn-outline.is-confirming {
  border-color: var(--color-red) !important;
}

/* ========== 数値の表示ルール ========== */
/* 入力欄(金額・数値)は右寄せ */
.num-input {
  text-align: right;
}
/* 数値入力欄の上下スピナー(1ずつ増減)を完全に非表示 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
/* マイナスの試算結果は赤字(数字の前に△、△はJS側で付与) */
.neg-val {
  color: var(--color-red) !important;
}

/* ========== ？ヘルプツールチップ(国税庁明細書の記載方法の注釈) ========== */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 9999px;
  background-color: var(--color-blue-soft);
  color: var(--color-blue-dark);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  margin-left: 0.3rem;
  vertical-align: middle;
  flex-shrink: 0;
  user-select: none;
}
.help-tip .help-text {
  display: none;
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  max-width: 70vw;
  background-color: var(--color-navy);
  color: #fff;
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.55;
  padding: 0.6rem 0.75rem;
  border-radius: 0.55rem;
  box-shadow: 0 10px 26px rgba(15, 42, 74, 0.28);
  z-index: 60;
  text-align: left;
  white-space: normal;
}
.help-tip .help-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-navy);
}
.help-tip:hover .help-text,
.help-tip.open .help-text {
  display: block;
}

/* ヒーロー帯(ページ最上部)のタイトル横「?」: 説明文の開閉ボタン。
   ヒーローはoverflow:hiddenの背景演出があるためフロート型ツールチップは使わず、
   タップで.hero-info-textを通常フロー内に開閉する方式にする(吹き出しの見切れを回避)。 */
.hero-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  margin-left: 0.4rem;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}
.hero-info-btn:hover,
.hero-info-btn[aria-expanded="true"] {
  background-color: #fff;
  color: var(--color-navy);
}
.hero-info-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  line-height: 1.6;
  margin-top: 0.35rem;
  max-width: 32rem;
}

/* ヒーロー帯の操作ボタン列(TOP MENU/インポート/保存/PDF/全データクリア)。
   すべて同じ幅の□ボタンで揃え、右寄せ・原則1行に収める。スマホでは
   アイコンのみの正方形にして横幅を抑える(ラベルはsm以上でのみ表示)。
   ホバーは色反転ではなく、白いふちがふわっと発光する上品な演出にする */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}
.hero-util-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.hero-util-btn .hero-util-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}
.hero-util-btn .hero-util-label {
  display: none;
}
@media (min-width: 640px) {
  .hero-util-btn {
    width: 8.5rem;
    height: auto;
    padding: 0.55rem 0.6rem;
  }
  .hero-util-btn .hero-util-label {
    display: inline;
  }
}
.hero-util-btn:hover {
  border-color: rgba(255, 255, 255, 0.95);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 16px rgba(255, 255, 255, 0.45);
}
/* 全データクリアだけ他から間隔を空け、うっかり隣のボタンと押し間違えないようにする */
.hero-util-btn.hero-util-danger {
  margin-left: 0.5rem;
}
@media (min-width: 640px) {
  .hero-util-btn.hero-util-danger {
    margin-left: 0.9rem;
  }
}
/* 1回目クリックで警告色に切り替え、本当にクリアしてよいか一目でわかるようにする
   (ラベルが隠れるモバイルでも視認できるよう背景・枠にも警告色を入れる) */
.hero-util-btn.hero-util-danger.is-confirming {
  background-color: rgba(232, 122, 122, 0.28);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 16px rgba(232, 122, 122, 0.55);
}

/* スマホ幅ではヒーローのボタンがアイコンのみになるため、初回訪問時だけ
   簡単な凡例を一度きり表示する(js/menu.jsが生成、localStorageで再表示を抑制) */
.hero-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.5rem;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.4;
}
.hero-hint-close {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
}
@media (min-width: 640px) {
  .hero-hint {
    display: none;
  }
}

/* 版選択カード */
.version-card {
  position: relative;
  cursor: pointer;
  border: 2px solid var(--color-gray-200);
  border-radius: 0.9rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.version-card:hover {
  border-color: var(--color-blue);
}
/* 選択していない方は控えめにして、どちらで計算しているかを一目で分かるようにする */
.version-card:not(.selected) {
  opacity: 0.6;
  background-color: #fafbfc;
}
.version-card:not(.selected):hover {
  opacity: 1;
}
.version-card.selected {
  border-color: var(--color-navy);
  border-width: 3px;
  background-color: var(--color-blue-soft);
  box-shadow: 0 8px 20px rgba(15, 42, 74, 0.18);
}
/* 選択中のカードには右上にラベルを出す */
.version-card.selected::after {
  content: 'この方式で計算中';
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  background-color: var(--color-navy);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.7rem;
  border-bottom-left-radius: 0.7rem;
}

/* 結果ページで「いまどちらの入力方式で計算しているか」を示すチップ */
.tx-mode-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.tx-mode-badges-label {
  font-size: 0.6875rem;
  color: #9ca3af;
}
.tx-mode-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  border: 1.5px solid var(--color-navy);
  border-radius: 999px;
  padding: 0.22rem 0.8rem;
  background-color: #fff;
  white-space: nowrap;
}
.tx-mode-chip-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #6b7280;
}
.tx-mode-chip-value {
  font-size: 0.875rem;
  font-weight: 900;
  color: var(--color-navy);
}

/* ========== 入力の進捗ゲージ(ステッパー上部) ========== */
.progress-track {
  width: 100%;
  height: 0.4rem;
  background-color: var(--color-gray-200);
  border-radius: 9999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background-color: var(--color-navy);
  border-radius: 9999px;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========== 入力ステップ(左サイドの縦型ステッパー) ========== */
.stepper {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stepper li {
  position: relative;
  padding-left: 2.4rem;
  padding-bottom: 1.6rem;
  cursor: pointer;
}
.stepper li:last-child {
  padding-bottom: 0;
}
.stepper li::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  background-color: var(--color-gray-200);
  color: var(--color-gray-600);
  z-index: 1;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.stepper li::after {
  content: "";
  position: absolute;
  left: 0.82rem;
  top: 1.7rem;
  bottom: 0.2rem;
  width: 2px;
  background-color: var(--color-gray-200);
  transition: background-color 0.25s ease;
}
.stepper li:last-child::after {
  display: none;
}
.stepper .step-en {
  display: block;
  font-family: "Bahnschrift SemiLight Condensed", Bahnschrift, "Yu Gothic UI Semilight", "Segoe UI", Arial, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-gray-400);
}
.stepper .step-jp {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-gray-600);
  line-height: 1.35;
}
.stepper li.active::before {
  box-shadow: 0 0 0 4px rgba(15, 42, 74, 0.12);
}
.stepper li.active .step-jp {
  color: var(--color-navy);
}
.stepper li.active .step-en {
  color: var(--color-blue);
}
.stepper li.done::before {
  background-color: var(--color-blue);
  color: #fff;
}
.stepper li.done::after {
  background-color: var(--color-blue);
}
/* 簡易版STEP1〜3の入力充足状況: 未入力=赤、要件を満たしていれば青(.doneより後段のため優先される) */
.stepper li.step-incomplete::before {
  background-color: var(--color-red);
  color: #fff;
}
.stepper li.step-complete::before {
  background-color: var(--color-blue);
  color: #fff;
}

/* 見出しのSTEPバッジ(視認性重視でやや大きめ) */
.step-badge {
  display: inline-block;
  background-color: var(--color-navy);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.75rem;
  border-radius: 9999px;
  margin-right: 0.55rem;
  vertical-align: middle;
}

/* 判定結果の強調バッジ */
.judge-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.85rem;
  background-color: var(--color-navy);
  color: #fff;
}

/* ウォーターフォールと計算表を紐づけるA〜Hタグ(丸囲みレター) */
.wf-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  background-color: var(--color-navy);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  margin-right: 0.4rem;
  flex-shrink: 0;
}

/* 資金の流れ比較グラフ: 税引前利益(左)→最終残高(右)へ、列ごとに順に組み上がる演出。
   各要素の animation-delay はJS側で列インデックスから付与する。.wf-anim が付いた時だけ再生。 */
.wf-anim .wf-bar {
  transform-box: fill-box; /* transform-origin をバー自身の外接矩形基準にする(下端/上端から伸ばす) */
  animation: wfGrow 1.8s cubic-bezier(0.34, 1.12, 0.5, 1) both; /* びよーんと伸びる(軽い行き過ぎ)。以前の約30%速度でゆっくり見せる */
}
.wf-anim .wf-conn {
  transform-box: fill-box;
  transform-origin: left center;
  animation: wfDraw 1.1s ease-out both; /* 点線が左→右に走る */
}
.wf-anim .wf-fade {
  animation: wfFade 1.3s ease-out both; /* ラベル・金額・マーカーはフェードイン */
}
@keyframes wfGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wfDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wfFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wf-anim .wf-bar,
  .wf-anim .wf-conn,
  .wf-anim .wf-fade { animation: none; }
}

/* 将来負債ページのバランスシート比較グラフ: 数値変更のたびにrectのy/heightを
   直接書き換える実装のため、CSSトランジションで「なめらかに余韻を持って」変化させる */
#bsChart rect {
  transition: x 1.2s cubic-bezier(0.22, 1, 0.36, 1), y 1.2s cubic-bezier(0.22, 1, 0.36, 1), height 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
#bsChart text {
  transition: x 1.2s cubic-bezier(0.22, 1, 0.36, 1), y 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  #bsChart rect,
  #bsChart text { transition: none; }
}
/* 帯が小さく文字が入りきらない要素でも、ポインタを乗せると詳細(要素名・金額)を確認できるツールチップ */
#bsChart rect[data-tip] { cursor: pointer; }
.chart-tooltip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background-color: #1f2937;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.6rem;
  border-radius: 0.4rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.chart-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 数値に付く単位(万円・％・年 など)は数字より一回り小さく・控えめに。全ページ共通ルール */
.unit {
  /* 万円・％等の単位は日本語なので、数字側に装飾フォント(Bahnschrift等)を
     指定した親要素の中にあっても標準の和文フォントで表示されるようにする */
  font-family: "BIZ UDPGothic", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.72;
  margin-left: 0.12em;
}

/* ナビゲーションのピル型ボタン: すべて同じ幅で揃える。枠無し・薄いブルーグレー基調 */
.nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.6rem;
  padding: 0.3rem 0.3rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  border: none;
  background-color: var(--color-blue-soft);
  color: var(--color-gray-800);
  white-space: nowrap;
  overflow: visible;
  z-index: 0;
}
/* デスクトップナビだけ角丸スクエア(スクワークル)の数字ボタンにし、1列に収める。
   通常は白地+細い枠線のみ(誠実・洗練な印象)、ホバー/アクティブでネイビー塗りつぶし。
   数字のみを常時表示し、正式名称はホバー時のツールチップで表示する。 */
.site-desktop-nav .nav-btn {
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border-radius: 0.55rem;
  background-color: #fff;
  border: 1.5px solid var(--color-gray-200);
  color: var(--color-navy);
}
.site-desktop-nav .nav-btn::before {
  border-radius: 0.55rem;
}
.site-desktop-nav .nav-btn:hover,
.site-desktop-nav .nav-btn.active {
  border-color: var(--color-navy);
}
/* 数字はカードのOpus.数字と同じ飾り文字(極太・ブランドカラー)を採用。DS系(7〜9)はグリーングレー */
.site-desktop-nav .nav-btn .nav-num {
  position: static;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-blue);
  text-shadow: none;
  pointer-events: none;
}
.site-desktop-nav .nav-btn .nav-num.ds {
  color: var(--color-orange);
}
.site-desktop-nav .nav-btn .nav-num.teal {
  color: var(--color-green-gray);
}
.site-desktop-nav .nav-btn:hover .nav-num,
.site-desktop-nav .nav-btn.active .nav-num {
  color: #fff;
}
/* TOP MENUだけは正式名称のまま、他より横長のスクワークルで表示。
   視認性を優先し、装飾フォント(font-brand-en)ではなく通常のゴシック体を太字・少し大きめで使用。
   ネイビー反転は他ボタンと同じくホバー/アクティブ時のみ(常時反転すると現在地が分からなくなるため)。 */
.site-desktop-nav .nav-btn.font-brand-en {
  width: auto;
  min-width: 5.8rem;
  padding: 0 0.9rem;
  font-family: Arial, "BIZ UDPGothic", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif !important;
  font-size: 0.8rem;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
}
/* ホバー時にボタン下へ全体名称を表示するツールチップ */
.nav-tooltip {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-navy-dark);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 20;
  pointer-events: none;
}
.nav-btn:hover .nav-tooltip {
  opacity: 1;
  visibility: visible;
}

/* 準備中ページのヒーロー帯: 黄色に光る「COMING SOON」装飾テキスト */
/* 管理者用ページの注意書き(このページはアクセス制限されていない旨) */
.admin-warning {
  border: 2px solid var(--color-red, #a83d3d);
  border-radius: 0.75rem;
  background-color: var(--color-red-soft, #f6e9e9);
  padding: 0.9rem 1.1rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #5f2020;
}
.admin-warning-title {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-red-dark, #832f2f);
  margin-bottom: 0.2rem;
}
.admin-warning code {
  background-color: #fff;
  border-radius: 0.25rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.75rem;
}

/* 管理者用ページへの入口ボタン。Ctrl+Shift+Dで表示され、通常は隠れている */
.admin-entry-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  background-color: var(--color-red, #b3382f);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-entry-btn:hover {
  background-color: #8f2b24;
  box-shadow: 0 4px 12px rgba(179, 56, 47, 0.35);
}
.admin-entry-btn.hidden {
  display: none;
}

/* ヒーロー帯の入力/結果バッジ。COMING SOONと同じ発光デザインで、タイトルの下に置く。
   1行増えるぶんは section 側の上下paddingを詰めて帯の高さを保っている */
.hero-io-badge {
  margin-top: 0.3rem;
  font-size: 1.125rem;
  line-height: 1;
}
@media (min-width: 640px) {
  .hero-io-badge { font-size: 1.25rem; }
}

.coming-soon-glow {
  color: #ffd23f;
  animation: comingSoonGlow 2.2s ease-in-out infinite alternate;
}
@keyframes comingSoonGlow {
  from {
    text-shadow: 0 0 8px rgba(255, 210, 63, 0.55), 0 0 18px rgba(255, 210, 63, 0.3), 0 0 32px rgba(255, 210, 63, 0.18);
  }
  to {
    text-shadow: 0 0 14px rgba(255, 210, 63, 0.95), 0 0 32px rgba(255, 210, 63, 0.6), 0 0 56px rgba(255, 210, 63, 0.35);
  }
}
/* INPUT=ライトブルー / OUTPUT=ライトグリーンの発光。複合バッジは単語ごとに塗り分ける */
.io-glow-in {
  color: #6ba3cf;
  animation: ioGlowIn 2.2s ease-in-out infinite alternate;
}
@keyframes ioGlowIn {
  from {
    text-shadow: 0 0 8px rgba(107, 163, 207, 0.45), 0 0 18px rgba(107, 163, 207, 0.25), 0 0 32px rgba(107, 163, 207, 0.14);
  }
  to {
    text-shadow: 0 0 14px rgba(107, 163, 207, 0.75), 0 0 32px rgba(107, 163, 207, 0.45), 0 0 56px rgba(107, 163, 207, 0.25);
  }
}
.io-glow-out {
  color: #6fbb92;
  animation: ioGlowOut 2.2s ease-in-out infinite alternate;
}
@keyframes ioGlowOut {
  from {
    text-shadow: 0 0 8px rgba(111, 187, 146, 0.45), 0 0 18px rgba(111, 187, 146, 0.25), 0 0 32px rgba(111, 187, 146, 0.14);
  }
  to {
    text-shadow: 0 0 14px rgba(111, 187, 146, 0.75), 0 0 32px rgba(111, 187, 146, 0.45), 0 0 56px rgba(111, 187, 146, 0.25);
  }
}
.hero-io-badge .io-sep { color: rgba(255, 255, 255, 0.55); }
/* ホバー時に色だけがふわっとフェードするエフェクト(位置は動かさない) */
.nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background-color: var(--color-navy);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}
.nav-btn:hover::before {
  opacity: 1;
}
.nav-btn:hover {
  color: #fff;
}

/* ナビの番号: カードのOpus.数字と同じ配色で、ボタンから大胆にはみ出す大きな数字 */
.nav-num {
  position: absolute;
  top: -0.85rem;
  left: -0.3rem;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-blue);
  z-index: 2;
  pointer-events: none;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 2px 4px rgba(15, 42, 74, 0.15);
}
/* DS(ディスカッションシート)系ツール7〜9はオレンジ(グリーングレーと同トーン・色相のみ違う) */
.nav-num.ds {
  color: var(--color-orange);
}
/* 5・6(保険料原資/減額)はグリーングレー(7〜9と同じ色) */
.nav-num.teal {
  color: var(--color-green-gray);
}
/* モバイルメニュー内は項目数が多いため、はみ出す装飾数字ではなくボタン内に収まるコンパクト表示にする */
.nav-btn.block-btn .nav-num {
  position: static;
  top: auto;
  left: auto;
  display: inline-block;
  width: 1.4rem;
  font-size: 0.95rem;
  margin-right: 0.4rem;
  text-shadow: none;
  text-align: right;
}

/* 入力エリア(基本情報・決算書情報)だけグリーングレー基調にし、番号付きツールと区別する */
.nav-btn.nav-input {
  background-color: var(--color-green-gray-soft);
}
.nav-btn.nav-input::before {
  background-color: var(--color-green-gray);
}
.nav-btn.nav-input.active {
  background-color: var(--color-green-gray);
  color: #fff;
}
.nav-btn.nav-input.active:hover {
  background-color: var(--color-green-gray-dark);
  color: #fff;
}
.nav-btn.active {
  background-color: var(--color-navy);
  color: #fff;
}
.nav-btn.active:hover {
  background-color: var(--color-navy-light);
  color: #fff;
}
.nav-btn.block-btn {
  display: flex;
  width: 100%;
}

/* ヘッダー: PC幅(lg以上)はメガメニュー表示、それ未満はハンバーガー */
.site-menu-btn {
  display: inline-flex;
}
@media (min-width: 1024px) {
  .site-menu-btn {
    display: none;
  }
}

/* ===== メガメニュー(PC) ===== */
.mega-item {
  position: relative;
}
.mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  background-color: #fff;
  color: var(--color-navy);
  border: 1.5px solid var(--color-gray-200);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.mega-trigger .chevron {
  width: 0.68rem;
  height: 0.68rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.mega-trigger:hover {
  border-color: var(--color-navy);
}
.mega-item.open .mega-trigger {
  border-color: var(--color-navy);
}
.mega-item.open .mega-trigger .chevron {
  transform: rotate(180deg);
}
.mega-trigger.active {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.mega-panel {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  min-width: 16rem;
  background-color: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.9rem;
  box-shadow: 0 18px 40px rgba(15, 42, 74, 0.18);
  padding: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 30;
}
.mega-item.open .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-panel-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.65rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-gray-800);
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.mega-panel-item:hover {
  background-color: var(--color-off-white);
}
.mega-panel-item.active {
  background-color: var(--color-blue-soft);
  color: var(--color-navy);
}
.mega-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.45rem;
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--color-blue);
  background-color: var(--color-blue-soft);
  flex-shrink: 0;
}
.mega-num.teal {
  color: var(--color-green-gray);
  background-color: var(--color-green-gray-soft);
}
.mega-num.ds {
  color: var(--color-orange);
  background-color: var(--color-orange-soft);
}

/* ===== アコーディオン(モバイルメニュー内) ===== */
.mobile-accordion {
  border-radius: 0.7rem;
}
.mobile-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.65rem 1.1rem;
  border-radius: 9999px;
  background-color: var(--color-blue-soft);
  color: var(--color-navy);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
}
/* 現在地のページタイトルに差し替わった際、長い文言でも2行折返しせず省略表示にする */
.mobile-accordion-trigger-label,
.mega-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mobile-accordion-trigger .chevron {
  width: 0.78rem;
  height: 0.78rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.mobile-accordion.open .mobile-accordion-trigger .chevron {
  transform: rotate(180deg);
}
.mobile-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-accordion.open .mobile-accordion-panel {
  max-height: 24rem;
}
.mobile-accordion-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-gray-800);
  border-radius: 0.5rem;
}
.mobile-accordion-link:active {
  background-color: var(--color-off-white);
}
.mobile-accordion-link.active {
  color: var(--color-navy);
  background-color: var(--color-blue-soft);
}

/* 基本情報入力: ヘッダー右上のボタン(白地+ネイビーの楕円囲み) */
.nav-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.3rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  background-color: #fff;
  color: var(--color-navy);
  border: 1.5px solid var(--color-navy);
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-square:hover {
  background-color: var(--color-navy);
  color: #fff;
}
.nav-square.active {
  background-color: var(--color-navy);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
/* PC幅でのみ表示(ナビ折りたたみ時はハンバーガー内へ) */
.site-desktop-only {
  display: inline-flex;
}
#site-header.nav-collapsed .site-desktop-only {
  display: none;
}

/* トップページ: 生命保険ツール(1〜7)・ディスカッションシート(8〜13)の切り替えタブ＋
   基本情報入力への同じ見た目のリンクカードを横並びにする */
.tool-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.85rem;
  max-width: 51rem;
  margin: 0 auto 3rem;
}
@media (max-width: 640px) {
  .tool-tabs {
    grid-template-columns: 1fr;
    max-width: 22rem;
  }
}
.tool-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 1rem 0.75rem;
  border-radius: 0.9rem;
  border: 1.5px solid var(--color-gray-200);
  background-color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.tool-tab-btn:hover {
  border-color: var(--color-navy);
}
.tool-tab-btn.active {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  box-shadow: 0 12px 28px rgba(15, 42, 74, 0.2);
}
.tool-tab-jp {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--color-navy);
  letter-spacing: 0.02em;
}
.tool-tab-btn.active .tool-tab-jp {
  color: #fff;
}
.tool-tab-en {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-gray-400);
}
.tool-tab-btn.active .tool-tab-en {
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 480px) {
  .tool-tab-jp {
    font-size: 0.92rem;
  }
}

/* カードホバー */
.lift-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lift-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 42, 74, 0.1);
}

/* フォーム */
.form-input,
.form-select {
  border: 1.5px solid var(--color-gray-200);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(15, 42, 74, 0.12);
}

/* キーボード操作時のフォーカスリング(自社ブランドカラー)。マウスクリック時は表示されない */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 注意書きボックス(ベースカラーのブルーグレー系) */
.notice-box {
  background-color: var(--color-slate-soft);
  border: 1px solid var(--color-gray-200);
  color: var(--color-navy);
}

/* 警告ボックス(赤系) */
.warning-box {
  background-color: var(--color-red-soft);
  border: 1px solid #e0bcbc;
  color: var(--color-red-dark);
}

/* ========== ヒーロー(写真なし・パターン背景) ========== */
.hero-pattern {
  position: relative;
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 55%, var(--color-navy-light) 100%);
  overflow: hidden;
}
.hero-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 30% 30%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, black 0%, transparent 70%);
}
.hero-pattern::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -20%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, rgba(59, 110, 165, 0.16) 0%, transparent 65%);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background-color: var(--color-navy);
  color: #fff;
}

/* ========== ツール(計算機)カード ========== */
.tool-badge-live {
  background-color: var(--color-blue-soft);
  color: var(--color-blue-dark);
}
.tool-badge-soon {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}

.calc-section {
  border: 1.5px solid var(--color-gray-200);
  border-radius: 1rem;
}

.calc-result-card {
  background: linear-gradient(135deg, var(--color-navy-dark), var(--color-navy));
  color: #fff;
  border-radius: 1rem;
}

/* 自社株×生命保険(詳細入力): 株主の状況がSTEP2(株価計算前)で表示される間は
   相続税評価額・法人税法上評価額の列が未計算のため非表示にする */
.hide-eval-cols .ss-eval-col {
  display: none;
}

/* 自社株×生命保険: STEP1の資本金・会社規模・Lの割合は簡易入力/TDB・TSR経由でのみ表示
   (詳細入力ではSTEP4で会社規模を別途自動判定するため非表示) */
.hide-simple-fields .ss-simple-only {
  display: none;
}

/* 自社株×生命保険: 株主の状況の「グループ」列は詳細入力(同族株主等の判定用)でのみ表示 */
.hide-group-col .ss-group-col {
  display: none;
}

/* 自社株×生命保険(詳細入力から): 自社株評価の時価総額は詳細入力の結果からすべて
   自動入力されるため、入力欄の見た目をやめて計算結果と同じ表示にする */
.detail-readonly-eval .ss-eval {
  border: none;
  background: transparent;
  padding-right: 0;
  pointer-events: none;
}

/* ========== 計算過程パネル: 「取引相場のない株式の明細書」風の枠付き数値ボックス・数式表示 ========== */
.calc-formula-box {
  border: 1.5px solid var(--color-gray-300, #cbd2d9);
  border-radius: 0.5rem;
  padding: 0.4rem 0.7rem;
  background: #fff;
  text-align: right;
  min-width: 5.5rem;
}
.calc-formula-box .fb-label {
  font-size: 0.66rem;
  color: #8a8f98;
  text-align: left;
  margin-bottom: 0.15rem;
  white-space: nowrap;
}
.calc-formula-box .fb-value {
  font-weight: 700;
  font-size: 0.85rem;
  color: #2b2f36;
}
.calc-formula-frac {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 0.72rem;
  padding: 0 0.3rem;
}
.calc-formula-frac .fb-num {
  padding-bottom: 0.25rem;
  white-space: nowrap;
  text-align: center;
}
.calc-formula-frac .fb-den {
  border-top: 1.5px solid #4b5563;
  text-align: center;
  padding-top: 0.25rem;
  font-weight: 700;
}
.calc-formula-op {
  font-weight: 900;
  font-size: 1rem;
  color: #0f2a4a;
  padding: 0 0.1rem;
}

/* 自社株評価額の計算過程パネル: デフォルト折りたたみのトグル見出し */
.calc-process-toggle {
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
}
.calc-process-toggle .chevron {
  width: 0.8rem;
  height: 0.8rem;
  color: #6b7280;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
#dtCalcProcess.open .calc-process-toggle .chevron {
  transform: rotate(180deg);
}

/* 株数の入力欄: 発行済株式数を超えて入力された場合に薄い赤で警告する */
.input-error {
  background-color: #fef2f2 !important;
  border-color: #fca5a5 !important;
}

/* ========== 非課税×生命保険: 所得税計算シートの縦1列レイアウト ==========
   入力に不慣れな人でも迷わないよう、1項目1行(左=項目名/右=入力欄)で縦に並べる */
.tx-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
}
.tx-field-row:last-child {
  border-bottom: none;
}
.tx-field-row > .tx-field-label {
  display: flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}
.tx-field-row > .tx-field-input {
  flex: 0 0 auto;
  width: 11rem;
  max-width: 45%;
}
.tx-field-row > .tx-field-input input,
.tx-field-row > .tx-field-input select {
  width: 100%;
}
/* 自動計算行: 入力欄ではなく計算結果を右に表示する */
.tx-field-row.is-auto {
  background-color: #f7f9fc;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  border-radius: 0.4rem;
}
.tx-field-row .tx-field-value {
  flex: 0 0 auto;
  width: 11rem;
  max-width: 45%;
  text-align: right;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-navy);
}
.tx-group-title {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--color-navy);
  letter-spacing: 0.04em;
  margin: 1.4rem 0 0.35rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--color-navy);
}
.tx-group-title:first-child {
  margin-top: 0;
}
.tx-group-note {
  font-size: 0.7rem;
  color: #8a8f98;
  margin: 0.3rem 0 0.5rem;
}
@media (max-width: 639px) {
  .tx-field-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  .tx-field-row > .tx-field-input,
  .tx-field-row .tx-field-value {
    width: 100%;
    max-width: 100%;
  }
}

/* 非課税×生命保険: 生命保険の設計(グラフと同じ画面に収める密な入力エリア)
   解説はすべて .help-tip の ? に格納し、見えている情報は項目名と数値だけにする */
.tx-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1.25rem 0 0.6rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e5e7eb;
}
.tx-plan-head-title {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-navy);
}
/* 生命保険の設計だけをクリアするボタン(window.confirm()は使わずボタン自身で確認する) */
.tx-plan-clear-btn.is-confirming {
  color: var(--color-red) !important;
  font-weight: 700;
}
.tx-plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .tx-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tx-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tx-plan-col {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.7rem 0.75rem 0.75rem;
  background-color: #fcfdfe;
}
.tx-plan-title {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.tx-plan-unit {
  font-size: 0.625rem;
  font-weight: 700;
  color: #6b7280;
  background-color: #eef2f7;
  border-radius: 0.25rem;
  padding: 0.05rem 0.3rem;
}
/* 個人契約/法人契約は白抜きで強調し、どちらの契約で用意する枠かを一目で分かるようにする */
.tx-plan-sub {
  display: inline-block;
  margin: 0.6rem 0 0.3rem;
  padding: 0.15rem 0.65rem;
  border-radius: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background-color: var(--color-navy);
}
.tx-plan-sub.is-corp {
  background-color: #0f482b;
}
.tx-plan-sub:first-of-type {
  margin-top: 0;
}
.tx-plan-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tx-plan-field + .tx-plan-field {
  margin-top: 0.35rem;
}
.tx-plan-field > label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  color: #374151;
  line-height: 1.3;
}
.tx-plan-field > input,
.tx-plan-field > select {
  border-radius: 0.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.875rem;
}
.tx-plan-field > input {
  flex: 0 0 6rem;
  width: 6rem;
  text-align: right;
}
/* 選択肢が長い項目はラベルを上に置いて全幅で表示する */
/* 前提となる項目が未入力のあいだは操作できないことを見た目でも示す */
.tx-plan-field > input:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}
.tx-plan-field.is-stack {
  display: block;
}
.tx-plan-field.is-stack > label {
  display: block;
  margin-bottom: 0.12rem;
}
.tx-plan-field.is-stack > select {
  width: 100%;
}
.tx-plan-auto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px dashed #e5e7eb;
  font-size: 0.6875rem;
  color: #6b7280;
}
.tx-plan-auto > span:last-child {
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
}
/* MAXお得額(枠を使い切ったときの軽減額)は目立たせる */
.tx-plan-auto.is-max {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid #e5e7eb;
}
.tx-plan-auto.is-max > span:last-child {
  font-size: 0.875rem;
  color: #2d5580;
}
/* 入力欄の横に出す「あと◯◯」の余力表示 */
/* 「あと◯◯」は項目名と同じ行に並べる(改行させない) */
.tx-plan-room {
  display: inline;
  margin-left: 0.5em;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2d5580;
  white-space: nowrap;
}
.tx-plan-room.is-full {
  color: #9ca3af;
  font-weight: 400;
}

/* 非課税×生命保険: 所得税グループ(ネイビー)と相続税グループ(グリーン)のまとまり。
   グリーンはネイビーと同じ彩度・明度で色相だけ変えた値(HSL 211→150)を使う */
.tx-pair {
  border-radius: 1rem;
  border: 1.5px solid;
  padding: 0.85rem;
}
.tx-pair.is-navy {
  --tx-c1: #0f2a4a;
  --tx-c2: #3b6ea5;
  --tx-c3: #7a9cc0;
  --tx-accent: #2d5580;
  --tx-pill-bg: #eef2f7;
  border-color: #cbd7e5;
  background-color: #f5f8fb;
}
.tx-pair.is-green {
  --tx-c1: #0f482b;
  --tx-c2: #3ba570;
  --tx-c3: #7ac09d;
  --tx-accent: #2d8056;
  --tx-pill-bg: #e7f3ed;
  border-color: #c2e2d1;
  background-color: #f4faf7;
}
.tx-pair-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  padding-left: 0.55rem;
  border-left: 4px solid var(--tx-c1);
  font-size: 0.9375rem;
  font-weight: 900;
  color: var(--tx-c1);
}
.tx-pair-head-sub {
  font-size: 0.6875rem;
  font-weight: 400;
  color: #9ca3af;
}
.tx-pair-body > * + * {
  margin-top: 0.5rem;
}
/* 左右のグループでカードの合計高さを揃える(左3枚 = 右2枚) */
.tx-pair-body.is-even {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tx-pair-body.is-even > * {
  margin-top: 0;
  flex: 1 1 0;
}
.tx-pair, .tx-pair-body.is-even {
  height: 100%;
}
.tx-pair {
  display: flex;
  flex-direction: column;
}
.tx-pair-body {
  flex: 1 1 auto;
}
/* 保険料の区分ごとのカードは高さを抑えた簡易版にする */
.tx-gauge-card.is-slim {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.55rem 0.7rem;
}
/* 簡易版カードの見出し行(項目名 + 契約区分) */
.tx-gauge-slim-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.tx-gauge-tag.is-slim {
  font-size: 0.625rem;
  padding: 0.1rem 0.5rem;
}
.tx-gauge-tag.is-corp {
  background-color: #0f482b;
}
.tx-gauge-title.is-slim {
  font-size: 0.8125rem;
  font-weight: 700;
}
.tx-gauge-pre {
  font-size: 0.55em;
  font-weight: 700;
  color: #9ca3af;
  margin-right: 0.3em;
}
.tx-gauge-now.is-slim {
  font-size: 1.35rem;
}
@media (min-width: 640px) {
  .tx-gauge-now.is-slim { font-size: 1.5rem; }
}
.tx-gauge-card.is-slim .tx-gauge-head {
  margin-bottom: 0.1rem;
}
.tx-gauge-card.is-slim .tx-gauge-lead {
  margin: 0.15rem 0 0;
  font-size: 0.6875rem;
}
.tx-gauge-card.is-slim .tx-gauge-pill {
  padding: 0.1rem 0.5rem;
  font-size: 0.625rem;
}
.tx-gauge-card.is-slim .tx-gauge-pill > span:first-child {
  font-size: 0.875rem;
}
.tx-gauge-title {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.3;
  color: var(--tx-c1, var(--color-navy));
}
@media (min-width: 640px) {
  .tx-gauge-title { font-size: 1.0625rem; }
}
/* 個人契約/法人契約などの区分は白抜きで強調する */
.tx-gauge-tag {
  flex-shrink: 0;
  display: inline-block;
  background-color: var(--tx-c1, var(--color-navy));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 0.18rem 0.7rem;
  border-radius: 0.4rem;
  white-space: nowrap;
}
/* グラフの内訳表示を切り替えるボタン */
.tx-detail-btn {
  border: 1.5px solid var(--color-navy);
  border-radius: 999px;
  background-color: #fff;
  color: var(--color-navy);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.28rem 0.95rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tx-detail-btn:hover {
  background-color: var(--color-blue-soft);
}
.tx-detail-btn.is-on {
  background-color: var(--color-navy);
  color: #fff;
}

.tx-gauge-card {
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background-color: #fff;
  padding: 0.7rem 0.75rem;
}
.tx-swatch {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0.125rem;
}
/* 契約区分のチップだけ色を分ける(個人契約=ネイビー / 法人契約=グリーン)。
   カード本体の配色はグループの色をそのまま使う */
.tx-gauge-card.is-personal .tx-gauge-tag {
  background-color: #0f2a4a;
}
.tx-swatch-1 { background-color: var(--tx-c1); }
.tx-swatch-2 { background-color: var(--tx-c2); }
.tx-swatch-3 { background-color: var(--tx-c3); }
.tx-accent { color: var(--tx-accent); }

/* 非課税×生命保険: 軽減額ゲージの見出し(現状の金額と活用率バッジ) */
.tx-gauge-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}
.tx-gauge-now {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--tx-c1, var(--color-navy));
}
@media (min-width: 640px) {
  .tx-gauge-now { font-size: 2.4rem; }
}
.tx-gauge-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background-color: var(--tx-pill-bg, #eef2f7);
  color: var(--tx-accent, #2d5580);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}
.tx-gauge-pill > span:first-child {
  font-size: 1.05rem;
  font-weight: 900;
}
/* 使い切っているときは色を変えて「もう伸びしろがない」ことを示す */
.tx-gauge-pill.is-full {
  background-color: var(--tx-c1, var(--color-navy));
  color: #fff;
}
.tx-gauge-lead {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  color: #6b7280;
}

/* 凡例(内訳)は既定で閉じておき、必要なときだけ開く */
.tx-legend > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  color: #9ca3af;
}
.tx-legend > summary::-webkit-details-marker {
  display: none;
}
.tx-legend > summary::before {
  content: '▶';
  font-size: 0.5rem;
}
.tx-legend[open] > summary::before {
  content: '▼';
}
.tx-legend > summary:hover {
  color: var(--tx-c1, var(--color-navy));
}
.tx-legend > dl {
  margin-top: 0.45rem;
}
.tx-gauge-lead.is-full {
  color: var(--tx-accent, #2d5580);
  font-weight: 700;
}

/* 非課税×生命保険: 軽減額グラフの帯が左から伸びるアニメーション */
@keyframes txSaveBarGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.tx-save-bar {
  transform-origin: left center;
  animation: txSaveBarGrow 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ========== 計算ロジックの開示(フッターの「計算ロジック」ボタンで各セクション下に表示) ========== */
.calc-logic {
  display: none;
  margin-top: 1.25rem;
  border: 1.5px dashed var(--color-navy);
  border-radius: 0.75rem;
  background-color: #f7f9fc;
  padding: 1rem 1.25rem;
}
.calc-logic.is-open {
  display: block;
}
.calc-logic-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--color-navy);
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}
.calc-logic-title::before {
  content: "f(x)";
  font-family: "Arial", sans-serif;
  font-size: 0.66rem;
  background: var(--color-navy);
  color: #fff;
  border-radius: 0.3rem;
  padding: 0.1rem 0.4rem;
}
.calc-logic dl {
  font-size: 0.76rem;
  line-height: 1.6;
}
.calc-logic dt {
  font-weight: 700;
  color: #2b2f36;
  margin-top: 0.55rem;
}
.calc-logic dt:first-child {
  margin-top: 0;
}
.calc-logic dd {
  color: #4b5563;
  margin-left: 0;
}
.calc-logic code {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.74rem;
  background: #fff;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 0.25rem;
  padding: 0.05rem 0.3rem;
}
.calc-logic-note {
  font-size: 0.7rem;
  color: #8a8f98;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

/* フッターの「計算ロジック」ボタン: 不具合報告ボタンと並ぶ同型ボタン。ONで白背景反転 */
.footer-logic-btn.is-on {
  background-color: #fff;
  color: #0f2a4a;
}

/* ========== 同族株主等の判定: YES/NOフローチャート ========== */
.fam-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fam-flow-box {
  border: 2px solid var(--color-navy);
  border-radius: 0.65rem;
  padding: 0.75rem 1.25rem;
  text-align: center;
  background: #fff;
  max-width: 28rem;
  width: 100%;
}
.fam-flow-box .fam-q {
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
.fam-flow-box .fam-a {
  font-size: 0.76rem;
  color: #6b7280;
}
.fam-flow-badge {
  display: inline-block;
  font-weight: 900;
  font-size: 0.72rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.fam-flow-badge.yes {
  background: var(--color-navy);
  color: #fff;
}
.fam-flow-badge.no {
  background: #e5e7eb;
  color: #6b7280;
}
.fam-flow-arrow {
  font-size: 1.2rem;
  color: var(--color-navy);
  line-height: 1;
  padding: 0.2rem 0;
}
.fam-flow-result {
  border: 2px solid var(--color-navy);
  background: var(--color-navy);
  color: #fff;
  border-radius: 0.65rem;
  padding: 0.9rem 1.5rem;
  text-align: center;
  font-weight: 900;
  font-size: 0.9rem;
  max-width: 28rem;
  width: 100%;
}
.fam-flow-result .fam-note {
  font-weight: 500;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.25rem;
}

/* ========== グラフ: 棒が左から順に伸びるアニメーション ========== */
@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.chart-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: barGrow 0.5s cubic-bezier(0.22, 1.4, 0.4, 1) backwards;
}

/* 評価額タイル: 通常はネイビーの枠囲み+白背景+ネイビー文字で統一。選択時のみランプ点灯+背景がグラフの棒の色になる(JSがbackground/border-colorを切り替え) */
.metric-tile {
  position: relative;
  cursor: pointer;
  background-color: #fff;
  border: 1.5px solid var(--color-navy);
  transition: background-color 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.15s ease, transform 0.2s ease;
}
/* 未選択時はラベル・数字とも薄いブルーグレーで統一。選択時のみ白抜きにする */
.metric-tile .tile-label {
  margin-left: 0.55rem;
  color: var(--color-slate-light);
  transition: color 0.15s ease;
}
.metric-tile .tile-value {
  margin-left: 0.55rem;
  text-align: right;
  transition: color 0.15s ease;
}
/* 老眼対応: 数字だけ約2倍に拡大し、単位「万円」は従来サイズのまま */
.metric-tile .tile-value .tile-num {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--color-slate-light);
  transition: color 0.15s ease;
}
.metric-tile .tile-value .tile-unit {
  font-size: 0.875rem;
  font-weight: 700;
  margin-left: 0.2rem;
  color: var(--color-slate-light);
  transition: color 0.15s ease;
}
.metric-tile.tile-selected .tile-label {
  color: #fff;
}
.metric-tile.tile-selected .tile-value .tile-num,
.metric-tile.tile-selected .tile-value .tile-unit {
  color: #fff;
}

/* 選択状態は左上のランプ点灯のみで表現する(タイル自体の色は変えない)。点灯色は指標に関わらず鮮やかなブルーで統一 */
.tile-lamp {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 0.55rem;
  height: 0.55rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(120, 130, 140, 0.35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
@keyframes lampPulse {
  0%, 100% {
    box-shadow: 0 0 5px 2px rgba(var(--lamp-rgb, 41, 121, 255), 0.8);
  }
  50% {
    box-shadow: 0 0 10px 3px rgba(var(--lamp-rgb, 41, 121, 255), 0.95);
  }
}
.tile-lamp.is-lit {
  background-color: #2979ff;
  animation: lampPulse 1.8s ease-in-out infinite;
}

/* 評価額推移表: シナリオA/Bを配色で分け(A=ネイビー系(基調)/B=ブルー系(対策後=ライト))、行ゼブラで濃淡を付ける */
#trendTable td.col-saizoku-a,
#trendTable td.col-houjin-a,
#trendTable td.col-ruiji-a,
#trendTable td.col-junsisan-a,
#trendTable td.col-rim-a { background-color: rgba(15, 42, 74, 0.06); }
#trendTable td.col-saizoku-b,
#trendTable td.col-houjin-b,
#trendTable td.col-ruiji-b,
#trendTable td.col-junsisan-b,
#trendTable td.col-rim-b { background-color: rgba(59, 110, 165, 0.05); }
/* 行ゼブラ(偶数行を少し濃く) */
#trendTableBody tr:nth-child(even) td.col-saizoku-a,
#trendTableBody tr:nth-child(even) td.col-houjin-a,
#trendTableBody tr:nth-child(even) td.col-ruiji-a,
#trendTableBody tr:nth-child(even) td.col-junsisan-a,
#trendTableBody tr:nth-child(even) td.col-rim-a { background-color: rgba(15, 42, 74, 0.14); }
#trendTableBody tr:nth-child(even) td.col-saizoku-b,
#trendTableBody tr:nth-child(even) td.col-houjin-b,
#trendTableBody tr:nth-child(even) td.col-ruiji-b,
#trendTableBody tr:nth-child(even) td.col-junsisan-b,
#trendTableBody tr:nth-child(even) td.col-rim-b { background-color: rgba(59, 110, 165, 0.13); }
#trendTableBody tr:nth-child(even) td:first-child { background-color: #f3f6f9; }
/* 5年ごとの区切り線。現在はブロックに含めず1つズラす(現在 | 1〜5年後 | 6〜10年後 | …)。
   線は1年後・6年後・11年後…(2,7,12…行目)の上端に引く */
#trendTableBody tr:nth-child(5n + 2) td { border-top: 1.5px solid #aeb9c6; }
/* シナリオA/Bの境界に太い区切り線を1本だけ入れて2ブロックを視覚的に分ける。
   グループ帯・項目行・本文のすべてで同じ濃紺2.5pxを引き、上から下まで一直線にする */
#trendTable td.col-saizoku-b,
#trendTable thead th.sc-b-start {
  border-left: 2.5px solid #0f2a4a !important;
}

/* 別枠強調ボックス(退職金・生命保険の契約条件) */
.field-highlight {
  border-radius: 0.65rem;
  border-left-width: 4px;
  border-left-style: solid;
  background-color: #fff;
  padding: 0.9rem 1rem;
}
.field-highlight-title {
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}
.field-highlight-navy {
  border-left-color: var(--color-navy);
}
.field-highlight-navy .field-highlight-title {
  color: var(--color-navy);
}
.field-highlight-red {
  border-left-color: var(--color-red);
}
.field-highlight-red .field-highlight-title {
  color: var(--color-red-dark);
}
.field-highlight-amber {
  border-left-color: #b0651b;
}
.field-highlight-amber .field-highlight-title {
  color: #8a4f15;
}

/* グラフ背景オーバーレイの表示トグルボタン(死亡保険金額・退職金) */
.overlay-toggle {
  --accent: var(--color-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.35rem;
  padding: 0.5rem 0.4rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 800;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background-color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
/* 上限/下限に達して押せないボタン(例: 表示するBSの選択数が2〜3の範囲を超える操作)を薄くして分かるようにする */
.overlay-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (min-width: 640px) {
  .overlay-toggle {
    width: 8.2rem;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.74rem;
  }
}
.overlay-toggle .dot {
  width: 0.55rem;
  height: 0.55rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--accent);
  transition: background-color 0.2s ease;
}
.overlay-toggle.is-on {
  background-color: var(--accent);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
/* アクティブ時はボタン自体の色に合わせて別の色で光るシグナルランプにする(赤→黄、オレンジ→赤、ネイビー→青) */
.overlay-toggle.is-on .dot {
  background-color: rgb(var(--lamp-rgb, 41, 121, 255));
  animation: lampPulse 1.8s ease-in-out infinite;
}
.overlay-toggle-red {
  --accent: var(--color-red);
  --lamp-rgb: 245, 200, 40;
}
.overlay-toggle-navy {
  --accent: var(--color-navy);
  --lamp-rgb: 41, 121, 255;
}
.overlay-toggle-amber {
  --accent: #b0651b;
  --lamp-rgb: 230, 57, 62;
}
.overlay-toggle-burgundy {
  --accent: #7a2436;
  --lamp-rgb: 251, 146, 60;
}
.overlay-toggle-green {
  --accent: #1f6b3f;
  --lamp-rgb: 74, 222, 128;
}
/* 生命保険の契約条件内で使う、幅が可変のインライン版トグル(死亡保険金額の税引後表示切替など) */
.overlay-toggle-inline {
  width: auto;
  padding: 0.4rem 0.75rem;
}
/* 将来負債グラフのトグル群専用: 上下の存在感を抑えた小型ボタン。幅は最も長い「生命保険あり/なし」の
   表示に合わせた固定幅にし、全ボタンのサイズを揃える(狭い画面では横スクロールで対応する) */
.overlay-toggle-compact {
  width: 6rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.64rem;
  gap: 0.3rem;
}
.overlay-toggle-compact .dot {
  width: 0.42rem;
  height: 0.42rem;
}
@media (min-width: 640px) {
  .overlay-toggle-compact {
    width: 6rem;
    padding: 0.3rem 0.45rem;
    font-size: 0.68rem;
  }
}
/* 将来負債グラフの「生命保険あり/なし」ボタン: 予測BSのON/OFFに連動してふわっと(ゆっくり)表示/非表示を切り替える。
   display:noneは瞬時に消えてしまうため使わず、幅・余白・不透明度をまとめてトランジションさせて滑らかに出し入れする */
.overlay-toggle-collapsible {
  max-width: 10rem;
  opacity: 1;
  transform: scale(1);
  overflow: hidden;
  transition: max-width 0.6s ease, opacity 0.5s ease, transform 0.5s ease, padding 0.6s ease, border-width 0.6s ease, margin 0.6s ease;
}
.overlay-toggle-collapsible.is-collapsed {
  max-width: 0;
  opacity: 0;
  transform: scale(0.85);
  padding-left: 0;
  padding-right: 0;
  border-left-width: 0;
  border-right-width: 0;
  margin-left: 0;
  margin-right: 0;
  pointer-events: none;
}

/* ========== 印刷用シート(PDF出力・A4横) ========== */
.print-sheet {
  display: none;
}

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm 12mm;
  }

  html, body {
    background: #fff !important;
  }

  /* 画面用要素をすべて隠す */
  body > header,
  body > main,
  body > footer {
    display: none !important;
  }

  /* 印刷シートのみ表示 */
  .print-sheet {
    display: block !important;
    color: #1f2733;
    font-weight: 400;
  }

  .print-sheet * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 著作権表記: position:fixedは印刷で全ページに繰り返し描画される */
  .print-page-cr {
    display: block !important;
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 6.5pt;
    color: #98a1ac;
    background: #fff;
    padding-left: 4px;
  }
}

.print-page-cr { display: none; }

/* 印刷シートの内部レイアウト(画面プレビュー時にも同じ見た目) */
.print-sheet {
  font-size: 10pt;
  line-height: 1.5;
}

/* ヘッダー帯 */
.print-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2.5px solid var(--color-navy);
  padding-bottom: 8px;
  margin-bottom: 6px;
}
.print-brand {
  font-weight: 700;
  font-size: 13pt;
  color: var(--color-navy);
  letter-spacing: 0.02em;
}
.print-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15pt;
  color: var(--color-navy);
}
.print-title .print-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--color-navy);
  border-radius: 4px;
  color: #fff;
}
.print-meta {
  font-size: 9pt;
  color: var(--color-gray-600);
  text-align: right;
}
.print-unit {
  text-align: right;
  font-size: 8.5pt;
  color: var(--color-gray-600);
  margin-bottom: 4px;
}

/* セクション見出し(■) */
.print-sec {
  font-weight: 700;
  font-size: 11pt;
  color: var(--color-navy);
  margin: 14px 0 6px;
}
.print-sec::before {
  content: "\25A0";
  margin-right: 6px;
  color: var(--color-navy);
}

/* テーブル */
.print-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
}
.print-table th {
  background: var(--color-navy);
  color: #fff;
  font-weight: 700;
  padding: 5px 10px;
  text-align: right;
  border: 1px solid var(--color-navy);
}
.print-table th.lbl {
  text-align: left;
}
.print-table td {
  border: 1px solid var(--color-gray-200);
  padding: 5px 10px;
  text-align: right;
}
.print-table td.lbl {
  text-align: left;
  background: var(--color-off-white);
  font-weight: 700;
}
.print-table tr.highlight td {
  background: var(--color-blue-soft);
  font-weight: 700;
}
.print-table tr.total td {
  background: var(--color-slate-soft);
  font-weight: 700;
}
.print-table td.neg {
  color: var(--color-red-dark);
}

/* 2カラムレイアウト */
.print-cols {
  display: flex;
  gap: 18px;
}
.print-cols > * {
  flex: 1;
  min-width: 0;
}

/* グラフ枠 */
.print-chart {
  width: 100%;
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  padding: 8px;
  margin-top: 4px;
}
.print-chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.print-legend {
  display: flex;
  gap: 16px;
  font-size: 8.5pt;
  color: var(--color-gray-600);
  margin-top: 4px;
}
.print-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.print-legend i {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
}

/* 数値サマリーの小箱 */
.print-stats {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.print-stats > div {
  flex: 1;
  border: 1px solid var(--color-gray-200);
  border-radius: 6px;
  padding: 8px 10px;
}
.print-stats .k {
  font-size: 8.5pt;
  color: var(--color-gray-600);
}
.print-stats .v {
  font-size: 13pt;
  font-weight: 700;
  color: var(--color-navy);
}

/* 下部キーメッセージ */
.print-keymsg {
  margin-top: 16px;
  text-align: center;
  font-weight: 700;
  font-size: 11.5pt;
  color: var(--color-navy);
  border-top: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  padding: 8px 0;
}

/* フッター */
.print-foot {
  margin-top: 12px;
  font-size: 7.5pt;
  color: var(--color-gray-600);
  line-height: 1.6;
}
.print-foot .cr {
  text-align: right;
  margin-top: 4px;
  color: var(--color-gray-400);
}

.print-note {
  font-size: 8pt;
  color: var(--color-gray-600);
  margin-top: 4px;
}

/* ========== PC・iPad 最適化 ========== */

/* 横スクロールするテーブル等はiOSで慣性スクロール */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* タップ時の青いハイライトを上品な色に */
a,
button,
.nav-btn,
.lift-card {
  -webkit-tap-highlight-color: rgba(59, 110, 165, 0.05);
}

/* SVGグラフ・画像はコンテナ幅に追従(はみ出し防止) */
svg {
  max-width: 100%;
}

/* タブレット(iPad縦横)向けの調整 */
@media (min-width: 768px) and (max-width: 1024px) {
  /* ヒーロー見出しの折り返しを自然に */
  .hero-pattern h1 {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* タッチ端末(iPad・iPhone等)専用の最適化 */
@media (hover: none) and (pointer: coarse) {
  /* iOS Safariはフォントが16px未満の入力欄でフォーカス時に自動ズームするため防止 */
  input,
  select,
  textarea,
  .form-input,
  .form-select {
    font-size: 16px;
  }

  /* ホバーが無い端末ではタップで押下フィードバックを出す */
  .lift-card:active {
    transform: scale(0.985);
    box-shadow: 0 6px 16px rgba(15, 42, 74, 0.12);
  }
  .nav-btn:active::before,
  .btn-primary:active::before,
  .btn-accent:active::before,
  .btn-outline:active::before {
    transform: scaleX(1);
  }
  .nav-btn:active {
    color: #fff;
  }

  /* タッチしやすいよう最低限のタップ領域を確保 */
  #mobile-menu .nav-btn {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

/* ========== 退職金×生命保険(1ページ完結) ==========
   このページの肝は「給与で受け取る場合と退職金で受け取る場合の手取り差」。
   最上部に比較グラフを置き、下の入力を変えると即座に動く構成にしている。
   クラスはすべて .rb- 接頭辞でこのページ専用に閉じる */
.rb-main {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  padding: 1.4rem 1.3rem 1.1rem;
  box-shadow: 0 8px 24px rgba(59, 110, 165, 0.05);
  text-align: center;
}
.rb-headline-lead {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-slate);
  letter-spacing: 0.02em;
}
.rb-headline-num {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.05;
  color: var(--color-navy);
  margin: 0.1rem 0;
  white-space: nowrap;
}
.rb-headline-tail {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--color-navy);
  margin-bottom: 1.1rem;
}
@media (min-width: 640px) {
  .rb-main { padding: 1.8rem 2rem 1.3rem; }
  .rb-headline-num { font-size: 3.4rem; }
  .rb-headline-lead { font-size: 0.85rem; }
}

/* --- 比較の帯グラフ(A:給与 / B:退職金) --- */
.rb-bars {
  text-align: left;
}
.rb-bar-row + .rb-bar-row {
  margin-top: 0.8rem;
}
.rb-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.rb-bar-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--color-gray-800);
}
.rb-bar-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 9999px;
  background: var(--color-slate-light);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  flex-shrink: 0;
}
.rb-bar-tag.is-b {
  background: var(--color-navy);
}
.rb-bar-note {
  background: var(--color-blue-soft);
  color: var(--color-blue-dark);
  border-radius: 0.3rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
}
.rb-bar-net {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-navy);
  white-space: nowrap;
}
.rb-bar-net-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-slate-light);
  margin-right: 0.35rem;
}
.rb-chart {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 凡例 --- */
.rb-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-gray-100);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-slate);
}
.rb-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.rb-sw {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 0.18rem;
  flex-shrink: 0;
}
.rb-sw-1 { background: #0f2a4a; }
.rb-sw-2 { background: #a83d3d; }
.rb-sw-3 { background: #d79c9c; }
.rb-legend-note {
  margin-left: auto;
  color: var(--color-gray-400);
  font-weight: 700;
}

/* --- 入力・明細カード --- */
.rb-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .rb-grid { grid-template-columns: 1fr 1fr; }
}
.rb-card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 1rem;
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
}
.rb-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--color-navy);
  margin-bottom: 0.5rem;
}
.rb-card-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.98rem;
  font-weight: 900;
  color: var(--color-navy);
  line-height: 1.4;
}
.rb-chip {
  background: var(--color-navy);
  color: #fff;
  border-radius: 0.3rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.rb-chip.is-corp {
  background: var(--color-blue-dark);
}

/* 1項目1行(左=項目名 / 右=入力欄) */
.rb-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--color-gray-100);
}
.rb-field label {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-gray-600);
}
.rb-field-unit {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--color-gray-400);
  margin-left: 0.3rem;
}
.rb-field input {
  width: 8.5rem;
  max-width: 45%;
  text-align: right;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}
.rb-field input:disabled {
  background: var(--color-gray-100);
  color: var(--color-gray-400);
}

/* 入力カードの下端に出す小計 */
.rb-sum {
  margin-top: auto;
  padding-top: 0.7rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--color-gray-200);
}
.rb-sum-label {
  font-size: 0.74rem;
  font-weight: 900;
  color: var(--color-slate);
}
.rb-sum-num {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--color-navy);
  white-space: nowrap;
}

/* 明細の2列リスト */
.rb-mini {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.rb-mini > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.32rem 0;
}
.rb-mini dt {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--color-gray-600);
}
.rb-mini dd {
  font-weight: 900;
  color: var(--color-gray-800);
  white-space: nowrap;
}
.rb-mini dd.is-tax {
  color: var(--color-red);
}
.rb-mini > div.is-total {
  margin-top: 0.25rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--color-gray-200);
}
.rb-mini > div.is-total dt {
  color: var(--color-gray-800);
  font-weight: 900;
}
.rb-mini > div.is-total dd {
  font-size: 1.15rem;
  color: var(--color-navy);
}

/* --- 積立比較(40年) --- */
.rb-accum {
  text-align: left;
}
.rb-acc-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  line-height: 1.5;
  margin-bottom: 0.9rem;
}
.rb-acc-tiles {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .rb-acc-tiles { grid-template-columns: 1fr 1fr; }
}
.rb-acc-tile {
  border: 1.5px solid var(--color-gray-200);
  border-radius: 0.7rem;
  padding: 0.6rem 0.8rem;
  background: var(--color-off-white);
}
.rb-acc-tile.is-main {
  border-color: var(--color-navy);
  background: var(--color-navy);
}
.rb-acc-tile-label {
  display: flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--color-slate);
  line-height: 1.45;
}
.rb-acc-tile.is-main .rb-acc-tile-label {
  color: rgba(255, 255, 255, 0.75);
}
.rb-acc-tile-num {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--color-navy);
  white-space: nowrap;
  margin-top: 0.1rem;
}
.rb-acc-tile.is-main .rb-acc-tile-num {
  color: #fff;
  font-size: 1.75rem;
}
@media (min-width: 640px) {
  .rb-acc-tile.is-main .rb-acc-tile-num { font-size: 2.1rem; }
}
.rb-sw-a { background: #8b98a8; }
.rb-sw-b { background: #0f2a4a; }

/* 積立前提の2列レイアウトと小見出し */
.rb-cols {
  display: grid;
  gap: 0 1.6rem;
}
@media (min-width: 640px) {
  .rb-cols { grid-template-columns: 1fr 1fr; }
}
.rb-sub {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.8rem;
  margin-bottom: 0.1rem;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--color-slate-light);
}
.rb-sub-val {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--color-navy);
  letter-spacing: 0;
}

/* 損金割合のセグメント切替 */
.rb-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0.2rem;
}
.rb-seg-btn {
  flex: 1 1 auto;
  border: 1.5px solid var(--color-gray-200);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--color-slate);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.rb-seg-btn:hover {
  border-color: var(--color-navy);
  color: var(--color-navy);
}
.rb-seg-btn.is-active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}

/* 積立比較グラフ: 折れ線(法人税の繰延累計)の凡例 */
.rb-sw-line {
  height: 0.2rem;
  width: 0.9rem;
  border-radius: 999px;
  background: #a83d3d;
}
/* 損金割合の「手入力」だけは他のボタンと区別できるよう枠線を破線にする */
.rb-seg-btn.is-manual {
  border-style: dashed;
  flex: 0 0 auto;
}

/* 積み立て方の選択タイル(自社株の評価額タイルと同じランプ式・2つまで) */
.rb-acc-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.35rem 0 0.9rem;
  text-align: left;
}
@media (min-width: 768px) {
  .rb-acc-picker { grid-template-columns: repeat(4, 1fr); }
}
.rb-acc-pick {
  padding-left: 1.6rem !important;
}
.rb-acc-pick .tile-lamp {
  top: 50%;
  transform: translateY(-50%);
}
/* 積立期間の自動表示(退職年齢の右) */
.rb-plan-room {
  display: inline;
  margin-left: 0.5em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2d5580;
  white-space: nowrap;
}

/* 生命保険の設計書テーブル(退職金×生命保険) */
.rb-sheet-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.6rem;
  margin: 0.4rem 0 0.9rem;
  max-height: 21rem;
  overflow-y: auto;
}
.rb-sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  white-space: nowrap;
}
.rb-sheet th {
  position: sticky;
  top: 0;
  background: var(--color-navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.5rem 0.6rem;
  text-align: center;
  z-index: 1;
}
.rb-sheet td {
  border-top: 1px solid var(--color-gray-100);
  padding: 0.26rem 0.5rem;
  text-align: right;
}
.rb-sheet td.is-auto {
  color: var(--color-slate);
  font-weight: 700;
  background: var(--color-off-white);
}
.rb-sheet tbody tr:nth-child(5n) td {
  border-bottom: 1.5px solid var(--color-gray-200);
}
.rb-sheet-in {
  width: 7rem;
  text-align: right;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.35rem;
  background: #fff;
}
.rb-sheet-in:focus {
  outline: none;
  border-color: var(--color-blue);
}
/* 上書きされたセルは自動値と区別できるよう薄い青地にする */
.rb-sheet-in[data-dirty="1"] {
  background: var(--color-blue-soft);
  border-color: var(--color-blue);
}

/* 損金割合のプルダウン */
.rb-loss-select {
  width: 11rem;
  max-width: 55%;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* 損金割合の自動判定結果(セレクトの下の1行) */
.rb-loss-verdict {
  text-align: right;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-blue-dark);
  padding: 0.3rem 0 0.1rem;
}
.rb-loss-verdict:empty {
  display: none;
}

/* 繰延法人税トグル(退職金×生命保険)。棒の色#B7628Dに合わせたアクセント */
.overlay-toggle-plum {
  --accent: #B7628D;
  --lamp-rgb: 245, 200, 40;
}
.rb-acc-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin: -0.4rem 0 0.6rem;
}

/* ========== メルマガ案内: ラインナップカード ==========
   カード全体がサンプルへのリンク。ホバー挙動はトップページのカード(lift-card)と共通 */
.nl-lineup [data-sample] { cursor: pointer; }

/* 自社株STEP2: 相続税評価額とLの割合(会社規模)の整合性が取れないときの薄い赤。
   送信時エラー(input-error)とは別クラスにして、入力し直しで消える処理と干渉しないようにする */
.ss-consistency-warn {
  background-color: #fef2f2 !important;
  border-color: #fca5a5 !important;
}

/* ===== テスト配信ページ(trial-*)の無効表示 =====
   本番と同じUIを見せるためヘッダーのナビやヒーローのボタンは残すが、
   クリックできないようにグレーアウトする。有効なのはロゴと「トップ」
   (どちらもテストページのトップ trial-portal.html へ戻る)だけ */
.trial-off,
.trial-off * {
  pointer-events: none !important;
  cursor: default !important;
}
.trial-off {
  opacity: .4;
  filter: grayscale(1);
  user-select: none;
}

/* ==========================================================================
   繝昴・繧ｿ繝ｫ繧ｵ繧､繝・portal.html)
   1/4(繝・・繝ｫ) : 1/2(讀懃ｴ｢繝ｻ譛晏・) : 1/4(繝槭う繧ｨ繝ｪ繧｢)縺ｮ3繧ｫ繝ｩ繝縲・   蟾ｦ蜿ｳ縺ｯ逕ｻ髱｢縺ｫ蝗ｺ螳壹＠縲∽ｸｭ螟ｮ縺縺代ｒ隱ｭ縺ｿ騾ｲ繧√ｋ讒区・縲・   ========================================================================== */

/* ---- 蜷・・繝ｼ繧ｸ縺ｮ繝倥ャ繝€繝ｼ蜿ｳ荳翫€後・繝ｼ繧ｿ繝ｫ繧ｵ繧､繝医∈縲阪・繧ｿ繝ｳ ---- */
.portal-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.05rem;
  border-radius: 9999px;
  border: 1.5px solid var(--color-navy);
  background-color: var(--color-navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.portal-link-btn:hover {
  background-color: #fff;
  color: var(--color-navy);
  box-shadow: 0 8px 18px rgba(15, 42, 74, 0.16);
}
.portal-link-btn svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .portal-link-btn {
    padding: 0.45rem 0.7rem;
    font-size: 0.7rem;
  }
  .portal-link-btn .portal-link-label {
    display: none;
  }
}

/* ---- 繝ｬ繧､繧｢繧ｦ繝・---- */
.portal-shell {
  max-width: 90rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}
.portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}
@media (min-width: 1280px) {
  .portal-col-side {
    position: sticky;
    top: 6.2rem;
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .portal-col-side::-webkit-scrollbar {
    width: 6px;
  }
  .portal-col-side::-webkit-scrollbar-thumb {
    background-color: var(--color-gray-200);
    border-radius: 9999px;
  }
}
@media (max-width: 1279px) {
  .portal-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  }
  .portal-col-right {
    grid-column: 1 / -1;
  }
  .portal-my-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    align-items: start;
  }
  .portal-my-grid > .portal-card + .portal-card {
    margin-top: 0;
  }
}
@media (max-width: 860px) {
  .portal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 1カラムでは、まず検索と朝刊。ツールとマイエリアはその下に回す */
  .portal-col-center {
    order: 1;
  }
  .portal-col-left {
    order: 2;
  }
  .portal-col-right {
    order: 3;
  }
}

/* ---- 蜈ｱ騾壹き繝ｼ繝・---- */
.portal-card {
  background-color: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.85rem;
  padding: 1.1rem 1.15rem;
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.04);
}
.portal-card + .portal-card {
  margin-top: 1rem;
}
.portal-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray-400);
  margin-bottom: 0.55rem;
}
.portal-card-title {
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--color-navy);
  letter-spacing: 0.02em;
}
.portal-card-lead {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-top: 0.2rem;
}
.portal-note {
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--color-gray-400);
  line-height: 1.7;
}

/* ---- 繧ｿ繝・莉頑律縺ｮ譛晏・ / 遞主宛謾ｹ豁｣ 窶ｦ) ---- */
.portal-tabbar {
  position: sticky;
  top: 5rem;
  z-index: 30;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-gray-100);
}
.portal-tabbar-inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* タブだけを横スクロールさせる。「最初に開くページに設定」の手順パネルが
   スクロール枠に切り取られないよう、ボタンはこの枠の外に置く */
.portal-tabs-scroll {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.portal-tabs-scroll::-webkit-scrollbar {
  display: none;
}
.portal-tab {
  position: relative;
  padding: 0.85rem;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--color-gray-400);
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease;
}
.portal-tab:hover {
  color: var(--color-navy);
}
.portal-tab.active {
  color: var(--color-navy);
}
.portal-tab.active::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0;
  height: 2.5px;
  border-radius: 9999px;
  background-color: var(--color-navy);
}
.portal-panel[hidden] {
  display: none;
}

/* ---- 蟾ｦ: 繝・・繝ｫ繝ｬ繝ｼ繝ｫ ---- */
.portal-featured {
  display: block;
  border-radius: 0.7rem;
  padding: 1rem 1.05rem 0.95rem;
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 60%, var(--color-navy-light) 100%);
  color: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.portal-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(15, 42, 74, 0.28);
}
.portal-featured .portal-kicker {
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.4rem;
}
.portal-featured-title {
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.45;
}
.portal-featured-go {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.7rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.82);
}
.portal-rail-label {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--color-navy);
  margin: 1.15rem 0 0.55rem;
}
.portal-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.portal-calc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.7rem 0.65rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  background-color: var(--color-off-white);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-gray-800);
  line-height: 1.35;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.portal-calc-item:hover {
  border-color: var(--color-navy);
  background-color: #fff;
  color: var(--color-navy);
}
.portal-calc-item svg {
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
  opacity: 0.45;
}
.portal-rail-list {
  border-top: 1px solid var(--color-gray-100);
}
.portal-rail-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.15rem;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-gray-800);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.portal-rail-item:hover {
  color: var(--color-navy);
  padding-left: 0.35rem;
}
.portal-rail-cross {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--color-blue);
  flex-shrink: 0;
}
.portal-rail-item .portal-rail-arrow {
  margin-left: auto;
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0.4;
}

/* ---- 荳ｭ螟ｮ: 繧ｵ繝ｼ繝√ョ繧ｹ繧ｯ ---- */
.portal-search-form {
  position: relative;
}
.portal-search-input {
  width: 100%;
  border: 1.5px solid var(--color-gray-200);
  border-radius: 0.6rem;
  background-color: var(--color-off-white);
  padding: 0.9rem 1rem 0.9rem 2.6rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-gray-800);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.portal-search-input::placeholder {
  color: var(--color-gray-400);
  font-weight: 400;
}
.portal-search-input:focus {
  outline: none;
  border-color: var(--color-navy);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(15, 42, 74, 0.1);
}
.portal-search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-gray-400);
  pointer-events: none;
}
.portal-search-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.65rem;
}
@media (max-width: 640px) {
  .portal-search-btns {
    grid-template-columns: 1fr 1fr;
  }
}
.portal-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.6rem 0.4rem;
  border: 1.5px solid var(--color-gray-200);
  border-radius: 0.5rem;
  background-color: #fff;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-gray-800);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.portal-search-btn:hover {
  border-color: var(--color-navy);
  color: var(--color-navy);
}
.portal-search-btn.is-primary {
  border-color: var(--color-navy);
  color: var(--color-navy);
}
.portal-search-btn.is-primary:hover {
  background-color: var(--color-navy);
  color: #fff;
}
.portal-search-hint {
  margin-top: 0.5rem;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--color-gray-400);
}

/* ---- 荳ｭ螟ｮ: 繝｢繝ｼ繝九Φ繧ｰ繝悶Μ繝ｼ繝・---- */
.portal-brief-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--color-navy);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  .portal-brief-title {
    font-size: 1.18rem;
  }
}

/* ---- 荳ｭ螟ｮ: 險倅ｺ九Μ繧ｹ繝・---- */
.portal-feed-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1.5px solid var(--color-navy);
}
.portal-feed-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-navy);
  letter-spacing: 0.03em;
}
.portal-feed-row {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.75rem 0.1rem;
  border-bottom: 1px solid var(--color-gray-100);
}
a.portal-feed-row {
  transition: background-color 0.2s ease;
}
a.portal-feed-row:hover {
  background-color: var(--color-off-white);
}
.portal-feed-no {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-gray-400);
  flex-shrink: 0;
  width: 1.5rem;
}
.portal-feed-row.is-top .portal-feed-no {
  color: var(--color-red);
}
.portal-feed-date {
  font-family: Arial, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--color-gray-400);
  display: block;
  margin-bottom: 0.15rem;
}
.portal-feed-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-gray-800);
  line-height: 1.6;
}
a.portal-feed-row:hover .portal-feed-text {
  color: var(--color-navy);
}
.portal-feed-more {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.6rem;
}
.portal-feed-more a {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-navy);
}
.portal-feed-more a:hover {
  text-decoration: underline;
}
/* 險倅ｺ九′縺ｾ縺逋ｻ骭ｲ縺輔ｌ縺ｦ縺・↑縺・そ繧ｯ繧ｷ繝ｧ繝ｳ縺ｫ蜃ｺ縺呎ｺ門ｙ荳ｭ縺ｮ譫 */
.portal-feed-empty {
  margin-top: 0.9rem;
  padding: 1.4rem 1rem;
  border: 1px dashed var(--color-gray-200);
  border-radius: 0.6rem;
  background-color: var(--color-off-white);
  text-align: center;
}
.portal-badge-soon {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
  background-color: #b98a2f;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

/* ---- 蜿ｳ: 繝槭う繧ｨ繝ｪ繧｢ ---- */
.portal-area-select {
  width: 100%;
  border: 1.5px solid var(--color-gray-200);
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-gray-800);
}
.portal-area-select:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(15, 42, 74, 0.1);
}
.portal-weather-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0 0.2rem;
}
.portal-weather-place {
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--color-navy);
}
.portal-weather-desc {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--color-gray-600);
  margin-top: 0.15rem;
}
.portal-weather-temp {
  font-family: Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-gray-800);
  white-space: nowrap;
}
.portal-weather-temp .unit {
  font-size: 0.7rem;
  font-weight: 700;
}
.portal-weather-temp .temp-max {
  color: var(--color-red);
}
.portal-weather-temp .temp-min {
  color: var(--color-blue);
}
.portal-out-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.45rem;
  background-color: var(--color-off-white);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-gray-800);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.portal-out-btn:hover {
  border-color: var(--color-navy);
  background-color: #fff;
  color: var(--color-navy);
}
.portal-card-dark {
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 100%);
  border-color: transparent;
  color: #fff;
}
.portal-card-dark .portal-card-title {
  color: #fff;
}
.portal-card-dark .portal-card-lead,
.portal-card-dark .portal-kicker {
  color: rgba(255, 255, 255, 0.65);
}
.portal-card-dark .portal-out-btn {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.portal-card-dark .portal-out-btn:hover {
  background-color: #fff;
  color: var(--color-navy);
}

/* ---- 襍ｷ蜍輔・繝ｼ繧ｸ險ｭ螳壹・謇矩・繝昴ャ繝励が繝ｼ繝舌・) ---- */
.portal-startup {
  position: relative;
}
.portal-startup-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: 21rem;
  max-width: 80vw;
  background-color: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.7rem;
  box-shadow: 0 18px 40px rgba(15, 42, 74, 0.18);
  padding: 1rem 1.05rem;
  z-index: 60;
  text-align: left;
}
.portal-startup-panel[hidden] {
  display: none;
}
.portal-startup-panel h3 {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--color-navy);
  margin-bottom: 0.3rem;
}
.portal-startup-panel p,
.portal-startup-panel li {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-gray-600);
  line-height: 1.75;
}
.portal-startup-panel ol {
  padding-left: 1.1rem;
  list-style: decimal;
}
.portal-startup-url {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.4rem;
  background-color: var(--color-off-white);
  border: 1px solid var(--color-gray-200);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-gray-800);
  word-break: break-all;
}
.portal-startup-copy {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.3rem 0.6rem;
  border-radius: 9999px;
  border: 1px solid var(--color-navy);
  background-color: #fff;
  color: var(--color-navy);
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
}
.portal-startup-copy:hover {
  background-color: var(--color-navy);
  color: #fff;
}

/* ---- 笘・ｿ晏ｭ倥・繧ｿ繝ｳ(險倅ｺ九・繝・・繝ｫ陦後・蜿ｳ遶ｯ) ---- */
.portal-save-btn {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 9999px;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.portal-save-btn:hover {
  color: var(--color-navy);
  background-color: var(--color-slate-soft);
}
.portal-save-btn.is-saved {
  color: #b98a2f;
}

/* ===== 保存名(お客様名・案件名)の入力欄: ヒーローのボタン列に置く白枠の小さな欄 ===== */
.hero-save-label {
  width: 13rem;
  max-width: 44vw;
  height: 2.4rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.55rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  padding: 0 0.6rem;
  flex-shrink: 1;
  min-width: 7rem;
}
.hero-save-label::placeholder { color: rgba(255, 255, 255, 0.55); }
.hero-save-label:focus {
  outline: none;
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
}

/* ===== PDF印刷の最適化 ===== */
@media print {
  /* 表・グラフがページ境界で分断されないようにする */
  /* 表自体は複数ページに割ってよい(丸ごと禁止すると空白ページが生まれる)。行とグラフは分断しない */
  .print-sheet tr, .print-sheet svg, .print-sheet img.print-chart-img { page-break-inside: avoid; break-inside: avoid; }
  .print-sheet thead { display: table-header-group; }
  .print-sheet h2, .print-sheet .print-sec { page-break-after: avoid; }
}
/* 列幅の狭い欄で「入力例：10,000,000 円」等のプレースホルダが見切れないよう、
   プレースホルダ表示時だけ少し縮小する(入力した実値のサイズは変えない) */
#ssCapital::placeholder, #ssShares::placeholder { font-size: 11.5px; }
#ssHolderBody .hs::placeholder { font-size: 11.5px; }

/* 画面のカードを見たまま画像化した印刷ブロック(A4ヨコ1枚に収まる高さ配分) */
.print-dom-slot { margin-bottom: 6px; break-inside: avoid; page-break-inside: avoid; }
.print-dom-slot img.print-chart-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left top;
  display: block;
}
.print-dom-slot.is-top img.print-chart-img { max-height: 94mm; }
.print-dom-slot.is-bottom img.print-chart-img { max-height: 60mm; }
.print-screen-clone details summary { list-style: none; }
.print-screen-clone details summary::-webkit-details-marker { display: none; }

/* 非課税の印刷: 縦積みの指標カード */
.print-stats-col > div {
  border: 1px solid #dde3e8;
  border-radius: 6px;
  padding: 7px 12px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.print-stats-col .k { font-size: 9.5px; color: #555; }
.print-stats-col .v { font-size: 12px; font-weight: 700; font-family: Arial; white-space: nowrap; }

/* PDFボタン: プレビュー準備中の状態 */
.js-pdf-btn.is-busy { opacity: 0.65; pointer-events: none; }

/* 評価額推移表(画面): 列見出しは折り返さず1行に収める */
#trendTable thead th { white-space: nowrap; }
@media (max-width: 900px) {
  #trendTable thead th { font-size: 10px; padding-left: 2px; padding-right: 2px; }
}

/* 印刷: セクション見出しは直後の内容と離さない */
.print-sheet .print-sec { page-break-after: avoid; break-after: avoid; }

/* 自社株の印刷: 前提条件は最終ページにまとめる */
.print-cond-page .print-cond-auto { margin-top: 0; }

/* 自社株の印刷: シナリオA/Bの見出し(色分けして読み分けやすくする) */
.print-scenario-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  margin: 6px 0 4px;
}
.print-scenario-head .ps-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font-family: Arial;
  font-size: 11px;
  flex-shrink: 0;
}
.print-scenario-head.is-a { background: #e9edf3; color: #0f2a4a; }
.print-scenario-head.is-a .ps-badge { background-color: #0f2a4a; }
.print-scenario-head.is-b { background: #eaf0f7; color: #2d5580; }
.print-scenario-head.is-b .ps-badge { background-color: #3b6ea5; }
/* 推移表: 5年ごとに薄い帯を敷いて行を追いやすくする */
.print-trend tbody tr:nth-child(5n + 1) td { background-color: #f4f7fa; }
.print-trend td.lbl { font-weight: 600; }
/* 推移表を左右2列に分けて1枚に収める(左=前半・右=後半。30年表示では右は空欄)。
   グラフや他セクションと横幅を揃えるため、2つの表でページ幅いっぱいを均等に使う */
.print-trend-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
  align-items: start;
  width: 100%;
}
.print-trend-cols .print-trend {
  width: 100%;
  table-layout: fixed;
  font-size: 8pt;
}
/* 各シナリオの表(見出し+表本体)は1ページに収める。改ページはHTML側のprint-breakが担う。
   Bセクション冒頭の旧print-break(#pTrendBreakB)がそれ。 */
#pTrendSecA, #pTrendSecB { page-break-inside: avoid; break-inside: avoid; }
#pTrendSecA > .print-sec,
#pTrendSecB > .print-sec,
#pTrendSecA > .print-scenario-head,
#pTrendSecB > .print-scenario-head { page-break-after: avoid; break-after: avoid; }
.print-trend-cols .print-trend { page-break-inside: avoid; break-inside: avoid; }
/* 見出し+32行がA4ヨコ1ページ(有効約190mm)に確実に収まる行高 */
.print-trend-cols .print-trend th,
.print-trend-cols .print-trend td { padding: 1.6px 6px; line-height: 1.22; }
/* 年列は狭く、指標5列は均等に(左右の表で列位置が揃う) */
.print-trend-cols .print-trend th.lbl,
.print-trend-cols .print-trend td.lbl { width: 15%; }
.print-trend-cols .print-trend th:not(.lbl),
.print-trend-cols .print-trend td:not(.lbl) { width: 17%; }
/* 見出し(項目名)と年はセンタリング。数値は従来どおり右寄せ */
.print-trend-cols .print-trend thead th { text-align: center; }
.print-trend-cols .print-trend td.lbl { text-align: center; }
/* シナリオごとにイメージカラーを変える(A=青系 / B=紺系) */
.print-trend-cols.sc-a .print-trend thead th { background-color: #0f2a4a; color: #fff; }
.print-trend-cols.sc-a .print-trend tbody tr:nth-child(5n + 1) td { background-color: #e8ebf1; }
.print-trend-cols.sc-a .print-trend td.lbl { color: #0f2a4a; }
.print-trend-cols.sc-b .print-trend thead th { background-color: #3b6ea5; color: #fff; }
.print-trend-cols.sc-b .print-trend tbody tr:nth-child(5n + 1) td { background-color: #eaf1f8; }
.print-trend-cols.sc-b .print-trend td.lbl { color: #2d5580; }

/* 金庫株の印刷: パターンA/Bの強調ヘッダー */
.print-pattern-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f2a4a;
  border: 1.5px solid #0f2a4a;
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 6px;
}
.print-pattern-head b { font-size: 13.5px; }
.print-pattern-head .pp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-family: Arial;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  background-color: #0f2a4a;
}
.print-pattern-head.is-b { border-color: #3b6ea5; color: #2d5580; }
.print-pattern-head.is-b .pp-badge { background-color: #3b6ea5; }

/* 金庫株のA4ヨコ印刷: パターンA/Bを縦積み2段にし、グラフを大きく見せる */
.print-wf-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 0;
  align-items: start;
}
.print-wf-cols .print-chart-big svg { max-height: 70mm; }
.print-wf-cols .print-chart-big img.print-chart-img {
  width: 50%;
  max-height: none;
  margin: 0 auto;
  display: block;
}
.print-wf-cols .print-pattern-head { margin-bottom: 2px; }

/* 将来負債のA4ヨコ2ページ印刷 */
.print-break { break-before: page; page-break-before: always; height: 0; }
.print-chart-big { margin: 8px 0 6px; }
.print-chart-big svg { width: 100%; height: auto; max-height: 132mm; display: block; }
.print-chart-big img.print-chart-img, .print-chart img.print-chart-img {
  width: 100%;
  height: auto;
  max-height: 132mm;
  object-fit: contain;
  object-position: left top;
  display: block;
}
.print-cond-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 18px;
  align-items: start;
}
.print-subsec {
  font-size: 10.5px;
  font-weight: 700;
  color: #0f2a4a;
  border-left: 3px solid #3b6ea5;
  padding-left: 7px;
  margin: 0 0 6px;
}

/* 前提条件(入力値一覧): beforeprintで印刷シート末尾に自動生成 */
.print-cond-auto { margin-top: 14px; }
.print-cond-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 16px;
  font-size: 9px;
  font-weight: 400;
}
.print-cond-grid .pc-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px dashed #d8dde3;
  padding: 2px 0;
  break-inside: avoid;
}
.print-cond-grid .pc-k { color: #555; }
.print-cond-grid .pc-v { font-family: Arial; font-weight: 700; text-align: right; white-space: nowrap; }

/* 印刷ヘッダーの保存名の行(beforeprintで挿入される。未入力時は出ない) */
.print-sheet .print-save-label {
  font-size: 12px;
  color: #333;
  margin-top: 3px;
  font-weight: 700;
}

/* ===== 保存・読込みモーダル(data-backup.js): コピー&メモ帳貼り付け方式 ===== */
.backup-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(9, 26, 48, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.backup-modal.hidden { display: none; }
.backup-modal-card {
  background-color: #fff;
  border-radius: 1rem;
  width: 100%;
  max-width: 34rem;
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: 0 24px 60px rgba(9, 26, 48, 0.35);
}
.backup-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.backup-modal-title { font-size: 1rem; font-weight: 700; color: var(--color-navy); }
.backup-modal-close {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-gray-400);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}
.backup-modal-lead {
  display: block;
  color: var(--color-red);
  font-size: 0.92rem;
  font-weight: 900;
  margin-bottom: 0.35rem;
}
.backup-modal-guide { font-size: 0.78rem; font-weight: 400; color: var(--color-gray-600); line-height: 1.7; margin-bottom: 0.5rem; }
.backup-modal-guide b { color: var(--color-navy); }
.backup-modal-filename { font-size: 0.75rem; font-weight: 400; color: var(--color-gray-600); margin-top: 0.9rem; margin-bottom: 0.15rem; display: flex; align-items: center; gap: 0.4rem; }
.backup-modal-name {
  font-family: Consolas, monospace;
  color: var(--color-navy);
  border: 1.5px solid var(--color-gray-200);
  border-radius: 0.45rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  width: 22rem;
  max-width: 60%;
}
.backup-modal-name:focus { outline: none; border-color: var(--color-navy); }
.backup-modal-ext { font-family: Consolas, monospace; color: var(--color-gray-400); margin-left: 2px; }
.backup-modal-text {
  width: 100%;
  margin-top: 0.6rem;
  min-height: 11rem;
  flex: 1;
  border: 1.5px solid var(--color-gray-200);
  border-radius: 0.55rem;
  font-family: Consolas, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 0.6rem 0.7rem;
  resize: vertical;
  background-color: var(--color-off-white);
}
.backup-modal-text:focus { outline: none; border-color: var(--color-navy); background-color: #fff; }
/* このPCに保存したデータの一覧(読込みダイアログ) */
.backup-modal-slots {
  border: 1.5px solid var(--color-gray-200);
  border-radius: 0.55rem;
  max-height: 10rem;
  overflow-y: auto;
  margin-top: 0.15rem;
}
.backup-slot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--color-gray-100);
  font-size: 0.75rem;
  font-weight: 400;
}
.backup-slot:last-child { border-bottom: none; }
.backup-slot-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--color-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backup-slot-date { color: var(--color-gray-400); flex-shrink: 0; }
.backup-slot-load, .backup-slot-del {
  flex-shrink: 0;
  border: 1px solid var(--color-navy);
  color: var(--color-navy);
  background-color: #fff;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
}
.backup-slot-load:hover { background-color: var(--color-blue-soft); }
.backup-slot-del { border-color: var(--color-gray-200); color: var(--color-gray-400); }
.backup-slot-del:hover { border-color: var(--color-red); color: var(--color-red); }

.backup-modal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.backup-btn {
  border: 1.5px solid var(--color-navy);
  color: var(--color-navy);
  background-color: #fff;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
}
.backup-btn:hover { background-color: var(--color-blue-soft); }
.backup-btn-primary { background-color: var(--color-navy); color: #fff; }
.backup-btn-primary:hover { background-color: var(--color-navy-light); }
.backup-modal-msg {
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 0.6rem;
  color: var(--color-red);
}
.backup-modal-msg.is-ok {
  color: var(--color-green-gray-dark);
  background-color: var(--color-green-gray-soft);
  border: 1px solid var(--color-green-gray);
  border-radius: 0.55rem;
  padding: 0.5rem 0.75rem;
}
/* 「このPCに保存」成功時: ボタン自身が緑の「保存しました」に変わる */
.backup-btn-ok, .backup-btn-ok:hover {
  background-color: var(--color-green-gray);
  border-color: var(--color-green-gray);
  color: #fff;
  cursor: default;
}