/*! Writen  by SCSS */
body .wrap {
  padding-top: 0 !important; }

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

body.moving .mainvisual:after {
  opacity: 1 !important;
  transition: 0.4s all ease-in-out 0s !important; }

.mainvisual {
  position: relative;
  background: #000;
  overflow: hidden;
  /*
  #skip{
  	position: absolute;
  	left:0;
  	bottom: 0;
  	width: 20px;
  	aspect-ratio:1;
  	z-index: 100;
  }
  */ }
  .mainvisual .main_in {
    position: relative;
    aspect-ratio: 1920/840; }
    @media screen and (max-width: 480px) {
      .mainvisual .main_in {
        aspect-ratio: 414/600; } }
  .mainvisual .inset {
    position: absolute;
    inset: 0; }
  .mainvisual .scene01 .heart_group .heart_img {
    display: flex;
    justify-content: center;
    align-items: center;
    inset: -50%;
    max-width: 767px;
    width: 47.94%;
    margin: auto;
    transform: translateY(5%) scale(3.7);
    transition: 0.5s transform ease-in-out 0s; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene01 .heart_group .heart_img {
        width: 93.48%;
        transform: translateY(-2%) scale(7); } }
  .mainvisual .scene01 .heart_group .main_copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: clamp(30px, 3.625vw, 58px);
    line-height: 2;
    font-weight: 700;
    width: fit-content;
    margin: auto;
    opacity: 0;
    transform: scale(1.3);
    filter: blur(10px);
    transition: 1.5s opacity cubic-bezier(0.75, 0, 0.25, 1) 0s, 1.5s filter cubic-bezier(0.75, 0, 0.25, 1) 0s, 1.5s transform cubic-bezier(0.75, 0, 0.25, 1) 0s; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene01 .heart_group .main_copy {
        font-size: 7.8vw;
        line-height: 1.5;
        text-align: center;
        align-items: center; } }
    .mainvisual .scene01 .heart_group .main_copy sup {
      font-size: 15px;
      letter-spacing: normal;
      display: inline-block;
      vertical-align: top;
      transform: translateY(10px); }
      @media screen and (max-width: 820px) {
        .mainvisual .scene01 .heart_group .main_copy sup {
          font-size: 12px; } }
    .mainvisual .scene01 .heart_group .main_copy .big {
      display: block;
      letter-spacing: 0.05em;
      font-size: 206%;
      line-height: 1; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene01 .heart_group .main_copy .big {
          margin-bottom: 10px; } }
  .mainvisual .scene01 .heart_group .heart_copy_group {
    position: absolute;
    inset: 0;
    top: 12%;
    max-width: 767px;
    width: 47.94%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 10%; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene01 .heart_group .heart_copy_group {
        top: 6%;
        width: 100%;
        row-gap: 5%; } }
    .mainvisual .scene01 .heart_group .heart_copy_group .heart_copy {
      opacity: 0;
      transition: 1s opacity ease-in-out 0s; }
      .mainvisual .scene01 .heart_group .heart_copy_group .heart_copy.heart_copy01 {
        width: 65.59%; }
      .mainvisual .scene01 .heart_group .heart_copy_group .heart_copy.heart_copy02 {
        width: 71.32%; }
  .mainvisual .scene01 .main_shine_group .main_shine {
    position: absolute;
    opacity: 0;
    transition: 2s opacity ease-in-out 0s,4s transform ease-in-out 0s; }
    .mainvisual .scene01 .main_shine_group .main_shine.main_shine01 {
      left: -10%;
      bottom: -10%;
      width: 52.64%;
      transform: translate(5%, -5%); }
      @media screen and (max-width: 480px) {
        .mainvisual .scene01 .main_shine_group .main_shine.main_shine01 {
          left: -20%;
          bottom: -15%;
          width: 90%; } }
    .mainvisual .scene01 .main_shine_group .main_shine.main_shine02 {
      right: -5%;
      top: -2%;
      width: 50.44%;
      transform: translate(-5%, 5%); }
      @media screen and (max-width: 480px) {
        .mainvisual .scene01 .main_shine_group .main_shine.main_shine02 {
          right: -18%;
          top: -5%;
          width: 90%; } }
  .mainvisual .scene02 {
    z-index: 2;
    transition: 1.5s opacity ease-in-out 0s; }
    .mainvisual .scene02 .main_cap {
      opacity: 0;
      transition: 0.5s opacity ease-in-out 0s; }
    .mainvisual .scene02 .main_view_group {
      transform: scale(1.6);
      transform-origin: 28% 57%;
      transition: 3s transform-origin ease-in-out 0s,3s transform ease-in-out 0s; }
      @media screen and (max-width: 480px) {
        .mainvisual .scene02 .main_view_group {
          transform: scale(1);
          transform-origin: 20% 62%;
          width: 176.329%; } }
      .mainvisual .scene02 .main_view_group .main_view {
        position: absolute;
        inset: 0;
        transform: translateX(-10.5%);
        transform-origin: center bottom;
        transition: 2s transform ease-in-out 0s; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .main_view_group .main_view {
            transform: translateX(-40.5%); } }
        .mainvisual .scene02 .main_view_group .main_view:before {
          content: "";
          position: absolute;
          inset: 0;
          background-position: bottom center;
          background-repeat: no-repeat;
          background-size: cover;
          opacity: 0;
          transition: 1.5s opacity ease-in-out 0s,2s transform ease-in-out 0s; }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .main_view_group .main_view:before {
              background-position: right bottom; } }
        .mainvisual .scene02 .main_view_group .main_view.main_view01:before {
          background-image: url("../images/main/main_view01.jpg"); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .main_view_group .main_view.main_view01:before {
              background-image: url("../images/main/main_view01_sp.jpg"); } }
        .mainvisual .scene02 .main_view_group .main_view.main_view02:before {
          background-image: url("../images/main/main_view02.jpg"); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .main_view_group .main_view.main_view02:before {
              background-image: url("../images/main/main_view02_sp.jpg"); } }
        .mainvisual .scene02 .main_view_group .main_view.main_view03:before {
          opacity: 1;
          clip-path: inset(100% 0 0 0);
          transition: 1.5s clip-path ease-in-out 0s;
          background-image: url("../images/main/main_view03.jpg"); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .main_view_group .main_view.main_view03:before {
              background-image: url("../images/main/main_view03_sp.jpg"); } }
      .mainvisual .scene02 .main_view_group .main_prot {
        transform: translateX(-10.5%);
        transition: 1.5s opacity ease-in-out 0s,2s transform ease-in-out 0s; }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .main_view_group .main_prot {
            transform: translateX(-40.5%); } }
        .mainvisual .scene02 .main_view_group .main_prot:before {
          content: "";
          position: absolute;
          inset: 0;
          background-position: bottom center;
          background-repeat: no-repeat;
          background-size: cover;
          transform: translateY(20px);
          opacity: 0;
          transition: 1s opacity ease-in-out 0s,1s transform ease-in-out 0s; }
        .mainvisual .scene02 .main_view_group .main_prot.main_prot01:before {
          background-image: url("../images/main/main_prot01.svg"); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .main_view_group .main_prot.main_prot01:before {
              background-image: url("../images/main/main_prot01_sp.svg"); } }
        .mainvisual .scene02 .main_view_group .main_prot.main_prot02:before {
          background-image: url("../images/main/main_prot02.svg"); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .main_view_group .main_prot.main_prot02:before {
              background-image: url("../images/main/main_prot02_sp.svg"); } }
        .mainvisual .scene02 .main_view_group .main_prot.main_prot03:before {
          background-image: url("../images/main/main_prot03.svg"); }
          @media screen and (max-width: 480px) {
            .mainvisual .scene02 .main_view_group .main_prot.main_prot03:before {
              background-image: url("../images/main/main_prot03_sp.svg"); } }
@keyframes heartbeat {
  0% {
    transform: scale(1); }
  14% {
    transform: scale(1.025); }
  28% {
    transform: scale(1); }
  42% {
    transform: scale(1.025); }
  70% {
    transform: scale(1); } }
  .mainvisual.s1_2 .main_in .scene01 .main_copy {
    opacity: 1;
    transform: scale(1);
    filter: blur(0); }
  .mainvisual.s2 .main_in .scene02 .main_cap {
    opacity: 1; }
  .mainvisual.s2 .main_in .scene02 .main_view.main_view01:before {
    opacity: 1; }
  .mainvisual.s2_2 .main_in .scene01 .heart_group .heart_img {
    transform: translateY(0) scale(1); }
  .mainvisual.s2_2 .main_in .scene01 .heart_group .main_copy {
    opacity: 0;
    transition: none; }
  .mainvisual.s2_2 .main_in .scene02 .main_view_group .main_view.main_view02:before {
    opacity: 1; }
  .mainvisual.s2_2 .main_in .scene02 .main_view_group .main_prot.main_prot01:before {
    transform: translateY(0);
    opacity: 1; }
  @media screen and (max-width: 480px) {
    .mainvisual.s2_2 .main_in .scene02 .main_view_group .main_prot.main_prot02:before {
      transform: translateY(0);
      opacity: 1;
      transition-delay: 0.7s; } }
  .mainvisual.s2_3 .main_in .scene02 .main_view_group {
    transform: scale(1.3);
    transform-origin: 0% 0%; }
    @media screen and (max-width: 480px) {
      .mainvisual.s2_3 .main_in .scene02 .main_view_group {
        transform: scale(1); } }
    .mainvisual.s2_3 .main_in .scene02 .main_view_group .main_view {
      transform: translateX(0%); }
    .mainvisual.s2_3 .main_in .scene02 .main_view_group .main_prot {
      transform: translateX(0); }
      .mainvisual.s2_3 .main_in .scene02 .main_view_group .main_prot.main_prot02:before {
        transform: translateY(0);
        opacity: 1; }
  .mainvisual.s2_4 .main_in .scene02 .main_view_group .main_view.main_view03:before {
    clip-path: inset(0 0 0 0); }
  .mainvisual.s2_4 .main_in .scene02 .main_view_group .main_prot.main_prot03:before {
    opacity: 1;
    transform: translateY(0);
    transition: 1s opacity ease-in-out 1s,1s transform ease-in-out 1s; }
  .mainvisual.s2_5 .main_in .scene01 .heart_group {
    animation: heartbeat 3s infinite; }
    .mainvisual.s2_5 .main_in .scene01 .heart_group .heart_copy_group .heart_copy.heart_copy01 {
      opacity: 1; }
  .mainvisual.s2_5 .main_in .scene02 {
    pointer-events: none;
    opacity: 0; }
    .mainvisual.s2_5 .main_in .scene02 > * {
      pointer-events: none; }
  .mainvisual.s3 .main_in .scene01 .heart_copy_group .heart_copy.heart_copy02 {
    opacity: 1;
    transform: translateY(0); }
  .mainvisual.s3 .main_in .scene01 .main_shine_group .main_shine {
    opacity: 1; }
    .mainvisual.s3 .main_in .scene01 .main_shine_group .main_shine.main_shine01, .mainvisual.s3 .main_in .scene01 .main_shine_group .main_shine.main_shine02 {
      transform: translate(0%, 0%); }
  .mainvisual.s3_2 .main_in .scene01 .heart_group .heart_copy_group .heart_copy.heart_copy02 {
    opacity: 1;
    transform: translateY(0); }
  .mainvisual.s3_2 .main_in .scene01 .main_shine_group .main_shine {
    opacity: 1; }
  .mainvisual.s3_3 .main_in .scene01 .heart_group {
    animation-play-state: paused; }
    .mainvisual.s3_3 .main_in .scene01 .heart_group .heart_img {
      transition: 3s transform ease-in-out 0s;
      transform: translateY(5%) scale(3.7); }
      @media screen and (max-width: 480px) {
        .mainvisual.s3_3 .main_in .scene01 .heart_group .heart_img {
          transform: translateY(-2%) scale(7); } }
    .mainvisual.s3_3 .main_in .scene01 .heart_group .heart_copy_group {
      transition: 2s opacity ease-in-out 0s, 3s transform ease-in-out 0s;
      opacity: 0 !important;
      transform: translateY(5%) scale(3.7); }
  .mainvisual.s3_3 .main_in .scene01 .main_shine_group .main_shine {
    transition: 1s opacity ease-in-out 0s;
    opacity: 0; }
  .mainvisual.s3_4 .main_in .scene01 .heart_group {
    animation-play-state: paused; }

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