/* Theme Name: FURUSATO SELECT Theme URI: https://furusatoselect.com/ Author: MEGURIWA / コーディ (Claude Code) Description: ふるさとセレクト専用クラシックテーマ。design/site rev2 を1px再現（白基調・Cormorant Garamond・市松shelf）。CSSはデザイン正本をそのまま統合（上書き禁止）。公開前は全ページ noindex（mu-pluginで強制）。 Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: furusatoselect */ /* ===== 以下 design/site/assets/style.css(rev2) をそのまま統合（変更禁止） ===== */ /* ============================================================ FURUSATO SELECT — 共通CSS（1本） 010 ふるさとセレクト / design/site/assets/style.css author: おばだい date: 2026-06-13 rev1（確定版） ------------------------------------------------------------ 設計思想: - 媒体は「差し色」を持たない。基調=白(ニュートラル)+墨。色は品の素材からのみ。 （rev1: 生成り/クリームを廃止。AI定番色を避け"人の手・おしゃれ系"を担保） - 英語見出し × 和文明朝 の混植。見出し欧文＝案A 端正セリフ Cormorant Garamond で確定。 → 固定。mode-sans のCSS定義は残置（既定は serif）。 - 写真は「白背景ヒーロー枠＋トンボ＋素材色チップ」のプレースホルダ。 - 全カードに「買えるボタン(↗)」が必ず1つ＝全品飛べる原則。 ============================================================ */ :root{ /* 紙と墨（媒体はこの2系統だけ。色は品から）— rev1: 生成り廃止・ニュートラル白へ */ --paper: #ffffff; /* 地・白 */ --paper-2: #f3f3f2; /* 物語/連載カードの淡いニュートラル面（白地と差） */ --well: #fafafa; /* 商品ヒーローのオフ白の器 */ --well-line:#ececec; --ink: #1a1a1a; /* 墨黒 */ --ink-soft: #565654; /* 副文・本文の灰（ニュートラル） */ --ink-faint:#9a9a96; /* キャプション・トンボ */ --line: #e6e6e4; /* 罫（ヘアライン） */ /* 版面 */ --maxw: 1180px; --gutter: clamp(20px, 5vw, 64px); --cell-gap: clamp(14px, 2.4vw, 30px); /* 書体ロール --display = 欧文見出し（2案で差し替わる）／既定= 案A 端正セリフ */ --display: "Cormorant Garamond", "Times New Roman", serif; --display-weight: 500; --display-tracking: 0.012em; --jp-display: "Shippori Mincho", serif; /* 和文見出し・リード（道具痕） */ --jp-body: "Noto Serif JP", serif; /* 和文本文 */ --util: "Jost", system-ui, -apple-system, sans-serif; /* ラベル/価格/ボタン */ } /* === 案B：上質サンセリフ系（Jost）— rev1で不採用。定義は残置・既定は案A serif === */ html.mode-sans{ --display: "Jost", system-ui, -apple-system, sans-serif; --display-weight: 400; --display-tracking: 0.02em; } *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--jp-body); font-weight:400; line-height:1.9; letter-spacing:.01em; font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:inherit; } .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } /* ---- 見出し体系 ---------------------------------------------------- */ .display{ font-family:var(--display); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); line-height:1.06; color:var(--ink); margin:0; } /* eyebrow ＝ 誌面のマスト印「A SELECT OF FURUSATO」 */ .eyebrow{ font-family:var(--util); font-weight:500; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-faint); margin:0; } .jp-lead{ font-family:var(--jp-display); font-weight:500; font-size:clamp(1.05rem, 1rem + .6vw, 1.45rem); line-height:1.85; color:var(--ink); letter-spacing:.04em; margin:0; } .label{ font-family:var(--util); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); } /* ---- ヘッダー / ナビ ----------------------------------------------- */ .site-head{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(1.1) blur(6px); border-bottom:1px solid var(--line); } .site-head .wrap{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding-block:18px; } .brand{ text-decoration:none; line-height:1; } .brand b{ display:block; font-family:var(--display); font-weight:var(--display-weight); letter-spacing:.16em; font-size:1.18rem; } .brand small{ display:block; margin-top:4px; font-family:var(--jp-display); color:var(--ink-soft); font-size:.72rem; letter-spacing:.18em; } .nav{ display:flex; gap:clamp(14px,2vw,30px); align-items:baseline; } .nav a{ font-family:var(--util); font-size:.86rem; letter-spacing:.06em; text-decoration:none; color:var(--ink-soft); padding-bottom:2px; border-bottom:1px solid transparent; } .nav a:hover{ color:var(--ink); border-bottom-color:var(--ink); } /* 準備中（連載/読み物・実ページ未作成。非リンク） */ .nav .soon, .foot-nav .soon{ font-family:var(--util); font-size:.86rem; letter-spacing:.06em; color:var(--ink-faint); cursor:default; display:inline-flex; align-items:baseline; gap:5px; } .foot-nav .soon{ font-size:.82rem; } .nav .soon small, .foot-nav .soon small{ font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); padding:1px 5px; border-radius:1px; transform:translateY(-1px); } /* ---- ヒーロー ------------------------------------------------------ */ .hero{ padding-block:clamp(40px,6vw,84px); } .hero-grid{ display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:1.05fr .95fr; align-items:center; } .hero-copy .eyebrow{ margin-bottom:18px; } .hero-headline{ font-size:clamp(2.7rem, 1.8rem + 4.4vw, 5rem); } .hero-copy .jp-lead{ margin-top:22px; max-width:30ch; } .hero-sign{ margin-top:30px; } /* シグネチャ一文（看板品で常用） */ .signature{ font-family:var(--jp-display); font-size:clamp(1.05rem, 1rem + .5vw, 1.4rem); letter-spacing:.06em; color:var(--ink); padding-left:18px; border-left:2px solid var(--ink); display:inline-block; } /* ---- 白背景ヒーロー枠（プレースホルダ） ---------------------------- */ .well{ position:relative; background:var(--well); border:1px solid var(--well-line); aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden; } .well--wide{ aspect-ratio:16/12; } .well--square{ aspect-ratio:1/1; } .well__note{ text-align:center; color:var(--ink-faint); font-family:var(--util); font-size:.68rem; letter-spacing:.18em; line-height:1.7; padding:14px; max-width:80%; } .well__note .sm{ font-size:.62rem; letter-spacing:.14em; display:block; margin-top:6px; } /* 素材色チップ＝この品の「差し色」はここから出る、という宣言 */ .swatches{ display:flex; gap:7px; justify-content:center; margin-top:12px; } .swatches i{ width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.16); display:inline-block; } /* トンボ（版面の道具痕）— 四隅の見当合わせ印 */ .well::before, .well::after{ content:""; position:absolute; width:16px; height:16px; pointer-events:none; border:0 solid var(--ink-faint); opacity:.5; } .well::before{ top:12px; left:12px; border-top-width:1px; border-left-width:1px; } .well::after{ bottom:12px; right:12px; border-bottom-width:1px; border-right-width:1px; } .well .tombo-tr, .well .tombo-bl{ position:absolute; width:16px; height:16px; pointer-events:none; border:0 solid var(--ink-faint); opacity:.5; } .well .tombo-tr{ top:12px; right:12px; border-top-width:1px; border-right-width:1px; } .well .tombo-bl{ bottom:12px; left:12px; border-bottom-width:1px; border-left-width:1px; } /* ---- 商品カード（共通部品） --------------------------------------- 記事内・カタログ一覧・トップ市松で同一マークアップを使い回す。 構造: figure.card > .card__well(写真) + .card__body(name/meta/price/buy) ------------------------------------------------------------------- */ .card{ margin:0; display:flex; flex-direction:column; } .card__wellwrap{ position:relative; } .card__gift{ position:absolute; top:12px; left:12px; z-index:2; font-family:var(--jp-display); font-size:.74rem; letter-spacing:.12em; color:var(--ink); background:var(--paper); border:1px solid var(--ink); padding:3px 10px; } .card__body{ padding-top:16px; } .card__eyebrow{ font-family:var(--util); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px; } .card__name{ font-family:var(--jp-display); font-weight:500; font-size:clamp(1.05rem,1rem + .35vw,1.3rem); line-height:1.5; letter-spacing:.02em; margin:0; color:var(--ink); } .card__name a{ text-decoration:none; } .card__name a:hover{ text-decoration:underline; text-underline-offset:4px; } .card__meta{ font-family:var(--util); font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft); margin:8px 0 0; } .card__foot{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:baseline; justify-content:space-between; gap:14px; } .card__price{ font-family:var(--util); color:var(--ink); } .card__price .amt{ font-size:1.02rem; letter-spacing:.02em; } .card__price .cap{ display:block; font-size:.6rem; letter-spacing:.14em; color:var(--ink-faint); text-transform:uppercase; margin-top:2px; } /* 買えるボタン（静かなリンク＋↗＝棚から外へ飛ぶ印） */ .buy{ font-family:var(--util); font-size:.82rem; letter-spacing:.06em; text-decoration:none; color:var(--ink); white-space:nowrap; border-bottom:1.5px solid var(--ink); padding-bottom:2px; transition:border-bottom-width .15s ease; } .buy .arr{ font-style:normal; margin-left:6px; } .buy:hover{ border-bottom-width:3px; } .buy:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; } /* 複数buy_links（チョイス＋ふるなび等）：価格行の下にボタンを並べる（rev2） */ .card__foot--multi{ flex-direction:column; align-items:flex-start; gap:12px; } .card__foot--multi .buys{ display:flex; flex-wrap:wrap; gap:10px 20px; } /* #PR（アフィactive品のみ・現状0件＝非表示。将来用クラス） */ .pr{ font-family:var(--util); font-size:.58rem; letter-spacing:.16em; color:var(--ink-faint); margin-left:8px; } /* 将来：ココマース直販ボタンが同カードに並ぶ拡張枠（コメント参照） */ /* ---- 市松グリッド（棚） ------------------------------------------- モノ＝白背景ヒーローのセルと、物語/連載/ギフトの色面カードを交互に。 ------------------------------------------------------------------- */ .shelf{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--cell-gap); } .cell{ display:flex; } .cell > *{ width:100%; } /* 物語/連載/ギフト＝文字主体の色面カード */ .storycard{ background:var(--paper-2); border:1px solid var(--line); padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; justify-content:space-between; min-height:220px; text-decoration:none; color:inherit; } .storycard:hover{ background:#ededec; } .storycard:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; } .storycard .kicker{ font-family:var(--util); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); } .storycard h3{ font-family:var(--jp-display); font-weight:500; font-size:clamp(1.15rem,1rem + .6vw,1.5rem); line-height:1.45; margin:14px 0 0; letter-spacing:.03em; } .storycard p{ font-size:.84rem; color:var(--ink-soft); margin:12px 0 0; } .storycard .more{ font-family:var(--util); font-size:.78rem; letter-spacing:.06em; margin-top:18px; border-bottom:1.5px solid var(--ink); align-self:flex-start; padding-bottom:2px; } /* 準備中の物語カード（連載/読み物・実ページ未作成。非リンク・色面を弱める） */ .storycard--soon{ cursor:default; background:var(--paper); border-style:dashed; } .storycard--soon:hover{ background:var(--paper); } .storycard--soon .kicker, .storycard--soon h3, .storycard--soon p{ opacity:.62; } .more--soon{ font-family:var(--util); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; margin-top:18px; align-self:flex-start; color:var(--ink-faint); border:1px solid var(--line); border-radius:1px; padding:3px 8px; background:var(--paper-2); } /* ---- 編集ハイライト枠（目利きの定番・順位を出さない編集枠／rev1⑤） ---- */ .editor-pick{ display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:clamp(24px,4vw,60px); align-items:center; border-top:1.5px solid var(--ink); border-bottom:1px solid var(--line); padding:clamp(28px,4vw,52px) 0; } .editor-pick__art{ display:block; } .editor-pick__copy .display{ font-size:clamp(1.55rem,1.1rem+2.2vw,2.6rem); line-height:1.12; margin:.35em 0 0; } .editor-pick__copy .jp-lead{ margin-top:18px; } .editor-pick__copy .card__meta{ margin-top:16px; } .editor-pick__foot{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px 18px; margin-top:18px; } @media (max-width:760px){ .editor-pick{ grid-template-columns:1fr; } } /* ---- 見出しの帯（セクション見出し） -------------------------------- */ .sec-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(22px,3vw,34px); } .sec-head .en{ font-family:var(--display); font-size:clamp(1.6rem,1.2rem+1.6vw,2.4rem); } .sec-head .jp{ font-family:var(--jp-display); color:var(--ink-soft); font-size:.92rem; letter-spacing:.1em; } .sec{ padding-block:clamp(40px,6vw,80px); } .rule{ border:0; border-top:1px solid var(--line); margin:0; } /* ---- 二層構造の一文（About滲み） ----------------------------------- */ .about-strip{ padding-block:clamp(48px,7vw,96px); } .about-strip .display{ font-size:clamp(1.7rem,1.2rem+2vw,2.8rem); line-height:1.2; max-width:24ch; } .about-strip .jp{ font-family:var(--jp-body); color:var(--ink-soft); margin-top:22px; max-width:52ch; font-size:.98rem; } /* ---- フッター ------------------------------------------------------ */ .site-foot{ border-top:1px solid var(--line); padding-block:48px; margin-top:40px; } .site-foot .wrap{ display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; } .site-foot .brand b{ font-size:1.05rem; } .foot-nav{ display:flex; flex-wrap:wrap; gap:18px; } .foot-nav a{ font-family:var(--util); font-size:.82rem; letter-spacing:.05em; color:var(--ink-soft); text-decoration:none; } .foot-nav a:hover{ color:var(--ink); } .fineprint{ font-family:var(--util); font-size:.7rem; letter-spacing:.04em; color:var(--ink-faint); width:100%; margin-top:10px; } /* ---- 商品個別ページ ------------------------------------------------ */ .crumb{ font-family:var(--util); font-size:.74rem; letter-spacing:.08em; color:var(--ink-faint); padding-block:20px; } .crumb a{ color:var(--ink-soft); text-decoration:none; } .crumb a:hover{ color:var(--ink); } .item-hero{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; padding-block:clamp(16px,2vw,28px) clamp(36px,5vw,64px); } .item-hero .display{ font-size:clamp(2rem,1.4rem+2.6vw,3.3rem); } .item-hero .jp-lead{ margin-top:18px; } .mekiki{ max-width:60ch; } .mekiki p{ margin:0 0 1.5em; } .mekiki .step{ font-family:var(--util); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:6px; } .mekiki .okuru{ font-family:var(--jp-display); font-size:1.15rem; border-left:2px solid var(--ink); padding-left:16px; } .related .shelf{ grid-template-columns:repeat(3,1fr); } /* ---- 自治体紹介（ふるさと帯・静か / rev1追記①・DRYパーシャル） ---- */ .furusato__body{ max-width:68ch; } .furusato__body p{ font-family:var(--jp-body); color:var(--ink-soft); line-height:2; font-size:.94rem; margin:0 0 16px; } .furusato__body p.furusato__lead{ font-family:var(--jp-display); color:var(--ink); font-size:clamp(1.15rem,1rem+.7vw,1.5rem); letter-spacing:.04em; line-height:1.5; margin-bottom:18px; } .furusato__body p.furusato__note{ color:var(--ink-faint); font-size:.88rem; } .furusato__body p.furusato__more{ margin-top:10px; } /* ============ レスポンシブ ============ */ @media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } .item-hero{ grid-template-columns:1fr; } .shelf, .related .shelf{ grid-template-columns:repeat(2,1fr); } .nav{ display:none; } /* 本実装でハンバーガー化（WPテーマ側）。プロトはブランドのみ */ } @media (max-width: 560px){ .shelf, .related .shelf{ grid-template-columns:1fr; } .site-foot .wrap{ flex-direction:column; gap:18px; } } /* ============ アクセシビリティ ============ */ :where(a,button):focus-visible{ outline:2px solid var(--ink); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }