/* =========================================================
住まいのコラム（/column/・ハブ・記事） 接頭辞：col-
WF：住まいのコラム WF「公開初版」ボード。下層ページ共通（info.css）の上に重ねる。
========================================================= */
.col-page { gap: 56px; }
/* 工事の種類から探す（コラムトップ） */
.col-group { display: flex; flex-direction: column; gap: 14px; }
.col-group__title { padding-left: 12px; border-left: 6px solid var(--teal); font-weight: 900; font-size: 20px; line-height: 1.5; }
.col-hubcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.col-hubcard { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; background: var(--white); border: 2px solid var(--ink); text-decoration: none; color: var(--ink); }
.col-hubcard:hover { color: var(--ink); background: var(--light); }
.col-hubcard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.col-hubcard__name { font-weight: 900; font-size: 20px; line-height: 1.5; }
.col-hubcard__count { font-size: 13px; color: var(--gray); white-space: nowrap; }
.col-hubcard__latest { font-size: 13.5px; line-height: 1.75; color: var(--gray); }
.col-hubcard__go { margin-top: auto; font-weight: 900; font-size: 14px; }
/* 記事カード */
.col-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.col-card { min-width: 0; }
.col-card__link { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--white); border: 2px solid var(--ink); text-decoration: none; color: var(--ink); }
.col-card__link:hover { color: var(--ink); }
.col-card__link:hover .col-card__title { color: var(--red); text-decoration: underline; }
.col-card__img { display: block; aspect-ratio: 16 / 9; border-bottom: 2px solid var(--ink); background: var(--tan); overflow: hidden; }
.col-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.col-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.col-card__date { font-size: 12.5px; color: var(--gray); }
.col-card__title { font-weight: 900; font-size: 17px; line-height: 1.6; }
.col-card__excerpt { font-size: 13.5px; line-height: 1.8; color: var(--gray); }
.col-card__num { position: absolute; z-index: 1; left: -2px; top: -2px; min-width: 36px; height: 36px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--white); font-weight: 900; font-size: 16px; line-height: 1; }
.col-card__num .one svg { fill: var(--yellow); margin: 0; height: 0.9em; }
.col-card--noimg .col-card__body { padding-top: 22px; }
.col-card--noimg .col-card__num + .col-card__body { padding-top: 46px; }
/* 工種ページへの案内 */
.col-svc { display: flex; flex-direction: column; gap: 12px; }
.col-svc__link { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 26px; background: var(--tint); border: 2px solid var(--ink); text-decoration: none; color: var(--ink); }
.col-svc__link:hover { color: var(--ink); background: var(--white); }
.col-svc__text { font-size: 15.5px; line-height: 1.7; }
.col-svc__go { flex-shrink: 0; font-weight: 900; font-size: 16px; }
.col-svc__link:hover .col-svc__go { color: var(--red); text-decoration: underline; }
/* ほかのコラム・一覧へ */
.col-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.col-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--white); border: 2px solid var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ink); }
.col-chips a:hover { background: var(--yellow); color: var(--ink); }
.col-more { align-self: flex-start; font-weight: 900; font-size: 15px; }
/* ---------- 記事 ---------- */
/* 本文の1行は全角40字くらいまで（WCAG 1.4.8）。16px・字間2%で約41字になる幅。記事のページは、ほかの部品も同じ幅にそろえる。 */
.col-article { max-width: calc(680px + var(--gutter) * 2); gap: 48px; }
.col-article__head { display: flex; flex-direction: column; gap: 14px; }
.col-article__hub { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 2px solid var(--ink); background: var(--tint); font-weight: 700; font-size: 13px; text-decoration: none; color: var(--ink); }
.col-article__hub:hover { background: var(--white); color: var(--ink); }
.col-article__title { font-weight: 900; font-size: 36px; line-height: 1.5; }
.col-article__dates { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--gray); }
.col-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.col-byline__face { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; background: var(--tint); flex-shrink: 0; }
.col-byline__name { flex: 0 1 auto; min-width: 0; font-size: 14px; line-height: 1.6; }
.col-byline__name a { font-weight: 700; }
.col-byline__ai { font-size: 13px; color: var(--gray); }
.col-article__eye { margin: 0; border: 2px solid var(--ink); background: var(--tan); }
.col-article__eye img { display: block; width: 100%; height: auto; }
/* 記事の本体（左の目次がない幅では、これまでどおり1列） */
.col-article__main { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.col-rail { display: none; }
/*
* 左の目次（幅1200px以上で、H2が3つ以上ある記事）。NN/g「Table of Contents」：
* 左の列の目次は一般的で、本文と目次が見た目で分かれる。横の列の目次は固定し、今いる見出しを目立たせる。
* 装飾の少ない形にする（右の列は見落とされやすいため置かない）。https://www.nngroup.com/articles/table-of-contents/
*/
@media (min-width: 1200px) {
.col-article--rail {
max-width: calc(240px + 56px + 680px + var(--gutter) * 2);
display: grid; grid-template-columns: 240px minmax(0, 680px); column-gap: 56px; align-items: stretch;
}
.col-article--rail .col-rail { display: block; }
.col-article--rail .col-toc--pc { display: none; }
.col-rail__toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 4px 0 8px; }
.admin-bar .col-rail__toc { top: 56px; max-height: calc(100vh - 80px); }
.col-rail__title { margin: 0 0 10px; font-weight: 900; font-size: 13px; color: var(--gray); letter-spacing: 0.04em; }
.col-rail .col-toc__list { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; border-left: 2px solid var(--rule); }
.col-rail .col-toc__list a { display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 3px solid transparent; color: var(--gray); text-decoration: none; }
.col-rail .col-toc__list a:hover { color: var(--ink); text-decoration: underline; }
.col-rail .col-toc__list a[aria-current="location"] { border-left-color: var(--red); color: var(--ink); font-weight: 700; }
.col-rail .col-toc__no { margin-right: 6px; font-size: 12px; }
}
/* 目次 */
.col-toc { margin: 8px 0 12px; border: 2px solid var(--ink); background: var(--white); padding: 18px 22px; }
.col-toc__title { font-weight: 900; font-size: 18px; line-height: 1.5; margin-bottom: 6px; }
.col-toc__list { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.6; }
.col-toc__list li { border-top: 1px dashed #D9CFC0; }
.col-toc__list a { display: block; padding: 6px 0; text-decoration: none; color: var(--ink); }
.col-toc__list a:hover { color: var(--red); text-decoration: underline; }
.col-toc__no { margin-right: 8px; color: var(--gray); }
.col-toc--sp { display: none; }
.col-toc--sp > summary { cursor: pointer; min-height: 32px; margin-bottom: 0; }
.col-toc--sp[open] > summary { margin-bottom: 8px; }
/* 本文（記事側が書いた H2・H3・段落・箇条書き・表を整える） */
/*
* 本文の文字：デジタル庁デザインシステム「タイポグラフィ」の本文の基準（16px以上・行高170〜175%・字間2%）。
* https://design.digital.go.jp/dads/foundations/typography/
* 本文は文節での折り返し（サイト共通の word-break: auto-phrase）をやめ、行末をそろえる。
* 文節で折り返すと、長い本文では行の途中で早く改行され、行末がでこぼこになるため（見出しは文節のまま）。
*/
.col-body { display: flex; flex-direction: column; gap: 20px; font-size: 16px; line-height: 1.75; letter-spacing: 0.02em; min-width: 0; word-break: normal; overflow-wrap: anywhere; }
.col-body > * { margin: 0; }
.col-body h2, .col-body h3, .col-body h4 { word-break: auto-phrase; letter-spacing: 0; }
/* 見出しの上は広く、下は狭く：まとまり（セクション）が分かるように */
.col-body h2 { margin-top: 36px; padding: 0 0 10px; border-bottom: 3px solid var(--ink); font-weight: 900; font-size: 24px; line-height: 1.5; scroll-margin-top: 20px; }
.col-body h3 { margin-top: 16px; padding-left: 12px; border-left: 6px solid var(--teal); font-weight: 900; font-size: 19px; line-height: 1.5; }
.col-body h2 + h3 { margin-top: 4px; }
.col-body h4 { font-weight: 900; font-size: 16px; line-height: 1.6; }
.col-body ul, .col-body ol { padding-left: 1.5em; font-size: 16px; line-height: 1.75; }
.col-body ul { list-style: disc; }
.col-body ol { list-style: decimal; }
.col-body li + li { margin-top: 6px; }
.col-body li::marker { color: var(--gray); }
/* 本文のリンクは太字にしない（太字は強調だけに使う）。下線で、リンクと分かるようにする（WCAG 1.4.1）。 */
.col-body a { font-weight: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.col-body a:hover { text-decoration-thickness: 2px; }
/* 目次は本文の中にあるが、本文の番号付きリストの設定を受けない */
.col-body .col-toc__list { padding-left: 0; list-style: none; font-size: 15px; line-height: 1.6; }
.col-body .col-toc__list li + li { margin-top: 0; }
.col-body .col-toc__list a { text-decoration: none; }
.col-body strong { font-weight: 900; background: linear-gradient(transparent 62%, var(--hl) 62%); }
.col-body img { display: block; height: auto; }
.col-body figure { margin: 0; }
.col-body figcaption { margin-top: 6px; font-size: 13px; color: var(--gray); line-height: 1.7; }
.col-body blockquote { padding: 14px 18px; border-left: 6px solid var(--muted); background: var(--white); font-size: 15.5px; line-height: 1.9; }
.col-body blockquote > * { margin: 0; }
.col-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; letter-spacing: 0; overflow-wrap: normal; }
.col-body th, .col-body td { min-width: 5.5em; padding: 9px 12px; border: 2px solid var(--ink); text-align: left; vertical-align: top; }
.col-body th { background: var(--tint); font-weight: 900; }
.col-body td { background: var(--white); }
/*
* 記事の部品（記事側が本文に書く）。NN/g「Formatting Long-Form Content」：
* 要点のまとめは分かりやすい見出しを付け、枠線や背景で区別する。本文から目立たせる段落（コールアウト）を使う。
* https://www.nngroup.com/articles/formatting-long-form-content/
* この記事のポイント：
* 補足 ：
* 注意 ：
*/
.col-body .col-point { padding: 18px 22px 20px; background: var(--white); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--yellow); }
.col-body .col-point__title { margin: 0 0 8px; font-weight: 900; font-size: 16px; letter-spacing: 0; }
.col-body .col-point ul, .col-body .col-point ol { margin: 0; }
.col-body .col-point li + li { margin-top: 4px; }
.col-body .col-note { padding: 14px 18px 16px; background: var(--tint); border-left: 6px solid var(--teal); }
.col-body .col-note--caution { background: #FBEDEC; border-left-color: var(--red); }
.col-body .col-note__title { margin: 0 0 4px; font-weight: 900; font-size: 15px; letter-spacing: 0; }
.col-body .col-note > p, .col-body .col-note > ul, .col-body .col-note > ol { margin: 0; font-size: 15px; line-height: 1.75; }
.col-body .col-note > * + * { margin-top: 6px; }
.col-body .col-note__title + * { margin-top: 0; }
/* 表は横にはみ出すときだけ横スクロール */
.col-body .col-table-wrap { overflow-x: auto; }
/* この記事を書いた人・この記事の作り方 */
.col-author { display: flex; flex-direction: column; gap: 14px; }
.col-author__box { display: flex; gap: 22px; align-items: flex-start; padding: 22px 26px; background: var(--white); border: 2px solid var(--ink); }
.col-author__face { width: 88px; height: 88px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; background: var(--tint); }
.col-author__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.col-author__label { font-size: 12.5px; color: var(--gray); }
.col-author__name { font-weight: 900; font-size: 19px; line-height: 1.5; }
.col-author__role { margin-left: 8px; font-weight: 500; font-size: 13px; }
.col-author__bio { font-size: 14px; line-height: 1.8; }
.col-author__link { align-self: flex-start; font-weight: 700; font-size: 14px; }
.col-ai { padding: 16px 22px; border: 2px dashed var(--muted); background: var(--white); font-size: 13.5px; line-height: 1.8; scroll-margin-top: 20px; }
.col-article .col-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.col-article .info-cta__box { flex-wrap: wrap; gap: 16px 24px; }
@media (max-width: 1023.98px) {
.col-hubcards, .col-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-article .col-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
.col-page { gap: 44px; }
.col-group { gap: 10px; }
.col-group__title { padding-left: 10px; font-size: 17px; }
.col-hubcards { grid-template-columns: 1fr; gap: 10px; }
.col-hubcard { gap: 6px; padding: 14px 16px; }
.col-hubcard__name { font-size: 17px; }
.col-hubcard__count { font-size: 12.5px; }
.col-hubcard__latest { font-size: 13px; line-height: 1.7; }
.col-hubcard__go { display: none; }
/* スマホのカード：左にアイキャッチ、右に更新日とタイトル */
.col-cards, .col-article .col-cards { grid-template-columns: 1fr; gap: 12px; }
.col-card__link { flex-direction: row; gap: 12px; padding: 12px; }
.col-card__img { width: 112px; height: 84px; aspect-ratio: auto; flex-shrink: 0; border: 0; }
.col-card__body { padding: 0; gap: 4px; min-width: 0; }
.col-card__date { font-size: 11.5px; }
.col-card__title { font-size: 14.5px; }
.col-card__excerpt { display: none; }
.col-card--noimg .col-card__body { padding-top: 0; }
.col-card--noimg .col-card__num + .col-card__body { padding-top: 0; padding-left: 40px; }
.col-svc__link { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; }
.col-svc__text { font-size: 13.5px; }
.col-svc__go { font-size: 15px; }
.col-chips { gap: 8px; }
.col-chips a { padding: 0 14px; font-size: 14px; }
.col-more { display: inline-flex; align-items: center; min-height: 44px; }
.col-article { gap: 44px; }
.col-article__main { gap: 44px; }
.col-article__head { gap: 14px; }
.col-article__title { font-size: 25px; }
.col-byline__face { width: 40px; height: 40px; }
.col-byline { gap: 0 12px; }
.col-byline__name { flex: 1 1 0; }
.col-byline__ai { flex-basis: 100%; display: inline-flex; align-items: center; min-height: 44px; }
.col-toc--pc { display: none; }
.col-toc--sp { display: block; padding: 12px 14px; }
.col-toc__title { font-size: 16px; }
.col-toc__list { font-size: 14px; }
.col-toc__list a { padding: 8px 0; }
.col-body { gap: 18px; font-size: 16px; line-height: 1.75; }
.col-body h2 { margin-top: 28px; font-size: 21px; scroll-margin-top: 72px; }
.col-body h3 { font-size: 17.5px; }
.col-body ul, .col-body ol { font-size: 16px; }
.col-body .col-toc__list { font-size: 14px; }
.col-body table { font-size: 13px; }
.col-body .col-point { padding: 14px 16px 16px; box-shadow: 3px 3px 0 var(--yellow); }
.col-body .col-note { padding: 12px 14px 14px; }
/* スマホでは列を細くしすぎず、はみ出す分は横スクロール */
.col-body th, .col-body td { min-width: 7em; padding: 8px 10px; }
.col-author__box { gap: 14px; padding: 16px; }
.col-author__face { width: 64px; height: 64px; }
.col-author__name { font-size: 17px; }
.col-ai { padding: 14px 16px; scroll-margin-top: 72px; }
}
/* =========================================================
遊びの箱（section.col-play）・インタビュー・相談の案内（2026-10-25）
JS が動かないときは、質問・選択肢・結果をそのまま文章として見せる。
========================================================= */
.col-body .col-play { margin: 8px 0; padding: 22px 24px 24px; background: var(--white); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--teal); letter-spacing: 0; }
.col-body .col-play > * + * { margin-top: 14px; }
.col-body .col-play__title { margin: 0; font-weight: 900; font-size: 19px; line-height: 1.5; }
.col-body .col-play__title::before { content: "やってみよう"; display: inline-block; margin-right: 10px; padding: 2px 10px; border-radius: 999px; background: var(--yellow); font-size: 12px; vertical-align: 2px; }
.col-body .col-play__lead { font-size: 15px; color: var(--gray); }
.col-body .col-play__qs { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.col-body .col-play__q { counter-increment: q; padding: 14px 0; border-top: 1.5px dashed var(--rule); }
.col-body .col-play__q:first-child { border-top: 0; padding-top: 4px; }
.col-body .col-play__qtext { margin: 0 0 10px; font-weight: 900; font-size: 16px; line-height: 1.6; }
.col-body .col-play__qtext::before { content: "Q" counter(q) " "; color: var(--teal); }
.col-body .col-play__opts { margin: 0; padding: 0 0 0 1.4em; list-style: disc; font-size: 15px; }
.col-body .col-play__src { font-size: 13px; color: var(--gray); line-height: 1.7; }
.col-body .col-play__result { margin-top: 12px; padding: 14px 16px; background: var(--paper); border-radius: 10px; }
.col-body .col-play__result > * { margin: 0; }
.col-body .col-play__result > * + * { margin-top: 8px; }
.col-body .col-play__rtitle { font-weight: 900; font-size: 17px; line-height: 1.6; }
.col-body .col-play__steps { margin: 0; padding-left: 1.5em; list-style: decimal; }
/* JS が動いたとき */
.col-body .col-play.is-active .col-play__opts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.col-body .col-play.is-active .col-play__opts > li { margin: 0; }
.col-body .col-play__opt { min-height: 44px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-weight: 700; font-size: 15px; line-height: 1.5; text-align: left; cursor: pointer; }
.col-body .col-play__opt:hover { background: var(--light); }
.col-body .col-play__opt[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.col-body .col-play__opt:focus-visible, .col-body .col-play__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--yellow); }
.col-body .col-play.is-active .col-play__result { display: none; }
.col-body .col-play.is-active .col-play__result.is-shown { display: block; animation: col-pop 0.25s ease-out; }
@keyframes col-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .col-body .col-play.is-active .col-play__result.is-shown { animation: none; } }
.col-body .col-play__out { font-weight: 700; font-size: 14px; color: var(--gray); }
.col-body .col-play__out:empty { display: none; }
.col-body .col-play__sum { margin: 0; padding: 12px 16px; background: var(--hl); border-radius: 10px; color: var(--ink); }
.col-body .col-play__sum + .col-play__sum { margin-top: 8px; }
.col-body .col-play__sum span { display: block; font-size: 13px; }
.col-body .col-play__sum b { font-weight: 900; font-size: 22px; }
.col-body .col-play__sum--material { background: var(--tint); }
.col-body .col-play__sum-note { margin: 6px 0 0; font-size: 13.5px; color: var(--ink); font-weight: 500; }
.col-body .col-play__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.col-body .col-play__btn { min-height: 44px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.col-body .col-play__btn--main { background: var(--yellow); }
.col-body .col-play__btn:disabled { opacity: 0.4; cursor: default; }
.col-body .col-play__count { font-weight: 700; font-size: 14px; color: var(--gray); }
.col-body .col-play__reset { display: block; margin-left: auto; font-size: 13px; }
.col-body .col-play__next { padding: 16px; border: 2px dashed var(--ink); border-radius: 10px; }
.col-body .col-play__next-title { margin: 0 0 10px; font-weight: 900; font-size: 16px; }
/* インタビュー（代表に聞きました） */
.col-body .col-voice { padding: 16px 18px 18px; background: var(--white); border: 2px solid var(--ink); border-radius: 14px; letter-spacing: 0; }
.col-body .col-voice > * { margin: 0; }
.col-body .col-voice > * + * { margin-top: 8px; }
.col-body .col-voice__who { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 14px; color: var(--gray); }
.col-body .col-voice__who img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink); background: var(--tint); object-fit: cover; flex-shrink: 0; }
.col-body .col-voice__q { font-weight: 900; font-size: 15.5px; }
.col-body .col-voice__q::before { content: "Q "; color: var(--teal); }
.col-body .col-voice__a { position: relative; padding: 12px 14px; background: var(--tint); border-radius: 10px; font-size: 15.5px; line-height: 1.8; }
.col-body .col-voice__a::before { content: "A "; font-weight: 900; color: var(--red); }
/* 記事の最後の相談の案内（導線パターンごと） */
.col-cta { padding: 24px 26px; background: var(--yellow); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; gap: 10px; }
.col-cta__title { font-weight: 900; font-size: 22px; line-height: 1.5; }
.col-cta__lead { font-size: 15px; line-height: 1.7; }
.col-cta__free { font-family: var(--f-hand); font-size: 14px; }
.col-cta__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.col-cta__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 2px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); font-weight: 900; font-size: 15px; text-decoration: none; }
.col-cta__btn:hover { background: var(--light); color: var(--ink); }
.col-cta__btn--tel { flex-direction: column; align-items: flex-start; justify-content: center; padding: 6px 20px; font-size: 18px; line-height: 1.3; }
.col-cta__btn--tel small { font-weight: 500; font-size: 11.5px; }
.col-cta__line { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.col-cta__line > a { line-height: 0; }
.col-cta__line-label { font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.col-cta__line img { display: block; height: 36px; width: auto; max-width: none; }
.col-photos { margin-top: 6px; background: var(--white); border: 2px solid var(--ink); border-radius: 10px; }
.col-photos > summary { min-height: 44px; display: flex; align-items: center; padding: 0 14px; font-weight: 900; font-size: 14.5px; cursor: pointer; }
.col-photos ol { margin: 0; padding: 0 14px 14px; list-style: none; font-size: 14.5px; line-height: 1.7; }
.col-photos li { display: flex; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--rule); }
.col-photos__no { flex-shrink: 0; width: 1.6em; font-weight: 900; color: var(--red); }
.col-body .col-photos ol { padding-left: 14px; }
/* 記事の箱の確認（ログイン中の人だけ） */
.col-check { padding: 14px 18px; background: #FFF4D6; border: 2px solid var(--red); border-radius: 10px; font-size: 14px; line-height: 1.7; }
.col-check__title { font-weight: 900; color: var(--red); margin-bottom: 4px; }
.col-check ul { margin: 0; padding-left: 1.3em; list-style: disc; }
@media (max-width: 767.98px) {
.col-body .col-play { padding: 16px 14px 18px; box-shadow: 4px 4px 0 var(--teal); }
.col-body .col-play__title { font-size: 17px; }
.col-body .col-play__title::before { display: table; margin: 0 0 6px; }
.col-body .col-play.is-active .col-play__opts { flex-direction: column; }
.col-body .col-play__opt { width: 100%; }
.col-cta { padding: 20px 16px; box-shadow: 4px 4px 0 var(--ink); }
.col-cta__title { font-size: 19px; }
.col-cta__btns { flex-direction: column; align-items: stretch; }
.col-cta__btn { justify-content: center; }
.col-cta__btn--tel { align-items: center; }
.col-cta__line { align-items: center; }
}