@charset "UTF-8";
/* ============================================================
 * Project   : GLAYER（glay.fan リニューアル）
 * Author    : ＊あっきぃ＊
 * Created   : 2026-09-25 (JST)
 * Copyright : © 2026 GLAYER
 * ============================================================
 * 個人運営の非公式ファンサイト。社長判断（design-spec.md 10-3節⑧）により
 * 制作会社（ソーゾーリンク）のクレジットはコード上に入れていない。
 *
 * 読み込み順：foundation → layout → module → utility。
 * メディアクエリはこのファイルの最後にまとめて置く（社内規約 9.5節）。
 * ============================================================ */

@import "foundation/_reset.css";
@import "foundation/_variables.css";
@import "foundation/_base.css";
@import "layout/_layout.css";
@import "module/_header.css";
@import "module/_breadcrumb.css";
@import "module/_footer.css";
@import "module/_heading.css";
@import "module/_hero.css";
@import "module/_sub-heading.css";
@import "module/_page-toc.css";
@import "module/_list-head.css";
@import "module/_group-heading.css";
@import "module/_side-nav.css";
@import "module/_page-top.css";
@import "module/_controls.css";
@import "module/_link-row.css";
@import "module/_list.css";
@import "module/_list-group.css";
@import "module/_home.css";
@import "module/_home-latest.css";
@import "module/_recent-tour.css";
@import "module/_new-release.css";
@import "module/_setlist.css";
@import "module/_matrix.css";
@import "module/_tour-profile.css";
@import "module/_youtube.css";
@import "module/_works.css";
@import "module/_history-row.css";
@import "module/_jiten.css";
@import "module/_news.css";
@import "module/_books.css";
@import "module/_chart.css";
@import "module/_timeline.css";
@import "module/_year-nav.css";
@import "module/_chronicle.css";
@import "module/_history-events.css";
@import "module/_column.css";
@import "module/_glossary.css";
@import "module/_teru-goroku.css";
@import "module/_member.css";
@import "utility/_spacing.css";
@import "utility/_display.css";

/* ============================================================
 * メディアクエリ（社内規約 9.5節：この位置にまとめる）
 * ブレークポイント：1080px（2カラム・年ナビ・フッターの列を畳む）／800px（ヘッダーをメニューに・横並びをやめる）／
 * 560px（スマホ最適）。設計書 docs/design-refresh-2026-09-30.md 7章。
 * ============================================================ */

/* 1081〜1200px：ヘッダーのナビの間を詰める（8項目が1行に収まるように）。サイドバー付きの本文が狭くなるので、コラム一覧のカードは
   3列でなく2列にする（3列だとカード幅が 218px まで細くなる）。 */
@media (min-width: 1081px) and (max-width: 1200px) {
  .site-header__nav { gap: var(--space-4); }
  .site-header__nav-link { font-size: 0.8125rem; }
  .column-list { grid-template-columns: repeat(2, 1fr); }
}

/* 1440px 以上：ページトップは本文の枠（1200px）の外＝画面の右端から 16px に、44×44 の「↑」だけの四角で追従する
   （枠と左右の余白 120px 以上の間に収まる幅だけ。1439px 以下は追従させず、main の最後の文字リンク＝module/_page-top.css の既定）。
   ラベルは視覚的に隠す（スクリーンリーダーには読ませる）。スクロールに連動する CSS が使えるブラウザは、400px スクロールするまで出さない
   （使えないブラウザは常時表示）。キーボードで届いたときは必ず見える。 */
@media (min-width: 1440px) {
  .page-top { position: fixed; right: var(--space-4); bottom: var(--space-5); margin: 0; z-index: 20; }
  .page-top__link {
    justify-content: center;
    width: 2.75rem;
    padding: 0;
    background: var(--color-ink);
    color: var(--color-on-ink);
    border-radius: var(--radius);
    font-size: 1.125rem;
    line-height: 1;
  }
  .page-top__link:hover { background: var(--color-accent); color: var(--color-on-ink); }
  .page-top__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  @supports (animation-timeline: scroll()) {
    .page-top {
      opacity: 0;
      pointer-events: none;
      animation: page-top-in linear both;
      animation-timeline: scroll(root);
      animation-range: 400px 440px;
    }
    .page-top:focus-within { opacity: 1; pointer-events: auto; animation: none; }
  }
}

/* 1081px 以上：日替わりの曲の一覧は2列に分ける（HEAVY GAUGE で 35 行・約 1,900px を約半分に）。上から下へ流す
   （column-count）ので、縞は各列の中で崩れない。 */
@media (min-width: 1081px) {
  .rotating-list { display: block; column-count: 2; column-gap: var(--space-6); }
  .rotating-list__item { break-inside: avoid; }
}

@media (max-width: 1080px) {
  :root { --section-gap: 6rem; --header-h: 64px; --band-pad: 2rem; }

  .site-header__tagline { display: none; }
  .site-header__nav { gap: var(--space-3); }

  /* 2カラム → 1カラム：サイドバーは本文の下に「関連する入口」として続ける（801〜1080 はブロックを2列の格子）。 */
  .l-main-side:not(.l-main-side--single) { display: block; }
  .l-main-side:not(.l-main-side--single) > .side-nav {
    padding-top: var(--space-8);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--block-gap) var(--space-6);
  }
  .side-nav__block + .side-nav__block { margin-top: 0; }
  /* ブロックが1つだけのページ（GLAY速報・コラム・メンバー個別）：半分幅の箱＋右半分の空白にしない。全幅にして、中の行は
     3列の文字リンクの格子にして縦を詰める（800px 以下は2列）。 */
  .l-main-side:not(.l-main-side--single) > .side-nav--solo { grid-template-columns: minmax(0, 1fr); }
  .side-nav--solo .side-nav__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-4); }
  /* 「コンテンツ」（ホームと同じ入口の一覧）は本文の下では出さない（フッターのサイトマップに同じリンクがある）。 */
  .side-nav__block--contents { display: none; }

  .home-latest { display: block; }
  .home-latest__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--block-gap); }
  .openers-closers { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(3, 1fr); }
  .member-grid { grid-template-columns: repeat(2, 1fr); }

  /* 歴史：年ナビは左の列をやめ、節の頭の横送りの帯にする（節の中だけ追従）。年の見出しは追従させない
     （帯と重なって画面の上を占めるため。年の見出しは行の頭の塗りの帯として流れる。設計書 6-4節のずれは同書に注記）。
     追従する外側は不透明な白。右端の「まだ続く」合図のぼかしは内側のスクロールする並びにだけ付ける
     （最後まで送ると末尾の余白の上に来るので、最後の年は隠れない）。 */
  .chronicle { display: block; }
  .year-nav {
    top: var(--header-h);
    z-index: 6;
    height: var(--year-bar-h);
  }
  .year-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
    height: 100%;
    max-height: none;
    padding-right: var(--space-6);
    /* キーボード（Tab）でリンクに着いたとき、右端のぼかしの下に半分隠れたまま止まらないよう、余白ぶん内側に入れて送る。 */
    scroll-padding-inline: var(--space-8);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, var(--color-ink) calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, var(--color-ink) calc(100% - 2rem), transparent);
  }
  .year-nav__link { flex: 0 0 auto; min-height: 2.75rem; }
  .chronicle__list { margin-top: var(--space-4); }
  .chronicle__year { scroll-margin-top: calc(var(--year-bar-h) - var(--space-4)); }
  .chronicle__year-heading { position: static; }

  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
}

@media (max-width: 800px) {
  /* 1回だけ演奏された曲：（800px 以下。561〜800 で3列のままだと曲名の列が細くなり語の途中で割れる＝デザイン監査5回目）1行目＝曲名（全幅）、2行目＝日付｜会場（日付の列は全行で同じ変数の幅）。 */
  .played-once-list__item { grid-template-columns: var(--played-once-date-w) minmax(0, 1fr); row-gap: var(--space-1); }
  .played-once-list__song { grid-column: 1 / -1; grid-row: 1; }
  .played-once-list__date { grid-column: 1; grid-row: 2; }
  .played-once-list__venue { grid-column: 2; grid-row: 2; }

  :root {
    --section-gap: 5rem;
    --section-gap-first: 2.5rem;
    --block-gap: 1.5rem;
    --hero-gap: 3rem;
    --hero-pad: 3.5rem;
    --gutter: 1.5rem;
  }

  .site-header__nav { display: none; }
  .site-header__menu-btn { display: inline-flex; }

  .l-main-side:not(.l-main-side--single) > .side-nav { grid-template-columns: 1fr; }
  .side-nav--solo .side-nav__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-latest__side,
  .home-latest--stack .home-latest__side { grid-template-columns: 1fr; gap: var(--block-gap); }

  .members { grid-template-columns: repeat(2, 1fr); }
  .content-nav { grid-template-columns: repeat(2, 1fr); }
  .articles { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; }
  .costume-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { --tl-label-w: 6rem; }
  .timeline__row-label { font-size: 0.8125rem; }

  .setlist { column-count: 1; }

  /* 一覧の行は全行同じ2行の形：曲名1行目／日付・件数2行目、期間・公演数1行目／ツアー名2行目、日付・曲数・ラベル1行目／会場・都市2行目
     （line1／meta は module/_setlist.css・_list.css の既定 display:contents を、ここで実体の行に戻す。列の幅は各ブロックのカスタムプロパティ）。
     1行目の中の列は行をまたいで同じ幅にする（日付・曲数・ラベルは固定幅、期間は数字が等幅なので全行同じ幅）。曲一覧の日付が無い曲も日付のセルは空のまま残す。
     開閉の「＋」は1行目の右端に固定する（行の右パディングに置く。折り返して3行目に落ちない）。
     曲一覧の見出し行は出さない（各行が「題名／日付・件数」の2行になり、列が無くなるため）。 */
  .tour-list__row { --tour-list-period-w: 12.5em; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
  .tour-list__line1 {
    display: grid;
    grid-template-columns: var(--tour-list-period-w) minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: baseline;
  }
  details.setlist-show > .setlist-show__summary { display: block; }
  .setlist-show__line1 {
    display: grid;
    grid-template-columns: var(--setlist-show-date-w) var(--setlist-show-count-w) minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: baseline;
  }
  .setlist-show__line2 { margin-top: var(--space-1); }
  .song-list__meta {
    display: grid;
    grid-template-columns: 6.2em auto;
    column-gap: var(--space-4);
    align-items: baseline;
  }
  .song-list__date,
  .song-list__count { grid-column: auto; text-align: left; }
  /* 発売日の無い曲の日付のセルは空のまま列を残し、薄い「—」を CSS の文字で入れる（DOM の文字は増やさない。読み上げには出さない）。 */
  .song-list__date:empty::before { content: "\2014"; content: "\2014" / ""; color: var(--color-text-mute); }
  .song-list__head { display: none; }
  details.song-list__row > .song-list__summary {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: var(--space-1);
  }
  details.song-list__row > .song-list__summary,
  details.setlist-show > .setlist-show__summary { position: relative; padding-right: var(--space-6); line-height: var(--lh-list); }
  details.song-list__row > .song-list__summary::after,
  details.setlist-show > .setlist-show__summary::after { position: absolute; top: 0; right: 0; margin: 0; }

  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .column-list { grid-template-columns: repeat(2, 1fr); }

  .column-entry__pager { flex-direction: column; align-items: flex-start; }

  /* 歴史の出来事の行は2行の格子：[icon][日付][種類]…[主語][＋]／[題名（icon の右から全幅）]。日付の列は全行で同じ幅（変数）。 */
  .history-event { --history-event-icon-w: 1.5rem; }
  details.history-event > .history-event__summary { grid-template-columns: var(--history-event-icon-w) var(--history-event-date-w) auto minmax(0, 1fr) auto 1.5rem; }
  .history-event__icon { width: 1.5rem; height: 1.5rem; padding: 0.25rem; }
  .history-event__title { grid-column: 2 / -1; grid-row: 2; }
  .history-event__subject { grid-column: 5; grid-row: 1; }

  /* 沿革の行も2行の格子：1行目＝日付｜区分｜出典、2行目＝題名（全幅）。区分・出典は広い幅と同じ変数の固定幅なので、
     出典が無い行でも区分の左端は全行で揃う。 */
  .history-row { grid-template-columns: minmax(0, 1fr) var(--history-row-kind-w) var(--history-row-source-w); row-gap: var(--space-1); }
  .history-row__date { grid-column: 1; grid-row: 1; }
  .history-row__kind { grid-column: 2; grid-row: 1; }
  .history-row__source { grid-column: 3; grid-row: 1; }
  .history-row__title { grid-column: 1 / -1; grid-row: 2; }

  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__list--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); }

  .chip-row--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-2);
  }
  .chip-row--scroll .chip { flex: 0 0 auto; }
}

@media (max-width: 560px) {
  /* 歴史の年表の表：390 でも枠にほぼ収める（期間の列の最低幅を下げる。デザイン監査7回目）。 */
  .matrix__cell--wide { min-width: 9em; }

  :root {
    --section-gap: 4rem;
    --section-gap-first: 2rem;
    --band-pad: 1.25rem;
    --stack-gap: 0.75rem;
    --grid-gap: 1rem;
    --hero-gap: 2.5rem;
    --hero-pad: 2.5rem;
    --hero-pad-bottom: 2rem;
    --fs-hero-tagline: 1.125rem;
    --fs-hero-stat: 2rem;
    --hero-stat-gap: var(--space-4);
    --hero-stat-basis: calc(50% - var(--space-4) / 2);
    --row-min-h: 0px;
    --gutter: 1rem;
    --header-h: 60px;
    --fs-h1: 1.75rem;
    --fs-h2: 1.375rem;
    --fs-h2-sub: 1.125rem;
    --fs-body: 0.9375rem;
  }

  .utility-bar__notice-full { display: none; }
  .utility-bar__notice-short { display: inline; }

  /* 新着の行は2行：日付・ラベル・NEW／題名。 */
  .news-list__row { flex-wrap: wrap; }
  .news-list__body { order: 1; flex: 1 1 100%; }

  /* 歴史の出来事の行（560px 以下）：1行目＝[icon][日付（固定幅）][種類（折り返さない）]…[＋]、2行目＝[主語 題名]（日付の列から全幅）。
     列を固定したので、主語のタグが長い行でも日付が縮まず、種類も折れない。 */
  .history-event { --history-event-date-w: 5.6em; }
  details.history-event > .history-event__summary { grid-template-columns: var(--history-event-icon-w) var(--history-event-date-w) minmax(0, 1fr) 1.5rem; }
  details.history-event > .history-event__summary::after { grid-column: 4; }
  .history-event__line2 { display: block; grid-column: 2 / -1; grid-row: 2; }
  .history-event__subject { display: inline-flex; margin-right: var(--space-2); }
  .history-event__title { display: inline; }

  /* ホームのメンバー紹介は「コンテンツ」と同じ1列の行の形：左に名前・カナ、右端に「メンバーページを見る →」（折り返さない）。縞は奇数行。 */
  .members { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .members__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
  .members__item:nth-of-type(odd) { background: var(--color-surface); }
  .members__name { grid-column: 1; grid-row: 1; font-size: 1.5rem; overflow-wrap: anywhere; }
  .members__reading { grid-column: 1; grid-row: 2; margin-top: 0; }
  .members__link { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; white-space: nowrap; }
  .history-five-min__list { grid-template-columns: 1fr; }
  .jiten-new-words { grid-template-columns: 1fr; }

  /* ホームの「コンテンツ」は1列の行の形：角丸なし・縞・説明は題名の下・右端に「→」（行は .list-row と同じ寸法）。 */
  .content-nav { grid-template-columns: 1fr; gap: 0; }
  .content-nav__item {
    min-height: var(--row-min-h);
    padding: var(--space-3) var(--space-7) var(--space-3) var(--space-4);
    border-radius: 0;
  }
  .content-nav__item:nth-of-type(even) { background: var(--color-bg); }
  .content-nav__item:hover { background: var(--color-surface-warm); }
  .content-nav__item::after { top: 50%; bottom: auto; right: var(--space-4); transform: translateY(-50%); }
  .content-nav__desc { padding-right: 0; }

  /* ツアー一覧の1行目（期間の列 12.5em ＋ 公演数）が 358px の幅に収まるよう、公演数の文字と間を詰める。 */
  .tour-list__line1 { column-gap: var(--space-2); }
  .tour-list__count { font-size: var(--fs-small); }

  /* タイトル帯と目次を低くする（最初の中身を画面の上へ）：目次は2列の格子（各セル 44px 以上・セルの中身は全セル左揃え＝「↓」の位置が列ごとに
     そろい、項目の長さで左端が変わらない。「↓」は文字の左に付き、長い項目は省略せず折り返す〔折り返した行は「↓」の右で左揃え〕。
     項目が奇数のときは最後の1つを全幅にして、これも左揃え）、英字は詰める。 */
  .page-heading__en { margin-top: var(--space-1); }
  .page-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); margin-top: var(--space-4); }
  .page-toc__link { font-size: var(--fs-small); line-height: 1.4; min-height: 2.75rem; display: flex; align-items: center; justify-content: flex-start; text-align: left; }
  .page-toc__link:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* 「もっと見る」は狭い幅だけ折り返す（釣り合いよく2行に）。 */
  .button--more { height: auto; min-height: 3rem; padding: var(--space-2) var(--space-5); white-space: normal; text-wrap: balance; }
  .articles { grid-template-columns: 1fr; }

  .openers-closers { grid-template-columns: 1fr; }

  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .column-list { grid-template-columns: 1fr; }
  .work-dialog {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }


  .matrix-only { display: none; }
  .strip-only { display: block; }

  .year-nav__list { gap: var(--space-3); }
  .year-nav__link { font-size: var(--fs-small); }

  .site-footer__langs { flex-direction: column; align-items: flex-start; }
}