@charset "UTF-8";

/* ダイアログのオーバーレイ */
.halfup-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 110;
}

    /* 表示時のスタイル */
    .halfup-dialog-overlay.show {
        visibility: visible;
        opacity: 1;
    }

        .halfup-dialog-overlay.show .halfup-dialog {
            transform: translateY(0);
        }

    .halfup-dialog-overlay.hide .halfup-dialog {
        transition: transform 0.3s ease, visibility 0s linear 0.5s;
    }

    /* ダイアログのスタイル */
    .halfup-dialog-overlay .halfup-dialog {
        width: 100%;
        max-width: 600px;
        max-height: 98%;
        background: white;
        border-radius: 10px 10px 0 0;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

        .halfup-dialog-overlay .halfup-dialog .halfup-dialog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 20px 0 20px;
        }

            .halfup-dialog-overlay .halfup-dialog .halfup-dialog-header .halfup-dialog-title {
                font-size: 17px;
                line-height: 29px;
                letter-spacing: -0.54px;
                color: var(--custom-black2);
            }

            /* 閉じるボタン */
            .halfup-dialog-overlay .halfup-dialog .halfup-dialog-header .close-button {
                color: var(--custom-blue);
            }

        .halfup-dialog-overlay .halfup-dialog .halfup-dialog-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 20px;
        }