/* ============================================================
css/home.css — トップページ（index.php）固有CSS
SEO M-10（2026-08-27）: index.php の $pageHeadStyle（インライン約490行）を
外部ファイル化した。HTML は no-cache で毎回全転送されるため、?v=（assetUrl の
mtimeキャッシュバスト）付き外部CSSにしてブラウザキャッシュ（7日）を効かせる。
内容は旧インラインCSSの完全な写し（変更なし）。
============================================================ */
/* ===== トップ（2カラム・詰め込み）：影なし・角丸0・1.5pxボーダー ===== */
.hm{max-width:1200px;margin:0 auto;padding:10px 28px 48px;color:var(--text);box-sizing:border-box}
.hm a{text-decoration:none;color:inherit}
.hm b,.hm time{font-variant-numeric:tabular-nums}
/* ── ヒーロー帯（未ログイン or 投稿0件のみ表示。list-page-head を拡張） ── */
.v5-head{padding:36px 0!important}
.v5-head-inner{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.v5-head-text{flex:1;min-width:260px}
.v5-head-text h1{display:block!important;font-size:var(--fs-h1);line-height:1.3;font-weight:900;letter-spacing:-.02em;color:#e4e6ed;margin:0;gap:0!important}
.v5-ul{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.v5-head-text p{color:#9aa1ad;font-size:var(--fs-base);margin:10px 0 0;line-height:1.55}
.v5-head-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff!important;border:1.5px solid var(--accent);border-radius:0;padding:13px 26px;font-weight:900;font-size:var(--fs-base);white-space:nowrap;transition:.18s;text-decoration:none}
.v5-head-btn:hover{background:transparent;color:var(--accent)!important}
/* ── 特典クエスト帯（最上段・全幅。見出し右端に投稿ボタン） ── */
/* 最新チャットのティッカー（クエスト帯の上・1行固定・省略表示） */
.hm-chat-ticker{display:flex;align-items:center;gap:10px;border:1.5px solid var(--text);background:var(--bg2);margin-bottom:10px;text-decoration:none;color:var(--text);transition:.1s}
.hm-chat-ticker[hidden]{display:none}
.hm-chat-ticker:hover{background:var(--bg)}
.hm-ct-label{flex:0 0 auto;display:flex;align-items:center;box-sizing:border-box;height:38px;padding:0 12px;background:var(--text);color:#fff;font-size:var(--fs-sm);font-weight:900;letter-spacing:.1em;line-height:1}
.hm-ct-body{flex:1 1 auto;min-width:0;padding-right:12px;font-size:var(--fs-sm);font-weight:700;overflow:hidden}
.hm-ct-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .25s ease,opacity .25s ease}
.hm-ct-item.is-out{transform:translateY(-115%);opacity:0} /* 上へスライドして退場 → 下から入場 */
.hm-ct-item .hm-ct-name{font-weight:900;margin-right:6px}
/* クエスト帯の色はこの3変数だけで管理。2026-09-06 に青→赤（--accent）へ戻し、
直下のおすすめ記事帯（.hm-pickup）側を青にして区別する */
.hm-questband{margin:0 0 16px;--qb:var(--accent);--qb-dark:var(--accent);--qb-bg:var(--red-bg,#fdecec)} /* 直下のおすすめ記事帯との間隔。pickup の下マージンと同じ16px */
.hm-questband .v5-block-quests{border:1.5px solid var(--text);background:var(--bg2)}
.hm .v5-quest-lead{display:flex;align-items:center;gap:8px;box-sizing:border-box;height:38px;padding:0 12px;background:var(--qb);color:#fff;font-size:var(--fs-sm);font-weight:900;letter-spacing:.1em;border-bottom:1px solid var(--text);line-height:1} /* .hm-mod-h と同じ固定高さ38px */
/* 「全部見る」開閉ボタン（モバイル専用。PCは全件表示なので非表示） */
.hm .v5-quest-toggle{display:none;margin-left:auto;appearance:none;background:none;border:1.5px solid #fff;color:#fff;font:inherit;font-size:var(--fs-xs);font-weight:900;line-height:1;padding:4px 10px;cursor:pointer}
.hm .v5-quest-toggle:hover{background:#fff;color:var(--qb)}
/* ── お知らせ ── */
.hm-announce{display:flex;align-items:center;gap:12px;border:1.5px solid var(--text);background:#e9f1ff;padding:10px 14px;margin-top:10px;font-size:var(--fs-sm);line-height:1.8}
.hm-announce.important{background:#fdeaea}
.hm-announce em{font-style:normal;flex:0 0 auto;font-size:var(--fs-xs);font-weight:900;background:#2563eb;color:#fff;padding:3px 10px}
.hm-announce.important em{background:#dc2626}
.hm-announce .lnk{color:#2563eb;font-weight:900;white-space:nowrap;margin-left:4px}
.hm-announce.important .lnk{color:#dc2626}
/* ── 2カラム（左サイド260px） ── */
.hm-cols{display:grid;grid-template-columns:260px minmax(0,1fr);gap:10px;align-items:start;margin-top:10px}
/* ── サイド：記事検索バー ── */
.hm-search{display:flex;box-sizing:border-box;height:39.5px;border:1.5px solid var(--text);background:var(--bg2);margin-bottom:10px} /* タブの黒い見た目(38+枠1.5)と同じ高さ */
.hm-search input{flex:1;min-width:0;appearance:none;border:none;background:none;padding:0 12px;font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.hm-search input:focus{outline:none;background:var(--bg)}
.hm-search input::placeholder{color:var(--text4);font-weight:700}
.hm-search button{appearance:none;flex:0 0 auto;border:none;border-left:1.5px solid var(--text);background:var(--text);color:#fff;padding:0 14px;font-size:var(--fs-sm);cursor:pointer;transition:.1s}
.hm-search button:hover{background:var(--accent)}
/* モバイル専用検索欄（タブ行の上）：PCでは非表示。モバイルではこちらを表示し、サイドの検索欄を隠す */
.hm-search-sp{display:none;margin:10px 0 0}
@media(max-width:900px){
.hm-search-sp{display:flex}
.hm-side>.hm-search{display:none}
/* 検索欄の上にも全幅の区切り線（タブ行の線と同じ描き方＝疑似要素100vw）。
線は form の外側 14px 上＝下側の「検索欄→タブ行の線」の間隔（.v5-tabs margin-top:14px）と
同じにして上下のマージンを揃える。（form 自体に padding を足すと枠内が空くため外側に描く） */
.hm-search-sp{position:relative;margin-top:24px} /* 線の上の余白 ≒ 24 − 15.5 ＝ 8.5px（下の線とのバランスで少し詰める） */
/* top は「間隔14px＋線の太さ1.5px」。border-top は top 位置から下向きに描かれるため、
線の太さ分を引かないと下側（.v5-tabs margin-top:14px）と揃わない */
.hm-search-sp::before{content:'';position:absolute;top:-15.5px;left:calc(50% - 50vw);width:100vw;border-top:1.5px solid var(--text)}
/* モバイル：タブ行の上・記事表示パネルの下に区切り線。画面の左右いっぱいに伸ばすため、
枠線ではなく疑似要素(100vw)で全幅の線を描く（コンテナの左右余白を無視して画面端まで）。
表示中パネルのみ下線が出る。 */
.v5-tabs{position:relative;margin-top:14px;padding-top:22px}
.v5-tabs::before{content:'';position:absolute;top:0;left:calc(50% - 50vw);width:100vw;border-top:1.5px solid var(--text)}
/* 線の上＝padding-bottom(22)、線の下＝margin-bottom(12)＋.hm-colsのgap(10)＝約22px で上下を揃える */
.v5-tabpanel{position:relative;padding-bottom:22px;margin-bottom:12px}
.v5-tabpanel::after{content:'';position:absolute;bottom:0;left:calc(50% - 50vw);width:100vw;border-top:1.5px solid var(--text)}
}
/* ── サイド：管理者専用のメッセージ送信ボタン（サイドバー最下部） ── */
/* ── サイド：モジュール共通 ── */
.hm-mod{border:1.5px solid var(--text);background:var(--bg2);margin-bottom:10px}
.hm-mod-h{display:flex;align-items:center;box-sizing:border-box;height:38px;padding:0 12px;background:var(--text);color:#fff;font-size:var(--fs-sm);font-weight:900;letter-spacing:.1em;line-height:1} /* 黒の見た目=枠1.5+38=39.5px。タブ(38px)＋グリッド上枠1.5pxと一致 */
.hm-mod-h a{margin-left:auto;color:#f2b8b8;font-size:var(--fs-xs);font-weight:800}
.hm-mod-h a:hover{color:#fff}
/* ── サイド：カテゴリ切替（縦リスト） ── */
.hm-cats a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border2,#dfe3ea);font-size:var(--fs-sm);font-weight:800;min-width:0;transition:.1s}
.hm-cats a:last-child{border-bottom:none}
.hm-cats a::before{content:'□';color:var(--text4);font-size:var(--fs-xs)}
.hm-cats a.on::before{content:'■';color:var(--accent)}
.hm-cats a:hover{background:var(--bg);color:var(--accent)}
.hm-cats a.on{background:var(--bg)}
.hm-cats b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.hm-cats i{font-style:normal;font-size:var(--fs-xs);font-weight:900;color:var(--text4)}
/* クエスト帯：達成状況（ログイン時）＝横並びの進捗行
クエストが1〜2件でも間延びしないよう、進捗バーは最大420pxに制限する。 */
.hm .v5-qprog{display:flex;flex-direction:row}
.hm .v5-qprow{flex:1 1 0;display:flex;align-items:center;gap:10px;padding:0 12px 0 0;border-right:1px solid var(--text);color:var(--text);min-width:0;transition:.1s} /* 区切りはカード一覧と同じ黒 */
.hm .v5-qprow:last-child{border-right:none}
.hm .v5-qprow:hover{background:var(--bg)}
/* 画像は行の高さいっぱい・余白なしで左端に密着させ、できるだけ大きく見せる */
.hm .v5-qprow-img{flex:0 0 auto;align-self:stretch}
.hm .v5-qprow-img img{width:90px;height:100%;object-fit:cover;display:block;border:none;border-right:1px solid var(--text)}
.hm .v5-qprow-img .perk-swap{position:relative;width:90px;height:100%;display:block}
.hm .v5-qprow-img .perk-swap img{position:absolute;inset:0}
.hm .v5-qprow-img .perk-swap img:nth-child(2){animation:hmswap 6s ease-in-out infinite}
@keyframes hmswap{0%,37.5%{opacity:0}50%,87.5%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hm .v5-qprow-img .perk-swap img:nth-child(2){animation:none;opacity:0}}
.hm .v5-qprow-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;justify-content:center;padding:8px 0}
/* クエスト名は2行まで折り返し可（超過分は省略） */
.hm .v5-qprow-name{font-size:var(--fs-sm);font-weight:900;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4}
/* 状態テキスト（2段目）とバー（3段目）を縦に積む。横並びだと文言が長いカードでバーがはみ出すため */
.hm .v5-qprow-prog{display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0;max-width:420px}
.hm .v5-qprow-state{font-style:normal;font-size:var(--fs-xs);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text3)}
.hm .v5-qprow-state.is-done{color:var(--qb-dark)}
.hm .v5-qprow-state.is-off{color:var(--text4)}
.hm .v5-qprow-bar{flex:0 0 auto;width:100%;height:12px;background:var(--bg);border:1px solid var(--text);overflow:hidden;box-sizing:border-box}
.hm .v5-qprow-bar i{display:block;height:100%;background:var(--qb)}
/* クエスト帯：旧クエスト終了の警告（短め・切り替え申請への導線） */
.hm .v5-quest-warn{display:block;padding:7px 12px;background:var(--bg);border-bottom:1px solid var(--text);font-size:var(--fs-xs);font-weight:900;color:var(--qb-dark);text-decoration:underline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm .v5-quest-warn:hover{background:var(--qb-bg)}
/* クエスト帯：新ポイントクエスト（マイページ管理画面の特典クエスト帯 .qb と同デザイン）
モバイルは m-show の1個だけ、PC（981px〜）は最大4個を縦区切りで表示 */
.hm .qb{display:flex;flex-direction:row;align-items:center;gap:20px;background:var(--red-bg,#fdecec);color:var(--text);padding:12px 16px;min-width:0}
.hm .qb-left,.hm .qb-right{min-width:0}
.hm .qb-left{display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.hm .qb-balance{display:flex;align-items:baseline;gap:7px}
.hm .qb-balance b{font-size:3rem;font-weight:900;line-height:1.05;color:var(--text);letter-spacing:.01em}
.hm .qb-balance small{font-size:var(--fs-base);font-weight:900;color:var(--accent)}
.hm .qb-login{font-size:var(--fs-sm);font-weight:900;color:var(--text);max-width:170px;line-height:1.6}
.hm .qb-right{display:flex;align-items:stretch;gap:14px;flex:1;min-width:0}
.hm .qb-next-head{font-size:var(--fs-sm);font-weight:900;color:var(--text);align-self:center}
.hm .qb-prize{display:none;flex:1;align-items:center;gap:10px;min-width:0;border-left:1.5px solid var(--accent);padding:2px 0 2px 12px}
.hm .qb-prize.m-show{display:flex}
.hm .qb-prize-thumb{width:56px;height:56px;flex:0 0 56px;border:1.5px solid var(--accent);background:var(--bg2,#fff);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hm .qb-prize-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hm .qb-prize-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hm .qb-prize-name{font-size:var(--fs-sm);font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hm .qb-prize-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hm .qb-prize-need{font-size:var(--fs-xs);font-weight:900;color:var(--text2)}
.hm .qb-prize-state{font-size:var(--fs-xs);font-weight:900;color:var(--accent);white-space:nowrap}
.hm .qb-prize-state.ok{color:var(--grn,#1a7f37)}
.hm .qb-prize-bar{display:block;height:7px;border:1.5px solid var(--text);background:var(--bg2,#fff);position:relative}
.hm .qb-prize-fill{position:absolute;inset:0;right:auto;background:var(--accent)}
.hm .qb-prize-fill.ok{background:var(--grn,#1a7f37)}
@media (min-width:981px){.hm .qb-prize{display:flex}}
/* モバイル：ログイン時（pt表示）は1行のまま。非ログイン（文言が長い）だけ縦積みにして潰れを防ぐ */
@media (max-width:640px){
.hm .qb{gap:12px}
.hm .qb-balance b{font-size:2.4rem}
.hm .qb.qb-guest{flex-direction:column;align-items:stretch;gap:10px}
.hm .qb.qb-guest .qb-login{max-width:none}
.hm .qb.qb-guest .qb-right{width:100%}
.hm .qb.qb-guest .qb-prize{border-left:none;border-top:1.5px solid var(--accent);padding:10px 0 0}
}
/* ※ 旧「非ログイン時の宣伝バナー（.v5-quest）」は 2026-09-06 に廃止（非ログインでも達成状況帯を表示） */
/* ── サイド：サイト統計 ── */
/* サイド：おすすめユーザー（大アイコン＋自己紹介＋SNS。2名を罫線で区切る） */
.hm-recu{display:flex;align-items:flex-start;gap:10px;padding:10px;min-width:0;border-bottom:1px solid var(--border2,#dfe3ea)}
.hm-recu:last-child{border-bottom:none}
.hm-recu-avl{flex:0 0 auto;display:block}
.hm-recu-ava{width:64px;height:64px;border:1px solid var(--text);object-fit:cover;background:var(--bg);display:block}
.hm-recu-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.hm-recu-nm{font-size:var(--fs-sm);font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-recu-nm:hover{color:var(--accent)}
.hm-recu-bio{font-size:var(--fs-xs);color:var(--text3);line-height:1.7;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.hm-recu-bio-none{color:var(--text4)}
.hm-recu-sns{display:flex;gap:5px;margin-top:2px}
.hm-recu-sns a{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--text);color:var(--text);background:var(--bg2);transition:.1s}
.hm-recu-sns a:hover{background:var(--text);color:#fff}
/* サイド：ユーザーランキング TOP20 */
.hm-rank{display:flex;flex-direction:column}
.hm-rank a{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 8px;border-bottom:1px solid var(--border2,#dfe3ea);font-size:var(--fs-sm);min-width:0;transition:.1s}
.hm-rank a:last-child{border-bottom:none}
.hm-rank a:hover{background:var(--bg)}
.hm-rkno{flex:0 0 15px;text-align:center;font-size:var(--fs-xs);font-weight:900;color:var(--text4)}
.hm-rkno.top{color:var(--accent)}
.hm-rkava{flex:0 0 auto;width:24px;height:24px;border:1px solid var(--text);object-fit:cover;background:var(--bg);display:inline-block}
.hm-rknm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.hm-rkpt{flex:0 0 auto;font-style:normal;font-size:var(--fs-xs);font-weight:900;color:var(--accent);white-space:nowrap}
/* サイド：新着コメント5件（スタンプのみは PHP 側で除外済み） */
/* 行構成：左=アバター（縦中央）、右=本文（主役・1行）＋「名前・記事タイトル」（グレー・1行） */
.hm-cmts{display:flex;flex-direction:column}
.hm-cmts a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid var(--border2,#dfe3ea);min-width:0;transition:.1s}
.hm-cmts a:last-child{border-bottom:none}
.hm-cmts a:hover{background:var(--bg)}
.hm-cmt-ava{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--text);object-fit:cover;background:var(--bg);display:inline-block}
.hm-cmt-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hm-cmt-at{align-self:flex-start;max-width:100%;font-size:var(--fs-xs);font-weight:800;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hm-cmt-tx{font-size:var(--fs-sm);font-weight:800;color:var(--text);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-cmt-tx img.cmt-stamp{display:inline-block;width:18px;height:18px;vertical-align:-4px} /* base.css の img{display:block} を打ち消し（blockだとスタンプで2行になる） */
.hm-cmts-more{appearance:none;display:block;width:100%;border:none;border-top:1px solid var(--border2,#dfe3ea);background:var(--bg2);padding:9px 0;font:inherit;font-size:var(--fs-xs);font-weight:900;letter-spacing:.08em;color:var(--text);cursor:pointer;transition:.1s}
.hm-cmts-more:hover{background:var(--text);color:#fff}
.hm-cmts-more:disabled{opacity:.5;cursor:default}
/* ── サイド：最新いいね（アイコン=ユーザーへのリンク＋タイトル2行=記事へのリンク＋相対時刻） ── */
.hm-lks{display:flex;flex-direction:column}
.hm-lks .hm-lk{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--border2,#dfe3ea);min-width:0;transition:.1s}
.hm-lks .hm-lk:last-child{border-bottom:none}
.hm-lks .hm-lk:hover{background:var(--bg)}
.hm-lk-avw{position:relative;flex:0 0 auto;width:30px;height:30px}
.hm-lk-ava{display:block;width:30px;height:30px;border:1px solid var(--text);object-fit:cover;background:var(--bg)}
.hm-lk-heart{position:absolute;right:-5px;bottom:-5px;width:15px;height:15px;box-sizing:border-box;background:var(--bg2);border:1px solid var(--text);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.hm-lk-heart svg{display:block}
/* 記事タイトル：濃色・下線なし・最大2行（3行目以降は省略） */
.hm-lk-at{flex:1;min-width:0;font-size:var(--fs-xs);font-weight:800;color:var(--text);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-lk-at:hover{color:var(--accent)}
.hm-lk-tm{flex:0 0 auto;font-size:var(--fs-xs);font-weight:700;color:var(--text3);white-space:nowrap}
/* ── メイン：タブ（右端に表示設定の歯車ボタン） ── */
.v5-tabs{display:flex;flex-wrap:wrap;align-items:stretch}
/* 高さは固定39.5px（枠込み）。サイドの検索バー(.hm-search=39.5px)と下端が揃い、
その下の「カテゴリで絞り込み」とデッキの上端（どちらも+10px）が一直線になる */
.v5-tab{appearance:none;box-sizing:border-box;height:39.5px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg2);border:1.5px solid var(--text);padding:0 22px;font:inherit;font-size:var(--fs-sm);font-weight:900;color:var(--text);cursor:pointer;line-height:1;transition:.1s} /* デッキと離すため下辺も閉じる */
.v5-tab+.v5-tab{margin-left:-1.5px} /* 隣接タブの縦線の二重化を打ち消す */
.v5-tab:hover{color:var(--accent)}
.v5-tab.on{background:var(--accent);color:#fff;position:relative;z-index:1} /* 選択中タブは赤系（枠線は黒のまま） */
/* 表示設定ボタン（タブとは独立・右揃え） */
.hm-setbtn{appearance:none;margin-left:auto;align-self:flex-end;display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1.5px solid var(--text);padding:6px 14px;font:inherit;font-size:var(--fs-sm);font-weight:900;color:var(--text);cursor:pointer;line-height:1;transition:.1s} /* タブと下端を揃える */
.hm-setbtn .bi{line-height:1}
.hm-setbtn:hover{color:var(--accent);border-color:var(--accent)}
.hm-setbtn i{pointer-events:none}
.v5-tabpanel[hidden]{display:none}
/* 記事ランク（品質バッジ）絞り込みプルダウン（タブ行の右端・設定の左）
※ ネイティブ select は line-height 指定が効かず自然高が button とズレるため、
select と設定ボタンの両方に同じ固定高を与えて揃える */
.hm-badge-sel{margin-left:auto;align-self:flex-end;background:var(--bg2);border:1.5px solid var(--text);border-radius:0;padding:0 4px;font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--text);cursor:pointer}
.hm-badge-sel option{background:var(--bg2);color:var(--text)}
/* バッジごとの色分け：選択肢と、選択中の select 本体に等級色を付ける
（配色はカードの品質チップ .lc-qchip-*（base.css）と同一） */
.hm-badge-sel option[value=bronze], .hm-badge-sel.hm-badge-sel-bronze {background:#ecdfd0}
.hm-badge-sel option[value=silver], .hm-badge-sel.hm-badge-sel-silver {background:#d2dbe5}
.hm-badge-sel option[value=gold], .hm-badge-sel.hm-badge-sel-gold {background:#f6e6a4}
.hm-badge-sel option[value=diamond],.hm-badge-sel.hm-badge-sel-diamond{background:#cbedfb}
.hm-badge-sel,.v5-tabs .hm-setbtn{box-sizing:border-box;height:30px}
.hm-badge-sel:hover{border-color:var(--accent);color:var(--accent)}
.hm-badge-sel[hidden]{display:none}
.v5-tabs .hm-setbtn{margin-left:8px} /* 右寄せは select 側の auto が担う */
/* ランク絞り込み・急上昇指標の両方の select が非表示のとき（連載・チャットタブ）だけ、
設定ボタン自身を右寄せに戻す。片方でも表示中はその select の margin-left:auto が右寄せを担うため、
ここで auto を付けると2重になりランクが中央へ浮く（過去に発生）。 */
.hm-badge-sel[hidden]+.hm-badge-sel[hidden]+.hm-setbtn{margin-left:auto}
@media(max-width:900px){
.hm-badge-sel{padding:0 2px;font-size:var(--fs-xs)}
.hm-badge-sel,.v5-tabs .hm-setbtn{height:24px}
/* モバイルはタブ行に入れると窮屈なので、JS がパネル内（検索欄の下）へ移動する。
そこでは全幅・1行の独立ブロックにする */
.v5-tabpanel .hm-badge-sel{display:block;width:100%;height:32px;margin:10px 0 0;padding:0 8px;font-size:var(--fs-sm)}
.v5-tabpanel .hm-badge-sel[hidden]{display:none}
}
/* チャットタブ：chat/ 埋め込み iframe（枠1.5px・角丸0のサイト標準。中身のスクロールは iframe 内で完結） */
/* チャットは埋め込みタブを廃止（タブ行の でチャットページへ遷移） */
a.v5-tab{text-decoration:none}
/* チャットページへ移動ボタン（.v5-more の見た目を で使うための上書き） */
.hm-chat-open{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center}
.hm-chat-open:hover{color:var(--accent)}
.v5-empty{padding:30px 0;text-align:center;color:var(--text4);font-weight:800;border:1.5px solid var(--text);background:var(--bg2)}
/* ── メイン：レビューグリッド ──
列数は「表示設定」で可変（--hm-cols-pc / --hm-cols-sp をJSが上書き。既定 PC3 / モバイル2）。
区切り線は 1px ギャップ（デッキ背景色）で描くため、列数がいくつでも罫線が揃う。 */
/* カード式：各カードを独立した枠にして上下左右に間隔を空ける（リスト式と同じ考え方）。
ユーザータブ（.m-users）のみ従来の連結グリッド＋outline区切りを維持 */
.v5-deck{display:grid;grid-template-columns:repeat(var(--hm-cols,3),minmax(0,1fr));gap:10px;background:transparent;border:none;margin-top:10px} /* タブとの間隔（カード式・リスト式共通） */
.v5-deck.m-users{gap:1px;background:var(--bg2);border:1.5px solid var(--text)}
.v5-deck.m-users>*{outline:1px solid var(--text)}
.hm-card{border:1.5px solid var(--text)}
.hm-card:hover{border-color:var(--accent)}
.hm-card{display:flex;flex-direction:column;gap:0;padding:0 12px 10px;background:var(--bg2);min-width:0;transition:.1s} /* 画像が最上段・上左右マージンなしの全幅 */
.hm-card:hover{background:var(--bg)}
.hm-ph{position:relative;aspect-ratio:16/9;margin:0 -12px;background:var(--bg);border:none;border-bottom:1px solid #111;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--text4);font-size:var(--fs-xs);letter-spacing:.1em}
.hm-ph img{width:100%;height:100%;object-fit:cover;display:block}
.hm-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;margin-top:2px}
/* メタ行（画像の直下）：カード式・リスト式共通デザイン
左＝カテゴリチップ（赤枠・白地・赤字）＋分離バッジチップ、右＝日時（グレー） */
.hm-mt{display:flex;align-items:center;gap:8px;min-width:0;margin-top:8px}
.hm-mt .lc-qchip{flex:0 0 auto}
/* カテゴリ名クリック=カテゴリページ / バッジクリック=条件ポップアップ */
.hm-cat[data-cat]:not([data-cat="0"]){cursor:pointer}
.hm-cat[data-cat]:not([data-cat="0"]):hover{background:var(--accent);color:#fff}
.hm-mt [data-badge-help]{cursor:pointer}
.hm-mt .hm-line{display:none}
.hm-mt time{flex:0 0 auto;margin-left:auto;font-size:var(--fs-xs);font-weight:700;color:var(--text3);opacity:.85;white-space:nowrap}
.hm-cat{display:inline-flex;align-items:center;box-sizing:border-box;height:20px;padding:0 7px;flex:0 1 auto;min-width:0;font-style:normal;font-size:var(--fs-xs);font-weight:900;border:1.5px solid var(--accent);color:var(--accent);line-height:1;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.1s}
.hm-cat .v5-badge{display:none} /* バッジは分離チップ側で表示 */
/* ── 連載/特集タブ：常にカード式・設定に関わらず PC2列／モバイル1列固定（.hm-sdeck） ── */
.v5-deck.hm-sdeck{gap:12px;background:none;border:none}
.v5-deck.hm-sdeck>*{outline:none}
@media(min-width:901px){ .v5-deck.hm-sdeck{--hm-cols:2} }
@media(max-width:900px){ .v5-deck.hm-sdeck{--hm-cols:1} }
/* 連載カード：連載｜タイトル＋最新記事3件＋さらに表示。角丸0・影なし・黒線（サイト標準）。 */
.hm-scard{display:flex;flex-direction:column;border:1.5px solid var(--text);background:var(--bg2)}
.hm-scard-head{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px 0 0;background:var(--bg,#f4f5f8);border-bottom:1.5px solid var(--text);color:inherit;text-decoration:none;min-width:0}
.hm-scard-head > .hm-scard-badge:first-child{margin-left:12px}
.hm-scard-head:hover .hm-scard-ttl{color:var(--accent)}
.hm-scard-badge{flex:0 0 auto;font-size:11px;font-weight:900;line-height:1.5;padding:1px 7px;border:1.5px solid #1d4ed8;color:#1d4ed8;background:#eef4ff}
.hm-scard-badge.is-of{border-color:#b45309;color:#b45309;background:#fff7e6}
.hm-scard-ttl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-base);font-weight:900}
.hm-scard-ava{flex:0 0 auto;width:44px;height:44px;border-radius:0;object-fit:cover;border:none;background:var(--bg)}
.hm-scard-item{display:flex;align-items:center;gap:10px;padding:4px 12px;border-bottom:1px solid var(--text);color:inherit;text-decoration:none;min-width:0}
.hm-scard-item:hover .hm-scard-itxt{color:var(--accent)}
.hm-scard-ith{flex:0 0 auto;width:78px;height:44px;border:1px solid var(--text);background:#e7eaf1;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#9aa1b0;font-size:8px;font-weight:800;line-height:1.1;text-align:center}
.hm-scard-ith img{width:100%;height:100%;object-fit:cover;display:block}
.hm-scard-itxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);font-weight:700;line-height:1.5}
.hm-scard-empty{color:var(--text3);font-weight:600}
.hm-scard-more{display:block;padding:8px 12px;text-align:center;font-size:var(--fs-xs);font-weight:900;color:var(--text);text-decoration:none}
.hm-scard-more:hover{color:var(--accent)}
.hm-ttl{font-size:var(--fs-base);font-weight:900;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;min-height:3em} /* タイトルは最大3行（最低2行分の高さは確保して段を揃える） */
.hm-card:hover .hm-ttl{color:var(--accent)}
.hm-ft{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1.5px solid var(--text);font-size:var(--fs-xs);color:var(--text3);min-width:0} /* ユーザー名行の上に濃い区切り線（リスト式と共通） */
.hm-ft-time{display:none;font-size:var(--fs-xs);font-weight:700;color:var(--text3);opacity:.85;white-space:nowrap} /* モバイルのリスト表示時のみ表示（hm-list-sp） */
.hm-ava{flex:0 0 auto;width:22px;height:22px;border:1px solid var(--text);object-fit:cover;background:var(--bg)}
.hm-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:700}
.hm-st{margin-left:auto;display:inline-flex;gap:9px;white-space:nowrap;flex:0 0 auto;font-weight:900}
.hm-st .lk{color:var(--accent)}
/* ── メイン：人気ユーザー（2列リスト行・表示設定の対象外） ── */
.v5-deck.m-users{--hm-cols:2}
.hm-urow{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--bg2);font-size:var(--fs-sm);min-width:0;transition:.1s}
.hm-urow:hover{background:var(--bg)}
.hm-uno{flex:0 0 30px;text-align:right;font-weight:900;color:var(--text4);white-space:nowrap} /* 3桁順位でも折り返さない幅 */
.hm-uno.top{color:var(--accent)}
.hm-uava{flex:0 0 auto;width:40px;height:40px;border:1px solid var(--text);object-fit:cover;background:var(--bg)}
.hm-uava-def{display:inline-block}
.hm-ubd{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hm-unm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900}
.hm-umeta{display:flex;align-items:center;gap:7px;color:var(--text3);font-weight:700;font-size:var(--fs-xs)}
.hm-umeta .attr-ico{font-size:14px}
.hm-upt{flex:0 0 auto;font-weight:900;color:var(--accent);font-size:var(--fs-sm);white-space:nowrap}
/* ── さらに読み込む ── */
.v5-more-wrap{display:flex}
.v5-more{appearance:none;flex:1;background:var(--bg2);border:1.5px solid var(--text);margin-top:10px;padding:12px 0;font:inherit;font-size:var(--fs-sm);font-weight:900;letter-spacing:.08em;color:var(--text);cursor:pointer;transition:.1s} /* デッキから独立（全辺枠＋間隔） */
.v5-more:hover{background:var(--text);color:#fff}
.v5-more:disabled{opacity:.5;cursor:default}
.promo-area{margin:0 0 10px}
/* ── 列数の既定（表示設定JSが --hm-cols-pc / --hm-cols-sp を上書き） ── */
@media(min-width:901px){
.v5-deck{--hm-cols:var(--hm-cols-pc,3)}
.v5-deck.m-users{--hm-cols:2}
}
@media(max-width:900px){
.v5-deck{--hm-cols:var(--hm-cols-sp,1)}
.v5-deck.m-users{--hm-cols:2}
}
/* ── リスト表示（表示設定）：写真左の1列リスト ── */
@media(min-width:901px){
/* リスト表示＝カテゴリページ（.lc）と同じデザイン：項目ごとに独立した枠＋間隔 */
html.hm-list-pc .v5-deck:not(.m-users):not(.hm-sdeck){--hm-cols:1;background:transparent;border:none;gap:12px}
html.hm-list-pc .v5-deck:not(.m-users):not(.hm-sdeck)>*{outline:none}
html.hm-list-pc .hm-card{display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto 1fr;gap:0;padding:0;border:1.5px solid var(--text);min-height:140px;transition:.15s}
html.hm-list-pc .hm-card:hover{border-color:var(--accent)}
/* 画像は16:9固定・縦中央。右列はタイトル2行でも画像高(約140px)に収まるよう余白を詰める */
html.hm-list-pc .hm-ph{grid-row:1/3;grid-column:1;align-self:center;margin:0;border:none}
html.hm-list-pc .hm-mt{grid-row:1;grid-column:2;margin:10px 18px 0}
html.hm-list-pc .hm-line{display:none}
/* カテゴリチップはバッジチップ(.lc-qchip=高さ20px・fs-xs)と高さ・文字サイズを揃える */
html.hm-list-pc .hm-cat{display:inline-flex;align-items:center;box-sizing:border-box;height:20px;padding:0 7px;border:1.5px solid var(--accent);color:var(--accent);font-size:var(--fs-xs);line-height:1;letter-spacing:.08em}
html.hm-list-pc .hm-cat::before{content:none}
/* バッジはカテゴリから分離した独立チップで表示（カテゴリページと同様） */
html.hm-list-pc .hm-cat .v5-badge{display:none}
html.hm-list-pc .hm-mt .lc-qchip{display:inline-flex}
html.hm-list-pc .hm-mt time{margin-left:auto;font-size:var(--fs-xs);font-weight:700;color:var(--text3);opacity:.85}
html.hm-list-pc .hm-bd{grid-row:2;grid-column:2;margin:4px 18px 10px}
html.hm-list-pc .hm-ttl{min-height:0;font-size:var(--fs-lg2);line-height:1.35}
html.hm-list-pc .hm-ft{border-top:1.5px solid var(--text);padding-top:6px}
}
@media(max-width:900px){
/* リスト表示＝カテゴリページ（.lc）と同じデザイン：項目ごとに独立した枠＋間隔 */
html.hm-list-sp .v5-deck:not(.m-users):not(.hm-sdeck){--hm-cols:1;background:transparent;border:none;gap:10px}
html.hm-list-sp .v5-deck:not(.m-users):not(.hm-sdeck)>*{outline:none}
/* 2段構成：上段＝画像(左)｜カテゴリバッジ＋タイトル3行(右)、下段＝日付・ユーザー・リアクションの全幅行。
.hm-bd は display:contents でグリッドへ展開し、タイトルとフッターを別の行に配置する */
html.hm-list-sp .hm-card{display:grid;grid-template-columns:160px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:0;padding:0;border:1.5px solid var(--text);box-sizing:border-box;height:auto;overflow:hidden;transition:.15s}
html.hm-list-sp .hm-card:hover{border-color:var(--accent)}
/* サムネイルは 16:9 固定（160×90）。高さ90pxは右列の最大高
（バッジ行約23px＋タイトル3行約65px≒88px）を上回るため、上下に隙間が出ない。
右列が画像より低いカードでは 1fr 行（タイトル行）が余白を吸収する */
html.hm-list-sp .hm-ph{grid-row:1/3;grid-column:1;align-self:center;aspect-ratio:16/9;margin:0;border:none}
/* 画像は絶対配置で枠いっぱいに敷く（画像の縦横比が16:9枠を押し広げないように。
はみ出た分は object-fit:cover で切り抜く） */
html.hm-list-sp .hm-ph img{position:absolute;inset:0;width:100%;height:100%}
html.hm-list-sp .hm-mt{grid-row:1;grid-column:2;margin:6px 10px 0}
/* カテゴリチップは左・品質バッジチップは右端 */
html.hm-list-sp .hm-mt .lc-qchip{margin-left:auto}
html.hm-list-sp .hm-line{display:none}
/* カテゴリチップはバッジチップ（モバイル=17px・.65rem）と高さ・文字サイズを揃える */
html.hm-list-sp .hm-cat{display:inline-flex;align-items:center;box-sizing:border-box;height:17px;padding:0 5px;border:1.5px solid var(--accent);color:var(--accent);font-size:.65rem;line-height:1;letter-spacing:.08em}
html.hm-list-sp .hm-cat::before{content:none}
/* バッジは分離チップ（モバイルは一回り小さく） */
html.hm-list-sp .hm-cat .v5-badge{display:none}
html.hm-list-sp .hm-mt .lc-qchip{display:inline-flex;height:17px;padding:0 5px;font-size:.65rem}
html.hm-list-sp .hm-mt .lc-qchip .v5-badge{width:11px;height:11px}
html.hm-list-sp .hm-mt time{display:none} /* 日付は下段（.hm-ft-time）で表示する */
html.hm-list-sp .hm-bd{display:contents}
html.hm-list-sp .hm-ttl{grid-row:2;grid-column:2;margin:4px 10px 6px;min-height:0;font-size:var(--fs-sm);line-height:1.35;-webkit-line-clamp:3}
html.hm-list-sp .hm-ft{grid-row:3;grid-column:1/3;margin:0;border-top:1.5px solid var(--text);padding:3px 10px}
html.hm-list-sp .hm-ft .hm-ava{width:18px;height:18px} /* 下段の高さを抑えるためアバターも一回り小さく */
html.hm-list-sp .hm-ft-time{display:flex;align-items:center;align-self:stretch;padding-right:8px;border-right:1.5px solid var(--text)} /* 日付の右に縦の区切り線（行の全高） */
}
/* ── 表示設定モーダル ── */
.hm-dlg{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;background:rgba(10,12,16,.55);padding:16px}
.hm-dlg.open{display:flex}
.hm-dlg-panel{background:var(--bg2);border:1.5px solid var(--text);width:min(560px,100%);max-height:92vh;overflow-y:auto}
.hm-dlg-h{display:flex;align-items:center;background:var(--text);color:#fff;font-size:var(--fs-sm);font-weight:900;letter-spacing:.04em;padding:10px 14px}
.hm-dlg-h button{margin-left:auto;appearance:none;background:none;border:none;color:#fff;font:inherit;font-size:var(--fs-lg);font-weight:900;cursor:pointer;line-height:1;padding:0 4px}
.hm-dlg-h button:hover{color:#f2b8b8}
.hm-dlg-sec{padding:14px 16px;border-bottom:1px solid var(--border2,#dfe3ea)}
.hm-dlg-sec h3{margin:0 0 10px;font-size:var(--fs-sm);font-weight:900;display:flex;align-items:center;gap:8px}
.hm-dlg-sec h3::before{content:'';width:8px;height:8px;background:var(--accent)}
.hm-dlg-row{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.hm-dlg-row:last-child{margin-bottom:0}
.hm-dlg-row>span{flex:0 0 72px;font-size:var(--fs-sm);font-weight:800;color:var(--text3)}
.hm-dlg-row label{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:800;cursor:pointer}
.hm-dlg-row input[type=radio]{accent-color:var(--accent);width:15px;height:15px}
.hm-dlg-row select{font:inherit;font-size:var(--fs-sm);font-weight:800;color:var(--text);background:var(--bg);border:1.5px solid var(--text);padding:7px 10px}
.hm-dlg-note{font-size:var(--fs-xs);color:var(--text3);line-height:1.8;margin-top:10px}
.hm-dlg-f{display:flex;gap:10px;padding:12px 16px;justify-content:flex-end}
.hm-dlg-f .reset{margin-right:auto}
.hm-dlg-f button{appearance:none;font:inherit;font-size:var(--fs-sm);font-weight:900;padding:10px 26px;white-space:nowrap;cursor:pointer;border:1.5px solid var(--text);background:var(--bg2);color:var(--text);transition:.1s}
.hm-dlg-f button:hover{color:var(--accent);border-color:var(--accent)}
.hm-dlg-f .save{background:var(--accent);border-color:var(--accent);color:#fff}
.hm-dlg-f .save:hover{background:var(--text);border-color:var(--text);color:#fff}
/* ── レスポンシブ ── */
@media(max-width:900px){
.hm{padding:8px 14px 40px}
/* メタ行のチップはモバイルでは一回り小さく（カード式・リスト式共通） */
.hm-cat{height:17px;padding:0 5px;font-size:.65rem}
.hm-mt .lc-qchip{height:17px;padding:0 5px;font-size:.65rem}
.hm-mt .lc-qchip .v5-badge{width:11px;height:11px}
/* ヒーロー帯：モバイルは中央寄せ・ボタン全幅 */
.v5-head{padding:28px 0!important}
.v5-head-inner{flex-direction:column;align-items:center;gap:18px;padding-left:14px!important;padding-right:14px!important}
.v5-head-text{text-align:center;width:100%}
.v5-head-btn{display:none} /* モバイルは「レビューを投稿する」ボタンを非表示 */
.v5-head-desc-pc{display:none}
/* クエスト帯：進捗行を縦積みに */
.hm .v5-qprog{flex-direction:column}
.hm .v5-qprow{border-right:none;border-bottom:1px solid var(--text)}
.hm .v5-qprow:last-child{border-bottom:none}
/* モバイル：クエスト画像は 16:10 固定（行の高さ依存で縦に伸びるのを防ぐ） */
.hm .v5-qprow-img{display:flex;align-items:center}
.hm .v5-qprow-img img{width:100px;height:auto;aspect-ratio:1/1}
.hm .v5-qprow-img .perk-swap{width:100px;height:auto;aspect-ratio:1/1}
/* モバイル：達成状況はランダム1件のみ表示。「全部見る」(.open)で全件に開閉 */
.hm .v5-quest-toggle{display:inline-block}
.hm .v5-qprog .v5-qprow{display:none}
.hm .v5-qprog .v5-qprow.is-qrand{display:flex}
.hm .v5-qprog.open .v5-qprow{display:flex}
.hm .v5-qprog:not(.open) .v5-qprow.is-qrand{border-bottom:none}
/* 1fr は最小幅が auto（内容の最小幅）になり長いタイトルで画面からはみ出すため minmax(0,1fr) にする */
.hm-cols{grid-template-columns:minmax(0,1fr)}
.hm-side{order:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.hm-side>*{margin-bottom:0}
.hm-side .hm-mod-cats{grid-column:1/-1}
.hm-cats{display:grid;grid-template-columns:1fr 1fr 1fr}
.hm-cats a{border-right:1px solid var(--border2,#dfe3ea)}
.hm-cats a:nth-child(3n){border-right:none}
.hm-main{order:1}
}
@media(max-width:640px){
.hm{padding:8px 14px 36px}
.hm-side{grid-template-columns:minmax(0,1fr)}
.hm-cats{grid-template-columns:1fr 1fr}
.hm-cats a:nth-child(3n){border-right:1px solid var(--border2,#dfe3ea)}
.hm-cats a:nth-child(2n){border-right:none}
.v5-deck.m-users{--hm-cols:1}
/* モバイルは4タブを1行に（折り返さない）。設定ボタンは歯車のみにして省スペース化し、
タブは通常サイズのまま4つ収める。 */
.v5-tabs{flex-wrap:nowrap}
.v5-tab{padding:0 8px;flex:1 1 0;min-width:0;text-align:center;white-space:nowrap}
.hm-setbtn{flex:0 0 auto;margin:0 0 0 8px;align-self:flex-end;padding:3px 10px;gap:0}
.hm-setbtn .hm-setbtn-label{display:none} /* モバイルは歯車アイコンのみ（「設定」の文字は消す） */
/* 表示設定モーダルのボタン：狭い幅では左右パディングを詰めて1行に収める */
.hm-dlg-f{gap:8px;padding:12px}
.hm-dlg-f button{padding:10px 12px}
}