/* コラム（公開ページ）: 一覧カード・記事本文 */
.col-head{max-width:900px; margin:0 auto; padding:26px 20px 6px}
.col-head h1{font-size:26px; font-weight:800; margin:0 0 6px}
.col-head p{font-size:13.5px; color:var(--tx2); margin:0}

/* カテゴリのタブ */
.col-cats{max-width:900px; margin:14px auto 0; padding:0 20px; display:flex; flex-wrap:wrap; gap:8px}
.col-cats a{font-size:12.5px; font-weight:700; text-decoration:none; color:var(--tx2);
  background:var(--soft); border-radius:20px; padding:7px 14px}
.col-cats a.on{background:var(--pink); color:#fff}

/* 一覧グリッド */
.col-grid{max-width:900px; margin:20px auto 0; padding:0 20px 40px; display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:640px){.col-grid{grid-template-columns:1fr}}
.col-card{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease}
.col-card:hover{transform:translateY(-4px); box-shadow:0 12px 26px rgba(153,53,86,.10)}
.col-card .thumb{aspect-ratio:16/9; background:var(--soft) center/cover no-repeat; display:block}
.col-card .thumb.ph{display:flex; align-items:center; justify-content:center; font-size:30px; color:var(--pinkBorder)}
.col-card .body{padding:14px 15px 16px}
.col-card .cat{display:inline-block; font-size:11px; font-weight:700; color:var(--pink); background:var(--pinkTint); border-radius:20px; padding:2px 10px; margin-bottom:8px}
.col-card h2{font-size:15.5px; font-weight:700; line-height:1.5; margin:0 0 6px}
.col-card .ex{font-size:12.5px; color:var(--tx2); line-height:1.7; margin:0}
.col-card .date{font-size:11px; color:var(--tx2); margin:9px 0 0}

/* 記事本文 */
.article{max-width:760px; margin:0 auto; padding:22px 20px 60px}
.article .crumbs{font-size:12px; color:var(--tx2); margin:0 0 14px}
.article .crumbs a{color:var(--pink); text-decoration:none}
.article .cat{display:inline-block; font-size:11.5px; font-weight:700; color:var(--pink); background:var(--pinkTint); border-radius:20px; padding:3px 12px}
.article h1{font-size:clamp(24px,4.5vw,34px); font-weight:800; line-height:1.35; margin:12px 0 10px; letter-spacing:-.01em}
.article .meta{font-size:12px; color:var(--tx3); margin:0 0 18px}
.article .cover{width:100%; border-radius:14px; border:1px solid var(--line); margin:0 0 22px; display:block}
.article-body{font-size:15px; line-height:1.95; color:var(--tx)}
.article-body h2{font-size:21px; font-weight:800; margin:34px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--pinkTint)}
.article-body h3{font-size:17px; font-weight:800; margin:26px 0 10px}
.article-body h4{font-size:15px; font-weight:800; margin:20px 0 8px}
.article-body p{margin:0 0 16px}
.article-body ul,.article-body ol{margin:0 0 16px; padding-left:1.4em}
.article-body li{margin:6px 0}
.article-body a{color:var(--pink); text-decoration:underline}
.article-body img{max-width:100%; height:auto; border-radius:10px; border:1px solid var(--line); margin:6px 0}
.article-body blockquote{margin:0 0 16px; padding:10px 16px; border-left:4px solid var(--pinkBorder); background:var(--soft); color:var(--tx2)}
.article-body hr{border:none; border-top:1px solid var(--line); margin:26px 0}
.article-body strong{font-weight:800}

/* 関連・戻る */
.article-rel{max-width:760px; margin:8px auto 0; padding:0 20px 50px}
.article-rel h2{font-size:16px; font-weight:800; margin:0 0 12px}
.article-rel .rel-list{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:640px){.article-rel .rel-list{grid-template-columns:1fr}}