/*! Writen  by SCSS */
.mainvisual {
  position: relative;
  overflow: hidden; }
  .mainvisual .mainvisual_in {
    aspect-ratio: 1560/1087;
    position: relative; }
    @media screen and (max-width: 480px) {
      .mainvisual .mainvisual_in {
        aspect-ratio: 326/652; } }
  .mainvisual .scroll_photo_group {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%; }
    @media screen and (max-width: 480px) {
      .mainvisual .scroll_photo_group {
        aspect-ratio: 326/652; } }
    .mainvisual .scroll_photo_group .scroll_photo {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; }
      .mainvisual .scroll_photo_group .scroll_photo .scroll_photo_img {
        position: absolute;
        inset: 0;
        background-position: left top;
        background-repeat: repeat-y;
        background-size: 100% auto;
        background-image: url(../images/top/main/scroll_bg.jpg);
        animation: scrollY 90s linear infinite; }
        @media screen and (max-width: 480px) {
          .mainvisual .scroll_photo_group .scroll_photo .scroll_photo_img {
            animation-duration: 80s; } }
@keyframes scrollY {
  from {
    background-position: 0 0; }
  to {
    background-position: 0 -1582px; } }
  .mainvisual .loop_bg .digest_bg {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0; }
    .mainvisual .loop_bg .digest_bg .digest_bg_img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      background: url(../images/top/main/scroll_bg.jpg) left top;
      background-size: 100% auto; }
  .mainvisual .main_image {
    position: absolute;
    inset: 0;
    z-index: 1; }
    .mainvisual .main_image img {
      width: 100%; }

.mian_animation_wrap {
  position: relative; }
  .mian_animation_wrap .animation_img {
    position: absolute;
    inset: 0; }
  .mian_animation_wrap .merit_wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../images/top/main/merit_bg.png") left top;
    background-size: 100% auto; }
    @media screen and (max-width: 480px) {
      .mian_animation_wrap .merit_wrap {
        background: url("../images/top/main/merit_bg_sp.png") left top;
        background-size: auto 150%; } }
    .mian_animation_wrap .merit_wrap figure:not(.base) {
      position: absolute;
      inset: 0;
      margin: auto; }
    .mian_animation_wrap .merit_wrap figure {
      opacity: 0; }
      .mian_animation_wrap .merit_wrap figure.merit01 {
        filter: blur(20px);
        transform: translateY(0);
        will-change: opacity,filter,transform;
        transition: 0.7s cubic-bezier(0, 0, 0.2, 1) 0s; }
      .mian_animation_wrap .merit_wrap figure.merit02 {
        filter: blur(20px);
        transform: translateY(0);
        will-change: opacity,filter,transform;
        transition: 0.7s cubic-bezier(0, 0, 0.2, 1) 0s; }
      .mian_animation_wrap .merit_wrap figure.merit03 {
        transform: translateY(25px);
        will-change: opacity,transform;
        transition: opacity 0.5s ease-in-out 0s, transform 0.7s cubic-bezier(0, 0, 0.2, 1) 0s; }
    .mian_animation_wrap .merit_wrap.p-view figure {
      opacity: 1; }
    .mian_animation_wrap .merit_wrap.p-view .merit03 {
      transform: translateY(0px); }
    .mian_animation_wrap .merit_wrap.p-view .merit02 {
      filter: blur(0); }
    .mian_animation_wrap .merit_wrap.p-view .merit01 {
      filter: blur(0); }
  .mian_animation_wrap .main_imgs {
    opacity: 0; }
  .mian_animation_wrap .main_img01 {
    transform: translateY(-25px);
    will-change: opacity,transform;
    transition: opacity 0.5s ease-in-out 0s, transform 0.7s cubic-bezier(0, 0, 0.2, 1) 0s; }
  .mian_animation_wrap .main_img02 {
    transform: translateX(-25px);
    will-change: opacity,transform;
    transition: opacity 0.5s ease-in-out 0s, transform 0.7s cubic-bezier(0, 0, 0.2, 1) 0s; }
  .mian_animation_wrap .main_img03 {
    filter: blur(20px);
    transition: all 0.6s ease-in-out 0s;
    transform: translateY(0);
    will-change: opacity,filter,transform; }
  @media screen and (min-width: 481px) {
    .mian_animation_wrap .main_img04 {
      transform: translateX(25px);
      will-change: opacity,transform;
      transition: opacity 0.5s ease-in-out 0s, transform 0.7s cubic-bezier(0, 0, 0.2, 1) 0s; } }
  @media screen and (max-width: 480px) {
    .mian_animation_wrap .main_img04 {
      transform: translateY(25px);
      will-change: opacity,transform;
      transition: opacity 0.5s ease-in-out 0s, transform 0.7s cubic-bezier(0, 0, 0.2, 1) 0s; } }
  .mian_animation_wrap .main_img05 {
    filter: blur(20px);
    transition: all 0.6s ease-in-out 0s;
    transform: translateY(0);
    will-change: opacity,filter,transform; }
  .mian_animation_wrap .main_img06 {
    transform: translateY(100px);
    will-change: opacity,transform;
    transition: opacity 1.2s ease-in-out 0.3s, transform 1.6s cubic-bezier(0, 0, 0.2, 1) 0s; }
  .mian_animation_wrap .main_img07 {
    transform: translateY(50px);
    will-change: opacity,transform;
    transition: opacity 0.5s ease-in-out 0s, transform 0.7s cubic-bezier(0, 0, 0.2, 1) 0s; }
  .mian_animation_wrap .main_img08 {
    transform: translateX(100px);
    will-change: opacity,transform;
    transition: opacity 0.5s ease-in-out 0s, transform 1.4s cubic-bezier(0, 0, 0.2, 1) 0s; }
  .mian_animation_wrap .main_txt01 {
    transform: translateY(-100px);
    will-change: opacity,transform;
    transition: opacity 0.5s ease-in-out 0s, transform 1.2s cubic-bezier(0, 0, 0.2, 1) 0s; }
  .mian_animation_wrap .main_txt02 {
    transform: translateY(100px);
    will-change: opacity,transform;
    transition: opacity 0.5s ease-in-out 0s, transform 1.2s cubic-bezier(0, 0, 0.2, 1) 0s; }
  .mian_animation_wrap .main_txt03 {
    opacity: 0;
    		/*
            filter: blur(20px);
            transition: all 1.4s ease-in-out 0s;
            transform: translateY(0);
    		*/
    will-change: opacity,filter,transform; }
@keyframes small_big {
  0% {
    opacity: 0;
    transform: scale(0); }
  65% {
    opacity: 1;
    transform: scale(1.4); }
  75% {
    transform: scale(1.4); }
  100% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in; } }
  .mian_animation_wrap.s1 .main_img01 {
    opacity: 1;
    transform: translateY(0px); }
  .mian_animation_wrap.s2 .main_img02 {
    opacity: 1;
    transform: translateX(0px); }
  .mian_animation_wrap.s3 .main_img03 {
    opacity: 1;
    filter: blur(0); }
  .mian_animation_wrap.s4 .main_img04 {
    opacity: 1; }
    @media screen and (min-width: 4801px) {
      .mian_animation_wrap.s4 .main_img04 {
        transform: translateX(0px); } }
    @media screen and (max-width: 480px) {
      .mian_animation_wrap.s4 .main_img04 {
        transform: translateY(0px); } }
  .mian_animation_wrap.s5 .main_img05 {
    opacity: 1;
    filter: blur(0); }
  .mian_animation_wrap.s6 .main_img06 {
    opacity: 1;
    transform: translateY(0px); }
  .mian_animation_wrap.s7 .main_img07 {
    opacity: 1;
    transform: translateY(0px); }
  .mian_animation_wrap.s8 .main_img08 {
    opacity: 1;
    transform: translateX(0px); }
  .mian_animation_wrap.s9 .main_txt01 {
    opacity: 1;
    transform: translateY(0px); }
  .mian_animation_wrap.s9 .main_txt02 {
    opacity: 1;
    transform: translateY(0px); }
  .mian_animation_wrap.main_end .main_txt03 {
    animation: small_big 1.7s ease-in-out 0s forwards;
    			/*
                opacity: 1;
    		    filter: blur(0);
    			*/ }

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