@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){
  /*必要ならばここにコードを書く*/
}


/* ==========================================================================
   家計のものさし（FPにゃんころの楽天経済圏やってみた）記事デザイン v2
   --------------------------------------------------------------------------
   貼り付け先：外観 → テーマファイルエディター → Cocoon Child → style.css
               （すでに何か書かれている場合は、その末尾に追記してください）

   ・<style> タグは不要です。このファイルの中身をそのまま貼ってください
   ・色を変えたいときは、いちばん上の「デザイントークン」だけ触れば
     全体に反映されます
   ・Google Fontsは読み込みません。端末に入っているフォントを使います
     （見出しは游明朝／ヒラギノ明朝、本文は游ゴシック／ヒラギノ角ゴ）
   ・結論BOX／わかること／FPコメントはCocoon標準の引用ブロックなので
     このCSSは不要です（Cocoonが自動で装飾します）

   最終更新：2026年9月12日
   ========================================================================== */

/* Google Fontsを使う方針に変えた場合のみ、下の1行のコメントを外す
   （現在は使っていません。外さなくて構いません）
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
*/

/* ============================================================
   デザイントークン
   色を変えたくなったら、ここだけ触れば全体に反映されます
   ============================================================ */
:root {
  /* 赤のスケール */
  --kmt-wine-900:   #5E0A14;  /* 最も深い。H1・H2・FP・強調数値 */
  --kmt-wine-800:   #7D1220;  /* H3・表のヘッダ */
  --kmt-crimson-700:#A81729;  /* 枠線・リンク・番号 */
  --kmt-crimson-600:#C31E33;  /* H3の左バー・注意点の枠 */
  --kmt-vermilion:  #D92137;  /* ★CTAボタン専用。他で使わない */
  --kmt-vermilion-h:#B81328;  /* CTAの影・ホバー */
  --kmt-blush-100:  #FBEAEC;  /* ハイライト背景 */
  --kmt-blush-50:   #FEF6F7;  /* 表の縞・箱の地 */

  /* ニュートラル（赤に寄せた暖色バイアス） */
  --kmt-ink-900:  #241A1C;    /* 本文 */
  --kmt-ink-700:  #4A3A3D;    /* リード文・箱の中の文 */
  --kmt-ink-500:  #7A6668;    /* 注記・キャプション */
  --kmt-line-300: #DCC6CA;    /* 太めの罫線 */
  --kmt-line-200: #EBDBDE;    /* 細い罫線 */
  --kmt-paper:    #FFFDFD;
  --kmt-paper-2:  #FBF6F6;

  --kmt-on-accent: #FFFFFF;   /* 濃い赤の上に乗る文字色 */

  /* 上限メーターのバー（2026年9月13日変更）
     バー＝#ff69b4。白文字では読めない明度なので、上に乗る文字は
     wine-900 を使います（コントラスト比 5.2:1／AA基準4.5:1を満たす） */
  --kmt-meter-fill:    #ff69b4;
  --kmt-meter-on-fill: #5E0A14;
  --kmt-radius: 10px;

  --kmt-font-display: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --kmt-font-body:    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --kmt-font-data:    "IBM Plex Sans", "Noto Sans JP", sans-serif;
}

/* ------------------------------------------------------------
   ダークモード対応（任意）
   Cocoon設定でダークモードを使わない場合は、
   この @media ブロックごと削除してかまいません。
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --kmt-wine-900:   #F4C2C8;
    --kmt-wine-800:   #EFAFB7;
    --kmt-crimson-700:#E4818E;
    --kmt-crimson-600:#E4697A;
    --kmt-vermilion:  #E8394E;
    --kmt-vermilion-h:#C42539;
    --kmt-blush-100:  #2B1A1D;
    --kmt-blush-50:   #221518;

    --kmt-ink-900:  #F2E9EA;
    --kmt-ink-700:  #D6C3C6;
    --kmt-ink-500:  #A98F93;
    --kmt-line-300: #4A3236;
    --kmt-line-200: #392528;
    --kmt-paper:    #17100F;
    --kmt-paper-2:  #1E1516;
    --kmt-on-accent:#17100F;
    --kmt-meter-fill:    #ff69b4;
    --kmt-meter-on-fill: #17100F;
  }
}

/* ============================================================
   見出し・本文（v2で新規）
   ※ Cocoonの既定スタイルより優先させるため .entry-content を付けています
   ============================================================ */


/* ============================================================
   ① PR表記
   ============================================================ */
.kmt-pr {
  font-size: 12.5px; line-height: 1.75; color: var(--kmt-ink-500);
  background: var(--kmt-paper-2); border: 1px solid var(--kmt-line-200);
  border-radius: 6px; padding: 9px 13px; margin: 0 0 30px;
}
.kmt-pr a { color: var(--kmt-crimson-700); }

/* ============================================================
   ② 結論ボックス
   ============================================================ */
.kmt-conclusion {
  border: 2px solid var(--kmt-crimson-700); border-radius: var(--kmt-radius);
  background: var(--kmt-blush-50); margin: 30px 0; overflow: hidden;
}
.kmt-conclusion__hd {
  background: var(--kmt-crimson-700); color: var(--kmt-on-accent);
  font-family: var(--kmt-font-display); font-weight: 700; font-size: 15.5px;
  letter-spacing: .04em; padding: 11px 20px; margin: 0;
}
.kmt-conclusion__bd { padding: 20px 22px 22px; }
.kmt-conclusion ol { margin: 0 0 20px; padding-left: 0; list-style: none; counter-reset: kmtc; }
.kmt-conclusion ol li {
  counter-increment: kmtc; position: relative;
  padding-left: 34px; margin-bottom: 11px; line-height: 1.85;
}
.kmt-conclusion ol li::before {
  content: counter(kmtc); position: absolute; left: 0; top: 4px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--kmt-crimson-700); color: var(--kmt-on-accent);
  font-family: var(--kmt-font-data); font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center;
}
.kmt-conclusion__sub {
  font-weight: 700; font-size: 14px; color: var(--kmt-wine-800);
  margin: 0 0 9px; padding-top: 16px;
  border-top: 1px dashed var(--kmt-line-300);
}
.kmt-conclusion ul { margin: 0; padding-left: 1.2em; }
.kmt-conclusion ul li { margin-bottom: 5px; line-height: 1.8; font-size: 15px; }

/* ============================================================
   ③ FPコメント
   結論ボックスと同じ「枠＋色帯の見出し＋本文」の作り。
   色だけ変えて（結論＝crimson-700／FP＝wine-900）役割を区別する
   ============================================================ */
.kmt-fp {
  border: 2px solid var(--kmt-wine-900);
  border-radius: var(--kmt-radius);
  background: var(--kmt-paper-2);
  margin: 30px 0; overflow: hidden;
}
.kmt-fp__hd {
  background: var(--kmt-wine-900); color: var(--kmt-on-accent);
  font-family: var(--kmt-font-display); font-weight: 700; font-size: 15.5px;
  letter-spacing: .04em; padding: 11px 20px; margin: 0;
  display: flex; align-items: center; gap: 9px;
}
.kmt-fp__hd::before {
  content: "FP"; flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid currentColor;
  font-family: var(--kmt-font-data); font-size: 10.5px;
  font-weight: 700; letter-spacing: 0;
}
.kmt-fp__bd { padding: 18px 22px 20px; }
.kmt-fp__bd p { margin: 0; line-height: 1.95; font-size: 15.3px; color: var(--kmt-ink-700); }
.kmt-fp__bd p + p { margin-top: 14px; }

/* ============================================================
   ④ 注意点（色ではなく「ハッチの帯」という形で区別）
   ============================================================ */
.kmt-warn {
  border: 1px solid var(--kmt-crimson-600); border-radius: var(--kmt-radius);
  margin: 30px 0; overflow: hidden; background: var(--kmt-paper);
}
.kmt-warn__hd {
  font-family: var(--kmt-font-data); font-weight: 600; font-size: 13.5px;
  letter-spacing: .06em; color: var(--kmt-wine-900);
  padding: 10px 18px; margin: 0;
  background-image: repeating-linear-gradient(-45deg,
    var(--kmt-blush-100) 0 7px, transparent 7px 14px);
  border-bottom: 1px solid var(--kmt-line-300);
}
.kmt-warn__bd { padding: 16px 20px 18px; }
.kmt-warn ul { margin: 0; padding-left: 1.15em; }
.kmt-warn li { margin-bottom: 9px; line-height: 1.82; font-size: 15px; }
.kmt-warn li::marker { color: var(--kmt-crimson-600); }

/* ============================================================
   ⑤ CTA（唯一、朱色と影を持つ要素）
   ============================================================ */
.kmt-cta {
  border: 1px solid var(--kmt-line-300); border-radius: 14px;
  background: linear-gradient(180deg, var(--kmt-blush-50), var(--kmt-paper));
  padding: 26px 22px 24px; margin: 36px 0; text-align: center;
}
.kmt-cta__lead {
 
  font-size: 19px; line-height: 1.6; color: var(--kmt-wine-900); margin: 0 0 6px;
}
.kmt-cta__sub { font-size: 14px; color: var(--kmt-ink-500); margin: 0 0 18px; }
.kmt-cta__btn {
  display: inline-block; background: var(--kmt-vermilion);
  color: #fff !important; font-weight: 700; font-size: 16.5px;
  text-decoration: none !important; padding: 16px 46px; border-radius: 8px;
  box-shadow: 0 4px 0 var(--kmt-vermilion-h), 0 10px 22px -8px rgba(217,33,55,.55);
  transition: transform .12s ease, box-shadow .12s ease;
}
.kmt-cta__btn:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--kmt-vermilion-h), 0 6px 14px -6px rgba(217,33,55,.5);
}
.kmt-cta__btn:focus-visible { outline: 3px solid var(--kmt-wine-900); outline-offset: 3px; }
.kmt-cta__note { font-size: 12px; color: var(--kmt-ink-500); margin: 14px 0 0; }

/* ============================================================
   ⑥ 数値ハイライト（v2で新規）
   ============================================================ */
.kmt-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin: 30px 0;
}
.kmt-stat {
  border: 1px solid var(--kmt-line-300);
  border-top: 3px solid var(--kmt-crimson-700);
  border-radius: 8px; background: var(--kmt-paper-2); padding: 16px 16px 15px;
}
.kmt-stat__label { font-size: 12.5px; color: var(--kmt-ink-500); line-height: 1.6; margin: 0 0 5px; }
.kmt-stat__value {
  font-family: var(--kmt-font-data); font-weight: 700; font-size: 33px;
  line-height: 1.1; color: var(--kmt-wine-900);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.kmt-stat__value small { font-size: 16px; font-weight: 600; margin-left: 2px; }
.kmt-stat__note { font-size: 11.5px; color: var(--kmt-ink-500); margin: 7px 0 0; line-height: 1.65; }

/* ============================================================
   ⑦ 上限メーター（v2で新規・このサイト固有）
   ============================================================ */
.kmt-meter {
  border: 1px solid var(--kmt-line-300); border-radius: var(--kmt-radius);
  padding: 18px 20px 20px; margin: 30px 0; background: var(--kmt-paper-2);
}
.kmt-meter__hd {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; margin-bottom: 13px; flex-wrap: wrap;
}
.kmt-meter__ttl { font-weight: 700; font-size: 15px; color: var(--kmt-wine-900); }
.kmt-meter__cap {
  font-family: var(--kmt-font-data); font-size: 12.5px;
  color: var(--kmt-ink-500); font-variant-numeric: tabular-nums;
}
.kmt-meter__row {
  display: grid; grid-template-columns: 106px 1fr;
  gap: 13px; align-items: center; margin-bottom: 11px;
}
.kmt-meter__name { font-size: 13px; color: var(--kmt-ink-700); line-height: 1.5; }
.kmt-meter__track {
  position: relative; height: 30px;
  background: var(--kmt-blush-100); border-radius: 4px; overflow: hidden;
}
.kmt-meter__fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: var(--kmt-meter-fill); border-radius: 4px 0 0 4px;
}
.kmt-meter__over {
  position: absolute; top: 0; bottom: 0;
  background-image: repeating-linear-gradient(-45deg,
    var(--kmt-line-300) 0 5px, transparent 5px 10px);
  border-left: 2px solid var(--kmt-wine-900);
}
.kmt-meter__val {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-family: var(--kmt-font-data); font-size: 12.5px; font-weight: 700;
  color: var(--kmt-ink-700); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* バー（#ff69b4）の上に文字が乗る行に付けるクラス。
   白だとコントラスト2.7:1で読めないため、濃い色を使います */
.kmt-meter__val.is-on-fill { color: var(--kmt-meter-on-fill); }

/* WordPressの自動整形（wpautop）が空の <p> を挟むことがあります。
   グリッドの中に入ると横棒が1列目に押し出されて短くなるため、消しておきます */
.kmt-meter__row > p:empty,
.kmt-meter > p:empty { display: none; }
.kmt-meter__row > p { margin: 0; }
.kmt-meter__track > p { margin: 0; }
.kmt-meter__legend {
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px;
  color: var(--kmt-ink-500); margin-top: 13px; padding-top: 12px;
  border-top: 1px dashed var(--kmt-line-300);
}
.kmt-meter__legend i {
  display: inline-block; width: 13px; height: 11px;
  border-radius: 2px; margin-right: 6px; vertical-align: -1px;
}
.kmt-meter__legend i.is-fill { background: var(--kmt-meter-fill); }
.kmt-meter__legend i.is-over {
  background-image: repeating-linear-gradient(-45deg,
    var(--kmt-line-300) 0 5px, transparent 5px 10px);
  border: 1px solid var(--kmt-line-300);
}

/* ============================================================
   ⑧ Before / After（v2で新規）
   ============================================================ */
.kmt-ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin: 30px 0; }
.kmt-ba__card {
  border: 1px solid var(--kmt-line-300); border-radius: 10px;
  padding: 15px 16px; background: var(--kmt-paper-2);
}
.kmt-ba__card.is-after { border-color: var(--kmt-crimson-700); background: var(--kmt-blush-50); }
.kmt-ba__tag {
  font-family: var(--kmt-font-data); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; color: var(--kmt-ink-500); margin: 0 0 7px;
}
.kmt-ba__card.is-after .kmt-ba__tag { color: var(--kmt-crimson-700); }
.kmt-ba__num {
  font-family: var(--kmt-font-data); font-size: 25px; font-weight: 700;
  color: var(--kmt-wine-900); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.kmt-ba__sub { font-size: 12.5px; color: var(--kmt-ink-500); margin-top: 5px; line-height: 1.6; }
.kmt-ba__arrow { display: grid; place-items: center; color: var(--kmt-vermilion); font-size: 22px; }

/* ============================================================
   ⑨ ステップ（v2で新規・本当に順序があるときだけ使う）
   ============================================================ */
.kmt-steps { margin: 30px 0; padding: 0; list-style: none; counter-reset: kmts; }
.kmt-steps li {
  counter-increment: kmts; position: relative;
  padding: 0 0 22px 52px; border-left: 2px solid var(--kmt-line-300); margin-left: 16px;
}
.kmt-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.kmt-steps li::before {
  content: counter(kmts); position: absolute; left: -17px; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--kmt-paper); border: 2px solid var(--kmt-crimson-700);
  color: var(--kmt-crimson-700);
  font-family: var(--kmt-font-data); font-size: 14px; font-weight: 700;
  display: grid; place-items: center;
}
.kmt-steps b { display: block; font-size: 15.5px; color: var(--kmt-wine-900); margin-bottom: 3px; }
.kmt-steps span { font-size: 14.5px; color: var(--kmt-ink-700); line-height: 1.8; }

/* ============================================================
   ⑩ チェックリスト（v2で新規）
   ============================================================ */
.kmt-check {
  margin: 30px 0; padding: 18px 20px;
  border: 1px solid var(--kmt-line-300); border-radius: var(--kmt-radius);
  background: var(--kmt-paper-2);
}
.kmt-check__ttl {
  font-family: var(--kmt-font-display); font-weight: 700;
  font-size: 15.5px; color: var(--kmt-wine-900); margin: 0 0 12px;
}
.kmt-check ul { margin: 0; padding: 0; list-style: none; }
.kmt-check li { position: relative; padding-left: 30px; margin-bottom: 10px; line-height: 1.8; font-size: 14.8px; }
.kmt-check li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 18px; height: 18px; border: 2px solid var(--kmt-crimson-700); border-radius: 4px;
}
.kmt-check li.is-done::after {
  content: ""; position: absolute; left: 6px; top: 8px;
  width: 5px; height: 10px; border: solid var(--kmt-crimson-700);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* ============================================================
   ⑪ 判定バッジ（v2で新規）
   ============================================================ */
.kmt-badge {
  display: inline-block; font-family: var(--kmt-font-data);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 11px; border-radius: 999px; line-height: 1.7;
}
.kmt-badge--best { background: var(--kmt-crimson-700); color: var(--kmt-on-accent); }
.kmt-badge--ok   { background: var(--kmt-blush-100); color: var(--kmt-wine-800); border: 1px solid var(--kmt-crimson-600); }
.kmt-badge--no   { background: transparent; color: var(--kmt-ink-500); border: 1px solid var(--kmt-line-300); }

/* ============================================================
   ⑫ 表（このサイト最大の資産）
   ============================================================ */
.kmt-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 26px 0; border-radius: 8px; border: 1px solid var(--kmt-line-300);
}
.entry-content .kmt-table {
  border-collapse: collapse; width: 100%; min-width: 480px;
  font-size: 14.3px; background: var(--kmt-paper); margin: 0;
}
.entry-content .kmt-table th,
.entry-content .kmt-table td {
  padding: 11px 14px; text-align: left;
  border: none; border-bottom: 1px solid var(--kmt-line-200); line-height: 1.7;
}
.entry-content .kmt-table thead th {
  background: var(--kmt-blush-100); color: var(--kmt-wine-900);
  font-family: var(--kmt-font-data); font-weight: 700; font-size: 13px;
  letter-spacing: .03em; white-space: nowrap;
  border-bottom: 2px solid var(--kmt-crimson-700);
}
.entry-content .kmt-table tbody tr:nth-child(even) { background: var(--kmt-blush-50); }
.entry-content .kmt-table tbody tr:last-child td { border-bottom: none; }
.entry-content .kmt-table .num {
  font-family: var(--kmt-font-data); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.entry-content .kmt-table .em { font-weight: 700; color: var(--kmt-wine-900); }
.entry-content .kmt-table tr.is-key { background: var(--kmt-blush-100); box-shadow: inset 3px 0 0 var(--kmt-crimson-700); }
.entry-content .kmt-table tr.is-key td { font-weight: 700; color: var(--kmt-wine-900); }

/* ============================================================
   ⑬ 更新情報・免責
   ============================================================ */
.kmt-meta {
  border-top: 2px solid var(--kmt-crimson-700); padding-top: 18px;
  margin: 44px 0 0; font-size: 13.5px; color: var(--kmt-ink-700);
}
.kmt-meta__ttl {

  font-size: 16px; color: var(--kmt-wine-900); margin: 0 0 10px;
}
.kmt-meta ul { margin: 0 0 14px; padding-left: 1.2em; }
.kmt-meta li { margin-bottom: 5px; line-height: 1.75; }
.kmt-meta__disclaimer {
  background: var(--kmt-paper-2); border-radius: 6px; padding: 13px 15px;
  line-height: 1.8; margin: 0; font-size: 12.8px; color: var(--kmt-ink-500);
}

/* ============================================================
   ⑭ 監修クレジット
   ============================================================ */
.kmt-credit {
  margin: 24px 0 0; padding: 15px 17px; background: var(--kmt-blush-50);
  border-left: 3px solid var(--kmt-wine-900); border-radius: 0 6px 6px 0;
  font-size: 13px; color: var(--kmt-ink-500); line-height: 1.8;
}
.kmt-credit strong { color: var(--kmt-wine-900); }
.kmt-credit a { color: var(--kmt-crimson-700); }

/* ============================================================
   ⑮ 次に読む記事
   ============================================================ */
.kmt-related {
  border: 1px solid var(--kmt-line-300); border-radius: var(--kmt-radius);
  padding: 20px 22px; margin: 32px 0; background: var(--kmt-paper);
}
.kmt-related__ttl {
  
  color: var(--kmt-wine-900); margin: 0 0 13px; padding-bottom: 10px;
  border-bottom: 1px solid var(--kmt-line-200);
}
.kmt-related ul { margin: 0; padding: 0; list-style: none; }
.kmt-related li { position: relative; padding-left: 20px; margin-bottom: 10px; line-height: 1.75; font-size: 14.6px; }
.kmt-related li::before {
  content: "\203A"; position: absolute; left: 3px; top: -1px;
  color: var(--kmt-vermilion); font-size: 17px; font-weight: 700;
}
.kmt-related a { color: var(--kmt-crimson-700); font-weight: 500; }

/* ============================================================
   スマホ調整
   ============================================================ */
@media screen and (max-width: 720px) {
  .kmt-ba { grid-template-columns: 1fr; }
  .kmt-ba__arrow { transform: rotate(90deg); }
  .kmt-meter__row { grid-template-columns: 1fr; gap: 5px; }
  .entry-content h2 { font-size: 21px; }
  .entry-content h3 { font-size: 17.5px; }
  .kmt-conclusion__bd { padding: 16px; }
  .kmt-warn__bd { padding: 14px 16px 16px; }
  .kmt-cta { padding: 22px 16px 20px; }
  .kmt-cta__btn { padding: 15px 28px; font-size: 15.5px; display: block; }
  .kmt-stat__value { font-size: 29px; }
  .entry-content .kmt-table { font-size: 13.4px; }
  .entry-content .kmt-table th,
  .entry-content .kmt-table td { padding: 9px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .kmt-cta__btn { transition: none; }
}

/* ============================================================
   ヘッダーのサイト名を、狙った位置で改行させる（2026年9月20日 追加）

   設定 → 一般 → サイトのタイトル を
       FPにゃんころの 楽天経済圏やってみた   （半角スペース1つ）
   にしてあります。keep-all で「そのスペースでだけ改行する」動作になります。
   画面が広いときは1行に戻ります。

   ※ ヘッダー背景の background-size: cover は 2026年9月19日に撤回しました。
      ヘッダー画像がタイル柄（200×150px）のため、cover を当てると
      引き伸ばされてぼやけます。入れないでください。
   ============================================================ */
.site-name-text {
  word-break: keep-all;
  overflow-wrap: break-word; /* 万一入りきらない場合の保険 */
}

/* ------------------------------------------------------------
   スマホ・タブレットで、2行になったサイト名を中央でそろえる
   （2026年9月20日 追加）

   ヘッダーはもともと中央ぞろえですが、サイト名のリンクが
   インライン要素で左右に16pxの余白を持っているため、
   1行目は右に16px、2行目は左に16pxずれていました。
   ブロック要素にすると、余白が行ごとではなく枠全体にかかり、
   どちらの行も正しく中央にそろいます。
   （余白は残すので、文字が画面の端に張りつくことはありません）

   パソコン幅（835px以上）では何も変わりません。
   ------------------------------------------------------------ */
@media screen and (max-width: 834px) {
  .logo-header .site-name-text-link {
    display: block;
    padding-left: 16px;
    padding-right: 16px;
  }
}