@charset "UTF-8";


 #opening {
    position: fixed; /* 画面全体を覆う */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999; /* 他の要素の上に表示 */
    display: none; /* 初期状態で非表示（JSで表示） */
}

/* .home .l-container {
    display: none;
} */
#logo_anim {
    width: 300px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* オープニングアニメーション */
@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
          animation: animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
          animation: animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
          animation: animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
          animation: animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(4, 0, 0);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
          animation: animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(14, 49, 137);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(14, 49, 137);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
          animation: animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
          animation: animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
          animation: animate-svg-fill-9 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
          animation: animate-svg-fill-10 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 178, 213);
  }
}

@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 178, 213);
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
          animation: animate-svg-fill-11 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s both;
}

@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 178, 213);
  }
}

@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 178, 213);
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s both;
          animation: animate-svg-fill-12 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s both;
}

@-webkit-keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 178, 213);
  }
}

@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 178, 213);
  }
}

.svg-elem-13 {
  -webkit-animation: animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
          animation: animate-svg-fill-13 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s both;
}

@-webkit-keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 178, 213);
  }
}

@keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(169, 178, 213);
  }
}

.svg-elem-14 {
  -webkit-animation: animate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
          animation: animate-svg-fill-14 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s both;
}

/* スライダー */
 /* slider */
    .first_view{
        position: relative;
    }
    .slide-media,
    .thumb-media {
      position: relative;
      overflow: hidden;
    }

    .slide-media img{
      position: relative;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .splide {
      z-index: 0;
    }

    .first_view .splide {
       position: relative;

    }
    /* あとで変更するかも */
    .first_view .splide-wrapper{
        /* width: calc(100% - 100px);
        padding-left: calc(65 * 100% / 1280); */
        /* min-height: 560px; */
        width: calc(100% - 4%);
        position: absolute;
        right: 1%;
        left: 2%;
        /* padding-top: 0px; */
    }
    
 

    .first_view .splide-fade .splide__slide {
      pointer-events: none;
    }

    .first_view .splide__track--fade .splide__slide.is-active {
      pointer-events: auto;
    }

 


    .first_view .slide-media {
      border-radius: 70px;
      height: 86vh;
    }

    .first_view .slide-media img {
      transition: 7s 1s ease-out;
    }

.splide__pagination{
    display: none;
}

    .first_view .splide__slide[class*=-active] .slide-media img {
      transition-delay: 0s;
      transform: scale(1.05);
    }

    .first_view .splide__slide[class*=-active] .slide-title {
      animation: mv01-fadeIn 2s 0.5s var(--easing) both;
    }

    @keyframes mv01-fadeIn {
      0% {
        transform: scale(0.5);
        opacity: 0;
        filter: blur(300px);
      }

      100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
      }
    }
/* コピー部分 */
    .mv-copy{
      position: absolute;
      top: 50%;
      left: 4px;
      transform: translateY(-50%);
    }
    .mv-copy h2{
       writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: 2.8em;
        font-weight: 500!important;
    }

    @media only screen and (max-width: 1024px) {
      html {
        -webkit-text-size-adjust: 100%;
      }

      .l-inner {
        padding: 0 4rem;
      }

      

      /* .first_view {
        margin-bottom: 8rem;
      } */

      /* .first_view .slide-media {
        height: max(70vh, 70vw);
      } */

    }
/*-------------------- 768px以上1023px以下--------------------*/
    @media (min-width: 768px) and  (max-width: 1023px){
      .mv-copy h2{
        font-size: 40px;
        line-height: 1.3;
      }
      .mv-copy{
        left: 0vw;
        background: #fff;
        width: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .mv-copy::before{
        content: "";
        position: absolute;
        left: 0;
        width: 130px;
        height: 53px;
        background-color: #fff;
        border-radius: 50px 50px 0 0;
        z-index: -1;
        top: -53px;
      }
      .mv-copy::after{
        content: "";
        position: absolute;
        left: 0;
        width: 130px;
        height: 53px;
        background-color: #fff;
       border-radius: 0px 0px 50px 50px;
        z-index: -1;
        bottom: -53px;
      }
       .first_view .splide-wrapper {
        width: calc(100% - 50px);
      }
      .first_view .slide-media {
        height: 88vh;
      }


      

    }
    @media only screen and (max-width: 599px) {
      html {
        font-size: 50%;
      }

      .pc-tab {
        display: none !important;
      }
     
    }

    @media only screen and (min-width: 1025px) {
      .tab-sp {
        display: none !important;
      }

      .splide__arrow--prev::before,
      .splide__arrow--next::before {
        transition: var(--transition);
      }

      .splide__arrow--prev:hover::before,
      .splide__arrow--next:hover::before {
        transform: scale(1.2);
      }
    }
    @media only screen and (min-width: 768px) {
      .sp {
        display: none !important;
      }
       .copy_sp{
        display: none !important;
      }

    }
    @media only screen and (max-width: 767px) {
      .pc {
        display: none !important;
      }
      .copy_pc  {
        display: none !important;
      }

    }

    @media only screen and (max-width: 600px) {
      .first_view {
      position: relative;
      overflow: hidden;
      border-radius: 0 0 30px 30px;
      width: 96%;
      }
      .first_view .slide-media{
        border-radius: 30px;
        /* height: auto; */
      }
      .first_view .splide-wrapper {
      width: 100%;
      height: 100%;
      padding-left: 0px;
      /* min-height: 560px; */
      position: absolute;
      right: 0%;
      left: 0%;
      
    }
    .mv-copy{
      padding: 10px;
      top: 40%;
     }
     .mv-copy h2 span{
      background: #fff;
      padding:20px 0px;
      border-radius: 20px;
      margin: 0px 5px;
      display: inline-block;
     }
     .mv-copy h2{
      font-size: 3em;
     }

      
    }