@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: シタゴコロ用カスタム子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/

/* ========================================
   シタゴコロ Custom Theme Styles
   ========================================
   Design: Dark, warm, Japanese minimal
   Accent: #d8a4a4
   Fonts: Shippori Mincho / Noto Serif JP / DM Mono
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500&family=Shippori+Mincho:wght@400;500&family=DM+Mono:wght@300;400&display=swap');

:root {
  --bg: #0f0f10;
  --bg2: #161618;
  --bg3: #1c1c1f;
  --border: #2a2a2e;
  --text-main: #e8e6e0;
  --text-sub: #8a8880;
  --text-muted: #555250;
  --accent: #d8a4a4;
  --accent2: #a87070;
  --tag-bg: #1f1e1c;
}

/* ── Base ── */
html, body {
  background: var(--bg) !important;
  color: var(--text-main) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-weight: 300 !important;
  line-height: 1.9 !important;
}
body.front-top-page, body { background: var(--bg) !important; }
#container, #wrap, .wrap, #site, #body, #site-body { background: var(--bg) !important; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); }
p, li, span, div { color: var(--text-main); }

/* ── Header ── */
#header-container, .header-container {
  background: rgba(15,15,16,0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: none !important;
}
#header, .header {
  background: transparent !important;
  padding: 0 2rem !important;
  max-width: 1100px;
  margin: 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo, .logo-header, .site-name-text {
  font-family: 'Shippori Mincho', serif !important;
  color: var(--text-main) !important;
}
.logo a, .site-name-text a, .site-name { color: var(--text-main) !important; }
.logo img, .header-container img.logo {
  height: 52px !important;
  width: auto !important;
}
.logo:hover img { opacity: 0.75; transition: opacity 0.2s; }
.tagline, .site-description { display: none !important; }

/* ── Navigation ── */
#navi, .navi, #navi-in, .navi-in {
  background: transparent !important;
  border: none !important;
}
.navi-in > .menu-header, #menu-header {
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
}
#navi .menu-header li, .navi li {
  background: transparent !important;
  border: none !important;
}
#navi .menu-header li a, .navi li a {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em;
  color: var(--text-sub) !important;
  text-transform: uppercase;
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 0 !important;
  transition: color 0.2s;
}
#navi .menu-header li a:hover, .navi li a:hover { color: var(--accent) !important; }

/* ── Main Content ── */
#main, .main, #content, .content {
  background: var(--bg) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#main { max-width: 1100px; margin: 0 auto; padding: 2rem !important; }

/* ── Hero (top of front page) ── */
.top-content {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border);
  padding: 5rem 2rem 3.5rem !important;
  max-width: 1100px;
  margin: 0 auto;
}
.top-content h1, .top-content h2 {
  font-family: 'Shippori Mincho', serif !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--text-main) !important;
}

/* ── Entry Cards (Post Grid) ── */
#list, .list, .home #list { display: block; }
.entry-card-wrap, .a-wrap {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 1.8rem !important;
  margin-bottom: 2px !important;
  transition: background 0.2s;
  box-shadow: none !important;
}
.entry-card-wrap:hover, .a-wrap:hover { background: var(--bg3) !important; }
.entry-card, article.entry-card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.entry-card-thumb, .card-thumb {
  border: 1px solid var(--border) !important;
  margin-bottom: 1.2rem !important;
}
.entry-card-thumb img, .card-thumb img {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
}
.entry-card-title, .card-title, h2.entry-card-title, .entry-card-content .entry-card-title {
  font-family: 'Shippori Mincho', serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--text-main) !important;
  margin-bottom: 0.6rem !important;
}
.entry-card-snippet, .card-snippet {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.82rem !important;
  color: var(--text-muted) !important;
  line-height: 1.75 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.entry-card-meta, .card-meta {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.65rem !important;
  color: var(--text-muted) !important;
}
.cat-label, .category {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.1em;
  background: var(--tag-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--accent) !important;
  padding: 3px 10px !important;
  border-radius: 0 !important;
}
.post-date, .entry-card-info, .date-tags {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.68rem !important;
  color: var(--text-muted) !important;
}

/* 3-column grid for top page entry cards */
@media (min-width: 769px) {
  .ect-entry-card .entry-card-wrap,
  .home .entry-card-wrap {
    display: inline-block;
    width: calc(33.333% - 2px);
    vertical-align: top;
    margin-right: 2px;
  }
}

/* ── Sidebar ── */
#sidebar, .sidebar {
  background: var(--bg) !important;
  padding: 0 !important;
}
.sidebar .widget, #sidebar .widget {
  background: transparent !important;
  border: none !important;
  margin-bottom: 2.5rem !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.sidebar h3, .sidebar .widget-title, .sidebar h4 {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.18em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.7rem !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  border-left: none !important;
  font-weight: 400 !important;
}
.sidebar h3::before, .sidebar .widget-title::before { content: "— "; color: var(--text-muted); }
.sidebar ul li, .sidebar .widget li {
  list-style: none !important;
  padding: 0.6rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.85rem !important;
  color: var(--text-sub) !important;
}
.sidebar ul li a, .sidebar .widget li a {
  color: var(--text-sub) !important;
  transition: color 0.2s;
}
.sidebar ul li a:hover { color: var(--accent) !important; }
.sidebar .widget_tag_cloud a, .sidebar .tagcloud a {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.65rem !important;
  color: var(--text-sub) !important;
  border: 1px solid var(--border) !important;
  padding: 4px 10px !important;
  background: transparent !important;
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
  transition: border-color 0.2s, color 0.2s;
  border-radius: 0 !important;
}
.sidebar .widget_tag_cloud a:hover, .sidebar .tagcloud a:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ── Article Body (single post) ── */
.article, .entry-content, .post {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  padding: 3rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.article h1, .article h2, .article h3, .entry-content h1, .entry-content h2, .entry-content h3 {
  font-family: 'Shippori Mincho', serif !important;
  font-weight: 500 !important;
  color: var(--text-main) !important;
  border: none !important;
  background: transparent !important;
  border-left: 3px solid var(--accent) !important;
  padding-left: 1rem !important;
}
.entry-content p {
  font-family: 'Noto Serif JP', serif !important;
  color: var(--text-main) !important;
  line-height: 2.0 !important;
}
.entry-title, h1.entry-title {
  font-family: 'Shippori Mincho', serif !important;
  font-weight: 400 !important;
  font-size: 2rem !important;
  line-height: 1.5 !important;
  color: var(--text-main) !important;
  border: none !important;
  padding: 0 !important;
}

/* ── Footer ── */
#footer, .footer, .footer-bottom {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  padding: 2rem !important;
  text-align: center !important;
  color: var(--text-muted) !important;
}
.copyright, #copyright {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.65rem !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.1em !important;
}
.footer-widgets, .footer-bottom-content { display: none !important; }

/* ── Buttons / Read more ── */
.entry-read, .more-link, a.more-link, .read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 1.4rem !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  color: var(--accent) !important;
  border: none !important;
  border-bottom: 1px solid var(--accent2) !important;
  padding-bottom: 2px !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: gap 0.2s;
}
.entry-read:hover { gap: 0.9rem !important; color: var(--accent2) !important; }

/* ── Pagination ── */
.pagination, .navigation {
  border: none !important;
  background: transparent !important;
}
.pagination a, .pagination span, .page-numbers {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-sub) !important;
  font-family: 'DM Mono', monospace !important;
  border-radius: 0 !important;
}
.pagination .current, .page-numbers.current {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

/* ── Comments ── */
#comments, .comments-area {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  padding: 2rem !important;
}
.comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond textarea {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
  font-family: 'Noto Serif JP', serif !important;
}

/* ── Forms / Search ── */
input[type="search"], input[type="text"], textarea, select {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
  font-family: 'Noto Serif JP', serif !important;
  border-radius: 0 !important;
}
button, input[type="submit"] {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border: none !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 0.1em !important;
  border-radius: 0 !important;
  padding: 0.6rem 1.2rem !important;
}

/* ── Breadcrumb ── */
.breadcrumb, #breadcrumb {
  background: transparent !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 0.7rem !important;
  color: var(--text-muted) !important;
  padding: 1rem 0 !important;
}
.breadcrumb a { color: var(--text-sub) !important; }

/* ── Fade-in animation ── */
.entry-card-wrap, .top-content, .sidebar .widget, .article {
  opacity: 0;
  transform: translateY(16px);
  animation: shitagokoroFadeUp 0.6s ease forwards;
}
.entry-card-wrap:nth-child(1) { animation-delay: 0.05s; }
.entry-card-wrap:nth-child(2) { animation-delay: 0.15s; }
.entry-card-wrap:nth-child(3) { animation-delay: 0.25s; }
.entry-card-wrap:nth-child(4) { animation-delay: 0.35s; }
.sidebar .widget:nth-child(1) { animation-delay: 0.1s; }
.sidebar .widget:nth-child(2) { animation-delay: 0.2s; }
.sidebar .widget:nth-child(3) { animation-delay: 0.3s; }
@keyframes shitagokoroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Mobile (admin bar / various adjustments) ── */
#wpadminbar { background: #0a0a0b !important; }

/* ── Responsive ── */
@media screen and (max-width: 1023px) {
  #main { padding: 1rem !important; }
}
@media screen and (max-width: 834px) {
  .header { padding: 0 1rem !important; }
  #navi .menu-header { gap: 1rem !important; }
  .top-content { padding: 3rem 1rem 2rem !important; }
}
@media screen and (max-width: 480px) {
  .ect-entry-card .entry-card-wrap,
  .home .entry-card-wrap {
    width: 100% !important;
    display: block;
  }
}

/* ── Sidebar layout ── */
.main { float: left; }
#main { background: var(--bg) !important; }

/* Custom: hide noisy default elements */
.appeal, .info-box, .information-box-message { display: none; }

/* Author / about widget */
.author-box, .author-widget {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  padding: 1.5rem !important;
}
.author-box .author-name {
  font-family: 'Shippori Mincho', serif !important;
  color: var(--text-main) !important;
}
.author-box p, .author-widget p {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 0.83rem !important;
  color: var(--text-sub) !important;
  line-height: 1.8 !important;
}