/* docs/stylesheets/site.css */

/* サイドバーの幅を広げて項目の折り返しを防止 */
:root {
    --md-sidebar-width: 15rem;  /* デフォルト 12.1rem から拡大 */
}

/* サイドバー幅を直接指定（カスタムプロパティが効かない場合の対策） */
@media screen and (min-width: 76.25em) {
    .md-sidebar--primary {
        width: 15rem !important;
    }
    .md-sidebar--primary .md-sidebar__scrollwrap {
        width: 15rem !important;
    }
    /* ナビゲーション要素の幅も広げる */
    .md-sidebar--primary .md-sidebar__inner {
        width: 15rem !important;
    }
    .md-sidebar--primary .md-nav--primary,
    .md-sidebar--primary .md-nav--primary .md-nav,
    .md-sidebar--primary .md-nav__title,
    .md-sidebar--primary .md-nav__list {
        width: 15rem !important;
        max-width: none !important;
    }
}

.md-grid {
    max-width: 1600px;  /* デフォルトより広く */
}


.md-typeset h1 {
    color: var(--md-primary-fg-color--dark);
    font-size: 2.5em;
    font-weight: bold;
    border-bottom: 4px solid var(--md-primary-fg-color);
    padding-bottom: 0.3em;
    margin-bottom: 1em;
    position: relative;
    /* 以下を追加 */
    z-index: -1;
}

.md-typeset h1::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #f5f5f5;
    /* 以下を追加 */
    z-index: -2;
}

.md-typeset h2 {
    background-color: var(--md-primary-fg-color);
    color: #fff;
    padding: 0.3em 0.5em;
    border-radius: 4px;
    margin-bottom: 1em;
}

.md-typeset h3 {
    color: var(--md-primary-fg-color);
    font-weight: bold;
    border-bottom: 2px solid var(--md-primary-fg-color);
    border-left: 5px solid var(--md-primary-fg-color);
    padding-top: 0.3em;
    padding-left: 0.7em;
    padding-bottom: 0.3em;
    margin-bottom: 1em;
}

.md-typeset h4 {
    color: #555;
    font-weight: bold;
    border-left: 2px solid var(--md-primary-fg-color--light);
    border-bottom: 1px dashed #ddd;
    padding-top: 0.2em;
    padding-left: 0.5em;
    padding-bottom: 0.2em;
    margin-bottom: 0.7em;
}

/* すべての太字テキスト（strong, b）を赤色に */
.md-typeset strong, 
.md-typeset b {
    color: #ff0000; /* 赤色 */
    font-weight: bold;
}

@media print {
    img,
    svg {
        max-width: 100%;
        max-height: 230mm; /* A4 用紙余白込みで収まる高さに調整 */
        height: auto;
    }
}