@charset "UTF-8";
/***
@import url("base-x.css");
***/
/**********************************************************************
 * File: reservation.css
 * Date: 15th March 2020
 * Modified: 
 * Written by: KotaroW
 * Description:
 *      style for reservation
**********************************************************************/


html {
    height: 100%;
}

body {
    min-height: 100%;
}

h1 {
    color: #fff;
}

#intro {
    height: 100vh;
    background: url(../image/IMG_1615-bw.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#intro img {
    display: block;
    width: 100%;
}

#contents {
    display: flex;
    background: #eee;
}

#contents > section {
    width: 50%;
    padding: 1em 0.5em;
    background: #fff;
    box-sizing: border-box;
    
    max-width: 58rem;
    margin: auto;
}

#resv-note div {
    max-width: 48em;
    margin: 2em 1em 0 auto;
    border: solid 2px #882b33;
    /* border-radius: 5px; */
    position: relative;
}


#resv-note div::before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    bottom: 80%;
    left: 100%;
    border: solid 3px #882b33;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #882b33;
    z-index: 5;
}

#resv-note p {
    text-align: justify;
    padding: 0 1em;
}

#resv-note em {
    display: inline-block;
    border-bottom: dotted 1px #491803;
}

#resv-form {
    background: #fff;
}

#resv-form form {
    max-width: 38em;
    padding: 0 0.5em;
    margin: 0 auto 0 1em;
}

#resv-form form > span:first-of-type > span {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#resv-form form > span:first-of-type > span > * {
    width: 100%;
    margin-right: 5px;
}

#customer-message {
    max-width: 42rem;
    font-size: 1.125rem;
    margin: auto;
    padding: 1rem 1rem 0;
    border-bottom: solid 1px #882b33;
    margin-bottom: 3rem;
    text-align: center;
}

#customer-message p {
    margin-bottom: 0.25rem;
}

div#form-body {
    position: relative;
    /*display: none;*/
    z-index: 1;
}

div#form-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    opacity: 0.9;
    z-index: 10;
}

#form-mask p {
    text-align: center;
    padding: 1.5rem 0.5rem;
    color: #fff;
    background: #882b33;
}

@keyframes Hide-Form-Mask {
    0% {
        opacity: 0.9;
        z-index: 10;
    }
    100% {
        opacity: 0;
        display: none;
        z-index: -10;
    }
}

@keyframes Show-Form-Mask {
    0% {
        opacity: 0;
        z-index: -10;
        
    }
    100% {
        opacity: 0.9;
        display: block;
        z-index: 10;
    }
}


form label {
    font-size: 1.1em;
}

form label em {
    color: #900;
}

form label, form label > span {
    display: block;
}

form > span, #form-body > span {
    display: block;
    margin: 1em 0;
}

form input:not([type=radio]), form select, form textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: #fff;
    border-style: solid;
    border-radius: 0;
    border-width: 1px;
    border-color: #aaa;
    padding: 0.5em 1em;
    font-family: inherit;
    font-size: 1.125em;
}

form input[type="text"], form input[type="email"], form input[type="tel"], form textarea {
    width: 100%;
    box-sizing: border-box;
}

form input:not([type="submit"]):focus, form textarea:focus, form select:focus {
    border-color: orange;
}

form input[type="submit"] {
    color: #8b572a;
    background: #fff;
    border: double 2px #8b572a;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin: auto;
}

@media screen and (max-width: 4000px) {

    #contents {
        display: block;
    }

    #contents > section {
        width: 100%;
        background: #fff;
    }
    
    #resv-note div::before {
        top: 100%;
        margin-top: -0.4em;
        left: 65%;
        border-color: transparent transparent transparent #882b33;
        transform: rotate(90deg);
    }
    #resv-note div {
        margin: auto;
    }
    
    #resv-form form {
        margin: auto;
    }
    
}

input#mirror {
    display: none;
}

/***** HERE ******/
/***** remove this section after level 2 
#contents {
    display: block;
}
#contents #customer-bulletin {
    width: 100%;
    padding-top: 2em;
    padding-bottom: 4em;
}
#contents #customer-bulletin {
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
    background: #111;
}
#customer-bulletin h3 {
    font-size: 3.5vw;
    color: #ddd;
}
#customer-bulletin p {
    font-size: 1.25em;
    max-width: 48em;
    margin: 2em auto 0;
    text-align: justify;
    
}
#customer-bulletin p {
    color: #fff;
}
@media screen and (min-width: 1200px) {
    #customer-bulletin h3 {
        font-size: 36px;
    }

}
@media screen and (max-width: 600px) {
    #customer-bulletin h3 {
        font-size: 21px;
    }
}
*****/