@charset "utf-8";
:root {
  --vw: 100px;
  --vh: 100px;
}
/* そのまま幅と高さが入る */
/* vw */
/* 同一アスペクト比 by width */
@media (min-width: 769px),print {
  .mv {
    position: relative;
    overflow: hidden;
    background-color: #000;
    -webkit-perspective: 1px;
            perspective: 1px;
    /* &:after,
    &:before {
      content: '';
      width: 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      right: 0;
    }
    &:before {
      height: 397px;
      background-image: url("$(url)mv_bg_top.png");
      top: 0;
    }
    &:after {
      height: 344px;
      background-image: url("$(url)mv_bg_bot.png");
      bottom: 0;
    } 

    .row {
      position: relative;
    }

    &-des {
      text-align: center;
      padding-top: 40px;
    }
    &-title {
      margin: -17px 0 0 -63px;
      position: relative;
      z-index: 2;
      &:before {
        content: '';
        width: 515px;
        height: 161px;
        background: url('$(url)mv_bandroll.png') no-repeat;
        position: absolute;
        bottom: -84px;
        left: 12px;
        z-index: -1;
      }
    }
    &-girl {
      position: absolute;
      right: -89px;
      bottom: 0;
      z-index: -1;
      &:before {
        content: '';
        width: 689px;
        height: 437px;
        background: url("$(url)mv_box.png") no-repeat;
        position: absolute;
        top: -269px;
        right: 167px;
        z-index: -1;
      }
    }
    &-date {
      text-align: center;
      padding-top: 125px;
      padding-bottom: 40px;
      position: relative;
      z-index: 2;
    } */
  }
    .mv .row {
      max-width: 1400px;;
    }

  .content {
    background: rgba(244,244,244, .85);
  }
        .content .block-acd .bg_01 {
          background-image: url("/nazotoki/assets/images/top/bg/bg_01.png");
          background-size: auto;
        }
        .content .block-acd .bg_02 {
          background-image: url("/nazotoki/assets/images/top/bg/bg_02.png");
        }
        .content .block-acd .bg_03 {
          background-image: url("/nazotoki/assets/images/top/bg/bg_03.png");
        }
        .content .block-acd .bg_04 {
          background-image: url("/nazotoki/assets/images/top/bg/bg_04.png");
        }
      .content .block-acd .accordion {
        width: 860px;
        margin: auto;
      }
        .content .block-acd .accordion:not(:last-of-type) {
          margin-bottom: 40px;
        }

        .content .block-acd .accordion__trigger {
          padding-bottom: 20px;
        }
        .content .block-acd .accordion__inner {
          background-size: 831px 100%;
        }
    .block-top {
      padding-top: 40px;
      padding-bottom: 87px;
    }
      .block-top .ttl-lg {
        margin-bottom: 55px;
      }
      .block-firstMs .ttl-lg {
        position: relative;
      }
      .block-firstMs_ctn {
        margin-top: -3px;
        padding: 50px 0 105px;
        background: url("/nazotoki/assets/images/top/firstMs.png") no-repeat -3px 0;
      }
        .block-firstMs_ctn h3 {
          text-align: center;
        }
        .block-firstMs_ctn .list {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          width: 830px;
          margin: 15px auto 0;
        }
          .block-firstMs_ctn .list li {
            width: 400px;
            margin-top: 17px;
          }
    .block-ctStory {
      padding: 80px 0 50px;
    }
      .block-ctStory .ttl-lg {
        margin-bottom: 26px;
      }
      .block-ctStory .des {
        color: #231815;
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 32px;
        text-align: center;
      }
        .block-ctStory .des:after,
        .block-ctStory .des:before {
          display: block;
          width: 0;
          height: 0;
          margin: auto;
          border-top: 35px solid #fff;
          border-right: 20px solid transparent;
          border-left: 20px solid transparent;
          content: '';
        }
        .block-ctStory .des:before {
          margin-bottom: 21px;
        }

        .block-ctStory .des span {
          display: block;
          margin-top: 31px;
          margin-bottom: 25px;
        }
    .block-joinus {
      padding: 58px 0;
      background: url("/nazotoki/assets/images/top/mark.png") repeat;
    }
      .block-joinus img {
        display: block;
        margin: auto;
      }
      .block-map_title {
        padding: 60px 0 40px;
        text-align: center;
      }
        .block-map_title img {
          display: block;
          margin: auto;
        }
        .block-map_title span {
          display: block;
          margin-top: 95px;
          color: #711a1f;
          font-size: 2.1rem;
          font-weight: 700;
          line-height: 36px;
        }
        .block-map_title.none {
          padding: 0 0 0;
        }
    .block-bot {
      padding: 63px 0 79px;
    }
      .block-bot .courses {
        margin-bottom: 76px;
      }
        .block-bot .courses-ctn {
          padding: 21px 27px 18px;
        }
        .block-bot .courses-head-txt {
          margin-bottom: 30px;
          margin-left: 1em;
          padding-left: 100px;
          text-indent: -1em;
        }
        .block-bot .courses-txt {
          margin-left: 1em;
          padding-left: 30px;
          text-indent: -1em;
        }
      .block-bot .gift {
        margin-bottom: 45px;
      }
        .block-bot .gift .ttl-lg {
          margin-top: 65px;
          margin-bottom: 20px;
        }
        .block-bot .gift-ctn {
          padding: 38px 63px 29px;
        }

    .block .step {
      width: 700px;
      margin: auto;
      padding: 30px 0 12px;
      counter-reset: bx;
    }
      .block .step ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }
        .block .step ul li {
          width: 330px;
        }
          .block .step ul li img {
            width:100%;
          }
          .block .step ul li:nth-child(n+3) {
            margin-top: 30px;
          }
      .block .step-box {
        position: relative;
        counter-increment: bx;
      }
        .block .step-box:not(:last-of-type) {
          padding-bottom: 63px;
        }
          .block .step-box:not(:last-of-type):after {
            position: absolute;
            bottom: 17px;
            left: 50%;
            margin-right: -50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            border-top: 25px solid #fff;
            border-right: 14px solid transparent;
            border-left: 14px solid transparent;
            content: '';
          }
        .block .step-box_inner {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          position: relative;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          width: 699px;
          height: 132px;
          background: url("/nazotoki/assets/images/top/bg_step.png") no-repeat;
          background-size: contain;
          -webkit-perspective: 1px;
                  perspective: 1px;
        }
          .block .step-box_inner:before {
            z-index: -1;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            color: rgba(113,26,31, .2);
            font-size: 10rem;
            font-weight: 700;
            line-height: 1;
            content: counter(bx);
          }
          .block .step-box_inner p {
            color: #231815;
            font-size: 1.6rem;
            font-weight: 700;
            line-height: 30px;
          }

        .block .step-box .pos {
          margin-top: 20px;
          padding: 13px 30px 14px;
          background: rgba(80,42,42, .5);
          color: #fff;
          font-size: 1.6rem;
          font-weight: 700;
          line-height: 30px;
        }
          .block .step-box_01 img {
            width: 77px;
            margin-left: 17px;
          }
          .block .step-box_02 img {
            width: 85px;
            margin-left: 13px;
          }
            .block .step-box_03 img:first-child {
              width: 55px;
              margin-right: 18px;
            }
            .block .step-box_03 img:last-child {
              width: 85px;
              margin-left: 24px;
            }
          .block .step-box_04 img {
            width: 85px;
            margin-left: 38px;
          }
          .block .step-box_05 img {
            width: 73px;
            margin-left: 40px;
          }
          .block .step-box_06 img {
            width: 63px;
            margin-left: 30px;
          }
    .block .story {
      width: 568px;
      margin: auto;
      margin-top: -2px;
      padding-bottom: 50px;
      counter-reset: it;
    }

      .block .story-items {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 33px 0 34px 23px;
        background: url("/nazotoki/assets/images/top/line-white.png") no-repeat left bottom;
        background-size: contain;
        counter-increment: it;
      }
        .block .story-items_number {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 auto;
                  flex: 0 0 auto;
          margin-right: 10px;
          color: #231815;
          font-size: 1.8rem;
          font-weight: 700;
          line-height: 36px;
        }
        .block .story-items_ctn {
          color: #231815;
          font-size: 1.6rem;
          font-weight: 700;
          line-height: 36px;
        }
          .block .story-items_ctn .space {
            display: block;
            margin: 36px 0 35px;
          }
            .block .story-items_ctn .dot li {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
            }
              .block .story-items_ctn .dot li:before {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 auto;
                        flex: 0 0 auto;
                content: '・';
              }
}
@media only screen and (max-width: 768px) {
  .mv {
    /* background: url("$(url)mv_bg_sp.png");
    background-size: 100% 100%;
    padding-top: vw(79); */
    position: relative;
    overflow: hidden;
    background-color: #000;

    /* &-des {
      width: vw(529);
      height: vw(74);
      margin: 0 auto;
      position: relative;
      left: vw(2);
    }
    &-title {
      width: vw(630);
      height: vw(532);
      margin-top: vw(34);
      margin-left: vw(-36);
    }
    &-girl {
      display: flex;
      justify-content: flex-end;
      margin: vw(-30) vw(-54) 0;
      img {
        width: vw(445);
        height: vw(597);
      }
    }
    &-date {
      width: 100%;
      padding-left: vw(4);
      position: absolute;
      left: 0;
      bottom: vw(32);
      img {
        display: block;
        width: vw(430);
        height: vw(113);
        margin: auto;
      }
    } */
  }
    .mv .row {
      padding: 0;
    }
  main {
    padding-top: 0.26041666666666663vw;
  }
  .content {
    width: 85.9375vw;
    margin: auto;
    padding: 0;
    background: rgba(244,244,244, .85);
  }

    .content .block-acd {
      padding: 0 1.953125vw;
    }
        .content .block-acd .bg_01 {
          background-image: url("/nazotoki/assets/images/top/bg/bg_01_sp.png");
        }
        .content .block-acd .bg_02 {
          background-image: url("/nazotoki/assets/images/top/bg/bg_02_sp.png");
        }
        .content .block-acd .bg_03 {
          background-image: url("/nazotoki/assets/images/top/bg/bg_03_sp.png");
        }
        .content .block-acd .bg_04 {
          background-image: url("/nazotoki/assets/images/top/bg/bg_04_sp.png");
        }
        .content .block-acd .accordion:not(:last-of-type) {
          margin-bottom: 4.947916666666666vw;
        }
        .content .block-acd .accordion__inner {
          padding-right: 0;
          padding-left: 0;
          background-size: 100% 100%;
        }
    .block-top {
      padding-top: 7.421875vw;
      padding-bottom: 9.375vw;
    }
      .block-top .ttl-lg {
        margin-bottom: -0.78125vw;
      }
      .block-firstMs .ttl-lg {
        position: relative;
      }
      .block-firstMs_ctn {
        margin-top: -0.390625vw;
        margin-right: -0.9114583333333334vw;
        padding: 9.244791666666668vw 0.9114583333333334vw 10.026041666666668vw 0;
        background: url("/nazotoki/assets/images/top/firstMs_sp.png") no-repeat -0.26041666666666663vw 0;
        background-size: contain;
      }
        .block-firstMs_ctn h3 {
          margin-bottom: 5.729166666666666vw;
          text-align: center;
        }
          .block-firstMs_ctn h3 img {
            height: 5.989583333333334vw;
          }
        .block-firstMs_ctn .list {
          width: 64.0625vw;
          margin: auto;
        }
            .block-firstMs_ctn .list li:first-child {
              margin-bottom: -3.515625vw;
            }
            .block-firstMs_ctn .list li + li {
              margin-top: 5.208333333333334vw;
            }
    .block-ctStory {
      padding: 8.333333333333332vw 0 5.338541666666666vw;
    }
      .block-ctStory .ttl-lg {
        margin-bottom: 5.338541666666666vw;
      }
      .block-ctStory .des {
        color: #231815;
        font-size: 3.6458333333333335vw;
        font-weight: 700;
        line-height: 6.510416666666667vw;
        text-align: center;
      }
        .block-ctStory .des:after,
        .block-ctStory .des:before {
          display: block;
          width: 0;
          height: 0;
          margin: auto;
          border-top: 4.557291666666666vw solid #fff;
          border-right: 2.604166666666667vw solid transparent;
          border-left: 2.604166666666667vw solid transparent;
          content: '';
        }
        .block-ctStory .des:before {
          margin-bottom: 3.3854166666666665vw;
        }

        .block-ctStory .des span {
          display: block;
          margin-top: 6.380208333333333vw;
          margin-bottom: 4.036458333333334vw;
        }
    .block-joinus {
      padding: 7.161458333333333vw 0 7.682291666666667vw;
      background: url("/nazotoki/assets/images/top/mark.png") repeat;
      background-size: 1.3020833333333335vw 1.3020833333333335vw;
    }
      .block-joinus img {
        display: block;
        height: 10.416666666666668vw;
        margin: auto;
      }
      .block-map_title {
        padding: 6.901041666666667vw 0 2.34375vw;
        text-align: center;
      }
        .block-map_title img {
          display: block;
          height: 10.677083333333332vw;
          margin: auto;
        }
        .block-map_title span {
          display: block;
          margin: 5.208333333333334vw 0 2.604166666666667vw;
          color: #711a1f;
          font-size: 3.6458333333333335vw;
          font-weight: 700;
          line-height: 6.510416666666667vw;
        }
        .block-map_title.none {
          margin-bottom: 5.208333333333334vw;
          padding: 0 0 0;
        }
    .block-bot {
      padding: 7.291666666666667vw 0 6.380208333333333vw;
    }
      .block-bot .courses {
        margin-bottom: 11.197916666666668vw;
      }
        .block-bot .courses-ctn {
          padding: 2.34375vw 6.380208333333333vw 5.598958333333334vw;
        }
        .block-bot .courses-head-txt {
          margin-bottom: 6.510416666666667vw;
          margin-left: 3.125vw;
          padding: 0 3.90625vw;
          font-size: 3.125vw;
          text-indent: -2.34375vw;
        }
        .block-bot .courses-txt {
          margin-left: 3.125vw;
          padding: 0 6.510416666666667vw 3.90625vw;
          font-size: 3.125vw;
          text-indent: -2.34375vw;
        }
      .block-bot .gift {
        margin-bottom: 5.338541666666666vw;
      }
        .block-bot .gift .ttl-lg {
          margin-bottom: 5.989583333333334vw;
        }
        .block-bot .gift-ctn {
          padding: 3.2552083333333335vw 3.90625vw 5.208333333333334vw;
        }

    .block .step {
      width: 72.65625vw;
      margin: auto;
      padding: 3.6458333333333335vw 0 2.734375vw;
      counter-reset: bx;
    }
          .block .step ul li + li {
            margin-top: 3.90625vw;
          }
      .block .step-box {
        position: relative;
        counter-increment: bx;
      }
        .block .step-box:not(:last-of-type) {
          padding-bottom: 8.463541666666668vw;
        }
          .block .step-box:not(:last-of-type):after {
            position: absolute;
            bottom: 1.3020833333333335vw;
            left: 50%;
            margin-right: -50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            border-top: 4.557291666666666vw solid #fff;
            border-right: 2.604166666666667vw solid transparent;
            border-left: 2.604166666666667vw solid transparent;
            content: '';
          }
        .block .step-box_inner {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          position: relative;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          width: 100%;
          height: 35.15625vw;
          padding-left: 14.84375vw;
          background: url("/nazotoki/assets/images/top/bg_step_sp.png") no-repeat;
          background-size: contain;
          -webkit-perspective: 1px;
                  perspective: 1px;
        }
          .block .step-box_inner:before {
            z-index: -1;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            color: rgba(113,26,31, .2);
            font-size: 31.25vw;
            font-weight: 700;
            line-height: 1;
            content: counter(bx);
          }
          .block .step-box_inner p {
            color: #231815;
            font-size: 3.6458333333333335vw;
            font-weight: 700;
            line-height: 5.729166666666666vw;
          }

          .block .step-box_inner img {
            position: absolute;
            right: 0;
            bottom: 0;
          }

        .block .step-box .pos {
          margin-top: 1.3020833333333335vw;
          padding: 2.864583333333333vw 5.729166666666666vw 2.604166666666667vw;
          background: rgba(80,42,42, .5);
          color: #fff;
          font-size: 3.6458333333333335vw;
          font-weight: 700;
          line-height: 5.729166666666666vw;
        }
          .block .step-box_01 img {
            width: 11.197916666666668vw;
            margin-right: 3.6458333333333335vw;
            margin-bottom: 3.125vw;
          }
          .block .step-box_02 img {
            width: 12.239583333333332vw;
            margin-right: 2.994791666666667vw;
            margin-bottom: 4.6875vw;
          }
            .block .step-box_03 img:first-child {
              right: auto;
              left: 2.473958333333333vw;
              width: 7.682291666666667vw;
              margin-bottom: 5.729166666666666vw;
            }
            .block .step-box_03 img:last-child {
              width: 11.848958333333332vw;
              margin-right: 2.34375vw;
              margin-bottom: 3.2552083333333335vw;
            }
          .block .step-box_04 img {
            width: 11.067708333333332vw;
            margin-right: 2.994791666666667vw;
            margin-bottom: 4.296875vw;
          }
          .block .step-box_05 img {
            width: 11.067708333333332vw;
            margin-right: 2.994791666666667vw;
            margin-bottom: 4.036458333333334vw;
          }
          .block .step-box_06 img {
            width: 9.114583333333332vw;
            margin-right: 4.036458333333334vw;
            margin-bottom: 4.947916666666666vw;
          }
    .block .story {
      width: 73.95833333333334vw;
      margin: -1.3020833333333335vw auto 0.6510416666666667vw;
      counter-reset: it;
    }
      .block .story-items {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 4.6875vw 0 7.03125vw 2.604166666666667vw;
        background: url("/nazotoki/assets/images/top/line-white.png") no-repeat left bottom;
        background-size: contain;
        counter-increment: it;
      }
        .block .story-items_number {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 auto;
                  flex: 0 0 auto;
          margin-right: 1.3020833333333335vw;
          color: #231815;
          font-size: 3.6458333333333335vw;
          font-weight: 700;
          line-height: 6.25vw;
        }
        .block .story-items_ctn {
          color: #231815;
          font-size: 3.6458333333333335vw;
          font-weight: 700;
          line-height: 6.25vw;
        }
          .block .story-items_ctn .space {
            display: block;
            margin: 6.380208333333333vw 0;
          }
          .block .story-items_ctn .dot {
            margin-left: -1.0416666666666665vw;
          }
            .block .story-items_ctn .dot li {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
            }
              .block .story-items_ctn .dot li:before {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 auto;
                        flex: 0 0 auto;
                content: '・';
              }
}