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

/* ↑ このコメントは既存のものをそのまま残しています。
      WordPressが子テーマを認識するための情報なので、絶対に消さないでください。
      特に Template: cocoon-master の行が消えると、サイトが表示されなくなります。

   なお、以前ここに書かれていた下記のCSSは、RAKUYOUのH2デザイン
   （下に真鍮の細い罫線）と衝突するため、意図的に削除しました。

       h2 { border-left: 5px solid #ccc; padding-left: 10px;
            margin-top: 40px; font-size: 1.4em; }

      グレーの太い縦線を残したい場合は教えてください。 */

/* ==========================================================================

   落葉 / RAKUYOU  ―  Global Stylesheet

   自分を愛し、世界を面白がる。

   --------------------------------------------------------------------------
   PART 0   Design Tokens          デザイントークン（色・書体・余白の定義）
   PART 1   Font Family            書体の割り当て
   PART 2   Base                   土台
   PART 3   Typography             文字組み
   PART 4   Layout                 幅と余白
   PART 5   Links & Selection      リンク・選択範囲
   PART 6   Article Content        記事本文
   PART 7   Cocoon Overrides       Cocoon既定スタイルの調整
   PART 8   Accessibility          アクセシビリティ
   --------------------------------------------------------------------------

   ■ このファイルの編集方針

   PART 0 のトークンだけを書き換えれば、サイト全体の印象が変わります。
   個別の場所を直接いじる前に、まずトークンで調整できないかを考えてください。

   ■ 命名規則

   --rakuyou-*   … 変更してよいトークン
   .rakuyou-*    … RAKUYOU独自コンポーネント（Cocoonと衝突しない）

   ========================================================================== */


/* ==========================================================================
   PART 0   Design Tokens
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     0-1  Brand Colors  ―  仕様書§11
     ------------------------------------------------------------------ */

  --rakuyou-ivory:        #F4F0E6;   /* Paper Ivory     紙の地色 */
  --rakuyou-cream:        #FBF8F1;   /* Content Cream   本文の地色 */
  --rakuyou-ink:          #2B241F;   /* Ink Brown       本文の文字 */
  --rakuyou-muted:        #70675F;   /* Muted Warm Gray 補助テキスト */
  --rakuyou-dark:         #35271F;   /* Dark Walnut     ヘッダー・フッター */
  --rakuyou-wood:         #765440;   /* Wood Brown      木 */
  --rakuyou-brass:        #A78345;   /* Antique Brass   真鍮アクセント */
  --rakuyou-brass-light:  #E5D8BD;   /* Brass Mist      淡い真鍮 */
  --rakuyou-border:       #D8CFC0;   /* Paper Border    罫線 */

  /* 派生色（トークンから計算した中間色。個別に触らないこと） */
  --rakuyou-brass-deep:   #8A6A34;   /* hover時の真鍮。文字色として使える濃さ */
  --rakuyou-copper:       #B66A3C;   /* ロゴ調整用の銅色。仕様書§13 */
  --rakuyou-dark-soft:    #43332A;   /* Dark Walnutの一段明るい面 */
  --rakuyou-ink-faint:    rgba(43, 36, 31, 0.08);  /* ごく薄い罫線 */

  /* ------------------------------------------------------------------
     0-2  Semantic Colors  ―  役割で呼ぶための別名
     ここを使うことで、あとから配色を変えやすくする
     ------------------------------------------------------------------ */

  --rk-bg:              var(--rakuyou-ivory);        /* ページ地色 */
  --rk-bg-content:      var(--rakuyou-cream);        /* 本文エリア地色 */
  --rk-bg-inverse:      var(--rakuyou-dark);         /* ヘッダー・フッター */
  --rk-bg-subtle:       #EFEADD;                     /* 引用・情報ボックス */

  --rk-text:            var(--rakuyou-ink);          /* 本文 */
  --rk-text-muted:      var(--rakuyou-muted);        /* 日付・キャプション */
  --rk-text-inverse:    var(--rakuyou-ivory);        /* 濃い背景の上の文字 */
  --rk-text-accent:     var(--rakuyou-brass-deep);   /* 強調・リンク */

  --rk-line:            var(--rakuyou-border);       /* 通常の罫線 */
  --rk-line-faint:      var(--rakuyou-ink-faint);    /* ごく薄い区切り */
  --rk-line-accent:     var(--rakuyou-brass);        /* 真鍮の罫線 */

  --rk-focus:           var(--rakuyou-brass);        /* フォーカスリング */

  /* ------------------------------------------------------------------
     0-3  Typography  ―  仕様書§12
     ------------------------------------------------------------------ */

  /* 書体スタック */
  --rk-font-display:  "Shippori Mincho B1", "Noto Serif JP",
                      "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
                      serif;

  --rk-font-body:     "Noto Serif JP",
                      "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
                      serif;

  /* UI用。functions.php の設定に合わせてここを切り替える
     ├ 推奨（端末標準ゴシック・軽い）… 下の定義をそのまま使う
     └ 仕様書どおり … 先頭に "Noto Sans JP", を足す           */
  --rk-font-ui:       "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                      "BIZ UDPGothic", "Yu Gothic Medium", "YuGothic",
                      "Meiryo", sans-serif;

  --rk-font-latin:    "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* 筆記体。ロゴの "Solitaryleaflog" に使う。
     差し替えたいときは、ここと functions.php の読み込み名を揃えて変更する。

       Petit Formal Script … 正統派。線が太めで小さくても読める（現在の指定）
       Pinyon Script       … 銅版印刷風。蔵書票・古い洋館の趣
       Great Vibes         … 優雅だがWebで見慣れた印象
       Italianno           … 細く流れる線。繊細だが小さいと読みにくい
       Tangerine           … 極細。装飾性が高い

     ※ 筆記体には letter-spacing を付けないこと。文字の繋がりが切れる。 */
  --rk-font-script:   "Petit Formal Script", "Cormorant Garamond", cursive;

  /* 字の大きさ ― 本文はPC18px / Mobile16.5px を境界幅で滑らかに繋ぐ */
  --rk-text-xs:       0.6875rem;                            /* 11px  号数・ラベル */
  --rk-text-sm:       0.8125rem;                            /* 13px  メタ情報 */
  --rk-text-base:     0.9375rem;                            /* 15px  UI */
  --rk-text-body:     clamp(1.03125rem, 0.95rem + 0.35vw, 1.125rem); /* 16.5→18px 本文 */
  --rk-text-lead:     clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);  /* リード文 */
  --rk-text-h3:       clamp(1.1875rem, 1.08rem + 0.5vw, 1.375rem);   /* 19→22px */
  --rk-text-h2:       clamp(1.375rem, 1.2rem + 0.75vw, 1.6875rem);   /* 22→27px */
  --rk-text-h1:       clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);    /* 26→38px */
  --rk-text-hero:     clamp(2rem, 1.3rem + 3vw, 3.25rem);            /* 32→52px */

  /* 行間 ― 仕様書§12は本文1.8〜1.95 */
  --rk-leading-tight:  1.45;   /* 大見出し */
  --rk-leading-snug:   1.65;   /* 小見出し・カードタイトル */
  --rk-leading-body:   1.9;    /* 本文 */
  --rk-leading-loose:  2.0;    /* 引用・余韻 */

  /* 字間 ― 日本語の明朝は少し開けたほうが上品に見える */
  --rk-tracking-tight:  0.01em;
  --rk-tracking-normal: 0.04em;
  --rk-tracking-wide:   0.12em;
  --rk-tracking-widest: 0.24em;   /* 英字ラベル・カテゴリー名 */

  /* 太さ */
  --rk-weight-normal:  400;
  --rk-weight-medium:  500;
  --rk-weight-bold:    600;   /* 明朝は700まで上げると重い。600で止める */

  /* ------------------------------------------------------------------
     0-4  Spacing  ―  仕様書§14「余白を恐れない」
     ------------------------------------------------------------------ */

  --rk-space-2xs:  0.25rem;    /*  4px */
  --rk-space-xs:   0.5rem;     /*  8px */
  --rk-space-sm:   0.875rem;   /* 14px */
  --rk-space-md:   1.5rem;     /* 24px */
  --rk-space-lg:   2.5rem;     /* 40px */
  --rk-space-xl:   4rem;       /* 64px */
  --rk-space-2xl:  6rem;       /* 96px */

  /* セクション間の余白。PC 80〜110px / Mobile 48〜64px を1つの値で繋ぐ */
  --rk-section-gap: clamp(3rem, 1.5rem + 6vw, 6.875rem);   /* 48 → 110px */

  /* 本文の段落間 */
  --rk-paragraph-gap: 1.75em;

  /* ------------------------------------------------------------------
     0-5  Layout  ―  仕様書§14
     ------------------------------------------------------------------ */

  --rk-width-site:     1200px;   /* サイト最大幅 */
  --rk-width-wide:     980px;    /* 広めのセクション */
  --rk-width-article:  740px;    /* 記事本文（仕様書 720〜760px の中央） */
  --rk-width-narrow:   580px;    /* リード文・引用など、さらに絞る場合 */

  --rk-gutter:  clamp(1.25rem, 0.5rem + 3vw, 2.5rem);   /* 左右の余白 20→40px */

  /* ------------------------------------------------------------------
     0-6  Decoration
     ------------------------------------------------------------------ */

  --rk-radius-sm:   2px;
  --rk-radius-md:   3px;    /* 紙・本の質感。角は丸めすぎない */
  --rk-radius-lg:   4px;

  --rk-border-hair:  1px solid var(--rk-line);
  --rk-border-faint: 1px solid var(--rk-line-faint);

  /* 影は「紙が置かれている」程度に留める。浮かせない */
  --rk-shadow-sm:  0 1px 2px rgba(43, 36, 31, 0.05);
  --rk-shadow-md:  0 2px 10px rgba(43, 36, 31, 0.07);
  --rk-shadow-lg:  0 8px 30px rgba(43, 36, 31, 0.10);

  --rk-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --rk-duration:    240ms;
  --rk-transition:  var(--rk-duration) var(--rk-ease);

  /* ------------------------------------------------------------------
     0-7  Z-Index  ― 重なり順を1か所で管理する
     ------------------------------------------------------------------ */

  --rk-z-base:      1;
  --rk-z-sticky:    100;
  --rk-z-header:    200;
  --rk-z-dropdown:  300;
  --rk-z-overlay:   400;
  --rk-z-modal:     500;
}


/* ==========================================================================
   PART 1   Font Family
   ========================================================================== */

body,
.entry-content,
.article {
  font-family: var(--rk-font-body);
  font-feature-settings: "palt" 1;   /* 日本語の約物を詰める。読みやすさが変わる */
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.article-title,
.rakuyou-display {
  font-family: var(--rk-font-display);
  font-feature-settings: "palt" 1;
}

/* UI・メタ情報はゴシック */
.rakuyou-ui,
.entry-date, .post-date, .date-tags,
.breadcrumb,
.navi-in, #navi,
.footer-bottom,
.pagination, .page-numbers,
.entry-card-meta, .card-meta,
.widget-title,
button, input, select, textarea {
  font-family: var(--rk-font-ui);
}

/* 英数字だけを別書体にしたい箇所 */
.rakuyou-latin {
  font-family: var(--rk-font-latin);
  letter-spacing: var(--rk-tracking-wide);
}


/* ==========================================================================
   PART 2   Base
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* 目次から飛んだとき見出しが隠れないように */
}

body {
  background-color: var(--rk-bg);
  color: var(--rk-text);
  font-size: var(--rk-text-body);
  line-height: var(--rk-leading-body);
  letter-spacing: var(--rk-tracking-normal);
  font-weight: var(--rk-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Cocoon設定の「サイトフォント」「フォントサイズ」は、
   body に .ff-〇〇 / .fz-18px というクラスを付けて効かせる仕組みになっている。
   クラス指定のほうが強いため、そのままだとRAKUYOUの指定が負ける。

   Cocoon側には「指定なし」という選択肢が無く、必ず何らかの値を持つので、
   ここで属性セレクタを使って上書きしておく。
   こうしておけば、Cocoon設定が何であっても影響を受けない。 */
body[class*="ff-"] {
  font-family: var(--rk-font-body);
}

body[class*="fz-"] {
  font-size: var(--rk-text-body);
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

img {
  border-radius: var(--rk-radius-md);
}

hr {
  border: 0;
  border-top: var(--rk-border-hair);
  margin: var(--rk-space-xl) auto;
  max-width: 8rem;
}


/* ==========================================================================
   PART 3   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--rk-weight-bold);
  line-height: var(--rk-leading-tight);
  letter-spacing: var(--rk-tracking-tight);
  color: var(--rk-text);
}

h2 { font-size: var(--rk-text-h2); }
h3 { font-size: var(--rk-text-h3); line-height: var(--rk-leading-snug); }

p {
  margin-block: 0 var(--rk-paragraph-gap);
}

p:last-child {
  margin-bottom: 0;
}

small,
.rakuyou-meta {
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  color: var(--rk-text-muted);
  letter-spacing: var(--rk-tracking-wide);
  line-height: 1.7;
}

/* 英字の小さなラベル（CATEGORY / RAKUYOU など） */
.rakuyou-label {
  font-family: var(--rk-font-latin);
  font-size: var(--rk-text-xs);
  letter-spacing: var(--rk-tracking-widest);
  text-transform: uppercase;
  color: var(--rakuyou-brass);
  line-height: 1;
}


/* ==========================================================================
   PART 4   Layout
   ========================================================================== */

.rakuyou-container {
  width: 100%;
  max-width: var(--rk-width-site);
  margin-inline: auto;
  padding-inline: var(--rk-gutter);
}

.rakuyou-container--wide    { max-width: var(--rk-width-wide); }
.rakuyou-container--article { max-width: var(--rk-width-article); }
.rakuyou-container--narrow  { max-width: var(--rk-width-narrow); }

/* セクション。余白は必ずこれを使い、個別に数値を書かない */
.rakuyou-section {
  padding-block: var(--rk-section-gap);
}

.rakuyou-section + .rakuyou-section {
  padding-top: 0;   /* 連続時は二重に空けない */
}


/* ==========================================================================
   PART 5   Links & Selection
   ========================================================================== */

a {
  color: var(--rk-text-accent);
  text-decoration: none;
  transition: color var(--rk-transition),
              border-color var(--rk-transition),
              opacity var(--rk-transition);
}

a:hover {
  color: var(--rakuyou-wood);
}

/* 本文中のリンクだけは下線を出す。読み物の中では下線があったほうが親切 */
.entry-content a:not(.rakuyou-button):not([class*="wp-block-button"]) {
  border-bottom: 1px solid var(--rakuyou-brass-light);
  padding-bottom: 0.1em;
}

.entry-content a:not(.rakuyou-button):not([class*="wp-block-button"]):hover {
  border-bottom-color: var(--rakuyou-brass);
}

::selection {
  background-color: var(--rakuyou-brass-light);
  color: var(--rakuyou-ink);
}


/* ==========================================================================
   PART 6   Article Content   ―  仕様書§21
   書籍を読むような、文章中心のページにする
   ========================================================================== */

.entry-content {
  max-width: var(--rk-width-article);
  margin-inline: auto;
  font-size: var(--rk-text-body);
  line-height: var(--rk-leading-body);
  letter-spacing: var(--rk-tracking-normal);
  color: var(--rk-text);
}

/* --- 見出し ------------------------------------------------------------ */

/* H2 ― 章の始まり。上に大きく空け、真鍮の細い罫線を敷く */
.entry-content h2 {
  margin-block: 4.5rem 2rem;
  padding-bottom: var(--rk-space-sm);
  font-size: var(--rk-text-h2);
  border-bottom: 1px solid var(--rk-line);
  position: relative;
}

.entry-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 3.5rem;
  height: 1px;
  background-color: var(--rakuyou-brass);
}

.entry-content h2:first-child {
  margin-top: 0;
}

/* H3 ― 節。真鍮の短い縦線だけを添える */
.entry-content h3 {
  margin-block: 3rem 1.25rem;
  padding-left: 0.85rem;
  font-size: var(--rk-text-h3);
  border-left: 2px solid var(--rakuyou-brass);
}

/* --- 段落・リスト ------------------------------------------------------ */

.entry-content p {
  margin-bottom: var(--rk-paragraph-gap);
}

.entry-content ul,
.entry-content ol {
  margin-block: 0 var(--rk-paragraph-gap);
  padding-left: 1.5em;
}

.entry-content li {
  margin-bottom: 0.6em;
  line-height: var(--rk-leading-body);
}

.entry-content ul li::marker {
  color: var(--rakuyou-brass);
}

.entry-content ol li::marker {
  color: var(--rakuyou-brass);
  font-family: var(--rk-font-latin);
}

.entry-content strong,
.entry-content b {
  font-weight: var(--rk-weight-bold);
  /* 太字に色や蛍光ペンを付けない。仕様書§26「本文まで装飾しすぎる」を避ける */
}

/* --- 画像とキャプション ------------------------------------------------ */

.entry-content figure,
.entry-content .wp-block-image {
  margin-block: var(--rk-space-lg);
}

.entry-content figcaption,
.entry-content .wp-block-image figcaption {
  margin-top: var(--rk-space-sm);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  line-height: 1.75;
  color: var(--rk-text-muted);
  letter-spacing: var(--rk-tracking-wide);
  text-align: left;
}

/* 記事幅より広く見せたい画像 */
.entry-content .alignwide {
  width: min(100vw - var(--rk-gutter) * 2, var(--rk-width-wide));
  max-width: none;
  margin-inline: calc(50% - min(100vw - var(--rk-gutter) * 2, var(--rk-width-wide)) / 2);
}

/* --- 引用 -------------------------------------------------------------- */

.entry-content blockquote,
.entry-content .wp-block-quote {
  margin-block: var(--rk-space-lg);
  padding: var(--rk-space-md) var(--rk-space-md) var(--rk-space-md) var(--rk-space-lg);
  background-color: var(--rk-bg-subtle);
  border: 0;
  border-left: 2px solid var(--rakuyou-brass);
  border-radius: 0 var(--rk-radius-md) var(--rk-radius-md) 0;
  font-size: 0.95em;
  line-height: var(--rk-leading-loose);
  color: var(--rk-text);
}

.entry-content blockquote cite {
  display: block;
  margin-top: var(--rk-space-sm);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  font-style: normal;
  color: var(--rk-text-muted);
}

.entry-content blockquote cite::before {
  content: "— ";
}

/* --- 区切り線 ---------------------------------------------------------- */

/* Gutenbergの区切りブロック。既存記事で34回使われているので丁寧に */
.entry-content hr,
.entry-content .wp-block-separator {
  margin-block: var(--rk-space-xl);
  border: 0;
  border-top: 1px solid var(--rk-line);
  max-width: 6rem;
  margin-inline: auto;
  opacity: 1;
}

/* --- 表 ---------------------------------------------------------------- */

.entry-content table {
  width: 100%;
  margin-block: var(--rk-space-lg);
  border-collapse: collapse;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  line-height: 1.75;
}

.entry-content th,
.entry-content td {
  padding: 0.75rem 1rem;
  border-bottom: var(--rk-border-hair);
  text-align: left;
  vertical-align: top;
}

.entry-content th {
  background-color: var(--rk-bg-subtle);
  font-weight: var(--rk-weight-medium);
  color: var(--rk-text);
}

/* 表は横に溢れたらその中でスクロールさせる（レイアウトを壊さない） */
.entry-content .wp-block-table {
  overflow-x: auto;
}

/* --- 埋め込み ---------------------------------------------------------- */

.entry-content .wp-block-embed {
  margin-block: var(--rk-space-lg);
}


/* ==========================================================================
   PART 7   Cocoon Overrides
   Cocoonの既定スタイルのうち、世界観と衝突するものを静かにする
   ========================================================================== */

/* 本文エリアの地色を Content Cream に */
#content,
.content,
main.main,
.main {
  background-color: transparent;
}

.article,
#main .entry-content {
  background-color: transparent;
}

/* Cocoonは見出しに背景色や左太線を付けることがある。一旦リセットしてから
   PART 6 の指定を効かせる */
.entry-content h2,
.entry-content h3 {
  background-color: transparent;
  background-image: none;
}

/* Cocoonの角丸・影を控えめに */
.entry-card,
.related-entry-card,
.widget,
.a-wrap {
  border-radius: var(--rk-radius-md);
}


/* ==========================================================================
   PART 8   Accessibility
   ========================================================================== */

/* キーボード操作時だけフォーカスリングを出す */
:focus-visible {
  outline: 2px solid var(--rk-focus);
  outline-offset: 3px;
  border-radius: var(--rk-radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* 動きを減らす設定をしている人には、アニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 読み上げ専用テキスト */
.rakuyou-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   Responsive  ―  スマートフォン
   ========================================================================== */

@media screen and (max-width: 834px) {

  .entry-content h2 {
    margin-block: 3.25rem 1.5rem;
  }

  .entry-content h3 {
    margin-block: 2.25rem 1rem;
  }

  .entry-content blockquote,
  .entry-content .wp-block-quote {
    padding: var(--rk-space-md);
    padding-left: var(--rk-space-md);
  }

  /* 幅いっぱい画像はスマホでは画面幅いっぱいに */
  .entry-content .alignwide {
    width: 100%;
    margin-inline: 0;
  }
}

@media screen and (max-width: 480px) {

  :root {
    --rk-paragraph-gap: 1.6em;
  }

  .entry-content table {
    font-size: var(--rk-text-sm);
  }

  .entry-content th,
  .entry-content td {
    padding: 0.6rem 0.75rem;
  }
}


/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  #header, #navi, #footer, .sns-share, .related-entry-heading,
  .rakuyou-header, .rakuyou-footer {
    display: none !important;
  }
  .entry-content {
    max-width: none;
  }
}