/* ============================================================
   道具屋オンライン 特集記事パーツ 共通CSS（dgy-parts.css）
   子テーマ内に配置し、functions.php から enqueue_block_assets() で読み込む
   （フロント側とブロックエディターのキャンバス内、両方に適用される）。

   SWELL側の body/p/.box/table 等のグローバルCSSと衝突しないよう、
   .dgy-parts 配下は all:revert で一度ブラウザ標準状態まで巻き戻し、
   ここに定義する .dgy-* クラスだけでスタイルを組み立てる。

   【重要・詳細度について】
   SWELLはエディター内で `.editor-styles-wrapper h4:where(...)` のような
   「クラス1つ＋h1〜h6タグ」というセレクタ（詳細度 0,1,1）で見出しに
   border-left等を当てている。これは `.dgy-parts *`（詳細度 0,1,0）より
   詳細度が高く、all:revertが負けて漏れてしまう。
   そのため全セレクタの頭に `.dgy-parts ` を付け、詳細度を一段階
   底上げしている（リセット行だけは `.dgy-parts.dgy-parts` と
   クラスを二重指定して同様に底上げ）。!importantは使わない
   （使うと今度は各パーツの個別スタイルがリセットに負けてしまうため）。

   ランキング系パーツは matsukiyococokara-online.com の実記事
   （頭皮のかゆみ対策商品おすすめ10選）を実際にスクリーンショットで
   確認して構成を合わせている。JS操作（アコーディオン等）は使わない。
   ============================================================ */

.dgy-parts {
  all: initial;
  display: block;
  box-sizing: border-box;
  font-family: "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --dgy-primary: #00528D;
  --dgy-secondary: #131246;
  --dgy-cta-bg: #00528D;
  --dgy-cta-text: #ffffff;
}
.dgy-parts.dgy-parts *,
.dgy-parts.dgy-parts *::before,
.dgy-parts.dgy-parts *::after {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
}

.dgy-parts .dgy-block { margin: 0; }

/* ---------- 注意書きバー（プロモーション表記など） ---------- */
.dgy-parts .dgy-notice { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #777; background: #f6f7f9; border: 1px solid #e8eaef; border-radius: 8px; padding: 10px 14px; margin: 0; }
.dgy-parts .dgy-notice::before { content: "ⓘ"; flex: none; font-size: 14px; color: #999; }

/* ---------- 記事ヘッダー（タイトル／メタ／リード文） ---------- */
.dgy-parts .dgy-article-title { font-size: 24px; font-weight: 700; color: #1a1a1a; line-height: 1.5; margin: 0 0 10px; }
.dgy-parts .dgy-article-meta { font-size: 12px; color: #999; margin: 0 0 20px; display: flex; gap: 14px; flex-wrap: wrap; }
.dgy-parts .dgy-article-lead p { font-size: 14.5px; line-height: 1.9; color: #333; margin: 0 0 14px; }

/* ---------- パンくず ---------- */
.dgy-parts .dgy-breadcrumb { font-size: 12px; color: #999; margin: 0; }
.dgy-parts .dgy-breadcrumb a { color: #999; text-decoration: none; }

/* ---------- 目次（プレーンな箇条書き） ---------- */
.dgy-parts .dgy-toc__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px; }
.dgy-parts .dgy-toc ul { margin: 0; padding-left: 22px; }
.dgy-parts .dgy-toc li { font-size: 14px; color: #333; margin-bottom: 8px; line-height: 1.6; }
.dgy-parts .dgy-toc a { color: #333; text-decoration: none; }
.dgy-parts .dgy-toc a:hover { color: var(--dgy-primary); }

/* ---------- スタッフ／監修者プロフィールボックス（中央寄せ） ---------- */
.dgy-parts .dgy-profile-box { border: 1px solid #e6e8ee; border-radius: 12px; padding: 28px 24px; text-align: center; }
.dgy-parts .dgy-profile-box__label { display: flex; align-items: center; gap: 14px; font-size: 12.5px; font-weight: 700; color: #999; margin: 0 0 18px; }
.dgy-parts .dgy-profile-box__label::before, .dgy-parts .dgy-profile-box__label::after { content: ""; flex: 1; height: 1px; background: #e0e0e0; }
.dgy-parts .dgy-profile-box__photo { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; margin: 0 auto 14px; }
.dgy-parts .dgy-profile-box__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dgy-parts .dgy-profile-box__name { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; }
.dgy-parts .dgy-profile-box__role { display: inline-block; font-size: 11px; font-weight: 700; color: var(--dgy-primary); background: #e7effa; padding: 3px 11px; border-radius: 100px; margin: 0 0 14px; }
.dgy-parts .dgy-profile-box__bio { font-size: 13px; color: #666; line-height: 1.85; text-align: left; margin: 0; }

/* ---------- 見出し：大（区切り線つき、記事内の章見出し） ---------- */
.dgy-parts .dgy-h2 { font-size: 20px; font-weight: 700; color: #1a1a1a; text-align: left; padding: 16px 0; border-top: 2px solid #1a1a1a; border-bottom: 2px solid #1a1a1a; margin: 0; }

/* ---------- 見出し：中（左に縦棒アクセント） ---------- */
.dgy-parts .dgy-h3 { font-size: 16.5px; font-weight: 700; color: #1a1a1a; border-left: 4px solid var(--dgy-primary); padding-left: 12px; margin: 0; }

/* ---------- 見出し：小（装飾なしの太字、特徴見出し用） ---------- */
.dgy-parts .dgy-h4-plain { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 12px; }

/* ---------- 用語＋説明リスト（マーカーハイライト） ---------- */
.dgy-parts .dgy-term-list { background: #f4f7fb; border-radius: 12px; padding: 22px 24px; }
.dgy-parts .dgy-term-list__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--dgy-secondary); padding: 3px 10px; border-radius: 4px; margin: 0 0 8px; }
.dgy-parts .dgy-term-list__title { font-size: 17px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px; }
.dgy-parts .dgy-term-list ul { margin: 0; padding: 0; list-style: none; }
.dgy-parts .dgy-term-list li { margin-bottom: 14px; }
.dgy-parts .dgy-term-list li:last-child { margin-bottom: 0; }
.dgy-parts .dgy-term-list__term { display: inline; font-weight: 700; color: #1a1a1a; background: linear-gradient(transparent 60%, #ffe27a 60%); }
.dgy-parts .dgy-term-list__desc { display: block; font-size: 13px; color: #555; margin-top: 4px; line-height: 1.7; }

/* ---------- 参考データ表（プレーン、商品比較ではなく解説用） ---------- */
.dgy-parts .dgy-data-table-wrap { overflow-x: auto; }
.dgy-parts .dgy-data-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 13.5px; }
.dgy-parts .dgy-data-table th { background: var(--dgy-secondary); color: #fff; text-align: left; padding: 10px 14px; font-weight: 700; white-space: nowrap; }
.dgy-parts .dgy-data-table td { padding: 10px 14px; border-top: 1px solid #e6e8ee; color: #333; }
.dgy-parts .dgy-data-table tr:nth-child(even) td { background: #f7f9fc; }

/* ---------- 理由／選び方グリッド（イラスト図解の試作・アイコン版） ---------- */
.dgy-parts .dgy-reasons { background: #f4f7fb; border-radius: 14px; padding: 26px 24px; }
.dgy-parts .dgy-reasons__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; color: var(--dgy-primary); background: #fff; border: 1px solid var(--dgy-primary); padding: 3px 10px; border-radius: 100px; margin: 0 0 8px; }
.dgy-parts .dgy-reasons__title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 20px; }
.dgy-parts .dgy-reasons__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.dgy-parts .dgy-reasons__item { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 10px; padding: 14px 16px; }
.dgy-parts .dgy-reasons__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--dgy-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.dgy-parts .dgy-reasons__label { font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.dgy-parts .dgy-reasons__text { font-size: 12.5px; color: #666; line-height: 1.6; margin: 0; }

/* ---------- CTA（プレーン中央寄せ、記事中／記事末どちらでも使用） ---------- */
.dgy-parts .dgy-cta-simple { text-align: center; }
.dgy-parts .dgy-cta-simple__lead { font-size: 14px; color: #555; margin: 0 0 16px; line-height: 1.7; }
.dgy-parts .dgy-cta-simple__btn { display: inline-block; background: var(--dgy-cta-bg); color: var(--dgy-cta-text) !important; text-decoration: none; font-size: 14.5px; font-weight: 700; padding: 14px 40px; border-radius: 100px; }

/* ---------- SNSシェアバー ---------- */
.dgy-parts .dgy-share { text-align: center; }
.dgy-parts .dgy-share__label { font-size: 13px; font-weight: 700; color: #1a1a1a; margin: 0 0 12px; }
.dgy-parts .dgy-share__icons { display: flex; gap: 12px; justify-content: center; }
.dgy-parts .dgy-share__icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
.dgy-parts .dgy-share__icon--line { background: #06C755; }
.dgy-parts .dgy-share__icon--x { background: #000000; }
.dgy-parts .dgy-share__icon--fb { background: #1877F2; }

/* ---------- ランキング項目（1商品＝1つの囲みボックス） ---------- */
.dgy-parts .dgy-ranking-item { border: 1px solid #e6e8ee; border-radius: 14px; padding: 26px 24px; }

.dgy-parts .dgy-ranking-item__title { font-size: 17px; font-weight: 700; color: #1a1a1a; border-left: 4px solid var(--dgy-primary); padding-left: 12px; margin: 0 0 18px; line-height: 1.6; }
.dgy-parts .dgy-ranking-item__num { color: var(--dgy-primary); margin-right: 2px; }

.dgy-parts .dgy-ranking-item__intro { display: flex; gap: 20px; margin-bottom: 18px; }
.dgy-parts .dgy-ranking-item__photo { flex: none; width: 150px; height: 150px; border-radius: 8px; overflow: hidden; background: #f2f4f7; }
.dgy-parts .dgy-ranking-item__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dgy-parts .dgy-ranking-item__info { flex: 1; min-width: 0; align-self: center; }
.dgy-parts .dgy-ranking-item__brand { font-size: 12px; color: #888; margin: 0 0 4px; }
.dgy-parts .dgy-ranking-item__name { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px; line-height: 1.5; }
.dgy-parts .dgy-ranking-item__price { font-size: 14px; font-weight: 700; color: var(--dgy-secondary); margin: 0; }

.dgy-parts .dgy-ranking-item__ctas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.dgy-parts .dgy-ranking-item__cta { display: block; text-align: center; text-decoration: none; font-size: 14px; font-weight: 700; padding: 14px; border-radius: 100px; }
.dgy-parts .dgy-ranking-item__cta--solid { background: var(--dgy-cta-bg); color: var(--dgy-cta-text) !important; }
.dgy-parts .dgy-ranking-item__cta--outline { background: #fff; color: var(--dgy-primary) !important; border: 1.5px solid var(--dgy-primary); }

.dgy-parts .dgy-ranking-item__comment { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; }
.dgy-parts .dgy-ranking-item__comment-photo { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #cfd6e2; }
.dgy-parts .dgy-ranking-item__comment-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dgy-parts .dgy-ranking-item__comment-bubble { flex: 1; background: #f4f7fb; border-radius: 12px; padding: 14px 16px; font-size: 13.5px; color: #333; line-height: 1.8; }

.dgy-parts .dgy-ranking-item__feature { margin-bottom: 22px; }
.dgy-parts .dgy-ranking-item__feature-body { display: flex; gap: 18px; }
.dgy-parts .dgy-ranking-item__feature-img { flex: none; width: 38%; border-radius: 8px; overflow: hidden; background: #f2f4f7; }
.dgy-parts .dgy-ranking-item__feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dgy-parts .dgy-ranking-item__feature-text { flex: 1; min-width: 0; }
.dgy-parts .dgy-ranking-item__feature-text p { font-size: 13px; color: #555; line-height: 1.85; margin: 0 0 10px; }
.dgy-parts .dgy-ranking-item__feature-text p:last-child { margin-bottom: 0; }

/* ---------- 関連記事カード（3列） ---------- */
.dgy-parts .dgy-related__title { font-size: 15px; font-weight: 700; color: var(--dgy-secondary); margin: 0 0 14px; }
.dgy-parts .dgy-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dgy-parts .dgy-related__card { display: block; text-decoration: none; border: 1px solid #e6e8ee; border-radius: 10px; overflow: hidden; }
.dgy-parts .dgy-related__card img { width: 100%; height: 90px; object-fit: cover; display: block; background: #eee; }
.dgy-parts .dgy-related__card-text { font-size: 12px; color: #333 !important; padding: 10px 12px; line-height: 1.6; }

/* ---------- FAQ（常時表示、開閉JSなし） ---------- */
.dgy-parts .dgy-faq__item { border-bottom: 1px solid #e6e8ee; padding: 18px 0; }
.dgy-parts .dgy-faq__item:first-child { padding-top: 0; }
.dgy-parts .dgy-faq__q { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px; }
.dgy-parts .dgy-faq__a { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #555; line-height: 1.8; margin: 0; }
.dgy-parts .dgy-faq__mark { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--dgy-primary); border-radius: 4px; color: var(--dgy-primary); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dgy-parts .dgy-faq__a .dgy-faq__mark { border-color: #ccc; color: #999; }

/* ---------- ブランドインデックス（クイックナビ） ---------- */
.dgy-parts .dgy-brand-index { background: #f4f7fb; border: 1px solid #dde3ee; border-radius: 12px; padding: 18px 20px; }
.dgy-parts .dgy-brand-index__title { font-size: 13px; font-weight: 700; color: var(--dgy-secondary); margin: 0 0 12px; }
.dgy-parts .dgy-brand-index__group-label { font-size: 11px; font-weight: 700; color: #8a93a6; margin: 14px 0 8px; }
.dgy-parts .dgy-brand-index__group-label:first-of-type { margin-top: 0; }
.dgy-parts .dgy-brand-index__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.dgy-parts .dgy-brand-index__grid a { font-size: 12px; color: var(--dgy-primary); background: #fff; border: 1px solid var(--dgy-primary); border-radius: 100px; padding: 6px 14px; text-decoration: none !important; }

/* ---------- ブランドセクション＋商品グリッド ---------- */
.dgy-parts .dgy-brand-section { border-top: 2px solid #eef1f6; padding-top: 24px; }
.dgy-parts .dgy-brand-section__head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.dgy-parts .dgy-brand-section__name { font-size: 19px; font-weight: 700; color: var(--dgy-secondary); margin: 0; }
.dgy-parts .dgy-brand-section__name-en { font-size: 12px; color: #999; }
.dgy-parts .dgy-brand-section__intro { font-size: 13.5px; line-height: 1.9; color: #444; margin: 0 0 16px; }

.dgy-parts .dgy-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.dgy-parts .dgy-product-grid__item { display: block; text-decoration: none !important; border: 1px solid #e6e8ee; border-radius: 10px; overflow: hidden; }
.dgy-parts .dgy-product-grid__item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #f2f4f7; }
.dgy-parts .dgy-product-grid__item-name { font-size: 11.5px; font-weight: 400; color: #333 !important; margin: 0; padding: 8px 9px; line-height: 1.5; }
.dgy-parts .dgy-product-grid__item-cta { font-size: 10px; color: var(--dgy-primary) !important; padding: 0 9px 8px; display: block; }

.dgy-parts .dgy-brand-section__links { display: flex; gap: 10px; flex-wrap: wrap; }
.dgy-parts .dgy-brand-section__links a { font-size: 12.5px; font-weight: 700; text-decoration: none !important; padding: 9px 16px; border-radius: 100px; }
.dgy-parts .dgy-brand-section__links a.is-main { background: var(--dgy-cta-bg); color: var(--dgy-cta-text) !important; }
.dgy-parts .dgy-brand-section__links a.is-sub { background: #fff; color: var(--dgy-primary) !important; border: 1.5px solid var(--dgy-primary); }

/* ============================================================
   パターン間の余白（全パーツ共通・SWELL対策）

   SWELLは「divの唯一の子要素」の上下marginを !important で0にリセットする
   （.post_content div>:first-child, .post_content div>:last-child
     { margin-top/margin-bottom: 0 !important; }、詳細度は0,2,1）。
   各パターンは <div class="dgy-parts"> の直下にこれらの要素を単体で
   置く構成のため、そのままだとパターン同士の間隔が消えてしまう。

   対策として、詳細度を0,2,0まで上げた上で !important を付け、
   「各パターンのルート要素の margin-bottom だけ」で間隔を作る方式に統一。
   （margin-topではなく下方向だけにすることで、隣接パターン同士の
   マージン相殺を考えずに済むようにしている）

   ここに無いクラスを新しく追加する場合も、そのパターンの一番外側の
   要素をこの一覧に追記しておくこと。
   ============================================================ */
.dgy-parts.dgy-parts .dgy-block,
.dgy-parts.dgy-parts .dgy-notice,
.dgy-parts.dgy-parts .dgy-breadcrumb,
.dgy-parts.dgy-parts .dgy-toc,
.dgy-parts.dgy-parts .dgy-h2,
.dgy-parts.dgy-parts .dgy-h3,
.dgy-parts.dgy-parts .dgy-profile-box,
.dgy-parts.dgy-parts .dgy-term-list,
.dgy-parts.dgy-parts .dgy-data-table-wrap,
.dgy-parts.dgy-parts .dgy-reasons,
.dgy-parts.dgy-parts .dgy-cta-simple,
.dgy-parts.dgy-parts .dgy-share,
.dgy-parts.dgy-parts .dgy-ranking-item,
.dgy-parts.dgy-parts .dgy-related__grid,
.dgy-parts.dgy-parts .dgy-faq,
.dgy-parts.dgy-parts .dgy-brand-index,
.dgy-parts.dgy-parts .dgy-brand-section {
  margin-top: 0 !important;
  margin-bottom: 36px !important;
}