/* =============================================================
かりれるくん｜カードローン診断 UI
- 全画面（スタート/設問/結果/紹介不可/AI診断ローディング）＝ニューモーフィズム（soft UI）。
原則・数式・トークン・a11y・QA は `neumorphism` スキルが正
（.agents/skills/neumorphism/ ＋ references/neumorphism-recipe.css）。
借りれるくん用トークンは karireru-design-system/references/diagnosis-flow-tokens.css。
凹凸フラットの使い分けは karireru-design-system/references/soft-ui-usage-matrix.md が正。
- 影は全てサーフェス由来の不透明色＋薄ボーダー（マテリアルの落ち影は使わない）。
- 2026-07-08 デザイン規則再構築フェーズ2適用（.docs/design_rules_rebuild/implementation_plan.md §6）:
影の完全不透明化／選択=凹への是正／情報表示セルのフラット化／アコーディオンのフラット化／
設問見出し=ラベル的強調の凸／角丸4段トークン化／色付きグローの除去。
- 配色の役割: 進行ボタン=緑 / 「診断！」最終CTA=オレンジ系グラデ / 申込みCTA=赤系グラデ。
いずれも凸影で表現し、ニューモーフィズムと違和感が出ないようにする。
- 色は SWELL 変数にフォールバック付きで追従（ハードコードしない）。
============================================================= */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start).result_page {
/* --- 配色（SWELL変数に追従。テキスト/グレー/ボーダー/CTAグラデ） --- */
--green: var(--color_main, #3fa34d);
--green-dark: var(--color_main_dark, #2f7a3a);
--text: var(--color_text, #333);
--gray: #6b6b6b; /* サーフェス比 約4.65:1（旧#999は約2.8:1でAA未達。2026-07-08是正） */
--gray2: #666;
--bar-fair: #9bcf8e; /* 相性あり段のバー塗り（淡い緑）。サイト側 .result_page の --green-light(α8%) と衝突しない専用名 */
--border: #e0e0e0;
--cta-gra: linear-gradient(100deg, #ea1924 0%, #f58600 100%); /* 申込みCTA（赤） */
--diagnose-gra:linear-gradient(100deg, #ffab2e 0%, #ff7a00 100%); /* 「診断！」ボタン（オレンジ） */
/* --- 設問フロー：ニューモーフィズム（neumorphism スキル／neupro 最適解 準拠） --- */
/* 借りれるくん用デザインルール ＝ karireru-design-system/references/diagnosis-flow-tokens.css。
リテーマは「surface / 影ペア(不透明) / accent」の差し替えで足りる（影スケールは導出で追従）。 */
--neu-surface: #ecf0f3; /* 明るい中性サーフェス（neupro準拠）。ページ・箱・要素で共有 */
--neu-shadow-dark: #b8c0cb; /* 右下の暗い影＝surfaceを約9%暗くした【不透明】色（2026-07-08: rgba半透明バグを是正） */
--neu-shadow-light: #ffffff; /* 左上の明るい影＝白寄りの【不透明】色（同上） */
--neu-border: #d6dde8; /* 薄ボーダー（surfaceと暗影の中間）。輪郭を締める＝洗練の核 */
--neu-accent: var(--green); /* アクセント＝塗り・選択文字・フォーカスのみ */
--neu-text: var(--text); /* 本文：サーフェスに対し WCAG AA */
/* 合成シャドウ（光源は左上で統一・blur=2×offset・不透明）。凸=raised / 凹=inset */
--neu-raised-sm: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
--neu-raised-md: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
--neu-raised-lg: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
--neu-raised-xl: 11px 11px 22px var(--neu-shadow-dark), -11px -11px 22px var(--neu-shadow-light); /* lg要素のhover用 */
--neu-inset-sm: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
--neu-inset-md: inset 2px 2px 5px var(--neu-shadow-dark), inset -3px -3px 7px var(--neu-shadow-light);
--neu-inset-lg: inset 4px 4px 9px var(--neu-shadow-dark), inset -5px -5px 11px var(--neu-shadow-light);
/* 角丸4段（soft-ui-usage-matrix.md §5）。生値の角丸は使わない */
--neu-radius-sm: 10px; /* 入力欄・フラットセマンティックボックス */
--neu-radius-md: 12px; /* フラット情報セル（回答内容/アドバイス/スコア）・kd-details */
--neu-radius-lg: 2em; /* 凸の大箱（kd-box/kd-card/kd-ai/kd-blocked/kd-modal/LINEバナー） */
--neu-radius-pill: 9999px; /* ボタン・選択肢・トラック/フィル・トグル */
/* フラット・セマンティックボックス（好相性/情報/注意）。design-tokens.css のセマンティックパレットと整合 */
--neu-flat-good-bg: #f1f9ee;
--neu-flat-good-border: rgba(63, 163, 77, .15);
--neu-flat-good-text: var(--green-dark);
--neu-flat-info-bg: #f3f8fd;
--neu-flat-info-border: rgba(61, 121, 213, .15);
--neu-flat-info-text: #2c5a9e;
--neu-flat-warning-bg: #fdf9ee;
--neu-flat-warning-border: rgba(240, 159, 77, .2);
--neu-flat-warning-text: #8a5a1e;
/* ヘッダ装飾 */
--green-pill: #4ba34d;
--mint: #daeae5;
--dot-yellow: #f6e05e;
max-width: 600px;
margin: 0 auto;
padding: 1.5em 1em 3em;
color: var(--neu-text);
/* 背景指定なし＝ホストページ(LP)の背景の上に、箱(kd-box=surface+薄ボーダー+raised-lg)が持ち上がる。 */
font-family: var(--swl-font_family, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif);
line-height: 1.7;
box-sizing: border-box;
}
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start).result_page *,
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start).result_page *::before,
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start).result_page *::after {
box-sizing: border-box;
}
/* ===== 共通ボタン（凸ピル。hoverで浮く／activeで沈む＝影で状態遷移） ===== */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .4em;
width: 100%; min-height: 44px; padding: .8em 1.2em;
border: 1px solid var(--neu-border); border-radius: var(--neu-radius-pill);
background: var(--neu-surface); color: var(--neu-text);
font-size: 1em; font-weight: bold; cursor: pointer;
text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
box-shadow: var(--neu-raised-md);
-webkit-tap-highlight-color: transparent;
}
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-btn:hover { transform: translateY(-2px); box-shadow: var(--neu-raised-lg); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-btn:active { transform: none; box-shadow: var(--neu-inset-md); } /* 2026-07-08: 押下=凹を追加 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-btn:focus { outline: none; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-btn:focus-visible { outline: 2px solid var(--neu-accent); outline-offset: 2px; }
/* primary＝緑塗り（設問の進行）。診断＝オレンジ系グラデ（最終CTA）。いずれも凸影のまま（マテリアル影は使わない） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-btn--primary { background: var(--neu-accent); color: #fff; border-color: transparent; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-btn--diagnose { background: var(--diagnose-gra); color: #fff; border-color: transparent; }
/* 戻る等＝サーフェス上の凸（控えめ）。文字色=gray2・太字（基底）＝「条件を変えて再診断」と統一 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-btn--ghost { background: var(--neu-surface); color: var(--gray2); }
/* 無効（未選択時の「診断！」等）：押せないことを示すくすんだ表示。背景/文字色/太字は再診断ボタン(ghost)に揃え、影は凹で沈める */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-btn:disabled,
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-btn[disabled] { background: var(--neu-surface); color: var(--gray2); border-color: var(--neu-border); box-shadow: none; cursor: not-allowed; transform: none; }
/* 進行ボタンのシェブロン（設問画面のみ。結果/エラーのボタンには付けない） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-question .kd-btn--primary,
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-question .kd-btn--diagnose { position: relative; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-question .kd-btn--primary::after,
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-question .kd-btn--diagnose::after {
content: ""; width: 7px; height: 7px;
border-top: 2px solid currentColor; border-right: 2px solid currentColor;
transform: rotate(45deg); margin-left: .2em; flex-shrink: 0;
}
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-nav .kd-btn { position: relative; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-nav .kd-btn::before {
content: ""; width: 7px; height: 7px;
border-bottom: 2px solid currentColor; border-left: 2px solid currentColor;
transform: rotate(45deg); margin-right: .2em; flex-shrink: 0;
}
/* ===== 診断シェル（本番LP date_test_wrap 準拠：ピルが箱に重なる＋ミント帯＋画像） ===== */
/* start / question 共用。診断中も常時このヘッダを表示。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-shell { text-align: center; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-diagnosis-head { position: relative; z-index: 2; display: inline-block; background: var(--green-pill); border-radius: 9999px; padding: 8px 20px 4px; overflow: hidden; margin: 0 0 -1.2em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-diagnosis-head span { position: relative; z-index: 2; color: #fff; font-weight: 500; letter-spacing: .2em; font-size: 16px; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-diagnosis-head span::before { content: ""; position: absolute; bottom: calc(100% + 1px); left: 1px; width: 128px; height: 3px; background-image: radial-gradient(circle, var(--dot-yellow) 0 1px, transparent 2px); background-size: 19px 3px; background-repeat: repeat-x; background-position: center; }
/* 箱：surface＋薄ボーダー＋raised-lg で持ち上げる（neupro のカードに準拠）。ミント帯を角丸に収めるため overflow:hidden */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-box { background: var(--neu-surface); border: 1px solid var(--neu-border); border-radius: var(--neu-radius-lg); overflow: hidden; text-align: left; box-shadow: var(--neu-raised-lg); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-box__top { background: var(--mint); padding: 1em 1em .8em; text-align: center; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-box__title-img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
/* ===== スタート本文（箱の中身） ===== */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-start { padding: 1.5em 1.3em 2em; text-align: center; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-start__lead { font-size: .95em; color: var(--gray2); margin: 0 0 1.6em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-start__btn { max-width: 340px; margin: 0 auto; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-start__note { font-size: .75em; color: var(--gray); margin: 1em 0 0; }
/* デバッグ関連スタイルは分離JS側が自前 inject する（公開CSSからデバッグ痕跡を消す）。 */
/* ===== 診断データなし案内（結果ページ直アクセス＝E1） ===== */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-nodata { text-align: center; padding: 2.6em 1.4em; color: var(--gray2); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-nodata__icon { font-size: 2.2em; line-height: 1; margin-bottom: .5em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-nodata__msg { font-size: .95em; color: var(--gray2); margin: 0 0 1.6em; line-height: 1.7; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-nodata .kd-btn { max-width: 340px; margin: 0 auto; }
/* ===== ローディング / エラー ===== */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-loading,
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-error { text-align: center; padding: 3em 1em; color: var(--gray2); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-spinner { width: 36px; height: 36px; margin: 0 auto 1em; border: 3px solid var(--neu-border); border-top-color: var(--neu-accent); border-radius: 50%; animation: kd-spin .8s linear infinite; }
@keyframes kd-spin { to { transform: rotate(360deg); } }
/* ===== AI診断ローディング（凹オーブの思考ドット＋凹進捗バー） ===== */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-ai { background: var(--neu-surface); border: 1px solid var(--neu-border); border-radius: var(--neu-radius-lg); box-shadow: var(--neu-raised-lg); padding: 2.6em 1.4em; text-align: center; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-ai__orb { width: 66px; height: 66px; margin: 0 auto 1.1em; border-radius: 50%; background: var(--neu-surface); box-shadow: var(--neu-inset-sm); display: flex; align-items: center; justify-content: center; gap: 6px; } /* 2026-07-08: 未定義 --neu-inset 参照バグを是正 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-ai__orb span { width: 9px; height: 9px; border-radius: 50%; background: var(--neu-accent); animation: kd-ai-bounce 1s infinite ease-in-out; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-ai__orb span:nth-child(2) { animation-delay: .15s; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-ai__orb span:nth-child(3) { animation-delay: .3s; }
@keyframes kd-ai-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-7px); opacity: 1; } }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-ai__title { font-size: 1.05em; font-weight: bold; color: var(--green-dark); margin: 0 0 .4em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-ai__msg { font-size: .85em; color: var(--gray2); margin: 0; min-height: 1.4em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-ai__bar { max-width: 280px; height: 8px; margin: 1.3em auto 0; background: var(--neu-surface); border: 1px solid var(--neu-border); border-radius: var(--neu-radius-pill); box-shadow: var(--neu-inset-sm); overflow: hidden; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-ai__bar-fill { display: block; height: 100%; width: 6%; border-radius: var(--neu-radius-pill); background: var(--neu-accent); transition: width 2.6s cubic-bezier(.25, .8, .25, 1); }
/* ===== 設問（ニューモーフィズム）。箱(kd-box)の中身なので背景/角丸は持たない ===== */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-question { padding: 1.4em 1em 1.7em; }
/* 進捗バー＝凹トラック＋緑フィル */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-progress { height: 1em; background: var(--neu-surface); border: 1px solid var(--neu-border); border-radius: var(--neu-radius-pill); overflow: hidden; box-shadow: var(--neu-inset-sm); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-progress__bar { display: block; height: 100%; background: var(--neu-accent); border-radius: var(--neu-radius-pill); transition: width .3s ease; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-progress__label { font-size: .78em; color: var(--gray2); margin: .5em 0; text-align: right; }
/* 設問テキスト＝凸カード（ラベル的強調・単色サーフェス）。強調はアクセント文字＋太字で（背景は単色を保つ） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-question__label { font-size: 1.05em; font-weight: bold; margin: 0 0 1em; border: 1px solid var(--neu-border); border-radius: 0.5em; padding: 5px; background: var(--neu-surface); box-shadow: var(--neu-raised-sm); } /* 2026-07-08: 凹→ラベル的強調の凸へ是正 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-question__label p{ padding: 0.5em 1em; line-height: 1.4; color: var(--green-dark); } /* グラデ帯は廃止し、文字強調に置き換え */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-question__help { font-size: .8em; color: var(--gray2); margin: 0 0 1.2em; }
/* 選択肢＝凸ピル（サーフェス同色）＋緑レ点。未選択=raised / 選択=inset(沈む)＋緑枠＋レ点（影＋非影キュー併用） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-options { display: flex; flex-direction: column; gap: .7em; margin: 1.2em 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-options--grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-options--grid-first { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-options--grid-first > .kd-option:first-child { grid-column: 1 / -1; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-option {
position: relative; display: flex; align-items: center; justify-content: center;
width: 100%; min-height: 44px; text-align: center;
padding: .7em 2em; /* 左右対称＝文字を真の中央に。レ点は絶対配置で左の余白内に収まる（2026-07-08: 左右非対称による右寄りを是正） */
background: var(--neu-surface); color: var(--neu-text); /* 2026-07-08: #fffからサーフェス同色へ是正。視認性は薄ボーダー＋凸影で担保 */
border: 1px solid var(--neu-border); border-radius: var(--neu-radius-pill);
font-size: .95em; font-weight: bold; line-height: 1.3; cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
box-shadow: var(--neu-raised-sm);
-webkit-tap-highlight-color: transparent;
}
/* 緑のレ点（選択時のみ点灯＝非影キュー。未選択時のゴースト表示は2026-07-08に廃止） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-option::before {
content: ""; position: absolute; left: 1.1em; top: calc(50% - 6px);
width: 6px; height: 11px;
border-right: 2px solid var(--neu-accent); border-bottom: 2px solid var(--neu-accent);
transform: rotate(45deg); opacity: 0; transition: opacity .2s ease;
}
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-option:not(.is-selected):hover { transform: translateY(-2px); box-shadow: var(--neu-raised-md); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-option:focus { outline: none; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-option:focus-visible { outline: 2px solid var(--neu-accent); outline-offset: 2px; }
/* 選択＝凹（押し込まれる）＋緑枠＋緑文字＋レ点点灯（2026-07-08: 「浮く」表現とグラデ背景を廃止） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-option.is-selected {
box-shadow: var(--neu-inset-md);
border-color: var(--neu-accent);
color: var(--green-dark); font-weight: bold;
background: var(--neu-surface);
}
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-option.is-selected::before { opacity: 1; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-option small{font-size: .8em;}
/* インライン追従（Q6→Q6-2 / Q10→Q10-2）の枠 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-follow { margin: .2em 0 0; padding: 1em 0 0; border-top: 1px dashed var(--neu-border); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-follow__label { font-size: 1em; font-weight: bold; margin: 0 0 .2em; line-height: 1.5; color: var(--green-dark); }
/* 入力欄＝凹ウェル（へこんだ入力） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-input { width: 100%; padding: .7em .9em; border: 1px solid var(--neu-border); border-radius: var(--neu-radius-sm); font-size: 16px; margin: .6em 0; background: var(--neu-surface); color: var(--neu-text); box-shadow: var(--neu-inset-sm); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-input:focus { outline: none; box-shadow: var(--neu-inset-sm), 0 0 0 2px var(--neu-accent); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-input--number { max-width: 140px; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-number-row { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; margin: .4em 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-field-label { font-size: .85em; color: var(--gray2); min-width: 5em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-unit { color: var(--gray2); font-size: .9em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-field-error { color: #c62828; font-size: .8em; margin: .3em 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-block-msg { color: #c62828; font-weight: bold; font-size: .92em; margin: .9em 0 0; white-space: pre-line; line-height: 1.6; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-nav { margin-top: 1.2em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-nav .kd-btn { width: auto; min-height: 44px; padding: .5em 1.4em; font-size: .85em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-question .kd-btn--primary,
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-question .kd-btn--diagnose { margin-top: 1.2em; }
/* ===== 結果（ニューモーフィズム：カード=raised＋薄ボーダー、バー/トラック=inset、スコア欄等の情報セル=flat） ===== */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-result { display: flex; flex-direction: column; gap: 1.2em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .result_title_region { text-align: center; margin: .5em 0 .3em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .result_title { font-size: 1.4em; font-weight: bold; color: var(--green); margin: 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-card { background: var(--neu-surface); border: 1px solid var(--neu-border); border-radius: var(--neu-radius-lg); box-shadow: var(--neu-raised-lg); overflow: hidden; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .fade-in { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .fade-in.is-visible { opacity: 1; transform: none; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .recommend_title { margin: 0; padding: .8em 1em; background: var(--green); color: #fff; font-size: 1.05em; font-weight: bold; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .recommend_block_inner { padding: 1.3em 1.2em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .recommend_other_block { padding: 1.1em 1.2em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .company_img_wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .8em; margin-bottom: 1em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-rank { font-size: 2em; font-weight: 900; color: var(--green); margin: 0; line-height: 1; min-width: 1.2em; }
/* バナー（アイキャッチ）＝A案準拠。社名の左に約80pxのサムネ */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .vendor_thumb { width: 80px; height: auto; margin: 0; padding: 0; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .vendor_thumb a { display: block; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .vendor_thumb img { width: 100%; height: auto; display: block; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .recommend_company_wrap { flex: 1; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .recommend_name { font-size: 1.3em; font-weight: bold; margin: 0; line-height: 1.3; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .company_type { display: inline-block; font-size: .72em; font-weight: bold; margin: 0 0 .35em; padding: .15em .6em; border-radius: 4px; letter-spacing: .03em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .company_type--major { background: #edf6ee; color: var(--green-dark); border: 1px solid rgba(63, 163, 77, .25); } /* 大手＝ブランド緑 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .company_type--minor { background: #eef4fc; color: #2c5a9e; border: 1px solid rgba(61, 121, 213, .22); } /* 中小＝青 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .user_recommend_wrap { gap: 1em; margin-bottom: 1.2em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .user_recommend_wrap dl { flex: 1; margin: 0; text-align: center; background: var(--neu-surface); border: 1px solid var(--neu-border); border-radius: var(--neu-radius-md); padding: .8em .4em; } /* 2026-07-08: 凹→フラットへ是正（ニュートラルな情報表示） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .user_recommend_wrap dt { font-size: .78em; color: var(--gray2); margin-bottom: .25em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .point_text { font-size: 2em; font-weight: 900; color: var(--green); margin: 0; line-height: 1; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .fs-small { font-size: .5em; font-weight: bold; margin-left: 1px; }
/* 即日系の融資スピード（カウントアップ非対象）。数字枠と高さ・色を揃え、「最短」を小さく前置き。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .point_text--static { font-weight: 900; color: var(--green); margin: 0; line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: .12em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-funding-pre { font-size: .7em; font-weight: bold; color: var(--gray2); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-funding-label { font-size: 2em; }
/* （相性バッジ matchBadge は 2026-06-29 削除＝マッチスコアは点のみ。
「あなたに合う理由」チップは 2026-06-26 削除。社会的証明 .kd-social は 2026-06-29 削除。CSSも除去。） */
/* バー */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .user_bar_wrap { margin: 1.2em 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-bars__title { font-size: .95em; font-weight: bold; margin: 0 0 .7em; color: var(--text); }
/* 注記はグラフの下（2026-06-29 タイトル直下から移動）。上に余白・下は詰める。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-bars__note { font-size: .68em; color: var(--gray); margin: .7em 0 0; line-height: 1.5; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .bar_block:not(:last-child) { margin-bottom: 1em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .bar_title_block { margin-bottom: .3em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .bar_title { margin: 0; font-size: .85em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .bar_com { margin: 0; font-size: .8em; color: var(--green-dark); font-weight: bold; }
/* 段階で色味を変える＝全軸を「良い」に見せない（低い軸は控えめ表現）。best/good は既定の緑。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .bar_com--fair { color: var(--gray2); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .bar_com--low { color: var(--gray); font-weight: normal; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .bar { width: 100%; height: 10px; background: var(--neu-surface); border: 1px solid var(--neu-border); box-shadow: var(--neu-inset-sm); border-radius: var(--neu-radius-pill); overflow: hidden; margin: 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .bar span { display: block; height: 100%; width: 0; border-radius: var(--neu-radius-pill); background: var(--neu-accent); transition: width 1.2s cubic-bezier(.25, .8, .25, 1); }
/* バーの塗りも段階で（相性あり＝淡い緑、控えめ＝グレー）。best/good はブランド緑（既定）。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .bar_block--fair .bar span { background: var(--bar-fair, #9bcf8e); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .bar_block--low .bar span { background: var(--gray, #9aa6b2); }
/* ===== 分析レポート（4軸セグメント棒グラフ） ===== */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-report { margin: 1.5em 0 .5em; padding: 1.3em 1.2em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-report__title { display: flex; align-items: center; gap: .45em; margin: 0 0 1.2em; font-size: 1em; font-weight: bold; color: var(--green-dark); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-report__axis { margin-bottom: 1.4em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-report__axis:last-child { margin-bottom: 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-report__axis-title { font-size: .85em; font-weight: bold; color: var(--text); margin: 0 0 .4em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-report__source { font-size: .72em; color: var(--gray2); margin: .9em 0 0; padding-top: .8em; border-top: 1px solid var(--neu-border); line-height: 1.5; text-align: center; }
/* ===== アドバイス系のフェード・アコーディオン（閉時は薄く続きが見える＋「続きを読む」） ===== */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade { margin-top: 1.2em; }
/* 閉時: 固定高でクリップ（チラ見せ）。開時(is-open): max-height を実値/解除して全表示。position:relative＝フェードの基準。 */
/* 閉時のチラ見せ高さ：タイトル＋サマリーテーブルを越えて、アドバイス本文が2〜3行覗く高さ。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade__body { position: relative; max-height: 18em; overflow: hidden; transition: max-height .45s cubic-bezier(.25, .8, .25, 1); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade.is-open .kd-fade__body { max-height: none; }
/* アコーディオン先頭ブロックの区切り（border-top/上余白）は不要＝本文の頭になるため消す。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade__body > :first-child { margin-top: 0; padding-top: 0; border-top: none; }
/* 下端フェード（閉時のみ表示）。チラ見せ窓の下端に重ね、サーフェス色へ溶かして「続きがある」ことを示す。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5em; pointer-events: none; background: linear-gradient(to bottom, rgba(236, 240, 243, 0), var(--neu-surface) 92%); transition: opacity .3s ease; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade.is-open .kd-fade__body::after { opacity: 0; }
/* 中身が短くチラ見せ不要なとき（runAnimations が判定）＝全表示・フェードとボタンを出さない。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade.is-short .kd-fade__body { max-height: none; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade.is-short .kd-fade__body::after,
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade.is-short .kd-fade__toggle { display: none; }
/* 「続きを読む / 閉じる」ボタン（凸ピル・中央）。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade__toggle { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; margin-top: .6em; padding: .6em 1em; border: 1px solid var(--neu-border); border-radius: var(--neu-radius-pill); background: var(--neu-surface); box-shadow: var(--neu-raised-sm); color: var(--green-dark); font-size: .82em; font-weight: bold; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .2s ease, transform .2s ease; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade__toggle:hover { box-shadow: var(--neu-raised-md); transform: translateY(-1px); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade__toggle:active { box-shadow: var(--neu-inset-sm); transform: none; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade__toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade__toggle-icon { font-size: .8em; line-height: 1; transition: transform .3s ease; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade.is-open .kd-fade__toggle-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade__body,
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade__body::after,
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-fade__toggle-icon { transition: none; }
}
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-seg__bar { display: flex; height: 14px; border-radius: var(--neu-radius-pill); overflow: hidden; background: var(--neu-surface); border: 1px solid var(--neu-border); box-shadow: var(--neu-inset-sm); gap: 1px; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-seg__item { height: 100%; background: rgba(166, 175, 188, .18); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-seg__item:first-child { border-radius: var(--neu-radius-pill) 0 0 var(--neu-radius-pill); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-seg__item:last-child { border-radius: 0 var(--neu-radius-pill) var(--neu-radius-pill) 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-seg__item--active { background: var(--green); } /* 2026-07-08: 色付きグロー(inset)を除去。塗りのみで表現 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-seg__labels { display: flex; margin-top: .25em; gap: 1px; }
/* ラベルは折り返し可（スマホで狭いセグメントでも職業名が切れないように。2026-06-26：nowrap+ellipsis を廃止）。 */
/* 狭いセグメント（pct小）でもラベルが読めるよう min-width で下限を確保（flex:pct は維持しつつ潰れ過ぎを防ぐ）。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-seg__lbl { font-size: .65em; color: var(--gray); text-align: center; white-space: normal; overflow-wrap: anywhere; word-break: normal; line-height: 1.25; min-width: 2.8em; display: flex; flex-direction: column; align-items: center; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-seg__lbl--active { color: var(--green-dark); font-weight: bold; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-seg__marker { color: var(--green); font-size: .85em; line-height: 1; }
/* ===== 借入希望額のアドバイス（分析レポート内） ===== */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice { margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--neu-border); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__title { font-size: .95em; font-weight: bold; color: var(--text); margin: 0 0 .8em; }
/* サマリーは各項目を四角で囲うカード（マッチスコア/推定限度額＝.user_recommend_wrap dl と同じデザイン規則）。
3〜4列になるため flex-wrap で折り返し（PC=横一列、スマホ=2列）。min-width で各枠の最小幅を確保。 */
/* サマリーは2列（2026-06-29）。希望額・限度額の2枠を横並び（スマホでも2列維持）。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__summary { display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: 1em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__cell { flex: 1 1 40%; min-width: 6.5em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25em; text-align: center; background: var(--neu-surface); border: 1px solid var(--neu-border); border-radius: var(--neu-radius-md); padding: .7em .4em; } /* 2026-07-08: 凹→フラットへ是正 */
/* ラベルは指定位置で改行（\n）を保持。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__cell-label { font-size: .72em; color: var(--gray2); line-height: 1.3; overflow-wrap: anywhere; white-space: pre-line; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__cell-value { font-size: 1.3em; font-weight: 900; color: var(--green); line-height: 1.1; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__label { display: inline-block; font-size: .7em; font-weight: bold; padding: .15em .7em; border-radius: 4px; margin-bottom: .6em; letter-spacing: .05em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__label--warning { background: rgba(240, 159, 77, .18); color: #8a5a1e; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__label--info { background: rgba(61, 121, 213, .15); color: #2c5a9e; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__label--good { background: rgba(63, 163, 77, .15); color: var(--green-dark); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__box { padding: .9em 1em; border-radius: var(--neu-radius-sm); font-size: .82em; line-height: 1.7; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__box p { margin: 0 0 .6em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__box p:last-child { margin-bottom: 0; }
/* フラット・セマンティックボックス（soft-ui-usage-matrix.md §4）のトークンを参照 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__box--warning { background: var(--neu-flat-warning-bg); border: 1px solid var(--neu-flat-warning-border); color: var(--neu-flat-warning-text); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__box--info { background: var(--neu-flat-info-bg); border: 1px solid var(--neu-flat-info-border); color: var(--neu-flat-info-text); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__box--good { background: var(--neu-flat-good-bg); border: 1px solid var(--neu-flat-good-border); color: var(--neu-flat-good-text); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__box strong { font-weight: 700; } /* 長文の重要箇所を強調（色はボックスのテーマ色を継承） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-advice__footer { font-size: .68em; color: var(--gray); margin-top: .8em; line-height: 1.5; }
/* ===== 利用実績に基づくアドバイス（借入希望額アドバイスの下・複数ブロック縦並び） ===== */
/* ボックス本体／ラベル配色は .kd-advice__box--* / .kd-advice__label--* を流用（クラス併用）。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-usage { margin-top: 1.4em; padding-top: 1.3em; border-top: 1px solid var(--neu-border); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-usage__title { font-size: .95em; font-weight: bold; color: var(--text); margin: 0 0 .9em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-usage .kd-advice__box + .kd-advice__box { margin-top: .8em; } /* ケース複数該当時の間隔 */
/* ===== 属性比較マップ（密度ランク棒グラフ・1位カードのみ） ===== */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap { margin: 1.2em 0 0; padding-top: 1.2em; border-top: 1px solid var(--neu-border); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__title { font-size: .95em; font-weight: bold; color: var(--text); margin: 0 0 .3em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__sub { font-size: .75em; color: var(--gray2); margin: 0 0 1.2em; line-height: 1.5; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-density { padding: 0 .2em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-density__bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-bottom: 2px; border-bottom: 2px solid var(--neu-border); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-density__col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-density__bar { width: 100%; border-radius: 4px 4px 0 0; background: rgba(166, 175, 188, .28); transition: height .8s cubic-bezier(.25, .8, .25, 1); min-height: 2px; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-density__col--active .kd-density__bar { background: var(--green); } /* 2026-07-08: 色付きグロー(box-shadow)を除去。塗りのみで表現 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-density__indicator { display: flex; gap: 6px; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-density__indicator-cell { flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 1.6em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-density__marker { color: var(--green); font-size: .7em; line-height: 1; margin-top: 2px; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-density__marker-label { font-size: .65em; color: var(--green-dark); font-weight: bold; white-space: nowrap; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-density__axis { display: flex; justify-content: space-between; margin-top: .5em; font-size: .65em; color: var(--gray); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-density__axis-center { font-size: .65em; color: var(--gray); text-align: center; margin: .15em 0 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__verdict { display: flex; align-items: center; gap: .5em; margin-top: 1.2em; padding: .7em 1em; background: var(--neu-flat-good-bg); border: 1px solid var(--neu-flat-good-border); border-radius: var(--neu-radius-sm); font-size: .82em; color: var(--neu-flat-good-text); line-height: 1.5; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__verdict-icon { font-size: 1.1em; flex-shrink: 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__verdict-text { font-weight: bold; }
/* 「ここに位置する理由」＝4軸のユーザー該当ブラケットと通過者中の割合（B案・2026-06-26）。 */
/* kd-details（概要・注釈と同じアコーディオン）の中身として表示するため、枠はdetails側に任せ本文はpaddingのみ。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__factors { padding: 0 1em 1em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__factor-list { list-style: none; margin: 0; padding: 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__factor { display: flex; justify-content: space-between; align-items: baseline; gap: .8em; font-size: .8em; padding: .35em 0; border-bottom: 1px dashed var(--neu-border); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__factor:last-child { border-bottom: none; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__factor-label { color: var(--text); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__factor-pct { color: var(--green-dark); font-weight: bold; white-space: nowrap; flex-shrink: 0; }
/* 少数派の軸はグレーで控えめに（多数派と見分け＝「珍しい」ことが伝わる。不利の意味ではない）。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__factor--minority .kd-attrmap__factor-pct { color: var(--gray2); font-weight: normal; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__factors-note { font-size: .72em; color: var(--gray2); margin: .6em 0 0; line-height: 1.5; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-attrmap__caveat { font-size: .68em; color: var(--gray); margin-top: 1em; line-height: 1.5; }
/* 企業概要 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-details { border: 1px solid var(--neu-border); border-radius: var(--neu-radius-md); margin: 1em 0; background: var(--neu-surface); } /* 2026-07-08: 凹→フラットへ是正。開閉はネイティブ矢印の向きのみで表現 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-details summary { padding: .7em 1em; cursor: pointer; font-size: .9em; font-weight: bold; color: var(--gray2); }
/* 概要は2列テーブル（ラベル左=th／値右=td、行ごとに区切り線）＝A案準拠。dl/dd→table/th/td に変更（2026-06-26）。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-spec { width: calc(100% - 2em); margin: 0 1em 1em; border-collapse: collapse; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-spec__row { border-bottom: 1px solid var(--border); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-spec__row:last-child { border-bottom: none; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-spec th { font-size: .78em; color: var(--gray2); font-weight: normal; text-align: left; vertical-align: middle; white-space: nowrap; padding: .6em 1em .6em 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-spec td { font-weight: bold; font-size: .92em; text-align: right; vertical-align: middle; padding: .6em 0; }
/* テーマ(SWELL)の table 既定（背景・縞・セル罫線）を打ち消す。行の区切り線のみ自前で出す。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-spec, :is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-spec tr, :is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-spec th, :is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-spec td { background: transparent; border-left: none; border-right: none; border-top: none; }
/* 概要＋注釈の2アコーディオンをまとめる枠 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-details-group { margin: 1em 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-details-group .kd-details { margin: 0 0 .6em; }
/* 注釈本文（ACF由来のHTMLを描画。改行は
等で表現） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-caveat { margin: 0; padding: 0 1em 1em; font-size: .78em; color: var(--gray2); line-height: 1.6; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-caveat :is(p, span, small, br) { font-size: inherit; }
/* CTA（申込み＝赤系グラデ。結果ページ専用） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .button_wrap { margin-top: 1.2em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .test_button { margin: 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .test_button.w100 { width: 100%; }
/* 申込みCTA：配色は赤グラデのまま、影はニューモーフィズムの凸（マテリアル落ち影は使わない） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-cta { display: flex; align-items: center; justify-content: center; gap: .4em; padding: 1em; border: 1px solid transparent; border-radius: var(--neu-radius-pill); font-weight: bold; font-size: 1.05em; color: #fff; text-decoration: none; background: var(--cta-gra); box-shadow: var(--neu-raised-md); transition: transform .2s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-cta:hover { transform: translateY(-2px); box-shadow: var(--neu-raised-lg); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-cta:active { transform: none; box-shadow: var(--neu-inset-md); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-cta:focus { outline: none; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-cta:focus-visible { outline: 2px solid #ea1924; outline-offset: 2px; }
/* 2〜3位カード */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-other-score { display: flex; flex-direction: column; align-items: center; gap: .25em; text-align: center; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-other-score .point_text { font-size: 1.5em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .recommend_other_block .company_img_wrap { margin-bottom: .8em; }
/* 紹介不可 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-blocked { background: var(--neu-surface); border: 1px solid var(--neu-border); border-radius: var(--neu-radius-lg); padding: 2.2em 1.4em; text-align: center; box-shadow: var(--neu-raised-lg); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-blocked__icon { font-size: 2.4em; margin-bottom: .3em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-blocked__msg { white-space: pre-line; color: var(--text); font-size: 1em; margin: 0 0 1.6em; line-height: 1.6; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-result__again { margin-top: .5em; }
/* ===== あなたの回答内容（結果トップ：主要4項目＋「もっと見る」→モーダル全件） ===== */
/* カードは結果カードと同じ raised サーフェス。中の各項目はニュートラルな情報表示＝flat（薄ボーダーのみ）。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-answers { padding: 1.2em 1.2em 1.3em; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-answers__title { display: flex; align-items: center; gap: .45em; margin: 0 0 .9em; font-size: 1em; font-weight: bold; color: var(--green-dark); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-answers__icon, :is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-sec-icon { display: inline-flex; line-height: 0; color: var(--green); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-answers__icon svg, :is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-sec-icon svg { width: 1.05em; height: 1.05em; }
/* 2列グリッド。ラベル小（gray2）／値は太字で本文色（サーフェスに対しAA） */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-answers__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin: 0; }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-answers__item { margin: 0; padding: .55em .85em; background: var(--neu-surface); border: 1px solid var(--neu-border); border-radius: var(--neu-radius-md); } /* 2026-07-08: 凹→フラットへ是正 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-answers__item dt { margin: 0 0 .15em; font-size: .78em; color: var(--gray2); }
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-answers__item dd { margin: 0; font-size: .92em; font-weight: bold; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
/* 「もっと見る」＝控えめな凸ピル（ghostベース）。中身幅で右下寄せ（left margin auto で右端へ）。 */
:is(#karireru-diagnosis-app, .karireru-diagnosis-app-start) .kd-answers__more { display: flex; width: -moz-fit-content; width: fit-content; max-width: 100%; min-height: 40px; margin: 1.1em 0 0 auto; padding: .5em 1.4em; font-size: .8em; }
/* ===== モーダル（回答全件）。native