/* 税理士法人Light UP オウンドメディア
 * 🔴 このファイルは自動生成。直接編集しない。
 *    正本＝clients/lightup/seo/DESIGN.md
 *    作り直し＝python3 scripts/build_child_theme.py
 */

:root{
  /* ── 地：図解(themes.json lightup)と同じ紙色を土台にする ───────── */
  --lu-paper:        #FBFAF7;  /* 本文コンテナの地。図解 bg と同値＝図解が浮かない */
  --lu-paper-deep:   #F3F0E9;  /* ページの地。本文コンテナがわずかに立つ */
  --lu-paper-tint:   #F7F4EC;  /* 交互セクション・一覧の縞・事例の囲み */
  --lu-white:        #FFFFFF;  /* 表のヘッダ・入力欄など、白が要る所だけ */

  /* ── 罫 ───────────────────────────────────────────── */
  --lu-rule:         #E4DFD5;  /* 図解 line と同値。既定の罫 */
  --lu-rule-strong:  #CFC8BA;  /* hover・強めの区切り */

  /* ── 文字 ─────────────────────────────────────────── */
  --lu-ink:          #1A1A1A;  /* 本文。図解 ink と同値。対 paper 16.5:1 */
  --lu-ink-soft:     #5C6470;  /* 補足・説明・日付。図解 muted と同値。対 paper 5.9:1 */
  --lu-ink-faint:    #6E737C;  /* ラベル・件数。対 paper 4.6:1（これ以上薄くしない） */

  /* ── 紺：構造の色 ─────────────────────────────────── */
  --lu-navy:         #16233A;  /* 図解 accent と同値。見出し・リンク・主ボタン */
  --lu-navy-deep:    #0D1727;  /* ヘッダ・フッタ・ヒーローの濃い面 */
  --lu-navy-mid:     #2E415F;  /* hover・二次の紺 */
  --lu-navy-wash:    #EDEFF3;  /* 紺のごく薄い面（目次の現在位置など） */

  /* ── 灯り：アクセント1色（一隅を照らす） ─────────────── */
  --lu-lamp:         #D8A32E;  /* CTA・現在位置・結論の縦罫。対 navy 6.9:1 */
  --lu-lamp-deep:    #B08420;  /* hover */
  --lu-lamp-wash:    #FBF2DC;  /* 結論ブロックの地・マーカー */

  /* ── rgba用 ───────────────────────────────────────── */
  --lu-navy-rgb:     22,35,58;
  --lu-lamp-rgb:     216,163,46;
  --lu-ink-rgb:      26,26,26;
  --lu-paper-rgb:    251,250,247;

  /* ── 意味色（使う場面はごく限られる） ────────────────── */
  --lu-caution:      #A8451F;  /* 注意書き・期限。赤は年に数えるほどしか使わない */
  --lu-caution-wash: #FBEFEA;
}

/* 見出しだけWebフォント。本文はシステムフォント。 */

:root{
  --lu-font-head: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho",
                  "YuMincho", "Noto Serif JP", serif;
  --lu-font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
                  "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic",
                  "Meiryo", system-ui, sans-serif;
}

/* 最小限のリセット。Cocoonにも同等の指定はあるが、この設計の寸法計算
   （本文720px・タッチ目標44px）が前提にしているので、依存せず自分で置く。 */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--lu-paper-deep);          /* ページの地は少し濃い紙 */
  color:var(--lu-ink);
  font-family:var(--lu-font-body);
  font-size:17px; line-height:1.9; letter-spacing:.02em;
  font-feature-settings:"palt" 1;           /* 日本語の詰め。約物のアキを詰める */
  line-break:strict;                        /* 閉じ括弧・句読点を行頭に出さない */
  text-rendering:optimizeLegibility;
}
/* 見出しは文節で折り返す（Chrome 119+。非対応ブラウザは無視するだけ） */
h1,h2,h3,.lu-item__title,.lu-toc a,.lu-side-toc a{ word-break:auto-phrase; }
/* 本文・一覧の面。ここだけ図解と同じ紙色にする＝図解が浮かない */
.lu-sheet-paper{ background:var(--lu-paper); }
.lu-article{ background:var(--lu-paper); }

/* 🔴 見出しはゴシックでそろえる。明朝はロゴとバナーだけに残す。
   H2 は本番で **テーマの Outfit（欧文フォント）に負けていた**（2026-09-06 実測）。
   Outfit は日本語の字を持たないので、実際に出る字は環境まかせになっていた。
   .lu-article を付けて明示的に当て直す。 */
h1,h2{ font-weight:700; color:var(--lu-navy); }
h3{ font-family:var(--lu-font-body); font-weight:700; color:var(--lu-ink); }
.lu-article h2{ font-family:var(--lu-font-body); font-weight:700;
                margin:3.4em 0 1.0em; font-size:26px; line-height:1.5; letter-spacing:-.005em; }
.lu-article h3{ font-family:var(--lu-font-body);
                margin:2.2em 0 .6em;  font-size:18px; line-height:1.6;  letter-spacing:.01em; }
/* 行間は body から継承させない。Lightning（VK）が p{line-height:var(--vk-line-height)}
   を直接指定していて、継承より強く 1.7 に落ちるため（2026-09-03 実サイトで実測）。 */
.lu-article p{ margin:0 0 1.5em; line-height:1.9; }
/* 🔴 重要な箇所は色とマーカーで拾えるようにする（2026-09-06 濵田さん指摘
   「色が殆どついておらず人間はそれでは疲れて読めない」）。黒の太字だけでは、
   9,000字の本文を目で追うときに強弱が出ない。紺＋下半分の淡い山吹のマーカー。 */
.lu-article strong{
  font-weight:700; color:var(--lu-navy);
  background:linear-gradient(transparent 58%, rgba(var(--lu-lamp-rgb),.30) 58%);
}

/* リード文＝H1直後の3〜4段落（§11.1 ④）。本文より一段大きくして入口だと分かるようにする */
.lu-lead{ font-size:18px; }
.lu-lead p{ font-size:18px; line-height:1.95; }

/* 箇条書きは図解の点と同じ形にする（6px・紺・top .62em） */
.lu-article ul{ list-style:none; margin:0 0 1.5em; padding:0; }
.lu-article ul > li{ position:relative; margin:0 0 .55em; padding-left:15px; line-height:1.85; }
.lu-article ul > li::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--lu-navy);
}
.lu-article ol{ margin:0 0 1.5em; padding-left:1.5em; }
.lu-article ol > li{ margin:0 0 .55em; line-height:1.85; }

/* 「まとめ」の前だけ太い罫を引く（章の切れ目は余白で作り、ここだけ例外） */
.lu-article .lu-summary{ margin-top:3.6em; padding-top:2.2em;
                         border-top:2px solid var(--lu-rule-strong); }
/* 事例の囲み */
.lu-article .lu-case{ margin:2.6em 0; padding:24px 26px; border-radius:10px;
                      background:var(--lu-paper-tint); border:1px solid var(--lu-rule); }
/* 出典 */
.lu-article .lu-sources{ margin-top:3em; padding-top:1.4em;
                         border-top:1px solid var(--lu-rule);
                         font-size:13.5px; line-height:1.8; color:var(--lu-ink-soft); }
/* 注意書き。期限・不利益が実際に発生する記述だけに使う */
.lu-case > :first-child, .lu-summary > :first-child, .lu-sources > :first-child{
  margin-top:0;                              /* 囲みの余白とH2の上マージンが二重になるのを防ぐ */
}
.lu-article .lu-caution{ margin:2em 0; padding:14px 18px; border-radius:8px;
                         background:var(--lu-caution-wash);
                         border:1px solid rgba(168,69,31,.35);
                         color:#7C3317; font-size:15.5px; }
.lu-article .lu-caution strong{ color:var(--lu-caution); background:none; }
/* 入力欄・表のヘッダなど、白が要る所だけ */
.lu-field{ background:var(--lu-white); border:1px solid var(--lu-rule-strong); border-radius:8px; }

.lu-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:0 28px;
  font-family:var(--lu-font-body); font-size:16px; font-weight:700; letter-spacing:.04em;
  line-height:1.4; text-decoration:none; border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:background-color .18s ease, border-color .18s ease,
                             transform .18s ease, box-shadow .18s ease;
}

/* 主＝行動（無料相談・LINE）。灯りの面に紺の字 */
.lu-btn--primary{ background:var(--lu-lamp); color:var(--lu-navy); border-color:var(--lu-lamp); }
.lu-btn--primary:hover{ background:var(--lu-lamp-deep); border-color:var(--lu-lamp-deep);
                        transform:translateY(-1px); box-shadow:0 4px 14px rgba(var(--lu-lamp-rgb),.32); }
.lu-btn--primary:active{ transform:translateY(0); box-shadow:none; background:var(--lu-lamp-deep); }

/* 副＝紺の面に白。ヒーロー・濃い地の上 */
.lu-btn--navy{ background:var(--lu-navy); color:#fff; border-color:var(--lu-navy); }
.lu-btn--navy:hover{ background:var(--lu-navy-mid); border-color:var(--lu-navy-mid);
                     transform:translateY(-1px); }
.lu-btn--navy:active{ transform:translateY(0); background:var(--lu-navy-deep); }

/* 三＝枠だけ。一覧の「もっと見る」など、押さなくてもよい行動 */
.lu-btn--ghost{ background:transparent; color:var(--lu-navy); border-color:var(--lu-rule-strong); }
.lu-btn--ghost:hover{ background:var(--lu-navy-wash); border-color:var(--lu-navy); }
.lu-btn--ghost:active{ background:var(--lu-navy-wash); border-color:var(--lu-navy-mid); }

/* 共通の focus / disabled */
.lu-btn:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:3px; }
.lu-btn[disabled], .lu-btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; pointer-events:none; }

.lu-btn--wide{ width:100%; }

.lu-list{ border-top:1px solid var(--lu-rule); }

.lu-item{
  display:block; padding:19px 16px 19px 0; border-bottom:1px solid var(--lu-rule);
  text-decoration:none; color:inherit; position:relative;
  transition:background-color .16s ease, padding-left .16s ease;
}
.lu-item::after{                        /* 右端の矢印 */
  content:""; position:absolute; right:6px; top:50%; width:7px; height:7px;
  border-right:1.5px solid var(--lu-ink-faint); border-top:1.5px solid var(--lu-ink-faint);
  transform:translateY(-50%) rotate(45deg);
  transition:border-color .16s ease, right .16s ease;
}
.lu-item:hover{ background:var(--lu-paper-tint); padding-left:10px; }
.lu-item:hover::after{ border-color:var(--lu-navy); right:2px; }
.lu-item:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:-3px; }

.lu-item__meta{                         /* カテゴリ名・更新日 */
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--lu-ink-faint);
  margin-bottom:6px;
}
.lu-item__title{
  font-size:16px; font-weight:600; line-height:1.6; letter-spacing:.01em;
  color:var(--lu-ink); padding-right:22px;
}
.lu-item:hover .lu-item__title{ color:var(--lu-navy); }

/* ピラー記事＝カテゴリの入口。1カテゴリに1本だけ大きく出す */
.lu-item--pillar{
  background:var(--lu-paper); border:1px solid var(--lu-rule); border-radius:10px;
  padding:22px 24px; margin-bottom:14px;
  border-top:3px solid var(--lu-navy);       /* 罫は上に引く（左には引かない） */
}
.lu-item--pillar .lu-item__title{ font-size:19px; }
.lu-item--pillar:hover{ background:var(--lu-paper-tint);
                        border-color:var(--lu-rule-strong); border-top-color:var(--lu-lamp); }

.lu-header{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--lu-paper-rgb),.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lu-rule);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.lu-header.is-scrolled{ box-shadow:0 1px 12px rgba(var(--lu-ink-rgb),.07);
                        border-bottom-color:var(--lu-rule-strong); }
.lu-header__inner{
  max-width:1160px; margin:0 auto; padding:0 24px;
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.lu-brand{ display:flex; align-items:baseline; gap:12px; text-decoration:none; }
.lu-brand__name{ font-family:var(--lu-font-head); font-size:19px; font-weight:600;
                 letter-spacing:.04em; color:var(--lu-navy); }
.lu-brand__tag{ font-family:var(--lu-font-head); font-size:12px; letter-spacing:.06em;
                color:var(--lu-ink-faint); }

.lu-nav{ display:flex; align-items:center; gap:4px; }
.lu-nav a{
  position:relative; padding:9px 13px; font-size:14px; font-weight:600;
  color:var(--lu-ink-soft); text-decoration:none; border-radius:6px;
  transition:color .16s ease, background-color .16s ease;
}
.lu-nav a::after{                          /* 下線が中央から伸びる */
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px;
  background:var(--lu-lamp); transform:scaleX(0); transform-origin:center;
  transition:transform .2s ease;
}
.lu-nav a:hover{ color:var(--lu-navy); }
.lu-nav a:hover::after{ transform:scaleX(1); }
.lu-nav a[aria-current="page"]{ color:var(--lu-navy); }
.lu-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.lu-nav a:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:2px; }

/* 読了プログレスバー（記事ページのみ） */
.lu-progress{ position:absolute; left:0; bottom:-1px; height:3px; width:0;
              background:var(--lu-lamp); transition:width .1s linear; }

/* メニューボタン。768px未満でだけ出る */
.lu-nav-toggle{ display:none; }
.lu-nav-toggle span{ position:relative; display:block; width:18px; height:1.5px;
                     background:var(--lu-navy); transition:background-color .2s ease; }
.lu-nav-toggle span::before, .lu-nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--lu-navy);
  transition:transform .2s ease; }
.lu-nav-toggle span::before{ top:-6px; }
.lu-nav-toggle span::after{ top:6px; }
.lu-nav-toggle[aria-expanded="true"] span{ background:transparent; }
.lu-nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.lu-nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* nav（目次）の中のリンクは下線を引かない。目次は読み物ではなく操作面。 */
.lu-article a:not(.lu-btn):not(.seo-rel__link):not(nav a){
  color:var(--lu-navy); text-decoration:underline;
  text-decoration-color:rgba(var(--lu-navy-rgb),.32);
  text-decoration-thickness:1px; text-underline-offset:.22em;
  transition:text-decoration-color .16s ease, background-color .16s ease;
}
.lu-article a:not(.lu-btn):not(.seo-rel__link):not(nav a):hover{
  text-decoration-color:var(--lu-lamp); text-decoration-thickness:2px;
  background:var(--lu-lamp-wash); }
.lu-article a:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:2px;
                             border-radius:2px; }
.lu-article a:not(.lu-btn):not(.seo-rel__link):not(nav a):visited{ color:var(--lu-navy-mid); }
/* 外部リンク（出典など）は小さな矢印を付ける */
.lu-article a[target="_blank"]::after{
  content:"↗"; font-size:.8em; margin-left:.25em; color:var(--lu-ink-faint); }

.lu-chip{
  display:inline-flex; align-items:center; min-height:28px; padding:0 11px;
  font-size:12px; font-weight:700; letter-spacing:.05em; line-height:1;
  color:var(--lu-navy); background:var(--lu-navy-wash);
  border:1px solid transparent; border-radius:999px; text-decoration:none;
  transition:background-color .16s ease, border-color .16s ease;
}
.lu-chip:hover{ background:#fff; border-color:var(--lu-navy); }
.lu-chip:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:2px; }
.lu-chip__count{ margin-left:7px; font-weight:400; color:var(--lu-ink-faint); }
.lu-chip--pillar{ background:var(--lu-lamp-wash); color:var(--lu-navy); }

/* ── 記事冒頭のインライン目次 ───────────────────────── */
.lu-toc{
  margin:2.6em 0; padding:20px 24px;
  background:var(--lu-paper-tint); border:1px solid var(--lu-rule); border-radius:10px;
}
.lu-toc__title{
  font-family:var(--lu-font-head); font-size:15px; font-weight:600; letter-spacing:.06em;
  color:var(--lu-navy); margin:0 0 12px; padding-bottom:10px;
  border-bottom:1px solid var(--lu-rule);
}
/* 目次シート（モバイル）も同じ見え方にする＝2箇所で書き分けない */
.lu-toc ol, .lu-sheet ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.lu-toc li, .lu-sheet li{ counter-increment:toc; margin:0; }
.lu-toc a, .lu-sheet a{
  display:flex; gap:12px; padding:8px 4px; font-size:14.5px; line-height:1.65;
  color:var(--lu-ink); text-decoration:none; border-radius:5px;
  transition:background-color .16s ease, color .16s ease;
}
.lu-toc a::before, .lu-sheet a::before{
  content:counter(toc,decimal-leading-zero); flex:0 0 auto;
  font-size:12px; font-weight:700; color:var(--lu-lamp-deep); padding-top:.25em;
}
.lu-toc a:hover, .lu-sheet a:hover{ background:var(--lu-paper-tint); color:var(--lu-navy); }
.lu-toc a:focus-visible, .lu-sheet a:focus-visible{
  outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:-2px; }

/* 🔴 H2も9本目から畳む（2026-09-06 濵田さん指摘「目次が縦に長すぎ」）。
   H2が20本ある記事があり、全部並べると目次だけで画面を超えて、本文に入る前に読者が止まる。 */
.lu-toc__rest{ margin-top:4px; }
.lu-toc__rest > ol{ margin-top:2px; }

/* H3は折りたたむ。JS不要 */
.lu-toc__more{ margin-top:12px; border-top:1px solid var(--lu-rule); padding-top:10px; }
.lu-toc__more summary, .lu-toc__rest summary{
  cursor:pointer; list-style:none; font-size:13px; font-weight:700;
  color:var(--lu-ink-soft); padding:4px 0; }
.lu-toc__more summary::-webkit-details-marker, .lu-toc__rest summary::-webkit-details-marker{ display:none; }
.lu-toc__more summary::after{ content:" ＋"; color:var(--lu-lamp-deep); }
.lu-toc__more[open] summary::after{ content:" －"; }
.lu-toc__more summary:hover, .lu-toc__rest summary:hover{ color:var(--lu-navy); }
.lu-toc__more summary:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45);
                                     outline-offset:2px; border-radius:4px; }

/* ── 右サイドの追従目次（1080px以上） ─────────────────── */
.lu-side-toc{
  position:sticky; top:88px;
  max-height:calc(100vh - 200px); overflow-y:auto; overscroll-behavior:contain;
  padding-left:4px;                          /* 縦罫は引かない。離すのは余白でやる */
}
.lu-side-toc a{
  display:block; padding:7px 11px; margin-left:-11px;
  font-size:13px; line-height:1.6; color:var(--lu-ink-soft); text-decoration:none;
  border-radius:6px;
  transition:color .16s ease, background-color .16s ease;
}
.lu-side-toc a:hover{ color:var(--lu-navy); background:var(--lu-navy-wash); }
.lu-side-toc a.is-current{                 /* scroll-spy が付ける。面と文字の太さで示す */
  color:var(--lu-navy); font-weight:700; background:var(--lu-navy-wash);
}
.lu-side-toc a:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:-2px; }

/* 🔴 記事のなかで唯一「濃い面に白文字」を使う場所（2026-09-06 濵田さん
   「白文字（濃い背景）も混ぜながらデザインしていこうよ」）。H2ごとに1つ出るので、
   ここが本文の拍になる。左の縦罫は使わない（同日の指示・全案件共通）。 */
.lu-conclusion{
  margin:1.2em 0 1.8em; padding:16px 22px 18px;
  background:linear-gradient(165deg, var(--lu-navy) 0%, var(--lu-navy-deep) 100%);
  border-radius:10px; color:#fff;
  font-size:17px; line-height:1.9;          /* 🔴 本文と同じ級数・行間にそろえる
                                               （2026-09-06 濵田さん「結論の文字が小さすぎる。他と合わせて」）*/
}
.lu-conclusion strong:first-child{          /* 「結論：」のラベル。行を分けて上に置く */
  display:block; margin:0 0 .4em;
  font-size:11.5px; font-weight:700; letter-spacing:.14em;
  color:var(--lu-lamp); background:none;
}
.lu-conclusion strong{                      /* 濃い面では本文のマーカーが潰れる。山吹の文字に */
  color:var(--lu-lamp); background:none;
}
.lu-conclusion a{ color:#fff; text-decoration-color:rgba(255,255,255,.5); }

/* テーマ既定の引用スタイルを消す（Cocoon・Lightning とも灰色の箱を出す） */
.lu-article blockquote{ background:none; border:0; padding:0; margin:0; font-style:normal; }
.lu-article blockquote::before, .lu-article blockquote::after{ content:none; }

.lu-faq{ border-top:1px solid var(--lu-rule); margin:1.5em 0 0; }
.lu-faq__item{ border-bottom:1px solid var(--lu-rule); }
/* 🔴 Q/A の丸は position:absolute で置く。flex にすると本文中の <strong> が
   別のフレックスアイテムになり、テキストが縦に割れる（2026-08-22 実機で発生）。 */
.lu-faq__item summary{
  display:block; list-style:none; cursor:pointer;
  padding:17px 30px 17px 36px; position:relative;
  font-size:16px; font-weight:600; line-height:1.7; color:var(--lu-ink);
  transition:color .16s ease;
}
.lu-faq__item summary::-webkit-details-marker{ display:none; }
.lu-faq__item summary::before{
  content:"Q"; position:absolute; left:0; top:18px; width:24px; height:24px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--lu-navy); color:#fff; font-size:12px; font-weight:700;
}
.lu-faq__item summary::after{                    /* 開閉の矢印 */
  content:""; position:absolute; right:8px; top:26px; width:8px; height:8px;
  border-right:1.5px solid var(--lu-ink-faint); border-bottom:1.5px solid var(--lu-ink-faint);
  transform:rotate(45deg); transition:transform .2s ease, border-color .16s ease;
}
.lu-faq__item[open] summary::after{ transform:rotate(-135deg); border-color:var(--lu-navy); }
.lu-faq__item summary:hover{ color:var(--lu-navy); }
.lu-faq__item summary:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45);
                                     outline-offset:-3px; }
.lu-faq__a{
  position:relative; padding:0 8px 20px 36px;
  font-size:16px; line-height:1.9; color:var(--lu-ink-soft);
}
.lu-faq__a::before{
  content:"A"; position:absolute; left:0; top:.15em; width:24px; height:24px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--lu-lamp-wash); color:var(--lu-lamp-deep); font-size:12px; font-weight:700;
}
.lu-faq__a p{ margin:0 0 .9em; }
.lu-faq__a p:last-child{ margin-bottom:0; }

.lu-table-wrap{ margin:2.2em 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
                border:1px solid var(--lu-rule); border-radius:10px;
                background:var(--lu-paper); position:relative; }
.lu-article table{ width:100%; min-width:520px; border-collapse:collapse;
                   font-size:15px; line-height:1.7; }
.lu-article th{
  background:var(--lu-navy-wash); color:var(--lu-navy);
  font-size:13px; font-weight:700; letter-spacing:.04em; text-align:left;
  padding:12px 15px; border-bottom:1px solid var(--lu-rule); white-space:nowrap;
}
.lu-article td{ padding:12px 15px; border-bottom:1px solid var(--lu-rule);
                color:var(--lu-ink); vertical-align:top; }
.lu-article tbody tr:last-child td{ border-bottom:0; }
.lu-article tbody tr:hover td{ background:var(--lu-paper-tint); }
/* 横スクロールできることを右端の影で示す */
.lu-table-wrap::after{
  content:""; position:absolute; top:0; right:0; width:26px; height:100%;
  pointer-events:none; opacity:1; transition:opacity .2s ease;
  background:linear-gradient(90deg,rgba(var(--lu-paper-rgb),0),rgba(var(--lu-paper-rgb),.92));
}
.lu-table-wrap.is-end::after{ opacity:0; }

/* ① 記事中盤の帯：控えめ。1記事に1回だけ */
/* 🔴 中盤CTAも画像（2026-09-06 濵田さん「記事の中のCTAは前にいった画像にしてね」）。
   記事末が濃い紺＋白文字なのに対し、中盤は紺のごく薄い面＝読みを止めすぎない強さにする。
   作り直し＝scripts/build_cta_banners.py。ここは器の指定だけ。 */
.lu-cta-inline{ margin:2.6em 0; }
.lu-cta-inline a{ display:block; text-decoration:none; border-radius:10px; overflow:hidden;
                  transition:box-shadow .16s ease; }
.lu-cta-inline a:hover{ box-shadow:0 4px 14px rgba(var(--lu-navy-rgb),.14); }
.lu-cta-inline a:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:3px; }
.lu-cta-inline img{ display:block; width:100%; height:auto; }

/* ② 記事末の本命：濃紺の面 */
/* 🔴 記事末CTAは画像（2026-09-06 濵田さん指示「画像にしないと絶対ずれる」）。
   文字まで焼き込んだバナーをクラスターごとに用意し、functions.php がカテゴリで出し分ける。
   作り直し＝scripts/build_cta_banners.py。ここは器の指定だけ。 */
.lu-cta-end{ margin:3em 0 2.4em; }
.lu-cta-end a{ display:block; text-decoration:none; border-radius:12px; overflow:hidden;
               box-shadow:0 2px 10px rgba(var(--lu-navy-rgb),.10);
               transition:box-shadow .16s ease, transform .16s ease; }
.lu-cta-end a:hover{ box-shadow:0 8px 22px rgba(var(--lu-navy-rgb),.20);
                     transform:translateY(-1px); }
.lu-cta-end a:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:3px; }
.lu-cta-end img{ display:block; width:100%; height:auto; }

.lu-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:7px;
            list-style:none; padding:0;      /* ol の連番を消す */
            font-size:12.5px; color:var(--lu-ink-faint); margin:0 0 18px; }
.lu-crumbs li{ display:flex; align-items:center; }
.lu-crumbs a{ color:var(--lu-ink-soft); text-decoration:none;
              transition:color .16s ease, text-decoration-color .16s ease; }
.lu-crumbs a:hover{ color:var(--lu-navy); text-decoration:underline;
                    text-underline-offset:.2em; }
.lu-crumbs a:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:2px; }
.lu-crumbs li+li::before{ content:"／"; margin-right:7px; color:var(--lu-rule-strong); }
.lu-crumbs [aria-current="page"]{ color:var(--lu-ink); }

.lu-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  grid-template-columns:auto 1fr; gap:10px; align-items:center;
  padding:9px 14px calc(9px + env(safe-area-inset-bottom));
  background:rgba(var(--lu-paper-rgb),.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--lu-rule); box-shadow:0 -2px 14px rgba(var(--lu-ink-rgb),.07);
}
.lu-dock__toc{
  display:grid; place-items:center; min-width:58px; min-height:44px; padding:0 12px;
  font-size:12px; font-weight:700; color:var(--lu-navy);
  background:transparent; border:1px solid var(--lu-rule-strong); border-radius:8px;
}
.lu-dock__toc:hover, .lu-dock__toc[aria-expanded="true"]{ background:var(--lu-navy-wash);
                                                          border-color:var(--lu-navy); }
.lu-dock__toc:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:2px; }
.lu-dock .lu-btn{ min-height:44px; font-size:15px; }

/* 目次シート（下から出る） */
.lu-sheet{
  position:fixed; inset:auto 0 0 0; z-index:59; max-height:72vh; overflow-y:auto;
  padding:22px 20px calc(80px + env(safe-area-inset-bottom));
  background:var(--lu-paper); border-radius:14px 14px 0 0;
  box-shadow:0 -8px 30px rgba(var(--lu-ink-rgb),.18);
  transform:translateY(100%); transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
.lu-sheet.is-open{ transform:translateY(0); }
.lu-sheet__scrim{ position:fixed; inset:0; z-index:58; background:rgba(var(--lu-ink-rgb),.42);
                  opacity:0; pointer-events:none; transition:opacity .26s ease; }
.lu-sheet__scrim.is-open{ opacity:1; pointer-events:auto; }
@media (max-width:767px){ .lu-dock{ display:grid; } }

/* サイト側から当ててよいのは、この2つだけ */
.lu-article .stl-figure{ scroll-margin-top:80px; }     /* アンカー移動時に隠れない */
@media (max-width:767px){ .lu-article .stl-figure{ margin-left:-4px; margin-right:-4px; } }

.lu-wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }
.lu-narrow{ max-width:900px; margin:0 auto; padding:0 24px; }

/* 記事＝1カラム。1100px以上でだけ右に追従サイドが出る */
.lu-article-grid{ display:block; max-width:720px; margin:0 auto; }

@media (min-width:1100px){
  .lu-article-grid{
    display:grid; grid-template-columns:720px 280px; gap:56px;
    max-width:1112px; align-items:start;
  }
}

/* 見出しへのアンカー移動が追従ヘッダに隠れないように */
.lu-article h2, .lu-article h3, .lu-faq__item{ scroll-margin-top:84px; }

@keyframes lu-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.lu-hero__inner > *{ animation:lu-rise .62s cubic-bezier(.22,.61,.36,1) both; }
.lu-hero__inner > *:nth-child(2){ animation-delay:.09s; }
.lu-hero__inner > *:nth-child(3){ animation-delay:.18s; }
.lu-hero__inner > *:nth-child(4){ animation-delay:.27s; }

/* focus-visible は全サイトで同じ見え方にする。ブラウザ既定を消さない */
:where(a, button, summary, [tabindex]):focus-visible{
  outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:2px; border-radius:3px;
}
/* hover は 160〜200ms。これ以上速いと反応が硬く、遅いと鈍い */

.lu-hero{ position:relative; overflow:hidden; background:var(--lu-navy-deep); color:#fff; }
.lu-hero::before{
  content:""; position:absolute; left:-12%; top:-60%; width:58%; height:170%;
  background:radial-gradient(closest-side, rgba(var(--lu-lamp-rgb),.26), transparent 70%);
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .lu-hero__inner > *{ animation:none; opacity:1; transform:none; }
  .lu-sheet{ transition:none; }
  .lu-progress{ transition:none; }   /* 幅の更新自体は残す＝現在位置の情報だから */
}

@media (max-width:1099px){
  /* 右カラムは丸ごと消す。目次だけ消すと下のCTAカードが本文末に落ちて、
     記事末CTA → このカード → 下端バーとCTAが3つ続く（2026-09-03 プレビューで実測）。 */
  .lu-side, .lu-side-toc{ display:none; }
  .lu-article-grid{ display:block; max-width:720px; margin:0 auto; }
}

@media (max-width:767px){
  .lu-wrap, .lu-narrow{ padding:0 20px; }

  /* ヘッダ：タグラインを隠し、メニューをボタンの中に畳む */
  .lu-header__inner{ height:56px; gap:12px; padding:0 20px; }
  .lu-brand{ min-width:0; }
  .lu-brand__name{ font-size:17px; white-space:nowrap; }
  .lu-brand__tag{ display:none; }
  .lu-nav-toggle{
    display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px;
    background:transparent; border:1px solid var(--lu-rule-strong); border-radius:8px;
    cursor:pointer;
  }
  .lu-nav-toggle:focus-visible{ outline:3px solid rgba(var(--lu-navy-rgb),.45); outline-offset:2px; }
  .lu-nav{
    position:absolute; left:0; right:0; top:100%; z-index:10;
    display:none; flex-direction:column; align-items:stretch; gap:0; padding:6px 20px 12px;
    background:var(--lu-paper); border-bottom:1px solid var(--lu-rule);
    box-shadow:0 6px 18px rgba(var(--lu-ink-rgb),.08);
  }
  .lu-nav.is-open{ display:flex; }
  .lu-nav a{ padding:14px 4px; font-size:15px; border-radius:0;
             border-bottom:1px solid var(--lu-rule); }
  .lu-nav a:last-child{ border-bottom:0; }
  .lu-nav a::after{ display:none; }

  /* 本文：カードの枠を外して端まで使う。地を紙色にすれば図解は変わらず馴染む */
  body{ background:var(--lu-paper); }
  .lu-article{ background:transparent; border:0; border-radius:0;
               padding:20px 0 28px; font-size:16px; line-height:1.85; }
  .lu-article h1{ font-size:26px; line-height:1.5; }
  .lu-article h2{ font-size:21px; margin-top:2.8em; }
  .lu-article h3{ font-size:17px; margin-top:2em; }
  .lu-conclusion{ font-size:16px; line-height:1.85; padding:14px 17px; }   /* 本文と同じ */

  .lu-toc{ padding:16px 18px; }
  .lu-toc a{ padding:10px 4px; }            /* 44px確保 */



  .lu-article table{ font-size:14px; min-width:480px; }
  body{ padding-bottom:72px; }              /* 下端バーの分 */
}

/* 横向き・小さい高さでは下端バーを隠す（本文が見えなくなるため） */
@media (max-width:767px) and (max-height:460px){ .lu-dock{ display:none; } }

/* ── 地。Lightningは白なので紙色に戻す（図解の #FBFAF7 が浮かないように） ── */
.lu-page-blog .site-body{ background:var(--lu-paper-deep); }
.lu-page-blog .site-body-container{ max-width:1160px; }

/* ── ページ上部の色帯（「ブログ」）は記事では出さない。縦が長いので削る ── */
.lu-page-blog .page-header{ display:none; }

/* ── パンくずは Lightning のものを使い、色だけ合わせる（構造化データを捨てない） ── */
.lu-page-blog #breadcrumb{ background:transparent; border:0; margin:0; }
.lu-page-blog #breadcrumb .container{ padding-top:14px; padding-bottom:0; }
.lu-page-blog #breadcrumb li, .lu-page-blog #breadcrumb span{
  font-size:12.5px; color:var(--lu-ink-faint); }
.lu-page-blog #breadcrumb a{ color:var(--lu-ink-soft); text-decoration:none; }
.lu-page-blog #breadcrumb a:hover{ color:var(--lu-navy); text-decoration:underline;
                                   text-underline-offset:.2em; }

/* ── サイドバーを消して1カラムに。追従目次は本文側で自前に組む ── */
.lu-page-blog .sub-section{ display:none; }
.lu-page-blog .main-section--col--two{ width:100%; max-width:none; float:none; }

/* ── 記事の外枠。Lightningのカード装飾を外す ── */
.lu-page-blog .entry{ background:transparent; border:0; box-shadow:none; padding:0; }
/* 🔴 見出しは「画面の中央」ではなく「本文の左端」に揃える（2026-09-06 濵田さん指摘）。
   本文は 1112px のグリッド（800＋32＋280）を中央に置くので、外枠 800px のヘッダーだけを
   中央寄せすると左端が 320px と 164px でずれ、タイトルだけ右にはみ出して見える。
   ヘッダーもグリッドと同じ 1112px に広げ、右カラムのぶんを padding で空ける。 */
.lu-page-blog .entry-header{ max-width:1112px; margin:0 auto 26px; padding:0 40px; border:0; }
@media (min-width:1100px){
  .lu-page-blog .entry-header{ padding-right:352px; }   /* 右カラム280 ＋ gap32 ＋ 内側40 */
}
/* 🔴 記事タイトルはゴシック（2026-09-06 濵田さん「タイトル部分がすこし目立たないね。
   やっぱりタイトルもゴシックがいい」）。明朝の600だと線が細く、一覧やSNSから来た人が
   最初に見る文字として弱かった。太さで立たせ、字間はわずかに詰める。 */
.lu-page-blog .entry-title{
  font-family:var(--lu-font-body); font-size:36px; font-weight:800;
  line-height:1.45; letter-spacing:-.005em; color:var(--lu-navy);
  margin:0 0 14px; padding:0; border:0; background:none;
  text-align:left;                     /* Lightning は中央寄せで出す（2026-09-06 本番で確認） */
}
.lu-page-blog .entry-title::before, .lu-page-blog .entry-title::after{ content:none; }

/* 🔴 公開日は出さない。更新日だけ残す（記事の日付は更新日だけ、が全案件のルール） */
.lu-page-blog .entry-meta-item-date{ display:none; }
/* 🔴 著者も出さない。§11.1 ③は「カテゴリチップ ＋ H1 ＋ 更新日」で、書き手の名前は入れない
   （2026-09-06 本番で `hamada` と Gravatar の顔が出ていた）。 */
/* 出すのは更新日だけ。公開日と書き手は出さない（全案件共通の方針） */
.lu-page-blog .entry-meta-item-author,
.lu-page-blog .entry-meta-item-date{ display:none; }
.lu-page-blog .entry-meta{ font-size:12.5px; color:var(--lu-ink-faint); gap:12px;
                           justify-content:flex-start; }

/* ── 本文。行長720px＋左右の余白40pxで、外枠は800pxになる ── */
.lu-page-blog .entry-body{ max-width:800px; margin:0 auto; padding:0; }
.lu-page-blog .lu-article{
  padding:34px 40px 44px; border:1px solid var(--lu-rule); border-radius:12px;
}

/* ── Lightning が見出しに付ける下線・左罫・擬似要素を落とす ── */
.lu-article h2, .lu-article h3, .lu-article h4{
  background:none; border:0; padding:0; }
.lu-article h2::before, .lu-article h2::after,
.lu-article h3::before, .lu-article h3::after{ content:none; }

/* ── 目次とCTAを差し込んだあとの2カラム（functions.php が組む） ── */
.lu-page-blog .entry-body{ max-width:1112px; }
.lu-page-blog .lu-article-grid{ max-width:800px; margin:0 auto; }
@media (min-width:1100px){
  .lu-page-blog .lu-article-grid{
    display:grid; grid-template-columns:800px 280px; gap:32px;
    max-width:1112px; align-items:start;
  }
}
@media (max-width:1099px){ .lu-page-blog .lu-side{ display:none; } }

/* 🔴 Lightning は body に overflow-x:hidden を入れていて、これが position:sticky を殺す。
   hidden ではなく clip にすると、横のはみ出しは抑えたまま sticky が生きる
   （2026-08-24 実機で判明。追従目次がスクロールで流れてしまう症状の原因）。 */
body.lu-page-blog{ overflow:clip visible; }

/* 追従はサイド全体で行う（目次だけだと下のCTAが流れてしまう） */
.lu-page-blog .lu-side{ position:sticky; top:24px; }
.lu-page-blog .lu-side-toc{ position:static; max-height:calc(100vh - 280px); }
.lu-side__cta{ margin-top:24px; padding:18px; background:var(--lu-paper);
               border:1px solid var(--lu-rule); border-radius:10px; }
.lu-side__cta p{ font-size:13px; line-height:1.75; color:var(--lu-ink-soft); margin:0 0 12px; }
.lu-side__cta .lu-btn{ width:100%; min-height:44px; font-size:14px; }

/* 読了バー。Lightningのヘッダは追従しないので画面の上端に固定する */
.lu-page-blog .lu-progress{ position:fixed; top:0; left:0; z-index:9998; }
body.admin-bar .lu-page-blog .lu-progress{ top:32px; }

/* 紺地の上に置くボタン（記事末CTAの2つ目） */
.lu-btn--onnavy{ border-color:rgba(255,255,255,.38); }
.lu-btn--onnavy:hover{ border-color:rgba(255,255,255,.72); }

@media (max-width:767px){
  /* モバイルはカードの枠を外して端まで使う（§9）。地は body 側を紙色にしてあるので図解は馴染む */
  .lu-page-blog .entry-header{ padding:0 20px; }
  .lu-page-blog .entry-title{ font-size:26px; }
  .lu-page-blog .entry-body{ padding:0 20px; }
  .lu-page-blog .lu-article{ padding:20px 0 28px; border:0; border-radius:0; background:transparent; }
  .lu-page-blog .site-body{ background:var(--lu-paper); }
}
/* 関連記事カード（中央の正本＝_ref/seo/related-link/related_link.py・形は全案件共通） */
.lu-article .seo-rel{ position:relative; margin:2.4em 0; padding-top:30px; }
.lu-article .seo-rel__label{
  position:absolute; top:0; left:0; z-index:1; margin:0;
  padding:7px 18px; border-radius:6px 6px 0 0;
  background:#16233A; color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.08em; line-height:1.5;
}
.lu-article .seo-rel__link{
  display:flex; align-items:center; gap:18px;
  padding:16px 20px; border-radius:0 10px 10px 10px;
  background:#F5F5F6; border:1px solid #D5D7DC;
  color:#1a1a1a; text-decoration:none;
  font-size:16px; font-weight:700; line-height:1.6;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lu-article .seo-rel__link::before{            /* サムネが無いときの受け皿 */
  content:""; flex:0 0 auto; width:116px; height:65px; border-radius:6px;
  background:linear-gradient(135deg, #7F8693 0%, #16233A 100%);
}
.lu-article .seo-rel__link:has(.seo-rel__img)::before{ display:none; }
.lu-article .seo-rel__img{
  flex:0 0 auto; width:116px; height:65px; margin:0;
  border-radius:6px; object-fit:cover; display:block;
}
.lu-article .seo-rel__text{ flex:1 1 auto; min-width:0; }
.lu-article .seo-rel__link::after{
  content:"→"; flex:0 0 auto; margin-left:auto;
  color:#121C2E; font-size:18px; font-weight:400;
  transition:transform .2s ease;
}
.lu-article .seo-rel__link:hover{
  background:#fff; border-color:#7F8693;
  box-shadow:0 10px 28px rgba(0,0,0,.10); transform:translateY(-2px);
}
.lu-article .seo-rel__link:hover::after{ transform:translateX(4px); }

@media (max-width:767px){
  .lu-article .seo-rel{ margin:2em 0; padding-top:28px; }
  .lu-article .seo-rel__link{ position:relative; gap:12px; padding:13px 40px 13px 13px; font-size:14px; }
  .lu-article .seo-rel__link::before, .lu-article .seo-rel__img{ width:88px; height:49px; }
  .lu-article .seo-rel__link::after{ position:absolute; right:14px; top:50%;
                           margin-left:0; transform:translateY(-50%); }
}

/* 関連記事カード（中央の正本＝_ref/seo/related-link/related_link.py・形は全案件共通） */
.lu-article .seo-rel{ position:relative; margin:2.4em 0; padding-top:30px; }
.lu-article .seo-rel__label{
  position:absolute; top:0; left:0; z-index:1; margin:0;
  padding:7px 18px; border-radius:6px 6px 0 0;
  background:#16233A; color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.08em; line-height:1.5;
}
.lu-article .seo-rel__link{
  display:flex; align-items:center; gap:18px;
  padding:16px 20px; border-radius:0 10px 10px 10px;
  background:#F5F5F6; border:1px solid #D5D7DC;
  color:#1a1a1a; text-decoration:none;
  font-size:16px; font-weight:700; line-height:1.6;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lu-article .seo-rel__link::before{            /* サムネが無いときの受け皿 */
  content:""; flex:0 0 auto; width:116px; height:65px; border-radius:6px;
  background:linear-gradient(135deg, #7F8693 0%, #16233A 100%);
}
.lu-article .seo-rel__link:has(.seo-rel__img)::before{ display:none; }
.lu-article .seo-rel__img{
  flex:0 0 auto; width:116px; height:65px; margin:0;
  border-radius:6px; object-fit:cover; display:block;
}
.lu-article .seo-rel__text{ flex:1 1 auto; min-width:0; }
.lu-article .seo-rel__link::after{
  content:"→"; flex:0 0 auto; margin-left:auto;
  color:#121C2E; font-size:18px; font-weight:400;
  transition:transform .2s ease;
}
.lu-article .seo-rel__link:hover{
  background:#fff; border-color:#7F8693;
  box-shadow:0 10px 28px rgba(0,0,0,.10); transform:translateY(-2px);
}
.lu-article .seo-rel__link:hover::after{ transform:translateX(4px); }

@media (max-width:767px){
  .lu-article .seo-rel{ margin:2em 0; padding-top:28px; }
  .lu-article .seo-rel__link{ position:relative; gap:12px; padding:13px 40px 13px 13px; font-size:14px; }
  .lu-article .seo-rel__link::before, .lu-article .seo-rel__img{ width:88px; height:49px; }
  .lu-article .seo-rel__link::after{ position:absolute; right:14px; top:50%;
                           margin-left:0; transform:translateY(-50%); }
}