@charset "utf-8";
/* トップ */
body{
	background-color: #fffdee; /* 背景色 */
}





/* メインビジュアル */
.main{
	position: relative;
	z-index: 2;
}

/* 写真の枠。写真の大きさにかかわらず、この比率で切り取る（見本の写真に合わせた比率） */
.main_frame{
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 488;
	min-height: 300px;
	overflow: hidden;
}

.main_photo{
	position: absolute;
	inset: 0;
	background-image: url("../img/index/main.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #cfe6a8;
}

/* 下の角の茂み（絵）。写真の幅に合わせて大きさを変える */
.main_bush{
	position: absolute;
	top: 58%;
	width: 26.2%;
	height: auto;
}

.main_bush_left{
	left: 0;
}

.main_bush_right{
	right: 0;
}

/* 写真の下の波（クリーム色） */
.main_wave{
	position: absolute;
	left: 0;
	bottom: -1px;
	display: block;
	width: 100%;
	height: 4.5vw;
	fill: #fffdee;
}

/* キャッチコピー（元は画像。縦書きの文字にした。1行ごとにオレンジの帯になる） */
.main_copy{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	padding-top: calc(20px + 1.5vw);
}

.catchcopy{
	display: inline-block;
	margin-left: 4%;
	writing-mode: vertical-rl;
	/* 1行10文字（いちばん長いとき）でも写真の下にはみ出さない大きさ */
	font-size: clamp(16px, 1.5vw, 30px);
	font-weight: 900;
	line-height: 2.3;
	letter-spacing: 0.12em;
	color: #ffffff;
}

.catchcopy span{
	padding: 0.7em 0.15em;
	background-color: #ffaf3d;
	border-radius: 6px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* 走る子どもの絵（写真の右下から下にはみ出す） */
.main_kids{
	position: absolute;
	top: calc(min(100%, max(300px, 25.4vw)) * 0.72);
	right: 5%;
	width: 26%;
	max-width: 525px;
	height: auto;
	pointer-events: none;
}





/* お知らせ */
.news{
	position: relative;
	padding-top: 110px;
	padding-bottom: 80px;
}

/* 花の絵。カードや走る子どもの絵に重ならないよう、見出しの左に置く（広い画面ではデザインどおりカードの右下の外） */
.illust_tree{
	position: absolute;
	top: 90px;
	left: 4%;
	width: 130px;
	height: auto;
	z-index: 0;
}

.illust_bird{
	position: absolute;
	bottom: -70px;
	left: 4%;
	width: 261px;
	height: auto;
	z-index: 1;
}

.news .contents01{
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 1700px){
	.illust_tree{
		top: auto;
		bottom: 200px;
		left: calc(50% + 650px);
		width: 171px;
	}
}

.news02{
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* 記事が4件より少なくても、まん中にそろえる */
	align-items: flex-start;
	gap: 30px;
	max-width: 1200px;
	margin: 60px auto 0;
}

.news01{
	flex: 0 0 calc((100% - 90px) / 4);
	min-width: 0;
}

/* 両はしの枚を少し下げる（デザインの互い違い。件数が4件より少なくても左右がそろう） */
.news01:first-child,
.news01:last-child{
	margin-top: 40px;
}

.news01:only-child{
	margin-top: 0;
}

.news01 a{
	display: block;
	height: 100%;
	padding: 18px 18px 22px;
	color: #3e2b18;
	background-color: #e3f3b7;
	border-radius: 16px;
}

.news01 a:hover{
	opacity: 0.7;
}

/* 写真の枠。写真の大きさにかかわらず、この比率で切り取る */
.news_01 img{
	display: block;
	width: 100%;
	aspect-ratio: 230 / 181;
	object-fit: cover;
	border-radius: 10px;
}

/* 写真のない記事も、写真の枠の大きさに花の絵を置いて、カードの形をそろえる */
.news01 a:not(:has(.news_01))::before{
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 230 / 181;
	background: #fffdee url("../img/common/title_flower.png") no-repeat center / auto 36%;
	border-radius: 10px;
}

.news03{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin-top: 14px;
	margin-bottom: 10px;
}

.date{
	color: #84b206;
	font-size: 14px;
	font-weight: 700;
}

.category{
	padding: 0px 12px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	background-color: #84b206;
	border-radius: 50px;
}

.news_text{
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}





/* 園について */
.about{
	position: relative;
	padding-top: 100px;
	background-color: #ffffff;
}

.about1{
	position: relative;
}

.illust_left{
	position: absolute;
	top: 120px;
	left: 0;
	width: 220px;
	height: auto;
}

.illust_right{
	position: absolute;
	top: 80px;
	right: 0;
	width: 256px;
	height: auto;
}

.illust_bee{
	position: absolute;
	top: 210px;
	right: 2%;
	width: 183px;
	height: auto;
}

/* 文章の横に余白が足りない幅では、蜂の絵を小さくして見出しの横に上げる（文章に重ならないように） */
@media screen and (max-width: 1439px){
	.illust_bee{
		top: 40px;
		width: 140px;
	}
}

.about .title{
	position: relative;
}

.text_area{
	position: relative;
	max-width: 900px;
	margin: 60px auto 0;
}

.sub_text{
	text-align: center;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.6;
	color: #489100;
	margin-bottom: 30px;
}

.sub_text1{
	text-align: center;
}

/* 中央揃えの文章は、行の長さをそろえる（最後の行に1〜2文字だけ残らないように） */
.sub_text,
.sub_text1,
.about_text{
	text-wrap: balance;
	word-break: auto-phrase; /* 日本語は文節の切れ目で折り返す（「ください。」の途中で切れないように） */
}





/* 方針・教育・園舎（3つの枠）。背景の絵（上が白から緑への波、下がクリーム色への波）を枠の高さに合わせて伸ばす */
.pillars{
	position: relative;
	padding-top: 40px;
	padding-bottom: 130px;
	background-color: #e3f3b7;
	background-image: url("../img/common/about_back.png");
	background-repeat: no-repeat;
	/* 横は絵の幅（1920px）のまま中央に置く。画面に合わせて横に伸び縮みさせると、絵の中の芽が3つの枠の文字に重なるため */
	background-size: max(1920px, 100%) 100%;
	background-position: center top;
}

.about02{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	max-width: 1000px;
	margin: 0 auto;
}

.about01{
	text-align: center;
}

/* 写真は丸く切り取る（元は丸く切った画像。どんな写真でも丸になるようにした） */
.about_img img{
	display: block;
	width: 100%;
	max-width: 280px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

.sub_text01{
	margin-top: 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #489100;
}

.sub_text02{
	font-size: 22px;
	font-weight: 900;
	line-height: 1.5;
	margin-bottom: 16px;
}

.about_text{
	font-size: 14px;
}

.about01 .btn1{
	margin-top: 30px;
	width: 200px;
}





/* アクセス */
.access{
	position: relative;
	padding-top: 100px;
}

/* 葉とチューリップの絵。地図と園の情報の箱に重ならないよう、箱の外の余白に置く（余白が足りない幅では消す） */
.illust_leaf{
	position: absolute;
	top: 200px;
	left: calc(50% + 610px);
	width: 146px;
	height: auto;
}

.illust_tulip{
	position: absolute;
	top: 380px;
	right: calc(50% + 620px);
	width: 129px;
	height: auto;
}

@media screen and (max-width: 1599px){
	.illust_leaf{
		top: 130px;
		left: auto;
		right: 3%;
		width: 110px;
	}

	.illust_tulip{
		display: none;
	}
}

.access .contents01{
	position: relative;
	z-index: 1;
}

.access_main{
	display: flex;
	justify-content: center;
	gap: 30px;
	max-width: 1200px;
	margin: 60px auto 0;
}

/* 地図（住所から Googleマップを入れる） */
.map{
	flex: 0 1 600px;
	min-height: 480px;
	background-color: #f2f2f2;
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.map iframe{
	display: block;
	width: 100%;
	height: 100%;
	min-height: 480px;
	border: 0;
}

.map_dummy{
	font-size: 13px;
}

.access_back1{
	flex: 1 1 560px;
	min-width: 0;
}

.access_back{
	background-color: #ffffff;
	border-radius: 24px;
	padding: 26px 30px 30px;
}

.access_text{
	font-size: 22px;
	font-weight: 900;
	padding-bottom: 6px;
	border-bottom: 1px solid #3e2b18;
}

.access_date{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 16px;
}

.addr{
	flex-shrink: 0;
	width: 72px;
	padding: 1px 0;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	color: #ffffff;
	background-color: #84b206;
}

.access_date dd{
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.access_date dd a{
	color: #3e2b18;
}

.illust_bass{
	text-align: right;
	margin-top: 20px;
}

.illust_bass img{
	max-width: 100%;
	height: auto;
}





@media screen and (max-width: 1170px){

	/* お知らせ */
	.news02{
		max-width: 640px;
	}

	.news01{
		flex-basis: calc((100% - 30px) / 2);
	}

	.news01:first-child,
	.news01:last-child{
		margin-top: 0;
	}

	.illust_tree{
		top: 120px;
		width: 120px;
	}

	.illust_bird{
		width: 180px;
	}

	/* 園について */
	.illust_left,
	.illust_right{
		width: 160px;
	}

	.illust_bee{
		display: none;
	}

	.about02{
		gap: 24px;
	}

	/* アクセス */
	.access_main{
		flex-direction: column-reverse;
		align-items: stretch;
		max-width: 640px;
	}

	.map,
	.access_back1{
		flex-basis: auto;
	}

	.map{
		min-height: 360px;
	}

	.map iframe{
		min-height: 360px;
	}

	.illust_bass img{
		width: 240px;
	}

	.illust_leaf,
	.illust_tulip{
		display: none;
	}
}




@media screen and (max-width: 750px){

	/* メインビジュアル（スマホは別の写真を使う） */
	/* 狭いスマホでも、キャッチコピー（1行10文字まで）が写真に収まる高さを残す */
	.main_frame{
		aspect-ratio: 750 / 262;
		min-height: 190px;
	}

	.main_photo{
		background-image: url("../img/index/main_sp.jpg");
	}

	.main_bush{
		top: 73.3%;
		width: 22.1%;
	}

	.main_bush_left{
		left: 1.3%;
	}

	.main_bush_right{
		right: 1.1%;
	}

	.main_wave{
		height: 18px;
	}

	.main_copy{
		padding-top: 16px;
	}

	.catchcopy{
		margin-left: 6%;
		font-size: clamp(11px, 2.6vw, 13px);
		line-height: 2.2;
		letter-spacing: 0.08em;
	}

	.main_kids{
		top: auto;
		bottom: -26px;
		right: 3%;
		width: 34%;
	}

	/* お知らせ */
	.news{
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.news02{
		gap: 14px;
		margin-top: 30px;
	}

	.news01{
		flex-basis: calc((100% - 14px) / 2);
	}

	.news01 a{
		padding: 12px 12px 16px;
		border-radius: 12px;
	}

	.news_text{
		font-size: 13px;
	}

	.illust_tree{
		display: none;
	}

	.illust_bird{
		width: 120px;
		bottom: -40px;
	}

	/* 園について */
	.about{
		padding-top: 60px;
	}

	.illust_left,
	.illust_right{
		width: 110px;
		opacity: 0.8;
	}

	.illust_left{
		top: 160px;
	}

	.text_area{
		margin-top: 30px;
	}

	.sub_text{
		font-size: 18px;
		margin-bottom: 20px;
	}

	.sub_text1{
		text-align: left;
		text-wrap: pretty;
		word-break: normal;
	}

	/* 3つの枠 */
	.pillars{
		padding-top: 30px;
		padding-bottom: 90px;
		/* 上は白から緑、下は緑からクリーム色への波（絵を縦に伸ばすと波がゆがむので、波だけを描く） */
		background-image:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 0 H750 V88 C690 70 640 58 560 64 C470 72 420 96 330 92 C240 88 190 52 100 48 C60 46 30 52 0 60 Z'/%3E%3C/svg%3E"),
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 40' preserveAspectRatio='none'%3E%3Cpath fill='%23fffdee' d='M0 40 V22 C60 10 120 8 190 14 C260 20 300 30 375 28 C450 26 500 12 570 10 C640 8 700 16 750 24 V40 Z'/%3E%3C/svg%3E");
		background-size: 100% 120px, 100% 40px;
		background-position: center top, center bottom;
		background-repeat: no-repeat;
	}

	.about02{
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.about_img{
		position: relative;
	}

	.about_img img{
		max-width: min(320px, 80%);
	}

	/* 芽の絵（スマホの背景の絵は縦に伸びて芽が文字に重なるので、背景は波だけにして、芽は写真の横に置く） */
	.about_img::after{
		content: "";
		position: absolute;
		bottom: 6%;
		left: calc(50% - min(160px, 40%) - 30px);
		width: 28px;
		height: 18px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18'%3E%3Cg stroke='%2384b206' stroke-width='4' stroke-linecap='round' fill='none'%3E%3Cpath d='M4 6 L8 14'/%3E%3Cpath d='M14 3 L14 12'/%3E%3Cpath d='M24 6 L20 14'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
	}

	.about01:nth-child(even) .about_img::after{
		left: auto;
		right: calc(50% - min(160px, 40%) - 30px);
		bottom: auto;
		top: 8%;
	}

	/* アクセス */
	.access{
		padding-top: 60px;
	}

	.access_main{
		margin-top: 30px;
	}

	.access_back{
		padding: 20px;
	}

	.map,
	.map iframe{
		min-height: 300px;
	}

	.illust_leaf,
	.illust_tulip{
		display: none;
	}

	.illust_bass img{
		width: 180px;
	}
}