@charset "UTF-8";
/*! Writen  by SCSS */
.mainvisual {
  overflow: hidden;
  position: relative;
  aspect-ratio: 1600 / 775;
  /*
  	opacity: 0;
  	filter: blur(55px) saturate(0%) contrast(0%) brightness(500%);
  */
  /*	無し
  .scene3{
  	pointer-events: none;
  	transition:0.5s filter linear 0s, 0.5s opacity ease-in-out 0s !important;
  	.scene3_main{
  		position: absolute;
  		inset:0;
  		
  		opacity: 0;
  		filter: blur(55px) saturate(0%) contrast(0%) brightness(500%);
  		transition:2s opacity ease-in-out 0s,2s filter ease-in-out 0s!important;
  		&:before,
  		&:after{
  			content:"";
  			position: absolute;
  			inset:0;
  		}
  		&:before{
  			background-position:center;
  			background-repeat:no-repeat;
  			background-size:cover;
  			background-image:url("../images/main/main03.jpg");
  			transition:10s transform ease-in-out 0s!important;
  			@include mq($br_sp){
  				background-image:url("../images/main/main03_sp.jpg");
  			}
  		}
  		&:after{
  			top:auto;
  			z-index:1;
  			transition:2s opacity ease-in-out 0s!important;
  			height: 28.25%;
  			background: linear-gradient(to top, rgba(#000,0.8) ,rgba(#000,0) 50%);
  			@include mq($br_sp){
  				height: 39.68%;
  			}
  		}
  	}
  	
  	.maincopy03{
  		position: absolute;
  		left:6.25%;
  		top:18.58%;
  		width:cal_per(1600,407);
  		max-width: 407px;
  		transform:translateX(-80px);
  		transition:1s transform cubic-bezier(0.11, 0.98, 1, 1) 0s!important;
  		@include mq(1200){
  			top:24.58%;
  		}
  		@include mq($br_air){
  			top:30%;
  		}
  		@include mq($br_sp){
  			transform:translateX(-50px);
  			left:0;
  			right:0;
  			margin:auto;
  			top:27%;
  			width: 75.37%;
  		}
  	}
  	
  	.maincopy03_2{
  		position: absolute;
  		right:cal_per(1600,140);
  		bottom:2.58%;
  		width:cal_per(1600,584);
  		max-width: 584px;
  		opacity: 0;
  		transform:translateX(80px);
  		transition:1s opacity ease-in-out 0.8s,1s transform cubic-bezier(0.11, 0.98, 1, 1) 0.8s!important;
  		@include mq($br_sp){
  			transform:translateX(50px);
  			left:0;
  			right:0;
  			bottom: 10px;
  			margin:auto;
  			width: 91.06%;
  			z-index:1;
  		}
  	}
  	
  }
  */ }
  @media screen and (max-width: 480px) {
    .mainvisual {
      aspect-ratio: 414 / 552; } }
  .mainvisual:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #FFF;
    opacity: 0;
    transition: 0.5s opacity linear 0s !important;
    pointer-events: none; }
  .mainvisual .inset {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center; }
@keyframes bright {
  0%,100% {
    opacity: 0; }
  50% {
    opacity: 1; } }
  .mainvisual .anime_txt {
    /*	光彩のテキスト用	*/
    transition: 1s opacity ease-in-out 0s !important;
    display: block; }
    .mainvisual .anime_txt.default {
      opacity: 0;
      transition: 1s opacity ease-in-out 0.5s !important; }
    .mainvisual .anime_txt.shine {
      position: absolute;
      inset: 0;
      opacity: 0; }
  .mainvisual .scene1 {
    pointer-events: none;
    transition: 0.5s filter linear 0s, 0.5s opacity ease-in-out 0s !important; }
    .mainvisual .scene1 .view_shot {
      position: absolute;
      inset: 0;
      top: auto;
      line-height: 0;
      aspect-ratio: 1600 / 775; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene1 .view_shot {
          aspect-ratio: 414 / 552; } }
      .mainvisual .scene1 .view_shot img {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        opacity: 0;
        filter: blur(55px) saturate(0%) contrast(0%) brightness(500%);
        transition: 3s all ease-in-out 0s,1.5s filter linear 0s, 1s opacity ease-in-out 0s !important;
        transform-origin: top center;
        aspect-ratio: 1600 / 880;
        will-change: filter, transform; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene1 .view_shot img {
            aspect-ratio: 414 / 620; } }
      .mainvisual .scene1 .view_shot:before, .mainvisual .scene1 .view_shot:after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        transition: 6s opacity ease-in-out 0s !important; }
      .mainvisual .scene1 .view_shot:before {
        bottom: auto;
        height: 36.78%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 50%); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene1 .view_shot:before {
            height: 51.63%; } }
      .mainvisual .scene1 .view_shot:after {
        top: auto;
        height: 17.03%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 50%); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene1 .view_shot:after {
            height: 31.89%; } }
    .mainvisual .scene1 .main_prot {
      opacity: 0;
      z-index: 1;
      transform: translateY(20px);
      transition: 1s opacity ease-in-out, 1s transform ease-in-out !important; }
    .mainvisual .scene1 .maincopy01 {
      position: absolute;
      left: 6.25%;
      top: 18.58%;
      width: 24.75%;
      max-width: 396px;
      transform: translateX(-80px);
      transition: 1s transform cubic-bezier(0.11, 0.98, 1, 1) 0s !important; }
      @media screen and (max-width: 1200px) {
        .mainvisual .scene1 .maincopy01 {
          top: 24.58%; } }
      @media screen and (max-width: 820px) {
        .mainvisual .scene1 .maincopy01 {
          top: 30%; } }
      @media screen and (max-width: 480px) {
        .mainvisual .scene1 .maincopy01 {
          transform: translateX(-50px);
          left: 0;
          right: 0;
          margin: auto;
          top: 22.5%;
          width: 66%; } }
    .mainvisual .scene1 .maincopy01_2 {
      position: absolute;
      right: 5%;
      bottom: 9.03%;
      width: 29.07%;
      max-width: 465px;
      opacity: 0;
      transform: translateX(80px);
      transition: 1s opacity ease-in-out 0s, 1s transform cubic-bezier(0.11, 0.98, 1, 1) 0s !important; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene1 .maincopy01_2 {
          transform: translateX(50px);
          left: 0;
          right: 0;
          bottom: auto;
          top: 31%;
          margin: auto;
          width: 68%;
          z-index: 1; } }
  .mainvisual .scene2 {
    pointer-events: none;
    transition: 0.5s filter linear 0s, 0.5s opacity ease-in-out 0s !important; }
    .mainvisual .scene2 .scene2_main {
      position: absolute;
      inset: 0;
      width: 56.025%;
      opacity: 0;
      overflow: hidden;
      /*filter: blur(55px) saturate(0%) contrast(0%) brightness(500%);*/
		filter: blur(20px) saturate(0%) contrast(0%) brightness(200%);
      transition: 2s opacity ease-in-out 0s, 2s filter ease-in-out 0s !important; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene2 .scene2_main {
          width: 100%; } }
      .mainvisual .scene2 .scene2_main:before {
        content: "";
        position: absolute;
        inset: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: 10s transform ease-in-out 0s !important; }
      .mainvisual .scene2 .scene2_main.main_l {
        right: auto;
        clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene2 .scene2_main.main_l {
            bottom: auto;
            height: 57.61%;
            clip-path: unset; } }
        .mainvisual .scene2 .scene2_main.main_l:before {
          background-image: url("../images/main/main02.png"); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene2 .scene2_main.main_l:before {
              background-image: url("../images/main/main02_sp.png"); } }
      .mainvisual .scene2 .scene2_main.main_r {
        left: auto;
        clip-path: polygon(22% 0, 100% 0, 100% 100%, 0% 100%); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene2 .scene2_main.main_r {
            top: auto;
            height: 42.39%;
            clip-path: unset; } }
        .mainvisual .scene2 .scene2_main.main_r:before {
          background-image: url("../images/main/main02_2.png"); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene2 .scene2_main.main_r:before {
              background-image: url("../images/main/main02_2_sp.png"); } }
    .mainvisual .scene2 .maincopy02 {
      position: absolute;
      inset: 0;
      bottom: auto;
      top: 25.16%;
      width: 34.26%;
      max-width: 548px;
      margin: auto; }
      @media screen and (max-width: 1200px) {
        .mainvisual .scene2 .maincopy02 {
          top: 32.16%; } }
      @media screen and (max-width: 480px) {
        .mainvisual .scene2 .maincopy02 {
          width: 85.51%;
          margin: 0 auto;
          top: 54%;
          transform: scale(1.15);
          transition: 1s transform ease-in-out 0s !important; } }
    .mainvisual .scene2 .main_minutes {
      position: absolute;
      bottom: 1.93%;
      opacity: 0;
      transform: translateY(20px);
      transition: 1s opacity ease-in-out 0s, 1s transform ease-in-out 0s !important; }
      .mainvisual .scene2 .main_minutes.m01 {
        left: 7.1875%;
        width: 35.1875%;
        max-width: 563px; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene2 .main_minutes.m01 {
            width: 85.47%;
            left: 0;
            right: 0;
            bottom: auto;
            top: 17%;
            margin: 0 auto;
            transform: translateY(-20px); } }
      .mainvisual .scene2 .main_minutes.m02 {
        right: 11.875%;
        width: 31.3125%;
        max-width: 501px; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene2 .main_minutes.m02 {
            width: 77.295%;
            left: 0;
            right: 0;
            bottom: 10px;
            margin: 0 auto; } }
  .mainvisual .scene4 {
    pointer-events: none;
    transition: 0.5s filter linear 0s,0.5s opacity ease-in-out 0s !important; }

    .mainvisual .scene4 .scene4_main {
      position: absolute;
      inset: 0;
      /*width: 62.5%;*/
		/*width:66.875%;*/
		width:71.875%;
      right: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0;
      background-image: url("../images/main/main04.jpg");
      filter: blur(55px) saturate(0%) contrast(0%) brightness(500%);
		filter: blur(20px) saturate(0%) contrast(0%) brightness(200%);
      transition: 3s opacity ease-in-out 0s, 3s filter ease-in-out 0s !important; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene4 .scene4_main {
          background-image: url("../images/main/main04_sp.jpg");
          width: 100%;
          height: 47.283%;
          top: auto; } }
    .mainvisual .scene4 .scene4_title_wrap {
      position: absolute;
      inset: 0;
      /*width: 37.5%;*/
		/*width:33.125%;*/
		width:28.125%;
      left: auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0;
      background-image: url("../images/main/main04_bg.jpg");
      filter: blur(55px) saturate(0%) contrast(0%) brightness(500%);
      transition: 3s opacity ease-in-out 0s, 3s filter ease-in-out 0s !important; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene4 .scene4_title_wrap {
          background-image: url("../images/main/main04_bg_sp.jpg");
          width: 100%;
          height: 52.717%;
          bottom: auto; } }
      .mainvisual .scene4 .scene4_title_wrap .maincopy04 {
        position: absolute;
        inset: 0;
        top: auto;
        bottom: 15%;
        width: 59.84%;
        max-width: 359px;
        margin: auto;
        opacity: 0;
        transform-origin: center;
        transform: scale(1.4);
        transition: 2s opacity ease-in-out 0s, 2s transform cubic-bezier(0.11, 0.98, 1, 1) 0s !important; }
        @media screen and (max-width: 1200px) {
          .mainvisual .scene4 .scene4_title_wrap .maincopy04 {
            bottom: 10%; } }
		@media screen and (max-width: 820px) {
          .mainvisual .scene4 .scene4_title_wrap .maincopy04 {
            bottom: 7%; } }
        @media screen and (max-width: 480px) {
          .mainvisual .scene4 .scene4_title_wrap .maincopy04 {
            bottom: auto;
            top: 33%;
            width: 85%;
            display: flex;
            justify-content: center;
            align-items: center; } }
  .mainvisual .main_ui {
    position: absolute;
    top: 110px;
    right: 10px;
    overflow: hidden;
    z-index: 3; }
    @media screen and (max-width: 1049px) {
      .mainvisual .main_ui {
        top: 95px; } }
@media screen and (max-width: 820px) {
	.mainvisual .main_ui {
		top:85px;
	}
}
@media screen and (max-width: 480px) {
	.mainvisual .main_ui {
		right:auto;
		left:5px;
	}
}
    .mainvisual .main_ui .skip_replay {
      float: left;
      width: 70px;
      text-align: center;
      font-size: 12px;
      line-height: 1;
      color: #d9cbac;
      padding: 5px 0;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(217, 203, 172, 0.5);
      letter-spacing: 0.05em;
      transition: opacity 0.5s ease-in-out 0s !important;
      cursor: pointer; }


      @media screen and (max-width: 480px) {
        .mainvisual .main_ui .skip_replay {
          font-size: 11px;
          width: 60px; } }
      body:not(.mobile) .mainvisual .main_ui .skip_replay:hover {
        opacity: 0.7; }

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

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

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

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; }

body {
  /*
  &.s3{
  	.mainvisual{
  		.scene3{
  			.scene3_main{
  				opacity: 1;
  				filter: blur(0) saturate(100%) contrast(100%) brightness(100%);
  				&:before{
  					transform:scale(1.1);
  				}
  			}
  		}
  	}
  }
  &.s3_2{
  	.mainvisual{
  		.scene3{
  			.maincopy03{
  				transform:translateX(0)!important;
  				.anime_txt{
  					&.default{
  						opacity: 1;
  					}
  					&.shine{
  						animation:1.5s bright ease-in-out 1!important;
  					}
  				}
  			}
  			.maincopy03_2{
  				opacity: 1;
  				transform:translateX(0)!important;
  			}
  		}
  	}
  }
  &.s3_3{
  	.mainvisual{
  		.scene3{
  			opacity: 0;
  			filter: blur(55px) saturate(0%) contrast(0%) brightness(500%);
  		}
  	}
  }
  */ }
  body.s1 .mainvisual .scene1 {
    pointer-events: all;
}
    body.s1 .mainvisual .scene1 .view_shot img {
      opacity: 1;
      transform: translateY(-12.0465%);
      filter: blur(0) saturate(100%) contrast(100%) brightness(100%); 
}
      @media screen and (max-width: 480px) {
        body.s1 .mainvisual .scene1 .view_shot img {
          transform: translateY(-11%); } 
}
    body.s1 .mainvisual .scene1 .view_shot:before, body.s1 .mainvisual .scene1 .view_shot:after {
      opacity: 1; 
}
  body.s1_2 .mainvisual .scene1 .main_prot {
    opacity: 1;
    transform: translateY(0); 
}
  body.s1_3 .mainvisual .scene1 .maincopy01 {
    transform: translateX(0) !important; 
}
    body.s1_3 .mainvisual .scene1 .maincopy01 .anime_txt.default {
      opacity: 1; 
}
    body.s1_3 .mainvisual .scene1 .maincopy01 .anime_txt.shine {
      animation: 1.5s bright ease-in-out 1 !important; 
}
  body.s1_3 .mainvisual .scene1 .maincopy01_2 {
    opacity: 1;
    transform: translateX(0) !important; 
}
  body.s1_4 .mainvisual .scene1 {
    opacity: 0;
    filter: blur(55px) saturate(0%) contrast(0%) brightness(500%); 
}
/*
  body.s2 .scene2 {
    pointer-events: all; 
}
    body.s2 .scene2 .scene2_main {
      opacity: 1;
      filter: blur(0) saturate(100%) contrast(100%) brightness(100%);
}
      body.s2 .scene2 .scene2_main:before {
        transform: scale(1.1); 
}
*/

 body.s1_4 .scene2 {
    pointer-events: all; 
}
    body.s1_4 .scene2 .scene2_main {
      opacity: 1;
      filter: blur(0) saturate(100%) contrast(100%) brightness(100%);
}
      body.s1_4 .scene2 .scene2_main:before {
        transform: scale(1.1); 
}


  body.s2_2 .scene2 .maincopy02 {
    transform: scale(1); 
}
    body.s2_2 .scene2 .maincopy02 .anime_txt.default {
      opacity: 1; 
}
    body.s2_2 .scene2 .maincopy02 .anime_txt.shine {
      animation: 1.5s bright ease-in-out 1 !important; 
}
  body.s2_3 .scene2 .main_minutes {
    opacity: 1;
    transform: translateY(0); 
}
    @media screen and (max-width: 480px) {
      body.s2_3 .scene2 .main_minutes.m01 {
        transform: translateY(0); 
		} 
}
  body.s2_4 .mainvisual .scene2 {
    opacity: 0;
    filter: blur(55px) saturate(0%) contrast(0%) brightness(500%); 
}
/*
  body.s4 .mainvisual .scene4 {
    pointer-events: all; 
}
    body.s4 .mainvisual .scene4 .scene4_main,
    body.s4 .mainvisual .scene4 .scene4_title_wrap {
      opacity: 1;
      filter: blur(0) saturate(100%) contrast(100%) brightness(100%); 
}
*/
  body.s2_4 .mainvisual .scene4 {
    pointer-events: all; 
}
    body.s2_4 .mainvisual .scene4 .scene4_main,
    body.s2_4 .mainvisual .scene4 .scene4_title_wrap {
      opacity: 1;
      filter: blur(0) saturate(100%) contrast(100%) brightness(100%); 
}
  body.s4_2 .mainvisual .scene4 .maincopy04 {
    opacity: 1;
    transform: scale(1); 
}

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