/*全体　共通項目*/
body { overflow:hidden; font-family: Helvetica,Arial,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,メイリオ,sans-serif; margin:0px; padding:0px; }

.clearfix:after { content: ""; clear: both; display: block; }
.nightMode{  }
.persent15{ height:15%;}
.persent85{ height:85%; overflow:scroll; overflow-x:hidden; }
.bgblack{
  width: 100%;
height: 100%;
background:#060E36;
z-index: -1;
position: absolute;
opacity: 0.7;
}
/*装飾*/
.drop_shadow{ box-shadow:rgba(87, 87, 87, 0.62) 0px 0px 2px 1px;
-webkit-box-shadow:rgba(87, 87, 87, 0.62) 0px 0px 2px 1px;
-moz-box-shadow:rgba(87, 87, 87, 0.62) 0px 0px 2px 1px; }
.inner_shadow{
box-shadow:rgba(0, 0, 0, 0.51) 0px 0px 2px 3px inset;
-webkit-box-shadow:rgba(0, 0, 0, 0.51) 0px 0px 2px 3px inset;
-moz-box-shadow:rgba(0, 0, 0, 0.51) 0px 0px 2px 3px inset;
}

/*ツールバー部分*/
.toolbar_wrapper { cursor:all-scroll;　}
.toolbar_wrapper .title { display:block; padding:0.1rem; border-bottom:1px solid #333; font-size:7px;  }
.toolbar_wrapper .title .curled-box { display:inline-block; border-radius: 50%; height: 5px; width: 5px; background:#07ebcd; margin:0px 0px 1px 2px;  }
.toolbar_wrapper .title .curled-box.line{ background:#c018f0; }

.toolbar_wrapper{ width:2rem;
box-shadow: 0 0 0 1px #5e5e5e, 0 0 0 2px #222; background:#424242;
 position:fixed; top:2rem; left:2rem; font-size:8px; color:white; }

 .toolbar_wrapper label{ cursor:pointer; position:relative; width:2rem; height:2rem; display:block; border-top:1px solid #5e5e5e; border-bottom:1px solid #333; z-index:1; }

.toolbar_wrapper label input{ opacity:0; z-index:3; }
.toolbar_wrapper label img{width:1.5rem; position:absolute; top:0.3rem; left:0.2rem; z-index:1;}
.toolbar_wrapper label span{width:2rem; height:2rem; display:block; z-index:3; position:absolute; }
.toolbar_wrapper label img.shadow{ position:absolute;  top:0.25rem; left:0.2rem; width:1.5rem; z-index:1; }
.t_active{
-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.25);
box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.25);
width:1.8rem; height:1.8rem; background:#7b7b7b;
position:absolute; bottom:2.25rem; left:0.1rem;
transition-duration:0.2s;
}


/*box-shadow: 0 0 0 1px #222, 0 0 0 2px #545454; background:#424242;*/

/*メニュー包括部分*/
.menu{ background:#252525;
color:#d1d1d1;
z-index: 9999;
position:fixed;
right:-60%;
height:100%;
display:block;
width:60%;
transition-duration:0.5s;
}
.menu li{ overflow:hidden; }


/*メニューのメニューボタン包括*/
.menu menu{ background:#252525; list-style:none; position:absolute; left:-15rem; margin:0px; padding:0px; display:inline-block; width:14rem; height:100%; z-index: 9999; /*overflow: hidden;*/ }


/*商品検索　包括部分*/
.store{vertical-align:top; height:100%; }

.search_container{ height:100%; vertical-align:top; display:inline-block; background:#424242; overflow:hidden; vertical-align:top; width:50%; }

/*商品詳細部分*/
.item_shosai,.searcher{ display:inline-block; vertical-align:top; width: 100%;}
.item_shosai{ width:49%; font-size:0.8rem; height:100%;}
.item_shosai .inner{ padding:1rem 2rem; }
.searcher .inner{padding:0.2rem 1rem;}
.searcher .inner label{ width:24%; display:inline-block;}
.item_shosai .inner h1,.item_shosai .inner h5{ margin:0.2rem 0rem; }
.item_shosai .inner .shodo{ width:25%; display:block; }
.item_shosai .inner .itemimg{ width:100%; display:block; }
.kihon_table{ border:none; padding:0px; border-collapse: collapse; width:100%; }
.kihon_table tr,.kihon_table td{ padding:0px; margin:0px; border:none; border-collapse: collapse; }
.kihon_table td{ border:1px solid white; padding:0rem 0.2rem; border-collapse: collapse; }
.nigyo{ height:2.5rem; }
.haiban{ background:#982715; }
.kanryo{ background:#185762; }

/*メニューボタン回り*/
.menu menu li{ border-top:1px solid #6a6a6a; border-bottom:1px solid #0e0e0e; padding:0.5rem; list-style: outside none none;}
.menu menu li h1{ margin:0px auto; width:100%; background : url(../lpp/logo.png) no-repeat 50% 50%; background-size:contain; text-indent:-99999px; display:block; }
.menu menu li svg { margin-right:0.3rem; position:relative; top:0.2rem; }
.menu menu li svg path { fill:#d1d1d1; }
.menu menu li:first-child{ border-top:none; }

/*メニューボタンアコーディオン部分*/
.acordion{ background:#424242; font-size:0.8rem; }
.acordion ul{padding:0px; }
.item_stcks{ background:#424242; margin:-0.5rem; margin-top:0.5rem; padding:0.5rem; }
.stocker{ list-style:none; margin:0px; padding:0px; margin:-0.5rem; width:100%; left:1rem; position:relative; }
.stocker li{ opacity:0.7; padding:0.5rem; font-size:0.8rem; position:relative; }
.stocker li:hover{ opacity:1; }
.stocker li:hover > .eracer{ opacity:1; }
.stocker li div{ padding:0rem; padding-left:1rem; }
.stocker div> img{ width:30%; float:left; margin-right:0.5rem; }
.stocker li .eracer img{ width:80%; margin:0px; }
.eracer{ background:#a64848; border:none; cursor:pointer; width:7%; position:absolute; right:1rem;  display:block; height:100%; top:0px; padding:0px; margin:0px; transition-duration:0.5s; opacity:0;}
.eracer:hover{ opacity:0.8; }
.dummy{ display:none; }
.no-item{ text-align:center; }
.no-item img{ display:block; width:7%; margin:auto auto; margin-top:5px; padding:2px; border:1px solid white; }
.imageupload{ font-size:0.8rem; background:#424242;}
.output ul li{ cursor:pointer; }
.output .save_plan button{ width: 100%; padding: 0.5rem; border: medium none; cursor: pointer; }
.output .save_plan button:hover{ background:#747564; }
.output ul li:active{box-shadow:rgba(0, 0, 0, 0.51) 0px 0px 2px 3px inset;
-webkit-box-shadow:rgba(0, 0, 0, 0.51) 0px 0px 2px 3px inset;
-moz-box-shadow:rgba(0, 0, 0, 0.51) 0px 0px 2px 3px inset; }
.syakudo .button{ padding:0.5rem 0rem; cursor:pointer;}
.syakudo .scale{ text-align:center; position:absolute; left:-30%; bottom:3rem; color:black; cursor:move; }
.syakudo .scale table,.syakudo .scale table tr,.syakudo .scale table tr td{ padding:0px; margin:0px;  }
.syakudo .scale table tr td{ padding:2px 0px; }

/*セッテイング部分*/
.setting_list a{ font-style:normal; text-decoration:none; color:inherit; }
.setting_list .settingActive{ background:#999; }

/*検索結果一覧*/
.searching_list { padding:0px; margin:0px; }
.searching_list li{display:table; width:95%; padding:2.5% 2%;  font-size:0.8rem; vertical-align:top; cursor:pointer; border-top:1px solid #6a6a6a; border-bottom:1px solid #0e0e0e; position:relative; }
.searching_list li .thums{ display:table-cell; width:20%; padding-right:3%; }
.searching_list li .thums img{ display:block; width:100%; }
.searching_list li .item_info{ display:table-cell; width:77%;  vertical-align:top; }
.searching_list li .loader{width:20%; text-align:center; display:block; margin:0 auto;}
.searching_list li .adder{ position:absolute; top:40%; right:10%; height:20%; }
.searching_list li .adder:hover{ background:#2AB3FF; }
.menuName{ cursor:pointer; }
.menuName img{ vertical-align:text-bottom; top: -0.2rem; position: relative; margin-right: 0.2rem; }
.searcher_opener{
  position: absolute;
height: 100%;
top: 0%;
right: -1rem;
width: 8%;
float: right;
padding: 0px;
z-index: 99;
background:#555;
border:1px solid black;
}
.searcher_closer{
  position: absolute;
height: 100%;
top: 0%;
left: -1rem;
width: 8%;
padding: 0px;
z-index: 99;
background:#eee;
border:1px solid black;
}

.searcher_opener:active,.searcher_closer:active{box-shadow:rgba(0, 0, 0, 0.51) 0px 0px 2px 3px inset;
-webkit-box-shadow:rgba(0, 0, 0, 0.51) 0px 0px 2px 3px inset;
-moz-box-shadow:rgba(0, 0, 0, 0.51) 0px 0px 2px 3px inset;}
.searcher_opener:hover{background:#777;}
.searcher_opener img,.searcher_closer img{ width:100%;margin:0px; padding:0px; }





/*商品検索　入力部分*/
.keyword{ border:none; background:#252525; width:50%; height:2rem; color:white; font-size:1.2rem; font-weight:normal; font-family: Helvetica,Arial,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,メイリオ,sans-serif; text-indent: 0.5rem; margin:2rem 0rem 0rem 1rem;}


/*商品検索　検索ボタン*/
.search:active{ background:#5DE97C; box-shadow:rgba(87, 87, 87, 0.65) 0px 0px 3px 0px inset;
-webkit-box-shadow:rgba(87, 87, 87, 0.65) 0px 0px 3px 0px inset;
-moz-box-shadow:rgba(87, 87, 87, 0.65) 0px 0px 3px 0px inset; }
.search{
width:30%;
    border: medium none;
    background: white;
    font-size: 1rem;
    font-family: Helvetica,Arial,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,メイリオ,sans-serif;
    color: #505050;
    margin: 0px;
    height: 2rem;
line-height: 2rem;
transition-duration:0.2s;
opacity:0.6;
}
.search:hover{ opacity:1; }
.search img{ margin-left: 0.8rem; position: relative; top: 0.2rem; }
.searching_list{ width:100%; display:block; }
.item_info span{ display:block; }
.item_info .hinmei ,.item_info .jodai,.item_info .hakko_syoku{ display:none;  }
.acordion{ margin:0.5rem -0.5rem -0.5rem; padding:0.5rem; }
.itemimg{ width:18rem; }




/*アートボード*/
/*************************************************************************/
.haikei{ width:100%; height:100%; position:absolute; background:none 50% 50% no-repeat; transition-duration:0.3s; z-index:-2; }
.haikei .bgpic{ position:absolute; top:0px; left:0px; transition-duration:0.5s; }
.artbord{ }
.artbord ul{ list-style:none; padding:0px; margin:0px; position: absolute;}
.artbord.move .itemImg:hover{}
.artbord.line .itemImg:hover{ border:1px solid red; }
.artbord .itemImg{width: 58px; position: absolute; opacity: 1; right: auto; height: 58px; bottom: auto;}


/*アートボード上の商品関係*/
.artbord .line_parent img{ border:1px solid pink; }
.artbord .line_active img{ border: 1px solid blue; }
/*配線図画像保存のための品番表示*/
.previewmode{ position:absolute; display:block; top:-1.5rem; font-size:0.8rem;  }
.previewmode_over{ width: 100%; height: 100%; position: absolute; z-index: 999999; }

/*アートボード　ライン*/

.line_container {
    margin: 0px !important;
    padding: 0px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: -1;
    overflow: visible;
}

.line {
    /*transition-duration: 1s;*/
    overflow: visible;
}
svg line {
  fill: none;
}
.line1 {
  stroke: #f7c;
}
.line2 {
  stroke: #09d;
}
.line3 {
  stroke: #0c5;
}

p {
  margin: 20px 0 0 5px;
}

/*draggable()*/
.ui-draggable{ position:relative; }

.artbord .itemImg{ border:1px solid gray; }
.artbord .itemImg.active{ border:1px solid red; }
/*input　レンジ*/

    input[type='range'] {
        -webkit-appearance: none;
        appearance: none;
        -moz-appearance: none;
        border-radius: 5px;
        box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
        background-color: none;
        height: 8px;
        vertical-align: middle;
        width: 11rem;
        z-index:9999;
        display: block;
    }
    input[type=range]::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 5px;
        box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
        background-color: #FFF;
        height: 10px;
        vertical-align:middle;
        border:solid 1px rgba(0,0,0,0.25);
    }
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        border-radius: 10px;
        background-color: #FFF;
        box-shadow:inset 0px 1px 0px rgba(000,000,000,0.5);
        border: 1px solid #999;
        height: 20px;
        width: 7px;
        vertical-align:middle;
        margin-top: -6px;
    }
    input[type='range']::-moz-range-track {
        -moz-appearance: none;
        border-radius: 5px;
        box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
        background-color: #FFF;
        height: 8px;
        border:solid 1px rgba(0,0,0,0.25);
        vertical-align:middle;
        margin:0;
        padding:0;
    }
    input[type='range']::-moz-range-thumb {
        -moz-appearance: none;
        border-radius: 10px;
        background-color: #FFF;
        box-shadow:inset 0px 1px 0px rgba(000,000,000,0.5);
        border: 1px solid #999;
        height: 20px;
        width: 5px;
    }
.range-slider { z-index:9999; }

/*checkbox*/
@font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('fonts/modernpics-webfont.eot');
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/modernpics-webfont.woff') format('woff'),
         url('fonts/modernpics-webfont.ttf') format('truetype'),
         url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

label:not(.tool) {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;

	font-size: 0.8rem;
}

input[type=checkbox] {
	display: none;
}
label:not(.tool):before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background-color: #aaa;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

.checkbox label {
	margin-bottom: 10px;
}
.checkbox label:before {
    border-radius: 3px;
}


input[type=checkbox]:checked + label:before {
	content: "\2713";
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	font-size: 15px;
	color: #f3f3f3;
	text-align: center;
    line-height: 15px;
}

.distanceform{ margin-left:-1.5rem; margin-top:-1rem; line-height:1.5rem; width:3rem; border:1px solid gray; padding:0rem 0.3rem; height:100%; position:absolute;}
.marker{ position:absolute; height:2rem; }
.itiji{ position:absolute; }

.nokori:before{content:"最長"; font-size:0.7rem; }
.nokori:after{content:"m";  font-size:0.7rem;}
.itemerace{  position:absolute; border:1px solid gray; width:3rem; line-height:1.5rem;  left:-71px; background:#D4D0C8; }
.ug{  position:absolute; border:1px solid gray; line-height:1.5rem; font-size:0.8rem; background:#D4D0C8;}
.ug.active{/* border-radius */
border-radius:;
-webkit-border-radius:;
-moz-border-radius:;

/* box-shadow */
box-shadow:rgba(61, 61, 61, 0.65) 0px 0px 3px 1px inset;
-webkit-box-shadow:rgba(61, 61, 61, 0.65) 0px 0px 3px 1px inset;
-moz-box-shadow:rgba(61, 61, 61, 0.65) 0px 0px 3px 1px inset;}
.nokori{ position:absolute; border:1px solid gray; width:4rem; line-height: 2rem; text-align: center; background:white;  height:100%;}
.itemerace,.nokori,.ug{ margin-left:-1.5rem; margin-top:-1rem; }

.zindexer{ z-index:9999; }

.statusbar{ position:fixed; bottom:0px; background:#424242; height:2rem; width:100%; z-index:-1;}
.statusbar ul{ height:100%; list-style:none; margin:0px; padding:0px; display:table; font-size:0.8rem; }
.statusbar ul li:first-child{ background:#232323; }
.statusbar ul li{ display:inline; padding:0rem 1.5rem; color:white; display:table-cell; vertical-align:middle; border-left:1px solid #6a6a6a; border-right:1px solid #181818;}
.statusbar ul button{ border:none; margin-left:1rem; }
button.tcolor.iv{ background:tan; }
button.tcolor.gb{ background:ivory; }

/*ゴミ箱*/
.trashbox{  width:1rem; position:absolute; left:0px; background:#EE858C; padding:0.2rem; height:100%; z-index:-1; display:table; opacity:0.6;  vertical-align:middle; transition-duration:0.5s;}
.trash_hover{}
.trashbox > div{ display:table-cell; text-align:center; vertical-align:middle; height:2rem; }
.trashbox img{ display:table-cell; vertical-align:middle; text-align:center;}
.ui-state-hover{ width:4rem; opacity:1; }
/*コンソールログ　自作関数用*/
.csl{ position:absolute; bottom:2rem; background:white; opacity:0.7; color:gray; border:1px solid gray; padding:1rem; font-size:0.7rem; }

/*アラート*/
.messager{ position:absolute; width:60%; top:2%; right:20%; z-index: 999;}

.alerter{ padding:1rem; color:white; background:#E84114; opacity:0.8; font-size:1.5rem; font-style:bold; text-align:center; transition-duration:0.3s; position:relative; }
.alerter:hover{ opacity:1; }

.confirm{ background:pink; position:absolute; top:0.5rem; right:1rem; opacity:0.8; padding:0.5rem; display:inline-block; border:none; transition-duration:0.3s;}

.confirm:hover{ opacity:1; }

.alerterT{padding:1rem; margin-top:1rem; color:#30876E; background:#C1E3DA; opacity:0.8; font-size:1rem; font-style:bold; text-align:center; transition-duration:0.3s; position:relative; }

.alerterT span{ color:#30876E; }
.alerterT:hover{opacity:1;}


/*メッセージ*/
.message {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 115px;
	height: 40px;
	color: #F6F6F6;
	line-height: 40px;
	text-align: center;
	background: #19283C;
	z-index: 0;
}
.message:after {
	content: "";
	position: absolute;
	bottom: -10px; left: 50%;
	margin-left: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #19283C transparent transparent transparent;
}

.hide{ display:none; }

.over_layer{ width:100%; height:100%; background:white; opacity:0.8; z-index:99999; position:fixed;}
.code_reporter{ width:50%; margin:15% 25%; position:fixed; background:#222; color:white; z-index:100000; }
.code_reporter .inner{ padding:10%;  }
.code_reporter .inner  .plancode{ display:block; width:100%; margin:0.5rem 0rem; text-align:center; padding:0.5rem 0rem; background:white; color:#222; font-size:1.5rem; font-weight:bold; }
.reporter_closer{padding:0.5rem; cursor:pointer; background:#ccc; position:absolute; right:1rem; top:1rem; transition-duration:0.3s;}
.reporter_closer:hover{background:#aaa; }



/*見積書制作*/
.estwrap{ position:fixed; top:15%; left:25%; width:50%; height:70%; overflow:scroll; background:#333; opacity:0.8; z-index:1000; }
.estable{ border-collapse:collapse; color:white; font-size:0.8rem; width:100%; }
.estable tr,.estable td{ border:1px solid #AAA; }
.estable td{ padding:0.3rem;  }
.estable .hinmei{ width:10rem;  }
.estable .hinban a{ color:inherit;  }
.estable .jodai:before{ content:"￥";  }
.estable .kosu,.estable .code,.estable .hinban{ text-align:center; }
.estable .chosei{ text-align:center; }
.estable td img{ width:100%; }
.chosei .btn{ width:2rem; }
/*.chosei .minus{ margin-right:0.5rem; }*/
.estable .btn {
    border: none;
    background: #BBB;
    color: black;
    padding: 0.2rem 0.4rem;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    transition-duration:0.2s;
}

.estwrapback{ position:absolute; background:white; width:100%; height:100%; opacity:0.4; z-index:999; }
.btnset{ width:90%; margin:1rem auto; }
.btnset .btn{ width: 40%; margin: 1% 5% 1% 5%; padding:0.5rem; border:none; background:#111; color:white; transition-duration:0.2s;}
.btnset .btn:hover,.btn:hover{ background:#000; box-shadow:rgba(0, 0, 0, 0.65) 0px 0px 6px 1px; -webkit-box-shadow:rgba(0, 0, 0, 0.65) 0px 0px 6px 1px; -moz-box-shadow:rgba(0, 0, 0, 0.65) 0px 0px 6px 1px; color:white;}
.btnset .btn:active,.btn:active{ box-shadow:rgba(0, 0, 0, 0.65) 0px 0px 6px 1px inset; -webkit-box-shadow:rgba(0, 0, 0, 0.65) 0px 0px 6px 1px inset; -moz-box-shadow:rgba(0, 0, 0, 0.65) 0px 0px 6px 1px inset; }

/* 点滅 */
.blinking{
	-webkit-animation:blink 0.5s ease-in-out infinite alternate;
    -moz-animation:blink 0.5s ease-in-out infinite alternate;
    animation:blink 0.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

.kosai{ box-shadow: 0px 0px 40px 15px #fff; }
.kosai_den{ box-shadow: 0px 0px 40px 15px #edd07c; }
.kosai_blue{ box-shadow: 0px 0px 40px 15px blue; }
.kosai_orange{ box-shadow: 0px 0px 40px 15px orange; }
.kosai_honoakari{ box-shadow: 0px 0px 40px 15px #edd07c; }
.kosai_emelard{ box-shadow: 0px 0px 40px 15px #00a968; }
.kosai_yellow{ box-shadow: 0px 0px 40px 15px yellow; }
.kosai_red{ box-shadow: 0px 0px 40px 15px red; }
.kosai_green{ box-shadow: 0px 0px 40px 15px green; }

.tovideo{ position:fixed; left:10rem;top:0rem; padding:0.5rem 1rem;; background:#252525; color:white; }
.tomanual{ position:fixed; left:22rem;top:0rem; padding:0.5rem 1rem;; background:#252525; color:white; }
.tovideo a,.tomanual a{text-decoration:none; color:white;}


.exel_loader{
    height: 100%;
    width: 100%;
    position: absolute;
    background: black none repeat scroll 0% 0%;
    z-index: 999;
}

.exel_loader img{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
}


#cnvs{ display:none; }

.llength{ padding:0.5rem; top:-1rem; left:-1rem; border:1px solid gray; position:absolute; background:white; }