/* ===== Hero Telop (PC only) ===== */
@media (min-width: 769px){
  :root{
    /* 実際のヘッダー高さに合わせて調整してください */
    --header-h: 55px;
    --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(164, 131, 98, 0.65);
    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); }
  }
}

/* =========================================================
   Mobile（〜768px）：固定1行テロップ
   - 背景なし
   - 黒文字
   - 上部センター
   ========================================================= */
@media (max-width: 768px){

  /* PC用テロップはモバイルで非表示 */
  .hero-telops{ display: none !important; }

  .hero-telops-sp{
    position: fixed;           /* body直下でも安定 */
    top: 65px;                 /* ヘッダー下あたり（必要に応じて調整） */
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 560px);
    z-index: 1100;
    pointer-events: none;
  }

  .telop-sp-text{
    background: none;          /* ★ 背景なし */
    color: #000;               /* ★ 黒文字 */
    font-size: clamp(14px, 4.2vw, 18px);
    line-height: 1.5;
    padding: 0;                /* ★ 余白も不要なら0 */
    text-align: center;
    box-shadow: none;
    border-radius: 0;
    font-family:
      "Hiragino Mincho ProN",
      "Hiragino Mincho Pro",
      "Yu Mincho",
      "MS PMincho",
      "MS Mincho",
      serif;
  }
}



  /* SPテロップ：JSで is-visible / is-hidden を切替 */
  .hero-telops-sp{
    opacity: 1;
    transition: opacity 250ms ease;
  }
  .hero-telops-sp.is-hidden{
    opacity: 0;
    pointer-events: none;
  }
  .hero-telops-sp.is-visible{
    opacity: 1;
  }