/*
 * 記事本文（管理画面で書いた HTML）の追加スタイル。
 *
 * studio.css はデザイン定義から生成しているため直接編集しない。そちらには本文の
 * p / h2 / h3 / figure しか定義が無く、リストや表は Studio ランタイムの素の指定
 * （line-height:1・sans-serif・#333）のまま残ってしまう。
 * ここでは本文の段落（.sd.nf8a1109251b4 p 相当）に揃える形で不足分だけを補う。
 *
 * セレクタは .richText 基準にしてある。デザイン側の連番クラス（.nf8a1109251b4）は
 * 生成のたびに変わりうるが、本文ブロックが .richText である点は変わらないため。
 */

/* ---- 本文の字間 ------------------------------------------------------------ */
/* デザイン定義は 0.03em だが、和文の本文としてはやや広いので少しだけ詰める。
   見出し（h2 / h3）はデザイン定義のままにして、本文だけを対象にする。
   studio.css と同じ詳細度なので、後から読み込むこのファイルが優先される。 */
.render-canvas .richText p,
.render-canvas .richText li,
.render-canvas .richText blockquote,
.render-canvas .richText table {
  letter-spacing: 0.015em;
}

/* ---- 本文中の画像 ---------------------------------------------------------- */
/* 画像の下に余白が無いと、次の段落と詰まって読みにくい。段落の下余白（24px）より
   少し広めにして、段落の切れ目だと分かるようにする。
   バナーは自前の余白を持っているので対象から外す。 */
/* 縦横比がまちまちの写真でも記事の見た目が崩れないよう、3:2 に固定して
   はみ出す部分は切り抜く（object-fit: cover）。写真素材は 3:2 が多いので、
   この比率なら多くの画像は切り抜きなしで収まる。
   人物写真は顔が上寄りにあるため、切り落とすのは下側を多めにする。 */
.render-canvas .richText img {
  aspect-ratio: 3 / 2;
  height: auto;
  margin-bottom: 32px;
  object-fit: cover;
  object-position: 50% 15%;
  width: 100%;
}

/* バナーは元の比率のまま見せる。 */
.render-canvas .article-banner img {
  aspect-ratio: auto;
  object-fit: fill;
  object-position: 50% 50%;
}

.render-canvas .article-banner img {
  margin-bottom: 0;
}

/* ---- リスト（ul / ol）---------------------------------------------------- */
.render-canvas .richText ul,
.render-canvas .richText ol {
  margin: 0 0 24px 0;
  padding-left: 1.6em;
}

.render-canvas .richText li {
  color: #535353ff;
  font-family: var(--s-font-d3829e7a);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  margin: 0 0 10px 0;
}

.render-canvas .richText li:last-child {
  margin-bottom: 0;
}

.render-canvas .richText ul > li {
  list-style: disc;
}

.render-canvas .richText ol > li {
  list-style: decimal;
}

/* 行頭記号はデザインのキーカラー（見出しの罫線と同じ紺）に合わせる。 */
.render-canvas .richText li::marker {
  color: #1c4f86ff;
}

/* リスト項目の中に段落を書いた場合は、項目自体の余白だけを使う。 */
.render-canvas .richText li > p {
  margin: 0;
}

/* 入れ子のリスト。外側の項目との間だけ空ける。 */
.render-canvas .richText li > ul,
.render-canvas .richText li > ol {
  margin: 10px 0 0 0;
}

/* ---- 表 ------------------------------------------------------------------ */
/* 本文と同じ書体・行間にそろえる（studio.css の既定は 14px / 1.4）。 */
.render-canvas .richText table {
  font-family: var(--s-font-d3829e7a);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 24px 0;
  width: 100%;
}

.render-canvas .richText table th,
.render-canvas .richText table td {
  color: #535353ff;
}

/* ---- 引用 ---------------------------------------------------------------- */
.render-canvas .richText blockquote {
  color: #535353ff;
  font-family: var(--s-font-d3829e7a);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 24px 0;
}

/* ---- 狭い画面（studio.css の本文 p と同じブレークポイント）---------------- */
@media screen and (max-width: 990px) {
  .render-canvas .richText li,
  .render-canvas .richText blockquote {
    font-size: 15px;
  }
}

@media screen and (max-width: 540px) {
  .render-canvas .richText li,
  .render-canvas .richText blockquote {
    font-size: 15px;
  }
  .render-canvas .richText table {
    font-size: 14px;
  }
}

/* 狭い画面でもカテゴリ表記と同じ縮み方をさせる。 */
@media screen and (max-width: 540px) {
  .render-canvas .preview-badge {
    font-size: 12px;
  }
  .render-canvas .preview-badge--card {
    font-size: 10px;
  }
}

/* ===========================================================================
   投稿者プロフィール（記事ページの著者欄）
   デザイン定義の著者ボックス（名前＋紹介文の縦並び）に、顔写真の列を足す。
   =========================================================================== */
/* 投稿者欄。グレーの塗りをやめ、上下のヘアラインだけで区切る。
   同じ記事内にある YouTube カード（グレーの箱）と見た目が似ないようにする。 */
.render-canvas .article-head__author {
  background: transparent;
  border-bottom: 1px solid rgba(28, 79, 134, 0.12);
  border-top: 1px solid rgba(28, 79, 134, 0.12);
  padding: 18px 0;
}

.render-canvas .article-author {
  align-items: center;
  display: flex;
  gap: 16px;
  width: 100%;
}

/* 写真は細いリングで囲って、背景が白でも輪郭が出るようにする。 */
.render-canvas .article-author__avatar {
  box-shadow: 0 0 0 1px rgba(28, 79, 134, 0.15);
}

.render-canvas .article-author__body > :first-child {
  color: #2c3e50;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.render-canvas .article-author__body > :last-child {
  color: #6f7f8d;
  font-size: 12px;
  line-height: 1.7;
}

.render-canvas .article-author__avatar {
  background: #fff;
  border-radius: 50%;
  flex: none;
  height: 64px;
  object-fit: cover;
  width: 64px;
}

.render-canvas .article-author__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 名前の行の余白は、写真と並べる都合で詰める（既定は 16px）。 */
.render-canvas .article-author__body > :first-child {
  margin-bottom: 4px;
}

@media screen and (max-width: 540px) {
  .render-canvas .article-author {
    gap: 12px;
  }
  .render-canvas .article-author__avatar {
    height: 52px;
    width: 52px;
  }
}

/* ===========================================================================
   プレビュー中の表示
   下書き・予約公開の記事はログイン中の管理者にしか見えない。一般公開されている
   記事と見分けが付くよう、記事ページと記事一覧の両方にラベルを出す。
   =========================================================================== */
.render-canvas .preview-badge {
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  color: #8a8a8a;
  display: inline-block;
  flex: none;
  font-family: var(--s-font-d3829e7a);
  /* 文字サイズは記事ページのパンくずのカテゴリ表記（14px）に合わせる。 */
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.4;
  margin: 0;
  padding: 3px 10px;
  white-space: nowrap;
  width: auto;
}

/* 記事タイトル（h1）の末尾に続けて置く。
   デザインのベーススタイルでは .sd.text が flex コンテナになり、タイトルとラベルが
   別々の要素として横並びになってしまうため、この見出しだけ通常の行組みに戻す。 */
.render-canvas .article-title {
  display: block;
}

.render-canvas .article-title .preview-badge {
  margin-left: 12px;
  vertical-align: 3px;
}

/* 一覧カードでは、カードのカテゴリ表記（12px）に合わせる。 */
.render-canvas .preview-badge--card {
  font-size: 12px;
  padding: 2px 8px;
}

.render-canvas .article-title .preview-badge--card {
  margin-left: 10px;
  vertical-align: 2px;
}

/* ===========================================================================
   記事の YouTube 埋め込み（管理画面の専用欄に URL を入れたときだけ出る）
   本文の直前に置くため、本文の段落と同じ幅・同じ下余白にそろえる。
   =========================================================================== */
/* 動画は「読む／見る」を選べる案内として、ひとまとまりのカードで見せる。 */
.render-canvas .article-video {
  background: #f6f7f8;
  border-radius: 10px;
  margin: 0 0 32px 0;
  padding: 22px;
  width: 100%;
}

.render-canvas .article-video__head {
  align-items: center;
  display: flex;
  gap: 10px;
  margin: 0 0 12px 0;
}

/* YouTube の赤は 1 か所だけに絞り、他は本文と同じ配色にする。 */
.render-canvas .article-video__badge {
  align-items: center;
  background: #ff0000;
  border-radius: 7px;
  color: #fff;
  display: flex;
  flex: none;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.render-canvas .article-video__heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.render-canvas .article-video__title {
  color: #333;
  font-family: var(--s-font-d3829e7a);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.render-canvas .article-video__note {
  color: #8a8a8a;
  font-family: var(--s-font-d3829e7a);
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.render-canvas .article-video__frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}

.render-canvas .article-video__frame iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 540px) {
  .render-canvas .article-video {
    padding: 16px;
  }
  .render-canvas .article-video__title {
    font-size: 14px;
  }
  .render-canvas .article-video__note {
    font-size: 11px;
  }
}

/* ---- 公開日・更新日 ----------------------------------------------------
   タイトルのすぐ下に置く。タイトル側の下余白が大きいと 1 行だけ浮いて見えるので、
   タイトルには近づけ、著者欄との間だけ空ける。 */
.render-canvas .article-dates {
  color: #8a97a3;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--s-font-d3829e7a);
  font-size: 12.5px;
  font-weight: 500;
  gap: 12px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  margin: 12px 0 20px;
  width: 100%;
}

/* タイトルの下余白（32px）は日付のぶん詰める。記事一覧のカードには効かせない。 */
.render-canvas .article-head__main .article-title {
  margin-bottom: 0;
}

.render-canvas .article-dates__item {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

@media screen and (max-width: 540px) {
  .render-canvas .article-dates {
    font-size: 11.5px;
    margin-top: 8px;
  }
}

/* ===========================================================================
   目次（h2 のみ）
   本文の冒頭に置く。記事全体の見取り図が目的なので、階層は作らない。
   =========================================================================== */
/* 罫線は引かず、ごく薄いグレーの地だけで本文と区切る。 */
.render-canvas .article-toc {
  background: #f6f7f8;
  border-radius: 8px;
  margin: 0 0 40px 0;
  padding: 24px 26px;
  width: 100%;
}

/* デザイン定義の「本文の p」指定（色・太さ）に勝てるよう .richText を挟む。 */
.render-canvas .richText .article-toc__title {
  color: #333333;
  font-family: var(--s-font-d3829e7a);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

/* 本文のリスト指定（.richText ol の padding-left）に負けないよう .richText を挟む。 */
.render-canvas .richText .article-toc__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
}

.render-canvas .article-toc__list li {
  display: flex;
  font-size: 15px;
  gap: 14px;
  line-height: 1.5;
  margin: 0 0 10px 0;
}

.render-canvas .article-toc__list li:last-child {
  margin-bottom: 0;
}

/* 行頭記号は短い角バー。番号を振ると順番の意味が出てしまうため付けない。 */
.render-canvas .article-toc__list li::before {
  background: #c4d9ea;
  content: "";
  flex: none;
  height: 4px;
  margin-top: 9px;
  width: 14px;
}

/* h3 は h2 の下にぶら下がるので、1 段下げて記号も小さくする。 */
.render-canvas .article-toc__list li.article-toc__item--sub {
  font-size: 14px;
  padding-left: 24px;
}

.render-canvas .article-toc__list li.article-toc__item--sub::before {
  background: #d7e5f0;
  height: 3px;
  margin-top: 9px;
  width: 10px;
}

/* 見出しは深い青。下線は常時は引かず、ホバーのときだけ出す。 */
.render-canvas .article-toc__list a {
  color: #1c4f86;
  font-family: var(--s-font-d3829e7a);
  font-size: inherit;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.render-canvas .article-toc__list a:hover {
  color: #123a63;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 見出しが多い記事では、11 件目以降を畳む。
   下端をぼかして「続きがある」ことを見て分かるようにする。 */
.render-canvas .article-toc__list.is-collapsed {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%);
}

.render-canvas .article-toc__toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: #1c4f86;
  cursor: pointer;
  display: flex;
  font-family: var(--s-font-d3829e7a);
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.03em;
  margin: 14px 0 0;
  padding: 0 0 0 12px;
}

.render-canvas .article-toc__toggle:hover {
  text-decoration: underline;
}

/* 閉じているときは ＋、開いているときは −。
   状態は aria-expanded が持っているので、印もそれに合わせて出し分ける。 */
.render-canvas .article-toc__toggle-mark {
  display: block;
  flex: none;
  height: 11px;
  position: relative;
  width: 11px;
}

.render-canvas .article-toc__toggle-mark::before,
.render-canvas .article-toc__toggle-mark::after {
  background: currentColor;
  content: "";
  position: absolute;
}

.render-canvas .article-toc__toggle-mark::before {
  height: 1.5px;
  left: 0;
  top: 4.75px;
  width: 11px;
}

.render-canvas .article-toc__toggle-mark::after {
  height: 11px;
  left: 4.75px;
  top: 0;
  width: 1.5px;
}

.render-canvas .article-toc__toggle[aria-expanded="true"] .article-toc__toggle-mark::after {
  display: none;
}

/* hidden 属性が display:flex に負けてしまうため、明示的に消す。
   （見出しが少なく畳む必要がない記事では、このボタンは出さない） */
.render-canvas .article-toc__toggle[hidden] {
  display: none;
}


/* ---------------------------------------------------------------------------
   パンくず
   デザイン定義では「 > 」を文字として置いていたため、区切りの前後の
   余白が揃わず窮屈だった。区切りは薄いシェブロンにして、間隔は gap で揃える。
   --------------------------------------------------------------------------- */
.render-canvas .article-breadcrumb {
  align-items: center;
  column-gap: 8px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
  width: 100%;
}

/* デザイン定義は文字数ぴったりの幅・高さを各項目に持たせている。
   文言を変えると縦に折り返してしまうので、幅と高さは中身に任せる。 */
.render-canvas .article-breadcrumb > *,
.render-canvas .article-breadcrumb a,
.render-canvas .article-breadcrumb li {
  flex: none;
  font-family: var(--s-font-d3829e7a);
  font-size: 12.5px;
  font-weight: 500;
  height: auto;
  letter-spacing: 0.03em;
  line-height: 1.6;
  white-space: nowrap;
  width: auto;
}

.render-canvas .article-breadcrumb a {
  color: #7d8b98;
  transition: color 0.2s ease;
}

.render-canvas .article-breadcrumb a:hover {
  color: #1c4f86;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 区切りは細く薄く。文字より一段小さくして主張させない。 */
.render-canvas .article-breadcrumb__sep {
  color: #c2ccd6;
  font-size: 14px;
  line-height: 1;
}

/* カテゴリは ul > li > a の入れ子。中身の高さがそろわず 1 行に乗らないため、
   入れ子ごと中央ぞろえの横並びにする。 */
.render-canvas .article-breadcrumb__current,
.render-canvas .article-breadcrumb__current li {
  align-items: center;
  display: flex;
  height: auto;
  margin: 0;
  padding: 0;
}

/* 最後（カテゴリ）は現在地なので、リンク色ではなく本文寄りの色にする。 */
.render-canvas .article-breadcrumb__current a {
  color: #47586a;
}

@media screen and (max-width: 540px) {
  .render-canvas .article-breadcrumb > *,
  .render-canvas .article-breadcrumb a,
  .render-canvas .article-breadcrumb li {
    font-size: 11.5px;
  }
  .render-canvas .article-breadcrumb {
    column-gap: 6px;
  }
}

/* ---------------------------------------------------------------------------
   見出し（h2 / h3）
   デザイン定義は h2＝太い縦棒、h3＝全幅の下線だったが、どちらも主張が強く、
   h2 と h3 の差も分かりにくかった。
   h2 は細い罫＋先頭だけのアクセント、h3 は左の短い棒、という差のつけ方にする。
   書体はサイトの見出しと同じ Zen Kaku Gothic New にそろえる。
   --------------------------------------------------------------------------- */
.render-canvas .richText h2 {
  border-bottom: 1px solid rgba(28, 79, 134, 0.16);
  border-left: 0;
  color: #1c4f86;
  font-family: var(--s-font-c498460f), "Zen Kaku Gothic New", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  margin: 64px 0 26px;
  padding: 0 0 12px;
  position: relative;
  scroll-margin-top: 96px;
}

/* 罫線の先頭だけを濃い色で重ねて、見出しの始まりを示す。 */
.render-canvas .richText h2::after {
  background: #1a72c4;
  border-radius: 2px;
  bottom: -1px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 64px;
}

/* h3 は文字色を本文寄りの濃いグレーにして、青い h2 と見分けられるようにする。
   青は左の短い棒だけに残す。 */
.render-canvas .richText h3 {
  border-bottom: 0;
  color: #2c3e50;
  font-family: var(--s-font-c498460f), "Zen Kaku Gothic New", sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.7;
  margin: 42px 0 18px;
  padding: 0 0 0 16px;
  position: relative;
  scroll-margin-top: 96px;
}

/* 棒は見出しの高さいっぱいに伸ばす。2 行になったら 2 行分の長さになる。
   行の高さ（1.7）のぶん上下に余りが出るので、その分だけ内側に詰める。 */
.render-canvas .richText h3::before {
  background: #1a72c4;
  border-radius: 999px;
  bottom: 0.32em;
  content: "";
  left: 0;
  position: absolute;
  top: 0.32em;
  width: 4px;
}

@media screen and (max-width: 540px) {
  .render-canvas .richText h2 {
    font-size: 1.12rem;
    margin: 48px 0 22px;
  }
  .render-canvas .richText h2::after {
    width: 52px;
  }
  .render-canvas .richText h3 {
    font-size: 1rem;
    margin: 34px 0 16px;
    padding-left: 13px;
  }
  .render-canvas .richText h3::before {
    bottom: 0.3em;
    top: 0.3em;
    width: 3px;
  }
}

@media screen and (max-width: 540px) {
  .render-canvas .article-toc {
    margin-bottom: 32px;
    padding: 20px 18px;
  }
  .render-canvas .richText .article-toc__title {
    font-size: 14px;
    margin-bottom: 14px;
  }
  .render-canvas .richText .article-toc__list {
    padding-left: 8px;
  }
  .render-canvas .article-toc__list li.article-toc__item--sub {
    font-size: 13px;
    padding-left: 16px;
  }
  .render-canvas .article-toc__list li {
    gap: 10px;
    margin-bottom: 9px;
  }
  .render-canvas .article-toc__toggle {
    padding-left: 8px;
  }
  .render-canvas .article-toc__list li {
    font-size: 14px;
  }
}

/* ===========================================================================
   記事のアイキャッチ（スマホ）
   狭い画面では左右の余白を飛び越えて画面幅いっぱいに見せる。
   角丸も外して、上部の帯として扱う。
   =========================================================================== */
/* スマホでは「タイトル → アイキャッチ → 投稿者」の順に読ませる。
   アイキャッチと投稿者は別々の入れ物に入っているので、内側の箱を display:contents で
   透かして、並び順だけ入れ替える。 */
@media screen and (max-width: 860px) {
  .render-canvas .article-head__main {
    display: contents;
  }
  .render-canvas .article-head__main > * {
    order: 1;
  }
  .render-canvas .article-cover {
    order: 2;
  }
  /* 並び替えでアイキャッチの真下に来るため、間に余白を入れて貼り付きを防ぐ。 */
  .render-canvas .article-head__author {
    margin-top: 24px;
    order: 3;
  }

  /* アイキャッチの下に出ていた 1px の区切り線を消す。 */
  .render-canvas .sd.nb2119b70c5bf {
    display: none;
  }
}

@media screen and (max-width: 540px) {
  /* アイキャッチと、本文中の画像・バナーは、左右の余白を飛び越えて画面幅いっぱいに出す。
     狭い画面では 16px ずつの余白が効いて画像が小さく見えるため。 */
  .render-canvas .article-cover,
  .render-canvas .richText img,
  .render-canvas .richText figure {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
  }

  /* 画面幅いっぱいに出すものだけ角丸を外す。バナーは本文幅の中なので角丸のまま。 */
  .render-canvas .article-cover > .image,
  .render-canvas .richText img {
    border-radius: 0;
  }

  /* バナーの画像は本文中の <img> でもあるため、上の全幅指定が効いてしまう。
     バナーは本文幅に収める約束なので、ここで元に戻す。 */
  .render-canvas .article-banner img {
    border-radius: 8px;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
  }

  /* 画像のキャプションだけは読み物なので、本文と同じ幅に戻す。 */
  .render-canvas .richText figure figcaption {
    padding: 0 16px;
  }

  /* アイキャッチの下の空白を詰める。
     デザイン定義では、この位置（タイトル列の右）に追従バナーが入る前提で
     余白が取られているが、スマホではそのバナーを消しているため、
     行の margin-bottom と外枠の padding-bottom が空白として残っていた。 */
  .render-canvas .article-head {
    margin-bottom: 0;
  }
  .render-canvas .article-hero {
    padding-bottom: 4px;
  }
}

/* ===========================================================================
   本文中の誘導バナー（h2 を 2 つ進むごとに挿入）
   =========================================================================== */
/* PC では本文幅いっぱいだと主張が強すぎるので、少し絞って中央に置く。 */
.render-canvas .article-banner {
  display: block;
  margin: 48px auto;
  width: 80%;
}

.render-canvas .article-banner img {
  border-radius: 8px;
  display: block;
  height: auto;
  width: 100%;
}

.render-canvas .article-banner:hover img {
  opacity: 0.85;
}

@media screen and (max-width: 540px) {
  /* PC の width:80% を打ち消す。左右の余白は飛び越えず、本文幅に収める。 */
  .render-canvas .article-banner {
    margin: 36px 0;
    width: 100%;
  }
}

/* ===========================================================================
   サイドバーのバナー
   デザイン定義では別バナー（騒音ブロッカーズ）が入っていた枠を、
   本文中のバナーと同じ絵柄に差し替える。枠が 320×320 なので正方形版を使う
   （横長版を入れると背景の切り抜きでボタンが欠ける）。
   =========================================================================== */
/* 画像は本文中のバナー（スマホ用の横長）と同じものを使い、
   枠を 3:2 に変えて切り抜きが起きないようにする。 */
.render-canvas .article-side-banner .image {
  aspect-ratio: 1100 / 1005;
  border-radius: 8px;
  height: auto;
  overflow: hidden;
  width: 100%;
}

.render-canvas .article-side-banner .image::before {
  background-image: url(/banners/article-cta-sp-v2.webp);
}

/* 追従のしかたを整える。
   デザイン定義では「バナー自身が top:0 で貼り付く」うえ、外側の箱に 3000px /
   5000px の高さが入っていた。そのためスクロールすると
     ・追従ヘッダー（76px）の下に潜り込む
     ・関連記事の上に浮いたまま重なる
   の 2 つが起きていた。バナー単体の追従はやめ、サイドバー全体（バナー＋関連記事）を
   ヘッダーの下で追従させる形に直す。 */
.render-canvas .article-side-banner {
  position: relative;
  top: auto;
}

.render-canvas .article-sidebar {
  top: 96px;
}

.render-canvas .article-sidebar .article-sidebar__inner,
.render-canvas .article-sidebar .article-sidebar__list {
  height: auto;
}

/* バナーは本文幅の中に収める（画面幅いっぱいにするのはアイキャッチと本文中の画像だけ）。 */
@media screen and (max-width: 540px) {
  .render-canvas .article-side-banner {
    width: 100%;
  }

  /* アイキャッチのすぐ下のバナーは出さない。本文に入る前にバナーが続くと、
     記事を読み始める前に広告面が挟まって見えるため（関連記事の上の 1 枚は残す）。 */
  .render-canvas .article-side-banner--top {
    display: none;
  }
}

/* ===========================================================================
   関連記事
   デザイン定義のままだと、見出しが素のゴシック、カードは角丸なしで隙間もなく、
   本文側の作りと揃っていなかった。見出し・サムネ・文字の扱いを整える。
   =========================================================================== */
.render-canvas .article-sidebar__heading {
  border-bottom: 1px solid rgba(28, 79, 134, 0.16);
  color: #1c4f86;
  font-family: var(--s-font-c498460f), "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 700;
  height: auto;
  letter-spacing: 0.02em;
  line-height: 1.5;
  padding-bottom: 10px;
  position: relative;
  width: 100%;
}

/* 見出しの罫線の先頭だけ濃くする（本文の h2 と同じ作り）。 */
.render-canvas .article-sidebar__heading::after {
  background: #1a72c4;
  border-radius: 2px;
  bottom: -1px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 48px;
}

.render-canvas .article-related__card {
  align-items: flex-start;
  border-bottom: 1px solid rgba(28, 79, 134, 0.1);
  gap: 12px;
  height: auto;
  padding: 14px 0;
}

.render-canvas .article-related__card:last-child {
  border-bottom: 0;
}

/* サムネは 3:2 に固定し、角を丸める。 */
.render-canvas .article-related__thumb {
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  flex: none;
  height: auto;
  overflow: hidden;
  width: 104px;
}

.render-canvas .article-related__body {
  height: auto;
  justify-content: center;
}

/* タイトル。9 のウエイトは重いので 700 に落とし、色も本文寄りにする。 */
.render-canvas .article-related__body .n34baca25e875 {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: #2c3e50;
  display: -webkit-box;
  font-family: var(--s-font-d3829e7a);
  font-size: 13.5px;
  font-weight: 700;
  height: auto;
  letter-spacing: 0.01em;
  line-height: 1.6;
  overflow: hidden;
}

.render-canvas .article-related__card:hover .n34baca25e875 {
  color: #1a72c4;
}

/* ===========================================================================
   関連記事（スマホ）
   デザイン定義では 540px 以下でカードが縦積みになり、サムネイルに width:100% が
   入る。ところが 990px 用の max-width:30% が残ったままで、画像が縦長に潰れていた。
   =========================================================================== */
@media screen and (max-width: 540px) {
  /* 縦積みにすると小さなサムネが宙に浮くので、PC と同じ横並びのままにする。 */
  .render-canvas .article-related__card {
    align-items: flex-start;
    flex-direction: row;
  }

  .render-canvas .article-related__thumb {
    height: auto;
    max-width: 100%;
    width: 116px;
  }

  /* 抜粋は幅が足りず読みにくいので、一覧としてはタイトルだけにする。 */
  .render-canvas .article-related__body .n15ac7ea49ec1 {
    display: none;
  }

  /* 文字側も同じ理由（990px 用の max-width:70% が残る）で幅が足りず、
     カードの中で 245px に縮んでいた。 */
  /* 横並びに戻したので、文字側は残り幅いっぱい（width:100% だと溢れる）。 */
  .render-canvas .article-related__body {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
    width: auto;
  }

  /* 最後のカードがフッターに接していたので、下に余白を取る。
     追従ヘッダーをよけるための top:96px は、追従しないスマホでは
     ただのずれになり、免責文とバナーの間に空白を作っていたので戻す。 */
  .render-canvas .article-sidebar {
    margin-top: 32px;
    padding-bottom: 48px;
    top: auto;
  }

  .render-canvas .article-related__body .n34baca25e875 {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* ===========================================================================
   免責事項（全記事の本文末尾）
   本文と地続きに見えないよう、薄い枠と小さめの文字で「注記」として置く。
   =========================================================================== */
.render-canvas .article-disclaimer {
  background: #fafbfc;
  border: 1px solid #e6ebef;
  border-radius: 8px;
  margin: 48px 0 0 0;
  padding: 20px 22px;
  width: 100%;
}

.render-canvas .article-disclaimer p {
  color: #7c8894;
  font-family: var(--s-font-d3829e7a);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.65;
  margin: 0 0 10px 0;
}

.render-canvas .article-disclaimer p:last-child {
  margin-bottom: 0;
}

.render-canvas .article-disclaimer__title {
  color: #5b6772 !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

@media screen and (max-width: 540px) {
  .render-canvas .article-disclaimer {
    margin-top: 36px;
    padding: 16px 16px;
  }
  .render-canvas .article-disclaimer p {
    font-size: 11px;
  }
}