/* 公開サイト共通スタイル。SOURCE_MATERIAL/template/nikko-eBook/style.css を踏襲。
   個別画面のスタイルは {screenName}.css で別途定義する。*/

/* ============================================================
   メインコンテナ
   ============================================================ */
.main-container { min-height: calc(100vh - 140px); }

/* ============================================================
   サイドバー（雑誌シリーズ一覧）
   ============================================================ */
.sticky-sidebar {
    position: sticky;
    top: 80px;
    height: calc(100vh - 100px);
    overflow-y: auto;
}
@media (max-width: 991.98px) {
    .desktop-sidebar { display: none; }
}

.magazine-list { padding: 0 8px; }

.magazine-item {
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    border: 2px solid transparent;
    transition: var(--transition);
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
    background-color: transparent;
}

.magazine-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.magazine-item:hover {
    border-color: rgba(15, 63, 131, 0.2);
    background-color: rgba(15, 63, 131, 0.02);
}

.magazine-item.active {
    border-color: var(--primary-color);
    background-color: var(--white);
    box-shadow: 0 4px 15px rgba(15, 63, 131, 0.12);
}

/* バナー画像（カテゴリのバナー画像が登録されている場合） */
.magazine-item-img {
    display: block;
    width: 100%;
}
.magazine-item-img img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* バナー画像が無いカテゴリ用のテキストカード（フォールバック） */
.magazine-item-text {
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary-color);
    background: var(--white);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* 未契約カテゴリ：ロゴ画像自体をグレーアウト＋リンク無効化（プレミアム TOP のサイドバー） */
.magazine-item-locked {
    cursor: not-allowed;
}
.magazine-item-locked img,
.magazine-item-locked .magazine-item-text {
    filter: grayscale(100%);
    opacity: 0.4;
}
.magazine-item-locked .magazine-item-text {
    color: #8a8f96;
}
.magazine-item-locked:hover {
    border-color: transparent;
    background-color: transparent;
}

/* サイドバー下部 CTA */
.sidebar-footer { padding: 0 8px; }

.sidebar-footer .btn-cta-plan {
    background: var(--accent-color);
    border: none;
    color: var(--white);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sidebar-footer .btn-cta-plan:hover {
    filter: brightness(1.1);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    color: var(--white);
}
.sidebar-footer .btn-cta-contact {
    background: var(--primary-color);
    border: none;
    color: var(--white);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sidebar-footer .btn-cta-contact:hover {
    background: var(--primary-dark);
    color: var(--white);
    transform: translateY(-1px);
}

/* ============================================================
   ヘッダー行（検索・年月・合計）
   ============================================================ */
.search-input-group {
    max-width: 300px;
    position: relative;
}
.search-input-group .form-control {
    border-radius: 50px;
    padding-left: 1.5rem;
    background-color: var(--white);
    border: 1px solid #dee2e6;
}

.total-count-badge {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(15, 63, 131, 0.15);
}

/* ============================================================
   雑誌カード
   ============================================================ */
.book-card {
    background: transparent;
    border: none;
    transition: var(--transition);
    padding: 1rem;
    border-radius: 12px;
}
.book-card:hover {
    background-color: var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.book-cover {
    position: relative; /* 概要コメント吹き出しの基準 */
    width: 100%;
    aspect-ratio: 1 / 1.4;
    background: #eee;
    border-radius: 4px;
    /* overflow は visible：吹き出しを画像枠の外（上）へ飛び出させるため。
       画像の角丸は img / placeholder 側で個別に維持する。 */
    overflow: visible;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: var(--transition);
}

/* 表紙画像ホバーで表示する概要コメント（管理画面で登録した summary）。
   画像枠の外（上）へ飛び出して表示し、下向きの吹き出し口が画像上端から出て本体へつながる。
   背景は薄い青灰 #e9eff6・文字/枠は濃紺 #102a4c。スタンダード(青)/プレミアム(金)どちらにも
   中立で、コントラスト比 12.45:1（WCAG AAA）を確保する。
   文字数に応じて幅・高さが可変（スクロールしない）。
   吹き出し口は濃紺(::before)＋背景色(::after)の二重三角で枠線を表現する。 */
.cover-comment {
    position: absolute;
    left: 50%;
    translate: -50% 0; /* 横中央寄せ（transform はアニメーション用に空けておく） */
    bottom: calc(100% + 4px); /* 画像の上に飛び出す。しっぽは画像上端側へ伸ばす */
    width: max-content; /* 文字数に応じて幅が可変 */
    min-width: 120px;
    /* 横幅を広めに取り、長文でも高さを抑える（高すぎるとヘッダに隠れるため）。
       モバイルでは画面外に出ないよう 92vw を上限にする。入力上限255文字なら高さは
       おおむね160px前後に収まり、スクロールは不要。 */
    max-width: min(400px, 92vw);
    background-color: #e9eff6;
    color: #102a4c;
    border: 2px solid #102a4c;
    border-radius: 8px; /* 角丸の長方形 */
    box-shadow: 0 6px 16px rgba(16, 42, 76, 0.25);
    /* 背景を透けさせないため opacity は使わない。表示切替は visibility のみで行う。 */
    visibility: hidden;
    transform: translateY(6px); /* 下からせり上がる動き */
    transition: transform 0.25s ease, visibility 0.25s ease;
    pointer-events: none; /* ホバーのちらつき防止 */
    z-index: 5;
    /* overflow は visible のまま：しっぽ(::before/::after)を本体外に描画しクリップさせない */
}
/* テキスト領域。スクロールはせず、内容に応じて高さが伸びる。 */
.cover-comment-text {
    padding: 0.5rem 0.6rem;
    font-size: 0.76rem;
    line-height: 1.5;
    text-align: left;
    white-space: pre-wrap; /* 登録時の改行を保持 */
    word-break: break-word;
}
/* しっぽ（下向き三角）：外側＝枠線色(濃紺)。本体の下に出る */
.cover-comment::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 14px 8px 0 8px;
    border-color: #102a4c transparent transparent transparent;
    translate: -50% 100%;
}
/* しっぽ（下向き三角）：内側＝背景色。外側より小さく・2px上げて濃紺縁を残す */
.cover-comment::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 11px 5.4px 0 5.4px;
    border-color: #e9eff6 transparent transparent transparent;
    translate: -50% calc(100% - 2px);
}
.book-cover:hover .cover-comment {
    visibility: visible;
    transform: translateY(0);
}
.book-card:hover .book-cover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px; /* book-cover の overflow:visible 化に伴い画像側で角丸を維持 */
    display: block;
}
.book-cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #d6e0ee 0%, #e8eef7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b3c1d5;
    font-size: 2rem;
    border-radius: 4px; /* 同上 */
}

/* 公開から1週間以内の雑誌に付く NEW バッジ（表紙画像の左上）。
   目立つ赤系グラデーションで視認性を高める。 */
.new-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 4;
    padding: 2px 9px;
    background: linear-gradient(135deg, #ff5252 0%, #e60023 100%);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.45;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(214, 0, 30, 0.5);
    pointer-events: none; /* クリック操作を妨げない */
}

/* ページネーション（参照テンプレ SOURCE_MATERIAL/template/nikko-eBook/style.css 準拠） */
.pagination {
    --bs-pagination-color: var(--primary-color);
    --bs-pagination-hover-color: var(--accent-color);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(15, 63, 131, 0.1);
}
.page-item.active .page-link {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}
.page-link {
    border: none;
    margin: 0 3px;
    border-radius: 6px !important;
    font-weight: 600;
}

.book-issue-date {
    font-size: 0.7rem;
    color: #6c757d;
    margin-bottom: 2px;
    font-weight: 600;
}
.book-title {
    font-size: 0.85rem;
    line-height: 1.3;
    font-weight: 700;
    color: var(--primary-color);
}

/* ============================================================
   ボタン（tier 色）
   ============================================================ */
.btn-accent {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--white);
}
/* プレミアム時は accent=ゴールドで白文字が沈むため、文字色を紺に切り替える
   （サイト全体の「ゴールド地＝紺文字」ルールに統一。緑/青ティアは白文字のまま）。
   ホバー時も白地に紺文字で可読性を確保する。 */
body[data-tier="premium"] .btn-accent {
    color: var(--primary-color);
    font-weight: 700; /* 金地×紺字は太字で可読性を確保 */
}
body[data-tier="premium"] .btn-accent:hover {
    color: var(--primary-color) !important;
}
.btn-accent:hover {
    background-color: var(--white) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
    filter: none;
}
.btn-sample {
    background-color: var(--sample-color);
    border-color: var(--sample-color);
    color: var(--white);
}
.btn-sample:hover {
    background-color: var(--white) !important;
    border-color: var(--sample-color) !important;
    color: var(--sample-color) !important;
}
.btn-standard {
    background-color: var(--standard-color);
    border-color: var(--standard-color);
    color: var(--white);
}
.btn-standard:hover {
    background-color: var(--white) !important;
    border-color: var(--standard-color) !important;
    color: var(--standard-color) !important;
}
.btn-premium {
    background-color: var(--premium-color);
    border-color: var(--premium-color);
    color: var(--primary-color);
    font-weight: 700;
}
.btn-premium:hover {
    background-color: var(--white) !important;
    border-color: var(--premium-color) !important;
    color: var(--primary-color) !important;
    filter: brightness(1.05);
}

/* ============================================================
   お知らせカード
   ============================================================ */
.notice-card {
    /* 背景はティア色（--accent-color）をベースに薄めた淡色。サンプル/スタンダード=緑系・プレミアム=金系に追従。
       左側の罫線（旧 primary 色）は廃止。color-mix 非対応ブラウザ向けに淡色フォールバックを先に指定。 */
    background: #f3faf7;
    background: color-mix(in srgb, var(--accent-color) 10%, #fff);
    /* ページ背景(--bg-light)と馴染みすぎないよう、ティア色の縁取りで境界（囲み感）を出す */
    border: 1px solid #9fd6c5;
    border: 1px solid color-mix(in srgb, var(--accent-color) 50%, #fff);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.notice-card h6 {
    color: var(--primary-color);
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.notice-card h6 .material-symbols-outlined {
    font-size: 20px;
    margin-right: 8px;
    color: var(--accent-color);
}
.notice-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #555;
    font-size: 0.9rem;
}
.notice-card li {
    display: flex;
    align-items: baseline;
    margin-bottom: 4px;
}
.notice-card li::before {
    content: "・";
    margin-right: 6px;
    color: var(--accent-color);
}

/* ============================================================
   fadeIn アニメーション
   ============================================================ */
.fade-in { animation: fadeIn 0.5s ease forwards; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ナビバー
   ============================================================ */
.site-navbar { background-color: var(--primary-color) !important; }
/* スマホ専用ヘッダのハンバーガー（暗色ナビ上に白アイコン） */
.header-hamburger {
    color: #fff;
    background: transparent;
    border: none;
    line-height: 1;
}
.header-hamburger:hover,
.header-hamburger:focus { color: #fff; opacity: 0.85; }
.header-hamburger .material-symbols-outlined { font-size: 28px; vertical-align: middle; }

/* PC 用：ヘッダ右に常時表示する CTA（旧サイドバー下部の導線を移設）。暗色ナビ上で見えるよう塗り／アウトラインを使い分ける */
.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.2;
    padding: 7px 16px;
    border-radius: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.25s ease;
}
/* プラン詳細など主要 CTA：アクセント塗り */
.header-cta-accent {
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: var(--white);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.header-cta-accent:hover {
    filter: brightness(1.1);
    color: var(--white);
    transform: translateY(-1px);
}
/* プレミアム導線 CTA：金地×紺字で「特別な入口」を視覚的に差別化（暗色ナビ上でも視認性高い） */
.header-cta-premium {
    background: var(--premium-color);
    border: 1px solid var(--premium-color);
    color: var(--primary-color);
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.header-cta-premium:hover {
    filter: brightness(1.05);
    color: var(--primary-color);
    transform: translateY(-1px);
}
/* お問い合わせなど副次 CTA：白アウトライン */
.header-cta-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: #fff;
    font-weight: 600;
}
.header-cta-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateY(-1px);
}

/* ナビ直下の便益周知バー：押す前にプラン便益を一目で伝える（紺ナビと対比する淡い金地で「上位プランあり」を示唆） */
.header-promo {
    position: relative;
    background: #FFF8E1;
    border-bottom: 1px solid rgba(15, 63, 131, 0.12);
    color: var(--primary-color);
    font-size: 0.85rem;
    line-height: 1.45;
    padding: 8px 44px;
    text-align: center;
}
.header-promo-inner {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 14px;
}
.header-promo .promo-icon {
    font-size: 18px;
    vertical-align: -4px;
    color: #B8860B; /* 金地に映えるダークゴールド */
}
.header-promo-msg strong { font-weight: 700; }
.header-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none; /* 下線はラベルのみに適用し、矢印アイコンとの下線ずれを防ぐ */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
}
.header-promo-cta-label { text-decoration: underline; }
.header-promo-cta:hover { color: var(--accent-color); }
.header-promo-dismiss {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: inline-flex;
    background: none;
    border: none;
    color: rgba(15, 63, 131, 0.55);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.header-promo-dismiss:hover { color: var(--primary-color); }
@media (max-width: 575.98px) {
    .header-promo { font-size: 0.78rem; padding: 7px 36px; }
}

.navbar-logo-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--white);
    text-decoration: none;
}
.logo-main { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.5px; }
.logo-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0.9;
    letter-spacing: 1px;
}
.logo-divider {
    width: 2px;
    height: 1.2rem;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 0 2px;
}

/* ============================================================
   フッター
   ============================================================ */
.site-footer {
    background-color: var(--primary-color);
    color: var(--white);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.site-footer a { color: var(--white); }

/* ============================================================
   プラン比較表（アップグレードモーダル内）
   ============================================================ */
.pricing-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.pricing-matrix th {
    background: #f8f9fa;
    font-weight: 700;
    text-align: center;
    padding: 1rem;
    border-bottom: 2px solid #adb5bd;
}
.pricing-matrix td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #ced4da;
    vertical-align: middle;
}
.pricing-matrix .feature-name {
    text-align: left;
    font-weight: 600;
    background: var(--white);
}
/* 可否アイコン。視認性のため濃色＋太字＋やや大きめに。可＝緑○／不可＝赤×／一部可＝青△ */
.check-icon { color: #198754; font-weight: 700; font-size: 1.05rem; }
.cross-icon { color: #dc3545; font-weight: 700; font-size: 1.05rem; }

/* おすすめの使い方（各プランのキャッチ）はキャプション調の控えめな文字に */
.pricing-matrix .usecase-row td { background: #fbfcfe; }
.pricing-matrix .plan-usecase {
    font-size: 0.85rem;
    color: #343a40;
    line-height: 1.4;
}
/* 「契約内容により異なります」など金額欄の補足テキスト */
.pricing-matrix .price-note { font-size: 0.85rem; color: #343a40; }

/* 列の区画分け：各プラン列（2=サンプル / 3=スタンダード / 4=プレミアム）の背景に
   そのプラン色を薄く敷く。第1列（機能名）は白のまま残し、縦の帯としてプランを判別しやすくする。
   .usecase-row td 等の行背景指定より後ろに置き、同特異度の競合で列 tint を優先させる。 */
.pricing-matrix th:nth-child(2),
.pricing-matrix td:nth-child(2) { background-color: rgba(0, 184, 148, 0.07); }   /* サンプル：#00b894 */
.pricing-matrix th:nth-child(3),
.pricing-matrix td:nth-child(3) { background-color: rgba(9, 132, 227, 0.07); }   /* スタンダード：#0984e3 */
.pricing-matrix th:nth-child(4),
.pricing-matrix td:nth-child(4) { background-color: rgba(255, 210, 31, 0.12); }  /* プレミアム：#FFD21F（黄は薄く見えるため僅かに濃く） */
/* 「詳細を見る」ボタン：枠線色は各ティア色（インライン指定）、文字は紺で可読性を確保 */
/* 「詳細を見る」：背景・枠線色はティア色をインライン指定し、文字は白で塗りつぶし表示。
   比較表（PC）とスマホ縦積みカードの両方で使うためスコープは付けない。 */
.btn-plan-detail {
    border: 1px solid transparent;
    color: #fff; /* 既定は白。プレミアム等はインラインで文字色を上書き（金地は紺字） */
    font-weight: 600;
}
.btn-plan-detail:hover { opacity: 0.9; }

/* ============================================================
   スタンダード版 プラン詳細ページ（plan-standard.php）
   ============================================================ */
.plan-card-header { background: var(--standard-color); }
.plan-card .plan-features li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.plan-card .pf-label { color: #555; }
.plan-card .pf-val { font-weight: 600; white-space: nowrap; }
.plan-card .plan-meta dt { font-size: 0.78rem; color: #888; margin-top: 0.5rem; }
.plan-card .plan-meta dd { margin: 0; font-size: 0.95rem; }
.plan-card .plan-note { line-height: 1.5; }
/* 一部可（△）。可＝.check-icon／不可＝.cross-icon を流用 */
.partial-icon { color: #0a64b0; font-weight: 700; font-size: 1.05rem; }

/* ============================================================
   スマホ：プラン比較の縦積みカード（lg未満。PCは比較表を表示）
   ============================================================ */
.plan-compare-card .card-header { font-size: 1rem; }
.plan-compare-card .compare-usecase {
    font-size: 0.88rem;
    color: #343a40;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.plan-compare-card .compare-line {
    border-bottom: 1px solid #e3e7eb;
    font-size: 0.92rem;
}
.plan-compare-card .compare-line:last-child { border-bottom: none; }
.plan-compare-card .compare-feature { color: #343a40; white-space: nowrap; }
.plan-compare-card .compare-value { text-align: right; font-weight: 600; color: #212529; }

/* プレミアム詳細ページ：ヘッダは金地に紺文字（白文字は視認性が低いため）。価格は大きく強調。 */
.plan-card-header--premium {
    background: var(--premium-color);
    color: var(--primary-color);
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
    font-weight: 700; /* 金地×紺字は太字で可読性を確保 */
}
.plan-price-hero { font-size: 1.9rem; font-weight: 700; color: var(--primary-color); }
.plan-note-block .plan-note { padding-left: 1.1rem; }
.plan-note-block .plan-note li { margin-bottom: 0.25rem; }

/* ============================================================
   空状態
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #adb5bd;
}

/* ============================================================
   セクション見出し（汎用）
   ============================================================ */
.section-title {
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e9ee;
}

/* ============================================================
   発行年月 絞り込みフローティングボタン（FAB・サイト共通）
   サンプル/スタンダード/プレミアム TOP で共用。
   ドットは --accent-color でティア別配色に追従。
   ============================================================ */
.filter-fab-wrap {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1040;
}
.filter-fab {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.filter-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
}
.filter-fab .material-symbols-outlined { font-size: 26px; }
/* 絞り込み中インジケータ（ドット） */
.filter-fab .filter-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-color);
    border: 2px solid #fff;
    display: none;
}
.filter-fab.is-active .filter-dot { display: block; }
/* 展開パネル */
.filter-panel {
    position: absolute;
    right: 0;
    bottom: 70px;
    width: 230px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 16px;
    display: none;
}
.filter-panel.show { display: block; }
.filter-panel h6 {
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 12px;
}
.filter-panel .form-select { margin-bottom: 10px; }
.filter-panel .filter-reset { color: var(--primary-color); text-decoration: none; }
.filter-panel .filter-reset:hover { text-decoration: underline; }
/* PC（lg+）：FABボタンは使わず、絞り込みパネル自体を画面右下に常時フロート表示（fixed の .filter-fab-wrap によりスクロール追従）。
   ボタンが無くなる分、パネルを下端（bottom:0＝wrapの bottom:24px）へ寄せる。 */
@media (min-width: 992px) {
    .filter-fab { display: none; }
    .filter-panel { display: block; bottom: 0; }
    .filter-panel .btn-close { display: none; }
}
@media (max-width: 575.98px) {
    .filter-fab-wrap { right: 16px; bottom: 16px; }
}