/*  変数
====================================== */

:root {
	--color-red-900: #73193a;

	/* 文字基本色(黒) */

	/* --color-font-base: #1a1a1c; */
	--color-font-base: #4c4c4c;

	/* ボーダー色 */
	--color-border: #e2e2e2;

	/* ボタン基本色 */
	--color-main: #01b3c9;

	/* アクセント */
	--color-accent: #d9e021;

	/* エラー色 */
	--color-error: #f00;
	--color-error-input: #f8e6dc;

	/* 背景グレー */
	--color-bg-gray: #f2f2f2;

	/* Form */
	--color-placeholder: #c4c4c4;
	--color-caution: #a4a4a4;

	/* Card */
	--color-card-blue: #e0efff;

	/* Card green */
	--color-green: #2e8b57;

	/* buttn */
	--color-gray: #818181;
	--color-purple: #6c77b6;

	/* font-size */
	--font-size-xs: 0.75rem;
	/*--font-size-sm: 0.875rem;*/ /*2024/05/08*/
	--font-size-sm: 1rem;
	--font-size-base: 1rem;
	--font-size-md: 1.125rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--font-size-xxl: 2rem;
	--font-size-xxxl: 3rem;

	/* content-width */
	--content-width: 1024px;

	/* space */

	/* --space-xs: 4px; */

	--space-sm: 12px;
	--space-base: 20px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 48px;

	/* --space-xxl: 64px; */
}

/* component: ボタン
====================================== */

.button-col-shosai {
	display: inline-block;
	font-size: var(--font-size-xs);
	color: #fff;
	vertical-align: middle;
	cursor: pointer;
	background-color: var(--color-main);
	background: var(--color-main);
	border: 1px solid var(--color-main);
	border: none;
	border-radius: 0.3em;
	transition: all 0.2s ease-in-out;
}

.button-col-tuiseki {
	display: inline-block;
	font-size: var(--font-size-xs);
	color: #fff;
	vertical-align: middle;
	cursor: pointer;
	background-color: var(--color-red-900);
	background: var(--color-red-900);
	border: 1px solid var(--color-main);
	border: none;
	border-radius: 0.3em;
	transition: all 0.2s ease-in-out;
}

.button-col-disnable {
	display: inline-block;
	font-size: var(--font-size-xs);
	color: darkgray;
	vertical-align: middle;
	cursor: pointer;
	background-color: var(--color-bg-gray);
	background: var(--color-bg-gray);
	border: 1px solid var(--color-bg-gray);
	border: none;
	border-radius: 0.3em;
	transition: all 0.2s ease-in-out;
}

.button-invoice-input-head {
	display: inline-block;
	font-size: var(--font-size-sm);
	color: #fff;
	vertical-align: middle;
	cursor: pointer;
	background-color: var(--color-main);
	background: var(--color-main);
	border: none;
	border-radius: 0.3em;
	transition: all 0.2s ease-in-out;
}

.card-label--green {
	border-left: 7px solid var(--color-green);
	background-color: #DEFBCA;
}


.card-BackGround-Search-Shokai {
	background-color: #DEFBCA !important;
}
.card-BackGround-Search-Ichiran {
	background-color: var(--color-card-blue) !important;
}

.card-BackGround-confirmation {
	background-color: var(--color-card-blue) !important;
}

.card-BackGround-D1Input {
	background-color: #DEFBCA;
}
/* component: テキストボックス
====================================== */

.chkerror {
	background-color: salmon;
}

/*  component: エラーリスト
====================================== */

.error-list-title {
	display: block; 
	margin-top: 1em;
	font-size: var(--font-size-sm);
	font-weight: 400;
	color: var(--color-error);
}

.error-list {
	display: block;
	padding-left: 2.5em;
	margin-top: 0.5em;
	font-size: var(--font-size-sm);
	font-weight: 400;
	color: var(--color-error);
}

.error-msg {
/*	display: block;*/
	padding-left: 0em;
	margin-top: 1em;
	font-size: var(--font-size-sm);
	font-weight: 400;
	color: var(--color-error);
}

.error-msg:not(:has(+ .is-hidden)) {
	margin-bottom: 1em;
}

.is-list-mark-hidden {
	list-style: none;
	margin-left: -1.5em;
}

/*  component: アップロード
====================================== */

.input-box--row_upload .label {
	margin-right: 0;
	margin-bottom: 0;
	font-weight: 400;
}

.data-table_upload > tbody > tr > th {
	text-align: left;
}

/*  component: 
====================================== */

.is-visible-hidden {
	visibility: hidden;
}

/* ====================================== */

/* component: データテーブル
====================================== */

/* スクロールバー */

.data-table__container_scrollY {
	width: 100%;
	overflow: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgb(155 155 155 / 70%) transparent;
}
.scan-table__container {
	height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgb(155 155 155 / 70%) transparent;
}

.card--sm2 {
	width: 1024px;
	max-width: 100%;
}

.card--left_D1Input {
	width: fit-content;
	padding: 0.75rem 36px;
	margin-right: auto;
	margin-left: 10px;
	margin-top: 10px;
	background-color: var(--color-card-blue) !important;
}

.data-table__container_D1Input {
	min-height: 250px;
	max-height: 40vh;
	width: 1080px;
	table-layout: fixed;
}
.data-table__container_D1Input td {
	white-space: nowrap; /* テキストの自動改行を防ぐ */
	overflow: hidden; /* コンテンツがはみ出た場合に非表示にする */
	text-overflow: ellipsis; /* コンテンツがはみ出た場合に省略記号で表示 */
}
.data-table__container_D1Input tr :where(td:last-child, th:last-child) {
	border-right: 1px solid #ddd;
}

.data-table__container_D1Input :where(thead, tbody, tfoot) tr:last-child td {
	border-bottom: 1px solid #ddd;
}

.input-box_has_checkbox {
	margin-left: 0.5em;
}
	/* th 3番目はcolspan=2なので、6列 */
	.data-table__container_D1Input th:nth-child(1) {
		width: 5%;
	}
	.data-table__container_D1Input th:nth-child(2) {
		width: 25%;
	}
	.data-table__container_D1Input th:nth-child(3) {
		width: 40%;
	}
	.data-table__container_D1Input th:nth-child(4) {
		width: 10%;
	}
	.data-table__container_D1Input th:nth-child(5) {
		width: 10%;
	}
	.data-table__container_D1Input th:nth-child(6) {
		width: 10%;
	}

	/* td */
	.data-table__container_D1Input td:nth-child(1) {
		width: 5%;
		align-items: center;
		text-align: center;
	}
	.data-table__container_D1Input td:nth-child(2) {
		width: 24%;
		/*position: absolute;*/
	}
	.data-table__container_D1Input td:nth-child(3) {
		width: 5%;
	}
	.data-table__container_D1Input td:nth-child(4) {
		width: 33%;
		/*position: absolute;*/
	}
	.data-table__container_D1Input td:nth-child(5) {
		width: 10%;
		text-align: center;
	}
	.data-table__container_D1Input td:nth-child(6) {
		width: 10%;
		text-align: center;
	}
	.data-table__container_D1Input td:nth-child(7) {
		width: 10%;
		text-align: center;
	}


/* その他テキスト装飾 */

.scan-table__description p {
	padding: 0;
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-gray);
}

.scan-table__description .h2 {
	text-align: left;
}

.scan-table__description .h2 + p {
	margin-top: 0.6em;
}

/* 中間の列 */

.scan-table--center {
	display: flex;
/*	flex-direction: column;
	align-items: center;
*/	justify-content: center;
	padding-right: var(--space-sm);
	padding-left: var(--space-sm);
	color: var(--color-gray);
	text-align: center;
}

/* component: 送り状番号スキャン結果テーブル
====================================== */

.scan-table {
	font-size: var(--font-size-sm);
	line-height: 1;
	border-collapse: collapse;
}

/* ヘッダ固定 */	
.scan-table thead {
	position: sticky;
	top: 0;
	z-index: 1;
}

.scan-table thead th {
	padding-top: 0;
	padding-bottom: 0;
}

.scan-table thead th span {
	display: inline-block;
	width: 100%;
	padding: 0.6em;
	font-weight: 500;
	color: #fff;
	background: var(--color-main);
}

/* レイアウト */

.scan-table__wrapper {
	display: flex;
}

/*スキャンした送り状番号の入る右側テーブルの幅*/
.scanbox {
	width: 11rem;
}

.scan-table td {
	padding: 0;
	margin: 0;
}

.scan-table__description {
	min-height: 7rem;
}

/* ボーダー */

.scan-table td {
	border-top: 1px solid var(--color-gray);
	border-left: 1px solid var(--color-gray);
}

.scan-table tr:last-of-type td {
	border-bottom: 1px solid var(--color-gray);
}

.scan-table td:last-of-type {
	border-right: 1px solid var(--color-gray);
}

.scan-table--right tr:not(:first-of-type) td:nth-of-type(2) {
	border-top: 1px solid #fff;
}

/* 背景色 */

.master {
	background: #fff;
}

.scan-table--right {
	width:260px;
}

.scan-table--left,
.scan-table--left .ui-state-active {
	/*background: #e7e7e7;*/
}

/* ドラッグ中の要素のスタイル */

.scanno.dragging {
	color: #000;
	box-shadow: 0 0 0.5rem rgb(0 0 0 / 50%);
	opacity: 1;
}



.scanno {
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: rgb(255 255 255 / 50%);
	background: #fff;
}

.scanno span {
	display: inline-block;
	min-width: 4rem;
	padding: 0.6em;
}

.scanno span:first-of-type {
	width: 10em;
	padding: 0.6em;
	text-align: center;
}


	.scanno span:nth-of-type(3) {
		width: 2em;
		padding: 0.6em;
	/*	color: #fff;*/
		text-align: center;
		/*background: var(--color-accent);*/
	}


.search-form__input:has(input[type="radio"]) label {
	min-width: 0;
	margin-left: 0.3em;
}

/*  component: 処理中表示
====================================== */
.divLoading {
	display: table;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	opacity: 0.8;
	z-index: 1
}

.divLoadingMsg {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding-top: 140px;
	z-index: 2
}

/* component: カード
====================================== */
.card-confirmation {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: 3.6rem 80px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--color-border);
}

.input_num {
	padding: 0.3em 0.8em;
	letter-spacing: 0.04em;
	border: 1px solid #ccc;
	border-radius: 5px;
	text-align: right;
}

/* サイズ */

.input_num--xxs {
	width: 100px;
}

.del_img {
	width:13px;
	height:13px;
	display:inline;	/*横並び*/
}

.card-serch {
	padding: 0.6em 0.5em;
	letter-spacing: 0.04em;
	border: 1px solid #ccc;
	border-radius: 10px;
	text-align: left;
	margin: 0.5em;
	width: 660px; /* 幅指定 */
	height: 45px; /* 高さ指定 */
}

.label-md {
	font-size: var(--font-size-md);
}


.text__Link {
	color: var(--color-main);
	cursor: pointer;
}