@charset "utf-8";

/* リセット */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-user-select: none;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* vue */
[v-cloak] {
	display: none;
}

/* 共通 */
body{
	background: url(../images/bg.png) no-repeat #ECE9D8;
	font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",-apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Verdana, "sans-serif";
}
header{
	position: relative;
	background: url(../images/logo.png) no-repeat 4px 4px;
	width: 1005px;
	height: 30px;
}
header h1{
	display: block;
	float: left;
	margin-left: 134px;
	margin-top: 4px;
}
header #version{
	display: block;
	float: left;
	margin-left: 10px;
	margin-top: 9px;
	line-height: 20px;
	color: #fff;
	font-size: 12px;
}
header #headerButtons{
	position: absolute;
	top: 5px;
	right: 16px;
}
footer{
	position: absolute;
	top:643px;
	width: 1005px;
}
footer p{
	text-align: center;
	color: #333;
	line-height: 20px;
}
h1{
	color: #fff;
	font-size: 18px;
	line-height: 25px;
	font-weight: bold;
	text-shadow: 1px 1px 3px #000;
}
h2{
	color: #c30;
	font-weight: bold;
	font-size: 16px;
	line-height: 20px;
	margin-bottom: 4px;
}
h2 span{
	color: #000;
	font-weight: normal;
	font-size: 14px;
	margin-left: 40px;
}

h3{
	font-size: 12px;
	line-height: 16px;
	height: 16px;
}
p{
	font-size: 11px;
	line-height: 14px;
}
li{
	font-size: 11px;
	line-height: 14px;
}
table{
	font-size: 11px;
	line-height: 14px;
	border: 1px solid #ccc;
	border-collapse: collapse;
	border-spacing: 0;
	background: #fff;
}
th{
	text-align: left;
	border: 1px solid #ccc;
	padding: 2px 4px;
	background: #eee;
}
td{
	text-align: left;
	border: 1px solid #ccc;
	padding: 2px 4px;
	cursor: pointer;
}
label{
	font-size: 12px;
}
.pc tr:hover td{
	background: #DAF1FF;
}
tr.selected td{
	background: #9AD8FF;
}
input{
	font-size: 12px;
}
select{
	font-size: 12px;
	min-width: 150px;
}
.table-scroll{
	overflow-y: auto;
	overflow-x: hidden;
}
.table-scroll-thead{
	display:block;
}
.table-scroll-thead tr,
.table-scroll-thead th{
	table-layout:fixed;
}
.table-scroll-tbody{
	display:block;
	overflow-y: scroll;
}
.table-scroll-tbody.no-scroll{
	overflow-y:visible;
}
.table-scroll-tbody tr,
.table-scroll-tbody td{
	table-layout:fixed;
}
::-webkit-scrollbar{
	width: 15px;
}
::-webkit-scrollbar-thumb{
	background: #aaa;
	height: 20%;
	border-radius: 2px;
}
::-webkit-scrollbar-track-piece:start{ 
	background: #eee;
}
::-webkit-scrollbar-track-piece:end{
	background: #eee;
}
.red{
	color: #f00;
}
.cableQuantity{
	font-size: 16px;
	text-decoration: underline;
}

/* プリローダー */
#preloader{
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	z-index: 100;
	width: 1005px;
	height: 670px;
	background-color: rgba(0,0,0,0.3);
}
#preloader #preload{
	position: absolute;
	display: block;
	width: 460px;
	height: 210px;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	background: #DBE1EC;
	border: 3px solid #039;
	padding: 20px;
	border-radius: 20px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
#preloader #preload p{
	font-size: 12px;
	line-height: 2;
}
#preloader #preload p.version{
	text-align: right;
}
#preloader #preload p.title{
	font-size: 30px;
	line-height: 2;
	margin: 10px 0;
	color: #036;
}
#preloader progress{
	width: 200px;
	background: #9AD8FF;
}

/* 利用規約 */
#preloader #agreement{
	position: absolute;
	display: block;
	width: 510px;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	background: #ECE9D8;
	border: 3px solid #ACA899;
	padding: 10px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	text-align: left;
}
#preloader #agreement #agreementText{
	width: 510px;
	height: 335px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ACA899;
}
#preloader #agreement #agreementText p{
	padding: 10px;
	font-size: 12px;
	line-height: 1.6;
}
#preloader #agreement ul{
	margin: 10px 0;
}
#preloader #agreement li{
	margin: 5px 0;
	font-size: 12px;
}
#preloader #agreement li.ok{
	text-align: right;
}
#preloader #agreement ul#requirements{
	padding-left: 1em;
}
#preloader #agreement ul#requirements li{
	list-style: disc;
}
#preloader #agreement input[type=button]{
	width: 100px;
}

/* 選定条件 */
#condtions{
	position: absolute;
	left:14px;
	top:42px;
	width: 980px;
	height: 185px;
}
#condtions #condtionButtons{
	position: absolute;
	top: 0;
	right: 6px;
}
#condtions h2{
	color: #c30;
}
#condtions h2 span.icon-complete{
	display: inline-block;
	vertical-align:bottom;
	margin: 0;
	width: 52px;
	height: 23px;
	background: url(../images/complete_s.png) no-repeat;
}
.condtion-block{
	float: left;
	margin-left: 1px;
	width: 165px;
}
.condtion-block.product{
	width: 122px;
}
.condtion-block#List_1{
	width: 220px;
}
.condtion-block .table-scroll{
	height: 58px;
	background: #fff;
	border: 1px solid #ccc;
}
.condtion-block table{
	width: 100%;
}
.condtion-block td{
	width: 100%;
}
.condtion-block.product .table-scroll{
	height: 111px;
	background: #fff;
	border: 1px solid #ccc;
}
.condtion-block.has-arrow{
	padding-left: 25px;
	background: url(../images/arrow.png) no-repeat left 30px;
}
.condtion-block.has-arrow#List_5{
	padding-left: 70px;
	background: none;
}
.condtion-block.has-arrow.has-br{
	background: url(../images/arrow.png) no-repeat left 34px;
}
#condtions.has-br{
	background: url(../images/arrow_br.png) no-repeat 142px 59px;
}
.condtion-block.has-br h3{
	height: 20px;
}
.condtion-block.complete{
	width: 110px;
}
.condtion-block.complete p{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 110px;
	height: 60px;
	background: url(../images/complete.png) no-repeat left center;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-shadow: 1px 1px 3px #000;
}
.condtion-block.no-item p{
	padding: 6px 10px;
	border: 2px solid #f00;
	border-radius: 5px;
	background: #fff;
	font-size: 14px;
	line-height: 1.4;
	font-weight: bold;
	color: #f00;
	text-align: center;
}
input#keyword{
	width: 110px;
	padding: 2px 4px;
}

/* 選定結果の詳細 */
#details{
	position: absolute;
	left:14px;
	top:246px;
	width: 980px;
	height: 396px;
}
#details #detailButtons{
	position: absolute;
	top: 0;
	right: 6px;
}
#details #products{
	position: absolute;
	left:0px;
	top:30px;
	width: 650px;
	height: 185px;
}
#details #products p.comment{
	position: absolute;
	left:10px;
	top: 19px;
	color: #f00;
}
#details #products .table-div{
	position: absolute;
	left:0px;
	top: 39px;
	/*
	width: 646px;
	max-height: 104px;
	*/
}
#details #products table{
	/*width: 628px;*/
}
#details #products table tbody{
	max-height: 82px;
}
#details #products table th.type,
#details #products table td.type{
	width: 150px;
}
#details #products table th.priceText,
#details #products table td.priceText{
	width: 70px;
}
#details #products table th.quantity,
#details #products table td.quantity{
	width: 30px;
}
#details #products table th.subtotalText,
#details #products table td.subtotalText{
	width: 70px;
}
#details #products table th.detail{
	width: 64px;
}
#details #products table td.detail{
	width: 70px;
	padding: 0;
}
#details #products table th.comment,
#details #products table td.comment{
	width: 188px;
}
#details #products table th.comment.is-cable,
#details #products table td.comment.is-cable{
	width: 346px;
}
#details #products p.exp{
	position: absolute;
	left:10px;
	top:149px;
}

#details #photo{
	position: absolute;
	left:650px;
	top:30px;
	width: 308px;
	height: 185px;
}
#details #photo #photoArea{
	position: absolute;
	left:1px;
	top:19px;
	width: 297px;
	height: 156px;
	overflow: hidden;
	text-align: center;
}
#details #photo p.error{
	position: absolute;
	text-align: center;
	left:1px;
	top:19px;
	width: 297px;
	height: 156px;
	color: #ccc;
	font-size: 16px;
	line-height: 156px;
	font-weight: bold;
	text-shadow: 1px 1px 3px #000;
}
#details #parentCables{
	position: absolute;
	left:0px;
	top:220px;
	width: 475px;
	height: 175px;
}
#details #parentCables select{
	position: absolute;
	left:0px;
	top: 19px;
	width: 380px;
}
#details #parentCables .table-div{
	position: absolute;
	left:0px;
	top: 44px;
	/*width: 398px;
	max-height: 120px;*/
}
#details #parentCables table{
	/*width: 380px;*/
}
#details #parentCables table th:nth-child(1),
#details #parentCables table td:nth-child(1){
	width: 145px;
}
#details #parentCables table th:nth-child(2),
#details #parentCables table td:nth-child(2){
	width: 60px;
}
#details #parentCables table th:nth-child(3),
#details #parentCables table td:nth-child(3){
	width: 60px;
}
#details #parentCables table th:nth-child(4),
#details #parentCables table td:nth-child(4){
	width: 60px;
}
#details #parentCables table tbody{
	max-height: 100px;
}
#details #parentCables .cableQuantity{
	position: absolute;
	left:400px;
	top: 100px;
}
#details #childCables{
	position: absolute;
	left:496px;
	top:220px;
	width: 475px;
	height: 175px;
}
#details #childCables select{
	position: absolute;
	left:0px;
	top: 19px;
	width: 380px;
}
#details #childCables .table-div{
	position: absolute;
	left:0px;
	top: 44px;
	/*width: 398px;
	height: 120px;*/
}
#details #childCables table{
	/*width: 380px;*/
}
#details #childCables table th:nth-child(1),
#details #childCables table td:nth-child(1){
	width: 145px;
}
#details #childCables table th:nth-child(2),
#details #childCables table td:nth-child(2){
	width: 60px;
}
#details #childCables table th:nth-child(3),
#details #childCables table td:nth-child(3){
	width: 60px;
}
#details #childCables table th:nth-child(4),
#details #childCables table td:nth-child(4){
	width: 60px;
}
#details #childCables table tbody{
	max-height: 100px;
}
#details #childCables .cableQuantity{
	position: absolute;
	left:400px;
	top: 100px;
}
#details h2{
	color: #060;
}

/* フリッカ */
.flicker{
	display: none;
	pointer-events: none;
	position: absolute;
	border: 5px solid #f00;
	border-radius: 10px;
}
#flicker{
	top: 270px;
	left: 7px;
	width: 977px;
	height: 362px;
}
#flickerMini{
	top: 458px;
	left: 7px;
	width: 473px;
	height: 174px;
}


/* 説明画像 */
#imageLoader{
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	z-index: 100;
	width: 1005px;
	height: 670px;
	pointer-events: none;
}
#imageLoader.enable-events{
	pointer-events: auto;
}
#imageLoader div{
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	background: #fff;
	border: 2px solid #000;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	/* pointer-events: auto; */
}
#imageLoader p{
	text-align: left;
	font-size: 14px;
	margin-bottom: 10px;
}
#selectList{
	position: absolute;
	left: 0;
	top: 31px;
	width: 1005px;
	height: 617px;
	background: url(../images/bg_selectlist.png) no-repeat;
}

/* 選定結果 */
#selectList h2{
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	line-height: 28px;
	margin-bottom: 0;
	padding-top: 2px;
	text-align: center;
}
#selectList #selectListTable{
	width: 1005px;
}
#selectList #selectListTable table{
	/*width: 999px;*/
}
#selectList #selectListTable table tbody{
	max-height: 520px;
}
#selectList #selectListTable table th{
	padding: 6px 4px;
}
#selectList #selectListTable table td{
	min-height: 12px;
}
#selectList #selectListTable table th.remove{
	width: 64px;
}
#selectList #selectListTable table th.index,
#selectList #selectListTable table td.index{
	width: 25px;
}
#selectList #selectListTable table th.name,
#selectList #selectListTable table td.name{
	width: 260px;
}
#selectList #selectListTable table th.type,
#selectList #selectListTable table td.type{
	width: 110px;
}
#selectList #selectListTable table th.code,
#selectList #selectListTable table td.code{
	width: 70px;
}
#selectList #selectListTable table th.quantity,
#selectList #selectListTable table td.quantity{
	width: 30px;
}
#selectList #selectListTable table th.price,
#selectList #selectListTable table td.price{
	width: 65px;
}
#selectList #selectListTable table th.subtotal,
#selectList #selectListTable table td.subtotal{
	width: 65px;
}
#selectList #selectListTable table th.note,
#selectList #selectListTable table td.note{
	width: 212px;
}
#selectList #selectListTable table td.remove{
	width: 70px;
	padding: 0;
}
#selectList #selectListButtons{
	position: absolute;
	top: 584px;
	width: 1005px;
	height: 30px;
}

/* ボタン */
a.button {
	display: block;
	background: linear-gradient(0deg, #D0D0D0, #FDFDFD) no-repeat;
	border: 1px solid #999999;
	border-radius: 0.3em;
	width: auto;
	font-size: 12px;
	color: #000;
	line-height: 18px;
	text-decoration: none;
	text-align: center;
	padding: 1px 5px;
	float: left;
	margin-left: 20px;
	cursor: pointer;
}

.pc a.button:hover {
   background: linear-gradient(0deg, #FBDC9E, #FDFCE0);
   border: 1px solid #F2450D;
}
a.button:active {
   background: linear-gradient(180deg, #E2F3FE, #9ED9FE);
   border: 1px solid #009DFF;
}
a.button.disabled {
   background: linear-gradient(180deg, #FCFCFC, #D0D0D0);
   border: 1px solid #bbb;
   color: #999;
   cursor: default;
}
a.button#btn_catalog{
	width: 120px;
}
a.button#btn_catalog span{
	display: block;
	background: url(../images/icon_catalog.png) no-repeat;
	padding-left: 20px;
}
a.button#btn_help{
	width: 70px;
}
a.button#btn_help span{
	display: block;
	background: url(../images/icon_help.png) no-repeat;
	padding-left: 10px;
}
a.button#btn_exit{
	width: 60px;
}
a.button#btn_exit span{
	display: block;
	background: url(../images/icon_exit.png) no-repeat;
	padding-left: 10px;
}
a.button#btn_clear{
	width: 90px;
}
a.button#btn_clear span{
	display: block;
	background: url(../images/icon_clear.png) no-repeat;
	padding-left: 20px;
}
a.button#btn_list_add{
	width: 120px;
	margin-left: 10px;
}
a.button#btn_list_add span{
	display: block;
	background: url(../images/icon_list_add.png) no-repeat;
	padding-left: 20px;
}
a.button#btn_list_show{
	width: 110px;
	margin-left: 0px;
}
a.button#btn_list_show span{
	display: block;
	background: url(../images/icon_list_show.png) no-repeat;
	padding-left: 20px;
}
a.button#btn_removeAll{
	width: 90px;
	margin-left: 10px;
}
a.button#btn_removeAll span{
	display: block;
	background: url(../images/icon_remove.png) no-repeat;
	padding-left: 20px;
}
a.button#btn_copy{
	position: absolute;
	left: 707px;
	width: 170px;
	margin-left: 0;
}
a.button#btn_copy span{
	display: block;
	background: url(../images/icon_copy.png) no-repeat;
	padding-left: 20px;
}
a.button#btn_close{
	position: absolute;
	left: 897px;
	width: 80px;
	margin-left: 0;
}
a.button#btn_close span{
	display: block;
	background: url(../images/icon_exit.png) no-repeat;
	padding-left: 20px;
}
a.button.btn_detail{
	width: 60px;
	margin: 0;
	float: none;
	line-height: 16px;
	padding: 1px 5px;
}
a.button.btn_detail span{
	display: block;
	background: url(../images/icon_detail.png) no-repeat 5px 0;
	padding-left: 15px;
}
a.button.btn_remove{
	width: 60px;
	margin: 0;
	float: none;
	line-height: 16px;
	padding: 1px 5px;
}
a.button.btn_remove span{
	display: block;
	background: url(../images/icon_remove.png) no-repeat 5px 0;
	padding-left: 15px;
}