@charset "utf-8";

/*-------------------------------------------------------------------
　common
-------------------------------------------------------------------*/
#wrapper{
	width:100%;
	margin:0 0 0 0;
	overflow: hidden;
}

#wrapper img{
	width:100%;
	height:auto;
	backface-visibility:hidden;
}

#wrapper a:hover img{
	opacity:0.8;
}

.view_pc{display:block;}
.view_sp{display:none;}

.view_pc767{display:block;}
.view_sp767{display:none;}

.center{text-align: center !important;}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.view_pc{display:none;}
.view_sp{display:block;}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.view_pc767{display:none;}
.view_sp767{display:block;}
}

/*-------------------------------------------------------------------
　title
-------------------------------------------------------------------*/
.mainTit{
	font-size: 45px;
	color: #EF7F36;
	font-weight: bold;
	border:0px solid #CCC;
	text-align: center;
	margin: 0 auto 50px;
}

.under{background: linear-gradient(transparent 70%, #FFE599 70%);}
.under02{background: linear-gradient(transparent 70%, #FFDFBF 70%);}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.mainTit{
	font-size: 30px;
	margin: 0 auto 30px;
}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
.mainTit{font-size: 28px;}
}


/*-------------------------------------------------------------------
　main01
-------------------------------------------------------------------*/
#main01{
	width: 100%;
	background: #FFF8E1;
	padding: 80px 0 70px;
}

.main01In{
	width: 1500px;
	margin: 0 auto;
	background-image: url(../images/main01_bg.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 0px 70px;
	text-align: center;
	font-size: 20px;
	padding-bottom: 30px;
}

.main01_tit{
	width: 800px;
	margin: 0 auto 40px;
}

/* ---- pc 1500px ---------- */
@media only screen and (max-width:1500px){
.main01In{width: 90%;}
.main01_tit{
	width: 700px;
	margin: 0 auto 30px;
}
}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
.main01In{font-size: 18px;}

.main01_tit{
	width: 650px;
	margin: 0 auto 30px;
}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.main01_tit{
	width: 520px;
	margin: 0 auto 30px;
}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
#main01{padding: 60px 0 50px;}

.main01In{
	width: 85%;
	font-size: 17px;
	background-position: 0px 30px;
	padding-bottom: 30px;
}

.main01_tit{
	width: 70%;
	margin: 0 auto 30px;
}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
#main01{padding: 50px 0 30px;}
.main01In{
	background-image: none;
	text-align: left;
}

.main01_tit{
	width: 100%;
	margin: 0 auto 30px;
}
}


/*-------------------------------------------------------------------
　main01　教育目標
-------------------------------------------------------------------*/
#main02{
	width: 100%;
	padding: 80px 0 80px;
	background: url(../images/wave_bg02.png) repeat-x center top;
	background-size: contain;
}

.main02In{
	width: 100%;
	margin: 0 auto;
	background-image: url(../images/main02_bg.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}

.main02Tit{
	width: 940px;
	margin: 0 auto;
	background-image: url(../images/main02_tit_bg.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 50% 50%;
	text-align: center;
}

#objective_wrap{
	width: 1500px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.objectiveBox{
	width: 30%;
	display: flex;
	flex-direction: column;
}

.objectiveBox h4{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	color: #FFF;
	border-radius: 10px;
	line-height: 1.4;
	margin-top: auto;
	height: 100px;
}

.objective_bg01{background: #79C7EC;}
.objective_bg02{background: #FDC8C8;}
.objective_bg03{background: #FBC953;}

/* ---- pc 1500px ---------- */
@media only screen and (max-width:1500px){
#objective_wrap{width: 90%;}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.main02Tit{width: 90%;}

.objectiveBox h4{
	font-size: 20px;
}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
#main02{
	padding: 60px 0 50px;
}

.main02Tit{
	width: 90%;
	background-image: url(../images/main02_tit_bg_sp.jpg);
	margin-bottom: -20px;
}

#objective_wrap{
	flex-direction: column;
	width: 100%;
}

.objectiveBox{
	width: 85%;
	margin: 0 auto 30px;
}

.objectiveBox:last-of-type{
	margin: 0 auto 0px;
}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
#main02{
	width: 100%;
	padding: 50px 0 30px;
}

.main02Tit{background-image: url(../images/main02_tit_bg_480.jpg);}
}


/*-------------------------------------------------------------------
　loop slide
-------------------------------------------------------------------*/
.loop_slide{
	position: relative;
	width: 100%;
	height: 300px;
	background: url(../images/loop_slide01.png) repeat-x 0 0;
	overflow: hidden;
	-moz-animation: slide 60s linear infinite;
	animation: slide 60s linear infinite;
	margin-top: 100px;
}

/*-- アニメーション ---*/
@keyframes slide {
0% {background-position: 0 0;}
100% {background-position: -1860px 0;}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.loop_slide{
	width: 100%;
	height: 194px;
	background: url(../images/loop_slide1024.png) repeat-x 0 0;
}
}

/*-- アニメーション ---*/
@keyframes slide {
0% {background-position: 0 0;}
100% {background-position: -1206px 0;}
}


/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.loop_slide{
	width: 100%;
	height: 136px;
	background: url(../images/loop_slide767.png) repeat-x 0 0;
	margin-top: 60px;
}
}

/*-- アニメーション ---*/
@keyframes slide {
0% {background-position: 0 0;}
100% {background-position: -870px 0;}
}



/*-------------------------------------------------------------------
　main03　園の特色
-------------------------------------------------------------------*/
#main03{
	width: 100%;
	padding: 0 0 30px;
	background: url(../images/main03_bg.jpg);
	background-repeat: no-repeat;
	background-size:100%;
	background-position: center center;
}

.feature_wrap{
	width: 65%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.featureBox{
	width: 30%;
}

.featureBox h4{
	font-size: 25px;
	text-align: center;
	font-weight: bold;
	margin: 20px 0;
}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
.feature_wrap{width: 70%;}

.featureBox h4{
	font-size: 21px;
	margin: 20px 0;
}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.featureBox h4{font-size: 20px;}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
#main03{
	padding: 0 0 0px;
	background: none;
}

.feature_wrap{
	width: 85%;
	margin: 0 auto;
	flex-direction: column;
}

.featureBox{
	width: 100%;
	margin-bottom: 30px;
}

.featureBox:last-of-type{
	margin-bottom: 0px;
}
}