@charset "UTF-8";

/* ==================================================
contents
================================================== */
#main h1 {
    position: relative;
    background: url(../images/main/h1_bg.gif) repeat-x left bottom;
    padding: 0 0 10px 25px;
    color: #0059A9;
    font-size: 150%;
    margin: 0 0 10px;
}

    #main h1::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -8px;
        width: 12px;
        height: 6px;
        background-color: #0059A9;
    }

#main p {
    margin: 0 0 20px;
}

#main ul {
    list-style: none;
}

#main table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

#main p img {
    vertical-align: middle;
    margin: 0 3px;
}

/* toggle_btn
============================== */
.toggle_btn {
    font-size: 143%;
    display: block;
    margin: 0 auto;
    text-decoration: none;
    min-height: 30px;
    line-height: 30px;
    overflow: hidden;
    font-weight: bold;
    text-align: center;
    max-width: 120px;
    border: 1px solid #ccc;
    background-color: #f5f5f5 !important;
    color: #666 !important;
    box-shadow: 2px 2px 0 0 #eee;
}

.menu_tbl .icon .toggle_btn {
    max-width: 60px;
}

.toggle_btn:active {
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    background-color: #BFEAF2 !important;
    border: 1px solid #44BFDA;
}

.toggle_btn img {
    vertical-align: middle;
}

/* box_msg
============================== */
#main .box_msg1,
#main .box_msg2,
#main .box_msg3,
#main .box_msg4 {
    font-size: 130%;
    font-weight: bold;
    padding: 50px 10px;
    text-align: center;
    margin: 0 0 50px;
}

#main .box_msg1 {
    color: #333;
    background-color: #FFFFE6;
}

#main .box_msg2 {
    color: #360;
    background-color: #E0EFEF;
}

#main .box_msg3 {
    color: #C00;
    background-color: #FEF3FC;
}

#main .box_msg4 {
    color: #333;
    background-color: #E6F2FF;
}

/* msg_ico */
#main .msg_ico {
    display: inline-block;
}

    #main .msg_ico p {
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px;
    }

/* box_msg
============================== */
#main .wrap_box_msg {
    padding: 10px;
    background-color: #FEF3F5;
    text-align: center;
    margin: 0 0 50px;
}

#main .box_msg {
    border: 2px solid #F8A7B5;
    padding: 50px 10px 30px;
}

    #main .box_msg p {
        font-size: 150%;
    }

/* 年月日
============================== */
#date_set {
    letter-spacing: normal;
    margin: 0 0 30px;
    clear: both;
    position: relative;
}

    #date_set .date {
        display: inline-block;
        vertical-align: middle;
        font-weight: bold;
    }

        #date_set .date p {
            display: inline-block;
            vertical-align: middle;
            margin: 0 3px;
        }

            #date_set .date p span {
                display: inline-block;
                vertical-align: baseline;
                padding: 0 10px;
                font-size: 200%;
            }

            #date_set .date p.year {
                padding: 0 10px;
            }

        #date_set .date a {
            border: 1px solid #ccc;
            display: inline-block;
            color: #333;
            padding: 8px 40px 6px 20px;
            line-height: 0.8;
            -webkit-transition: .2s ease-in-out;
            transition: .2s ease-in-out;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            position: relative;
        }

            #date_set .date a::after {
                content: "";
                position: absolute;
                top: 50%;
                right: 10px;
                margin-top: -3px;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 6px 4px 0 4px;
                border-color: #ccc transparent transparent transparent;
            }

            #date_set .date a:hover {
                border-color: #015BA9;
            }

                #date_set .date a:hover::after {
                    border-color: #015BA9 transparent transparent transparent;
                }

    /* nav_back */
    #date_set .nav_back,
    #date_set .nav_next {
        display: inline-block;
        vertical-align: middle;
        margin: 0 3px;
    }

    #date_set .nav_next {
        margin-right: 20px;
    }

        #date_set .nav_back a,
        #date_set .nav_next a {
            position: relative;
            background-color: #015BA9;
            color: #fff;
            padding: 7px 10px;
            -webkit-transition: .2s ease-in-out;
            transition: .2s ease-in-out;
        }

            #date_set .nav_back a:hover,
            #date_set .nav_next a:hover {
                background-color: #1B95E0;
            }

        #date_set .nav_back span,
        #date_set .nav_next span {
            width: 18px;
            height: 18px;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
        }

        #date_set .nav_back a::before,
        #date_set .nav_next a::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 16px;
            height: 16px;
            margin-top: -8px;
            margin-left: -8px;
        }

        #date_set .nav_next a::before {
            background: url(../images/icon/next_icon.png) no-repeat;
        }

    #date_set .nav_back a::before {
        background: url(../images/icon/back_icon.png) no-repeat;
    }

    /* legend */
    #date_set .legend {
        position: absolute;
        right: 0;
        top: 0.7em;
        font-size: 85.7%;
        border: 1px solid #ccc;
        padding: 5px 20px;
    }

        #date_set .legend .yoyaku {
            background: url(../images/icon/reserve_on.png) no-repeat left center;
            padding: 2px 0 0 20px;
            -webkit-background-size: 16px auto;
            -moz-background-size: 16px auto;
            background-size: 16px auto;
            margin-right: 1em;
        }

        #date_set .legend .today {
            background-image: url(../images/icon/today_bg.png);
            background-repeat: no-repeat;
            background-position: left center;
            padding: 2px 0 0 20px;
            -webkit-background-size: 16px auto;
            -moz-background-size: 16px auto;
            background-size: 16px auto;
        }

/* line_tbl
============================== */
#main .line_tbl {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin: 0 0 20px;
}

    #main .line_tbl th,
    #main .line_tbl td {
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        text-align: left;
        vertical-align: middle;
        padding: 15px 15px 5px 15px;
    }

    #main .line_tbl th {
        width: 200px;
        background-color: #f5f5f5;
        color: #333;
    }

        #main .line_tbl th p,
        #main .line_tbl td p {
            margin-bottom: 10px;
        }

    #main .line_tbl td.tip {
        width: 20px;
        padding-left: 0;
    }

    #main .line_tbl td.btn {
        width: 160px;
        padding-left: 0;
        padding-right: 10px;
        text-align: right;
    }

    #main .line_tbl td.tip,
    #main .line_tbl td.btn {
        border-left: none;
    }

    #main .line_tbl td.col p {
        display: inline-block;
        vertical-align: middle;
        margin-right: 1.5em;
    }

        #main .line_tbl td.col p.pref {
            width: 8em;
        }

        #main .line_tbl td.col p.add_sch {
            width: 6em;
        }

            #main .line_tbl td.col p.pref .toggle_btn,
            #main .line_tbl td.col p.add_sch .toggle_btn {
                font-size: 100%;
                line-height: 35px;
                height: 35px;
            }

            #main .line_tbl td.col p.add_sch .toggle_btn {
                border-color: #060;
                background-color: #669900 !important;
                color: #fff !important;
            }

                #main .line_tbl td.col p.add_sch .toggle_btn:active {
                    background-color: #393 !important;
                }

    #main .line_tbl th .must {
        position: relative;
        padding-right: 1.2em;
    }

        #main .line_tbl th .must::after {
            content: "※";
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -0.8em;
            margin-bottom: 0;
            color: #C00;
            font-weight: bold;
        }

#main .must_icon {
    color: #C00;
    font-weight: bold;
}

#main .line_tbl p #ReservationUser {
    width:220px;
}

#main .line_tbl div.box_time input {
    width:220px
}

/* ==================================================
予約管理
================================================== */
/* reserve_head
============================== */
#reserve_head {
    position: relative;
    margin: 0 0 30px;
}

#reserve_head_day {
    padding: 0 7em;
    text-align: center;
}

#reserve_head_btn {
    position: absolute;
    top: 0;
    right: -5px;
    z-index: 5;
}

#reserve_head_day #date_set {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

/* txt */
#main #wrap_reserve_head_day .txt {
    font-size: 75%;
    color: #C00;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 0;
    text-align: center;
}

/* reserve_head_btn
============================== */
/* reserve_update */
#main .reserve_today,
#main .reserve_update {
    display: inline-block;
    vertical-align: middle;
    padding: .5em;
    overflow: hidden;
    position: relative;
    font-weight: bold;
    line-height: 1.3;
    font-size: 87.5%;
    margin-bottom: 0;
}

.reserve_today a,
.reserve_update a {
    background-color: #E2EECC;
    background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#E2EECC));
    background: -moz-linear-gradient(center top, #fff, #E2EECC);
    background: linear-gradient(to bottom, #fff, #E2EECC);
    border: solid #75AF10 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #333;
    display: block;
    padding: 10px 10px 10px 45px;
    position: relative;
    text-align: center;
    text-decoration: none;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    vertical-align: middle;
    overflow: hidden;
}

    .reserve_today a:hover,
    .reserve_update a:hover {
        background: -webkit-gradient(linear, center top, center bottom, from(#E2EECC), to(#fff));
        background: -moz-linear-gradient(center top, #E2EECC, #fff);
        background: linear-gradient(to bottom, #E2EECC, #fff);
    }

    .reserve_today a::after,
    .reserve_update a::after {
        content: "";
        position: absolute;
        left: 10px;
        top: 50%;
        margin-top: -13px;
        width: 27px;
        height: 27px;
    }

    .reserve_today a::after {
        background: url(../images/icon/today_icon.png) no-repeat;
    }

    .reserve_update a::after {
        background: url(../images/icon/update_icon.png) no-repeat;
    }

.reserve_update.on a {
    background-color: #547E0C;
    background: -webkit-gradient(linear, center top, center bottom, from(#75AF10), to(#547E0C));
    background: -moz-linear-gradient(center top, #75AF10, #547E0C);
    background: linear-gradient(to bottom, #75AF10, #547E0C);
    border: solid #fff 2px;
    color: #fff;
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

    .reserve_update.on a:hover {
        background: -webkit-gradient(linear, center top, center bottom, from(#547E0C), to(#75AF10));
        background: -moz-linear-gradient(center top, #547E0C, #75AF10);
        background: linear-gradient(to bottom, #547E0C, #75AF10);
    }

    .reserve_update.on a::before {
        content: "";
        z-index: 10;
        height: 100%;
        width: 10px;
        position: absolute;
        top: -100px;
        left: 0;
        background-color: #fff;
        opacity: 0;
        transform: rotate(45deg);
        animation: update-on-anime 3s ease-in-out infinite;
        -webkit-transform: rotate(45deg);
        -webkit-animation: update-on-anime 3s ease-in-out infinite;
        -moz-transform: rotate(45deg);
        -moz-animation: update-on-anime 3s ease-in-out infinite;
        -ms-transform: rotate(45deg);
        -ms-animation: update-on-anime 3s ease-in-out infinite;
        -o-transform: rotate(45deg);
        -o-animation: update-on-anime 3s ease-in-out infinite;
    }

@keyframes update-on-anime {
    0% {
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

@-webkit-keyframes update-on-anime {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

.reserve_update.on a::after {
    background: url(../images/icon/update_icon_on.png) no-repeat;
}

/*
.reserve_update.on a::after {
	background:url(../images/icon/update_icon_on.png) no-repeat;
	animation: update-anime 3s linear infinite;
}
	@keyframes update-anime {
	  0%  {transform: rotate(0);}
	  100%  {transform: rotate(-360deg);}
	}
	@-webkit-keyframes update-anime {
	  0%  {transform: rotate(0);}
	  100%  {transform: rotate(-360deg);}
	}
*/
/* reserve_main
============================== */
#reserve_main {
    position: relative;
    padding: 0 30px;
    margin: 0 0 20px;
    clear: both;
}

#main #reserve_main .nav_back,
#main #reserve_main .nav_next {
    position: absolute;
    top: 0;
    width: 30px;
    height: 100%;
    margin: 0;
}

#reserve_main .nav_back {
    left: 0;
}

#reserve_main .nav_next {
    right: 0;
}

    #reserve_main .nav_back a,
    #reserve_main .nav_next a {
        display: block;
        background-color: #015BA9;
        color: #fff;
        height: 100%;
        -webkit-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
    }

    #reserve_main .nav_back span,
    #reserve_main .nav_next span {
        width: 18px;
        height: 18px;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
    }

    #reserve_main .nav_back a::before,
    #reserve_main .nav_next a::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 16px;
        margin-top: -8px;
        margin-left: -8px;
    }

    #reserve_main .nav_back a:hover,
    #reserve_main .nav_next a:hover {
        background-color: #1B95E0;
    }

    #reserve_main .nav_next a::before {
        background: url(../images/icon/next_icon.png) no-repeat;
    }

#reserve_main .nav_back a::before {
    background: url(../images/icon/back_icon.png) no-repeat;
}

/* reserve_table
============================== */
#reserve_table {
    /*	overflow:hidden;*/
}

    #reserve_table table {
        width: 100%;
        /* background:url(../images/main/reserve_table_bg.png) repeat-y left top; */
        border-top: 1px solid #ccc;
    }

        #reserve_table table .th_time {
            /*background: url(../Images/main/sp/reserve_table_th_bg.png) repeat-y left top;*/
        }

        #reserve_table table th {
            vertical-align: middle;
            color: #333;
            font-size: 87.5%;
            font-weight: normal;
            font-family: Arial, Helvetica, sans-serif;
            border-bottom: 1px solid #ccc;
            width: 41px;
            padding: 3px 0 !important;
        }

        #reserve_table table td {
            /* width: 87px; */
            border-bottom: 1px solid #ccc;
            position: relative;
        }

        #reserve_table table .num {
            vertical-align: middle;
            text-align: center;
            width: 100px !important;
            padding: 10px 0;
        }

        #reserve_table table p {
            margin: 0;
            line-height: 1.2;
        }

        #reserve_table table .num p {
            margin-bottom: 5px;
        }

        #reserve_table table .set_off,
        #reserve_table table .set_on {
            width: 24px;
            margin: 0 auto;
        }

            #reserve_table table .set_off a,
            #reserve_table table .set_on a {
                display: block;
                width: 24px;
                height: 36px;
                border: 1px solid #ccc;
                background-color: #fff;
                background-position: center center;
                background-repeat: no-repeat;
                -webkit-transition: .2s ease-in-out;
                transition: .2s ease-in-out;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
            }

            #reserve_table table .set_off a {
                background-image: url(../images/icon/set_icon_off.png);
            }

            #reserve_table table .set_on a {
                background-image: url(../images/icon/set_icon_on.png);
            }

                #reserve_table table .set_off a:hover,
                #reserve_table table .set_on a:hover {
                    border: 1px solid #F90;
                    background-color: #FFF8F0;
                    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
                }

            #reserve_table table .set_off span,
            #reserve_table table .set_on span {
                display: block;
                width: 24px;
                height: 30px;
                position: relative;
                z-index: -1;
                overflow: hidden;
            }

/* -------------------- 予約管理 モック用 ------------------- */
#reserve_head {
    margin-bottom: 0px;
}

    #reserve_head .add_btn_right {
        display: flex;
        justify-content: right;
        padding: 0px;
        margin-top: 10px;
    }

        #reserve_head .add_btn_right p {
            margin: 0px !important;
            margin-left: 20px !important;
        }

    /* ボタン */
    #reserve_head .box_btn p {
        width: auto;
    }

        #reserve_head .box_btn p a {
            padding: 4px 0;
        }

        /* Excel取り込みボタン */
        #reserve_head .box_btn p.csv a {
            height: 40px;
            width: 200px;
            border: 2px solid #e7a23a;
            background-color: #e69500;
            -webkit-box-shadow: 4px 4px 0 0 #D6EBCC;
            -moz-box-shadow: 4px 4px 0 0 #D6EBCC;
            box-shadow: 4px 4px 0 0 #D6EBCC;
        }

        #reserve_head .box_btn p.csv span.csv_import {
            background-image: url(../images/icon/csv_import.png);
        }

/* Excel取り込みボタン */
#main .top_btn p.csv a {
    margin-right: 15px;
}

#main .top_btn p.csv a {
    height: 40px;
    width: 200px;
    border: 2px solid #e7a23a;
    background-color: #e69500;
    -webkit-box-shadow: 4px 4px 0 0 #D6EBCC;
    -moz-box-shadow: 4px 4px 0 0 #D6EBCC;
    box-shadow: 4px 4px 0 0 #D6EBCC;
}

    #main .top_btn p.csv a:hover {
        background: #6b4f01;
        background: -webkit-gradient(linear, center top, center bottom, from(#6b4f01), to(#e69500));
        background: -moz-linear-gradient(center top, #6b4f01, #e69500);
        background: linear-gradient(to bottom, #6b4f01, #e69500);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b4f01', endColorstr='#e69500', GradientType=0);
    }

#main .top_btn p.csv span.csv_import {
    background-image: url(../images/icon/csv_import.png);
}

/*----------------- テーブル内スクロール -----------------*/

/* テーブル全体のコンテナ */
.table-container {
    overflow-y: auto;
    max-height: 300px;
    border-collapse: collapse;
}

/* テーブルのヘッダー */
.table_scroll thead.scroll {
    position: sticky;
    top: 0;
    background-color: #f5f5f5;
    z-index: 1;
}

td::before,
th::before {
    border-right: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
}

div.table-container tr:first-child th {
    border-top: 1px solid #ccc !important;
}

div.table-container th:first-child {
    border-left: 1px solid #ccc !important;
}

div.table-container-reserved tr:first-child th {
    border-top: 1px solid #ccc !important;
}

div.table-container-reserved th:first-child {
    border-left: 1px solid #ccc !important;
}

div.table-container-master tr:first-child th {
    border-top: 1px solid #ccc !important;
}

div.table-container-master th:first-child {
    border-left: 1px solid #ccc !important;
}

/* thead.scroll,
tbody.scroll {
	display: block;
}

tbody.scroll {
	overflow-x: hidden;
	overflow-y: scroll;
	height: 100px;
}

#reserve_table table .name{
	width: 100px !important;
}

#reserve_table table th{
	width: calc(( 100% - 100px ) / 30 );
} */

/* --------------------------------------------- */

#reserve_table table .day,
#reserve_table table .week {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    background-color: #F5F5F5;
}

    #reserve_table table .day .sat,
    #reserve_table table .week .sat {
        background-color: #E1F5FD;
    }

    #reserve_table table .day .sun,
    #reserve_table table .week .sun {
        background-color: #FFEAFF;
    }

#reserve_table .reserved {
    margin-top: 10px !important;
}

    #reserve_table .reserved a {
        border: none !important;
        height: 70px !important;
        padding-top: 27px !important;
    }

#reserve_table .user {
    color: #15b83e;
    font-weight: 700;
}

.text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#reserve_table table td,
#reserve_table table th {
    border-right: 1px solid #ccc;
}

#reserve_table th:first-child{
    width:100px;
}

/* no_reserved */
#reserve_table td p.no_reserved a {
    display: block;
    margin: 5px;
    padding: 50px 5px 5px;
}

#reserve_table table .box_line {
    height: 91px;
    font-size: 140%;
}

    #reserve_table table .box_line .left a {
        margin-right: -1px;
    }

    #reserve_table table .box_line .right a {
        margin-left: 0px;
    }

    #reserve_table table .box_line .middle a {
        margin-right: -1px;
        margin-left: 0px;
    }

    /* #reserve_table table .box_line .once_cell {
	width: 50px;
}

#reserve_table table .box_line .once_cell a {
	width: 50px;
} */

    #reserve_table table .box_line .green a {
        background-color: #d5fee7;
    }

        #reserve_table table .box_line .green a:hover {
            background-color: #b4ffd5;
        }

    #reserve_table table .box_line .red a {
        background-color: #f8b5b2;
    }

        #reserve_table table .box_line .red a:hover {
            background-color: #ff9e98;
        }

    #reserve_table table .box_line .blue a {
        background-color: #80e5e6;
    }

        #reserve_table table .box_line .blue a:hover {
            background-color: #4ee0e2;
        }

    #reserve_table table .box_line .black a {
        background-color: #cccccc;
    }

        #reserve_table table .box_line .black a:hover {
            background-color: #adadad;
        }

    #reserve_table table .box_line .reserved a {
        height: 82px;
        text-align: center;
    }
/*---------- 予約編集 ----------*/
.line_tbl .box_time .year,
.line_tbl .box_time .month,
.line_tbl .box_time .day,
.line_tbl .box_time .hour,
.line_tbl .box_time .minut {
    margin: 0 10px 10px 0 !important;
    min-width: 100px !important;
    padding-right: 1.5em;
    position: relative;
}

#main .box_time .year::after,
#main .box_time .month::after,
#main .box_time .day::after {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -0.8em;
}

.line_tbl td .year::after,
.line_tbl .year::after {
    content: "年";
}

.line_tbl td .month::after,
.line_tbl .month::after {
    content: "月";
}

.line_tbl td .day::after,
.line_tbl .day::after {
    content: "日";
}

.line_tbl input[type=date],
.line_tbl input[type=time],
.line_tbl input[type=datetime-local] {
    width: 150px;
    padding: 5px;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    letter-spacing: 1px;
    color: #333;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 5px 0 rgba(204, 204, 204, .5) inset;
    margin-bottom: 10px;
    margin-right: 60px;
}

.line_tbl input[type=datetime-local] {
    width: 200px;
}

.line_tbl select {
    width: 100px;
    padding: 5px;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    letter-spacing: 1px;
    color: #333;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 5px 0 rgba(204, 204, 204, .5) inset;
    margin-bottom: 10px;
    ;
}

.line_tbl .no {
    font-size: 110%;
    width: 100px;
    padding: 5px;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    letter-spacing: 1px;
    margin-bottom: 10px;
    ;
}

/* reserved
============================== */
#reserve_table .reserved {
    position: relative;
}

    #reserve_table .reserved a {
        display: block;
        margin: 5px;
        padding: 30px 5px 5px;
        border: 1px solid #FCF3B8;
        background-color: #FCF3B8;
        color: #333;
        -webkit-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
    }

        #reserve_table .reserved a.active,
        #reserve_table .reserved a:hover {
            border: 1px solid #FF6600;
            background-color: #FBED8E;
            box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
        }

    /* menu */
    #reserve_table .reserved .menu {
        position: absolute;
        top: 5px;
        left: 10px;
    }

    /* type */
    #reserve_table .reserved .type {
        position: absolute;
        top: 5px;
        right: 10px;
    }

    /* name */
    #reserve_table .reserved .name {
        font-size: 64%;
        display: block;
        margin: 0 0 5px;
    }

    /* staff */
    #reserve_table .reserved .staff {
        font-size: 68.7%;
        font-weight: bold;
        padding: 2px 10px;
        border: 2px solid #336633;
        color: #336633;
        background-color: #fff;
        position: relative;
        display: inline-block;
    }

        #reserve_table .reserved .staff .nominate {
            position: absolute;
            left: -15px;
            top: -5px;
        }

/* reserved_icon
============================== */
#main .reserved_icon {
    clear: both;
}

#main #reserved_icon_menu {
    float: right;
    margin: 0 0 10px;
}

    #main #reserved_icon_menu ul {
        margin: 0;
    }

#main .reserved_icon li {
    font-size: 71.4% !important;
}

#main .reserved_icon img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 3px;
}

#main .reserved_icon .box_icon,
#main .reserved_icon .box_type,
#main .reserved_icon .box_icon li,
#main .reserved_icon .box_type li {
    display: inline-block;
    vertical-align: middle;
}

#main .reserved_icon .box_icon {
    border: 1px solid #ccc;
    padding: 5px;
    margin-right: 10px;
}

    #main .reserved_icon .box_icon li,
    #main .reserved_icon .box_type li {
        margin-right: 10px;
    }

        #main .reserved_icon .box_icon li:first-child {
            margin-right: 0;
        }

/* attendance_table
============================== */
#attendance_table {
    overflow: hidden;
}

#main #attendance_table p {
    margin-bottom: 0;
}

#main #attendance_table table {
    width: 1784px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

    #main #attendance_table table th,
    #main #attendance_table table td {
        width: 25px;
        padding: 2px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        font-size: 85.7%;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
    }

    #main #attendance_table table th {
        background-color: #f5f5f5;
    }

    #main #attendance_table table .day th {
        border-bottom: 1px dotted #ccc;
    }

    #main #attendance_table table .sun {
        background-color: #FFEAFF;
    }

    #main #attendance_table table .sat {
        background-color: #E1F5FD;
    }

    #main #attendance_table table .holday {
        background-color: #f5f5f5;
    }

    #main #attendance_table table .month {
        font-weight: bold;
        padding: 4px 10px;
        text-align: left;
    }

    #main #attendance_table table .day th.name,
    #main #attendance_table table .day th.set {
        border-bottom-style: solid;
    }

    #main #attendance_table table .name {
        width: 160px;
    }

    #main #attendance_table table .set {
        width: 60px;
    }

    #main #attendance_table table td.name {
        text-align: left;
    }

    #main #attendance_table table td.name,
    #main #attendance_table table td.set {
        padding: 4px 10px;
    }

    #main #attendance_table table tr:not(.day) th:hover,
    #main #attendance_table table td:not(.holday):hover,
    #main #attendance_table table td:hover {
        background-color: #9C0 !important;
        cursor: pointer;
    }

    #main #attendance_table table td.month:hover,
    #main #attendance_table table td.name:hover,
    #main #attendance_table table td.set:hover {
        background-color: inherit !important;
        cursor: inherit;
    }

/* seting_btn */
#main .seting_btn {
    width: 30px;
    margin: 0 auto;
}

    #main .seting_btn a {
        display: block;
        width: 30px;
        height: 26px;
        background-image: url(../images/icon/setting_btn.png);
        background-repeat: no-repeat;
        background-position: left top;
        -webkit-background-size: 30px auto;
        -moz-background-size: 30px auto;
        background-size: 30px auto;
    }

        #main .seting_btn a:hover {
            background-position: left bottom;
        }

    #main .seting_btn span {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 30px;
        height: 26px;
    }

/* btn_sec
============================== */
#main .btn_sec {
    font-size: 87.5%;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    padding: 5px;
    background-color: #f5f5f5;
    background: -webkit-gradient(linear, center top, center bottom, from(#f5f5f5), to(#fff));
    background: -moz-linear-gradient(center top, #f5f5f5, #fff);
    background: linear-gradient(to bottom, #f5f5f5, #fff);
}

    #main .btn_sec a {
        display: block;
        min-width: 80px;
        padding: 4px 15px;
        color: #fff;
        border: 2px solid #fff;
        -webkit-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
    }

        #main .btn_sec a:hover {
            box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
        }

    #main .btn_sec span {
        display: inline-block;
        padding-top: 2px;
        padding-left: 20px;
        background-position: left center;
        background-repeat: no-repeat;
    }

    /* 再計算 */
    #main .btn_sec.sec_nominate a {
        background: #2B8400;
        background: -moz-linear-gradient(top, #6BA94D 0%, #6BA94D 50%, #2B8400 51%, #2B8400 100%);
        background: -webkit-linear-gradient(top, #6BA94D 0%, #6BA94D 50%, #2B8400 51%, #2B8400 100%);
        background: linear-gradient(to bottom, #6BA94D 0%, #6BA94D 50%, #2B8400 51%, #2B8400 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6BA94D', endColorstr='#2B8400', GradientType=0);
    }

        #main .btn_sec.sec_nominate a:hover {
            background: #6BA94D;
            background: -webkit-gradient(linear, center top, center bottom, from(#2B8400), to(#6BA94D));
            background: -moz-linear-gradient(center top, #2B8400, #6BA94D);
            background: linear-gradient(to bottom, #2B8400, #6BA94D);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2B8400', endColorstr='#6BA94D', GradientType=0);
        }

    #main .btn_sec.sec_nominate span {
        background-image: url(../images/icon/sec_nominate.png);
    }

    /* メニュー選択 */
    #main .btn_sec.sec_menu a {
        background: #202340;
        background: -moz-linear-gradient(top, #3D437A 0%, #3D437A 50%, #202340 51%, #202340 100%);
        background: -webkit-linear-gradient(top, #3D437A 0%, #3D437A 50%, #202340 51%, #202340 100%);
        background: linear-gradient(to bottom, #3D437A 0%, #3D437A 50%, #202340 51%, #202340 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3D437A', endColorstr='#202340', GradientType=0);
    }

        #main .btn_sec.sec_menu a:hover {
            background: #3D437A;
            background: -webkit-gradient(linear, center top, center bottom, from(#202340), to(#3D437A));
            background: -moz-linear-gradient(center top, #202340, #3D437A);
            background: linear-gradient(to bottom, #202340, #3D437A);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#202340', endColorstr='#3D437A', GradientType=0);
        }

    #main .btn_sec.sec_menu span {
        background-image: url(../images/icon/sec_menu.png);
    }

/* inline-radio
============================== */
#main .inline-radio li {
    width: 30px;
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 10px 0;
    text-align: center;
    position: relative;
}

    #main .inline-radio li input {
        width: 100%;
        height: 30px;
        opacity: 0;
        cursor: pointer;
        position: relative;
    }

    #main .inline-radio li label {
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        width: 100%;
        height: 100%;
        background: #44BFDA;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        -webkit-box-shadow: 2px 2px 0 0 #0079B5;
        -moz-box-shadow: 2px 2px 0 0 #0079B5;
        box-shadow: 2px 2px 0 0 #0079B5;
    }

    #main .inline-radio li input:checked + label {
        background-color: #015BA9;
        box-shadow: none;
        -webkit-box-shadow: inset 0 0 8px 0 #003366;
        -moz-box-shadow: inset 0 0 8px 0 #003366;
        box-shadow: inset 0 0 8px 0 #003366;
    }

/* 性別用 */
#main .inline-radio.gender li {
    width: 100px;
}

#main .inline-radio li.gender_man label {
    border: 2px solid #0079B5;
    background-color: #fff;
    color: #0079B5;
    -webkit-box-shadow: 2px 2px 0 0 #D5EAFF;
    -moz-box-shadow: 2px 2px 0 0 #D5EAFF;
    box-shadow: 2px 2px 0 0 #D5EAFF;
}

#main .inline-radio li.gender_man input:checked + label {
    background-color: #0069D2;
    color: #fff;
    background-image: url(../images/icon/checked.png) !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
}

#main .inline-radio li.gender_woman label {
    border: 2px solid #FF6699;
    background-color: #fff;
    color: #FF6699;
    -webkit-box-shadow: 2px 2px 0 0 #FFD0DF;
    -moz-box-shadow: 2px 2px 0 0 #FFD0DF;
    box-shadow: 2px 2px 0 0 #FFD0DF;
}

#main .inline-radio li.gender_woman input:checked + label {
    background-color: #D00068;
    color: #fff;
    -webkit-box-shadow: inset 0 0 8px 0 #66001A;
    -moz-box-shadow: inset 0 0 8px 0 #66001A;
    box-shadow: inset 0 0 8px 0 #66001A;
    background-image: url(../images/icon/checked.png) !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
}

#main .inline-radio li.gender_un label {
    border: 2px solid #9C0;
    background-color: #fff;
    color: #9C0;
    -webkit-box-shadow: 2px 2px 0 0 #EAF4F4;
    -moz-box-shadow: 2px 2px 0 0 #EAF4F4;
    box-shadow: 2px 2px 0 0 #EAF4F4;
}

#main .inline-radio li.gender_un input:checked + label {
    background-color: #093;
    color: #fff;
    -webkit-box-shadow: inset 0 0 8px 0 #033;
    -moz-box-shadow: inset 0 0 8px 0 #033;
    box-shadow: inset 0 0 8px 0 #033;
    background-image: url(../images/icon/checked.png) !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
}

/* 24時間用ボタン
============================== */
#main .tgl_24h_btn {
    width: 120px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    position: relative;
}

    #main .tgl_24h_btn input {
        width: 100%;
        height: 26px;
        opacity: 0;
        cursor: pointer;
        position: relative;
    }

    #main .tgl_24h_btn label {
        font-weight: normal;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        background-color: #fff;
        color: #339900;
        border: 2px solid #339900;
        -webkit-box-shadow: 2px 2px 0 0 #ccc;
        -moz-box-shadow: 2px 2px 0 0 #ccc;
        box-shadow: 2px 2px 0 0 #ccc;
    }

    #main .tgl_24h_btn input:checked + label {
        font-weight: bold;
        border: 2px solid #339900;
        background-color: #339900;
        color: #fff;
        -webkit-box-shadow: inset 0 0 8px 0 #172F17;
        -moz-box-shadow: inset 0 0 8px 0 #172F17;
        box-shadow: inset 0 0 8px 0 #172F17;
        background-image: url(../images/icon/checked.png) !important;
        background-repeat: no-repeat !important;
        background-position: 10px center !important;
    }

/* 担当者用ボタン
============================== */
#main .staff_btn li {
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 10px 0;
    width: 150px;
}

    #main .staff_btn li a {
        display: block;
        padding: 4px 2px 4px 40px;
        border: 2px solid #336633;
        background-color: #fff;
        color: #336633;
        -webkit-box-shadow: 2px 2px 0 0 #ccc;
        -moz-box-shadow: 2px 2px 0 0 #ccc;
        box-shadow: 2px 2px 0 0 #ccc;
    }

        #main .staff_btn li a:active {
            -ms-transform: translateY(2px);
            -webkit-transform: translateY(2px);
            transform: translateY(2px);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
            background-color: #F1FCF4;
        }

    #main .staff_btn li.active a {
        background-color: #336633;
        color: #fff;
        background-image: url(../images/icon/checked.png) !important;
        background-repeat: no-repeat !important;
        background-position: 10px center !important;
    }

    #main .staff_btn li.active2 a {
        border: 2px solid #FF3300;
        background-color: #FFF9F9;
        color: #FF3300;
        background-image: url(../images/icon/nominate.png) !important;
        background-repeat: no-repeat !important;
        background-position: 10px center !important;
    }

    #main .staff_btn li.active a:active {
        background-color: #030;
    }

    #main .staff_btn li.active2 a:active {
        background-color: #FFE3E3;
    }

/* box_time
============================== */
#main div.box_time,
#main .box_time_st,
#main .box_time_ed,
#main .box_time_st p,
#main .box_time_ed p {
    display: inline-block;
    vertical-align: middle;
}

#main .box_time_st {
    position: relative;
    padding-right: 2em;
}

    #main .box_time_st::after {
        content: "～";
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -1em;
        width: 1.5em;
        font-weight: bold;
    }

    #main .box_time_st p,
    #main .box_time_ed p {
        margin: 0 10px 10px 0 !important;
        min-width: 120px;
        padding-right: 1.5em;
        position: relative;
    }

#main .box_time .hour::after,
#main .box_time .minut::after {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -0.6em;
}

#main .box_time .hour::after {
    content: "時";
}

#main .box_time .minut::after {
    content: "分";
}

#main p.hour_check {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

    #main p.hour_check label,
    #main p.hour_check input {
        display: inline-block;
        vertical-align: middle;
    }

    #main p.hour_check input {
        margin: 0 3px 0 10px;
    }

/* col2
============================== */
#main table .col2 p {
    display: table;
    width: 50%;
    float: left;
}

    #main table .col2 p label {
        display: table-cell;
        vertical-align: middle;
        width: 3em;
        padding-right: 10px;
        white-space: nowrap;
    }

/* input
============================== */
#main table input[type='text'],
#main table input[type='tel'],
#main table input[type='email'],
#main table input[type='password'],
#main table textarea {
    width: 90%;
    padding: 5px;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    letter-spacing: 1px;
    color: #333;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 5px 0 rgba(204, 204, 204, .5) inset;
}

#main table input[type='tel'],
#main table input[type='email'] {
    width: 50%;
}

#main table input[type='password'] {
    width: 15em;
}

#main table input.in_10 {
    width: 10em;
}

#main table input.in_20 {
    width: 20em;
}

#main table input[type='text']:focus,
#main table input[type='tel']:focus,
#main table input[type='email']:focus,
#main table input[type='password']:focus,
#main table textarea:focus {
    border: 1px solid #333;
    outline: none;
    box-shadow: 0 0 5px 1px rgba(204, 204, 204, .5);
}

/* error用 */
#main table input[type='text'].in_error,
#main table input[type='tel'].in_error,
#main table input[type='email'].in_error,
#main table input[type='password'].in_error {
    border-color: #da3c41;
    background-color: #FFF0F0;
}

    #main table input[type='text'].in_error:focus,
    #main table input[type='tel'].in_error:focus,
    #main table input[type='email'].in_error:focus,
    #main table input[type='password'].in_error:focus {
        box-shadow: 0 0 5px 1px rgba(218, 60, 65, .5);
    }

/* menu_table
============================== */
#main #menu_table {
    margin: 0 auto 50px;
}

    #main #menu_table table {
        border-top: 1px dotted #000D57;
    }

        #main #menu_table table td {
            padding: 12px 10px;
            vertical-align: middle;
            border-bottom: 1px dotted #000D57;
        }

        #main #menu_table table tr:nth-child(odd) td {
            background-color: #FFFEF0;
        }

        #main #menu_table table .select,
        #main #menu_table table .time,
        #main #menu_table table .icon {
            width: 60px;
            text-align: center;
            white-space: nowrap;
        }

        #main #menu_table table .select {
            width: 20px;
        }

        #main #menu_table table .time {
            text-align: right;
        }

        #main #menu_table table .list {
            width: auto;
            font-size: 114.3%;
            font-weight: bold;
        }

/* cal_update
============================== */
#main .cal_update {
    float: right;
    font-size: 71.4%;
    display: inline-block;
    padding: 4px 10px 2px;
    background-color: #015BA9;
    color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

/* cal_table
============================== */
#cal_table {
    letter-spacing: -.4em;
}

    #cal_table .cal {
        letter-spacing: normal;
        display: inline-block;
        vertical-align: top;
        width: 25%;
        padding: 0 10px 30px;
        position: relative;
    }

#main #cal_table .cal_update {
    float: none;
    position: absolute;
    top: 0.2em;
    right: 10px;
    z-index: 5;
}

#cal_table table {
    width: 100%;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
}

    #cal_table table caption {
        text-align: left;
        font-size: 20px;
        font-weight: bold;
        position: relative;
        padding-left: 20px;
    }

        #cal_table table caption::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -4px;
            width: 12px;
            height: 6px;
            background: #015BA9;
        }

    #cal_table table th,
    #cal_table table td {
        width: 40px;
        text-align: center;
        border-right: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
        padding: 10px 2px;
    }

    #cal_table table th {
        background-color: #F5F5F5;
    }

        #cal_table table th.sun {
            background-color: #FFEEEF !important;
        }

            #cal_table table th.sun,
            #cal_table table td.sun,
            #cal_table table th.sun a,
            #cal_table table td.sun a {
                color: #E60012 !important;
            }

        #cal_table table th.sat {
            background-color: #E8F9FF !important;
        }

            #cal_table table th.sat,
            #cal_table table td.sat,
            #cal_table table th.sat a,
            #cal_table table td.sat a {
                color: #015BA9 !important;
            }

        #cal_table table th a,
        #cal_table table td a {
            display: block;
            margin: -10px -2px;
            padding: 10px 2px;
            text-decoration: none;
        }

        #cal_table table th a {
            color: #333;
        }

            #cal_table table th a:hover {
                background-color: #015BA9;
                color: #fff !important;
            }

    #cal_table table td a {
        color: #333;
        position: relative;
    }

        #cal_table table td a.on::after {
            content: "";
            position: absolute;
            right: 2px;
            top: 2px;
            width: 12px;
            height: 12px;
            background: url(../images/icon/reserve_on.png) no-repeat;
            -webkit-background-size: 100% auto;
            -moz-background-size: 100% auto;
            background-size: 100% auto;
        }

    #cal_table table td.day a {
        background-color: #FFEEEF;
        color: #E60012;
    }

    #cal_table table td a:hover {
        background-color: #015BA9 !important;
        color: #fff !important;
    }

    #cal_table table .holday,
    #cal_table table .holday a {
        background-color: #F5F5F5 !important;
    }

    #cal_table table .today {
        font-weight: bold;
    }

        #cal_table table .today a {
            background-image: url(../images/icon/today_bg.png);
            background-repeat: no-repeat;
            background-position: center center;
            -webkit-background-size: auto 100%;
            -moz-background-size: auto 100%;
            background-size: auto 100%;
        }

#cal_table h2.year {
    letter-spacing: normal;
    margin: 0 0 30px;
}

    #cal_table h2.year span {
        display: inline-block;
        vertical-align: baseline;
        padding: 0 10px;
        font-size: 200%;
    }

/* ==================================================
メニュー
================================================== */
#main .menu_tbl {
    border: 1px solid #ccc;
    margin: 0 0 50px;
}

    #main .menu_tbl p {
        margin: 0;
    }

    #main .menu_tbl th,
    #main .menu_tbl td {
        border: 1px solid #ccc;
        padding: 7px 5px;
        line-height: 1.2;
        font-size: 85.7%;
        text-align: center;
        vertical-align: middle;
    }

    #main .menu_tbl th {
        background-color: #f5f5f5;
    }

    #main .menu_tbl .order,
    #main .menu_tbl .icon {
        width: 9%;
        white-space: nowrap;
    }

    #main .menu_tbl .name {
        width: 25%;
    }

    #main .menu_tbl .btn {
        width: 12%;
    }

    #main .menu_tbl .time,
    #main .menu_tbl .price,
    #main .menu_tbl .riyo {
        width: 15%;
    }

        #main .menu_tbl .price input {
            text-align: center;
        }

    #main .menu_tbl .tr_del td {
        background-color: #eee;
    }

/*---------- 車両管理 モック用 ----------*/

/* 新規追加ボタン */
#main .position_relative {
    position: relative;
}

#main .top_btn {
    position: absolute;
    /* display: flex;
	justify-content: right; */
    /* margin-bottom: -30px; */
    right: 0px;
    bottom: 15px;
    /*z-index: 10000;*/
}

    #main .top_btn p {
        width: auto;
        margin: 0px !important;
    }

    #main .top_btn a {
        height: 40px;
        width: 200px;
        padding: 2px 0;
    }

/* 検索機能 */
.table_search th {
    background-color: #ecfced !important;
}

.table_search td {
    height: 50px !important;
}

.box_btn {
    padding: 0;
    text-align: center;
}

.table_search .box_btn p.submit {
    width: auto;
}

    .table_search .box_btn p.submit a {
        width: 100px !important;
        height: 30px !important;
        border: 2px solid #54adc9;
        background-color: #11a7ac;
        -webkit-box-shadow: 4px 4px 0 0 #D6EBCC;
        -moz-box-shadow: 4px 4px 0 0 #D6EBCC;
        box-shadow: 4px 4px 0 0 #D6EBCC;
        padding: 0px 0px;
    }

        .table_search .box_btn p.submit a:hover {
            background: #397688;
            background: -webkit-gradient(linear, center top, center bottom, from(#397688), to(#54adc9));
            background: -moz-linear-gradient(center top, #397688, #54adc9);
            background: linear-gradient(to bottom, #397688, #54adc9);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#397688', endColorstr='#54adc9', GradientType=0);
        }

.table_search .box_btn span {
    background-image: url(../images/icon/search_icon.png) !important;
    padding: 1px 0 0 25px;
}

.table_search .serch_th {
    width: 10%;
}

/* 一覧機能 */
/*----------------- テーブル内スクロール -----------------*/

/* テーブル全体のコンテナ */
.table-container {
    overflow-y: auto;
    max-height: calc(100vh - 420px);
    border: 1px solid #ccc !important;
}

.vehicle-table-container {
    overflow-y: auto;
    max-height: calc(100vh - 380px);
    border: 1px solid #ccc !important;
}

.user-table-container {
    overflow-y: auto;
    max-height: calc(100vh - 380px);
    border: 1px solid #ccc !important;
}

.usermaster-table-container {
    overflow-y: auto;
    max-height: calc(100vh - 480px);
    border: 1px solid #ccc !important;
}

.table-container-reserved {
    overflow-y: auto;
    max-height: calc(100vh - 325px);
    border: 1px solid #ccc !important;
}

.table-container-master {
    overflow-y: auto;
    max-height: calc(100vh - 250px);
    border: 1px solid #ccc !important;
}

.table_scroll {
    margin-top: -2px !important;
}

#reserve_table table {
    table-layout: fixed;
}

    /* テーブルのヘッダー */
    .table_scroll th {
        position: sticky;
        top: 0;
        background-color: #f5f5f5;
        z-index: 1;
        border-bottom: 1px solid #ccc !important;
    }

    .table_scroll td,
    .table_scroll th {
        border: 1px solid #ccc !important;
    }

        .table_scroll td:last-of-type th {
            border-bottom: none;
        }

        .table_scroll td:last-of-type {
            border-right: none;
        }


/* --------------------------------------------------- */

#main .table_search{
    margin: 20px 10px 0px 0px;
}

#main table.menu_tbl {
    margin-bottom: 10px;
}

#main table.table_scroll {
    margin-bottom: 0px !important;
}

#main table.menu_tbl td {
    height: 100px;
}

    #main table.menu_tbl td p {
        font-size: 143%;
        margin: 0 auto;
        text-decoration: none;
        min-height: 30px;
        line-height: 30px;
        overflow: hidden;
        font-weight: bold;
        text-align: center;
        color: #666 !important;
    }

    #main table.menu_tbl td img {
        max-height: 100px;
        width: auto;
    }

#main table .car_namber p {
    font-size: 150%;
}

.menu_tbl .box_time_ed p {
    min-width: 40px !important;
}

.menu_tbl .box_time_ed {
    padding-top: 10px;
}

.menu_tbl td .yen::after,
.carmaster .yen::after {
    content: "円";
}

.menu_tbl td .year::after,
.carmaster .year::after {
    content: "年";
}

.menu_tbl td .month::after,
.carmaster .month::after {
    content: "月";
}

.menu_tbl td .day::after,
.carmaster .day::after {
    content: "日";
}

#main td .yen,
.carmaster .yen {
    position: relative;
    min-width: 90px;
    padding-right: 1.5em;
}

.carmaster .box_time .year,
.carmaster .box_time .month,
.carmaster .box_time .day {
    position: relative;
    margin: 0px 5px 0px 0px !important;
    min-width: 40px;
    padding-right: 1.5em;
}

.carmaster .box_time_ed a {
    min-width: 100px;
}

#main td .yen::after {
    position: absolute;
    top: 50%;
    margin-top: -0.8em;
}

#main td .yen::after,
#main .box_time .year::after,
#main .box_time .month::after,
#main .box_time .day::after {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -0.8em;
}

#main .row_btn li.add a {
    background-image: url(../images/icon/edit_icon.png) !important;
}

.box_btn p.submit span.new {
    background-image: url(../images/icon/new_icon.png);
}

/* #main td ul.row_btn{
	width: 55px;
} */

/* #main td ul li.del{
	float: none !important;
	margin-right: auto;
    margin-left: auto;
} */


#container select {
    width: 100px;
    padding: 5px;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    letter-spacing: 1px;
    color: #333;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 5px 0 rgba(204, 204, 204, .5) inset;
}

.carmaster .namber {
    width: 150px !important;
}

.carmaster p.number input {
    width: 150px !important;
}

.carmaster select {
    width: 100px;
    padding: 5px;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    letter-spacing: 1px;
    color: #333;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 5px 0 rgba(204, 204, 204, .5) inset;
}

.carmaster .car_image {
    height: 120px;
    width: 180px;
    background-image: url(../images/main//car_noimage.png);
    background-size: 180px 120px;
    display: inline-block;
    cursor: pointer;
    border: 1px solid black;
}

.carmaster .car1_1 {
    background-image: url(../images/main/car1.jpg);
}

.carmaster .car1_2 {
    background-image: url(../images/main/car1_2.jpg);
}

.carmaster .car1_3 {
    background-image: url(../images/main/car1_3.jpg);
}

.carmaster .car1_4 {
    background-image: url(../images/main/car1_4.jpg);
}

.carmaster .car_image input {
    display: none;
}

.carmaster .price {
    width: 120px !important;
}

.carmaster #Vehicle_VehicleFee {
    width: 120px !important;
}

/* 利用者一覧 モック用 */
.user_list .tell {
    min-width: 160px;
}

.user_list .name {
    min-width: 120px;
}

.user_list .organization {
    min-width: 120px;
}

.user_list .division {
    min-width: 100px;
}

.usermaster .organization {
    background-color: #d2ecf3 !important;
}

.usermaster .pref {
    width: auto !important;
}

.usermaster .toggle_btn {
    width: 150px;
}

.usermaster .btn_left {
    margin-left: 0px;
}

.usermaster .tokki {
    background-color: #e4dcd6 !important;
}

.usermaster textarea {
    height: 150px !important;
}

.usermaster .menkyo {
    width: 40%;
}

.usermaster .tell {
    width: 80px !important;
}

.usermaster sprit {
    margin-right: 5px;
    margin-left: 10px;
}

/* マスタ管理 モック用 */
.master .table-container-master {
    width: 50% !important;
    margin-left: auto;
    margin-right: auto;
}

    /* .master .table-container p{
	width: 50%;
	text-align: left !important;
} */

    .master .table-container a.user {
        text-decoration: underline;
    }

.master .table-container span {
    color: #666;
}

/* マスタ管理_ユーザーマスタ モック用 */
.usermaster .table_search th.selectbox {
    width: 150px !important;
}

.usermaster .table_search select {
    width: 110px !important;
}

.usermaster .table_scroll td {
    height: 50px !important;
}

.usermaster > #main > .box_btn {
    margin-top: 30px !important;
}

/* マスタ管理_ユーザーマスタ_新規 モック用 */
/* マスタ管理_ユーザーマスタ_編集 モック用 */
.usermaster_add .add_sch,
.usermaster_edit .add_sch {
    margin-right: 30px !important;
}

.usermaster_add .box_btn,
.usermaster_edit .box_btn {
    margin-top: 30px !important;
}

.usermaster_add select,
.usermaster_edit select {
    width: 120px !important;
}

/* ==================================================
スタッフ情報
================================================== */
#main .staff_tbl {
    border: 1px solid #ccc;
    margin: 0 0 50px;
}

    #main .staff_tbl p {
        margin: 0;
    }

    #main .staff_tbl th,
    #main .staff_tbl td {
        border: 1px solid #ccc;
        padding: 7px 5px;
        line-height: 1.2;
        font-size: 85.7%;
        vertical-align: middle;
        text-align: center;
    }

    #main .staff_tbl th {
        background-color: #f5f5f5;
    }

    #main .staff_tbl td {
        padding: 7px 5px 0;
    }

        #main .staff_tbl td p {
            margin-bottom: 7px;
        }

        #main .staff_tbl td.name {
            text-align: left;
        }

            #main .staff_tbl td.name p label {
                width: 2em;
                text-align: center;
            }

    #main .staff_tbl .num {
        width: 2%;
        white-space: nowrap;
    }

    #main .staff_tbl .chg {
        width: 4%;
        white-space: nowrap;
    }

    #main .staff_tbl .name {
        width: 30%;
    }

    #main .staff_tbl .img {
        width: 20%;
    }

    #main .staff_tbl .position {
        width: 20%;
    }

    #main .staff_tbl .name2 {
        width: 10%;
    }

    #main .staff_tbl .img2 {
        width: 10%;
    }

    #main .staff_tbl .comment {
        width: 20%;
    }

    #main .staff_tbl .keep {
        width: 13%;
    }

    #main .staff_tbl .btn {
        width: 10%;
    }

    #main .staff_tbl td.name p {
        display: table;
        width: 100%;
    }

        #main .staff_tbl td.name p span {
            display: table-cell;
            vertical-align: top;
            width: 50%;
        }

        #main .staff_tbl td.name p label {
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
        }

        #main .staff_tbl td.name p input {
            max-width: 80%;
        }

    #main .staff_tbl .img img,
    #main .staff_tbl .img2 img {
        margin: 0;
    }

    #main .staff_tbl td.img p {
        display: inline-block;
        vertical-align: top;
    }

    #main .staff_tbl .img ul {
        display: inline-block;
        vertical-align: top;
        width: 60px;
        font-size: 85.7%;
    }

    #main .staff_tbl .img li {
        margin: 0 0 7px;
    }

        #main .staff_tbl .img li a {
            display: block;
            text-align: center;
            text-decoration: none;
            padding: 5px 10px;
            color: #fff;
            box-shadow: 2px 2px 0 0 #eee;
        }

    #main .staff_tbl .img .set_btn a {
        background: #53a318;
    }

        #main .staff_tbl .img .set_btn a:hover {
            background: #6C3;
        }

    #main .staff_tbl .img .clr_btn a {
        background: #666;
    }

        #main .staff_tbl .img .clr_btn a:hover {
            background: #999;
        }

    #main .staff_tbl td .kana {
        font-size: 71.4%;
    }

    #main .staff_tbl textarea {
        resize: none;
    }

    #main .staff_tbl th .must {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-right: 1.5em;
    }

        #main .staff_tbl th .must::after {
            content: "※";
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -0.6em;
            margin-bottom: 0;
            color: #C00;
            font-weight: bold;
        }

    #main .staff_tbl th .icon_line {
        display: inline-block;
        vertical-align: middle;
    }

        #main .staff_tbl th .icon_line .must {
            position: static;
            display: inline-block;
            vertical-align: middle;
        }

/* ==================================================
btn
================================================== */
/* dtl_btn
============================== */
#main .dtl_btn {
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
    font-size: 60%;
    font-weight: normal;
    line-height: 1.2;
}

    #main .dtl_btn a {
        display: block;
        text-align: center;
        text-decoration: none;
        min-width: 120px;
        padding: 3px 10px;
        border: 1px solid #0059A9;
        background-color: #0059A9;
        color: #fff;
        box-shadow: 2px 2px 0 0 #eee;
    }

        #main .dtl_btn a:hover {
            background-color: #06C;
        }

        #main .dtl_btn a:active {
            -ms-transform: translateY(2px);
            -webkit-transform: translateY(2px);
            transform: translateY(2px);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
            background-color: #06C;
        }

/* tg-list-item
============================== */
.tg-list-item {
    position: relative;
}

.tgl {
    display: none;
}

    .tgl + .tgl-btn {
        background: #f5f5f5;
        border-radius: 2em;
        padding: 4px;
        transition: all .4s ease;
        border: 1px solid #e8eae9;
        outline: 0;
        display: block;
        width: 100px;
        height: 34px;
        margin: 0 auto;
        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .tgl + .tgl-btn::after {
            content: "";
            position: relative;
            display: block;
            width: 24px;
            height: 24px;
        }

.tgl-btn::after {
    border-radius: 2em;
    background: #fbfbfb;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
}

.tgl:checked + .tgl-btn::after {
    left: 66px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.tgl + .tgl-btn::after {
    left: 0;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, .3) inset;
}

.tgl + .tgl-btn::before {
    position: absolute;
    font-weight: bold;
}

.tgl:checked + .tgl-btn {
    background: #F3C500;
    border: 1px solid #F3C500;
}

/* tgl-riyo */
.tgl-riyo + .tgl-btn::before {
    content: "いいえ";
    letter-spacing: 0.2em;
    left: 38px;
    top: 9px;
}

.tgl-riyo:checked + .tgl-btn::before {
    content: "はい";
    letter-spacing: 0.5em;
    left: 26px;
}

/* row_btn
============================== */
#main .row_btn {
    width: 120px;
    margin: 0 auto;
}

    #main .row_btn li {
        width: 55px;
    }

        #main .row_btn li.add {
            float: left;
        }

        #main .row_btn li.del {
            float: right;
        }

        #main .row_btn li a {
            display: block;
            width: 100%;
            height: 28px;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 0 0 #eee;
            background-color: #f5f5f5;
            background-position: center center;
            background-repeat: no-repeat;
            -webkit-background-size: 18px 18px !important;
            -moz-background-size: 18px 18px !important;
            background-size: 18px 18px !important;
        }

        #main .row_btn li.add a {
            background-image: url(../images/icon/add_icon.png);
        }

        #main .row_btn li.del a {
            background-image: url(../images/icon/del_icon.png);
        }

        #main .row_btn li a:active {
            -ms-transform: translateY(2px);
            -webkit-transform: translateY(2px);
            transform: translateY(2px);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
        }

        #main .row_btn li.add a:active {
            background-color: #FFF4F4 !important;
            border: 1px solid #d81b60;
        }

        #main .row_btn li.del a:active {
            background-color: #EEFFF5 !important;
            border: 1px solid #51A251;
        }

        #main .row_btn li .checked {
            font-weight: bold;
            color: #fff;
        }

        #main .row_btn li.add .checked {
            background-color: #d81b60;
            background-image: url(../images/icon/add_icon_on.png);
            border: 1px solid #903;
        }

        #main .row_btn li.del .checked {
            background-color: #51A251;
            background-image: url(../images/icon/del_icon_on.png);
            border: 1px solid #063;
        }

        #main .row_btn li.add .checked:active {
            background-color: #d81b60 !important;
            border: 1px solid #903;
        }

        #main .row_btn li.del .checked:active {
            background-color: #51A251 !important;
            border: 1px solid #063;
        }

        #main .row_btn li span {
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            display: block;
        }

/* order_btn
============================== */
#main .order_btn li {
    display: inline-block;
    vertical-align: top;
}

    #main .order_btn li.up {
        margin-right: 5px;
    }

    #main .order_btn li a {
        display: block;
        width: 20px;
        height: 20px;
        margin: 0 auto;
        box-shadow: 2px 2px 0 0 #eee;
        color: #fff;
        background-color: #EE9321;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #main .order_btn li.up a {
        background-image: url(../images/icon/arrow_up.png);
    }

    #main .order_btn li.down a {
        background-image: url(../images/icon/arrow_down.png);
    }

    #main .order_btn li span {
        width: 20px;
        height: 20px;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
    }

    #main .order_btn li a:active {
        -ms-transform: translateY(2px);
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
        background-color: #FF6600 !important;
    }

/* switch
============================== */
#main .switch {
    width: 10em;
    text-align: center;
}

    #main .switch input[type=checkbox] {
        display: none;
    }

    #main .switch label {
        width: 8em;
        font-weight: bold;
        cursor: pointer;
    }

        #main .switch label::before,
        #main .switch label::after {
            padding: 4px 10px;
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2) inset;
            border: 2px solid #0059A9;
            -webkit-box-shadow: 2px 2px 0 0 #ccc;
            -moz-box-shadow: 2px 2px 0 0 #ccc;
            box-shadow: 2px 2px 0 0 #ccc;
        }

        #main .switch label::before {
            content: '使用する';
            background: #C30 url(../images/icon/checked.png) no-repeat 10px center;
            color: #fff;
        }

        #main .switch label::after {
            content: '使用しない';
            background: #fff;
            color: #0059A9;
        }

    #main .switch input + label::before,
    #main .switch input:checked + label::after {
        opacity: 0;
        display: none;
    }

    #main .switch input:checked + label::before,
    #main .switch input + label::after {
        opacity: 1;
        display: block;
    }

    #main .switch input:checked + label::before,
    #main .switch input:checked + label::after {
        background: #0059A9 url(../images/icon/checked.png) no-repeat 15px 0.6em;
        color: #fff;
        box-shadow: none;
        -webkit-box-shadow: inset 0 0 8px 0 #003366;
        -moz-box-shadow: inset 0 0 8px 0 #003366;
        box-shadow: inset 0 0 8px 0 #003366;
    }

/* ==================================================
progress_bar
================================================== */
.progress_bar {
    margin: 0 0 50px;
    position: relative;
    z-index: 0;
}

    .progress_bar ol {
        display: flex;
        justify-content: space-between;
        list-style: none;
        padding: 0;
    }

    .progress_bar li {
        flex: 2;
        position: relative;
        padding: 0 0 14px 0;
        line-height: 1.5;
        color: #333;
        font-weight: bold;
        white-space: nowrap;
        overflow: visible;
        min-width: 0;
        text-align: center;
        border-bottom: 4px solid #e8e8e8;
    }

        .progress_bar li:first-child,
        .progress_bar li:last-child {
            flex: 1;
        }

        .progress_bar li:first-child {
            text-align: left;
        }

        .progress_bar li:last-child {
            text-align: right;
        }

        .progress_bar li:before {
            content: "";
            display: block;
            width: 16px;
            height: 16px;
            background-color: #e8e8e8;
            border-radius: 50%;
            border: 4px solid #fff;
            position: absolute;
            left: calc(50% - 7px);
            bottom: -9px;
            z-index: 3;
            transition: all .2s ease-in-out;
        }

        .progress_bar li:first-child::before {
            left: 0;
        }

        .progress_bar li:last-child::before {
            right: 0;
            left: auto;
        }

    .progress_bar span {
        transition: opacity .3s ease-in-out;
    }

    .progress_bar li:not(.is-active) span {
        opacity: .3;
        font-weight: normal;
    }

    .progress_bar .is-complete span {
        opacity: .7 !important;
    }

    .progress_bar .is-complete:not(:first-child)::after,
    .progress_bar .is-active:not(:first-child)::after {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        bottom: -2px;
        left: -50%;
        z-index: 2;
        border-bottom: 4px solid #53a318;
    }

    .progress_bar li:last-child span {
        width: 200%;
        display: inline-block;
        position: absolute;
        left: -100%;
    }

    .progress_bar .is-complete:last-child::after,
    .progress_bar .is-active:last-child::after {
        width: 200%;
        left: -100%;
    }

    .progress_bar .is-complete:before {
        background-color: #53a318;
    }

    .progress_bar .is-active::before,
    .progress_bar .is-hovered::before {
        background-color: #fff;
        border-color: #53a318;
    }

    .progress_bar .is-hovered::before {
        transform: scale(1.33);
    }

/* ==================================================
media screen
================================================== */
@media screen and (max-width : 1024px) and (min-width: 769px) {
    #reserve_head_day {
        padding-left: 0;
        text-align: left;
    }

    #date_set .date > div p {
        font-size: 114.3%;
        padding: 10px 10px;
    }

    #date_set .date a {
        text-align: center;
    }
}

@media screen and (max-width : 1280px) and (min-width: 1025px) {
    #cal_table .cal {
        width: 33.3%;
    }
}

@media screen and (max-width : 1024px) and (min-width: 769px) {
    #cal_table .cal {
        width: 50%;
    }
}

/* ==================================================
tooltip
================================================== */
#main .tooltip {
    margin-bottom: 0 !important;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

    #main .tooltip .btn {
        position: relative;
        background: url(../images/icon/question.png) no-repeat center center;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
        width: 25px;
        height: 25px;
        cursor: pointer;
    }

    #main .tooltip.type_s .btn {
        background: url(../images/icon/question_s.png) no-repeat center center;
        width: 18px;
        height: 18px;
    }

    #main .tooltip .balloon {
        width: 400px;
        margin: 0 !important;
        font-weight: normal !important;
        font-size: 11px;
        position: absolute;
        z-index: 1;
        top: -12px;
        right: 30px;
        visibility: hidden;
        padding: .5em 1em;
        transition: opacity 1s;
        text-align: left;
        opacity: 0;
        color: #ffffff;
        border-radius: 6px;
        background: #333;
    }

    #main .tooltip.type_s .balloon {
        top: -24px;
        width: 300px;
    }

#main .balloon::after {
    content: "";
    position: absolute;
    top: 40%;
    left: 102%;
    margin-left: -8px;
    border: 5px solid transparent;
    border-left-color: #333;
    z-index: 10;
}

#main .tooltip:hover .balloon {
    visibility: visible;
    opacity: 1;
}

#main .bk-balloon {
    display: none;
}

/* ==================================================
modal
================================================== */
#modal-content {
    width: 50%;
    margin: 0;
    padding: 40px 20px;
    border: 4px solid #04A2DF;
    background: #fff;
    position: fixed;
    display: none;
    z-index: 2;
}

#modal-content-innar {
    text-align: center;
    margin: 0 auto;
    width: 80%;
}

#modal-overlay {
    z-index: 1;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0, 0, 0, 0.8);
}

#modal-content .btn {
    margin-top: 40px;
}

    #modal-content .btn p {
        display: inline-block;
        vertical-align: top;
        margin: 0 5px;
        width: 40%;
        font-weight: bold;
    }

        #modal-content .btn p a {
            display: block;
            text-decoration: none;
            color: #fff;
            padding: 8px 5px;
        }

#modal-content .yes_btn a {
    background-color: #3B5998;
    -webkit-box-shadow: 4px 4px 0 0 #D8DEEA;
    -moz-box-shadow: 4px 4px 0 0 #D8DEEA;
    box-shadow: 4px 4px 0 0 #D8DEEA;
}

    #modal-content .yes_btn a:hover {
        background-color: #006C9E;
    }

#modal-content .no_btn a {
    background-color: #676767;
    -webkit-box-shadow: 4px 4px 0 0 #eee;
    -moz-box-shadow: 4px 4px 0 0 #eee;
    box-shadow: 4px 4px 0 0 #eee;
}

    #modal-content .no_btn a:hover {
        background-color: #888;
    }

/* ==================================================
clearfix
================================================== */
#main .reserved_icon:after,
#main .box_btn:after,
#main .row_btn:after {
    content: "";
    display: table;
    clear: both;
}