@charset "utf-8";
/*BASE*/


/*SP*/
@media screen and (max-width: 767.98px) {

/*BASE*/
article section { padding:4rem 2rem; }

section .hgroup {
	margin-bottom:2rem;
}

section .hgroup h1 {
	color:#3f65ee;
	text-align:center;
}

/*メインビジュアル*/
#mainvisual {
	background: #FFF url(../images/egao/mv_img0101.webp) no-repeat center center;
	background-size:cover;
	width:100%;
	height:auto;
	aspect-ratio: 1 / 1;
	overflow:clip;
	position:relative;
}

/*園について*/
#information {
	color:rgba(63,101,238,1);
	background-color:rgba(244,245,249,1);
}
#information .txt-box {
	text-align:center;
	font-size:16px;
	
}
#information .txt-box .message-box {
	margin-bottom:2rem;
}
#information .txt-box .bt-box {
	font-size:16px;
}

/*園の概要*/
#about .overview {
	margin-bottom:2rem;
}
#about .overview > dl {
	display:grid;
	grid-template-columns:auto 1fr;
	gap:1px;
}
#about .overview > dl > dt,#about .overview > dl > dd {
	padding:1rem 1rem;
}
#about .overview > dl > dt {
	text-align:justify;
	text-align-last:justify;
	white-space:nowrap;
	background-color:#e0e6fc;
}
#about .overview > dl > dd {
	background-color:#f4f5f9;
}

#about .overview > dl > dd.address .zip {
	display:block;
}
#about .overview > dl > dd.address span:not(.zip) {
	display: inline-block;
}
#about .overview .capacity .capacity-breakdown {
	display:grid;
	grid-template-columns:auto 1fr;
	margin-top:1rem;
}
#about .overview .capacity .capacity-breakdown dt {
	grid-row: 1 / 5;
	grid-column: 1 / 2;
}
#about .overview .capacity .capacity-breakdown dt::after {
	content:"：";
}
#about .overview .capacity .capacity-breakdown dd {
	grid-column: 2 / 3;
}
#about .overview .close ul li {
	display:inline-block;
}
#about .overview .close ul li:not(:last-of-type)::after {
	content:"・";
}

#about .fees h2 {
	font-size:18px;
	text-align:center;
	margin-bottom:1rem;
}
/*一時預かり保育料金*/
#about .fees > dl {
	display:grid;
	grid-template-columns:auto 1fr;
	gap:1px;
	margin-bottom:.5rem;
}
#about .fees > dl > dt,#about .fees > dl > dd {
	padding:1rem 1rem;
}
#about .fees > dl > dt {
	text-align:justify;
	text-align-last:justify;
	white-space:nowrap;
	background-color:#edf1fd;
}
#about .fees > dl > dd {
	background-color:#f4f5f9;
}
#about .fees > dl > dd > dl {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1rem;
	text-align:center;
}
#about .fees > p:last-of-type { text-align:right; }

/*施設マップ*/
#room { background-color:rgba(231,253,220,1); }
#room .hgroup h1{ color:#2c532d; }
#room .map {
	margin-bottom:4rem;
}
#room .map::after {
	content:"";
	display:block;
	background:url(../images/tmpl/line_dot_orange.svg) repeat-x left center;
	background-size:contain;
	width:100%;
	height:8px;
	margin-top:4rem;
}
#room .map img { width:100%; }
#room .instagram a {
	display:block;
	text-align:center;
	background-color:rgba(255,255,255,.5);
	padding:5% 0;
	border-radius:6px;
	transition:background-color ease-in .1s;
	box-shadow:0 0 6px #CCC;
}
#room .instagram img {
	width:60%;
	height:auto;
	max-width:400px;
}

/*保育園で過ごす一日*/
#schedule {
	background-color:rgba(246,240,231,1);
}
#schedule .hgroup h1 { color:#bd6936; }
#schedule .img-box img {
	width:100%;
	height:auto;
	aspect-ratio: 10 / 9;
}

}


/*PC NPC TAB*/
@media screen and (min-width: 768px), print {

/*BASE*/

section .hgroup {
	margin-bottom:2rem;
}

section .hgroup h1 {
	color:#3f65ee;
	text-align:center;
}

article > .layout_2column {
	padding:80px 60px;
}
article > .layout_2column > .container {
	display:grid;
	grid-template-rows:auto;
	grid-template-columns:1fr 1fr;
	gap:0 80px;
	max-width:1440px;
	margin:auto;
	background-color:rgba(255,255,255,.2);
}
article > .layout_2column > .container #about {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
article > .layout_2column > .container #hours {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
}

.bgimg_fixed {
	display:block;
	position:relative;
	overflow:clip;
}
.bgimg_fixed::before {
	content:"";
	display:block;
	background: url(../images/tmpl/bgimg_type01.webp) no-repeat;
	background-size: cover;
	width:100%;
	height:auto;
	aspect-ratio:144 / 72;
	position:fixed;
	top:0;
	bottom: 0;
	left:0;
	z-index:-1;
	margin: auto 0;
	overflow:clip;
	opacity:.4;
}
article > .layout_2column.bgimg_fixed > .container {
	border-radius: 6% 6% 0 0 ;
}

/*メインビジュアル*/
#mainvisual {
	background: #FFF url(../images/egao/mv_img0101.webp) no-repeat center center;
	background-size:cover;
	width:100%;
	height:calc(100vh - 120px - 80px);
	overflow:clip;
	position:relative;
}

/*園について*/
#information {
	color:rgba(63,101,238,1);
	background-color:rgba(244,245,249,1);
	padding:80px 60px;
}
#information .container {
	max-width:1440px;
	margin:auto;
}
#information .txt-box {
	text-align:center;
	font-size:clamp(16px, 1.6vw, 18px);
	
}
#information .txt-box .message-box {
	margin-bottom:2rem;
}
#information .txt-box .bt-box {
	font-size:clamp(20px, 2vw, 24px);
}

/*園の概要*/
#about .overview {
	margin-bottom:2rem;
}
#about .overview > dl {
	display:grid;
	grid-template-columns:auto 1fr;
	gap:1px;
}
#about .overview > dl > dt,#about .overview > dl > dd {
	padding:1rem 1rem;
}
#about .overview > dl > dt {
	text-align:justify;
	text-align-last:justify;
	white-space:nowrap;
	background-color:#e0e6fc;
}
#about .overview > dl > dd {
	background-color:#f4f5f9;
}

#about .overview > dl > dd.address .zip {
	display:block;
}
#about .overview > dl > dd.address span:not(.zip) {
	display: inline-block;
}

#about .overview .capacity .capacity-breakdown dt,
#about .overview .capacity .capacity-breakdown dd {
	display:inline-block;
}
#about .overview .capacity .capacity-breakdown dt::after {
	content:"：";
}
#about .overview .capacity .capacity-breakdown dd:not(:last-of-type)::after {
	content:"／";
}
#about .overview .close ul li {
	display:inline-block;
}
#about .overview .close ul li:not(:last-of-type)::after {
	content:"・";
}

#about .fees h2 {
	font-size:clamp(20px, 2vw, 24px);
	text-align:center;
	margin-bottom:1rem;
}
/*一時預かり保育料金*/
#about .fees > dl {
	display:grid;
	grid-template-columns:auto 1fr;
	gap:1px;
	margin-bottom:.5rem;
}
#about .fees > dl > dt,#about .fees > dl > dd {
	padding:1rem 1rem;
}
#about .fees > dl > dt {
	text-align:justify;
	text-align-last:justify;
	white-space:nowrap;
	background-color:#edf1fd;
}
#about .fees > dl > dd {
	background-color:#f4f5f9;
}
#about .fees > dl > dd > dl {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1rem;
	text-align:center;
}
#about .fees > p:last-of-type { text-align:right; }

/*施設マップ*/
#room .map {
	margin-bottom:4rem;
}
#room .map::after {
	content:"";
	display:block;
	background:url(../images/tmpl/line_dot_orange.svg) repeat-x left center;
	background-size:contain;
	width:100%;
	height:8px;
	margin-top:4rem;
}
#room .map img { width:100%; }
#room .instagram a {
	display:block;
	text-align:center;
	background-color:rgba(255,255,255,.5);
	padding:5% 0;
	border-radius:6px;
	transition:background-color ease-in .1s;
	box-shadow:0 0 6px #CCC;
}
#room .instagram a:hover {
	background-color:rgba(255,255,255,1);
}
#room .instagram img {
	width:60%;
	height:auto;
	max-width:400px;
}

/*保育園で過ごす一日*/
#schedule {
	background-color:rgba(246,240,231,1);
	padding:80px 60px;
}
#schedule > .container {
	max-width:1440px;
	margin:auto;
}
#schedule .img-box img {
	width:100%;
}

}