@charset "utf-8";

/*-------------------------------
    リセットCSS
-------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*-------------------------------
    共通
-------------------------------*/
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html,
body {
    height: 100%;
    font-family: "ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS P Gothic",verdana,sans-serif;
}
body {
    background: #eee;
    line-height: 1.6;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

input, textarea, button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
}
input, textarea {
    max-width: 470px;
    width: 100%;
}
select, button {
    cursor: pointer;
}
input.button,
input[type="checkbox"],
input[type="radio"],
input[type="color"] {
    max-width: inherit;
    width: auto;
}
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
}
input[type="checkbox"] {
    appearance: checkbox;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
}
input[type="radio"] {
    appearance: radio;
    -webkit-appearance: radio;
    -moz-appearance: radio;
}
input[type="checkbox"].simple,
input[type="radio"].simple {
    position: relative;
    width: 15px;
    height: 15px;
    border: 1px solid #999;
    background: #fff;
    font-family: FontAwesome;
    vertical-align: middle;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
input[type="radio"].simple {
    border-radius: 50%;
}
input[type="checkbox"].simple:checked,
input[type="radio"].simple:checked {
    border: 1px solid #627295;
}
input[type="checkbox"].simple:checked::before {
    content: "\f00c";
    position: absolute;
    top: 0;
    left: 0;
    color: #668ad8;
    font-size: 90%;
}
input[type="radio"].simple:checked::before {
    content: "\f111";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    height: 80%;
    margin: auto;
    color: #668ad8;
    font-size: 70%;
    text-align: center;
}
input, select, textarea, button {
    padding: 4px;
    border: 1px solid #111;
    border-radius: 3px;
    font-size: 14px;
    vertical-align: middle;
}
input {
    padding: 5px;
}
input[type="color"] {
    width: 50px;
    height: 33px;
    padding: 0;
}
input[type="checkbox"].switch + label {
    display: inline-block;
    position: relative;
    width: 34px;
    height: 14px;
    margin: 5px 0;
    background: lightgray;
    border-radius: 10px;
    vertical-align: middle;
    cursor: pointer;
}
input[type="checkbox"].switch + label::before,
input[type="checkbox"].switch + label::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: -3px;
    left: 0;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all .2s;
}
input[type="checkbox"].switch + label::after {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}
input[type="checkbox"].switch + label::before {
    background: lightgray;
    transform: scale3d(0, 0, 1);
}
input[type="checkbox"].switch + label:active::before {
    transform: scale3d(3, 3, 1);
    opacity: 0;
}
input[type="checkbox"].switch {
    display: none;
}
input[type="checkbox"].switch:checked + label {
    background: rgba(3, 155, 229, 0.5);
}
input[type="checkbox"].switch:checked + label::before,
input[type="checkbox"].switch:checked + label::after {
    left: 14px;
    background: #039be5;
}
input[type="checkbox"].switch:disabled + label {
    opacity: 0.4;
    cursor: not-allowed;
}
input[type="checkbox"].switch.green {
    display: none;
}
input[type="checkbox"].switch.green:checked + label {
    background: rgba(4, 196, 52, 0.5);
}
input[type="checkbox"].switch.green:checked + label::before,
input[type="checkbox"].switch.green:checked + label::after {
    background: #04c434;
}
input[type="checkbox"].switch.red {
    display: none;
}
input[type="checkbox"].switch.red:checked + label {
    background: rgba(244, 67, 54, 0.5);
}
input[type="checkbox"].switch.red:checked + label::before,
input[type="checkbox"].switch.red:checked + label::after {
    background: #f44336;
}
input+input[type="checkbox"].switch+label,
select+input[type="checkbox"].switch+label,
textarea+input[type="checkbox"].switch+label,
button+input[type="checkbox"].switch+label {
    margin-left: 10px;
}
input.cmn-toggle-yes-no {
    display: none;
}
input.cmn-toggle-yes-no+label {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
}
input.cmn-toggle-yes-no+label::before,
input.cmn-toggle-yes-no+label::after {
    display: block;
    padding: 2px 10px;
    border-radius: 3px;
    color: #fff;
}
input.cmn-toggle-yes-no+label::before {
    content: attr(data-off);
    position: absolute;
    top: 0;
    left: 0;
    background: #666;
    transition: transform .5s;
    backface-visibility: hidden;
}
input.cmn-toggle-yes-no+label::after {
    content: attr(data-on);
    background: #039be5;
    transition: transform .5s;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}
input.cmn-toggle-yes-no.green+label::after {
    background: #04c434;
}
input.cmn-toggle-yes-no.red+label::after {
    background: #f44336;
}
input.cmn-toggle-yes-no:checked+label::before {
    transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked+label::after {
    transform: rotateY(0);
}
input.cmn-toggle-yes-no+label+input.cmn-toggle-yes-no+label {
    margin-left: 10px;
}
input[type="file"] {
    padding-left: 0;
    padding-right: 0;
    border: none !important;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance:textfield;
}

input.email,
input.w300 {
    max-width: 300px;
}
input.date,
input.w200 {
    max-width: 200px;
}
input.year,
input.zipcode,
input.time,
input.amount,
input.w100 {
    max-width: 100px;
}
input.month,
input.day,
input.spot,
input.floor,
input.number_of_sheet,
input.w50 {
    max-width: 50px;
}

.hidden {
    display: none;
}

form .required::after {
    content: "\5FC5\9808"; /* 必須 */
    display: inline-block;
    width: 35px;
    height: 1.6em;
    margin-left: 10px;
    background: #b22222;
    color: #fff;
    font-size: 11px;
    text-align: center;
    line-height: 1.6em;
    vertical-align: middle;
}

.alert {
    margin: 0 0 20px;
    padding: 15px 10px;
    background: #fff;
    box-shadow: 2px 1px 4px 1px rgba(100, 100, 100, 0.3);
    -webkit-box-shadow: 2px 1px 4px 1px rgba(100, 100, 100, 0.3);
    font-size: 12px;
}
.alert-danger {
    border-left: 5px solid #c00;
}
.alert-success {
    border-left: 5px solid #390;
}
.alert ul li+li {
    margin: 10px 0 0;
}

.button {
    display: inline-block;
    padding: .5em 1em;
    border: none;
    border-radius: 3px;
    color: #FFF;
    font-size: 12px;
    text-decoration: none;
    line-height: 1em;
    vertical-align: middle;
    cursor: pointer;
}
br+.button {
    margin: 5px 0 0 0;
}
.button+.button {
    margin: 0 0 0 5px;
}
br+.button+.button {
    margin: 10px 0 0 10px;
}
.button:active,
.button.sending {
    transform: translateY(4px);
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    border-bottom: none;
}
.button.large {
    padding: .5em 3.5em;
}
.button.prev,
.button.next,
.button.view {
    background: #e6b422;
    border-bottom: 4px solid #b8860b;
}
.button.new {
    background: #00885a;
    border-bottom: 4px solid #005c42;
}
.button.edit {
    background: #668ad8;
    border-bottom: 4px solid #627295;
}
.button.destroy,
.button.restore,
.button.confirm,
.button.payment,
.button.pink {
    background: #ea5549;
    border-bottom: 4px solid #6a1917;
}
.button.near {
    background: #ea5549 !important;
    border-bottom: 4px solid #6a1917 !important;
}
.button.near-area {
    background: #a9cc51;
    border-bottom: 4px solid #618e34;
}
.button.gray,
.button.inactive,
.button.reset,
.button.cancel {
    background: #b0b0b0;
    border-bottom: 4px solid #777;
}
.button.on,
.button.sending {
    background: #666;
    border-bottom: 4px solid #333;
}
.button.sending {
    content: attr(data-sending-text);
}
.button.search-form-open,
.button.admin-window-open {
    position: relative;
    background: #fff;
    border-bottom: 4px solid #777;
    color: #000;
}
.button.search-form-open i {
    position: relative;
    top: -1px;
    margin-right: 5px;
}
.button.sentence1 {
    width: 34px;
    height: 28px;
    padding: 0;
    font-weight: bold;
}
.button i {
    margin-right: 5px;
}
input+.button,
select+.button,
textarea+.button,
button+.button {
    margin-left: 10px;
}

.area-circle {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 1em;
    font-size: 11px;
}
br+.area-circle {
    margin-top: 2px;
}

.popup-help-button {
    cursor: pointer;
}
.popup-help {
    display: none !important;
    position: absolute;
    max-width: 400px;
    padding: 5px;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1.8;
    z-index: 1;
}
.popup-help.open {
    display: block !important;
    background: rgba(0, 0, 0, .85);
    animation: popup-help-show .4s linear 0s;
}

@keyframes popup-help-show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.button-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    margin-top: -10px;
}
.button-flex label {
    margin: 10px 10px 0 0 !important;
}

/*-------------------------------
    ヘッダ
-------------------------------*/
header {
    height: 50px;
    padding: 10px;
    background: #0075c2;
    color: #fff;
    line-height: 30px;
}
header::after {
    content: "";
    display: block;
    clear: both;
}
.production header {
    background: #ea5549;
}
header h1 {
    float: left;
}
.disp-user {
    float: right;
    position: relative;
    font-size: 12px;
    cursor: pointer;
}
.disp-user a {
    color: #fff;
    text-decoration: none;
    pointer-events: auto;
}
.disp-user a:hover {
    text-decoration: underline;
}
.disp-user a:hover i {
    color: #6c9bd2;
}
.production .disp-user a:hover i {
    color: #ef857d;
}
.disp-user i {
    padding-right: 2px;
    font-size: 24px;
    vertical-align: middle;
    pointer-events: none;
    transition: color .3s ease;
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
}
.disp-user span {
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
}
.disp-user ul {
    position: absolute;
    top: 40px;
    right: -10px;
    width: 100%;
    background: #6c9bd2;
    opacity: 1;
    z-index: 1;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
}
.production .disp-user ul {
    background: #ef857d;
}
.disp-user:not(.open) ul {
    top: -50px;
    opacity: 0;
}
.disp-user ul li a {
    display: block;
    padding: 2px 10px;
}

/*-------------------------------
    大枠
-------------------------------*/
.container {
    position: relative;
    max-width: 100% !important;
    width: 100%;
    min-height: calc(100% - 50px);
    height: auto;
}
.container::after {
    content: "";
    display: block;
    clear: both;
}

/*-------------------------------
    サイドバー
-------------------------------*/
.sidebar {
    position: absolute;
    left: 0;
    float: left;
    width: 200px;
    min-height: 100%;
    height: auto;
    padding: 10px;
    background: #333;
    color: #fff;
    transition: left .4s ease;
    -webkit-transition: left .4s ease;
    z-index: 2;
}
.sidebar select {
    width: 100%;
    margin: 0 0 10px;
}
.sidebar ul {
    font-size: 13px;
}
.sidebar ul li {
    line-height: 4em;
}
.sidebar ul li:not(.toggle):hover,
.sidebar ul li.toggle:not(.open):hover {
    background: #2b2b2b;
}
.sidebar ul li.toggle {
    position: relative;
    padding: 4px;
}
.sidebar ul li.toggle.open {
    padding-bottom: 0;
}
.sidebar ul li.toggle:hover {
    cursor: pointer;
}
.sidebar ul li.toggle:not(.open) ul {
    display: none;
}
.sidebar ul li.toggle li {
    padding-left: 10px;
}
.sidebar ul li.toggle li+li {
    border-top: 1px solid #303030;
}
.sidebar ul li.toggle::after {
    content: "\f0d7";
    font-family: FontAwesome;
    position: absolute;
    top: 4px;
    right: 10px;
}
.sidebar ul li.toggle li.toggle {
    padding-left: 14px;
}
.sidebar ul li.active {
    background-color: #555;
    border-right: 4px solid #777;
}
.sidebar ul li a {
    display: block;
    padding: 4px;
    color: #fff;
    text-decoration: none;
}
.sidebar .concentration-button {
    padding-right: 10px;
    text-align: right;
    cursor: pointer;
}
.sidebar .concentration-button i {
    transition: transform .4s ease;
    -webkit-transition: transform .4s ease;
}

/*---------- アイコン ----------*/
.sidebar ul li.icon > a::before,
.sidebar ul li.toggle::before {
    display: inline-block;
    width: 15px;
    margin-right: 8px;
    color: #bbb;
    font-family: FontAwesome;
    font-size: 14px;
    text-align: center;
}
.sidebar ul li.icon.home > a::before,
.sidebar ul li.toggle.icon.home::before {
    content: "\f015";
}
.sidebar ul li.icon.calendar > a::before,
.sidebar ul li.toggle.icon.calendar::before {
    content: "\f073";
}
.sidebar ul li.icon.customer > a::before,
.sidebar ul li.toggle.icon.customer::before {
    content: "\f2b9";
}
.sidebar ul li.icon.user > a::before,
.sidebar ul li.toggle.icon.user::before {
    content: "\f007";
}
.sidebar ul li.icon.pay > a::before,
.sidebar ul li.toggle.icon.pay::before {
    content: "\f09d";
}
.sidebar ul li.icon.bank > a::before,
.sidebar ul li.toggle.icon.bank::before {
    content: "\f157";
}
.sidebar ul li.icon.ranking > a::before,
.sidebar ul li.toggle.icon.ranking::before {
    content: "\f080";
}
.sidebar ul li.icon.setting > a::before,
.sidebar ul li.toggle.icon.setting::before {
    content: "\f013";
}
.sidebar ul li.icon.relation > a::before,
.sidebar ul li.toggle.icon.relation::before {
    content: "\f0c1";
    font-size: 11px;
    vertical-align: middle;
    transform: rotate(315deg);
}
/*---------- /アイコン ----------*/

/*---------- 集中モードのサイドバー ----------*/
.concentration .sidebar {
    left: -160px;
    padding-right: 40px;
}
.concentration .sidebar:hover {
    left: 0;
    padding-right: 10px;
    box-shadow: 2px 1px 4px 1px rgba(100, 100, 100, 0.6);
    -webkit-box-shadow: 2px 1px 4px 1px rgba(100, 100, 100, 0.6);
    z-index: 9999999999;
}
.concentration .sidebar ul li {
    white-space: nowrap;
}
.concentration .sidebar .concentration-button {
    position: absolute;
    width: calc(100% - 20px);
    text-align: right;
}
.concentration .sidebar .concentration-button i {
    font-size: 16px;
    transform: rotate(180deg);
}
/*---------- /集中モードのサイドバー ----------*/

/*-------------------------------
    インナー
-------------------------------*/
.inner {
    float: left;
    width: initial;
    overflow-x: scroll;
    margin-left: 200px;
    padding: 20px;
    transition: margin .4s ease;
    -webkit-transition: margin .4s ease;
}
.inner.booking {
    width: initial;
    min-width: 964px;
}
.mfp-content .inner {
    min-width: initial;
}
.inner > h1 {
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 1em;
}

/*---------- 集中モードのインナー ----------*/
.concentration .inner {
    width: calc(100% - 40px);
    margin-left: 40px;
}
/*---------- /集中モードのインナー ----------*/

.post {
    padding: 20px 10px;
    background: #fff;
    font-size: 14px;
    box-shadow: 2px 1px 4px 1px rgba(100, 100, 100, 0.3);
    -webkit-box-shadow: 2px 1px 4px 1px rgba(100, 100, 100, 0.3);
}
.post+.post {
    margin-top: 30px;
}
.post.fixed-controller {
    margin-bottom: 50px;
}
.post.float::after {
    content: "";
    display: block;
    clear: both;
}
.post.float .left {
    float: left;
    width: 49%;
}
.post.float .right {
    float: right;
    width: 49%;
}
.post.float .w8 {
    width: 79%;
}
.post.float .w7 {
    width: 69%;
}
.post.float .w6 {
    width: 59%;
}
.post.float .w4 {
    width: 39%;
}
.post.float .w3 {
    width: 29%;
}
.post.float .w2 {
    width: 19%;
}
.post.float .w1 {
    width: 9%;
}
.post.float .left+.left,
.post.float .left+.right {
    margin-left: 2%;
}
.post.float .right+.right,
.post.float .right+.left {
    margin-right: 2%;
}
.post.float .float-wrap {
    margin: 0 0 20px;
    border-bottom: 1px solid #e1e1e1;
}
.post.float .float-wrap::after {
    content: "";
    display: block;
    clear: both;
}
.post h2 {
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid #e1e1e1;
    font-size: 15px;
    text-indent: 10px;
}
.post.float .float-wrap h2 {
    margin: 0;
    border: none;
}
.post .inner-content {
    margin: 0 0 10px;
}
.post .inner-content.help {
    font-size: 12px;
}
.post .inner-content+table {
    margin-top: 20px;
}
.post .controller {
    margin: 0 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid #e1e1e1;
    text-align: right;
}
.post.float .float-wrap .controller {
    margin: 0;
    border: none;
}
.post .controller.separator::after {
    content: "";
    display: block;
    clear: both;
}
.post .controller.bottom {
    margin: 20px 0 0 ;
    padding: 20px 0 0;
    border-top: 1px solid #e1e1e1;
    border-bottom: none;
    text-align: left;
}
.post .controller .left-right {
    float:left;
}
.post .controller .left-right+.left-right {
    float: right;
}
.post .controller.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 30px;
    background-color: #fff;
    border-top: 1px solid #e1e1e1;
    border-bottom: none;
}
.post .controller.inline-form form,
.post .inline-form form {
    display: inline-block;
}

.post ul.list li+li {
    margin-top: 10px;
}

.post table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.post table tr+tr {
    border-top: 1px solid #e1e1e1;
}
.post table.list tbody tr:hover,
.post table.list-jump tbody tr:hover {
    box-shadow: 0 0 1px 1.5px #ccc inset;
    -webkit-box-shadow: 0 0 1px 1.5px #ccc inset;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
}
.post table.list table tbody tr:hover,
.post table.list-jump table tbody tr:hover {
    box-shadow: none;
    -webkit-box-shadow: none;
}
.post table th {
    font-weight: bold;
}
.post table th .help,
.post table td .help {
    display: inline-block;
    margin: 0 0 0 10px;
    color: #888;
    font-size: 11px;
    font-weight: normal;
}
.post table th.closed .help,
.post table td.closed .help,
.post table th.empty .help,
.post table td.empty .help {
    color: #efefef;
}
.post table th br+.help,
.post table td br+.help {
    margin: 5px 0 0;
}
.post table th,
.post table td {
    padding: 4px 3px;
    text-align: left;
}
.post table th.nowrap,
.post table td.nowrap {
    white-space: nowrap;
}
.post table th.break-all,
.post table td.break-all {
    word-break: break-all;
}
.post table td.tel {
    min-width: 6.16rem;
    word-break: break-word;
}
.post table td.date-at {
    font-size: 10px;
}
.post table td ul li+li {
    margin-top: 10px;
}

.post table.fixed {
    table-layout: fixed;
}

.post table.vertical tr {
    display: block;
}
.post table.vertical tr+tr {
    border: none;
}
.post table.vertical th {
    padding: 10px 10px 0;
}
.post table.vertical td {
    padding: 5px 10px 10px;
}
.post table.vertical th,
.post table.vertical td {
    display: block;
    width: 100%;
    text-align: left;
}

.post table.horizontal th {
    width: 30%;
    vertical-align: top;
}

.post table.list tr:nth-child(even),
.post table.list-jump tr.jump:nth-of-type(even) {
    background: #efefef;
}
.post table.list.fixed th:nth-of-type(1),
.post table.list.fixed td:nth-of-type(1) {
    width: 60%;
}

.post table.first-el-no-padding-left {
    margin-top: 5px;
}
.post table.first-el-no-padding-left th:first-child,
.post table.first-el-no-padding-left td:first-child {
    padding-left: 0;
}

/*---------- 更に表示する ----------*/
.post table.learn-more:not(.visible) tbody tr:nth-child(n+6) {
    display: none;
}
.post table.learn-more+.learn-more-link {
    margin-top: 10px;
    text-align: center;
}
.post table.learn-more+.learn-more-link a {
    color: #000;
    text-decoration: none;
}
/*---------- /更に表示する ----------*/

.post table tr:not(.closed).toggle-group {
    cursor: pointer;
}
.post table tr.toggle-group+tr.in {
    display: none;
}
.post table tr.in>td {
    width: 100% !important;
    padding: 0;
}

.post table.column2,
.post table.column3,
.post table.column4 {
    letter-spacing: -.4em;
}
.post table.column2 tr,
.post table.column3 tr,
.post table.column4 tr {
    display: inline-block;
    letter-spacing: normal;
}
.post table.column2 tr {
    width: 50%;
}
.post table.column3 tr {
    width: 33.3333%;
}
.post table.column4 tr {
    width: 25%;
}

.post table .satday {
    color: #00a1e9;
}
.post table .sunday,
.post table .holiday {
    color: #ea5550;
}
.post table .closed,
.post table tr.closed:nth-child(even) {
    background: #b0b0b0;
    color: #fff;
}

.post table tr.error td,
.post table tr.expired td {
    color: #c00;
}
.post table tr.error input,
.post table tr.error textarea,
.post table tr.error select {
    border: 1px solid #c00;
}
.post table tr.error .error.text {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1em;
}
.post table tr.success td {
    color: #0c0;
}
.post table tr.processing td {
    color: #00c;
}

/*---------- テーブル in テーブル ----------*/
.post table .in-table tr+tr {
    border-top: 1px dotted #e1e1e1;
}
.post table .in-table .SumoSelect {
    width: 180px;
    text-align: left;
}
/*---------- /テーブル in テーブル ----------*/

/*---------- レスポンシブテーブル ----------*/
.post .responsive-table {
    width: 100%;
    max-height: 400px;
    overflow-x: scroll;
}
.post .responsive-table table tbody {
    display: flex;
    display: -webkit-flex;
    white-space: nowrap;
}
.post .responsive-table table tbody tr {
    display: inline-block;
    width: 71px;
    min-height: 300px;
    border: none;
    vertical-align: top;
}
.post .responsive-table table tbody tr+tr {
    border-left: 1px solid #e1e1e1;
}
.post .responsive-table table tbody tr th {
    display: block;
    width: 100%;
    text-align: center;
}
.post .responsive-table table tbody tr td {
    display: block;
    position: relative;
    width: 100%;
}

/*-------------------------------
    フレキシブルレイアウト
-------------------------------*/
.post .flex {
    display: flex;
    flex-wrap: wrap;
    margin-top: -20px;
    margin-left: -20px;
}
.post .flex .child-item {
    position: relative;
    flex: 0 1 calc((100% / 5) - 20px);
    margin-top: 20px;
    margin-left: 20px;
    padding: 5px;
    border: 1px solid #e1e1e1;
    font-size: 12px;
    box-shadow: 2px 1px 4px 1px rgba(100, 100, 100, 0.3);
    -webkit-box-shadow: 2px 1px 4px 1px rgba(100, 100, 100, 0.3);
}
.post .flex .child-item a {
    color: #000;
    text-decoration: none;
}
.post .flex .child-item-wrap {
    padding: 2px 0;
    letter-spacing: -.4em;
}
.post .flex .child-item-wrap:nth-of-type(even) {
    background-color: #efefef;
}
.post .flex .child-item-wrap+.child-item-wrap {
    border-top: 1px solid #e1e1e1;
}
.post .flex .child-item .child-item-label {
    display: inline-block;
    width: 30%;
    font-weight: bold;
    vertical-align: top;
    letter-spacing: normal;
}
.post .flex .child-item .child-item-content {
    display: inline-block;
    width: 68%;
    margin-left: 2%;
    letter-spacing: normal;
}
.post .flex .child-item .controller {
    margin: 0;
    padding: 10px 0 5px;
    text-align: center;
}
.post .flex .child-item .controller a {
    color: #fff !important;
}
.post .flex .child-item-edit {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 21px;
}
.post .flex .child-item-edit:hover {
    top: 6px;
    right: 4px;
}
.post .flex .child-item-edit a {
    color: #668ad8 !important;
}

/*-------------------------------
    検索フォーム / 管理ウィンドウ
-------------------------------*/
.post.search-form-button {
    padding: 0;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.post.search-form-button .controller {
    margin-bottom: 0;
    padding: 0;
    border: none;
}
.post.search-form,
.post.admin-window {
    display: none;
    margin-left: -20px;
    margin-right: -20px;
    padding: 20px;
}
.post.search-form h2,
.post.admin-window h2 {
    margin-left: -10px;
    padding: 0;
    border-bottom: none;
}
.post.search-form table {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    letter-spacing: -.4em;
}
.post.search-form table.m-top {
    margin-top: 15px;
}
.post.search-form table tbody {
    width: 100%;
}
.post.search-form table tbody tr {
    display: inline-flex;
    width: 25%;
    border: none;
    letter-spacing: normal;
}
.post.search-form table tbody th {
    font-size: 11px;
    text-align: right;
    margin-right: .6em;
}
.post.search-form table tbody th,
.post.search-form table tbody td {
    width: 50%;
    padding: 0 4px 4px 0;
    align-self: center;
}
.post.search-form input {
    max-width: 120px;
    width: 100%;
    padding: 3px 2px;
}
.post.search-form .SumoSelect {
    max-width: 120px;
    width: 100%;
}
.post.search-form select {
    max-width: 120px;
    width: 100%;
    padding: 2px;
}
.post.search-form table.m-top~table tbody td select {
    max-width: 120px;
    width: 60%;
}
.post.search-form .SumoSelect,
.post.search-form select {
    height: 24px;
    cursor: pointer;
}
.post.search-form input.cmn-toggle-yes-no+label::before,
.post.search-form input.cmn-toggle-yes-no+label::after {
    padding: 2px 7px;
}
.post.search-form .float-wrap,
.post.admin-window .float-wrap {
    margin: 20px -20px 0;
    padding-left: 20px;
    padding-right: 20px;
    border-top: 1px solid #e1e1e1;
    border-bottom: none;
}
.post.search-form .float-wrap .controller.bottom.right,
.post.admin-window .float-wrap .controller.bottom.right {
    text-align: right;
}
.post.search-form .export-label {
    margin-right: 5px;
    line-height: 1em;
    vertical-align: middle;
}

/*-------------------------------
    総数
-------------------------------*/
.post.nav-total-num {
    margin-top: 20px;
    padding: 0;
    background: transparent;
    font-size: 12px;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.post.nav-total-num+.post {
    margin-top: 20px;
}
.post.nav-total-num li {
    display: inline-block;
}
.post.nav-total-num li+li::before {
    content: "|";
    display: inline-block;
    width: 12px;
    margin-left: 3px;
}

/*-------------------------------
    ページネーション
-------------------------------*/
.pagination {
    margin: 20px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid #e1e1e1;
    letter-spacing: -.4em;
}
.pagination li {
    display: inline-block;
    border: 1px solid #ccc;
    border-right: none;
    color: #888;
    letter-spacing: normal;
    cursor: pointer;
}
.pagination li+li {
    border-left: 1px solid #ccc;
}
.pagination li:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.pagination li:last-child {
    border-right: 1px solid #ccc;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.pagination li.disabled,
.pagination li.active {
    padding: 8px 15px;
    cursor: context-menu;
}
.pagination li.active {
    background: #668ad8;
    border-color: #668ad8;
    color: #fff;
    font-weight: bold;
}
.pagination li a {
    display: block;
    padding: 8px 15px;
    color: #888;
    text-decoration: none;
}

/*-------------------------------
    フッタ
-------------------------------*/
footer::before {
    content: "";
    display: block;
    clear: both;
}

/*-------------------------------
    ログイン
-------------------------------*/
.container.login {
    width: 400px;
    margin: 0 auto;
    padding: 150px 0 0;
}
.login-header {
    max-width: 400px;
    margin: 40px auto 20px;
    text-align: center;
}
.login-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 30px 40px;
    border: 1px solid #999;
    border-radius: 5px;
    background: #fff;
    text-align: center;
}
.login-form dl+dl {
    margin-top: 20px;
}
.login-form dl:last-of-type {
    margin-bottom: 20px;
}
.login-form dl dt {
    margin-bottom: 5px;
    text-align: left;
}

/*-------------------------------
    カレンダー
-------------------------------*/
.calendar .calendar-head {
    font-size: 18px;
}
.calendar .calendar-controller ul {
    letter-spacing: -.4em;
}
.calendar .calendar-controller ul li {
    display: inline-block;
    width: 50%;
    text-align: left;
    letter-spacing: normal;
}
.calendar .calendar-controller ul li+li {
    text-align: right;
}
.calendar .calendar-controller ul li a {
    font-size: 14px;
}
.calendar table.calendar thead th {
    border: 1px solid #e1e1e1;
}
.calendar table.calendar thead th,
.calendar table.calendar tbody td {
    text-align: center;
}
.calendar table.calendar tbody td {
    padding: 15px 5px;
    border: 1px solid #e1e1e1;
}
.calendar table.calendar tbody td.empty,
p.inner-content .empty {
    background: #b0b0b0;
    color: #fff;
}
/* 予約カレンダー(ヒートマップ) 潤沢 */
.calendar table.calendar tbody td.abundance,
p.inner-content .abundance {
    background: #e5f2ff;
}
/* 予約カレンダー(ヒートマップ) 余裕がある */
.calendar table.calendar tbody td.afford,
p.inner-content .afford {
    background: #ffffd6;
}
/* 予約カレンダー(ヒートマップ) 残り少ない */
.calendar table.calendar tbody td.a-few,
p.inner-content .a-few {
    background: #fcc;
}
/* 予約カレンダー(ヒートマップ) 空き無し */
.calendar table.calendar tbody td.full,
p.inner-content .full {
    background: #ff7f7f;
}

/*-------------------------------
    休日設定カレンダー
-------------------------------*/
.holiday .holiday-band {
    position: relative;
    width: 100%;
    padding: 3px 4px;
    border: 1px solid #fff;
    border-radius: 3px;
    background-color: #b0b0b0;
    font-size: 11px;
    letter-spacing: -.1em;
    word-break: break-all;
    white-space: normal;
}
.holiday .holiday-band:hover {
    z-index: 99999999 !important;
    box-shadow: 0 0 4px 1px rgba(100, 100, 100, 0.6);
    -webkit-box-shadow: 0 0 4px 1px rgba(100, 100, 100, 0.6);
}
.holiday .holiday-band.public {
    background-color: #ff7f7f;
}
.holiday .holiday-band.public button {
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 11px;
    text-align: left;
    letter-spacing: -.1em;
    word-break: break-all;
    white-space: normal;
    outline: none;
}
.holiday .holiday-band.staff {
    background-color: #ff870f;
}
.holiday .holiday-band a {
    display: block;
    width: 100%;
    color: #fff;
    text-decoration: none;
}

/*-------------------------------
    ポップアップ情報
-------------------------------*/
.popup-information-box {
    position: fixed;
    right: -670px;
    bottom: 20px;
    width: 650px;
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(100, 100, 100, 1);
    -webkit-box-shadow: 0 0 20px 0 rgba(100, 100, 100, 1);
    transition: all .6s ease;
    -webkit-transition: all .6s ease;
}
.popup-information-box.close {
    right: -650px;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.popup-information-box.open {
    right: 20px;
}
.popup-information-box-close {
    position: absolute;
    top: -1px;
    right: 10px;
    color: #fff;
}
.close .popup-information-box-close {
    top: 0;
    left: -20px;
    width: 20px;
    height: 38px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: #ea5549;
    cursor: pointer;
    transition: all .6s ease;
    -webkit-transition: all .6s ease;
}
.popup-information-box-close::before {
    content: "×";
    width: 20px;
    height: 30px;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace;
    cursor: pointer;
}
.close .popup-information-box-close::before {
    content: "\f0d9";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    height: 25px;
    margin: auto;
    font-size: 16px;
    font-family: FontAwesome;
}
.popup-information-box-content {
    padding-bottom: 10px;
    line-height: 1em;
}
.popup-information-box-content h4 {
    height: 38px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #ea5549;
    color: #fff;
}
.popup-information-box-content h4::before {
    content: "\f05a";
    margin-right: 5px;
    color: #fff;
    font-size: 18px;
    font-family: FontAwesome;
}
.popup-information-box-content h5 {
    margin-bottom: 15px;
    padding: 0 10px;
    font-size: 14px;
}
.popup-information-box-content ul {
    height: 120px;
    margin-left: 10px;
    padding: 0 10px;
    font-size: 13px;
    overflow-y: scroll;
    overscroll-behavior: contain;
}
.popup-information-box-content ul li::before {
    content: "\f111";
    margin-right: 5px;
    font-size: 8px;
    font-family: FontAwesome;
}
.popup-information-box-content ul li+li {
    margin-top: 10px;
}

/*-------------------------------
    ポップアップアニメーション
-------------------------------*/
.mfp-bg,
.mfp-wrap .mfp-content {
    transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
}
.mfp-wrap .mfp-content {
    max-width: 1100px;
    width: 90%;
}
/* overlay at start */
.mfp-fade.mfp-bg {
    opacity: 0;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
    opacity: .65;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}
/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

/*-------------------------------
    SumoSelect
-------------------------------*/
.SumoSelect {
    vertical-align: middle;
}
.post:not(.search-form) .SumoSelect {
    height: 28px;
}
.SelectBox {
    padding: 2px;
}
.SumoSelect>.CaptionCont {
    border-color: #111;
    border-radius: 3px;
    cursor: pointer;
}
.post:not(.search-form) .SumoSelect>.CaptionCont {
    height: 100%;
    padding: 4px;
}
.SumoSelect>.CaptionCont>label,
.SumoSelect>.CaptionCont>span {
    cursor: pointer;
}
.SumoSelect>.CaptionCont>label {
    width: 16px;
}
.post:not(.search-form) .SumoSelect>.CaptionCont>span {
    height: 100%;
}
.SumoSelect>.CaptionCont>label>i {
    width: 8px;
    height: 9px;
    background-size: cover;
}
.SumoSelect>.optWrapper {
    min-width: 100px;
    width: auto;
}
.SumoSelect>.optWrapper,
.SumoSelect.open>.optWrapper {
    top: 26px;
}
.post:not(.search-form) .SumoSelect>.optWrapper,
.post:not(.search-form) .SumoSelect.open>.optWrapper {
    top: 28px;
}
.SumoSelect .select-all.partial>span i,
.SumoSelect .select-all.selected>span i,
.SumoSelect>.optWrapper.multiple>.options li.opt.selected span i {
    background-color: #04c434;
}
.SumoSelect>.CaptionCont>span.placeholder {
    color: #888;
}
.SumoSelect .select-all {
    height: auto;
    padding: 6px 0 5px 35px;
}
.SumoSelect.open .search-txt {
    top: -1px;
    padding: 3px 2px;
    border: 1px solid #111;
    border-radius: 3px;
    z-index: 99999;
}
.post:not(.search-form) .SumoSelect.open .search-txt {
    height: 27px;
}
.SumoSelect.open input.search-txt:focus::-webkit-input-placeholder { color: #888; }
.SumoSelect.open input.search-txt:focus:-moz-placeholder { color: #888; } /* FF 4-18 */
.SumoSelect.open input.search-txt:focus::-moz-placeholder { color: #888; } /* FF 19+ */
.SumoSelect.open input.search-txt:focus:-ms-input-placeholder { color: #888; } /* IE 10+ */

/*-------------------------------
    breadcrumbs
-------------------------------*/
.nav-cd-multi-steps {
    background-color: #dedede;
}
.cd-breadcrumb li > *,
.cd-multi-steps li > * {
    font-size: 12px;
}
.cd-multi-steps li em {
    font-style: normal;
}
.cd-multi-steps.text-top.count li > *::before,
.cd-multi-steps.text-bottom.count li > *::before {
    font-size: 12px;
}
.SumoSelect>.optWrapper>.options li.opt+li.opt {
    margin-top: 0 !important;
}

/*-------------------------------
    緯度経度ピッカー
-------------------------------*/
.latlng-picker-wrap {
    display: inline-block;
    position: relative;
}
.latlng-picker {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    height: 0;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(100, 100, 100, 1);
    -webkit-box-shadow: 0 0 20px 0 rgba(100, 100, 100, 1);
    transition: all .6s ease;
    -webkit-transition: all .6s ease;
    z-index: 100;
}
.latlng-picker-wrap.open .latlng-picker {
    top: 25px;
    height: 200px;
}
.latlng-picker-esc-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    height: 0;
    margin: 0 auto;
    pointer-events: none;
    transition: all .6s ease;
    -webkit-transition: all .6s ease;
    overflow: hidden;
    z-index: 101;
}
.latlng-picker-wrap.open .latlng-picker-esc-wrap {
    top: 30px;
    height: 200px;
}
.latlng-picker-esc {
    position: absolute;
    top: 185px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    height: 0;
    margin: auto;
    background-color: transparent;
    color: transparent;
    font-size: 14px;
    text-align: center;
    transition: all .6s ease;
    -webkit-transition: all .6s ease;
}
.latlng-picker-wrap.open .latlng-picker-esc {
    top: 0;
    height: 1.5em;
    background-color: #666;
    color: #fff;
    opacity: .8;
    overflow: hidden;
    animation-name: latlng-picker-esc-animation;
    animation-duration: .6s;
    animation-delay: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes latlng-picker-esc-animation {
    100% {
        color: transparent;
        opacity: 0;
    }
}

/*-------------------------------
    タブ
-------------------------------*/
.tabs {
    background-color: #fff;
}
.tab_item {
    float: left;
    display: block;
    width: calc(100%/6);
    height: 40px;
    background-color: #eee;
    color: #565656;
    text-align: center;
    line-height: 40px;
    transition: all 0.2s ease;
}
.tab_item:hover {
    opacity: .75;
}
.tabs input[name="tab_item"] {
    display: none;
}
.tab_content {
    display: none;
    clear: both;
    padding: 20px 20px 0;
    border-top: 3px solid #5ab4bd;
    overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content,
#tab6:checked ~ #tab6_content {
    display: block;
}

.tabs input:checked+.tab_item {
    background-color: #5ab4bd;
    color: #fff;
}

.tab_item~.tab_item {
    border-left: 1px solid #c9c9c9;
}

/*-------------------------------
    スクロールバー
-------------------------------*/
.scrollbar::-webkit-scrollbar {
    width: 10px;
}
.scrollbar::-webkit-scrollbar:horizontal {
    height: 10px;
}
.scrollbar::-webkit-scrollbar-track{
    background-color: #fff;
    border-left: solid 1px #ececec;
}
.scrollbar::-webkit-scrollbar-thumb{
    background: #ccc;
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px #fff;
}

/*-------------------------------
    DnD
-------------------------------*/
.draggable {
    cursor: move;
}
.dnd-over{
    border: 2px dashed #b9b9b9 !important;
}
/* 打ち消すために.post tableから指定してる */
.post table tr:not(.dnd-over).empty-dnd {
    border: 2px dashed #ddd;
}
.post table tr.empty-dnd td {
    padding: 2px 3px;
}
.post table .draggable.this~.empty-dnd {
    border: none;
    visibility: hidden;
}

/*-------------------------------
    ポップアップメッセージ
-------------------------------*/
.popup-message-information-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    height: 0;
}
.popup-message-information-wrap.open {
    height: auto;
}
.popup-message-information-box {
    position: relative;
    width: 320px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 5px 3px rgba(100, 100, 100, .3);
    -webkit-box-shadow: 0 0 5px 3px rgba(100, 100, 100, .3);
}
.popup-message-information-box.open+.popup-message-information-box.open {
    margin-top: 10px;
}
.popup-message-information-box-close {
    position: absolute;
    top: -1px;
    right: 10px;
}
.popup-message-information-box-close::before {
    content: "×";
    width: 20px;
    height: 20px;
    font-style: normal;
    font-size: 22px;
    font-family: Arial, Baskerville, monospace;
    cursor: pointer;
}
.popup-message-information-box h2 {
    margin-bottom: 5px;
    font-size: 13px;
    text-align: center;
}
.popup-message-information-box p {
    font-size: 12px;
}

.download-bar {
    width: 100%;
    font-size: 14px;
    line-height: 30px;
    color: #fff;
    padding-left: 10px;
}

.download-bar.creating {
    background: #f3a56c;
}

.download-bar.created {
    background: #1f9e02;
    display: flex;
    align-items: center;
}
.download-bar.created button {
    font-size: 16px;
    background: none;
    border: none;
    color: #000fff;
    padding-bottom: 0;
    border-bottom: #000fff solid 1px;
    padding: 0;
    margin-left: 5px;
    border-radius: 0;
}

.download-bar.errored {
    background: #2b2b2b;
}

.file-import {
    display: flex;
}

.file-import input {
    width: 20%;
}

.backup-title {
    margin: 30px 0 10px;
}

td.sfid{
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100px;
}

.integration-button {
    text-align: right;
    margin-bottom: 10px;
}

.integration-datas {
    overflow: scroll;
}

.integration-result{
    margin: 40px 0 0;
    background: #5fbefd;
    text-align: center;
    font-size: 18px;
}
.integration-button-wrap{
    display: flex;
    justify-content: center;
}

.integration-button-wrap .integration-button-lg {
    text-align: center;
    margin-top: 20px;
}
.integration-button-wrap .integration-button-lg .button {
    width: 200px;
    height: 50px;
    font-size: 18px;
}

.integration-button-wrap .back-button {
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.integration-attention {
    color: #ea5549;
}

.customer-import-button{
    margin: 10px 0 20px;
}

.customer-ids-check{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.post.search-form .customer-ids-check input{
    width: 10px;
}

.integration-table td, .integration-table th{
    vertical-align: middle;
}
.integration-table td.chack-box{
    display: flex;
    align-items: center;
}

.is-not-delete-check {
    display: flex;
}

.integration-checkbox {
    vertical-align: middle;
}

.upload-error-table {
    font-size: 12px;
}

.upload-error-table td {
    padding: 0 3px;
}

.check-label {
    display: flex;
}

#download-hidden-button {
    margin-left: 20px;
}