@charset "UTF-8";
/*=============================================*/
/*Animation Layout*/
/*=============================================*/
/* アニメーション中のスクロール制御 */
body.is-loading {
  overflow: hidden;
  height: 100vh;
}

/* オーバーレイを画面全体に */
#overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #fff; /* 背景色はお好みで */
  opacity: 1;
  -webkit-transition: opacity 0.35s ease;
  transition: opacity 0.35s ease;
}

/* フェードアウト用 */
#overlay.is-hide {
  opacity: 0;
  pointer-events: none;
}

/* アニメーション表示領域（サイズはお好みで） */
#loading-animation {
  width: min(80vw, 700px);
  aspect-ratio: 16/9; /* opening.jsonは 1127x630 なので近い比率 */
}

/* 通常コンテンツは最初非表示 */
.is-hidden {
  display: none;
}

/********************************************/
/*SP Menu  Animation */
/********************************************/
@-webkit-keyframes txt_anime {
  0% {
    opacity: 0;
    top: 3.5em;
  }
  40% {
    opacity: 0;
    top: 3.5em;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes txt_anime {
  0% {
    opacity: 0;
    top: 3.5em;
  }
  40% {
    opacity: 0;
    top: 3.5em;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@-webkit-keyframes txt_anime02 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
    -webkit-transition: all 1s;
    transition: all 1s;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes txt_anime02 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
    -webkit-transition: all 1s;
    transition: all 1s;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
/*=============================================*/
/*  Top                               */
/*=============================================*/
/********************************************/
/*main_visual */
/********************************************/
/********************************************/
/*fv_catch */
/********************************************/
@-webkit-keyframes barSlide {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes barSlide {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes textShow {
  to {
    opacity: 1;
  }
}
@keyframes textShow {
  to {
    opacity: 1;
  }
}
/********************************************/
/*Line Slide */
/********************************************/
@-webkit-keyframes linebar {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes linebar {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  50% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
/********************************************/
/*marquee */
/********************************************/
@-webkit-keyframes marquee {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes marquee {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
/********************************************/
/*Scroll Animation */
/********************************************/
.animate.ver_down_top {
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  -webkit-transition: all 1s;
  transition: all 1s;
}
.animate.ver_down_top.scrollin {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.animate.ver_left_right {
  opacity: 0;
  -webkit-transform: translateX(-100px);
          transform: translateX(-100px);
  -webkit-transition: all 1s;
  transition: all 1s;
}
.animate.ver_left_right.scrollin {
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.animate.ver_right_left {
  opacity: 0;
  -webkit-transform: translateX(200px);
          transform: translateX(200px);
  -webkit-transition: all 1s;
  transition: all 1s;
}
.animate.ver_right_left.scrollin {
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.animate.zoom_in {
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.animate.zoom_in.scrollin {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

/*=============================================*/
/*  page                               */
/*=============================================*/
/********************************************/
/*main_visual */
/********************************************/
.page_main_block .page_main_visual .left {
  opacity: 0;
  -webkit-transform: translateX(-100px);
          transform: translateX(-100px);
  -webkit-transition: all 1s;
  transition: all 1s;
}
.page_main_block .page_main_visual .left.a_start {
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

.page_main_block .page_main_visual .img_box {
  opacity: 0;
  -webkit-transform: translateX(200px);
          transform: translateX(200px);
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
}
.page_main_block .page_main_visual .img_box.a_start {
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}