/* =====================================================================
   共通: 事業詳細ページ（サービスページ）service.css
   児童発達支援（jihatsu）/ 放課後等デイサービス（houkago）で共通利用。
   アクセント色は body.is-child-dev / body.is-after-school が
   --color-accent / --color-accent-tint 等を切り替える（tokens.css / base.css）。
   各ページ固有の差分（導入セクション等）は pages/<page>.css 側に置く。
   tokens / base / components に依存。クラス接頭辞は .svc-。
   ===================================================================== */

/* --- セクション背景・テクスチャ ユーティリティ（両ページで使用）--------- */
.bg-offwhite { background: var(--color-bg-offwhite); }
.has-texture { position: relative; }
.has-texture > * { position: relative; z-index: 1; }
.has-texture::after {
	content: "";
	position: absolute;
	inset: 0;
	background-size: 600px;
	pointer-events: none;
	z-index: 0;
}

/* ================= [2] intro — 導入リード帯（共通ベース）================
   児発・放デイ共通の導入帯。全幅のアクセント・テクスチャ帯＋白リード文＋
   右上の装飾写真（.svc-intro__img）。マスター実装は .jihatsu-intro で、
   ページ差分は基本「背景色（--intro-accent）とテクスチャ画像（--intro-texture）」のみ。
   その他で可変なのは inner最大幅（--intro-inner-max・既定 1040）と下パディング
   （--intro-pad-bottom・既定 32。houkago は下端の波＋積み木のぶん広げる）程度。
   放デイ固有の下端波・積み木は .houkago-intro 側が追加で持つ。
   背景はテクスチャ規約（色を焼き込んだ画像を 346.8×327.8px タイルで直接フィル）に準拠。 */
.svc-intro {
	position: relative;
	width: 100%;
	background-color: var(--intro-accent, var(--color-accent));
	background-image: var(--intro-texture, none);
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	/* 下端だけページで調整可（houkago は下端の波＋積み木のぶん広げる）*/
	padding-block: var(--space-24) var(--intro-pad-bottom, var(--space-32));
}
.svc-intro__inner {
	box-sizing: content-box;
	max-width: var(--intro-inner-max, var(--layout-medium));
	margin-inline: auto;
	padding-inline: clamp(var(--space-16), 5vw, var(--space-80));
	padding-block: var(--space-32);
	position: relative;
	display: flex;
}
.svc-intro__lead {
	margin: 0;
	color: var(--color-white);
	font-size: var(--font-size-h3);          /* 18.29px（Figma: 児発・放デイ共通）*/
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-body);    /* 1.8 */
	word-break: break-word;
}
/* 右上の装飾写真（児発・放デイ共通の配置）。画像だけページで差し替える。 */
.svc-intro__img {
	position: absolute;
	right: 120px;
	top: 0;
	width: 320px;
	height: auto;
}
@media (max-width: 768px) {
	.svc-intro__inner {
		align-items: center;
		gap: var(--space-24);
		flex-direction: column;
		padding-top: var(--space-8);
		padding-bottom: 0;
	}
	.svc-intro__lead {
		font-size: var(--font-size-h5);
	}
	.svc-intro__img {
		position: static;
		width: 60%;
	}
}
/* ================= [3] divider-band-1 — intro直下の装飾帯（共通ベース）====
   intro の色を引き継ぐテクスチャ帯＋下端のクリーム波＋中央の積み木イラスト。
   マスターは jihatsu。帯の「色とテクスチャ画像」だけをページ側
   （.{page}-divider-band-1 .svc-divider-band-1__band）で与え、構造・波・イラスト配置は共通。 */
.svc-divider-band-1 {
	position: relative;
	width: 100%;
}
.svc-divider-band-1__band {
	position: relative;
	width: 100%;
	min-height: 100px;
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
}
/* 下端のクリーム波（次セクションへの境界）。帯の最下部に全幅で配置。 */
.svc-divider-band-1__wave {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: auto;
	z-index: 1;
}
/* 積み木の上で両手を上げる子どものイラスト。波形の上・中央に重ねて立たせる。 */
.svc-divider-band-1__illust {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 148px;
	height: auto;
	z-index: 2;
	pointer-events: none;
}
@media (max-width: 1024px) {
	.svc-divider-band-1__illust { width: 15vw; min-width: 110px; }
}
@media (max-width: 768px) {
	.svc-divider-band-1__band { min-height: 120px; }
	.svc-divider-band-1__illust { width: 112px; }
}

/* ================= [4] support-program ================= */
.svc-support-program {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: var(--space-24) var(--space-80);
	/* Figma: 背景色_ライトイエロー地にクレヨン紙テクスチャ（帯/カードと同じ 346.8×327.8px タイル）を
	   直接フィルで重ねる。色はテクスチャ自体に焼き込み済みのため mix-blend-mode は使わない
	   （multiply だと色相がずれ、divider 等の区切り素材と継ぎ目が出る）。 */
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
}

.svc-support-program__inner {
	width: 100%;
	max-width: 1200px;
	padding-inline: var(--space-80);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
}

/* shared c-heading already centers title + lead; just keep lead readable */
.svc-support-program .c-heading__lead {
	max-width: 40em;
}

.svc-support-program__grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	row-gap: var(--space-40);
	column-gap: var(--space-24);
	justify-items: center;
}

/* row 1: two cards centered (columns 2-3 and 4-5) */
.svc-support-program__card:nth-child(1) {
	grid-column: 2 / span 2;
}
.svc-support-program__card:nth-child(2) {
	grid-column: 4 / span 2;
}
/* row 2: three cards (columns 1-2, 3-4, 5-6) */
.svc-support-program__card:nth-child(3) {
	grid-column: 1 / span 2;
}
.svc-support-program__card:nth-child(4) {
	grid-column: 3 / span 2;
}
.svc-support-program__card:nth-child(5) {
	grid-column: 5 / span 2;
}

.svc-support-program__card {
	width: 100%;
	max-width: 340px;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-16) var(--space-16) var(--space-24);
	/* 手描きの枠を border-image で適用（common/svc-support-program-card-border.webp・686×845・透過）。
	   中身はオフホワイト塗り（border 内側＝padding-box まで）。 */
	background-color: var(--color-bg-offwhite);
	background-clip: padding-box;          /* 枠線の外側に背景がはみ出さないように */
	border-image: url("../../images/common/svc-support-program-card-border.webp") 20 / 10px round;
	border-radius: var(--radius-sm);       /* fallback 用 */
}

.svc-support-program__photo-wrap {
	width: 100%;
	aspect-ratio: 420 / 302;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.svc-support-program__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.svc-support-program__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	text-align: center;
	color: var(--color-brown-text);
}

.svc-support-program__title {
	margin: 0;
	font-size: var(--font-size-h3-lg);
	font-weight: var(--font-weight-extrabold);
	line-height: 1.6;
	letter-spacing: 0.02em;
}

.svc-support-program__title-line {
	display: block;
}

.svc-support-program__text {
	margin: 0;
	width: 100%;
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	line-height: 1.8;
}

@media (max-width: 1024px) {
	.svc-support-program__inner {
		padding-inline: var(--space-40);
	}
	.svc-support-program__grid {
		grid-template-columns: repeat(2, minmax(0, 340px));
		justify-content: center;
	}
	.svc-support-program__card,
	.svc-support-program__card:nth-child(1),
	.svc-support-program__card:nth-child(2),
	.svc-support-program__card:nth-child(3),
	.svc-support-program__card:nth-child(4),
	.svc-support-program__card:nth-child(5) {
		grid-column: auto;
	}
	/* center the lone last card on the 2-col layout */
	.svc-support-program__card:nth-child(5) {
		grid-column: 1 / -1;
		justify-self: center;
	}
}

@media (max-width: 768px) {
	.svc-support-program {
		padding-block: var(--space-32) var(--space-40);
	}
	.svc-support-program .c-heading__lead {
		text-align: left;
		font-size: var(--font-size-h6);
	}
	.svc-support-program__inner {
		gap: var(--space-24);
		padding-inline: var(--space-16);
	}
	/* SP は .about-hajime__card と同じフロート型レイアウト：1カラムで積み、
	   写真を左へ float、見出しは写真の右に回り込み、本文は写真の下へ回り込む（clear）。 */
	.svc-support-program__grid {
		grid-template-columns: 1fr;
		gap: var(--space-12);
	}
	.svc-support-program__card,
	.svc-support-program__card:nth-child(5) {
		display: block;          /* flex を解除＝写真を float し本文を回り込ませる */
		max-width: none;
		padding: var(--space-12);
		text-align: left;
	}
	.svc-support-program__photo-wrap {
		float: left;
		width: 33%;
		margin: 0 var(--space-12) var(--space-8) 0;
	}
	.svc-support-program__body {
		display: block;          /* float を回り込ませるため block に */
	}
	/* 見出しは写真の右・左寄せ・h5。各行に手描きの下線を敷くため flex 縦並びで
	   行幅＝文字幅に詰める（.about-hajime__card-title と同方式）。 */
	.svc-support-program__title {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
		text-align: left;
		font-size: var(--font-size-h5);
		margin: var(--space-8) 0 var(--space-8);
	}
	.svc-support-program__title-line {
		padding-bottom: var(--space-4);
		background: url("../../images/common/underline.png") left bottom / 100% 2px no-repeat;
	}
	/* 本文は写真の下へ回り込む（clear）・h6。 */
	.svc-support-program__text {
		font-size: var(--font-size-h6);
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-base);
		clear: both;
		text-align: left;
	}
}

/* ================= [5] divider-band-2 ================= */
/* ================= [5] divider-band-2 ================= */
/* 支援プログラムと特徴セクションの間に置く装飾ウェーブ帯。
   ライトイエロー → ホワイトへ移行する波形（Figma 76:18493）。 */
.svc-divider-band-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background-color: var(--color-white);
}

.svc-divider-band-2__band {
  position: relative;
  width: 100%;
  height: 78px;
  flex-shrink: 0;
}

.svc-divider-band-2__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

@media (max-width: 768px) {
  .svc-divider-band-2__band { height: 48px; }
}

/* ================= [6] features ================= */
/* =========================================================
   児童発達支援 — ippoの支援の特徴（Features）
   Figma node 76:18495 ✅Describe_0008
   ========================================================= */
.svc-features {
	background: var(--color-white);
	padding-block: var(--space-32) var(--space-80);
}

.svc-features__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--space-80);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
}

/* 特徴カードのリスト */
.svc-features__list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
}

/* 1行＝交互に左右へインセット（写真左の行は左側を内側へ寄せる） */
.svc-features__row {
	display: flex;
	align-items: center;
	width: 100%;
}
.svc-features__row--photo-left {
	padding-left: var(--space-80);
}
.svc-features__row--photo-right {
	padding-right: var(--space-80);
}

/* テクスチャ付き（薄黄）のカード（about-episode__card と同系パターン） */
.svc-features__card {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--space-56);
	padding: var(--space-24) var(--space-32);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/features-card-texture.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
}

/* 写真＋番号バッジ */
.svc-features__media {
	position: relative;
	flex-shrink: 0;
	width: 420px;
	max-width: 420px;
}
.svc-features__photo {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

/* 積み木の番号バッジ（写真の角に重ねる） */
.svc-features__badge {
	position: absolute;
	bottom: -18px;
	height: auto;
	pointer-events: none;
}
.svc-features__badge--left {
	left: -16px;
	width: 126px;
}
.svc-features__row--photo-left:nth-of-type(3) .svc-features__badge--left {
	width: 128px;
}
.svc-features__badge--right {
	right: -16px;
	width: 126px;
}

/* テキスト */
.svc-features__body {
	flex: 1 0 0;
	min-width: 0;
	max-width: 560px;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	color: var(--color-brown-text);
}
.svc-features__title {
	margin: 0;
	font-size: var(--font-size-h2-lead); /* 25.6px */
	font-weight: var(--font-weight-extrabold);
	line-height: 1.6;
}
.svc-features__text {
	margin: 0;
	font-size: var(--font-size-body); /* 16px */
	font-weight: var(--font-weight-medium);
	line-height: 1.8;
}
.svc-features__text p {
	margin: 0;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
	.svc-features {
		padding-top: 0;
		padding-bottom: var(--space-40);
	}
	.svc-features__inner {
		padding-inline: var(--space-16);
		gap: var(--space-24);
	}
	.svc-features__list {
		gap: var(--space-16);
	}
	.svc-features__row--photo-left,
	.svc-features__row--photo-right {
		padding-inline: 0;
	}
	.svc-features__card,
	.svc-features__row--photo-right .svc-features__card {
		flex-direction: column;
		gap: var(--space-16);
		padding: var(--space-16) var(--space-16) var(--space-24);
	}
	.svc-features__row--photo-right .svc-features__card {
		flex-direction: column-reverse;

	}
	.svc-features__media {
		width: 75%;
		max-width: 420px;
		margin-inline: auto;
	}
	.svc-features__photo {
		height: auto;
		aspect-ratio: 420 / 260;
	}
	.svc-features__badge--left,
	.svc-features__row--photo-left:nth-of-type(3) .svc-features__badge--left,
	.svc-features__badge--right {
		width: 80px;
	}
	.svc-features__title {
		font-size: var(--font-size-h5);
	}
	.svc-features__body {
		gap: var(--space-8);
		max-width: none;
		width: 100%;
	}
	.svc-features__text {
		font-size: var(--font-size-h6);
	}
}

/* ================= [7] divider-band-3 ================= */
/* ================= [7] divider-band-3 ================= */
.svc-divider-band-3 {
	width: 100%;
	line-height: 0;
}

.svc-divider-band-3__band {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ================= [8] instruction-content ================= */
/* ===== 児童発達支援：指導内容（Figma 76:18542 追加Counter_00002）===== */
.svc-instruction-content {
  color: var(--color-brown-text);
  padding-block-end: var(--space-80);
  /* Figma: 背景色_オフホワイト地にクレヨン紙テクスチャ（オフホワイト版）を直接フィル
     （帯/カードと同じ 346.8×327.8px タイル）。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;
}

.svc-instruction-content__inner {
  box-sizing: content-box;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-16), 5vw, var(--space-80));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}

/* 2カラム */
.svc-instruction-content__cards {
  display: flex;
  gap: var(--space-32);
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.svc-instruction-content__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  background: var(--color-white);
  border: 2px solid var(--color-brown-text);
  border-image: url("../../images/common/svc-instruction-content-card-border.png") 20 / 10px;
  border-radius: var(--radius-lg); /* 24px */
  overflow: hidden;
  padding-block-end: var(--space-24);
}

@media (max-width: 768px) {
	.svc-instruction-content__card {
		border-image: url("../../images/common/svc-instruction-content-card-border.png") 20 / 8px;
		border-radius: 20px;
	}
}

/* テクスチャ付きの見出し帯（背景色_イエロー地にクレヨン紙テクスチャを直接フィル。
   346.8×327.8px タイル。multiply は使わない＝flow/saiyo の黄カードと同方針）。
   角丸は親カードの overflow:hidden でクリップ。 */
.svc-instruction-content__band {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-8);
  background-color: var(--color-bg-yellow);
  background-image: url("../../images/common/tex-yellow-deep.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
}
.svc-instruction-content__band-title {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: var(--font-size-h2-lead); /* 25.6px */
  font-weight: var(--font-weight-extrabold);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-brown-text);
}

.svc-instruction-content__body {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: var(--font-size-h3); /* 18.29px */
  font-weight: var(--font-weight-bold);
  line-height: 1.8;
  color: var(--color-brown-text);
}

/* レスポンシブ：縦積み */
@media (max-width: 768px) {
	.svc-instruction-content {
		padding-top: var(--space-24);
		padding-bottom: var(--space-40);
	}
	.svc-instruction-content__inner {
		gap: var(--space-24);
	}
  .svc-instruction-content__cards {
    flex-direction: column;
    gap: var(--space-16);
  }
  /* 縦積み時は flex:1 1 0（PCの等幅カラム用）を解除する。
     column 方向では flex-basis:0 が高さ0扱いになりカードが潰れて中身が見えなくなるため、
     内容に応じた高さへ戻す。 */
  .svc-instruction-content__card {
    flex: 0 0 auto;
		gap: var(--space-16);
		padding-bottom: var(--space-16);
  }
	.svc-instruction-content__band-title {
		font-size: var(--font-size-h3);
	}
	.svc-instruction-content__body {
		font-size: var(--font-size-h5);
		padding-inline: var(--space-16);
	}
}

/* ================= [9] divider-band-4 ================= */
/* ================= [9] divider-band-4 ================= */
/* 児童発達支援 装飾波帯（Figma 76:18557 / Frame 321・テキストなし）
   指導内容 と 1日の流れタイムライン の間の波形ディバイダー。
   波の上端は透過 → 上のセクションが透けて見える。 */
.svc-divider-band-4 {
	display: block;
	width: 100%;
	line-height: 0;
}

.svc-divider-band-4__band {
	display: block;
	width: 100%;
	line-height: 0;
}

.svc-divider-band-4__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ================= [10] daily-flow ================= */
.svc-daily-flow {
	position: relative;
	/* 次セクション fees の上端から上にはみ出す装飾波形（.svc-divider-band-5、高さ ≒ 5.42vw）の
	   分だけ下余白を広げ、コンテンツ（カード・子ども）が波形に被らないようにする（波形上に約80px確保）。 */
	padding-bottom: calc(var(--space-80) + 5.42vw);
	/* Figma: 背景色_ライトイエロー地にクレヨン紙テクスチャを直接フィル（346.8×327.8px タイル）。
	   multiply は使わない（色相がずれるため）。 */
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	overflow: hidden;
	/* 時刻テキスト色（ページ固有・濃色） */
	--svc-daily-flow-weekday: #258653;
	--svc-daily-flow-weekend: #1083aa;
}

.svc-daily-flow__inner {
	position: relative; /* 装飾の子ども（__child）の配置基準 */
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--space-80);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
}

/* ===== 本体：2カラム ===== */
.svc-daily-flow__body {
	display: flex;
	gap: var(--space-56);
	align-items: flex-start;
	justify-content: center;
	width: 100%;
}

.svc-daily-flow__card {
	flex: 1 1 0;
	min-width: 0;
	background-color: var(--color-white);
	border: 1px solid var(--color-brown-text);
	border-radius: 24px;
	overflow: hidden;
}

/* ===== カラム見出し（平日/休日）===== */
.svc-daily-flow__col-head {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 57px;
	padding-block: var(--space-8);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.svc-daily-flow__col-title {
	font-size: var(--font-size-h2-lead);
	font-weight: var(--font-weight-extrabold);
	line-height: 1.6;
	color: var(--color-white);
	text-align: center;
}

/* ===== タイムライン ===== */
.svc-daily-flow__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 縦のつながり線：各ドットから「次のドット」へ1本ずつ引く（最終項目は線なし）。
   ドット中心X = padding24 + 時刻62 + gap24 + ドット半径7 = 117px。
   ドット中心Y = padding24 + margin6 + 半径7 = 37px。
   height:100% は項目の高さ＝次のドット中心までの距離。テキスト量に依存せず
   常に先頭ドット〜末尾ドットだけを結び、はみ出さない。 */
.svc-daily-flow__item:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 37px;
	left: calc(var(--space-24) + 62px + var(--space-24) + 7px);
	width: 3px;
	height: 100%;
	transform: translateX(-50%);
	border-radius: 999px;
	background-color: var(--svc-daily-flow-line);
	opacity: 0.5;
	z-index: 1;
}

.svc-daily-flow__card--weekday {
	--svc-daily-flow-line: var(--color-logo-green);
	--svc-daily-flow-time: var(--svc-daily-flow-weekday);
}

.svc-daily-flow__card--weekend {
	--svc-daily-flow-line: var(--color-logo-blue);
	--svc-daily-flow-time: var(--svc-daily-flow-weekend);
}

.svc-daily-flow__item {
	position: relative;
	display: flex;
	gap: var(--space-24);
	align-items: flex-start;
	padding: var(--space-24);
}

/* 偶数行に淡い縞（Figma: Item の背景テクスチャ＝オフホワイト版を直接フィル）。
   白行（奇数）と交互にする。色を焼き込んだテクスチャを直接敷くため multiply は使わない。
   背景フィルなので timeline 線（::before）やコンテンツは自然に前面に出る。 */
.svc-daily-flow__item:nth-child(even) {
	background: url("../../images/common/tex-offwhite.webp") top left / 346.8px 327.8px repeat;
}
/* コンテンツを timeline 線（::before）より前面に出す */
.svc-daily-flow__item > * { position: relative; z-index: 1; }

.svc-daily-flow__time {
	flex: 0 0 62px;
	width: 62px;
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
	color: var(--svc-daily-flow-time);
	text-align: center;
}

/* つながり線上のドット */
.svc-daily-flow__dot {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	margin-top: 6px;
	border-radius: 50%;
	background-color: var(--svc-daily-flow-line);
}

.svc-daily-flow__detail {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	color: var(--color-brown-text);
	line-height: 1.6;
}

.svc-daily-flow__item-title {
	margin: 0;
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-bold);
}

.svc-daily-flow__item-desc {
	margin: 0;
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-medium);
}

/* ===== 装飾：クレヨンを持つ子ども ===== */
/* Figma: 左カラム（平日カード）の左下に、カード左端の少し外側へ配置。
   __inner（1200px・センタリング）基準で配置。左端は inner 左端から var(--space-64)
   ＝左カード左端（padding 80）の手前 16px。bottom:0 でカード下端（コンテンツ最下部）に接地。 */
.svc-daily-flow__child {
	position: absolute;
	left: calc(var(--space-64) + var(--space-40));
	bottom: calc(var(--space-16) * -1);
	width: 120px;
	height: auto;
	pointer-events: none;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
	.svc-daily-flow {
		padding-top: var(--space-24);
	}
	.svc-daily-flow__inner {

		padding-inline: var(--space-16);
		gap: var(--space-24);
	}
	.svc-daily-flow__col-head {
		min-height: initial;
	}
	.svc-daily-flow__col-title {
		font-size: var(--font-size-h3);
	}

	.svc-daily-flow__body {
		flex-direction: column;
		gap: var(--space-16);
		width: 100%;
	}

	.svc-daily-flow__card {
		width: 100%;
		/* 縦積み時は flex:1 1 0（PCの等幅カラム用）を解除。column 方向では
		   flex-basis:0 が高さ0扱いになりカードが潰れて中身が見えなくなるため、
		   内容に応じた高さへ戻す（指導内容カードと同方針）。 */
		flex: 0 0 auto;
	}

	.svc-daily-flow__child {
		bottom: -70px;
		left: var(--space-16);
		width: 120px;
	}
	.svc-daily-flow__item:not(:last-child)::before {
		left: calc(var(--space-16) + 62px + var(--space-24) + 7px);
		top: 35px;
	}
	.svc-daily-flow__item {
		padding: var(--space-16);
	}
	.svc-daily-flow__time {
		font-size: var(--font-size-h5);
	}
	.svc-daily-flow__item-title {
		font-size: var(--font-size-h4);
	}
	.svc-daily-flow__item-desc {
		font-size: var(--font-size-h6);
	}
}

/* ================= [11] divider-band-5 ================= */
/* ================= [11] divider-band-5 ================= */
/* 児童発達支援 装飾バンド5（Figma Frame 315 / 76:18690）======================
   daily-flow（クリーム）→ fees（白）への波形トランジション。fees の中に入れ、
   absolute で fees 上端から上にはみ出して配置（白い下端が fees 白地と連続、
   波形の上は透過して daily-flow のクリームが見える）。レイアウト高さは持たない。 */
.svc-divider-band-5 {
	position: absolute;
	left: 0;
	bottom: 100%; /* fees 上端のすぐ上に接して上方へはみ出す */
	width: 100%;
	line-height: 0;
	/* 背景は .svc-daily-flow と同一（ライトイエロー地＋クレヨン紙テクスチャ。波形の透過部が
	   上の daily-flow と地続きに見えるようにする）。multiply は使わない。 */
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
}

.svc-divider-band-5__band {
	display: block;
	width: 100%;
	height: auto;
}

/* ================= [12] fees ================= */
.svc-fees {
	position: relative; /* 上にはみ出す divider-band-5 の配置基準 */
	background-color: var(--color-white);
	padding-bottom: var(--space-64);
}

.svc-fees__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--space-80);
}

.svc-fees__body {
	display: flex;
	gap: var(--space-40);
	align-items: flex-start;
	justify-content: center;
	width: 100%;
}

.svc-fees__main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-56);
}

.svc-fees__lead {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-body);
}

.svc-fees__table-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	width: 100%;
}

.svc-fees__table {
	width: 100%;
	border-collapse: collapse;
	/* Figma: 背景色_オフホワイト地にクレヨン紙テクスチャ（346.8×327.8px タイル）。 */
	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;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
}

.svc-fees__th,
.svc-fees__td {
	border: 1px solid var(--color-brown-sub);
	padding: var(--space-8);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-base);
}

.svc-fees__th {
	width: 450px;
	text-align: left;
}

.svc-fees__td {
	text-align: center;
}

.svc-fees__note {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-body);
	text-align: right;
}

.svc-fees__chart {
	position: relative;
	flex: 0 0 auto;
	width: 373px;
	max-width: 100%;   /* 狭い画面（〜360px）で固定373pxが溢れないように */
	margin: 0;
	padding: var(--space-24) 0 var(--space-40);
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: var(--radius-md);
}

/* 円グラフはラベル（利用者/自治体の負担額）込みで1枚の画像に書き出し済み。 */
.svc-fees__chart-img {
	display: block;
	width: 233px;
	height: auto;
}

@media (max-width: 768px) {
	.svc-fees {
		padding-top: var(--space-24);
		padding-bottom: 0;
	}
	.svc-fees__inner {
		padding-inline: var(--space-16);
		gap: var(--space-24);
	}

	.svc-fees__lead {
		font-size: var(--font-size-h5);
	}
	.svc-fees__body {
		flex-direction: column;
		align-items: center;
	}

	.svc-fees__main {
		width: 100%;
		gap: var(--space-24);
	}

	.svc-fees__th {
		width: 50%;
	}
	.svc-fees__th,
	.svc-fees__td {
		font-size: var(--font-size-h5);
	}
	.svc-fees__note {
		font-size: var(--font-size-2xs);
		text-align: center;
	}
}

/* ================= [13] divider-band-6 ================= */
/* ================= [13] divider-band-6 ================= */
/* ===== 児童発達支援 / 装飾バンド6（Figma Frame 278 / 76:18725）=====
   高さ194pxのオフホワイト波形バンド。境界付近に積み木で遊ぶ子どもの
   色鉛筆イラストが浮かび、概要セクションへの導入となる。テキストなし。 */
.svc-divider-band-6 {
	position: relative;
	width: 100%;
	height: 194px;
	background-color: var(--color-white);
	pointer-events: none;
	overflow: visible;
}
/* オフホワイトの波形バンド（Rectangle 39）下部全幅 */
.svc-divider-band-6__band {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom center;
	display: block;
}
/* 積み木で遊ぶ子どものイラスト（76:18727）。
   Figma: 1440px幅フレーム内 left=630(=43.75%) / 表示幅180px(=12.5%)。
   バンド上端の境界をまたいで上にはみ出す。 */
.svc-divider-band-6__illust {
	position: absolute;
	left: 43.75%;
	bottom: 0;
	width: 12.5%;
	max-width: 180px;
	height: auto;
	display: block;
}

@media (max-width: 768px) {
	.svc-divider-band-6 {
		height: 120px;
	}
	.svc-divider-band-6__illust {
		left: 38%;
		width: 20%;
		max-width: 120px;
	}
}

/* ================= [14] overview ================= */
/* ===== 児童発達支援概要（overview） ===== */
.svc-overview {
	position: relative;
	padding: var(--space-24) var(--space-80) var(--space-80);
	background-color: var(--color-bg-offwhite);
	background-image: var(--overview-bg);
	background-position: top left;
	background-size: 346.8px 327.8px;
}

.svc-overview__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-56);
	max-width: 1200px;
	margin-inline: auto;
}

.svc-overview__table {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	width: 100%;
	max-width: 640px;
	margin: 0;
	/* 上端の罫線（手描きの下線素材＝top-kagai__eyebrow と同じ common/underline.png）。PC=4px */
	background: url("../../images/common/underline.png") left top / 100% 4px no-repeat;
	padding-top: var(--space-16);
}

.svc-overview__row {
	display: flex;
	align-items: center;
	gap: var(--space-40);
	padding-inline: var(--space-16);
	padding-bottom: var(--space-16);
	/* 各行の下端に罫線（手描きの下線素材＝top-kagai__eyebrow と同じ common/underline.png）。PC=4px */
	background: url("../../images/common/underline.png") left bottom / 100% 4px no-repeat;
	color: var(--color-brown-text);
}

.svc-overview__row--area {
	/* Figma: 対応エリア行も他行と同じく dt は縦中央揃え（中央ブロックに揃う）。 */
	align-items: center;
}

.svc-overview__label {
	flex: 0 0 120px;
	width: 120px;
	margin: 0;
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
}

.svc-overview__value {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-body);
}

.svc-overview__line {
	display: block;
	white-space: pre;
}

/* 対応エリア */
.svc-overview__value--area {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.svc-overview__area {
	display: flex;
	flex-direction: column;
	line-height: var(--line-height-body);
}

.svc-overview__area-name {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-extrabold);
}

.svc-overview__area-detail {
	/* Figma: 教室名に対し約2スペース分（≒0.5em）の浅い字下げ。 */
	padding-left: 0.5em;
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
}

@media (max-width: 768px) {
	.svc-overview {
		padding: var(--space-8) var(--space-24) var(--space-64);
		background-size: 240px 227px;
	}
	.svc-overview__inner {
		gap: var(--space-24);
	}

	/* 下線素材は SP=2px に揃える（PC は 4px）。 */
	.svc-overview__table { background-size: 100% 2px; padding-top: var(--space-12); gap: var(--space-12); }
	.svc-overview__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
		padding-bottom: var(--space-12);
		padding-inline: var(--space-8);
		background-size: 100% 2px;
	}

	.svc-overview__row--area {
		align-items: flex-start;
	}

	.svc-overview__label {
		font-size: var(--font-size-h5);
		flex-basis: auto;
		width: auto;
	}
	.svc-overview__value {
		font-size: var(--font-size-h6);
		gap: var(--space-8);
		padding-left: 1em;
	}
	.svc-overview__area-name {
		font-size: var(--font-size-h6);
	}
	.svc-overview__area-detail {
		font-size: var(--font-size-h6);
	}
}

/* ================= [15] divider-band-7 ================= */
.svc-divider-band-7 {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--color-bg-offwhite);
	line-height: 0;
}

.svc-divider-band-7__band {
	display: block;
	width: 100%;
	height: auto;
	/* 背景：オフホワイトのクレヨン紙テクスチャ（346.8×327.8px タイル・top-left・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;
}

/* ================= [16] cta-faq ================= */
/* ===== S16 ご利用の流れ・よくある質問 CTA ============================ */
/* Figma 76:18784「Frame 299」: クリーム地＋紙テクスチャ。親子＋双葉イラストを
   中央上部に置き、その下にブラウン見出し、最下部に丸矢印付きピルボタン。 */
.svc-cta-faq {
	position: relative;
	padding-block: 0 var(--space-80);
	/* Figma: 背景色_イエロー地にクレヨン紙テクスチャ（テクスチャ付きの黄色／346.8×327.8px タイル）。 */
	background-color: var(--color-bg-yellow);
	background-image: url("../../images/common/tex-yellow-deep.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
}
.svc-cta-faq__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(var(--space-16), 5vw, var(--space-80));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
}
.svc-cta-faq__illust {
	display: block;
	width: 320px;
	max-width: 80%;
	height: auto;
}
.svc-cta-faq__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
	width: 100%;
}
.svc-cta-faq__title {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
	text-align: center;
}

/* FAQ-CTAのボタンは共通コンポーネント .c-morebtn--offwhite（components/buttons.css）へ移管。 */

@media (max-width: 768px) {
	.svc-cta-faq { padding-bottom: var(--space-40); }
	.svc-cta-faq__illust {
		max-width: 180px;
	}
	.svc-cta-faq__inner {
		gap: var(--space-24);
	}
	.svc-cta-faq__body {
		gap: var(--space-24);
	}
	.svc-cta-faq__title { font-size: var(--font-size-h3); }
}

/* ================= [17] divider-band-8 ================= */
/* ================= [17] divider-band-8 ================= */
.svc-divider-band-8 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	/* .svc-cta-faq と同じ背景色_イエロー地のクレヨン紙テクスチャ（346.8×327.8px タイル）。 */
	background-color: var(--color-bg-yellow);
	background-image: url("../../images/common/tex-yellow-deep.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
}

.svc-divider-band-8__band {
	position: relative;
	width: 100%;
	height: 74px;
	flex-shrink: 0;
}

.svc-divider-band-8__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

@media (max-width: 768px) {
	.svc-divider-band-8__band {
		height: 24px;
	}
}

/* ================= [18] daily-photos ================= */
.svc-daily-photos {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: var(--space-80);
	/* Figma: オフホワイト地のクレヨン紙テクスチャ（346.8×327.8px タイル）。
	   カード画像の透過部からこの地色が見える。 */
	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;
}

.svc-daily-photos__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-64);
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

/* 横スクロール領域（無限・等速・低速の自動スクロール＝マーキー）。
   親(1200)から画面端まで全幅に展開する。 */
.svc-daily-photos__scroller {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
}

/* カードを2セット並べ、1セット分（-50%）を等速ループ＝シームレスな無限スクロール。
   各カードの右マージンで間隔を作ることで 2N 個＝2周期となり、-50% がちょうど1周期になる。 */
.svc-daily-photos__track {
	display: flex;
	align-items: center;
	width: max-content;
	list-style: none;
	margin: 0;
	/* 上下余白はカード画像（フレーム py40）に焼き込み済みのため track には付けない。 */
	animation: svc-daily-marquee 45s linear infinite;
}

.svc-daily-photos__item {
	flex: 0 0 auto;
	margin-inline-end: var(--space-16);
}

@keyframes svc-daily-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
/* モーション低減設定では自動スクロールを止める */
@media (prefers-reduced-motion: reduce) {
	.svc-daily-photos__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* 写真＋背景の色付きカードを Figma から1枚画像として書き出したもの（テクスチャ・枠込み）。
   高さを揃えて並べると写真位置（フレーム内 y40 固定）が自然に揃う。 */
.svc-daily-photos__card-img {
	display: block;
	height: 306px;
	width: auto;
}

@media (max-width: 768px) {
	.svc-daily-photos {
		padding-bottom: var(--space-40, 40px);
		padding-top: var(--space-24);
	}

	.svc-daily-photos__inner {
		gap: var(--space-24);
	}

	.svc-daily-photos__card-img {
		height: 160px;
	}
}

/* ================= [19] divider-band-9 ================= */
/* ================= [19] divider-band-9 ================= */
/* ===== 児童発達支援 / divider-band-9 装飾ウェーブ帯（Figma 76:18863・テキストなし）=====
   ライトイエローの紙テクスチャ地（日常写真ストリップ末端）→ 白地（教室紹介）への橋渡し。
   白いウェーブ（Rectangle 39）を帯の下端いっぱいに敷き、頂点を不規則に上げる。
   帯の高さ95px（Figma Frame 283 実寸）。 */
/* daily-photos（オフホワイト紙テクスチャ）→ 教室紹介（白地）への波形ブリッジ。
   他のディバイダー帯と同じく画像（白いウェーブ・上部透過）を使う。地色は上のセクションと
   揃えてオフホワイトテクスチャにし、ウェーブ画像の透過部からこの地色が見える。 */
.svc-divider-band-9 {
	width: 100%;
	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;
}

.svc-divider-band-9__band {
	position: relative;
	width: 100%;
	height: 95px; /* Figma: Frame 283 高さ */
	flex-shrink: 0;
}

.svc-divider-band-9__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: fill; /* 全幅に非等比で伸縮（旧 SVG preserveAspectRatio=none と同じ）*/
}

@media (max-width: 768px) {
	.svc-divider-band-9__band { height: 56px; }
}

/* ================= [20] classrooms ================= */
/* ===== 教室のご紹介 (classrooms) ===================================== */
.svc-classrooms {
	background: var(--color-white);
	padding-bottom: var(--space-80);
}
.svc-classrooms__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--space-80);
}
.svc-classrooms__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-56);
	width: 100%;
}
/* カルーセル（c-rooms）は親が flex+align-items:center のため放置すると
   コンテンツ幅（3カード分）に縮み、中央寄せで画面外へはみ出す（左右スクロール発生）。
   トップ（.top-inner=ブロック幅100%）と同様に inner 幅いっぱいへ伸ばし、
   SPは viewport の overflow:hidden でトラックをクリップさせる。 */
.svc-classrooms .c-rooms-carousel {
	width: 100%;
}

/* 教室カードの配置（PC=3カラム／SP=カルーセル）は共通コンポーネント c-rooms
   （components/rooms-carousel.css）へ移管。トップ・教室一覧と同一。
   教室カード本体は components/classroom-card.css の .c-classroom-card、
   施設一覧ボタンは共通コンポーネント .c-morebtn（components/buttons.css）。
   ここではセクション枠のみを定義する。 */

@media (max-width: 768px) {
	.svc-classrooms__inner { padding-inline: 0; gap: var(--space-24); }
	.svc-fees__chart {
		padding-top: 0;
	}
	.svc-fees__chart-img {
		width: 180px;
	}
}

/* ================= [21] divider-band-10 ================= */
.svc-divider-band-10 {
	position: relative;
	width: 100%;
	background-color: var(--color-white);
	line-height: 0;
}

.svc-divider-band-10__wave {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center bottom;
}

/* ================= [22] cta-visit ================= */
/* 見学・体験CTA（.svc-cta-visit 系）は components/cta-visit.css の .c-cta-visit へ移管。 */

/* ================= [23] divider-band-11 ================= */
/* divider-band-11 (order=23) — no CSS.
   Node 76:18923 is the global site header/navigation, already owned by header.php.
   Nothing is rendered for this page-section slot, so no styles are needed. */