/* ===========================================================
   columns.css — コラム記事／一覧の共通スタイル
   shared.css のデザイントークン（--mint4 / --accent / --navy 等）を前提に上乗せする。
   コラムページは shared.css → columns.css の順で読み込むこと。
   =========================================================== */

/* ---------- 記事ヘッダー ---------- */
.col-hero{background:linear-gradient(180deg,var(--mint) 0%,var(--paper) 78%);padding:44px 24px 8px}
.col-hero-inner{max-width:860px;margin:0 auto}
.col-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.col-cat{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--mint2);color:var(--mint4);font-size:11.5px;font-weight:600;padding:6px 13px;border-radius:999px}
.col-cat::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--mint4)}
.col-date{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.col-date .up{margin-left:10px}
.col-hero h1{font-size:clamp(24px,3.4vw,34px);line-height:1.6;color:var(--navy);letter-spacing:.01em;margin:4px 0 16px}
.col-lede{font-size:14.5px;color:var(--text);line-height:2.05;max-width:760px}
.col-eyecatch{max-width:860px;margin:26px auto 0;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.col-eyecatch img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 記事本文レイアウト ---------- */
.col-wrap{max-width:860px;margin:0 auto;padding:8px 24px 8px}
.col-body{font-size:14.5px;color:var(--text);line-height:2.15}
.col-body h2{font-size:clamp(19px,2.4vw,23px);color:var(--navy);line-height:1.5;margin:52px 0 18px;padding-bottom:12px;border-bottom:2px solid var(--mint2);scroll-margin-top:96px}
.col-body h2::before{content:'';display:inline-block;width:8px;height:20px;background:var(--mint4);border-radius:3px;margin-right:12px;vertical-align:-3px}
.col-body h3{font-size:17px;color:var(--navy);line-height:1.55;margin:34px 0 12px;scroll-margin-top:96px}
.col-body h3::before{content:'';display:inline-block;width:14px;height:14px;border:3px solid var(--accent);border-radius:50%;margin-right:9px;vertical-align:0}
.col-body p{margin:0 0 1.35rem}
.col-body a{color:var(--mint4);text-decoration:underline;text-underline-offset:2px}
.col-body strong{color:var(--navy);font-weight:600;background:linear-gradient(transparent 68%,rgba(232,119,58,.20) 68%);padding:0 2px}
.col-body ul,.col-body ol{margin:0 0 1.35rem;padding-left:0;list-style:none}
.col-body ul>li,.col-body ol>li{position:relative;padding-left:28px;margin-bottom:11px;line-height:1.95}
.col-body ul>li::before{content:'';position:absolute;left:6px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--mint4)}
.col-body ol{counter-reset:ol}
.col-body ol>li{counter-increment:ol}
.col-body ol>li::before{content:counter(ol);position:absolute;left:0;top:2px;width:20px;height:20px;background:var(--mint4);color:#fff;font-size:11.5px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center}
.col-body figure{margin:26px 0}
.col-body figure img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-sm);display:block}
.col-body figcaption{font-size:11.5px;color:var(--muted);margin-top:8px;text-align:center}

/* 補足カード（ポイント／注意） */
.col-callout{border-radius:var(--radius);padding:22px 24px;margin:26px 0;border-left:4px solid var(--mint4);background:var(--mint)}
.col-callout .co-h{font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.col-callout .co-h::before{content:'POINT';font-size:9.5px;letter-spacing:.14em;background:var(--mint4);color:#fff;padding:3px 8px;border-radius:5px}
.col-callout p{margin:0;font-size:13.5px;line-height:2}
.col-callout.warn{border-left-color:var(--accent);background:var(--warm)}
.col-callout.warn .co-h::before{content:'CHECK';background:var(--accent)}

/* ---------- 目次 ---------- */
.col-toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;margin:6px 0 30px}
.col-toc .toc-h{font-size:12px;letter-spacing:.12em;color:var(--mint4);font-weight:700;margin-bottom:12px}
.col-toc ol{list-style:none;counter-reset:toc;margin:0;padding:0}
.col-toc li{counter-increment:toc;margin-bottom:9px;line-height:1.6}
.col-toc a{color:var(--text);text-decoration:none;font-size:13.5px;display:flex;gap:10px}
.col-toc a::before{content:counter(toc,decimal-leading-zero);color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.col-toc a:hover{color:var(--mint4)}

/* ---------- FAQ ---------- */
.col-faq{max-width:860px;margin:44px auto 0;padding:0 24px}
.col-faq h2{font-size:20px;color:var(--navy);margin-bottom:18px}
.col-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.col-faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;font-size:14px;color:var(--navy);display:flex;gap:12px;align-items:flex-start}
.col-faq summary::-webkit-details-marker{display:none}
.col-faq summary::before{content:'Q';flex-shrink:0;width:24px;height:24px;background:var(--mint4);color:#fff;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.col-faq details[open] summary{border-bottom:1px solid var(--line)}
.col-faq .faq-a{padding:16px 22px 20px 58px;font-size:13.5px;line-height:2;color:var(--text)}

/* ---------- 監修（E-E-A-T） ---------- */
.col-author{max-width:860px;margin:40px auto 0;padding:0 24px}
.col-author-inner{background:var(--warm);border-radius:var(--radius-lg);padding:26px 28px;display:flex;gap:20px;align-items:center}
.col-author-inner img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:var(--shadow-sm)}
.col-author .ea-role{font-size:10.5px;letter-spacing:.14em;color:var(--accent2);font-weight:700;margin-bottom:5px}
.col-author .ea-name{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:8px}
.col-author .ea-bio{font-size:12.5px;color:var(--muted);line-height:1.95}

/* 医療広告ディスクレーマ */
.col-disclaimer{max-width:860px;margin:26px auto 0;padding:16px 24px;font-size:11.5px;color:var(--muted);line-height:1.9;border-top:1px dashed var(--line)}

/* ---------- 関連記事 ---------- */
.col-related{max-width:1040px;margin:52px auto 0;padding:0 24px}
.col-related h2{font-size:18px;color:var(--navy);margin-bottom:18px;text-align:center}
.col-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.col-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s}
.col-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--mint2)}
.col-card-img{aspect-ratio:16/9;background:var(--mint);overflow:hidden}
.col-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.col-card-b{padding:16px 18px 20px}
.col-card .cc-cat{font-size:10.5px;color:var(--mint4);font-weight:700;letter-spacing:.06em}
.col-card h3{font-size:14px;line-height:1.6;color:var(--navy);margin:7px 0 0}

/* ---------- 記事末CTA ---------- */
.col-cta{max-width:1040px;margin:56px auto 0;padding:0 24px 8px}
.col-cta-inner{background:linear-gradient(135deg,var(--mint4),#1f7d60);border-radius:var(--radius-lg);padding:40px 32px;text-align:center;color:#fff}
.col-cta-inner h2{font-size:clamp(19px,2.6vw,24px);color:#fff;margin-bottom:12px;line-height:1.55}
.col-cta-inner p{font-size:13.5px;color:rgba(255,255,255,.92);line-height:2;max-width:600px;margin:0 auto 24px}
.col-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.col-cta-btns a{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-size:13.5px;font-weight:700;text-decoration:none}
.col-cta-btns .b-web{background:#fff;color:var(--mint4)}
.col-cta-btns .b-tel{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.5)}
.col-cta-btns .b-check{background:var(--accent);color:#fff}

/* ---------- 一覧ページ ---------- */
.cx-hero{background:linear-gradient(180deg,var(--mint) 0%,var(--paper) 80%);padding:52px 24px 30px;text-align:center}
.cx-hero .eyebrow{font-size:11px;letter-spacing:.24em;color:var(--accent2);font-weight:700;margin-bottom:14px}
.cx-hero h1{font-size:clamp(26px,3.6vw,38px);color:var(--navy);margin-bottom:14px}
.cx-hero p{font-size:14px;color:var(--muted);line-height:2;max-width:640px;margin:0 auto}
.cx-wrap{max-width:1100px;margin:0 auto;padding:36px 24px 8px}
.cx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cx-empty{text-align:center;color:var(--muted);padding:60px 0;font-size:14px}

@media (max-width:860px){
  .col-rel-grid,.cx-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .col-rel-grid,.cx-grid{grid-template-columns:1fr}
  .col-author-inner{flex-direction:column;text-align:center}
  .col-body h2::before{display:none}
}