/*
 * コラム（/column）の本文の見た目。
 *
 * サイトの見た目は Tailwind のビルドで作っているが、本番サーバーには Node が無く
 * 作り直せない。記事の本文は h2・p・表が長く続くので、1つずつ class を付けず、
 * .col-body の下の要素にまとめて当てる。
 * 開発機で作り直すときは resources/css/app.css へ移してよい。
 *
 * 色はビルド済みの CSS と同じ値（bay / ink / slate / sodium / concrete）。
 */

.col-body {
    --ink: #1B1D21;
    --slate: #5A5F68;
    --bay: #16181C;
    --sodium: #F0A02E;
    --sodium-deep: #8F5810;
    --sodium-wash: #FCF1DE;
    --concrete: #C6C4BC;
    --concrete-soft: #E4E3DE;
    --winter-bg: #DCEBF7;
    --winter-fg: #1E4E79;

    color: var(--ink);
    font-size: 16px;
    line-height: 1.9;
}

.col-body > * + * { margin-top: 1.25em; }

/* 見出し。h2 の上に区切り線を引き、ページの中のどこにいるか分かるようにする */
.col-body h2 {
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 2px solid var(--bay);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.4;
    scroll-margin-top: 6rem;
}
.col-body h3 {
    margin-top: 2.25rem;
    padding-left: .75rem;
    border-left: 4px solid var(--sodium);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
}
.col-body h2 + *, .col-body h3 + * { margin-top: .9rem; }

.col-body strong { font-weight: 700; background: linear-gradient(transparent 62%, var(--sodium-wash) 62%); }

.col-body a:not(.col-btn) {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--sodium);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.col-body a:not(.col-btn):hover { color: var(--sodium-deep); }

.col-body ul, .col-body ol { padding-left: 1.4em; }
.col-body ul { list-style: disc; }
.col-body ol { list-style: decimal; }
.col-body li + li { margin-top: .4em; }
.col-body li::marker { color: var(--sodium-deep); font-weight: 700; }

/* 表。小さい画面では横にずらして読む（ページ全体は横に動かさない） */
.col-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--concrete); background: #fff; }
.col-table table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.col-table th, .col-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--concrete-soft); text-align: left; vertical-align: top; }
.col-table thead th { background: var(--bay); color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; }
.col-table tbody th { font-weight: 700; white-space: nowrap; background: #F6F5F2; }
.col-table tr:last-child > * { border-bottom: 0; }
.col-table caption { caption-side: bottom; padding: .6rem 1rem; text-align: left; font-size: 13px; color: var(--slate); }

/* 先に結論。記事を開いて最初に読ませる答え */
.col-answer {
    border: 2px solid var(--bay);
    background: #fff;
    padding: 1.25rem 1.4rem 1.4rem;
}
.col-answer__label {
    display: inline-block;
    background: var(--bay);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .2rem .7rem;
    line-height: 1.6;
}
.col-answer__main { margin-top: .7rem; font-size: 1.2rem; font-weight: 800; line-height: 1.6; }
.col-answer ul { margin-top: .7rem; font-size: 15px; line-height: 1.8; }

/* 補足・注意 */
.col-note { border-left: 4px solid var(--sodium); background: var(--sodium-wash); padding: 1rem 1.2rem; font-size: 15px; line-height: 1.8; }
.col-note__title { font-weight: 700; }
.col-note > * + * { margin-top: .5em; }

/* 番号付きの手順 */
.col-steps { list-style: none !important; padding: 0 !important; counter-reset: step; border: 1px solid var(--concrete); background: #fff; }
.col-steps > li { counter-increment: step; position: relative; padding: 1rem 1.2rem 1rem 3.6rem; border-bottom: 1px solid var(--concrete-soft); margin: 0 !important; }
.col-steps > li:last-child { border-bottom: 0; }
.col-steps > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute; left: 1.1rem; top: 1rem;
    font-family: Archivo, system-ui, sans-serif; font-stretch: 112%;
    font-weight: 800; font-size: 1.05rem; color: var(--sodium-deep);
}
.col-steps b { display: block; font-size: 1.02rem; }
.col-steps span { display: block; margin-top: .2rem; font-size: 15px; line-height: 1.8; color: var(--slate); }

/* 2つを並べて比べる */
.col-pair { display: grid; gap: 1px; background: var(--concrete); border: 1px solid var(--concrete); }
@media (min-width: 640px) { .col-pair { grid-template-columns: 1fr 1fr; } }
.col-pair > div { background: #fff; padding: 1.1rem 1.2rem; font-size: 15px; line-height: 1.8; }
.col-pair h4 { font-weight: 700; font-size: 1.02rem; margin-bottom: .3rem; }

/* よくある質問。開かなくても質問と答えの頭が読めるように、閉じずに並べる */
.col-qa { border-top: 1px solid var(--concrete); }
.col-qa > div { padding: 1.1rem 0; border-bottom: 1px solid var(--concrete); }
.col-qa dt { font-weight: 700; display: flex; gap: .6rem; line-height: 1.6; }
.col-qa dd { margin-top: .4rem; display: flex; gap: .6rem; font-size: 15px; line-height: 1.8; color: var(--slate); }
.col-qa dt::before, .col-qa dd::before {
    flex: none; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center;
    font-family: Archivo, system-ui, sans-serif; font-weight: 800; font-size: 13px; line-height: 1;
}
.col-qa dt::before { content: "Q"; background: var(--bay); color: #fff; }
.col-qa dd::before { content: "A"; background: var(--sodium); color: var(--bay); }

/* 図 */
.col-body figure { margin-top: 2rem; }
.col-body figcaption { margin-top: .5rem; font-size: 13px; color: var(--slate); line-height: 1.6; }

/* 記事の途中に置く誘導。記事を読み終える前に離れてよい人向け */
.col-inline-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.5rem;
    border: 1px solid var(--concrete); background: #fff; padding: 1.1rem 1.25rem;
}
.col-inline-cta p { font-weight: 700; line-height: 1.6; }
.col-inline-cta small { display: block; font-weight: 400; font-size: 13px; color: var(--slate); }
.col-btn {
    display: inline-flex; align-items: center; gap: .4rem; flex: none;
    border: 2px solid var(--bay); background: var(--bay); color: #fff;
    padding: .6rem 1.1rem; font-size: 14px; font-weight: 700; line-height: 1.4;
    transition: background-color .15s, color .15s;
}
.col-btn:hover { background: #fff; color: var(--bay); }

/* 出典 */
.col-sources { font-size: 13px; line-height: 1.8; color: var(--slate); }
.col-sources a { font-weight: 400 !important; text-decoration-thickness: 1px !important; }

/* 一覧と関連記事のカード（本文の外でも使う） */
.col-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #C6C4BC; transition: border-color .15s; height: 100%; }
.col-card:hover { border-color: #16181C; }
.col-card img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.col-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.col-card__title { font-weight: 700; line-height: 1.55; color: #1B1D21; }
.col-card__desc { font-size: 13px; line-height: 1.7; color: #5A5F68; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.col-card__date { margin-top: auto; font-size: 12px; color: #5A5F68; }

.col-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .col-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* パンくず */
.col-crumbs { display: flex; flex-wrap: wrap; gap: .3rem .5rem; font-size: 12px; color: rgba(255, 255, 255, .6); }
.col-crumbs a:hover { color: #F0A02E; }
.col-crumbs li + li::before { content: "/"; margin-right: .5rem; color: rgba(255, 255, 255, .35); }