@charset "utf-8";

:root {
	--p-card-bg: #effaea;
	--p-cell-bg: #f0f9f5;
	--p-bg-green: url("../images/common/bg_green.png") center / cover no-repeat;
	--p-line: #a5dbd2;
	--p-body-text: #5f7f6c;

	/* 「入園のご案内」（template-admission.php）用 */
	--p-adm-band-bg: #f0fbf1;
	--p-adm-radius: 40px;
	--p-adm-line: #ececec;
	--p-adm-pill-bg: #f4f4f4;
	--p-adm-card-border: #d9d9d9;
	--p-adm-bar-extra: #D7F3DB;
	--p-adm-bar-sub: #B5B5B5;

	/* 配色系統。a = 1号系（緑）／b = 2・3号系（青緑）
	   mid = 表の見出しセル・カードヘッダー・▼ / bar = 帯グラフの教育・保育時間 / link = テキストリンク */
	--p-adm-a-mid: #74d480;
	--p-adm-a-bar: #60ce6e;
	--p-adm-a-link: #39c24a;
	--p-adm-b-mid: #4cc6af;
	--p-adm-b-bar: #33bea3;
	--p-adm-b-link: #00ae8d;

	/* よくある質問（.section-faq）の Q/A マークと本文 */
	--p-adm-mark: #00ae8d;
	--p-adm-faq-text: #7c7c7c;

	/* 「園での生活／1年のめぐり」（template-life.php）用 */
	--p-life-radius: 16px;
	--p-life-line: #a8dfc6;
	--p-life-text: #1a1a1a;

	/* 一年のめぐり：季節ごとのテーマカラー（季節名の文字色・写真キャプションの帯色） */
	--p-life-spring: #f88c97;
	--p-life-summer: #20c8eb;
	--p-life-autumn: #ef8e46;
	--p-life-winter: #af8fe2;

	/* 「お問い合わせ」（page-contact.php）用。
	   緑帯との境目に影が乗らないよう spread を負にして上への広がりを抑える */
	--p-contact-shadow: 0 8px 18px -4px rgba(0, 0, 0, .1);

	/* 「私たちの想い」（template-education-policy.php）用 */
	--p-pol-ttl-width: 936px;
	--p-pol-text: #4a4a44;
}

.page-template-template-about {
	/* ============================
		セクション余白
	============================ */
	.sec-inner {
		padding: 0 0 90px;

		@media screen and (max-width: 767px) {
			padding-bottom: 60px;
		}
	}

	.section-philosophy .sec-inner {
		padding-top: 30px;
	}

	.content-box {
		margin: 0;
	}

	/* ============================
		教育・保育について
	============================ */
	/* カード幅は本文が2〜3行で折り返す 720px に抑え、中央に置く */
	.philosophy-list {
		display: grid;
		gap: 24px;
		margin-inline: auto;
		margin-top: 60px;
		max-width: 720px;

		@media screen and (max-width: 767px) {
			gap: 16px;
			margin-top: 30px;
			max-width: none;
		}
	}

	.philosophy-item {
		background-color: var(--p-card-bg);
		border-radius: 24px;
		box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
		box-sizing: border-box;
		padding: 30px clamp(10px, 1.2vw, 16px) 34px;
		text-align: center;

		@media screen and (max-width: 767px) {
			border-radius: 18px;
			padding: 24px 12px 26px;
		}
	}

	.philosophy-item__ttl {
		color: var(--main-color);
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 2.4rem;
		font-weight: 700;
		letter-spacing: .06em;
		margin: 0;

		@media screen and (max-width: 767px) {
			font-size: 1.8rem;
		}
	}

	.philosophy-item__text {
		color: var(--p-body-text);
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.9;
		margin-top: 18px;
		text-wrap: pretty;

		@media screen and (max-width: 767px) {
			font-size: 1.5rem;
			margin-top: 12px;
			text-align: left;
		}
	}

	/* 箇条書きは左揃えの塊のまま中央に置くため inline-grid */
	.philosophy-goals {
		display: inline-grid;
		gap: 14px;
		list-style: none;
		margin: 22px 0 0;
		padding: 0;
		text-align: left;

		@media screen and (max-width: 767px) {
			gap: 10px;
			margin-top: 14px;
		}

		li {
			color: var(--p-body-text);
			font-size: 1.8rem;
			font-weight: 500;
			line-height: 1.8;
			padding-left: 26px;
			position: relative;
			text-wrap: pretty;

			@media screen and (max-width: 767px) {
				font-size: 1.5rem;
				padding-left: 20px;
			}

			&::before {
				background-color: var(--main-color);
				border-radius: 50%;
				content: "";
				height: 10px;
				left: 4px;
				position: absolute;
				top: calc(.9em - 5px);
				width: 10px;

				@media screen and (max-width: 767px) {
					height: 8px;
					left: 2px;
					top: calc(.9em - 4px);
					width: 8px;
				}
			}
		}
	}

	/* ============================
		安心して過ごすために（3カラムカード）
	============================ */
	.life-cards {
		display: grid;
		gap: 60px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-top: 70px;

		@media screen and (max-width: 767px) {
			gap: 30px;
			grid-template-columns: minmax(0, 1fr);
			margin-top: 26px;
		}
	}

	.life-card {
		display: flex;
		flex-direction: column;
	}

	/* 帯は上だけ角丸。写真は角丸なし（デザイン通り）*/
	.life-card__head {
		align-items: center;
		background: var(--p-bg-green);
		border-radius: 32px 32px 0 0;
		box-sizing: border-box;
		color: var(--white);
		display: flex;
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 2.5rem;
		font-weight: 700;
		gap: 10px;
		justify-content: center;
		line-height: 1.4;
		margin: 0;
		min-height: 60px;
		padding: 8px 14px;

		@media screen and (max-width: 767px) {
			border-radius: 20px 20px 0 0;
			font-size: 2rem;
			min-height: 52px;
		}
	}

	.life-card__icon {
		flex: none;
		max-height: 32px;
	}

	.life-card__photo {
		aspect-ratio: 360 / 270;
		margin: 0;
		overflow: hidden;
	}

	.life-card__photo img {
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.life-card__body {
		box-sizing: border-box;
		display: flex;
		flex: 1;
		flex-direction: column;
		padding: 20px 0 0;
	}

	.life-card__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.life-card__tag {
		align-items: center;
		background-color: var(--white);
		border: 1px solid var(--main-text-color);
		border-radius: 999px;
		box-sizing: border-box;
		color: var(--main-text-color);
		display: flex;
		font-size: 1.5rem;
		min-height: 41px;
		padding: 0 16px;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			min-height: 36px;
			padding: 0 14px;
		}
	}

	.life-card__text {
		color: var(--p-life-text);
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 1.75;
		margin-top: 16px;

		@media screen and (max-width: 767px) {
			font-size: 1.5rem;
		}
	}
}

/* ============================
	見出し（波線アンダーライン）
============================ */
.section-philosophy,
.section-yard,
.section-facility,
.section-teachers,
.section-daily,
.section-lesson,
.section-support {
	.sec-ttl-box {
		text-align: center;
	}

	.sec-ttl {
		color: var(--main-text-color);
		display: inline-block;
		font-size: clamp(2.2rem, 2.6vw, 3.6rem);
		font-weight: 700;
		line-height: 1.6;
		padding-bottom: 15px;
		position: relative;

		@media screen and (max-width: 767px) {
			font-size: 1.9rem;
		}

		&::after {
			background:
				url("../images/common/underline-curl.svg") no-repeat right bottom / auto 100%,
				url("../images/common/underline-dash.svg") repeat-x left bottom / auto 100%;
			background-clip: border-box, content-box;
			bottom: 0;
			box-sizing: border-box;
			content: "";
			height: 56px;
			left: 0;
			padding-right: 58px;
			position: absolute;
			width: calc(100% + clamp(24px, 4vw, 56px));

			@media screen and (max-width: 767px) {
				height: 38px;
				padding-right: 36px;
			}
		}
	}

	.intro-box {
		margin: 45px 0 0;

		@media screen and (max-width: 767px) {
			margin-top: 24px;
		}

		p {
			color: var(--main-color);
			font-size: 1.7rem;
			font-weight: 500;
			line-height: 2;
			margin: 0;
			text-align: center;
			text-wrap: pretty;

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
				text-align: left;
			}
		}
	}
}

/* ============================
	写真スライダー（右側は画面端まで見せる）
============================ */
.slider-box {
	--p-edge: max(var(--container-padding), calc((100vw - var(--container-size)) / 2));
	margin-top: 50px;

	.swiper {
		margin-left: var(--p-edge);
		overflow: hidden;
	}

	.swiper-slide {
		border-radius: 6px;
		height: 330px;
		overflow: hidden;
		width: 320px;

		@media screen and (max-width: 767px) {
			height: 220px;
			width: 210px;
		}

		img {
			display: block;
			height: 100%;
			object-fit: cover;
			object-position: center;
			width: 100%;
		}
	}
}

.slider-nav {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	gap: 14px;
	justify-content: flex-end;
	margin: 26px auto 0;
	padding: 0 var(--container-padding);
	width: min(100%, calc(var(--container-size) + var(--container-padding) * 2));
}

.slider-label {
	color: var(--main-color);
	font-size: 1.7rem;
	font-weight: 500;
	letter-spacing: .1em;
}

.slider-arrow {
	background-color: var(--white);
	border: 1px solid var(--main-color);
	border-radius: 50%;
	cursor: pointer;
	flex: none;
	height: 48px;
	position: relative;
	transition: background .25s ease;
	width: 48px;

	&::after {
		border-right: 2px solid var(--main-color);
		border-top: 2px solid var(--main-color);
		content: "";
		height: 10px;
		left: 50%;
		position: absolute;
		top: 50%;
		width: 10px;
	}

	&.swiper-button-disabled {
		opacity: .35;
	}

	@media (hover: hover) {
		&:hover {
			background-color: #eaf8f2;
		}
	}
}

.slider-arrow-prev::after {
	transform: translate(-40%, -50%) rotate(-135deg);
}

.slider-arrow-next::after {
	transform: translate(-60%, -50%) rotate(45deg);
}

/* ============================
	法人概要
============================ */
.overview-frame {
	border: 2px dotted #a9ddc6;
	border-radius: 40px;
	box-sizing: border-box;
	padding: 60px clamp(24px, 5vw, 80px) 70px;

	@media screen and (max-width: 767px) {
		border-radius: 24px;
		padding: 40px 20px 46px;
	}
}

.section-overview {
	.sec-ttl {
		background: var(--p-bg-green);
		border-radius: 40px;
		color: var(--white);
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: .3em;
		margin: 0 auto;
		padding: 12px 0 14px;
		text-indent: .3em;
		width: min(100%, 300px);

		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
			width: min(100%, 220px);
		}
	}

	.content-box {
		margin-top: 46px;

		@media screen and (max-width: 767px) {
			margin-top: 30px;
		}
	}

	.info-box {
		dl {
			border-top: 1px solid var(--p-line);
			margin: 0;
		}

		.row {
			align-items: stretch;
			border-bottom: 1px solid var(--p-line);
			display: grid;
			grid-template-columns: 180px minmax(0, 1fr);

			@media screen and (max-width: 767px) {
				grid-template-columns: 100px minmax(0, 1fr);
			}
		}

		dt,
		dd {
			box-sizing: border-box;
			margin: 0;
			padding: 18px 10px;
		}

		dt {
			align-items: center;
			background-color: var(--p-cell-bg);
			color: var(--main-text-color);
			display: flex;
			font-size: 1.6rem;
			font-weight: 500;
			justify-content: center;
			letter-spacing: .3em;
			text-align: center;
			text-indent: .3em;

			@media screen and (max-width: 767px) {
				font-size: 1.3rem;
				letter-spacing: .1em;
				padding: 14px 4px;
				text-indent: 0;
			}
		}

		dd {
			color: var(--p-body-text);
			font-size: 1.6rem;
			line-height: 1.8;
			padding-left: 30px;
			
			a {
				text-decoration: underline;
			}

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
				padding: 14px 0 14px 16px;
			}
		}
	}

	/* 法人概要の枠外に置く案内文 */
	.overview-note {
		color: var(--p-body-text);
		font-size: 1.7rem;
		font-weight: 500;
		line-height: 2;
		margin-top: 30px;
		text-align: center;
		text-wrap: pretty;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			margin-top: 20px;
			text-align: left;
		}
	}
}

.page-template-template-about .section-nav .sec-inner {
	padding-top: 0;
}

.page-template-template-admission {
	
	.section-certification {
		margin-top: 40px;
		
		@media screen and (max-width: 767px) {
			margin-top: 20px;
		}
	}

	#page-mv {
		--mv-radius-x: 0px;
		--mv-radius-y: 0px;
		background: none;
		padding-bottom: 20px;

		&::before {
			--deco-w: 483px;
			--deco-h: 328px;
			--deco-y: -36px;
			background: url("../images/admission/mv_bg01.png") no-repeat 0 var(--deco-y) / var(--deco-w) var(--deco-h);
			content: "";
			height: calc(var(--deco-h) + var(--deco-y));
			position: absolute;
			right: 0;
			top: 0;
			width: 468px;

			@media screen and (max-width: 767px) {
				--deco-w: 265px;
				--deco-h: 180px;
				--deco-y: -20px;
				width: 257px;
			}
		}

		&::after {
			--deco-w: 415px;
			--deco-h: 317px;
			background: url("../images/admission/mv_bg02.png") no-repeat right top / var(--deco-w) var(--deco-h);
			content: "";
			height: var(--deco-h);
			left: 0;
			position: absolute;
			top: 206px;
			width: 381px;

			@media screen and (max-width: 767px) {
				--deco-w: 230px;
				--deco-h: 176px;
				top: 170px;
				width: 212px;
			}
		}

		.mv-wrap {
			position: relative;
			z-index: 1;
		}

		.text-box {
			padding-top: 104px;

			@media screen and (max-width: 767px) {
				padding-top: 6px;
			}
		}

		.mv-ttl {
			padding-bottom: 0;

			&::after {
				content: none;
			}
		}

		.mv-lead {
			color: var(--black);
			font-size: 1.8rem;
			margin-top: 25px;

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
				margin-top: 20px;
			}
		}
	}

	@media screen and (max-width: 767px) {
		.mv-lead br {
			display: none;
		}
	}

	/* ============================
		ページ内アンカーナビ（MV直下）
	============================ */
	.section-anchor .sec-inner {
		padding: 30px 0 50px;

		@media screen and (max-width: 767px) {
			padding: 10px 0 34px;
		}
	}

	.adm-anchor-nav {
		display: grid;
		gap: 16px;
		grid-template-columns: repeat(4, minmax(0, 1fr));

		@media screen and (max-width: 900px) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		@media screen and (max-width: 767px) {
			gap: 12px;
			grid-template-columns: minmax(0, 1fr);
			margin-top: 10px;
		}

		.c-button {
			gap: 8px;
			min-width: 0;
			padding: 14px 18px;
			width: 100%;
		}

		.c-button__label {
			font-size: 1.5rem;

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
			}
		}
	}

	/* ============================
		セクション共通（淡い緑の帯 ＋ 白いパネル）
	============================ */
	.adm-band {
		/* tone クラスが付かない要素でも壊れないよう既定値（1号系）を持たせる */
		--tone-mid: var(--p-adm-a-mid);
		--tone-bar: var(--p-adm-a-bar);
		--tone-link: var(--p-adm-a-link);
		background-color: var(--p-adm-band-bg);
		scroll-margin-top: 110px;

		@media screen and (max-width: 767px) {
			scroll-margin-top: 80px;
		}

		.sec-inner {
			padding: 60px 0;

			@media screen and (max-width: 767px) {
				padding: 40px 0;
			}
		}

		/* 見出し帯と白パネルが1枚のカードに見えるよう間を詰める */
		.content-box {
			margin-top: 0;
		}
	}

	/* 配色系統の切り替え。表の行・帯グラフ・カードに付与する */
	.adm-tone--a {
		--tone-mid: var(var(--p-adm-a-link));
		--tone-bar: var(--p-adm-a-bar);
		--tone-link: var(--p-adm-a-link);
	}

	.adm-tone--b {
		--tone-mid: var(--p-adm-b-mid);
		--tone-bar: var(--p-adm-b-bar);
		--tone-link: var(--p-adm-b-link);
	}

	/* セクション見出しの帯。白パネルの上端に載るので下側は角丸にしない */
	.sec-ttl-box {
		background: var(--p-bg-green);
		border-radius: var(--p-adm-radius) var(--p-adm-radius) 0 0;
		overflow: hidden;

		@media screen and (max-width: 767px) {
			border-radius: 20px 20px 0 0;
		}
	}

	.sec-ttl {
		align-items: center;
		color: var(--white);
		display: flex;
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: clamp(2rem, 2.4vw, 3.2rem);
		font-weight: 700;
		justify-content: center;
		letter-spacing: .1em;
		min-height: 80px;
		padding: 10px 20px;

		@media screen and (max-width: 767px) {
			font-size: 1.8rem;
			min-height: 56px;
			padding: 10px 16px;
		}
	}

	.adm-panel {
		background-color: var(--white);
		border-radius: 0 0 var(--p-adm-radius) var(--p-adm-radius);
		box-sizing: border-box;
		/* 1440px 時に左右 120px（内容幅 960px） */
		padding: 79px clamp(16px, 8.34vw, 120px) 77px;

		@media screen and (max-width: 767px) {
			border-radius: 0 0 20px 20px;
			padding: 28px 16px 34px;
		}
	}

	/* ============================
		サブ見出し（薄緑のピル）・リード・注記
	============================ */
	.adm-subttl {
		align-items: center;
		background-color: var(--p-adm-pill-bg);
		border-radius: 999px;
		box-sizing: border-box;
		color: var(--main-text-color);
		display: flex;
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 2.2rem;
		font-weight: 600;
		justify-content: center;
		letter-spacing: .1em;
		margin: 78px auto 0;
		max-width: 100%;
		min-height: 60px;
		min-width: 300px;
		padding: 8px 30px;
		text-align: center;
		width: fit-content;

		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
			margin-top: 40px;
			min-height: 48px;
			min-width: 0;
			width: 100%;
		}
	}

	.adm-panel > :first-child {
		margin-top: 0;
	}

	.adm-lead {
		color: var(--black);
		font-size: 1.8rem;
		margin: 28px 0 0;
		text-align: center;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			margin-top: 20px;
			text-align: left;
		}
	}

	.adm-annotation {
		color: var(--black);
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 1.8;
		margin: 17px 0 0;
		padding-left: 1em;
		text-align: center;
		text-indent: -1em;
		text-wrap: balance;

		@media screen and (max-width: 767px) {
			font-size: 1.2rem;
			text-align: left;
		}
	}

	/* ============================
		表（認定区分・募集定員）
	============================ */
	.adm-table {
		border-bottom: 2px solid var(--p-adm-line);
		margin: 30px 0 0;

		.row {
			align-items: stretch;
			border-top: 2px solid var(--p-adm-line);
			display: grid;
			gap: 0;
			grid-template-columns: 250px minmax(0, 1fr);

			@media screen and (max-width: 767px) {
				grid-template-columns: 92px minmax(0, 1fr);
			}
		}

		dt {
			align-items: center;
			background-color: var(--tone-mid);
			box-sizing: border-box;
			color: var(--white);
			display: flex;
			font-size: 2rem;
			font-weight: 700;
			justify-content: center;
			letter-spacing: .2em;
			margin: 3px 0;
			min-height: 60px;
			padding: 8px;
			text-align: center;

			@media screen and (max-width: 767px) {
				font-size: 1.3rem;
				letter-spacing: 0;
				min-height: 48px;
				padding: 8px 4px;
			}
		}

		dd {
			align-items: center;
			box-sizing: border-box;
			color: var(--black);
			display: flex;
			font-size: 1.8rem;
			letter-spacing: .04em;
			margin: 0;
			padding: 8px 0 8px 22px;

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
				padding-left: 12px;
			}
		}
	}

	/* 定員表は「区分 / 年齢 / 定員」の3カラム。定員列は縦罫線で区切る */
	.adm-table--capacity {
		.row {
			grid-template-columns: 250px minmax(0, 1fr) 250px;

			@media screen and (max-width: 767px) {
				grid-template-columns: 92px minmax(0, 1fr);
			}
		}

		/* SP は2カラムに落とし、見出しセルを2行ぶんに伸ばす */
		@media screen and (max-width: 767px) {
			dt {
				grid-row: 1 / 3;
			}
		}

		.adm-table__capacity {
			border-left: 2px solid var(--p-adm-line);

			@media screen and (max-width: 767px) {
				border-left: 0;
				padding-top: 0;
			}
		}
	}

	/* ============================
		注意ブロック
	============================ */
	.adm-note-box {
		margin-top: 20px;
	}

	.adm-note-box__lead {
		color: var(--main-text-color);
		font-size: 1.8rem;
		font-weight: 700;
		line-height: 1.8;
		margin: 0;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
		}
	}

	.adm-note-box__text {
		color: var(--black);
		font-size: 1.75rem;
		font-weight: 400;
		line-height: 1.6;
		margin: 6px 0 0;

		@media screen and (max-width: 767px) {
			font-size: 1.3rem;

			br {
				display: none;
			}
		}
	}

	/* ============================
		教育・保育時間の帯グラフ
	============================ */
	.adm-scroll-note {
		color: var(--p-body-text);
		font-size: 1.2rem;
		margin: 16px 0 0;
		text-align: right;
	}

	.adm-hours {
		margin-top: 10px;
	}

	.adm-hours__item {
		@media screen and (max-width: 767px) {
			overflow-x: auto;
			padding-bottom: 8px;
		}
	}

	.adm-hours__item + .adm-hours__item {
		margin-top: 30px;
	}

	.adm-hours__label {
		color: var(--black);
		font-size: 2rem;
		margin: 0;

		@media screen and (max-width: 767px) {
			font-size: 1.3rem;
		}
	}

	/* 帯は48コマ。セグメント間に隙間は空けず、帯の両端だけ角丸にする */
	.adm-timebar {
		border-radius: 6px;
		display: grid;
		gap: 0;
		grid-template-columns: repeat(48, minmax(0, 1fr));
		margin-top: 7px;
		overflow: hidden;

		@media screen and (max-width: 767px) {
			min-width: 800px;
		}
	}

	.adm-timebar__seg {
		align-items: center;
		box-sizing: border-box;
		color: var(--white);
		display: flex;
		font-size: 1.7rem;
		font-weight: 700;
		justify-content: center;
		letter-spacing: .04em;
		min-height: 60px;
		min-width: 0;
		overflow: hidden;
		padding: 6px 4px;
		text-align: center;
		white-space: nowrap;

		@media screen and (max-width: 767px) {
			font-size: 1.2rem;
			min-height: 46px;
			padding: 6px 2px;
		}
	}

	.adm-timebar__label {
		color: var(--white);
		display: block;
		font-size: 1.6rem;
		font-weight: 500;
	}

	.adm-timebar__seg--main {
		background-color: var(--tone-bar);
		.adm-timebar__label {
			font-size: 2.2rem;
			
			@media screen and (max-width: 767px) {
				font-size: 1.6rem;
			}
		}
	}

	.adm-timebar__seg--sub {
		background-color: var(--p-adm-bar-sub);
		font-size: 1.3rem;
		font-weight: 400;
		line-height: 1.4;
		white-space: normal;

		@media screen and (max-width: 767px) {
			font-size: 1.1rem;
		}
	}

	.adm-timebar__seg--extra {
		background-color: var(--p-adm-bar-extra);
		color: var(--black);
		font-weight: 500;
		letter-spacing: normal;
		line-height: 1.35;
		white-space: normal;

		@media screen and (min-width: 768px) and (max-width: 1279px) {
			font-size: 1.6rem;
		}

		@media screen and (max-width: 767px) {
			font-size: 1.3rem;
		}
		
		.adm-timebar__label {
			color: var(--black);
		}
	}

	.adm-timebar-ticks {
		height: 1.8em;
		margin-top: 6px;
		position: relative;

		@media screen and (max-width: 767px) {
			min-width: 800px;
		}

		.adm-timebar-ticks__item {
			color: var(--main-text-color);
			font-size: 2rem;
			letter-spacing: .05em;
			line-height: 1;
			position: absolute;
			top: 0;
			transform: translateX(-50%);
			white-space: nowrap;

			@media screen and (min-width: 768px) and (max-width: 1279px) {
				font-size: 1.6rem;
			}

			@media screen and (max-width: 767px) {
				font-size: 1.1rem;
			}
		}

		.adm-timebar-ticks__item:first-child {
			transform: none;
		}

		.adm-timebar-ticks__item:last-child {
			transform: translateX(-100%);
		}
	}

	/* ============================
		2カラムのカード（お申し込み先・入園手続き・園見学）
	============================ */
	.adm-cards {
		display: grid;
		gap: 32px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 29px;

		@media screen and (max-width: 767px) {
			gap: 18px;
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.adm-card {
		background-color: var(--white);
		border: 1px solid var(--p-adm-card-border);
		border-radius: 12px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.adm-card__head {
		align-items: center;
		background-color: var(--tone-mid);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 76px;
		padding: 12px 20px 9px;
		text-align: center;

		@media screen and (max-width: 767px) {
			min-height: 0;
			padding: 12px 14px 13px;
		}
		
		span {
			color: var(--white);
		}
	}

	.adm-card__name {
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: .2em;
		line-height: 1.4;

		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
		}
	}

	.adm-card__sub {
		font-weight: 500;

		@media screen and (max-width: 767px) {
			font-size: 1.2rem;
		}
	}

	.adm-card__badge {
		background-color: var(--white);
		border-radius: 999px;
		color: var(--black) !important;
		flex: none;
		font-size: 1.6rem;
		font-weight: 500;
		padding: 4px 14px 5px;
	}

	.adm-card__body {
		box-sizing: border-box;
		display: flex;
		flex: 1;
		flex-direction: column;
		padding: 14px 24px 30px;

		@media screen and (max-width: 767px) {
			padding: 12px 16px 24px;
		}
	}

	.adm-card__flow {
		color: var(--black);
		font-size: 2rem;
		margin: 0;
		text-align: center;

		/* ヘッダーと同色の下向き三角（お申し込み先カードのみ） */
		&::before {
			border-left: 25px solid transparent;
			border-right: 25px solid transparent;
			border-top: 23px solid var(--tone-mid);
			content: "";
			display: block;
			margin: 0 auto 9px;
			width: 0;
		}

		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
		}
	}

	.adm-card__text {
		color: var(--black);
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 2;
		margin: 0;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
		}
	}

	.adm-card__period {
		color: var(--black);
		font-size: 1.6rem;
		margin: 18px 0 0;
		text-align: center;

		@media screen and (max-width: 767px) {
			font-size: 1.3rem;
		}
	}

	.adm-card__btn {
		margin-top: auto;
		text-align: center;
	}

	/* ============================
		カード内のテキストリンク（tone 色の文字 ＋ 丸矢印 ＋ 下線）
		丸矢印は style.css の .c-button__arrow を流用し、色は --btn-arrow で差し替える
	============================ */
	.adm-link {
		--btn-arrow: var(--tone-link);
		align-items: center;
		border-bottom: 2px solid color-mix(in srgb, var(--tone-link) 50%, #fff);
		display: inline-flex;
		gap: 12px;
		margin: 14px auto 0;
		padding-bottom: 5px;
		width: fit-content;

		/* .c-button__arrow は .c-button 用の負マージンを持つので打ち消す */
		.c-button__arrow {
			margin-right: 0;
		}

		@media (hover: hover) {
			&:hover {
				opacity: 1;

				.c-button__arrow {
					transform: translateX(4px);
				}
			}
		}
	}

	.adm-link__label {
		color: var(--tone-link);
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 2rem;
		font-weight: 500;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
		}
	}

	/* ============================
		園見学について（.section-tour）
		見出し帯を持たず、白いカード＋緑の枠線＋ピル型ボタン
	============================ */
	.section-faq .adm-panel {
		padding-top: 74px;
	}

	.section-tour {
		.adm-card {
			border-color: var(--border-color);
			border-radius: 16px;
		}

		/* 見出しは帯ではなくカード内の緑の見出しとして置く */
		.adm-card__head {
			background: none;
			min-height: 0;
			padding: 41px 30px 0;

			@media screen and (max-width: 767px) {
				padding: 24px 16px 0;
			}
		}

		.adm-card__name {
			color: var(--main-text-color);
			font-family: inherit;
			font-size: 2rem;
			letter-spacing: .04em;

			@media screen and (max-width: 767px) {
				font-size: 1.6rem;
			}
		}

		.adm-card__body {
			padding: 15px 30px 40px;

			@media screen and (max-width: 767px) {
				padding: 12px 16px 28px;
			}
		}

		.adm-card__text {
			line-height: 2;
		}

		/* 本文とボタンの最小間隔。カードの高さが揃うよう margin-top: auto は残す */
		.adm-card__btn {
			padding-top: 16px;
		}

	}

	/* ============================
		園見学・よくある質問のピル型ボタン（.c-button）
		デザインの 280×60 に合わせ、ラベルは左寄せに戻す
	============================ */
	.section-tour,
	.section-faq {
		/* .c-button は既定 min-width: 340px なのでデザイン幅に詰める */
		.c-button {
			min-width: 280px;
			padding: 15px 24px;

			/* SP は .c-button 既定の全幅に戻す */
			@media screen and (max-width: 767px) {
				min-width: 0;
			}
		}

		/* 親の text-align: center が .c-button__label（flex: 1）に効いて
		   ラベルが中央寄せになってしまうので左寄せに戻す */
		.c-button__label {
			text-align: left;
		}
	}

	/* ============================
		入園手続きのフロー図
	============================ */
	.adm-flow {
		margin: 0;

		.adm-flow__step {
			background-color: var(--p-cell-bg);
			border-radius: 8px;
			color: var(--main-text-color);
			font-size: 2rem;
			font-weight: 500;
			padding: 12px 10px;
			text-align: center;

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
			}
		}

		/* ステップ間の下向き矢印 */
		.adm-flow__step + .adm-flow__step {
			margin-top: 28px;
			position: relative;

			&::before {
				border-right: 2px solid var(--main-color);
				border-top: 2px solid var(--main-color);
				content: "";
				height: 9px;
				left: 50%;
				position: absolute;
				top: -19px;
				transform: translateX(-50%) rotate(135deg);
				width: 9px;
			}
		}
	}

	/* ============================
		よくある質問（常時展開）
	============================ */
	.adm-faq__item {
		border-bottom: 2px solid var(--p-adm-line);
		box-sizing: border-box;
		padding-bottom: 20px;
	}

	.adm-faq__item + .adm-faq__item {
		margin-top: 28px;
	}

	.adm-faq__q,
	.adm-faq__a {
		margin: 0;
		padding-left: 67px;
		position: relative;

		@media screen and (max-width: 767px) {
			padding-left: 46px;
		}

		/* Q/A の丸マーク。テキストの行送りに関係なく位置を固定したいので絶対配置 */
		&::before {
			align-items: center;
			border-radius: 50%;
			box-sizing: border-box;
			display: flex;
			font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
			font-size: 2.6rem;
			font-weight: 700;
			height: 50px;
			justify-content: center;
			left: 0;
			line-height: 0;
			position: absolute;
			width: 50px;

			@media screen and (max-width: 767px) {
				font-size: 1.9rem;
				height: 36px;
				width: 36px;
			}
		}
	}

	/* 丸マークの高さぶんを行に確保する（min-height = マーク下端までの距離） */
	.adm-faq__q {
		color: var(--main-text-color);
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: .04em;
		line-height: 1.7;
		min-height: 44px;

		@media screen and (max-width: 767px) {
			font-size: 1.5rem;
			min-height: 32px;
		}

		&::before {
			background-color: var(--p-adm-mark);
			color: var(--white);
			content: "Q";
			top: -6px;

			@media screen and (max-width: 767px) {
				top: -4px;
			}
		}
	}

	.adm-faq__a {
		color: var(--p-adm-faq-text);
		font-size: 1.5rem;
		line-height: 1.73;
		margin-top: 25px;
		min-height: 41px;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			margin-top: 16px;
			min-height: 30px;
		}

		&::before {
			background-color: var(--white);
			border: 1px solid var(--p-adm-mark);
			color: var(--p-adm-mark);
			content: "A";
			top: -9px;

			@media screen and (max-width: 767px) {
				top: -6px;
			}
		}
	}

	.adm-faq__btn {
		margin-top: 31px;
		text-align: center;

		@media screen and (max-width: 767px) {
			margin-top: 26px;
		}
	}

	/* ============================
		見学CTA（写真背景 ＋ 白い角丸ボックス）
	============================ */
	.section-adm-cta {
		background-color: var(--p-card-bg);
		background-image: url("../images/admission/cta_bg.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		
		.sec-inner {
			padding: 62px 0;

			@media screen and (max-width: 767px) {
				padding: 40px 0;
			}
		}
	}

	.adm-cta-box {
		background-color: var(--white);
		border-radius: 200px;
		box-sizing: border-box;
		margin: 0 auto;
		padding: 54px clamp(20px, 5vw, 90px) 58px;
		position: relative;
		text-align: center;
		width: min(100%, 900px);
		z-index: 2;

		@media screen and (max-width: 767px) {
			border-radius: 24px;
			padding: 30px 18px 34px;
		}
	}

	.adm-cta__ttl {
		color: var(--main-text-color);
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: clamp(2rem, 2.1vw, 3.2rem);
		font-weight: 700;
		margin: 0;
		text-wrap-style: balance;
	}

	.adm-cta__tel {
		align-items: baseline;
		color: var(--main-text-color);
		display: flex;
		flex-wrap: wrap;
		gap: 2px 6px;
		justify-content: center;
		margin: 20px 0 0;

		@media screen and (max-width: 767px) {
			margin-top: 14px;
		}

		a {
			color: var(--main-text-color);
			font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
			font-size: 2.8rem;
			font-weight: 500;
			letter-spacing: .02em;
			line-height: 1.2;

			@media screen and (max-width: 767px) {
				font-size: 2.4rem;
			}
		}
	}

	.adm-cta__tel-label {
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 2.8rem;
		font-weight: 700;
		line-height: 1.2;

		@media screen and (max-width: 767px) {
			font-size: 2.4rem;
		}
	}

	.adm-cta__tel-note {
		font-size: 1.6rem;
		font-weight: 500;

		@media screen and (max-width: 767px) {
			font-size: 1.2rem;
			width: 100%;
		}
	}

	.adm-cta__note {
		color: var(--black);
		font-size: 1.7rem;
		margin: 22px 0 0;
		text-wrap-style: balance;

		@media screen and (max-width: 767px) {
			font-size: 1.3rem;
			margin-top: 16px;
		}
	}

	.adm-cta__btn {
		margin-top: 18px;

		/* デザイン幅に合わせて .c-button 既定の min-width: 340px を解除する */
		.c-button {
			min-width: 0;
		}
	}

	/* ============================
		ページ下部ナビ
	============================ */
	.section-nav .sec-inner {
		padding: 70px 0 90px;

		@media screen and (max-width: 767px) {
			padding: 50px 0 60px;
		}
	}
}

.page-template-template-life {
	/* ============================
		セクション余白
	============================ */
	.sec-inner {
		padding: 80px 0 90px;

		@media screen and (max-width: 767px) {
			padding: 50px 0 60px;
		}
	}

	.section-daily .sec-inner {
		padding-top: 60px;

		@media screen and (max-width: 767px) {
			padding-top: 40px;
		}
	}

	.content-box {
		margin: 0;
	}

	/* ============================
		見出し帯（緑グラデ ＋ アイコン）
	============================ */
	.life-band {
		align-items: center;
		background: var(--p-bg-green);
		border-radius: 40px 40px 0 0;
		box-sizing: border-box;
		color: var(--white);
		display: flex;
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 3.2rem;
		font-weight: 700;
		gap: 12px;
		letter-spacing: .08em;
		margin: 56px 0 0;
		min-height: 52px;
		padding: 8px 52px;

		@media screen and (max-width: 767px) {
			border-radius: 20px 20px 0 0;
			font-size: 1.6rem;
			gap: 8px;
			margin-top: 36px;
			min-height: 44px;
			padding: 8px 32px;
		}
	}

	.life-band__icon {
		flex: none;
		height: 28px;
		width: 28px;

		@media screen and (max-width: 767px) {
			height: 22px;
			width: 22px;
		}
	}

	.life-band--season {
		margin-top: 90px;

		@media screen and (max-width: 767px) {
			margin-top: 50px;
		}
	}

	/* ============================
		1日の流れ（縦の点線タイムライン）
	============================ */
	.life-timeline {
		list-style: none;
		margin: 80px 0 0;
		padding: 0;

		@media screen and (max-width: 767px) {
			margin-top: 28px;
		}
	}

	.life-timeline__item {
		display: grid;
		gap: 0 55px;
		grid-template-columns: 136px minmax(0, 1fr);
		margin-left: auto; /* アイテム全体を右寄せ */
		max-width: calc(136px + 55px + 950px); /* マーカー ＋ gap ＋ 本文の最大幅 */
		position: relative;

		/* 点線はアイコン中央（136px / 2 － border 1px）に合わせ、ラベルの下から次のアイテムまで引く */
		&:not(:last-child)::before {
			border-left: 2px dashed var(--p-life-line);
			content: "";
			inset: 194px auto 0 67px; /* top = アイコン 136 ＋ gap 8 ＋ ラベル 24 ＋ 26 */
			position: absolute;

			@media screen and (max-width: 767px) {
				inset: 78px auto 0 23px; /* top = アイコン 48 ＋ gap 8 ＋ ラベル 20 ＋ 2 */
			}
		}

		& + & {
			margin-top: 40px;

			@media screen and (max-width: 767px) {
				margin-top: 26px;
			}
		}

		@media screen and (max-width: 767px) {
			gap: 0 12px;
			grid-template-columns: 50px minmax(0, 1fr);
		}
	}

	.life-timeline__marker {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 8px;
		position: relative;
		width: 100%; /* グリッド列の幅（PC 136px / SP 50px）に合わせる */
		z-index: 1;
	}

	.life-timeline__icon {
		align-items: center;
		background-color: var(--white);
		border: 2px solid var(--p-life-line);
		border-radius: 50%;
		box-sizing: border-box;
		display: flex;
		flex: none;
		height: 136px;
		justify-content: center;
		width: 136px;

		@media screen and (max-width: 767px) {
			height: 48px;
			width: 48px;
		}

		img {
			height: 70px;
			width: 70px;

			@media screen and (max-width: 767px) {
				height: 28px;
				width: 28px;
			}
		}
	}

	.life-timeline__label {
		color: var(--main-text-color);
		font-size: 2.8rem;
		font-weight: 700;
		letter-spacing: .06em;

		@media screen and (max-width: 767px) {
			font-size: 1.2rem;
		}
	}

	.life-timeline__body {
		max-width: 950px;
		padding-bottom: 10px;
	}

	.life-photos {
		display: grid;
		gap: 30px;
		grid-template-columns: repeat(2, minmax(0, 1fr));

		@media screen and (max-width: 767px) {
			gap: 10px;
		}
	}

	.life-photos__item {
		aspect-ratio: 305 / 193;
		border-radius: 6px;
		margin: 0;
		overflow: hidden;
	}

	/* 写真の枠を埋める指定はタイムライン・年間行事で共通 */
	.life-photos__item img,
	.life-season__slider .swiper-slide img {
		display: block;
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	.life-timeline__ttl {
		color: var(--main-text-color);
		font-size: 2.8rem;
		font-weight: 700;
		letter-spacing: .05em;
		margin: 20px 0 0;

		@media screen and (max-width: 767px) {
			font-size: 1.5rem;
			margin-top: 14px;
		}
	}

	.life-timeline__text {
		color: var(--p-life-text);
		font-size: 1.7rem;
		margin: 8px 0 0;

		@media screen and (max-width: 767px) {
			font-size: 1.2rem;
		}
	}

	.life-timeline__time {
		background-color: var(--main-color);
		border-radius: 8px;
		color: var(--white);
		font-size: 1.8rem;
		font-weight: 500;
		letter-spacing: .02em;
		line-height: 1.5;
		margin: 14px 0 0;
		min-width: 200px;
		padding: 10px 24px;
		width: fit-content;

		@media screen and (max-width: 767px) {
			font-size: 1.1rem;
			margin-top: 10px;
		}
	}

	/* ============================
		一年のめぐり（年間行事）
	============================ */
	/* 季節ごとの配色。季節名（.life-season__name）とキャプションの帯色に使う */
	.life-season {
		--season-color: var(--p-life-spring);
	}

	.life-season--summer {
		--season-color: var(--p-life-summer);
	}

	.life-season--autumn {
		--season-color: var(--p-life-autumn);
	}

	.life-season--winter {
		--season-color: var(--p-life-winter);
	}

	.life-seasons {
		display: grid;
		gap: 64px 68px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 48px;

		@media screen and (max-width: 767px) {
			gap: 30px;
			grid-template-columns: minmax(0, 1fr);
			margin-top: 26px;
		}
	}

	.life-season__head {
		align-items: center;
		display: flex;
		gap: 8px;
		min-height: 119px;

		@media screen and (max-width: 767px) {
			gap: 10px;
			min-height: 80px;
		}
	}

	/* PC は SVG の実寸のまま表示する（SP のみ高さを揃える） */
	.life-season__icon {
		flex: none;

		@media screen and (max-width: 767px) {
			height: 72px;
			width: auto;
		}
	}

	.life-season__name {
		color: var(--season-color);
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 4rem;
		font-weight: 700;
		letter-spacing: .05em;
		line-height: 1.2;
		margin: 0;

		@media screen and (max-width: 767px) {
			font-size: 2.6rem;
		}
	}

	.life-season__months {
		/* common.css の span { color: … } を打ち消して季節名と同じ色にする */
		color: var(--season-color);
		font-size: 2.8rem;

		@media screen and (max-width: 767px) {
			font-size: 1.8rem;
		}
	}

	.life-season__lead {
		color: var(--p-life-text);
		font-size: 1.7rem;
		margin: 4px 0 0;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
		}
	}

	.life-season__slider {
		margin-top: 10px;
		.swiper {
			border-radius: 10px;
			overflow: hidden;
		}

		.swiper-slide {
			aspect-ratio: 566 / 340;
			position: relative;
		}
	}

	/* 写真キャプション。画像の左上角にぴったり付ける（角丸は左上・右下のみ） */
	.life-season__caption {
		align-items: center;
		background-color: var(--season-color);
		border-radius: 10px 0 10px 0;
		box-sizing: border-box;
		color: var(--white);
		display: flex;
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 1.8rem;
		font-weight: 700;
		height: 40px;
		justify-content: center;
		left: 0;
		letter-spacing: .05em;
		line-height: 1.2;
		min-width: 200px; /* デザイン実測。文言が長い場合はここから横に伸びる */
		padding: 0 10px;
		position: absolute;
		top: 0;
		white-space: nowrap;
		z-index: 1;

		@media screen and (max-width: 767px) {
			border-radius: 8px 0 8px 0;
			font-size: 1.2rem;
			height: 26px;
			min-width: 124px;
			padding: 0 8px;
		}
	}

	.life-season__pagination {
		--swiper-pagination-bullet-horizontal-gap: 0; /* Swiper 既定の左右 4px を消し、間隔は gap で作る */
		display: flex;
		gap: 20px;
		justify-content: center;
		margin-top: 16px;

		@media screen and (max-width: 767px) {
			gap: 14px;
			margin-top: 12px;
		}

		.swiper-pagination-bullet {
			background-color: var(--p-life-line);
			border-radius: 50%;
			cursor: pointer;
			height: 15px;
			opacity: 1;
			width: 15px;

			@media screen and (max-width: 767px) {
				height: 12px;
				width: 12px;
			}
		}

		.swiper-pagination-bullet-active {
			background-color: var(--main-color);
		}
	}
	/* ============================
		専門指導（2カラムカード）
	============================ */
	.lesson-cards {
		display: grid;
		gap: 60px 40px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 70px;

		@media screen and (max-width: 767px) {
			gap: 32px;
			grid-template-columns: minmax(0, 1fr);
			margin-top: 30px;
		}
	}

	.lesson-card {
		display: flex;
		flex-direction: column;
	}

	/* 見出しは緑帯・白抜き。上だけ角丸にして直下の写真とひと続きに見せる */
	.lesson-card__ttl {
		align-items: center;
		background: var(--p-bg-green);
		border-radius: var(--p-life-radius) var(--p-life-radius) 0 0;
		box-sizing: border-box;
		color: var(--white);
		display: flex;
		flex-wrap: wrap;
		gap: 2px 12px;
		justify-content: center;
		line-height: 1.5;
		margin: 0;
		min-height: 68px;
		padding: 10px 20px;
		text-align: center;

		@media screen and (max-width: 767px) {
			gap: 2px 8px;
			min-height: 56px;
			padding: 8px 16px;
		}
	}

	/* common.css の裸の span セレクタが色を直接当てるため、白は span 側で指定する */
	.lesson-card__name {
		color: var(--white);
		font-size: 2.2rem;
		font-weight: 700;
		letter-spacing: .04em;

		@media screen and (max-width: 767px) {
			font-size: 1.8rem;
		}
	}

	.lesson-card__provider {
		color: var(--white);
		font-size: 1.5rem;
		font-weight: 500;

		@media screen and (max-width: 767px) {
			font-size: 1.3rem;
		}
	}

	/* 写真は差し替え前提。仮画像（lesson_noimage.svg）でも同じ比率で収まる */
	.lesson-card__photo {
		aspect-ratio: 570 / 380;
		border-radius: 0 0 var(--p-life-radius) var(--p-life-radius);
		margin: 0;
		overflow: hidden;

		img {
			display: block;
			height: 100%;
			object-fit: cover;
			width: 100%;
		}
	}

	.lesson-card__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		margin-top: 20px;

		@media screen and (max-width: 767px) {
			margin-top: 14px;
		}
	}

	.lesson-card__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.lesson-card__tag {
		align-items: center;
		background-color: var(--white);
		border: 1px solid var(--main-text-color);
		border-radius: 999px;
		box-sizing: border-box;
		color: var(--main-text-color);
		display: flex;
		font-size: 1.5rem;
		min-height: 41px;
		padding: 0 16px;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			min-height: 36px;
			padding: 0 14px;
		}
	}

	.lesson-card__text {
		color: var(--p-life-text);
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 1.9;
		margin-top: 16px;
		text-wrap: pretty;

		@media screen and (max-width: 767px) {
			font-size: 1.5rem;
			line-height: 1.8;
			margin-top: 12px;
		}
	}

}

.page-template-template-education-policy {
	/* ============================
		セクション余白
	============================ */
	.sec-inner {
		padding: 0 0 130px;

		@media screen and (max-width: 767px) {
			padding-bottom: 70px;
		}
	}

	.section-mission .sec-inner {
		padding-top: 60px;

		@media screen and (max-width: 767px) {
			padding-top: 40px;
		}
	}

	.section-value .sec-inner {
		padding-bottom: 190px;

		@media screen and (max-width: 767px) {
			padding-bottom: 90px;
		}
	}

	.content-box {
		margin: 0;
	}

	/* ============================
		セクション見出し（緑の俵型 ＋ 英語サブ）
	============================ */
	.sec-ttl-box {
		display: flex;
		justify-content: center;
	}

	.sec-ttl {
		align-items: center;
		background: var(--p-bg-green);
		border-radius: 999px;
		box-sizing: border-box;
		color: var(--white);
		display: flex;
		flex-direction: column;
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 2.4rem;
		font-weight: 700;
		gap: 2px;
		justify-content: center;
		letter-spacing: .1em;
		min-height: 69px;
		padding: 10px 30px;
		text-align: center;
		width: min(100%, var(--p-pol-ttl-width));

		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
			min-height: 56px;
			padding: 10px 20px;
		}
	}

	.sec-ttl__en {
		color: var(--white);
		font-size: 1.5rem;
		font-weight: 500;
		letter-spacing: .2em;

		@media screen and (max-width: 767px) {
			font-size: 1rem;
		}
	}

	/* ============================
		セクション本文（中央寄せ）
	============================ */
	.pol-catch {
		color: var(--main-text-color);
		font-size: clamp(2rem, 2.6vw, 3.6rem);
		font-weight: 700;
		letter-spacing: .08em;
		margin: 70px 0 0;
		text-align: center;

		@media screen and (max-width: 767px) {
			margin-top: 34px;
		}
	}

	.pol-text {
		color: var(--p-pol-text);
		font-size: 1.7rem;
		line-height: 2;
		margin: 30px 0 0;
		text-align: center;
		text-wrap: pretty;

		@media screen and (max-width: 767px) {
			font-size: 1.3rem;
			line-height: 2;
			margin-top: 20px;
			text-align: left;
		}

		/* SP はブラウザの折り返しに任せる */
		br {
			@media screen and (max-width: 767px) {
				display: none;
			}
		}
	}

	/* ============================
		5つのつなごう
	============================ */
	.pol-lead {
		color: var(--main-text-color);
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: 2.4rem;
		font-weight: 700;
		letter-spacing: .06em;
		margin: 60px 0 0;
		text-align: center;

		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
			margin-top: 30px;
		}
	}

	.pol-values {
		display: flex;
		flex-wrap: wrap;
		gap: 44px 42px;
		justify-content: center;
		list-style: none;
		margin: 44px 0 0;
		padding: 0;

		@media screen and (max-width: 767px) {
			gap: 26px;
			margin-top: 26px;
		}
	}

	.pol-value {
		width: 290px;

		@media screen and (max-width: 767px) {
			width: min(100%, 260px);
		}
	}

	.pol-value__blob {
		aspect-ratio: 1 / 1;
		display: block;
		height: auto;
		object-fit: contain;
		object-position: center;
		width: 100%;
	}

	.pol-value__text {
		color: var(--p-pol-text);
		font-size: 1.8rem;
		line-height: 1.6;
		margin: 5px 0 0;
		text-align: center;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
		}
	}

	/* スクロールで見え始めたら順番にフェードインさせる。
	   js-reveal は myscripts.js が付けるので、JS が動かない環境では最初から見えている
	   （トップの .tsunagou-blobs と同じ仕組み）。遅延は同時に入ってきた分だけ JS が付ける */
	.pol-values.js-reveal .pol-value {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
	}

	.pol-values.js-reveal .pol-value.is-inview {
		opacity: 1;
		transform: translateY(0);
	}

	@media (prefers-reduced-motion: reduce) {
		.pol-values.js-reveal .pol-value {
			opacity: 1;
			transform: none;
			transition: none;
		}
	}

	/* ============================
		写真コラージュ（楕円マスクと緑の縁取りは images/education-policy/value01.png に焼き込み済み）
	============================ */
	.pol-collage {
		margin: 90px auto 0;
		width: min(100%, 1132px);

		@media screen and (max-width: 767px) {
			margin-top: 40px;
		}

		img {
			display: block;
			height: auto;
			width: 100%;
		}
	}
}

/* ============================
	お問い合わせ（page-contact.php）
	body_class が page-template-default で他ページと共有されるため body#contact でスコープする。
	見出し帯＋白パネルの作りは「入園のご案内」と揃えるので --p-adm-* / --p-bg-green を流用する
============================ */
body#contact {
	.section-contact {
		.sec-inner {
			padding: 60px 0;

			@media screen and (max-width: 767px) {
				padding: 40px 0;
			}
		}

		/* 見出し帯と白パネルを1枚のカードに見せるため間を詰め、
		   白地から浮かせる境界は影で作る（角丸は .contact-panel と揃える） */
		.content-box {
			border-radius: 0 0 var(--p-adm-radius) var(--p-adm-radius);
			box-shadow: var(--p-contact-shadow);
			margin-top: 0;

			@media screen and (max-width: 767px) {
				border-radius: 0 0 20px 20px;
			}
		}
	}

	/* セクション見出しの帯。白パネルの上端に載るので下側は角丸にしない */
	.sec-ttl-box {
		background: var(--p-bg-green);
		border-radius: var(--p-adm-radius) var(--p-adm-radius) 0 0;
		overflow: hidden;

		@media screen and (max-width: 767px) {
			border-radius: 20px 20px 0 0;
		}
	}

	.sec-ttl {
		align-items: center;
		color: var(--white);
		display: flex;
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: clamp(2rem, 2.4vw, 3.2rem);
		font-weight: 700;
		justify-content: center;
		letter-spacing: .1em;
		min-height: 80px;
		padding: 10px 20px;

		@media screen and (max-width: 767px) {
			font-size: 1.8rem;
			min-height: 56px;
			padding: 10px 16px;
		}
	}

	.contact-panel {
		background-color: var(--white);
		border-radius: 0 0 var(--p-adm-radius) var(--p-adm-radius);
		box-sizing: border-box;
		/* 1440px 時に左右 120px（内容幅 960px） */
		padding: 60px clamp(16px, 8.34vw, 120px) 77px;

		@media screen and (max-width: 767px) {
			border-radius: 0 0 20px 20px;
			padding: 28px 16px 34px;
		}
	}

	/* 余白と背景は .contact-panel が持つので、CF7 側の箱は素通しにする */
	.contact-box {
		background: none;
		border-radius: 0;
		padding: 0;
	}

	.contact-lead {
		font-size: 1.6rem;
		line-height: 1.9;
		margin: 0;
		text-align: center;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			text-align: left;
		}
	}

	/* お急ぎの方向けの電話案内。フォームの前に置くので淡い帯で控えめに見せる */
	.contact-tel {
		align-items: baseline;
		background-color: var(--p-adm-band-bg);
		border-radius: 16px;
		color: var(--main-text-color);
		display: flex;
		flex-wrap: wrap;
		gap: 4px 16px;
		justify-content: center;
		margin: 30px 0 0;
		padding: 20px;

		@media screen and (max-width: 767px) {
			margin-top: 20px;
			padding: 16px;
		}
	}

	.contact-tel__label {
		font-size: 1.5rem;
		font-weight: 700;

		@media screen and (max-width: 767px) {
			font-size: 1.3rem;
			margin-inline: auto;
			width: fit-content;
		}
	}

	.contact-tel__num {
		align-items: baseline;
		display: flex;
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-weight: 700;
		gap: 6px;
		letter-spacing: .04em;
		line-height: 1.2;

		a {
			color: var(--main-text-color);
			font-size: 2.8rem;

			@media screen and (max-width: 767px) {
				font-size: 2.4rem;
			}
		}
	}

	.contact-tel__num-label {
		font-size: 1.8rem;

		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
		}
	}

	.contact-tel__note {
		font-size: 1.3rem;
		font-weight: 500;

		@media screen and (max-width: 767px) {
			font-size: 1.2rem;
			width: 100%;
		}
	}

	/* 必須マークの凡例。ラベルが文頭に来るので .required の左マージンは打ち消す */
	.contact-note {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		font-size: 1.4rem;
		gap: 4px;
		margin:20px 0 0;

		@media screen and (max-width: 767px) {
			font-size: 1.3rem;
			margin-top: 28px;
		}

		.required {
			margin-left: 0;
		}
	}

	/* 凡例とフォーム本体の間をあける（.contact-box dl は先頭に margin-top を持たない） */
	.wpcf7 {
		margin-top: 20px;

		@media screen and (max-width: 767px) {
			margin-top: 16px;
		}
	}
}

/* ============================
	送信完了（page-thanks.php / /contact/thanks/）
	見出し帯＋白パネルの作りは body#contact と同じなので --p-bg-green / --p-adm-radius /
	--p-contact-shadow を流用する。body_class は page-template-default で他ページと
	共有されるため body#thanks でスコープする
============================ */
body#thanks {
	.section-thanks {
		.sec-inner {
			padding: 60px 0;

			@media screen and (max-width: 767px) {
				padding: 40px 0;
			}
		}

		/* 見出し帯と白パネルを1枚のカードに見せるため間を詰め、
		白地から浮かせる境界は影で作る（角丸は .thanks-panel と揃える） */
		.content-box {
			border-radius: 0 0 var(--p-adm-radius) var(--p-adm-radius);
			box-shadow: var(--p-contact-shadow);
			margin-top: 0;

			@media screen and (max-width: 767px) {
				border-radius: 0 0 20px 20px;
			}
		}
	}

	/* セクション見出しの帯。白パネルの上端に載るので下側は角丸にしない */
	.sec-ttl-box {
		background: var(--p-bg-green);
		border-radius: var(--p-adm-radius) var(--p-adm-radius) 0 0;
		overflow: hidden;

		@media screen and (max-width: 767px) {
			border-radius: 20px 20px 0 0;
		}
	}

	.sec-ttl {
		align-items: center;
		color: var(--white);
		display: flex;
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: clamp(2rem, 2.4vw, 3.2rem);
		font-weight: 700;
		justify-content: center;
		letter-spacing: .1em;
		min-height: 80px;
		padding: 10px 20px;

		@media screen and (max-width: 767px) {
			font-size: 1.8rem;
			min-height: 56px;
			padding: 10px 16px;
		}
	}

	.thanks-panel {
		background-color: var(--white);
		border-radius: 0 0 var(--p-adm-radius) var(--p-adm-radius);
		box-sizing: border-box;
		/* 1440px 時に左右 120px（内容幅 960px）。.contact-panel と揃える */
		padding: 60px clamp(16px, 8.34vw, 120px) 77px;
		text-align: center;

		@media screen and (max-width: 767px) {
			border-radius: 0 0 20px 20px;
			padding: 28px 16px 34px;
			text-align: left;
		}
	}

	.thanks-lead {
		font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
		font-size: clamp(2rem, 1.8vw, 2.4rem);
		font-weight: 700;
		line-height: 1.8;
		margin: 0;

		@media screen and (max-width: 767px) {
			font-size: 1.8rem;
		}
	}

	.thanks-text {
		font-size: 1.6rem;
		line-height: 1.9;
		margin-top: 24px;

		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			margin-top: 16px;
		}
	}

	/* 自動返信メールが届かない場合の注意書き。本文より一段控えめに見せる */
	.thanks-note {
		color: var(--p-adm-faq-text);
		font-size: 1.4rem;
		line-height: 1.9;
		margin-top: 32px;

		@media screen and (max-width: 767px) {
			font-size: 1.3rem;
			margin-top: 24px;
		}
	}

	.thanks-btn {
		display: flex;
		justify-content: center;
		margin-top: 48px;

		@media screen and (max-width: 767px) {
			margin-top: 32px;
		}

		/* .thanks-panel の text-align: center が .c-button__label（flex: 1）に効くので戻す */
		.c-button__label {
			text-align: left;
		}
	}
}