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

/************************************
** のぎ解説 デザインカスタム
** ベース思想: Scandinavian Design
************************************/

:root{
  --color-bg: #F4F0F8;
  --color-card: #FFFFFF;
  --color-text: #3A3530;
  --color-text-sub: #5C5650;
  --color-primary: #7D6B99;
  --color-primary-dark: #5F4F78;
  --color-accent: #C97B5B;
  --color-accent-dark: #B2673F;
  --color-border: #E8E1D6;
  --color-panel: #F1EFE6;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-soft: 0 4px 16px rgba(58,53,48,0.07);
  --shadow-hover: 0 8px 24px rgba(58,53,48,0.12);
}

/* ---------- 全体 ---------- */
body{
  background-color: var(--color-bg);
  color: var(--color-text);
  letter-spacing: .02em;
  line-height: 1.9;
}
#content{
  background-color: transparent;
}
a{ color: var(--color-primary-dark); }
a:hover{ color: var(--color-accent); }

/* ---------- ヘッダー ---------- */
#header{
  background-color: #EAE1F1;
  border-bottom: 1px solid #DCCEE7;
  box-shadow: none;
}
#navi, .navi{
  background-color: var(--color-primary);
  box-shadow: none;
}
#navi a, .navi a{
  color: #fff;
}
#navi li:hover > a, .navi li:hover > a{
  background-color: var(--color-primary-dark);
}
.site-name a, #site-name a{
  color: var(--color-text);
}

/* ---------- 記事カード(トップ・一覧) ---------- */
.entry-card-wrap{
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.entry-card-wrap:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.entry-card{
  border: none;
  box-shadow: none;
  background: transparent;
}
.entry-card-title, .card-title{
  color: var(--color-text);
  font-weight: 700;
}
.entry-card-title a:hover{
  color: var(--color-accent);
}
.entry-card-snippet, .card-snippet{
  color: var(--color-text-sub);
}
.entry-card-categorys a, .card-categorys a{
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  padding: .25em .9em;
  border: none;
}
.entry-card-meta, .card-meta{
  color: var(--color-text-sub);
}

/* ---------- サイドバー / ウィジェット ---------- */
.widget{
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.6em;
}
.widget-title, .widgettitle{
  color: var(--color-primary-dark);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: .5em;
  font-weight: 700;
}

/* ---------- 記事本文 ---------- */
.article{
  background-color: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 2.2em;
}
.article-title{
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.5;
}
.entry-content{
  font-size: 1.05em;
  line-height: 2;
  color: var(--color-text);
}
.entry-content h2{
  background-color: var(--color-panel);
  border: none;
  border-left: 6px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .6em 1em;
  margin: 2.2em 0 1.1em;
  color: var(--color-text);
}
.entry-content h3{
  color: var(--color-primary-dark);
  border: none;
  border-bottom: 2px dashed var(--color-border);
  padding-bottom: .3em;
  margin: 1.8em 0 .9em;
}
.entry-content strong{
  color: var(--color-accent-dark);
}
.entry-content ul, .entry-content ol{
  line-height: 1.9;
}
.entry-content img{
  border-radius: var(--radius-md);
}
.entry-content blockquote{
  background-color: var(--color-panel);
  border-left: 6px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* 目次 */
.toc-box, .toc{
  background-color: var(--color-panel);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: none;
}
.toc-title{
  background-color: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ---------- ボタン類 ---------- */
.sim-btn a, .a-btn, .cta-btn, .wp-block-button__link, .btn-under, .speech-balloon .balloon-content{
  border-radius: var(--radius-sm);
}
.sim-btn a, .wp-block-button__link{
  background-color: var(--color-accent);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-soft);
}
.sim-btn a:hover, .wp-block-button__link:hover{
  background-color: var(--color-accent-dark);
  color: #fff;
}

/* ---------- 独自ショートコード代替(AddQuickTag用・テーマ非依存) ---------- */
.ngk-box{
  background-color: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.2em 1.5em;
  margin: 1.6em 0;
}
.ngk-box-title{
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: .5em;
}
.ngk-btn{
  display: inline-block;
  background-color: var(--color-accent);
  color: #fff !important;
  padding: .8em 1.8em;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}
.ngk-btn:hover{
  background-color: var(--color-accent-dark);
  color: #fff !important;
}
.ngk-red{
  color: var(--color-accent-dark);
  font-weight: 700;
}

/* ---------- フッター ---------- */
#footer, .footer{
  background-color: var(--color-panel);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
}
#footer a, .footer a{
  color: var(--color-primary-dark);
}

/* ---------- トップページ マガジン型セクション(最新の投稿ブロック) ---------- */
.wp-block-latest-posts{
  list-style: none;
  padding: 0;
  margin: 0 0 1.6em;
}
.wp-block-latest-posts.is-grid{
  display: grid;
  gap: 1.2em;
}
.wp-block-latest-posts.columns-3{ grid-template-columns: repeat(3, 1fr); }
.wp-block-latest-posts.columns-4{ grid-template-columns: repeat(4, 1fr); }
.wp-block-latest-posts__post{
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.2em 1.4em;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-latest-posts__post:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.wp-block-latest-posts__post-title{
  display: block;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.6;
  margin-bottom: .5em;
}
.wp-block-latest-posts__post-title:hover{ color: var(--color-accent); }
.wp-block-latest-posts__post-date{
  display: block;
  font-size: .85em;
  color: var(--color-text-sub);
}
.entry-content .has-text-align-right{
  text-align: right;
  margin-top: -0.8em;
}
.entry-content .has-text-align-right a{
  font-weight: 700;
}
/* ---------- 一覧表(テーブル) ---------- */
.ngk-table-wrap{
  overflow-x: auto;
  margin: 1.6em 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.ngk-table-wrap table{
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  background-color: var(--color-card);
}
.ngk-table-wrap th, .ngk-table-wrap td{
  padding: .7em 1em;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}
.ngk-table-wrap thead th{
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  position: sticky;
  top: 0;
}
.ngk-table-wrap tbody tr:nth-child(even){
  background-color: var(--color-panel);
}
.ngk-table-wrap tbody tr:hover{
  background-color: #EDE6F3;
}
.ngk-table-wrap td a{
  font-weight: 700;
}
.ngk-table-wrap thead th{
  user-select: none;
  transition: background-color .15s ease;
}
.ngk-table-wrap thead th:hover{
  background-color: var(--color-primary-dark);
}
.ngk-table-wrap thead th::after{
  content: "\21C5";
  display: inline-block;
  margin-left: .4em;
  opacity: .5;
  font-size: .85em;
}
.ngk-table-wrap thead th.ngk-sort-asc::after{
  content: "\25B2";
  opacity: 1;
}
.ngk-table-wrap thead th.ngk-sort-desc::after{
  content: "\25BC";
  opacity: 1;
}
/* ---------- 一覧表 絞込み・検索バー ---------- */
.ngk-filter-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin: 1.6em 0 1em;
}
.ngk-filter-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
}
.ngk-filter-btn{
  background-color: var(--color-panel);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .5em 1.3em;
  font-size: .95em;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ngk-filter-btn:hover{
  border-color: var(--color-primary);
}
.ngk-filter-btn.ngk-filter-active{
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.ngk-filter-search{
  display: flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  color: var(--color-text-sub);
}
.ngk-filter-search input{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: .5em .9em;
  font-size: .95em;
  min-width: 200px;
}
@media screen and (max-width: 480px){
  .ngk-filter-bar{
    flex-direction: column;
    align-items: stretch;
  }
  .ngk-filter-search input{
    min-width: 0;
    width: 100%;
  }
}
/* ---------- フッターリンク(プライバシーポリシー・お問い合わせ) ---------- */
.ngk-footer-links{
  background-color: var(--color-panel);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-sub);
  text-align: center;
  padding: 1em 1em 2em;
  font-size: .9em;
}
.ngk-footer-links a{
  color: var(--color-text-sub);
  text-decoration: underline;
}
.ngk-footer-links a:hover{
  color: var(--color-accent);
}
.ngk-footer-links-sep{
  margin: 0 .8em;
  opacity: .5;
}

/* ---------- トップページ 期別メンバーカード ---------- */
.ngk-gen-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2em;
  margin: 1.6em 0 2em;
}
.ngk-gen-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3em;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 1.6em 1em;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ngk-gen-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  background-color: var(--color-panel);
}
.ngk-gen-card-num{
  font-size: 2.2em;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.ngk-gen-card-label{
  font-size: 1.05em;
  font-weight: 700;
  color: var(--color-text);
}
.ngk-gen-card-count{
  font-size: .82em;
  color: var(--color-text-sub);
}
@media screen and (max-width: 640px){
  .ngk-gen-cards{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- トップページ 一覧・まとめカード ---------- */
.ngk-list-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2em;
  margin: 1.6em 0 2em;
}
.ngk-list-card{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 5em;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 1.1em 1.2em;
  font-weight: 700;
  font-size: .98em;
  color: var(--color-text);
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.ngk-list-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  background-color: var(--color-panel);
  border-left-color: var(--color-accent);
  color: var(--color-text);
}
@media screen and (max-width: 834px){
  .ngk-list-cards{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px){
  .ngk-list-cards{
    grid-template-columns: 1fr;
  }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .article, .widget{ padding: 1.6em; }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .article{ padding: 1.3em; border-radius: var(--radius-md); }
  .entry-content{ font-size: 1em; }
  .wp-block-latest-posts.columns-3, .wp-block-latest-posts.columns-4{ grid-template-columns: repeat(2, 1fr); }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .article{ padding: 1em; }
  .entry-content h2{ padding: .5em .8em; }
  .wp-block-latest-posts.columns-3, .wp-block-latest-posts.columns-4{ grid-template-columns: 1fr; }
}

/* ngk-mobile-tables: 列が4つ以下の小さな表は画面幅に収め、文字を折り返す（2026-10-20） */
.ngk-table-wrap table:not(:has(th:nth-child(5))){
  min-width: 0;
}
.ngk-table-wrap table:not(:has(th:nth-child(5))) td{
  white-space: normal;
}
@media screen and (max-width: 600px){
  .ngk-table-wrap th, .ngk-table-wrap td{
    padding: .5em .6em;
    font-size: .88em;
  }
  /* 横スクロールする大きな表は、1列目（名前）を固定して読みやすく */
  .ngk-table-wrap table:has(th:nth-child(5)) td:first-child,
  .ngk-table-wrap table:has(th:nth-child(5)) th:first-child{
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--color-card);
  }
  .ngk-table-wrap table:has(th:nth-child(5)) thead th:first-child{
    background-color: var(--color-primary);
    z-index: 2;
  }
  .ngk-table-wrap table:has(th:nth-child(5)) tbody tr:nth-child(even) td:first-child{
    background-color: var(--color-panel);
  }
}