@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 */
/********************************************/
/********************************************/
/*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(100px);
          transform: translateX(100px);
  -webkit-transition: all 1s;
  transition: all 1s;
}
.animate.ver_right_left.scrollin {
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

/*=============================================*/
/*  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);
}