@charset "utf-8";
/* CSS Document */

h1 {
	margin-bottom: 8rem;
	
	@media screen and ( max-width:600px ) {
		& img {
			height: 10rem;
			max-width: 100%;
		}
	}

}


.メインイメージ----------{}
#main_img_wrap{
	width: 100%;
	min-width: 1000px;
	height: 840px;
	
	/*画像は全て BC-image で配置*/
	background-image:
		url( "../img/title_new_open.svg"),
		url( "../img/title_machi_inaka.svg"),
		url( "../img/illust_01.svg"),
		url( "../img/illust_02.svg"),
		url( "../img/img_main.jpg");
	background-repeat:
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat;
	background-position:
		10% 3%,		/*new open*//*左・上*/
		90% 100%,	/*まちいなかの保育園*/
		95% 3%,		/*鳥*/
		5% 100%,	/*ハート*/
		50% 0%;		/*画像*/
	
	
	@media screen and ( max-width:600px ) {
		width: 100%;
		min-width: 100%;
		height: auto;
		
		/*ウインドウの幅に合わせ可変*/
  		aspect-ratio: 4 / 3;
		
		background-size:/*ウインドウの幅に対して*/
			65%,		/*new open*/
			46%,		/*まちいなかの保育園*/
			15%,		/*鳥*/
			15%,			/*ハート*/
			126%;		/*画像*/
	}
}

#main_img_box {
	width: 940px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	
	@media screen and ( max-width:600px ) {
		width: 100%;
	}
}



.ニュース----------{}
#news {
	text-align: center;
	padding-top: 8rem;
	padding-bottom: 8rem;
	
	@media screen and ( max-width:600px ) {
		padding-top: 6rem;
	}
}
#head_bosyu {
	@media screen and ( max-width:600px ) {
		width:90%;
	}
}


#news_head {
	font-size: 3.2rem;
	line-height: 1.5;
	letter-spacing: 0.2rem;
	font-weight: bold;
	margin-top: 0rem;
	margin-bottom: 4rem;
}
#news_txt {
	font-size: 2.3rem;
	text-align: justify;
	margin-bottom: 7rem;
}
#txt_staff {
	font-size: 3rem;
	line-height: 1.5;
	font-weight: bold;
	letter-spacing: 0.2rem;
	text-decoration: underline;
	margin-top: 7rem;
	
	@media screen and ( max-width:600px ) {
		font-size: 2.6rem;
	}
}

.head_kadomaru {
    position: relative;
	font-size: 2.8rem;
	line-height: 1.5;
	font-weight: bold;
	letter-spacing: 0.3rem;
    color: white;
	text-align: center;
	
     padding:0.5em 2em 0.6em;	/*　上・左右・下*/
     background-color: #232846;
     border-radius:1.5em;
	margin-bottom: 4rem;
}
 
.head_kadomaru::after {
     position: absolute;
     top: 50%;
     left:1em;
     transform:translateY(-50%);
     content: '';
     width: 1.5rem;
     height:1.5rem;
     background-color: white;
     border-radius:100%;
}
.head_kadomaru::before {
     position: absolute;
     top: 50%;
     right:1em;
     transform:translateY(-50%);
     content: '';
     width: 1.5rem;
     height:1.5rem;
     background-color: white;
     border-radius:100%;
}


.園について----------{}
#about {
	width: 100%;
	height: auto;
	padding-top: 10rem;
	padding-bottom: 8rem;
	
	background-image:
		url( "../img/back_about.svg"),
		url( "../img/illust_03.svg"),
		url( "../img/illust_04.svg"),
		url( "../img/illust_05.svg"),
		url( "../img/illust_06.svg"),
		url( "../img/illust_07.svg"),
		url( "../img/illust_08.svg"),
		url( "../img/back_about_boundary.svg");
	background-repeat: 
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat,
		repeat-x;
	background-position:	/*左・上*/
		50% 220px,		/*地紋*/
		calc(50% + 400px) 0%,		/*あさがお*/
		calc(50% - 480px) 20%,	/*みつば*/
		calc(50% + 580px) 25%,		/*枝葉*/
		calc(50% - 500px) 45%,	/*葉*/
		calc(50% - 540px) 85%,	/*りんどう*/
		calc(50% + 500px) 60%,		/*かしわ葉*/
		50% 0%;			/*境界線*/
	
	@media screen and ( max-width:600px ) {
		background-size:/*ウインドウの幅に対して*/
		90rem,		/*地紋*/
		30%,		/*あさがお*/
		20%,		/*みつば*/
		20%,		/*枝葉*/
		30%,		/*葉*/
		20%,		/*りんどう*/
		22%,		/*かしわ葉*/
		150%;		/*境界線*/
	background-position:	/*左・上*/
		50% 200px,		/*地紋*/
		calc(50% + 130px) 0%,		/*あさがお*/
		calc(50% - 180px) 17%,		/*みつば*/
		calc(50% + 230px) 35%,		/*枝葉*/
		calc(50% - 200px) 47%,		/*葉*/
		calc(50% - 240px) 82%,		/*りんどう*/
		calc(50% + 240px) 60%,		/*かしわ葉*/
		50% 0%;			/*境界線*/
	}
	
}


.H２----------{}

#about h2 {
	font-size: 4rem;
	line-height: 1;
	font-weight: bold;
	color: #232846;
	text-align: center;
	margin-bottom: 7rem;
	
	text-decoration: underline #000 0.3rem;
}
.letter-space {
		letter-spacing: 1.0rem;
}



.保育理念----------{}

#rinen, #hoshin, #gyoji, #gaiyo {
	margin-bottom: 12rem;
}

#rinen_head {
	font-size: 2.5rem;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2rem;
}
#rinen_txt {
	font-size: 2.3rem;
	text-align: justify;
}



.保育方針----------{}

#hoshin_wrap {
	display: flex;
	justify-content: space-between;
	
	@media screen and ( max-width:600px ) {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 2rem;
	}
}

.hoshin_item {
	width: 30rem;
	text-align: center;
	padding: 3rem 2.5rem 5rem;
	border-radius: 2.5rem;
	border: 0.4rem solid #232846;
	background-color: #FFFFFF;
	
	@media screen and ( max-width:600px ) {
		width: 90%;
	}
}
.hoshin_no {
	font-size: 9.0rem;
	line-height: 1;
	margin-bottom: 2rem;
}

.hoshin_head {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 5.6rem;
	position: relative;
}
.hoshin_head:before {
  position: absolute;
  bottom: -3rem;
  left: calc(50% - 3rem);
  width: 6rem;
  height: 0.3rem;
  content: '';
  border-radius: 0.15rem;
  background: #232846;
}

.hoshin_txt {
	font-size: 2.0rem;
	line-height: 1.5;
	text-align: justify;
}


.年間行事----------{}

#gyoji ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3.0rem 2.0rem;	/* row-gap（行間）・column-gap（列の間） */
	
	@media screen and ( max-width:600px ) {
		gap: 2.0rem 1.0rem;	/* row-gap（行間）・column-gap（列の間） */
	}

}
#gyoji_yearly li {
	display: inline-block;
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1;
	
	color: #ffffff;
	padding: 0.6em 1.2em 0.8em;	/*上・左右・下*/
	border-radius: 1.5em;
	
	@media screen and ( max-width:600px ) {
		font-size: 1.8rem;
	}	
}
.gyoji_green { background-color: #6ea116; }
.gyoji_blue { background-color: #61b7bd; }
.gyoji_orange { background-color: #dfa000; }
.gyoji_pink { background-color: #c36d76; }


.施設概要----------{}

#gaiyo_table {
	margin-bottom: 5rem;
}


.地図----------{}

#map{
	@media screen and ( max-width:600px ) {
		height: auto;
		aspect-ratio: 3 / 2;
	}
}


.インスタグラム----------{}

#insta {
}
#insta_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: 2em;
	
	@media screen and ( max-width:600px ) {
		column-gap: 3.5%;
		row-gap: 3rem;
	}
}
#insta_wrap li {
	width: 172px;
	aspect-ratio: 16 / 9;
	
	@media screen and ( max-width:600px ) {
		width: 31%;
	}
}

.insta_img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.insta_txt {
	padding-top: 0.8em;
	font-size: 1.6rem;
	line-height: 1.5;
	text-align: justify;
}


#insta_wrap a:hover {
	text-decoration: none;
}

.button_insta {
	font-size: 1.8rem;
	font-weight: bold;
	color: #ffffff;
	letter-spacing: 0.1rem;
	background-color: #232846;
	
	width: 14em;
	height: 2.2em;
	border-radius: 1.1em;
	margin: auto;
	
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 0.1em;	/*文字の位置を上に微調整*/
}


.入園のご案内----------{}
#guide {
	width: 100%;
	height: auto;
	padding-top: 12rem;
	padding-bottom: 4rem;
	
	background-image:
		url( "../img/illust_09.svg"),
		url( "../img/illust_10.svg"),
		url( "../img/back_guide_boundary.svg");
	background-repeat: 
		no-repeat,
		no-repeat,
		repeat-x;
	background-position:	/*左・上*/
		calc(50% + 400px) 10px,		/*鳥*/
		calc(50% - 560px) 80%,	/*まる*/
		50% 0%;			/*境界線*/
	
	@media screen and ( max-width:600px ) {
		background-size:/*ウインドウの幅に対して*/
			30%,			/*鳥*/
			16%,			/*まる*/
			150%;			/*境界線*/
		background-position:			/*左・上*/
			calc(50% + 170px) 10px,		/*鳥*/
			-10% 86%,		/*まる*/
			50% 0%;								/*境界線*/
	}
}

#guide_table {
	margin-bottom: 6rem;
}

#guide_flow {
		@media screen and ( max-width:600px ) {
		width: 100%;
	}

}

.採用情報----------{}
#recruit {
	width: 100%;
	height: auto;
	padding-top: 14rem;
	padding-bottom: 8rem;
	
	background-image:
		url( "../img/illust_11.svg"),
		url( "../img/illust_12.svg"),
		url( "../img/back_recruit_boundary.svg");
	background-repeat: 
		no-repeat,
		no-repeat,
		repeat-x;
	background-position:	/*左・上*/
		calc(50% + 360px) 10px,		/*花*/
		calc(50% - 560px) 1000px,	/*はなまる*/
		50% 0%;			/*境界線*/
	
	@media screen and ( max-width:600px ) {
		padding-top: 10rem;
		
		background-size:/*ウインドウの幅に対して*/
			21%,			/*花*/
			24%,			/*はなまる*/
			150%;			/*境界線*/
		background-position:			/*左・上*/
			calc(50% + 120px) 0px,		/*花*/
			-18% 80%,	/*はなまる*/
			50% 0%;			/*境界線*/
	}
}

#op_staff_bosyu {
	margin-bottom: 8rem;
}

.tab-content h2 {
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1;
	text-decoration: underline;
	color: #232846;
	margin-left: 4rem;
	margin-bottom: 5rem;
}

.recruit_table_wrap {
	width;780px;
	padding-left: 12rem;
	padding-right: 4rem;
	
	@media screen and ( max-width:600px ) {
	padding-left: 5rem;
	padding-right: 1.6rem;
	}
}

/*タブ(label)のスタイル*/
.tab {
	font-size: 2.2rem;
	font-weight: bold;
	padding: 0.8rem 2.6rem;
	background-color: #fff;
	display: block;
	float: left;
	color: #232846;
	transition: all 0.2s;
	
	margin-right: 1rem;
	
	border-top: 0.3rem solid #232846;
	border-left: 0.3rem solid #232846;
	border-right: 0.3rem solid #232846;
	border-top-right-radius: 1.3rem;
	border-top-left-radius: 1.3rem;
	text-align: center;
	
	@media screen and ( max-width:600px ) {
	text-align: center;
	padding: 0.8rem 1.0rem;
	}
}

/* inputボタンは目には見えないところで働いてもらう */
input[name="tab-item"] {
  display: none;
}

/* タブで切り替えたいコンテンツの部分。ここはお好みで */
.tab-content {
	padding-top: 70px;
	display: none;
	clear: both;
	border-top: 3px solid #232846;
}

/* 選択されているタブのコンテンツを表示させる */
#a:checked ~ #a-content,
#b:checked ~ #b-content,
#c:checked ~ #c-content {
  display: block;
}

/* 選択されていることがわかるように、選択されているタブはスタイルを変える */
#recruit input:checked + .tab {
	background-color: #232846;
	color: #fff;
}



.お問い合わせ----------{}
#contact {
	width: 100%;
	height: auto;
	padding-top: 10rem;
	padding-bottom: 8rem;
	
	background-image:
		url( "../img/illust_13.svg"),
		url( "../img/back_contact_boundary.svg");
	background-repeat: 
		no-repeat,
		repeat-x;
	background-position:	/*左・上*/
		calc(50% + 360px) 0px,		/*あじさい*/
		50% 0%;			/*境界線*/
	
	@media screen and ( max-width:600px ) {
		background-size:/*ウインドウの幅に対して*/
			30%,			/*あじさい*/
			150%;			/*境界線*/
		background-position:			/*左・上*/
			calc(50% + 140px) 0px,		/*あじさい*/
			50% 0%;			/*境界線*/
	}
}


#contact_wrap {
	display: flex;
	justify-content: space-around;
	
	@media screen and ( max-width:600px ) {
		width: 100%;
		flrex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		row-gap: 4rem;

	}
}

.contact_item {
	@media screen and ( max-width:600px ) {
		text-align: center;
	}
	
	
	& img {
	@media screen and ( max-width:600px ) {
		height: 5rem;
		max-width: 100%;
	}
}

}


.contact_sub_txt {
	font-size: 2.0rem;
	text-align: center;
	padding-top: 2rem;
}