.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;
	overflow:hidden;
}

.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: auto;
	min-height: 30px;
	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: 30px;
	text-align: right;
	border-bottom: 2px solid #4AA1AB;
	color: #f00;
}

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

.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 #824D21;
	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: #bb944f;
	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 #824D21;	/* 右▲ の色 */
	border-width: 22px 0 22px 13px;
	right: 1px;
	top: -1px;
}
.bookStepList > li:last-child > span:after{
	content:none;
 
}
.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: auto !important;
/*	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: auto !important;
}

.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: 130px;
	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: 12px;
	min-height: 1px;
}
.menutag{
	color:#FFF;
	font-size:12px;
	line-height:16px;
	margin-left:8px;
	padding:3px 10px;
	background-color:#85C53A;
}
.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;
}

table.schedule td div {
	padding-left:30px;
}

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


#return_to_book{
	cursor:pointer;
	border-radius:8px;
	text-align:center;
	background-color:#EEE;
	box-shadow:0 0 2px #888;
}
#menu_rows{
	position:relative;
}
#menu_rows .menu_row{
	width:100%;
	padding:8px;
	margin:8px 0;
	margin-left:1px;
	box-shadow:0 0 1px #888;
}
#menu_rows .menu_row .menu_column{
	width:100%;
	padding:8px;
	margin:8px 0;
	margin-left:1px;
	border-radius:8px;
	box-shadow:0 0 1px #888;
}
#menu_rows .menu_row .menu_image{
	width:30%;
	float:left;
	overflow:hidden;
	position:relative;
	border-radius:8px;
	background-color:#EEE;
	box-shadow:0 0 2px #888;
}
#menu_rows .menu_row .menu_image img{
	width:100%;
	height:100%;
	object-fit:cover;
}
#menu_rows .menu_row .menu_image .noimage{
	color:#FFF;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	text-shadow:0 0 12px #888;
}
#menu_rows .menu_row .main_description{
	width:69%;
	float:right;
	font-size:0.95em;
	position:relative;
}
#menu_rows .menu_row .menu_detail{
	font-size:1em;
	cursor:pointer;
	line-height:2em;
	margin-top:0.5em;
}
#menu_rows .menu_row .menu_title{
	font-size:1.2em;
	font-weight:bold;
}
#menu_rows .menu_row .menu_buttons{
	font-size:1em;
	line-height:2em;
}
#menu_rows .menu_row .menu_tags{
	width:100%;
	margin-bottom:6px;
	position:relative;
}
#menu_rows .menu_row .item_button,
#menu_rows .menu_row select{
	cursor:pointer;
}
#menu_rows .menu_row .item_button{
	width:10em;
}
#menu_rows .menu_row .menu_detail,
#menu_rows .menu_row .item_button{
	border-radius:4px;
	text-align:center;
	box-shadow:0 0 2px #000;
	/* background-color:#c3eaff; */
}
#menu_rows .menu_row .item_error{
	border-radius:4px;
	box-shadow:0 0 6px #F88;
}
#menu_template{
	display:none;
}
.menu_clear{
	clear:both;
}
#menu_rows .menu_frame_main img{
	width:50%;
}
#menu_rows .menu_frame_sub img{
	width:40%;
}

@media screen and (max-width:480px){
	#menu_rows .menu_frame_main img{
		width:100%;
	}
	#menu_rows .menu_frame_sub img{
		width:100%;
	}
}


#schedule_base{
	width:99.8%;
	margin:0 5px;
	position:relative;
	box-sizing:border-box;
}
#schedule_base div{
	text-align:center;
	position:relative;
	box-sizing:border-box;
}
#schedule_base a{
	text-decoration:none;
}
#schedule_base .schedule_hm{
	border:solid 1px #888;
}
#schedule_ym{
	background-color:#ECF5FF;
}
#schedule_body{
	border-top:solid 1px #888;
	border-bottom:solid 1px #888;
}
#schedule_body .schedule_ym{
	background-color:#FFCC66;
}
#schedule_body .schedule_ym,
#schedule_body .schedule_col{
	border-left:solid 1px #888;
}

#schedule_body .schedule_ym:first-child,
#schedule_body .schedule_col_first{
	border-left:none;
}
#schedule_body .schedule_col{
	border-top:solid 1px #888;
}
#schedule_body .schedule_ym,
#schedule_body .schedule_hd{
	padding:0.5em 0;
}
#schedule_base .schedule_hm .schedule_item,
#schedule_body .schedule_col .schedule_item{
	line-height:30px;
	border-top:dotted 1px #888;
}
#schedule_base .schedule_hm .schedule_item.schedule_item_first,
#schedule_body .schedule_col .schedule_item.schedule_item_first{
	border-top:solid 1px #888;
}
#schedule_body .schedule_col.sat{
	background-color:#aaffe1;
}
#schedule_body .schedule_col.sun{
	background-color:#ffd5d5;
}
#template{
	display:none;
}
.left{
	float:left;
}
.right{
	float:right;
}
.clear{
	clear:both;
}

/*  追加分
---------------------------------------------------------------------------------------------------- */
/*ローディング*/
.black-screen {
    background-color: rgb(0, 0, 0);
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100000;
}
.black-screen > .inner {
    position: absolute;
    inset: calc(50vh - 2.5vw) 0px 0px;
    margin: 0px auto;
    width: 3vw;
    height: 3vw;
    background-image: url(/files/loading.svg);
    background-size: cover;
    overflow: hidden;
}