@use "../../common_dart/base/setting" as *;
@use "../../common_dart/base/mixin" as *;

/* アニメーション */
@keyframes line_show {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes slide_up {
  0% {
    transform: translateY(30%) scale(.5);
  }
  75% {
      transform: translateY(-20%) scale(1);
      opacity: 1;
  }
  100% {
      transform: translateY(0) scale(1);
      opacity: 1;
  }
}

@keyframes show_letter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes line_scale {
  0% {
    transform: translateY(-50%) scale(0, 1);
  }
  100% {
    transform: translateY(-50%) scale(1, 1);
  }
}

.mv {
  &__wrapper {
    padding-top: get_vw(30);
    padding-bottom: get_vw(20);
    background: #ffe001 url("../images/genesis-alpha/bg_mv.png") center center /cover no-repeat;
    position: relative;
    @include query-min($break) {
      padding-top: 40px;
      background-image: url("../images/genesis-alpha/bg_mv_pc.png");
      text-align: center;
    }
  }
  &__inner {
    @include query-min($break) {
      display: inline-block;
      position: relative;
      max-width: 100%;
    }
  }
  &__title {
    margin-bottom: get_vw(45);
    text-align: center;
    @include query-min($break) {
      margin-bottom: 30px;
    }
    &__head {
      display: inline-block;
      width: get_vw(580);
      @include query-min($break) {
        width: 540px;
        margin: 0 auto;
      }
      &--big {
        width: get_vw(655);
        @include query-min($break) {
          width: 586px;
        }
      }
    }
    &__lead {
      display: block;
      width: get_vw(652);
      margin: 0 auto;
      @include query-min($break) {
        width: 510px;
        margin: 0 auto 0 0;
      }
    }
  }
  &__copies {
    margin-left: get_vw(50);
    margin-bottom: get_vw(60);
    display: flex;
    align-items: center;
    gap: get_vw(20);
    position: relative;
    @include query-min($break) {
      justify-content: center;
      margin-left: 0;
      margin-bottom: 20px;
      gap: 60px;
    }
  }
  &__copy {
    width: get_vw(600);
    text-align: center;
    position: relative;
    margin: 0 auto get_vw(48);
    @include query-min($break) {
      width: 800px;
      max-width: 100%;
      margin-bottom: 50px;
    }
    &--big {
      width: get_vw(698);
      @include query-min($break) {
        width: 800px;
      }
    }
    &--1 {
      padding-top: get_vw(53);
      @include query-min($break) {
        padding-top: 40px;
      }
    }
    &--2 {
      padding-top: get_vw(65);
      @include query-min($break) {
        padding-top: 50px;
      }
    }
    &__icon {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      &--1 {
        width: get_vw(53);
        top: get_vw(-10);
        @include query-min($break) {
          width: 43px;
          top: -10px;
        }
      }
      &--2 {
        width: get_vw(77);
        top: get_vw(-10);
        @include query-min($break) {
          width: 62px;
          top: -10px;
        }
      }
    }
    &__text {
      line-height: 1.07;
    }
    &__catch {
      font-size: get_vw(40);
      font-weight: bold;
      color: #cc9629;
      line-height: 1;
      margin-top: get_vw(5);
      @include query-min($break) {
        font-size: 30px;
        margin-top: 5px;
      }
      span {
        font-size: get_vw(22);
        writing-mode: vertical-rl;
        position: relative;
        top: get_vw(6);
        @include query-min($break) {
          font-size: 16px;
          top: 6px;
        }
      }
      strong {
        font-size: get_vw(50);
        position: relative;
        top: get_vw(3.5);
        @include query-min($break) {
          font-size: 38px;
          top: 3.5px;
        }
      }
      &--2 {
        margin-top: 0;
      }
    }
    &__plus {
      position: absolute;
      width: get_vw(40);
      height: get_vw(40);
      top: 50%;
      left: get_vw(190);
      transform: translateY(-50%);
      z-index: 1;
      @include query-min($break) {
        width: 40px;
        height: 40px;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  &__text {
    text-align: center;
    margin-bottom: get_vw(40);
    @include query-min($break) {
      margin-bottom: 30px;
    }
    p {
      display: inline-flex;
      align-items: center;
      font-size: get_vw(28);
      font-weight: 700;
      line-height: 1;
      position: relative;
      @include query-min($break) {
        font-size: 20px;
      }
      span {
        width: get_vw(40);
        height: get_vw(40);
        background-color: #000;
        color: #fff;
        font-size: get_vw(32);
        margin-right: get_vw(4);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding-bottom: get_vw(4);
        @include query-min($break) {
          width: 30px;
          height: 30px;
          font-size: 24px;
          margin-right: 4px;
          padding-bottom: 1px;
        }
        &:first-of-type {
          margin-left: get_vw(10);
          @include query-min($break) {
            margin-left: 6px;
          }
        }
        &:last-of-type {
          margin-right: get_vw(10);
          @include query-min($break) {
            margin-right: 6px;
          }
        }
      }
      &::before, &::after {
        position: absolute;
        content: "";
        width: get_vw(50);
        height: get_vw(4);
        background-color: #000;
        top: 50%;
        transform: translateY(-50%);
        @include query-min($break) {
          width: 190px;
          height: 2px;
        }
      }
      &::before {
        left: get_vw(-64);
        @include query-min($break) {
          left: -200px;
        }
      }
      &::after {
        right: get_vw(-64);
        @include query-min($break) {
          right: -200px;
        }
      }
    }
  }
  &__man {
    position: absolute;
    width: get_vw(212);
    right: get_vw(50);
    bottom: get_vw(216);
    @include query-min($break) {
      width: 180px;
      right: -204px;
      bottom: -40px;
    }
  }
  &__woman {
    display: none;
    @include query-min($break) {
      display: block;
      position: absolute;
      width: 189px;
      left: -226px;
      bottom: -23px;
    }
  }
  &__blue {
    position: relative;
    background-color: #36a4b3;
    padding: get_vw(22) 0 get_vw(30);
    z-index: 1;
    @include query-min($break) {
      padding: 10px 0 20px;
    }
  }
  &__cta {
    width: get_vw(710);
    margin: 0 auto;
    padding: get_vw(30) get_vw(30) get_vw(35);
    background-color: #fff6b2;
    @include query-min($break) {
      width: 800px;
      max-width: 100%;
      padding: 20px 0 15px;
    }
  }
  &__start {
    font-size: get_vw(32);
    font-weight: bold;
    text-align: center;
    margin-bottom: get_vw(15);
    @include query-min($break) {
      font-size: 24px;
      margin-bottom: 10px;
    }
    span {
      position: relative;
      display: inline-block;
        &::before {
          position: absolute;
          content: "";
          width: get_vw(6);
          height: get_vw(6);
          background-color: #000;
          top: get_vw(-4);
          left: 50%;
          transform: translateX(-50%);
          border-radius: 50%;
          @include query-min($break) {
            width: 6px;
            height: 6px;
            top: -3px;
          }
        }
    }
  }
  &__up {
    text-align: center;
    margin-bottom: get_vw(15);
    @include query-min($break) {
      margin-bottom: 10px;
    }
    span {
      font-size: get_vw(32);
      font-weight: 700;
      position: relative;
      @include query-min($break) {
        font-size: 24px;
      }
      &::before, &::after {
        position: absolute;
        content: "";
        width: get_vw(2);
        height: get_vw(28);
        background-color: #000;
        bottom: get_vw(6);
        @include query-min($break) {
          width: 2px;
          height: 22px;
          bottom: 3px;
        }
      }
      &::before {
        left: get_vw(-12);
        rotate: -30deg;
        @include query-min($break) {
          left: -12px;
        }
      }
      &::after {
        right: get_vw(-8);
        rotate: 30deg;
        @include query-min($break) {
          right: -8px;
        }
      }
    }
  }
  &--02 {
    .mv {
      &__title {
        &__wrap {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        &__part {
          position: relative;
          z-index: 1;
          opacity: 0;
          &--01 {
            width: get_vw(250);
            animation: slide_up .25s ease-in forwards .3s;
            @include query-min($break) {
              width: 224px;
            }
          }
          &--02 {
            width: get_vw(58);
            margin-left: get_vw(5);
            margin-right: get_vw(11);
            animation: slide_up .25s ease-in forwards .6s;
            @include query-min($break) {
              width: 50px;
              margin-left: 15px;
              margin-right: 20px;
            }
          }
          &--03 {
            width: get_vw(234);
            animation: slide_up .25s ease-in forwards .9s;
            @include query-min($break) {
              width: 210px;
            }
          }
        }
        &__line {
          margin-top: get_vw(-22);
          width: 0%;
          overflow: hidden;
          animation: line_show 1s cubic-bezier(0.65, 0.05, 0.36, 1) forwards .95s;
          @include query-min($break) {
            margin-top: -18px;
          }
          img {
            display: block;
            width: get_vw(580);
            margin-left: get_vw(80);
            max-width: none;
            @include query-min($break) {
              width: 540px;
              margin-left: 132px;
            }
          }
        }
      }
      &__copy {
        @include query-min($break) {
          display: flex;
          justify-content: center;
          align-items: flex-end;
        }
        &__part {
          display: flex;
          justify-content: center;
          align-items: center;
          @include query-min($break) {
            display: block;
            text-align: center;
          }
          div {
            opacity: 0;
            &:first-child {
              width: get_vw(150);
              margin-right: get_vw(13);
              @include query-min($break) {
                width: 336px;
                margin: 0 auto 10px;
              }
            }
            &:last-child {
              position: relative;
              width: get_vw(424);
              z-index: 1;
              @include query-min($break) {
                width: 307px;
                margin: 0 auto;
              }
            }
          }
          &--01 {
            div {
              &:first-child {
                animation: slide_up .25s ease-in forwards 1.7s;
              }
              &:last-child {
                animation: slide_up .25s ease-in forwards 2s;
              }
            }
          }
          &--02 {
            div {
              &:first-child {
                margin-right: get_vw(6);
                animation: slide_up .25s ease-in forwards 2.6s;
                @include query-min($break) {
                  margin-right: auto;
                }
              }
              &:last-child {
                width: get_vw(535);
                animation: slide_up .25s ease-in forwards 2.9s;
                @include query-min($break) {
                  width: 383px;
                }
              }
            }
          }
        }
        &__add {
          text-align: center;
          margin: get_vw(18) 0;
          @include query-min($break) {
            margin: 0 0 18px 0;
          }
          @include query-min(800px) {
            margin: 0 22px 18px 15px;
          }
          span {
            display: inline-block;
            width: get_vw(80);
            position: relative;
            @include query-min($break) {
              width: 62px;
            }
            img {
              width: 100%;
              position: relative;
              opacity: 0;
              animation: slide_up .25s ease-in forwards 2.3s;
            }
            &::before {
              position: absolute;
              content: "";
              width: get_vw(223);
              height: get_vw(150);
              background: url("../images/genesis-alpha/img_mv_copy_plus.png") center /contain no-repeat;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              opacity: 0;
              animation: show_letter .4s ease-in forwards 2.3s;
              @include query-min($break) {
                width: 140px;
                height: 94px;
                transform: translate(-47%, -50%);
              }
            }
          }
        }
      }
      &__text {
        div {
          display: inline-block;
          position: relative;
          &::before, &::after {
            position: absolute;
            content: "";
            width: get_vw(100);
            height: get_vw(4);
            background-color: #000;
            top: 50%;
            transform: translateY(-50%) scale(0, 1);
            animation: line_scale .25s ease-in forwards 3.2s;
            @include query-min($break) {
              width: 190px;
              height: 2px;
            }
          }
          &::before {
            left: get_vw(-110);
            transform-origin: left;
            @include query-min($break) {
              left: -200px;
            }
          }
          &::after {
            right: get_vw(-110);
            transform-origin: right;
            @include query-min($break) {
              right: -200px;
            }
          }
          p {
            opacity: 0;
            animation: slide_up .25s ease-in forwards 3.6s;
            &::before, &::after {
              display: none;
            }
          }
        }
      }
    }
  }

  /* 日程上 */
  &__under {
    .mv {
      &__wrapper {
        background: url("../images/genesis-alpha/bg_mv_under.png") center center /cover no-repeat;
        padding-bottom: 0;
        @include query-min($break) {
          background-image: url("../images/genesis-alpha/bg_mv_under_pc.png");
          padding-top: 30px;
        }
      }
      &__seminar {
        text-align: center;
        margin-top: get_vw(-8);
        margin-bottom: get_vw(40);
        @include query-min($break) {
          margin-top: 0;
          margin-bottom: 33px;
        }
        img {
          width: get_vw(364);
          @include query-min($break) {
            width: 266px;
          }
        }
      }
    }
    &__bottom {
      background-color: #000;
      color: #fff;
      text-align: center;
      padding: get_vw(5) 0 get_vw(18);
      font-size: get_vw(32);
      font-weight: 700;
      line-height: 1.4;
      @include query-min($break) {
        padding: 12px 0 20px;
        font-size: 24px;
      }
      strong {
        font-size: get_vw(42);
        @include query-min($break) {
          font-size: 34px;
        }
      }
      span {
        background-color: #fff;
        color: #000;
        display: inline-block;
        padding: get_vw(4) get_vw(9) get_vw(8);
        margin-right: get_vw(12);
        line-height: 1;
        border-radius: 3px;
        @include query-min($break) {
          padding: 4px 10px 8px;
          margin-right: 9px;
          border-radius: 6.5px;
        }
        &:first-of-type {
          @include query-min($break) {
            margin-left: 9px;
          }
        }
      }
    }
  }
  &__under--02 {
    .mv {
      &__wrapper {
        padding-top: get_vw(49);

        @include query-min($break) {
          padding-top: 34px;
        }
      }

      &__copy {
        width: auto;
        text-align: center;
        margin: 0 auto get_vw(48);

        @include query-min($break) {
          margin-bottom: 21px;
        }

        p {
          display: inline-block;
          font-size: get_vw(37);
          line-height: 1;
          font-weight: 700;
          letter-spacing: .1em;
          position: relative;

          @include query-min($break) {
            font-size: 27px;
          }

          &::before,
          &::after {
            content: "";
            width: get_vw(123);
            height: get_vw(1);
            background-color: #333;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

            @include query-min($break) {
              width: 136px;
              height: 1px;
            }
          }

          &::before {
            left: 100%;
            margin-left: get_vw(12);

            @include query-min($break) {
              margin-left: 14px;
            }
          }

          &::after {
            right: 100%;
            margin-right: get_vw(12);

            @include query-min($break) {
              margin-right: 14px;
            }
          }

          span {
            position: relative;

            &::before {
              content: "・";
              font-size: get_vw(25);
              position: absolute;
              top: get_vw(-15);
              left: 50%;
              transform: translateX(-50%);

              @include query-min($break) {
                font-size: 22px;
                top: -15px;
              }
            }
          }
        }
      }

      &__title {
        width: get_vw(552);
        margin: 0 auto get_vw(41);

        @include query-min($break) {
          width: 351px;
          margin: 0 auto 21px;
        }
      }

      &__text {
        p {
          align-items: flex-end;
          font-size: get_vw(33);
          line-height: get_vw(58);
          font-weight: 700;
          color: #008155;
          background-color: #fff8c5;
          padding: 0 get_vw(38);
          border-radius: get_vw(5);

          @include query-min($break) {
            font-size: 25px;
            line-height: 43px;
            padding: 0 25px;
            border-radius: 5px;
          }

          &::before,
          &::after {
            display: none;
          }

          small {
            font-size: .8em;
          }
        }
      }
    }
  }
  &__under--03 {
    .mv {
      &__wrapper {
        background-image: url("../images/genesis-alpha/bg_mv_under_04.png");
        @include query-min($break) {
          background-image: url("../images/genesis-alpha/bg_mv_under_04_pc.png");
        }
      }
      &__text {
        p {
          color: #fff;
          span {
            background-color: #fff;
            color: #002e65;
          }
          &::before, &::after {
            background-color: #fff;
          }
        }
      }
    }
  }
}

.mv {
  &__wrapper {
    &--pink {
      background: none;

      &::before {
        content: "";
        width: 100%;
        height: get_vw(878);
        background-color: #fc86b7;
        position: absolute;
        top: 0;
        left: 0;
        background: #fc86b7 url("../images/genesis-alpha/bg_mv_03.png") center top / 100% auto no-repeat;

        @include query-min($break) {
          height: 528px;
          background: #fc86b7 url("../images/genesis-alpha/bg_mv_03_pc.png") center bottom 0 / 1440px auto no-repeat;
        }

        @include query-min(1440px) {
          background: #fc86b7 url("../images/genesis-alpha/bg_mv_03_pc.png") center bottom 0 / cover no-repeat;
        }
      }

      @include query-min($break) {
        padding: 32px 20px;
      }

      .mv {
        &__inner {
          max-width: 1000px;
          display: block;
          margin: 0 auto;
          position: relative;
          z-index: 2;
        }

        &__title {
          margin-bottom: get_vw(14);

          @include query-min($break) {
            margin-bottom: 6px;
          }
        }

        &__box {
          max-width: get_vw(693);
          border: get_vw(3) solid #1a1a1a;
          border-radius: get_vw(5);
          background: #fff;
          box-sizing: border-box;
          margin: 0 auto;
          padding: get_vw(48) 0 get_vw(10);

          @include query-min($break) {
            max-width: 1000px;
            border: 3px solid #1a1a1a;
            border-radius: 5px;
            padding: 30px 20px;
          }
        }

        &__copy {
          margin-bottom: get_vw(34);

          @include query-min($break) {
            max-width: 835px;
            width: 100%;
            margin-bottom: 26px;
          }
        }

        &__text {
          @include query-min($break) {
            margin-bottom: 0;
            position: relative;
          }

          &::before {
            @include query-min($break) {
              content: "";
              width: calc(100% - 150px);
              height: 2px;
              background: #000;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }

          p {
            @include query-min($break) {
              background: #fff;
              padding: 0 10px;
            }

            &::before,
            &::after {
              @include query-min($break) {
                display: none;
              }
            }
          }
        }

        &__cta {
          background-color: transparent;
        }

        &__up {
          color: #fff;
          text-shadow: 0 0 get_vw(10) rgba(#9c0a46, .4);

          span {
            &::before,
            &::after {
              background: #fff;
              box-shadow: 0 0 get_vw(10) rgba(#9c0a46, .4);
            }

            em {
              color: #fff001;
            }
          }
        }
      }
    }
  }

  &__under {
    .mv {
      &__wrapper {
        &--pink {
          background: url("../images/genesis-alpha/bg_mv_under_03.png") center center /cover no-repeat;

          @include query-min($break) {
            background: url("../images/genesis-alpha/bg_mv_under_03_pc.png") center center /cover no-repeat;
            padding: 21px 0 0;
          }

          .mv {
            &__inner {
              margin-bottom: get_vw(37);

              @include query-min($break) {
                margin-bottom: 37px;
                padding: 0 20px;
              }
            }

            &__text {
              p {
                font-size: get_vw(23);

                @include query-min($break) {
                  font-size: 20px;
                }

                &::before,
                &::after {
                  width: get_vw(18);
                }

                &::before {
                  left: get_vw(-25);
                }

                &::after {
                  right: get_vw(-25);
                }

                span {
                  width: get_vw(33);
                  height: get_vw(33);
                  font-size: get_vw(26);

                  @include query-min($break) {
                    width: 30px;
                    height: 30px;
                    font-size: 24px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.twgenesis-normal {
  .mv {
    &__copy {
      width: get_vw(698);
      @include query-min($break) {
        width: 800px;
      }
    }

    &__text {
      p {
        &::before, &::after {
          width: 5vw;

          @include query-min($break) {
            width: 150px;
          }
        }

        &::before {
          left: -7vw;
          @include query-min($break) {
            left: -175px;
          }
        }

        &::after {
          right: -7vw;
          @include query-min($break) {
            right: -175px;
          }
        }

        span {
          &:first-of-type {
            margin-left: get_vw(4);
            @include query-min($break) {
              margin-left: 4px;
            }
          }
          &:nth-of-type(2) {
            margin-left: get_vw(4);
            @include query-min($break) {
              margin-left: 4px;
            }
          }
        }
      }
    }
  }

  .mv__under {
    .mv {
      &__text {
        p {
          // font-size: get_vw(32);

          // @include query-min($break) {
          //   font-size: 24px;
          // }

          &::before, &::after {
            width: get_vw(20);
            @include query-min($break) {
              width: 190px;
            }
          }

          &::before {
            left: get_vw(-25);
            @include query-min($break) {
              left: -200px;
            }
          }
          &::after {
            right: get_vw(-25);
            @include query-min($break) {
              right: -200px;
            }
          }

          span {
            &:first-of-type {
              margin-left: get_vw(5);
              @include query-min($break) {
                margin-left: 6px;
              }
            }
            &:nth-of-type(4) {
              margin-left: get_vw(5);
              @include query-min($break) {
                margin-left: 6px;
              }
            }
          }
        }
      }
    }
  }
}

.ligenesis-normal {
  .mv {
    &__copy {
      width: get_vw(698);
      @include query-min($break) {
        width: 800px;
      }
    }
  }
}

.ligenesis-form {
  .mv {
    &__cta {
      padding: get_vw(30) get_vw(30);
      @include query-min($break) {
        padding: 20px 0;
      }
    }
    &__start {
      margin-bottom: 0;
    }
  }
}

.mfgenesis-alpha {
  .mv {
    &__copy {
      width: 90vw;

      @include query-min($break) {
        width: 800px;
      }
    }
  }
}

.mfgenesis-normal {
  .mv__under {
    .mv {
      &__text {
        p {
          // font-size: get_vw(32);

          // @include query-min($break) {
          //   font-size: 24px;
          // }

          &::before, &::after {
            width: get_vw(20);
            @include query-min($break) {
              width: 190px;
            }
          }

          &::before {
            left: get_vw(-25);
            @include query-min($break) {
              left: -200px;
            }
          }
          &::after {
            right: get_vw(-25);
            @include query-min($break) {
              right: -200px;
            }
          }

          span {
            &:first-of-type {
              margin-left: get_vw(5);
              @include query-min($break) {
                margin-left: 6px;
              }
            }
            &:nth-of-type(4) {
              margin-left: get_vw(5);
              @include query-min($break) {
                margin-left: 6px;
              }
            }
          }
        }
        &--02 {
          p {
            display: inline-block;
            line-height: 1.8;
            &::before, &::after {
              width: get_vw(60);
              height: get_vw(60);
              background-color: transparent;
              transform: translateY(-50%) rotate(45deg) skew(20deg, 20deg);
              @include query-min($break) {
                width: 42px;
                height: 42px;
              }
            }
            &::before {
              border-left: 2px solid #fff;
              border-bottom: 2px solid #fff;
              left: get_vw(-44);
              @include query-min($break) {
                left: -44px;
              }
            }
            &::after {
              border-top: 2px solid #fff;
              border-right: 2px solid #fff;
              right: get_vw(-44);
              @include query-min($break) {
                right: -44px;
              }
            }
          }
        }
      }
    }
  }
}

// genesisb-alpha
.genesisb-alpha {
  .mv {
    &__wrapper {
      background: #000 url("../images/genesis-alpha/bg_mv_02.png") center center /cover no-repeat;
      padding: get_vw(50) 0 0;

      @include query-min($break) {
        background: #000 url("../images/genesis-alpha/bg_mv_02_pc.png") center  top / 1440px repeat-x;
        padding: 50px 0 0;
      }

      @include query-min(1440px) {
        background: url("../images/genesis-alpha/bg_mv_02_pc.png") center  top / 100% repeat-x;
      }
    }

    &__inner {
      display: block;
    }

    &__title {
      text-align: center;

      @include query-min($break) {
        margin-bottom: 50px;
      }

      p {
        display: inline-flex;
        font-size: get_vw(30);
        letter-spacing: .1em;
        font-weight: 700;
        color: #cacaca;
        position: relative;

        @include query-min($break) {
          font-size: 28px;
        }

        &::before,
        &::after {
          content: "";
          width: get_vw(108);
          height: 1px;
          background: #cacaca;
          position: absolute;
          top: 50%;
          transform: translate(0, -50%);

          @include query-min($break) {
            width: 100px;
          }
        }

        &::before {
          left: 100%;
          margin-left: get_vw(14);

          @include query-min($break) {
            margin-left: 17px;
          }
        }

        &::after {
          right: 100%;
          margin-right: get_vw(14);

          @include query-min($break) {
            margin-right: 17px;
          }
        }
      }

      span {
        position: relative;

        &::before {
          content: "・";
          position: absolute;
          top: get_vw(-25);
          left: 50%;
          transform: translate(-50%, 0);

          @include query-min($break) {
            top: -24px;
          }
        }
      }

      &__head {
        width: get_vw(594);
        @include query-min($break) {
          width: 559px;
          margin: 0 auto;
        }
      }
    }

    &__copy {
      width: get_vw(440);
      margin: 0 auto get_vw(50);

      @include query-min($break) {
        width: 930px;
        margin: 0 auto 40px;
      }
    }

    &__text {
      margin-bottom: get_vw(70);
      @include query-min($break) {
        margin-bottom: 70px;
      }
      p {
        font-size: get_vw(32);
        letter-spacing: .04em;
        color: #cacaca;
        background: rgba(#fff, .1);
        padding: get_vw(12) get_vw(17);
        border-radius: get_vw(5);
        font-feature-settings: "palt";

        @include query-min($break) {
          font-size: 28px;
          padding: 12px 34px;
        }

        &::before,
        &::after {
          display: none;
        }
      }

      img {
        width: get_vw(594);

        @include query-min($break) {
          width: 560px;
        }
      }
    }

    &__cta {
      width: 100%;
      background: url("../images/genesis-alpha/bg_mv_cta.png") center bottom / cover no-repeat;
      padding: get_vw(92) get_vw(60) get_vw(36);
      position: relative;

      @include query-min($break) {
        background: url("../images/genesis-alpha/bg_mv_cta_pc.png") center top / 1440px no-repeat;
        padding: 83px 0 29px;
      }

      @include query-min(1440px) {
        background: url("../images/genesis-alpha/bg_mv_cta_pc.png") center top / 100% 100% no-repeat;
      }
    }

    &__start {
      width: get_vw(480);
      margin: 0 auto;
      // font-size: get_vw(28);
      // line-height: 1;
      // padding: get_vw(8) 0 get_vw(18);
      // background: url("../images/genesis-alpha/bg_mv_cta_bubble.png") center / cover no-repeat;

      @include query-min($break) {
        width: 408px;
        // font-size: 22px;
        // padding: 5px 0 16px;
        // background: url("../images/genesis-alpha/bg_mv_cta_bubble_pc.png") center / cover no-repeat;
      }

      span {
        color: #fff;
        background: #000;
        padding: get_vw(4) get_vw(8);
        border-radius: get_vw(5);

        @include query-min($break) {
          padding: 4px 10px;
          border-radius: 5px;
        }

        &::before {
          display: none;
        }
      }
    }

    &__under {
      &__bottom {
        background: #febf04;
        color: #000;
      }

      .mv {
        &__wrapper {
          background: url("../images/genesis-alpha/bg_mv_under_02.png") center center /cover no-repeat;
          padding: get_vw(50) 0 0;

          @include query-min($break) {
            padding: 50px 0 0;
            background: url("../images/genesis-alpha/bg_mv_under_02_pc.png") center center /cover no-repeat;
          }
        }

        &__text {
          img {
            width: get_vw(630);

            @include query-min($break) {
              width: 560px;
            }
          }
        }
      }
    }
    &__guts {
      position: absolute;
      width: get_vw(174);
      top: get_vw(-66);
      left: 50%;
      transform: translateX(-35%);
      @include query-min($break) {
        width: 166px;
        top: -68px;
      }
    }
  }
}