@charset "UTF-8";
/*
Theme Name: XWRITE CHILD
Theme URI: https://xwrite.jp/
Description: XWRITEの子テーマ（おやじまい カスタマイズ）
Author: oyajimai
Template: xwrite
Version: 1.0.0
*/

/* ============================================================
   おやじまい デザインCSS v1.1（2026-09-11 / XWRITE移植版）
   コンセプト:「役所っぽくない、でも信頼できる、あたたかい教科書」
   読者は45〜60代。可読性（文字サイズ・行間・コントラスト）最優先。
   方針: カスタマイザーは使わず、このファイルでデザインを一元管理する。
   ※XWRITEは1rem=10px（html{font-size:62.5%}）
   ============================================================ */

/* ------------------------------------------------------------
   1. カラーパレット
   XWRITE本体の:root変数を上書きしてサイト全体に反映する。
   :root:rootでカスタマイザー出力(:root)より詳細度を上げている。
------------------------------------------------------------- */
:root:root {
  /* おやじまいブランドカラー */
  --oyaj-main: #2e6e5e;        /* 深緑: 安心・誠実 */
  --oyaj-main-dark: #235548;   /* 深緑の濃色: hover用 */
  --oyaj-accent: #d98e48;      /* 柿色: CTA・強調のみに使う */
  --oyaj-accent-dark: #c07a35; /* 柿色の濃色: hover用 */
  --oyaj-base: #faf7f2;        /* 生成り: 背景 */
  --oyaj-pale: #e8f0ec;        /* 薄緑: 見出し帯・ボックス */
  --oyaj-text: #333333;        /* 本文 */
  --oyaj-text-weak: #6b6b6b;   /* 補足テキスト */
  --oyaj-border: #dcd5c9;      /* 罫線: 生成りに馴染む茶灰 */

  /* XWRITEテーマ変数への適用 */
  --key-color: var(--oyaj-main);
  --point-color: var(--oyaj-accent);
  --txt-color: var(--oyaj-text);
  --link-color: var(--oyaj-main);
  --background-color: var(--oyaj-base);
  --headbg-color: #ffffff;
  --headtxt-color: var(--oyaj-text);
  --header-textcolor: var(--oyaj-text);
  --headnav-color: var(--oyaj-text);
  --footbg-color: #efe9df;
  --foottxt-color: var(--oyaj-text);

  /* 表（wp-block-table）の配色 */
  --block-table-border-color: var(--oyaj-border);
  --block-table-heading-background-color: var(--oyaj-main);
  --block-table-heading-text-color: #ffffff;
  --block-table-heading-column-background-color: #f6f3ec;
  --block-table-heading-column-text-color: var(--oyaj-text);
  --block-table-stripe-odd-background-color: #ffffff;
  --block-table-stripe-even-background-color: #f6f3ec;

  /* 角丸は控えめに（落ち着き重視） */
  --block--border-radius: 6px;

  /* 一覧サムネイルの縦横比をOGP画像（1200×630 = 52.5%）に一致させる
     （XWRITE標準は61.8%で、左右が切れて不揃いに見えるため） */
  --posts--thumb--ratio--list: 52.5%;
  --posts--thumb--ratio--card: 52.5%;
}

/* XWRITEはウィジェットごとのインラインCSSが .articleListContainer スコープで
   比率を61.8%に再定義するため、二重クラスで詳細度を上げて上書きする */
.articleListContainer.articleListContainer {
  --posts--thumb--ratio--list: 52.5%;
  --posts--thumb--ratio--card: 52.5%;
}

/* スマホの記事一覧は「画像の下にテキスト」の縦2段レイアウトにする */
@media screen and (max-width: 767px) {
  .articleList.type-list .xw-article-media {
    flex-direction: column;
  }
  .articleList.type-list .articleList__item--fig {
    width: 100%;
    min-width: 100%;
    flex-basis: auto;
  }
  .articleList.type-list .xw-article-media__body {
    padding: 1.2rem 1.6rem 1.6rem;
  }
}

/* ------------------------------------------------------------
   2. ベース（背景・文字・リンク）
------------------------------------------------------------- */
body {
  background-color: var(--oyaj-base);
  color: var(--oyaj-text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic Medium", "Yu Gothic", meiryo, sans-serif;
}

/* 記事本文: 45〜60代向けの可読性設定（1rem=10px） */
.main .articleBody {
  font-size: 1.7rem;
  line-height: 1.9;
}
@media screen and (max-width: 767px) {
  .main .articleBody {
    font-size: 1.6rem; /* モバイルでも16px未満にしない */
  }
}

/* リンクは「色＋下線」の二重表現（色覚・老眼対応） */
.main .articleBody a {
  color: var(--oyaj-main);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.main .articleBody a:hover {
  color: var(--oyaj-main-dark);
}

/* ------------------------------------------------------------
   3. 見出し（教科書の「章」らしく）
   .main .articleBody でカスタマイザー由来の同名セレクタより優先させる
------------------------------------------------------------- */
.main .articleBody h2 {
  padding: 1.4rem 1.6rem;
  background-color: var(--oyaj-pale);
  border-left: 6px solid var(--oyaj-main);
  border-radius: 0 4px 4px 0;
  color: #24443b;
}
.main .articleBody h3 {
  padding: 0.6rem 0;
  color: #24443b;
}
.main .articleBody h4 {
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--oyaj-pale);
  color: #24443b;
}

/* ------------------------------------------------------------
   4. 表（費用表・比較表が主役のサイトなので丁寧に）
   基本配色は1.のテーマ変数で制御。ここは細部のみ。
------------------------------------------------------------- */
.main .articleBody .wp-block-table th,
.main .articleBody .wp-block-table td {
  padding: 1rem 1.2rem;
}
.main .articleBody .wp-block-table tbody tr:nth-child(even) td {
  background-color: var(--block-table-stripe-even-background-color);
}
/* スマホでは表を横スクロール可能に */
@media screen and (max-width: 767px) {
  .main .articleBody .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main .articleBody .wp-block-table table {
    min-width: 640px;
  }
}

/* ------------------------------------------------------------
   5. CTAボタン（アフィリエイト導線）
   使い方: <a class="oyaj-btn" href="...">無料で資料請求する</a>
------------------------------------------------------------- */
.oyaj-btn,
.main .articleBody a.oyaj-btn {
  display: block;
  max-width: 480px;
  margin: 1.5em auto;
  padding: 1.6rem 2.4rem;
  background-color: var(--oyaj-accent);
  border-radius: 8px;
  box-shadow: 0 3px 0 var(--oyaj-accent-dark);
  color: #ffffff;
  font-size: 1.05em;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
}
.oyaj-btn:hover,
.main .articleBody a.oyaj-btn:hover {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--oyaj-accent-dark);
  color: #ffffff;
  opacity: 0.95;
}
/* ボタン下の補足（例:「※資料請求は無料です」） */
.oyaj-btn-note {
  margin-top: -0.8em;
  color: var(--oyaj-text-weak);
  font-size: 0.85em;
  text-align: center;
}

/* ------------------------------------------------------------
   6. PR・注記ボックス（ステマ規制対応で本文と明確に区別）
   使い方: <div class="oyaj-pr">（PR）〜の紹介を含みます</div>
------------------------------------------------------------- */
.oyaj-pr {
  margin: 1.5em 0;
  padding: 1.4rem 1.6rem;
  background-color: #ffffff;
  border: 1px solid var(--oyaj-border);
  border-radius: 6px;
  color: var(--oyaj-text-weak);
  font-size: 0.9em;
}

/* ポイント・注意ボックス */
.oyaj-point {
  margin: 1.5em 0;
  padding: 1.6rem 1.8rem;
  background-color: var(--oyaj-pale);
  border-radius: 8px;
  border-left: 5px solid var(--oyaj-main);
}
.oyaj-caution {
  margin: 1.5em 0;
  padding: 1.6rem 1.8rem;
  background-color: #fdf3e7;
  border-radius: 8px;
  border-left: 5px solid var(--oyaj-accent);
}

/* ------------------------------------------------------------
   7. マーカー（強調は柿色の下線マーカーに統一）
   使い方: <span class="oyaj-marker">大事な部分</span>
------------------------------------------------------------- */
.oyaj-marker {
  background: linear-gradient(transparent 62%, #f5d9b8 62%);
  font-weight: 700;
}

/* ------------------------------------------------------------
   8. 細部調整
------------------------------------------------------------- */
.main .articleBody blockquote {
  background-color: #ffffff;
  border-left: 4px solid var(--oyaj-border);
  color: var(--oyaj-text-weak);
}

/* コメント欄は使わない（受付は設定で全停止済み。表示残骸もCSSで念のため非表示） */
#comments,
.comments-area,
.comment-respond {
  display: none !important;
}

/* ------------------------------------------------------------
   11. ブランド要素（ロゴ / 著者アバター）  2026-09-12 追加
   ------------------------------------------------------------ */

/* ヘッダーのキャッチフレーズ帯。
   ロゴ画像の中に「親の終活と実家じまいの教科書」が入っているため重複する。
   帯を出したくなったら下記を削除すれば戻る（PC表示のみの要素）。 */
.header .siteInfo__desc {
  display: none;
}

/* ロゴ。高さはXWRITEのインラインCSS（PC60px / SP30px）が効くので、
   ここでは上限だけ決めてにじみ・つぶれを防ぐ */
.header .siteInfo .siteInfo__logo img,
.header-fix .siteInfo .siteInfo__logo img {
  max-height: 100%;
  width: auto;
}

/* 著者アバター（ライター画像）: 円形＋ブランド色の細い縁 */
.uqAuthor__avatar img.avatar {
  border-radius: 50%;
  border: 2px solid var(--oyaj-main);
  background: #fff;
}

/* PCヘッダーの高さ。ロゴ1段だけのヘッダーなので上下の余白を詰める。
   XWRITE標準は .headerInfo 上24px ＋ .siteInfo 上下20px ＋ 下3px ＝ 計127px と広すぎ、
   さらにキャッチ帯を消した分だけ上下が非対称になっていた。
   ロゴ高さ60pxは据え置きで、上下を均等な12pxにして計84pxにする。 */
@media (min-width: 992px) {
  .header .headerInfo {
    padding-top: 0;
  }
  .header.is-pc-left .siteInfo,
  .header.is-pc-center .siteInfo {
    padding: 12px 0;
  }
  .header .siteInfo:has(img) {
    margin-bottom: 0;
  }

  /* スクロールで出てくる追従ヘッダー（.header-fix）も同じ84pxに揃える。
     XWRITE標準は上下20pxで100pxになり、通常ヘッダー84pxとの差で
     追従ヘッダーが出た瞬間にガタつく */
  .header-fix .siteInfo {
    padding: 12px 0;
  }
  .header-fix .siteInfo:has(img) {
    margin-bottom: 0;
  }
}

/* ------------------------------------------------------------
   12. 記事一覧のサムネイル比率  2026-09-12
   ------------------------------------------------------------ */

/* アイキャッチはOGP用に 1200×630（= padding-top 52.5%）で作っている。
   XWRITE既定の枠は 61.8%（黄金比）なので上下が約15%切られ、
   画像に焼き込んだタイトル文字が欠けていた。

   ただしXWRITEは枠の比率をtheme_modからインラインCSSで
   `.articleListContainer {--posts--thumb--ratio--card:61.8%;}` の形で
   子テーマCSSより後に出力するため、ここでCSSを書いても勝てない。
   テーマ側に 'ogp_ratio'（= 52.5%）の選択肢があるのでそちらを使っている。
   設定は サイト/scripts/set-thumb-ratio.php（Local・本番の両方で実行済み）。
   → このセクションにCSSは書かない。 */