@charset "UTF-8";

/* ==========================================================================
   layout
========================================================================== */

label:focus {
	outline: 2px dashed rgb(176, 176, 176);
	outline-offset: 2px;
}

.app-background {
	background-color: white;
}

#overlay {
	position: fixed;
	top: 0;
	z-index: 1100;
	width: 100%;
	height: 100%;
	display: none;
	background: rgba(0, 0, 0, 0.6);
}

#overlay-fixedPhrase {
	position: fixed;
	top: 0;
	z-index: 1050;
	width: 100%;
	height: 100%;
	display: none;
	background: rgba(0, 0, 0, 0.6);
}

.cv-spinner {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.spinner {
	width: 40px;
	height: 40px;
	border: 4px #ddd solid;
	border-top: 4px #2e93e6 solid;
	border-radius: 50%;
	animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
	100% {
		transform: rotate(360deg);
	}
}

.is-hide {
	display: none;
}

/* TOP画面 */
main.top .container-fluid {
	padding: 20px;
	gap: 10px;
	flex-wrap: wrap;
}

.body-background-color {
	background-color: var(--color-background);
}

.custom-breadcrumb {
	width: fit-content;
	background: #fff;
	padding: 3px 3px;
	border-radius: 2rem;
}

.fit-content {
	width: fit-content
}

.custom-breadcrumb ul>li:after {
	color: #333;
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	right: -6px;
	position: absolute;
	font-weight: bold;
}

.custom-breadcrumb ul>li {
	position: relative;
	padding: 5px 10px;
}

.custom-breadcrumb ul>li:hover {
	color: var(--color-main);
	background: var(--color-background);
	border-radius: 2rem;
	font-weight: 600;
}

.custom-breadcrumb ul>li:last-of-type {
	color: var(--color-main);
	background: var(--color-background);
	border-radius: 2rem;
	margin-left: 10px;
	font-weight: 600;
	box-shadow: inset 1px 2px 4px rgb(0 0 0 / 10%);
}

.custom-breadcrumb ul>li:last-of-type:after {
	content: "";
}

.custom-breadcrumb ul {
	display: flex;
	list-style: none;
	gap: 5px;
	font-size: 0.8em;
	font-weight: 500;
	align-items: center;
	margin-bottom: 0;
	padding-left: 0;
}

#chooseTable tr:hover {
	background-color: lightskyblue;
}

.datepickr-clear {
	position: absolute;
	top: 6px;
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
	right: 3px;
}

.flatpickr-clear,
.not-use-pastdate-custom-datepickr-clear,
.custom-already-payment-datepickr-clear,
.reservation-custom-datepickr-clear,
.zyuryo-reservation-custom-datepickr-clear,
.not-use-pastMonth-datepickr-clear,
.payMonth-custom-include-this-month-datepickr-clear {
	position: absolute;
	top: 6px;
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
	right: 3px;
}

.timepickr-clear {
	position: absolute;
	top: 6px;
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
	right: 3px;
}

.payMonth-datepickr-clear {
	position: absolute;
	top: 6px;
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
	right: 3px;
}

.payNextMonth-datepickr-clear {
	position: absolute;
	top: 6px;
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
	right: 3px;
}

.payMonth-skip-datepickr-clear {
	position: absolute;
	top: 6px;
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
	right: 3px;
}


.chooseRow {
	background-color: lightskyblue;
}

.calender-width {
	width: 130px;
}

.time-width {
	width: 100px;
}

.memberStore-input-width {
	width: 125px;
}

.amount-input-width {
	width: 108px;
}

.has-error {
	color: #630015 !important;
	background-color: #ffd9e1 !important;
}

.custom-tooltip {
	--bs-tooltip-bg: #FF7474;
	font-family: 'Source Sans Pro', sans-serif;
}

.custom-tooltip .tooltip-inner {
	width: 220px;
	max-width: 220px;
	background-color: #FF7474;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
	border-right-color: #FF7474;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
	border-left-color: #FF7474;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
	border-bottom-color: #FF7474;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: #FF7474;
}


/*.flatpickr-months {*/
/*	background-color: #2294d6;*/
/*}*/
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
	color: red;
}

/* 土曜日：青 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
	color: blue;
}

.custom-flatpickr::-webkit-calendar-picker-indicator {
	display: none;
}

.custom-timepickr::-webkit-calendar-picker-indicator {
	display: none;
}

.cur-year {
	order: 1;
}

.cur-month:before {
	content: '年　';
}

.cur-month {
	order: 2;
}

.flatpickr-current-month span.cur-month {
	font-weight: 300;
	padding-top: 4px;
}

.gap-m {
	gap: 20;
}

.custom-form {
	border-radius: 2em;
	padding: 9px 25px;
	font-weight: 500;
	background: hsl(0deg 0% 100% / 90%);
	border: none;
}

.success-info-icon-color {
	color: #007bff
}

.error-info-icon-color {
	color: #C25338
}

/* ==========================================================================
   モーダル
========================================================================== */
.custom-modal-auto {
	height: 90%;
	min-width: 900px;
	max-width: fit-content;
}
.custom-modal-xxl {
	height: 90%;
	max-width: 1000px;
}

.custom-modal-xl {
	height: 90%;
	max-width: 800px;
}

.custom-modal-lg {
	height: 90%;
	max-width: 600px;
}

.custom-modal-md {
	height: 50%;
	width: 70%;
	max-width: 600px;
}

.info-modal {
	display: flex;
	align-items: center;
	height: 100%;
}

.info-modal-content {
	height: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 0.5rem;
	outline: 0;
}

.confirm-modal-content {
	height: 220px;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 400px;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 0.5rem;
	outline: 0;
}

.custom-modal-content-lg {
	height: fit-content;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 0.3rem;
	outline: 0;
}

.custom-modal-content-md {
	height: 50%;
	position: relative;
	display: flex;
	width: 70%;
	flex-direction: column;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 0.5rem;
	outline: 0;
}

.modal-table {
	width: 75%;
}

.modal-tbody {
	width: 100%;
}

.modal-tbody>tr>th {
	width: 25%;
}

.modal-tbody>tr>td {
	width: 70%;
}

/* ==========================================================================
   フォント
========================================================================== */
.font-size-s {
	font-size: 0.7em;
}

.font-size-m {
	font-size: 0.9em;
}

.font-size-l {
	font-size: 1.3em;
}

.font-title-md {
	font-weight: 600;
	font-size: 1.2em;
}

.w-10 {
	width: 10% !important;
}

.w-20 {
	width: 20% !important;
}

.w-30 {
	width: 30% !important;
}

.w-40 {
	width: 40% !important;
}

.w-45 {
	width: 45% !important;
}

.w-50 {
	width: 50% !important;
}

.w-60 {
	width: 60% !important;
}

.w-70 {
	width: 70% !important;
}

.w-80 {
	width: 80% !important;
}

.w-85 {
	width: 85% !important;
}

.w-90 {
	width: 90% !important;
}

.w-50px {
	width: 50px !important;
}

.h-200px {
	height: 200px !important;
}

/* ==========================================================================
   フォント(色)
========================================================================== */
.default-font-color {
	color: var(--color-main);
}

/* ==========================================================================
   背景色
========================================================================== */
.default-bg-color {
	background: hsl(0deg 0% 100% / 50%);
}

/* ==========================================================================
   width
========================================================================== */
.w-90 {
	width: 90%;
}

.font-size-l {
	font-size: 1.3em;
}

.font-title-md {
	font-weight: 600;
	font-size: 1.2em;
}

/* ==========================================================================
   header
========================================================================== */
.header {
	background: #fff;
	padding: 0 10px;
	/*	position: fixed;*/
}

.header .header-block,
.header-link {
	padding: 7px 10px;
	position: relative;
	font-weight: 500;
	font-size: 0.9em;
}

.header-link:hover {
	background: var(--color-background);
	border-radius: 2rem;
	color: var(--color-main);
}

.logo-h {
	height: 40px;
	padding: 3px;
}

.logo-h img {
	height: 34px;
}

/* ==========================================================================
   nav
========================================================================== */

.navigetion-style {
	height: 58px;
	border: 0.5px solid #DDDDDD;
	background-color: hsl(0deg 0% 96%);
}

.menu-lists {
	display: flex;
	justify-content: start;
	height: 100%;
}

.menu-item {
	position: relative;
	width: 120px;
	height: 100%;
	align-items: center;
}

.menu-item:hover {
	background-color: hsl(0deg 3.19% 90.57%);
}

.menu-lists .selected-menu {
	background-color: hsl(0deg 3.19% 90.57%);
}

.menu-item a {
	position: absolute;
	font-size: 0.8em;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	word-wrap: break-word;
	white-space: normal;
	text-align: center;
	border-right: 3px solid rgb(192, 192, 192);
}

.menu-item a i {
	margin: 3px 0px;
	display: block;
	font-size: 1.1em;
}

.menu-item:hover,
.menu-item a:hover {
	color: #777777;
}

.box-title {
	font-size: 1.2em;
	background: rgb(192, 192, 192);
	padding: 4px;
	color: #FFF;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.border-bottom-double {
	border-bottom: 6px double #000;
}

/* ==========================================================================
   container
========================================================================== */
.container-item {
	width: fit-content;
	height: fit-content;
	padding: 20px 20px 5px 20px;
	background: #fff;
	border-radius: 2rem;
	box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
	margin: 5px;
}

.container-body {
	flex-wrap: nowrap;
	gap: 10px;
}

.container-item-fit-content {
	min-width: 50%;
	width: fit-content;
	padding: 20px 20px 5px 20px;
	background: #fff;
	border-radius: 2rem;
	box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
	margin: 5px;
}

.container-item-w50 {
	width: 50%;
	padding: 20px 20px 5px 20px;
	background: #fff;
	border-radius: 2rem;
	box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
	margin: 5px;
}

.container-item-w75 {
	width: 75%;
	padding: 20px 20px 5px 20px;
	background: #fff;
	border-radius: 2rem;
	box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
	margin: 5px;
}

.container-item-w100 {
	width: 100%;
	padding: 20px 20px 5px 20px;
	background: #fff;
	border-radius: 2rem;
	box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
	margin: 5px;
}

.container-input-form {
	padding: 10px 25px;
	background: #fff;
	border-radius: 1rem;
	min-width: 400px;
	width: fit-content;
}

.container-input-form-top .input-form dl {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 15px 30px;
}

.container-search-results-bottom .--btn {
	width: fit-content;
	margin: 10px 0 10px auto;
	padding: 4px 4.2px 4px 4px;
	background: #fff;
	border-radius: 2rem;
}

.card-body .standard-text {
	font-size: 0.9em;
	color: hsl(0deg 0% 40%);
}

.card-body .bold-text {
	font-size: 1.4em;
	font-weight: 600;
}

.card-body .date-text {
	font-size: 0.8em;
	color: hsl(0deg 0% 40%);
	line-height: 1.5;
}

.btn-main {
	color: #ffffff;
	background: var(--color-main);
	border-color: var(--color-main);
	font-weight: 500;
}

.btn-main:hover {
	opacity: 0.7;
}

.btn-main:disabled {
	opacity: 0.35;
	pointer-events: none;
	box-shadow: none;
}

.fa,
.far,
.fas {
	margin-left: 5px;
	margin-right: 5px;
}

/* ==========================================================================
   フォーム
========================================================================== */
.form::placeholder {
	opacity: 0.5;
	color: var(--color-main);
	font-weight: 400;
}

.form:focus {
	outline: none;
	box-shadow: 0 0 5px 0 var(--color-main);
}

.form:hover {
	outline: none;
	box-shadow: 0 0 5px 0 var(--color-main);
}

/* ==========================================================================
   テーブル
========================================================================== */
.memberStore-btn-font-size {
	font-size: 1.0em;
}

/* 検索欄 */
.input-form table {
	font-size: 0.8em;
}

.input-form table {
	font-size: var(--font-size-small);
}

.input-form-table {
	font-size: 0.8em;
	font-size: var(--font-size-small);
}

.input-form table th {
	text-align: left;
	height: 29.33px;
	padding: 0px 20px 0px 20px;
	font-weight: 500;
	font-size: var(--font-size-small);
}


.input-form table th:first-child {
	padding: 0px 20px 0px 0px;
}

.input-form table th.--vertical-align-top,
.input-form table td.--vertical-align-top {
	vertical-align: top;
}

.input-form table td {
	vertical-align: middle;
	font-weight: 500;
	/*padding: 2px 0;*/
	height: 23px;
}

.input-form-table-td {
	vertical-align: middle;
	font-weight: 500;
	/*padding: 2px 0;*/
	height: 23px;
}

.input-form-table-th {
	text-align: left;
	height: 29.33px;
	line-height: 25px;
	font-weight: 500;
	font-size: var(--font-size-small);
}


/* 検索結果 */
.search-results {
	overflow-x: auto;
	max-height: calc((100vh - 145px) * 0.46);
	overflow-y: auto;
	max-width: fit-content;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: none;
}

.search-results table {
	width: fit-content;
	table-layout: fixed;
}

.search-results table.summary {
	margin-left: auto;
	margin-right: 0;
}

.search-results table thead {
	border-top: 0px solid var(--color-mainBrightnessUp);
	border-bottom: 1px solid var(--color-mainBrightnessUp);
	background: var(--color-gray);
	/*	color: #333;*/
	font-size: 0.8em;
	position: sticky;
	top: 0;
	/* tbody内のセルより手前に表示する */
	z-index: 50;
}

.search-results table tbody {
	background: #fff;
	font-size: var(--font-size-middle);
}

.search-results table.summary tbody {
	font-weight: bold;
}

.search-results table tr {
	border-bottom: 1px solid var(--color-mainBrightnessUp);
}

.search-results table th {
	padding: 5px 5px;
	text-align: left;
	font-weight: 500;
	vertical-align: middle;
	line-height: 1.2;
}

.search-results table td {
	padding: 2px 10px;
	vertical-align: middle;
	line-height: 1.2;
	/* 文字を折り返して表示する（２行以上になる） */
	word-break: break-all;

	/* td内に入り切らない場合は省略（...）になる */
	/*text-overflow: ellipsis; */
	overflow: hidden;
	white-space: nowrap;
}


/* 奇数行の背景色 */
.search-results table tr:nth-child(odd) td {
	background: var(--color-row-odd);
}

/* 偶数行の背景色 */
.search-results table tr:nth-child(even) td {
	background: var(--color-gray);
}

/* 削除フラグが立っている背景色 */
.search-results table tr.--delete td {
	background: var(--color-delete);
	border-bottom: none;
}

.search-results table tr:hover td {
	background: hsl(172deg 76% 29% / 10%);
}

.search-results table tr.--delete:hover td {
	background: var(--color-delete);
}

/* 権限マスタ */
/* 奇数行の背景色・偶数行の背景色 */
.search-results table.--bgnone tr:nth-child(odd) td,
.search-results table.--bgnone tr:nth-child(even) td {
	background: var(--color-row-odd);
}

.search-results table.--bgnone tr:hover td {
	background: hsl(172deg 76% 29% / 10%);
}

.search-results table.summary tr:hover td {
	background: var(--color-row-odd);
}

/* 大項目背景色 */
.search-results table.--bgnone tr.primaryItem td {
	background: var(--color-primaryItem);
}

.search-results table.--bgnone tr.primaryItem:hover td {
	background: var(--color-primaryItem);
}

/* 中項目背景色 */
.search-results table.--bgnone tr.secondaryItem td {
	background: var(--color-secondaryItem);
}

.search-results table.--bgnone tr.secondaryItem:hover td {
	background: var(--color-secondaryItem);
}

.custom-search-results {
	overflow-x: auto;
	max-height: calc((100vh - 145px) * 0.55);
	overflow-y: auto;
	max-width: fit-content;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: none;
}

.custom-search-results table {
	width: fit-content;
	table-layout: fixed;
}

.custom-search-results table.summary {
	margin-left: auto;
	margin-right: 0;
}

.custom-search-results table thead {
	border-top: 0px solid var(--color-mainBrightnessUp);
	border-bottom: 1px solid var(--color-mainBrightnessUp);
	background: var(--color-gray);
	/*	color: #333;*/
	font-size: 0.8em;
	position: sticky;
	top: 0;
	/* tbody内のセルより手前に表示する */
	z-index: 50;
}

.custom-search-results table tbody {
	background: #fff;
	font-size: var(--font-size-middle);
}

.custom-search-results table.summary tbody {
	font-weight: bold;
}

.custom-search-results table tr {
	border-bottom: 1px solid var(--color-mainBrightnessUp);
}

.custom-search-results table th {
	padding: 5px 5px;
	text-align: left;
	font-weight: 500;
	vertical-align: middle;
	line-height: 1.2;
}

.custom-search-results table td {
	padding: 2px 10px;
	vertical-align: middle;
	line-height: 1.2;
	/* 文字を折り返して表示する（２行以上になる） */
	word-break: break-all;

	/* td内に入り切らない場合は省略（...）になる */
	/*text-overflow: ellipsis; */
	overflow: hidden;
	white-space: nowrap;
}

/* 奇数行の背景色 */
.custom-search-results table .odd-bg td {
	background: var(--color-row-odd);
}

/* 偶数行の背景色 */
.custom-search-results table .even-bg td {
	background: var(--color-gray);
}

/* 削除フラグが立っている背景色 */
.custom-search-results table tr.--delete {
	border-bottom: none;
}

.custom-search-results table tr.--delete td {
	background: var(--color-delete);
}

.custom-search-results table tr:hover even-bg td {
	background: hsl(172deg 76% 29% / 10%);
}

.custom-search-results-hover-td {
	background: hsl(172deg 76% 29% / 10%) !important;
}

/* スクロールバー */
.custom-search-results::-webkit-scrollbar {
	width: 15px;
	height: 15px;
}

.custom-search-results::-webkit-scrollbar-track {
	background: hsl(0 0% 100% / 0.8);
	border-radius: 1rem;
}

.custom-search-results::-webkit-scrollbar-thumb {
	background: hsl(0 0% 80% / 1);
	border-radius: 1rem;
	border: 2px solid hsl(0 0% 100% / 0.8);
}

/* スクロールバー */
.search-results::-webkit-scrollbar {
	width: 15px;
	height: 15px;
}

.search-results::-webkit-scrollbar-track {
	background: hsl(0 0% 100% / 0.8);
	border-radius: 1rem;
}

.search-results::-webkit-scrollbar-thumb {
	background: hsl(0 0% 80% / 1);
	border-radius: 1rem;
	border: 2px solid hsl(0 0% 100% / 0.8);
}

/* 詳細画面 レイアウト用（テーブルの線無し） */
.detail table {
	font-size: 0.9em;
}

.detail table th {
	text-align: left;
	padding: 0 20px 0 0;
	vertical-align: middle;
	font-weight: 400;
	font-size: var(--font-size-middle);
	word-break: keep-all;

}

.detail table td {
	vertical-align: middle;
	font-weight: 500;
	padding: 2px 0;
	word-break: break-all;
	font-size: var(--font-size-middle);
}

/* 詳細画面 テーブル用（テーブルの線有り） */
table.detail-table tbody {
	background: #fff;
	font-size: 0.9em;
}

table.detail-table thead {
	background: hsl(0deg 0% 90%);
}

table.detail-table th {
	padding: 5px 8px;
	text-align: left;
	font-weight: 500;
	vertical-align: middle;
	line-height: 1.2;
}

table.detail-table tr td {
	padding: 5px 8px;
	vertical-align: middle;
	word-break: break-all;
	font-weight: 400;
	line-height: 1.2;
}

table.detail-table tr td span {
	display: inline-block;
}

table.detail-table tr {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

/* 奇数行の背景色 */
table.detail-table tr:nth-child(odd) td {
	background: #fff;
}

/* 偶数行の背景色 */
table.detail-table tr:nth-child(even) td {
	background: var(--color-gray);
}

/* 選択行の背景色 */
table.detail-table tr.--selected td {
	background: var(--color-selectedBg);
}

table.detail-table tr.--selected:hover td {
	background: var(--color-selectedBg);
}

table.detail-table tr:hover td {
	background: hsl(172deg 76% 29% / 10%);
}

/* ==========================================================================
   text
========================================================================== */
.text-true {
	color: var(--color-sub) !important;
	font-weight: 500;
}

.text-false {
	color: var(--color-red) !important;
	font-weight: 500;
}

.text-info {
	color: var(--color-main) !important;
	font-weight: 500;
}


/* 小さく出したい情報 */
.info-small {
	font-size: 0.8em;
	color: hsl(0deg 0% 40%);
	line-height: 1.5;
}

/* .inputModeText {
  color: #666;
  font-size: 80%;
  margin-left: 5px;
} */

.info-message {
	background: var(--color-mainOpacity01);
	color: var(--color-main);
	padding: 10px 0px;
	border-radius: 1rem;
	font-weight: 500;
	width: 100%;
	text-align: center;
}

.result-message {
	background: var(--color-subOpacity01);
	color: var(--color-sub);
	padding: 10px 0px;
	border-radius: 1rem;
	font-weight: 500;
	width: 100%;
	text-align: center;
}

.result-fail-message {
	background: var(--color-redBackground);
	color: var(--color-red);
	padding: 10px 0px;
	border-radius: 1rem;
	font-weight: 500;
	width: 100%;
	text-align: center;
}

/* ==========================================================================
   検索結果件数
========================================================================== */
.search-results-num {
	width: fit-content;
	padding: 10px 15px;
	background: var(--color-gray);
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
	font-weight: 500;
	font-size: 0.8em;
}

.search-results-num span {
	font-size: 1.3em;
	margin: 0 5px;
	font-weight: bold;
	color: var(--color-main);
}

/* ==========================================================================
   フォーム
========================================================================== */
/* 検索欄の年月日時分 */
.input-form-date {
	display: flex;
	align-items: center;
	gap: 3px;
}

/* 契約番号 */
.input-form .menberNum {
	width: 150px;
}

/* E-mail */
.input-form .eMail {
	width: 400px;
}


/* inputのstyle */
/* type:text */
input.number {
	text-align: right;
}

input.form {
	border: 1px solid hsl(0deg 0% 70%) !important;
	border-radius: var(--inputbox-border-radius);
	padding-left: 5px;
}

input.form:hover {
	outline: none;
	box-shadow: 0 0 3px 0 var(--color-main);
}

input.form:focus {
	outline: none;
	border-color: var(--color-main);
	box-shadow: 0 0 3px 0 var(--color-main);
}

input.form:disabled,
input.form:disabled:hover,
input.form:read-only {
	background: var(--font-disabledBg);
	outline: none;
	border-color: transparent;
	box-shadow: none;
	/* opacity: 0.5; */
}

.numeric {
	text-align: right !important;
}

/* textarea */
textarea.form {
	border: 1px solid hsl(0deg 0% 70%);
	border-radius: var(--inputbox-border-radius);
	padding-left: 5px;
	/* font-weight: 500; */
	caret-color: var(--color-main);
}

textarea.form:hover {
	outline: none;
	box-shadow: 0 0 3px 0 var(--color-main);

}

textarea.form:focus {
	outline: none;
	border-color: var(--color-main);
	box-shadow: 0 0 3px 0 var(--color-main);
}

/* スクロールバー */
textarea.form::-webkit-scrollbar {
	width: 15px;
	height: 15px;
}

/* textarea.form::-webkit-scrollbar-track {
  background: hsl(0 0% 100% / 0.8);
  border-radius: 1rem;
} */

textarea.form::-webkit-scrollbar-thumb {
	background: hsl(0 0% 80% / 1);
	border-radius: 1rem;
	border: 4px solid hsl(0 0% 100%);
}

.form.resize-vertical {
	resize: vertical;
}


/* type:radio */
.radio {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 10px;
	font-weight: 500;
}

.radio.--flex-direction-column {
	align-items: flex-start;
	flex-direction: column;
	gap: 5px;
}

.radio>div>label>input[type="radio"] {
	margin-top: 0;
}

.radio label:hover {
	cursor: pointer;
}

.radio>div>label {
	display: flex;
	align-items: center;
}

/* type:checkbox */
.checkbox {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 10px;
	font-weight: 500;
}

.checkbox>div>label {
	display: flex;
	align-items: center;
}

.checkbox label:hover {
	cursor: pointer;
}


.modal .checkbox {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 10px;
	font-weight: 500;
	width: 100%;
	flex-direction: row;
	flex-wrap: wrap;
}

.modal .checkbox.bunkatsu label {
	width: 110px;
	text-align: left;
}

.modal .checkbox.shiharaiNum label {
	width: 160px;
	text-align: left;
}

/* type:select */
select.form {
	border: 1px solid hsl(0deg 0% 70%);
	border-radius: var(--inputbox-border-radius);
	width: 150px;
}

.authority-form {
	width: 225px !important;
}

select.form:hover {
	outline: none;
	box-shadow: 0 0 3px 0 var(--color-main);
	cursor: pointer;
}

select.form:focus {
	outline: none;
	border-color: var(--color-main);
	box-shadow: 0 0 3px 0 var(--color-main);
}

.form-select {
	font-size: var(--font-size-middle);
	border-radius: var(--inputbox-border-radius);
}

/* スクロールバー */
select.form::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

select.form::-webkit-scrollbar-track {
	background: hsl(0 0% 100% / 0.8);
	border-radius: 1rem;
}

select.form::-webkit-scrollbar-thumb {
	background: hsl(0 0% 80% / 1);
	border-radius: 1rem;
	border: 2px solid hsl(0 0% 100%);
}

.submit-btn {
	display: inline-block;
	padding: 14px 140px;
	background-color: #2294d6;
	border: none;
	border-radius: 3px;
	color: white;
	margin: 10px auto;
	cursor: pointer;
}

.input-frame {
	overflow: hidden;
}

/* ==========================================================================
   ページング
========================================================================== */
.linear {
	width: fit-content;
	margin: 10px auto;
	padding: 4px 4.2px 4px 4px;
	background: #fff;
	border-radius: 2rem;
}

.linear-previous {
	width: fit-content;
	border-radius: 2rem;
	color: var(--color-main);
	background: var(--color-background);
	background: var(--color-mainBrightnessUp);
	font-weight: 500;
	padding: 5px;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 20%);
	font-size: 1.2em;
}

.linear-next {
	width: fit-content;
	border-radius: 2rem;
	color: var(--color-main);
	background: var(--color-background);
	background: var(--color-mainBrightnessUp);
	font-weight: 500;
	padding: 5px;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 20%);
	font-size: 1.2em;
}

.linear-num {
	font-weight: bold;
	color: var(--color-main);
	font-size: 0.9em;
	margin: 5px;
}

.linear-num span {
	color: var(--color-main);
	margin: 0 3px;
}

.imageLogoPointer {
	cursor: pointer;
}

.bunkatsuTitle {
	padding: 3px;
	cursor: pointer;
	position: relative;
	color: var(--color-main);
	font-weight: 500;
	background-color: var(--color-mainBrightnessUp);
	border-radius: 5px;
	text-align: left;
}

.bunkatsuTitle:after {
	color: var(--color-main);
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	right: 10px;
	position: absolute;
	font-size: 1.5em;
	top: calc(0%);
	font-weight: 900;
}

.bunkatsuTitle.is-active:after {
	transform: rotate(-180deg);
}

.bunkatsuPulldown {
	display: none;
	padding: 10px;
}

.bunkatsuPulldown.is-active {
	display: block;
}

/* ==========================================================================
   button
========================================================================== */
/* レイアウト */
.btn-layout-flex {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	align-items: center;
}

/* ベース */
.btn {
	border: 0;
	cursor: pointer;
	display: block;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	text-align: center;
	text-decoration: none;
	position: relative;
	border: 3px solid #fff;
	line-height: 1;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 20%);
}

.btn:hover {
	opacity: 0.7;
}

.btn:disabled {
	opacity: 0.35;
	pointer-events: none;
	box-shadow: none;
}


/* 白抜きボタン */
.btn.btn-outline {
	color: var(--color-main);
	background: #ffffff;
	border-color: var(--color-main);
	font-weight: 500;
}

/* サブカラーで塗りつぶし */
.btn.btn-subcolor {
	color: var(--color-main);
	background: var(--color-mainBrightnessUp);
	border-color: var(--color-mainOpacity01);
	font-weight: 500;
}

/* 赤枠線、白抜き、赤文字のボタンスタイル */
.btn.btn-cancel {
	color: red;
	/* 赤文字 */
	background-color: white;
	/* 白抜き背景 */
	border: 2px solid red;
	/* 赤枠線 */
	font-weight: 500;
}

.btn.btn-cancel:hover {
	background-color: #f8d7da;
	/* ホバー時の薄い背景色 (薄い赤) */
	color: red;
	/* ホバー時の文字色 (そのまま赤) */
	border-color: #f5c6cb;
	/* ホバー時の薄い枠線色 (薄い赤) */
}

/* ベージュっぽいボタンスタイル */
.btn.btn-beige {
	color: black;
	/* 明るめのベージュ文字色 */
	background-color: #f5e1b1;
	/* 鮮やかなベージュ背景色 */
	border: 2px solid #e3c8a4;
	/* ベージュの枠線色 */
	font-weight: 500;
}

.btn.btn-beige:hover {
	background-color: #eae8d4;
	/* ホバー時の明るいベージュ背景色 */
	color: #8b5e3c;
	/* ホバー時の文字色 (そのまま明るめのベージュ) */
	border-color: #d0bfae;
	/* ホバー時のベージュ枠線色 */
	font-weight: 500;
}

/* 灰色っぽい背景に黒文字のボタンスタイル */
.btn-edit {
	color: #000000;
	/* 黒文字 */
	background-color: #d3d3d3;
	/* 明るいグレー背景色 */
	border: 2px solid #a9a9a9;
	/* ダークグレーの枠線色 */
	font-weight: 500;
	padding: 8px 16px;
	/* ボタンの内側の余白 */
	border-radius: 4px;
	/* 角を丸くする */
	text-align: center;
	/* テキストを中央揃え */
	cursor: pointer;
	/* マウスカーソルをポインタにする */
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
	/* ホバー時のアニメーション */
}

.btn-edit:hover {
	background-color: #b0b0b0;
	/* ホバー時の少し濃いグレー背景色 */
	color: #000000;
	/* ホバー時の文字色 (黒) */
	border-color: #8c8c8c;
	/* ホバー時の枠線色 */
}

/* 赤ボタン */
.btn.btn-red {
	color: var(--color-red);
	background: #ffffff;
	border-color: var(--color-red);
	font-weight: bold;
}


/* 大きいボタン(ログイン画面などに使用) */
.btn.btn-large {
	font-size: 16px;
	padding: 10px 0;
	width: 200px;
	border-radius: 50px;
}

/* 小さいボタン(検索ボタンなどに使用) */
.btn.btn-middle {
	font-size: var(--font-size-middle);
	padding: 5px 10px;
	min-width: 100px;
	width: fit-content;
	border-radius: 2rem;
	border-width: 2.5px;
}

/* 小さいボタン(表内などに使用) */
.btn.btn-small {
	/* font-size: 0.9em; */
	font-size: 1em;
	padding: 4px 10px;
	width: fit-content;
	/* border-radius: 0.5rem; */
	border-radius: 2rem;
	/* border-width: 1px; */
	border: none;
}

/* ボタン疑似要素 */
.btn.arrow::after {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	right: 0.5em;
	top: calc(50% - 0.5em);
}

.btn-outline.btn::after {
	color: var(--color-main);
}

.btn-red.btn::after {
	color: var(--color-red);
}

.link-text {
	color: var(--color-main);
	text-decoration: underline;
}

.link-text:hover {
	opacity: 0.7;
	text-decoration: none;
}

#passwordEye01,
#passwordEye02 {
	display: none;
}

input::-ms-reveal {
	visibility: hidden
}

.passwordEye {
	position: absolute;
	top: calc(50% - 0.5em);
	right: 5px;
	font-size: 1.2em;
	cursor: pointer;
}

.passwordEye i,
.passwordEyeLogin i {
	color: var(--font-midiumEmphasis);
}


/* ==========================================================================
   バッチ
========================================================================== */
.batch-normal {
	background: hsl(172deg 100% 30%);
	color: var(--color-text-on-button);
	padding: 2px 8px;
	width: fit-content;
	margin: auto;
	border-radius: 3px;
	font-size: 0.9em;
}

.batch-call {
	background: hsl(172deg 100% 40%);
	color: var(--color-text-on-button);
	padding: 2px 8px;
	width: fit-content;
	margin: auto;
	border-radius: 3px;
	font-size: 0.9em;
}

.batch-request {
	background: hsl(172deg 100% 45%);
	color: var(--color-text-on-button);
	padding: 2px 8px;
	width: fit-content;
	margin: auto;
	border-radius: 3px;
	font-size: 0.9em;
}

.batch-abnormal {
	background: var(--color-batch-abnomal);
	color: var(--color-text-on-button);
	padding: 2px 8px;
	width: fit-content;
	margin: auto;
	border-radius: 3px;
	font-size: 0.9em;
}

.toggle-button-1 {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 20px;
	border-radius: 20px;
	background-color: #dddddd;
	cursor: pointer;
	transition: background-color .4s;
}

.toggle-button-1:has(:checked) {
	background-color: #4bd865;
}

.toggle-button-1::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-shadow: 0 0 5px rgb(0 0 0 / 20%);
	background-color: #fff;
	content: '';
	transition: left .4s;
}

.toggle-button-1:has(:checked)::after {
	left: 20px;
}

.toggle-button-1 input {
	display: none;
}

.custom-checkbox-md {
	width: 20px;
	height: 20px;
}

.custom-checkbox-lg {
	width: 25px;
	height: 25px;
}

/* ==========================================================================
   加盟店検索テキストボックス
========================================================================== */
.member-store-textbox {
	height: var(--member-store-textbox-height);
	font-size: var(--font-size-small);
	border: 1px solid hsl(0deg 0% 70%);
	border-radius: var(--inputbox-border-radius);
}

.member-store-button {
	height: var(--member-store-textbox-height);
	font-size: 5px;
	border: 1px solid hsl(0deg 0% 70%)
}

/* ==========================================================================
   サイドバー
========================================================================== */
#side-bar {
	background-color: white;
	width: 1000px;
	height: 100%;
	position: fixed;
	top: 0;
	right: -1000px;
	z-index: 1050;
}

.sort-target:hover {
	background-color: #dcd6d6;
}

.sort-target {
	cursor: pointer;
}

.fixed-list {
	list-style: none;
	padding: 0;
}

.fixed-list li {
	background: #ebf4f8;
	border-bottom: 2px solid #ededed;
	border-left: 12px solid #99bdde;
	margin-bottom: 5px;
	padding: .5em;
	cursor: pointer;
}

.fixed-list li:hover {
	background: rgb(137 212 237);
}

.div-like-table-header {
	vertical-align: middle;
	font-weight: 400;
	font-size: var(--font-size-middle);
	word-break: keep-all;
	width: 200px;
}

.div-like-table-td {
	vertical-align: middle;
	font-weight: 400;
	font-size: var(--font-size-middle);
	word-break: keep-all;
}

.m-1 {
	margin: 0.25rem;
}

.nav-tabs {
	border: 1px solid;
	border-color: #e6ecef;
	background-color: #e6ecef;
}

.nav-tabs .nav-link {
	background-color: #dddada;
	color: black;
	border-bottom: 2px solid #dddada
}

.nav-tabs .nav-link.active {
	background-color: rgb(255 255 255);
	color: black;
	font-weight: bold;
	border-bottom: 2px solid #2589d0;
}


.input-as-label {
	border: none;
	padding: 0;
	background-color: transparent;
	color: #495057;
	font-size: 1rem;
	line-height: 1.5;
	display: inline-block;
	width: 70px;
	cursor: text;
	/* Optional: To give it the text cursor */
}

.input-as-label:focus {
	outline: none;
	box-shadow: none;
}

.payment-input-table-col {
	width: 160px;
}

.payment-show-table-item-col {
	width: 60%;
	max-width: fit-content;
}

.help-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: #007bff;
	/* 青色 */
	border-radius: 50%;
	color: white;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	line-height: 24px;
	cursor: pointer;
	position: relative;
	font-family: Arial, sans-serif;
	vertical-align: middle;
}

/* ==========================================================================
   CSVモードる用のレイアウト
========================================================================== */

/* コンテナのスタイル */
.table-container {
	width: 93%;
	margin: 10px auto;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background-color: #ffffff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* テーブルのスタイル */
.custom-table {
	width: 100%;
	border-collapse: collapse;
}

.custom-table td {
	padding: 5px !important;
}

.custom-table th {
	padding: 10px !important;
	/* パディングを増やして余裕を持たせる */
	background-color: #007bff;
	/* 青い背景色 */
	color: #ffffff;
	/* 白い文字色 */
	font-weight: bold;
}

.custom-table tbody tr:hover {
	background-color: #f1f1f1;
}

.custom-table td {
	color: #555;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {

	.custom-table th,
	.custom-table td {
		padding: 8px;
	}
}

.link-style {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

.form-table td,
.form-table th {
	padding: 0px 12px !important;
	vertical-align: middle;
}


.flatpickr-day.selected {
    background: #FF8C00 !important;
    border-color: #FF8C00 !important;
}
.flatpickr-day.inRange {
    background: #FFE4C4 !important;
    border-color: #FFE4C4 !important;
}

.disabled-input {
  background-color: #f5f5f5 !important;
  color: #aaa;
}