/* このサイトの見た目。外部フォント・外部CSS・JSは一切読み込まない。
   理由は20年後も同じように表示させるため。CDNは必ず先に死ぬ。 */

:root {
    /* OSのフォント設定をそのまま使う。Webフォントを読まないので表示が速く、将来も壊れない */
    --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                 "Noto Sans JP", "Yu Gothic Medium", "Meiryo", sans-serif;

    --bg: #fbfaf8;
    --fg: #1c1a17;
    --fg-muted: #5d5852;
    --rule: #ded8d0;
    --link: #1d4ed8;
    --accent-bg: #f2efe9;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161513;
        --fg: #e8e4dd;
        --fg-muted: #a29c93;
        --rule: #35322e;
        --link: #93b4ff;
        --accent-bg: #201e1b;
    }
}

/* 閲覧者がテーマを切り替えたときは、そちらを優先する */
:root[data-theme="light"] {
    --bg: #fbfaf8;
    --fg: #1c1a17;
    --fg-muted: #5d5852;
    --rule: #ded8d0;
    --link: #1d4ed8;
    --accent-bg: #f2efe9;
}

:root[data-theme="dark"] {
    --bg: #161513;
    --fg: #e8e4dd;
    --fg-muted: #a29c93;
    --rule: #35322e;
    --link: #93b4ff;
    --accent-bg: #201e1b;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0 1.25rem 4rem;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    /* 日本語は行間を広めに取らないと読めない */
    line-height: 1.85;
    font-size: 1rem;
    /* 和文の字面が詰まって見えるのを避ける */
    letter-spacing: 0.02em;
}

/* キーボード操作でヘッダーを飛ばせるようにする。普段は画面外に置く */
.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    padding: 0.5rem 0.9rem;
    background: var(--fg);
    color: var(--bg);
    border-radius: 4px;
}

.site-header,
main,
.site-footer {
    /* 1行が長すぎると読めない。和文は40字前後で折り返るのが読みやすい */
    max-width: 44rem;
    margin-inline: auto;
}

/* --- ヘッダー --- */

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.5rem;
    padding: 1.75rem 0 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.site-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.site-title a {
    color: var(--fg);
    text-decoration: none;
}

.site-header nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.site-header nav a {
    color: var(--fg-muted);
    text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
    color: var(--fg);
    text-decoration: underline;
}

.site-header nav a[aria-current="page"] {
    color: var(--fg);
    font-weight: 700;
}

/* --- 本文 --- */

main {
    padding-top: 2.5rem;
}

h1 {
    margin: 0 0 1.5rem;
    font-size: 1.65rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
}

h2 {
    margin: 3rem 0 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
    font-size: 1.2rem;
    line-height: 1.5;
}

h3 {
    margin: 2.25rem 0 0.75rem;
    font-size: 1.03rem;
}

p, ul, ol {
    margin: 0 0 1.35rem;
}

ul, ol {
    padding-left: 1.4rem;
}

li {
    margin-bottom: 0.4rem;
}

a {
    color: var(--link);
    text-underline-offset: 0.2em;
}

strong {
    font-weight: 700;
}

/* 補足・注記。本文より一段弱く見せる */
.note {
    color: var(--fg-muted);
    font-size: 0.92rem;
}

blockquote {
    margin: 1.5rem 0;
    padding: 0.1rem 0 0.1rem 1.1rem;
    border-left: 3px solid var(--rule);
    color: var(--fg-muted);
}

hr {
    margin: 3rem 0;
    border: 0;
    border-top: 1px solid var(--rule);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- 目次 --- */
/* 読者は「全部読みたい人」ではない。「訴状に何を書くか」だけ、「いくらかかるか」だけを
   知りたい人が来る。目次が無いとその人たちは辿り着けずに離脱する。装飾ではなく機能。
   ただし目立たせない。ここが主役ではない。 */

.toc {
    margin: 0 0 2.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--accent-bg);
    font-size: 0.93rem;
}

.toc .toctitle {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
}

/* 見出し自体が「1.」「2.」と番号を持っているので、目次側では番号を出さない。
   出すと「1. 1. 結論」と二重になる。 */
.toc ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.toc li {
    margin: 0.25rem 0;
}

/* --- 書面の雛形（コードブロック） --- */
/* 告訴状・通知書・訴状の雛形は、桁を揃えた等幅の固まりとして読ませたい。
   だから折り返さない。そのぶんスマートフォンでは必ずはみ出すので、
   **ブロックの中だけを横スクロールさせる。**
   overflow-x を指定し忘れると、はみ出した右側が読めなくなる（ページ側は
   横スクロールしない設計なので、静かに切れて気付けない）。 */

pre {
    overflow-x: auto;
    max-width: 100%;
    padding: 0.9rem 1rem;
    background: var(--accent-bg);
    border: 1px solid var(--rule);
    border-radius: 3px;
    margin: 0 0 1.5rem;
    font-size: 0.85rem;
    line-height: 1.7;
    -webkit-overflow-scrolling: touch;
}

pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
}

code {
    font-size: 0.9em;
    background: var(--accent-bg);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

/* --- 表 --- */
/* 費用や期間の実額表は横に長くなる。
   狭い画面では表だけを横スクロールさせ、ページ全体は絶対に横スクロールさせない。 */

.table-scroll,
main > table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

table {
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    font-size: 0.93rem;
    line-height: 1.7;
}

th, td {
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

thead th {
    background: var(--accent-bg);
    font-weight: 700;
}

/* --- 年表(トップページ) --- */

.timeline {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
}

.timeline > li {
    margin-bottom: 0;
    padding: 1.4rem 0;
    border-top: 1px solid var(--rule);
}

.timeline > li:last-child {
    border-bottom: 1px solid var(--rule);
}

.timeline .year {
    display: block;
    color: var(--fg-muted);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

.timeline .entry-title {
    font-size: 1.08rem;
    font-weight: 700;
}

.timeline p {
    margin: 0.35rem 0 0;
    color: var(--fg-muted);
    font-size: 0.94rem;
}

/* まだ公開していない項目 */
.timeline .pending .entry-title {
    color: var(--fg-muted);
    font-weight: 400;
}

.badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--fg-muted);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    vertical-align: 0.12em;
    white-space: nowrap;
}

/* --- フッター --- */

.site-footer {
    margin-top: 4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    color: var(--fg-muted);
    font-size: 0.85rem;
}

.site-footer p {
    margin: 0 0 0.5rem;
}

/* --- 印刷 --- */

@media print {
    .site-header nav, .skip-link { display: none; }
    body { background: #fff; color: #000; }
}