/* ============================================================
   WKD PREMIUM DESIGN SYSTEM v13
   Dark/Light mode, Economist 3-column, Sticky header, Mobile
   ============================================================ */

/* ─── Logo height: ここ1箇所を変えるだけでOK ─── */
:root {
  --wkd-logo-h: 52px;
}

/* ─── CSS Variables (light = default) ─── */
:root {
  --wkd-bg:         #ffffff;
  --wkd-bg-card:    #ffffff;
  --wkd-text:       #1a1a1e;
  --wkd-muted:      #666;
  --wkd-accent:     #b30000;
  --wkd-border:     rgba(0,0,0,0.10);
  --wkd-hdr-bg:     #ffffff ;
  --wkd-link:       #1a1a1e;
  --wkd-link-hover: #b30000;
  --wkd-cat-border: #cccccc;
}

[data-theme="dark"] {
  --wkd-bg:         #1a1a1e;
  --wkd-bg-card:    #22222a;
  --wkd-text:       #f0f0f0;
  --wkd-muted:      #888;
  --wkd-accent:     #e87040;
  --wkd-border:     rgba(255,255,255,0.10);
  --wkd-hdr-bg:     #111116;
  --wkd-link:       #f0f0f0;
  --wkd-link-hover: #e87040;
  --wkd-cat-border: #444444;
}

/* ─── Global Reset ─── */
html, body {
  overflow-x: hidden !important;
}
@media screen and (max-width: 1300px) {
  html, body {
    overflow-x: auto !important; /* ズーム時や小画面ではスクロールを許可 */
  }
}
html, body,
#container, #content, .main, .sidebar,
#footer, #content-in {
  background-color: var(--wkd-bg) !important;
  color: var(--wkd-text) !important;
}

a { color: var(--wkd-link) !important; text-decoration: none !important; }
a:hover { color: var(--wkd-link-hover) !important; }

/* Hide front page title & TOC */
.home .entry-title,
.wkd-front .toc,
.wkd-front .toc-checkbox,
.wkd-front .toc-title { display: none !important; }

/* ─── ARTICLE IMAGES: 段落幅いっぱい ─── */
.entry-eye-catch,
.eye-catch {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
.entry-eye-catch img,
.eye-catch img,
.wp-post-image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}
.entry-content img:not(.wkd-latest-thumb img):not(.wkd-hero-thumb img):not(.wkd-sub-thumb img) {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ─── HEADER ─── */
#header, #header-container {
  background-color: var(--wkd-hdr-bg) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

#header, #header-in, .logo, .logo-header,
.site-name, .site-name-text-link, .site-name-text, .tagline {
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.tagline { display: none !important; }

/* ── Cocoon標準ナビを全ページ非表示：カスタムカテゴリバーに統一 ── */
#navi { display: none !important; }

.header-container-in {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 24px 0 24px !important; /* bottom 0 でカテゴリと密着、左はコンテンツ左端に合わせる */
  width: 100% !important;
  max-width: 1280px !important;         /* コンテンツ幅に合わせてロゴを揃える */
  margin: 0 auto !important;
  box-sizing: border-box !important;
  transition: padding 0.25s ease !important;
}

#header {
  flex: 0 0 auto !important;
  background: transparent !important;
  min-height: 0 !important;
  text-align: left !important;
  width: auto !important;
}

#header-in {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

/* ─── LOGO: 二重表示防止 ─── */
.logo-header {
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 0 !important;   /* ← これで画像下の余白が消える */
}
.logo-header noscript { display: none !important; }

/* 通常時: site-logo-image のみ表示 */
.site-fixed-logo-image {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}
.site-logo-image {
  display: block !important;
  height: var(--wkd-logo-h) !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
  transition: height 0.25s ease !important;
}

/* ─── DARK/LIGHT TOGGLE: シンプルなモノクロ ─── */
#wkd-theme-toggle {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--wkd-muted) !important;
  cursor: pointer !important;
  padding: 8px !important;
  border-radius: 4px !important;
  transition: color 0.2s, opacity 0.2s !important;
  margin-left: 16px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#wkd-theme-toggle:hover {
  color: var(--wkd-text) !important;
  background: transparent !important;
}
#wkd-theme-toggle svg {
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* ─── STICKY HEADER SHRINK ─── */
.fixed-header #header-container {
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
.fixed-header .header-container-in {
  padding-top: 6px !important;
  padding-bottom: 0 !important; /* 追従時もカテゴリと密着 */
}
.fixed-header #header {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fixed-header .logo-header {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
/* Sticky: ロゴ切り替え */
.fixed-header .site-logo-image {
  display: none !important;
}
.fixed-header .site-fixed-logo-image {
  display: block !important;
  height: calc(var(--wkd-logo-h) * 0.65) !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}
.fixed-header #wkd-theme-toggle {
  padding: 5px !important;
}

/* ─── CATEGORY BAR ─── */
#wkd-category-bar {
  background-color: var(--wkd-hdr-bg) !important;
  border-top: 1px solid var(--wkd-cat-border) !important;
  border-bottom: 1px solid var(--wkd-cat-border) !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
  z-index: 99 !important;

  /* デフォルト: 全幅ブレイクアウト */
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}
#wkd-category-bar::-webkit-scrollbar { display: none; }

/* ── 追従時: is-fixedクラスで全幅を上書き ── */
#wkd-category-bar.is-fixed {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* top は JS が inline style で設定 */
}

#wkd-category-bar ul {
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 24px !important;   /* ロゴ・記事コンテンツと同じ左端 */
  display: flex !important;
  max-width: 1280px !important; /* コンテンツ幅に合わせる */
}
#wkd-category-bar ul li a {
  display: block !important;
  padding: 10px 18px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--wkd-muted) !important;
  transition: color 0.2s, border-color 0.2s !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
}
#wkd-category-bar ul li a:hover { color: var(--wkd-accent) !important; }
#wkd-category-bar ul li a.is-active {
  color: var(--wkd-accent) !important;
  border-bottom: 2px solid var(--wkd-accent) !important;
}
#wkd-category-bar.is-fixed ul li a {
  padding: 7px 14px !important;
  font-size: 11px !important;
}

/* ─── FRONT PAGE 3-COLUMN GRID ─── */
.wkd-front {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
}
.wkd-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr 1fr !important;
  gap: 0 !important;
}
.wkd-col { padding: 0 28px !important; }
.wkd-col:not(:last-child) { border-right: 1px solid var(--wkd-border) !important; }
.wkd-col:first-child { padding-left: 0 !important; }
.wkd-col:last-child  { padding-right: 0 !important; }

.wkd-col-title {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--wkd-accent) !important;
  border-bottom: 2px solid var(--wkd-accent) !important;
  padding-bottom: 8px !important;
  margin: 0 0 20px 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  padding-left: 0 !important;
}

/* ─── LEFT COLUMN: Latest ─── */
.wkd-latest-item {
  display: flex !important;
  gap: 12px !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid var(--wkd-border) !important;
  align-items: center !important;
}
.wkd-latest-item:first-child { padding-top: 0 !important; }
.wkd-latest-item:last-child  { border-bottom: none !important; }

.wkd-latest-thumb {
  width: 64px !important;
  height: 64px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  border-radius: 2px !important;
}
.wkd-latest-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
}
.wkd-latest-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--wkd-text) !important;
  display: block !important;
}
.wkd-latest-title:hover { color: var(--wkd-accent) !important; }

/* ─── CENTER COLUMN: Featured ─── */
.wkd-hero { margin-bottom: 4px !important; }
.wkd-hero-thumb {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
  border-radius: 2px !important;
  margin-bottom: 14px !important;
  display: block !important;
}
.wkd-hero-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s !important;
  display: block !important;
  margin: 0 !important;
}
.wkd-hero-thumb:hover img { transform: scale(1.03) !important; }
.wkd-hero-cat {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--wkd-accent) !important;
  display: block !important;
  margin-bottom: 7px !important;
}
.wkd-hero-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: var(--wkd-text) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  display: block !important;
  margin-bottom: 10px !important;
}
.wkd-hero-title:hover { color: var(--wkd-accent) !important; }
.wkd-hero-excerpt {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--wkd-muted) !important;
  margin: 0 !important;
}

.wkd-sub {
  display: flex !important;
  gap: 12px !important;
  padding: 14px 0 !important;
  border-top: 1px solid var(--wkd-border) !important;
  align-items: flex-start !important;
}
.wkd-sub-thumb {
  width: 96px !important;
  height: 64px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  border-radius: 2px !important;
}
.wkd-sub-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}
.wkd-sub-cat {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--wkd-accent) !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.wkd-sub-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--wkd-text) !important;
  display: block !important;
}
.wkd-sub-title:hover { color: var(--wkd-accent) !important; }

/* ─── RIGHT COLUMN: Popular ─── */
.wkd-popular-item {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--wkd-border) !important;
}
.wkd-popular-item:first-child { padding-top: 0 !important; }
.wkd-popular-item:last-child  { border-bottom: none !important; }

.wkd-popular-rank {
  font-size: 52px !important;
  font-weight: 900 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  color: var(--wkd-accent) !important;
  line-height: 0.85 !important;
  flex-shrink: 0 !important;
  width: 44px !important;
  text-align: right !important;
  opacity: 0.9 !important;
  margin-top: 2px !important;
}
.wkd-popular-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--wkd-text) !important;
  display: block !important;
  padding-top: 6px !important;
}
.wkd-popular-title:hover { color: var(--wkd-accent) !important; }

/* ─── ARTICLE H2 RESTORATION (バックアップと完全一致) ─── */
.article h2, .entry-content h2 {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative !important;
  margin: 60px 0 30px 0 !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--wkd-text) !important;
  font-family: inherit !important;
}
.entry-content h2:not(:first-of-type) {
  margin-top: 120px !important;
}
.article h2::after, .entry-content h2::after {
  content: none !important;
  display: none !important;
}
.article h2::before, .entry-content h2::before {
  content: none !important;
}
.entry-content h2:not(:first-of-type)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -50px !important;
  left: -20px !important;
  width: 120px !important;
  height: 4px !important;
  background-color: #666666 !important;
  border: none !important;
}
.article h3, .entry-content h3 {
  border: none !important;
  border-left: 3px solid var(--wkd-accent) !important;
  padding-left: 15px !important;
  margin: 40px 0 20px 0 !important;
  font-size: 20px !important;
  background: none !important;
  box-shadow: none !important;
}

/* ─── CATEGORY LABELS: オレンジラベル ─── */
.entry-card-thumb {
  position: relative !important;
}
.cat-label {
  position: absolute !important;
  background-color: #ff9f67 !important;
  color: #000000 !important;
  top: auto !important;
  bottom: 10px !important;
  left: 10px !important;
  right: auto !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.4) !important;
  letter-spacing: 0.5px !important;
  z-index: 2 !important;
}
.entry-card-categorys { display: none !important; }

/* ─── RELATED / COMMENT / SNS 背景リセット (ダークモード対応) ─── */
/* 全て透明にしてベース背景に馴染ませる */
.related-entry-card-wrap,
.related-entry-card,
.related-entry-cards,
.widget_related_entry_cards,
.widget_new_entry_cards,
.comment-area,
#comment-area,
#respond,
.comment-form,
.pagination,
.page-numbers,
.author-box,
.widget,
.sidebar,
.widget-title,
.entry-content,
.article,
.entry-card-wrap,
.entry-card,
.page-timeline,
.pager-post-navi,
.pager-post-navi a,
.post-navi-previous,
.post-navi-next {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--wkd-text) !important;
  border-color: var(--wkd-border) !important;
}

/* SNSシェアエリア: Cocoonの全クラスを網羅して白背景を除去 */
.sns-share,
.sns-share-wrap,
.sns-share-message,
.sns-share-buttons,
.sns-share-buttons-wrap,
.sns-share-body,
.post-share,
.article-share,
.share-section,
[class*="share-area"],
[class*="share-section"],
[class*="share-box"],
[class*="share-wrap"],
[class*="sns-share"] {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 各シェアボタン: テーマカラーに合わせる */
.sns-share .share-btn,
.sns-share [class*="share-btn"],
.sns-share .btn-x,
.sns-share .btn-twitter,
.sns-share .btn-facebook,
.sns-share .btn-line,
.sns-share .btn-pinterest,
.sns-share .btn-linkedin,
.sns-share .btn-copy {
  background-color: var(--wkd-bg-card) !important;
  color: var(--wkd-text) !important;
  border: 1px solid var(--wkd-border) !important;
  border-radius: 4px !important;
}
.sns-share .share-label,
.sns-share-label,
.sns-share .sns-share-message {
  color: var(--wkd-muted) !important;
  background: transparent !important;
}

/* フォローボタンエリア */
.sns-follow-links,
.sns-follow-box,
.sns-follow-wrap {
  background-color: transparent !important;
  background: transparent !important;
}
.sns-follow {
  background-color: var(--wkd-bg-card) !important;
  border: 1px solid var(--wkd-border) !important;
  color: var(--wkd-muted) !important;
}
.sns-follow-message,
.sns-follow-title {
  color: var(--wkd-muted) !important;
  background: transparent !important;
}

/* 関連記事カード */
.related-entry-card-wrap:hover {
  background-color: var(--wkd-bg-card) !important;
}
.related-entry-heading,
.related-entry-card-title,
.comment-reply-title,
.comment-author,
.widget-title,
.related-entry-card-wrap a,
.comment-list a,
.pagination a {
  color: var(--wkd-text) !important;
  background: transparent !important;
}

/* Cocoonが付けるカード・ボックス系の背景も透明に */
.card-wrap,
.navi-in,
.ex-ad-invisible,
.related-entry-card-content,
.related-entry-card-excerpt {
  background-color: transparent !important;
  background: transparent !important;
}

/* SNS / Footer */
#footer-container, #footer {
  background-color: var(--wkd-hdr-bg) !important;
  border-top: 1px solid var(--wkd-border) !important;
  color: var(--wkd-muted) !important;
}

/* ─── MOBILE ─── */
@media screen and (max-width: 768px) {
  .header-container-in {
    padding: 8px 16px !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .site-logo-image {
    height: calc(var(--wkd-logo-h) * 0.65) !important;
    max-width: 160px !important;
  }
  #wkd-theme-toggle {
    margin-left: 8px !important;
    padding: 5px !important;
  }
  #wkd-category-bar ul {
    padding: 0 12px !important;
  }
  #wkd-category-bar ul li a {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  .fixed-header .site-fixed-logo-image {
    height: calc(var(--wkd-logo-h) * 0.5) !important;
  }
  .wkd-front { padding: 16px !important; }
  .wkd-grid { grid-template-columns: 1fr !important; }
  .wkd-col {
    padding: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--wkd-border) !important;
    padding-bottom: 24px !important;
    margin-bottom: 24px !important;
  }
  .wkd-col:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .wkd-hero-title { font-size: 18px !important; }
  .wkd-popular-rank { font-size: 38px !important; width: 34px !important; }
}

@media screen and (max-width: 480px) {
  .site-logo-image {
    height: calc(var(--wkd-logo-h) * 0.55) !important;
    max-width: 130px !important;
  }
  .wkd-hero-title { font-size: 16px !important; }
  .wkd-popular-rank { font-size: 30px !important; }
}