/* 共通調整：色・文字・幅・余白・サムネイルは、この変数で変更します。 */
:root {
 color-scheme:light;
 --color-background:#fff;
 --color-text:#292724; /* 墨 */
 --color-muted:#67625c;
 --color-accent:#873d42; /* えんじ */
 --color-link:#28546b; /* 藍 */
 --color-surface:#f7f5ef; /* 薄い生成り */
 --color-line:#dedbd4;
 --color-focus:#28546b;
 --font-body:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --font-size-body:1.0625rem;
 --line-height-body:1.8;
 --site-width:62rem;
 --body-width:44rem;
 --sidebar-width:15rem;
 --column-gap:3rem;
 --page-gutter:1.5rem;
 --section-gap:2rem;
 --card-gap:1.25rem;
 --thumbnail-width:9rem;
 --thumbnail-ratio:8 / 5;
 --radius:.25rem;
}
* {box-sizing:border-box}
body {margin:0;color:var(--color-text);background:var(--color-background);font-family:var(--font-body);font-size:var(--font-size-body);line-height:var(--line-height-body);overflow-wrap:anywhere}
a {color:var(--color-link);text-underline-offset:.2em}
a:hover {text-decoration:underline}
:focus-visible {outline:3px solid var(--color-focus);outline-offset:4px}
h1,h2,h3,h4 {line-height:1.45;text-wrap:pretty}
h1 {margin:0 0 1rem;font-size:clamp(1.65rem,1.1rem + 1.5vw,2.15rem);font-weight:700}
h2 {font-size:1.4rem} h3 {font-size:1.17rem}
img {display:block;max-width:100%;height:auto}
[hidden] {display:none !important}
.skip-link {position:absolute;inset-block-start:.5rem;inset-inline-start:1rem;transform:translateY(-160%);z-index:10;padding:.65rem 1rem;background:white}
.skip-link:focus {transform:translateY(0)}
.site-header {border-block-start:3px solid var(--color-accent);border-block-end:1px solid var(--color-line)}
.header-inner,.footer-inner,.site-layout {width:min(calc(100% - var(--page-gutter) * 2),var(--site-width));margin-inline:auto}
.header-inner {display:flex;align-items:center;flex-wrap:wrap;gap:1rem 2rem;min-height:5.75rem;padding-block:1rem}
.site-title {color:var(--color-text);font-size:1.9rem;font-weight:750;letter-spacing:-.04em;text-decoration:none;line-height:1.3;padding-block:.4rem}
.site-title::after {content:'';display:block;height:2px;width:1.5rem;background:var(--color-accent);margin-block-start:.25rem}
.home-link {color:var(--color-text);font-size:.9375rem;padding:.6rem .25rem;text-decoration:none}
.language-switcher {display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-inline-start:auto;min-width:0;max-width:100%;font-size:.875rem}
select {min-height:2.75rem;max-width:100%;min-width:0;padding-block:.45rem;padding-inline:.7rem 2rem;border:1px solid var(--color-line);border-radius:var(--radius);color:var(--color-text);background:white;font:inherit}
.site-layout {display:grid;grid-template-columns:minmax(0,var(--body-width)) minmax(0,var(--sidebar-width));gap:var(--column-gap);justify-content:space-between;padding-block:2.5rem 4rem}
main {min-width:0} main:focus {outline:none}
.page-heading {margin-block-end:var(--section-gap)}
.home-introduction,.section-introduction {color:var(--color-muted)}
.home-introduction p,.section-introduction p {margin:0}
.sidebar {min-width:0;font-size:.9375rem}
.side-panel {margin-block-end:1.5rem;border:1px solid var(--color-line);border-radius:var(--radius)}
summary {cursor:pointer}
.side-panel > summary {padding:.8rem 1rem;background:var(--color-surface);font-weight:650}
.side-panel[open] > summary {border-block-end:1px solid var(--color-line)}
summary::marker {color:var(--color-accent)}
.side-list {list-style:none;padding:.4rem .85rem;margin:0}
.side-list a {display:flex;align-items:baseline;justify-content:space-between;gap:.65rem;padding:.6rem .2rem;min-height:2.75rem;text-decoration:none;color:var(--color-text)}
.side-list a:hover,.side-list a[aria-current] {color:var(--color-accent);text-decoration:underline}
.count {color:var(--color-muted);font-size:.8125rem;flex-shrink:0;font-variant-numeric:tabular-nums}
.archive-year {margin:.35rem .85rem}
.archive-year > summary {padding:.45rem .2rem;min-height:2.75rem}
.archive-year > summary .count {margin-inline-start:.65rem}
.month-list {padding-inline-start:1rem;padding-inline-end:0;border-inline-start:1px solid var(--color-line);margin-inline-start:.4rem}
.article-card {display:flex;gap:var(--card-gap);align-items:flex-start;padding-block:1.35rem;border-block-end:1px solid var(--color-line)}
.article-card:first-child {padding-block-start:.4rem}
.card-image {width:var(--thumbnail-width);flex-shrink:0;margin-block-start:.3rem}
.card-image img {width:100%;aspect-ratio:var(--thumbnail-ratio);object-fit:cover;border-radius:var(--radius);background:var(--color-surface)}
.card-copy {flex:1;min-width:0}
.article-card h2 {font-size:1.2rem;margin:.4rem 0}
.article-card h2 a {color:var(--color-text);text-decoration:none}
.article-card h2 a:hover {color:var(--color-accent);text-decoration:underline}
.card-description {color:var(--color-muted);font-size:.9375rem;margin:.4rem 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.article-meta {display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;color:var(--color-muted);font-size:.875rem}
.article-meta time {font-variant-numeric:tabular-nums}
.article-meta a {color:var(--color-accent)}
.breadcrumbs {font-size:.875rem;color:var(--color-muted);margin-block-end:1.5rem}
.breadcrumbs ol {display:flex;flex-wrap:wrap;gap:.25rem .55rem;list-style:none;margin:0;padding:0}
.breadcrumbs li:not(:last-child)::after {content:'/';color:var(--color-muted);margin-inline-start:.55rem}
.breadcrumbs a {color:var(--color-muted)}
.article-heading {margin-block-end:var(--section-gap)}
.table-of-contents {background:var(--color-surface);border-inline-start:3px solid var(--color-accent);padding:1rem 1.3rem;margin-block:1.75rem;font-size:.9375rem}
.table-of-contents > summary {font-weight:650}
.table-of-contents ul {padding-inline-start:1.3rem;margin-block:.65rem}
.table-of-contents a {display:inline-block;padding-block:.2rem}
.article-body {max-width:72ch}
:lang(ja) .article-body,:lang(zh) .article-body,:lang(ko) .article-body {max-width:40em}
.article-body p {margin-block:0 1.4em}
.article-body h2 {border-block-end:1px solid var(--color-line);border-inline-start:3px solid var(--color-accent);padding-block:.15rem .55rem;padding-inline:.8rem 0;margin-block:2.25rem 1rem}
.article-body h3 {margin-block:1.8rem .8rem}
.article-body ul,.article-body ol {padding-inline-start:1.5em;margin-block:1rem 1.5rem}
.article-body li {margin-block:.4rem}
.article-body blockquote {margin-inline:0;padding:.8rem 1.25rem;border-inline-start:3px solid var(--color-line);background:var(--color-surface)}
.article-body blockquote p:last-child {margin-block-end:0}
.article-body img {margin-block:1.5rem}
.article-body figure {margin:1.5rem 0}
.article-body figcaption {color:var(--color-muted);font-size:.875rem;margin-block-start:.5rem}
.article-body table {display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin-block:1.5rem;font-size:.9375rem}
.article-body th,.article-body td {padding:.6rem .8rem;border:1px solid var(--color-line);text-align:start}
.article-body th {background:var(--color-surface)}
.article-body pre {overflow-x:auto;padding:1rem;background:var(--color-surface)}
.article-body a {overflow-wrap:anywhere}
.related-articles {margin-block-start:3rem;padding-block-start:1.25rem;border-block-start:2px solid var(--color-line)}
.related-articles > h2 {font-size:1.25rem}
.pagination {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem;margin-block-start:2rem;font-size:.9375rem}
.pagination a {border:1px solid var(--color-line);padding:.55rem 1rem;border-radius:var(--radius);min-height:2.75rem}
.month-heading {font-variant-numeric:tabular-nums;font-size:1.3rem;padding-block-end:.5rem;border-block-end:2px solid var(--color-accent)}
.archive-group {margin-block-end:2.5rem;scroll-margin-top:1rem}
.archive-reset {font-size:.9375rem}
.site-footer {border-block-start:1px solid var(--color-line)}
.footer-inner {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.5rem;font-size:.875rem}
.footer-inner a {color:var(--color-text);text-decoration:none;font-weight:650}
.footer-inner small {color:var(--color-muted);font-size:.8125rem}
/* 言語選択ページも共通配色を参照。専用の外観は今後調整。 */
.language-gateway {min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.language-gateway main {width:min(100%,32rem);padding:2rem;border:1px solid var(--color-line);border-block-start:3px solid var(--color-accent);border-radius:var(--radius)}
.language-gateway h1 {margin-block-start:0}
.language-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-block-start:1.5rem}
.language-option {display:block;padding:.7rem .85rem;border:1px solid var(--color-line);border-radius:var(--radius);color:var(--color-text);background:var(--color-surface);text-decoration:none}
.language-option:hover {color:var(--color-accent)}
/* 2カラムを1カラムに切り替える幅。 */
@media (max-width:56rem) {
 :root {--page-gutter:1.25rem;--column-gap:2rem}
 .site-layout {grid-template-columns:minmax(0,1fr);max-width:var(--body-width);padding-block-start:1.75rem}
 .sidebar {display:none}
 .article-list .article-meta,.article-list .card-description {display:none}
 .header-inner {gap:.75rem 1.25rem}
}
@media (max-width:36rem) {
 :root {--page-gutter:1rem;--thumbnail-width:6rem;--card-gap:.9rem}
 .header-inner {gap:.5rem 1rem}
 .site-title {font-size:1.7rem}
 .language-switcher {flex-basis:100%;justify-content:space-between;margin-inline-start:0}
 .language-switcher select {max-width:72%}
 .article-card h2 {font-size:1.1rem}
 .article-meta {gap:.25rem .75rem}
 .article-body h2 {font-size:1.3rem}
 .language-gateway main {padding:1.5rem}
 .language-options {grid-template-columns:1fr}
}
@media print {
 .site-header,.sidebar,.site-footer,.skip-link,.related-articles {display:none}
 .site-layout {display:block;width:100%;padding:0}
 .article-body {max-width:none}
}