@charset "UTF-8";

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

/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
:root {
  --color-bg:        #0d0d0d;
  --color-surface:   #141414;
  --color-card:      #1a1a1a;
  --color-card2:     #222222;
  --color-border:    #2a2a2a;
  --color-primary:   #e91e63;
  --color-primary-h: #f06292;
  --color-tag:       #7c3aed;
  --color-tag-light: rgba(124,58,237,.2);
  --color-tag-text:  #c4b5fd;
  --color-gold:      #f0a500;
  --color-text:      #f0f0f0;
  --color-text-sub:  #b0b0b0;
  --color-muted:     #808080;
  --font-main:       'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
}

/* ══════════════════════════════════════
   GLOBAL BASE
══════════════════════════════════════ */
html, body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-main) !important;
}

#container, #main-wrapper, #main, #content,
#contents, #main-contents, #main-contents-one,
.main-contents-one, .site-content, #page {
  background: var(--color-bg) !important;
}

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

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
#header-container,
#header-container-in,
#header {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

/* サイト名 */
.site-name-text,
.site-name-text a,
#site-name .site-name-text {
  color: var(--color-primary) !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: -.02em !important;
}
.site-name-text a:hover { color: var(--color-primary-h) !important; }

/* キャッチコピー */
.tagline, .site-catchphrase {
  color: var(--color-muted) !important;
  font-size: 11px !important;
}

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
#navi, .navi, #navi-in, .navi-in,
.global-nav, .nav-container {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.navi-in > ul > li > a,
#navi .menu-item a,
.global-nav a {
  color: var(--color-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  border-bottom: 2px solid transparent !important;
  transition: color .15s, border-color .15s !important;
}
.navi-in > ul > li > a:hover,
.navi-in > ul > li.current-menu-item > a,
#navi .menu-item.current-menu-item > a {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
  background: transparent !important;
}

/* サブメニュー */
.navi-in ul ul { background: var(--color-surface) !important; }
.navi-in ul ul li a { border-bottom: 1px solid var(--color-border) !important; }

/* ══════════════════════════════════════
   ENTRY CARD LIST（トップ・カテゴリページ）
══════════════════════════════════════ */

/* カードグリッド */
#list.ect-entry-card,
.list.ect-entry-card {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  background: transparent !important;
}
@media (min-width: 600px) {
  #list.ect-entry-card, .list.ect-entry-card {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 900px) {
  #list.ect-entry-card, .list.ect-entry-card {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }
}

/* カード本体 */
.entry-card-wrap {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform .18s, border-color .18s, box-shadow .18s !important;
}
.entry-card-wrap:hover {
  transform: translateY(-3px) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 16px rgba(233,30,99,.3) !important;
  text-decoration: none !important;
}

.entry-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: transparent !important;
}

/* ── サムネイル（縦長 2:3 強制） ── */
.entry-card-thumb,
.card-thumb,
.e-card-thumb {
  position: relative !important;
  width: 100% !important;
  padding-top: 150% !important; /* 2:3比率 */
  overflow: hidden !important;
  background: #111 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.entry-card-thumb-image,
.card-thumb-image {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  transition: transform .3s !important;
  border-radius: 0 !important;
}
.entry-card-wrap:hover .entry-card-thumb-image {
  transform: scale(1.04) !important;
}

/* カテゴリラベル（サムネ上） */
.cat-label, .cat-label-2, .cat-label-3,
.cat-label-4, .cat-label-5, .cat-label-6 {
  position: absolute !important;
  bottom: 6px !important;
  left: 6px !important;
  top: auto !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  z-index: 2 !important;
  letter-spacing: .03em !important;
}

/* ── カードコンテンツエリア ── */
.entry-card-content,
.card-content,
.e-card-content {
  padding: 8px 10px 10px !important;
  background: var(--color-card) !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* タイトル */
.entry-card-title,
.card-title,
.e-card-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--color-text) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 0 6px !important;
}

/* スニペット（非表示） */
.entry-card-snippet,
.card-snippet,
.e-card-snippet {
  display: none !important;
}

/* メタ情報（日付・カテゴリ） */
.entry-card-meta,
.card-meta,
.e-card-meta {
  margin-top: auto !important;
  padding-top: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}

.entry-category, .entry-card-categorys .entry-category {
  background: var(--color-tag-light) !important;
  color: var(--color-tag-text) !important;
  border: 1px solid rgba(124,58,237,.4) !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  font-weight: 500 !important;
}

.post-date, .entry-date {
  color: var(--color-muted) !important;
  font-size: 10px !important;
}
.post-date .fa { color: var(--color-muted) !important; }

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
#sidebar, .sidebar {
  background: var(--color-bg) !important;
}

.widget, .widget_block,
.sidebar .widget {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
}

.widget-title, .widgettitle,
.sidebar .widget-title {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--color-text) !important;
  border-left: 4px solid var(--color-primary) !important;
  border-bottom: none !important;
  padding: 0 0 0 10px !important;
  margin-bottom: 12px !important;
  background: transparent !important;
}

.widget ul li {
  border-bottom: 1px solid var(--color-border) !important;
  padding: 5px 0 !important;
}
.widget ul li a {
  color: var(--color-text-sub) !important;
  font-size: 12px !important;
}
.widget ul li a:hover { color: var(--color-primary) !important; }

/* サムネ付き最新記事 */
.new-entry-card-wrap { background: transparent !important; }
.new-entry-card-title { color: var(--color-text) !important; font-size: 12px !important; }

/* ══════════════════════════════════════
   SINGLE POST PAGE
══════════════════════════════════════ */
.article, .entry-body, .article-body {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  color: var(--color-text) !important;
}

/* 記事タイトル */
.article-title, .entry-title {
  color: var(--color-text) !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
}

/* 本文内見出し */
.article h2, .entry-body h2 {
  color: var(--color-text) !important;
  border-left: 4px solid var(--color-primary) !important;
  padding-left: 12px !important;
  font-size: 15px !important;
  margin: 1.5em 0 .8em !important;
  background: transparent !important;
  border-bottom: none !important;
}
.article h3, .entry-body h3 {
  color: var(--color-text) !important;
  font-size: 14px !important;
  border-left: 3px solid var(--color-tag) !important;
  padding-left: 10px !important;
}

/* 本文テキスト */
.article p, .entry-body p { color: #d0d0d0 !important; }
.article ul, .article ol { color: #d0d0d0 !important; }
.article li { color: #d0d0d0 !important; }

/* 記事内リンク */
.article a, .entry-body a {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
}

/* タグリンク */
.tag-links, .post-tags { margin-top: 12px !important; }
.tag-links a, .post-tags a,
.entry-footer .tag-links a {
  display: inline-block !important;
  background: var(--color-tag-light) !important;
  color: var(--color-tag-text) !important;
  border: 1px solid rgba(124,58,237,.4) !important;
  border-radius: 3px !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  margin: 2px !important;
  transition: background .15s !important;
}
.tag-links a:hover, .post-tags a:hover {
  background: var(--color-tag) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* アイキャッチ */
.eye-catch, .post-thumbnail { background: transparent !important; }
.eye-catch img { border-radius: 6px !important; }

/* パンくずリスト */
.breadcrumb, .breadcrumbs {
  background: transparent !important;
  color: var(--color-muted) !important;
  font-size: 11px !important;
}
.breadcrumb a, .breadcrumbs a { color: var(--color-muted) !important; }

/* 関連記事 */
.related-entry-header { color: var(--color-text) !important; }
.related-entry-card-wrap {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 6px !important;
}
.related-entry-card-title { color: var(--color-text) !important; font-size: 12px !important; }

/* シェアボタン */
.sns-share { background: transparent !important; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
#footer, .footer, .footer-container {
  background: var(--color-surface) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-muted) !important;
}
#footer a, .footer a { color: var(--color-muted) !important; }
#footer a:hover, .footer a:hover { color: var(--color-primary) !important; }
.copyright { color: var(--color-muted) !important; font-size: 11px !important; }

/* ══════════════════════════════════════
   PAGINATION
══════════════════════════════════════ */
.page-numbers {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: 4px !important;
}
.page-numbers.current {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}
.page-numbers:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════
   MISC
══════════════════════════════════════ */
/* 区切り線 */
hr { border-color: var(--color-border) !important; }

/* モバイルメニュー */
.mobile-menu-buttons { background: var(--color-surface) !important; border-top: 1px solid var(--color-border) !important; }
.mobile-menu-buttons a { color: var(--color-muted) !important; }
.mobile-menu-buttons a:hover { color: var(--color-primary) !important; }

/* スクロールトップボタン */
#go-to-top { background: var(--color-primary) !important; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
/* 834px以下 */
@media screen and (max-width: 834px) {
  #list.ect-entry-card, .list.ect-entry-card {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .article, .entry-body { padding: 14px !important; }
  .entry-card-title { font-size: 11px !important; }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  #list.ect-entry-card, .list.ect-entry-card {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .site-name-text { font-size: 18px !important; }
}