@charset "utf-8";
/*~~~~~~layouts CSS~~~~~~*/


/*===== general parameter =====*/


/*** width ***/
.w1200{width: 1200px;}
.w90p{width: 90%;}
.w80p{width: 80%;}
.w70p{width: 70%;}
.w60p{width: 60%;}
.w50p{width: 50%;}
.w40p{width: 40%;}
.w30p{width: 30%;}
.w20p{width: 20%;}
.w10p{width: 10%;}
.w100p_max{max-width: 100%;}
.w90p_max{max-width: 90%;}

/*** margin ***/
.mgn2-5{margin: 2.5%;}
.mgn5{margin: 5%;}
.mgn10{margin: 10%;}
.mgn20{margin: 20%;}

.mgn2-5w{margin: 0 2.5%;}
.mgn5w{margin: 0 5%;}
.mgn10w{margin: 0 10%;}
.mgn20w{margin: 0 20%;}

.mgn2-5h{margin: 2.5% 0;}
.mgn5h{margin: 5% 0;}
.mgn10h{margin: 10% 0;}
.mgn20h{margin: 20% 0;}

.mgn2-5top{margin-top: 2.5%;}
.mgn5top{margin-top: 5%;}
.mgn10top{margin-top: 10%;}
.mgn20top{margin-top: 20%;}

.mgn2-5bttm{margin-bottom: 2.5%;}
.mgn5bttm{margin-bottom: 5%;}
.mgn10bttm{margin-bottom: 10%;}
.mgn20bttm{margin-bottom: 20%;}

.mgn2-5left{margin-left: 2.5%;}
.mgn5left{margin-left: 5%;}
.mgn10left{margin-left: 10%;}
.mgn20left{margin-left: 20%;}

.mgn2-5right{margin-right: 2.5%;}
.mgn5right{margin-right: 5%;}
.mgn10right{margin-right: 10%;}
.mgn20right{margin-right: 20%;}


/*** display ***/
.disp_bl{display: block;}
.disp_in{display: inline-block;}
.disp_fl{display: flex;}


/*** text-color ***/
.col_blue{color: #0B58B7;}
.col_red{color: #EE3E16;}
.col_yellow{color: #E1B602;}


/*** other ***/
.text_c{text-align: center;}

.pos_rel{position: relative;}

.img_centering{
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
}

.centering{
 margin-right: auto;
 margin-left: auto;
}

.font_b{font-weight: bold;}


/*===== firstview =====*/

h1{
 width: 100%;
 max-width: 100%;
}



/*===== campaign =====*/

.campaign-summ{
 background: url(../img/bg_campaign.jpg) no-repeat bottom center;
 background-size: contain;
 padding-bottom: 10%;
}
.campaign__posts{
 background: #FFF;
 padding: 5%;
 box-shadow: 0 0 5px 0px rgb(0 0 0 / 25%);
}
.campaign__posts h3{
 vertical-align: middle;
 line-height: 1;
}
.campaign__posts h3:before {
 content: "";
 display: inline-block;
 vertical-align: middle;
 margin-right: 1%;
 width: 53px;
 height: 60px;
 background: url(../img/icon_float01.png);
 background-size: 100%;
}
.campaign__posts__item{
 border-bottom: solid 1px #0B58B7;
 padding-bottom: 2.5%;
}

.benefit {
 background: url(../img/bg_benefits.jpg) no-repeat top center;
 padding: 5% 0 7%;
}
.benefit__txtBox{
 border: solid 1px #F3C400;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}
.benefit__txtBox dt{
 background: #F3C400;
 font-size: 1.2em;
 padding: 1%;
 line-height: 1;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}
.benefit__txtBox dd{
 background: #FFF;
 font-size: 1.1em;
 padding: 2.5%;
}

.covid19 ul{
 justify-content: center;
 flex-wrap: wrap;
}
.covid19__ttl {
 background: #DBE7f7;
 box-shadow: 5px 5px 0 0 #0B58B7;
}
 

.form-btn-area {
 background: #EE3E16;
 justify-content: center;
 position: fixed;
 bottom: 0;
 width: 100%;
 z-index: 100;
}
.form-btn-area p{
 line-height: 1;
}
.form-btn-area__txt{
 color: #FFF;
 font-size: 1.2em;
}
.form-btn-area__btn{
 width: 360px;
}
.form-btn-area__btn a {
 line-height: 1;
 background: #FFF;
}


.recom{
 background: url(../img/bg_recom.jpg);
 padding-top: 2.5%;
}
.recom__list {
 background: #FFF;
 padding: 5%;
 border-radius: 30px;
}
.recom__list:before {
 display: inline-block;
 content: "";
 border: solid 15px transparent;
 border-bottom: solid 15px #FFF;
 position: absolute;
 top: -30px;
 left: 50%;
 transform: translateX(-50%);
}


.point{
 padding: 5% 0;
 background: url(../img/bg_point.jpg) no-repeat bottom left;
}
.point__list{
 flex-wrap: wrap;
 justify-content: center;
}
.point__item__img{
 background: #d3e1f2;
 padding: 2.5%;
}
.point__item__txt{
 background: #d3e1f2;
 padding: 2.5% 5%;
}


.voice {
 background: url(../img/bg_voice.jpg) no-repeat bottom left;
 background-size: contain;
 padding-bottom: 10%;
}
.voice h2{
 background: #0739AC;
}
.voice__item{
 background: #FFF;
 border: solid 3px #0B58B7;
 padding: 2.5%;
}
.voice__item__field h3{
 background: #333;
 color: #FFF;
 font-size: 1.1em;
}
.voice__item__img img{
 object-fit: cover;
}


.flow{
 background: url(../img/bg_recom.jpg);
 padding: 5% 0 0;
 overflow: hidden;
}
.flow-inner{
 background: #FEFBEE;
 padding: 5%;
 border-radius: 10px;
}
.flow__item{
 align-items: center;
}
.flow__item__field h4{
 font-size: 1.4em;
}
.flow__item__field__txt{
 font-size: 1.1em;
}


.faq{
 padding-bottom: 5%;
 background: url(../img/bg_faq.jpg) no-repeat bottom center;
 background-size: contain;
}
.faq__item__question{
 background: url(../img/arrow02.png) no-repeat top 50% right 2% #0B58B7;
 padding: 1%;
 color: #FFF;
 font-size: 1.4em;
}
.faq__item__question.active{
 background: url(../img/arrow01.png) no-repeat top 50% right 2% #0B58B7;
}
.faq__item__question span,
.faq__item__answer span{
 margin-right: 10px;
}
.faq__item__answer{
 display: none;
 padding: 2.5%;
 font-size: 1.2em;
}


#form .wpcf7 {
 width: 1200px;
 max-width: 90%;
 margin: 0 auto;
}
#form .form__item {
 border-top: solid 1px #DDD;
 padding: 2.5%;
}
#form .form__item.grade {
 border-bottom: solid 1px #DDD;
}
#form .gradeitem {
 margin-bottom: 1%;
}
#form .submit_box input[type='submit'] {
 border: none;
 background: #0B58B7;
 width: 300px;
 color: #FFF;
 font-size: 1.2em;
 font-weight: bold;
 line-height: 1;
 padding: 2.5%;
 border-radius: 10px;
}
#form .required:before,
#form .arbitrary:before{
 display: inline-block;
 font-size: 0.7em;
 color: #FFF;
 line-height: 1;
 padding: 3px 5px;
 margin-right: 10px;
}
#form .required:before{
 content: "必須";
 background: #F00;
}
#form .arbitrary:before{
 content: "任意";
 background: #CCC;
}
#form .form__caution{
 margin-top: 5px;
 font-size: 0.7em;
}


.footInner{
 background:#337AB7;
 padding: 2.5% 0;
}
.footInner__toHOME a{
 width: 348px;
 height: 60px;
}
.address__schoolname,
.address__add{
 font-style: normal;
 color: #FFF;
}
.address__add{
 margin-bottom: 10px;
}
footer small{
 color:#337AB7;
 font-size: 0.8em;
 padding: 1%;
}


#page_top {
 position: fixed;
 width: 70px;
 height: 70px;
 bottom: 112px;
 right: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #333;
 color: #FFF;
 font-weight: bold;
 border-radius: 100%;
 transition: all .5s;
}
#page_top:hover {
 background: #0B58B7;
}
.formIframe iframe{
 max-width: 90%;
 margin: 0 auto;
}


/*==========【Media Query】 1200px～ ==========*/
@media screen and (min-width:1200px){
 .pc_wide_only{
  display: block;
 }
 .pc_wide_none{
  display: none;
 }
 h1{
  width: 1200px;
  height: 640px;
 }
 h1 img{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
 }
 .point__item{
  max-width: 390px;
  margin-left: 1%;
 }
 .flow h2{
  width: 1200px;
  height: 64px;
 }
 .flow h2 img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
 }
 .address__itemList{
  justify-content: center;
 }
 .address__item{
  margin-left: 10px;
 }
 .address__item.kiryu{
  margin-left: 0;
 }
}

/*==========【Media Query】 ～1199px ==========*/
@media screen and (max-width:1199px){
 .pc_wide_only{
  display: none;
 }
 h1,h1 img{
  width: 100%;
  height: auto;
 }
 .campaign__img{
  width: 84%;
 }
 .recom h2{
  width: 53.4%;
 }
 .point h2{
  width: 80.3%;
 }
 .point__item{
  width: 48%;
 }
 .point__item:nth-child(2),
 .point__item:nth-child(4){
  margin-left: 1%;
 }
 .point__item img{
  width: 100%;
  height: auto;
 }
 .benefit__img{
  width: 84.8%;
 }
 .flow h2{
  width: 55.8%;
 }
 .flow h2 img{
  width: 100%;
 }
 .faq h2{
  width: 70.5%;
 }
 #form h2{
  width: 60%;
 }
 .address__itemList{
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 554px;
 }
 .address__item{
  width: 274px;
  margin-bottom: 10px;
 }
 .address__item.ashikaga,
 .address__item.maebashi{
  margin-left: 1%;
 }
 .address__item.ashikaga,
 .address__item.kiryu{
  margin-bottom: 5%;
 }
 .address__add{
  font-size: 12px;
 }
}

/*==========【Media Query】 768px～ ==========*/

@media print,screen and (min-width:768px){
 .sp_only{
  display: none;
 }
 
 .campaign__posts__item{
  flex-direction: row;
  align-items: center;
 }
 .campaign__posts__item dt{
  width: 20%;
 }
 .campaign__posts__item dd{
  width: 80%;
 }
 .campaign__posts h3{
  font-size: 2.0em;
 }
 .campaign__posts h3:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 1%;
  width: 53px;
  height: 60px;
  background: url(../img/icon_float01.png);
  background-size: 100%;
 }
 .campaign__posts__subttl{
  font-size: 1.5em;
 }
 .campaign__posts__item dt:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 5%;
  width: 33px;
  height: 33px;
  background: url(../img/icon_float02.png);
  background-size: 100%;
 }
 
 .covid19__ttl {
  padding: 2.5%;
  font-size: 1.6em;
  margin-bottom: 2.5%;
  letter-spacing: 0.05em;
 }
 .covid19 li{
  width: calc((100% - 50px) / 6);
  margin-right: 10px;
 }
 .covid19 li:last-child{
  margin-right: 0;
 }
 
 .form-btn-area__btn a {
  padding: 20px;
  font-size: 1.4em;
  border-radius: 31px;
 }
 .form-btn-area{
  justify-content: center;
  align-items: center;
  padding: 20px;
 }
 .form-btn-area__txt{
  margin-right: 2.5%;
 }
 
 .recom__list__item{
  font-size: 1.8em;
  line-height: 1.5;
 }
 .recom__after{
  height: 180px;
  overflow: hidden;
 }
 
 .point__list{
  /*width: calc(780px + 1%);*/
  width: 1200px;
 }
 .point__item:first-child{
  margin-left: 0;
 }
 .point__item__txt{
  min-height: 120px;
 }
 
 .voice__item{
  justify-content: space-between;
 }
 .voice__item__field{
  width: calc(100% - 270px);
 }
 .voice__item__field h3{
  padding: 1%;
 }
 
 
 .flow h3:before,
 .flow h3:after {
  content: "";
  display: inline-block;
  height: 3px;
  vertical-align: middle;
  margin-bottom: 20px;
 }
 .flow h3:before {
  margin-right: 20px;
 }
 .flow h3:after {
  margin-left: 20px;
 }
 .flow h3:first-of-type:before,
 .flow h3:first-of-type:after {
  width: calc((100% - 488px) / 2);
  background: #EE3E16;
 }
 .flow h3:last-of-type:before,
 .flow h3:last-of-type:after {
  width: calc((100% - 351px) / 2);
  background: #E1B602;
 }
 .flow__item__num,
 .flow__item__field{
  margin-right: 30px;
 }
 .flow__item__field{
  width:580px;
 }
 .flow__after img{
  width: 100%;
 }
 
 .faq__item__question{
  cursor: pointer;
 }
 
 #form .form__item > dt{
  width: 30%;
 }
 #form .form__item > dd{
  width: 70%;
 }
 
 footer{
  margin-bottom: 102px;
 }
 address{
  margin: 1.5% 0;
 }
}


/*==========【Media Query】 ～767px ==========*/

@media print,screen and (max-width:767px){
 .pc_only{
  display: none;
 }
 img{
  width: 100%;
 }
 
 .campaign__posts h3 {
  font-size: 1.6em;
 }
 .campaign__posts h3:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 1%;
  width: 26px;
  height: 30px;
  background: url(../img/icon_float01.png);
  background-size: 100%;
 }
 .campaign__posts__subttl{
  font-size: 1.4em;
 }
 .campaign__posts__item{
  flex-direction: column;
 }
 .campaign__posts__item dd{
  text-align: center;
 }
 .campaign__posts__item dt{
  margin-bottom: 1%;
 }
 .campaign__posts__item dt:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 2%;
  width: 16px;
  height: 16px;
  background: url(../img/icon_float02.png);
  background-size: 100%;
 }
 
 .covid19__ttl {
  padding: 2.5%;
  font-size: 1.2em;
  margin-bottom: 5%;
  letter-spacing: 0.05em;
 }
 .covid19 li{
  width: calc((100% - 20px) / 4);
  margin-right: 10px;
  margin-bottom: 10px;
 }
 .covid19 li:nth-child(3),
 .covid19 li:last-child{
  margin-right: 0;
 }
 
 .recom h2{
  width: 50%;
  margin-bottom: 7.5%;
 }
 .recom__list{
  margin-bottom: 2.5%;
 }
 .recom__list__item{
  font-size: 1.4em;
 }
 .recom__after:before {
  content: "";
  display: block;
  padding-top: 9%;
  position: relative;
 }
 .recom__after img {
  width: 100%;
 }
 
 .point{
  background-size: 35%;
 }
 .point__item{
  width: 300px;
 }
 .point__item__img img{
  width: 180px;
  height: 115px;
 }
 .point h2{
  width: 78%;
 }
 
 .voice__item__img {
  margin-right: 10px;
 }
 .voice__item__img img{
  width: 125px;
  height: 125px;
  margin: 0 auto;
 }
 .voice__item__field{
  width: calc(100% - 135px);
 }
 .voice__item__field h3{
  padding: 2.5%;
 }


 .flow h3{
  margin: 0 auto 5%;
 }
 .flow h3:first-of-type{
  width: 84%;
 }
 .flow h3:last-of-type{
  width: 60%;
 }
 .flow__item__num{
  width: 75px;
  height: 75px;
 }
 .flow__item__field__img{
  width: 70px;
  height: auto;
 }
 .flow__item__field{
  width: calc(100% - 165px);
  margin: 0 10px;
 }
 
 .faq__item__question{
  padding: 2.5%;
  background-size: 18px;
 }
 .faq__item__question.active{
  background-size: 18px;
 }
 .faq__item__question span,
 .faq__item__answer span {
  display: inline-block;
  vertical-align: middle;
 }
 .faq__item__question span img,
 .faq__item__answer span img{
  display: block;
 }
 .faq__item__question__icon{
  width: 27px;
  height: auto;
 }
 .faq__item__answer__icon{
  width: 21px;
  height: auto;
 }
 
 
 .form-btn-area{
  flex-direction: column;
  padding: 10px 0;
 }
 .form-btn-area__btn a {
  padding: 10px;
  font-size: 1.2em;
  border-radius: 18px;
 }
 .form-btn-area__txt{
  text-align: center;
  margin-bottom: 10px;
 }
 
 .form__item{
  flex-direction: column;
 }
 .form-btn-area__btn{
  margin: 0 auto;
 }
 .form__item > dt{
  margin-bottom: 2.5%;
 }
 
 footer{
  margin-bottom: 78px;
 }
 .footInner__logo img,
 .address__tel img,
 .footInner__toHOME img{
  width: auto;
  max-width: 100%;
 }
 address{
  margin: 2.5% 0;
 }
 .address__item{
  width: 49%;
  margin-bottom: 10px;
 }
 .address__item.ashikaga,
 .address__item.maebashi{
  margin-left: 1%;
 }
 .address__item.ashikaga,
 .address__item.kiryu{
  margin-bottom: 5%;
 }
 .address__add{
  font-size: 12px;
 }
}


/*==========【Media Query】 ～575px ==========*/

@media print,screen and (max-width:575px){

 .flow__item{
  align-items: flex-start;
 }
 .flow__item__field{
  width: calc(100% - 60px);
  margin: 0 0 0 10px;
 }
 .flow__item__num {
   width: 50px;
   height: 50px;
 }
 .flow__item__field__img{
  display: none;
 }
 .faq__item__question{
  font-size: 1.2em;
 }
 .faq__item__question,
 .faq__item__question.active {
  padding: 2.5% 2.5% 23px;
  background-position: bottom 10% left 50%;
 }
 .footInner__logo img{
  width: 203px;
 }
 .address__tel img{
  width: 132px;
 }
 .footInner__toHOME a{
  width: 174px;
  height: 30px;
 }
}