/* =====================================================================
   ページ: 教室一覧・空き状況のご案内（Kyoshitsu）  Figma 76:20839
   MV=components/mv.css(.c-mv) / 見出し=c-heading /
   教室カード=components/classroom-card(.c-classroom-card) /
   CTA=components/cta-visit(.c-cta-visit) を共通利用。
   本ファイルは MV の左右イラスト・教室一覧セクション・波形ディバイダーの差分のみ。
   ===================================================================== */

/* base.css の section{margin-block:48px} を打ち消す（余白は各セクションのpaddingで管理）。
   未リセットだと divider 帯の上下に 48px の body 背景余白が出て波が flush にならない。 */
.kyoshitsu section { margin-block: 0; }

/* --- セクション内 z-index 基準ユーティリティ（紙テクスチャ廃止） --------------- */
.has-texture { position: relative; }
.has-texture > * { position: relative; z-index: 1; }

/* --- MV：左右の子どもイラスト（オーバーレイは既定の緑系ティント）-------- */
.kyoshitsu-mv__fig { position: absolute; bottom: 0; height: auto; z-index: 3; pointer-events: none; }
.kyoshitsu-mv__fig--left  { left: 8.3%;  width: min(18.3%, 264px); bottom: 6%; }
.kyoshitsu-mv__fig--right { right: 11.6%; width: clamp(56px, 6.7%, 96px); bottom: 5%; }

/* --- 教室一覧セクション -------------------------------------------------
   背景：ライトイエローのテクスチャ（Figma 76:20839。色を焼き込んだ紙テクスチャを
   346.8×327.8px で直接フィル。multiply は使わない＝CTA の波形と継ぎ目を出さない）。 */
.kyoshitsu-list {
	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;
	padding-block: var(--space-40) var(--space-80);
}
/* 見出し下余白：ブロック組み（gap なし）のため c-heading に付与
   （共通 .c-heading は余白を持たない方針）。 */
.kyoshitsu-list__inner > .c-heading { margin-bottom: var(--space-32); }

.kyoshitsu-list__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-80);
}

/* 見出し（c-heading）の本ページ向け調整：見出しグループとカードの間隔を 40px に。 */
.kyoshitsu-list .c-heading {
	margin-block: 0 var(--space-40);
}
.kyoshitsu-list .c-heading__lead {
	margin-top: var(--space-8);
	font-size: var(--font-size-h5);
	line-height: 1.8;
}

/* 教室カードの配置・カルーセルは共通コンポーネント components/rooms-carousel.css
   （.c-rooms）が担当。トップ「教室のご紹介」と同一デザイン（PC=3カラム / SP=カルーセル）。 */

/* --- 波形ディバイダー（教室一覧 → CTA への装飾バンド）------------------- */
.kyoshitsu-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;
}
.kyoshitsu-divider__wave {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 768px) {
	/* トップ「教室のご紹介」と同じく、SPは inner 左右padding=16pxにして
	   カルーセル（.c-rooms-carousel）が画面端まで全幅ブリードできるようにする。 */
	.kyoshitsu-list__inner { padding-inline: var(--space-16); }
	/* SP では左右の子どもイラストは非表示 */
	.kyoshitsu-mv__fig { display: none; }
}