@charset "UTF-8";


/* レスポンシブデザイン注意点
-------------------------------------------------------------------

１．モバイルファースト（スマホベース）のCSSとしている。
２．root文字サイズのみ４段階で設定（スマホ、タブレット縦横、パソコン）
３．以降は基本、１に記述し、その差分のみ３に追記をする。
  （但し、１に追記すると２～４にも適用されるので注意）
４．微調整が必要な場合のみ、２、４を記述する。

------------------------------------------------------------------*/



/*-------------------------------------------------------------------- 
	共通
---------------------------------------------------------------------*/


/* １．スマホ用 */
:root{
  font-size: 8px;
  font-weight: 500;
	letter-spacing: 0;
	color: #0a0a0a;
  /* CSSカスタムプロパティ */
  --full-height: 100vh;		/* JavaScriptにてアドレスバーを除いた高さを更新する ※100vhはアドレスバーを含んだ高さとなるためブラウザによってずれが生じる */
	--color-black: #0a0a0a;
	--color-label: #0050c9;
	--color-alert: #ed6363;
  --color-search-list-sub: #007413;
	--color-search-list-border: #8ac593;
	--color-search-list-red: #e75050;
	--color-number: #020081;
	--font-size-fontawesome: 1.35em;		/* FontAwesome用 アイコンサイズ */
	--line-height-fontawesome: 1.5;		/* FontAwesome用 */
	--font-family-main: source-han-sans-japanese;

}


/* PC以外で表示 */
.not_for_pc {
}

/* width 750 以上なら表示 */
.over_750_width {
	display: none;
}

/* width 1000 以上なら表示 */
.over_1000_width {
	display: none;
} 


/* １-１．スマホ縦のみ適用 */
@media all and (max-width: 499px) {

	/* スマホ縦のみ非表示 */
	.not_for_sp {
		display: none !important;
	}

	/* PCのみ表示 */
	.for_pc {
		display: none !important;
	}

}

/* １-２．スマホ横（高さ800以上の高解像度除く） 共通 ※アスペクト比１以上：横の方が長い */
@media all and (max-width: 799px) and (min-aspect-ratio: 1/1) {

  :root{
    font-size: 9px;
		font-weight: 500;
	}

	/* スマホ横も非表示 */
	.not_for_sp_horizon {
		display: none;
	}
	/* PCのみ表示 */
	.for_pc {
		display: none;
	}

}


/* ２-１．タブレット縦 9インチ以下（アスペクト比１以下：縦の方が長い） */
@media all and (max-width: 749px) and (min-width: 500px) and (max-aspect-ratio: 1/1) {
  :root{
    font-size: 10.5px;
		font-weight: 500;
	}

	/* スマホのみ表示 */
	.for_sp {
		display: none;
	}

	/* PCのみ表示 */
	.for_pc {
		display: none;
	}

}

/* ２-２．タブレット縦 10インチ以上（アスペクト比１以下：縦の方が長い） */
@media all and (max-width: 1200px) and (min-width: 750px) and (max-aspect-ratio: 1/1) {
	/* タブレット横と同サイズ */
	:root{
    font-size: 12px;
		font-weight: 400;
	}

	/* スマホのみ表示 */
	.for_sp {
		display: none;
	}

	/* PCのみ表示 */
	.for_pc {
		display: none;
	}

	/* width 750 以上なら表示 */
	.over_750_width {
		display: block;
	}

}

/* ３-１．タブレット横 共通（iPad Pro 12.9インチ横1,366pxはパソコン扱い） ※アスペクト比１以上：横の方が長い */
@media all and (max-width: 1249px) and (min-width: 800px) and (min-aspect-ratio: 1/1) {
  :root{
    font-size: 12px;
		font-weight: 400;
	}
	
	/* スマホのみ表示 */
	.for_sp {
		display: none;
	}
	/* PCのみ表示 */
	.for_pc {
		display: none;
	}


	/* width 750 以上なら表示 */
	.over_750_width {
		display: block;
	}

}

/* ３-２．タブレット横 9インチ以上（iPad Pro 12.9インチ横1,366pxはパソコン扱い） ※アスペクト比１以上：横の方が長い */
@media all and (max-width: 1249px) and (min-width: 1000px) and (min-aspect-ratio: 1/1) {

	/* width 1000 以上なら表示 */
	.over_1000_width {
		display: block;
	} 


}


/* ４．パソコン
-----------------------------------------------------------------------*/
@media all and (min-width: 1250px) {

  :root{
		font-size: 17px;
		font-weight: 400;
		letter-spacing: 0.02em;

	}
	
	/* スマホのみ表示 */
	.for_sp {
		display: none;
	}
	/* タブレット・スマホのみ表示 */
	.for_tab_sp {
		display: none;
	}

	/* PC以外で表示（span要素用） */
	.not_for_pc {
		display: none;
	}

	/* width 750 以上なら表示 */
	.over_750_width {
		display: block;
	}

	/* width 1000 以上なら表示 */
	.over_1000_width {
		display: block;
	} 

	/* 改行を無効にする */
	.br_sp { display: none;}

	/* スペースをセット */
	.set_space_pc { padding: 0 0.7rem;}

}


/* ５．昔のパソコンモニター（WXGA1366×768、1280×720）※アスペクト比１以上：横の方が長い */
@media all and (max-width: 1400px) and (min-width: 1250px) and (min-aspect-ratio: 1/1) {
  :root{
    font-size: 14px;
  }
}


/* ------------------------------------------------------------------------------------------------------
※※ 入力フォーム各種（input、select、、）にも別途フォントサイズ設定があるので、そちらも併せて調整する
---------------------------------------------------------------------------------------------------------*/





body {
	font-family: var(--font-family-main), sans-serif, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","MS PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Arial,Osaka,Sans-Serif;
}

/* 英字フォント */
.english {
	font-family: 'Roboto';
}

/* 	fontawesome のサイズ指定 */
i[class^="fa-"], .fa, .fab, .fad, .fal, .far, .fas {
	margin: 0em 0.15em 0 0;
	font-size: var(--font-size-fontawesome);
	line-height: 1.0;
}


/* hidden項目をレイアウトに影響させないようにする設定  */
.visibility_hidden {
	visibility: hidden;
	position: fixed;		/*  要素をないものとして扱うための設定 */
}

/* リンク  */
a, a:visited {
	color: rgb(0, 4, 255);
}



/* ４．パソコン
-----------------------------------------------------------------------*/
@media all and (min-width: 1250px) {

	/* 	fontawesome のサイズ指定 */
	i[class^="fa-"], .fa, .fab, .fad, .fal, .far, .fas {
		margin: 0em 0.3em 0 0;
	}
}


/* --------------------------------------------------------------------------- 	
  ローディングアニメーション   
---------------------------------------------------------------------------- */

.sk-chase {
	display: none;
	position: fixed;
	top: 40%;
	left: calc(50% - 55px);		/* 中心になるように幅の1/2を左に移動 */
	width: 110px;
	height: 110px;
	animation: sk-chase 2.5s infinite linear both;
	z-index: 999999;
}

.sk-chase-dot {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0; 
	animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
	content: '';
	display: block;
	width: 25%;
	height: 25%;
	background-color: rgb(0, 81, 255);
	border-radius: 100%;
	animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
	100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
	80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
	50% {
		transform: scale(0.4); 
	} 100%, 0% {
		transform: scale(1.0); 
	} 
}

/* オーバーレイ（背景） */
.modal_overlay_loading{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 888888;
	background: #aaaaaa;
	opacity: .5;
}



/* ----------------------------------------------------------------- 	
  アニメーション   
------------------------------------------------------------------- */

/* 左から右に伸びて、右にフェードアウト */
@keyframes left_to_right {
  0% {
		opacity: 0.1;
		transform-origin: top left;
    transform: scale(0.1, 1);
  }
  25%{
    opacity: 1;
    transform: scale(1, 1);
		transform-origin: top left;
  }
  65%{
    opacity: 1;
		transform-origin: top right;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0.1;
		transform-origin: top right;
    transform: scale(0, 1);
  }
}

/* 浮き上がって消える */
@keyframes pop_up {
  0% {
		opacity: 0.2;
  }
  30%{
    opacity: 1;
  }
  35%{
    opacity: 1;
  }
  100% {
		opacity: 0;
		visibility: hidden;	/* 要素を無効にしておく */
  }
}

/* 右左に動く */
@keyframes right_left {
  0% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(0.2em);
  }
  100% {
    transform: translateX(0);
  }
}



/* ---------------------------------------------------------------------------------------------- 	
  全体レイアウト   
------------------------------------------------------------------------------------------------ */

body	{ background-color: #eeeeee; text-align:center; }


/* 印刷用 */
@media print{

	body	{ background-color: #ffffff; }	

}

.container {
	line-height: 1.4;
	margin:0 auto; 
	width: 98vw; 
  text-align: center;
}

.container h1 { padding:20px 0 40px 0; text-align: left;}

.content { 
	padding: 0.5rem 0.8rem 0.8rem 0.8rem; 
	margin: 0 0 0.5rem 0; 
	border: solid 1px #ddd;
	border-radius: 0.6rem;
	background-color:#fff; 
	text-align: left; 
}

/*-- 実行ボタンエリア  --*/
.operate {
	display: flex;
	margin: 0.4rem 0.2rem 0.8rem 0.2rem;
}
.operate > li{
	margin: 0 1.5rem 0 0;
}
.operate > li:last-child{
	margin: 0 0 0 auto;
}

/*-- エラーメッセージ  --*/
.content_error { 
	font-size: 0.9rem; 
	clear: both; 
	padding: 0.3rem 0.5rem; 
	margin-bottom:13px; 
	border: solid 2px #e6b7b7; 
	color: #e60000; 
	background-color:#ffdbdb; 
	border-radius: 0.3em;
	text-align: left; 
}
/*-- 情報メッセージ  --*/
.content_info { 
  font-size: 1.2rem; 
  padding: 0.7rem 0.8rem; 
	border: solid 1px #c1e2bb; 
	color: var(--color-search-list-sub); 
	background-color:#c3f5c8; 
	border-radius: 0.3rem;
	text-align: left; 
}

/*-- JS 一時ポップアップメッセージ（処理完了など）  --*/
.js_popup_info { 
	display: none;
	position: fixed;
	top: 30%;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 2.5rem 0.5rem;
	width: 90vw;
	max-width: 50rem;
	color: #0049a8; 
	border: solid 1px #b0e6e1; 
	background-color:rgb(255, 255, 255); 
	border-radius: 0.5rem;
	font-size: 1.4rem; 
	font-weight: 400;
	text-align: center;
	box-shadow: 0 0 4rem rgb(44, 44, 44);
	z-index: 10000;
}


/* ４．パソコン
-----------------------------------------------------------------------*/
@media all and (min-width: 1250px) {

	.container {
		line-height: 1.5;
		width: 65rem; 
	}

	.content { 
		margin: 0 0 0.5rem 0; 
		padding: 0.4rem 1.0rem 0.5rem 1.0rem; 
	}

	/*-- 実行ボタンエリア  --*/
	.operate {
		margin: 0.4rem 0.4rem 0.4rem 0.4rem;
	}
	.operate > li{
		margin: 0 3rem 0 0;
	}

	/*-- エラーメッセージ  --*/
	.content_error { 
		padding: 8px 12px; 
		margin-bottom:13px; 
	}
	/*-- 情報メッセージ  --*/
	.content_info { 
		padding:  0.3rem 1rem; 
		font-size: 0.95rem; 
	}

	/*-- JS 一時ポップアップメッセージ（処理完了など）  --*/
	.js_popup_info { 
		padding: 2.5rem 2rem;
		width: 80vw;
	}


}



/*-------------------------------------------------------------------------------------------------------------- 
  入力フォームレイアウト  
----------------------------------------------------------------------------------------------------------------*/
.form_register {
  margin-bottom: 0.3rem;
	width: 100%;
}
.form_register ul {
	display: flex;
	flex-wrap: nowrap;
	margin: 0 0 0 0;
	background-color: #ffece4;
}

.form_register li{
	padding: 0.1rem 0.2rem 0.05rem 0.2rem;
	border-right: solid 2px #fff;
	border-bottom: solid 2px #fff;
	white-space: nowrap;
	vertical-align: bottom;
	font-size: 1.55rem;
  flex: 0 1 10em;         /* 自動拡大なし、自動縮小あり */
	min-height: 5rem;
}

.form_register li.no_width { 
	flex-basis: 0;
}

.form_register li:last-child{    /* 最後の項目で幅を自動調整 */
  flex-grow: 1000;
  flex-shrink: 1000;
	border-right: none;
}

/*-- ラベル  --*/
.form_register label {
	display: inline-block;
  width: 100%;
  height: 100%;
	font-size: 1.35rem;
	font-weight: 600;
  color: var(--color-label);
	cursor: text;	            /* マウスカーソルの形（テキスト）を指定する */
}
.form_register label:hover { color: #0077ff; }
.form_register label:focus-within { color: #0077ff; }

/*-- ラベル名称をinput以外で使用する場合（上記のラベルと同じ数値にする） --*/
.label_header {
	font-size: 1.35rem;
	font-weight: 600;
  color: var(--color-label);
}



/* 検索ボタン設置用 */
.form_register .label_search_icon{ width: calc(100% - 3.5rem);}
.form_register .label_min_content { 
	margin-right: 0.5rem;
	width: min-content; 
}

/* 検索ボタン＋削除ボタン設置用 */
.form_register .label_search_icon_batuari{ width: calc(100% - 5.0em);}


/*-- 必須ラベル --*/
.icon_required::after {
	display: inline-block;
	margin: 0 0 0 0.2rem;
	padding: 0.1rem 0.2rem;
  content: "必 須"; 
	background: #ff978e;
	color: #fff;
	line-height: 1;
	font-size: 1rem;
	font-weight: inherit;	
	border-radius: 0.1rem;
	position: relative;
	top: -1px;
}

/* 検索ボタンエリア */
.search_btn, .search_btn_2 {
	display: flex;
	margin: 0 0 1rem 0;
  list-style: none;
}
.search_btn li, .search_btn_2 li{ margin-left: 0.7rem; }
.search_btn li:nth-child(1), .search_btn_2 li:nth-child(1){ margin-left: 0px; }		
.search_btn li:nth-child(2){ flex-basis: 12rem; }		  /* 検索件数メッセージエリア */

/*-- 検索結果ヘッダ  --*/
.form_register .search_list_header { 
	background-color: #fff; 
}

.form_register .search_list_header li{ 
	padding: 0 0 0.1rem 0.05rem; 
	white-space: pre-wrap;			/*-- 幅を超える場合に折り返し  --*/
	min-height: min-content;
	border: none;
}

/*-- 検索結果明細  --*/
.form_register ul.search_list_body,
.form_register ul.search_list_body input ,
.form_register ul.search_list_body textarea
{ background-color: #c3f5c8; }

/*-- １行毎に背景色の濃淡を付ける  --*/
.form_register ul.search_list_body:nth-child(2n),
.form_register ul.search_list_body:nth-child(2n) input, 
.form_register ul.search_list_body:nth-child(2n) textarea 
{ background-color: #f1fbf2; } 

.form_register .search_list_body > li { 
	padding: 0.3rem 0 0.3rem 0.2rem;
	border-bottom: none;
	font-size: 1.1rem; 
	font-weight: 500;
	white-space: pre-wrap;			/*-- 幅を超える場合に折り返し  --*/
	min-height: 5.0rem;
}

/*-- 検索結果明細 ホバー  --*/
/*-- ※クリックイベントなしの場合はクラス[cursor_default]をセットする  --*/
.form_register ul.search_list_body:not(.cursor_default):hover, 
.form_register ul.search_list_body:not(.cursor_default):hover input,
.form_register ul.search_list_body:not(.cursor_default):hover textarea { 
	transition: all 0.3s;
	background-color: #97f1a0; 
	cursor: pointer;
}

/*-- 検索結果明細 ホバー  --*/
/*-- ※ホバーで背景色は変わるが、カーソルはデフォルトのままにしたい場合 --*/
.form_register ul.search_list_body.only_cursor_default:hover, 
.form_register ul.search_list_body.only_cursor_default:hover input,
.form_register ul.search_list_body.only_cursor_default:hover textarea{
	cursor: initial;
}


.form_register ul.search_list_body input ,
.form_register ul.search_list_body textarea 
{
	padding: 0 0 0 0;
}

/*-- 検索結果内のlabelにて、共通CSSを摘要しない場合（label forで使用する場合など） --*/
.search_list_body label.inherit, .search_list_body label.inherit:hover {
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
	cursor: inherit;
}

/*-- 検索結果明細 2行目のサブテキスト --*/
.font_green {
	font-size: 1.15rem;
	color: var(--color-search-list-sub);
}

/*-- 検索結果明細 2行目のサブテキスト --*/
.font_green_2 {
	font-size: 0.9em;
	color: var(--color-search-list-sub);
}

/*-- 検索結果明細 2行目のサブテキスト --*/
.font_green_3 {
	font-size: 0.9em;
	color: var(--color-search-list-sub);
}

/* 納品先名 */
.nohinsaki_padding {
	margin-top: 0.2rem;
	padding-left: 0.8rem;
}

/* 予約可能数がマイナスの場合は色を変える */
.reservation_left_minus {
	color: rgb(207, 78, 26);
}


/* ２-０．タブレット共通
-----------------------------------------------------------------------*/
@media all and (min-width: 500px) {
	.form_register li{
		min-height: 4.0rem;
	}

	.form_register .search_list_body > li { 
		font-weight: 400;
		font-size: 1rem; 
	}
}


/* ４．パソコン
-----------------------------------------------------------------------*/
@media all and (min-width: 1250px) {
	.form_register {
		margin-bottom: 10px;
	}
	
	.form_register li{
		padding: 3px 4px 1px 4px;
		flex: 0 1 200px;         /* 自動拡大なし、自動縮小あり */
		min-height: 1rem;
		font-size: 1rem;
	}

	/*-- ラベル  --*/
	.form_register label {
		font-size: 0.8rem;
		font-weight: 500;
	}

	/*-- ラベル名称をinput以外で使用する場合（上記のラベルと同じ数値にする） --*/
	.label_header {
		font-size: 0.8rem;
		font-weight: 500;
	}


	/* 検索ボタン＋削除ボタン設置用 */
	.form_register .label_search_icon_batuari{ width: calc(100% - 6em);}


	/*-- 必須ラベル --*/
	.icon_required::after {
		margin: 0 0 0 8px;
		padding: 2px 5px;
		font-weight: 300;	
		font-size: 0.65rem;
	}

	/* 検索ボタンエリア */
	.search_btn li, .search_btn_2 li{ margin-left: 1.5rem; }
	.search_btn li:nth-child(1), .search_btn_2 li:nth-child(1){ margin-left: 0px; }		
	.search_btn li:nth-child(2){ flex-basis: 12rem; }		  /* 検索件数メッセージエリア */

	/*-- 検索結果ヘッダ --*/
	.form_register .search_list_header { 
		position: relative; 	
	}	
	.form_register .search_list_header li{ 
		padding: 0 0 0.1rem 0.1rem; 
		white-space: nowrap;		
	}
	.form_register .search_list_header li.set_space_scrollbar{ 
		flex: 0 0 20px;
	}

	.form_register .search_list_body li { 
		padding: 0.2rem 0 0.2rem 0.3rem;
		font-weight: 400;
		min-height: 3.0rem;
	}

	/*-- 検索結果明細 2行目のサブテキスト --*/
	.font_green {
		font-size: 0.85rem;
	}

	/*-- 検索結果明細 2行目のサブテキスト --*/
	.font_green_2 {
		font-size: 0.95rem;
	}

	/*-- 検索結果明細 2行目のサブテキスト --*/
	.font_green_3 {
		font-size: 0.75rem;
	}

	/* 納品先名 */
	.nohinsaki_padding {
		margin-top: 0.2rem;
		padding-left: 0.8rem;
	}

	.form_register .search_list_header li.width_scrollbar {
		flex: 0 0 16px;
	}

}



/*-------------------------------------------------------------------------------------------- 
  ツールチップ（マウスホバーで吹き出しコメント） 
----------------------------------------------------------------------------------------------*/

/* パソコンのみ表示 */
.tooltip {
	display: none;
	position: relative;
	cursor: default;
}
.tooltip::after {
	margin: 0;
	margin-left: 0.2rem;
	padding: 0;
	content: '\f059';
	font-family: "Font Awesome 6 Pro";
	font-size: 1rem;
	font-weight: 600;
	color: #5d6c99;
	line-height: 1.1;
	border-radius: 3rem;
	vertical-align: top;
}
.tooltip .tooltiptext {
	position: absolute;
	white-space: normal;
	z-index: 1;
	bottom: 165%;
	left: -11.0rem;
	visibility: hidden;
	width: 19rem;
	height: auto;
	padding: 0.3rem 0.6rem;
	transition: all 0.1s;
	opacity: 0;
	font-size: 0.85rem;
	font-weight: 400;
	color: rgb(65, 65, 65);
	border-radius: 0.6rem;
	background-color: #ffffff;
	border: 0.35rem solid #e9e9e9;
	box-shadow: 0 0 1.5rem rgb(43, 43, 43);
} 
.tooltip .tooltiptext::after {
	position: absolute;
	top: 100%;
	left: 60%;
	margin-left: -0.35rem;
	content: ' ';
	border: 0.9rem solid transparent;
	border-top-color: #e9e9e9;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}


/*-- 一時メッセージ ツールチップ（特定条件にて吹き出しメッセージ） --*/
.tooltip_temp {
	display: none;
	position: fixed;
	white-space: normal;
	z-index: 1;
	width: auto;
	max-width: 30rem;
	height: auto;
	padding: 0.6rem;
	text-align: center;
	font-size: 1.15rem;
	font-weight: 400;
	color: #2b2b2b;
	border: 1px solid #ff9f9f;
	border-radius: 0.6rem;
	background: #ffffff;
	box-shadow: 0 0 1rem rgb(44, 44, 44);
} 

/*-- 一時メッセージ ツールチップ（JANスキャン結果表示用） --*/
.tooltip_temp_scan {
	padding: 1rem;
	min-width: 14rem;
	max-width: 40rem;
	font-size: 1.5rem;
}

/* ４．パソコン
-----------------------------------------------------------------------*/
@media all and (min-width: 1250px) {

	/* パソコンのみ表示 */
	.tooltip {
		display: inline-block;
	}
	.tooltip::after {
		font-size: 1.1rem;
	}

	/*-- 一時メッセージ ツールチップ（特定条件にて吹き出しメッセージ） --*/
	.tooltip_temp {
		padding: 0.8rem;
		max-width: 26rem;
		height: auto;
		font-size: 0.9rem;
		font-weight: 300;
	} 


}