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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* ==========================================================================
   crachef / クラシェフ  カスタムスタイル（2026-08-16 追加）
   方向性 : ナチュラル暖色系 / 30〜40代の主婦・共働き世帯向け
   ※ 色を変えたいときは、すぐ下の :root の値だけ書き換えてください
   ※ Cocoon設定 → スキン は「スキンを使用しない」にしておくこと
   ========================================================================== */

:root {
  --cc-bg:        #FAF8F5;
  --cc-surface:   #FFFFFF;
  --cc-ink:       #33302C;
  --cc-ink-sub:   #7A736B;
  --cc-line:      #E8E2DA;
  --cc-accent:    #C2703C;
  --cc-accent-dk: #A65C2E;
  --cc-accent-lt: #FBF0E8;
  --cc-olive:     #7D8B6A;
  --cc-olive-lt:  #F2F4EE;
  --cc-warn:      #C9553D;
  --cc-warn-lt:   #FDF1EE;
  --cc-radius:    12px;
  --cc-shadow:    0 1px 3px rgba(51,48,44,.06), 0 6px 20px rgba(51,48,44,.05);
  --cc-shadow-hv: 0 4px 10px rgba(51,48,44,.09), 0 14px 34px rgba(51,48,44,.09);
  --cc-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --cc-sans:  "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;
}

/* ---- ベース ---- */
body { background-color: var(--cc-bg); color: var(--cc-ink); font-family: var(--cc-sans); line-height: 1.9; letter-spacing: .02em; -webkit-font-smoothing: antialiased; }
a { color: var(--cc-accent); text-decoration: none; }
a:hover { color: var(--cc-accent-dk); }
.entry-content a:not(.a-wrap):not(.blogcard-wrap):not(.btn) { border-bottom: 1px solid rgba(194,112,60,.4); padding-bottom: 1px; }
.entry-content a:not(.a-wrap):not(.blogcard-wrap):not(.btn):hover { border-bottom-color: var(--cc-accent-dk); background-color: var(--cc-accent-lt); }
::selection { background: rgba(194,112,60,.18); }

/* ---- ヘッダー ---- */
.header-container { background-color: var(--cc-surface); border-bottom: 1px solid var(--cc-line); }
#header-in { padding: 26px 16px 20px; }
.logo-header .site-name-text { font-family: var(--cc-serif); font-size: 30px; font-weight: 700; letter-spacing: .08em; color: var(--cc-ink); }
.logo-header .site-name-text-link:hover .site-name-text { color: var(--cc-accent); }
.tagline { color: var(--cc-ink-sub); font-size: 13px; letter-spacing: .06em; text-align: center; margin-bottom: 4px; }

/* ---- グローバルナビ ---- */
#navi { background-color: var(--cc-surface); border-top: 1px solid var(--cc-line); }
.navi-in > ul { justify-content: center; }
.navi-in > ul > li > a { color: var(--cc-ink); font-size: 14.5px; font-weight: 600; letter-spacing: .06em; height: 52px; line-height: 52px; padding: 0 22px; position: relative; transition: color .2s; }
.navi-in > ul > li > a::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 12px; height: 2px; background-color: var(--cc-accent); transform: scaleX(0); transform-origin: center; transition: transform .22s ease; }
.navi-in > ul > li > a:hover { background-color: transparent; color: var(--cc-accent); }
.navi-in > ul > li > a:hover::after { transform: scaleX(1); }
.navi-in > ul > li.current-menu-item > a, .navi-in > ul > li.current-post-ancestor > a, .navi-in > ul > li.current-menu-parent > a { color: var(--cc-accent); }
.navi-in > ul > li.current-menu-item > a::after { transform: scaleX(1); }
.navi-in > ul .sub-menu { background-color: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 8px; box-shadow: var(--cc-shadow); overflow: hidden; }
.navi-in > ul .sub-menu li a { color: var(--cc-ink); font-size: 14px; }
.navi-in > ul .sub-menu li a:hover { background-color: var(--cc-accent-lt); color: var(--cc-accent); }

/* ---- パンくず ---- */
#breadcrumb { font-size: 12.5px; color: var(--cc-ink-sub); padding: 14px 0 6px; margin-bottom: 0; }
#breadcrumb a { color: var(--cc-ink-sub); }
#breadcrumb a:hover { color: var(--cc-accent); }

/* ---- 記事一覧カード ---- */
.entry-card-wrap, .related-entry-card-wrap { background-color: var(--cc-surface); border: 1px solid var(--cc-line) !important; border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); padding: 16px; margin-bottom: 20px; transition: transform .22s ease, box-shadow .22s ease; overflow: hidden; }
.entry-card-wrap:hover, .related-entry-card-wrap:hover { background-color: var(--cc-surface); transform: translateY(-3px); box-shadow: var(--cc-shadow-hv); }
.entry-card-thumb img, .related-entry-card-thumb img { border-radius: 8px; }
.entry-card-title { font-family: var(--cc-serif); font-size: 19px; font-weight: 700; line-height: 1.55; color: var(--cc-ink); letter-spacing: .02em; }
.entry-card-wrap:hover .entry-card-title { color: var(--cc-accent); }
.entry-card-snippet { color: var(--cc-ink-sub); font-size: 13.5px; line-height: 1.8; }
.entry-card-meta .post-date, .entry-card-meta .post-update { color: var(--cc-ink-sub); font-size: 12.5px; }
.cat-label { background-color: var(--cc-accent); border: none; border-radius: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 3px 10px; }

/* ---- 記事タイトルまわり ---- */
.article { background-color: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); padding: 34px 34px 30px; }
.entry-title { font-family: var(--cc-serif); font-size: 29px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; color: var(--cc-ink); margin-bottom: 16px; padding-bottom: 18px; border-bottom: 2px solid var(--cc-accent-lt); }
.date-tags { color: var(--cc-ink-sub); font-size: 13px; }
.date-tags .post-date::before, .date-tags .post-update::before { color: var(--cc-accent); }
.eye-catch-wrap .eye-catch img { border-radius: 10px; }
.entry-categories a, .entry-tags a { background-color: var(--cc-olive-lt); border: 1px solid #DDE3D5; border-radius: 99px; color: #5E6B4E; font-size: 12.5px; padding: 4px 14px; margin-right: 6px; display: inline-block; transition: background-color .18s; }
.entry-categories a:hover, .entry-tags a:hover { background-color: #E6EBDE; color: #46523A; }

/* ---- 見出し ---- */
.entry-content { font-size: 16.5px; line-height: 2.0; }
.entry-content p { margin: 0 0 1.6em; }
.entry-content h2, .article h2:not(.related-entry-heading):not(.comment-title) { font-family: var(--cc-serif); font-size: 24px; font-weight: 700; line-height: 1.55; letter-spacing: .02em; color: var(--cc-ink); background: none !important; background-color: transparent !important; border: none; border-left: 6px solid var(--cc-accent); border-bottom: 1px solid var(--cc-line); border-radius: 0; padding: 4px 0 14px 16px; margin: 3.2em 0 1.2em; }
.entry-content h3 { font-size: 20px; font-weight: 700; line-height: 1.6; color: var(--cc-ink); background: none !important; border: none; padding: 0 0 10px; margin: 2.6em 0 1em; position: relative; }
.entry-content h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(to right, var(--cc-accent) 0%, var(--cc-accent) 64px, var(--cc-line) 64px, var(--cc-line) 100%); }
.entry-content h4 { font-size: 17.5px; font-weight: 700; color: var(--cc-ink); background: none !important; border: none; border-left: 3px solid var(--cc-olive); padding: 0 0 0 12px; margin: 2.2em 0 .9em; }

/* ---- リスト・引用・表・画像 ---- */
.entry-content ul, .entry-content ol { margin: 0 0 1.8em; padding-left: 1.6em; }
.entry-content li { margin-bottom: .6em; line-height: 1.85; }
.entry-content ul li::marker { color: var(--cc-accent); }
.entry-content ol li::marker { color: var(--cc-accent); font-weight: 700; }
.entry-content blockquote { background-color: var(--cc-olive-lt); border: none; border-left: 4px solid var(--cc-olive); border-radius: 0 8px 8px 0; color: #4F5A44; font-size: 15px; padding: 20px 24px; margin: 2em 0; }
.entry-content blockquote::before, .entry-content blockquote::after { display: none; }
.entry-content blockquote cite { display: block; margin-top: 12px; font-size: 12.5px; color: var(--cc-ink-sub); font-style: normal; }
.entry-content table { border-collapse: collapse; width: 100%; margin: 2em 0; font-size: 15px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--cc-line); }
.entry-content table th { background-color: var(--cc-accent-lt); color: #6E4020; font-weight: 700; border: 1px solid var(--cc-line); padding: 12px 14px; text-align: left; }
.entry-content table td { border: 1px solid var(--cc-line); padding: 12px 14px; background-color: var(--cc-surface); }
.entry-content table tr:nth-child(even) td { background-color: #FCFBF9; }
.entry-content img { border-radius: 10px; height: auto; }
.entry-content figcaption { color: var(--cc-ink-sub); font-size: 12.5px; text-align: center; margin-top: 8px; }
.entry-content hr { border: none; border-top: 1px dashed var(--cc-line); margin: 3em 0; }

/* ---- 目次 ---- */
.entry-content .toc { background-color: #FCFBF9; border: 1px solid var(--cc-line) !important; border-radius: var(--cc-radius); padding: 22px 26px; margin: 2.4em auto 2.8em; width: 100%; max-width: 100%; font-size: 15px; }
.toc-title { font-family: var(--cc-serif); font-size: 17px; font-weight: 700; color: var(--cc-ink); letter-spacing: .06em; padding-bottom: 10px; border-bottom: 1px solid var(--cc-line); margin-bottom: 12px; display: block; }
.toc-title::before { content: ""; display: inline-block; width: 4px; height: 16px; background-color: var(--cc-accent); border-radius: 2px; margin-right: 10px; vertical-align: -2px; }
.toc-content ol { padding-left: 1.4em; }
.toc-content > ol > li { margin-bottom: .5em; }
.toc-content a { color: var(--cc-ink); border-bottom: none !important; }
.toc-content a:hover { color: var(--cc-accent); background: none !important; }
.toc-list > li > ol { margin-top: .4em; }
.toc-list > li > ol > li { font-size: 14px; color: var(--cc-ink-sub); }

/* ---- 記事内で使う装飾パーツ ---- */
.cc-point { background-color: var(--cc-accent-lt); border: 1px solid #F0DCCB; border-radius: var(--cc-radius); padding: 22px 24px 18px; margin: 2.2em 0; }
.cc-point > .cc-point-title { display: inline-block; background-color: var(--cc-accent); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; border-radius: 99px; padding: 4px 16px; margin-bottom: 12px; }
.cc-point p:last-child, .cc-point ul:last-child { margin-bottom: 0; }
.cc-warn { background-color: var(--cc-warn-lt); border: 1px solid #F3D6CE; border-radius: var(--cc-radius); padding: 22px 24px 18px; margin: 2.2em 0; }
.cc-warn > .cc-warn-title { display: inline-block; background-color: var(--cc-warn); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; border-radius: 99px; padding: 4px 16px; margin-bottom: 12px; }
.cc-warn p:last-child, .cc-warn ul:last-child { margin-bottom: 0; }
ul.cc-check { list-style: none !important; padding-left: 0 !important; margin: 2em 0 !important; }
ul.cc-check > li { position: relative; padding: 10px 0 10px 34px; border-bottom: 1px dashed var(--cc-line); margin-bottom: 0 !important; }
ul.cc-check > li:last-child { border-bottom: none; }
ul.cc-check > li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 7px; height: 13px; border-right: 2.5px solid var(--cc-accent); border-bottom: 2.5px solid var(--cc-accent); transform: rotate(42deg); }
ol.cc-step { list-style: none !important; padding-left: 0 !important; counter-reset: ccstep; margin: 2em 0 !important; }
ol.cc-step > li { counter-increment: ccstep; position: relative; padding: 4px 0 22px 46px; border-left: 2px solid var(--cc-line); margin-left: 14px; margin-bottom: 0 !important; }
ol.cc-step > li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.cc-step > li::before { content: counter(ccstep); position: absolute; left: -15px; top: 0; width: 28px; height: 28px; background-color: var(--cc-accent); color: #fff; border-radius: 50%; font-size: 14px; font-weight: 700; line-height: 28px; text-align: center; }
ol.cc-step > li > b, ol.cc-step > li > strong { display: block; margin-bottom: 4px; color: var(--cc-ink); }
.cc-marker  { background: linear-gradient(transparent 62%, #FBE2B4 62%); font-weight: 600; }
.cc-marker2 { background: linear-gradient(transparent 62%, #E6EFD8 62%); font-weight: 600; }
.cc-memo { background-color: #FCFBF9; border: 1px dashed var(--cc-line); border-radius: 8px; color: var(--cc-ink-sub); font-size: 14.5px; padding: 16px 20px; margin: 2em 0; }
.cc-memo p:last-child { margin-bottom: 0; }
.cc-summary { background-color: var(--cc-olive-lt); border: 1px solid #DDE3D5; border-radius: var(--cc-radius); padding: 24px 26px 20px; margin: 2.4em 0; }
.cc-summary > .cc-summary-title { font-family: var(--cc-serif); font-size: 18px; font-weight: 700; color: #4F5A44; padding-bottom: 10px; border-bottom: 1px solid #DDE3D5; margin-bottom: 14px; }
.cc-summary p:last-child, .cc-summary ul:last-child { margin-bottom: 0; }

/* ---- 記事下 ---- */
.author-info { background-color: #FCFBF9; border: 1px solid var(--cc-line); border-radius: var(--cc-radius); padding: 22px 24px; margin-top: 30px; }
.author-name { font-weight: 700; color: var(--cc-ink); }
.author-description { color: var(--cc-ink-sub); font-size: 14px; line-height: 1.85; }
.author-box .author-thumb img { border-radius: 50%; }
.related-entry-heading, .comment-title { font-family: var(--cc-serif); font-size: 20px; font-weight: 700; color: var(--cc-ink); letter-spacing: .04em; }
#related-entries { margin-top: 44px; }
.related-entry-card-title { font-size: 15.5px; font-weight: 600; line-height: 1.6; }
.pager-post-navi a { background-color: var(--cc-surface); border: 1px solid var(--cc-line) !important; border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); transition: box-shadow .2s, transform .2s; }
.pager-post-navi a:hover { transform: translateY(-2px); box-shadow: var(--cc-shadow-hv); }
.prev-post-title, .next-post-title { font-size: 14.5px; font-weight: 600; }

/* ---- サイドバー ---- */
.sidebar { font-size: 14.5px; }
.widget-sidebar { background-color: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); padding: 20px 22px; margin-bottom: 22px; }
.widget-sidebar-title { font-family: var(--cc-serif); font-size: 16px; font-weight: 700; color: var(--cc-ink); letter-spacing: .06em; background: none !important; border: none; border-bottom: 1px solid var(--cc-line); border-radius: 0; padding: 0 0 10px 14px; margin-bottom: 14px; position: relative; text-align: left; }
.widget-sidebar-title::before { content: ""; position: absolute; left: 0; top: 4px; width: 4px; height: 16px; background-color: var(--cc-accent); border-radius: 2px; }
.sidebar ul { list-style: none; padding-left: 0; }
.sidebar li { border-bottom: 1px dashed var(--cc-line); }
.sidebar li:last-child { border-bottom: none; }
.sidebar li a { color: var(--cc-ink); display: block; padding: 9px 0; line-height: 1.65; }
.sidebar li a:hover { color: var(--cc-accent); }
.sidebar .a-wrap { border-radius: 8px; }
.sidebar .a-wrap:hover { background-color: var(--cc-accent-lt); }

/* ---- ページネーション ---- */
.pagination .page-numbers { background-color: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: 8px; color: var(--cc-ink); min-width: 42px; height: 42px; line-height: 40px; margin: 0 4px; transition: background-color .18s, color .18s; }
.pagination .page-numbers:hover { background-color: var(--cc-accent-lt); color: var(--cc-accent); }
.pagination .page-numbers.current { background-color: var(--cc-accent); border-color: var(--cc-accent); color: #fff; }

/* ---- フッター ---- */
.footer { background-color: #F2EEE8; border-top: 1px solid var(--cc-line); color: var(--cc-ink-sub); margin-top: 60px; }
#footer-in { padding: 40px 16px 28px; }
.footer .logo-footer .site-name-text { font-family: var(--cc-serif); font-size: 20px; font-weight: 700; color: var(--cc-ink); letter-spacing: .06em; }
.navi-footer-in > ul { justify-content: center; flex-wrap: wrap; }
.navi-footer-in > ul > li > a { color: var(--cc-ink-sub); font-size: 13.5px; padding: 6px 16px; }
.navi-footer-in > ul > li > a:hover { color: var(--cc-accent); }
.footer .copyright { font-size: 12.5px; color: #9A938A; margin-top: 14px; }

/* ---- その他パーツ ---- */
.sns-share-message, .sns-follow-message { color: var(--cc-ink-sub); font-size: 13px; letter-spacing: .06em; }
.go-to-top-button { background-color: var(--cc-accent); border-radius: 50%; color: #fff; box-shadow: var(--cc-shadow); }
.go-to-top-button:hover { background-color: var(--cc-accent-dk); }
.search-box input.search-edit { border: 1px solid var(--cc-line); border-radius: 8px 0 0 8px; background-color: var(--cc-surface); }
.search-box .search-submit { background-color: var(--cc-accent); border-radius: 0 8px 8px 0; }
.blogcard-wrap .blogcard { border: 1px solid var(--cc-line) !important; border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); background-color: var(--cc-surface); transition: transform .2s, box-shadow .2s; }
.blogcard-wrap:hover .blogcard { transform: translateY(-2px); box-shadow: var(--cc-shadow-hv); }
.blogcard-title { font-weight: 600; color: var(--cc-ink); }
.blogcard-label { background-color: var(--cc-accent); border-radius: 4px 0 4px 0; }
.mobile-menu-buttons { background-color: var(--cc-surface); border-top: 1px solid var(--cc-line); }
.mobile-menu-buttons .menu-button a, .mobile-menu-buttons .menu-button label { color: var(--cc-ink-sub); }
.mobile-menu-buttons .menu-caption { font-size: 10.5px; }

/* ---- スマホ（流入の7〜8割） ---- */
@media screen and (max-width: 834px){
  body { line-height: 1.85; }
  .article { padding: 22px 18px 20px; border-radius: 10px; }
  .entry-title { font-size: 22px; line-height: 1.5; padding-bottom: 14px; }
  .entry-content { font-size: 16px; line-height: 1.95; }
  .entry-content h2, .article h2:not(.related-entry-heading):not(.comment-title) { font-size: 20px; border-left-width: 5px; padding: 2px 0 11px 12px; margin: 2.6em 0 1em; }
  .entry-content h3 { font-size: 17.5px; margin: 2.2em 0 .9em; }
  .entry-content h4 { font-size: 16px; }
  .entry-content .toc { padding: 18px 18px; font-size: 14.5px; }
  .toc-title { font-size: 16px; }
  .logo-header .site-name-text { font-size: 23px; }
  #header-in { padding: 18px 12px 14px; }
  .entry-card-wrap { padding: 12px; margin-bottom: 14px; }
  .entry-card-title { font-size: 16.5px; }
  .entry-card-snippet { font-size: 13px; }
  .cc-point, .cc-warn, .cc-summary { padding: 18px 18px 14px; }
  ol.cc-step > li { padding-left: 38px; }
  .entry-content table { font-size: 14px; }
  .entry-content table th, .entry-content table td { padding: 9px 11px; }
  .entry-content .wp-block-table, .entry-content .scrollable-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .widget-sidebar { padding: 16px 18px; }
  .entry-content p { margin-bottom: 1.4em; }
}

/* 記事作成ツールが出力する連続 br による過剰な余白を抑える */
.entry-content p > br + br + br { display: none; }

/* ---- 印刷 ---- */
@media print {
  #header-container, #navi, #sidebar, #footer, .sns-share, .sns-follow,
  #related-entries, .pager-post-navi, #comment-area, .mobile-menu-buttons,
  #go-to-top, .toc { display: none !important; }
  .article { border: none; box-shadow: none; padding: 0; }
  body { background: #fff; font-size: 12pt; }
}


/* ---- ヘッダーバナー画像（2026-08-16 追加）---------------------------------
   ロゴにバナー画像を設定したときの余白・最大幅の調整。
   バナーが大きすぎる／小さすぎると感じたら max-width の値だけ変えてください。
   -------------------------------------------------------------------------- */
#header-in { padding: 0; }
.logo-header.logo-image { margin: 0; }
.logo-header .site-logo-image {
  display: block;
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin: 0 auto;
}
@media screen and (max-width: 834px){
  #header-in { padding: 0; }
  .logo-header .site-logo-image { max-width: 100%; }
}