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

/************************************
** boki-note.com デザインシステム
**
** このファイルはサイト全体のデザインを一元管理する唯一のCSSです。
** 変更するときは必ずリポジトリ直下の DESIGN.md を読み、
** tools/design/bump_css_version.py でキャッシュバージョン(fver)を
** 更新してください。fverを更新しないと訪問者に反映されません。
************************************/

/* ---------------------------------
   1. デザイントークン
   色・角丸・影はここで定義した変数だけを使う。
   直接カラーコードを新しく増やさないこと。
--------------------------------- */
:root {
  /* ブランドカラー(紺 = 信頼・経理) */
  --bn-primary: #19448e;
  --bn-primary-dark: #10305f;
  --bn-primary-soft: #eef2f9;   /* 紺の薄い背景 */
  --bn-primary-line: #c9d6ea;   /* 紺系の罫線 */

  /* アクションカラー(アンバー = CTA・アフィリエイト導線専用) */
  --bn-accent: #b45309;
  --bn-accent-dark: #92400e;
  --bn-accent-soft: #fff7ed;

  /* テキスト */
  --bn-text: #24303f;
  --bn-text-muted: #64748b;

  /* 背景・罫線 */
  --bn-bg: #ffffff;
  --bn-bg-soft: #f6f8fb;
  --bn-border: #dfe5ee;

  /* 形状・影 */
  --bn-radius: 8px;
  --bn-radius-lg: 12px;
  --bn-shadow-sm: 0 1px 2px rgba(16, 48, 95, 0.08);
  --bn-shadow-md: 0 4px 12px rgba(16, 48, 95, 0.12);
}

/* ---------------------------------
   2. ベース
--------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  color: var(--bn-text);
}

::selection {
  background: rgba(25, 68, 142, 0.15);
}

a {
  color: var(--bn-primary);
}

a:hover {
  color: var(--bn-primary-dark);
}

a:focus-visible {
  outline: 2px solid var(--bn-primary);
  outline-offset: 2px;
}

/* 目次からのジャンプ位置に余白を持たせる */
.article h2 span[id],
.article h3 span[id],
.article h4 span[id] {
  scroll-margin-top: 1em;
}

/* ---------------------------------
   3. ヘッダー・ナビゲーション
--------------------------------- */
#header-container {
  border-top: 4px solid var(--bn-primary);
  border-bottom: 1px solid var(--bn-border);
  background: var(--bn-bg);
}

.tagline {
  color: var(--bn-text-muted);
  font-size: 12px;
}

.site-name-text {
  color: var(--bn-primary-dark);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.site-name-text-link:hover {
  opacity: 0.85;
}

/* ナビは中央寄せで自然に折り返す */
.navi-in > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.navi-in > ul > li {
  width: auto;
}

.navi-in > ul > li > a {
  padding: 0 1.1em;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.navi-in > ul > li > a:hover,
.navi-in > ul > li.current-menu-item > a {
  color: var(--bn-primary);
  background: var(--bn-primary-soft);
  border-bottom-color: var(--bn-primary);
}

/* アフィリエイト利用の開示(法令対応のため文言は消さないこと) */
#content-top {
  background: var(--bn-bg-soft);
  border-bottom: 1px solid var(--bn-border);
}

.widget-content-top-title {
  margin: 0;
  padding: 0.5em 0;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  color: var(--bn-text-muted);
}

/* ---------------------------------
   4. パンくず・記事メタ情報
--------------------------------- */
.breadcrumb {
  font-size: 12px;
  color: var(--bn-text-muted);
}

.breadcrumb a {
  color: var(--bn-text-muted);
}

.breadcrumb a:hover {
  color: var(--bn-primary);
}

.article-header .post-date {
  display: none;
}

.article-header .post-update {
  margin-right: 0;
  color: var(--bn-text-muted);
}

/* カテゴリラベル */
.cat-label {
  background: var(--bn-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0.95;
}

/* ---------------------------------
   5. 記事本文の見出し階層
--------------------------------- */
.article h1,
.entry-title {
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.article h2 {
  background: var(--bn-primary-soft);
  border-left: 6px solid var(--bn-primary);
  border-radius: 0 var(--bn-radius) var(--bn-radius) 0;
  color: var(--bn-primary-dark);
  padding: 0.7em 0.9em;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.5;
}

.article h3 {
  background: transparent;
  border: none;
  border-left: 4px solid var(--bn-primary);
  border-bottom: 1px solid var(--bn-border);
  color: var(--bn-text);
  padding: 0.4em 0.7em;
  font-size: 1.15em;
  font-weight: 700;
}

.article h4 {
  border: none;
  border-bottom: 2px solid var(--bn-primary-line);
  padding: 0.3em 0.1em;
  font-size: 1.05em;
  font-weight: 700;
}

/* ---------------------------------
   6. 目次
--------------------------------- */
.toc {
  background: var(--bn-bg-soft);
  border: 1px solid var(--bn-border);
  border-radius: var(--bn-radius-lg);
  padding: 1em 1.4em;
}

.toc-title {
  color: var(--bn-primary-dark);
  font-weight: 700;
}

.toc .toc-list a {
  color: var(--bn-text);
  text-decoration: none;
}

.toc .toc-list a:hover {
  color: var(--bn-primary);
  text-decoration: underline;
}

.toc-list > li {
  margin: 0.35em 0;
}

/* ---------------------------------
   7. テーブル(勘定科目表などの主役コンテンツ)
--------------------------------- */
.article .wp-block-table,
.article .scrollable-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article table {
  border: 1px solid var(--bn-border);
  border-radius: var(--bn-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--bn-shadow-sm);
}

.article table thead th,
.article table tr:first-child th {
  background: var(--bn-primary);
  color: #fff;
  font-weight: 700;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.article table thead th:last-child {
  border-right: none;
}

.article table th,
.article table td {
  border: none;
  border-top: 1px solid var(--bn-border);
  border-right: 1px solid var(--bn-border);
  padding: 0.65em 0.8em;
  font-size: 0.95em;
  line-height: 1.6;
}

.article table th:last-child,
.article table td:last-child {
  border-right: none;
}

.article table thead th,
.article table tr:first-child td {
  border-top: none;
}

.article table tbody tr:nth-child(even) td {
  background: var(--bn-bg-soft);
}

/* ---------------------------------
   8. リスト・引用・画像
--------------------------------- */
.article ul li::marker {
  color: var(--bn-primary);
}

.article ol li::marker {
  color: var(--bn-primary);
  font-weight: 700;
}

.article blockquote {
  background: var(--bn-bg-soft);
  border-left: 4px solid var(--bn-primary-line);
  border-radius: 0 var(--bn-radius) var(--bn-radius) 0;
  color: var(--bn-text-muted);
}

.article .wp-block-image img,
.article .eye-catch img {
  border-radius: var(--bn-radius);
}

/* ---------------------------------
   9. 収益導線(アフィリエイト・CTA)
--------------------------------- */
/* 本文中のアフィリエイトリンク(rel="sponsored")は少し目立たせる */
.article a[rel~="sponsored"] {
  color: var(--bn-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(180, 83, 9, 0.4);
  text-underline-offset: 3px;
}

.article a[rel~="sponsored"]:hover {
  color: var(--bn-accent-dark);
  text-decoration-color: var(--bn-accent-dark);
}

/* CTAボックス: 記事内で行動を促すときに使う(使い方は DESIGN.md) */
.bn-cta {
  background: var(--bn-accent-soft);
  border: 1px solid #f3d9b8;
  border-radius: var(--bn-radius-lg);
  padding: 1.2em 1.4em;
  margin-bottom: 1.8em;
}

.bn-cta-title {
  margin: 0 0 0.6em;
  color: var(--bn-accent-dark);
  font-size: 1.05em;
  font-weight: 700;
}

.bn-cta p {
  margin-bottom: 0.8em;
}

/* CTAボタン */
.bn-btn {
  display: inline-block;
  background: var(--bn-accent);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
  text-align: center;
  padding: 0.75em 1.8em;
  border-radius: 999px;
  box-shadow: var(--bn-shadow-md);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.bn-btn:hover {
  background: var(--bn-accent-dark);
  transform: translateY(-1px);
}

/* 紺の控えめボタン(内部リンク誘導用) */
.bn-btn--secondary {
  background: var(--bn-primary);
}

.bn-btn--secondary:hover {
  background: var(--bn-primary-dark);
}

/* 記事冒頭の要点ボックス */
.bn-summary {
  background: var(--bn-primary-soft);
  border: 1px solid var(--bn-primary-line);
  border-radius: var(--bn-radius-lg);
  padding: 1.1em 1.4em;
  margin-bottom: 1.8em;
}

.bn-summary-title {
  margin: 0 0 0.5em;
  color: var(--bn-primary-dark);
  font-size: 1em;
  font-weight: 700;
}

.bn-summary ul {
  margin: 0;
}

/* 補足・注意書き */
.bn-note {
  color: var(--bn-text-muted);
  font-size: 0.9em;
}

/* ---------------------------------
   10. 関連記事・記事カード
--------------------------------- */
.related-entry-heading .main-caption,
.comment-title {
  display: inline-block;
  border-left: 6px solid var(--bn-primary);
  padding-left: 0.5em;
  color: var(--bn-text);
  font-weight: 700;
}

.related-entry-card-wrap,
.entry-card-wrap {
  border: 1px solid var(--bn-border);
  border-radius: var(--bn-radius);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.related-entry-card-wrap:hover,
.entry-card-wrap:hover {
  border-color: var(--bn-primary-line);
  box-shadow: var(--bn-shadow-md);
  background: var(--bn-bg);
}

.related-entry-card-title,
.entry-card-title {
  font-weight: 700;
}

.related-entry-card-wrap:hover .related-entry-card-title,
.entry-card-wrap:hover .entry-card-title {
  color: var(--bn-primary);
}

/* 前後記事ナビ */
.pager-post-navi a {
  border: 1px solid var(--bn-border);
  border-radius: var(--bn-radius);
  transition: box-shadow 0.15s ease;
}

.pager-post-navi a:hover {
  box-shadow: var(--bn-shadow-md);
}

/* SNSシェアボタンの角を揃える */
.sns-buttons a {
  border-radius: 6px;
}

/* ---------------------------------
   11. サイドバー
--------------------------------- */
.widget-sidebar .widget-title,
.widget-sidebar-title {
  background: transparent;
  border-left: 5px solid var(--bn-primary);
  border-bottom: 1px solid var(--bn-border);
  padding: 0.3em 0.6em;
  color: var(--bn-text);
  font-size: 1.05em;
  font-weight: 700;
}

.widget-sidebar ul li a {
  color: var(--bn-text);
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.widget-sidebar ul li a:hover {
  background: var(--bn-primary-soft);
  color: var(--bn-primary);
}

.post-count,
.tag-link-count {
  color: var(--bn-text-muted);
  font-size: 0.85em;
}

/* タグクラウドはチップ型に整える */
.tag-cloud-link,
.widget_tag_cloud a {
  display: inline-block;
  font-size: 12px !important;
  border: 1px solid var(--bn-border);
  border-radius: 999px;
  padding: 0.2em 0.8em;
  margin: 0 0.3em 0.5em 0;
  color: var(--bn-text-muted);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.tag-cloud-link:hover,
.widget_tag_cloud a:hover {
  border-color: var(--bn-primary);
  color: var(--bn-primary);
  background: var(--bn-bg);
}

/* ---------------------------------
   12. フッター
--------------------------------- */
#footer {
  background: var(--bn-primary-dark);
  color: #cdd7e6;
}

#footer a {
  color: #cdd7e6;
}

#footer a:hover {
  color: #ffffff;
}

.footer-title,
#footer .widget-title {
  color: #ffffff;
  font-weight: 700;
}

.copyright {
  color: #93a5c2;
  font-size: 12px;
}

/* トップへ戻るボタン */
.go-to-top-button {
  background: var(--bn-primary);
  color: #fff;
  border-radius: 50%;
  box-shadow: var(--bn-shadow-md);
}

.go-to-top-button:hover {
  background: var(--bn-primary-dark);
  color: #fff;
}

/* ---------------------------------
   13. モバイル調整
--------------------------------- */
/*1023px以下*/
@media screen and (max-width: 1023px) {
  .navi-in > ul > li > a {
    padding: 0 0.8em;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  .article h2 {
    font-size: 1.25em;
    padding: 0.6em 0.8em;
  }

  .article h3 {
    font-size: 1.1em;
  }

  /* モバイルのテーブルは横スクロールで読み切れるようにする */
  .article table th,
  .article table td {
    font-size: 0.9em;
    padding: 0.55em 0.65em;
    white-space: normal;
  }

  /* モバイル下部メニュー */
  .mobile-menu-buttons {
    border-top: 1px solid var(--bn-border);
    background: rgba(255, 255, 255, 0.97);
  }

  .mobile-menu-buttons .menu-button > a {
    color: var(--bn-primary-dark);
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  .bn-btn {
    display: block;
  }
}