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

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

.main_ui {
  position: absolute;
  top: 10px;
  right: 10px;
  overflow: hidden;
  z-index: 3; }
  .main_ui .skip_replay {
    float: left;
    width: 80px;
    text-align: center;
    font-size: 14px;
    color: #FFF;
    padding: 5px 0 7px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.7);
    transition: all 0.5s ease-in-out 0s;
    cursor: pointer; }
    @media screen and (max-width: 768px) {
      .main_ui .skip_replay {
        font-size: 12px; } }
    @media screen and (max-width: 480px) {
      .main_ui .skip_replay {
        padding: 5px 0; } }

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

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

.mainvisual {
  position: relative;
  aspect-ratio: 2/1;
  background: #000;
  overflow: hidden; }
  @media screen and (max-width: 480px) {
    .mainvisual {
      aspect-ratio: 414/700; } }
  .mainvisual:after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 100;
    pointer-events: none;
    background: #FFF;
    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 {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../images/top/main/scene01_bg.jpg"); }
    .mainvisual .scene01 .intro_group {
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 1s opacity cubic-bezier(0, 0, 0.2, 1) 0s;
      column-gap: 20px; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene01 .intro_group {
          flex-direction: column;
          row-gap: 10px; } }
      .mainvisual .scene01 .intro_group .main_cross {
        opacity: 0;
        transform: rotate(135deg);
        transition: 2s opacity ease-in-out 0.3s,2s transform ease-in-out 0.3s; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene01 .intro_group .main_cross {
            width: 40px;
            margin: 0 auto; } }
    .mainvisual .scene01 .intro_group02 {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transition: 1s opacity cubic-bezier(0, 0, 0.2, 1) 0s; }
    .mainvisual .scene01 .intro_copy {
      font-size: clamp(26px, 2.858vw, 40px);
      line-height: 2;
      text-align: center;
      opacity: 0;
      transition: 1.5s opacity cubic-bezier(0, 0, 0.2, 1) 0s, 1.5s transform cubic-bezier(0, 0, 0.2, 1) 0s;
      transform: translateY(15px);
      background: -webkit-linear-gradient(18deg, #e9c37e 40%, #fff7a2 50%, #e9c37e 60%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: #e9c37e; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene01 .intro_copy {
          font-size: 6vw; } }
      .mainvisual .scene01 .intro_copy.second {
        transition-delay: 0.3s; }
  .mainvisual .scene02 {
    transition: 1s opacity ease-in-out 0s; }
    .mainvisual .scene02 .scene02_group {
      display: flex; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene02 .scene02_group {
          flex-direction: column; } }
      .mainvisual .scene02 .scene02_group .group_in {
        width: 33%;
        overflow: hidden;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
        transition: 1s clip-path cubic-bezier(0.07, 0.79, 0.58, 1) 0s; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .scene02_group .group_in {
            width: 100%;
            height: 33.3%; } }
        .mainvisual .scene02 .scene02_group .group_in:before {
          content: "";
          position: absolute;
          inset: 0;
          background-position: top center;
          background-repeat: no-repeat;
          background-size: cover;
          transition: 9s transform ease-in-out 0s,1.5s opacity ease-in-out 0s,1.5s filter ease-in-out 0s;
          filter: brightness(300%);
          transform: scale(1.1); }
        .mainvisual .scene02 .scene02_group .group_in.first:before {
          background-image: url("../images/top/main/scene02_bg01.jpg"); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .scene02_group .group_in.first:before {
              background-image: url("../images/top/main/scene02_bg01_sp.jpg"); } }
        .mainvisual .scene02 .scene02_group .group_in.second {
          width: 34%; }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .scene02_group .group_in.second {
              width: 100%;
              height: 33.4%; } }
          .mainvisual .scene02 .scene02_group .group_in.second:before {
            background-image: url("../images/top/main/scene02_bg02.jpg"); }
            @media screen and (max-width: 480px) {
              .mainvisual .scene02 .scene02_group .group_in.second:before {
                background-image: url("../images/top/main/scene02_bg02_sp.jpg"); } }
        .mainvisual .scene02 .scene02_group .group_in.third:before {
          background-image: url("../images/top/main/scene02_bg03.jpg"); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .scene02_group .group_in.third:before {
              background-image: url("../images/top/main/scene02_bg03_sp.jpg"); } }
        .mainvisual .scene02 .scene02_group .group_in .group_txt {
          opacity: 0;
          transform: scale(1.4);
          transition: 1s opacity ease-in-out 0.3s,1s transform ease-in-out 0.3s; }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .scene02_group .group_in .group_txt {
              width: 55%;
              margin: 0 auto;
              text-align: center; } }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .scene02_group .group_in .group_txt.sp_big {
              width: 65%; } }
  .mainvisual .scene03 .main_view:before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transform: scale(1.15);
    filter: brightness(500%);
    transition: 1.5s opacity ease-in-out 0s,1.5s filter ease-in-out 0s,1.5s transform ease-in-out 0s;
    background-image: url("../images/top/main/main_view.png"); }
    @media screen and (max-width: 480px) {
      .mainvisual .scene03 .main_view:before {
        background-image: url("../images/top/main/main_view_sp.png"); } }
  @media screen and (max-width: 480px) {
    .mainvisual .scene03 .main_view .main_cap {
      bottom: 48%;
      left: 10px;
      right: auto; } }
  .mainvisual .scene03 .main_prot:before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transform: scale(1.15);
    filter: brightness(500%);
    transition: 1.5s opacity ease-in-out 0s,1.5s filter ease-in-out 0s,1.5s transform ease-in-out 0s;
    background-image: url("../images/top/main/main_prot.png"); }
    @media screen and (max-width: 480px) {
      .mainvisual .scene03 .main_prot:before {
        background-image: url("../images/top/main/main_prot_sp.png"); } }
  .mainvisual .scene03 .main_shine {
    clip-path: inset(100% 0 0 0);
    transition: 1s clip-path ease-in-out 0s;
    mix-blend-mode: screen; }
    .mainvisual .scene03 .main_shine:before {
      content: "";
      position: absolute;
      inset: 0;
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("../images/top/main/main_shine.png"); }
      @media screen and (max-width: 480px) {
        .mainvisual .scene03 .main_shine:before {
          background-image: url("../images/top/main/main_shine_sp.png"); } }
  .mainvisual .scene03 .twincle {
    opacity: 0;
    pointer-events: none;
    transition: 2s opacity ease-in-out 0s;
    width: 100%; }
    .mainvisual .scene03 .twincle li {
      position: absolute;
      inset: 0;
      background: center center/cover no-repeat;
      opacity: 0; }
      .mainvisual .scene03 .twincle li.tw01 {
        animation-delay: -2.5s !important;
        animation-duration: 4.5s !important;
        background-image: url(../images/top/main/tw01.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .twincle li.tw01 {
            background-image: url(../images/top/main/tw01_sp.png); } }
      .mainvisual .scene03 .twincle li.tw02 {
        animation-delay: -3s !important;
        animation-duration: 6.5s !important;
        background-image: url(../images/top/main/tw02.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .twincle li.tw02 {
            background-image: url(../images/top/main/tw02_sp.png); } }
      .mainvisual .scene03 .twincle li.tw03 {
        animation-delay: -3.5s !important;
        animation-duration: 3s !important;
        background-image: url(../images/top/main/tw03.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .twincle li.tw03 {
            background-image: url(../images/top/main/tw03_sp.png); } }
      .mainvisual .scene03 .twincle li.tw04 {
        animation-delay: -4s !important;
        animation-duration: 4.5s !important;
        background-image: url(../images/top/main/tw04.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .twincle li.tw04 {
            background-image: url(../images/top/main/tw04_sp.png); } }
      .mainvisual .scene03 .twincle li.tw05 {
        animation-delay: -4.5s !important;
        animation-duration: 6.5s !important;
        background-image: url(../images/top/main/tw05.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .twincle li.tw05 {
            background-image: url(../images/top/main/tw05_sp.png); } }
      .mainvisual .scene03 .twincle li.tw06 {
        animation-delay: -5s !important;
        animation-duration: 3s !important;
        background-image: url(../images/top/main/tw06.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .twincle li.tw06 {
            background-image: url(../images/top/main/tw06_sp.png); } }
      .mainvisual .scene03 .twincle li.tw07 {
        animation-delay: -5.5s !important;
        animation-duration: 5.5s !important;
        background-image: url(../images/top/main/tw07.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .twincle li.tw07 {
            background-image: url(../images/top/main/tw07_sp.png); } }
      .mainvisual .scene03 .twincle li.tw08 {
        animation-delay: -6s !important;
        animation-duration: 2.5s !important;
        background-image: url(../images/top/main/tw08.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .twincle li.tw08 {
            background-image: url(../images/top/main/tw08_sp.png); } }
      .mainvisual .scene03 .twincle li.tw09 {
        animation-delay: -6.5s;
        animation-duration: 3.5s;
        background-image: url(../images/top/main/tw09.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .twincle li.tw09 {
            background-image: url(../images/top/main/tw09_sp.png); } }
      .mainvisual .scene03 .twincle li.tw10 {
        animation-delay: -7s !important;
        animation-duration: 6s !important;
        background-image: url(../images/top/main/tw10.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .twincle li.tw10 {
            background-image: url(../images/top/main/tw10_sp.png); } }
  .mainvisual .scene03 .parse_img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36.27%;
    max-width: 689px;
    opacity: 0;
    filter: brightness(500%);
    transition: 1.5s opacity ease-in-out 0s,1.5s filter ease-in-out 0s; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene03 .parse_img {
        width: 67.64%; } }
    .mainvisual .scene03 .parse_img .main_cap {
      right: auto;
      left: 90%;
      white-space: nowrap; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene03 .parse_img .main_cap {
          left: 100%; } }
  .mainvisual .scene03 .main_copy_group {
    display: flex;
    flex-direction: row-reverse;
    column-gap: 2.82%;
    position: absolute;
    top: 5%;
    left: 5%; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene03 .main_copy_group {
        top: 54%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: center;
        row-gap: 10px; } }
    .mainvisual .scene03 .main_copy_group .group01 {
      flex-direction: row-reverse;
      display: flex;
      line-height: 1.25;
      font-size: clamp(40px, 5.883vw, 100px); }
      @media screen and (max-width: 480px) {
        .mainvisual .scene03 .main_copy_group .group01 {
          flex-direction: row;
          font-size: 13vw;
          margin-left: 0.4em; } }
      .mainvisual .scene03 .main_copy_group .group01 .copy01 {
        writing-mode: vertical-rl;
        opacity: 0;
        transform: translateY(15px);
        transition: 2s opacity cubic-bezier(0, 0, 0.2, 1) 0s, 2s transform cubic-bezier(0, 0, 0.2, 1) 0s; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .main_copy_group .group01 .copy01 {
            writing-mode: unset; } }
        .mainvisual .scene03 .main_copy_group .group01 .copy01.first {
          background: -webkit-linear-gradient(340deg, #ecc05f 0%, #fff6a2 50%, #e9c37e 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          color: #ecc05f; }
          @media screen and (max-width: 480px) {
            .mainvisual .scene03 .main_copy_group .group01 .copy01.first {
              background: -webkit-linear-gradient(0deg, #8a6016 0%, #f1cb6b 50%, #f9e287 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              color: #ecc05f; } }
        .mainvisual .scene03 .main_copy_group .group01 .copy01.second {
          transition-delay: 0.2s;
          /*background:-webkit-linear-gradient(340deg, #805912 0%,#805912 25%, #edc261 35%, #fff7a2 60%, #e9c37e 100%);*/
          background: -webkit-linear-gradient(340deg, #ffd891 0%, #c1923e 25%, #edc261 35%, #fff7a2 60%, #e9c37e 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          color: #ecc05f; }
          @media screen and (max-width: 480px) {
            .mainvisual .scene03 .main_copy_group .group01 .copy01.second {
              background: -webkit-linear-gradient(0deg, #fdf098 0%, #f7e498 50%, #cdac6f 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              color: #ecc05f;
              transition-delay: 0s; } }
    .mainvisual .scene03 .main_copy_group .group02 {
      height: max-content;
      flex-direction: row-reverse;
      display: flex;
      line-height: 2.5;
      letter-spacing: 0.2em;
      font-weight: 600;
      font-size: clamp(10px, 1.177vw, 20px); }
      @media screen and (max-width: 480px) {
        .mainvisual .scene03 .main_copy_group .group02 {
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          letter-spacing: 0;
          line-height: 1.6;
          font-size: 4.2vw; } }
      .mainvisual .scene03 .main_copy_group .group02 .copy02 {
        writing-mode: vertical-rl;
        opacity: 0;
        transform: translateY(15px);
        transition: 2s opacity cubic-bezier(0, 0, 0.2, 1) 0s, 2s transform cubic-bezier(0, 0, 0.2, 1) 0s; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .main_copy_group .group02 .copy02 {
            writing-mode: unset; } }
        .mainvisual .scene03 .main_copy_group .group02 .copy02.first {
          transition-delay: 0.4s;
          background: -webkit-linear-gradient(312deg, #eed087 0%, #fdf39f 50%, #e0bb79 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          color: #eed087; }
          @media screen and (max-width: 480px) {
            .mainvisual .scene03 .main_copy_group .group02 .copy02.first {
              transition-delay: 0.2s;
              width: 70%;
              text-align: center;
              background: -webkit-linear-gradient(312deg, #e9c37e 20%, #eae294 50%, #e9c37e 80%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              color: #eed087; } }
        .mainvisual .scene03 .main_copy_group .group02 .copy02.second {
          transition-delay: 0.6s;
          background: -webkit-linear-gradient(312deg, #e9c37e 0%, #dfd58b 50%, #ab9b66 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          color: #eed087; }
          @media screen and (max-width: 480px) {
            .mainvisual .scene03 .main_copy_group .group02 .copy02.second {
              transition-delay: 0.4s;
              background: -webkit-linear-gradient(312deg, #e9c37e 0%, #e9c37e 50%, #f0d58a 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              color: #eed087; } }
        .mainvisual .scene03 .main_copy_group .group02 .copy02.third {
          transition-delay: 0.8s;
          background: -webkit-linear-gradient(312deg, #e9c37e 0%, #f5e092 50%, #ccba79 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          color: #eed087; }
          @media screen and (max-width: 480px) {
            .mainvisual .scene03 .main_copy_group .group02 .copy02.third {
              transition-delay: 0.4s;
              background: -webkit-linear-gradient(312deg, #f3da8e 0%, #e9c37e 50%, #e9c37e 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              color: #eed087; } }

@keyframes hikari {
  0% {
    opacity: 0;
    transform: translateY(0%); }
  30% {
    opacity: 1; }
  75% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-50%); } }
@keyframes hikari_sp {
  0% {
    opacity: 0;
    transform: translateY(0%); }
  30% {
    opacity: 1; }
  75% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-40%); } }
body.s1 .scene01 .intro_group .intro_copy {
  opacity: 1;
  transform: translateY(0); }
body.s1 .scene01 .intro_group .main_cross {
  opacity: 1;
  transform: rotate(0deg); }
body.s1-2 .scene01 .intro_group {
  opacity: 0; }
body.s1-3 .scene01 .intro_group02 .intro_copy {
  opacity: 1;
  transform: translateY(0); }
body.s1-4 .scene01 .intro_group02 {
  opacity: 0; }
body.s2 .scene02 .scene02_group .group_in.first {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
  body.s2 .scene02 .scene02_group .group_in.first:before {
    filter: brightness(100%);
    transform: scale(1); }
  body.s2 .scene02 .scene02_group .group_in.first .group_txt {
    opacity: 1;
    transform: scale(1); }
body.s2-2 .scene02 .scene02_group .group_in.second {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
  body.s2-2 .scene02 .scene02_group .group_in.second:before {
    filter: brightness(100%);
    transform: scale(1); }
  body.s2-2 .scene02 .scene02_group .group_in.second .group_txt {
    opacity: 1;
    transform: scale(1); }
body.s2-3 .scene02 .scene02_group .group_in.third {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
  body.s2-3 .scene02 .scene02_group .group_in.third:before {
    filter: brightness(100%);
    transform: scale(1); }
  body.s2-3 .scene02 .scene02_group .group_in.third .group_txt {
    opacity: 1;
    transform: scale(1); }
body.s2-4 .scene02 {
  opacity: 0; }
body.s3 .scene03 .main_view:before,
body.s3 .scene03 .main_prot:before {
  opacity: 1;
  transform: scale(1);
  filter: brightness(100%); }
body.s3 .scene03 .main_view .main_cap,
body.s3 .scene03 .main_prot .main_cap {
  opacity: 1; }
body.s3-2 .scene03 .main_shine {
  clip-path: inset(0 0 0 0); }
body.s3-2 .scene03 .twincle {
  opacity: 1; }
  body.s3-2 .scene03 .twincle li {
    animation: hikari 10s linear 0s infinite both; }
    @media screen and (max-width: 480px) {
      body.s3-2 .scene03 .twincle li {
        animation: hikari_sp 10s linear 0s infinite both; } }
body.s3-3 .scene03 .main_copy_group .group01 .copy01 {
  opacity: 1;
  transform: translateY(0); }
body.s3-3 .scene03 .main_copy_group .group02 .copy02 {
  opacity: 1;
  transform: translateY(0); }
body.s3-4 .scene03 .parse_img {
  opacity: 1;
  filter: brightness(100%); }
  body.s3-4 .scene03 .parse_img .main_cap {
    opacity: 1; }

/*# sourceMappingURL=mainvisual.css.map */
