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

/*****************************************************************
** つむログ Design System  ―  Apricot × Mint × Coral
** 主役 #FFB266 / クール #82EDD8 / スパーク #FF7A7A
** ベース #FFFCF5 アイボリー / 本文 #3A352E / 見出し #2C2723
*****************************************************************/

:root{
  --apricot:#FFB266;   --apricot-deep:#D97F35;  --apricot-tint:#FFF3E6;
  --mint:#82EDD8;      --mint-deep:#2BAE97;     --mint-tint:#EAFBF5;
  --coral:#FF7A7A;     --coral-deep:#E85C5C;
  --ink:#3A352E;       --ink-strong:#2C2723;    --ink-soft:#6E665C;
  --base:#FFFCF5;      --surface:#FFFFFF;        --hairline:#EFE6D9;
  --font-base:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",YuGothic,Meiryo,sans-serif;
  --lh:2.0;  --radius:6px;  --shadow:0 6px 20px rgba(120,90,40,.08);
}

/* ============ 1. タイポグラフィ基盤 ============ */
body{
  background:var(--base); color:var(--ink);
  font-family:var(--font-base);
  font-size:16px; line-height:var(--lh);
  letter-spacing:.02em; -webkit-font-smoothing:antialiased;
}
#main, #content, .content{ background:transparent; }
.article{ font-size:1rem; line-height:var(--lh); color:var(--ink); }
.article p{ margin:0 0 1.8em; }
.article strong{ color:var(--ink-strong); font-weight:700; }
@media screen and (min-width:1024px){ body{ font-size:16.5px; } }

/* ============ 2. 見出し（記事本文）============ */
.article h2{
  position:relative; border:0; border-bottom:2px solid var(--apricot);
  padding:.1em 0 .5em; margin:2.8em 0 1.3em;
  font-size:1.5em; font-weight:700; letter-spacing:.03em;
  color:var(--ink-strong); background:none;
}
.article h3{
  border:0; border-left:5px solid var(--apricot);
  padding:.15em 0 .15em .75em; margin:2.2em 0 1em;
  font-size:1.25em; font-weight:700; color:var(--ink-strong); background:none;
}
.article h4{
  border:0; padding:0 0 0 1.1em; margin:1.8em 0 .9em;
  font-size:1.1em; font-weight:700; color:var(--ink-strong); position:relative;
}
.article h4::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.6em; height:.6em; border-radius:50%; background:var(--mint-deep);
}

/* ============ 3. 記事本文パーツ ============ */
.article a{
  color:var(--apricot-deep);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .2s;
}
.article a:hover{ color:var(--coral-deep); }
.article blockquote{
  border:0; border-left:3px solid var(--mint-deep);
  background:var(--mint-tint); border-radius:0 var(--radius) var(--radius) 0;
  padding:1.1em 1.5em; margin:2.2em 0; color:var(--ink); font-style:normal;
}
.article blockquote p:last-child{ margin-bottom:0; }
.article ul li, .article ol li{ margin:.5em 0; }
.article ul li::marker{ color:var(--apricot); }
.article ol li::marker{ color:var(--apricot-deep); font-weight:700; }
.article .marker, .article mark{
  background:linear-gradient(transparent 58%, #FFD9B0 58%); padding:0 .1em;
}
.article table{ border-collapse:collapse; width:100%; margin:2em 0; font-size:.95em; }
.article th{ background:var(--apricot-tint); color:var(--ink-strong); font-weight:700; }
.article th, .article td{ border:1px solid var(--hairline); padding:.7em 1em; }
.article tr:nth-child(even) td{ background:#FFFBF4; }
.article hr{ border:0; border-top:1px solid var(--hairline); margin:3em 0; }
.article .wp-block-button__link, .wp-block-button__link, .btn{
  background:var(--apricot); color:#fff; border:0; border-radius:var(--radius);
  box-shadow:none; font-weight:700; transition:background .2s, transform .1s;
}
.article .wp-block-button__link:hover, .wp-block-button__link:hover, .btn:hover{
  background:var(--coral-deep); color:#fff; transform:translateY(-1px);
}

/* ============ 4. 一覧・カード・サムネ ============ */
.entry-card, .related-entry-card, .widget-entry-card{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius); overflow:hidden;
  transition:box-shadow .25s, transform .25s;
}
.entry-card:hover, .related-entry-card:hover{
  box-shadow:var(--shadow); transform:translateY(-2px);
}
.entry-card-title, .card-title{ color:var(--ink-strong); font-weight:700; }
a.entry-card-wrap:hover .entry-card-title{ color:var(--apricot-deep); }
.cat-label{ background:var(--apricot); border-radius:0 4px 4px 0; }
.card-thumb img, .entry-card-thumb img{ transition:transform .4s; }
.entry-card:hover .card-thumb img{ transform:scale(1.04); }
.pagination .page-numbers{ border-radius:4px; color:var(--apricot-deep); }
.pagination .page-numbers.current{ background:var(--apricot); border-color:var(--apricot); color:#fff; }

/* ============ 5. ヘッダー・グローバルナビ ============ */
#header, .header-container-in{ background:var(--base); }
.logo a, #site-title a{ color:var(--ink-strong); }
#navi, #navi .navi-in{ background:var(--ink-strong); }
#navi .navi-in>ul>li>a{ color:#fdf7ee; font-weight:600; letter-spacing:.03em; }
#navi .navi-in>ul>li>a:hover{ background:var(--apricot); color:#fff; }
#navi .navi-in>ul>li.current-menu-item>a{ background:var(--apricot-deep); color:#fff; }
#navi ul ul{ background:var(--ink-strong); }
#navi ul ul li a:hover{ background:var(--apricot); }

/* ============ 6. サイドバー・フッター ============ */
.sidebar h3, .widget-title, .widget h3{
  border:0; border-left:5px solid var(--apricot);
  background:none; padding:.2em 0 .2em .7em; color:var(--ink-strong);
  font-size:1.05em; font-weight:700;
}
.sidebar .widget{ background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius); padding:1.2em 1.3em; margin-bottom:1.8em; }
.sidebar a{ color:var(--ink); }
.sidebar a:hover{ color:var(--apricot-deep); }
.author-box, .widget_profilebox{ border-radius:var(--radius); }
.tag-link, .entry-tags a{
  background:var(--mint-tint); color:var(--mint-deep);
  border:1px solid #CFF0E7; border-radius:4px;
}
.tag-link:hover, .entry-tags a:hover{ background:var(--mint); color:#fff; }
#footer, .footer{ background:var(--ink-strong); color:#efe7da; }
#footer a, .footer a{ color:#efe7da; }
#footer a:hover{ color:var(--apricot); }

/* ============ 7. 全体微調整 ============ */
::selection{ background:#FFD9B0; color:var(--ink-strong); }
.appeal, .toc{ border-radius:var(--radius); }
#main .toc{ border:1px solid var(--hairline); background:var(--surface); }
.toc-title{ color:var(--ink-strong); }
.go-to-top-button, #go-to-top a{ background:var(--apricot); border-radius:var(--radius); }
.go-to-top-button:hover{ background:var(--coral-deep); }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .article h2{ font-size:1.35em; }
  .article h3{ font-size:1.15em; }
}

/*834px以下*/
@media screen and (max-width: 834px){
  body{ font-size:15.5px; }
  .sidebar .widget{ padding:1em 1.1em; }
}

/*480px以下*/
@media screen and (max-width: 480px){
  body{ font-size:15px; }
  .article h2{ margin:2.2em 0 1.1em; }
}