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

/*====================================================
  文鳥FPの取りこぼしゼロ手帳 デザイン（2026-09 見直し版）
  色はアイキャッチ・Xのカード画像と同じにそろえる
====================================================*/
:root{
  --bm-ink:#222C3D;        /* 紺：文字 */
  --bm-ink-soft:#4A5466;
  --bm-muted:#788291;
  --bm-coral:#F0745C;      /* サーモンピンク：差し色 */
  --bm-coral-deep:#B5462F;
  --bm-cream:#FBF8F3;      /* クリーム：地 */
  --bm-sand:#F3EEE6;
  --bm-line:#E6DFD4;
  --bm-navy-tint:#EEF1F6;
  --bm-green:#2F7D5B;
  --bm-green-tint:#EDF6F1;
}

/* 「コンテンツへスキップ」は、キーボードで選んだときだけ出す。
   テーマ本体にも同じ指定があるが、そちらは URL が変わらないため
   古い版がブラウザに残り、画面に出てしまうことがある（2026-09-16）。
   子テーマ側にも書いて、確実に隠す。 */
.skip-link{ position:absolute; top:-9999px; left:6px; z-index:9999; }
.skip-link:focus{ top:6px; }
.admin-bar .skip-link:focus{ top:calc(var(--wp-admin--admin-bar--height, 32px) + 6px); z-index:100000; }

/* 地の色と本文 */
body{ background-color:var(--bm-cream); color:var(--bm-ink); }
.main{ border:1px solid var(--bm-line); border-radius:16px; }
.entry-title{ color:var(--bm-ink); line-height:1.5; letter-spacing:.02em; }
.entry-content{ font-size:17px; line-height:2; letter-spacing:.03em; color:var(--bm-ink); }
.entry-content a{
  color:var(--bm-ink);
  text-decoration:underline;
  text-decoration-color:var(--bm-coral);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.entry-content a:hover{ color:var(--bm-coral-deep); }
.eye-catch-image img{ border-radius:12px; }
/* 記事ページのアイキャッチでは、画像の中と重なるカテゴリ名を出さない */
.single .eye-catch .cat-label{ display:none; }

/* 大見出し：灰色の帯をやめ、左にサーモンピンクの線 */
.article h2{
  position:relative;
  margin:3em 0 1.2em;
  padding:.15em 0 .15em .9em;
  background:none;
  border:none;
  border-radius:0;
  font-size:1.35em;
  line-height:1.5;
  color:var(--bm-ink);
}
.article h2::before{
  content:"";
  position:absolute;
  left:0; top:.2em; bottom:.2em;
  width:5px;
  border-radius:3px;
  background:var(--bm-coral);
}
/* 小見出し：下線の左端だけ色を変える */
.article h3{
  margin:2.4em 0 1em;
  padding:0 0 .5em;
  border:none;
  background-image:linear-gradient(to right, var(--bm-coral) 2.5em, var(--bm-line) 2.5em);
  background-size:100% 2px;
  background-position:left bottom;
  background-repeat:no-repeat;
  font-size:1.15em;
  line-height:1.5;
  color:var(--bm-ink);
}

/* 目次：角の丸いクリーム色のカード */
.toc, .toc.toc-center{
  display:block;
  width:auto;
  margin-left:0; margin-right:0;
  padding:1.2em 1.4em;
  border:1px solid var(--bm-line);
  border-radius:14px;
  background:var(--bm-cream);
  font-size:.92em;
  text-align:left;
}
.toc-title{
  text-align:left;
  padding:0 0 .6em;
  margin-bottom:.6em;
  border-bottom:1px solid var(--bm-line);
  font-weight:700;
  color:var(--bm-ink);
}
.entry-content .toc a{ color:var(--bm-ink-soft); text-decoration:none; }
.entry-content .toc a:hover{ color:var(--bm-coral-deep); text-decoration:underline; }
.toc-list li::marker{ color:var(--bm-coral); font-weight:700; }

/* 引用：原文だと分かる落ち着いた見た目 */
.article blockquote{
  background:var(--bm-sand);
  border:none;
  border-left:4px solid #CFC6B8;
  border-radius:0 10px 10px 0;
  padding:1.1em 1.3em;
  font-size:.95em;
  color:var(--bm-ink-soft);
}
.article blockquote::before,
.article blockquote::after{ display:none; }

/*====================================================
  制度解説ボックス（Markdown の ::: 記法から生成）
  scripts/blogkit/md2blocks.py が .seido-callout--<種類>
  という class を出力する。種類を増やす時はここに追記する。
====================================================*/
.seido-callout{
  margin:2em 0;
  padding:1.3em 1.5em;
  border:1px solid var(--bm-line);
  border-left:4px solid #B5A794;
  border-radius:14px;
  background:#FFFFFF;
}
.seido-callout > *:first-child{ margin-top:0; }
.seido-callout > *:last-child{ margin-bottom:0; }
.seido-callout ul,
.seido-callout ol{ margin-bottom:0; }
.seido-callout li{ margin-bottom:.45em; }
.seido-callout li::marker{ color:var(--bm-coral); }

/* Cocoon の見出し装飾を打ち消してからボックス用の見出しにする */
.article .seido-callout__title,
.seido-callout__title{
  margin:0 0 .8em;
  padding:0;
  border:none;
  background:none;
  font-size:1.02em;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.04em;
}
/* 絵文字をやめて、色の丸印にする */
.article .seido-callout__title::before,
.seido-callout__title::before{
  content:"";
  position:static;
  display:inline-block;
  width:.55em; height:.55em;
  margin-right:.6em;
  border-radius:50%;
  background:currentColor;
  vertical-align:.1em;
}

/* 結論：紺 */
.seido-callout--conclusion{
  background:var(--bm-navy-tint);
  border-color:#D9DFE9;
  border-left-color:var(--bm-ink);
}
.seido-callout--conclusion .seido-callout__title{ color:var(--bm-ink); }

/* 注意・落とし穴：サーモンピンク（warn は旧表記。両方受ける） */
.seido-callout--warning,
.seido-callout--warn{
  background:#FDF0EC;
  border-color:#F5D3C8;
  border-left-color:var(--bm-coral);
}
.seido-callout--warning .seido-callout__title,
.seido-callout--warn .seido-callout__title{ color:var(--bm-coral-deep); }

/* 補足：砂色 */
.seido-callout--note{
  background:var(--bm-sand);
  border-color:var(--bm-line);
  border-left-color:#B5A794;
}
.seido-callout--note .seido-callout__title{ color:#5E5446; }

/* チェック：緑 */
.seido-callout--check{
  background:var(--bm-green-tint);
  border-color:#CFE5D8;
  border-left-color:var(--bm-green);
}
.seido-callout--check .seido-callout__title{ color:#25664A; }

/* 出典：本文より控えめに */
.seido-callout--source{
  background:#FFFFFF;
  border-color:var(--bm-line);
  border-left-color:#CFC6B8;
  font-size:.9em;
  line-height:1.8;
  color:var(--bm-ink-soft);
}
.seido-callout--source .seido-callout__title{ color:var(--bm-muted); }
.seido-callout--source a{ word-break:break-all; }

/*====================================================
  表：見出しの行は紺、行ごとに薄く色を変える
  スマホでは横にスクロールできるようにする
====================================================*/
/* 小さい表でも本文の幅いっぱいに広げ、右側が空かないようにする */
figure.wp-block-table,
.wp-block-table{ display:block; width:100%; overflow-x:auto; }
.wp-block-table table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--bm-line);
  border-radius:12px;
  overflow:hidden;
  font-size:.94em;
  line-height:1.7;
}
.wp-block-table th,
.wp-block-table td{
  padding:.65em .9em;
  vertical-align:top;
  border:none;
  border-bottom:1px solid var(--bm-line);
}
.wp-block-table thead th{
  background:var(--bm-ink);
  color:#FFFFFF;
  font-weight:700;
  white-space:nowrap;
}
.wp-block-table tbody tr:nth-child(even) td{ background:var(--bm-cream); }
.wp-block-table tbody tr:last-child td{ border-bottom:none; }
/* テーマ側の「幅は中身に合わせる」指定より強くして、表を本文の幅に広げる */
.article .entry-content figure.wp-block-table table{ width:100%; max-width:none; }
/* WordPress の「ストライプ」スタイルの灰色を消し、上の色分けにそろえる */
.article .entry-content .wp-block-table.is-style-stripes{ border-bottom:none; }
.article .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background-color:#FFFFFF; }
.article .entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(even){ background-color:var(--bm-cream); }

/*====================================================
  吹き出し：テーマの色の変数を変えると、しっぽまで色がそろう
====================================================*/
.speech-wrap{
  --cocoon-custom-background-color:#FFFFFF;
  --cocoon-custom-border-color:var(--bm-line);
  --cocoon-custom-text-color:var(--bm-ink);
}
.speech-wrap.sbs-flat{
  --cocoon-custom-background-color:var(--bm-sand);
  --cocoon-custom-border-color:var(--bm-sand);
}
.speech-wrap div.speech-balloon{
  border-width:1px;
  border-radius:14px;
  padding:.85em 1.1em;
  line-height:1.85;
}
.speech-name{ font-size:11px; color:var(--bm-muted); }

/*====================================================
  スマホの画面下メニュー：同じ星をやめ、項目ごとのアイコンにする
====================================================*/
.mobile-footer-menu-buttons{
  background:#FFFFFF;
  border-top:1px solid var(--bm-line);
  box-shadow:0 -4px 16px rgba(34,44,61,.06);
}
.mobile-footer-menu-buttons .menu-button-in{ color:var(--bm-ink); }
.mobile-footer-menu-buttons .menu-icon{ font-size:17px; color:var(--bm-coral); }
.mobile-footer-menu-buttons .menu-caption{
  font-size:10px;
  line-height:1.25;
  margin-top:2px;
  opacity:1;
  white-space:normal;
}
.mobile-footer-menu-buttons a[href*="/about"] .fa-star::before{ content:"\f007"; }
.mobile-footer-menu-buttons a[href*="/seido-map"] .fa-star::before{ content:"\f279"; }
.mobile-footer-menu-buttons a[href*="/blog"] .fa-star::before{ content:"\f03a"; }
.mobile-footer-menu-buttons a[href*="/privacy-policy"] .fa-star::before{ content:"\f132"; }
.mobile-footer-menu-buttons a[href*="/disclaimer"] .fa-star::before{ content:"\f05a"; }

/*====================================================
  スマホ
====================================================*/
@media screen and (max-width:834px){
  .seido-callout{ padding:1.1em 1.1em; }
  .wp-block-table th,
  .wp-block-table td{ padding:.55em .7em; font-size:.92em; }
  /* 1列目（項目名）が1〜2文字ずつ折り返さないようにする */
  .wp-block-table tbody td:first-child{ min-width:6.5em; }
  .wp-block-table thead th{ white-space:normal; min-width:6.5em; }
}
@media screen and (max-width:480px){
  .main{ border:none; border-radius:0; }
  .entry-title{ font-size:1.3em; }
  .entry-content{ font-size:16px; line-height:1.95; letter-spacing:.02em; }
  .article h2{ font-size:1.25em; margin-top:2.6em; }
  .article h3{ font-size:1.1em; }
}