@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .container {
        padding: 10px;
    }

    .container.left {
        width: 100%;
        border-right: none;
    }

    .script-line {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;  /* ボタン間のスペース */
        align-items: stretch;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;
    }

    .script-line select {
        width: 100%;
        margin-bottom: 10px;
    }

    .script-line textarea {
        width: 100%;
        height: 80px;
        margin-bottom: 10px;
    }

    .script-line span {
        margin-bottom: 10px;
    }

    .script-line .button-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .script-line button {
        flex: 1 1 5%;  /* 横幅を30%に設定し、均等に配置 */
        margin-bottom: 5px;
        font-size: 8px;
        white-space: nowrap;
          /* フォントサイズを小さくしてボタンをコンパクトに */
        /* ボタン内の余白を調整 */
        text-align: center;  /* ボタン内のテキストを中央揃え */
    }

    .fixed-header, .fixed-footer {
        padding: 10px;
    }

    .fixed-footer {
        flex-direction: column;
    }

    .fixed-footer button, .fixed-footer input {
        width: 100%;
        margin-bottom: 10px;
    }

    #character-list {
        width: 100%;
    }

    .container.right {
        display: none;
    }

    .footer-band {
        padding: 5px;
    }

    .footer-band button {
        padding: 5px 10px;
        font-size: 14px;
    }
}
#footer-options {
    display: none; /* Start hidden on small screens */
}

#toggle-footer {
    display: block;
    width: 100%;
    text-align: left;
    background-color: #f1f1f1;
    padding: 10px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

#toggle-footer:hover {
    background-color: #ddd;
}
@media (max-width: 768px) {
    .fixed-header h1 {
        font-size: 1.0em; /* 小さい画面では文字サイズを縮小 */
    }
}