@charset "UTF-8";
/* ============================================================================
 * TROBZ Column — 記事デザイン・目次・CTA・監修プロフィール・関連記事
 * ----------------------------------------------------------------------------
 * すべての指定を .tz-article / .tzc-* の中に限定している。
 * サイトの他のページ（トップ・固定ページ等）には影響しない。
 *
 * ■ 色のルール（見にくさ対策）
 *   --tzc-accent（明るい色）は【文字の背景に使わない】。装飾の線・マーカー専用。
 *   文字を乗せる面は --tzc-deep（濃色）＋白。コントラスト比4.5:1以上を必ず確保する。
 *   「明るい色の背景に濃い文字」は基準を割りやすいので使わない。
 *
 * ■ 案件ごとの色は config.php の 'color' で上書きされる（:root に流し込まれる）
 * ========================================================================== */

:root{
  --tzc-accent:     #77af35;   /* 明るい色。装飾専用 */
  --tzc-deep:       #2c6738;   /* 文字を乗せる面 */
  --tzc-deep-dark:  #224f2c;   /* ホバー */
  --tzc-deep2:      #1d4224;   /* グラデの終点 */
  --tzc-ink:        #1f2b22;   /* 見出しの文字 */
  --tzc-text:       #474f49;   /* 本文 */
  --tzc-line:       #e4e9e1;   /* 罫線 */
  --tzc-soft:       #f4f8ee;   /* 淡い地 */
  --tzc-muted:      #70736c;   /* 日付など。#999は白地で2.85:1と基準割れのため濃くしている */
  --tzc-radius:     16px;      /* カードの角丸 */
  --tzc-radius-btn: 8px;       /* ボタンの角丸 */

  /* CTA②専用の暖色。サイトが単色に寄るとき、CV導線1箇所だけ補色に振る */
  --tzc-ivory:      #faf6ec;
  --tzc-ivory-line: #e8dcc4;
  --tzc-gold:       #8a5c10;   /* 白文字で5.8:1 */
  --tzc-gold-dark:  #6f4a0d;
  --tzc-gold-deco:  #c9a227;   /* 装飾専用の明るい金 */
}


/* ★box-sizing を明示する。
   テーマ側が border-box を敷いていない環境だと、width:100% のボタンに
   padding と border が加算されて親からはみ出す（スマホで実際に発生した）。
   プラグインの部品だけに限定して指定する。 */
.tzc-toc, .tzc-toc *,
.tzc-cta, .tzc-cta *,
.tzc-profile, .tzc-profile *,
.tzc-related, .tzc-related *,
.tzc-prevnext, .tzc-prevnext *,
.tzc-arch, .tzc-arch *,
.tzc-single, .tzc-single *{
  box-sizing:border-box;
}


/* ############################################################################
 * 0. 記事本文のデザイン（.tz-article）
 * ★記事HTML全体を <div class="tz-article"> で囲むこと。囲み忘れると1つも当たらない
 * ######################################################################## */
/* ============================================================
   TROBZ 記事デザイン（汎用版）
   ------------------------------------------------------------
   どのWordPressサイトでも使える記事用スタイルです。
   すべての指定を .tz-article の中だけに限定しているため、
   サイトの他の部分（トップページ・固定ページ等）には影響しません。

   使い方は3通り。サイトの状況に応じて選んでください。

   ① 外観 → カスタマイズ → 追加CSS に貼る（推奨）
      テーマを触らないので、テーマ更新でも消えません。1回貼れば全記事に効きます。

   ② 記事HTMLの先頭に styleタグ で囲んで同梱する
      サイトのCSSを触れない場合。記事ごとに同じ内容が入ります。

   ③ テーマのCSSに組み込む（弊社管理サイト）

   記事HTML全体を div class=tz-article ～ /div で囲んでください。
   ============================================================ */

/* ★重要：ここから下の「.tz-article 要素」セレクタは :where() で包んである。
 *
 *   プラグインは目次・CTAを【記事本文の中】に挿入する。
 *   つまり <div class="tz-article"> の内側に .tzc-* の部品が入る。
 *
 *   このとき素の指定（.tz-article p / .tz-article a）は詳細度 (0,1,1) となり、
 *   部品側のクラス指定 (0,1,0) に競り勝ってしまう。実際に次の事故が起きた：
 *     ・CTAボタンの枠が .tz-article a の border-bottom に置き換わり、下辺が消えた
 *     ・CTA③の中央寄せが .tz-article p の margin に打ち消され、左寄せになった
 *
 *   :where() で包むと詳細度が 0 になり、「記事側で何も指定が無いときの既定」
 *   として振る舞う。部品のクラス指定が必ず勝つ。
 */

.tz-article{
  --tz-navy:var(--tzc-deep,#2c6738);
  --tz-navy-l:var(--tzc-accent,#9fc65b);
  --tz-head:var(--tzc-deep,#2c6738);
  --tz-line:var(--tzc-line,#ddd);
  --tz-line-d:#d5d9d0;
  --tz-text:var(--tzc-text,#333);
  --tz-ink:var(--tzc-ink,#000);
  --tz-bg-soft:#f5f8f1;
  --tz-zebra:#f7f8f4;
  color:var(--tz-text);
}

/* ===== 見出し ===== */
.tz-article :where(h2){
  font-size:23px;line-height:1.6;color:var(--tz-ink);font-weight:700;
  background:#fff;border-left:5px solid var(--tz-navy);border-bottom:1px solid var(--tz-line);
  padding:10px 0 12px 18px;margin:60px 0 26px;letter-spacing:.03em;
}
.tz-article :where(h3){
  font-size:18px;line-height:1.6;color:var(--tz-navy);font-weight:700;
  margin:40px 0 14px;padding-left:14px;border-left:3px solid var(--tz-navy-l);
}
.tz-article :where(h4){font-size:16px;color:var(--tz-navy);font-weight:700;margin:30px 0 12px}

/* ===== 本文 ===== */
.tz-article :where(p){line-height:1.9;margin:0 0 1.5em;color:var(--tz-text);font-size:16px}
.tz-article :where(strong){color:var(--tz-ink);font-weight:700}
.tz-article :where(mark){background:linear-gradient(transparent 60%,#fff799 60%);color:inherit;font-weight:700;padding:0 2px}
.tz-article :where(a){color:var(--tz-navy);border-bottom:1px solid rgba(61,107,4,.35);text-decoration:none}
.tz-article :where(a:hover){border-bottom-color:var(--tz-navy)}
.tz-article :where(ul),.tz-article :where(ol){margin:0 0 26px 1.5em;padding:0}
.tz-article :where(li){margin-bottom:10px;line-height:1.95}
.tz-article :where(blockquote){
  border-left:4px solid var(--tz-navy-l);background:var(--tz-zebra);color:#4c5049;
  padding:20px 24px;margin:30px 0;border-radius:0 6px 6px 0;
}

/* ===== WordPress標準クラス =====
   詳細テンプレートに .post_content を付けない（親テーマの p/h2/ol/th 指定に
   上書きされるため）ので、テーマが持っていた画像配置・キャプションの指定を自前で持つ */
.tz-article :where(img){max-width:100%;height:auto}
.tz-article :where(.alignleft){float:left;margin:7px 24px 7px 0}
.tz-article :where(.alignright){float:right;margin:7px 0 7px 24px}
.tz-article :where(.aligncenter){display:block;margin:2em auto}
.tz-article :where(.alignnone){display:block;margin:0 0 1.5em}
.tz-article :where(.wp-caption){max-width:100%;margin:0 0 2em;padding:10px;background:#fff;border:1px solid var(--tz-line)}
.tz-article :where(.wp-caption img){display:block;margin:0 auto}
.tz-article :where(.wp-caption-text){margin:0;padding:10px 0 0;font-size:14px;line-height:1.5;text-align:center;color:var(--tz-text)}
.tz-article::after{content:"";display:table;clear:both}

/* ===== 表 ===== */
/* 表の既定：枠なし・マージンなし（記事HTMLが表を箱で囲んでいる場合に二重枠を防ぐ） */
.tz-article :where(table){
  width:100%;border-collapse:collapse;margin:0;font-size:15px;
  background:#fff;border:none;border-radius:0;
}
/* 囲みが無く、記事直下に置かれた表だけ自前で枠と余白を持つ */
.tz-article > :where(table){border:1px solid var(--tz-line);border-radius:10px;overflow:hidden;margin:34px 0}
/* 表題（表の上の見出し）。<caption> に入れると自動でこの形になります */
.tz-article :where(caption){
  caption-side:top;text-align:left;font-weight:700;color:var(--tz-ink);font-size:16px;
  padding:0 0 12px;line-height:1.6;
}
.tz-article :where(caption small){
  display:block;font-weight:400;font-size:13.5px;color:#6f736a;margin-top:4px;line-height:1.7;
}
.tz-article :where(thead tr){background:var(--tz-head)}
.tz-article :where(th){
  background:var(--tz-head);color:#fff;font-weight:600;text-align:center;
  padding:14px 18px;letter-spacing:.04em;white-space:nowrap;
  border:1px solid rgba(255,255,255,.22);
}
.tz-article :where(td){
  padding:14px 18px;color:var(--tz-text);text-align:left;border:1px solid var(--tz-line);
}
.tz-article :where(td:first-child){font-weight:700;color:var(--tz-ink)}
.tz-article :where(tbody tr:nth-child(even) td){background:var(--tz-zebra)}

/* 表を横スクロールさせる囲み（枠は付けない：二重枠になるため） */
/* 表カード：この箱が枠を担当する */
.tz-article .a-tablecard{
  margin:34px 0;overflow-x:auto;background:#fff;border:1px solid var(--tz-line);border-radius:10px;padding:0;
}
.tz-article .a-tablecard table{margin:0;border:none;border-radius:0}

/* ===== この記事でわかること ===== */
.tz-article .a-summary{
  border:2px solid var(--tz-navy);border-radius:15px;padding:35px 25px 22px;margin:40px 0;
  background:#fff;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.tz-article .a-summary::before{
  content:attr(data-title);position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  background:var(--tz-navy);color:#fff;font-size:16px;font-weight:700;
  padding:5px 30px;border-radius:50px;letter-spacing:.05em;white-space:nowrap;
}
.tz-article .a-summary ul{list-style:none;margin:0;padding:0}
.tz-article .a-summary li{
  position:relative;padding-left:30px;margin-bottom:14px;color:var(--tz-text);
  line-height:1.7;font-size:15px;
}
.tz-article .a-summary li:last-child{margin-bottom:0}
.tz-article .a-summary li::before{
  content:"\2714";position:absolute;left:0;top:0;color:var(--tz-navy);font-weight:700;font-size:17px;
}

/* ===== ポイントボックス ===== */
.tz-article .a-point{
  border:1px solid #d9e2d0;border-left:5px solid var(--tz-navy);background:var(--tz-bg-soft);
  border-radius:0 8px 8px 0;padding:24px 26px;margin:32px 0;
}
.tz-article .a-point .a-ttl{font-weight:700;color:var(--tz-navy);margin-bottom:10px;font-size:16px}
.tz-article .a-point ul{list-style:none;margin:0;padding:0}
.tz-article .a-point li{
  border-left:4px solid var(--tz-navy-l);background:#fff;border-radius:0 6px 6px 0;
  padding:12px 16px;margin-bottom:10px;line-height:1.8;font-size:15px;
}
.tz-article .a-point li:last-child{margin-bottom:0}
.tz-article .a-point li strong{color:var(--tz-navy)}
.tz-article .a-point p:last-child{margin-bottom:0}

/* ===== 注意・補足ボックス ===== */
.tz-article .a-note{
  border:2px solid #d9822b;border-radius:8px;padding:28px 25px 20px;margin:35px 0;
  background:#fdf8f2;position:relative;
}
.tz-article .a-note .a-ttl{
  position:absolute;top:-14px;left:20px;margin:0;font-weight:700;
  background:#d9822b;color:#fff;padding:4px 15px;font-size:14px;border-radius:4px;
}
.tz-article .a-note p{margin:0;line-height:1.8;color:#4a3b2a;font-size:15px}

/* ===== 良い例・悪い例の対比 ===== */
.tz-article .a-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0}
.tz-article .a-compare>div{border-radius:10px;padding:22px 24px;border:1px solid}
.tz-article .a-compare .ok{border-color:#bcd9c4;background:#f5faf6}
.tz-article .a-compare .ng{border-color:#e3c4c0;background:#fdf6f5}
.tz-article .a-compare .a-ttl{font-weight:700;margin-bottom:10px;font-size:15px}
.tz-article .a-compare .ok .a-ttl{color:#2c7a4b}
.tz-article .a-compare .ng .a-ttl{color:#a4483c}
.tz-article .a-compare p:last-child{margin-bottom:0}

/* ===== 手順（ステップ） ===== */
.tz-article .a-steps{counter-reset:tzstep;list-style:none;margin:32px 0;padding:0}
.tz-article .a-steps li{
  counter-increment:tzstep;position:relative;padding:0 0 22px 52px;
  border-left:2px solid #dde3d7;margin-left:16px;
}
.tz-article .a-steps li:last-child{border-left-color:transparent;padding-bottom:0}
.tz-article .a-steps li::before{
  content:counter(tzstep);position:absolute;left:-17px;top:-2px;width:32px;height:32px;
  border-radius:50%;background:var(--tz-navy);color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.tz-article .a-steps .a-ttl{font-weight:700;color:var(--tz-ink);margin-bottom:6px}

/* ===== まとめ・FAQ の見出し ===== */
.tz-article .a-lead-ttl{
  border-bottom:2px solid var(--tz-navy);padding-bottom:10px;color:var(--tz-navy);
  font-size:22px;font-weight:700;margin:56px 0 26px;line-height:1.5;
}

/* ===== FAQ ===== */
.tz-article .a-faq{margin-bottom:40px}
.tz-article .a-qa{
  background:#f9f9f9;border-left:6px solid var(--tz-navy);padding:20px;margin-bottom:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.tz-article .a-qa .q{
  color:var(--tz-navy);font-weight:700;font-size:18px;line-height:1.5;
  position:relative;padding-left:42px;margin-bottom:12px;
}
.tz-article .a-qa .q::before{
  content:"Q";position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;
  background:var(--tz-navy);color:#fff;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.tz-article .a-qa .a{color:var(--tz-text);line-height:1.7;position:relative;padding-left:42px}
.tz-article .a-qa .a::before{
  content:"A";position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;
  background:#b9985a;color:#fff;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}

/* ===== スマホ ===== */
@media(max-width:640px){
  .tz-article :where(h2){font-size:20px;padding-left:14px;margin:48px 0 20px}
  .tz-article :where(h3){font-size:17px}
  .tz-article :where(p){font-size:15.5px}
  .tz-article :where(table){font-size:13.5px;min-width:480px}
  .tz-article :where(th),.tz-article :where(td){padding:12px 12px}
  .tz-article .a-tablecard{padding:12px;border-radius:10px}
  .tz-article .a-compare{grid-template-columns:1fr}
  .tz-article .a-summary{padding:32px 18px 20px}
  .tz-article .a-lead-ttl{font-size:20px}
}


/* ############################################################################
 * 1. 読了プログレスバー
 * ★JSが動かなければ幅0のまま。本文の表示には一切影響しない
 * ######################################################################## */
.tzc-progress{
  position:fixed; top:0; left:0; right:0;
  height:3px; z-index:9999;
  background:transparent; pointer-events:none;
}
.tzc-progress span{
  display:block; height:100%; width:0;
  background:var(--tzc-accent);
  transition:width .1s linear;
}


/* ############################################################################
 * 2. 目次
 * ★リストは既定で開いている。折りたたみはJSが後から付ける
 * ######################################################################## */
.tzc-toc{
  margin:44px 0;
  background:var(--tzc-soft);
  border:1px solid var(--tzc-line);
  border-radius:var(--tzc-radius);
  padding:26px 30px;
}
.tzc-toc__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:14px;
}
.tzc-toc__ttl{
  display:flex; align-items:center; gap:11px;
  margin:0;
  font-size:15px; font-weight:700; letter-spacing:.1em;
  color:var(--tzc-deep);
}
.tzc-toc__ttl::before{
  content:""; width:20px; height:2px; border-radius:1px;
  background:var(--tzc-accent);
}
/* 折りたたみボタン（JSが挿入する） */
.tzc-toc__toggle{
  flex:none;
  background:none; border:1px solid var(--tzc-deep); border-radius:999px;
  color:var(--tzc-deep);
  font-size:12px; font-weight:700; letter-spacing:.06em;
  padding:5px 15px; cursor:pointer;
  font-family:inherit;
  transition:background .2s,color .2s;
}
.tzc-toc__toggle:hover,
.tzc-toc__toggle:focus{ background:var(--tzc-deep); color:#fff }

.tzc-toc__list{
  counter-reset:tzctoc;
  list-style:none; margin:0; padding:0;
}
.tzc-toc__list[hidden]{ display:none }
.tzc-toc__list li{
  counter-increment:tzctoc;
  margin:0; padding:0;
  border-top:1px solid var(--tzc-line);
}
.tzc-toc__list li:first-child{ border-top:none }
.tzc-toc__list a{
  display:flex; gap:12px; align-items:baseline;
  padding:11px 2px;
  color:var(--tzc-ink);
  font-size:14.5px; line-height:1.7;
  text-decoration:none;
  border-bottom:none;
}
.tzc-toc__list a::before{
  content:counter(tzctoc,decimal-leading-zero);
  flex:none;
  color:var(--tzc-deep);
  font-size:12px; font-weight:700; letter-spacing:.04em;
}
.tzc-toc__list a:hover,
.tzc-toc__list a:focus{ color:var(--tzc-deep); text-decoration:underline }

/* 目次から飛んだとき、見出しがヘッダーに隠れないようにする */
.tz-article h2[id]{ scroll-margin-top:90px }


/* ############################################################################
 * 3. 記事内CTA（3種）
 * ★地・大きさ・並びを全部変える。同じ形が3回出ると無視される
 *     ① 写真＋暗幕／大／縦積み   ② 暖色カード／中／横2カラム
 *     ③ アウトライン／小／中央揃え
 * ######################################################################## */
.tzc-cta{ font-family:inherit }
.tzc-cta a{ text-decoration:none }

/* ---------- ① 大型バナー（唯一の濃色ベタ） ---------- */
.tzc-cta--hero{
  position:relative; display:block;
  margin:56px 0;
  background:linear-gradient(125deg,#2f6b3a 0%,var(--tzc-deep2) 100%);
  background-size:cover; background-position:center;
  border-radius:var(--tzc-radius);
  box-shadow:0 8px 28px rgba(31,43,34,.16);
  overflow:hidden; color:#fff;
}
/* 写真の上でも文字が読めるよう暗幕を必ず敷く */
.tzc-cta--hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(20,42,24,.9) 0%,rgba(20,42,24,.55) 70%,rgba(20,42,24,.35) 100%);
  opacity:0;
}
.tzc-cta--hero:not(.is-nophoto)::before{ opacity:1 }
/* 写真が無いときは装飾の同心円で間を持たせる */
.tzc-cta--hero.is-nophoto::after{
  content:""; position:absolute; right:-90px; top:-120px;
  width:340px; height:340px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 60px rgba(255,255,255,.04), 0 0 0 130px rgba(255,255,255,.03);
  pointer-events:none;
}
.tzc-cta__inner{ position:relative; z-index:1; padding:52px 50px 54px; max-width:640px }
.tzc-cta--hero .tzc-cta__eyebrow{
  display:flex; align-items:center; gap:12px;
  margin:0 0 18px;
  font-size:12.5px; font-weight:700; letter-spacing:.22em;
  color:#c9e4a2;
}
.tzc-cta--hero .tzc-cta__eyebrow::before{
  content:""; width:26px; height:2px; border-radius:1px; background:var(--tzc-accent);
}
.tzc-cta--hero .tzc-cta__ttl{
  margin:0 0 16px; font-size:29px; line-height:1.45; font-weight:700;
  letter-spacing:.02em; color:#fff;
}
.tzc-cta--hero .tzc-cta__desc{ margin:0 0 32px; font-size:15.5px; line-height:2; color:#e2ecd8 }
.tzc-cta__btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 40px;
  background:#fff; color:var(--tzc-deep);
  font-size:16px; font-weight:700; letter-spacing:.04em;
  border-radius:var(--tzc-radius-btn);
  box-shadow:0 3px 12px rgba(0,0,0,.18);
  transition:background .2s,box-shadow .2s,transform .1s;
}
.tzc-cta__btn::after{ content:"→"; font-weight:700; transition:transform .2s }
.tzc-cta__btn:hover,.tzc-cta__btn:focus{
  background:#f0f6e6; color:var(--tzc-deep);
  box-shadow:0 1px 5px rgba(0,0,0,.2); transform:translateY(1px);
}
.tzc-cta__btn:hover::after{ transform:translateX(3px) }

/* ---------- ② 相談バナー（唯一の暖色） ----------
   プロのコンバージョンバナーの型で組む。
     ・視線が落ちる場所は右の「白い行動カード」1つ。区切り線や箱の入れ子は使わない
     ・見出しが最も大きく、ボタンが唯一の濃い面。それ以外は控えめに
     ・悩みは短い語のチップで「見せる」。読ませない
     ・地は暖色の淡いグラデ。金は装飾（上辺の線・チップの枠・番号）に留め、
       文字面には深い金 #8a5c10（白文字で5.8:1）だけを使う
   -------------------------------------------------------- */
.tzc-cta--offer{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  align-items:center; gap:44px;
  margin:56px 0;
  background:
    radial-gradient(140% 100% at 100% 0%, #fff8ea 0%, transparent 55%),
    linear-gradient(180deg,#fbf7ee 0%,#f7f1e3 100%);
  border:1px solid var(--tzc-ivory-line);
  border-radius:var(--tzc-radius);
  box-shadow:0 10px 30px rgba(61,47,20,.08);
  padding:46px 48px;
  color:var(--tzc-text);
  overflow:hidden;
}
/* 上辺の金の線（装飾） */
.tzc-cta--offer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--tzc-gold-deco) 0%,#e3c65e 55%,transparent 100%);
}
/* 右上の淡い装飾円。ベタ塗りの安さを消す */
.tzc-cta--offer::after{
  content:""; position:absolute; right:-120px; top:-140px;
  width:360px; height:360px; border-radius:50%;
  border:1px solid rgba(201,162,39,.18);
  box-shadow:0 0 0 56px rgba(201,162,39,.05);
  pointer-events:none;
}

/* ---- 左：コピー ---- */
.tzc-cta__offer-copy{ position:relative; z-index:1; min-width:0 }
.tzc-cta__offer-eyebrow{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px;
  font-size:11.5px; font-weight:700; letter-spacing:.24em; color:var(--tzc-gold);
}
.tzc-cta__offer-eyebrow::before{
  content:""; width:22px; height:2px; border-radius:1px; background:var(--tzc-gold-deco);
}
/* 見出しが最も大きい要素になるようにする */
.tzc-cta__offer-ttl{
  margin:0 0 14px;
  font-size:clamp(23px,2.6vw,29px); font-weight:700; line-height:1.5;
  letter-spacing:.02em; color:#2b2416;
}
.tzc-cta__offer-desc{
  margin:0 0 22px; font-size:14.5px; line-height:1.95; color:#5a5140;
}
/* 悩みのチップ：短い語で見せる */
.tzc-cta__concerns{
  display:flex; flex-wrap:wrap; gap:7px;
  margin:0; padding:0; list-style:none;
}
.tzc-cta__concerns li{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px 6px 10px;
  background:#fff; border:1px solid #e6d9bd; border-radius:50px;
  font-size:12.5px; font-weight:600; line-height:1.5; color:#5a4a22;
  white-space:nowrap;
}
.tzc-cta__concerns li::before{
  content:""; width:11px; height:5px; margin-top:-3px;
  border-left:2px solid var(--tzc-gold); border-bottom:2px solid var(--tzc-gold);
  transform:rotate(-45deg);
}

/* ---- 右：白い行動カード（視線の着地点） ---- */
.tzc-cta__card{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:stretch; text-align:center;
  background:#fff;
  border:1px solid #efe6d2;
  border-radius:var(--tzc-radius);
  box-shadow:0 14px 34px rgba(61,47,20,.14);
  padding:30px 28px 26px;
}
/* 「初回相談 無料」— 費用の不安を最初に消す */
.tzc-cta__badge{
  align-self:center; margin:0 0 14px;
  padding:5px 16px; border-radius:50px;
  background:#fff2d1; color:#7a5109;
  font-size:12px; font-weight:700; letter-spacing:.1em; line-height:1.7;
}
/* ★文字は常に白。テーマの a:visited / a:hover に奪われないよう全状態で固定 */
.tzc-cta__side-link,
.tzc-cta__side-link:link,
.tzc-cta__side-link:visited,
.tzc-cta__side-link:hover,
.tzc-cta__side-link:focus,
.tzc-cta__side-link:active{ color:#fff }
.tzc-cta__side-link{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:19px 26px; background:var(--tzc-gold);
  font-size:17px; font-weight:700; letter-spacing:.05em;
  border:none; border-radius:var(--tzc-radius-btn);
  box-shadow:0 8px 20px rgba(138,92,16,.32);
  transition:background .2s,box-shadow .2s,transform .12s;
}
.tzc-cta__side-link::after{ content:"→"; font-weight:700; transition:transform .25s }
.tzc-cta__side-link::before{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0));
  transition:left .55s ease;
}
.tzc-cta__side-link:hover,
.tzc-cta__side-link:focus{
  background:var(--tzc-gold-dark);
  box-shadow:0 4px 12px rgba(138,92,16,.36); transform:translateY(1px);
}
.tzc-cta__side-link:hover::after{ transform:translateX(4px) }
.tzc-cta__side-link:hover::before{ left:130% }
@media (prefers-reduced-motion:reduce){ .tzc-cta__side-link::before{ display:none } }
/* ボタン直下の一文 */
.tzc-cta__assure{
  margin:12px 0 0; font-size:12.5px; line-height:1.7; color:#6f6754;
}
.tzc-cta__assure::before{ content:"✓"; color:var(--tzc-gold); font-weight:700; margin-right:5px }
/* 電話：もう一つの手段。控えめに */
.tzc-cta__tel{
  margin-top:18px; padding-top:16px; border-top:1px solid #f0e8d6;
  font-size:13px; color:var(--tzc-text);
}
.tzc-cta__tel-label{
  display:block; margin-bottom:2px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; color:#6f6754;   /* 白地で5.6:1 */
}
.tzc-cta__tel a,
.tzc-cta__tel a:link,
.tzc-cta__tel a:visited{
  display:block; border-bottom:none;
  font-size:26px; line-height:1.25; font-weight:700; letter-spacing:.02em;
  color:var(--tzc-gold);
}
.tzc-cta__tel a:hover,.tzc-cta__tel a:focus{ color:var(--tzc-gold-dark) }
.tzc-cta__hours{ display:block; margin-top:3px; font-size:12px; color:#6f6754 }


/* ---------- ③ アウトライン（唯一の塗り無し） ----------
   ①＝写真の塗り／②＝暖色の面／③＝線で構成する。
   面を持たないぶん、線と余白の精度で見せる。
     ・上から降りる細い縦罫が、視線を見出しへ落とす
     ・対角のL字ブラケットで「額装」の見え方を作る
     ・地はほぼ白。ごく淡いグラデーションで奥行きだけ足す
   -------------------------------------------------------- */
.tzc-cta--outline{
  position:relative; display:block; margin:48px 0;
  background:
    radial-gradient(120% 90% at 50% 0%, #fbfdf7 0%, #ffffff 62%);
  border:1px solid var(--tzc-deep,#3d6b04);
  border-radius:var(--tzc-radius,0);
  padding:52px 44px 46px;
  text-align:center;
  overflow:hidden;
}
/* 対角のL字ブラケット（左上・右下） */
.tzc-cta--outline::before,
.tzc-cta--outline::after{
  content:""; position:absolute;
  width:26px; height:26px;
  border:2px solid var(--tzc-accent,#64b105);
  pointer-events:none;
}
.tzc-cta--outline::before{ top:12px; left:12px; border-right:0; border-bottom:0 }
.tzc-cta--outline::after{ bottom:12px; right:12px; border-left:0; border-top:0 }

/* 上から降りる細い縦罫。視線を見出しへ落とす */
.tzc-cta__outline-main{ position:relative; padding-top:26px }
.tzc-cta__outline-main::before{
  content:""; position:absolute; top:0; left:50%;
  width:1px; height:18px; margin-left:-.5px;
  background:linear-gradient(var(--tzc-accent,#64b105),rgba(100,177,5,0));
}
.tzc-cta__out-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:13px;
  margin:0 0 16px;
  font-size:11px; font-weight:700; letter-spacing:.34em; text-indent:.34em;
  color:var(--tzc-deep,#3d6b04);
}
.tzc-cta__out-eyebrow::before,
.tzc-cta__out-eyebrow::after{
  content:""; width:20px; height:1px; background:var(--tzc-accent,#64b105);
}
.tzc-cta__out-ttl{
  margin:0 0 14px;
  font-size:clamp(19px,2.1vw,23px); font-weight:600; line-height:1.75;
  letter-spacing:.02em; color:var(--tzc-ink,#000);
}
.tzc-cta__out-desc{
  margin:0 auto; max-width:32em;
  font-size:13.5px; line-height:2.1; color:#57604f;
}
/* ボタン：塗らずに線で立たせる。ホバーで反転させて初めて面になる */
.tzc-cta__btn--ghost{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  margin-top:28px; padding:15px 40px;
  background:transparent; color:var(--tzc-deep,#3d6b04);
  border:1px solid var(--tzc-deep,#3d6b04);
  border-radius:var(--tzc-radius-btn,50px);
  font-size:14.5px; font-weight:700; letter-spacing:.08em;
  transition:background .25s,color .25s,box-shadow .25s;
}
.tzc-cta__btn--ghost::after{
  content:"→"; font-weight:700; transition:transform .25s;
}
.tzc-cta__btn--ghost:link,
.tzc-cta__btn--ghost:visited{ color:var(--tzc-deep,#3d6b04) }
.tzc-cta__btn--ghost:hover,
.tzc-cta__btn--ghost:focus{
  background:var(--tzc-deep,#3d6b04); color:#fff;
  box-shadow:0 4px 14px rgba(61,107,4,.22);
}
.tzc-cta__btn--ghost:hover::after{ transform:translateX(4px) }


/* ############################################################################
 * 4. 監修企業プロフィール（写真なし・1カラム）
 * ★信頼は「情報行」が担う。許認可番号・登録番号を必ず1行入れる
 * ######################################################################## */
.tzc-profile{
  font-family:inherit; color:var(--tzc-text);
  background:#fff;
  border:1px solid var(--tzc-line);
  border-radius:var(--tzc-radius);
  box-shadow:0 4px 24px rgba(31,43,34,.07);
  margin:48px 0; overflow:hidden;
}
.tzc-profile__bar{
  position:relative;
  display:flex; align-items:center; gap:22px;
  background:var(--tzc-deep); padding:12px 26px;
}
.tzc-profile__bar::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--tzc-accent);
}
.tzc-profile__label{
  margin:0; font-size:13.5px; font-weight:500; letter-spacing:.26em;
  color:#fff; white-space:nowrap;
}
.tzc-profile__bar::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.25) }

/* 本体：左＝どんな事務所か（読ませる）／右＝事実と行動
   1カラムだと、説明文の行長を42emに抑えたぶん右側が余って左に寄って見える。
   2カラムにすると幅が自然に埋まり、読み物と事実が分かれて追いやすくなる。 */
.tzc-profile__body{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:0 48px;
  padding:26px 36px 28px;
}
.tzc-profile__lead{ min-width:0 }
.tzc-profile__side{
  min-width:0; display:flex; flex-direction:column;
  padding-left:48px; border-left:1px solid var(--tzc-line,#ddd);
}

/* 名称まわり */
.tzc-profile__kana{
  margin:0 0 5px; font-size:11px; font-weight:700; letter-spacing:.3em; color:var(--tzc-deep);
}
.tzc-profile__name{
  margin:0 0 8px; font-size:clamp(23px,2.4vw,27px); font-weight:700;
  line-height:1.3; letter-spacing:.03em; color:var(--tzc-ink,#000);
}
.tzc-profile__tagline{
  margin:0; font-size:14.5px; line-height:1.8; color:var(--tzc-ink,#000);
}
.tzc-profile__rule{
  width:46px; height:3px; border-radius:2px; background:var(--tzc-accent); margin:14px 0;
}
.tzc-profile__desc{
  margin:0; font-size:14px; line-height:1.9; color:var(--tzc-text,#333);
}

/* 情報行：縦積みの細罫リスト */
.tzc-profile__meta{
  margin:0 0 18px; padding:0; list-style:none;
  border-top:1px solid var(--tzc-line,#ddd);
}
.tzc-profile__meta li{
  display:grid; grid-template-columns:5.5em 1fr; gap:14px;
  padding:7px 2px; border-bottom:1px solid var(--tzc-line,#ddd);
  font-size:13.5px; line-height:1.75; min-width:0;
}
.tzc-profile__key{
  font-size:11.5px; font-weight:700; letter-spacing:.14em;
  color:var(--tzc-deep); padding-top:.35em;
}
.tzc-profile__meta li > span:last-child{
  min-width:0; word-break:break-word; overflow-wrap:anywhere; color:var(--tzc-text,#333);
}
/* 値の補足行（法人番号・かっこ書きなど）。主情報より一段落とす */
.tzc-profile__meta li > span:last-child > span{
  display:block; margin-top:2px; font-size:11.5px; line-height:1.6; color:var(--tzc-muted,#70736c);
}
.tzc-profile__meta a,
.tzc-profile__meta a:link,
.tzc-profile__meta a:visited{ color:var(--tzc-deep); border-bottom:none; word-break:break-all }

/* ボタンは右列の下端に置く（左右の列の高さが揃う） */
.tzc-profile__btn{
  align-self:flex-start; margin-top:auto;
  display:inline-flex; align-items:center; gap:11px;
  padding:13px 30px; background:var(--tzc-deep); color:#fff;
  font-size:14px; font-weight:700; letter-spacing:.05em; text-decoration:none;
  border:none; border-radius:var(--tzc-radius-btn);
  box-shadow:0 3px 10px rgba(61,107,4,.26);
  transition:background .2s,box-shadow .2s,transform .1s;
}
.tzc-profile__btn:link,
.tzc-profile__btn:visited,
.tzc-profile__btn:hover,
.tzc-profile__btn:focus{ color:#fff }
.tzc-profile__btn:hover,
.tzc-profile__btn:focus{
  background:var(--tzc-deep-dark);
  box-shadow:0 1px 4px rgba(61,107,4,.3); transform:translateY(1px);
}
.tzc-profile__btn svg{ flex:none; width:17px; height:17px }

/* 事務所：一宮・郡山を横に並べる。全幅に置くことで住所が折り返さない */
.tzc-profile__offices{
  padding:0 36px 26px;
}
.tzc-profile__offices-ttl{
  display:flex; align-items:center; gap:12px;
  margin:0 0 12px; padding-top:18px;
  border-top:1px solid var(--tzc-line,#ddd);
  font-size:11.5px; font-weight:700; letter-spacing:.16em; color:var(--tzc-deep);
}
.tzc-profile__offices-ttl::after{ content:""; flex:1; height:1px; background:var(--tzc-line,#ddd) }
.tzc-profile__offices-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
.tzc-profile__office{
  min-width:0; padding:14px 16px;
  background:#f7faf3; border:1px solid var(--tzc-line,#ddd);
}
.tzc-profile__office-name{
  margin:0 0 6px; font-size:13.5px; font-weight:700; line-height:1.5;
  color:var(--tzc-ink,#000);
}
.tzc-profile__office-name::before{
  content:""; display:inline-block; vertical-align:middle;
  width:14px; height:2px; margin-right:9px; background:var(--tzc-accent);
}
.tzc-profile__office-addr{
  margin:0 0 6px; font-size:13px; line-height:1.7; color:var(--tzc-text,#333);
}
.tzc-profile__office-addr .tzc-profile__zip{ display:block; font-size:12px; color:var(--tzc-muted,#70736c) }
.tzc-profile__office-tel{
  display:flex; flex-wrap:wrap; gap:4px 16px;
  margin:0; font-size:13px; line-height:1.7; color:var(--tzc-text,#333);
}
.tzc-profile__office-tel b{ font-weight:700; font-size:11px; letter-spacing:.1em; color:var(--tzc-muted,#70736c); margin-right:5px }
.tzc-profile__office-tel a,
.tzc-profile__office-tel a:link,
.tzc-profile__office-tel a:visited{ color:var(--tzc-deep); border-bottom:none; font-weight:700 }

.tzc-profile__foot{
  margin:0;   /* pの既定マージンが残ると下に白い隙間が出る */
  background:var(--tzc-soft); border-top:1px solid var(--tzc-line);
  padding:10px 24px; text-align:center;
  font-size:11px; font-weight:700; letter-spacing:.32em; color:var(--tzc-deep);
}


/* ############################################################################
 * 5. 前後記事（同カテゴリー内）
 * ★端の記事では空セルにして、枠は保つ
 * ######################################################################## */
.tzc-prevnext{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:20px; align-items:center;
  margin:48px 0 0; padding:22px 0;
  border-top:1px solid var(--tzc-line); border-bottom:1px solid var(--tzc-line);
}
.tzc-prevnext a{ text-decoration:none; color:var(--tzc-ink) }
.tzc-prevnext__cell--next{ text-align:right }
.tzc-prevnext__label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.18em;
  color:var(--tzc-deep); margin-bottom:5px;
}
.tzc-prevnext__ttl{
  display:block; font-size:14px; line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tzc-prevnext__cell a:hover .tzc-prevnext__ttl{ color:var(--tzc-deep) }
.tzc-prevnext__cell--home a{
  display:inline-block; white-space:nowrap;
  padding:10px 22px; border:1px solid var(--tzc-line); border-radius:var(--tzc-radius-btn);
  font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--tzc-deep);
  transition:background .2s,color .2s;
}
.tzc-prevnext__cell--home a:hover{ background:var(--tzc-deep); color:#fff }


/* ############################################################################
 * 6. 関連記事
 * ######################################################################## */
.tzc-related{ margin:48px 0 0 }
.tzc-related__ttl{
  display:flex; align-items:center; gap:12px;
  margin:0 0 20px; font-size:19px; font-weight:700; color:var(--tzc-ink);
}
.tzc-related__ttl::before{
  content:""; width:5px; height:21px; border-radius:3px; background:var(--tzc-deep);
}
.tzc-related__list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  list-style:none; margin:0; padding:0;
}
.tzc-related__list a{
  display:block; text-decoration:none; color:var(--tzc-ink);
  background:#fff; border:1px solid var(--tzc-line); border-radius:12px; overflow:hidden;
  transition:box-shadow .2s,transform .15s;
}
.tzc-related__list a:hover{ box-shadow:0 6px 20px rgba(31,43,34,.1); transform:translateY(-2px) }
.tzc-related__img{ display:block }
.tzc-related__img img{ display:block; width:100%; height:auto }
.tzc-related__body{ display:block; padding:14px 16px }
.tzc-related__cat{
  display:inline-block; margin-bottom:6px;
  font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--tzc-deep);
}
.tzc-related__name{ display:block; font-size:14.5px; line-height:1.7; font-weight:500 }


/* ############################################################################
 * 7. FAQ（アコーディオン）
 * ★<details> を使うのでJSは不要。JSが止まっても開閉できる
 *
 * ★Q／Aの丸バッジは記事デザイン側（.a-qa .q::before / .a::before）が既に持っている。
 *   同じ疑似要素に別の指定を重ねると、宣言ごとにカスケードして
 *   「濃色の丸に濃色の文字」になり読めなくなる。ここでは触らない。
 *   開閉マークは空いている ::after だけを使う。
 * ######################################################################## */
.tz-article .a-faq{ margin:34px 0 }

.tz-article details.a-qa{
  border:1px solid var(--tzc-line);
  border-left:6px solid var(--tzc-deep);
  border-radius:0 10px 10px 0;
  margin-bottom:12px;
  background:#fbfbfa;
  padding:0;                       /* 既定の .a-qa の padding を打ち消す */
  overflow:hidden;
}
.tz-article details.a-qa[open]{ background:#fff }

.tz-article details.a-qa > summary.q{
  margin:0;                        /* 既定の margin-bottom:12px を打ち消す */
  padding:20px 56px 20px 62px;     /* 左＝丸バッジのぶん／右＝開閉マークのぶん */
  cursor:pointer;
  list-style:none;
}
/* 丸バッジは既定で left:0 なので、カードの内側へ寄せる */
.tz-article details.a-qa > summary.q::before{ left:20px; top:18px }
.tz-article details.a-qa .a::before{ left:20px; top:0 }
.tz-article details.a-qa > summary.q::-webkit-details-marker{ display:none }
.tz-article details.a-qa > summary.q:hover{ background:var(--tzc-soft) }

/* 開閉マーク（＋ / −）。::before は丸バッジが使っているので ::after を使う */
.tz-article details.a-qa > summary.q::after{
  content:""; position:absolute; right:22px; top:50%;
  width:13px; height:13px; margin-top:-6px;
  background:
    linear-gradient(var(--tzc-deep),var(--tzc-deep)) center/13px 1.5px no-repeat,
    linear-gradient(var(--tzc-deep),var(--tzc-deep)) center/1.5px 13px no-repeat;
}
.tz-article details.a-qa[open] > summary.q::after{
  background:linear-gradient(var(--tzc-deep),var(--tzc-deep)) center/13px 1.5px no-repeat;
}

.tz-article details.a-qa .a{
  margin:0; padding:0 20px 20px 62px;
}

/* ############################################################################
 * 7-2. 一覧ページ（archive-column.php / taxonomy-column_category.php）
 *
 * ★サイトの実測値に合わせている（2026-09-07 計算済みスタイル）
 *     フォント Noto Sans JP ／ アクセント #64b105 ／ カードは直角 ／ ボタンはピル型
 *   サイトのDNAは保ちつつ、カードを1列の横並びから3列グリッドに変え、
 *   1ページ目の先頭記事だけ大きく見せて読み始めの入口を作っている。
 * ######################################################################## */
.tzc-arch{
  max-width:var(--tzc-container,1120px);
  margin:0 auto; padding:0 24px 110px;
}

/* ---------- 見出し（大きな英字＋和文＋説明） ---------- */
.tzc-arch__head{
  display:grid; grid-template-columns:auto 1fr; gap:60px; align-items:end;
  padding:66px 0 54px;
}
.tzc-arch__en{
  display:block;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size:clamp(44px,6vw,70px); font-weight:600; line-height:1;
  color:var(--tzc-ink,#000); letter-spacing:.01em;
}
.tzc-arch__ja{
  margin:12px 0 0;
  font-size:18px; font-weight:500; line-height:1.5;
  /* サイトは #64b105 だが白地で2.68:1と基準割れ。同系の濃い方を使う（6.36:1） */
  color:var(--tzc-deep,#3d6b04);
}
.tzc-arch__lead{
  margin:0 0 6px; font-size:15.5px; line-height:2.4; color:var(--tzc-text,#333);
  max-width:34em;
}

/* ---------- カテゴリー絞り込み（ピル型） ---------- */
.tzc-cats{ margin:0 0 44px }
.tzc-cats ul{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none }
.tzc-cats a{
  display:inline-block; padding:9px 25px;
  border:1px solid var(--tzc-line,#ddd); border-radius:50px;
  background:#fff; color:var(--tzc-ink,#000);
  font-size:15px; line-height:1.6; text-decoration:none;
  transition:border-color .2s,color .2s;
}
.tzc-cats a:hover,.tzc-cats a:focus{ border-color:var(--tzc-deep,#3d6b04); color:var(--tzc-deep,#3d6b04) }
/* 現在地：明るい緑に白文字は2.68:1で基準割れのため、濃い方を使う */
.tzc-cats a.is-current{
  background:var(--tzc-deep,#3d6b04); border-color:var(--tzc-deep,#3d6b04); color:#fff;
}

/* ---------- 記事カード ---------- */
.tzc-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px 26px;
  margin:0; padding:0; list-style:none;
}
.tzc-card > a{
  display:flex; flex-direction:column; height:100%;
  border:1px solid var(--tzc-line,#ddd);
  border-radius:var(--tzc-radius,0);
  background:#fff; color:var(--tzc-ink,#000); text-decoration:none;
  overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
.tzc-card > a:hover,.tzc-card > a:focus{
  border-color:var(--tzc-deep,#3d6b04);
  box-shadow:0 10px 26px rgba(0,0,0,.07);
}
.tzc-card__img{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:16/10; background:#f2f4ef;
}
/* ★アイキャッチは文字入りの画像が多いため、切り抜かず全体を見せる（contain）。
     推奨比率 16:10 の画像なら枠いっぱいに収まり、比率が違う画像でも
     文字が切れない（空いた部分は背景色で埋まる） */
.tzc-card__img img{
  width:100%; height:100%; object-fit:contain; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tzc-card > a:hover .tzc-card__img img{ transform:scale(1.05) }
/* アイキャッチ未設定のときの代替（画像が無い記事で並びが崩れないように） */
.tzc-card__noimg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:Arial,sans-serif; font-size:15px; font-weight:600; letter-spacing:.3em;
  color:#c3ccb8;
}
.tzc-card__body{
  display:flex; flex-direction:column; flex:1;
  padding:22px 24px 24px;
}
.tzc-card__cat{
  align-self:flex-start; margin-bottom:13px;
  padding:3px 16px; border:1px solid var(--tzc-accent,#64b105); border-radius:35px;
  font-size:12.5px; line-height:1.7; color:var(--tzc-deep,#3d6b04);
}
.tzc-card__ttl{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  font-size:17px; font-weight:600; line-height:1.75; color:var(--tzc-ink,#000);
  transition:color .2s;
}
.tzc-card > a:hover .tzc-card__ttl{ color:var(--tzc-deep,#3d6b04) }
.tzc-card__excerpt{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:14px; font-size:14.5px; line-height:2; color:var(--tzc-text,#333);
}
.tzc-card__date{
  margin-top:auto; padding-top:18px;
  font-size:13.5px; color:var(--tzc-muted,#70736c); letter-spacing:.04em;
}

/* ---------- 1ページ目の先頭記事だけ大きく ---------- */
.tzc-card--lead{ grid-column:1 / -1 }
.tzc-card--lead > a{ flex-direction:row; align-items:center }
/* ★16:10 に統一。stretch にすると右の文字の高さに引き伸ばされて比率が崩れ、画像が切れる */
.tzc-card--lead .tzc-card__img{ flex:0 0 56%; aspect-ratio:16/10; align-self:center }
.tzc-card--lead .tzc-card__body{ justify-content:center; padding:40px 44px }
.tzc-card--lead .tzc-card__ttl{ font-size:24px; line-height:1.65; -webkit-line-clamp:3 }
.tzc-card--lead .tzc-card__date{ margin-top:24px; padding-top:0 }

/* ---------- ページ送り ---------- */
.tzc-pager{ margin:64px 0 0 }
.tzc-pager ul{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:0; padding:0; list-style:none;
}
.tzc-pager a,.tzc-pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:46px; padding:0 16px;
  border:1px solid var(--tzc-line,#ddd); border-radius:50px;
  background:#fff; color:var(--tzc-ink,#000);
  font-size:14.5px; text-decoration:none;
  transition:border-color .2s,color .2s;
}
.tzc-pager a:hover,.tzc-pager a:focus{ border-color:var(--tzc-deep,#3d6b04); color:var(--tzc-deep,#3d6b04) }
.tzc-pager .current{
  background:var(--tzc-deep,#3d6b04); border-color:var(--tzc-deep,#3d6b04); color:#fff;
}
.tzc-pager .dots{ border-color:transparent }

/* ---------- 記事が0件のとき ---------- */
/* ★公開後は再現しづらい。公開前に必ず一度この状態を見ておくこと */
.tzc-empty{
  border:1px solid var(--tzc-line,#ddd); border-radius:var(--tzc-radius,0);
  padding:74px 30px; text-align:center; background:#fff;
}
.tzc-empty__ttl{ margin:0 0 14px; font-size:20px; font-weight:600; color:var(--tzc-ink,#000) }
.tzc-empty__desc{ margin:0 0 28px; font-size:15px; line-height:2.2; color:var(--tzc-text,#333) }
.tzc-empty__btn{
  display:inline-block; padding:14px 40px;
  background:var(--tzc-deep,#3d6b04); color:#fff;
  border-radius:50px; font-size:15px; font-weight:600; text-decoration:none;
  transition:background .2s;
}
.tzc-empty__btn:hover,.tzc-empty__btn:focus{ background:var(--tzc-deep-dark,#2f5303); color:#fff }


/* ############################################################################
 * 7-3. 詳細ページ（single-column.php）
 *
 * ★お知らせ用の2カラム（サイドバー付き）ではなく1カラムにしている。
 *   9,000〜11,000字の長文では、本文幅を780pxに絞った方が読み進めやすい。
 * ######################################################################## */
.tzc-single{
  max-width:var(--tzc-container,1120px);
  margin:0 auto; padding:0 24px 110px;
}
.tzc-single__head{
  max-width:var(--tzc-text-width,780px); margin:0 auto; padding:58px 0 34px;
}
.tzc-single__cats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px }
.tzc-single__cats a{
  display:inline-block; padding:3px 18px;
  border:1px solid var(--tzc-accent,#64b105); border-radius:35px;
  font-size:13px; line-height:1.8; color:var(--tzc-deep,#3d6b04); text-decoration:none;
  transition:background .2s,color .2s;
}
.tzc-single__cats a:hover,.tzc-single__cats a:focus{ background:var(--tzc-deep,#3d6b04); color:#fff }
.tzc-single__ttl{
  margin:0 0 20px;
  font-size:clamp(25px,3.2vw,36px); font-weight:600; line-height:1.6;
  color:var(--tzc-ink,#000); letter-spacing:.01em;
}
.tzc-single__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  font-size:13.5px; color:var(--tzc-muted,#70736c); letter-spacing:.04em;
}
/* 更新日は「情報の新しさ」を示す。検索エンジンも生成AIも見る */
.tzc-single__updated{
  padding-left:18px; border-left:1px solid var(--tzc-line,#ddd);
  color:var(--tzc-deep,#3d6b04);
}
/* アイキャッチは本文より広く。★切り抜かないサイズを使うので比率は固定しない */
.tzc-single__cover{ margin:0 0 46px }
.tzc-single__cover img{ display:block; width:100%; height:auto }
.tzc-single__body{
  max-width:var(--tzc-text-width,780px); margin:0 auto;
}

/* ############################################################################
 * 8. スマホ（375px で確認する）
 * ######################################################################## */
@media (max-width:768px){

  /* 目次 */
  .tzc-toc{ margin:34px 0; padding:20px 18px; border-radius:12px }
  .tzc-toc__ttl{ font-size:14px }
  .tzc-toc__list a{ font-size:14px; padding:10px 2px }

  /* CTA① */
  .tzc-cta--hero{ margin:40px 0; border-radius:12px }
  .tzc-cta__inner{ padding:32px 22px 36px; max-width:none }
  .tzc-cta--hero .tzc-cta__ttl{ font-size:22px }
  .tzc-cta--hero .tzc-cta__desc{ font-size:14.5px; margin-bottom:26px }
  .tzc-cta__btn{ display:flex; justify-content:center; padding:16px 20px; font-size:15px }

  /* CTA② 縦積み。カードは横幅いっぱい */
  .tzc-cta--offer{
    grid-template-columns:1fr; gap:24px; margin:40px 0; padding:30px 20px 24px; border-radius:12px;
  }
  .tzc-cta--offer::after{ display:none }
  .tzc-cta__offer-ttl{ font-size:21px }
  .tzc-cta__offer-desc{ font-size:14px; margin-bottom:16px }
  .tzc-cta__concerns li{ font-size:12.5px; padding:6px 12px 6px 10px }
  .tzc-cta__card{ padding:24px 18px 20px; border-radius:12px }
  .tzc-cta__side-link{ padding:17px 20px; font-size:16px }
  .tzc-cta__tel a,.tzc-cta__tel a:link,.tzc-cta__tel a:visited{ font-size:26px }

  /* CTA③ */
  .tzc-cta--outline{ margin:36px 0; padding:38px 20px 34px }
  .tzc-cta--outline::before,
  .tzc-cta--outline::after{ width:18px; height:18px }
  .tzc-cta--outline::before{ top:9px; left:9px }
  .tzc-cta--outline::after{ bottom:9px; right:9px }
  .tzc-cta__outline-main{ padding-top:20px }
  .tzc-cta__out-eyebrow{ font-size:10.5px; letter-spacing:.28em; gap:10px }
  .tzc-cta__out-eyebrow::before,.tzc-cta__out-eyebrow::after{ width:16px }
  .tzc-cta__out-ttl{ font-size:17px; line-height:1.7 }
  .tzc-cta__out-desc{ font-size:13px; line-height:2 }
  .tzc-cta__btn--ghost{
    display:flex; justify-content:center; width:100%; margin-top:22px; padding:15px 20px;
  }

  /* プロフィール */
  .tzc-profile{ margin:36px 0; border-radius:12px }
  .tzc-profile__bar{ padding:11px 18px; gap:14px }
  .tzc-profile__label{ font-size:12px; letter-spacing:.2em }
  /* 2カラムは畳む。区切り線は左から上に付け替える */
  .tzc-profile__body{ grid-template-columns:1fr; gap:0; padding:24px 18px 26px }
  .tzc-profile__side{
    padding-left:0; padding-top:22px; margin-top:22px;
    border-left:none; border-top:1px solid var(--tzc-line,#ddd);
  }
  .tzc-profile__name{ font-size:23px }
  .tzc-profile__meta li{ grid-template-columns:1fr; gap:2px; font-size:13.5px; padding:9px 0 }
  .tzc-profile__key{ padding-top:0 }
  .tzc-profile__btn{
    align-self:stretch; justify-content:center; margin-top:0; padding:15px 20px; font-size:14px;
  }
  .tzc-profile__offices{ padding:0 18px 22px }
  .tzc-profile__offices-grid{ grid-template-columns:1fr; gap:12px }
  .tzc-profile__foot{ padding:10px 16px; font-size:10.5px; letter-spacing:.24em }

  /* 前後記事：3列は詰まるので縦積みに */
  .tzc-prevnext{ grid-template-columns:1fr; gap:16px; text-align:left }
  .tzc-prevnext__cell--next{ text-align:left }
  .tzc-prevnext__cell--home{ text-align:center }

  /* 関連記事：横並びのリスト形に */
  .tzc-related__list{ grid-template-columns:1fr; gap:12px }
  .tzc-related__list a{ display:grid; grid-template-columns:110px 1fr; align-items:center }
  .tzc-related__body{ padding:12px 14px }
  .tzc-related__name{ font-size:14px }

  /* 一覧ページ */
  .tzc-arch{ padding:0 18px 70px }
  .tzc-arch__head{ grid-template-columns:1fr; gap:20px; padding:40px 0 32px; align-items:start }
  .tzc-arch__ja{ font-size:16px }
  .tzc-arch__lead{ font-size:14.5px; line-height:2.2; max-width:none }
  .tzc-cats{ margin:0 0 30px }
  .tzc-cats ul{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .tzc-cats ul::-webkit-scrollbar{ display:none }
  .tzc-cats a{ white-space:nowrap; font-size:14px; padding:8px 20px }

  /* カードは1列。先頭の大きいカードも縦積みに戻す */
  .tzc-cards{ grid-template-columns:1fr; gap:22px }
  .tzc-card__body{ padding:18px 18px 20px }
  .tzc-card__ttl{ font-size:16px }
  .tzc-card--lead > a{ flex-direction:column }
  .tzc-card--lead .tzc-card__img{ flex:none; aspect-ratio:16/10 }
  .tzc-card--lead .tzc-card__body{ padding:18px 18px 20px }
  .tzc-card--lead .tzc-card__ttl{ font-size:18px }
  .tzc-card--lead .tzc-card__excerpt{ display:none }
  .tzc-card--lead .tzc-card__date{ margin-top:16px }

  .tzc-pager{ margin:44px 0 0 }
  .tzc-pager a,.tzc-pager span{ min-width:42px; height:42px; padding:0 12px; font-size:14px }
  .tzc-empty{ padding:52px 20px }
  .tzc-empty__ttl{ font-size:18px }

  /* 詳細ページ */
  .tzc-single{ padding:0 18px 70px }
  .tzc-single__head{ padding:34px 0 26px }
  .tzc-single__cover{ margin:0 0 32px }

  /* FAQ */
  .tz-article details.a-qa > summary.q{ padding:16px 46px 16px 56px }
  .tz-article details.a-qa > summary.q::before{ left:16px; top:15px }
  .tz-article details.a-qa > summary.q::after{ right:18px }
  .tz-article details.a-qa .a{ padding:0 16px 18px 56px }
  .tz-article details.a-qa .a::before{ left:16px }
}


/* ############################################################################
 * 9. タブレット（769〜1024px）：カードは2列
 * ######################################################################## */
@media (min-width:769px) and (max-width:1024px){
  .tzc-cards{ grid-template-columns:repeat(2,1fr) }
  .tzc-arch__head{ grid-template-columns:1fr; gap:24px; align-items:start }
  .tzc-related__list{ grid-template-columns:repeat(3,1fr) }
}

/* ============================================================
 * 9. ボタン文字色の保証
 * ------------------------------------------------------------
 * 「ボタンの文字は常に白」は可読性の要件なので、テーマやプラグインの
 * a / a:visited / a:hover がどんな詳細度・読み込み順で来ても負けないよう
 * ここだけ !important で固定する。装飾ではなく可読性の保証なので許容。
 * ========================================================== */
/* 濃い地に置くボタン → 白文字 */
.tzc-cta__side-link,.tzc-cta__side-link:link,.tzc-cta__side-link:visited,.tzc-cta__side-link:hover,.tzc-cta__side-link:focus,
.tzc-cta__side-link span,
.tzc-profile__btn,.tzc-profile__btn:link,.tzc-profile__btn:visited,.tzc-profile__btn:hover,.tzc-profile__btn:focus,
.tzc-profile__btn span{
  color:#fff !important; text-decoration:none !important; border-bottom:0 !important;
}
/* ★CTA①は「濃緑の面に白いピル」。ボタン自体の地は白なので文字は緑。
     ここを白にすると白地に白文字になって消える（v1.0.1 の不具合） */
.tzc-cta__btn,.tzc-cta__btn:link,.tzc-cta__btn:visited,.tzc-cta__btn:hover,.tzc-cta__btn:focus{
  color:var(--tzc-deep,#3d6b04) !important; text-decoration:none !important; border-bottom:0 !important;
}
.tzc-cta__btn--ghost,.tzc-cta__btn--ghost:link,.tzc-cta__btn--ghost:visited{
  color:var(--tzc-deep,#3d6b04) !important; text-decoration:none !important;
}
.tzc-cta__btn--ghost:hover,.tzc-cta__btn--ghost:focus{ color:#fff !important }

/* ============================================================
 * 10. 監修プロフィールの幅
 * ------------------------------------------------------------
 * 本文カラム（--tzc-text-width / 780px）は「読む」ための幅なので狭い。
 * その中にプロフィールを入れると右列が約265pxしか取れず、
 * 「代表社員 税理士 川上 智宏」まで折り返して縦に伸びる。
 * プロフィールは読み物ではなく一覧表なので、記事の外枠（--tzc-container）
 * まで広げる。ネガティブマージンで中央に置き直している。
 * ========================================================== */
@media (min-width:769px){
  .tzc-profile{
    --tzc-prof-w:min(calc(var(--tzc-container,1120px) - 48px), calc(100vw - 48px));
    width:var(--tzc-prof-w);
    max-width:none;
    margin-left:calc(50% - var(--tzc-prof-w) / 2);
  }
  /* 幅が増えた分、左右の列を同じくらいにして情報行の折り返しをなくす */
  .tzc-profile__body{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) }
  /* 郵便番号は横に置けるので1行減らす */
  .tzc-profile__office-addr .tzc-profile__zip{ display:inline; margin-right:8px }
}