.banner-slider {
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    background: #ffffff;
    padding: 16px 0;
}

.banner-slider__track {
    display: flex;
    transition: transform 0.5s ease;
    gap: 16px;
}

.banner-slider__item {
    min-width: 800px;
    width: 800px;
    height: 200px;
    flex-shrink: 0;
}

.banner-slider__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.banner-slider__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px;
}

.banner-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cccccc;
    cursor: pointer;
}

.banner-slider__dot--active {
    background: var(--color-primary);
}

/* ===========================
   メインエリア（2カラム）
=========================== */
.top-main {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f5f5f5;
    margin-bottom: 8px;
}

/* ===========================
   毎日無料ガチャ
=========================== */
.daily-gacha {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    border: 2px solid var(--color-gold);
    flex: 2;
}
.daily-gacha__head {
    width: 100%;
    object-fit: contain;
    margin-bottom: 4px;
}
.daily-gacha__note {
    font-size: 11px;
    color: var(--color-text-light);
    text-align: center;
    margin-bottom: 8px;
}
.daily-gacha__btn {
    width: 50%;
    margin-top: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.daily-gacha__btn img {
    width: 100%;
    object-fit: contain;
}

.daily-gacha__btn:hover {
    opacity: 0.9;
}
.daily-gacha__machine {
    flex-shrink: 0;
    width: 45%;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.daily-gacha__inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.daily-gacha__machine img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.daily-gacha__prizes {
    flex: 1;
}

.daily-gacha__prize {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid #f0f0f0;
}

.daily-gacha__rarity {
    width: 36px;
    height: 36px;
    object-fit: contain;
}


.daily-gacha__result {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #FFF7E8;
    border: 1px solid var(--color-gold);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.daily-gacha__result--done {
    background: #FFF1CE;
}

.daily-gacha__reset {
    text-align: center;
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 8px;
}

/* ===========================
   毎日無料ガチャ 結果演出モーダル
   （2026-08-27追加／同日レアリティ別演出動画対応）
   回す → 抽選中ローディング → レアリティ別演出動画（PC=16:9／SP=9:16、
   無ければCSSアニメーションに自動フォールバック）で静止 → 「次へ」
   → 排出結果 → 「閉じる」 の流れをこのモーダル1枚で表現する。
=========================== */
.dg-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dg-modal[hidden] {
    display: none;
}

.dg-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}

.dg-modal__box {
    position: relative;
    width: 90%;
    /* PC＝演出動画16:9を想定した横幅。SP側は768px以下メディアクエリで縦長9:16向けに縮める
       （2026-08-27訂正：PCで小さすぎるとの指摘で420px→600pxに拡大） */
    max-width: 600px;
    background: #ffffff;
    border-radius: 16px;
    /* 2026-08-27訂正：演出（動画／CSSフォールバック）はboxの縁いっぱいに表示したいため、
       padding自体はここでは持たせない。ステージごとに必要な余白は各ステージ側で持つ
       （演出ステージ＝下の.dg-modal__spin-footerのみ、結果／メッセージステージ＝
       .dg-modal__stage--result／--messageに直接padding）。overflow:hiddenで
       演出エリアの上2角をこのboxの丸みに自動的に合わせて切り抜く。 */
    padding: 0;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    border: 3px solid var(--color-gold);
}

.dg-modal__stage[hidden] {
    display: none;
}

/* ---- ステージ1：演出エリア（動画／CSSフォールバック共通のコンテナ） ----
   boxのpaddingを持たないため、box幅いっぱい・縁無しで表示される。 */
.dg-modal__spin-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.dg-modal__spin-video-wrap {
    width: 100%;
    height: 100%;
}
.dg-modal__spin-video-wrap[hidden] {
    display: none;
}
.dg-modal__spin-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- ステージ1：抽選中ローディング／CSSフォールバック演出 ---- */
.dg-modal__spin-machine {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff7e0, #ffe9a8);
}
.dg-modal__spin-machine[hidden] {
    display: none;
}
.dg-modal__spin-machine img {
    max-width: 55%;
    max-height: 80%;
    object-fit: contain;
}
/* 抽選中（API応答待ち）：結果が確定するまでの、レアリティを示唆しないループ演出 */
.dg-modal__spin-machine--loading img {
    animation: dg-loading-shake 1s ease-in-out infinite;
}
/* 演出動画が無い／再生失敗時のフォールバック演出（1回限り→静止） */
.dg-modal__spin-machine--reveal img {
    animation: dg-machine-shake 2.2s ease-in-out;
}
.dg-modal__capsule {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff6d8, var(--color-gold));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    opacity: 0;
}
.dg-modal__spin-machine--reveal .dg-modal__capsule {
    animation: dg-capsule-drop 2.2s ease-in forwards;
}
@keyframes dg-loading-shake {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-2deg); }
}
@keyframes dg-machine-shake {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70% { transform: rotate(-2deg); }
    20%, 40%, 60%, 80% { transform: rotate(2deg); }
    90% { transform: rotate(0deg); }
}
@keyframes dg-capsule-drop {
    0%   { opacity: 0; top: 45%; }
    55%  { opacity: 1; top: 45%; }
    80%  { opacity: 1; top: 70%; }
    90%  { opacity: 1; top: 64%; }
    100% { opacity: 1; top: 68%; }
}

/* ---- ステージ1：下側の操作エリア（演出エリアの唯一の余白） ---- */
.dg-modal__spin-footer {
    /* 2026-08-27訂正：キャプション文言を出さなくなったため、上側の余白を詰める */
    padding: 4px 20px 20px;
}
.dg-modal__spin-caption {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 0;
    min-height: 0;
}
.dg-modal__spin-caption:empty {
    display: none;
}

.dg-modal__next-btn,
.dg-modal__close-btn {
    padding: 10px 32px;
    border: none;
    border-radius: 24px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}
/* 演出直後の「当選結果」ボタンはキャプションが空のことが多いため上余白を詰め、
   結果／メッセージステージの「閉じる」は直前のテキストとの間隔を保つ */
.dg-modal__next-btn {
    margin-top: 4px;
}
.dg-modal__close-btn {
    margin-top: 16px;
}
.dg-modal__next-btn:hover,
.dg-modal__close-btn:hover {
    opacity: 0.9;
}

/* 結果／メッセージステージは演出エリアを持たないため、box側で外した分の余白を
   ここで持つ（2026-08-27訂正でboxのpaddingを廃止したことに伴う対応） */
.dg-modal__stage--result,
.dg-modal__stage--message {
    padding: 28px 20px 24px;
}

/* ---- ステージ2：排出結果 ---- */
.dg-modal__result-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 8px;
}
.dg-modal__result-rarity {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin: 0 auto 8px;
    animation: dg-result-pop 0.4s ease-out;
}
@keyframes dg-result-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    70%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.dg-modal__result-rarity-text {
    font-size: 22px;
    font-weight: 900;
    color: var(--color-gold);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: 4px;
}
.dg-modal__result-coins {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

/* ---- ステージ3：メッセージのみ（受け取り済み・エラー等） ---- */
.dg-modal__message-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.6;
}

/* ここから768px以下＝top.js側の「sp」動画判定と同じしきい値。
   演出動画がSP用（9:16 縦長）に切り替わるのに合わせて、モーダル自体も
   縦長の動画に馴染む横幅へ縮める。 */
@media (max-width: 768px) {
    .dg-modal__box {
        max-width: 320px;
    }
    .dg-modal__spin-media {
        aspect-ratio: 9 / 16;
    }
}

@media (max-width: 480px) {
    .dg-modal__stage--result,
    .dg-modal__stage--message {
        padding: 22px 16px 18px;
    }
    .dg-modal__spin-footer {
        padding: 12px 16px 16px;
    }
    .dg-modal__result-rarity {
        width: 76px;
        height: 76px;
    }
    .dg-modal__result-rarity-text {
        font-size: 18px;
    }
}

/* ===========================
   お知らせ（2026-08-31：中身が空だったため実装）
=========================== */
.info-section {
    flex: 1;
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 16px;
    border: 2px solid var(--color-gold);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.info-section .section-title {
    padding: 0;
    margin-bottom: 8px;
    border-left: none;
}
.info-list {
    flex: 1;
    overflow-y: auto;
    max-height: 320px;
}
.info-list__empty {
    font-size: 13px;
    color: var(--color-text-light);
    padding: 8px 0;
}
.info-item {
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
}
.info-item:last-child {
    border-bottom: none;
}
.info-item__date {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: 4px;
}
.info-item__body {
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text);
    word-break: break-word;
}
.info-item__body a {
    color: var(--color-primary);
    text-decoration: underline;
}
/* ===========================
   テロップ
=========================== */
.telop {
    display: flex;
    align-items: center;
    background: #333333;
    height: 36px;
    overflow: hidden;
}

.telop__icon {
    flex-shrink: 0;
    padding: 0 12px;
    font-size: 16px;
    background: #222222;
    height: 100%;
    display: flex;
    align-items: center;
    border-right: 2px solid var(--color-gold);
}

.telop__track {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
}

.telop__inner {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: telop-scroll 30s linear infinite;
}

.telop__item {
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.telop__item--ur {
    color: #ff44ff;
    text-shadow: 0 0 8px rgba(255, 68, 255, 0.6);
}

.telop__item--ssr {
    color: var(--color-gold);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

@keyframes telop-scroll {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}
/* ===========================
   セクションタイトル
=========================== */
.section-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--color-text);
    padding: 12px 16px;
    border-left: 4px solid var(--color-primary);
    margin-bottom: 8px;
    margin-left: 16px;
}

.section-title span {
    font-size: 13px;
    color: var(--color-text-light);
    font-weight: 400;
    margin-left: 8px;
}

/* ===========================
   ガチャセクション
=========================== */
.gacha-section {
    padding: 8px 0;
    margin-bottom: 8px;
    overflow: hidden;
}

.gacha-scroll {
    overflow: hidden;
    padding: 0 16px;
}

.gacha-scroll__track {
    display: flex;
    gap: 12px;
    animation: scroll-left 20s linear infinite;
}

.gacha-scroll__track:hover {
    animation-play-state: paused;
}

@keyframes scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   ガチャカード 再設計（top.css内の既存 .gacha-card 関連ブロックを
   このブロックで丸ごと置き換えてください）
   ------------------------------------------------------------
   旧: .gacha-card / .gacha-card__img / .gacha-card__name /
       .gacha-card__rank* / .gacha-card__badge
   → 1段目: ラベル行（NEW / 数量限定 / 期間限定）
     2段目: 2カラム（左: ガチャ画像 / 右: URアイテム画像+名前）
============================================================ */

.gacha-card {
    position: relative;
    flex-shrink: 0;
    width: 240px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.2s;
    /* .gacha-card は元は装飾用のdivだったが、ガチャ詳細へのリンク(<a>)に変更したため
       リンクの既定装飾（下線・リンク色）を打ち消す（2026-08-24追加） */
    display: block;
    text-decoration: none;
    color: inherit;
}

.gacha-card:hover {
    transform: translateY(-3px);
}

/* ---- 1段目：ラベル行 ---- */
.gacha-card__labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px 0;
    min-height: 20px;
}

.gacha-card__label {
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    color: #ffffff;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.gacha-card__label--new   { background: #ff4444; }
.gacha-card__label--stock { background: #2288ff; }
.gacha-card__label--time  { background: #9944cc; }
/* 2026-09-15追加：海外発送対応（要件4） */
.gacha-card__label--international { background: #0066cc; }

/* ---- ラベル行の下：ガチャタイトル ---- */
.gacha-card__title {
    font-size: 12px;
    font-weight: 900;
    color: var(--color-text);
    padding: 4px 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- 2段目：2カラム（ガチャ画像 / URアイテム） ---- */
.gacha-card__body {
    display: flex;
    gap: 6px;
    padding: 6px 8px 8px;
}

.gacha-card__thumb {
    flex: 1;
    min-width: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    border-radius: 8px;
    overflow: hidden;
}

.gacha-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.gacha-card__ur {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gacha-card__ur-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: linear-gradient(135deg, #fff7e0, #ffe9a8);
    border-radius: 8px;
    padding: 4px;
}

/* アダルト商品ガチャ：UR景品画像の代わりに表示するプレースホルダ（2026-08-23追加） */
.gacha-card__ur-adult {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border-radius: 8px;
}
.gacha-card__ur-adult span {
    font-size: 11px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.05em;
}

.gacha-card__ur-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- ランキング用の順位バッジ（そのまま流用） ---- */
.gacha-card__rank {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 11px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
    color: #ffffff;
    z-index: 1;
}

.gacha-card__rank--1 { background: #FFD700; color: #7a5000; }
.gacha-card__rank--2 { background: #C0C0C0; color: #555; }
.gacha-card__rank--3 { background: #CD7F32; color: #fff; }

/*===========================
   バナー2枚（テナント登録／会員登録誘導）
=========================== */
.top-banners {
    padding: 8px 0;
}

.top-banners__grid {
    display: flex;
    gap: 16px;
    padding: 0 16px;
}

.top-banners__item {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.2s;
}

.top-banners__item:hover {
    transform: translateY(-3px);
}

.top-banners__img {
    width: 100%;
    height: auto;
    display: block;
}

/*===========================
   YouTubeセクション
=========================== */
.youtube-section {
    padding: 8px 0 24px;
}

.youtube-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0 16px;
}

.youtube-card {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.youtube-card__thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube-card__thumb iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube-card__title {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}








/* ============================================================
   SP対応（top.css の末尾に追加）
   ------------------------------------------------------------
   ブレークポイント: 768px（タブレット〜大画面SP） / 480px（一般的なSP）
============================================================ */

/* ---- 〜768px ---- */
@media (max-width: 768px) {
    /* バナースライダー：1枚を画面幅いっぱいに表示
       ※ top.js の getOffset() が「.banner-slider に左右paddingなし」を前提に
         センタリング量を計算しているため、ここではCSS側に横paddingを付けず、
         アイテム幅を左右16pxずつ狭める形でJS側の計算とつじつまを合わせる */
    .banner-slider {
        padding: 12px 0;
    }
    .banner-slider__item {
        min-width: calc(100% - 32px);
        width: calc(100% - 32px);
        height: auto;
        /* 2026-08-31修正：以前は2.4/1が指定されていたが、ヒーロー画像自体は800×200＝4/1で
           統一している（/admin/top「ヒーロースライダー」アップロード時にImageResizer::cropAndResize()
           でこの比率にトリミングされる）。コンテナ側の比率がずれていると、imgのobject-fit:coverで
           画像の左右が見切れてしまう（すずきP報告：スマホでヒーローが見切れている）ため、
           画像の実比率と一致させた。 */
        aspect-ratio: 4 / 1;
    }

    /* メインエリア：2カラム → 縦積み */
    .top-main {
        flex-direction: column;
        padding: 12px;
        gap: 12px;
    }
    .daily-gacha {
        flex: none;
        width: 100%;
    }
    .info-section {
        flex: none;
        width: 100%;
    }
    .info-list {
        max-height: 240px;
    }
    .daily-gacha__inner {
        flex-direction: column;
        align-items: center;
    }
    .daily-gacha__machine {
        width: 55%;
    }
    .daily-gacha__prizes {
        width: 100%;
    }
    .daily-gacha__btn {
        width: 60%;
    }

    /* セクションタイトル */
    .section-title {
        font-size: 17px;
        padding: 10px 12px;
        margin-left: 12px;
    }

    /* ガチャカード横スクロール（1段目ラベル・2段目2カラムはそのまま、幅だけ縮小） */
    .gacha-scroll {
        padding: 0 12px;
    }
    .gacha-card {
        width: 200px;
    }

    /* YouTube：3列 → 2列 */
    .youtube-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 12px;
    }

    /* バナー2枚：横幅を詰める */
    .top-banners__grid {
        gap: 12px;
        padding: 0 12px;
    }
}

/* ---- 〜480px ---- */
@media (max-width: 480px) {
    .daily-gacha {
        padding: 10px;
    }
    .daily-gacha__machine {
        width: 100%;
    }
    .daily-gacha__prize {
        font-size: 12px;
        gap: 6px;
    }
    .daily-gacha__rarity {
        width: 30px;
        height: 30px;
    }
    .daily-gacha__note {
        font-size: 10px;
    }

    .section-title {
        font-size: 15px;
        margin-left: 8px;
        padding: 8px 8px 8px 10px;
    }

    /* バナー2枚：横並びだと1枚が小さくなりすぎるため縦積みに */
    .top-banners__grid {
        flex-direction: column;
    }
    /* 2026-09-15修正：flex-direction:columnに切り替わると、親(.top-banners__grid)の高さがautoのまま
       .top-banners__item側のflex:1 1 0（flex-basis:0）が主軸（縦方向）に適用されてしまい、
       伸長先の基準となる高さが定まらず各アイテムが高さ0に潰れる（SPでバナー2枚が非表示になる
       不具合の原因）。column方向では伸縮させず、画像本来の高さで表示させる。 */
    .top-banners__item {
        flex: none;
    }

    .gacha-card {
        width: 176px;
    }
    .gacha-card__label {
        font-size: 8px;
        padding: 1px 5px;
    }
    .gacha-card__ur-name {
        font-size: 9px;
    }

    .telop__item {
        font-size: 12px;
    }
    .telop__icon {
        padding: 0 8px;
        font-size: 14px;
    }

    /* YouTube：2列 → 1列 */
    .youtube-grid {
        grid-template-columns: 1fr;
        padding: 0 12px;
    }
}

/* ============================================================
   ガチャ検索（TOPページ・ヒーロー直下）／ガチャ一覧ページ（/gachas）
   2026-08-24追加
============================================================ */

/* ---- TOPページ：検索バー ---- */
.top-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: #ffffff;
}

.top-search__form {
    display: flex;
    flex: 1;
    max-width: 480px;
    gap: 8px;
}

.top-search__input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 14px;
}

/* カテゴリ絞り込みプルダウン（2026-08-25追加）：検索ボタンの左に設置 */
.top-search__category {
    flex: 0 0 auto;
    max-width: 130px;
    padding: 10px 28px 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--color-text);
    background: #ffffff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpath fill='%23777777' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.top-search__btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border: none;
    border-radius: 20px;
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.top-search__btn-icon {
    font-size: 13px;
}

.top-search__list-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-light);
    white-space: nowrap;
    text-decoration: none;
}

.top-search__list-link:hover {
    color: var(--color-primary);
}

/* ---- ガチャ一覧ページ全体 ---- */
.gacha-list-page {
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.gacha-list-page__title {
    font-size: 20px;
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: 12px;
}

.gacha-list-page__count {
    font-size: 13px;
    color: var(--color-text-light);
    margin: 8px 0 12px;
}

/* ---- 絞り込みフォーム ---- */
.gacha-search-panel {
    background: var(--color-bg-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.gacha-search-panel__row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.gacha-search-panel__input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
}

.gacha-search-panel__submit {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.gacha-filter-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.gacha-filter-categories__item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
}

/* ---- 並べ替えタブ ---- */
.gacha-sort-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.gacha-sort-tabs__link {
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.gacha-sort-tabs__link--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

/* ---- 検索結果グリッド ----
   .gacha-card は横スクロール用に width: 240px / flex-shrink: 0 のままにして、
   ここではラップさせるだけで一覧グリッドとして流用する。 */
.gacha-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.gacha-list-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--color-text-light);
    font-size: 14px;
}

/* ---- ページング ---- */
.gacha-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
}

.gacha-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    color: var(--color-text);
    font-size: 13px;
    text-decoration: none;
}

.gacha-pagination__link--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    font-weight: 700;
}

.gacha-pagination__link--disabled {
    color: var(--color-border);
    cursor: default;
}

.gacha-pagination__ellipsis {
    color: var(--color-text-light);
    font-size: 13px;
    padding: 0 4px;
}

/* ---- SP対応 ---- */
@media (max-width: 768px) {
    .top-search {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .top-search__form {
        max-width: none;
        flex-wrap: wrap;
    }
    .top-search__input {
        flex: 1 1 100%;
    }
    .top-search__category {
        flex: 1;
        max-width: none;
    }
    .top-search__btn {
        flex: 1;
    }
    .top-search__list-link {
        text-align: center;
    }

    .gacha-list-page {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .gacha-search-panel {
        padding: 12px;
    }
    .gacha-search-panel__row {
        flex-direction: column;
    }
    .gacha-sort-tabs__link {
        font-size: 11px;
        padding: 5px 10px;
    }
    .gacha-grid {
        justify-content: center;
    }
}