@charset "UTF-8";
html {
  font-size: 62.5%;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  /* 表示トリガー：.visible クラスで表示（遅延制御は JS で行う） */
}
.loading.hidden {
  opacity: 0;
  visibility: hidden;
}
.loading .loading-logo {
  position: relative;
  max-width: 400px;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading .loading-inner {
  position: relative;
  width: 100%;
}
.loading .loading-inner::before {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  min-width: 1px; /* 常に少なくとも1pxは表示 */
  height: 87%;
  top: calc(46% + 1px);
  /* allow JS to override EXTRA-based offset via --before-left (fallback keeps original behavior) */
  left: var(--before-left, -7.5%);
  transform: translateY(-50%);
  background-color: #000;
  z-index: 2; /* 画像に隠れないよう上に出す */
  -webkit-animation: blink 1s linear infinite;
          animation: blink 1s linear infinite;
  /* かなり強め：開始は非常にゆっくり、終盤で急加速するカーブ */
  transition: width 0.8s cubic-bezier(0.05, 0.9, 0.3, 1), opacity 0.9s cubic-bezier(0.02, 0.9, 0.3, 1);
  will-change: width, opacity;
}
@media screen and (min-width: 768px) {
  .loading .loading-inner::before {
    /* 小さい画面では、左端からのオフセットを固定値から割合に変更 */
    height: 88%;
    top: calc(48% + 1px);
  }
}
.loading .loading-inner.expanded::before {
  -webkit-animation: none;
          animation: none;
  width: var(--before-expanded-width, 100%);
  opacity: 1;
}
.loading .fadein-inner {
  /* 400px の横幅のとき margin-top が 56px になるように。
     それ以外は横幅（親要素の幅）に比例して線形にスケールする。
     （56 / 400 = 14% — margin-top は親幅に対する割合で計算される） */
  margin-top: 9.5%;
  margin-left: auto;
  margin-right: auto;
  width: 61.4247429403%; /* 77.241はロゴの幅、125.749はロゴの高さ */
  height: auto;
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 3s, transform 3s;
  will-change: opacity, transform;
  pointer-events: none;
}
.loading .fadein-inner.speed0 {
  transition: opacity 0.5s, transform 0.5s;
}
.loading .fadein-inner.speed075 {
  transition: opacity 0.75s, transform 0.75s;
}
.loading .fadein-inner.speed1 {
  transition: opacity 1s, transform 1s;
}
.loading .fadein-inner.speed2 {
  transition: opacity 2s, transform 2s;
}
.loading .fadein-inner.visible {
  opacity: 1;
  transform: translateY(30px); /* 現在位置から下へ30px移動 */
  pointer-events: auto;
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*# sourceMappingURL=loading.css.map */