:root { --bg: #0f0f13; --surface: #1a1a22; --surface2: #22222e; --border: #2e2e3e; --text: #e8e8f0; --text-muted: #888899; --accent: #7c6af7; --accent-hover: #9b8dff; --danger: #f76a6a; --success: #4caf7d; --warn: #f7a84a; --radius: 8px; --radius-lg: 12px; } /* サイトカラー切り替え（白・黒）。2026-07-15導入。 htmlタグのdata-theme属性で全体を切り替える（JSはapp_test.js「テーマ切り替え」 セクション参照。localStorage保存＋内インラインscriptで初回描画前に 適用するため、暗い既定テーマ→明るいテーマへの一瞬の切り替わり(FOUC)が起きない）。 2026-07-16にデザイン判断をフォールバックし、面と文字の 基本色だけを入れ替える最小構成に戻した（ランキング色・星評価色・タグ色・ 価格色・バッジ配色などの個別調整は撤去。以後は個別に指示を受けて決める） */ :root[data-theme="light"] { --bg: #ffffff; --surface: #ffffff; --surface2: #eeeef2; --border: #c8c8d2; --text: #16161d; --text-muted: #6b6b78; --accent: #7c6af7; --accent-hover: #9b8dff; } * { box-sizing: border-box; margin: 0; padding: 0; } /* 縦スクロールバーの有無を常に固定する（動画で発覚したキメラの正体・2026-07-09）。 599px境界のすぐ外側（600〜620px程度）では、次のフィードバックループが起きていた： 読み込み済みの長いリストは縦スクロールバーが必要→スクロールバーが数px幅を 消費し実質幅が599px以下に下がる→JSがモバイル判定でrouteを再実行→ 「読み込み中…」の短いプレースホルダーに差し替わりスクロールバーが不要になる→ 実質幅が599pxを超えて戻る→PC判定でまたrouteが走る→…という無限往復になり、 ページが読み込み中と表示の間を永遠に行き来して固まって見えていた （「第3のスタイル」に見えたのは実際にはこの往復によるチラつき）。 スクロールバーの分の余白を常に確保しておけば、コンテンツの高さが変わっても 実質幅が変動しなくなり、この往復自体が起こらなくなる */ /* モバイルSafari等は、しきい値より小さい文字を可読性のため自動で拡大して 表示することがある（text size adjust）。paddingやborder-radiusは拡大されない ため、その分だけ箱の形が崩れて見える（バッジが歪んで見える不具合の原因）。 全ページでpx指定どおりの大きさで表示されるよう無効化する */ html { scrollbar-gutter: stable; overflow-y: scroll; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif; font-size: 14px; line-height: 1.6; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } /* ── ナビ ── */ header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } nav { max-width: 1400px; margin: 0 auto; padding: 0 16px; height: 52px; display: flex; align-items: center; gap: 24px; } .logo { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; } .nav-links { display: flex; gap: 16px; } .nav-links a { color: var(--text-muted); font-size: 13px; white-space: nowrap; } .nav-links a:hover { color: var(--text); } .nav-links-analyze { padding-left: 16px; border-left: 1px solid var(--border); } .nav-group-label { color: var(--text-muted); font-size: 10px; letter-spacing: 0.05em; white-space: nowrap; } /* ── トップページ カテゴリバー ── FANZAの同人トップのカテゴリバーを参考にした構成： 外側(top-cat-bar)が画面横いっぱいに背景を伸ばし（角丸なし・header同様）、 内側(top-cat-grid)がnavと同じmax-width:1400pxで中央寄せになる。 タイルはバーの高さいっぱいのブロックで隙間なく並び、太字。 ホバー時はアクセント色の塗りつぶしブロック＋白文字にする */ .top-cat-bar { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 calc(50% - 50vw) 22px; } .top-cat-grid { display: flex; align-items: stretch; height: 52px; max-width: 1400px; margin: 0 auto; /* 画面の絶対端まで文字を敷き詰めると、はみ出していなくても視覚的には 「切れている」ように見える。最低限の余白を確保する */ padding: 0 8px; } .top-cat-tile { display: flex; align-items: center; justify-content: center; /* flex-shrinkはブラウザ標準の「本当に収まらない時だけ縮む」仕組み。 6個の自然な幅（padding込み）が横幅に収まっている間は一切縮まない （vwベースのclampのように無条件で縮む、ということが起こらない）。 min-width:0で、収まらない時は下限なく縮められるようにし、 text-overflow:ellipsisで、それでも文字が入らない極端な幅では ハードクリップではなく「…」で見せる。理論上、画面端で文字が 不自然に切れることは起こらない */ flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 22px; color: var(--text); font-size: 14px; white-space: nowrap; } .top-cat-tile:hover { background: var(--accent); color: #fff; } /* カテゴリ別トップページ（2026-07-17）で、現在表示中の カテゴリタブを常時ハイライトする。ホバー配色をそのまま流用 */ .top-cat-tile.active { background: var(--accent); color: #fff; font-weight: 700; } /* タグ一覧・サークル一覧タブ（2026-07-17）。カテゴリタブとの 間に伸縮スペーサーを挟んでバー右端に寄せる（区切り線などの装飾は入れない）。 スマホ幅では場所が足りないため非表示にし、ハンバーガーメニューに任せる */ .top-cat-spacer { flex: 1 1 auto; } @media (max-width: 599px) { .top-cat-tile-secondary, .top-cat-spacer { display: none; } } /* ── 使い方ページ ── */ .guide-sections { display: flex; flex-direction: column; gap: 20px; max-width: 720px; } .guide-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; } .guide-section h2, .guide-section h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text); } .guide-section p { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 10px; } .tips-heading { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .tips-table-topscroll { height: 6px; background: var(--border); border-radius: 3px; margin-bottom: 8px; position: relative; overflow: hidden; } .tips-table-topscroll-thumb { position: absolute; top: 0; left: 0; height: 100%; background: var(--text-muted); border-radius: 3px; } .tips-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tips-table-wrap::-webkit-scrollbar { display: none; } .tips-table { width: 100%; border-collapse: collapse; font-size: 13px; } .tips-table th, .tips-table td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; } .tips-table th { background: var(--surface2); color: var(--text-muted); font-weight: 500; white-space: nowrap; } .tips-table td { color: var(--text); } /* ── パンくず ── */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11px; font-weight: 400; color: var(--text-muted); margin-bottom: 14px; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb-sep { color: var(--text-muted); font-size: 14px; } .breadcrumb-current { color: var(--text-muted); font-weight: 400; } /* ── フッター ── */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: 48px; } /* 中身が出るまでフッターを出さない(2026-07-30)。 空の
の直下にフッターが出てしまい、作品が届いた瞬間に画面外へ 吹き飛んでいた。content-readyはapp_test.jsのroute()が描画を終えた時点で 一度だけ付く(付いたら二度と外れないので、クライアント遷移では隠れない)。 クラスが付かない環境(JS無効・古いブラウザ)では最初から出るので、 壊れる方向には倒れない。 **body.spa-shellに限定すること。** RSC版(app_test.jsを読まない)にまで 効かせると content-ready が永久に付かず、フッターが一生出ない ——2026-07-30に一度やらかして実測で気づいた */ body.spa-shell:not(.content-ready) .site-footer { display: none; } .site-footer-inner { max-width: 1400px; margin: 0 auto; padding: 24px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .site-footer-name { font-size: 14px; font-weight: 700; color: var(--text); } .site-footer-links { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto; } .site-footer-links a { color: var(--text-muted); font-size: 12px; white-space: nowrap; } .site-footer-links a:hover { color: var(--text); } /* アフィリエイト開示の1行(2026-08-11)。flex-basis:100% で 名前とリンクの行の下に単独で折り返す。 **「デカすぎ／目立ちすぎ」の指摘で小さく薄くした**(2026-08-11・オーナー)。 12px・--text-muted はフッターのリンクと同じ強さで、開示文が ナビゲーションと同格に見えていた。10px + opacity で一段落とす。 opacity にしたのは色を1つ足さずに明暗どちらのテーマでも同じだけ 落とせるため。**消しはしない**——景表法・ステマ規制の開示なので 読める大きさは残す。 */ .site-footer-note { flex-basis: 100%; color: var(--text-muted); font-size: 10px; opacity: 0.65; } /* ── ハンバーガーメニュー(599px以下＝モバイルのみ) ── 以前は830-850px付近で.nav-search buttonが折り返る不具合を避けるため、 768px超のタブレット幅（〜850px）もまとめてハンバーガー化していたが、 タブレット幅なのにハンバーガーになるのはおかしいという指摘を受け、 モバイルのみに限定した（スマホ/タブレット境界600px・タブレット/PC境界834pxが 主流の目安のため、2026-07-10にそれまでの768px/1024pxから変更）。折り返り対策は 下の@media (min-width:600px) and (max-width:833px) でのナビ余白の詰めに置き換える */ .hamburger-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 32px; height: 32px; background: none; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; flex-shrink: 0; } .hamburger-btn span { display: block; width: 16px; height: 2px; background: var(--text); } .search-icon-btn { display: none; } /* サイトカラー切り替えボタン（白・黒）。ハンバーガーと違い、常時（デスクトップ・ モバイル問わず）表示する常設アイコン。ロゴのすぐ右に置く */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); cursor: pointer; flex-shrink: 0; } .theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); } .mobile-nav-panel { display: none; flex-direction: column; padding: 8px 16px 12px; border-top: 1px solid var(--border); } .mobile-nav-panel.open { display: flex; } .mobile-nav-panel a { color: var(--text-muted); font-size: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); } .mobile-nav-panel a:last-child { border-bottom: none; } .mobile-nav-panel a:hover { color: var(--text); } @media (max-width: 599px) { .nav-links, .nav-links-analyze { display: none; } .hamburger-btn { display: flex; } } .nav-search { display: flex; gap: 6px; margin-left: auto; } .nav-search-input-wrap { position: relative; } .nav-search input { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 6px 12px; width: 220px; font-size: 13px; } .nav-search input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); } .nav-search button { background: var(--accent); border: none; border-radius: var(--radius); color: #fff; cursor: pointer; padding: 6px 14px; font-size: 13px; white-space: nowrap; flex-shrink: 0; } .nav-search button:hover { background: var(--accent-hover); } /* 以前はタブレット幅（600〜833px）で.nav-search buttonが折り返る不具合があり ナビの余白と検索欄の幅を詰めていたが、原因だったヘッダーの主要リンク （.nav-links/.nav-links-analyze）自体を撤去したため、この幅では 競合する要素がなくなり詰める必要がなくなった（2026-07-11削除） */ /* ── レイアウト ── */ #app { max-width: 1400px; margin: 0 auto; padding: 0 16px 24px; } /* ── セクションタイトル ── */ .section-title { font-size: 17px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .section-title a { font-size: 12px; font-weight: 400; color: var(--text-muted); } .see-more-wrap { text-align: center; margin: 16px 0 8px; } .see-more-link { display: inline-block; font-size: 13px; color: var(--text-muted); padding: 8px 20px; border: 1px solid var(--border); border-radius: 20px; } .see-more-link:hover { color: var(--text); border-color: var(--text-muted); } /* ── 横スクロール一覧（レール）── 見出し帯＋横スクロールカード列の使い回しテンプレート。header/top-cat-barと 同じフルブリード手法（margin:0 calc(50% - 50vw)）で画面横幅いっぱいにする。 表示枚数は既存のコンパクトグリッド列数（モバイル2/タブレット3/PC834-1199は4/ PC1200+は5）を基準に、スマホ・タブレットは+0.5枚（続きがあると分かる半端表示・ スクロールのみ）、PCは-1枚（矢印の分の余白）にする。PCの矢印クリックは 1枚ずつではなく画面（トラック）幅分ずつ送る */ /* レールが届くまでの場所取り(2026-07-30)。RSC版のトップで、レールを待つ間
の高さが0になり、フッターが持ち上がってから画面外へ飛んでいた。 実測のレール高(PC 429px・スマホ 368px)に合わせる。中身は空なので 見えるものは増えず、場所だけ空く。解決後は本物のレールに置き換わるので この高さは残らない */ .rail-placeholder { min-height: 429px; } @media (max-width: 899px) { .rail-placeholder { min-height: 368px; } } .rail-section { margin: 0 calc(50% - 50vw) 22px; } .rail-header { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .rail-header-inner { max-width: 1400px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; } .rail-title { font-size: 15px; font-weight: 700; color: var(--text); } .rail-more { font-size: 12px; color: var(--text-muted); white-space: nowrap; } .rail-more:hover { color: var(--text); } /* 【構造の方針・2026-07-11】 以前は rail-body を display:flex にして「矢印・トラック・矢印」を 横に並べ、flexの幅の取り合いの結果としてトラックの幅と位置が 決まる構造だった。この「flexの幅交渉 × スクロールコンテナ × %指定の子」 という組み合わせはブラウザ間で解釈が割れる部分で、Chromiumでは 意図通りでもSafariでは配置されるべき箇所と実際の描画位置がずれ、 矢印の周囲にカードが見切れて残った（の flex内での幅指定の修正でも直らなかった）。 現在は幅の交渉そのものを無くしている： - rail-body は普通のブロック。矢印の場所は padding(64px) で確保 - rail-viewport も普通のブロック（flexアイテムではない）。 幅は親のcontent幅から一意に決まり、overflow:hiddenでハードにクリップ - 矢印は position:absolute のオーバーレイで、レイアウト上の席を持たない これで全要素の位置がブロックレイアウトと絶対配置だけで決まり、 エンジン差の入り込む余地がない */ .rail-body { position: relative; max-width: 1400px; margin: 0 auto; } @media (min-width: 834px) { .rail-body { padding: 0 64px; } } .rail-viewport { overflow: hidden; } .rail-track { --rail-visible: 2.5; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 12px 8px; -webkit-overflow-scrolling: touch; } /* 【PC帯では左右paddingを0にする（見切れの幾何学的な根本原因）】 1画面の幅 = padding(8×2) + カードN枚 + gap(N-1)個 に対し、 矢印の送り量 = (カード+gap)×N。この2つの差 = padding合計16px - gap12px = 4px が必ず余り、初期位置では左paddingが吸収するが、1回でも送ると 「境目に揃った停止位置ですら次のカードが4px境界の内側に入り込む」。 これはエンジン差ではなく寸法の矛盾で、どのブラウザでも起きる。 左右padding=0なら 送り量×N = 画面幅 + gap となり、揃った停止位置で 次のカードは常に境界の12px外側から始まる＝原理的に見切れない （2026-07-11。スマホ・タブレットは矢印なし・自由スワイプなので 端の見た目を優先してpadding 8pxを残す） */ @media (min-width: 834px) { .rail-track { padding: 12px 0; } } .rail-track::-webkit-scrollbar { display: none; } .rail-track > .work-card { flex: 0 0 auto; /* 幅は「N枚がコンテナ内容幅にぴったり収まる」正確な等分にする。 以前は丸め対策で1枚あたり-2pxの余裕を引いていたが、それだと N枚合計がコンテナより最大N×2px短くなり、その分だけ次のカードの 左端が手前に寄って、クリップ境界の内側に数px「見切れ」として 入り込んでしまう（＝見切れの発生源そのものだった・2026-07-11）。 正確な等分なら、次のカードの左端は必ず 内容右端+gap(12px) から 始まり、クリップ境界（内容右端+padding 8px）より常に外にある。 scroll-snapは、矢印クリックのscrollTo(絶対位置指定)の着地点を Safariがスナップで動かしてしまい境目がずれる一因になり得るため 使わない（送り先の計算はJS側でカード境界に揃えている） */ width: calc((100% - (var(--rail-visible) - 1) * 12px) / var(--rail-visible)); } @media (min-width: 600px) and (max-width: 833px) { .rail-track { --rail-visible: 3.5; } } /* PCは矢印で画面分送るため、以前は隣の存在を匂わせる「-1枚」表示にしていたが、 撤去して通常の表示数（コンパクトグリッドの列数）をそのまま満たす */ @media (min-width: 834px) and (max-width: 1199px) { .rail-track { --rail-visible: 4; } } @media (min-width: 1200px) { .rail-track { --rail-visible: 5; } } /* 矢印はPC（834px〜）のみ。スマホ・タブレットはスワイプのみで送る。 矢印は大きめ・白色にする。 rail-bodyのpaddingで確保した左右64pxの帯に絶対配置で重ねる */ .rail-arrow { display: none; position: absolute; /* rail-trackの上下padding(12px)の分だけ矢印がカードより縦に長く なっていたため、その分を差し引いてカードの高さとぴったり揃える */ top: 12px; bottom: 12px; width: 64px; align-items: center; justify-content: center; /* rail-arrowが乗っているrail-bodyは背景を指定していないため、 周囲にはページ本来の背景(var(--bg))が透けている。矢印もそれに 合わせて周囲と同化させる */ background: var(--bg); border: none; color: #fff; cursor: pointer; } .rail-arrow-prev { left: 0; border-right: 1px solid var(--border); } .rail-arrow-next { right: 0; border-left: 1px solid var(--border); } /* ホバーの背景。base(var(--bg) #0f0f13)からvar(--surface2) #22222eへの 変化はやや控えめだったため、もう少し明るいトーンにする（2026-07-11） */ /* テスト版・2026-07-12: is-edge(これ以上その方向に送れない=実質無効)の 矢印にまでホバー背景が効いてしまい、押せそうに見えるのに実際は 何も動かない不整合があった。is-edge時は除外する */ .rail-arrow:not(.is-edge):hover { background: #40404e; } /* スクロールの端（それ以上その方向に送れない側）にいる矢印は薄くする （app.jsのinitRailTrack/updateRailEdgesが scrollイベントを見てis-edgeを付け外しする） */ .rail-arrow.is-edge { opacity: 0.35; } @media (min-width: 834px) { .rail-arrow { display: flex; } } /* テスト版・2026-07-16: 矢印アイコンの色がcolor:#fff固定 なのに対し、白テーマでは背景も同化用のvar(--bg)(白)になるため、白地に 白のアイコンで完全に見えなくなっていた。横一覧の矢印すべて（ホーム ランキング・同サークルの作品・サンプル一覧など）に共通の不具合 */ :root[data-theme="light"] .rail-arrow { color: #16161d; } /* ── 作品カード ── */ /* .works-grid はスマホ幅(isMobile)でのみJSから使われる1カラム専用クラス。 以前は複数カラムのauto-fillだったが、599pxをまたいでリサイズする際に CSSのメディアクエリが即座に切り替わる一方でJS側の再描画に遅延があり、 その間だけ複数カラムでカードが詰まって見えるバグがあったため、 常に1カラムにして「詰まって見える」瞬間自体を無くす */ .works-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .work-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 0; /* 一覧サムネイルは角丸にしない（2026-07-09） */ overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; } .card-rank-badge { position: absolute; top: 6px; left: 6px; z-index: 2; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: rgba(15, 15, 19, 0.8); color: var(--text-muted); font-size: 13px; font-weight: 700; text-align: center; line-height: 22px; } .card-rank-badge.gold { color: #f7d94a; } .card-rank-badge.silver { color: #b8b8c8; } .card-rank-badge.bronze { color: #c87a4a; } .work-card:hover { border-color: var(--accent); } .work-card img { width: 100%; aspect-ratio: 4/3; /* thumbnailがinline style="object-fit:contain"を常に付与する(作品詳細ページの サンプル切り替えと同じ考え方: 縦長画像も切り取らず縮小して枠に収める)。 この既定値はinline styleの読み込み前の一瞬だけ・thumbnailを使わない 呼び出し元向けのフォールバック */ object-fit: contain; object-position: center center; display: block; border-radius: 0; } .work-card-body { padding: 8px 10px 10px; } /* .work-card-sites・.row-tagsは.work-cardの直接の子（.work-card-bodyの外） なので、bodyと同じ横余白をここで別途つける */ .work-card > .work-card-sites, .work-card > .row-tags { padding: 0 10px 10px; } /* .row-tags（work_card_html・work_row_html共通で実際に使われているタグの コンテナ。似た名前の.work-row-tagsは未使用のデッドクラス）にflexが 指定されておらず、タグ同士の間に空白文字もないHTML出力と合わさって、 下の.tag-chipをnowrap化すると改行できず画面外へはみ出していた */ .row-tags { display: flex; flex-wrap: wrap; gap: 3px; } .work-card-badges { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; } .work-card-title { font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; } .work-card-circle { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; } .work-card-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .work-card-price { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; font-size: 12px; } .price-line { display: flex; align-items: center; gap: 4px; } .card-price-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .card-site-label { font-size: 10px; color: var(--text-muted); flex-shrink: 0; } .work-card-bottom { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; } .card-sales::before { content: '販売数：'; } .card-date { margin-left: auto; } .card-date::before { content: '発売日：'; } .card-rating-count { color: var(--text-muted); font-size: 10px; } /* 評価スコアと評価件数は折り返して離れないよう1つの塊にする */ .card-rating-group { display: inline-flex; align-items: baseline; gap: 2px; white-space: nowrap; } .badge { font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: 600; } .badge-ai { background: #3a2a6a; color: #c9b8ff; } .badge-dlsite { background: #07b; color: #fff; } .badge-fanza { background: #e05; color: #fff; } .badge-both { background: #2a2a1a; color: #e8d87a; } .badge-cat { background: transparent; color: #b0b0b8; border: 1px solid #b0b0b8; } .badge-discount { background: transparent; color: #b0b0b8; padding: 0; } /* ここから白テーマ限定の上書き（2026-07-16）。黒テーマは 上の元の配色のまま変更しない。ただし灰色系のみ、黒背景では#767676が やや暗すぎたため黒テーマ側を明るいグレー#b0b0b8に調整 （白テーマの#767676はそのまま） */ :root[data-theme="light"] .badge-dlsite { background: transparent; color: #2f7fe0; padding: 0; } :root[data-theme="light"] .badge-fanza { background: transparent; color: #dc3545; padding: 0; } :root[data-theme="light"] .badge-cat { background: transparent; color: #767676; border: 1px solid #767676; } :root[data-theme="light"] .badge-discount { background: transparent; color: #767676; padding: 0; } .price { font-size: 12px; font-weight: 700; color: var(--text); } .price-orig { font-size: 11px; color: var(--text-muted); text-decoration: line-through; } .rating { font-size: 11px; color: #f7a84a; } .sales { font-size: 11px; color: var(--text-muted); } /* ── 作品リスト（テーブル形式） ── */ .works-list { display: flex; flex-direction: column; gap: 6px; } /* コンパクト表示＝横並びカードグリッド。旧サイトの密な表形式 (.work-compact-row)は廃止し、.work-cardを流用する新デザインを採用する。 タブレット(600〜833px)は3列固定、PC(834px〜)は4列固定、より広い PC(1200px〜)は5列固定にする（auto-fillだと 834〜1199px程度の"それほど広くないPC"で計算上4列に届かず3列に落ちて しまっていたため、幅で段階的に固定する方式に変更。スマホは.mc-modeで 別途2列固定） */ .works-list.compact-mode { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 16px; column-gap: 0; } @media (min-width: 600px) and (max-width: 833px) { .works-list.compact-mode { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 834px) and (max-width: 1199px) { .works-list.compact-mode { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1200px) { .works-list.compact-mode { grid-template-columns: repeat(5, 1fr); } } /* コンパクト表示は一覧性を優先するため、カード内のタグ行は表示しない （ホームページ・サークルページ等の.work-card使用箇所には影響しない）。 .rail-track内のカードも同じ理由（狭い横幅に並べるカードグリッド）で 同じ扱いにする（2026-07-11。タグ行を出したままだとチップの折り返しで カードの縦幅がバラバラに間延びしていた） */ .works-list.compact-mode .row-tags, .rail-track .row-tags { display: none; } /* コンパクト表示は左寄せ・発売日と割引終了日時は非表示・ 販売数と評価は別行 */ .works-list.compact-mode .work-card-bottom, .rail-track .work-card-bottom { flex-direction: column; align-items: flex-start; gap: 2px; } .works-list.compact-mode .card-date, .rail-track .card-date { display: none; } .works-list.compact-mode .disc-end, .rail-track .disc-end { display: none; } /* rail-trackは元価格（取り消し線の値段）を幅を問わず出さない（2026-07-11）。割引%バッジ（badge-discount）は残す */ .rail-track .price-orig { display: none; } /* スマホ・タブレット(833px以下)は割引%バッジも出さず現在価格のみにする （PC(834px〜)は割引%は今まで通り表示する） */ @media (max-width: 833px) { .rail-track .badge-discount { display: none; } } /* ── スマホ版コンパクトカード（.works-grid.mc-mode）── */ /* 「本体＋別付けの開閉パネル」という2箱構成（旧実装）は、境界線が二重に見えたり タイトルの扱いが複雑になったりする根本原因だったため廃止し、カード1枚 （.mc-card）だけで完結させる。 .mc-cardは常にposition:absoluteで、グリッドの行の高さには一切関与しない。 代わりに.mc-slot-spacer（見えない・閉じた状態と同じ寸法のダミー）が.mc-slotの 高さ＝グリッド行の高さを常に一定に保つ。これにより.mc-cardが伸びても縮んでも、 あるいはtransitionの途中の一瞬であっても、グリッドの行の高さは物理的に変化 しようがない（以前はposition自体を:activeで切り替えてtransition-delayで タイミング制御していたが、閉じる瞬間にpositionが早く戻りすぎて下の行が動く 不具合があった。この構造なら発生原理そのものが無い）。 開閉の可視の変化（タイトルの展開・追加情報の表示）はmax-heightのtransitionで 行い、JSでの指の移動量トラッキングは行わない（過去のやり取りで mousemove/距離しきい値によるホバー制御は何度直しても解決しなかった経緯があり、 宣言的なCSSだけで完結する方式を選ぶ）。開く方向にだけtransition-delayをつけて いるため、指が触れてすぐ動く＝スクロール中の通過では遅延が明ける前に:activeが 解除され、開く前の状態のまま消える。閉じる方向は遅延なしで即座に戻る */ .mc-slot { position: relative; } /* 実カードと同じ寸法（画像はaspect-ratioで幅追従、テキスト欄は閉じた状態と 同じ固定px）を持つ見えないダミー。グリッド行の高さはこれだけで決まる */ .mc-slot-spacer { visibility: hidden; pointer-events: none; } .mc-slot-spacer-img { width: 100%; aspect-ratio: 4/3; } .mc-slot-spacer-body { height: 60px; } .mc-card { position: absolute; inset: 0; z-index: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 0; cursor: pointer; /* bottomは.mc-slotの高さには一切影響しない（.mc-slot-spacerが別に高さを 持つため）。ここでの遅延は見た目の収縮アニメーションを滑らかにするための 仕上げに過ぎず、たとえ効かなくてもレイアウトが動く不具合には繋がらない */ transition: bottom 0s .15s; } .mc-card:active { /* bottomの固定を外し、中身に合わせて自由に下へ伸びられるようにする */ bottom: auto; transition-delay: 0s; z-index: 10; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); } .mc-card img { width: 100%; /* 実測でサムネイルの多くが4:3寄り（560x420等）。16:9だと上下が大きく 切れていたので、実際の画像比に近い4:3に変更する */ aspect-ratio: 4/3; /* thumbnailがinline styleで常にcontainを付与する(縦長画像を 切り取らず縮小して収める。以前はここだけ!importantでcover固定にしていたが、 他カードと同じ挙動に統一する) */ object-fit: contain; object-position: center center; display: block; border-radius: 0; } .mc-card-body { padding: 6px 8px 8px; } .mc-card-badges { display: flex; gap: 4px; flex-wrap: nowrap; min-width: 0; margin-bottom: 3px; } .mc-card-badges .cat-badge, .mc-card-badges .badge { flex-shrink: 0; white-space: nowrap; font-size: 8px; } /* -webkit-line-clampは切れた末尾に「…」を自動で付けるが、それを出したくない ため、line-clampではなく単純な高さクリップにする。 「…」が付かない代わり、はみ出した3行目以降は文字ごと見えなくなる。 :activeでmax-heightを大きく開放し、カード自身が伸びてフルタイトルを見せる （別要素での二重表示ではなく、同じ1つのタイトル要素がそのまま伸びる） */ .mc-card-title { font-size: 10px; line-height: 1.4; max-height: 2.8em; overflow: hidden; transition: max-height .15s ease; } .mc-card:active .mc-card-title { transition-delay: .15s; max-height: 20em; } .mc-card-info { max-height: 0; overflow: hidden; transition: max-height .15s ease; } .mc-card:active .mc-card-info { transition-delay: .15s; max-height: 200px; margin-top: 4px; } .mc-card-circle { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-card-sales, .mc-card-rating { font-size: 10px; color: var(--text-muted); margin-top: 2px; } .mc-card-prices { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); } .mc-price-row { font-size: 10px; margin-top: 2px; } .work-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: grid; /* 4列目(評価/販売数/発売日)はwhite-space:nowrapで1行ずつ組んでいるため、 769px付近の狭いPC/タブレット幅ではgridの残り幅次第でこの列が 数十pxまで潰れ、折り返せないテキストがはみ出して隣の列に重なって 見える「キメラ」状態になっていた。固定px(130px)の最低幅だと、桁の 少ない販売数の行では余分な空白ができ、逆に桁の多い販売数だと 130pxでは足りずはみ出す事例があった。 min-content/max-contentはnowrapのテキストでは同じ値（折り返せない＝ その行の実際の文字幅そのもの）になるため、行ごとに必要な幅ぴったりに 決まり、空白もはみ出しも起きない。実測でも834px幅・7桁の販売数で 確認済み。代わりに可変の1fr列(タイトル・タグ)側を先に縮めさせる */ grid-template-columns: 36px 200px 1fr minmax(min-content, max-content); gap: 10px; padding: 8px 10px; cursor: pointer; align-items: start; transition: border-color .15s; } .work-row:hover { border-color: var(--accent); } /* .row-tagsは.work-row-info（3列目）の中に置くと、右端の評価/販売数/発売日列 (4列目)の手前までしか使えず途中で折り返っていた。.work-rowの直接の子にして 全列(1〜4列目)にまたがせ、カードの右端まで使えるようにする（2026-07-10） */ /* .row-tagsは.work-row-info（3列目、DOM構造はそのまま）の中にあるため、 右の評価/販売数/発売日列（4列目、minmax(130px,auto)+gap10px分）の手前で 折り返っていた。DOMを動かす（.work-rowの直接の子にする）とタグの位置が ずれておかしくなったため、DOM構造には触れず、widthだけ4列目+gap分 広げて右端まで届かせる */ /* .row-tagsは.work-row-info（3列目、DOM構造は元のまま・row-sitesの直後）の 中に置く。.work-rowの直接の子にする（グリッドアイテムにする）と、1行目が 既に4要素で埋まっているため自動配置で新しい2行目に追い出され、価格情報から 離れて下に飛んで見える不具合が2回起きた。 DOM位置は動かさず、widthだけ4列目+gap分広げて右へ伸ばす。4列目は minmax(min-content,max-content)で行ごとに幅が変わるため、はみ出さない よう安全側（6桁の販売数まで想定）の控えめな値にする。極端に桁の多い 販売数の行では右端まで届ききらないことがあるが、はみ出すよりはみ出さない 方を優先する */ .work-row-info > .row-tags { width: calc(100% + 100px); } .work-row > img { width: 200px; align-self: stretch; object-position: center top; background: var(--surface); display: block; } .work-row-info { min-width: 0; } .work-row-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; } .work-row-circle { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; } .circle-link { cursor: pointer; } .circle-link:hover { color: var(--accent); text-decoration: underline; } .work-row-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; } .work-row-tags .tag-chip { font-size: 10px; padding: 1px 5px; } /* サイト別ブロック（価格+タグを1まとめ） */ .row-sites { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .row-site-block { display: flex; gap: 6px; align-items: flex-start; } .row-site-name { flex-shrink: 0; margin-top: 2px; } .row-site-detail { display: flex; flex-direction: column; gap: 3px; } .row-site-price { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; font-size: 12px; } .row-site-tags { display: flex; flex-wrap: wrap; gap: 2px; } .row-site-tags .tag-chip { font-size: 10px; padding: 1px 4px; } .work-row-right { text-align: right; white-space: nowrap; min-width: 70px; } /* ── カテゴリバッジ ── */ .cat-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; background: transparent !important; color: #b0b0b8; border: 1px solid #b0b0b8; white-space: nowrap; flex-shrink: 0; } :root[data-theme="light"] .cat-badge { color: #767676; border-color: #767676; } .work-card-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; min-height: 0; } .work-card-tags .tag-chip { font-size: 10px; padding: 1px 4px; } /* ── フィルターバー ── */ .filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 12px; /* テスト版・2026-07-14: flex-endだと同じ行に並ぶfilter-groupの高さが 揃っていない時（例:割引グループに下限セレクトを足して3行になった）に 下端は揃うが上端がバラバラになり、DOM順（カテゴリー→サイト→割引）と 見た目の上下順が食い違って見えていた。 flex-startで上端を揃える */ align-items: flex-start; } .filter-group { display: flex; flex-direction: column; gap: 4px; } .filter-group label { font-size: 11px; color: var(--text-muted); } .filter-group select, .filter-group input { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 5px 10px; font-size: 13px; } /* 不具合が、Safari/Chrome両方・作品検索/タグ一覧/サークル一覧のどのページでも 発生すると報告された。appearance:none撤去、内部セグメントのpadding:0撤去と 段階的に疑わしいルールを外したが解決しなかったため、原因の切り分けを優先し type="date"専用のカスタムCSS(内部padding調整・カレンダーアイコンの サイズ指定・クリア/スピナーボタンの非表示)を全て撤去し、完全にブラウザ 既定の見た目・挙動に戻す。カレンダーの矢印(スピナー)が空欄から妙な値で 始まる問題は、既存のonkeydown(ArrowUp/Down無効化)・onwheel(preventDefault) 側で引き続き対策済み */ .filter-group select:focus, .filter-group input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); } .btn { background: var(--accent); border: none; border-radius: var(--radius); color: #fff; cursor: pointer; padding: 7px 16px; font-size: 13px; align-self: flex-end; } .btn:hover { background: var(--accent-hover); } .btn-ghost { background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); } .btn-ghost:hover { color: var(--text); border-color: var(--text-muted); } /* ── 検索パネル ── */ .search-wrapper { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } /* テスト版・2026-07-16（最終形): summaryと.search-panelを 別々のborder-radiusで継ぎ合わせて1つの箱に見せる作りは、ブラウザによって 継ぎ目がずれて「検索条件だけ分かれた別要素に見える」原因になり得た。 「検索」ボタンをapp_test.js側で
の外へ移動し、
の中身を summary+.search-panelだけにしたため、継ぎ目トリックを使わずに済むように なった。枠(border/背景/角丸)は
本体(.search-panel-toggle)1つに 直接付ける＝本物の1つの箱。summary/.search-panelは中身として枠なし。 （検索ボタンはdetailsの外なので、折りたたみが閉じていても常に押せる） */ .search-panel-toggle { margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } /* 検索ボタンは検索条件を開いているときだけ出す(2026-08-03)。 **CSSだけで決める。** ボタンは
の外にあるので(上のコメント参照)、 開閉に追随させるには ①JSで状態を持つ ②兄弟セレクタで見る のどちらか。 ②なら**全SPA版と全RSC版で同じ1行が効く**——別々に状態を持つと、 片方だけ直っている形(CLAUDE.mdに5件の記録)をまた作ることになる。 `~` は同じ親の後続の兄弟なので、.search-wrapper の直下に並んでいる限り効く。 */ .search-submit-row { display: none; text-align: center; } .search-panel-toggle[open] ~ .search-submit-row { display: block; } /* **このCSSを直したら、確認はハードリロードで**（2026-08-03に1時間溶かした）。 このファイルは `Cache-Control: public, max-age=300, must-revalidate` で配られる。 **開きっぱなしのページはCSSを取り直さない**ので、サーバー側は直っているのに 画面は古いまま——「直っていない」と見える。実際、サーバーの応答と ブラウザ内の見え方が食い違い、実装を3回いじり回した（うち1回はボタンの位置を 勝手に動かして戻した）。 **見え方を疑う前に、配っている中身を curl で確かめること**: curl -s http://localhost:3002/style_test.css | grep search-submit-row 前段プロキシ(:8443)経由なら、作り置きの .br も古くないか見る （`node scripts/precompress-public.mjs`。http_check.py が検出する）。 */ /* ): 5行の間隔は統一できていたが、間隔 そのもの(17px)が不要とのことで撤去。区切り線(border-top 1px)だけで 行同士を密着させる。paddingもflex gapも使わない */ /* ): 一番下(詳細フィルター〜箱の下端)だけ 16pxの余白が残っていて、他の1px密着と不釣り合いに太く見えていた。 0にして揃える */ .search-panel { padding: 0; display: flex; flex-direction: column; } /* 「検索条件」「意味検索」「一致検索」「タグ検索」「詳細フィルター」 5つの見出し全部が使う共通クラス。矢印の回転はdetails[open] > summaryの 組み合わせで、どのdetails/summaryペアにも同じ1ルールで効く （子孫セレクタを使わないので、他のsummaryを巻き込むバグも起きない）。 テスト版・2026-07-16（重大なミスの修正): 左右の paddingを親の.search-panel-toggle側に移していたため、summary要素自身の クリック領域が左右16px分だけ狭くなり、「検索条件」の左端・右端を押しても 開閉しなくなっていた（
はsummary要素の範囲内クリックでしか 反応しない）。paddingはsummary自身が持つ必要がある。左右16pxをここに 戻す（.search-panelにも同じ16pxを独立に持たせ、横位置を揃える） */ .search-accordion-summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text); user-select: none; list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 16px; } .search-accordion-summary::-webkit-details-marker { display: none; } .search-accordion-summary::marker { display: none; } .search-accordion-summary::before { content: '\25B6\FE0E'; font-size: 12px; color: var(--text-muted); transition: transform 0.15s; } details[open] > .search-accordion-summary::before { transform: rotate(90deg); } /* テスト版・2026-07-16: 「marginをつけるな」との指摘。 前回はmargin(負のmargin・margin-bottom)で帳尻を合わせていたが撤去。 .search-panelから左右paddingを削除したので(上のルール参照)、意味検索等の summaryは.search-panelの外(=.search-panel-toggle)の内側幅いっぱいに 自然に広がり、「検索条件」と同じ幅になる。左右の余白(テキストの位置)は summary自身のpadding:16pxだけで作る。入力欄側(.search-section-body等)は .search-panelのpaddingが無くなった分、自分自身に左右paddingを持たせる （下記） */ .search-top-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .quick-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .preset-label { font-size: 11px; color: var(--text-muted); margin-right: 4px; } .preset-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; color: var(--text); cursor: pointer; font-size: 12px; padding: 4px 12px; transition: border-color var(--duration-fast), background var(--duration-fast); } .preset-btn:hover { border-color: var(--accent); background: var(--surface); } .recent-searches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .recent-chip { background: transparent; border: 1px solid var(--border); border-radius: 20px; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 3px 10px; transition: border-color var(--duration-fast), color var(--duration-fast); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-chip:hover { border-color: var(--accent); color: var(--text); } .recent-chip-clear { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 3px 6px; opacity: 0.6; } .recent-chip-clear:hover { opacity: 1; color: var(--danger, #e55); } .sort-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sort-row .view-toggle { margin-left: auto; } .results-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; padding: 6px 0; } .sort-label { font-size: 11px; color: var(--text-muted); } .sort-btns { display: flex; gap: 4px; flex-wrap: wrap; } .sort-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 4px 12px; transition: all var(--duration-fast); } .sort-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .sort-btn:hover:not(.active) { border-color: var(--accent); color: var(--text); } .advanced-filters { border-top: 1px solid var(--border); } /* .advanced-filtersは「大きい枠(.search-panel-toggle等)の中の1セクション」 として設計されており、それ自体は上線1本しか持たない。サークル一覧の 詳細フィルターはそれを囲む外枠を持たない単体トップレベルのdetailsとして 使っているため、閉じている時は上線すらない「棒線」にしか見えなかった。 .search-panel-toggleと同じ「本体1つに直接 background/border/border-radiusを付けて1つの箱に見せる」パターンを適用する */ #circle-adv-filters { margin-bottom: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } /* テスト版・2026-07-16: width:100%が明示指定されている と、.search-panel .search-accordion-summaryのマイナスマージンで空いた分 だけ幅が自動で広がらず（widthがautoでなくなるため）、右端が揃わなかった。 display:flexのブロック要素はwidth未指定でも自動で幅いっぱいになるので このルール自体が不要だった。撤去 */ /* 詳細フィルターの中身を3ブロックに整理するサブ見出し（折りたたみ要素は増やさない） */ .filter-subgroup-heading { /* テスト版・2026-07-14: .filter-barはdisplay:flex+flex-wrapのため、 幅指定が無いとこの見出しも他のfilter-groupと同じ1個の折り返し単位になり、 折り返し位置次第で前の行の余白に食い込んで右側に浮いて見えていた （AI作品フィルター削除で割引グループの高さが変わり顕在化 「きたない」）。flex-basis:100%で必ず単独の行として改行させる */ flex-basis: 100%; width: 100%; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.03em; margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--border); } .filter-subgroup-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; } .active-chips-row { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; } .active-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(var(--accent-rgb, 133, 93, 255), 0.15); border: 1px solid var(--accent); border-radius: 20px; color: var(--accent); cursor: pointer; font-size: 12px; padding: 3px 10px; } .active-chip:hover { background: rgba(var(--accent-rgb, 133, 93, 255), 0.28); } .chip-x { opacity: 0.7; } .chip-reset { background: transparent; border-color: var(--border); color: var(--text-muted); } .chip-reset:hover { border-color: #dc3545; color: #dc3545; background: rgba(220,53,69,0.1); } /* 0件時 */ .zero-results { text-align: center; padding: 60px 20px; color: var(--text-muted); } .zero-results-icon { font-size: 48px; margin-bottom: 12px; } .zero-results-msg { font-size: 16px; color: var(--text); margin-bottom: 8px; } /* タグAND/ORトグル */ .tag-mode-btn { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; cursor: pointer; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); user-select: none; letter-spacing: 0.05em; transition: all var(--duration-fast); } .tag-mode-btn:hover { border-color: var(--accent); color: var(--text); } .tag-mode-btn.or-mode { background: rgba(var(--accent-rgb, 133, 93, 255), 0.18); border-color: var(--accent); color: var(--accent); } .filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle; margin-left: 4px; } /* タグ履歴ヘッダー */ .suggest-hist-header { font-size: 11px; color: var(--text-muted); padding: 4px 12px 2px; pointer-events: none; border-bottom: 1px solid var(--border); } /* ── ページネーション ── */ .pagination { display: flex; gap: 8px; justify-content: center; margin-top: 24px; } .pagination button { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; padding: 6px 14px; font-size: 13px; } .pagination button.active { background: var(--accent); border-color: var(--accent); color: #fff; } .pagination button:hover:not(.active) { border-color: var(--accent); } /* ── 作品詳細 ── */ .work-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; /* テスト版・2026-07-16: 下の「同サークルの作品」欄との間隔は、画像列 (.sample-rail-body)だけに付けても情報列の方が高い作品では効かない （align-items:startの2カラムgridなので、片方の列のmargin-bottomは もう片方の列が短いときしか外側に効かない）。2カラム全体の下に 付けるのが正しい */ margin-bottom: 24px; } .work-detail-img { /* position:stickyを撤去（テスト版・2026-07-12）。画像列が情報列（タグ・ DLsite/FANZAパネル）より低い作品では、情報列の残りをスクロールしている間 ずっと画像が画面上部に張り付いたままになり、情報列が終わって .work-detail-relatedが始まる位置まで画像が「付いてきてしまう」ように 見える不具合があった（実機のcomputed heightで確認: 画像列512px vs 情報列636.7px）。画像列の方が高い作品では逆にstickyが情報列の可読性を 助けていた可能性はあるが、高さの大小はDLsite/FANZAのタグ数等で作品ごとに 変わり読めないため、両ケースを安全に扱えるよう撤去した */ position: relative; /* テスト版・2026-07-12: absolute配置の.cover-arrow (スマホ幅用)の基準にするためrelativeにする。stickyではなくrelativeなので 静止時のレイアウトはstaticと同じ扱いで「付いてきてしまう」不具合は再発しない */ min-width: 0; } /* テスト版・2026-07-12(5回目): - ブレークポイントは834pxではなく599px以下=スマホ／600px以上=タブレット・PC に変更（実機のタブレット幅(iPad縦768px等)は600〜833pxの範囲にあり、 834pxのままだとタブレットがスマホ扱いになって矢印(.rail-arrow)ごと 消えていた。サイト既存の600/834pxのブレークポイント語彙のうち、 600px側の方が「PC,タブレット幅」という指示に合っている） - スマホ幅では写真(FANZA実機)の通り、画像自体は狭めて左右に余白を作り そこに矢印(背景無しの単純なシェブロン)を置く。.work-detail-imgは margin:0 -16pxで親#appのpaddingを打ち消して外枠は真の全幅のまま、 内側だけpaddingで余白を作る（box-sizing:border-boxで外枠幅は変えない） */ .cover-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 40px; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); cursor: pointer; z-index: 2; } .cover-arrow-prev { left: 0; } .cover-arrow-next { right: 0; } .cover-arrow:hover { color: var(--text); } @media (max-width: 599px) { .cover-arrow { display: flex; } .sample-rail-body { display: none; } .work-detail-img { margin: 0 -16px; padding: 0 28px; box-sizing: border-box; } /* ) の幅を圧迫し、はみ出しの原因になっていた。狭い画面だけ余白を8pxに 減らして入力欄側に幅を回す */ .filter-bar { padding: 0 8px; } } /* サムネイル一覧の矢印は600px以上（タブレット・PC）で表示する。 トップページの横一覧(.rail-arrow)は834px以上限定の設計だが、サンプル 画像はタブレット幅からも矢印を出したいため、.sample-rail-body内の .rail-arrowだけ個別に上書きする（詳細は上のコメント参照） */ .sample-rail-body .rail-arrow { display: none; z-index: 3; } @media (min-width: 600px) { .sample-rail-body .rail-arrow { display: flex; } /* .rail-bodyのpadding:0 64px(矢印専用の帯)は本家では834px以上でしか 付かない設計のため、タブレット幅(600〜833px)では矢印用の余白が 確保されずサムネイルに重なっていた（ (6回目): 「PCでは重ならないのにタブレットでは重なる」という症状から 判明。ここで600px以上に個別に前倒しする） */ .sample-rail-body { padding: 8px 64px; } } /* テスト版・2026-07-16（DLsite本家の参考画像に合わせて やり直し): 本家はグレーの帯１枚の上に、枠も角丸も無いシェブロンがそのまま 乗っているだけの作り。矢印だけを独立した箱にするのをやめ、帯(.sample-rail-body) 自体をグレー背景にして、矢印は透明背景のままそこに乗せる（位置・サイズは 変更しない＝帯の左右64px幅いっぱいを矢印が占める） */ .sample-rail-body .rail-arrow { background: transparent; border-radius: 0; /* 矢印の可動域は帯の上下際まで（top/bottom:12pxの余白を 撤去し、帯の高さいっぱいに広げる） */ top: 0; bottom: 0; } .sample-rail-body .rail-arrow-prev { border-right: none; } .sample-rail-body .rail-arrow-next { border-left: none; } /* ホバーは背景ではなく矢印(アイコン)自体の色を変える */ .sample-rail-body .rail-arrow:not(.is-edge):hover { background: transparent; color: var(--accent); } :root[data-theme="light"] .sample-rail-body .rail-arrow:not(.is-edge):hover { color: var(--accent); } .work-detail-img > img { width: 100%; max-width: 100%; display: block; border-radius: var(--radius-lg); } #cover-wrap { width: 100%; max-width: 560px; /* テスト版・2026-07-12: DLsite本家は.slider_item img{max-width:560px} でコンテナ幅に関わらず画像サイズを一定に保っている（実機のcomputed styleで確認済み。 詳細: 設計/DLsite作品ページ_レイアウト分析.md）。従来はコンテナ幅いっぱいに拡大していたが、 本家に合わせて上限を設け、余った横幅はこの後の情報列に譲る形に変更 */ max-height: 750px; /* 極端な縦長画像(比率3:4より縦に長い)だと枠が 際限なく縦に伸び、右側の情報パネルとバランスが崩れる。高さに上限を設け、 それを超える分は幅を縮めてobject-fit:containで全体を収める(切り取らない) */ margin: 0 auto; aspect-ratio: 3 / 4; /* 表紙画像の読み込み後にJSで実際の比率へ一度だけ上書きされる暫定値 (レイアウトジャンプ防止)。サンプル切り替え時は再計算しない（枠のサイズを 固定し、画像側をobject-fit:containで枠に収める。DLsite本家を参考に 2026-07-09変更——以前はサンプルを切り替えるたびに枠の比率も変わり、 ページの表示位置がガクガク動く不具合があった） */ overflow: hidden; background: var(--surface); position: relative; } .detail-cover { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center center; } /* サンプル画像は2カラムレイアウトの外・全幅セクション */ .work-samples-section { margin-top: 32px; } .work-samples-section h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--text); } /* テスト版・2026-07-12(2回目): サムネイル一覧の 矢印ボタンは、独自デザインではなくトップページの横一覧(.rail-body/ .rail-viewport/.rail-arrow)をそのまま流用する（「横一覧と同じスタイルで ない」との指摘）。.rail-bodyのpadding:0 64px(834px以上)が矢印ボタン専用の 領域を確保する設計のため、そのまま使えばサムネイルとの重なりも起きない （1回目の実装は矢印をサムネイルの上に直接重ねており、それが重なり・ クリック不発の原因だった）。is-edgeは付与しない＝端で無効化されず 常時クリック可（サンプル画像はループできるように） */ .sample-rail-body { margin-top: 8px; /* テスト版・2026-07-16(4回目): ここのmargin-bottomは2カラムgridの片方の 列にしか効かず、情報列の方が高い作品では下の間隔が消えていた。 間隔は.work-detail側(2カラム全体の下)に付け直したのでここでは不要 */ /* テスト版・2026-07-16(3回目): DLsite本家の参考画像は枠なし・角丸なしの グレー1色の帯。border/border-radiusは撤去し、帯自体をグレー背景にする （黒番は暗めのグレー、白番は明るめのグレー） */ border: none; border-radius: 0; /* #2b2b2bは見にくい→#3d3d3dへ→#333333でも悪目立ちする とのことでもっと暗く。ニュートラルグレーはサイトの青みがかった ダークパレット(--bg #0f0f13等)と色味が合わず浮いていた可能性があるため、 サイト既存のトーンに合わせてvar(--surface2)を使う */ background: var(--surface2); /* 左右64pxの矢印用の帯は上のmin-width:600pxのメディアクエリ側で確保する。 ここで左右paddingを指定すると、こちらの方がファイル内で後にあるため カスケードでメディアクエリ側の"padding: 8px 64px"を上書きしてしまい、 矢印の専用領域が消えてサムネイル画像と矢印が重なる不具合になっていた。 ここでは上下paddingのみ指定する */ padding-top: 8px; padding-bottom: 8px; } :root[data-theme="light"] .sample-rail-body { background: #e8e8e8; } /* サンプル横スクロールストリップ（DLsite本家準拠：固定サイズの枠を横一列に並べ、 選択中は見える範囲に収まるようスクロールする。厳密な中央寄せは行わない） */ .work-sample-strip { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; } .work-sample-strip::-webkit-scrollbar { display: none; } .work-sample-empty { margin-top: 8px; padding: 8px 0; font-size: 12px; color: var(--text-muted); text-align: center; } /* サムネイル本体(img)をキーボード操作可能にするため