/* ============================================================
   Ishikawa Compat — post_content 表示保証CSS（テーマ非依存）
   デザイン正本: WEBサイト刷新/モックアップ/assets/style.css の記事部品。
   対象: 記事互換性監査 2026-07-19 のA項目クラス＋旧11記事のst-*クラス。

   カテゴリ色は body.cat-police / body.cat-fire の --accent 変数で切替。
   テーマが無い場合に備え、:root にフォールバック値も定義する。
   ============================================================ */

/* ---------- 0. トークン（テーマと同値。テーマ有効時はテーマ側が上書き可） ---------- */
:root{
  --accent: #3a3e46;
  --accent-ink: #3a3e46;
  --accent-dark: #23252B;
  --accent-weak: rgba(58,62,70,.10);
  --black: #16181D;
  --ink: #23252B;
  --court: #F4F5F7;
  --line: #E3E4E8;
  --muted: #575C66;
  --cat-police: #2d26d3;
  --cat-fire: #E60011;
}
body.cat-police{
  --accent: var(--cat-police);
  --accent-ink: var(--cat-police);
  --accent-dark: #231DA6;
  --accent-weak: rgba(45,38,211,.10);
}
body.cat-fire{
  --accent: var(--cat-fire);
  --accent-ink: #C00010;
  --accent-dark: #A5000D;
  --accent-weak: rgba(230,0,17,.10);
}

/* ---------- 1. マーカー ---------- */
/* 新契約: <mark class="mk">（Step7.5の機械変換後） */
.mk{
  font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(255,235,59,.62) 60%);
  padding: 0 1px;
}
/* 変換前の旧マーカー（インライン#ffffb9）も同じ蛍光イエローに統一 */
mark[style="background-color:#ffffb9"]{
  background: linear-gradient(transparent 60%, rgba(255,235,59,.62) 60%) !important;
  font-weight: 700;
  padding: 0 1px;
}
/* 旧11記事の st-mymarker 系（st-mymarker-s-b 等の派生を含む） */
[class*="st-mymarker"]{
  background: linear-gradient(transparent 60%, rgba(255,235,59,.62) 60%);
  font-weight: 700;
  padding: 0 1px;
}

/* ---------- 2. noteカード（.note-card 一式。[st-card-ex]の受け皿） ---------- */
.note-card{ margin: 28px 0; }
.note-card-link{
  display: block; position: relative;
  border: 2px solid var(--black); background: #fff;
  padding: 18px 18px 12px; text-decoration: none; color: var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.note-card-link:hover{
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--accent); color: var(--ink);
}
.note-card-flag{
  position: absolute; top: -2px; left: -2px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 16px 3px 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.note-card-title{
  display: block; font-weight: 800; line-height: 1.55;
  margin: 12px 0 6px; font-size: 15px;
}
.note-card-cta{ display: inline-block; color: var(--accent-ink); font-weight: 800; font-size: 13px; }
.note-card-ext{ display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* ---------- 3. 引用＝過去問枠（wp-block-quote向け。スコアボード意匠） ---------- */
.wp-block-quote{
  position: relative; margin: 26px 0 18px;
  border: 2px solid var(--black); border-left: 2px solid var(--black);
  background: #fff;
  padding: 20px 16px 14px;
  font-style: normal;
}
.wp-block-quote::before{
  content: "過去問"; position: absolute; top: -13px; left: 12px;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .1em;
  padding: 3px 20px 3px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.wp-block-quote p{ margin: 0; font-weight: 600; }
.wp-block-quote p + p{ margin-top: 10px; }
.wp-block-quote cite{
  display: block; text-align: right;
  color: var(--muted); font-size: 12px; font-style: normal; margin-top: 6px;
}

/* ---------- 4. CTAボタン（wp-block-button→カテゴリアクセントの実ボタン化） ---------- */
.wp-block-buttons{ margin: 22px 0; }
.wp-block-button{ transform: none; }
.wp-block-button .wp-block-button__link{
  background: var(--accent) !important;
  color: #fff !important;
  border: 2px solid var(--black) !important;
  border-radius: 0 !important;
  font-weight: 900; font-size: 16px; line-height: 1.5;
  text-decoration: none; text-align: center;
  padding-top: 14px; padding-bottom: 14px;
  box-shadow: 5px 5px 0 rgba(22,24,29,.18);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.wp-block-button .wp-block-button__link:hover{
  background: var(--accent-dark) !important;
  color: #fff !important;
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(22,24,29,.18);
}

/* ---------- 5. st-blocks FAQ（dl.st-faq / __item / __question / __answer） ---------- */
dl.st-faq{ margin: 0 0 1.6em; padding: 0; border: 0; background: none; }
.st-faq__item{
  border: 2px solid var(--black) !important;
  border-radius: 0 !important;
  background: #fff; margin: 0 0 12px;
}
.st-faq__question{
  position: relative; margin: 0;
  padding: 14px 16px 14px 56px;
  font-weight: 800; font-size: 14.5px; line-height: 1.6;
  background: #fff; border-bottom: 2px solid var(--black);
}
.st-faq__question::before{
  content: "Q"; position: absolute; left: 16px; top: 14px;
  width: 26px; height: 26px;
  background: var(--black); color: #fff;
  display: grid; place-items: center;
  font-style: italic; font-weight: 900; font-size: 14px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
p.st-faq__question-content{
  margin: 0;
  color: var(--black) !important;   /* 旧プリセット色（soft-red等）を打ち消す */
  font-size: inherit !important;
}
.st-faq__answer{
  position: relative; margin: 0;
  padding: 14px 16px 16px 56px;
  font-size: 14px;
}
.st-faq__answer::before{
  content: "A"; position: absolute; left: 16px; top: 14px;
  width: 26px; height: 26px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-style: italic; font-weight: 900; font-size: 14px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.st-faq__answer-content{ color: var(--ink) !important; } /* 旧プリセット色（cyan-blue等）を打ち消す */
.st-faq__answer-content p{ margin: 0 0 .8em; }
.st-faq__answer-content p:last-child{ margin-bottom: 0; }

/* ---------- 6. チェックリスト（✓意匠。ul.is-style-st-square-checkbox-no-border /
       ul.is-style-st-circle-border＝「この記事でわかること」枠） ---------- */
ul.is-style-st-square-checkbox-no-border,
ul.is-style-st-circle-border{
  list-style: none;
  margin: 0 0 1.4em;
  padding: 18px 16px !important;
  background: var(--court) !important;
  border: 0;
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
  border-radius: 0 !important;
}
ul.is-style-st-square-checkbox-no-border > li,
ul.is-style-st-circle-border > li{
  position: relative; margin: 0;
  padding: 5px 0 5px 32px;
  font-size: 14.5px; line-height: 1.75;
  list-style: none;
}
ul.is-style-st-square-checkbox-no-border > li::before,
ul.is-style-st-circle-border > li::before{
  content: "✓"; position: absolute; left: 0; top: 8px;
  width: 22px; height: 21px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
ul.is-style-st-square-checkbox-no-border > li + li,
ul.is-style-st-circle-border > li + li{
  border-top: 1px dashed #D4D6DB;
}

/* ---------- 7. ステップ（ol.is-style-st-no-border＝トレーニングメニュー番号ステップ） ---------- */
ol.is-style-st-no-border{
  list-style: none; counter-reset: ishikawa-step;
  margin: 0 0 1.4em;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
ol.is-style-st-no-border > li{
  counter-increment: ishikawa-step;
  position: relative; margin: 0 0 12px;
  background: #fff;
  border: 1px solid var(--line); border-left: 6px solid var(--black);
  padding: 14px 16px 14px 74px;
  font-size: 14.5px; line-height: 1.8;
  list-style: none;
}
ol.is-style-st-no-border > li::before{
  content: counter(ishikawa-step, decimal-leading-zero);
  position: absolute; left: 14px; top: 12px;
  font-style: italic; font-weight: 900; font-size: 26px; line-height: 1;
  color: var(--accent-ink);
}
ol.is-style-st-no-border > li::after{
  content: "STEP"; position: absolute; left: 16px; top: 40px;
  font-size: 9px; font-weight: 800; letter-spacing: .2em; color: var(--muted);
}
/* ulに付いた場合は素直な無枠リスト */
ul.is-style-st-no-border{
  list-style: disc;
  background: transparent !important;
  border-radius: 0 !important;
}

/* ---------- 8. 注意ボックス（p.is-style-st-paragraph-attention） ---------- */
p.is-style-st-paragraph-attention{
  position: relative;
  margin: 28px 0 22px;
  border: 2px solid var(--black);
  background: #fff;
  padding: 18px 16px 14px;
  font-size: 14px;
}
p.is-style-st-paragraph-attention::before{
  content: "注意"; position: absolute; top: -12px; left: 12px;
  background: var(--black); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  padding: 2px 18px 2px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

/* ---------- 9. テーブル（wp-block-table基本整え＋is-style-st-table-line） ---------- */
figure.wp-block-table{
  overflow-x: auto;
  margin: 0 0 1.4em;
  border: 2px solid var(--black);
}
figure.wp-block-table table{
  width: 100%; min-width: 520px;
  border-collapse: collapse; font-size: 14px;
  margin: 0;
}
figure.wp-block-table th{
  background: var(--black); color: #fff; font-weight: 800;
  padding: 10px 12px; text-align: center; white-space: nowrap;
  border: 0; border-left: 1px solid #2A2D35;
}
figure.wp-block-table th:first-child{ border-left: 0; }
figure.wp-block-table td{
  padding: 10px 12px; text-align: center;
  border: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  font-weight: 600;
}
figure.wp-block-table td:first-child{ border-left: 0; }
figure.wp-block-table tbody tr:nth-child(even){ background: var(--court); }
figure.wp-block-table figcaption{
  font-size: 12px; color: var(--muted); padding: 6px 10px; text-align: right;
}

/* ---------- 10. その他の is-style-st-* ---------- */
/* 角丸枠（FAQのdl以外に付いた場合の受け皿。体育会意匠につき角丸は付けない） */
.is-style-st-rounded-square:not(.st-faq){
  border: 2px solid var(--black);
  border-radius: 0 !important;
  background: #fff;
  padding: 16px 16px 16px 20px;
  margin: 0 0 1.4em;
}
.is-style-st-rounded-square:not(.st-faq) > li{ margin-left: 1.2em; }

/* ---------- 11. AFFINGERカスタムパレットの受け皿（has-original-color-*） ---------- */
.has-original-color-a-color{ color: #16181D !important; }
.has-original-color-b-color{ color: #2d26d3 !important; }
.has-original-color-c-color{ color: #E60011 !important; }
.has-original-color-d-color{ color: #F4F5F7 !important; }
.has-original-color-a-background-color{ background-color: #16181D !important; }
.has-original-color-b-background-color{ background-color: #2d26d3 !important; }
.has-original-color-c-background-color{ background-color: #E60011 !important; }
.has-original-color-d-background-color{ background-color: #F4F5F7 !important; }

/* ---------- 12. スペーサー・角丸焼き付きの整え ---------- */
.wp-block-spacer{ margin: 0; clear: both; }
/* 旧記事に焼き付いたborder-radius:10px（インライン）を体育会意匠（角丸0）へ */
ul.wp-block-list, ol.wp-block-list{ border-radius: 0 !important; }

/* ---------- 13. 旧11記事向け（st-mybox / st-matome） ---------- */
.st-mybox{
  border: 2px solid var(--black) !important;
  border-radius: 0 !important;
  background: #fff !important;
  margin: 22px 0 !important;
  padding: 16px !important;
}
.st-mybox .st-in-mybox{ padding: 0; }
.st-mybox-title{ font-weight: 800; }
.st-matome{
  border: 2px solid var(--black);
  background: var(--court);
  padding: 10px 14px;
  font-weight: 900;
}

/* ---------- 14. [st-catgroup]/[st-excerpt] 互換の記事リスト ---------- */
.compat-postlist{
  list-style: none; margin: 22px 0; padding: 0;
}
.compat-postlist > li{ margin: 0 0 10px; }
.compat-postlist a{
  display: flex; align-items: baseline; gap: 12px;
  border: 2px solid var(--black); background: #fff;
  padding: 12px 14px; text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: 14px; line-height: 1.6;
  transition: transform .15s, box-shadow .15s;
}
.compat-postlist a:hover{
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--accent);
  color: var(--ink);
}
.compat-postlist-title{ flex: 1; min-width: 0; }
.compat-postlist-go{
  flex: none; font-style: italic; font-weight: 900; font-size: 12px;
  color: var(--accent-ink);
}