/* css/common.css */

:root {
    --bg-body: #f8faff;
    --bg-card: #ffffff;
    --color-main: #2563eb; 
    --color-dark: #1e3a8a;
    --color-gold: #dea500;
    
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-subtle: #e2e8f0;
    --shadow-card: 0 10px 30px rgba(30, 58, 138, 0.06);
    
    --header-height: 73px;
    --nav-height: 60px;
    --sticky-offset: calc(var(--header-height) + var(--nav-height));
    --sticky-offset-with-ticker: calc(var(--header-height) + var(--nav-height) + var(--ticker-height, 0px));

    /* 大画面: ヘッダーは全幅＋パディングで列揃え。サブナビは width100%＋左右パディングで中央寄せ */
    --header-align-max-width: 1400px;
    --header-align-padding-x: 3rem;
}

/* main の max-width に合わせて上書き（WP の body クラス） */
body.pronavi-firm-detail {
    --header-align-max-width: 1200px;
    --header-align-padding-x: 2rem;
}
/* マイページの本文幅は profile.css の .profile-container 等で制限。ヘッダー／サブナビは :root と同じ幅に揃える */
body.page-template-page-certificates,
body.page-template-page-certificates-php {
    --header-align-max-width: 1000px;
    --header-align-padding-x: 1.75rem;
}
body.page-template-page-privacy,
body.page-template-page-privacy-php,
body.page-template-page-terms,
body.page-template-page-terms-php {
    --header-align-max-width: 860px;
    --header-align-padding-x: 4rem;
}

* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* html に overflow を付けない: WP 管理バー用の html{margin-top} と組み合わさり、
   fixed の #wpadminbar の基準がずれて画面上部に余白ができることがある。
   横方向のはみ出しは body { overflow-x: hidden } と一覧用 main の指定で抑える。 */

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    position: relative;
    overflow-x: hidden; /* 横スクロール防止 */
    font-size: 14px;
    padding-top: calc(var(--header-height) + var(--nav-height));
}

body::before {
    content: ""; position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: 
        linear-gradient(115deg, transparent 75%, rgba(219, 234, 254, 0.4) 75%),
        linear-gradient(115deg, transparent 60%, rgba(239, 246, 255, 0.5) 60%),
        linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.8) 40%);
    z-index: -1; pointer-events: none;
    background-attachment: fixed; 
}

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; }
button { font-family: inherit; }

h1, h2, h3, .btn-signup {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
}

/* --- Header (完全固定) --- */
.header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 3rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    
    position: fixed; top: 0; left: 0;
    width: 100%; height: var(--header-height);
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.header-left, .header-right { display: flex; align-items: center; gap: 2rem; }
.logo-img-header { height: 40px; width: auto; display: block; }

.search-bar {
    background: #f1f5f9; padding: 0.6rem 1.2rem; border-radius: 50px;
    display: flex; align-items: center; gap: 0.8rem;
    border: 1px solid transparent; width: 300px; transition: 0.3s;
}
.search-bar:focus-within {
    background: #fff; border-color: var(--color-main);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.search-bar input {
    background: transparent; border: none; color: var(--text-main);
    outline: none; width: 100%; font-size: 0.9rem;
}
.search-bar-label {
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    user-select: none;
}
.search-bar i { color: var(--color-main); }

.search-bar-trigger:focus-visible {
    outline: 2px solid var(--color-main);
    outline-offset: 2px;
}

.nav-link { font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }
.nav-link:hover { color: var(--color-main); }

.btn-signup {
    background: var(--color-main); color: #ffffff;
    padding: 0.7rem 2rem; border-radius: 50px;
    font-weight: 700; border: none;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    transition: 0.3s;
}
.btn-signup:hover {
    transform: translateY(-2px);
    background: #1d4ed8;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}
.menu-toggle { display: none; }

/* --- Sub Nav (完全固定 & 均等配置) --- */
.sub-nav {
    display: flex; align-items: center; gap: 0; 
    
    height: var(--nav-height);
    border-bottom: 1px solid var(--border-subtle);
    background: #fff;
    
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    z-index: 990;
    box-sizing: border-box;

    padding-left: max(3rem, 20%);
    padding-right: max(3rem, 20%);

    overflow-x: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.sub-nav::-webkit-scrollbar { display: none; }

.sub-nav a {
    flex: 1;
    display: flex; justify-content: center; align-items: center;
    color: var(--text-muted); font-size: 0.85rem; font-weight: 700;
    height: 100%; white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}
.sub-nav a:hover, .sub-nav a.active {
    color: var(--color-main);
    border-bottom: 3px solid var(--color-main);
    background-color: #fcfdff;
}

/* 大画面: ヘッダーは全幅のまま、左右パディングだけ main と同じ列に */
@media (min-width: 1201px) {
    .header {
        width: 100% !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        box-sizing: border-box;
        padding-top: 1rem;
        padding-bottom: 1rem;
        /* 100vw は縦スクロールバーがあるとレイアウト幅より大きくなり、本文（margin:auto）よりヘッダーだけ狭く見える。
           ヘッダー自身の width:100% に対する 50% で中央揃えする。 */
        /* padding-left: max(1.5rem, calc(50% - var(--header-align-max-width) / 2 + var(--header-align-padding-x)));
        padding-right: max(1.5rem, calc(50% - var(--header-align-max-width) / 2 + var(--header-align-padding-x))); */
    }
}

/* --- 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;
    /* stretch だと <select> が兄弟の高さまで縦に伸び、スマホで薄青の長い帯に見えることがある */
    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;
}
/* タッチ後に :hover が残る端末では薄青が固定表示されるため、マウスホバー可能な環境のみ適用 */
@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);
    }
}
.filter-btn svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: 0.3s;
}

/* --- Select Filter (プルダウン) --- */
.filter-select {
    background: #fff;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 0.6rem 2.5rem 0.6rem 1.4rem;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    outline: none;
    transition: all 0.3s ease;
    
    /* 標準の矢印を消して、オリジナルSVG矢印に変更 */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    align-self: center;
    height: auto;
    max-height: 3.25rem;
    -webkit-tap-highlight-color: transparent;
}

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

/* 「すべて」以外を選んだときはソートの .active と同じ見た目 */
.filter-select.filter-select--applied {
    background-color: var(--color-main) !important;
    color: #ffffff !important;
    border-color: var(--color-main) !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    /* 開いたメニューをライト系に寄せ、親の反転色が一括で当たりにくくする */
    color-scheme: light;
}

/* 閉じたときの青は維持しつつ、開いたリスト内は通常配色（Chrome 等で親の色が option に波及するのを防ぐ） */
.filter-select.filter-select--applied option {
    background-color: #ffffff !important;
    color: #475569 !important;
    font-weight: 400;
}
.filter-select.filter-select--applied option:checked {
    background-color: #eff6ff !important;
    color: var(--color-main) !important;
    font-weight: 700;
}

/* --- Common List Styles --- */

/* ★ 修正: リストヘッダーの位置調整 ★ */
.common-list-header {
    color: var(--color-dark);
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em;

    position: sticky;
    top: var(--sticky-offset);
    z-index: 980;
    
    background-color: transparent;
    border-bottom: 1px solid var(--border-subtle);
    
    /* ★ はみ出し防止: 横幅とマージンを行(common-row)と統一 ★ */
    width: auto;
    margin: 0 3rem;
    padding: 1rem 2rem;
    
    /* ボーダー分を確保してズレ防止 */
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
    
    transition: border-color 0.1s ease;
}

/* ★ 背景色用 疑似要素 (画面幅いっぱいに広がる) ★ */
.common-list-header::before {
    content: "";
    position: absolute;
    /* 隙間対策 */
    top: -2px; 
    
    /* ヘッダー要素の中心から画面全体へ広げる */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw; 
    height: calc(100% + 2px); 
    
    background-color: #f8faff;
    opacity: 0; /* 初期は透明 */
    
    transition: opacity 0.1s ease;
    z-index: -1;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

/* 吸着時 */
.common-list-header.is-stuck::before {
    opacity: 1; /* 背景を表示 */
}

/* --- Row --- */
.common-row {
    background: var(--bg-card);
    margin: 0 3rem 1.2rem 3rem; 
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    padding: 0 2rem;
    align-items: center;
}
.common-row::before {
    content: ""; position: absolute;
    left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--color-main);
    opacity: 0; transition: 0.3s;
}
.common-row:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.1);
    border-color: var(--color-main);
}
.common-row:hover::before { opacity: 1; }

.firm-logo-common {
    width: 48px; height: 48px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--border-subtle);
    padding: 2px; flex-shrink: 0;
    transition: border-color 0.3s ease;
}
.common-row:hover .firm-logo-common {
    border-color: var(--color-main);
}

.firm-name-common {
    font-weight: 700; font-size: 0.9rem;
    color: var(--text-main);
    font-family: 'Noto Sans JP', sans-serif; 
}
a.firm-name-common:hover,
a.b-firm-name:hover,
a.c-firm-name:hover {
    text-decoration: underline;
    color: var(--color-main);
}

.score {
    display: inline-block; 
    color: var(--color-gold); 
    font-weight: 700; font-size: 1.3rem;margin-right: 0.5rem;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1;
}
.stars-common { 
    display: inline-block;
    color: var(--color-gold); 
    font-size: 0.8rem; 
    letter-spacing: 1px;
}
.review-count-common {
    display: block; 
    font-size: 0.75rem; 
    color: var(--text-muted); 
    margin-top: 3px; 
    font-weight: 500;
}

/* Page Header */
.page-header {
    padding: 1rem 3rem 2rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
}
.page-header h1 {
    font-size: 1.8rem;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
    font-family: 'Noto Sans JP', sans-serif;
}
.page-header p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

@media (max-width: 640px) {
    .page-header h1 {
        font-size: 1.5rem;
    }

    .page-header p {
        font-size: 0.8rem;
    }
}

/* Footer */
.footer {
    border-top: 1px solid var(--border-subtle);
    padding-top: 2.5rem;
    padding-bottom: 1.75rem;
    padding-left: 3rem;
    padding-right: 3rem;
    margin-top: 4rem;
    background: #f8faff;
}
.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 2rem;
    width: 100%;
    max-width: var(--header-align-max-width);
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
}
.footer-col h3 { 
    color: var(--color-dark); margin-bottom: 1.2rem; font-size: 1.4rem; font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
}
.footer-brand .logo-link { display: inline-block; line-height: 0; }
.footer-brand + p {
    margin-top: 0.65rem;
}
.footer-col > p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.75;
    max-width: 36rem;
}
.footer-col h4 {
    margin-bottom: 1rem;
    color: #94a3b8;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
}
.footer-col a { display: block; margin-bottom: 0.8rem; color: var(--text-muted); transition: color 0.2s; }
.footer-col a:hover { color: var(--color-main); }

.footer-menu-links a {
    font-weight: 400;
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    color: #94a3b8;
    font-size: 0.8rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 1.25rem;
    padding-bottom: 0;
}

/* クーポンコードコピー完了トースト（サブナビ直下・横長バー） */
.pronavi-copy-toast {
    position: fixed;
    left: 50%;
    top: calc(var(--header-height) + var(--ticker-height, 0px) + var(--nav-height) + 8px);
    bottom: auto;
    transform: translate3d(-50%, calc(-100% - 24px), 0) scale(0.98);
    z-index: 996;
    width: min(calc(100vw - 1.5rem), 920px);
    max-width: min(calc(100vw - 1.5rem), 920px);
    min-width: 0;
    pointer-events: none;
    opacity: 0;
    transition:
        transform 0.42s cubic-bezier(0.34, 1.22, 0.64, 1),
        opacity 0.3s ease;
}

body.admin-bar .pronavi-copy-toast {
    top: calc(32px + var(--header-height) + var(--ticker-height, 0px) + var(--nav-height) + 8px);
}

/* サブナビがオーバーレイになる幅では、ヘッダー直下にトーストを置く */
@media (max-width: 1024px) {
    .pronavi-copy-toast {
        top: calc(var(--header-height) + var(--ticker-height, 0px) + 8px);
    }

    body.admin-bar .pronavi-copy-toast {
        top: calc(32px + var(--header-height) + var(--ticker-height, 0px) + 8px);
    }
}

@media screen and (max-width: 782px) {
    body.admin-bar .pronavi-copy-toast {
        top: calc(46px + var(--header-height) + var(--ticker-height, 0px) + 8px);
    }
}

.pronavi-copy-toast.pronavi-copy-toast--show {
    transform: translate3d(-50%, 0, 0) scale(1);
    opacity: 1;
}

.pronavi-copy-toast__shell {
    padding: 2px;
    border-radius: 14px;
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 35%, #c084fc 65%, #fb7185 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.pronavi-copy-toast--error .pronavi-copy-toast__shell {
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 40%, #e11d48 70%, #be123c 100%);
}

.pronavi-copy-toast__panel {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.85rem;
    border-radius: 12px;
    padding: 0.55rem 0.85rem 0.6rem 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 52%, #f1f5f9 100%);
    overflow: hidden;
}

.pronavi-copy-toast__panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9, #6366f1, #a855f7, #ec4899);
    border-radius: 12px 12px 0 0;
}

.pronavi-copy-toast--error .pronavi-copy-toast__panel {
    background: linear-gradient(180deg, #ffffff 0%, #fff1f2 55%, #ffe4e6 100%);
}

.pronavi-copy-toast--error .pronavi-copy-toast__panel::before {
    background: linear-gradient(90deg, #fb7185, #f43f5e, #e11d48);
}

.pronavi-copy-toast__ribbon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0.22rem 0.65rem 0.28rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(14, 165, 233, 0.22);
    box-sizing: border-box;
    flex-shrink: 0;
}

.pronavi-copy-toast--error .pronavi-copy-toast__ribbon {
    background: linear-gradient(135deg, rgba(254, 202, 202, 0.5), rgba(254, 205, 211, 0.55));
    border-color: rgba(244, 63, 94, 0.35);
}

.pronavi-copy-toast__ribbon-text {
    font-size: 0.68rem;
    font-weight: 700;
    background: linear-gradient(90deg, #0284c7, #7c3aed, #db2777);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pronavi-copy-toast--error .pronavi-copy-toast__ribbon-text {
    background: none;
    color: #be123c;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

.pronavi-copy-toast__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 200px;
    min-width: 0;
}

.pronavi-copy-toast__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: #fff;
    background: linear-gradient(145deg, #22c55e, #16a34a);
    box-shadow:
        0 0 0 3px rgba(34, 197, 94, 0.2),
        0 6px 16px rgba(22, 163, 74, 0.28);
}

.pronavi-copy-toast--error .pronavi-copy-toast__icon {
    background: linear-gradient(145deg, #fb7185, #e11d48);
    box-shadow:
        0 0 0 3px rgba(244, 63, 94, 0.2),
        0 6px 16px rgba(225, 29, 72, 0.3);
}

.pronavi-copy-toast__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    text-align: left;
}

.pronavi-copy-toast__msg {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #475569;
    margin-bottom: 0;
    line-height: 1.4;
    font-family: 'Noto Sans JP', sans-serif;
    flex: 1 1 140px;
    min-width: 0;
}

.pronavi-copy-toast__code {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    color: #0f172a;
    letter-spacing: 0.06em;
    word-break: break-all;
    line-height: 1.35;
    padding: 0.4rem 0.65rem;
    border-radius: 10px;
    text-align: center;
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.95) 0%, rgba(238, 242, 255, 0.9) 100%);
    border: 1px solid rgba(14, 165, 233, 0.22);
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.08);
    flex: 0 1 auto;
    margin-left: auto;
}

.pronavi-copy-toast--error .pronavi-copy-toast__body {
    flex-wrap: nowrap;
}

.pronavi-copy-toast--error .pronavi-copy-toast__msg {
    flex: 1 1 auto;
    font-size: 0.8rem;
    color: #334155;
}

@media (max-width: 520px) {
    .pronavi-copy-toast {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }

    .pronavi-copy-toast__panel {
        padding: 0.5rem 0.65rem;
        gap: 0.45rem 0.55rem;
    }

    .pronavi-copy-toast__ribbon {
        width: 100%;
        justify-content: center;
    }

    .pronavi-copy-toast__row {
        flex: 1 1 100%;
    }

    .pronavi-copy-toast__code {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   マイページ：証明書アップロード等メッセージモーダル（メルマガ CTA / ウェルカム風）
========================================= */
body.profile-msg-modal-open {
    overflow: hidden;
}

.profile-msg-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    padding: 1rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(5px);
}

.profile-msg-modal__shell {
    width: 100%;
    max-width: min(400px, calc(100vw - 2rem));
    margin: 0 auto;
    padding: 3px;
    border-radius: 20px;
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 35%, #c084fc 65%, #fb7185 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.profile-msg-modal--error .profile-msg-modal__shell {
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 40%, #e11d48 70%, #be123c 100%);
}

.profile-msg-modal__panel {
    position: relative;
    border-radius: 17px;
    padding: 1.25rem 1.35rem 1.15rem;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 48%, #f1f5f9 100%);
    overflow: hidden;
}

.profile-msg-modal__panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #6366f1, #a855f7, #ec4899);
    border-radius: 17px 17px 0 0;
}

.profile-msg-modal--error .profile-msg-modal__panel {
    background: linear-gradient(180deg, #ffffff 0%, #fff1f2 52%, #ffe4e6 100%);
}

.profile-msg-modal--error .profile-msg-modal__panel::before {
    background: linear-gradient(90deg, #fb7185, #f43f5e, #e11d48);
}

.profile-msg-modal__ribbon {
    display: flex;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 0.75rem;
    padding: 0.32rem 0.9rem 0.38rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(14, 165, 233, 0.22);
    box-sizing: border-box;
}

.profile-msg-modal--error .profile-msg-modal__ribbon {
    background: linear-gradient(135deg, rgba(254, 202, 202, 0.5), rgba(254, 205, 211, 0.55));
    border-color: rgba(244, 63, 94, 0.35);
}

.profile-msg-modal__ribbon-text {
    font-size: 0.75rem;
    font-weight: 700;
    background: linear-gradient(90deg, #0284c7, #7c3aed, #db2777);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.profile-msg-modal--error .profile-msg-modal__ribbon-text {
    background: none;
    color: #be123c;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

.profile-msg-modal__icon-wrap {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(145deg, #22c55e, #16a34a);
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.2),
        0 10px 24px rgba(22, 163, 74, 0.3);
}

.profile-msg-modal--error .profile-msg-modal__icon-wrap {
    background: linear-gradient(145deg, #fb7185, #e11d48);
    box-shadow:
        0 0 0 4px rgba(244, 63, 94, 0.2),
        0 10px 24px rgba(225, 29, 72, 0.28);
}

.profile-msg-modal__title {
    margin: 0 0 0.55rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.profile-msg-modal__text {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #475569;
    white-space: pre-wrap;
}

.profile-msg-modal__ok {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    display: block;
    padding: 0.72rem 1.1rem;
    border: none;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.42);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.profile-msg-modal__ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(14, 165, 233, 0.48);
}

.profile-msg-modal--error .profile-msg-modal__ok {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    box-shadow: 0 6px 20px rgba(225, 29, 72, 0.35);
}

.profile-msg-modal--error .profile-msg-modal__ok:hover {
    box-shadow: 0 10px 26px rgba(225, 29, 72, 0.42);
}

/* レビュー削除申請：送信完了モーダルと同じシェル（グラデ枠・リボン・アイコン円）＋2ボタン */
.profile-msg-modal__ribbon-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.profile-msg-modal__ribbon-ico {
    font-size: 0.72rem;
    color: #6366f1;
}

/* レビュー削除申請：外枠グラデ・パネル上線・上部ピルラベルを赤系に */
.profile-msg-modal--delete-review .profile-msg-modal__shell {
    background: linear-gradient(135deg, #fecaca 0%, #fb7185 38%, #f43f5e 68%, #be123c 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.35) inset,
        0 14px 40px rgba(190, 18, 60, 0.2);
}

.profile-msg-modal--delete-review .profile-msg-modal__panel::before {
    background: linear-gradient(90deg, #fca5a5, #f87171, #ef4444, #e11d48);
}

.profile-msg-modal--delete-review .profile-msg-modal__ribbon {
    background: linear-gradient(135deg, rgba(254, 202, 202, 0.65), rgba(254, 205, 211, 0.75));
    border-color: rgba(244, 63, 94, 0.45);
}

.profile-msg-modal--delete-review .profile-msg-modal__ribbon-text {
    background: none;
    color: #be123c;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

.profile-msg-modal--delete-review .profile-msg-modal__ribbon-ico {
    color: #e11d48;
}

.profile-msg-modal__icon-wrap--delete-warn {
    font-size: 1.2rem;
    background: linear-gradient(145deg, #fb7185, #e11d48);
    box-shadow:
        0 0 0 4px rgba(244, 63, 94, 0.2),
        0 10px 24px rgba(225, 29, 72, 0.28);
}

.profile-msg-modal__text--delete-request {
    margin-bottom: 1.2rem;
}

.profile-msg-modal__row-btns {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 19rem;
    margin: 0 auto;
}

.profile-msg-modal__btn-secondary {
    flex: 1;
    min-width: 6.5rem;
    padding: 0.72rem 0.85rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.profile-msg-modal__btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.profile-msg-modal__btn-danger {
    flex: 1;
    min-width: 6.5rem;
    padding: 0.72rem 0.85rem;
    border: none;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    box-shadow: 0 6px 20px rgba(225, 29, 72, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.profile-msg-modal__btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(225, 29, 72, 0.42);
}

/* 企業詳細：未ログイン時のレビュー投稿案内モーダル */
.profile-msg-modal__icon-wrap--login-gate {
    font-size: 1.1rem;
    background: linear-gradient(145deg, #6366f1, #4f46e5);
    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.22),
        0 10px 24px rgba(79, 70, 229, 0.28);
}

.profile-msg-modal__text--login-gate {
    margin-bottom: 1.2rem;
}

.profile-msg-modal__btn-primary {
    flex: 1;
    min-width: 6.5rem;
    padding: 0.72rem 0.85rem;
    border: none;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.42);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.profile-msg-modal__btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(14, 165, 233, 0.48);
}

@media (max-width: 480px) {
    .profile-msg-modal__shell {
        max-width: calc(100vw - 1.25rem);
    }

    .profile-msg-modal__title {
        font-size: 1.05rem;
    }

    .profile-msg-modal__text {
        font-size: 0.85rem;
    }

    .profile-msg-modal__row-btns {
        max-width: 100%;
    }
}

/* スマホ・タブレット: フッターメニューを2列 */
@media (max-width: 1024px) {
    .footer {
        padding-top: 2rem;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        margin-top: 3rem;
    }

    .footer-content {
        flex-direction: column;
    }

    .footer-menu-col {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
        border-left: none;
        padding-left: 0;
        text-align: left;
    }

    .footer-menu-col h4 {
        text-align: left;
    }

    .footer-menu-links {
        display: grid;
        /* 左列に長文（プライバシーポリシー等）が来るため左をやや広く */
        grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
        column-gap: 0.65rem;
        row-gap: 0.45rem;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        justify-items: start;
        text-align: left;
    }

    .footer-menu-links a {
        margin-bottom: 0;
        font-size: clamp(0.68rem, 3.1vw, 0.8125rem);
        white-space: nowrap;
        padding: 0.35rem 0;
    }
}

/* PC: フッター2カラム＋メニュー横並び（ヘッダーと同じ最大幅で揃える） */
@media (min-width: 1025px) {
    .mobile-auth-buttons {
        display: none !important;
    }

    .footer-content {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        column-gap: clamp(2rem, 4vw, 3.5rem);
        row-gap: 2rem;
    }

    .footer-menu-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        min-width: 0;
        border-left: 1px solid var(--border-subtle);
        padding-left: clamp(1.75rem, 3vw, 2.75rem);
    }

    .footer-menu-col h4 {
        margin-bottom: 1.05rem;
    }

    .footer-menu-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 0.65rem 1.6rem;
        row-gap: 0.7rem;
    }

    .footer-menu-links a {
        display: inline-block;
        margin-bottom: 0;
        white-space: nowrap;
        font-size: 0.875rem;
        letter-spacing: 0.02em;
        color: var(--text-muted);
    }

    .footer-menu-links a:hover {
        color: var(--color-main);
    }
}

/* =========================================
   レスポンシブ・モバイル対応
========================================= */


/* =========================================
   画像による星アイコン (star-point.png) の設定
========================================= */

/* 星を並べるコンテナの設定 */
.stars-common, .cp-stars, .rs-stars, .ur-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px !important;
    vertical-align: middle;
}

/* 共通の星画像サイズ */
.c-star-icon {
    width: 1.3em;
    height: 1.3em;
    object-fit: contain;
    vertical-align: middle;
}

/* スコア数字の調整（元の大きさに戻し、右側に余白を空ける） */
.score {
    display: inline-block;
    font-size: 1.3rem !important; /* ★ 元の大きさに戻す */
    margin-right: 6px !important; /* ★ 数字と星の間に少し余白を空ける */
    margin-left: 0 !important;    /* 左側の余白はリセット */
    font-weight: 800 !important;
    vertical-align: middle;
    line-height: 1;
}

/* レビュー数 (245) などの調整 */
.review-count-common {
    display: inline-block !important;
    vertical-align: middle;
    margin-top: 0 !important;
    font-size: 0.8rem;
    margin-left: 1px; /* 星の後ろに少し余白 */
}

/* -----------------------------------------
   色抜き・切り抜き設定
----------------------------------------- */
.c-star-empty, .c-star-bg {
    filter: grayscale(100%) opacity(30%); 
}

.c-star-half-wrap {
    position: relative;
    display: inline-flex;
    width: 1.3em;
    height: 1.3em;
    vertical-align: middle;
}

.c-star-half-wrap .c-star-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.c-star-half-wrap .c-star-fg {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); 
}

/* モバイル対応 (スマホ用レイアウト) */
@media (max-width: 1024px) {
    body { padding-top: var(--header-height); }
    .header { padding-left: 1.5rem; padding-right: 1.5rem; }
    .header-right { flex-shrink: 0; }

    /* ロゴ右に検索（残り幅を使い、右の登録・メニューと干渉しないよう flex） */
    .header-left {
        flex: 1;
        min-width: 0;
        gap: 0.65rem !important;
    }
    .logo-link {
        flex-shrink: 0;
    }
    .header .search-bar {
        display: flex !important;
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        max-width: 7.25rem;
        padding: 0.35rem 0.5rem;
        gap: 0.35rem;
    }
    .header .search-bar .search-bar-label {
        font-size: 0.8125rem; /* 13px — input 廃止のため iOS 拡大なし */
    }
    .header .search-bar i {
        font-size: 0.75rem;
    }
    
    /* スマホ時はヘッダー右のPC用ボタンを隠す */
    /* .header-right .nav-link,
    .header-right .btn-signup {
        display: none;
    } */
     /* ★修正: スマホ時はレビューボタンとログインを隠し、無料登録だけ残す */
    .header-review-btn,
    .header-divider,
    .header-login-btn {
        display: none !important;
    }

    /* 無料登録ボタンのサイズを調整して表示 */
    .header-right .btn-signup {
        display: inline-block !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.8rem !important;
    }

    /* ★修正: アイコンやボタンをハンバーガーメニューにキュッと寄せる */
    .header-right {
        gap: 1rem !important;
    }
    .auth-buttons-group, 
    .header-logged-in-group {
        gap: 0.5rem !important; /* アバターとハンバーガーの隙間を縮小 */
    }
    
    .menu-toggle { display: block; font-size: 1.5rem; color: var(--text-main); cursor: pointer; z-index: 1001;}

    /* ★ スマホ用の全画面メニュー (sub-nav) */
    .sub-nav { 
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height)); /* 縦幅100% */
        background: #fff;
        padding: 1.5rem;
        z-index: 990;
        /* 右からスライドインさせる初期状態 */
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }
    
    /* メニューが開いた状態 */
    .sub-nav.open {
        transform: translateX(0);
    }
    
    /* スマホメニュー内のリンク */
    .sub-nav a {
        flex: none;
        width: 100%;
        height: auto;
        justify-content: flex-start;
        padding: 1.2rem 0;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--border-subtle);
    }
    .sub-nav a:hover, .sub-nav a.active {
        border-bottom: 1px solid var(--color-main);
        background-color: transparent;
    }
    
    /* ★ スマホメニュー内のボタンエリア */
    .mobile-auth-buttons {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        margin-top: 2rem; 
    }
    
    /* 共通設定（!importantを外し、.sub-navを付けて優先度を自然に上げる） */
    .sub-nav .mobile-auth-buttons a {
        border-bottom: none; 
        padding: 0.8rem;
        height: auto; 
        justify-content: center;
        text-align: center;
        border-radius: 50px;
        font-weight: 700;
    }
    
    /* ログインボタン */
    .sub-nav .mobile-auth-buttons .nav-link-mobile {
        border: 2px solid var(--color-main);
        color: var(--color-main);
    }
    
    /* 無料登録ボタン */
    .sub-nav .mobile-auth-buttons .btn-signup-mobile {
        background: var(--color-main);
        color: #fff;
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
        border: 2px solid var(--color-main); /* ログインボタンと高さを揃えるための枠線 */
    }

    /* 共通要素（変更なし） */
    .common-row { margin: 0 1.5rem 1rem 1.5rem; padding: 1.5rem; }
    .common-list-header { display: none; }
    .page-header { padding: 1rem 1.5rem 2rem 1.5rem; }
}







/* =========================================
   ログイン後のユーザーアイコンとメニュー
========================================= */
.auth-buttons-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.user-menu-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* 丸アイコン */
.user-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff; /* 背景を白に変更 */
    border: 1px solid #e2e8f0; /* 薄いグレーの枠線を追加 */
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    overflow: hidden; /* 画像を丸枠の形に切り抜く */
}

/* ★追加: アイコン画像のサイズ調整 */
.user-icon-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-icon-btn:hover {
    filter: brightness(0.95); /* ホバー時に少し暗くする */
}

/* ドロップダウンメニュー本体 */
.user-dropdown {
    position: absolute;
    top: 55px;
    right: 0;
    width: 240px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: all 0.2s ease;
}

.user-dropdown.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
}

.user-dropdown-header {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dropdown-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
}

.dropdown-email {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.user-dropdown-list {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
}

.user-dropdown-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.7rem 1.2rem;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.2s;
}

.user-dropdown-list li a:hover {
    background-color: #f8fafc;
    color: var(--color-main);
}

.user-dropdown-list li a i {
    width: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
}

.user-dropdown-list li a:hover i {
    color: var(--color-main);
}



/* =========================================
   WordPress 管理画面バー対策（ヘッダー重なり防止）
========================================= */
body.admin-bar .header {
    top: 32px;
}
/* ヘッダーが32px下がるので、その下にあるサブナビも32px追加で下げる（元が70pxなら102pxに） */
body.admin-bar .sub-nav {
    top: 102px; 
}

/* スマホ表示時の管理バー（高さ46px）対策 */
@media screen and (max-width: 782px) {
    body.admin-bar .header {
        top: 46px;
    }
    body.admin-bar .sub-nav {
        top: 116px;
    }
}






/* =========================================
   スマホ・タブレット用：完全横スワイプ対応（はみ出し防止＆縦積み修正）
========================================= */
@media (max-width: 1200px) {
    /* 1. 企業一覧など「横長グリッド」があるページの main のみ横スクロール。
       profile-main / auth-main 等は除外（全体が左右に動くのを防ぐ）。
       detail-main は除外: 内側の .detail-tabs が position:sticky になり、main が overflow だと固定が壊れる。
       企業詳細の横長は .tab-pane と各ラッパー側でスクロールする。 */
    main.top-main,
    main.best-main,
    main.coupon-main,
    main.review-main,
    main.comp-main,
    .tab-pane {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 2rem !important;
    }

    /* スマホ用に自動追加される文字ラベルを完全に消去 */
    [class*="col-"]::before {
        display: none !important;
        content: none !important;
    }

    /* ▼▼▼ 修正: データ行とヘッダー行の横幅(Grid)を完全に同期させる ▼▼▼ */
    /* トップページ: [ロゴ70px][企業名160px][ランク180px][高評価280px][決済240px][最安値120px][クーポン200px][購入120px] */
    .list-header, .firm-row {
        display: grid !important;
        grid-template-columns: 70px 160px 180px 280px 240px 120px 200px 120px !important;
        width: max-content !important;
        gap: 0 !important;
    }
    
    /* 比較ページ: [ロゴ70px][企業名160px][ランク180px][設立100px][決済220px][PF220px][最大資金120px][プロモ200px][詳細120px] */
    .comp-header, .comp-row {
        display: grid !important;
        grid-template-columns: 70px 160px 180px 100px 220px 220px 120px 200px 120px !important;
        width: max-content !important;
        gap: 0 !important;
    }

    /* レビューページ: [ロゴ70px][企業名160px][ランク180px][スコア*4 180px][詳細120px] */
    .review-header, .review-row {
        display: grid !important;
        grid-template-columns: 70px 160px 180px 180px 180px 180px 180px 120px !important;
        width: max-content !important;
        gap: 0 !important;
    }

    /* クーポンページ（一覧）: ロゴは企業名列に含まれる */
    .coupon-header, .coupon-row {
        display: grid !important;
        grid-template-columns: 220px 140px 350px 200px !important;
        width: max-content !important;
        gap: 0 !important;
    }
    /* 企業詳細のクーポンタブ: アイコン列＋企業名＋割引＋詳細＋アクション */
    .detail-coupon-header, .detail-coupon-row {
        display: grid !important;
        /* コード/購入列を広げる（詳細をやや縮小） */
        grid-template-columns: 56px 164px 140px 300px 260px !important;
        width: max-content !important;
        gap: 0 !important;
    }

    /* ベストセラーページ: [順位60px][ロゴ80px][企業名160px][ランク160px][最安値130px][プラン150px][クーポン200px][購入120px] */
    .bestseller-header, .bestseller-row {
        display: grid !important;
        grid-template-columns: 60px 60px 170px 155px 120px 190px 220px 120px !important;
        width: max-content !important;
        gap: 0 !important;
    }

    /* チャレンジ: ロゴ列（流れる）＋企業名列（左固定は firm-detail.css）＋各列 */
    .challenge-header, .challenge-row {
        display: grid !important;
        grid-template-columns: 56px 164px 120px 100px 120px 100px 100px 100px 120px 120px 120px !important;
        width: max-content !important;
        gap: 0 !important;
    }
    /* ▲▲▲ 修正ここまで ▲▲▲ */


    /* 4. 行の余白と背景（データ行・ヘッダー行 共通） */
    .common-row, .challenge-row, .bestseller-row, .coupon-row, .review-row, .comp-row, .firm-row, .detail-coupon-row,
    .common-list-header, .challenge-header, .detail-coupon-header, .comp-header, .review-header, .bestseller-header, .coupon-header {
        margin: 0 1.5rem 12px 1.5rem !important; 
        background-color: #fff !important;
        border-radius: 8px !important;
        padding: 0 !important; 
        position: relative !important;
        z-index: 1 !important; 
    }

    /* ▼▼▼ 修正: ヘッダー行をスクロール追従(sticky)させる設定 ▼▼▼ */
    .common-list-header, .challenge-header, .detail-coupon-header, .comp-header, .review-header, .bestseller-header, .coupon-header {
        position: sticky !important; 
        top: calc(var(--header-height) + var(--nav-height)) !important; /* ヘッダーの下にピタッとくっつく位置 */
        z-index: 980 !important; /* データ行より上に表示して被りを防ぐ */
        margin-bottom: 5px !important; /* ヘッダーとデータ行の間に少し隙間をあける */
        background-color: transparent !important;
    }

    /* スクロールして吸着した時のヘッダーの背景（白くする） */
    .common-list-header.is-stuck, .challenge-header.is-stuck, .detail-coupon-header.is-stuck, .comp-header.is-stuck, .review-header.is-stuck, .bestseller-header.is-stuck, .coupon-header.is-stuck {
        background-color: #f8faff !important;
        border-bottom: 1px solid var(--border-subtle) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    }
    /* ▲▲▲ 修正ここまで ▲▲▲ */


    /* 横スワイプ時に画面幅を狂わせる背景の疑似要素(::before)は完全に消去する */
    .common-list-header::before, .challenge-header::before, .detail-coupon-header::before, .comp-header::before, .review-header::before, .bestseller-header::before, .coupon-header::before {
        display: none !important;
    }

    /* 5. 各セルの配置リセット（基本は横並びの中央揃え） */
    .common-row > div, .common-list-header > div,
    .challenge-header > div, .detail-coupon-header > div,
    .challenge-row > div, .bestseller-row > div, .detail-coupon-row > div, .review-row > div, .comp-row > div,
    .bestseller-header > div, .comp-header > div, .review-header > div, .coupon-header > 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; /* ★追加: ヘッダーの文字が改行されるのを防ぐ */
    }

    /* 最安値のセルだけ「縦積み」にしてPCと同じ表示にする */
    .common-row > .col-plan, 
    .bestseller-row > .col-b-price, 
    .challenge-row > .col-ch-price {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    /* ベストセラー等の .price-row-bottom のみ横並び。チャレンジの .ch-price-box は縦積みのまま（本セレクタに含めない） */
    .price-row-bottom {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .challenge-row .col-ch-price .ch-price-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    
    .price-original, .ch-price-original {
        color: #94a3b8 !important;
        text-decoration: line-through !important;
        font-size: 0.85rem !important;
        line-height: 1 !important;
        display: block !important;
    }

    /* 6. 行の間に縦の区切り線を強制的に引く（ロゴ列は除外） */
    .common-row > div:not(:last-child):not(.col-logo):not(.col-c-logo):not(.col-r-logo)::after, 
    .common-list-header > div:not(:last-child):not(.col-logo):not(.col-c-logo):not(.col-r-logo)::after,
    .challenge-header > div:not(:last-child):not(.col-ch-logo)::after,
    .detail-coupon-header > div:not(:last-child):not(.col-dc-logo)::after,
    .challenge-row > div:not(:last-child):not(.col-ch-logo)::after, 
    .bestseller-row > div:not(:last-child):not(.col-b-logo)::after, 
    .detail-coupon-row > div:not(:last-child):not(.col-dc-logo)::after, 
    .review-row > div:not(:last-child):not(.col-r-logo)::after, 
    .comp-row > div:not(:last-child):not(.col-c-logo)::after,
    .bestseller-header > div:not(:last-child):not(.col-b-logo)::after,
    .comp-header > div:not(:last-child):not(.col-c-logo)::after,
    .review-header > div:not(:last-child):not(.col-r-logo)::after,
    .coupon-header > div:not(:last-child)::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;
    }

    /* 7. アクションボタンの潰れ防止 */
    .action-btn, .btn-offers, .btn-buy-sm, .c-action-btn, .dc-btn-apply, .btn-view-reviews {
        white-space: nowrap !important;
        min-width: 80px !important;
        width: 100% !important;
        max-width: 120px !important;
        flex-shrink: 0 !important;
    }

    /* 折り返し許可（決済アイコン） */
    .col-payments, .c-payout-col, .col-dc-action, .col-ch-action, .col-c-action, .col-action, .b-action-col, .col-r-action, .cp-action-col {
        flex-wrap: wrap !important; 
        justify-content: center !important;
    }

    .col-ch-logo,
    .col-dc-logo {
        justify-content: center !important;
    }
    /* 企業名を左寄せに */
    .col-firm, .col-c-firm, .col-r-firm, .cp-firm-col, .col-cp-firm, .col-ch-firm, .dc-firm-col, .col-dc-firm, .col-b-firm {
        justify-content: flex-start !important;
    }

    /* ランク・レビューを左寄せに修正 */
    .col-rank, .col-c-rank, .col-r-rank, .col-b-rating, .col-plan {
        justify-content: center !important;
    }
    .col-rank .rank-content-wrapper,
    .col-c-rank .rank-content-wrapper,
    .col-r-rank .rank-content-wrapper,
    .col-b-rating .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;
    }

    /* その他のカラムを中央寄せ */
    .col-c-years, .col-c-payout, .col-c-pf, .col-c-alloc, .col-c-promo,
    .col-r-score, .col-cp-discount, .col-cp-desc, 
    .col-dc-discount, .col-dc-desc, .col-b-plan, .col-b-coupon, 
    .col-ch-size, .col-ch-step, .col-ch-target, .col-ch-daily, .col-ch-max, .col-ch-split, .col-ch-payout, .col-b-rank {
        justify-content: center !important;
    }
}




/* =========================================
   クーポン カウントダウンバッジ
========================================= */
.coupon-countdown {
    font-size: 0.75rem;
    color: #e11d48; /* 目立つ赤 */
    font-weight: 700;
    /* margin-top: 6px; */
    background: #fff1f2;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid #ffe4e6;
    white-space: nowrap;
    text-align: center;
}
.coupon-countdown.expired {
    color: #94a3b8; /* 期限切れはグレーアウト */
    background: #f1f5f9;
    border-color: #e2e8f0;
}





/* =========================================
   お知らせ帯 (マーキー) のデザインと自動レイアウト調整
========================================= */
:root {
    --ticker-height: 0px;
}

/* 帯が表示されている時の全体の余白 */
body.has-ticker-active {
    --ticker-height: 40px;
    padding-top: calc(var(--header-height) + var(--nav-height) + var(--ticker-height)) !important;
}

/* ▼ 帯本体のスタイル（画面の一番上に配置） */
.site-ticker {
    position: fixed;
    top: 0; /* ★修正: 画面の一番上に配置 */
    left: 0;
    width: 100%;
    height: 40px;
    line-height: 40px; 
    background: linear-gradient(90deg, #1e3a8a, #2563eb); 
    color: #fff;
    display: block; 
    overflow: hidden;
    z-index: 1005; /* ★修正: ヘッダー(1000)よりさらに上に配置 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ▼ 帯がある場合、ヘッダーを帯の分だけ押し下げる */
body.has-ticker-active .header {
    top: var(--ticker-height) !important;
}

/* ▼ サブナビをヘッダーの下に押し下げる */
body.has-ticker-active .sub-nav {
    top: calc(var(--header-height) + var(--ticker-height)) !important;
}

/* 流れるアニメーション */
.ticker-scroll {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100vw; 
    animation: marquee 25s linear infinite; 
}

/* マウスホバーで一時停止 */
/* .site-ticker:hover .ticker-scroll {
    animation-play-state: paused;
} */

.ticker-scroll a, .ticker-scroll span {
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    letter-spacing: 0.05em;
    padding-right: 50px; 
}
.ticker-scroll a:hover {
    text-decoration: underline;
    color: #ffd700; 
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@media (max-width: 640px) {
    .ticker-scroll {
        animation-duration: 20s;
    }
}

/* -----------------------------------------
   追従ヘッダー（見出し行）たちの位置補正
----------------------------------------- */
body.has-ticker-active .common-list-header,
body.has-ticker-active .challenge-header,
body.has-ticker-active .detail-coupon-header {
    /* top: calc(var(--header-height) + var(--nav-height) + var(--ticker-height)) !important; */
}

/* スマホ・タブレット表示（1024px以下） */
@media (max-width: 1024px) {
    /* サブナビがメニューに隠れるため、全体の余白から nav-height を引く */
    body.has-ticker-active {
        padding-top: calc(var(--header-height) + var(--ticker-height)) !important;
    }
    
    /* リストヘッダーの位置も調整 */
    body.has-ticker-active .common-list-header,
    body.has-ticker-active .challenge-header,
    body.has-ticker-active .detail-coupon-header {
        /* top: calc(var(--header-height) + var(--ticker-height)) !important; */
    }

    /* スマホメニューを開いた時の高さを帯の分だけ減らす */
    body.has-ticker-active .sub-nav {
        height: calc(100vh - var(--header-height) - var(--ticker-height)) !important;
    }
}

/* -----------------------------------------
   WordPress管理バー（黒いバー）表示時の位置補正
----------------------------------------- */
/* PC表示 (管理バー 32px分 下げる) */
body.admin-bar .site-ticker {
    top: 32px !important;
}
body.admin-bar.has-ticker-active .header {
    top: calc(var(--ticker-height) + 32px) !important;
}
body.admin-bar.has-ticker-active .sub-nav {
    top: calc(var(--header-height) + var(--ticker-height) + 32px) !important;
}

/* 782px以下のスマホ表示 (管理バーが 46px に太くなるため調整) */
@media screen and (max-width: 782px) {
    body.admin-bar .site-ticker {
        top: 46px !important;
    }
    body.admin-bar.has-ticker-active .header {
        top: calc(var(--ticker-height) + 46px) !important;
    }
    body.admin-bar.has-ticker-active .sub-nav {
        top: calc(var(--header-height) + var(--ticker-height) + 46px) !important;
        height: calc(100vh - var(--header-height) - var(--ticker-height) - 46px) !important;
    }
}





/* =========================================
   セールス通知（画面下部・帯状）
========================================= */
/* 外側は transform なし（iOS でスクロール時に fixed が画面中央に飛ぶのを防ぐ）。スライドは __inner に任せる */
#pronavi-sales-popup.pronavi-sales-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;
    transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

#pronavi-sales-popup.pronavi-sales-bar.pronavi-sales-bar--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: #ffffff;
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.1);
}

/* カスタマイザー「テスト通知」表示中のみ（視認用・本番のランダム通知とは別） */
#pronavi-sales-popup.pronavi-sales-bar--test.pronavi-sales-bar--visible {
    outline: 2px dashed rgba(234, 179, 8, 0.85);
    outline-offset: 3px;
}

.pronavi-sales-bar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: transparent;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

#pronavi-sales-popup.pronavi-sales-bar.pronavi-sales-bar--visible .pronavi-sales-bar__inner {
    transform: translateY(0);
}

@media (max-width: 640px) {
    .pronavi-sales-bar__inner {
        padding-left: 14px;
        padding-right: 14px;
        gap: 10px;
    }
}

.pronavi-sales-bar__close {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.15rem;
    padding: 4px 6px;
    line-height: 1;
    border-radius: 6px;
}

.pronavi-sales-bar__close:hover {
    color: #64748b;
    background: #f1f5f9;
}

.sp-logo-wrapper {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    padding: 2px;
    background: #f8fafc;
    box-sizing: border-box;
}

.sp-logo-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.sp-text-content {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-main);
    text-align: left;
}

.sp-text-content a {
    color: var(--color-main);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sp-highlight {
    font-weight: 700;
    color: #10b981;
}






/* =========================================
   テーブルの箱(ラッパー)による独立スクロールレイアウト（全画面共通）
========================================= */

/* 1. 以前は html/body/main を visible にしていたが、一覧以外（プロフィール等）で
   ページ全体が左右にスクロールする原因になるため、html/body/main は指定しない。
   横長テーブルは .pronavi-table-wrapper と下記「一覧用 main」の overflow-x で対応。 */
.tab-pane {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* 2. JSで生成した「箱」の設定 */
.pronavi-table-wrapper {
    max-height: 85vh !important; 
    overflow-y: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    background: #f8fafc !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    
    /* 箱の内側に余白を持たせることで、右端の余白を確保 */
    padding: 0 1.5rem 12px 1.5rem !important; 
}

.pronavi-table-wrapper::-webkit-scrollbar { width: 8px; height: 8px; }
.pronavi-table-wrapper::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.pronavi-table-wrapper::-webkit-scrollbar-track { background: transparent; }

/* 3. ベースとなるヘッダーとデータ行の設定 */
.common-row, .firm-row, .challenge-row, .bestseller-row, 
.coupon-row, .review-row, .comp-row, .detail-coupon-row {
    margin: 0 0 12px 0 !important; 
    padding-left: 1.5rem !important; 
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

.common-list-header, .challenge-header, .detail-coupon-header, 
.comp-header, .review-header, .bestseller-header, .coupon-header {
    margin: 0 -1.5rem 12px -1.5rem !important; /* ラッパーのpaddingを打ち消して左右の壁にくっつける */
    padding-left: 3rem !important; /* 縦線をデータ行と完璧に合わせる */
    padding-right: 3rem !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-sizing: border-box !important;
    
    position: sticky !important;
    top: 0 !important; 
    z-index: 900 !important;
    
    background-color: rgba(248, 250, 255, 0.85) !important; 
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important; 
    
    border: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 12px 12px 0 0 !important; 
}


/* =========================================
   PCとスマホの表示切り替え（幅の調整）
========================================= */

/* ▼ 4. PC版 (1200px超) : 横にはみ出さず、キッチリ100%の枠に収める ▼ */
@media (min-width: 1201px) {
    .pronavi-table-wrapper {
        width: calc(100% - 6rem) !important;
        margin: 0 3rem 2rem 3rem !important;
        overflow-x: hidden !important; /* PCは横スクロール禁止 */
    }
    
    /* ★修正: PC版は幅を100%に固定し、中身が多い場合は自動で折り返させる */
    .common-row, .firm-row, .challenge-row, .bestseller-row, 
    .coupon-row, .review-row, .comp-row, .detail-coupon-row {
        width: 100% !important; 
    }

    .common-list-header, .challenge-header, .detail-coupon-header, 
    .comp-header, .review-header, .bestseller-header, .coupon-header {
        width: calc(100% + 3rem) !important; /* 左右のネガティブマージン分を足す */
    }
}

/* ▼ 5. スマホ・タブレット版 (1200px以下) : 横に長く伸ばして横スワイプ ▼ */
@media (max-width: 1200px) {
    .pronavi-table-wrapper {
        width: calc(100% - 3rem) !important;
        margin: 0 1.5rem 2rem 1.5rem !important;
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch !important;
        
    }
    
    /* ★スマホ時は中身の量に合わせて、どこまでも横に伸びるようにする(max-content) */
    .common-row, .firm-row, .challenge-row, .bestseller-row, 
    .coupon-row, .review-row, .comp-row, .detail-coupon-row {
        width: max-content !important;
        min-width: 100% !important;
    }

    .common-list-header, .challenge-header, .detail-coupon-header, 
    .comp-header, .review-header, .bestseller-header, .coupon-header {
        width: max-content !important;
        min-width: calc(100% + 3rem) !important;
        border-radius: 0 !important; /* スマホ時のヘッダー角丸をリセット */
    }

    .common-row, .firm-row, .challenge-row, .bestseller-row, .coupon-row, .review-row, .comp-row, .detail-coupon-row {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .common-list-header, .challenge-header, .detail-coupon-header, .comp-header, .review-header, .bestseller-header, .coupon-header {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}




@media (max-width: 640px) {
    .common-row, .firm-row, .challenge-row, .bestseller-row, .coupon-row, .review-row, .comp-row, .detail-coupon-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .common-list-header, .challenge-header, .detail-coupon-header, .comp-header, .review-header, .coupon-header {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .pronavi-table-wrapper {
        /* 1200px 以下の「幅100%-3rem + 左右1.5rem」より横スクロール領域を広くする */
        width: calc(100% - 0.5rem) !important;
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
        margin-bottom: 1.5rem !important;
        padding: 0 1rem 12px 1rem !important;
        overscroll-behavior: none !important;
    }

    /* ▼▼▼ スマホ: ロゴだけを左端に固定し、企業名テキストは非表示 ▼▼▼ */
    .common-row, .firm-row, .challenge-row, .bestseller-row, .coupon-row, .review-row, .comp-row, .detail-coupon-row {
        overflow: visible !important;
    }

    /* --- 1. トップ・比較・レビュー・クーポン等（1列目が企業名） --- */
    /* データ行：left:-1rem で左パディング(1rem)を白背景でカバーしつつ
       padding-left:1rem でロゴがちょうど左端から始まるよう調整 */
    .common-row > div:first-child, 
    .firm-row > div:first-child, 
    .coupon-row > div:first-child, 
    .review-row > div:first-child, 
    .comp-row > div:first-child, 
    .detail-coupon-row > .col-dc-logo {
        position: sticky !important;
        left: -1rem !important;
        padding-left: 1rem !important;
        background-color: #ffffff !important; 
        z-index: 10 !important; 
        box-shadow: 4px 0 12px -2px rgba(0,0,0,0) !important; /* 初期は透明 */
        transition: box-shadow 0.25s ease !important;
        border-radius: 8px 0 0 8px !important; 
    }
    /* スクロール開始後に影を表示 */
    .pronavi-table-wrapper.table-scrolled .common-row > div:first-child,
    .pronavi-table-wrapper.table-scrolled .firm-row > div:first-child,
    .pronavi-table-wrapper.table-scrolled .coupon-row > div:first-child,
    .pronavi-table-wrapper.table-scrolled .review-row > div:first-child,
    .pronavi-table-wrapper.table-scrolled .comp-row > div:first-child,
    .pronavi-table-wrapper.table-scrolled .detail-coupon-row > .col-dc-logo {
        box-shadow: 4px 0 12px -2px rgba(0,0,0,0.06) !important;
    }
    /* ヘッダー行も同様 */
    .common-list-header > div:first-child, 
    .comp-header > div:first-child, 
    .review-header > div:first-child, 
    .coupon-header > div:first-child,
    .detail-coupon-header > .col-dc-logo {
        position: sticky !important;
        left: -1rem !important;
        padding-left: 1rem !important;
        background-color: #f8faff !important;
        z-index: 10 !important;
    }

    /* --- 2. チャレンジ詳細: 企業列の左固定は firm-detail.css（詳細ページのみ）で指定 --- */

    /* --- 3. ベストセラー（1列目=順位→左に流れる、2列目=ロゴ→左固定） --- */
    /* 1列目(順位)は固定しない：横スクロールで左に流れていく */
    .bestseller-row > div:nth-child(1) {
        position: static !important;
        left: auto !important;
        background-color: transparent !important;
        z-index: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .bestseller-header > div:nth-child(1) {
        position: static !important;
        left: auto !important;
        background-color: transparent !important;
        z-index: auto !important;
    }
    /* 2列目(ロゴ)を左端に固定 */
    .bestseller-row > div:nth-child(2) {
        position: sticky !important;
        left: 0 !important;
        background-color: #ffffff !important;
        z-index: 12 !important;
        /* 初期は透明。スクロール開始後にランク列を隠す白いshadowに切り替わる */
        box-shadow: -80px 0 0 0 rgba(255,255,255,0), 4px 0 8px -2px rgba(0,0,0,0) !important;
        transition: box-shadow 0.25s ease !important;
        border-radius: 8px 0 0 8px !important;
    }
    .bestseller-header > div:nth-child(2) {
        position: sticky !important;
        left: 0 !important;
        background-color: #f8faff !important;
        z-index: 12 !important;
        /* 初期は透明 */
        box-shadow: -80px 0 0 0 rgba(248,250,255,0) !important;
        transition: box-shadow 0.25s ease !important;
    }
    /* スクロール開始後: -80px offset でshadow右端をロゴ左端に合わせ隙間をなくす */
    .pronavi-table-wrapper.table-scrolled .bestseller-row > div:nth-child(2) {
        box-shadow: -80px 0 0 0 #ffffff, 4px 0 8px -2px rgba(0,0,0,0.06) !important;
    }
    .pronavi-table-wrapper.table-scrolled .bestseller-header > div:nth-child(2) {
        box-shadow: -80px 0 0 0 #f8faff !important;
    }

    /*
     * JS で包んだ .pronavi-table-wrapper 内の一覧（比較・クーポン等）:
     * common のセル上下 1.5rem を詰め、比較ページのプロモ・詳細ボタンを縮小。
     * トップの .firm-row は top.css 側の指定を優先するためここでは対象外。
     * レビュー一覧は review.css（.review-main）でパディング・ロゴ列を管理するため対象外。
     * （ここに含めると 1 列目の縦パディングが 0.45rem になり、ロゴ円の下端が欠ける）
     */
    .pronavi-table-wrapper .comp-header > div,
    .pronavi-table-wrapper .comp-row > div,
    .pronavi-table-wrapper .coupon-header > div,
    .pronavi-table-wrapper .coupon-row > div,
    .pronavi-table-wrapper .bestseller-header > div,
    .pronavi-table-wrapper .bestseller-row > div,
    .pronavi-table-wrapper .challenge-header > div,
    .pronavi-table-wrapper .challenge-row > div,
    .pronavi-table-wrapper .detail-coupon-header > div,
    .pronavi-table-wrapper .detail-coupon-row > div {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }

    .pronavi-table-wrapper .comp-row > div:first-child,
    .pronavi-table-wrapper .comp-header > div:first-child,
    .pronavi-table-wrapper .coupon-row > div:first-child,
    .pronavi-table-wrapper .coupon-header > div:first-child {
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
        padding-left: 1rem !important;
        padding-right: 0.35rem !important;
    }

    .pronavi-table-wrapper .c-promo-btn {
        min-width: 0 !important;
        max-width: 108px !important;
        padding: 0.22rem 0.45rem !important;
        font-size: 0.62rem !important;
        gap: 1px !important;
    }

    .pronavi-table-wrapper .c-promo-btn .promo-main-text {
        font-size: 0.68rem !important;
    }

    .pronavi-table-wrapper .c-promo-btn .promo-sub-code {
        font-size: 0.55rem !important;
    }

    .pronavi-table-wrapper .c-action-btn {
        min-width: 0 !important;
        padding: 0.28rem 0.5rem !important;
        font-size: 0.68rem !important;
    }

    /* ※不要な縦線を消す */
    .common-row > div:first-child::after,
    .common-list-header > div:first-child::after,
    .firm-row > div:first-child::after,
    .comp-row > div:first-child::after,
    .comp-header > div:first-child::after,
    .review-row > div:first-child::after,
    .review-header > div:first-child::after,
    .challenge-row > .col-ch-logo::after,
    .challenge-header > .col-ch-logo::after,
    .detail-coupon-row > .col-dc-logo::after,
    .detail-coupon-header > .col-dc-logo::after,
    .bestseller-row > div:nth-child(1)::after,
    .bestseller-header > div:nth-child(1)::after {
        display: none !important;
    }
    /* ▲▲▲ 追加ここまで ▲▲▲ */
}





/* =========================================
   1. フィルター/ソートボタンのデザイン統一（全ページ共通）
========================================= */
/* 同上: スマホの「粘着 :hover」で解除後も薄青のままになるのを防ぐ */
@media (hover: hover) and (pointer: fine) {
    .filter-btn:hover:not(.active),
    .c-filter-btn:hover:not(.active),
    .bf-toggle:hover:not(.active) {
        background: #eff6ff !important;
        color: var(--color-main) !important;
        border-color: var(--color-main) !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1) !important;
        transform: translateY(-2px);
    }
}

.filter-btn.active,
.c-filter-btn.active,
.bf-toggle.active {
    background: var(--color-main) !important;
    color: #ffffff !important;
    border-color: var(--color-main) !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
    transform: translateY(-2px);
}


/* =========================================
   2. データ行ホバー(タップ)時の「左の青い線」をPC/スマホで美しく統一
========================================= */
/* 行全体の overflow を可視化し、バグを防ぐ */
.common-row, .firm-row, .challenge-row, .bestseller-row, 
.coupon-row, .review-row, .comp-row, .detail-coupon-row {
    position: relative !important;
    overflow: visible !important; 
}

/* ★修正: 青線が画面外に消えないよう、行全体ではなく「一番左のセル」の基準点にする */
.common-row > div:first-child, 
.firm-row > div:first-child, 
.challenge-row > .col-ch-logo,
.bestseller-row > div:first-child, 
.coupon-row > div:first-child, 
.review-row > div:first-child, 
.comp-row > div:first-child, 
.detail-coupon-row > .col-dc-logo {
    position: relative; /* PC等で sticky がない時のための基準点 */
}

/* ★修正: 一番左のセル（固定されるセル）に青い線を配置する */
.common-row > div:first-child::before, 
.firm-row > div:first-child::before, 
.challenge-row > .col-ch-logo::before, 
.bestseller-row > div:first-child::before, 
.coupon-row > div:first-child::before, 
.review-row > div:first-child::before, 
.comp-row > div:first-child::before, 
.detail-coupon-row > .col-dc-logo::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background-color: var(--color-main) !important;
    opacity: 0;
    transition: opacity 0.3s ease !important;
    z-index: 30 !important; 
    border-radius: 8px 0 0 8px !important; 
    display: block !important;
    pointer-events: none !important; /* タップの邪魔にならないようにする */
}

/* ★修正: 行(row)をホバー/タップした時に、その中の最初の子要素の青線を表示する */
.common-row:hover > div:first-child::before, 
.firm-row:hover > div:first-child::before, 
.challenge-row:hover > .col-ch-logo::before, 
.bestseller-row:hover > div:first-child::before, 
.coupon-row:hover > div:first-child::before, 
.review-row:hover > div:first-child::before, 
.comp-row:hover > div:first-child::before, 
.detail-coupon-row:hover > .col-dc-logo::before {
    opacity: 1 !important;
}





/* =========================================
   左側の青線（ホバー時）のバグ修正と最適化
========================================= */

/* 1. 古い設定（各ファイルの行全体への青線）を完全に無効化し、PCでの二重表示を防ぐ */
.common-row::before, .firm-row::before, .challenge-row::before, .bestseller-row::before, 
.coupon-row::before, .review-row::before, .comp-row::before, .detail-coupon-row::before {
    display: none !important;
    content: none !important;
}

/* ▼▼▼ ここから下を書き換え ▼▼▼ */

/* 2. 親カード自体の「内側余白（padding）」をゼロにする */
/* ※上下の高さは各セル（div）の中で担保するため、親はゼロでOK */
.common-row, .firm-row, .challenge-row, .bestseller-row, 
.coupon-row, .review-row, .comp-row, .detail-coupon-row {
    padding: 0 !important;
}

/* 一番左のセル（企業アイコン）の余白設定（PC/スマホ共通） */
/* ★ご要望通り、左の余白を 1rem に設定し、上下に 1.5rem を入れて高さを確保 */
.common-row > div:first-child, 
.firm-row > div:first-child, 
.coupon-row > div:first-child, 
.review-row > div:first-child, 
.comp-row > div:first-child, 
.detail-coupon-row > .col-dc-logo {
    padding: 1rem 0.35rem !important;
    border-radius: 8px 0 0 8px !important;
    position: relative; 
    height: 100% !important;
    box-sizing: border-box !important;
}

/* 一番右のセル（ボタン）の右側にも余白を持たせる */
.common-row > div:last-child, 
.firm-row > div:last-child, 
.challenge-row > div:last-child, 
.bestseller-row > div:last-child, 
.coupon-row > div:last-child, 
.review-row > div:last-child, 
.comp-row > div:last-child, 
.detail-coupon-row > div:last-child {
    padding-right: 1.5rem !important;
}

/* 真ん中にある各セルにも「上下の高さ」を持たせる */
.common-row > div, 
.firm-row > div, 
.challenge-row > div, 
.bestseller-row > div, 
.coupon-row > div, 
.review-row > div, 
.comp-row > div, 
.detail-coupon-row > div {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


/* --- PC表示（1201px以上）のヘッダー位置調整 --- */
/* ★ヘッダーの「企業名」の左余白も、データ行と同じ 1rem にして縦線を揃える */
@media (min-width: 1201px) {
    .common-list-header, .challenge-header, .detail-coupon-header, 
    .comp-header, .review-header, .bestseller-header, .coupon-header {
        padding-left: 1.5rem !important; 
        padding-right: 1.5rem !important; 
    }
    
    .common-list-header > div:first-child, 
    .challenge-header > div:first-child, 
    .detail-coupon-header > div:first-child, 
    .comp-header > div:first-child, 
    .review-header > div:first-child, 
    .coupon-header > div:first-child {
        padding-left: 1rem !important; /* データ行の1remと一致させる */
    }
    
    .common-list-header > div:last-child, 
    .challenge-header > div:last-child, 
    .detail-coupon-header > div:last-child, 
    .comp-header > div:last-child, 
    .review-header > div:last-child, 
    .bestseller-header > div:last-child, 
    .coupon-header > div:last-child {
        padding-right: 1.5rem !important;
    }
}


/* ベストセラーのみ1列目(順位)の余白を調整 */
.bestseller-row > div:first-child {
    padding-left: 1rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    border-radius: 8px 0 0 8px !important;
    position: relative;
    height: 100% !important;
}

/* 3. 新しい青線を、一番左のセルに描画する */
.common-row > div:first-child::before, 
.firm-row > div:first-child::before, 
.challenge-row > .col-ch-logo::before, 
.bestseller-row > div:first-child::before, 
.coupon-row > div:first-child::before, 
.review-row > div:first-child::before, 
.comp-row > div:first-child::before, 
.detail-coupon-row > .col-dc-logo::before {
    content: "" !important;
    position: absolute !important;
    left: -1px !important; 
    top: -1px !important;
    bottom: -1px !important;
    width: 4px !important;
    background-color: var(--color-main) !important;
    opacity: 0;
    transition: opacity 0.3s ease !important;
    z-index: 30 !important; 
    border-radius: 8px 0 0 8px !important; 
    display: block !important;
    pointer-events: none !important;
}

/* ホバー（タップ）で青線を表示 */
.common-row:hover > div:first-child::before, 
.firm-row:hover > div:first-child::before, 
.challenge-row:hover > .col-ch-logo::before, 
.bestseller-row:hover > div:first-child::before, 
.coupon-row:hover > div:first-child::before, 
.review-row:hover > div:first-child::before, 
.comp-row:hover > div:first-child::before, 
.detail-coupon-row:hover > .col-dc-logo::before {
    opacity: 1 !important;
}







/* =========================================
   最終パッチ：クーポンページの崩れ ＆ PCの縦線ズレ修復
========================================= */

/* 1. PC表示でヘッダーとデータ行の縦線を完全に一致させる */
@media (min-width: 1201px) {
    .common-list-header, .challenge-header, .detail-coupon-header, 
    .comp-header, .review-header, .bestseller-header, .coupon-header {
        padding-left: 1.5rem !important;  /* データ行に合わせてゼロにする */
        padding-right: 1.5rem !important; /* データ行に合わせてゼロにする */
    }
}

/* 2. クーポンページ特有のレイアウト崩れ（箱の縮み・二重枠）を解消 */
.firm-coupon-group {
    margin: 0 0 12px 0 !important; /* 内側に縮む原因だった左右の巨大マージンを消す */
    border-radius: 8px !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

/* グループの中に入る各行（クーポン）の不要な外枠をリセット */
.firm-coupon-group .coupon-row {
    border: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* 最後の行の区切り線は消す */
.firm-coupon-group .coupon-row:last-child {
    border-bottom: none !important;
}




/* =========================================
   クーポンページ専用レスポンシブ修正
   ★ファイル末尾に記述することで、後から読み込まれる
     coupon.cssの設定より優先させる
========================================= */
@media (max-width: 1200px) {

    /* 縦区切り線の位置をヘッダーと揃える */
    .coupon-row > div:not(:last-child)::after {
        right: 0 !important;
        top: 20% !important;
        height: 60% !important;
        display: block !important;
    }

    /* #coupon-containerをmax-content幅にして
       pronavi-table-wrapperのscroll widthを正しく計算させる */
    #coupon-container {
        width: max-content !important;
        min-width: 100% !important;
    }

    /* firm-coupon-groupのoverflow:hiddenを解除して
       横スクロールとposition:stickyを有効にする */
    .firm-coupon-group {
        overflow: visible !important;
        width: max-content !important;
        min-width: 100% !important;
    }
}


/* ロゴ列（sticky）と企業名列（スクロール）に分離したため、
   JS制御によるフェードアウトは不要になりました */

/* =========================================
   メルマガ用カスタムチェック（ウェルカムモーダル・マイページ共通）
========================================= */
.pronavi-mailmag-check-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #1e293b;
    line-height: 1.55;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.pronavi-mailmag-check-label:hover {
    border-color: #7dd3fc;
}

.pronavi-mailmag-check-input {
    -webkit-appearance: none;
    appearance: none;
    margin-top: 0.15rem;
    flex-shrink: 0;
    width: 1.3rem;
    height: 1.3rem;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.pronavi-mailmag-check-input:hover {
    border-color: #94a3b8;
}

.pronavi-mailmag-check-input:focus {
    outline: none;
}

.pronavi-mailmag-check-input:focus-visible {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.45);
}

.pronavi-mailmag-check-input:checked {
    background: #0ea5e9;
    border-color: #0284c7;
}

.pronavi-mailmag-check-input:checked::after {
    content: '';
    position: absolute;
    left: 0.37rem;
    top: 0.13rem;
    width: 0.34rem;
    height: 0.68rem;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    box-sizing: border-box;
}

/* =========================================
   マイページ：メルマガ購読のご案内（ウェルカムモーダル風）
========================================= */
.pronavi-mailmag-cta-wrap {
    margin-bottom: 2.5rem;
    padding: 3px;
    border-radius: 20px;
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 35%, #c084fc 65%, #fb7185 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.pronavi-mailmag-cta-panel {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 48%, #f1f5f9 100%);
    border-radius: 17px;
    padding: 1.55rem 1.45rem 1.35rem;
    overflow: hidden;
}

.pronavi-mailmag-cta-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #6366f1, #a855f7, #ec4899);
    border-radius: 17px 17px 0 0;
}

.pronavi-mailmag-cta__ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 0.75rem;
    padding: 0.35rem 0.95rem 0.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(14, 165, 233, 0.25);
    box-sizing: border-box;
}

.pronavi-mailmag-cta__ribbon-text {
    font-size: 0.8rem;
    font-weight: 700;
    background: linear-gradient(90deg, #0284c7, #7c3aed, #db2777);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pronavi-mailmag-cta__title {
    margin: 0 0 0.65rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.35;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    text-align: center;
}

.pronavi-mailmag-cta__title .fa-envelope-open-text {
    color: #0ea5e9;
    font-size: 1.05rem;
}

.pronavi-mailmag-cta__intro {
    margin: 0 0 1rem;
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.7;
}

.pronavi-mailmag-cta__listbox {
    text-align: left;
    margin: 0 0 1.15rem;
    padding: 1rem 1.1rem 1.05rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.9) 0%, rgba(238, 242, 255, 0.85) 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.08);
}

.pronavi-mailmag-cta__listbox .pronavi-mailmag-benefits {
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.75;
}

.pronavi-mailmag-cta__listbox .pronavi-mailmag-benefits li {
    margin-bottom: 0.35rem;
}

.pronavi-mailmag-cta__listbox .pronavi-mailmag-benefits li:last-child {
    margin-bottom: 0;
}

.pronavi-mailmag-cta__listbox .pronavi-mailmag-benefits__mark {
    color: #64748b;
}

.pronavi-mailmag-cta__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.78rem 1.35rem;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pronavi-mailmag-cta__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(14, 165, 233, 0.5);
}

.pronavi-mailmag-cta-panel .pronavi-mailmag-submit-row {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* マイページ CTA 内の同意文（スマホでやや小さく） */
@media (max-width: 600px) {
    .pronavi-mailmag-cta-panel .pronavi-mailmag-check-label {
        font-size: 0.8rem;
    }
}

/* =========================================
   会員登録完了ウェルカムモーダル（装飾・大型）
========================================= */
body.pronavi-welcome-modal-open {
    overflow: hidden;
}

.pronavi-welcome-modal {
    position: fixed;
    inset: 0;
    z-index: 10000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-sizing: border-box;
    animation: pronavi-welcome-in 0.35s ease-out;
}

.pronavi-welcome-modal--hide {
    animation: pronavi-welcome-out 0.28s ease-in forwards;
}

@keyframes pronavi-welcome-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pronavi-welcome-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.pronavi-welcome-modal__backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 80% at 50% 30%, rgba(14, 165, 233, 0.18), transparent 55%),
        rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(6px);
}

.pronavi-welcome-modal__shell {
    position: relative;
    width: 100%;
    max-width: 560px;
    z-index: 1;
    padding: 3px;
    border-radius: 22px;
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 35%, #c084fc 65%, #fb7185 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.35) inset,
        0 28px 70px rgba(14, 165, 233, 0.35),
        0 14px 40px rgba(15, 23, 42, 0.35);
}

.pronavi-welcome-modal__panel {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 48%, #f1f5f9 100%);
    border-radius: 19px;
    padding: 2rem 1.85rem 1.65rem;
    text-align: center;
    overflow: hidden;
    z-index: 1;
}

.pronavi-welcome-modal__panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #0ea5e9, #6366f1, #a855f7, #ec4899);
    border-radius: 19px 19px 0 0;
}

.pronavi-welcome-modal__ribbon {
    margin: 0.35rem auto 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(14, 165, 233, 0.25);
}

.pronavi-welcome-modal__ribbon-text {
    font-size: 0.82rem;
    font-weight: 700;
    background: linear-gradient(90deg, #0284c7, #7c3aed, #db2777);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pronavi-welcome-modal__x {
    position: absolute;
    top: 0.65rem;
    right: 0.7rem;
    border: none;
    background: rgba(248, 250, 252, 0.95);
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    font-size: 1.35rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    z-index: 3;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.pronavi-welcome-modal__x:hover {
    color: #0f172a;
    background: #fff;
}

.pronavi-welcome-modal__icon {
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.15rem;
    color: #fff;
    background: linear-gradient(145deg, #22c55e, #16a34a);
    border-radius: 50%;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.2),
        0 10px 24px rgba(22, 163, 74, 0.35);
}

.pronavi-welcome-modal__title {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.pronavi-welcome-modal__lead {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7;
    text-align: left;
}

.pronavi-welcome-modal__list-box {
    text-align: left;
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem 1.05rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.9) 0%, rgba(238, 242, 255, 0.85) 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.08);
}

.pronavi-welcome-modal__list-heading {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.pronavi-welcome-modal__list {
    margin: 0;
    padding: 0 0 0 1.1em;
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.75;
    list-style: none;
}

.pronavi-welcome-modal__list li {
    position: relative;
    margin-bottom: 0.3rem;
}

.pronavi-welcome-modal__list li:last-child {
    margin-bottom: 0;
}

.pronavi-welcome-modal__list li::before {
    content: '-';
    position: absolute;
    left: -1.1em;
    color: #64748b;
    font-weight: 600;
}

.pronavi-welcome-modal__subscribe {
    margin: 0 0 0.85rem;
    padding: 0;
    border: none;
    text-align: left;
}

.pronavi-welcome-modal__btn {
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.78rem 1.1rem;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.pronavi-welcome-modal__btn--primary {
    margin-bottom: 0.65rem;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
}

.pronavi-welcome-modal__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(14, 165, 233, 0.5);
}

.pronavi-welcome-modal__btn--secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.pronavi-welcome-modal__btn--secondary:hover {
    background: #e2e8f0;
    color: #334155;
}

@media (max-width: 520px) {
    .pronavi-welcome-modal__panel {
        padding: 1.65rem 1.2rem 1.35rem;
    }

    .pronavi-welcome-modal__title {
        font-size: 1.15rem;
    }

    .pronavi-welcome-modal__shell {
        max-width: 100%;
    }
}

/* メルマガ購読完了トースト（ウェルカムモーダル経由） */
.pronavi-mailmag-subscribed-toast {
    position: fixed;
    top: calc(var(--header-height, 64px) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000001;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    max-width: min(520px, calc(100vw - 2rem));
    padding: 0.85rem 1rem 0.85rem 1.1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #6ee7b7;
    color: #065f46;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    animation: pronavi-welcome-in 0.35s ease-out;
}

.pronavi-mailmag-subscribed-toast--warn {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-color: #fcd34d;
    color: #92400e;
}

.pronavi-mailmag-subscribed-toast--hide {
    opacity: 0;
    transition: opacity 0.28s ease;
}

.pronavi-mailmag-subscribed-toast > span:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
}

.pronavi-mailmag-subscribed-toast__close {
    margin-left: auto;
    border: none;
    background: none;
    font-size: 1.35rem;
    line-height: 1;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
    padding: 0.15rem 0.25rem;
}

.pronavi-mailmag-subscribed-toast__close:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .pronavi-mailmag-subscribed-toast {
        left: calc(0.75rem + env(safe-area-inset-left, 0px));
        right: calc(0.75rem + env(safe-area-inset-right, 0px));
        transform: none;
        max-width: none;
        width: auto;
        box-sizing: border-box;
        border-radius: 12px;
        padding-left: 1rem;
        padding-right: 0.85rem;
    }
}