/* コラム本文ページの相談案内・フッター。ホームと同じ淡い配色に揃える。 */
.column-article .cta-band {
  padding: 30px 32px;
  border: 1px solid #d3e0e8;
  border-radius: 18px;
  background: #eff9ff;
  color: #082e54;
  box-shadow: none;
  text-align: left;
}
.column-article .cta-band h2 { color: #082e54; font-size: 23px; line-height: 1.6; }
.column-article .cta-band p { max-width: none; margin: 0 0 22px; font-weight: 400; opacity: 1; }
.column-article .cta-actions { justify-content: flex-start; }
.column-article .cta-band .button.orange { background: #c54b08; border-color: #c54b08; color: #fff; box-shadow: none; }
.column-article .cta-band .button.orange:hover { background: #a93b00; border-color: #a93b00; }
.column-article .cta-band .button:focus-visible { outline: 3px solid #082e54; outline-offset: 4px; }
.column-article .footer { background: #edf6fa; color: #082e54; border-top: 1px solid #d3e0e8; box-shadow: none; }
.column-article .footer-cols a, .column-article .footer-copy, .column-article .footer-copy a { color: #496274; }
.column-article .footer-col-title { color: #082e54; }
.column-article .footer-tagline { color: #c54b08; font-size: 15px; letter-spacing: .06em; }
@media (max-width: 680px) {
  .column-article .cta-band { padding: 24px 20px; }
  .column-article .cta-band h2 { font-size: 21px; }
  .column-article .cta-band p { font-size: 14px; }
}

/* 手順の中の記事リンクも、本文と同じく下線で示す */
.column-article .case-steps a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* 書き込み用の表：スマホでカードにしたとき、空欄に項目名を出す */
@media (max-width: 560px) {
  .column-article .fill-table td { display: block; min-height: 2.2em; margin-top: 6px; padding-bottom: 6px; border-bottom: 1px dashed #cfdde4; }
  .column-article .fill-table tbody th { width: auto; }
  .column-article .fill-table td::before { content: attr(data-label); display: block; color: #496274; font-size: 13px; }
}

/* 記事のアイキャッチ（題名の下に置く横長の絵） */
.column-article .article-eyecatch { max-width: 780px; margin: 0 0 28px; overflow: hidden; border-radius: 16px; background: #f4fafc; }
.column-article .article-eyecatch img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 560px) {
  .column-article .article-eyecatch { margin-bottom: 22px; border-radius: 12px; }
}