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

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

.mainvisual {
  position: relative;
  aspect-ratio: 16/9.5;
  overflow: hidden; }
  @media screen and (max-width: 480px) {
    .mainvisual {
      aspect-ratio: 414/600; } }
  .mainvisual:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #f3e1de;
    opacity: 0;
    transition: 0.5s opacity ease-in-out 0s;
    pointer-events: none;
    z-index: 5; }
  .mainvisual .scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    pointer-events: none; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene {
        flex-direction: column; } }
    .mainvisual .scene:before {
      content: "";
      position: absolute;
      inset: 0;
      background: #FFF;
      opacity: 0;
      transition: 0.5s opacity ease-in-out 0s; }
    .mainvisual .scene .scene_in {
      position: relative;
      width: 50%;
      height: 100%;
      overflow: hidden; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene .scene_in {
          height: 50%;
          width: 100%; } }
      .mainvisual .scene .scene_in:before {
        content: "";
        position: absolute;
        inset: 0;
        top: auto;
        opacity: 0;
        height: 11.58%;
        transition: 1.5s opacity ease-in-out 0s; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene .scene_in:before {
            height: 16.98%; } }
      .mainvisual .scene .scene_in.full {
        width: 100%; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene .scene_in.full {
            height: 100%; } }
    .mainvisual .scene .full_img img {
      width: 100%; }
    .mainvisual .scene .maincopy {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      transform: translateY(15px);
      width: 100%;
      transition: 1s opacity ease-in-out 0s, 1.5s transform cubic-bezier(0, 0.88, 0.58, 1) 0s; }
      .mainvisual .scene .maincopy img {
        width: 100%; }
    .mainvisual .scene .main_curtain {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: 1.5s opacity cubic-bezier(0.75, 0, 0.25, 1) 0s; }
    .mainvisual .scene .main_photo {
      overflow: hidden;
      opacity: 0;
      filter: brightness(3);
      transition: 2s opacity cubic-bezier(0.75, 0, 0.25, 1) 0s, 2s filter ease-in-out 0s, 2s transform cubic-bezier(0.75, 0, 0.25, 1) 0s; }
      .mainvisual .scene .main_photo img {
        transition: 10s transform linear 0s; }
    .mainvisual .scene .main_wappen {
      max-width: 222px;
      width: 27.76%;
      position: absolute;
      top: 11.58%;
      left: 5%;
      opacity: 0;
      filter: blur(15px);
      transition: 1s opacity ease-in-out 0s,1s filter ease-in-out 0s; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene .main_wappen {
          top: 25%;
          left: 20px;
          width: 25%; } }
      @media screen and (max-width: 480px) {
        .mainvisual .scene .main_wappen.sp_right {
          top: 20px;
          right: 20px;
          left: auto; } }
  .mainvisual .scene01 {
    background: #f3e1de; }
    .mainvisual .scene01 .deco {
      position: absolute;
      top: 0;
      bottom: 0;
      opacity: 0;
      transition: 1.5s opacity ease-in-out 0s,1.5s transform ease-in-out 0s;
      width: 37.5%; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene01 .deco {
          width: 100%; } }
      .mainvisual .scene01 .deco.deco01 {
        left: 0;
        transform: translateX(-10%); }
      .mainvisual .scene01 .deco.deco02 {
        top: auto;
        right: 0;
        transform: translateX(10%); }
    .mainvisual .scene01 .main_woman {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      width: 17.82%;
      opacity: 0;
      transform: translateX(-5%);
      transition: 2s opacity ease-in-out 0s,2s transform ease-in-out 0s; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene01 .main_woman {
          width: 43.97%;
          bottom: auto;
          left: 0;
          top: 35%;
          z-index: 2; } }
    .mainvisual .scene01 .copy01 {
      position: absolute;
      left: 18.75%;
      top: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 318px;
      width: 19.88%;
      transition: 2s opacity ease-in-out 0s,2s transform ease-in-out 0s; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene01 .copy01 {
          left: 0;
          right: 0;
          bottom: auto;
          top: 18%;
          margin: auto;
          width: 65.22%; } }
  .mainvisual .scene02 .main_view {
    opacity: 0;
    filter: brightness(3);
    transform: scale(1.3);
    transition: 2s opacity ease-in-out 0s,2s filter ease-in-out 0s,4s transform ease-in-out 0s; }
    .mainvisual .scene02 .main_view.light {
      clip-path: inset(100% 0 0 0);
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transition: 3s clip-path ease-in-out 0s; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene02 .main_view.light {
          transition: 3.5s clip-path ease-in-out 0s; } }
  .mainvisual .scene02 .copy02 {
    position: absolute;
    top: 12.64%;
    bottom: auto;
    max-width: 434px;
    width: 27.13%;
    margin: auto;
    transition: 1s opacity ease-in-out 0s, 1.5s transform ease-in-out 0s; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene02 .copy02 {
        width: 72.47%;
        top: 18.34%; } }
  .mainvisual .scene03 .scene_in.first:before {
    background: rgba(227, 177, 176, 0.4); }
  .mainvisual .scene03 .scene_in.second:before {
    background: rgba(187, 170, 189, 0.5); }
  .mainvisual .scene03 .maincopy {
    transition-delay: 1s; }
  .mainvisual .scene04 .scene_in.first:before {
    background: rgba(168, 184, 141, 0.4); }
  .mainvisual .scene04 .scene_in.second:before {
    background: rgba(165, 191, 198, 0.5); }
  .mainvisual .scene04 .maincopy {
    transition-delay: 1s; }
  .mainvisual .scene05 .scene_in.first:before {
    background: rgba(189, 168, 157, 0.3); }
  .mainvisual .scene05 .scene_in.second:before {
    background: rgba(195, 162, 160, 0.5); }
  .mainvisual .scene05 .maincopy {
    transition-delay: 1s; }
  .mainvisual .scene06 .scene_in:before {
    background: rgba(213, 201, 161, 0.4); }
    @media screen and (max-width: 480px) {
      .mainvisual .scene06 .scene_in:before {
        height: 26.98%; } }
  .mainvisual .scene06 .main_photo {
    transition: 2s opacity cubic-bezier(0.75, 0, 0.25, 1) 0s, 2s filter cubic-bezier(0.75, 0, 0.25, 1) 0s; }
    .mainvisual .scene06 .main_photo img {
      transform: scale(1.3);
      transition: 10s transform linear 0s; }
  .mainvisual .scene06 .main_wappen {
    width: 13.88%;
    left: 2.5%; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene06 .main_wappen {
        top: 12.5%;
        width: 25%;
        left: 20px; } }
  .mainvisual .scene06 .maincopy {
    transition-delay: 1s; }
    .mainvisual .scene06 .maincopy.copy06 {
      left: auto;
      right: 4.22%;
      top: 16.85%;
      bottom: auto;
      max-width: 339px;
      width: 17.8%; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene06 .maincopy.copy06 {
          left: 20px;
          bottom: 30%;
          top: auto;
          width: 60%; } }
  .mainvisual .scene07 .maincopy {
    inset: 0;
    bottom: auto;
    top: 21.67%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 248px;
    width: 15.5%;
    margin: auto;
    transition: 1s opacity ease-in-out 1s, 1s transform ease-in-out 0s; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene07 .maincopy {
        top: 20%;
        width: 41.07%;
        margin: 0 auto; } }
  .mainvisual .scene07 .main_photo {
    opacity: 0;
    clip-path: unset;
    transform: scale(1.4);
    transform-origin: bottom center;
    transition: 2s opacity ease-in-out 0s, 2s filter ease-in-out 0s, 5s transform cubic-bezier(0.75, 0, 0.25, 1) 0s; }
  .mainvisual .main_ui {
    position: absolute;
    right: 20px;
    bottom: 15%;
    overflow: hidden;
    z-index: 8000; }
    @media screen and (max-width: 480px) {
      .mainvisual .main_ui {
        right: 0;
        bottom: 19.8%; } }
    .mainvisual .main_ui .skip_replay {
      float: left;
      padding: 6px 0 8px;
      width: 70px;
      text-align: center;
      font-size: 13px;
      color: #FFF;
      /*
      background: #162346;
      border: 1px solid #FFF;
      */
      letter-spacing: -0.025em;
      line-height: 1;
      transition: all 0.5s ease-in-out 0s;
      cursor: pointer; }
      @media screen and (max-width: 480px) {
        .mainvisual .main_ui .skip_replay {
          padding: 5px 0 7px;
          font-size: 11px;
          width: 60px; } }
      body:not(.mobile) .mainvisual .main_ui .skip_replay:hover {
        /*
        color: #162346;
        background:#FFF;
        */ }

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

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

.mainvisual.s1 .scene01 {
  pointer-events: all; }
  .mainvisual.s1 .scene01 .deco.deco01 {
    opacity: 1;
    transform: translateX(0); }
  .mainvisual.s1 .scene01 .deco.deco02 {
    opacity: 1;
    transform: translateX(0); }
.mainvisual.s1_2 .scene01 .main_woman {
  opacity: 1;
  transform: translateX(0); }
.mainvisual.s1_2 .scene01 .copy01 {
  opacity: 1;
  transform: translateY(0); }
.mainvisual.s2 .scene02 {
  pointer-events: all; }
  .mainvisual.s2 .scene02 .main_view {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1); }
.mainvisual.s2_2 .scene02 .main_view.light {
  clip-path: inset(0 0 0 0); }
.mainvisual.s2_2 .scene02 .copy02 {
  opacity: 1;
  transform: translateY(0); }
.mainvisual.s3 .scene03 {
  pointer-events: all; }
  .mainvisual.s3 .scene03:before {
    opacity: 1; }
  .mainvisual.s3 .scene03 .scene_in:before {
    opacity: 1; }
  .mainvisual.s3 .scene03 .main_curtain {
    opacity: 1; }
  .mainvisual.s3 .scene03 .main_photo {
    opacity: 1;
    filter: brightness(1); }
    .mainvisual.s3 .scene03 .main_photo img {
      transform: scale(1.15); }
.mainvisual.s3_2 .scene03 .main_wappen {
  opacity: 1;
  filter: blur(0); }
.mainvisual.s3_2 .scene03 .maincopy {
  opacity: 1;
  transform: translateY(0); }
.mainvisual.s4 .scene04 {
  pointer-events: all; }
  .mainvisual.s4 .scene04:before {
    opacity: 1; }
  .mainvisual.s4 .scene04 .scene_in:before {
    opacity: 1; }
  .mainvisual.s4 .scene04 .main_curtain {
    opacity: 1; }
  .mainvisual.s4 .scene04 .main_photo {
    opacity: 1;
    filter: brightness(1); }
    .mainvisual.s4 .scene04 .main_photo img {
      transform: scale(1.15); }
.mainvisual.s4_2 .scene04 .main_wappen {
  opacity: 1;
  filter: blur(0); }
.mainvisual.s4_2 .scene04 .maincopy {
  opacity: 1;
  transform: translateY(0); }
.mainvisual.s5 .scene05 {
  pointer-events: all; }
  .mainvisual.s5 .scene05:before {
    opacity: 1; }
  .mainvisual.s5 .scene05 .scene_in:before {
    opacity: 1; }
  .mainvisual.s5 .scene05 .main_curtain {
    opacity: 1; }
  .mainvisual.s5 .scene05 .main_photo {
    opacity: 1;
    filter: brightness(1); }
    .mainvisual.s5 .scene05 .main_photo img {
      transform: scale(1.15); }
.mainvisual.s5_2 .scene05 .main_wappen {
  opacity: 1;
  filter: blur(0); }
.mainvisual.s5_2 .scene05 .maincopy {
  opacity: 1;
  transform: translateY(0); }
.mainvisual.s6 .scene06 {
  pointer-events: all; }
  .mainvisual.s6 .scene06:before {
    opacity: 1; }
  .mainvisual.s6 .scene06 .scene_in:before {
    opacity: 1; }
  .mainvisual.s6 .scene06 .main_photo {
    opacity: 1;
    filter: brightness(1); }
    .mainvisual.s6 .scene06 .main_photo img {
      transform: scale(1); }
.mainvisual.s6_2 .scene06 .main_wappen {
  opacity: 1;
  filter: blur(0); }
.mainvisual.s6_2 .scene06 .maincopy {
  opacity: 1;
  transform: translateY(0); }
.mainvisual.s7 .scene07 {
  pointer-events: all; }
  .mainvisual.s7 .scene07 .main_photo {
    opacity: 1;
    filter: brightness(1);
    transform: scale(1); }
.mainvisual.s7_2 .scene07 .maincopy {
  opacity: 1;
  transform: translateY(0); }

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