@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — 声優グランプリ「声優新幹線 the RADIO」毎月一覧 TOP
   /seigura/ (= 14 ヶ月 + COMING SOON のリスト)

   base.css のデフォルト値を上書きするだけ。base.css 自体は触らない。

   声グラ TOP は男女どちらにも偏らない中立色:
     sub1 = 青 (#009FE1) — 偶数月 phase ボタン
     sub2 = ピンク (#E61F87) — 奇数月 phase ボタン
   月ページ内では声優性別に応じて入れ替わるが、TOP は常にこの並びで固定。
   ============================================================ */


/* ============================================================
   BRAND COLORS — 声グラ TOP
   ============================================================ */
:root {
    --color-main:   #EFFCFF;   /* ページ背景色 (薄シアン、声グラ伝統) */
    --color-sub1:   #009FE1;   /* メインカラー (青) */
    --color-sub2:   #E61F87;   /* サブカラー (ピンク) */
    --color-sub3:   #009FE1;   /* sub1 と同じ (互換性) */
    --color-sub4:   #E61F87;   /* sub2 と同じ (互換性) */
    --color-sub5:   #e8f5fc;   /* 薄青背景 */
    --color-local:  #ED6D00;   /* 差し色 (オレンジ・JR東海カラー) */
    --color-text:   #333333;   /* テキストカラー */
    --color-button: #009FE1;   /* ボタンカラー (sub1 と同色) */
    --font-family:  'Noto Sans JP', YakuHanJP, sans-serif;
}


/* ============================================================
   BACKGROUND — 声グラ伝統のタイル背景
   ============================================================ */
main::before {
    background-size: 2.85rem 2.75rem;
    background-repeat: repeat;
    background-position: top left;
}

@media (min-width: 500px) {
    body {
        background: var(--image-bg) repeat top left / 2.85rem 2.75rem;
    }
}


/* ============================================================
   CONTENT-HOLDER — 声グラ伝統の水色ダブル下線
   月別ページと同じデザインで統一
   ============================================================ */
.content-holder {
    border: 0;
    border-bottom: 0.10rem double #6BB8DB;
    border-radius: 0;
    background-color: #fff;
}


/* ============================================================
   THUMBNAILS GRID — 乗車券コレクション (top.php 末尾)
   2 列、45% 幅、中央寄せ、grid-gap 10px×20px
   ============================================================ */
.thumbnails-container {
    display: grid;
    grid-template-columns: repeat(2, 45%);
    grid-template-rows: repeat(2, auto);
    grid-gap: 0.10rem 0.20rem;
    justify-content: center;
    padding: 0.10rem;
}

.thumbnail {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.thumbnail-number {
    margin-top: 0.03rem;
    font-size: var(--fs-sm);
    color: var(--color-sub1);
    text-align: center;
}


/* ============================================================
   DISABLED — base.css の .iconButton[disabled] 強制グレー化
   (template の標準パターン)
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: linear-gradient(to right, gray, darkgray) !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.7;
}
.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: rgba(255, 255, 255, 0.4) !important;
}


/* ============================================================
   FONT OVERRIDE — 声グラは全体 Noto Sans JP で統一
   ============================================================ */
.fontEvent,
.fontEvent * {
    font-family: 'Noto Sans JP', YakuHanJP, sans-serif !important;
}

.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: 'Noto Sans JP', YakuHanJP, sans-serif !important;
}