@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;700&display=swap');
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-size: 16px;
    color:#333333;
    letter-spacing: 0.15em;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #fff;
    font-feature-settings:"palt";
    line-height: 1.6em;
}

/***util****/
@media screen and (max-width:768px) {
img{
    width: 100%;
}
}
img{
    vertical-align: bottom;
}
.section__inner{
    margin: 0 auto;
    width: 1050px;
    padding:0 0.5em;
}
@media screen and (max-width:768px) {
    .section__inner{
        margin: 0 auto;
        width: 100%;
        padding:0 0.5em;
    }
}
a img{
    transition: 0.2s;
}
a img:hover{
    opacity: 0.8;
}
a{
    color:#222222;
    text-decoration: none;
}
.green_text{
    color:#3d8a9c;
    font-weight: bold;
}
.text-shadow-white{
    text-shadow:
    1px 1px 0px #fff, -1px -1px 0px #FFF,
   -1px 1px 0px #fff,  1px -1px 0px #FFF,
    1px 0px 0px #fff, -1px  0px 0px #FFF,
    0px 1px 0px #fff,  0px -1px 0px #FFF;
}
main section{
    padding:5em 0.5em 7em;
}
@media screen and (max-width:768px) {
    main section{
        padding:2.2em 0.5em;
    }
}
section h2{
    text-align: center;
    font-size: 34px;
    margin-top:0;
    margin-bottom:1em;
    letter-spacing: 0.14em;
}
@media screen and (max-width:768px) {
    section h2{
        text-align: center;
        font-size: 22px;
        margin-top:0;
        margin-bottom:1em;
        letter-spacing: 0.1em;
        line-height: 1.4em;
    }
}
.headbackbtn {
    display: none;
    width: 65px;
    position: fixed;
    bottom: 30px;
    right: 40px;
    cursor: pointer;
    z-index: 3;
  }
  @media screen and (max-width:768px) {
    .headbackbtn {
        display: none;
        width: 50px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        cursor: pointer
    }
  }

@media  screen and (max-width:768px) {
.sp-on{
    display: block;
}
.pc-on{
    display:none;
}
}
@media  screen and (min-width:769px) {
.sp-on{
    display: none;
}
.pc-on{
    display:block;
}
}
.yellow_line{
    background: linear-gradient(transparent 70%,#ffdd55 30%);
}
.red_font{
    color:orangered;
}
.href_blue{
   color:orangered;
   /* font-weight: bold; */
   text-decoration: underline;
}
.href_blue:hover{
    text-decoration: none;
}
p{
    margin:0.5em 0;
}
/********** 両サイド 吹き出し **********/
.mod-balloon-text {
    font-weight: 600;
}
.mod-balloon-heading{
    margin-bottom: 1em;
    font-size: 24px;
    line-height: normal;
    text-align: center;
}
.mod-balloon-heading .mod-balloon-index{
    position: relative;
    display: inline-block;
}
@media screen and (max-width:768px){
    .mod-balloon-heading .mod-balloon-index{
        display: none;
    }
}
.mod-balloon-heading .mod-balloon-index::before,
.mod-balloon-heading .mod-balloon-index::after{
    position: absolute;
    content: "";
    display: block;
    width: 3px;
    height: 100%;
    background-color: #333333;
    border-radius: 3px;
    top: 0;
    bottom: 0;
}
.mod-balloon-heading .mod-balloon-index::before{
    left: -1.5em;
    transform: rotate(-25deg);
}
.mod-balloon-heading .mod-balloon-index::after{
    right: -1.5em;
    transform: rotate(25deg);
}

/****header*****/
@media  screen and (min-width:769px) {
    header{
        height: 600px;
        /* background-image: url('../images/keyvisual_bg5.jpg'); */
        background-image: url('../images/key_202604.jpg');
        background-position: top right;
        background-repeat: no-repeat;
        background-size: contain;
         border-bottom: 1px solid #eee;
    }
}
@media  screen and (max-width:1800px) {
    header{
        background-position: top right -80px;
         border-bottom: 1px solid #eee;
    }
}
@media  screen and (max-width:1500px) {
    header{
        background-position: top right -180px;
         border-bottom: 1px solid #eee;
    }
}
@media  screen and (min-width:2200px) {
    header{
        /* background-image: url('../images/keyvisual_bg_wide.jpg'); */
         background-image: url('../images/key_202603wide.jpg'); 
        background-position: top right 200px;
         border-bottom: 1px solid #eee;
    }
}
.header__menu{
    background: rgba(255,255,255,0.8);
    width: 100%;
    height:80px;
    position: relative;
    position: fixed;
    top:0;
    width: 100%;
    z-index: 9999;
    border-bottom: 1px solid #eee;
}
.header__logo{
    display: inline-block;
    padding:0.6em 1.5em;
}
.header__glmenu{
    position: absolute;
    top:0;
    right:0;
}
.header__glmenu ul{
    list-style: none;
    margin:0;
    font-weight: bold;
}
.header__glmenu ul li{
    float: left;
    line-height: 80px;
    font-size: 18px;
}
.header__glmenu ul li a{
    padding:1em 0.8em;
    transition: .2s;
    color:#333;
}
@media  screen and (max-width:1400px) {
    .header__glmenu ul li a{
        padding:1em 0.4em;
        transition: .2s;
        color:#333;
    }
    
}
@media  screen and (max-width:1450px) {
    .header__glmenu__login{
        display: none;
    }
}
.header__glmenu ul li a:hover{
    opacity: 0.6;
}
.header__glmenu .fa-sign-in-alt{
    margin-right: 0.2em;
}
.header__glmenu__free{
    background-color: #FFD649;
    color:#111;
    margin-left:1em;
    transition: 0.2s;
    font-size: 21px !important;
}
.header__glmenu__apply{
    background-color: #004698;
    transition: 0.2s;
   
}
.header__glmenu__apply,.header__glmenu__free{
     font-size: 20px !important;
}
.header__glmenu__apply i,.header__glmenu__free i{
    margin-right: 0.6em;
}
.header__glmenu__apply:hover,.header__glmenu__free:hover{
    opacity: 0.84;
}
.header__glmenu__apply a,.header__glmenu__free a{
    color: #ffffff !important;
    font-weight: bold;
    padding:1em 1.6em !important;
}
.header__glmenu__free a{
    color: #222 !important;
}
.header__keyvisual{
    color:#1b4593;
    margin-top:80px;
}
.header__keyvisual .section__inner{
    padding:5.4em 0;
}
.upper__h1{
    font-size: 29px;
    line-height: 1.5em;
    font-weight: bold;
}
.header__keyvisual h1{
    font-size:59px;
    line-height:1em;
    /* letter-spacing: 0.1em; */
    margin-bottom: 0.45em;
    margin-top: 0.2em;
}
.header__keyvisual p{
    line-height: 1.8em;
    font-size: 21px;
    /* font-weight: bold; */
    color: #333;
}
.header__keyvisual__btn{
    margin-top: 2.1em;;
}
.header__keyvisual .section__inner{
    position: relative;
    width: 1020px;
}
.header__keyvisual__orange{
    /* display: none; */
    position: absolute;
    bottom:24px;
    right: -20px;
}

/*sp*/
.sp-header__menu{
    width: 200px;
    padding:1em;
}
.sp-header__keyvisual__exp{
    background-color: #fffcec;
    color:#002248;
    padding:1em;
    line-height: 1.8em;
}
.sp-header__keyvisual__exp__btn{
    width: 100%;
    margin:1em auto;
}

/***/
.top__bnr__flex{
    display: flex;
    gap: 20px;
}
.top__bnr__flex div{
    width: 50%;

}


/***/
/****** SECTION PROBLEM *********/
.bnr_ensyu{
    text-align: center;
    width: 85%;
    margin: 0em auto 4em;
}
@media screen and (max-width:768px) {
    .bnr_ensyu{
        text-align: center;
        width: 100%;
        margin: 0em auto 2em;
    }
}
.bnr_ensyu img{
    width: 100%;
    border-radius: 6px;
}
.section__problem{
    background-color: #FFFEF9;

}
@media screen and (max-width:768px) {
    .section__problem{
        background-color: #FFF;
        /* margin-bottom: 2em; */
    }
}
.section__problem .section__inner{
    position: relative;
}
.section__problem__bnr{
    margin:0em auto 4em; 
    text-align: center;
    
}
@media screen and (max-width:768px) {
    .section__problem__bnr{
        margin:0em auto 3em; 
        text-align: center;
        
    }
}
.section__problem__bnr img{
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
   border-radius: 3px; 
   border:1px solid #ddd;
}

@media screen and (max-width:768px) {
    .section__problem__bnr img{
        border-radius: 0px; 
        border:1px solid #eee;
    }
}
.section__problem h2{
    color:#002248;
    line-height: 1.1em;
    margin-bottom: 1.7em;
    text-align: center;
    text-shadow:
           1px 1px 0px #fff, -1px -1px 0px #FFF,
          -1px 1px 0px #fff,  1px -1px 0px #FFF,
           1px 0px 0px #fff, -1px  0px 0px #FFF,
           0px 1px 0px #fff,  0px -1px 0px #FFF;
}
.section__problem h2 .h2__sub{
    font-size:20px;
    font-weight: normal;
    margin-bottom: 0.1em;
}
.section__problem h2{
    font-size: 36px;
    line-height: 1.4em;
    margin-bottom: 1em;
}
@media  screen and (max-width:768px) {
    .section__problem h2{
        font-size:18px;
        margin-bottom: 1em;
    }
    .section__problem h2 .h2__sub{
        font-size:16px;
        font-weight: normal;
        margin-bottom: 0.4em;
        letter-spacing: 0;
    }
    .section__problem h2{
        font-size: 20px;
    }
}
.section__problem__list{
    display: flex;
    flex-wrap: wrap;
    gap: 34px 30px;
    margin-bottom: 2em;
    justify-content:center;
}
@media screen and (max-width:768px) {
    .section__problem__list{
        gap: 29px 30px;
    }
}
.section__problem__item{
    width: 30%;
    border: 1px solid #DFDFDF;
    background-color: #FFF;
    border-radius: 10px;
    padding:1.4em 2em 2em 3em;
    /* height: 270px; */
    position: relative;
    /* background-position: left 3em center;
    background-repeat: no-repeat; */
}
@media screen and (max-width:768px) {
    .section__problem__item{
        width: 100%;
        background-position: left 2em center;
        background-size: 20%;
        height: auto;
        border: 1px solid #cccccc;
        padding:1.4em 1.5em 1.2em;
        margin-top: 1em;
    }
}
/* .section__problem__item:nth-child(1){
    background-image: url('../images/icon_problem_01.svg');
}
.section__problem__item:nth-child(2){
    background-image: url('../images/icon_problem_02.svg');
}
.section__problem__item:nth-child(3){
    background-image: url('../images/icon_problem_03.svg');
}
.section__problem__item:nth-child(4){
    background-image: url('../images/icon_problem_04.svg');
} */
.section__problem__ppl{
    text-align: center;
}

.section__problem__text{
    /* padding-left: 34%;
    padding-top:1.5em; */
    line-height: 1.6em;
}
.section__problem__text h3{
    margin-bottom: 0.6em;
}
@media screen and (max-width:768px) {
    .section__problem__text h3{
        font-size: 17px;
        margin-bottom: 0.5em;
    }
}
.section__problem__icon{
    position: absolute;
    top:-1.5em;
    left:-1em;
}
.section__problem__icon img{
    width: 69px;
}
@media screen and (max-width:768px) {
    .section__problem__icon{
        position: absolute;
        top:-1.9em;
        left:40%;
        width: 19%;
    }
    .section__problem__icon img{
        width: 60px;
    }
}
/****** SECTION TEACHER *********/
.section__teacher{
    background-color: #FFF;
    padding-top:6em;
    /* padding-bottom:3em; */
}
@media screen and (max-width:768px) {
    .section__teacher{
        padding-top:2.5em;
        /* padding-bottom: 5em; */
    }
}
.section__teacher h2{
    color:#333;
    margin-bottom:0.9em;
    font-size: 34px;
}
@media screen and (max-width:768px) {
    .section__teacher h2{
        margin-bottom:0.9em;
        font-size: 20px;
    }
}
.section__teacher__main{
    background-color: #FFF;
    border-radius: 6px;
    padding:2.4em 0em;
}
@media screen and (max-width:768px) {
    .section__teacher__main{
        padding:0em;
    }
}
.section__teacher__main h3{
    /* border-bottom: 2px solid #333; */
    text-align: center;
    font-size: 30px;
    padding-bottom: 0.6em;
    margin: 0.5em 0 2em;
}
@media screen and (max-width:768px) {
    .section__teacher__main h3{
        font-size: 16px;
        margin: 0.5em 0;
    }
}
.section__teacher__item{
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
}
@media screen and (max-width:768px) {
    .section__teacher__item{
        padding-top:0 !important;
        border-bottom: 1px solid #ccc;
    }
}
.section__teacher__item h4{
    font-size: 23px;
    margin:0em;
}
@media screen and (max-width:768px) {
    .section__teacher__item h4{
        font-size: 16px;
        text-align: center;
    }
}
.section__teacher__item h4 a:hover{
    text-decoration: underline;
}
.section__teacher__img{
    width: 28%;
    padding: 0 1em;
}
@media screen and (max-width:768px) {
    .section__teacher__img{
        margin:0em auto 2em;
        width: 65%;
        padding: 0em;
    }
}
.section__teacher__img img{
    width: 100%;
}
.section__teacher__text{
    width: 65%;
    margin-left:2em;
    line-height: 1.8em;
}
@media screen and (max-width:768px) {
    .section__teacher__text{
        width: auto;
        margin-left:auto;
    }
}
.section__teacher iframe{
    width: 800px;
    height: 400px;
}
@media screen and (max-width:768px) {
    .section__teacher iframe{
        width: 100%;
        height: 180px;
        margin-top: -1em;
    }
}
.section__teacher__iframe iframe{
    background-color: #9fe1e1;
    padding:1em;
    border-radius: 6px;
    margin-top:3em;
    width: 100% !important;
    height: 500px !important;
}
.section__teacher__yamada__bnr{
    text-align: center;
    margin:1em auto;
}
.section__teacher__yamada__bnr img{
    width: 90%;
    margin-top: 2em;
    border:8px solid #fdd853;
}
@media screen and (max-width:768px) {
    .section__teacher__yamada__bnr img{
        margin-top: 0em;
        width: 100%;
        border:4px solid #fdd853;
    }
}
/******* SECTION BRGINNER *******/
.section__gift{
    background-color: #fff2b0;
}
.section__gift__content{
    /* background-color:#FFF; */
    /* box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1); */
    border-radius: 12px;
}

h2.section__gift__content__h2__upper{
    background-color: #1b4593;
    color:#fff;
    padding:0.7em;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.12em;
    line-height: 1.4em;
    /* border-radius: 100px; */
    border: 100px;
    margin:0 auto;
    position: relative;
    width: 100%;
    margin-bottom: 0;
    border-radius: 14px 14px 0 0;
}
.section__gift__content__h2__upper__span{
    font-size: 25px;
}

.section__gift__content__main{
    padding:1.6em 3.4em 3em;
    background-color: #FFF;
    border-radius: 0 0 14px 14px;
    /* margin-top: -3.5em; */
}

@media screen and (max-width:768px) {
    h2.section__gift__content__h2__upper{
         width: 100%;
          font-size: 20px;
           border-radius: 10px 10px 0 0;
    }
    .section__gift__content__h2__upper__span{
    font-size: 12px;
    }
    .section__gift__content__main{
        margin-top: 0em;
        border-radius: 0 0 10px 10px;
    }
}

@media screen and (max-width:768px) {
   .section__gift__content__main{
        padding:1em;
    }
}

.section__gift__content__main__item{
    display: flex;
    flex-wrap: wrap;
    gap: 2.6em;
    box-sizing: border-box;
    padding-top: 3em;
    padding-bottom: 3em;
    justify-content: center;
}
@media screen and (max-width:768px) {
    .section__gift__content__main__item{
        padding-top: 1.7em;
        padding-bottom: 1.7em;
    }
}

.section__gift__content__main__item:not(:last-child) {
    border-bottom: 1px solid #1b4593;
}

.section__gift__content__main__item:first-child {
     padding-top: 1.5em;
}
.section__gift__content__main__item__text{
    width: 47%;
}
.section__gift__content__main__item__text h3{
    font-size: 26px;
    line-height: 1.5em;
    color:#1b4593;
    margin-top: 0;
    letter-spacing: 0.04em;
    margin-bottom: 0.5em;
}
@media screen and (max-width:768px) {
    .section__gift__content__main__item__text h3{
        font-size: 20px;
        text-align: center;
         margin-bottom: 1em;
    }
}
.section__gift__content__main__item__text h3 span{
   font-size: 40px;
   display: inline-block;
   margin-bottom: 0.3em;
}
.section__gift__content__main__item__text h3 span i{
    margin-right: 0.2em;
}
.section__gift__content__main__item__img{
     width: 47%;
}

@media screen and (max-width:768px) {
    .section__gift__content__main__item__text h3 span{
        margin-bottom: 0.2em;
    }
    .section__gift__content__main__item{
         gap: 0em;
    }
    .section__gift__content__main__item__text{
    width: 100%;
}

    .section__gift__content__main__item__img{
     width: 100%;
}

}

.section__gift__content__main__item__img img{
    width: 100%;
    /* border: 1px solid #ccc; */
    border-radius: 2px;
}
.section__gift__process{
    background-color: #eff4ff;
    /* border-radius: 6px; */
    margin-top: 1.3em;
}
.section__gift__process h3{
    background-color: #1b4593;
    color:#fff;
    padding:1.5em 1em;
    font-size: 22px;
    margin: 0;
    /* display: inline-block;
    border-radius: 0 0 10px 0; */
    text-align: center;
}
@media screen and (max-width:768px) {
    .section__gift__process h3{
        padding:0.5em;
        border-radius: 0;
        text-align: center;
        display: block;
    }
}
.section__gift__process__main{
    padding:1.3em 2em 2em;
}
@media screen and (max-width:768px) {
    .section__gift__process__main{
    padding:0.6em;
}
}

.section__gift .btn_yellow_apply img {
  animation: soft-blink 1.5s ease-in-out infinite;
}

@keyframes soft-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/****** SECTION FEATURE *********/
.section__feature{
    background-color: #FFF;
}
.section__feature h2{
    color:#009595;
    line-height: 1.5em;
    margin-bottom: 1.4em;
    text-align: center;
    text-shadow:
           1px 1px 0px #fff, -1px -1px 0px #FFF,
          -1px 1px 0px #fff,  1px -1px 0px #FFF,
           1px 0px 0px #fff, -1px  0px 0px #FFF,
           0px 1px 0px #fff,  0px -1px 0px #FFF;
}
.section__feature h2 .h2__sub{
    font-size:20px;
    font-weight: normal;
}
.section__feature h2 .h2__main{
    font-size: 31px;
}
@media screen and (max-width:768px) {
    .section__feature h2 .h2__sub{
        font-size:16px;
        font-weight: normal;
        letter-spacing: 0;
        margin-bottom: 0.6em;
    }
    .section__feature h2 .h2__main{
        font-size: 20px;
    }
}
.section__feature__main{
    margin-top: 5em;
}
@media screen and (max-width:768px) {
    .section__feature__main{
        margin-top: 0em;
    }
}
.section__feature__item {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 60px;
}
.section__feature__item__text h3{
    margin-bottom: 0;
    font-size: 22px;
}
.section__feature__item__img {
  width: 35%;
  margin-left: 3%;
}
.section__feature__item__text{
    width: 60%;
    line-height:2em;
}
.section__feature__item__text__a{
    text-decoration: underline;
}
.section__feature__item__text__a:hover{
    text-decoration: none;
}


.section__feature__item__img img {
  width: 100%;
  height:auto;
}

.section__feature__item:nth-child(even) {
    flex-direction: row-reverse;
}

.section__feature__item:nth-child(even) .section__feature__item__img {
    margin-left: 0;
    margin-right: 3%;
}
@media (max-width:768px) {
    .section__feature__item {
      flex-direction: column;
      border-bottom:1px solid #ccc;
      padding-bottom:2em;
      margin-bottom: 10px;
    }
    .section__feature__item:last-child{
        border-bottom:none;
    }
    .section__feature__item:nth-child(even) {
      flex-direction: column;
    }
    .section__feature__item__text {
      width: 100%;
    }
    .section__feature__item__text h3{
        text-align: center;
        font-size:18px;
    }
    .section__feature__item__img {
      width:100%;
      margin-left: 0;
      text-align: center;
      margin-top:1em;
    }
    .section__feature__item:nth-child(even) .section__feature__item__img {
      margin-left: 0;
      margin-right: 0%;
    }
    .section__feature__item__img img {
      width:80%;
      height:auto;
    }
}
/****** SECTION MOODLE *********/
.section__moodle{
    background-color: #fff2b0;
}
@media (max-width:768px) {
    .section__moodle{
        padding-top: 1.6em !important;
    }
}
.section__moodle h2{
    margin: 0.4em auto 0.6em !important;
    color:#111111;
    font-size: 34px;
}
@media (max-width:768px) {
    .section__moodle h2{
        font-size: 19px;
    }
}
.section__moodle__exp{
    text-align: center;
    color:#111111;
    margin-bottom:2em;
}
@media (max-width:768px) {
    .section__moodle__exp{
        text-align: left;
    }
}
.section__moodle__list{
    background-color: #FFF;
    border-radius: 12px;
    padding:2.3em 2.2em 4em;
    text-align: center;
    box-shadow: 0px 0px 6px -3px rgba(0,0,0,0.2);
}
@media (max-width:768px) {
    .section__moodle__list{
        padding:2.2em 0.7em 0.5em;
    }
}
.section__moodle__item h3{
    font-size: 30px;
    display: inline-block;
    padding:0.2em 0.5em 0.4em;
    background: linear-gradient(transparent 70%,#ffd336 30%);
    margin-bottom: 0.7em;
}

.section__moodle__item h3 span{
    color:#ff6c00;
    margin-right: 0.05em;
    font-size: 60px;
}
@media (max-width:768px) {
    .section__moodle__item{
        margin-bottom: 2em;
        padding-bottom: 1.6em;
        border-bottom:1px solid #ccc;
    }
    .section__moodle__item:last-child{
        padding-bottom: 0em;
        border-bottom:none;
    }
    .section__moodle__item h3{
        font-size: 18px;
        display: inline-block;
        padding:0.2em 0.5em 0.4em;
        margin-bottom: 0.6em;
        background:none;
        margin-top: 0em;
    }
    .section__moodle__item h3 span{
        font-size: 45px;
        margin-bottom: 0.3em;
        display: inline-block;
    }
}
.section__moodle__item__text{
    padding:0 3.6em;
    text-align: left;
}
@media (max-width:768px) {
    .section__moodle__item__text{
        padding:0 1em;
        text-align: left;
    }
}
.section__moodle__item__img{
    margin:1.5em auto 0.5em;
    text-align: center;
}
.section__moodle__item__img p{
    font-weight: bold;
}
.section__moodle__item__img img{
    width: 80%;
}

@media (max-width:768px) {
    .section__moodle__item__text{
        padding:0 1em;
        text-align: left;
    }
    .section__moodle__item__img{
        margin:0.5em auto 0em;
    }
    .section__moodle__item__img img{
        width: 100%;
    }
}
.section__moodle__item__img iframe{
    margin:1em auto;
}
.slick-slide img{
    margin:0 auto;
}
.btn_yellow_apply{
    text-align: center;
    margin:3em auto 2em;
}
.section__moodle .btn_yellow_apply{
    margin: 3em auto 0;
}
.section__moodle__ouen{
    text-align: center;
}
@media (max-width:768px) {
    .section__moodle__ouen{
        margin: 0 auto;
        width: 90%;
    }
}
.section__moodle .slick-prev{
    left:-40px !important;
    top:50% !important;
}
.section__moodle .slick-next{
    right:-40px !important;
    top:50% !important;
}
@media (max-width:768px) {
    .section__moodle .slick-prev{
        left:0px !important;
    }
    .section__moodle .slick-next{
        right:0px !important;
    }
}

.section__moodle .btn_yellow_apply{
    margin-bottom:4.8em;
}
@media (max-width:768px) {
    .section__moodle .btn_yellow_apply{
        margin-top: 1.5em;
        margin-bottom:1em;
    }
}
.section__moodle .btn_yellow_apply{
    margin:1em 0 5em;
}
@media (max-width:768px) {
    .section__moodle  .btn_yellow_apply{
        margin:0em;
    }
    .section__moodle .footer__btn__list{
        margin:1.2em 0 1.6em;
    }
}
/****** SECTION VOICE *********/
.section__voice{
    background-color: #fff2b0;
}
.section__voice h2{
    text-align: center;
    margin-bottom:1em;
    line-height: 1.4em;
}
.section__voice__exp{
    text-align: center;
}
.section__voice__list{
    margin: 0 auto;
    width: 90%;
}
@media (max-width:768px) {
    .section__voice__list{
        width: 95%;
    }
}
.section__voice__item{
    background-color: #FFF;
    border-radius: 4px;
    padding:2em;
    width: 580px !important;
    box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.2);
    margin:1.2em 0.7em;
    line-height: 1.8em;
    height:450px;
}
@media (max-width:768px) {
    .section__voice__item{
        width: auto !important;
        padding:1.5em;
        margin:1em 0;
        height: auto !important;
    }
}
.section__voice__item__upper{
    display: flex;
    flex-wrap: wrap;
    margin-bottom:1.6em;
}
.section__voice__item__downer h3{
    text-align: center;
    font-size: 23px;
}
@media (max-width:768px) {
.section__voice__item__downer h3{
    font-size: 19px;
}
}
.section__voice__item__upper__face{
    width: 20%;
}
.section__voice__item__upper__name{
    width: 60%;
    margin-top:1.8em;
    margin-left:2em;
    font-weight: bold;
    font-size: 20px;
}
.section__voice .slick-prev{
    left:-20px !important;

}
.section__voice .slick-next{
    right:-20px !important;
}
/****** SECTION PRICE *********/
.section__price h2{
    text-align: center;
    color:#333333;
    letter-spacing: 0.5em;
}
@media (max-width:768px) {
    .section__price .btn_yellow_apply{
        margin-top: 1.5em;
        margin-bottom:1em;
    }
}
.section__price{
    background-color: #F9F7F5;
}
.section__price__list img{
    width: 100%;
     box-shadow: 0px 0px 10px -6px rgba(0,0,0,0.13);
}
.section__price__alert{
    color: #FFF;
}
.section__price .btn_yellow_apply{
    margin:3em 0 2em;
}
@media (max-width:768px) {
    .section__price .btn_yellow_apply{
        margin:0em;
    }
    .section__price .footer__btn__list{
        margin:1.2em 0 1.6em;
    }
}
/****** SECTION FAQ *********/
.section__faq{
    background-color: #fffefa;
}
ul.menu{
    margin-top: 3em;
    padding:0;
  }
.section__faq .menu__item {
    background: #ffffff;
    cursor: pointer;
    display: block;
    margin-bottom: 20px;
    border-radius: 10px;
    color:#333333;
    border: 1px solid #555;
}
.section__faq .menu__item__link {
  color:#111111;
  padding-left: 4em;
  background-image: url("../images/icon_q2.svg");
  background-repeat: no-repeat;
  background-position: left 1.3em center;
  background-size: 39px;
}
.section__faq .submenu {
  border:none;
  border-top:1px dashed #aaa;
  padding-top: 2em;
  line-height: 1.8em;
}

.menu__item {
  background: #002248;
  cursor: pointer;
  display: block;
  margin-bottom: 12px;
  border-radius: 10px;
  color:#FFF;

  }
  @media screen and (max-width:768px) {
    .menu__item {
        margin-bottom: 8px;
        border-radius: 8px;
    }
  }
  .menu__item__link:hover{
    text-decoration: underline;
  }
  .menu__item__link {
  display: block;
  line-height: 60px;
  position: relative;
  font-size: 17px;
  font-weight: bold;
  padding:1em 2em;
  color:#FFFFFF;
  border-radius: 8px;
  }

  .submenu {
  background: #FFF;
  color:#2a2a2a;
  display: none;
  border-radius: 0 0 10px 10px;
  padding:0em 3em 3em;
  border:1px solid #ddd;
  }
  .submenu h3 {
  position: relative;
  padding: 0.8rem 1.7rem;
  color: #333;
  border-radius: 2px;
  background: #B0E1D6;
  font-size:17px;
  margin:1.8em auto 0.8em;
  text-align: left;
  }
  @media screen and (max-width:768px) {
  .submenu h3:first-child {
    margin: 0 auto 0.5em;
  }
  .submenu h3 {
    font-size:16px;
    border-radius: 4px;
    padding:0.6em 1em;
  }
  }

  .submenu h4{
    border-left:6px solid #1B9AA0;
    font-size:16px;
    margin-top:2em;
    margin-bottom:1em;
    padding:0em 0.7em;
  }
  .submenu ul{
    list-style-type: disc;
    margin:0;
    padding:0.5em 0.5em 0.5em 1em;
  }
  @media  screen and (max-width:768px) {
    .menu__item__link {
        line-height:26px;
        font-size:14.5px;
        border-radius: 6px;
        padding:1em 1.3em;
    }
    .submenu {
        padding:1.2em;
    }
  }
  .submenu a{
    color:blue !important;
    font-weight: bold;

  }
  .submenu a:hover{
    text-decoration: none;
    opacity: 1;
    text-decoration: underline;
  }
  .submenu__item {
  color: #222;
  padding: 1rem;
  }

/****** SECTION FOOTER *********/
.section__free{
    background-image: url('../images/moodle_keyvisual.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: 370px;
}
@media  screen and (max-width:768px) {
    .section__free{
        background-image: url('../images/moodle_keyvisual.jpg');
        height:auto;
    }
}
.section__free .btn_yellow_apply{
    margin: 0;
    margin-top:1em;
    color:#000;
    font-weight: bold;
    font-size: 18px;
}

@media  screen and (max-width:768px) {
    .section__free .btn_yellow_apply{
        margin-top:0em;
    }
}
.footer__btn__list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
}
.footer__btn__list div{
    width: 45%;
}
@media  screen and (max-width:768px) {
    .footer__btn__list{
        gap:0.5em 0;
    }
    .footer__btn__list div{
        width: 100%;
    }
}

/****** SECTION FOOTER *********/
footer{
    background-color: #1b4593;
}
footer .section__inner{
    text-align: center;
    padding:2em 1em 4em;
}
.footer__links{
    padding:0.5em;
    color:#FFF;
}
.footer__sns{
    font-size: 40px;
    margin-bottom: 0.4em;
}
.footer__links a{
    color:#FFF;
    font-weight: bold;
    padding:0 1em 0 0.7em;
}
.footer__links a:not(:last-child){
    border-right:1px solid #FFF;
}
.footer__sns a{
    padding:0.3em;
}
.footer__sns a:hover{
    opacity: 0.7;
    text-decoration: none !important;
}
.footer__sns a{
    border-right: none !important;
}
.footer__links a:hover{
    text-decoration: underline;
}
@media screen and (max-width:768px) {
    footer .section__inner{
        padding:1em;
    }
    .footer__links{
        padding:0;
    }
    .footer__links a{
        display: block;
        border-bottom: 1px solid #FFF;
        padding:0.6em;
    }

    .footer__links a:not(:last-child){
        border-right:none;
    }
    .footer__sns{
        font-size: 24px;
    }
}
.footer__logo{
    margin:1.5em auto 1em;
}
@media screen and (max-width:768px) {
    .footer__logo{
       width: 200px;
       text-align: center;
       margin:2em auto;
    }
    .footer__links{
        padding:1em;
    }
}
.footer__copy{
    color:#FFF;
    font-size:16px;
}
/****** SECTION SLICK *********/
.slick-dots{
    position: static;
}
.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: 1;
}

.slick-active {
  opacity: 1;
}

.slick-current {
  opacity: 1;
}
.slick-prev:before, .slick-next:before{
  color:#002248 !important;
  opacity: 1 !important;
  transition: .2s;
}
.slick-prev:hover, .slick-next:hover{
opacity: 0.7 !important;
}
.slick-dots{
  bottom:-40px !important;
}
.slick-dots li{
  margin:0.2em !important;
}
.slick-dots li.slick-active button:before{
  color:#002248 !important;
  opacity:1 !important;
}
.slick-dots li button:before{
  color:#aaa !important;
  opacity:0.6 !important;
  font-size:13px !important;
}
.slick-arrow:before{
content:""!important;
}
.slick-arrow:before{
content:""!important;
width: 100%!important;
height: 100%!important;
position: absolute;
top: 0;
left: 0;
}

.slick-next:before{
background: url(../images/arrow_r2.svg)!important;
background-size: contain!important;
}

.slick-prev:before{
background: url(../images/arrow_l2.svg)!important;
background-size: contain!important;
}

.slick-arrow{
z-index:2!important;
width:80px!important;
height:80px!important;

}

/**fadeIn**/
.fadeIn {
	opacity: 0;
	transition-duration: 890ms;
	transition-property: opacity, transform;
}
.fadeIn {
	transform: translate(0, 50px);
}
.fadeIn2 {
	transition-duration: 1590ms;
	transform: translate(0, 0px);
}
.fadeIn-down {
	transform: translate(0, -50px);
}

.fadeIn-left {
	transform: translate(-50px, 0);
}

.fadeIn-right {
	transform: translate(50px, 0);
}

.scrollIn {
	opacity: 1;
	transform: translate(0, 0);
}

/**hamburger menu**/
.hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    right : 13px;
    top   : 12px;
    width : 40px;
    height: 35px;
    cursor: pointer;
    text-align: center;
  }
  .hamburger span {
    display : block;
    position: absolute;
    width   : 25px;
    height  : 3px ;
    left    : 6px;
    background : #222;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition   : 0.2s ease-in-out;
    transition        : 0.2s ease-in-out;
  }
  .hamburger span:nth-child(1) {
    top: 10px;
  }
  .hamburger span:nth-child(2) {
    top: 20px;
  }
  .hamburger span:nth-child(3) {
    top: 30px;
  }

  .hamburger.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
    background : #111;
  }

  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 16px;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
    background : #111;
  }

  nav.globalMenuSp {
    position: fixed;
    z-index : 2;
    top  : 0;
    left : 0;
    color: #111;
    background: #FFEE99;
    text-align: left;
    transform: translateY(-100%);
    transition: all 0.4s;
    width: 100%;
    height: 100%;
    opacity:1 !important;
    overflow: scroll;
  }

  nav.globalMenuSp ul {
    background: #FFEE99 !important;
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }

  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #111;
  }
  nav.globalMenuSp ul li:first-child{
    border-top: 1px solid #111;
  }

  nav.globalMenuSp ul li a {
    display: block;
    color: #111;
    padding: .8em 1.5em;
    text-decoration :none;
    font-size:16px;
  }
  nav.globalMenuSp.active {
    transform: translateY(0%);
  }