/* css/top.css */

.top-main {
    max-width: 1400px;
    margin: 0 auto;
    /* ヘッダー・ナビ固定分の余白は body で設定済みだが、
       コンテンツ上部の余白調整として追加しても良い */
    padding-bottom: 4rem;
}

/* --- Filter Buttons (シンプル & 線画アイコン) --- */
.filters-section {
    padding: 3rem 3rem 2rem 3rem;
    display: flex; align-items: center; gap: 1.5rem;
}
.main-filters {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-btn {
    background: #fff;
    border: 1px solid var(--border-subtle);
    
    /* ★通常時はグレー★ */
    color: var(--text-muted);
    
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.3s ease;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .filter-btn:hover {
        border-color: var(--color-main);
        color: var(--color-main);
        background: #eff6ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
    }
}

/* ★ SVGアイコン共通設定 (線画スタイル) ★ */
.filter-btn svg {
    width: 18px;
    height: 18px;
    fill: none;            /* 塗りつぶしなし */
    stroke: currentColor;  /* 文字色に合わせる (グレー -> 青) */
    stroke-width: 2;       /* 線の太さ */
    stroke-linecap: round; /* 線の端を丸く */
    stroke-linejoin: round;/* 角を丸く */
    transition: 0.3s;
}

/* --- Top Grid Layout --- */
/* Columns: 
   Firm(1.8) 
   Rank(1.2) -> 幅確保 
   HighScores(2) 
   Payments(1.5) 
   Price(0.9) -> 狭く 
   Coupon(1.2) 
   Action(0.8) 
*/
.list-header, .firm-row {
    display: grid;
    /* 8カラム: [ロゴ] [企業名] [ランク] [高評価] [決済] [最安値] [クーポン] [購入] */
    grid-template-columns: 70px 1.4fr 1.2fr 2.1fr 1.5fr 0.9fr 1.2fr 0.8fr;
    gap: 1.5rem;
    align-items: center;
}

/* Header Alignment Fix */
.list-header {
    margin: 0 3rem;
    padding: 1rem 2rem;
    border: 1px solid transparent;
}

/* --- Common Cell Styles --- */
.list-header > div,
.firm-row > div {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 40px;
}

/* 縦の区切り線 */
.list-header > div:not(:last-child)::after,
.firm-row > div:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -0.75rem; 
    top: 25%;
    height: 50%;
    width: 1px;
    background-color: #e2e8f0;
}

/* ロゴ列の右の仕切り線は不要（全サイズ共通） */
.list-header > .col-logo::after,
.firm-row > .col-logo::after {
    display: none !important;
}
/* 企業名列をロゴ側に引き寄せ（アイコンと名前の間の余白を縮小） */
.list-header > .col-firm,
.firm-row > .col-firm {
    margin-left: -0.8rem;
}

/* --- Alignment (配置設定) --- */
/* 左寄せ */
.col-logo {
    justify-content: center;
}
.col-firm,
.col-plan {
    justify-content: flex-start;
}

/* 中央寄せ */
.col-rank,
.col-features,
.col-payments,
.col-promo,
.col-action {
    justify-content: center;
}


/* --- Row Content Styling --- */

/* Firm Info */
.firm-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Rank (比較ページと同じデザイン) */
.rating-box {
    /* セル自体は中央寄せ設定済み */
}
.rank-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 塊の中身は左揃え */
    gap: 2px;
}
.rank-top-row {
    display: flex;
    align-items: flex-end; /* 数字と星の底辺揃え */
    gap: 5px; 
    white-space: nowrap;
}
.rank-top-row .score {
    margin-right: 0 !important;
    line-height: 1;
}

/* High Scores (高評価項目) */
.col-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

/* ★ スコアタグのデザイン (ミントグリーン) ★ */
.score-tag {
    background: #effcf4;       
    color: #116838;            
    border: 1px solid #c9ebd7; 
    font-size: 0.7rem; 
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.score-tag i {
    display: none; /* アイコン非表示 */
}

/* Payments */
.col-payments {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    max-width: 220px;
    overflow: visible;
}
.payment-icon {
    font-size: 1rem;
    color: #94a3b8;
    transition: color 0.2s, transform 0.2s;
    position: relative;
    cursor: pointer;
}
.payment-icon:hover {
    color: #475569;
    transform: scale(1.1);
}

/* 決済名ツールチップ（data-tooltip）: PCはホバー、スマホは .is-payment-tip-open（common.js でタップ切替） */
.payment-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(30, 41, 59, 0.92);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    font-style: normal;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    white-space: nowrap;
    line-height: 1.2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 300;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.payment-icon.is-payment-tip-open::after {
    opacity: 1;
    visibility: visible;
}
@media (hover: hover) and (pointer: fine) {
    .payment-icon:hover::after {
        opacity: 1;
        visibility: visible;
    }
}

/* Price */
.col-plan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
/* トップ一覧・最安値（JSから出力。ベースサイズはクラスで統一） */
.col-plan-orig {
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}
.col-plan-highlight {
    font-weight: 700;
    color: var(--color-main);
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

.price-original {
    font-size: 0.8rem;
    color: #94a3b8;
    text-decoration: line-through;
    margin-bottom: 2px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    padding-left: 2px;
}
.price-row-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
}
.price-crown {
    color: #F2B505;
    font-size: 1rem;
}
.price-discounted {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-dark);
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

/* Coupon */
.promo-btn {
    background: #fff;
    border: 1px solid var(--color-main);
    color: var(--color-main);
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    width: 100%;
    max-width: 140px; 
    text-align: center;
    font-weight: 700;
    transition: 0.3s;
}
.promo-btn:hover {
    background: var(--color-main);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
.promo-code {
    display: block;
    font-size: 0.7rem;
    margin-top: 2px;
    opacity: 0.9;
    font-family: monospace;
}

/* Action Button */
.action-btn {
    background: var(--color-main);
    color: #ffffff;
    border: 1px solid transparent;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    width: 100%;
    max-width: 120px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-btn:hover {
    background: var(--color-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3);
}

/* Responsive Mobile (トップページ専用) */
/* ★修正: common.cssと競合して食い込みの原因になっていた不要な記述を削除・整理 */
@media (max-width: 1200px) {
    .filters-section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* ▼▼▼ ヘッダーとデータ行を「同じ幅のGrid」で完全同期させる ▼▼▼ */
    /* ※ 外側の余白や背景色は common.css に任せるため、ここではGrid幅だけ指定 */
    .list-header, .firm-row {
        display: grid !important;
        grid-template-columns: 70px 160px 180px 280px 220px 120px 200px 120px !important;
        width: max-content !important;
        gap: 0 !important;
    }

    /* ▼▼▼ 各セルの配置設定 ▼▼▼ */
    .list-header > div,
    .firm-row > div {
        display: flex !important;
        flex-direction: row !important; /* 基本は横並び */
        align-items: center !important;
        padding: 10px 15px !important; 
        border: none !important;
        min-width: 0 !important; 
        box-sizing: border-box !important;
        white-space: nowrap !important; /* ヘッダーの文字改行防止 */
    }

    /* 最安値のセルだけ縦積みにする */
    .col-plan {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /*
     * common.css の .firm-row > div { flex-direction: row !important } より
     * 詳細度を上げないと最安値列だけ縦積みにならず、中身が右寄りに見える。
     */
    .firm-row > .col-plan,
    .list-header > .col-plan {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        letter-spacing: normal !important;
    }

    .firm-row > .col-plan > .col-plan-inner {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* ヘッダー「最安値」: 親の letter-spacing が効くと右に寄って見えるためリセット */
    .list-header > .col-plan {
        width: 100%;
    }
    
    .price-row-bottom {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    
    .price-original {
        color: #94a3b8 !important;
        text-decoration: line-through !important;
        font-size: 0.85rem !important;
        line-height: 1 !important;
        display: block !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* 行の間に縦の区切り線を強制的に引く */
    .list-header > div:not(:last-child):not(.col-logo)::after,
    .firm-row > div:not(:last-child):not(.col-logo)::after {
        content: "" !important;
        position: absolute !important;
        right: 0 !important; 
        top: 20% !important; 
        height: 60% !important; 
        width: 1px !important;
        background-color: #e2e8f0 !important;
        display: block !important;
    }
    /* ロゴ列の仕切り線は不要 */
    .list-header > .col-logo::after,
    .firm-row > .col-logo::after {
        display: none !important;
    }

    /* アクションボタンの潰れ防止 */
    .action-btn, .promo-btn {
        white-space: nowrap !important;
        width: 100% !important;
        max-width: 120px !important;
        flex-shrink: 0 !important;
    }

    /* 中央寄せ・左寄せなどの配置微調整 */
    .col-payments, .col-promo, .col-action {
        flex-wrap: wrap !important; 
        justify-content: center !important;
    }
    .col-firm {
        justify-content: flex-start !important;
    }
    .col-rank {
        justify-content: center !important;
    }
    .col-rank .rank-content-wrapper {
        align-items: flex-start !important;
    }
    .rank-top-row {
        justify-content: flex-start !important;
    }
    .col-features {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    .col-features span {
        margin: 0 !important;
        white-space: nowrap !important;
    }
}



/* =========================================
   決済アイコン：あふれた分のツールチップ表示
========================================= */
.payment-more-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

/* 「+1」のバッジデザイン */
.payment-more-badge {
    background-color: #f8fafc;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    transition: 0.2s;
    line-height: 1.2;
}

.payment-more-wrap:hover .payment-more-badge {
    background-color: #eff6ff;
    color: var(--color-main);
    border-color: #93c5fd;
}

/* ツールチップ（吹き出し）本体 */
.payment-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0px);
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 100;
    white-space: nowrap;
    pointer-events: none;
}

/* 吹き出しの矢印（下向きの三角形） */
.payment-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}
.payment-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(1.5px);
    border-width: 6px;
    border-style: solid;
    border-color: #e2e8f0 transparent transparent transparent;
    z-index: -1;
}

/* ホバー時に吹き出しをフワッと表示 */
.payment-more-wrap:hover .payment-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
}



@media (max-width: 640px) {
    /*
     * iOS Safari 等: common の main.top-main { overflow-x: auto } が横スクロールを拾うと、
     * 内側の .pronavi-table-wrapper の padding-right がスクロール末尾に反映されず、実機で右端だけ張り付くことがある。
     * トップでは横スクロールを .pronavi-table-wrapper に寄せる。
     */
    main.top-main {
        overflow-x: visible !important;
    }

    /*
     * 外側: .table-scroll-wrapper、内側: .pronavi-table-wrapper の二段で横余白。
     * sticky は内側ラッパーのパディング幅と left を一致させる。
     */
    .top-main .table-scroll-wrapper {
        /* iOS: width 100% + 左右 padding の方が calc(100% - 1rem) より端の取り方が安定しやすい */
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: 8px !important;
        box-sizing: border-box !important;
        overscroll-behavior: none !important;
    }

    /*
     * 内側ラッパーに左右パディングを付け、行がグレー枠に張り付かないようにする。
     * sticky 1列目の left / padding-left はこの値と必ず同じにする（左への滲み防止）。
     */
    .top-main .pronavi-table-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-bottom: 12px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* common の max-height:85vh + overflow-y でツールチップ等が欠けるため、スマホはページ縦スクロールに任せる */
        max-height: none !important;
    }

    /*
     * common.css（1200px以下）の .firm-row { margin: 0 1.5rem … } がトップのラッパー内でも効き、
     * 右だけ 0.75rem に上書きされて非対称になる＋iOS で scrollWidth に右余白が乗りにくい。
     * ラッパー内では左右マージンを 0 にし、ヘッダー／#firms-container を max-content + margin-right で右端を確保。
     * （iOS: overflow-x 要素の padding-right は scrollWidth に乗らず右が欠けることがあるため margin を使う）
     */
    .top-main .pronavi-table-wrapper > .list-header,
    .top-main .pronavi-table-wrapper #firms-container > .firm-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .top-main .pronavi-table-wrapper > .list-header {
        width: max-content !important;
        max-width: none !important;
        box-sizing: content-box !important;
        margin-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    }

    .top-main .pronavi-table-wrapper #firms-container {
        width: max-content !important;
        max-width: none !important;
        box-sizing: content-box !important;
        margin-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    }

    /* sticky ロゴ列: pronavi-table-wrapper の左右パディングと同じ 0.75rem */
    .top-main .firm-row > div:first-child,
    .top-main .list-header > div:first-child {
        left: -0.75rem !important;
        padding: 10px 4px 10px 0.75rem !important;
        z-index: 12 !important;
        background-color: #ffffff !important;
    }

    .top-main .list-header > div:first-child {
        background-color: #f8faff !important;
    }

    /* 横スクロール時、sticky ロゴ列より手前に他列が描画されないよう重ね順を固定 */
    .top-main .firm-row > div:not(:first-child),
    .top-main .list-header > div:not(:first-child) {
        position: relative !important;
        z-index: 1 !important;
    }

    /* データ行の sticky 列のみスクロール時に薄い影（ヘッダー col-logo には付けない） */
    .top-main .pronavi-table-wrapper.table-scrolled .firm-row > div:first-child {
        box-shadow: 4px 0 12px -2px rgba(0, 0, 0, 0.06) !important;
    }

    .top-main .pronavi-table-wrapper.table-scrolled .list-header > div:first-child {
        box-shadow: none !important;
    }

    /* 比較ページの comp-row に近い密度（やや大きめのセル・ロゴ） */
    .list-header, .firm-row {
        grid-template-columns: 52px 146px 144px 252px 175px 82px 118px 94px !important;
    }

    .list-header > div,
    .firm-row > div {
        padding: 10px 10px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }

    .top-main .list-header > div {
        padding: 9px 10px !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
    }

    /* 一括 padding が最右を潰すため、ヘッダー／データ行の右端列だけ右余白を戻す（.list-header > div の後に置く） */
    .top-main .firm-row > div:last-child,
    .top-main .list-header > div:last-child {
        padding-right: 1.25rem !important;
    }

    .top-main .common-list-header.list-header {
        font-size: 0.68rem !important;
        letter-spacing: 0.02em !important;
        margin: 0 0 12px 0 !important;
        /* 直前の .pronavi-table-wrapper > .list-header で付けた右マージンを、
           この shorthand が margin-right:0 で潰さないように再指定 */
        margin-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
        padding: 8px 0 8px 0 !important;
    }

    .top-main .table-scroll-wrapper .common-row {
        margin-bottom: 10px !important;
    }

    .firm-row .col-plan,
    .list-header > .col-plan {
        gap: 2px !important;
    }

    .firm-row .col-plan-orig {
        font-size: 0.72rem !important;
        margin-bottom: 0 !important;
    }

    .firm-row .col-plan-highlight {
        font-size: 0.95rem !important;
    }

    .firm-row .promo-btn {
        padding: 0.28rem 0.45rem !important;
        font-size: 0.68rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-shrink: 1 !important;
        border-radius: 4px !important;
    }

    .firm-row .promo-code {
        font-size: 0.62rem !important;
        margin-top: 2px !important;
    }

    .firm-row .col-action {
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .firm-row .action-btn {
        padding: 0.42rem 0.55rem !important;
        font-size: 0.74rem !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 1 !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22) !important;
    }

    .list-header > .col-plan,
    .list-header > .col-promo,
    .list-header > .col-action {
        font-size: 0.68rem !important;
    }

    /* 高評価レビュー（ミントタグ） */
    .firm-row .col-features {
        gap: 5px !important;
    }

    .firm-row .score-tag {
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
        border-radius: 5px !important;
        gap: 3px !important;
    }

    /* 決済アイコン（Font Awesome ベース） */
    .firm-row .col-payments {
        gap: 6px !important;
    }

    .firm-row .col-payments .payment-icon {
        font-size: 0.88rem !important;
        /* FA グリフは主に ::before 側のため、ツールチップ基準のボックスを確実にする */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        min-height: 1.15em !important;
        vertical-align: middle !important;
    }

    /*
     * 決済ツールチップ: ラッパーで上が欠けるため下に出す。
     * calc(100% + 8px) だけだと <i> の高さが見た目より小さく吹き出しがアイコンに被るため、
     * top:100% + margin-top で確実に下へ逃がす。ホバー scale もツールチップ位置を狂わせるので無効化。
     */
    .top-main .payment-icon::after {
        bottom: auto !important;
        top: 100% !important;
        margin-top: 10px !important;
        transform: translateX(-50%) !important;
    }

    .top-main .firm-row .col-payments .payment-icon:hover {
        transform: none !important;
    }

    .top-main .firm-row .col-payments {
        overflow: visible !important;
    }

    .firm-row .payment-more-badge {
        font-size: 0.68rem !important;
        padding: 2px 6px !important;
    }

    .firm-row .firm-logo-common {
        width: 34px !important;
        height: 34px !important;
        padding: 1.5px !important;
        border-width: 1.5px !important;
    }

    .firm-row .firm-name-common {
        font-size: 0.83rem !important;
        line-height: 1.3 !important;
    }

    .firm-row .score {
        font-size: 1.1rem !important;
        margin-right: 0!important;
    }

    .firm-row .stars-common {
        font-size: 0.74rem !important;
    }

    .firm-row .review-count-common {
        font-size: 0.76rem !important;
    }

    .firm-row .rank-content-wrapper {
        gap: 2px !important;
    }

    .firm-row .rank-top-row {
        gap: 4px !important;
    }

    /* デスクトップ用の負マージンが狭い列では企業名の左が欠けるため解除 */
    .firm-row > .col-firm,
    .list-header > .col-firm {
        margin-left: 0 !important;
    }

    /* 企業名列: クリップ＋左パディングのみでロゴに寄せる（負マージンはスクロール時に左へ滲む） */
    .top-main .firm-row > .col-firm,
    .top-main .list-header > .col-firm {
        position: relative !important;
        z-index: 1 !important;
        overflow: hidden !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding-left: 4px !important;
    }

    .top-main .firm-row .firm-name-common {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .top-main .firm-row > .col-logo,
    .top-main .list-header > .col-logo {
        overflow: hidden !important;
    }

    .firm-row > div:not(:last-child):not(.col-logo)::after,
    .list-header > div:not(:last-child):not(.col-logo)::after {
        top: 16% !important;
        height: 68% !important;
    }

    .filters-section {
        /* 横スクロール領域を画面端から端まで広げるため、親の左右余白をゼロにする */
        padding-right: 0 !important; 
        padding-left: 0 !important; 
        padding-top: 1.5rem !important; 
        padding-bottom: 1.5rem !important;
    }
    
    .main-filters {
        flex-wrap: nowrap !important; 
        overflow-x: auto !important;  
        -webkit-overflow-scrolling: touch !important; 
        scrollbar-width: none !important; 
        align-items: center !important;
        
        /* ★超重要: スクロールする箱の「内側」に余白を作り、影や線が切り取られないようにする */
        padding-top: 10px !important;    /* 浮き上がるアニメーション用の空間 */
        padding-bottom: 10px !important; /* 下に落ちる影用の空間 */
        padding-left: 1.5rem !important; /* 左端の余白 */
        padding-right: 1.5rem !important;/* 右端の余白 */
        
        gap: 0.8rem !important; 
    }
    
    .main-filters::-webkit-scrollbar {
        display: none !important;
    }
    
    .filter-btn, .filter-select {
        flex-shrink: 0 !important; 
    }
}