@charset "utf-8";

/*-------------------------------------------------
	education
--------------------------------------------------*/
#education { width: 100%; margin: 0 auto 100px;position: relative; display: flex; align-items: center; justify-content: center;}
#education .edu_inner { width: 1250px; margin: 77px auto 0; }
#education .edu_inner .title{  margin: auto; text-align: center;}
#education .edu_inner .title img{  width: 86px;}
#education .edu_inner .title h2{  font-size: 30px; margin-top: 30px; line-height: 1.6; letter-spacing: 1px; }
#education .edu_inner .edu_box { position: relative; margin-top: 47px;}
#education .edu_inner .edu_box ul{ width: 1084px; margin: 0 auto;}
/* タイトル円 */
#education .edu_inner .edu_box .circle_box { position: relative;width: 150px; height: 150px; }
#education .edu_inner .edu_box .circle_box .bg_circle{ width: 150px; height: 150px; border-radius: 50%; position: absolute;z-index: -1;}
#education .edu_inner .edu_box .circle_box h3{ font-size: 30px; text-align: center; padding-top: 34%;}
/* テキスト円 */
#education .edu_inner .edu_box .txt_box { position: relative;width: 539px; height: 330px; z-index: -2;}
#education .edu_inner .edu_box .txt_box .bg_circle_img { width: 539px; height: 330px; position: absolute; top: -24%; left: 6%;}
#education .edu_inner .edu_box .txt_box .txt { width: 370px; position: absolute; top: -3%; left: 22%;}
#education .edu_inner .edu_box .txt_box .txt p { font-size: 16px; line-height: 2;}
/* 徳育 */
#education .tokuiku { margin-left: 5.5%;}
#education .tokuiku  .bg_circle{  background: #ffc6e0; }
#education .tokuiku  .chara_img{ width: 93px; position: absolute; top: 30%; left: -40%;}
/* 知育 */
#education .tiiku { margin-left: 46%; margin-top: -18%;}
#education .tiiku .bg_circle{  background: #a8fcca; }
#education .edu_inner .edu_box .tiiku .circle_box .bg_circle{  position: absolute; left: 290%;}
#education .edu_box .tiiku .circle_box .tiiku_tit{  position: absolute; top: 20%;left: 318%; white-space: nowrap;}
#education .tiiku  .chara_img{ width: 91px; position: absolute; top: -30%; left: 245%;}
/* 体育 */
#education .taiiku { margin-top: -22%;}
#education .taiiku .bg_circle{  background: #addaff; }
#education .taiiku .chara_img{ width: 93px; position: absolute; top: -10%; left: 80%;}
#education .edu_inner .edu_box .taiiku .txt_box .txt { width: 368px; position: absolute; top: -3%; left: 22%; }
#education .pc { display: block;}

@media screen and (max-width: 1200px) {
/* 徳育 */
#education .tokuiku { margin-left: 15%;}
/* 知育 */
#education .tiiku { margin-left: 36%; margin-top: -12%;}
/* 体育 */
#education .taiiku { margin-left: 15%; margin-top: -12%;}
}
@media screen and (max-width: 980px) {
#education .edu_inner .edu_box { margin-top: 60px;}
#education .tokuiku  .chara_img{ width: 98px; position: absolute; top: 0%; left: 75%;}
/* 徳育 */
#education .tokuiku { margin-left: 22%;}
/* 知育 */
#education .tiiku { margin-left: 24%; margin-top: -7%;}
#education .tiiku  .chara_img{ top: 10%; left: 245%;}
/* 体育 */
#education .taiiku { margin-left: 22%; margin-top: -6%;}
#education .taiiku .chara_img{ top: 5%; left: 80%;}
}
@media screen and (max-width: 740px) {
#education .edu_inner {  margin: 60px auto 0; }
#education .edu_inner .title h2{  font-size: 24px; margin-top: 20px; line-height: 1.6; letter-spacing: 1px; }
/* タイトル円 */
#education .edu_inner .edu_box .circle_box { width: 100px; height: 100px; }
#education .edu_inner .edu_box .circle_box .bg_circle{ width: 100px; height: 100px;}
#education .edu_inner .edu_box .circle_box h3{ font-size: 24px; padding-top: 32%;}
/* テキスト円 */
#education .edu_inner .edu_box .txt_box { width: 500px; height: 330px; z-index: -2;}
#education .edu_inner .edu_box .txt_box .bg_circle_img { width: 500px; height: 330px; position: absolute; top: -24%; left: 6%;}
#education .edu_inner .edu_box .txt_box .txt { width: 370px; position: absolute; top: -3%; left: 20%;}
#education .edu_inner .edu_box .txt_box .txt p { font-size: 16px; line-height: 1.8;}
/* 徳育 */
#education .tokuiku { margin-left: 25.5%;}
#education .tokuiku  .chara_img{ width: 70px;  top: -10%; left: 80%;}
/* 知育 */
#education .tiiku { margin-left: 25%; margin-top: -7%;}
#education .edu_inner .edu_box .tiiku .circle_box .bg_circle{  left: 6%;}
#education .edu_box .tiiku .circle_box .tiiku_tit{  top: 18%;left: 33%; }
#education .tiiku  .chara_img{ width: 60px; top: -15%; left: 85%;}
#education .tiiku  .txt{ margin-left: 2%;}
/* 体育 */
#education .taiiku { margin-left: 25.5%; margin-top: -6%;}
#education .taiiku .chara_img{ width: 70px;  top: -10%; left: 80%;}
}
@media screen and (max-width: 600px) {
#education .pc { display: none;}
#education .edu_inner .title h2{  font-size: 22px; }
#education .edu_inner {  margin: 45px auto 0; }
/* テキスト円 */
#education .edu_inner .edu_box .txt_box { width: 400px; height: 330px; z-index: -2;}
#education .edu_inner .edu_box .txt_box .bg_circle_img { width: 400px; height: 350px; position: absolute; top: -24%; left: 6%;background: #eeead2; border-radius: 20%;}
#education .edu_inner .edu_box .txt_box .txt { width: 280px; position: absolute; top: -3%; left: 22%;}
#education .edu_inner .edu_box .txt_box .txt p { font-size: 16px; line-height: 1.8;}
/* 徳育 */
#education .tokuiku { margin-left: 30%;}
#education .tokuiku  .chara_img{ width: 70px;  top: -10%; left: 80%;}
/* 知育 */
#education .tiiku { margin-left: 29.5%; margin-top: 0%;}
#education .edu_inner .edu_box .tiiku .circle_box .bg_circle{  left: 6%;}
#education .edu_box .tiiku .circle_box .tiiku_tit{  top: 18%;left: 33%; }
#education .tiiku  .chara_img{ width: 60px; top: -15%; left: 85%;}
#education .tiiku  .txt{ margin-left: 2%; margin-top: 3%;}
#education .tiiku br{ display: none;}
/* 体育 */
#education .taiiku { margin-left: 30%; margin-top: 0%;}
#education .taiiku .chara_img{ width: 70px;  top: -10%; left: 80%;}
#education .edu_inner .edu_box .taiiku .txt_box .txt { width: 280px; position: absolute; top: -1%; left: 22%; }
}
@media screen and (max-width: 480px) {
#education .sp { display: none;}
#education .edu_inner .title h2{  font-size: 19px; }
#education .edu_inner {  margin: 35px auto 0; }
/* テキスト円 */
#education .edu_inner .edu_box .txt_box { width: 350px; height: 330px; z-index: -2;}
#education .edu_inner .edu_box .txt_box .bg_circle_img { width: 340px; height: 300px; position: absolute; top: -18%; left: 6%;background: #eeead2; border-radius: 20%;}
#education .edu_inner .edu_box .txt_box .txt { width: 250px; position: absolute; top: -3%; left: 22%;}
#education .edu_inner .edu_box .txt_box .txt p { font-size: 14px; line-height: 1.8;}
/* 徳育 */
#education .tokuiku { margin-left: 33%;}
#education .tokuiku  .chara_img{ width: 70px;  top: -10%; left: 80%;}
/* 知育 */
#education .tiiku { margin-left: 32.5%; margin-top: -4%;}
#education .edu_inner .edu_box .tiiku .circle_box .bg_circle{  left: 6%;}
#education .edu_box .tiiku .circle_box .tiiku_tit{  top: 16%;left: 32%; }
#education .tiiku  .chara_img{ width: 60px; top: -15%; left: 85%;}
#education .tiiku  .txt{ margin-left: 2%; margin-top: 5%;}
#education .tiiku br{ display: none;}
/* 体育 */
#education .taiiku { margin-left: 33%; margin-top: -4%;}
#education .taiiku .chara_img{ width: 70px;  top: -10%; left: 80%;}
#education .edu_inner .edu_box .taiiku .txt_box .txt { width: 250px; position: absolute; top: -1%; left: 22%; }
}
@media screen and (max-width: 400px) {
#education .sp { display: none;}
#education .edu_inner .title h2 span{ display: block; width: 500px; text-align: center; margin: 0 auto;}
/* テキスト円 */
#education .edu_inner .edu_box .txt_box { width: 300px; height: 330px; z-index: -2;}
#education .edu_inner .edu_box .txt_box .bg_circle_img { width: 300px; height: 300px; position: absolute; top: -18%; left: 6%;background: #eeead2; border-radius: 20%;}
#education .edu_inner .edu_box .txt_box .txt { width: 250px; position: absolute; top: 0%; left: 17%;}
/* 徳育 */
#education .tokuiku { margin-left: 35%;}
/* 知育 */
#education .tiiku { margin-left: 34.5%; margin-top: -4%;}
#education .tiiku  .txt{ margin-left: 1%; margin-top: 5%;}
/* 体育 */
#education .taiiku { margin-left: 35%; margin-top: -4%;}
#education .edu_inner .edu_box .taiiku .txt_box .txt { width: 250px; position: absolute; top: 1%; left: 17%; }
}
@media screen and (max-width: 350px) {
#education .sp { display: none;}
#education .edu_inner .title h2 span{ display: block; width: 500px; text-align: center; margin: 0 auto;}
/* テキスト円 */
#education .edu_inner .edu_box .txt_box { width: 280px; height: 330px; z-index: -2;}
#education .edu_inner .edu_box .txt_box .bg_circle_img { width: 280px; height: 300px; position: absolute; top: -18%; left: 6%;background: #eeead2; border-radius: 20%;}
#education .edu_inner .edu_box .txt_box .txt { width: 250px; position: absolute; top: 2%; left: 15%;}
/* 徳育 */
#education .tokuiku { margin-left: 36%;}
/* 知育 */
#education .tiiku { margin-left: 35.5%; margin-top: -4%;}
#education .tiiku  .txt{ margin-left: 1%; margin-top: 4%;}
/* 体育 */
#education .taiiku { margin-left: 36%; margin-top: -4%;}
#education .edu_inner .edu_box .taiiku .txt_box .txt { width: 250px; position: absolute; top: 2%; left: 15%; }
}

/*-------------------------------------------------
	principal
--------------------------------------------------*/
#principal { width: 100%; margin: 0 auto 50px;position: relative; display: flex; align-items: center; justify-content: center;}
#principal .pri_inner { width: 1250px; height: 550px; border-radius: 50px;display: flex; align-items: center;  background: #f4f4f4;}
#principal .pri_inner .nama { width: 363px;}
#principal .pri_inner .nama .img_box { width: 193px; margin: 0 auto;}
#principal .pri_inner .nama h3 { font-size: 24px; line-height: 1.5; margin-top: 25px; text-align: center;}
#principal .pri_inner .txt_box { width: 820px;}
#principal .pri_inner .txt_box span { display: inline-block;}

@media screen and (max-width: 1340px) {
#principal .pri_inner { width: 93.2vw; height: 550px; }
#principal .pri_inner .nama { width: 27vw;}
#principal .pri_inner .nama .img_box { width: 193px; margin: 0 auto;}
#principal .pri_inner .nama h3 { font-size: 24px; line-height: 1.5; margin-top: 25px; text-align: center;}
#principal .pri_inner .txt_box { width: 61.1vw;}
}
@media screen and (max-width: 1000px) {
#principal .pri_inner { width: 93.2vw; height: 650px; display: block;}
#principal .pri_inner .nama { width: 290px; display: flex; align-items: center; margin: 50px auto;}
#principal .pri_inner .nama .img_box { width: 130px; margin-right: 40px;}
#principal .pri_inner .nama h3 { font-size: 24px; line-height: 1.5; margin-top: 0; text-align: left;}
#principal .pri_inner .txt_box { width: 80vw; margin: 30px auto;}
}
@media screen and (max-width: 920px) {
#principal .pri_inner { height: 700px; }
}
@media screen and (max-width: 800px) {
#principal .pri_inner { height: 730px; }
}
@media screen and (max-width: 700px) {
#principal { margin: 0 auto 0px;}
#principal .pri_inner { height: 650px; }
#principal .pri_inner .nama { margin: 30px auto;}
#principal .pri_inner .txt_box { font-size: 16px;}
}
@media screen and (max-width: 620px) {
#principal .pri_inner { height: 700px; }
}
@media screen and (max-width: 540px) {
#principal .pri_inner { height: 750px; }
}
@media screen and (max-width: 500px) {
#principal .pri_inner { height: 800px; }
}
@media screen and (max-width: 480px) {
#principal .pri_inner { width: 85vw; height: 820px; }
#principal .pri_inner .nama { width: 230px;}
#principal .pri_inner .nama .img_box { width: 110px; margin-right: 20px;}
#principal .pri_inner .nama h3 { font-size: 20px;}
#principal .pri_inner .txt_box { width: 70vw; margin: 30px auto;}
}
@media screen and (max-width: 480px) {
#principal .pri_inner { height: 880px; }
}
@media screen and (max-width: 440px) {
#principal .pri_inner { height: 950px; }
}
@media screen and (max-width: 400px) {
#principal .pri_inner { height: 980px; }
}
@media screen and (max-width: 388px) {
#principal .pri_inner { height: 1000px; }
}
@media screen and (max-width: 365px) {
#principal .pri_inner { height: 1060px; }
}
@media screen and (max-width: 342px) {
#principal .pri_inner { height: 1100px; }
}
@media screen and (max-width: 328px) {
#principal .pri_inner { height: 1120px; }
}

/*-------------------------------------------------
	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 { max-width: 1600px; position: relative;}
/* タイトル */
#color_area .color_inner .title_box { margin-top: 70px;display: flex; align-items: center; justify-content: center;}
#color_area .color_inner .title_box .tit_inner { width: 650px; display: flex; align-items: center;}
#color_area .color_inner .title_box .tit_inner .color_girl{ width: 70px; margin-right: 45px;}
#color_area .color_inner .title_box .tit_inner .color_boy{ width: 60px; margin-left: 57px;}
#color_area .color_inner .title_box .tit_inner .sur_l,
#color_area .color_inner .title_box .tit_inner .sur_r{ width: 13px; height: 25px; margin-top: 50px;}
#color_area .color_inner .title_box .tit_inner .title_txt {justify-content: center; text-align: center;}
#color_area .color_inner .title_box .tit_inner h2{ font-size: 30px; line-height: 1.4; margin: 0 23px; padding: 0 4px; background: linear-gradient(transparent 60%,#fff 0%);text-align: center; display: inline-block; margin: 0 auto;}
#color_area .color_inner .title_box .tit_inner h2.under_h2 { margin-top: -2px;} 
/* ネットワーク */
.network { margin-top: 38px;width: 100%; display: flex; align-items: center; justify-content: center;}
.network .net_box { width: 1125px; height: 100%; border-radius: 20px;background: #fff; display: flex; align-items: center; justify-content: center;}
.network .net_box ul{ width: 990px; padding-bottom: 75px; margin: 0 auto; }
.network .net_box ul li{ padding-top: 75px;}
.network .net_box ul li h3{ font-size: 30px;}
.network .net_box ul li p{ font-size: 18px; line-height: 1.9;}
.network .net_box ul li a{ color: #035ca4; text-decoration: underline;}
@media screen and (max-width: 1240px) {
/* ネットワーク */
.network .net_box { width: 90.7vw;}
.network .net_box ul{ width: 79.8vw; padding-bottom: 75px; }
.network .net_box ul li{ padding-top: 75px;}
.network .net_box ul li h3{ font-size: 30px;}
.network .net_box ul li p{ font-size: 18px; width: 79.8vw;}
}
@media screen and (max-width: 900px) {
/* タイトル */
#color_area .color_inner .title_box .tit_inner { width: 550px; display: flex; align-items: center;}
#color_area .color_inner .title_box .tit_inner .color_girl{ width: 55px; margin-right: 35px;}
#color_area .color_inner .title_box .tit_inner .color_boy{ width: 45px; margin-left: 45px;}
#color_area .color_inner .title_box .tit_inner .sur_l,
#color_area .color_inner .title_box .tit_inner .sur_r{ width: 13px; height: 25px; margin-top: 50px;}
#color_area .color_inner .title_box .tit_inner h2{ font-size: 26px; line-height: 1.4; margin: 0 10px; padding: 0 4px;}
}
@media screen and (max-width: 800px) {
/* ネットワーク */
.network .net_box { width: 90.7vw;}
.network .net_box ul{ width: 79.8vw; padding-bottom: 75px; }
.network .net_box ul li{ padding-top: 75px;}
.network .net_box ul li h3{ font-size: 24px;}
.network .net_box ul li p{ font-size: 16px; width: 79.8vw;}
}
@media screen and (max-width: 700px) {
/* タイトル */
#color_area .color_inner .title_box .tit_inner { width: 340px;}
#color_area .color_inner .title_box .tit_inner .color_girl,
#color_area .color_inner .title_box .tit_inner .color_boy { display: none;}
#color_area .color_inner .title_box .tit_inner .sur_l,
#color_area .color_inner .title_box .tit_inner .sur_r{ width: 13px; height: 25px; margin-top: 50px;}
#color_area .color_inner .title_box .tit_inner h2{ font-size: 26px; line-height: 1.4; margin: 0 10px; padding: 0 4px;}
}
@media screen and (max-width: 540px) {
/* タイトル */
#color_area .color_inner .title_box .tit_inner { width: 320px;}
#color_area .color_inner .title_box .tit_inner .sur_l,
#color_area .color_inner .title_box .tit_inner .sur_r{ width: 11px; height: 20px; margin-top: 50px;}
#color_area .color_inner .title_box .tit_inner h2{ font-size: 24px; line-height: 1.4; margin: 0 10px; padding: 0 4px;}
}
@media screen and (max-width: 400px) {
/* タイトル */
#color_area .color_inner .title_box .tit_inner { width: 300px;}
#color_area .color_inner .title_box .tit_inner .sur_l,
#color_area .color_inner .title_box .tit_inner .sur_r{ width: 11px; height: 20px; margin-top: 50px;}
#color_area .color_inner .title_box .tit_inner h2{ font-size: 22px; line-height: 1.4; margin: 0 6px; padding: 0 2px;}
}
@media screen and (max-width: 340px) {
/* タイトル */
#color_area .color_inner .title_box .tit_inner { width: 280px;}
#color_area .color_inner .title_box .tit_inner .sur_l,
#color_area .color_inner .title_box .tit_inner .sur_r{ width: 11px; height: 20px; margin-top: 50px;}
#color_area .color_inner .title_box .tit_inner h2{ font-size: 22px; line-height: 1.4; margin: 0 2px; padding: 0 0px;}
}