/* * 白に一本化 (v0.89.0) * * BOSSの依頼（2026-10-29）：「白のほうがいかがわしくない。白に一本化して最適化したい」。 * ローカルの見本で決めたもの（2026-10-29〜30）： * 配色 … 白×濃紺。本文 #333・リンク青・見出しと選択中は濃紺・買うはオレンジ（buy-buttons.css）・セールは赤。 * 金は1位の札だけ。以前は価格・タグ・目次・小見出しの文字が暗い金（#77550c）だった。 * 書体 … Noto Sans JP（400・700の2つだけ読む。mo-child-discovery.php）。 * 見出し … 記事の h2 は濃紺の帯に白い文字。欄の見出しは左に濃紺の線。 * ヘッダー … PCは1段（ロゴ・メニュー・小さい検索）。スマホは検索と☰のアイコン＋画面の下に5つのタブ。 * 作品カード … 画像・題名2行・価格だけ（product-card.php）。 * 競合（av-wiki・ザ・マン汁・VOD365、2026-10-29 実測）は白地・本文 #333・リンク青 #1176d4・ * 見出しは濃紺 #04384c の帯・購入ボタンはオレンジだった。 * * どのCSSよりも後に読む（mo-buy-buttons のあと）。ライト用の指定（:root[data-mo-theme="light"] …）と * 同じ強さで書けば、後に読むこちらが勝つ。 には常に data-mo-theme="light" が付く。 * 色の変数の名前（--mo-gold など）は既存のCSSが使っているのでそのまま残し、中身だけ入れ替える。 * --mo-gold … 文字の強調色だった → 本文と同じ #333（太字で区別する） * --mo-gold-dark … 枠・下線の強調色だった → 濃紺 * --mo-gold-fill … 選択中などの地だった（濃い文字を乗せる）→ 薄い濃紺（濃い文字のまま読める） */ :root, :root[data-mo-theme="light"] { --mo-bg: #ffffff; --mo-panel: #ffffff; --mo-panel-2: #f5f6f8; --mo-line: #e2e5e9; --mo-text: #333333; --mo-muted: #666666; --mo-link: #1a6dcc; --mo-navy: #1f3a5f; --mo-navy-2: #2c5282; --mo-navy-soft: #edf2f8; --mo-gold: #333333; --mo-gold-dark: #1f3a5f; --mo-gold-fill: #edf2f8; --mo-rank-gold: #e3b341; --mo-brand: #1f3a5f; --mo-brand-ink: #ffffff; --mo-sale: #d7263d; --mo-shadow: 0 10px 30px rgba(24, 39, 55, .08); --mo-font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", Meiryo, sans-serif; --mo-font-head: var(--mo-font-jp); /* 旧記事の本文に焼き込まれた金の文字（mo-child-legacy-skin.php の読み替え先） */ --mo-lt-f4c24f: #333333; } /* ---- 地と文字 ---- */ :root[data-mo-theme="light"] body, :root[data-mo-theme="light"] .mo-site-frame, :root[data-mo-theme="light"] .mo-db { color: var(--mo-text); background: var(--mo-bg); } :root[data-mo-theme="light"] .mo-db { font-size: 16px; } /* ---- 本文のリンクは青に下線（クラスの無い a だけ。ボタン・カードには効かせない） ---- */ :root[data-mo-theme="light"] .mo-editorial-body a:not([class]), :root[data-mo-theme="light"] .entry-content a:not([class]) { color: var(--mo-link); text-decoration: underline; text-underline-offset: 3px; } :root[data-mo-theme="light"] .mo-editorial-body a:not([class]):hover, :root[data-mo-theme="light"] .entry-content a:not([class]):hover { text-decoration: none; } /* 目次（Cocoon）は本文の色。押せることは番号と並びで分かる */ :root[data-mo-theme="light"] .mo-editorial-body .toc a, :root[data-mo-theme="light"] .entry-content .toc a { color: var(--mo-text); text-decoration: none; } :root[data-mo-theme="light"] .mo-editorial-body .toc a:hover, :root[data-mo-theme="light"] .entry-content .toc a:hover { color: var(--mo-link); text-decoration: underline; } /* 文字のリンク（金の文字だった所）を青に */ :root[data-mo-theme="light"] .mo-work-meta a, :root[data-mo-theme="light"] .mo-work-facts dd > a, :root[data-mo-theme="light"] .mo-work-cast a, :root[data-mo-theme="light"] .mo-db .mo-hub-cta a, :root[data-mo-theme="light"] .mo-actress-line a, :root[data-mo-theme="light"] .mo-section-head > a { color: var(--mo-link); } :root[data-mo-theme="light"] .mo-section-head > a { font-weight: 500; text-decoration: none; } :root[data-mo-theme="light"] .mo-section-head > a:hover { text-decoration: underline; } /* ---- 見出し ---- */ :root .mo-section-head h2::before { background: var(--mo-navy); width: 5px; } :root[data-mo-theme="light"] .mo-editorial-body h2 { margin: 2.2em 0 1em; padding: .6em .85em; color: #ffffff; background: var(--mo-navy); border: 0; border-radius: 4px; font: 700 22px/1.5 var(--mo-font-head); } :root[data-mo-theme="light"] .mo-editorial-body h2::after { display: none; } :root[data-mo-theme="light"] .mo-editorial-body h2 a { color: inherit; } :root[data-mo-theme="light"] .mo-editorial-body h3 { margin: 1.8em 0 .8em; padding: .1em 0 .1em .7em; color: var(--mo-text); border-left: 5px solid var(--mo-navy); font: 700 19px/1.5 var(--mo-font-head); } @media (max-width: 600px) { :root[data-mo-theme="light"] body .mo-editorial-body h2 { font-size: 19px; margin-top: 2em; } :root[data-mo-theme="light"] body .mo-editorial-body h3 { font-size: 17px; } } /* ---- 価格は本文の色の太字。セールは赤 ---- */ :root[data-mo-theme="light"] .mo-card-price strong, :root[data-mo-theme="light"] .mo-rank-price, :root[data-mo-theme="light"] .mo-price-yen, :root[data-mo-theme="light"] .mo-work-buy-price strong, :root[data-mo-theme="light"] .mo-sticky-buy-price strong { color: var(--mo-text); } :root[data-mo-theme="light"] .mo-sale-badge { color: #ffffff; background: var(--mo-sale); } :root[data-mo-theme="light"] .mo-sticky-buy-price span b.mo-sticky-sale { color: var(--mo-sale); } /* ---- 選択中は濃紺に白い文字。触れたときは薄い濃紺 ---- */ :root[data-mo-theme="light"] .mo-pagination a.is-current, :root[data-mo-theme="light"] .mo-inline-filter a.is-active, :root[data-mo-theme="light"] .mo-inline-filter button.is-active, :root[data-mo-theme="light"] .mo-inline-filter .is-active, :root[data-mo-theme="light"] .mo-visual-filter-tabs button.is-active, :root[data-mo-theme="light"] .mo-filter-tags label input:checked + span, :root[data-mo-theme="light"] .mo-rank-tabs a.is-active, :root[data-mo-theme="light"] .mo-actress-type-nav a.is-active, :root[data-mo-theme="light"] .mo-ontology-sections .mo-fetish-pick.is-selected { color: #ffffff; background: var(--mo-navy); border-color: var(--mo-navy); } :root[data-mo-theme="light"] .mo-chips a:hover, :root[data-mo-theme="light"] .mo-ontology-sections a:hover, :root[data-mo-theme="light"] .mo-ontology-sections a.mo-fetish-solo:hover { color: var(--mo-navy); background: var(--mo-navy-soft); border-color: var(--mo-navy-2); } /* ---- 金は1位の札だけ ---- */ :root[data-mo-theme="light"] .mo-shelf.is-ranked .mo-shelf-item:nth-child(1)::before, :root[data-mo-theme="light"] .mo-site-rank-grid.is-first-page > .mo-site-rank-item:nth-child(1)::before { color: #17130a; background: var(--mo-rank-gold); border-color: var(--mo-rank-gold); } :root[data-mo-theme="light"] .mo-rank-card.is-top-1 .mo-rank-badge { color: #17130a; background: var(--mo-rank-gold); border-color: var(--mo-rank-gold); } :root[data-mo-theme="light"] .mo-shelf.is-ranked.is-actresses .mo-shelf-item:not(.is-more)::before { color: #ffffff; background: var(--mo-navy); border-color: #ffffff; } /* ---- 作品カード（少なめ）：画像・題名2行・価格 ---- */ :root[data-mo-theme="light"] .mo-product-card { background: #ffffff; border: 0; border-radius: 0; box-shadow: none; } :root[data-mo-theme="light"] .mo-product-image { border: 1px solid var(--mo-line); border-radius: 4px; background: var(--mo-panel-2); } :root .mo-product-body { padding: 8px 0 0; } :root .mo-product-body h2 { margin: 0 0 4px; font: 500 13px/1.5 var(--mo-font-jp); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :root[data-mo-theme="light"] .mo-product-body h2 a { color: var(--mo-text); } :root[data-mo-theme="light"] .mo-product-card:hover .mo-product-body h2 a { color: var(--mo-link); text-decoration: underline; } :root[data-mo-theme="light"] .mo-card-price { padding: 0; border-top: 0; } :root .mo-card-price strong { font-size: 15px; font-weight: 700; } /* カーソルを当てたときの動き (v0.88.0) は残し、縁と影を濃紺の薄いものに */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { :root[data-mo-theme="light"] .mo-product-card:hover { border-color: transparent; box-shadow: none; } :root[data-mo-theme="light"] .mo-product-card:hover .mo-product-image { border-color: var(--mo-navy-2); box-shadow: 0 10px 24px rgba(24, 39, 55, .16); } :root[data-mo-theme="light"] .mo-post-card:hover, :root[data-mo-theme="light"] .mo-rank-card:hover .mo-rank-thumb, :root[data-mo-theme="light"] .mo-related-card > a:hover .mo-related-thumb, :root[data-mo-theme="light"] .mo-related-post > a:hover { border-color: var(--mo-navy-2); box-shadow: 0 10px 24px rgba(24, 39, 55, .14); } :root[data-mo-theme="light"] .mo-post-card:hover h2 a, :root[data-mo-theme="light"] .mo-related-post > a:hover h3 { color: var(--mo-link); } } /* ---- ヘッダー：PCは1段 ---- */ :root[data-mo-theme="light"] .mo-db-header { color: var(--mo-text); background: rgba(255, 255, 255, .98); border-bottom: 1px solid var(--mo-line); box-shadow: none; } .mo-db-utility { display: none; } :root .mo-db-header-main { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 300px); gap: 20px; align-items: center; min-height: 64px; } :root .mo-db-header-icons { display: none; } :root[data-mo-theme="light"] .mo-db-nav { min-width: 0; border-top: 0; } :root .mo-db-nav-links { min-height: 64px; } :root .mo-db-nav-links a, :root .mo-db-nav-links a:first-child { padding: 0 11px; font-size: 15px; font-weight: 500; } :root[data-mo-theme="light"] .mo-db-nav-links a:hover { color: var(--mo-navy-2); } :root[data-mo-theme="light"] .mo-db-nav-links a.is-active { color: var(--mo-navy); font-weight: 700; } :root .mo-db-nav-links a.is-active::after, :root .mo-db-nav-links a:first-child.is-active::after { right: 11px; left: 11px; background: var(--mo-navy); } :root .mo-db-global-search { width: 100%; justify-self: end; } :root .mo-db-brand strong { color: var(--mo-navy); } /* 幅が足りないときはメニューを2段目に（横に流れる） */ @media (max-width: 1180px) and (min-width: 861px) { :root .mo-db-header-main { grid-template-columns: auto minmax(0, 1fr); gap: 0 20px; min-height: 0; padding-top: 10px; } :root[data-mo-theme="light"] .mo-db-nav { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--mo-line); margin-top: 10px; } :root .mo-db-nav-links { min-height: 46px; } :root .mo-db-global-search { max-width: 420px; } } /* ---- スマホ：検索と☰のアイコン・横から出るメニュー・下のタブ ---- */ .mo-db-drawer, .mo-db-tabbar { display: none; } @media (max-width: 860px) { :root .mo-db-header-main { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-height: 56px; padding-top: 0; padding-bottom: 0; } :root[data-mo-theme="light"] .mo-db-nav { display: none; } :root .mo-db-global-search { display: none; grid-column: 1 / -1; grid-row: 2; max-width: none; margin-bottom: 10px; } :root .mo-db-header.is-search-open .mo-db-global-search { display: grid; } :root .mo-db-header-icons { display: flex; gap: 2px; } .mo-db-header-icons button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--mo-navy); background: none; border: 0; border-radius: 6px; cursor: pointer; } .mo-db-header-icons button[aria-expanded="true"] { background: var(--mo-navy-soft); } .mo-db-drawer:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 200; background: rgba(10, 20, 35, .45); } .mo-db-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 85vw); padding: 52px 18px 24px; overflow-y: auto; background: #ffffff; } .mo-db-drawer-panel nav a { display: block; padding: 13px 4px; color: var(--mo-text); border-bottom: 1px solid var(--mo-line); font-size: 16px; text-decoration: none; } .mo-db-drawer-panel nav a.is-active { color: var(--mo-navy); font-weight: 700; } .mo-db-drawer-close { position: absolute; top: 6px; right: 8px; width: 44px; height: 44px; color: var(--mo-muted); background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; } html.mo-drawer-open, html.mo-drawer-open body { overflow: hidden; } .mo-db-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; right: 0; bottom: 0; left: 0; z-index: 75; background: #ffffff; border-top: 1px solid var(--mo-line); padding-bottom: env(safe-area-inset-bottom); } .mo-db-tabbar a { display: grid; justify-items: center; gap: 1px; padding: 6px 0 5px; color: var(--mo-muted); font-size: 10px; line-height: 1.3; text-decoration: none; } .mo-db-tabbar a.is-active { color: var(--mo-navy); font-weight: 700; } body.mo-standalone-shell { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } /* 下に付いてくる購入バー・フェチの選択バーはタブの上に */ :root .mo-sticky-buy, :root .mo-fetish-bar { bottom: calc(56px + env(safe-area-inset-bottom)); } body:has(.mo-sticky-buy.is-article) { padding-bottom: calc(140px + env(safe-area-inset-bottom)); } } /* ---- フッター：濃紺 ---- */ :root[data-mo-theme="light"] .mo-db-footer { color: #cfd9e6; background: var(--mo-navy); border-top: 0; } :root[data-mo-theme="light"] .mo-db-footer-brand > a, :root[data-mo-theme="light"] .mo-db-footer nav strong { color: #ffffff; } :root[data-mo-theme="light"] .mo-db-footer-brand > a small, :root[data-mo-theme="light"] .mo-db-footer-brand p, :root[data-mo-theme="light"] .mo-db-footer nav a, :root[data-mo-theme="light"] .mo-db-footer-bottom { color: #cfd9e6; } :root[data-mo-theme="light"] .mo-db-footer nav a:hover { color: #ffffff; text-decoration: underline; } :root[data-mo-theme="light"] .mo-db-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .18); } :root[data-mo-theme="light"] .mo-db-footer-brand > a b { color: var(--mo-navy); background: #ffffff; } /* ============================================================ 手順2：記事とタグ (v0.90.0) 記事の上を白に（パンくず・題名・カテゴリーと日付・アイキャッチ）、右にサイドバー、 本文の下に「この記事のタグ」、記事の並びは1本1行のリスト。 ============================================================ */ /* ---- 2列（記事とタグの一覧だけ） ---- */ .mo-db-main.mo-editorial-single, .mo-db-main.mo-tag-archive { padding-top: 0; } .mo-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; } .mo-article-main { min-width: 0; } /* 記事の下の欄は .mo-shell で幅を決めていた。列の中では列の幅に合わせる */ :root .mo-article-layout .mo-shell { width: auto; margin-inline: 0; } :root .mo-article-layout .mo-home-section { padding-left: 0; padding-right: 0; } :root .mo-article-main .mo-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; } @media (max-width: 960px) { .mo-article-layout { grid-template-columns: minmax(0, 1fr); } .mo-article-side { display: none; } } @media (max-width: 640px) { :root .mo-article-main .mo-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; } } /* ---- 記事の上 ---- */ .mo-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 16px 0 10px; color: var(--mo-muted); font-size: 12px; line-height: 1.5; } :root[data-mo-theme="light"] .mo-crumbs a { color: var(--mo-link); text-decoration: none; } :root[data-mo-theme="light"] .mo-crumbs a:hover { text-decoration: underline; } .mo-crumbs > span:last-child { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; } :root .mo-article-head h1 { margin: 0 0 10px; color: var(--mo-text); font: 700 clamp(22px, 2.5vw, 28px)/1.5 var(--mo-font-head); } .mo-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 18px; color: var(--mo-muted); font-size: 12px; } :root[data-mo-theme="light"] .mo-article-meta a.mo-article-cat { padding: 1px 10px; color: #ffffff; background: var(--mo-navy); border-radius: 3px; font-weight: 500; text-decoration: none; } .mo-article-eyecatch { margin: 0 0 24px; } .mo-article-eyecatch img { display: block; width: 100%; height: auto; border-radius: 6px; } :root .mo-article-main .mo-editorial-body { max-width: none; padding-top: 0; } /* ---- この記事のタグ（本文の中の「投稿のタグ」ブロックは隠して、ここに一本化） ---- */ :root .mo-editorial-body .wp-block-post-terms.taxonomy-post_tag { display: none; } .mo-post-tags { margin: 2.4em 0 0; padding: 16px 18px; background: var(--mo-panel-2); border: 1px solid var(--mo-line); border-radius: 8px; } :root[data-mo-theme="light"] .mo-editorial-body .mo-post-tags h2 { margin: 0 0 10px; padding: 0; color: var(--mo-text); background: none; border: 0; border-radius: 0; font: 700 15px/1.5 var(--mo-font-head); } .mo-tag-chips { display: flex; flex-wrap: wrap; gap: 8px; } :root[data-mo-theme="light"] a.mo-tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; color: var(--mo-text); background: #ffffff; border: 1px solid var(--mo-line); border-radius: 999px; font-size: 13px; line-height: 1.4; text-decoration: none; } :root[data-mo-theme="light"] a.mo-tag-chip::before { content: "#"; color: #8a94a3; } .mo-tag-chip small { color: var(--mo-muted); font-size: 11px; } :root[data-mo-theme="light"] a.mo-tag-chip:hover { color: var(--mo-navy); background: var(--mo-navy-soft); border-color: var(--mo-navy-2); } /* ---- 記事の並び：1本1行のリスト（記事一覧・同じタグの記事・タグの一覧・トップ） ---- */ :root .mo-post-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } :root[data-mo-theme="light"] .mo-post-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; background: transparent; border: 0; border-bottom: 1px solid var(--mo-line); border-radius: 0; overflow: visible; } :root[data-mo-theme="light"] .mo-post-thumb { aspect-ratio: 16 / 9; border-radius: 6px; background: var(--mo-panel-2); box-sizing: border-box; padding: 0; } :root .mo-post-card > div { padding: 0; } :root[data-mo-theme="light"] .mo-post-card p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--mo-muted); font-size: 12px; } .mo-post-card b.mo-post-cat { padding: 0 8px; color: #ffffff; background: var(--mo-navy); border-radius: 3px; font-size: 11px; font-weight: 500; } :root .mo-post-card h2 { margin: 6px 0 6px; font: 700 17px/1.55 var(--mo-font-head); } :root[data-mo-theme="light"] .mo-post-card h2 a { color: var(--mo-text); } :root[data-mo-theme="light"] .mo-post-card > div > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--mo-muted); font-size: 13px; line-height: 1.7; } .mo-post-card small.mo-post-shared { display: block; margin-top: 6px; color: var(--mo-muted); font-size: 12px; } /* カーソルを当てたときの動き (v0.88.0) はリストでは使わない（カードが浮くと隣の行に重なる）。題名の色と下線だけ */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { :root[data-mo-theme="light"] .mo-post-card:hover { z-index: auto; margin-bottom: 0; transform: none; border-color: var(--mo-line); box-shadow: none; } :root[data-mo-theme="light"] .mo-post-card:hover .mo-post-thumb { padding-bottom: 0; } :root[data-mo-theme="light"] .mo-post-card:hover h2 a { color: var(--mo-link); text-decoration: underline; } } @media (max-width: 640px) { :root[data-mo-theme="light"] .mo-post-card { grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 10px 0; } :root .mo-post-card h2 { font-size: 14px; margin: 4px 0 0; } :root[data-mo-theme="light"] .mo-post-card > div > span { display: none; } } /* ---- サイドバー ---- */ .mo-article-side { position: sticky; top: 80px; padding-top: 16px; } body.admin-bar .mo-article-side { top: 112px; } .mo-side-box { margin-bottom: 26px; } .mo-side-box h2 { margin: 0 0 10px; padding: 8px 12px; color: #ffffff; background: var(--mo-navy); border-radius: 4px; font: 700 15px/1.4 var(--mo-font-head); } .mo-side-posts, .mo-side-cats { margin: 0; padding: 0; list-style: none; font-size: 13px; } .mo-side-posts li, .mo-side-cats li { border-bottom: 1px solid var(--mo-line); } :root[data-mo-theme="light"] .mo-side-posts a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 9px 0; color: var(--mo-text); line-height: 1.5; text-decoration: none; } .mo-side-posts img, .mo-side-posts i { display: block; width: 72px; height: 48px; object-fit: cover; border-radius: 3px; background: var(--mo-panel-2); } .mo-side-posts span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } :root[data-mo-theme="light"] .mo-side-posts a:hover span { color: var(--mo-link); text-decoration: underline; } :root[data-mo-theme="light"] .mo-side-cats a { display: flex; justify-content: space-between; padding: 9px 2px; color: var(--mo-text); text-decoration: none; } :root[data-mo-theme="light"] .mo-side-cats a:hover { color: var(--mo-link); } .mo-side-cats small { color: var(--mo-muted); } .mo-article-side .mo-tag-chips { gap: 6px; } /* ---- タグの一覧 ---- */ .mo-tag-head { margin: 0 0 6px; } :root .mo-tag-head h1 { margin: 0 0 6px; color: var(--mo-text); font: 700 clamp(22px, 2.5vw, 28px)/1.5 var(--mo-font-head); } .mo-tag-head span { color: var(--mo-muted); font-size: 14px; } .mo-tag-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; } :root[data-mo-theme="light"] .mo-tag-pagination .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; color: var(--mo-text); background: #ffffff; border: 1px solid var(--mo-line); border-radius: 6px; font-size: 14px; text-decoration: none; } :root[data-mo-theme="light"] .mo-tag-pagination .page-numbers.current { color: #ffffff; background: var(--mo-navy); border-color: var(--mo-navy); } .mo-empty-note { color: var(--mo-muted); } /* ============================================================ 手順3：トップ（読みもの型）(v0.91.0) 冒頭を1行に詰め、記事を主役に。下に人気ランキング（作品8本）・人気の女優（12人）・タグ。 ============================================================ */ .mo-home-intro { padding: 22px 0 18px; background: var(--mo-navy-soft); border-bottom: 1px solid var(--mo-line); } .mo-home-intro .mo-shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; } :root .mo-home-intro h1 { margin: 0 0 4px; color: var(--mo-navy); font: 700 clamp(20px, 2.4vw, 26px)/1.4 var(--mo-font-head); } .mo-home-intro p { margin: 0; color: var(--mo-muted); font-size: 13px; line-height: 1.6; } :root .mo-home-intro .mo-home-ahegao-links { flex: 0 1 460px; margin: 0; } :root[data-mo-theme="light"] .mo-db .mo-home-intro .mo-home-ahegao-links a { padding: 10px 12px; background: #ffffff; border: 1px solid var(--mo-line); border-left: 5px solid var(--mo-navy); border-radius: 6px; } :root[data-mo-theme="light"] .mo-db .mo-home-intro .mo-home-ahegao-links a:hover { border-color: var(--mo-navy-2); border-left-color: var(--mo-navy); } :root .mo-home-reading .mo-home-section { padding-top: 32px; padding-bottom: 8px; } /* 大きな記事＋小さな4本 */ .mo-home-feature { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; } :root[data-mo-theme="light"] a.mo-home-feature-big { display: block; color: var(--mo-text); text-decoration: none; } .mo-home-feature-thumb { display: block; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 8px; background: var(--mo-panel-2); } .mo-home-feature-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .mo-home-feature-big b { display: block; margin: 12px 0 6px; font: 700 21px/1.5 var(--mo-font-head); } .mo-home-feature-big small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--mo-muted); font-size: 13px; line-height: 1.7; } :root[data-mo-theme="light"] a.mo-home-feature-big:hover b { color: var(--mo-link); text-decoration: underline; } .mo-home-feature-minis { display: grid; gap: 12px; align-content: start; margin: 0; padding: 0; list-style: none; } :root[data-mo-theme="light"] .mo-home-feature-minis a { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; color: var(--mo-text); text-decoration: none; } .mo-home-feature-mini-thumb { display: block; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 4px; background: var(--mo-panel-2); } .mo-home-feature-mini-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .mo-home-feature-minis b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 700 14px/1.5 var(--mo-font-head); } :root[data-mo-theme="light"] .mo-home-feature-minis a:hover b { color: var(--mo-link); text-decoration: underline; } /* 人気ランキング：作品8本（4列×2段）。順位の札は画像の外（上） */ :root .mo-home-rank-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px 14px; margin: 0; padding: 0; list-style: none; } .mo-home-rank-item { position: relative; padding-top: 30px; } .mo-home-rank-item::before { content: attr(data-rank); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 26px; height: 26px; color: var(--mo-text); background: var(--mo-panel-2); border: 1px solid var(--mo-line); border-radius: 50%; font: 700 13px/1 var(--mo-font-jp); } .mo-home-rank-item:nth-child(1)::before { color: #17130a; background: var(--mo-rank-gold); border-color: var(--mo-rank-gold); } .mo-home-rank-item:nth-child(2)::before { color: #17130a; background: #c9d1da; border-color: #c9d1da; } .mo-home-rank-item:nth-child(3)::before { color: #17130a; background: #d39b6a; border-color: #d39b6a; } /* 人気の女優：顔写真の丸を12人 */ .mo-home-actresses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 14px; margin: 0; padding: 0; list-style: none; } :root[data-mo-theme="light"] .mo-home-actresses a { display: grid; justify-items: center; gap: 2px; color: var(--mo-text); text-align: center; text-decoration: none; } .mo-home-actresses img, .mo-home-actresses .mo-image-placeholder { width: 100%; max-width: 120px; aspect-ratio: 1; object-fit: cover; object-position: top; border: 1px solid var(--mo-line); border-radius: 50%; background: var(--mo-panel-2); } .mo-home-actresses b { margin-top: 6px; font-size: 13px; font-weight: 700; } .mo-home-actresses small { color: var(--mo-muted); font-size: 11px; } :root[data-mo-theme="light"] .mo-home-actresses a:hover b { color: var(--mo-link); text-decoration: underline; } @media (max-width: 1060px) { :root .mo-home-rank-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 860px) { .mo-home-feature { grid-template-columns: minmax(0, 1fr); } .mo-home-actresses { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 640px) { .mo-home-intro { padding: 16px 0 14px; } :root .mo-home-intro .mo-home-ahegao-links { flex-basis: 100%; } .mo-home-feature-big b { font-size: 17px; } :root[data-mo-theme="light"] .mo-home-feature-minis a { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; } .mo-home-feature-minis b { font-size: 13px; } :root .mo-home-rank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; } .mo-home-actresses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; } } /* ============================================================ 手順4：女優名鑑（1人1行）と女優ページ（案1）(v0.92.0) ============================================================ */ /* ---- 1人1行（女優名鑑・ランキング・体型別・メーカー） ---- */ :root .mo-actress-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } :root[data-mo-theme="light"] .mo-actress-card.mo-actress-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; background: transparent; border: 0; border-bottom: 1px solid var(--mo-line); border-radius: 0; overflow: visible; } :root[data-mo-theme="light"] .mo-actress-card.mo-actress-row.has-strip { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.2fr); } .mo-actress-row .mo-image-placeholder b { font-size: 10px; } .mo-actress-row .mo-image-placeholder small { font-size: 7px; } :root[data-mo-theme="light"] .mo-actress-row .mo-actress-image { width: 96px; height: 96px; aspect-ratio: 1; border: 1px solid var(--mo-line); border-radius: 50%; background: var(--mo-panel-2); } .mo-actress-row .mo-actress-image img { object-fit: cover; object-position: top; } :root .mo-actress-row > div.mo-actress-row-body { padding: 0; } :root .mo-actress-row h2 { margin: 0 0 4px; font: 700 17px/1.4 var(--mo-font-head); } :root[data-mo-theme="light"] .mo-actress-row h2 a { color: var(--mo-text); } :root[data-mo-theme="light"] .mo-actress-row h2 a:hover { color: var(--mo-link); text-decoration: underline; } :root .mo-actress-row h2 small { display: inline; margin-left: 8px; font: 400 12px var(--mo-font-jp); } .mo-actress-facts { display: flex; flex-wrap: wrap; gap: 2px 12px; } :root[data-mo-theme="light"] .mo-actress-row p.mo-actress-facts { margin: 0 0 6px; color: var(--mo-muted); font-size: 12px; } .mo-actress-facts b { color: var(--mo-text); font-weight: 700; } .mo-actress-row .mo-chips { gap: 4px; } :root[data-mo-theme="light"] .mo-actress-row .mo-chips span { padding: 1px 8px; font-size: 11px; background: var(--mo-panel-2); border-color: var(--mo-line); } .mo-actress-row .mo-rank-number { position: static; grid-row: 1; width: 26px; height: 26px; font-size: 13px; } :root[data-mo-theme="light"] .mo-actress-card.mo-actress-row:has(.mo-rank-number) { grid-template-columns: 26px 96px minmax(0, 1fr); } .mo-actress-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .mo-actress-strip a { display: block; aspect-ratio: 147 / 200; overflow: hidden; border: 1px solid var(--mo-line); border-radius: 3px; background: var(--mo-panel-2); } .mo-actress-strip img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 98% center; } @media (max-width: 640px) { :root[data-mo-theme="light"] .mo-actress-card.mo-actress-row, :root[data-mo-theme="light"] .mo-actress-card.mo-actress-row.has-strip { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; } :root[data-mo-theme="light"] .mo-actress-row .mo-actress-image { width: 72px; height: 72px; } .mo-actress-row .mo-actress-strip { grid-column: 1 / -1; } :root[data-mo-theme="light"] .mo-actress-card.mo-actress-row:has(.mo-rank-number) { grid-template-columns: 22px 72px minmax(0, 1fr); } } /* ---- 名鑑の絞り込み：カップ数・年代・身長・並び順を文字のボタンで（v0.95.0） ---- */ .mo-actress-facets { margin: 0 0 22px; padding: 14px 18px; background: var(--mo-panel-2); border: 1px solid var(--mo-line); border-radius: 8px; } .mo-actress-facets dl { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px 14px; margin: 0; align-items: center; } .mo-actress-facets dt { color: var(--mo-navy); font-size: 14px; font-weight: 700; } .mo-actress-facets dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } :root[data-mo-theme="light"] .mo-actress-facets dd a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; color: var(--mo-text); background: #ffffff; border: 1px solid var(--mo-line); border-radius: 4px; font-size: 14px; text-decoration: none; } :root[data-mo-theme="light"] .mo-actress-facets dd a:hover { color: var(--mo-navy); border-color: var(--mo-navy-2); } :root[data-mo-theme="light"] .mo-actress-facets dd a.is-active { color: #ffffff; background: var(--mo-navy); border-color: var(--mo-navy); font-weight: 700; } .mo-actress-facets-note { margin: 10px 0 0; color: var(--mo-muted); font-size: 12px; } @media (max-width: 640px) { .mo-actress-facets { padding: 12px; } .mo-actress-facets dl { grid-template-columns: minmax(0, 1fr); gap: 4px; } .mo-actress-facets dt { margin-top: 6px; font-size: 13px; } /* 1項目1行にして横に送る（折り返すと箱が473pxになり、最初の画面がほぼ埋まった。実測） */ .mo-actress-facets dd { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; overscroll-behavior-x: contain; } .mo-actress-facets dd::-webkit-scrollbar { display: none; } :root[data-mo-theme="light"] .mo-actress-facets dd a { flex: none; min-height: 34px; padding: 0 10px; font-size: 13px; white-space: nowrap; } } /* ---- 名鑑の名前の検索 ---- */ .mo-actress-search { display: flex; max-width: 560px; margin: 0 0 12px; } :root[data-mo-theme="light"] .mo-db .mo-actress-search input { flex: 1; min-width: 0; height: 44px; margin: 0; padding: 0 14px; border: 1px solid #c9ced6; border-right: 0; border-radius: 6px 0 0 6px; font-size: 15px; } :root[data-mo-theme="light"] .mo-db .mo-actress-search button { height: 44px; padding: 0 20px; color: #ffffff; background: var(--mo-navy); border: 0; border-radius: 0 6px 6px 0; font-weight: 700; } /* ---- 女優ページの冒頭 ---- */ .mo-actress-head { padding-bottom: 8px; } .mo-actress-head-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; } .mo-actress-photo { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--mo-line); border-radius: 8px; background: var(--mo-panel-2); } .mo-actress-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } :root .mo-actress-head h1 { margin: 0 0 10px; color: var(--mo-text); font: 700 clamp(24px, 3vw, 30px)/1.3 var(--mo-font-head); } .mo-actress-head h1 small { margin-left: 10px; color: var(--mo-muted); font: 400 14px var(--mo-font-jp); } .mo-actress-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; } .mo-actress-stats li { padding: 4px 12px; color: var(--mo-muted); background: var(--mo-panel-2); border: 1px solid var(--mo-line); border-radius: 6px; font-size: 13px; } .mo-actress-stats b { margin-right: 2px; color: var(--mo-text); font-size: 17px; } .mo-actress-stats small { font-size: 11px; } .mo-actress-profile { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 12px; font-size: 14px; } .mo-actress-profile dt { color: var(--mo-muted); } .mo-actress-profile dd { margin: 0; color: var(--mo-text); } :root[data-mo-theme="light"] .mo-actress-profile a { color: var(--mo-link); } .mo-actress-fetishes { margin-top: 22px; } .mo-actress-fetishes h2 { margin: 0 0 10px; padding-left: 12px; color: var(--mo-text); border-left: 5px solid var(--mo-navy); font: 700 17px/1.4 var(--mo-font-head); } /* ---- 出演作の並び替え ---- */ .mo-work-sort { margin-bottom: 8px; } .mo-work-sort > span { align-self: center; margin-right: 4px; color: var(--mo-muted); font-size: 13px; font-weight: 700; } @media (max-width: 640px) { .mo-actress-head-grid { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; } .mo-actress-head h1 small { display: block; margin: 4px 0 0; } .mo-actress-profile { grid-column: 1 / -1; grid-template-columns: 72px minmax(0, 1fr); font-size: 13px; } } /* ============================================================ 手順5：作品ページ（案2）(v0.93.0) 左の列に横長ジャケット → 題名 → 情報 → 下の欄。右の列に価格と購入の箱（画面に付いてくる）。 961px 以上だけ2列。それより狭いときは今までの並び（題名の下に購入の箱）。 ============================================================ */ :root[data-mo-theme="light"] .mo-work-hero { padding: 0 0 8px; background: transparent; border: 0; } :root .mo-work-layout .mo-shell { width: auto; margin-inline: 0; } .mo-work-aside { display: none; } @media (min-width: 961px) { .mo-work-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; } .mo-work-main { min-width: 0; } .mo-work-aside { display: block; position: sticky; top: 80px; padding-top: 16px; } body.admin-bar .mo-work-aside { top: 112px; } /* 上の部分は1列に（画像 → 題名 → 情報）。購入の箱は右の列にあるので、ここでは出さない */ :root .mo-work-top, :root .mo-work-top.has-poster { display: flex; flex-direction: column; align-items: stretch; gap: 16px; } :root .mo-work-main .mo-work-col-main .mo-work-buy { display: none; } :root .mo-work-top .mo-detail-poster.is-jacket { max-width: none; aspect-ratio: auto; background: var(--mo-panel-2); } :root .mo-work-top .mo-detail-poster.is-jacket img { height: auto; } :root .mo-work-main .mo-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 右の列の箱：縦に積む（価格 → 販売元ごとの行 → ボタン） */ .mo-work-aside-inner .mo-work-buy { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; background: #ffffff; border: 2px solid var(--mo-navy); border-radius: 8px; text-align: left; } .mo-work-aside-inner .mo-work-buy-price strong { display: block; color: var(--mo-text); font-size: 26px; } .mo-work-aside-inner .mo-work-buy-price span { display: block; color: var(--mo-muted); font-size: 12px; } .mo-work-aside-inner .mo-work-buy-actions { display: flex; flex-direction: column; gap: 8px; } :root .mo-work-aside-inner .mo-work-buy-actions .mo-button, :root .mo-work-aside-inner .mo-work-compare .mo-button { width: 100%; min-width: 0; } .mo-work-aside-inner .mo-work-compare { margin: 0; padding: 0; list-style: none; } .mo-work-aside-inner .mo-work-compare-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--mo-line); } .mo-work-aside-inner .mo-work-compare-row .mo-button { grid-column: 1 / -1; } :root[data-mo-theme="light"] .mo-work-aside-link { display: block; margin-top: 10px; color: var(--mo-link); font-size: 13px; text-align: center; } /* 情報の表（以前は暗い地の右の列）を白に合わせる */ :root[data-mo-theme="light"] .mo-work-head h1 { color: var(--mo-text); font: 700 clamp(20px, 2.2vw, 24px)/1.55 var(--mo-font-head); } /* ============================================================ 手順6：フェチ一覧（文字のチップ・複数選択）(v0.94.0) 軸の見出し → 小見出しごとの箱（3列）→ チップ（作品数つき）。下の帯で「すべて含む／どれかを含む」。 ============================================================ */ .mo-db-main.mo-fetish-index { padding-top: 0; } .mo-fetish-head { margin-bottom: 4px; } .mo-fetish-axis { margin-top: 28px; } :root .mo-fetish-axis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0; } :root .mo-ontology-sections section.mo-fetish-box { display: block; padding: 12px 14px; background: #ffffff; border: 1px solid var(--mo-line); border-radius: 8px; } :root[data-mo-theme="light"] .mo-ontology-sections .mo-fetish-box h3 { margin: 0 0 8px; padding-bottom: 6px; color: var(--mo-text); border-bottom: 1px solid var(--mo-line); font: 700 14px/1.4 var(--mo-font-head); } .mo-fetish-box .mo-fetish-picks { display: flex; flex-wrap: wrap; gap: 6px; } :root[data-mo-theme="light"] .mo-ontology-sections .mo-fetish-pick { min-height: 0; padding: 4px 4px 4px 12px; color: var(--mo-text); background: var(--mo-panel-2); border: 1px solid var(--mo-line); border-radius: 999px; font-size: 13px; cursor: pointer; } :root[data-mo-theme="light"] .mo-ontology-sections .mo-fetish-pick:hover { color: var(--mo-navy); background: var(--mo-navy-soft); border-color: var(--mo-navy-2); } .mo-fetish-pick span small { margin-left: 5px; color: var(--mo-muted); font-size: 11px; } .mo-fetish-pick.is-selected span small { color: #cfd9e6; } :root[data-mo-theme="light"] .mo-ontology-sections a.mo-fetish-solo { width: 1.6em; height: 1.6em; color: var(--mo-muted); background: transparent; } :root[data-mo-theme="light"] .mo-ontology-sections .mo-fetish-pick.is-selected a.mo-fetish-solo { color: #ffffff; background: rgba(255, 255, 255, .18); } :root[data-mo-theme="light"] .mo-ontology-sections a.mo-fetish-solo:hover { color: #ffffff; background: var(--mo-navy-2); } /* 押すボタン（