/* Theme Name: SakeJP Theme URI: https://sakejp.com/ Description: Neve の子テーマ。SakeJP 独自のデザインはすべてここに書き、親テーマ(Neve)は更新可能なまま保つ。ローカルの src/wp-content/themes/sakejp-child/ が正で、本番とGitHubへ同期する（CLAUDE.md §12.7）。親テーマにNeveを選んだ理由は docs/2026-09-02_テーマ選定結果.md を参照（本番PHP 7.2で構文が通る唯一のサードパーティ製テーマ）。 Author: STEP ASIA Template: neve Version: 0.5.0 Requires PHP: 7.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: sakejp */ /* ！重要！ style.css を編集したら、必ず上の Version を上げること。 nginx が .css に expires 30d を付けているため、Version を上げないと 読み込みURLの ?ver= が変わらず、閲覧者には古いCSSが配信され続ける。 （0.1.0 → 0.2.0 の際に実際にこの問題が起きた） */ /* ========================================================================== 1. デザイントークン 訪日外国人向けメディアとしての前提: - 対応12言語: 日 / 英 / 韓 / 中(簡) / 中(繁) / タイ / ベトナム / インドネシア / 仏 / 独 / 伊 / 西。決定の経緯は docs/2026-09-02_多言語対応方針.md - Webフォント（Google Fonts等）は読み込まない。訪問者のIPがフォント配信元へ 送信され、EU圏からのアクセスがある本サイトではGDPR上の論点になるため （CLAUDE.md §12.6 のとおりプライバシーポリシーが未整備）。 まずは全言語をカバーできるシステムフォントで組む。 ========================================================================== */ :root { /* 和名は色の由来。実際の用途はコメント側を見ること */ --sake-ink: #1b1a17; /* 墨 — 本文 */ --sake-ink-soft: #57534b; /* 薄墨 — 補足・メタ情報 */ --sake-paper: #ffffff; /* 白 — 背景のベース */ --sake-paper-alt: #f7f5f0; /* 生成り — 囲み・セクション区切り。白との差が 分かる最小限の濃さに留める */ --sake-indigo: #21374f; /* 藍 — 主色。リンク・見出し */ --sake-indigo-deep:#16283a; /* 藍(濃) — hover */ --sake-gold: #a9814b; /* 麹 — 差し色。多用しない */ --sake-line: #e0d9cb; /* 罫線 */ /* 対応12言語を、Webフォントを読み込まずにカバーする（GDPR配慮。§10の決定）。 ラテン系（英/仏/独/伊/西/越/尼）は先頭のシステムUIフォントで足りる。 ベトナム語の声調記号も Segoe UI / Noto Sans が持っている。 CJK・タイは字形が言語ごとに違うため、下の :lang() で個別に上書きする。 */ --sake-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif; /* 言語ごとの字形。共通の漢字でも日中韓で正しい字体が異なるため分ける */ --sake-font-ja: "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP"; --sake-font-ko: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR"; --sake-font-zh-hans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC"; --sake-font-zh-hant: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC"; --sake-font-th: "Leelawadee UI", "Thonburi", "Noto Sans Thai"; /* 見出し用。読み物としての質感を出す */ --sake-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif", serif; /* 本文の最適な行長。日本語と英語のどちらでも読みやすい範囲に収める */ --sake-measure: 42rem; } /* ========================================================================== 2. 基本の版面 ========================================================================== */ /* 言語ごとの字形を当てる。WordPress が 等を出力するので、 その属性で切り替える。|= は「ko」「ko-KR」の両方に当たる。 漢字は日中韓で正しい字体が異なるため、まとめて1つのフォントで済ませない。 */ html[lang|="ja"] body { font-family: var(--sake-font-ja), var(--sake-font-sans); } html[lang|="ko"] body { font-family: var(--sake-font-ko), var(--sake-font-sans); } html[lang|="th"] body { font-family: var(--sake-font-th), var(--sake-font-sans); } /* 中国語は簡体字と繁体字で字体が違う。lang は zh-Hans / zh-Hant を想定し、 地域コード（zh-CN / zh-TW / zh-HK）でも当たるようにする。 */ html[lang^="zh-Hans"] body, html[lang="zh-CN"] body, html[lang="zh-SG"] body { font-family: var(--sake-font-zh-hans), var(--sake-font-sans); } html[lang^="zh-Hant"] body, html[lang="zh-TW"] body, html[lang="zh-HK"] body { font-family: var(--sake-font-zh-hant), var(--sake-font-sans); } body { background-color: var(--sake-paper); color: var(--sake-ink); font-family: var(--sake-font-ja), var(--sake-font-sans); line-height: 1.85; /* 日本語混在を前提に広めに取る */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 見出しの明朝体は日本語と欧文では成立するが、韓国語・中国語・タイ語では 明朝相当のシステムフォントが入っているとは限らない。 これらの言語では見出しもゴシック系にして、字形が崩れるのを避ける。 */ html[lang|="ko"] h1, html[lang|="ko"] h2, html[lang|="ko"] h3, html[lang|="ko"] h4, html[lang|="ko"] h5, html[lang|="ko"] h6, html[lang|="ko"] .entry-title { font-family: var(--sake-font-ko), var(--sake-font-sans); } html[lang|="th"] h1, html[lang|="th"] h2, html[lang|="th"] h3, html[lang|="th"] h4, html[lang|="th"] h5, html[lang|="th"] h6, html[lang|="th"] .entry-title { font-family: var(--sake-font-th), var(--sake-font-sans); } html[lang|="zh"] h1, html[lang|="zh"] h2, html[lang|="zh"] h3, html[lang|="zh"] h4, html[lang|="zh"] h5, html[lang|="zh"] h6, html[lang|="zh"] .entry-title { font-family: inherit; } h1, h2, h3, h4, h5, h6, .entry-title { font-family: var(--sake-font-serif); color: var(--sake-indigo); line-height: 1.4; letter-spacing: 0.01em; font-weight: 600; } a { color: var(--sake-indigo); text-underline-offset: 0.2em; text-decoration-thickness: 1px; } a:hover, a:focus-visible { color: var(--sake-indigo-deep); } /* キーボード操作の可視性。訪問者の言語がどれであれ必要 */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sake-gold); outline-offset: 2px; } /* ========================================================================== 3. 記事本文 1記事あたりの情報量が多くなるため、行長と余白で読ませる。 ========================================================================== */ .entry-content > * { max-width: var(--sake-measure); margin-left: auto; margin-right: auto; } /* 写真は行長の制約から外し、幅いっぱいに見せる（蔵と土地が主役） */ .entry-content > figure, .entry-content > .wp-block-image, .entry-content > .wp-block-gallery, .entry-content > .wp-block-embed { max-width: min(64rem, 100%); } .entry-content h2 { margin-top: 2.75em; margin-bottom: 0.75em; padding-bottom: 0.4em; border-bottom: 1px solid var(--sake-line); font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); } .entry-content h3 { margin-top: 2em; margin-bottom: 0.6em; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); } .entry-content p { margin-bottom: 1.5em; } .entry-content img { border-radius: 2px; } /* 引用は「蔵の人の言葉」に使う。出所明示とセットで運用すること （CLAUDE.md §12.2 の白糸酒造の件） */ .entry-content blockquote { margin: 2.5em auto; padding: 0.25em 0 0.25em 1.5em; border-left: 3px solid var(--sake-gold); color: var(--sake-ink-soft); font-style: normal; } .entry-content blockquote cite { display: block; margin-top: 0.75em; font-size: 0.85em; font-style: normal; color: var(--sake-ink-soft); } /* 蔵の基本情報（住所・見学可否・営業時間）を表で出す場面が多い */ .entry-content table { width: 100%; border-collapse: collapse; font-size: 0.95em; } .entry-content th, .entry-content td { padding: 0.65em 0.8em; border-bottom: 1px solid var(--sake-line); text-align: left; vertical-align: top; } .entry-content th { width: 32%; color: var(--sake-ink-soft); font-weight: 600; white-space: nowrap; } /* 横に長い表はページ全体を横スクロールさせず、表の中だけで送る */ .entry-content .wp-block-table { overflow-x: auto; } /* ========================================================================== 4. ユーティリティ 記事内で繰り返し使う部品。ブロックエディタの「追加CSSクラス」で当てる。 ========================================================================== */ /* 未確認情報の注記。★38箇所（CLAUDE.md §12.2）を潰すまでの可視化に使う */ .sakejp-unverified { background-color: #fff6e5; border-left: 3px solid var(--sake-gold); padding: 0.75em 1em; font-size: 0.9em; color: var(--sake-ink-soft); } /* 20歳未満の飲酒禁止表示など、法定の注意書き（§8） */ .sakejp-notice { background-color: var(--sake-paper-alt); border: 1px solid var(--sake-line); border-radius: 3px; padding: 1em 1.25em; font-size: 0.9em; } /* 銘柄名のローマ字＋漢字併記（§5.3）。現地で商品を指させることが目的 */ .sakejp-brand-jp { color: var(--sake-ink-soft); font-size: 0.85em; margin-left: 0.35em; } /* ========================================================================== 5. トップページ（固定フロントページ） /blog を外して WordPress をルートに置いたため、トップページは 静的HTMLではなく WordPress の固定ページになった。 その固定ページ本文で使うクラス。 ========================================================================== */ /* 本文の他の要素と左端を揃える。 親テーマの版面の中に置かれるため、全幅の帯にはせず、囲みとして見せる。 */ .sakejp-hero { max-width: var(--sake-measure); margin: 0 auto 3rem; padding: 2rem 2.25rem; background-color: var(--sake-paper-alt); border-left: 3px solid var(--sake-gold); } .sakejp-hero h1, .sakejp-hero h2 { font-family: var(--sake-font-serif); color: var(--sake-indigo); font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); line-height: 1.35; margin: 0 0 1rem; } .sakejp-hero p { max-width: 42rem; margin: 0; color: var(--sake-ink-soft); } /* 記事一覧（トップページに手で並べるリスト） 親テーマ(Neve)が .nv-content-wrap ul に余白を当てており、 クラス1つでは負けるため詳細度を上げている。 */ .entry-content ul.sakejp-article-list, ul.sakejp-article-list { list-style: none; max-width: var(--sake-measure); margin: 0 auto; padding: 0; } .sakejp-article-list li { padding: 1.15rem 0; border-bottom: 1px solid var(--sake-line); } .sakejp-article-list li:first-child { border-top: 1px solid var(--sake-line); } .sakejp-article-list a { font-family: var(--sake-font-serif); font-size: 1.08rem; line-height: 1.5; text-decoration: none; display: inline-block; } .sakejp-article-list a:hover { text-decoration: underline; } .sakejp-article-meta { display: block; margin-top: 0.35rem; color: var(--sake-ink-soft); font-size: 0.83rem; } /* ========================================================================== 6. パンくずリスト 構成: Home > 県名 > 酒蔵 > 銘柄（銘柄がある場合） 設計の詳細と実装方針は docs/2026-09-02_パンくずリスト設計案.md ========================================================================== */ .sakejp-breadcrumb { margin: 0 0 1.75rem; font-size: 0.82rem; line-height: 1.6; color: var(--sake-ink-soft); } .sakejp-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15em 0.5em; } .sakejp-breadcrumb li { display: flex; align-items: center; } /* 区切り記号。装飾なので読み上げには乗せない */ .sakejp-breadcrumb li + li::before { content: "›"; margin-right: 0.5em; color: var(--sake-line); } .sakejp-breadcrumb a { color: var(--sake-ink-soft); text-decoration: none; } .sakejp-breadcrumb a:hover { color: var(--sake-indigo); text-decoration: underline; } /* 現在地。リンクにしない */ .sakejp-breadcrumb [aria-current="page"] { color: var(--sake-ink); } /* ========================================================================== 7. フッターの法定表示 functions.php の sakejp_footer_legal_notice() が出力する。 目立ちすぎず、しかし確実に読める濃度にする（飾りではなく法定表示のため）。 ========================================================================== */ .sakejp-footer-legal { background-color: var(--sake-indigo-deep); color: #cfd6de; padding: 1.25em 1.5em; text-align: center; font-size: 0.8rem; line-height: 1.7; } .sakejp-footer-legal p { margin: 0; max-width: 48rem; margin-left: auto; margin-right: auto; } .sakejp-footer-legal p + p { margin-top: 0.35em; color: #a9b4c0; } @media (max-width: 600px) { .entry-content th { width: auto; white-space: normal; } }