@charset "UTF-8";

/* CSS Information ===========
File name:Cart.css
Description:Miyab! BtoB
D&M/IJU inc.
Date: 2019.12
Contents: *this page only
=============================== */

.history__tab th,
.history__tab td {
  padding: 10px 8px;
	border: solid 1px #cccbce;
	line-height: 1.6;
}
.history__tab th {
	font-size: 12px;
	background: #876ba7;
  color: #fff;
  line-height: 1;
	white-space: nowrap;
}
.history__tab td {
	font-size: 12px;
}
.history__tab .w-10 {
	width: 10px;
	word-break: break-all;
}
.history__tab .w-20 {
	width: 20px;
	word-break: break-all;
}
.history__tab .w-30 {
	width: 30px;
	word-break: break-all;
}
.history__tab .w-40 {
	width: 40px;
	word-break: break-all;
}
.history__tab .w-50 {
	width: 50px;
	word-break: break-all;
}
.history__tab .w-60 {
	width: 60px;
	word-break: break-all;
}
.history__tab .w-70 {
	width: 70px;
	word-break: break-all;
}
.history__tab .w-80 {
	width: 80px;
	word-break: break-all;
}
.history__tab .w-90 {
	width: 90px;
	word-break: break-all;
}
.history__tab .w-100 {
	width: 100px;
	word-break: break-all;
}
.history__tab .w-110 {
	width: 110px;
	word-break: break-all;
}
.history__tab .w-120 {
	width: 120px;
	word-break: break-all;
}
.history__tab .w-130 {
	width: 120px;
	word-break: break-all;
}
.history__tab .w-140 {
	width: 140px;
	word-break: break-all;
}
.history__tab .w-150 {
	width: 150px;
	word-break: break-all;
}
.history__tab .w-160 {
	width: 160px;
	word-break: break-all;
}
.history__tab .w-170 {
	width: 170px;
	word-break: break-all;
}
.history__tab .w-180 {
	width: 180px;
	word-break: break-all;
}
.history__tab .w-190 {
	width: 190px;
	word-break: break-all;
}
.history__tab .w-200 {
	width: 200px;
	word-break: break-all;
}
.history__tab .w-210 {
	width: 210px;
	word-break: break-all;
}
.history__tab .w-220 {
	width: 220px;
	word-break: break-all;
}
.history__tab .w-230 {
	width: 230px;
	word-break: break-all;
}
.history__tab .w-240 {
	width: 240px;
	word-break: break-all;
}
.history__tab__item th:nth-of-type(1),
.history__tab__item th:nth-of-type(2),
.history__tab__item th:nth-of-type(3),
.history__tab__item th:nth-of-type(4) {
  width: auto;
}
.history__tab thead tr:nth-of-type(1) th:nth-of-type(2) {
	width: 14%;
}
.history__tab thead tr:nth-of-type(1) th:nth-of-type(3) {
	width: 32%;
}
.history__tab thead tr:nth-of-type(2) th:nth-of-type(5),
.history__tab thead tr:nth-of-type(2) th:nth-of-type(6),
.history__tab thead tr:nth-of-type(2) th:nth-of-type(7) {
	width: 5%;
}

.history__tab tbody th,
.nopc {
	display: none;
}
.align-right {
	text-align: right;
}
.align__center {
	text-align: center;
}
.row-top {
  background: #faf6ff;
}
.row-top td:first-of-type {
	font-weight: bold;
	color: #584271;
}
[class *= "status-"] {
	width: 100px;
	text-align: center;
	border-radius: 3px;
	color: #fff;
	padding: 4px;
	font-weight: bold;
	white-space: nowrap;
}
/* リクエスト受付（Request） */
.status-1 {
	background: #f7cd00;
}
/* 予約確定（Confirmed） */
.status-2 {
	background: #4f9b68;
}
/* キャンセル（Confirmed） */
.status-3 {
	background: #c22047;
}
/* 予約不成立（Not Confirmed） */
.status-4 {
	background: #262680;
}
/* 催行済み **/
.status-5 {
	background: #c22047;
}
/* 催行取消 **/
.status-6 {
	background: #c22047;
}

.history__tab .edit__btn_wrapper .edit__vouncher {
	display: none;
}
.history__tab .edit__operation,
.history__tab .edit__vouncher {
	width: auto;
	height: auto;
	border-radius: 3px;
}
.history__tab .edit__operation__btn,
.history__tab .edit__vouncher__btn {
	font-size: 12px;
	padding: 8px 8px;
	border-radius: 3px;
}
@media (max-width:1230px) {
	.history__tab,
	.history__tab tbody {
		display: block;
		width: 100%;
	}
	.history__tab thead {
		display: none;
	}
	.history__tab tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.history__tab tbody th {
		display: flex;
	}
	.nopc {
		display: block;
	}
	.history__tab th {
		display: flex;
		width: 160px;
		font-size: 14px;
		background: transparent;
		color: #000;
		align-self: stretch;
		align-items: center;
		justify-content: center;
		padding: 10px;
		border-bottom: none;
		font-weight: normal;
	}
	.history__tab td {
		display: flex!important;
		width: calc(100% - 160px);
		font-size: 14px;
		align-self: stretch;
		align-items: center;
		justify-content: flex-start;
		padding: 10px;
		border-bottom: none;
		border-left: none;
		text-align: left;
	}
	.history__tab td:last-child {
		display: none!important;
	}
	.history__tab .w-10,
	.history__tab .w-20,
	.history__tab .w-30,
	.history__tab .w-40,
	.history__tab .w-50,
	.history__tab .w-60,
	.history__tab .w-70,
	.history__tab .w-80,
	.history__tab .w-90,
	.history__tab .w-100,
	.history__tab .w-110,
	.history__tab .w-120,
	.history__tab .w-130,
	.history__tab .w-140,
	.history__tab .w-150,
	.history__tab .w-160,
	.history__tab .w-170,
	.history__tab .w-180,
	.history__tab .w-190,
	.history__tab .w-200,
	.history__tab .w-210,
	.history__tab .w-220,
	.history__tab .w-230,
	.history__tab .w-240 {
		width: auto;
	}
	.history__tab .row-top {
		background: transparent;
		margin-bottom: 20px;
		border-bottom: 1px solid #cccbce;
	}
	.history__tab .row-top th:nth-of-type(1),
	.history__tab .row-top td:nth-of-type(1) {
		width: 100%;
		font-size: 20px;
		justify-content: center;
	}
	.history__tab .row-top th:nth-of-type(1) {
		color: #fff;
		background: #876ba7;
	}
	.history__tab .row-top td:nth-of-type(1) {
		border-left: 1px solid #cccbce;
	}
	.history__tab tr:not(.row-top) th:nth-of-type(1),
	.history__tab tr:not(.row-top) td:nth-of-type(1) {
		font-weight: bold;
		background: #faf6ff;
		color: #876ba7;
	}
	.history__tab tr:not(.row-top) th:nth-of-type(1) {
		border-left: 6px solid #876ba7;
		text-indent: -6px;
	}
	.history__tab tr:not(.row-top) td:nth-of-type(1) [class *= "status"] {
		width: 120px;
		margin-left: 16px;
	}
	.history__tab tr:not(.row-top) td:nth-of-type(8) {
		display: none!important;
	}
	.history__tab tr:not(.row-top) td:nth-of-type(9) {
		width: 100%;
		border-right: none;
		justify-content: center;
		padding-top: 16px;
		padding-bottom: 32px;
	}
	.history__tab .edit__btn_wrapper {
		display: flex;
	}
	.history__tab .edit__btn_wrapper .edit__vouncher {
		display: block;
	}
	.history__tab .edit__btn_wrapper .edit__operation + .edit__vouncher {
		margin-left: 12px;
	}
	.history__tab .edit__operation__btn,
	.history__tab .edit__vouncher__btn {
		font-size: 20px;
		min-width: 130px;
		padding: 8px 20px;
	}
}
@media (max-width: 900px){
	.history__tab td {
		margin-top: 0;
	}
	.history__tab td:last-child  {
		border-top: 1px solid #cccbce;
		border-right: 1px solid #cccbce;
	}
	.history__tab .edit__operation {
		margin: 0 0;
	}
}
@media (max-width: 600px){
	.history__tab th {
		width: 120px;
	}
	.history__tab td,
	.history__tab td:last-child {
		width: calc(100% - 120px);
	}
}
@media (max-width: 415px){
	.history__tab th {
		font-size: 12px;
		width: 100px;
		padding: 10px 6px;
	}
	.history__tab td,
	.history__tab td:last-child {
		width: calc(100% - 100px);
		font-size: 12px;
		padding: 10px 6px;
	}
}