@charset "UTF-8";
/*
Theme Name: Elegance Cocoon Child
Template: cocoon-master
Version: 0.5.24
Author: Mstudio
Author URI: https://mstudio-web-create.com
Description: ELEGANCE Magazine 用 Cocoon 子テーマ。すまいるネット案件002（エンドクライアント: エレガンス）の WordPress コラム「ELEGANCE Magazine」用。
Text Domain: cocoon-child-elegance

Changelog:
  v0.5.24 (2026-06-01): 本番ドメイン化に伴うグローバルナビ外部リンク装飾の誤爆修正
    - 症状: 本番(www.e-elegance.jp)で TOP/カテゴリ含む全ナビ項目が
      ゴールド太字＋「↗」の外部リンク風表示に。koara(koara.matrix.jp)では正常だった。
    - 原因: ONLINE STORE(EC本体)を狙う a[href*="e-elegance.jp"] が、本番では
      内部リンクも同ドメインを含むため全ナビに誤爆。DBコンテンツ・HTMLは正常。
    - 修正: 全11セレクタに :not([href*="/apps/note"]) を付与し、note配下の
      内部リンクを除外。ECトップ(https://www.e-elegance.jp/ ・note を含まない)のみ装飾。
    - DB/記事/widget は不変更（CSSセレクタのみ）。
  v0.5.19 (2026-05-20): 著者プロフィール 装飾統一（フロント基準・社長指示）
    - 管理画面（Gutenberg）にだけ出ていた左 4px ゴールドボーダー / マーカー線を除去
    - .author-box の border-left: 4px solid var(--elegance-gold); を削除
      （フロントには元から出ていなかったため、エディタ側に揃えるのではなく
       「装飾なし＝フロント基準」に統一する社長判断）
    - CDO 仕様の「左 4px ゴールド罫線 既存維持」は不採用（社長指示優先）
    - 子テーマに editor-style.css を新規追加し、.author-box 内の
      marker / mark / highlight / AIOSEO リンクハイライト等を打ち消し
      （Cocoon は子テーマ/editor-style.css を自動で読み込む実装：
        cocoon-master/lib/settings.php L156-161）
    - 既存7記事の post_content には marker クラス等は無かったため DB 変更なし
  v0.5.18 (2026-05-20): 著者プロフィール 左右レイアウト化（CDO 仕様反映）
    - Foula 風 左右レイアウト：左 96x96 丸抜き画像 / 右 ラベル＋名前＋本文＋クレジット
    - h3「この記事の筆者」を廃止 → p.author-box__label に置換（Cocoon自動目次から除外）
    - 旧 .author-box__mark → .author-box__avatar にリネーム
    - 旧 <em>クレジット → p.author-box__credit に置換
    - !important 不使用（クラス連結セレクタで詳細度確保）
    - SP（〜767px）も左右レイアウト維持・画像 64x64 に縮小
    - block-patterns.php と既存7記事の post_content も同期書き換え
    - CDO 仕様書: .company/creative/proposals/elegance-magazine/2026-05-20-author-box-layout.md
  v0.5.17 (2026-05-20): Step 4 一括反映（寺澤様 GO 後）
    - 既存7記事を新2カテゴリ（techniques 2件 / basics 5件）に再分類
    - 旧カテゴリ「コラム」「SEO記事」削除（投稿カウント0で安全に削除）
    - 旧グロナビ taxonomy 項目（13/14）が消えたため再追加（db_id=70/71）
    - AIOSEO Lite (4.9.7.2) 導入 + タグアーカイブ全体 noindex 設定
      （aioseo_options_dynamic.searchAppearance.taxonomies.post_tag.advanced.robotsMeta）
    - パターン内末尾プロフィールエリアを新プロフィール文に統一（共通変数化）
      seo-full / seo-simple / column 3パターンとも author-box 共通化
      画像は elegance-mark.gif（アクセントロゴ）80x80 で表示
    - 既存7記事の post_content 末尾 author-box も同期書き換え
      （クレジット段落「記事提供: ◯◯氏」は保持）
    - テストタグ「テスト1」「テスト2」（term_id 6/7）削除
    - .author-box__mark 用の CSS 微調整を追加（中央寄せ・丸抜き）
  v0.5.16 (2026-05-20): 寺澤様 2026-05-20 確定方針の反映
    - 著者プロフィール画像をアクセントロゴ（elegance-mark.gif）に強制差し替え
      （functions.php に pre_get_avatar_data フィルタ追加）
    - 同時に CTO 側で WP-CLI 経由でカテゴリ2新設（techniques / basics）+ タグ22登録 +
      プロフィール文・表示名・ニックネーム更新 + グロナビラベル差し替えを実施
    - 既存7記事の新カテゴリへの付け替えは社長確認後（Step 4）
  v0.5.15 (2026-05-11): フッターロゴをヘッダーと同デザインに統一（社長指示）
    - フッター .logo-footer にもセリフ ELEGANCE + 筆記体 Magazine + マーク画像を適用
    - フッターは黒背景なので ELEGANCE は薄白 (#F5E8D0)、Magazine はゴールド維持
    - マーク画像はヘッダー追従時と同じ 38px でコンパクトに配置
    - 追従ヘッダー時もマーク画像を表示する仕様に変更（display: none を解除）
  v0.5.14 (2026-05-11): ヘッダーロゴ強化（寺澤様フィードバック対応）
    - 背景グラデ: ベージュ3段 → ピンク→ピーチ→ゴールド (#FFE8EE/#FAE6D9/#F5E8D0)
    - ロゴ "ELEGANCE" を Playfair Display (セリフ大文字)、"Magazine" を Allura (筆記体) に分離
    - エレガンス様シンボル（elegance-mark.gif）をロゴ左隣に配置
    - タグライン「美容サロン様のためのお役立ちマガジン」のフォントも整える
    - 追従ヘッダー (is-scrolled) 時はマーク画像を非表示にしてシンプル化
  v0.5.13 (2026-05-09): SP モバイルメニュー (.menu-drawer) をモダンに刷新
    - 背景を黒系グラデ #1A1A1A → #0F0F0F に（ヘッダー黒背景と統一）
    - メニュー項目を白文字、padding 1em 1.5em で余裕、区切り線 rgba白10%
    - hover/タップで薄ゴールド背景 + ゴールド文字 + 軽いインデント遷移
    - 閉じるボタン × をゴールドに統一
    - ONLINE STORE はゴールド+太字+矢印で強調（黒背景に映える）
  v0.5.12 (2026-05-09): フッタータイトルを少し大きく
    - .logo-footer .site-name-text font-size 1.0em → 1.2em
  v0.5.11 (2026-05-09): NAGIスキンの widget_categories/widget_archive の上点線を削除
    - 子テーマ側で .sidebar li に下点線を当てているため二重線になっていた
    - .widget_categories ul li a と .widget_archive ul li a の border-top を none で打ち消し
  v0.5.10 (2026-05-09): フッターロゴのサイズ縮小 + 背景透明化
    - タイトル font-size 1.4em → 1.0em（大きすぎたのを縮小）
    - .logo-text などに当たる Cocoon 親テーマの背景色を透明強制
      （タイトル周りのボックス状の薄色を解消）
    - padding も調整して周辺背景に溶け込ませる
  v0.5.9 (2026-05-09): フッターをヘッダーに合わせて黒系デザインに統一
    - #footer 全体を #1A1A1A の黒背景に
    - 上端に 3px ゴールドのアクセントボーダー
    - ロゴ/フッターナビ/リンクを白文字、hover でゴールド
    - コピーライトは薄白 (60%) で控えめな存在感
    - 上下 padding 確保で間延び感も解消
  v0.5.8 (2026-05-09): ONLINE STORE 外部リンク矢印 ↗ をテキスト寄りに
    - 旧: <a>::after で .caption-wrap の外側に矢印が出てしまい右寄り
    - 新: .item-label::after に変更してテキスト直後に表示
    - font-size 0.85em → 0.75em、margin-left 0.25em で詰める
  v0.5.7 (2026-05-09): タイトル↔サブタイトル間の余白を詰める
    - .site-name の margin-bottom / line-height を縮小
    - .tagline の margin-top / padding-top をほぼ0 に
    - .logo-header の上下パディングも少し詰めて間延び解消
  v0.5.6 (2026-05-09): 追従ヘッダー黒背景の確実化（JS連携）
    - Cocoon の追従ヘッダーは内部 JS で動的に背景を当てており
      CSS の !important だけでは上書きしきれなかった
    - functions.php に scroll 監視 JS を追加 → body.is-scrolled クラス付与
    - CSS で body.is-scrolled 配下のヘッダー要素を完全に黒+白に強制
    - これで Cocoon バージョン非依存でも確実に黒背景になる
  v0.5.5 (2026-05-09): 追従ヘッダーの背景統一
    - Cocoon の追従時クラス .hlt-tm-small が付いたとき、ロゴエリアが
      上層のベージュグラデ表示のままになっていた
    - 追従時は #header-container-in.hlt-tm-small を完全黒背景に
    - 追従時のサイト名・キャッチフレーズ色も白に切替
    - ナビ部分は元々黒なので変化なし（統一感が出る）
  v0.5.4 (2026-05-09): ヘッダー2層デザイン（foula-store.jp 参考）
    - 上層（タイトル・キャッチフレーズ）: ベージュ系斜めグラデ
      linear-gradient(135deg, #FDFBF6 → #F8F2E6 → #FCF5E6)
    - 下層（ナビメニュー）: ダーク背景 #222222 + 白テキスト
    - メニュー項目間に rgba(255,255,255,.15) の縦区切り線
    - hover: ゴールド色 + 微淡背景
    - ONLINE STORE は既存のゴールド色を維持
  v0.5.3 (2026-05-09): CTA / 商品ボタンの高さを抑えてシャープに
    - .elegance-cta-button の padding を 0.9em 2em → 0.55em 1.8em
    - wp-block-button__link 側にも line-height: 1.5 を明示
    - 商品紹介カードの「商品ページを見る」ボタンの間延びを解消
  v0.5.2 (2026-05-09): bold テキストにマーカー装飾を追加
    - 段落・リスト内の <strong> / <b> に明るい黄色のマーカー風背景
    - linear-gradient(transparent 55%, rgba(255,235,130,0.65) 55%) で下半分のみ着色
    - 蛍光ペン風の明るさ（社長承認: 明るい黄色寄り）
    - 商品カード・著者ボックス・見出し内の strong は除外（装飾競合回避）
  v0.5.1 (2026-05-09): セキュリティ強化 — 作者情報の漏洩対策
    - 記事ページ末尾の「✏ <ユーザー名>」リンクを CSS で非表示
      （.author-info / .post-author / a[rel="author"] / .entry-meta-info-author 等）
    - functions.php で以下を無効化（横展開可能）:
      ・/?author=N → 404
      ・/author/<slug>/ → 404
      ・/wp-json/wp/v2/users → REST endpoint 削除
      ・/wp-json/wp/v2/users/<id> → REST endpoint 削除
      ・oEmbed / RSS / posts REST レスポンスから author 情報除去
    - 横展開ナレッジ: engineering/docs/wordpress-author-disclosure-mitigation.md
  v0.5.0 (2026-05-09): 目次→アンカーリンク遷移時のヘッダー被り対策
    - html { scroll-padding-top: 80px; } で全アンカージャンプにオフセット適用
    - モバイル（〜768px）は scroll-padding-top: 64px
    - 念のため .entry-content h2/h3 にも scroll-margin-top を併用（保険）
    - scroll-behavior: smooth で滑らかスクロール
    - Cocoon の追従ヘッダー（#header-container-in 固定60px）に対応
  v0.4.9 (2026-05-09): 目次（INDEX）幅をメインエリア幅いっぱいに修正
    - Cocoon の .toc-center クラスが max-width 制限で目次を縮めていた
    - width:auto / max-width:none / display:block で強制解除
    - .toc .toc-content（内側コンテナ）にも保険で同設定
    - margin を 2.4em 0 に変更（左右ネガティブマージン廃止、本文と同幅）
  v0.4.8 (2026-05-09): 目次（INDEX）デザインをエレガントに刷新
    - 背景をベージュグラデに（#FDFBF6 → #F8F2E6）。グレーから暖色系へ
    - 横幅を本文より 16px ずつ広げて視覚的存在感を強化
    - タイトル: ゴールドダーク文字 + ゴールド太下線（2px）
    - リスト番号: ::marker をゴールドダークに（ブランド連続性）
    - ホバー: ゴールド色 + ゴールド下線
    - うっすらゴールドの shadow で立体感
  v0.4.7 (2026-05-08): 商品カードの wp:image invalid エラー修正
    - assets/product-placeholder.svg 新規追加
      （600x600 / 背景 #F9F9F9 / ベージュ系 #BBA89A 破線ボーダー / 「商品画像」「クリックして
       画像を置換してください」の2行テキスト）
    - block-patterns.php の elegance/product-card で wp:image に <img src=".../product-placeholder.svg">
      を含める形に修正。空 <figure></figure> だと管理画面で
      「このブロックには想定されていないか無効なコンテンツが含まれています」エラーになる問題を解消
    - 既存7記事（ID 20,26,27,28,29,30,31）の空 <figure class="wp-block-image elegance-product-card__image"></figure>
      を mariadb 直 UPDATE 経由で <img> 入りに置換
      （前回 v0.4.6 の WP-CLI 経由データロス事故の再発防止策に基づく / 各記事 pre スナップショット保管）
    - 寺澤様/エレガンス様は画像をクリック →「置換」ボタンで本画像にアップロード可能
    - 本番（さくらサーバー）移行時は localhost URL を grep で一括置換する想定
  v0.4.6 (2026-05-08): 商品カード/CTA を wp:html → 標準ブロック化
    - inc/block-patterns.php: 商品紹介カードの画像エリアを wp:image に、
      ボタンを wp:buttons に変更。CTAブロックも wp:buttons（中央寄せ）に。
    - 寺澤様/エレガンス様が管理画面のエディタで完全GUI操作できるよう改善
      （カスタムHTMLブロックでコードが見えていた問題を解消）。
    - CSS: wp-block-button__link / figure.wp-block-image 形式の DOM にも
      装飾が当たるようセレクタを追加（既存の .elegance-cta-button 直接
      スタイルは v0.2.0 互換のため残置）。
    - 既存7記事（ID 20,26,27,28,29,30,31）の post_content も同形式に
      一括置換済み（scripts/migrate-product-card-cta-to-blocks.py）。
  v0.4.5 (2026-05-08): 記事一覧カードを foula-store.jp 風に
    - functions.php の `entry_card_snippet_after` フックでタグピル群を出力
      （Cocoon 親テーマ tmp/entry-card.php のフックに乗る形でテンプレ override 不要）
    - 一覧カードのメタ情報レイアウトを「日付 + カテゴリラベル + タイトル + タグピル」に
      整列。カテゴリラベルをゴールド系ピル、タグをダークグレー #プレフィックス付きに統一。
    - 対象: トップ / カテゴリ / タグ / 検索 / アーカイブ。個別記事ページには影響なし。
  v0.4.4 (2026-05-08): h2/h3 装飾を Cocoon 親テーマに対して強制適用
    - .entry-content h2 / h3 の border・background・font 系プロパティに
      !important を追加。Cocoon は CSS 読み込みを「子→親」の順にする特殊仕様で、
      これまでの子テーマ装飾が親テーマの h2/h3 デフォルトに打ち消されていた。
    - これでフロント表示でも h2 ゴールド下線、h3 ベージュ左ボーダーが
      確実に当たる（管理画面の見た目との乖離を解消）。
  v0.4.3 (2026-05-08): 部品パターン4種類を追加
    - elegance/section-h2 / section-h3 / faq-pair / list-section
    - 記事執筆中に「ブロック挿入 + → パターン → ELEGANCE Magazine」から
      呼び出して、章・節・FAQ・箇条書きを増やせるようにした。
    - 寺澤様/エレガンス様への運用説明が「部品を選ぶだけ」で済むようにする狙い。
  v0.4.0 (2026-05-08): Cocoon 管理画面ファースト方針に転換・最小CSSのみ追加
    - 方針: 「Cocoon設定で対応できる項目はCSS化しない」を徹底。
      → 目次/SNSシェア/関連記事/パンくず/著者プロフィール/タイトル区切り/フッター
        クレジット/OGP fallback などは Cocoon 管理画面に逃がし、CSS は触らない。
      → engineering/docs/elegance-cocoon-admin-checklist.md に集約。
    - C-1: タグクラウド/記事タグの色だけブランド色に上書き（最小限）
    - C-3: .elegance-member-price-badge（会員価格バッジ）追加
           Cocoon に該当機能なしのため子テーマ側で実装。AA未達対策で
           font-weight: 700 + 1em 相当のサイズで補強。
    - C-6: Cocoon 標準 FAQブロックの装飾は触らない（管理画面に逃がす）
    - functions.php は OGP 関連は無変更（Cocoon設定 → OGP に委譲）
    - [elegance_ec_banner] ショートコードを画像バナーモード対応に拡張
      → image 属性追加で「リンク付き一枚バナー」を複数登録可能に。互換維持。
    - ECバナー複数登録の推奨運用を **WP標準「画像ウィジェット」/「画像ブロック」**
      に切替（エンドクライアントでも完全GUIで運用可能）。
      → CSS .sidebar .widget_media_image / .sidebar .wp-block-image を
        .elegance-ec-banner--image と同じ装飾セレクタに追加。
      → ショートコード方式は「カスタムHTMLウィジェット」運用として併用可。
    - サイドバー各ウィジェットの **カード枠（白背景・1px線・角丸）を撤去**
      してフラット化。区切りは margin-bottom + 見出しゴールド下線で成立。
      → 画像ウィジェットは個別セレクタで角丸6px・hover浮き効果を維持。
  v0.3.0 (2026-05-05): M4 コラムTOPレイアウト + Cocoon .wrap レスポンシブ修正
  v0.2.0 (2026-05-01): M2 ブランドカラー反映（h2/h3/CTA/商品カード/プロフィール）
*/

/* v0.5.2: bold テキストにマーカー装飾
 * 段落・リスト内の <strong>/<b> をゴールド系マーカー（下半分に色）に。
 * linear-gradient で「上 55% 透明 / 下 45% 薄ゴールド」= テキスト下半分マーカー。
 * 商品カード/著者プロフィール/見出し内の strong は除外（装飾競合回避）。
 * 適度な余白を入れて読みやすさ確保。 */
.entry-content p strong,
.entry-content p b,
.entry-content li strong,
.entry-content li b,
.article p strong,
.article p b,
.article li strong,
.article li b {
  background: linear-gradient(transparent 55%, rgba(255, 235, 130, 0.65) 55%) !important;
  /* 明るい黄色（蛍光ペン風）: rgba(255, 235, 130, 0.65)
     必要なら #FFEB82 系の濃淡で調整 */
  font-weight: 700 !important;
  padding: 0 0.08em !important;
}

/* 装飾を入れたくない箇所は明示的に解除
 * - 商品紹介カード（既にゴールドバッジ等あり）
 * - 著者プロフィールボックス（編集部名の strong など）
 * - h2/h3/h4 見出し内の strong */
.entry-content .elegance-product-card p strong,
.entry-content .elegance-product-card p b,
.entry-content .author-box p strong,
.entry-content .author-box p b,
.entry-content h2 strong,
.entry-content h2 b,
.entry-content h3 strong,
.entry-content h3 b,
.entry-content h4 strong,
.entry-content h4 b {
  background: none !important;
  padding: 0 !important;
}

/* v0.5.1: セキュリティ — 作者情報の表示を非表示に
 * 記事ページ末尾の「✏ <ユーザー名>」リンクや、ヘッダーメタ情報の
 * 投稿者リンクを CSS で除去。functions.php 側で REST API も閉じる。
 * Cocoon の各種クラスを網羅的にカバー。 */
.entry-meta-info-author,
.author-info,
.post-author,
.entry-author-name,
.entry-author-link,
.author-link,
a[rel="author"],
.fa-pencil + a,
.fa-edit + a {
  display: none !important;
}
/* Cocoon のメタ情報内の作者表示
 * Cocoon は .post-info > .post-meta > .author などを使うことがある
 * Cocoon設定 → 投稿 → 「投稿者の表示」OFF が本筋だが、CSSでも保険 */
.post-info .author,
.entry-meta .author,
.byline,
.entry-meta-author {
  display: none !important;
}

/* v0.5.0: アンカーリンク遷移時の追従ヘッダー被り対策
 * Cocoon の追従ヘッダー (#header-container-in) は position:fixed で 60px 占有。
 * 目次 → 見出し ジャンプ時にヘッダー裏に見出しが隠れるのを防ぐ。
 * scroll-padding-top: スクロールコンテナ全体に効くオフセット
 * scroll-behavior:    アンカー遷移を滑らかに */
html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}
@media (max-width: 768px) {
  html {
    scroll-padding-top: 64px;
  }
}
/* 念のため見出し個別にも scroll-margin-top を当てる（保険）*/
.entry-content h2,
.entry-content h3,
.entry-content h4,
.article h2,
.article h3,
.article h4 {
  scroll-margin-top: 80px;
}
@media (max-width: 768px) {
  .entry-content h2,
  .entry-content h3,
  .entry-content h4 {
    scroll-margin-top: 64px;
  }
}

/* M2: ブランドカラー（社長承認 2026-05-01 / e-elegance.jp サンプリング基準）
 * 詳細: .company/clients/sumai-net/projects/002-elegance-wp-column/notes/02-brand-color-sampling.md */
:root {
  --elegance-gold: #CAAF68;        /* メインアクセント（h2下線・CTA・hover） */
  --elegance-gold-dark: #B5994F;   /* CTA hover 用に少し暗いゴールド */
  --elegance-beige: #BBA89A;       /* サブアクセント（h3左ボーダー・引用枠） */
  --elegance-text: #333333;
  --elegance-bg: #FFFFFF;
  --elegance-surface: #F9F9F9;
  --elegance-line: #EEEEEE;
  --elegance-sub-text: #777777;
}

/* M2: 本文ベース */
body,
.entry-content {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  color: var(--elegance-text);
}
.entry-content {
  line-height: 1.9;
  font-size: 16px;
}
.entry-content p {
  margin: 1.4em 0;
}

/* M2: h2 — グレー帯を潰してゴールド下線
 * Cocoon 親テーマは「子テーマ → 親テーマ」の順にCSSを読むため、
 * Cocoon 標準の h2 装飾（背景帯・上下ボーダーなど）に確実に勝つには
 * !important が必須。v0.4.4 で全プロパティに付与。 */
.entry-content h2,
.article h2,
article h2 {
  position: relative;
  margin: 2.4em 0 1.2em !important;
  padding: 0 0 0.5em 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 3px solid var(--elegance-gold) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--elegance-text) !important;
  font-size: 1.6em !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}
.entry-content h2::before,
.entry-content h2::after,
.article h2::before,
.article h2::after,
article h2::before,
article h2::after {
  content: none !important;
  display: none !important;
}

/* M2: h3 — ベージュ左ボーダー
 * h2 と同じ理由で !important 付与（v0.4.4） */
.entry-content h3,
.article h3,
article h3 {
  margin: 2em 0 1em !important;
  padding: 0.2em 0 0.2em 0.8em !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-left: 4px solid var(--elegance-beige) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--elegance-text) !important;
  font-size: 1.3em !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}
.entry-content h3::before,
.entry-content h3::after,
.article h3::before,
.article h3::after,
article h3::before,
article h3::after {
  content: none !important;
  display: none !important;
}

.entry-content h4 {
  margin: 1.6em 0 0.8em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--elegance-text);
}

/* M2: リンク */
.entry-content a {
  color: var(--elegance-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.entry-content a:hover,
.entry-content a:focus {
  color: var(--elegance-gold);
}

/* M2: 引用枠 */
.entry-content blockquote {
  margin: 1.6em 0;
  padding: 1em 1.4em;
  background: var(--elegance-surface);
  border-left: 4px solid var(--elegance-beige);
  color: var(--elegance-text);
  font-style: normal;
}

/* M2: 目次（INDEX）— v0.4.8 でエレガントに刷新（v0.4.9 で幅修正）
 * 設計: ELEGANCE のブランドカラー（ゴールド + ベージュ）を活かして
 *       「読みたくなる目次」へ。グレー背景は廃止、暖色グラデで上品に。
 * 注意: Cocoon の .toc-center は max-width 制限で幅を縮める仕様 →
 *       width:auto / max-width:none / display:block で強制解除。
 * Cocoon 親テーマとの優先度競合に勝つため !important 多用。 */
.toc,
#toc,
.article .toc,
.cocoon-block-toc {
  width: auto !important;                    /* リストサイズで縮まないように */
  max-width: none !important;                /* Cocoon の .toc-center 等の制限解除 */
  display: block !important;                 /* インライン化を防ぐ */
  float: none !important;
  box-sizing: border-box !important;
  margin: 2.4em 0 !important;                /* メインエリア幅いっぱい */
  padding: 1.6em 1.8em !important;
  background: linear-gradient(135deg, #FDFBF6 0%, #F8F2E6 100%) !important;
  border: 1px solid rgba(202, 175, 104, 0.18) !important;  /* ゴールドのうっすら枠 */
  border-left: 4px solid var(--elegance-gold) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 12px rgba(202, 175, 104, 0.10) !important;
}

/* 内側コンテナ .toc-content にも幅制限がかかっている場合の保険 */
.toc .toc-content,
#toc .toc-content {
  width: auto !important;
  max-width: none !important;
}

/* スマホでは padding を少し詰める */
@media (max-width: 600px) {
  .toc,
  #toc,
  .article .toc,
  .cocoon-block-toc {
    padding: 1.4em 1.4em !important;
  }
}

.toc .toc-title,
#toc .toc-title,
.cocoon-block-toc .toc-title {
  margin: 0 0 0.9em !important;
  padding: 0 0 0.5em !important;
  border-bottom: 2px solid var(--elegance-gold) !important;
  color: var(--elegance-gold-dark) !important;
  font-weight: 700 !important;
  font-size: 1.15em !important;
  letter-spacing: 0.06em !important;
}

.toc ol, .toc ul,
#toc ol, #toc ul,
.cocoon-block-toc ol, .cocoon-block-toc ul {
  list-style: decimal !important;
  margin: 0 !important;
  padding-left: 1.8em !important;
}

/* リスト番号をゴールドダークに（::marker でブラウザ標準の番号色を変える） */
.toc ol li::marker,
.toc ul li::marker,
#toc ol li::marker,
.cocoon-block-toc ol li::marker {
  color: var(--elegance-gold-dark) !important;
  font-weight: 700 !important;
}

.toc ol ol, .toc ul ul,
#toc ol ol, #toc ul ul,
.cocoon-block-toc ol ol {
  list-style: lower-alpha !important;
  padding-left: 1.6em !important;
  margin-top: 0.4em !important;
}

.toc li,
#toc li,
.cocoon-block-toc li {
  margin: 0.45em 0 !important;
  line-height: 1.8 !important;
}

.toc a,
#toc a,
.cocoon-block-toc a {
  color: var(--elegance-text) !important;
  text-decoration: none !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
  border-bottom: 1px solid transparent !important;
}

.toc a:hover,
.toc a:focus,
#toc a:hover,
.cocoon-block-toc a:hover {
  color: var(--elegance-gold-dark) !important;
  text-decoration: none !important;
  border-bottom-color: var(--elegance-gold) !important;
}

/* M2: CTA ボタン（.elegance-cta-button を CTA パターンで使う） */
.elegance-cta {
  margin: 2em 0;
  padding: 1.6em 1.4em;
  background: var(--elegance-surface);
  border: 1px solid var(--elegance-line);
  border-radius: 6px;
  text-align: center;
}

.elegance-cta p {
  margin: 0 0 1em;
  color: var(--elegance-text);
}

.elegance-cta-button,
.entry-content a.elegance-cta-button {
  display: inline-block;
  padding: 0.55em 1.8em;  /* v0.5.3: 高さを抑えてシャープに（旧: 0.9em 2em）*/
  background: var(--elegance-gold);
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.elegance-cta-button:hover,
.elegance-cta-button:focus,
.entry-content a.elegance-cta-button:hover {
  background: var(--elegance-gold-dark);
  color: #FFFFFF;
  text-decoration: none;
}

/* v0.4.6: 標準ボタンブロック (wp:buttons + wp:button) への対応。
 * 新形式の DOM:
 *   <div class="wp-block-button elegance-cta-button">
 *     <a class="wp-block-button__link">…</a>
 *   </div>
 * 上の v0.2.0 ルールは <a> 直書きを想定していたので、wp-block-button__link
 * 側にもゴールドボタン装飾が当たるようセレクタを追加。Cocoon 親テーマの
 * .wp-block-button__link デフォルト装飾に勝つために、背景・色は !important で確定。 */
.elegance-cta-button .wp-block-button__link,
.wp-block-button.elegance-cta-button .wp-block-button__link,
.entry-content .elegance-cta-button .wp-block-button__link {
  display: inline-block;
  padding: 0.55em 1.8em !important;  /* v0.5.3: 高さを抑えてシャープに */
  background: var(--elegance-gold) !important;
  color: #FFFFFF !important;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  line-height: 1.5 !important;
  transition: background 0.2s ease;
}
.elegance-cta-button .wp-block-button__link:hover,
.elegance-cta-button .wp-block-button__link:focus,
.entry-content .elegance-cta-button .wp-block-button__link:hover {
  background: var(--elegance-gold-dark) !important;
  color: #FFFFFF !important;
  text-decoration: none;
}

/* M2: 商品紹介カード（画像＋商品名＋価格＋説明＋ボタン） */
.elegance-product-card {
  margin: 2em 0;
  padding: 1.4em;
  background: var(--elegance-bg);
  border: 1px solid var(--elegance-line);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  align-items: flex-start;
}

.elegance-product-card__image { flex: 0 0 200px; max-width: 200px; }
.elegance-product-card__image img { width: 100%; height: auto; border-radius: 4px; }
/* v0.4.6: wp:image 形式（figure.wp-block-image.elegance-product-card__image）
 * および wp:image を内包する商品カードにも同サイズ・同装飾が当たるよう
 * セレクタを追加。figure のデフォルト margin もリセット。 */
figure.elegance-product-card__image,
.elegance-product-card .wp-block-image {
  flex: 0 0 200px;
  max-width: 200px;
  margin: 0;
}
figure.elegance-product-card__image img,
.elegance-product-card .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.elegance-product-card__body { flex: 1 1 260px; }
.elegance-product-card__name {
  margin: 0 0 0.4em;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--elegance-text);
}
.elegance-product-card__price {
  margin: 0.4em 0;
  color: var(--elegance-gold-dark);
  font-weight: 700;
}
.elegance-product-card__desc {
  margin: 0.6em 0 1em;
  color: var(--elegance-text);
  font-size: 0.95em;
  line-height: 1.7;
}
@media (max-width: 600px) {
  .elegance-product-card { flex-direction: column; }
  .elegance-product-card__image,
  figure.elegance-product-card__image,
  .elegance-product-card .wp-block-image {
    flex-basis: auto;
    max-width: 100%;
  }
}

/* M2: アイキャッチ No Image プレースホルダ */
.no-eyecatch,
.eye-catch.no-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 630;
  background: var(--elegance-surface);
  border: 1px dashed var(--elegance-beige);
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-eyecatch::after,
.eye-catch.no-image::after {
  content: "No Image";
  color: var(--elegance-sub-text);
  font-size: 1.1em;
  letter-spacing: 0.08em;
}

/* ===========================================================
 * M2.1: 著者プロフィールボックス 左右レイアウト
 * v0.5.18 / 2026-05-20
 * CDO 仕様書 .company/creative/proposals/elegance-magazine/
 *   2026-05-20-author-box-layout.md
 * ----------------------------------------------------------
 * 旧 .author-box__mark（中央寄せ縦積み）から
 *   左:丸抜き画像 / 右:ラベル＋名前＋本文＋クレジット に再構成。
 * h3 を廃止し p.author-box__label に置換（Cocoon自動目次から除外）。
 * !important 不使用（クラス連結セレクタで詳細度確保）。
 * =========================================================== */

.author-box,
.entry-author {
  margin: 3em 0 2em;
  padding: 1.6em 1.8em;
  background: var(--elegance-surface);
  border: 1px solid var(--elegance-line);
  /* v0.5.19: 左 4px ゴールドボーダーを削除（フロント基準・社長指示）
     旧: border-left: 4px solid var(--elegance-gold); */
  border-radius: 4px;

  /* 左右レイアウト */
  display: flex;
  gap: 1.4em;
  align-items: flex-start;
}

/* 左カラム：丸抜き画像（96x96） */
.author-box .author-box__avatar,
.author-box figure.author-box__avatar {
  flex: 0 0 96px;
  margin: 0;
  text-align: left;
}
.author-box .author-box__avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--elegance-line);
  background: #fff;
}

/* 右カラム：テキスト群 */
.author-box .author-box__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* 「この記事の筆者」ラベル（h3 代替・Cocoon自動目次から除外） */
.author-box .author-box__label {
  margin: 0 0 0.3em;
  font-size: 0.78em;
  letter-spacing: 0.08em;
  color: var(--elegance-gold-dark);
  font-weight: 600;
}

/* 編集部名（中見出し相当） */
.author-box .author-box__name {
  margin: 0 0 0.6em;
  font-size: 1.08em;
  line-height: 1.5;
  color: var(--elegance-text);
  font-weight: 700;
}
.author-box .author-box__name strong {
  font-weight: 700; /* Cocoon 既定の strong 装飾を上書き */
}

/* プロフィール本文 */
.author-box .author-box__bio {
  margin: 0 0 0.8em;
  font-size: 0.92em;
  line-height: 1.8;
  color: var(--elegance-text);
}

/* 記事提供クレジット（旧 <em> の置換先） */
.author-box .author-box__credit {
  margin: 0;
  font-size: 0.8em;
  color: var(--elegance-sub-text);
}

/* 旧 em クレジットは廃止予定（互換のため一時的に残す） */
.author-box em {
  display: inline-block;
  margin: 0;
  font-size: 0.8em;
  color: var(--elegance-sub-text);
  font-style: normal;
}

/* ===== SP（〜767px）===== */
@media (max-width: 767px) {
  .author-box,
  .entry-author {
    padding: 1.3em 1.2em;
    gap: 1em;
  }
  .author-box .author-box__avatar,
  .author-box figure.author-box__avatar {
    flex: 0 0 64px;
  }
  .author-box .author-box__avatar img {
    width: 64px;
    height: 64px;
  }
  .author-box .author-box__name {
    font-size: 1em;
  }
  .author-box .author-box__bio {
    font-size: 0.88em;
    line-height: 1.75;
  }
}

/* ===========================================================
 * M4: コラムTOPレイアウト（v0.3.0 / 2026-05-05）
 * 仕様書 §3-1, §7。Cocoon 標準構造に乗せて装飾のみ。
 * =========================================================== */

/* （旧 .elegance-hero CSS は削除：ヒーロー方針撤回 / 2026-05-05）
 * Cocoon標準のキャッチフレーズ機能で代替するため、子テーマ側に独自ヒーローCSSは不要。
 */

/* --- カード型記事一覧（Cocoon標準を尊重し、ブランド色だけ上乗せ） ---
 * 方針: レイアウト（列数・幅・余白）は Cocoon設定 → インデックス / メインカラム に委譲。
 * ここでは hover の浮きとカテゴリラベルのゴールド化のみ追加する。
 */
.list .a-wrap {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.list .a-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.list .entry-card-thumb,
.list .card-thumb {
  background: var(--elegance-surface);
}
.list .entry-card-thumb img,
.list .card-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.list .entry-card-thumb-noimage::after,
.list .no-image::after {
  content: "No Image";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--elegance-surface);
  color: var(--elegance-sub-text);
  font-size: 0.95em;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--elegance-line);
}
.list .entry-card-title,
.list .card-title {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--elegance-text);
  margin: 0.4em 0;
}
.list .cat-label,
.list .category-label {
  background: var(--elegance-gold);
  color: #FFFFFF;
  border-radius: 2px;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  padding: 0.2em 0.6em;
}
.list .post-date {
  color: var(--elegance-sub-text);
  font-size: 0.8em;
}

/*
 * カード一覧の列数・幅・余白の制御は Cocoon 管理画面に委譲（2026-05-05 方針転換）。
 * ・Cocoon設定 → インデックス → カードの列数（3列など）
 * ・Cocoon設定 → メインカラム → メインコンテンツ幅・余白
 * 子テーマで grid を強制すると Cocoon 設定が効かなくなるため、ここでは何もしない。
 */

/* --- ページネーション --- */
.pagination .page-numbers {
  display: inline-block;
  min-width: 2.4em;
  padding: 0.5em 0.8em;
  margin: 0 0.2em;
  border: 1px solid var(--elegance-line);
  border-radius: 3px;
  background: var(--elegance-bg);
  color: var(--elegance-text);
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.pagination .page-numbers:hover {
  background: var(--elegance-surface);
  color: var(--elegance-gold);
}
.pagination .page-numbers.current {
  background: var(--elegance-gold);
  border-color: var(--elegance-gold);
  color: #FFFFFF;
  font-weight: 700;
}

/* --- サイドバー ---
 * 各ウィジェットの「カード枠」（白背景 + 1px線 + 角丸）を撤去してフラット化。
 * セクション区切りは margin-bottom（縦余白）+ 見出しのゴールド下線だけで成立させる。
 * 画像ウィジェット（.widget_media_image）は別セレクタで角丸6px・hover浮きを維持。
 */
#sidebar .widget,
.sidebar .widget {
  margin-bottom: 1.8em;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
#sidebar .widget h3,
.sidebar .widget h3,
#sidebar .widget-sidebar-title {
  margin: 0 0 0.8em;
  padding: 0 0 0.5em;
  font-size: 1em;
  font-weight: 700;
  color: var(--elegance-text);
  letter-spacing: 0.04em;
}
#sidebar ul,
.sidebar ul { margin: 0; padding: 0; list-style: none; }
#sidebar li,
.sidebar li {
  padding: 0.5em 0;
  border-bottom: 1px dotted var(--elegance-line);
}
#sidebar li:last-child,
.sidebar li:last-child { border-bottom: none; }

/* v0.5.11: NAGIスキンの widget_categories / widget_archive 上点線を削除
 * 子テーマ側で li の下点線が当たっているため、NAGI の border-top と二重になっていた */
.widget_categories ul li a,
.widget_archive ul li a {
  border-top: none !important;
}
#sidebar a,
.sidebar a { color: var(--elegance-text); text-decoration: none; }
#sidebar a:hover,
.sidebar a:hover { color: var(--elegance-gold); }
#sidebar .search-form input[type="search"],
.sidebar .search-form input[type="search"] {
  width: 100%;
  padding: 0.6em 0.8em;
  border: 1px solid var(--elegance-line);
  border-radius: 3px;
}
#sidebar .search-form button,
.sidebar .search-form button {
  background: var(--elegance-gold);
  color: #FFFFFF;
  border: none;
  border-radius: 3px;
  padding: 0.6em 1em;
  cursor: pointer;
}

/* --- ECサイトテキストバナー（仕様書 §7 / 画像なしで成立） --- */
.elegance-ec-banner {
  display: block;
  padding: 1.6em 1.2em;
  background: linear-gradient(135deg, var(--elegance-gold) 0%, var(--elegance-gold-dark) 100%);
  border-radius: 4px;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.elegance-ec-banner:hover,
.elegance-ec-banner:focus {
  opacity: 0.9;
  color: #FFFFFF;
  text-decoration: none;
}
.elegance-ec-banner__label {
  display: block;
  font-size: 0.8em;
  letter-spacing: 0.18em;
  margin-bottom: 0.4em;
  opacity: 0.85;
}
.elegance-ec-banner__title {
  display: block;
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.8em;
}
.elegance-ec-banner__cta {
  display: inline-block;
  padding: 0.5em 1.2em;
  background: #FFFFFF;
  color: var(--elegance-gold-dark);
  font-size: 0.85em;
  font-weight: 700;
  border-radius: 3px;
}

/* --- ECサイト画像バナー（複数縦並び対応） ---
 * 推奨運用: WP標準「画像ウィジェット」(.widget_media_image) または
 *          ブロックウィジェット「画像」(.wp-block-image) を複数並べる。
 *          → メディアライブラリから画像選択 + リンクURL入力 だけで完結。
 *          → ショートコード/HTML 不要、エンドクライアントでも運用可能。
 *
 * 互換: ショートコード [elegance_ec_banner image="..." href="..." alt="..."]
 *      も併用可（.elegance-ec-banner--image セレクタで同じ装飾を適用）。
 */
.sidebar .widget_media_image,
.sidebar .wp-block-image,
.elegance-ec-banner--image {
  padding: 0;
  background: none;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  line-height: 0; /* img 下の余白除去 */
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sidebar .widget_media_image:hover,
.sidebar .wp-block-image:hover,
.elegance-ec-banner--image:hover,
.elegance-ec-banner--image:focus {
  opacity: 0.92;
  transform: translateY(-2px);
}
.sidebar .widget_media_image a,
.sidebar .wp-block-image a {
  display: block;
}
.sidebar .widget_media_image img,
.sidebar .wp-block-image img,
.elegance-ec-banner--image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/* ブロック画像のキャプション(figcaption)が出る場合の調整 */
.sidebar .wp-block-image figcaption {
  line-height: 1.5;
  font-size: 0.85em;
  text-align: center;
  margin-top: 4px;
  color: var(--elegance-text);
}

/* ===========================================================
 * v0.5.4: ヘッダー2層デザイン（foula-store.jp/column/ 参考）
 * 上層: タイトル・キャッチフレーズ → ベージュ系斜めグラデ
 * 下層: グローバルナビ → ダーク背景 + 白テキスト
 * =========================================================== */

/* === 上層: ヘッダー（タイトル + キャッチフレーズ） === */
/* v0.5.14: ピンク→ピーチ→ゴールドのグラデ（寺澤様 FB 対応）
 *   - エレガンス様ブランド（ピンク・ベージュ）に沿いつつ華やかさを担保
 *   - 参考 foula は「ピンク→クリーム」直線方向、こちらは3色 + ゴールド寄りで差別化 */
#header,
#header-container,
.header {
  background: linear-gradient(135deg, #FFE8EE 0%, #FAE6D9 50%, #F5E8D0 100%) !important;
}

/* v0.5.14: ヘッダー内側に上下余白（社長指示 2026-05-11） */
.header-in {
  padding: 16px 0 !important;
}

/* v0.5.7: タイトル ↔ サブタイトル間の間延び解消 */
.logo-header {
  padding-top: 0.2em !important;
  padding-bottom: 0.1em !important;
}
.logo-header .site-name,
.logo-header .site-name-text-link,
#header .site-name,
#header .site-name-text-link {
  margin-bottom: 0.25em !important;
  padding-bottom: 0 !important;
  line-height: 1.3 !important;
}
.logo-header .site-name-text,
#header .site-name-text {
  line-height: 1.3 !important;
}
.logo-header .tagline,
.logo-header .tagline-message,
#header .tagline,
#header .tagline-message {
  margin-top: 0.25em !important;
  padding-top: 0 !important;
  line-height: 1.5 !important;
}

/* タイトル / キャッチフレーズの色（ELEGANCE のテキストカラー維持） */
#header .site-name,
#header .site-name a,
#header .tagline,
.site-name-text,
.tagline-message {
  color: var(--elegance-text) !important;
}

/* === v0.5.14 + v0.5.15: ロゴ強化（ヘッダー + フッター共通） ===
 *   - "ELEGANCE" = Playfair Display (セリフ・大文字)
 *   - "Magazine" = Allura (筆記体)
 *   - elegance-mark.gif をロゴ左隣にアクセント配置
 *   - タグラインも欧文セリフ + 字間で気品アップ
 *   - 分割は functions.php セクション 8 の JS で実施
 *   - v0.5.15: フッター .logo-footer にも同デザインを適用 */

.logo-header .site-name-text-link,
.logo-footer .site-name-text-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5em !important;
  text-decoration: none !important;
  flex-wrap: nowrap !important;
}

/* エレガンス様シンボル（profile.gif 由来） */
.logo-header .elegance-mark {
  width: 55px !important;
  height: 55px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
}
/* v0.5.15: フッターは黒背景 / 小さめ 38px で配置 */
.logo-footer .elegance-mark {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* "ELEGANCE" ＝ Playfair Display セリフ大文字 */
.logo-header .logo-elegance-en,
.logo-footer .logo-elegance-en {
  font-family: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', serif !important;
  font-weight: 700 !important;
  font-size: 1.05em !important;
  letter-spacing: 0.12em !important;
  color: #1A1A1A !important; /* 黒（社長指示 2026-05-11） */
  text-transform: uppercase;
  line-height: 1 !important;
  display: inline-block;
}
/* v0.5.15: フッターは黒背景なので薄白で視認性確保 */
.logo-footer .logo-elegance-en {
  color: #F5E8D0 !important;
}

/* "Magazine" ＝ Allura 筆記体 */
.logo-header .logo-magazine-en,
.logo-footer .logo-magazine-en {
  font-family: 'Allura', 'Pinyon Script', 'Brush Script MT', cursive !important;
  font-weight: 400 !important;
  font-size: 1.85em !important;
  letter-spacing: 0.01em !important;
  color: #C9A06B !important; /* 控えめゴールド */
  line-height: 1 !important;
  position: relative;
  top: 0.08em;
  margin-left: -0.05em;
  display: inline-block;
}
/* v0.5.15: フッターはより明るめゴールドで黒背景に映える */
.logo-footer .logo-magazine-en {
  color: var(--elegance-gold) !important;
}

/* タグライン: 欧文セリフ + 字間広めで上品 */
.logo-header .tagline,
#header .tagline,
.tagline-message {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', 'Yu Mincho', serif !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.22em !important;
  color: #6B5B4F !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

/* タブレット・スマホ調整 */
@media (max-width: 768px) {
  .logo-header .elegance-mark {
    width: 34px !important;
    height: 34px !important;
  }
  .logo-header .logo-elegance-en {
    font-size: 0.9em !important;
    letter-spacing: 0.08em !important;
  }
  .logo-header .logo-magazine-en {
    font-size: 1.5em !important;
  }
  .logo-header .tagline,
  #header .tagline,
  .tagline-message {
    font-size: 0.82rem !important;
    letter-spacing: 0.15em !important;
  }

  /* v0.5.15: SP版フッターロゴのバランス調整
   * マーク+ロゴをグループ化して中央寄せ、ロゴテキストは縦並びに */
  #footer .footer-bottom-logo,
  .footer .footer-bottom-logo {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0.5em 0 !important;
  }
  .logo-footer .site-name-text-link {
    gap: 0.7em !important;
  }
  .logo-footer .elegance-mark {
    width: 44px !important;
    height: 44px !important;
  }
  /* ロゴテキスト（ELEGANCE と Magazine）を縦並びにしてバランス改善 */
  .logo-footer .site-name-text {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    line-height: 1 !important;
    gap: 0.1em !important;
  }
  .logo-footer .logo-elegance-en {
    font-size: 1em !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
  }
  .logo-footer .logo-magazine-en {
    font-size: 1.55em !important;
    line-height: 1 !important;
    top: 0 !important;
    margin-left: 0 !important;
  }
}

/* 追従ヘッダー時もマーク画像を表示（社長指示 2026-05-11）
 * 60px 高の追従ヘッダー内に収まるよう 38px に縮小、文字色も黒背景向けに調整 */
body.is-scrolled .logo-header .elegance-mark {
  width: 38px !important;
  height: 38px !important;
}
body.is-scrolled .logo-header .logo-elegance-en {
  color: #F5E8D0 !important;
}
body.is-scrolled .logo-header .logo-magazine-en {
  color: var(--elegance-gold) !important;
}

/* === 下層: グローバルナビ（黒背景 + 白テキスト） === */
#navi {
  background: #222222 !important;
  border-top: none !important;
  border-bottom: none !important;
}
#navi .navi-in,
#navi-in,
#navi .menu-header {
  background: #222222 !important;
}
#navi .navi-in a,
#navi-in a {
  color: #FFFFFF !important;
  transition: color 0.2s ease, background 0.2s ease !important;
}
#navi .navi-in a:hover,
#navi .navi-in a:focus,
#navi-in a:hover {
  color: var(--elegance-gold) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* メニュー項目間の縦区切り線（foula 風） */
#navi .navi-in > .menu-header > li,
#navi .navi-in ul.menu-pc > li,
#navi-in > .menu-header > li {
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}
#navi .navi-in > .menu-header > li:last-child,
#navi .navi-in ul.menu-pc > li:last-child,
#navi-in > .menu-header > li:last-child {
  border-right: none !important;
}

/* ONLINE STORE アクセント（黒背景上でゴールド = よく映える）
 * v0.5.24 (2026-06-01): 本番ドメイン化(www.e-elegance.jp)で
 *   内部ナビ(TOP/カテゴリ)も href に e-elegance.jp を含むようになり、
 *   この「外部リンク装飾」が全ナビ項目に誤爆 → 全部が外部リンク風に。
 *   ONLINE STORE(EC本体=https://www.e-elegance.jp/ ・/apps/note を含まない)
 *   だけを狙うため :not([href*="/apps/note"]) で内部リンクを除外。
 *   ※koara(koara.matrix.jp)では内部リンクが e-elegance.jp を含まず誤爆しなかった。 */
#navi .navi-in a[href*="e-elegance.jp"]:not([href*="/apps/note"]) {
  color: var(--elegance-gold) !important;
  font-weight: 700 !important;
}
#navi .navi-in a[href*="e-elegance.jp"]:not([href*="/apps/note"]):hover {
  color: #FFFFFF !important;
  background: var(--elegance-gold-dark) !important;
}
/* v0.5.8: ↗ 矢印を .item-label の中に表示してテキスト寄りに
 * 旧: <a>::after だと .caption-wrap の外側に出て右寄りになる
 * 新: .item-label::after でテキスト直後に表示 */
#navi .navi-in a[href*="e-elegance.jp"]:not([href*="/apps/note"])::after {
  content: none !important; /* 既存の <a>::after を無効化 */
}
#navi .navi-in a[href*="e-elegance.jp"]:not([href*="/apps/note"]) .item-label::after,
#navi .navi-in a[href*="e-elegance.jp"]:not([href*="/apps/note"]):not(:has(.item-label))::after {
  content: "↗";
  font-size: 0.75em;
  margin-left: 0.25em;
  display: inline;
  vertical-align: middle;
}

/* === v0.5.6: 追従ヘッダー黒背景の確実化（JS連携）===
 * functions.php の scroll 監視 JS が body.is-scrolled を付与する。
 * これに対応して、ヘッダー全要素の背景を完全に黒、テキストを白に強制。
 * .header-container-in / #header / .logo-header / .site-name 等を網羅。 */
body.is-scrolled #header,
body.is-scrolled .header,
body.is-scrolled #header-container,
body.is-scrolled .header-container,
body.is-scrolled #header-container-in,
body.is-scrolled .header-container-in,
body.is-scrolled .header-in,
body.is-scrolled .logo-header,
body.is-scrolled .site-name,
body.is-scrolled .navi {
  background: #222222 !important;
  background-image: none !important;
  background-color: #222222 !important;
}

body.is-scrolled .site-name,
body.is-scrolled .site-name a,
body.is-scrolled .site-name-text,
body.is-scrolled .site-name-text-link,
body.is-scrolled .tagline,
body.is-scrolled .tagline-message {
  color: #FFFFFF !important;
}

body.is-scrolled #navi a,
body.is-scrolled .navi-in a {
  color: #FFFFFF !important;
}

body.is-scrolled #navi a[href*="e-elegance.jp"]:not([href*="/apps/note"]),
body.is-scrolled .navi-in a[href*="e-elegance.jp"]:not([href*="/apps/note"]) {
  color: var(--elegance-gold) !important;
}

/* === v0.5.5: 追従ヘッダー（Cocoon: .hlt-tm-small）の背景統一 ===
 * Cocoon の追従ヘッダーは #header-container-in に .hlt-tm-small が動的追加される。
 * その時、上層（タイトル・キャッチフレーズ）のベージュグラデが残ってしまうため、
 * 追従時は全体を黒背景 + テキスト白に切り替えて統一感を出す。 */

/* 追従時の背景（複数候補セレクタで保険） */
#header-container-in.hlt-tm-small,
.hlt-tm-small,
.hlt-tm-small #header,
.hlt-tm-small #header-container,
body.fixed-header-on #header-container-in,
body.fixed-header-on .header-in,
.go-to-top #header-container-in {
  background: #222222 !important;
  background-image: none !important;
}

/* 追従時のサイト名・キャッチフレーズを白に */
#header-container-in.hlt-tm-small .site-name,
#header-container-in.hlt-tm-small .site-name a,
#header-container-in.hlt-tm-small .tagline,
#header-container-in.hlt-tm-small .tagline-message,
#header-container-in.hlt-tm-small .site-name-text,
.hlt-tm-small .site-name,
.hlt-tm-small .site-name a,
.hlt-tm-small .tagline,
.hlt-tm-small .tagline-message,
.hlt-tm-small .site-name-text {
  color: #FFFFFF !important;
}

/* 追従時のナビアイテム（既に黒なので保険） */
.hlt-tm-small #navi,
.hlt-tm-small .navi-in {
  background: #222222 !important;
}
.hlt-tm-small #navi a,
.hlt-tm-small .navi-in a {
  color: #FFFFFF !important;
}
.hlt-tm-small #navi a[href*="e-elegance.jp"]:not([href*="/apps/note"]),
.hlt-tm-small .navi-in a[href*="e-elegance.jp"]:not([href*="/apps/note"]) {
  color: var(--elegance-gold) !important;
}
/* === v0.5.13: SP モバイルメニュー (.menu-drawer) をモダンに刷新 ===
 * Cocoon のデフォルトは白背景 + グレー文字 + 薄青hover で質素。
 * ELEGANCE のヘッダー黒背景と統一感を持たせ、上品な黒系メニューに。
 * 主要セレクタ:
 *   .navi-menu-content  - スライドインのコンテナ
 *   .menu-drawer        - メニューリスト
 *   .menu-drawer a      - 各リンク
 *   .menu-close-button  - 閉じる × ボタン */

/* メニューコンテナ全体（黒系グラデーション）*/
.navi-menu-content,
#navi-menu-content,
.menu-content {
  background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%) !important;
  color: #FFFFFF !important;
}

/* メニューリスト全体 */
.menu-drawer {
  padding: 1.5em 0 30px !important;
}
.menu-drawer ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.menu-drawer li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}
.menu-drawer li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 各メニューリンク */
.menu-drawer a {
  color: #FFFFFF !important;
  padding: 1em 1.5em !important;
  display: block !important;
  font-size: 1.05em !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: color 0.2s ease, background 0.2s ease, padding-left 0.25s ease !important;
}

.menu-drawer a:hover,
.menu-drawer a:active,
.menu-drawer a:focus {
  background: rgba(202, 175, 104, 0.12) !important;
  color: var(--elegance-gold) !important;
  padding-left: 1.85em !important; /* hover で軽いインデント */
}

/* サブメニューがある場合の入れ子調整 */
.menu-drawer .sub-menu {
  padding-left: 1em !important;
  background: rgba(255, 255, 255, 0.03) !important;
}
.menu-drawer .sub-menu a {
  font-size: 0.95em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 0.8em 1.5em !important;
}

/* ONLINE STORE 強調（黒背景にゴールドが映える）*/
.menu-drawer a[href*="e-elegance.jp"]:not([href*="/apps/note"]) {
  color: var(--elegance-gold) !important;
  font-weight: 700 !important;
}
.menu-drawer a[href*="e-elegance.jp"]:not([href*="/apps/note"])::after {
  content: " ↗";
  font-size: 0.85em;
  margin-left: 0.3em;
}
.menu-drawer a[href*="e-elegance.jp"]:not([href*="/apps/note"]):hover {
  color: #FFFFFF !important;
  background: var(--elegance-gold) !important;
}

/* 閉じるボタン × */
.menu-close-button,
.menu-close-button label,
label.menu-close-button {
  color: var(--elegance-gold) !important;
  background: transparent !important;
  font-size: 1.4em !important;
  padding: 0.6em !important;
}
.menu-close-button .fa,
.menu-close-button [class*="fa-"],
.menu-close-button .menu-close-icon,
#navi-menu-close .fa,
#navi-menu-close [class*="fa-"] {
  color: var(--elegance-gold) !important;
}

/* オーバーレイ（メニュー外の暗背景）も少し濃くしてフォーカス感UP */
#navi-menu-close,
.menu-close {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* === v0.5.9: フッターをヘッダーに合わせて黒系デザインに統一 ===
 * Cocoon の構造:
 *   #footer > #footer-in > .footer-bottom
 *     > .footer-bottom-logo > .logo-footer > .site-name-text
 *     > .footer-bottom-content > #navi-footer + .copyright
 * 上端にゴールドのアクセントボーダー、全体は #1A1A1A、テキストは白系。 */

#footer,
.footer,
.footer-container {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  border-top: 3px solid var(--elegance-gold) !important;
  padding: 2.5em 0 1.5em !important;
}

#footer-in,
.footer-in {
  background: transparent !important;
}

/* フッターロゴ（v0.5.10: サイズ縮小 + 背景透明化）*/
#footer .footer-bottom-logo,
#footer .logo,
#footer .logo-footer,
#footer .logo-text,
#footer .logo-footer .site-name,
#footer .logo-footer .site-name a,
#footer .logo-footer .site-name-text,
#footer .logo-footer .site-name-text-link,
.footer .logo-footer,
.footer .logo-text,
.footer .logo-footer .site-name,
.footer .logo-footer .site-name-text {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#footer .logo-footer .site-name,
#footer .logo-footer .site-name a,
#footer .logo-footer .site-name-text,
#footer .logo-text,
.footer .logo-footer .site-name,
.footer .logo-footer .site-name-text {
  color: #FFFFFF !important;
  font-size: 1.2em !important;  /* v0.5.12: 1.0em → 1.2em で少し大きく */
  letter-spacing: 0.05em !important;
  font-weight: 400 !important;
}

/* フッターナビ */
#navi-footer,
#navi-footer-in,
.navi-footer,
.navi-footer-in {
  background: transparent !important;
}
#navi-footer a,
#navi-footer-in a,
.navi-footer a,
.navi-footer-in a {
  color: #FFFFFF !important;
  transition: color 0.2s ease !important;
}
#navi-footer a:hover,
.navi-footer a:hover {
  color: var(--elegance-gold) !important;
}

/* コピーライト（v0.3.0 の指定を上書き）*/
#footer .copyright,
#footer .source-org.copyright,
.footer .copyright,
.source-org.copyright {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.85em !important;
  letter-spacing: 0.06em !important;
  margin-top: 1.5em !important;
}

/* フッター内のリンク全般（保険） */
#footer a,
.footer a {
  color: #FFFFFF !important;
}
#footer a:hover,
.footer a:hover {
  color: var(--elegance-gold) !important;
}

/* ===========================================================
 * Cocoon 親テーマのレスポンシブ修正（2026-05-06）
 *
 * 親テーマの .wrap は width: 1256px 固定（cocoon-master/style.css:649）。
 * これだとブラウザ幅 1256px 以下でオーバーフローし、メインカラム+
 * サイドバーが画面からはみ出す。max-width に置き換えて画面幅追従に。
 *
 * !important が必要な理由:
 *   Cocoon は CSS 読み込み順を「子テーマ → 親テーマ」の順にする特殊仕様。
 *   そのため子テーマで親テーマの装飾を上書きするには !important が必須。
 *   （Cocoon 公式マニュアルでも推奨）
 * =========================================================== */
.wrap {
  width: auto !important;
  max-width: 1256px !important;
  box-sizing: border-box !important;
}

/* ===========================================================
 * v0.4.0 (2026-05-08): Cocoon 管理画面ファースト方針の最小CSS
 *
 * 方針:
 *   Cocoon 設定で実現できる項目（目次/SNSシェア/関連記事/パンくず/
 *   著者プロフィール/タイトル区切り/OGP fallback など）は子テーマで
 *   CSSハードコードしない。社長が管理画面で順番に設定するだけで
 *   完成する状態を目指す。
 *   → 詳細は engineering/docs/elegance-cocoon-admin-checklist.md
 *
 * このセクションには「Cocoon管理画面では届かない」最小限の差分のみ書く。
 * =========================================================== */

/* --- C-1: タグクラウド / 記事下タグ（ブランド色だけ上書き） ---
 * Cocoon 標準のタグクラウドはデフォルトの青系。ブランド色に揃えるためだけの最小上書き。
 * 表示有無・件数・サイズは Cocoon 設定 → ウィジェット → タグクラウドに委譲。
 */
.tagcloud a,
.entry-tags a,
.tag-link {
  color: var(--elegance-text);
  background: var(--elegance-surface);
  border: 1px solid var(--elegance-line);
  border-radius: 999px;
  padding: 0.2em 0.8em;
  margin: 0.15em;
  text-decoration: none;
  font-size: 0.85em;
  transition: background 0.2s ease, color 0.2s ease;
}
.tagcloud a:hover,
.entry-tags a:hover,
.tag-link:hover {
  background: var(--elegance-gold);
  color: #FFFFFF;
  border-color: var(--elegance-gold);
}

/* --- C-3: 会員価格バッジ（Cocoon に同等機能なし → 子テーマで実装） ---
 * 使い方: 商品紹介カード内の価格と並べて
 *   <span class="elegance-member-price-badge">会員価格あり</span>
 * 仕様書 §4-3「会員価格あり」表示への対応。
 * アクセシビリティ: ゴールド×白は AA 未達のため、font-weight: 700 +
 * 0.85em 相当の十分なサイズで補強（仕様の制約内で太字確保）。
 */
.elegance-member-price-badge {
  display: inline-block;
  padding: 0.15em 0.6em;
  margin-left: 0.4em;
  background: var(--elegance-gold);
  color: #FFFFFF;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 2px;
  vertical-align: middle;
}

/* --- サイドバー見出しの左右ライン (h2/h3 ::before/::after) をゴールドに上書き ---
 * Cocoon スキンが --cocoon-text-color (黒系) を使っているのを ELEGANCE のゴールドに統一。
 * セレクタの詳細度は親と同じ (0,0,2,2) なので、子テーマの後勝ちで反映される。
 */
.sidebar h2::before,
.sidebar h2::after,
.sidebar h3::before,
.sidebar h3::after,
#sidebar h2::before,
#sidebar h2::after,
#sidebar h3::before,
#sidebar h3::after {
  background-color: var(--elegance-gold);
}

/* ===========================================================
 * v0.4.5 (2026-05-08): 記事一覧カードを foula-store.jp 風に
 *
 * 構成:
 *   [アイキャッチ]
 *   [日付 YYYY.MM.DD]  [カテゴリピル]
 *   [タイトル（太字）]
 *   [#タグ1] [#タグ2] [#タグ3]
 *
 * Cocoon の親テーマ tmp/entry-card.php は
 *   .entry-card-content
 *     h2.entry-card-title       ← タイトル
 *     .entry-card-snippet       ← 抜粋（snippet 表示時のみ）
 *     .entry-card-tags          ← v0.4.5 追加（functions.php フック）
 *     .entry-card-meta
 *       .entry-card-info        ← .post-date / .post-update 等
 *       .entry-card-categorys   ← カテゴリ（テキストリンク）
 * という DOM になっている。foula 風には「日付＋カテゴリ → タイトル → タグ」の順に
 * 視覚で見えるよう、CSS の order/flex で並べ替えして実現する。
 *
 * Cocoon は CSS 読み込み順が「子→親」のため、!important を要所で使う。
 * =========================================================== */

/* カード本体の縦方向レイアウトを flex 化して order を制御 */
.list .entry-card-content,
.list .e-card-content,
.list .card-content {
  display: flex;
  flex-direction: column;
}

/* 1) 日付 + カテゴリ (entry-card-meta) をタイトルより上に */
.list .entry-card-meta,
.list .e-card-meta,
.list .card-meta {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.6em;
  margin: 0 0 0.4em !important;
  padding: 0 !important;
  border: none !important;
}
.list .entry-card-meta .entry-card-info,
.list .e-card-meta .e-card-info {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  padding: 0;
}
.list .entry-card-meta .entry-card-categorys,
.list .e-card-meta .e-card-categorys {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
}

/* 2) タイトルは meta の下 */
.list .entry-card-title,
.list .e-card-title,
.list .card-title {
  order: 2;
  font-size: 1em !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--elegance-text) !important;
  margin: 0.2em 0 0.5em !important;
}

/* 3) snippet（抜粋）はタイトルの下、タグの上 */
.list .entry-card-snippet,
.list .e-card-snippet,
.list .card-snippet {
  order: 3;
}

/* 4) タグピル群（functions.php で出力する .entry-card-tags） */
.list .entry-card-tags {
  order: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  margin: 0.5em 0 0;
  padding: 0;
}

/* 日付: グレー・小さめ・アイコン非表示でフラットに */
.list .post-date,
.list .post-update {
  color: var(--elegance-sub-text) !important;
  font-size: 0.78em !important;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
  background: none !important;
  padding: 0 !important;
}
.list .post-date .fa,
.list .post-date .far,
.list .post-date .fas,
.list .post-update .fa,
.list .post-update .far,
.list .post-update .fas {
  display: none !important; /* foula 風はアイコン無し */
}

/* カテゴリラベル: ゴールド系ピル（v0.3.0 のラベル定義を上書き強化） */
.list .cat-label,
.list .category-label,
.list .entry-card-categorys a {
  display: inline-block;
  background: var(--elegance-gold) !important;
  color: #FFFFFF !important;
  padding: 0.2em 0.8em !important;
  border-radius: 999px !important;
  font-size: 0.72em !important;
  letter-spacing: 0.06em;
  text-decoration: none;
  line-height: 1.4;
  border: none !important;
}
.list .entry-card-categorys a:hover {
  opacity: 0.85;
  color: #FFFFFF !important;
  text-decoration: none;
}

/* タグピル: ダークグレー背景 + #プレフィックス（PHP 側で出力済み） */
.list .entry-card-tag {
  display: inline-block;
  padding: 0.18em 0.75em;
  background: var(--elegance-text);
  color: #FFFFFF;
  font-size: 0.7em;
  font-weight: 500;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.04em;
  line-height: 1.5;
  /* span を a 化していないため hover は不要だが、将来 a 化したとき用に保険 */
  transition: opacity 0.2s ease;
}
.list .entry-card-tag:hover {
  opacity: 0.85;
  color: #FFFFFF;
  text-decoration: none;
}

/* === v0.5.20: ヘッダーナビ項目をフルラベル可変幅化（寺澤様希望対応）===
 * Cocoon デフォルト: .navi-in > ul li { width: 176px } 固定 +
 * .navi .item-label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden }
 * → 「商材の使い方・テクニ...」の末尾省略の原因。
 * 子テーマで PC ナビのみ可変幅 + ellipsis 解除に上書き。
 * SP モバイルメニュー（.menu-drawer）は別系統のため影響なし。 */
@media (min-width: 1024px) {
  #navi .navi-in > ul > li,
  #navi .navi-in > .menu-header > li,
  #navi-in > .menu-header > li {
    width: auto !important;
    min-width: 0 !important;
  }
  #navi .navi-in .item-label,
  #navi-in .item-label {
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  /* リンク内側に左右パディングを入れて項目間の呼吸を確保 */
  #navi .navi-in > .menu-header > li > a,
  #navi-in > .menu-header > li > a {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}