@charset "utf-8";

#banner h1 { line-height: 1.2;}
#banner h1 span { display: inline-block;}
/*-------------------------------------------------
	education
--------------------------------------------------*/
#preschoolers { width: 100%; margin: 0 auto 100px;position: relative; display: flex; align-items: center; justify-content: center;}
#preschoolers .pre_inner { width: 1250px; margin: 90px auto 0; position: relative;}
#preschoolers .pre_inner .title{  margin: auto; text-align: center; }
#preschoolers .pre_inner .title img{  width: 86px;}
#preschoolers .pre_inner .txt_box {  margin-top: 45px; display: flex; align-items: center; justify-content: center;}
#preschoolers .pre_inner .txt_box img{ width: 13px; height: 25px; margin-top: 5px;}
#preschoolers .pre_inner .title h2{  font-size: 30px; margin-top: 30px; line-height: 1.3; letter-spacing: 1px;  margin: 0 15px; padding: 0 8px;background: linear-gradient(transparent 55%,#fffa99 0%);}
#preschoolers .pre_inner .pre_box { margin-top: 55px;display: flex; align-items: center; justify-content: center; text-align: center;}
#preschoolers .pre_inner .pre_box p{ font-size: 18px; line-height: 2;}
#preschoolers .pre_inner .sun { width: 125px;position: absolute; top: 34%; right: 2.5%;}
#preschoolers .pre_inner .cloud { width: 141px; position: absolute; top: 91%; left: 2.5%;}

.pre_pc { display: block;}
.pre_sp { display: none;}
@media screen and (max-width: 1300px) {
#preschoolers .pre_inner .sun { width: 125px;position: absolute; top: 34%; right: 8%;}
#preschoolers .pre_inner .cloud { width: 141px; position: absolute; top: 91%; left: 8%;}
}
@media screen and (max-width: 1100px) {
#preschoolers .pre_inner { margin: 70px auto 0; }
#preschoolers .pre_inner .sun { width: 100px;position: absolute; top: 34%; right: 6%;}
#preschoolers .pre_inner .cloud { width: 110px; position: absolute; top: 91%; left: 6%;}
}
@media screen and (max-width: 900px) {
#preschoolers { margin: 0 auto 80px;}
#preschoolers .pre_inner { margin: 50px auto 0; }
#preschoolers .pre_inner .sun { width: 100px;position: absolute; top: 0%; right: 10%;}
#preschoolers .pre_inner .cloud { width: 110px; position: absolute; top: 4%; left: 10%;}
}
@media screen and (max-width: 630px) {
#preschoolers { margin: 0 auto 60px;}
#preschoolers .pre_inner .title img{  width: 70px;}
#preschoolers .pre_inner .txt_box {  margin-top: 30px; display: flex; align-items: center; justify-content: center;}
#preschoolers .pre_inner .txt_box img{ width: 13px; height: 25px; margin-top: 5px;}
#preschoolers .pre_inner .title h2{  font-size: 26px; margin-top: 30px; margin: 0 15px; padding: 0 8px;}
#preschoolers .pre_inner .pre_box { margin-top: 30px;text-align: center;}
#preschoolers .pre_inner .pre_box p{ font-size: 16px; line-height: 2;}
#preschoolers .pre_inner .sun,
#preschoolers .pre_inner .cloud { display: none;}
}
@media screen and (max-width: 570px) {
#preschoolers .pre_inner .title h2{  font-size: 24px; margin-top: 30px; margin: 0 10px; padding: 0 6px;}
#preschoolers .pre_inner .pre_box { text-align: left; width: 380px; margin: 25px auto 0;}
#preschoolers .pre_inner .pre_box br{ display: none;}
#preschoolers .pre_inner .pre_box p{ font-size: 16px; line-height: 2;}
#preschoolers .pre_inner .sun,
#preschoolers .pre_inner .cloud { display: none;}
}
@media screen and (max-width: 450px) {
#preschoolers .pre_inner { width: 1250px; margin: 50px auto 0; position: relative;}
#preschoolers .pre_inner .title h2{ width: 180px; font-size: 24px;  margin: 0 15px;}
#preschoolers .pre_inner .pre_box { text-align: left; width: 320px; margin: 30px auto 0;}
.pre_pc { display: none;}
.pre_sp { display: block;}
}
@media screen and (max-width: 370px) {
#preschoolers .pre_inner .pre_box { text-align: left; width: 280px; margin: 20px auto 0;}
}
/*-------------------------------------------------
	color_area
--------------------------------------------------*/
#color_area { padding-bottom: 150px; ;background: url(../img/bg.gif) center top;margin-top: 0px; margin-bottom: -50px; font-weight: 500; position: relative; width: 100%;display: flex; align-items: center; justify-content: center;}
#color_area .saniku_syo_bg img { width: 100%; }
#color_area .saniku_syo_bg { position: absolute; top: 0px; z-index: 2; width: 100%;}
@media screen and (max-width: 1600px) {
/* 背景 */
#color_area .saniku_syo_bg img { width: 1600px;}
#color_area .saniku_syo_bg { position: absolute;left: 50%; transform: translate(-50%, -50%); top: 100px; width: 1600px;height: 200px;}
}

/*-------------------------------------------------
	タイトル
--------------------------------------------------*/
#color_area .color_inner { width: 1600px;}
#color_area .activity { margin: 79px auto 0; width: 100%;}
/* タイトル */
#color_area .activity .act_img { width: 103px; margin: 0 auto;}
#color_area .activity .act_tit {  margin: 40px auto 0; text-align: center; }
#color_area .activity .act_tit h2 { font-size: 28px; line-height: 1.3; padding: 0 10px; background: linear-gradient(transparent 50%,#fff 10%); display: inline-block;}
/*-------------------------------------------------
	二つの活動
--------------------------------------------------*/
#color_area .activity ul { display: flex; align-items: center; margin: 65px auto 0; width: 1126px;}
#color_area .activity ul li{ display: flex; align-items: center; justify-content: center;}
#color_area .activity ul li:nth-child(1) { margin-right: 34px;}
#color_area .activity ul li .inner_box { width: 546px;}
#color_area .activity ul li .inner_box .txt_box{ background: #fff; height: 100%; padding: 30px 0 32px; border-radius: 0 0 20px 20px;}
#color_area .activity ul li .inner_box .txt_box .title { text-align: center;}
#color_area .activity ul li .inner_box .txt_box .title h3{  font-size: 26px; line-height: 1.3; letter-spacing: 1px;  margin: 0 15px; padding: 0 8px;background: linear-gradient(transparent 55%,#ffeac1 0%); display: inline-block;}
#color_area .activity ul li .inner_box .txt_box .txt_box { width: 447px; margin: 0 auto; text-align: left;}
#color_area .activity ul li .inner_box .txt_box .txt_box p { font-size: 16px; line-height: 2;}
#color_area .activity ul li .inner_box .txt_box .txt_box h4 { font-size: 19px; line-height: 1; font-weight: 500; margin-top: 10px; color: #edaa2a;}
/* moreボタン */
#color_area .activity .more_btn a{ margin: 0 auto; width: 242px; height: 45px; display: flex; align-items: center; border: solid 3px #777; border-radius: 25px;}
#color_area .activity .more_btn a p{ font-size: 16px; margin: 0 25px 0 38px;}
#color_area .activity .more_btn a img{ width: 18px; height: 18px;}

#color_area .activity ul li.yard .inner_box .txt_box .title h3{  background: linear-gradient(transparent 55%,#c9f5db 0%); }
#color_area .activity ul li.yard .inner_box .txt_box .txt_box h4 { color: #83c59e;}

.act_pc { display: block;}
.act_sp { display: none;}

@media screen and (max-width: 1300px) {
/* 二つの活動 */
#color_area .activity ul { width: 985px;}
#color_area .activity ul li:nth-child(1) { margin-right: 25px;}
#color_area .activity ul li .inner_box { width: 480px;}
#color_area .activity ul li .inner_box .txt_box{ padding: 30px 0 32px;}
#color_area .activity ul li .inner_box .txt_box .title h3{  font-size: 26px; margin: 0 15px; padding: 0 8px;}
#color_area .activity ul li .inner_box .txt_box .txt_box { width: 420px; margin: 0 auto; text-align: left;}
/* moreボタン */
#color_area .activity .more_btn a{ width: 242px; height: 45px;}
}
@media screen and (max-width: 1080px) {
/* 二つの活動 */
#color_area .activity ul { width: 860px;}
#color_area .activity ul li:nth-child(1) { margin-right: 20px;}
#color_area .activity ul li .inner_box { width: 420px;}
#color_area .activity ul li .inner_box .txt_box{ padding: 30px 0 32px;}
#color_area .activity ul li .inner_box .txt_box .title h3{  font-size: 24px; margin: 0 15px; padding: 0 8px;}
#color_area .activity ul li .inner_box .txt_box .txt_box { width: 380px; margin: 0 auto; text-align: left;}
/* moreボタン */
#color_area .activity .more_btn a{ width: 242px; height: 45px;}
}
@media screen and (max-width: 940px) {
/* タイトル */
#color_area .activity .act_img { width: 80px;}
#color_area .activity .act_tit {  margin: 20px auto 0; }
#color_area .activity .act_tit h2 { font-size: 26px; line-height: 1.3; padding: 0 10px;}
/* 二つの活動 */
#color_area .activity ul { width: 500px; display: block;}
#color_area .activity ul li:nth-child(1) { margin-right: 0px;}
#color_area .activity ul li:nth-child(2) { margin-top: 30px;}
#color_area .activity ul li .inner_box { width: 500px;}
#color_area .activity ul li .inner_box .img_box img{ width: 500px;}
#color_area .activity ul li .inner_box .txt_box{ padding: 30px 0 32px;}
#color_area .activity ul li .inner_box .txt_box .title h3{  font-size: 24px; margin: 0 15px; padding: 0 8px;}
#color_area .activity ul li .inner_box .txt_box .txt_box { width: 400px; margin: 0 auto; text-align: left;}
/* moreボタン */
#color_area .activity .more_btn a{ width: 242px; height: 45px;}
}
@media screen and (max-width: 600px) {
/* 二つの活動 */
#color_area .activity ul { width: 400px; display: block;}
#color_area .activity ul li .inner_box { width: 400px;}
#color_area .activity ul li .inner_box .img_box img{ width: 400px;}
#color_area .activity ul li .inner_box .txt_box{ padding: 30px 0 32px;}
#color_area .activity ul li .inner_box .txt_box .title h3{  font-size: 22px; margin: 0 15px; padding: 0 8px;}
#color_area .activity ul li .inner_box .txt_box .txt_box { width: 290px; margin: 0 auto; text-align: left;}
#color_area .activity ul li .inner_box .txt_box .txt_box h4 { margin-top: 12px; }
/* moreボタン */
#color_area .activity .more_btn a{ width: 242px; height: 45px;}
#color_area .activity ul li.yard .inner_box .txt_box .txt_box br { display: none;}
}
@media screen and (max-width: 480px) {
/* 二つの活動 */
#color_area .activity ul { width: 350px; display: block;}
#color_area .activity ul li .inner_box { width: 350px;}
#color_area .activity ul li .inner_box .img_box img{ width: 350px;}
#color_area .activity ul li .inner_box .txt_box{ padding: 30px 0 32px;}
#color_area .activity ul li .inner_box .txt_box .title h3{  font-size: 22px; margin: 0 15px; padding: 0 8px;}
#color_area .activity ul li .inner_box .txt_box .txt_box { width: 240px; margin: 0 auto; text-align: left;}
#color_area .activity ul li .inner_box .txt_box .txt_box h4 { margin-top: 18px; }
/* moreボタン */
#color_area .activity .more_btn a{ width: 242px; height: 45px;}
.act_pc { display: none;}
.act_sp { display: block;}
}
@media screen and (max-width: 400px) {
/* 二つの活動 */
#color_area .activity ul { width: 320px; display: block;}
#color_area .activity ul li .inner_box { width: 320px;}
#color_area .activity ul li .inner_box .img_box img{ width: 320px;}
#color_area .activity ul li .inner_box .txt_box{ padding: 30px 0 32px;}
#color_area .activity ul li .inner_box .txt_box .title h3{  font-size: 22px; margin: 0 15px; padding: 0 8px;}
#color_area .activity ul li .inner_box .txt_box .txt_box { width: 240px; margin: 0 auto; text-align: left;}
/* moreボタン */
#color_area .activity .more_btn a{ width: 242px; height: 45px;}
}
@media screen and (max-width: 375px) {
/* 二つの活動 */
#color_area .activity ul { width: 300px; display: block;}
#color_area .activity ul li .inner_box { width: 300px;}
#color_area .activity ul li .inner_box .img_box img{ width: 300px;}
#color_area .activity ul li .inner_box .txt_box{ padding: 30px 0 32px;}
#color_area .activity ul li .inner_box .txt_box .title h3{  font-size: 22px; margin: 0 15px; padding: 0 8px;}
#color_area .activity ul li .inner_box .txt_box .txt_box { width: 240px; margin: 0 auto; text-align: left;}
/* moreボタン */
#color_area .activity .more_btn a{ width: 242px; height: 45px;}
}
@media screen and (max-width: 345px) {
/* 二つの活動 */
#color_area .activity ul { width: 280px; display: block;}
#color_area .activity ul li .inner_box { width: 280px;}
#color_area .activity ul li .inner_box .img_box img{ width: 280px;}
#color_area .activity ul li .inner_box .txt_box{ padding: 30px 0 32px;}
#color_area .activity ul li .inner_box .txt_box .title h3{  font-size: 22px; margin: 0 15px; padding: 0 8px;}
#color_area .activity ul li .inner_box .txt_box .txt_box { width: 200px; margin: 0 auto; text-align: left;}
/* moreボタン */
#color_area .activity .more_btn a{ width: 220px; height: 45px;}
#color_area .activity .more_btn a p{ font-size: 16px; margin: 0 15px 0 30px;}
}

/*-------------------------------------------------
	SNS
--------------------------------------------------*/
#color_area .sns_box { width: 100%; margin: 72px auto 0;text-align: center;}
#color_area .sns_box .title_box { display: flex; align-items: center; justify-content: center;}
#color_area .sns_box .title_box .tit_inner { text-align: center; display: flex; align-items: center; margin: 0 auto;}
#color_area .sns_box .title_txt { text-align: center; margin: 0 auto;}
#color_area .sns_box .title_box .tit_inner .title_txt h3{  font-size: 24px; line-height: 1.3; letter-spacing: 1px;  margin: 0 25px; padding: 0 8px;background: linear-gradient(transparent 55%,#fff 0%); display: inline-block;}
#color_area .sns_box .title_box .tit_inner img{ width: 11px; height: 23px;}
/* sns */
#color_area .sns ul { display: flex; align-items: center; width: 780px;margin: 28px auto 0;}
#color_area .sns ul li a{ display: flex; align-items: center; width: 377px; height: 94px; border-radius: 20px; background: #fff;margin-right: 25px;}
/* インスタ */
#color_area .inst .ins_img { width: 43px; margin-left: 89px;}
#color_area .inst p { font-size: 23px; margin-left: 19px;}
#color_area .inst .sns_arrow { width: 7px; margin-left: 63px;}
/* facebook */
#color_area .face .face_img { width: 44px; margin-left: 91px;}
#color_area .face p { font-size: 23px; margin-left: 19px;}
#color_area .face .sns_arrow { width: 7px; margin-left: 80px;}

@media screen and (max-width: 900px) {
/* sns */
#color_area .sns ul { width: 86.6vw;margin: 28px auto 0;}
#color_area .sns ul li a{ width: 41.8vw; height: 94px; margin-right: 25px;}
/* インスタ */
#color_area .inst .ins_img { width: 43px; margin-left: 9.8vw;}
#color_area .inst p { font-size: 23px; margin-left: 2.1vw;}
#color_area .inst .sns_arrow { width: 7px; margin-left: 5vw;}
/* facebook */
#color_area .face .face_img { width: 44px; margin-left: 10vw;}
#color_area .face p { font-size: 23px; margin-left: 2.1vw;}
#color_area .face .sns_arrow { width: 7px; margin-left: 6vw;}
}
@media screen and (max-width: 750px) {
/* sns */
#color_area .sns ul { width: 370px;margin: 28px auto 0;flex-wrap: wrap;}
#color_area .sns ul li a{ width: 370px; height: 94px; margin-right: 0px; margin-bottom: 20px;}
/* インスタ */
#color_area .inst .ins_img { width: 35px; margin-left: 89px;}
#color_area .inst p { font-size: 23px; margin-left: 19px;}
#color_area .inst .sns_arrow { width: 7px; margin-left: 63px;}
/* facebook */
#color_area .face .face_img { width: 48px; margin-left: 82px;}
#color_area .face p { font-size: 23px; margin-left: 19px;}
#color_area .face .sns_arrow { width: 7px; margin-left: 80px;}
}
@media screen and (max-width: 500px) {
#color_area .sns_box .title_box .tit_inner .title_txt h3{ font-size: 22px; margin: 0 15px; padding: 0 8px;}
}
@media screen and (max-width: 440px) {
#color_area .sns_box .title_box .tit_inner .title_txt h3{ font-size: 20px; margin: 0 10px; padding: 0 8px;}
/* sns */
#color_area .sns ul { width: 300px;margin: 28px auto 0;flex-wrap: wrap;}
#color_area .sns ul li a{ width: 300px; height: 94px; margin-right: 0px; margin-bottom: 20px;}
/* インスタ */
#color_area .inst .ins_img { width: 35px; margin-left: 40px;}
#color_area .inst p { font-size: 23px; margin-left: 19px;}
#color_area .inst .sns_arrow { width: 7px; margin-left: 40px;}
/* facebook */
#color_area .face .face_img { width: 44px; margin-left: 35px;}
#color_area .face p { font-size: 23px; margin-left: 19px;}
#color_area .face .sns_arrow { width: 7px; margin-left: 50px;}
}
@media screen and (max-width: 370px) {
#color_area .sns_box .title_box .tit_inner .title_txt h3{ font-size: 20px; margin: 0 5px; padding: 0 8px;}
#color_area .sns_box .title_box .tit_inner img{ width: 11px; height: 23px;}
}
@media screen and (max-width: 350px) {
#color_area .sns_box .title_box .tit_inner .title_txt h3{ font-size: 18px; margin: 0 3px; padding: 0 8px;}
#color_area .sns_box .title_box .tit_inner img{ width: 9px; height: 18px;}
/* sns */
#color_area .sns ul { width: 280px;}
#color_area .sns ul li a{ width: 280px; height: 94px;}
/* インスタ */
#color_area .inst .ins_img { width: 35px; margin-left: 30px;}
#color_area .inst p { font-size: 23px; margin-left: 19px;}
#color_area .inst .sns_arrow { width: 7px; margin-left: 40px;}
/* facebook */
#color_area .face .face_img { width: 44px; margin-left: 25px;}
#color_area .face p { font-size: 23px; margin-left: 19px;}
#color_area .face .sns_arrow { width: 7px; margin-left: 50px;}
}
/*-------------------------------------------------
	詳細
--------------------------------------------------*/
#color_area .detail { width: 100%;}
#color_area .detail .whale_img { width: 177px; margin: 32px auto 0;}
#color_area .detail .detail_box { width: 740px; height: 100%; margin: 18px auto 0; border-radius: 20px; background: #fff; text-align: center;}
#color_area .detail .detail_box h3 { font-size: 30px; padding-top: 60px;}
#color_area .detail .detail_box .detail_inner { width: 645px; height: 100%; margin: 18px auto 0; border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; text-align: left;}
#color_area .detail .detail_box .detail_inner ul{ margin: 30px auto 56px;}
#color_area .detail .detail_box .detail_inner ul li{ border-top: dotted 3px #dddddd;}
#color_area .detail .detail_box .detail_inner ul li:nth-child(7){ border-bottom: dotted 3px #dddddd;}
#color_area .detail .detail_box .detail_inner ul li .detail_txt { margin: 18px 12px;}

@media screen and (max-width: 870px) {
#color_area .detail .detail_box { width: 85vw; margin: 18px auto 0;}
#color_area .detail .detail_box h3 { font-size: 26px; padding-top: 60px;}
#color_area .detail .detail_box .detail_inner { width: 74.1vw; margin: 18px auto 0;}
#color_area .detail .detail_box .detail_inner ul{ margin: 30px auto 56px;}
#color_area .detail .detail_box .detail_inner ul li .detail_txt { margin: 18px 12px;}
}