@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:    2.0.0
*/

/* ============================================================
   AthleteRPG Premium Dark Mode v2.0
   コンセプト：Premium RPG × Athletic — 洗練された暗闇と疾走感
   ============================================================ */

/* ── 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:    #0a0a14;
  --color-secondary:  #12122a;
  --color-deep:       #0d0d20;
  --color-surface:    #1a1a35;
  --color-surface2:   #22223f;
  --color-accent:     #e94560;
  --color-accent-glow:rgba(233,69,96,0.35);
  --color-accent-dim: #c0334d;
  --color-gold:       #f5a623;
  --color-gold-glow:  rgba(245,166,35,0.35);
  --color-gold-dim:   #d4891a;
  --color-neon:       #00d4ff;
  --color-neon-glow:  rgba(0,212,255,0.25);
  --color-text:       #e8e8f0;
  --color-text-body:  #2d2d3a;
  --color-text-sub:   #9090b0;
  --color-bg:         #f4f5fa;
  --color-white:      #ffffff;
  --color-border:     rgba(255,255,255,0.08);
  --color-border-light: #e4e6f0;
  --glass-bg:         rgba(255,255,255,0.04);
  --glass-border:     rgba(255,255,255,0.10);
  --radius:           10px;
  --radius-lg:        16px;
  --shadow-sm:        0 2px 12px rgba(0,0,0,0.12);
  --shadow-md:        0 6px 24px rgba(0,0,0,0.18);
  --shadow-lg:        0 12px 40px rgba(0,0,0,0.25);
  --shadow-accent:    0 4px 20px rgba(233,69,96,0.30);
  --shadow-gold:      0 4px 20px rgba(245,166,35,0.30);
  --transition:       all 0.28s cubic-bezier(0.4,0,0.2,1);
  --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-body) !important;
  line-height: 1.85 !important;
  -webkit-font-smoothing: antialiased;
}

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

/* ============================================================
   ヘッダー — ディープダーク + グロー
   ============================================================ */
#header,
.header,
.header-container {
  background: linear-gradient(180deg, var(--color-deep) 0%, var(--color-secondary) 100%) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(233,69,96,0.6) !important;
  position: relative !important;
}

/* アクセントラインをbottomに */
#header::after,
.header::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, var(--color-accent) 30%, var(--color-gold) 70%, transparent 100%) !important;
}

/* サイト名 */
.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: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  color: var(--color-white) !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
  text-shadow: 0 0 20px var(--color-accent-glow) !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;
  text-shadow: 0 0 16px var(--color-gold-glow) !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.4) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
}

/* ============================================================
   ナビゲーション
   ============================================================ */
.navi,
#navi,
.navi-in,
.header-navi {
  background: rgba(255,255,255,0.03) !important;
  border-top: 1px solid var(--color-border) !important;
}

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

.navi .navi-in > ul > li > a::after,
.navi-in > ul > li > a::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--color-accent) !important;
  transition: var(--transition) !important;
  transform: translateX(-50%) !important;
}

.navi .navi-in > ul > li > a:hover::after,
.navi-in > ul > li > a:hover::after {
  width: 60% !important;
}

.navi .navi-in > ul > li > a:hover,
.navi-in > ul > li > a:hover {
  color: var(--color-white) !important;
  background: transparent !important;
}

/* ============================================================
   メインコンテンツエリア
   ============================================================ */
#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-lg) !important;
  border: 1px solid var(--color-border-light) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: var(--transition) !important;
}

.entry-card:hover,
.card-wrap:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-md), 0 0 0 1px 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-body) !important;
}

/* カテゴリラベル */
.cat-label,
.entry-categories-in .cat-label {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dim)) !important;
  color: var(--color-white) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--color-accent-glow) !important;
}

/* ── ウィジェットカード ── */
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;
}

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: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !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-secondary) !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin-bottom: 20px !important;
  position: relative !important;
  padding-bottom: 16px !important;
}

.entry-title::after,
.article-title::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 60px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold)) !important;
  border-radius: 2px !important;
}

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

/* H2: ゲームUI風 — ダークパネル + アクセントライン */
.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%, var(--color-surface) 100%) !important;
  padding: 16px 24px 16px 56px !important;
  border-radius: var(--radius) !important;
  border: none !important;
  border-left: none !important;
  margin: 44px 0 22px !important;
  position: relative !important;
  letter-spacing: 0.5px !important;
  line-height: 1.5 !important;
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-border) !important;
  overflow: hidden !important;
}

.entry-content h2::before,
.article-body h2::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--color-accent), var(--color-gold)) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 12px var(--color-accent-glow) !important;
}

.entry-content h2::after,
.article-body h2::after {
  content: '▶' !important;
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  color: var(--color-accent) !important;
  text-shadow: 0 0 8px var(--color-accent-glow) !important;
}

/* H3 */
.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 16px !important;
  position: relative !important;
  line-height: 1.5 !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  border-left: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  margin: 30px 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: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 12px !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--color-accent), var(--color-gold)) !important;
  border-radius: 2px !important;
  display: block !important;
  background-color: unset !important;
  border: none !important;
  width: 4px !important;
  height: auto !important;
}

/* H4 */
.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-secondary) !important;
  padding: 4px 14px !important;
  background: linear-gradient(90deg, rgba(233,69,96,0.07), transparent) !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: 0 4px 4px 0 !important;
  display: block !important;
  line-height: 1.5 !important;
  margin: 22px 0 10px !important;
}

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

.entry-content strong,
.article-body strong {
  color: var(--color-secondary) !important;
  font-weight: 700 !important;
  background: linear-gradient(transparent 55%, rgba(245,166,35,0.28) 55%) !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: linear-gradient(135deg, var(--color-secondary), var(--color-surface)) !important;
  color: var(--color-white) !important;
}

.entry-content table th,
.article-body table th {
  padding: 13px 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-light) !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: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-surface) 100%) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  border-top: none !important;
  padding: 24px 28px !important;
  margin: 28px 0 !important;
  box-shadow: var(--shadow-md) !important;
  position: relative !important;
  overflow: hidden !important;
}

#toc::before,
.toc::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold)) !important;
}

.toc-title {
  font-weight: 800 !important;
  font-size: 13px !important;
  color: var(--color-gold) !important;
  margin-bottom: 14px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

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

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

/* ============================================================
   ボックス・吹き出し
   ============================================================ */
.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), var(--color-accent-dim)) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 13px 30px !important;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-accent) !important;
  letter-spacing: 0.5px !important;
}

.btn:hover,
.a-btn:hover,
.wp-block-button__link:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(233,69,96,0.50) !important;
  color: var(--color-white) !important;
}

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

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

.widget-title,
.widgettitle {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--color-white) !important;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-surface)) !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  margin: -20px -20px 16px !important;
  letter-spacing: 1.5px !important;
  border: none !important;
  text-transform: uppercase !important;
  position: relative !important;
}

.widget-title::after,
.widgettitle::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 40px !important;
  height: 2px !important;
  background: var(--color-accent) !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: linear-gradient(135deg, var(--color-secondary), var(--color-surface)) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 24px !important;
  color: var(--color-text) !important;
}

.author-box .author-name,
.author-widget-wrapper .author-name {
  color: var(--color-gold) !important;
}

.author-box .author-description,
.author-widget-wrapper .author-description {
  color: rgba(255,255,255,0.7) !important;
}

/* ============================================================
   フッター
   ============================================================ */
#footer,
.footer {
  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-primary) 100%) !important;
  color: rgba(255,255,255,0.6) !important;
  border-top: none !important;
  padding: 48px 0 24px !important;
  position: relative !important;
}

#footer::before,
.footer::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--color-accent), var(--color-gold), transparent) !important;
}

.footer-widget-area {
  background: rgba(255,255,255,0.03) !important;
}

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

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

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

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

.pagination a,
.page-numbers a {
  color: var(--color-secondary) !important;
  border-color: var(--color-border-light) !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-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-accent), var(--color-gold));
  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: 22px !important;
    letter-spacing: 2px !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;
  }

  .front-title-text,
  .list-title,
  .widget-entry-cards-title {
    font-size: 16px !important;
  }

  .entry-card,
  .card-wrap,
  .cat-card {
    border-radius: 10px !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;
  }

  .article, .entry, .hentry {
    padding: 20px 16px !important;
    border-radius: 10px !important;
  }
  .entry-title, .article-title {
    font-size: 19px !important;
  }
  .entry-content h2, .article-body h2 {
    font-size: 16px !important;
    padding: 13px 16px 13px 48px !important;
    margin: 30px 0 14px !important;
  }
  .entry-content h3, .article-body h3 {
    font-size: 14px !important;
    padding: 6px 0 10px 14px !important;
  }
  .entry-content h4, .article-body h4 {
    font-size: 13px !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-box {
    padding: 16px 18px !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-light) !important;
  }

  .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: 12px !important;
    padding: 8px 14px !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: 28px 16px 16px !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: 18px 20px !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;
  }
}

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

/* ── リード文ボックス ── */
.entry-content .lead-box {
  background: linear-gradient(135deg, #f0f4ff 0%, #f8f9ff 100%) !important;
  border-left: 4px solid var(--color-accent) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 18px 22px !important;
  margin-bottom: 28px !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #3a3a55 !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative !important;
}

.entry-content .lead-box::before {
  content: '' !important;
  position: absolute !important;
  left: -4px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, var(--color-accent), var(--color-gold)) !important;
  box-shadow: 0 0 10px var(--color-accent-glow) !important;
}

/* ── この記事でわかること ── */
.entry-content .toc-box {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-surface) 100%) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 22px 24px !important;
  margin-bottom: 32px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
}

.entry-content .toc-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold)) !important;
}

.entry-content .toc-box h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--color-gold) !important;
  margin-bottom: 12px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* ボックス内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: rgba(255,255,255,0.7) !important;
  line-height: 2.1 !important;
  margin: 0 !important;
}

.entry-content .toc-box ol li a {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none !important;
}
.entry-content .toc-box ol li a:hover {
  color: var(--color-gold) !important;
}

/* ── 結論ファーストボックス ── */
.entry-content .result-box {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #0f3460 100%) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  padding: 22px 26px !important;
  margin: 20px 0 30px !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(245,166,35,0.15) !important;
  position: relative !important;
  overflow: hidden !important;
}

.entry-content .result-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-gold), var(--color-accent)) !important;
}

.entry-content .result-box h3 {
  color: var(--color-gold) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-shadow: 0 0 10px var(--color-gold-glow) !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.1 !important;
  color: rgba(255,255,255,0.8) !important;
}
.entry-content .result-box li strong { color: var(--color-gold) !important; }

/* ── ポイントボックス ── */
.entry-content .point-box {
  background: linear-gradient(135deg, #f0fff8 0%, #f5fffa 100%) !important;
  border: 1px solid #52c78a !important;
  border-left: 4px solid #27ae60 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 14px 18px !important;
  margin: 16px 0 !important;
  font-size: 14px !important;
  color: #1a5c3a !important;
  line-height: 1.8 !important;
}
.entry-content .point-box strong { color: #1a5c3a !important; }

/* ── 警告ボックス ── */
.entry-content .warning-box {
  background: linear-gradient(135deg, #fff8f8 0%, #fff5f5 100%) !important;
  border: 1px solid #f88080 !important;
  border-left: 4px solid var(--color-accent) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 14px 18px !important;
  margin: 16px 0 !important;
  font-size: 14px !important;
  color: #9b1c1c !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 var(--color-border-light) !important;
  border-radius: var(--radius) !important;
  margin: 14px 0 !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}
.entry-content .faq-q {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-surface)) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
}
.entry-content .faq-q-label {
  background: var(--color-neon) !important;
  color: var(--color-secondary) !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;
  box-shadow: 0 0 8px var(--color-neon-glow) !important;
}
.entry-content .faq-a {
  padding: 14px 18px !important;
  font-size: 14px !important;
  color: #444 !important;
  line-height: 1.8 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  background: #fafafa !important;
}
.entry-content .faq-a-label {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dim)) !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;
  box-shadow: 0 0 8px var(--color-accent-glow) !important;
}

/* ── まとめボックス ── */
.entry-content .summary-box {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #0f3460 100%) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-lg) !important;
  padding: 26px 28px !important;
  margin: 32px 0 18px !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-lg) !important;
  position: relative !important;
  overflow: hidden !important;
}

.entry-content .summary-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--color-gold), var(--color-accent)) !important;
}

.entry-content .summary-box h3 {
  color: var(--color-gold) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-shadow: 0 0 12px var(--color-gold-glow) !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: 7px 0 7px 24px !important;
  position: relative !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.8) !important;
  line-height: 1.7 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.entry-content .summary-box ul li::before {
  content: '›' !important;
  position: absolute !important;
  left: 6px !important;
  color: var(--color-gold) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-shadow: 0 0 6px var(--color-gold-glow) !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: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
}
.entry-content table.compare-table thead tr {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-surface)) !important;
  color: white !important;
}
.entry-content table.compare-table thead th {
  padding: 13px !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: white !important;
  border: none !important;
  letter-spacing: 0.5px !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: 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: linear-gradient(135deg, var(--color-gold), var(--color-gold-dim)) !important;
  color: var(--color-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 10px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px var(--color-gold-glow) !important;
}
.entry-content .rank-2 { background: linear-gradient(135deg, #c0c0c0, #a8a8a8) !important; }
.entry-content .rank-3 { background: linear-gradient(135deg, #cd7f32, #a0621f) !important; color: white !important; }

/* ── 商品カード ── */
.entry-content .product-card {
  border: 2px solid var(--color-border-light) !important;
  border-radius: var(--radius-lg) !important;
  padding: 22px !important;
  margin: 18px 0 !important;
  display: flex !important;
  gap: 18px !important;
  align-items: flex-start !important;
  background: white !important;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-sm) !important;
}
.entry-content .product-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}
.entry-content .product-card.rank1 {
  border-color: var(--color-gold) !important;
  background: linear-gradient(135deg, #fffdf0, #fffef8) !important;
  box-shadow: 0 4px 20px var(--color-gold-glow) !important;
}
.entry-content .product-card.rank2 { border-color: #c0c0c0 !important; }
.entry-content .product-rank {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dim)) !important;
  color: var(--color-secondary) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px var(--color-gold-glow) !important;
}
.entry-content .product-rank.r2 { background: linear-gradient(135deg, #c0c0c0, #a8a8a8) !important; box-shadow: none !important; }
.entry-content .product-rank.r3 { background: linear-gradient(135deg, #cd7f32, #a0621f) !important; color: white !important; box-shadow: none !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: 7px !important;
}
.entry-content .product-tags {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 9px !important;
}
.entry-content .tag {
  font-size: 11px !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
}
.entry-content .tag-blue { background: #e8f4ff !important; color: #2563eb !important; }
.entry-content .tag-green { background: #e8fff0 !important; color: #16a34a !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: 19px !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  margin-bottom: 10px !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 0%, #f0c14b 100%) !important;
  color: #111 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 9px 22px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  border: 1px solid #a88734 !important;
  box-shadow: 0 2px 8px rgba(168,135,52,0.25) !important;
  transition: var(--transition) !important;
}
.entry-content .btn-amazon:hover {
  background: linear-gradient(180deg, #f0c14b 0%, #e8b430 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(168,135,52,0.35) !important;
}

/* ── 吹き出し ── */
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: var(--radius) !important;
}
body .article .information-box,
body .article .info-box {
  background: #f8f9ff !important;
  border-color: #4a90d9 !important;
  border-radius: var(--radius) !important;
}
body .article .alert-box {
  background: #fff5f5 !important;
  border-color: #fc8181 !important;
  border-radius: var(--radius) !important;
}
body .article .question-box {
  background: #fff8e6 !important;
  border-color: var(--color-gold) !important;
  border-radius: var(--radius) !important;
}
body .article .memo-box {
  background: #f0fff4 !important;
  border-color: #68d391 !important;
  border-radius: var(--radius) !important;
}

/* ── 区切り線 ── */
.entry-content .divider,
.entry-content hr {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--color-border-light), transparent) !important;
  border: none !important;
  margin: 28px 0 !important;
}