@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/smile/mv_img0101.webp) no-repeat center center;
	background-size:cover;
	width:100%;
	height:auto;
	aspect-ratio: 1 / 1;
	overflow:clip;
	position:relative;
}

#mainvisual .img-box {
	width:50%;
	height:auto;
	max-width:720px;
	aspect-ratio:72 / 36;
	position:absolute;
	bottom:5%;
	right:5%;
}
#mainvisual .img-box img { width:100%; max-width:720px; }

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

/*園の概要*/
#about { background-color:#FFF; }
#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 .hgroup {
	text-align:center;
	margin-bottom:1rem;
}
#about .fees .hgroup h2 { font-size:18px; }

#about .fees dl {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1px;
	margin-bottom:.5rem;
}
#about .fees dt, #about .fees dd {
	text-align:center;
	padding:1rem 1rem;
}
#about .fees dt { background-color:#edf1fd; }
#about .fees dd { background-color:#f4f5f9; }

/*\基本*/
#about .fees .basic { margin-bottom:2rem; }
#about .fees .basic .hgroup h2 { margin-bottom:1rem; }
/*一時預かり*/
#about .fees .temporary > 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;
	
}

/*ご入園の流れ*/
#flow {
	position:relative;
	overflow:clip;
}
#flow::before {
	content:"";
	display:block;
	background: #FFF url(../images/smile/flow_chart_bgimg_sp.webp) no-repeat center center;
	background-size:90% auto;
	width:100%;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	opacity:.5;
}

#flow .hgroup h1 { margin-bottom:.5rem; }
#flow .hgroup :not(h1) { font-size:16px; }
#flow .chart {
	counter-reset: chart;
}
#flow .chart li {
	display:grid;
	grid-template-rows: auto auto;
	grid-template-columns: 40px 1fr;
	gap:3rem 1rem;
	counter-increment:chart;
}
#flow .chart li::before {
	content:counter(chart);
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio:1 / 1;
	font-family:"Noto Sans JP";
	font-size:20px;
	line-height:20px;
	font-weight:bold;
	color: #FFF;
	background-color:#99adf4;
	border-radius: 50%;
}
#flow .chart li .txt-box {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	justify-self:start;
	align-self:center;
	text-align:justify;
}

#flow .chart h2 {
	font-size:18px;
	padding:8px 0 .5rem;
}

}


/*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/smile/mv_img0101.webp) no-repeat center center;
	background-size:cover;
	width:100%;
	height:calc(100vh - 120px - 80px);
	min-height:400px;
	overflow:clip;
	position:relative;
}
#mainvisual .img-box {
	width:40%;
	height:auto;
	max-width:720px;
	aspect-ratio:72 / 36;
	position:absolute;
	top:16%;
	left:6%;
}
#mainvisual .img-box img { width:100%; max-width:720px; }

/*園について*/
#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);
	
}

/*園の概要*/
#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 .hgroup {
	text-align:center;
	margin-bottom:1rem;
}
#about .fees .hgroup h2 { font-size:clamp(20px, 2vw, 24px); }

#about .fees dl {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1px;
	margin-bottom:.5rem;
}
#about .fees dt, #about .fees dd {
	text-align:center;
	padding:1rem 1rem;
}
#about .fees dt { background-color:#edf1fd; }
#about .fees dd { background-color:#f4f5f9; }

/*\基本*/
#about .fees .basic { margin-bottom:2rem; }
#about .fees .basic .hgroup h2 { margin-bottom:1rem; }
/*一時預かり*/
#about .fees .temporary > 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%;
}

/*ご入園の流れ*/
#flow {
	background-color:rgba(255,255,255,1);
	padding:80px 60px;
}
#flow .container {
	max-width:1440px;
	margin:auto;
}
#flow .hgroup { text-align:center; margin-bottom:0; }
#flow .hgroup h1 { margin-bottom:.5rem; }
#flow .hgroup :not(h1) { font-size:clamp(16px, 1.6vw, 18px); }
#flow .chart {
	background:url(../images/smile/flow_chart_bgimg.webp) no-repeat bottom right;
	background-size:50% auto;
	font-size:clamp(16px, 1.6vw, 20px);
	padding:100px 0 60px;
	counter-reset: chart;
}
#flow .chart li {
	display:grid;
	grid-template-rows: auto auto;
	grid-template-columns: 14% 1fr;
	gap:0 3.2%;
	counter-increment:chart;
}
#flow .chart li::before {
	content:counter(chart);
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio:1 / 1;
	font-family:"Noto Sans JP";
	font-size:clamp(48px, 4.8vw, 80px);
	font-weight:bold;
	line-height:1;
	color: #FFF;
	background-color:#99adf4;
	border-radius: 50%;
}
#flow .chart li:not(:last-child)::after {
	content:"●";
	font-size:1.5em;
	line-height:1;
	color:#ced9ff;
	text-align:center;
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	padding:14% 0;
}
#flow .chart li .txt-box {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	justify-self:start;
	align-self:center;
}

#flow .chart h2 {
	font-size:clamp(24px, 2.4vw, 32px);
	margin-bottom:.5rem;
}

}