/*! Writen  by SCSS */
.mainvisual {
  position: relative;
  overflow: hidden; }
  @media screen and (max-width: 480px) {
    .mainvisual {
      margin-top: 60px; } }
  .mainvisual .main_animation {
    position: relative;
    aspect-ratio: 1600/913;
    background: #080e1e; }
    @media screen and (max-width: 480px) {
      .mainvisual .main_animation {
        aspect-ratio: 375/580; } }
  .mainvisual .inset {
    position: absolute;
    inset: 0; }
  .mainvisual .main_bg {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover; }
  .mainvisual .main_cap {
    position: absolute;
    right: 10px;
    bottom: 110px;
    opacity: 0;
    color: #FFF;
    font-size: 10px;
    transition: 0.5s opacity ease-in-out 0s; }
    @media screen and (max-width: 960px) {
      .mainvisual .main_cap {
        bottom: 19%; } }
    @media screen and (max-width: 820px) {
      .mainvisual .main_cap {
        bottom: 13%; } }
    @media screen and (max-width: 480px) {
      .mainvisual .main_cap {
        bottom: 10px; } }
  .mainvisual .scene01 {
    background: linear-gradient(90deg, #000 0%, #061238 100%); }
    @media screen and (max-width: 480px) {
      .mainvisual .scene01 {
        background: linear-gradient(180deg, #000 0%, #061238 100%); } }
    .mainvisual .scene01 .load_txt {
      position: absolute;
      inset: 0;
      bottom: auto;
      top: 50%;
      text-align: center;
      padding: 0 30px;
      transform: translateY(-150%);
      font-size: clamp(22px, 3.167vw, 38px);
      color: #FFF;
      opacity: 0;
      margin-top: 20px;
      transition: 0.9s opacity ease-in-out 0s,0.9s margin ease-in-out 0s; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene01 .load_txt {
          transform: translateY(-130%);
          font-size: 5.4vw; } }
    .mainvisual .scene01 .loading_bar {
      position: absolute;
      inset: 0;
      width: 100vw;
      height: 1px;
      padding: 0;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: scale(0, 1);
      background: #FFF;
      transition: 3s transform cubic-bezier(0.75, 0, 0.25, 1) 0s; }
  .mainvisual .scene02 .bg01 {
    background-image: url("../images/main/main_bg01.jpg");
    opacity: 0;
    transition: 1s opacity ease-in-out 0s; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene02 .bg01 {
        background-image: url("../images/main/main_bg01_sp.jpg"); } }
  .mainvisual .scene02 .bg01_line {
    background-image: url("../images/main/main_bg01_2.jpg");
    clip-path: inset(100% 0 0 0);
    transition: 1.5s clip-path cubic-bezier(0.75, 0, 0.25, 1) 0s; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene02 .bg01_line {
        background-image: url("../images/main/main_bg01_2_sp.jpg"); } }
  .mainvisual .scene02 .bg01_shine {
    background-image: url("../images/main/main_bg01_3.png");
    transform: scale(2);
    transform-origin: 60% 30%;
    opacity: 0;
    transition: 2s transform cubic-bezier(0.75, 0, 0.25, 1) 0s, 2s opacity cubic-bezier(0.75, 0, 0.25, 1) 0s;
    mix-blend-mode: screen;
    will-change: transform,opacity; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene02 .bg01_shine {
        transform-origin: 36% 65%;
        background-image: url("../images/main/main_bg01_3_sp.png"); } }
  .mainvisual .scene02 .maincopy_group {
    position: absolute;
    inset: 0;
    left: 6.25%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #FFF; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene02 .maincopy_group {
        bottom: auto;
        left: 0;
        right: 0;
        align-items: center;
        top: 5%; } }
    .mainvisual .scene02 .maincopy_group .maincopy {
      justify-content: flex-start;
      align-items: center;
      column-gap: 10px;
      opacity: 0;
      transform: translateY(20px);
      transition: 1s opacity ease-in-out 0s,1s transform ease-in-out 0s; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene02 .maincopy_group .maincopy {
          column-gap: 0; } }
      .mainvisual .scene02 .maincopy_group .maincopy.second {
        margin-left: 13%; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .maincopy_group .maincopy.second {
            margin-left: auto;
            margin-right: 20px; } }
      .mainvisual .scene02 .maincopy_group .maincopy .copy01 {
        font-size: clamp(16px, 2.778vw, 50px); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .maincopy_group .maincopy .copy01 {
            font-size: 6.6vw; } }
      .mainvisual .scene02 .maincopy_group .maincopy .copy01_2 {
        font-size: clamp(50px, 5.556vw, 100px); }
        .mainvisual .scene02 .maincopy_group .maincopy .copy01_2 .big {
          font-size: 200%;
          background: linear-gradient(90deg, #f8f6dd 0%, #d5ab52 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          color: #d5ab52;
          line-height: 1; }
  .mainvisual .scene03 .bg02 {
    background-image: url("../images/main/main_bg02.jpg");
    opacity: 0;
    transition: 1s opacity ease-in-out 0s; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene03 .bg02 {
        background-image: url("../images/main/main_bg02_sp.jpg"); } }
  .mainvisual .scene03 .main_parse {
    opacity: 0;
    transform: translateY(50px);
    filter: brightness(300%);
    transition: 1.5s filter ease-in-out 0s,1.5s opacity ease-in-out 0s,3s transform ease-in-out 0s; }
  .mainvisual .scene03 .maincopy_group {
    position: absolute;
    inset: 0;
    bottom: auto;
    top: 24%;
    right: auto;
    left: 7.9%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #FFF;
    row-gap: clamp(20px, 1.875vw, 30px);
    width: 29.32%; }
    @media screen and (max-width: 820px) {
      .mainvisual .scene03 .maincopy_group {
        width: 30%;
        left: 8%; } }
    @media screen and (max-width: 480px) {
      .mainvisual .scene03 .maincopy_group {
        left: 0;
        right: 0;
        width: calc(100% - 40px);
        margin: auto;
        bottom: auto;
        top: 20px;
        row-gap: 15px; } }
    .mainvisual .scene03 .maincopy_group .maincopy01 {
      font-size: clamp(10px, 2.1vw, 42px);
      color: #FFF;
      opacity: 0;
      text-align: center;
      transform: translateY(20px);
      transition: 1.5s opacity ease-in-out 0s,1.5s transform ease-in-out 0s; }
      @media screen and (max-width: 960px) {
        .mainvisual .scene03 .maincopy_group .maincopy01 {
          font-size: 2vw; } }
      @media screen and (max-width: 820px) {
        .mainvisual .scene03 .maincopy_group .maincopy01 {
          font-size: 2.4vw; } }
      @media screen and (max-width: 480px) {
        .mainvisual .scene03 .maincopy_group .maincopy01 {
          font-size: 8vw;
          line-height: 1.33; } }
      .mainvisual .scene03 .maincopy_group .maincopy01 .big {
        font-size: 150%;
        line-height: 1;
        color: #b79947; }
    .mainvisual .scene03 .maincopy_group .maincopy02_wrap {
      position: relative;
      padding: clamp(30px, 2.632vw, 50px) 0;
      max-width: 557px; }
      @media screen and (max-width: 820px) {
        .mainvisual .scene03 .maincopy_group .maincopy02_wrap {
          padding: 20px 0; } }
      @media screen and (max-width: 820px) {
        .mainvisual .scene03 .maincopy_group .maincopy02_wrap {
          padding: 20px 0; } }
      @media screen and (max-width: 480px) {
        .mainvisual .scene03 .maincopy_group .maincopy02_wrap {
          padding: 0 0 20px; } }
      .mainvisual .scene03 .maincopy_group .maincopy02_wrap:before, .mainvisual .scene03 .maincopy_group .maincopy02_wrap:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        padding: 0;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: scale(0, 1);
        background: rgba(255, 255, 255, 0.4);
        transition: 1.5s transform cubic-bezier(0.75, 0, 0.25, 1) 0s; }
      .mainvisual .scene03 .maincopy_group .maincopy02_wrap:before {
        top: 0; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .maincopy_group .maincopy02_wrap:before {
            content: none; } }
      .mainvisual .scene03 .maincopy_group .maincopy02_wrap:after {
        bottom: 0; }
      .mainvisual .scene03 .maincopy_group .maincopy02_wrap .maincopy02 {
        opacity: 0;
        transform: scale(1.3);
        transition: 2s opacity ease-in-out 0s,2s transform ease-in-out 0s; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .maincopy_group .maincopy02_wrap .maincopy02 {
            width: 100%;
            text-align: center;
            margin: 0 auto; } }
    .mainvisual .scene03 .maincopy_group .maincopy03_wrap {
      position: relative;
      max-width: 529px;
      width: 94.98%;
      margin: 0 auto; }
      .mainvisual .scene03 .maincopy_group .maincopy03_wrap .maincopy03 {
        opacity: 0;
        transition: 2s opacity ease-in-out 0s; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene03 .maincopy_group .maincopy03_wrap .maincopy03 {
            width: 100%;
            text-align: center;
            margin: 0 auto; } }
  .mainvisual .merit_group {
    position: absolute;
    inset: 0;
    top: auto;
    background: rgba(0, 0, 0, 0.6);
    padding: 30px 0;
    box-shadow: 0 -5px 5px 0 rgba(255, 255, 255, 0.5); }
    @media screen and (max-width: 820px) {
      .mainvisual .merit_group {
        padding: 12px 0; } }
    @media screen and (max-width: 480px) {
      .mainvisual .merit_group {
        position: static;
        background: #000;
        padding: 20px 20px 0; } }
    .mainvisual .merit_group .merit_in {
      justify-content: center; }
      @media screen and (max-width: 480px) {
        .mainvisual .merit_group .merit_in {
          flex-wrap: wrap;
          align-items: center; } }
      .mainvisual .merit_group .merit_in .merit_img {
        padding: 0 clamp(15px, 1.875vw, 30px);
        border-right: 1px solid #FFF; }
        @media screen and (max-width: 480px) {
          .mainvisual .merit_group .merit_in .merit_img {
            width: 100%;
            padding: 15px 0;
            text-align: center;
            border-right: none;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2); } }
        @media screen and (max-width: 480px) {
          .mainvisual .merit_group .merit_in .merit_img.merit01 {
            border-top: none;
            padding: 0 0 15px; } }
        @media screen and (max-width: 480px) {
          .mainvisual .merit_group .merit_in .merit_img.merit03 {
            padding: 20px 0; } }
        .mainvisual .merit_group .merit_in .merit_img.merit04 {
          border-right: none;
          /*img{
          	@include mq($br_sp){
          		width: 100%;	
          	}
          }*/ }
          @media screen and (max-width: 480px) {
            .mainvisual .merit_group .merit_in .merit_img.merit04 {
              padding: 20px 0; } }

#mainvisual.s1 .scene01 .load_txt {
  opacity: 1;
  margin-top: 0; }
#mainvisual.s2 .scene01 .loading_bar {
  transform: scale(1, 1); }
#mainvisual.s3 .scene02 .bg01 {
  opacity: 1; }
#mainvisual.s3 .scene02 .main_cap {
  opacity: 1; }
#mainvisual.s3_2 .scene02 .maincopy_group .maincopy.first {
  opacity: 1;
  transform: translateY(0); }
#mainvisual.s3_3 .scene02 .bg01_line {
  clip-path: inset(0 0 0 0); }
#mainvisual.s3_4 .scene02 .maincopy_group .maincopy.second {
  opacity: 1;
  transform: translateY(0); }
#mainvisual.s3_5 .scene02 .bg01_shine {
  opacity: 1;
  transform: scale(1); }
#mainvisual.s4 .scene03 .bg02 {
  opacity: 1; }
#mainvisual.s4 .scene03 .main_cap {
  opacity: 1; }
#mainvisual.s4_2 .scene03 .main_parse {
  opacity: 1;
  filter: brightness(100%);
  transform: translateY(0); }
#mainvisual.s4_3 {
  /*.scene03{
  	.maincopy01{
  		transform:translateY(0);
  		opacity: 1;
  		transform:translateY(0);
  	}
  	.maincopy02_wrap{
  		
  	}
  }*/ }
  #mainvisual.s4_3 .scene03 .maincopy02_wrap:before, #mainvisual.s4_3 .scene03 .maincopy02_wrap:after {
    transform: scale(1, 1); }
  #mainvisual.s4_3 .scene03 .maincopy02_wrap .maincopy02 {
    opacity: 1;
    transform: scale(1); }
#mainvisual.s4_4 .scene03 .maincopy03_wrap .maincopy03 {
  opacity: 1; }