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

.arA{
  --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:#fff;padding:clamp(36px,5vw,64px) 24px clamp(24px,3vw,40px);
}
.arA__in{max-width:720px;margin:0 auto}
.arA__crumb{display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--sub);flex-wrap:wrap;margin-bottom:26px}
.arA__crumb a{color:var(--acc);text-decoration:none}
.arA__crumb em{font-style:normal;color:var(--body);font-weight:700}
.arA__cat{margin:0;display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--acc);
  background:rgba(99,91,255,.1);padding:5px 11px;border-radius:5px}
.arA__title{margin:18px 0 0;font-size:clamp(24px,3.8vw,38px);line-height:1.55;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.arA__meta{margin:26px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line)}
.arA__av{width:42px;height:42px;border-radius:50%;background:linear-gradient(140deg,#a8c4d8,#4f7fa3);flex:0 0 auto}
.arA__meta b{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
.arA__meta > div:nth-child(2) span{font-size:11.5px;color:var(--sub)}
.arA__dates{margin-left:auto;display:grid;gap:3px;text-align:right}
.arA__dates time{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
.arA__toc{margin:28px 0 0;background:#f6f9fc;border-radius:12px;padding:22px 24px}
.arA__toc p{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--ink)}
.arA__toc ol{margin:0;padding-left:20px;display:grid;gap:10px}
.arA__toc a{font-size:13.5px;line-height:1.7;color:var(--body);text-decoration:none}
.arA__toc a:hover{color:var(--acc);text-decoration:underline}
@media (max-width:560px){ .arA__dates{margin-left:0;text-align:left} }