html,body{margin:0;background:#fff}

.arD{
  --acc:#635bff; --ink:#0a2540; --body:#374151; --sub:#4b5563; --line:#e6e9ee;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:#f6f9fc;padding:clamp(40px,5vw,72px) 24px;
}
.arD__in{max-width:860px;margin:0 auto}
.arD__nav{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.arD__nav a{
  background:#fff;border-radius:12px;padding:20px 22px;text-decoration:none;display:grid;gap:9px;
  box-shadow:0 0 0 1px var(--line);transition:.14s;
}
.arD__nav a:hover{box-shadow:0 0 0 1px var(--acc);transform:translateY(-2px)}
.arD__nav span{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--sub)}
.arD__prev span::before{content:"← "}
.arD__next{text-align:right}
.arD__next span::after{content:" →"}
.arD__nav b{font-size:14px;font-weight:700;line-height:1.7;color:var(--ink)}
.arD__relTitle{margin:clamp(32px,4vw,48px) 0 18px;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--ink)}
.arD__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.arD__grid a{text-decoration:none}
.arD__ph{display:block;aspect-ratio:16/10;border-radius:9px}
.arD__ph--1{background:linear-gradient(140deg,#b6cbb2,#5b7d59)}
.arD__ph--2{background:linear-gradient(140deg,#c3bcd6,#6a5b93)}
.arD__ph--3{background:linear-gradient(140deg,#f0c9a0,#c07f3c)}
.arD__grid h3{margin:12px 0 0;font-size:13.5px;font-weight:700;line-height:1.65;color:var(--ink)}
.arD__grid a:hover h3{color:var(--acc)}
.arD__grid time{display:block;margin-top:8px;font-size:11px;color:var(--sub)}
@media (max-width:760px){ .arD__nav{grid-template-columns:1fr} .arD__next{text-align:left} .arD__grid{grid-template-columns:1fr} }