/* ===== Hero Telop (PC only) ===== */
@media (min-width: 769px){
  :root{
    /* 実際のヘッダー高さに合わせて調整してください */
    --header-h: 200px;
    --telop-offset: 18px;                      /* メニューの少し下 */
    --telop-top: calc(var(--header-h) + var(--telop-offset));
    --char-delay: 40ms;                         /* 1文字あたり遅延 */
  }

  /* ヒーロー（#frontBg または .hero-visual）が画面にある時だけ表示 */
  .hero-telops{
    position: fixed;
    inset: 0;
    /* ヘッダーより下、背景より上に配置：
       ヘッダーの z-index が 1000 前後なら 900 にして被らないようにする */
    z-index: 900;
    pointer-events: none;                       /* 何もクリックをブロックしない */
    opacity: 0;
    transition: opacity 300ms ease;
  }
  .hero-telops.is-visible{ opacity: 1; }
  .hero-telops.is-hidden{ opacity: 0; }

  /* 各テロップ（中央寄せ） */
  .hero-telop{
    position: absolute;
    top: var(--telop-top);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 600ms ease;
    width: 100vw;                  /* ★ 横幅フルスクリーンに変更 */
    max-width: none;               /* ★ 上限幅を解除 */
  }
  .hero-telop.is-active{ opacity: 1; }

  /* 見た目 */
  .telop-inner{
    background: rgba(7, 41, 238, 0.55);
    color: #fff;
    font-size: clamp(16px, 2.6vw, 24px);
    line-height: 1.6;
    padding: 12px 22px;
    border-radius: 0;              /* ★ 角丸を無効化（両端まで自然に） */
    text-align: center;
    letter-spacing: .02em;
    box-shadow: none;              /* ★ 両端が光らないように影も除去 */
    pointer-events: none;
    white-space: normal;           /* ★ 複数行にも対応（必要なら） */
    display: block;                /* ★ 背景を横いっぱいに広げるため */
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "MS PMincho", "MS Mincho", serif;

  }

  /* ==== 左→右 タイプオン ==== */
  .telop-inner .char{
    opacity: 0;
    display: inline-block;
    transform: translateY(0.35em);
    animation: telopCharIn 0.45s ease forwards;
    animation-delay: calc(var(--i) * var(--char-delay));
  }
  .telop-inner:not(.type-on) .char{
    animation: none;
    opacity: 0;
    transform: translateY(0.35em);
  }
  @keyframes telopCharIn{
    to{ opacity:1; transform: translateY(0); }
  }
}