/* DADS資料を参照した独自実装。青はサンプル用で、ブランドカラーではない。 */
:root { --ink:#1a1a1a; --muted:#595959; --paper:#fff; --surface:#f5f6f8; --line:#767676; --link:#0031d8; --visited:#6b2498; --focus:#ffea00; --width:78rem; --radius:4px; }
* { box-sizing:border-box; }
html { color:var(--ink); background:var(--paper); font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; line-height:1.8; }
body { margin:0; font-size:1rem; overflow-wrap:anywhere; }
a { color:var(--link); text-decoration:underline; text-underline-offset:.2em; }
a:visited { color:var(--visited); }
a:hover { color:#001a80; text-decoration-thickness:2px; }
:focus-visible { outline:4px solid #000; outline-offset:2px; box-shadow:0 0 0 2px var(--focus); border-radius:var(--radius); }
@media (forced-colors:active) { :focus-visible { outline:3px solid Highlight; box-shadow:none; } }
.container { width:calc(100% - 3rem); max-width:var(--width); margin-inline:auto; }
.skip-link { position:absolute; left:1rem; top:1rem; transform:translateY(-200%); padding:.75rem 1rem; background:var(--paper); z-index:10; }
.skip-link:focus { transform:none; }
.site-header { border-bottom:1px solid var(--line); }
.header-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 3rem; padding-block:1.5rem; }
.brand { font-size:1.75rem; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.brand:visited { color:var(--ink); }
.nav-list,.category-list,.post-list,.breadcrumb ol,.article-categories { list-style:none; padding:0; margin:0; }
.nav-list { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.nav-list a,.category-list a,.article-footer a,.article-categories a { display:inline-flex; align-items:center; min-height:2.75rem; padding:.25rem; }
[aria-current="page"] { font-weight:700; }
.hero { padding-block:4rem; max-width:56rem; }
.eyebrow { font-weight:700; margin:0 0 1rem; }
h1,h2,h3 { line-height:1.5; font-weight:700; }
h1 { font-size:2.75rem; margin:0 0 1.5rem; }
h2 { font-size:1.75rem; margin:0 0 1rem; }
h3 { font-size:1.375rem; margin:.5rem 0; }
p { margin:0 0 1rem; }
.lead { font-size:1.125rem; line-height:1.9; }
.sample-note,.meta,.section-heading span { color:var(--muted); font-size:1rem; }
.sample-note { margin-top:1.5rem; }
.home-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:4rem; padding-bottom:5rem; }
.section-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem 1rem; }
.post-list { border-top:1px solid var(--line); }
.post-list>li { padding-block:2rem; border-bottom:1px solid var(--line); }
.post-list p:last-child { margin-bottom:0; }
.category-list li { padding-block:1rem; border-bottom:1px solid var(--line); }
.category-list p { margin:0; }
.about-note { margin-top:2rem; padding:1.5rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.about-note h2 { font-size:1.25rem; }
.site-footer { background:var(--surface); border-top:1px solid var(--line); }
.footer-inner { padding-block:2rem; }
.source { font-size:.875rem; color:var(--muted); }
.breadcrumb { margin-block:2rem; }
.breadcrumb ol { display:flex; flex-wrap:wrap; gap:.25rem .5rem; }
.breadcrumb li { min-width:0; }
.reading { max-width:48rem; margin-inline:auto; padding-bottom:4rem; }
.article-header { margin-bottom:3rem; }
.article-categories { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1rem; }
.prose { font-size:1rem; line-height:1.9; }
.prose h2 { margin-top:3rem; }
.prose h3 { margin-top:2rem; }
.prose ul,.prose ol { padding-left:1.5rem; }
.prose li { margin-block:.5rem; }
.prose img { max-width:100%; height:auto; }
.prose pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.article-footer { margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); }
#main:focus { outline-offset:4px; }
#posts,#categories { scroll-margin-top:1rem; }
@media (max-width:48rem) { .home-grid { grid-template-columns:minmax(0,1fr); gap:3rem; } .hero { padding-block:3rem; } h1 { font-size:2rem; } }
@media (max-width:30rem) { .container { width:calc(100% - 2rem); } .nav-list { gap:.5rem 1rem; } .header-inner { padding-block:1rem; } .hero br { display:none; } }

.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem; }
.pagination a { display:inline-flex; align-items:center; min-height:2.75rem; padding:.25rem .5rem; }
.prose figure { margin:2rem 0; }
.prose img { display:block; max-width:100%; height:auto; margin-block:1.5rem; }
.prose figcaption { color:var(--muted); }
.prose blockquote { margin:2rem 0; padding-left:1.5rem; border-left:4px solid var(--line); }
.prose table { max-width:100%; width:100%; border-collapse:collapse; table-layout:fixed; font-size:.875rem; }
.prose th,.prose td { padding:.5rem; border:1px solid var(--line); overflow-wrap:anywhere; }
.reading { padding-top:2rem; }

/* 本文幅を上限とし、サービスに合う幅で中央に配置する。 */
.prose .media-embed { width:100%; max-width:100%; min-width:0; margin:1.5rem auto; }
.media-embed iframe { display:block; width:100%; max-width:100%; aspect-ratio:16/9; border:0; }
.media-embed--video iframe { min-height:200px; }
.prose .media-embed--audio,.prose .media-embed--bandcamp { max-width:40rem; }
.prose .media-embed--social { max-width:33.75rem; }
.media-embed--audio iframe { aspect-ratio:auto; height:450px; }
.media-embed--social iframe { aspect-ratio:auto; height:600px; }
.media-embed--bandcamp iframe { aspect-ratio:auto; height:120px; }
.prose .twitter-tweet { width:100% !important; max-width:550px !important; margin:1.5rem auto !important; padding:0; border:0; }
.prose .twitter-tweet iframe { max-width:100%; }