/* ==========================================================================
   かなさホーム 介護保険の支給額チェック /kanasa-home/check/（page-care-check.php）
   Figma 05 PC 65:2593（結果）・65:2720（認定前）／05 SP 242:5605・242:5860
   - PC は質問（左）と結果の箱（右・幅 440px）を横に並べ、高さをそろえる。SP は縦に積む
   - 選択肢は丸いボタン（p-care-check__chip。選ぶと緑）。SP は Q1 だけ1列、Q2・Q4 は2列（高さ 56px・文字 16px 太字）
   - 認定前（Q1「まだ受けていない」）は、結果の箱が白・緑の枠（is-before）、Q2〜Q4 は薄く（is-locked）
   - 見出し（c-page-header-kanasa）・ボタン（p-kanasa-button）・アイコン（c-kanasa-icon）は K-A のパーツと CSS。ここでは置き方だけ
   ========================================================================== */

.p-care-check {
	--focus-color: var(--kanasa-border-strong);

	background: var(--kanasa-bg-canvas);
	color: var(--kanasa-text-primary);
	font-family: var(--font-kanasa);
	letter-spacing: var(--ls-kanasa);
}

/* ---------- 本体（質問と結果） ---------- */
.p-care-check__body {
	display: flex;
	gap: var(--space-xl);
	align-items: stretch; /* 左右の高さをそろえる */
	padding-top: var(--space-md);
	padding-bottom: 96px; /* Figma 65:2626 の下の余白（トークンにない値） */
}

/* 質問の白い板 */
.p-care-check__form {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--space-xl);
	min-width: 0;
	padding: var(--space-2xl);
	background: var(--kanasa-bg-surface);
	border-radius: var(--kanasa-radius-box, 32px); /* Figma の角丸 32（layout.css のかなさの値） */
}

.p-care-check__question {
	display: flex;
	flex-direction: column;
	gap: 14px; /* Figma の間隔 */
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	transition: opacity 0.2s;
}

/* 認定前：Q2〜Q4 は薄くして押せなくする */
.p-care-check__question.is-locked {
	opacity: 0.4;
}

/* 質問の文（legend・label） */
.p-care-check__q {
	display: block;
	float: left; /* legend を fieldset の中の普通の箱として並べる */
	width: 100%;
	padding: 0;
	font: var(--text-kanasa-h4);
	letter-spacing: var(--ls-kanasa);
}

.p-care-check__q + * {
	clear: both;
}

/* legend は浮かせて並べているので、箱の gap が効かない。同じ間隔を下に足す（Q1・Q2・Q4 が選択肢と詰まって見えていた。2026-10-05 ユーザー指摘） */
legend.p-care-check__q {
	margin-bottom: 14px;
}

.p-care-check__note,
.p-care-check__locked-note {
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
}

/* 選択肢 */
.p-care-check__options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px; /* Figma の間隔 */
}

.p-care-check__chip {
	position: relative;
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: var(--space-sm) 20px var(--space-sm) 18px;
	font-weight: 700;
	font-size: 16px; /* 選択肢は PC・SP とも 16px（Figma の注記） */
	line-height: 1.5;
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-primary);
	background: var(--kanasa-bg-surface);
	border: 2px solid var(--kanasa-border-default);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.p-care-check__chip:hover {
	border-color: var(--kanasa-border-strong);
}

.p-care-check__chip.is-selected,
.p-care-check__chip:has(:checked) {
	color: var(--kanasa-text-on-green);
	background: var(--kanasa-bg-green-strong);
	border-color: var(--kanasa-border-strong);
}

.p-care-check__chip:has(:focus-visible) {
	outline: 3px solid var(--focus-color);
	outline-offset: 3px;
}

.p-care-check__chip:has(:disabled) {
	cursor: default;
}

.p-care-check__chip:has(:disabled):hover {
	border-color: var(--kanasa-border-default);
}

/* ラジオそのものは見せない（文字の箱を押して選ぶ。キーボードでも選べる） */
.p-care-check__radio {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}

.p-care-check__check {
	display: none;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.p-care-check__chip.is-selected .p-care-check__check,
.p-care-check__chip:has(:checked) .p-care-check__check {
	display: block;
}

/* 金額の入力（Q3・Q4 の「はい」） */
.p-care-check__input {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding: 0 20px; /* 上下の余白は入力欄の中に（押せる範囲を箱の高さいっぱいに） */
	border: 2px solid var(--kanasa-border-strong);
	border-radius: var(--radius-lg);
	background: var(--kanasa-bg-surface);
}

.p-care-check__input:focus-within {
	outline: 3px solid var(--focus-color);
	outline-offset: 3px;
}

.p-care-check__field {
	flex: 1 1 auto;
	align-self: stretch;
	min-width: 0;
	padding: var(--space-md) 0;
	font: var(--text-kanasa-h3);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-primary);
	background: transparent;
	border: 0;
	outline: 0;
}

.p-care-check__field::placeholder {
	color: var(--kanasa-text-secondary);
	opacity: 1;
}

.p-care-check__field:disabled {
	color: var(--kanasa-text-secondary);
}

.p-care-check__unit {
	flex-shrink: 0;
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
}

/* Q4「はい」：これまでに使った額 */
.p-care-check__paid {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.p-care-check__paid-label {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
}

/* ---------- 結果の箱 ---------- */
.p-care-check__result {
	flex: 0 0 440px;
	padding: 36px; /* Figma の内側の余白（トークンにない値） */
	color: var(--kanasa-text-on-green);
	background: var(--kanasa-bg-green-strong);
	border-radius: var(--kanasa-radius-box, 32px); /* Figma の角丸 32（layout.css のかなさの値） */
}

.p-care-check__result-main,
.p-care-check__result-before {
	display: flex;
	flex-direction: column;
	gap: 20px; /* Figma の間隔 */
}

.p-care-check__result-main[hidden],
.p-care-check__result-before[hidden] {
	display: none;
}

.p-care-check__result-title {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
}

.p-care-check__amount {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.p-care-check__amount-label {
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
}

.p-care-check__amount-value {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	align-items: baseline;
}

/* 支給される額：ページの中でいちばん大きい数字 */
.p-care-check__amount-number {
	font: var(--text-kanasa-number);
	letter-spacing: var(--ls-kanasa-number);
	font-variant-numeric: tabular-nums;
}

.p-care-check__amount-unit {
	font: var(--text-kanasa-h3);
	letter-spacing: var(--ls-kanasa);
}

/* 内訳の表（白い板。最後の行は線なし） */
.p-care-check__table {
	padding: var(--space-xs) 20px;
	color: var(--kanasa-text-primary);
	background: var(--kanasa-bg-surface);
	border-radius: 20px; /* Figma の角丸（トークンにない値） */
}

.p-care-check__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-md);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--kanasa-border-default);
}

.p-care-check__row:last-child {
	border-bottom: 0;
}

.p-care-check__row dt {
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
}

.p-care-check__row dd {
	margin: 0;
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	font-variant-numeric: tabular-nums;
}

.p-care-check__row--self dd {
	font: var(--text-kanasa-h3);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

.p-care-check__detail {
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
}

.p-care-check .p-care-check__button {
	width: 100%;
}

@media (min-width: 768px) {
	/* PC は幅いっぱいで、文字と矢印を中央に（Figma 65:2692） */
	.p-care-check .p-care-check__button {
		justify-content: center;
	}
}

/* 担当直通の電話 */
.p-care-check__meta {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: -10px; /* Figma ではボタンとの間が 20px（行の高さ 44px のぶんを詰める） */
	margin-bottom: -10px;
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	color: inherit;
	text-decoration: none;
}

.p-care-check__meta-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.p-care-check__meta:hover span {
	text-decoration: underline;
}

/* ---------- 認定前（白い箱・緑の枠） ---------- */
.p-care-check__result.is-before {
	color: var(--kanasa-text-primary);
	background: var(--kanasa-bg-surface);
	border: 3px solid var(--kanasa-border-strong);
}

.p-care-check__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	color: var(--kanasa-text-primary);
	background: var(--kanasa-bg-yellow);
	border-radius: 50%;
}

.p-care-check__before-title {
	font: var(--text-kanasa-h3);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

.p-care-check__before-text {
	font: var(--text-kanasa-body);
	letter-spacing: var(--ls-kanasa);
}

.p-care-check__steps {
	display: flex;
	flex-direction: column;
}

.p-care-check__step {
	display: flex;
	gap: 14px; /* Figma の間隔 */
	align-items: center;
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--kanasa-border-default);
}

.p-care-check__num {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font: var(--text-kanasa-label);
	color: var(--kanasa-text-on-green);
	background: var(--kanasa-bg-green-strong);
	border-radius: 50%;
}

.p-care-check__step-text {
	flex: 1 1 0;
	min-width: 0;
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
}

.p-care-check__result.is-before .p-care-check__meta {
	color: var(--kanasa-text-green);
}

/* タブレットの幅：結果の箱（440px）を横に置くと質問が狭くなるので、縦に積む */
@media (max-width: 1023px) {
	.p-care-check__body {
		flex-direction: column;
	}

	.p-care-check__form,
	.p-care-check__result {
		flex: none;
	}
}

/* ==========================================================================
   SP（Figma 05 SP 242:5605・242:5860）
   ========================================================================== */
@media (max-width: 767px) {
	.p-care-check__body {
		flex-direction: column;
		gap: 20px;
		padding-top: var(--space-xs);
		padding-bottom: var(--space-5xl);
	}

	.p-care-check__form {
		flex: none;
		gap: 28px; /* Figma の間隔 */
		padding: var(--space-xl) 20px 28px; /* SP: 24px 20px 28px */
		border-radius: var(--radius-xl);
	}

	/* Q2・Q4 は2列、Q1 は1列（「まだ受けていない」が2列に入らないため） */
	.p-care-check__options {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 11px;
	}

	.p-care-check__options--stack {
		grid-template-columns: minmax(0, 1fr);
	}

	.p-care-check__chip {
		min-height: 56px;
		padding: var(--space-sm) var(--space-xs);
	}

	.p-care-check__result {
		flex: none;
		padding: 28px 20px;
		border-radius: var(--radius-xl);
	}

	.p-care-check__result-main,
	.p-care-check__result-before {
		gap: var(--space-md);
	}

	.p-care-check__meta {
		margin-top: 0;
		margin-bottom: 0;
	}
}