/* =========================================================================== sx-longtail — site stylesheet - Default: light theme (white) - Dark theme via =========================================================================== */ :root { --bg: #ffffff; --bg-soft: #fafafa; --bg-card: #ffffff; --bg-elevated: #f5f5f7; --fg: #15171a; --fg-muted: #6b7280; --fg-subtle: #9ca3af; --border: #e5e7eb; --border-soft: #f0f0f2; --accent: #2563eb; --accent-hover: #1d4ed8; --tag-bg: #eef2ff; --tag-fg: #3730a3; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06); --max-width: 1040px; --radius: 10px; --radius-lg: 14px; color-scheme: light; } [data-theme="dark"] { --bg: #0e0e10; --bg-soft: #131316; --bg-card: #16171a; --bg-elevated: #1c1d21; --fg: #ececee; --fg-muted: #a1a1aa; --fg-subtle: #6b7280; --border: #26272c; --border-soft: #1d1e22; --accent: #60a5fa; --accent-hover: #93c5fd; --tag-bg: #1e293b; --tag-fg: #c7d2fe; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); color-scheme: dark; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; transition: background-color 0.18s ease, color 0.18s ease; } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } /* ---------- Header ---------- */ .site-header { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--border); padding: 12px 0; position: sticky; top: 0; z-index: 50; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { font-weight: 700; font-size: 16px; color: var(--fg); letter-spacing: -0.01em; } .brand:hover { color: var(--fg); } .header-actions { display: flex; align-items: center; gap: 8px; } .primary-nav a { font-size: 14px; color: var(--fg-muted); padding: 6px 10px; border-radius: 6px; } .primary-nav a:hover { color: var(--fg); background: var(--bg-elevated); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; color: var(--fg-muted); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--fg); background: var(--bg-elevated); border-color: var(--fg-subtle); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---------- Main ---------- */ .main { padding: 32px 20px 80px; } /* PR (アフィリエイト広告) 表記。景表法/ステマ規制対応で全ページ冒頭に表示する。 */ .pr-notice { margin: 0 0 20px; font-size: 11px; letter-spacing: 0.04em; color: var(--fg-subtle); } .page-head { margin-bottom: 28px; } .page-title { font-size: clamp(22px, 3.5vw, 28px); margin: 0 0 8px; letter-spacing: -0.01em; } .page-lead { color: var(--fg-muted); margin: 0; font-size: 15px; } /* ---------- Index: genre cards ---------- */ .genre-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .genre-card { display: grid; grid-template-rows: auto 1fr; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; color: var(--fg); height: 100%; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .genre-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px); color: var(--fg); } .genre-card .cover { aspect-ratio: 16 / 10; background: var(--bg-elevated); overflow: hidden; } .genre-card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .genre-card:hover .cover img { transform: scale(1.03); } .card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; } .card-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; } .card-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; } .card-meta { margin: auto 0 0; color: var(--fg-subtle); font-size: 12px; font-variant-numeric: tabular-nums; } /* ---------- Tags ---------- */ .tag { display: inline-block; background: var(--tag-bg); color: var(--tag-fg); padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 1.6; font-weight: 500; } .tag-sm { padding: 2px 8px; font-size: 11px; } /* ---------- Genre page ---------- */ .genre-head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .breadcrumb { font-size: 13px; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .breadcrumb a { color: var(--fg-muted); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb .current { color: var(--fg); } .genre-title { font-size: clamp(24px, 4vw, 32px); margin: 0 0 12px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; } .genre-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .genre-lead { margin: 0 0 28px; font-size: 15px; line-height: 1.75; color: var(--fg); } .genre-lead .lead-tag, .genre-lead .lead-count { font-weight: 700; color: var(--accent); } .genre-lead .lead-count { font-variant-numeric: tabular-nums; margin: 0 2px; } .genre-commentary { background: var(--bg-elevated); border-left: 3px solid var(--accent); padding: 16px 20px; border-radius: 6px; margin-bottom: 36px; font-size: 15px; line-height: 1.8; } .genre-commentary p { margin: 0; } /* ---------- Gallery ---------- */ .genre-gallery { display: grid; gap: 40px; } .gallery-item { margin: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0; overflow: visible; box-shadow: var(--shadow-sm); } .image-link { display: block; background: var(--bg-elevated); cursor: pointer; } .image-link img { display: block; max-width: 100%; height: auto; margin: 0 auto; transition: opacity 0.2s ease; } .image-link:hover img { opacity: 0.92; } .image-link:active img { opacity: 1; } .product-id-caption .seq-num { margin-right: 6px; color: var(--fg-subtle); opacity: 0.7; } .item-info { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; } .product-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -0.005em; } .product-title a { color: var(--fg); text-decoration: none; } .product-title a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .product-id-caption { margin: 8px 0 0; text-align: center; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; color: var(--fg-subtle); } .product-id-caption a { color: var(--fg-subtle); text-decoration: none; } .product-id-caption a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .product-meta { margin: 0; display: grid; gap: 6px; font-size: 14px; } .meta-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: baseline; } .meta-row dt { margin: 0; color: var(--fg-subtle); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; } .meta-row dd { margin: 0; color: var(--fg); } .performers { display: flex; flex-wrap: wrap; gap: 4px 8px; } .performer { display: inline-block; color: var(--fg); } .performer:not(:last-child)::after { content: '・'; color: var(--fg-subtle); margin-left: 4px; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); margin-top: 56px; padding: 24px 0; color: var(--fg-muted); font-size: 12px; background: var(--bg-soft); } .site-footer p { margin: 6px 0; } .site-footer .legal { color: var(--fg-muted); } .site-footer .rights { color: var(--fg-subtle); font-size: 11px; line-height: 1.7; } .site-footer .provided { color: var(--fg-muted); margin-top: 12px; font-size: 12px; } .site-footer .provided a { color: var(--fg); text-decoration: none; font-weight: 600; } .site-footer .provided a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .site-footer .meta { color: var(--fg-subtle); font-variant-numeric: tabular-nums; } .empty { text-align: center; padding: 48px 20px; color: var(--fg-muted); background: var(--bg-elevated); border-radius: var(--radius); } .genre-nav { margin-top: 40px; } .genre-nav a { font-size: 14px; color: var(--fg-muted); } .genre-nav a:hover { color: var(--accent); } /* ---------- Pager ---------- */ .pager { margin: 48px 0 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; font-size: 14px; } .pager-btn { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; color: var(--fg); background: var(--bg-card); font-weight: 500; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .pager-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-elevated); } .pager-btn.is-disabled { color: var(--fg-subtle); border-color: var(--border-soft); pointer-events: none; cursor: default; } .pager-pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .pager-num { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--fg-muted); background: var(--bg-card); font-variant-numeric: tabular-nums; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .pager-num:hover { border-color: var(--accent); color: var(--accent); } .pager-num.is-current { border-color: var(--fg); color: var(--bg); background: var(--fg); font-weight: 600; } /* ---------- Responsive ---------- */ @media (max-width: 720px) { body { font-size: 15px; } .main { padding: 24px 16px 64px; } .wrap { padding: 0 16px; } .genre-list { grid-template-columns: 1fr; gap: 14px; } .genre-card .cover { aspect-ratio: 16 / 9; } .genre-gallery { gap: 28px; } .item-info { padding: 14px 16px 18px; } .meta-row { grid-template-columns: 56px 1fr; gap: 10px; font-size: 13.5px; } .primary-nav a { padding: 6px 8px; } .breadcrumb { font-size: 12px; } } @media (max-width: 420px) { .meta-row { grid-template-columns: 1fr; gap: 2px; } /* 多数ページ時に画面幅を超えないよう、ナンバーリストはスクロール可能に */ .pager-pages { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; max-width: 100%; } .pager-num { min-width: 32px; height: 32px; padding: 0 8px; } .pager-btn { padding: 6px 10px; font-size: 13px; } } /* ---- Age gate (18+ ワンクリック確認) ------------------------------- 設計方針: - HTML 段階で常に出しておき (FOUC 防止)、Cookie 済なら で隠す - 背景画像が確実に隠れるよう backdrop-filter で強ブラー + 高不透明度オーバーレイ - ボタンは大きく・強い色コントラスト・ホバーで明確な変化 - モバイルでも 1 タップしやすいヒット領域 (最低 48px) - 開閉のアニメーション無し（要件: 一瞬の隙間/外れ表示を避ける） */ #age-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; /* 背景全体を強くぼかして、画像が透けて見えるのを防ぐ。 対応ブラウザでは透明寄り背景＋blur、非対応では濃い純色フォールバック。 */ background: rgba(8, 10, 14, 0.92); -webkit-backdrop-filter: blur(28px) saturate(120%); backdrop-filter: blur(28px) saturate(120%); } /* Cookie 済 → ゲート完全非表示。FOUC を起こさないため display:none で確実に消す。 */ html.age-ok #age-gate { display: none; } /* ゲート表示中はスクロール禁止（背景の慣性スクロールを止める） */ html:not(.age-ok), html:not(.age-ok) body { overflow: hidden; } .age-gate-card { position: relative; width: 100%; max-width: 480px; background: linear-gradient(180deg, #1f232a 0%, #14171c 100%); color: #f3f5f8; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 36px 32px 28px; text-align: center; /* 浮遊感を強めて背景の絵から完全に分離 */ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .age-gate-card .age-gate-badge { display: inline-block; background: rgba(255, 84, 84, 0.15); color: #ff8a8a; border: 1px solid rgba(255, 84, 84, 0.3); padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 18px; } .age-gate-card h2 { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: 0.02em; color: #fff; } .age-gate-card p { margin: 0 0 22px; line-height: 1.7; font-size: 15px; color: #c9ced6; } .age-gate-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .age-gate-btn { min-height: 52px; padding: 14px 24px; border-radius: 10px; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; } .age-gate-btn:focus-visible { outline: 3px solid #ffd54a; outline-offset: 3px; } .age-gate-btn.primary { background: linear-gradient(180deg, #ffe27a 0%, #ffc94a 100%); color: #2a1a00; box-shadow: 0 8px 22px rgba(255, 196, 60, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55); } .age-gate-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(255, 196, 60, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.65); } .age-gate-btn.primary:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(255, 196, 60, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .age-gate-btn.secondary { background: transparent; color: #c9ced6; border: 1px solid rgba(255, 255, 255, 0.18); } .age-gate-btn.secondary:hover { color: #fff; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.32); } .age-gate-note { font-size: 12px; color: #8b929d; margin: 0; line-height: 1.55; } @media (prefers-reduced-motion: reduce) { .age-gate-btn { transition: none; } } /* 旧ブラウザ用の保険: backdrop-filter 非対応では純色不透明度をさらに上げる */ @supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { #age-gate { background: rgba(8, 10, 14, 0.985); } } @media (max-width: 480px) { #age-gate { padding: 16px; } .age-gate-card { padding: 28px 22px 22px; border-radius: 14px; } .age-gate-card h2 { font-size: 19px; } .age-gate-card p { font-size: 14px; } }