@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){
  /*必要ならばここにコードを書く*/
}
/* ==========================================================================
   紫月燈子の占い研究室 — デザイン調整CSS
   bayfront.website / Cocoon 7.0.2（子テーマ cocoon-child-master）
   作成 2026-07-29

   貼り付け先：Cocoon設定 → カスタムCSS（またはWPCode Liteのカスタムスニペット）

   既存デザインの前提（実測値）：
     ヘッダー/ナビ  #0d0d1a
     H2/フッター/サイドバー見出し 背景 #1a1a2e ・文字 #8b6f9e
     本文 18px / 行間1.8 / ヒラギノ角ゴ
     本文リンク #1967d2（Cocoon既定の青）
   既存の世界観は壊さず、可読性と一貫性だけを上げる方針。
   ========================================================================== */

:root {
  --toko-ink:      #2a2530;  /* 本文の墨 */
  --toko-navy:     #1a1a2e;  /* 既存の濃紺（踏襲） */
  --toko-navy-dk:  #0d0d1a;  /* ヘッダー（踏襲） */
  --toko-lavender: #cbb6dd;  /* 濃紺の上に置く文字色（コントラスト改善版） */
  --toko-purple:   #6b4c8a;  /* リンク・罫線のアクセント */
  --toko-gold:     #c8a04a;  /* 差し色。細い線でのみ使う */
  --toko-paper:    #faf9f7;  /* 温かみのあるオフホワイト */
  --toko-rule:     #e6e2ea;  /* 罫線 */
  --toko-mincho:   "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
                   "Noto Serif JP", "MS PMincho", serif;
}

/* --------------------------------------------------------------------------
   1. 地の色：冷たいグレー #f4f5f7 → 温かいオフホワイト
   -------------------------------------------------------------------------- */
body {
  background-color: var(--toko-paper);
  color: var(--toko-ink);
}

/* --------------------------------------------------------------------------
   2. 見出しを明朝に（このサイトで一番効く一手）
      本文はゴシックのまま＝読みやすさは落とさない
   -------------------------------------------------------------------------- */
.entry-title,
.archive-title,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.article h2,
.article h3,
#sidebar .widget h2,
.sidebar .widget h2,
.sidebar h3 {
  font-family: var(--toko-mincho);
  font-feature-settings: "palt";
}

.entry-title,
.archive-title {
  color: var(--toko-navy);
  line-height: 1.5;
  letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   3. H2：濃紺ブロックは踏襲しつつ、文字のコントラストを上げる
      既存 #8b6f9e on #1a1a2e = 4.0:1（大文字サイズでかろうじてAA）
      変更 #cbb6dd on #1a1a2e = 9.1:1
   -------------------------------------------------------------------------- */
.entry-content h2,
.article h2 {
  color: var(--toko-lavender);
  background: var(--toko-navy);
  border-left: 3px solid var(--toko-gold);
  padding: 20px 22px;
  margin: 2.6em 0 1.4em;
  line-height: 1.5;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. H3：太い縦罫を細くして、本文の流れを切らないようにする
   -------------------------------------------------------------------------- */
.entry-content h3,
.article h3 {
  color: var(--toko-navy);
  border-left: 3px solid var(--toko-purple);
  border-bottom: 1px dotted var(--toko-rule);
  padding: .35em 0 .35em .8em;
  margin: 2.2em 0 1em;
  line-height: 1.6;
}

.entry-content h4,
.article h4 {
  color: var(--toko-purple);
  border: none;
  padding: 0;
  margin: 1.8em 0 .8em;
}

/* --------------------------------------------------------------------------
   5. 本文リンク：Cocoon既定の青 #1967d2 は紫紺のパレットから浮くので
      ブランドの紫に寄せる（白背景で6.9:1・AA適合）
   -------------------------------------------------------------------------- */
.entry-content a:not(.btn):not(.a-wrap):not([class*="blogcard"]) {
  color: var(--toko-purple);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(107, 76, 138, .38);
  transition: color .15s, text-decoration-color .15s;
}
.entry-content a:not(.btn):not(.a-wrap):not([class*="blogcard"]):hover {
  color: #8a63ad;
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   6. 本文の読み心地
   -------------------------------------------------------------------------- */
.entry-content {
  line-height: 1.9;
}
.entry-content p {
  margin: 0 0 1.6em;
}
.entry-content ul,
.entry-content ol {
  line-height: 1.9;
  margin: 1.4em 0;
}
.entry-content li {
  margin: .4em 0;
}
.entry-content blockquote {
  border-left: 3px solid var(--toko-purple);
  background: #f7f5f9;
  color: #4a4450;
  font-family: var(--toko-mincho);
}

/* --------------------------------------------------------------------------
   7. 本文カラムの余白（860px幅に対して左右の余白が窮屈なため）
   -------------------------------------------------------------------------- */
@media screen and (min-width: 835px) {
  .main {
    padding: 40px 44px;
    border-radius: 3px;
  }
}

/* --------------------------------------------------------------------------
   8. 目次：濃紺の枠線を薄くして本文に馴染ませる
   -------------------------------------------------------------------------- */
.toc {
  border: 1px solid var(--toko-rule);
  background: #fbfafc;
  border-radius: 3px;
  padding: 1em 1.4em;
}
.toc .toc-title {
  font-family: var(--toko-mincho);
  color: var(--toko-navy);
}
.toc a {
  color: var(--toko-ink);
  text-decoration: none;
}
.toc a:hover {
  color: var(--toko-purple);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9. サイドバー見出し：H2と同じ考え方で統一
   -------------------------------------------------------------------------- */
#sidebar .widget h2,
.sidebar .widget h2,
.sidebar h3 {
  color: var(--toko-lavender);
  background: var(--toko-navy);
  border-left: 3px solid var(--toko-gold);
  padding: .7em .9em;
  font-size: 1.02em;
  border-radius: 2px;
}
#sidebar a,
.sidebar a {
  color: var(--toko-ink);
}
#sidebar a:hover,
.sidebar a:hover {
  color: var(--toko-purple);
}

/* --------------------------------------------------------------------------
   10. 記事一覧カード：区切りをはっきりさせる
   -------------------------------------------------------------------------- */
.entry-card-wrap,
.related-entry-card-wrap {
  border-bottom: 1px solid var(--toko-rule);
  padding-bottom: 1.1em;
  margin-bottom: 1.1em;
  transition: background .15s;
}
.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  background: #f6f3f8;
}
.entry-card-title,
.related-entry-card-title {
  font-family: var(--toko-mincho);
  color: var(--toko-navy);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   11. グローバルナビ：項目が9つあるので詰めすぎないよう調整
   -------------------------------------------------------------------------- */
#navi .navi-in a,
.navi-in > ul > li > a {
  font-size: .92em;
  letter-spacing: .02em;
}
#navi .navi-in > ul > li > a:hover {
  background: rgba(107, 76, 138, .35);
}

/* --------------------------------------------------------------------------
   12. フェーズ2で全記事に入れた「あわせて読みたい研究ノート」ブロック
       （記事側はインラインstyleで書いてあるが、リンク色だけ揃える）
   -------------------------------------------------------------------------- */
.toko-related a {
  color: var(--toko-purple);
  text-decoration: none;
}
.toko-related a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   13. 一覧ハブページの表（大アルカナ22枚 / 十干・十二支）
   -------------------------------------------------------------------------- */
.entry-content table {
  font-size: .95em;
}
.entry-content table tbody tr:hover {
  background: #f7f5f9;
}
/* スマホでは横スクロールさせる（列が多いため） */
@media screen and (max-width: 834px) {
  .entry-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .entry-content table td:last-child {
    white-space: normal;
    min-width: 16em;
  }
}

/* --------------------------------------------------------------------------
   14. スマホ調整
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  .entry-content h2,
  .article h2 {
    padding: 14px 16px;
    font-size: 1.22em;
  }
  .entry-content h3,
  .article h3 {
    font-size: 1.1em;
  }
  .entry-title {
    font-size: 1.4em;
  }
}