body {
    width: calc(100vw - 40px); /* ビューポートの幅を100%に設定 */
    margin: 0 auto; /* 中央揃え */
    padding: 0 20px; /* 両端に余白を追加 */
    box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
}

table {
    border-collapse: collapse; /* セルの境界線を重ねる */
}
th, td {
    border: 1px solid black; /* セルの枠線 */
    padding: 5px; /* セルの内側の余白 */
}

.accordion {
    background-color: #eee; /* アコーディオンの背景色 */
    color: black; /* アコーディオンの文字色 */
    cursor: pointer; /* カーソルをポインタに変更 */
    padding: 5px 10px; /* アコーディオンの内側の余白 */
    width: calc(90vw - 40px); /* アコーディオンの幅を親要素に合わせる */
    border: 1px solid black; /* アコーディオンの枠線 */
    text-align: left; /* テキストを左揃え */
    outline: none; /* アコーディオンのアウトラインを消す */
    font-size: 14px; /* フォントサイズ */
    transition: 0.4s; /* アコーディオンの開閉にアニメーションを追加 */
    margin: 5px 10px; /* アコーディオンの上下の余白を調整 */
}

.active, .accordion:hover {
    background-color: #ccc; /* アクティブなアコーディオンの背景色 */
}

.panel {
    padding: 0 18px; /* パネルの内側の余白 */
    display: none; /* パネルを非表示にする */
    background-color: white; /* パネルの背景色 */
    overflow: hidden; /* パネルの内容がはみ出さないようにする */
}

.sub-accordion {
    display: block; /* サブアコーディオンをブロック要素にする */
    background-color: #f9f9f9; /* サブアコーディオンの背景色 */
    color: black; /* サブアコーディオンの文字色 */
    cursor: pointer; /* カーソルをポインタに変更 */
    padding: 5px 18px; /* サブアコーディオンの内側の余白 */
    width: calc(90vw - 60px); /* サブアコーディオンの幅を親要素に合わせる */
    border: 1px solid black; /* サブアコーディオンの枠線 */
    text-align: left; /* テキストを左揃え */
    outline: none; /* サブアコーディオンのアウトラインを消す */
    font-size: 13px; /* フォントサイズ */
    transition: 0.4s; /* サブアコーディオンの開閉にアニメーションを追加 */
    margin: 5px 18px; /* サブアコーディオンの上下の余白を調整 */
}

.active, .sub-accordion:hover {
    background-color: #ddd; /* アクティブなサブアコーディオンの背景色 */
}

.sub-panel {
    padding: 0 18px; /* サブパネルの内側の余白 */
    display: none; /* サブパネルを非表示にする */
    background-color: white; /* サブパネルの背景色 */
    overflow: hidden; /* サブパネルの内容がはみ出さないようにする */
}

@media (orientation: portrait) {
    body {
        margin: 0 auto; /* 中央揃え */
        padding: 0 20px; /* 両端に余白を追加 */
        box-sizing: border-box; /* ボックスモデルをborder-boxに設定 */
        font-size: 1.5em; /* フォントサイズを1.5倍に設定 */
    }
    h2 {
        font-size: 1.5em; /* 見出しのフォントサイズを1.5倍に設定 */
    }
    h3 {
        font-size: 1.5em; /* サブ見出しのフォントサイズを1.5倍に設定 */
    }
    ul li {
        font-size: 1.5em; /* リストのフォントサイズを1.5倍に設定 */
    }
    .accordion {
        font-size: 1.5em; /* ボタンのフォントサイズを1.5倍に設定 */
        margin: 15px 10px; /* アコーディオンの上下の余白を調整 */
        padding: 10px 20px; /* アコーディオンの内側の余白を調整 */
    }

    .sub-accordion {
        font-size: 1.5em; /* ボタンのフォントサイズを1.5倍に設定 */
        margin: 25px 10px; /* アコーディオンの上下の余白を調整 */
        padding: 10px 20px; /* アコーディオンの内側の余白を調整 */
    }
}