/* ============================================
   配色パラメータ設定（カスタマイズ可能）
   ============================================ */
:root {
    /* フォント設定（カスタマイズ可能） */
    --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "HG Mincho E", "MS PMincho", "MS Mincho", Georgia, "Times New Roman", Times, serif;
    --font-sans-serif: "Hiragino Sans", "Yu Gothic", "YuGothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-monospace: Consolas, Monaco, "Courier New", monospace;
    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-ui-extended: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* 基本色 */
    --text-color: #212529;
    /* 少し柔らかい黒 */
    --background-color: #FFFFFF;
    --accent-color: #4a6a70;
    /* 彩度を落としたシアン */
    --accent-hover-color: #81536b;
    /* 彩度を落としたマゼンタ */
    --accent-visited-color: #3a5055;
    /* 彩度を落としたダークシアン */
    --border-color: #e9ecef;
    /* 少し濃いめのボーダー */
    --code-background: #f8f9fa;
    /* 明るいグレー */
    --blockquote-border: #4a6a70;
    /* アクセントカラーと統一 */

    /* セマンティック色 */
    --secondary-text-color: #6c757d;
    --muted-text-color: #868e96;
    --light-gray-color: #f8f9fa;
    --medium-gray-color: #e9ecef;
    --dark-gray-color: #dee2e6;
    --button-text-color: #495057;

    /* 影・透明度関連 */
    --shadow-light: rgba(0, 0, 0, 0.07);
    --shadow-medium: rgba(0, 0, 0, 0.05);
    --overlay-dark: rgba(0, 0, 0, 0.5);
    --strikethrough-color: rgba(108, 117, 125, 0.6);
    --figcaption-color: rgba(108, 117, 125, 0.8);
    --highlight-background: rgba(255, 235, 59, 0.3);
    --table-header-bg: rgba(74, 106, 112, 0.05);

    /* ハンバーガーメニュー関連 */
    --menu-background: rgba(255, 255, 255, 0.9);
    --menu-background-active: rgba(255, 255, 255, 0.95);
    --menu-border: rgba(108, 117, 125, 0.4);
    --menu-border-hover: rgba(108, 117, 125, 0.6);
    --menu-line-color: rgba(108, 117, 125, 0.6);

    /* GitHubアラート用色（彩度調整版） */
    --alert-note-border: #5889b7;
    --alert-note-bg: #eef5fc;
    --alert-warning-border: #b78d48;
    --alert-warning-bg: #fcf8e3;
    --alert-important-border: #8a6d3b;
    --alert-important-bg: #fdf7f7;
    --alert-tip-border: #5f9a6f;
    --alert-tip-bg: #eefaf0;
    --alert-caution-border: #b85c5c;
    --alert-caution-bg: #fceeee;

    /* コードハイライト用色（彩度調整版） */
    --code-text-color: #24292f;
    --code-border-color: #d1d9e0;
    --code-keyword-color: #c64351;
    --code-string-color: #032f62;
    --code-comment-color: #6a737d;
    --code-number-color: #005cc5;

    /* コピーボタン関連 */
    --copy-btn-bg: #e9ecef;
    --copy-btn-border: #ced4da;
    --copy-btn-hover-bg: #dee2e6;
    --copy-btn-success-bg: #5f9a6f;
    /* tipカラーと統一 */
    --copy-btn-success-color: white;
}

/* ============================================
   基本設定（書籍品質のタイポグラフィー）
   ============================================ */
html {
    /* レスポンシブなベースフォントサイズ設定 */
    font-size: clamp(15px, 3vw, 16px);
    font-family: var(--font-serif);
    /* 文字レンダリングの最適化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    hanging-punctuation: first allow-end last;
}

body {
    /* remベースのフォントサイズ */
    font-size: clamp(1rem, 2.5vw, 1rem);
    line-height: 1.75;
    /* 黄金比に近い行間 */
    max-width: 38em;
    /* 理想的な読み幅（45-75文字）*/
    margin: auto;
    color: var(--text-color);
    background-color: var(--background-color);
    padding: 0;
    font-family: var(--font-serif);
    /* 書籍的な文字組み設定 */
    font-feature-settings: "palt" 1, "pkna" 1;
    /* プロポーショナル文字詰め */
    font-variant-numeric: proportional-nums;
    /* 和欧混植の改善 */
    font-kerning: auto;
    /* 垂直リズムの基準設定 */
    --baseline-unit: 1.75rem;
    /* 基準となる垂直リズム単位 */
}

/* ============================================
   Bootstrapライクなブレークポイント補完
   （clamp()で対応しきれない細かい調整用）
   ============================================ */
/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    body {
        max-width: 100%;
        padding: 0 0.75rem;
    }

    h1 {
        line-height: 1.2;
    }

    p {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    body {
        max-width: 540px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    body {
        max-width: 720px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body {
        max-width: 960px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body {
        max-width: 1100px;
    }
}

/* ============================================
   見出し設定（書籍的階層デザイン）
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    /* 見出しは詰めた行間 */
    font-family: var(--font-serif);
    font-weight: 700;
    /* 垂直リズムに基づいた余白設定 */
    margin-top: calc(var(--baseline-unit) * 1.5);
    margin-bottom: var(--baseline-unit);
    /* 文字組み最適化 */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    /* 文字詰め設定 */
    font-feature-settings: "palt" 1, "pkna" 1;
    /* 字間調整 */
    letter-spacing: 0.02em;
}

h1 {
    /* レスポンシブフォントサイズ（書籍的な大きさ） */
    font-size: clamp(2rem, 6vw, 2.5rem);
    text-align: center;
    margin: calc(var(--baseline-unit) * 4) 0 calc(var(--baseline-unit) * 2) 0;
    padding: clamp(0.5rem, 3vw, 2rem) 0;
    box-sizing: border-box;
    /* 特別な文字組み */
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ============================================
   ドキュメントヘッダー（著者情報等）
   ============================================ */
.document-header {
    text-align: center;
    margin-bottom: calc(var(--baseline-unit) * 2);
    padding-bottom: calc(var(--baseline-unit) * 1);
    border-bottom: 2px solid var(--border-color);
}

.document-header h1 {
    margin-bottom: calc(var(--baseline-unit) * 0.5);
    border-bottom: none;
}

.document-header .author {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: calc(var(--baseline-unit) * 0.25);
    font-family: var(--font-sans-serif);
}

.document-header .date {
    font-size: 0.9em;
    color: var(--secondary-text-color);
    margin-bottom: calc(var(--baseline-unit) * 0.125);
}

.document-header .institution {
    font-size: 0.9em;
    color: var(--secondary-text-color);
    font-style: italic;
    margin-bottom: calc(var(--baseline-unit) * 0.125);
}

.document-header .editor {
    font-size: 0.85em;
    color: var(--muted-text-color);
    font-style: italic;
}

/* レスポンシブ対応 */
@media (max-width: 575.98px) {
    .document-header {
        margin-bottom: calc(var(--baseline-unit) * 1.5);
        padding-bottom: calc(var(--baseline-unit) * 0.75);
    }

    .document-header .author {
        font-size: 1em;
    }

    .document-header .date,
    .document-header .institution {
        font-size: 0.85em;
    }

    .document-header .editor {
        font-size: 0.8em;
    }
}

h2 {
    /* 章見出しとしての品格 */
    font-size: clamp(1.5rem, 4vw, 2rem);
    page-break-before: always;
    margin-top: calc(var(--baseline-unit) * 2);
    margin-bottom: var(--baseline-unit);
    /* 章見出しの装飾的字間 */
    letter-spacing: 0.03em;
    font-weight: 600;
}

h3 {
    /* 節見出し */
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    letter-spacing: 0.025em;
    font-weight: 500;
}

h4 {
    /* 小見出し */
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    letter-spacing: 0.02em;
    font-weight: 500;
}

h5 {
    /* 項目見出し */
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    letter-spacing: 0.015em;
    font-weight: 400;
}

h6 {
    /* 細項目見出し */
    font-size: clamp(0.875rem, 2vw, 1rem);
    letter-spacing: 0.01em;
    font-weight: 400;
}

/* タイトルページの後の最初の要素を新しいページとして開始 */
/* 
h1+p+p {
    margin-top: 100vh;
    position: relative;
    z-index: 3;
    margin-bottom: 5rem;
    padding-left: 0rem;
    padding-right: 0rem;
    background-color: var(--background-color);
}
*/

/* ============================================
   段落・テキスト要素（書籍品質の文字組み）
   ============================================ */
p {
    /* 垂直リズムに基づいた余白 */
    margin-top: 0;
    margin-bottom: var(--baseline-unit);
    /* 書籍的な左右余白 */
    margin-right: clamp(0.5rem, 2vw, 1rem);
    margin-left: clamp(0.5rem, 2vw, 1rem);
    padding-left: 0;
    padding-right: 0;

    /* 書籍品質の文字組み設定 */
    text-align: justify;
    /* 両端揃え */
    text-justify: inter-ideograph;
    /* 日本語に最適化された文字間調整 */
    line-height: 1.75;
    /* 読みやすい行間 */
    font-size: clamp(1rem, 2.5vw, 1rem);
    font-family: var(--font-serif);

    /* 高品質な文字レンダリング */
    font-feature-settings: "palt" 1, "pkna" 1;
    /* プロポーショナル文字詰め */
    font-kerning: auto;
    /* 文字ペアカーニング */

    /* 和欧混植の改善 */
    letter-spacing: 0.025em;
    /* 微細な字間調整 */
    word-spacing: 0.1em;
    /* 単語間調整 */

    /* ハイフネーション（対応ブラウザのみ） */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;

    /* 段落間の視覚的分離 */
    text-indent: 0;
    /* 書籍的には1em程度だが、Web表示では0が読みやすい */
}

/* 段落の最初の文字を少し大きく（書籍的装飾、オプション） */
p:first-of-type:first-letter {
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1;
}

/* 数字のタイポグラフィー改善 */
.numbers,
time,
data {
    font-variant-numeric: proportional-nums;
    font-feature-settings: "tnum" 0, "pnum" 1;
}

small,
sub,
sup {
    font-size: 75%;
}

/* ============================================
   強調表示の書籍的タイポグラフィー
   ============================================ */
strong,
b {
    font-weight: 600;
    letter-spacing: 0.01em;
    /* 太字の文字詰め調整 */
}

em,
i {
    font-style: italic;
    letter-spacing: 0.02em;
    /* 斜体の字間調整 */
}

/* 下線の美的改善 */
u {
    text-decoration: underline;
    text-decoration-color: var(--accent-color);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* 取り消し線の改善 */
s,
del {
    text-decoration: line-through;
    text-decoration-color: var(--strikethrough-color);
    text-decoration-thickness: 1px;
}

/* マーク（ハイライト）の改善 */
mark {
    background-color: var(--highlight-background);
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

hr {
    border: none;
    border-top: 1px solid var(--accent-color);
    margin: calc(var(--baseline-unit) * 1.5) 0;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   リンク設定
   ============================================ */
a {
    text-decoration: none;
    color: var(--accent-color);
    /* 長いURLの改行対応 */
    word-break: break-all;
    overflow-wrap: break-word;
}

a:visited {
    color: var(--accent-visited-color);
}

a:hover {
    color: var(--accent-hover-color);
    border-bottom: 2px solid var(--text-color);
}

/* ============================================
   脚注設定
   ============================================ */
.footnotes {
    margin-top: 2rem;
    margin-left: clamp(0.5rem, 2vw, 1rem);
    margin-right: clamp(0.5rem, 2vw, 1rem);
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.footnote {
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-color);
}

.footnote sup {
    font-weight: bold;
    margin-right: 0.5rem;
}

.footnote-ref {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: normal;
}

.footnote-ref:hover {
    color: var(--accent-hover-color);
    border-bottom: none;
}

/* ============================================
   リスト設定（書籍的階層表現）
   ============================================ */
ul,
ol {
    margin-left: clamp(0.5rem, 2vw, 1rem);
    padding-left: clamp(1.5rem, 3vw, 2em);
    padding-right: 0;
    margin-top: 0;
    margin-bottom: var(--baseline-unit);

    /* 本文と統一した文字組み */
    font-size: clamp(1rem, 2.5vw, 1rem);
    line-height: 1.75;
    font-family: var(--font-serif);

    /* 文字組み設定を継承 */
    font-feature-settings: "palt" 1, "pkna" 1;
    letter-spacing: 0.025em;
}

/* unordered listは標準の箇条書きスタイルを維持 */
ul {
    list-style-type: disc;
    list-style-position: outside;
}

li {
    margin-bottom: calc(var(--baseline-unit) * 0.5);
    font-family: inherit;

    /* リスト項目内での改行処理 */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ネストしたリストの調整 */
li ul,
li ol {
    margin-top: calc(var(--baseline-unit) * 0.25);
    margin-bottom: calc(var(--baseline-unit) * 0.25);
    margin-left: 0;
    padding-left: clamp(1.5rem, 3vw, 2em);
    font-size: inherit;
    /* 親のサイズを維持 */
}

/* リスト項目内のネストしたリスト項目の調整 */
li li {
    margin-bottom: calc(var(--baseline-unit) * 0.25);
}

/* CSS countersによる階層リスト表示 */
ol {
    list-style: none;
    list-style-position: outside;
    counter-reset: level1;
}

ol li {
    counter-increment: level1;
    position: relative;
}

ol li::before {
    content: counter(level1) "";
    font-weight: 600;
    color: var(--text-color);
    position: absolute;
    left: -2.5em;
    min-width: 2em;
    text-align: right;
}

/* 2階層目 */
ol ol {
    counter-reset: level2;
}

ol ol li {
    counter-increment: level2;
}

ol ol li::before {
    content: counter(level1) "." counter(level2) " ";
    font-weight: 600;
    color: var(--text-color);
    position: absolute;
    left: -3.5em;
    min-width: 3em;
    text-align: right;
}

/* 3階層目 */
ol ol ol {
    counter-reset: level3;
}

ol ol ol li {
    counter-increment: level3;
}

ol ol ol li::before {
    content: counter(level1) "." counter(level2) "." counter(level3) " ";
    font-weight: 600;
    color: var(--text-color);
    position: absolute;
    left: -4.5em;
    min-width: 4em;
    text-align: right;
}

/* 4階層目 */
ol ol ol ol {
    counter-reset: level4;
}

ol ol ol ol li {
    counter-increment: level4;
}

ol ol ol ol li::before {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) " ";
    font-weight: 600;
    color: var(--text-color);
    position: absolute;
    left: -5.5em;
    min-width: 5em;
    text-align: right;
}

/* 5階層目 */
ol ol ol ol ol {
    counter-reset: level5;
}

ol ol ol ol ol li {
    counter-increment: level5;
}

ol ol ol ol ol li::before {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) " ";
    font-weight: 600;
    color: var(--text-color);
    position: absolute;
    left: -6.5em;
    min-width: 6em;
    text-align: right;
}



/* ============================================
   引用文設定（書籍的品格）
   ============================================ */
blockquote {
    margin-left: 0;
    margin-right: 0;
    margin-top: var(--baseline-unit);
    margin-bottom: var(--baseline-unit);

    padding: calc(var(--baseline-unit) * 0.75) 1.5em;
    border-left: 4px solid var(--blockquote-border);
    background-color: var(--border-color);

    /* 引用文の文字組み */
    font-family: var(--font-serif);
    font-style: italic;
    /* 欧文部分の斜体化 */
    line-height: 1.6;
    /* 少し詰めた行間 */
    font-size: 0.95em;
    /* 本文より少し小さく */
    letter-spacing: 0.02em;

    /* 引用文内での改行処理 */
    text-align: left;
    /* 引用文は左揃え */
    overflow-wrap: break-word;
}

blockquote p {
    margin-bottom: calc(var(--baseline-unit) * 0.5);
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* 引用文内では最初の文字を大きくしない */
blockquote p:first-of-type:first-letter {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* ============================================
   画像・動画設定（書籍的レイアウト）
   ============================================ */
img,
video {
    height: auto;
    max-width: 100%;
    margin-top: 0;
    margin-bottom: var(--baseline-unit);

    /* 画像の品質向上 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* 図表（Figure）の書籍的スタイリング */
figure {
    margin: calc(var(--baseline-unit) * 1.5) 0;
    text-align: center;

    /* 図表全体の配置 */
    display: block;
    clear: both;
}

figure img {
    margin-bottom: calc(var(--baseline-unit) * 0.125);
    box-shadow: 0 2px 8px var(--shadow-light);
    border-radius: 4px;
}

figcaption {
    font-size: 0.875em;
    line-height: 1.4;
    color: var(--figcaption-color);
    font-style: italic;

    /* キャプションの文字組み */
    font-family: var(--font-serif);
    letter-spacing: 0.02em;
    text-align: center;

    /* キャプションの余白 */
    margin-top: calc(var(--baseline-unit) * 0.25);
    padding: 0 1rem;
}

/* 画像フィギュアの特別なスタイリング */
.image-figure {
    page-break-inside: avoid;
    /* 印刷時に図表が分割されないように */
    break-inside: avoid;
}

.image-figure figcaption {
    font-weight: 500;
    padding-top: calc(var(--baseline-unit) * 0.125);
    margin-top: calc(var(--baseline-unit) * 0.125);
}

/* ============================================
   コード設定（等幅フォントの美的調整）
   ============================================ */
pre {
    background-color: var(--code-background);
    display: block;
    padding: var(--baseline-unit);
    overflow-x: auto;
    margin-top: 0;
    margin-bottom: var(--baseline-unit);

    /* 等幅フォントの最適化 */
    font-family: var(--font-monospace);
    font-size: 0.875em;
    /* 本文より少し小さく */
    line-height: 1.5;
    /* コードに適した行間 */

    /* コードブロックの文字組み */
    font-feature-settings: "liga" 0;
    /* リガチャを無効化 */
    font-variant-ligatures: none;
    letter-spacing: 0;

    /* 境界の調整 */
    border-radius: 4px;
    border: 1px solid var(--shadow-light);
}

code,
kbd,
samp {
    font-family: var(--font-monospace);
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    background-color: var(--code-background);
    border-radius: 3px;

    /* インラインコードの調整 */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-feature-settings: "liga" 0;
    letter-spacing: 0;
}

pre>code {
    padding: 0;
    background-color: transparent;
    white-space: pre;
    font-size: 1em;
    border-radius: 0;
}

/* ============================================
   テーブル設定（書籍的表組み）
   ============================================ */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--baseline-unit);
    margin-bottom: var(--baseline-unit);

    /* テーブルの文字組み */
    font-family: var(--font-serif);
    font-size: 0.9em;
    /* 本文より少し小さく */
    line-height: 1.4;
    /* 詰めた行間 */

    /* 数字の表示最適化 */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

td,
th {
    padding: calc(var(--baseline-unit) * 0.3) 0.75em;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;

    /* セル内の文字組み */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

th {
    font-weight: 600;
    border-bottom: 2px solid var(--accent-color);
    background-color: var(--table-header-bg);
}

/* 数値列の右揃え（.number クラス使用時） */
td.number,
th.number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   フォーム要素設定
   ============================================ */
input,
textarea {
    border: 1px solid var(--text-color);
}

input:focus,
textarea:focus {
    border: 1px solid var(--accent-color);
}

textarea {
    width: 100%;
}

.button,
button,
input[type=submit],
input[type=reset],
input[type=button],
input[type=file]::file-selector-button {
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--accent-color);
    color: var(--background-color);
    border-radius: 1px;
    border: 1px solid var(--accent-color);
    cursor: pointer;
    box-sizing: border-box;
}

.button:hover,
button:hover,
input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover,
input[type=file]::file-selector-button:hover {
    background-color: var(--accent-hover-color);
    color: var(--background-color);
    outline: 0;
}

.button[disabled],
button[disabled],
input[type=submit][disabled],
input[type=reset][disabled],
input[type=button][disabled],
input[type=file][disabled] {
    cursor: default;
    opacity: 0.5;
}

.button:focus-visible,
button:focus-visible,
input[type=submit]:focus-visible,
input[type=reset]:focus-visible,
input[type=button]:focus-visible,
input[type=file]:focus-visible {
    outline-style: solid;
    outline-width: 2px;
}

textarea,
select,
input {
    color: var(--text-color);
    padding: 6px 10px;
    margin-bottom: 10px;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}

textarea:focus,
select:focus,
input:focus {
    border: 1px solid var(--accent-color);
    outline: 0;
}

input[type=checkbox]:focus {
    outline: 1px dotted var(--accent-color);
}

label,
legend,
fieldset {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* ============================================
   ハンバーガーメニューのスタイル
   ============================================ */

/* ハンバーガーボタン */
.hamburger-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    background: var(--menu-background);
    border: 1px solid var(--menu-border);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--shadow-light);
}

.hamburger-btn:hover {
    background: var(--border-color);
    border-color: var(--menu-border-hover);
}

/* メニューが開いているときのハンバーガーボタンの調整 */
.hamburger-btn.active {
    z-index: 250;
    background: var(--menu-background-active);
}

.hamburger-btn span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--menu-line-color);
    transition: all 0.3s ease;
    border-radius: 2px;
}

.hamburger-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5.5px, 5.5px);
}

.hamburger-btn.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.hamburger-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5.5px, -5.5px);
}

/* メニューが開いているときはハンバーガーボタンを非表示 */
.hamburger-btn.menu-open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* サイドメニュー */
.side-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background: var(--background-color);
    border-left: 1px solid var(--border-color);
    box-shadow: -2px 0 10px var(--shadow-light);
    z-index: 200;
    transition: right 0.3s ease;
    overflow-y: auto;
    padding: 0;
}

.side-menu.open {
    right: 0;
}

.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--background-color);
    color: var(--text-color);
}

.side-menu-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-color);
}

/* 目次 */
.table-of-contents {
    list-style: none;
    padding: 0;
    margin: 0;
}

.table-of-contents li {
    border-bottom: 1px solid var(--border-color);
}

.table-of-contents a {
    display: block;
    padding: 15px 20px;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    line-height: 1.4;
}

.table-of-contents a:hover {
    background: var(--border-color);
    color: var(--text-color);
    padding-left: 25px;
}

.table-of-contents a.active {
    background: var(--border-color);
    color: var(--text-color);
    font-weight: bold;
}

/* オーバーレイ */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.overlay.show {
    opacity: 1;
    visibility: visible;
}

/* レスポンシブ対応 */
@media (max-width: 575.98px) {
    .side-menu {
        width: 280px;
        right: -280px;
    }

    .hamburger-btn {
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
    }
}

/* ============================================
   GitHubアラート記法のスタイル（書籍品質）
   ============================================ */
.alert {
    margin: var(--baseline-unit) 0;
    padding: var(--baseline-unit);
    border-radius: 6px;
    border-left: 4px solid;
    background-color: var(--light-gray-color);
    box-shadow: 0 2px 8px var(--shadow-medium);

    /* アラート内の文字組み */
    font-family: var(--font-serif);
    line-height: 1.6;
    font-feature-settings: "palt" 1, "pkna" 1;
}

.alert-header {
    margin-bottom: calc(var(--baseline-unit) * 0.5);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.alert-title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.875rem;
    font-weight: 700;
}

.alert-content {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
}

.alert-content p {
    margin: calc(var(--baseline-unit) * 0.3) 0;
    font-family: inherit;
    text-align: left;
    /* アラート内は左揃え */
    letter-spacing: 0.02em;
}

.alert-content p:first-child {
    margin-top: 0;
}

.alert-content p:last-child {
    margin-bottom: 0;
}

/* 強調表示の改善 */
.alert-content strong,
.alert-content b {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.alert-content code {
    font-size: 0.875em;
    padding: 0.15em 0.3em;
}

/* アラートタイプ別のスタイル */
.alert-note {
    border-left-color: var(--alert-note-border);
    background-color: var(--light-gray-color);
}

.alert-note .alert-title {
    color: var(--alert-note-border);
}

.alert-warning {
    border-left-color: var(--alert-warning-border);
    background-color: var(--light-gray-color);
}

.alert-warning .alert-title {
    color: var(--alert-warning-border);
}

.alert-important {
    border-left-color: var(--alert-important-border);
    background-color: var(--light-gray-color);
}

.alert-important .alert-title {
    color: var(--alert-important-border);
}

.alert-tip {
    border-left-color: var(--alert-tip-border);
    background-color: var(--light-gray-color);
}

.alert-tip .alert-title {
    color: var(--alert-tip-border);
}

.alert-caution {
    border-left-color: var(--alert-caution-border);
    background-color: var(--light-gray-color);
}

.alert-caution .alert-title {
    color: var(--alert-caution-border);
}

/* レスポンシブ対応 */
@media (max-width: 575.98px) {
    .alert {
        margin: 1rem 0;
        padding: 0.75rem;
        border-radius: 6px;
    }

    .alert-header {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
}

/* ============================================
   コードブロックとインラインコードのスタイル
   ============================================ */
/* インラインコード */
code {
    background-color: var(--code-background);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: var(--font-monospace);
    font-size: 0.9em;
    color: var(--code-text-color);
    white-space: nowrap;
}

/* コードブロック */
pre {
    background-color: var(--code-background);
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid var(--code-border-color);
}

pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.875rem;
    white-space: pre;
    color: var(--code-text-color);
    line-height: 1.45;
}

/* 言語ラベル付きコードブロック */
pre code[class*="language-"] {
    color: var(--code-text-color);
}

/* コードブロック内のシンタックスハイライト風の基本スタイル */
pre code .keyword {
    color: var(--code-keyword-color);
    font-weight: bold;
}

pre code .string {
    color: var(--code-string-color);
}

pre code .comment {
    color: var(--code-comment-color);
    font-style: italic;
}

pre code .number {
    color: var(--code-number-color);
}

/* レスポンシブ対応 */
@media (max-width: 575.98px) {
    pre {
        margin: 1rem 0;
        padding: 0.75rem;
        border-radius: 4px;
    }

    pre code {
        font-size: 0.8rem;
    }

    code {
        font-size: 0.85em;
        padding: 0.15em 0.3em;
    }
}

/* ============================================
   テーブルスタイル
   ============================================ */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--baseline-unit) 0;
    font-size: 0.9rem;
    line-height: 1.5;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

table thead {
    background-color: var(--light-gray-color);
}

table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    font-family: var(--font-sans-serif);
}

table th:last-child {
    border-right: none;
}

table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    vertical-align: top;
}

table td:last-child {
    border-right: none;
}

table tbody tr:last-child td {
    border-bottom: none;
}

table tbody tr:hover {
    background-color: var(--light-gray-color);
}

/* テーブル内のコード */
table code {
    font-size: 0.8em;
    background-color: var(--code-background);
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

/* レスポンシブテーブル */
@media (max-width: 575.98px) {
    table {
        font-size: 0.8rem;
        margin: 1rem 0;
    }

    table th,
    table td {
        padding: 0.5rem;
    }

    /* 小さな画面でのスクロール */
    .table-container {
        overflow-x: auto;
        margin: 1rem 0;
    }
}

/* ============================================
   フッター
   ============================================ */
.markpaper-footer {
    margin-top: calc(var(--baseline-unit) * 3);
    padding: calc(var(--baseline-unit) * 1) 0;
    border-top: 1px solid var(--border-color);
    text-align: center;
    background-color: var(--background-color);
}

.markpaper-footer p {
    font-size: 0.8rem;
    color: var(--muted-text-color);
    margin: 0;
    font-style: italic;
    font-family: var(--font-sans-serif);
    text-align: center;
}

.markpaper-footer a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.markpaper-footer a:hover {
    color: var(--accent-hover-color);
    text-decoration: underline;
}

.markpaper-footer a:visited {
    color: var(--accent-visited-color);
}

/* レスポンシブフッター */
@media (max-width: 575.98px) {
    .markpaper-footer {
        margin-top: calc(var(--baseline-unit) * 2);
        padding: calc(var(--baseline-unit) * 0.75) 0;
    }

    .markpaper-footer p {
        font-size: 0.75rem;
        padding: 0 1rem;
    }
}

/* ============================================
   コードブロックのコピーボタン
   ============================================ */
.code-block-container {
    position: relative;
    margin: 1.5rem 0;
}

.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--copy-btn-bg);
    border: 1px solid var(--copy-btn-border);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-family: var(--font-sans-serif);
    color: var(--button-text-color);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    z-index: 10;
}

.code-block-container:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    background-color: var(--copy-btn-hover-bg);
}

.copy-btn.copied {
    background-color: var(--copy-btn-success-bg);
    color: var(--copy-btn-success-color);
    border-color: var(--copy-btn-success-bg);
}

.code-block-container pre {
    margin: 0;
}

/* ============================================
   チェックボックス（タスクリスト）のスタイル
   ============================================ */
.task-list-item {
    list-style-type: none;
    margin-left: -1.5em;
    /* 元のリストマーカー分を調整 */
}

.task-list-item input[type="checkbox"] {
    margin-right: 0.5em;
    vertical-align: middle;
    width: 1.2em;
    height: 1.2em;
    accent-color: var(--accent-color);
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
}