@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* ============================================================
   AthleteRPG カスタムデザイン
   コンセプト：RPG × アスリート ／ プロフェッショナル × 疾走感
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Oswald:wght@600;700&display=swap');

/* ── ブランドカラー変数 ── */
:root {
  --color-primary:   #0f0e17;   /* メインダーク */
  --color-secondary: #1a1a2e;   /* ヘッダー */
  --color-accent:    #e94560;   /* アクセントレッド */
  --color-gold:      #f5a623;   /* RPGゴールド */
  --color-text:      #2d2d2d;   /* 本文 */
  --color-text-sub:  #666666;   /* サブテキスト */
  --color-bg:        #f7f8fc;   /* ページ背景 */
  --color-white:     #ffffff;
  --color-border:    #e8eaf0;
  --radius:          8px;
  --shadow-sm:       0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:       0 4px 20px rgba(0,0,0,0.12);
  --transition:      all 0.25s ease;
  --font-main:       'Noto Sans JP', sans-serif;
  --font-display:    'Oswald', 'Noto Sans JP', sans-serif;
}

/* ── ベース ── */
body {
  font-family: var(--font-main) !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  line-height: 1.85 !important;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); transition: var(--transition); }
a:hover { color: #c0334d; text-decoration: none; }

/* ============================================================
   ヘッダー
   ============================================================ */
#header,
.header,
.header-container {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%) !important;
  border-bottom: 3px solid var(--color-accent) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* サイト名 ── Cocoonインラインstyleの .site-name{display:none} を強制上書き */
.site-name,
a.site-name,
.site-name-text-link,
.logo a,
.logo-text a,
#header .site-name,
#header-in .site-name,
.header-in a.site-name-text-link {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#site-name,
.logo,
.logo-text,
.site-name-text,
.header .site-name-text,
.header .logo,
.header .logo h1 {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--color-white) !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
}

.site-name-text-link,
.logo a {
  color: var(--color-white) !important;
  text-decoration: none !important;
}

.site-name-text-link:hover,
.logo a:hover {
  color: var(--color-gold) !important;
}

/* ヘッダー高さをコンパクトに */
#header,
.header {
  min-height: 80px !important;
  height: auto !important;
}

#header-in,
.header-in {
  min-height: 80px !important;
  padding: 16px 0 !important;
  align-items: center !important;
}

/* サイト説明 */
#site-description,
.site-description,
.header .site-description {
  color: rgba(255,255,255,0.55) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  margin-top: 4px !important;
}

/* ============================================================
   ナビゲーション
   ============================================================ */
.navi,
#navi,
.navi-in,
.header-navi {
  background: rgba(255,255,255,0.05) !important;
}

.navi .navi-in > ul > li > a,
.navi-in > ul > li > a,
#navi .navi-in > ul > li > a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  padding: 12px 18px !important;
  transition: var(--transition) !important;
}

.navi .navi-in > ul > li > a:hover,
.navi-in > ul > li > a:hover {
  color: var(--color-gold) !important;
  background: rgba(255,255,255,0.08) !important;
}

/* ============================================================
   メインコンテンツエリア
   ============================================================ */
/* コンテナ幅 ── Cocoonのメイン(860)+サイドバー(376)+gap に合わせる */
#container,
#wrap {
  margin: 0 auto !important;
}

.content-in,
.contents-in,
.content-in.wrap,
.wrap.content-in,
body .content-in,
body .wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

.main {
  background: transparent !important;
}

/* ============================================================
   記事カード（一覧ページ）
   ============================================================ */
.entry-card,
.card-wrap,
.cat-card {
  background: var(--color-white) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: var(--transition) !important;
}

.entry-card:hover,
.card-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--color-accent) !important;
}

/* カードタイトル */
.card-title,
.entry-card-title {
  font-family: var(--font-main) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--color-text) !important;
}

/* カテゴリラベル */
.cat-label,
.entry-categories-in .cat-label {
  background: var(--color-accent) !important;
  color: var(--color-white) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 3px 10px !important;
  border-radius: 3px !important;
  border: none !important;
}

/* ── カテゴリ別ウィジェットカード（トップ下部グリッド）── */
/* リンクラッパー：Cocoonのdisplay:flexを強制リセット */
body .widget-entry-cards .a-wrap,
body .widget-entry-cards a.a-wrap,
.widget-entry-cards .a-wrap,
.widget-entry-cards .widget-entry-card-link {
  display: block !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  overflow: hidden !important;
}

/* カード本体：Cocoonのpadding:40pxを強制リセット */
body .widget-entry-cards .widget-entry-card,
body .widget-entry-cards .new-entry-card,
body .widget-entry-cards .entry-card,
.widget-entry-cards .widget-entry-card,
.widget-entry-cards .new-entry-card {
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* サムネ：カード幅いっぱい、上部配置 */
body .widget-entry-cards .widget-entry-card-thumb,
body .widget-entry-cards .card-thumb,
body .widget-entry-cards figure.widget-entry-card-thumb,
.widget-entry-cards .widget-entry-card-thumb,
.widget-entry-cards .card-thumb {
  width: 100% !important;
  max-width: 100% !important;
  min-width: auto !important;
  height: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 9 !important;
}

body .widget-entry-cards .widget-entry-card-thumb img,
body .widget-entry-cards .card-thumb img,
.widget-entry-cards .widget-entry-card-thumb img,
.widget-entry-cards .card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* テキスト：サムネの下に横向き配置、はみ出し防止 */
body .widget-entry-cards .widget-entry-card-content,
body .widget-entry-cards .card-content,
body .widget-entry-cards div.widget-entry-card-content,
.widget-entry-cards .widget-entry-card-content,
.widget-entry-cards .card-content {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body .widget-entry-cards .widget-entry-card-title,
body .widget-entry-cards .card-title,
.widget-entry-cards .widget-entry-card-title,
.widget-entry-cards .card-title {
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* カード内の矢印アイコンを非表示 */
.widget-entry-cards .card-arrow,
.widget-entry-cards .widget-entry-card-link::after {
  display: none !important;
}

/* ============================================================
   記事ページ
   ============================================================ */
.article,
.entry,
.hentry {
  background: var(--color-white) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 40px !important;
  border: none !important;
}

/* 記事タイトル */
.entry-title,
.article-title {
  font-family: var(--font-main) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  color: var(--color-primary) !important;
  border-left: 5px solid var(--color-accent) !important;
  padding-left: 16px !important;
  margin-bottom: 20px !important;
}

/* ============================================================
   見出し
   ============================================================ */

/* H2: A案 RPGクエストバナー */
.entry-content h2,
.article-body h2 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--color-white) !important;
  background: linear-gradient(135deg, var(--color-secondary) 0%, #2d3561 100%) !important;
  padding: 16px 24px 16px 20px !important;
  border-radius: var(--radius) !important;
  border: none !important;
  border-left: 5px solid var(--color-accent) !important;
  margin: 40px 0 20px !important;
  position: relative !important;
  letter-spacing: 0.5px !important;
  line-height: 1.5 !important;
}

/* H3: B案 アクセントマーク＋ボトムライン */
.entry-content h3,
.article-body h3,
body .article .entry-content h3,
body .article h3,
.article h3.wp-block-heading {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--color-secondary) !important;
  padding: 8px 0 12px 44px !important;
  position: relative !important;
  line-height: 1.5 !important;
  border: none !important;
  border-bottom: 2px solid var(--color-border) !important;
  border-left: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  margin: 28px 0 14px !important;
}
.entry-content h3::before,
.article-body h3::before,
body .article .entry-content h3::before,
body .article h3::before,
.article h3.wp-block-heading::before {
  content: '\25A0' !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  font-size: 20px !important;
  color: var(--color-accent) !important;
  line-height: 1 !important;
  display: block !important;
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
}

/* H4: C案 グラデーション背景インライン */
.entry-content h4,
.article-body h4,
body .article .entry-content h4,
body .article h4,
.article h4.wp-block-heading {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  padding: 4px 12px !important;
  background: linear-gradient(90deg, rgba(233,69,96,0.08), transparent) !important;
  border-radius: 4px !important;
  display: inline-block !important;
  line-height: 1.5 !important;
  margin: 20px 0 10px !important;
  border: none !important;
  border-left: none !important;
}

/* ============================================================
   本文
   ============================================================ */
.entry-content p,
.article-body p {
  font-size: 15px !important;
  line-height: 1.95 !important;
  color: #3d3d3d !important;
  margin-bottom: 18px !important;
}

.entry-content strong,
.article-body strong {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  background: linear-gradient(transparent 60%, rgba(245,166,35,0.3) 60%) !important;
}

/* ============================================================
   テーブル
   ============================================================ */
.entry-content table,
.article-body table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  margin: 20px 0 !important;
  font-size: 14px !important;
}

.entry-content table thead tr,
.article-body table thead tr {
  background: var(--color-secondary) !important;
  color: var(--color-white) !important;
}

.entry-content table th,
.article-body table th {
  padding: 12px 14px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  border: none !important;
  color: var(--color-white) !important;
}

.entry-content table td,
.article-body table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
}

.entry-content table tbody tr:nth-child(even),
.article-body table tbody tr:nth-child(even) {
  background: #f7f8fc !important;
}

.entry-content table tbody tr:hover,
.article-body table tbody tr:hover {
  background: #eef2ff !important;
}

/* ============================================================
   リスト
   ============================================================ */
.entry-content ul:not([class]),
.article-body ul:not([class]),
.wp-block-list {
  padding-left: 0 !important;
  list-style: none !important;
  margin: 14px 0 22px !important;
}

.entry-content ul:not([class]) li,
.article-body ul:not([class]) li,
.wp-block-list li {
  padding: 7px 0 7px 26px !important;
  position: relative !important;
  font-size: 14px !important;
  border-bottom: 1px solid #f0f2f8 !important;
  line-height: 1.7 !important;
}

.entry-content ul:not([class]) li::before,
.article-body ul:not([class]) li::before,
.wp-block-list li::before {
  content: '▸' !important;
  position: absolute !important;
  left: 6px !important;
  color: var(--color-accent) !important;
  font-weight: 700 !important;
}

/* ============================================================
   目次（TOC）
   ============================================================ */
#toc,
.toc,
.toc-box {
  background: #f7f8fc !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  border-top: 4px solid var(--color-accent) !important;
  padding: 20px 24px !important;
  margin: 28px 0 !important;
}

.toc-title {
  font-weight: 800 !important;
  font-size: 14px !important;
  color: var(--color-secondary) !important;
  margin-bottom: 12px !important;
  letter-spacing: 1px !important;
}

.toc ol li a,
.toc ul li a {
  color: var(--color-secondary) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.toc ol li a:hover,
.toc ul li a:hover {
  color: var(--color-accent) !important;
}

/* ============================================================
   ボックス・吹き出し
   ============================================================ */
/* Cocoon標準ボックス */
.box-border,
.box-info,
.box-memo,
.box-caution {
  border-radius: var(--radius) !important;
  border-width: 2px !important;
  font-size: 14px !important;
}

.box-info  { border-color: #4a90d9 !important; background: #f0f7ff !important; }
.box-memo  { border-color: var(--color-gold) !important; background: #fffbf0 !important; }
.box-caution { border-color: var(--color-accent) !important; background: #fff5f7 !important; }

/* ============================================================
   ボタン
   ============================================================ */
.btn,
.a-btn,
.wp-block-button__link,
.entry-content .btn {
  background: linear-gradient(135deg, var(--color-accent), #c0334d) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 28px !important;
  transition: var(--transition) !important;
  box-shadow: 0 4px 15px rgba(233,69,96,0.35) !important;
  letter-spacing: 0.5px !important;
}

.btn:hover,
.a-btn:hover,
.wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(233,69,96,0.45) !important;
  color: var(--color-white) !important;
}

/* ============================================================
   サイドバー
   ============================================================ */
.sidebar {
  background: transparent !important;
}

.widget {
  background: var(--color-white) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  border: 1px solid var(--color-border) !important;
}

.widget-title,
.widgettitle {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--color-white) !important;
  background: linear-gradient(135deg, var(--color-secondary), #2d3561) !important;
  padding: 8px 14px !important;
  border-radius: 5px !important;
  margin: -20px -20px 16px !important;
  letter-spacing: 1px !important;
  border: none !important;
}

/* ============================================================
   パンくずリスト
   ============================================================ */
.breadcrumb,
#breadcrumb,
.breadcrumb-wrap {
  font-size: 12px !important;
  color: var(--color-text-sub) !important;
  padding: 10px 0 !important;
  background: transparent !important;
}

.breadcrumb a {
  color: var(--color-accent) !important;
}

/* ============================================================
   著者ボックス
   ============================================================ */
.author-box,
.author-widget-wrapper {
  background: var(--color-white) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--color-border) !important;
  border-top: 4px solid var(--color-accent) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 24px !important;
}

/* ============================================================
   フッター
   ============================================================ */
#footer,
.footer {
  background: var(--color-primary) !important;
  color: rgba(255,255,255,0.6) !important;
  border-top: 3px solid var(--color-accent) !important;
  padding: 40px 0 20px !important;
}

.footer-widget-area {
  background: var(--color-secondary) !important;
}

.footer a {
  color: rgba(255,255,255,0.7) !important;
}

.footer a:hover {
  color: var(--color-gold) !important;
}

.footer .site-info,
#copyright {
  font-size: 12px !important;
  color: rgba(255,255,255,0.4) !important;
  text-align: center !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  margin-top: 20px !important;
}

/* ============================================================
   ページネーション
   ============================================================ */
.pagination .current,
.page-numbers.current {
  background: var(--color-accent) !important;
  color: var(--color-white) !important;
  border-color: var(--color-accent) !important;
}

.pagination a,
.page-numbers a {
  color: var(--color-secondary) !important;
  border-color: var(--color-border) !important;
}

.pagination a:hover,
.page-numbers a:hover {
  background: var(--color-accent) !important;
  color: var(--color-white) !important;
  border-color: var(--color-accent) !important;
}

/* ============================================================
   記事メタ情報（日付・カテゴリ）
   ============================================================ */
.post-date,
.entry-date,
.post-categories,
.entry-meta {
  font-size: 12px !important;
  color: var(--color-text-sub) !important;
}

/* ============================================================
   関連記事
   ============================================================ */
.related-entries-title,
.related-post-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--color-secondary) !important;
  border-left: 4px solid var(--color-accent) !important;
  padding-left: 12px !important;
}

/* ============================================================
   スクロールバー（Webkit）
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; }

/* ============================================================
   レスポンシブ（タブレット: 1023px以下）
   ============================================================ */
@media screen and (max-width: 1023px) {
  .article, .hentry { padding: 28px 20px !important; }
  .entry-title, .article-title { font-size: 22px !important; }

  /* コンテンツ幅 */
  #container, #wrap, .content-in, .contents-in {
    padding: 0 16px !important;
  }
}

/* ============================================================
   レスポンシブ（スマホ: 834px以下）
   ============================================================ */
@media screen and (max-width: 834px) {

  /* ── ヘッダー ── */
  #header, .header {
    min-height: 60px !important;
    height: auto !important;
  }
  #header-in, .header-in {
    min-height: 60px !important;
    padding: 12px 16px !important;
  }
  .site-name-text,
  .header .site-name-text a,
  .site-name,
  .logo,
  .logo-text {
    font-size: 20px !important;
    letter-spacing: 1px !important;
  }
  .site-description { font-size: 10px !important; }

  /* ── メインコンテンツ ── */
  #container, #wrap, .content-in, .contents-in {
    padding: 0 12px !important;
  }

  /* ── サイドバー：モバイルでは非表示 ── */
  .sidebar,
  #sidebar,
  .sidebar-wrap {
    display: none !important;
  }

  /* メインコンテンツを全幅に */
  .main,
  #main,
  .content-in .main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
  }

  /* ── セクション見出し（新着記事 etc.） ── */
  .front-title-text,
  .list-title,
  .widget-entry-cards-title {
    font-size: 16px !important;
  }

  /* ── 記事カード ── */
  .entry-card,
  .card-wrap,
  .cat-card {
    border-radius: 8px !important;
    margin-bottom: 12px !important;
  }
  .entry-card:hover,
  .card-wrap:hover {
    transform: none !important; /* モバイルではホバーエフェクト不要 */
  }

  /* カード内レイアウト：横並びを維持しつつバランス調整 */
  .entry-card-wrap .entry-card-content,
  .card-content {
    padding: 10px 12px !important;
  }
  .card-title,
  .entry-card-title {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .card-snippet,
  .entry-card-snippet {
    font-size: 12px !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 3 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* PVカウンター */
  .entry-card .post-count,
  .entry-card-meta .post-count {
    font-size: 10px !important;
  }

  /* ── 記事ページ ── */
  .article, .entry, .hentry {
    padding: 20px 16px !important;
    border-radius: 8px !important;
  }
  .entry-title, .article-title {
    font-size: 19px !important;
    padding-left: 12px !important;
    border-left-width: 4px !important;
  }
  .entry-content h2, .article-body h2 {
    font-size: 16px !important;
    padding: 12px 16px 12px 16px !important;
    margin: 28px 0 14px !important;
  }
  .entry-content h3, .article-body h3 {
    font-size: 14px !important;
    padding: 6px 0 10px 36px !important;
  }
  .entry-content h4, .article-body h4 {
    font-size: 13px !important;
    padding: 3px 10px !important;
  }
  .entry-content p, .article-body p {
    font-size: 14px !important;
    line-height: 1.85 !important;
  }

  /* ── テーブル ── */
  .entry-content table { font-size: 12px !important; }
  .entry-content table th,
  .entry-content table td { padding: 8px 6px !important; }
  /* テーブル横スクロール */
  .entry-content .wp-block-table,
  .entry-content figure.wp-block-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── 目次（TOC） ── */
  #toc, .toc, .toc-box {
    padding: 14px 16px !important;
  }

  /* ── リスト ── */
  .entry-content ul:not([class]) li,
  .article-body ul:not([class]) li,
  .wp-block-list li {
    padding: 6px 0 6px 22px !important;
    font-size: 13px !important;
  }

  /* ── ボックス・吹き出し ── */
  .box-border, .box-info, .box-memo, .box-caution {
    font-size: 13px !important;
  }

  /* ── カテゴリ別グリッド（トップページ下部） ── */
  .front-top-page .tab-cont,
  .tab-content,
  .widget-entry-cards {
    gap: 8px !important;
  }
  .widget-entry-card,
  .widget-entry-cards .widget-entry-card-link {
    font-size: 12px !important;
  }
  .widget-entry-card-thumb {
    min-width: 80px !important;
    width: 80px !important;
    height: auto !important;
  }
  .widget-entry-card-content {
    padding: 4px 8px !important;
  }
  .widget-entry-card-title {
    font-size: 12px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ── ナビ型カテゴリ一覧 ── */
  .navi-entry-cards {
    display: flex !important;
    flex-direction: column !important;
  }
  .navi-entry-cards .a-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    border-bottom: 1px solid var(--color-border) !important;
  }

  /* ── 2カラム→1カラム ── */
  .front-2col,
  .two-column,
  .widget-entry-cards.card-large-image {
    display: block !important;
  }
  .front-2col .col-1,
  .front-2col .col-2 {
    width: 100% !important;
    float: none !important;
  }

  /* ── サイドバー ── */
  .sidebar {
    margin-top: 20px !important;
  }
  .widget {
    padding: 16px !important;
    margin-bottom: 14px !important;
  }
  .widget-title, .widgettitle {
    font-size: 13px !important;
    padding: 6px 12px !important;
    margin: -16px -16px 12px !important;
  }

  /* ── ボタン ── */
  .btn, .a-btn, .wp-block-button__link, .entry-content .btn {
    padding: 10px 20px !important;
    font-size: 13px !important;
  }
  .btn:hover, .a-btn:hover, .wp-block-button__link:hover {
    transform: none !important;
  }

  /* ── 著者ボックス ── */
  .author-box, .author-widget-wrapper {
    padding: 16px !important;
  }

  /* ── フッター ── */
  #footer, .footer {
    padding: 24px 16px 14px !important;
  }
  .footer .site-info, #copyright {
    font-size: 11px !important;
  }

  /* ── ページネーション ── */
  .pagination .page-numbers,
  .page-numbers {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  /* ── モバイルナビ（ハンバーガー） ── */
  .mobile-menu-buttons,
  .menu-buttons {
    background: var(--color-primary) !important;
    border-top: 2px solid var(--color-accent) !important;
  }
  .mobile-menu-buttons .menu-button,
  .menu-buttons .menu-button {
    color: rgba(255,255,255,0.8) !important;
  }

  /* ── パンくず ── */
  .breadcrumb, #breadcrumb {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  /* ── 「もっと見る」ボタン ── */
  .more-link-wrap .more-link,
  .more-wrap .more-link,
  .entry-read-more {
    font-size: 13px !important;
    padding: 8px 20px !important;
  }

  /* ── 記事装飾コンポーネント（タブレット/モバイル） ── */
  .entry-content .lead-box {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }
  .entry-content .result-box,
  .entry-content .summary-box {
    padding: 16px 18px !important;
  }
  .entry-content .product-card {
    flex-direction: column !important;
    padding: 16px !important;
  }
  .entry-content .product-rank {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  .entry-content .product-price {
    font-size: 16px !important;
  }
  .entry-content .faq-q,
  .entry-content .faq-a {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
  .entry-content table.compare-table {
    font-size: 12px !important;
  }
  .entry-content table.compare-table thead th,
  .entry-content table.compare-table tbody td {
    padding: 8px 6px !important;
  }
}

/* ============================================================
   記事装飾コンポーネント
   ============================================================ */

/* ── リード文ボックス ── */
.entry-content .lead-box {
  background: #f8f9ff !important;
  border-left: 4px solid #4a90d9 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 16px 20px !important;
  margin-bottom: 24px !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #444 !important;
}

/* ── この記事でわかること ── */
.entry-content .toc-box {
  background: #fff8e6 !important;
  border: 2px solid var(--color-gold) !important;
  border-radius: 10px !important;
  padding: 18px 20px !important;
  margin-bottom: 28px !important;
}
.entry-content .toc-box h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #b8860b !important;
  margin-bottom: 10px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
/* ボックス内H3のリセット（ブランドH3スタイルを完全無効化） */
body .article .entry-content div.toc-box h3,
body .article .entry-content div.result-box h3,
body .article .entry-content div.summary-box h3,
body .article div.toc-box h3,
body .article div.result-box h3,
body .article div.summary-box h3,
.article .entry-content div.toc-box h3,
.article .entry-content div.result-box h3,
.article .entry-content div.summary-box h3 {
  border-bottom: none !important;
  border-left: none !important;
  padding-left: 0 !important;
  padding: 0 0 8px 0 !important;
  position: static !important;
  background: transparent !important;
  background-color: transparent !important;
}
body .article .entry-content div.toc-box h3::before,
body .article .entry-content div.result-box h3::before,
body .article .entry-content div.summary-box h3::before,
body .article div.toc-box h3::before,
body .article div.result-box h3::before,
body .article div.summary-box h3::before,
.article .entry-content div.toc-box h3::before,
.article .entry-content div.result-box h3::before,
.article .entry-content div.summary-box h3::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.entry-content .toc-box ol {
  padding-left: 20px !important;
  font-size: 14px !important;
  color: #555 !important;
  line-height: 2 !important;
}

/* ── 結論ファーストボックス ── */
.entry-content .result-box {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #0f3460 100%) !important;
  color: var(--color-white) !important;
  border-radius: 10px !important;
  padding: 20px 24px !important;
  margin: 20px 0 28px !important;
}
.entry-content .result-box h3 {
  color: var(--color-gold) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.entry-content .result-box h3::before { content: none !important; }
.entry-content .result-box ol,
.entry-content .result-box ul {
  padding-left: 20px !important;
  font-size: 14px !important;
  line-height: 2 !important;
  color: #e0e0e0 !important;
}
.entry-content .result-box li strong { color: var(--color-gold) !important; }

/* ── ポイントボックス（緑） ── */
.entry-content .point-box {
  background: #f0fff4 !important;
  border: 1px solid #68d391 !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin: 16px 0 !important;
  font-size: 14px !important;
  color: #276749 !important;
  line-height: 1.8 !important;
}
.entry-content .point-box strong { color: #276749 !important; }

/* ── 警告ボックス（赤） ── */
.entry-content .warning-box {
  background: #fff5f5 !important;
  border: 1px solid #fc8181 !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin: 16px 0 !important;
  font-size: 14px !important;
  color: #c53030 !important;
  line-height: 1.8 !important;
}

/* ── チェックリスト（✅） ── */
.entry-content ul.check-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 20px !important;
}
.entry-content ul.check-list li {
  padding: 8px 0 8px 32px !important;
  position: relative !important;
  font-size: 14px !important;
  color: #444 !important;
  border-bottom: 1px solid #f5f5f5 !important;
  line-height: 1.7 !important;
}
.entry-content ul.check-list li::before {
  content: '\2705' !important;
  position: absolute !important;
  left: 0 !important;
  font-size: 14px !important;
}

/* ── クロスリスト（❌） ── */
.entry-content ul.cross-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 20px !important;
}
.entry-content ul.cross-list li {
  padding: 8px 0 8px 32px !important;
  position: relative !important;
  font-size: 14px !important;
  color: #666 !important;
  border-bottom: 1px solid #f5f5f5 !important;
  line-height: 1.7 !important;
}
.entry-content ul.cross-list li::before {
  content: '\274C' !important;
  position: absolute !important;
  left: 0 !important;
  font-size: 12px !important;
}

/* ── FAQブロック ── */
.entry-content .faq-item {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  margin: 12px 0 !important;
  overflow: hidden !important;
}
.entry-content .faq-q {
  background: #f7f9ff !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-secondary) !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
.entry-content .faq-q-label {
  background: #4a90d9 !important;
  color: white !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.entry-content .faq-a {
  padding: 14px 18px !important;
  font-size: 14px !important;
  color: #555 !important;
  line-height: 1.8 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
.entry-content .faq-a-label {
  background: var(--color-accent) !important;
  color: white !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── まとめボックス ── */
.entry-content .summary-box {
  background: linear-gradient(135deg, var(--color-secondary), #0f3460) !important;
  color: var(--color-white) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin: 28px 0 16px !important;
}
.entry-content .summary-box h3 {
  color: var(--color-gold) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.entry-content .summary-box h3::before { content: none !important; }
.entry-content .summary-box ul {
  list-style: none !important;
  padding: 0 !important;
}
.entry-content .summary-box ul li {
  padding: 6px 0 6px 24px !important;
  position: relative !important;
  font-size: 14px !important;
  color: #e0e0e0 !important;
  line-height: 1.7 !important;
}
.entry-content .summary-box ul li::before {
  content: '\203A' !important;
  position: absolute !important;
  left: 8px !important;
  color: var(--color-gold) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.entry-content .summary-box ul li strong { color: var(--color-gold) !important; }

/* ── 比較テーブル（ブランドテーマ） ── */
.entry-content table.compare-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 16px 0 24px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
.entry-content table.compare-table thead tr {
  background: var(--color-secondary) !important;
  color: white !important;
}
.entry-content table.compare-table thead th {
  padding: 12px !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: white !important;
  border: none !important;
}
.entry-content table.compare-table tbody tr:nth-child(even) { background: #f9f9f9 !important; }
.entry-content table.compare-table tbody tr:hover { background: #f0f6ff !important; }
.entry-content table.compare-table tbody td {
  padding: 11px 12px !important;
  border-bottom: 1px solid #eee !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.entry-content table.compare-table tbody td:first-child {
  text-align: left !important;
  font-weight: 600 !important;
}
.entry-content .rank-badge {
  display: inline-block !important;
  background: var(--color-gold) !important;
  color: var(--color-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}
.entry-content .rank-2 { background: #c0c0c0 !important; }
.entry-content .rank-3 { background: #cd7f32 !important; color: white !important; }

/* ── 商品カード ── */
.entry-content .product-card {
  border: 2px solid #e0e0e0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin: 16px 0 !important;
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  background: white !important;
  transition: box-shadow 0.2s !important;
}
.entry-content .product-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}
.entry-content .product-card.rank1 {
  border-color: var(--color-gold) !important;
  background: #fffdf0 !important;
}
.entry-content .product-card.rank2 { border-color: #c0c0c0 !important; }
.entry-content .product-rank {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--color-gold) !important;
  color: var(--color-secondary) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.entry-content .product-rank.r2 { background: #c0c0c0 !important; }
.entry-content .product-rank.r3 { background: #cd7f32 !important; color: white !important; }
.entry-content .product-info { flex: 1 !important; }
.entry-content .product-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-secondary) !important;
  margin-bottom: 6px !important;
}
.entry-content .product-tags {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}
.entry-content .tag {
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.entry-content .tag-blue { background: #e8f4ff !important; color: #4a90d9 !important; }
.entry-content .tag-green { background: #e8fff0 !important; color: #27ae60 !important; }
.entry-content .tag-red { background: #fff0f0 !important; color: var(--color-accent) !important; }
.entry-content .product-desc {
  font-size: 13px !important;
  color: #666 !important;
  line-height: 1.7 !important;
  margin-bottom: 10px !important;
}
.entry-content .product-price {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  margin-bottom: 8px !important;
}
.entry-content .product-price span {
  font-size: 12px !important;
  color: #888 !important;
  font-weight: 400 !important;
}
.entry-content .btn-amazon {
  display: inline-block !important;
  background: linear-gradient(180deg, #f7dfa5, #f0c14b) !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 20px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  border: 1px solid #a88734 !important;
}
.entry-content .btn-amazon:hover {
  background: linear-gradient(180deg, #f0c14b, #e8b430) !important;
}

/* ── 吹き出し（Cocoon既存の上書き） ── */
body .article .speech-wrap .speech-balloon {
  background: #f0f6ff !important;
  border-color: #d0e0f5 !important;
  border-radius: 0 12px 12px 12px !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #444 !important;
}
body .article .speech-wrap .speech-balloon::before {
  border-right-color: #d0e0f5 !important;
}
body .article .speech-wrap .speech-balloon::after {
  border-right-color: #f0f6ff !important;
}

/* ── Cocoon ボックス系のブランド統一 ── */
body .article .blank-box {
  border-radius: 8px !important;
}
body .article .information-box,
body .article .info-box {
  background: #f8f9ff !important;
  border-color: #4a90d9 !important;
  border-radius: 8px !important;
}
body .article .alert-box {
  background: #fff5f5 !important;
  border-color: #fc8181 !important;
  border-radius: 8px !important;
}
body .article .question-box {
  background: #fff8e6 !important;
  border-color: var(--color-gold) !important;
  border-radius: 8px !important;
}
body .article .memo-box {
  background: #f0fff4 !important;
  border-color: #68d391 !important;
  border-radius: 8px !important;
}

/* ── 区切り線 ── */
.entry-content .divider,
.entry-content hr {
  height: 1px !important;
  background: #f0f0f0 !important;
  border: none !important;
  margin: 24px 0 !important;
}

/* ============================================================
   レスポンシブ（スマホ: 480px以下）
   ============================================================ */
@media screen and (max-width: 480px) {

  /* ── ヘッダー ── */
  #header, .header {
    min-height: 50px !important;
  }
  #header-in, .header-in {
    min-height: 50px !important;
    padding: 8px 12px !important;
  }
  .site-name-text,
  .header .site-name-text a,
  .site-name,
  .logo,
  .logo-text {
    font-size: 17px !important;
    letter-spacing: 0.5px !important;
  }

  /* ── コンテンツ ── */
  #container, #wrap, .content-in, .contents-in {
    padding: 0 8px !important;
  }

  /* ── 記事カード ── */
  .entry-card-wrap {
    display: flex !important;
    flex-direction: column !important;
  }
  .entry-card-thumb {
    width: 100% !important;
    float: none !important;
  }
  .entry-card-content {
    width: 100% !important;
    float: none !important;
    padding: 10px 12px !important;
  }
  .card-title, .entry-card-title {
    font-size: 14px !important;
  }
  .card-snippet, .entry-card-snippet {
    font-size: 12px !important;
    -webkit-line-clamp: 2 !important;
  }

  /* ── 記事ページ ── */
  .article, .entry, .hentry {
    padding: 14px 12px !important;
    border-radius: 6px !important;
  }
  .entry-title, .article-title {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }
  .entry-content h2, .article-body h2 {
    font-size: 15px !important;
    padding: 10px 14px 10px 14px !important;
  }
  .entry-content h3, .article-body h3 {
    font-size: 13px !important;
    padding: 6px 0 8px 32px !important;
  }
  .entry-content h4, .article-body h4 {
    font-size: 13px !important;
    padding: 3px 8px !important;
  }
  .entry-content p, .article-body p {
    font-size: 13.5px !important;
    line-height: 1.8 !important;
    margin-bottom: 14px !important;
  }

  /* ── カテゴリ別グリッド（さらにコンパクト） ── */
  .front-2col,
  .two-column {
    display: block !important;
  }
  .front-2col .col-1,
  .front-2col .col-2 {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
  }

  /* ── 記事装飾コンポーネント（小型スマホ） ── */
  .entry-content .lead-box {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
  .entry-content .toc-box {
    padding: 14px 16px !important;
  }
  .entry-content .result-box,
  .entry-content .summary-box {
    padding: 14px 16px !important;
  }
  .entry-content .result-box h3,
  .entry-content .summary-box h3 {
    font-size: 14px !important;
  }
  .entry-content .result-box ol,
  .entry-content .result-box ul,
  .entry-content .summary-box ul {
    font-size: 13px !important;
  }
  .entry-content .point-box,
  .entry-content .warning-box {
    padding: 12px 14px !important;
    font-size: 13px !important;
  }
  .entry-content ul.check-list li,
  .entry-content ul.cross-list li {
    font-size: 13px !important;
  }
  .entry-content .product-name {
    font-size: 14px !important;
  }

  /* ── フッター ── */
  #footer .footer-bottom-content {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
}