/*! Writen  by SCSS */
.mainvisual {
  position: relative;
  background: #FFF;
  overflow: hidden; }
  .mainvisual .main_in {
    position: relative;
    aspect-ratio: 2/1; }
    @media screen and (max-width: 480px) {
      .mainvisual .main_in {
        aspect-ratio: 414/500; } }
    .mainvisual .main_in .inset {
      position: absolute;
      inset: 0; }
    .mainvisual .main_in .main_image {
      position: absolute;
      inset: 0; }
      .mainvisual .main_in .main_image:before {
        content: "";
        position: absolute;
        inset: 0;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover; }
      .mainvisual .main_in .main_image.image01:before {
        background-image: url("../images/top/main/main01.jpg"); }
        @media screen and (max-width: 480px) {
          .mainvisual .main_in .main_image.image01:before {
            background-image: url("../images/top/main/main01_sp.jpg"); } }
      .mainvisual .main_in .main_image.image02:before {
        opacity: 0;
        filter: brightness(3);
        transform: scale(1.2);
        transition: 2s opacity ease-in-out 0s, 2s filter ease-in-out 0s, 3s transform cubic-bezier(0.75, 0, 0.25, 1) 0s;
        background-image: url("../images/top/main/main02.jpg"); }
        @media screen and (max-width: 480px) {
          .mainvisual .main_in .main_image.image02:before {
            background-image: url("../images/top/main/main02_sp.jpg"); } }
  .mainvisual .scene01 {
    transition: 1s opacity ease-in-out 0s; }
    .mainvisual .scene01 .maincopy_group {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      max-width: 698px;
      width: 38.78%;
      margin: 0 auto; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene01 .maincopy_group {
          width: 84%; } }
      .mainvisual .scene01 .maincopy_group .mainlogo {
        width: 68.77%;
        margin: 0 auto 7.5%;
        opacity: 0;
        filter: blur(10px);
        transition: 1.5s all ease-in-out 0s; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene01 .maincopy_group .mainlogo {
            margin: 0 auto 30px; } }
      .mainvisual .scene01 .maincopy_group .maincopy {
        opacity: 0;
        transform: translateY(15px);
        transition: 1.5s all ease-in-out 1s; }
  .mainvisual .scene02 {
    pointer-events: none; }
    .mainvisual .scene02 .main_prot {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateY(20px);
      transition: 1.2s all ease-in-out 0s; }
      .mainvisual .scene02 .main_prot img {
        width: 100%; }
    .mainvisual .scene02 .maincopy_big {
      position: absolute;
      inset: 0;
      bottom: auto;
      top: 18.75%;
      text-align: center;
      width: calc(100% - 40px);
      margin: 0 auto;
      width: 54.94%;
      opacity: 0;
      filter: blur(10px);
      transform: scale(1.05);
      transition: 1.5s all ease-in-out 0s; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene02 .maincopy_big {
          width: 84%;
          top: 20%; } }

#mainvisual.s1 .main_in .scene01 .maincopy_group .mainlogo {
  opacity: 1;
  filter: blur(0); }
#mainvisual.s1 .main_in .scene01 .maincopy_group .maincopy {
  opacity: 1;
  transform: translateY(0); }
#mainvisual.s2 .main_in .scene01 {
  opacity: 0; }
#mainvisual.s3 .main_in .scene02 {
  pointer-events: all; }
  #mainvisual.s3 .main_in .scene02 .main_image:before {
    opacity: 1;
    filter: brightness(1);
    transform: scale(1); }
#mainvisual.s4 .main_in .scene02 .main_prot {
  opacity: 1;
  transform: translateY(0); }
#mainvisual.s5 .main_in .scene02 .maincopy_big {
  opacity: 1;
  transform: scale(1);
  filter: blur(0); }

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