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

/*--- keyVisual ---*/
.top-lesson-ttl h2, .top-message-copy, .top-renewal-detail-content-type-info-ttlArea-type, .top-renewal-detail-ttlArea-ttl {
  font-family: "Noto Sans", sans-serif
}
.keyVisual-bnrArea-inner .swiper-wrapper, .top-message {
  text-align: center
}
/*--- ぺージごとの表示 ---*/
.keyVisual {
  height: 50vh;
  min-height: 760px;
  margin-bottom: 25px;
}
@media only screen and (max-width: 768px) {
  .keyVisual {
  height: 50vh;
  min-height: inherit;
  }
}
.keyVisual {
  background: url("../img/main.png") #f0f1f6 no-repeat center center;
  background-attachment: scroll;
  background-size: cover;
  opacity: 0;
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-transition: ease-out .6s;
  transition: ease-out .6s;
  filter: grayscale(1);
}
.keyVisual.is-done {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  filter: grayscale(0);
}
/*//--- ぺージごとの表示 ---*/
.vertical {
    writing-mode: vertical-rl;
}
.keyVisual .big-text {
    position: inherit;
    top: 30%;
    left: 10%;
    width: 100%;
}
@media only screen and (max-width: 1024px) {
  .keyVisual .big-text {
    position: inherit;
    top: 80%;
    left: 0;
    width: 100%;
    padding: 0 5%;
  }
}
.keyVisual .font_bal_1 {
    font-size: 3.8rem;
    letter-spacing: .05em;
    line-height: 1;
}
.keyVisual .font_bal_2 {
    font-size: 1.8rem;
    letter-spacing: .01em;
    line-height: 1;
}
@media only screen and (max-width: 1024px) {
  .keyVisual .font_bal_1 {
    font-size: 6.8vw;
    letter-spacing: .05em;
    line-height: 1;
  }
  .keyVisual .font_bal_2 {
    font-size: 3.4vw;
    letter-spacing: -0.05em;
    line-height: 1;
  }
}
.keyVisual-main {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%)
}
.keyVisual-main-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /*width: 100vmin;*/
  max-width: 1300px;
  margin: 0 auto
}
.keyVisual-main-inner-image {
  position: relative
}

.keyVisual-main-inner-image.anm-photo1 {
  margin-top: 90px;
}
.keyVisual-main-inner-image.anm-photo2 {
  margin-top: 130px;
}
.keyVisual-main-inner-image.anm-photo3 {
  margin-top: 190px;
}
.keyVisual-main-inner-image.anm-photo4 {
  margin-top: 270px;
}
.keyVisual-main-inner-image.anm-photo5 {
  margin-top: 30px;
}

@media only screen and (max-width: 800px) {
  .keyVisual-main-inner-image.anm-photo1 {
  margin-top: 10%;
  }
  .keyVisual-main-inner-image.anm-photo2 {
  margin-top: 15%;
  }
  .keyVisual-main-inner-image.anm-photo3 {
  margin-top: 20%;
  }
  .keyVisual-main-inner-image.anm-photo4 {
  margin-top: 33%;
  }
  .keyVisual-main-inner-image.anm-photo5 {
  margin-top: 0;
  }
}
/*@media only screen and (max-width:1744px) {
  .keyVisual {
  background-image: url("../img/top/img_main_back.png");
  background-attachment: fixed;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
  }
}*/
@media only screen and (max-width:1024px) {
  .keyVisual {
  /*background-image: url("../img/top/img_main_back.png");
  background-attachment: fixed;
  background-size: auto;
  background-repeat: repeat;
  background-position: 4% 30%;*/
  }
}
@media only screen and (max-width:800px) {
  .keyVisual {
  /*background-image: url("../img/top/img_main_back.png");
  background-attachment: fixed;
  background-size: auto;
  background-repeat: repeat;
  background-position: 4% 30%;*/
  }
  .keyVisual-main-inner {
    width: 90%
  }
  .keyVisual-main-inner-logo {
    margin-left: 40px
  }
  .keyVisual-main-inner-image {
    margin-left: -2px;
  }
}
@media only screen and (max-width:600px) {
  .keyVisual {
  /*background-image: url("../img/top/img_main_back.png");
  background-attachment: fixed;
  background-size: auto;
  background-repeat: repeat;
  background-position: 4% 30%;*/
  }
  .keyVisual-main {
    top: 60%
  }
}
@media only screen and (max-width:400px) {
  /*.keyVisual-main {
    top: 45%
  }*/
}
.keyVisual-bnrArea {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 20px 0
}
.keyVisual-bnrArea-inner {
  width: 95%;
  max-width: 1500px;
  margin: 0 auto
}
.keyVisual-bnrArea-inner-swiperArea {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-right: auto;
  margin-left: 0
}
@media only screen and (max-width:800px) {
  .keyVisual-bnrArea {
    bottom: -10px
  }
  .keyVisual-bnrArea-inner-swiperArea {
    margin: 0 auto
  }
  .keyVisual-bnrArea-inner .swiper-slide {
    padding: 0 15%
  }
}
.keyVisual-bnrArea-inner .swiper-button-next, .keyVisual-bnrArea-inner .swiper-button-prev {
  margin-top: -30px;
  color: #fff
}
.keyVisual-bnrArea-inner .swiper-button-next::after, .keyVisual-bnrArea-inner .swiper-button-prev::after {
  font-size: 30px
}
@media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast:none) {
  .keyVisual-bnrArea-inner .swiper-button-prev::after {
    content: "<"
  }
  .keyVisual-bnrArea-inner .swiper-button-next::after {
    content: ">"
  }
}
.keyVisual-bnrArea-inner .swiper-pagination {
  position: relative
}
.keyVisual-bnrArea-inner .swiper-pagination-bullet {
  background: #fff;
  opacity: 1;
  margin-right: 5px
}
.keyVisual-bnrArea-inner .swiper-pagination-bullet:last-child {
  margin-right: 0
}
.keyVisual-bnrArea-inner .swiper-pagination-bullet-active {
  background: #54c3f1
}