@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 30px;
}

    #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: auto;
}
/* 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 30px;
}

#main .line_tbl.amount {
    width:50%;
    margin-left:auto;
}

#main .line_tbl.amount th {
    text-align:right;
}

#main .line_tbl.amount td {
    text-align:center;
}

    #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 td.col p.calendar {
      width: 55px;
}

#main .line_tbl td.col p.calendar  a {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 25px 25px !important;
      background-image: url(../images/icon/calendar_icon.png);
}

#main .line_tbl td.col p.calendar .toggle_btn:active {
    background-color: #FDC3f6 !important;
    border: 1px solid #FF57EB;
}

    #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 textarea {
    width: 50%;
    height: 7em;
}

#main .line_tbl .price input {
    width: 20%;
}

#main .line_tbl p.birth input.year {
    width: 4em;
}

#main .line_tbl p.birth input.year::-webkit-input-placeholder {
    text-align:left;
}

#main .line_tbl p.birth input {
    width: 2.5em;
    text-align: right;
}


#main .line_tbl p.date {
    width: 10%;
    min-width:5em;
}

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

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

    #main .line_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 .line_tbl .img ul {
    display: inline-block;
    vertical-align: top;
    width: 60px;
    font-size: 85.7%;
}

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

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

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

    #main .line_tbl .img .clr_btn a:hover {
        background: #999;
    }
/* ==================================================
予約管理
================================================== */
/* 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: 1;
}

#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: 3487px;
        border-top: 1px solid #ccc;
        table-layout: fixed;
    }

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

        #reserve_table table td.reserve_td {
            width: 54px;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            position: relative;
        }

        #reserve_table table.not_business_day td {
            width: 54px;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            position: relative;
            color: #ccc;
            background-color: #f5f5f5;
        }

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

        #reserve_table table td.num {
            background-color: #f5f5f5;
            z-index: 1;
            position: sticky;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }

        #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;
            }

            #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;
            }
    /* 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);
            }

            .reserved_off {
                border: 1px solid #FCF3B8;
                background-color: #FCF3B8;
            }

            .reserved_off_active,
            .reserved_off:hover {
                border: 1px solid #FF6600;
                background-color: #FBED8E;
                box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
            }
    /* reserved_temp */
    #reserve_table .reserved_temp {
        position: relative;
    }

        #reserve_table .reserved_temp a {
            display: block;
            min-height: 82.2px;
            margin: 5px;
            padding: 30px 5px 5px;
            border: 1px solid #d8ffb2;
            background-color: #e0ffc1;
            color: #333;
            -webkit-transition: .2s ease-in-out;
            transition: .2s ease-in-out;
        }

            #reserve_table .reserved_temp a.active,
            #reserve_table .reserved_temp a:hover {
                border: 1px solid #32cd32;
                background-color: #adffad;
                box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
            }

            .reserved_on {
                border: 1px solid #d8ffb2;
            background-color: #e0ffc1;
            }

            .reserved_on_active,
            .reserved_on:hover {
                border: 1px solid #32cd32;
                background-color: #adffad;
                box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
            }

        #reserve_table .reserved_temp .name {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    /* not_reserved */
    #reserve_table .not_reserved a {
        display: block;
        margin: 5px;
        padding: 50px 5px 5px;
    }
    /* 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: 87.5%;
        display: block;
        margin: 0 0 10px;
    }
    /* 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;
    }

    .reserved_check {
        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;
        }
/* description
============================== */

#main .description h2 {
    font-size: 150%;
}

#main .description p {
    margin: 0;
    text-align: right;
}
/* 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 td a {
            display: block;
            height: 100%;
            width: 100%;
        }

    #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:hover,
        #main #attendance_table table td.set:not(a):hover
        #main #attendance_table table td a:hover {
            background-color: #9C0;
            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;
            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;
}
/* 担当者用ボタン
============================== */
#main .staff_btn li {
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 10px 0;
    width: 150px;
}

#main .staff_btn li label {
    /*ラベルの表示が中央寄せでなくなってしまう*/
    /*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 input:checked + label {
    -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 input:checked + label {
    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.nominate input:checked + label {
    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 input:checked + label {
    background-color: #030;
}

#main .staff_btn li.nominate input:checked + label {
    background-color: #FFE3E3;
}
/* ============================== 
inline-check
============================== */
#main .inline-check li {
    display: inline-block;
    margin: 0 10px 10px 0;
}

/* ============================== 
表示ボタン
============================== */

#main .icon li {
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 10px 0;
    width: 150px;
}

    #main .icon li label {
        /*ラベルの表示が中央寄せでなくなってしまう*/
        /*display:block;
	    padding:4px 2px 4px 40px;*/
        border: 2px solid #0079B5;
        background-color: #fff;
        color: #0079B5;
        -webkit-box-shadow: 2px 2px 0 0 #ccc;
        -moz-box-shadow: 2px 2px 0 0 #ccc;
        box-shadow: 2px 2px 0 0 #ccc;
    }

    #main .icon li input:checked + label {
        -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 .icon li input:checked + label {
        background-color: #015BA9;
        color: #fff;
        background-image: url(../images/icon/checked.png) !important;
        background-repeat: no-repeat !important;
        background-position: 10px center !important;
    }

/* 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;
    }
/* box_count
============================== */
#main .box_count {
    min-width: 150px;
}

#main .box_count p {
    display: inline-block;
    vertical-align: middle;
}

#main .box_count p {
     margin: 0 10px 10px 0 !important;
     min-width: 60px;
     position: relative;
}
/* 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: 40%;
}

#main .line_tbl #confirmPath {
    width: 15em;
    background-color: transparent;
    border: 1px hidden white;
    padding: 5px;
    box-shadow: none;
}

#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 textarea.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 textarea.in_error:focus,
    #main table input[type='password'].in_error:focus {
        box-shadow: 0 0 5px 1px rgba(218,60,65, .5);
    }

/* menulist_table
============================== */
#menulist_table {
    letter-spacing: -.4em;
    margin: 0 auto 50px;
}

#main #menulist_table table td {
    padding: 12px 10px;
    vertical-align: middle;
    border-style: none;
}

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

#menulist_table table caption {
    text-align: left;
    background: url(../images/main/h1_bg.gif) repeat-x left bottom;
    font-size: 36px;
    font-weight: bold;
    position: relative;
    padding-left: 20px;
}

#menulist_table table .add_menu {
    display: inline-block;
    text-align: center;
    margin: auto;
    position: relative;
}

    #menulist_table table .add_menu .toggle_btn {
        max-width: 300px;
        padding-left: 10px;
        padding-right: 10px;
    }

/* doc
============================== */
#main #doc table th {
    -webkit-print-color-adjust: exact;
    background-color: #f5f5f5 !important;
    padding:5px;
}
#main #doc table tr {
    min-height:20px;
    max-height:50px;
}

#main #doc table td {
   padding:3px;
}
#main #doc table p {
    padding:5px;
    margin: 0px;
}


#main #docfooter p {
    height:15px;
   margin-bottom:0px;
}
/* docsignature_table
============================== */

#docsignature_table {
    letter-spacing: -.4em;
    margin: 0 auto 50px;
    table-layout:auto;
}
#main #docsignature_table table tr {
    margin-bottom:0px;
}

#main #docsignature_table table td {
    padding: 0px 0px;
    border-style: none;
}

    #main #docsignature_table table td.head {
        width: 80px;
        margin: 0;
    }
    
    #main #docsignature_table table td.value {
        width: 200px;
        text-align: left;
        margin:0;
    }
    #main #docsignature_table table td.adress {
        text-align:right;
    }
    
#docsignature_table .cal {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    width: 50%;
    padding: 0 10px 30px;
    position: relative;
}
#main #docsignature_table .sign_table {
    letter-spacing: normal;
    vertical-align: middle;
    border-style: initial;
    border: 1px solid #ccc;
    padding: 0 10px 30px;
    position: relative;
}

#main .sign_table {
    border: 1px solid #ccc;
    margin: 0 0 30px;
    table-layout: fixed;
    width:20%;
}

    #main .sign_table p {
        width:auto;
        margin: 0;
    }

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


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

        #main .sign_table td p {
            text-align: center;
        }

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



#docsignature_table table caption {
    text-align: left;
    background: url(../images/main/h1_bg.gif) repeat-x left bottom;
    font-size: 36px;
    font-weight: bold;
    position: relative;
    padding-left: 20px;
}

#docsignature_table table .add_menu {
    display: inline-block;
    text-align: center;
    margin: auto;
    position: relative;
}

    #docsignature_table table .add_menu .toggle_btn {
        max-width: 300px;
        padding-left: 10px;
        padding-right: 10px;
    }
/*guide_table
============================== */
#main #GuideTable .guide_table {
    letter-spacing: normal;
    vertical-align: middle;
    border-style: initial;
    border: 1px solid #ccc;
    padding: 0 10px 30px;
    position: relative;
}
#main .guide_table {
    border: 1px solid #ccc;
    margin: 0 0 30px;
    table-layout: fixed;
    width: 40%;
    
}

    #main .guide_table p {
        width: auto;
        margin: 0;
    }

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

    #main .guide_table th .usetime{
        width:300px;
    }

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

    #main .guide_table td p {
        text-align: center;
    }

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

    #main .guide_table .time_line_tbl th {
        border: 1px solid #ccc;
    }

    #main .guide_table .usetime .time_line_tbl td {
        border: 1px solid #ccc;
    }

    #main .guide_table td .usetime .time_line_tbl .td {
        border: 1px solid #ccc;
    }
/* courseentry
============================== */
#courseentry_table {
    letter-spacing: -.4em;
    margin: 0 auto 15px;
    table-layout: auto;
}

#main #courseentry_table table tr {
    margin-bottom: 0px;
}

#main #courseentry_table table td {
    padding: 0px 0px;
}

    #main #courseentry_table table td.head {
        width: 80px;
        margin: 0;
    }

    #main #courseentry_table table td.value {
        width: 200px;
        text-align: left;
        margin: 0;
    }

    #main #courseentry_table table td.adress {
        text-align: right;
    }
        #main #courseentry_table table td.adress .text {
            display: inline-block;
            text-align: left;
        }

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


#courseentry_table table .add_menu {
    display: inline-block;
    text-align: center;
    margin: auto;
    position: relative;
}

    #courseentry_table table .add_menu .toggle_btn {
        max-width: 300px;
        padding-left: 10px;
        padding-right: 10px;
    }

/* entryprice_table
============================== */
#main .entryprice_table {
    border: 1px solid #ccc;
    margin: 0 0 30px;
}
    #main .entryprice_table p {
        margin: 0;
    }

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

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

    #main .entryprice_table td {
        padding: 7px 5px 0;
        height: 60px;
    }

        #main .entryprice_table td p {
        }

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


    #main .entryprice_table th p {
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

    #main .entryprice_table td.lblentryprice {
        text-align: center;
        vertical-align:middle;
        width: 30%;
        border-right: none;
    }

    #main .entryprice_table td.entryprice {
        width: 20%;
        border-left: none;
    }

    #main .entryprice_table tr.blank {
        border-left: none;
        border-right: none;
    }

/* option_table
============================== */
#main .option_table td.time {
    text-align: left;
    width: 15%;
    border-right: none;
    border-left: none;
}

#main .option_table td.time_price {
    text-align: right;
    width: 10%;
    border-left: none;
}

#main .option_table {
    border: 1px solid #ccc;
    margin: 0 0 30px;
}

    #main .option_table p {
        margin: 0;
    }

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

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

    #main .option_table td {
        height:50px;
    }

        #main .option_table td p {
            margin-bottom: 7px;
            font-size:10px;
        }

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

    #main .option_table th.usetime {
        width: 30%;
    }

    #main .option_table th.room {
        width: 30%;
    }

    #main .option_table th.service {
        width: 30%;
    }

    #main .option_table th p {
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

    #main .option_table td.rdo {
        align-items: center;
        vertical-align: middle;
        width: 5%;
        border-right: none;
        padding-bottom:7px;
    }
    #main .option_table .opt_rdo {
        align-items: center;
        vertical-align: middle;
        margin-bottom: 3px;
    }

    #main .option_table td.time {
        text-align: left;
        width: 15%;
        border-right: none;
        border-left: none;
    }
    #main .option_table td.time_price {
        text-align: right;
        width: 10%;
        border-left: none;
    }



    #main .option_table td.room {
        text-align: left;
        width: 15%;
        border-right: none;
        border-left: none;
    }

    #main .option_table td.room_price {
        text-align: right;
        width: 10%;
        border-left: none;
    }

    
    #main .option_table td.chk {
        align-items: center;
        vertical-align: middle;
        width: 5%;
        border-right: none;
    }

    #main .option_table td.service {
        text-align: left;
        width: 15%;
        border-right: none;
        border-left: none;
    }

    #main .option_table td.service_price {
        text-align: right;
        width: 10%;
        border-left: none;
    }


/* 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;
}
/* edit_btn
============================== */
#main .edit_btn {
    float: right;
    padding: 4px 10px 2px;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
    font-size: 60%;
    font-weight: normal;
    line-height: 1.2;
}

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

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

        #main .edit_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;
        }
/* 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;
        /* relativeを指定するとカレンダー内の実線が正常に表示しないため　*/
        /*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 {
        background-color: #F5F5F5 !important;
    }

    #cal_table table .today {
        font-weight: bold;
        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%;
    }

#cal_table .not_this_month {
    color: gray;
}
/* edit_cal
 ================================================== */
#edit_cal {
    margin: 0 0 50px 0;
    text-align: center;
}

    #edit_cal .legend {
        position: absolute;
        font-size: 85.7%;
        border: 1px solid #ccc;
        padding: 5px 20px;
        margin: 5px 0 0 0;
    }

        #edit_cal .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;
        }

    #edit_cal h2.year {
        text-align: left;
    }

        #edit_cal h2.year span {
            padding-left: 0;
            letter-spacing: normal;
        }
/* time_tbl
============================== */
.line_tbl #time_tbl {
    letter-spacing: -.4em;
}

    .line_tbl #time_tbl .time {
        letter-spacing: normal;
        display: inline-block;
        vertical-align: top;
        max-width: 100%;
        padding: 0 10px 30px;
        position: relative;
    }

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

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

        .line_tbl #time_tbl table th {
            background-color: #F5F5F5;
        }

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

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

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

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

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

            .line_tbl #time_tbl table th a {
                color: #333;
            }

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

        .line_tbl #time_tbl table td a {
            color: #333;
        }

            .line_tbl #time_tbl 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;
            }

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

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

        .line_tbl #time_tbl table .used {
            background-color: #015BA9 !important;
        }

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

    #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 .trainer_tbl {
    border: 1px solid #ccc;
    margin: 0 0 0;
}

    #main .trainer_tbl p {
        margin: 0;
    }

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

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

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

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

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

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

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

    #main .trainer_tbl th.name {
        width: 20%;
    }

    #main .trainer_tbl th.sex {
        width: 5%;
    }

    #main .trainer_tbl .img {
        width: 10%;
    }

    #main .trainer_tbl .position {
        width: 15%;
    }

    #main .trainer_tbl .comment {
        width: 30%;
    }

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

    #main .trainer_tbl td.name div {
        display: table;
        margin: auto;
        border-collapse: separate;
        border-spacing: 10px 0;
    }

    #main .trainer_tbl td.name p {
        display: table-row;
        width: 100%;
    }

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

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

    #main .trainer_tbl th p {
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

    #main .trainer_tbl .tr_del td {
        background-color: #eee;
    }
/* ==================================================
会員情報
================================================== */
#main .member_tbl {
    border: 1px solid #ccc;
    margin: 0 0 0;
}

    #main .member_tbl p {
        margin: 0;
    }

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

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

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

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


    #main .member_tbl th.num {
        width: 7%;
    }

    #main .member_tbl th.name {
        width: 10%;
    }

    #main .member_tbl th.name_kana {
        width: 11%;
    }

    #main .member_tbl th.tel {
        width: 7%;
    }

    #main .member_tbl th.sex {
        width: 4%;
    }

    #main .member_tbl th.registration {
        width: 8%;
    }

    #main .member_tbl th.apply {
        width: 8%;
    }

    #main .member_tbl th.enter {
        width: 8%;
    }

    #main .member_tbl th.exit {
        width: 8%;
    }

    #main .member_tbl th.active {
        width: 10%;
    }

    #main .member_tbl th.payment {
        width: 9%;
        min-width:125px;
    }

    #main .member_tbl th.print {
        width: 5%;
    }

    #main .member_tbl th.btn {
        width: 13%;
        min-width:185px;
    }

    #main .member_tbl th p {
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

#main  .member_toggle_btn {
    font-size: 100%;
    display: block;
    margin: 0 auto;
    text-decoration: none;
    min-height: 30px;
    line-height: 30px;
    overflow: hidden;
    font-weight: bold;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f5f5f5 !important;
    color: #666 !important;
    box-shadow: 2px 2px 0 0 #eee;
}

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

#main .member_add_btn {
    margin: 0 0 50px;
    width:100%;
}

#main .member_tbl_footer_pc {
    display: block !important;
}
#main .member_tbl_footer_sp {
    display: none !important;
}
@media only screen and (min-width: 320px) and (max-width: 1024px) {
    #main .member_tbl_footer_pc {
        display: none !important;
    }

    #main .member_tbl_footer_sp {
        display: block !important;
    }
}

    #main .member_add_btn span {
        background-image: url(../images/icon/add_icon.png);
        background-position: left center;
        background-repeat: no-repeat;
        padding: 2px 2px 2px 34px;
        display: inline-block;
        background-size: contain;
        height: 25px;
        text-wrap:normal;
    }
    #main .member_add_btn 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;
    }

.member_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;
}

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

#main .member_tbl td.name p,
#main .member_tbl td.name_kana p{
    display: inline-block;
    vertical-align: middle;
    margin-right: 1.5em;
}
/* ==================================================
購入情報
================================================== */
#main .purchase_tbl {
    border: 1px solid #ccc;
    margin: 0 0 30px;
}

    #main .purchase_tbl p {
        margin: 0;
    }

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

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

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

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

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

    #main .purchase_tbl th.name {
        width: 35%;
    }

    #main .purchase_tbl th.price {
        width: 20%;
    }

    #main .purchase_tbl th.quantity {
        width: 15%;
    }

    #main .purchase_tbl th.amount {
        width: 10%;
    }

    #main .purchase_tbl th.rate {
        width: 10%;
    }

    #main .purchase_tbl th.tax {
        width: 10%;
    }

    #main .purchase_tbl th p {
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

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

    #main .purchase_tbl th.aggregate {
        width: 45%;
        text-align: right;
    }

    #main .purchase_tbl td.docprice {
        text-align: right;
    }

    #main .purchase_tbl td.docnum {
        text-align: right;
    }



/* トレーナー詳細
============================== */
#main .trainer_detail_tbl {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin: 0 0 30px;
}

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

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

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

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

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

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

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

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

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

    #main .trainer_detail_tbl input[type='text'] {
        width: 50%;
    }

    #main .trainer_detail_tbl td.name input[type='text'] {
        width: 95%;
    }

    #main .trainer_detail_tbl textarea {
        width: 50%;
    }

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

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

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

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

        #main .trainer_detail_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 .trainer_detail_tbl .img ul {
        display: inline-block;
        vertical-align: top;
        width: 60px;
        font-size: 85.7%;
    }

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

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

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

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

    #main .trainer_detail_tbl .toggle_btn {
        margin: 0;
    }
/* ==================================================
入会金、月会費情報
================================================== */
#main .fee_tbl {
    border: 1px solid #ccc;
    margin: 0 0 0;
}

    #main .fee_tbl p {
        margin: 0;
    }

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

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

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

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

    #main .fee_tbl .fee {
        width: 85%;
        white-space: nowrap;
    }

    #main .fee_tbl .price {
        width: 15%;
        white-space: nowrap;
    }

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

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

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

    #main .fee_tbl td.fee {
        text-align: left;
    }
/* ==================================================
個室予約情報
================================================== */
#main .room_tbl {
    border: 1px solid #ccc;
    margin: 0 0 0;
}

    #main .room_tbl p {
        margin: 0;
    }

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

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

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

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

    #main .room_tbl th.name {
        width: 21%;
    }

    #main .room_tbl .room {
        width: 9%;
    }

    #main .room_tbl .personal {
        width: 17%;
    }

    #main .room_tbl .price {
        width: 13%;
    }

    #main .room_tbl .tax {
        width: 12%;
    }

    #main .room_tbl .display {
        width: 12%;
    }

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

    #main .room_tbl th p {
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

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

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

    #main .room_tbl .time table {
        table-layout: fixed;
    }
    #main .room_tbl .time_line_tbl th {
        padding: 0px;
        border: 1px solid #ccc;
    }

    #main .room_tbl .time_line_tbl p {
        padding:0px;
    }
    #main .room_tbl .usetime .time_line_tbl td {
        border: 1px solid #ccc;
    }

    #main .room_tbl td .usetime .time_line_tbl .td {
        border: 1px solid #ccc;
    }

/* ==================================================
サービス情報
================================================== */
#main .service_tbl {
    border: 1px solid #ccc;
    margin: 0 0 0;
}

    #main .service_tbl p {
        margin: 0;
    }

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

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

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

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

    #main .service_tbl th.name {
        width: 27%;
    }

    #main .service_tbl .single {
        width: 15%;
    }

    #main .service_tbl .monthly {
        width: 15%;
    }

    #main .service_tbl .tax {
        width: 12%;
    }

    #main .service_tbl .display {
        width: 15%;
    }

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

    #main .service_tbl th p {
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

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

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

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

/* ==================================================
購入履歴情報
================================================== */
#main .history_tbl {
    border: 1px solid #ccc;
    margin: 0 0 0;
}

    #main .history_tbl p {
        margin: 0;
    }

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

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

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

    #main .history_tbl .num {
        width: 15%;
    }

    #main .history_tbl th.date {
        width: 15%;
    }

    #main .history_tbl .name {
        width: 50%;
    }

    #main .history_tbl .price {
        width: 10%;
    }

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

    #main .history_tbl th p {
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

    #main .history_tbl th .icon_line {
        display: inline-block;
        vertical-align: middle;
    }
/* ==================================================
会員コース情報
================================================== */
#main .member_course_tbl {
    border: 1px solid #ccc;
    margin: 0 0 0;
}

    #main .member_course_tbl p {
        margin: 0;
    }

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

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

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

    #main .member_course_tbl th.price {
        width: 15%;
    }

    #main .member_course_tbl td.select {
        width: 3%;
    }

        #main .member_course_tbl td.select input:hover {
            cursor: pointer;
        }

td label {
    cursor: pointer;
}

#main .member_course_tbl td.name {
    width: 82%;
    text-align: left;
}

#main .member_course_tbl th p {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
/* ==================================================
店舗コース情報
================================================== */
#main .course_tbl {
    border: 1px solid #ccc;
    margin: 0 0 15px 0;
}

    #main .course_tbl p {
        margin: 0;
    }

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

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

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

    #main .course_tbl .name {
        width: 80%;
    }

    #main .course_tbl .service {
        width: 60%;
    }

    #main .course_tbl .price,
    #main .course_tbl .single,
    #main .course_tbl .monthly {
        width: 20%;
    }

    #main .course_tbl th p {
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

    #main .course_tbl td.name,
    #main .course_tbl td.service {
        text-align: left;
    }
/* ==================================================
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;
}
/* icon_btn
============================== */
#main .icon_btn p {
    width: 55px;
    margin:auto;
}

    #main .icon_btn 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 .icon_btn .print a {
        background-image: url(../images/icon/print_icon.png);
    }

        #main .icon_btn .print a:active {
            background-color: #ECFFA6 !important;
            border: 1px solid #94bC00;
        }

        #main .icon_btn .print 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 .icon_btn span {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        display: block;
    }

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

    #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/edit_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;
        }
/* member_row_btn
============================== */
#main .member_row_btn {
    width: 100%;
    margin-bottom:7px;
}

    #main .member_row_btn li {
        width: 55px;
        display: inline-block
    }

        #main .member_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 .member_row_btn li.purchase a {
    background-image: url(../images/icon/purchase_icon.png);
}

#main .member_row_btn li.history a {
    background-image: url(../images/icon/history_icon.png);
}

        #main .member_row_btn li.reference a {
            background-image: url(../images/icon/reference_icon.png);
        }

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

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

        #main .member_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 .member_row_btn li.purchase a:active {
            background-color: #FFD6BB !important;
            border: 1px solid #FF6600;
        }

        #main .member_row_btn li.history a:active {
            background-color: #CCCCCC !important;
            border: 1px solid #666;
        }

        #main .member_row_btn li.reference a:active {
            background-color: #E4F9FD !important;
            border: 1px solid #015BA9;
        }

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

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

        #main .member_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;
    }
/* add_btn
============================== */
#main .add_btn {
    margin: 0 0 50px;
}

    #main .add_btn span {
        background-image: url(../images/icon/add_icon.png);
        background-position: left center;
        background-repeat: no-repeat;
        padding: 2px 2px 2px 34px;
        display: inline-block;
        background-size: contain;
        height: 25px;
    }

    #main .add_btn .toggle_btn {
        font-size: 130%;
        margin: 0 0 0 auto;
        min-width: 12%;
    }

    #main .add_btn 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;
    }
/* 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 .yes_btn_disable a {
    background-color: #d7d7d7;
    -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_disable a:hover {
        background-color: #d7d7d7;
    }

#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;
    }

#modal-content-innar.error {
    color: #C00;
    background-color: #FEF3FC;
}
/* stylist
============================== */
#stylist {
    letter-spacing: -.4em;
    clear: both;
}

#stylist .box_stylist {
    letter-spacing: normal;
    display: inline-block;
    vertical-align: top;
    width: 352px;
    padding: 0 10px 20px;
}

#stylist .box_stylist .inner.disable {
    filter: grayscale(100%);
}

#stylist .box_stylist .inner .btn a.gray {
    background-color: #6d6767;
    pointer-events: none; /* aタグのリンクを無効にする */
    cursor: default; /* マウスオーバー時のカーソルをdefaultに固定 */
}

#stylist .box_stylist .inner {
    background-color: #fff;
    padding: 15px 20px;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

#stylist .box_stylist .set_width_height {
    height: 216px;
    width: 100%;
    text-align: center;
    position: relative;
}

#stylist .box_stylist p {
    margin-bottom: 5px;
    line-height: 1.3;
}

#stylist .box_stylist p img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

#stylist .box_stylist .rank {
    text-align: center;
    background-color: #F75625;
    color: #fff;
    font-weight: bold;
    font-size: 85.7%;
    padding: 4px 0;
    height: 21.87px;
}

#stylist .box_stylist .name {
    line-height: 1.2;
    font-size: 165%;
    font-weight: bold;
    margin-bottom: 0;
}

#stylist .box_stylist .kana {
    font-size: 85.7%;
    padding-bottom: 5px;
}

#stylist .box_stylist .text {
    padding: 7px;
    background-color: #FFF6F1;
    font-size: 85.7%;
    height: 99px;
}

#stylist .box_stylist .btn {
    text-align: center;
    font-size: 143%;
    font-weight: bold;
}

#stylist .box_stylist .btn a {
    min-width: inherit;
    display: block;
    text-decoration: none;
    padding: 5px;
    background-color: #306;
    color: #fff;
    position: relative;
}

#stylist .box_stylist .btn a:hover {
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

#stylist .box_stylist .btn a::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    background: url(../images/icon/arrow_w.png) no-repeat;
}

#stylist .box_stylist .btn a:hover {
    background-color: #303;
}
/* 指名なし */
#stylist .box_stylist.appoint .rank {
    background-color: #fff;
}

#stylist .box_stylist.appoint .btn a {
    background-color: #F36;
}

#stylist .box_stylist.appoint .btn a:hover {
    background-color: #DB006D;
}
/*
@media screen and (max-width : 1280px) and (min-width: 1025px) {
    #stylist .box_stylist .name {
        font-size: 130%;
    }

    #stylist .box_stylist .rank,
    #stylist .box_stylist .kana {
        font-size: 71.4%;
    }

    #stylist .box_stylist .btn {
        font-size: 100%;
    }

    #stylist .box_stylist p img {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    #stylist .box_stylist .set_width_height {
        height: 216px;
        text-align: center;
        position: relative;
    }
}

@media screen and (max-width : 1024px) and (min-width: 769px) {
    #stylist .box_stylist {
        width: 25%;
    }

    #stylist .box_stylist .name {
        font-size: 114.3%;
    }

    #stylist .box_stylist .rank,
    #stylist .box_stylist .kana {
        font-size: 71.4%;
    }

    #stylist .box_stylist .text {
        font-size: 71.4%;
    }

    #stylist .box_stylist .btn {
        font-size: 100%;
    }

    #stylist .box_stylist p img {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    #stylist .box_stylist .set_width_height {
        height: 216px;
        text-align: center;
        position: relative;
    }
}*/
/* ==================================================
clearfix
================================================== */
#main .reserved_icon:after,
#main .box_btn:after,
#main .row_btn:after {
    content: "";
    display: table;
    clear: both;
}
#main .col2:after,
#stylist:after {
    content: "";
    display: table;
    clear: both;
}