@charset "UTF-8";
/*
Theme Name: Elegance Cocoon Child
Template: cocoon-master
Version: 0.5.25
Text Domain: cocoon-child-elegance
*/

/* 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;
  }
}

/* ブランドカラー（サイト基調色のサンプリングに基づく） */
: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
 * ----------------------------------------------------------
 * 旧 .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: ピンク→ピーチ→ゴールドのグラデ
 *   - サイトのブランドカラー（ピンク・ベージュ）に沿いつつ華やかさを担保
 *   - 参考 foula は「ピンク→クリーム」直線方向、こちらは3色 + ゴールド寄りで差別化 */
#header,
#header-container,
.header {
  background: linear-gradient(135deg, #FFE8EE 0%, #FAE6D9 50%, #F5E8D0 100%) !important;
}

/* v0.5.14: ヘッダー内側に上下余白 */
.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; /* 黒 */
  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;
  }
}

/* 追従ヘッダー時もマーク画像を表示
 * 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"]) で内部リンクを除外。
 */
#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ハードコードしない。管理画面の設定だけで完成する状態を目指す。
 *
 * このセクションには「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;
  }
}