/* ① ジャンルバッジ */
.GSMark {
    display: inline-block !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    width: fit-content !important;
    margin-bottom: 5px !important;
}

/* 店舗　本日営業マーク */
.ShopOpenMark {
    display: inline-block !important;
    padding: 2px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    background-color: #e11d48 !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
    min-width:52px;
}


.ShopCloseMark {
    display: inline-block !important;
    padding: 2px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    background-color: #94a3b8 !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   共通コンテンツセクション 枠囲みカードデザイン (TopRankingSection統一版)
   ========================================================================== */

/* 外枠カード本体 */
.CommonContentsContainer {
    width: 100% !important;
    margin: 20px 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

    /* 枠内のメイン見出しヘッダー帯 (グレー背景 ＋ 左アクセント線) */
    .CommonContentsContainer > .PageMainTitle,
    .CommonContentsContainer .PageMainTitle {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 11px 16px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        background-color: #f8fafc !important;
        border: none !important;
        border-left: 4px solid #64748b !important;
        border-bottom: 1px solid #e2e8f0 !important;
        border-radius: 0 !important;
        line-height: 1.4 !important;
        box-sizing: border-box !important;
    }

    /* 枠内の内部コンテンツ余白 (中身のラッパーやリスト) */
    .CommonContentsContainer > div:not(.PageMainTitle),
    .CommonContentsContainer > ul:not(.PageMainTitle),
    .CommonContentsContainer > form:not(.PageMainTitle),
    .CommonContentsContainer > article:not(.PageMainTitle),
    .CommonContentsContainer > .CustomShopCommonContentsContainer,
    .CommonContentsContainer > .ShopIndexBlog_Wrapper {
        padding: 16px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* 内部にネストされた不要な枠線や二重余白を解除してスッキリ整列 */
    .CommonContentsContainer .CustomShopCommonContentsContainer {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

/* スマホ (600px未満) */
@media screen and (max-width: 599px) {
    .CommonContentsContainer {
        margin: 14px 0 !important;
        border-radius: 6px !important;
    }

        .CommonContentsContainer > .PageMainTitle,
        .CommonContentsContainer .PageMainTitle {
            padding: 10px 12px !important;
            font-size: 13.5px !important;
            border-left-width: 3px !important;
        }

        .CommonContentsContainer > div:not(.PageMainTitle),
        .CommonContentsContainer > ul:not(.PageMainTitle),
        .CommonContentsContainer > form:not(.PageMainTitle),
        .CommonContentsContainer > article:not(.PageMainTitle),
        .CommonContentsContainer > .CustomShopCommonContentsContainer,
        .CommonContentsContainer > .ShopIndexBlog_Wrapper {
            padding: 12px 10px !important;
        }
}

/* タブレット (600pxから899px) */
@media screen and (min-width: 600px) and (max-width: 899px) {
    .CommonContentsContainer {
        margin: 16px 0 !important;
    }
}

/* PC (900px以上) */
@media screen and (min-width: 900px) {
    .CommonContentsContainer {
        margin: 24px 0 !important;
    }
}


/* ==========================================================================
   グラビアカルーセル (初期中央静止 ＆ 白ボケゼロ ＆ カクつき完全根絶版)
   ========================================================================== */
.top-gravure-carousel-wrap {
    width: 100% !important;
    margin: 15px 0 20px 0 !important;
    overflow: hidden !important;
    clear: both !important;
    box-sizing: border-box !important;
}

.top-gravure-carousel {
    position: relative !important;
    width: 100% !important;
    user-select: none !important;
    touch-action: pan-y !important;
}

/* スライドトラック: ★初期状態からCSSで中央に静止させておく (カクつきゼロ) */
.tg-carousel-track {
    display: flex !important;
    align-items: center !important;
    will-change: transform !important;
    margin: 0 !important;
    padding: 0 !important;
    /* PC時: 幅68%なので、左余白(100-68)/2 = 16% を初期配置にしておく */
    transform: translateX(16%);
}

/* スライド単体 (PC: 幅68%で中央配置) */
.tg-carousel-slide {
    flex: 0 0 68% !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    opacity: 0.55;
    transform: scale(0.93);
    transition: transform 0.45s ease, opacity 0.45s ease;
}

    /* ★超重要：1枚目(初期状態)およびアクティブスライドは最初から完全に100%不透明！ */
    .tg-carousel-slide:first-child,
    .tg-carousel-slide.is-active {
        opacity: 1 !important; /* ★白く薄くならない */
        transform: scale(1) !important;
    }

/* リンク枠 */
.tg-slide-link {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important;
    background: transparent !important;
    text-decoration: none !important;
    line-height: 0 !important;
}

/* 画像を一切トリミングせず100%全領域表示 */
.tg-slide-img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 8px !important;
}

/* 左右ナビゲーション矢印ボタン */
.tg-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(4px) !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

    .tg-btn svg {
        width: 22px !important;
        height: 22px !important;
        fill: #1e293b !important;
        transition: fill 0.2s ease !important;
    }

    .tg-btn:hover {
        background: #e6005c !important;
        box-shadow: 0 4px 12px rgba(230, 0, 92, 0.4) !important;
    }

        .tg-btn:hover svg {
            fill: #ffffff !important;
        }

.tg-prev {
    left: 8px !important;
}

.tg-next {
    right: 8px !important;
}

/* ページネーション ドット */
.tg-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

.tg-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

    .tg-dot.is-active {
        width: 20px !important;
        border-radius: 4px !important;
        background: #e6005c !important;
    }

/* --------------------------------------------------
   タブレット対応 (600px - 899px)
   -------------------------------------------------- */
@media screen and (max-width: 899px) and (min-width: 600px) {
    .tg-carousel-track {
        /* タブレット時: (100-75)/2 = 12.5% */
        transform: translateX(12.5%);
    }

    .tg-carousel-slide {
        flex: 0 0 75% !important;
        padding: 0 5px !important;
    }

    .tg-prev {
        left: 12% !important;
    }

    .tg-next {
        right: 12% !important;
    }
}

/* --------------------------------------------------
   スマホ対応 (599px以下)
   -------------------------------------------------- */
@media screen and (max-width: 599px) {
    .tg-carousel-track {
        /* スマホ時: (100-82)/2 = 9% を初期中央配置 */
        transform: translateX(9%);
    }

    .tg-carousel-slide {
        flex: 0 0 82% !important; /* スマホではメインを82%にして左右9%ずつ見せる */
        padding: 0 4px !important;
    }

    .tg-btn {
        width: 32px !important;
        height: 32px !important;
    }

        .tg-btn svg {
            width: 18px !important;
            height: 18px !important;
        }

    .tg-prev {
        left: 4px !important;
    }

    .tg-next {
        right: 4px !important;
    }
}



/* ==========================================================================
   TOP 周年・バースデー・イベント情報 (右下含む全域クリッカブル 完全版)
   ========================================================================== */

/* 1. タブヘッダー */
#WorkKbnTab {
    width: 100% !important;
    margin: 10px 0 16px 0 !important;
    clear: both !important;
}

    #WorkKbnTab .r-tabs-nav {
        display: flex !important;
        width: 100% !important;
        height: 40px !important;
        list-style: none !important;
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #WorkKbnTab .r-tabs-tab {
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        border-right: 1px solid #e2e8f0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        #WorkKbnTab .r-tabs-tab:last-child {
            border-right: none !important;
        }

    #WorkKbnTab .r-tabs-anchor {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #475569 !important;
        text-decoration: none !important;
        background-color: #f8fafc !important;
        transition: all 0.2s ease !important;
    }

        #WorkKbnTab .r-tabs-anchor:hover {
            background-color: #fff1f2 !important;
            color: #e11d48 !important;
        }

    #WorkKbnTab .r-tabs-state-active .r-tabs-anchor {
        background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
        color: #ffffff !important;
        font-weight: bold !important;
    }

    #WorkKbnTab .r-tabs-accordion-title {
        display: none !important;
    }

/* 2. イベント個別カード（★カード全体の基準点） */
.Top_AnivIndex_frame {
    position: relative !important; /* ★全体クリックの基準点 */
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 14px 0 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    transition: background-color 0.2s ease !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

    .Top_AnivIndex_frame:hover {
        background-color: #fafafa !important;
    }

    .Top_AnivIndex_frame:last-of-type {
        border-bottom: none !important;
    }

/* 左側：イベント写真 */
.Top_AnivIndexImg {
    flex-shrink: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important; /* クリックすり抜け */
}

    .Top_AnivIndexImg img {
        object-fit: cover !important;
        display: block !important;
        pointer-events: none !important;
        transition: transform 0.25s ease !important;
    }

.Top_AnivIndex_frame:hover .Top_AnivIndexImg img {
    transform: scale(1.04) !important;
}

/* 右側：情報本文 */
.Top_AnivIndexContents {
    position: static !important;
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

/* 開催日程 */
.Top_AnivIndexDate {
    font-size: 11.5px !important;
    font-weight: bold !important;
    color: #e11d48 !important;
    margin-bottom: 3px !important;
    pointer-events: none !important;
}

/* 業種名 */
.Top_AnivIndexContentsShopGSName {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    margin-bottom: 2px !important;
    pointer-events: none !important;
}

/* イベントタイトル */
.Top_AnivIndexBirthTitleContainer,
.Top_AnivIndexAnivTitleContainer,
.Top_AnivIndexNewTitleContainer {
    position: static !important;
    font-size: 14.5px !important;
    font-weight: bold !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
}

    .Top_AnivIndexBirthTitleContainer a,
    .Top_AnivIndexAnivTitleContainer a,
    .Top_AnivIndexNewTitleContainer a,
    .Top_AnivIndexBirthTitleContainer a.TopAnivMainLink,
    .Top_AnivIndexAnivTitleContainer a.TopAnivMainLink,
    .Top_AnivIndexNewTitleContainer a.TopAnivMainLink {
        position: static !important;
        color: #1e293b !important;
        text-decoration: none !important;
        transition: color 0.15s ease !important;
    }

        /* ★★★ 写真・右下含むカード全域を完全に覆う透明リンク ★★★ */
        .Top_AnivIndexBirthTitleContainer a::after,
        .Top_AnivIndexAnivTitleContainer a::after,
        .Top_AnivIndexNewTitleContainer a::after,
        .Top_AnivIndexBirthTitleContainer a.TopAnivMainLink::after,
        .Top_AnivIndexAnivTitleContainer a.TopAnivMainLink::after,
        .Top_AnivIndexNewTitleContainer a.TopAnivMainLink::after {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 2 !important; /* カード全体を覆う */
        }

.Top_AnivIndex_frame:hover .Top_AnivIndexBirthTitleContainer a,
.Top_AnivIndex_frame:hover .Top_AnivIndexAnivTitleContainer a,
.Top_AnivIndex_frame:hover .Top_AnivIndexNewTitleContainer a {
    color: #e11d48 !important;
    text-decoration: underline !important;
}

/* 店舗基本情報ラッパー（★重要：クリックをすり抜けさせて背後の全体リンクへ通す） */
.Top_AnivIndexContentsShopInfo {
    position: static !important; /* ★枠自体のブロックを解除 */
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    pointer-events: none !important; /* ★右下の営業時間・住所などのクリックをすり抜けさせる */
}

/* 店名リンク（★ここだけ pointer-events: auto と z-index: 10 で最前面に出す） */
.Top_AnivIndexContentsShopLink a,
.Top_AnivIndexContentsShopLink a.TopAnivShopLink {
    position: relative !important;
    z-index: 10 !important; /* 全体リンク(z-index:2)より上に出す */
    pointer-events: auto !important; /* ★店名クリックだけは正常に反応 */
    font-size: 13px !important;
    font-weight: bold !important;
    color: #e11d48 !important;
    text-decoration: none !important;
    display: inline-block !important;
}

    .Top_AnivIndexContentsShopLink a:hover,
    .Top_AnivIndexContentsShopLink a.TopAnivShopLink:hover {
        text-decoration: underline !important;
        color: #e11d48 !important;
    }

/* 営業時間・住所 */
.Top_AnivIndexContentsShopTime,
.Top_AnivIndexContentsShopAddress {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    pointer-events: none !important;
}

/* 電話番号 */
.Top_AnivIndexContentsShopTel {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 15px !important;
    font-weight: bold !important;
    color: #10b981 !important;
    margin-top: 4px !important;
    pointer-events: none !important;
}

/* --------------------------------------------------
   3. タブレット対応（600px 〜 899px）
   -------------------------------------------------- */
@media (min-width: 600px) and (max-width: 899px) {
    #WorkKbnTab .r-tabs-anchor {
        font-size: 12px !important;
        padding: 0 4px !important;
    }

    .Top_AnivIndex_frame {
        gap: 14px !important;
        padding: 12px 0 !important;
    }

    .Top_AnivIndexImg {
        width: 120px !important;
        height: 180px !important;
    }

    .Top_AnivIndexBirthTitleContainer,
    .Top_AnivIndexAnivTitleContainer,
    .Top_AnivIndexNewTitleContainer {
        font-size: 13.5px !important;
    }

    .Top_AnivIndexContentsShopTel {
        font-size: 14px !important;
    }
}

/* --------------------------------------------------
   4. スマホ対応（〜 599px）
   -------------------------------------------------- */
@media (max-width: 599px) {
    #WorkKbnTab .r-tabs-nav {
        height: 38px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }

    #WorkKbnTab .r-tabs-tab {
        flex: 0 0 auto !important;
        min-width: 110px !important;
    }

    #WorkKbnTab .r-tabs-anchor {
        font-size: 11.5px !important;
        padding: 0 8px !important;
    }

    .Top_AnivIndex_frame {
        gap: 10px !important;
        padding: 10px 0 !important;
    }

    .Top_AnivIndexImg {
        width: 95px !important;
        height: 135px !important;
    }

    .Top_AnivIndexDate {
        font-size: 12px !important;
    }

    .Top_AnivIndexBirthTitleContainer,
    .Top_AnivIndexAnivTitleContainer,
    .Top_AnivIndexNewTitleContainer {
        font-size: 12.5px !important;
        margin-bottom: 4px !important;
    }

    .Top_AnivIndexContentsShopLink a {
        font-size: 12px !important;
    }

    .Top_AnivIndexContentsShopTime,
    .Top_AnivIndexContentsShopAddress {
        font-size: 10px !important;
    }

    .Top_AnivIndexContentsShopTel {
        font-size: 13px !important;
        margin-top: 2px !important;
    }
}

/* ==========================================================================
   TOP みんなに注目されているブログ TOP 6 (PC: 6列 / スマホ: 1行横スクロール / 300x450比率完全版)
   ========================================================================== */

/* --------------------------------------------------
   1. 【PC版】グリッドコンテナ (900px以上: 横6列)
   -------------------------------------------------- */
.TopBlogListContainer {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important; /* PC: 横6列 */
    gap: 12px !important;
    width: 100% !important;
    margin: 12px 0 16px 0 !important;
    padding: 0 !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------
   2. 個別ブログカード
   -------------------------------------------------- */
.TopBlogFrame {
    position: relative !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    background-color: #1e293b !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

    .TopBlogFrame:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
    }

/* --------------------------------------------------
   3. 写真 ＆ オーバーレイラッパー (★300 x 450 比率を厳格に保持)
   -------------------------------------------------- */
.TopBlogImgContainer {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 300 / 450 !important; /* ★300x450 (1 : 1.5) の縦長比率に統一 */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    background-color: #0f172a !important;
}

    /* 写真本体 (比率を維持したまま全域カバー) */
    .TopBlogImgContainer img.topblogimg {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        z-index: 1 !important;
        pointer-events: none !important;
        transition: transform 0.3s ease !important;
    }

.TopBlogFrame:hover img.topblogimg {
    transform: scale(1.05) !important;
}

/* 下部ダークグラデーションマスク */
.TopBlogImgContainer::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 70% !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}


/* ==========================================================================
   ブログ美女コレクション: 写真右上「要チェック」バッジ
   ========================================================================== */

.TopBlogImgContainer {
    position: relative !important;
}

.TopBlogCheckBadge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important; /* ★右上に配置 */
    left: auto !important;
    z-index: 3 !important;
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    background: linear-gradient(to bottom, #f02b66, #d80046) !important;
    box-shadow: 0 2px 6px rgba(233, 30, 99, 0.35) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    pointer-events: none !important;
}

/* スマホ表示 (599px以下) */
@media screen and (max-width: 599px) {
    .TopBlogCheckBadge {
        top: 6px !important;
        right: 6px !important; /* ★右上に配置 */
        left: auto !important;
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
}

/* --------------------------------------------------
   4. マスク上のブログタイトル（全体ブログリンク）
   -------------------------------------------------- */
.TopBlogTitle {
    position: static !important;
    padding: 0 8px 2px 8px !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
}

    .TopBlogTitle a,
    .TopBlogTitle a.TopBlogMainLink {
        font-size: 11px !important;
        font-weight: bold !important;
        color: #f8fafc !important;
        text-decoration: none !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
        line-height: 1.3 !important;
        transition: color 0.15s ease !important;
    }

        /* カード全体を覆う透明リンク */
        .TopBlogTitle a::after,
        .TopBlogTitle a.TopBlogMainLink::after {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 5 !important;
        }

.TopBlogFrame:hover .TopBlogTitle a,
.TopBlogFrame:hover .TopBlogTitle a.TopBlogMainLink {
    color: #fb7185 !important;
}

/* --------------------------------------------------
   5. マスク上のキャスト名 ＆ 店舗名（最前面 z-index:10）
   -------------------------------------------------- */
.TopBlogShopContainer {
    position: relative !important;
    z-index: 10 !important;
    padding: 0 8px 8px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    box-sizing: border-box !important;
}

.TopBlogCastName {
    margin: 0 !important;
    padding: 0 !important;
}

    .TopBlogCastName a,
    .TopBlogCastName a.TopBlogCastLink {
        position: relative !important;
        z-index: 11 !important;
        font-size: 15px !important;
        font-weight: bold !important;
        color: #ffffff !important;
        text-decoration: none !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
        transition: color 0.15s ease !important;
    }

        .TopBlogCastName a:hover,
        .TopBlogCastName a.TopBlogCastLink:hover {
            color: #fb7185 !important;
            text-decoration: underline !important;
        }

.TopBlogNameText {
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: normal !important;
    margin-left: 2px !important;
}

.TopBlogShopName {
    margin: 0 !important;
    padding: 0 !important;
}

    .TopBlogShopName a,
    .TopBlogShopName a.TopBlogShopLink {
        position: relative !important;
        z-index: 11 !important;
        font-size: 15px !important;
        color: #cbd5e1 !important;
        text-decoration: none !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
        transition: color 0.15s ease !important;
    }

        .TopBlogShopName a:hover,
        .TopBlogShopName a.TopBlogShopLink:hover {
            color: #ffffff !important;
            text-decoration: underline !important;
        }


/* ==========================================================================
   6. 【タブレット対応】(600px - 899px: 横3列)
   ========================================================================== */
@media screen and (max-width: 899px) and (min-width: 600px) {
    .TopBlogListContainer {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* 300x450比率を維持 */
    .TopBlogImgContainer {
        aspect-ratio: 300 / 450 !important;
        height: auto !important;
    }
}


/* ==========================================================================
   7. ★【スマホ専用 1行横スクロール化】(599px以下)
   300x450比率を完全保持したまま、滑らかに1行スワイプ可能
   ========================================================================== */
@media screen and (max-width: 599px) {

    /* グリッドを1行横スクロールコンテナに変換 */
    .TopBlogListContainer {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* 折り返しを完全禁止 */
        overflow-x: auto !important; /* 横スクロール対応 */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 10px !important;
        padding-bottom: 12px !important;
        padding-right: 12px !important;
        margin: 8px 0 14px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 各ブログカードの幅を固定 (140px) */
    .TopBlogFrame {
        flex: 0 0 140px !important;
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        scroll-snap-align: start !important;
        float: none !important;
        margin: 0 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* ★写真枠: 300 x 450 (1 : 1.5) の縦長比率を完全適用 (140px × 210px) */
    .TopBlogImgContainer {
        width: 100% !important;
        height: 210px !important;
        aspect-ratio: 300 / 450 !important;
    }

    .TopBlogTitle {
        padding: 0 6px 2px 6px !important;
    }

        .TopBlogTitle a {
            font-size: 11px !important;
        }

    .TopBlogShopContainer {
        padding: 0 6px 6px 6px !important;
    }

    .TopBlogCastName a {
        font-size: 15px !important;
    }

    .TopBlogShopName a {
        font-size: 15px !important;
    }

    /* 横スクロールバーの微小化 (高さ3px) */
    .TopBlogListContainer::-webkit-scrollbar {
        height: 3px !important;
    }

    .TopBlogListContainer::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 3px !important;
    }
}








/* ピックアップキャス(top/mode=gs) */
.SPIndexPickupCastTitleContainer {
    width: 100%;
    float: left;
    margin: 0 0 5px 0;
    color: #ffffff;
    border-top: 1px solid #da70d6;
    background-color: #ff69b4;
    
    padding: 10px 10px;
    font-weight: bold;
    font-size: 14px;
    text-align: left;
        
}


.SPIndexPickupCastContainer
{
    width: 100%;
    float: left;
    clear:both;    
}

.SPIndexPickupCast
{
    width: 100%;
    float: left;
    clear:both;    
}

.SPIndexPickupCastframe
{
    width: 47%;
    height:160px;
    float: left;
    padding:5px;
    margin:0 0 10px 0;
}

.SPIndexPickupCastframe a
{
    display:block;        
}

.SPIndexPickupCastImg {
    float:left;
}



.SPIndexPickupCastInfo
{
    width:48%;
    float:left; 
    margin:5px 0 0 5px;   
}


.SPIndexPickupPV
{
    float: left;
    clear:both; 
    font-size:30px;
    color:#ff0000;
    margin:0 0 10px 0;
}


.SPIndexPickupCastName
{
    width: 100%;
    float: left;
    clear:both;    
    margin:10px 0 10px 0;
}

    .SPIndexPickupCastName a {
        font-size: 15px;
        color: #666666;
        display: block;
        font-weight: bold;
    }


.SPIndexPickupShopName
{
    width: 100%;
    float: left;
    clear:both; 
    font-size:12px;
    color:#333333;
}

.SPIndexPickupCastStatus
{
    width: 100%;
    float: left;
    clear:both;      
    font-size:12px;
}
.SPIndexPickupCast3Size
{
    width: 100%;
    float: left;
    clear:both; 
    font-size:14px;
    color:#333333;
    margin:10px 0 5px 0;    
}

.SPIndexPickupCastComment
{
    width: 100%;
    float: left;
    clear:both; 
    font-size:10px;
    color:#555555;
    margin:5px 0 0 0;
}

.SPIndexPickupCastComment a
{
    display:block;
    font-size:10px;
    color:#555555;
}


.SPIndexPickupLink
{
    width: 100%;
    float: left;
    clear:both; 
    margin-bottom:10px;
}


.SPIndexPickupLink a
{
    font-size: 15px;
    color: #feb6cd;
    display: block;
    font-weight: bold;
}




/* キャスト検索 stafflist.asp */
.work_status_menu
{
    display: table;
    table-layout: fixed;
    width: 100%;
}

.work_status_menu_item
{
    display: table-cell;
    height: 30px;
    line-height: 30px;
    font-size:11px;  
    text-align: center;
    color: #000000;
    background-color: #ffffff;
    background: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), to(#f5f5f5));
    background: -moz-linear-gradient(top, #FFFFFF, #f5f5f5);
    border-right: 1px dotted #fff; 
}
.work_status_menu_item a
{
    text-decoration:none;
    color: #000;
    display:block; 
}

.work_status_menu_item a:hover
{
    text-decoration:none;
    color: #000;
    display:block;
}

.work_status_menu_item_active 
{
    display: table-cell;
    height: 30px;
    font-weight: bold;
    line-height: 30px;
    background: #fff;
    border-bottom: 3px solid #d42824;    
    text-align:center;
    font-size:11px;    
    padding: 6px 0 0;
    border-right: 1px dotted #fff;    
}
.work_status_menu_item_active a
{
    text-decoration:none;
    color: #000;
    display:block;
}

.work_status_menu_item_active a:hover
{
    text-decoration:none;
    color: #000;
    display:block;
}


/* ==========================================================================
   夜コムエンタメニュース (画像全域表示・比率維持・スマホ1行横スクロール完全版)
   ========================================================================== */

/* 1. 【PC版】4列均等グリッドコンテナ (900px以上) */
.MasterNewsList {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 12px 0 16px 0 !important;
    padding: 0 !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* 2. 個別ニュースカード (.MasterNewsframe) */
.MasterNewsframe {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

    .MasterNewsframe:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
        border-color: #cbd5e1 !important;
    }

    .MasterNewsframe a {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        text-decoration: none !important;
    }

/* 3. ★アイキャッチ写真枠 (元画像の比率で自然に伸縮・固定高さを完全排除) */
.MasterNewsImg {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
    border-radius: 6px 6px 0 0 !important;
}

    /* ★画像本体 (元画像を一切切り取らず、比率のまま枠内に100%全域表示) */
    .MasterNewsImg img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important; /* 上下左右の見切れを完全ゼロ化 */
        display: block !important;
        margin: 0 auto !important;
        transition: transform 0.3s ease !important;
    }

.MasterNewsframe:hover .MasterNewsImg img {
    transform: scale(1.03) !important;
}

/* 4. カード情報本文 */
.MasterNewsBody {
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.MasterNewsDate {
    font-size: 12px !important;
    color: #e6005c !important;
    margin-bottom: 4px !important;
    line-height: 1 !important;
    font-weight: bold !important;
}

.MasterNewsTitle {
    font-size: 13.5px !important;
    font-weight: bold !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    transition: color 0.15s ease !important;
}

.MasterNewsframe:hover .MasterNewsTitle {
    color: #e11d48 !important;
    text-decoration: underline !important;
}


/* ==========================================================================
   タブレット対応 (600px - 899px)
   ========================================================================== */
@media screen and (max-width: 899px) and (min-width: 600px) {
    .MasterNewsList {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}


/* ==========================================================================
   ★【スマホ専用 1行横スクロール】(599px以下)
   ※画像比率を絶対に変えず、全域表示のまま横スワイプ化
   ========================================================================== */
@media screen and (max-width: 599px) {

    /* リストを1行横スクロールコンテナに変換 */
    .MasterNewsList {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 10px !important;
        padding-bottom: 12px !important;
        padding-right: 12px !important;
        margin: 6px 0 14px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 各ニュースカードの幅を固定 */
    .MasterNewsframe {
        flex: 0 0 160px !important;
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        scroll-snap-align: start !important;
        float: none !important;
        margin: 0 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* ★スマホでも固定高さを絶対に設定せず、元画像の縦横比率を完全維持 */
    .MasterNewsImg {
        width: 100% !important;
        height: auto !important;
        background-color: #f8fafc !important;
    }

        /* ★スマホでもcoverで切り落とさず、元画像の比率のまま全域表示 */
        .MasterNewsImg img {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            object-fit: contain !important;
        }

    .MasterNewsBody {
        padding: 8px 10px 10px 10px !important;
    }

    .MasterNewsDate {
        font-size: 12px !important;
        font-weight: bold !important;
    }

    .MasterNewsTitle {
        font-size: 12.5px !important;
        line-height: 1.3 !important;
    }

    /* 極細横スクロールバー (高さ3px) */
    .MasterNewsList::-webkit-scrollbar {
        height: 3px !important;
    }

    .MasterNewsList::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 3px !important;
    }
}

/* ==========================================================================
   店舗ニュース速報 (高さ完全統一・ガチャガチャ感完全抹殺版)
   ========================================================================== */
/* ==========================================================================
   店舗ニュース速報 (横長ワイドカード ＆ タイトル強調完全版)
   ========================================================================== */

.IndexNewsList {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 12px 0 !important;
    box-sizing: border-box !important;
}

/* 個別ニュースカード (横長ワイドレイアウト) */
.IndexNewsframe {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    box-sizing: border-box !important;
}

    .IndexNewsframe:hover {
        transform: translateY(-2px) !important;
        border-color: #fbcfe8 !important;
        box-shadow: 0 6px 16px rgba(240, 43, 102, 0.1) !important;
    }

/* ★アイキャッチ画像枠 (縦長も横長も全域表示できるフレーム) */
.IndexNewsImg {
    width: 140px !important;
    height: 95px !important; /* 横長比率 (約3:2) */
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .IndexNewsImg a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* ★画像全域表示: 縦長キャスト画像も横長バナーもカット禁止 */
    .IndexNewsImg img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

/* 右側：コンテンツコンテナ */
.IndexNewsContents {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* 日付 ＆ 業種メタ行 */
.IndexNewsMetaRow {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.IndexNewsDate {
    font-size: 11.5px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.IndexNewsGSName {
    font-size: 10.5px !important;
    font-weight: bold !important;
    color: #f02b66 !important;
    background-color: #fff1f4 !important;
    border: 1px solid #fecdd6 !important;
    padding: 1px 7px !important;
    border-radius: 4px !important;
    line-height: 1.3 !important;
}

/* ★最重要：ニュースタイトル (大きく目立たせる) */
.IndexNewsTitle {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 1.45 !important;
    color: #1e293b !important;
}

    .IndexNewsTitle a {
        color: #1e293b !important;
        text-decoration: none !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        transition: color 0.15s ease !important;
    }

        .IndexNewsTitle a:hover {
            color: #f02b66 !important;
            text-decoration: underline !important;
        }

/* 店舗名リンク */
.IndexNewsShopLink {
    margin-top: 2px !important;
}

    .IndexNewsShopLink a {
        font-size: 12px !important;
        font-weight: bold !important;
        color: #64748b !important;
        text-decoration: none !important;
        transition: color 0.15s ease !important;
    }

        .IndexNewsShopLink a:hover {
            color: #1e293b !important;
            text-decoration: underline !important;
        }

/* もっと見るボタン (統制デザイン) */
.CommonContentsContainer .CommonMoreBtnContainer {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 14px !important;
}

.CommonContentsContainer .CommonMoreBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 24px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    background: linear-gradient(to bottom, #f02b66, #d80046) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(233, 30, 99, 0.35) !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease, transform 0.1s ease !important;
}

    .CommonContentsContainer .CommonMoreBtn:hover {
        opacity: 0.92 !important;
        transform: translateY(-1px) !important;
    }

    .CommonContentsContainer .CommonMoreBtn svg {
        width: 16px !important;
        height: 16px !important;
        fill: #ffffff !important;
    }

/* ==========================================================================
   タブレット対応 (600px以上)
   ========================================================================== */
@media screen and (min-width: 600px) {
    .IndexNewsImg {
        width: 160px !important;
        height: 105px !important;
    }

    .IndexNewsTitle {
        font-size: 16.5px !important;
    }
}

/* ==========================================================================
   PC対応 (900px以上)
   ========================================================================== */
@media screen and (min-width: 900px) {
    .IndexNewsframe {
        padding: 14px 20px !important;
        gap: 20px !important;
    }

    .IndexNewsImg {
        width: 180px !important;
        height: 115px !important;
    }

    .IndexNewsTitle {
        font-size: 17.5px !important;
    }
}

/* ==========================================================================
   スマホ対応 (599px以下)
   ========================================================================== */
@media screen and (max-width: 599px) {
    .IndexNewsframe {
        gap: 12px !important;
        padding: 10px 12px !important;
    }

    .IndexNewsImg {
        width: 96px !important;
        height: 72px !important;
    }

    .IndexNewsTitle {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .IndexNewsDate {
        font-size: 10.5px !important;
    }

    .IndexNewsShopLink a {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   店舗ランキング (PC: TOP3横3件 + 4-10位横5件 / スマホ: 1行横スクロール完全版)
   ========================================================================== */

/* 1. 【PC版】TOP3 グリッド (900px以上: 横3件) */
.ShopRankGrid_Top3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
}

/* 個別カード (全体クリック基準点) */
.ShopRankCard_Top3 {
    position: relative !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

    .ShopRankCard_Top3:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08) !important;
    }

/* 1位(金)・2位(銀)・3位(銅) の枠線 */
.ShopRankCard_1 {
    border-top: 4px solid #f59e0b !important;
}

.ShopRankCard_2 {
    border-top: 4px solid #94a3b8 !important;
}

.ShopRankCard_3 {
    border-top: 4px solid #d97706 !important;
}

/* 2. 【PC版】4位-10位 グリッド (900px以上: 横5件) */
.ShopRankGrid_Normal {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
}

.ShopRankCard_Normal {
    position: relative !important;
    background-color: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 6px !important;
    padding: 8px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

    .ShopRankCard_Normal:hover {
        transform: translateY(-2px) !important;
        border-color: #cbd5e1 !important;
    }

    /* 3. 順位バッジ */
    .ShopRankCard_Top3 .RankNumLabel,
    .ShopRankCard_Normal .RankNumLabel {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px 6px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        border-radius: 4px !important;
        line-height: 1.2 !important;
        pointer-events: none !important;
    }

.ShopRankCard_1 .RankNumLabel {
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
}

.ShopRankCard_2 .RankNumLabel {
    background: linear-gradient(135deg, #cbd5e1, #64748b) !important;
}

.ShopRankCard_3 .RankNumLabel {
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
}

.ShopRankCard_Normal .RankNumLabel {
    background: linear-gradient(135deg, #475569, #1e293b) !important;
}

/* エリア業種バッジ */
.RankListGSArea {
    font-size: 10.5px !important;
    color: #64748b !important;
    background-color: #f1f5f9 !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    margin-left: 4px !important;
    pointer-events: none !important;
}

/* 4. 店名リンク (カード全体を覆うメインリンク) */
.shoplistshopname {
    position: static !important;
    margin: 4px 0 6px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}

    .ShopRankCard_Top3 .shoplistshopname a,
    .ShopRankCard_Normal .shoplistshopname a,
    .shoplistshopname a.shoplistshopmainlink {
        position: static !important;
        color: #1e293b !important;
        text-decoration: none !important;
        transition: color 0.15s ease !important;
    }

.ShopRankCard_Top3 .shoplistshopname a {
    font-size: 15px !important;
    font-weight: bold !important;
}

.ShopRankCard_Normal .shoplistshopname a {
    font-size: 15px !important;
    font-weight: bold !important;
}

/* 全体クリック透明リンク */
.shoplistshopname a::after,
.shoplistshopname a.shoplistshopmainlink::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
}

.ShopRankCard_Top3:hover .shoplistshopname a,
.ShopRankCard_Normal:hover .shoplistshopname a {
    color: #e11d48 !important;
    text-decoration: underline !important;
}

/* 5. 営業状態バー */
.ShopCalendarContainer {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    pointer-events: none !important;
}

.ShopCalendarWorkFlgOn {
    display: inline-block !important;
    padding: 1px 5px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    background-color: #e11d48 !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
}

.ShopCalendarWorkFlgOff {
    display: inline-block !important;
    padding: 1px 5px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    background-color: #94a3b8 !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
}

.ShopCalendarWorkCnt {
    font-size: 15px !important;
    color: #475569 !important;
}

.ShopCalendarWorkCntNum {
    font-weight: bold !important;
    color: #e11d48 !important;
}

/* 6. 店舗バナー画像枠 */
.TenpoListImgBanaContainer {
    width: 100% !important;
    margin-top: auto !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
    pointer-events: none !important;
}

.ShopRankCard_Top3 .TenpoListImgBanaContainer img {
    width: 100% !important;
    height: 100px !important;
    object-fit: cover !important;
    display: block !important;
    pointer-events: none !important;
    transition: transform 0.25s ease !important;
}

.ShopRankCard_Normal .TenpoListImgBanaContainer img {
    width: 100% !important;
    height: 75px !important;
    object-fit: cover !important;
    display: block !important;
    pointer-events: none !important;
    transition: transform 0.25s ease !important;
}

.ShopRankCard_Top3:hover .TenpoListImgBanaContainer img,
.ShopRankCard_Normal:hover .TenpoListImgBanaContainer img {
    transform: scale(1.04) !important;
}


/* ==========================================================================
   縦1列リスト形式 店舗ランキング (ShopRankList)
   ========================================================================== */
.ShopRankList {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 12px 0 16px 0 !important;
    padding: 0 !important;
    clear: both !important;
    box-sizing: border-box !important;
}

.shoplistitem,
.shoplistitemrec {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 16px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    position: relative !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

    .shoplistitem:hover,
    .shoplistitemrec:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
        border-color: #cbd5e1 !important;
    }

    .shoplistitem:nth-child(1), .shoplistitemrec:nth-child(1) {
        border-left: 5px solid #f59e0b !important;
    }

    .shoplistitem:nth-child(2), .shoplistitemrec:nth-child(2) {
        border-left: 5px solid #94a3b8 !important;
    }

    .shoplistitem:nth-child(3), .shoplistitemrec:nth-child(3) {
        border-left: 5px solid #d97706 !important;
    }

.shoplistrank {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
}

.RankNumLabel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 26px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #475569, #1e293b) !important;
    border-radius: 4px !important;
    margin: 0 !important;
    line-height: 1 !important;
    padding: 0 6px !important;
}

.shoplistitem:nth-child(1) .RankNumLabel, .shoplistitemrec:nth-child(1) .RankNumLabel {
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
}

.shoplistitem:nth-child(2) .RankNumLabel, .shoplistitemrec:nth-child(2) .RankNumLabel {
    background: linear-gradient(135deg, #cbd5e1, #64748b) !important;
}

.shoplistitem:nth-child(3) .RankNumLabel, .shoplistitemrec:nth-child(3) .RankNumLabel {
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
}

.RankSubLabel {
    display: none !important;
}

.ShopListPRText {
    font-size: 12.5px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
}


/* ==========================================================================
   レスポンシブ対応 (タブレット 600px - 899px)
   ========================================================================== */
@media screen and (max-width: 899px) and (min-width: 600px) {
    .ShopRankGrid_Top3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .ShopRankCard_Top3 .TenpoListImgBanaContainer img {
        height: 85px !important;
    }

    .ShopRankGrid_Normal {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .ShopRankCard_Normal .TenpoListImgBanaContainer img {
        height: 70px !important;
    }
}


/* ==========================================================================
   ★【スマホ専用 1行横スクロール完全結合】(599px以下)
   1位から10位までが切れ目なく1行に繋がり、全員同じ幅(150px)でスワイプ可能
   ========================================================================== */
@media screen and (max-width: 599px) {

    /* 全体を包むラッパーを1行横スクロールコンテナにする */
    .ShopRankScrollWrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 10px !important;
        padding-bottom: 12px !important;
        padding-right: 12px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 内部の2つの箱(Top3とNormal)を透過させ、1位から10位までを完全な1行に結合！ */
    .ShopRankGrid_Top3,
    .ShopRankGrid_Normal {
        display: contents !important;
    }

    /* 1位から10位までの全店舗カードサイズを「幅150px」に完全統一 */
    .ShopRankCard_Top3,
    .ShopRankCard_Normal {
        flex: 0 0 150px !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        scroll-snap-align: start !important;
        float: none !important;
        margin: 0 !important;
        padding: 8px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

        /* バナー画像高さを全順位で統一 (80px) */
        .ShopRankCard_Top3 .TenpoListImgBanaContainer img,
        .ShopRankCard_Normal .TenpoListImgBanaContainer img {
            width: 100% !important;
            height: 80px !important;
            object-fit: cover !important;
            display: block !important;
        }

        /* 店名テキストの最適化 */
        .ShopRankCard_Top3 .shoplistshopname a,
        .ShopRankCard_Normal .shoplistshopname a {
            font-size: 15px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            display: block !important;
        }

        /* 営業情報バーのコンパクト化 */
        .ShopRankCard_Top3 .ShopCalendarContainer,
        .ShopRankCard_Normal .ShopCalendarContainer {
            margin-bottom: 4px !important;
            gap: 2px !important;
        }

        .ShopRankCard_Top3 .ShopCalendarWorkCnt,
        .ShopRankCard_Normal .ShopCalendarWorkCnt {
            font-size: 14px !important;
        }

    /* お店ランキング専用の極細横スクロールバー (高さ3px) */
    .ShopRankScrollWrapper::-webkit-scrollbar {
        height: 3px !important;
    }

    .ShopRankScrollWrapper::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 3px !important;
    }
}












/* タブ内のフロート解除 ＆ ボタンの確実な表示 */
#WorkKbnTab > div {
    overflow: visible !important;
    clear: both !important;
    padding-bottom: 16px !important;
}

.CommonMoreBtnContainer {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 16px auto 6px auto !important;
}





/* ==========================================================================
   ジャンルトップ専用 週間アクセスランキング (PC 3列+5列 / スマホ完全1行横スクロール)
   ========================================================================== */

.TopRankingSection {
    width: 100% !important;
    margin: 20px 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

.TopRankingHeader {
    padding: 12px 16px !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.TopRankingMainTitle {
    padding: 8px 12px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    color: #000 !important;
    background-color: #f8fafc !important;
    border-left: 3px solid #64748b !important;
    border-bottom: 1px solid #e2e8f0 !important;
    line-height: 1.3 !important;
}

.TopRankingContainer {
    padding: 16px !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------
   1. 【PC版】1位-3位 TOP3 特大グリッド (900px以上: 横3列)
   -------------------------------------------------- */
.TopRankGrid_Top3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.TopRankCard_Top3 {
    position: relative !important;
    background-color: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

    .TopRankCard_Top3:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    }

.TopRankCard_1 {
    border: 2px solid #f59e0b !important;
}

.TopRankCard_2 {
    border: 2px solid #94a3b8 !important;
}

.TopRankCard_3 {
    border: 2px solid #d97706 !important;
}

.TopRankBadge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10 !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    pointer-events: none !important;
}

.TopRankBadge_1 {
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
}

.TopRankBadge_2 {
    background: linear-gradient(135deg, #cbd5e1, #64748b) !important;
}

.TopRankBadge_3 {
    background: linear-gradient(135deg, #f97316, #c2410c) !important;
}

/* PC TOP3写真枠: 300 x 450 (1 : 1.5) 縦長比率完全適用 */
.TopRankPhoto_Top3 {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 300 / 450 !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
    pointer-events: none !important;
}

    .TopRankPhoto_Top3 img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        pointer-events: none !important;
        transition: transform 0.3s ease !important;
    }

.TopRankCard_Top3:hover .TopRankPhoto_Top3 img {
    transform: scale(1.04) !important;
}

/* --------------------------------------------------
   2. 【PC版】4位-10位 下段グリッド (900px以上: 横5列)
   -------------------------------------------------- */
.TopRankGrid_Normal {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
}

.TopRankCard_Normal {
    position: relative !important;
    background-color: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

    .TopRankCard_Normal:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
        border-color: #cbd5e1 !important;
    }

.TopRankBadge_Normal {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 10 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    pointer-events: none !important;
}

/* PC 4位-10位写真枠: 300 x 450 (1 : 1.5) 縦長比率完全適用 */
.TopRankPhoto_Normal {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 300 / 450 !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
    pointer-events: none !important;
}

    .TopRankPhoto_Normal img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        pointer-events: none !important;
        transition: transform 0.25s ease !important;
    }

.TopRankCard_Normal:hover .TopRankPhoto_Normal img {
    transform: scale(1.04) !important;
}

/* --------------------------------------------------
   3. カード内テキスト共通仕様
   -------------------------------------------------- */
.TopRankInfoBody {
    position: static !important;
    padding: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
}

.TopRankGenreBadge {
    display: inline-block !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #be123c !important;
    background-color: #ffe4e6 !important;
    border-radius: 4px !important;
    width: fit-content !important;
    margin-bottom: 4px !important;
    pointer-events: none !important;
}

.TopRankCompName {
    position: static !important;
    font-size: 15px !important;
    font-weight: bold !important;
    color: #e11d48 !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
}

    .TopRankCompName a,
    .TopRankCompName a.TopRankCompMainLink {
        position: static !important;
        color: #e11d48 !important;
        text-decoration: none !important;
        transition: color 0.15s ease !important;
    }

        /* カード全体クリッカブルリンク */
        .TopRankCompName a::after,
        .TopRankCompName a.TopRankCompMainLink::after {
            content: "" !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 2 !important;
        }

.TopRankCard_Top3:hover .TopRankCompName a,
.TopRankCard_Normal:hover .TopRankCompName a {
    text-decoration: underline !important;
    color: #be123c !important;
}

.TopRankShopName {
    position: relative !important;
    z-index: 10 !important;
    font-size: 15px !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

    .TopRankShopName a,
    .TopRankShopName a.TopRankShopLink {
        position: relative !important;
        z-index: 11 !important;
        color: #64748b !important;
        text-decoration: none !important;
    }

        .TopRankShopName a:hover,
        .TopRankShopName a.TopRankShopLink:hover {
            color: #1e293b !important;
            text-decoration: underline !important;
        }

.TopRank3Size {
    font-size: 11px !important;
    color: #475569 !important;
    margin-bottom: 4px !important;
    pointer-events: none !important;
}

.TopRankStatus {
    pointer-events: none !important;
}


/* ==========================================================================
   4. 【タブレット対応】(600px - 899px)
   ========================================================================== */
@media screen and (max-width: 899px) and (min-width: 600px) {
    .TopRankGrid_Top3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .TopRankGrid_Normal {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .TopRankPhoto_Top3,
    .TopRankPhoto_Normal {
        aspect-ratio: 300 / 450 !important;
        height: auto !important;
    }
}


/* ==========================================================================
   5. 【スマホ専用 1行横スクロール完全結合】(599px以下)
   1位から10位までが切れ目なく1本の横レールに繋がり、全員同一サイズでスワイプ可能
   ========================================================================== */
@media screen and (max-width: 599px) {

    .TopRankingContainer {
        padding: 10px 0 10px 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* ★ランキング全体を包むラッパーを1行横スクロールコンテナにする */
    .TopRankScrollWrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 10px !important;
        padding-bottom: 12px !important;
        padding-right: 12px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ★内部の2つの箱(Top3とNormal)を透過させ、1位から10位までを完全な1行に結合！ */
    .TopRankGrid_Top3,
    .TopRankGrid_Normal {
        display: contents !important;
    }

    /* ★1位から10位までの全カードサイズを「幅140px」に完全統一 */
    .TopRankCard_Top3,
    .TopRankCard_Normal {
        flex: 0 0 140px !important;
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        scroll-snap-align: start !important;
        float: none !important;
        margin: 0 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* ★全写真枠: 300 x 450 (1 : 1.5) 縦長比率に統一 (140px × 210px) */
    .TopRankPhoto_Top3,
    .TopRankPhoto_Normal {
        width: 100% !important;
        height: 210px !important;
        aspect-ratio: 300 / 450 !important;
        overflow: hidden !important;
        background-color: #f8fafc !important;
    }

        .TopRankPhoto_Top3 img,
        .TopRankPhoto_Normal img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            display: block !important;
        }

    /* 順位バッジサイズ統一 */
    .TopRankBadge,
    .TopRankBadge_Normal {
        position: absolute !important;
        top: 6px !important;
        left: 6px !important;
        z-index: 10 !important;
        padding: 2px 7px !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        border-radius: 4px !important;
        line-height: 1.2 !important;
    }

    /* カード内テキスト統一 */
    .TopRankCard_Top3 .TopRankInfoBody,
    .TopRankCard_Normal .TopRankInfoBody {
        padding: 5px !important;
        box-sizing: border-box !important;
    }

    .TopRankCard_Top3 .TopRankCompName,
    .TopRankCard_Normal .TopRankCompName {
        font-size: 15px !important;
        margin-bottom: 2px !important;
    }

    .TopRankCard_Top3 .TopRankShopName,
    .TopRankCard_Normal .TopRankShopName {
        font-size: 15px !important;
        margin-bottom: 2px !important;
    }

    .TopRankCard_Top3 .TopRank3Size,
    .TopRankCard_Normal .TopRank3Size {
        font-size: 15px !important;
    }

    /* 横スクロールバーの微小化 */
    .TopRankScrollWrapper::-webkit-scrollbar {
        height: 3px !important;
    }

    .TopRankScrollWrapper::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 3px !important;
    }
}



/* ==========================================================================
   一行つぶやき (大判写真 ＆ 300x450比率完全版)
   ========================================================================== */

.TopOneLinePRSection {
    width: 100% !important;
    margin: 20px 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #ffd1dc !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

.TopOneLinePRHeader {
    padding: 12px 16px !important;
    background-color: #fff7f9 !important;
    border-bottom: 1px solid #ffe4eb !important;
}

.TopOneLinePRMainTitle {
    padding: 8px 12px;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    background-color: #f8fafc;
    border-left: 3px solid #64748b;
    border-bottom: 1px solid #e2e8f0;
    line-height: 1.3;
}

.TopOneLinePRContainer {
    padding: 16px !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------
   PC版: 2列均等グリッド (900px以上)
   -------------------------------------------------- */
.TopOneLinePRGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

/* 個別つぶやきカード */
.OneLinePRCard {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    background-color: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

    .OneLinePRCard:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(240, 43, 102, 0.12) !important;
        border-color: #fbcfe8 !important;
    }

/* 左側：大判写真枠 (300 x 450 の縦長比率 1 : 1.5 保持: 幅100px × 高さ150px) */
.OneLinePRAvatarBox {
    width: 100px !important;
    height: 150px !important;
    aspect-ratio: 300 / 450 !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

    .OneLinePRAvatarBox a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    .OneLinePRAvatarBox img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

/* 右側：情報 ＆ 吹き出しコンテナ */
.OneLinePRBody {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    gap: 6px !important;
}

.OneLinePRMeta {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.OneLinePRCompName {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #f02b66 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}

    .OneLinePRCompName:hover {
        text-decoration: underline !important;
    }

.OneLinePRShopName {
    font-size: 15px !important;
    color: #000 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

    .OneLinePRShopName:hover {
        color: #1e293b !important;
    }

.OneLinePRDate {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-left: auto !important;
}

/* チャット吹き出し */
.OneLinePRBubble {
    position: relative !important;
    background-color: #fff1f4 !important;
    border: 1px solid #fecdd6 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
}

    .OneLinePRBubble::before {
        content: "" !important;
        position: absolute !important;
        top: 14px !important;
        left: -7px !important;
        width: 0 !important;
        height: 0 !important;
        border-top: 6px solid transparent !important;
        border-bottom: 6px solid transparent !important;
        border-right: 7px solid #fecdd6 !important;
    }

    .OneLinePRBubble::after {
        content: "" !important;
        position: absolute !important;
        top: 15px !important;
        left: -6px !important;
        width: 0 !important;
        height: 0 !important;
        border-top: 5px solid transparent !important;
        border-bottom: 5px solid transparent !important;
        border-right: 6px solid #fff1f4 !important;
    }

.OneLinePRText {
    font-size: 13px !important;
    color: #334155 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    word-break: break-word !important;
}

/* もっと見るボタン (統制デザイン) */
.TopOneLinePRContainer .CommonMoreBtnContainer {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
}

.TopOneLinePRContainer .CommonMoreBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 24px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    background: linear-gradient(to bottom, #f02b66, #d80046) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(233, 30, 99, 0.35) !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease, transform 0.1s ease !important;
}

    .TopOneLinePRContainer .CommonMoreBtn:hover {
        opacity: 0.92 !important;
        transform: translateY(-1px) !important;
    }

    .TopOneLinePRContainer .CommonMoreBtn svg {
        width: 16px !important;
        height: 16px !important;
        fill: #ffffff !important;
    }

/* --------------------------------------------------
   タブレット対応 (600px - 899px)
   -------------------------------------------------- */
@media screen and (max-width: 899px) and (min-width: 600px) {
    .TopOneLinePRGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .OneLinePRAvatarBox {
        width: 88px !important;
        height: 132px !important;
    }

    .OneLinePRText {
        font-size: 12.5px !important;
    }
}

/* --------------------------------------------------
   スマホ専用 1行横スクロール (599px以下)
   -------------------------------------------------- */
@media screen and (max-width: 599px) {
    .TopOneLinePRContainer {
        padding: 10px 0 10px 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .TopOneLinePRGrid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 12px !important;
        padding-bottom: 12px !important;
        padding-right: 12px !important;
        margin: 0 0 10px 0 !important;
        list-style: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* スマホカード幅 (310pxで写真・吹き出し共にゆったり確保) */
    .OneLinePRCard {
        flex: 0 0 310px !important;
        width: 310px !important;
        min-width: 310px !important;
        max-width: 310px !important;
        scroll-snap-align: start !important;
        padding: 10px 12px !important;
        gap: 12px !important;
    }

    /* スマホ写真枠: 80px × 120px (300 x 450 完全保持) */
    .OneLinePRAvatarBox {
        width: 80px !important;
        height: 120px !important;
    }

    .OneLinePRCompName {
        font-size: 14px !important;
    }

    .OneLinePRShopName {
        font-size: 15px !important;
    }

    .OneLinePRText {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .TopOneLinePRGrid::-webkit-scrollbar {
        height: 4px !important;
    }

    .TopOneLinePRGrid::-webkit-scrollbar-thumb {
        background: #fbcfe8 !important;
        border-radius: 4px !important;
    }
}


/* ==========================================================================
   ジャンルトップ ピックアップ・出勤中キャスト一覧 (4列完全等幅＆完全一致スタイル)
   ========================================================================== */

/* 1. 外枠セクション */
.TopPickupStaffSection {
    width: 100% !important;
    max-width: 980px !important;
    margin: 20px 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

.TopPickupStaffHeader {
    padding: 12px 16px !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.TopPickupStaffMainTitle {
    padding: 8px 12px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    color: #000 !important;
    background-color: #f8fafc !important;
    border-left: 3px solid #64748b !important;
    border-bottom: 1px solid #e2e8f0 !important;
    line-height: 1.3 !important;
}

.TopPickupStaffContainer {
    padding: 16px !important;
    box-sizing: border-box !important;
}

    /* 2. 4列完全等幅グリッド (minmax(0, 1fr) で幅バラバラを完全防止) */
    .TopPickupStaffGrid,
    .ShopPageStaffList.TopPickupStaffGrid,
    .TopPickupStaffContainer .ShopPageStaffList {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* ★4列完全均等固定 */
        gap: 14px !important;
        width: 100% !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 16px 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. 個別カード要素（幅の押し広がりを強制カット） */
    .TopPickupStaffListItem,
    .TopPickupStaffContainer .ShopPageStaffListItem {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important; /* ★幅の飛び出しを防止 */
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

        .TopPickupStaffListItem .CustomTenpoStaffCard,
        .TopPickupStaffContainer .CustomTenpoStaffCard {
            background-color: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 8px !important;
            overflow: hidden !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
            display: flex !important;
            flex-direction: column !important;
            height: 100% !important;
            width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
            transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        }

            .TopPickupStaffListItem .CustomTenpoStaffCard:hover,
            .TopPickupStaffContainer .CustomTenpoStaffCard:hover {
                transform: translateY(-3px) !important;
                box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1) !important;
                border-color: #cbd5e1 !important;
            }

            .TopPickupStaffListItem .CustomTenpoStaffCard a,
            .TopPickupStaffContainer .CustomTenpoStaffCard a {
                display: flex !important;
                flex-direction: column !important;
                height: 100% !important;
                width: 100% !important;
                text-decoration: none !important;
            }

        /* 4. 写真枠 ＆ PICK UPオーバーレイバッジ */
        .TopPickupStaffListItem .TenpoStaffImg,
        .TopPickupStaffContainer .TenpoStaffImg {
            position: relative !important;
            width: 100% !important;
            /*height: 250px !important;*/ /* ★4列に最適な縦横比 */
            overflow: hidden !important;
            background-color: #f8fafc !important;
        }

            .TopPickupStaffListItem .TenpoStaffImg img,
            .TopPickupStaffContainer .TenpoStaffImg img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                display: block !important;
            }

.TopPickupOverlayBadge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 5 !important;
    padding: 2px 7px !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

/* 5. トロフィー獲得ポイント */
.TopPickupStaffContainer .stafflistawardpoint {
    font-size: 11px !important;
    font-weight: bold !important;
    color: #d97706 !important;
    background-color: #fffbeb !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    border-bottom: 1px solid #fef3c7 !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
}

.TopPickupStaffContainer .shoplistawardicon {
    width: 16px !important;
    height: 16px !important;
}

/* 6. カード本文情報 */
.TopPickupStaffListItem .TenpoStaff_Body,
.TopPickupStaffContainer .TenpoStaff_Body {
    padding: 10px 12px 12px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow: hidden !important;
}

/* ① ジャンルバッジ */
.TopPickupStaffListItem .Tenpo1LinePR,
.TopPickupStaffContainer .Tenpo1LinePR {
    display: inline-block !important;
    padding: 2px 8px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    width: fit-content !important;
    margin-bottom: 5px !important;
}

/* ② 店舗名 */
.TopPickupStaffShop {
    font-size: 15px !important;
    color: #000 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
    width: 100% !important;
}

/* ③ キャスト名（★赤色太字） */
.TopPickupStaffListItem .CustomShopStaffName,
.TopPickupStaffContainer .CustomShopStaffName {
    font-size: 14.5px !important;
    font-weight: bold !important;
    color: #e11d48 !important; /* ★鮮やかな赤 */
    margin: 0 0 3px 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}

/* ④ 身長 / 年齢 / 3サイズ */
.TopPickupStaffListItem .CustomShopStaffProf,
.TopPickupStaffContainer .CustomShopStaffProf {
    font-size: 11.5px !important;
    color: #475569 !important;
    margin-bottom: 3px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

/* ⑤ 出勤ステータス */
.TopPickupStaffListItem .TenpoStaffStatus,
.TopPickupStaffContainer .TenpoStaffStatus {
    margin: 2px 0 4px 0 !important;
}

/* ⑥ BLOG / 新人 / LINEマーク */
.TopPickupStaffListItem .ShopStaffMarkIcon,
.TopPickupStaffContainer .ShopStaffMarkIcon {
    display: inline-block !important;
    padding: 1px 6px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #e11d48 !important;
    background-color: #ffffff !important;
    border: 1px solid #f43f5e !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
}

/* ⑦ ひとことPR文 */
.TopPickupStaffListItem .CustomShopStaffPRText,
.TopPickupStaffContainer .CustomShopStaffPRText {
    font-size: 11px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin-top: auto !important;
    padding-top: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}

/* ==========================================================================
   注目キャスト 写真上 HOT オーバーレイバッジ
   ========================================================================== */
.TopHotOverlayBadge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 5 !important;
    padding: 3px 9px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #f97316, #dc2626) !important; /* 鮮やかなオレンジ〜レッド */
    border-radius: 9999px !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4) !important;
}

/* ==========================================================================
   TopPickupStaffSection スマホ専用 横スクロール化スタイル (599px以下)
   ========================================================================== */
@media screen and (max-width: 599px) {

    /* 外枠コンテナのパディング調整 (右端チラ見せ対応) */
    .TopPickupStaffContainer {
        padding: 10px 0 10px 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

        /* グリッドを1行横スクロールFlexに強制変換 */
        .TopPickupStaffGrid,
        .ShopPageStaffList.TopPickupStaffGrid,
        .TopPickupStaffContainer .ShopPageStaffList {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            scroll-snap-type: x mandatory !important;
            gap: 10px !important;
            padding-bottom: 12px !important;
            padding-right: 12px !important;
            margin: 0 !important;
            list-style: none !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* 各キャストカードの幅固定 (140px) ＆ スナップ配置 */
        .TopPickupStaffListItem,
        .TopPickupStaffContainer .ShopPageStaffListItem {
            flex: 0 0 140px !important;
            width: 140px !important;
            min-width: 140px !important;
            max-width: 140px !important;
            scroll-snap-align: start !important;
            float: none !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }

            /* カード本体 */
            .TopPickupStaffListItem .CustomTenpoStaffCard,
            .TopPickupStaffContainer .CustomTenpoStaffCard {
                width: 100% !important;
                height: 100% !important;
            }

            /* キャスト写真枠 (300 x 450 の縦長比率 1 : 1.5 を完全保持 / 140px × 210px) */
            .TopPickupStaffListItem .TenpoStaffImg,
            .TopPickupStaffContainer .TenpoStaffImg {
                width: 100% !important;
                height: 210px !important;
                aspect-ratio: 300 / 450 !important;
                overflow: hidden !important;
                background-color: #f8fafc !important;
            }

                .TopPickupStaffListItem .TenpoStaffImg img,
                .TopPickupStaffContainer .TenpoStaffImg img {
                    width: 100% !important;
                    height: 100% !important;
                    object-fit: cover !important;
                    display: block !important;
                }

            /* テキスト情報エリアの調整 */
            .TopPickupStaffListItem .TenpoStaff_Body,
            .TopPickupStaffContainer .TenpoStaff_Body {
                padding: 8px 10px 10px 10px !important;
            }

            .TopPickupStaffListItem .CustomShopStaffName,
            .TopPickupStaffContainer .CustomShopStaffName {
                font-size: 15px !important;
            }

    .TopPickupStaffShop {
        font-size: 15px !important;
    }

    .TopPickupStaffListItem .CustomShopStaffProf {
        font-size: 14px !important;
    }

    /* 横スクロールバーの微小化 (邪魔にならない極細バー) */
    .TopPickupStaffGrid::-webkit-scrollbar,
    .TopPickupStaffContainer .ShopPageStaffList::-webkit-scrollbar {
        height: 3px !important;
    }

    .TopPickupStaffGrid::-webkit-scrollbar-thumb,
    .TopPickupStaffContainer .ShopPageStaffList::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 3px !important;
    }
}




/* ==========================================================================
   新規店舗ニュース (PC: 3列 / スマホ: 1行横スクロール完全版)
   ========================================================================== */

/* 1. 【PC版】3列均等グリッド (900px以上) */
.NewShopList {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* PC: 3列均等配置 */
    gap: 14px !important;
    width: 100% !important;
    margin: 12px 0 16px 0 !important;
    padding: 0 !important;
    clear: both !important;
    box-sizing: border-box !important;
    list-style: none !important;
}

/* 2. 個別店舗カード */
.NewShopFrame {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

    .NewShopFrame:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
        border-color: #cbd5e1 !important;
    }

    .NewShopFrame a {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        text-decoration: none !important;
    }

/* 3. ★バナー額縁枠 (PC時: 高さ150px) */
.NewShopBannerBox {
    position: relative !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid #f1f5f9 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

    /* ★バナー画像 (元画像を一切切り落とさず100%全域表示) */
    .NewShopBannerBox img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 150px !important;
        object-fit: contain !important; /* 文字や端の切り落とし完全ゼロ */
        display: block !important;
        margin: 0 auto !important;
        transition: transform 0.3s ease !important;
    }

.NewShopFrame:hover .NewShopBannerBox img {
    transform: scale(1.03) !important;
}

/* 4. 左上オーバーレイ「NEW」バッジ */
.NewShopOverlayBadge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10 !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    pointer-events: none !important;
}

/* 5. カード本文情報 */
.NewShopBody {
    padding: 10px 12px 12px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* 業種バッジ */
.NewShopGSBadge {
    display: inline-block !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    width: fit-content !important;
    margin-bottom: 5px !important;
}

/* 店舗名 */
.NewShopName {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color 0.15s ease !important;
}

.NewShopFrame:hover .NewShopName {
    color: #e11d48 !important;
    text-decoration: underline !important;
}

/* 店舗PR文 (2行揃え) */
.NewShopPR {
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin-top: auto !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
}


/* ==========================================================================
   タブレット対応 (600px - 899px)
   ========================================================================== */
@media screen and (max-width: 899px) and (min-width: 600px) {
    .NewShopList {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .NewShopBannerBox {
        height: 130px !important;
        min-height: 130px !important;
        max-height: 130px !important;
    }

        .NewShopBannerBox img {
            max-height: 130px !important;
        }
}


/* ==========================================================================
   ★【スマホ専用 1行横スクロール化】(599px以下)
   ※ノーカット(object-fit: contain)を完全維持し、スムーズに横スワイプ可能
   ========================================================================== */
@media screen and (max-width: 599px) {

    /* リストを1行横スクロールコンテナに変換 */
    .NewShopList {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* 折り返しを完全禁止 */
        overflow-x: auto !important; /* 横スクロール対応 */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 10px !important;
        padding-bottom: 12px !important;
        padding-right: 12px !important;
        margin: 8px 0 14px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 各店舗カードの幅を固定 (200px) */
    .NewShopFrame {
        flex: 0 0 200px !important;
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        scroll-snap-align: start !important;
        float: none !important;
        margin: 0 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* スマホバナー枠: 高さ110pxで額縁表示 */
    .NewShopBannerBox {
        height: 110px !important;
        min-height: 110px !important;
        max-height: 110px !important;
    }

        /* スマホでも文字や端を切らずに100%全域表示 */
        .NewShopBannerBox img {
            max-height: 110px !important;
            object-fit: contain !important;
        }

    .NewShopBody {
        padding: 8px 10px 10px 10px !important;
    }

    .NewShopName {
        font-size: 15px !important;
    }

    .NewShopPR {
        font-size: 14px !important;
    }

    /* 極細横スクロールバー (高さ3px) */
    .NewShopList::-webkit-scrollbar {
        height: 3px !important;
    }

    .NewShopList::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 3px !important;
    }
}



/* ==========================================
   画像風セグメントタブ スタイル
   ========================================== */

/* 全体のコンテナ */
#WorkKbnTab {
    width: 100%;
    margin-bottom: 20px;
}

    /* タブボタンの外枠（角丸・グレー枠線） */
    #WorkKbnTab ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        background-color: #f8f9fa; /* 未選択時の背景色 */
        border: 1px solid #e2e8f0; /* 外枠のグレー線 */
        border-radius: 8px; /* 角丸 */
        overflow: hidden; /* はみ出し防止 */
    }

        /* 各タブの幅を均等に分配 */
        #WorkKbnTab ul li {
            flex: 1;
            text-align: center;
            border-right: 1px solid #e2e8f0; /* アイテム間の区切り線 */
        }

            /* 最後の要素の右枠線は消す */
            #WorkKbnTab ul li:last-child {
                border-right: none;
            }

            /* タブリンクのスタイル */
            #WorkKbnTab ul li a {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 44px; /* ボタンの高さ */
                padding: 0 10px;
                text-decoration: none;
                color: #4a5568; /* 未選択時の文字色 */
                font-size: 14px;
                font-weight: bold;
                transition: all 0.2s ease;
            }

                /* ホバー時 */
                #WorkKbnTab ul li a:hover {
                    background-color: #edf2f7;
                }

                /* 選択中（active）のボタン：鮮やかなピンク */
                #WorkKbnTab ul li a.active {
                    background-color: #e91e63; /* 選択時のメイン背景色 */
                    color: #ffffff; /* 文字色ホワイト */
                }

                /* アイコン画像の色調整（選択時はホワイトで透過・または非表示にする場合） */
                #WorkKbnTab ul li a img {
                    margin-right: 6px;
                }

    /* パネル（切り替えコンテンツ）の初期設定 */
    #WorkKbnTab > div {
        display: none;
        padding: 15px 0;
    }

        /* アクティブなパネルを表示 */
        #WorkKbnTab > div.active {
            display: block;
        }

/* ==========================================================================
   近日誕生日のキャスト (大判写真縦型カルーセル ＆ 300x450比率版)
   ========================================================================== */

.birthday-module {
    width: 100% !important;
    margin: 10px 0 16px 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* 1行横スクロールコンテナ */
.birthday-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 6px 12px 14px 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 個別バースデーカード (縦型大判カード) */
.birthday-item {
    flex: 0 0 160px !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #ffd1dc !important;
    border-radius: 10px !important;
    padding: 0 0 8px 0 !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

    .birthday-item:hover {
        border-color: #f02b66 !important;
        box-shadow: 0 6px 16px rgba(240, 43, 102, 0.2) !important;
        transform: translateY(-3px) !important;
    }

/* サムネイル写真枠: 300 x 450 (1 : 1.5) の縦長比率を完全保持 */
.birthday-thumb-box {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 300 / 450 !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
}

.birthday-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 誕生日オーバーレイバッジ (写真左上に大きく配置) */
.birthday-date-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 2 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    background: linear-gradient(to bottom, #f02b66, #d80046) !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 6px rgba(233, 30, 99, 0.35) !important;
}

/* テキスト情報 */
.birthday-text {
    width: 100% !important;
    padding: 8px 8px 2px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* キャスト名 */
.birthday-name {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #f02b66 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}

/* 店舗名 */
.birthday-shop {
    font-size: 15px !important;
    color: #000 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

/* 横スクロールバー */
.birthday-list::-webkit-scrollbar {
    height: 4px !important;
    display: block !important;
}

.birthday-list::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}

.birthday-list::-webkit-scrollbar-thumb {
    background: #fbcfe8 !important;
    border-radius: 4px !important;
}

/* タブレット (600px以上) */
@media screen and (min-width: 600px) {
    .birthday-item {
        flex: 0 0 170px !important;
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
    }

    .birthday-name {
        font-size: 14px !important;
    }
}

/* PC (900px以上) */
@media screen and (min-width: 900px) {
    .birthday-item {
        flex: 0 0 180px !important;
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }

    .birthday-name {
        font-size: 15px !important;
    }

    .birthday-shop {
        font-size: 15px !important;
    }
}

/* スマホ (599px以下) */
@media screen and (max-width: 599px) {
    .birthday-item {
        flex: 0 0 135px !important;
        width: 135px !important;
        min-width: 135px !important;
        max-width: 135px !important;
    }

    .birthday-date-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    .birthday-name {
        font-size: 15px !important;
    }

    .birthday-shop {
        font-size: 10px !important;
    }
}

/* ==========================================================================
   Vote Summary Ranking (PC: 3列維持 / スマホ: 縦型ブロック1行横スクロール完全版)
   ========================================================================== */

.vote-summary-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 20px !important;
}

/* 投票メタ情報カード（期間 ＆ お題） */
.vote-meta-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.vote-period-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
}

.vote-period-badge {
    background: #e6005c !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

.vote-period-text {
    color: #475569 !important;
    font-weight: bold !important;
}

.vote-theme-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.vote-theme-label {
    background: #1e293b !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.vote-theme-text {
    font-size: 13.5px !important;
    font-weight: bold !important;
    color: #1e293b !important;
    line-height: 1.5 !important;
}

/* お題セクション */
.vote-category-section {
    margin-bottom: 24px !important;
}

.vote-category-title {
    font-size: 14.5px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #e6005c 0%, #ff2a70 100%) !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    margin: 0 0 12px 0 !important;
    box-shadow: 0 2px 6px rgba(230, 0, 92, 0.2) !important;
}

/* --------------------------------------------------
   1. 【PC版】3列グリッド (900px以上: 横並びカード)
   -------------------------------------------------- */
.vote-rank-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.vote-rank-card {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    box-sizing: border-box !important;
}

    .vote-rank-card:hover {
        border-color: #fbcfe8 !important;
        box-shadow: 0 4px 12px rgba(230, 0, 92, 0.1) !important;
        transform: translateY(-2px) !important;
    }

/* 順位バッジ */
.vote-rank-badge {
    position: absolute !important;
    top: -6px !important;
    left: -6px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    z-index: 5 !important;
}

    .vote-rank-badge small {
        font-size: 9px !important;
        font-weight: normal !important;
    }

.vote-rank-card.is-rank-1 {
    border-color: #fef08a !important;
    background: #fffdf5 !important;
}

    .vote-rank-card.is-rank-1 .vote-rank-badge {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    }

.vote-rank-card.is-rank-2 {
    border-color: #e2e8f0 !important;
}

    .vote-rank-card.is-rank-2 .vote-rank-badge {
        background: linear-gradient(135deg, #94a3b8, #64748b) !important;
    }

.vote-rank-card.is-rank-3 {
    border-color: #fed7aa !important;
}

    .vote-rank-card.is-rank-3 .vote-rank-badge {
        background: linear-gradient(135deg, #f97316, #c2410c) !important;
    }

.vote-rank-card.is-rank-other .vote-rank-badge {
    background: #64748b !important;
}

/* PC写真枠 */
.vote-rank-photo {
    width: 65px !important;
    height: 85px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
}

    .vote-rank-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

.vote-rank-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
}

.vote-rank-shop a {
    font-size: 15px !important;
    color: #000 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

.vote-rank-name a {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #f02b66 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

    .vote-rank-name a:hover {
        color: #e6005c !important;
    }

.vote-rank-votes {
    font-size: 15px !important;
    color: #e6005c !important;
    font-weight: bold !important;
    margin-top: 2px !important;
}

    .vote-rank-votes strong {
        font-size: 13px !important;
    }


/* ==========================================================================
   2. タブレット対応 (600px - 899px: 横2列維持)
   ========================================================================== */
@media screen and (max-width: 899px) and (min-width: 600px) {
    .vote-rank-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}


/* ==========================================================================
   3. ★【スマホ専用 縦長カード ＆ 1行横スクロール化】(599px以下)
   文字のはみ出し・隣のカードとの重なりを完全防止した適正サイズ版
   ========================================================================== */
@media screen and (max-width: 599px) {

    /* お題セクションの縦余白 */
    .vote-category-section {
        margin-bottom: 20px !important;
    }

    .vote-category-title {
        font-size: 13.5px !important;
        padding: 7px 12px !important;
        margin: 0 0 10px 0 !important;
    }

    /* 各お題のランキング枠（1行横スクロールFlex） */
    .vote-rank-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 10px !important;
        padding: 8px 12px 12px 6px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ★カード本体: 幅135pxに設定（はみ出し防止） */
    .vote-rank-card {
        flex: 0 0 135px !important;
        width: 135px !important;
        min-width: 135px !important;
        max-width: 135px !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 6px !important;
        gap: 5px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* ★枠外への文字漏れを完全遮断 */
        background: #ffffff !important;
    }

    /* ★写真枠: 縦長比率完全固定 */
    .vote-rank-photo {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 4 !important; /* 縦長写真の黄金比 */
        border-radius: 4px !important;
        overflow: hidden !important;
        background: #f1f5f9 !important;
        flex-shrink: 0 !important;
    }

        .vote-rank-photo img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            display: block !important;
        }

    /* 順位バッジ */
    .vote-rank-badge {
        top: 2px !important;
        left: 2px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 18px !important;
    }

        .vote-rank-badge small {
            font-size: 15px !important;
        }

    /* ★テキスト情報エリア（幅100%・枠内に収める） */
    .vote-rank-info {
        width: 100% !important;
        min-width: 0 !important;
        padding: 2px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    /* 店名：11px・1行省略（隣のカードに被らない） */
    .vote-rank-shop,
    .vote-rank-shop a {
        font-size: 15px !important;
        color: #000 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* はみ出たら ... で丸める */
        display: block !important;
        width: 100% !important;
    }

    /* キャスト名：12.5px太字・赤文字・1行省略 */
    .vote-rank-name,
    .vote-rank-name a {
        font-size: 15px !important;
        font-weight: bold !important;
        color: #e5004f !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        width: 100% !important;
    }

    /* 票数 */
    .vote-rank-votes {
        font-size: 11px !important;
        color: #e5004f !important;
        font-weight: bold !important;
        margin-top: 1px !important;
        white-space: nowrap !important;
    }

        .vote-rank-votes strong {
            font-size: 13px !important;
        }

    /* スクロールバー装飾 */
    .vote-rank-grid::-webkit-scrollbar {
        height: 3px !important;
        display: block !important;
    }

    .vote-rank-grid::-webkit-scrollbar-track {
        background: #f1f5f9 !important;
    }

    .vote-rank-grid::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 2px !important;
    }
}

/* ==========================================================================
   ポッキリ料金チケットリスト (全端末 横1件・縦並び完全版)
   ========================================================================== */

/* --------------------------------------------------
   1. 親コンテナ (全端末 1列・縦並び固定)
   -------------------------------------------------- */
.TopPokkiriGrid {
    display: flex !important;
    flex-direction: column !important; /* ★横1件・縦に並べる */
    gap: 14px !important;
    width: 100% !important;
    margin: 14px 0 16px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    clear: both !important;
}

    /* --------------------------------------------------
   2. 個別チケットカード本体 (.ShopTicketOfferCard)
   -------------------------------------------------- */
    .TopPokkiriGrid .ShopTicketOfferCard {
        display: flex !important;
        width: 100% !important;
        background-color: #fffafc !important;
        border: 1px solid #e5004f !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important;
        box-shadow: 0 2px 8px rgba(229, 0, 79, 0.08) !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
        text-decoration: none !important;
    }

        .TopPokkiriGrid .ShopTicketOfferCard:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 16px rgba(229, 0, 79, 0.18) !important;
            border-color: #be123c !important;
        }

        /* カード全体を覆うクリッカブルリンク */
        .TopPokkiriGrid .ShopTicketOfferCard a {
            display: flex !important;
            width: 100% !important;
            height: 100% !important;
            text-decoration: none !important;
            color: inherit !important;
        }

    /* --------------------------------------------------
   3. 左側：SPECIAL OFFER帯 (.ShopTicketOfferSide)
   -------------------------------------------------- */
    .TopPokkiriGrid .ShopTicketOfferSide {
        background: linear-gradient(135deg, #f02b66, #d80046) !important;
        color: #ffffff !important;
        width: 60px !important;
        min-width: 60px !important;
        flex: 0 0 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 12px 4px !important;
        box-sizing: border-box !important;
        user-select: none !important;
    }

        .TopPokkiriGrid .ShopTicketOfferSide span {
            font-size: 11px !important;
            font-weight: 900 !important;
            letter-spacing: 0.8px !important;
            line-height: 1.25 !important;
            text-transform: uppercase !important;
            display: block !important;
            color: #ffffff !important;
        }

    /* --------------------------------------------------
   4. 右側：チケットメインエリア (.ShopTicketOfferMain)
   -------------------------------------------------- */
    .TopPokkiriGrid .ShopTicketOfferMain {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 12px 18px !important;
        position: relative !important;
        border-left: 2px dashed #ffd6e0 !important; /* ミシン目ライン */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        background-color: #ffffff !important;
        box-sizing: border-box !important;
    }

        /* チケット上下の半円切り欠き（純CSS） */
        .TopPokkiriGrid .ShopTicketOfferMain::before,
        .TopPokkiriGrid .ShopTicketOfferMain::after {
            content: "" !important;
            position: absolute !important;
            left: -6px !important;
            width: 10px !important;
            height: 10px !important;
            background-color: #ffffff !important;
            border: 1px solid #e5004f !important;
            border-radius: 50% !important;
            z-index: 2 !important;
            box-sizing: border-box !important;
        }

        .TopPokkiriGrid .ShopTicketOfferMain::before {
            top: -6px !important;
        }

        .TopPokkiriGrid .ShopTicketOfferMain::after {
            bottom: -6px !important;
        }

    /* ヘッダーエリア */
    .TopPokkiriGrid .ShopTicketOfferHead {
        margin-bottom: 6px !important;
    }

    /* 店舗名 ＆ 営業バッジ横並び行 */
    .TopPokkiriGrid .ShopTicketOfferLabel {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.3 !important;
    }

    /* 店舗名テキスト */
    .TopPokkiriGrid .ShopTicketShopName {
        font-size: 15px !important;
        font-weight: bold !important;
        color: #475569 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ★「本日営業」バッジ (お店ランキングと完全統一) */
    .TopPokkiriGrid .ShopCalendarWorkFlgOn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #e5004f !important;
        color: #ffffff !important;
        font-size: 10.5px !important;
        font-weight: bold !important;
        padding: 2px 7px !important;
        border-radius: 4px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ★「店休日」バッジ (お店ランキングと完全統一) */
    .TopPokkiriGrid .ShopCalendarWorkFlgOff {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #64748b !important;
        color: #ffffff !important;
        font-size: 10.5px !important;
        font-weight: bold !important;
        padding: 2px 7px !important;
        border-radius: 4px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ポッキリ表示タイトル (太字赤) */
    .TopPokkiriGrid .ShopTicketOfferTitle {
        margin: 0 !important;
        font-size: 16px !important;
        color: #e5004f !important;
        font-weight: 900 !important;
        line-height: 1.4 !important;
        word-break: break-all !important;
        transition: color 0.15s ease !important;
    }

    .TopPokkiriGrid .ShopTicketOfferCard:hover .ShopTicketOfferTitle {
        color: #be123c !important;
        text-decoration: underline !important;
    }

    /* 下部：詳細説明文 */
    .TopPokkiriGrid .ShopTicketOfferBody {
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px dashed #f1f5f9 !important;
        font-size: 12.5px !important;
        color: #334155 !important;
        line-height: 1.6 !important;
        word-break: break-all !important;
    }

    /* --------------------------------------------------
   5. もっと見るボタン (統制デザイン完全適用)
   -------------------------------------------------- */
    .TopPokkiriGrid + .CommonMoreBtnContainer,
    .CommonContentsContainer .CommonMoreBtnContainer {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 16px !important;
        clear: both !important;
    }

.CommonContentsContainer .CommonMoreBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 24px !important;
    font-size: 13.5px !important;
    font-weight: bold !important;
    background: linear-gradient(to bottom, #f02b66, #d80046) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(233, 30, 99, 0.35) !important;
    border: none !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease, transform 0.1s ease !important;
    box-sizing: border-box !important;
}

    .CommonContentsContainer .CommonMoreBtn:hover {
        opacity: 0.92 !important;
        transform: translateY(-1px) !important;
    }

    .CommonContentsContainer .CommonMoreBtn svg {
        width: 16px !important;
        height: 16px !important;
        fill: #ffffff !important;
        transition: transform 0.2s ease !important;
    }

    .CommonContentsContainer .CommonMoreBtn:hover svg {
        transform: translateX(3px) !important;
    }


/* ==========================================================================
   6. 【タブレット対応】(600px - 899px)
   ========================================================================== */
@media screen and (min-width: 600px) and (max-width: 899px) {
    .TopPokkiriGrid {
        gap: 12px !important;
    }

        .TopPokkiriGrid .ShopTicketOfferSide {
            width: 56px !important;
            min-width: 56px !important;
            flex: 0 0 56px !important;
        }

        .TopPokkiriGrid .ShopTicketOfferMain {
            padding: 12px 16px !important;
        }

        .TopPokkiriGrid .ShopTicketOfferTitle {
            font-size: 16px !important;
        }
}


/* ==========================================================================
   7. ★【スマホ対応】(599px以下)
   ========================================================================== */
@media screen and (max-width: 599px) {
    .TopPokkiriGrid {
        gap: 10px !important;
        margin: 10px 0 14px 0 !important;
    }

        .TopPokkiriGrid .ShopTicketOfferSide {
            width: 48px !important;
            min-width: 48px !important;
            flex: 0 0 48px !important;
            padding: 8px 2px !important;
        }

            .TopPokkiriGrid .ShopTicketOfferSide span {
                font-size: 9.5px !important;
                letter-spacing: 0.3px !important;
            }

        .TopPokkiriGrid .ShopTicketOfferMain {
            padding: 10px 12px !important;
        }

        .TopPokkiriGrid .ShopTicketShopName {
            font-size: 15px !important;
        }

        .TopPokkiriGrid .ShopCalendarWorkFlgOn,
        .TopPokkiriGrid .ShopCalendarWorkFlgOff {
            font-size: 9.5px !important;
            padding: 1px 5px !important;
        }

        .TopPokkiriGrid .ShopTicketOfferTitle {
            font-size: 16px !important;
        }

        .TopPokkiriGrid .ShopTicketOfferBody {
            font-size: 11.5px !important;
        }

    .CommonContentsContainer .CommonMoreBtn {
        width: 100% !important;
        max-width: 280px !important;
        height: 42px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   ブログ美女コレクション 完全独立スタイル（クリア写真 ＆ 縦長300x450準拠）
========================================================================== */

/* グリッドコンテナ（PC: 横6列 / スマホ: 横スクロール） */
.BlogBeauty_Container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important; /* PC: 6列 */
    gap: 12px !important;
    width: 100% !important;
    margin: 12px 0 16px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important; /* 全カードの高さを最大に揃える */
}

/* カード本体（白カード・等高Flexbox） */
.BlogBeauty_Card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    box-sizing: border-box !important;
    display: flex !important; /* 縦揃えのFlexbox化 */
    flex-direction: column !important;
    height: auto !important; /* stretchに追従して均等化 */
}

    .BlogBeauty_Card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(230, 0, 92, 0.12) !important;
        border-color: #fbcfe8 !important;
    }

/* 全域クリックリンク（カード全体を確実にブログ詳細へ） */
.BlogBeauty_Link {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* カードの高さ目一杯に伸ばす */
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
}

/* 写真枠（黒マスク完全排除・縦長 300 x 450 の比率 2:3 クリア表示） */
.BlogBeauty_PhotoWrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 2 / 3 !important; /* 縦長比率 2:3 */
    height: auto !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
    flex-shrink: 0 !important; /* 写真が縮むのを防止 */
}

    .BlogBeauty_PhotoWrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.3s ease !important;
    }

.BlogBeauty_Card:hover .BlogBeauty_PhotoWrap img {
    transform: scale(1.04) !important;
}

/* 要チェックバッジ（★右上に配置して左上のハートとの被りを完全排除） */
.BlogBeauty_Badge {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important; /* ★右上に配置 */
    left: auto !important;
    z-index: 3 !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    font-size: 9.5px !important;
    font-weight: 900 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* 白背景情報ボディ（写真の下に配置して視認性MAX） */
.BlogBeauty_Body {
    padding: 8px 8px 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* ここが伸びて高さをピッタリ揃える */
    background: #ffffff !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* キャスト名（マゼンタピンク強調） */
.BlogBeauty_Cast {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #e6005c !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.BlogBeauty_Card:hover .BlogBeauty_Cast {
    text-decoration: underline !important;
}

/* 店舗名 */
.BlogBeauty_Shop {
    font-size: 15px !important;
    color: #000 !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

/* ブログタイトル（1行省略） */
.BlogBeauty_Title {
    margin: 0 0 4px 0 !important;
    font-size: 15px !important;
    font-weight: normal !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 投稿日 */
.BlogBeauty_Date {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin-top: auto !important; /* カード最下部に固定 */
    line-height: 1 !important;
}

/* ==========================================================================
   タブレット対応 (600px - 899px) - 横3列
========================================================================== */
@media screen and (max-width: 899px) and (min-width: 600px) {
    .BlogBeauty_Container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    .BlogBeauty_Body {
        padding: 9px 10px 11px 10px !important;
    }

    .BlogBeauty_Cast {
        font-size: 13.5px !important;
    }
}

/* ==========================================================================
   スマホ対応 (600px未満) - 横スクロール（高さ均等化対応）
========================================================================== */
@media screen and (max-width: 599px) {
    .BlogBeauty_Container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        align-items: stretch !important; /* 全カードの高さを一番高いカードに強制統一 */
        gap: 10px !important;
        margin: 8px 0 12px 0 !important;
        padding-bottom: 6px !important;
    }

        /* スクロールバー非表示 */
        .BlogBeauty_Container::-webkit-scrollbar {
            display: none !important;
        }

    .BlogBeauty_Card {
        flex: 0 0 140px !important;
        width: 140px !important;
        scroll-snap-align: start !important;
        display: flex !important; /* 中身を底辺まで伸ばす */
        flex-direction: column !important;
        height: auto !important; /* stretchを有効化 */
    }

    .BlogBeauty_Body {
        padding: 6px 6px 8px 6px !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important; /* 下の余白を埋めて高さを一致させる */
    }

    .BlogBeauty_Cast {
        font-size: 15px !important;
    }

    .BlogBeauty_Shop {
        font-size: 15px !important;
    }

    .BlogBeauty_Title {
        font-size: 13px !important;
    }
}


/* ==========================================================================
   顔出しピックアップ専用 バッジスタイル
   ========================================================================== */

/* 写真左上に配置する高級感のあるピンク赤バッジ */
.TopBBFaceOnOverlayBadge {
    position: absolute !important;
    bottom: 5px !important;
    left: 6px !important;
    z-index: 5 !important;
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    color: #ffffff !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    padding: 3px 7px 2px 7px !important;
    border-radius: 4px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.4) !important;
    pointer-events: none !important;
    margin: 0 auto 0 auto;
}

/* スマホ表示 (600px未満) */
@media screen and (max-width: 599px) {
    .TopBBFaceOnOverlayBadge {
        bottom: 5px !important;
        left: 4px !important;
        font-size: 8.5px !important;
        padding: 2px 5px !important;
        margin:0 auto 0 auto;
    }
}


/* ==========================================================================
   顔出しピックアップ専用 バッジスタイル
   ========================================================================== */

/* 写真左上に配置する高級感のあるピンク赤バッジ */
.TopFaceOnOverlayBadge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 5 !important;
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    color: #ffffff !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    padding: 3px 7px 2px 7px !important;
    border-radius: 4px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.4) !important;
    pointer-events: none !important;
}

/* スマホ表示 (600px未満) */
@media screen and (max-width: 599px) {
    .TopFaceOnOverlayBadge {
        top: 4px !important;
        left: 4px !important;
        font-size: 8.5px !important;
        padding: 2px 5px !important;
    }
}











/* ==========================================================================
   キャスト一問一答 Q&Aシート スタイル（完全版・間延び空白完全排除）
========================================================================== */

/* --------------------------------------------------
   スマホ版 (600px未満) : 横スクロール
-------------------------------------------------- */
.StaffQAScrollContainer {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding: 10px 0 10px 0 !important;
    box-sizing: border-box !important;
}

    .StaffQAScrollContainer::-webkit-scrollbar {
        display: none !important;
    }

.StaffQAScrollTrack {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: flex-start !important; /* カードが中身の高さに合わせて自律フィット */
    height: auto !important;
}

/* カード本体（無駄な高さを排除し中身にジャストフィット） */
.StaffQASheetCard {
    flex: 0 0 280px !important;
    width: 280px !important;
    height: auto !important;
    min-height: 0 !important;
    scroll-snap-align: start !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* カード上部: プロフィールヘッダー */
.StaffQACardHeader {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #edf2f7 !important;
    flex-shrink: 0 !important;
}

/* 丸いキャスト写真枠 */
.StaffQAAvatarWrap {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid #e11d48 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 5px rgba(225, 29, 72, 0.18) !important;
}

.StaffQAAvatarImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 右横テキスト情報 */
.StaffQAProfileMeta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex-grow: 1 !important;
}

.StaffQAGenreBadge {
    align-self: flex-start !important;
    background-color: #fce7f3 !important;
    color: #be185d !important;
    font-size: 9.5px !important;
    font-weight: bold !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.StaffQACastName {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #0f172a !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

    .StaffQACastName:hover {
        color: #e11d48 !important;
    }

.StaffQAShopName {
    font-size: 12px !important;
    color: #64748b !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.StaffQAStatusBox {
    margin-top: 2px !important;
}

/* カード下部: Q&Aリスト（無駄な縦空白を削り170pxでコンパクトに切る） */
.StaffQAListBody {
    position: relative !important;
    padding: 10px 10px 4px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    max-height: 170px !important; /* 初期表示を質問2問分程度に詰め、空白を完全消去 */
    overflow: hidden !important;
    transition: max-height 0.35s ease-in-out !important;
}

    /* 折りたたみ時の下部フェードマスク（ボタン直上に薄く敷く） */
    .StaffQAListBody::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 35px !important;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff) !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease !important;
    }

/* 展開時：制限解除 */
.StaffQASheetCard.is-expanded .StaffQAListBody {
    max-height: 3000px !important;
    padding-bottom: 10px !important;
}

    .StaffQASheetCard.is-expanded .StaffQAListBody::after {
        opacity: 0 !important;
    }

/* QA吹き出しボックス */
.StaffQAItem {
    background: #fdf2f4 !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
}

/* 質問行 */
.StaffQAQRow {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
}

.StaffQMark {
    background-color: #f59e0b !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.StaffQText {
    font-size: 12px !important;
    font-weight: bold !important;
    color: #334155 !important;
    line-height: 1.35 !important;
}

/* 回答行 */
.StaffQAARow {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

.StaffAMark {
    background-color: #e11d48 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.StaffAText {
    font-size: 12.5px !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    word-break: break-all !important;
}

/* もっと見るボタン（中身の真下にピタッと配置し空洞を作らない） */
.StaffQAToggleBtn {
    width: 100% !important;
    padding: 8px 12px !important;
    background: #f8fafc !important;
    border: none !important;
    border-top: 1px solid #edf2f7 !important;
    color: #e11d48 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    outline: none !important;
    transition: background 0.15s ease !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    border-radius: 0 0 11px 11px !important;
}

    .StaffQAToggleBtn:hover {
        background: #eff6ff !important;
    }

    .StaffQAToggleBtn .toggle-arrow {
        width: 16px !important;
        height: 16px !important;
        fill: #e11d48 !important;
        transition: transform 0.25s ease !important;
    }

.StaffQASheetCard.is-expanded .StaffQAToggleBtn .toggle-arrow {
    transform: rotate(180deg) !important;
}

/* --------------------------------------------------
   タブレット対応 (600px - 899px) : 横2列
-------------------------------------------------- */
@media screen and (min-width: 600px) and (max-width: 899px) {
    .StaffQAScrollContainer {
        overflow: visible !important;
        padding: 0 !important;
    }

    .StaffQAScrollTrack {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        align-items: start !important;
    }

    .StaffQASheetCard {
        flex: auto !important;
        width: 100% !important;
    }
}

/* --------------------------------------------------
   PC版対応 (900px以上) : 横3列 x 縦3列 グリッド
-------------------------------------------------- */
@media screen and (min-width: 900px) {
    .StaffQAScrollContainer {
        overflow: visible !important;
        height: auto !important;
        padding: 0 !important;
    }

    .StaffQAScrollTrack {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        align-items: start !important;
        height: auto !important;
    }

    .StaffQASheetCard {
        flex: auto !important;
        width: 100% !important;
        height: auto !important;
    }
}
/* ==========================================================================
   キャスト一問一答 Q&Aシート スタイル（完全版・ヘッダー高さ完全統一）
========================================================================== */

/* --------------------------------------------------
   スマホ版 (600px未満) : 横スクロール
-------------------------------------------------- */
.StaffQAScrollContainer {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding: 10px 0 10px 0 !important;
    box-sizing: border-box !important;
}

    .StaffQAScrollContainer::-webkit-scrollbar {
        display: none !important;
    }

.StaffQAScrollTrack {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: flex-start !important;
    height: auto !important;
}

/* カード本体 */
.StaffQASheetCard {
    flex: 0 0 280px !important;
    width: 280px !important;
    height: auto !important;
    min-height: 0 !important;
    scroll-snap-align: start !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ★カード上部: プロフィールヘッダー（出勤バッジ有無によるガタつきを完全解消） */
.StaffQACardHeader {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #edf2f7 !important;
    flex-shrink: 0 !important;
    min-height: 86px !important; /* ★ここを固定して全カードのヘッダー高さをミリ単位で完全統一 */
    box-sizing: border-box !important;
}

/* 丸いキャスト写真枠 */
.StaffQAAvatarWrap {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid #e11d48 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 5px rgba(225, 29, 72, 0.18) !important;
}

.StaffQAAvatarImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 右横テキスト情報 */
.StaffQAProfileMeta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex-grow: 1 !important;
    justify-content: center !important;
}

.StaffQAGenreBadge {
    align-self: flex-start !important;
    background-color: #fce7f3 !important;
    color: #be185d !important;
    font-size: 9.5px !important;
    font-weight: bold !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.StaffQACastName {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #0f172a !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

    .StaffQACastName:hover {
        color: #e11d48 !important;
    }

.StaffQAShopName {
    font-size: 12px !important;
    color: #64748b !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

/* 出勤バッジ枠（高さ固定領域を維持） */
.StaffQAStatusBox {
    min-height: 18px !important; /* ★バッジがない時も高さをキープ */
    display: flex !important;
    align-items: center !important;
    margin-top: 1px !important;
}

/* カード下部: Q&Aリスト（初期高さを170pxの固定長に統一） */
.StaffQAListBody {
    position: relative !important;
    padding: 10px 10px 4px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    max-height: 170px !important; /* 全カードで完全に統一 */
    overflow: hidden !important;
    transition: max-height 0.35s ease-in-out !important;
}

    /* 折りたたみ時の下部フェードマスク */
    .StaffQAListBody::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 35px !important;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff) !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease !important;
    }

/* 展開時：制限解除 */
.StaffQASheetCard.is-expanded .StaffQAListBody {
    max-height: 3000px !important;
    padding-bottom: 10px !important;
}

    .StaffQASheetCard.is-expanded .StaffQAListBody::after {
        opacity: 0 !important;
    }

/* QA吹き出しボックス */
.StaffQAItem {
    background: #fdf2f4 !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
}

/* 質問行 */
.StaffQAQRow {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
}

.StaffQMark {
    background-color: #f59e0b !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.StaffQText {
    font-size: 12px !important;
    font-weight: bold !important;
    color: #334155 !important;
    line-height: 1.35 !important;
}

/* 回答行 */
.StaffQAARow {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

.StaffAMark {
    background-color: #e11d48 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.StaffAText {
    font-size: 12.5px !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    word-break: break-all !important;
}

/* もっと見るボタン */
.StaffQAToggleBtn {
    width: 100% !important;
    padding: 8px 12px !important;
    background: #f8fafc !important;
    border: none !important;
    border-top: 1px solid #edf2f7 !important;
    color: #e11d48 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    outline: none !important;
    transition: background 0.15s ease !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    border-radius: 0 0 11px 11px !important;
}

    .StaffQAToggleBtn:hover {
        background: #eff6ff !important;
    }

    .StaffQAToggleBtn .toggle-arrow {
        width: 16px !important;
        height: 16px !important;
        fill: #e11d48 !important;
        transition: transform 0.25s ease !important;
    }

.StaffQASheetCard.is-expanded .StaffQAToggleBtn .toggle-arrow {
    transform: rotate(180deg) !important;
}

/* --------------------------------------------------
   タブレット対応 (600px - 899px) : 横2列
-------------------------------------------------- */
@media screen and (min-width: 600px) and (max-width: 899px) {
    .StaffQAScrollContainer {
        overflow: visible !important;
        padding: 0 !important;
    }

    .StaffQAScrollTrack {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        align-items: start !important;
    }

    .StaffQASheetCard {
        flex: auto !important;
        width: 100% !important;
    }
}

/* --------------------------------------------------
   PC版対応 (900px以上) : 横3列 x 縦3列 グリッド
-------------------------------------------------- */
@media screen and (min-width: 900px) {
    .StaffQAScrollContainer {
        overflow: visible !important;
        height: auto !important;
        padding: 0 !important;
    }

    .StaffQAScrollTrack {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        align-items: start !important;
        height: auto !important;
    }

    .StaffQASheetCard {
        flex: auto !important;
        width: 100% !important;
        height: auto !important;
    }
}








/* ==========================================================================
   ブログ HOTバッジ スタイル（背景完全撤廃・スクショ完全一致版）
========================================================================== */

/* 1. 親要素（写真枠）の基準位置を強制固定 */
.TopBlogFrame,
.TopBlogImgContainer {
    position: relative !important;
}

/* 2. HOTバッジ本体（背景なし・テキストとアイコンのみ浮かせる） */
.blog-hot-badge {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important; /* ★背景完全排除 */
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
    line-height: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

    /* SVGハートアイコン */
    .blog-hot-badge svg {
        width: 15px !important;
        height: 15px !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
    }

    /* 数字部分 */
    .blog-hot-badge .hot-num {
        font-size: 13px !important;
        font-weight: 900 !important;
        letter-spacing: -0.2px !important;
        line-height: 1 !important;
    }

    /* HOT! テキスト部分 */
    .blog-hot-badge .hot-text {
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    /* --------------------------------------------------
   1. 通常（1から9件）：スクショ完全一致
   白抜き線画ハート ＋ 白文字 ＋ 濃いドロップシャドウ
-------------------------------------------------- */
    .blog-hot-badge.hot-normal {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9) !important;
    }

        .blog-hot-badge.hot-normal svg {
            fill: #ffffff !important;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) !important;
        }

    /* --------------------------------------------------
   2. 人気（10から49件）：ピンクの塗りつぶしハート
   鮮やかなピンクハート ＋ 白文字 ＋ ドロップシャドウ
-------------------------------------------------- */
    .blog-hot-badge.hot-colored {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9) !important;
    }

        .blog-hot-badge.hot-colored svg {
            fill: #ff2d55 !important; /* 鮮やかなピンクハート */
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) !important;
        }

    /* --------------------------------------------------
   3. 超人気（50件以上）：燃えるハート
   炎のような赤〜ゴールドの輝き ＋ パルスアニメーション
-------------------------------------------------- */
    .blog-hot-badge.hot-fire {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 3px rgba(255, 69, 0, 0.9) !important;
        animation: hotFlamePulse 1.2s ease-in-out infinite alternate !important;
    }

        .blog-hot-badge.hot-fire svg {
            fill: #ff3b30 !important; /* 炎のレッドハート */
            filter: drop-shadow(0 0 4px rgba(255, 69, 0, 0.9)) !important;
        }

        .blog-hot-badge.hot-fire .fire-flame {
            fill: #ffd600 !important; /* 炎のイエロー */
        }

/* 炎のパルスアニメーション */
@keyframes hotFlamePulse {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}






/* ==============================================================================
   トップ用 トロフィー獲得ダイジェスト (ヘッダー再設計・完全表示版)
   ============================================================================== */

.IndexStaffAwardSection {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* ヘッダー */
.IndexStaffAwardHeader {
    margin-bottom: 12px;
}

.IndexStaffAwardSubTitle {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #e11d48;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

/* リンク青文字・下線の完全リセット */
.IndexStaffAwardCard a,
.IndexStaffAwardCard a:visited,
.IndexStaffAwardCard a:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* --------------------------------------------------
   レイアウト切り替え：スマホ＝横スライド / PC＝4列タイル
-------------------------------------------------- */

/* スマホ (〜599px): 横スワイプ (幅を185pxに広げて窮屈さを解消) */
.IndexStaffAwardTrack {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 14px;
    scroll-snap-type: x mandatory;
}

    .IndexStaffAwardTrack::-webkit-scrollbar {
        height: 4px;
    }

    .IndexStaffAwardTrack::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }

.IndexStaffAwardCard {
    flex: 0 0 185px;
    scroll-snap-align: start;
    box-sizing: border-box;
}

/* タブレット (600px以上): タイル4列 */
@media screen and (min-width: 600px) {
    .IndexStaffAwardTrack {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        overflow: visible;
        padding: 0;
    }

    .IndexStaffAwardCard {
        flex: none;
        width: auto;
    }
}

/* PC (900px以上): タイル4列 */
@media screen and (min-width: 900px) {
    .IndexStaffAwardTrack {
        gap: 15px;
    }
}

/* --------------------------------------------------
   カード＆トロフィーヘッダー（再設計・全文字完全表示）
-------------------------------------------------- */

.IndexStaffAwardCard {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

    .IndexStaffAwardCard:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    }

.IndexStaffAwardRank_4 {
    border-top: 3px solid #818cf8;
}

.IndexStaffAwardRank_3 {
    border-top: 3px solid #f59e0b;
}

/* ★新ヘッダー設計：左右均等・2段構成で文字被りと改行を完全解消 */
.IndexStaffAwardTrophyHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #fafbfc;
    border-bottom: 1px dashed #e2e8f0;
}

/* アイコン */
.IndexStaffAwardIcon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .IndexStaffAwardIcon img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

/* 右側テキストコンテナ */
.IndexStaffAwardTrophyMeta {
    flex-grow: 1;
    overflow: visible;
    min-width: 0;
}

/* 1行目: バッジ ＋ 対象年月（横並びで改行を絶対禁止） */
.IndexStaffAwardTrophyTopLine {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 2px;
}

/* ランクバッジ（文字の縦割れを防止） */
.IndexStaffAwardRankBadge {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.IndexStaffAwardBadge_4 {
    background: #818cf8 !important;
}

.IndexStaffAwardBadge_3 {
    background: #f59e0b !important;
}

/* 年月テキスト（「月」の縦割れを防止） */
.IndexStaffAwardTrophyDate {
    font-size: 10px !important;
    font-weight: bold !important;
    color: #b45309 !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}

.IndexStaffAwardRank_4 .IndexStaffAwardTrophyDate {
    color: #4338ca !important;
}

/* ★2行目: トロフィー名（「…」でカットせず全文字を100%完全表示） */
.IndexStaffAwardTrophyTitle {
    font-size: 11px !important;
    font-weight: bold !important;
    color: #1e293b !important;
    white-space: normal !important; /* 改行を許可し、文字を切らない */
    word-break: break-all !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

/* 写真 (300x450比率厳守) */
.IndexStaffAwardPhotoWrap {
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #f1f5f9;
}

    .IndexStaffAwardPhotoWrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* --------------------------------------------------
   付随情報ボディ部（上部キャストと完全一致）
-------------------------------------------------- */

.IndexStaffAwardCard .TenpoStaff_Body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* 業種マーク */
.IndexStaffAwardCard .GSMark {
    display: inline-block !important;
    align-self: flex-start;
    font-size: 11px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    padding: 2px 8px !important;
    border-radius: 3px !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}

/* キャスト名（上部画像と同じ赤文字太字） */
.IndexStaffAwardCard .CustomShopStaffName {
    font-size: 14.5px !important;
    font-weight: bold !important;
    color: #d80046 !important;
    margin: 2px 0 2px 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 店舗名 */
.IndexStaffAwardCard .TopPickupStaffShop {
    font-size: 15px !important;
    color: #333333 !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}

/* 出勤ステータス */
.IndexStaffAwardCard .TenpoStaffStatus {
    margin: 2px 0 4px 0 !important;
}

/* 年齢・身長・3サイズ（青文字を解除し黒テキスト化） */
.IndexStaffAwardCard .CustomShopStaffProf {
    font-size: 14px !important;
    color: #333333 !important;
    line-height: 1.4 !important;
    margin: 1px 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

/* バッジ（新人・未経験・体験・BLOG）：赤枠＋赤文字・横並び */
.IndexStaffAwardCard .ShopStaffMarkIcon {
    display: inline-block !important;
    padding: 1px 6px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #e11d48 !important;
    background-color: #ffffff !important;
    border: 1px solid #f43f5e !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
}


/* ひとことPR */
.IndexStaffAwardCard .CustomShopStaffPRText {
    font-size: 10px !important;
    color: #666666 !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
    border-top: 1px dashed #f1f5f9 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}