/* components/cta-visit.css — 見学・体験CTA（Figma: Frame 342）
   黄色地のバナー（イラスト＋見出し＋ピルボタン）＋下端のオフホワイト波。
   about・事業詳細（児発／放デイ）・教室一覧で共用。 */

.c-cta-visit {
	position: relative;
	background: var(--color-bg-offwhite);
	margin-block: 0;
}
.c-cta-visit__band {
	position: relative;
	/* Figma: 背景色_オフホワイト地のクレヨン紙テクスチャ（346.8×327.8px タイル）を直接フィル。
	   旧実装の「黄色＋赤系 s00 を multiply」は色が違う（黄色く濁る）ため置き換え。 */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	/* 下端は、フッター上端のウェーブ（c-footer__wave＝高さ ≒ 5.42vw）が上にはみ出してくる分を
	   加算し、ボタンが波形に被らないようにする。 */
	padding-block: var(--space-80) calc(var(--space-120) + 5.42vw);
}
/* コラム・お知らせ（一覧／カテゴリ／詳細）は CTA 地を黄色テクスチャに切替。 */
.post-type-archive-column .c-cta-visit__band,
.tax-column_cat .c-cta-visit__band,
.single-column .c-cta-visit__band,
.post-type-archive-news .c-cta-visit__band,
.tax-news_cat .c-cta-visit__band,
.single-news .c-cta-visit__band {
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
}
/* 上端に薄黄の波（直前セクション → 黄色 CTA への入り口の装飾）。 */
.post-type-archive-column .c-cta-visit__band::before,
.tax-column_cat .c-cta-visit__band::before,
.single-column .c-cta-visit__band::before,
.post-type-archive-news .c-cta-visit__band::before,
.tax-news_cat .c-cta-visit__band::before,
.single-news .c-cta-visit__band::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	aspect-ratio: 1440 / 74;
	background-image: url("../../images/top/top-wave-light-yellow.webp");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% 100%;
}
.c-cta-visit__inner {
	position: relative;
	z-index: 1;
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-80);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-80);
}
.c-cta-visit__illust {
	flex: 0 0 auto;
	width: 21rem;
	max-width: 80%;
	height: auto;
}
.c-cta-visit__body {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}
.c-cta-visit__heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}
.c-cta-visit__title {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
}
.c-cta-visit__sub {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-h3-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
	letter-spacing: var(--letter-spacing-wide);
}
/* 見学・体験CTAのボタンは共通コンポーネント .c-morebtn（components/buttons.css）へ移管。 */

/* --- 波形ディバイダー（本文 → CTA への装飾バンド）-------------------------
   c-cta-visit の直前に置く黄色地の波バンド。教室詳細・ご利用の流れ等で共用。 */
.classroom-divider {
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	line-height: 0;
}
.classroom-divider__wave {
	display: block;
	width: 100%;
	height: auto;
}

/* SP：トップの見学・体験CTA（.top-cta）とフォントサイズ・余白を揃える。
   下端paddingのみフッター上端の波（≒5.42vw）が被るぶんを加算する（c-cta-visit 固有）。 */
@media (max-width: 768px) {
	.c-cta-visit__inner {
		flex-direction: column;
		gap: var(--space-16);
		padding-inline: var(--space-24);
	}
	.c-cta-visit__band {
		padding-block: var(--space-24) calc(var(--space-64) + 5.42vw);
	}
	.c-cta-visit__illust {
		display: block;
		max-width: 60%;
		margin-inline: auto;
	}
	.c-cta-visit__body {
		align-items: center;
		text-align: center;
		gap: var(--space-24);
	}
	.c-cta-visit__title { font-size: var(--font-size-h3); }   /* 32px → 18.29px */
	.c-cta-visit__sub { font-size: var(--font-size-h5); }     /* 21.33px → 14.22px */
}