.test {
    padding: 3px 3px 3px 3px;
    background-color: bisque;
    border: 1px solid #FFFFFF;
}


body {
    color: #666;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    background-color:#f5f5f5;
    font-size: 120%;
    line-height: 150%;
    letter-spacing: 0.1em;
}

.container {
    box-sizing: border-box;
    border-collapse: collapse;
    padding-left: 5px;
}


h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

#site_description {
    font-size: 80%;
}

.left {
    float: left;
}

.clear {
    clear: left;
}

.center {
    text-align: center;
}

/*.right {
    text-align: right;
}*/

.ui-datepicker-trigger {
    margin-bottom: -4px;
}


.th {
    background-color: #f0f0f0;
    font-weight: bold;
}



.table {
    display:table; 
    border-collapse: collapse;
    font-size: 85%;
    font-weight: bold;
}

.row {
    display:table-row;
}

.row>div {
    display:table-cell;
    padding:10px;
    border:1px solid #E4E4E4;
    vertical-align: top;
}




/* ▼メニュー一覧のCSS */
.menu-list-box {
    background-color: #ecf5ff;
    width:  750px;
    height: 180px;
    border: 1px solid #cef0f4;
    margin-top: 10px;
}

.menu-left {
    background-color: #ecf5ff;
    padding: 10px;
    width:  570px;
    height: 178px;
    border-right: 1px solid #cef0f4;
    box-sizing: border-box;
}

.menu-right {
    background-color: #ecf5ff;
    width:  150px;
    text-align: center;
    padding-top: 53px;
    padding-left: 5px;
}


.menu-tag {
    background-color: #ecf5ff;
    width:  500px;
    height: 20px;
    padding-bottom: 10px;
}

.menu-name {
    background-color: #ecf5ff;
    width:  420px;
    height: 20px;
    border-bottom: 2px solid #4AA1AB;
}


.menu-price {
    background-color: #ecf5ff;
    width:  120px;
    height: 20px;
    text-align: right;
    border-bottom: 2px solid #4AA1AB;
    color: #f00;
}

.menu-img {
    background-color: #ecf5ff;
    width:  120px;
    height: 100px;
    text-align: center;
    padding-top: 10px;
}

.menu-comment {
    background-color: #ecf5ff;
    padding-top: 10px;
    width:  420px;
    height:  95px;
}

.menu-time {
    background-color: #ecf5ff;
    padding-top: 10px;
    width:  420px;
}

/* ▲メニュー一覧のCSS */


/* ▼パンクズCSS▼ */

.flow_area {
    margin: 0 0 10px 0;
}


ol {
    padding: 0;
}


.bookStepList {
    border: 1px solid #565656;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: table;
    line-height: 1;
    overflow: hidden;
    width: 100%;
    text-align: left;
}
.bookStepList > li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #565656;
    display: table-cell;
    font-size: 13px;
    font-weight: bold;
    height: 42px;
    position: relative;
    vertical-align: middle;
    background-color: none;                                       /* パンクズ背景色 */
}
.bookStepList > li > span {
    display: block;
    font-size: 10px;
    margin-bottom: 4px;
}
.bookStepList > li > span:before,
.bookStepList > li > span:after {
    border-style: solid;
    content: "";
    display: block;
    position: absolute;
}
.bookStepList > li > span:before {
    border-color: transparent transparent transparent rgba(255, 102, 0, 0);
    border-width: 22px 0 22px 13px;
    right: 0;
    top: -1px;
    background-color: none;                                       /* 右▲ の背景色 */
}
.bookStepList > li > span:after {
    border-color: transparent transparent transparent #565656;    /* 右▲ の色 */
    border-width: 22px 0 22px 13px;
    right: 1px;
    top: -1px;
}
.bStep1 {
    padding-left: 10px;
    width: 120px;
}
.bStep2 {
    padding-left: 10px;
    width: 160px;
}
.bStep3 {
    padding-left: 10px;
    width: 130px;
}
.bStep4 {
    padding-left: 10px;
    width: 130px;
}
.bStepEnd {
    line-height: 42px;
    text-align: center;
    width: 90px;
}
.bStep1:before,
.bStep2:before {
//    background-image: url(icon_book.png);
    background-repeat: no-repeat;
    display: block;
    position: absolute;
}
.bStep1:before {
    height: 20px;
    left: 10px;
    top: 11px;
    width: 30px;
}
.bStep2:before {
    background-position: 0 -90px;
    height: 30px;
    left: 10px;
    top: 5px;
    width: 30px;
}
.bookStepList > .active    { color: #3F4EFF; }
.bookStepList > .passive   { color: #CCCCCC; }
.bStep1.active:before      { background-position: 0 0; }
.bStep1.passive:before     { background-position: 0 -60px; }
.bStep2.active:before      { background-position: 0 -130px; }
.bStep2.passive:before     { background-position: 0 -210px; }

/* ▲パンクズCSS▲ */



/* 管理画面 スケジュール一覧 */
.lineAll {
    box-shadow: 0 0 0 1px #FFFFFF inset;
}

.lineLeft {
    border-left: 1px solid #FFFFFF;
}

.lineRight {
    border-right: 1px solid #FFFFFF;
}

.lineBottom {
    border-bottom: 1px solid #FFFFFF;
}

.lineTop {
    border-top: 1px solid #FFFFFF;
}

.even {
    border-right:    1px dotted #C3C3C3;
}

.odd {
    border-left:     1px dotted #C3C3C3;
}

/* フロント スケジュール一覧 */
.FlineLeft {
    border-left: 1px solid #929FAD;
    box-sizing: border-box;
}

.FlineRight {
    border-right: 1px solid #929FAD;
    box-sizing: border-box;
}

.FlineBottom {
    border-bottom: 1px solid #786A5E;
    box-sizing: border-box;
}

.FlineTop {
    border-top: 1px solid #929FAD;
    box-sizing: border-box;
}




.headerYM {
    background-color: #FDECBE;
    height: 30px;
    width: 100px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 10px;
}

.header {
    background-color: #FDECBE;
    height: 20px;
    width: 100px;
    text-align: center;
}

.time {
    background-color: #ecf5ff;
    height: 25px;
    width: 100px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.dd {
    background-color: #FDECBE;
    height: 20px;
    width: 50px;
    text-align: center;
}


.book-list {
   /*background-color: #FFFFCC;*/
    height: 25px;
    width: 50px;
    text-align: center;
    line-height: 1.5em;
    font-size: 150%;
}

.book-list:hover {
    background-color: #F3F35E;
}


.sat{
    background-color: lightblue;
    color: #618AFF;
}
.sun{
    background-color: lightpink;
    color: #FF0000;
}
.today{
    background-color: #FFCC33;
}


.cal {
    height: 30px;
    text-align: center;
    background-color: #FDECBE;
    padding-top: 5px;
    padding-bottom: 5px;
}

.cal2 {
    height: 30px;
    text-align: center;
    background-color: #FFCC66;
    padding-top: 5px;
    padding-bottom: 5px;
}


.cel1 {
    width: 50px;
}

.cel2 {
    width: 100px;
}

.cel3 {
    width: 150px;
}

.cel4 {
    width: 200px;
}

.cel5 {
    width: 250px;
}

.cel6 {
    width: 300px;
}

.cel7 {
    width: 350px;
}

.cel8 {
    width: 400px;
}

.cel9 {
    width: 450px;
}

.cel10 {
    width: 500px;
}


/* スタッフ */
.staff-box {
    padding: 3px 3px 3px 3px;
    width : 180px;
    height: 300px;
/*    background-color: bisque; */
    border: 1px solid #E4E4E4;
    margin: 5px;
}

.staff-picture {
    width : 150px;
    height: 140px;
}

.staff-list-comment {
    width : 340px;
    height: 100px;
    padding-top: 10px;
}

.staff-comment {
    width : 180px;
    height: 100px;
}

.staff-other {
    width : 300px;
    height: 20px;
    padding-top   : 10px;
}

.simei-title {
    border-bottom: 2px solid #BFBFBF;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

/* スタッフ指定なし */
.staff-box-mini {
    padding: 3px 3px 3px 3px;
    width : 148px;
    height: 40px;
/*    background-color: bisque; */
    border: 1px solid #FFFFFF;
    padding-top: 10px;
}

/* スタッフ(スケジュール) */
.staff-box-schedule {
    padding: 3px 3px 3px 3px;
    width : 100%;
    height: 180px;
/*    background-color: bisque; */
    border: 1px solid #786a5e;
    margin-bottom: 10px;
}


/* ボタン基本CSS */
.button {
    display: inline-block;
    width: 120px;
    height: 30px;
    text-align: center;
    text-decoration: none;
    line-height: 30px;
    outline: none;
}

.button::before,
.button::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
.button,
.button::before,
.button::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.list-btn {
    padding: 5px;
}

/* ボタン挙動 */
.button {
    position: relative;
    background-color: #844A1C;
    border-radius: 4px;
    color: #FFEDCD !important;
    line-height: 30px;
    -webkit-transition: none;
    transition: none;
    box-shadow: 0 3px 0 #673712;
    margin-bottom: 10px;
}
.button:hover {
    background-color: #88562E;
    box-shadow: 0 3px 0 #844A1C;
}
.button:active {
    top: 3px;
    box-shadow: none;
}

/* 戻るボタンの色を定義 */
.btn-back{
    background-color: #844A1C;
    box-shadow: 0 3px 0 #673712;
    /*text-shadow: 0 1px 1px #333;*/
}
.btn-back:hover {
    background-color: #88562E;
    box-shadow: 0 3px 0 #844A1C;
}

/* 変更ボタンの色を定義 */
.btn-change{
    background-color: #844A1C;
    box-shadow: 0 3px 0 #673712;
}
.btn-change:hover {
    background-color: #88562E;
    box-shadow: 0 3px 0 #844A1C;
}


.msg {
    padding-top: 10px;
    color: red;
}

/* 予約完了画面 */
.yoyaku {
    background-color: #DBEAFF;
    color: red;
}


/* 管理画面 スケジュール管理 */
.book-header {
    border: 1px solid #000;
    border-width: 1px 0px 1px 1px;
    box-sizing: border-box;
    background-color: #CCFFCC;
    height: 100%;
    width:  60px;
    text-align: center;
    padding-top:    16px;
    padding-bottom: 16px;
    white-space: nowrap;
}

.book-time {
    border: 1px solid #000;
    border-width: 1px 0px 0px 1px;
    box-sizing: border-box;
    background-color: lightblue;
    height: 200px;
    width:   60px;
    text-align: center;
//    padding-top: 30px;
//    padding-bottom: 30px;
}

.book-time p{
    padding: 5px;
}

.book-staff {
    border: 1px solid #000;
    border-width: 1px 0px 1px 1px;
    box-sizing: border-box;
    background-color: #F9C5EB;
    height: 100%;
    width: 280px;
    text-align: center;
    padding-top:    16px;
    padding-bottom: 16px;
}

.book-main {
    border: 1px solid #000;
    border-width: 1px 0px 0px 1px;
    box-sizing: border-box;
//    background-color: #E0F3F9;
    height: 200px;
    width:  280px;
//  text-align: center;
//    padding-top: 30px;
//    padding-bottom: 30px;
}
.book-main p{
    padding: 5px;
}
.book-main a{
    font-weight: bold;
}


.disp_menu{
    padding-left: 5px;
}

.disp_tel{
    padding-left: 5px;
}

/*グレー背景*/

.bk_color {
    background-color: #E2DEDE;
}

.staff-on {
    background-color: #FFEAED;
}

.stock-none {
    background-color: #C0C0C0;
}

.yoyaku-ok {
    background-color: lightpink;
}

.simei {
    background-color: #CCFFCC;

}

/*指名なし予約の背景*/

.simei_gray {
    background: #f0f0f0;
}


.table-top {
    border-top:    1px solid #000;
    box-sizing: border-box;
}
.table-bottom {
    border-bottom: 1px solid #000;
    box-sizing: border-box;
}
.table-top-none {
    border-top:    1px solid #000;
    box-sizing: border-box;
}
.table-left {
    border-left:   1px solid #000;
    box-sizing: border-box;
}
.table-right {
    border-right:  1px solid #000;
    box-sizing: border-box;
}

.wide {
    width: 1000px;
}

.sub-menu {
    height:  55px;
    width: 1000px;
}




.fixed {
    padding-top: 10px;
    position: fixed;
    top: 0px;       //一番上なら0pxに指定してください
    left: 20px;
    z-index: 1;
    background: white;//不要であればいらないです
}

/* アイコン */
.MenuIcons li {
    float: left;
    margin-right: 5px;
    padding: 1px 10px;
    color: #FFF;
    text-align: center;
    white-space: nowrap;
    font-size: 10px;
    min-height: 1px;
}
.MenuIcon {
    background-color: #85C53A;
    margin-bottom: 5px;
}


table.staff-list {
    width: 100%;
    margin-bottom: 0px;
}

table.staff-detail {
    width: 200px;
    margin-bottom: 0px;
}


.check-area {
    margin : 0 0 10px 0;
    padding: 10px 0;
    clear: both;
    width: 100%;
    background: #f5f5f5;
    text-align: center;
}



.link_box{
    position:relative;
}
 
.link_box a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

}

.link_box a:hover{
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}






.table60 {
    width: 60%;
}

.mg10 {
    margin-right: 10px;
    margin-left: 10px;
}

/* 最後の方に記載が望ましい */
.evenF {
    border-bottom:   1px dotted #C3C3C3;
}

.none {
    background-color: #FFF;
}
.none:hover {
    background-color: #FFF;
}

.warning {
    color: #f90;
}

.row {
    padding: 0px;
    border-collapse: collapse;
    box-sizing: border-box;
}

.row>div.nb {
    border: 0px;
    padding: 0px;
    border-collapse: collapse;
    box-sizing: border-box;
}

.admin {
    background: #FFF5AB;
}

.assign {
    background: #C5C9FF;
}

.simei.assign_err {
    background: red;
}

.simei_gray.admin {
    background: #f0f0f0;
}


.simei_gray.assign_err {
	background: red;
}

p.each_yoyaku {
    margin-bottom: 5px;
}


/* スケジュール表 */
.even {
    // border-right: 2px #ccc dotted;
}

th.left_staff {
    background: #FFEAED;
}

th.leftside {
    background: #D5F5FF;  
}

.schedule a:link {
    color: #FD7575;
	/*padding-left:20px;*/
}

.schedule td:last-child {
    border-right: solid 1px #ccc;
}

table.schedule td {
    min-width: 40px;
    white-space: nowrap;
	max-width: 40px;
}

table.schedule th {
    min-width: 90px;
    white-space: nowrap;
}

.no_shimei {
    padding: 2px;
    padding-left: 5px;
}

.simei.assign_err a:link {
    color: #F3F35E;
}

.simei.assign_err a:hover {
    color: #39c;
}

/*その他お問い合わせ事項*/

textarea.txtarea {
    color: #000;
}

/*指名なしカラー*/

.simei_gray a:link {
    color: #aaaaaa;
}

.simei{
    background-image: url("/files/book/web.png");
    background-position: 2% 10%;
    background-repeat: no-repeat;
	background-size: 18px;
}


.admin{
   background-image: url("/files/book/pc.png");
   background-repeat: no-repeat;
   background-position: 2% 10%;
   background-size: 18px;
}

.simei_gray.assign_err{
/*    background-image: url("/files/book/pc.png"); */      /* 指名なし は、アイコンを表示しない */
    background-position: 2% 10%;
    background-repeat: no-repeat;
	background-size: 18px;
}

.simei.assign_err{
    background-image: url("/files/book/web.png");
    background-position: 2% 10%;
    background-repeat: no-repeat;
	background-size: 18px;
}

.admin.simei.assign_err{
    background-image: url("/files/book/pc.png");
    background-repeat: no-repeat;
    background-position: 2% 10%;
    background-size: 18px;
}

p.each_yoyaku img {
    width: 20px;
    height: auto;
}

td.simei_gray.no_shimei a {
    padding-left: 0;
}


td.simei_gray.no_shimei.admin a {
    padding: 0;
}

