@charset "utf-8";
/* CSS Document */

@import "reset.css";
@import "base_sp_min.css";
@import "rpst_reset_smp.css";

/*******************

 LP style

********************/
.cta-btn01 {
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/sp_cta_btn01.png) no-repeat top center; /*ボタン画像を入れる*/
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  display: block;
  width: 100%;
  height: 0; /* heightゼロにしてpaddingで高さをとると横幅に対しての比率で可変するようにできます */
  padding-bottom: 25%;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
/*   outline: 1px solid red; */
}
.cta-btn02 {
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/sp_cta_btn02.png) no-repeat top center; /*ボタン画像を入れる*/
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  display: block;
  width: 100%;
  height: 0; /* heightゼロにしてpaddingで高さをとると横幅に対しての比率で可変するようにできます */
  padding-bottom: 29%;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
/*   outline: 1px solid red; */
}
.cta-btn03 {
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/sp_cta_btn03.png) no-repeat top center; /*ボタン画像を入れる*/
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  display: block;
  width: 100%;
  height: 0; /* heightゼロにしてpaddingで高さをとると横幅に対しての比率で可変するようにできます */
  padding-bottom: 23%;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
/*   outline: 1px solid red; */
}
.cta-btn04 {
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/sp_btn01.png) no-repeat top center; /*ボタン画像を入れる*/
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  display: block;
  width: 100%;
  height: 0; /* heightゼロにしてpaddingで高さをとると横幅に対しての比率で可変するようにできます */
  padding-bottom: 25.5%;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
/*   outline: 1px solid red; */
}
.cta-btn05 {
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/sp_btn02.png) no-repeat top center; /*ボタン画像を入れる*/
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  display: block;
  width: 100%;
  height: 0; /* heightゼロにしてpaddingで高さをとると横幅に対しての比率で可変するようにできます */
  padding-bottom: 25.5%;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
/*   outline: 1px solid red; */
}


.gif1, .gif2,.gif3 {
  position: relative;
}
.gif1 p:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 84%;
}
.gif1 p:nth-of-type(3) {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 85%;
}
.gif2 p:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 84%;
}
.gif2 p:nth-of-type(3) {
  position: absolute;
  bottom: 18%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 86%;
}
.gif3 p:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 84%;
}
.gif3 p:nth-of-type(3) {
  position: absolute;
  bottom: 33%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 60%;
}
.cta-box>div {
  position: relative;
}
/* .cta-box>div:nth-of-type(1) div{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 82%;
} */
.cta-box div div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 82%;
}
.cta-btn-box,.cta-btn-box2 {
  position: relative;
}
.cta-btn-box div {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 84%;
}
.cta-btn-box2 div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 84%;
}

/*-------------------------------------------
 footer
-----------------------------------------------*/
.footer-link {
  text-align: center;
  margin-top: 8%;
  margin-bottom: 1em;
}
.footer-link li{
  font-size: .95rem;
  margin-bottom: .4em;
}
.footer-link a {
  color: #101010;
}
#copy {
  text-align: center;
  font-size: .75em;
  color: #fff;
  background-color: #fb7172;
  box-sizing: border-box;
  padding: .5em;
}



/*-------------------------------------------
追加CSS(フォーム)
-----------------------------------------------*/

div#lpshoppingcolumn {
    width: 95%;
}
.w120 {
    width: 40%;
}
.products_dt td {
    width: 87%;
}
#lpshoppingcolumn input[type=checkbox] + label {
    font-size: 16px;
}
#lpshoppingcolumn input[type=checkbox] + label {
    font-size: 16px !important;
}
#lpshoppingcolumn .register_btn {
    width: 66% !important;
}
#lpshoppingcolumn form .custom-select.w30 {
    width: 50%;
}
#lpshoppingcolumn h3.pdt20 {
    font-size: 24px;
}
#lpshoppingcolumn img.lp_submit_area {
    width: 80%;
}
#lpshoppingcolumn form .custom-select select {
    font-size: 20px !important;
}
#payment_area table td {
    width: 100%;
    float: left;
}
#payment_area table img {
    width: 70%;
}
#pagetop {
    width: 100% !important;
}
#footer_inner {
    width: 100% !important;
}

/*-------------------------------------------
追加CSS
-----------------------------------------------*/



/*-------------------------------------------
CTA下注意書き
-----------------------------------------------*/
.caution {
    padding: 4%;
    margin: 3%;
    font-size: 12pt;
    border: 1px solid #b7b7b7;
    border-radius: 10px;
    line-height: 1.8;
    text-align: justify;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

/*-------------------------------------------
ボタン
-----------------------------------------------*/
.cta_btn {
    margin: 4% 0 5%;
    filter: drop-shadow(0px 5px 4px #b4b4b4);
}


.btn_move{
    animation: btn_move 2.0s infinite;
}


@keyframes btn_move {
	0%,60%,80% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.85);
    }

    70% {
        transform: scale(0.95);
    }
}

.course_description{
    position: relative;
}

.absolute {
    position: absolute;
    bottom: 2%;
    right:0;
    left:0;
}


/*-------------------------------------------
動画
-----------------------------------------------*/

video{
    width: 100%;
}

/*-------------------------------------------
アコーディオン
-----------------------------------------------*/

.accordion_area {
    background-size: 100%;
    width:100%;/*背景の幅設定*/
    }
    .accordion_box{
    margin: 0 auto;
    width: 100%;
    }
    .ac_answer{
    display:none;
    }
    .active{
    border-radius: 0;
    overflow: hidden;
    }
    .ac_question{
    display: block;
    position: relative;
    cursor: pointer;
    }
    .ac_question::before{
    content: '';
    position: absolute;
    width: 4.8%;/*+、-の大きさ設定*/
    height: 1px;
    border-bottom: solid #DD1473;/*+、-の色設定*/
    /*border-bottom-width: 0.3vw;/*+、-の太さ設定*/
    margin: auto;
    top: 14%;
    bottom: 0;
    right: 6.2%;/*+、-の位置設定*/
    transform: rotate(0deg);
    transition: all .4s;
    z-index: 5;
    }
    .ac_question::after{
    content: '';
    position: absolute;
    width: 4.8%;/*+、-の大きさ設定*/
    height: 1px;
    border-bottom: solid #DD1473;/*+、-の色設定*/
    /*border-bottom-width: 0.3vw;/*+、-の太さ設定*/
    margin: auto;
    top: 14%;
    bottom: 0;
    right: 6.2%;/*+、-の位置設定*/
    transform: rotate(90deg);
    transition: all .4s;
    z-index: 5;
    }
    .active::before{
    transform: rotate(360deg);
    transition: all .4s;
    }
    .active::after{
    transform: rotate(360deg);
    transition: all .4s;
    }


/*-------------------------------------------
GIFの位置
-----------------------------------------------*/

.gifWrap{
  position: relative;
}

img.growGif {
    position: absolute;
    top: 33%;
    width: 68%;
    left: 50%;
    transform: translateX(-50%);
}