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

/* ==========================================================================
   ai-buchoman.com｜日本語組版の調整（旧自作テーマ buchoman から移植）
   --------------------------------------------------------------------------
   方針：色で派手にするのではなく「組版」で読みやすさを作る。
   親テーマ（cocoon-master）は絶対に編集しない。ここだけを触る。
   このファイルは親の style.css の後に読み込まれるので、
   同じセレクタ・同じ詳細度なら後勝ちで上書きできる。

   移植前の実測値（2026-08-18 / 本番 /affiliate-rental-server/）
     本文 18px ／ 行間 1.8（32.4px）／ 字間 normal ／ 1行 66.4文字
     h2 は薄グレー背景＋padding 25px（Cocoonの既定＝いわゆる"よそと同じ"見た目）
   ========================================================================== */

/************************************
** 0. 色と寸法の定義
** 旧テーマのパレットを引き継ぐ。Cocoonの色変数（--cocoon-*）とは別系統なので
** ここで自前に定義する。旧テーマの var(--wp--preset--color--*) は
** Cocoonには存在しないため、そのまま移植すると全部無効になる。
************************************/
:root {
  --bm-primary: #121e37; /* 見出し（濃紺） */
  --bm-accent:  #de3030; /* アクセント（赤） */
  --bm-border:  #e3e6ea; /* 罫線 */
  --bm-muted:   #6b7280; /* 補助テキスト */
  --bm-marker:  #ffe9a8; /* 蛍光マーカー */

  /* 本文の行長。18px＋字間0.04emで1文字≒18.7px → 46rem(736px)で約39文字。
     日本語の読みやすい行長は35〜45文字。移植前は66文字あった。 */
  --bm-measure: 46rem;

  /* フォント：ヒラギノ優先は維持しつつ、Windows向けに游ゴシックMediumを
     Meiryoより前に入れる。Cocoonの既定はヒラギノ→Meiryoで、
     游ゴシックを経由しないため"Windowsで細すぎる"問題は元々起きていないが、
     Meiryoは字面が古く行間も間延びするので、游ゴシックMediumを先に当てる。
     ※ "Yu Gothic Medium" を YuGothic より前に置くのが必須（順序が逆だと細い方が当たる） */
  --cocoon-default-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", YuGothic, "Yu Gothic", Meiryo, sans-serif;
}

/************************************
** 1. 行長（1行の文字数）
** 記事ページと固定ページだけを絞る。トップの記事一覧は広いままにしたいので
** .single / .page に限定する。
** ※ Cocoon設定「サイト幅」でも似たことができるが、あちらは一覧にも効いてしまう。
**
** メインカラム（白いカード）と、その直下の要素を同じ幅で揃えるのが要点。
** 記事本体（.article）だけを絞ると、関連記事・コメント（.under-entry-content）が
** 全幅のまま残って左端がズレる。実測で確認済み（記事 left:272px / 関連記事 left:42px）。
************************************/
/* 白いカードごと絞る。+4rem は Cocoon の .main の左右padding（実測29px）の逃げ。
   ⚠️ セレクタに .content を挟むのは詳細度合わせ。Cocoonが
      `.no-sidebar .content .main { margin: 0; width: 100% }`（0,3,0）で
      左右marginを0に固定しているため、`.single .main`（0,2,0）では中央に寄らない。 */
.single .content .main,
.page .content .main {
  max-width: calc(var(--bm-measure) + 4rem);
  margin-inline: auto;
}

/* カード直下の要素は全部同じ行長に揃える（記事・関連記事・コメント・パンくず） */
.single .content .main > *,
.page .content .main > * {
  max-width: var(--bm-measure);
  margin-inline: auto;
}

/************************************
** 2. 本文の行間・字間・日本語の折り返し
************************************/
.entry-content {
  line-height: 1.9;      /* Cocoon既定1.8より広い。日本語の長文はこれくらい要る */
  letter-spacing: 0.04em;
  /* 日本語は単語の途中で折らない。長いURLは折る（break-wordのまま） */
  word-break: normal;
  overflow-wrap: break-word;
  /* 行頭に句読点・閉じ括弧が来ないようにする（禁則処理） */
  line-break: strict;
  /* 約物（括弧・句読点）が全角幅で間延びするのを詰める。対応ブラウザのみ効く */
  text-spacing-trim: trim-start;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.entry-content p {
  line-height: 1.9;
  margin-block: 0 1.75em; /* 段落の間は下だけに持たせる */
}

/************************************
** 3. 見出し
** 上の余白を大きく・下を小さくして「この見出しは次の文章のもの」と一目で分かる形にする。
** Cocoonのグレー背景（h2）と四方囲み（h3）は外す。装飾ではなく余白と罫線で階層を作る。
************************************/
.article :is(h2, h3, h4, h5, h6) {
  color: var(--bm-primary);
  letter-spacing: 0.02em;
  line-height: 1.45;
  /* 見出しだけ詰め組み＋文節で折り返す（本文にかけると逆に読みにくい） */
  font-feature-settings: "palt" 1;
  word-break: auto-phrase;
  scroll-margin-top: 2rem;
}

/* h2：グレー背景をやめ、上に短いアクセントバー＋下罫線 */
.article h2 {
  margin: 3.75rem 0 1.25rem;
  padding: 0 0 0.5em;
  background-color: transparent;
  border-radius: 0;
  border-bottom: 2px solid var(--bm-border);
}
.article h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: 0.6em;
  background: var(--bm-accent);
}

/* h3：四方の囲みをやめて左罫線だけにする */
.article h3 {
  margin: 2.75rem 0 1rem;
  padding: 0 0 0 0.7em;
  border: 0;
  border-left: 4px solid var(--bm-primary);
}

/* h4：上下の二重罫線をやめる */
.article h4 {
  margin: 2.25rem 0 0.85rem;
  padding: 0;
  border: 0;
}

/* 見出しの直後の段落は詰める（離れると見出しとの繋がりが切れる） */
.entry-content :is(h2, h3, h4) + p {
  margin-top: 0;
}

/************************************
** 4. 本文パーツ
************************************/
/* リンクは下線を文字から少し離す（日本語は下線が字に被って潰れる） */
.entry-content a:not(.btn):not(.btn-wrap a) {
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

/* リスト：項目の間を空ける */
.entry-content :is(ul, ol) li + li {
  margin-top: 0.5em;
}
.entry-content :is(ul, ol) {
  line-height: 1.9;
}

/* 強調は色文字ではなくマーカーで（赤字だらけは信用を落とす） */
.entry-content mark {
  background: linear-gradient(transparent 62%, var(--bm-marker) 62%);
  color: inherit;
  padding: 0 0.1em;
}

/* 引用 */
.entry-content blockquote {
  letter-spacing: 0.02em;
}

/************************************
** 5. 表（比較表はアフィリの生命線。数字の桁が揺れると比較にならない）
************************************/
.entry-content table {
  font-size: 0.9375em;
  line-height: 1.7;
  letter-spacing: 0.02em;
  /* 数字・英字の字幅を揃える（料金の桁ズレ防止） */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.entry-content table :is(th, td) {
  padding: 0.7em 0.9em;
  vertical-align: middle;
}
.entry-content table thead th {
  white-space: nowrap;
}

/* 幅に収まらない表は横スクロールさせる（潰して読めなくするより良い）
   ※ Cocoonには「表のスクロール」機能（.scrollable-table / 1列目固定）があるので、
     本番ではまず Cocoon設定側を使う。これはその設定が無い場合の保険。 */
.entry-content figure.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/************************************
** 6. PR表記（ステマ規制・2023-10-01施行）
** 表示位置と文言は Cocoon設定（広告 → PR表記）で管理する。ここは見え方だけ。
** ⚠️ 記事本文に手書きしない（二重表示になる）
************************************/
.pr-label-l {
  letter-spacing: 0.02em;
  color: var(--bm-muted);
}

/************************************
** 7. アクセシビリティ
************************************/
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--bm-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /* 画面が狭いときは行長の制限が邪魔になるだけなので外す */
  .single .content .main,
  .page .content .main,
  .single .content .main > *,
  .page .content .main > * {
    max-width: none;
  }
  .article h2 {
    margin-top: 3rem;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /* 字間は詰める（狭い画面で0.04emは行が余計に折れる） */
  .entry-content {
    letter-spacing: 0.02em;
  }
  .article h2 {
    margin-top: 2.5rem;
  }
}