@charset "utf-8";
/* ==========================================================================
   トップページ
   Figma: 妙厳寺幼稚園 様 TOP_PC(19:1578) 1440 / SP(125:5) 375
   ブレークポイント（既存に合わせて max-width）: 1199.98px ヘッダーSP型 / 767.98px SP
   ========================================================================== */

:root {
	--color-award-em: #fff989;
}

/* --------------------------------------------------------------------------
   p-top
   比率の基準にスクロールバーを含まない幅（cqw）を使うため container にする
   -------------------------------------------------------------------------- */
.p-top {
	container-type: inline-size;
	background-color: var(--color-cream);
}

/* 各sectionで使う比率: --u = 1440基準の1px（最大1px）。SPは375基準 */
.p-top > * {
	--u: min(1px, calc(100vw / 1440));
}

/* --------------------------------------------------------------------------
   p-top-fv（s01）
   1440の配置を比率で縮小する
   -------------------------------------------------------------------------- */
.p-top-fv {
	position: relative;
	/* 右の水彩(19:1617)が下のsectionに重なるため前面に出す */
	z-index: 1;
	margin-top: calc(-1 * var(--header-height));
	background-color: var(--color-cream);
}

/* 左右の水彩（19:1584 / 19:1617）: 1440より広い画面でも画面端に付ける。大きさは1440の時のまま */
.p-top-fv::before,
.p-top-fv::after {
	position: absolute;
	background-position: left top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
	content: "";
}

/* 左の薄緑: 写真の背面 */
.p-top-fv::before {
	top: 0;
	left: 0;
	width: calc(317.5 * var(--u));
	height: calc(759.5 * var(--u));
	background-image: url("../../img/top/fv-deco-left.webp");
}

/* 右の水色: 写真の前面・キャッチの背面。下端はsectionの外へはみ出す */
.p-top-fv::after {
	top: calc(451.3 * var(--u));
	right: 0;
	z-index: 1;
	width: calc(621.5 * var(--u));
	height: calc(552.5 * var(--u));
	background-image: url("../../img/top/fv-deco-right.webp");
}

.p-top-fv__inner {
	position: relative;
	width: calc(1440 * var(--u));
	height: calc(794 * var(--u));
	margin: 0 auto;
}

.p-top-fv__photo {
	position: absolute;
	top: calc(93.68 * var(--u));
	left: calc(471.21 * var(--u));
	display: block;
	width: calc(916.5 * var(--u));
	height: auto;
	pointer-events: none;
}

.p-top-fv__catch {
	position: absolute;
	top: calc(198 * var(--u));
	left: calc(170 * var(--u));
	z-index: 2;
	width: calc(590 * var(--u));
	margin: 0;
	line-height: 1;
}

.p-top-fv__catch img {
	display: block;
	width: 100%;
	height: auto;
}

.p-top-fv__lead {
	position: absolute;
	top: calc(519 * var(--u));
	left: calc(168 * var(--u));
	z-index: 2;
	margin: 0;
	font-size: max(14px, calc(20 * var(--u)));
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: 0.03em;
	color: var(--color-text);
	white-space: nowrap;
	/* 19:2526: 同じ文字の #fff9f0 blur 3px を背後に敷いている */
	text-shadow: 0 0 3px var(--color-cream), 0 0 3px var(--color-cream);
}

.p-top-fv__award {
	position: absolute;
	top: calc(590 * var(--u));
	left: calc(169 * var(--u));
	z-index: 2;
	box-sizing: border-box;
	min-width: calc(450 * var(--u));
	min-height: calc(117 * var(--u));
	/* 右余白はFigmaにない（幅450固定）。minmojiの字幅でも450に収まるよう最小限にする */
	padding: calc(16 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u)) calc(135.5 * var(--u));
	color: var(--color-white);
	background-color: var(--color-green);
	border-radius: calc(20 * var(--u));
	box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.15);
}

.p-top-fv__award-mark {
	position: absolute;
	top: calc(15.03 * var(--u));
	left: calc(26 * var(--u));
	width: calc(94 * var(--u));
}

.p-top-fv__laurel {
	display: block;
	width: 100%;
	height: auto;
}

.p-top-fv__award-label {
	position: absolute;
	/* 中心 x244.5 / top631（バッジ基準で 75.5 / 41 → マーク基準で 49.5 / 25.97） */
	top: calc(25.97 * var(--u));
	left: calc(49.5 * var(--u));
	font-size: max(9px, calc(14.324 * var(--u)));
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-align: center;
	white-space: nowrap;
	transform: translateX(-50%);
}

.p-top-fv__award-text {
	margin: 0;
	font-size: max(12px, calc(18 * var(--u)));
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.p-top-fv__award-line {
	display: block;
}

/* 「「」は字形の左側が空いているため半角分ぶら下げて行頭を揃える */
.p-top-fv__award-line--bracket {
	margin-left: -0.5em;
}

.p-top-fv__award-em {
	color: var(--color-award-em);
}

/* ==========================================================================
   〜1199.98px：ヘッダーがSP型（高さ57.47px）
   ========================================================================== */
@media screen and (max-width: 1199.98px) {
	.p-top-fv {
		margin-top: calc(-1 * var(--header-height-sp));
	}
}

@supports (container-type: inline-size) {
	.p-top > * {
		--u: min(1px, calc(100cqw / 1440));
	}
}

/* ==========================================================================
   〜767.98px：SP（375の配置を画面幅に合わせて伸縮）
   ========================================================================== */
@media screen and (max-width: 767.98px) {
	.p-top > * {
		--u: calc(100vw / 375);
	}

	@supports (container-type: inline-size) {
		.p-top > * {
			--u: calc(100cqw / 375);
		}
	}

	/* SPは水彩を写真と同じ画像に含める（content: none だけでは画像が読み込まれるため背景も外す） */
	.p-top-fv::before,
	.p-top-fv::after {
		background-image: none;
		content: none;
	}

	.p-top-fv__inner {
		width: 100%;
		height: calc(575 * var(--u));
	}

	.p-top-fv__photo {
		top: 0;
		left: 0;
		width: 100%;
	}

	.p-top-fv__catch {
		top: calc(256 * var(--u));
		left: calc(19.82 * var(--u));
		width: calc(301.86 * var(--u));
	}

	.p-top-fv__lead {
		top: calc(418 * var(--u));
		left: calc(20 * var(--u));
		width: calc(335 * var(--u));
		font-size: calc(14 * var(--u));
		line-height: 1.6;
		white-space: normal;
		text-shadow: none;
	}

	.p-top-fv__award {
		top: calc(476 * var(--u));
		left: calc(20 * var(--u));
		min-width: calc(287 * var(--u));
		min-height: calc(74 * var(--u));
		padding: calc(8.51 * var(--u)) calc(6 * var(--u)) calc(11.49 * var(--u)) calc(81 * var(--u));
		border-radius: calc(10.64 * var(--u));
		box-shadow: calc(2.128 * var(--u)) calc(2.128 * var(--u)) calc(4.256 * var(--u)) rgba(0, 0, 0, 0.15);
	}

	.p-top-fv__award-mark {
		top: calc(9 * var(--u));
		left: calc(11.24 * var(--u));
		width: calc(59.76 * var(--u));
	}

	.p-top-fv__award-label {
		/* 中心 x60.45 / top501.51（マーク基準で 29.21 / 16.51） */
		top: calc(16.51 * var(--u));
		left: calc(29.21 * var(--u));
		font-size: calc(9 * var(--u));
	}

	.p-top-fv__award-text {
		font-size: calc(12 * var(--u));
	}
}

/* --------------------------------------------------------------------------
   p-top-intro（s02 バナー＋s03 コンセプトの白い面。19:1585）
   上端が波（1440×32.22）、下角 r80
   -------------------------------------------------------------------------- */
.p-top-intro {
	position: relative;
	isolation: isolate;
	padding: calc(146 * var(--u)) 0 calc(101 * var(--u));
}

.p-top-intro::before,
.p-top-intro::after {
	position: absolute;
	right: 0;
	left: 0;
	z-index: -1;
	content: "";
}

.p-top-intro::before {
	top: 0;
	height: calc(32.22 * var(--u));
	background: url("../../img/common/wave.svg") left top / 100% 100% no-repeat;
}

.p-top-intro::after {
	/* 波との境目に隙間が出ないよう1px重ねる */
	top: calc(32.22 * var(--u) - 1px);
	bottom: 0;
	background-color: var(--color-white);
	border-radius: 0 0 calc(80 * var(--u)) calc(80 * var(--u));
}

/* --------------------------------------------------------------------------
   p-top-banner（s02。画像・リンクは管理画面で設定。top.js で自動送り）
   -------------------------------------------------------------------------- */
.p-top-banner {
	position: relative;
}

/* 中央の3枚目を画面の中心に置き、両端ははみ出させる */
.p-top-banner__list {
	display: flex;
	justify-content: center;
	gap: calc(40 * var(--u));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* JSで動かす時は左詰めにして、中央に置く位置は top.js が transform で決める */
.p-top-banner.is-ready {
	overflow-x: clip;
}

.p-top-banner.is-ready .p-top-banner__list {
	justify-content: flex-start;
	touch-action: pan-y;
	user-select: none;
}

.p-top-banner__list.is-animating {
	transition: transform 0.5s ease;
}

.p-top-banner__item {
	flex: 0 0 calc(330 * var(--u));
}

/* 管理画面から正方形以外の画像を設定しても枠は正方形のまま */
.p-top-banner__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: calc(20 * var(--u));
}

.p-top-banner__link {
	display: block;
	transition: opacity 0.3s;
}

.p-top-banner__link:hover {
	opacity: 0.8;
}

.p-top-banner__arrow {
	position: absolute;
	top: calc(136 * var(--u));
	width: calc(60 * var(--u));
	height: calc(60 * var(--u));
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.p-top-banner__arrow img {
	display: block;
	width: 100%;
	height: auto;
}

/* 1440の枠（中央寄せ）の x157 / x1224（19:1982 は180°回転のため metadata の x1284 は右端） */
.p-top-banner__arrow--prev {
	left: calc(50% - 563 * var(--u));
}

.p-top-banner__arrow--next {
	left: calc(50% + 504 * var(--u));
	/* Figmaでも左向きの矢印を180°回転している */
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   p-top-concept（s03）
   -------------------------------------------------------------------------- */
.p-top-concept {
	margin-top: calc(110 * var(--u));
}

/* 装飾は白い面(.p-top-intro)を基準に配置。左側は画面の左端、右側は右端に合わせる */
.p-top-concept__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.p-top-concept__deco img {
	position: absolute;
	display: block;
	height: auto;
}

.p-top-concept__pink {
	top: calc(927 * var(--u));
	left: 0;
	width: calc(322 * var(--u));
}

.p-top-concept__photo--01 {
	top: calc(548.93 * var(--u));
	left: 0;
	width: calc(321.92 * var(--u));
}

.p-top-concept__photo--02 {
	top: calc(577.77 * var(--u));
	right: calc(43.73 * var(--u));
	width: calc(337.27 * var(--u));
}

.p-top-concept__photo--03 {
	top: calc(874.83 * var(--u));
	left: calc(104.92 * var(--u));
	width: calc(281.64 * var(--u));
}

.p-top-concept__balloons {
	top: calc(986 * var(--u));
	right: calc(100 * var(--u));
	width: calc(194 * var(--u));
	/* 19:2079 など: mix-blend-multiply */
	mix-blend-mode: multiply;
}

.p-top-concept__body {
	position: relative;
	width: 620px;
	max-width: calc(100% - 40px);
	margin: 0 auto;
}

.p-top-concept__heading {
	box-sizing: border-box;
	height: 120px;
	margin: 0;
	padding-top: 10.5px;
	line-height: 1;
}

.p-top-concept__heading img {
	position: relative;
	/* インクの中心は枠の中心から +8.25（19:1691 の配置） */
	left: 8.25px;
	display: block;
	width: 418.5px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.p-top-concept__line {
	display: block;
}

.p-top-concept__line img {
	display: block;
	width: 578px;
	max-width: 100%;
	height: auto;
	margin: 24px auto 0;
}

.p-top-concept__text {
	margin-top: 43px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.8;
	letter-spacing: 0.03em;
	color: var(--color-text);
	text-align: center;
}

/* 既存 style.css のリセット（p{line-height:1.5}）を打ち消して親の行送りを使う */
.p-top-concept__text p {
	margin: 0;
	line-height: inherit;
}

/* 段落の間は1行分（Figmaの空行） */
.p-top-concept__text p + p {
	margin-top: 1.8em;
}

.p-top-concept__em {
	color: var(--color-orange);
}

.p-top-concept__btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 38.2px;
}

/* ==========================================================================
   s03 1024〜1199.98px（デザインなし・estimated）
   本文は固定pxのため、写真を0.85倍にして画面端に寄せ、本文との重なりを避ける
   ========================================================================== */
@media screen and (min-width: 1024px) and (max-width: 1199.98px) {
	.p-top-concept__photo--01 {
		width: calc(321.92 * var(--u) * 0.85);
	}

	.p-top-concept__photo--02 {
		right: 0;
		width: calc(337.27 * var(--u) * 0.85);
	}

	.p-top-concept__photo--03 {
		left: 0;
		width: calc(281.64 * var(--u) * 0.85);
	}
}

/* ==========================================================================
   s03 〜1023.98px（768〜1023はデザインなし・estimated）
   写真を本文の横に置く幅がないため、SPと同じく白い面の下端（ボタンの下）に並べる
   ========================================================================== */
@media screen and (max-width: 1023.98px) {
	.p-top > * {
		--u-sp: calc(100vw / 375);
	}

	@supports (container-type: inline-size) {
		.p-top > * {
			--u-sp: calc(100cqw / 375);
		}
	}

	.p-top-intro {
		padding-bottom: calc(213 * var(--u-sp));
	}

	/* SPの装飾は白い面の下端を基準にする（文章の長さが変わっても追従） */
	/* 125:109 は左右反転で x−37〜146。画面内の x0〜146 を書き出した画像 */
	.p-top-concept__pink {
		top: calc(100% - 99 * var(--u-sp));
		width: calc(146 * var(--u-sp));
	}

	.p-top-concept__photo--01 {
		top: calc(100% - 189.64 * var(--u-sp));
		width: calc(138.5 * var(--u-sp));
	}

	.p-top-concept__photo--02 {
		top: calc(100% - 188.68 * var(--u-sp));
		right: auto;
		left: calc(233 * var(--u-sp));
		width: calc(140.97 * var(--u-sp));
	}

	.p-top-concept__photo--03 {
		top: calc(100% - 120.73 * var(--u-sp));
		left: calc(146 * var(--u-sp));
		width: calc(117.72 * var(--u-sp));
	}

	.p-top-concept__balloons {
		top: calc(100% - 79 * var(--u-sp));
		right: auto;
		left: calc(294 * var(--u-sp));
		width: calc(60 * var(--u-sp));
	}
}

/* ==========================================================================
   s02・s03 〜767.98px：SP
   ========================================================================== */
@media screen and (max-width: 767.98px) {
	.p-top-intro {
		padding-top: 45.92px;
	}

	/* 125:106: 波 446×9.36 を x−36 から */
	.p-top-intro::before {
		height: calc(9.36 * var(--u));
		background-image: url("../../img/common/wave-sp.svg");
		background-position: calc(-36 * var(--u)) 0;
		background-size: calc(446 * var(--u)) 100%;
	}

	.p-top-intro::after {
		top: calc(9.36 * var(--u) - 1px);
		border-radius: 0 0 calc(40 * var(--u)) calc(40 * var(--u));
	}

	.p-top-banner__list {
		gap: 20px;
	}

	.p-top-banner__item {
		flex-basis: 250px;
	}

	.p-top-banner__item img {
		border-radius: 20px;
	}

	.p-top-banner__arrow {
		top: 98px;
		width: 35px;
		height: 35px;
	}

	.p-top-banner__arrow--prev {
		left: 20px;
	}

	.p-top-banner__arrow--next {
		right: 20px;
		left: auto;
	}

	.p-top-concept {
		margin-top: 60px;
	}

	.p-top-concept__body {
		width: 335px;
		max-width: calc(100% - 40px);
	}

	.p-top-concept__heading {
		height: 72px;
		padding-top: 6.3px;
	}

	.p-top-concept__heading img {
		left: 0;
		width: 251.1px;
	}

	.p-top-concept__line img {
		width: 337px;
		max-width: calc(100% + 2px);
		margin: 9px 0 0 -1px;
	}

	.p-top-concept__text {
		margin-top: 19px;
		font-size: 14px;
	}

	.p-top-concept__btns {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		margin-top: 30px;
	}
}

/* ==========================================================================
   s04 当園の教育内容 ＋ s05 園での生活について
   ========================================================================== */
:root {
	--color-marker: #fff3bf;
	--color-edu-wave: #fff3e0;
	--color-label-yellow: #ffe56d;
}

/* --------------------------------------------------------------------------
   p-top-edu（s04）
   -------------------------------------------------------------------------- */
.p-top-edu {
	position: relative;
	/* s05 の青い水彩(19:1597)より前面に出す */
	z-index: 1;
	padding-top: 70px;
}

.p-top-edu__lead {
	margin: 15px 0 0;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.8;
	letter-spacing: 0.03em;
	color: var(--color-text);
	text-align: center;
}

.p-top-edu__lead-em {
	position: relative;
	z-index: 0;
	display: inline-block;
	font-size: 26px;
	color: var(--color-orange);
}

/* 57:146: 下線帯 高さ11（行の下端から3上） */
.p-top-edu__lead-em::after {
	position: absolute;
	right: 0;
	bottom: 3px;
	left: 0;
	z-index: -1;
	height: 11px;
	background-color: var(--color-marker);
	content: "";
}

.p-top-edu__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px 50px;
	margin: 41px 0 0;
	padding: 0;
	list-style: none;
}

.p-top-edu__card {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 300px;
	min-height: 445px;
	/* 丸写真がカードの上に78はみ出す */
	margin: 78px 0 0;
	background-color: var(--color-white);
	border-radius: 20px;
	box-shadow: var(--shadow-card);
	transition: transform 0.3s;
	/* 下の波を z-index: -1 にしても、カードの背景より後ろへ行かないようにする */
	isolation: isolate;
}

/* 下の波（頂点がカード下端から74。波は x−24 の谷から始まる）
   リンクが position: static（カード全体をリンクにするため）なので、波を中身より後ろに置く */
.p-top-edu__card::before {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	height: 74px;
	background:
		url("../../img/top/card-wave-orange.svg") -24px 0 / 115.677px 14.25px repeat-x,
		linear-gradient(var(--color-edu-wave), var(--color-edu-wave)) 0 14px / 100% calc(100% - 14px) no-repeat;
	border-radius: 0 0 20px 20px;
	content: "";
}

/* 丸写真（円211をカード中央に。体は花が右、知は葉が左にはみ出す） */
.p-top-edu__photo {
	position: absolute;
	top: -78px;
	left: calc(50% - 105.5px);
	z-index: 1;
	display: block;
	width: 218.5px;
	height: auto;
}

.p-top-edu__photo--chi {
	left: calc(50% - 113px);
}

.p-top-edu__photo--toku {
	width: 211px;
}

.p-top-edu__head {
	position: relative;
	padding: 143px 0 16px;
	background-color: var(--color-beige);
	border-radius: 20px 20px 0 0;
}

/* 点線（2px、4/8、端は丸）。上部の下端に中心を合わせる */
.p-top-edu__head::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: url("../../img/common/dash-line.svg") -1px 0 / 12px 2px repeat-x;
	content: "";
}

.p-top-edu__title {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.03em;
	color: var(--color-text);
	text-align: center;
	background: none;
	border: none;
}

.p-top-edu__em {
	font-style: normal;
	color: var(--color-orange);
}

.p-top-edu__text {
	margin: 20px 0 34.4px;
	padding: 0 21px;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.6;
	color: var(--color-text);
}

/* リンク（c-more-link）はカード中央。文字の上端はカード下端から46 */
.p-top-edu__link {
	position: static;
	align-self: center;
	margin: auto 0 21.5px;
}

/* カード全体をリンクの範囲にする（丸写真より前に透明の面を重ねる） */
.p-top-edu__link::before {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 20px;
	content: "";
}

.p-top-edu__card:has(.p-top-edu__link:hover, .p-top-edu__link:focus-visible) {
	transform: translateY(-8px);
}

/* --------------------------------------------------------------------------
   p-top-life（s05）白い帯 19:1588（上端が波、下角 r80）
   -------------------------------------------------------------------------- */
.p-top-life {
	position: relative;
	isolation: isolate;
	margin-top: 108px;
	padding: 100px 0 131px;
}

.p-top-life::before,
.p-top-life::after {
	position: absolute;
	right: 0;
	left: 0;
	z-index: -1;
	content: "";
}

/* 波は s02 と同じ形（19:1588 の高さは31.94） */
.p-top-life::before {
	top: 0;
	height: calc(31.94 * var(--u));
	background: url("../../img/common/wave.svg") left top / 100% 100% no-repeat;
}

.p-top-life::after {
	top: calc(31.94 * var(--u) - 1px);
	bottom: 0;
	background-color: var(--color-white);
	border-radius: 0 0 calc(80 * var(--u)) calc(80 * var(--u));
}

.p-top-life__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.p-top-life__deco img {
	position: absolute;
	display: block;
	height: auto;
}

/* 19:1597（s04 との境目。画面内の x0〜373 を書き出した画像） */
.p-top-life__blue {
	top: calc(-275 * var(--u));
	left: 0;
	width: calc(373 * var(--u));
}

/* 19:1598（画面内の右端 310.5 を書き出した画像。s06 へはみ出す） */
.p-top-life__green {
	top: calc(421 * var(--u));
	right: 0;
	width: calc(310.5 * var(--u));
}

.p-top-life__list {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin: 31px auto 0;
	padding: 0;
	list-style: none;
}

.p-top-life__item {
	width: 232px;
}

.p-top-life__card {
	position: relative;
	display: block;
	box-sizing: border-box;
	height: 303px;
	overflow: hidden;
	color: var(--color-text);
	text-decoration: none;
	background-color: var(--color-cream);
	border-radius: 20px;
	transition: transform 0.3s;
}

/* ホバーでカード全体を少し上へ（教育内容カードと同じ） */
.p-top-life__card:hover,
.p-top-life__card:focus-visible {
	color: var(--color-text);
	text-decoration: none;
	transform: translateY(-8px);
}

/* 下の波（頂点がカード下端から45。x−59 の谷から） */
.p-top-life__card::before {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 45px;
	background:
		url("../../img/top/card-wave-beige.svg") -59px 0 / 115.677px 14.25px repeat-x,
		linear-gradient(var(--color-beige), var(--color-beige)) 0 14px / 100% calc(100% - 14px) no-repeat;
	content: "";
}

.p-top-life__photo {
	position: relative;
	display: block;
}

.p-top-life__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* 写真の下端に20重ねる */
.p-top-life__label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 152px;
	height: 40px;
	margin: -20px auto 0;
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	color: var(--color-white);
	background-color: var(--color-orange);
	border: none;
	border-radius: 20px;
}

.p-top-life__label--yellow {
	color: var(--color-text);
	background-color: var(--color-label-yellow);
}

.p-top-life__text {
	position: relative;
	margin: 11px 15px 0;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.6;
}

.p-top-life__icon {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: block;
	width: 43px;
	height: 43px;
}

/* ==========================================================================
   s04・s05 〜1023.98px: 水彩はSP画像を375基準の比率で置く（768〜1023は estimated）
   ========================================================================== */
@media screen and (max-width: 1023.98px) {
	/* s05 のカードは4枚が1列に入らないので 2×2 */
	.p-top-life__list {
		max-width: 488px;
	}

	/* 125:356: s05 の帯の上端から −2.26 */
	.p-top-life__blue {
		top: calc(-2.26 * var(--u-sp));
		width: calc(214 * var(--u-sp));
	}

	/* 126:484: 帯の下端から 210 上 */
	.p-top-life__green {
		top: calc(100% - 210 * var(--u-sp));
		width: calc(128 * var(--u-sp));
	}
}

/* ==========================================================================
   s04・s05 〜767.98px：SP
   ========================================================================== */
@media screen and (max-width: 767.98px) {
	.p-top-edu__lead {
		margin-top: 20px;
		font-size: 16px;
		line-height: 1.6;
	}

	.p-top-edu__lead-em {
		font-size: 20px;
	}

	/* 125:474: 2行目の上端から 24.4〜35.4 */
	.p-top-edu__lead-em::after {
		bottom: -3.4px;
	}

	.p-top-edu__list {
		flex-direction: column;
		align-items: center;
		margin-top: 23.4px;
	}

	.p-top-edu__card {
		width: 335px;
		max-width: calc(100% - 40px);
		min-height: 0;
		margin-top: 44px;
	}

	.p-top-edu__card::before {
		background-position: -6px 0, 0 14px;
	}

	/* 丸写真は PC の0.7倍（円147.7） */
	.p-top-edu__photo {
		top: -44px;
		left: calc(50% - 73.85px);
		width: 152.95px;
	}

	.p-top-edu__photo--chi {
		left: calc(50% - 79.1px);
	}

	.p-top-edu__photo--toku {
		width: 147.7px;
	}

	.p-top-edu__head {
		padding: 117px 0 10.8px;
	}

	.p-top-edu__title {
		font-size: 16px;
	}

	.p-top-edu__text {
		padding: 0 19px 0 21px;
	}

	/* s05 の帯は s04 の最後のカードの下に 73.74 重なる */
	.p-top-life {
		margin-top: -73.74px;
		padding: 222.74px 0 50px;
	}

	/* 126:554: 波 446×9.36 を x−37 から */
	.p-top-life::before {
		height: calc(9.36 * var(--u));
		background-image: url("../../img/common/wave-sp.svg");
		background-position: calc(-37 * var(--u)) 0;
		background-size: calc(446 * var(--u)) 100%;
	}

	.p-top-life::after {
		top: calc(9.36 * var(--u) - 1px);
		border-radius: 0 0 calc(40 * var(--u)) calc(40 * var(--u));
	}

	.p-top-life__list {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		margin-top: 20px;
	}

	.p-top-life__item {
		width: 335px;
		max-width: calc(100% - 40px);
	}

	/* 横長カード: 写真は左140、文字は x153 から */
	.p-top-life__card {
		height: auto;
		min-height: 146px;
		padding: 10px 10px 0 153px;
		border-radius: 13.55px;
	}

	.p-top-life__card::before {
		height: 34px;
		background-position: 125px 0, 0 14px;
	}

	.p-top-life__photo {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 140px;
	}

	.p-top-life__photo img {
		height: 100%;
		object-fit: cover;
	}

	.p-top-life__label {
		width: 120px;
		height: 34px;
		margin: 0 0 0 25px;
		font-size: 16px;
		border-radius: 17px;
	}

	.p-top-life__text {
		margin: 7px 0 0;
		font-size: 12px;
	}

	.p-top-life__icon {
		right: 9.86px;
		bottom: 9.44px;
		width: 29.14px;
		height: 29.14px;
	}
}

/* ==========================================================================
   s06 保護者の声
   ========================================================================== */
:root {
	--color-voice-border: #f6e4d1;
	--color-voice-marker: rgba(255, 229, 109, 0.5);
}

.p-top-voice {
	position: relative;
	/* s05 の緑の水彩(19:1598)より前面に出す */
	z-index: 1;
	padding: 81px 0 110px;
}

.p-top-voice__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 44px 23px;
	margin: 38px 0 0;
	padding: 0;
	list-style: none;
}

.p-top-voice__card {
	position: relative;
	box-sizing: border-box;
	width: 318px;
	min-height: 384px;
	padding: 24px 26px 30px;
	background-color: var(--color-white);
	border: 4px solid var(--color-voice-border);
	border-radius: 20px;
	box-shadow: var(--shadow-card);
}

/* クリップ・テープ・画びょう（カードの外枠の左上からの位置。枠4pxを引く） */
.p-top-voice__deco {
	position: absolute;
	display: block;
	height: auto;
}

.p-top-voice__deco--clip {
	top: -24px;
	left: 28px;
	width: 90px;
}

/* 35:194 は左右反転のため metadata の x は右端。カンプの位置（カード左上から 185, −24） */
.p-top-voice__deco--tape {
	top: -28px;
	left: 181px;
	width: 121px;
}

.p-top-voice__deco--pin {
	top: -23px;
	left: 188px;
	width: 43px;
}

/* イラストは高さが少しずつ違うので下端で揃える */
.p-top-voice__illust {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 161px;
}

.p-top-voice__illust img {
	display: block;
	width: 153px;
	height: auto;
}

/* 1行・2行とも 193〜249 の中で上下中央 */
.p-top-voice__title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	margin: 4px 0 0;
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.03em;
	color: var(--color-text);
	text-align: center;
	background: none;
	border: none;
}

/* 中身を1つにまとめて flex の上下中央に置く（改行・マーカーを通常の行内で扱う） */
.p-top-voice__title-inner {
	display: block;
}

/* 帯は文字の下端より5下まで（行内の padding は行の高さに影響しない） */
.p-top-voice__marker {
	padding-bottom: 5px;
	background: linear-gradient(var(--color-voice-marker), var(--color-voice-marker)) 0 100% / 100% 11px no-repeat;
}

.p-top-voice__text {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.6;
	color: var(--color-text);
}

.p-top-voice__btn {
	margin-top: 40px;
	text-align: center;
}

/* ==========================================================================
   s06 〜767.98px：SP
   ========================================================================== */
@media screen and (max-width: 767.98px) {
	.p-top-voice {
		padding: 50px 0 70.63px;
	}

	.p-top-voice__list {
		flex-direction: column;
		align-items: center;
		gap: 40px;
		margin-top: 34px;
	}

	.p-top-voice__card {
		width: 335px;
		max-width: calc(100% - 40px);
		min-height: 0;
		padding: 18px 18px 16px;
		border-width: 2px;
	}

	.p-top-voice__deco--clip {
		top: -22px;
		left: 30px;
	}

	.p-top-voice__deco--tape {
		top: -26px;
		left: 183px;
	}

	.p-top-voice__deco--pin {
		top: -21px;
		left: 190px;
	}

	/* PC の0.7倍 */
	.p-top-voice__illust {
		height: 112.7px;
	}

	.p-top-voice__illust img {
		width: 107.1px;
	}

	.p-top-voice__title {
		min-height: 0;
		margin-top: 5.3px;
		font-size: 18px;
		line-height: 1.6;
	}

	.p-top-voice__text {
		margin-top: 8.2px;
	}

	.p-top-voice__btn {
		margin-top: 30px;
	}
}

/* ==========================================================================
   s07 入園をご検討の方へ（背景 19:1986 #f5f0dc、1440×690）
   ========================================================================== */
.p-top-guide {
	position: relative;
	padding: 71px 0 100px;
	background-color: var(--color-beige);
}

.p-top-guide__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.p-top-guide__deco img {
	position: absolute;
	display: block;
	height: auto;
}

/* 旗（19:2154）: s06 の下端にかかる。metadata の位置は描画と違うためカンプから特定（x98 y4399） */
.p-top-guide__flags {
	top: calc(-48 * var(--u));
	left: calc(98 * var(--u));
	width: calc(402 * var(--u));
	/* Figma: 不透明度50%（画像に焼き込み済み）＋乗算 */
	mix-blend-mode: multiply;
}

/* 19:1990（画面内の右端 480 を書き出した画像。s08 へはみ出す）: カンプから特定（y4754） */
.p-top-guide__pink {
	top: calc(307 * var(--u));
	right: 0;
	width: calc(480 * var(--u));
}

.p-top-guide__list {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin: 51px auto 0;
	padding: 0;
	list-style: none;
}

.p-top-guide__item {
	width: 232px;
}

.p-top-guide__card {
	position: relative;
	display: block;
	box-sizing: border-box;
	height: 100%;
	min-height: 224px;
	padding: 22px 12px 0 14px;
	overflow: hidden;
	color: var(--color-text);
	text-decoration: none;
	background-color: var(--color-white);
	border-radius: 20px;
	transition: transform 0.3s;
}

/* ホバーでカード全体を少し上へ（教育内容カードと同じ） */
.p-top-guide__card:hover,
.p-top-guide__card:focus-visible {
	color: var(--color-text);
	text-decoration: none;
	transform: translateY(-8px);
}

/* 下の波（頂点がカード下端から60。1周期88.34×10.84、x−12 の谷から） */
.p-top-guide__card::before {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 60px;
	background:
		url("../../img/top/card-wave-small.svg") -12px 0 / 88.341px 10.843px repeat-x,
		linear-gradient(var(--color-edu-wave), var(--color-edu-wave)) 0 10.8px / 100% calc(100% - 10.8px) no-repeat;
	content: "";
}

/* 白い枠3px（波の上に重ねる） */
.p-top-guide__card::after {
	position: absolute;
	inset: 0;
	border: 3px solid var(--color-white);
	border-radius: 20px;
	content: "";
}

.p-top-guide__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.p-top-guide__icon {
	display: block;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

.p-top-guide__title {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.03em;
	color: var(--color-text);
	white-space: nowrap;
	background: none;
	border: none;
}

/* 点線（2px、4/6）はカード上端から73〜75、本文は92 */
.p-top-guide__text {
	position: relative;
	margin: 11px 0 0;
	padding-top: 19px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.6;
	background: url("../../img/top/dash-line-10.svg") -1px 0 / 10px 2px repeat-x;
}

.p-top-guide__arrow {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: block;
	width: 43px;
	height: 43px;
}

.p-top-guide__btn {
	position: relative;
	margin-top: 40px;
	text-align: center;
}

/* ==========================================================================
   s07 〜1023.98px（768〜1023はデザインなし・estimated）
   ========================================================================== */
@media screen and (max-width: 1023.98px) {
	.p-top-guide__list {
		max-width: 488px;
	}

	/* 126:1267: SP の背景の上端から −29.63、PC の画像を0.435倍 */
	.p-top-guide__flags {
		top: calc(-29.63 * var(--u-sp));
		left: calc(17 * var(--u-sp));
		width: calc(174.8 * var(--u-sp));
	}

	/* 126:1187: 背景の下端から 198.63 上、x180.68〜375 */
	.p-top-guide__pink {
		top: calc(100% - 198.63 * var(--u-sp));
		width: calc(194.5 * var(--u-sp));
	}
}

/* ==========================================================================
   s07 〜767.98px：SP（カードは PC の約0.68倍）
   ========================================================================== */
@media screen and (max-width: 767.98px) {
	.p-top-guide {
		padding: 70px 0;
	}

	.p-top-guide__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 158px));
		justify-content: center;
		gap: 20px;
		/* 320px 等の狭い画面でも左右に余白を残す（375 では 158×2 がそのまま入る） */
		padding: 0 19.5px;
		margin-top: 20px;
	}

	.p-top-guide__item {
		width: auto;
	}

	.p-top-guide__card {
		min-height: 184px;
		padding: 9.94px 8.55px 50px 9.51px;
		border-radius: 13.59px;
	}

	.p-top-guide__card::before {
		height: 40.6px;
		background-position: -8.15px 0, 0 7.3px;
		background-size: 59.98px 7.36px, 100% calc(100% - 7.3px);
	}

	.p-top-guide__card::after {
		border-width: 2.04px;
		border-radius: 13.59px;
	}

	/* アイコンの下に見出し */
	.p-top-guide__head {
		flex-direction: column;
		gap: 0.89px;
	}

	.p-top-guide__icon {
		width: 27.17px;
		height: 27.17px;
	}

	.p-top-guide__title {
		font-size: 14px;
	}

	/* 点線（1.36px、2.72/4.08）はカード上端から64、本文は73.5 */
	.p-top-guide__text {
		margin-top: 2.92px;
		padding-top: 10.18px;
		font-size: 12px;
		background-position: -0.68px 0;
		background-size: 6.8px 1.36px;
	}

	.p-top-guide__arrow {
		right: 7.19px;
		bottom: 6.63px;
		width: 29.21px;
		height: 29.21px;
	}

	.p-top-guide__btn {
		margin-top: 29.6px;
	}
}

/* ==========================================================================
   s08 公式インスタグラム（見出し 19:1991 / 写真は既存の [instagram-feed feed=6]）
   写真の列数・件数・間隔はプラグインの設定（フィード6）で指定する:
   PC・タブレット 3列、スマホ 2列、6件、画像の間隔 3px（隙間6）
   プラグインの #sbi_images は上下に 12px、#sb_instagram は下に間隔×2 の余白を持つ
   ========================================================================== */
.p-top-insta {
	position: relative;
	/* s07 のピンクの水彩(19:1990)より前面に出す */
	z-index: 1;
	/* 見出し 5235（s07 の下端から98）、写真の下端 5666 → s09 の白い面 5785 */
	padding: 98px 0 101px;
}

/* 19:2062（画面内を書き出し、不透明度40%込み）: カンプから特定 x0 y5492 = s09 の白い面の上端から293上。s09 に重なる */
.p-top-insta__deco {
	position: absolute;
	top: calc(100% - 293 * var(--u));
	left: 0;
	z-index: -1;
	width: calc(535.5 * var(--u));
	pointer-events: none;
}

.p-top-insta__deco img {
	display: block;
	width: 100%;
	height: auto;
}

/* 見出し x119、写真 x622〜1222（1440の中央から左へ601） */
.p-top-insta__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 1103px;
	margin-left: max(20px, calc(50% - 601px));
}

.p-top-insta__heading {
	flex-shrink: 0;
	margin: 0;
}

/* 写真の上端 5268 = 見出しの上端から33（プラグインの余白12を引く） */
.p-top-insta__feed {
	width: 600px;
	margin-top: 21px;
}

/* ==========================================================================
   s08 〜1199.98px（768〜1199はデザインなし・estimated）: SP と同じく見出しの下に写真
   ========================================================================== */
@media screen and (max-width: 1023.98px) {
	/* 126:1363: カンプから特定 x0 y6763 = s09 の白い面の上端から165上、276.75×247.25。写真の後ろ */
	.p-top-insta__deco {
		top: calc(100% - 165 * var(--u-sp));
		width: calc(276.75 * var(--u-sp));
	}
}

@media screen and (max-width: 1199.98px) {
	.p-top-insta__inner {
		flex-direction: column;
		align-items: center;
		width: auto;
		margin-left: 0;
	}

	.p-top-insta__feed {
		max-width: 100%;
		margin-top: 8px;
	}
}

/* ==========================================================================
   s08 〜767.98px：SP
   ========================================================================== */
@media screen and (max-width: 767.98px) {
	/* 見出し 6209（s07 の下端から70.37）、写真 6319〜6814 → s09 の白い面 6928 */
	.p-top-insta {
		padding: 70.37px 0 96px;
	}

	/* 写真の上端は見出しの下端から20（プラグインの余白12を引く） */
	.p-top-insta__feed {
		width: 335px;
		max-width: calc(100% - 40px);
	}
}

/* ==========================================================================
   s09 お知らせ・ブログ（白い面 19:1591: 波 wave.svg ＋ 5785〜6545）
   s10 の背景(6445〜)が白い面の下100に重なる → s10 側で上にずらす
   ========================================================================== */
.p-top-posts {
	position: relative;
	isolation: isolate;
	/* 見出しの上端 5932（波の上端から147）、ボタンの下端 6325 → 白い面の下端 6545 */
	padding: 147px 0 220px;
}

.p-top-posts::before,
.p-top-posts::after {
	position: absolute;
	right: 0;
	left: 0;
	z-index: -1;
	content: "";
}

.p-top-posts::before {
	top: 0;
	height: calc(31.94 * var(--u));
	background: url("../../img/common/wave.svg") left top / 100% 100% no-repeat;
}

.p-top-posts::after {
	/* 波との境目に隙間が出ないよう1px重ねる */
	top: calc(31.94 * var(--u) - 1px);
	bottom: 0;
	background-color: var(--color-white);
}

.p-top-posts__inner {
	display: flex;
	justify-content: center;
	gap: 40px;
}

.p-top-posts__block {
	position: relative;
	width: 480px;
}

/* 風船 19:2239（x1159 y5742、151×246）: ブログの列の左上から 419, −190 */
.p-top-posts__balloons {
	position: absolute;
	top: -190px;
	left: 419px;
	width: 151px;
	height: auto;
	pointer-events: none;
}

.p-top-posts__title {
	margin: 0;
	padding: 0;
	font-size: 34px;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: 0.08em;
	color: var(--color-text);
	text-align: center;
	background: none;
	border: none;
}

/* 手書きの下線 166×33（文字の下端から15.2） */
.p-top-posts__title::after {
	display: block;
	width: 166px;
	height: 33px;
	margin: 15.2px auto 0;
	content: "";
	background: url("../../img/top/news-line-yellow.svg") center / 100% 100% no-repeat;
}

.p-top-posts__block--blog .p-top-posts__title::after {
	background-image: url("../../img/top/news-line-green.svg");
}

.p-top-posts__list {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.p-top-posts__item {
	margin: 0;
	border-bottom: 1px solid var(--color-border);
}

/* 1行 47（上下12、14px/lh1.6、日付とタイトルの間15） */
.p-top-posts__link {
	display: flex;
	gap: 15px;
	align-items: center;
	padding: 12px 0;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.6;
	color: var(--color-text);
	text-decoration: none;
	transition: opacity 0.3s;
}

.p-top-posts__link:hover {
	color: var(--color-text);
	opacity: 0.7;
}

.p-top-posts__date {
	flex-shrink: 0;
}

/* 長いタイトルは1行で省略（19:2069: 幅370） */
.p-top-posts__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.p-top-posts__empty {
	margin: 20px 0 0;
	font-size: 14px;
	text-align: center;
}

.p-top-posts__btn {
	margin-top: 36px;
	text-align: center;
}

/* ==========================================================================
   s09 〜1023.98px（768〜1023はデザインなし・estimated）: SP と同じく縦に並べる
   ========================================================================== */
@media screen and (max-width: 1023.98px) {
	.p-top-posts__inner {
		flex-direction: column;
		align-items: center;
		gap: 50px;
	}

	.p-top-posts__block {
		width: min(480px, calc(100% - 40px));
	}
}

/* ==========================================================================
   s09 〜767.98px：SP（白い面 127:1494: 6928〜7975.43、下の角 r40）
   Figma は波(127:1495)が 6599 に離れて置かれている → 白い面の上端に付ける（estimated）
   ========================================================================== */
@media screen and (max-width: 767.98px) {
	/* 見出しの上端 6977（白い面の上端から49）、ボタンの下端 7906 → 白い面の下端まで69.43 */
	.p-top-posts {
		margin-top: calc(-9.36 * var(--u));
		padding: calc(9.36 * var(--u) + 49px) 0 69.43px;
	}

	.p-top-posts::before {
		height: calc(9.36 * var(--u));
		background-image: url("../../img/common/wave-sp.svg");
		background-position: calc(-36 * var(--u)) 0;
		background-size: calc(446 * var(--u)) 100%;
	}

	.p-top-posts::after {
		top: calc(9.36 * var(--u) - 1px);
		border-radius: 0 0 calc(40 * var(--u)) calc(40 * var(--u));
	}

	.p-top-posts__block {
		width: 335px;
		max-width: calc(100% - 40px);
	}

	/* 127:1402（x289 y7426、77×125.5）: ブログの見出しの上端から −40、右端は列の右端から11外 */
	.p-top-posts__balloons {
		top: -40px;
		right: -11px;
		left: auto;
		width: 77px;
	}

	.p-top-posts__title {
		font-size: 22px;
	}

	/* 127:1371 は見出しから離れた位置にある → 同じ下線を 120×22 にして見出しと一覧の間に置く（estimated） */
	.p-top-posts__title::after {
		width: 120px;
		height: 22.01px;
		margin-top: 6.3px;
	}

	/* 一覧の上端は見出しの上端から61 */
	.p-top-posts__list {
		margin-top: 6.3px;
	}

	/* 1件 72（日付の下にタイトル、間3） */
	.p-top-posts__link {
		flex-direction: column;
		gap: 3px;
		align-items: stretch;
	}

	.p-top-posts__btn {
		margin-top: 30px;
	}
}

/* ==========================================================================
   s10 無料見学受付中（c-cta。common.css）
   s09 の白い面の下100に重なる
   ========================================================================== */
.p-top-cta {
	margin-top: -100px;
}

@media screen and (max-width: 767.98px) {
	.p-top-cta {
		margin-top: 0;
	}
}

/* ==========================================================================
   s11 イベントカレンダー（背景 19:1595 #f5f0dc、6913〜8098）
   カレンダーは既存の [mk_calendar]（mk-calendar-style.css）の表示をそのまま使う
   ========================================================================== */
.p-top-calendar {
	position: relative;
	/* 丘(19:1596)は下にはみ出す → フッターの下に隠れる位置で切る */
	overflow: clip;
	/* 見出し 6991（+78）、注記の下端 7863.4 → 背景の下端 8098 */
	padding: 78px 0 calc(234.6 * var(--u));
	background-color: var(--color-beige);
}

/* 35:41: 780幅、見出しの下39 */
.p-top-calendar__body {
	position: relative;
	z-index: 1;
	width: 780px;
	max-width: calc(100% - 40px);
	margin: 39px auto 0;
}

/* 19:2342: カレンダーの下37 */
.p-top-calendar__note {
	position: relative;
	z-index: 1;
	margin: 37px 20px 0;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.6;
	color: var(--color-text);
	text-align: center;
}

/* 19:1596: x−51、1541×293、下端は背景の下端から41下 */
.p-top-calendar__hill {
	position: absolute;
	bottom: calc(-41 * var(--u));
	left: calc(-51 * var(--u));
	width: calc(1541 * var(--u));
}

.p-top-calendar__hill img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   s11 〜767.98px：SP（127:1630: 8531〜9132）
   ========================================================================== */
@media screen and (max-width: 767.98px) {
	/* 見出し 8601（+70）、注記の下端 9044.4 → 背景の下端 9132 */
	.p-top-calendar {
		padding: 70px 0 calc(87.6 * var(--u));
	}

	/* 127:1636: 335幅、見出しの下20（高さはカレンダーの内容次第） */
	.p-top-calendar__body {
		width: 335px;
		margin-top: 20px;
	}

	/* 127:1635: 12px、2行 */
	.p-top-calendar__note {
		margin-top: 20px;
		font-size: 12px;
	}

	/* 127:1631: x−44、446.93×85、下端は背景の下端から12下 */
	.p-top-calendar__hill {
		bottom: calc(-12 * var(--u));
		left: calc(-44 * var(--u));
		width: calc(446.93 * var(--u));
	}
}

/* バナー送りボタンの白い縁取り（写真に重なっても押せるボタンと分かるように）。--next は180°回転しているため影の向きを逆に指定 */
.p-top-banner__arrow {
	border-radius: 50%;
	box-shadow: 0 0 0 3px #fff, 0 2px 6px 3px rgba(0, 0, 0, 0.15);
}

.p-top-banner__arrow--next {
	box-shadow: 0 0 0 3px #fff, 0 -2px 6px 3px rgba(0, 0, 0, 0.15);
}