@charset "UTF-8";

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

/*
 * Page-specific & Cocoon override styles.
 * Design tokens  → css/tokens.css
 * Layout / grid  → css/layout.css
 * Components     → css/components.css
 * See DESIGN.md for the full design system spec.
 */

/* ============================================================
   Base — body background (yokaport: #eaedf2)
   ============================================================ */
html {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

body {
  background-color: #eaedf2 !important;
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features);
  color: var(--text-primary);
  overflow-x: hidden;
}

/* ============================================================
   Header — override Cocoon
   Selectors: #header.header > .header-in > #logo + #navi
   ============================================================ */
#header,
.header {
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* Logo — image replacement */
#logo .logo-header {
  display: block;
  width: 200px;
  height: 48px;
  background-image: url('images/logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
#logo,
#logo a,
#logo .logo-image {
  box-shadow: none !important;
  text-shadow: none !important;
}
#logo .site-name-text,
#logo .logo-site-name {
  display: none !important;
}

/* Desktop nav links */
#navi .navi-in .menu-header .menu-item > a,
#navi .navi-in > .menu-header > li > a,
.navi-in .menu-item > a {
  color: var(--color-primary) !important;
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
}
.navi-in .menu-item > a:hover {
  color: var(--color-primary-dk) !important;
  opacity: 1;
  text-decoration: none !important;
}
/* Nav separator line */
.navi-in .menu-item::after {
  background: var(--border-default) !important;
}

/* Mobile nav (scrollable horizontal) */
#navi .navi-in > .menu-mobile li a {
  color: var(--color-primary) !important;
  font-weight: var(--fw-medium);
}
#navi .navi-in > .menu-mobile li.current-menu-item {
  border-bottom-color: var(--color-primary) !important;
}
.slicknav_nav a,
.slicknav_menu .slicknav_btn {
  color: var(--color-primary) !important;
}
.slicknav_menu {
  background: #ffffff !important;
  border-top: 1px solid var(--border-default) !important;
}

/* ============================================================
   Content area layout — #content-in is flex (main + sidebar)
   ============================================================ */
#content-in.content-in {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  max-width: 1140px;
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-10);
  box-sizing: border-box;
  width: 100% !important;
}

main#main.main {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

#sidebar.sidebar {
  width: 290px;
  flex-shrink: 0;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* ============================================================
   Section heading (人気記事 / 新着記事)
   Yokaport: centered, bold, #eaedf2 background
   ============================================================ */
.yk-sec-head {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h3);
  text-align: center;
  padding: 14px 10px;
  background: #eaedf2;
  margin: 0 0 var(--sp-4);
  color: var(--text-primary);
}

/* ============================================================
   Popular posts section
   ============================================================ */
.yk-popular {
  margin: 0 0 var(--sp-5);
}
.yk-popular-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.yk-pcard {
  display: block;
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
  transition: transform .18s ease, box-shadow .18s ease;
}
.yk-pcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}
.yk-pcard__img {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-lt) 100%);
  background-size: cover;
  background-position: center;
}
.yk-pcard__body {
  padding: 10px 12px;
}
.yk-pcard__cat {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-medium);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-1);
}
.yk-pcard__title {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0 0 var(--sp-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yk-pcard__date {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

/* ============================================================
   Entry cards (#list > a.entry-card-wrap.a-wrap)
   ============================================================ */

/* Card list grid */
#list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--sp-4) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card link wrapper */
.entry-card-wrap.a-wrap,
.a-wrap {
  background: var(--surface-card) !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease !important;
  width: 100% !important;
  box-sizing: border-box;
}
.entry-card-wrap.a-wrap:hover,
.a-wrap:hover {
  background: var(--surface-card) !important;
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover) !important;
  text-decoration: none !important;
}

/* Thumbnail */
.entry-card-thumb.card-thumb,
.card-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.entry-card-thumb-image.card-thumb-image,
.card-thumb-image,
.card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.entry-card-wrap.a-wrap:hover .card-thumb img,
.a-wrap:hover .card-thumb img {
  transform: scale(1.05);
}

/* Category label (in figure) */
.cat-label {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  font-size: 10px !important;
  font-weight: var(--fw-medium) !important;
  padding: 2px var(--sp-2) !important;
  border: none !important;
  text-decoration: none;
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
}
.entry-card-thumb,
.card-thumb {
  position: relative;
}

/* Card content */
.entry-card-content.card-content,
.card-content {
  padding: var(--sp-3) var(--sp-4) !important;
  margin: 0 !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* Card title */
.entry-card-title.card-title.e-card-title,
.card-title,
.e-card-title {
  font-size: 13px !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 1.5 !important;
  color: var(--text-primary) !important;
  margin: 0 0 var(--sp-1) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  flex-shrink: 0;
}

/* Snippet */
.entry-card-snippet.card-snippet.e-card-snippet,
.card-snippet,
.e-card-snippet {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  line-height: 1.6;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta (date, author) — override Cocoon's position:absolute */
.entry-card-meta,
.card-meta,
.e-card-meta {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  text-align: left !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-top: var(--sp-1) !important;
  display: block !important;
  width: 100%;
  flex-shrink: 0;
}
.entry-card-info,
.e-card-info,
.card-info {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.post-date,
.post-update {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}
.entry-card-categorys.e-card-categorys {
  display: none; /* cat-label already shows in figure */
}

/* ============================================================
   Sidebar widgets
   ============================================================ */
#sidebar .widget,
.sidebar .widget {
  background: var(--surface-card) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border-subtle) !important;
  margin-bottom: var(--sp-5) !important;
  padding: 0 !important;
}

/* Widget title */
.widgettitle,
.widget-title,
#sidebar h3.widgettitle {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  padding: 10px var(--sp-4) !important;
  font-size: 14px !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-body);
  margin: 0 !important;
  border: none !important;
}
.widgettitle::before {
  color: rgba(255,255,255,.7);
}

/* Widget body padding */
#sidebar .widget ul,
#sidebar .widget .textwidget,
#sidebar .widget .search-box,
#sidebar .widget form,
.sidebar .widget ul,
.sidebar .widget .textwidget,
.sidebar .widget .search-box,
.sidebar .widget form {
  padding: var(--sp-3) var(--sp-4);
}
#sidebar .widget ul li a,
.sidebar .widget ul li a {
  font-size: 14px;
  color: var(--text-secondary);
  transition: color .15s;
}
#sidebar .widget ul li a:hover,
.sidebar .widget ul li a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* ============================================================
   Footer
   ============================================================ */
#footer.footer,
.footer {
  background-color: #ffffff !important;
  color: var(--text-secondary);
}

/* Footer widgets area */
.footer-widgets {
  background: #ffffff;
}

/* Footer bottom bar */
.footer-bottom {
  background-color: #ffffff !important;
  margin-top: 0 !important;
  padding: 6px var(--sp-6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: auto !important;
  height: auto !important;
}

/* ロゴをabsoluteからstaticに戻してflexで揃える */
.footer-bottom-logo {
  position: static !important;
  float: none !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto;
}
.footer-bottom-content {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  text-align: right !important;
  flex: 1 !important;
  margin-left: auto !important;
}

.footer-bottom .footer-bottom-content,
.footer-bottom .copyright,
.footer-bottom a,
.navi-footer-in a {
  color: var(--text-secondary) !important;
}
.footer .copyright {
  padding: 0 !important;
}
.navi-footer-in .menu-item a:hover {
  opacity: .8;
  text-decoration: none !important;
}

/* ============================================================
   Responsive
   ============================================================ */

/* SP: ヘッダーを強制表示 */
@media (max-width: 834px) {
  #header,
  .header,
  .header-container,
  .header-container-in {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #header .logo-header,
  .logo-header {
    display: block !important;
  }
  #logo {
    display: block !important;
  }
}

@media (max-width: 1023px) {
  #content-in.content-in {
    flex-direction: column;
  }
  #sidebar.sidebar {
    width: 100%;
  }
  .yk-popular-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 834px) {
  /* Cocoon固定幅リセット: .wrap:1256px と .content-in min-width:860px が原因 */
  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .content-in {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* コンテンツ横余白16px (box-sizing必須) */
  #content-in.content-in {
    padding: var(--sp-4) var(--sp-4) var(--sp-8) !important;
    box-sizing: border-box !important;
  }
  /* main は幅が膨張しないよう保証 (padding は追加しない) */
  main#main.main {
    box-sizing: border-box !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  /* 記事テキスト折り返し強制 */
  .article {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }
  /* テーブルはスクロール */
  .article table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
  #list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-3) !important;
  }
  .yk-popular-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
  }
  .yk-sec-head {
    font-size: 18px;
  }
  /* TOC: display:table → block */
  .toc {
    display: block !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto;
    word-break: break-all;
  }
  /* 関連記事サムネイル幅 */
  .related-entry-card-thumb.card-thumb {
    width: 110px !important;
  }
  .related-entry-card-content {
    margin-left: 120px !important;
  }
}

@media (max-width: 480px) {
  #list {
    grid-template-columns: 1fr !important;
  }
  .yk-popular-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Table of Contents — ロゴの紺色に統一、背景白
   ============================================================ */
.toc {
  border-color: var(--color-primary) !important;
  background-color: #ffffff !important;
}
.toc-title {
  color: var(--color-primary) !important;
}
.toc .toc-list a,
.toc a {
  color: var(--color-primary) !important;
}
body.single [itemprop="mainEntityOfPage"] .toc .toc-content > ol > li a {
  color: #333 !important;
}
body.single [itemprop="mainEntityOfPage"] .toc .toc-content > ol > li::before {
  color: var(--color-primary) !important;
}


/* ============================================================
   Article text links & breadcrumb — #1981f7
   ============================================================ */
.article a {
  color: #1981f7 !important;
}
/* シェアボタンは白を維持 */
.sns-buttons a,
.sns-buttons a:hover {
  color: #ffffff !important;
}
/* パンくず */
.breadcrumb a,
.breadcrumb-item a {
  color: #1981f7 !important;
}

/* ============================================================
   Related posts — Cocoon デフォルトレイアウトに戻す
   ============================================================ */
.related-entry-card-wrap.a-wrap {
  display: block !important;
  flex-direction: unset !important;
}
.related-entry-card-wrap.a-wrap:hover {
  transform: none !important;
}
.related-entry-card-thumb.card-thumb {
  float: left !important;
  width: 160px !important;
  aspect-ratio: unset !important;
}
.related-entry-card-thumb-image.card-thumb-image {
  width: 100% !important;
  height: auto !important;
}
.related-entry-heading {
  border-left-color: var(--color-primary) !important;
}

/* ============================================================
   Article headings — ロゴの紺・黄色に統一
   ============================================================ */
.article h2 {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 20px !important;
  font-size: 20px !important;
  font-weight: var(--fw-semibold) !important;
  border: none !important;
}
.article h3 {
  border: none !important;
  border-left: 5px solid var(--color-accent) !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--color-primary) !important;
  font-size: 18px !important;
  font-weight: var(--fw-semibold) !important;
  padding: 8px 16px !important;
}
.article h3::before,
.article h3::after {
  display: none !important;
}
.article h4 {
  border-top: 2px solid var(--color-accent) !important;
  border-bottom: 2px solid var(--color-accent) !important;
  color: var(--color-primary) !important;
}
.article h5,
.article h6 {
  border-bottom: 2px solid var(--border-default) !important;
  color: var(--text-primary) !important;
}