@charset 'utf-8';
/* ==========================================

  教室紹介

========================================== */
/*---------------- ▽sub main MV用▽ ----------------*/
.sub_mv{
  width: 100%;
  height: 270px;
  position: relative;
  background: url(image/2023_school_header_img.JPG);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sub_mv .sub_mv_content{
  width: 386px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.sub_mv .sub_mv_content img{
  width: 100%;
}
@media screen and (max-width: 760px){
  .sub_mv{
    height: 21.09vw;
  }
  .sub_mv .sub_mv_content{
    width: 37.81%;
  }
}
/*---------------- △sub main MV枠用△ ----------------*/
.main_contents .border_kakomi{
  -moz-border-image: url(image/border_kakomi.png) 66 round;
  -webkit-border-image: url(image/border_kakomi.png) 66 round;
  -ms-border-image: url(image/border_kakomi.png) 66 round;
  border-image: url(image/border_kakomi.png) 66 round;
  border-width: 30px;
  box-sizing: border-box;
}
.box1_wrap{
  width: 996px;
  margin: 0 auto;
  background: url(../common/images/bg_suisai_pink.png);
}
.box2_wrap{
  width: 996px;
  margin: 0 auto;
  background: url(../common/images/bg_suisai_history.png);
}
.box3_wrap{
  width: 996px;
  margin: 0 auto;
  background: url(../common/images/bg_suisai_goal.png);
}
.box4_wrap{
  width: 996px;
  margin: 0 auto;
  background: url(../common/images/bg_suisai_yellow.png);
}
.box5_wrap{
  width: 996px;
  margin: 0 auto;
  background: url(../common/images/bg_suisai_time.png);
}
.headertop:after {
  content: "";
  display: block;
  clear: both;
}

.usuki {
 float: left;
 width: 50%;
     }

.menu {
  float: left;
  width: 50%;
}

.menu ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li a {
 display: block;
 padding: 5px;
 color: #603813;
 font-size: 20px;
 text-decoration: none;
}

.menu ul:after {
  content: "";
  display: block;
  clear: both;
}

.menu li {
  float: left;
}

.menu li a:hover {
  background-color: #
}

.accessjoboffer:after {
  content: "";
  display: block;
             }

.headerinfo {
  padding-top: 27px;
  padding-right: 152px;
  line-height: 39px;
}

.joboffer {
  display: block;
  border-radius: 8px;
  padding: 0 13px;
  margin: 4px;
  color: #603813;
  font-size: 22px;
  background-color: #a5d264;
}

.access {
  display: block;
  border-radius: 8px;
  padding: 0 13px;
  margin: 4px;
  color: #603813;
  font-size: 22px;
  background-color: #fac766;
}

.access a  {
 display: block;
 text-decoration: none;
}

.joboffer a {
  display: block;
  text-decoration: none;
}


.headerphone {
 color: #603813;
 font-size: 35px;
 display: block;
 text-decoration: none;
}


.boxA {
  clear: both;
}

.usuki {
  float: left;
}

.headerinfo {
  float: right;
}

.accessjoboffer {
  clear: both;
}

.access {
  float: left;
}

.joboffer {
  float: left;
}


#menu {
  display: none;
}

#menubtn {
 background-color: #;
 position: absolute;
 top: 47px;
 right: 90px;
 border: solid 0;
 background-color: initial;
 cursor: pointer;
}

#menubtn span {
  display: inline-block;
  text-indent: -9999px;
}

#menubtn i {
  color: #603813;
  font-size: 35px;
}

#menubtn:focus {
  outline: none;
}

.main_mv {
  margin-bottom: 70px;
}

.box1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 3.13%;
  /* padding: 15px 0 30px 0; */
  border: solid;
  background-image: url(image/school_illu1.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 64px;
}

.box1.illu2 {
  background-image: url(image/school_illu2.png);
}

.box1.illu3 {
  background-image: url(image/school_illu3.png);
}

.box1.illu4 {
  background-image: url(image/school_illu4.png);
}

.box1.illu5{
  background-image: url(image/school_illu5.png);
  margin-bottom: 7.03%;
}

.lesson {
  padding-left: 82px;
  display: flex;
  flex-wrap: wrap;
  background-image: url(image/school_flagrod16.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 66px;
}
.box2_wrap .lesson{
  background-image: url(image/school_flagrod15.png);
}
.box3_wrap .lesson{
  background-image: url(image/school_flagrod14.png);
}
.box4_wrap .lesson{
  background-image: url(image/school_flagrod13.png);
}
.box5_wrap .lesson{
  background-image: url(image/school_flagrod12.png);
}

.flag img {
  width: 16px;
  height: 290px;
padding-left: 70px;
}
.box1-1 {
  width: 46%;
  display: flex;
  flex-wrap: wrap;
  background-image: url(image/member_bg_gakkou.png);
  background-size:190px;
  background-repeat: no-repeat;
  background-position-y: bottom;
}

.box1-1.blue {
  background-image: url(image/member_bg_blue.png);
  background-position: bottom 0px left 10px;
  background-size: 155px;
}

.lesson-image {
  width: 428px;
  margin: 84px 60px 0px 0px;
}
.lesson-image img {
  width: 100%;
}

.subject {
  background-size: contain;
  margin-top: 20px;
  font-size: 2.222em;
  background-image: url(image/school_flag11.png);
  background-repeat: no-repeat;
  padding: 10px 30px 10px 20px;
  color: #ffffff;
}
.subject.pic2 {
  background-image: url(image/school_flag10.png);
}
.subject.pic3 {
  background-image: url(image/school_flag9.png);
}
.subject.pic4 {
  background-image: url(image/2025_school_flag8.png);
  
}
.subject.pic5 {
  background-image: url(image/school_flag7.png);
}
.teacher {
  font-size: 1.111em;
  padding: 6% 0;
}
.month {
  font-size: 1.111em;
  padding: 6% 0;
}
.age {
    font-size: 1.111em;
  }
.age span {
  color: #ffffff;
  background-color: #FC6A8A;
  padding: 0.5vw 1vw;
  line-height: 3em;
}
.age.color2 span {
  background-color: #8ABA5B;
}

.age.color3 span {
  background-color: #F7B848;
}
.age.color4 span {
  background-color: #EF6363;
}
.classwork-chi {
  font-weight: 500;
  padding-left: 15px;
}
.classwork ul {
  line-height: 2em;
  }

.classwork li {
  font-size: 1.111em;
}
.box2 {
  max-width: 996px;
  width: 77.81%;
  margin: 0 auto;
 border: solid;
 border-radius: 20px;
 color: #c69c6d;
 padding-bottom: 45px;
}
.school_book {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;

}
.picture-book {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.books {
  font-size: 40px;
  font-weight: 500;
  padding-left: 95px;
  padding-top: 20px;
  color: #603813;
}
.classteacher {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3em;
  padding-left: 80px;
  padding-top: 20px;
  color: #603813;
}
.school_book img {
  width: 120px;
  position: relative;
  top: -30px;
  left: 80px;
}
.picbook-img img {
  width: 256px;
  padding: 5px;
}

/* 全体の横幅 */
.main_contents {
  color: #603813;
  margin: 36px auto 0;
}

.teacher br{
  display: none;
}
@media screen and (max-width: 1000px){
  .box1_wrap,
  .box2_wrap,
  .box3_wrap,
  .box4_wrap,
  .box5_wrap{
    width: 90%;
  }
  .lesson{
    padding-left: 1.6vw;
    background-position: left;
  }
  .box1{
    background-size: 8vw;
  }
  .lesson-image{
    width: 40vw;
    margin: 10vw 0 0;
  }
  .box2{
    width: 90%;
    box-sizing: border-box;
    padding-bottom: 5.63vw;
    border-radius: 2.5vw;
  }
  .school_book img{
    width: 15vw;
    position: relative;
    top: -3.75vw;
    left: 5vw;
  }
  .books{
    font-size: 2.222em;
    padding-left: 11.88vw;
    padding-top: 2.5vw;
  }
  .classteacher{
    font-size: 1.111em;
    line-height: 1.3em;
    padding-left: 8vw;
    padding-top: 0;
  }
  .classteacher br{
    display: none;
  }
  .picture-book{
    width: 90%;
  }
  .picbook-img img{
    width: 24vw;
    padding: 0.63vw;
  }
}
@media screen and (max-width: 560px){
  .box1{
    display: block;
    background-size: 14vw;
  }
  .lesson{
    width: 100%;
    margin: 0 auto 5%;
  }
  .lesson-image{
    width: 90%;
    margin: 0 auto;
  }
  .subject{
    margin-top: 2vw;
    font-size: 5vw;
    padding: 1.43vw 5.36vw 1.43vw 3.57vw;
  }
  .teacher{
    font-size: 4vw;
  }
  .age{
    font-size: 3vw;
  }
  .books{
    font-size: 6vw;
    padding-left: 6vw;
  }
  .school_book img{
    width: 17vw;
  }
}