/* 岩月.com
 *   PC（800px 以上）：長文を読むための組版
 *   モバイル（799px 以下）：ガラケー風（iwa2ki.com と同じ流儀）
 *   印刷：明朝で紙向けに
 * nopc / nomobile / noprint は iwa2ki.com と同じ意味。
 */

:root{
    /* PC と印刷は砧明朝ひとつで組む（日付・目次・注などの脇の要素も明朝） */
    --serif: "kinuta-mincho-stdn", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    --meta: var(--serif);
    --mono: "SFMono-Regular", "Consolas", "Menlo", monospace;
    /* モノトーン。背景は白，灰色は黄みのない中立の灰にする。差し色は使わない */
    --ink: #1a1a1a;
    --sub: #666666;
    --line: #d6d6d6;
    --paper: #ffffff;
    --tint: #f3f3f3;
}

ruby rt{ font-size: 0.5em; }
[hidden]{ display: none !important; }
code, pre{ font-family: var(--mono); }
img{ max-width: 100%; height: auto; }

/* ====================================================================
   PC
   ==================================================================== */
@media screen and (min-width: 800px){
    html{
        background: var(--paper);
        color: var(--ink);
    }
    body{
        margin: 0;
        font-family: var(--serif);
        font-weight: 400;
        font-size: 18px;
        line-height: 2;
        line-break: strict;
        overflow-wrap: anywhere;
        hanging-punctuation: allow-end;
        -webkit-font-smoothing: antialiased;
    }
    strong, b, h1, h2, h3, th{ font-weight: 700; }
    .nopc{ display: none; }

    /* 行長は本文18pxの38字。フッターは文字が小さいので em ではなく px で揃える */
    body > header, main, body > footer{
        width: 684px;
        margin: 0 auto;
    }
    body > header{ padding: 40px 0 0; }
    .site{
        margin: 0;
        font-family: var(--meta);
        font-size: 26px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.06em;
        font-feature-settings: "palt";
    }
    .site a{ color: var(--ink); text-decoration: none; }
    .tagline{
        margin: 6px 0 0;
        font-size: 14px;
        color: var(--sub);
        letter-spacing: 0.1em;
    }
    /* RSS は末尾だけだと気づかれないので，上部の右端にも置く */
    body > header{ position: relative; }
    .feed{ position: absolute; right: 0; bottom: 0; margin: 0; font-size: 13px; letter-spacing: 0.1em; }
    .feed a{ color: var(--sub); }

    a{
        color: inherit;
        text-decoration: underline;
        text-decoration-color: var(--line);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.25em;
    }
    a:hover{ text-decoration-color: currentColor; }

    /* ---- 記事 ---- */
    .post-head{ margin: 88px 0 40px; }
    h1{
        margin: 0;
        font-size: 32px;
        line-height: 1.5;
        font-feature-settings: "palt";
        letter-spacing: 0.02em;
    }
    .byline{
        margin: 16px 0 0;
        font-family: var(--meta);
        font-size: 13px;
        color: var(--sub);
        letter-spacing: 0.05em;
    }
    .lead{
        margin: 0 0 40px;
        padding: 20px 24px;
        background: var(--tint);
        font-size: 16px;
        line-height: 1.9;
        text-align: justify;
    }
    .toc{
        margin: 0 0 56px;
        padding: 16px 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        font-family: var(--meta);
        font-size: 14px;
        line-height: 1.8;
    }
    .toc p{ margin: 0 0 4px; color: var(--sub); letter-spacing: 0.2em; }
    .toc ol{ margin: 0; padding-left: 1.6em; }
    .toc a{ text-decoration: none; }

    .body p{
        margin: 0;
        text-indent: 1em;
        text-align: justify;
    }
    .body h2{
        margin: 72px 0 24px;
        font-size: 22px;
        line-height: 1.6;
        font-feature-settings: "palt";
    }
    .body h2::before{
        content: "";
        display: block;
        width: 2em;
        margin-bottom: 20px;
        border-top: 2px solid var(--ink);
    }
    .body h3{
        margin: 48px 0 16px;
        font-size: 18px;
        line-height: 1.7;
        font-feature-settings: "palt";
    }
    .body ul, .body ol{ margin: 16px 0; padding-left: 1.5em; }
    .body li{ margin: 4px 0; }
    .body blockquote{
        margin: 32px 0;
        padding: 0 0 0 1.5em;
        border-left: 2px solid var(--line);
        color: #3a3a3a;
        font-size: 16px;
        line-height: 1.95;
    }
    .body blockquote p.source{
        margin-top: 8px;
        text-indent: 0;
        text-align: right;
        font-family: var(--meta);
        font-size: 13px;
        color: var(--sub);
    }
    .body hr{
        margin: 48px 0;
        border: none;
        text-align: center;
    }
    .body hr::after{
        content: "＊\3000＊\3000＊";
        color: var(--sub);
        font-size: 14px;
    }
    .body figure{ margin: 40px 0; }
    .body figure img{ display: block; margin: 0 auto; }
    .body figcaption{
        margin-top: 8px;
        font-family: var(--meta);
        font-size: 13px;
        line-height: 1.7;
        color: var(--sub);
        text-align: center;
    }
    .body code{
        padding: 0.1em 0.3em;
        background: var(--tint);
        font-size: 0.85em;
    }
    .body pre{
        margin: 32px 0;
        padding: 16px 20px;
        background: var(--tint);
        font-size: 14px;
        line-height: 1.7;
        overflow-x: auto;
        overflow-wrap: normal;
    }
    .body pre code{ padding: 0; background: none; font-size: 1em; }
    .table{ margin: 32px 0; overflow-x: auto; }
    .body table{
        border-collapse: collapse;
        margin: 0 auto;
        font-family: var(--meta);
        font-size: 14px;
        line-height: 1.7;
        border-top: 2px solid var(--ink);
        border-bottom: 2px solid var(--ink);
    }
    .body th, .body td{ padding: 6px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
    .body thead th{ border-bottom: 1px solid var(--ink); }
    .body .right{ text-align: right; }
    .body .center{ text-align: center; }

    /* 注の番号 */
    .fnref{
        font-family: var(--meta);
        font-size: 0.6em;
        line-height: 0;
        vertical-align: super;
        margin: 0 0.1em;
    }
    .fnref a{ color: var(--ink); text-decoration: none; }
    .sidenote{ display: none; }

    /* 注・参照したページ */
    .notes, .refs{
        margin-top: 64px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
        font-size: 15px;
        line-height: 1.85;
    }
    .notes + .refs{ margin-top: 40px; }
    .notes h2, .refs h2{
        margin: 0 0 12px;
        font-family: var(--meta);
        font-size: 14px;
        color: var(--sub);
        letter-spacing: 0.2em;
    }
    .notes ol{ margin: 0; padding-left: 2em; }
    .notes li{ margin: 6px 0; text-align: justify; }
    .notes .back{ text-decoration: none; color: var(--sub); }
    .refs ul{ margin: 0; padding: 0; list-style: none; }
    .refs li{ margin: 10px 0; }
    .refs .url{ font-family: var(--meta); font-size: 12px; color: var(--sub); }

    /* 共有。ロゴは使わず文字だけで並べる */
    .share{
        margin-top: 64px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
        font-family: var(--meta);
        font-size: 14px;
    }
    .share h2{
        margin: 0 0 8px;
        font-size: 14px;
        color: var(--sub);
        letter-spacing: 0.2em;
    }
    .share ul{ display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
    .share li + li::before{ content: "｜"; margin: 0 0.5em; color: var(--line); }
    .share button{
        padding: 0;
        border: none;
        background: none;
        font: inherit;
        color: inherit;
        cursor: pointer;
        text-decoration: underline;
        text-decoration-color: var(--line);
        text-underline-offset: 0.25em;
    }
    .share button:hover{ text-decoration-color: currentColor; }
    .share + .pager{ margin-top: 40px; }

    .pager{
        display: flex;
        justify-content: space-between;
        gap: 32px;
        margin: 80px 0 0;
        padding-top: 24px;
        border-top: 1px solid var(--line);
        font-size: 15px;
        line-height: 1.7;
    }
    .pager a{ text-decoration: none; max-width: 48%; }
    .pager .newer{ margin-left: auto; text-align: right; }
    .pager .dir{
        display: block;
        font-family: var(--meta);
        font-size: 12px;
        color: var(--sub);
    }

    /* ---- 一覧 ---- */
    .about{ margin: 64px 0 0; font-size: 16px; color: var(--sub); }
    .posts{ margin: 64px 0 0; padding: 0; list-style: none; }
    .posts li{ padding: 32px 0; border-bottom: 1px solid var(--line); }
    .posts li:first-child{ padding-top: 0; }
    .posts .date{
        margin: 0;
        font-family: var(--meta);
        font-size: 13px;
        color: var(--sub);
    }
    .posts h2{
        margin: 6px 0 0;
        font-size: 23px;
        line-height: 1.6;
        font-feature-settings: "palt";
    }
    .posts h2 a{ text-decoration: none; }
    .posts .summary{
        margin: 10px 0 0;
        font-size: 16px;
        line-height: 1.9;
        color: #444444;
        text-align: justify;
    }
    .draft, .draft-banner{
        font-family: var(--meta);
        font-size: 12px;
        color: #fff;
        background: var(--ink);
    }
    .draft{ margin-left: 8px; padding: 1px 6px; }
    .draft-banner{ margin: 0; padding: 4px; text-align: center; letter-spacing: 0.2em; }
    .empty, .notfound{ margin: 64px 0 0; }
    main > h1{ margin-top: 88px; }

    body > footer{
        margin-top: 120px;
        padding: 24px 0 48px;
        border-top: 1px solid var(--line);
        font-family: var(--meta);
        font-size: 12px;
        line-height: 1.9;
        color: var(--sub);
    }
    body > footer p{ margin: 0; }
    body > footer a{ color: var(--sub); }
    .sep{ margin: 0 0.5em; color: var(--line); }
}

/* 幅に余裕があれば，注を本文の右の余白に出す（傍注） */
@media screen and (min-width: 1280px){
    .body{ position: relative; }
    .sidenote{
        display: block;
        float: right;
        clear: right;
        width: 13em;
        margin: 0.35em -16em 0 0;
        text-indent: 0;
        text-align: left;
        font-family: var(--meta);
        font-weight: 400;
        font-size: 12px;
        line-height: 1.75;
        color: var(--sub);
    }
    .sn-num{
        margin-right: 0.5em;
        color: var(--ink);
    }
    .body blockquote .sidenote{ margin-right: calc(-16em - 1.5em - 2px); }
    .notes{ display: none; }
    .notes + .refs{ margin-top: 64px; }
}

/* ====================================================================
   モバイル（ガラケー風）
   ==================================================================== */
@media screen and (max-width: 799px){
    body{
        margin: 0;
        padding: 0;
        /* ガラケーらしく端末のゴシックのまま（Web フォントは使わない） */
        font-family: sans-serif;
        font-size: 6mm;
        line-height: 1.45;
        background: #ffffff;
        color: #000000;
        overflow-wrap: anywhere;
    }
    .nomobile, .sidenote{ display: none; }
    a{ color: #0000cc; }
    a:visited{ color: #800080; }

    body > header{
        margin: 0;
        padding: 1mm 0;
        background-color: #666666;
        border-bottom: solid 4px #333333;
        text-align: center;
    }
    .site{ margin: 0; padding: 0 2mm; font-size: 6mm; font-weight: bold; line-height: 1.3; }
    .site a{ color: #ffffff; text-decoration: none; }
    .tagline{ margin: 0; font-size: 3.5mm; color: #ffffff; }
    body > header{ position: relative; }
    .feed{ position: absolute; right: 1mm; bottom: 1mm; margin: 0; font-size: 3mm; }
    .feed a{ color: #ffffff; }

    .marquee{
        margin: 0;
        height: 7mm;
        overflow: hidden;
        white-space: nowrap;
        background: #000000;
        color: #ffff00;
        font-size: 5mm;
        line-height: 7mm;
    }
    .marquee span{
        display: inline-block;
        padding-left: 100%;
        animation: marquee 14s linear infinite;
    }
    @keyframes marquee{
        from{ transform: translateX(0); }
        to{ transform: translateX(-100%); }
    }
    @media (prefers-reduced-motion: reduce){
        .marquee span{ animation: none; padding-left: 0; }
    }

    main h1{
        margin: 0;
        padding: 1mm 0;
        font-size: 6mm;
        text-align: center;
        background-color: lightyellow;
        border-bottom: solid 4px gold;
    }
    main h2, .notes h2, .refs h2, .share h2{
        margin: 3mm 0 1mm;
        padding: 0;
        font-size: 6mm;
        text-align: center;
        background-color: lightyellow;
        border-bottom: solid 4px gold;
    }
    main h3{
        margin: 2mm 0 1mm;
        font-size: 6mm;
        background-color: lightgrey;
    }
    .byline{
        margin: 0;
        font-size: 4mm;
        text-align: center;
        background-color: #f0f0ff;
    }
    .lead{
        margin: 2mm 1mm;
        padding: 1mm;
        border: dashed 2px #ff9900;
        font-size: 4.5mm;
    }
    .toc{ margin: 0; font-size: 5mm; }
    .toc p{ margin: 0; text-align: center; background-color: lightgrey; }
    .toc ol{ margin: 0; padding: 0; list-style: none; counter-reset: toc; }
    .toc li{ border-bottom: dotted 1px #999999; padding: 0 2mm; }
    .toc li:nth-child(even){ background-color: #f0f0ff; }
    .toc li::before{ counter-increment: toc; content: counter(toc) "．"; }

    .body{ padding: 0 1mm; }
    .body p{ margin: 0 0 3mm; }
    .body ul, .body ol{ margin: 0 0 3mm; padding-left: 7mm; }
    .body blockquote{
        margin: 0 0 3mm;
        padding: 1mm 2mm;
        background: #f0f0f0;
        border-left: solid 4px #999999;
        font-size: 4.5mm;
    }
    .body blockquote p{ margin: 0; }
    .body blockquote .source{ text-align: right; }
    .body hr{ border: none; border-top: dashed 2px #ff9900; margin: 4mm 0; }
    .body figure{ margin: 0 0 3mm; text-align: center; }
    .body figcaption{ font-size: 4mm; }
    .body pre{ font-size: 3.5mm; overflow-x: auto; background: #f0f0f0; padding: 1mm; }
    .table{ overflow-x: auto; margin-bottom: 3mm; }
    .body table{ border-collapse: collapse; font-size: 4mm; }
    .body th, .body td{ border: solid 1px #999999; padding: 0 1mm; overflow-wrap: normal; }   /* 狭い列でも年号などの数字を途中で折らない */
    .body th{ background: lightgrey; }
    strong{ font-weight: normal; text-decoration: underline; color: #ff0000; }
    .fnref{ font-size: 3.5mm; }

    .notes, .refs{ font-size: 4mm; }
    .notes ol, .refs ul{ margin: 0; padding: 0 1mm 0 7mm; }
    .refs ul{ list-style: none; padding-left: 1mm; }
    .notes li, .refs li{ margin-bottom: 1mm; }
    .refs .url{ color: #666666; }

    .share ul{ margin: 0; padding: 0; list-style: none; }
    .share li{ border-bottom: dotted 1px #999999; }
    .share li:nth-child(even){ background-color: #f0f0ff; }
    .share a, .share button{
        display: block;
        width: 100%;
        padding: 0 2mm;
        font-size: 5mm;
        line-height: 8mm;
        text-align: left;
    }
    .share button{
        border: none;
        background: none;
        font-family: inherit;
        color: #0000cc;
        text-decoration: underline;
    }

    .pager{ margin-top: 3mm; border-top: solid 4px #333333; }
    .pager a{ display: block; padding: 1mm 2mm; border-bottom: dotted 1px #999999; font-size: 5mm; }
    .pager .dir{ display: block; font-size: 3.5mm; color: #333333; }

    .posts{ margin: 0; padding: 0; list-style: none; }
    .posts li{ padding: 1mm 2mm; border-bottom: dotted 1px #999999; }
    .posts li:nth-child(even){ background-color: #f0f0ff; }
    .posts .date{ margin: 0; font-size: 3.5mm; color: #333333; }
    .posts h2{
        margin: 0;
        font-size: 6mm;
        text-align: left;
        background: none;
        border: none;
        font-weight: normal;
    }
    .posts .key{ margin-right: 1mm; }
    .new{
        margin-left: 1mm;
        color: #ff0000;
        font-size: 4mm;
        font-weight: bold;
        animation: blink 1s step-end infinite;
    }
    @keyframes blink{ 50%{ visibility: hidden; } }
    @media (prefers-reduced-motion: reduce){ .new{ animation: none; } }
    .draft{ font-size: 3.5mm; color: #ff0000; margin-left: 1mm; }
    .draft-banner{ margin: 0; background: #ff0000; color: #ffffff; text-align: center; font-size: 4mm; }
    .about, .empty, .notfound{ margin: 2mm; }

    body > footer{
        margin-top: 4mm;
        background-color: #666666;
        color: #ffffff;
        border-top: solid 4px #333333;
        text-align: center;
        font-size: 4mm;
    }
    body > footer p{ margin: 0; padding: 1mm; }
    body > footer a{ color: #ffffff; }
    .garake a{
        display: block;
        padding: 0 2mm;
        font-size: 5mm;
        line-height: 8mm;
        text-align: left;
        color: #0000cc;
        background: #ffffff;
        border-bottom: dotted 1px #999999;
    }
    .garake a:nth-child(even){ background-color: #f0f0ff; }
    .garake .key{ margin-right: 1mm; }
}

/* ====================================================================
   印刷
   ==================================================================== */
@media print{
    body{
        font-family: var(--serif);
        font-size: 10.5pt;
        line-height: 1.85;
        color: #000000;
    }
    .noprint, .sidenote, body > header, .pager, body > footer, .draft-banner{ display: none; }
    a{ color: #000000; text-decoration: none; }
    h1{ font-size: 18pt; line-height: 1.4; margin: 0 0 2mm; }
    .byline{ font-family: var(--meta); font-size: 9pt; margin: 0 0 6mm; }
    .lead{ border: 0.5pt solid #000000; padding: 3mm 4mm; margin: 0 0 6mm; }
    .toc{ display: none; }
    .body p{ margin: 0; text-indent: 1em; text-align: justify; }
    .body h2{ font-size: 13pt; margin: 8mm 0 2mm; break-after: avoid; }
    .body h3{ font-size: 11pt; margin: 5mm 0 1mm; break-after: avoid; }
    .body blockquote{ margin: 4mm 0; padding-left: 4mm; border-left: 1pt solid #999999; font-size: 9.5pt; }
    .body table{ border-collapse: collapse; border-top: 1.5pt solid #000000; border-bottom: 1.5pt solid #000000; font-size: 9pt; }
    .body th, .body td{ border-bottom: 0.5pt solid #999999; padding: 1mm 3mm; }
    .fnref{ font-size: 0.65em; vertical-align: super; line-height: 0; }
    .notes, .refs{ font-size: 9pt; border-top: 0.5pt solid #000000; margin-top: 8mm; padding-top: 2mm; }
    .notes h2, .refs h2{ font-size: 10pt; margin: 0 0 2mm; }
    .notes .back{ display: none; }
    .refs ul{ list-style: none; padding: 0; }
    .refs .url{ font-family: var(--mono); font-size: 8pt; }
}