/* コラム一覧: responsive layout on fluid.css. Figma 15:103 is the visual reference. */
.cl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cl-hero-lead{font:400 clamp(20px,1rem + 1vw,32px)/1.5 "Noto Serif JP",serif;color:var(--navy)}

.cl-browse{padding-block:var(--section-y)}
.cl-cards,.cl-pages{list-style:none;margin:0;padding:0}

.cl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.cl-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.cl-card-link{display:flex;flex-direction:column;height:100%;color:inherit}
.cl-photo{display:block;position:relative;aspect-ratio:296/117;overflow:hidden}
.cl-photo>img{width:100%;height:100%;object-fit:cover}
.cl-photo-crop>img{position:absolute;max-width:none!important;object-fit:fill}
/* Photo-zoom hover/focus for .cl-card-link .cl-photo (excluding .cl-photo-crop) lives in interactions.css. */
.cl-chip{position:absolute;display:flex;align-items:center;padding:0 14px 0 10px;background:#fff;border-radius:999px;font:400 11px/1.6 "Noto Sans JP",sans-serif;color:var(--navy);white-space:nowrap}
.cl-chip-bold{padding-left:11px;font-size:12px;font-weight:700}
.cl-card-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 20px}
.cl-card h3{font:700 clamp(15px,.9rem,17px)/1.6 "Noto Serif JP",serif;color:var(--navy)}
.cl-date{font:400 var(--fs-xs)/1.6 "Noto Sans JP",sans-serif;color:var(--navy)}
.cl-excerpt{font:400 var(--fs-sm)/1.7 "Noto Sans JP",sans-serif;color:var(--ink)}
.cl-card-ink h3{color:var(--ink)}
.cl-card-navy .cl-excerpt{color:var(--navy)}

@media(max-width:1023px){
 .cl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
 .cl-hero-lead{font-size:21px;line-height:1.6}
 .cl-browse{padding-block:32px}
 .cl-cards{grid-template-columns:1fr;gap:20px}
 .cl-card h3{font-size:16px;line-height:1.6}
 .cl-card h3 br{display:none}
 .cl-date{font-size:13px}
 .cl-excerpt{font-size:14px;line-height:1.8}
}