@charset "UTF-8";

** {outline:1px solid rgb(0, 221, 221)}

:root {
	--primary_background_color: #4e73df;
	--primary_hover_background_color: #0069d9;
	--primary_hover_border_color: #0062cc;
}

ul {
	margin-top: 0;
	margin-bottom: 0;
}

dt {
	font-weight: 400;
	font-size: 0.9rem;
}
dd {
	margin-bottom: 0pc;
}
label {
	margin-bottom: 0px;
}
button.close {
	vertical-align: middle;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
	padding-right: 0; /* Bootstrap のバグ 「calc(1.5em + .75rem)」 を設定するべきではない */
}
.alert {
	margin-bottom: 0; /* Bootstrap のバグ 「1rem」 を設定するべきではない */
}
/* ------------------------
 フッターを最下にするための設定
------------------------ */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
/* ------------------------
 ページタイトル（機能名）
------------------------ */
.page_title {
	background-color: #f8f9fc;
	border-bottom: 1px solid #e3e6f0;
}
.page_title > .page_title_inner {
	font-weight: 700;
	font-size: 1rem;
	color: #4e73df;
	margin: 0 auto;
	max-width: 1920px;
	padding: .75rem 1.25rem;
}
/* ------------------------
 画面共通のレイアウト要素
------------------------ */
/* 左右マージンを確保用 */
.main_container {
	margin: 0 auto;
	max-width: 1920px;
	width: 100%;
	padding: 0 2.5rem;
}
/* セクションを分割する用（） */
.section_area {
	margin-top: 20px;
}
/* ------------------------
 フッター
------------------------ */
.footer_copyright {
	text-align: center;
	font-size: 0.9rem;
	color: #6e707e;
	margin: 0;
	padding: 100px 0 3px;
	margin-top: auto;/* フッターを最下にするための設定 */
}
/* ------------------------
 チャットプラスを最適化（モーダルの後ろに表示する）
------------------------ */
#chatplusview {
	/* Modalはz-index:1050なので、それより少し下げておく */
	/* z-index: 100001; */
	z-index: 1000 !important;
}

/* ------------------------
 グリッドシステム（ col 1 - 5 ）・・・検索画面を想定
------------------------ */
.grid_wrapper {
	display: grid;
	column-gap: 16px;
	row-gap: 8px;
}
.grid_wrapper.col1 {
	grid-template-columns: repeat(1, 1fr);
}
.grid_wrapper.col2 {
	grid-template-columns: repeat(2, 1fr);
}
.grid_wrapper.col3 {
	grid-template-columns: repeat(3, 1fr);
}
.grid_wrapper.col4 {
	grid-template-columns: repeat(4, 1fr);
}
.grid_wrapper.col5 {
	grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 992px) {
	.grid_wrapper.col1,
	.grid_wrapper.col2,
	.grid_wrapper.col3,
	.grid_wrapper.col4,
	.grid_wrapper.col5 {
		grid-template-columns: 1fr;
	}
}
/* ------------------------
 項目を横に並べる
------------------------ */
.nowrap_block {
	display: flex;
	gap: 8px;
	align-items: center;
}
.auto_width { /* 幅を自動拡張縮小良い感じにするクラス */
	min-width: 0px;
	flex-basis: 100%;
}
/* ------------------------
 共通のフォーム部品（general_form）
------------------------ */
.general_form {
	display: block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #6e707e;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #d1d3e2;
	border-radius: .35rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
	/* アニメーション効果を削除・軽減の設定をした場合に有効化するスタイル */
	.general_form {
		transition: none;
	}
}
.general_form:focus {
	color: #6e707e;
	background-color: #fff;
	border-color: #bac8f3;
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(78, 115, 223, .25);
}
.general_form::placeholder {
	color: #858796;
	opacity: 1;
}
.general_form:disabled,
.general_form[readonly] {
	background-color: #eaecf4;
	opacity: 1;
}


.general_form_label {
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	display: inline-block;
	margin-bottom: 0;
}
/* ------------------------
 段組み
------------------------ */
/* 小さい時tableの用になり、大きいと上下2段レイアウト
 （検索のタイトルと、検索項目の親要素に適用するのを想定） */
.filtering_item {
	margin-bottom: 8px;
}
@media (max-width: 992px) {
	.filtering_item {
		display: grid;
		align-items: center;
		grid-template-columns: 0.3fr 1fr;
	}
}
/* 大きい時は普通のtableになり、小さいと上下2段(スタック：積み重ねた)になることができるレイアウト */
.stackable_table {
	margin-bottom: 16px;
}

/*@media (min-width: 992px) {*/
	.stackable_table {
		display: grid;
		align-items: center;
		grid-template-columns: 0.3fr 1fr;
	}
/*}*/
.align_top {
	align-items: baseline;
}
.align_bottom {
	align-items: end;
}
/* ------------------------
検索（虫メガネ）ボタン
------------------------ */
.search_icon:hover::before {
	background-color: var(--primary_hover_background_color);
	border-color: var(--primary_hover_border_color);
}
.search_icon::before {
	content: "\f002";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 24px;
	outline: none;
	color: #fff;
	background-color: var(--primary_background_color);
	padding: .375rem .375rem;
	border-radius: .35rem;
}
.search_icon {
	padding: 0;
	border: none;
	outline: none;
	background: none;
	transition: box-shadow .15s ease-in-out;
}
.search_icon:focus {
	border: none;
	outline: none;
}
.search_icon:focus::before {
	box-shadow: 0 0 0 .2rem rgba(78, 115, 223, .25);
}
/* ------------------------
	得意先コンボボックス
------------------------ */
.combo_box {
	position: relative;
  	width: 100%;
	font-size: 13px; 
	color: gray; 
}

.combo_input{
	box-sizing: border-box; 
}

/* dropdownの下矢印アイコン */
.combo_box i { 
	position: absolute;
	right: 10px; /* 右端に配置 */
	top: 50%;
	transform: translateY(-50%); /* 縦方向中央揃え */
	cursor: pointer;
}

.combo_list {
	position: absolute;
	width: 100%;
	border: 1px solid #ccc;
	background: white;
	display: none;
	max-height: 500px;
	overflow-y: auto;
	z-index: 10;
	border-radius: 10px;
	font-size: 1rem;
}

.combo_item {
	padding: 5px;
	cursor: pointer;
	pointer-events: auto;
}
.combo_item:hover {
	background-color: rgb(21, 95, 217);
  	color: white;
}

/* ------------------------
 パスワード用　目アイコンボタン
------------------------ */
.eye_icon:hover::before {
	background-color: rgba(0, 0, 0, .05);
}
.eye_icon::before {
	content: "\f070";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	outline: none;
	color: #000;
	background-color: rgba(0, 0, 0, .05);
	border-radius: .35rem;
	display: inline-block;
	text-align:center;
	padding: .375rem .68rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #6e707e;
	border: 1px solid #d1d3e2;
	border-left: 0px;
	width: 2.7rem;
}
.eye_icon {
	padding: 0;
	border: none;
	outline: none;
	background: none;
	transition: box-shadow .15s ease-in-out;
}
.eye_icon:focus {
	border: none;
	outline: none;
}
.eye_icon:focus::before {
	box-shadow: 0 0 0 .2rem rgba(78, 115, 223, .25);
}
.pw_show.eye_icon::before {
	content: "\f06e";
}

/* ------------------------
 テーブル
------------------------ */
.ordinary_table thead th {
	padding-top: 7px;
	padding-bottom: 7px;
	vertical-align:middle;
	white-space: nowrap;
}
.ordinary_table tbody td {
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align:middle;
}

/* ------------------------
 ボタン（プライマリーボタン）オリジナルデザイン
------------------------ */
.btn.ynet_btn {
	min-width: 180px;
}
@media (max-width: 992px) {
	.btn.ynet_btn {
		min-width: auto;
		width: 100%;
	}
}
/* ------------------------
 btn-outline-primary をカスタマイズ
------------------------ */
.btn-outline-primary:hover {
	background-color: #e5ebfa;
}
.btn-outline-primary:hover {
	color: #4e73df;
	background-color: #e5ebfa;
	border-color: #4e73df;
}
.btn-outline-primary.focus,.btn-outline-primary:focus {
	box-shadow: 0 0 0 .2rem rgba(105,136,228,.5)
}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
	color: #4e73df;
	background-color: #e5ebfa;
	border-color: #4e73df
}
/* ------------------------
	ボタン コントロール
------------------------ */
.air_search_button_control{
	justify-content: right; 
	display: flex; 
	width: 100%; 
	margin-bottom:10px;
}
.air_output_button_control{
	justify-content: left;
	display: flex; 
	width: 100%;
}
/* ------------------------
 ボタン
------------------------ */
.output-big-bottun {
	width:420px;
}
.reset_btn {
    background-color: white;
    color: black;
    border-radius: .35rem;
    border: 1px solid gray;
    padding: .375rem .75rem;
    width: 210px;
}

/* ------------------------
 デフォルトのfont-size、％表記は、上下方向に下付きになってしまうので、修正。
------------------------ */
.badge {
	font-size: 0.8rem;
}
/* ------------------------
 input とボタンとかを隙間なく、ひと塊として見せる用
------------------------ */
.input_group {
	display: flex;
	align-items: stretch;
}
.input_group > *,
.input_group > *::before,
.input_group > *::after {
	border-radius: 0;
}
.input_group > *:first-child,
.input_group > *:first-child::before,
.input_group > *:first-child::after {
	border-top-left-radius: .35rem;
	border-bottom-left-radius: .35rem;
}
.input_group > *:last-child,
.input_group > *:last-child::before,
.input_group > *:last-child::after {
	border-top-right-radius: .35rem;
	border-bottom-right-radius: .35rem;
}