/* ==========================================================
 * tzz-post-components.css
 * スリーハンドレッド Blog｜記事構成コンポーネント
 *
 * 貼り付け先：外観 > カスタマイズ > 追加CSS（最初の1回だけ。記事ごとの貼り付けは不要）
 * 適用条件：記事本文を <div class="tzz-post"> で囲む
 * 方針　　：既存テーマのH1・H2の書体/サイズは上書きしない。
 *           追加するのは「H2の余白」「H3」「マーカー」「箇条書き」「表」「図解」「要点ボックス」のみ。
 * ブランドトークン：navy #16233F / navy-2 #1F3159 / ice #EEF3FB / line #E4E8F0 / text #2B303B / muted #6B7280
 * ========================================================== */

.tzz-post{
  --tzz-navy:#16233F;
  --tzz-navy-2:#1F3159;
  --tzz-ice:#EEF3FB;
  --tzz-ice-2:#DCE6F5;
  --tzz-line:#E4E8F0;
  --tzz-text:#2B303B;
  --tzz-muted:#6B7280;
  --tzz-mark:#CFDDF3;
}

/* --- 本文色（任意）---------------------------------------------
 * テーマの本文色は #6B7280（muted）。強調が映えるよう、本文だけ #2B303B に上げる。
 * 元の色のままにしたい場合は、この1ブロックを削除する。 */
.tzz-post p,
.tzz-post li,
.tzz-post td,
.tzz-post th{ color:var(--tzz-text); }

/* --- H2：章の切れ目 ------------------------------------------
 * 実測でテーマのH2上余白が 0px（段落間と同じ10px）だったため、章の区切りを補う。 */
.tzz-post h2{
  margin:72px 0 18px;
  padding-top:40px;
  border-top:1px solid var(--tzz-line);
  line-height:1.5;
}

/* --- H3：章の中の論点 ----------------------------------------- */
.tzz-post h3{
  margin:40px 0 12px;
  padding-left:14px;
  border-left:3px solid var(--tzz-navy);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1.55;
  color:var(--tzz-navy);
}

/* --- ハイライト ------------------------------------------------
 * mark.tzz-hl … 結論・主張の一文（記事全体で最大12、同一ブロック1つまで）
 * strong      … 数値・定義語・固有名詞・リストの先頭ラベル */
.tzz-post strong{ color:var(--tzz-navy); font-weight:700; }
.tzz-post mark.tzz-hl{
  background:linear-gradient(transparent 58%, var(--tzz-mark) 58%);
  color:var(--tzz-navy);
  font-weight:700;
  padding:0 .1em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* --- 箇条書き --------------------------------------------------- */
.tzz-post ul,
.tzz-post ol{ margin:14px 0 22px; padding-left:1.5em; }
.tzz-post li{ margin:0 0 12px; font-size:14.5px; line-height:1.95; }
.tzz-post li::marker{ color:var(--tzz-navy); font-weight:700; }

/* --- 30秒サマリー（要点ボックス）------------------------------- */
.tzz-summary{
  margin:32px 0 8px;
  padding:20px 24px 8px;
  background:#fff;
  border:1px solid var(--tzz-line);
  border-left:4px solid var(--tzz-navy);
  border-radius:0 6px 6px 0;
}
.tzz-post .tzz-summary__title{
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
  color:var(--tzz-navy);
}
.tzz-summary ul{ margin:0 0 12px; padding-left:1.3em; }
.tzz-summary li{ margin:0 0 8px; font-size:14px; line-height:1.85; }

/* --- 会話（すれ違いの可視化）----------------------------------- */
.tzz-dialog{
  margin:18px 0 22px;
  padding:4px 20px;
  background:var(--tzz-ice);
  border-radius:6px;
}
.tzz-dialog__row{ display:flex; gap:16px; align-items:baseline; padding:14px 0; }
.tzz-dialog__row + .tzz-dialog__row{ border-top:1px solid var(--tzz-ice-2); }
.tzz-dialog__who{ flex:0 0 7.5em; font-size:12px; font-weight:700; color:var(--tzz-navy); }
.tzz-post .tzz-dialog__row p{
  margin:0;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:15.5px;
  line-height:1.8;
}

/* --- 表（事例・改善前後）--------------------------------------- */
.tzz-table-wrap{ margin:18px 0 26px; overflow-x:auto; }
.tzz-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:13.5px;
  line-height:1.85;
}
.tzz-table th,
.tzz-table td{
  padding:12px 14px;
  border:1px solid var(--tzz-line);
  text-align:left;
  vertical-align:top;
}
.tzz-post .tzz-table thead th{ background:var(--tzz-navy); color:#fff; font-weight:700; }
.tzz-post .tzz-table tbody th{
  width:6.5em;
  background:var(--tzz-ice);
  color:var(--tzz-navy);
  font-weight:700;
  white-space:nowrap;
}

.tzz-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --- 図解 ------------------------------------------------------- */
.tzz-figure{ margin:26px 0 30px; }
.tzz-figure svg,
.tzz-figure img{
  display:block;
  width:100%;
  height:auto;
  background:#fff;
  border:1px solid var(--tzz-line);
  border-radius:6px;
}
.tzz-figure figcaption{ margin-top:8px; font-size:12px; color:var(--tzz-muted); text-align:center; }

/* --- FAQ・出典 -------------------------------------------------- */
.tzz-faq h3{ font-size:16px; margin-top:28px; }
.tzz-faq h3 + p{ margin-bottom:8px; }
.tzz-post .tzz-source{ margin-top:32px; font-size:12px; line-height:1.8; color:var(--tzz-muted); }
.tzz-source em{ font-style:normal; }

/* --- モバイル --------------------------------------------------- */
@media (max-width:600px){
  .tzz-post h2{ margin-top:56px; padding-top:32px; }
  .tzz-post h3{ font-size:16.5px; margin-top:32px; }
  .tzz-summary{ padding:16px 16px 4px; }
  .tzz-dialog{ padding:2px 16px; }
  .tzz-dialog__row{ flex-direction:column; gap:2px; }
  /* 図解：スマホでは幅を縮めず、図の中だけ横スクロール（縮小すると文字が約6pxになり読めない） */
  .tzz-figure{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tzz-figure svg,
  .tzz-figure img{ min-width:680px; }
}