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

/* ==========================================================
   カカヲのこだわり比較 — デザイントークン
   色や書体を変えたいときは、この :root だけ書き換えれば全体に反映されます
   ========================================================== */
:root{
  --ink:#131A1F;      /* 基本の文字色・濃い面 */
  --deep:#0F4C5C;     /* 主色（深い青緑） */
  --deep-d:#0A3642;   /* 主色の濃い版（hover用） */
  --signal:#D9A404;   /* 差し色（芥子）※ここぞという所だけ */
  --paper:#FFFFFF;
  --wash:#EAEDEE;     /* 背景の淡いグレー */
  --rule:#C9D0D4;     /* 罫線 */
  --mute:#5F6B73;     /* 補助テキスト */

  --mincho:'Shippori Mincho B1',serif;
  --gothic:'Zen Kaku Gothic New',sans-serif;
  --mono:'Roboto Mono',monospace;
}

/* ==========================================================
   ベース
   ========================================================== */
body{
  font-family:var(--gothic);
  color:var(--ink);
  background:var(--wash);
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--deep); }

#content, #main, .main, .content{ background:var(--paper); }

/* ==========================================================
   ヘッダー
   ========================================================== */
#header-container, #header{
  background:var(--paper);
  box-shadow:none;
}
#header-container{ border-bottom:1px solid var(--rule); }

.site-name-text{
  font-family:var(--mincho);
  font-weight:800;
  letter-spacing:.14em;
  color:var(--ink);
}
.tagline{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.22em;
  color:var(--mute);
}

/* ==========================================================
   グローバルナビ
   ========================================================== */
#navi, .navi-in{ background:var(--paper); border:none; }

.navi-in > ul > li > a{
  font-size:.83rem;
  font-weight:500;
  letter-spacing:.09em;
  color:var(--ink);
  height:auto;
  padding:16px 18px;
  transition:color .16s;
}
.navi-in > ul > li > a:hover{
  background:transparent;
  color:var(--deep);
}

/* ---- ドロップダウン（カテゴリー一覧） ---- */
.navi-in ul.sub-menu,
.navi-in ul.children{
  background:var(--ink);
  min-width:214px;
  max-height:min(60vh,420px);
  overflow-y:auto;
  padding:6px 0;
  box-shadow:0 12px 28px rgba(19,26,31,.18);
  border:none;
}
.navi-in ul.sub-menu li,
.navi-in ul.children li{
  border-bottom:1px solid #232D34;
  width:100%;
}
.navi-in ul.sub-menu li:last-child,
.navi-in ul.children li:last-child{ border-bottom:none; }

.navi-in ul.sub-menu li a,
.navi-in ul.children li a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:11px 18px;
  height:auto;
  line-height:1.6;
  color:#C6CDD2;
  font-size:.8rem;
  letter-spacing:.06em;
  background:transparent;
  transition:background .14s, color .14s;
}
.navi-in ul.sub-menu li a:hover,
.navi-in ul.children li a:hover{
  background:var(--deep);
  color:#fff;
}

.navi-in .count{
  font-family:var(--mono);
  font-size:.64rem;
  color:#6E7A82;
  font-variant-numeric:tabular-nums;
}
.navi-in a:hover .count{ color:var(--signal); }

/* スクロールバー */
.navi-in ul.sub-menu, .navi-in ul.children{
  scrollbar-width:thin;
  scrollbar-color:#3C4750 #1B242A;
}
.navi-in ul.sub-menu::-webkit-scrollbar,
.navi-in ul.children::-webkit-scrollbar{ width:5px; }
.navi-in ul.sub-menu::-webkit-scrollbar-track,
.navi-in ul.children::-webkit-scrollbar-track{ background:#1B242A; }
.navi-in ul.sub-menu::-webkit-scrollbar-thumb,
.navi-in ul.children::-webkit-scrollbar-thumb{ background:#3C4750; }

/* ==========================================================
   パンくず
   ========================================================== */
.breadcrumb{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.14em;
  color:var(--mute);
}
.breadcrumb a{ color:var(--mute); }
.breadcrumb a:hover{ color:var(--deep); }

/* ==========================================================
   記事タイトル・メタ
   ========================================================== */
.entry-title, .archive-title{
  font-family:var(--mincho);
  font-weight:800;
  line-height:1.52;
  letter-spacing:.015em;
}
.date-tags, .post-date, .post-update, .entry-card-info{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--mute);
}
.cat-label{
  background:var(--deep);
  border:none;
  border-radius:0;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.2em;
}

/* ==========================================================
   本文タイポグラフィ
   ========================================================== */
.entry-content{ font-size:1rem; line-height:2.05; }
.entry-content p{ margin:0 0 1.75em; }

/* h2：署名要素（目盛り罫） */
.article h2{
  position:relative;
  font-family:var(--mincho);
  font-weight:800;
  font-size:clamp(1.24rem,2.6vw,1.6rem);
  line-height:1.6;
  letter-spacing:.03em;
  background:none;
  border:none;
  border-top:1px solid var(--ink);
  margin:3.1em 0 1.3em;
  padding:1.5em 0 0;
}
.article h2::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:62px; height:7px;
  background:repeating-linear-gradient(to right,var(--ink) 0 1px,transparent 1px 9px);
}

.article h3{
  font-family:var(--mincho);
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:.03em;
  background:none;
  border:none;
  border-left:2px solid var(--deep);
  padding:.1em 0 .1em .8em;
  margin:2.5em 0 1em;
}

.article h4{
  font-family:var(--gothic);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.04em;
  background:none;
  border:none;
  color:var(--deep);
  margin:2.2em 0 .8em;
}

/* 太字にマーカー */
.entry-content strong{
  font-weight:700;
  background:linear-gradient(transparent 62%,rgba(217,164,4,.38) 0);
}

.entry-content ul, .entry-content ol{ margin:0 0 1.75em; padding-left:1.3em; }
.entry-content li{ margin-bottom:.6em; }

.entry-content blockquote{
  background:var(--wash);
  border:none;
  border-left:2px solid var(--deep);
  color:var(--mute);
  font-size:.9rem;
  padding:20px 22px;
}

/* ==========================================================
   比較表（このブログの主役）
   ========================================================== */
.entry-content table{
  width:100%;
  border-collapse:collapse;
  border:none;
  font-size:.87rem;
  margin:2em 0;
}
.entry-content table thead th{
  background:transparent;
  border:none;
  border-bottom:2px solid var(--ink);
  font-family:var(--gothic);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.13em;
  color:var(--mute);
  text-align:left;
  padding:0 13px 12px;
  white-space:nowrap;
}
.entry-content table tbody th{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--rule);
  font-weight:500;
  font-size:.78rem;
  color:var(--mute);
  letter-spacing:.05em;
  text-align:left;
  white-space:nowrap;
  padding:13px;
}
.entry-content table td{
  border:none;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  padding:13px;
}
.entry-content table tbody tr:last-child th,
.entry-content table tbody tr:last-child td{ border-bottom:none; }

/* 1列目を項目名として扱う（thead が無い表向け） */
.entry-content table td:first-child{
  font-family:var(--gothic);
  color:var(--mute);
  font-size:.78rem;
}

/* ==========================================================
   記事一覧
   ========================================================== */
.entry-card-wrap{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:0;
  padding:26px;
  transition:background .18s, border-color .18s;
}
.entry-card-wrap:hover{
  background:#F6F8F8;
  border-color:var(--deep);
}

.entry-card-title{
  font-family:var(--mincho);
  font-weight:700;
  font-size:1.14rem;
  line-height:1.68;
  letter-spacing:.02em;
  color:var(--ink);
}
.entry-card-wrap:hover .entry-card-title{ color:var(--deep); }

.entry-card-snippet{
  font-size:.83rem;
  color:var(--mute);
  line-height:1.9;
}

.entry-card-thumb img{ border-radius:0; }

/* ページネーション */
.pagination .page-numbers{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.08em;
  border:1px solid var(--rule);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
}
.pagination .current,
.pagination a:hover{
  background:var(--deep);
  border-color:var(--deep);
  color:#fff;
}

/* ==========================================================
   目次
   ========================================================== */
.toc{
  background:transparent;
  border:1px solid var(--rule);
  border-radius:0;
  font-size:.85rem;
  padding:20px 18px;
}
.toc-title{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.22em;
  color:var(--mute);
  border-bottom:1px solid var(--rule);
  padding-bottom:11px;
  margin-bottom:13px;
  text-align:left;
}
.toc-content a{ color:var(--ink); text-decoration:none; }
.toc-content a:hover{ color:var(--deep); }

/* ==========================================================
   ボタン
   ========================================================== */
.btn, .btn-wrap > a, .cocoon-button{
  background:var(--deep) !important;
  border:none !important;
  border-radius:0 !important;
  font-weight:700;
  font-size:.86rem;
  letter-spacing:.14em;
  padding:14px 34px;
  transition:background .18s;
}
.btn:hover, .btn-wrap > a:hover, .cocoon-button:hover{
  background:var(--deep-d) !important;
  opacity:1;
}

/* 推し商品用（本文のボタンブロックに btn-pick クラスを付ける） */
.btn-wrap.btn-pick > a, a.btn-pick{
  background:var(--signal) !important;
  color:var(--ink) !important;
}
.btn-wrap.btn-pick > a:hover, a.btn-pick:hover{ background:#C29103 !important; }

/* ==========================================================
   サイドバー
   ========================================================== */
.sidebar{ background:transparent; }
.widget-sidebar{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:0;
  padding:20px 18px;
  margin-bottom:20px;
}
.widget-sidebar-title{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.22em;
  color:var(--mute);
  background:none;
  border:none;
  border-bottom:1px solid var(--rule);
  padding:0 0 11px;
  margin-bottom:13px;
  text-align:left;
}

/* ==========================================================
   著者ボックス
   ========================================================== */
.author-box{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:0;
  padding:24px 22px;
}
.author-name{ font-family:var(--mincho); font-weight:700; letter-spacing:.06em; }
.author-description{ font-size:.82rem; color:var(--mute); line-height:1.9; }

/* ==========================================================
   フッター
   ========================================================== */
#footer{
  background:var(--ink);
  color:#98A3AA;
  border:none;
  font-size:.82rem;
}
#footer a{ color:#B9C2C8; }
#footer a:hover{ color:var(--signal); }
.footer-bottom{ border:none; }
.copyright{
  font-family:var(--mono);
  font-size:.63rem;
  letter-spacing:.14em;
  color:#5E6A72;
}

/* ==========================================================
   アクセシビリティ
   ========================================================== */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .article h2{ font-size:1.24rem; }
}
/*834px以下*/
@media screen and (max-width: 834px){
  .entry-content{ line-height:1.95; }
  .article h2{ margin-top:2.6em; }
  .navi-in ul.sub-menu, .navi-in ul.children{ max-height:none; }
}
/*480px以下*/
@media screen and (max-width: 480px){
  .article h2{ font-size:1.15rem; padding-top:1.2em; }
  .article h3{ font-size:1.02rem; }
  .entry-content table{ font-size:.8rem; }
  .entry-content table thead th,
  .entry-content table tbody th,
  .entry-content table td{ padding:9px 7px; }
  .entry-card-wrap{ padding:18px; }
}