/* = bc-intro-overlay = */
.bc-intro-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #fff;
  opacity: 1;
  pointer-events: all;
  transition: opacity .8s ease;
}

.bc-intro-overlay.is-hide{
  opacity: 0;
  pointer-events: none;
}

body.is-bc-intro-lock{ overflow: hidden; }

/* ここが肝：幅だけでスケールを決める */
.bc-intro-overlay{
  --bc-intro-scale: clamp(0.32, 0.08vw + 0.55, 1); 
  /* 例：スマホで0.32〜0.5くらい、タブ〜PCで1まで戻る */
}
/* layout */
.bc-intro-overlay__inner{
  width: min(913px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.0vw, 20px);
  padding: 24px 16px;
}

/* common */
.bc-intro-overlay__img{
  display: block;
  max-width: 100%;
  height: auto;

  opacity: 0;
  transform: translateY(3px);
  animation: bcIntroFadeIn 1.8s ease forwards;
}

/* ✅ それぞれ “ロゴに対する見た目比率” で固定 */
.bc-intro-overlay__logo{
  width: 60%;            /* inner幅=ロゴ枠 */
  max-width: 100%;
  animation-delay: 0.5s;
}

.bc-intro-overlay__txt01{
  width: 34%;             /* 311/913 ≒ 34% */
  max-width: 100%;
  animation-delay: 1.5s;
}

.bc-intro-overlay__txt02{
  width: 50%;             /* 460/913 ≒ 50% */
  max-width: 100%;
  animation-delay: 2.25s;
}

/* アニメーション */

@keyframes bcIntroFadeIn{
  to { opacity: 1; transform: translateY(0); }
}

/* さらに小さい端末だけ（幅で）一段階だけ縮める */
@media (max-width: 390px){
  .bc-intro-overlay{
    --bc-intro-scale: 0.28;
  }
}