/* ===== news-detail (article) ===== */
.article{max-width:780px;margin:0 auto;padding:24px 24px 64px}
.article__meta{font-size:11px;color:#888;letter-spacing:.06em;margin-bottom:12px}
.article__title{font-size:26px;font-weight:700;line-height:1.6;margin-bottom:30px}

.article__hero{aspect-ratio:16/9;border-radius:4px;overflow:hidden;margin:8px 0 44px}
.article__hero img{width:100%;height:100%;object-fit:cover}
.article__hero--ph{
  background:linear-gradient(120deg,#dfe6f2,#efe2ef 40%,#f6efe0 70%,#e2eff0);
  position:relative;
}
.article__hero--ph::after{
  content:"";position:absolute;inset:0;
  background:url("../images/logo-mu.png") no-repeat center/120px;opacity:.55;
}

.article__h2{
  font-size:18px;font-weight:700;margin:44px 0 20px;
  padding-bottom:14px;border-bottom:1px solid #dcdcd6;
}
.article p{font-size:13.5px;color:#4a4a4a;line-height:2;margin-bottom:26px}
.article .center{margin-top:44px}

/* ===== prev / next nav ===== */
.post-nav{background:#ededea;padding:44px 0}
.post-nav__inner{display:flex;align-items:center;justify-content:space-between}
.post-nav__side{display:flex;align-items:center;gap:14px;font-size:13px;color:#333}
.post-nav__side:hover,.post-nav__center:hover{color:#000}
.post-nav__center{font-size:13px;color:#333;text-decoration:underline;text-underline-offset:4px}
.post-nav__circle{
  width:40px;height:40px;border-radius:50%;background:#6f6a66;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;
}
@media(max-width:900px){
  .post-nav__inner{flex-wrap:wrap;gap:16px;justify-content:center}
}

/* ===== MOBILE (SP) ===== */
@media(max-width:820px){
  .article{max-width:100%;padding:28px 22px 56px}
  .article__meta{font-size:11px;margin-bottom:14px}
  .article__title{font-size:20px;line-height:1.65;margin-bottom:24px}

  .article__hero{margin:6px 0 34px}
  .article__h2{font-size:16px;margin:34px 0 18px;padding-bottom:12px}
  .article p{font-size:13.5px;line-height:1.95;margin-bottom:22px}
  .article .center{margin-top:36px}

  .post-nav{padding:34px 0}
  .post-nav__inner{gap:14px}
  .post-nav__side{font-size:12px;gap:10px}
  .post-nav__center{font-size:12px}
  .post-nav__circle{width:34px;height:34px;font-size:13px}
}