@charset "UTF-8";
/*********************
Theme Name:NextEC
Theme URI:
Description:
Author: GKLINE
Author URI:
Version: 1
Tags: responsive-layout
*********************/
body {
  margin: 0;
  padding: 60px 0 0;
  font-family:  "Zen Kaku Gothic New",  "Helvetica neue", Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ＭＳ Ｐゴシック",sans-serif;
  line-height: 1.6;
  color: #002137;
}

.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.aoboshi-one-regular {
  font-family: "Aoboshi One", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 90px;
  color: #ABD0FE;
  line-height: 1;
  margin-bottom: 0.8rem;
}
@media screen and (min-width: 768px) {
.aoboshi-one-regular {
  margin-right: 0.5rem;
}
}
p, h1, h2, h3, h4, h5, ul, li, ol, img, dl, dt, dd, a, table, td, th, figure, span, i,input,textarea {
  margin: 0;
  padding: 0;
  font-size: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  }
 h2, h3, h4, h5{
  /* font-weight: 700; */
  font-style: normal;
}
h2{font-size: 1.8rem;
  line-height: 1.2;
  position: relative;
  display: inline-block; 
  padding-bottom: 0.8rem; 
}
h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px; 
  background: linear-gradient(to right,#0220A8 0%, #2A5ADB 50%, #5AC8F5 100%);
  transform: skewX(-40deg);
  transform-origin: 100% 0;
}

h3{
  font-size: 1.25em;
  line-height: 1.2;
  letter-spacing: -0.05em;
}
h4{
  font-size: 1.15em;
  color: #2E62DD;
  position: relative;
  margin-bottom: 1.4rem;
}
h4::before, h4::after{
  content: url(img/img_subttl.png);
  vertical-align: middle;

}
.sec_ttl{
  margin-bottom: 2.3rem;
  text-align: center;
}
  .sec_lead{
  font-size: 1.15em;
  text-align: center;
}
.sec_s{
 font-size: 0.9em;
 text-align: center;
}
@media screen and (min-width: 768px) {
  h2{font-size: 2.25em;
    line-height: 1.1;
  }
  h3{
  font-size: 1.5em;
  line-height: 1.2;
  }
  h4{
  font-size: 1.5em;

  }
  .sec_lead{
  padding: 0 3.5rem;
  line-height: 1.9;
  }
}
@media screen and (max-width: 428px) {
  h2{
    font-size: 1.5em;
  }
  h4{
    font-size: 1em;
  }
}
div {
  font-size: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a:link, a:visited {
  text-decoration: none;
  color: #fff;
  z-index: 101;
}

ul {
  list-style: none;
}

img {
  border: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.text-l {
  text-align: left;
}

.text-r {
  text-align: right;
}

.text-c {
  text-align: center;
}
.no_br_sp{display: none;}
.no_br_pc{display: block;}
@media screen and (min-width: 768px){
  .no_br_sp{display: block;}
  .no_br_pc{display: none;}

}
.text_b18{
  font-weight: bold;
  text-align: center;
  font-size:  1.15em;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  margin: 0 auto;
}

.text_b18::before {
  position: absolute;
    left: -1.2rem;
    top: 0;
    content: "";
    width: 2px;
    height: 100%;
    background: #002137;
    border-radius: 3px;
    transform: rotate(-40deg);
}
.text_b18::after {
     position: absolute;
    content: "";
    right: -1.2rem;
    top: 0;
    width: 2px;
    height: 100%;
    background:  #002137;
    border-radius: 3px;
    transform: rotate(40deg);
}


.flex {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.justify-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.justify-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.justify-space {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.align-start {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.align-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.align-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.dir_column{
    -webkit-flex-direction: column;
        flex-direction: column;
}

.wrap {
  width: 94%;
  margin-right: auto;
  margin-left: auto;
}

/* ボタン */
button.btn,
input.wpcf7-submit.btn2 {
  width: 240px;
  height: 58px;
  border: none;
  border-radius: 29px;
  color: #fff;
  cursor: pointer;
  font-size: 1em;
  background: linear-gradient(
    90deg,
    #0220a8 0%,
    #2a5adb 20%,
    #5ac8f5 50%,
    #5ac8f5 50%,
    #2a5adb 80%,
    #0220a8 100%
  );
  background-size: 200% 100%;
  background-position: 0% 0%;
  transition: background-position 0.8s ease-in-out;
}
button.btn:hover,
input.wpcf7-submit.btn2:hover {
  background-position: 100% 0%;
}

.c_btn{
  margin: 0 auto;
}

.wpcf7-spinner{display: none;}
.wpcf7-submit {border: none;}
input{background: none;}
.wpcf7-not-valid-tip{line-height: 1.5;}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output{
  color: #D41F1F;
  border-color: #D41F1F;
  text-align: center;
font-weight: bold;}

  .m10 {
  margin: 10px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.p10 {
  padding: 10px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}
.bk_gra1{
  background: linear-gradient(to bottom right, #FFFFFF, #E8F0FF);
  z-index: 0;
}
.bk_gra2{
  background: linear-gradient(to bottom left, #FFFFFF, #E8F0FF);
  z-index: 0;
}
.wrapper{
  width: 96%;
  margin: 0 auto;
  padding: 0 0.5rem;
}
@media screen and (min-width: 960px) {
  .wrapper{
    max-width: 1000px;
    padding: 0 70px;
  }
  
}
section{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media screen and (min-width: 768px) {
section{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
 #rinen
 {
  scroll-margin-top: 100px;
} 
#curriculum,
#style,
#price,
#faq {
  scroll-margin-top: 20px;
} 
/* header */
header{
  position: fixed;
  width: 100%;
  height: 60px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 16px 0 16px 26px;
  /* overflow: hidden; */
  background: linear-gradient(to right,#0220A8 0%, #2A5ADB 50%, #5AC8F5 100%);
  z-index: 400;
  margin-top: -60px;
  display: flex;
}
.hamburger {
  position: fixed;
  top: 11px;
  right: 20px;
  width: 30px;
  cursor: pointer;
  z-index: 404; 
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: #fff;
  margin: 8px 0;
  transition: 0.4s;
}
.nav-menu_sp {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top right,#0220A8 0%, #2A5ADB 50%, #5AC8F5 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  padding: 40px 20px;
  box-sizing: border-box;
  z-index: 403;
}
.nav-menu_sp ul{
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  width: 100%;
  display: flex;            
  flex-direction: column;  
  justify-content: center;
  align-items: center; 
  margin-left:0;
  column-gap: 0;
  row-gap: 26px;
}
.nav-menu_sp li {
  text-align: center;
}
.nav-menu_sp.open {
  opacity: 1;
  pointer-events: auto;
}
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
} 
.nav-menu_pc{
  display: none;
  z-index: 402;
}
.nav-logo{
  margin-top: 2rem;
  width: 200px;
}
@media screen and (min-width: 768px) {
    .nav-menu_pc{
   display: block;
    }
    .nav-menu_pc ul{
    margin-left: 4rem;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
    column-gap: 26px;
  }
  .hamburger{
    opacity: 0;
  }
  .hamburger.active {
    opacity: 1;
  }
}
/* 白い下線 */
.nav-item a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color:#fff;;
}
.nav-item a:not(.nav-logo)::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.nav-item a:hover::after {
  transform: scale(1, 1);
}
/* メインビジュアル */
.hero{
  width: 100%;
  min-height: 50vh;
  background: url(img/img_mv.png) right 0 no-repeat;
  background-size: 90%;
  overflow: hidden;
  z-index: 1;
}
.hero .wrapper{
  position: relative;
  /* top: 80%; */
  -webkit-transform: translateY(10%); /* Safari用 */
  transform: translateY(10%);
  }
h1 img{width: 100px}
.hero_wrap{
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  row-gap: 0.5rem;
}
.hero p.hero_copy{
  font-size: 1.8em;
  font-weight: 700;
  font-style: normal;
  display: inline;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.7);
  -webkit-box-decoration-break: clone;
	box-decoration-break: clone;
  padding: 0 1rem;
}
.hero p.hero_txt{
  line-height: 1.6;
  display: inline;
  background: rgba(255, 255, 255, 0.7);
  -webkit-box-decoration-break: clone;
	box-decoration-break: clone;
   padding: 0 0.6rem;
}
 .hero .btn{
  margin-top: 0.5rem;
 }
 @media screen and (max-width: 428px) {
.hero{
  min-height: 60vh;
  background: url(img/img_mv_sp.png) right 0 no-repeat;
  background-size: 100%;
}
.hero .wrapper{
  -webkit-transform: translateY(35%); /* Safari用 */
  transform: translateY(35%);
  }
  .hero p.hero_copy{
  font-size: 1.8em;
}
 }
@media screen and (min-width: 960px) {
  .hero{
    height: 45vh;
    background: url(img/img_mv.png) right 0 no-repeat;
    background-size: 80%;
  }
  .hero .wrapper{
  top: 40%;
  -webkit-transform: translateY(-40%); /* Safari用 */
  transform: translateY(-40%);
  }
  .hero_wrap{
    row-gap: 1rem;
  }
  .hero .wrapper p.hero_copy{
    font-size: 2.4em;
  }
  .hero br.br_non{
    display: none;
  }
}

/* スクールの理念 */
.rinen{
  margin: 2.3rem 0;
}
.rinen .rinen_item{
  width: 100%;
  text-align: center;
  margin-bottom: 1.5rem;
}
.rinen .rinen_item img{
  width:60%;
  margin: 0 auto;
}
.rinen .rinen_item p{
  margin-top: 0.8rem;
}

@media screen and (min-width: 768px) {
  .rinen{
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .rinen .rinen_item{
    width: 30%;
    margin-bottom: 0;
  }
  }

/* カリキュラム */
#curriculum .cur_wrap{
  margin-bottom: 4rem;
}
#curriculum .cur_item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#curriculum .cur_number {
  margin-bottom: 1rem;
}

#curriculum .cur_item img {
  width: 40%;
  margin: 0 0 1rem 1rem;
}

#curriculum .cur_detail{
  width: 100%;
}
#curriculum .cur_item .cur_detail h3{
  display: inline;
  -webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
#curriculum .cur_detail .b_line{
  border-bottom: 5px solid #ABD0FE;
}
#curriculum .cur_detail p{
  padding: 1rem 0 0.8rem;
}
@media screen and (min-width: 768px) {
   #curriculum .cur_item {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    text-align: left;
  }

  #curriculum .cur_number {
    margin: 0;
    order: 1;
  }
  #curriculum .cur_item img {
    width: 18%;
    margin: 0;
    order: 3;
  }
  #curriculum .cur_detail {
    width: auto;
    order: 2;
    margin: 0 1rem;
  }
}
/* 成長ステップ */
#curriculum .step_wrap{
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  row-gap: 1.2rem;
  margin: 0 0 1.6rem;
  text-align: center;
}
#curriculum .step_line{
  background-image: linear-gradient(to bottom, #2E62DD 90%, transparent 50%);
  background-size: 2px 1450px;   
  background-repeat: no-repeat;
  background-position:  center;
}
#curriculum .step_item{
  position: relative;
  width: 80%;
  padding: 1rem 0.8rem;
  margin: 0 auto;
 }
 #curriculum .step_item p{
  position: relative;
  line-height: 1.3;
  z-index: 1;
}
.text_b{
  font-size: 1.3em;
  color: #2E62DD;
  font-weight: bold;
}
#curriculum .step_item .step_bg{
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
}
#curriculum .step_item .step_bg1:after,
#curriculum .step_item .step_bg2:after,
#curriculum .step_item .step_bg3:after,
#curriculum .step_item .step_bg4:after,
#curriculum .step_item .step_bg5:after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  left:2%;
  top: 0%;
  transform: skewX(-8deg);
  transform-origin: 100% 0;
  background: #fff;
}
#curriculum .step_item .step_bg1:after {
box-shadow:6px 6px 0px 0px rgba(220, 232, 255, 1);
}
#curriculum .step_item .step_bg2:after {
box-shadow:6px 6px 0px 0px rgba(185, 209, 255, 1);
}
#curriculum .step_item .step_bg3:after {
box-shadow:6px 6px 0px 0px rgba(168, 198, 255, 1);
}
#curriculum .step_item .step_bg4:after {
box-shadow:6px 6px 0px 0px rgba(138, 178, 255, 1);
}
#curriculum .step_item .step_bg5:after {
box-shadow:6px 6px 0px 0px rgba(101, 153, 255, 1);
}

@media screen and (min-width: 768px) {
  #curriculum .step_wrap{
    margin: 3rem 0;
    -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  #curriculum .step_line{
  background-image: linear-gradient(to right, #2E62DD 50%, transparent 50%);
  background-size: 1450px 2px;   
  background-position: left 10px center;
}
  #curriculum .step_item{
    width: 18%;
    padding: 1rem 0;
  }
  .text_b{
    margin-bottom: 0.8rem;}
    #curriculum .step_item .step_bg1:after,
    #curriculum .step_item .step_bg2:after,
    #curriculum .step_item .step_bg3:after,
    #curriculum .step_item .step_bg4:after,
    #curriculum .step_item .step_bg5:after {
      left: 6%;
    }
}

/* 受講スタイル */
#style .style_item{
  width: 100%;
  text-align: center;
}
#style .style_item img{
  margin-bottom: 1rem;
}
#style .style_item1{
  margin-bottom: 2rem;
}
@media screen and (min-width: 768px) {
  #style .style_item{
    width: 45%;
  }
  #style .style_item1{
    margin-bottom: 0;
  }
}

/* 料金 */
#price .price_wrap{
  width: 100%;
  text-align: center;
}
#price .price_box{
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  row-gap: 0.5rem;
}
#price .price_deco{
  display: inline;
  font-size: 1.2em;
  padding: 0.26rem 1.8rem;
  margin-bottom: 1rem;
  background: #C4DEFF;
  -webkit-box-decoration-break: clone;
	box-decoration-break: clone;
  border-radius: 20px;

}
#price .price_item{
  text-align: left;
  font-size: 1.45em;
  margin-left: 2rem;
  line-height: 1.1;
}
#price span.price{
 font-size: 2.2rem;
 font-weight: bold;
 margin-left: 0.8rem;
}
#price span.text_s{
  font-size: 0.8em;
}
#price .price_detail2{
  font-size: 1.25em;
  margin-bottom: 1rem;
}
#price .price_detail2 span{
  font-size: 1.35em;
}
#price .per_son{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: dashed 2px #2E62DD;
  padding:  0.5rem 1rem 0.8rem;
  font-size: 1.2em;
}
@media screen and (min-width:768px){
  #price .price_wrap{
    width: 80%;
    margin: 0 auto;
  }

  #price span.price{
    font-size: 2.5rem;
   }
 .text_b18{
  font-size:  1.15em;
}
  #price .per_son{
    width:80%;
    padding: 0.5rem 1.5rem 0.8rem;
  }
}
/* FAQ */
#faq{
  width: 100%;
}
#faq p.faq_q{
  text-align: left;
  padding: 0.5rem 0.8rem;
  font-size: 1.25rem;
  color: #2E62DD;
  font-weight: bold;
  border-bottom: dotted 3px #2E62DD;
}
#faq p.faq_a{
  text-align: left;
  padding: 0.5rem 0.9rem;
  font-size: 1.15rem;
}
@media screen and (min-width:768px){
#faq{
  width: 100%;
}
}

/* 会社概要 */
#company dl,
.scta dl{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.dl_deco dt{
  width: 20%;
  padding: 0.8rem 0.2rem;
  border-top: solid 2px #2E62DD;
 
}
.dl_deco dd {
  width: 80%;
  padding: 0.8rem 1rem;
  text-align: left;
  border-top: dotted 2px #2E62DD;
}
.dl_deco dt.u_line_s{
  border-bottom: solid 2px #2E62DD;  
}
.dl_deco dd.u_line_d{
  border-bottom: dotted 2px #2E62DD;  
}
.dl_deco dd a{color: #002137;}

@media screen and (min-width:768px){
.dl_deco.dl_deco  dt {
  padding: 1rem 0.8rem;
  }
.dl_deco dd {
  padding: 1rem 1.5rem;
  }
}
/* フッター */
footer{
  width: 100%;
  background-color: #002137;
  padding: 3.5rem 0 0.4rem;
  text-align: center;
  font-size: 0.9em;
}
footer h1 img{
  width: 170px;
  display: block;
  margin: 0 auto 2.5rem;
}
footer ul{
  width: 100%;
    margin: 0 auto;
}

footer .fo_li_wrap{
  row-gap: 0.8rem;
  column-gap: 1rem;
  margin-bottom: 1.2rem;
}

footer .copy{
  margin-top: 2rem;
  font-size: 0.8em;
  color: #8D959B;
}
@media screen and (min-width:768px){
  footer .fo_li_wrap {
    margin-bottom: 0.8rem;
  }

}


/* お問い合わせ */
form {
  max-width: 600px;
  margin: 0 auto; 
}
.form-area{
  margin: 3rem 0;
}
.form-area dt.form_ttl{
  font-size: 1.15em;
  margin-bottom: 0.25rem;
  margin-top: 1.5rem;
}
.form-area dt.form_ttl:after {
  content: "必須";
  display: inline-block;
  background: #D41F1F;
  color: white;
  padding: 0 0.5rem 0.1rem;
  margin-left: 0.5rem;
  font-size: 0.75em;
  font-weight: normal;
  position: relative;
  top: -0.1em;
  letter-spacing: 0.1em;
  border-radius: 6px;
}
.form-area dd.form_box input,
.form-area dd.form_box textarea{
  width:100%;
  max-width: 100%;
  padding: 0.6rem 0.8rem;
  border: #B9C1C6 solid 1px;
  border-radius: 5px;
  font-size: 1rem;
}
.disclaimer-area{
  margin-bottom: 3.5rem;
}
.disclaimer-text{
  padding: 0;
  text-align: center;
}
.disclaimer-area a{
  color: #002137;
  text-decoration:underline}
.policy-box {
  width: 100%;
  max-width: 100%;
  margin: 1rem 0;  
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  border: #B9C1C6 solid 1px;
  border-radius: 5px;
}

.policy-content {
  max-height: 200px; 
  overflow-y: scroll;
  color: #000;
}
.policy-content hr{
  background-color: #002137;
}