@charset "UTF-8";
html {
  scrollbar-gutter: stable;
}

/* ========================================
   LOGO_MENU
======================================== */
.header h1 {
  background-image: url(../../img/common/logo_wh.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.header h1 img {
  opacity: 0;
}

.is-open .header h1 {
  background-image: none;
}

.is-open .header h1 img {
  opacity: 1;
}

#header .toggle_drawer span {
  background: #fff;
}
#header .toggle_drawer:before {
  background: #fff;
}
#header .toggle_drawer:after {
  background: #fff;
}

.is-open #header .toggle_drawer span {
  background: #000000;
}
.is-open #header .toggle_drawer:before {
  background: #000000;
}
.is-open #header .toggle_drawer:after {
  background: #000000;
}

/* ========================================
   Intoro
======================================== */
/* ========================================
   Splash
======================================== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: #fff;
  transition: opacity 2s ease;
}
.splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.splash__skip {
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.splash__skip:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.9);
  color: #fff;
}
@media screen and (max-width: 767px) {
  .splash__skip {
    bottom: 24px;
    right: 24px;
    font-size: 11px;
    padding: 8px 16px;
  }
}

.splash__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .splash__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.vide_wrapp {
  opacity: 0;
  transition: 1s ease-in-out;
  height: 100vh;
}

.splash.open .vide_wrapp {
  opacity: 1;
}

/* ========================================
  Jストリーム版動画
======================================== */
/* 全画面オーバーレイ */
#op_movie {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  background: #fff;
  z-index: 99990;
  transition: opacity 2s ease;
}

#op_movie.is-playing {
  opacity: 1;
}

/* ２回目 */
#op_movie.is-skip {
  display: none;
}

/* 画面を切り抜く器（はみ出しを隠す） */
#op_movie .playerCover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#op_movie.is-playing .playerCover {
  opacity: 1;
}

#op_movie.is-hidden .playerCover {
  opacity: 1;
}

/* 16:9の面を“中央基準”でcover拡大 */
#op_movie .playerInner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, 177.7777777778svh);
  height: max(100svh, 56.25vw);
}

#op_movie .playerInner::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* J-Streamが生成する中身を playerInner にフィットさせる */
#op_movie iframe,
#op_movie object,
#op_movie embed,
#op_movie video {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  aspect-ratio: 19/9;
}

/* 非表示 */
#op_movie.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .page_wrapper {
    height: var(--op-vh);
    overflow: hidden;
  }
  #op_movie .playerInner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(100vw, 56.25svh);
    height: max(100svh, 177.7777777778vw);
  }
  /* J-Streamが生成する中身を playerInner にフィットさせる */
  #op_movie iframe,
  #op_movie object,
  #op_movie embed,
  #op_movie video {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    aspect-ratio: 16/9;
  }
  #splash .splash_skip, #op_movie .btnSkip {
    width: 80px;
    top: 10px;
    right: 10px;
    font-size: 14px;
  }
}
/***iphone調整***/
@media screen and (max-width: 767px) {
  #op_movie {
    height: 100svh; /* iPhone Safari対策 */
    overflow: hidden;
  }
  #op_movie .playerInner {
    width: max(100vw, 56.25svh);
    height: max(100svh, 177.7777777778vw);
  }
}
/* ========================================
   MV
======================================== */
.mv {
  position: relative;
  width: 100%;
  height: 100vh;
  height: auto;
  overflow: hidden;
  background: #ffffff;
}
@media screen and (max-width: 767px) {
  .mv {
    height: 100dvh;
  }
}

.mv .mv_in {
  filter: brightness(9);
  opacity: 0;
  transition: 1.2s ease-in-out;
  transition-delay: 0.6s;
}
@media screen and (max-width: 767px) {
  .mv .mv_in {
    height: 100svh;
    min-height: 100svh;
  }
}

.mv.set .mv_in {
  filter: brightness(1);
  opacity: 1;
}

.mv.is-skip .mv_in {
  filter: brightness(6);
  opacity: 0;
  transition: 1.2s ease-in-out;
  transition-delay: 0.6s;
}
@media screen and (max-width: 767px) {
  .mv.is-skip .mv_in {
    filter: brightness(3);
    opacity: 0;
    transition: 0.6s ease-in-out;
    transition-delay: 0s;
  }
}

.mv.set.is-skip .mv_in {
  filter: brightness(1);
  opacity: 1;
}

.mv__bg {
  position: relative;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s ease, filter 1s ease;
}
@media screen and (max-width: 767px) {
  .mv__bg {
    position: absolute;
  }
}
.mv__bg.is-visible {
  opacity: 1;
}
.mv__bg.is-playing {
  filter: blur(10px) brightness(1.1);
}
.mv__bg .mv_layer_1 {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.mv__bg .mv_layer_2 {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mv__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.mv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.mv__txt {
  position: absolute;
  z-index: 5;
  left: 63%;
  top: 24%;
  width: 24vw;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}
.mv__txt.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.mv__txt img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  .mv__txt {
    left: -2%;
    right: 0;
    margin: 0 auto;
    top: 28%;
    width: 50vw;
  }
}

.cloud_bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.cloud_bg .cloud {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cloud_image_1 {
  position: absolute;
  bottom: 40%;
  left: 0;
  z-index: 2;
  width: 45vw;
  mix-blend-mode: screen;
  opacity: 0.6;
  animation: cloudMove 70s linear infinite;
}
@media screen and (max-width: 767px) {
  .cloud_image_1 {
    bottom: 33%;
    width: 65vw;
    animation: cloudMove_sp 50s linear infinite;
  }
}

@keyframes cloudMove {
  /* スタート */
  0% {
    transform: translateX(-45vw);
  }
  /* 移動完了（115秒） */
  92.28% {
    transform: translateX(100vw);
  }
  /* 5秒停止 */
  100% {
    transform: translateX(100vw);
  }
}
@keyframes cloudMove_sp {
  /* スタート */
  0% {
    transform: translateX(-65vw);
  }
  /* 移動完了（115秒） */
  92.28% {
    transform: translateX(100vw);
  }
  /* 5秒停止 */
  100% {
    transform: translateX(100vw);
  }
}
.cloud_image_2 {
  position: absolute;
  bottom: 10%;
  left: 0;
  z-index: 2;
  width: 45%;
  mix-blend-mode: screen;
  opacity: 0;
  animation: cloud_2_Move 30s linear infinite;
  animation-timing-function: ease-in-out;
}
@media screen and (max-width: 767px) {
  .cloud_image_2 {
    bottom: 30%;
    left: 0;
    width: 55%;
    animation: cloud_2_Move_sp 30s linear infinite;
  }
}

@keyframes cloud_2_Move {
  0% {
    transform: translateX(0%) translateY(0%);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  70% {
    transform: translateX(55%) translateY(-65%);
    opacity: 0.7;
  }
  90% {
    transform: translateX(60%) translateY(-70%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%) translateY(0%);
    opacity: 0;
  }
}
@keyframes cloud_2_Move_sp {
  0% {
    transform: translateX(0%) translateY(0%);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  70% {
    transform: translateX(65%) translateY(-40%);
    opacity: 0.7;
  }
  90% {
    transform: translateX(75%) translateY(-50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%) translateY(0%);
    opacity: 0;
  }
}
.cloud_image_3 {
  position: absolute;
  bottom: 47%;
  left: 45%;
  z-index: 2;
  width: 35vw;
  animation: cloud_3_Move 70s linear infinite;
  animation-timing-function: ease-in-out;
  mix-blend-mode: screen;
}
@media screen and (max-width: 767px) {
  .cloud_image_3 {
    bottom: 33%;
    left: 45%;
    width: 60vw;
    animation: cloud_3_Move_sp 30s linear infinite;
  }
}

@keyframes cloud_3_Move {
  0% {
    transform: translateX(0vw) translateY(0%);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  92.28% {
    transform: translateX(90vw) translateY(10%);
    opacity: 0.7;
  }
  100% {
    transform: translateX(90vw) translateY(10%);
    opacity: 0;
  }
}
@keyframes cloud_3_Move_sp {
  0% {
    transform: translateX(0vw) translateY(0%);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  92.28% {
    transform: translateX(60vw) translateY(10%);
    opacity: 0.8;
  }
  100% {
    transform: translateX(60vw) translateY(10%);
    opacity: 0;
  }
}
.mv_bird {
  position: absolute;
  right: -10%;
  bottom: 10%;
  z-index: 3;
  mix-blend-mode: screen;
  width: 25%;
  transform: rotate(350deg);
  mix-blend-mode: difference;
  opacity: 0.3;
}
.mv_bird .bird_v {
  width: 100%;
  height: auto;
}

/*
#birdCanvas {
    position: absolute;
    left: 25%;
    bottom: 5%;
    z-index: 2;
    width: 3%;
    transform: rotate(7deg);
}
*/
.top_cap {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #fff;
  font-size: min(1vw, 11px);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .top_cap {
    font-size: min(2vw, 11px);
  }
}

.bird_bg {
  position: absolute;
  left: 0%;
  bottom: 7%;
  z-index: 2;
  width: 39%;
  height: 80%;
}
@media screen and (max-width: 767px) {
  .bird_bg {
    width: 33.4%;
    height: 80%;
  }
}

#birdCanvas {
  display: block;
  margin-top: 50%;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  #birdCanvas {
    margin-top: 35vh;
  }
}

.footer_wrapp {
  padding-top: 0;
}

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