/* グローバルスタイル */
@charset "UTF-8";

/* ボディとメインコンテンツのスタイル */
html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 20px;
	background-color: #F0F0F0;
	overflow-x: hidden;
}

@media (max-width: 1024px) {

	html,
	body {
		font-size: 15px;
	}

	.left-item {
		padding-top: 4px;
	}
}

main {
	padding: 30px 20px 10px;
}

/* ヘッダー関連のスタイル */
.fixed-top {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1030;
	/* ヘッダーを最前面に表示 */
}

header .item {
	color: #FFFFFF;
}

header .left-item {
	margin-left: 10px;
}

header .center-item {
	text-align: center;
	flex-grow: 1;
}

header {
	background-color: #34495E;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1100;
	height: 40px;
}

/* パンくずリスト */
.breadcrumb-style {
	position: sticky;
	top: 40px;
	transform: translateY(0);
	background-color: #ECF0F1;
	color: #7F8C8D;
	transition: transform 0.3s ease-in-out;
	padding-left: 10px;
	z-index: 1000;
}

li.dt-head-left.dt-body-left {
	display: flex;
}

.breadcrumb-style.hidden {
	transform: translateY(-100%) !important;
}

/* ユーザードロップダウンボタンのスタイル */
.user-dropdown-btn {
	height: 30px;
	padding-top: 0;
	background-color: #5ac5ff;
	border: 0;
	color: #fff;
}

#sidebarMenu.no-transition {
	transition: none !important;
}

.modal-dialog {
	max-width: 60%;
	/* ここで横幅を調整します。例えば90%は親要素の90%の幅になります */
}

@media (max-width: 576px) {
	.modal-dialog {
		max-width: 100%;
		/* ここで横幅を調整します。例えば90%は親要素の90%の幅になります */
	}
}

/* トグルサイドバーボタンのスタイル */
.toggle-sidebar-btn {
	border: none;
	z-index: 1020;
	background-color: #34495E;
	color: #fff;
}

/* メディアクエリによるレスポンシブ対応 */
@media (min-width: 1024px) {
	.toggle-sidebar-btn {
		display: none;
	}

	#sidebarMenu {
		transition: none !important;
		/* 大画面時のトランジション無効 */
		transform: translateX(0) !important;
		/* 常に表示 */
	}
}

@media (min-width: 576px) {
	.responsive-layout {
		display: flex;
		justify-content: flex-end;
	}

	.order-setting {
		margin-right: .5rem !important;
	}
}




.tempus-dominus-widget {
	position: absolute !important;
}

/* サイドバー関連のスタイル */
.sidebar {
	background-color: #2C3E50;
	z-index: 1020;
	width: 250px;
	padding-top: 40px;
	overflow-y: auto;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	transition: transform 0.3s ease;
}

/* パンくずリストのトランジション設定 */
.breadcrumb {
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	will-change: transform, opacity;
}

.breadcrumb.hidden {
	transform: translateY(-100%);
	opacity: 0;
}

#sidebarMenu {
	transition: transform 0.3s ease;
}

.no-transition #sidebarMenu {
	transition: none !important;
}

/* ユーザー操作による開閉時のみトランジションを適用 */
#sidebarMenu.collapsing,
#sidebarMenu.show {
	transition: transform 0.3s ease;
}

/* サイドバーの表示と非表示のトランスフォーム */
#sidebarMenu.show {
	transform: translateX(0);
}

#sidebarMenu:not(.show) {
	transform: translateX(-250px);
	/* サイドバーの幅に合わせて調整 */
}

.sidebar .nav-link {
	color: #ddd;
}

.sidebar .nav-link.active {
	background-color: #0d6efd;
	color: white;
}

.sidebar .nav-link:hover {
	background-color: #e9ecef;
	color: #0d6efd;
}

.sidebar .nav-item .collapse .nav-link {
	padding-left: 2rem;
	font-size: 0.8rem;
	white-space: nowrap;
	/* 改行を防ぐ */
}

.folder {
	font-weight: bold;
}

/* サブメニューのトグルアイコンのスタイル */
.toggle-icon {
	transition: transform 0.3s ease;
}

.nav-link.collapsed .toggle-icon {
	transform: rotate(0deg);
}

.nav-link:not(.collapsed) .toggle-icon {
	transform: rotate(90deg);
}

/*タブ*/
.nav-tabs .nav-link {
	background-color: rgb(192, 192, 192);
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	background-color: #f0f0f0 !important;
}

.tab-content>.active {
	background-color: #f0f0f0;
}

/* サイドバーのスクロールバーのスタイリング（オプション） */
.sidebar::-webkit-scrollbar {
	width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.4);
}

/* メインコンテンツのスタイル */
.main-content {
	/*サイドメニューの分・テーブルのレスポンシブに影響*/
	width: calc(100% - 250px);
	margin-left: 250px;
	margin-top: 0;
}

/* レシートプレビューのスタイル（画面表示用） */
#receiptPreview {
	width: 58mm;
	/* 幅を58mmに固定 */
	height: auto;
	box-sizing: border-box;
	background-color: #fff;
	padding: 10px;
}
#officialReceiptPreview {
	width: 58mm;
	/* 幅を58mmに固定 */
	height: auto;
	box-sizing: border-box;
	background-color: #fff;
	padding: 10px;
}

#receiptPreview p.Bfont {
	text-align: center;
	font-size: 13pt;
	font-weight: bold;
}
#officialReceiptPreview p.Bfont {
	text-align: center;
	font-size: 15pt;
	font-weight: bold;
}
#officialReceiptPreview span.Bfont {
	font-size: 15pt;
	font-weight: bold;
}

#receiptPreview p,
#receiptPreview div {
	margin: 0;
	padding: 2px 0;
	font-family: Arial, sans-serif;
	/* フォントを統一 */
	font-size: 10pt;
	/* フォントサイズを1ポイント小さく */
}
#officialReceiptPreview p,
#officialReceiptPreview div {
	margin: 0;
	padding: 2px 0;
	font-family: Arial, sans-serif;
	/* フォントを統一 */
	font-size: 10pt;
	/* フォントサイズを1ポイント小さく */
}

#receiptPreview p.message2 {
	white-space: pre-wrap;
}
#officialReceiptPreview p.message2 {
	white-space: pre-wrap;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
	main {
		margin-left: 0;
	}

	.detail {
		padding: 0 0;
		padding-bottom: 56px;
	}

	.main-content {
		width: 100%;
		margin-left: 0;
	}

	.toggle-sidebar-btn {
		display: block;
	}
}

/* オーバーレイとローディングメッセージのスタイル */
#overlay,
#overlays {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1500;
	justify-content: center;
	align-items: center;
}

.loading-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: white;
}

.spinner-border {
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
}

.message {
	font-size: 1.2rem;
	font-weight: bold;
}

/* ボタン関連のスタイル */
.btn-primary {
	background-color: #3498DB;
	border-color: #3498DB;
}

.btn-danger {
	background-color: #fa5252;
	border-color: #fa5252;
}

.btn-success {
	background-color: #18BC9C;
	border-color: #18BC9C;
}

.btn-secondary {
	background-color: #6c757d;
	border-color: #6c757d;
}

.link-danger {
	color: #ff6830;
}

.form-check-label {
	border-radius: 0.375rem 0 0 0.375rem !important;
	width: 120px;
}

/* ボタンの右揃え */
.right-alignment {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	/* 	margin-right: 20px; */
	margin-bottom: 20px;
}

/* 入力フォーム関連のスタイル */
/* ログイン画面 */
.form-signin {
	max-width: 330px;
	padding: 15px;
	background-color: white;
	border: 1px solid #ddd;
	border-radius: 5px;
}

/* メニュー */
.menu {
	max-width: 774px;
	margin-left: 250px;
}

.menu .col {
	margin: 10px;
}

#signin_btn {
	margin: 0;
}

/* 入力フィールドのスタイル */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ラジオボタンのラベルスタイル */
.radio-btn-label {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.label-left-radius {
	border-top-left-radius: 0.375rem !important;
	border-bottom-left-radius: 0.375rem !important;
}

.input-group-text.unit {
	background-color: #6c757d;
	color: #fff;
}

.input-group-text.title-message {
	background-color: #f7f9fa;
	color: #212529;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.radius-t-l {
	border-top-left-radius: 0;
}

.surround-line {
	/* 	max-width: 800px; */
	width: 100%;
	display: flex;
	flex-direction: column;
	align-content: center;
	flex-wrap: wrap;
	/* または任意の幅 */
	padding-left: 0;
	/* 左パディングを削除 */
	padding-right: 0;
	/* 右パディングを削除 */
	text-align: center;
	/* 中央寄せのテキスト設定 */
}

.gap-polyfill {
	display: flex;
	flex-direction: column;
	margin-top: -0.5rem;
	margin-bottom: -0.5rem;
}

.gap-polyfill>* {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.line-side {
	margin-top: 0 !important;
	margin-bottom: 15px;
	max-width: 800px;
	width: 100%;
	/* または任意の幅 */
	padding-left: 0;
	/* 左パディングを削除 */
	padding-right: 0;
	/* 右パディングを削除 */
	padding-bottom: 5px;
	text-align: center;
	/* 中央寄せのテキスト設定 */
	display: flex;
	flex-direction: column;
	gap: 1rem;
	/* 入力欄の間にスペースを追加 */
}

.line {
	width: 100%;
	/* フル幅 */
	max-width: 600px;
	/* 任意の幅 */
	margin: 0 auto 15px;
	/* 中央寄せ */
}

.left-line {
	margin-top: 0 !important;
	margin-bottom: 15px;
	max-width: 800px;
	/* または任意の幅 */
	padding-left: 0;
	/* 左パディングを削除 */
	padding-right: 0;
	/* 右パディングを削除 */
	text-align: center;
	/* 中央寄せのテキスト設定 */
	display: flex;
}

/* 変更履歴の入力欄のスタイル */
/* 変更履歴のテキストエリアのスタイル */
#change {
	height: calc(1.5em * 6);
	/* 縦に6行分の高さを確保（1.5emは行の高さの目安） */
	box-sizing: border-box;
	/* パディングとボーダーを含めたサイズ指定 */
	resize: vertical;
	/* 縦方向にのみリサイズ可能 */
	padding: 10px;
	/* 左上からの余白を設定 */
	padding-top: calc(10px + 1.5em);
	/* ラベル分の余白を追加して下にずらす */
	text-align: left;
	/* テキストを左寄せに設定 */
	vertical-align: top;
	/* テキストを上に揃える */
	overflow: auto;
	/* オーバーフローを自動的に処理 */
}

/* 参照ボタン専用のスタイル */
#reference {
	padding: 0;
	/* パディングを0に設定 */
	line-height: normal;
	/* 行の高さをデフォルトに設定 */
	width: 110px;
	height: 70px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
}

#file-download {
	padding: 0;
	/* パディングを0に設定 */
	line-height: normal;
	/* 行の高さをデフォルトに設定 */
	width: 100%;
	height: 70px;
	margin: 0px;
}



/* ボタングループのスタイル */
.button-group {
	display: flex;
	/* フレックスコンテナに設定 */
	flex-direction: column;
	/* 縦に並べる */
	gap: 10px;
	/* ボタン間のスペースを調整 */
	margin-bottom: 15px;
	/* 下のマージンを追加して入力欄とのスペースを調整 */
}

.button-group .btn {
	width: 100%;
	/* ボタンの幅を親コンテナに合わせる */
	margin: 0;
	/* ボタンのマージンを削除 */
	padding: 10px;
	/* ボタン内のパディングを設定 */
}

/* その他の要素の横並びのスタイル */
.horizontal-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	/* 中央寄せ */
	align-items: center;
	/* 必要に応じて中央寄せ */
	gap: 10px;
}

/* ボタングループ以外のボタンのスタイル調整 */
#line-buttons {
	display: flex;
	flex-direction: column;
	/* 縦に並べる */
	gap: 10px;
	/* ボタン間のスペースを調整 */
	margin-bottom: 15px;
	/* 下のマージンを追加 */
}

#buttons {
	display: flex;
	/* 	justify-content: center; */
	justify-content: flex-start;
	flex-wrap: wrap;
	/* 中央寄せ */
	margin-left: 0px !important;
	padding-left: 0px !important;
	min-width: 600px;
	padding-right: 0px;
}


/* ボタンが選択されたときのスタイルを修正 */
.btn-check:checked+.btn {
	background-color: #3498DB;
	/* 選択されたボタンの背景色 */
	color: #ffffff;
	/* 選択されたボタンの文字色 */
	border-color: #dcdcdc;
	/* 選択されたボタンの枠線色を灰色に */
}

.btn-group-vertical {
	display: flex;
	flex-direction: column;
}

/* ボタンが未選択のときのスタイルを修正 */
.btn-check:not(:checked)+.btn {
	background-color: #D3D3D3;
	/* 未選択のボタンの背景色 */
	color: #000000;
	/* 未選択のボタンの文字色 */
	border-color: #dcdcdc;
	/* 未選択のボタンの枠線色を灰色に */
}

/* 角丸と灰色の枠線を指定店舗と全店舗のボタンに適用 */
.btn-outline-primary {
	border-color: #dcdcdc;
	/* 枠線の色を灰色に設定 */
	padding: 0.5rem 1rem;
	/* ボタンの内側の余白を設定 */
}

/* 指定店舗と全店舗のボタンの左の余白をリセット */
.btn-outline-primary {
	border-color: #dcdcdc;
	/* 枠線の色を灰色に設定 */
	padding: 0.5rem 1rem;
	/* ボタンの内側の余白を設定 */
	margin-left: 0;
	/* 左側の余白をリセット */
}

.text-danger {
	color: red;
	font-size: 0.875rem;
	/* エラーメッセージのフォントサイズを小さくする */
}

#delivery-file-error {
	margin-bottom: 15px;
}

#delivery {
	margin-bottom: 0px !important;
	width: 500px;
	justify-content: center;

}

/*#search-store,
#search-patient {
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
}
*/

/*#store-name,
#company-name {
	margin-top: 10px;
	margin-bottom: 10px;
}
*/
/*#patient-name,
#patient-name-kana {
	margin-top: 10px;
	margin-bottom: 10px;
}
*/
.btn-outline-primary {
	border-radius: 0;
	/* 角を完全に直角にする */
	padding: 10px 20px;
	/* ボタンの内側の余白 */
	font-size: 1rem;
	/* フォントサイズ */
}

#store-selects {
	width: 100%;
	/* フル幅 */
	/* 	max-width: 600px; */
	/* 任意の幅 */
	margin: 0 auto;
	/* 中央寄せ */
}

.radio-btn-left,
.radio-btn-right {
	margin-right: 0%;
}

/* 指定店舗ボタンの左側だけ角丸にする */
.radio-btn-left {
	border-top-left-radius: 0.375rem;
	/* 左上の角を丸くする */
	border-bottom-left-radius: 0.375rem;
	/* 左下の角を丸くする */
}

.radio-btn-right {
	border-top-right-radius: 0.375rem;
	/* 左上の角を丸くする */
	border-bottom-right-radius: 0.375rem;
	/* 左下の角を丸くする */
}


.btn-outline-primary {
	line-height: 2.5;
	/* 調整する値を変更してください */
}

#delivery-file {
	margin-right: 0% !important;
	border-top-right-radius: 0rem;
	/* 左上の角を丸くする */
	border-bottom-right-radius: 0rem;
	/* 左下の角を丸くする */
	/* 	width: 490px; */
}

#company-name-error {
	line-height: 0.3;
	/* 行の高さを調整 */
}

.btn-group {
	width: 100%;
	/* ボタングループの幅を100%に設定 */
}


.modal-content {
	background-color: #ECF0F1;
}

.modal-header {
	background-color: #34495E;
	/* ヘッダーの色はデフォルトのまま */
	color: #ffffff;
}

.modal-header.success {
	background-color: #D4EDDA;
	/* ヘッダーの色はデフォルトのまま */
	color: #155724;
}

.modal-header.error {
	background-color: #f8d7da;
	/* 薄い赤 */
	color: #fa5252;
	/* 濃い赤文字 */
}

.modal-header.warning {
	background-color: #FFF59D;
	/* 薄い赤 */
	color: #A46A00;
	/* 濃い赤文字 */
}

.modal-body {
	background-color: #ECF0F1;
}

.modal-footer {
	background-color: #ECF0F1;
}

.text-danger {
	text-align: left;
}


.form-floating {
	flex: 1;
	/* 入力欄が均等に広がるように設定 */
}


#reg-list,
#medical-nursing-list,
#medical-institution-list,
#sort-list1,
#sort-list2,
#sort-list3,
#classification-list,
#denomination-list,
#delivery-slip-kan-list,
#delivery-slip-meisai-list,
#invoice-kan-list,
#invoice-meisai-list,
#receipt-kan-list,
#receipt-meisai-list {
	display: none;
	/* 初期状態で非表示 */
	border: 1px solid #ccc;
	/* ボーダーを設定 */
	position: absolute;
	/* 親要素に対して絶対位置に配置 */
	background-color: white;
	/* 背景色を設定 */
	list-style: none;
	/* リストマーカーを削除 */
	padding: 0;
	/* パディングをリセット */
	margin: 0;
	/* マージンをリセット */
	width: 100%;
	/* 幅を自動に設定 */
	overflow-y: auto;
	/* 高さを超える内容はスクロール可能に */
	left: 0;
	/* 左端に揃える */
	z-index: 1000;
	/* リストが他の要素の上に表示されるようにする */
}


#reg-list li,
#medical-nursing-list li,
#medical-institution-list li,
#sort-list1 li,
#sort-list2 li,
#sort-list3 li,
#classification-list li,
#denomination-list li,
#delivery-slip-kan-list li,
#delivery-slip-meisai-list li,
#invoice-kan-list li,
#invoice-meisai-list li,
#receipt-kan-list li,
#receipt-meisai-list li {
	padding: 8px;
	cursor: pointer;
	display: flex;
	min-height: 50px;
}

#reg-list li:hover,
#medical-nursing-list li:hover,
#medical-institution-list li:hover,
#sort-list1 li:hover,
#sort-list2 li:hover,
#sort-list3 li:hover,
#classification-list li:hover,
#denomination-list li:hover,
#delivery-slip-kan-list li:hover,
#delivery-slip-meisai-list li:hover,
#invoice-kan-list li:hover,
#invoice-meisai-list li:hover,
#receipt-kan-list li:hover,
#receipt-meisai-list li:hover {
	background-color: #f0f0f0;
}

#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	z-index: 9999;
}

.loading-message {
	background: rgba(0, 0, 0, 0.8);
	padding: 20px;
	border-radius: 5px;
}

.right-alignment-print {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 20px;
}

.input-flame-only {
	border: 1px solid #000;
	/* 枠の色と太さを指定 */
	background-color: transparent;
	/* 背景を透明にする */
	padding: 5px;
	/* 内側の余白を調整 */
	outline: none;
	/* フォーカス時のアウトラインを消す */
	box-shadow: none;
	/* 影を消す */
	border-radius: 5px;
}

#output-medical-institution {
	background-color: #6c757d;
	/* 初期の背景色（btn-secondaryの色） */
	color: #fff;
	/* 初期の文字色（白） */
}

#output-medical-institution.active {
	background-color: yellow;
	color: black;
}

.right-delete {
	margin-right: 0px !important;
}

/** タイトル付きボックス */
.boxt {
	position: relative;
	margin: 1em 0;
	padding: 0.5em 1em;
	border: solid 1px #858585;
	border-radius: 8px;
}

.boxt .box-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 9px;
	line-height: 1;
	font-size: 19px;
	background: #ede5dd;
	color: #858585;
}

.boxt p {
	margin: 0;
	padding: 0;
}

.goods-height {
	height: 50px;
}

.no-interaction {
	pointer-events: none;
	/* ユーザーの操作を無効にする */
}

.custom-disabled:disabled {
	background-color: #e9ecef;
	/* 任意の背景色 */
}

.check-style {
	transform: scale(1.5);
	/* チェックボックスを大きくする */
	margin-right: 15px;
	/* チェックボックスとテキストの間に余白 */
	cursor: pointer;
	/* チェックボックスにカーソルを適用 */
}

.label-condition {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bs-tertiary-bg);
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	text-align: center;
	white-space: nowrap;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}

.element-radius {
	border-top-right-radius: 0.375rem !important;
	/* 右上の角を丸くする */
	border-bottom-right-radius: 0.375rem !important;
	/* 右下の角を丸くする */
}

.disabled-row {
	pointer-events: none;  /* クリックできない */
	background-color: #e6e6e6 !important; /* 薄いグレー */
	color: #808080 !important;            /* 黒文字 */
}

.underline-target {
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #000;
  text-align: right;
}

.name-line {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid #000;
  padding-bottom: 4px;
  margin-bottom: 8px;
}

#kana::placeholder {
  font-size: 18px;
}

/* 集計処理アイコンとテキストの間に8pxの間隔を追加 */
.bi-file-earmark-bar-graph {
    margin-right: 8px;
}

/* 非活性の時のボタン */
.disabled-button {
    background-color: #e6e6e6 !important; /* 薄いグレー */
    color: #505050 !important;            /* 黒文字 */
	border: 1px solid #606060 !important;  /* 黒いふち */
}

/* ボタンに表示する文章が長い場合、折り返す */
.wrap-text-button {
    width: 170px; /* ボタンの幅を指定（必要に応じて変更） */
    word-wrap: break-word; /* 長い単語を折り返す */
    white-space: normal; /* 空白文字で折り返す */
    padding: 10px; /* 余白（オプション） */
}

/* サイドメニューが非活性の時 */
.disabled-link {
  color: #6c757d !important;  /* Bootstrapのdisabled風 */
  pointer-events: none;       /* クリック無効 */
  cursor: default;
  text-decoration: none;
}

/* ボタン右側を角丸にする */
.btn-right-end {
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}