/* mobile-styles.css - Styles for mobile devices */
@media (max-width: 767px) {
    body {
        font-size: 1.4em;
    }

    .header h1 {
        font-size: 1.4em;
    }

    .page {
        height: fit-content;
        width: auto;
    }

    .main {
        padding: 0px 4px;
        margin: 12px 4px 4px 4px;
        font-size: 1em;
    }

    #table-container {
        overflow-x: auto; /* Enable horizontal scrolling */
        max-width: 100%; /* Limit the container's width to the viewport or its parent's width */
    }

    #WeeklyReservationSchedule {
        width: 100%; /* Make the table fill its container */
        border-collapse: collapse; /* Collapse table borders */
    }

    select {
        width: 100%;
    
    }

    .footer p {
        font-size: 0.6em;
    }

    /* YoyakuSelectWeekTime.aspx
----------------------------------------------------------*/
    #explainationText {
    }

    .buttonLineContainer {
        flex-direction: column;
        align-items: flex-start;
    }

    .buttonContainer input[type="button"] {
        /*  flex: 1 1 auto;
        padding: 10px;
        font-size: 2vw;
        min-width: 0;
        white-space: nowrap;
        box-sizing: border-box; 
        text-align: center; 
        padding : 1px;
        margin: 5px;*/
        flex: 1 1 0;
        padding: 5px 10px;
        font-size: 0.9em;
        min-width: 0;
        white-space: nowrap; 
        box-sizing: border-box;
        text-align: center;
        margin: 5px; 
        max-width: calc(50% - 10px);
        flex-shrink: 1;
    }

    #calendarBtnContainer {
        flex-direction: column;
        align-items: baseline;
    }

    #calendar {
        margin-right: 5px; 
        flex: 1; 
    }

    #calendarSearchBtn {
        height: 40px;
        width: 40px;
        margin-top: 2px;
        margin-bottom: 10px;
        font-size: 1.5em;
    }

    #ShinryoukaDropDown {
        width: 100%;
        font-size: 1.4em;
    }

    /* Reservation table */
    #WeeklyReservationSchedule {
        width: 600px;
    }

    #WeeklyReservationSchedule th {
        width: 70px;
    }

    .main input[type="date"] {
        width: 80%;
        height: 2em;
    }

/* YoyakuHonninKakunin.aspx
----------------------------------------------------------*/
    .validationMessage {
        font-size: 0.8em;
    }

    #email {
        width: 90%;
    }

    #LineSkypeGuide img {
        width: 90%;
        display: block;
        margin: 0 auto;
    }

    /*YoyakuChangeCancel */

    .boxWrapper {
        overflow-x: hidden;
        flex-direction: column;
    }

    .yoyakuInfoBox {
        width: calc(100% - 50px);
    }

    .birthSelection {
        width: 100%; 
        box-sizing: border-box;
    }

    .CancelConfirmBox {
        width: 80%;
    }

    /* User form */
    

    .select {
        font-size: 1.5em;
        width: 100px;
    }

    .wrapLine {
        justify-content: space-between;
        gap: 5px;
        flex-direction: row;
    }

    .inputBox {
        flex: 1;
    }

    .main input[type="text"] {
        font-size: 1.5em;
        /*width: 150px;*/
        /*width: auto;*/
        width: 90%;
    }


    .requiredInput::after {
        margin-top: 0px;
    }

    .notRequiredInput::after {
        margin-top: 0px;
    }



    .main .radioGroup {
        display: block;
        margin: 0px;
    }

    .inputLine {
        display: block;
        margin-right: 0px;
    }

    .formLabel {
        display: block;
    }

    .popupDiv {
        top: 20%;
        font-size: 0.8em;
        width: 80%;
    }

    
}