/* ==========================================================================
   お役立ち記事（/columns/）
   styles.css の色・書体・ボタンをそのまま使い、読みものとしての組版だけを足す
   ========================================================================== */
.col-wrap { max-width: calc(860px + var(--gutter) * 2); }

/* パンくず */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px; border-top: 1.5px solid #a9b4be; border-right: 1.5px solid #a9b4be; transform: rotate(45deg); }
.crumbs a { color: var(--blue); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36em; }

/* 記事の冒頭 */
.col-hero { background: var(--blue-light); padding: 28px 0 40px; }
.col-cat { display: inline-block; margin-top: 28px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; padding: 2px 12px; border-radius: 4px; line-height: 1.7; }
.col-title { margin-top: 14px; font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.55; color: var(--navy); letter-spacing: .04em; text-wrap: balance; }
.col-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.col-meta span { display: inline-flex; align-items: center; gap: 6px; }
.col-meta .ico { color: var(--blue); }
.col-list-lead { margin-top: 14px; color: var(--ink-2); max-width: 40em; }

/* 本文 */
.col-layout { padding-top: 40px; padding-bottom: 24px; }
.col-lead { font-size: 17px; line-height: 2; color: var(--ink); }
.toc { margin: 36px 0 8px; padding: 24px 28px; background: var(--gray); border-radius: 12px; }
.toc-h { font-weight: 900; color: var(--navy); font-size: 16px; }
.toc ol { margin-top: 10px; counter-reset: t; display: grid; gap: 4px; }
.toc li { counter-increment: t; display: flex; gap: 10px; font-size: 15px; line-height: 1.7; }
.toc li::before { content: counter(t) "."; font-family: var(--num); font-weight: 700; color: var(--blue); min-width: 1.4em; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--blue); text-decoration: underline; }

.col-body { font-size: 17px; line-height: 2; color: var(--ink); }
.col-body > * + * { margin-top: 1.4em; }
.col-body h2 { position: relative; margin-top: 2.6em; padding-bottom: 14px; font-size: clamp(21px, 2.4vw, 26px); font-weight: 900; line-height: 1.55; color: var(--navy); border-bottom: 3px solid var(--blue-line); scroll-margin-top: 100px; }
.col-body h2::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 72px; height: 3px; background: var(--blue); }
.col-body h3 { margin-top: 2em; font-size: 19px; font-weight: 900; line-height: 1.6; color: var(--navy); padding-left: 16px; position: relative; }
.col-body h3::before { content: ""; position: absolute; left: 0; top: .35em; width: 6px; height: 1.1em; border-radius: 2px; background: var(--blue); }
.col-body h2 + *, .col-body h3 + * { margin-top: 1em; }
.col-body a { color: var(--blue); }
.col-body strong { font-weight: 700; background: linear-gradient(transparent 64%, #fff1a6 64%); }
.col-body ul, .col-body ol { display: grid; gap: .4em; padding-left: 0; }
.col-body ul > li { position: relative; padding-left: 1.3em; }
.col-body ul > li::before { content: ""; position: absolute; left: .2em; top: .82em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.col-body ol { counter-reset: n; }
.col-body ol > li { counter-increment: n; position: relative; padding-left: 2em; }
.col-body ol > li::before { content: counter(n); position: absolute; left: 0; top: .3em; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--num); font-weight: 700; font-size: .8em; display: grid; place-items: center; line-height: 1; }
.col-body .toc li::before, .col-body .faq li::before { content: none; }

.col-body .table-wrap { overflow-x: auto; }
.col-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; background: #fff; }
.col-body caption { text-align: left; font-size: 14px; font-weight: 700; color: var(--navy); padding-bottom: 8px; }
.col-body th, .col-body td { border: 1px solid var(--line); padding: 12px 14px; vertical-align: top; text-align: left; }
.col-body thead th { background: var(--blue); color: #fff; font-weight: 700; border-color: var(--blue); }
.col-body tbody th { background: var(--gray); font-weight: 700; color: var(--navy); white-space: nowrap; }

.box { padding: 22px 26px; border-radius: 12px; font-size: 16px; line-height: 1.9; }
.box > * + * { margin-top: .7em; }
.box-title { font-weight: 900; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.box-point { background: var(--yellow-pale); border: 2px solid var(--yellow); }
.box-point .box-title::before { content: "POINT"; font-family: var(--num); font-size: 12px; letter-spacing: .1em; background: var(--navy); color: #fff; padding: 1px 8px; border-radius: 3px; }
.box-note { background: var(--blue-light); }
.box-warn { background: var(--red-pale); border: 2px solid #f3c5c3; }
.box-warn .box-title { color: var(--red); }
.box-summary { background: #fff; border: 2px solid var(--blue); }
.box-summary .box-title::before { content: "まとめ"; font-size: 12px; background: var(--blue); color: #fff; padding: 1px 8px; border-radius: 3px; }

.col-body figure img { border-radius: 10px; border: 1px solid var(--line); }
.col-body figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.col-body .src { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.6; margin-top: .6em; }

.col-faq { margin-top: 1em; }

.col-sources { margin-top: 56px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 12px; }
.col-sources-h { font-size: 16px; font-weight: 900; color: var(--navy); }
.col-sources ol { margin-top: 10px; display: grid; gap: 6px; padding-left: 1.4em; list-style: decimal; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.col-sources a { color: var(--blue); word-break: break-all; }

.col-author { margin-top: 24px; padding: 20px 24px; background: var(--gray); border-radius: 12px; font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.col-author-name { font-weight: 900; color: var(--navy); font-size: 15px; margin-bottom: 4px; }

/* 記事内のサービス案内 */
.col-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 32px; align-items: center; margin: 48px 0 16px; padding: 32px; border-radius: 16px; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); color: #fff; }
.col-cta.is-mid { margin: 2.4em 0; }
.col-cta-label { font-size: 13px; font-weight: 700; color: #bfe0ff; }
.col-cta-title { margin-top: 6px; font-size: 20px; font-weight: 900; line-height: 1.6; }
.col-cta-points { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.col-cta-points li { font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .14); border-radius: 4px; padding: 2px 10px; line-height: 1.7; }
.col-cta-points li::before, .col-body .col-cta-points li::before { content: none; }
.col-body .col-cta-points { display: flex; }
.col-body .col-cta-points li { padding-left: 10px; }
.col-body .col-cta > * + * { margin-top: 0; }
.col-more-list + .col-wrap .col-cta { margin-bottom: 80px; }
.col-cta-actions { display: grid; gap: 12px; }
.col-cta .btn { min-width: 240px; height: 56px; font-size: 16px; }
.col-cta .btn-line { background: transparent; color: #fff; border-color: #fff; box-shadow: none; }
.col-cta .btn-line:hover { background: rgba(255, 255, 255, .1); transform: none; }
@media (max-width: 760px) { .col-cta { grid-template-columns: 1fr; padding: 24px 20px; } .col-cta .btn { min-width: 0; width: 100%; } .col-cta-title { font-size: 18px; } }

/* 記事カード */
.col-more { padding: 56px 0 80px; background: var(--gray); margin-top: 48px; }
.col-more-list { margin-top: 0; padding-top: 48px; }
.col-more-h { font-size: 22px; font-weight: 900; color: var(--navy); margin-bottom: 20px; }
.col-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.col-card a { display: flex; flex-direction: column; height: 100%; padding: 22px 22px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.col-card a:hover { border-color: var(--blue); box-shadow: 0 6px 20px rgba(13, 41, 68, .08); }
.col-card-cat { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-light); border-radius: 4px; padding: 1px 10px; line-height: 1.7; }
.col-card-title { margin-top: 12px; font-size: 17px; font-weight: 900; line-height: 1.6; color: var(--navy); text-wrap: pretty; }
.col-card a:hover .col-card-title { color: var(--blue); }
.col-card-lead { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.col-card-date { margin-top: auto; padding-top: 14px; font-family: var(--num); font-size: 12px; color: var(--ink-3); }

@media (max-width: 560px) {
  .col-body { font-size: 16px; }
  .toc { padding: 20px; }
  .box { padding: 18px 18px; }
  .col-body th, .col-body td { padding: 10px; font-size: 14px; }
  .col-body tbody th { white-space: normal; }
}

/* トップページの記事欄 */
.col-all { margin-top: 32px; text-align: center; }
#columns .col-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { #columns .col-cards { grid-template-columns: 1fr; } }

/* 問診票の対訳表 */
.col-body h3 .en-sub { display: block; font-family: var(--num); font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: .04em; margin-top: 2px; }
.qset h3 { margin-top: 2.2em; }
.qtable { font-size: 14px; }
.qtable th:nth-child(1), .qtable td:nth-child(1) { width: 30%; }
.qtable th:nth-child(2), .qtable td:nth-child(2) { width: 32%; }
.qtable td[lang="en"] { font-family: var(--num), var(--jp); letter-spacing: .01em; }
.qtable .ja { color: var(--ink-3); font-size: 12px; font-family: var(--jp); }
@media (max-width: 560px) { .qtable { font-size: 13px; } .qtable th, .qtable td { padding: 8px; } }