/* ==========================================================================
   かなさホーム トップ（page-kanasa-home.php。Figma 05 PC 54:1214 ／ SP 240:12939）
   欄: ヒーロー → お悩み → 介護保険 → 使える工事 → 選ばれる理由・担当 → 役立つコラム・Instagram → ご依頼の流れ → よくある質問
   - 各欄は上下 120px（SP 56px）・見出しから中身まで 56px（SP 28px）。横に並ぶカードは高さをそろえる
   - ヒーローは PC（1280px 以上）で写真と吹き出しを右に重ねる。それより狭い幅は写真を上・文を下（SP の形）
   ========================================================================== */

/* ==========================================================================
   ヒーロー（Figma p-kanasa-hero 54:1245 ／ SP 240:12998）
   ========================================================================== */
.p-kanasa-hero {
	position: relative;
	overflow: hidden;
	background: var(--kanasa-bg-canvas);
}

.p-kanasa-hero__inner {
	position: relative;
	width: 100%;
	max-width: calc(1200px + var(--kanasa-gutter) * 2);
	min-height: 720px;
	margin-inline: auto;
	padding: 120px var(--kanasa-gutter) 38px;
}

.p-kanasa-hero__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 560px;
	max-width: 100%;
}

.p-kanasa-hero__label {
	display: inline-flex;
	gap: var(--space-xs);
	align-items: center;
	padding: 6px var(--space-md);
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	background: var(--kanasa-bg-yellow);
	border-radius: var(--radius-full);
}

.p-kanasa-hero__label-icon {
	width: 16px;
	height: 16px;
}

.p-kanasa-hero__catch {
	align-self: stretch; /* 中身の幅に合わせると、字間のぶん幅が足りず「自宅の／お悩みは」「ありま／せんか？」と決めた改行の手前で折れていた（2026-10-05） */
	margin-top: 20px;
	font: var(--text-kanasa-catch);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

.p-kanasa-hero__lead {
	align-self: stretch;
	margin-top: var(--space-lg);
	font: var(--text-kanasa-lead);
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

/* 写真・吹き出し（PC は 1440px の Figma の位置から。中身の幅の真ん中から 20px 左を基準に置く。
   1440px より狭いときは、吹き出しが画面の右からはみ出さないように左へ寄せる） */
.p-kanasa-hero__visual {
	position: absolute;
	top: 60px;
	left: min(50% - 20px, 100% - 708px);
	width: 700px;
	height: 600px;
}

.p-kanasa-hero__circle {
	position: absolute;
	top: -120px;
	left: 60px;
	width: 760px;
	height: 760px;
	background: var(--kanasa-bg-green-soft);
	border-radius: 50%;
}

.p-kanasa-hero__photo,
.p-kanasa-hero__photo-sub {
	position: absolute;
	overflow: hidden;
}

.p-kanasa-hero__photo {
	top: 10px;
	left: 120px;
	width: 520px;
	height: 560px;
	border-radius: var(--kanasa-radius-panel);
}

.p-kanasa-hero__photo-sub {
	top: 380px;
	left: 0;
	width: 220px;
	height: 220px;
	border: 8px solid var(--kanasa-bg-surface);
	border-radius: 50%;
}

.p-kanasa-hero__photo img,
.p-kanasa-hero__photo-sub img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-kanasa-hero__bubble {
	position: absolute;
	padding: var(--space-sm) 18px;
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	white-space: nowrap;
	background: var(--kanasa-bg-surface);
	border-radius: 20px;
	box-shadow: var(--kanasa-shadow-bubble);
}

.p-kanasa-hero__bubble--1 {
	top: 50px;
	left: 60px;
}

.p-kanasa-hero__bubble--2 {
	top: 530px;
	left: 480px;
}

.p-kanasa-hero__bubble--3 {
	top: 0;
	left: 500px;
}

/* 1279px 以下: 写真を上・文を下（Figma SP 240:12998 の形） */
@media (max-width: 1279px) {
	.p-kanasa-hero__inner {
		display: flex;
		flex-direction: column;
		gap: var(--space-lg);
		min-height: 0;
		padding: 20px var(--kanasa-gutter) var(--kanasa-section-py);
	}

	.p-kanasa-hero__body {
		width: 100%;
		max-width: 640px;
		margin-inline: auto;
	}

	.p-kanasa-hero__visual {
		position: relative;
		top: auto;
		left: auto;
		order: -1;
		width: 335px;
		height: 340px;
		margin-inline: auto;
	}

	.p-kanasa-hero__circle {
		top: -24px;
		left: 62px;
		width: 300px;
		height: 300px;
	}

	.p-kanasa-hero__photo {
		top: 26px;
		left: 99px;
		width: 236px;
		height: 272px;
		border-radius: var(--kanasa-radius-card);
	}

	.p-kanasa-hero__photo-sub {
		top: 206px;
		left: 4px;
		width: 116px;
		height: 116px;
		border-width: 6px;
	}

	.p-kanasa-hero__bubble {
		padding: 10px 14px;
		font: 500 14px/1.9 var(--font-kanasa); /* Kanasa/SP/Body-S（1279px 以下の幅でも SP と同じ大きさ） */
		letter-spacing: var(--ls-kanasa);
	}

	.p-kanasa-hero__bubble--1 {
		top: 0;
		left: 0;
	}

	.p-kanasa-hero__bubble--2 {
		top: 292px;
		left: 147px;
	}

	.p-kanasa-hero__bubble--3 {
		top: 122px;
		left: 161px;
	}
}

/* 375px より狭い画面では、写真と吹き出しの組を少し縮める */
@media (max-width: 374px) {
	.p-kanasa-hero__visual {
		zoom: 0.89;
	}
}

@media (max-width: 767px) {
	.p-kanasa-hero__label {
		padding: 6px var(--space-sm);
	}

	.p-kanasa-hero__catch,
	.p-kanasa-hero__lead {
		margin-top: var(--space-md);
	}

	.p-kanasa-hero__buttons {
		flex-direction: column;
		gap: var(--space-sm);
		align-self: stretch;
		margin-top: var(--space-lg);
	}

	.p-kanasa-hero__buttons .p-kanasa-button {
		min-height: 60px;
		padding: 10px 10px 10px var(--space-xl);
	}
}

/* ==========================================================================
   こんなお悩みありませんか？（Figma p-kanasa-worries 54:1272。濃い緑の面）
   ========================================================================== */
.p-kanasa-worries {
	padding-block: var(--kanasa-section-py);
	background: var(--kanasa-bg-green-strong);
}

.p-kanasa-worries__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	width: 100%;
}

.p-kanasa-worries__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-xl);
	background: var(--kanasa-bg-surface);
	border-radius: var(--kanasa-radius-card);
}

.p-kanasa-worries__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	color: var(--kanasa-text-green);
	background: var(--kanasa-bg-green-soft);
	border-radius: 50%;
}

.p-kanasa-worries__icon .c-kanasa-icon {
	width: 26px;
	height: 26px;
}

.p-kanasa-worries__text {
	font: var(--text-kanasa-h4);
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-worries__message {
	font: var(--text-kanasa-h3);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-on-green);
	text-align: center;
}

/* ==========================================================================
   介護保険で、工事費用の7〜9割が支給されます（Figma p-kanasa-insurance 54:1294）
   ========================================================================== */
.p-kanasa-insurance {
	padding-block: var(--kanasa-section-py);
	background: var(--kanasa-bg-canvas);
}

.p-kanasa-insurance__lead {
	max-width: 720px;
	font: var(--text-kanasa-lead);
	letter-spacing: var(--ls-kanasa);
	text-align: center;
}

.p-kanasa-insurance__numbers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	width: 100%;
}

.p-kanasa-insurance__number {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	align-items: center;
	justify-content: center;
	padding: 30px; /* 枠線 2px の内側で 32px */
	text-align: center;
	background: var(--kanasa-bg-surface);
	border: 2px solid var(--kanasa-border-default);
	border-radius: var(--kanasa-radius-card);
}

.p-kanasa-insurance__number-label {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
}

.p-kanasa-insurance__number-value {
	display: flex;
	gap: var(--space-2xs);
	align-items: baseline;
	color: var(--kanasa-text-green);
	white-space: nowrap; /* 「20」「着工前」の途中で折り返さない（狭い幅では下のタブレットの指定で字を小さく） */
}

.p-kanasa-insurance__number-big {
	font: var(--text-kanasa-number);
	letter-spacing: var(--ls-kanasa-number);
}

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

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

/* 支給額チェックの見本（左に説明とボタン、右に計算の見本。SP は 説明 → 見本 → ボタン） */
.p-kanasa-insurance__check {
	display: grid;
	grid-template-areas:
		"text mock"
		"button mock";
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: var(--space-sm) var(--space-3xl);
	align-items: center;
	width: 100%;
	padding: var(--space-2xl) var(--space-3xl);
	color: var(--kanasa-text-on-green);
	background: var(--kanasa-bg-green-strong);
	border-radius: var(--kanasa-radius-box);
}

.p-kanasa-insurance__check-text {
	grid-area: text;
	align-self: end;
}

.p-kanasa-insurance__check-title {
	font: var(--text-kanasa-h2);
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-insurance__check-lead {
	margin-top: var(--space-sm);
	font: var(--text-kanasa-body);
	letter-spacing: var(--ls-kanasa);
}

.p-kanasa-insurance__check-button {
	grid-area: button;
	align-self: start;
}

.p-kanasa-insurance__check-mock {
	display: flex;
	grid-area: mock;
	flex-direction: column;
	gap: 14px; /* Figma の値（トークンにない） */
	padding: 28px;
	color: var(--kanasa-text-primary);
	background: var(--kanasa-bg-surface);
	border-radius: var(--radius-xl);
}

.p-kanasa-insurance__mock-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.p-kanasa-insurance__row {
	display: flex;
	gap: var(--space-md);
	align-items: baseline;
	justify-content: space-between;
}

.p-kanasa-insurance__row dt,
.p-kanasa-insurance__mock-note {
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
}

.p-kanasa-insurance__row dd {
	margin: 0;
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	white-space: nowrap; /* 金額は折り返さない（320px で「180,000／円」と折れないように。項目名のほうを折り返す） */
}

.p-kanasa-insurance__row--result {
	padding-top: 14px;
	border-top: 2px solid var(--kanasa-border-default);
}

.p-kanasa-insurance__row--result dd {
	font: var(--text-kanasa-h2);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

.p-kanasa-insurance__note {
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
	text-align: center;
}

/* ==========================================================================
   介護保険で使える工事（Figma p-kanasa-works-type 54:1343）
   ========================================================================== */
.p-kanasa-works-type {
	padding-block: var(--kanasa-section-py);
	background: var(--kanasa-bg-surface);
}

.p-kanasa-works-type__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	width: 100%;
}

.p-kanasa-works-type__item {
	display: flex;
	flex-direction: column;
	gap: 14px; /* Figma の値（トークンにない） */
	padding: var(--space-xl);
	background: var(--kanasa-bg-canvas);
	border-radius: var(--kanasa-radius-card);
}

.p-kanasa-works-type__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	color: var(--kanasa-text-green);
	background: var(--kanasa-green-300); /* Figma は Primitives の kanasa/green-300 を直接使っている */
	border-radius: 50%;
}

.p-kanasa-works-type__icon .c-kanasa-icon {
	width: 30px;
	height: 30px;
}

.p-kanasa-works-type__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.p-kanasa-works-type__title {
	font: var(--text-kanasa-h4);
	letter-spacing: var(--ls-kanasa);
}

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

/* ==========================================================================
   かなさホームが選ばれる理由・担当（Figma p-kanasa-strong 55:1256）
   ========================================================================== */
.p-kanasa-strong {
	padding-block: var(--kanasa-section-py);
	background: var(--kanasa-bg-canvas);
}

.p-kanasa-strong__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	width: 100%;
}

.p-kanasa-strong__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: center;
	padding: var(--space-2xl) 36px;
	background: var(--kanasa-bg-surface);
	border-radius: var(--kanasa-radius-box);
}

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

.p-kanasa-strong__icon .c-kanasa-icon {
	width: 36px;
	height: 36px;
}

.p-kanasa-strong__title {
	align-self: stretch; /* 中身の幅に合わせると決めた改行の手前で折れることがある（2026-10-05） */
	font: var(--text-kanasa-h3);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
	text-align: center;
}

.p-kanasa-strong__text {
	align-self: stretch;
	font: var(--text-kanasa-body-s);
	letter-spacing: var(--ls-kanasa);
}

/* 担当の紹介 */
.p-kanasa-staff {
	display: flex;
	gap: var(--space-3xl);
	align-items: center;
	width: 100%;
	padding: var(--space-3xl) 56px;
	background: var(--kanasa-bg-green-soft);
	border-radius: var(--kanasa-radius-panel);
}

.p-kanasa-staff__photo {
	flex-shrink: 0;
	width: 180px;
	height: 180px;
	overflow: hidden;
	border-radius: 50%;
}

.p-kanasa-staff__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-kanasa-staff__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-sm);
	min-width: 0;
}

.p-kanasa-staff__role {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-green);
}

.p-kanasa-staff__title {
	font: var(--text-kanasa-h2);
	letter-spacing: var(--ls-kanasa);
}

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

.p-kanasa-staff__tel {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: var(--space-xs);
	align-items: center;
	padding: var(--space-lg) var(--space-xl);
	color: inherit;
	text-decoration: none;
	background: var(--kanasa-bg-surface);
	border-radius: var(--kanasa-radius-card);
}

.p-kanasa-staff__tel-label {
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-secondary);
}

.p-kanasa-staff__meta {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	color: var(--kanasa-text-green);
}

.p-kanasa-staff__tel-icon {
	width: 24px;
	height: 24px;
}

.p-kanasa-staff__number {
	font: var(--text-kanasa-h2);
	letter-spacing: var(--ls-kanasa);
}

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

@media (hover: hover) {
	.p-kanasa-staff__tel:hover .p-kanasa-staff__number {
		text-decoration: underline;
		text-underline-offset: 5px;
	}
}

/* ==========================================================================
   役立つコラム・Instagram（Figma p-kanasa-column 55:1294）
   ========================================================================== */
.p-kanasa-column {
	padding-block: var(--kanasa-section-py);
	background: var(--kanasa-bg-surface);
}

.p-kanasa-column__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-lg);
	width: 100%;
}

.p-kanasa-column__item {
	min-width: 0;
}

.p-kanasa-column__empty {
	color: var(--kanasa-text-secondary);
}

.p-kanasa-column .p-kanasa-instagram {
	background: var(--kanasa-bg-canvas);
}

/* ==========================================================================
   ご依頼の流れ（Figma p-kanasa-flow 55:1315）・よくある質問（Figma p-kanasa-faq 55:1366）
   ========================================================================== */
.p-kanasa-flow {
	padding-block: var(--kanasa-section-py);
	background: var(--kanasa-bg-canvas);
}

.p-kanasa-flow__lead {
	font: var(--text-kanasa-h3);
	letter-spacing: var(--ls-kanasa);
	text-align: center;
}

.p-kanasa-faq {
	padding-block: var(--kanasa-section-py);
	background: var(--kanasa-bg-surface);
}

/* ==========================================================================
   タブレット（768〜1023px）: 3列のカードを2列に
   ========================================================================== */
@media (max-width: 1023px) {
	.p-kanasa-worries__list,
	.p-kanasa-works-type__list,
	.p-kanasa-strong__list,
	.p-kanasa-column__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-kanasa-insurance__check {
		grid-template-areas:
			"text"
			"mock"
			"button";
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

}

/* 支給の数字カード（768〜1023px）: 3列のまま、数字を幅に合わせて小さく（768px で 43px・1023px で 57px） */
@media (min-width: 768px) and (max-width: 1023px) {
	.p-kanasa-insurance__number {
		padding: 22px 18px; /* 枠線 2px の内側で 24px・20px */
	}

	.p-kanasa-insurance__number-big {
		font-size: clamp(40px, 5.6vw, var(--fs-kanasa-number));
	}

	.p-kanasa-insurance__number-unit {
		font-size: clamp(18px, 2.4vw, var(--fs-kanasa-h3));
	}

	/* お悩みの文: 2列で幅が狭いので、PC だけの改行を外して自然に折り返す（「家では」だけの短い行を作らない） */
	.p-kanasa-worries__text .u-pc-br {
		display: none;
	}
}

/* 担当の紹介（768〜1099px）: 写真 → 文（幅いっぱい）→ 電話 の縦並び（横並びでは文の列が細くなるため。SP は下の指定） */
@media (min-width: 768px) and (max-width: 1099px) {
	.p-kanasa-staff {
		flex-wrap: wrap;
		justify-content: center;
	}

	.p-kanasa-staff__text {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 767px) {
	.p-kanasa-worries__list,
	.p-kanasa-works-type__list,
	.p-kanasa-strong__list,
	.p-kanasa-column__list,
	.p-kanasa-insurance__numbers {
		grid-template-columns: minmax(0, 1fr);
	}

	/* お悩み: アイコンを左・文を右 */
	.p-kanasa-worries__list {
		gap: var(--space-sm);
	}

	.p-kanasa-worries__item {
		flex-direction: row;
		gap: 14px;
		align-items: center;
		padding: 20px;
	}

	.p-kanasa-worries__icon {
		width: 48px;
		height: 48px;
	}

	.p-kanasa-worries__icon .c-kanasa-icon {
		width: 22px;
		height: 22px;
	}

	/* SP はカードの幅いっぱいに詰めて折り返す（決めた改行・keep-all をやめた。2026-10-05 ユーザー指摘「トップ全体が左に偏っている」。
	   前は「、」と <wbr> だけで折っていて、Safari では1行目が「「家族の急な退院が」だけになり右が大きくあいていた）。
	   最後の4字は text-wrap.js が離さない（「なる。」」だけの行を作らない） */
	.p-kanasa-worries__text {
		word-break: normal;
		line-break: strict;
		text-wrap: wrap;
	}

	.p-kanasa-worries__text br {
		display: none;
	}

	/* 介護保険 */
	.p-kanasa-insurance__lead {
		text-align: left;
	}

	.p-kanasa-insurance__numbers {
		gap: var(--space-sm);
	}

	.p-kanasa-insurance__number {
		padding: 18px; /* 枠線 2px の内側で 20px */
	}

	.p-kanasa-insurance__check {
		padding: 28px 20px;
	}

	.p-kanasa-insurance__check-mock {
		padding: 20px;
	}

	/* 使える工事: アイコンを左・文を右 */
	.p-kanasa-works-type__list {
		gap: var(--space-sm);
	}

	.p-kanasa-works-type__item {
		flex-direction: row;
		gap: var(--space-md);
		padding: 20px;
	}

	.p-kanasa-works-type__icon {
		width: 52px;
		height: 52px;
	}

	.p-kanasa-works-type__icon .c-kanasa-icon {
		width: 26px;
		height: 26px;
	}

	.p-kanasa-works-type__text {
		flex: 1 1 auto;
		gap: 6px;
		min-width: 0;
	}

	/* 選ばれる理由 */
	.p-kanasa-strong__list {
		gap: var(--space-md);
	}

	.p-kanasa-strong__item {
		padding: 28px var(--space-xl);
	}

	.p-kanasa-strong__icon {
		width: 64px;
		height: 64px;
	}

	.p-kanasa-strong__icon .c-kanasa-icon {
		width: 30px;
		height: 30px;
	}

	/* 担当: 写真 → 文 → 電話 を縦に（中央） */
	.p-kanasa-staff {
		flex-direction: column;
		gap: 20px;
		padding: 28px var(--space-xl);
	}

	.p-kanasa-staff__photo {
		width: 120px;
		height: 120px;
	}

	.p-kanasa-staff__text {
		align-self: stretch;
	}

	.p-kanasa-staff__role,
	.p-kanasa-staff__title {
		text-align: center;
	}

	.p-kanasa-staff__tel {
		align-self: stretch;
		padding: 20px;
	}

	/* コラム（「コラムをすべて見る」は幅いっぱい。Figma 241:10443） */
	.p-kanasa-column__list {
		gap: var(--space-md);
	}

	.p-kanasa-column__more {
		align-self: stretch;
	}
}