/* common.css — FP Vision 全画面共通スタイル（docs/spec/design-guide.md 準拠）。 デザイントークンを :root に定義し、サイドナビ・入力欄・ボタン・パネル等の共通部品を集約する。 画面固有のレイアウトはページ別CSSへ。 [INV-19] 行末に `LP: --lp-xxx` と書いたトークンは Landing.css と同値、`LP-hue:` は同色相・ 低彩度の派生色。片方だけ直さない（検査: tools/check_tokens.py）。値の正本は Landing.css [INV-16] トークンを薄い側に戻さない（文字色 4.5:1 / 枠線 3:1 前後を割らない） → 本文・理由・例外は docs/notes/invariants.md、経緯は docs/notes/decisions.md */ :root { /* --- ブランド / アクセント --- */ /* [INV-16] トークンを薄い側に戻すときは、文字色＝白背景に対し WCAG AA （通常テキスト 4.5:1）、枠線＝UIコンポーネントの目安（3:1前後）を割らないこと。 2026-08-04 に「薄すぎて見えにくい」という指摘を受けて再調整した経緯がある。 → docs/notes/decisions.md#d-001 */ /* 主色は LP と「同じ色相・低い彩度」の関係で作る（マーカーは LP-hue:）。 LP の主色 #1b5fd9 をそのまま入力画面に持ち込むと、小さな青が数十個並ぶ密度の中では 鮮やかすぎて落ち着かない（2026-09-08 の指摘）。色相は LP と揃えたまま 彩度 78%→62% / 明度 48%→43% に落とし、同じ青の系統に見えることだけを担保している。 白地コントラストは 5.70:1 → 6.55:1 と上がるので INV-16 の側も改善する。 */ --c-primary: #2a5ab2; /* アクション・選択・見出し下線 LP-hue: --lp-primary */ --c-primary-dark: #224a91; /* 主ボタン :hover（同色相で明度 -8%） */ --c-primary-darker: #1c3d78; /* 主ボタン :active（同 -14%） */ --c-primary-glow: rgba(42, 90, 178, .25); /* 主ボタンの影 */ --c-primary-soft: #e9f1fd; /* 選択行背景・タグ背景 LP: --lp-primary-tint */ --c-primary-border: #3f7cb8; /* サブボタン枠（強） */ --c-primary-border-light: #a9c8e6; /* 軽量ボタン枠 */ /* --- ニュートラル（背景） --- */ --c-bg: #f7f9fc; /* 画面背景 LP: --lp-subtle */ --c-surface: #ffffff; /* カード / パネル背景 LP: --lp-surface */ --c-subpanel: #eef1f6; /* サイドバー・テーブルヘッダ */ --c-footer: #f2f4f7; /* フッタ背景 */ /* --- ニュートラル（テキスト） --- */ --c-text: #16233a; /* 主要テキスト LP: --lp-text */ --c-text-label: #374151; /* ラベル・本文 */ --c-text-sub: #414b57; /* 補助テキスト */ --c-text-muted: #4b5563; /* プレースホルダ・注釈 */ --c-text-muted2: #5b6673; /* 注釈（やや濃） */ --c-panel-head: #29323d; /* パネルヘッダ文字 */ /* --- 枠線 --- */ --c-border-strong: #6b7684; /* 入力欄など */ --c-border: #8b96a3; /* パネル・区切り（中） */ --c-border-weak: #c3ccd6; /* セクション区切り（弱） */ --c-border-disabled: #b3bcc5;/* 無効・自動算出欄 */ /* --- ステータス --- */ --c-error: #c0392b; /* バリデーションエラー */ --c-error-soft: #f0c3b7; /* 入力エラーステップのバッジ背景（入力済み=緑バッジと明度差を付けて判別しやすくする） */ --c-done: #1f6b45; /* 入力済みステップのチェック */ --c-done-soft: #d8ece0; /* 入力済みステップのバッジ背景 */ --c-danger: #9c4f4f; /* 削除・破壊的操作 */ --c-icon-x: #6b7684; /* 削除×アイコン */ /* --- ラジオ --- */ --c-radio-off: #7a8794; /* --- 角丸トークン --- */ --r-input: 6px; /* 入力・小ボタン LP: --lp-r-sm */ --r-panel: 10px; /* パネル・カード LP: --lp-r */ --r-card: 16px; /* 外枠カード LP: --lp-r-lg */ /* --- 余白トークン --- */ --pad-main: 28px; /* メイン外padding */ --shadow-card: 0 1px 2px rgba(22, 35, 58, .05), 0 8px 24px rgba(22, 35, 58, .06); /* LP: --lp-shadow */ /* --- モーション --- */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* LP: --lp-ease-out */ --dur: .16s; /* LP: --lp-dur */ /* --- レイアウト --- */ --w-max: 1180px; /* 全体最大幅 */ --w-rail: 248px; /* 左ステップナビ幅 */ --w-field: 420px; /* 単一入力欄の最大幅（間延び防止） */ /* 2026-09-08 廃止: --header-h / --rail-back-h rail と topbar が「それぞれ水平罫線を引き、その高さを数値で合わせる」構造をやめ、 罫線を topbar 側の1本だけにした。合わせる相手が無くなったので、この2つの基準値も ゲスト時の埋め合わせ（.rail--guest .rail__plan）も不要になった。 → 経緯 docs/plan/design-unification-plan.md */ } /* ============================================================= ベース ============================================================= */ * { -webkit-font-smoothing: antialiased; box-sizing: border-box; } html { overflow-y: scroll; } body { margin: 0; font-family: 'Noto Sans JP', sans-serif; background: var(--c-bg); color: var(--c-text); /* サイトフッタ（.site-footer）を画面の最下部に落とすための縦フレックス。 以前は .app { min-height: 100vh } で画面を埋めていたが、それだとフッタを 足したぶん必ずスクロールが出る。高さは body に持たせ、中身の側を伸ばす。 body 直下に後から足される要素（トースト・ヘルプモーダル・レールの背面）は すべて position:fixed なので、この並びには入らない。 */ min-height: 100vh; display: flex; flex-direction: column; } /* フッタを下端へ押し下げるために伸ばす「中身」。INV-01 の3画面は .app-card を 持てず、それぞれ独自のラッパを body 直下に置いているので、名前を直接並べている。 */ .app, /* 入力画面 */ .ps-wrap, /* plan-select */ .result-wrap, /* simulation-graph */ .login-wrap { /* login */ flex: 1 0 auto; /* width:100% は必須。body は flex-direction:column で、これらのラッパは cross 軸（横）に margin:… auto を持つ。Flexbox では cross 軸に auto マージンが あると align stretch が効かず、幅が中身の max-content まで縮む。その結果 ページ幅が中身の広い狭いで変わって見える（SimulationGraph でタブごとに .result-wrap の幅がぶれていた事例）。100% を敷いて max-width で頭打ちさせる。 */ width: 100%; } input, select, button { font-family: inherit; } /* ============================================================= アプリ外枠 / レイアウト ============================================================= */ .app { display: flex; justify-content: center; padding: 28px 24px; } .app-card { width: 100%; max-width: var(--w-max); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; display: flex; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-body { padding: 8px var(--pad-main) 26px; flex: 1; } /* ============================================================= 左ステップナビ ============================================================= */ .rail { width: var(--w-rail); flex-shrink: 0; background: var(--c-subpanel); border-right: 1px solid var(--c-border); padding: 24px 0; } /* レール最上部のロゴ行。ここがアプリの左上＝ブランドの定位置で、LP のヘッダと 同じ位置関係になる。折りたたみトグル « もこの行に同居させる。 トグルを絶対配置していたころは .rail__back に 40px の逃げ余白が要り、さらに z-index と pointer-events の回避策が2つ必要だった（折りたたみ時にトグルが クリックを奪われる不具合の対策）。同じ行のフレックスアイテムにしたことで、 その3つの回避策がまとめて不要になっている。 */ .rail__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 12px 14px 22px; } /* min-width: 0 と overflow: hidden は折りたたみ（56px）のために要る。 ロゴのロックアップは 78px あり、トグル(24px)と並ぶと 56px に収まらない。 フレックスの自動最小サイズを 0 まで許してロゴ側を潰し、トグルを残す作りにしてある （潰れる過程で画像がはみ出さないよう overflow で切る）。どちらかを外すと、 折りたたんだときにトグルが枠外へ押し出されて二度と開けなくなる。 */ .rail__logo { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; } /* レールの地（--c-subpanel）の上に単独で載るので、26px では埋もれて見つけられない という指摘があった（2026-09-09）。ここはアプリ内で唯一のブランドの置き場なので、 ステップのバッジ（22px）よりはっきり大きい 30px にする。 */ .rail__logo img { height: 30px; width: auto; display: block; max-width: none; } /* ---- いま開いているプラン ---- プラン名と「別のプランを選ぶ」を1枚のカードにまとめる。以前は ・プラン名 … トップバー（画面名の真上） ・プラン選択へ … レールのロゴ行と「入力ステップ」見出しの間に単独で と離れていて、後者が何のリンクなのか読み取りにくく浮いていた。 「いまのプランはこれ／別のを選ぶ」を1つの塊にすると役割が自明になる。 ここで“レールを横断する水平罫線”を使わないのが要点。レールと本文は独立に 高さが決まるので、罫線を引くと .topbar の罫線と y がズレてガタついて見える （旧 --header-h を捨てた経緯と同じ問題）。左右に余白を持つ全周のカードなら レールを横切る線にならず、どの高さに置いてもズレようがない。 「プラン」というラベル行は置かない。直下の「別のプランを選ぶ」で語が重複するうえ、 カードで囲ってあれば無くても読み取れる。1行ぶんの高さのほうが惜しい。 */ .rail__plan { margin: 2px 16px 4px; padding: 9px 12px 10px; background: var(--c-surface); border: 1px solid var(--c-border-weak); border-radius: 8px; } /* プラン名の文字。文言と is-unset の切替は js/main.js の applyRail が行う。 置き場所ごとの体裁は .rail__plan 側（と simulation-graph）が持つ。 */ .plan-name { font-weight: 700; color: var(--c-text); } .plan-name.is-unset { font-weight: 500; color: var(--c-text-muted); } /* 名前は自由入力なので、長くても1行に収めて省略する（折り返すとカードの高さが 変わり、画面ごとにレールの見え方がばらつく）。 */ .rail__plan .plan-name { margin: 0 0 6px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* プラン切り替えの導線。カードの中の小さなリンクなので、.step と寸法を 揃える必要はない（以前は単独で置いていたためリスト行に似せていた）。 */ .rail__back { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--c-primary); text-decoration: none; } .rail__back::before { content: "←"; flex: none; font-size: 12px; } .rail__back:hover { text-decoration: underline; } /* ゲスト（未ログイン）向けの出し分け。js/main.js の applyGuestRail が付ける。 ログイン必須の画面へのリンクは、踏んでもログイン画面に弾かれるだけなので出さない （display を持つ要素は hidden 属性だけでは消えないため、明示的に打ち消す）。 */ .rail__back[hidden] { display: none; } /* ゲスト時は .rail__back が消えるが、埋め合わせは要らない（揃える罫線が無いため）。 ロゴ行のすぐ下にゲスト通知が来るだけで、高さは中身なりに決まる。 */ /* 未ログインであることの明示。右下の保存バッジは「保存先」の警告なので役割が違う。 赤系（黄色より少し濃いめ）にして、他の警告色より目立たせている。 */ .rail__guest { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin: 0 22px 16px; padding: 11px 13px; border: 1px solid #d98d84; border-radius: 8px; background: #fbdedb; } .rail__guest-state { font-size: 12px; font-weight: 700; line-height: 1.4; color: #8a2318; } .rail__guest-action { padding: 6px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; color: #ffffff; background: var(--c-primary); cursor: pointer; } .rail__guest-action:hover { filter: brightness(1.08); } .rail__heading { font-size: 10.5px; font-weight: 700; color: var(--c-text-muted); letter-spacing: .08em; /* 上を空けて「ブランド＋プラン選択へ」と「ステップ一覧」を塊として分ける。 .rail__heading--optional は後段で padding-top を 14px に上書きするので影響しない。 */ padding: 22px 22px 8px; } .rail__steps { display: flex; flex-direction: column; } .step { display: flex; align-items: center; gap: 11px; padding: 10px 22px; border-left: 4px solid transparent; text-decoration: none; } .step:hover:not(.step--current) { background: rgba(17, 24, 39, .04); } .step__badge { width: 22px; height: 22px; border-radius: 50%; background: #e3e8ef; color: var(--c-text-muted2); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .step__label { font-size: 13px; color: var(--c-text-sub); } /* 現在のステップ 左の太いアクセントバー＋バッジ・ラベルの強調色で現在地と分かるようにする。 */ .step--current { border-left-color: var(--c-primary); } .step--current .step__badge { background: var(--c-primary); color: #fff; } .step--current .step__label { font-size: 13.5px; font-weight: 700; color: var(--c-primary); } /* --- 入力済みステップ --- 「その画面を開いて内容が保存されている」ステップは、バッジ（番号）の色だけで示す。 */ .step--done:not(.step--current) .step__badge { background: var(--c-done-soft); color: var(--c-done); } /* --- 入力エラーのあるステップ --- 「開いて内容はあるが、必須項目の未入力・範囲外の値・生年月日や年齢の 片方だけの入力など不整合がある」ステップは、バッジの色・形（三角）で示す。 .step--done とは排他（JS側で done/error のどちらか一方だけを付ける）。 */ .step--error:not(.step--current) .step__badge { background: var(--c-error-soft); color: var(--c-error); /* 完了バッジ（丸）と形そのものを変え、色だけに頼らず判別できるようにする */ border-radius: 0; clip-path: polygon(50% 4%, 58% 20%, 93% 90%, 86% 96%, 14% 96%, 7% 90%, 42% 20%); padding-top: 5px; font-size: 11px; } /* 「結果を見る」など到達前の特殊バッジ */ .step__badge--arrow { background: #dfe9f4; color: var(--c-primary); font-size: 11px; } /* --- 追加の設定（該当者のみの任意入力）グループ --- 番号付きの線形ステップとは別枠で、レール下部に区切り線＋見出し付きで並べる。 任意画面（退職金・企業年金、将来: 確定拠出年金・保険・資産運用）はここに追加する。 */ .rail__heading--optional { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-border); } .step__badge--optional { /* 番号を持たない「＋」バッジ */ background: #e3e8ef; color: var(--c-text-muted2); font-size: 13px; } /* --- ナビ折りたたみトグル（JSで rail 先頭に注入） --- */ /* overflow:hidden … 幅アニメ中にラベルがはみ出ても綺麗にクリップし、再フローを防ぐ。 上paddingは .rail__head が持つので 0 に潰す（.rail の padding: 24px 0 の打ち消し）。 */ .rail { padding-top: 0; transition: width .35s ease; overflow: hidden; } /* ロゴ行の中の普通のフレックスアイテム。以前は rail の左上への絶対配置で、 重なり対策の z-index と pointer-events が必要だったが、どちらも不要になった。 */ .rail__toggle { flex: none; width: 24px; height: 24px; /* 平常時から枠＋白面を持たせる。以前は hover まで完全に透明で、押せることに 気づけなかった（2026-09-09 の指摘）。ロゴを 30px に上げたので、この程度の 面ではロゴより目立つことはない。 */ border: 1px solid var(--c-border-weak); border-radius: 6px; background: var(--c-surface); color: var(--c-text-muted2); cursor: pointer; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } .rail__toggle::before { content: "«"; } .rail-collapsed .rail__toggle::before { content: "»"; } .rail__toggle:hover { border-color: var(--c-primary); color: var(--c-primary); } /* ラベル類は折り返さない（幅アニメ中の再フロー＝ガタつきを防ぐ）。 開閉は display:none ではなく opacity フェードで行い、瞬間的な消失（ちらつき）を避ける。 */ .rail__back, .rail__logo, .rail__heading, .rail__plan, .step__label { white-space: nowrap; transition: opacity .25s ease; } /* --- 折りたたみ時: ナビを細くし、ラベル類はフェードで消す（番号バッジのみ残す）。 PLAN・見出しは領域を残したままフェード＝ステップ(1,2..)の縦位置は動かさない。 ステップの配置・余白は変えないので、バッジが横に飛ぶこともない。 --- */ .rail-collapsed .rail { width: 56px; } /* ロゴは横長のロックアップ（比率3:1）で 56px には収まらないため、 他のラベルと同じくフェードで消す。アイコンだけの素材は用意していない。 */ .rail-collapsed .rail__back, .rail-collapsed .rail__logo, .rail-collapsed .rail__heading, .rail-collapsed .rail__guest, .rail-collapsed .rail__plan, .rail-collapsed .step__label { opacity: 0; } /* 消えている間はクリックも受け付けない（56px幅には収まっていないため）。 トグルは絶対配置をやめてロゴ行の中にいるので、以前あった 「見えない .rail__back がトグルのクリックを奪う」問題は起きない。 */ .rail-collapsed .rail__guest, .rail-collapsed .rail__back, .rail-collapsed .rail__logo, .rail-collapsed .rail__plan, .rail-collapsed .rail__heading { pointer-events: none; } /* ============================================================= トップバー ============================================================= */ /* 画面の「現在地」を出す帯。左にプラン名＋画面名、右に解説リンク。 水平罫線はこの1本だけで、レール側は罫線を持たない。したがって高さは 中身なりでよく、揃えるための固定値（旧 --header-h）を持たない。 */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--pad-main); border-bottom: 1px solid var(--c-border); } /* プラン名・画面名・説明を積む左の列。 min-width: 0 が要る。これが無いとフレックスの自動最小サイズが効いて、 長いプラン名のぶん列が広がり、省略されずに解説リンクの側へ食い込む （2026-09-09 に実際に発生。874px まで伸びて見出しより目立っていた）。 */ .topbar__head { flex: 1; min-width: 0; } /* プラン名はここには置かない。レール側の .rail__plan（＝「別のプランを選ぶ」と同じ カード）が定位置で、レールを持たない simulation-graph だけが見出しの脇に出す。 トップバーに置いていたころは、画面名と同じ列に短い濃い文字が積まれるため小さい 見出しに見え、囲みチップにすると今度は帯の縦幅が伸びた（2026-09-09）。 */ .topbar__title { margin: 0; font-size: 19px; font-weight: 700; color: var(--c-text); } .topbar__desc { font-size: 12px; color: var(--c-text-muted2); margin-top: 3px; } /* ユーザーバッジ（ログイン中の表示名・アバター・ログアウトボタン。js/auth.js renderUserBadge） [INV-21] アバター（Googleアカウントの写真）は 2026-09-09 に廃止。表示名以外の Google由来の情報を画面に出さない方針のため、img は描画しない。代わりに表示名の 先頭1文字を丸バッジに出す（js/auth.js badgeInitial()）。 */ .auth-badge { display: inline-flex; align-items: center; gap: 8px; } .auth-badge__avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .auth-badge__name { font-size: 12.5px; color: var(--c-text-muted2); } .help-link { font-size: 12.5px; color: var(--c-primary); text-decoration: none; display: flex; align-items: center; gap: 5px; /* button 要素でも と同じ見た目にする（挙動はダイアログを開くので button が正しい） */ font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; } .help-link:hover { text-decoration: underline; } .help-link__icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--c-primary); font-size: 10px; } /* ============================================================= セクション ============================================================= */ .section { padding: 20px 0 18px; border-bottom: 1px solid var(--c-border-weak); } .section:last-child { border-bottom: none; } /* セクション見出し（案D）: 左に青のアクセントバー＋見出し下にフル幅の罫線で、 「ここからセクション」を明確に示す。文字は拡大（15px）。 */ .section__title { font-size: 15px; font-weight: 700; color: var(--c-text); line-height: 1.3; border-left: 4px solid var(--c-primary); border-radius: 0; /* 片側ボーダーのため角丸なし */ padding: 0 0 8px 11px; border-bottom: 1px solid var(--c-border); margin-bottom: 16px; } .section__note { /* 見出し内の補足（任意・最大5人 等） */ font-size: 13px; color: var(--c-text-muted); font-weight: 400; } .section__desc { /* セクション下のブロック説明文 */ font-size: 12px; color: var(--c-text-muted2); margin-bottom: 12px; } /* 文中に埋め込むリンク（例: 「〇〇画面で設定してください」の〇〇部分）。 周囲の文字サイズを継承しつつ、下線でリンクだと分かるようにする。 */ .inline-link { color: var(--c-primary); text-decoration: underline; font-weight: 700; } .inline-link:hover { color: var(--c-text); } /* --- 折りたたみ可能なセクション（.section--collapsible を付与） --- 開閉アイコンは見出しテキストの「左」に置く（ツリービュー等の標準的なディスクロージャUI）。 閉：▶（この先に中身がある）／開：▼。塗りつぶし三角形で「開閉できる」ことを明示する。 クリック領域は見出し行全体。 */ .section--collapsible > .section__title { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; } .section--collapsible > .section__title::before { content: ""; width: 0; height: 0; flex-shrink: 0; /* 右向きの塗りつぶし三角形（▶）を border で描画 */ border-left: 8px solid var(--c-primary); border-top: 5px solid transparent; border-bottom: 5px solid transparent; /* 開いている状態：90度回転して下向き（▼） */ transform: rotate(90deg); transform-origin: center; transition: transform 0.25s ease; } .section--collapsed > .section__title { margin-bottom: 0; } .section--collapsed > .section__title::before { /* 閉じている状態：右向き（▶）のまま */ transform: rotate(0deg); } /* --- コンテンツ開閉のアニメーション --- */ .section__content-wrapper { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.3s ease; } .section__content-wrapper > .section__content-inner { overflow: hidden; } .section--collapsed > .section__content-wrapper { grid-template-rows: 0fr; } /* ============================================================= フォーム部品 ============================================================= */ .field-label { font-size: 13px; color: var(--c-text-label); } .field-label--right { text-align: right; } .field-optional { /* （任意） */ color: var(--c-text-muted); font-weight: 400; } .field-required { /* 必須バッジ */ display: inline-block; margin-left: 4px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; line-height: 1.5; color: var(--c-error); background: #fdecea; border-radius: 4px; vertical-align: middle; } .unit { /* 年・月・万円 などの単位 */ font-size: 12px; color: var(--c-text-muted2); } /* テキスト入力 / セレクト共通 */ .input, .select { box-sizing: border-box; max-width: var(--w-field); /* 単一欄が間延びしないよう上限を設ける（グリッド項目は既定で伸長） */ padding: 8px 11px; font-size: 14px; color: var(--c-text); background: #fff; border: 1px solid var(--c-border-strong); border-radius: var(--r-input); outline: none; } /* 幅を個別指定する欄（年月日・年齢など）は上限の対象外 */ .input--year, .select--ym, .input--age, .select--inline { max-width: none; } .input--num { text-align: right; } /* セレクトの独自▼アイコン */ .select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; } /* フォーカス */ .input:focus, .select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(42, 90, 178, .12); } /* 無効・自動算出欄 */ .input--disabled { background: var(--c-subpanel); border-color: var(--c-border-disabled); color: var(--c-text-sub); } /* ============================================================= 年齢ステッパー（▲▼ボタンで±1調整できる年齢入力の装飾） 使い方: 対象のinputを .age-stepper で囲み、直後に .age-stepper__btns （.age-stepper__btn--up / --down）を置く。クリック時の値調整・保存反映は js/main.js の delegated click ハンドラ（.age-stepper__btn）が行う。 input側の min/max 属性（例: min="60" max="75"）で調整範囲を指定する。 ・ボタン列はinputの中に重ねず、隣に並べる（flex）実装にしている。 各画面のCSS（例: .pension-age-row .input--age { padding: ... }）が .input--age に対して同じ詳細度で padding を上書きすることがあり、 絶対配置で内側に重ねる実装だと入力値の上にボタンが被って隠れてしまうため。 ============================================================= */ .age-stepper { display: inline-flex; align-items: stretch; } .age-stepper .input--age, .age-stepper .input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } .age-stepper__btns { flex-shrink: 0; width: 15px; display: flex; flex-direction: column; } /* 主役は隣の入力欄なので、ボタン自体は縁取り・塗りを抑えて控えめにする （以前は入力欄と同じ濃さの枠＋グレー塗りで、値そのものより目立っていた）。 */ .age-stepper__btn { flex: 1; min-height: 0; padding: 0; border: 1px solid var(--c-border); border-left: none; background: transparent; color: var(--c-text-muted); font-size: 0; /* HTML内の literal ▲▼ を消し、下の ::before で描く */ line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* ▲▼グリフだけを縦に少し潰す。ボタンの箱（高さ・枠）はそのまま。 フォントによって三角が縦長に見え、値より主張してしまうため。 */ .age-stepper__btn::before { content: "\25B2"; display: block; font-size: 7px; line-height: 1; transform: scaleY(0.72); } .age-stepper__btn--down::before { content: "\25BC"; } .age-stepper__btn--up { border-bottom: none; border-radius: 0 var(--r-input) 0 0; } .age-stepper__btn--down { border-radius: 0 0 var(--r-input) 0; } .age-stepper__btn:hover { background: var(--c-primary-soft); color: var(--c-primary); } .age-stepper__btn:active { background: var(--c-primary-border-light); } /* 入力欄が disabled（例: DcList の受取方法で使わない側）のときはボタンも無効に見せる */ .age-stepper:has(.input:disabled) .age-stepper__btn { opacity: .45; cursor: not-allowed; pointer-events: none; } /* ============================================================= 入力バリデーション（js/main.js の validateForm 系が付け外しする） ============================================================= */ .input--invalid, .select--invalid { border-color: var(--c-error); } .input--invalid:focus, .select--invalid:focus { border-color: var(--c-error); box-shadow: 0 0 0 3px rgba(192, 57, 43, .14); } .form-errors { margin: 0 24px 16px 24px; padding: 12px 16px; background: #fdecea; border: 1px solid #f3c6c0; border-radius: var(--r-panel, 8px); } .form-errors__title { font-size: 13px; font-weight: 700; color: var(--c-error); margin-bottom: 6px; } .form-errors__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; } .form-errors__link { background: none; border: none; padding: 2px 0; font-size: 12.5px; color: #8a2e23; text-align: left; text-decoration: underline; cursor: pointer; } .form-errors__link:hover { color: var(--c-error); } /* ============================================================= 「元に戻す」トースト（画面クリア・行削除の取り消しで共通利用） ============================================================= */ .undo-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #26303d; color: #fff; border-radius: var(--r-panel, 8px); box-shadow: 0 4px 16px rgba(0, 0, 0, .22); font-size: 13px; } .undo-toast__btn { flex-shrink: 0; border: none; background: none; color: #8fc1ee; font-weight: 700; font-size: 13px; cursor: pointer; padding: 2px 4px; } .undo-toast__btn:hover { color: #bcdcf7; text-decoration: underline; } /* 年月日のインライン並び。幅が足りないときは折り返して見切れを防ぐ */ .date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; row-gap: 6px; } .input--year { width: 62px; padding: 7px 8px; text-align: right; } .select--ym { width: 56px; padding: 7px 6px; padding-right: 22px; background-position: right 7px center; } /* ============================================================= ラジオ（実 input をスタイル） ============================================================= */ .radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--c-text); cursor: pointer; } .radio input[type="radio"] { appearance: none; -webkit-appearance: none; margin: 0; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--c-radio-off); box-sizing: border-box; cursor: pointer; flex-shrink: 0; } .radio input[type="radio"]:checked { border: 4px solid var(--c-primary); } .radio input[type="radio"]:focus-visible { box-shadow: 0 0 0 3px rgba(42, 90, 178, .12); } /* 未選択側ラベルは補助色 */ .radio:has(input:not(:checked)) { color: var(--c-text-sub); } /* 無効な選択肢（年齢条件等で選べない場合）はグレーアウトしてクリック不可にする */ .radio:has(input:disabled) { color: var(--c-text-muted); cursor: not-allowed; } .radio input[type="radio"]:disabled { border-color: var(--c-border-disabled); cursor: not-allowed; } .radio-group { display: flex; align-items: center; gap: 14px; } /* ============================================================= パネル（世帯主・配偶者カード等） ============================================================= */ .panel { border: 1px solid var(--c-border); border-radius: var(--r-panel); overflow: hidden; } .panel__head { background: var(--c-subpanel); padding: 9px 14px; font-size: 13px; font-weight: 700; color: var(--c-panel-head); border-bottom: 1px solid var(--c-border); } .panel__head--split { display: flex; align-items: center; } /* 削除ボタンは常に右端に寄せる。以前は justify-content:space-between で （先頭要素と最終要素を両端に押しやる形で）実現していたが、それだと ×ボタンを持たないパネル（例: HouseList の住まい1）で開閉ボタンとタイトルが 両端に離れてしまう。margin-left:auto に変えることで、×ボタンの有無に関わらず 残りの要素は常に左詰めのまま揃う。 */ .panel__head--split > .btn-remove { margin-left: auto; } /* ▼ボタンだけでなく見出し行のクリックでも開閉できる（対応するJS側の処理とセット）。 年金・保険などpanel__head--splitを流用しているだけの非折り畳みパネルは data-collapse-toggleを持たないため、ここではカーソルを変えない。 */ .panel__head--split:has([data-collapse-toggle]) { cursor: pointer; } /* パネル見出しの▼開閉ボタン（今後の働き方・住まい 等、複数画面で共通利用）。 開：▼／閉：▶。ボタン自体には文字を入れず、::before の三角形のみで表現する。 （ページ固有の折り畳みサマリー行等は各画面のCSSに残す） */ .panel__collapse-toggle { border: none; background: none; padding: 0; margin-right: 6px; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .panel__collapse-toggle::before { content: ""; width: 0; height: 0; border-left: 6px solid var(--c-primary); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transform: rotate(90deg); /* 開いている状態：下向き（▼） */ transform-origin: center; transition: transform 0.25s ease; } .panel--collapsed .panel__collapse-toggle::before { transform: rotate(0deg); /* 閉じている状態：右向き（▶） */ } .panel--collapsed .panel__body { display: none; } .panel__body { padding: 14px; } /* 無効化されたパネル（例: 配偶者「なし」時）。 本体のみグレーアウト＆操作不可にし、ヘッダの有無セレクトは操作可能に保つ。 実際の付け外しはJS（有無セレクトの変更）で .panel--disabled をトグルする想定。 */ .panel--disabled .panel__body { opacity: .45; pointer-events: none; user-select: none; } /* パネルヘッダ内の小セレクト（配偶者あり/なし 等） */ .select--inline { padding: 4px 8px; padding-right: 24px; font-size: 12px; background-position: right 8px center; } /* ============================================================= テーブル（子供一覧など） ============================================================= */ .table { border: 1px solid var(--c-border); border-radius: var(--r-panel); overflow: hidden; } .table__head, .table__row { display: grid; align-items: center; } .table__head { background: var(--c-subpanel); border-bottom: 1px solid var(--c-border); font-size: 12px; font-weight: 700; color: var(--c-text-sub); } .table__head > div { padding: 9px 14px; } .table__row { border-bottom: 1px solid var(--c-border-weak); } .table__cell { padding: 10px 14px; } .table__note { /* 残り追加可能数 */ padding: 10px 14px; font-size: 12px; color: var(--c-text-muted); } /* 削除×ボタン */ .btn-remove { border: none; background: none; color: var(--c-icon-x); font-size: 16px; cursor: pointer; } /* 行の並べ替え（↑↓）＋削除をまとめた操作セル（docs/spec/design-guide.md 第6章「行の並べ替え」参照） */ .cell-actions { display: flex; align-items: center; justify-content: center; gap: 4px; } /* 行の並べ替えは全ての一覧で focusout 時の自動並べ替えに統一したため、 手動の ↑↓ ボタン（.btn-moveup / .btn-movedown）は廃止した。 */ /* ============================================================= サイトヘッダ / サイトフッタ ・LP の .lp-header / .lp-footer と同じ構成を、アプリ側のトークンで組み直したもの。 CSSファイルは統合しない方針なので Landing.css は読み込まず、ここで作る（INV-19）。 ・どちらも body 直下に置く。simulation-graph の @media print は body > *:not(#print-root) を落とすので、印刷紙面には出ない。 [INV-20] .site-footer（サイトフッタ）と .footer（入力画面の「前へ／保存して次へ」の フォームナビ）は**別物**。名前が紛らわしいので取り違えないこと。 ・サイトフッタの HTML は、テンプレート機構が無いためアプリ14ページ＋ fp/tools配下9ページ（INV-25）の計23箇所に同じ塊が複製してある。 リンク構成・ロゴを変えるときは23箇所すべてを直す: git grep -rl "site-footer" public_html/*.html public_html/fp/tools/*.html → 23件出ること ・フッタは .app-card の外（body 直下）に置く。中に入れると soft-nav のたびに 作り直され、ちらつくうえ INV-01 の3画面と構造が揃わなくなる ・並んでいるのは規約・ポリシーへの導線なので、リンクを減らすときは 法務面（INV-10 / INV-15 の周辺）も見ること ============================================================= */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 32px; } /* ロゴは img/logo-h-20260910（384×128・比率3:1）。高さだけ合わせて幅は成り行きにする。 寸法と負のマージンは LP の .lp-header / .lp-logo__img と同じ値。ここは LP から遷移してくる画面（login）なので、ヘッダの見た目が1pxでも ずれると「別サイトに来た」感が出る。数値を動かすときは Landing.css も見ること。 */ .site-header__logo { display: inline-flex; align-items: center; flex: none; } .site-header__logo img { height: 45px; width: auto; display: block; margin: -7.5px 0; } .site-header__nav { display: flex; align-items: center; gap: 22px; font-size: 13px; color: var(--c-text-sub); white-space: nowrap; } .site-header__nav a { color: inherit; text-decoration: none; } .site-header__nav a:hover { color: var(--c-primary); text-decoration: underline; } .site-footer { border-top: 1px solid var(--c-border-weak); padding: 22px 24px; } .site-footer__inner { /* ロゴ左・リンク中央・コピーライト右。LP と同じく 1fr auto 1fr にして、 左右の幅が違ってもリンク群がページ中央に揃うようにする。 */ max-width: var(--w-max); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px 28px; } .site-footer__logo { display: inline-flex; align-items: center; } .site-footer__logo img { height: 30px; width: auto; display: block; } /* 24px は小さすぎた。rail__logo と同値に揃える */ .site-footer__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px; } .site-footer__links a { color: var(--c-text-sub); text-decoration: none; transition: color var(--dur) var(--ease-out); } .site-footer__links a:hover { color: var(--c-primary); text-decoration: underline; } .site-footer__copyright { justify-self: end; font-size: 11.5px; color: var(--c-text-muted2); } /* リンク5本を中央に置いたままだと左右カラムと詰まるので、縦積みに切り替える （LP の .lp-footer__inner と同じ 900px で折る）。 */ @media (max-width: 900px) { .site-footer__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 12px; } .site-footer__copyright { justify-self: center; } .site-header { padding: 18px 20px; } } /* ============================================================= ボタン ============================================================= */ /* 反応の付け方（transition / :active の1px沈み込み）を LP の .lp-btn に揃えている。 ここが無いとページを跨いだときにボタンの手触りだけ別サイトに見える。 枠線の色・太さは触らない（INV-16 の経緯があるアプリ側の値のまま）。 */ .btn { font-size: 13.5px; border-radius: var(--r-input); padding: 10px 20px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform 100ms var(--ease-out); } .btn:active { transform: translateY(1px); } .btn--primary { color: #fff; background: var(--c-primary); border: none; box-shadow: 0 2px 8px var(--c-primary-glow); } .btn--primary:hover { background: var(--c-primary-dark); } .btn--primary:active { background: var(--c-primary-darker); } .btn--secondary { color: var(--c-primary); background: #fff; border: 1px solid var(--c-primary-border); } .btn--secondary:hover { background: var(--c-primary-soft); } .btn--secondary:active { background: #d9e5f7; } .btn--neutral { color: var(--c-text-label); background: #fff; border: 1px solid var(--c-border-strong); } .btn--neutral:hover { background: #f2f5f9; } .btn--neutral:active { background: #e8edf4; } .footer .btn:not(.btn--text) { min-width: 140px; } .btn--text { color: var(--c-text-muted); background: transparent; border: none; text-decoration: underline; padding: 10px 16px; font-weight: 400; } .btn--text:hover { color: var(--c-primary); } .btn--light { /* 行を追加 など。テーブル直下に置くため上に余白を確保 */ margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--c-primary); background: var(--c-primary-soft); border: 1px solid var(--c-primary-border-light); border-radius: var(--r-input); padding: 9px 15px; cursor: pointer; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .btn--light:hover { background: #d9e5f7; border-color: var(--c-primary-border); } .btn--light:active { background: var(--c-primary-border-light); } .btn--light:disabled { opacity: .5; cursor: not-allowed; } /* 「戻る」「登録して次へ」等のボタン内の矢印を図形で表示 */ .btn-arrow { display: inline-block; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; vertical-align: middle; } .btn-arrow--right { transform: rotate(45deg); margin-left: 6px; margin-bottom: 2px; } .btn-arrow--left { transform: rotate(-135deg); margin-right: 6px; margin-bottom: 2px; } /* ============================================================= フッタ ============================================================= */ .footer { border-top: 1px solid var(--c-border); padding: 16px var(--pad-main); display: flex; align-items: center; justify-content: space-between; background: var(--c-footer); } .footer__group { display: flex; gap: 10px; } /* ============================================================= 複数画面共通のUI部品 （各画面CSSに重複していたものを集約） ============================================================= */ /* --- タブバー（世帯主/配偶者・第1子/第2子 等の切替） --- */ .tab-bar { display: flex; border-bottom: 2px solid var(--c-border-weak); margin-bottom: 18px; } .tab { padding: 9px 22px; font-size: 13.5px; font-weight: 700; color: var(--c-text-sub); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color .15s, border-color .15s; } .tab:hover { color: var(--c-text); } .tab--active { color: var(--c-primary); border-bottom-color: var(--c-primary); } /* タブで切り替わる人物セクション（非表示状態） */ .person-section--hidden { display: none; } /* --- 参照ボックス（登録済み内容の要約表示など） --- */ .info-ref { background: var(--c-subpanel); border: 1px solid var(--c-border); border-radius: var(--r-input); padding: 12px 16px; margin-bottom: 20px; } .info-ref__heading { font-size: 12px; font-weight: 700; color: var(--c-text-sub); margin-bottom: 4px; } .info-ref__body { font-size: 13px; color: var(--c-text-label); line-height: 1.5; } /* --- グラフのプレースホルダ（実グラフ実装までの仮表示） --- */ .graph-placeholder { height: 200px; border: 2px dashed var(--c-border-strong); border-radius: var(--r-panel); background: var(--c-subpanel); display: flex; align-items: center; justify-content: center; color: var(--c-text-muted); font-size: 13px; } /* ============================================================= レスポンシブ ・PCファースト設計。狭い画面では左ステップナビを隠す。 ============================================================= */ /* --- 狭幅（〜900px）: 左ステップナビをドロワー化する --- 以前はここで .rail を display:none にしていたが、それだと ①現在が何ステップ目か分からない ②rail からしか辿れない「追加の設定」 （退職金・企業年金／現預金・資産運用／確定拠出年金／保険）へ到達できない、 という問題があった。画面外へ退避させたうえで、開閉ボタンから出せるようにする。 開閉ボタン（.rail__drawer-toggle）と背面カバー（.rail__backdrop）は main.js が注入する。 */ .rail__drawer-toggle { display: none; } .rail__backdrop { display: none; } @media (max-width: 900px) { /* rail は position:fixed で画面外へ退避（.app-card の overflow:hidden には transform 等が無いため fixed はクリップされない）。 */ .rail { position: fixed; top: 0; left: 0; bottom: 0; width: 268px; max-width: 84vw; z-index: 210; overflow-y: auto; box-shadow: 2px 0 12px rgba(17, 24, 39, .18); transform: translateX(-100%); transition: transform .25s ease; } .rail-drawer-open .rail { transform: translateX(0); } /* PC用の «» 折りたたみはドロワーには持ち込まない（常に全幅・全ラベル表示） */ .rail__toggle { display: none; } .rail-collapsed .rail { width: 268px; } .rail-collapsed .rail__back, .rail-collapsed .rail__logo, .rail-collapsed .rail__heading, .rail-collapsed .rail__guest, .rail-collapsed .step__label { opacity: 1; } /* ドロワーでは常にラベルが見えているので、PC版の折りたたみ時に入れた pointer-events:none を打ち消してクリックできるようにする */ .rail-collapsed .rail__guest, .rail-collapsed .rail__back, .rail-collapsed .rail__logo, .rail-collapsed .rail__heading { pointer-events: auto; } .rail__backdrop { display: block; position: fixed; inset: 0; z-index: 200; background: rgba(17, 24, 39, .42); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .rail-drawer-open .rail__backdrop { opacity: 1; pointer-events: auto; } /* 開閉ボタン（メイン領域の先頭＝トップバーの上）。現在のステップ名も兼ねる */ .rail__drawer-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px var(--pad-main); border: none; border-bottom: 1px solid var(--c-border); background: var(--c-subpanel); color: var(--c-text); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; } /* 狭幅ではレールがドロワーへ退避する＝ロゴが初期表示で見えなくなるので、 メイン先頭のこのバーがブランドの置き場になる。 ステップ名は真下のトップバーの見出しと重複するため、このバーでは 位置（ステップ n/m）だけを右端に出す（applyStepStates 側で文言を作る）。 ※このバーは 900px から出る。寸法指定を 640px 側に置くと、641〜900px で ロゴが原寸（384×128）のまま出てしまう（2026-09-09 に実際に発生）。 */ .rail__drawer-toggle-logo { display: inline-flex; align-items: center; flex: none; } .rail__drawer-toggle-logo img { height: 22px; width: auto; display: block; } .rail__drawer-toggle-label { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--c-text-sub); white-space: nowrap; } .rail__drawer-toggle:hover { color: var(--c-primary); } /* ハンバーガーアイコン（3本線） */ .rail__drawer-toggle-icon { width: 16px; height: 12px; flex-shrink: 0; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; } .rail__drawer-toggle-icon::before { content: ""; position: absolute; top: 3px; left: 0; right: 0; border-top: 2px solid currentColor; } } /* タブレット〜スマホ: 外側の余白を詰める */ @media (max-width: 640px) { :root { --pad-main: 18px; } .app { padding: 16px 12px; } /* トップバー: タイトルと解説リンクを縦積みに */ .topbar { flex-direction: column; align-items: flex-start; gap: 8px; } /* 縦積みでは列幅いっぱいに使う（横並びのときの flex:1 だけでは幅が決まらない） */ .topbar__head { width: 100%; } /* グラフプレースホルダは高さを縮小 */ .graph-placeholder { height: 160px; } /* フッタ: スマホではボタンを縦並びに（優先度の高い「次へ」を上に） */ .footer { flex-direction: column-reverse; gap: 12px; } .footer__group { width: 100%; flex-direction: column; gap: 12px; } .footer .btn { width: 100%; } } /* 保存状態インジケータ（js/main.js initSyncBadge が body 直下に注入する）。 サーバー保存は入力から少し遅れて行われるため、保存中／保存済み／オフラインを画面隅で知らせる。 */ .sync-badge { position: fixed; right: 16px; bottom: 16px; z-index: 60; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; line-height: 1.4; color: var(--c-text-muted2); background: #ffffff; border: 1px solid var(--c-border-strong); box-shadow: 0 2px 8px rgba(31, 39, 51, 0.12); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .sync-badge--on { opacity: 1; transform: translateY(0); } /* 保存できていない状態は見逃されると入力が失われるため、色で明確に区別する。 */ .sync-badge[data-status="offline"], .sync-badge[data-status="conflict"] { color: #8a5300; background: #fff7e6; border-color: #e0b070; } /* ゲスト（未ログイン）利用中。入力はこの端末の localStorage にしか無く、 ブラウザのデータ消去や端末の変更で失われる。見逃されると困る情報なので 出しっぱなしにし、その場からアカウント保存（＝ログイン）へ行けるようにする。 */ .sync-badge[data-status="guest"] { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; color: #8a5300; background: #fff7e6; border-color: #e0b070; pointer-events: auto; /* 既定の .sync-badge は none。ここだけ押せるようにする */ } .sync-badge__action { padding: 5px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; color: #ffffff; background: var(--c-primary); cursor: pointer; } .sync-badge__action:hover { filter: brightness(1.08); } /* ============================================================= 画面の解説モーダル（js/main.js openHelp が body 直下に注入する） ・トップバーの「? この画面の解説」で開く。 ・本文は各ページの