/* =====================================================
   KH考察ブログ 共通スタイル
   保存場所: /wp-content/themes/[テーマ名]/css/kh-article.css
   =====================================================

   使い方:
   各記事のカスタムHTMLブロックの先頭に
   <div class="kh-theme-[作品名]"> で囲むだけで
   作品ごとのカラーが自動適用されます。

   対応テーマクラス一覧:
     .kh-theme-wish        ウィッシュ
     .kh-theme-moana       モアナと伝説の海
     .kh-theme-zootopia    ズートピア
     .kh-theme-raya        ラーヤと龍の王国
     .kh-theme-princess    プリンセスと魔法のキス
     .kh-theme-mirabel     ミラベルと魔法だらけの家
     .kh-theme-atlantis    アトランティス
     .kh-theme-sugarrush   シュガー・ラッシュ
===================================================== */


/* =====================================================
   カラーテーマ変数（作品ごと）
===================================================== */

/* ── ウィッシュ ── */
.kh-theme-wish {
  --kh-bg-from:         #2d1b4e;
  --kh-bg-mid:          #1a0835;
  --kh-bg-to:           #3d1f6e;
  --kh-accent-1:        #c49fe8;
  --kh-accent-2:        #e891c0;
  --kh-accent-3:        #f5d97e;
  --kh-deep:            #2d1b4e;
  --kh-mid:             #4a2c7a;
  --kh-cream:           #fef9f5;
  --kh-text-p:          #1a0d2e;
  --kh-text-s:          #4a3560;
  --kh-text-m:          #8b7aa0;
  --kh-overlay-1:       rgba(196,159,232,.18);
  --kh-overlay-2:       rgba(245,217,126,.12);
  --kh-synopsis-bg-1:   rgba(139,92,204,.07);
  --kh-synopsis-bg-2:   rgba(232,145,192,.05);
  --kh-compare-a:       rgba(196,159,232,.08);
  --kh-compare-b:       rgba(45,27,78,.04);
}

/* ── モアナ ── */
.kh-theme-moana {
  --kh-bg-from:         #0a3d5c;
  --kh-bg-mid:          #0d5c7a;
  --kh-bg-to:           #1a7a5e;
  --kh-accent-1:        #7dd4d4;
  --kh-accent-2:        #ff8c5a;
  --kh-accent-3:        #f5d97e;
  --kh-deep:            #0a3d5c;
  --kh-mid:             #0d5c7a;
  --kh-cream:           #f5fffe;
  --kh-text-p:          #031e2e;
  --kh-text-s:          #1a4a5a;
  --kh-text-m:          #6a9aaa;
  --kh-overlay-1:       rgba(32,200,200,.18);
  --kh-overlay-2:       rgba(245,217,126,.12);
  --kh-synopsis-bg-1:   rgba(32,200,200,.07);
  --kh-synopsis-bg-2:   rgba(255,140,90,.05);
  --kh-compare-a:       rgba(32,200,200,.08);
  --kh-compare-b:       rgba(10,61,92,.04);
}

/* ── ズートピア ── */
.kh-theme-zootopia {
  --kh-bg-from:         #1a1a2e;
  --kh-bg-mid:          #2d1b4e;
  --kh-bg-to:           #3d2a00;
  --kh-accent-1:        #ffa040;
  --kh-accent-2:        #9b5de5;
  --kh-accent-3:        #f5d97e;
  --kh-deep:            #1a1a2e;
  --kh-mid:             #2d1b4e;
  --kh-cream:           #fdf8f0;
  --kh-text-p:          #1a1020;
  --kh-text-s:          #3a2a40;
  --kh-text-m:          #8a7a90;
  --kh-overlay-1:       rgba(255,140,50,.15);
  --kh-overlay-2:       rgba(155,93,229,.12);
  --kh-synopsis-bg-1:   rgba(255,140,50,.07);
  --kh-synopsis-bg-2:   rgba(155,93,229,.05);
  --kh-compare-a:       rgba(255,140,50,.08);
  --kh-compare-b:       rgba(26,26,46,.04);
}

/* ── ラーヤ ── */
.kh-theme-raya {
  --kh-bg-from:         #0d3320;
  --kh-bg-mid:          #1a4d30;
  --kh-bg-to:           #3d1a0a;
  --kh-accent-1:        #7ddc9e;
  --kh-accent-2:        #c8392b;
  --kh-accent-3:        #f5d97e;
  --kh-deep:            #0d3320;
  --kh-mid:             #1a4d30;
  --kh-cream:           #f5fdf7;
  --kh-text-p:          #071a10;
  --kh-text-s:          #1a3a28;
  --kh-text-m:          #6a9a7a;
  --kh-overlay-1:       rgba(100,220,150,.15);
  --kh-overlay-2:       rgba(245,217,126,.10);
  --kh-synopsis-bg-1:   rgba(77,200,122,.07);
  --kh-synopsis-bg-2:   rgba(200,57,43,.05);
  --kh-compare-a:       rgba(77,200,122,.08);
  --kh-compare-b:       rgba(13,51,32,.04);
}

/* ── プリンセスと魔法のキス ── */
.kh-theme-princess {
  --kh-bg-from:         #0a0a1e;
  --kh-bg-mid:          #1a0d3d;
  --kh-bg-to:           #0d2000;
  --kh-accent-1:        #c0a0ff;
  --kh-accent-2:        #f5d97e;
  --kh-accent-3:        #50c864;
  --kh-deep:            #0a0a1e;
  --kh-mid:             #1a0d3d;
  --kh-cream:           #f8f5ff;
  --kh-text-p:          #0d0a1e;
  --kh-text-s:          #2a1a4e;
  --kh-text-m:          #8a7aaa;
  --kh-overlay-1:       rgba(180,140,255,.18);
  --kh-overlay-2:       rgba(80,200,100,.10);
  --kh-synopsis-bg-1:   rgba(155,93,229,.07);
  --kh-synopsis-bg-2:   rgba(245,217,126,.05);
  --kh-compare-a:       rgba(192,160,255,.08);
  --kh-compare-b:       rgba(10,10,30,.04);
}

/* ── ミラベル ── */
.kh-theme-mirabel {
  --kh-bg-from:         #3d1a00;
  --kh-bg-mid:          #6b2d00;
  --kh-bg-to:           #5c1a3d;
  --kh-accent-1:        #ffc832;
  --kh-accent-2:        #ff6b35;
  --kh-accent-3:        #e8409e;
  --kh-deep:            #3d1a00;
  --kh-mid:             #6b2d00;
  --kh-cream:           #fffdf0;
  --kh-text-p:          #1e0d00;
  --kh-text-s:          #4a2800;
  --kh-text-m:          #9a7a50;
  --kh-overlay-1:       rgba(255,200,50,.2);
  --kh-overlay-2:       rgba(232,64,158,.12);
  --kh-synopsis-bg-1:   rgba(255,200,50,.07);
  --kh-synopsis-bg-2:   rgba(255,107,53,.05);
  --kh-compare-a:       rgba(255,200,50,.08);
  --kh-compare-b:       rgba(61,26,0,.04);
}

/* ── アトランティス ── */
.kh-theme-atlantis {
  --kh-bg-from:         #020d1a;
  --kh-bg-mid:          #0a2040;
  --kh-bg-to:           #0d3050;
  --kh-accent-1:        #00d4ff;
  --kh-accent-2:        #0080ff;
  --kh-accent-3:        #f5d97e;
  --kh-deep:            #020d1a;
  --kh-mid:             #0a2040;
  --kh-cream:           #f0faff;
  --kh-text-p:          #010810;
  --kh-text-s:          #0a2030;
  --kh-text-m:          #5a8aaa;
  --kh-overlay-1:       rgba(0,200,255,.18);
  --kh-overlay-2:       rgba(245,217,126,.10);
  --kh-synopsis-bg-1:   rgba(0,212,255,.07);
  --kh-synopsis-bg-2:   rgba(0,128,255,.05);
  --kh-compare-a:       rgba(0,212,255,.08);
  --kh-compare-b:       rgba(2,13,26,.04);
}

/* ── シュガー・ラッシュ ── */
.kh-theme-sugarrush {
  --kh-bg-from:         #1a0a2e;
  --kh-bg-mid:          #2d0a4e;
  --kh-bg-to:           #4e0a2e;
  --kh-accent-1:        #ff64c8;
  --kh-accent-2:        #00dcff;
  --kh-accent-3:        #ffe040;
  --kh-deep:            #1a0a2e;
  --kh-mid:             #2d0a4e;
  --kh-cream:           #fff5fd;
  --kh-text-p:          #0d0518;
  --kh-text-s:          #2a0a3a;
  --kh-text-m:          #8a5a8a;
  --kh-overlay-1:       rgba(255,100,200,.2);
  --kh-overlay-2:       rgba(0,220,255,.15);
  --kh-synopsis-bg-1:   rgba(255,100,200,.07);
  --kh-synopsis-bg-2:   rgba(0,220,255,.05);
  --kh-compare-a:       rgba(255,100,200,.08);
  --kh-compare-b:       rgba(26,10,46,.04);
}


/* =====================================================
   共通コンポーネントスタイル
   ※ body や html には書かず .kh-theme-* 内を基準に
===================================================== */

/* ── HERO ── */
.kh-hero {
  position: relative;
  background: linear-gradient(
    160deg,
    var(--kh-bg-from) 0%,
    var(--kh-bg-mid)  45%,
    var(--kh-bg-to)   100%
  );
  min-height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px 80px;
  overflow: hidden;
  /* WPテーマの最大幅リセット */
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

.kh-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,  var(--kh-overlay-1) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 20%, var(--kh-overlay-2) 0%, transparent 60%);
  pointer-events: none;
}

.kh-hero__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* JSで生成する星ドット */
.star-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: kh-twinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
  opacity: 0;
}

@keyframes kh-twinkle {
  0%,  100% { opacity: 0;                  transform: scale(.5); }
  50%        { opacity: var(--max-op, .7); transform: scale(1);  }
}

.kh-hero__eyebrow {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .35em;
  color: var(--kh-accent-1);
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
}

.kh-hero__icon {
  font-size: 34px;
  display: block;
  margin-bottom: 16px;
  position: relative;
  animation: kh-float 4s ease-in-out infinite;
}

@keyframes kh-float {
  0%,  100% { transform: translateY(0);   }
  50%        { transform: translateY(-9px); }
}

.kh-hero__title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  font-size: clamp(24px, 5vw, 46px);
  color: #fff;
  line-height: 1.4;
  text-shadow: 0 2px 30px rgba(0,0,0,.3);
  margin-bottom: 14px;
  position: relative;
}

.kh-hero__subtitle {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--kh-accent-1);
  letter-spacing: .18em;
  margin-bottom: 32px;
  position: relative;
}

.kh-hero__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

.kh-tag {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--kh-accent-1);
  background: rgba(255,255,255,.07);
  letter-spacing: .05em;
}

/* ── 記事本文ラッパー ── */
.kh-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 100px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: var(--kh-text-p);
  line-height: 1.8;
}

/* ── あらすじブロック ── */
.kh-synopsis {
  background: linear-gradient(
    135deg,
    var(--kh-synopsis-bg-1),
    var(--kh-synopsis-bg-2)
  );
  border-left: 3px solid var(--kh-accent-1);
  border-radius: 0 12px 12px 0;
  padding: 28px 28px 28px 32px;
  margin: 48px 0 56px;
  position: relative;
}

.kh-synopsis::before {
  content: 'STORY';
  position: absolute;
  top: -10px;
  left: 32px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--kh-accent-1);
  background: var(--kh-cream);
  padding: 0 8px;
}

.kh-synopsis p {
  font-size: 15px;
  color: var(--kh-text-s);
  line-height: 1.95;
  margin-bottom: 12px;
}

.kh-synopsis p:last-child {
  margin-bottom: 0;
}

/* ── セクション見出し ── */
.kh-section-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 64px 0 32px;
}

.kh-section-heading h2 {
  font-family: 'Shippori Mincho', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--kh-deep);
  white-space: nowrap;
  letter-spacing: .05em;
  /* WPのデフォルトh2余白をリセット */
  margin: 0;
  padding: 0;
  border: none;
}

.kh-section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--kh-accent-1), transparent);
}

/* ── 考察カード ── */
.kh-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 28px;
  box-shadow:
    0 2px 20px rgba(0,0,0,.06),
    0 1px 4px  rgba(0,0,0,.04);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.kh-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

.kh-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--kh-accent-1),
    var(--kh-accent-2),
    var(--kh-accent-3)
  );
}

.kh-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kh-accent-1), var(--kh-accent-2));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
}

.kh-card__title {
  font-family: 'Shippori Mincho', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--kh-deep);
  margin-bottom: 16px;
  line-height: 1.5;
}

.kh-card__body {
  font-size: 15px;
  color: var(--kh-text-s);
  line-height: 1.9;
}

.kh-card__body p {
  margin-bottom: 12px;
}

.kh-card__body p:last-child {
  margin-bottom: 0;
}

/* ── 対比テーブル ── */
.kh-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--kh-accent-1);
  border-radius: 10px;
  overflow: hidden;
  margin: 16px 0;
  font-size: 13px;
}

.kh-compare__head {
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
  font-size: 11px;
}

.kh-compare__head--a {
  background: linear-gradient(135deg, var(--kh-accent-1), var(--kh-accent-2));
  color: #fff;
}

.kh-compare__head--b {
  background: linear-gradient(135deg, var(--kh-mid), var(--kh-deep));
  color: var(--kh-accent-1);
}

.kh-compare__cell {
  padding: 9px 14px;
  line-height: 1.6;
}

.kh-compare__cell--a {
  background: var(--kh-compare-a);
  color: var(--kh-text-s);
}

.kh-compare__cell--b {
  background: var(--kh-compare-b);
  color: var(--kh-text-s);
}

/* ── ノートラベル＆リスト ── */
.kh-note-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #fff;
  background: linear-gradient(135deg, var(--kh-accent-1), var(--kh-accent-2));
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.kh-note-list {
  font-size: 14px;
  color: var(--kh-text-m);
  line-height: 1.9;
  padding-left: 0;
  list-style: none;
  margin: 0;
}

.kh-note-list li {
  padding: 2px 0;
}

.kh-note-list li::before {
  content: '＋ ';
  color: var(--kh-accent-2);
}

/* ── ワールド予想ブロック ── */
.kh-world-section {
  background: linear-gradient(160deg, var(--kh-bg-from), var(--kh-bg-mid));
  border-radius: 20px;
  padding: 40px 36px;
  margin: 56px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.kh-world-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 90% 10%, var(--kh-overlay-2) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 80%, var(--kh-overlay-1) 0%, transparent 60%);
  pointer-events: none;
}

.kh-world-section h3 {
  font-family: 'Shippori Mincho', serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--kh-accent-3);
  position: relative;
  /* WPのh3デフォルト余白リセット */
  margin-top: 0;
  padding: 0;
  border: none;
}

.kh-world-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  position: relative;
}

.kh-world-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 20px;
}

.kh-world-card__label {
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--kh-accent-1);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.kh-world-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kh-world-card ul li {
  font-size: 14px;
  color: rgba(255,255,255,.85);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 8px;
  /* WPのliデフォルトマージンリセット */
  margin: 0;
}

.kh-world-card ul li:last-child {
  border-bottom: none;
}

.kh-world-card ul li::before {
  content: '✦';
  color: var(--kh-accent-3);
  font-size: 10px;
  flex-shrink: 0;
}

/* ── 締めブロック ── */
.kh-closing {
  border-top: 1px solid var(--kh-accent-1);
  border-bottom: 1px solid var(--kh-accent-1);
  padding: 40px 0;
  margin: 56px 0;
  text-align: center;
}

.kh-closing__stars {
  display: block;
  font-size: 20px;
  color: var(--kh-accent-1);
  letter-spacing: .8em;
  margin-bottom: 20px;
}

.kh-closing p {
  font-family: 'Shippori Mincho', serif;
  font-size: 17px;
  color: var(--kh-deep);
  line-height: 2.1;
  /* WPのp余白リセット */
  margin: 0;
}

/* =====================================================
   レスポンシブ
===================================================== */
@media (max-width: 600px) {
  .kh-hero {
    min-height: 360px;
    padding: 48px 20px 60px;
  }

  .kh-article {
    padding: 0 16px 80px;
  }

  .kh-card {
    padding: 24px 20px;
  }

  .kh-world-section {
    padding: 28px 20px;
  }

  .kh-world-grid {
    grid-template-columns: 1fr;
  }

  .kh-compare {
    font-size: 12px;
  }

  .kh-compare__head {
    font-size: 10px;
    padding: 8px 10px;
  }

  .kh-compare__cell {
    padding: 8px 10px;
  }

  .kh-synopsis {
    padding: 20px 20px 20px 24px;
  }

  .kh-closing p {
    font-size: 15px;
  }
}


/* =====================================================
   KH記事ページ限定：タイトル・目次を非表示
   =====================================================

   「KH考察」カテゴリの記事ページでのみ
   投稿タイトルと目次プラグインを非表示にします。

   body に .kh-post クラスを付与する方法:
   functions.php に下記を追記してください↓

   add_filter('body_class', function($classes) {
     if (is_single() && has_category('kh-analysis')) {
       $classes[] = 'kh-post';
     }
     return $classes;
   });

   または記事個別に対応する場合は
   functions.php の追記分ファイルを参照してください。
===================================================== */

/* ──
   方法A: body.kh-post クラスで制御（推奨）
   特定カテゴリや投稿にだけ適用したい場合
── */

/* 投稿タイトル非表示 */
body.kh-post .entry-title,
body.kh-post .post-title,
body.kh-post h1.title,
body.kh-post .page-title,
body.kh-post .article-title,
body.kh-post header.entry-header,
body.kh-post .entry-header {
  display: none !important;
}

/* 目次非表示
   ─ Cocoon 内蔵目次（確定セレクタ）─────────────────── */
body.kh-post .toc-block,             /* Cocoon ブロックエディタ目次 */
body.kh-post .toc,                   /* Cocoon クラシックエディタ目次 */
body.kh-post #toc,
body.kh-post .toc-title,
body.kh-post #toc-title,
body.kh-post .toc-list,
body.kh-post .toc-widget,
body.kh-post .widget-toc,
body.kh-post .cocoon-block-toc,
body.kh-post [class^="toc"],         /* toc で始まるクラスすべて */
body.kh-post [id^="toc"] {          /* toc で始まるIDすべて */
  display: none !important;
}

/* =====================================================
   サムネイル（アイキャッチ）非表示
   投稿一覧では表示、記事を開いた先では非表示
===================================================== */

/* 主要テーマのアイキャッチ出力箇所を網羅 */
body.kh-post .post-thumbnail,
body.kh-post .entry-thumbnail,
body.kh-post .featured-image,
body.kh-post .eyecatch,
body.kh-post .article-thumbnail,
body.kh-post .wp-post-image,
body.kh-post img.attachment-post-thumbnail,
body.kh-post .single-thumbnail,
body.kh-post .thumnail,          /* Cocoon */
body.kh-post .entry-card-thumb,  /* Cocoon カード */
body.kh-post .swell-block-eyecatch,        /* SWELL */
body.kh-post .p-entryData__thumb,          /* SWELL */
body.kh-post .c-postThumbnail,
body.kh-post .featured-img-wrap {
  display: none !important;
}


/* =====================================================
   記事内 画像ブロック（.kh-image）
   カード間・ワールド予想手前に自然に挿入するコンポーネント
===================================================== */

.kh-image {
  margin: 40px 0 44px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  /* WPテーマのimg最大幅リセット対策 */
  line-height: 0;
}

/* WordPress が img に付与するデフォルト余白をリセット */
.kh-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  /* WPテーマの img スタイルを上書き */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* 画像キャプション */
.kh-image__caption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12px;
  color: var(--kh-text-m);
  letter-spacing: .05em;
  line-height: 1;
}

.kh-image__caption::before {
  content: '▶';
  font-size: 8px;
  color: var(--kh-accent-1);
  flex-shrink: 0;
}

/* ── バリエーション: 右寄せ小サイズ（本文に馴染むタイプ） ── */
.kh-image--float-right {
  float: right;
  width: 44%;
  margin: 8px 0 24px 28px;
  border-radius: 12px;
}

.kh-image--float-right img {
  border-radius: 12px;
}

/* float解除用 */
.kh-clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* モバイルでfloat解除 */
@media (max-width: 600px) {
  .kh-image--float-right {
    float: none;
    width: 100%;
    margin: 32px 0;
  }
}


/* =====================================================
   追加：目次プラグイン・サムネイル・コメント欄 強化版非表示
   ※ 上記の body.kh-post セクションを補完します
===================================================== */

/* ── 目次プラグイン 追加対応 ── */

/* Table of Contents Plus プラグイン */
body.kh-post #toc_container,
body.kh-post .toc_widget_list,

/* Easy Table of Contents プラグイン */
body.kh-post #ez-toc-container,
body.kh-post .ez-toc-widget-container,
body.kh-post div[id^="ez-toc"],
body.kh-post nav[id^="ez-toc"],

/* Rank Math TOC */
body.kh-post .rank-math-toc,
body.kh-post .wp-block-rank-math-toc-block,

/* LuckyWP TOC */
body.kh-post .luckywp-toc,
body.kh-post .wp-block-luckywp-toc,

/* SWELL 内蔵目次 */
body.kh-post .swell-block-toc,
body.kh-post .p-toc,

/* ブロックテーマ (Twenty Twenty-Three 等) */
body.kh-post .wp-block-table-of-contents,
body.kh-post .wp-block-yoast-table-of-contents,

/* 汎用パターン */
body.kh-post .table-of-contents,
body.kh-post [class*="-toc"][class*="block"],
body.kh-post [class*="table-of-contents"] {
  display: none !important;
}

/* ── サムネイル・アイキャッチ 追加対応 ── */

/* ブロックテーマ */
body.kh-post .wp-block-post-featured-image,
/* 汎用 */
body.kh-post figure.post-thumbnail,
body.kh-post .post-hero-image,
body.kh-post .single-post-thumbnail,
body.kh-post .thumbnail-wrap,
body.kh-post [class*="featured-img"],
/* Cocoon アイキャッチ追加箇所 */
body.kh-post .a-wrap .eye-catch,
body.kh-post .a-wrap .eyecatch-wrap,
body.kh-post .eye-catch-wrap,
/* JIN / Emanon等 */
body.kh-post .post-image,
body.kh-post .single-image {
  display: none !important;
}

/* ── コメント欄 非表示（CSS） ── */

body.kh-post #comments,
body.kh-post .comments-area,
body.kh-post .comment-respond,
body.kh-post #respond,

/* WordPress コアブロック */
body.kh-post .wp-block-comments,
body.kh-post .wp-block-comments-query-loop,
body.kh-post .wp-block-post-comments-form,

/* Cocoon */
body.kh-post .cocoon-block-comment,
body.kh-post .entry-comment,

/* SWELL */
body.kh-post .p-commentBox,
body.kh-post .swell-block-comments,

/* 汎用 */
body.kh-post .comment-list,
body.kh-post .comments-title,
body.kh-post .discussion,
body.kh-post .post-comments,
body.kh-post [id="comments"],
body.kh-post [class*="comment-area"],
body.kh-post [class*="comment-section"] {
  display: none !important;
}