:root {
	--rgb-gray-500: 173, 181, 189;
}

input[type="checkbox"], 
input[type="radio"] {
	transform: scale(1.2);
}

footer {
	height: 150px;
}

@media screen and (max-width: 767px) {
	a {
		font-size: 20px !important;
	}
}

/* modal */

.modal-body .success-message {
}
.modal-body .success-message::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 10px;
	background-image: url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path fill='%234CAF50' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}

.modal-body .error-message {
}

/* bs5 modal */
@media (max-width: 991.98px) {
	.modal-dialog.modal-lg {
		max-width: 90%; /* 最大幅の仕様を変更: 500px → 90% */
	}
}




/* header navbar */

.navbar {
	justify-content: flex-start;
	flex-wrap: nowrap;
	padding: 10px;
	overflow: hidden;
}
.navbar h1 {
	margin: 0;
	padding: 0 10px;
	font-size: 1.5rem;
	overflow: hidden;
}
.navbar h1 span {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.navbar h1 span:nth-child(2):before {
	content: "-";
	margin: 0 10px;
}
@media screen and (max-width: 768px) {
	.navbar {
		padding: 5px 10px;
	}
	.navbar h1 {
		font-size: 1rem;
	}
	.navbar h1 span {
		width: 100%; /* 2行にする */
	}
	.navbar h1 span:nth-child(2):before {
		display: none;
	}
}

.container h2 {
	margin: 30px 0;
	font-size: 1.25rem;
}


/* operation flow */

.operation-flow {
	gap: 10px 0;
}
.operation-flow .col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow: 0;
	height: 110px;
}
.operation-flow .col:nth-child(even) {
	max-width: 110px;
	min-width: 110px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 10px;
	background-color: #f8f9fa;
}
.operation-flow .col > div {
	text-align: center;
}
.operation-flow a {
	font-size: 15px;
	white-space: nowrap;
}
.operation-flow .col:nth-child(odd) div:nth-child(1) {
	font-size: 32px;/* arrow */
}
.operation-flow .col:nth-child(even) div:nth-child(2) {
	font-size: 32px;
}

.operation-flow .col:nth-child(odd) {
	position: relative;
}
.operation-flow .col:nth-child(odd) div:nth-child(1) {
	position: absolute;
	top: 20px;
}
.operation-flow .col:nth-child(odd) div:nth-child(2) {
	position: relative;
	top: 25px;
}

@media (max-width: 768px) {
	.operation-flow {
		flex-direction: column;
		align-items: center;
	}
	.operation-flow .col:nth-child(odd) {
		display: flex;
		flex-direction: row; /* 横並びにする */
	}
	.operation-flow .col:nth-child(odd) div:nth-child(1) {
		transform: rotate(90deg); /* 向きを縦にする */
	}
	.operation-flow .col:nth-child(even) {
		width: 100%;
		max-width: 100%;
	}

	.operation-flow .col:nth-child(odd), 
	.operation-flow .col:nth-child(odd) div:nth-child(1), 
	.operation-flow .col:nth-child(odd) div:nth-child(2) {
		position: static;
	}
}

/* status color */

.status-1 {
	background-color: crimson;
	color: #fff;
}
.status-2 {
	background-color: orange;
	color: #000;
}
.status-3 {
	background-color: gold;
	color: #000;
}
.status-4 {
	background-color: #c3d825;
	color: #000;
}
.status-5 {
	background-color: #82ae46;
	color: #000;
}
.status-6 {
	background-color: green;
	color: #fff;
}


/* file uploader */

.file-drop-box {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 300px;
	margin: 10px auto;
	border: dashed 3px #ddd;
	color: #aaa;
}

.upload_status_box {
	width: 100%;
	margin: 2px 0 0 0;
	background: #fff;
}

.progress_bar_outer {
	background: #eee;
}
.progress_bar_inner {
	height: 10px;
	background: blue;
	margin: 5px 0;
}

/* custom table */

.custom-table {
	width: auto;
	margin-bottom: 10px;
}
.custom-table tr:hover {
	background-color: #f8f9fa;
}
.custom-table th {
	background-color: #f8f9fa;
	white-space: nowrap;
}
.custom-table td, 
.custom-table th {
	padding: .25rem 25px .25rem 25px;
	border-bottom: solid 1px #dfe0e1;
}
.custom-table td:first-child, 
.custom-table th:first-child {
	padding-left: 50px;
}
.custom-table td:last-child, 
.custom-table th:last-child {
	padding-right: 50px;
}
@media (max-width: 1023px) {
	.custom-table th, 
	.custom-table td {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}
}
@media (max-width: 768px) {
	.custom-table th, 
	.custom-table td {
		padding-right: 5px !important;
		padding-left: 5px !important;
	}
}

.custom-table th.wrap, 
.custom-table td.wrap {
	white-space: normal;
}

.custom-table-small th, 
.custom-table-small td {
	padding: .20rem 10px .20rem 10px;
	font-size: 14px;
	white-space: nowrap;
}
.custom-table-small th:first-child, 
.custom-table-small td:first-child {
    padding-left: 20px;
}
.custom-table-small td:last-child, 
.custom-table-small th:last-child {
	padding-right: 20px;
}

/* page nav */

.page-nav {
	display: flex;
	flex-direction: row;
	padding: 0;
	list-style-type: none;
}
.page-nav li {
	padding: 5px;
}
.page-nav li:first-child {
	padding-right: 25px;
}

/* result status */

.result-status {
	position: relative;
	padding-left: 1.25em;
}

.rs-normal {
	padding-left: 0;
}

.rs-success {
	color: green;
}
.rs-success::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);

	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path fill='%234CAF50' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.rs-error {
	color: red;
}
.rs-error::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);

	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><circle fill='%23F44336' cx='256' cy='256' r='248'/><path stroke='white' stroke-width='60' stroke-linecap='round' d='M160 160l192 192M352 160L160 352'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* bs5 collapse arrow */

[data-bs-toggle="collapse"] .collapse-arrow {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transition: transform 0.3s ease;
	transform-origin: center center;
	vertical-align: middle;
	position: relative;
}
[data-bs-toggle="collapse"][aria-expanded="false"] .collapse-arrow {
	transform: rotate(45deg);
	top: -3px;
}
[data-bs-toggle="collapse"][aria-expanded="true"] .collapse-arrow {
	transform: rotate(-135deg);
}

/* タッチデバイスでタップした要素にホバー状態が残り続ける現象を無効化 */
@media (hover: none) and (pointer: coarse) {
	.btn-hover-focus-none-on-touch:focus,
	.btn-hover-focus-none-on-touch:focus-visible {
		box-shadow: none !important;
	}
	.btn-hover-focus-none-on-touch.active:hover,
	.btn-hover-focus-none-on-touch.active:focus {
		background-color: var(--bs-btn-active-bg) !important;
		border-color: var(--bs-btn-active-border-color) !important;
		color: var(--bs-btn-active-color) !important;
	}
	.btn-hover-focus-none-on-touch:not(.active):hover,
	.btn-hover-focus-none-on-touch:not(.active):focus {
		background-color: var(--bs-btn-bg) !important;
		border-color: var(--bs-btn-border-color) !important;
		color: var(--bs-btn-color) !important;
	}
}