@charset "utf-8";

/* Mobile width guard: keep legacy page widths inside the visible viewport. */
html,
body,
#wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body,
    #wrap {
        overflow-x: clip;
    }
}

@media screen and (max-width: 1024px) {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    #wrap,
    #container,
    main,
    form,
    .inner,
    .flex > * {
        min-width: 0;
    }

    img,
    svg,
    video,
    canvas,
    iframe {
        max-width: 100%;
    }

    .modal .modal_cont {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }

    #quick {
        right: 14px;
        max-width: calc(100vw - 28px);
    }

    .ms-live-detail,
    .ms-live-detail__card,
    .ms-live-order,
    .ms-live-point {
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ms-live-detail {
        padding-left: 0;
        padding-right: 0;
    }

    .ms-live-order__no,
    .ms-live-order__meta,
    .ms-live-order__bottom span,
    .ms-live-order__bottom strong {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media screen and (max-width: 640px) {
    #quick.account-quick {
        display: none;
    }

    .mypage {
        padding-bottom: 56px;
    }

    .mypage_main > div,
    .mypage_main > div.w50 {
        width: 100% !important;
    }

    .mypage_main .my_info .top,
    .mypage_main .my_info .util {
        align-items: flex-start !important;
    }

    .mypage_main .item {
        min-height: 170px;
        height: auto;
    }

    .mypage_main .item a {
        text-align: center;
    }
}