/* 1. サイト全体のスクロールバー (html, body) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: block;
    width: 16px;
    height: 16px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: #fafafa;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: #999;
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 10px;
    min-height: 40px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* 2. テーブル表示エリア（下部の横スクロールバーを物理的に隠す） */
.table-wrapper {
    overflow: hidden; /* はみ出した部分（下のバー）を切り取る */
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.table-container {
    display: block;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 700px; /* 縦スクロール */
    margin-bottom: -16px; /* 横スクロールバーの高さ分だけ下にずらす（隠す） */
    padding-bottom: 0;
    border: none !important;
}

/* 念のためブラウザ標準の横バーも隠す設定（補助的） */
.table-container::-webkit-scrollbar:horizontal {
    height: 0px !important;
    display: none !important;
}
/* 縦方向のバーは引き続き表示・装飾 */
.table-container::-webkit-scrollbar {
    width: 16px;
}
.table-container::-webkit-scrollbar-thumb:vertical {
    background: #999;
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 10px;
}
.table-container::-webkit-scrollbar-track:vertical {
    background: #fafafa;
}

/* Firefox用 */
* {
    scrollbar-width: auto !important;
    scrollbar-color: #999 #fafafa !important;
}



/* Firefox用：横スクロールバーだけを隠す直接的な方法はないため、
   必要に応じて全体のスクロールバーを調整することを検討 */

table {
    width: 100%;
    min-width: 1200px;
    border-collapse: separate; /* stickyのためにseparateに変更 */
    border-spacing: 0;        /* 枠線の隙間をなくす */
    border: 1px solid #ccc;
    font-size: 13px;
    text-align: center;
}
th, td {
    border: 1px solid #ccc;
    padding: 5px!important;
    vertical-align: middle;
}
thead {
    position: sticky;
    top: 0;
    z-index: 150;
}

thead th { 
    background-color: #f2f2f2; 
    font-weight: bold; 
    padding: 10px 8px;
    text-align: center;
    vertical-align: middle;
    border-top: 1px solid #ccc !important;    /* 上側のボーダーを追加 */
    border-bottom: 1px solid #ccc !important; /* 下側のボーダーを維持 */
    background-clip: padding-box;
}

/* 上側の境界線の補強：1px上にはみ出させて隙間を完全に埋める */
thead th::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px; /* 1px上にはみ出させる */
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-index: 10;
    pointer-events: none;
}

/* 下側の境界線の補強：1px下に突き出させて隙間を完全に埋める */
thead th::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px; /* 1px下にはみ出させる */
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-index: 10;
    pointer-events: none;
}
thead .header-gray { background-color: #e0e0e0; }

.diagonal-header {
    position: relative;
    background-image: linear-gradient(to top right, transparent 49.5%, #ccc 49.5%, #ccc 50.5%, transparent 50.5%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    vertical-align: middle !important;
    min-width: 250px; /* 文字が重ならないように最低幅を確保 */
}

.diagonal-text-top-right {
    position: absolute;
    top: 8px;
    right: 10px;
    text-align: right;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

.diagonal-text-bottom-left {
    position: absolute;
    bottom: 8px;
    left: 10px;
    text-align: left;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

thead .header-blue { background-color: #dceaf5; }
thead .header-pink { background-color: #fdeff2; width: 800px!important; }
thead .header-dark-blue { background-color: #8db8e8; }
tbody th {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: left!important;
    width: 320px!important;
    position: sticky!important;
    position: -webkit-sticky;
    left: 0;
    z-index: 100;
    box-shadow: 1px 0 0 #ccc;     /* 横スクロール時の境界線対策 */
    background-clip: padding-box;
}

/* ヘッダーの1列目（角のセル）を左側に固定 */
/* 1行目の「同居の有無」と、2行目から始まる「書類名（斜め見出し）」が該当 */
thead tr:nth-child(1) th:first-child,
thead tr:nth-child(2) th:first-child {
    position: sticky;
    left: 0;
    z-index: 200; /* ヘッダー(150)やボディ1列目(100)より高く */
    background-clip: padding-box;
}
tbody td { font-family: "Maru Gothic", "マルゴシック体", sans-serif; font-weight: bold; }
.notes-cell {
    text-align: left!important;
    font-size: 12px;
    font-family: inherit;
    font-weight: normal;
    vertical-align: top!important;
}
.accordion-container { display: none; }
.notes {
   /* font-size: 14px; */
    border: 1px solid #dceaf5;
    background-color: #f2f8fd;
    padding: 20px;
}
.notes ul { padding-left: 20px; margin: 10px 0 0 0; }
.notes > ul > li { margin-bottom: 10px; }
.notes li:last-child { margin-bottom: 0; }
.notes a { color: #005bac; text-decoration: none; }
.notes a:hover { text-decoration: underline; }

.top-scrollbar-container {
    overflow-x: auto;
    overflow-y: hidden;
    height: 20px; /* スクロールバーの高さ */
}
.top-scrollbar-content {
    height: 1px;
}

@media screen and (max-width: 768px) {
    /* .container { display: none; } */
    .top-scrollbar-container { display: none; }
    .table-wrapper { display: none; }
    .accordion-container { display: block; }
    .accordion-heading {
        font-size: 18px;
        font-weight: bold;
        color: #cf0113;
        padding: 10px 15px;
        margin: 25px 0 10px 0;
        background-color: #fef0f1;
        border-bottom: 2px solid #cf0113;
        border-left: 5px solid #cf0113;
    }
    .accordion-heading:first-of-type { margin-top: 0; }
    .accordion-item { border: 1px solid #ccc; margin-bottom: -1px; }
    .accordion-item:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; }
    .accordion-item:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
    .accordion-title {
        display: block; width: 100%; background-color: #f2f2f2; padding: 15px;
        font-weight: bold; cursor: pointer; position: relative;
        box-sizing: border-box; font-size: 14px;
    }
    .accordion-title::after {
        content: '+'; position: absolute; right: 20px; top: 50%;
        transform: translateY(-50%); font-size: 24px; font-weight: normal; color: #005bac;
    }
    .accordion-item[open] > .accordion-title { background-color: #e8f3fd; }
    .accordion-item[open] > .accordion-title::after { content: '−'; }
    .accordion-content { padding: 15px; background-color: #fff; font-size: 14px; }
    .accordion-content ul { list-style: disc; padding-left: 20px; margin: 0; }
    .accordion-content li { margin-bottom: 8px; }
    .accordion-content .sub-heading {
        font-weight: bold; margin-bottom: 10px; border-left: 4px solid #005bac; padding-left: 8px;
    }
}

@media print {
    /* プリンタ設定: A4 縦、左右の余白をさらに削減 */
    @page {
        size: A4 portrait;
        margin: 10mm 5mm;
    }

    /* 全体を100%に強制し、余白を徹底的に排除 */
    html, body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        overflow: visible !important;
    }

    /* 不要な要素の完全非表示 */
    #header, #globalNav, .categoryImg, .topicPath, .side, #pageTop, #footer, .novisualAnchor,
    .top-scrollbar-container,
    .language,
    [id*="rozetta"],
    [class*="rozetta"],
    .pc-only {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* スクロールバーの非表示 */
    ::-webkit-scrollbar {
        display: none !important;
    }

    /* コンテナを紙面いっぱいに強制（paddingを完全にゼロに） */
    #content, .inner, .main, article.main, .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        border: none !important;
    }

    .table-wrapper {
        overflow: visible !important;
        border: none !important;
    }

    .table-container {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important; /* 縦の制限を解除 */
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }


    table {
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        margin: 0 !important;
    }

    /* セル内余白の調整 */
    th, td {
        word-break: break-all !important;
        padding: 5px 4px !important;
        line-height: 1.4 !important;
    }

    /* 提出書類の名称（一番左 of the 列）の幅確保 */
    thead th:first-child,
    tbody th:first-child {
        min-width: 220px !important;
    }


    /* 中央の判定列（○が入る列）を極限まで狭くする */
    thead tr:nth-child(3) th,
    thead tr:nth-child(4) th,
    tbody td:not(.notes-cell) {
        width: 30px !important; /* 最小限の幅 */
        min-width: 30px !important;
        text-align: center !important;
    }

    /* 判定列の見出しを縦書きにして幅を抑える */
    thead tr:nth-child(3) th,
    thead tr:nth-child(4) th {
        writing-mode: vertical-rl !important;
        text-orientation: upright !important;
        white-space: nowrap !important;
        padding: 5px 2px !important;
    }

    /* 右側の備考欄を広げて余白を埋める */
    .notes-cell {
        width: auto !important;
        min-width: 150px !important;
        vertical-align: top !important;
    }


    thead .header-pink {
        width: auto !important;
    }

    tbody th {
        width: auto !important;
        position: static !important;
    }

    /* 長音記号を縦組みにする */
    .print-vertical {
        display: inline-block;
        writing-mode: vertical-rl;
        text-orientation: upright;
        line-height: 1;
        vertical-align: middle;
    }
}