/** * 商品CPT（products）専用スタイルシート * * assets/css/cpt/products.css * * SWELL テーマの CSS 変数（--swell-*）を上書きせず、 * .p-product__ / .pl-products-archive プレフィックスで名前空間を分離している。 * * ── 構成 ───────────────────────────────────────────────────────── * セクション A : ブランドカラー CSS 変数（:root） * セクション B : single-products.php 用スタイル（.p-product__） * セクション C : archive-products.php 用スタイル（.pl-products-archive） * * ── CSS エンキュー条件（setup-products.php）─────────────────────── * is_singular('products') * || is_post_type_archive('products') * || is_tax('product_cat') * || is_tax('product_flavor') * || is_tax('product_tag') * * Updated: 2026年5月 * - --pl-orange を #b5470b → #f75700（ブランドカラー確定値）に修正 * - アーカイブページ用スタイル（セクション C）を追加 */ /* ================================================================ * セクション A : ブランドカラー CSS 変数 * ================================================================ */ /** * ── SWELLとの連携方針 ────────────────────────────────────────── * SWELLはキーカラーを `:root` に CSS変数として出力しています。 * ブラウザの開発ツールで 要素の Computed > CSS Variables を確認し、 * `--swl-color-main`（またはSWELLバージョンによって異なる名前）の値を * 下記の --pl-key に設定することで、カスタマイザーの色変更が * このファイルにも連動するようになります。 * * 確認方法： * 1. サイトをブラウザで開く * 2. F12 → Elements タブ → を選択 * 3. Styles または Computed → Filter に "swl" と入力 * 4. --swl-color-main や --swl-btn-color が出れば、その値を使う * * SWELLのキーカラーを参照する例（変数名が確定したら下記のように書き換え）： * --pl-key: var(--swl-color-main, #6b4c2a); * --pl-brown: var(--swl-color-main, #6b4c2a); */ :root { /* ─ ブランドカラー（SWELLキーカラー確認後に --pl-brown を合わせる） ─ */ --pl-brown: #6b4c2a; --pl-brown-light: #c8a87a; --pl-cream: #faf6f0; --pl-cream-dark: #f0e8d8; --pl-orange: #f75700; /* ブランドメインカラー（確定値） */ --pl-orange-hover: #d44500; --pl-orange-pale: #fff2ec; --pl-text: #2c1f0e; --pl-text-light: #7a6550; /* ─ スートカラー ─ */ --pl-diamond: #9b2335; --pl-hearts: #c0392b; --pl-clubs: #2c6b3a; --pl-spades: #1a2f4a; /* ─ 四象限マップカラー ─ */ --pl-map-left: #d4e8f0; --pl-map-right: #f9e4e4; --pl-map-top: #f5f0e8; --pl-map-bottom: #e8f0e8; --pl-map-border: #c8b89a; --pl-map-axis: #b8a882; --pl-map-dot: #f75700; /* ← --pl-orange に合わせて更新 */ /* ─ アーカイブページ用追加変数 ─ */ --pl-charcoal: #2A2416; --pl-parchment: #E8DCC8; --pl-warm-gray: #8A7D70; --pl-sage: #7A8F7A; --pl-sage-light: #A8BEA4; --pl-white: #FDFAF4; --pl-serif: 'Hiragino Mincho ProN', 'Yu Mincho', 'Georgia', serif; --pl-sans: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; } /* ================================================================ * セクション B : single-products.php 用スタイル * ================================================================ */ /* ================================================================ * ページ全体のレイアウト * ================================================================ */ .p-product { max-width: 820px; /* SWELLのコンテンツ幅に合わせて調整 */ margin-inline: auto; color: var(--pl-text); } /* ================================================================ * ① ヘッダー（タイトル・カテゴリー・抜粋） * ================================================================ */ .p-product__header { margin-block-end: 2rem; } .p-product__status-wrap { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 0.75rem; } /* 販売状況バッジ */ .p-product__status-badge { display: inline-block; padding: 0.2em 0.8em; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; border-radius: 2px; border: 1px solid currentColor; } .p-product__status-badge.is-status--normal { color: var(--pl-clubs); border-color: var(--pl-clubs); } .p-product__status-badge.is-status--seasonal { color: var(--pl-orange); border-color: var(--pl-orange); } .p-product__status-badge.is-status--preparing { color: var(--pl-spades); border-color: var(--pl-spades); } .p-product__status-badge.is-status--ended { color: var(--pl-text-light); border-color: var(--pl-text-light); background: #f0ede8; } .p-product__sales-period { font-size: 0.8rem; color: var(--pl-text-light); } /* カテゴリーリンク */ .p-product__cats { margin-block-end: 0.5rem; } .p-product__cat-link { display: inline-block; font-size: 0.78rem; color: var(--pl-brown); text-decoration: none; letter-spacing: 0.08em; } .p-product__cat-link::before { content: '— '; } .p-product__cat-link:hover { text-decoration: underline; } /* 商品タイトル */ .p-product__title { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 700; line-height: 1.3; color: var(--pl-brown); margin-block: 0.25rem 0.75rem; } /* キャッチコピー（抜粋） */ .p-product__excerpt { font-size: 1rem; color: var(--pl-text-light); font-style: italic; line-height: 1.7; } /* ================================================================ * ② スート評価バッジ ♦♥♣♠ * ================================================================ */ .p-product__suits { margin-block: 1.5rem 2rem; } .p-product__suits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 600px) { .p-product__suits-grid { grid-template-columns: repeat(4, 1fr); } } .p-product__suit-badge { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; background: var(--pl-cream-dark); border-radius: 4px; border-left: 3px solid transparent; cursor: default; transition: transform 0.15s ease; } .p-product__suit-badge:hover { transform: translateY(-2px); } .p-product__suit-badge--diamond { border-left-color: var(--pl-diamond); } .p-product__suit-badge--hearts { border-left-color: var(--pl-hearts); } .p-product__suit-badge--clubs { border-left-color: var(--pl-clubs); } .p-product__suit-badge--spades { border-left-color: var(--pl-spades); } .p-product__suit-icons { display: flex; gap: 0.05em; flex-shrink: 0; line-height: 1; } .p-product__suit-icon { font-size: 1.2rem; line-height: 1; transition: opacity 0.15s; } .p-product__suit-badge--diamond .p-product__suit-icon.is-active { color: var(--pl-diamond); } .p-product__suit-badge--hearts .p-product__suit-icon.is-active { color: var(--pl-hearts); } .p-product__suit-badge--clubs .p-product__suit-icon.is-active { color: var(--pl-clubs); } .p-product__suit-badge--spades .p-product__suit-icon.is-active { color: var(--pl-spades); } .p-product__suit-icon.is-inactive { opacity: 0.18; color: var(--pl-text-light); } .p-product__suit-text { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; } .p-product__suit-title { font-size: 0.68rem; color: var(--pl-text-light); letter-spacing: 0.05em; } .p-product__suit-value { font-size: 0.82rem; font-weight: 600; color: var(--pl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ================================================================ * ③ アイキャッチ画像 * ================================================================ */ .p-product__thumbnail { margin-block: 1.5rem; border-radius: 6px; overflow: hidden; } .p-product__thumbnail-img { width: 100%; height: auto; display: block; } /* ================================================================ * ④ ブロックエディター本文エリア * ───────────────────────────────────────────────────────────── * SWELLのキーカラー #f75700 はサイト全体のブランドカラーとして維持する。 * 商品ページの本文エリア（.p-product__content）の中だけ * ブラウン系パレットに切り替えてシックな世界観を保つ。 * * ── 上書き戦略：2段構え ────────────────────────────────────── * 【①CSS変数の再定義】 * SWELLはキーカラーを --swl-color-main 等のCSS変数で管理している。 * 親要素でその変数を再定義すると、子孫要素が変数を参照している * 限り自動的にブラウン系に変わる（SWELL 4.x以降で有効）。 * * 【②要素ごとの直接上書き】 * 変数ではなく色値を直接書いている要素（ボタン背景など）には * ①が効かないため、セレクターで個別に上書きする。 * SWELLの specificity が高い箇所には !important を使う。 * ================================================================ */ /* ① CSS変数の再定義（このスコープ内のみ有効） */ .p-product__content { margin-block: 2rem; line-height: 1.9; --swl-color-main: var(--pl-brown); --swl-btn-color: var(--pl-brown); --swl-link-color: var(--pl-brown); --theme-color: var(--pl-brown); --swl-color-accent: var(--pl-brown-light); } /* ギャラリーブロックの余白調整 */ .p-product__content .wp-block-gallery { margin-block: 1.5rem; } /* ② リンク色の直接上書き */ .p-product__content a, .p-product__content a:link, .p-product__content a:visited { color: var(--pl-brown); } .p-product__content a:hover, .p-product__content a:focus { color: var(--pl-orange); text-decoration: underline; } /* ② ボタンブロック */ .p-product__content .wp-block-button__link, .p-product__content .swell-block-button__btn { background-color: var(--pl-brown) !important; border-color: var(--pl-brown) !important; color: white !important; } .p-product__content .wp-block-button__link:hover, .p-product__content .swell-block-button__btn:hover { background-color: var(--pl-orange) !important; border-color: var(--pl-orange) !important; } /* ② 引用ブロック */ .p-product__content blockquote, .p-product__content .wp-block-quote { border-left-color: var(--pl-brown-light) !important; } /* ② リストマーカー */ .p-product__content ul li::marker, .p-product__content ol li::marker { color: var(--pl-brown-light); } /* ② テーブル見出しセル */ .p-product__content table th { background-color: var(--pl-cream-dark); color: var(--pl-brown); border-color: var(--pl-brown-light); } /* TOC非表示 */ .p-product [class*="toc"], .p-product .p-toc { display: none !important; } /* ================================================================ * ブロックエディター本文エリア内の要素スタイル * ================================================================ */ /* ── 見出しブロック ── */ .p-product__content h2, .p-product__content .wp-block-heading.is-style-h2 { font-size: 1.35rem; font-weight: 700; color: var(--pl-brown); line-height: 1.4; margin-block: 2rem 0.75rem; padding-block-end: 0.4rem; border-bottom: 2px solid var(--pl-brown-light); } .p-product__content h3, .p-product__content .wp-block-heading.is-style-h3 { font-size: 1.1rem; font-weight: 700; color: var(--pl-brown); line-height: 1.5; margin-block: 1.75rem 0.5rem; padding-left: 0.7rem; border-left: 3px solid var(--pl-brown-light); } .p-product__content h4, .p-product__content .wp-block-heading.is-style-h4 { font-size: 1rem; font-weight: 700; color: var(--pl-text); line-height: 1.5; margin-block: 1.5rem 0.4rem; } /* ── 段落 ── */ .p-product__content p { margin-block: 0 1em; line-height: 1.9; color: var(--pl-text); } /* ── 箇条書きリスト ── */ .p-product__content ul, .p-product__content .wp-block-list:not(ol) { margin-block: 0.5rem 1.25rem; padding-left: 1.5rem; list-style: none; } .p-product__content ul li, .p-product__content .wp-block-list:not(ol) li { position: relative; padding-left: 1.1em; margin-block-end: 0.4em; line-height: 1.8; color: var(--pl-text); } /* 独自 bullet */ .p-product__content ul li::before, .p-product__content .wp-block-list:not(ol) li::before { content: '✦'; position: absolute; left: 0; top: 0.1em; font-size: 0.6em; color: var(--pl-brown-light); line-height: 1.8; } /* ── 番号付きリスト ── */ .p-product__content ol, .p-product__content .wp-block-list.is-style-ordered, .p-product__content ol.wp-block-list { margin-block: 0.5rem 1.25rem; padding-left: 1.75rem; list-style: decimal; } .p-product__content ol li { padding-left: 0.25em; margin-block-end: 0.4em; line-height: 1.8; color: var(--pl-text); } /* ── 引用ブロック ── */ .p-product__content blockquote, .p-product__content .wp-block-quote { margin-block: 1.5rem; padding: 1rem 1.25rem; background: var(--pl-cream); border-left: 4px solid var(--pl-brown-light); border-radius: 0 4px 4px 0; color: var(--pl-text-light); font-style: italic; line-height: 1.8; } /* ── 区切り線 ── */ .p-product__content hr, .p-product__content .wp-block-separator { border: none; border-top: 1px solid var(--pl-brown-light); margin-block: 2rem; opacity: 0.6; } /* ── テーブル ── */ .p-product__content table, .p-product__content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-block: 1.5rem; } .p-product__content th { background: var(--pl-cream-dark); color: var(--pl-brown); font-weight: 700; padding: 0.6rem 0.9rem; border: 1px solid var(--pl-brown-light); text-align: left; } .p-product__content td { padding: 0.6rem 0.9rem; border: 1px solid var(--pl-brown-light); color: var(--pl-text); line-height: 1.7; } /* ── 画像ブロック ── */ .p-product__content figure.wp-block-image { margin-block: 1.5rem; } .p-product__content figure.wp-block-image img { max-width: 100%; height: auto; border-radius: 4px; } .p-product__content figure.wp-block-image figcaption { font-size: 0.8rem; color: var(--pl-text-light); text-align: center; margin-block-start: 0.4rem; } /* ================================================================ * ⑤ 基本情報セクション * ================================================================ */ .p-product__basic-info { margin-block: 2.5rem; padding: 2rem; background: var(--pl-cream); border: 1px solid var(--pl-brown-light); border-radius: 6px; } /* 共通セクションタイトル */ .p-product__section-title { font-size: 1.1rem; font-weight: 700; color: var(--pl-brown); letter-spacing: 0.08em; margin-block: 0 1.5rem; padding-block-end: 0.5rem; border-bottom: 1px solid var(--pl-brown-light); } .p-product__basic-item { margin-block-end: 1.75rem; } .p-product__basic-item:last-child { margin-block-end: 0; } .p-product__item-label { display: flex; align-items: center; gap: 0.4em; font-size: 0.9rem; font-weight: 600; color: var(--pl-brown); margin-block: 0 0.5rem; } .p-product__item-icon { font-size: 0.7em; color: var(--pl-brown-light); } .p-product__item-body { font-size: 0.95rem; line-height: 1.8; color: var(--pl-text); } /* おすすめシーンのリスト */ .p-product__scene-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .p-product__scene-item { display: inline-block; padding: 0.3em 0.9em; font-size: 0.82rem; background: var(--pl-cream-dark); border: 1px solid var(--pl-brown-light); border-radius: 20px; color: var(--pl-brown); } /* 紅茶ペアリング */ .p-product__basic-item--tea { border-top: 1px dashed var(--pl-brown-light); padding-block-start: 1.25rem; margin-block-start: 0.5rem; } .p-product__tea-list { display: flex; flex-wrap: wrap; gap: 0.75rem; } .p-product__tea-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; background: white; border: 1px solid var(--pl-brown-light); border-radius: 4px; text-decoration: none; color: var(--pl-brown); font-size: 0.85rem; transition: border-color 0.15s, box-shadow 0.15s; } .p-product__tea-card:hover { border-color: var(--pl-brown); box-shadow: 0 2px 6px rgba(107, 76, 42, 0.15); } .p-product__tea-img { width: 36px; height: 36px; object-fit: cover; border-radius: 2px; flex-shrink: 0; } /* ================================================================ * ⑥ 四象限マップ（single ページ用） * ================================================================ */ .p-product__quadrant { margin-block: 2.5rem; padding: 2rem; background: var(--pl-cream); border: 1px solid var(--pl-brown-light); border-radius: 6px; } .p-product__quadrant-desc { font-size: 0.88rem; color: var(--pl-text-light); margin-block-end: 1.5rem; } .p-product__quadrant-wrap { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .p-product__quadrant-svg { flex: 0 0 220px; width: 220px; height: 220px; max-width: 100%; } .p-product__map-label { font-size: 9px; fill: var(--pl-text-light, #7a6550); font-family: inherit; } .p-product__map-dot-label { font-size: 8px; fill: var(--pl-brown, #6b4c2a); font-weight: bold; font-family: inherit; } .p-product__map-dot { transition: r 0.2s; } .p-product__map-dot:hover { r: 10; } .p-product__quadrant-note { flex: 1; min-width: 140px; } .p-product__quadrant-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.75rem; font-size: 0.88rem; } .p-product__quadrant-dl dt { color: var(--pl-text-light); font-weight: 600; } .p-product__quadrant-dl dd { color: var(--pl-text); margin: 0; } /* ================================================================ * ⑦ タロットセクション * ================================================================ */ .p-product__tarot-header { text-align: center; margin-block-end: 1.75rem; } .p-product__tarot-eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; color: var(--pl-brown-light); text-transform: uppercase; margin-block-end: 0.5rem; } .p-product__tarot-eyebrow-icon { font-size: 0.7em; opacity: 0.7; } .p-product__section-title--tarot { text-align: center; letter-spacing: 0.12em; margin-block-end: 0.75rem; } .p-product__tarot-intro { font-size: 0.88rem; color: var(--pl-text-light); line-height: 1.8; max-width: 520px; margin-inline: auto; } .p-product__tarot-disclaimer { display: block; font-size: 0.78rem; color: var(--pl-text-light); opacity: 0.8; margin-block-start: 0.4rem; letter-spacing: 0.02em; } .p-product__tarot { margin-block: 2.5rem; padding: 2.5rem 2rem; background: linear-gradient( 135deg, var(--pl-cream-dark) 0%, var(--pl-cream) 60%, #ede8e0 100% ); border: 1px solid var(--pl-brown-light); border-radius: 6px; position: relative; overflow: hidden; } .p-product__tarot::before { content: '✦'; position: absolute; top: -20px; right: 20px; font-size: 8rem; color: rgba(107, 76, 42, 0.04); pointer-events: none; user-select: none; line-height: 1; } .p-product__section-title--tarot { text-align: center; letter-spacing: 0.15em; } .p-product__tarot-body { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; } .p-product__tarot-card-wrap { flex: 0 0 auto; width: 130px; } .p-product__tarot-figure { margin: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 16px rgba(107, 76, 42, 0.25); } .p-product__tarot-img { width: 100%; height: auto; display: block; } /* 画像フォールバック */ .p-product__tarot-placeholder { width: 130px; height: 220px; background: linear-gradient(160deg, var(--pl-brown) 0%, #3d2010 100%); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: rgba(250, 246, 240, 0.85); box-shadow: 0 4px 16px rgba(107, 76, 42, 0.25); } .p-product__tarot-arcana-num { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.1em; color: var(--pl-cream); } .p-product__tarot-placeholder-icon { font-size: 2.5rem; opacity: 0.6; } .p-product__tarot-info { flex: 1; min-width: 200px; } .p-product__tarot-heading { display: flex; align-items: baseline; gap: 0.75rem; margin-block-end: 0.75rem; } .p-product__tarot-arcana { font-size: 0.9rem; color: var(--pl-text-light); letter-spacing: 0.1em; font-style: italic; } .p-product__tarot-name { font-size: 1.3rem; font-weight: 700; color: var(--pl-brown); margin: 0; } .p-product__tarot-keywords { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-block-end: 1.25rem; } .p-product__tarot-kw { font-size: 0.82rem; color: var(--pl-text-light); font-style: italic; letter-spacing: 0.04em; } .p-product__tarot-kw-sep { color: var(--pl-brown-light); font-size: 0.7rem; } .p-product__tarot-message-lead { font-size: 0.82rem; color: var(--pl-text-light); margin-block-end: 0.5rem; letter-spacing: 0.05em; } .p-product__tarot-quote { border-left: 3px solid var(--pl-brown-light); padding-left: 1rem; margin: 0; font-size: 0.93rem; line-height: 1.9; color: var(--pl-text); font-style: normal; } /* ================================================================ * ⑧ 購入導線 * ================================================================ */ .p-product__quadrant-name { font-size: 1rem; font-weight: 700; color: var(--pl-brown); margin-block: 0 0.75rem; line-height: 1.4; } .p-product__purchase { margin-block: 2.5rem; padding: 2rem; background: white; border: 2px solid var(--pl-brown); border-radius: 6px; } .p-product__purchase-block { padding-block: 1.25rem; } .p-product__purchase-block:first-child { padding-block-start: 0; } .p-product__purchase-divider { border: none; border-top: 1px dashed var(--pl-brown-light); margin-block: 0.5rem; } .p-product__purchase-sub { display: flex; align-items: center; gap: 0.5em; font-size: 0.95rem; font-weight: 700; color: var(--pl-brown); margin-block: 0 1rem; } .p-product__purchase-sub-icon { font-size: 1.1em; } .p-product__visit-text { font-size: 0.95rem; line-height: 1.8; color: var(--pl-text); margin-block-end: 1.25rem; } .p-product__cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75em 1.75em; border-radius: 3px; font-size: 0.9rem; font-weight: 600; text-decoration: none; letter-spacing: 0.06em; transition: opacity 0.15s; } .p-product__cta-btn:hover { opacity: 0.85; } .p-product__cta-btn--tel { background: var(--pl-brown); color: white; gap: 0.5em; font-size: 1rem; letter-spacing: 0.08em; } .p-product__cta-btn--online { background: var(--pl-orange); color: white; gap: 0.5em; font-size: 1rem; letter-spacing: 0.06em; margin-block-end: 0.75rem; } .p-product__cta-tel-icon { font-size: 1.1em; } .p-product__visit-note { font-size: 0.78rem; color: var(--pl-text-light); margin: 0; } /* ================================================================ * ⑨ フレーバー・素材タグ * ================================================================ */ .p-product__flavors { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block: 1.5rem; font-size: 0.85rem; } .p-product__flavor-label { color: var(--pl-text-light); } .p-product__flavor-tag { display: inline-block; padding: 0.25em 0.7em; background: var(--pl-cream-dark); border: 1px solid var(--pl-brown-light); border-radius: 3px; color: var(--pl-brown); text-decoration: none; transition: background 0.15s; } .p-product__flavor-tag:hover { background: var(--pl-brown-light); color: white; } /* ================================================================ * ⑩⑪ 前後ナビ・戻りリンク * ================================================================ */ .p-product__adjacent-nav { display: flex; justify-content: space-between; gap: 1rem; margin-block: 2rem; padding-block: 1.25rem; border-top: 1px solid var(--pl-brown-light); border-bottom: 1px solid var(--pl-brown-light); } .p-product__adjacent-link { display: flex; align-items: center; gap: 0.5em; font-size: 0.85rem; color: var(--pl-brown); text-decoration: none; max-width: 45%; } .p-product__adjacent-link:hover { text-decoration: underline; } .p-product__adjacent-link--next { margin-left: auto; text-align: right; } .p-product__adjacent-arrow { font-size: 1rem; flex-shrink: 0; } .p-product__adjacent-name { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .p-product__back-link { margin-block: 1.5rem; text-align: center; } .p-product__back-link a { font-size: 0.9rem; color: var(--pl-brown); text-decoration: none; letter-spacing: 0.04em; } .p-product__back-link a:hover { text-decoration: underline; } /* ================================================================ * セクション B レスポンシブ調整 * ================================================================ */ @media (max-width: 599px) { .p-product__tarot-body { flex-direction: column; align-items: center; } .p-product__tarot-info { width: 100%; } .p-product__quadrant-wrap { flex-direction: column; align-items: center; } .p-product__cta-btn { width: 100%; } .p-product__adjacent-nav { flex-direction: column; gap: 0.75rem; } .p-product__adjacent-link--next { margin-left: 0; text-align: left; } } /* ================================================================ * セクション C : archive-products.php 用スタイル * ================================================================ */ /* ================================================================ * ページヘッダー * ================================================================ */ .pl-products-archive { background: var(--pl-cream); font-family: var(--pl-serif); color: var(--pl-charcoal); } .pl-products__header { background: #6B3A18; padding: 48px 20px 36px; text-align: center; position: relative; overflow: hidden; } /* 斜線テクスチャ */ .pl-products__header::before { content: ''; position: absolute; inset: 0; opacity: .04; background-image: repeating-linear-gradient( 45deg, #f75700 0, #f75700 1px, transparent 0, transparent 50% ); background-size: 14px 14px; pointer-events: none; } .pl-products__header-inner { position: relative; z-index: 1; } .pl-products__label { font-size: .625rem; color: var(--pl-orange); letter-spacing: .3em; margin: 0 0 .6em; font-family: var(--pl-sans); } .pl-products__title { font-size: clamp(1.375rem, 4vw, 1.75rem); font-weight: 700; color: var(--pl-white); margin: 0 0 .25em; letter-spacing: .1em; line-height: 1.3; } .pl-products__title-fr { font-size: .875rem; color: var(--pl-orange); letter-spacing: .2em; margin: 0 0 1em; } .pl-products__lead { font-size: .8125rem; color: rgba(253, 250, 244, .68); max-width: 480px; margin: 0 auto; line-height: 2; letter-spacing: .04em; } /* ================================================================ * コンテナ・パンくず * ================================================================ */ .pl-products__container { max-width: 900px; margin: 0 auto; padding: 0 16px 48px; } .pl-products__breadcrumb { border-bottom: 1px solid var(--pl-cream-dark); } .pl-breadcrumb { max-width: 900px; margin: 0 auto; padding: 8px 16px; font-size: .6875rem; color: var(--pl-warm-gray); } /* ================================================================ * 四象限マップ（アーカイブ用） * ================================================================ */ .pl-quadrant { margin: 28px 0 20px; background: var(--pl-white); border: 1px solid rgba(247, 87, 0, .15); border-radius: 5px; padding: 22px 20px 20px; } .pl-quadrant__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .pl-quadrant__title { font-size: .9375rem; font-weight: 700; color: var(--pl-orange); margin: 0 0 4px; letter-spacing: .06em; line-height: 1.4; } .pl-quadrant__title-fr { font-size: .75rem; letter-spacing: .12em; font-weight: 400; opacity: .8; } .pl-quadrant__subtitle { font-size: .6875rem; color: var(--pl-warm-gray); margin: 0; letter-spacing: .03em; } .pl-quadrant__help-btn { flex-shrink: 0; background: transparent; border: 1px solid var(--pl-orange); color: var(--pl-orange); padding: 4px 12px; font-size: .625rem; cursor: pointer; letter-spacing: .1em; font-family: var(--pl-serif); border-radius: 2px; transition: background .15s, color .15s; } .pl-quadrant__help-btn:hover, .pl-quadrant__help-btn[aria-expanded="true"] { background: var(--pl-orange); color: var(--pl-white); } .pl-quadrant__help { background: var(--pl-orange-pale); border-left: 3px solid var(--pl-orange); padding: 10px 14px; margin-bottom: 14px; font-size: .75rem; color: var(--pl-charcoal); line-height: 1.85; font-family: var(--pl-serif); } .pl-quadrant__help[hidden] { display: none; } .pl-quadrant__body { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .pl-quadrant__map-wrap { flex: 0 0 auto; width: 400px; } .pl-quadrant__map-wrap:empty { min-height: 260px; background: var(--pl-cream-dark); border-radius: 4px; } .pl-quadrant__nojs { padding: 20px; text-align: center; font-size: .75rem; color: var(--pl-warm-gray); } /* 商品リスト（右側） */ .pl-quadrant__list { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; } .pl-quadrant__list-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 3px; text-decoration: none; color: var(--pl-charcoal); font-size: .75rem; font-family: var(--pl-serif); transition: background .15s; } .pl-quadrant__list-item:hover, .pl-quadrant__list-item.is-active { background: var(--pl-orange-pale); color: var(--pl-orange); } .pl-quadrant__list-item.is-suspended { opacity: .5; } .pl-quadrant__dot-mark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pl-orange); flex-shrink: 0; } .pl-quadrant__list-item.is-suspended .pl-quadrant__dot-mark { background: var(--pl-warm-gray); } .pl-quadrant__list-name { line-height: 1.4; } .pl-quadrant__list-empty { font-size: .6875rem; color: var(--pl-warm-gray); font-family: var(--pl-serif); padding: 4px 8px; margin: 0 0 8px; line-height: 1.6; } /* タルト占いボタン */ .pl-quadrant__tarot-btn { display: block; margin-top: 12px; padding: 10px; background: var(--pl-orange); color: var(--pl-white); text-decoration: none; text-align: center; font-size: .75rem; font-family: var(--pl-serif); letter-spacing: .12em; border-radius: 3px; transition: background .15s; } .pl-quadrant__tarot-btn:hover { background: var(--pl-orange-hover); color: var(--pl-white); } /* SVG（JS描画） */ .pl-quadrant__map-wrap svg { overflow: visible; display: block; } .pl-map-dot { cursor: pointer; transition: r .15s ease; } .pl-map-label { font-family: var(--pl-serif); font-size: 8px; fill: var(--pl-charcoal); opacity: .72; pointer-events: none; } /* ================================================================ * カテゴリーナビ * ================================================================ */ .pl-cat-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 24px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--pl-parchment); } .pl-cat-nav__label { font-size: .6875rem; color: var(--pl-warm-gray); letter-spacing: .1em; white-space: nowrap; font-family: var(--pl-sans); } .pl-cat-nav__btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border: 1px solid var(--pl-parchment); background: var(--pl-white); color: var(--pl-warm-gray); text-decoration: none; font-size: .75rem; font-family: var(--pl-serif); letter-spacing: .06em; border-radius: 2px; transition: all .15s; white-space: nowrap; } .pl-cat-nav__btn:hover { border-color: var(--pl-orange); color: var(--pl-orange); background: var(--pl-white); } .pl-cat-nav__btn.is-active { border-color: var(--pl-orange); background: var(--pl-orange); color: var(--pl-white); } /* タルトカテゴリーは強調（マップアイコン付き） */ .pl-cat-nav__btn--tarte { border-color: rgba(247, 87, 0, .35); color: var(--pl-orange); } .pl-cat-nav__btn--tarte:hover, .pl-cat-nav__btn--tarte.is-active { background: var(--pl-orange); color: var(--pl-white); border-color: var(--pl-orange); } .pl-cat-nav__map-icon { font-size: .6rem; opacity: .75; } /* ================================================================ * フィルターバー * ================================================================ */ .pl-filter-bar { margin: 0 0 18px; } .pl-filter-bar__row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 8px; } .pl-filter-bar__row:last-child { margin-bottom: 0; } .pl-filter-bar__label { font-size: .6875rem; color: var(--pl-warm-gray); letter-spacing: .1em; white-space: nowrap; font-family: var(--pl-sans); } .pl-filter-btn { padding: 5px 13px; border: 1px solid var(--pl-parchment); background: transparent; color: var(--pl-warm-gray); cursor: pointer; font-size: .6875rem; font-family: var(--pl-serif); letter-spacing: .06em; border-radius: 2px; transition: all .15s; white-space: nowrap; } .pl-filter-btn:hover { border-color: var(--pl-orange); color: var(--pl-orange); } .pl-filter-btn.is-active { border-color: var(--pl-orange); background: var(--pl-orange); color: var(--pl-white); } /* フレーバーフィルターは丸みを付ける */ .pl-filter-btn--flavor { border-radius: 999px; border-color: rgba(122, 143, 122, .5); color: var(--pl-sage); } .pl-filter-btn--flavor:hover { border-color: var(--pl-sage); color: var(--pl-sage); background: rgba(122, 143, 122, .08); } .pl-filter-btn--flavor.is-active { background: var(--pl-sage); border-color: var(--pl-sage); color: var(--pl-white); } /* 件数表示 */ .pl-products__count { font-size: .6875rem; color: var(--pl-warm-gray); margin: 0 0 14px; letter-spacing: .06em; font-family: var(--pl-sans); } /* ================================================================ * 商品グリッド * ================================================================ */ .pl-product-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 560px) { .pl-product-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (min-width: 860px) { .pl-product-grid { grid-template-columns: repeat(3, 1fr); } } .pl-product-card.is-hidden { display: none; } /* ================================================================ * 商品カード * ================================================================ */ .pl-product-card { background: var(--pl-white); border: 1px solid rgba(247, 87, 0, .12); border-radius: 4px; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .pl-product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(247, 87, 0, .11); border-color: rgba(247, 87, 0, .35); } .pl-product-card.is-suspended { opacity: .64; } /* サムネイル */ .pl-product-card__thumb-link { display: block; text-decoration: none; } .pl-product-card__thumb { position: relative; overflow: hidden; height: 190px; background: var(--pl-cream-dark); } .pl-product-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; } .pl-product-card:hover .pl-product-card__thumb img { transform: scale(1.04); } .pl-product-card__thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--pl-orange); opacity: .16; } /* 季節限定バッジ */ .pl-product-card__season-badge { position: absolute; top: 10px; left: 10px; background: var(--pl-orange); color: var(--pl-white); font-size: .625rem; padding: 3px 8px; font-family: var(--pl-serif); letter-spacing: .06em; line-height: 1.5; } /* 販売停止オーバーレイ */ .pl-product-card__suspended-overlay { position: absolute; inset: 0; background: rgba(253, 250, 244, .55); display: flex; align-items: center; justify-content: center; } .pl-product-card__suspended-overlay span { font-size: .6875rem; color: var(--pl-warm-gray); letter-spacing: .14em; font-family: var(--pl-serif); } /* タロットバッジ（右下） */ .pl-product-card__tarot-badge { position: absolute; bottom: 8px; right: 10px; font-size: .625rem; color: var(--pl-charcoal); opacity: .5; font-family: var(--pl-serif); letter-spacing: .04em; line-height: 1.3; } /* カード本文 */ .pl-product-card__body { padding: 14px 14px 12px; } .pl-product-card__title { font-size: .9375rem; font-weight: 700; color: var(--pl-charcoal); margin: 0 0 3px; letter-spacing: .02em; line-height: 1.3; } .pl-product-card__title a { color: inherit; text-decoration: none; } .pl-product-card__title a:hover { color: var(--pl-orange); } .pl-product-card__name-fr { font-size: .6875rem; color: var(--pl-orange); letter-spacing: .1em; margin: 0 0 8px; font-family: var(--pl-serif); } .pl-product-card__desc { font-size: .75rem; color: var(--pl-warm-gray); line-height: 1.75; margin: 0 0 8px; font-family: var(--pl-serif); letter-spacing: .02em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pl-product-card__desc p { margin: 0; } .pl-product-card__tarot-keyword { font-size: .6875rem; color: var(--pl-orange); letter-spacing: .06em; margin: 0 0 6px; font-family: var(--pl-serif); opacity: .8; } /* ================================================================ * フレーバータグ（アーカイブ） * ================================================================ */ .pl-flavor-tags { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .pl-flavor-tags__item { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--pl-sage-light); color: var(--pl-sage); font-size: .625rem; font-family: var(--pl-serif); letter-spacing: .03em; line-height: 1.6; text-decoration: none; transition: background .12s; } .pl-flavor-tags__item:hover { background: rgba(122, 143, 122, .1); color: var(--pl-sage); } /* ================================================================ * 商品タグ（アーカイブ） * ================================================================ */ .pl-product-tags { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .pl-product-tags__item { display: inline-block; padding: 2px 8px; border-radius: 2px; background: var(--pl-cream-dark); color: var(--pl-warm-gray); font-size: .625rem; font-family: var(--pl-serif); letter-spacing: .04em; line-height: 1.6; text-decoration: none; transition: background .12s; } .pl-product-tags__item:hover { background: var(--pl-parchment); color: var(--pl-charcoal); } .pl-product-tags__item.is-highlight { background: var(--pl-orange); color: var(--pl-white); } .pl-product-tags__item.is-highlight:hover { background: var(--pl-orange-hover); } /* ================================================================ * スート評価（3段階） * ================================================================ */ .pl-suit-row { display: flex; justify-content: space-between; border-top: 1px solid var(--pl-cream-dark); padding-top: 10px; } .pl-suit-item { display: flex; flex-direction: column; align-items: center; gap: 2px; } .pl-suit-item__symbols { display: flex; gap: 1px; line-height: 1; } .pl-suit-item__sym { font-size: .6875rem; transition: opacity .1s; } /* 各スートの塗り・空の色 */ .pl-suit-item--d .pl-suit-item__sym.is-filled { color: #B8915A; } .pl-suit-item--d .pl-suit-item__sym.is-empty { color: #B8915A; opacity: .2; } .pl-suit-item--h .pl-suit-item__sym.is-filled { color: var(--pl-orange); } .pl-suit-item--h .pl-suit-item__sym.is-empty { color: var(--pl-orange); opacity: .2; } .pl-suit-item--c .pl-suit-item__sym.is-filled { color: var(--pl-sage); } .pl-suit-item--c .pl-suit-item__sym.is-empty { color: var(--pl-sage); opacity: .2; } .pl-suit-item--s .pl-suit-item__sym.is-filled { color: var(--pl-charcoal); } .pl-suit-item--s .pl-suit-item__sym.is-empty { color: var(--pl-charcoal); opacity: .2; } .pl-suit-item__label { font-size: .5625rem; color: var(--pl-warm-gray); font-family: var(--pl-serif); letter-spacing: .02em; white-space: nowrap; } /* ================================================================ * ギフトバナー（タルト以外のカテゴリー） * ================================================================ */ .pl-gift-banner { margin-top: 28px; padding: 20px 22px; background: var(--pl-cream-dark); border: 1px solid var(--pl-parchment); border-radius: 5px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .pl-gift-banner__text { flex: 1; min-width: 180px; } .pl-gift-banner__title { display: block; font-size: .875rem; font-weight: 700; color: var(--pl-charcoal); margin-bottom: 5px; letter-spacing: .04em; } .pl-gift-banner__desc { font-size: .75rem; color: var(--pl-warm-gray); margin: 0; line-height: 1.85; font-family: var(--pl-serif); letter-spacing: .02em; } .pl-gift-banner__btn { flex-shrink: 0; display: inline-block; padding: 10px 22px; background: var(--pl-orange); color: var(--pl-white); text-decoration: none; font-size: .75rem; font-family: var(--pl-serif); letter-spacing: .12em; border-radius: 3px; transition: background .15s; } .pl-gift-banner__btn:hover { background: var(--pl-orange-hover); color: var(--pl-white); } /* ================================================================ * ECサイト誘導バナー * ================================================================ */ .pl-ec-banner { margin-top: 24px; padding: 22px 20px; background: linear-gradient(135deg, #6B3A18 0%, #8A5028 100%); border-radius: 5px; text-align: center; } .pl-ec-banner__eyebrow { font-size: .5625rem; color: var(--pl-orange); letter-spacing: .25em; margin: 0 0 8px; font-family: var(--pl-sans); } .pl-ec-banner__text { font-size: .8125rem; color: var(--pl-white); margin: 0 0 14px; line-height: 1.9; letter-spacing: .04em; } .pl-ec-banner__sub { font-size: .6875rem; color: rgba(253, 250, 244, .58); } .pl-ec-banner__btn { display: inline-block; padding: 9px 26px; background: transparent; border: 1px solid var(--pl-orange); color: var(--pl-orange); text-decoration: none; font-size: .75rem; font-family: var(--pl-serif); letter-spacing: .12em; border-radius: 2px; transition: background .15s, color .15s; } .pl-ec-banner__btn:hover { background: var(--pl-orange); color: var(--pl-white); } /* ================================================================ * ページネーション * ================================================================ */ .pl-products__pagination { margin-top: 32px; text-align: center; } .pl-products__pagination .nav-links a, .pl-products__pagination .nav-links span { display: inline-block; padding: 6px 12px; margin: 0 3px; border: 1px solid var(--pl-parchment); color: var(--pl-warm-gray); text-decoration: none; font-size: .75rem; font-family: var(--pl-sans); border-radius: 2px; transition: all .15s; } .pl-products__pagination .nav-links a:hover { border-color: var(--pl-orange); color: var(--pl-orange); } .pl-products__pagination .nav-links .current { border-color: var(--pl-orange); background: var(--pl-orange); color: var(--pl-white); } /* 空表示 */ .pl-products__empty { padding: 40px 20px; text-align: center; font-size: .875rem; color: var(--pl-warm-gray); font-family: var(--pl-serif); } /* ================================================================ * セクション C レスポンシブ調整 * ================================================================ */ @media (max-width: 640px) { .pl-products__header { padding: 32px 16px 24px; } .pl-product-grid { gap: 12px; } .pl-product-card__thumb { height: 140px; } .pl-quadrant__body { flex-direction: column; } .pl-quadrant__map-wrap { width: 100%; max-width: 100%; margin: 0 auto; } /* SVGをコンテナ幅に合わせてスケール（width属性をCSSで上書き） */ .pl-quadrant__map-wrap svg { width: 100% !important; height: auto !important; } .pl-quadrant__list { width: 100%; } .pl-gift-banner { flex-direction: column; align-items: stretch; } .pl-gift-banner__btn { text-align: center; } } /* ================================================================ * SWELLサイドバー非表示（アーカイブページでは不要） * body クラス（post-type-archive-products / tax-product_cat 等）で * スコープを絞り、サイト全体のサイドバーには影響させない * ================================================================ */ .post-type-archive-products .l-sidebar, .tax-product_cat .l-sidebar, .tax-product_flavor .l-sidebar, .tax-product_tag .l-sidebar { display: none !important; } /* サイドバーが消えた分、メインコンテンツを全幅に広げる */ .post-type-archive-products .l-main, .tax-product_cat .l-main, .tax-product_flavor .l-main, .tax-product_tag .l-main { display: block !important; } .post-type-archive-products .l-main__contents, .tax-product_cat .l-main__contents, .tax-product_flavor .l-main__contents, .tax-product_tag .l-main__contents { width: 100% !important; max-width: 100% !important; } /* SWELLがサイドバー有り時に付与する余白を打ち消す */ .post-type-archive-products .l-main__contents > *, .tax-product_cat .l-main__contents > *, .tax-product_flavor .l-main__contents > *, .tax-product_tag .l-main__contents > * { margin-inline: 0; } /* ================================================================ * SWELL TOC 非表示 * ================================================================ */ .pl-products-archive .p-toc, .pl-products-archive .swell-toc, .pl-products-archive [class*="toc"] { display: none !important; }