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

/* ============================================================
   ゆるマリスト — warm-japandi デザイン（2026-06-09 実装）
   採用案: warm-japandi（無印×北欧）＋見出しミンチョ一点＋本文760px
   配色: bg #EFE9DF / text #33312E / accent #C8754D(terracotta)
   ※ テラコッタは低コントラストなので本文リンクには使わず、
     面・下線・チップなど装飾に限定する
============================================================ */
:root{
  --yj-bg:#EFE9DF;
  --yj-text:#33312E;
  --yj-accent:#C8754D;
  --yj-accent-d:#A1542E;
  --yj-sub:#8C8579;
  --yj-sub2:#A8A294;
  --yj-bg-dark:#E4DDD2;
  --yj-card:#F5F0E8;
  --yj-line:#D9D2C6;
  --yj-radius:12px;
  --yj-radius-sm:6px;
  --yj-shadow:0 2px 16px rgba(51,49,46,.06);
  --yj-shadow-sm:0 1px 8px rgba(51,49,46,.045);
  --yj-head:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  --yj-body:'Noto Sans JP',sans-serif;
  --yj-mincho:'Shippori Mincho',serif;
}

/* ── ベース ── */
body{
  background-color:var(--yj-bg)!important;
  color:var(--yj-text)!important;
  font-family:var(--yj-body)!important;
  font-weight:400;
  line-height:1.85;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
#wrapper,#container,#main,#content,.content,.main,.article{
  background-color:transparent!important;
  box-shadow:none!important;
}
a{ color:var(--yj-text); transition:color .2s; }
a:hover{ color:var(--yj-accent-d); }
h1,h2,h3,h4,h5{ font-family:var(--yj-head); color:var(--yj-text); line-height:1.45; letter-spacing:.03em; }
::selection{ background:rgba(200,117,77,.20); }

/* ── ヘッダー（ロゴをミンチョのテキストに置換） ── */
#header,.header,.header-container{
  background-color:var(--yj-bg)!important;
  box-shadow:none!important;
  border-bottom:1px solid var(--yj-line);
}
.header-in,.header-container-in,.header-container.nwa{ background-color:transparent!important; }
.site-name-text .site-logo-image,.header-site-logo-image,.logo-image img{ display:none!important; }
.logo .site-name-text-link,.site-name a{ text-decoration:none!important; }
.site-name-text::before{
  content:"ゆるマリスト";
  font-family:var(--yj-mincho);
  font-weight:600;
  font-size:1.5rem;
  color:var(--yj-text);
  letter-spacing:.12em;
}
.tagline,.tagline-in{
  color:var(--yj-sub)!important;
  font-family:var(--yj-head);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.08em;
}

/* ── グローバルナビ ── */
#navi,.navi{
  background-color:var(--yj-bg-dark)!important;
  border:none!important;
  box-shadow:none!important;
}
#navi .navi-in>ul>li>a,#navi ul li a{
  color:var(--yj-text)!important;
  font-family:var(--yj-head);
  font-weight:400;
  font-size:.82rem;
  letter-spacing:.06em;
}
#navi ul li a:hover{ background-color:transparent!important; color:var(--yj-accent-d)!important; }

/* ── パンくず ── */
#breadcrumb,.breadcrumb{
  background-color:transparent!important;
  color:var(--yj-sub)!important;
  font-family:var(--yj-head);
  font-size:.72rem;
  letter-spacing:.03em;
}
#breadcrumb a,.breadcrumb a{ color:var(--yj-sub)!important; }
#breadcrumb a:hover,.breadcrumb a:hover{ color:var(--yj-accent-d)!important; }

/* ── 記事一覧カード ── */
.entry-card,.e-card,a.a-wrap>article{
  background-color:var(--yj-card)!important;
  border:none!important;
  border-radius:var(--yj-radius)!important;
  box-shadow:var(--yj-shadow-sm)!important;
  overflow:hidden;
  transition:box-shadow .25s,transform .25s;
}
.a-wrap:hover .entry-card,.entry-card:hover,.e-card:hover{
  box-shadow:var(--yj-shadow)!important;
  transform:translateY(-2px);
}
.entry-card-thumb img,.card-thumb img,.entry-card-thumb-image{ border-radius:0!important; }
.entry-card-title,.card-title,.e-card-title{
  font-family:var(--yj-head)!important;
  font-weight:500!important;
  font-size:1rem!important;
  line-height:1.5;
  color:var(--yj-text)!important;
}
.a-wrap:hover .entry-card-title{ color:var(--yj-accent-d)!important; }
.entry-card-snippet,.card-snippet,.e-card-snippet{
  color:var(--yj-sub)!important;
  font-weight:400;
  font-size:.8rem;
  line-height:1.7;
}
.entry-card-meta,.card-meta,.e-card-meta,.entry-date,.post-date{
  color:var(--yj-sub2)!important;
  font-family:var(--yj-head);
  font-size:.7rem;
}

/* カテゴリラベルをテラコッタのチップに統一 */
.cat-label,[class*="cat-label-"]{
  background-color:rgba(200,117,77,.92)!important;
  color:#fff!important;
  border-radius:100px!important;
  border:none!important;
  font-family:var(--yj-head);
  font-weight:500;
  font-size:.62rem!important;
  letter-spacing:.08em;
  padding:2px 11px!important;
}

/* ── 記事タイトル（ミンチョ一点） ── */
.entry-title{
  font-family:var(--yj-mincho)!important;
  font-weight:600!important;
  font-size:clamp(1.5rem,3.5vw,2.05rem)!important;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--yj-text)!important;
  max-width:760px;
  margin:0 auto .6em;
}
.eye-catch,.eye-catch img{ border-radius:var(--yj-radius)!important; }

/* ── 本文（760pxに締める） ── */
.entry-content{ max-width:760px; margin-left:auto; margin-right:auto; }
.entry-content p,p.wp-block-paragraph{
  font-size:1rem;
  line-height:1.95;
  margin:0 0 1.4em;
  font-weight:400;
  color:var(--yj-text);
}
.entry-content a,.article a{ color:var(--yj-accent-d); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.entry-content a:hover{ color:var(--yj-text); }

/* H2（下線＋テラコッタの一点） */
.entry-content h2,h2.wp-block-heading,.article h2{
  font-family:var(--yj-head)!important;
  font-weight:600!important;
  font-size:1.35rem!important;
  color:var(--yj-text)!important;
  background:none!important;
  border:none!important;
  border-bottom:1.5px solid var(--yj-line)!important;
  padding:0 0 .5em!important;
  margin:2.6em 0 1.1em!important;
  position:relative;
  letter-spacing:.04em;
}
.entry-content h2::after,h2.wp-block-heading::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1.5px;
  width:46px;
  height:1.5px;
  background:var(--yj-accent);
}
/* H3（左に細いテラコッタ） */
.entry-content h3,h3.wp-block-heading,.article h3{
  font-family:var(--yj-head)!important;
  font-weight:600!important;
  font-size:1.12rem!important;
  color:var(--yj-text)!important;
  background:none!important;
  border:none!important;
  border-left:3px solid var(--yj-accent)!important;
  padding:.05em 0 .05em .7em!important;
  margin:2em 0 .9em!important;
}

/* ── 目次（TOC） ── */
.toc{
  background-color:var(--yj-card)!important;
  border:none!important;
  border-radius:var(--yj-radius)!important;
  box-shadow:var(--yj-shadow-sm);
  padding:20px 26px!important;
}
.toc-title{ font-family:var(--yj-head)!important; font-weight:600; color:var(--yj-text)!important; }
.toc a{ color:var(--yj-text)!important; font-size:.9rem; }
.toc a:hover{ color:var(--yj-accent-d)!important; }
.toc .toc-list li{ line-height:1.7; }

/* ── テーブル（早見表） ── */
.entry-content table,.article table{
  border-collapse:collapse!important;
  width:100%;
  font-family:var(--yj-head);
  font-size:.92rem;
  margin:1.6em 0;
  border:none!important;
  border-radius:var(--yj-radius-sm);
  overflow:hidden;
}
.entry-content table th,.article table th{
  background-color:var(--yj-bg-dark)!important;
  color:var(--yj-sub)!important;
  font-weight:600;
  text-align:left;
  padding:12px 16px!important;
  border:none!important;
  border-bottom:2px solid var(--yj-line)!important;
  font-size:.82rem;
  letter-spacing:.04em;
}
.entry-content table td,.article table td{
  padding:12px 16px!important;
  border:none!important;
  border-bottom:1px solid var(--yj-line)!important;
  color:var(--yj-text);
  font-weight:400;
  line-height:1.6;
}
.entry-content table tr:nth-child(even) td{ background-color:rgba(228,221,210,.45)!important; }

/* ── Cocoonのボックス類 ── */
.blank-box,.cardlink-box,.information-box,.memo-box,.comment-box,.note-box{
  background-color:var(--yj-card)!important;
  border-color:var(--yj-line)!important;
  border-radius:var(--yj-radius)!important;
}
.blank-box{ border-left:3px solid var(--yj-accent)!important; }

/* ── details/summary（FAQをアコーディオン化したとき用） ── */
.entry-content details{ border-bottom:1px solid var(--yj-line); }
.entry-content details:first-of-type{ border-top:1px solid var(--yj-line); }
.entry-content details summary{
  font-family:var(--yj-head);
  font-weight:600;
  padding:16px 4px;
  cursor:pointer;
  list-style:none;
}
.entry-content details summary::-webkit-details-marker{ display:none; }

/* ── 著者ボックス ── */
.author-box{
  background-color:var(--yj-card)!important;
  border:none!important;
  border-radius:var(--yj-radius)!important;
  box-shadow:var(--yj-shadow-sm);
  padding:22px 26px!important;
}
.author-box .author-thumb img,.avatar{ border-radius:50%!important; }
.author-name,.author-box .author-name a,.author-title{
  font-family:var(--yj-head)!important;
  font-weight:600;
  color:var(--yj-text)!important;
}
.author-description,.author-box .author-description{
  color:var(--yj-sub)!important;
  font-size:.86rem;
  line-height:1.8;
  font-weight:400;
}

/* ── 関連記事 ── */
.related-entry-card,.related-entry-card-wrap,.related-entry-card-thumb{ background-color:transparent!important; }
.related-entry-card-title,.related-entry-card-snippet{ font-family:var(--yj-head)!important; }
.related-entry-card-title{ color:var(--yj-text)!important; font-weight:500; }

/* ── サイドバー／ウィジェット ── */
.widget{ background-color:transparent!important; }
.widget-title,.sidebar h3,.sidebar .widget-title{
  font-family:var(--yj-head)!important;
  font-weight:600;
  color:var(--yj-text)!important;
  background:none!important;
  border:none!important;
  border-bottom:1.5px solid var(--yj-line)!important;
  padding-bottom:.4em;
}
.widget-entry-cards .a-wrap,.sidebar .entry-card,.widget-entry-card{ background-color:var(--yj-card)!important; }

/* ── ボタン／ページネーション ── */
.btn,.wp-block-button__link,.more-button,button.btn{
  background-color:var(--yj-accent)!important;
  color:#fff!important;
  border:none!important;
  border-radius:100px!important;
  font-family:var(--yj-head);
}
.page-numbers{ border-radius:var(--yj-radius-sm)!important; border-color:var(--yj-line)!important; color:var(--yj-text)!important; background-color:var(--yj-card)!important; }
.page-numbers.current{ background-color:var(--yj-accent)!important; color:#fff!important; border-color:var(--yj-accent)!important; }
.sns-share .sns-share-buttons a,.share-button{ border-radius:var(--yj-radius-sm)!important; }

/* ── フッター ── */
#footer,.footer,.footer-container{
  background-color:var(--yj-bg-dark)!important;
  color:var(--yj-sub)!important;
  border-top:1px solid var(--yj-line);
}
#footer a,.footer a{ color:var(--yj-sub)!important; }
#footer a:hover,.footer a:hover{ color:var(--yj-accent-d)!important; }
.copyright,.footer-bottom{
  color:var(--yj-sub2)!important;
  font-family:var(--yj-head);
  font-size:.72rem;
  letter-spacing:.06em;
}

/* ── レスポンシブ ── */
@media screen and (max-width:768px){
  .site-name-text::before{ font-size:1.28rem; }
  .entry-content h2,h2.wp-block-heading{ font-size:1.2rem!important; }
  .entry-title{ font-size:1.5rem!important; }
}

/* ── あわせて読みたい（内部リンク・the_content末尾に挿入）── */
.yj-related-links{
  background-color:var(--yj-card);
  border:none;
  border-radius:var(--yj-radius);
  box-shadow:var(--yj-shadow-sm);
  padding:18px 24px;
  margin:44px auto;
  max-width:760px;
}
.yj-related-links__label{
  font-family:var(--yj-head);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--yj-sub);
  margin:0 0 10px;
}
.yj-related-links ul{ margin:0; padding:0; list-style:none; }
.yj-related-links li{ margin:.4em 0; line-height:1.7; padding-left:1.1em; position:relative; }
.yj-related-links li::before{ content:"›"; position:absolute; left:0; color:var(--yj-accent); font-weight:600; }
.yj-related-links a{ color:var(--yj-accent-d); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.yj-related-links a:hover{ color:var(--yj-text); }

/* ── トップのヒーロー（front-pageのみ・JSで#listの前に挿入）── */
.yj-hero{ max-width:1080px; margin:8px auto 44px; padding:56px 24px 8px; text-align:center; }
.yj-hero__eyebrow{ font-family:var(--yj-head); font-size:.7rem; letter-spacing:.22em; color:var(--yj-accent); font-weight:500; text-transform:uppercase; margin:0 0 18px; }
.yj-hero__title{ font-family:var(--yj-mincho); font-weight:600; font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.55; letter-spacing:.05em; color:var(--yj-text); margin:0 0 18px; }
.yj-hero__lead{ font-family:var(--yj-body); font-size:.92rem; line-height:1.95; color:var(--yj-sub); max-width:520px; margin:0 auto; font-weight:400; }

/* ── 記事一覧を3カラムのカードグリッドに ── */
#list.ect-entry-card{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
#list.ect-entry-card>.a-wrap{ margin:0!important; display:flex; }
#list .entry-card,#list .e-card{ flex:1; display:flex; flex-direction:column; }
#list .entry-card-thumb,#list .e-card-thumb{ width:100%!important; float:none!important; position:relative; margin:0!important; }
#list .entry-card-thumb img,#list .e-card-thumb img{ width:100%!important; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; }
#list .entry-card-content,#list .e-card-content{ margin-left:0!important; width:auto!important; padding:16px 18px 18px; flex:1; display:flex; flex-direction:column; }
#list .entry-card-snippet,#list .e-card-snippet{ flex:1; }
@media screen and (max-width:1023px){ #list.ect-entry-card{ grid-template-columns:repeat(2,1fr); } }
@media screen and (max-width:600px){ #list.ect-entry-card{ grid-template-columns:1fr; } }

/* ── FAQアコーディオン（JSで「よくある質問」のh3+pをdetailsに変換）── */
details.yj-faq{ border-bottom:1px solid var(--yj-line); margin:0; }
details.yj-faq:first-of-type{ border-top:1px solid var(--yj-line); }
details.yj-faq summary{ list-style:none; cursor:pointer; padding:18px 40px 18px 4px; position:relative; font-family:var(--yj-head); font-weight:600; font-size:1rem; color:var(--yj-text); line-height:1.6; }
details.yj-faq summary::-webkit-details-marker{ display:none; }
details.yj-faq summary::after{ content:"+"; position:absolute; right:4px; top:16px; width:24px; height:24px; border:1.5px solid var(--yj-line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--yj-sub); font-weight:400; transition:background .2s,border-color .2s,color .2s; }
details.yj-faq[open] summary::after{ content:"−"; background:var(--yj-accent); border-color:var(--yj-accent); color:#fff; }
details.yj-faq .yj-faq__a{ padding:0 4px 18px; color:var(--yj-sub); font-size:.95rem; line-height:1.9; }