/* サイト共通ヘッダー/フッター（header.php/footer.php）と統合。
     以前はこのページ単体で position:fixed の全画面ツールとして作られていたが、
     統合後は通常フロー内のセクションとして配置し、site-header/site-footer と共存する。 */
  :root{ --vh-header: 66px; }

  /* 固定ではなく、サイトヘッダーの直下に続く通常フローのツールバー */
  .vh{ position:relative; height:var(--vh-header);
    display:flex; align-items:center; gap:12px; padding:0 clamp(12px,3vw,24px);
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-s); }

  .vh__back{ display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
    font-weight:800; font-size:13px; color:var(--ink); padding:9px 16px;
    border:2px solid var(--ink); border-radius:var(--pill);
    transition:background .2s var(--ease), color .2s var(--ease); }
  .vh__back:hover{ background:var(--ink); color:#fff; }

  .vh__center{ flex:1; min-width:0; text-align:center; }
  .vh__eyebrow{ font-family:var(--en); font-weight:800; font-size:10px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--mag); }
  .vh__title{ font-weight:800; font-size:clamp(14px,2vw,17px); line-height:1.2; letter-spacing:.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .vh__title .y{ font-family:var(--en); color:var(--cyn); margin-right:6px; }

  .vh__nav{ display:flex; gap:8px; flex-shrink:0; }
  .vh__btn{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:13px;
    padding:9px 15px; border-radius:var(--pill); background:var(--cyn); color:#fff;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    box-shadow:var(--sh-s); cursor:pointer; border:0; }
  .vh__btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:var(--sh-m); }
  .vh__btn:disabled{ background:var(--line); color:var(--muted); cursor:default; box-shadow:none; }
  .vh__btn--next{ background:var(--mag); }

  /* iframe 表示領域（通常フロー、十分な高さを確保。site-footer は下にスクロールして到達できる） */
  .vh-stage{ position:relative; height:min(78vh, 760px); background:#fff; }
  .vh-frame{ width:100%; height:100%; border:0; display:block; background:#fff; }

  /* ローディング */
  .vh-load{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; background:var(--soft); color:var(--muted); font-size:14px; font-weight:700; }
  .vh-load.is-hidden{ display:none; }
  .vh-spin{ width:38px; height:38px; border-radius:50%; border:4px solid var(--line);
    border-top-color:var(--mag); animation:vh-spin .8s linear infinite; }
  @keyframes vh-spin{ to{ transform:rotate(360deg); } }
  .vh-note{ font-size:12px; color:var(--muted); font-weight:600; }

  /* 補足バー（アーカイブ注記）: iframeステージの左下に重ねる */
  .vh-badge{ position:absolute; left:12px; bottom:12px; z-index:10; background:rgba(22,22,26,.82); color:#fff;
    font-size:11px; font-weight:700; letter-spacing:.02em; padding:7px 12px; border-radius:var(--pill); }

  @media (max-width:640px){
    :root{ --vh-header: 58px; }
    .vh__back{ padding:8px 12px; font-size:12px; }
    .vh__back .lbl{ display:none; }         /* スマホは「←」だけ */
    .vh__btn .lbl{ display:none; }
    .vh__eyebrow{ display:none; }
    .vh-stage{ height:min(64vh, 560px); }
  }