/* PickleK コラム（一覧ページ・記事ページ）スタイル。
   .news-tag・.article-meta は announcements/style.css と共用するため、両ページとも先にそちらを読み込む。 */

/* ========== 一覧ページ：1件大＋リスト ========== */
/* 16:9サムネがコンテナ全幅で過大にならないよう、PCでは幅を絞って中央に置く */
.col-wrap{max-width:880px;margin:0 auto}
.col-thumb{aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:var(--c-cream)}
.col-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.col-meta{display:flex;align-items:center;gap:10px}
.col-meta time{font-family:var(--font-display);font-weight:600;color:var(--c-grey);font-size:14px}
.col-title{
  font-weight:700;line-height:1.5;color:var(--c-charcoal);margin:0;letter-spacing:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.col-feat:hover .col-title,
.col-row:hover .col-title{color:var(--c-navy)}

/* 1記事のまとまりが分かるよう、枠線・影は付けず白い面だけ敷く */
.col-feat,
.col-row{background:var(--c-white);border-radius:10px;overflow:hidden}

.col-feat{display:block}
.col-feat .col-thumb{border-radius:0}
.col-feat-body{padding:14px 16px 18px}
.col-feat .col-title{margin-top:8px;font-size:18px;-webkit-line-clamp:3}

.col-rows{display:grid;gap:12px;margin-top:12px}
.col-row{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:start;padding:10px}
.col-row .col-thumb{border-radius:6px}
.col-row .col-title{margin-top:6px;font-size:15px}
.col-row .news-tag{padding:4px 10px;font-size:11px}

@media (min-width:768px){
  .col-feat{display:grid;grid-template-columns:55% 1fr;align-items:stretch}
  .col-feat-body{display:flex;flex-direction:column;justify-content:center;padding:24px}
  .col-feat .col-title{margin-top:12px;font-size:22px}
  .col-rows{gap:16px;margin-top:16px}
  .col-row{grid-template-columns:200px 1fr;gap:20px;padding:14px;align-items:center}
  .col-row .col-title{font-size:17px}
  .col-row .news-tag{padding:5px 12px;font-size:12px}
}

/* ========== 記事ページ ========== */
/* 読者の声（セリフ）を地の文と区別する */
.voice{color:#4A4A4A}

/* 原稿の行頭記号（✔・〇・△・×）は書体で線の太さが揺れるため、同じ太さ(stroke-width 3.2)の SVG で描いて統一する。
   既定は✔（黄緑 #5DBB3F）、.is-ok は〇（水色 #17B3D9。画像内の〇と同系色）、.is-warn は△（li.is-ng だけ×。#F4584F。画像内の△×と同系色） */
/* 囲み枠：1px の枠線の上に data-label の文字を重ねる。
   枠内は文字の読みやすさを優先して白にし、ラベルの背景は上半分を ivory・下半分を白にして、
   線を隠しつつ枠の内外で色の境目が出ないようにする */
.article .mark-list{
  --mk:#5DBB3F;
  --mk-bg:var(--c-white);
  list-style:none;position:relative;
  margin:28px 0 18px;padding:20px 16px 12px;
  border:1px solid var(--mk);border-radius:var(--radius-sm);background:var(--mk-bg);
}
.article .mark-list.is-ok{--mk:#17B3D9}
.article .mark-list.is-warn{--mk:#F4584F}
.article .mark-list::before{
  content:attr(data-label);position:absolute;top:0;left:14px;transform:translateY(-50%);
  padding:0 8px;line-height:1.4;
  background:linear-gradient(to bottom, var(--c-ivory) 50%, var(--mk-bg) 50%);
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.14em;
  color:var(--mk);
}
.article .mark-list li{position:relative;padding-left:1.8em;margin-bottom:6px}
.article .mark-list li:last-child{margin-bottom:0}
.article .mark-list li::before{
  content:"";position:absolute;left:0;top:.3em;width:1.1em;height:1.1em;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235DBB3F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
.article .mark-list.is-ok li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317B3D9' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3C/svg%3E");
}
.article .mark-list.is-warn li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4584F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5L21 19.5H3z'/%3E%3C/svg%3E");
}
.article .mark-list.is-warn li.is-ng::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4584F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13'/%3E%3C/svg%3E");
}