@charset "UTF-8";

:root{
	/* 顧客区分カラー */
	--customer_label_color_1:#E5003F;
	--customer_label_color_2:#3ECA95;
	--customer_label_color_3:#9DC3E6;
	--customer_label_color_4:#F6D3A0;
	--customer_label_color_5:#BC8FDD;
	--customer_label_color_6:#ffc1ff;
	--customer_label_color_7:#FF9999;
	--customer_label_color_8:#7F7F7F;
	/* 名寄せマッチングレベルカラー */
	--nayose_rank_color_S:#E5003F;
	--nayose_rank_color_A:#FFC000;
	--nayose_rank_color_B:#00B050;
	--nayose_rank_color_C:#0070C0;
	--nayose_rank_color_D:#7030A0;

}

/********************
.common
*********************/
html,body{
   height: 100%;
}
body{
	background-color:#ffffff;
}

.wrapper{
	overflow: hidden;
    position: relative;
    width: 100%;
    min-width: 1200px;
	min-height: 100%;
}

/********************
.header
*********************/

.header{
	position: relative;
	width:100%;
	box-sizing:border-box;
	padding: 0 20px 0px 80px;
	background-color:#003D72;
}
.headerBG{
	position: absolute;
	top: 40px;
	left: 0;
	height: 8px;
	width: 100%;
	/*background-image: url("/img/dot_fine_headb.png");
	background-position: 0 top ;
	background-size: auto auto;
	background-repeat: repeat;*/
	background-color: #E5003F;
}
.header .headerInner{
	box-sizing:border-box;
	width:100%;
	margin:0 auto;
	position: relative;
}
.siteTtl{
	color: #ffffff;
	font-size: 100%;
	line-height: 2.5rem;
	letter-spacing: 0.2em;
	font-weight: bold;
}
.loginBox{
	position: absolute;
	top: 0.35rem;
	right: 0;
	color: #ffffff;
}
.loginBox li{
	
}
.loginBox .loginName{
	display: inline-block;
	padding: 0.25em 1em 0.25em 0.25em;
}
.loginBox .logoutBtn{
	display: inline-block;
	margin: 0;
}
.loginBox .logoutBtn > a{
	display: inline-block;
	padding: 0.25em 1em;
	background-color: #D0DDEA;
	text-align: center;
	border-radius: 4px;
	color: #000000;
	text-decoration: none;
}
.loginBox .logoutBtn > a:hover{
	background-color: #A2BCD6;
}

/********************
.container
*********************/

.container{
	width:100%;
	box-sizing:border-box;
	padding: 30px 20px 60px;
	/*
	background-color: #eeeeee;
	background-image: url("/img/dot_fine_headb.png"),url("/img/dot_fine_headb.png");
	background-position: 0 top , 0 bottom;
	background-repeat: repeat-x , repeat-x;
	*/
}
.containerInner{
	width:1200px;
	margin: 0 auto;
}

/********************
.sidenavi
*********************/
.sidenavi{
	background-color: #ffffff;
}
.sidenaviInner{
	width: 100%;
}
.naviBox{
	width: 100%;
	margin-top: 50px;
	margin-bottom: 30px;
	padding-bottom: 0.25em;
}
.naviBox dt{
	border-top: #cccccc solid 1px;
    border-bottom: #cccccc solid 1px;
    background-color: #dddddd;
    color: #666666;
    margin-top: 0.25em;
    padding: 0.2em 0.25em 0.2em 2em;
}
.naviBox dt:first-child{
	margin-top: 0;
}
.naviBox dd{
	padding: 0.25em 0em 0em 2em ;
}
.naviBox dd > a{
	border-radius: 4px 0 0 4px;
    display: block;
    padding: 0.25em 0.5em 0.25em 0.25em;
	position: relative;
	text-decoration: none;
}
.naviBox dd > a:hover{
    background-color: #DAE4F1;
}
.naviBox dd > a::after{
	content: '';
	  width: 6px;
	  height: 6px;
	  border: 0;
	  border-top: solid 2px #266cd0;
	  border-right: solid 2px #266cd0;
	  position: absolute;
	  top: 50%;
	  right: 20px;
	  margin-top: -4px;
	  transform: rotate(45deg);
}
/**スライドメニューの枠 **/

.menu-drawer .btn {
  background: #8b9cac;
	border-right: #D0DDEA solid 2px;
	border-bottom: #D0DDEA solid 2px;
	border-radius: 0 0 4px 0;
  width: 60px;
  padding: 4px 0;
  cursor: pointer;
  text-align: center;
  top: 0;
  left: 0;
}
.menu-drawer .btn::before,
.menu-drawer .btn::after {
	content: " ";
	background-image: url(/img/icon_menu_open.png);
	background-position: center center;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}
.menu-drawer .btn::before {
	background-image: url(/img/icon_menu_open.png);
}
.menu-drawer .btn::after {
	background-image: url(/img/icon_menu_close.png);
}
.menu-drawer .other {
  background: rgba(0,0,0,0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.menu-drawer .menu-content {
	border-right: solid 1px #cccccc;
  background-color: #eeeeee;
  width: 350px;
  top: 0;
  left: 0;
	height: 100vh;
	overflow-y: auto;
}
.menu-drawer .btn,
.menu-drawer .menu-content,
.menu-drawer .other {
  position: fixed;
}
.menu-drawer .btn {
  z-index: 101;
}
.menu-drawer .menu-content {
  z-index: 100;
}
.menu-drawer .other {
  z-index: 99;
}
.menu-drawer #chk {
  display: none;
}
.menu-drawer #chk ~ .btn::before {
  display: block;
}
.menu-drawer #chk ~ .btn::after {
  display: none;
}
.menu-drawer #chk ~ .other {
  display: none;
}
.menu-drawer #chk:checked ~ .btn::before {
  display: none;
}
.menu-drawer #chk:checked ~ .btn::after {
  display: block;
}
.menu-drawer #chk:checked ~ .other {
  display: block;
}
.menu-drawer #chk ~ .menu-content {
  transform: translate(-350%,0);
  transition: transform 0.3s ease-in-out;
}
.menu-drawer #chk:checked ~ .menu-content {
  transform: none;
}

/********************
.footer
*********************/

.footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	box-sizing:border-box;
	padding: 0.25rem 20px;
	/*border-bottom: #333333 solid 1px;*/
	background-color:#003D72;
}
.footerBG{
	position: absolute;
	z-index: 1;
	bottom: 17px;
	left: 0;
	height: 8px;
	width: 100%;
	/*background-image: url("/img/dot_fine_headb.png");
	background-position: 0 top ;
	background-size: auto auto;
	background-repeat: repeat;*/
	background-color: #E5003F;
}

.footerInner {
	position: relative;
	z-index: 2;
    box-sizing:border-box;
	width:100%;
	margin:0 auto;
}

.footerInner .footercopyright{
	font-size: 70%;
	color: #bbbbbb;
	text-align: center;
	letter-spacing: 0.125rem;
}

/********************
.content
*********************/
.content{
	/*float: right;*/
	box-sizing:border-box;
	/*width:calc(100% - 200px);*/
	width:100%;
}

.content .contentInner{
	box-sizing:border-box;
	width:100%;
	margin:0 auto;
}

.pagettlWrap{
	border-top: #001221 solid 1px;
	border-bottom: #001221 solid 1px;
	background-color: #003D72;
	border-radius: 4px;
}
.pagettlWrap h1{
	padding-left: 1em;
	letter-spacing: 0.25rem;
	line-height: 1.8;
	color: #ffffff;
}

.descriArea{
	margin-top: 0.5rem;
}


.contttlWrap{
	margin-top: 2rem;
}
.contttlWrap h2{
	line-height: 1.2em;
    font-size: 120%;
    border-left: #003D72 solid 8px;
    padding-left: 0.3em;
    margin-bottom: 0.5em;
    letter-spacing: 0.2em;
    font-weight: bold;
}

.contsubttlWrap{
	margin-top: 1rem;
}
.contsubttlWrap h3{
	line-height: 1.2em;
    border-bottom: #c4c4c4 dotted 1px;
    padding:0 0.25em 0.25em 0.25em;
    margin-bottom: 0.25em;
    letter-spacing: 0.2em;
    font-weight: bold;
}

.conttblsubttlWrap{
	margin-top: 1rem;
}
.conttblsubttlWrap h4{
	line-height: 1.2em;
    font-size: 120%;
    border-left: #D0DDEA solid 8px;
    padding-left: 0.3em;
    margin-bottom: 0.5em;
    letter-spacing: 0.2em;
    font-weight: bold;
}

/**table***********/

/** テーブルの土台 **/
.tableWrap{
	width: 100%;
	margin-top: 0.5rem;
	background-color: #F3F3F3;
}

.tableWrap .addFormTable{
	background-color: #ffffff;
}

.tableWrap .tableBasic{
	width: 100%;
    border-top: #cccccc solid 1px;
    border-left: #cccccc solid 1px;
}
.tableBasic > tbody > tr > th,
.tableBasic > tbody > tr > td {
    border-right: #cccccc solid 1px;
    border-bottom: #cccccc solid 1px;
    padding: 0.4em 0.25em;
    box-sizing: border-box;
	vertical-align: middle;
}
.tableBasic > tbody > tr > th{
    background-color: #D0DDEA;
}
.tableBasic > tbody > tr > td {
    vertical-align: middle;
}
.tableBasic > tbody > tr > td > .innersetwrap{
    display: table;
	width: 100%;
}
.tableBasic > tbody > tr > td > .innersetwrap > li{
	display: table-cell;
	padding-right: 0.5em;
	vertical-align: middle;
}
.tableBasic > tbody > tr > td > .innersetwrap > li:last-child{
	padding-right: 0;
}

.bordertable {
    background-color:#FFFFFF;
}

.bordertable.onlyWrap{
	border:#cccccc solid 1px;
	padding:1.25rem;
	line-height: 1.25rem;
}

.tableWrap.bordertable > .tableBasic.tbodyZebra > tbody:nth-of-type(2n+1) {
	background-color:#EEF3F8 !important;
}
.tableWrap.bordertable > .tableBasic.tbodyZebra > tbody:nth-of-type(2n+0) {
	background-color:#FFFFFF !important;
}
.tableWrap.bordertable > .tableBasic.trZebra tr:nth-of-type(2n+1) {
	background-color:#EEF3F8 !important;
}
.tableWrap.bordertable > .tableBasic.trZebra tr:nth-of-type(2n+0) {
	background-color:#FFFFFF !important;
}
/*
.tableWrap.bordertable > .tableBasic:not(.trZebra) input[type=text] ,input[type=email] ,input[type=url] {
	height:24px;
}
.tableWrap.bordertable > .tableBasic:not(.trZebra) select {
	height:30px;
}

/** テーブルの土台 に ボーダー有りテーブル**/
.tableWrap.bordertable{
}
.tableWrap.bordertable > .tableBasic{
}
.tableWrap.bordertable > .tableBasic > tbody > tr > th,
.tableWrap.bordertable > .tableBasic > tbody > tr > td {
	vertical-align: middle;

}
.tableWrap.bordertable > .tableBasic > tbody > tr > th{
	background-color: #D0DDEA;
	line-height: 1.2;
}
.tableWrap.bordertable > .tableBasic > tbody > tr > td {
    /* font-size: 88%; */
}
.tableWrap.bordertable > .tableBasic select,
.tableWrap.bordertable > .tableBasic input,
.tableWrap.bordertable > .tableBasic textarea{
    font-size: 88%;
}
/** テーブルの土台 に ボーダー無しテーブル**/
.tableWrap.borderLesstable{
	border: #e0e0e0 solid 1px;
	padding: 0.75em 0.5em 0.75em 1em;
	box-sizing: border-box;
}
.tableWrap.borderLesstable > .tableBasic{
    border-top: none;
    border-left: none;
}
.tableWrap.borderLesstable > .tableBasic > tbody > tr > th,
.tableWrap.borderLesstable > .tableBasic > tbody > tr > td {
    border-right: none;
    border-bottom: none;
	padding: 0.5rem 0.5rem 0.5rem 0;
	vertical-align: top;
}
.tableWrap.borderLesstable > .tableBasic > tbody > tr > th{
	background-color: #d9dadb;
}
.tableWrap.borderLesstable > .tableBasic > tbody > tr > td {
}

/* 登録フォーム */
.tableWrap .addFormTable > .tableBasic > tbody > tr > .form_label {
    font-weight: 700;
}

.tableWrap .addFormTable > .tableBasic > tbody > tr > td {
	height: 44px;
}


.tableWrap .addFormTable > .tableBasic .customCheck {
    display: inline-block;
	min-width: 55px;
	margin: 0 5px;
}

.formsetBox{
	width: 100%;
	overflow: hidden;
}
.formsetBox > dt,
.formsetBox > dd{
	box-sizing:border-box;
	float: left;
}
.formsetBox > dt{
	border-left: #D0DDEA solid 4px;
    padding: 0.15em 0.25em 0.15em 0.25em;
	width: 9em;
	font-weight: bold;
}
/* .formsetBox > dd{
	width: calc(100% - 9em);
}
.formsetBox > dd .formPack{
	display: inline-block;
	vertical-align: middle;
}
.formsetBox > dd .formPack.formInnertxt{
	color: #888888;
}
 */
.formPack{
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.25em;
}
.formPack:last-child{
	margin-right: 0em;
}
.formPack.formInnertxt{
	color: #888888;
}

.tA-le{
    text-align: left;
}
.tA-ri{
    text-align: right;
}
.tA-cn{
    text-align: center;
}

.tC-red{
	color:#dd0000;
}

.fw-bold{
	font-weight: bold;
}

select,
input,
textarea{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "メイリオ", Meiryo , sans-serif;
    color: #333333;
    letter-spacing: 0em;
	border: #aaaaaa solid 1px;
	border-radius: 3px;
	line-height: 1.3;
    padding: 0.2em 0.4em;
	font-size: 0.95em;
}

input:disabled {
    border: #eaeaea solid 1px;color: #cccccc;
}

a.buttonBasic,
input.buttonBasic{
    display: inline-block;
    box-sizing: border-box;
    color: #ffffff;
	text-align: center;
    text-decoration: none;
    background-color: #003D72;
    padding: 1em 0.65em 1em 0.75em;
    letter-spacing: 0.1em;
    border-radius: 4px;
	line-height: 1.3;
}
a.buttonBasic:hover,
input.buttonBasic:hover{
	background-color: #47769e;
}

a.buttonBasic.buttonSs,
input.buttonBasic.buttonSs{
	padding: 0.2em 0.65em 0.2em 0.75em;
    letter-spacing: 0.1em;
}
a.buttonBasic.buttonLs,
input.buttonBasic.buttonLs{
	
}
input.buttonBasic{
	border: none;
	cursor: pointer;
}
.buttonlistWrap{
	margin: 2em auto 0;
	display: table;
	width: 100%;
}
.buttonlistWrap.btnWrap-right{
	margin: 2em 0 0 auto;
}
.buttonlistWrap.btnWrap-left{
	margin: 2em auto 0 0;
}
.buttonlistWrap li{
	display: table-cell;
	padding-right: 10px;
	width: 100%;
}
.buttonlistWrap li > a.buttonBasic,
.buttonlistWrap li > input.buttonBasic{
	width: 100%;
}
.buttonlistWrap li:last-child{
	padding-right: 0;
}
/** ボーダー無しテーブルのボタン**/
.tableWrap.borderLesstable .buttonlistWrap{
	margin: 0em auto 0;
}
.tableWrap.borderLesstable .buttonlistWrap a.buttonBasic,
.tableWrap.borderLesstable .buttonlistWrap input.buttonBasic{
    padding: 0.4em 0.65em 0.4em 0.75em;
}

/*****/

/*ボタンカラー*/
a.buttonBasic.bColor-green,
input.buttonBasic.bColor-green{
	background-color: #009900;
}
a.buttonBasic.bColor-green:hover,
input.buttonBasic.bColor-green:hover{
	background-color: #2cd82c;
}
a.buttonBasic.bColor-red,
input.buttonBasic.bColor-red{
	background-color: #d85050;
}
a.buttonBasic.bColor-red:hover,
input.buttonBasic.bColor-red:hover{
	background-color: #8e2323;
}
a.buttonBasic.bColor-blue,
input.buttonBasic.bColor-blue{
	background-color: #D0DDEA;
}
a.buttonBasic.bColor-blue:hover,
input.buttonBasic.bColor-blue:hover{
	background-color: #A2BCD6;
}
a.buttonBasic.bColor-base,
input.buttonBasic.bColor-base{
	background-color: #003D72;
}
a.buttonBasic.bColor-base:hover,
input.buttonBasic.bColor-base:hover{
	background-color: #5D72D9;
}
a.buttonBasic.bColor-orange,
input.buttonBasic.bColor-orange{
	background-color: #e49713;
}
a.buttonBasic.bColor-orange:hover,
input.buttonBasic.bColor-orange:hover{
	background-color: #fbbd1a;
}
a.buttonBasic.bColor-dis,
input.buttonBasic.bColor-dis{
	background-color: #808080;
	pointer-events: none;
}

.noteList{
	margin-top: 0.5em;
	font-size: 88%;
}
.noteList li{
	margin-bottom: 0.25em;
	line-height: 1.3em;
	text-indent: -1em;
	margin-left: 1em;
}

.mimicry_textbox {
	pointer-events: none;
	border: none;
	background: transparent;
}

/* RADIO BUTTON CHECKBOX.
 * -------------------------------------------------------------------------- */

label.customCheck {
	display: inline-block;
	word-break: break-all;
	padding-left: 1.5em;
	padding-right: 0.5em;
	cursor: pointer;
	position: relative;
	height:1.5em;
}
label.customCheck input[type="checkbox"],
label.customCheck input[type="radio"] {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
		-moz-appearance: none;
			appearance: none;
}
label.customCheck input span {
	display: inline-block;
}

label.customCheck input[type="checkbox"] + span {
	vertical-align: baseline;
	position: relative;
	display: inline-block;
	/* テキスト位置調整 */
	top: calc(50%);
	left: 0;
	-webkit-transform: translateY(calc((50%) * -1));
		-ms-transform: translateY(calc((50%) * -1));
			transform: translateY(calc((50%) * -1));
	padding-left: 0.2em; /* テキストとチェックボックスの間隔調整 */
}
label.customCheck input[type="radio"] + span {
	vertical-align: baseline;
	position: relative;
	display: inline-block;
	/* テキスト位置調整 */
	top: calc(50%);
	left: 0;
	-webkit-transform: translateY(calc((50%) * -1));
		-ms-transform: translateY(calc((50%) * -1));
			transform: translateY(calc((50%) * -1));
	padding-left: 0.0em; /* テキストとチェックボックスの間隔調整 */
}

/* RADIO BUTTON */
label.customCheck input[type="radio"] {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
label.customCheck input[type="radio"] + span::before {
	position: absolute;
	display: inline-block;
	content: '';
	box-sizing: border-box;
	border-radius: 20px;
	z-index: 0;
	/* ラジオボタン位置調整（疑似要素の元要素が基準） */
	top: calc(50%);
	-webkit-transform: translate(calc((1.5em) * -1), calc((50%) * -1));
		-ms-transform: translate(calc((1.5em) * -1), calc((50%) * -1));
			transform: translate(calc((1.5em) * -1), calc((50%) * -1));
	left: 0.0em;
	background-color: #eceaf8;
	width: 1.3em;
	height: 1.3em;
	border: #aaaaaa solid 1px;
}
label.customCheck input[type="radio"]:checked + span::before {
	border: #009900 solid 2px;
	background-color: #ffffff;
}
label.customCheck input[type="radio"]:checked + span::after {
	position: absolute;
	display: inline-block;
	content: '';
	box-sizing: border-box;
	border-radius: 20px;
	z-index: 1;
	top: 3px;
    left: -16px;
    background-color: #009900;
    width: 8px;
    height: 8px;
}

/* CHECKBOX */
label.customCheck input[type="checkbox"] {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
label.customCheck input[type="checkbox"] + span::before,
label.customCheck input[type="checkbox"] + span::after {
	position: absolute;
	/* チェックボックス位置調整（疑似要素の元要素が基準） */
	top: calc(50%);
	-webkit-transform: translate(calc((1.5em) * -1), calc((50%) * -1));
		-ms-transform: translate(calc((1.5em) * -1), calc((50%) * -1));
			transform: translate(calc((1.5em) * -1), calc((50%) * -1));
	left: 0.0em;
	display: inline-block;
	content: '';
	box-sizing: border-box;
}
label.customCheck input[type="checkbox"] + span::before {
	z-index: 0;
	background-color: #eceaf8;
	width: 1.3em;
	height: 1.3em;
	border: 1px #aaaaaa solid;
	border-radius: 3px;
}
label.customCheck input[type="checkbox"] + span::after {
	z-index: 1;
	margin: -0.2em 0.5em;
	width: 0.6em;
	height: 1.2em;
}
label.customCheck input[type="checkbox"]:checked + span::before {
	/* チェックボックス位置調整（疑似要素の元要素が基準） */
	top: calc(50%);
	-webkit-transform: translate(calc((1.5em) * -1), calc((50%) * -1));
		-ms-transform: translate(calc((1.5em) * -1), calc((50%) * -1));
			transform: translate(calc((1.5em) * -1), calc((50%) * -1));
	left: 0.0em;

	border: #009900 solid 2px;
	background-color: #ffffff;
}
label.customCheck input[type="checkbox"]:checked + span::after {
	border: 4px solid #009900;
	border-width: 0 3px 3px 0;
	/* チェック位置と角度の調整（疑似要素の元要素が基準） */
	top: calc(50%);
	-webkit-transform: translate(calc((1.5em) * -1), calc((50%) * -1)) rotate(45deg);
		-ms-transform: translate(calc((1.5em) * -1), calc((50%) * -1)) rotate(45deg);
			transform: translate(calc((1.5em) * -1), calc((50%) * -1)) rotate(45deg);
	left: 0.0em;
}
label.customCheck.listInnerCheck{
    padding-left: 0.75em;
	
	border: none;
    padding-top: 0.0em;
    padding-bottom: 0.0em;
    border-radius: 0px;
	background-color: inherit;
	display: inline;
}

label.customCheck.listInnerCheck input[type="radio"] + span::before {
	top: 0em;
	left: 0em;
}
label.customCheck.listInnerCheck input[type="checkbox"] + span::before,
label.customCheck.listInnerCheck input[type="checkbox"] + span::after {
	top: 0em;
	left: 0em;
}
label.customCheck.listInnerCheck input[type="radio"]:checked + span::after {
	top: 6px;
    left: 6px;
}
label.customCheck input[type="radio"]:disabled + span, 
label.customCheck input[type="checkbox"]:disabled + span {
	color: #dddddd;
}
label.customCheck input[type="radio"]:disabled + span::before, 
label.customCheck input[type="checkbox"]:disabled + span::before {
	border-color: #f0f0f0;
}
label.customCheck.no_char {
	padding-right: 0em !important;
	padding-left: 1.5em !important;
}
label.customCheck.no_char input[type="checkbox"] + span {
	/* 値リセット */
	padding-left: 0.0em !important;
	/* チェックボックス位置調整 */
	top: 50% !important;
	left: 50% !important;
	-webkit-transform: translate(calc((50% - 0.1em) * -1), calc(( 50% ) * -1)) !important;
		-ms-transform: translate(calc((50% - 0.1em) * -1), calc(( 50% ) * -1)) !important;
			transform: translate(calc((50% - 0.1em) * -1), calc(( 50% ) * -1)) !important;
}

/****アイコン*******************************/

.iconText{
	position:relative;
	line-height:2em;
	padding-left:2.4em;
	display: inline-block;
}
.iconText:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background-size: 2em auto;
	background-position: center center;
	background-repeat: no-repeat;
}
.iconText.icon-common:before{background-image:url("../img/iconsvg_common.svg");}
.iconText.icon-estimates:before{background-image:url("../img/iconsvg_estimates.svg");}
.iconText.icon-send-order:before{background-image:url("../img/iconsvg_send-order.svg");}
.iconText.icon-place-order:before{background-image:url("../img/iconsvg_place-order.svg");}
.iconText.icon-purchase:before{background-image:url("../img/iconsvg_purchase.svg");}
.iconText.icon-inventory:before{background-image:url("../img/iconsvg_inventory.svg");}
.iconText.icon-production-plan:before{background-image:url("../img/iconsvg_production-plan.svg");}
.iconText.icon-setting:before{background-image:url("../img/iconsvg_setting.svg");}
.iconText.icon-account:before{background-image:url("../img/iconsvg_account.svg");}
.iconText.icon-information:before{background-image:url("../img/iconsvg_information.svg");}
.iconText.icon-other:before{background-image:url("../img/iconsvg_other.svg");}
/*
.iconText.icon-common:before{background-image:url("../img/icon160_common.png");}
.iconText.icon-estimates:before{background-image:url("../img/icon160_estimates.png");}
.iconText.icon-send-order:before{background-image:url("../img/icon160_send-order.png");}
.iconText.icon-place-order:before{background-image:url("../img/icon160_place-order.png");}
.iconText.icon-purchase:before{background-image:url("../img/icon160_purchase.png");}
.iconText.icon-inventory:before{background-image:url("../img/icon160_inventory.png");}
.iconText.icon-production-plan:before{background-image:url("../img/icon160_production-plan.png");}
*/

/* 顧客区分 */
.customer-label-icon{
	display: inline-block;
    text-align: center;
    color: #cccccc;
    font-size: 0.9em;
    background-color: #ffffff;;
    border-radius: 3px;
    line-height: 1.6;
	padding:0 1rem;
	font-weight: 700;
}

.customer-label-icon--color1{
	border : var( --customer_label_color_1 ) 1.5px solid !important;
    color  : var( --customer_label_color_1 ) !important;
}

.customer-label-icon--color2{
	border : var( --customer_label_color_2 ) 1.5px solid !important;
    color  : var( --customer_label_color_2 ) !important;
}

.customer-label-icon--color3{
	border : var( --customer_label_color_3 ) 1.5px solid !important;
    color  : var( --customer_label_color_3 ) !important;
}

.customer-label-icon--color4{
	border : var( --customer_label_color_4 ) 1.5px solid !important;
    color  : var( --customer_label_color_4 ) !important;
}

.customer-label-icon--color5{
	border : var( --customer_label_color_5 ) 1.5px solid !important;
    color  : var( --customer_label_color_5 ) !important;
}

.customer-label-icon--color6{
	border : var( --customer_label_color_6 ) 1.5px solid !important;
    color  : var( --customer_label_color_6 ) !important;
}

.customer-label-icon--color7{
	border : var( --customer_label_color_7 ) 1.5px solid !important;
    color  : var( --customer_label_color_7 ) !important;
}

.customer-label-icon--color8{
	border : var( --customer_label_color_8 ) 1.5px solid !important;
    color  : var( --customer_label_color_8 ) !important;
}

/* 名寄せマッチングラベル */
.nayose-rank-icon{
	display: inline-block;
	text-align: center;
	color: #ffffff;
	font-size: 0.9em;
	border-radius: 3px;
	line-height: 1.3;
	padding:0 0.5rem;
	font-weight: 700;
}

.nayose-rank-icon--colorS{
	background-color : var( --nayose_rank_color_S ) !important;
	border : var( --nayose_rank_color_S ) 1.5px solid;
}

.nayose-rank-icon--colorA{
	background-color : var( --nayose_rank_color_A ) !important;
	border : var( --nayose_rank_color_A ) 1.5px solid;
}

.nayose-rank-icon--colorB{
	background-color : var( --nayose_rank_color_B ) !important;
	border : var( --nayose_rank_color_B ) 1.5px solid;
}

.nayose-rank-icon--colorC{
	background-color : var( --nayose_rank_color_C ) !important;
	border : var( --nayose_rank_color_C ) 1.5px solid;
}

.nayose-rank-icon--colorD{
	background-color : var( --nayose_rank_color_D ) !important;
	border : var( --nayose_rank_color_D ) 1.5px solid;
}

/* 顧客ランク */
.customer-rank-icon-wrap{
	display: flex;
	justify-content: end;
}

.customer-rank-icon{
	display: block;
	text-align: center;
	color: #ffffff;
	font-size: 0.9em;
	background-color: #cccccc;
	border-radius: 10px;
	line-height: 1.6;
	font-weight: bold;
	width:109px
}

.customer-rank-icon--color1{
	background-color: #b0c4de;
	border:2px solid #6495ed;
}

.customer-rank-icon--color2{
	background-color: #f0e68c;
	border:2px solid #ffa500;
	color: #ffa500;
}

.customer-rank-icon--color3{
	background-color: #d3d3d3;
	border:2px solid #808080;
	color: #808080;
}

.customer-rank-icon--color4{
	background-color: #ffa07a;
	border:2px solid #ff6347;
	color: #ff6347;
}

.customer-rank-icon--color5{
	background-color: #90ee90;
	border:2px solid #3cb371;
	color: #3cb371;
}




/**.pager******/
.pagerArea{
    margin-top: 1em;
    text-align: center;
}
.pagerArea .pagerBox{
    text-align: center;
}
.pagerArea .pagerBox li{
    display: inline-block;
}
.pagerArea .pagerBox li .pagerBtn{
    border: #cccccc solid 1px;
    border-radius: 4px;
    display: block;
    padding: 0em 0.75em;
    line-height: 2;
    color: #362779;
    background-color: #ffffff;
    text-decoration: none;
}
.pagerArea .pagerBox li .pagerBtn:hover{
    border: #362779 solid 1px;
}
.pagerArea .pagerBox li .pagerBtn.currentMark{
    background-color: #362779;
    color: #ffffff;
    pointer-events: none;
}
.pagerArea .pagerBox li .pagerBtn.btnDisable{
	pointer-events: none;
}
/********モーダル************/
body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}

.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 1001;
}
.modal_bg{
	background: rgba(50,50,50,0.7);
	height: 100vh;
	position: absolute;
	width: 100%;
}
.modal_content{
    background: #f0f0f0;
    left: 50%;
    padding: 40px 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
	overflow: auto;
	max-height: 70vh;
	border-radius: 5px;
	webkit-box-shadow: 0 5px 15px rgba(0,0,0,.8);
	box-shadow: 0 5px 15px rgba(0,0,0,.78);
}

.iframe_modal_content{
    background: #ffffff;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 70%;
	overflow: auto;
	border-radius: 5px;
	webkit-box-shadow: 0 5px 15px rgba(0,0,0,.8);
	box-shadow: 0 5px 15px rgba(0,0,0,.78);

	height:540px;
	min-height:540px;
	padding: 40px 0 0 0;
}

.modalInner{
    width: 700px;
    margin: 0 auto;
	padding: 0 20px;
}
a.modalCloseBtn,
input.modalCloseBtn{
	display: block;
	text-align: center;
	box-sizing: border-box;
	color: #ffffff;
	text-decoration: none;
	background-color: #3a4549;
	padding: 0.5em 0;
	border-radius: 4px;
    margin: 1em auto 0;
    width: 200px;

}
a.modalCloseBtn:hover,
input.modalCloseBtn:hover{
	background-color: #6a7f86;
}

.modal.modalLs .modal__content{
	width: 90%;
}
.modal.modalLs .modal__content .modalInner{
	width: 1000px;
}
.modal.modalSs .modal__content{
	width: 50%;
}
.modal.modalSs .modal__content .modalInner{
	width: 500px;
}

/********タブ切替************/
.tab_wrap{width:100%; margin:2em auto; border-bottom: #8b9cac solid 4px;}
.tab_wrap input.hiddenInput[type="radio"]{display:none;}
.tab_wrap .tab_area{
	background-color: #8b9cac;
	border-radius: 5px 5px 0 0;
	padding-top: 0.5em;
}
.tab_wrap .tab_area label{
	width:auto;
	margin:0 0em 0 0.5em;
	min-width: 4em;
	display:inline-block;
	padding:0.5em 0.5em;
	color:#f0f0f0;
	background:#a1b0be;
	text-align:center;
	cursor:pointer;
	/*transition:ease 0.2s opacity;*/
	/*border: #cccccc solid 1px;*/
	border-bottom: #8b9cac solid 2px;
	border-radius: 5px 5px 0 0;
}
.tab_wrap .tab_area label:hover{background:#49739b;}
.tab_wrap .panel_area{}
.tab_wrap .tab_panel{width:100%; padding:0em 0 1em; display:none;}

.tab_wrap #tab1:checked ~ .tab_area .tab1_label,
.tab_wrap #tab2:checked ~ .tab_area .tab2_label,
.tab_wrap #tab3:checked ~ .tab_area .tab3_label,
.tab_wrap #tab4:checked ~ .tab_area .tab4_label,
.tab_wrap #tab5:checked ~ .tab_area .tab5_label,
.tab_wrap #tab6:checked ~ .tab_area .tab6_label{
	background-color:#eeeeee; color:#333333; border-bottom: #eeeeee solid 2px; pointer-events: none;
}
.tab_wrap #tab1:checked ~ .panel_area #panel1,
.tab_wrap #tab2:checked ~ .panel_area #panel2,
.tab_wrap #tab3:checked ~ .panel_area #panel3,
.tab_wrap #tab4:checked ~ .panel_area #panel4,
.tab_wrap #tab5:checked ~ .panel_area #panel5,
.tab_wrap #tab6:checked ~ .panel_area #panel6{
	display:block;
}


.error_msg {
	color: red;
}

.inputlabel {
	background-color: #00000000;
	border-color: #00000000;
}

.required::before{
	font-size: 11px;
	color: #ff0000;
	content: "[必須]";
	padding-left: 2px;
}
.rules{
	font-size: 10px;
	color: #0000ff;
	padding-left: 2px;
}
.overTxtHide {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/***** タイトル（h1）左に戻るボタン *****************************/
.back_ttlbtn {
	display: inline-block;
	width: 1.8em;
	height: 1.8em;
	text-align: center;
	background: #a1b0be;
	text-decoration: none;
	vertical-align: top;
	margin-right: 0.4em;
}
.back_ttlbtn:hover {
	background: #49739b;
}
.back_ttlbtn > span{
	color: #FFF;
	display: inline-block;
	width: 1.8em;
	height: 1.8em;
	position: relative;
}
.back_ttlbtn > span::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(-135deg);
	margin-top: -4px;
}

.alert {
	color: #ff0000;
}
/*********************************
disabledで薄くする
*********************************/

select.dis-style,
input.dis-style,
textarea.dis-style,
select.fake-dis-style,
input.fake-dis-style,
textarea.fake-dis-style {
    border: #eaeaea solid 1px;
	color: #cccccc;
}
a.buttonBasic.dis-style,
input.buttonBasic.dis-style,
a.buttonBasic.fake-dis-style,
input.buttonBasic.fake-dis-style{
	color: #eeeeee!important;
	background-color: #cccccc!important;
	cursor: default;
}
label.customCheck.dis-style,
label.customCheck.fake-dis-style {
	cursor: default;
}

select.dis-style,
input.dis-style,
textarea.dis-style {
	pointer-events: none;
}
a.buttonBasic.dis-style,
input.buttonBasic.dis-style{
	pointer-events: none;
}
label.customCheck.dis-style {
	pointer-events: none;
}
label.customCheck.dis-style span {
	color: #dddddd;
}
label.customCheck.dis-style span::before {
	border-color: #f0f0f0!important;
}
.buttonlistWrapBG {
    width: 100%;
    margin-top: 3rem;
    background-color: #ffffff;
    border: #e0e0e0 solid 1px;
    padding: 0.75em 1em 0.75em 1em;
    box-sizing: border-box;
}
.buttonlistWrapBG .buttonlistWrap{
	margin: 0 auto;
}
.buttonbtmRtxt{
	color: #dd0000;
	line-height: 1.3;
	margin-top: 0.25em;
}
/****チェック付きボタン******/
.checkBulkBtn{
	margin-top: 0.5rem;
}
.checkBulkBtn a.buttonBasic.buttonSs {
	word-break: break-all;
	padding-left: 2em;
	padding-right: 1em;
	cursor: pointer;
	position: relative;
}

.checkBulkBtn a.buttonBasic.buttonSs span::before,
.checkBulkBtn a.buttonBasic.buttonSs span::after {
	position: absolute;
	top: 0.2em;
	left: 0.4em;
	display: inline-block;
	content: '';
	box-sizing: border-box;
}
.checkBulkBtn a.buttonBasic.buttonSs span::before {
	z-index: 0;
	width: 1.3em;
	height: 1.3em;
	border: var(--main-color) solid 2px;
	background-color: #ffffff;
	border-radius: 3px;
}
.checkBulkBtn a.buttonBasic.buttonSs span::after {
	z-index: 1;
	margin: -0.2em 0.5em;
	width: 0.6em;
	height: 1.2em;

	border: 4px solid var(--main-color);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
		transform: rotate(45deg);
}

.th_sort_btn {
	color: #0070c0;
	cursor: pointer;
	text-decoration: underline;
}
.th_sort_btn:after {
	content: "\025bc";
}
.th_sort_btn.asc {
	color: #FF0000;
}
.th_sort_btn.asc:after {
	content: "\025b2";
}
.th_sort_btn.desc {
	color: #FF0000;
}
.th_sort_btn.desc:after {
	content: "\025bc";
}

.task_kind_icon {
	min-width: 83px;
    padding: 2px 4px;
	text-align: center;
    display: inline-block;
	border-radius: 100vh;
	letter-spacing: 0.5px;
    background-color: #fff;
}
.task_kind_icon.kind1 {
	color: #9400d3;
	border: 1px solid #9400d3;
}
.task_kind_icon.kind2 {
	color: #ff1493;
	border: 1px solid #ff1493;
}
.task_kind_icon.kind3 {
	color: #333;
	border: 1px solid #333;
}

.task_priority_icon {
	color: #fff;
    width: 1.9em;
    height: 1.9em;
    line-height: 1.9em;
	text-align: center;
    display: inline-block;
	border-radius: 50%;
}
.task_priority_icon.priority1 {
	background-color: #66cc33;
}
.task_priority_icon.priority2 {
	background-color: #e49713;
}
.task_priority_icon.priority3 {
	background-color: #ff0000;
}
.coverBoxWrap {
	position: relative;
}
.coverBox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	/* 文字は透過させない */
	background: rgba(100, 100, 100, 0.6);
	/* 文字も透過させたい場合 */
	/* background-color: #ddd;
	opacity: 0.5; */
}


/****ラジオとチェック********************************************
文字とチェックマークが入れ替わるラジオとチェック
**************************************************************/

:root {
  --st-check-maincolor: #0e6eb8;
  --st-check-subncolor: #d85050;
}


label.stretchCheck {
	word-break: break-all;
	position: relative;
	display: inline-block;
	padding: 0.1em 0;
}

label.stretchCheck input[type="checkbox"],
label.stretchCheck input[type="radio"] {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
label.stretchCheck input + span {
	cursor: pointer;
	
	display: inline-block;
	vertical-align: middle;
	line-height: 1.2;
	
    border: var(--st-check-maincolor) solid 2px;
	background-color: var(--st-check-maincolor);
	color: #ffffff;
	font-weight: bold;
    padding: 0.25em 0.5em 0.25em 0.5em;
	border-radius: 4px;
}

/* RADIO BUTTON */
label.stretchCheck input[type="radio"] {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
label.stretchCheck input[type="radio"] + span {

}
label.stretchCheck input[type="radio"] + span::after {

}
label.stretchCheck input[type="radio"]:checked + span::after {
	position: absolute;
	top: 0.4em;
	left: calc(50% - 0.35em);
	display: inline-block;
	content: '';
	box-sizing: border-box;

	z-index: 1;
	margin: 0 0;
	width: 0.7em;
    height: 1em;
	
	border: 4px solid var(--st-check-subncolor);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
			transform: rotate(45deg);
}
/* CHECKBOX */
label.stretchCheck input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
label.stretchCheck input[type="checkbox"] + span {

}
label.stretchCheck input[type="checkbox"] + span::after {

}
label.stretchCheck input[type="checkbox"]:checked + span::after {
	position: absolute;
	top: 0.4em;
	left: calc(50% - 0.35em);
	display: inline-block;
	content: '';
	box-sizing: border-box;

	z-index: 1;
	margin: 0 0;
	width: 0.7em;
    height: 1em;
	
	border: 4px solid var(--st-check-subncolor);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
			transform: rotate(45deg);
}
/***/

label.stretchCheck input:hover + span {
	opacity: 0.7;
}
label.stretchCheck input:checked + span {
	border: var(--st-check-maincolor) solid 2px;
	background-color: #ffffff;
	color: #ffffff;
}
label.stretchCheck input:disabled + span {
	cursor:default;
	color: #dddddd;
	background-color: #fafafa;
	border: #dddddd solid 2px;
}
label.stretchCheck input:hover:disabled + span {
	opacity: 1;
}
/**********************/

/****吹き出し********************************************
overTxtHideをホバーすると省略されている項目に吹き出しが出るように
**************************************************************/
/* 吹き出しCSS */
.balloon_link {
	position: relative;
}

.balloon {
	position: absolute;
	display: none;
	z-index:102
}
.balloon_contents {
	position: absolute;
	bottom: 100%;
	right: 0;
	transform: translateX(100%) translateY(-13px);
	background-color: #DAE3F3;
	border: solid 1px #DAE3F3;
	z-index: 0;
	border-radius: 10px;
	box-shadow: 2px 2px 4px #808080;
}
/* 吹き出し下三角 */
.balloon_contents:before {
	content: "";
	position: absolute;
	z-index: -2;

	/* 三角の位置、大きさ調整 */
	left: 70px;
	bottom: -12px;
    border-top: 13px solid #DAE3F3;
    border-right: 23px solid transparent;
    border-left: 23px solid transparent;
    margin-left: -24px;
	filter:drop-shadow(2px 2px 4px #808080);
}
/* 吹き出し下三角（境界線） */
.balloon_contents:after {
	content: "";
	position: absolute;
	z-index: -1;

	/* 三角の位置、大きさ調整 */
	left: 70px;
	bottom: -13px;
	border-top: 13px solid #DAE3F3;
    border-right: 23px solid transparent;
    border-left: 23px solid transparent;
    margin-left: -24px;
}
.balloon_contents .balloon_wrap {
	position: relative;
	/* 吹き出しサイズ設定 */
	margin: 1px 0 1px 0;
	overflow-y: auto;
	background-color: #DAE3F3;
	border-radius: 5px;
}

.balloon_contents .balloon_wrap p {
	font-size: 1.0em;
	margin: 3px 7px;
	text-align: left;
	font-weight: bold;
}

/**********************/

/* 顧客ランク表示用 */
.itemlistIconset{
	width: 100%;
	margin-bottom: 0.25rem;
}
.itemlistIconset > li{
	float: right;
	width: 109px;
	min-width: 109px;
	margin-right: 1%;
	margin-bottom: 1%;
}
.itemlistIconset > li:nth-child(2n){
	margin-right: 0;
}
.itemlistIconset > li .itemlistIcon{
	display: block;
	text-align: center;
	color: #ffffff;
	font-size: 0.9em;
	background-color: #cccccc;
	border-radius: 10px;
	line-height: 1.6;
}
.itemlistIconset > li .itemlistIcon.ili01{
	background-color: #b0c4de;
	border:2px solid #6495ed;
	font-weight: bold;
}
.itemlistIconset > li .itemlistIcon.ili02{
	background-color: #f0e68c;
	border:2px solid #ffa500;
	color: #ffa500;
	font-weight: bold;
}
.itemlistIconset > li .itemlistIcon.ili03{
	background-color: #d3d3d3;
	border:2px solid #808080;
	color: #808080;
	font-weight: bold;
}
.itemlistIconset > li .itemlistIcon.ili04{
	background-color: #ffa07a;
	border:2px solid #ff6347;
	color: #ff6347;
	font-weight: bold;
}
.itemlistIconset > li .itemlistIcon.ili05{
	background-color: #90ee90;
	border:2px solid #3cb371;
	color: #3cb371;
	font-weight: bold;
}