/* ===== レスポンシブ上書き（ブレークポイントは元モックの出現順を維持） ===== */

/* ヘッダー：タブレット幅以下はナビをハンバーガー（右側）に集約 */
@media (max-width: 960px) {
  .player-in { position: relative; }
  .player .nav-toggle { display: flex; order: 2; margin-left: auto; }
  .player .corp { display: none; } /* コーポレート導線はメニュー内へ集約 */
  .player .nav-links {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    flex-direction: column; gap: 0; min-width: 210px; padding: 6px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 18px 40px rgba(4, 22, 55, .18); z-index: 130;
  }
  .player .nav-links.open { display: flex; }
  .player .nav-links a { padding: 11px 14px; border-radius: 7px; font-size: 14px; white-space: nowrap; }
  .player .nav-links a:hover, .player .nav-links a:focus { background: rgba(0, 157, 222, .08); }
  .player .nav-links .corp-in-menu { display: block; color: var(--brand); font-weight: 700; border-top: 1px solid var(--line); margin-top: 4px; }
}

/* スマホ：シークバーをヘッダー行の下に全幅で配置（左端→右端に進む） */
@media (max-width: 600px) {
  .player-in { flex-wrap: wrap; padding: 8px 16px 10px; gap: 8px 12px; }
  .player .logo { order: 1; }
  .player .corp { order: 2; margin-left: auto; }
  .seek { order: 3; flex: 0 0 100%; width: 100%; height: 18px; }
  .seek .track { width: 100%; }
  .seek-cue { top: calc(100% + 5px); font-size: 10.5px; padding: 4px 10px; }
}

/* MESSAGE */
@media (max-width: 820px) {
  .msg-grid { grid-template-columns: 1fr; gap: 36px; }
  /* 代表者写真はスマホ・横型で大きくなりすぎるため幅を抑えて中央寄せ（widthを明示しaspect-ratioの高さ0化を防ぐ） */
  .portrait-wrap { width: min(300px, 72vw); margin: 0 auto; justify-self: center; }
}

/* HISTORY（タブレット中間） */
@media (max-width: 850px) {
  .hist-head { left: 5vw; top: 5vh; }
  .hist-head h2 { font-size: 28px; }
  .hist-stage { bottom: 36vh; }
  .viewport { flex: 0 0 64%; max-width: 64%; }
  .arc { right: auto; left: -30%; width: 150vw; }
  .arc2 { right: auto; left: -12%; width: 120vw; }
  .hcard { width: 72vw; left: 52%; padding: 14px 16px; }
  .hcard .hy { font-size: 20px; }
  .hcard .hev { font-size: 13.5px; }
  .year-rail { display: none; }
  .era-follow { position: absolute; right: 3vw; top: 5vh; flex: none; width: 34vw; height: auto; }
  .follow-stage { width: 100%; }
  .follow-img.photo { max-height: 18vh; }
  .follow-img.logo { max-height: 54px; padding: 8px 12px; }
  .follow-cap { display: none; }
  .milestone { top: auto; bottom: calc(36vh + 10px); right: 4vw; }
  .milestone .ms-num b { font-size: 52px; }
  .hist-chart { height: 36vh; }
  .ch-xlab { font-size: 10.5px; }
  .hist-note { display: none; }
}

/* HISTORY（案A＝カードのみ主役／支給画像・グラフ非表示）。
   幅≤1024 “または” タッチ端末（iPad等）に適用。iPad横向き(1180/1366)が
   デスクトップ配置に入り「カードとグラフが分割され過ぎる」問題を解消する。 */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .hist-stage { bottom: 0; }
  .viewport { flex: 0 0 100%; max-width: 100%; overflow: visible; }
  .cards { overflow: visible; }
  .arc, .arc2 { display: none; }
  .year-rail { display: none; }
  .hist-note { display: none; }
  .hcard { left: 50%; width: min(560px, 88vw); padding: 16px 18px; }
  .era-follow { display: none; }
  /* R-12(SP)：背景グラフは縦に間延びするため非表示にし、カードのみ主役に */
  .hist-chart { display: none; }
  /* スマホ/タブレット（カードのみ主役）では100億オーバーレイは非表示にしカードに集中 */
  .milestone { display: none; }
}

/* VISION */
@media (max-width: 820px) {
  .vrow, .vrow.key { grid-template-columns: 62px 1fr; gap: 16px; }
  .vrow .vn { font-size: 38px; }
}

/* VOICES：1段構成＋カード幅を調整（次カードが少し覗く） */
@media (max-width: 600px) {
  .vcard { width: 80vw; max-width: 300px; }
  .marquee + .marquee { margin-top: 0; }
  /* スマホはマーキーのmask合成が重いため無効化（端フェードよりスクロール滑らかさを優先） */
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* LIFE：記念ロゴ・記念品ギャラリー */
@media (max-width: 860px) {
  .release-gallery { grid-template-columns: 1fr; grid-auto-rows: 200px; }
}
@media (max-width: 860px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gtile.big { grid-column: span 2; }
}
/* 末尾の画像ギャラリーはスマホで縦1列に並べる */
@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .gtile.big, .gtile.wide { grid-column: span 1; grid-row: span 1; }
  .release-gallery { grid-template-columns: 1fr; grid-auto-rows: 210px; }
}

/* 全体（HERO・MESSAGE・セクション余白） */
@media (max-width: 860px) {
  .msg-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 100%; }
  .hero h1 .line { white-space: normal; }
  .hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .7)); }
  section { padding: 80px 0; }
  /* R-12(SP)：HEROは縦積み（ロゴ＝上・本文＝下）。横2カラムの詰まりを解消 */
  .hero-b .hero-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .hero-b .hero-visual { order: -1; }
  .hero-b .hero-logo-img { width: min(300px, 62vw); }
  .hero-b .hero-copy { max-width: 100%; }
  .hero-b .hero-tag { letter-spacing: .22em; }
  .hero-b .hero-sub { max-width: 100%; margin-left: auto; margin-right: auto; }
  /* HEROが縦積みになると「SCROLL」が本文に重なるため、縦積み時は非表示 */
  .scrolldown { display: none; }
}

/* R-18：モーダルのスマホ最適化（中央維持・余白圧縮・はみ出し防止） */
@media (max-width: 600px) {
  .vmodal { padding: 14px; }
  .vm-in { max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); }
  .vm-hd { padding: 14px 16px; }
  .vm-text { padding: 16px; }
  .lightbox { padding: 14px; }
  .lb-inner { max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); }
  /* スマホはヘッダーが高い（seek折返し）ため「始めから」を下げてヘッダーとの重なりを回避 */
  .hist-nav.restart { top: 94px; }
  .hist-nav { padding: 6px 12px; font-size: 11.5px; }
}

/* R-16(SP)：キーアニメーション（イントロ）をスマホ向けに縮小し、下部テキストの見切れを解消 */
@media (max-width: 600px) {
  .intro { gap: 14px; padding: 0 20px; }
  .play-wrap { width: 150px; height: 150px; }
  .play-rays { width: 200px; height: 150px; }
  .play-glow { width: 150px; height: 150px; }
  .playbtn { width: 104px; height: 88px; }
  .play-tri { height: 84px; width: auto; }
  .playbtn.ready::after { width: 128px; height: 128px; }
  .intro-stage-slot { height: 104px; }
  .intro-year { font-size: clamp(40px, 12vw, 64px); }
  .intro-logo { height: 92px; }
  .intro-title { font-size: clamp(18px, 5vw, 24px); }
  .intro .kicker { font-size: 11px; letter-spacing: .24em; }
}
/* 低い画面（横向きスマホ等）はさらに圧縮 */
@media (max-height: 560px) {
  .intro { gap: 10px; }
  .play-wrap { width: 112px; height: 112px; }
  .play-rays { width: 150px; height: 110px; }
  .play-glow { width: 112px; height: 112px; }
  .playbtn { width: 84px; height: 72px; }
  .play-tri { height: 66px; width: auto; }
  .playbtn.ready::after { width: 104px; height: 104px; }
  .intro-stage-slot { height: 84px; }
  .intro-year { font-size: 44px; }
  .intro-logo { height: 70px; }
  .intro-title { font-size: 18px; }
}