/* ==========================================================
Premium Design System – Nomura FinEdu Workshop
==========================================================
Table of Contents (Issue #78 / #90)
§1 Design Tokens L 5
§2 Skip Link (a11y) L 88
§3 Reset & Base L 98
§4 App Shell L 152
§5 Progress Bar L 159
§6 Card (Glassmorphism) L 207
§7 Buttons (.btn 系) L 231
§8 Intro L 289
§9 Step1: Quiz L 317
§10 Character Card / Advice L 370 / 409
§11 Step2: Lifestyle / Budget L 420
§12 Tags / Inflation Info L 513 / 520
§13 Step3: Investment L 537
– ステッパー, 売買ボタン, ニュース見出し,
ポートフォリオ帯, チャート等
§14 Result (一般要素) L 947
§15 ESG Card / Investment Principles L 970 / 992
§16 Animations (keyframes) L 1006
§17 Utility L 1060
§18 Responsive (@media) L 1067 / 1387 (Tablet)
§19 Focus Visible / Reduced Motion L 1410 / 1434
§20 末尾 — DS v0.1 後追い拡張・Issue 別追加
§21 Print Styles L 2063
※ 末尾 (L 2000+) の拡張セクションは Phase 5 (#94) で整理予定。
Issue 注釈付きコメント (/* Issue #N: ... *\/) は対応箇所のインライン。
========================================================== */
/* ===== Design Tokens ===== */
:root {
/* Primary – deep navy (Nomura corporate) */
--color-primary-900: #0a1628;
--color-primary-800: #0f2140;
--color-primary-700: #162d57;
--color-primary-600: #1e3a6e;
--color-primary-500: #2952a3;
--color-primary-400: #3b6fd9;
--color-primary-300: #6b9aef;
--color-primary-200: #a3c1f5;
--color-primary-100: #dbe8fc;
--color-primary-50: #f0f5ff;
/* Accent – warm coral/rose */
--color-accent-600: #c2185b;
--color-accent-500: #f06292;
--color-accent-400: #f48fb1;
/* Success */
--color-success-700: #15803d;
--color-success-600: #16a34a;
--color-success-500: #22c55e;
--color-success-400: #4ade80;
--color-success-100: #dcfce7;
/* Warning */
--color-warning-600: #d97706;
--color-warning-500: #f59e0b;
--color-warning-100: #fef3c7;
/* Danger */
--color-danger-600: #dc2626;
--color-danger-500: #ef4444;
--color-danger-400: #f87171;
--color-danger-100: #fef2f2;
/* Neutrals (cool gray) */
--color-neutral-900: #0f172a;
--color-neutral-800: #1e293b;
--color-neutral-700: #334155;
--color-neutral-600: #475569;
--color-neutral-500: #64748b;
--color-neutral-400: #94a3b8;
--color-neutral-300: #cbd5e1;
--color-neutral-200: #e2e8f0;
--color-neutral-100: #f1f5f9;
--color-neutral-50: #f8fafc;
/* Glass tokens */
/* ④(#134): backdrop-filter は高速スクロールで半透明白の四角い残像を生む(iOS等)。
blur を無効化し、glass 背景を不透明寄りにして全体で残像を防ぐ（明るい地色のため見た目はほぼ不変）。 */
--glass-bg: rgba(255, 255, 255, 0.96);
--glass-border: rgba(255, 255, 255, 0.35);
--glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
--glass-blur: none;
--glass-bg-elevated: rgba(255, 255, 255, 0.97);
--glass-shadow-elevated: 0 16px 48px rgba(15, 23, 42, 0.12);
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
/* Radius */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
/* Easing & Transitions */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-fast: 150ms var(--ease-out-expo);
--transition-normal: 300ms var(--ease-out-expo);
--transition-slow: 500ms var(--ease-out-expo);
/* Semantic aliases */
--primary: var(--color-primary-400);
--text: var(--color-neutral-800);
--text-muted: var(--color-neutral-500);
}
/* ===== Skip Link (Accessibility) ===== */
.skip-link {
position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
background: var(--color-primary-600); color: #fff; padding: 12px 24px;
border-radius: 0 0 var(--radius-md) var(--radius-md);
font-weight: 700; font-size: 0.9rem; z-index: 9999;
text-decoration: none; transition: top 0.2s;
}
.skip-link:focus { top: 0; }
/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Issue #77: 要素クリック時の一瞬のフラッシュ抑制
- モバイルブラウザ標準の青/グレー tap highlight を透明化
- PC/モバイル共に :focus アウトラインを非表示にせず、:focus-visible でキーボード操作時のみ表示（アクセシビリティ維持） */
html { -webkit-tap-highlight-color: transparent; }
button, [role="button"], a, .quiz-choice, .step-circle { -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
.quiz-choice:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
outline: none;
}
/* ベースフォント: 本文を標準(16px)に底上げ（最小14px）。rem連動で全体が読みやすくなる */
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
color: var(--color-neutral-800);
line-height: 1.7;
letter-spacing: 0.01em;
min-height: 100vh;
background-color: #f0f4fa;
background-image:
radial-gradient(ellipse at 20% 0%, rgba(59, 111, 217, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(240, 98, 146, 0.06) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(34, 197, 94, 0.04) 0%, transparent 60%);
background-attachment: fixed;
}
/* Subtle animated gradient orbs */
body::before {
content: "";
position: fixed;
top: -50%; left: -50%;
width: 200%; height: 200%;
background:
radial-gradient(circle at 30% 20%, rgba(59, 111, 217, 0.07) 0%, transparent 40%),
radial-gradient(circle at 70% 80%, rgba(240, 98, 146, 0.05) 0%, transparent 40%);
animation: gradientShift 20s ease-in-out infinite alternate;
z-index: -1;
pointer-events: none;
}
@keyframes gradientShift {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(2%, 3%) rotate(3deg); }
}
/* ===== App Shell ===== */
#app { max-width: 880px; margin: 0 auto; padding: 0 16px; min-height: 100vh; display: flex; flex-direction: column; }
#header { text-align: center; padding: 20px 0 10px; }
#app-title { font-size: 1.25rem; font-weight: 700; color: var(--color-primary-700); margin-bottom: var(--space-md); letter-spacing: -0.01em; }
#main-content { flex: 1; padding-bottom: var(--space-lg); }
#footer { text-align: center; padding: var(--space-md) 0; font-size: 0.72rem; color: var(--color-neutral-400); border-top: 1px solid rgba(226, 232, 240, 0.5); }
/* ===== Progress Bar ===== */
.progress-bar {
display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md);
padding: 12px 20px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border-radius: var(--radius-full);
border: 1px solid var(--glass-border);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.progress-bar.hidden { display: none; }
/* 完了ワークのアイコンをクリックしてやり直せることを伝える注釈（完了が1つ以上ある時のみ表示） */
.progress-hint { margin: -10px 0 var(--space-md); text-align: center; font-size: 0.74rem; line-height: 1.5; color: var(--color-neutral-500); }
.progress-hint.hidden { display: none; }
.progress-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; }
.step-circle {
width: 36px; height: 36px; border-radius: 50%;
background: var(--color-neutral-200); color: var(--color-neutral-500);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.85rem;
transition: all 0.4s var(--ease-out-expo);
}
.progress-step.active .step-circle {
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
color: #fff;
box-shadow: 0 0 0 4px rgba(41, 82, 163, 0.15);
animation: pulseGlow 2s ease-in-out infinite;
}
/* Issue #18: 取得済バッジ — ブランドネイビー塗り + ゴールドのバッジ感アクセント */
.progress-step.done .step-circle {
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-800));
color: #fbbf24; /* gold accent for badge icon */
box-shadow:
0 0 0 3px rgba(251, 191, 36, 0.18),
0 4px 12px rgba(15, 33, 64, 0.28);
animation: badgeEarn 0.6s var(--ease-out-back, cubic-bezier(0.34, 1.56, 0.64, 1)) 1;
}
@keyframes badgeEarn {
0% { transform: scale(0.9); }
60% { transform: scale(1.12); }
100% { transform: scale(1); }
}
.step-label { font-size: 0.72rem; font-weight: 600; color: var(--color-neutral-400); white-space: nowrap; transition: color var(--transition-normal); }
.progress-step.active .step-label { color: var(--color-primary-500); font-weight: 700; }
.progress-step.done .step-label { color: var(--color-primary-700); font-weight: 700; }
/* #184: 完了済みステップは戻ってやり直し可能（クリック可能であることを示す） */
.progress-step.done { cursor: pointer; border-radius: var(--radius-md, 10px); transition: opacity var(--transition-fast, .15s); }
.progress-step.done:hover { opacity: 0.78; }
.progress-step.done:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
.progress-line { width: 28px; height: 2px; background: var(--color-neutral-200); margin-bottom: 20px; border-radius: 1px; transition: background var(--transition-normal); flex-shrink: 0; }
.progress-step.done + .progress-line { background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-700)); }
/* ===== Card (Glassmorphism) ===== */
.card {
/* #134/④: backdrop-filter は高速スクロール時に半透明白の四角い残像が出る原因（iOS等）。
全画面共通の .card で発生するため不透明白に変更（明るい地色のため見た目はほぼ不変）。 */
background: #ffffff;
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-bottom: var(--space-md);
box-shadow: var(--glass-shadow);
transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.card-title {
font-size: 1.15rem; font-weight: 700; color: var(--color-primary-700);
margin-bottom: var(--space-sm);
display: flex; align-items: center; gap: var(--space-sm);
}
.card-title::before {
content: ""; display: inline-block;
width: 3px; height: 1.15em; border-radius: 2px;
background: linear-gradient(180deg, var(--color-primary-400), var(--color-accent-500));
flex-shrink: 0;
}
.card-desc { font-size: 0.95rem; color: var(--color-neutral-600); margin-bottom: var(--space-md); line-height: 1.7; }
/* ===== Buttons ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 14px 32px; border: none; border-radius: var(--radius-md);
font-family: inherit; font-size: 1rem; font-weight: 600;
cursor: pointer; transition: all var(--transition-normal);
text-decoration: none; gap: var(--space-sm);
position: relative; overflow: hidden; isolation: isolate;
}
.btn::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 60%);
opacity: 0; transition: opacity var(--transition-fast); z-index: -1;
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: scale(0.97); transition-duration: 80ms; }
/* Yuji FB: ボタンアイコンが小さく見づらい問題を解消 (NEWS バッジ修正の延長)
.stock-actions のような専用ボタンは個別 selector で別途調整済み
1.15em では細密な ph-fill アイコンがまだ暗く見えるため 1.35em + 明示的 white に */
.btn > i {
font-size: 1.35em;
line-height: 1;
flex-shrink: 0;
color: currentColor;
opacity: 1;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.btn-primary {
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
color: #fff;
box-shadow: 0 2px 8px rgba(41, 82, 163, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary:hover {
box-shadow: 0 4px 16px rgba(41, 82, 163, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
.btn-primary:disabled { background: var(--color-neutral-300); color: var(--color-neutral-500); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-secondary {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--color-neutral-200); color: var(--color-neutral-700);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.9); border-color: var(--color-neutral-300); }
.btn-success {
background: linear-gradient(135deg, var(--color-success-500), var(--color-success-600));
color: #fff; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}
.btn-success:hover { box-shadow: 0 4px 16px rgba(22, 163, 74, 0.4); transform: translateY(-1px); }
.btn-block { display: flex; width: 100%; }
.btn-center { display: flex; justify-content: center; gap: 12px; margin-top: var(--space-lg); }
.reset-link {
display: inline-block; margin-top: 12px; font-size: 0.78rem;
color: var(--color-neutral-400); cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
transition: color var(--transition-fast);
}
.reset-link:hover { color: var(--color-neutral-600); }
/* ===== Intro ===== */
.intro-hero { text-align: center; padding: var(--space-lg) 0; }
.intro-hero h2 {
font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800;
margin-bottom: 12px; letter-spacing: -0.02em; line-height: 1.25;
background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-400));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.intro-hero p { font-size: 1rem; color: var(--color-neutral-600); margin-bottom: 8px; font-weight: 500; }
.intro-steps { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.intro-step-item {
display: flex; align-items: center; gap: 14px; padding: 14px 18px;
background: linear-gradient(135deg, rgba(219, 232, 252, 0.4), rgba(240, 245, 255, 0.6));
border: 1px solid rgba(163, 193, 245, 0.2);
border-radius: var(--radius-md); font-size: 0.92rem;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: transform var(--transition-normal);
}
.intro-step-item:hover { transform: translateX(4px); }
.intro-step-num {
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
color: #fff; width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 0.85rem; flex-shrink: 0;
box-shadow: 0 2px 8px rgba(41, 82, 163, 0.25);
}
/* ===== Step1: Quiz ===== */
.quiz-progress { font-size: 0.85rem; font-weight: 600; color: var(--color-neutral-500); margin-bottom: var(--space-sm); }
.quiz-progress-bar { width: 100%; height: 6px; background: var(--color-neutral-100); border-radius: var(--radius-full); margin-bottom: var(--space-lg); overflow: hidden; }
.quiz-progress-fill {
height: 100%; border-radius: var(--radius-full);
background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-500), var(--color-accent-500));
background-size: 200% 100%;
transition: width 0.5s var(--ease-out-expo);
position: relative;
}
.quiz-progress-fill::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
background-size: 200% 100%;
animation: shimmer 2s linear infinite;
}
.quiz-question { font-size: 1.15rem; font-weight: 700; margin-bottom: var(--space-lg); color: var(--color-neutral-800); line-height: 1.5; }
.quiz-choices { display: flex; flex-direction: column; gap: 10px; }
.quiz-nav { margin-top: var(--space-lg); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.quiz-nav-spacer { flex: 0 0 auto; }
.quiz-back, .quiz-next { padding: 10px 18px; font-size: 0.9rem; font-weight: 600; }
.quiz-choice {
padding: 16px 20px;
background: var(--glass-bg);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 2px solid var(--color-neutral-200); border-radius: var(--radius-md);
font-family: inherit; font-size: 0.95rem; font-weight: 500;
cursor: pointer; transition: all var(--transition-normal);
text-align: left; color: var(--color-neutral-700);
position: relative; overflow: hidden;
}
.quiz-choice::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg, var(--color-primary-50), transparent);
opacity: 0; transition: opacity var(--transition-fast);
}
.quiz-choice:hover {
border-color: var(--color-primary-300); transform: translateX(4px);
box-shadow: 0 4px 16px rgba(41, 82, 163, 0.1);
}
.quiz-choice:hover::before { opacity: 1; }
.quiz-choice:active { transform: scale(0.97); }
.quiz-choice.selected {
border-color: var(--color-primary-400);
background: linear-gradient(135deg, rgba(59, 111, 217, 0.08), rgba(59, 111, 217, 0.04));
color: var(--color-primary-700); font-weight: 600;
box-shadow: 0 4px 16px rgba(41, 82, 163, 0.12), inset 0 0 0 1px rgba(59, 111, 217, 0.1);
animation: selectPop 0.3s var(--ease-spring) both;
}
.quiz-choice.selected::after {
content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px; border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
box-shadow: 0 2px 6px rgba(41, 82, 163, 0.3);
}
/* ===== Character Card ===== */
.chara-reveal { text-align: center; perspective: 1000px; }
.chara-card {
background: linear-gradient(160deg,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0.7) 40%,
color-mix(in srgb, var(--type-color, #2952a3) 12%, rgba(255, 255, 255, 0.8)) 100%);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 2px solid color-mix(in srgb, var(--type-color, #2952a3) 25%, rgba(255, 255, 255, 0.5));
border-radius: var(--radius-xl); padding: 36px 24px; margin-bottom: var(--space-lg);
animation: cardReveal 1s var(--ease-out-expo) both;
box-shadow:
0 8px 32px color-mix(in srgb, var(--type-color, #2952a3) 15%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 color-mix(in srgb, var(--type-color, #2952a3) 8%, transparent);
position: relative; overflow: hidden;
}
.chara-card::before {
content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.1) 10%, transparent 20%, rgba(255,255,255,0.05) 30%, transparent 40%);
animation: shimmerRotate 8s linear infinite;
pointer-events: none;
}
.chara-emoji { font-size: 4.5rem; margin-bottom: 12px; animation: bounceIn 0.8s var(--ease-spring) 0.4s both; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); }
.chara-emoji img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--type-color, var(--primary)); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.chara-name { font-size: 1.8rem; font-weight: 800; color: var(--type-color, #2952a3); margin-bottom: 4px; letter-spacing: -0.02em; }
.chara-axis {
font-size: 0.85rem; font-weight: 600; color: var(--color-neutral-500); margin-bottom: 14px;
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 14px; background: var(--color-neutral-100); border-radius: var(--radius-full);
}
.chara-catchphrase { font-size: 1.1rem; font-style: italic; color: var(--type-color, #2952a3); margin-bottom: var(--space-md); font-weight: 700; opacity: 0.9; }
.chara-desc { font-size: 0.95rem; color: var(--color-neutral-600); line-height: 1.8; text-align: left; }
/* ===== Character Advice ===== */
.chara-advice {
display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px;
background: color-mix(in srgb, var(--type-color, #2952a3) 6%, rgba(255, 255, 255, 0.85));
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-left: 4px solid var(--type-color, #2952a3);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin-bottom: var(--space-md); font-size: 0.92rem; color: var(--color-neutral-700); font-weight: 500;
}
.chara-advice-icon { font-size: 1.5rem; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.intro-tips { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.intro-tip-card {
background: linear-gradient(135deg, rgba(254, 252, 232, 0.8), rgba(255, 251, 235, 0.8));
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-radius: var(--radius-md); padding: 14px 18px;
border: 1px solid rgba(253, 230, 138, 0.5);
}
.intro-tip-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.intro-tip-num {
background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
padding: 3px 10px; border-radius: var(--radius-sm);
font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; flex-shrink: 0;
box-shadow: 0 2px 4px rgba(217, 119, 6, 0.3);
}
.intro-tip-title { font-size: 0.92rem; font-weight: 700; color: var(--color-warning-600); display: inline-flex; align-items: center; gap: 6px; }
.intro-tip-body { font-size: 0.88rem; color: var(--color-neutral-700); margin: 0 0 6px; line-height: 1.65; }
.intro-tip-note { font-size: 0.78rem; color: var(--color-neutral-500); margin: 0; line-height: 1.5; }
/* ---- Issue #215: TIPSカードのデータビジュアル（ネイティブ描画） ---- */
/* 本文中のキーワードハイライト（参照キャプチャ準拠）。色は視認性優先で warning-600 より濃いめ */
.tip-hl { color: #c2410c; font-weight: 700; }
.intro-tip-source { font-size: 0.72rem; color: var(--color-neutral-400); margin: 10px 0 0; }
/* figure / ul / ol の既定マージンとリストマーカーを打ち消し、a11y構造化前の見た目を保つ */
.tip-chart { margin: 12px 0 0; }
.tip-chart-title { font-size: 0.78rem; font-weight: 700; color: var(--color-neutral-500); margin-bottom: 8px; }
/* stats-gap: 3数値カラウト + 実態/希望ギャップバー */
.tip-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.tip-stat { background: rgba(255,255,255,0.7); border: 1px solid rgba(253,230,138,0.6); border-radius: var(--radius-md); padding: 10px 6px; text-align: center; }
.tip-stat-label { display: block; font-size: 0.7rem; color: var(--color-neutral-500); margin-bottom: 4px; }
.tip-stat-value { display: block; font-size: 1.35rem; font-weight: 800; color: var(--color-warning-600); line-height: 1.1; }
.tip-stat-unit { font-size: 0.72rem; font-weight: 700; margin-left: 2px; }
.tip-gap { background: #fff; border: 1px solid rgba(253,230,138,0.6); border-radius: var(--radius-md); padding: 12px 14px; margin: 0; }
.tip-gap-rows { list-style: none; margin: 0; padding: 0; }
.tip-gap-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tip-gap-label { flex: 0 0 auto; width: 3.2em; font-size: 0.78rem; color: var(--color-neutral-600); }
.tip-gap-track { flex: 1 1 auto; height: 14px; background: rgba(253,230,138,0.35); border-radius: var(--radius-full); overflow: hidden; }
.tip-gap-fill { display: block; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.tip-gap-fill.muted { background: linear-gradient(90deg, #fcd9a0, #f4b866); }
.tip-gap-fill.accent { background: linear-gradient(90deg, #fbbf24, #d97706); }
.tip-gap-value { flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; color: var(--color-neutral-700); }
.tip-gap-note { text-align: right; font-size: 0.78rem; font-weight: 800; color: var(--color-warning-600); margin: 4px 0 0; }
/* callout: 大数字カラウト（単独・全幅パネル）。分布バーはクライアント要望により撤去 */
.tip-callout { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #fff; border: 1px solid rgba(253,230,138,0.6); border-radius: var(--radius-md); padding: 16px; }
.tip-callout-label { font-size: 0.78rem; color: var(--color-neutral-600); text-align: center; }
.tip-callout-value { display: flex; align-items: baseline; gap: 5px; font-size: 2rem; font-weight: 800; color: var(--color-warning-600); line-height: 1.1; }
.tip-callout-unit { font-size: 0.78rem; font-weight: 700; color: var(--color-neutral-500); }
/* ranking: 順位 + ラベル + バー + % */
.tip-rank { background: #fff; border: 1px solid rgba(253,230,138,0.6); border-radius: var(--radius-md); padding: 14px 16px; }
.tip-rank-rows { list-style: none; margin: 0; padding: 0; }
.tip-rank-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.tip-rank-row:last-child { margin-bottom: 0; }
.tip-rank-no { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--color-warning-100, #fef3c7); color: var(--color-warning-600); font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tip-rank-label { flex: 0 0 auto; width: 7em; white-space: nowrap; font-size: 0.78rem; color: var(--color-neutral-700); }
.tip-rank-track { flex: 1 1 auto; height: 13px; background: rgba(253,230,138,0.35); border-radius: var(--radius-full); overflow: hidden; }
.tip-rank-fill { display: block; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.tip-rank-fill.muted { background: linear-gradient(90deg, #fcd9a0, #f4b866); }
.tip-rank-value { flex: 0 0 auto; width: 3.2em; text-align: right; font-size: 0.78rem; font-weight: 700; color: var(--color-neutral-700); }
@media (max-width: 480px) {
.tip-stats { gap: 6px; }
.tip-stat-value { font-size: 1.15rem; }
.tip-callout-value { font-size: 1.7rem; }
}
.budget-bar-wrap {
margin-bottom: var(--space-lg); padding: 16px 20px;
background: var(--color-neutral-50); border-radius: var(--radius-md);
border: 1px solid var(--color-neutral-200);
}
.budget-bar-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; margin-bottom: 8px; font-weight: 500; }
.budget-remaining { font-weight: 700; font-size: 0.95rem; }
.budget-remaining.ok { color: var(--color-success-600); }
.budget-remaining.over { color: var(--color-danger-600); }
.budget-bar { width: 100%; height: 10px; background: var(--color-neutral-200); border-radius: var(--radius-full); overflow: hidden; }
.budget-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width 0.5s var(--ease-out-expo); position: relative; }
.budget-bar-fill.ok { background: linear-gradient(90deg, var(--color-success-400), var(--color-success-500)); }
.budget-bar-fill.over { background: linear-gradient(90deg, var(--color-danger-400), var(--color-danger-500)); }
.budget-bar-fill::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
background-size: 200% 100%; animation: shimmer 2.5s linear infinite;
}
.lifestyle-category { margin-bottom: var(--space-lg); }
.lifestyle-cat-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: 10px; font-weight: 700; font-size: 1.02rem; }
.budget-icon { font-size: 1.3rem; }
.lifestyle-cat-label { color: var(--color-neutral-800); }
.lifestyle-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lifestyle-option {
background: var(--glass-bg);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 2px solid var(--color-neutral-200); border-radius: var(--radius-md);
padding: 14px 12px; cursor: pointer; transition: all var(--transition-normal);
text-align: center; display: flex; flex-direction: column; gap: 4px;
position: relative; overflow: hidden; font-family: inherit;
}
.lifestyle-option:hover {
border-color: var(--color-primary-300); transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(41, 82, 163, 0.1);
}
.lifestyle-option:active { transform: scale(0.96); }
.lifestyle-option.selected {
border-color: var(--color-primary-400);
background: linear-gradient(160deg, rgba(59, 111, 217, 0.06), rgba(59, 111, 217, 0.12));
box-shadow: 0 8px 24px rgba(41, 82, 163, 0.12), inset 0 0 0 1px rgba(59, 111, 217, 0.1);
animation: selectPop 0.3s var(--ease-spring);
}
.lifestyle-option.selected::after {
content: ""; position: absolute; top: 8px; right: 8px;
width: 18px; height: 18px; border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
box-shadow: 0 2px 4px rgba(41, 82, 163, 0.3);
}
.lifestyle-opt-cost { font-size: 1.15rem; font-weight: 800; color: var(--color-primary-600); letter-spacing: -0.02em; }
.lifestyle-opt-label { font-size: 0.85rem; font-weight: 700; color: var(--color-neutral-800); }
.budget-warning {
background: linear-gradient(135deg, rgba(254, 242, 242, 0.9), rgba(254, 226, 226, 0.9));
color: var(--color-danger-600); padding: 14px 18px; border-radius: var(--radius-md);
font-size: 0.9rem; font-weight: 600; text-align: center; margin-top: 12px;
border: 1px solid rgba(239, 68, 68, 0.2);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
div.budget-ok {
background: linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(209, 250, 229, 0.9));
color: var(--color-success-600); padding: 14px 18px; border-radius: var(--radius-md);
font-size: 0.9rem; font-weight: 600; text-align: center; margin-top: 12px;
border: 1px solid rgba(22, 163, 74, 0.2);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* Lifestyle summary in result */
.lifestyle-summary-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-neutral-100); font-size: 0.9rem; }
.lifestyle-summary-item:last-child { border-bottom: none; }
/* ===== Step3: Investment ===== */
.turn-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.turn-badge {
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
color: #fff; padding: 5px 16px; border-radius: var(--radius-full);
font-size: 0.82rem; font-weight: 700;
box-shadow: 0 2px 8px rgba(41, 82, 163, 0.25); letter-spacing: 0.03em;
}
.event-headline { font-size: 1.08rem; font-weight: 700; color: var(--color-neutral-800); margin-bottom: 6px; padding-left: 8px; }
.event-detail { font-size: 0.88rem; color: var(--color-neutral-600); line-height: 1.6; padding-left: 8px; }
.portfolio-summary {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 18px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md); margin-bottom: var(--space-md);
flex-wrap: wrap; gap: var(--space-sm);
}
.portfolio-cash, .portfolio-total { font-size: 0.92rem; font-weight: 500; }
.portfolio-value { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; transition: color 0.2s ease; }
/* Issue #45: ステッパー操作中の所持金プレビュー */
.portfolio-cash.pending-up .portfolio-value { color: var(--color-success-600); }
.portfolio-cash.pending-down .portfolio-value { color: var(--color-danger-600); }
.portfolio-cash-diff {
font-size: 0.85rem;
font-weight: 700;
margin-left: 4px;
font-variant-numeric: tabular-nums;
}
.portfolio-cash.pending-up .portfolio-cash-diff { color: var(--color-success-600); }
.portfolio-cash.pending-down .portfolio-cash-diff { color: var(--color-danger-600); }
.portfolio-cash-current {
font-size: 0.78rem;
font-weight: 500;
color: var(--color-neutral-500);
margin-left: 6px;
}
.stock-card {
/* #134: backdrop-filter は高速スクロールで白い四角の残像が出る原因のため除去し、
不透明な白背景に変更（明るい地色のため見た目はほぼ不変）。 */
background: #ffffff;
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg); padding: 18px; margin-bottom: 12px;
transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.stock-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); }
.stock-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 4px; }
.stock-name { font-weight: 700; font-size: 1rem; color: var(--color-neutral-800); }
.stock-sector { font-size: 0.78rem; font-weight: 600; color: var(--color-neutral-400); padding: 2px 8px; background: var(--color-neutral-100); border-radius: var(--radius-full); }
.stock-price { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stock-info { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 0.88rem; color: var(--color-neutral-500); font-weight: 500; font-variant-numeric: tabular-nums; }
.stock-actions { display: flex; gap: 8px; }
.stock-actions .btn { flex: 1; padding: 10px 8px; font-size: 0.88rem; font-weight: 600; border-radius: var(--radius-sm); border: 2px solid transparent; transition: all var(--transition-fast); }
/* Issue #82: 売買ボタン色を「買=success(緑) / 売=danger(赤) / 何もしない=neutral(灰)」(案C)
損益チャートの +/− 色軸と統一して、教育的に直感的なメンタルモデルを構築 */
.btn-buy { background: rgba(34, 197, 94, 0.08); color: var(--color-success-600); }
.btn-buy:hover { background: rgba(34, 197, 94, 0.15); }
.btn-buy.selected { border-color: var(--color-success-500); background: rgba(34, 197, 94, 0.12); box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15); animation: selectPop 0.25s var(--ease-spring); }
.btn-hold { background: rgba(100, 116, 139, 0.08); color: var(--color-neutral-600); }
.btn-hold:hover { background: rgba(100, 116, 139, 0.15); }
.btn-hold.selected { border-color: var(--color-neutral-500); background: rgba(100, 116, 139, 0.12); box-shadow: 0 2px 8px rgba(100, 116, 139, 0.15); animation: selectPop 0.25s var(--ease-spring); }
.btn-sell { background: rgba(239, 68, 68, 0.08); color: var(--color-danger-600); }
.btn-sell:hover { background: rgba(239, 68, 68, 0.15); }
.btn-sell.selected { border-color: var(--color-danger-500); background: rgba(239, 68, 68, 0.12); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15); animation: selectPop 0.25s var(--ease-spring); }
.btn-buy:disabled, .btn-sell:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
/* Issue #82 (Yuji FB): ステッパー用スロット
売買/何もしない切替でカード高さが変わるレイアウトジャンプを防ぐため、
ステッパー用エリアを常時確保する */
.stepper-slot {
min-height: 110px;
margin-top: 4px;
}
.stepper-slot.empty {
/* 何もしない選択時の空スロット (高さだけ確保、視覚的には何も出さない) */
display: block;
}
@media (max-width: 480px) {
.stepper-slot { min-height: 132px; }
}
/* Issue #46: 1株単位ステッパー (買い/売り選択時のみ表示) */
.qty-stepper {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 10px 12px;
background: rgba(59, 111, 217, 0.04);
border: 1px solid rgba(59, 111, 217, 0.18);
border-radius: var(--radius-sm);
flex-wrap: wrap;
}
/* Issue #82: ステッパー枠も案C (買=success / 売=danger) に揃える */
.qty-stepper.buy {
background: rgba(34, 197, 94, 0.04);
border-color: rgba(34, 197, 94, 0.22);
}
.qty-stepper.sell {
background: rgba(239, 68, 68, 0.04);
border-color: rgba(239, 68, 68, 0.22);
}
.qty-stepper-label {
font-size: 0.85rem;
color: var(--color-neutral-700);
font-weight: 700;
margin-right: 2px;
}
.qty-btn {
flex-shrink: 0;
min-width: 38px;
height: 38px;
padding: 0 10px;
border: 1.5px solid var(--color-primary-300);
background: #fff;
color: var(--color-primary-700);
border-radius: 8px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.1s;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.qty-btn:hover:not(:disabled) {
background: var(--color-primary-50);
border-color: var(--color-primary-500);
}
.qty-btn:active:not(:disabled) { transform: scale(0.95); }
.qty-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.qty-btn.qty-add10 {
background: var(--color-primary-100);
border-color: var(--color-primary-400);
font-weight: 800;
}
/* Issue #82: 買い側ステッパーのボタンも緑(success)系に */
.qty-stepper.buy .qty-btn { border-color: rgba(34, 197, 94, 0.4); color: var(--color-success-700); }
.qty-stepper.buy .qty-btn:hover:not(:disabled) { background: rgba(34, 197, 94, 0.08); border-color: var(--color-success-500); }
.qty-stepper.buy .qty-btn.qty-add10 { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.5); }
/* 売り側ステッパーのボタンを赤(danger)系に */
.qty-stepper.sell .qty-btn { border-color: rgba(239, 68, 68, 0.4); color: var(--color-danger-600); }
.qty-stepper.sell .qty-btn:hover:not(:disabled) { background: rgba(239, 68, 68, 0.08); border-color: var(--color-danger-500); }
.qty-stepper.sell .qty-btn.qty-add10 { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.5); }
.qty-input {
width: 64px;
height: 38px;
text-align: center;
font-size: 1.05rem;
font-weight: 800;
border: 1.5px solid var(--color-neutral-300);
border-radius: 8px;
font-variant-numeric: tabular-nums;
background: #fff;
-moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input:focus {
outline: none;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(59, 111, 217, 0.15);
}
.qty-max {
font-size: 0.78rem;
color: var(--color-neutral-500);
margin-left: auto;
font-weight: 500;
}
.qty-total {
margin-top: 8px;
padding: 10px 14px;
background: #fff;
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius-sm);
font-size: 0.95rem;
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--color-neutral-700);
}
.qty-total strong { font-size: 1.1rem; font-weight: 800; margin-left: 4px; }
/* Issue #82 (Yuji FB): 小計の色は「cash impact」基準に
* - 買 = 出費 = `-¥X` を **赤** (danger) で警戒色
* - 売 = 収入 = `+¥X` を **緑** (success) でポジティブ色
* ボタン色 (action category) と小計色 (cash impact) を意図的に分離し、
* ポートフォリオ帯の pending-up/down と完全同期させる */
.qty-total.buy strong { color: var(--color-danger-600); }
.qty-total.sell strong { color: var(--color-success-700); }
@media (max-width: 480px) {
.qty-stepper { gap: 5px; padding: 8px 10px; }
.qty-btn { min-width: 34px; height: 34px; padding: 0 8px; font-size: 0.95rem; }
.qty-input { width: 56px; height: 34px; font-size: 1rem; }
.qty-max { width: 100%; margin-left: 0; text-align: right; margin-top: 2px; }
}
/* Stock Price Chart */
.stock-chart-wrap {
background: var(--glass-bg);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: 18px;
margin-bottom: 14px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.stock-chart-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--color-neutral-700);
margin-bottom: 12px;
letter-spacing: 0.02em;
}
.stock-chart-canvas {
width: 100%;
height: auto;
display: block;
}
.stock-chart-legend {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 10px;
flex-wrap: wrap;
}
.stock-chart-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 600;
color: var(--color-neutral-600);
}
.stock-chart-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
/* Character Reaction Bubble */
.chara-reaction {
display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px;
background: color-mix(in srgb, var(--type-color, #2952a3) 6%, rgba(255, 255, 255, 0.85));
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-radius: var(--radius-lg); margin-bottom: var(--space-md);
border: 1px solid color-mix(in srgb, var(--type-color, #2952a3) 15%, rgba(255, 255, 255, 0.5));
animation: fadeSlideUp 0.5s var(--ease-out-expo) both;
box-shadow: 0 4px 16px color-mix(in srgb, var(--type-color, #2952a3) 8%, transparent);
}
.chara-reaction-icon { font-size: 2rem; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.chara-reaction-text { font-size: 0.92rem; color: var(--color-neutral-700); line-height: 1.6; font-weight: 500; }
.chara-reaction-name { font-size: 0.75rem; color: var(--type-color, #2952a3); font-weight: 700; margin-bottom: 2px; letter-spacing: 0.02em; }
/* ===== Result ===== */
.result-section { margin-bottom: var(--space-md); }
/* ⑥: 縦バーは下の .result-section h3::before（色付き）に一本化。ここでの border-left は二重線(｜｜)になるため撤去 */
.result-section h3 { font-size: 1.02rem; font-weight: 700; color: var(--color-neutral-800); margin-bottom: var(--space-sm); line-height: 1.4; }
.result-section ul { list-style: none; padding: 0; }
.result-section li { padding: 8px 0 8px 24px; position: relative; font-size: 0.92rem; color: var(--color-neutral-600); line-height: 1.6; }
.result-section li::before { content: ""; position: absolute; left: 6px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-400); }
.result-section.strengths h3 { border-color: var(--color-success-500); }
.result-section.strengths li::before { background: var(--color-success-500); }
.result-section.pitfalls h3 { border-color: var(--color-warning-500); }
.result-section.pitfalls li::before { background: var(--color-warning-500); }
.result-section.learnings h3 { border-color: #a855f7; }
.result-section.learnings li::before { background: #a855f7; }
.invest-result {
text-align: center; padding: 20px; border-radius: var(--radius-md); margin-bottom: 14px;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.invest-result.profit { background: linear-gradient(135deg, rgba(220, 252, 231, 0.7), rgba(187, 247, 208, 0.5)); border: 1px solid rgba(74, 222, 128, 0.3); }
.invest-result.loss { background: linear-gradient(135deg, rgba(219, 232, 252, 0.7), rgba(191, 219, 254, 0.5)); border: 1px solid rgba(147, 197, 253, 0.3); }
.invest-result.even { background: linear-gradient(135deg, rgba(241, 245, 249, 0.8), rgba(226, 232, 240, 0.5)); border: 1px solid rgba(203, 213, 225, 0.4); }
.invest-result-amount { font-size: 1.6rem; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; animation: countUp 0.6s var(--ease-out-expo) both; }
.invest-result-label { font-size: 0.82rem; color: var(--color-neutral-500); font-weight: 500; }
/* ===== ESG Card ===== */
.esg-card {
background: linear-gradient(135deg, rgba(236, 253, 245, 0.8), rgba(240, 253, 244, 0.7));
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(134, 239, 172, 0.4);
border-radius: var(--radius-lg); padding: 24px; margin-bottom: var(--space-md);
}
/* ===== Animations ===== */
@keyframes fadeSlideUp {
0% { opacity: 0; transform: translateY(24px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes cardReveal {
0% { opacity: 0; transform: scale(0.85) rotateY(8deg) translateY(20px); filter: blur(4px); }
60% { opacity: 1; filter: blur(0); }
100% { opacity: 1; transform: scale(1) rotateY(0) translateY(0); filter: blur(0); }
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.3); }
50% { opacity: 1; transform: scale(1.1); }
70% { transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(41, 82, 163, 0.3); }
50% { box-shadow: 0 0 0 8px rgba(41, 82, 163, 0); }
}
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes shimmerRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes selectPop {
0% { transform: scale(1); }
40% { transform: scale(1.03); }
100% { transform: scale(1); }
}
/* Issue #81: 同画面内 re-render での .selected 要素アニメ波及を抑制
* （別カードをクリックした時に、すでに選択済みのカードまでアニメが再走する問題への対処）
* .no-pop-anim は render({keepScroll:true}) / refreshAllStockCards 時のみ main に付与され、
* 画面遷移時に解除される。
*/
.no-pop-anim *.selected,
.no-pop-anim .stock-actions .btn.selected {
animation: none !important;
}
@keyframes countUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeSlideUp 0.5s var(--ease-out-expo) both; }
/* ===== Utility ===== */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-16 { margin-top: var(--space-md); }
/* ===== Responsive ===== */
@media (max-width: 768px) {
#app { max-width: 100%; padding: 0 14px; }
.progress-bar { padding: 10px 14px; }
.progress-step { min-width: 84px; }
.step-circle { width: 32px; height: 32px; font-size: 0.8rem; }
.progress-line { width: 18px; }
.principles-grid { gap: 8px; }
.principle-card { padding: 14px 10px; }
.principle-desc { font-size: 0.72rem; }
}
@media (max-width: 480px) {
/* モバイルも本文が最低14px以上になるよう base を16pxに（旧14pxだと本文≈12pxで小さすぎ） */
html { font-size: 16px; }
body::before { display: none; }
.card { padding: 18px; border-radius: var(--radius-md); }
#app-title { font-size: 1.1rem; }
.intro-hero h2 { font-size: 1.5rem; }
.quiz-question { font-size: 1.05rem; }
.stock-actions { flex-direction: column; }
.stock-actions .btn { width: 100%; }
.portfolio-summary { flex-direction: column; align-items: flex-start; }
.lifestyle-options { grid-template-columns: 1fr; gap: 8px; }
.chara-emoji { font-size: 3.5rem; }
.chara-emoji img { width: 90px; height: 90px; }
.chara-name { font-size: 1.4rem; }
.progress-bar { border-radius: var(--radius-md); padding: 8px 10px; }
.step-label { font-size: 0.65rem; }
.progress-step { min-width: 76px; }
.progress-line { width: 12px; }
}
/* ========================================
* Value Insight – 価値観フィードバック
* ======================================== */
.value-insight {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: 20px 22px;
margin-bottom: 16px;
border-left: 4px solid var(--type-color, var(--primary));
animation: fadeSlideUp 0.6s var(--ease-out) both;
animation-delay: 0.3s;
}
.value-insight-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.value-insight-icon {
font-size: 1.5rem;
}
.value-insight-title {
font-weight: 700;
font-size: 1.05rem;
color: var(--text);
}
.value-insight-text {
font-size: 0.95rem;
line-height: 1.75;
color: var(--text-muted);
margin: 0;
}
/* Lifestyle Review (Step2 Result) */
.lifestyle-review {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
}
/* ========================================
* Step2 – 家計シミュレーション UI
* ======================================== */
/* 暮らし方選択 */
.living-select {
display: flex;
gap: 12px;
margin-top: 12px;
}
.living-btn {
flex: 1;
padding: 16px 12px;
border-radius: var(--radius-md);
/* Issue #121: backdrop-filter は入場アニメ(transform)中に 1 フレーム白フラッシュを
起こすため除去。半透明白の背景は維持するので見た目はほぼ不変 */
background: var(--glass-bg);
border: 2px solid rgba(255,255,255,0.1);
color: var(--text);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s var(--ease-out);
text-align: center;
}
.living-btn:hover {
border-color: rgba(255,255,255,0.25);
transform: translateY(-2px);
}
.living-btn.selected {
border-color: var(--primary);
background: rgba(107,154,239,0.15);
box-shadow: 0 0 16px rgba(107,154,239,0.2);
}
.living-btn-icon { font-size: 2rem; margin-bottom: 6px; }
.living-btn-label { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.living-btn-desc { font-size: 0.78rem; color: var(--text-muted); font-weight: 400; }
/* 収入セクション */
.income-section {
margin-bottom: 20px;
}
.income-label {
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 8px;
color: var(--text);
}
/* アルバイト選択 */
.job-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 8px;
}
.job-option {
padding: 14px 12px;
border-radius: var(--radius-md);
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.08);
color: var(--text);
font-size: 0.88rem;
font-weight: 500;
cursor: pointer;
transition: all 0.25s var(--ease-out);
text-align: center;
line-height: 1.4;
}
.job-option:hover {
border-color: rgba(255,255,255,0.2);
transform: translateY(-1px);
}
.job-option.selected {
border-color: var(--primary);
background: rgba(107,154,239,0.15);
}
.job-option .job-label {
font-weight: 600;
font-size: 0.88rem;
}
.job-option .job-hourly {
display: block;
font-size: 0.78rem;
color: var(--text-muted);
margin-top: 4px;
}
/* 時間・仕送り選択ボタン */
.select-group {
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.select-btn {
flex: 1;
min-width: 70px;
padding: 10px 8px;
border-radius: var(--radius-md);
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.08);
color: var(--text);
font-size: 0.88rem;
font-weight: 500;
cursor: pointer;
transition: all 0.25s var(--ease-out);
text-align: center;
}
.select-btn:hover {
border-color: rgba(255,255,255,0.2);
}
.select-btn.selected {
border-color: var(--primary);
background: rgba(107,154,239,0.15);
}
/* 収入サマリー */
.income-summary {
background: rgba(107,154,239,0.08);
border-radius: var(--radius-md);
padding: 16px;
margin-top: 16px;
}
.income-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 0.9rem;
color: var(--text-muted);
}
.income-summary-total {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
margin-top: 8px;
border-top: 1px solid rgba(255,255,255,0.12);
font-weight: 700;
font-size: 1.1rem;
color: var(--text);
}
/* 収支まとめ（貯蓄表示） */
.balance-summary {
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--radius-md);
padding: 20px;
margin-top: 16px;
}
.balance-summary.compact {
margin-top: 12px;
padding: 14px;
}
.balance-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 0.95rem;
color: var(--text-muted);
/* 行間の罫線を廃止し、区切りは合計（貯蓄/最終行）の上の1本だけに集約 */
}
.balance-row:last-child {
border-bottom: none;
padding-top: 12px;
margin-top: 4px;
border-top: 2px solid rgba(255,255,255,0.12);
font-weight: 700;
font-size: 1.15rem;
color: var(--text);
}
.balance-row.budget-ok {
color: var(--color-success-600, #16a34a);
}
.balance-row.budget-over {
color: var(--color-danger-600, #ef4444);
}
.balance-detail {
font-size: 0.82rem;
color: var(--text-muted);
padding: 2px 0 2px 16px;
}
/* Step2 モバイル対応 */
@media (max-width: 480px) {
.living-select { flex-direction: column; gap: 8px; }
.living-btn { padding: 14px 10px; }
.job-options { grid-template-columns: 1fr; }
.select-group { gap: 6px; }
.select-btn { min-width: 60px; padding: 8px 6px; font-size: 0.82rem; }
.balance-summary { padding: 14px; }
}
/* ===== Tablet (iPad Air / iPad 10th gen) ===== */
@media (min-width: 481px) and (max-width: 820px) {
#app { max-width: 100%; padding: 0 20px; }
.lifestyle-options { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lifestyle-option { padding: 12px 10px; min-height: 44px; }
.lifestyle-opt-cost { font-size: 1.05rem; }
.lifestyle-opt-label { font-size: 0.82rem; }
.principles-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.job-options { grid-template-columns: 1fr 1fr; gap: 8px; }
.quiz-choice { min-height: 44px; }
.stock-actions .btn { padding: 12px 8px; font-size: 0.85rem; min-height: 44px; }
.select-btn { min-height: 44px; }
.living-btn { min-height: 44px; }
.job-option { min-height: 44px; }
.chara-card { padding: 28px 20px; }
.chara-name { font-size: 1.6rem; }
}
@media (min-width: 1024px) {
#app { max-width: 940px; }
.card { padding: 28px; }
}
/* ===== Focus Visible (Keyboard Navigation) ===== */
:focus-visible {
outline: 3px solid var(--color-primary-400);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.btn:focus-visible {
outline: 3px solid var(--color-primary-400);
outline-offset: 2px;
box-shadow: 0 0 0 6px rgba(41, 82, 163, 0.15);
}
.quiz-choice:focus-visible {
outline: 3px solid var(--color-primary-400);
outline-offset: 2px;
border-color: var(--color-primary-400);
}
.lifestyle-option:focus-visible,
.living-btn:focus-visible,
.job-option:focus-visible,
.select-btn:focus-visible {
outline: 3px solid var(--color-primary-400);
outline-offset: 2px;
}
/* ===== Reduced Motion ===== */
/* ========================================
* Result Screen – Celebratory Header
* ======================================== */
.result-congrats {
text-align: center;
padding: 32px 16px 24px;
animation: fadeSlideUp 0.6s var(--ease-out-expo) both;
}
.result-congrats-emoji {
font-size: 3.5rem;
margin-bottom: 8px;
animation: bounceIn 0.8s var(--ease-spring) 0.2s both;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.result-congrats-title {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--color-primary-600), var(--color-accent-500));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 6px;
}
.result-congrats-sub {
font-size: 0.95rem;
color: var(--color-neutral-500);
font-weight: 500;
}
/* ========================================
* Result Screen – Donut Chart & Legend
* ======================================== */
.result-budget-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
align-items: center;
}
.donut-chart-wrap {
display: flex;
justify-content: center;
max-width: 200px;
}
.donut-chart-wrap canvas {
max-width: 200px;
width: 100%;
}
.donut-legend {
display: flex;
flex-direction: column;
gap: 6px;
}
.donut-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
line-height: 1.4;
}
.donut-legend-dot {
width: 10px;
height: 10px;
border-radius: 3px;
flex-shrink: 0;
}
.donut-legend-label {
color: var(--color-neutral-600);
font-weight: 500;
flex: 1;
min-width: 0;
}
.donut-legend-value {
color: var(--color-neutral-800);
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ========================================
* Result Screen – Reflection Memo
* ======================================== */
.reflection-memo {
width: 100%;
padding: 14px 16px;
border: 2px solid var(--color-neutral-200);
border-radius: var(--radius-md);
font-family: inherit;
font-size: 0.92rem;
line-height: 1.7;
color: var(--color-neutral-800);
background: var(--color-neutral-50);
resize: vertical;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.reflection-memo:focus {
outline: none;
border-color: var(--color-primary-400);
box-shadow: 0 0 0 4px rgba(41, 82, 163, 0.1);
}
.reflection-memo::placeholder {
color: var(--color-neutral-400);
font-size: 0.85rem;
}
/* ========================================
* Result Screen – Responsive
* ======================================== */
@media (max-width: 480px) {
.result-congrats { padding: 24px 12px 16px; }
.result-congrats-emoji { font-size: 2.8rem; }
.result-budget-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.donut-chart-wrap {
max-width: 180px;
margin: 0 auto;
}
.donut-legend { align-items: center; }
.radar-chart-wrap canvas { max-width: 300px; }
.reflection-memo { font-size: 0.85rem; padding: 12px; }
}
@media (min-width: 481px) and (max-width: 820px) {
.result-budget-grid {
grid-template-columns: auto 1fr;
gap: 16px;
}
.donut-chart-wrap { max-width: 180px; }
}
/* ========================================
* Confetti Overlay
* ======================================== */
#confetti-canvas {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
pointer-events: none;
z-index: 9999;
}
/* ========================================
* Achievement Badge System
* ======================================== */
.badge-popup {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.5);
z-index: 9998;
background: var(--glass-bg-elevated);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 2px solid rgba(255, 215, 0, 0.4);
border-radius: var(--radius-xl);
padding: 36px 40px;
text-align: center;
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.2), 0 0 60px rgba(255, 215, 0, 0.15);
opacity: 0;
animation: badgePopIn 0.8s var(--ease-spring) forwards;
pointer-events: auto;
}
.badge-popup-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
z-index: 9997;
opacity: 0;
animation: fadeIn 0.3s ease forwards;
}
@keyframes badgePopIn {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-5deg); }
60% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(1deg); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
.badge-icon {
font-size: 4rem;
margin-bottom: 12px;
animation: bounceIn 0.6s var(--ease-spring) 0.3s both;
filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.4));
}
.badge-label {
font-size: 0.78rem;
font-weight: 700;
color: var(--color-warning-600);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 4px;
}
.badge-name {
font-size: 1.4rem;
font-weight: 800;
color: var(--color-neutral-800);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.badge-desc {
font-size: 0.92rem;
color: var(--color-neutral-500);
font-weight: 500;
}
.badge-dismiss {
display: inline-block;
margin-top: 16px;
padding: 10px 28px;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff;
border: none;
border-radius: var(--radius-full);
font-family: inherit;
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
transition: all var(--transition-fast);
}
.badge-dismiss:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
/* Badge collection on result page */
.badge-collection {
display: flex;
justify-content: center;
align-items: stretch;
gap: 16px;
flex-wrap: wrap;
margin: 16px 0;
}
.badge-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 12px;
background: linear-gradient(160deg, rgba(255, 251, 235, 0.9), rgba(254, 243, 199, 0.8));
border: 1px solid rgba(253, 230, 138, 0.5);
border-radius: var(--radius-md);
width: 124px;
justify-content: flex-start;
transition: transform var(--transition-normal);
}
.badge-item:hover { transform: translateY(-3px) scale(1.05); }
.badge-item-icon { font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)); }
.badge-item-name { font-size: 0.72rem; font-weight: 700; color: var(--color-warning-600); text-align: center; white-space: normal; line-height: 1.35; }
/* ========================================
* Floating Character Companion
* ======================================== */
.floating-chara {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
cursor: pointer;
transition: all 0.3s var(--ease-spring);
animation: floatBob 3s ease-in-out infinite;
}
.floating-chara:hover { transform: scale(1.1); }
.floating-chara-avatar {
width: 56px; height: 56px;
border-radius: 50%;
border: 3px solid var(--type-color, var(--primary));
box-shadow: 0 4px 20px rgba(41, 82, 163, 0.25), 0 0 0 4px rgba(255, 255, 255, 0.8);
object-fit: cover;
background: var(--glass-bg);
}
.floating-chara-emoji {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--glass-bg-elevated);
border: 3px solid var(--type-color, var(--primary));
box-shadow: 0 4px 20px rgba(41, 82, 163, 0.25), 0 0 0 4px rgba(255, 255, 255, 0.8);
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
}
.floating-chara-bubble {
position: absolute;
bottom: 66px; right: 0;
min-width: 220px; max-width: 280px;
padding: 14px 16px;
background: var(--glass-bg-elevated);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-md);
box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
font-size: 0.85rem;
color: var(--color-neutral-700);
line-height: 1.6;
font-weight: 500;
opacity: 0;
transform: translateY(8px) scale(0.95);
transition: all 0.3s var(--ease-out-expo);
pointer-events: none;
}
.floating-chara-bubble.show {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.floating-chara-bubble::after {
content: "";
position: absolute;
bottom: -8px; right: 20px;
width: 0; height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid var(--glass-bg-elevated);
}
@keyframes floatBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* ========================================
* Classroom Timer
* ======================================== */
.timer-toggle {
position: absolute;
top: 20px; right: 16px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
font-size: 1.2rem;
transition: all var(--transition-fast);
z-index: 50;
padding: 0;
color: var(--color-neutral-400);
font-family: inherit;
opacity: 0.4;
}
.timer-toggle:hover { background: var(--glass-bg-elevated); color: var(--color-primary-500); opacity: 1; }
/* ヘッダー右上「はじめからやり直す」（タイマーの左隣）。レビュー用 */
.app-reset-btn {
position: absolute;
top: 20px; right: 64px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all var(--transition-fast);
z-index: 50;
padding: 0;
color: var(--color-neutral-400);
opacity: 0.5;
}
.app-reset-btn:hover { background: var(--glass-bg-elevated); color: var(--color-danger-500); opacity: 1; }
.app-reset-btn i { font-size: 1.2rem; }
.timer-toggle.active {
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
color: #fff;
box-shadow: 0 2px 12px rgba(41, 82, 163, 0.3);
opacity: 1;
}
/* #204: 基底 .ph-duotone(色=primary-600 navy)が継承#fffに勝つため、起動時アイコンが背景に沈む。
specificityで上書きして白に固定し、濃色背景でも視認できるようにする。 */
.timer-toggle.active i { color: #fff; }
.timer-display {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 16px;
background: var(--glass-bg-elevated);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
margin-bottom: var(--space-sm);
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
animation: fadeSlideUp 0.3s var(--ease-out-expo) both;
}
.timer-display.show { display: flex; }
.timer-time {
font-size: 1.4rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--color-neutral-800);
letter-spacing: 0.02em;
}
.timer-time.warning { color: var(--color-warning-600); animation: pulseGlow 1.5s ease-in-out infinite; }
.timer-time.danger { color: var(--color-danger-500); animation: pulseGlow 0.8s ease-in-out infinite; }
.timer-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--color-neutral-400);
}
.timer-controls {
display: flex;
gap: 4px;
}
.timer-btn {
background: none;
border: none;
padding: 4px 8px;
cursor: pointer;
font-size: 0.88rem;
color: var(--color-neutral-500);
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
font-family: inherit;
}
.timer-btn:hover { background: var(--color-neutral-100); color: var(--color-neutral-700); }
/* ========================================
* Financial Knowledge Columns
* ======================================== */
.knowledge-card {
background: linear-gradient(135deg, rgba(219, 232, 252, 0.6), rgba(240, 245, 255, 0.7));
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(163, 193, 245, 0.3);
border-radius: var(--radius-lg);
padding: 20px 22px;
margin-bottom: var(--space-md);
}
.nisa-card {
background: linear-gradient(135deg, rgba(236, 253, 245, 0.7), rgba(220, 252, 231, 0.6));
border: 1px solid rgba(134, 239, 172, 0.3);
border-radius: var(--radius-lg);
padding: 20px 22px;
margin-bottom: var(--space-md);
}
.nisa-title {
font-size: 1rem;
font-weight: 700;
color: #166534;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.nisa-body {
font-size: 0.88rem;
color: var(--color-neutral-600);
line-height: 1.7;
}
.nisa-points {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
.nisa-point {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-sm);
font-size: 0.82rem;
font-weight: 600;
color: var(--color-neutral-700);
}
.nisa-point-icon {
font-size: 1.15rem;
flex-shrink: 0;
color: var(--color-success-500);
}
/* ========================================
* Scroll-Triggered Animations
* ======================================== */
.scroll-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.scroll-reveal.revealed {
opacity: 1;
transform: translateY(0);
}
.scroll-reveal:nth-child(2) { transition-delay: 0.08s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.16s; }
.scroll-reveal:nth-child(4) { transition-delay: 0.24s; }
.scroll-reveal:nth-child(5) { transition-delay: 0.32s; }
/* ========================================
* Button Ripple Effect
* ======================================== */
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
transform: scale(0);
animation: rippleExpand 0.6s ease-out;
pointer-events: none;
}
@keyframes rippleExpand {
to { transform: scale(4); opacity: 0; }
}
/* ========================================
* Share Result Card
* ======================================== */
.share-actions {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.btn-share {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: #fff;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.btn-share:hover {
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
transform: translateY(-1px);
}
/* ========================================
* Step Transition Enhancement
* ======================================== */
.step-complete-banner {
text-align: center;
padding: 20px;
margin-bottom: var(--space-md);
animation: fadeSlideUp 0.6s var(--ease-out-expo) both;
}
.step-complete-emoji {
font-size: 2.5rem;
margin-bottom: 8px;
animation: bounceIn 0.6s var(--ease-spring) 0.2s both;
}
.step-complete-text {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-primary-700);
margin-bottom: 4px;
}
.step-complete-sub {
font-size: 0.88rem;
color: var(--color-neutral-500);
font-weight: 500;
}
/* ========================================
* Enhanced Mobile Touch Feedback
* ======================================== */
@media (hover: none) and (pointer: coarse) {
.quiz-choice:active,
.lifestyle-option:active,
.living-btn:active,
.job-option:active,
.select-btn:active {
transform: scale(0.96);
transition-duration: 80ms;
}
.stock-actions .btn:active {
transform: scale(0.95);
transition-duration: 80ms;
}
}
/* ========================================
* Responsive additions
* ======================================== */
@media (max-width: 480px) {
.floating-chara { bottom: 12px; right: 12px; }
.floating-chara-avatar, .floating-chara-emoji { width: 48px; height: 48px; }
.floating-chara-emoji { font-size: 1.5rem; }
.floating-chara-bubble { min-width: 200px; max-width: 240px; font-size: 0.8rem; right: -8px; }
.timer-toggle { top: 14px; right: 12px; width: 36px; height: 36px; font-size: 1rem; }
.app-reset-btn { top: 14px; right: 54px; width: 36px; height: 36px; }
.app-reset-btn i { font-size: 1rem; }
.badge-popup { padding: 28px 24px; }
.badge-icon { font-size: 3rem; }
.badge-name { font-size: 1.2rem; }
.badge-collection { gap: 10px; }
.badge-item { width: 104px; padding: 10px 8px; }
.badge-item-icon { font-size: 1.6rem; }
.nisa-points { grid-template-columns: 1fr; }
}
/* ===== Print Styles ===== */
@media print {
body { background: #fff !important; }
body::before { display: none; }
#header, #footer, .reset-link { display: none !important; }
.result-actions { display: none !important; }
#confetti-canvas, .floating-chara, .timer-toggle, .timer-display, .badge-popup, .badge-popup-overlay { display: none !important; }
.step-complete-banner { break-after: avoid; }
.card {
background: #fff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border: 1px solid #e2e8f0;
break-inside: avoid;
}
.chara-card {
background: #fff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
.value-insight, .chara-advice, .chara-reaction {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: #f8fafc !important;
}
.esg-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: #f0fdf4 !important;
}
.knowledge-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: #f0f5ff !important;
border: 1px solid #dbe8fc;
break-inside: avoid;
}
.nisa-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: #f0fdf4 !important;
border: 1px solid #dcfce7;
break-inside: avoid;
}
.scroll-reveal { opacity: 1 !important; transform: none !important; }
.result-congrats { padding: 16px 0; }
.result-congrats-title {
/* グラデ背景+background-clip:text は印刷でクリップが効かず帯状に潰れる。
背景を消してソリッド文字色にする。 */
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: var(--color-primary-700) !important;
color: var(--color-primary-700) !important;
}
.reflection-memo {
border: 1px solid #cbd5e1;
background: #fff;
min-height: 80px;
}
.balance-summary {
background: #f8fafc !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
canvas { max-width: 100% !important; }
/* ---- 総合結果 印刷レイアウト: 記念+実用で約2枚に収束 ---- */
/* Safari空白対策: 登場アニメの初期状態(opacity:0)や transform が印刷経路で残り、
キャラカード・バッジ・重い画像が白飛びするのを一律で解除する */
.result-congrats, .chara-reveal, .chara-card, .card,
.scroll-reveal, .nisa-card, .chara-emoji, .chara-emoji img,
.result-congrats-emoji, .badge-item, .badge-item-icon, .badge-item-icon i {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* 縦圧縮: フォント階層(可読性)は保ち、余白だけ軽く詰める（zoomは使わず自然サイズ） */
.card { padding: 12px 16px !important; margin-bottom: 8px !important; }
.card-title { margin-bottom: 6px !important; }
.card-desc { margin-bottom: 6px !important; }
/* 完了バナー（P1のヘッダとして小さく。ワーク1を1ページに収める要） */
.result-congrats { padding: 0 0 6px !important; }
.result-congrats-emoji { margin-bottom: 0 !important; }
.result-congrats-emoji i { font-size: 1.4rem !important; filter: none !important; }
.result-congrats-title { font-size: 1.4rem !important; margin: 2px 0 !important; }
.result-congrats-sub { font-size: 0.8rem !important; }
/* キャラ画像: P1に1ページ割くので記念サイズで残す（後方 240px!important は EOF ブロックで上書き） */
.chara-card { padding: 12px 16px !important; }
.chara-emoji { margin-bottom: 8px !important; }
.chara-catchphrase { margin-bottom: 4px !important; }
.chara-desc, .chara-card p { line-height: 1.45 !important; }
/* 家計ドーナツ: 印刷では小さく抑えて縦を節約（実データ時の巨大化も防止） */
.donut-chart-wrap, .donut-chart-wrap canvas {
max-width: 150px !important; max-height: 150px !important; margin: 0 auto !important;
}
.balance-summary { margin-top: 6px !important; }
/* ワーク2(家計)を実データ(費目明細11行+凡例)でも1ページに収める圧縮 */
.result-budget-grid { gap: 10px !important; margin-bottom: 4px !important; }
.donut-legend-item { padding: 1px 0 !important; font-size: 0.74rem !important; }
.lifestyle-summary-item { padding: 3px 0 !important; font-size: 0.76rem !important; }
.lifestyle-summary-icon { font-size: 0.9rem !important; }
.mt-16 { margin-top: 6px !important; }
.balance-row { padding: 5px 12px !important; }
.balance-row.budget-ok span:last-child,
.balance-row.budget-over span:last-child { font-size: 1.15rem !important; }
/* セクション間隔（ワーク1をP1に収めるため強み/注意/学びの行間を締める） */
.result-section { margin-bottom: 6px !important; }
.result-section h3 { margin: 0 0 3px !important; }
.result-section ul { margin: 3px 0 !important; }
.result-section li { margin-bottom: 2px !important; line-height: 1.35 !important; }
.proto-r-section { margin-bottom: 8px !important; }
.badge-item-icon i { filter: none !important; }
/* 振り返りメモ: 手書き用に残す（P3にバッジと同居） */
.reflection-memo { min-height: 52px !important; height: 52px !important; }
/* NISA 教育枠: バッジ等と同じく「結果に付随する要素」として P3 に載せる。
（P3が溢れる場合のみ後段で display:none に切り替える運用も可） */
.nisa-card { padding: 12px 16px !important; margin-bottom: 8px !important; }
/* 1ワーク=1ページ: ワーク2(家計)・ワーク3(投資)を新ページ先頭に置く。
ワーク1(完了+キャラ+強み/気をつけたい/学び)は先頭ページに残る。zoomは使わない=ブラウザ依存回避。
page-break-before は旧印刷エンジン向けフォールバック（break-before 未対応でも改ページ）。 */
.print-work-break { break-before: page !important; page-break-before: always !important; }
/* 各ワークは自然サイズで1ページに収まる。大カードは流し、小タイルだけ分割禁止。 */
.card, .knowledge-card, .chara-card, .invest-result, .balance-summary, .nisa-card { break-inside: auto; }
.badge-item, .nisa-point, .balance-row { break-inside: avoid; }
}
@page { margin: 12mm; }
/* ==========================================================
Design System v0.1 — Additive Layer (適用層)
既存ルールはそのまま、必要部分のみ上書き＋新規追加
========================================================== */
/* ---- Phosphor アイコン カスケード ---- */
/* デフォルトはネイビー。文脈で上書きされる */
.ph, .ph-fill, .ph-duotone, .ph-bold, .ph-light, .ph-regular, .ph-thin {
color: var(--color-primary-600);
line-height: 1;
display: inline-block;
vertical-align: -0.125em;
}
/* ---- Timer ボタン内 Phosphor サイズ ---- */
.timer-toggle i { font-size: 1.2rem; }
.timer-btn i { font-size: 0.95rem; }
/* ---- Progress 結果ステップの ★ アイコン ---- */
.step-circle i {
font-size: 1rem;
color: inherit;
}
/* ---- 各 emoji 系コンテナ内 Phosphor のサイズ調整 ---- */
.budget-icon i { font-size: 1.5rem; color: var(--color-primary-600); }
.value-insight-icon i { font-size: 1.6rem; color: var(--color-primary-500); }
.chara-advice-icon i { font-size: 1.8rem; color: var(--color-primary-500); }
.chara-reaction-icon i { font-size: 2rem; color: var(--color-primary-500); }
.floating-chara-emoji i { font-size: 2.2rem; color: var(--color-primary-500); }
.badge-icon i { font-size: 2.5rem; color: var(--color-primary-500); }
.badge-item-icon i { font-size: 2rem; color: var(--color-primary-500); filter: drop-shadow(0 2px 6px rgba(41,82,163,0.25)); }
/* ---- step-complete-emoji（ピーク演出の入口）---- */
.step-complete-emoji i {
font-size: 4rem;
color: var(--color-primary-500);
filter: drop-shadow(0 6px 16px rgba(41,82,163,0.30));
animation: stepCompletePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes stepCompletePop {
0% { opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}
/* ---- result-congrats-emoji（ピーク演出のクライマックス）---- */
.result-congrats-emoji i {
font-size: 5rem;
color: var(--color-accent-500); /* コーラル許可箇所（祝祭の核） */
filter: drop-shadow(0 8px 20px rgba(240,98,146,0.40));
animation: congratsPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes congratsPop {
0% { opacity: 0; transform: scale(0.4) rotate(-20deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
/* ---- キャラ画像周りの Peak Moment Glow ---- */
.chara-emoji {
position: relative;
}
.chara-emoji::before {
content: "";
position: absolute;
inset: -16px;
background:
radial-gradient(ellipse at 30% 30%, rgba(59,111,217,0.28) 0%, transparent 60%),
radial-gradient(ellipse at 70% 70%, rgba(107,154,239,0.22) 0%, transparent 60%);
border-radius: 50%;
filter: blur(22px);
z-index: -1;
animation: glowBreath 3.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes glowBreath {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
/* ---- キャラ画像をrounded squareに変更（DS方針）---- */
.chara-emoji img {
width: 168px !important;
height: 168px !important;
border-radius: var(--radius-xl) !important;
border: 4px solid #fff !important;
box-shadow:
0 24px 48px rgba(15,33,64,0.20),
0 6px 16px rgba(41,82,163,0.15) !important;
object-fit: cover;
}
/* ---- Reduced Motion 対応（DS必須）---- */
/* ---- 進捗バー active state を pulseGlow 控えめに（教室適応）---- */
/* ---- Issue #18: progress-bar 内のバッジアイコンサイズ・色制御 ---- */
.step-circle i {
font-size: 1.15rem;
line-height: 1;
vertical-align: middle;
transition: color 0.35s var(--ease-out-expo, ease-out), transform 0.35s var(--ease-out-expo, ease-out);
}
/* 未取得 = グレー線画的に控えめ */
.progress-step .step-circle i {
color: var(--color-neutral-400);
}
/* active = 進行中、白アイコン */
.progress-step.active .step-circle i {
color: #fff;
}
/* done = ゴールドアクセント */
.progress-step.done .step-circle i {
color: #fbbf24;
transform: scale(1.05);
}
/* ==========================================================
Design System v0.1 — Work1 Result Hero (ds-* prefix)
サンプル構成 (20260514_work1_result_brushup.html) を本番適用
既存クラス（.chara-*, .step-feedback等）は無関係＝他画面に影響なし
========================================================== */
.ds-result-hero {
position: relative;
text-align: center;
padding: 36px 24px 32px;
margin-bottom: 20px;
}
.ds-result-label {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px;
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
color: var(--color-primary-600);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
border-radius: 999px;
margin-bottom: 18px;
opacity: 0;
animation: dsFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s forwards;
}
.ds-result-label i { font-size: 0.85rem; color: var(--color-primary-500); }
.ds-char-vis {
position: relative;
width: 240px; height: 240px;
margin: 0 auto 22px;
opacity: 0;
transform: scale(0.85);
animation: dsCharPop 0.9s cubic-bezier(0.34,1.56,0.64,1) 0.3s forwards;
}
@keyframes dsCharPop {
0% { opacity: 0; transform: scale(0.85); }
100% { opacity: 1; transform: scale(1); }
}
.ds-char-vis::before {
content: "";
position: absolute; inset: -20px;
background:
radial-gradient(ellipse at 30% 30%, rgba(59,111,217,0.32) 0%, transparent 60%),
radial-gradient(ellipse at 70% 70%, rgba(107,154,239,0.26) 0%, transparent 60%);
border-radius: 36px;
filter: blur(24px);
z-index: 0;
animation: dsGlowBreath 3.5s ease-in-out infinite;
}
@keyframes dsGlowBreath {
0%, 100% { opacity: 0.75; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
.ds-char-vis-inner {
position: relative;
z-index: 1;
width: 100%; height: 100%;
border-radius: 28px;
overflow: hidden;
background: #fff;
box-shadow:
0 24px 60px rgba(15,33,64,0.22),
0 8px 20px rgba(41,82,163,0.18),
inset 0 0 0 4px #fff;
}
.ds-char-vis-inner img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.ds-char-fallback {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 5rem;
color: var(--color-primary-500);
}
.ds-char-sparkle {
position: absolute;
z-index: 2;
opacity: 0;
animation: dsSparkleIn 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.ds-char-sparkle.s1 { top: -4px; left: 4px; font-size: 22px; animation-delay: 0.9s; color: var(--color-primary-500); }
.ds-char-sparkle.s2 { bottom: 12px; right: -4px; font-size: 18px; animation-delay: 1.05s; color: var(--color-accent-400); }
.ds-char-sparkle.s3 { top: 30%; right: -10px; font-size: 14px; animation-delay: 1.2s; color: var(--color-primary-300); }
@keyframes dsSparkleIn {
0% { opacity: 0; transform: scale(0) rotate(-30deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.ds-char-type {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.15em;
color: var(--color-neutral-500);
margin-bottom: 8px;
opacity: 0;
animation: dsFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 0.6s forwards;
}
.ds-char-name {
font-size: clamp(1.7rem, 5vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--color-primary-800);
margin: 0 0 12px;
opacity: 0;
animation: dsFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.8s forwards;
}
.ds-char-tagline {
font-size: 1.05rem;
font-weight: 600;
color: var(--color-primary-700);
margin: 0 0 18px;
opacity: 0;
animation: dsFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.0s forwards;
}
.ds-char-tagline::before, .ds-char-tagline::after {
content: "\201C";
color: var(--color-primary-300);
margin: 0 4px;
font-family: "Inter", serif;
font-weight: 800;
}
.ds-char-tagline::after { content: "\201D"; }
.ds-axis-tags {
display: inline-flex; gap: 8px;
opacity: 0;
animation: dsFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) 1.2s forwards;
}
.ds-axis-tag {
padding: 5px 14px;
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
color: var(--color-primary-700);
display: inline-flex; align-items: center; gap: 6px;
}
.ds-axis-tag i { color: var(--color-primary-500); font-size: 0.9rem; }
@keyframes dsFadeUp {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ---- 3カラム insight grid ---- */
.ds-insight-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 0 16px 22px;
opacity: 0;
animation: dsFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.4s forwards;
}
@media (max-width: 640px) {
.ds-insight-grid { grid-template-columns: 1fr; gap: 12px; margin: 0 0 22px; }
}
.ds-insight-card {
/* #134/④: 残像対策で backdrop-filter を除去し不透明白に */
background: #ffffff;
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 20px 18px;
box-shadow: var(--glass-shadow);
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1);
}
.ds-insight-card:hover {
transform: translateY(-2px);
box-shadow: var(--glass-shadow-elevated);
}
.ds-insight-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(59,111,217,0.18);
}
.ds-insight-icon {
width: 38px; height: 38px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
}
.ds-insight-icon i { font-size: 22px; color: #fff !important; }
.ds-insight-icon.gain {
background: linear-gradient(135deg, var(--color-success-500), #16a34a);
box-shadow: 0 6px 14px rgba(22,163,74,0.22);
}
.ds-insight-icon.trap {
background: linear-gradient(135deg, var(--color-warning-500), #d97706);
box-shadow: 0 6px 14px rgba(217,119,6,0.22);
}
.ds-insight-icon.learn {
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
box-shadow: 0 6px 14px rgba(41,82,163,0.22);
}
.ds-insight-title {
font-size: 0.85rem;
font-weight: 800;
color: var(--color-primary-800);
letter-spacing: 0.01em;
}
.ds-insight-list { display: flex; flex-direction: column; gap: 8px; }
.ds-insight-item {
display: flex; gap: 8px;
font-size: 0.82rem;
line-height: 1.55;
color: var(--color-neutral-700);
}
.ds-insight-item::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
margin-top: 8px;
flex-shrink: 0;
background: var(--color-primary-300);
}
.ds-insight-card.gain .ds-insight-item::before { background: var(--color-success-500); }
.ds-insight-card.trap .ds-insight-item::before { background: var(--color-warning-500); }
.ds-insight-card.learn .ds-insight-item::before { background: var(--color-primary-400); }
/* ---- Insight Message ---- */
.ds-insight-message {
background:
linear-gradient(135deg, rgba(59,111,217,0.10) 0%, rgba(107,154,239,0.08) 100%),
var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 24px 26px;
position: relative;
margin: 0 16px 28px;
box-shadow: var(--glass-shadow);
opacity: 0;
animation: dsFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.6s forwards;
}
@media (max-width: 640px) { .ds-insight-message { margin: 0 0 28px; } }
.ds-insight-message::before {
content: "\201C";
position: absolute;
top: -10px; left: 20px;
font-size: 80px;
line-height: 1;
font-family: "Inter", serif;
color: var(--color-primary-300);
opacity: 0.6;
font-weight: 800;
}
.ds-message-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 10px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-primary-600);
text-transform: uppercase;
}
.ds-message-head i { font-size: 1rem; color: var(--color-primary-500); }
.ds-message-body {
font-size: 0.95rem;
line-height: 1.85;
color: var(--color-neutral-700);
font-weight: 500;
}
/* ---- CTA Row ---- */
.ds-cta-row {
display: flex; gap: 12px; align-items: center;
justify-content: center;
margin: 0 16px 24px;
opacity: 0;
animation: dsFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 1.8s forwards;
}
@media (max-width: 640px) { .ds-cta-row { margin: 0 0 24px; } }
.ds-btn-primary {
flex: 1; max-width: 360px;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 16px 28px;
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-800) 100%);
color: #fff;
border: none;
border-radius: 999px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
font-family: inherit;
box-shadow:
0 12px 28px rgba(15,33,64,0.32),
inset 0 1px 0 rgba(255,255,255,0.25);
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s cubic-bezier(0.16,1,0.3,1);
position: relative;
overflow: hidden;
}
.ds-btn-primary::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.ds-btn-primary:hover {
transform: translateY(-2px);
box-shadow:
0 16px 36px rgba(15,33,64,0.38),
inset 0 1px 0 rgba(255,255,255,0.25);
}
.ds-btn-primary i {
font-size: 1.2rem;
color: var(--color-accent-400) !important; /* コーラル許可箇所 #1: CTA矢印のみ */
}
/* ==========================================================
Design System v0.1 — Global Application Layer
既存クラスを「全画面で」DSテイストに引き上げる
========================================================== */
/* ---- Card ベース（全画面の基底）---- */
.card {
border-radius: var(--radius-xl) !important; /* 14 → 28 */
padding: 28px var(--space-lg) !important;
box-shadow: var(--glass-shadow), 0 2px 8px rgba(15,33,64,0.04) !important;
border: 1px solid var(--glass-border) !important;
}
.card-title {
font-size: 1.05rem !important;
font-weight: 800 !important;
color: var(--color-primary-800) !important;
letter-spacing: -0.01em;
}
.card-title::before {
background: linear-gradient(180deg, var(--color-primary-400), var(--color-primary-700)) !important;
}
.card-desc {
font-size: 0.92rem;
color: var(--color-neutral-600);
line-height: 1.75;
}
/* ---- Button: Primary → DS pill ---- */
.btn-primary {
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-800) 100%) !important;
border-radius: 999px !important;
padding: 15px 32px !important;
font-size: 0.98rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
box-shadow:
0 12px 28px rgba(15,33,64,0.30),
inset 0 1px 0 rgba(255,255,255,0.22) !important;
transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo);
}
.btn-primary::after {
content: "→";
margin-left: 4px;
font-size: 1.1rem;
font-weight: 700;
color: var(--color-accent-400); /* コーラル許可箇所: 矢印のみ */
transition: transform 0.25s var(--ease-out-expo);
}
.btn-primary:hover {
transform: translateY(-2px) !important;
box-shadow:
0 16px 36px rgba(15,33,64,0.36),
inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.btn-primary:hover::after { transform: translateX(4px); }
.btn-primary:disabled {
background: var(--color-neutral-300) !important;
box-shadow: none !important;
}
.btn-primary:disabled::after { color: var(--color-neutral-400); }
.btn-block { width: 100%; }
/* ---- Button: Secondary → glass ghost ---- */
.btn-secondary {
background: var(--glass-bg) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid var(--glass-border) !important;
color: var(--color-primary-700) !important;
border-radius: 999px !important;
padding: 13px 24px !important;
font-weight: 700 !important;
}
.btn-secondary:hover {
background: var(--glass-bg-elevated) !important;
border-color: var(--color-primary-200) !important;
transform: translateY(-1px);
}
/* ---- Button: Success → DS green pill ---- */
.btn-success {
background: linear-gradient(135deg, var(--color-success-500), var(--color-success-600)) !important;
border-radius: 999px !important;
padding: 15px 32px !important;
box-shadow:
0 12px 28px rgba(22,163,74,0.30),
inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.btn-success:hover {
transform: translateY(-2px) !important;
box-shadow:
0 16px 36px rgba(22,163,74,0.36),
inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
/* ---- Intro Hero (全画面で最初に出る顔) ---- */
.intro-hero {
text-align: center;
padding: 32px 16px 24px;
}
.intro-hero h2 {
font-size: clamp(1.85rem, 4.5vw, 2.4rem) !important;
font-weight: 900 !important;
letter-spacing: -0.025em !important;
line-height: 1.18 !important;
background: none !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: initial !important;
background-clip: initial !important;
color: var(--color-primary-800) !important;
margin-bottom: 14px;
}
.intro-hero p {
font-size: 0.98rem;
color: var(--color-neutral-600);
font-weight: 500;
line-height: 1.75;
margin-bottom: 20px;
}
.intro-hero-icons {
display: flex; justify-content: center; gap: 12px;
margin-top: 12px;
}
.intro-hero-icon {
width: 52px; height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, var(--color-primary-50), #fff);
border: 1px solid var(--color-primary-100);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 8px 20px rgba(41,82,163,0.10);
opacity: 0;
animation: introIconPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
.intro-hero-icon i { font-size: 26px; color: var(--color-primary-500); }
@keyframes introIconPop {
0% { opacity: 0; transform: scale(0.5) translateY(8px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* ---- Intro Step Items（手順説明）---- */
.intro-steps {
display: flex; flex-direction: column; gap: 12px;
margin: 20px 0 24px;
}
.intro-step-item {
display: flex; align-items: center; gap: 16px;
padding: 16px 18px !important;
background:
linear-gradient(135deg, rgba(219,232,252,0.5), rgba(240,245,255,0.7)) !important;
border: 1px solid rgba(107,154,239,0.20) !important;
border-radius: var(--radius-lg) !important;
font-size: 0.92rem;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo);
}
.intro-step-item:hover {
transform: translateX(6px) !important;
box-shadow: 0 10px 24px rgba(41,82,163,0.10);
}
.intro-step-num {
width: 38px !important; height: 38px !important;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-800)) !important;
color: #fff !important;
font-weight: 800 !important;
font-size: 0.95rem !important;
box-shadow: 0 6px 16px rgba(15,33,64,0.30) !important;
}
.intro-step-item strong {
font-size: 0.96rem;
font-weight: 700;
color: var(--color-primary-800);
display: block;
margin-bottom: 2px;
}
.intro-step-item small {
font-size: 0.78rem;
color: var(--color-neutral-600);
}
/* ---- Quiz: Question 表示 ---- */
.quiz-progress {
font-size: 0.74rem !important;
font-weight: 700 !important;
color: var(--color-primary-600) !important;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.quiz-progress-bar {
height: 6px !important;
background: var(--color-neutral-100) !important;
border-radius: 999px !important;
overflow: hidden;
margin: 8px 0 20px !important;
}
.quiz-progress-fill {
background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-700)) !important;
border-radius: 999px !important;
box-shadow: 0 0 12px rgba(41,82,163,0.25);
transition: width 0.6s var(--ease-out-expo) !important;
}
.quiz-question {
font-size: 1.15rem !important;
font-weight: 800 !important;
color: var(--color-primary-800) !important;
letter-spacing: -0.01em;
line-height: 1.55 !important;
margin: 4px 0 18px !important;
}
/* ---- Quiz: Choice ボタン ---- */
.quiz-choices {
display: flex; flex-direction: column; gap: 10px;
}
.quiz-choice {
display: flex; align-items: center; gap: 12px;
padding: 16px 20px !important;
background: rgba(255,255,255,0.7) !important;
border: 1.5px solid rgba(203,213,225,0.6) !important;
border-radius: var(--radius-lg) !important;
font-family: inherit;
font-size: 0.95rem !important;
font-weight: 500 !important;
color: var(--color-neutral-700) !important;
text-align: left !important;
cursor: pointer;
transition: all 0.25s var(--ease-out-expo) !important;
position: relative;
}
.quiz-choice::before {
content: "";
width: 18px; height: 18px;
border: 2px solid var(--color-neutral-300);
border-radius: 50%;
flex-shrink: 0;
transition: all 0.2s var(--ease-out-expo);
}
.quiz-choice:hover {
border-color: var(--color-primary-300) !important;
background: #fff !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(41,82,163,0.08);
}
.quiz-choice:hover::before {
border-color: var(--color-primary-400);
}
.quiz-choice.selected {
background: linear-gradient(135deg, var(--color-primary-50), #fff) !important;
border-color: var(--color-primary-500) !important;
color: var(--color-primary-800) !important;
font-weight: 700 !important;
box-shadow:
0 10px 24px rgba(41,82,163,0.18),
inset 0 0 0 1px var(--color-primary-500);
}
.quiz-choice.selected::before {
background: var(--color-primary-600);
border-color: var(--color-primary-600);
box-shadow: inset 0 0 0 4px #fff;
}
/* ---- Step Complete Banner（step1result以外の場面で使用される）---- */
.step-complete-banner {
text-align: center;
padding: 24px 16px 8px;
margin-bottom: 16px;
}
.step-complete-text {
font-size: 1.3rem !important;
font-weight: 900 !important;
color: var(--color-primary-800) !important;
letter-spacing: -0.02em;
margin-top: 8px !important;
}
.step-complete-sub {
font-size: 0.85rem !important;
color: var(--color-neutral-600) !important;
margin-top: 4px !important;
}
/* ---- Value Insight（Work2/3で使用）---- */
.value-insight {
background:
linear-gradient(135deg, rgba(59,111,217,0.10) 0%, rgba(107,154,239,0.06) 100%),
var(--glass-bg) !important;
border-radius: var(--radius-xl) !important;
padding: 24px 26px !important;
border: 1px solid var(--glass-border) !important;
box-shadow: var(--glass-shadow) !important;
}
.value-insight-header {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
}
.value-insight-icon { font-size: 1.5rem; }
.value-insight-icon i { color: var(--color-primary-500); }
.value-insight-title {
font-size: 0.78rem !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
color: var(--color-primary-700) !important;
text-transform: uppercase;
}
.value-insight-text {
font-size: 0.92rem !important;
line-height: 1.85 !important;
color: var(--color-neutral-700) !important;
}
/* ---- Balance Summary（Work2 結果）---- */
.balance-summary {
border-radius: var(--radius-xl) !important;
padding: 24px !important;
box-shadow: var(--glass-shadow-elev) !important;
border: 1px solid var(--glass-border) !important;
}
.balance-row {
padding: 10px 0 !important;
font-size: 0.92rem;
}
/* ---- Lifestyle Choice (Work2) ---- */
.lifestyle-cat-header {
padding: 14px 16px;
background: linear-gradient(135deg, var(--color-primary-50), #fff);
border-radius: var(--radius-md);
border: 1px solid var(--color-primary-100);
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px;
}
.budget-icon {
width: 38px; height: 38px;
border-radius: 12px;
background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50));
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.budget-icon i {
font-size: 1.4rem !important;
color: var(--color-primary-600) !important;
}
.lifestyle-cat-label {
font-size: 0.95rem;
font-weight: 700;
color: var(--color-primary-800);
}
/* ---- Result Congrats (Work3 / Final) ---- */
.result-congrats {
text-align: center;
padding: 36px 16px 16px;
}
.result-congrats-title {
font-size: clamp(1.4rem, 4vw, 1.9rem) !important;
font-weight: 900 !important;
letter-spacing: -0.025em !important;
color: var(--color-primary-800) !important;
margin-top: 12px !important;
}
.result-congrats-sub {
font-size: 0.95rem !important;
color: var(--color-neutral-600) !important;
margin-top: 6px !important;
}
/* ---- Chara Reveal Card (Final Result) ---- */
.chara-reveal {
text-align: center;
border-radius: var(--radius-xl) !important;
padding: 28px 20px !important;
}
.chara-card {
display: flex; flex-direction: column; align-items: center;
gap: 8px;
}
.chara-name {
font-size: 1.6rem !important;
font-weight: 900 !important;
color: var(--color-primary-800) !important;
letter-spacing: -0.02em;
margin-top: 8px;
}
.chara-axis {
font-size: 0.72rem !important;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-neutral-500) !important;
text-transform: uppercase;
}
.chara-catchphrase {
font-size: 1rem !important;
font-weight: 600 !important;
color: var(--color-primary-700) !important;
margin: 6px 0;
}
.chara-desc {
font-size: 0.88rem;
line-height: 1.8;
color: var(--color-neutral-700);
max-width: 520px;
margin: 4px auto 0;
}
/* ---- Result Sections (Final Result) ---- */
.result-section { margin-bottom: 18px; }
.result-section:last-child { margin-bottom: 0; }
.result-section h3 {
font-size: 0.9rem !important;
font-weight: 800 !important;
color: var(--color-primary-800) !important;
margin-bottom: 8px !important;
letter-spacing: -0.01em;
display: flex; align-items: center; gap: 8px;
}
.result-section h3::before {
content: ""; width: 3px; height: 14px; border-radius: 2px;
}
.result-section.strengths h3::before { background: var(--color-success-500); }
.result-section.pitfalls h3::before { background: var(--color-warning-500); }
.result-section.learnings h3::before { background: var(--color-primary-500); }
.result-section ul {
list-style: none; padding: 0; margin: 0;
}
.result-section li {
padding: 6px 0 6px 16px;
font-size: 0.86rem;
line-height: 1.6;
color: var(--color-neutral-700);
position: relative;
}
.result-section li::before {
content: "";
position: absolute;
left: 0; top: 14px;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--color-primary-300);
}
.result-section.strengths li::before { background: var(--color-success-500); }
.result-section.pitfalls li::before { background: var(--color-warning-500); }
.result-section.learnings li::before { background: var(--color-primary-500); }
/* ---- Reset Link ---- */
.reset-link {
font-size: 0.78rem;
color: var(--color-neutral-500) !important;
text-decoration: none !important;
padding: 6px 12px;
border-radius: 999px;
transition: all 0.2s var(--ease-out-expo);
}
.reset-link::before {
content: "↻ ";
font-weight: 700;
}
.reset-link:hover {
background: rgba(0,0,0,0.04);
color: var(--color-neutral-700) !important;
}
/* ---- Text Center (utility) ---- */
.text-center { text-align: center; margin-top: 16px; }
/* ---- App Title polish ---- */
#app-title {
font-size: 1.1rem !important;
font-weight: 800 !important;
color: var(--color-primary-800) !important;
letter-spacing: -0.01em;
}
/* ==========================================================
Design System v0.1 — Work2/Work3 固有クラス整形
========================================================== */
/* ---- Work2: Job 選択 ---- */
.job-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
margin-top: 10px;
}
.job-option {
padding: 14px 16px !important;
background: rgba(255,255,255,0.7) !important;
border: 1.5px solid var(--color-neutral-200) !important;
border-radius: var(--radius-md) !important;
font-family: inherit;
text-align: left;
cursor: pointer;
transition: all 0.2s var(--ease-out-expo);
display: flex !important; flex-direction: column; gap: 4px;
}
.job-option:hover {
border-color: var(--color-primary-300) !important;
background: #fff !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(41,82,163,0.08);
}
.job-option.selected {
background: linear-gradient(135deg, var(--color-primary-50), #fff) !important;
border-color: var(--color-primary-500) !important;
box-shadow:
0 10px 24px rgba(41,82,163,0.18),
inset 0 0 0 1px var(--color-primary-500) !important;
}
.job-label {
font-size: 0.92rem !important;
font-weight: 700 !important;
color: var(--color-primary-800);
}
.job-hourly {
font-size: 0.78rem !important;
color: var(--color-neutral-600) !important;
font-weight: 600;
}
/* ---- Work2: Income Section / Summary ---- */
.income-section { margin-bottom: 20px; }
.income-section:last-child { margin-bottom: 0; }
.income-label {
font-size: 0.78rem !important;
font-weight: 700 !important;
color: var(--color-primary-700) !important;
letter-spacing: 0.05em;
margin-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.income-label::before {
content: "";
width: 3px; height: 12px;
border-radius: 2px;
background: linear-gradient(180deg, var(--color-primary-400), var(--color-primary-700));
}
.income-summary {
background: linear-gradient(135deg, var(--color-primary-50), #fff);
border: 1px solid var(--color-primary-100);
border-radius: var(--radius-lg);
padding: 16px 18px;
margin-top: 14px;
}
.income-summary-row {
display: flex; justify-content: space-between;
padding: 6px 0;
font-size: 0.86rem;
color: var(--color-neutral-700);
}
.income-summary-total {
display: flex; justify-content: space-between;
padding: 10px 0 4px;
margin-top: 6px;
border-top: 1px dashed var(--color-primary-200);
font-size: 1rem;
font-weight: 800;
color: var(--color-primary-800);
}
/* ---- Work3: Stock Card ---- */
.stock-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: 18px 20px;
margin-bottom: 12px;
box-shadow: var(--glass-shadow);
transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo);
}
.stock-card:hover {
transform: translateY(-2px);
box-shadow: var(--glass-shadow-elev);
}
.stock-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px;
gap: 12px;
flex-wrap: wrap;
}
.stock-name {
font-size: 1rem !important;
font-weight: 800 !important;
color: var(--color-primary-800) !important;
margin-right: 8px;
}
.stock-sector {
font-size: 0.72rem !important;
color: var(--color-neutral-500) !important;
font-weight: 600;
padding: 2px 8px;
background: var(--color-neutral-100);
border-radius: 999px;
}
.stock-price {
font-size: 0.98rem !important;
font-weight: 800 !important;
letter-spacing: -0.01em;
}
.stock-info {
display: flex; gap: 16px;
padding: 8px 0;
border-top: 1px dashed rgba(203,213,225,0.5);
border-bottom: 1px dashed rgba(203,213,225,0.5);
margin-bottom: 12px;
font-size: 0.82rem;
color: var(--color-neutral-600);
}
.stock-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.stock-actions .btn {
padding: 12px 8px !important;
border-radius: var(--radius-md) !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
border: 1.5px solid transparent;
transition: all 0.2s var(--ease-out-expo);
}
.btn-buy {
background: var(--color-success-100) !important;
color: var(--color-success-600) !important;
border-color: var(--color-success-100) !important;
}
.btn-buy.selected {
background: linear-gradient(135deg, var(--color-success-500), var(--color-success-600)) !important;
color: #fff !important;
border-color: var(--color-success-600) !important;
box-shadow: 0 8px 20px rgba(22,163,74,0.30) !important;
}
.btn-hold {
background: var(--color-neutral-100) !important;
color: var(--color-neutral-700) !important;
border-color: var(--color-neutral-100) !important;
}
.btn-hold.selected {
background: linear-gradient(135deg, var(--color-neutral-500), var(--color-neutral-700)) !important;
color: #fff !important;
border-color: var(--color-neutral-700) !important;
box-shadow: 0 8px 20px rgba(71,85,105,0.25) !important;
}
.btn-sell {
background: var(--color-danger-100) !important;
color: var(--color-danger-500) !important;
border-color: var(--color-danger-100) !important;
}
.btn-sell.selected {
background: linear-gradient(135deg, var(--color-danger-500), #dc2626) !important;
color: #fff !important;
border-color: #dc2626 !important;
box-shadow: 0 8px 20px rgba(239,68,68,0.30) !important;
}
.stock-actions .btn:disabled {
opacity: 0.4 !important;
cursor: not-allowed !important;
}
/* ---- Work3: Turn Header ---- */
.turn-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 8px;
}
.turn-badge {
display: inline-flex; align-items: center;
padding: 4px 12px;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-800));
color: #fff;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(15,33,64,0.25);
}
/* ---- Work3: Stock Chart ---- */
.stock-chart-wrap {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: 20px;
box-shadow: var(--glass-shadow);
margin-bottom: 16px;
}
.stock-chart-title {
font-size: 0.85rem !important;
font-weight: 800 !important;
color: var(--color-primary-800) !important;
margin-bottom: 12px !important;
letter-spacing: -0.01em;
}
.stock-chart-legend {
display: flex; gap: 14px; flex-wrap: wrap;
margin-top: 10px;
font-size: 0.78rem;
}
.stock-chart-legend-item {
display: inline-flex; align-items: center; gap: 6px;
color: var(--color-neutral-700);
}
.stock-chart-legend-dot {
width: 10px; height: 10px;
border-radius: 50%;
}
/* ---- Floating Chara (Work2/3で出現する小キャラ) ---- */
.floating-chara-emoji {
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-100), #fff);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 16px rgba(41,82,163,0.20);
border: 2px solid #fff;
}
.floating-chara-emoji i {
font-size: 1.8rem !important;
color: var(--color-primary-600) !important;
}
/* ---- Chara Reaction Icon (Work3 トレード時) ---- */
.chara-reaction-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-100), #fff);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(41,82,163,0.18);
}
.chara-reaction-icon i {
font-size: 1.7rem !important;
color: var(--color-primary-600) !important;
}
/* ==========================================================
Design System v0.1 — Badge Popup 刷新（金色→DSテーマ）
========================================================== */
/* 基本 popup を完全に上書き */
.ds-badge-popup {
border: 1px solid var(--glass-border) !important;
background: var(--glass-bg-elevated) !important;
box-shadow:
0 32px 80px rgba(15, 33, 64, 0.30),
0 0 0 1px rgba(255,255,255,0.7) inset,
0 0 60px rgba(59,111,217,0.20) !important;
padding: 36px 36px 28px !important;
max-width: 380px;
}
.ds-badge-popup::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.ds-badge-popup.theme-primary::before {
background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-700));
}
.ds-badge-popup.theme-success::before {
background: linear-gradient(90deg, var(--color-success-500), var(--color-success-600));
}
/* Issue #83: 最終バッジは「最初からゴールド」で他バッジと完全に色を差別化 */
.ds-badge-popup.theme-celebration::before {
background: linear-gradient(90deg, #fbbf24, #f59e0b, #fde047, #fbbf24);
height: 5px;
}
/* badge icon ラッパー（glow 内包） */
.badge-icon-wrap {
position: relative;
width: 96px; height: 96px;
margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
}
.badge-icon-glow {
position: absolute; inset: -10px;
border-radius: 50%;
filter: blur(20px);
z-index: 0;
animation: badgeGlowBreath 3s ease-in-out infinite;
}
.ds-badge-popup.theme-primary .badge-icon-glow {
background: radial-gradient(circle, rgba(59,111,217,0.55) 0%, transparent 65%);
}
.ds-badge-popup.theme-success .badge-icon-glow {
background: radial-gradient(circle, rgba(34,197,94,0.50) 0%, transparent 65%);
}
.ds-badge-popup.theme-celebration .badge-icon-glow {
background:
radial-gradient(circle at 30% 30%, rgba(251, 191, 36, 0.65) 0%, transparent 60%),
radial-gradient(circle at 70% 70%, rgba(252, 211, 77, 0.50) 0%, transparent 60%);
}
@keyframes badgeGlowBreath {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
.ds-badge-popup .badge-icon {
position: relative;
z-index: 1;
width: 88px; height: 88px;
border-radius: 24px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #fff, var(--color-primary-50));
box-shadow:
0 12px 28px rgba(15,33,64,0.18),
inset 0 0 0 3px #fff;
margin: 0;
font-size: 0;
filter: none;
animation: badgeIconPop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
.ds-badge-popup .badge-icon i {
font-size: 48px !important;
}
.ds-badge-popup.theme-primary .badge-icon i { color: var(--color-primary-500) !important; }
.ds-badge-popup.theme-success .badge-icon i { color: var(--color-success-600) !important; }
.ds-badge-popup.theme-celebration .badge-icon i {
color: #d97706 !important;
filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.55));
}
.ds-badge-popup.theme-celebration .badge-icon {
background: linear-gradient(135deg, #fffbeb, #fde68a) !important;
box-shadow:
0 12px 28px rgba(180, 83, 9, 0.22),
inset 0 0 0 3px #fff,
0 0 0 2px rgba(251, 191, 36, 0.4) !important;
}
@keyframes badgeIconPop {
0% { opacity: 0; transform: scale(0.4) rotate(-15deg); }
100% { opacity: 1; transform: scale(1) rotate(0); }
}
.ds-badge-popup .badge-label {
font-size: 0.72rem !important;
font-weight: 800 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
margin-bottom: 6px !important;
}
.ds-badge-popup.theme-primary .badge-label { color: var(--color-primary-600) !important; }
.ds-badge-popup.theme-success .badge-label { color: var(--color-success-600) !important; }
.ds-badge-popup.theme-celebration .badge-label { color: #b45309 !important; }
.ds-badge-popup .badge-name {
font-size: 1.4rem !important;
font-weight: 900 !important;
color: var(--color-primary-800) !important;
letter-spacing: -0.02em !important;
margin-bottom: 8px !important;
}
.ds-badge-popup .badge-desc {
font-size: 0.88rem !important;
color: var(--color-neutral-600) !important;
line-height: 1.7;
margin-bottom: 8px !important;
}
.ds-badge-popup .badge-dismiss {
margin-top: 20px !important;
padding: 13px 32px !important;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-800)) !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 0.92rem !important;
display: inline-flex !important;
align-items: center;
gap: 8px;
box-shadow:
0 12px 24px rgba(15,33,64,0.30),
inset 0 1px 0 rgba(255,255,255,0.25) !important;
transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo);
border: none;
cursor: pointer;
}
.ds-badge-popup .badge-dismiss:hover {
transform: translateY(-2px) !important;
}
.ds-badge-popup .badge-dismiss i {
font-size: 1rem !important;
color: var(--color-accent-400) !important; /* コーラル許可箇所 */
}
/* ==========================================================
Design System v0.1 — Card Title 強化（アイコンを左に配置）
========================================================== */
.card-title {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.card-title > i {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 10px;
background: linear-gradient(135deg, var(--color-primary-50), #fff);
border: 1px solid var(--color-primary-100);
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px !important;
color: var(--color-primary-600) !important;
flex-shrink: 0;
}
/* card-title::before のバー装飾を削除（左に big icon が立つので競合する） */
.card-title::before { display: none !important; }
/* knowledge / nisa タイトル */
.knowledge-title, .nisa-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
color: var(--color-primary-800) !important;
letter-spacing: -0.01em;
}
.knowledge-title > i, .nisa-title > i {
font-size: 1.2rem !important;
color: var(--color-warning-600) !important;
flex-shrink: 0;
}
/* ==========================================================
Lifestyle Category 階層強化（タイトルが選択肢と同化問題）
========================================================== */
.lifestyle-category {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: 16px 18px;
margin-bottom: 14px;
box-shadow: var(--glass-shadow);
}
.lifestyle-cat-header {
background: linear-gradient(135deg, var(--color-primary-50), #fff) !important;
border: 1px solid var(--color-primary-100) !important;
border-radius: var(--radius-md) !important;
padding: 12px 14px !important;
display: flex !important;
align-items: center;
gap: 12px;
margin-bottom: 14px !important;
margin-left: -8px !important;
margin-right: -8px !important;
}
.lifestyle-cat-label {
font-size: 1.05rem !important;
font-weight: 800 !important;
color: var(--color-primary-800) !important;
letter-spacing: -0.01em;
}
.lifestyle-options {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
.lifestyle-option {
padding: 14px 10px !important;
background: rgba(255,255,255,0.7) !important;
border: 1.5px solid var(--color-neutral-200) !important;
border-radius: var(--radius-md) !important;
font-family: inherit;
cursor: pointer;
text-align: center;
transition: all 0.2s var(--ease-out-expo);
display: flex !important;
flex-direction: column;
gap: 4px;
align-items: center;
}
.lifestyle-opt-cost {
font-size: 0.9rem !important;
font-weight: 800 !important;
color: var(--color-primary-800) !important;
letter-spacing: -0.01em;
}
.lifestyle-opt-label {
font-size: 0.74rem !important;
color: var(--color-neutral-600) !important;
font-weight: 600;
}
.lifestyle-option:hover {
border-color: var(--color-primary-300) !important;
background: #fff !important;
transform: translateY(-1px);
}
.lifestyle-option.selected {
background: linear-gradient(135deg, var(--color-primary-50), #fff) !important;
border-color: var(--color-primary-500) !important;
box-shadow:
0 8px 18px rgba(41,82,163,0.18),
inset 0 0 0 1px var(--color-primary-500) !important;
}
.lifestyle-option.selected .lifestyle-opt-cost { color: var(--color-primary-600) !important; }
.lifestyle-option.selected .lifestyle-opt-label { color: var(--color-primary-700) !important; }
/* ==========================================================
Step2 Result Hero（のっぺりしている問題）
========================================================== */
.balance-summary {
background: linear-gradient(135deg, var(--color-primary-50), #fff) !important;
border: 1px solid var(--color-primary-100) !important;
border-radius: var(--radius-xl) !important;
padding: 24px !important;
position: relative;
overflow: hidden;
}
.balance-summary::before {
content: "";
position: absolute;
top: 0; right: -40px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(59,111,217,0.10), transparent 60%);
border-radius: 50%;
pointer-events: none;
}
/* Issue #80: 収入はプラスのお金が入ってくる意味なので、結果欄の貯蓄プラス時と同じ success-green に統一 */
.balance-row.income-row span:last-child {
font-weight: 800;
color: var(--color-success-600);
}
.balance-row.expense-row span:last-child {
font-weight: 800;
color: var(--color-warning-600);
}
.balance-row.savings-row {
border-bottom: none !important;
padding-top: 14px !important;
margin-top: 6px;
border-top: 1.5px solid var(--color-primary-100) !important;
}
.balance-row.savings-row span {
font-size: 1.05rem !important;
font-weight: 800 !important;
}
.balance-row.savings-row.budget-ok span:last-child {
font-size: 1.6rem !important;
font-weight: 900 !important;
color: var(--color-success-600) !important;
letter-spacing: -0.02em;
}
.balance-row.savings-row.budget-over span:last-child {
font-size: 1.6rem !important;
font-weight: 900 !important;
color: var(--color-danger-500) !important;
}
.budget-bar {
height: 10px !important;
background: rgba(15, 33, 64, 0.08) !important;
border-radius: 999px !important;
overflow: hidden;
margin: 14px 0 !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.budget-bar-fill {
height: 100%;
border-radius: 999px !important;
transition: width 0.8s var(--ease-out-expo);
position: relative;
overflow: hidden;
}
.budget-bar-fill::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.budget-bar-fill.ok {
background: linear-gradient(90deg, var(--color-success-500), var(--color-success-600)) !important;
}
.budget-bar-fill.over {
background: linear-gradient(90deg, var(--color-warning-500), var(--color-danger-500)) !important;
}
.budget-ok {
margin-top: 10px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.05));
border: 1px solid rgba(34,197,94,0.2);
border-radius: var(--radius-md);
font-size: 0.92rem;
color: var(--color-success-600);
font-weight: 700;
display: flex; align-items: center; gap: 8px;
}
.budget-ok::before {
content: "";
width: 24px; height: 24px;
border-radius: 50%;
background: var(--color-success-500);
background-image: url("data:image/svg+xml;utf8,");
background-size: 80% 80%;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
}
.budget-warning {
margin-top: 10px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(245,158,11,0.08));
border: 1px solid rgba(239,68,68,0.25);
border-radius: var(--radius-md);
font-size: 0.9rem;
color: var(--color-danger-500);
font-weight: 600;
line-height: 1.6;
position: relative;
padding-left: 44px;
}
.budget-warning::before {
content: "";
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
background: var(--color-danger-500);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 90% 90%;
background-position: center;
background-repeat: no-repeat;
}
/* ==========================================================
Living Button（実家/ひとり暮らし） Phosphor 後の整形
========================================================== */
.living-select {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.living-btn {
background: rgba(255,255,255,0.7) !important;
border: 1.5px solid var(--color-neutral-200) !important;
border-radius: var(--radius-xl) !important;
padding: 22px 16px !important;
font-family: inherit;
cursor: pointer;
text-align: center;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 6px;
transition: all 0.25s var(--ease-out-expo);
}
.living-btn:hover {
border-color: var(--color-primary-300) !important;
background: #fff !important;
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(41,82,163,0.10);
}
.living-btn.selected {
background: linear-gradient(135deg, var(--color-primary-50), #fff) !important;
border-color: var(--color-primary-500) !important;
box-shadow:
0 12px 28px rgba(41,82,163,0.20),
inset 0 0 0 1px var(--color-primary-500) !important;
}
.living-btn-icon {
width: 52px; height: 52px;
border-radius: 16px;
background: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50));
display: flex; align-items: center; justify-content: center;
margin-bottom: 6px;
}
.living-btn-icon i {
font-size: 28px !important;
color: var(--color-primary-600) !important;
}
.living-btn.selected .living-btn-icon {
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
}
.living-btn.selected .living-btn-icon i {
color: #fff !important;
}
.living-btn-label {
font-size: 1rem !important;
font-weight: 800 !important;
color: var(--color-primary-800) !important;
}
.living-btn-desc {
font-size: 0.78rem !important;
color: var(--color-neutral-600) !important;
font-weight: 500;
line-height: 1.5;
}
/* ==========================================================
Knowledge / Knowledge Card 整形
========================================================== */
.knowledge-card {
background: linear-gradient(135deg, var(--color-warning-100), #fff);
border: 1px solid rgba(245,158,11,0.20);
border-radius: var(--radius-xl);
padding: 20px 22px;
margin: 14px 0;
box-shadow: var(--glass-shadow);
}
/* NISA card */
.nisa-card {
background: linear-gradient(135deg, var(--color-primary-50), #fff);
border: 1px solid var(--color-primary-100);
border-radius: var(--radius-xl);
padding: 20px 22px;
margin: 14px 0;
box-shadow: var(--glass-shadow);
}
/* ==========================================================
Design System v0.1 — Specialist Review 反映 (Round 1)
A優先・B優先・ドクトリン違反の修正パッチ
========================================================== */
/* [A-1] quiz-choice の旧 ::after 装飾を無効化（DS::beforeとの重複防止） */
.quiz-choice::after,
.quiz-choice.selected::after {
display: none !important;
}
/* [A-2] 数字の桁ズレ防止（tabular-nums） */
.lifestyle-opt-cost,
.balance-row,
.income-summary-row,
.income-summary-total,
.stock-price,
.portfolio-value,
.knowledge-highlight {
font-feature-settings: "tnum" 1;
font-variant-numeric: tabular-nums;
}
/* [A-3] 支出カード(9費目)が縦長すぎる問題: パディング緩和 */
.card .lifestyle-category {
padding: 14px 16px;
margin-bottom: 12px;
}
.card.expense-card,
[class*="expense"] > .card {
padding: 20px var(--space-md) !important;
}
/* セレクター層で吸収: 9カテゴリを含むカードはより詰める */
.lifestyle-category + .lifestyle-category { margin-top: 0; }
/* [A-4] balance-detail（旧）クラス */
.balance-detail {
display: block;
font-size: 0.74rem;
color: var(--color-neutral-500);
font-weight: 500;
margin-top: 2px;
line-height: 1.4;
}
/* [A-5] 旧 .badge-dismiss（DS popup外）も完全にDS化（dead code救済） */
.badge-dismiss {
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-800)) !important;
color: #fff !important;
border-radius: 999px !important;
border: none !important;
padding: 13px 32px !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center;
gap: 8px;
box-shadow:
0 12px 24px rgba(15,33,64,0.30),
inset 0 1px 0 rgba(255,255,255,0.25) !important;
cursor: pointer;
font-family: inherit;
}
/* [B-2] ds-result-hero に微かな背景カードを敷く（浮き対策） */
.ds-result-hero {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
box-shadow: var(--glass-shadow);
margin: 0 16px 20px;
padding: 40px 24px 32px;
}
@media (max-width: 640px) { .ds-result-hero { margin: 0 0 20px; } }
/* [B-3] insight-grid のレスポンシブ強化（中間幅対応） */
@media (max-width: 720px) and (min-width: 641px) {
.ds-insight-grid { grid-template-columns: 1fr 1fr; }
}
/* [B-5] value-insight に type-color の左ボーダー復活（キャラ個性回復） */
.value-insight {
border-left: 4px solid var(--type-color, var(--color-primary-500)) !important;
border-top: 1px solid var(--glass-border) !important;
border-right: 1px solid var(--glass-border) !important;
border-bottom: 1px solid var(--glass-border) !important;
}
/* Issue #84: Final Result のキャラ画像を Step1 Result (ds-char-vis 240px) と揃える
旧 [B-11] では 200px だったが Step1 Result は 240px なので調整 */
.result-congrats + .card .chara-emoji img,
.card .chara-emoji img {
width: 240px !important;
height: 240px !important;
border-radius: var(--radius-xl) !important;
}
@media (max-width: 480px) {
.result-congrats + .card .chara-emoji img,
.card .chara-emoji img {
width: 180px !important;
height: 180px !important;
}
}
/* [ドクトリン違反 #1] learnings のパープル → primary 系に統一 */
.result-section.learnings h3::before {
background: var(--color-primary-500) !important;
}
.result-section.learnings li::before {
background: var(--color-primary-500) !important;
}
/* [C-2] 売買ボタンの角丸を radius-md に統一（小さすぎ問題） */
.stock-actions .btn {
border-radius: var(--radius-md) !important;
}
/* [C-3] floating chara bubble の三角部分を半透明に */
.floating-chara-bubble::after {
border-top-color: var(--glass-bg) !important;
filter: drop-shadow(0 2px 4px rgba(15,33,64,0.10));
}
/* ==========================================================
Design System v0.1 — Round 3
① select-btn 細字／② budget-ok class 衝突 (balance-row vs message)
========================================================== */
/* ① 週の勤務時間 / 仕送り のチップ系ボタン強化 */
.select-btn {
padding: 12px 10px !important;
border-radius: var(--radius-md) !important;
background: rgba(255,255,255,0.7) !important;
border: 1.5px solid var(--color-neutral-200) !important;
color: var(--color-primary-800) !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
font-feature-settings: "tnum" 1;
font-variant-numeric: tabular-nums;
transition: all 0.25s var(--ease-out-expo) !important;
cursor: pointer;
}
.select-btn:hover {
border-color: var(--color-primary-300) !important;
background: #fff !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(41,82,163,0.08);
}
.select-btn.selected {
background: linear-gradient(135deg, var(--color-primary-50), #fff) !important;
border-color: var(--color-primary-500) !important;
color: var(--color-primary-700) !important;
box-shadow:
0 8px 18px rgba(41,82,163,0.15),
inset 0 0 0 1px var(--color-primary-500) !important;
}
/* ② budget-ok / budget-warning class 衝突対策
- .balance-row.budget-ok は「貯蓄行のステート色」だけ
- .budget-ok (単独) は「メッセージボックス」用 */
/* balance-row 内では budget-ok の box スタイル/::before を完全に殺す */
.balance-row.budget-ok,
.balance-row.budget-over {
background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.04)) !important;
border-radius: var(--radius-md) !important;
margin: 8px -8px 0 !important;
padding: 14px 16px !important;
border: 1px solid rgba(34,197,94,0.25) !important;
border-top: 1px solid rgba(34,197,94,0.25) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 8px !important;
}
.balance-row.budget-over {
background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(239,68,68,0.04)) !important;
border-color: rgba(239,68,68,0.25) !important;
border-top-color: rgba(239,68,68,0.25) !important;
}
.balance-row.budget-ok::before,
.balance-row.budget-over::before,
.balance-row.budget-ok::after,
.balance-row.budget-over::after {
content: none !important;
display: none !important;
background: none !important;
}
.balance-row.budget-ok span:first-child {
font-weight: 800 !important;
color: var(--color-success-600) !important;
}
.balance-row.budget-over span:first-child {
font-weight: 800 !important;
color: var(--color-danger-500) !important;
}
.balance-row.budget-ok span:last-child {
font-size: 1.6rem !important;
font-weight: 900 !important;
color: var(--color-success-600) !important;
letter-spacing: -0.02em;
font-feature-settings: "tnum" 1;
font-variant-numeric: tabular-nums;
}
.balance-row.budget-over span:last-child {
font-size: 1.6rem !important;
font-weight: 900 !important;
color: var(--color-danger-500) !important;
font-feature-settings: "tnum" 1;
font-variant-numeric: tabular-nums;
}
/* メッセージ用 .budget-ok / .budget-warning は balance-row 以外でのみ適用 */
div.budget-ok:not(.balance-row) {
margin-top: 10px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.05));
border: 1px solid rgba(34,197,94,0.2);
border-radius: var(--radius-md);
font-size: 0.92rem;
color: var(--color-success-600);
font-weight: 700;
display: flex; align-items: center; gap: 8px;
}
div.budget-ok:not(.balance-row)::before {
content: "";
width: 22px; height: 22px;
border-radius: 50%;
background: var(--color-success-500);
background-image: url("data:image/svg+xml;utf8,");
background-size: 80% 80%;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
}
/* balance-row.budget-ok に最初に効いていた .budget-ok ::before を上書きで消す */
.balance-row.budget-ok::before { content: none !important; }
/* 同様にwarning(赤字)メッセージも row と分離 */
div.budget-warning:not(.balance-row) {
margin-top: 10px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(245,158,11,0.08));
border: 1px solid rgba(239,68,68,0.25);
border-radius: var(--radius-md);
font-size: 0.9rem;
color: var(--color-danger-500);
font-weight: 600;
line-height: 1.6;
position: relative;
padding-left: 44px;
}
div.budget-warning:not(.balance-row)::before {
content: "";
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
background: var(--color-danger-500);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 90% 90%;
background-position: center;
background-repeat: no-repeat;
}
/* ==========================================================
Design System v0.1 — Specialist Review 反映 (Round 2)
① Quiz choice ラジオ位置崩れ／② Job 3列／③ Badge popup 線崩れ
========================================================== */
/* ① quiz-choice::before が旧定義(position:absolute,inset:0)を継承して
小四角になっていた問題を完全リセット。flex子要素として再定義 */
.quiz-choice {
display: flex !important;
align-items: center !important;
gap: 12px !important;
overflow: visible !important; /* radio円が見切れる対策 */
}
.quiz-choice::before {
position: static !important;
inset: auto !important;
background: transparent !important;
opacity: 1 !important;
content: "" !important;
width: 20px !important;
height: 20px !important;
border: 2px solid var(--color-neutral-300) !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
transition: all 0.2s var(--ease-out-expo) !important;
display: block !important;
margin: 0 !important;
}
.quiz-choice:hover::before {
border-color: var(--color-primary-400) !important;
opacity: 1 !important;
}
.quiz-choice.selected::before {
background: var(--color-primary-600) !important;
border-color: var(--color-primary-600) !important;
box-shadow: inset 0 0 0 4px #fff !important;
opacity: 1 !important;
}
/* 旧 .quiz-choice.selected::after の青ドットを完全に隠す */
.quiz-choice.selected::after,
.quiz-choice::after {
display: none !important;
content: none !important;
}
/* 旧 transform: translateX(4px) hover 動作を抑制（ラジオ円があるので不要） */
.quiz-choice:hover {
transform: translateY(-1px) !important;
}
.quiz-choice:active {
transform: scale(0.99) !important;
}
/* ② Issue #29 (Y案): アルバイトはメイン3列 + 「掛け持ちする」トグル + サブ3列 の段階導入 */
.job-options {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
@media (max-width: 640px) {
.job-options { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Issue #29 (Y案): 既存 .job-option カードに「メイン」「サブ」「メイン固定（グレーアウト）」状態を追加 */
.job-option.main-locked {
background: rgba(226,232,240,0.45) !important;
border-color: var(--color-neutral-300) !important;
color: var(--color-neutral-500);
cursor: not-allowed;
position: relative;
}
.job-option.main-locked .job-label,
.job-option.main-locked .job-hourly { color: var(--color-neutral-500) !important; }
.job-option .job-role-badge {
display: inline-block;
padding: 1px 7px;
margin-left: 6px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.04em;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
color: #fff;
border-radius: 999px;
vertical-align: middle;
}
/* 掛け持ちトグル */
.kakemochi-toggle-wrap {
margin-top: 14px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(59,111,217,0.06), rgba(107,154,239,0.04));
border: 1px dashed rgba(59,111,217,0.28);
border-radius: var(--radius-md, 14px);
}
.kakemochi-toggle {
display: flex; align-items: center; gap: 10px;
cursor: pointer;
user-select: none;
font-weight: 700;
font-size: 0.92rem;
color: var(--color-primary-800);
}
.kakemochi-toggle input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: var(--color-primary-500);
cursor: pointer;
}
.kakemochi-toggle .kakemochi-toggle-icon { color: var(--color-primary-500); font-size: 1.05rem; }
.kakemochi-toggle-hint {
display: block;
margin-top: 4px;
margin-left: 28px;
font-size: 0.78rem;
color: var(--color-neutral-600);
font-weight: 500;
}
/* Issue #113: 勤務時間 上限超過の選択肢 / 警告 */
.select-btn.hours-overlimit {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
text-decoration: line-through;
}
.hours-warning {
margin-top: 12px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(245,158,11,0.08));
border: 1px solid rgba(239,68,68,0.28);
border-radius: var(--radius-md, 14px);
font-size: 0.85rem;
color: var(--color-danger-500);
font-weight: 700;
line-height: 1.6;
}
/* Issue #111: 「アルバイトをしない」トグル */
.nojob-toggle-wrap {
margin-bottom: 14px;
padding: 12px 14px;
background: var(--color-neutral-100, #f1f3f7);
border: 1px dashed var(--color-neutral-300, #c9cfdb);
border-radius: var(--radius-md, 14px);
}
.nojob-toggle {
display: flex; align-items: center; gap: 10px;
cursor: pointer;
user-select: none;
font-weight: 700;
font-size: 0.92rem;
color: var(--color-neutral-800);
}
.nojob-toggle input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: var(--color-neutral-600);
cursor: pointer;
}
.nojob-toggle .nojob-toggle-icon { color: var(--color-neutral-500); font-size: 1.05rem; }
.nojob-toggle-hint {
display: block;
margin-top: 4px;
margin-left: 28px;
font-size: 0.78rem;
color: var(--color-neutral-600);
font-weight: 500;
}
/* Issue #111: バイト関連UIの非活性化（グレーアウト） */
.job-option.job-inactive,
.select-btn.job-inactive {
opacity: 0.4;
filter: grayscale(0.6);
cursor: not-allowed;
pointer-events: none;
}
/* サブバイトセクション展開 */
.subjob-section {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed rgba(59,111,217,0.18);
animation: subjobReveal 200ms var(--ease-out-expo, ease-out);
}
@keyframes subjobReveal {
0% { opacity: 0; transform: translateY(-6px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ③ Badge popup の上端カラーバーが線として崩れる問題
原因: ::before が独自の border-radius を持っていたため、4px高に対して
28px半径が異常な形を作っていた。
対策: popup自身に overflow:hidden を設定し、::before の radius を 0 にして
親のクリップで自然な角に丸める
※ position:fixed は維持（画面中央配置） */
.ds-badge-popup {
overflow: hidden !important;
/* position: fixed は基底 .badge-popup の値を維持 — relative にしない */
}
.ds-badge-popup::before {
border-radius: 0 !important;
height: 5px !important; /* 4px は薄すぎ → 5pxに微増 */
}
/* おまけ: card-title の左アイコンチップが flex で崩れる場合の保険 */
.card-title {
flex-wrap: nowrap !important;
}
.card-title > i {
line-height: 1 !important;
}
/* ==========================================================
Design System v0.1 — Size-Up Round
現行版より小さめになっていた箇所を底上げ
フォント+10%程度 / アイコン+15-20% / 余白も微増
========================================================== */
/* ---- card-title ---- */
.card-title {
font-size: 1.18rem !important; /* 1.05 → 1.18 */
letter-spacing: -0.01em;
}
.card-title > i {
width: 38px !important; /* 32 → 38 */
height: 38px !important;
font-size: 22px !important; /* 18 → 22 */
border-radius: 12px !important;
}
/* ---- card-desc ---- */
.card-desc {
font-size: 1rem !important; /* 0.92 → 1.0 */
color: var(--color-neutral-600);
line-height: 1.8 !important;
}
/* ---- intro-hero ---- (Yuji FB: 全体的に小さく感じる → 1段階拡大) */
.intro-hero h2 {
font-size: clamp(2.15rem, 5.5vw, 2.8rem) !important; /* 2.05-2.6 → 2.15-2.8 */
}
.intro-hero p {
font-size: 1.15rem !important; /* 1.06 → 1.15 */
}
.intro-hero-icon {
width: 64px !important; height: 64px !important; /* 60 → 64 */
}
.intro-hero-icon i { font-size: 32px !important; } /* 30 → 32 */
/* ---- intro-step-item ---- (Yuji FB: 全体的に小さく感じる → 1段階拡大) */
.intro-step-item {
font-size: 1.08rem !important; /* 1.0 → 1.08 */
padding: 18px 22px !important; /* 16/18 → 18/22 で内側余白も拡大 */
}
.intro-step-num {
width: 46px !important; height: 46px !important; /* 42 → 46 */
font-size: 1.15rem !important; /* 1.05 → 1.15 */
}
.intro-step-item strong {
font-size: 1.18rem !important; /* 1.05 → 1.18 */
display: block;
margin-bottom: 4px !important; /* Yuji FB:
由来の不自然な隙間を解消 */
}
.intro-step-item small {
font-size: 0.96rem !important; /* 0.85 → 0.96 */
display: block;
line-height: 1.5;
}
/* ---- quiz ---- */
.quiz-question {
font-size: 1.28rem !important; /* 1.15 → 1.28 */
line-height: 1.6 !important;
}
.quiz-progress {
font-size: 0.82rem !important; /* 0.74 → 0.82 */
}
.quiz-choice {
font-size: 1.05rem !important; /* 0.95 → 1.05 */
padding: 18px 22px !important; /* 16x20 → 18x22 */
}
.quiz-choice::before {
width: 22px !important; /* 20 → 22 */
height: 22px !important;
}
.quiz-choice.selected::before {
box-shadow: inset 0 0 0 5px #fff !important; /* 4 → 5 */
}
/* ---- buttons ---- */
.btn-primary {
font-size: 1.05rem !important; /* 0.98 → 1.05 */
padding: 17px 36px !important; /* 15x32 → 17x36 */
}
.btn-primary::after {
font-size: 1.2rem !important;
}
.ds-btn-primary {
font-size: 1.05rem !important;
padding: 17px 30px !important;
}
.ds-btn-primary i { font-size: 1.3rem !important; } /* 1.2 → 1.3 */
/* ---- progress bar (top header) ---- */
.prog-circle, .step-circle {
width: 36px !important; height: 36px !important; /* 30 → 36 */
font-size: 0.95rem !important; /* 0.78 → 0.95 */
}
.prog-label, .step-label {
font-size: 0.78rem !important; /* 0.65-0.72 → 0.78 */
}
.prog-step.active .prog-circle,
.progress-step.active .step-circle {
box-shadow:
0 0 0 5px rgba(41,82,163,0.18),
0 4px 14px rgba(30,58,110,0.30) !important;
}
/* ---- icons in budget / inflation / chara / badges ---- */
.budget-icon i { font-size: 1.7rem !important; } /* 1.4 → 1.7 */
.budget-icon {
width: 44px !important; height: 44px !important; /* 38 → 44 */
} /* 1.6 → 1.9 */
.value-insight-icon i { font-size: 1.9rem !important; }
/* chara-advice-icon — テキストと一体化させて「浮き」を抑える */
.chara-advice {
align-items: center !important; /* flex-start → center で縦中央に */
}
.chara-advice-icon {
filter: none !important; /* drop-shadow を外す */
display: inline-flex !important;
align-items: center;
align-self: center;
}
.chara-advice-icon i {
font-size: 1.6rem !important; /* 2.1 → 1.6 (テキスト行高に近づける) */
color: var(--type-color, var(--color-primary-500)) !important;
filter: none !important;
}
.chara-reaction-icon { width: 50px !important; height: 50px !important; } /* 44 → 50 */
.chara-reaction-icon i { font-size: 2rem !important; }
.floating-chara-emoji { width: 56px !important; height: 56px !important; } /* 48 → 56 */
.floating-chara-emoji i { font-size: 2.1rem !important; }
.badge-item-icon i { font-size: 2.3rem !important; } /* 2 → 2.3 */
/* ---- knowledge / nisa title ---- */
.knowledge-title, .nisa-title {
font-size: 1.05rem !important; /* 0.95 → 1.05 */
}
.knowledge-title > i, .nisa-title > i {
font-size: 1.35rem !important; /* 1.2 → 1.35 */
}
/* ---- lifestyle category ---- */
.lifestyle-cat-label {
font-size: 1.15rem !important; /* 1.05 → 1.15 */
}
.lifestyle-opt-cost {
font-size: 1rem !important; /* 0.9 → 1.0 */
}
.lifestyle-opt-label {
font-size: 0.82rem !important; /* 0.74 → 0.82 */
}
/* ---- living-btn ---- */
.living-btn-label {
font-size: 1.1rem !important; /* 1.0 → 1.1 */
}
.living-btn-desc {
font-size: 0.86rem !important; /* 0.78 → 0.86 */
}
.living-btn-icon { width: 58px !important; height: 58px !important; } /* 52 → 58 */
.living-btn-icon i { font-size: 32px !important; } /* 28 → 32 */
/* ---- ds-result-hero (Work1 結果) ---- */
.ds-char-name {
font-size: clamp(1.9rem, 5.5vw, 2.6rem) !important; /* 1.7-2.4 → 1.9-2.6 */
}
.ds-char-tagline { font-size: 1.15rem !important; } /* 1.05 → 1.15 */
.ds-char-type {
font-size: 0.85rem !important; /* 0.75 → 0.85 */
}
.ds-axis-tag {
font-size: 0.88rem !important; /* 0.78 → 0.88 */
padding: 6px 16px !important;
}
.ds-axis-tag i { font-size: 1.05rem !important; } /* 0.9 → 1.05 */
.ds-insight-title {
font-size: 0.95rem !important; /* 0.85 → 0.95 */
}
.ds-insight-item {
font-size: 0.92rem !important; /* 0.82 → 0.92 */
}
.ds-insight-icon { width: 44px !important; height: 44px !important; } /* 38 → 44 */
.ds-insight-icon i { font-size: 26px !important; } /* 22 → 26 */
.ds-message-body { font-size: 1.05rem !important; } /* 0.95 → 1.05 */
/* ---- stock card (Work3 投資体験) ---- */
.stock-name { font-size: 1.1rem !important; } /* 1.0 → 1.1 */
.stock-sector { font-size: 0.78rem !important; } /* 0.72 → 0.78 */
.stock-price { font-size: 1.08rem !important; } /* 0.98 → 1.08 */
.stock-info { font-size: 0.9rem !important; } /* 0.82 → 0.9 */
.stock-actions .btn {
font-size: 0.95rem !important; /* 0.85 → 0.95 */
padding: 14px 10px !important;
}
.turn-badge {
font-size: 0.82rem !important; /* 0.72 → 0.82 */
padding: 5px 14px !important;
} /* 0.85 → 0.92 */
/* ---- balance summary ---- */
.balance-row {
font-size: 1rem !important; /* 0.92 → 1.0 */
}
.balance-row.savings-row span {
font-size: 1.15rem !important; /* 1.05 → 1.15 */
}
.balance-row.budget-ok span:last-child,
.balance-row.budget-over span:last-child {
font-size: 1.75rem !important; /* 1.6 → 1.75 */
}
.balance-detail { font-size: 0.82rem !important; } /* 0.74 → 0.82 */
/* ---- income summary ---- */
.income-label { font-size: 0.88rem !important; } /* 0.78 → 0.88 */
.income-summary-row { font-size: 0.95rem !important; } /* 0.86 → 0.95 */
.income-summary-total { font-size: 1.1rem !important; } /* 1.0 → 1.1 */
/* ---- job options ---- */
.job-label { font-size: 1rem !important; } /* 0.92 → 1.0 */
.job-hourly { font-size: 0.85rem !important; } /* 0.78 → 0.85 */
/* ---- select-btn (週勤務時間 / 仕送り) ---- */
.select-btn {
font-size: 1rem !important; /* 0.92 → 1.0 */
padding: 14px 12px !important; /* 12x10 → 14x12 */
}
/* ---- result hero label / eyebrow ---- */
.ds-result-label, .intro-eyebrow {
font-size: 0.8rem !important; /* 0.72-0.7 → 0.8 */
padding: 8px 16px !important;
}
/* ---- app title ---- */
#app-title {
font-size: 1.25rem !important; /* 1.1 → 1.25 */
}
/* ==========================================================
Design System v0.1 — Phosphor フォントフォールバック (オフライン対策)
Phosphor が読み込めない場合 (html.no-phosphor) は emoji を表示
========================================================== */
.icon-with-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
/* 親の color/font-size を継承して Phosphor と統一感を維持 */
}
.icon-with-fallback > .emoji-fallback {
display: none;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji", "Twemoji Mozilla", sans-serif;
font-size: inherit;
line-height: 1;
}
/* Phosphor 読込失敗時: i.ph-* を隠して emoji を出す */
html.no-phosphor .icon-with-fallback > i {
display: none !important;
}
html.no-phosphor .icon-with-fallback > .emoji-fallback {
display: inline-flex;
align-items: center;
}
/* index.html に直接書かれた 用の emoji fallback
（phicon() でラップされていない箇所）— ::after に emoji を埋め込む */
html.no-phosphor .timer-toggle i.ph-duotone.ph-timer { font-size: 0 !important; }
html.no-phosphor .timer-toggle i.ph-duotone.ph-timer::after {
content: "⏱"; font-size: 1.2rem;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
html.no-phosphor .timer-btn i.ph-fill.ph-pause-circle { font-size: 0 !important; }
html.no-phosphor .timer-btn i.ph-fill.ph-pause-circle::after {
content: "⏸"; font-size: 0.95rem;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
html.no-phosphor .timer-btn i.ph.ph-arrow-counter-clockwise { font-size: 0 !important; }
html.no-phosphor .timer-btn i.ph.ph-arrow-counter-clockwise::after {
content: "↻"; font-size: 0.95rem;
}
html.no-phosphor .step-circle i.ph-fill.ph-star { font-size: 0 !important; }
html.no-phosphor .step-circle i.ph-fill.ph-star::after {
content: "★"; font-size: 1rem;
}
/* ==========================================================
3カラム総括ヘッダー & カード見出し下サブテキスト — Issue #3 軽量版
========================================================== */
.ds-tag-summary {
display: flex; flex-direction: column; align-items: center;
gap: 6px;
padding: 14px 20px 12px;
margin-bottom: 14px;
background:
linear-gradient(135deg, rgba(59,111,217,0.10) 0%, rgba(107,154,239,0.06) 100%),
var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 18px;
text-align: center;
box-shadow: var(--glass-shadow);
}
.ds-tag-summary-head {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.92rem;
font-weight: 800;
color: var(--color-primary-800);
letter-spacing: 0.01em;
}
.ds-tag-summary-head i { color: var(--color-primary-500); font-size: 1.05rem; }
.ds-tag-summary-axis { color: var(--color-primary-700); }
.ds-tag-summary-body {
font-size: 0.82rem;
font-weight: 500;
color: var(--color-neutral-600);
line-height: 1.55;
margin: 0;
}
.ds-insight-card-sub {
font-size: 0.7rem;
font-weight: 700;
color: var(--color-primary-600);
letter-spacing: 0.02em;
margin-top: 2px;
line-height: 1.35;
}
.ds-insight-summary {
display: block;
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed rgba(59,111,217,0.18);
font-size: 0.92rem;
font-weight: 600;
color: var(--color-primary-700);
}
@media (max-width: 480px) {
.ds-tag-summary { padding: 12px 14px 10px; }
.ds-tag-summary-head { font-size: 0.84rem; gap: 5px; }
.ds-tag-summary-body { font-size: 0.74rem; }
.ds-insight-card-sub { font-size: 0.66rem; }
}
/* ==========================================================
あなたの選択を振り返る accordion — Issue #3 拡張
========================================================== */
.ds-review-accordion {
margin: 0 0 24px;
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
border-radius: 18px;
box-shadow: var(--glass-shadow);
overflow: hidden;
}
.ds-review-head {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
user-select: none;
transition: background 0.2s var(--ease-out);
}
.ds-review-head::-webkit-details-marker { display: none; }
.ds-review-head:hover { background: var(--glass-bg-elev); }
.ds-review-icon {
color: var(--color-primary-500);
font-size: 1.1rem;
}
.ds-review-title {
flex: 1;
font-size: 0.92rem;
font-weight: 800;
color: var(--color-primary-800);
letter-spacing: 0.01em;
}
.ds-review-meta {
font-size: 0.72rem;
font-weight: 700;
color: var(--color-primary-600);
background: linear-gradient(135deg, rgba(59,111,217,0.12), rgba(107,154,239,0.08));
padding: 3px 10px;
border-radius: 999px;
}
.ds-review-caret {
color: var(--color-primary-500);
font-size: 1rem;
transition: transform 0.25s var(--ease-out);
}
.ds-review-accordion[open] .ds-review-caret {
transform: rotate(180deg);
}
.ds-review-body {
padding: 4px 18px 18px;
border-top: 1px dashed rgba(59,111,217,0.18);
}
.ds-review-note {
font-size: 0.78rem;
color: var(--color-neutral-600);
line-height: 1.6;
margin: 12px 0 14px;
}
.ds-review-list {
display: flex; flex-direction: column;
gap: 10px;
}
.ds-review-item {
display: flex; flex-direction: column;
gap: 4px;
padding: 10px 12px;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 12px;
}
.ds-review-q {
display: flex; align-items: baseline; gap: 8px;
font-size: 0.82rem;
font-weight: 700;
color: var(--color-primary-800);
line-height: 1.4;
}
.ds-review-qnum {
flex-shrink: 0;
display: inline-flex;
align-items: center; justify-content: center;
min-width: 30px;
padding: 2px 6px;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
color: #fff;
font-size: 0.7rem;
font-weight: 800;
border-radius: 6px;
letter-spacing: 0.02em;
}
.ds-review-qtext { flex: 1; }
.ds-review-a {
display: flex; align-items: flex-start; flex-wrap: wrap;
gap: 6px;
padding-left: 38px;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-primary-700);
line-height: 1.5;
}
.ds-review-a > i {
color: var(--color-primary-500);
font-size: 0.95rem;
margin-top: 2px;
flex-shrink: 0;
}
.ds-review-a-text { flex: 1; min-width: 0; }
.ds-review-tags {
display: inline-flex; align-items: center; gap: 4px;
flex-shrink: 0;
}
.ds-review-tag {
display: inline-flex; align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.04em;
line-height: 1.4;
white-space: nowrap;
border: 1px solid transparent;
}
/* risk axis tones (cool→warm) */
.ds-review-tag-def { background: rgba(34,197,94,0.12); color: #15803d; border-color: rgba(34,197,94,0.30); }
.ds-review-tag-bal { background: rgba(168,85,247,0.10); color: #7e22ce; border-color: rgba(168,85,247,0.28); }
.ds-review-tag-off { background: rgba(240,98,146,0.14); color: #b91c5c; border-color: rgba(240,98,146,0.32); }
/* purpose axis tones */
.ds-review-tag-self { background: rgba(59,111,217,0.12); color: #1e3a6e; border-color: rgba(59,111,217,0.30); }
.ds-review-tag-mid { background: rgba(100,116,139,0.12); color: #475569; border-color: rgba(100,116,139,0.28); }
.ds-review-tag-soc { background: rgba(245,158,11,0.14); color: #b45309; border-color: rgba(245,158,11,0.32); }
/* #94: 隣接していた 2 つの @media (max-width: 480px) を統合 */
@media (max-width: 480px) {
.ds-review-tag { font-size: 0.6rem; padding: 2px 7px; }
.ds-review-head { padding: 12px 14px; gap: 8px; }
.ds-review-title { font-size: 0.84rem; }
.ds-review-meta { font-size: 0.66rem; padding: 2px 8px; }
.ds-review-body { padding: 4px 14px 14px; }
.ds-review-note { font-size: 0.72rem; }
.ds-review-item { padding: 9px 10px; }
.ds-review-q { font-size: 0.76rem; }
.ds-review-qnum { min-width: 26px; font-size: 0.64rem; padding: 2px 5px; }
.ds-review-a { font-size: 0.78rem; padding-left: 32px; }
}
/* ==========================================================
6タイプMAP (Type Matrix) — Issue #2 / #13
========================================================== */
.ds-type-matrix-section {
margin-bottom: 28px;
}
.ds-matrix-section-head {
text-align: center;
margin-bottom: 14px;
}
.ds-matrix-section-label {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px;
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-primary-600);
}
.ds-matrix-section-label i { font-size: 0.9rem; color: var(--color-primary-500); }
.ds-matrix-section-title {
margin-top: 10px;
font-size: 1.05rem;
font-weight: 800;
color: var(--color-primary-800);
letter-spacing: -0.01em;
}
.ds-matrix-section-sub {
margin-top: 6px;
font-size: 0.88rem;
color: var(--color-neutral-600);
font-weight: 500;
}
.ds-matrix-wrapper {
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 24px;
box-shadow: var(--glass-shadow);
padding: 22px 18px 18px;
}
.ds-matrix-grid {
display: grid;
grid-template-columns: 92px 1fr 1fr;
grid-template-rows: auto repeat(3, auto);
gap: 10px;
}
@media (max-width: 480px) {
.ds-matrix-grid { grid-template-columns: 76px 1fr 1fr; gap: 8px; }
}
.ds-matrix-axis-head {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-primary-700);
background: linear-gradient(135deg, rgba(59,111,217,0.12), rgba(107,154,239,0.08));
border-radius: 8px;
padding: 6px 4px;
line-height: 1.25;
gap: 2px;
}
.ds-matrix-axis-head i { color: var(--color-primary-500); font-size: 0.95rem; margin-right: 3px; }
.ds-matrix-axis-head .axis-main { display: inline-flex; align-items: center; }
.ds-matrix-axis-head .axis-sub {
font-size: 0.7rem;
font-weight: 600;
color: var(--color-neutral-600);
letter-spacing: 0.02em;
}
.ds-matrix-axis-side {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-weight: 700;
color: var(--color-primary-700);
letter-spacing: 0.04em;
background: linear-gradient(135deg, rgba(59,111,217,0.10), rgba(107,154,239,0.06));
border-radius: 10px;
text-align: center;
padding: 8px 4px;
gap: 2px;
}
.ds-matrix-axis-side .axis-icon {
display: block;
margin-bottom: 2px;
color: var(--color-primary-500);
font-size: 1.05rem;
}
.ds-matrix-axis-side .axis-main {
font-size: 0.86rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.ds-matrix-axis-side .axis-sub {
font-size: 0.68rem;
font-weight: 600;
color: var(--color-neutral-600);
letter-spacing: 0;
line-height: 1.3;
margin-top: 2px;
}
.ds-matrix-cell {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px;
padding: 10px 6px 8px;
border-radius: 14px;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(255,255,255,0.5);
text-align: center;
position: relative;
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.55s var(--ease-out),
transform 0.55s var(--ease-out),
box-shadow 0.4s var(--ease-out);
cursor: default;
}
.ds-matrix-cell.in-view {
opacity: 0.68;
transform: translateY(0);
}
.ds-matrix-cell.current.in-view {
opacity: 1;
background:
linear-gradient(135deg, rgba(59,111,217,0.16) 0%, rgba(107,154,239,0.10) 100%),
rgba(255,255,255,0.85);
border: 2px solid var(--color-primary-500);
box-shadow:
0 0 0 4px rgba(41,82,163,0.14),
0 12px 28px rgba(15,33,64,0.18);
transform: translateY(0) scale(1.04);
}
/* staggered delay (左上→右下) */
.ds-matrix-cell:nth-child(5) { transition-delay: 0.05s; }
.ds-matrix-cell:nth-child(6) { transition-delay: 0.15s; }
.ds-matrix-cell:nth-child(8) { transition-delay: 0.25s; }
.ds-matrix-cell:nth-child(9) { transition-delay: 0.35s; }
.ds-matrix-cell:nth-child(11){ transition-delay: 0.45s; }
.ds-matrix-cell:nth-child(12){ transition-delay: 0.55s; }
.ds-matrix-cell-img {
width: 48px; height: 48px;
border-radius: 11px;
object-fit: cover;
background: #fff;
box-shadow: 0 3px 8px rgba(15,33,64,0.12);
}
.ds-matrix-cell.current .ds-matrix-cell-img {
width: 56px; height: 56px;
box-shadow:
0 6px 14px rgba(41,82,163,0.25),
inset 0 0 0 2px #fff;
}
.ds-matrix-cell-name {
font-size: 0.8rem;
font-weight: 700;
color: var(--color-primary-800);
line-height: 1.25;
}
.ds-matrix-cell.current .ds-matrix-cell-name {
font-size: 0.88rem;
color: var(--color-primary-700);
}
.ds-matrix-current-badge {
position: absolute;
top: -11px; right: -6px;
padding: 4px 11px;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-800));
color: #fff;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
border-radius: 999px;
box-shadow: 0 4px 10px rgba(15,33,64,0.32);
display: inline-flex; align-items: center; gap: 4px;
white-space: nowrap;
opacity: 0;
transform: scale(0.6) translateY(4px);
transition: opacity 0.4s var(--ease-spring) 0.7s, transform 0.4s var(--ease-spring) 0.7s;
}
.ds-matrix-cell.current.in-view .ds-matrix-current-badge {
opacity: 1;
transform: scale(1) translateY(0);
}
.ds-matrix-current-badge i { font-size: 0.72rem; }
.ds-matrix-foot {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed rgba(59,111,217,0.18);
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.ds-matrix-legend-row {
display: grid;
grid-template-columns: 92px 1fr;
gap: 10px;
align-items: start;
font-size: 0.8rem;
line-height: 1.55;
color: var(--color-neutral-700);
}
.ds-matrix-legend-axis {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px;
background: linear-gradient(135deg, rgba(59,111,217,0.10), rgba(107,154,239,0.06));
border-radius: 6px;
font-size: 0.74rem;
font-weight: 700;
color: var(--color-primary-700);
letter-spacing: 0.04em;
white-space: nowrap;
justify-self: start;
}
.ds-matrix-legend-axis i { color: var(--color-primary-500); font-size: 0.88rem; }
.ds-matrix-legend-defs { display: flex; flex-direction: column; gap: 3px; }
.ds-matrix-legend-defs b {
color: var(--color-primary-700);
font-weight: 800;
}
@media (max-width: 480px) {
.ds-matrix-cell-img { width: 44px; height: 44px; }
.ds-matrix-cell.current .ds-matrix-cell-img { width: 50px; height: 50px; }
.ds-matrix-cell-name { font-size: 0.74rem; }
.ds-matrix-cell.current .ds-matrix-cell-name { font-size: 0.8rem; }
.ds-matrix-axis-side .axis-main, .ds-matrix-axis-head .axis-main { font-size: 0.76rem; }
.ds-matrix-axis-side .axis-sub, .ds-matrix-axis-head .axis-sub { font-size: 0.62rem; }
.ds-matrix-legend-row { grid-template-columns: 1fr; gap: 4px; font-size: 0.72rem; }
}
/* ==========================================================
Final inset: prefers-reduced-motion 全部抑制
========================================================== */
/* ==========================================================
Step3 投資体験 — 前ターン結果セクション (Issue #40)
「予測 → 売買 → 結果」の自然なフローに対応するため、
各ターン頭に「前ターンの結果（前ニュース見出し+3銘柄値動き）」を表示
========================================================== */
/* Turn 0: ルール説明カード（前結果がないターンのレイアウト維持） */
.rule-intro-card {
background:
linear-gradient(135deg, rgba(59,111,217,0.08), rgba(107,154,239,0.04)),
var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 16px 18px;
margin-bottom: var(--space-md);
}
.rule-intro-label {
display: flex; align-items: center; gap: 7px;
font-size: 1.12rem;
font-weight: 800;
color: var(--color-primary-800);
margin-bottom: 12px;
line-height: 1.4;
}
.rule-intro-label i { color: var(--color-primary-500); font-size: 1.2rem; flex-shrink: 0; }
/* 見出しの「投資したい企業」を強調（マーカー風アクセント・斜体解除） */
.rule-intro-label em {
font-style: normal;
color: var(--color-primary-700);
background: linear-gradient(transparent 62%, rgba(94, 127, 197, 0.28) 0);
padding: 0 1px;
}
.rule-intro-list {
display: flex; flex-direction: column;
gap: 10px;
}
.rule-intro-item {
display: flex; align-items: center; gap: 8px;
font-size: 0.98rem;
color: var(--color-neutral-700);
line-height: 1.6;
}
.rule-intro-item i {
color: var(--color-primary-500);
font-size: 1.15rem;
flex-shrink: 0;
}
.rule-intro-item strong {
color: var(--color-primary-700);
font-weight: 800;
}
/* Turn 1+: 前ターン結果カード */
.prev-result-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 14px 18px 16px;
margin-bottom: var(--space-md);
animation: prevResultIn 0.6s var(--ease-out-expo, ease-out) both;
}
@keyframes prevResultIn {
0% { opacity: 0; transform: translateY(-6px); }
100% { opacity: 1; transform: translateY(0); }
}
.prev-result-label {
display: flex; align-items: center; gap: 6px;
font-size: 0.84rem;
font-weight: 800;
letter-spacing: 0.06em;
color: var(--color-primary-600);
text-transform: uppercase;
margin-bottom: 10px;
}
.prev-result-label i { font-size: 1rem; color: var(--color-primary-500); }
.prev-result-news {
font-size: 1rem;
font-weight: 700;
color: var(--color-primary-800);
line-height: 1.55;
margin-bottom: 14px;
padding: 10px 14px;
background: rgba(59,111,217,0.06);
border-left: 3px solid var(--color-primary-500);
border-radius: 4px;
}
.prev-result-stocks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 18px; /* #147: 株価カード→株価推移チャートの詰まり解消 */
}
@media (max-width: 480px) {
.prev-result-stocks { grid-template-columns: 1fr; }
}
/* #129: ターン結果の「このターンの学び」1行（振り返りモーダル廃止の代替） */
.prev-result-learning {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--color-neutral-200);
font-size: 0.85rem;
color: var(--color-neutral-600);
line-height: 1.6;
}
.prev-result-learning i { color: var(--color-primary-400); font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.prev-result-stock {
padding: 10px 12px;
border-radius: var(--radius-sm, 10px);
background: rgba(255,255,255,0.55);
border: 1px solid rgba(255,255,255,0.5);
text-align: center;
animation: prevResultStockPop 0.6s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}
.prev-result-stock:nth-child(1) { animation-delay: 0.10s; }
.prev-result-stock:nth-child(2) { animation-delay: 0.18s; }
.prev-result-stock:nth-child(3) { animation-delay: 0.26s; }
@keyframes prevResultStockPop {
0% { opacity: 0; transform: scale(0.96); }
100% { opacity: 1; transform: scale(1); }
}
.prev-result-stock.up { background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(255,255,255,0.7)); border-color: rgba(34,197,94,0.30); }
.prev-result-stock.down { background: linear-gradient(135deg, rgba(240,98,146,0.10), rgba(255,255,255,0.7)); border-color: rgba(240,98,146,0.30); }
.prev-result-stock.flat { background: rgba(255,255,255,0.7); border-color: var(--color-neutral-200); }
.prev-result-stock-name {
font-size: 0.88rem;
font-weight: 700;
color: var(--color-primary-800);
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.prev-result-stock-row {
display: flex; align-items: center; justify-content: center;
gap: 6px;
margin-bottom: 4px;
}
.prev-result-stock-old {
font-size: 0.88rem;
color: var(--color-neutral-500);
text-decoration: line-through;
}
.prev-result-arrow {
color: var(--color-neutral-400);
font-size: 1rem;
}
.prev-result-stock-new {
font-size: 1.04rem;
font-weight: 800;
color: var(--color-primary-800);
}
.prev-result-stock-pct {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.prev-result-stock.up .prev-result-stock-pct { color: #16a34a; }
.prev-result-stock.down .prev-result-stock-pct { color: var(--color-accent-600); }
.prev-result-stock.flat .prev-result-stock-pct { color: var(--color-neutral-500); }
/* #132: ターン内のセクション区切り（今回のニュース / 売買） */
.turn-section-divider {
display: flex; align-items: center; gap: 10px;
margin: 18px 0 12px;
font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em;
}
.turn-section-divider::before, .turn-section-divider::after {
content: ""; flex: 1; height: 1px; background: var(--color-neutral-200);
}
.turn-section-divider span { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary-600); white-space: nowrap; }
.turn-section-divider i { font-size: 1rem; }
/* #130: ニュースの強調（企業名＝太字／好材料＝success／気になる点＝warning）。値動きの方向は強調しない */
.news-co { font-weight: 800; }
.news-pos { color: var(--color-success-600); font-weight: 700; }
.news-neg { color: var(--color-warning-600); font-weight: 700; }
/* 見出し内（濃い背景でない白カード）でも読めるように、詳細文中は下線を添える */
.event-detail .news-pos { text-decoration: underline; text-decoration-color: var(--color-success-400); text-underline-offset: 2px; }
.event-detail .news-neg { text-decoration: underline; text-decoration-color: var(--color-warning-500); text-underline-offset: 2px; }
/* #131: ハプニング（予想外の出来事）。ニュースと別物と分かる warning 系・見出し本文は常時表示・伏線リンク付き */
.happening-card {
background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(255,255,255,0.55));
border: 1px solid rgba(245,158,11,0.38);
border-left: 4px solid var(--color-warning-500);
border-radius: var(--radius-md);
padding: 14px 16px;
margin: 12px 0 18px;
}
.happening-label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em;
color: var(--color-warning-600); margin-bottom: 8px;
}
.happening-label i { font-size: 1rem; }
.happening-headline { font-size: 1rem; font-weight: 800; color: var(--color-neutral-900); line-height: 1.5; margin-bottom: 8px; }
.happening-detail { font-size: 0.9rem; color: var(--color-neutral-700); line-height: 1.7; }
.happening-link {
display: flex; gap: 6px; margin-top: 12px; padding-top: 10px;
border-top: 1px dashed rgba(245,158,11,0.4);
font-size: 0.85rem; color: var(--color-neutral-700); line-height: 1.65;
}
.happening-link i { color: var(--color-warning-600); flex-shrink: 0; margin-top: 2px; }
.event-headline {
position: sticky;
top: 8px;
z-index: 5;
display: flex !important;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #ffffff 0%, var(--color-primary-50, #f0f5ff) 100%);
padding: 12px 16px;
margin: 0 0 10px 0;
border-radius: var(--radius-md);
border: 1.5px solid var(--color-primary-400, #3b6fd9);
box-shadow: 0 4px 14px rgba(15,33,64,0.10);
font-size: 1.05rem;
font-weight: 800;
color: var(--color-primary-800);
}
.event-news-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
color: #fff;
padding: 5px 14px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.10em;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(41,82,163,0.30);
}
/* Yuji FB: NEWS バッジのアイコンが見づらい → サイズ拡大 + 明示的に白色 + 細密ニュース紙→拡声器に */
.event-news-badge i {
font-size: 1.05rem;
color: #fff;
line-height: 1;
}
.event-headline-text {
flex: 1;
line-height: 1.4;
display: flex;
flex-direction: column;
gap: 2px;
}
.event-headline-line {
display: block;
}
.event-headline-line + .event-headline-line {
font-size: 0.94em;
color: var(--color-neutral-700);
font-weight: 600;
}
.event-headline-line + .event-headline-line::before {
content: '└ ';
color: var(--color-neutral-400);
font-weight: 400;
margin-right: 2px;
}
/* 詳細文カード（見出しとは完全独立、上下に分かれる） */
.event-detail-card {
background: linear-gradient(135deg, rgba(219, 232, 252, 0.55), rgba(233, 216, 253, 0.35));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(163, 193, 245, 0.3);
border-radius: var(--radius-md);
padding: 14px 18px;
margin: 0 0 var(--space-md) 0;
}
.event-detail-card .event-detail {
font-size: 0.9rem;
color: var(--color-neutral-700);
line-height: 1.65;
padding: 0;
}
.event-bystander {
display: flex; gap: 8px; align-items: flex-start;
font-size: 0.9rem; color: var(--color-neutral-700);
background: rgba(255, 255, 255, 0.62);
border-left: 2px solid var(--color-accent-400, #f48fb1);
border-radius: 6px;
padding: 10px 12px;
margin-top: 10px;
line-height: 1.65;
}
.event-bystander i {
color: var(--color-accent-500, #f06292);
font-size: 1.05rem;
flex-shrink: 0; margin-top: 1px;
}
/* ==========================================================
Reduced motion 抑制
========================================================== */
/* ==========================================================
#94 Phase 5: prefers-reduced-motion 統合ブロック
(元 style.css 中の 10 箇所に分散していた @media を統合)
各セクションのコメント = 元の出現順
========================================================== */
@media (prefers-reduced-motion: reduce) {
/* --- 元 block 1 (元 L228) --- */
.progress-step.done .step-circle { animation: none; }
/* --- 元 block 2 (元 L1465) --- */
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
body::before { display: none; }
.quiz-progress-fill::after { animation: none; }
.budget-bar-fill::after { animation: none; }
.chara-card::before { animation: none; }
/* --- 元 block 3 (元 L2256) --- */
.chara-emoji::before,
.step-complete-emoji i,
.result-congrats-emoji i {
animation: none !important;
}
/* --- 元 block 4 (元 L2265) --- */
.progress-step.active .step-circle {
animation: none !important;
}
/* --- 元 block 5 (元 L2368) --- */
.ds-char-vis::before { animation: none; }
/* --- 元 block 6 (元 L2408) --- */
.ds-char-sparkle { animation: none; opacity: 1; transform: none; }
/* --- 元 block 7 (元 L2471) --- */
.ds-result-label, .ds-char-type, .ds-char-name, .ds-char-tagline, .ds-axis-tags,
.ds-insight-grid, .ds-insight-message, .ds-cta-row {
animation: none !important; opacity: 1 !important; transform: none !important;
}
.ds-char-vis { animation: none !important; opacity: 1 !important; transform: none !important; }
/* --- 元 block 8 (元 L2801) --- */
.intro-hero-icon { animation: none; opacity: 1; }
/* --- 元 block 9 (元 L4409) --- */
.subjob-section { animation: none; }
/* --- 元 block 10 (元 L5412) --- */
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.chara-advice, .event-card, .badge-popup, .ds-badge-popup,
.ds-result-label, .ds-char-vis, .ds-char-type, .ds-char-name,
.ds-char-tagline, .ds-axis-tags, .ds-insight-grid, .ds-insight-message,
.ds-cta-row, .intro-hero-icon,
.ds-matrix-cell, .ds-matrix-current-badge,
.prev-result-card, .prev-result-stock {
opacity: 1 !important;
transform: none !important;
}
}
/* ==========================================================
Issue #97: Step2 結果 UI 再設計 (Phase 1: 重複削除, Phase 2: 2軸プロット)
- 支出リスト: タグチップ削除、4列カード化
- radar 廃止 → 2軸プロット (リスク × 目的) で Step1 キャラと Step2 行動を統合
- accordion 廃止 → Top3 pill クリックで寄与選択展開
- 対比カードは 1文の発見メッセージに圧縮
========================================================== */
/* --- 支出リスト: タグ色排除、4列レイアウト --- */
.lifestyle-review {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.lifestyle-summary-item {
display: grid;
grid-template-columns: 28px minmax(140px, auto) 1fr auto;
align-items: center;
gap: 4px 14px;
padding: 12px 14px;
background: rgba(241, 245, 249, 0.45);
border: 1px solid var(--color-neutral-200);
border-radius: var(--radius-sm);
transition: background 0.15s, transform 0.15s var(--ease-out-expo);
}
.lifestyle-summary-item:hover {
background: rgba(219, 232, 252, 0.5);
transform: translateX(2px);
}
.lifestyle-summary-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
color: var(--color-primary-600);
}
.lifestyle-summary-icon i { font-size: 1.15rem; }
.lifestyle-summary-cat {
font-size: 0.92rem;
font-weight: 700;
color: var(--color-neutral-800);
white-space: nowrap;
}
.lifestyle-summary-choice {
font-size: 0.92rem;
color: var(--color-neutral-700);
font-weight: 500;
}
.lifestyle-summary-cost {
font-size: 1rem;
font-weight: 800;
color: var(--color-primary-700);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (max-width: 640px) {
.lifestyle-summary-item {
grid-template-columns: 28px 1fr auto;
grid-template-areas:
"icon cat cost"
"icon choice cost";
row-gap: 4px;
}
.lifestyle-summary-icon { grid-area: icon; align-self: start; }
.lifestyle-summary-cat { grid-area: cat; }
.lifestyle-summary-choice { grid-area: choice; font-size: 0.85rem; }
.lifestyle-summary-cost { grid-area: cost; text-align: right; align-self: center; }
}
/* ==========================================================
Issue #97 (Phase 3): Step2 結果ページ 没入感アップ
案A キャラHero mini + 案D ストーリー化メッセージ
- 自分(=Step1キャラ)が結果ページに居る感覚を取り戻す
- 3章立てで「1ヶ月 → 価値観発見 → 次の一歩」の物語に
========================================================== */
/* --- 案A: キャラHero mini (Step2 結果 直下) --- */
.ds-result-hero--mini {
display: flex;
align-items: center;
gap: 18px;
text-align: left;
padding: 18px 20px;
margin: 0 0 16px;
background: linear-gradient(135deg, color-mix(in srgb, var(--type-color, #3b6fd9) 8%, #fff) 0%, #fff 100%);
border: 1px solid color-mix(in srgb, var(--type-color, #3b6fd9) 18%, transparent);
border-radius: var(--radius-lg);
box-shadow: 0 6px 18px rgba(15, 33, 64, 0.06);
opacity: 0;
animation: dsHeroMiniIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
@keyframes dsHeroMiniIn {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
.ds-char-vis--mini {
position: relative;
width: 72px; height: 72px;
flex-shrink: 0;
margin: 0;
animation: none;
opacity: 1;
transform: none;
}
.ds-char-vis--mini .ds-char-halo {
position: absolute; inset: -6px;
background: radial-gradient(ellipse at center,
color-mix(in srgb, var(--type-color, #3b6fd9) 28%, transparent) 0%,
transparent 70%);
filter: blur(10px);
border-radius: 50%;
z-index: 0;
animation: dsGlowBreath 3.5s ease-in-out infinite;
}
.ds-char-vis--mini .ds-char-img {
position: relative;
z-index: 1;
width: 100%; height: 100%;
border-radius: 50%;
object-fit: cover;
background: #fff;
box-shadow:
0 6px 16px rgba(15, 33, 64, 0.18),
inset 0 0 0 3px #fff;
}
.ds-char-vis--mini.ds-char-vis--fallback {
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
color: var(--type-color, var(--color-primary-500));
background: #fff;
border-radius: 50%;
box-shadow: 0 6px 16px rgba(15, 33, 64, 0.12);
}
.ds-char-vis--mini::before { content: none; }
.ds-result-hero-bubble {
position: relative;
flex: 1;
padding: 12px 16px;
background: #fff;
border: 1px solid color-mix(in srgb, var(--type-color, #3b6fd9) 22%, var(--color-neutral-200));
border-radius: 14px;
box-shadow: 0 2px 6px rgba(15, 33, 64, 0.05);
}
.ds-result-hero-bubble::before {
content: "";
position: absolute;
left: -8px;
top: 22px;
width: 14px; height: 14px;
background: #fff;
border-left: 1px solid color-mix(in srgb, var(--type-color, #3b6fd9) 22%, var(--color-neutral-200));
border-bottom: 1px solid color-mix(in srgb, var(--type-color, #3b6fd9) 22%, var(--color-neutral-200));
transform: rotate(45deg);
}
.ds-result-hero-bubble p {
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
color: var(--color-neutral-800);
}
.ds-result-hero-bubble strong {
color: var(--type-color, var(--color-primary-600));
font-weight: 700;
}
@media (max-width: 480px) {
.ds-result-hero--mini { padding: 14px 14px; gap: 12px; }
.ds-char-vis--mini { width: 60px; height: 60px; }
.ds-result-hero-bubble { padding: 10px 12px; }
.ds-result-hero-bubble p { font-size: 0.88rem; }
}
/* --- 案D: ストーリー章ラベル (3章立て) --- */
.story-chapter {
display: flex;
align-items: baseline;
gap: 10px;
margin: 28px 4px 12px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--color-neutral-200);
opacity: 0;
animation: dsHeroMiniIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.story-chapter:nth-of-type(1) { animation-delay: 0.25s; }
.story-chapter:nth-of-type(2) { animation-delay: 0.4s; }
.story-chapter:nth-of-type(3) { animation-delay: 0.55s; }
.story-chapter-num {
font-family: 'Inter', sans-serif;
font-size: 1.4rem;
font-weight: 800;
line-height: 1;
color: var(--color-primary-500);
letter-spacing: 0.04em;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-300));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.story-chapter-label {
font-size: 1.02rem;
font-weight: 700;
color: var(--color-neutral-800);
letter-spacing: 0.02em;
}
@media (max-width: 480px) {
.story-chapter { margin: 22px 2px 10px; gap: 8px; }
.story-chapter-num { font-size: 1.2rem; }
.story-chapter-label { font-size: 0.95rem; }
}
/* --- prefers-reduced-motion: アニメーションを無効化 --- */
@media (prefers-reduced-motion: reduce) {
.ds-result-hero--mini,
.ds-char-vis--mini .ds-char-halo,
.story-chapter,
.value-2axis-wrap canvas {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================================
Phase 1 (?proto=I/N/Q/R 共通): 企業確認フェーズ
============================================================ */
.phase1-intro {
display: flex; gap: 8px; align-items: flex-start;
font-size: 0.96rem; color: var(--color-neutral-800);
background: var(--color-primary-50);
border-left: 3px solid var(--color-primary-400);
border-radius: 10px; padding: 13px 16px; margin: 6px 0 18px;
line-height: 1.65;
}
.phase1-intro i { color: var(--color-primary-600); font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.phase1-section { margin: 24px 0; }
.phase1-section-title {
font-size: 1.08rem; font-weight: 800; color: var(--color-neutral-900, #1a202c);
margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.phase1-section-title i { color: var(--color-primary-600); font-size: 1.35rem; }
.phase1-section-meta {
font-size: 0.9rem; color: var(--color-neutral-700);
margin-bottom: 12px; line-height: 1.6;
}
.phase1-macro-grid {
display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr);
}
.phase1-macro-card {
background: var(--color-primary-50);
border-left: 3px solid var(--color-primary-300);
border-radius: 10px; padding: 14px 16px;
}
.phase1-macro-card i { font-size: 1.55rem; color: var(--color-primary-600); }
.phase1-macro-card h4 {
font-size: 1rem; font-weight: 700; color: var(--color-neutral-900, #1a202c);
margin: 6px 0;
}
.phase1-macro-card p {
font-size: 0.88rem; color: var(--color-neutral-700); line-height: 1.65;
}
.phase1-mission-list { display: flex; flex-direction: column; gap: 10px; }
/* #130: 企業情報モーダル */
body.modal-open { overflow: hidden; }
/* リッチカード: 初期は summary、タップで詳細展開 (details/summary 構造) */
.phase1-mission-card {
border: 1.5px solid var(--color-neutral-200);
border-radius: 14px;
background: #fff;
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s;
}
.phase1-mission-card[open] {
border-color: var(--color-primary-300);
box-shadow: 0 2px 10px rgba(41, 82, 163, 0.08);
}
.phase1-mission-summary {
display: flex; align-items: flex-start; gap: 12px;
padding: 16px 18px;
cursor: pointer;
list-style: none;
min-height: 56px;
}
.phase1-mission-summary::-webkit-details-marker { display: none; }
.phase1-mission-summary:hover { background: var(--color-primary-50); }
.phase1-mission-summary:focus-visible {
outline: 3px solid var(--color-primary-500);
outline-offset: -3px;
background: var(--color-primary-50);
}
.phase1-mission-icon {
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
}
.phase1-mission-icon i { font-size: 1.7rem; }
.phase1-mission-summary-text { flex: 1; min-width: 0; }
.phase1-mission-name {
display: inline-block;
font-size: 1.08rem; font-weight: 800; color: var(--color-neutral-900, #1a202c);
}
.phase1-mission-sector {
display: inline-block;
font-size: 0.86rem; color: var(--color-neutral-700);
margin-left: 8px; font-weight: 600;
}
.phase1-mission-snippet {
font-size: 0.95rem; color: var(--color-neutral-700);
margin-top: 6px; line-height: 1.6;
}
.phase1-mission-caret {
color: var(--color-neutral-500);
font-size: 1.2rem;
flex-shrink: 0;
margin-top: 14px;
transition: transform 0.2s;
}
.phase1-mission-card[open] .phase1-mission-caret {
transform: rotate(180deg);
color: var(--color-primary-600);
}
.phase1-mission-detail {
padding: 16px 18px 18px 18px;
display: flex; flex-direction: column; gap: 14px;
border-top: 1px dashed var(--color-neutral-200);
margin-top: 4px;
}
@media (max-width: 640px) {
.phase1-mission-detail { padding: 16px 18px 18px 18px; }
}
/* ミッション冒頭ハイライト */
.phase1-mission-statement {
--mission-color: var(--color-primary-500);
background: linear-gradient(135deg, color-mix(in srgb, var(--mission-color) 12%, #fff), color-mix(in srgb, var(--mission-color) 4%, #fff));
border-left: 4px solid var(--mission-color);
border-radius: 12px;
padding: 14px 18px;
margin: 0 0 4px;
display: flex; flex-direction: column; gap: 6px;
box-shadow: 0 1px 6px color-mix(in srgb, var(--mission-color) 18%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
.phase1-mission-statement {
background: var(--color-primary-50);
box-shadow: 0 1px 6px rgba(41, 82, 163, 0.12);
}
}
.phase1-mission-statement-label {
font-size: 0.78rem; font-weight: 700;
color: var(--mission-color);
letter-spacing: 0.08em;
text-transform: uppercase;
display: flex; align-items: center; gap: 6px;
}
.phase1-mission-statement-label i {
font-size: 1rem;
}
.phase1-mission-statement-text {
font-size: 1.15rem; font-weight: 700;
color: var(--color-neutral-900, #1a202c);
line-height: 1.55;
margin: 0;
letter-spacing: 0.01em;
}
@media (max-width: 640px) {
.phase1-mission-statement-text { font-size: 1.08rem; }
}
.phase1-mission-row {
display: flex; flex-direction: column; gap: 4px;
font-size: 0.95rem; line-height: 1.7;
/* ミッション/ヒントの箱の中身と左右を揃える（本文が箱より広く出るのを抑える） */
padding: 0 18px 0 22px;
}
.phase1-mission-row-label {
font-size: 0.82rem; font-weight: 700;
color: var(--color-neutral-700);
display: flex; align-items: center; gap: 5px;
letter-spacing: 0.02em;
}
.phase1-mission-row-label i { color: var(--color-primary-600); font-size: 1.05rem; }
.phase1-mission-row-text { color: var(--color-neutral-800); }
.phase1-mission-row.hint {
background: var(--color-primary-50);
border-radius: 10px;
padding: 12px 14px;
border-left: 3px solid var(--color-accent-400, #f48fb1);
}
.phase1-mission-row.hint .phase1-mission-row-label i {
color: var(--color-accent-500, #f06292);
}
/* ============================================================
sim 銘柄カード: 2列グリッド + 「何もしない」状態の薄表示
（6社化でのスクロール量削減）
============================================================ */
.stocks-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
/* 4社以上のとき、PC/タブレットでは2列 */
.stocks-grid.multi {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
/* スマホ幅では1列に戻す */
@media (max-width: 640px) {
.stocks-grid.multi {
grid-template-columns: 1fr;
}
}
/* 「何もしない」状態のカード: 薄く・コンパクトに */
.stock-card.stock-card-hold {
opacity: 0.78;
/* padding/font-size は既存維持。視覚的に「待機中」感だけ出す */
}
.stock-card.stock-card-hold:hover {
opacity: 1;
}
/* 「買う」「売る」が選択されているカードは強調 */
.stock-card.stock-card-active {
box-shadow: 0 2px 12px rgba(41, 82, 163, 0.12);
border-color: var(--color-primary-400);
}
/* ============================================================
ターン末内省モーダル (?proto=N/R)
============================================================ */
.reflection-intro {
display: flex; gap: 8px; align-items: flex-start;
font-size: 0.96rem; color: var(--color-neutral-800);
background: var(--color-primary-50);
border-left: 3px solid var(--color-primary-400);
border-radius: 10px; padding: 14px 16px; margin: 6px 0 18px;
line-height: 1.65;
}
.reflection-intro i { color: var(--color-primary-600); font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.reflection-option {
background: #fff;
border: 1.5px solid var(--color-neutral-300);
color: var(--color-neutral-900, #1a202c);
border-radius: 12px;
padding: 14px 18px;
font-family: inherit; font-size: 1rem; font-weight: 600;
line-height: 1.55;
text-align: left;
cursor: pointer; transition: 0.15s;
min-height: 52px;
}
.reflection-option:hover {
background: var(--color-primary-50);
border-color: var(--color-primary-500);
}
.reflection-option:focus-visible {
outline: 3px solid var(--color-primary-500);
outline-offset: 2px;
border-color: var(--color-primary-500);
}
.reflection-option:active { transform: scale(0.98); }
/* ============================================================
?proto=R 統合本命結果画面
============================================================ */
.proto-r-intro {
font-size: 1rem; color: var(--color-neutral-800);
background: var(--color-primary-50);
border-left: 3px solid var(--color-primary-400);
border-radius: 10px; padding: 14px 16px; margin: 6px 0 20px;
line-height: 1.75;
}
.proto-r-section {
margin: 24px 0;
padding-bottom: 18px;
border-bottom: 1px solid var(--color-neutral-200);
}
.proto-r-section:last-of-type { border-bottom: none; padding-bottom: 0; }
.proto-r-section h3 {
font-size: 1.1rem; font-weight: 800; color: var(--color-neutral-900, #1a202c);
margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.proto-r-section h3 i { color: var(--color-primary-600); font-size: 1.3rem; }
.proto-r-breakdown {
margin-top: 14px;
border: 1px solid var(--color-neutral-200);
border-radius: 10px;
padding: 4px 14px;
background: var(--color-neutral-50, #f7fafc);
}
.proto-r-breakdown summary {
cursor: pointer; font-size: 0.95rem; font-weight: 700;
color: var(--color-neutral-800); padding: 12px 0;
display: flex; align-items: center; gap: 6px;
list-style: none;
min-height: 44px;
}
.proto-r-breakdown summary:focus-visible {
outline: 3px solid var(--color-primary-500);
outline-offset: 2px;
border-radius: 6px;
}
.proto-r-breakdown summary::-webkit-details-marker { display: none; }
.proto-r-breakdown summary i { color: var(--color-primary-600); font-size: 1.1rem; }
.proto-r-breakdown table {
width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 6px 0;
}
.proto-r-breakdown th, .proto-r-breakdown td {
padding: 7px 5px; text-align: right; border-bottom: 1px solid var(--color-neutral-200);
}
.proto-r-breakdown th:first-child, .proto-r-breakdown td:first-child { text-align: left; }
.proto-r-breakdown th { color: var(--color-neutral-700); font-weight: 700; letter-spacing: 0.02em; }
.proto-r-breakdown-note {
font-size: 0.85rem; color: var(--color-neutral-700); font-style: italic;
margin: 8px 0 4px; line-height: 1.6;
}
.proto-r-trade-list { list-style: none; padding: 0; margin: 0; }
.proto-r-trade-row {
display: flex; align-items: center; gap: 8px;
padding: 10px 0; border-bottom: 1px solid var(--color-neutral-200);
font-size: 0.95rem;
}
.proto-r-trade-turn {
display: inline-block; font-size: 0.82rem; font-weight: 700;
color: var(--color-primary-700); background: var(--color-primary-100);
padding: 3px 10px; border-radius: 99px;
}
.proto-r-trade-name { font-weight: 600; flex: 1; min-width: 110px; color: var(--color-neutral-900, #1a202c); }
.proto-r-trade-act { font-weight: 700; font-size: 0.98rem; }
.proto-r-trade-act.buy { color: var(--color-primary-700); }
.proto-r-trade-act.sell { color: #c4286a; }
.proto-r-timing-tag {
font-size: 0.8rem; font-weight: 700;
padding: 3px 9px; border-radius: 99px;
margin-left: 6px;
}
.proto-r-timing-tag.t-up { background: #fdd5e3; color: #a01650; }
.proto-r-timing-tag.t-down { background: #c7f0d3; color: #136b32; }
.proto-r-timing-tag.t-flat { background: #e2e6ed; color: #4b5563; }
.proto-r-timing-tag.t-neutral { background: #e2e6ed; color: #4b5563; }
.proto-r-cash {
font-size: 1.5rem; font-weight: 800;
color: var(--color-neutral-900, #1a202c);
margin-bottom: 8px;
letter-spacing: 0.01em;
}
.proto-r-actions {
list-style: none; padding: 0; margin: 0;
}
.proto-r-actions li {
display: flex; gap: 10px; align-items: flex-start;
padding: 10px 0;
font-size: 0.96rem; color: var(--color-neutral-800);
border-bottom: 1px dashed var(--color-neutral-200);
line-height: 1.6;
}
.proto-r-actions li:last-child { border-bottom: none; }
.proto-r-actions li i { color: var(--color-primary-600); margin-top: 4px; flex-shrink: 0; font-size: 1.1rem; }
/* R 結果画面：示唆セクション（短文＋問い・冷頭表示） */
.proto-r-insight-section {
background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-500) 8%, #fff), color-mix(in srgb, var(--color-primary-500) 2%, #fff));
border-left: 4px solid var(--color-primary-500);
border-radius: 12px;
padding: 16px 18px 18px;
margin-top: 8px;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
.proto-r-insight-section { background: var(--color-primary-50); }
}
.proto-r-insight-section > h3 {
margin-top: 0;
}
/* #133/P26: スコアボード（4ブロック）＋投資スタイル総評／中立性の注記 */
.proto-r-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 520px) { .proto-r-score-grid { grid-template-columns: 1fr; } }
.proto-r-score-block {
border: 1.5px solid var(--color-neutral-200); border-radius: var(--radius-md);
background: #fff; padding: 14px 16px;
display: flex; flex-direction: column; gap: 8px;
}
.proto-r-score-title { font-size: 0.92rem; font-weight: 800; color: var(--color-primary-700, #2952a3); }
.proto-r-score-value { font-size: 1rem; color: var(--color-neutral-900, #1a202c); line-height: 1.6; }
.proto-r-score-value strong { font-size: 1.12rem; }
.proto-r-score-note { font-size: 0.84rem; color: var(--color-neutral-600); line-height: 1.7; }
.proto-r-pl-profit { color: var(--color-success-600); }
.proto-r-pl-loss { color: var(--color-danger-600); }
.proto-r-pl-even { color: var(--color-neutral-700); }
.proto-r-verdict-box {
background: var(--color-primary-50, #f0f5ff);
border-left: 4px solid var(--color-primary-400, #5e7fc5);
border-radius: var(--radius-md); padding: 16px 18px; margin-top: 14px;
}
.proto-r-verdict-title { font-size: 0.88rem; font-weight: 800; color: var(--color-primary-700, #2952a3); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.proto-r-verdict { font-size: 1rem; font-weight: 700; line-height: 1.85; color: var(--color-neutral-900, #1a202c); }
.proto-r-verdict strong { color: var(--color-primary-700, #2952a3); }
.proto-r-axis-note {
display: flex; gap: 6px; align-items: flex-start;
font-size: 0.82rem; color: var(--color-neutral-600); line-height: 1.65;
margin: 12px 0 14px;
}
.proto-r-axis-note i { color: var(--color-primary-500); flex-shrink: 0; margin-top: 2px; }
.proto-r-pl-note {
font-size: 0.8rem; color: var(--color-neutral-500); line-height: 1.65; margin-top: 8px;
}
.proto-r-insight-details {
margin-top: 14px;
background: rgba(255, 255, 255, 0.65);
}
.proto-r-insight-details summary:focus-visible {
outline: 3px solid var(--color-primary-500);
outline-offset: 2px;
border-radius: 6px;
}
/* R 結果画面：現金・損益のセクション内に置く短い示唆文 */
.proto-r-cash-insight {
margin: 10px 0 0;
padding: 12px 14px;
background: var(--color-neutral-50, #f7fafc);
border-left: 3px solid var(--color-primary-300);
border-radius: 8px;
font-size: 0.96rem;
color: var(--color-neutral-800);
line-height: 1.7;
}
/* ④(#134): リテラル blur() 指定も含め、全要素で backdrop-filter を無効化（高速スクロール時の白い四角い残像を根絶） */
*, *::before, *::after {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* #164: 結果画面「やり直す」確認モーダル（native confirm を DS 準拠に）。overlay は blur 無効化済みのため半透明ネイビーで表現 */
.confirm-overlay {
position: fixed;
inset: 0;
z-index: 9997;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 33, 64, 0.55);
opacity: 0;
animation: fadeIn 0.25s ease forwards;
}
.confirm-modal {
width: 100%;
max-width: 360px;
background: var(--glass-bg-elevated);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: 32px 28px 24px;
text-align: center;
box-shadow: 0 24px 60px rgba(15, 33, 64, 0.28);
opacity: 0;
transform: translateY(8px) scale(0.98);
animation: confirmPopIn 0.32s var(--ease-spring) forwards;
}
@keyframes confirmPopIn {
to { opacity: 1; transform: translateY(0) scale(1); }
}
.confirm-icon {
width: 56px;
height: 56px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--color-primary-50);
color: var(--color-primary-600);
font-size: 1.7rem;
}
.confirm-title {
font-size: 1.25rem;
font-weight: 800;
color: var(--color-neutral-800);
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.confirm-body {
font-size: 0.92rem;
color: var(--color-neutral-600);
line-height: 1.7;
margin: 0 0 22px;
}
.confirm-actions {
display: flex;
gap: 10px;
justify-content: center;
}
.confirm-actions .btn {
padding: 12px 24px;
font-size: 0.95rem;
min-width: 120px;
}
@media (prefers-reduced-motion: reduce) {
.confirm-overlay,
.confirm-modal { animation: none; opacity: 1; transform: none; }
}
/* ==========================================================
#171 新案v2（?work2=v2）: 価値観傾向の選択＋初期設定＋調整
========================================================== */
.work2v2-tend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.work2v2-tend {
position: relative; text-align: left; cursor: pointer;
border: 1.5px solid var(--color-neutral-200); border-radius: 13px;
background: #fff; padding: 12px 13px; transition: .12s; font: inherit; color: var(--color-neutral-900);
display: flex; flex-direction: column; gap: 1px;
}
.work2v2-tend.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); }
.work2v2-tend-nm { font-weight: 800; font-size: .95rem; }
.work2v2-tend-sb { font-size: .76rem; color: var(--color-neutral-500); }
.work2v2-reco {
position: absolute; top: -9px; right: 10px;
font-size: .66rem; font-weight: 800; color: #fff; background: var(--color-primary-600);
border-radius: 99px; padding: 2px 8px;
}
.work2v2-prefill-note {
display: flex; gap: 8px; align-items: flex-start;
background: #f0fbf4; border: 1px solid #cdeedd; color: #15803d;
border-radius: 11px; padding: 10px 13px; font-size: .86rem; font-weight: 700; margin: 4px 0 14px; line-height: 1.6;
}
.work2v2-prefill-note i { margin-top: 2px; flex-shrink: 0; }
@media (max-width: 480px) { .work2v2-tend-grid { grid-template-columns: 1fr; } }
/* #171 新案v2 結果（初期設定からの差分） */
.w2r-start {
display: flex; align-items: center; gap: 7px;
font-size: .86rem; font-weight: 700; color: var(--color-neutral-600);
background: var(--color-neutral-50, #f6f8fc); border-radius: 9px; padding: 10px 13px; margin-bottom: 16px;
}
.w2r-start i { color: var(--color-primary-500); }
.w2r-changed-label { font-weight: 800; font-size: .95rem; margin: 28px 0 14px; }
.w2r-diffs { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.w2r-diffs li {
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
border: 1px solid var(--color-neutral-200); border-radius: 10px; padding: 9px 12px; background: #fff;
}
.w2r-cat { font-weight: 800; font-size: .9rem; }
.w2r-chain { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; }
.w2r-from { color: var(--color-neutral-400); text-decoration: line-through; }
.w2r-chain i { color: var(--color-neutral-400); font-size: .8rem; }
.w2r-to { font-weight: 800; color: var(--color-primary-700); }
.w2r-prompt {
font-size: .88rem; line-height: 1.7; color: var(--color-neutral-700);
background: var(--color-primary-50, #eef4ff); border-radius: 10px; padding: 11px 13px; margin: 0;
}
.w2r-zero { font-size: .9rem; line-height: 1.7; color: var(--color-neutral-700); margin: 0; }
.w2r-tendchange {
display: flex; align-items: flex-start; gap: 9px;
border-radius: 10px; padding: 12px 15px; font-size: .86rem; line-height: 1.65; margin-bottom: 20px;
}
.w2r-tendchange i.ph-fill { font-size: 1.05rem; line-height: 1.45; flex-shrink: 0; }
.w2r-tend-changed { background: #fff4e3; border: 1px solid #f3d28a; color: #92590a; }
.w2r-tend-changed i.ph-fill { color: #d97706; }
.w2r-tend-kept { background: #f3f7fb; border: 1px solid #dde6f0; color: #4b5563; }
.w2r-tend-kept i.ph-fill { color: var(--color-primary-500); }
/* ①をやり直してタイプが変わったが、②の選択は前回のまま引き継いでいる場合 */
.w2r-tend-restale { background: #f3f7fb; border: 1px solid #dde6f0; color: #4b5563; }
.w2r-tend-restale i.ph-fill { color: var(--color-primary-500); }
/* ②入力画面: ①やり直しの告知と「選び直す」導線（選択は勝手に書き換えない） */
.work2v2-stale {
display: flex; gap: 10px; align-items: flex-start;
margin: 10px 0 14px; padding: 12px 14px;
background: #f3f7fb; border: 1px solid #dde6f0; border-radius: var(--radius-md);
}
.work2v2-stale > i { font-size: 1.1rem; line-height: 1.5; flex-shrink: 0; }
.work2v2-stale-body { flex: 1 1 auto; }
.work2v2-stale-body p { margin: 0; font-size: 0.84rem; line-height: 1.6; color: var(--color-neutral-700); }
.work2v2-stale-btn { margin-top: 10px; font-size: 0.82rem; padding: 7px 14px; }
/* ==========================================================
総合結果 印刷サイズ確定（EOF配置）
後方の非印刷ルール（.card .chara-emoji img{240px!important} 等）と
詳細度が同点でも、ソース最終尾に置くことで印刷時に確実に勝たせる。
========================================================== */
@media print {
/* P1(ワーク1)に1ページ割くので、キャラ画像は記念サイズ(150px)で残す
（後方の非印刷ルール .card .chara-emoji img{240px!important} を後勝ちで上書き）。 */
.result-congrats + .card .chara-emoji img,
.card .chara-emoji img,
.chara-emoji img {
width: 92px !important;
height: 92px !important;
}
/* デッド余白の削減: 画像化された .chara-emoji は 4.5rem のフォント行が
無情報の空白を生むので、印刷では行を潰す（画像は上の !important で維持）。 */
.chara-card { padding: 10px 16px !important; gap: 4px !important; }
.chara-emoji { font-size: 0 !important; line-height: 0 !important; margin-bottom: 6px !important; }
.chara-card::before { display: none !important; }
/* キャラのテキスト余白を締めてワーク1をP1に収める */
.chara-name { margin: 2px 0 !important; }
.chara-axis { margin: 0 !important; }
.chara-catchphrase { margin: 2px 0 !important; }
.chara-desc { margin: 2px 0 0 !important; line-height: 1.35 !important; }
.donut-chart-wrap, .donut-chart-wrap canvas {
max-width: 160px !important;
max-height: 160px !important;
margin: 0 auto !important;
}
/* 完了バナー圧縮: 後方 L2768 の .result-congrats-title{clamp…!important} / margin-top:12px を
後勝ちで上書きし、ワーク1をP1の1ページに収める。 */
.result-congrats { padding: 0 0 6px !important; }
.result-congrats-emoji { margin: 0 !important; }
.result-congrats-emoji i { font-size: 1.4rem !important; }
.result-congrats-title { font-size: 1.4rem !important; margin: 2px 0 !important; }
.result-congrats-sub { font-size: 0.8rem !important; margin: 0 !important; }
/* Safari 実機印刷の装飾バグ対策（金額が隠れる主因）:
.balance-summary::before は radial-gradient(rgba …,0.10) の飾り円だが、
Safari の印刷エンジンが半透明を無視して「黒縁の青い塗り円」として描画し、
収入/支出/貯蓄額の金額に被る（overflow:hidden も印刷で効かない）。飾りなので完全に消す。 */
.balance-summary::before, .balance-summary::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
}
/* 貯蓄額の緑丸＋白チェック(::before)なども同様に、balance-row 内の擬似要素を完全ゼロ化 */
.balance-row::before, .balance-row::after,
.balance-row.budget-ok::before, .balance-row.budget-over::before,
.balance-row.budget-ok::after, .balance-row.budget-over::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
background: none !important;
background-image: none !important;
}
/* 金額テキストが飾りに負けないよう可視色を明示（text-fill:transparent 継承対策も兼ねる） */
.balance-row span { -webkit-text-fill-color: currentColor !important; }
}