/* ==========================================================================
   Rikon Money - 無料診断 /shindan/
   375px を基準にしたモバイルファースト。タップ領域は 44px 以上を確保する。
   ========================================================================== */

.page-shindan { background: var(--bg-soft); }

/* 診断ページでは下部固定CTAを出さない（診断の操作と競合するため） */
.page-shindan .sticky-cta { display: none; }
body.page-shindan { padding-bottom: 0; }

.shindan-wrap {
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
	padding: 18px 16px 56px;
}

.shindan-root:focus { outline: none; }

/* --- ボタン共通 ---------------------------------------------------------- */
.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 54px;
	padding: 14px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	/* 見出しと同じ角ゴシック。丸ゴはW4しか無く、太字が合成になる。 */
	font-family: var(--font-heading);
	font-size: 18.5px;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, transform .12s ease;
}
.sd-btn-primary { background: var(--teal-700); color: #fff; }
.sd-btn-primary:hover { background: var(--teal-800); }
.sd-btn-primary:active { transform: translateY(1px); }

/* --- イントロ ------------------------------------------------------------ */
.sd-intro {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: 26px 20px 24px;
	box-shadow: var(--shadow-s);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sd-intro-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--teal-700);
}
.sd-intro-title {
	font-size: clamp(21px, 5.6vw, 27px);
	font-weight: 800;
	line-height: 1.45;
}
.sd-intro-lead { font-size: 16.5px; color: var(--ink-2); line-height: 1.8; }

.sd-intro-notes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 2px 0 4px;
}
.sd-intro-notes li {
	position: relative;
	padding: 8px 10px 8px 30px;
	background: var(--teal-050);
	border-radius: var(--radius-s);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--teal-800);
	line-height: 1.5;
}
.sd-intro-notes li::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 50%;
	width: 6px;
	height: 11px;
	margin-top: -7px;
	border-right: 2px solid var(--teal-700);
	border-bottom: 2px solid var(--teal-700);
	transform: rotate(42deg);
}
.sd-intro-note { font-size: 14px; color: var(--ink-3); line-height: 1.7; }

/* --- 質問カード ---------------------------------------------------------- */
.sd-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: 16px 18px 22px;
	box-shadow: var(--shadow-s);
}

.sd-progress { margin-bottom: 20px; }
.sd-progress-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.sd-back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 44px;
	padding: 0 6px 0 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-2);
	cursor: pointer;
}
.sd-back::before {
	content: "";
	width: 8px;
	height: 8px;
	border-left: 2px solid var(--ink-2);
	border-bottom: 2px solid var(--ink-2);
	transform: rotate(45deg);
}
.sd-progress-count {
	font-size: 13px;
	font-weight: 700;
	color: var(--teal-700);
	font-variant-numeric: tabular-nums;
}
.sd-progress-bar {
	height: 5px;
	border-radius: 3px;
	background: var(--teal-050);
	overflow: hidden;
}
.sd-progress-fill {
	display: block;
	height: 100%;
	background: var(--teal-700);
	border-radius: 3px;
	transition: width .28s ease;
}

.sd-q-title {
	font-size: clamp(19px, 5vw, 23px);
	font-weight: 800;
	line-height: 1.5;
	margin-bottom: 6px;
}
.sd-q-help { font-size: 15.5px; color: var(--ink-2); line-height: 1.7; margin-bottom: 4px; }
.sd-q-note { margin-top: 12px; font-size: 14px; color: var(--ink-3); line-height: 1.7; }

.sd-q-body { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }

/* --- 選択肢 -------------------------------------------------------------- */
.sd-opts { display: flex; flex-direction: column; gap: 9px; }
.sd-opts-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.sd-opts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }

.sd-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	padding: 13px 16px;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease;
}
.sd-opt:hover { border-color: var(--teal-100); background: var(--teal-050); }
.sd-opt.is-selected {
	border-color: var(--teal-700);
	background: var(--teal-050);
	color: var(--teal-800);
}
.sd-opts-grid .sd-opt,
.sd-opts-2 .sd-opt { justify-content: center; text-align: center; padding-inline: 10px; }
.sd-opt-wide { justify-content: center; }

/* --- 入力欄 -------------------------------------------------------------- */
.sd-field { display: flex; flex-direction: column; gap: 9px; }
.sd-field-sub {
	padding: 14px;
	background: var(--bg-soft);
	border-radius: var(--radius);
	border: 1px solid var(--line);
}
.sd-field-label { font-size: 16px; font-weight: 700; }
.sd-field-help { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; margin-top: -4px; }

.sd-input-row { display: flex; align-items: center; gap: 10px; }
.sd-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 54px;
	padding: 12px 16px;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.sd-input:focus { outline: none; border-color: var(--teal-700); }
.sd-input-unit { font-size: 15px; font-weight: 700; color: var(--ink-2); flex: none; }

.sd-next { margin-top: 20px; }

/* ==========================================================================
   結果画面
   ========================================================================== */
.sd-result { display: flex; flex-direction: column; gap: 16px; }

.sd-summary {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: 22px 20px;
	box-shadow: var(--shadow-s);
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.sd-summary-eyebrow {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--teal-700);
}
.sd-summary-title {
	font-size: clamp(21px, 5.4vw, 27px);
	font-weight: 800;
	line-height: 1.45;
}
.sd-summary-lead { font-size: 16.5px; color: var(--ink-2); line-height: 1.75; }

.sd-notice {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-2);
	background: var(--peach-050);
	border: 1px solid var(--peach-200);
	border-radius: var(--radius-s);
	padding: 11px 13px;
}
.sd-disclaimer {
	font-size: 14px;
	color: var(--ink-3);
	line-height: 1.7;
	border-top: 1px solid var(--line);
	padding-top: 10px;
}

/* --- ダッシュボード ------------------------------------------------------ */
.sd-grid { display: grid; gap: 12px; }

.sd-rcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 17px;
	box-shadow: var(--shadow-s);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sd-rcard-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-rcard-title { font-size: 17px; font-weight: 800; }

.sd-badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
}
.sd-badge-ok   { background: var(--teal-700); color: #fff; }
.sd-badge-info { background: var(--teal-050); color: var(--teal-800); }
.sd-badge-warn { background: var(--peach-100); color: #8a5a26; }
.sd-badge-off  { background: #eef0ef; color: var(--ink-3); }

.sd-amount {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	padding: 12px 14px;
	background: var(--teal-050);
	border-radius: var(--radius-s);
}
.sd-amount-value {
	font-size: clamp(20px, 5.4vw, 24px);
	font-weight: 800;
	color: var(--teal-800);
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}
.sd-amount-unit { font-size: 14.5px; font-weight: 700; color: var(--teal-700); }
.sd-amount-note { font-size: 12px; color: var(--ink-3); margin-top: -4px; }

.sd-rcard-lead { font-size: 16px; color: var(--ink-2); line-height: 1.75; }

.sd-checks {
	background: var(--bg-soft);
	border-radius: var(--radius-s);
	padding: 12px 14px;
}
.sd-checks-title { font-size: 14px; font-weight: 700; color: var(--teal-800); margin-bottom: 6px; }

.sd-rlist { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; }
.sd-rlist li {
	position: relative;
	padding-left: 17px;
	font-size: 15.5px;
	color: var(--ink-2);
	line-height: 1.7;
}
.sd-rlist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 8px;
	height: 1.5px;
	background: var(--peach-200);
}

.sd-subcta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 700;
	color: var(--teal-700);
	text-decoration: none;
}
.sd-subcta::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--teal-700);
	border-right: 2px solid var(--teal-700);
	transform: rotate(45deg);
}
.sd-subcta:hover { text-decoration: underline; }

/* --- 争点 ---------------------------------------------------------------- */
.sd-issues {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px 17px;
	box-shadow: var(--shadow-s);
}
.sd-issues-title { font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.sd-issue-list { list-style: none; padding: 0; margin: 0; counter-reset: issue; display: flex; flex-direction: column; gap: 14px; }
.sd-issue { position: relative; padding-left: 34px; counter-increment: issue; }
.sd-issue::before {
	content: counter(issue);
	position: absolute;
	left: 0;
	top: 1px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--peach-100);
	color: #8a5a26;
	font-size: 12.5px;
	font-weight: 800;
}
.sd-issue-t { font-size: 16px; font-weight: 700; line-height: 1.6; margin-bottom: 2px; }
.sd-issue-b { font-size: 15.5px; color: var(--ink-2); line-height: 1.7; }

/* --- CTA ----------------------------------------------------------------- */
.sd-cta {
	background: linear-gradient(160deg, var(--teal-800), var(--teal-600));
	border-radius: var(--radius-l);
	padding: 18px 17px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.sd-cta .sd-btn-primary { background: #fff; color: var(--teal-800); }
.sd-cta .sd-btn-primary:hover { background: var(--peach-050); }
.sd-cta-note {
	font-size: 14px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .92);
	text-align: center;
}

.sd-restart {
	width: 100%;
	min-height: 50px;
	padding: 12px 18px;
	background: #fff;
	border: 1px solid var(--teal-100);
	border-radius: 999px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--teal-800);
	cursor: pointer;
}
.sd-restart:hover { background: var(--teal-050); }

.sd-footnote { font-size: 14px; color: var(--ink-3); line-height: 1.8; }

/* ==========================================================================
   タブレット以上
   ========================================================================== */
@media (min-width: 700px) {
	.shindan-wrap { padding: 32px 24px 72px; }
	.sd-intro, .sd-card { padding: 32px 30px; }
	.sd-intro-notes { grid-template-columns: repeat(4, 1fr); }
	.sd-grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
	.sd-cta { padding: 24px; }
	.sd-cta .sd-btn { width: auto; margin-inline: auto; padding-inline: 40px; }
	.sd-btn { width: auto; min-width: 280px; margin-inline: auto; }
	.sd-opts-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.sd-progress-fill, .sd-btn, .sd-opt { transition: none; }
}

/* --- 「次へ」の無効状態 --------------------------------------------------- */
.sd-next-wrap { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.sd-next { margin-top: 0; }
.sd-btn:disabled {
	background: #e8ebea;
	color: var(--ink-3);
	cursor: not-allowed;
}
.sd-btn:disabled:hover { background: #e8ebea; }
.sd-next-hint { font-size: 14px; color: var(--ink-3); text-align: center; line-height: 1.6; }

/* --- 診断の流れ（イントロ画面のみ表示） -------------------------------- */
/* 診断本体とは別のかたまりに見えるよう、上に間隔と区切りを置く。 */
.shindan-flow {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
	background: transparent;
}
.shindan-flow[hidden] { display: none; }

/* --- 始める前の説明（イントロ画面のみ） -------------------------------- */
.shindan-assure { margin-top: 8px; }
.shindan-assure .steps-cta { margin-top: 20px; }
.shindan-assure[hidden] { display: none; }

.assure-questions {
	display: grid;
	gap: 8px;
	margin: 0;
	padding-left: 1.3em;
	counter-reset: none;
}
.assure-questions li { font-size: 16px; line-height: 1.7; color: var(--ink); }
.assure-note { margin-top: 12px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }