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

/* ==========================================================
   LifeBase Money Article Product UI v1.1 START
   ==========================================================
   正本Spec : 02_brand/MONEY_ARTICLE_PRODUCT_UI.md(採用Decision: D0019)
   ローカル正本: 10_publish/wp_theme/money_article_product_ui_v1.1.css
   実装先   : Cocoon Child(このSTART〜ENDブロックを1回だけ追記)
   Rollback : この START / END コメント境界の範囲だけを削除すれば元に戻る
   設計原則 :
   - 全て .lb- namespace(Cocoon/WordPressのGlobal要素へ指定しない)
   - CSS変数は --lb- prefix(既存変数と衝突させない)
   - p/ul/a は要素修飾セレクタ(p.lb-*)でテーマ標準余白・下線に負けない
   - 記事ごとのCSS追加は禁止。共通CSSはこの1箇所のみ
   ========================================================== */

:root {
  /* v1 Design Token(VISUAL_STYLE_GUIDE §5)の参照。値の変更はRID承認必須 */
  --lb-text: #2D3338;
  --lb-primary: #667B8C;
  --lb-primary-dark: #485E6F;
  --lb-surface: #EEF2F3;
  --lb-border: #D9DFE2;
  --lb-text-sub: #6B7378;
  --lb-photo-ph: #E8E1D5;   /* 生活写真Slot Placeholder(Warm-neutral) */
  --lb-swatch: #E3DFD6;     /* Size Family towel tone(neutral・おすすめ色ではない) */
  --lb-radius-s: 6px;
  --lb-radius-m: 10px;
}

/* ---- Component内のbox-sizing安定化(scope内のみ) ---- */
.lb-product-pick, .lb-product-pick *,
.lb-product-card, .lb-product-card *,
.lb-product-compact, .lb-product-compact *,
.lb-size-select, .lb-size-select *,
.lb-size-family, .lb-size-family *,
.lb-lifestyle-slot, .lb-lifestyle-slot *,
.lb-product-decision, .lb-product-decision * {
  box-sizing: border-box;
}

/* ==========================================================
   Text Rules(D0019 §17)
   ========================================================== */

/* Sentence Rhythm: 「。」で1文終了→改行(自然文のみ・空行は話題の変わり目のみ) */
.lb-s { display: block; }

/* Heading Break: 「条件 — 商品名」見出しの意味境界改行(同一Heading・Outline不変) */
.lb-hb__cond { display: block; }
.lb-hb__main { display: block; }

/* ==========================================================
   共通パーツ
   ========================================================== */

/* 商品画像枠: 白背景の商品単体写真を想定(白地+極細Border・contain) */
.lb-product-image {
  background: #FFFFFF;
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}
.lb-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  border: none;
  box-shadow: none;
}
.lb-product-image span {
  color: rgba(45, 51, 56, 0.45);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  padding: 0 14px;
  letter-spacing: 0.06em;
}
/* 生活写真Slot(実写真は全面表示) */
.lb-product-image--scene { background: var(--lb-photo-ph); border: none; padding: 0; }
.lb-product-image--scene img { object-fit: cover; }

/* 共通テキスト(pに直接付くclassは p.lb-* で指定=テーマのp余白に負けない) */
p.lb-product-brand { font-size: 13px; color: var(--lb-text-sub); margin: 0 0 2px; }
p.lb-product-name { font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--lb-text); margin: 0 0 10px; }
p.lb-product-reason { font-size: 15px; line-height: 1.75; color: var(--lb-text); margin: 0 0 12px; }
p.lb-product-for {
  font-size: 14px;
  font-weight: 500;
  color: var(--lb-primary-dark);
  border-left: 2px solid var(--lb-primary);
  padding-left: 10px;
  margin: 0 0 14px;
  line-height: 1.6;
}
ul.lb-product-facts { list-style: none; margin: 0 0 14px; padding: 0; }
ul.lb-product-facts li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--lb-text);
  margin: 0;
  padding: 5px 0;
  border-top: 1px solid var(--lb-border);
}
ul.lb-product-facts li:last-child { border-bottom: 1px solid var(--lb-border); }
p.lb-product-caution { font-size: 13px; color: var(--lb-text-sub); line-height: 1.7; margin: 0; }

/* CTA(Primary=PICK / Secondary=Standard Card。Compactには置かない) */
a.lb-product-cta {
  display: inline-block;
  border-radius: var(--lb-radius-s);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  padding: 13px 26px;
  text-align: center;
  text-decoration: none;
}
a.lb-product-cta--primary { background: var(--lb-primary-dark); color: #FFFFFF; }
a.lb-product-cta--primary:hover,
a.lb-product-cta--primary:focus { background: var(--lb-text); color: #FFFFFF; text-decoration: none; }
a.lb-product-cta--secondary { background: #FFFFFF; border: 1px solid var(--lb-primary); color: var(--lb-primary-dark); }
a.lb-product-cta--secondary:hover,
a.lb-product-cta--secondary:focus { background: var(--lb-surface); color: var(--lb-primary-dark); text-decoration: none; }
a.lb-product-cta:focus-visible { outline: 2px solid var(--lb-primary-dark); outline-offset: 2px; }

a.lb-product-jump { font-size: 13.5px; color: var(--lb-primary-dark); text-decoration: none; }
a.lb-product-jump:hover { color: var(--lb-text); }
a.lb-product-jump::after { content: " ↓"; font-size: 12px; }
a.lb-product-jump:focus-visible { outline: 2px solid var(--lb-primary-dark); outline-offset: 2px; }

/* ==========================================================
   1. LifeBase PICK
   ========================================================== */
.lb-product-pick {
  background: #FFFFFF;
  border: 1px solid var(--lb-border);
  border-top: 2px solid var(--lb-primary);
  border-radius: var(--lb-radius-s);
  padding: 24px 28px 26px;
  margin: 34px 0 44px;
}
.lb-product-pick__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
span.lb-product-pick__flag {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--lb-primary-dark);
  background: var(--lb-surface);
  border-radius: 3px;
  padding: 3px 10px;
}
span.lb-product-pick__label { font-size: 14px; font-weight: 600; color: var(--lb-text); }
.lb-product-pick__main {
  display: grid;
  grid-template-columns: minmax(240px, 42%) 1fr; /* 商品写真=約42%(D0019) */
  gap: 28px;
  margin-bottom: 20px;
}
.lb-product-pick .lb-product-image { aspect-ratio: 4 / 3; }
.lb-product-pick__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
}

/* ==========================================================
   2. Standard Product Card
   ========================================================== */
.lb-product-card {
  background: #FFFFFF;
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-s);
  padding: 20px 24px 22px;
  margin: 30px 0 40px;
}
p.lb-product-card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--lb-primary-dark);
  letter-spacing: 0.04em;
  margin: 0 0 14px;
}
.lb-product-card__main {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  margin-bottom: 16px;
}
/* IMG-CROP-1(2026-09-13): Standard Cardの商品画像をcropしない */
.lb-product-card .lb-product-image { aspect-ratio: auto; align-self: start; }
.lb-product-card .lb-product-image > a { display: block; width: 100%; }
.lb-product-card .lb-product-image img { height: auto; }
.lb-product-card p.lb-product-name { font-size: 16.5px; }
.lb-product-card ul.lb-product-facts li { font-size: 13px; padding: 4px 0; }

/* ==========================================================
   3. Compact Option Card
   ========================================================== */
.lb-product-compact {
  background: var(--lb-surface);
  border-radius: var(--lb-radius-s);
  padding: 16px 20px;
  margin: 26px 0 36px;
}
p.lb-product-compact__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lb-primary-dark);
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.lb-product-compact p.lb-product-name { font-size: 15.5px; margin-bottom: 4px; }
p.lb-product-compact__facts { font-size: 13.5px; color: var(--lb-text); margin: 0 0 6px; }
p.lb-product-compact__note { font-size: 13px; color: var(--lb-text-sub); line-height: 1.7; margin: 0; }

/* ==========================================================
   4. Size Selector
   ========================================================== */
.lb-size-select { margin: 30px 0 40px; }
p.lb-size-select__title { font-size: 14.5px; font-weight: 600; color: var(--lb-text); margin: 0 0 14px; }
.lb-size-select__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.lb-size-option {
  background: #FFFFFF;
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-s);
  padding: 14px 16px;
}
.lb-size-option--pick { border: 1.5px solid var(--lb-primary); }
p.lb-size-option__tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lb-primary-dark);
  background: var(--lb-surface);
  border-radius: 3px;
  padding: 2px 8px;
  margin: 0 0 8px;
}
p.lb-size-option__name { font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--lb-text); margin: 0; }
p.lb-size-option__dim { font-size: 13px; color: var(--lb-text-sub); margin: 2px 0 6px; }
p.lb-size-option__price { font-size: 15px; font-weight: 600; color: var(--lb-text); white-space: nowrap; margin: 0; }
p.lb-size-option__note { font-size: 12.5px; color: var(--lb-text-sub); line-height: 1.6; margin: 4px 0 0; }
p.lb-size-select__series { font-size: 13.5px; color: var(--lb-text); margin: 0 0 4px; }
p.lb-size-select__pricenote { font-size: 12.5px; color: var(--lb-text-sub); margin: 0; }

/* ==========================================================
   5. Size Family Diagram(色見本に見せない: 同一toneで幅×高さのサイズ差)
   ========================================================== */
.lb-size-family { margin: 30px 0 10px; }
p.lb-size-family__title { font-size: 14.5px; font-weight: 600; color: var(--lb-text); margin: 0 0 14px; }
.lb-size-family__row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.lb-size-family__item { text-align: center; }
.lb-size-family__towel {
  background: var(--lb-swatch);
  border: 1px solid rgba(45, 51, 56, 0.10);
  border-radius: 3px;
  margin: 0 auto 6px;
}
.lb-size-family__towel--hand { width: 26px; height: 28px; }
.lb-size-family__towel--face { width: 30px; height: 52px; }
.lb-size-family__towel--bigface { width: 36px; height: 76px; }
.lb-size-family__towel--minibath { width: 44px; height: 76px; }
.lb-size-family__towel--bath { width: 56px; height: 88px; }
p.lb-size-family__name { font-size: 11.5px; color: var(--lb-text-sub); line-height: 1.4; margin: 0; }
p.lb-size-family__caption { font-size: 12.5px; color: var(--lb-text-sub); margin: 10px 0 0; }

/* ==========================================================
   6. Lifestyle Image Slot
   ========================================================== */
.lb-lifestyle-slot { margin: 26px 0 40px; }
.lb-lifestyle-slot .lb-product-image { aspect-ratio: 3 / 2; border-radius: var(--lb-radius-m); }
p.lb-lifestyle-slot__caption { font-size: 13px; color: var(--lb-text-sub); margin: 10px 0 0; line-height: 1.6; }

/* ==========================================================
   7. Decision UI(選択を確定する3行・ランキングにしない)
   ========================================================== */
.lb-product-decision {
  border-top: 1px solid var(--lb-border);
  margin: 30px 0 40px;
}
.lb-decision-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 18px;
  align-items: baseline;
  padding: 14px 2px 13px;
  border-bottom: 1px solid var(--lb-border);
}
p.lb-decision-row__label { font-size: 13px; font-weight: 500; color: var(--lb-text-sub); margin: 0; }
p.lb-decision-row__name { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--lb-text); margin: 0; }
.lb-decision-row--pick p.lb-decision-row__name { color: var(--lb-primary-dark); }
p.lb-decision-row__reason {
  grid-column: 2;
  font-size: 13.5px;
  color: var(--lb-text-sub);
  line-height: 1.6;
  margin: 2px 0 0;
}
p.lb-decision-row__action {
  grid-column: 2;
}

/* ==========================================================
   Mobile(〜640px・確認Viewport 386px / content約339px)
   ========================================================== */
@media (max-width: 640px) {

  /* PICK: 写真上部4:3→情報→CTAフル幅 */
  .lb-product-pick { padding: 20px 18px 22px; }
  .lb-product-pick__main { grid-template-columns: 1fr; gap: 16px; }
  .lb-product-pick .lb-product-image { aspect-ratio: 4 / 3; }
  .lb-product-pick__actions { flex-direction: column; align-items: stretch; }
  a.lb-product-cta { display: block; width: 100%; font-size: 14.5px; padding: 13px 14px; }
  a.lb-product-jump { text-align: center; }

  /* Standard Card: 縦積み */
  .lb-product-card { padding: 18px 16px 20px; }
  .lb-product-card__main { grid-template-columns: 1fr; gap: 14px; }
  .lb-product-card .lb-product-image { aspect-ratio: auto; } /* IMG-CROP-1: Mobileも枠固定比を解除(上下crop 0) */

  /* Size Selector: Stack(商品名|価格を同一行に) */
  .lb-size-select__options { grid-template-columns: 1fr; gap: 10px; }
  .lb-size-option { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; }
  p.lb-size-option__tag { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  p.lb-size-option__name { grid-column: 1; grid-row: 2; }
  p.lb-size-option__price { grid-column: 2; grid-row: 2; align-self: center; }
  p.lb-size-option__dim { grid-column: 1; grid-row: 3; margin: 2px 0 0; }
  p.lb-size-option__note { grid-column: 1 / -1; grid-row: 4; }

  /* Decision UI: Label→商品名→理由の縦Stack */
  .lb-decision-row { grid-template-columns: 1fr; row-gap: 2px; }
  p.lb-decision-row__reason { grid-column: 1; }
  p.lb-decision-row__action { grid-column: 1; }

  /* Size Family Diagram: 縮小(比率維持) */
  .lb-size-family__row { gap: 10px; }
  .lb-size-family__towel--hand { width: 22px; height: 24px; }
  .lb-size-family__towel--face { width: 26px; height: 42px; }
  .lb-size-family__towel--bigface { width: 30px; height: 62px; }
  .lb-size-family__towel--minibath { width: 36px; height: 62px; }
  .lb-size-family__towel--bath { width: 46px; height: 72px; }
}

/* ==========================================================
   LifeBase Money Article Product UI v1.1 END
   ========================================================== */

/* ==========================================================
   LifeBase Site UI v1 — PRODUCTION FINAL CANDIDATE
   ==========================================================
   Status   : **NOT YET LIVE — RID IMPLEMENTATION APPROVAL REQUIRED**
   作成     : 2026-08-29 / 更新: 2026-08-29(2)=STEP 0 Preflight(R0023)反映
              (①Mobile Eye Catch Full Bleed=Cocoon Setting不存在→CSS責務=モジュール10新設
               ②TOP Sidebar=front-page.php側server-side非出力へ変更{CSS hide撤去}
               ③Footer供給=child tmp/footer-bottom.php override{selector不変}
               ④現状Live背景=body #F4F5F7実測→Canvas #FCFAF6のCSS明示が必須と確認)
              / 2026-08-30(3)=Preflight第2回(R0023 §11)反映
              (⑤Footer供給=経路B{cocoon_part__tmp/footer-bottomフィルタ追記}へ変更
               =モジュール7コメント更新{selector・order=不変}
               ⑥#navi抑止のV4実測確定+caveat追記
               ⑦Searchフィルタ経路=cocoon_part__searchformへ変更{selector不変})
              / 2026-08-30(4)=Final Preflight(R0023 §12)反映
              (⑧QA-B1: .lbui-header-rightルール追加{モジュール2}
               ⑨S6設定値=vertical_card_3(縦型カード3列)をモジュール6コメントへ明示)
   正本Plan : WP_UI_LIVE_IMPLEMENTATION_PLAN_V1.md(PLAN FINAL)
   実行     : WP_UI_LIVE_IMPLEMENTATION_HANDOFF_V1.md(RID承認後のみ)
   Evidence : R0016(Cocoon能力)/R0017(Article UI VALIDATED)/
              R0018(Header/Footer構造)/R0019(TOP+Common UI VALIDATED・案B実測)/
              R0023(STEP 0 Production Preflight)
   前提     : Header=方式B(Child PHP hooks=lifebase_ui_hooks_v1_candidate.php・
              wp_header_logo_before_open/wp_header_logo_after_open)/
              TOP=front-page.php(lifebase_front_page_v1_candidate.php・wrapperなし)/
              Footer=lifebase_ui_hooks_v1_candidate.php内の
              `cocoon_part__tmp/footer-bottom` filterによる2要素追記(第一候補)。
              child tmp/footer-bottom.php=FALLBACKのみ/
              Drawer JS=lifebase_drawer_v1_candidate.js
   Token    : 色=既存 --lb-*(子テーマ実装済み)を再利用・**本ファイルで再定義しない**。
              --lb-* にない色=VISUAL_STYLE_GUIDE v1.3参照のリテラル。
              UI固有値のみ --lbui-*。
   保護     : `.lb-` namespace(Money UI v1.1)へ一切干渉しない。
              Global握りつぶし(`* { }`・border-radius:0 !important等)なし。
   投入方法 : Cocoon Child「追加CSS」へ本ファイル全文を1ブロック追記
              (START/ENDブロック単位Rollback=Money UI v1.1前例)。
   歴史資材 : lifebase_site_ui_v1_candidate.css / *_prototype.css / *_prototype.js
              =Historical(無改変保持・本ファイルが後継)
   VERIFY   : 「★VERIFY(Step 0)」コメント=Handoff Step 0 Preflightで実測確認する箇所
   ========================================================== */

/* ==========================================================
   1. FOUNDATION START
   ========================================================== */
:root {
  --lbui-header-h-m: 56px;   /* Mobile Header(R0019実測: 56px成立) */
  --lbui-header-h-d: 68px;   /* Desktop Header(R0019実測: 68px成立) */
  --lbui-article-w: 720px;   /* Desktop本文幅(R0017: 720px推奨=1行約41字) */
  --lbui-top-w: 960px;       /* Desktop TOPコンテンツ幅(R0019実測で成立) */
  --lbui-space-1: 8px;
  --lbui-space-2: 16px;
  --lbui-space-3: 24px;
  --lbui-space-4: 32px;
  --lbui-space-6: 48px;
  --lbui-space-8: 64px;
  /* VR-1(HOME v1.1・D0027): TOP title hover専用interaction色。
     #485E6F→#667B8C間のt=0.7導出値。#FCFAF6上contrast=4.80:1
     (AA 4.5:1+margin・4.6:1目安クリア。#667B8C=4.22:1=Recent 16px titleでAA未達のため不採用) */
  --lbui-link-hover: #5D7283;
}

/* Background=2層構造(D0026案・Plan §7決定):
   Site Canvas=#FCFAF6(正本Token・VSG §5)/Reading・Product Surface=#FFFFFF。
   R0023実測: 現状Live=body #F4F5F7/#main #FFFFFF→Canvas側はCSS明示が必須(本ルール)。
   記事ページの.main白=意図的なReading Surfaceとして明示維持(Money UI白Card環境=不変)。
   TOPの.mainのみCanvas側へ編入(モジュール9) */
body {
  background: #FCFAF6;
}
body.single .main {
  background: #FFFFFF;             /* Reading Surface明示(Cocoon既定依存をやめ固定) */
}

/* ==========================================================
   1. FOUNDATION END
   ========================================================== */

/* ==========================================================
   2. HEADER START(方式B=Child PHP hooks・R0019 A11y水準)
   ==========================================================
   DOM前提(lifebase_ui_hooks_v1_candidate.php):
   #header-in 内=[wp_header_logo_before_open→☰ button]+[既存logo]+
   [wp_header_logo_after_open→desktop nav+検索button]。
   Cocoon標準mobile buttons=不使用(mobile_button_layout_type=none)。
   Sticky=非採用(Spec §6B: v1は静的Header・CLS回避)。fixedバー・body padding=なし。
   ========================================================== */

#header-in {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: var(--lbui-header-h-m);
  padding: 0 8px 0 16px;
  gap: 4px;
}
/* Delta H1(STEP 2 Live実測): #header-inはCocoon由来class="header-in wrap cf"を持ち、
   Cocoon .cf::after(clear:both; content:""; display:block=clearfix。Cocoon sourceで
   ::afterのみ生成・::before=なしを確認)が上のflex化でflex itemとして数えられ、
   justify-content:space-betweenの右端がpseudo elementに奪われる
   (Desktop=header-rightが約268px内側/Mobile=約42px内側)。
   flex containerはfloatを内包しないためclearfixは#header-inでは不要=無効化。
   scope=#header-inのみ(global .cf不変更・!important不使用) */
#header-in::after {
  display: none;
}
#header-container {
  background: #FCFAF6;
  border-bottom: 1px solid var(--lb-border);
}
#header .logo-header {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  text-align: left;
}
/* ロゴ=TOP h1/記事divでタグが変わるため .logo-header 基準(R0018 §16) */
#header .logo-header .site-name-text {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--lb-text);
}
#header .logo-header a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;                /* Touch target */
}

/* Header buttons(☰/検索=<button>・R0019でkeyboard/aria/Touch44全PASSの構造) */
.lbui-header-btn {
  background: none;
  border: none;
  font-family: inherit;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--lb-text);
  cursor: pointer;
  padding: 2px 6px;
}
.lbui-header-btn .fa {
  font-size: 20px;                 /* FA4.7 span.fa(fa-bars/fa-search)・絵文字不使用 */
}
.lbui-header-btn .lbui-caption {
  display: block;
  font-size: 11px;                 /* R0019 OP-1: 9px→11px(可読性・「薄小化で上品」禁止) */
  color: var(--lb-text-sub);
  margin-top: 1px;
}
.lbui-header-btn:focus-visible,
#header .logo-header a:focus-visible {
  outline: 2px solid var(--lb-primary-dark);
  outline-offset: 2px;
}

/* Header右ブロック(QA-B1・Final Preflightで追加):
   hook出力=<div class="lbui-header-right">[nav.lbui-desktop-nav][button.lbui-search-btn]</div>
   の1行コンテナ。未定義だとDesktopでnavとSearch buttonが別行になりうる(静的解析指摘)。
   Mobile=nav非表示のためSearch buttonのみを内包(余計な全幅を取らない=width指定なし)。
   左右配置=#header-inのjustify-content:space-betweenが担当(本ルールへ追加しない) */
.lbui-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Desktop nav(hookが#header-in末尾へ出力・wp_nav_menu(navi-header)) */
.lbui-desktop-nav {
  display: none;                   /* Mobile=非表示(Drawerが全導線) */
}

/* Cocoon側 nav#navi の抑止(V4=VERIFIED・R0023 §11.4):
   navi-headerへMenuを割り当てるとCocoonが nav#navi>#navi-in へ別行のグローバルナビを
   出力する(tmp/navi.php L12=NAV_MENU_HEADER/L29=NAV_MENU_HEADER_MOBILE)。
   Desktop navは方式Bのhookが#header-in内へ出力するため、Cocoon側の二重描画を抑止。
   Live実測: nav#navi=1個・.lbui-*との衝突=0=対象限定可。
   ⚠caveat: 本ruleでnavi-header/navi-header-mobileの両Location描画が隠れる
   (LifeBase設計=navi-header:Child hookが描画/navi-header-mobile:不使用=影響なし) */
#navi {
  display: none;
}

@media (min-width: 1024px) {
  #header-in {
    min-height: var(--lbui-header-h-d);
    padding: 0 24px;
    max-width: var(--lbui-top-w);
    margin: 0 auto;
  }
  #header .logo-header .site-name-text {
    font-size: 20px;
  }
  /* Desktop=LifeBase左+minimal Nav右。☰=Desktop非表示(inline navが導線) */
  .lbui-menu-btn {
    display: none;
  }
  .lbui-desktop-nav {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .lbui-desktop-nav ul {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lbui-desktop-nav a {
    font-size: 14px;
    color: var(--lb-text);
    text-decoration: none;
    padding: 12px 10px;
    display: inline-block;
  }
  .lbui-desktop-nav a:hover {
    color: var(--lb-primary-dark);
  }
  .lbui-desktop-nav a:focus-visible {
    outline: 2px solid var(--lb-primary-dark);
    outline-offset: 2px;
  }
  /* Desktop検索button=幅44px以上(R0019 SF-6解消) */
  .lbui-search-btn {
    min-width: 44px;
  }
  .lbui-header-btn .lbui-caption {
    display: none;                 /* Desktopはアイコン+aria-label(captionはMobileのみ) */
  }
}

/* ==========================================================
   2. HEADER END
   ========================================================== */

/* ==========================================================
   3. DRAWER / SEARCH / SCRIM START(wp_footerフック出力+lifebase-drawer.js)
   ==========================================================
   A11y要件(R0019 SF-8解消): focus trap/Escape/scrim/背面scroll lock=JS担当。
   DOM=body末尾出力だがdialogはbutton起動時にJSがfocusを移すため
   visual order≒操作order成立(barそのものは#header-in=文書先頭側=SF-7解消)。
   ========================================================== */

.lbui-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(280px, 85vw);         /* R0019 OP-5: 300→280px採用 */
  height: 100%;
  background: #FFFFFF;
  z-index: 10000;
  padding: 20px;
  border-left: 1px solid var(--lb-border);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  overflow-y: auto;
}
.lbui-drawer.lbui-open {
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .lbui-drawer {
    transition: none;
  }
}
.lbui-drawer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lbui-drawer a {
  display: block;
  padding: 12px 4px;               /* 実効44px相当(R0019 §13 PASS) */
  font-size: 15px;
  color: var(--lb-text);
  text-decoration: none;
  border-bottom: 1px solid var(--lb-border);
}
.lbui-drawer a:focus-visible {
  outline: 2px solid var(--lb-primary-dark);
  outline-offset: 2px;
}
.lbui-drawer-close {
  background: none;
  border: none;
  font-family: inherit;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--lb-text);
  margin-bottom: 8px;
}
.lbui-drawer-close:focus-visible {
  outline: 2px solid var(--lb-primary-dark);
  outline-offset: 2px;
}

/* Scrim(R0019 SF-8: overlayなし→追加) */
.lbui-scrim {
  position: fixed;
  inset: 0;
  background: rgba(45, 51, 56, 0.4); /* --lb-text系の暗幕(装飾でなく機能) */
  z-index: 9998;
  display: none;
}
.lbui-scrim.lbui-open {
  display: block;
}

/* 背面scroll lock(JSがhtmlへ付与) */
html.lbui-lock,
html.lbui-lock body {
  overflow: hidden;
}

/* Search panel(中身=Child Search Panelが cocoon_template_part('searchform') を呼び、
   panel描画時のみ cocoon_part__searchform filterをadd/removeしてaria-labelを置換。
   WP get_search_form()=Cocoon非存在時のfallback branchのみ。送信=WordPress標準 /?s= ) */
.lbui-search-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-bottom: 1px solid var(--lb-border);
  padding: 20px 16px;
  z-index: 9999;
  display: none;
}
.lbui-search-panel.lbui-open {
  display: block;
}
/* R0023実測確定: Cocoon searchform実出力=form.search-box.input-box>
   input[type=text][name=s].search-edit+button.search-submit(selector確定・VERIFY解消)。
   出力経路=cocoon_template_part('searchform')・accessible name修正=
   lifebase_ui_hooks_v1_candidate.php(scoped cocoon_part__searchform filter) */
.lbui-search-panel .search-box input[type="text"],
.lbui-search-panel .search-box input[type="search"] {
  width: 100%;
  font-size: 16px;                 /* iOSズーム回避(R0019 §14) */
  padding: 10px 12px;
  border: 1px solid var(--lb-border);
  background: #FFFFFF;
}

/* ==========================================================
   3. DRAWER / SEARCH / SCRIM END
   ========================================================== */

/* ==========================================================
   4. ARTICLE HERO START(R0017 VALIDATED)
   ========================================================== */

body.single h1.entry-title,
body.single .article h1 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
  margin: var(--lbui-space-2) 0 var(--lbui-space-1);
}

/* Date meta: 13px Secondary(実測Contrast 4.83:1 PASS=R0017) */
body.single .article .date-tags,
body.single .article .post-date,
body.single .article .post-update {
  font-size: 13px;
  color: var(--lb-text-sub);
}

/* メタicon撤去(実DOM=span.fa・R0017 M2。Global禁止=メタ要素内限定) */
body.single .article .date-tags .fa,
body.single .article .post-date .fa,
body.single .article .post-update .fa,
body.single .article .author-info .fa,
body.single .article .entry-categories-tags .fa {
  display: none;
}
#breadcrumb .fa-home {
  display: none;
}

/* ==========================================================
   4. ARTICLE HERO END
   ========================================================== */

/* ==========================================================
   5. ARTICLE TYPOGRAPHY START(R0017 VALIDATED)
   ========================================================== */

/* H2: Gray帯撤去(Cocoon本体.article h2 #f5f6f7・設定なし=CSS必須) */
.article h2 {
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  margin: var(--lbui-space-6) 0 var(--lbui-space-3);
}
.article h3 {
  border: none;
  padding: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  margin: var(--lbui-space-4) 0 var(--lbui-space-2);
}

/* Body Link: #485E6F+下線(色Base=site_link_color設定・本ルール=offset/hover/focus補完。
   Affiliateテキストリンク(classなし4本)にも適用=特例なし・実装後Click/CV評価対象) */
.article a:not([class]) {
  color: var(--lb-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article a:not([class]):hover {
  color: var(--lb-text);
}
.article a:not([class]):focus-visible {
  outline: 2px solid var(--lb-primary-dark);
  outline-offset: 2px;
}

/* TOC: LifeBase Editorial Index v1.1 — Cocoon標準の箱型UIを視覚のみ再設計。
   DOM / checkbox開閉 / heading anchorは維持し、PHP・記事本文には触れない。 */
body.single .article .toc {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 48px 0 56px;
  padding: 26px 0 28px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--lb-border);
  border-bottom: 1px solid var(--lb-border);
  box-shadow: none;
  text-align: left;
}

body.single .article .toc .toc-title {
  position: relative;
  display: block;
  margin: 0 0 22px;
  padding: 18px 44px 0 0;
  background: none;
  border: 0;
  color: var(--lb-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
}

body.single .article .toc .toc-title::before {
  content: "CONTENTS";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--lb-text-sub);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
}

body.single .article .toc .toc-title::after {
  position: absolute;
  top: 10px;
  right: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lb-text-sub);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
body.single .article .toc .toc-checkbox:checked + .toc-title::after {
  content: "−";
}
body.single .article .toc .toc-checkbox:not(:checked) + .toc-title::after {
  content: "+";
}

body.single .article .toc .toc-content {
  margin: 0;
  padding: 0;
}
body.single .article .toc .toc-list {
  counter-reset: lb-toc-h2;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.single .article .toc .toc-list > li {
  counter-increment: lb-toc-h2;
  position: relative;
  margin: 0 0 14px;
  padding: 0 0 0 44px;
}
body.single .article .toc .toc-list > li:last-child {
  margin-bottom: 0;
}
body.single .article .toc .toc-list > li::before {
  content: counter(lb-toc-h2, decimal-leading-zero);
  position: absolute;
  top: 0.28em;
  left: 0;
  color: var(--lb-text-sub);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

body.single .article .toc a {
  color: var(--lb-text);
  text-decoration: none;
}
body.single .article .toc .toc-list > li > a {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}
body.single .article .toc a:hover {
  color: var(--lb-primary-dark);
}
body.single .article .toc a:focus-visible {
  outline: 2px solid var(--lb-primary-dark);
  outline-offset: 3px;
}

body.single .article .toc .toc-list ol {
  list-style: none;
  margin: 8px 0 2px;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--lb-border);
}
body.single .article .toc .toc-list ol li {
  margin: 6px 0;
  padding: 0;
}
body.single .article .toc .toc-list ol li::before {
  content: none;
}
body.single .article .toc .toc-list ol a {
  display: block;
  color: var(--lb-text-sub);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
}
body.single .article .toc .toc-list ol a:hover {
  color: var(--lb-primary-dark);
}

@media (max-width: 767px) {
  body.single .article .toc {
    margin: 40px 0 48px;
    padding: 24px 0 26px;
  }
  body.single .article .toc .toc-title {
    margin-bottom: 20px;
    padding-right: 40px;
    font-size: 16px;
  }
  body.single .article .toc .toc-list > li {
    margin-bottom: 13px;
    padding-left: 38px;
  }
  body.single .article .toc .toc-list > li::before {
    font-size: 10px;
  }
  body.single .article .toc .toc-list > li > a {
    font-size: 15px;
  }
  body.single .article .toc .toc-list ol {
    margin-top: 7px;
    padding-left: 14px;
  }
  body.single .article .toc .toc-list ol a {
    font-size: 14px;
  }
}

/* ==========================================================
   5. ARTICLE TYPOGRAPHY END
   ========================================================== */

/* ==========================================================
   6. RELATED START(「次に読む」・R0017方針)
   ==========================================================
   ★VERIFY(Step 6): related_entry_type=**vertical_card_3(縦型カード3列)**へ変更後の
   実DOM/classでselector再検証(最終Desktop 2カラム=モジュール8のgridが上書き)。
   RelatedのCategory=残す(.cat-labelのGlobal hide禁止=R0017 M8)
   ========================================================== */

#related-entries .related-entry-heading {
  font-size: 18px;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  margin: var(--lbui-space-6) 0 var(--lbui-space-2);
}
#related-entries .related-entry-card-thumb img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
#related-entries article.related-entry-card {
  border: none;
  box-shadow: none;
  background: none;
  margin-bottom: var(--lbui-space-2);
}
#related-entries .card-title,
#related-entries .related-entry-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

/* ==========================================================
   6. RELATED END
   ========================================================== */

/* ==========================================================
   7. FOOTER START(案B=R0019到達実測+供給=経路B filter追記)
   ==========================================================
   目標順: LifeBase→暮らしを整える→Nav→Divider→Disclosure→©
   tagline/divider供給=`cocoon_part__tmp/footer-bottom`フィルタ追記
   (lifebase_ui_hooks_v1_candidate.php §3・R0023 §11.1=第2回Preflightで
   フィルタ実在をLive実測→第一候補化。template override=fallback)。
   追記位置=親footer.php L67のcocoon_template_part出力直後=.footer-bottomの直後
   =**#footer-in直下の直接子**(R0019検証{#footer-in末尾挿入}と同一flex文脈。
   本2要素はdisplay:contentsに依存せずorderが直接効く)。
   旧hook供給方式(R0023 §3)=撤去済み。Widget供給=不採用(footer系Areaは
   PC/Mobile排他2重+Disclosureと同一コンテナ=order分離不能)。
   PC(.footer-widgets)/Mobile(.footer-widgets-mobile)両方=order 5で最終順成立
   (R0019両Viewport実測)
   ========================================================== */

.footer {
  background: #FCFAF6;
  color: var(--lb-text);
}
.footer .logo-footer .site-name-text {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* --- 7b. FOOTER ORDER(案B) --- */
#footer-in {
  display: flex;
  flex-direction: column;
}
.footer-bottom,
.footer-bottom-content {
  display: contents;
}
/* R0019 §18-4=案B必須2行(欠けるとDesktopで重大副作用):
   ①.footer-bottom-logo=Cocoon fdt-logoのposition:absoluteが、包含ブロック
     (.footer-bottom)のdisplay:contents化で初期包含ブロック基準となり
     本文中(実測x40/y748)へ飛ぶ→position:staticで解除
   ②flex column化で.footer-widgetsのmargin:0 autoが幅656pxへ収縮し
     Disclosureが潰れる→width:100%で復元
   ※Cocoon内部実装依存=Cocoonアップデート時は必ずFooter順序をRegression確認 */
.footer-bottom-logo {
  position: static;
  order: 1;
}
.lbui-footer-tagline {
  order: 2;
  font-size: 13px;
  color: var(--lb-text-sub);
  text-align: center;
  margin: 4px 0 var(--lbui-space-3);
}
#navi-footer {
  order: 3;
}
.lbui-footer-divider {
  order: 4;
  width: min(360px, 80%);
  border: none;
  border-top: 1px solid var(--lb-border);
  margin: var(--lbui-space-3) auto;
}
.footer-widgets,
.footer-widgets-mobile {
  width: 100%;
  order: 5;
}
.source-org.copyright {
  order: 6;
}

/* --- 7c. FOOTER NAV(R0017 M3+R0019 §18-3実測反映) --- */
@media (max-width: 834px) {
  .footer .navi-footer-in > .menu-footer {
    display: block;
    text-align: center;
  }
  .footer .navi-footer-in > .menu-footer li.menu-item {
    display: block;
    white-space: nowrap;           /* 語中改行禁止 */
    margin: 0;
    width: auto;                   /* Cocoon .fnm-text-widthのli固定幅(173px)解除 */
  }
}
.footer .navi-footer-in a,
.footer .navi-footer-in > .menu-footer li.menu-item > a {
  display: inline-block;
  font-size: 14px;
  color: var(--lb-text);
  text-decoration: none;
  padding: 10px 8px;               /* 実効45px=Touch 44px以上(R0019実測) */
}
.footer .navi-footer-in a:focus-visible {
  outline: 2px solid var(--lb-primary-dark);
  outline-offset: 2px;
}
@media (min-width: 835px) {
  .footer .navi-footer-in > .menu-footer li.menu-item {
    display: inline-block;
    margin: 0 8px;
  }
}

/* VR-2(HOME v1.1・D0027): Desktop Footer Nav中央化。Cocoon親
   .navi-footer-in > .menu-footer{display:flex;justify-content:flex-end}=(0,2,0)が
   Desktop≥1024pxでNav群を右寄せ(Live実測: 5リンクunion center=864.5 vs
   footer/viewport center=632.5=+232px offset)。→(0,3,0)で中央へ。
   !important不使用・left/right/transformの手動offset=禁止・
   Mobile≤834px(縦積み中央)/Tablet 835〜1023px(Cocoon側center)=不変更=1024px以上限定 */
@media (min-width: 1024px) {
  .footer .navi-footer-in > .menu-footer {
    justify-content: center;
  }
}

/* --- 7d. DISCLOSURE / COPYRIGHT --- */
/* Disclosure=block-7(PC)/block-8(Mobile)両方に効くselector(R0018 §10)。
   削除・隠蔽禁止。13px/--lb-text-sub=4.63:1 AA PASS実測(R0019)・実装後再実測必須 */
.footer .widget-footer-center,
.footer .widget-footer-mobile {
  font-size: 13px;
  line-height: 1.7;
  color: var(--lb-text-sub);
  text-align: center;
  margin: 0 auto var(--lbui-space-2);
  max-width: 560px;
}
.footer .copyright {
  font-size: 12px;
  color: var(--lb-text-sub);
  text-align: center;
  padding-bottom: var(--lbui-space-3);
}

/* ==========================================================
   7. FOOTER END
   ========================================================== */

/* ==========================================================
   8. DESKTOP ARTICLE LAYOUT START(D0024 Decision 4・720px)
   ========================================================== */

@media (min-width: 1024px) {
  /* Delta C2(STEP 4後・RID Desktop実機確認): S3=no_display_singlesにより
     Single記事でもbodyへno-sidebarが付与され(STEP 1 Live実測)、Cocoon親
     .no-sidebar .content .main{margin:0;width:100%}=(0,3,0)が旧selector
     body.single .main=(0,2,1)のmargin:autoに勝ち、720px Reading Surfaceが
     左寄せになる(720px幅自体=仕様どおり・C1と同型のspecificity干渉)。
     →body.single.no-sidebar .content .main=(0,4,1)で親を確実に上回る。
     !important不使用・scope=body.single限定(TOP/Page/Header/Footer/Money UI
     波及なし)・global .no-sidebar不変更・D0024 Decision 4(Article Desktop
     1カラム720px中央Reading Surface)を成立させるBug Fix */
  body.single.no-sidebar .content .main {
    float: none;
    width: 100%;
    max-width: var(--lbui-article-w);
    margin-left: auto;
    margin-right: auto;
  }
  body.single h1.entry-title,
  body.single .article h1 {
    font-size: 32px;
  }
  .article h2 {
    font-size: 26px;
  }
  .article h3 {
    font-size: 20px;
  }
  #related-entries .related-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--lbui-space-3);
  }
}

/* ==========================================================
   8. DESKTOP ARTICLE LAYOUT END
   ========================================================== */

/* ==========================================================
   9. TOP(front-page.php)START(R0019 VALIDATED構成)
   ==========================================================
   DOM=lifebase_front_page_v1_candidate.php出力(.lbui-top-*)。
   実在記事・実在カテゴリのみ(架空0・空カテゴリ非表示=D0023 §3維持)
   ========================================================== */

/* TOP=Canvas側(2層構造・R0019 SF-2解消): 白面をTOPでは使わない。
   TOP Sidebar=CSS hideしない: front-page.phpのsidebars_widgetsフィルタで
   server-side非出力(R0023 ISSUE 4採用方式)。QA Gate=TOP DOMにdiv#sidebar不存在
   (CSSで隠すとフィルタ不発をQAで検出できないため、ここに保険ruleを置かない) */
body.home .main {
  background: transparent;
  float: none;
  width: 100%;
}
/* Delta C1(STEP 4 Live実測): TOP Sidebarのserver-side非出力でbodyへno-sidebarが
   付与され、Cocoon親 .no-sidebar .content .main{margin:0;width:100%}=specificity(0,3,0)
   が旧selector body.home .main=(0,2,1)に勝ちmargin:autoが不発
   (Live 1280px: main width=960pxだがleft=45px・右余白≈216pxの左寄せ)。
   →body.home.no-sidebar .content .main=(0,4,1)で親を確実に上回る。
   !important不使用・scope=body.home限定(Article=body.homeでないため波及なし)・
   global .no-sidebar不変更・width 960px/中央配置=承認済み設計の成立(Bug Fix) */
@media (min-width: 1024px) {
  body.home.no-sidebar .content .main {
    max-width: var(--lbui-top-w);
    margin-left: auto;
    margin-right: auto;
  }
}

.lbui-top-hero {
  margin: var(--lbui-space-4) 0 var(--lbui-space-8);
}
/* HOME v1.2(D0028・2026-09-02): Hero tagline「暮らしを整える」=復活
   (D0027 VR-3の「TOPから削除」をSUPERSEDE)。
   D0029(2026-09-02・Hero Tagline Tone Refinement): font-family=Header/Footer logoと同じ
   site Sans stack継承(上書きなし・D0028のSans採用/明朝不採用=維持)。ただしTypography emphasisは
   Footer tagline(.lbui-footer-tagline=400・letter-spacing normal)へ合わせる=weight 400+
   normal letter-spacing。Logo側の強調(600+0.06em)の流用がeyebrow/label感の原因とBrowser実測で
   確定したため、D0028のweight/spacing指定のみSUPERSEDED。
   役割=ブランドラベルではなく写真の前の静かな補助文=Hero title(30px/24px)より目立たない13〜14px・
   色=--lb-text-sub(Footer tagline 13px subと同系=ブランド表記の一貫性)。
   Geometry(font-size/line-height/margin)=不変・B-1 CLOSED維持。
   Footer側.lbui-footer-tagline=不変・削除禁止 */
.lbui-top-hero__tagline {
  font-size: 13px;
  font-weight: 400;                /* D0029: 600→400(Footer tagline tone) */
  color: var(--lb-text-sub);
  text-align: center;
  margin: 0 0 var(--lbui-space-1);
}
.lbui-top-hero__lead {
  display: block;
  text-decoration: none;
  color: var(--lb-text);
}
.lbui-top-hero__lead img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.lbui-top-cat {
  display: block;
  font-size: 13px;
  color: var(--lb-text-sub);
  margin: var(--lbui-space-2) 0 4px;
}
.lbui-top-hero__title {
  font-size: 24px;                 /* VR-4: Mobile 22px→24px(Hero主役化・大きすぎない) */
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  background: none;
  padding: 0;
  border: none;
  transition: color 150ms ease;    /* VR-1: 静かなhover遷移(reduced-motion=下記で無効化) */
}
@media (max-width: 1023px) {
  /* Hero全幅ブリード: 100vw禁止(R0017 M7)・gutter16px基準・
     max-width:none必須(R0019 §18-2: Cocoon global img max-width:100%のクランプ解除) */
  .lbui-top-hero__lead img {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    max-width: none;
  }
}

.lbui-top-section-heading {
  font-size: 18px;                 /* VR-4(§9): Editorial section見出し=16px→18px */
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lb-text);
  margin: 0 0 var(--lbui-space-3);
  background: none;
  padding: 0;
  border: none;
}
.lbui-top-articles {
  margin: 0 0 var(--lbui-space-8);
}
.lbui-top-articles__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lbui-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lbui-top-article {
  display: block;
  text-decoration: none;
  color: var(--lb-text);
  background: none;
  border: none;
  box-shadow: none;
}
.lbui-top-article img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.lbui-top-article__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  transition: color 150ms ease;    /* VR-1: 静かなhover遷移(reduced-motion対応=VR-1 block) */
}

/* VR-1(HOME v1.1・D0027)=HOV1後継: hover affordance強化。
   色=--lbui-link-hover(#5D7283・#FCFAF6上4.80:1=AA 4.5:1+margin。#667B8C=4.22:1=不採用)
   +Hero/Recent titleのみunderline(1px・offset 3px)。Cocoon a:hover{#e53900}=(0,1,1)
   へのspecificity優位=anchor(0,3,1)/title下線(0,4,1)=!important不使用。
   scope=TOP Hero title/Recent titleのみ(Category text/.lbui-top-cat=明示色rule保持・
   暮らしから探す=別rule・Article本文/Money UI/Footer/global a:hover=不変更)。
   画像scale・opacity変更・背景animation・box-shadow=なし */
body.home .lbui-top-hero__lead:hover,
body.home .lbui-top-article:hover {
  color: var(--lbui-link-hover);
}
body.home .lbui-top-hero__lead:hover .lbui-top-hero__title,
body.home .lbui-top-article:hover .lbui-top-article__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .lbui-top-hero__title,
  .lbui-top-article__title,
  .lbui-top-category-link {
    transition: none;
  }
}

/* 暮らしから探す(実在カテゴリのみ・件数連動)
   VR-4(HOME v1.1・D0027): 下線link 1本→full-width Editorial navigation rowへ。
   実データのみ(name=実カテゴリ名・count=$cat->count由来「N記事」・架空数値0)。
   カード化しない(background transparent・radius 0・shadow なし)。
   Touch=44px以上(padding 14px上下+16px/1.5行高≒52px)。カテゴリ増加時=同rowを縦へ自動追加。
   bottom margin=64px→24px(VR-4 §11: Category row bottom→Footer top実測121px→約81px=70〜90px圏) */
.lbui-top-categories {
  margin: 0 0 var(--lbui-space-3);
}
.lbui-top-category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lbui-space-2);
  width: 100%;
  padding: 14px 0;
  border-top: 1px solid var(--lb-border);
  border-bottom: 1px solid var(--lb-border);
  background: transparent;
  border-radius: 0;
  text-decoration: none;
  color: var(--lb-text);
  transition: color 150ms ease;
}
.lbui-top-category-link + .lbui-top-category-link {
  border-top: none;                /* 複数カテゴリ時=隣接rowの1px線二重化回避 */
}
.lbui-top-category-link__name {
  font-size: 16px;
  font-weight: 600;
}
.lbui-top-category-link__meta {
  font-size: 13px;
  color: var(--lb-text-sub);      /* meta=Secondary(hoverでも本ruleが維持) */
  white-space: nowrap;
}
.lbui-top-category-link__arrow {
  margin-left: 6px;
}
.lbui-top-category-link:hover {
  color: var(--lbui-link-hover);   /* VR-1と同一のBlue Gray系interaction色=静かなhover */
}
.lbui-top-category-link:focus-visible {
  outline: 2px solid var(--lb-primary-dark);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  /* HOME v1.2 B-1 FINAL DELTA(2026-09-02): FINAL PREFLIGHT実測=Header bottom→Hero image top
     110.2px(>target 70〜90px)。原因=D0028算術がheader→main gap 24pxを後段計算で落とし、
     tagline blockを≒28pxと見積もった(実測=14px×line-height 1.8=25.2px+margin-bottom 8px=33.2px)。
     固定分61px(.main padding-top 36px+header→main gap 24px+border≈1px)+33.2px=94.2pxが
     margin-top 0でも下限→margin-top調整のみでは不足。
     Final correction(Desktop限定)=margin-top 16px→0+tagline line-height 1.8(継承)→1.4:
     61px+(14×1.4=19.6px+8px=27.6px)=**約88.6px**=acceptance 70〜90px内。
     Live Apply後Verification expected≒88〜89px(70〜90px超過時=Delta報告・追加修正はしない) */
  .lbui-top-hero {
    margin-top: 0;
    margin-bottom: var(--lbui-space-6); /* v1.2: Desktop section rhythm=64→48px(間延び低減・Mobile=base 64維持) */
  }
  .lbui-top-hero__tagline {
    font-size: 14px;
    line-height: 1.4;                /* B-1: 継承1.8→1.4(Desktopのみ・Mobile=継承維持) */
  }
  .lbui-top-hero__title {
    font-size: 30px;               /* VR-4: 26px→30px(Hero主役化・weight 600/lh 1.5維持) */
  }
  /* VR-4: Recent=完全対称2カラムカード廃止→Editorial story rows(縦2件・image左260px/text右)。
     rounded card禁止・background card原則なし・box-shadow禁止=細Borderのみで区切る。
     横row化=1024px以上のみ(Mobile/Tablet 835〜1023px=base縦型を維持=§17) */
  .lbui-top-articles__list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .lbui-top-article {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
    padding: 24px 0;
    border-top: 1px solid var(--lb-border);
  }
  .lbui-top-article:last-child {
    border-bottom: 1px solid var(--lb-border);
  }
  .lbui-top-article .lbui-top-cat {
    margin-top: 0;                 /* row内=text列上端をimage上端へ揃える(base 16px topを解除) */
  }
  .lbui-top-article__title {
    font-size: 17px;               /* VR-4: Desktop story row title=17px(Hero 30pxとの階層差維持) */
  }
  .lbui-top-articles {
    margin-bottom: var(--lbui-space-6); /* v1.2(D0028): 64→48px(Desktop rhythm統一・Category sectionとの間延び低減) */
  }
}

/* ==========================================================
   9. TOP END
   ========================================================== */

/* ==========================================================
   10. ARTICLE EYE CATCH MOBILE FULL BLEED START(R0023 ISSUE 2)
   ==========================================================
   Cocoon Settingに対応項目なし(eyecatch_width_100_percent_enable=「カラム幅まで」=
   viewport Full Bleedではない・R0023実測)→CSS責務(旧S10設定=撤回)。
   条件: Mobile single articleのみ/page側padding(実測16px)分のnegative margin/
   100vw不使用(R0017 M7: scrollbar幅で横overflow)/horizontal overflow=0必須/
   Money UI `.lb-*`非干渉(selector=.eye-catchスコープ)/TOP Hero(.lbui-top-hero)とは別selector。
   ★実装QA: 実gutter値(16px)をLive再実測し、不一致なら本値を修正(盲目的固定をしない)
   ========================================================== */
@media (max-width: 767px) {
  body.single .article .eye-catch {
    margin-left: -16px;            /* = margin-inline: -16px(実測gutter基準) */
    margin-right: -16px;
    width: calc(100% + 32px);      /* 左右gutter分を実際に拡幅。negative marginだけでは右端が不足する */
    max-width: none;
  }
  body.single .article .eye-catch img {
    display: block;
    width: 100%;                   /* 拡幅済みコンテナの100% */
    height: auto;
  }
}
/* ==========================================================
   10. ARTICLE EYE CATCH MOBILE FULL BLEED END
   ========================================================== */

/* ==========================================================
   11. CATEGORY ARCHIVE START(D0030 Editorial Landing・2026-09-02)
   ==========================================================
   目的: Category Archiveを「ブログ記事一覧」→「Editorial Category Landing Page」へ
   (Quiet Editorial Utility・HOMEと視覚連続・ただしHOME Recentの単純コピーにしない=
   Excerpt 2行+日付を残し「テーマを掘って読む」情報量)。
   scope=**body.category限定**(body.archiveにしない: tag/date/author archiveへ
   意図せず適用しないため。特定カテゴリ限定にもしない=Category増加時に自動再利用)。
   Sidebar=CSS hideしない: D-2 hooks(lifebase-ui.php §5)の`sidebars_widgets`フィルタ
   (is_category()限定)でserver-side非出力=HOME方式(R0023 ISSUE 4)と同じ
   QA Gate{DOM不存在}のため保険ruleを置かない。
   no-sidebar class自動付与=Preflight確認事項(本CSSは非依存:
   body.category .content .main=(0,3,1)>.no-sidebar .content .main=(0,3,0)=C1同型設計)。
   display:contents=**不使用**(semantics/A11y維持。DOM=a.entry-card-wrap>
   article.entry-card>figure.entry-card-thumb+div.entry-card-content なので
   article.entry-cardを直接grid化すれば足りる)。
   Cocoon master根拠: .a-wrap padding1.5%+hover#f5f8fa(L1275-1286)/
   .entry-card-thumb float:left・width:320px(L116・L1292)/
   .entry-card-content margin-left:330px(L1339)/.entry-card-title 18px bold clamp3(L127)/
   .entry-card-snippet clamp4(L138)/.entry-card-meta=absolute右下(L148)/
   .entry-card-info>*=0.7em(L1343)/.archive-title 26px+icon span(L1810-1818)。
   Pagination=スコープ外(現在3記事=DOM 0・機能不変)/Category description=DB Write 0・
   架空intro作らない。!important=0・`.lb-*`非干渉・global単独selector変更=0
   ========================================================== */

/* Layout: main=Canvas編入(HOMEモジュール9と同型・白箱のblog感解消) */
body.category .main {
  background: transparent;
  float: none;
  width: 100%;
}

/* Heading: Folder icon非表示+Editorial heading(英語eyebrow・CATEGORYラベル=追加しない
   =D0029の学び{小さなラベル要素を増やさない}) */
body.category .archive-title {
  font-size: 24px;                 /* Mobile。Desktop=30px(下media) */
  font-weight: 600;
  line-height: 1.4;
  color: var(--lb-text);
  margin: 0 0 var(--lbui-space-4); /* margin-top 0=Header→heading=固定分61px目安/下32pxでlist開始 */
}
body.category .archive-title .fa {
  display: none;                   /* Cocoon Folder icon(.archive-title内span.fa)のみ */
}

/* Row=1記事(a.entry-card-wrap)。カード化しない=transparent+1px dividerのみ
   (HOME story rowsと同語彙: border-top+last border-bottom・radius 0・shadow 0) */
body.category .entry-card-wrap {
  display: block;
  padding: var(--lbui-space-3) 0;
  background: transparent;         /* .a-wrap padding1.5%/hover灰背景をscope内で解除 */
  border-top: 1px solid var(--lb-border);
}
body.category .entry-card-wrap:last-of-type {
  border-bottom: 1px solid var(--lb-border);
}
body.category .entry-card-wrap:hover {
  background: transparent;         /* hover=title色+underlineのみ(§Hover) */
}

/* Media(base=Mobile縦型: image full content width 16:9) */
body.category .entry-card-thumb {
  float: none;
  width: 100%;
  margin: 0 0 var(--lbui-space-2);
}
body.category .entry-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;                /* zoom/opacity/filter hover=なし */
}
body.category .entry-card .cat-label {
  display: none;                   /* 画像上Category chip=Categoryページでは重複(globalには触れない) */
}

/* Body(text列) */
body.category .entry-card-content {
  margin-left: 0;
  padding-bottom: 0;
}
body.category .entry-card-title {
  font-size: 18px;                 /* Mobile目安。Desktop=19px(下media) */
  font-weight: 600;
  line-height: 1.5;
  color: var(--lb-text);
  margin: 0 0 var(--lbui-space-1);
  -webkit-line-clamp: 2;           /* Cocoon 3→2(2行まで自然に許容) */
  transition: color 150ms ease;
}
body.category .entry-card-wrap:hover .entry-card-title {
  color: var(--lbui-link-hover);   /* HOMEと同じ#5D7283系hover(global a:hover=不変更) */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.category .entry-card-snippet {
  font-size: 14px;
  line-height: 1.7;
  color: var(--lb-text-sub);
  margin: 0 0 var(--lbui-space-1);
  -webkit-line-clamp: 2;           /* Cocoon 4行→2行(KEEP=テーマを掘る補助情報・完全削除しない) */
}

/* Meta: Categoryページ内のCategory情報重複を排除・投稿日のみKEEP
   (Author/Comment count/Read time/更新日新規表示/Arrow=追加しない) */
body.category .entry-card-meta {
  position: static;                /* Cocoon absolute右下→通常フロー(text列内・左寄せ) */
  text-align: left;
  line-height: 1.4;
}
body.category .entry-card-categorys {
  display: none;
}
body.category .entry-card-info > * {
  font-size: 13px;                 /* Cocoon 0.7em(≒9px)→13px Secondary */
  padding: 0;
  color: var(--lb-text-sub);
}

/* admin-pv: 公開読者DOMには不存在(ログイン管理者のみ)。RID Visual Review時の
   公開表示との差をなくすためCategory archive上のみ表示抑制(Analytics/Cocoonデータ=不変更・
   global hide=しない) */
body.category .admin-pv {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body.category .entry-card-title {
    transition: none;
  }
}

/* Desktop(≥1024px): main 960px center+row grid 280px+1fr */
@media (min-width: 1024px) {
  /* C1同型: .no-sidebar .content .main{margin:0;width:100%}=(0,3,0)にno-sidebar付与の
     有無へ依存せず勝つ(0,3,1)。main=960px(Cocoon padding 36px 29px維持→内側≒902px
     =Editorial content約900px・magic number追加なし)。期待=main center delta≦2px */
  body.category .content .main {
    max-width: var(--lbui-top-w);
    margin-left: auto;
    margin-right: auto;
  }
  body.category .archive-title {
    font-size: 30px;
  }
  body.category .entry-card {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--lbui-space-3);
    align-items: start;
  }
  body.category .entry-card-thumb {
    margin: 0;                     /* 縦積み用margin-bottomをgrid行では解除 */
  }
  body.category .entry-card-title {
    font-size: 19px;
  }
}
/* ==========================================================
   11. CATEGORY ARCHIVE END
   ========================================================== */

/* ==========================================================
   12. HOME v2 + ARTICLE v2 PROTOTYPE — DRAFT ONLY
   2026-09-13 / RID visual review before any Live publish
   ========================================================== */

/* ---------- HOME v2: Editorial Front Page ---------- */
body.home .main {
  padding-top: 0;
}

.lbv2-home-intro {
  max-width: 760px;
  margin: 52px 0 68px;
}
.lbv2-home-intro__title {
  margin: 0 0 14px;
  color: var(--lb-text);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.lbv2-home-intro__deck {
  margin: 0;
  color: var(--lb-text-sub);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
}

.lbv2-section-kicker {
  margin: 0 0 10px;
  color: var(--lb-text-sub);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
}
.lbv2-section-head {
  margin: 0 0 28px;
}
.lbv2-section-title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lb-text);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.lbv2-featured {
  margin: 0 0 88px;
}
.lbv2-featured__link {
  display: block;
  color: var(--lb-text);
  text-decoration: none;
}
.lbv2-featured__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}
.lbv2-featured__body {
  max-width: 760px;
  margin-top: 24px;
}
.lbv2-story-cat {
  display: block;
  margin: 0 0 8px;
  color: var(--lb-text-sub);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.lbv2-featured__title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lb-text);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.lbv2-featured__deck {
  max-width: 660px;
  margin: 18px 0 0;
  color: var(--lb-text-sub);
  font-size: 15px;
  line-height: 1.85;
}
.lbv2-story-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--lb-text);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
}
.lbv2-featured__link:hover .lbv2-featured__title,
.lbv2-story:hover .lbv2-story__title,
.lbv2-explore__row:hover .lbv2-explore__name {
  color: var(--lbui-link-hover);
}
.lbv2-featured__link:focus-visible,
.lbv2-story:focus-visible,
.lbv2-explore__row:focus-visible {
  outline: 2px solid var(--lb-primary-dark);
  outline-offset: 4px;
}

.lbv2-stories {
  margin: 0 0 96px;
}
.lbv2-stories__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.lbv2-story {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  color: var(--lb-text);
  text-decoration: none;
  border-top: 1px solid var(--lb-border);
}
.lbv2-story:last-child {
  border-bottom: 1px solid var(--lb-border);
}
.lbv2-story__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}
.lbv2-story__body {
  min-width: 0;
}
.lbv2-story__title {
  margin: 0;
  color: var(--lb-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  transition: color 150ms ease;
}
.lbv2-story__deck {
  display: none;
  margin: 14px 0 0;
  color: var(--lb-text-sub);
  font-size: 14px;
  line-height: 1.8;
}
.lbv2-story--lead {
  display: block;
  padding-top: 0;
  border-top: 0;
  margin-bottom: 28px;
}
.lbv2-story--lead .lbv2-story__media img {
  aspect-ratio: 16 / 9;
}
.lbv2-story--lead .lbv2-story__body {
  margin-top: 18px;
}
.lbv2-story--lead .lbv2-story__title {
  font-size: 20px;
  line-height: 1.55;
}
.lbv2-story--lead .lbv2-story__deck {
  display: block;
}

.lbv2-explore {
  margin: 0 0 64px;
}
.lbv2-explore__list {
  border-top: 1px solid var(--lb-border);
}
.lbv2-explore__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 82px;
  padding: 18px 0;
  color: var(--lb-text);
  text-decoration: none;
  border-bottom: 1px solid var(--lb-border);
}
.lbv2-explore__body {
  display: block;
  min-width: 0;
}
.lbv2-explore__name,
.lbv2-explore__desc {
  display: block;
}
.lbv2-explore__name {
  color: var(--lb-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
}
.lbv2-explore__desc {
  margin-top: 5px;
  color: var(--lb-text-sub);
  font-size: 13px;
  line-height: 1.6;
}
.lbv2-explore__meta {
  flex: 0 0 auto;
  color: var(--lb-text-sub);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .lbv2-home-intro {
    margin: 44px 0 56px;
  }
  .lbv2-home-intro__title {
    font-size: 32px;
  }
  .lbv2-featured {
    margin-bottom: 76px;
  }
  .lbv2-featured__media img,
  .lbv2-story--lead .lbv2-story__media img {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    max-width: none;
  }
  .lbv2-stories {
    margin-bottom: 80px;
  }
  .lbv2-explore {
    margin-bottom: 48px;
  }
}

@media (min-width: 1024px) {
  .lbv2-home-intro {
    margin: 72px 0 96px;
  }
  .lbv2-home-intro__title {
    font-size: 52px;
    line-height: 1.2;
  }
  .lbv2-home-intro__deck {
    font-size: 18px;
  }
  .lbv2-featured {
    margin-bottom: 120px;
  }
  .lbv2-featured__body {
    margin-top: 30px;
  }
  .lbv2-featured__title {
    font-size: 30px;
    line-height: 1.45;
  }
  .lbv2-featured__deck {
    font-size: 16px;
  }
  .lbv2-section-head {
    margin-bottom: 36px;
  }
  .lbv2-section-title {
    font-size: 30px;
  }
  .lbv2-stories {
    margin-bottom: 120px;
  }
  .lbv2-stories__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
  }
  .lbv2-story {
    display: block;
    padding: 0;
    border: 0;
  }
  .lbv2-story:last-child {
    border-bottom: 0;
  }
  .lbv2-story .lbv2-story__body {
    margin-top: 14px;
  }
  .lbv2-story--lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
    gap: 36px;
    align-items: center;
    margin: 0 0 28px;
    padding: 0 0 36px;
    border-bottom: 1px solid var(--lb-border);
  }
  .lbv2-story--lead .lbv2-story__body {
    margin-top: 0;
  }
  .lbv2-story--lead .lbv2-story__title {
    font-size: 24px;
  }
  .lbv2-story--lead .lbv2-story__deck {
    display: block;
  }
  .lbv2-explore {
    margin-bottom: 88px;
  }
  .lbv2-explore__row {
    min-height: 94px;
  }
  .lbv2-explore__name {
    font-size: 20px;
  }
}

/* ---------- ARTICLE v2: Editorial Story ---------- */
body.single .main {
  background: transparent;
}
body.single .article-header {
  margin-top: 44px;
}
body.single .article-header::before {
  content: "LIFEBASE STORY";
  display: block;
  margin-bottom: 12px;
  color: var(--lb-text-sub);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
}
body.single h1.entry-title,
body.single .article h1 {
  max-width: 700px;
  margin: 0 0 26px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.46;
  letter-spacing: -0.012em;
}
body.single .article .eye-catch-wrap {
  margin: 0;
}
body.single .article .date-tags {
  margin-top: 12px;
  text-align: left;
}
body.single .entry-content {
  counter-reset: lbv2-section;
  margin-top: 40px;
}
body.single .entry-content > p {
  font-size: 16px;
  line-height: 1.9;
}
body.single .entry-content > p:nth-of-type(-n+4) {
  color: var(--lb-text);
  font-size: 16px;
  line-height: 1.92;
}
body.single .entry-content > p:first-of-type {
  font-size: 17px;
}
body.single .entry-content > h2.wp-block-heading {
  counter-increment: lbv2-section;
  position: relative;
  margin: 72px 0 24px;
  padding: 18px 0 0;
  border-top: 1px solid var(--lb-border);
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.008em;
}
body.single .entry-content > h2.wp-block-heading::before {
  content: counter(lbv2-section, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  color: var(--lb-text-sub);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
body.single .entry-content > h3.wp-block-heading {
  margin: 40px 0 18px;
  font-size: 18px;
  line-height: 1.55;
}
body.single .entry-content > ul,
body.single .entry-content > ol {
  margin-top: 24px;
  margin-bottom: 32px;
  padding-left: 1.4em;
}
body.single .entry-content > ul li,
body.single .entry-content > ol li {
  margin-bottom: 10px;
  line-height: 1.85;
}
body.single .article .toc {
  margin-top: 56px;
  margin-bottom: 60px;
}

/* Article v2 table: Mobileで比較軸を広げ、商品名は意味のある位置で改行 */
@media (max-width: 767px) {
  body.single .entry-content > .wp-block-table table {
    width: 100%;
    table-layout: fixed;
    font-size: 14px;
    line-height: 1.65;
  }
  body.single .entry-content > .wp-block-table th,
  body.single .entry-content > .wp-block-table td {
    padding: 12px 10px;
    vertical-align: middle;
  }
  body.single .entry-content > .wp-block-table th:first-child,
  body.single .entry-content > .wp-block-table td:first-child {
    width: 28%;
  }
  body.single .entry-content > .wp-block-table th:nth-child(2),
  body.single .entry-content > .wp-block-table td:nth-child(2),
  body.single .entry-content > .wp-block-table th:nth-child(3),
  body.single .entry-content > .wp-block-table td:nth-child(3) {
    width: 36%;
  }
  body.single .entry-content > .wp-block-table th:nth-child(n+2) {
    font-size: 13.5px;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  body.single .entry-content > .wp-block-table td:first-child {
    font-size: 13px;
    line-height: 1.6;
  }
}

body.single .article-footer {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--lb-border);
}
body.single .article-footer .entry-categories-tags,
body.single .article-footer .footer-meta {
  color: var(--lb-text-sub);
  font-size: 13px;
}
body.single .article-footer .cat-link,
body.single .article-footer .author-link {
  color: var(--lb-text-sub);
  text-decoration: none;
}
body.single .article-footer .cat-link {
  display: inline;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.single #related-entries {
  margin-top: 96px;
  padding-top: 28px;
  border-top: 1px solid var(--lb-border);
}
body.single #related-entries .related-entry-heading {
  margin: 0 0 26px;
  font-size: 20px;
  line-height: 1.45;
}
body.single #related-entries .related-entry-heading::before {
  content: "NEXT STORIES";
  display: block;
  margin-bottom: 10px;
  color: var(--lb-text-sub);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
}
body.single #related-entries .cat-label {
  display: none;
}
body.single #related-entries .related-entry-card-wrap {
  color: var(--lb-text);
  text-decoration: none;
}
body.single #related-entries .related-entry-card-thumb {
  margin-bottom: 14px;
}
body.single #related-entries .related-entry-card-title {
  transition: color 150ms ease;
}
body.single #related-entries .related-entry-card-wrap:hover .related-entry-card-title {
  color: var(--lbui-link-hover);
}
body.single #related-entries .related-entry-card-wrap:focus-visible {
  outline: 2px solid var(--lb-primary-dark);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  body.single .article-header {
    margin-top: 32px;
  }
  body.single h1.entry-title,
  body.single .article h1 {
    margin-bottom: 22px;
    font-size: 25px;
    line-height: 1.5;
  }
  body.single .entry-content {
    margin-top: 36px;
  }
  body.single .entry-content > h2.wp-block-heading {
    margin-top: 60px;
    font-size: 21px;
  }
  body.single .article .toc {
    margin-top: 48px;
    margin-bottom: 56px;
  }
  body.single #related-entries {
    margin-top: 68px;
  }
}

@media (min-width: 1024px) {
  body.single .article-header {
    margin-top: 48px;
  }
  body.single h1.entry-title,
  body.single .article h1 {
    font-size: 32px;
    line-height: 1.4;
  }
  body.single .entry-content {
    margin-top: 48px;
  }
  body.single .entry-content > p {
    font-size: 16.5px;
  }
  body.single .entry-content > p:nth-of-type(-n+4) {
    font-size: 17px;
  }
  body.single .entry-content > p:first-of-type {
    font-size: 17.5px;
  }
  body.single .entry-content > h2.wp-block-heading {
    margin-top: 80px;
    font-size: 26px;
  }
  body.single .entry-content > h3.wp-block-heading {
    font-size: 20px;
  }
  body.single #related-entries .related-entry-heading {
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lbv2-story__title,
  body.single #related-entries .related-entry-card-title {
    transition: none;
  }
}

/* ==========================================================
   12. HOME v2 + ARTICLE v2 PROTOTYPE END
   ========================================================== */

/* ==========================================================
   13. READING UX COMPONENTS START
   ========================================================== */

/* ---- 共通: box-sizing 安定化(scope 内のみ・Money UI v1.1 前例と同形) ----
   ⚠ `*` は Module 配下へ限定した子孫 wildcard であり、Global 上書きではない
   (WEB_UI_DESIGN_SPEC §7-2 が禁じるのは `* { … !important }` 型の Global Rule)。 */
body.single .entry-content .lbui-reading-answer,
body.single .entry-content .lbui-reading-answer *,
body.single .entry-content .lbui-reading-choice,
body.single .entry-content .lbui-reading-choice *,
body.single .entry-content .lbui-reading-quiet,
body.single .entry-content .lbui-reading-quiet *,
body.single .entry-content .lbui-reading-guide,
body.single .entry-content .lbui-reading-guide *,
body.single .entry-content .lbui-reading-action,
body.single .entry-content .lbui-reading-action * {
  box-sizing: border-box;
}

/* ==========================================================
   13-1. ANSWER — Typography + Left Accent Line
   記事冒頭で答えを止めて見せる。Card 化しない。
   ========================================================== */
body.single .entry-content .lbui-reading-answer {
  margin: 32px 0 40px;
  padding: 8px 0 8px 16px;
  border-left: 2px solid var(--lb-primary);
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--lb-text);
  /* 19px = Mobile hierarchy(Prototype QA 2026-09-25 実測)。
     Intro first paragraph 17px → Answer 19px → H2 21px。
     20px では H2(21px)と 1px 差で「見出しに見える」。
     18px では本文 17px と 1px 差で「止まらない」。 */
  font-size: 19px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -0.006em;
}

/* ==========================================================
   13-2. CHOICE — 2 Soft Surfaces(読む順路の分岐)
   ⚠ button ではない。内部アンカー未実装のため interaction を作らない。
   ========================================================== */
body.single .entry-content .lbui-reading-choice {
  margin: 40px 0 48px;
}
body.single .entry-content .lbui-reading-choice__title {
  margin: 0 0 16px;
  color: var(--lb-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}
body.single .entry-content .lbui-reading-choice__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.single .entry-content .lbui-reading-choice__item {
  margin: 0;
  padding: 20px 18px;
  background: var(--lb-surface);
  border: none;
  border-radius: 4px;
  box-shadow: none;
}
body.single .entry-content .lbui-reading-choice__item-title {
  margin: 0;
  color: var(--lb-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
}
body.single .entry-content .lbui-reading-choice__item-body {
  margin: 8px 0 0;
  color: var(--lb-text);
  font-size: 16px;
  line-height: 1.8;
}
body.single .entry-content .lbui-reading-choice__hint {
  margin: 12px 0 0;
  color: var(--lb-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================
   13-3. QUIET / NO PRODUCT — 1 Large Soft Surface(静かな休憩地点)
   ========================================================== */
body.single .entry-content .lbui-reading-quiet {
  margin: 40px 0 48px;
  padding: 24px 20px;
  background: var(--lb-surface);
  border: none;
  border-radius: 0;
  box-shadow: none;
}
body.single .entry-content .lbui-reading-quiet__title {
  margin: 0 0 20px;
  color: var(--lb-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}
body.single .entry-content .lbui-reading-quiet__list {
  counter-reset: lbui-quiet;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.single .entry-content .lbui-reading-quiet__list > li {
  counter-increment: lbui-quiet;
  position: relative;
  margin: 0 0 12px;
  padding-left: 26px;
  color: var(--lb-text);
  font-size: 16px;
  line-height: 1.8;
}
body.single .entry-content .lbui-reading-quiet__list > li:last-child {
  margin-bottom: 0;
}
body.single .entry-content .lbui-reading-quiet__list > li::before {
  content: counter(lbui-quiet);
  position: absolute;
  top: 0.32em;
  left: 0;
  color: var(--lb-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
body.single .entry-content .lbui-reading-quiet__close {
  margin: 24px 0 0;
  color: var(--lb-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
}

/* ==========================================================
   13-4. MINI GUIDE — Number + Divider(scan 用)
   ========================================================== */
body.single .entry-content .lbui-reading-guide {
  margin: 40px 0 48px;
  background: none;
  border: none;
}
body.single .entry-content .lbui-reading-guide__title {
  margin: 0 0 16px;
  color: var(--lb-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}
body.single .entry-content .lbui-reading-guide__list {
  counter-reset: lbui-guide;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.single .entry-content .lbui-reading-guide__row {
  counter-increment: lbui-guide;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: start;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--lb-border);
}
body.single .entry-content .lbui-reading-guide__row:last-child {
  border-bottom: none;
}
body.single .entry-content .lbui-reading-guide__row::before {
  content: counter(lbui-guide, decimal-leading-zero);
  color: var(--lb-text-sub);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
body.single .entry-content .lbui-reading-guide__body {
  min-width: 0;
}
body.single .entry-content .lbui-reading-guide__main {
  margin: 0;
  color: var(--lb-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
}
body.single .entry-content .lbui-reading-guide__sub {
  margin: 4px 0 0;
  color: var(--lb-text-sub);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}

/* ==========================================================
   13-5. ACTION — Top Divider + Whitespace
   ========================================================== */
body.single .entry-content .lbui-reading-action {
  margin: 48px 0 32px;
  padding: 24px 0 0;
  background: none;
  border: none;
  border-top: 1px solid var(--lb-border);
  border-radius: 0;
  box-shadow: none;
}
body.single .entry-content .lbui-reading-action__title {
  margin: 0 0 12px;
  color: var(--lb-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
}
body.single .entry-content .lbui-reading-action__lead {
  margin: 0 0 12px;
  color: var(--lb-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}
body.single .entry-content .lbui-reading-action__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.single .entry-content .lbui-reading-action__list > li {
  margin: 0 0 8px;
  color: var(--lb-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.75;
}
body.single .entry-content .lbui-reading-action__list > li:last-child {
  margin-bottom: 0;
}
body.single .entry-content .lbui-reading-action__sub {
  margin: 16px 0 0;
  color: var(--lb-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}

/* ==========================================================
   13-6. DESKTOP(既存 breakpoint: min-width 1024px)
   ========================================================== */
@media (min-width: 1024px) {
  body.single .entry-content .lbui-reading-answer {
    margin: 40px 0 48px;
    padding-left: 20px;
    font-size: 22px;
  }
  body.single .entry-content .lbui-reading-choice__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  body.single .entry-content .lbui-reading-choice__item {
    padding: 24px;
  }
  body.single .entry-content .lbui-reading-quiet {
    padding: 28px 24px;
  }
  body.single .entry-content .lbui-reading-action {
    padding-top: 28px;
  }
}

/* ==========================================================
   13. READING UX COMPONENTS END
   ========================================================== */