@media (min-width: 768px) {
  .spOnly {
    display: none;
  }
}

.container {
  font-family: "M PLUS Rounded 1c", sans-serif;
  overflow: hidden;
}
.container * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.container a[class$=__btn] {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.container a[class$=__btn]:hover {
  opacity: 0.7;
}
.container img {
  vertical-align: middle;
  width: 100%;
}

.header {
  font-weight: bold;
  width: 100%;
  padding: 10px 0;
  background: #fff;
  position: fixed;
  z-index: 999;
  -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.32);
          box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.32);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.header .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 1100px;
  padding: 10px 15px;
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .header .inner {
    display: block;
    padding: 0 15px;
  }
}
.header .logo {
  display: block;
}
@media (max-width: 1000px) {
  .header .logo {
    width: 150px;
  }
}
@media (max-width: 767px) {
  .header .logo {
    width: 75px;
  }
}
.header .logo a {
  display: block;
}
.header .headBtnArea {
  font-family: Arial, sans-serif;
  padding: 0;
}
@media (max-width: 1000px) {
  .header .headBtnArea {
    display: none;
  }
}
.header .headBtnArea.clm1 {
  max-width: 475px;
}
.header .headBtnArea.active {
  display: block;
  margin-top: 10px;
}
@media (max-width: 1000px) {
  .header .headBtnArea.active {
    margin: 10px auto 0;
  }
}
@media (max-width: 767px) {
  .header .headBtnArea.active {
    width: 236px;
    margin: 10px auto 0;
  }
}
.header .headBtnArea li {
  width: 220px;
}
@media (max-width: 767px) {
  .header .headBtnArea li {
    margin-right: 0 !important;
  }
}
.header .headBtnArea .btn01 {
  padding: 14px 16px 13px;
}
@media (max-width: 767px) {
  .header .headBtnArea .btn01 {
    margin-bottom: 10px;
  }
}
@media (max-width: 640px) {
  .header .headBtnArea .btn01 {
    padding: 10px 16px 9px;
  }
}
.header__burgerBtn {
  display: none;
  width: 26px;
  height: 25px;
  position: absolute;
  right: 20px;
  top: 24px;
  cursor: pointer;
  z-index: 12;
}
@media (max-width: 1000px) {
  .header__burgerBtn {
    display: block;
  }
}
@media (max-width: 767px) {
  .header__burgerBtn {
    top: 10px;
  }
}
.header__burgerBtnLine {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  width: 100%;
  height: 2px;
  margin-top: -2px;
  background-color: #50408d;
  font-size: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  border-radius: 3px;
}
.header__burgerBtnLine::before, .header__burgerBtnLine::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: #50408d;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  border-radius: 3px;
}
.header__burgerBtnLine::before {
  -webkit-transform: translateY(-250%);
          transform: translateY(-250%);
  top: -4px;
}
.header__burgerBtnLine::after {
  -webkit-transform: translateY(250%);
          transform: translateY(250%);
  bottom: -4px;
}
.header__burgerBtn.active .header__burgerBtnLine {
  background-color: transparent;
}
.header__burgerBtn.active .header__burgerBtnLine::before, .header__burgerBtn.active .header__burgerBtnLine::after {
  width: 100%;
  background: #50408d;
}
.header__burgerBtn.active .header__burgerBtnLine::before {
  -webkit-transform: translateY(0) rotate(45deg);
          transform: translateY(0) rotate(45deg);
  top: 2px;
}
.header__burgerBtn.active .header__burgerBtnLine::after {
  -webkit-transform: translateY(0) rotate(-45deg);
          transform: translateY(0) rotate(-45deg);
  bottom: -2px;
}

.main_vi_sct {
  padding-top: 104px;
}
@media (max-width: 1000px) {
  .main_vi_sct {
    padding-top: 73px;
  }
}
@media (max-width: 767px) {
  .main_vi_sct {
    padding-top: 46px;
  }
}

.lead::before {
  content: "";
  display: block;
  background-image: url(../img/img_arrow_01.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 67px;
  height: 107px;
  margin: 50px auto;
}
@media (max-width: 767px) {
  .lead::before {
    width: 30px;
    height: 48px;
    margin: 20px auto;
  }
}
.lead__ttl {
  color: #50408d;
  font-size: 28px;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .lead__ttl {
    font-size: 22px;
    padding: 0 15px;
  }
}
.lead__bdTtl {
  display: inline-block;
  border: 2px solid #50408d;
  font-size: 22px;
  margin-top: 5px;
  padding: 3px 20px;
  font-weight: 800;
}
@media (max-width: 767px) {
  .lead__bdTtl {
    font-size: 18px;
  }
}
.lead__img {
  max-width: 800px;
  margin: 0 auto 85px;
}
@media (max-width: 767px) {
  .lead__img {
    margin-bottom: 40px;
  }
}

.old {
  position: relative;
}
.old__img {
  max-width: 301px;
  display: block;
  margin: 0 auto -39px;
  position: relative;
  z-index: 2;
}
@media (max-width: 1100px) {
  .old__img {
    max-width: 27.36vw;
    margin-bottom: -3.55vw;
  }
}
.old__lgTtl {
  text-align: center;
  position: absolute;
  top: 90px;
  right: 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
  font-weight: 800;
  font-size: 30px;
  color: #373737;
  width: 100%;
  z-index: 2;
}
@media (max-width: 1100px) {
  .old__lgTtl {
    top: 8.18vw;
    font-size: 2.73vw;
  }
}
.old__smTtl {
  font-weight: 500;
  font-size: 21px;
}
@media (max-width: 1100px) {
  .old__smTtl {
    font-size: 1.91vw;
  }
}
.old__kvWrap {
  position: relative;
  z-index: 1;
}
.old__kvWrap::before {
  content: "";
  display: block;
  width: 100%;
  height: 89.62%;
  max-height: 475px;
  position: absolute;
  top: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, #9e9e9e), color-stop(0%, #cccccc));
  background: linear-gradient(to right, #9e9e9e 50%, #cccccc 0%);
  z-index: -1;
}
.old__kv {
  display: block;
  margin: 0 auto;
  max-width: 1100px;
}

.now {
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, #ffecdc), color-stop(0%, #cef5ff));
  background: linear-gradient(to right, #ffecdc 50%, #cef5ff 0%);
  margin: -55px 0 75px;
  position: relative;
}
@media (max-width: 1100px) {
  .now {
    margin: -5vw 0 30px;
  }
}
.now::before {
  content: "";
  display: block;
  width: 100%;
  height: 130px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (max-width: 1100px) {
  .now::before {
    height: 11.82vw;
  }
}
.now__img {
  max-width: 227px;
  display: block;
  padding-top: 130px;
  margin: 0 auto 30px;
}
@media (max-width: 1100px) {
  .now__img {
    max-width: 20.64vw;
    margin-bottom: 2.73vw;
    padding-top: 11.82vw;
  }
}
.now__lgTtl {
  text-align: center;
  font-weight: 800;
  font-size: 30px;
  color: #50408d;
  width: 100%;
  z-index: 2;
  margin-bottom: 60px;
}
@media (max-width: 1100px) {
  .now__lgTtl {
    top: 8.18vw;
    font-size: 2.73vw;
    margin-bottom: 5.45vw;
  }
}
.now__smTtl {
  font-weight: 500;
  font-size: 21px;
}
@media (max-width: 1100px) {
  .now__smTtl {
    font-size: 1.91vw;
  }
}

.fadeBox {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.fadeBox .item01 {
  width: 482px;
}
@media (max-width: 1100px) {
  .fadeBox .item01 {
    width: 43.82vw;
  }
}
.fadeBox .item02 {
  width: 660px;
  margin-left: 80px;
  position: relative;
}
@media (max-width: 1100px) {
  .fadeBox .item02 {
    width: 60vw;
    margin-left: 7.27vw;
  }
}
.fadeBox .item02::before {
  content: "";
  background-image: url(../img/img_bg_01.png);
  background-size: 100%;
  width: 1170px;
  height: 420px;
  display: block;
  position: absolute;
  top: 60px;
  left: -140px;
}
@media (max-width: 1100px) {
  .fadeBox .item02::before {
    width: 106.36vw;
    height: 38.18vw;
    top: 5.45vw;
    left: -12.73vw;
  }
}
.fadeBox .item03 {
  width: 460px;
  margin: -25px 0 0 30px;
}
@media (max-width: 1100px) {
  .fadeBox .item03 {
    width: 41.82vw;
    margin: -2.27vw 0 0 2.73vw;
  }
}
.fadeBox .item04 {
  width: 97px;
  margin: -280px 0 0 850px;
}
@media (max-width: 1100px) {
  .fadeBox .item04 {
    width: 8.82vw;
    margin: -25.45vw 0 0 77.27vw;
  }
}
.fadeBox .item05 {
  width: 685px;
  margin: -40px auto 0;
}
@media (max-width: 1100px) {
  .fadeBox .item05 {
    width: 62.27vw;
    margin: -3.64vw auto 0;
  }
}
.fadeBox .item06 {
  width: 560px;
  margin: 150px 0 0 340px;
  position: relative;
}
@media (max-width: 1100px) {
  .fadeBox .item06 {
    width: 50.91vw;
    margin: 13.64vw 0 0 30.91vw;
  }
}
.fadeBox .item06::before {
  content: "";
  display: block;
  width: 65px;
  height: 60px;
  background-image: url(../img/img_arrow_02.png);
  background-size: 100%;
  position: absolute;
  top: -120px;
  right: 59%;
}
@media (max-width: 1100px) {
  .fadeBox .item06::before {
    width: 5.91vw;
    height: 5.45vw;
    top: -10.91vw;
  }
}
.fadeBox .item07 {
  width: 527px;
  margin: -35px 0 0 10px;
  position: relative;
}
@media (max-width: 1100px) {
  .fadeBox .item07 {
    width: 47.91vw;
    margin: -3.18vw 0 0 0.91vw;
  }
}
.fadeBox .item07::before {
  content: "";
  background-image: url(../img/img_bg_02.png);
  background-size: 100%;
  width: 1170px;
  height: 420px;
  display: block;
  position: absolute;
  top: 90px;
  left: -70px;
}
@media (max-width: 1100px) {
  .fadeBox .item07::before {
    width: 106.36vw;
    height: 38.18vw;
    top: 8.18vw;
    left: -6.36vw;
  }
}
.fadeBox .item08 {
  width: 450px;
  margin: -465px 0 0 550px;
  position: relative;
  z-index: 1;
}
@media (max-width: 1100px) {
  .fadeBox .item08 {
    width: 40.91vw;
    margin: -42.27vw 0 0 50vw;
  }
}
.fadeBox .item09 {
  width: 720px;
  margin: -448px 0 0 180px;
  position: relative;
  z-index: 1;
}
@media (max-width: 1100px) {
  .fadeBox .item09 {
    width: 65.45vw;
    margin: -41.82vw 0 0 16.36vw;
  }
}
.fadeBox .item10 {
  width: 210px;
  margin: 230px auto 0;
  position: relative;
}
@media (max-width: 1100px) {
  .fadeBox .item10 {
    width: 19.09vw;
    margin: 20.91vw auto 0;
  }
}
.fadeBox .item10::before {
  content: "";
  display: block;
  width: 65px;
  height: 60px;
  background-image: url(../img/img_arrow_02.png);
  background-size: 100%;
  position: absolute;
  top: -140px;
  right: 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
@media (max-width: 1100px) {
  .fadeBox .item10::before {
    width: 5.91vw;
    height: 5.45vw;
    top: -12.73vw;
  }
}
.fadeBox .item10::after {
  content: "";
  background-image: url(../img/img_bg_03.png);
  background-size: 100%;
  width: 1170px;
  height: 420px;
  display: block;
  position: absolute;
  top: 90px;
  left: -490px;
}
@media (max-width: 1100px) {
  .fadeBox .item10::after {
    width: 106.36vw;
    height: 38.18vw;
    top: 8.18vw;
    left: -44.55vw;
  }
}
.fadeBox .item10 .fadeBox__img {
  position: relative;
  z-index: 1;
}
.fadeBox .item11 {
  width: 450px;
  margin: -220px 0 0 80px;
  position: relative;
  z-index: 1;
}
@media (max-width: 1100px) {
  .fadeBox .item11 {
    width: 40.91vw;
    margin: -20vw 0 0 7.27vw;
  }
}
.fadeBox .item12 {
  width: 360px;
  margin: -360px 0 0 610px;
  position: relative;
  z-index: 1;
}
@media (max-width: 1100px) {
  .fadeBox .item12 {
    width: 32.73vw;
    margin: -32.73vw 0 0 55.45vw;
  }
}
.fadeBox .item13 {
  width: 210px;
  margin: 180px auto 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 1100px) {
  .fadeBox .item13 {
    width: 19.09vw;
    margin: 16.36vw auto 0;
  }
}
.fadeBox .item13::before, .fadeBox .item13::after {
  content: "";
  display: block;
  width: 65px;
  height: 60px;
  background-image: url(../img/img_arrow_02.png);
  background-size: 100%;
  position: absolute;
  right: 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
@media (max-width: 1100px) {
  .fadeBox .item13::before, .fadeBox .item13::after {
    width: 5.91vw;
    height: 5.45vw;
  }
}
.fadeBox .item13::before {
  top: -140px;
}
@media (max-width: 1100px) {
  .fadeBox .item13::before {
    top: -12.73vw;
  }
}
.fadeBox .item13::after {
  bottom: -140px;
}
@media (max-width: 1100px) {
  .fadeBox .item13::after {
    bottom: -12.73vw;
  }
}
.fadeBox .item14 {
  width: 500px;
  margin: -206px 0 0 0;
}
@media (max-width: 1100px) {
  .fadeBox .item14 {
    width: 45.45vw;
    margin: -18.73vw 0 0 0;
  }
}
.fadeBox .item15 {
  width: 340px;
  margin: -300px 0 0 710px;
  position: relative;
}
@media (max-width: 1100px) {
  .fadeBox .item15 {
    width: 30.91vw;
    margin: -27.27vw 0 0 64.55vw;
  }
}
.fadeBox .item15::before {
  content: "";
  background-image: url(../img/img_bg_04.png);
  background-size: 100%;
  width: 585px;
  height: 420px;
  display: block;
  position: absolute;
  top: -30px;
  left: -180px;
}
@media (max-width: 1100px) {
  .fadeBox .item15::before {
    width: 53.18vw;
    height: 38.18vw;
    top: -2.73vw;
    left: -16.36vw;
  }
}
.fadeBox .item16 {
  width: 490px;
  margin: 150px 0 0 160px;
  position: relative;
}
@media (max-width: 1100px) {
  .fadeBox .item16 {
    width: 44.55vw;
    margin: 13.64vw 0 0 14.55vw;
  }
}
.fadeBox .item16::before {
  content: "";
  background-image: url(../img/img_bg_05.png);
  background-size: 100%;
  width: 1170px;
  height: 420px;
  display: block;
  position: absolute;
  top: 75px;
  left: -190px;
}
@media (max-width: 1100px) {
  .fadeBox .item16::before {
    width: 106.36vw;
    height: 38.18vw;
    top: 6.82vw;
    left: -17.27vw;
  }
}
.fadeBox .item17 {
  width: 680px;
  margin: -150px auto 0;
}
@media (max-width: 1100px) {
  .fadeBox .item17 {
    width: 61.82vw;
    margin: -13.64vw auto 0;
  }
}
.fadeBox__img {
  width: 100%;
  -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
  transition: opacity 0.8s, -webkit-transform 0.8s;
  transition: opacity 0.8s, transform 0.8s;
  transition: opacity 0.8s, transform 0.8s, -webkit-transform 0.8s;
  opacity: 0;
}
.fadeBox .fadeInUp {
  -webkit-transform: translate(0, -100px);
          transform: translate(0, -100px);
}
@media (max-width: 1100px) {
  .fadeBox .fadeInUp {
    -webkit-transform: translate(0, -9.09vw);
            transform: translate(0, -9.09vw);
  }
}
.fadeBox .fadeInLeft {
  -webkit-transform: translate(-100px, 0);
          transform: translate(-100px, 0);
}
@media (max-width: 1100px) {
  .fadeBox .fadeInLeft {
    -webkit-transform: translate(-9.09vw, 0);
            transform: translate(-9.09vw, 0);
  }
}
.fadeBox .fadeInRight {
  -webkit-transform: translate(100px, 0);
          transform: translate(100px, 0);
}
@media (max-width: 1100px) {
  .fadeBox .fadeInRight {
    -webkit-transform: translate(9.09vw, 0);
            transform: translate(9.09vw, 0);
  }
}
.fadeBox .active {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  opacity: 1;
}

.gifArea {
  margin-bottom: 150px;
}
@media (max-width: 767px) {
  .gifArea {
    margin-bottom: 60px;
  }
}
.gifArea__ttl {
  text-align: center;
  font-size: 25px;
  color: #50408d;
  margin-bottom: 10px;
}
@media (max-width: 767px) {
  .gifArea__ttl {
    font-size: 20px;
  }
}
.gifArea__gif {
  max-width: 846px;
  display: block;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .gifArea__gif {
    padding: 0 15px;
  }
}

.dlArea {
  background-color: #50408d;
  color: #fff;
  padding: 55px 0 100px;
}
@media (max-width: 767px) {
  .dlArea {
    padding: 25px 15px 50px;
  }
}
.dlArea__lead {
  text-align: center;
  font-size: 28px;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .dlArea__lead {
    font-size: 23px;
  }
}
.dlArea__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
@media (max-width: 767px) {
  .dlArea__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }
}
.dlArea__item {
  border-radius: 50%;
  width: 30.88%;
  height: 100%;
  border: 2px solid #fff;
  position: relative;
}
@media (max-width: 767px) {
  .dlArea__item {
    width: 200px;
  }
}
.dlArea__item:nth-child(-n+2) {
  margin-right: calc(7.36% / 2);
}
@media (max-width: 767px) {
  .dlArea__item:nth-child(-n+2) {
    margin-right: 0;
    margin-bottom: 15px;
  }
}
.dlArea__item::after {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.dlArea__txt {
  position: absolute;
  text-align: center;
  font-size: 20px;
  line-height: 1.65;
  width: 100%;
  top: 30%;
  right: 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
@media (max-width: 767px) {
  .dlArea__txt {
    font-size: 18px;
  }
}
.dlArea__txt::before {
  content: "";
  display: block;
  width: 35px;
  height: 24px;
  background-image: url(../img/img_check.png);
  background-size: 100%;
  position: absolute;
  top: -35px;
  right: 50%;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}
.dlArea__item:first-of-type .dlArea__txt {
  padding: 0.8em 0 0.5em;
}

.dlArea__img {
  max-width: 440px;
  display: block;
  margin: -30px auto 0;
  position: relative;
  z-index: 1;
}
.dlArea__btn {
  max-width: 620px;
  display: block;
  margin: -60px auto 0;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .dlArea__btn {
    margin-top: -40px;
  }
}
.dlArea__btnImg {
  width: 100%;
}

.movieArea {
  background-color: #ebebeb;
  padding: 90px 0 60px;
}
@media (max-width: 767px) {
  .movieArea {
    padding: 45px 0 30px;
  }
}
.movieArea__ttl {
  font-size: 28px;
  color: #50408d;
  text-align: center;
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .movieArea__ttl {
    font-size: 20px;
  }
}
.movieArea__movie {
  max-width: 504px;
  margin: 0 auto 5px;
}
@media (max-width: 767px) {
  .movieArea__movie {
    padding: 0 15px;
  }
}
.movieArea__movie .jp_movie_box::after {
  content: url(../img/icon_movie_01.png);
  width: 90px;
  height: 63px;
}
.movieArea__movie .jp_mov_img {
  display: block;
}
.movieArea__note {
  text-align: right;
  font-size: 10px;
  max-width: 650px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .movieArea__note {
    padding: 0 15px;
  }
}
.movieArea__btn {
  max-width: 620px;
  display: block;
  margin: 40px auto 0;
}
.movieArea__btnImg {
  width: 100%;
}
/*# sourceMappingURL=style.css.map */