@charset "utf-8";
/* CSS Document */

/* ---reset------------------------------------------ */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,p,blockquote,section,nav,header,footer{margin:0;padding:0;}ul li,ol li {list-style:none;} h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}input,textarea,select{ font-family: inherit;font-size:inherit; font-weight:inherit;}input,textarea,select{ *font-size:100%;}a img { border:none;}

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
/* ---common----------------------------------------- */
/* -------------------------------------------------- */
.cf:before,.cf:after {content: " "; display: table;}.cf:after {clear: both;}.cf {*zoom: 1;}
.alpha a:hover img {opacity: 0.8;filter: alpha(opacity=80);-ms-filter: "alpha(opacity=80)";}
img {border: 0px; vertical-align: bottom;}

#pagetop {position: fixed;bottom: 5%;right: 2%;z-index:999;}
#pagetop a {color: #FFF;padding: 2em 1em;text-align: center;font-size: 0.75em;text-decoration: none;border-radius: 6px; }
#pagetop:hover {opacity: 0.8;}

.ggmap {position: relative;padding-bottom: 75%;padding-top: 30px;height: 0;overflow: hidden;}
.ggmap iframe,
.ggmap object,
.ggmap embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.brsp {display:none;}

	.pc {display: block;} 
	.sp {display: none;}

@media screen and (max-width: 768px) {
	.pc {display: none;}
	.sp {display: block;}
}

a:link {
	color: #007FFF;
}
a:visited {
	color: #666699;
}
a:hover {
	color: #6666FF;
}

table {
	margin: 0 auto;
	border: 0;
	border-spacing: 0;
	border-collapse: collapse;
}

table th {
	padding:15px 14px  14px;
	font-weight: normal;
	background: #f4f4f4;
	border: 1px solid #777777;
}

table td {
	padding: 5px 4px;
	text-align: left;
	border: 1px solid #777777;
}

textarea {
	display: block;
}
.flexBox {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
	-webkit-justify-content: space-between;
			justify-content: space-between;
}

.inner {
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
}

input {
	margin-right: 2px;
}

input[type="radio"] {
	margin-right: 10px;
}

select {
	width: 106px;
	height: 27px;
/*		color: #BBBBBB;*/
	}


body{
	font-size: 13px;
	text-align: center;
	margin: 0;
	padding: 0;
	width: 100%;
	-webkit-text-size-adjust: none;
	line-height: 1.5em;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	height: 100%;
	color: #444444;
	overflow-x: hidden;
}

header {
	margin: 0 auto;
	width: 100%;
	background: url("image/bg_dot@2x.png") repeat;
	border-bottom: 5px solid #FF8000;
}

header .headerBox {
	margin-bottom: 56px;
	text-align: left;
	background: rgba(255, 255, 255, 0.8);
}

header .headerBox .flexBox {
	justify-content: space-between;
	-webkit-justify-content: space-between;
	
}

header .headerBox li + li {
	margin-left: 30px
}

header h1 {
	font-weight: bold;
	font-size: 18px;
}

header .flexBox {
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
	align-items: center;
	-webkit-align-content: center;
}

header .inner {
	margin: 0 0 125px;
	width: 100%;
	max-width: 1000px;
	padding: 14px 0 12px;
	font-size: 18px;
}

.contents {
	width: 100%;
	max-width: 1000px;
}

.btnLogin {
	margin-top: 74px;
}

footer{
	margin: 0 auto;
	padding: 186px 0;
	width: 100%;
	background: #444444;
}

footer .footerLogo {
	margin: 0 auto;
	width: 385px;
}

/* page */
.page >  div.inner {
	padding: 35px 0 184px;
}
	.page header {
		position: relative;
	}
	.page header .inner {
		margin: 0 auto 56px;
	}
	header .headerBox {
		background: rgba(255, 255, 255, 0.9);
	}
	
	.navBox {
		margin: 0 auto;
		width: 100%;
		max-width: 1000px;
		position: absolute;
		right: 0;
		left: 0;
		bottom: 8px;
	}
	
	.navBox ul {
		margin: 0;
		padding-left: 0;
	}
	
	.navBox ul li {
		height: 37px;
	}
	
	.navBox nav > ul > li + li {
		margin-left: 8px;
	}

.navBox ul > li {/*親階層のみ幅を25%にする*/
    height: 37px;
}
/*全てのリスト・リンク共通*/
.navBox li {
    list-style: none;
    position: relative;
}
.navBox nav ul > li > a {
    display: block;
    height: 37px;
    line-height: 37px;
    text-align: center;
    width: 100%;
}
/*子階層以降共通*/
.navBox li li {
    height: 0;
    overflow: hidden;
    transition: .5s;
}
.navBox li:hover > ul > li {
    height: 34px;
    overflow: visible;
}

.navBox li > ul > li a {
	transition: all 0.3s ease;
	} 

.navBox li > ul > li a::hover {
}

.rightBox {
	margin-right: 32px;
	justify-content: flex-end;
	align-items: flex-end;
}
.rightBox .currentPageBox {
	margin:0 0  6px 14px;
}
input.pageNo {
	width: 110px;
	height: 38px;
	text-align: center;
	font-size: 14px;
}

.listTable {
	width: 100%;
	font-size: 14px;
}

.listTable th {
	padding: 15px 6px;
	font-weight: normal;
}
.listTable th  img {
	vertical-align: baseline;
}

.listTable td {
	padding: 9px 8px;
}

.goodsNo , .listTable .clientTel {
		font-size:12px;
		color: #999999;
	}

.listTable input {
	padding: 11px 4px 9px;
	height: 32px;
	line-height: 1em;
	font-size: 14px;
}

.listTable02 {
	width: 100%;
	text-align: left;
	font-size: 14px;
}

/*.listTable02 > tbody > tr > td {*/
.listTable02 td {
	padding: 19px 6px 18px;
}

.productBox {
	position: relative;
}

.productBox img.select {
	margin: auto;
	position: absolute;
	top: 0;
	right: 3px;
	bottom: 0;
}

 .boxRed {
	background: #FFDFDF;
}
.boxRed2 {
	background: #FFBFBF;
}

.boxGray {
	background: #F4F4F4;
}

.textRed {
	color: #FF7373;
}

.textGray {
	color: #BBBBBB;
}

h2.bgH2 {
	margin: 0 0 8px 0;
	padding: 12px 0 13px;
	font-size: 24px;
	text-align: center;
}

h2.bgH2.nav1 {
	background: #ffefbf;
}

h2.bgH2.nav2 {
	background: #D5DFFF;
}

h2.bgH2.nav3 {
	background: #ffdfdf;
}

h2.bgH2.nav4 {
	background: #DFFFBF;
}

h2.bgH2.nav5 {
	background: #efbfff;
}

h2.bgH2.nav5-1 {
	background: #ffd24d;
}

h2.bgH2.nav6 {
	background: #CCCCCC;
}

h2.bgH2.nav6-2 {
	color:  #ffffff;
	background: #D90000;
}

h2.bgH2.navG {
	background: #F4F4F4;
}
h2.bgH2.navG2 {
	color: #ffffff;
	background: #424242;
}

h3 {
	font-size: 28px;
}

	table.nonTable th {
		text-align: left;
		font-weight: normal;
		background: none;
	}	

table.nonTable th , table.nonTable td {
	border: none;
}

table.addTable th {
	width: 158px;
	font-weight: normal;
	text-align: left;
}

table.addTable input {
	height:  34px;
}

.squareBox {
	width: 364px;
	position: relative;
	border: 1px solid #777777;
}

.squareBox::before {
	display: block;
	content: "";
	padding-top: 100%;
}

.squareBox div {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 22px;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}

a .squareBox {
	color: #000000;
}

	table.listTable {
		line-height: 1.2em;
	}
table.listTable td:nth-of-type(6n) {
	text-align: right;
	}

table.listTable td:nth-of-type(3n),
table.listTable td:nth-of-type(7n),
table.listTable td:nth-of-type(8n),
table.listTable td:nth-of-type(9n)	{
	padding: 2px;
}
.clientBox {
	position: relative;
}

.clientBox img.client {
	margin: auto;
	position: absolute;
	top: 0;
	right: 3px;
	bottom: 0;
}

	input.ordersReceived {
		width: 106px;
		height: 27px;
	}


/**pop up****************************************************/
.lity-container .lity-close:hover,.lity-container  .lity-close:focus,.lity-container .lity-close:active,.lity-container .lity-close:visited {
	font-size: 38px;
	line-height: 38px;
}
.lity-container .lity-close {
	font-weight: bold;
	font-size: 38px;
	line-height: 38px;
	
	}
	div.lity {
		background: url("image/bg_dot_t@2x.png") repeat;
	}
div.lity-container .listTable th {
	padding: 7px 8px 8px;
	text-align: left;
}
	
div.lity-container .listTable th:nth-child(n+3) {
	text-align: center;
}

	div.popupBox .nonTable .flexBox {
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
	}

div.popupBox {
	margin: 0 auto;
	max-width: 1000px; 
	text-align: center;
	background: #ffffff;
}
	
div.popupBox h2.popupH2 {
	padding: 15px 0;
	margin: 0;
	font-size: 22px;
	color: #ffffff;
	background: #222222;
}

div.lity-container div.inner {
	padding: 15px 42px 92px 45px;
}
	
div.lity-container  table.nonTable input {
	padding: 8px 9px 9px;
	height: 33px;
}
	
div.lity-container div.odBox .inner {
	padding: 47px 106px 47px 88px;
}

div.lity-container div.odBox th {
	padding: 15px 10px 14px;
}

div.lity-container div.odBox th:nth-child(n+2) {
	text-align: center;
}

div.lity-container div.odBox td:nth-child(n+2) {
	text-align: right;
}

div.lity-container div.attBox .inner {
	padding: 88px 90px 100px;
}

div.lity-container div.apBox .inner {
	padding: 15px 27px 37px;
}

.apBox table.purchasingTable th:nth-of-type(3),
.apBox table.purchasingTable th:nth-of-type(5) {
	text-align: left;
}

.apBox table.purchasingTable th:nth-of-type(6) ,
.apBox table.purchasingTable th:nth-of-type(7),
.apBox table.purchasingTable th:nth-of-type(8) {
	color: #ffffff;
	background: #777777;
	border: 1px solid #333333;
}
.apBox table.purchasingTable td:nth-of-type(3),
.apBox table.purchasingTable td:nth-of-type(5) {
	padding: 10px 4px 9px;
	vertical-align: top;
}
.apBox table.purchasingTable td:nth-of-type(6),
.apBox table.purchasingTable td:nth-of-type(7),
.apBox table.purchasingTable td:nth-of-type(8) {
	color: #ffffff;
	background: #777777;
	border: 1px solid #333333;
}

.apBox table.purchasingTable02 .apFlex {
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
}

.apBox .apBan {
	padding: 11px 0;
	margin: 0 auto;
	width: 818px;
	font-size: 18px;
	text-align: center;
	background: #f4f4f4;
	border: 5px solid #cccccc;
	border-radius: 5px;
}

.apBox div.apBan + div.apBan {
	margin-top: 5px;	
}

div.lity-container div.apBox .inner {
	padding: 15px 43px 90px 45px;
}