@charset "UTF-8";

img {
  max-width: 100%;
  vertical-align: bottom;
}

/* =======================================
 layout
======================================= */
.wrap {
  margin: auto;
  max-width: 750px;
}

.button {
  display: block;
  height: 160px;
  margin: auto;
  position: relative;
}
.button--m {
  width: 570px;
}
.button--l {
  width: 620px;
}
.button::after {
  background: #145050;
  border-radius: 80px;
  bottom: -10px;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
}
.button img {
  position: relative;
  transition: transform 0.3s;
  z-index: 5;
}
@media (any-hover: hover) {
  .button:hover img {
    transform: translateY(10px);
  }
}
@media screen and (max-width: 750px) {
  .button {
    height: 21.333vw;
  }
  .button--m {
    width: 76vw;
  }
  .button--l {
    width: 82.667vw;
  }
  .button::after {
    border-radius: 10.667vw;
    bottom: -1.333vw;
  }
  .button:hover img {
    transform: translateY(0.133vw);
  }
}

.mv {
  background: #b4c3be;
}
.mv__cta {
  background: #f4a630;
  padding-bottom: 110px;
}
@media screen and (max-width: 750px) {
  .mv__cta {
    padding-bottom: 14.667vw;
  }
}

.support {
  background: #e61d35;
}

.point01 {
  background: #ebebeb;
}

.point03 {
  background: url(../images/point03_bg.png) 0 100% / 100% auto no-repeat #ebebeb;
  padding-bottom: 140px;
}
.video {
  padding-top: 20px;
}
.movie {
  height: 360px;
  position: relative;
  margin: 48px auto 0;
  width: 640px;
}
.movie iframe,
.movie video {
  height: 100%;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
}
@media screen and (max-width: 750px) {
  .point03 {
    padding-bottom: 18.667vw;
  }
  .video {
    padding-top: 2.667vw;
  }
  .movie {
    height: 48vw;
    margin: 6.4vw auto 0;
    width: 85.333vw;
  }
}

.instructor {
  background: #f5a730;
}
.instructor__slider {
  padding: 72px 0 32px 30px;
}
.instructor__item {
  padding: 0 20px;
  width: 670px;
}
.instructor__item img {
  border-radius: 20px;
  box-shadow: 10px 10px 10px rgba(155, 88, 4, 0.5);
}
@media screen and (max-width: 750px) {
  .instructor__slider {
    padding: 9.6vw 0 4.267vw 4vw;
  }
  .instructor__item {
    padding: 2.667vw;
    width: 89.333vw;
  }
  .instructor__item img {
    border-radius: 2.667vw;
    box-shadow: 1.333vw 1.333vw 1.333vw rgba(155, 88, 4, 0.5);
  }
}

.voice {
  background: #ececec;
}
.nav {
  border-top: 1px solid #333;
  margin: 80px auto 0;
  padding: 40px 0;
  width: 624px;
}
.nav__list {
  display: flex;
  justify-content: center;
}
.nav__item {
  color: #333;
  font-size: 20px;
  line-height: 1;
}
.nav__item:not(:last-child)::after {
  content: "｜";
  margin: 0 1em;
}
.nav__link {
  color: #333;
}
@media (any-hover: hover) {
  .nav__link:hover {
    text-decoration: underline;
  }
}
@media screen and (max-width: 750px) {

  .nav {
    margin: 10.667vw auto 0;
    padding: 5.333vw 0;
    width: 83.2vw;
  }
  .nav__item {
    font-size: 2.667vw;
  }
}