/* ===== Base (news専用/必要最低限) ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
:root{
  --c-border:#e5e7eb;
  --c-muted:#6b7280;
  --c-primary:#49A0B5; /* key color */
  --radius:12px;
  --post-img-max:600px; /* 記事内画像の上限幅 */
}
.container{width:min(100% - 32px,1200px);margin-inline:auto}
.visually-hidden{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px}

/* ===== Tabs ===== */
.nc-tabs{display:flex;gap:8px;margin:24px 0;justify-content:center}
.nc-tabs .tab{
  display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--c-border);
  border-radius:999px;text-decoration:none;color:#111;font-size:14px;background:#fff
}
.nc-tabs .tab:hover,.nc-tabs .tab:focus-visible{border-color:var(--c-primary)}
.nc-tabs .tab.is-active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

/* ===== Grid (一覧) ===== */
.nc-grid{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1199.98px){.nc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767.98px){.nc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Card ===== */
.nc-card{
  display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius);overflow:hidden;outline:0;position:relative;cursor:pointer
}
.nc-card:focus-visible{box-shadow:0 0 0 3px rgba(73,160,181,.35)}

/* thumb: 正方形 & 画像拡大 */
.nc-card__thumb{position:relative;aspect-ratio:1/1;background:#f3f4f6;overflow:hidden}
.nc-card__thumb>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1);transform-origin:center;transition:transform .35s ease,opacity .35s ease;will-change:transform
}
/* hover/focus拡大（PC） */
a.nc-card:hover>figure.nc-card__thumb>img,
a.nc-card:focus-visible>figure.nc-card__thumb>img{transform:scale(1.06);opacity:.85}
/* タッチ端末：tap時に軽く拡大 */
@media (hover:none){
  a.nc-card:active>figure.nc-card__thumb>img{transform:scale(1.04);opacity:.9}
}

.nc-card__content{padding:16px 18px 18px;background:#fff}
.nc-card__title{
  margin:0 0 12px;font-size:17px;line-height:1.55;font-weight:700;color:var(--c-primary);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;letter-spacing:.01em
}
@media (min-width:769px){.nc-card__title{font-size:18px}}

.nc-card__meta{
  display:flex;align-items:center;gap:0;color:var(--c-muted);font-size:13px;line-height:1.6;margin-top:8px;flex-wrap:nowrap
}
.nc-card__meta time,.nc-card__meta span{white-space:nowrap}
.nc-card__meta .meta-dot{display:none}
.nc-card__meta time::after{content:"｜";color:#BFC7CA;margin:0 2px}

/* ===== Pagination ===== */
.pagination{display:flex;gap:6px;justify-content:center;margin:62px 0}
.page{
  display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;
  border:1px solid var(--c-border);border-radius:8px;text-decoration:none;color:#111;font-size:14px
}
.page:hover,.page:focus-visible{border-color:var(--c-primary)}
.page.is-current{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.page.disabled{opacity:.45;pointer-events:none}

/* ===== Detail（ヒーロー画像なし） ===== */
.post-header{text-align:center;margin:24px 0 12px}
.post-title{font-size:26px;line-height:1.35;margin:0 0 10px;color:#111}
@media (max-width:767.98px){.post-title{font-size:22px}}
.post-meta{color:var(--c-muted);font-size:14px;display:flex;align-items:center;gap:0}
.post-meta time::after{content:"｜";color:#BFC7CA;margin:0 12px}
.post-body{font-size:16px}
.post-body p{margin:0 0 1em}

/* 戻るリンク：hoverは色だけ変化／下線は付けない（focus-visibleで下線） */
.backlink{
  display:inline-flex;gap:8px;align-items:center;text-decoration:none;color:var(--c-primary);transition:color .2s ease
}
.backlink:hover{color:#3E90A3;text-decoration:none}
.backlink:focus-visible{text-decoration:underline}
.backlink>span:first-child{transition:transform .2s ease}
.backlink:hover>span:first-child{transform:translateX(-2px)}

/* 記事内画像（投稿で指定した幅を尊重） */
.post-image{width:100%;max-width:var(--post-img-max);margin:24px 0}
.post-image img{max-width:100%;height:auto;display:block;}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .nc-card__thumb>img,.backlink,.backlink>span:first-child{transition:none}
}