/*
 * コラム記事の本文を、サイトの新デザインに合わせるためのCSS。
 *
 * 合わせる先は article.css（/safety/ や /partner/ が使っている、承認済みの記事スタイル）。
 * 旧いクラス名のまま、見た目だけ新デザインの語彙に寄せている。
 *   見出し = オレンジの左ボーダー＋warm背景 ／ リンクと marker = --orange-deep
 *   表のヘッダ = --ink ／ 箱物 = 枠＋オレンジの左線 ／ 注記 = --gray の小さい文字
 *
 * 🚨 このCSSが効くのは、記事本文から **インラインの style 属性と <style> ブロックを外した
 *    記事だけ**。本番の記事には1本あたり127〜628個の style 属性が入っていて（209本で50,136個）、
 *    インラインはCSSより強いので、外さないと何も変わらない。
 *    外す道具 → _scripts/restyle_article.py
 *
 * 外した記事かどうかは <article> の data-restyled="v2" で見分ける。
 * **このファイルの指定は全部 .column-single[data-restyled="v2"] 配下に閉じてある**ので、
 * まだ外していない記事には1つも当たらない（混在していても壊れない）。
 */

/* ============================================================
   土台
   ============================================================ */
.column-single[data-restyled="v2"] .art-body {
  font-size: 1.0625rem;
  line-height: 2;
  color: var(--ink);
  overflow-wrap: break-word;
}

.column-single[data-restyled="v2"] .art-body p {
  margin: 18px 0;
  font-size: 1.0625rem;
  line-height: 2;
  color: var(--ink);
}

.column-single[data-restyled="v2"] .art-body a {
  color: var(--orange-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.column-single[data-restyled="v2"] .art-body strong {
  font-weight: 800;
  color: var(--ink);
  /* 旧デザインは strong に赤い下線マーカーを敷いていた。新デザインは敷かない */
  background: none;
  padding: 0;
}

.column-single[data-restyled="v2"] .art-body section {
  margin: 44px 0 0;
  padding: 0;
}

/* ============================================================
   見出し
   ============================================================ */
.column-single[data-restyled="v2"] .art-body h2 {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 0;
  border-left: 4px solid var(--orange);
  background: var(--warm);
  color: var(--ink);
  font-family: inherit;          /* 旧: Noto Serif JP */
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: -.025em;
}

/* 旧デザインの「SECTION 01」の赤いチップは出さない */
.column-single[data-restyled="v2"] .art-body h2::before {
  content: none;
}

.column-single[data-restyled="v2"] .art-body h3 {
  position: relative;
  margin: 34px 0 18px;
  padding: 0 0 13px;
  border: 0;
  border-bottom: 1px solid #ccd3d9;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.75;
  letter-spacing: .01em;
}

.column-single[data-restyled="v2"] .art-body h3::before { content: none; }

.column-single[data-restyled="v2"] .art-body h3::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--orange);
}

.column-single[data-restyled="v2"] .art-body h4 {
  margin: 26px 0 12px;
  padding-left: 13px;
  border: 0;
  border-left: 3px solid var(--orange);
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.85;
  letter-spacing: .01em;
}

.column-single[data-restyled="v2"] .art-body :is(h2, h3, h4) {
  scroll-margin-top: calc(var(--site-header-height, 88px) + 20px);
}

/* ============================================================
   リスト
   ============================================================ */
.column-single[data-restyled="v2"] .art-body ul,
.column-single[data-restyled="v2"] .art-body ol {
  margin: 20px 0;
  padding-left: 1.5em;
}

.column-single[data-restyled="v2"] .art-body li {
  margin: 7px 0;
  padding-left: 4px;
  font-size: 1.0625rem;
  line-height: 1.95;
  color: var(--ink);
}

.column-single[data-restyled="v2"] .art-body li::marker {
  color: var(--orange-deep);
  font-weight: 700;
}

/* ============================================================
   表（比較表を含む）
   旧: thead の tr か th に background:#264653 がインラインで入っていた
   ============================================================ */
.column-single[data-restyled="v2"] .art-body table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  background: #fff;
  font-size: .9375rem;
  line-height: 1.8;
}

.column-single[data-restyled="v2"] .art-body th,
.column-single[data-restyled="v2"] .art-body td {
  padding: 13px 15px;
  border: 0;
  border-right: 1px solid #ccd3d9;
  border-bottom: 1px solid #ccd3d9;
  vertical-align: top;
  text-align: left;
}

.column-single[data-restyled="v2"] .art-body tr > :last-child { border-right: 0; }
.column-single[data-restyled="v2"] .art-body tbody tr:last-child > * { border-bottom: 0; }

.column-single[data-restyled="v2"] .art-body thead th,
.column-single[data-restyled="v2"] .art-body thead td {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}

/* 行見出し（1列目が th の表）。比較表以外で使われている */
.column-single[data-restyled="v2"] .art-body tbody th {
  width: 30%;
  background: var(--warm);
  color: var(--ink);
  font-weight: 700;
}

.column-single[data-restyled="v2"] .art-body .comparison-table-wrap,
.column-single[data-restyled="v2"] .art-body .article-table-wrap {
  margin: 24px 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #ccd3d9;
}

.column-single[data-restyled="v2"] .art-body .comparison-table-wrap table {
  margin: 0;
  min-width: 820px;
}

/* ============================================================
   要約・章の目次
   ============================================================ */
.column-single[data-restyled="v2"] .art-body .lead-summary {
  margin: 0 0 30px;
  padding: 24px 28px;
  border: 0;
  border-top: 4px solid var(--orange);
  background: #fff4ee;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
}

.column-single[data-restyled="v2"] .art-body .lead-summary ul { margin: 0; padding-left: 1.2em; }
.column-single[data-restyled="v2"] .art-body .lead-summary li { margin: 7px 0; font-size: 1rem; }

.column-single[data-restyled="v2"] .art-body .section-toc {
  display: block;
  margin: 16px 0 24px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: 0;
  background: var(--warm);
  font-size: .9375rem;
  line-height: 1.9;
}

.column-single[data-restyled="v2"] .art-body .section-toc > span {
  display: block;
  margin-bottom: 6px;
  color: var(--orange-deep);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.column-single[data-restyled="v2"] .art-body .section-toc ul { margin: 0; padding-left: 1.2em; }
.column-single[data-restyled="v2"] .art-body .section-toc li { margin: 2px 0; font-size: .9375rem; }

/* ============================================================
   箱物
   ============================================================ */
.column-single[data-restyled="v2"] .art-body .point-box,
.column-single[data-restyled="v2"] .art-body .flow-box,
.column-single[data-restyled="v2"] .art-body .formula-box,
.column-single[data-restyled="v2"] .art-body .research-note,
.column-single[data-restyled="v2"] .art-body .conclusion-box {
  margin: 28px 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: 0;
  background: #f8f9fa;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
}

.column-single[data-restyled="v2"] .art-body .point-box > p:first-child,
.column-single[data-restyled="v2"] .art-body .conclusion-box > p:first-child { margin-top: 0; }
.column-single[data-restyled="v2"] .art-body .point-box ul { margin: 10px 0 0; }

/* 注意喚起の箱はオレンジを濃くして地を変える */
.column-single[data-restyled="v2"] .art-body .caution-box,
.column-single[data-restyled="v2"] .art-body .company-caution,
.column-single[data-restyled="v2"] .art-body .risk-flow,
.column-single[data-restyled="v2"] .art-body .legal-note {
  margin: 20px 0;
  padding: 16px 20px;
  border: 1px solid #efcabb;
  border-left: 4px solid var(--orange-deep);
  border-radius: 0;
  background: #fff5ef;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
}

/* ============================================================
   会社カード
   ============================================================ */
.column-single[data-restyled="v2"] .art-body .company-card {
  margin: 28px 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 0;
  background: #fff;
}

.column-single[data-restyled="v2"] .art-body .company-card-featured {
  border-color: #efcabb;
  border-left-color: var(--orange);
  background: #fff9f6;
}

/* カードの中の見出しは「カードの題」。節の h3（下線＋オレンジのバー）とは別扱いにする */
.column-single[data-restyled="v2"] .art-body .company-card > h3 {
  margin: 0 0 14px;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 4px solid var(--orange);
  font-size: 1.1875rem;
  line-height: 1.5;
}

.column-single[data-restyled="v2"] .art-body .company-card > h3::after { content: none; }

.column-single[data-restyled="v2"] .art-body .company-card-featured > h3 {
  border-left-color: var(--orange-deep);
}

.column-single[data-restyled="v2"] .art-body .company-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.column-single[data-restyled="v2"] .art-body .company-tags span {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--warm);
  color: var(--gray);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.6;
}

.column-single[data-restyled="v2"] .art-body .company-note {
  margin: 14px 0;
  padding: 14px 16px;
  border: 0;
  border-left: 4px solid var(--orange);
  background: var(--warm);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.9;
}


/* 特集枠の会社カードのタグ（旧: ピンクの pill） */
.column-single[data-restyled="v2"] .art-body .company-card-featured .company-tags span {
  border-color: #efcabb;
  background: #fff4ee;
  color: var(--orange-deep);
}

/* 会社カードの中の小見出し（旧: #264653 の太字 p） */
.column-single[data-restyled="v2"] .art-body .company-card > p > strong:only-child,
.column-single[data-restyled="v2"] .art-body .company-card > p:has(> strong:only-child) {
  color: var(--ink);
}

/* ============================================================
   図
   ============================================================ */
.column-single[data-restyled="v2"] .art-body .article-figure { margin: 32px 0; }
.column-single[data-restyled="v2"] .art-body .article-figure img { max-width: 100%; height: auto; }

.column-single[data-restyled="v2"] .art-body figcaption {
  margin-top: 10px;
  color: var(--gray);
  font-size: .875rem;
  line-height: 1.8;
}

/* ============================================================
   注記・出典・脚注
   ============================================================ */
.column-single[data-restyled="v2"] .art-body .data-source,
.column-single[data-restyled="v2"] .art-body .cmp-order-note,
.column-single[data-restyled="v2"] .art-body .cmp-date-note,
.column-single[data-restyled="v2"] .art-body .cmp-prose-note,
.column-single[data-restyled="v2"] .art-body .ref-note {
  margin: 10px 0 0;
  color: var(--gray);
  font-size: .8125rem;
  line-height: 1.85;
}

.column-single[data-restyled="v2"] .art-body .ref-mark {
  margin-left: 3px;
  font-size: .8125rem;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
}

.column-single[data-restyled="v2"] .art-body .ref-mark a {
  padding: 5px 3px;
  color: var(--orange-deep);
  text-decoration: none;
}

.column-single[data-restyled="v2"] .art-body .ref-mark a:hover { text-decoration: underline; }

.column-single[data-restyled="v2"] .art-body .article-sources {
  margin: 38px 0 24px;
  padding: 24px 26px;
  border-top: 2px solid #aeb5bd;
  background: var(--warm);
  font-size: .875rem;
  line-height: 1.9;
  color: var(--gray);
}

.column-single[data-restyled="v2"] .art-body .article-sources ol { margin: 0; padding-left: 1.4em; }
.column-single[data-restyled="v2"] .art-body .article-sources li { font-size: .875rem; color: var(--gray); }

/* 免責・利害開示・エリアの注記 */
.column-single[data-restyled="v2"] .art-body .ymyl-disclaimer-2026-08,
.column-single[data-restyled="v2"] .art-body .disclosure-2026-08,
.column-single[data-restyled="v2"] .art-body .area-finance-2026-08,
.column-single[data-restyled="v2"] .art-body .article-correction {
  margin: 24px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--warm);
  color: var(--gray);
  font-size: .875rem;
  line-height: 1.9;
}

.column-single[data-restyled="v2"] .art-body .disclosure-2026-08 {
  border-left: 4px solid var(--orange);
}

/* ============================================================
   記事内CTA
   旧: #EE5A24 の枠＋ボタン。新デザインのオレンジに寄せる
   ============================================================ */
.column-single[data-restyled="v2"] .art-body .cta-box {
  margin: 36px 0;
  padding: 0;
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  border-radius: 0;
  background: #fff4ee;
  box-shadow: none;
  text-align: left;
  overflow: hidden;
}

.column-single[data-restyled="v2"] .art-body .cta-box > p:first-of-type {
  margin: 0;
  padding: 10px 24px;
  background: var(--orange);
  color: #fff;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.5;
}

.column-single[data-restyled="v2"] .art-body .cta-box > div { padding: 22px 24px 24px; }

/* CTA の見出し。旧は 24px / 900 ＋ オレンジの強調だった。そこは落とさない */
.column-single[data-restyled="v2"] .art-body .cta-box > div > p {
  margin: 0;
  font-size: clamp(1.1875rem, 4.6vw, 1.4375rem);
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

.column-single[data-restyled="v2"] .art-body .cta-box > div > p span {
  color: var(--orange-deep);
}

.column-single[data-restyled="v2"] .art-body .cta-box a {
  display: block;
  margin-top: 16px;
  padding: 18px 16px;
  border-radius: 4px;
  background: var(--orange);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}

.column-single[data-restyled="v2"] .art-body .cta-box a:hover { background: var(--orange-hover); }

/* ボタンだけの CTA（data-cta="card"）は枠を出さない */
.column-single[data-restyled="v2"] .art-body .cta-box[data-cta="card"] {
  margin: 20px 0 0;
  border: 0;
  background: none;
}

.column-single[data-restyled="v2"] .art-body .cta-box[data-cta="card"] a { margin-top: 0; }

/* ============================================================
   関連記事
   ============================================================ */
.column-single[data-restyled="v2"] .art-body .related-articles {
  margin: 32px 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  background: #fff;
}

.column-single[data-restyled="v2"] .art-body .related-title {
  display: block;
  margin: 0 0 10px;
  color: var(--orange-deep);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.column-single[data-restyled="v2"] .art-body .related-articles ul { margin: 0; padding-left: 1.2em; }

/* ============================================================
   スマホ
   ============================================================ */
@media (max-width: 768px) {
  .column-single[data-restyled="v2"] .art-body { font-size: 1rem; }
  .column-single[data-restyled="v2"] .art-body p,
  .column-single[data-restyled="v2"] .art-body li { font-size: 1rem; }
  .column-single[data-restyled="v2"] .art-body h2 { font-size: 1.25rem; padding: 12px 14px; }
  .column-single[data-restyled="v2"] .art-body h3 { font-size: 1.125rem; }
  .column-single[data-restyled="v2"] .art-body h4 { font-size: 1rem; }
  .column-single[data-restyled="v2"] .art-body .company-card,
  .column-single[data-restyled="v2"] .art-body .point-box,
  .column-single[data-restyled="v2"] .art-body .lead-summary,
  .column-single[data-restyled="v2"] .art-body .article-sources { padding: 18px 16px; }
  .column-single[data-restyled="v2"] .art-body th,
  .column-single[data-restyled="v2"] .art-body td { padding: 11px 12px; font-size: .875rem; }
}