@charset "UTF-8";
/* ============================================================
   base.css — 白系 共通（全ページ）
   担当スレッド：白系：基盤
   ------------------------------------------------------------
   01 配色の変数（カスタマイザーの色から作る）
   02 フォント
   03 ブロック単位の背景（.bg1 / .bg2）
   04 固定ページ共通（追加CSSから移設）
   ------------------------------------------------------------
   配色の正本は、外観 → カスタマイズ → サイト全体設定 → 基本カラー。
   このファイルでは色を直接書かず、カスタマイザーの色から作った変数を使う。
   各ページのCSS（top.css 等）も、下の変数名を使って書く。
   変数名は見本HTMLと同じにしてある（見本のCSSをそのまま移しやすくするため）。
   ============================================================ */


/* ===== 01 配色の変数 ======================================= */

/* カスタマイザーの色をそのまま使うもの
   --color_bg / --color_text / --color_main / --color_link は SWELL が出力する変数 */
:root{
  --bg:         var(--color_bg,   #ffffff);  /* 背景色 */
  --surface:    var(--color_bg,   #ffffff);  /* カード等の面 */
  --ink:        var(--color_text, #26221f);  /* 文字 */
  --brick:      var(--color_main, #b5754a);  /* レンガ色（メインカラー） */
  --brick-ink:  var(--color_link, #93573a);  /* レンガ色・文字用（リンクカラー） */

  /* カスタマイザーにない色：古いブラウザ用の固定値（見本の値）。
     対応ブラウザでは、すぐ下の @supports の中で計算した値に置き換わる */
  --ink2:       #645e57;  /* 文字（副） */
  --ink3:       #9a948c;  /* 文字（補足） */
  --line:       #e2ded8;  /* 罫線 */
  --bg2:        #f4f3f1;  /* 淡い面 */
  --brick-soft: #f3e9e2;  /* レンガ色・淡 */

  /* フォント（見出し・英字ラベル）。本文はカスタマイザーの設定を使う */
  --serif-jp: 'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --serif-en: 'Cormorant Garamond','Times New Roman',serif;
}

/* カスタマイザーにない色を、カスタマイザーの色から計算する。
   割合を変えるときは、見本の値（右のコメント）と見比べながら数%ずつ */
@supports (color: color-mix(in srgb, #000 50%, #fff)){
  :root{
    --ink2:       color-mix(in srgb, var(--ink) 73%, var(--bg));    /* 見本 #645e57 */
    --ink3:       color-mix(in srgb, var(--ink) 48%, var(--bg));    /* 見本 #9a948c */
    --line:       color-mix(in srgb, var(--ink) 15%, var(--bg));    /* 見本 #e2ded8 */
    --bg2:        color-mix(in srgb, var(--ink) 5%,  var(--bg));    /* 見本 #f4f3f1 */
    --brick-soft: color-mix(in srgb, var(--brick) 16%, var(--bg));  /* 見本 #f3e9e2 */
  }
}


/* ===== 02 フォント ========================================= */

/* 見出し（H1〜H3）は明朝。大きさ・余白はここでは変えない */
#body_wrap h1,
#body_wrap h2,
#body_wrap h3{
  font-family: var(--serif-jp);
}

/* 英字ラベル（SECTION 名など）に付けるクラス */
#body_wrap .u-en{
  font-family: var(--serif-en);
  letter-spacing: .02em;
}


/* ===== 03 ブロック単位の背景（手動でクラス付与） =========== */
/* ブロックの「追加CSSクラス」に bg1 / bg2 を入れて使う */

#body_wrap .bg1{ background: var(--bg); }
#body_wrap .bg2{ background: var(--bg2); }


/* ===== 04 固定ページ共通（追加CSSから移設） ================= */
/* ===== 固定ページ：上部タイトルを消し、最初のブロックを最上部へ ===== */
.page .c-pageTitle{ display:none !important; }

/* コンテンツ枠の上下余白を除去（下の 6em が最下部の黒帯の原因） */
.page #content,
.page .l-content{
  padding-top:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* 本文エリア側の余白 */
.page .l-mainContent,
.page #main_content,
.page .l-mainContent__inner{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* 本文の先頭ブロックが持つ上マージン */
.page .post_content{ margin-top:0 !important; }
.page .post_content > *:first-child{ margin-top:0 !important; }

/* パンくず：コラム等では残すので、背景を消して上下の余白だけ詰める */
.page .p-breadcrumb,
.page .p-breadcrumb.-bg-on{
  background:transparent !important;
  padding:8px 0 !important;
  margin:0 !important;
}

/* ===== ARCHITECTS（ID:105）：パンくずも消して完全に密着 ===== */
.page-id-105 .p-breadcrumb{ display:none !important; }





/* ===== 05 サイドメニュー ==================================== */
/* PC（960px以上）：左に固定表示。960px未満：上部バー＋左からの引き出し。
   SWELLのヘッダーはすべての幅で使わない */

:root{
  --rail: 232px;
  --tb-mbar-h: 56px; /* 上部バーの高さ（side-menu.js が実際の値に更新） */
  /* 本文エリアの幅（＝全幅）。全幅（100vw）で広げていた部品は、各スレッドでこれに置き換える
     例）width:var(--main-w); margin-left:calc(50% - var(--main-w) / 2); */
  --main-w: calc(100vw - var(--swl-scrollbar_width, 0px));

  /* 幅の3段階（2026-09-30 決定）
     標準 1000px … ほぼすべてのセクション（見出し・本文・カード・施工実績・コラム一覧など）
     広   1100px … 写真を見せる部分だけ（魅力の写真グリッドなど）
     全幅         … 流れる帯だけ（信頼バンドなど）＝ --main-w
     画面が狭いときは、本文エリアの左右に最低48px（960px未満は22px）の余白を残して縮む */
  --w-std-max: 1000px;
  --w-wide-max: 1100px;
  --tb-side-pad: 48px;
  --w-std:  min(var(--w-std-max),  calc(var(--main-w) - var(--tb-side-pad) * 2));
  --w-wide: min(var(--w-wide-max), calc(var(--main-w) - var(--tb-side-pad) * 2));
}
@media (max-width: 959.98px){
  :root{ --tb-side-pad: 22px; }
}

/* 幅の3段階を、SWELLのブロック（グループなど）に付けて使うクラス
   ブロックの 詳細設定 → 追加CSSクラス に tb-w-std / tb-w-wide / tb-w-full のどれかを入れる。
   親の幅に関係なく、本文エリアの中央にその幅で置く。
   ※ フルワイドブロックに付けると、SWELLが中身を別の幅に収めることがあるので、グループブロックに付ける */
#body_wrap .tb-w-std,
#body_wrap .tb-w-wide,
#body_wrap .tb-w-full{
  position: relative !important; left: auto !important;
  max-width: none !important;
  width: var(--tb-w) !important;
  margin-left: calc(50% - var(--tb-w) / 2) !important;
  margin-right: calc(50% - var(--tb-w) / 2) !important;
}
#body_wrap .tb-w-std{  --tb-w: var(--w-std); }
#body_wrap .tb-w-wide{ --tb-w: var(--w-wide); }
#body_wrap .tb-w-full{ --tb-w: var(--main-w); }

/* 幅のクラスを付けたグループの中では、部品が自分で画面幅（100vw）に広がるのをやめ、
   グループの幅に収める（ショートコードのブロックには追加CSSクラスを付けられないため、
   グループで包んで幅を決める）
   .tb-grid = 魅力の写真グリッド（tb-appeal-grid） / .tb-strips4 = レンガの魅力4段 */
#body_wrap :is(.tb-w-std, .tb-w-wide, .tb-w-full) :is(.tb-grid, .tb-strips4){
  width: 100% !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
#body_wrap :is(.tb-w-std, .tb-w-wide, .tb-w-full) .tb-grid .piers{
  max-width: none !important;
  padding-left: 0 !important; padding-right: 0 !important;
}

/* SWELLのヘッダー・スマホメニューを外す */
#header,
#fix_header,
.l-fixHeader,
#sp_menu{ display:none !important; }

/* ---- 中身（PC・引き出し共通） ----
   2026-10-22 改定（手書きの指示書どおり）
   ・ロゴは画像（assets/img/logo-tbbricks.png）
   ・左右の文字そろえ位置＝区切りのヨコ線の左端・右端（.tb-rail__main の左右の余白の内側）
   ・共通ナビ：左寄せ。文字は1文字分右に下げ、選択中は左端に「-」（文字は動かない）
   ・このページ：右寄せ・文字は約8割。選択中は右端に「-」。その分、右を空ける
   ・行の間隔は約8割
   ・並び：ロゴ → ホーム／テクニカル情報（LP切替）→ ヨコ線 → 共通ナビ → ヨコ線 → このページ（2026-10-28） */
.tb-rail a,
.tb-mbar a{ color: inherit; text-decoration: none; }
.tb-rail ul,
.tb-mbar ul{ list-style: none; margin: 0; padding: 0; }

.tb-rail{
  display: flex; flex-direction: column;
  background: var(--bg);
  line-height: 1.76; letter-spacing: .04em; /* 1.95 の約8割 ×1.1（2026-10-22） */
}
.tb-rail__main{
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 44px 36px 28px;
}
/* 画面が低く項目が収まらないときだけ、スクロールバーを常に表示する（2026-10-23）
   ・Mac は初期設定でスクロールバーが隠れるため、Chrome・Safari・Edge は形を指定して常に見せる
   ・バーの幅の分だけ右の余白を減らし、右の文字の位置（ヨコ線の右端）をそろえたままにする
     （side-menu.js が、収まらないときだけ .is-scroll を付け、実際のバーの幅で余白を調整する） */
.tb-rail__main::-webkit-scrollbar{ width: 6px; }
.tb-rail__main::-webkit-scrollbar-track{ background: transparent; }
.tb-rail__main::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 3px; }
.tb-rail__main::-webkit-scrollbar-thumb:hover{ background: var(--ink3); }
@supports not selector(::-webkit-scrollbar){ /* Firefox */
  .tb-rail__main{ scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
}


/* ロゴ（画像） */
.tb-rail__logo,
.tb-mbar__logo{ display: block; line-height: 0; }
.tb-rail__logo img,
.tb-mbar__logo img{ display: block; width: 100%; height: auto; }
.tb-rail__logo{ width: 98px; }  /* 140px の7割（2026-10-22） */

/* 共通ナビ（共有ページでは①②の両方を出力し、合う方だけを表示） */
.tb-gl{
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line); /* ヨコ線（このページの上の線と同じ） */
}
html:not(.tb-side-2) .tb-gl--2,
html.tb-side-2 .tb-gl--1{ display: none; }

.tb-gl__list{ display: flex; flex-direction: column; gap: 4.4px; }
.tb-gl__list a{
  display: block; position: relative;
  font-size: 14px; color: var(--ink2);
  padding: 1px 0 1px 1em; /* 1文字分右に下げる（選択の「-」の場所） */
  transition: color .2s;
}
.tb-gl__list a:hover{ color: var(--ink); }
.tb-gl__list .current-menu-item > a{ color: var(--ink); }
.tb-gl__list .current-menu-item > a::before{
  content: ""; position: absolute; left: 0; top: 50%;
  width: 8px; height: 2px; margin-top: -1px; background: var(--brick);
}

/* このページ（ページナビ）：右寄せ・小さめ */
.tb-railsec{
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line); /* ヨコ線（太さ・色は従来どおり） */
  text-align: right;
}
.tb-rl{
  font-size: 10px; letter-spacing: .16em;
  color: var(--ink3); margin-bottom: 6px;
  padding-right: 14px; /* 項目の文字と右端をそろえる */
}
.tb-toc{ display: flex; flex-direction: column; gap: 2.2px; }
.tb-toc a{
  display: block; position: relative;
  font-size: 11.5px; line-height: 1.65; color: var(--ink2); /* 14px の約8割 */
  padding: 2px 14px 2px 0; /* 右に「-」の分を空ける */
  transition: color .2s;
}
.tb-toc a::before{
  content: ""; position: absolute; right: 0; top: 50%;
  width: 5px; height: 1px; background: var(--line); transition: all .25s;
}
.tb-toc a:hover,
.tb-toc a.on{ color: var(--ink); }
.tb-toc a.on::before{ width: 8px; height: 2px; margin-top: -.5px; background: var(--brick); }

/* サブ項目（メニューで字下げした項目）：右からさらに下げる */
.tb-toc .sub-menu{ display: flex; flex-direction: column; gap: 0; margin-top: 0; }
.tb-toc .sub-menu a{ padding-right: 26px; font-size: 10.5px; color: var(--ink3); }
.tb-toc .sub-menu a::before{ display: none; }
.tb-toc .sub-menu a:hover{ color: var(--ink); }

/* LP切替（ホーム／テクニカル情報）：ロゴの下。文字は共通ナビと左端をそろえる（2026-10-28 最下部から移動） */
.tb-aud{
  margin-top: 40px;
  display: flex; flex-direction: column; gap: 4.4px; /* 共通ナビと同じ行の間隔 */
  border-left: 1px solid var(--line);
}
.tb-aud a{
  font-size: 14px; padding: 1px 0 1px 13px; /* 線1px＋13px＝共通ナビの文字の位置（1em＝14px）にそろう */
  color: var(--ink3); transition: color .2s;
}
.tb-aud a:hover{ color: var(--ink); }
html:not(.tb-side-2) .tb-aud__1,
html.tb-side-2 .tb-aud__2{
  color: var(--ink);
  border-left: 2px solid var(--brick);
  margin-left: -1px; padding-left: 12px; /* -1＋2＋12＝14px：文字の位置はほかと同じ */
}

/* 閉じるボタン（引き出しのときだけ表示） */
.tb-rail__close{ display: none; }

/* 上部バー・背景（960px未満だけ表示） */
.tb-mbar,
.tb-rail-ov{ display: none; }


/* ---- PC：960px以上 ---- */
@media (min-width: 960px){

  :root{ --main-w: calc(100vw - var(--rail) - var(--swl-scrollbar_width, 0px)); }

  #body_wrap{
    margin-left: var(--rail);
    overflow-x: clip; /* 全幅部品の置き換えが済むまでの横スクロール防止 */
    overflow-y: visible; /* 見出しの固定（position:sticky）を効かせるため、縦は切らない */
  }

  /* SWELLの全幅ブロック（フルワイド・全幅配置）を、画面幅ではなく本文エリアの幅で広げる */
  #body_wrap .swell-block-fullWide,
  #body_wrap .alignfull{
    position: relative !important;
    width: var(--main-w) !important;
    max-width: none !important;
    left: calc(50% - var(--main-w) / 2) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .tb-rail{
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
    width: var(--rail);
    border-right: 1px solid var(--line);
  }
  .admin-bar .tb-rail{ top: 32px; }
}


/* ---- 960px未満：上部バー＋引き出し ---- */
@media (max-width: 959.98px){

  html{ scroll-padding-top: var(--tb-mbar-h); }

  /* 上部バー */
  .tb-mbar{
    display: block;
    position: sticky; top: 0; z-index: 90;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .admin-bar .tb-mbar{ top: 32px; }

  .tb-mbar__row{
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px 12px 22px;
  }
  .tb-mbar__logo{ width: 84px; }

  .tb-mbar__btn{
    display: flex; align-items: center; gap: 8px;
    padding: 8px 6px; margin: 0;
    background: none; border: 0; cursor: pointer;
    color: var(--ink); font: inherit; font-size: 12px; letter-spacing: .08em;
  }
  .tb-mbar__icon,
  .tb-mbar__icon::before,
  .tb-mbar__icon::after{
    display: block; width: 18px; height: 1.5px; background: currentColor;
  }
  .tb-mbar__icon{ position: relative; }
  .tb-mbar__icon::before,
  .tb-mbar__icon::after{ content: ""; position: absolute; left: 0; }
  .tb-mbar__icon::before{ top: -6px; }
  .tb-mbar__icon::after{ top: 6px; }

  /* LPの目次（横スクロール） */
  .tb-mtoc{
    overflow-x: auto; scrollbar-width: none;
    padding: 0 22px 8px;
  }
  .tb-mtoc::-webkit-scrollbar{ display: none; }
  .tb-mtoc__list{ display: flex; gap: 22px; }
  .tb-mtoc__list a{
    display: block; white-space: nowrap;
    font-size: 12.5px; color: var(--ink2);
    padding: 4px 0; border-bottom: 2px solid transparent;
  }
  .tb-mtoc__list a.on{ color: var(--ink); border-color: var(--brick); }

  /* 引き出し */
  .tb-rail{
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
    width: min(300px, 85vw);
    box-shadow: 0 0 24px rgba(0,0,0,.12);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .tb-rail__main{ padding: 28px 28px 28px; }
  html.tb-drawer-open .tb-rail{
    transform: none; visibility: visible;
    transition: transform .3s ease;
  }
  .tb-rail-ov{
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,.35);
  }
  html.tb-drawer-open .tb-rail-ov{ display: block; }
  html.tb-drawer-open{ overflow: hidden; }

  /* 閉じるボタン */
  .tb-rail__close{
    display: block; position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px; padding: 0; margin: 0;
    background: none; border: 0; cursor: pointer; color: var(--ink2);
  }
  .tb-rail__close span,
  .tb-rail__close span::before{
    position: absolute; left: 9px; top: 17px;
    width: 18px; height: 1.5px; background: currentColor;
    transform: rotate(45deg);
  }
  .tb-rail__close span::before{ content: ""; left: 0; top: 0; transform: rotate(90deg); }
}

@media (max-width: 782px){
  .admin-bar .tb-mbar{ top: 46px; }
}
@media (max-width: 600px){
  .admin-bar .tb-mbar{ top: 0; } /* 600px以下では管理バーが固定されない */
}

/* ===== 06 見出し固定の2カラム（.tb-edit） ================== */
/* 左に見出し（ラベル・H2・サブコピー）、右に本文。本文をスクロールしても見出しは止まる。
   使い方：「カラム」ブロック（WordPress標準）を2列で置き、
           ブロックの 詳細設定 → 追加CSSクラス に tb-edit と入れる。
   ・左の列：段落（クラス tb-label）→ 見出しH2 → 段落（クラス tb-sub）
   ・右の列：本文（段落・画像・図など自由）
   ・列の幅はエディターで指定しなくてよい（ここで決める）。
   ・1100px未満の幅では1列に並び、見出しは固定しない。
   ・見出しの固定は、フルワイドブロックの中に置くと効かないことがある（SWELLが中身を切り取るため）。
     背景色が不要なら、カラムブロックを本文に直接置く。 */

/* ラベル：「Value & Risk価値とリスク」と入力し、英字部分だけを選んで太字（B）にする。
   太字にした部分が大きな英字、残りが小さな日本語になる。
   （HTMLで <span class="en">…</span> と書いても同じ表示になる） */
#body_wrap .tb-label{
  margin: 0 0 26px !important;
  font-size: 13px; line-height: 1.5; letter-spacing: .1em;
  color: var(--ink3);
}
#body_wrap .tb-label .en,
#body_wrap .tb-label strong{
  font-family: var(--serif-en); font-size: 22px; font-weight: 500;
  letter-spacing: .02em; color: var(--ink);
  margin-right: 12px;
}

/* 見出しH2：SWELLの見出しの装飾（帯・線）を外す
   tb-edit の中のH2と、tb-label の段落のすぐ後に置いたH2（見出しを上に置く型）の両方 */
#body_wrap .tb-edit h2,
#body_wrap .tb-label + h2{
  margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--ink);
  font-size: clamp(23px, 2.5vw, 30px); font-weight: 600;
  letter-spacing: .04em; line-height: 1.55;
}
#body_wrap .tb-edit h2::before,
#body_wrap .tb-edit h2::after,
#body_wrap .tb-label + h2::before,
#body_wrap .tb-label + h2::after{ display: none !important; }

/* サブコピー */
#body_wrap .tb-sub{
  margin: 14px 0 0 !important;
  font-family: var(--serif-jp); font-size: 16px; font-weight: 500;
  color: var(--ink2);
}

/* 本文列（幅は見出し列の残りすべて）。行間・字間は見本に合わせる */
#body_wrap .tb-edit > .wp-block-column:last-child{
  line-height: 1.95; letter-spacing: .02em;
}
#body_wrap .tb-edit > .wp-block-column:last-child p{
  line-height: 1.95; letter-spacing: .02em;
  margin-bottom: 1.6em;
}
/* 小見出しは、右の列に直接置いたh3だけ（投稿リストの記事タイトルなど、部品の中のh3には付けない） */
#body_wrap .tb-edit > .wp-block-column:last-child > h3{
  margin: 2.6em 0 .9em !important;
  line-height: 1.55; letter-spacing: .04em;
}
#body_wrap .tb-edit > .wp-block-column:last-child a:not([class]){
  color: var(--brick-ink);
  text-decoration: none; border-bottom: 1px solid currentColor;
}

@media (min-width: 1100px){
  /* 幅：標準幅（1000px）で中央に置く */
  #body_wrap .tb-edit{
    --tb-edit-w: var(--w-std);
    width: var(--tb-edit-w) !important; max-width: none !important;
    margin-left: calc(50% - var(--tb-edit-w) / 2) !important;
    margin-right: calc(50% - var(--tb-edit-w) / 2) !important;
    display: grid !important;
    grid-template-columns: clamp(280px, 32%, 380px) minmax(0, 1fr); /* 見出し列：幅の約1/3 */
    column-gap: clamp(40px, 4.5vw, 64px);
    align-items: start;
  }
  #body_wrap .tb-edit > .wp-block-column{
    margin: 0 !important; flex-basis: auto !important; min-width: 0;
  }
  #body_wrap .tb-edit > .wp-block-column:first-child{
    position: sticky; top: 48px;
  }
  .admin-bar #body_wrap .tb-edit > .wp-block-column:first-child{ top: 80px; }
}
@media (max-width: 1099.98px){
  #body_wrap .tb-edit{
    display: flex !important; flex-direction: column; gap: 32px;
  }
  #body_wrap .tb-edit > .wp-block-column{
    flex-basis: auto !important; margin: 0 !important;
  }
}


/* ===== 07 記事の表（.tb-col-table） ======================== */
/* SWELLの投稿リストを「写真｜カテゴリー｜タイトル」の表に組み替える（コラム一覧など）。
   使い方：投稿リストブロックを
     リストの型：リスト型 / カテゴリー表示位置：日付の横 / 公開日・更新日・著者・PV数：オフ /
     タイトルのHTMLタグ：h3（セクションの見出しがH2のとき）
   にして、追加CSSクラスに tb-col-table と入れる。
   SWELLのHTML：li.p-postList__item > a.p-postList__link >
                 [div.p-postList__thumb > figure > img] + [div.p-postList__body > h? + div.p-postList__meta] */

#body_wrap .tb-col-table .p-postList{
  display: block !important;
  margin: 0 !important; padding: 0 !important;
  border-top: 1px solid var(--line);
}
#body_wrap .tb-col-table .p-postList__item{
  width: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important;
  border-bottom: 1px solid var(--line);
}
#body_wrap .tb-col-table .p-postList__link{
  display: grid !important;
  grid-template-columns: 96px 9.5em minmax(0, 1fr);
  grid-template-areas: "thumb cat title";
  align-items: center;
  column-gap: 24px;
  padding: 12px 0 !important;
  background: none !important; box-shadow: none !important;
  color: var(--ink); text-decoration: none;
}

/* 写真（横3：縦2） */
#body_wrap .tb-col-table .p-postList__thumb{
  grid-area: thumb;
  width: 96px !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important;
}
#body_wrap .tb-col-table .c-postThumb__figure{
  position: relative; margin: 0 !important;
  padding-top: 0 !important; aspect-ratio: 3 / 2; height: auto !important;
  overflow: hidden;
}
#body_wrap .tb-col-table .c-postThumb__figure::before{ display: none !important; }
#body_wrap .tb-col-table .c-postThumb__img{
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; object-fit: cover;
}

/* 本文の入れ物をなくし、タイトルと情報欄（カテゴリー）を表の列として並べる */
#body_wrap .tb-col-table .p-postList__body{ display: contents !important; }

/* カテゴリー */
#body_wrap .tb-col-table .p-postList__meta{
  grid-area: cat; align-self: center;
  display: block !important;
  margin: 0 !important; padding: 0 !important;
  font-size: 12.5px; line-height: 1.5; letter-spacing: .04em;
  color: var(--brick-ink);
}
#body_wrap .tb-col-table .p-postList__meta *{
  color: inherit !important; font-size: inherit !important;
  background: none !important; padding: 0 !important; margin: 0 !important;
}
#body_wrap .tb-col-table .p-postList__meta *::before{ display: none !important; } /* フォルダの印を消す */

/* タイトル */
#body_wrap .tb-col-table .p-postList__title{
  grid-area: title; align-self: center;
  margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important;
  font-family: var(--serif-jp); font-size: 17px; font-weight: 500;
  line-height: 1.65; letter-spacing: .04em;
  color: var(--ink); transition: color .2s;
}
#body_wrap .tb-col-table .p-postList__title::before,
#body_wrap .tb-col-table .p-postList__title::after{ display: none !important; }
#body_wrap .tb-col-table .p-postList__link:hover .p-postList__title{ color: var(--brick-ink); }

/* スマホ：写真の右に、カテゴリーとタイトルを上下に重ねる */
@media (max-width: 599.98px){
  #body_wrap .tb-col-table .p-postList__link{
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas: "thumb cat" "thumb title";
    align-items: start;
    column-gap: 16px; row-gap: 4px;
  }
  #body_wrap .tb-col-table .p-postList__thumb{ width: 80px !important; }
  #body_wrap .tb-col-table .p-postList__title{ font-size: 15.5px; }
}


/* ===== 段階の帯の色（tb-steps・tb-process 共通。2026-10-23） =====
   on … ご相談の適期（Step1・2）：淡いレンガ色より少し濃く（レンガ色22%。--brick-soft は16%）
   ok … この段階でも可（Step4）：さらに淡く（レンガ色4%）
   Step3 は on → ok のグラデーション */
:root{
  --tb-band-on: var(--brick-soft);
  --tb-band-ok: #fbf8f6;
}
@supports (color: color-mix(in srgb, #000 50%, #fff)){
  :root{
    --tb-band-on: color-mix(in srgb, var(--brick) 22%, var(--bg));
    --tb-band-ok: color-mix(in srgb, var(--brick) 4%, var(--bg));
  }
}

/* ===== 08 段階の図（.tb-steps） ============================ */
/* 「Step 1 企画 → Step 2 基本設計 → …」を、横線と点でつないだ表にする（相談の時期など）。
   使い方：「カラム」ブロックを4列（列の数は自由）で置き、追加CSSクラスに tb-steps。
   各列（内側のカラム）の中身は、上から
     段落「Step 1」 → 見出しH3「企画」 → 段落（説明）
   強調したい列（ご相談の適期）は、その列（内側のカラム）の追加CSSクラスに tb-steps__on。
   帯の文字「ご相談の適期」は、強調した最後の列の、いちばん最後に段落を置き、追加CSSクラスに tb-steps__note。
   「この段階でも可」の列（例：実施設計・施工）は、その列の追加CSSクラスに tb-steps__ok。
   さらに淡い帯と、レンガ色の白抜きの点になる（2026-10-19 追加）。
   線・点・帯はCSSで描くので、エディターでは入れない。768px未満では縦に並ぶ。 */

#body_wrap .tb-steps{
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); /* 列の数に関係なく等幅 */
  gap: 0 !important;
  margin-top: 56px !important;
}
#body_wrap .tb-steps > .wp-block-column{
  position: relative;
  margin: 0 !important; flex-basis: auto !important; min-width: 0;
  padding: 66px 28px 0 0;
}
/* 横線 */
#body_wrap .tb-steps > .wp-block-column::before{
  content: ""; position: absolute; left: 0; right: 0; top: 20px;
  height: 1px; background: var(--line);
}
/* 点（白抜き） */
#body_wrap .tb-steps > .wp-block-column::after{
  content: ""; position: absolute; left: 1px; top: 15px;
  width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--ink3);
}
/* 強調した列：淡いレンガ色の帯と、塗りつぶしの点 */
#body_wrap .tb-steps > .tb-steps__on::before{
  top: 0; height: 40px; background: var(--tb-band-on);
}
#body_wrap .tb-steps > .tb-steps__on::after{
  background: var(--brick); border-color: var(--brick);
}
/* 「この段階でも可」の列：さらに淡い帯と、レンガ色の白抜きの点 */
#body_wrap .tb-steps > .tb-steps__ok::before{
  top: 0; height: 40px;
  background: var(--tb-band-ok);
}
#body_wrap .tb-steps > .tb-steps__ok::after{
  background: var(--bg); border-color: var(--brick);
}
/* 帯の区切り：2列目以降の帯の左端に、白（背景色）の1pxのタテ線（2026-10-23） */
#body_wrap .tb-steps > .tb-steps__on:not(:first-child)::before,
#body_wrap .tb-steps > .tb-steps__ok:not(:first-child)::before{
  box-shadow: inset 1px 0 0 var(--bg);
}
/* 適期（__on）のすぐ右の「可」の列（例：Step3）：帯を、左の淡いレンガ色から右の「可」の色へのグラデーションにする。
   エディターでの追加の指定は不要（並び順で自動）。2026-10-23 */
#body_wrap .tb-steps > .tb-steps__on + .tb-steps__ok::before{
  background: linear-gradient(to right, var(--tb-band-on), var(--tb-band-ok));
}
/* 帯の文字（ご相談の適期） */
#body_wrap .tb-steps .tb-steps__note{
  position: absolute; z-index: 1; top: 0; right: 18px;
  margin: 0 !important; padding: 0 !important;
  height: 40px; line-height: 40px;
  font-size: 13px; letter-spacing: .06em; color: var(--brick); /* メインカラー（2026-10-26） */
}

/* 文字：Step番号 / 見出し / 説明 */
#body_wrap .tb-steps > .wp-block-column > p:first-child{
  margin: 0 0 6px !important;
  font-family: var(--serif-en); font-size: 15px; letter-spacing: .04em;
  color: var(--ink3);
}
#body_wrap .tb-steps h3{
  margin: 0 0 10px !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  font-family: var(--serif-jp); font-size: 20px; font-weight: 600;
  line-height: 1.5; letter-spacing: .04em; color: var(--ink);
}
#body_wrap .tb-steps h3::before,
#body_wrap .tb-steps h3::after{ display: none !important; }
#body_wrap .tb-steps > .wp-block-column > p:not(:first-child):not(.tb-steps__note){
  margin: 0 !important;
  font-size: 14.5px; line-height: 1.95; letter-spacing: .02em;
  color: var(--ink2);
}

/* 768px未満：縦に並べ、線も縦にする */
@media (max-width: 767.98px){
  #body_wrap .tb-steps{
    grid-template-columns: 1fr; grid-auto-flow: row;
    margin-top: 40px !important;
  }
  #body_wrap .tb-steps > .wp-block-column{ padding: 0 0 28px 36px; }
  #body_wrap .tb-steps > .wp-block-column::before{
    left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
  }
  #body_wrap .tb-steps > .wp-block-column::after{ left: 0; top: 6px; }
  #body_wrap .tb-steps > .tb-steps__on::before{
    left: 4px; width: 3px; height: auto; background: var(--tb-band-on);
  }
  #body_wrap .tb-steps > .tb-steps__ok::before{
    left: 4px; width: 3px; height: auto;
  }
  /* 縦並びでは、区切りを帯の上端の白い線にする */
  #body_wrap .tb-steps > .tb-steps__on:not(:first-child)::before,
  #body_wrap .tb-steps > .tb-steps__ok:not(:first-child)::before{
    box-shadow: inset 0 1px 0 var(--bg);
  }
  #body_wrap .tb-steps > .tb-steps__on + .tb-steps__ok::before{
    background: linear-gradient(to bottom, var(--tb-band-on), var(--tb-band-ok));
  }
  #body_wrap .tb-steps .tb-steps__note{
    position: static; height: auto; line-height: 1.6;
    margin-top: 8px !important;
  }
}


/* ===== 09 写真カード（.tb-cards） =========================== */
/* 同じ大きさの写真の下に、線・タイトル・説明を置くカードを横に並べる（選ばれる理由など）。
   使い方：「カラム」ブロックを3列（列の数は自由）で置き、追加CSSクラスに tb-cards。
   各列（内側のカラム）の中身は、上から  画像 → 見出しH3 → 段落（説明）
   画像を入れずに 見出しH3 → 段落 だけにすると、「線・タイトル・説明」の表になる
   （相談の時期の2段目など）
   写真は元の縦横比に関係なく、横3：縦2で切り抜いて同じ大きさにそろえる。
   768px未満では縦に1列で並ぶ。 */

#body_wrap .tb-cards{
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 42px) !important;
  row-gap: 48px !important;
  margin-top: 56px !important;
}
#body_wrap .tb-cards > .wp-block-column{
  margin: 0 !important; flex-basis: auto !important; min-width: 0;
}
/* 写真：横3：縦2で切り抜く */
#body_wrap .tb-cards .wp-block-image{ margin: 0 !important; }
#body_wrap .tb-cards .wp-block-image img{
  display: block; width: 100% !important; height: auto !important;
  aspect-ratio: 3 / 2; object-fit: cover;
}
/* タイトル：上に濃い細線 */
#body_wrap .tb-cards h3{
  margin: 24px 0 12px !important; padding: 20px 0 0 !important;
  border: 0 !important; border-top: 1px solid var(--ink) !important;
  background: none !important; box-shadow: none !important;
  font-family: var(--serif-jp); font-size: 19px; font-weight: 600;
  line-height: 1.55; letter-spacing: .04em; color: var(--ink);
}
#body_wrap .tb-cards h3::before,
#body_wrap .tb-cards h3::after{ display: none !important; }
/* 写真なしで使う場合（見出しH3が列の最初）：線から始める */
#body_wrap .tb-cards > .wp-block-column > h3:first-child{ margin-top: 0 !important; }
/* 段階の図（tb-steps）のすぐ下に置いた場合：
   上の段と列の左端をそろえる（列の間隔を0にし、各列の右に余白を取る＝tb-steps と同じ割り方）。
   線は各列の右余白の分だけ途切れる。上の段との間は少し詰める */
#body_wrap .tb-steps + .tb-cards{
  margin-top: 48px !important;
  column-gap: 0 !important;
}
#body_wrap .tb-steps + .tb-cards > .wp-block-column{ padding-right: 28px; }
@media (max-width: 767.98px){
  #body_wrap .tb-steps + .tb-cards > .wp-block-column{ padding-right: 0; }
}
/* 説明 */
#body_wrap .tb-cards > .wp-block-column > p{
  margin: 0 !important;
  font-size: 14.5px; line-height: 1.95; letter-spacing: .02em;
  color: var(--ink2);
}

@media (max-width: 767.98px){
  #body_wrap .tb-cards{
    grid-auto-flow: row; grid-template-columns: 1fr;
    margin-top: 40px !important;
  }
}


/* ===== 10 枠付きの箱（.tb-boxes） =========================== */
/* 枠で囲んだ箱を横に並べ、各箱の下にボタンを置く（資料・ご相談など）。
   使い方：「カラム」ブロックを3列（列の数は自由）で置き、追加CSSクラスに tb-boxes。
   各列（内側のカラム）の中身は、上から
     段落（小さな前置き「無料レポート」） → 見出しH3 → 段落（説明） → ボタン
   ボタンの見た目は、ボタンブロックの「スタイル」で選ぶ：
     輪郭（アウトライン）＝白地に黒枠 / 塗りつぶし＝レンガ色
   ボタンは箱の下端にそろう。768px未満では縦に1列で並ぶ。 */

#body_wrap .tb-boxes{
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 22px) !important;
  margin-top: 56px !important;
}
#body_wrap .tb-boxes > .wp-block-column{
  display: flex; flex-direction: column;
  margin: 0 !important; flex-basis: auto !important; min-width: 0;
  padding: 38px 30px 30px;
  border: 1px solid var(--line);
  background: var(--surface);
}
/* 前置き（最初の段落） */
#body_wrap .tb-boxes > .wp-block-column > p:first-child{
  margin: 0 0 10px !important;
  font-size: 12.5px; letter-spacing: .08em; color: var(--ink3);
}
/* 見出し */
#body_wrap .tb-boxes h3{
  margin: 0 0 12px !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  font-family: var(--serif-jp); font-size: 19px; font-weight: 600;
  line-height: 1.55; letter-spacing: .04em; color: var(--ink);
}
#body_wrap .tb-boxes h3::before,
#body_wrap .tb-boxes h3::after{ display: none !important; }
/* 説明 */
#body_wrap .tb-boxes > .wp-block-column > p:not(:first-child){
  margin: 0 !important;
  font-size: 14.5px; line-height: 1.95; letter-spacing: .02em;
  color: var(--ink2);
}
/* ボタン：箱の下端にそろえ、幅いっぱい */
#body_wrap .tb-boxes .wp-block-buttons{
  margin: auto 0 0 !important; padding-top: 28px;
  display: block !important;
}
#body_wrap .tb-boxes .wp-block-button{ width: 100% !important; margin: 0 !important; }
#body_wrap .tb-boxes .wp-block-button__link{
  display: block !important; width: 100% !important; box-sizing: border-box;
  padding: 16px 12px !important;
  border-radius: 0 !important; box-shadow: none !important;
  font-size: 14px !important; letter-spacing: .06em; line-height: 1.5;
  text-align: center; text-decoration: none !important;
  background: var(--brick) !important; color: #fff !important;
  border: 1px solid var(--brick) !important;
  transition: background .2s, color .2s, border-color .2s;
}
#body_wrap .tb-boxes .wp-block-button__link:hover{
  background: var(--brick-ink) !important; border-color: var(--brick-ink) !important;
}
/* 輪郭（アウトライン）スタイル */
#body_wrap .tb-boxes .is-style-outline .wp-block-button__link{
  background: transparent !important; color: var(--ink) !important;
  border-color: var(--ink) !important;
}
#body_wrap .tb-boxes .is-style-outline .wp-block-button__link:hover{
  background: var(--ink) !important; color: #fff !important;
}

@media (max-width: 767.98px){
  #body_wrap .tb-boxes{
    grid-auto-flow: row; grid-template-columns: 1fr;
    margin-top: 40px !important;
  }
}


/* ===== 12 強調の一文（.tb-pull） ============================ */
/* 本文の途中に置く、左にレンガ色の縦線が付いた強調の一文（価値とリスクの「見え方の低下は…」など）。
   使い方：段落ブロックの追加CSSクラスに tb-pull。どのセクションでも使える */
#body_wrap p.tb-pull{
  margin: 2.4em 0 !important;
  padding: 4px 0 4px 22px !important;
  border-left: 2px solid var(--brick);
  background: none;
  font-family: var(--serif-jp); font-size: 18px; font-weight: 500;
  line-height: 1.9 !important; letter-spacing: .04em !important; color: var(--ink);
}
@media (max-width: 599.98px){
  #body_wrap p.tb-pull{ font-size: 16.5px; padding-left: 18px !important; }
}


/* ===== 13 静的HTMLの埋め込み（[tb_html dir="…"]） ============ */
/* /opt/<dir>/index.html を固定ページに差し込んだ部分。中身の見た目は index.html の <style> が決める。
   ここでは、標準幅で中央に置くことと、SWELLが本文の見出しに付ける装飾（帯・線・余白）を外すことだけを行う。
   ※ index.html 側で見出しに線や余白を付けたいときは、#body_wrap から始まる指定で書く */
#body_wrap .tb-html{
  position: relative;
  width: var(--w-std); max-width: none;
  margin-left: calc(50% - var(--w-std) / 2);
  margin-right: calc(50% - var(--w-std) / 2);
}
#body_wrap .tb-html :is(h1, h2, h3, h4){
  background: none; border: 0; box-shadow: none; padding: 0;
}
#body_wrap .tb-html :is(h1, h2, h3, h4)::before,
#body_wrap .tb-html :is(h1, h2, h3, h4)::after{ content: none; display: none; }


/* ===== 14 設計の進め方の表（.tb-process） ================== */
/* 枠で区切った列に、Step・見出し・「決めること」「当社から」の箇条書きを並べる（②設計の進め方など）。
   使い方：「カラム」ブロックを4列（列の数は自由）で置き、追加CSSクラスに tb-process。
   各列（内側のカラム）の中身は、上から
     段落「Step 1」 → 見出しH3「企画」 →
     段落「決めること」 → リスト → 段落「当社から」 → リスト
   ・1つ目のリストは灰色の線、2つ目以降のリストはレンガ色の線の印になる（クラス不要）。
   ・上の帯を淡いレンガ色にしたい列（ご相談の適期）は、内側のカラムに tb-process__on。
   ・帯の文字は、強調した最初の列のいちばん最後に段落を置き、追加CSSクラスに tb-process__note。
   ・「この段階でも可」の列（例：実施設計・施工）は、内側のカラムに tb-process__ok（さらに淡い帯。2026-10-19 追加）。
   768px未満では縦に1列で並ぶ。 */

#body_wrap .tb-process{
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 !important;
  margin-top: 40px !important;
  border: 1px solid var(--line);
}
#body_wrap .tb-process > .wp-block-column{
  position: relative;
  margin: 0 !important; flex-basis: auto !important; min-width: 0;
  padding: 46px 20px 26px;
  border-left: 1px solid var(--line);
}
#body_wrap .tb-process > .wp-block-column:first-child{ border-left: 0; }
/* 上の帯 */
#body_wrap .tb-process > .wp-block-column::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 24px; border-bottom: 1px solid var(--line);
}
#body_wrap .tb-process > .tb-process__on::before{ background: var(--tb-band-on); }
#body_wrap .tb-process > .tb-process__ok::before{
  background: var(--tb-band-ok);
}
/* 適期（__on）のすぐ右の「可」の列（例：Step3）：帯を、左の淡いレンガ色から右の「可」の色へのグラデーションにする。
   エディターでの追加の指定は不要（並び順で自動）。列の区切りのタテ線は元からある。2026-10-23 */
#body_wrap .tb-process > .tb-process__on + .tb-process__ok::before{
  background: linear-gradient(to right, var(--tb-band-on), var(--tb-band-ok));
}
#body_wrap .tb-process .tb-process__note{
  position: absolute; z-index: 1; top: 0; left: 20px;
  margin: 0 !important; padding: 0 !important;
  height: 24px; line-height: 24px;
  font-size: 11.5px; letter-spacing: .06em; color: var(--brick); /* メインカラー（2026-10-26） */
}

/* Step番号（最初の段落） */
#body_wrap .tb-process > .wp-block-column > p:first-child{
  margin: 0 0 2px !important;
  font-family: var(--serif-en); font-size: 13.5px; letter-spacing: .04em;
  color: var(--ink3);
}
/* 見出し */
#body_wrap .tb-process h3{
  margin: 0 0 18px !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  font-family: var(--serif-jp); font-size: 20px; font-weight: 600;
  line-height: 1.5; letter-spacing: .04em; color: var(--ink);
}
#body_wrap .tb-process h3::before,
#body_wrap .tb-process h3::after{ display: none !important; }
/* 小見出し（決めること・当社から） */
#body_wrap .tb-process > .wp-block-column > p:not(:first-child):not(.tb-process__note){
  margin: 18px 0 6px !important;
  font-size: 11.5px; letter-spacing: .1em; line-height: 1.6;
  color: var(--ink3);
}
#body_wrap .tb-process > .wp-block-column > h3 + p{ margin-top: 0 !important; }

/* 箇条書き：SWELLの印を消して、短い線の印にする */
#body_wrap .tb-process ul{
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important;
}
#body_wrap .tb-process ul > li{
  position: relative;
  margin: 0 0 4px !important; padding: 0 0 0 14px !important;
  font-size: 13.5px; line-height: 1.75; letter-spacing: .02em;
  color: var(--ink2);
}
#body_wrap .tb-process ul > li::before{
  content: "" !important; position: absolute !important;
  left: 0 !important; top: .87em !important;
  width: 6px !important; height: 1px !important;
  border: 0 !important; border-radius: 0 !important;
  background: var(--ink3) !important;
  transform: none !important;
}
/* 2つ目以降のリスト（当社から）はレンガ色の印 */
#body_wrap .tb-process ul ~ ul > li::before{
  height: 2px !important; top: .8em !important;
  background: var(--brick) !important;
}

@media (max-width: 767.98px){
  #body_wrap .tb-process{ grid-auto-flow: row; grid-template-columns: 1fr; }
  #body_wrap .tb-process > .wp-block-column{ border-left: 0; border-top: 1px solid var(--line); }
  #body_wrap .tb-process > .wp-block-column:first-child{ border-top: 0; }
}





/* ===== 17 独立したリンクの「→」（.tb-more） ================== */
/* 段落がリンク1つだけのもの（「〇〇を見る」「〇〇を読む」など）に、inc/more-link.php が
   自動で .tb-more を付ける。文の途中のリンク・フッター・メニューには付かない。
   手動：段落の追加CSSクラスに tb-more（付ける）／ tb-no-arrow（付けない）。2026-10-26 */
#body_wrap a.tb-more::after,
#body_wrap p.tb-more > a::after{
  content: "→";
  display: inline-block;
  margin-left: .6em;
  text-decoration: none;
  transition: transform .2s ease;
}
#body_wrap a.tb-more:hover::after,
#body_wrap p.tb-more > a:hover::after{ transform: translateX(3px); }
#body_wrap p.tb-no-arrow > a::after{ content: none; }


/* ===== 18 コラムの紹介（[tb_column_pickup]）：場面ラベルもリンクにする ===== */
/* 「投資判断の場で」「企画会議で」などのラベルを押しても、右（下）の記事に移動するようにする。
   リンク先は、ショートコードで指定した投稿（タイトルのリンク）と同じ。プラグインは変えず、CSSだけで行う：
   タイトルのリンクの当たり判定を、行（リードはラベル〜説明文のまとまり）全体に広げる。2026-10-30 */
#body_wrap .tb-colpick__lead,
#body_wrap .tb-colpick__item{ position: relative; }
#body_wrap .tb-colpick__leadTtl a::after,
#body_wrap .tb-colpick__ttl::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* 行のどこにマウスを乗せても、タイトルとラベルの色が変わる（リンクだと分かるように） */
#body_wrap .tb-colpick__item:hover .tb-colpick__ttl,
#body_wrap .tb-colpick__lead:hover .tb-colpick__leadTtl a{ color: var(--colpick-accent, var(--brick)) !important; }
#body_wrap .tb-colpick__item:hover .tb-colpick__scene,
#body_wrap .tb-colpick__lead:hover .tb-colpick__scene{ opacity: .75; }