.content-main { width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 74px 0 100px; }
.content-hero { max-width: 760px; padding-bottom: 42px; }
.content-kicker { margin: 0 0 14px; color: #bd5046; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.content-hero h1 { margin: 0; color: #142943; font: 800 clamp(38px, 5vw, 66px)/1.02 "Manrope", sans-serif; letter-spacing: -.05em; }
.content-hero > p:last-child { max-width: 620px; margin: 20px 0 0; color: #68758a; font-size: 16px; line-height: 1.7; }
.article-index-list { border-top: 1px solid #dce1e8; }
.article-index-link { display: grid; grid-template-columns: 160px minmax(0, 1fr) 40px; gap: 28px; align-items: start; padding: 31px 4px; border-bottom: 1px solid #dce1e8; color: #172c48; text-decoration: none; }
.article-index-link:hover h2 { color: #bd5046; }
.article-index-link small { padding-top: 5px; color: #7b8798; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.article-index-link h2 { margin: 0 0 8px; font: 800 25px/1.2 "Manrope", sans-serif; letter-spacing: -.025em; transition: color .18s; }
.article-index-link p { max-width: 700px; margin: 0; color: #717d8f; font-size: 13px; line-height: 1.6; }
.article-index-link > span { color: #bd5046; font-size: 20px; }

.article-page-main { width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 64px 0 110px; }
.article-breadcrumb { margin-bottom: 54px; color: #7e8999; font-size: 11px; }
.article-breadcrumb a { color: inherit; text-decoration: none; }
.article-header { padding-bottom: 34px; border-bottom: 1px solid #dce1e8; }
.article-header h1 { margin: 12px 0 18px; color: #142943; font: 800 clamp(38px, 6vw, 64px)/1.03 "Manrope", sans-serif; letter-spacing: -.052em; }
.article-summary { margin: 0; color: #667489; font-size: 17px; line-height: 1.7; }
.article-date { display: block; margin-top: 24px; color: #8a94a4; font-size: 11px; font-weight: 700; }
.article-body { padding-top: 38px; color: #263a53; font: 500 16px/1.82 "DM Sans", sans-serif; }
.article-body p { margin: 0 0 24px; }
.article-body h2 { margin: 48px 0 16px; color: #142943; font: 800 27px/1.22 "Manrope", sans-serif; letter-spacing: -.03em; }
.article-body ul { margin: 0 0 25px; padding-left: 22px; }
.article-body li { margin: 8px 0; }
.article-related-game { margin-top: 58px; padding: 22px; display: grid; grid-template-columns: 112px 1fr auto; gap: 20px; align-items: center; border: 1px solid #dce1e8; border-radius: 14px; background: #fff; color: #152b47; text-decoration: none; }
.article-related-game img { width: 112px; aspect-ratio: 16/10; border-radius: 9px; object-fit: cover; }
.article-related-game span { color: #bd5046; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.article-related-game h3 { margin: 5px 0 0; font: 800 18px/1.2 "Manrope", sans-serif; }
.article-related-game b { color: #bd5046; }
.article-error { min-height: 60vh; display: grid; place-content: center; text-align: center; }
.article-error a { color: #bd5046; font-weight: 800; }

@media (max-width: 640px) {
  .content-main, .article-page-main { width: calc(100% - 32px); padding-top: 46px; }
  .content-hero h1, .article-header h1 { font-size: 38px; }
  .article-index-link { grid-template-columns: 1fr 24px; gap: 10px; }
  .article-index-link small { grid-column: 1 / -1; }
  .article-index-link h2 { font-size: 21px; }
  .article-related-game { grid-template-columns: 82px 1fr; }
  .article-related-game img { width: 82px; }
  .article-related-game b { display: none; }
}