@charset "UTF-8";
#opening {
  --app-h: 100vh;
  --app-w: 100vw;
  width: 100%;
  height: var(--app-h);
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: #000;
  overflow: hidden;
}
@supports (height: 100dvh) {
  #opening {
    --app-h: 100dvh;
    --app-w: 100dvw;
  }
}
@media (orientation: landscape) and (max-width: 767px) {
  #opening {
    height: var(--app-h);
  }
}
@media print, screen and (min-width: 768px) {
  #opening {
    height: var(--app-h);
  }
}

/* ロゴアニメーション */
#opening .opening_logo {
  width: min(50%, 452px);
  margin: auto;
  opacity: 0;
  position: relative;
  z-index: 0;
}
#opening .opening_logo img {
  max-width: 100%;
  height: auto;
}

/* フラッシュ */
#opening .opening_flash {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  /* 真っ白 */
  opacity: 0;
  /* 最初は透明 */
  pointer-events: none;
  /* クリックを邪魔しない */
}

/* 最終 */
.opening_content {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.opening_content .mask-area {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #2e2e2e;
  overflow: hidden;
  /* 初期値（マスク位置）: 中央 */
  --mask-x: 50%;
  --mask-y: 50%;
}
.opening_content .mask-area::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mask-x) var(--mask-y), transparent 0, transparent 2vw, rgba(0, 0, 0, 0.1) 4vw, rgba(0, 0, 0, 0.2) 8vw, rgba(0, 0, 0, 0.3) 12vw, rgba(0, 0, 0, 0.5) 16vw, rgba(0, 0, 0, 0.5) 100%);
}
.opening_content .opening_content_inner {
  width: min(50%, 452px);
  margin: auto;
  position: relative;
  z-index: 0;
}
.opening_content .opening_content_inner .opening_content_logo {
  pointer-events: none;
}
.opening_content .opening_content_inner .opening_content_logo img {
  max-width: 100%;
  height: auto;
}
.opening_content .opening_content_inner .opening_content_btn {
  text-align: center;
  margin-top: 45px;
}
.opening_content .opening_content_inner .opening_content_btn .btn {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: normal;
  border: solid 1px #fff;
  border-radius: 50em;
  width: 11.35294em;
  height: 2.94117em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: letter-spacing 0.3s ease;
}
.opening_content .opening_content_inner .opening_content_btn .btn:before {
  content: "";
  display: block;
  width: 0.514705em;
  height: 0.514705em;
  border-radius: 50%;
  margin-right: 0.88235em;
  background-color: #00489d;
}
.opening_content .opening_content_inner .opening_content_btn .btn:hover {
  letter-spacing: 0.15em;
}

/* --- アニメーション終了後 --- */
body.complete #opening {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* --- 2回目以降は非表示 --- */
body.load_already #opening {
  opacity: 0;
  visibility: hidden;
  transition: all 0.1s ease;
}

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