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


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

/*BASE*/
section {
	padding:4rem 2rem;
}
section .hgroup {
	margin-bottom:1rem;
}
section .hgroup h1 {
	color:#3f65ee;
	text-align:center;
}

/*Main Visual*/
#mainvisual {
	width:100%;
	background-color:#FFF;
}
/*コンテナ*/
#mainvisual .container {
	padding:2rem 1rem;
}
#mainvisual .container .menu-box {
	width:100%;
	height:auto;
	aspect-ratio: 1 / 1;
	position:relative;
	overflow:clip;
}
/*メニュー・ボタン*/
#mainvisual .menu-box .bgimg,
#mainvisual .menu-box .navimg {
	width:100%;
	height:auto;
	aspect-ratio:1 / 1;
	position:absolute;
	top:0;
	left:0;
}
#mainvisual .menu-box img,
#mainvisual .menu-box svg {
	width:100%;
	height:auto;
	aspect-ratio:1 / 1;
}

/*お子様の安全と健康に力を入れております。*/
#points {
	background-color:rgba(244,245,249,1);
}
#points .hgroup {
	display:grid;
	grid-template-columns:2em 1fr 2em;
}
#points .hgroup::before, #points .hgroup::after {
	content:"";
	display:block;
	background:url(../images/tmpl/title_music-children.webp) no-repeat center center;
	background-size:cover;
	aspect-ratio: 1 / 1;
	align-self:center;
	text-align:center;
}
#points .hgroup::before,#points .hgroup .title {
	align-self:center;
	text-align:center;
}
#points .content-box > div > .txt-box .message-box h2 {
	font-family:"Noto Sans JP";
	font-size:18px;
	margin-bottom:1rem;
}
#points .content-box > div > .txt-box .message-box h3 {
	font-family:"Noto Serif JP";
	font-weight:700;
	font-size:16px;
	margin-bottom:1rem;
}
#points .message-box a.sickchild_daycare {
	display:block;
	font-size:16px;
	width:100%;
	max-width:500px;
	color:#FFF;
	text-align:center;
	background-color:rgba(228,150,0,1);
	padding:1rem .5rem;
	margin-top:2rem;
	border-radius:6px;
}
#points .message-box a.sickchild_daycare.ico::after {
	background-image:url(../images/tmpl/icon-open-new-window_w.svg);
}
#points .content-box > div:not(:last-of-type) {
	padding-bottom:2rem;
	margin-bottom:2rem;
	border-bottom:dashed 1px #999;
}
#points .content-box > div > .img-box {
	text-align:center;
	margin-bottom:1rem;
	border-radius:10px;
	overflow:clip;
}
#points .content-box > div > .img-box img {
	width:100%;
}

/*保育施設のご紹介*/
#facility {
	background:url(../images/tmpl/bgimg_type02.webp) no-repeat center center;
	background-size:100% auto;
	padding:4rem 0;
}

}


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

/*BASE*/
section {
	padding:80px 60px;
}
section .container {
	max-width:1440px;
	margin:auto;
}
section .hgroup {
	margin-bottom:60px;
}
section .hgroup h1 {
	color:#3f65ee;
	text-align:center;
}

/*Main Visual*/
#mainvisual {
	width:100%;
}
/*コンテナ*/
#mainvisual .container {
	display:flex;
	width:100%;
	aspect-ratio: 16 / 7;
	position:relative;
	overflow:clip;
}
#mainvisual .container .menu-box {
	width:43.8%;
	position:relative;
}
#mainvisual .container .slider-box {
	width:calc(100% - 43.8%);
	position:relative;
}
/*メニュー・ボタン*/
#mainvisual .container .menu-box {
	display:block;
	width:43.8%;
	position:relative;
}
#mainvisual .menu-box .bgimg,
#mainvisual .menu-box .navimg {
	width:100%;
	height:auto;
	aspect-ratio:1 / 1;
	position:absolute;
	top: 50%;
	transform: translateY(-50%);
}
#mainvisual .menu-box img,
#mainvisual .menu-box svg {
	width:auto;
	height:100%;
	aspect-ratio:1 / 1;
}
#mainvisual .menu-box .navimg svg a path {
	transition:fill ease-in-out .2s;
}
a:hover .txt path {
	fill:rgba(255,255,255,1);
}
a:hover path.box {
	fill:rgba(63,101,238,1);
}
a:hover .shadow path,a:hover path.shadow {
	fill:rgba(3,23,176,1);
}
/*スライド*/
#mainvisual .container .main-slider img {
	width:100%;
}

/*お子様の安全と健康に力を入れております。*/
#points {
	background-color:rgba(244,245,249,1);
}
#points .hgroup {
	display:grid;
	grid-template-columns:100px 1fr 100px;
}
#points .hgroup::before, #points .hgroup::after {
	content:"";
	background:url(../images/tmpl/title_music-children.webp) no-repeat center center;
	background-size:cover;
	aspect-ratio: 1 / 1;
}
#points .hgroup::before,#points .hgroup .title {
	align-self:center;
	text-align:center;
}

#points .content-box > div {
	display:flex;
}
#points .content-box > div:nth-of-type(even) {
	flex-direction:row-reverse;
}
#points .content-box > div > .img-box,
#points .content-box > div > .txt-box {
	width:calc(100% / 2);
}
#points .content-box > div > .img-box img {
	width:100%;
	object-fit: cover;
}
#points .content-box > div > .txt-box {
	display:flex;
	align-items:center;
	padding:40px;
	text-align:justify;
	font-size:clamp(14px, 1.2vw, 16px);
}
#points .content-box > div:nth-of-type(odd) > .txt-box {
	padding-right:0;
}
#points .content-box > div:nth-of-type(even) > .txt-box {
	padding-left:0;
	
}
#points .content-box > div > .txt-box .message-box h2 {
	font-family:"Noto Sans JP";
	font-size:clamp(24px, 2.4vw, 32px);
	margin-bottom:1rem;
}
#points .content-box > div > .txt-box .message-box h3 {
	font-family:"Noto Serif JP";
	font-weight:700;
	font-size:clamp(18px, 1.8vw, 24px);
	margin-bottom:1rem;
}

#points .message-box a.sickchild_daycare {
	display:block;
	font-size:clamp(16px, 1.6vw, 18px);
	width:100%;
	max-width:500px;
	color:#FFF;
	text-align:center;
	background-color:rgba(228,150,0,.8);
	padding:1rem .5rem;
	margin-top:2rem;
	border-radius:6px;
	transition:background-color ease .2s;
}
#points .message-box a.sickchild_daycare:hover {
	background-color:rgba(228,150,0,1);
}
#points .message-box a.sickchild_daycare.ico::after {
	background-image:url(../images/tmpl/icon-open-new-window_w.svg);
}

/*保育施設のご紹介*/
#facility {
	background:url(../images/tmpl/bgimg_type02.webp) no-repeat center center;
	background-size:100% auto;
}

}