/* css reset */
@charset "utf-8";
html, body, div, span, iframe,
h1, h2, h3, h5, h6, p, img, a,
ol, ul, li,
form, label,
table, tbody, tfoot, thead, tr, th, td,
article,footer, header, menu, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  list-style: none;
  text-decoration: none;
  vertical-align: baseline;
}

/* 蜈ｱ騾咾SS */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 10px;
}

.container2 {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 10px;
}

html {
    min-height: 100%;
    position: relative;
}

.wrapper {
    padding: 80px 0;
    margin-bottom: 30px;
}

    .wrapper-title {
        margin-bottom: 20px;
        border-bottom: 1px solid #a2aab0;
        height: 40px;
        margin-top: 10px;
    }

    .wrapper-title h3{
        font-size: 25px;
        color: #3e3e3b;
    }

    .wrapper-title p {
        font-size: 13px;
        color: #a2aab0;
    }

a:hover,
.btn:hover {
    opacity: 0.6;
    cursor: pointer;
}
    
.btn {
    padding: 10px 30px;
    font-size: 12px;
    border: none;
    margin: 1px 0;
    border-radius: 5px;
}
    
.btn-submit {
    background-color: #4c586f;
    border: 1px solid #4c586f;
    color: #fff;
}
    
.btn-green {
    background-color: #20c977;
    border: 1px solid #20c977;
    color: #fff;
    padding: 5px 6px;
    font-size: 9px;
}
    
.btn-red {
    border: 1px solid #d84950;
    color: red;
    padding: 5px 10px;
    font-size: 12px;
}
    
.btn-blue {
    background-color: #4a80d6;
    border: 1px solid #4a80d6;
    color: #fff;
    padding: 10px 15px;
    font-size: 12px;
}

.btn-gray5 {
    background-color: #a2aab0;
    border: 1px solid #a2aab0;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
}

.btn-gray {
    background-color: #a2aab0;
    border: 1px solid #a2aab0;
    color: #fff;
    padding: 10px 15px;
    font-size: 12px;
}

.submitbtn {
    border-radius : 10%;          /* 角丸       */
    font-size     : 12pt;        /* 文字サイズ */
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    // padding       : 12px 12px;   /* 余白       */
    background    : #000066;     /* 背景色     */
    color         : #ffffff;     /* 文字色     */
    line-height   : 0.1em;         /* 1行の高さ  */
    transition    : .5s;         /* なめらか変化 */
    box-shadow    : 3px 3px 1px #666666;  /* 影の設定 */
    border        : 2px solid #000066;    /* 枠の指定 */
    width         : 90%;
    hight         : 150px;
    max-width     : 100px;
    min-width     : 50px;
}

.submitbtn:hover {
    box-shadow    : none;        /* カーソル時の影消去 */
    color         : #000066;     /* 背景色     */
    background    : #ffffff;     /* 文字色     */
}    
    
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-Dategroup {
    margin-bottom: 20px;
    text-align: left;
    width: 100%;
    max-width: 200px;
    min-width: 100px;
}
.form-Dateright {
    display: inline-block;
    margin-bottom: 20px;
    text-align: right;
    width: 100%;
    max-width: 500px;
    min-width: 200px;
}

div p {
  display: inline-block;
}

#price {
    width: 10%;
    max-width: 200px;
    min-width: 100px;
}

input[type="date"] {
  position: relative;
  padding: 0 10px;
  width: 150px;
  height: 36px;
  // border: 1;
  border: 1px solid #a2aab0;
  background: transparent;
  box-sizing: border-box;
  font-size: 14px;
  color: #999;
}

input,
textarea {
    /*  width: 100%;   */
    border: 1px solid #ebeced;
    border-radius: 5px;
}
    
    input {
        /* height: 25px;   */
    }
    
    textarea {
        height: 300px;
    }
/* login */
.login-wrapper {
    text-align: center;
    padding: 80px 0 ;
}
    .login-wrapper-title {
        margin-bottom: 30px;
    }

    .login-wrapper-title h3{
        font-size: 25px;
        color: #3e3e3b;
    }

    .login-wrapper-title p {
        font-size: 13px;
        color: #a2aab0;
    }

.login {
    padding: 50px 0; 
    width: 50%;
    margin: 0 auto;
    background-color: #ebeced;
}
    .login-form {
        width: 70%;
        margin: 0 auto;
    }

    .login-form input {
        border: none;
        width: 100%;
        height: 25px;
    }

    .login-form p {
        text-align: left;
    }

/* dashboard.html */
/* header */
header {
    width: 100%;
    height: 60px;
    background-color: #ebeced;
    position: fixed;
    z-index: 1;
}

.header-logo h1{
    float:left;
    padding-right: 15px;
    font-size: 18px;
}

.header-logo a {
    color: #4c586f;
    line-height: 60px;
}

    .menu-icon {
        display: none;
    }

    .menu-right {
        float:right;
        line-height: 60px;
    }

    .menu-right a {
        color: #4c586f;
    }

    .menu-right a:hover {
        color: #a2aab0;
    }

/* boxs */
.boxs {
        display: flex;
    }

    .box {
        display: inline-block;
        width: 12%;
        height: 130px;
        border:1px solid #ebeced;
        margin: 0 5px;
        text-align: center;
        color: #3e3e3b;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
        }
    .box_dummy {
        display: inline-block;
        width: 5%;
        height: 130px;
        border:1px solid #ebeced;
        margin: 0 5px;
        text-align: center;
        color: #3e3e3b;
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
        }
    .box:hover {
        color: #4c586f;
    }
    .icon{
        font-size: 65px;
        height: 75px;
        line-height: 77px;
    }
    .box p {
        font-size: 13px;
        font-weight: bold;
    }
    .img60 {
        width: 96px;
        height: 77px;
        /*   height: auto;   */
    }

/* footer */
footer {
    height: 30px;
    background-color: #4c586f;
    text-align: right;
    bottom: 0;
    position: absolute;
    width: 100%;
}

    footer p {
        line-height: 30px;
        color: #fff;
        font-size: 12px;
    }

/* create_news */
.edit-form {
    width: 80%;
    margin: 0 auto;
}
    
    .edit-form input,
    .edit-form textarea{
        width: 100%;
        border: 1px solid #a2aab0;
    }
    
    .edit-form button{
        float:right;
    }
    
    .edit-form textarea {
        height: 300px;
    }

/* news.php */
.list table{
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
}
    .list tr{
        height: 5px;
    }

    .list th,
    .list td {
        border:1px solid #a2aab0;
        padding: 10px 10px;
        height: 5px;
    }

    .list th {
        background-color: #ebeced;
        height: 5px;
    }

/* 店休日reservations.php */
/* login */
.hori_wrapper {
    padding: 80px 0;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}

.horiList table{
    margin: auto;
    border-collapse: collapse;
    margin: 10px 0;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    
}
    .horiList tr{
        border:1px solid #a2aab0;
        height: 5px;
    }

    .horiList th,
    .horiList td {
        border:1px solid #a2aab0;
        padding: 10px 10px;
        height: 5px;
    }

    .horiList th {
        background-color: #ebeced;
        height: 5px;
    }

    .horikbn {
        display: inline-block;
        height: 5px;
    }
    .horikbn input[type=checkbox] {
        width : 12px;
        height : 12px;
        -moz-transform : scale(1.4);
        -webkit-transform : scale(1.4);
        transform:  scale(1.4);
    }

/* users.php */
.serch {
    margin-top: -30px;
    text-align: right;
    width: 100%;
}
.serch input {
    width: 30%;
    padding: 4px;
}

.serch button {
    padding: 5px 10px;
}

.serch2 {
    margin-top: -30px;
    text-align: right;
    width: 100%;
}
.serch2 button {
    padding: 5px 10px;
}


/*paging*/
.paging {
    margin: 0 0 10px;
    padding: 10px 10px 5px;
    text-align: right;
}

.paging li {
    display: inline;
    margin: 0 1px;
}

.paging a,
.paging span {
    color: #4c586f;
    padding: 5px 8px;
}

.paging span {
    background-color: #4c586f;
    border-radius: 5px;
    color: #fff;
}

/* products */
.edit-form .imgform {
    border: none;
}
/* calendar.php */
.calendar-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.calendar-table th,
.calendar-table td{
    /*   border: 1px solid #ebeced;   */
    border: 1px solid #000;
    padding: 5px;
}

.calendar-table .header {
    background-color: #4c586f;
    color: #fff;
    font-size: 10px;
    text-align: left;
}

.month {
    text-align: center;
    width: 100%;
}

.month a {
    color: #4a80d6;
}

.left {
    float: left;
}

.right {
    float: right;
}

.day {
    height: 80px;
}
#calenderList .schedulePulldownList {
    text-align: left;
    color: #555;
    font-size: 11px;
    padding: 0px 0 3px;
    border-bottom: 1px dotted #aaa;
}
.reservBtnWrap {
    width: 100%;
}
.reservfrmWrap {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    height: 20px;
    min-width: 500px;
    max-width: 600px;
}
.reservForm {
    display: flex;    /* 角丸 display: inline; */
    width: 80%;
    min-width: 300px;
    max-width: 400px;

}

.list1_1 {
    text-align: left;
}
.list1_2 {
    text-align: center;
}
.evdayhead {
    display: flex;
    flex-wrap: wrap;
    height: 40px;
    width: 100%;
    min-width: 800ppx;
    max-width: 960ppx;
}

.evday {
    display: flex;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday2 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday6 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}

.evday7 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday8 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}

.evday9 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday10 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
    border-bottom:solid 1px gray;
}
.evday11 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday12 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday13 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday14 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday15 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday16 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday17 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday18 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday19 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday20 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday30 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday40 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}
.evday50 {
    display: none;
    flex-wrap: nowrap;
    height: 35px;
    width: 720px;
}


.dispCtl {
    display: flex;
    flex-wrap: nowrap;
    height: 20px;
    width: 100%;
}
.dispCtl2 {
    display: flex;
    flex-wrap: nowrap;
    height: 20px;
    width: 100%;
}

.day01 {
    height: 20px;
    width: 250px;
}
.day02 {
    height: 20px;
    width: 320px;
}
.day03 {
    height: 20px;
    width: 95%;
}
.day11 {
    width: 150px;
}
.day12 {
    height: 20px;
    width: 150px;
}
.day13 {
    height: 20px;
    width: 250px;
}
.day14 {
    clear: both;  
    height: 20px;
}
.day21 {
    height: 20px;
    width: 150px;
}
.day22 {
    height: 20px;
    width: 150px;
}
.day23 {
    height: 20px;
    width: 250px;
}
.day24 {
    clear: both;  
    height: 20px;
}
.frm12 {
    display: flex;
    flex-wrap: wrap;
    height: 50px;
    width: 300px;
}
hr {
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.1em;
    margin-block-end: 0.3em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}
h4 {
    display: block;
    margin-block-start: 0.33em;
    margin-block-end: 0.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.resultActon {
    width: 300px;
}
/* カート部分の定義  */
.cartbox {
   height: 50px;
}
.cart-table {
    border-collapse: collapse;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 14px;
    margin-right: auto;
    margin-left: auto;
    width: 90%;
    color: #000;   /* #fff; */
}
.cart-table th {
    /* background-color: #4c586f;  */
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 14px;
    color: #000;   /* #fff; */
    background-color: #c0c0c0;
}
.cart-table th, .cart-table td {
    border: 1px solid #ebeced;
    vertical-align: middle;
    padding: 5px 10px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 14px;
    color: #000;   /* #fff; */
}

.cart-table thead tbody {
  display: block;
}
.thfix {
  position: sticky;
  top: -1px;
  backcolor: #333;   /* #fff; */
}

.cart-table tbody {
  overflow-x: hidden;
  overflow-y: scroll;
  /* height: 100px; */
}

.menudiv {
    overflow: auto;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 300px;    
}
/* カート部分の定義  */
.menutable {
    border-collapse: collapse;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 14px;
    margin-right: auto;
    margin-left: auto;
    margin-top: -5px;
    width: 95%;
    height: 400px;
    color: #000;   /* #fff; */
}

.menutable th{
    border: 1px solid #ebeced;
    vertical-align: middle;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 14px;
    color: #000;   /* #fff; */
    background-color: #ebeced;  /* #fff; */
}
.menutable td {
    border: 1px solid #ebeced;
    vertical-align: middle;
    padding: 5px 10px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 14px;
    color: #000;   /* #fff; */
}


.menutable thead tbody {
  display: block;
}
.thfix {
  position: sticky;
  top: -1px;
  backcolor: #333;   /* #fff; */
}

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

.th5 {
    width: 5%;
}
.th7 {
    width: 7%;
}
.th1 {
    width: 10%;
}
.th10 {
    width: 12%;
}
.th11 {
    width: 11%;
}
.th12 {
    width: 30%;
    text-align: right;
}
.th13 {
    width: 10%;
    text-align: right;
}
.th14 {
    width: 13%;
    font-size: 9px;
    text-align: ecnter;
}

.th15 {
    width: 15%;
    font-size: 9px;
    text-align: ecnter;
}
.th17 {
    width: 17%;
    font-size: 9px;
    text-align: ecnter;
}.th20 {
    width: 20%;
    font-size: 9px;
    text-align: ecnter;
}
.th30 {
    width: 30%;
    font-size: 9px;
    text-align: ecnter;
}
.cart-btn {
    width: 100%;
    text-align: center;
}
.cartlist {
    width: 95%;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
table.st-tbl1{
    width: 1000px;
    /*見切れるように1000pxにしている*/
}
.st-tbl1 thead th {
  /* 縦スクロール時を固定 */
  position: sticky;
  top: -2px;
  /* tbody内のセルより手前に表示する */
  z-index: 1;
}
.st-tbl1 th:first-child {
  /* 横スクロールを固定 */
  position: sticky;
  left: 0;
  background: #f1f1fd;
}
.st-tbl1 thead th:first-child {
  /* 一番左端のthead thが横スクロール時に隠れない様に */
  z-index: 2;
  background: #424242;
}
.st-tbl1 th,
.st-tbl1 td{
  border-collapse: collapse;
  text-align: left;
  padding: .2rem .5rem;
  font-weight: normal;
}
.st-tbl1 thead th {
  background: #424242;
  color: #E0E0E0;
}
.th50 {
    width: 50px;
}

.th100 {
    width: 100px;
}
.th110 {
    width: 110px;
}
.th200 {
    width: 200px;
}

/* =======================================================
  レスポンシブ設定
======================================================= */
@media screen and (max-width: 568px) {
    .serch2 {
        margin-top: 5px;
        text-align: right;
        width: 100%;
    }
}