/* Header menu link color: turn black when body has is-scrolled (same as logo) 
ヘッダーテキストメニュの色変更、スクロールで黒に変わる*/
body.is-scrolled .header__sec01--menu01 ul li a {
  color: #000;
}


/* Opening overlay */
.opening {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: opacity .6s ease, visibility .6s ease;
}

.opening.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.opening__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.opening__logo img {
  width: 300px;
  height: auto;
  animation: openingLogoIn .9s ease both;
}


@media (prefers-reduced-motion: reduce) {
  .opening__logo img { animation: none; }
  .opening { transition: none; }
}

.opening__skip {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: transparent;
  border: 1px solid #ccc;
  color: #333;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

@keyframes openingLogoIn {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes openingBlink {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}



@media (max-width: 767px) {
  .opening__logo img {
    width: 180px;
  }

  .opening__inner {
    gap: 10px;
  }

  .opening__skip {
    right: 8px;
    bottom: 8px;
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* =============================
   Top: .top01__box01--ttl--span01 ボーダー左からフェードイン
   ============================= */
.top01__box01--ttl--span01 {
  position: relative;
  border-top: 0;
  border-bottom: 0;
  overflow: hidden; /* モバイルでのサブピクセルはみ出し抑止 */
}

/* span02/03 も同様にボトムラインをアニメ表示（元々は下線のみ） */
.top01__box01--ttl--span02,
.top01__box01--ttl--span03 {
  position: relative;
  border-bottom: 0;
  overflow: hidden;
}

/* 初期状態: 線は幅0で非表示にしておく */
.top01__box01--ttl--span01::before,
.top01__box01--ttl--span01::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  width: 0; /* アニメ前は0 */
  height: 1px;
  background-color: #fff;
  opacity: 0; /* フェード用 */
  transition: width 1s cubic-bezier(.22,.61,.36,1) .05s, opacity .35s ease;
}

.top01__box01--ttl--span01::before { top: 0; transition-delay: .05s, .05s; }
.top01__box01--ttl--span01::after { bottom: 0; transition-delay: .17s, .17s; }

/* span02/03 は下線のみ（::after）を左から描画 */
.top01__box01--ttl--span02::after,
.top01__box01--ttl--span03::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #fff;
  opacity: 0;
  bottom: 0;
  transition: width 1s cubic-bezier(.22,.61,.36,1) .05s, opacity .35s ease;
}

/* 行ごとの時間差（PC） */
.top01__box01--ttl--span02::after { transition-delay: .28s, .28s; }
.top01__box01--ttl--span03::after { transition-delay: .40s, .40s; }

/* オープニング終了 + AOS発火で線を伸ばす */
body.opening-done .top01__box01--ttl.aos-animate .top01__box01--ttl--span01::before,
body.opening-done .top01__box01--ttl.aos-animate .top01__box01--ttl--span01::after {
  width: 100%;
  opacity: 1;
}

body.opening-done .top01__box01--ttl.aos-animate .top01__box01--ttl--span02::after,
body.opening-done .top01__box01--ttl.aos-animate .top01__box01--ttl--span03::after {
  width: 100%;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .top01__box01--ttl--span01::before,
  .top01__box01--ttl--span01::after {
    transition: none;
    width: 100%;
    opacity: 1;
  }
  .top01__box01--ttl--span02::after,
  .top01__box01--ttl--span03::after {
    transition: none;
    width: 100%;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .top01__box01--ttl--span01::before,
  .top01__box01--ttl--span01::after {
    transition-duration: .7s, .25s;
  }
  .top01__box01--ttl--span01::before { transition-delay: .03s, .03s; }
  .top01__box01--ttl--span01::after { transition-delay: .12s, .12s; }

  .top01__box01--ttl--span02::after,
  .top01__box01--ttl--span03::after {
    transition-duration: .7s, .25s;
  }
  /* 行ごとの時間差（SP） */
  .top01__box01--ttl--span02::after { transition-delay: .20s, .20s; }
  .top01__box01--ttl--span03::after { transition-delay: .28s, .28s; }
}