/* 追加した共通部品の幅・操作性・動きの軽減を最後にまとめる。 */
@media (max-width: 960px) {
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 10px; }
  .songs-records { grid-template-columns: 1fr; }
  .schedule-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ハンバーガーに切り替わる直前の幅（681〜760px）で、ロゴとナビの各項目が2行に折れないよう、間隔と字間だけ詰めて1行に保つ。 */
@media (min-width: 681px) and (max-width: 760px) {
  .header-inner { gap: 16px; }
  .site-nav { gap: 8px; }
  .site-nav a { letter-spacing: .06em; white-space: nowrap; }
  .brand span { white-space: nowrap; }
}

@media (max-width: 680px) {
  .header-inner { gap: 8px; }
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    padding: 8px 24px 16px;
    border-bottom: 1px solid rgba(220, 230, 255, .28);
    background: rgba(18, 24, 48, .96);
    box-shadow: 0 14px 24px rgba(11, 16, 34, .28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    /* 閉じているメニューのリンクに Tab のフォーカスが入り、見えない所へ移動しないよう、閉じ終わったら visibility も隠す。 */
    visibility: hidden;
    transition: opacity var(--transition-ui), transform var(--transition-ui), visibility 0s linear .3s;
  }
  .site-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; transition-delay: 0s; }
  .site-nav a { padding: 11px 0; color: rgba(255, 255, 255, .9); font-size: 12px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .page-main { --page-main-top: 61px; padding-top: 61px; }
  .page-hero {
    min-height: 0;
    padding-block: 72px 54px;
    background-image:
      linear-gradient(105deg, rgba(28, 34, 66, .96), rgba(57, 60, 98, .88)),
      linear-gradient(125deg, rgba(255, 255, 255, .12), rgba(177, 140, 255, .16)),
      var(--page-hero-image);
    background-position: center, center, center var(--page-hero-image-y, center);
  }
  .admin-page-hero { min-height: 0; }
  .page-hero h1 { font-size: clamp(34px, 11vw, 52px); }
  .site-section { padding-block: 72px; }
  .profile-intro, .detail-list, .care-list, .creator-credit { grid-template-columns: 1fr; }
  .profile-meta { grid-template-columns: 1fr; }
  .profile-image { max-width: 340px; margin-inline: auto; }
  .song-record { grid-template-columns: 112px minmax(0, 1fr); }
  .schedule-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-week-card { min-height: 185px; }
  .schedule-event { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .schedule-event-link { justify-self: start; }
  .links-grid { grid-template-columns: 1fr; }
  .admin-shell { padding: 36px var(--gutter) 70px; }
  .admin-fields { grid-template-columns: 1fr; }
  .admin-field-check { padding-top: 0; }

  /* 表：スマホでは右の列が画面の外に切れないよう、セルの余白を詰めて見出しの列を折り返さない。 */
  .guideline-table th, .guideline-table td { padding: 12px 14px; }
  .guideline-table tbody th { white-space: nowrap; }
  /* 3列以上の表（ガイドライン・ハッシュタグ）は、1行ずつの段に組み替えて補足を下に回す。 */
  .guideline-table:has(> [data-cms="guidelines-rows"], > [data-cms="profile-hashtags"]),
  .guideline-table:has(> [data-cms="guidelines-rows"], > [data-cms="profile-hashtags"]) tbody { display: block; }
  .guideline-table:has(> [data-cms="guidelines-rows"], > [data-cms="profile-hashtags"]) thead { display: none; }
  [data-cms="guidelines-rows"] tr,
  [data-cms="profile-hashtags"] tr { display: grid; align-items: center; border-top: 1px solid var(--color-line); }
  [data-cms="guidelines-rows"] tr { grid-template-columns: minmax(0, 1fr) auto; }
  [data-cms="profile-hashtags"] tr { grid-template-columns: auto minmax(0, 1fr); }
  [data-cms="guidelines-rows"] tr:first-child,
  [data-cms="profile-hashtags"] tr:first-child { border-top: 0; }
  [data-cms="guidelines-rows"] th, [data-cms="guidelines-rows"] td,
  [data-cms="profile-hashtags"] th, [data-cms="profile-hashtags"] td { border: 0; }
  [data-cms="guidelines-rows"] th { grid-column: 1 / -1; border-bottom: 1px solid var(--color-line); }
  [data-cms="profile-hashtags"] th { background: transparent; }
  [data-cms="guidelines-rows"] td:last-child,
  [data-cms="profile-hashtags"] td:last-child { grid-column: 1 / -1; padding-top: 0; color: var(--color-muted); }
  [data-cms="guidelines-rows"] td:last-child:empty { display: none; }
}

/* 曲名（「白夜のスローモーション」など11文字）が1行に収まらず「ョン」「ルク」だけ次の行へ割れる幅では、400px 以下と同じ大きさにする。 */
@media (max-width: 480px) {
  .song-record h2 { font-size: 17px; }
}

@media (max-width: 400px) {
  :root { --gutter: 20px; }
  .brand { gap: 7px; }
  .brand-mark { width: 28px; }
  .lyrics-snow { min-height: 178px; padding: 16px; }
  .song-record { grid-template-columns: 90px minmax(0, 1fr); gap: 13px; }
  .song-record h2 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-ready [data-site-reveal] { opacity: 1; transform: none; }
  .site-ready [data-site-reveal], .cursor-snow, .lyrics-snow p { animation: none; }
  .site-nav, .home-page .site-header, .song-record, .link-panel, .song-card-link .song-image picture, .link-card-link::before { transition: none; }
}