@charset "UTF-8";

/* common
--------------------------------------------- */
body {
  font-family: "Noto Sans", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
hr{
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.main img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.main {
  width: 100%;
  max-width: 750px;
  margin:  0 auto;
}
.p-box {
  position: relative;
}

/* 動画埋め込み 共通
--------------------------------------------- */
.video {
  position: relative;
  padding-top: 51.7%;
  cursor: pointer;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}



/* cv
--------------------------------------------- */
.cv-area {
  margin: 5% 0 10% 0;
}
.cv-area-fv {
  margin: 5% 0;
}
.cv-area-pos {
  position: absolute;
  left: 0;
  bottom: 3%;
  width: 100%;
}
.cv-area-pos02 {
  bottom: 5%;
}
.cv-area-pos02-cp {
  bottom: 3.5%;
}

.cv-btn {
  width: calc(706/750*100%);
  margin: 3% auto 2% auto;
  -webkit-animation: dokidoki 1.5s infinite;
  animation: dokidoki 1.5s infinite;
}
.cv-note {
  text-align: center;
  font-size: clamp(10px, calc((18 / 750) * 100vw), 18px);
}
.cv-btn-mitchi {
  position: absolute;
  right: 3%;
  bottom: 2%;
  width: calc(329/750*100%);
}
.btn-price {
  width: calc(533/750*100%);
  margin: 0 auto 10% auto;
}

@-webkit-keyframes dokidoki {
    0% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    5% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    95% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(1.05)
    }
}

@keyframes dokidoki {
    0% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    5% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    95% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    100% {
        -webkit-transform: scale(1.05)
    }
}


/* FAQ スライド
--------------------------------------------- */

.qa-slide-bg {
  background-color: #1fbea1;
}
.qa-slide {
  position: relative;
  overflow: hidden;
  margin-top: -4%;
  margin-bottom: 8%;
  padding-bottom: 10%;
  z-index: 1;
}
.qa-slide .swiper-slide {
  padding: 0 4%;
}

.qa-slide .swiper-pagination {
  bottom: 4%;
}
.qa-slide .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 1;
}
.qa-slide .swiper-pagination-bullet-active  {
  background-color: #fff600;
  opacity: 1;
}
.qa-slide .swiper-button-prev,
.qa-slide .swiper-button-next {
  position: absolute;
  top: 45%;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(25px, calc((50 / 750) * 100vw), 50px);
  height: clamp(25px, calc((50 / 750) * 100vw), 50px);
  background-size: 100%;
}
.qa-slide .swiper-button-next {
  background-image: url(../img/qa_slide_icn_arrow.png);
  right: 5px;
}
.qa-slide .swiper-button-prev {
  background-image: url(../img/qa_slide_icn_arrow.png);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
  left: 5px;
}
.qa-slide .swiper-button-prev:after,
.qa-slide .swiper-button-next:after {
  content: none;
}
.qa-slide .swiper-button-disabled {
  display: none;
}

@media (min-width: 750px) {
  .qa-slide .swiper-pagination {
    bottom: 6%;
  }
  .qa-slide .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    margin: 0 15px !important;
  }
}


/* BA音声
--------------------------------------------- */

/* BAボタン共通 */
.audio-btn {
  outline: none;
}

/* beforeボタン */
.audio-btn-before {
  position: absolute;
  left: 2%;
  bottom: 4%;
  width: calc(192/750*100%);
  background: url(../img/ba_btn_before_play.png) no-repeat top left;
  background-size: 100%;
  z-index: 1;
}
.audio-btn-before.is-stop {
  background: url(../img/ba_btn_before_stop.png) no-repeat top left;
  background-size: 100%;
}

/* afterボタン */
.audio-btn-after {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: calc(192/750*100%);
  background: url(../img/ba_btn_after_play.png) no-repeat top left;
  background-size: 100%;
  z-index: 1;
}
.audio-btn-after.is-stop {
  background: url(../img/ba_btn_after_stop.png) no-repeat top left;
  background-size: 100%;
}

.audio-btn img {
  transition: all 1s;
  opacity: 1;
}
.audio-btn:hover img,
.audio-btn.is-stop img {
  opacity: 0;
}

@media (min-width: 750px) {

  .audio-btn-before:hover {
    background: url(../img/ba_btn_before_on.png) no-repeat top left;
    background-size: 100%;
  }
  .audio-btn-after:hover {
    background: url(../img/ba_btn_after_on.png) no-repeat top left;
    background-size: 100%;
  }
}




/* interview
--------------------------------------------- */

/* 動画 */
.interview-video {
  width: calc(690/750*100%);
  margin: 0 auto 2% auto;
}

/* 音声 */
.interview-audio {
  margin: 6% 0 3% 0;
}

/* 続きを読むボタン */
.interview-more {
  position: relative;
  width: calc(420/750*100%);
  margin: 0 auto 10% auto;
  cursor: pointer;
}
.interview-more::before {
  content: "";
  position: absolute;
  top: 42%;
  right: 10%;
  border-right: clamp(5px, calc((12 / 750) * 100vw), 12px) solid transparent;
  border-top: clamp(10px, calc((20 / 750) * 100vw), 20px) solid #fff;
  border-left: clamp(5px, calc((12 / 750) * 100vw), 12px) solid transparent;
}
.interview-more.is-active::before {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

/* インタビュー内容 */
.interview-qa {
  display: none;
  width: calc(690/750*100%);
  margin: 0 auto;
  line-height: 1.6;
}
.interview-qa dt,
.interview-qa dd {
  display: flex;
  justify-content: space-between;
}
.interview-qa dt {
  padding: calc(40/750*100%) 0;
}
.interview-qa dd {
  padding-bottom: calc(50/750*100%);
  text-align: justify;
  text-justify: inter-ideograph;
  word-wrap : break-word;
}

/* 区切り線 */
.interview-line {
  width: calc(690/750*100%);
  margin: 0 auto calc(100/750*100%) auto;
}

.interview-qa dd:not(:last-child),
.interview-line {
  border-bottom: 1px solid #e9f7f7;
}

@media (min-width: 750px) {
  .interview-qa dd:not(:last-child),
  .interview-line {
    border-bottom: 2px solid #e9f7f7;
  }
}

.interview-qa_icn {
  width: calc(45/750*100%);
}
.interview-qa_q,
.interview-qa_a {
  width: 91%;
}
.interview-qa_q {
  font-weight: 700;
  font-size: clamp(15px, calc((30 / 750) * 100vw), 30px);
}
.interview-qa_a {
  font-size: clamp(15px, calc((30 / 750) * 100vw), 30px);
}



/* media
--------------------------------------------- */
.media-slide {
  position: absolute;
  top: 29%;
  left: 0;
  width: 100%;
  overflow: hidden;
}

/* スライドをスーッと動かす */
.media-slide > .swiper-wrapper{
  transition-timing-function:linear!important;
}


/* 共通アコーディオン
--------------------------------------------- */
.aco-btn {
  position: relative;
  width: calc(690/750*100%);
  margin: 5% auto 0 auto;
  cursor: pointer;
}

.aco-btn-mb {
  margin-bottom: 5%;
}
.aco-btn::before {
  content: "";
  position: absolute;
  top: 48%;
  right: 7%;
  border-right: clamp(5px, calc((12 / 750) * 100vw), 12px) solid transparent;
  border-top: clamp(10px, calc((20 / 750) * 100vw), 20px) solid #fff;
  border-left: clamp(5px, calc((12 / 750) * 100vw), 12px) solid transparent;
}
.aco-btn.is-active::before {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

.aco-area {
  display: none;
}


/* reason
--------------------------------------------- */

/* スライド 日本人コーチの紹介 */
.reason03-slide {
  position: relative;
  overflow: hidden;
  background-color: #eef3fb;
  padding-bottom: 12%;
}

.reason03-slide .swiper-pagination {
  bottom: 4%;
}
.reason03-slide .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 1;
}
.reason03-slide .swiper-pagination-bullet-active  {
  background-color: #f03038;
  opacity: 1;
}
.reason03-slide .swiper-button-prev,
.reason03-slide .swiper-button-next {
  position: absolute;
  top: 45%;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(37.5px, calc((75 / 750) * 100vw), 75px);
  height: clamp(37.5px, calc((75 / 750) * 100vw), 75px);
  background-size: 100%;
}
.reason03-slide .swiper-button-next {
  background-image: url(../img/reason03_slide_icn_arrow.png);
  right: 5px;
}
.reason03-slide .swiper-button-prev {
  background-image: url(../img/reason03_slide_icn_arrow.png);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
  left: 5px;
}
.reason03-slide .swiper-button-prev:after,
.reason03-slide .swiper-button-next:after {
  content: none;
}
.reason03-slide .swiper-button-disabled {
  display: none;
}

@media (min-width: 750px) {
  .reason03-slide .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    margin: 0 15px !important;
  }
}


/* スライド 外国人プロ講師の紹介 */
.reason05-slide {
  position: relative;
  overflow: hidden;
  background-color: #1fbea1;
  padding-bottom: 12%;
}

.reason05-slide .swiper-pagination {
  bottom: 4%;
}
.reason05-slide .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 1;
}
.reason05-slide .swiper-pagination-bullet-active  {
  background-color: #fff600;
  opacity: 1;
}
.reason05-slide .swiper-button-prev,
.reason05-slide .swiper-button-next {
  position: absolute;
  top: 45%;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(37.5px, calc((75 / 750) * 100vw), 75px);
  height: clamp(37.5px, calc((75 / 750) * 100vw), 75px);
  background-size: 100%;
}
.reason05-slide .swiper-button-next {
  background-image: url(../img/reason05_slide_icn_arrow.png);
  right: 5px;
}
.reason05-slide .swiper-button-prev {
  background-image: url(../img/reason05_slide_icn_arrow.png);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
  left: 5px;
}
.reason05-slide .swiper-button-prev:after,
.reason05-slide .swiper-button-next:after {
  content: none;
}
.reason05-slide .swiper-button-disabled {
  display: none;
}

@media (min-width: 750px) {
  .reason05-slide .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    margin: 0 15px !important;
  }
}

/* 動画 */
.reason01-video {
  position: absolute;
  left: 50%;
  top: 7%;
  width: calc(690/750*100%);
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.reason02-video {
  position: absolute;
  left: 50%;
  top: 5%;
  width: calc(690/750*100%);
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}



/* qa
--------------------------------------------- */
.qa_inner {
  background-color: #1fbea1;
  padding: 0 4% 10.4% 4%;
}
.qa_list dt {
  position: relative;
  cursor: pointer;
}
.qa_list dt:after {
  content: "";
  position: absolute;
  top: 44%;
  right: 3%;
  width: clamp(15px, calc((31 / 750) * 100vw), 31px);
  padding-top: 3%;
  background: url(../img/qa_icn_arrow.png) no-repeat;
  background-size: 100%;
}
.qa_list dt.is-active:after {
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}
.qa_list dt:not(:first-child) {
  margin-top: 4%;
}
.qa_list dd {
  display: none;
}



/* footer
--------------------------------------------- */

.footer {
  background: #f03038
}
.footer .footerInner {
  padding: 6.4% 0;
  margin: 0 auto
}
.footer .footerList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 4%;
}
.footer .footerItem {
  position: relative;
  margin: 0 8px;
  font-size: clamp(10px, calc((16 / 750) * 100vw), 16px);
  line-height: 1;
  color: #fff;
}
.footer .footerItem:not(:last-child)::after {
  position: absolute;
  top: 0;
  right: -8px;
  display: block;
  width: 1px;
  height: 100%;
  content: "";
  background: #fff;
}
.footer .footerCopy {
  line-height: 1;
  color: #fff;
  text-align: center;
  font-size: clamp(10px, calc((16 / 750) * 100vw), 16px);
}

@media (min-width: 750px) {
  .footer .footerInner {
    padding: 50px 0;
  }
  .footer .footerList {
    margin-bottom: 25px;
  }
}

/* utility
--------------------------------------------- */
.mt3 {
    margin-top: 3% !important;
}
.mt8 {
    margin-top: 8% !important;
}
.mt15 {
    margin-top: 15% !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
.mb5 {
    margin-bottom: 5% !important;
}
.mb8 {
    margin-bottom: 8% !important;
}
.mb10 {
    margin-bottom: 10% !important;
}

/* 注釈 */
.note-r {
  text-align: right;
  margin: 0 5% 8% 0;
  font-size: clamp(10px, calc((16 / 750) * 100vw), 16px);
}