﻿html {
    font-size: 62.5%;
}

body {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    margin: 0px;
    padding: 0px;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    color: #000;
    font-size: 1.6rem;
}

h1, h2, h3, h4, h5, h6, p {
    font-weight: normal;
    margin: 0;
}

form {
    margin: 0;
    padding: 0;
}

img {
    border: none;
}

.clf {
    zoom: 1;
    overflow: hidden;
}

.enfont {
    font-family: 'Libre Baskerville', serif;
}

.minfont {
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif;
}

.wrapper {
    width: 1140px;
    margin: 0 auto;
    text-align: left;
}

.align_c {
    text-align: center;
}

header {
    background-color: #fff;
    border-bottom: 4px solid #972C32;
    line-height: 1;
    padding: 8px 0;
}

    header a {
        color: #000;
        text-decoration: none;
    }

#header_title,
#header_title h1 {
    float: left;
    padding: 0;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif;
    font-size: 2rem;
}

.home_btn {
    display: inline-block;
    font-size: 1.1rem;
    margin: 0 0 0 10px;
}

#header_menu {
    float: right;
}

    #header_menu a {
        display: inline-block;
        font-size: 1.4rem;
        margin: 5px 0 0;
    }

        #header_menu a .enfont {
            font-size: 1.1rem;
            margin: 0 8px;
        }

        #header_menu a .fa {
            font-size: 1.5rem;
            color: #972C32;
        }

#contents_title {
    background: #F1F1F1;
}

    #contents_title h1 {
        font-size: 3.6rem;
        line-height: 1.2;
        color: #333;
        padding: 50px 0;
    }

#footer_copyr {
    background-color: #303030;
    color: #fff;
    font-size: 1.0rem;
    padding: 15px 0;
}

#main {
    padding: 70px 0 90px;
    line-height: 1.8;
}

    #main em {
        color: #DF3311;
        font-style: normal;
        font-weight: normal;
    }

    #main a {
        color: #DF3311;
    }

h2.subtitle {
    font-size: 3.0rem;
    line-height: 1.3;
    margin: 26px 0;
}

.lead {
    font-size: 1.4rem;
}

.form_area {
    margin: 30px 0;
}

.section_title {
    color: #fff;
    background-color: #666;
    text-align: center;
    font-size: 2.0rem;
    line-height: 1.3;
    padding: 12px 5px;
    margin: 15px 0 0;
}

    .section_title.bg_c5 {
        background: linear-gradient(135deg, #d8ca91, #b5a66b, #d8ca91);
    }

h3.section_title span {
    font-weight: 500;
    letter-spacing: .1em;
    padding: .5em 0 0;
    font-size: .7em;
    display: block;
}

.next_btn, .back_btn {
    display: inline-block;
    zoom: 1;
    color: #fff !important;
    font-size: 3.0rem;
    font-weight: normal;
    cursor: pointer;
    padding: 9px 0;
    margin: 20px;
    width: 335px;
    text-decoration: none;
    line-height: 1.5;
    vertical-align: middle;
}

.next_btn {
    background-color: #972C32;
    border: 1px solid #972C32;
}

    .next_btn .enfont, .back_btn .enfont {
        font-size: 1.8rem;
        margin: 0 20px 0 0;
    }

    .next_btn .fa, .back_btn .fa {
        font-size: 2.8rem;
        margin: 0 14px;
    }

.form_row {
    zoom: 1;
    overflow: hidden;
    padding: 0 8%;
    line-height: 1.4;
}

.form_h, .form_d {
    border-top: 1px solid #ccc;
}

.noborder .form_h, .noborder .form_d {
    border-top: none
}

.form_h {
    float: left;
    width: 32%;
    padding: 27px 4.5% 20px 0.5%;
}

.form_d {
    float: left;
    width: 62%;
    padding: 15px 0.5%;
}

.form_check .form_d {
    padding-top: 27px;
    padding-bottom: 20px;
}

.form_d select {
    border: 1px solid #ccc;
    font-size: 1.6rem;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url(/Images/select-icon.png) right 50% no-repeat;
    padding: 5px 50px 5px 15px;
    min-height: 40px;
    border-radius: 0;
}

    .form_d select::-ms-expand {
        display: none;
    }

.form_d input[type="text"],
.form_d input[type="number"],
.form_d input[type="email"],
.form_d textarea {
    border: 1px solid #ccc;
    font-size: 1.6rem;
    padding: 4px 15px;
    min-height: 30px;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    vertical-align: middle;
}

.form_d input[type="checkbox"],
.form_d input[type="radio"] {
    vertical-align: middle;
    margin: 15px 10px 15px 5px;
}

.hint {
    font-size: 1.3rem;
    display: block;
}

.bg_grey {
    background-color: #F1F1F1;
}

.btn {
    display: inline-block;
    color: #fff;
    background-color: #535353;
    border: 1px solid #535353;
    font-size: 1.6rem;
    padding: 6px 10px;
    margin: 0 20px;
    cursor: pointer;
    line-height: 1.3;
    vertical-align: middle;
}

    .btn .fa {
        font-size: 2.0rem;
        margin-left: 10px;
    }

.icon_required {
    margin: 0 0 0 15px;
    vertical-align: middle;
}

select.required, input.required {
    background-color: #FFE6E6;
}

p.required {
    background-color: #FFE6E6;
    padding: 1px 4px;
    margin: 4px 0;
}

.form_w_xl {
    width: 550px;
    height: 180px;
}

.form_w_l {
    width: 500px;
}

.form_w_m {
    width: 370px;
}

.form_w_s {
    width: 260px;
}

.form_w_xs {
    width: 200px;
}

.form_w_xxs {
    width: 100px;
}

.form_w_xxxs {
    width: 60px;
}

.error_box {
    font-size: 2.0rem;
    background-color: #EAFFFA;
    border: 2px solid #00B285;
    color: #00B285;
    line-height: 1.5;
    text-align: center;
    padding: 34px 50px 30px;
    margin: 10px 0 50px;
}

.error_box_title {
    color: #fff;
    background-color: #00B285;
    padding: 10px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.error_msg {
    background-color: red /* #00B285*/;
    color: #fff;
    margin-top: 6px;
    padding: 3px 5px;
    display: inline-block;
    zoom: 1;
}

.error_em {
    background-color: #E03311;
}

.qr_area {
    text-align: center;
    font-size: 1.8rem;
    margin: 20px 0;
}

.contact_bnr {
    text-align: center;
    display: inline-block;
    zoom: 1;
    color: #972C32;
    background-color: #FDF3ED;
    padding: 20px 30px;
    margin: 20px 0 50px;
}

    .contact_bnr .font1 {
        font-size: 2.4rem;
    }

    .contact_bnr .font2 {
        font-size: 1.6rem;
        margin: 0 10px;
    }

    .contact_bnr .font3 {
        font-size: 3.4rem;
        font-family: 'Lato', sans-serif;
        font-weight: 700;
    }

        .contact_bnr .font3 span {
            font-size: 2.6rem;
        }

.banner_main {
    margin: 30px 0;
}

.bg_blue {
    background-color: #E8F1F9;
}

.bg_yellow {
    background-color: #F9F5E7;
}

.bg_pink {
    background-color: #FFF7F2;
}

.qrcode {
    display: inline-block;
    zoom: 1;
    height: 126px;
    width: 126px;
    vertical-align: middle;
    margin: 0 20px;
}

img {
    max-width: 100%;
    height: auto;
}

input {
    color: black !important;
}

@@media (max-width:1139px) {
    .wrapper {
        width: 98%;
    }

    .form_row {
        padding: 0 2%;
    }

    .form_h {
        float: none;
        width: auto;
        padding: 15px 0.5% 5px;
    }

    .form_d {
        float: none;
        width: auto;
        padding: 0 0.5% 15px;
        border-top: none;
    }

    .form_check .form_d {
        padding: 0 0.5% 15px 2%;
    }

    #contents_title h1 {
        font-size: 2.4rem;
    }

    h2.subtitle {
        font-size: 2.0rem;
    }

    .form_d input[type="text"].form_w_l {
        width: 100%;
        padding: 12px 15px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

/* IE9 hack */
.form_d select:not(:target) {
    background: transparent\9;
    padding-right: 5px\9;
    padding-left: 10px\9;
}

-->

/* ============================================
        カレンダー用スタイル Start
        */

/*====カレンダー部分の大外括り====*/
.form_cal_outer {
    width: 960px;
    max-width: 98%;
    margin: 20px auto 50px;
    box-sizing: border-box;
    text-align: center;
}

    .form_cal_outer * {
        box-sizing: border-box;
    }
/*====年月日表示タイトル====*/
.cal_date_title {
    font-size: 2rem;
    margin: 8px 0 0;
    background-color: #F1EDE2;
    line-height: 1;
    padding: 7px 4px;
    border-radius: 4px 4px 0 0;
}

    .cal_date_title .cal_m {
        margin-left: 0.4em;
    }

.cal_title_arrow {
    position: relative;
    margin-top: 14px;
}

    .cal_title_arrow::before {
        content: "";
        display: block;
        background: url("/Images/cal_svg.svg")no-repeat center -85px;
        height: 14px;
        width: 36px;
        position: absolute;
        left: 50%;
        margin-left: -18px;
        top: -14px;
    }
/*====曜日表示====*/
.cal_week {
    /*  display: flex;*/
    margin-top: 5px;
    overflow: hidden;
}

    .cal_week > div {
        float: left;
        width: 14.28%;
        font-size: 1.5rem;
        margin-bottom: 3px;
    }

    .cal_week .day_sun {
        color: #9B0002;
    }

    .cal_week .day_sat {
        color: #1253C0;
    }
/*====日選択カレンダー====*/
.form_cal_select_day {
    /*  display: flex;*/
    flex-wrap: wrap;
    border-bottom: 1px solid #D8D8D8;
    overflow: hidden;
}
    /*日枠*/
    .form_cal_select_day > div {
        float: left;
        width: 14.28%;
        height: 65px;
        border-top: 1px solid #D8D8D8;
        line-height: 1;
        padding: 8px 0 3px;
    }

.cal_day {
    transition: all .3s;
    cursor: pointer;
}
/*日付文字*/
.cal_day_num {
    font-size: 2rem;
    letter-spacing: 1px;
}

    .cal_day_num .c_unit {
        font-size: 0.7em;
    }
/*予約状況枠*/
.cal_day_state {
    height: 27px;
    margin-top: 3px;
}
/*土日文字*/
.cal_day.is_w_sun, .cal_day.is_holiday {
    color: #9B0002 !important;
}

.cal_day.is_w_sat {
    color: #1253C0;
}
/*====時間帯選択====*/
.form_cal_select_hour {
    /*  display: flex;*/
    /*  flex-wrap: wrap;*/
    overflow: hidden;
}

    .form_cal_select_hour > div {
        width: 16.66%;
        float: left;
    }

.col_hour {
    line-height: 1;
    padding: 8px 2px 5px;
    border-bottom: 1px solid #D8D8D8;
    cursor: pointer;
    transition: all .3s;
}

.cal_hour_num {
    font-size: 1.6rem;
}

    .cal_hour_num .c_unit {
        font-size: 0.8em;
        margin-left: 2px;
    }

.cal_hour_state {
    height: 25px;
}
/*====分選択====*/
.form_cal_select_minutes {
    /*  display: flex;*/
    overflow: hidden;
}

    .form_cal_select_minutes > div {
        float: left;
        width: 33.33%;
        border-bottom: 1px solid #D8D8D8;
    }

.col_minutes {
    line-height: 1;
    padding: 8px 2px 5px;
    border-bottom: 1px solid #D8D8D8;
    cursor: pointer;
    transition: all .3s;
}

.cal_minutes_num {
    font-size: 1.6rem;
}

    .cal_minutes_num .c_unit {
        font-size: 0.8em;
        margin-left: 2px;
    }

        .cal_minutes_num .c_unit + .c_num {
            margin-left: 4px;
        }

.cal_minutes_state {
    height: 25px;
}
/*====共通====*/
/*フォント*/
.cal_date_title, .cal_day_num, .cal_hour_num, .cal_minutes_num {
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "MS PMincho", serif;
    letter-spacing: 1px;
}
/*矢印*/
.cal_arrow {
    background-image: url("/Images/cal_svg.svg");
    background-repeat: no-repeat;
    background-position: center top;
    height: 25px;
    margin: 15px 0 10px;
}

.cal_msg {
    font-size: 1.6rem;
    margin: 10px;
}
/*予約状況アイコン*/
.cal_day_state, .cal_hour_state, .cal_minutes_state {
    text-indent: -9999px;
    background-repeat: no-repeat;
    text-align: left;
    background-image: url("/Images/cal_svg.svg");
}

.cal_day.is_available_1 .cal_day_state, .col_hour.is_available_1 .cal_hour_state, .col_minutes.is_available_1 .cal_minutes_state {
    background-position: center -439px;
}

.cal_day.is_available_2 .cal_day_state, .col_hour.is_available_2 .cal_hour_state, .col_minutes.is_available_2 .cal_minutes_state {
    background-position: center -351px;
}

.cal_day.is_available_3 .cal_day_state, .col_hour.is_available_3 .cal_hour_state, .col_minutes.is_available_3 .cal_minutes_state {
    background-position: center -265px;
}

.cal_day.is_available_none .cal_day_state, .col_hour.is_available_none .cal_hour_state, .col_minutes.is_available_none .cal_minutes_state {
    background-position: center -170px;
}

.cal_day.day_selected.is_available_1 .cal_day_state, .col_hour.hour_selected.is_available_1 .cal_hour_state, .col_minutes.minutes_selected.is_available_1 .cal_minutes_state {
    background-position: center -698px;
}

.cal_day.day_selected.is_available_2 .cal_day_state, .col_hour.hour_selected.is_available_2 .cal_hour_state, .col_minutes.minutes_selected.is_available_2 .cal_minutes_state {
    background-position: center -611px;
}

.cal_day.day_selected.is_available_3 .cal_day_state, .col_hour.hour_selected.is_available_3 .cal_hour_state, .col_minutes.minutes_selected.is_available_3 .cal_minutes_state {
    background-position: center -525px;
}
/*予約不可日*/
.cal_day.is_available_none, .col_minutes.is_available_none, .col_hour.is_available_none {
    color: #ccc;
    cursor: default;
}
/*選択時*/
.day_selected, .minutes_selected, .hour_selected {
    background-color: #E9CECE !important;
}

@@media (min-width:1025px) {
    /*マウスオーバー時*/
    .cal_day:hover, .col_minutes:hover, .col_hour:hover {
        background-color: #FFF3EE;
    }

    .cal_day.is_available_none:hover, .col_minutes.is_available_none:hover, .col_hour.is_available_none:hover {
        background-color: transparent;
        box-shadow: none;
    }
}

@@media (max-width:1139px) {
    .cal_date_title {
        font-size: 1.4rem;
    }

    .cal_day .cal_day_num {
        font-size: 1.6rem;
        letter-spacing: 0;
    }

    .cal_day .c_unit {
        font-size: 1.3rem;
    }

    .cal_hour_num, .cal_minutes_num {
        letter-spacing: 0;
    }

    .form_cal_select_day > div, .form_cal_select_hour > div, .form_cal_select_minutes > div {
        border-left: 1px dashed #D8D8D8;
    }

        .form_cal_select_day > div:first-child, .form_cal_select_day > div:nth-child(7n+1), .form_cal_select_hour > div:first-child, .form_cal_select_hour > div:nth-child(6n+1), .form_cal_select_minutes > div:first-child {
            border-left: none;
        }
}
/*
        カレンダー用スタイル End
        ============================================*/

