@charset "UTF-8";
/**
 * home.css — TOPページ専用
 *
 * 共通の色・余白は base.css の変数を使うこと。
 */

/* ==================================================================
 * ヒーロー
 * ------------------------------------------------------------------
 * 全体を生成りの額縁で囲み、その中に写真を敷く。
 * 左に「すりガラス」の帯を重ね、その上に文字を置く。
 * 濃い帯で塗りつぶすより写真が透けるぶん軽く、写真も殺さない。
 * ================================================================== */
.p-hero {
	padding: 0 clamp(10px, 1.7vw, 26px) clamp(10px, 1.7vw, 26px);
	background: var(--bg-cream);
}

.p-hero__frame {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 76svh;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--primary-dark);
	isolation: isolate;
}

@media (min-width: 768px) {
	.p-hero__frame {
		min-height: min(84svh, 760px);
	}
}

/* 直後の区切りが額縁の下辺を隠さないようにする */
.p-hero + .c-wave--bottom {
	margin-top: 0;
}

/* ---------- 写真 ---------- */
.p-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.p-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 3枚をゆっくり入れ替える。重なった状態でフェードするので背景が抜けない。
   ライブラリは使わずCSSアニメーションだけで動かしている。 */
.p-hero__media--slideshow .p-hero__slide {
	opacity: 0;
	animation: mk-hero-fade 24s var(--ease) infinite;
}

.p-hero__media--slideshow .p-hero__slide:nth-child(1) { animation-delay: 0s; }
.p-hero__media--slideshow .p-hero__slide:nth-child(2) { animation-delay: 8s; }
.p-hero__media--slideshow .p-hero__slide:nth-child(3) { animation-delay: 16s; }

@keyframes mk-hero-fade {
	0%, 33%   { opacity: 1; transform: scale(1.06); }
	40%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.p-hero__media--slideshow .p-hero__slide { animation: none; }
	.p-hero__media--slideshow .p-hero__slide:nth-child(1) { opacity: 1; }
}

/* 写真の上に直接文字を置くので、上下を沈めて読めるようにする。
   全面を均一に暗くすると写真が死ぬので、上下だけに寄せている。 */
.p-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(15, 41, 67, .5) 0%,
			rgba(15, 41, 67, .12) 40%,
			rgba(15, 41, 67, .2) 62%,
			rgba(15, 41, 67, .62) 100%
		);
}

@media (min-width: 768px) {
	.p-hero__media::after {
		background: linear-gradient(
			180deg,
			rgba(15, 41, 67, .18) 0%,
			rgba(15, 41, 67, .1) 45%,
			rgba(15, 41, 67, .34) 100%
		);
	}
}

/* 縦長に切り取られるSPでは、動きのある部分が残るよう寄せる */
@media (max-width: 767px) {
	.p-hero__media img {
		object-position: 82% 50%;
	}
}

/* ---------- すりガラスの帯（PCのみ） ----------
   右端をぼかして写真へ溶かす。境目を直線で切らないのが肝。

   ⚠ 狭い画面では出さない。画面幅いっぱいに白い板が乗ってしまい、
     写真がほとんど見えなくなるため。SPは写真の上に直接文字を置く。 */
.p-hero__glass {
	display: none;
}

@media (min-width: 768px) {
	.p-hero__glass {
		position: absolute;
		inset: 0;
		right: auto;
		z-index: 1;
		display: block;
		width: min(48%, 560px);
		background: rgba(251, 248, 241, .62);
		backdrop-filter: blur(18px) saturate(120%);
		-webkit-backdrop-filter: blur(18px) saturate(120%);
		-webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
	}
}

/* ---------- コピー ---------- */
.p-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: var(--sp-9) var(--gutter) var(--sp-10);
}

@media (min-width: 768px) {
	.p-hero__inner {
		width: min(52%, 620px);
		padding: var(--sp-8) var(--sp-6) var(--sp-8) clamp(32px, 6vw, 96px);
	}
}

/*
 * 1行を短く、行間をとても広く。
 * 参考サイトのファーストビューが静かに見えるのは、
 * 文字を大きくしているからではなく、行の間隔を空けているから。
 */
.p-hero__title {
	display: grid;
	gap: clamp(var(--sp-4), 2.2vw, var(--sp-6));
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 6.2vw, 2.5rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .16em;
	color: var(--primary);
}

@media (min-width: 768px) {
	.p-hero__title {
		font-size: clamp(1.75rem, 3.1vw, 2.625rem);
		letter-spacing: .2em;
	}
}

.p-hero__line {
	display: block;
}

.p-hero__sub {
	display: grid;
	gap: 2px;
	margin-top: var(--sp-6);
	font-size: clamp(.8125rem, 2vw, .9375rem);
	line-height: 2.1;
	letter-spacing: .1em;
	color: var(--primary-light);
}

.p-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-5);
	margin-top: var(--sp-7);
}

/* 狭い画面ではボタンを縦に積む。
   横並びのままだと、ボタンの最小幅とリンクが押し合って枠からはみ出す。 */
@media (max-width: 599px) {
	.p-hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-4);
	}

	.p-hero__link {
		justify-content: flex-start;
	}
}

@media (min-width: 600px) {
	.p-hero__actions .c-btn--line {
		min-width: 240px;
	}
}

.p-hero__link {
	color: var(--primary);
	font-weight: 700;
	letter-spacing: .06em;
}

/* ---------- 電話 ----------
   見出し → 番号 → 受付時間 の3段。番号だけだと数字が浮いて見える。

   ⚠ PCでは白い文字を写真に直接置かないこと。
     左半分は明るい壁の写真＋すりガラスなので、白文字はほとんど読めない。
   ⚠ 下の区切り（波）はヒーローに重なってくる。
     その高さぶん持ち上げないと、番号の下半分が濃紺に食われる。 */
.p-hero__tel {
	position: absolute;
	left: clamp(16px, 4vw, 48px);
	bottom: clamp(14px, 3vw, 34px);
	z-index: 2;
	display: grid;
	gap: 2px;
	justify-items: start;
	line-height: 1.2;
}

@media (min-width: 768px) {
	.p-hero__tel {
		/* コピーの頭にそろえる（.p-hero__inner の padding-left と同値） */
		left: clamp(32px, 6vw, 96px);
		/* 波の高さ（components.css の --wave-h）＋余白ぶん持ち上げる */
		bottom: calc(clamp(40px, 6vw, 90px) + var(--sp-4));
		padding: var(--sp-3) var(--sp-5) var(--sp-4);
		border-radius: var(--radius);
		background: rgba(255, 255, 255, .92);
		box-shadow: 0 8px 24px rgba(15, 41, 67, .16);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}
}

/* 「≡ ラベル ≡」の二重線。お悩みの締めのCTAと同じ書き方。
   2本目は box-shadow で描いて、要素を増やさない。 */
.p-hero__tel-label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--primary-light);
}

.p-hero__tel-label::before,
.p-hero__tel-label::after {
	content: "";
	width: 12px;
	height: 2px;
	background: currentColor;
	box-shadow: 0 4px 0 currentColor;
	transform: translateY(-2px);
	opacity: .5;
}

.p-hero__tel-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--primary);
}

.p-hero__tel-icon {
	flex: none;
	display: grid;
	place-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-full);
	background: var(--accent);
	color: var(--white);
}

.p-hero__tel-num {
	font-family: var(--font-en);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 700;
	letter-spacing: .06em;
}

/* 受付時間は番号の頭にそろえる（アイコンの幅ぶん下げる） */
.p-hero__tel-note {
	padding-left: calc(28px + var(--sp-2));
	font-size: .6875rem;
	letter-spacing: .06em;
	color: var(--gray);
}

/* ---------- 八角形バッジ ---------- */
.p-hero__badge {
	display: none;
}

@media (min-width: 1024px) {
	.p-hero__badge {
		position: absolute;
		right: clamp(24px, 4vw, 64px);
		bottom: clamp(24px, 4vw, 64px);
		z-index: 2;
		display: grid;
	}
}

/* ==================================================================
 * ヒーロー（スマホ）
 * ------------------------------------------------------------------
 * 参考サイトのSPは、写真の上に文字を直接置き、
 * 八角形バッジを大きく据えて、最下部に電話番号を白抜きで並べる。
 * 白い板で覆わないぶん、写真そのものが主役になる。
 *
 * 縦の並び：コピー → 八角形バッジ → 電話番号
 * 主CTAはバッジ（LINE）に一本化する。緑のボタンを別に置くと、
 * 同じ導線が2つ並んで画面が散らかるため。
 * ================================================================== */
@media (max-width: 767px) {
	.p-hero {
		padding-bottom: clamp(10px, 1.7vw, 26px);
	}

	.p-hero__frame {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		min-height: 86svh;
	}

	/* HTMLの並びは コピー → 電話 → バッジ。
	   画面では コピー → バッジ → 電話 に見せたいので順番を入れ替える。 */
	.p-hero__inner {
		order: 1;
		flex: none;
		padding: var(--sp-8) var(--gutter) 0;
	}

	/* 写真の上に置くので白抜き。影で輪郭を残す。 */
	.p-hero__title {
		gap: var(--sp-5);
		font-size: clamp(1.5rem, 7vw, 2rem);
		font-weight: 700;
		letter-spacing: .18em;
		color: var(--white);
		text-shadow: 0 2px 18px rgba(15, 41, 67, .55);
	}

	.p-hero__sub {
		margin-top: var(--sp-6);
		font-size: .8125rem;
		line-height: 2;
		color: rgba(255, 255, 255, .92);
		text-shadow: 0 2px 14px rgba(15, 41, 67, .6);
	}

	/* 緑のボタンは出さず、バッジに導線をまとめる */
	.p-hero__actions {
		display: none;
	}

	.p-hero__badge {
		order: 2;
		display: grid;
		z-index: 2;
		/* 上の余白だけ自動で吸わせて、コピーの下に落とす */
		margin: auto auto 0;
	}

	/* SPは写真の暗い側に置くので、白い板を敷かず白抜きのまま。
	   八角形バッジ（LINE）を主役に保つため、ここは軽く見せる。 */
	.p-hero__tel {
		order: 3;
		position: static;
		z-index: 2;
		justify-items: center;
		gap: var(--sp-1);
		margin-top: var(--sp-5);
		/* 下の区切り（波）がここまで重なってくるので、その高さぶん空ける */
		padding: 0 var(--gutter) calc(clamp(40px, 6vw, 90px) + var(--sp-3));
		text-align: center;
	}

	.p-hero__tel-label {
		color: rgba(255, 255, 255, .88);
		text-shadow: 0 2px 10px rgba(15, 41, 67, .7);
	}

	.p-hero__tel-link {
		justify-content: center;
		color: var(--white);
		text-shadow: 0 2px 12px rgba(15, 41, 67, .7);
	}

	.p-hero__tel-num {
		font-size: 1.75rem;
	}

	.p-hero__tel-note {
		padding-left: 0;
		color: rgba(255, 255, 255, .85);
		text-shadow: 0 2px 10px rgba(15, 41, 67, .7);
	}
}

/* ---------- スクロール誘導 ---------- */
.p-hero__scroll {
	position: absolute;
	right: clamp(24px, 4vw, 64px);
	bottom: 0;
	z-index: 2;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	color: var(--white);
}

@media (min-width: 768px) and (max-width: 1023px) {
	.p-hero__scroll {
		display: flex;
	}
}

.p-hero__scroll-text {
	font-family: var(--font-script);
	font-size: 1.125rem;
	letter-spacing: .04em;
}

.p-hero__scroll-line {
	position: relative;
	width: 1px;
	height: 64px;
	background: rgba(255, 255, 255, .35);
	overflow: hidden;
}

.p-hero__scroll-line::after {
	content: "";
	position: absolute;
	top: -64px;
	left: 0;
	width: 100%;
	height: 64px;
	background: var(--accent);
	animation: mk-scroll-line 2.4s var(--ease) infinite;
}

@keyframes mk-scroll-line {
	0% { transform: translateY(0); }
	60% { transform: translateY(128px); }
	100% { transform: translateY(128px); }
}

/* ==================================================================
 * キャンペーンCTA
 * ================================================================== */
.p-campaign {
	position: relative;
	overflow: hidden;
	background: var(--primary-dark);
	color: var(--white);
}

.p-campaign__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.p-campaign__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .2;
}

.p-campaign__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--section-y);
}

.p-campaign__head {
	text-align: center;
}

.p-campaign__en {
	display: block;
	font-family: var(--font-script);
	font-size: clamp(1.75rem, 4.5vw, 2.75rem);
	line-height: 1;
	color: var(--accent);
}

.p-campaign__title {
	margin-top: var(--sp-3);
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 4.5vw, 2.125rem);
	line-height: 1.8;
	letter-spacing: .12em;
	color: var(--white);
}

/* いちばん伝えたい条件。左肩に放射線を添えて強調する。 */
.p-campaign__sub {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-top: var(--sp-5);
	padding: var(--sp-2) var(--sp-6);
	border-radius: var(--radius-full);
	background: var(--accent);
	font-family: var(--font-heading);
	font-size: clamp(1rem, 3vw, 1.375rem);
	font-weight: 700;
	letter-spacing: .06em;
}

.p-campaign__sub .c-deco--burst {
	position: absolute;
	top: -34px;
	left: -30px;
	color: var(--accent);
}

.p-campaign__period {
	margin-top: var(--sp-4);
	font-size: .875rem;
	font-weight: 700;
}

.p-campaign__text {
	max-width: 40em;
	margin: var(--sp-4) auto 0;
	font-size: .9375rem;
	line-height: 1.9;
}

/* ---------- 特典カード ---------- */
.p-campaign__benefits {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-3);
	margin-top: var(--sp-8);
}

@media (min-width: 768px) {
	.p-campaign__benefits {
		gap: var(--sp-5);
	}

	.p-campaign__benefit {
		padding: var(--sp-7) var(--sp-5) var(--sp-6);
	}
}

.p-campaign__benefit {
	position: relative;
	display: grid;
	gap: var(--sp-2);
	align-content: start;
	padding: var(--sp-6) var(--sp-3) var(--sp-5);
	background: var(--white);
	border-radius: var(--radius);
	text-align: center;
}

.p-campaign__benefit-num {
	position: absolute;
	top: calc(var(--sp-3) * -1);
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--white);
	font-size: .875rem;
	font-weight: 700;
}

.p-campaign__benefit-title {
	font-size: 1rem;
	color: var(--primary);
}

.p-campaign__benefit-amount {
	font-size: clamp(1.125rem, 3vw, 1.5rem);
	font-weight: 700;
	color: var(--accent);
	line-height: 1.4;
}

.p-campaign__benefit-note {
	font-size: .75rem;
	color: var(--gray);
	line-height: 1.7;
}

/* ---------- 注意事項 ---------- */
.p-campaign__notes {
	display: grid;
	gap: var(--sp-1);
	max-width: 46em;
	margin: var(--sp-6) auto 0;
	font-size: .75rem;
	line-height: 1.8;
	opacity: .85;
}

.p-campaign__notes li {
	position: relative;
	padding-left: 1.2em;
}

.p-campaign__notes li::before {
	content: "※";
	position: absolute;
	left: 0;
}

.p-campaign__cta {
	margin-top: var(--sp-7);
	text-align: center;
}

/* ==================================================================
 * 実績
 * ================================================================== */
.p-achievements {
	position: relative;
	overflow: hidden;
}

/* 高圧洗浄の写真を薄く敷く。数字の可読性を落とさない濃さに留める。 */
.p-achievements__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.p-achievements__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .16;
}

.p-achievements__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(22, 56, 90, .55) 0%,
		rgba(22, 56, 90, .1) 50%,
		rgba(22, 56, 90, .55) 100%
	);
}

.p-achievements__inner {
	position: relative;
	z-index: 1;
}

.p-achievements__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-5);
}

@media (min-width: 768px) {
	.p-achievements__list {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--sp-6);
	}
}

.p-achievements__item {
	display: grid;
	gap: var(--sp-2);
	padding: var(--sp-5) var(--sp-3);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--radius);
	text-align: center;
}

.p-achievements__label {
	font-size: .8125rem;
	letter-spacing: .08em;
	opacity: .85;
}

.p-achievements__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--sp-1);
}

.p-achievements__num {
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--accent);
}

.p-achievements__unit {
	font-size: .9375rem;
	font-weight: 700;
}

/* 「No.1」などの根拠を必ず併記する（03 §9） */
.p-achievements__note {
	margin-top: var(--sp-5);
	font-size: .75rem;
	line-height: 1.8;
	text-align: center;
	opacity: .75;
}

/* ==================================================================
 * お悩み（症状）
 * ================================================================== */
.p-problems {
	position: relative;
	overflow: hidden;
}

.p-problems__inner {
	position: relative;
	z-index: 1;
}

.p-problems__list {
	/*
	 * SPは2列。1列で積むと6項目で画面3枚分になり、
	 * 同じ形のカードが延々と続いて単調になる。
	 */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-3);
}

@media (min-width: 600px) {
	.p-problems__list {
		gap: var(--sp-4);
	}
}

@media (min-width: 1024px) {
	.p-problems__list {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-5);
	}
}

/* ⚠ カードは「高さを揃える」こと。
   以前は偶数番目に margin-top を付けて互い違いにしていたが、
   文章の長さもバラバラなので、ただガタガタに見えていた。
   ・grid の既定（align-self: stretch）で行内の高さをそろえる
   ・flex 縦並びにして、塗り替え目安を margin-top:auto で最下部に固定
   → どのカードも 写真／見出し／説明／目安 の高さがそろう。 */
.p-problems__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	overflow: hidden;
	padding: var(--sp-4) var(--sp-3) var(--sp-5);
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-align: center;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

@media (min-width: 768px) {
	.p-problems__item {
		gap: var(--sp-2);
		padding: var(--sp-6) var(--sp-5);
	}
}

.p-problems__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

/* 写真はカードの上辺いっぱいに出す（左右・上の padding を打ち消す） */
.p-problems__media {
	position: relative;
	margin: calc(var(--sp-4) * -1) calc(var(--sp-3) * -1) var(--sp-3);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bg-soft);
}

@media (min-width: 768px) {
	.p-problems__media {
		margin: calc(var(--sp-6) * -1) calc(var(--sp-5) * -1) var(--sp-3);
		aspect-ratio: 330 / 188;
	}
}

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

/* 管理画面で写真を差し替えたとき用の番号。
   テーマ同梱の写真には番号が焼き込まれているので、そちらでは出さない。 */
.p-problems__num {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: var(--primary);
	color: var(--white);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .02em;
}

@media (min-width: 768px) {
	.p-problems__num {
		width: 42px;
		height: 42px;
		font-size: 1rem;
	}
}

/* 見出しは1行のものと2行のものが混ざる。
   2行ぶんの高さを先に確保して、下の説明文の開始位置をそろえる。 */
.p-problems__text {
	min-height: calc(1.6em * 2);
	font-family: var(--font-heading);
	font-size: .875rem;
	letter-spacing: .04em;
	color: var(--primary);
	line-height: 1.6;
}

@media (min-width: 768px) {
	.p-problems__text {
		font-size: 1rem;
	}
}

.p-problems__desc {
	font-size: .75rem;
	color: var(--gray);
	line-height: 1.8;
}

@media (min-width: 768px) {
	.p-problems__desc {
		font-size: .8125rem;
	}
}

/* 塗り替え目安
   margin-top:auto で必ずカードの最下部に置く。
   説明文の長さが違ってもピルの高さがそろう。 */
.p-problems__timing {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	align-self: center;
	margin-top: auto;
	padding: 2px var(--sp-3);
	border-radius: var(--radius-full);
	background: var(--bg-soft);
}

/* 2列だと横幅が足りず「塗り替え目 / 安」で割れてしまうので、
   狭い画面ではラベルと値を縦に積む。 */
@media (max-width: 599px) {
	.p-problems__timing {
		flex-direction: column;
		gap: 0;
		padding: var(--sp-2) var(--sp-3);
		line-height: 1.5;
	}
}

@media (min-width: 768px) {
	.p-problems__timing {
		gap: var(--sp-2);
		padding: var(--sp-1) var(--sp-4);
	}
}

.p-problems__timing-label {
	font-size: .625rem;
	color: var(--gray);
}

.p-problems__timing-value {
	font-size: .8125rem;
	font-weight: 700;
	color: var(--accent);
}

/* ==================================================================
 * 締め（次のセクションへの橋渡し）
 * ------------------------------------------------------------------
 * 症状を読んで不安になったところを、そのまま相談につなぐ場所。
 *
 * 文章を増やさず、連絡手段を白い箱で並べて「選ぶだけ」にしている。
 * LINEを主・電話を副として、箱の幅と中身の強さで差を付ける（03 §5）。
 * ================================================================== */
.p-problems__bridge {
	position: relative;
	display: grid;
	justify-items: center;
	margin-top: var(--sp-7);
	padding-top: var(--sp-4);
}

@media (min-width: 768px) {
	.p-problems__bridge {
		margin-top: var(--sp-9);
		padding-top: var(--sp-6);
	}
}

.p-problems__bridge .c-deco--arrow {
	justify-self: center;
	margin-bottom: var(--sp-4);
	color: var(--primary);
	opacity: .55;
}

/* ---------- 濃紺のパネル ---------- */
.p-problems__panel {
	position: relative;
	width: 100%;
	max-width: 900px;
	padding: var(--sp-8) var(--sp-4) var(--sp-7);
	border-radius: var(--radius-lg);
	background: var(--primary);
	box-shadow: 0 16px 44px rgba(15, 41, 67, .24);
	overflow: hidden;
	text-align: center;
}

@media (min-width: 768px) {
	.p-problems__panel {
		padding: var(--sp-9) var(--sp-8) var(--sp-8);
	}
}

/* ベタ塗りにせず、施工写真をごく薄く敷いて質感を出す */
.p-problems__panel-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.p-problems__panel-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .14;
}

.p-problems__panel-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 130% at 50% 0%, rgba(47, 95, 138, .55) 0%, transparent 60%);
}

.p-problems__panel-inner {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
}

/* 筆記体のラベル */
.p-problems__panel-en {
	font-family: var(--font-script);
	font-size: clamp(2rem, 7vw, 3.25rem);
	line-height: 1;
	color: var(--accent);
	transform: rotate(-3deg);
}

/*
 * 主コピー。太い斜線で左右から挟む。
 * 中央に文字を置くだけだと説明文に見えるが、挟むと呼びかけとして読める。
 */
.p-problems__bridge-text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(var(--sp-3), 3vw, var(--sp-6));
	margin: var(--sp-4) 0 0;
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 5vw, 2rem);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .08em;
	color: var(--white);
}

.p-problems__bridge-text::before,
.p-problems__bridge-text::after {
	content: "";
	flex: none;
	width: 4px;
	height: 2.2em;
	border-radius: 2px;
	background: var(--white);
	opacity: .9;
}

.p-problems__bridge-text::before {
	transform: rotate(-24deg);
}

.p-problems__bridge-text::after {
	transform: rotate(24deg);
}

.p-problems__panel .c-deco--wave {
	width: 96px;
	margin-top: var(--sp-4);
	color: rgba(255, 255, 255, .5);
}

/* ---------- 連絡手段の箱 ---------- */
.p-problems__ways {
	display: grid;
	gap: var(--sp-3);
	width: 100%;
	margin-top: var(--sp-6);
}

@media (min-width: 768px) {
	.p-problems__ways {
		/* LINEを広く、電話を狭く。同じ幅で並べると優劣が消える。 */
		grid-template-columns: 1.25fr 1fr;
		gap: var(--sp-4);
		margin-top: var(--sp-7);
	}
}

.p-problems__way {
	display: grid;
	gap: var(--sp-3);
	align-content: center;
	justify-items: center;
	padding: var(--sp-5) var(--sp-4);
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: 0 6px 20px rgba(15, 41, 67, .18);
}

/* 箱の見出し。左右に二重線を伸ばす。 */
.p-problems__way-label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	font-family: var(--font-heading);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--primary);
}

.p-problems__way-label::before,
.p-problems__way-label::after {
	content: "";
	width: 18px;
	height: 2px;
	background: currentColor;
	/* 2本目を影で描く（要素を増やさずに二重線にする） */
	box-shadow: 0 5px 0 currentColor;
	transform: translateY(-2px);
	opacity: .55;
}

.p-problems__way-note {
	font-size: .6875rem;
	letter-spacing: .04em;
	color: var(--gray);
}

/* ---------- LINE（主） ---------- */
.p-problems__btn {
	width: min(100%, 320px);
	min-height: 62px;
	font-size: 1.0625rem;
	box-shadow: 0 5px 0 #04a344;
}

.p-problems__btn:hover {
	transform: translateY(2px);
	box-shadow: 0 2px 0 #04a344;
}

/* ---------- 電話（副） ---------- */
.p-problems__tel {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-en);
	font-size: clamp(1.375rem, 5.5vw, 1.75rem);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	color: var(--primary);
}

.p-problems__tel:hover {
	color: var(--primary-light);
}

/* ==================================================================
 * 選ばれる5つの理由（カード）
 * ================================================================== */
.p-reasons {
	position: relative;
	overflow: hidden;
}

/* 白壁の写真を敷く。元々明るい写真なので、文字のコントラストは落ちない。 */
.p-reasons__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

/* 上下は白に溶かして、セクションの境目に写真の切れ目が出ないようにする */
.p-reasons__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, .96) 0%,
		rgba(255, 255, 255, .3) 28%,
		rgba(255, 255, 255, .3) 72%,
		rgba(255, 255, 255, .96) 100%
	);
}

.p-reasons__inner {
	position: relative;
	z-index: 1;
}

/* ---------- 写真を画面の端まで伸ばす ----------
   コンテナに収めず、写真の側だけを画面の端まで出す。
   左右で入れ替えるので、スクロールすると視線が左右に振られる。 */
.p-reasons__list {
	display: grid;
	gap: var(--sp-7);
	margin-top: var(--sp-6);
}

@media (min-width: 768px) {
	.p-reasons__list {
		gap: clamp(64px, 9vw, 128px);
	}
}

.p-reasons__item {
	display: grid;
}

@media (min-width: 768px) {
	/*
	 * ⚠ align-items は stretch のままにすること。
	 *   center にすると写真が縦横比だけで大きさを決めてしまい、
	 *   画面が広いほど写真だけが巨大になって本文とつり合わなくなる
	 *   （1920pxで写真の高さが775pxになっていた）。
	 *   stretch なら写真の高さ＝本文の高さになる。
	 */
	.p-reasons__item {
		grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
		align-items: stretch;
	}

	/* 偶数番目は写真を右へ。テキストと写真の位置が毎回入れ替わる。 */
	.p-reasons__item:nth-child(even) .p-reasons__media {
		order: 2;
	}
}

/* 写真の列を広げすぎない。1200pxを超えたら本文の側に寄せる。 */
@media (min-width: 1600px) {
	.p-reasons__item {
		grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
	}
}

.p-reasons__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--bg-soft);
}

@media (min-width: 768px) {
	/* 高さは縦横比ではなく px で決める。
	   4/3 のままだと、写真の列が広がるほど高さも比例して伸びてしまう。 */
	.p-reasons__media {
		aspect-ratio: auto;
		align-self: stretch;
		min-height: clamp(300px, 34vw, 430px);
		max-height: 460px;
		/* 外側の角だけ大きく落として、画面の端から生えているように見せる */
		border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	}

	/* ⚠ 写真は絶対配置にすること。
	   通常配置のままだと画像の実寸で高さが決まり、min-height が効かない。 */
	.p-reasons__media img {
		position: absolute;
		inset: 0;
	}

	.p-reasons__item:nth-child(even) .p-reasons__media {
		border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	}

	/* 写真が伸びても本文は中央に置く */
	.p-reasons__body {
		align-self: center;
	}
}

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

/* ---------- 本文 ---------- */
.p-reasons__body {
	position: relative;
	display: grid;
	gap: var(--sp-2);
	align-content: start;
	padding: var(--sp-6) var(--gutter) 0;
}

@media (min-width: 768px) {
	/* 写真側の余白と、画面端側の余白。
	   ⚠ 番号（.p-reasons__num）はこの2つを見て左位置を決めている。
	     絶対配置の基準は padding ボックスなので、padding と同じ値を
	     left に入れないと本文の頭とそろわない。 */
	.p-reasons__body {
		--reasons-pad: clamp(32px, 5vw, 88px);
		--reasons-pad-edge: max(var(--gutter), calc((100vw - var(--container)) / 2));

		padding: 0 var(--reasons-pad);
	}

	/* 奇数番目（写真が左）のときは、文章を右の余白いっぱいに寄せない */
	.p-reasons__item:nth-child(odd) .p-reasons__body {
		padding-right: var(--reasons-pad-edge);
	}

	.p-reasons__item:nth-child(even) .p-reasons__body {
		padding-left: var(--reasons-pad-edge);
	}
}

/* 番号は筆記体で大きく取り、見出しに重ねる。
   数字のバッジより、ページ全体の表情がやわらかくなる。 */
.p-reasons__num {
	position: absolute;
	top: -.68em;
	right: var(--gutter);
	left: auto;
	font-family: var(--font-script);
	font-size: clamp(3.5rem, 11vw, 6.5rem);
	line-height: 1;
	color: var(--primary-light);
	opacity: .32;
	pointer-events: none;
	user-select: none;
}

/* 狭い画面では本文の白地に沈むので、写真の中に白で置く。
   写真の下辺に少しかぶせて、重なりの感じは残す。 */
@media (max-width: 767px) {
	.p-reasons__num {
		top: auto;
		bottom: calc(100% - .28em);
		right: var(--gutter);
		color: var(--white);
		opacity: .92;
		text-shadow: 0 2px 14px rgba(15, 41, 67, .5);
	}
}

@media (min-width: 768px) {
	.p-reasons__num {
		top: -.78em;
		right: auto;
		left: var(--reasons-pad);
	}

	/* 偶数番目は本文が左に来て padding-left が広がるので、
	   番号も同じぶんだけ動かす（固定値だと見出しの頭からずれる） */
	.p-reasons__item:nth-child(even) .p-reasons__num {
		left: var(--reasons-pad-edge);
	}
}

.p-reasons__label {
	position: relative;
	z-index: 1;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--accent);
}

.p-reasons__title {
	font-size: clamp(1.0625rem, 2.4vw, 1.5rem);
	line-height: 1.7;
	letter-spacing: .04em;
	color: var(--primary);
}

/* ⚠ 重要な文章なので行数で省略しないこと（03 §11） */
.p-reasons__text {
	font-size: .875rem;
	line-height: 1.9;
	color: var(--gray);
}

/* 「No.1」などの根拠を示す注釈（03 §9） */
.p-reasons__note {
	margin-top: var(--sp-6);
	font-size: .75rem;
	line-height: 1.8;
	color: var(--gray);
	text-align: center;
}
/* 料金プラン（.p-plans / .p-plan）は TOP と料金ページの両方で使うため
   components.css に置いています。ここには書かないこと。 */


/* ==================================================================
 * 会社概要（抜粋）
 * ================================================================== */
.p-home-about__text {
	font-size: .9375rem;
	line-height: 2;
}

.p-home-about__table {
	margin-top: var(--sp-6);
}

.p-home-about__table .c-table__row {
	padding-block: var(--sp-3);
}

@media (min-width: 768px) {
	.p-home-about__table .c-table__row {
		grid-template-columns: 100px 1fr;
		gap: var(--sp-4);
	}
}

/* 写真の上辺をアーチに抜く。四角い写真が並ぶ他のセクションと差が出る。 */
.p-home-about__media {
	position: relative;
}

.p-home-about__media img {
	border-radius: 999px 999px var(--radius-lg) var(--radius-lg) / 42% 42% 4% 4%;
}

/* アーチの外側に破線をもう一本まわす（PCのみ・写真より少し大きく） */
@media (min-width: 768px) {
	.p-home-about__media::before {
		content: "";
		position: absolute;
		inset: calc(var(--sp-4) * -1);
		border: 2px dashed var(--border-dot);
		border-radius: 999px 999px var(--radius-lg) var(--radius-lg) / 42% 42% 4% 4%;
	}
}

.p-home-about__media img {
	position: relative;
	width: 100%;
	box-shadow: var(--shadow-hover);
}

/* ==================================================================
 * 施工事例（横スライダー）
 * ------------------------------------------------------------------
 * scroll-snap だけで作っている。ライブラリを足していない。
 * 右端でカードが切れて見えることが「横に続く」という合図になる。
 * ================================================================== */
.p-works-slider {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* これが無いと、最初のカードが左の余白の分だけ切れて始まる
	   （スナップ位置が padding を考慮しないため） */
	scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
	/* スクロールバーは出さず、指とホイールで動かす */
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.p-works-slider::-webkit-scrollbar {
	display: none;
}

.p-works-slider__track {
	display: flex;
	gap: var(--sp-5);
	/* 左端はコンテナの位置に揃え、右端は次のカードが覗く余白を残す */
	padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
	padding-block: var(--sp-3);
	width: max-content;
}

.p-works-slider__item {
	flex: none;
	width: 78vw;
	max-width: 340px;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.p-works-slider__item {
		width: 340px;
		max-width: none;
	}

	/* 1枚おきに下げて、横一直線に並ばないようにする */
	.p-works-slider__item:nth-child(even) {
		margin-top: var(--sp-7);
	}
}

/* カードの白い面は本文だけにして、写真は地の色の上に直接置く。
   そうすると家の形がそのまま輪郭になる。 */
.p-works-slider__item .c-card {
	height: 100%;
	overflow: visible;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.p-works-slider__item .c-card__body {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.p-works-slider__item .c-card:hover .c-card__body {
	border-color: var(--accent);
	box-shadow: var(--shadow-hover);
}

/* ---------- 写真を家の形に抜く ----------
   塗装会社のサイトなので、写真の輪郭そのものを「家」にする。
   四角い写真が並ぶだけの一覧と、見た瞬間の印象が変わる。 */
.p-works-slider .c-card__media {
	aspect-ratio: 1 / 1;
	background: transparent;
	clip-path: polygon(50% 0%, 100% 34%, 100% 100%, 0% 100%, 0% 34%);
}

/* 家型に抜いた分、下辺のグラデーションと種別ラベルは位置を直す */
.p-works-slider .c-card__media::after {
	display: none;
}

.p-works-slider .c-card__media .c-tags {
	top: auto;
	bottom: var(--sp-3);
	left: var(--sp-3);
	right: var(--sp-3);
}

/* 横に動かせることを一言添える */
.p-works-slider__hint {
	margin-top: var(--sp-4);
	font-size: .6875rem;
	letter-spacing: .1em;
	color: var(--gray);
	text-align: center;
}

.p-works-slider__hint .u-en {
	margin-right: var(--sp-2);
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--accent);
}

@media (min-width: 1024px) {
	.p-works-slider__hint {
		display: none;
	}
}

/* ==================================================================
 * 写真の帯（パララックス）
 * ------------------------------------------------------------------
 * 写真だけを固定して、文字が上を流れていくように見せる。
 * カードの並びが続く合間に挟むと、スクロールに緩急が出る。
 * ================================================================== */
.p-band {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 56svh;
	padding-block: var(--sp-10);
	overflow: hidden;
	color: var(--white);
	text-align: center;
	background: var(--primary-dark);
}

.p-band__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

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

/* ---------- パララックス ----------
   写真を縦に少し大きく取り、スクロール量に合わせて上下させる。
   スクロール連動アニメーションに対応していないブラウザでは、
   ただの大きな写真として出る（崩れない）。 */
@supports (animation-timeline: view()) {
	.p-band__media img {
		position: absolute;
		top: -16%;
		left: 0;
		width: 100%;
		height: 132%;
		animation: mk-parallax linear both;
		animation-timeline: view();
	}

	@keyframes mk-parallax {
		from { transform: translateY(-7%); }
		to   { transform: translateY(7%); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-band__media img {
		animation: none;
	}
}

/* 写真の上に文字を置くための重ね */
.p-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(15, 41, 67, .7) 0%,
		rgba(15, 41, 67, .5) 50%,
		rgba(15, 41, 67, .74) 100%
	);
}

.p-band__inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
}

.p-band--right .p-band__inner {
	margin-inline: auto 0;
	text-align: left;
}

.p-band__en {
	display: block;
	margin-bottom: var(--sp-2);
	font-family: var(--font-script);
	font-size: clamp(1.75rem, 4.5vw, 2.75rem);
	line-height: 1;
	color: var(--accent);
	text-transform: lowercase;
}

.p-band__en::first-letter {
	text-transform: uppercase;
}

.p-band__title {
	display: grid;
	gap: var(--sp-2);
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 4.4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .14em;
	text-shadow: 0 2px 24px rgba(15, 41, 67, .45);
}

.p-band__text {
	max-width: 34em;
	margin: var(--sp-5) auto 0;
	font-size: .9375rem;
	line-height: 2.1;
	letter-spacing: .08em;
}

.p-band--right .p-band__text {
	margin-inline: 0;
}

.p-band__cta {
	margin-top: var(--sp-7);
}

.p-band__btn {
	border-color: rgba(255, 255, 255, .7);
	color: var(--white);
}

.p-band__btn:hover {
	background: var(--white);
	border-color: var(--white);
	color: var(--primary);
}

/* コンテンツ案内（.p-menu）は TOP だけでなく全下層ページのフッターにも出るため、
   components.css に置いています。ここには書かないこと
   （home.css は TOP でしか読み込まれないので、下層ページで無スタイルになります）。 */

/* ==================================================================
 * お問い合わせ
 * ================================================================== */
.p-home-contact__method a {
	display: grid;
	gap: var(--sp-2);
	place-items: center;
	height: 100%;
	padding: var(--sp-6) var(--sp-4);
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-align: center;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.p-home-contact__method a:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

.p-home-contact__method--line a:hover {
	border-color: var(--line-green);
}

.p-home-contact__method--tel a:hover,
.p-home-contact__method--form a:hover {
	border-color: var(--primary);
}

.p-home-contact__label {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--primary);
	line-height: 1.4;
}

.p-home-contact__method--tel .p-home-contact__label {
	font-family: var(--font-en);
	font-size: 1.5rem;
}

.p-home-contact__note {
	font-size: .8125rem;
	color: var(--gray);
}

/* ---------- 地図 ---------- */
.p-home-contact__map {
	margin-top: var(--sp-8);
	overflow: hidden;
	border-radius: var(--radius);
	/* 高さを先に確保してCLS（読み込み時のガタつき）を防ぐ */
	aspect-ratio: 16 / 10;
}

@media (min-width: 768px) {
	.p-home-contact__map {
		aspect-ratio: 21 / 8;
	}
}

.p-home-contact__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}