/*! Writen  by SCSS */
#mainvisual.moving *,
#mainvisual.moving :before,
#mainvisual.moving :after {
  transition: 0s all ease-in-out 0.5s !important; }

#mainvisual.mainvisual.moving:after {
  opacity: 1 !important;
  transition: 0.5s all ease-in-out 0s !important; }

.main_ui {
  position: absolute;
  bottom: 10px;
  left: 10px;
  overflow: hidden;
  z-index: 3; }
  .main_ui .skip_replay {
    float: left;
    width: 70px;
    text-align: center;
    font-size: 14px;
    color: #FFF;
    line-height: 1;
    padding: 6px 0;
    background: #000;
    border: 1px solid #FFF;
    letter-spacing: 0.05em;
    transition: all 0.5s ease-in-out 0s;
    cursor: pointer; }
    @media screen and (max-width: 480px) {
      .main_ui .skip_replay {
        font-size: 12px; } }
    body:not(.mobile) .main_ui .skip_replay:hover {
      color: #000;
      background: #FFF; }

#mainvisual:not(.main_end) .main_ui .skip_replay .replay {
  display: none; }

#mainvisual.main_end .main_ui .skip_replay .skip {
  display: none; }

.mainvisual {
  position: relative;
  aspect-ratio: 160/89;
  background: #000;
  overflow: hidden; }
  @media screen and (max-width: 480px) {
    .mainvisual {
      aspect-ratio: 414/470; } }
  .mainvisual:after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 100;
    pointer-events: none;
    background: #000;
    z-index: 5;
    transition: 0.5s opacity linear 0s; }
  .mainvisual .inset {
    position: absolute;
    inset: 0;
    width: 100%; }
  .mainvisual .main_cap {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    color: #FFF;
    text-align: right;
    line-height: 1.4;
    opacity: 0;
    transition: 1s opacity ease-in-out 0s; }
    @media screen and (max-width: 820px) {
      .mainvisual .main_cap {
        bottom: 5px;
        font-size: 10px; } }
  .mainvisual .scene01 {
    transition: 1s opacity ease-in-out 0s; }
    .mainvisual .scene01 .maincopy_wrap {
      bottom: auto;
      top: 35%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      row-gap: 10px;
      text-align: center; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene01 .maincopy_wrap {
          top: 30%; } }
      .mainvisual .scene01 .maincopy_wrap .maincopy {
        font-size: clamp(26px, 2.5vw, 40px);
        color: #FFF;
        line-height: 1.4;
        letter-spacing: 0.05em;
        transition: 1s opacity ease-in-out 0s; }
        @media screen and (max-width: 820px) {
          .mainvisual .scene01 .maincopy_wrap .maincopy {
            font-size: 3.6vw; } }
        @media screen and (max-width: 480px) {
          .mainvisual .scene01 .maincopy_wrap .maincopy {
            font-size: 5vw; } }
        .mainvisual .scene01 .maincopy_wrap .maincopy span {
          transition: 0.8s opacity ease-in-out 0s;
          opacity: 0;
          position: relative; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(1) {
            transition-delay: 0s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(2) {
            transition-delay: 0.07s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(3) {
            transition-delay: 0.14s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(4) {
            transition-delay: 0.21s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(5) {
            transition-delay: 0.28s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(6) {
            transition-delay: 0.35s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(7) {
            transition-delay: 0.42s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(8) {
            transition-delay: 0.49s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(9) {
            transition-delay: 0.56s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(10) {
            transition-delay: 0.63s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(11) {
            transition-delay: 0.7s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(12) {
            transition-delay: 0.77s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(13) {
            transition-delay: 0.84s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(14) {
            transition-delay: 0.91s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(15) {
            transition-delay: 0.98s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(16) {
            transition-delay: 1.05s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(17) {
            transition-delay: 1.12s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(18) {
            transition-delay: 1.19s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(19) {
            transition-delay: 1.26s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(20) {
            transition-delay: 1.33s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(21) {
            transition-delay: 1.4s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(22) {
            transition-delay: 1.47s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(23) {
            transition-delay: 1.54s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(24) {
            transition-delay: 1.61s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(25) {
            transition-delay: 1.68s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(26) {
            transition-delay: 1.75s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(27) {
            transition-delay: 1.82s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(28) {
            transition-delay: 1.89s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(29) {
            transition-delay: 1.96s; }
          .mainvisual .scene01 .maincopy_wrap .maincopy span:nth-of-type(30) {
            transition-delay: 2.03s; }
    .mainvisual .scene01 .twincle {
      position: absolute;
      inset: 0;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      transition: 2s opacity ease-in-out 0s !important;
      width: 100%; }
      .mainvisual .scene01 .twincle li {
        position: absolute;
        inset: 0;
        background: center center/cover no-repeat;
        opacity: 0; }
        .mainvisual .scene01 .twincle li.tw01 {
          animation-delay: -0.5s !important;
          animation-duration: 24s !important;
          background-image: url(../images/top/main/tw01.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw01 {
              background-image: url(../images/top/main/tw01_sp.png); } }
        .mainvisual .scene01 .twincle li.tw02 {
          animation-delay: -1.5s !important;
          animation-duration: 36s !important;
          background-image: url(../images/top/main/tw02.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw02 {
              background-image: url(../images/top/main/tw02_sp.png); } }
        .mainvisual .scene01 .twincle li.tw03 {
          animation-delay: -3.5s !important;
          animation-duration: 18s !important;
          background-image: url(../images/top/main/tw03.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw03 {
              background-image: url(../images/top/main/tw03_sp.png); } }
        .mainvisual .scene01 .twincle li.tw04 {
          animation-delay: -2s !important;
          animation-duration: 26s !important;
          background-image: url(../images/top/main/tw04.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw04 {
              background-image: url(../images/top/main/tw04_sp.png); } }
        .mainvisual .scene01 .twincle li.tw05 {
          animation-delay: -1s !important;
          animation-duration: 30s !important;
          background-image: url(../images/top/main/tw05.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw05 {
              background-image: url(../images/top/main/tw05_sp.png); } }
        .mainvisual .scene01 .twincle li.tw06 {
          animation-delay: -2.5s !important;
          animation-duration: 17s !important;
          background-image: url(../images/top/main/tw06.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw06 {
              background-image: url(../images/top/main/tw06_sp.png); } }
        .mainvisual .scene01 .twincle li.tw07 {
          animation-delay: -3s !important;
          animation-duration: 32s !important;
          background-image: url(../images/top/main/tw07.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw07 {
              background-image: url(../images/top/main/tw07_sp.png); } }
        .mainvisual .scene01 .twincle li.tw08 {
          animation-delay: -3s !important;
          animation-duration: 24s !important;
          background-image: url(../images/top/main/tw07.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw08 {
              background-image: url(../images/top/main/tw07_sp.png); } }
        .mainvisual .scene01 .twincle li.tw09 {
          animation-delay: -2.5s !important;
          animation-duration: 20s !important;
          background-image: url(../images/top/main/tw06.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw09 {
              background-image: url(../images/top/main/tw06_sp.png); } }
        .mainvisual .scene01 .twincle li.tw10 {
          animation-delay: -4s !important;
          animation-duration: 18s !important;
          background-image: url(../images/top/main/tw05.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw10 {
              background-image: url(../images/top/main/tw05_sp.png); } }
        .mainvisual .scene01 .twincle li.tw11 {
          animation-delay: -2s !important;
          animation-duration: 28s !important;
          background-image: url(../images/top/main/tw03.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw11 {
              background-image: url(../images/top/main/tw03_sp.png); } }
        .mainvisual .scene01 .twincle li.tw12 {
          animation-delay: -3.5s !important;
          animation-duration: 34s !important;
          background-image: url(../images/top/main/tw04.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw12 {
              background-image: url(../images/top/main/tw04_sp.png); } }
        .mainvisual .scene01 .twincle li.tw13 {
          animation-delay: -2s !important;
          animation-duration: 20s !important;
          background-image: url(../images/top/main/tw02.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw13 {
              background-image: url(../images/top/main/tw02_sp.png); } }
        .mainvisual .scene01 .twincle li.tw14 {
          animation-delay: -0.5s !important;
          animation-duration: 32s !important;
          background-image: url(../images/top/main/tw01.png); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .twincle li.tw14 {
              background-image: url(../images/top/main/tw01_sp.png); } }
@keyframes hikari {
  0% {
    opacity: 0;
    transform: translateY(100%); }
  5% {
    opacity: 1; }
  7.5% {
    opacity: 0; }
  10% {
    opacity: 1; }
  12.5% {
    opacity: 0; }
  15% {
    opacity: 1; }
  17.5% {
    opacity: 0; }
  20% {
    opacity: 1; }
  22.5% {
    opacity: 0; }
  25% {
    opacity: 1; }
  27.5% {
    opacity: 0; }
  30% {
    opacity: 1; }
  32.5% {
    opacity: 0; }
  35% {
    opacity: 1; }
  37.5% {
    opacity: 0; }
  40% {
    opacity: 1; }
  42.5% {
    opacity: 0; }
  45% {
    opacity: 1; }
  47.5% {
    opacity: 0; }
  50% {
    opacity: 1; }
  52.5% {
    opacity: 0; }
  55% {
    opacity: 1; }
  57.5% {
    opacity: 0; }
  60% {
    opacity: 1; }
  62.5% {
    opacity: 0; }
  65% {
    opacity: 1; }
  67.5% {
    opacity: 0; }
  70% {
    opacity: 1; }
  72.5% {
    opacity: 0; }
  75% {
    opacity: 1; }
  77.5% {
    opacity: 0; }
  80% {
    opacity: 1; }
  82.5% {
    opacity: 0; }
  85% {
    opacity: 1; }
  87.5% {
    opacity: 0; }
  90% {
    opacity: 1; }
  92.5% {
    opacity: 0; }
  95% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-100%); } }
@keyframes hikari_sp {
  0% {
    opacity: 0;
    transform: translateY(100%); }
  5% {
    opacity: 1; }
  7.5% {
    opacity: 0; }
  10% {
    opacity: 1; }
  12.5% {
    opacity: 0; }
  15% {
    opacity: 1; }
  17.5% {
    opacity: 0; }
  20% {
    opacity: 1; }
  22.5% {
    opacity: 0; }
  25% {
    opacity: 1; }
  27.5% {
    opacity: 0; }
  30% {
    opacity: 1; }
  32.5% {
    opacity: 0; }
  35% {
    opacity: 1; }
  37.5% {
    opacity: 0; }
  40% {
    opacity: 1; }
  42.5% {
    opacity: 0; }
  45% {
    opacity: 1; }
  47.5% {
    opacity: 0; }
  50% {
    opacity: 1; }
  52.5% {
    opacity: 0; }
  55% {
    opacity: 1; }
  57.5% {
    opacity: 0; }
  60% {
    opacity: 1; }
  62.5% {
    opacity: 0; }
  65% {
    opacity: 1; }
  67.5% {
    opacity: 0; }
  70% {
    opacity: 1; }
  72.5% {
    opacity: 0; }
  75% {
    opacity: 1; }
  77.5% {
    opacity: 0; }
  80% {
    opacity: 1; }
  82.5% {
    opacity: 0; }
  85% {
    opacity: 1; }
  87.5% {
    opacity: 0; }
  90% {
    opacity: 1; }
  92.5% {
    opacity: 0; }
  95% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-100%); } }
  .mainvisual .scene02 {
    transition: 1s opacity ease-in-out 0s; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene02 .pc_group {
        display: none; } }
    .mainvisual .scene02 .pc_group .pc_group_in {
      position: absolute;
      top: 0;
      bottom: 0;
      overflow: hidden; }
      .mainvisual .scene02 .pc_group .pc_group_in.group_l {
        left: 0;
        width: 46.57%; }
      .mainvisual .scene02 .pc_group .pc_group_in.group_r {
        right: 0;
        width: 53.44%; }
    .mainvisual .scene02 .pc_group .main_image {
      position: absolute;
      transition: 1s clip-path cubic-bezier(0.75, 0, 0.25, 1) 0s; }
      .mainvisual .scene02 .pc_group .main_image.main_image01 {
        left: 0;
        top: 0;
        clip-path: inset(0 0 0 100%); }
      .mainvisual .scene02 .pc_group .main_image.main_image02 {
        right: 0;
        top: 0;
        clip-path: inset(100% 0 0 0); }
      .mainvisual .scene02 .pc_group .main_image.main_image03 {
        right: 0;
        bottom: 0;
        clip-path: inset(0 0 100% 0); }
      .mainvisual .scene02 .pc_group .main_image.pine {
        left: 0;
        top: 0;
        transform: translateX(-50px);
        opacity: 0;
        transition: 2s opacity ease-in-out 0s,2s transform ease-in-out 0s; }
      .mainvisual .scene02 .pc_group .main_image.cloud {
        right: 0;
        top: 0;
        transform: translateX(50px);
        opacity: 0;
        transition: 2s opacity ease-in-out 0s,2s transform ease-in-out 0s; }
      .mainvisual .scene02 .pc_group .main_image img {
        width: 100%; }
    .mainvisual .scene02 .sp_group {
      display: none;
      opacity: 0;
      transition: 1.5s opacity ease-in-out 0s; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene02 .sp_group {
          display: block; } }
      .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide .swipe_img {
        position: absolute;
        inset: 0; }
        .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide .swipe_img.img01 {
          opacity: 0;
          transition: 1s opacity ease-in-out 2s; }
        .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide .swipe_img.img01_2 {
          opacity: 0;
          transition: 1s opacity ease-in-out 2s; }
        .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide .swipe_img.img01_3 {
          opacity: 0;
          transform: translateX(-50px);
          transition: 1s opacity ease-in-out 2s,1s transform ease-in-out 2s; }
        .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide .swipe_img.img01_4 {
          opacity: 0;
          transform: translateX(50px);
          transition: 1s opacity ease-in-out 2s,1s transform ease-in-out 2s; }
        .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide .swipe_img.img02 {
          opacity: 0;
          transition: 1s opacity ease-in-out 2s; }
        .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide .swipe_img.img02_2 {
          opacity: 0;
          transform: translateX(-20px);
          transition: 1s opacity ease-in-out 2s,1s transform ease-in-out 2s; }
        .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide .swipe_img.img02_3 {
          opacity: 0;
          transform: translateX(20px);
          transition: 1s opacity ease-in-out 2s,1s transform ease-in-out 2s; }
      .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active .swipe_img.img01 {
        opacity: 1;
        transition: 1.5s opacity ease-in-out 0s; }
      .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active .swipe_img.img01_2 {
        opacity: 1;
        transition: 1.5s opacity ease-in-out 1.8s; }
      .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active .swipe_img.img01_3, .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active .swipe_img.img01_4 {
        opacity: 1;
        transform: translateX(0);
        transition: 2s opacity ease-in-out 2.5s,2s transform ease-in-out 2.5s; }
      .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active .swipe_img.img02 {
        opacity: 1;
        transition: 1.5s opacity ease-in-out 0s; }
      .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active .swipe_img.img02_2, .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active .swipe_img.img02_3 {
        opacity: 1;
        transform: translateX(0);
        transition: 2s opacity ease-in-out 1.5s,2s transform ease-in-out 1.5s; }
      .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active.is-second-loop .swipe_img.img01 {
        opacity: 1;
        transition: 1.5s opacity ease-in-out 0s; }
      .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active.is-second-loop .swipe_img.img01_2 {
        opacity: 1;
        transition: 1.5s opacity ease-in-out 0s; }
      .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active.is-second-loop .swipe_img.img01_3, .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active.is-second-loop .swipe_img.img01_4 {
        opacity: 1;
        transform: none;
        transition: 1.5s opacity ease-in-out 0s; }
      .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active.is-second-loop .swipe_img.img02 {
        opacity: 1;
        transition: 1.5s opacity ease-in-out 0s; }
      .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active.is-second-loop .swipe_img.img02_2, .mainvisual .scene02 .sp_group .main_slide .swiper-wrapper .swiper-slide.swiper-slide-active.is-second-loop .swipe_img.img02_3 {
        opacity: 1;
        transform: none;
        transition: 1.5s opacity ease-in-out 0s; }
  .mainvisual:not(.main_end) .main_ui .skip_replay .replay {
    display: none; }
  .mainvisual.main_end .main_ui .skip_replay .skip {
    display: none; }

#mainvisual.s1 .scene01 .twincle {
  opacity: 1; }
  #mainvisual.s1 .scene01 .twincle li {
    opacity: 1;
    animation-name: hikari !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: forwards !important; }
#mainvisual.s1 .scene01 .maincopy_wrap .maincopy.first span {
  opacity: 1; }
#mainvisual.s1-2 .scene01 .maincopy_wrap .maincopy.second span {
  opacity: 1; }
#mainvisual.s1-3 .scene01 .maincopy_wrap .maincopy {
  opacity: 0; }
#mainvisual.s2 .scene01 .twincle {
  opacity: 0;
  transition-duration: 1s !important; }
#mainvisual.s2 .scene02 .pc_group .main_image.main_image01, #mainvisual.s2 .scene02 .pc_group .main_image.main_image02, #mainvisual.s2 .scene02 .pc_group .main_image.main_image03 {
  clip-path: inset(0 0 0 0); }
#mainvisual.s2-2 .scene02 .pc_group .main_image.pine, #mainvisual.s2-2 .scene02 .pc_group .main_image.cloud {
  opacity: 1;
  transform: translateX(0); }
#mainvisual.s3 .scene02 .sp_group {
  opacity: 1; }