/*! Writen  by SCSS */
.pre-inc .wrap {
  overflow: hidden;
  height: 100vh; }
.pre-inc.main_end .wrap {
  overflow-y: visible;
  height: auto; }

.pre-inc.moving .mainvisual *,
.pre-inc.moving .mainvisual :before,
.pre-inc.moving .mainvisual :after {
  transition: 0s all ease-in-out 0.5s !important; }

.pre-inc.return .mainvisual .skip_replay {
  transition: all 0.5s ease-in-out 0s !important; }

.pre-inc.moving .mainvisual .main_curtain {
  opacity: 1;
  transition: opacity 0.5s ease-in-out 0s !important; }

.pre-inc .mainvisual {
  position: relative; }
  .pre-inc .mainvisual .inset {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%; }
  .pre-inc .mainvisual .main_curtain,
  .pre-inc .mainvisual .fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    opacity: 1;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 100;
    transition: 1s opacity ease-in-out 0s; }
  .pre-inc .mainvisual .main_curtain {
    opacity: 0;
    pointer-events: none;
    background: #FFF;
    transition: 0.5s opacity linear 0s;
    pointer-events: none; }
  .pre-inc .mainvisual .fullscreen {
    background: #FFF; }
    .pre-inc .mainvisual .fullscreen .main_ui {
      position: absolute;
      right: 20px;
      top: 20px;
      overflow: hidden;
      z-index: 3; }
      .pre-inc .mainvisual .fullscreen .main_ui .skip_replay {
        float: left;
        line-height: 28px;
        width: 70px;
        text-align: center;
        font-size: 13px;
        color: #FFF;
        background: #162346;
        letter-spacing: 0.05em;
        transition: all 0.5s ease-in-out 0s;
        cursor: pointer; }
        @media screen and (max-width: 480px) {
          .pre-inc .mainvisual .fullscreen .main_ui .skip_replay {
            left: auto;
            line-height: 20px;
            font-size: 10px;
            width: 60px; } }
  .pre-inc .mainvisual .site_title_group {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center; }
    .pre-inc .mainvisual .site_title_group .site_title {
      max-width: 1200px;
      margin: 0 auto;
      width: 70%; }
      @media screen and (max-width: 820px) {
        .pre-inc .mainvisual .site_title_group .site_title {
          width: 94%; } }
      .pre-inc .mainvisual .site_title_group .site_title path {
        visibility: hidden; }
      .pre-inc .mainvisual .site_title_group .site_title .cls-1 {
        perspective: 1000px;
        transform-style: preserve-3d;
        fill: none;
        stroke: #000;
        stroke-width: 1px; }
  .pre-inc .mainvisual .intro_bg01 {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../images/top/main/intro_img01.jpg");
    transition: 1.3s clip-path cubic-bezier(0.82, 0.1, 0.1, 1) 0s; }
    @media screen and (max-width: 820px) {
      .pre-inc .mainvisual .intro_bg01 {
        transition: 2s clip-path cubic-bezier(0.82, 0.1, 0.1, 1) 0s;
        background-image: url("../images/top/main/intro_img01_sp.jpg"); } }
  .pre-inc .mainvisual .intro_bg02:before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    width: 140%;
    left: 0%;
    opacity: 0;
    transform: translateX(0);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/top/main/intro_img02.jpg);
    transition: 1s opacity ease-in-out 0.5s, 10s transform linear 0s; }
    @media screen and (max-width: 820px) {
      .pre-inc .mainvisual .intro_bg02:before {
        width: 250%;
        background-position: bottom center;
        background-image: url("../images/top/main/intro_img02_sp.jpg");
        transition: 1s opacity ease-in-out 0.5s, 11s transform linear 0s; } }
  .pre-inc .mainvisual .intro_bg02 .cap {
    opacity: 0;
    transition: 1s opacity ease-in-out 0s; }
  .pre-inc .mainvisual .intro_cont {
    position: absolute;
    left: 3%;
    right: 3%;
    margin: auto;
    bottom: 5%;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 820px) {
      .pre-inc .mainvisual .intro_cont {
        flex-direction: column;
        align-items: center;
        row-gap: 40px;
        text-align: center; } }
    @media screen and (max-width: 480px) {
      .pre-inc .mainvisual .intro_cont {
        bottom: 7%;
        row-gap: 25px; } }
    .pre-inc .mainvisual .intro_cont .intro_copy {
      font-size: clamp(22px, 2.625vw, 42px);
      color: #FFF;
      line-height: 1.4;
      clip-path: inset(0 100% 0 0);
      transition: 1s clip-path ease-in-out 0s; }
      @media screen and (max-width: 820px) {
        .pre-inc .mainvisual .intro_cont .intro_copy {
          font-size: 5vw;
          transition: 1.5s clip-path ease-in-out 0s; } }
    .pre-inc .mainvisual .intro_cont .intro_logo {
      width: 55%;
      clip-path: inset(0 100% 0 0);
      transition: 1s all ease-in-out 0s; }
      @media screen and (max-width: 820px) {
        .pre-inc .mainvisual .intro_cont .intro_logo {
          width: 80%;
          margin: 0 auto;
          transition: 1.5s all ease-in-out 0s; } }
  .pre-inc .mainvisual .intro_copy_group {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFF;
    opacity: 0;
    transition: 1s opacity ease-in-out 0s; }
    .pre-inc .mainvisual .intro_copy_group .intro_maincopy {
      font-size: clamp(30px, 4.445vw, 80px);
      color: #b44695;
      text-align: center;
      opacity: 0;
      transition: 1s opacity ease-in-out 0s; }
      @media screen and (max-width: 820px) {
        .pre-inc .mainvisual .intro_copy_group .intro_maincopy {
          font-size: 6.8vw; } }
      @media screen and (max-width: 480px) {
        .pre-inc .mainvisual .intro_copy_group .intro_maincopy {
          font-size: 10vw;
          line-height: 1.5; } }
      .pre-inc .mainvisual .intro_copy_group .intro_maincopy .small {
        font-size: 70%; }
  .pre-inc .mainvisual .image_group_wrap:before {
    content: "";
    position: absolute;
    inset: 0;
    background: #FFF;
    opacity: 0;
    transition: 1s opacity ease-in-out 0s; }
  .pre-inc .mainvisual .image_group_wrap .intro_logo02 {
    position: absolute;
    inset: 0;
    bottom: auto;
    top: 5%;
    text-align: center;
    opacity: 0;
    transition: 1.5s opacity ease-in-out 0.5s;
    width: 74.5%;
    margin: auto; }
    @media screen and (max-width: 820px) {
      .pre-inc .mainvisual .image_group_wrap .intro_logo02 {
        width: 90%;
        top: 3.5%; } }
    @media screen and (max-width: 480px) {
      .pre-inc .mainvisual .image_group_wrap .intro_logo02 {
        top: 11.5%; } }
  .pre-inc .mainvisual .image_group_wrap .image_group {
    position: absolute;
    inset: 0;
    top: auto;
    height: 75%;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: 0.7s opacity ease-in-out 0s; }
    @media screen and (max-width: 820px) {
      .pre-inc .mainvisual .image_group_wrap .image_group {
        height: 83%; } }
    @media screen and (max-width: 480px) {
      .pre-inc .mainvisual .image_group_wrap .image_group {
        height: auto;
        aspect-ratio: 375/455; } }
    .pre-inc .mainvisual .image_group_wrap .image_group.group01 {
      z-index: 1;
      background-image: url("../images/top/main/image_group01.png"); }
      @media screen and (max-width: 820px) {
        .pre-inc .mainvisual .image_group_wrap .image_group.group01 {
          background-image: url("../images/top/main/image_group01_sp.png"); } }
    .pre-inc .mainvisual .image_group_wrap .image_group.group02 {
      transition-delay: 0.5s;
      background-image: url("../images/top/main/image_group02.png"); }
      @media screen and (max-width: 820px) {
        .pre-inc .mainvisual .image_group_wrap .image_group.group02 {
          background-image: url("../images/top/main/image_group02_sp.png"); } }
    .pre-inc .mainvisual .image_group_wrap .image_group.group03 {
      transition-delay: 1s;
      background-image: url("../images/top/main/image_group03.png"); }
      @media screen and (max-width: 820px) {
        .pre-inc .mainvisual .image_group_wrap .image_group.group03 {
          background-image: url("../images/top/main/image_group03_sp.png"); } }
    .pre-inc .mainvisual .image_group_wrap .image_group.group04 {
      z-index: 2;
      transition-delay: 1.5s;
      background-image: url("../images/top/main/image_group04.png"); }
      @media screen and (max-width: 820px) {
        .pre-inc .mainvisual .image_group_wrap .image_group.group04 {
          background-image: url("../images/top/main/image_group04_sp.png"); } }
  .pre-inc .mainvisual .image_group_wrap .cap {
    z-index: 3;
    opacity: 0;
    background: rgba(0, 0, 0, 0.6);
    transition: 1s opacity ease-in-out 0s; }
  .pre-inc .mainvisual .main_image_group {
    position: relative;
    aspect-ratio: 1920/1080; }
    @media screen and (max-width: 480px) {
      .pre-inc .mainvisual .main_image_group {
        aspect-ratio: 750/800; } }
    .pre-inc .mainvisual .main_image_group .view_img {
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("../images/top/main/main.jpg"); }
      @media screen and (max-width: 480px) {
        .pre-inc .mainvisual .main_image_group .view_img {
          background-image: url("../images/top/main/main_sp.jpg"); } }
      .pre-inc .mainvisual .main_image_group .view_img .cap {
        /*
        @include mq(1500){
        	bottom:32%;
        }
        @include mq($br_air){
        	bottom:37%;
        }
        @include mq($br_sp){
        	bottom:0;
        }
        */ }
    .pre-inc .mainvisual .main_image_group .maincopy {
      position: absolute;
      left: 0;
      right: 0;
      top: 16%;
      width: fit-content;
      margin: 0 auto;
      text-align: center;
      font-size: clamp(40px, 3.612vw, 65px);
      line-height: 1.4;
      clip-path: inset(0 100% 0 0);
      transition: 1s clip-path ease-in-out 1s; }
      @media screen and (max-width: 960px) {
        .pre-inc .mainvisual .main_image_group .maincopy {
          font-size: 4vw; } }
      @media screen and (max-width: 480px) {
        .pre-inc .mainvisual .main_image_group .maincopy {
          transition: 0.6s clip-path ease-in-out 1s;
          font-size: 8vw;
          line-height: 1.3;
          top: 18%; } }
      .pre-inc .mainvisual .main_image_group .maincopy .small {
        font-size: 70%; }
    .pre-inc .mainvisual .main_image_group .main_wappen {
      position: absolute;
      right: 35px;
      bottom: 35px;
      max-width: 451px;
      width: 23.68%; }
      @media screen and (max-width: 820px) {
        .pre-inc .mainvisual .main_image_group .main_wappen {
          right: 15px;
          bottom: 20px;
          width: 35%; } }
      @media screen and (max-width: 480px) {
        .pre-inc .mainvisual .main_image_group .main_wappen {
          width: 50%; } }
  .pre-inc .mainvisual .under_scroll {
    position: absolute;
    bottom: 0;
    left: 5.21%;
    display: flex;
    column-gap: 5px;
    overflow: hidden;
    color: #FFF; }
    @media screen and (max-width: 480px) {
      .pre-inc .mainvisual .under_scroll {
        left: 4%; } }
    .pre-inc .mainvisual .under_scroll .scroll_line {
      position: relative;
      height: 280px;
      width: 1px; }
      @media screen and (max-width: 820px) {
        .pre-inc .mainvisual .under_scroll .scroll_line {
          height: 140px; } }
      @media screen and (max-width: 480px) {
        .pre-inc .mainvisual .under_scroll .scroll_line {
          height: 120px; } }
      .pre-inc .mainvisual .under_scroll .scroll_line::after {
        content: "";
        position: absolute;
        inset: 0;
        display: block;
        border-left: solid 1px #FFF;
        margin: 0 auto;
        animation: loopScrollBar 2.5s ease-in-out 0s infinite both; }
    .pre-inc .mainvisual .under_scroll .scroll_txt {
      font-size: clamp(16px, 2vw, 24px);
      writing-mode: vertical-lr; }
      @media screen and (max-width: 480px) {
        .pre-inc .mainvisual .under_scroll .scroll_txt {
          font-size: 12px; } }
@keyframes loopScrollBar {
  0% {
    transform: translateY(-100%); }
  40% {
    transform: translateY(0%); }
  80%,100% {
    transform: translateY(100%); } }
.pre-inc:not(.mobile) .mainvisual .fullscreen .main_ui .skip_replay:hover {
  color: #162346;
  background: #FFF; }

.pre-inc:not(.main_end) .skip_replay .replay {
  display: none; }

.pre-inc.main_end .skip_replay .skip {
  display: none; }

.pre-inc.intro01 .mainvisual .site_title_group .site_title {
  opacity: 1; }
.pre-inc.intro02 .mainvisual .intro_bg01 {
  opacity: 1;
  clip-path: inset(0 0 0 0); }
.pre-inc.intro03 .mainvisual .intro_bg02:before {
  opacity: 1;
  transform: translateX(-28%); }
  @media screen and (max-width: 820px) {
    .pre-inc.intro03 .mainvisual .intro_bg02:before {
      transform: translateX(-60%); } }
.pre-inc.intro03 .mainvisual .intro_bg02 .cap {
  opacity: 1; }
.pre-inc.intro04 .mainvisual .intro_cont .intro_copy,
.pre-inc.intro04 .mainvisual .intro_cont .intro_logo {
  clip-path: inset(0 0 0 0); }
.pre-inc.intro05 .mainvisual {
  /*
  .image_group_wrap{
  	.image_group{
  		opacity: 1;
  	}
  	.cap{
  		opacity: 1;
  	}
  }
  */ }
  .pre-inc.intro05 .mainvisual .intro_copy_group {
    opacity: 1; }
.pre-inc.intro05_2 .mainvisual {
  /*
  .image_group_wrap{
  	&:before{
  		opacity: 1;
  	}
  	
  	.intro_logo02{
  		opacity: 1;
  	}
  }
  */ }
  .pre-inc.intro05_2 .mainvisual .intro_copy_group .intro_maincopy {
    opacity: 1; }
.pre-inc.intro06 .mainvisual .fullscreen {
  opacity: 0;
  pointer-events: none; }
.pre-inc.intro06 .mainvisual .main_image_group .maincopy {
  clip-path: inset(0 0 0 0); }

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