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

/* ==================================================
   納戸色（なんどいろ）大人デザイン v2
   読みやすさ・装飾・強調をXserver/サルワカ系のブログ
   デザイン定石に沿って強化したリファイン版。
   Primary: #2d5a6a (深い納戸色)
   Accent:  #4d7a8a (明るめ納戸)
   Soft:    #c5d6dc (淡い納戸グレー)
   BG:      #f5f8f9 (オフホワイト・クール)
   Text:    #2a3a40 (深いチャコールブルー)
   Marker:  #fff3a3 (ほんのり優しい黄色マーカー)
   ================================================== */

body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, Meiryo, sans-serif;
  color: #2a3a40;
  background: #f5f8f9;
  letter-spacing: 0.04em;
  line-height: 1.95;
  font-size: 16px;
}

a { color: #2d5a6a; }
a:hover { color: #4d7a8a; }

/* ヘッダー */
.header-container,
#header-container {
  background: #f5f8f9 !important;
  border-bottom: 1px solid #c5d6dc;
}
.site-name-text,
.header .site-name-text a {
  color: #2a3a40 !important;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.tagline {
  color: #2d5a6a !important;
  letter-spacing: 0.08em;
}

/* グローバルナビ */
#navi,
.navi,
.navi-in > .menu-header {
  background: #ffffff !important;
  border-top: 1px solid #c5d6dc;
  border-bottom: 1px solid #c5d6dc;
}
.navi-in a {
  color: #2a3a40 !important;
  letter-spacing: 0.06em;
}
.navi-in a:hover {
  color: #2d5a6a !important;
  background: #e6eef0 !important;
}

/* ------ 本文（読みやすさの土台）------ */
.article p {
  margin-bottom: 1.6em;
  line-height: 1.95;
}
.article {
  word-break: break-word;
}

/* ------ 見出し ------ */
/* H2: エレガントな上下ボーダー */
.article h2 {
  position: relative;
  background: transparent;
  color: #2d5a6a;
  padding: 0.6em 0 0.6em 0;
  margin: 2.4em 0 1.4em;
  border: none;
  border-top: 1px solid #a8c2cb;
  border-bottom: 1px solid #a8c2cb;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}
.article h2::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 40px;
  height: 11px;
  background: #f5f8f9;
}
.article h2::after {
  content: "\2767";
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  color: #4d7a8a;
  font-size: 0.9em;
  background: #f5f8f9;
  padding: 0 8px;
}

/* H3: 左ボーダーのみ（上品） */
.article h3 {
  position: relative;
  padding: 0.3em 0 0.3em 0.9em;
  border: none;
  border-left: 4px solid #4d7a8a;
  color: #2d5a6a;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 2em 0 1em;
}

/* H4: 下線のみ */
.article h4 {
  border: none;
  border-bottom: 2px dotted #a8c2cb;
  padding-bottom: 0.3em;
  color: #4a6470;
  font-weight: 700;
  margin: 1.5em 0 0.8em;
}

/* ------ 強調 ------ */
/* strongに優しい黄色マーカー（Xserverおすすめの強調手法） */
.article strong,
.article b {
  background: linear-gradient(transparent 65%, #fff3a3 65%);
  color: #2a3a40;
  font-weight: 700;
  padding: 0 0.05em;
}

/* ------ リンク（記事内）------ */
.article a {
  color: #2d5a6a;
  text-decoration: underline;
  text-decoration-color: #a8c2cb;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
.article a:hover {
  color: #4d7a8a;
  text-decoration-color: #4d7a8a;
}

/* ------ 引用 ------ */
blockquote {
  background: #e6eef0;
  border-left: 3px solid #4d7a8a;
  border-radius: 4px;
  color: #4a6470;
  padding: 1.2em 1.5em 1.2em 2.2em;
  position: relative;
  margin: 1.6em 0;
}
blockquote::before {
  content: "\201C";
  position: absolute;
  left: 12px;
  top: -8px;
  color: #4d7a8a;
  font-size: 2.5em;
  opacity: 0.4;
  font-family: Georgia, serif;
}
blockquote p:last-child { margin-bottom: 0; }

/* ------ リスト ------ */
.article ul,
.article ol {
  margin: 1.4em 0;
  padding-left: 1.6em;
}
.article ul li,
.article ol li {
  margin-bottom: 0.5em;
  line-height: 1.85;
}
.article ul li::marker { color: #4d7a8a; }
.article ol li::marker { color: #4d7a8a; font-weight: bold; }

/* ------ ボタン（落ち着いた納戸色） ------ */
.btn, .wp-block-button__link, input[type="submit"], button.submit, .main-button {
  background: #2d5a6a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 0.9em 2em !important;
  box-shadow: 0 2px 8px rgba(45, 90, 106, 0.2) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  transition: all 0.25s ease;
}
.btn:hover, .wp-block-button__link:hover, input[type="submit"]:hover {
  background: #4d7a8a !important;
  box-shadow: 0 4px 12px rgba(45, 90, 106, 0.3) !important;
  transform: translateY(-1px);
}

/* ------ 記事カード ------ */
.entry-card,
.entry-card-wrap,
.a-wrap {
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(42, 58, 64, 0.06);
  transition: all 0.3s ease;
  background: #ffffff;
  border: 1px solid #e1eaee;
  overflow: hidden;
}
.entry-card-wrap:hover,
.a-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(45, 90, 106, 0.15);
  border-color: #c5d6dc;
}
.entry-card-title, .card-title {
  color: #2a3a40 !important;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.entry-card-snippet {
  color: #5a6e76;
}

/* ------ カテゴリ・タグラベル ------ */
.cat-label,
.tag-label,
.entry-category a,
.entry-tag a,
.cat,
.e-card-info .cat-label {
  background: #2d5a6a !important;
  color: #ffffff !important;
  border-radius: 1px !important;
  padding: 3px 12px !important;
  font-size: 0.72em !important;
  border: none !important;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.new-entry-cards .cat-label {
  background: #2d5a6a !important;
}

/* ------ サイドバー ウィジェット ------ */
.sidebar h3,
.widget-sidebar h3,
.widget h3 {
  background: transparent;
  color: #2a3a40;
  padding: 0.5em 0 0.5em 1em;
  border-radius: 0;
  border: none;
  border-left: 3px solid #4d7a8a;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 1em;
}
.widget {
  background: #ffffff;
  border: 1px solid #e1eaee;
  border-radius: 4px;
  padding: 1.2em 1em !important;
  margin-bottom: 1.5em;
}

/* ------ 検索ボックス ------ */
.search-edit {
  border: 1px solid #c5d6dc !important;
  border-radius: 2px !important;
  padding: 0.6em 1em !important;
  background: #ffffff !important;
}
.search-edit:focus {
  border-color: #2d5a6a !important;
  outline: none;
}
.search-submit {
  background: #2d5a6a !important;
  color: #ffffff !important;
  border-radius: 2px !important;
  border: none !important;
}

/* ------ ページネーション ------ */
.page-numbers {
  border-radius: 2px !important;
  border: 1px solid #c5d6dc !important;
  color: #2d5a6a !important;
  background: #ffffff !important;
}
.page-numbers.current,
.page-numbers:hover {
  background: #2d5a6a !important;
  border-color: #2d5a6a !important;
  color: #ffffff !important;
}

/* ------ アピールエリア ------ */
.appeal {
  background: linear-gradient(135deg, #e6eef0 0%, #f5f8f9 100%) !important;
  color: #2a3a40 !important;
}
.appeal-title { color: #2a3a40 !important; }
.appeal-message { color: #4a6470 !important; }

/* ------ フッター ------ */
.footer {
  background: #2a3a40 !important;
  color: #c5d6dc !important;
}
.footer a { color: #c5d6dc !important; }
.footer a:hover { color: #ffffff !important; }
.footer h3 { color: #ffffff !important; border-left-color: #4d7a8a !important; }

/* ------ 目次（番号バッジ風）------ */
.toc {
  background: #ffffff !important;
  border: 1px solid #c5d6dc !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 4px rgba(45, 90, 106, 0.05);
  padding: 1.2em 1.5em !important;
}
.toc-title {
  color: #2d5a6a !important;
  font-weight: 700 !important;
  border-bottom: 1px dotted #c5d6dc;
  padding-bottom: 0.5em;
  margin-bottom: 0.8em !important;
}
.toc a { color: #2a3a40; text-decoration: none; }
.toc a:hover { color: #2d5a6a; text-decoration: underline; }
.toc-list ol,
.toc ol {
  list-style: none;
  counter-reset: toc-counter;
  padding-left: 0;
}
.toc-list ol > li,
.toc ol > li {
  counter-increment: toc-counter;
  position: relative;
  padding: 0.3em 0 0.3em 2em;
  line-height: 1.6;
}
.toc-list ol > li::before,
.toc ol > li::before {
  content: counter(toc-counter);
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  background: #4d7a8a;
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.75em;
  font-weight: 700;
}
.toc-list ol ol > li::before,
.toc ol ol > li::before {
  background: #c5d6dc;
  color: #2d5a6a;
}

/* ------ 吹き出し ------ */
.speech-balloon {
  background: #ffffff !important;
  border: 1px solid #c5d6dc !important;
  border-radius: 12px !important;
  color: #2a3a40 !important;
}
.speech-person .speech-person-name {
  color: #2d5a6a !important;
}

/* ------ マーカー（ハイライト）------ */
.marker-pink, .marker-under-pink, mark {
  background: linear-gradient(transparent 60%, #fff3a3 60%);
  padding: 0 3px;
  color: #2a3a40;
}
.marker-blue, .marker-under-blue {
  background: linear-gradient(transparent 60%, #c5d6dc 60%);
  padding: 0 3px;
  color: #2a3a40;
}

/* ------ コールアウト・情報ボックス ------ */
/* Cocoonの汎用ボックス（基本系）と独自クラスをまとめて装飾 */
.information-box,
.info-box,
.blank-box.bb-tab,
.blank-box {
  background: #ffffff;
  border: 1px solid #c5d6dc;
  border-left: 4px solid #4d7a8a;
  border-radius: 4px;
  padding: 1em 1.4em;
  margin: 1.6em 0;
  color: #2a3a40;
}
.point-box,
.blank-box.bb-good,
.blank-box.bb-point {
  background: #f5f8f9;
  border: 1px solid #a8c2cb;
  border-left: 4px solid #2d5a6a;
  border-radius: 4px;
  padding: 1em 1.4em;
  margin: 1.6em 0;
}
.caution-box,
.blank-box.bb-caution,
.blank-box.bb-bad {
  background: #fff7e8;
  border: 1px solid #f3d8a3;
  border-left: 4px solid #d6a14a;
  border-radius: 4px;
  padding: 1em 1.4em;
  margin: 1.6em 0;
  color: #5a4720;
}

/* ------ プロフィールカード ------ */
.author-box {
  background: linear-gradient(135deg, #ffffff 0%, #f5f8f9 100%) !important;
  border: 1px solid #c5d6dc !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(45, 90, 106, 0.05);
  padding: 1.5em !important;
}
.author-name { color: #2d5a6a !important; }

/* ------ 投稿日付 ------ */
.date, .post-date, .entry-date {
  color: #8ca0a8;
  font-size: 0.85em;
  letter-spacing: 0.08em;
}

/* ------ テーブル（縞模様）------ */
.article table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.6em 0;
  font-size: 0.95em;
}
.article table th {
  background: #2d5a6a;
  color: #ffffff;
  padding: 0.8em;
  border: 1px solid #2d5a6a;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.article table td {
  padding: 0.8em;
  border: 1px solid #c5d6dc;
}
.article table tbody tr:nth-child(even) td {
  background: #f5f8f9;
}

/* ------ 画像と figure キャプション ------ */
.article img {
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(42, 58, 64, 0.08);
  max-width: 100%;
  height: auto;
}
.article figure {
  margin: 1.8em 0;
  text-align: center;
}
.article figure img {
  display: inline-block;
}
.article figcaption,
.wp-caption-text {
  color: #6a7d85;
  font-size: 0.85em;
  margin-top: 0.6em;
  letter-spacing: 0.04em;
}

/* アイキャッチ（記事冒頭）はやや強めの影 */
.eye-catch img,
.entry-thumb img {
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(45, 90, 106, 0.1);
}

/* ------ パンくずリスト ------ */
.breadcrumb {
  color: #8ca0a8;
  font-size: 0.85em;
}
.breadcrumb a {
  color: #5a6e76;
}

/* ------ コメントフォーム ------ */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  border: 1px solid #c5d6dc !important;
  border-radius: 2px !important;
  padding: 0.6em !important;
  background: #ffffff !important;
}

/* ------ 関連記事・フォロー誘導の見出し統一 ------ */
.related-entry-heading,
.comment-title,
.related-entry-main-heading {
  color: #2d5a6a !important;
  border-bottom: 2px solid #c5d6dc !important;
  padding-bottom: 0.4em !important;
  letter-spacing: 0.06em !important;
}

/* ------ "続きを読む" リンク ------ */
.entry-read-more,
.more-link {
  display: inline-block;
  color: #2d5a6a;
  border: 1px solid #c5d6dc;
  border-radius: 2px;
  padding: 0.4em 1em;
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.entry-read-more:hover,
.more-link:hover {
  background: #2d5a6a;
  color: #ffffff;
  border-color: #2d5a6a;
}

/* ------ モバイル ------ */
@media screen and (max-width: 1023px) {
  .article h2 { font-size: 1.3em; }
}
@media screen and (max-width: 834px) {
  body { letter-spacing: 0.02em; font-size: 16px; }
  .article p { line-height: 1.85; margin-bottom: 1.4em; }
  .article h2 { font-size: 1.2em; letter-spacing: 0.04em; }
  .article h3 { font-size: 1.1em; }
}
@media screen and (max-width: 480px) {
  body { font-size: 16px; }
  .article h2 { padding: 0.5em 0; font-size: 1.1em; }
  .article h3 { padding-left: 0.7em; }
  .article ul,
  .article ol { padding-left: 1.3em; }
}