/* paid-articles.css — 有料記事エリア(/premium/)専用スタイル。 hp_pa_enqueue_assets() が該当ページでのみ読み込み、header-premium.php / footer-premium.php（サブスク本体から分離した専用チャンク）と対で使う。デザイン方針（採用案）: 1a ダーク基調 / 情報密度型（既定）と 1b 白基調 / 明朝見出しの2テーマ。アクセントはティール/エメラルド一点。枠箱を多用せずヘアライン＋余白のフラット。価格・数値・日時は等幅(--font-mono)で解析・データ感。モバイル最優先・日本語UI。色は下の「デザイントークン」だけで切り替える。各コンポーネントは必ず変数を参照し、色をハードコードしない（変数が未定義の環境向けにフォールバック値も併記）。 */ /* ═════════ デザイントークン（1a ダーク＝既定 / 1b ライト） ═════════ 切替は（header-premium.php 先頭のインラインスクリプトが localStorage['site-theme'] を読んで確定する）。ここでは「変数の値」だけを差し替える。 ★既存変数名（--gold / --line-gold / --line-gold-hi / --text-main / --text-light / --bg-card-hi / --header-bg / --bg-body / --font-mono）は大量の既存セレクタが参照しているため、削除も改名もせず「値だけ」を新パレットへ差し替える。このファイルは style.css より後に読み込まれる（enqueue の依存＝takadora-style）ので、同じ詳細度の :root でも後勝ちで上書きできる。読み込むのは /premium 配下と /contributor・/contributor-invite だけなので、サイト本体の配色には影響しない。 ★アクセントは「塗り用(--pa-accent)」と「文字用(--gold)」を分ける。白地にティール文字を置くと 3.4:1 まで落ちるため、文字用だけ暗いティールにする。ティール地には白ではなく濃色文字(--pa-accent-ink)を乗せる。 */ :root { /* 面・線・文字（1a ダーク基調 / 情報密度型） */ --pa-bg: #0b1113; /* 背景（ほぼ黒） */ --pa-surface: #101a1d; /* 面（トップバー・入力・カード面） */ --pa-inset: #0a1012; /* 沈める面（コード・トークン等の読み取り専用欄） */ --pa-hairline: #1e2a2e; --pa-hairline-hi: #2e3e42; --pa-text: #e7eef0; --pa-muted: #8a9ba0; /* アクセント（ティール / エメラルド） */ --pa-accent: #21c1a6; /* 塗り・線・ドット */ --pa-accent-hi: #3ad4b9; /* 塗りのホバー */ --pa-accent-text: #21c1a6; /* 文字（背景に対して 4.5:1 以上） */ --pa-accent-text-hi: #3ad4b9; /* 文字のホバー */ --pa-accent-ink: #04120d; /* ★ティール地に乗せる濃色文字（白文字は使わない） */ --pa-accent-soft: rgba(33, 193, 166, 0.12); --pa-accent-line: rgba(33, 193, 166, 0.45); /* 状態色 */ --pa-warn: #e0b341; /* 審査待ち */ --pa-danger: #f87171; /* エラー・却下・削除 */ --pa-star-off: rgba(255, 255, 255, 0.22); /* 未選択の★ */ /* 形（ボタン/入力=10px・ピル=999px・画像=10px） */ --pa-radius: 10px; --pa-radius-pill: 999px; /* 書体。見出しはダーク＝ゴシック、ライト＝明朝（本文とUIラベルは常にゴシック） */ --pa-font-head: var(--font-base, "Zen Kaku Gothic New", "Noto Sans JP", sans-serif); /* ── 既存変数名の値の差し替え（名前は温存） ── */ --bg-body: var(--pa-bg); --header-bg: var(--pa-surface); --bg-card-hi: var(--pa-surface); --text-main: var(--pa-text); --text-light: var(--pa-muted); --line-gold: var(--pa-hairline); --line-gold-hi: var(--pa-hairline-hi); --gold: var(--pa-accent-text); --gold-soft: var(--pa-accent-hi); --font-mono: "JetBrains Mono", monospace; /* 本文中の見出し(h2/h3/h4)などテーマ共通CSSが参照する色も、この配下ではティール系に寄せて金/マゼンタ/シアンの残り火を出さない。 */ --primary-color: var(--pa-accent); --primary-gradient: linear-gradient(135deg, #10b981, #0f9d76); --accent-color: var(--pa-accent); --accent-hover: var(--pa-accent-hi); --magenta: var(--pa-accent); /* ★本文リンク色として site-layout.css の .entry-content a が参照する。半透明の罫線色を入れるとリンクとボタン文字が読めなくなるため、必ず「文字用」を割り当てる。 */ --cyan: var(--pa-accent-text); } /* 1b 白基調 / 明朝見出し・読みやすさ優先。値だけを差し替える（構造は共通）。 */ :root[data-theme="light"] { --pa-bg: #ffffff; --pa-surface: #f0f3f2; --pa-inset: #f0f3f2; --pa-hairline: #e7ebea; --pa-hairline-hi: #c9d0ce; --pa-text: #14201f; --pa-muted: #6b7a78; /* 白地でのコントラスト確保のため、塗りは少し暗いティール、文字はさらに暗く */ --pa-accent: #0e8c7a; --pa-accent-hi: #0b7466; --pa-accent-text: #0b7466; /* 白地 5.3:1 / 面(#f7f8f8) 5.0:1 */ --pa-accent-text-hi: #095c52; --pa-accent-ink: #04120d; /* #0f9d76 地で 5.6:1 */ --pa-accent-soft: rgba(14, 140, 122, 0.12); --pa-accent-line: rgba(14, 140, 122, 0.45); --pa-warn: #8a6a12; --pa-danger: #c02626; --pa-star-off: rgba(0, 0, 0, 0.22); /* ★見出しだけ明朝。本文・UIラベルはゴシックのまま。 */ --pa-font-head: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; /* トップバー等は白（面と分けて、ヘアラインだけで境界を作る） */ --header-bg: var(--pa-bg); /* ★ライトでは style.css の :root[data-theme="light"]（同じ詳細度）が既存名を金系で定義しているため、ここで必ず再定義して上書きする（このファイルは後に読み込まれるので後勝ちになる）。これが無いと /premium のヘアラインが金のまま残る。 */ --bg-body: var(--pa-bg); --bg-card-hi: var(--pa-surface); --text-main: var(--pa-text); --text-light: var(--pa-muted); --line-gold: var(--pa-hairline); --line-gold-hi: var(--pa-hairline-hi); --gold: var(--pa-accent-text); --gold-soft: var(--pa-accent-hi); /* 本文リンク（.entry-content a）が読める色。半透明の罫線色を入れない。 */ --cyan: var(--pa-accent-text); --primary-color: var(--pa-accent); --accent-color: var(--pa-accent); --accent-hover: var(--pa-accent-hi); } /* 見出しの書体（ライトのみ明朝になる。ダークでは --font-base＝ゴシック）。マークアップは変えず、既存の見出しクラスに書体だけを足す。 */ .pa-lead h1, .pa-lead--hero h1, .pa-article__title, .pa-item__title, .pa-gate__title, .pa-me-title, .pa-reviews__title, .pa-review-form__title, .pa-profile__name, .pa-receipt__title, .pa-contrib-subhead, .pa-payout-hist-head, .pa-terms__head, .pa-content h2, .pa-content h3 { font-family: var(--pa-font-head); } /* 記事本文の見出しはテーマ共通CSS(headings-typography.css)の金グラデ／マゼンタ罫がそのまま乗ってしまうので、この配下だけアクセント（ティール）に寄せる。 ※ .pa-item__title 等の「見出しを素のテキストに戻す」既存指定より詳細度を上げないよう、 .pa-content 配下（＝寄稿者が書いた本文）だけに限定する。 */ .pa-content h2 { background: linear-gradient(90deg, var(--pa-accent-soft, rgba(16, 185, 129, 0.12)) 0%, transparent 70%); border-left-color: var(--pa-accent, #10b981); } /* ★ライトでは headings-typography.css の `:root[data-theme="light"] h2`（詳細度 0,2,0・金グラデをハードコード）が、`.pa-item__title` 等の「見出しを素のテキストに戻す」指定（0,1,0）に勝ってしまい、一覧やマイページの見出しに金の帯が出る。まず /premium 配下の見出しを一旦まっさらにし、本文(.pa-content)だけ下で再指定する。 */ :root[data-theme="light"] .pa-wrap h2, :root[data-theme="light"] .pa-drawer h2, :root[data-theme="light"] .pa-receipt h2, :root[data-theme="light"] .pa-wrap h3 { background: none; border-left: none; padding: 0; } :root[data-theme="light"] .pa-content h2 { background: linear-gradient(90deg, var(--pa-accent-soft, rgba(14, 140, 122, 0.12)) 0%, transparent 70%); /* 上のリセットで border/padding を落としているので、本文見出しだけ明示的に戻す */ border-left: 5px solid var(--pa-accent, #0e8c7a); padding: 0.65rem 1.2rem; } .pa-content h3::before { background: var(--pa-accent, #10b981); } .pa-content h3 span { background: linear-gradient(transparent 65%, var(--pa-accent-soft, rgba(16, 185, 129, 0.12)) 65%); } /* ───────── 専用トップバー（☰ メニュー / サブスク｜有料記事 / 空スペーサー） ───────── */ .pa-topbar { position: sticky; top: 0; z-index: 50; background: var(--header-bg, #121614); border-bottom: 1px solid var(--line-gold, rgba(255, 255, 255, 0.08)); } .pa-topbar__inner { max-width: 680px; margin: 0 auto; min-height: 52px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 0 8px; } .pa-topbar__side { display: block; } /* ※ .pa-topbar__search-btn は検索の常時表示化で廃止（テンプレートから出力しない）。 */ .pa-topbar__mine, .pa-topbar__menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--text-main, #e8ebe9); background: transparent; border: none; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; } .pa-topbar__mine, .pa-topbar__menu-btn { justify-self: start; } .pa-topbar__mine:hover, .pa-topbar__menu-btn:hover { color: var(--gold, #10b981); background: var(--bg-card-hi, #121614); } .pa-topbar__mine:focus-visible, .pa-topbar__menu-btn:focus-visible { outline: 2px solid var(--pa-accent, #10b981); outline-offset: 2px; } /* サイト名（トップバー中央）。行き先は有料記事トップ。 */ .pa-topbar__brand { justify-self: center; min-width: 0; padding: 0 8px; font-family: var(--pa-font-head); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; color: var(--text-main, #e8ebe9); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pa-topbar__brand:hover { color: var(--gold, #10b981); } /* ［有料記事｜サブスク］の大きめセグメント（検索バーの下・採用デザイン準拠）。従来トップバーにあった小さい .pa-switch の置き換え。リンク先は同一。 */ .pa-segment { display: flex; /* .pa-search の左右余白（12px）と揃える（外側にラッパを作らず margin で寄せる） */ width: calc(100% - 24px); max-width: 680px; margin: 0 auto 10px; padding: 3px; border-radius: var(--pa-radius, 10px); border: 1px solid var(--line-gold, rgba(255, 255, 255, 0.08)); background: var(--bg-card-hi, #121614); } .pa-segment__item { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 7px; font-size: 0.9rem; font-weight: 700; line-height: 1.2; text-decoration: none; color: var(--text-light, #9aa4a0); white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color 0.14s ease, background-color 0.14s ease; } .pa-segment__item:hover { color: var(--text-main, #e8ebe9); } .pa-segment__item.is-on, .pa-segment__item.is-on:hover { background: var(--pa-accent, #10b981); color: var(--pa-accent-ink, #04120d); font-weight: 800; } .pa-segment__item:focus-visible { outline: 2px solid var(--pa-accent, #10b981); outline-offset: 2px; } /* サブスク／有料記事の切替トグル（本体ヘッダーのトグルと同トーン・現在地=有料記事をアクセントで明示） ※トップバーからは撤去したが、他所から使われても壊れないよう定義は残す。 */ .pa-switch { justify-self: center; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-gold, rgba(255, 255, 255, 0.08)); background: var(--bg-card-hi, #121614); } .pa-switch__seg { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; color: var(--text-main, #e8ebe9); } .pa-switch__seg:hover { color: var(--gold, #10b981); } .pa-switch__seg.is-on, .pa-switch__seg.is-on:hover { background: var(--pa-accent, #10b981); color: var(--pa-accent-ink, #04120d); } /* 検索フォーム（★常時表示 / note のモバイルUI準拠の角丸ピル）。開閉ボタン(.pa-topbar__search-btn)と .is-search-open は廃止したので、クラスが無くてもそのまま見えている状態が既定。虫眼鏡はピルの中に重ねる。 */ .pa-search { max-width: 680px; margin: 0 auto; padding: 2px 12px 10px; } .pa-search__field { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 4px 0 14px; border-radius: 999px; border: 1px solid var(--line-gold, rgba(255, 255, 255, 0.08)); background: var(--bg-card-hi, #121614); } .pa-search__field:focus-within { border-color: var(--pa-accent, #10b981); } .pa-search__icon { flex: 0 0 auto; color: var(--text-light, #9aa4a0); } .pa-search__field:focus-within .pa-search__icon { color: var(--gold, #10b981); } .pa-search__input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; margin: 0; border: none; border-radius: 0; background: transparent; color: var(--text-main, #e8ebe9); font-family: inherit; font-size: 16px; /* iOS のズーム回避 */ line-height: 1.4; -webkit-appearance: none; appearance: none; } .pa-search__input::placeholder { color: var(--text-light, #9aa4a0); opacity: 1; } .pa-search__input:focus { outline: none; } /* Safari の検索クリア／装飾ボタンはピルの見た目を崩すので消す */ .pa-search__input::-webkit-search-cancel-button, .pa-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } /* 送信は Enter でも効く。タップ領域は44px確保 */ .pa-search__submit { flex: 0 0 auto; height: 44px; padding: 0 14px; border: none; border-radius: 999px; cursor: pointer; /* ★塗り＋濃色文字にする。透明背景＋アクセント文字だと白地でコントラストが落ちるため、ティール地に濃色文字(--pa-accent-ink)を乗せる。 */ background: var(--pa-accent, #10b981); color: var(--pa-accent-ink, #04120d); font-family: inherit; font-weight: 700; font-size: 0.84rem; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .pa-search__submit:hover { filter: brightness(1.08); } .pa-search__submit:focus-visible { outline: 2px solid var(--pa-accent, #10b981); outline-offset: 2px; } /* ───────── ハンバーガーメニュー（ドロワー） ───────── トップバー左の ☰ から開く導線の集約先（記事を探す／あなたのページ／サブスクへ戻る／法務）。 ★JS無効時は hidden 属性が残ったまま＝display:none。画面にもタブ順にも出ない。開閉は JS が hidden を外したあと .is-open の付け外しだけで行う（出入りともアニメする）。 */ .pa-drawer[hidden], .pa-drawer__backdrop[hidden] { display: none !important; } /* 背景（タップで閉じる） */ .pa-drawer__backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .pa-drawer__backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.2s ease; } /* 本体（左からスライド） */ .pa-drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 61; /* ★WP管理バーがあるときはその下から始める（無いと「閉じる」ボタンがバーに隠れる）。モバイル(<=782px)はバー46px・デスクトップは32px。CSS変数で下の @media から上書きする。 */ width: 84vw; max-width: 320px; display: flex; flex-direction: column; background: var(--header-bg, #121614); border-right: 1px solid var(--line-gold, rgba(255, 255, 255, 0.08)); box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45); overflow-y: auto; overscroll-behavior: contain; } /* WP管理バー分だけ下げる（管理者・編集者でドロワーの閉じるボタンが隠れないように） */ body.admin-bar .pa-drawer, body.admin-bar .pa-drawer__backdrop { top: 46px; } @media screen and (min-width: 783px) { body.admin-bar .pa-drawer, body.admin-bar .pa-drawer__backdrop { top: 32px; } } .pa-drawer { /* （上の宣言の続き） */ -webkit-overflow-scrolling: touch; transform: translateX(-100%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; } .pa-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 0.22s ease; } /* ドロワーを開いている間は背面をスクロールさせない */ body.pa-drawer-open { overflow: hidden; } .pa-drawer__inner { display: flex; flex-direction: column; flex: 1 0 auto; padding: 0 0 24px; } /* 見出し行（メニュー／閉じる×）。トップバーと同じ高さで揃える */ .pa-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 6px 0 18px; border-bottom: 1px solid var(--line-gold, rgba(255, 255, 255, 0.08)); } .pa-drawer__brand { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; color: var(--gold, #10b981); } .pa-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 999px; background: transparent; color: var(--text-main, #e8ebe9); cursor: pointer; -webkit-tap-highlight-color: transparent; } .pa-drawer__close:hover { color: var(--gold, #10b981); background: var(--bg-card-hi, #121614); } /* グループ見出し（記事を探す／あなたのページ） */ .pa-drawer__label { margin: 22px 0 2px; padding: 0 18px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; color: var(--text-light, #9aa4a0); } /* 行（44px以上のタップ領域・ホバー/フォーカスでアクセントの左罫） */ .pa-drawer__list { list-style: none; margin: 0; padding: 0; } .pa-drawer__link { position: relative; display: flex; align-items: center; min-height: 46px; padding: 6px 18px; font-size: 0.94rem; font-weight: 700; line-height: 1.5; color: var(--text-main, #e8ebe9); text-decoration: none; } .pa-drawer__link::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 0 2px 2px 0; background: var(--pa-accent, #10b981); opacity: 0; transition: opacity 0.14s ease; } .pa-drawer__link:hover, .pa-drawer__link:focus-visible { color: var(--gold, #10b981); background: var(--bg-card-hi, #121614); outline: none; } .pa-drawer__link:hover::before, .pa-drawer__link:focus-visible::before { opacity: 1; } /* 末尾（サブスクへ戻る＋法務リンクは控えめに） */ .pa-drawer__foot { margin-top: auto; padding: 26px 18px 0; } .pa-drawer__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 0.86rem; font-weight: 700; color: var(--text-light, #9aa4a0); text-decoration: none; } .pa-drawer__back:hover { color: var(--gold, #10b981); } .pa-drawer__legal { display: flex; flex-wrap: wrap; gap: 0.35em 0.7em; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-gold, rgba(255, 255, 255, 0.08)); font-size: 0.72rem; line-height: 1.7; } .pa-drawer__legal a { color: var(--text-light, #9aa4a0); text-decoration: none; white-space: nowrap; } .pa-drawer__legal a:hover { color: var(--text-main, #e8ebe9); } /* ───────── 本文ラッパ ───────── */ .pa-main { display: block; } .pa-wrap { max-width: 680px; margin: 0 auto; padding: 0 18px 56px; } /* 絞り込み/検索の見出し（箱なし・中央寄せ） */ .pa-lead { text-align: center; padding: 26px 0 2px; } :root .pa-lead h1, :root[data-theme="light"] .pa-lead h1 { font-size: 1.32rem; font-weight: 800; line-height: 1.4; margin: 0 0 8px; background: none; border: none; padding: 0; color: var(--text-main, #e8ebe9); } .pa-lead p { font-size: 0.86rem; color: var(--text-light, #9aa4a0); line-height: 1.8; margin: 0 auto; max-width: 32em; } /* /premium トップ（絞り込み無し）だけに出す簡潔なヒーロー。 .pa-lead を流用し、見出しの上に小さなラベルとアクセントのヘアラインを足すだけに留める。 */ .pa-lead--hero { padding: 30px 0 4px; } .pa-lead__eyebrow { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.2em; color: var(--gold, #10b981); margin: 0 0 10px; } :root .pa-lead--hero h1, :root[data-theme="light"] .pa-lead--hero h1 { font-size: 1.46rem; letter-spacing: 0.02em; margin: 0 0 10px; } /* 見出し下の短いアクセント罫（箱を作らずに“エリアの顔”を出す） */ .pa-lead--hero h1::after { content: ""; display: block; width: 34px; height: 2px; margin: 11px auto 0; border-radius: 2px; background: var(--pa-accent, #10b981); } /* ───────── 並び替えタブ（新着 / 人気 / 機種別） ───────── ★採用デザイン準拠で「丸ピル」から「下線タブ」に変更した。選択中＝本文色＋2pxのアクセント下線、非選択＝薄い文字。行全体の下にヘアライン。マークアップ（