@charset "utf-8";
/***************************************************************
design.css
***************************************************************/

/* font-size reset : default=14px */
html {
    font-size: 14px;
} 


/*************
*　Link class
*******************************/ 
a.text-link {
	color: #007BFF !important;
	cursor: pointer !important;
}


/*************
*　Material icons
*******************************/ 

.material-icons {
	vertical-align:middle;
}


/*************
*　Page top btn
*******************************/
#page-top-btn {
	position:fixed;
	bottom:20px;
	right:20px;
	z-index: 100;
}
#page-top-btn a {
	display: table-cell;
	vertical-align: middle;  
	width: 50px;
	height:50px;
	text-decoration: none;
	text-align: center;  
}
#page-top-btn a img {
	width: 100%;
	height: 100%;
}

/*************
*　Header
*******************************/ 
div.head-info {
	width:100%;
	background-color:#666;
	display:table;
}
div.head-info ul,
div.head-info div.head-btn {
	display:table-cell;
	vertical-align:middle;
	padding:0.4rem;
}
div.head-info ul {
}
div.head-info ul li {
	color:#FFF;
	font-size:90%;
	list-style-type:none;
	display:table-cell;
	padding:0 1rem 0 0;
}
div.head-info ul li i {
	padding: 0 0.4rem 0 0;
}
div.head-info ul li#logo-frame {
	width: 270px;
	height: 34px;
}
div.head-info ul li#logo-frame img {
	width: 100%;
	height: 100%;
}
div.head-info ul li.external-link a {
	color: #FFF;
}

div.head-info div.head-btn {
	text-align: right;
}

/*************
*　Common
*******************************/
img.now-printing {
	max-width:140px;
}

div.help-error-block {
	color: red;
	font-weight: bold;
}


	/*** status-list ***/
	div.status-list {
		display:flex;
		flex-wrap:wrap;
		position:relative;
	}
	div.status-item {
		width:120px;
		padding:0.2rem 0.6rem;
		margin:0 0 0.2rem 0;
		border:1px solid #CCC;
		position:relative;
	}
	div.status-item.st-on {
	}
	div.status-item.st-off {
		background-color:#EFEFEF;
		color:#999;
	}
	div.status-item.st-co {
		color:#999;
	}
	div.status-item > span.material-icons {
		display:block;
		width:100%;
		position:absolute;
		top:20%;
		left:40%;
		color:#F00;
	}

	/*** cleaning-list ***/
	div.cleaning-list {
		display:flex;
		flex-wrap:wrap;
		position:relative;
	}
	div.cleaning-item {
		width:;
		padding:0.2rem 0.6rem;
		margin:0 0 0.2rem 0;
		border:1px solid #CCC;
		position:relative;
	}
	div.cleaning-item > span {
		display:block;
		text-align:center;
	}
	div.cleaning-item.cl-yet {
		color:#999;
	}
	div.cleaning-item.cl-not {
	}
	div.cleaning-item.cl-no {
		background-color:#EFEFEF;
		color:#999;
	}

	span.stay-status-na {
		color:#000000;
	}
	span.stay-status-sr {
		color:#ff0000;
	}
	span.stay-status-co {
		color:#0000ff;
	}

/*************
*　Pagination
*******************************/
div.pagination-frame {
}
	div.pagination-frame ul.pagination {
		float: left;
	}
	div.pagination-frame div.pagination-number {
		float: right;
		display: block;
		padding: 0.2em 1em;
	}
	div.pagination-number span {
		font-weight: bold;
		font-size: 1.4em;
		padding: 0 0.4em;
	}


/*************
*　Photo preview
*******************************/
div.preview {
	width: 200px;
	height: auto;
}
div.preview img {
	width: 100%;
	height: 100%;
}



/*************
*　Color-picker
*******************************/
div.color-sample {
	display:inline-block;
	border:solid 1px #ccc;
	width:40px;
	height:40px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}


/*************
*　reservation details
*******************************/
ul.reservation-details-menu {
}
	ul.reservation-details-menu li a.nav-link {
		border:1px solid #3490DC;
		border-radius:6px;
		margin:0 0.6rem 0 0;
	}
	ul.reservation-details-menu li span {
		display:inline-block;
		font-size:90%;
		padding:0.2rem;
		border-radius:4px;
		color:#FFF;
	}
	ul.reservation-details-menu li span.reservation-details-menu-already {
		background-color:#999;
	}
	ul.reservation-details-menu li span.reservation-details-menu-notyet {
		background-color:#DC3545;
	}

ul.reservation-details-head {
	margin:0 0 0.4rem 0;
	padding:0;
	display:table;
}
	ul.reservation-details-head li {
		display:table-cell;
		list-style-type:none;
	}
	ul.reservation-details-head li span {
		display:inline-block;
		margin:0 0 0 0.6rem;
		font-size:140%;
		font-weight:bold;
	}
	
	ul.reservation-details-head li {
		padding:0 2rem 0 0;
	}
	
ul.reservation-details-info {
}

	ul.reservation-details-info li,
	div.for-resarve-details {
		display:table-cell;
		vertical-align:middle;
	}
	ul.reservation-details-info li {
		list-style-type:none;
		float:left;
		padding:0 0 0 2rem;
		font-size:140%;
	}
	ul.reservation-details-info li span.material-icons {
		float:left;
		position:relative;
		top:0.4rem;
		right:0.2rem;
	}
	ul.reservation-details-info li span.reservation-details-info-rubi {
		display:block;
		font-size:60%;
		line-height:0.6rem;
	}


table.reservation-details-table {
	font-size: 86%;
}
	table.reservation-details-table th {
		font-weight: normal;
		text-align: center;
	}
	table.reservation-details-table input[type="number"] {
		width: 50px;
	}
	table.reservation-details-table select {
		max-width: 360px;
	}
	table.reservation-details-table input[type="text"] {
		width: 80px;
		text-align: right;
	}
	table.reservation-details-table tr.money-off {
		color: #8C0000;
		background-color: #FFF0F0;
	}

/*************
*　Footer
*******************************/
footer.common-footer {
	clear:both;
}
	footer.common-footer nav.footer-navi {
	}
		nav.footer-navi ul {
			padding:0.6rem;
			float:right;
		}
			nav.footer-navi ul li {
				float:left;
				list-style-type:none;
				margin:0 0 0 1rem;
				font-size:86%;
			}




/******************************************************************************
***　[CASE] min-width 960px
******************************************************************************/
@media screen and (max-width: 960px) {

	div.head-info ul li:not(#logo-frame) {
		display:none;
	}

}




	/*** assignment-list ***/
	div.assignment-list {
		width:100%;
	}
	div.assignment-list div.assignment-item {
		min-width:100px;
		margin:0 0.6rem 0.6rem 0;
		border:1px solid #CCC;
		float:left;
	}
	div.assignment-item p {
		margin:0;
		padding:0.2rem 0.4rem;
	}
	div.assignment-item > p.assignment-item-rooms {
		background-color:#888;
		color:#FFF;
	}
		p.assignment-item-rooms > span.assignment-item-rooms-type {
			padding:0 0 0 1rem;
		}
		p.assignment-item-rooms > span.assignment-item-person {
			padding:0 0 0 0.6rem;
			font-size:86%;
		}
		p.assignment-item-rooms > span.assignment-item-meal1 {
			font-size:86%;
			background-color:rgb(0, 204, 109);
			color:#FFF;
			padding:0.2rem 0.4rem;
			border-radius:6px;
		}
		p.assignment-item-rooms > span.assignment-item-meal3 {
			font-size:86%;
			background-color:rgb(204, 190, 0);
			color:#FFF;
			padding:0.2rem 0.4rem;
			border-radius:6px;
		}
		p.assignment-item-rooms > span.assignment-item-consecutive {
			font-size:86%;
			background-color:#C00;
			color:#FFF;
			padding:0.2rem 0.4rem;
			border-radius:6px;
		}

	div.assignment-item > p.assignment-item-name {
		width:11rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	div.assignment-box {
		float:left;
		max-width:180px;
		border:1px solid #999;
		border-radius:10px;
		padding:0.2rem;
		margin:0 0.6rem 0.2rem 0;
	}
		div.assignment-box ul {
			width:96%;
			margin:0 auto;
			padding:0;
		}
			div.assignment-box ul li {
				list-style-type:none;
				padding:0.2rem 0.4rem 0 0.4rem;
				font-size:96%;
			}

	/*** card-title-list ***/

ul.card-title-list {
	padding: 0;
}
	ul.card-title-list li {
		text-align: left;
		float: left;
		margin: 0 1.2em 0.2em 0;
		list-style-type: none;
		font-weight: bold;
		font-size: 1.2em;
	}
	ul.card-title-list li span {
		font-weight: normal;
		font-size: 0.8em;
	}