@charset "UTF-8";

/*========================================
Reserve Form Section
========================================*/
.reserve-form-section{
    padding:110px 0 130px;
    background:
        linear-gradient(
            rgba(48,49,47,.72),
            rgba(48,49,47,.72)
        ),
        url("images/s_0028_bgimage.webp") center center / cover no-repeat;
    color:#fff;
}

.reserve-form-section .section-en{
    color:#fff;
}

.reserve-form-section h2{
    color:#fff;
    text-align: center;
}

.reserve-form-section .reserve-lead{
    margin:0 0 38px;
    color:#fff;
    text-align:center;
    line-height:2;
}

.reserve-form-section .reserve-lead a{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:3px;
}

/*========================================
Form Wrapper
========================================*/
.reserve-form-wrap{
    max-width:980px;
    margin:0 auto;
    padding:42px;
    border-radius:4px;
    background:#fff;
    color:#333;
    box-shadow:0 18px 44px rgba(0,0,0,.18);
}

.reserve-form-section .reserve-form{
    width:100%;
}

/*========================================
Form Fields
========================================*/
.reserve-form-section .reserve-form-fields{
    display:grid;
    gap:18px;
}

.reserve-form-section .reserve-form-fields label{
    display:block;
    margin:0;
    color:#41413f;
    font-weight:700;
}

.reserve-form-section .reserve-form-fields input,
.reserve-form-section .reserve-form-fields textarea{
    width:100%;
    margin-top:8px;
    padding:14px 16px;
    border:1px solid #d6d3ce;
    border-radius:3px;
    outline:none;
    background:#fff;
    color:#333;
    font:inherit;
    box-sizing:border-box;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.reserve-form-section .reserve-form-fields input:focus,
.reserve-form-section .reserve-form-fields textarea:focus{
    border-color:#8b8379;
    box-shadow:0 0 0 3px rgba(139,131,121,.12);
}

.reserve-form-section .reserve-form-fields textarea{
    resize:vertical;
    min-height:140px;
}

/*========================================
Required Badge
========================================*/
.reserve-form-section .form-badge{
    display:inline-block;
    margin-left:8px;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    font-style:normal;
    line-height:1.5;
}

.reserve-form-section .form-badge.req{
    background:#41413f;
    color:#fff;
}

/*========================================
Submit Button
========================================*/
.reserve-form-section .reserve-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(320px,100%);
    margin:32px auto 0;
    padding:16px 28px;
    border:0;
    border-radius:999px;
    background:#41413f;
    color:#fff;
    font:inherit;
    font-weight:700;
    letter-spacing:.05em;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.12);
    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.reserve-form-section .reserve-submit:hover{
    background:#5f5c57;
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(0,0,0,.16);
}

/*========================================
Reservation Calendar
========================================*/
.reserve-form-section .reserve-calendar{
    margin:0 0 34px;
    padding:0;
    border:0;
}

.reserve-form-section .reserve-calendar legend{
    margin:0 0 12px;
    color:#41413f;
    font-size:22px;
    font-weight:700;
}

.reserve-form-section .reserve-scroll-note{
    margin:0 0 14px;
    color:#666562;
    font-size:13px;
}

.reserve-form-section .reserve-table-block{
    margin-bottom:18px;
}

.reserve-form-section .reserve-month-label{
    margin:0 0 8px;
    color:#5f5c57;
    font-weight:700;
    letter-spacing:.04em;
}

/*========================================
Calendar Scroll
========================================*/
.reserve-form-section .reserve-table-scroll{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
}

/*========================================
Calendar Table
========================================*/
.reserve-form-section .reserve-table{
    width:100%;
    min-width:760px;
    max-width:none;
    border-collapse:separate;
    border-spacing:6px;
}

.reserve-form-section .reserve-table th{
    padding:10px 8px;
    border-radius:3px;
    background:#f2f1ee;
    color:#41413f;
    text-align:center;
    white-space:nowrap;
    font-size:14px;
}

.reserve-form-section .reserve-table td{
    height:56px;
    text-align:center;
    vertical-align:middle;
}

.reserve-form-section .month-mini{
    display:block;
    color:#8b8379;
    font-size:11px;
    line-height:1.4;
}

/*========================================
Reservation Radio
========================================*/
.reserve-form-section .reserve-radio{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

/*========================================
Reservation Slot
========================================*/
.reserve-form-section .reserve-slot{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:8px 10px;
    border:1px solid #d6d3ce;
    border-radius:3px;
    background:#fff;
    color:#41413f;
    font-weight:700;
    cursor:pointer;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.reserve-form-section .reserve-slot:hover{
    border-color:#8b8379;
    background:#f8f8f6;
}

.reserve-form-section .reserve-radio:checked + .reserve-slot{
    border-color:#41413f;
    background:#41413f;
    color:#fff;
}

/*========================================
Closed / Full
========================================*/
.reserve-form-section .is-closed,
.reserve-form-section .is-full{
    border-radius:3px;
    background:#ececea;
    color:#aaa9a6;
    font-weight:700;
}

.reserve-form-section .reserve-table th.is-holiday{
    background:#ececea;
    color:#aaa9a6;
}

/*========================================
Contact
========================================*/
.reserve-form-section .reserve-table td.is-contact{
    border-radius:3px;
    background:#f2f1ee;
    color:#5f5c57;
    font-size:12px;
    font-weight:700;
    line-height:1.4;
}

/*========================================
Selected Date
========================================*/
.reserve-form-section .reserve-selected-text{
    margin:14px 0 0;
    padding:14px 18px;
    border-left:3px solid #8b8379;
    border-radius:0 3px 3px 0;
    background:#f2f1ee;
    color:#41413f;
    font-weight:700;
}

/*========================================
Error
========================================*/
.reserve-form-section .datetime-error{
    margin:0 0 12px;
    color:#a94442;
    font-weight:700;
}

/*========================================
Calendar Width Fix
========================================*/
.reserve-form-section .reserve-form-wrap,
.reserve-form-section .reserve-form,
.reserve-form-section .reserve-calendar,
.reserve-form-section .reserve-table-block{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

.reserve-form-section .reserve-calendar{
    overflow:hidden;
}

/*========================================
Responsive
========================================*/
@media(max-width:768px){
    .reserve-form-section{
        padding:80px 0 100px;
        background:
            linear-gradient(
                rgba(48,49,47,.70),
                rgba(48,49,47,.70)
            ),
            url("images/s_0028_bgimage.webp") center center / cover no-repeat;
    }

    .reserve-form-wrap{
        padding:28px 18px;
        border-radius:3px;
    }

    .reserve-form-section .reserve-lead{
        text-align:left;
    }

    .reserve-form-section .reserve-calendar legend{
        font-size:20px;
    }

    .reserve-form-section .reserve-table{
        width:560px !important;
        min-width:560px !important;
        max-width:none !important;
        border-spacing:5px;
    }

    .reserve-form-section .reserve-table th{
        font-size:13px;
    }

    .reserve-form-section .reserve-slot{
        min-height:46px;
        font-size:13px;
    }

    .reserve-form-section .reserve-submit{
        width:100%;
    }
}

/*========================================
Page Width Lock
========================================*/
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.site-header,
.site-footer,
.fixed-cta{
    width:100%;
    max-width:100%;
    overflow:hidden;
    box-sizing:border-box;
}

.header-inner,
.footer-inner{
    width:min(1100px,90%);
    max-width:100%;
    box-sizing:border-box;
}

/*========================================
Header Width Fix
========================================*/
.site-header{
    left:0;
    right:0;
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.header-inner{
    width:min(1200px,94%);
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

.site-logo{
    flex:0 0 auto;
}

.header-nav{
    min-width:0;
}

/*========================================
SP Width Fix
========================================*/
@media(max-width:768px){
    .site-header{
        width:100vw;
        max-width:100vw;
    }

    .header-inner{
        width:94%;
        max-width:94%;
        margin:0 auto;
    }

    .site-logo img{
        max-width:160px;
    }

    .header-nav a:not(.nav-reserve){
        display:none;
    }

    .header-nav .nav-reserve{
        white-space:nowrap;
    }

    .fixed-cta{
        left:0;
        right:0;
        bottom:0;
        width:100vw;
        max-width:100vw;
    }

    .fixed-cta a{
        min-width:0;
    }
}

/*========================================
Final Horizontal Scroll Lock
========================================*/
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
}

body{
    position:relative;
}

main,
.site-header,
.site-footer,
.fixed-cta,
.reserve-form-section{
    max-width:100vw;
    overflow-x:hidden;
}

.reserve-form-section *,
.site-header *,
.site-footer *,
.fixed-cta *{
    max-width:100%;
    box-sizing:border-box;
}

/* カレンダーだけ横スクロールを許可 */
.reserve-form-section .reserve-table-scroll{
    overflow-x:auto !important;
    max-width:100%;
}

/* テーブルは横スクロール用に幅を持たせる */
.reserve-form-section .reserve-table{
    max-width:none !important;
}