@charset "utf-8";

/* ============================================================ */
/* !---------------【 sim 】*/
/* ============================================================ */

#sim {
	width: 100%;
	height: 100%;
	overflow: hidden;
	-moz-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	}
#sim .membrane { /* 2015.06.25 */
	width: 100%;
	}
#stage {
	position: relative;
	width: 100%;
	height: 520px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	overflow: visible;
	z-index:20;
	}

/* ============================================================ */
/* !---------------【 palette 】*/
/* ============================================================ */

#palette {
	position: relative;
	height: 140px;
	overflow: hidden;
	white-space: normal;
	/*z-index:40;*/
	}

#palette nav {
	display: block;
	position: absolute;
	width: 120px;
	vertical-align: top;
	z-index: 40;
	}

#palette nav button {
	display: block;
	position: relative;
	box-sizing: border-box;
	left: 0px;
	width: 100%;
	height: 47px;
	margin: 0;
	color: #999;
	background-color: transparent;
	border-top: 2px solid #e6e6e6;
	border-right: 2px solid #e6e6e6;
	}
#palette nav button:last-child { height: 46px; border-bottom-left-radius: 0px; }

#palette.gA button.gA,
#palette.gB button.gB,
#palette.gC button.gC {
	color: #333;
	font-weight: bold;
	background-color: #e6e6e6;
	}

#palette.gA button.gA:after,
#palette.gB button.gB:after,
#palette.gC button.gC:after {
	display: block;
	position: absolute;
	top: 12px;
	right: -3px;
	content: " ";
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid white;
	}
#palette.dD button.gA span { display: none; }
#palette.dT button.gA { height: 70px; }
#palette.dT button.gB { display: none; }
#palette.dT button.gC { height: 70px; }
#palette.dT button.gA:after,
#palette.dT button.gC:after { top: 24px; }

/* 2023.11 提案 */
#palette.dD button.gA { height: 70px; }
#palette.dD button.gB { height: 70px; }
#palette.dD button.gC { display: none; }
#palette.dD button.gA:after,
#palette.dD button.gB:after { top: 24px; }

#palette.dT button.gA { height: 140px; }
#palette.dT button.gB { display: none; }
#palette.dT button.gC { display: none; }
#palette.dT button.gA:after { top: 57px; }

#palette ul {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 10px 0px 0px 120px;
	white-space: nowrap;
	vertical-align: top;
	text-align: center;
	border-top: 2px solid #e6e6e6;
	}

#palette li {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: auto;
	height: 100%;
	white-space: nowrap;
	vertical-align: top;
	text-align: center;
	}
#palette li.cushion {
	background-color: red;
	}
#palette li.separator {
	width: 0px;
	height: 118px;
	margin-left: 10px;
	padding-left: 12px;
	border-left: 1px dashed #ccc;
	}
	
#palette.gA .box,
#palette.gA .etc,
#palette.gA .screen,
#palette.gA .front,
#palette.gA .rear,
#palette.gA .side,
#palette.gA .cB,
#palette.gA .cC { display: none; }

#palette.gB .board,
#palette.gB .other,
#palette.gB .front,
#palette.gB .rear,
#palette.gB .side,
#palette.gB .slide,
#palette.gB .cA,
#palette.gB .cC { display: none; }

#palette.gB .etc + .cB { display: none; } /* 2023.01.06 */

#palette.gC .screen,
#palette.gC .board,
#palette.gC .other,
#palette.gC .box,
#palette.gC .etc,
#palette.gC .slide,
#palette.gC .cA,
#palette.gC .cB { display: none; }

#palette.mS .cL, #palette.mS .cG  { display: none; }
#palette.mL .cS, #palette.mL .cG  { display: none; }
#palette.mG .cS, #palette.mG .cL  { display: none; }

#palette.dT .cD { display: none; }
/* #palette.dT.gA .screen, 2023.01.07 */
#palette.dT.gA .etc { display: inline-block; }
#palette.dT.gA .rear { display: inline-block; }
#palette.dT.gA .separator.cB { display: inline-block; }
#palette.dT.gA .etc + .separator.cB { display: none; } /* 2023.01.07 */
#palette.dT.gA .separator.cA { display: inline-block; }

#palette.mG.dD .basket { display: none; } /* 2021.06 追記 */

/* 2023.11 提案 */
#palette.dD.gB li.cD,
#palette.dD.gB .rear,
#palette.dD.gB .side { display: inline-block; }
#palette.dD.gB .etc + .cB { display: inline-block; }

#palette.dT.gA .etc + .separator.cB { display: inline-block; }

#palette li.label { padding-left: 24px; }
#palette li.label.side { padding-left: 24px; }

#palette .board		{  }
#palette .other		{  }
#palette .box		{  }
#palette .etc		{  }
#palette .screen	{  }
#palette .front		{  }
#palette .rear		{  }
#palette .side		{  }
/* #palette li.side > div { padding-left: 20px; } */
#palette .slide		{  }

#palette li > div {
	display: inline-flex;
	position: relative;
	flex-direction: column;
	flex-wrap: wrap;
	flex-grow: 1;
	flex-shrink: 1;
	
	align-items: center;
	
	width: auto;
	height: 100%;
	padding: 0;
	}

#palette li.label:before {
	display: block;
	position: absolute;
	top: 0;
	left: 6px;
	height: 100px;
	width: 12px;
	content: "";
	background-color: transparent;
	background-image: url(img/btn.png);
	background-repeat: no-repeat;
	}

#palette li.board > div		{ width: 80px; margin-right: 4px; }
#palette.mS li.board > div	{ width: auto; padding: 0 2px; }
/* #palette li.box > div		{ width: 260px; } */
#palette li.box > div		{ width: 170px; }
#palette li.screen > div	{ width: 100px; }
#palette li.front > div		{ width: 130px; }
/* #palette.mG li.front > div	{ width: 120px; } */
#palette li.rear > div		{ width: 160px; }
/* #palette.mG li.rear > div	{ width: 210px; } */
#palette li.side > div		{ width: 125px; } /* width: 190px; width: 160px; */
#palette.mL li.side > div	{ width: 120px; } /* width: 150px; */
#palette.mG li.side > div	{ width: 150px; } /* width: 180px; */

#palette li.slide > div		{ width: 160px; }

#palette.mG.gC li.separator {
	margin-left: 7px;
	padding-left: 9px;
	}

#palette li.board:before	{ background-position: 0px 0px; }
#palette li.box:before		{ background-position: -12px 0px; }
#palette li.screen:before	{ background-position: -147px 0px; }
#palette li.front:before	{ background-position: -96px 0px; }
#palette li.rear:before		{ background-position: -108px 0px; }
#palette li.side:before		{ background-position: -134px 0px; width: 12px; }
/*#palette li.side:before		{ background-position: -135px 0px; width: 12px; height: 68px; }*/

#palette li button,
#palette li span {
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
	margin-bottom: 6px;
	background-color: transparent;
	background-image: url(img/btn.png);
	background-repeat: no-repeat;
	}

#palette li span {
	display: block;
	width: 12px;
	height: 34px;
	}

/*!--------- group【 A 】*/

#palette.mS li.board div { margin-top: -4px; }

#palette li.board button { width: 71px; height: 36px; }

.mS .bO { background-position: -668px -14px } .mS .bMO { background-position: -739px -14px } .mS .bCO { background-position: -810px -14px } /* オーク */
.mS .bW { background-position: -668px -64px } .mS .bMW { background-position: -739px -64px } .mS .bCW { background-position: -810px -64px } /* ウォールナット */
.mS .bS { background-position: -668px -114px} .mS .bMS { background-position: -739px -114px} .mS .bCS { background-position: -810px -114px} /* ステンレス */
.mS .bY { background-position: -739px -164px} /* ステンレスワイヤー */
.mS .bT { background-position: -668px -164px} /* タモ */
.mS .bL { background-position: -668px -214px} /* ライトグレー */
.mS .bD { background-position: -668px -264px} /* ダークグレー */
.mL .bL { background-position: -810px -260px} /* ライトグレー */
.mG .bG { background-position: -739px -210px } /* グレー スチール */
.mG .bU { background-position: -739px -260px } /* 木製 */
#palette.mL .bL,#palette.mG .bG,#palette.mG .bU { height: 40px; }

#palette li.other button {
	width: 71px; 
	height: 50px;
	margin-top: 5px;
	margin-bottom: 5px;
	}

.mS .bJU { background-position: -142px -100px }
.mG .bJU { background-position: -142px -150px } .mL .bJU { background-position: -142px -150px }
.bF { background-position: -355px -50px }

#palette li.etc button {
	margin: 3px 7px 6px 7px;
	width: 71px;
	height: 50px;
	}

/*!--------- group【 B 】*/

#groupB .other { width: 170px; } 

#palette.gB li.box button,
#palette.gB li.etc button {
	margin: 3px 7px 6px 7px;
	width: 71px;
	height: 50px;
	}

.bDO { background-position: -597px 0px }
.bFO { background-position: -597px -50px }
.bGO { background-position: -597px -100px }
.bSO { background-position: -597px -150px }

.bDW { background-position: -597px -200px }
.bFW { background-position: -597px -250px }
.bGW { background-position: -597px -300px }
.bSW { background-position: -597px -350px }

.bHO { background-position: -597px -100px }
.bHW { background-position: -597px -300px }

.bHO:after,
.bHW:after {
	display: block;
	position: absolute;
	content: "コード用穴付き";
	top: 18px;
	left: 4px;
	right: auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 3px 3px 1px 3px;
	color: white;
	font-size: 9px;
	font-weight: bold;
	line-height: 100%;
	white-space: nowrap;
	background-color: #666;
	background-image: none;
	border-radius: 3px;
	}

.bDT { background-position: -284px 0px }
.bFT { background-position: -284px -50px }
.bGT { background-position: -284px -100px }

.bBY { background-position: -213px 0px }
.bBC { background-position: -213px -100px }

.bWB { background-position: -213px -150px; }

/*!--------- group【 A,B 】*/

#palette.gA .screen button,
#palette.gB .screen button { width: 40px; height: 115px; }

.bV1,
.bVS { background-position: -347px -379px; }
.bV0 { background-position: -388px -379px; }
.VR1 { background-position: -597px -400px; }
.VR2 { background-position: -597px -440px; }

/*!--------- group【 C 】*/

#palette .front button { width: 55px; height: 50px; margin-top: 6px; }
#palette .front button:nth-child(odd) { margin-bottom: 6px; }

.bH1 { background-position: -668px -300px; }
.bH2 { background-position: -723px -300px; }
.bH3 { background-position: -778px -300px; }

#palette .rear button { margin-top: 6px; margin-bottom: 0px; }

.bR2 { background-position: -142px -200px; }
.bR4 { background-position: -197px -200px; }
.bR6 { background-position: -668px -350px; }
.bR8 { background-position: -810px -151px; }

.bR0 { background-position: -252px -200px; }
.bR3 { background-position: -142px -250px; }
.bR5 { background-position: -197px -250px; }
.bR7 { background-position: -668px -400px; }
.bR9 { background-position: -810px -201px; }

#palette .side button { margin-top: 6px; margin-bottom: 0px; }

.mS .bE0 { background-position: -392px -200px; }
.mG .bE0 { background-position: -262px -250px; }
.bE2 { background-position: -310px -200px; }
.bE4 { background-position: -351px -200px; }
.bE8 { background-position: -849px -350px; }
.bE1 { background-position: -392px -250px; }
#palette.mG button.bE1 { display:block; visibility: hidden; }
.bE3 { background-position: -310px -250px; }
.bE5 { background-position: -351px -250px; }
.bE9 { background-position: -849px -400px; }

#palette .side button.bE2 {
	/* 2021.09 soldout */
	pointer-events: none;
	height: 10px;
	margin-top: 46px;
	background-position: -310px -240px;
	}
#palette .side button.bE5 {
	/* 2023.10 soldout */
	/*
	pointer-events: none;
	background-image: none;
	*/
	}

span.occupy3 { background-position: -72px 0px; top:22px; }
span.occupy2 { background-position: -84px 0px; top:32px; } /*  margin-top: 21px; */

#palette .rear button.bR0 {
	margin-top: 66px;
	}
.bR0:after {
	display: block;
	position: absolute;
	top: -54px;
	width: 55px;
	height: 57px;
	pointer-events: none;
	content: "";
	background: transparent url(img/btn.png) no-repeat -450px -437px;
	}

.mS .bR0, .mL .bR0,
.mL .bE0, .mL .bE1 { display: none; }
/*
.mG .bR8, .mG .bR9,
.mG .bE8, .mG .bE9 
*/
.rear button { width: 55px; }
.side button { width: 35px; } /* 41 */
.bE0, .bE2, .bE4, .bE8, .bR0, .bR2, .bR4, .bR8 { height: 50px; }
.bE1, .bE3, .bE5, .bE9, .bR3, .bR5, .bR9 { height: 54px; }


#palette.gB .rear button { width: 55px; }
#palette.gB .side button { width: 35px; } /* 41 */

#palette.mG.dD.gC .cushion { display: none; }

#palette .slide button {
	margin: 0;
	}
#palette .slider-v, #palette .slider-h {
	text-align: right;
	background-color: transparent;
	background-image: url(img/btn.png);
	background-repeat: no-repeat;
	}
#palette .slider-v span, #palette .slider-h span {
	display: block;
	position: absolute;
	margin: 0;
	background-image: url(img/btn.png);
	background-repeat: no-repeat;
	}
#palette .slider-h {
	width: 86px;
	height: 50px;
	}
#palette.gA .slider-h button { top:0; right:0; width:52px; height:36px; background:none; }
#palette .slider-h span { top:0; width:26px; height:36px; }
.slider-h .pos0 span { left:0px; background-position:-464px -100px; }
.slider-h .pos1 span { left:26px; background-position:-490px -100px; }

#palette .slider-v {
	width: 60px;
	height: 113px;
	}
#palette.gA .slider-v button { top:0; right:0; width:36px; height:100px; background:none; }
#palette .slider-v span { left:0px; width:36px; height:25px; }
.slider-v .pos3 span { top:0; background-position:-490px -136px; }
.slider-v .pos2 span { top:25px; background-position:-490px -161px; }
.slider-v .pos1 span { top:50px; background-position:-490px -186px; }
.slider-v .pos0 span { top:75px; background-position:-490px -211px; }

#bCst { background-position: -430px 0; }
#bHok { margin-top:14px; background-position: -430px -50px; }
#bExt { margin-left:8px; background-position: -430px -136px; }

/* ============================================================ */
/* !---------------【 over write 】*/
/* ============================================================ */

.bH3 { margin-left: 0; }

#basic .price del {
	display:block;
	position:absolute;
	top: 16px;
	width: 100%;
	font-size: 10px;
	white-space: nowrap;
	transform: scale(0.8);
	left: -5px;
	}

/* ============================================================ */
/* !---------------【 drag balloon 】*/
/* ============================================================ */

#dragballoon .bV1:after {
	display: block;
	position: absolute;
	content: '';
	width: 40px;
	height: 101px;
	top: 0;
	left: 0;
	background: transparent url(img/btn.png) no-repeat -388px -379px;
	}

.mS .bX { background-position: -526px 0px; } /* クロスバー */
.mG .bX { background-position: -526px -50px; }

/*.bW { background-position: 0px -150px; }  ??? */

.bCT { background-position: -526px -200px; }
.bHK { background-position: -526px -250px; }
.mS .bEX { background-position: -526px -150px; }
.mG .bEX { background-position: -526px -100px; }


.mS .bJUS { background-position: 0px -150px; }
.mS .bJUT { background-position: -71px -150px; }
.mS .bJUW { background-position: 0px -250px; }
.mS .bJUO { background-position: -71px -250px; }

.mS .bJUL { background-position: 0px -100px; }
.mS .bJUD { background-position: -71px -100px; }

.mG .bJUG { background-position: 0px -200px; }
.mG .bJUU { background-position: -71px -200px; }

.mL .bJUL { background-position: 0px -100px; }

/*
.mS .bU, .mS .bA, .mS .bU { display: none; }
.mG .bO, .mG .bW, .mG .bT { display: none; }

.mS .bBC { visibility: hidden; }
.mS .bR { visibility: hidden; }
.mG .bY { display:none; }

.dD .bA { visibility: hidden; }

.dT .bBY, .dT .bBP, .dT .bBC, .dT .bDT, .dT .bFT, .dT .bGT, .dT .bEP { display:none; visibility: hidden; }
*/


/*! top view --------------------------------------------------- */

#wrap {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	cursor: move;
	z-index:300;
	}

#topview {
	position: absolute;
	top: 70px;
	/*left: 90px;*/
	left: -300px;
	min-width: 120px;
	min-height: 100px;
	padding: 24px 8px 8px 8px;
	text-align: center;
	font-size: 1px;
	line-height: 100%;
	border-radius: 4px;
	border: 1px solid #ccc;
	background-color: white;
	z-index:210;
	}
#topview p {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 16px;
	cursor: move;
	background-color: #ccc;
	}
#topview button {
	position: absolute;
	top: 2px;
	right: 2px;
	height: 12px;
	width: 12px;
	background: transparent url(img/btn-cmd.png) no-repeat -342px -80px;
	border:none;
	}
#topview .tmarker {
	position: absolute;
	/*pointer-events: none;*/
	border: 1px solid #aaa;
	z-index: 10;
	}
#topover {
	position: absolute;
	/*pointer-events: none;*/
	background-color: black;
	opacity: 0.1;
	z-index: 11;
	}
#viewdir {
	position: absolute;
	width: 24px;
	height: 24px;
	background-color: transparent;
	background-image: url(img/btn-cmd.png);
	background-repeat: no-repeat;
	background-position: -354px -68px;
	z-index: 12;
	}
#viewdir.be0, #viewdir.be4 { background-position: -330px -92px; }
#viewdir.be2, #viewdir.be6 { background-position: -354px -92px; }

#topview .chain {
	display: inline-block;
	position: relative;
	padding: 4px 4px 7px;
	margin: 0 auto;
	border: 1px solid #ddd; /* #aaa transparent */
	}
#topview > .chain { /*min-width:92px;*/ white-space: nowrap; }

#topview .inf {
	position: relative;
	box-sizing: border-box;
	vertical-align: top;
	border: 1px solid #ccc;
	background-color: #e8e8e8;
	}
#topview .inf:before,
#topview .inf:after {
	position: absolute;
	content: '';
	background-color: transparent;
	background-image: url(img/btn-cmd.png);
	background-repeat: no-repeat;
	}
#topview > .chain > .inf:before, #topview > .chain > .inf:after { background-position: -330px -68px; }
#topview .inf.be4:before, #topview .inf.be4:after,
#topview .inf.be6:before, #topview .inf.be6:after,
#topview .chain .chain .inf:before,
#topview .chain .chain .inf:after { background-position: -333px -68px; }

#topview > .chain > .inf {
	display: inline-block;
	height: 20px;
	/*margin: 0 2px 0 3px;*/
	margin: 5px 2px 2px 3px;
	border-top-width: 3px;
	}
#topview > .chain > .wL { width: 55px; }
#topview > .chain > .wW { width: 41px; }
#topview > .chain > .wR { width: 27px; }
#topview > .chain > .wS { width: 20px; }
#topview > .chain > .be0, #topview > .chain > .be2 { margin-bottom: 23px; }


#topview > .chain > .inf:before,
#topview > .chain > .inf:after {
	top: -3px;
	width: 3px;
	height: 20px;
	}
#topview > .chain > .inf:before { left: -5px; }
#topview > .chain > .inf:after { right: -5px; }

#topview > .chain > .inf.be4,
#topview > .chain > .inf.be6 {
	width: 20px;
	height: 41px;
	margin: 5px 2px 2px 3px;
	border-top-width: 1px;
	}
#topview > .chain > .inf.be6 { margin-right: 23px; border-left-width: 3px; }
#topview > .chain > .inf.be4 { margin-left: 24px; border-right-width: 3px; }

#topview .chain .chain .inf {
	display: block;
	width: 20px;
	margin: 5px 2px 2px 3px;
	}

#topview .inf.be6:before, #topview .inf.be6:after,
#topview .inf.be4:before, #topview .inf.be4:after,
#topview .chain .chain .inf:before,
#topview .chain .chain .inf:after {
	width: 20px;
	height: 3px;
	}
#topview .inf.be6:before { top: -5px; left: -3px; }
#topview .inf.be6:after  { top: 41px; right: -1px; }
#topview .inf.be4:before { top: -5px; left: -1px; }
#topview .inf.be4:after  { top: 41px; right: -3px; }
#topview .chain .chain .inf:before { top: -5px; }
#topview .chain .chain .inf:after { bottom: -5px; }

#topview .chain .chain {
	position: absolute;
	width: 25px;
	min-height: 20px;
	/* border-color: transparent; #aaa transparent */
	border-top-color: transparent;

	}
#topview .be0 .chain { top: 33px; right: -8px; }
#topview .be2 .chain { top: 33px; left: -9px; }
#topview .be6 .chain { top: 35px; left: -11px; }
#topview .be4 .chain { top: 35px; right: -10px; }

#topview .be0 .inf, #topview .be4 .inf { border-right-width: 3px; }
#topview .be2 .inf, #topview .be6 .inf { border-left-width: 3px; }
#topview .chain .chain > .wL { height: 55px; }
#topview .chain .chain > .wW { height: 41px; }
#topview .chain .chain > .wR { height: 27px; }
#topview .chain .chain > .wS { height: 20px; }
#topview .be0 .inf:before, #topview .be0 .inf:after,
#topview .be4 .inf:before, #topview .be4 .inf:after { left: -1px; }
#topview .be2 .inf:before, #topview .be2 .inf:after,
#topview .be6 .inf:before, #topview .be6 .inf:after { left: -3px; }

#topview .chain span {
	display: block;
	position: absolute;
	box-sizing: border-box;
	border: 1px solid #ccc;
	background-color: #e8e8e8;
	z-index:1;
	}
#topview .be0 span, #topview .be2 span { top: -18px; width: 20px; height: 22px; border-top: none; }
#topview .be4 span, #topview .be6 span { top: -37px; width: 22px; height: 20px; }
#topview .be0 span { left: 7px; }
#topview .be2 span { left: 7px; }
#topview .be4 span { right: 25px; border-right: none; }
#topview .be6 span { left: 26px; border-left: none; }

#topview .be0 span:after,
#topview .be2 span:after {
	position: absolute;
	content: '';
	top: 23px;
	left: -1px;
	width: 20px;
	height: 3px;
	background-color: transparent;
	background-image: url(img/btn-cmd.png);
	background-repeat: no-repeat;
	background-position: -333px -68px;
	}
#topview .be4 span:after,
#topview .be6 span:after {
	position: absolute;
	content: '';
	top: -1px;
	width: 3px;
	height: 20px;
	background-color: transparent;
	background-image: url(img/btn-cmd.png);
	background-repeat: no-repeat;
	background-position: -330px -68px;
	}
#topview .be4 span:after { left: -5px; }
#topview .be6 span:after { left: 23px; }

#topview .inf.wS .chain, #topview .inf.wR .chain, #topview .inf.wL .chain { display: none; }

/*! commander -------------------------------------------------- */

#commander {
	position: absolute;
	top:80px;
	left:16px;
	width: 50px;
	height: auto;
	z-index:210;
	}

#commander button {
	position: relative;
	width: 50px;
	height: 50px;
	margin: 8px 0;
	background-color: transparent;
	background-image: url(img/btn-cmd.png);
	background-repeat: no-repeat;
	}

#commander .help { background-position: 0 0; }
#commander .print{ background-position: -50px 0; }
#commander .save { background-position: -100px 0; }
#commander .undo { background-position: -150px 0; visibility: hidden; display: none; }
#commander .redo { background-position: -200px 0; visibility: hidden; display: none; }
#commander .topview{ background-position: -400px 0; margin-top: 66px; }
#commander .review { background-position: -350px 0; }

#commander .undo + #commander .topview { margin-top: 8px; }


/*! 全幅・全高 --------------------------------------------------- */

#w-measure {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -30px;
	}
#w-measure ol {
	position: relative;
	height: 12px;
	margin: 0 26px -12px 26px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	}
#w-measure li {
	position: relative;
	top: 6px;
	height: 6px;
	border-top: 1px solid black;
	}
#w-measure span {
	position: relative;
	top: -2px;
	padding: 0 4px;
	font-size: 10px;
	font-family: monospace;
	background-color: white;
	}
#h-measure {
	position: absolute;
	bottom:2px;
	right:-20px;
	}
.ct #h-measure { bottom:-8px; }
#h-measure ol {
	width: 12px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	}
#h-measure li {
	position: relative;
	left: 6px;
	width: 6px;
	height: 100%;
	border-left: 1px solid black;
	}
#h-measure span {
	display: block;
	position: relative;
	top: 40%;
	left:-27px;
	width: 55px;
	padding: 4px 0;
	font-size: 10px;
	font-family: monospace;
	line-height: 120%;
	background-color: white;
	}

/*! SUS -------------------------------------------------------- */

#pile {
	display: inline-block;
	position: relative;
    /*zoom: 1;*/
	width: 0;
	height: 486px;
	vertical-align: bottom;
	}
/* .open #pile { margin-left: 100px; } /* 暫定 */
#sus {
	display: inline-block;
	position: relative;
	width: auto;
	margin: 0 0 0 20px;
	vertical-align: bottom;
	white-space: nowrap;
	}
/* .private #sus { background: transparent url(img/sus.png) repeat-x left bottom; } 検証用 */

#sus * {cursor: pointer;}

.ladder, .infill {
	display: inline-block;
	position: relative;
	vertical-align: bottom;
	margin: 50px 0 0 0;
	margin-left: -5px;
	padding: 0;
	line-height: 100%;
	}

#sus ul.swap { background: rgba(0,0,0,0.1); }
#sus ul.swap * { display: none; }
#sus div.swap button { display:none; }

#control {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

/*! marker ----------------------------------------------------- */

#lugBalloon {
	position: absolute;
	padding: 8px;
	top: -300px;
	left: -300px;
	text-align: center;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	z-index: 240;
	}

#dragballoon {
	position: absolute;
	box-sizing: border-box;
	padding: 12px 6px;
	cursor: pointer;
	background-color: white;
	border: 1px solid #888;
	border-radius: 4px;
	box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4);
	z-index: 600;
}
#dragballoon:after {
	display: block;
	position: absolute;
	bottom: -27px;
	left: 54px;
	width: 19px;
	height: 28px;
	content: "";
	background: transparent url(img/btn.png) no-repeat;
	background-position: -450px -404px;
	}
#dragballoon.lt { margin-left: 60px; }
#dragballoon.lt:after {
	left: 10px;
	background-position: -469px -404px;
	}
.touch #dragballoon { margin-left: -20px; }
.touch #dragballoon.lt { margin-left: 80px; }

#dragballoon div {
	position: relative;
	width: 71px;
	height: 36px;
	background-color: transparent;
	background-image: url(img/btn.png);
	background-repeat: no-repeat;
}
#dragballoon div.bE0,
#dragballoon div.bE2,
#dragballoon div.bE4,
#dragballoon div.bE1,
#dragballoon div.bE3,
#dragballoon div.bE5,
#dragballoon div.bE8,
#dragballoon div.bE9 { width: 35px; margin: 0 15px; }
#dragballoon div.bR0,
#dragballoon div.bR2,
#dragballoon div.bR4,
#dragballoon div.bR6,
#dragballoon div.bR8,
#dragballoon div.bR3,
#dragballoon div.bR5,
#dragballoon div.bR7,
#dragballoon div.bR9,
#dragballoon div.bH1,
#dragballoon div.bH2,
#dragballoon div.bH3 { width: 55px; margin: 0 8px; }
#dragballoon div.bE1,
#dragballoon div.bE3,
#dragballoon div.bE5,
#dragballoon div.bE9,
#dragballoon div.bR3,
#dragballoon div.bR5,
#dragballoon div.bR7,
#dragballoon div.bR9 { height: 54px; }
#dragballoon div.bR0:after { display:none; }
#dragballoon div.bVS,
#dragballoon div.bV1,
#dragballoon div.bV0 { height: 101px; width: 41px; margin: 0 15px; }

#dragballoon.mL div.bL,
#dragballoon div.bG,
#dragballoon div.bU { height: 28px; }

/*
#dragballoon.inner div:after {
	display: block;
	position: absolute;
	//top: 4px;
	//left: 12px;
	top: 8px;
	left: -10px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 3px 6px 1px 6px;
	content: "インナー用";
	color: white;
	font-size: 9px;
	font-weight: bold;
	line-height: 100%;
	white-space: nowrap;
	background-color: #666;
	background-image: none;
	border-radius: 3px;
	}
*/

#dragballoon span {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 48px;
	height: 34px;
	background: transparent url(img/btn.png) no-repeat;
}
#dragballoon span.chg { display:block; background-position: -284px -336px; }
#dragballoon span.mis { display:block; background-position: -332px -336px; }
#dragballoon span.bad { display:block; background-position: -380px -336px; }
#dragballoon span.rmv { display:block; background-position: -428px -340px; }

#sizemark {
	position: absolute;
	border-right: 1px solid #0088ff;
	text-align: left;
	z-index: 100;
	/*z-index: 211;*/
	pointer-events: none;
}
#sizemark div {
	position: absolute;
	top: 0;
	left: 0;
	width: 400%;
	height: 25%;
	border-bottom: 1px solid #0088ff;
}
#sizemark span {
	position: absolute;
	top: 30%;
	left: 120%;
	font-size: 10px;
	font-family: monospace;
	line-height: 110%;
	color: #0088ff;
	background-color: rgba(255,255,255,0.6);
}

#dmark,#umark {
	position: absolute;
	background: rgba(0,0,0,0.2);
	border: 1px solid #aaa;
	z-index: 195;
	}
/* dmarkに画像を表示
#dmark { background-color: transparent; }	
#dmark div { opacity: 0.9; }
*/

#umark button { display:none; }
#umark.locked {
	border: 2px solid #79001f;
	z-index:220;
	}
#umark.locked button { display: block; }

#imark {
	position: absolute;
	border: 1px solid #aaa;
	width: 200px;
	height: 200px;
	background-color: transparent;
	z-index: 230;
	}
#imark.isin { background-color: rgba(0,0,0,0.1); }
#imark > div { position:absolute; top:0; right:0; width:50%; height:50%; }
#imark button {
	position:absolute;
	width:30px;
	height:30px;
	background-color: transparent;
	background-image: url(img/btn.png);
	background-repeat: no-repeat;
	}
#imark .vertical	{ top:	 -15px; left: -15px; background-position: -430px -250px; }
#imark .horizontal	{ bottom:-15px; right:-15px; background-position: -460px -250px; }
#imark .duplicate 	{ bottom:-10px; right:-15px; background-position: -430px -280px; }
#imark .infilldrag	{ bottom:-15px; left: -15px; background-position: -460px -280px; }
#imark .delete		{ bottom:-10px; left: -15px; background-position: -430px -310px; }
#imark .chgcorner	{ bottom:-53px; left: -15px; background-position: -490px -370px; }
#imark .corner .chgcorner { background-position: -490px -400px; }

#imark.reverse .duplicate { right: auto; left: -15px; }
#imark.reverse .delete    { right: -15px; left: auto; }

.not-duplicate .duplicate, .not-delete .delete, .not-delete .infilldrag, .not-move .infilldrag, .not-height .vertical,
.disobey .vertical, .disobey .horizontal, .disobey .infilldrag, .not-corner .chgcorner { display: none; }

.childCornre .horizontal, .childCornre .delete, .childCornre .infilldrag { display: none; }

#imark > div.boxHole {
	top: auto;
	width: 100%;
	height: 72px;
	}
#imark.drag > div.boxHole { display: none; }	
#imark > div.boxHole button { background-position: -460px -374px; z-index: 10; }
#imark > div.boxHole button.on { background-position: -430px -374px; }
#imark .hp1 { left: 14px; bottom: 4px; }
#imark .hp2 { right: 14px; bottom: 4px; }
#imark .hp3 { left: 14px; top: 4px; }
#imark .hp4 { right: 14px; top: 4px; }

#flighty {
	position: absolute;
	padding:0 3px 5px 8px;
	bottom: 8px;
	background-color: rgba(255,255,255,0.4);
	z-index:600;
	}
#sus #flighty .ladder, #sus #flighty .infill { margin-top: 8px; }
#flighty .infill:after { display:none; }

/*! message ---------------------------------------------------- */

#msg-wrap {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 300;
	}
#msg-wrap > div {
	position: relative;
	width: 930px;
	width: 980px; /* 2015.06.25 */
	height: 100%;
	margin: 0 auto;
	}

#msg {
	position: absolute;
	width: 300px;
	height: auto;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4);
	}

#msg em { color:black; font-weight:bold; font-style:normal; }
#msg .mm {
	position: relative;
	margin: 2px 10px 8px 10px;
	padding: 6px 0 0 4px;
	text-align:left;
	}

#msg p { padding: 2px 6px; }
#msg p.tc { text-align: center; }
#msg p.command { text-align: right; }
#msg p button {
	margin:4px 0 0 8px;
	letter-spacing:0;
	}
#msg p button:first-child { margin-left:0; }
#msg input { padding:1%; width:97%; }
#msg ul { margin-top:4px; padding-left:2.5em; }
#msg ul li { margin-left:-0.7em; list-style:disc; }
#msg hr { border:0 solid white; border-bottom: 1px solid #ccc; }
#msg span.err { background: none; bottom:4px; color:#999 }

#msg p.withx {
	padding-bottom:4px;
	padding-right: 30px;
	}
#msg button.close {
	position: absolute;
	top:0;
	right:5px;
	width:20px;
	height:20px;
	background: transparent url(img/btn.png) no-repeat -284px -370px;
	}
.no-touch #msg button.close:hover {
	background: transparent url(img/btn.png) no-repeat -304px -370px;
	}
#msg .overlimit { margin-top: 0.5em; padding: 0 6px; }
#msg .overlimit spam { display: none; }
#msg p + .overlimit span {
	display: block;
	position: relative;
	border-top: 1px solid #ccc;
	margin-bottom: 0.5em;
	}
#msg .overlimit + p { margin-top: 0.4em; }

/*! parts size ------------------------------------------------- */

.ladder { z-index: 200; }
.infill { z-index: 50; }

.ladder { z-index: auto; }
.infill { z-index: auto; }
.ladder .hook { z-index: 210; }

/*.ladder.ghost { background-color: lime; }*/

.ladder { width: 10px; }
.extension {
	display: block;
	position: absolute;
	top: -50px;
	left: 0;
	width: 10px;
	height: 56px;
	}
.caster {
	display: block;
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 10px;
	height: 16px;
	}
.hook {
	display: block;
	position: absolute;
	bottom: 60px; 
	left: -5px;
	width: 22px;
	height: 22px;
	background: transparent url(img/btn.png) no-repeat -324px -370px;
	}
.suspend .hook, .hookoff { display: none; position: absolute; }

.ladder .violate {
	position: absolute;
	left: -10px;
	width: 30px;
	height: 30px;
	border: none;
	background: transparent url(img/btn.png) no-repeat -490px -340px;
	z-index: 210;
	}

.ladder .row22 { bottom: 396px; }
.ladder .row21 { bottom: 377.5px; }
.ladder .row20 { bottom: 359px; }
.ladder .row19 { bottom: 340.5px; }
.ladder .row18 { bottom: 322px; }
.ladder .row17 { bottom: 303.5px; }
.ladder .row16 { bottom: 285px; }
.ladder .row15 { bottom: 266.5px; }
.ladder .row14 { bottom: 248px; }
.ladder .row13 { bottom: 229.5px; }
.ladder .row12 { bottom: 211px; }
.ladder .row11 { bottom: 192.5px; }
.ladder .row10 { bottom: 174px; }
.ladder  .row9 { bottom: 155.5px; }
.ladder  .row8 { bottom: 137px; }
.ladder  .row7 { bottom: 118.5px; }
.ladder  .row6 { bottom: 100px; }
.ladder  .row5 { bottom:  81.5px; }
.ladder  .row4 { bottom:  63px; }
.ladder  .row3 { bottom:  44.5px; }
.ladder  .row2 { bottom:  26px; }
.ladder  .row1 { bottom:   7.5px; }
.ladder  .row0 { bottom: -11px; }
.ladder  .row-1 { bottom: -16px; background-position: -490px -280px; }

#left-end, #right-end { width: 30px; z-index: 50; }
#left-end { margin-left: 0px; }

/* infill */

.infill li.violate {
	position: absolute;
	left: 0px;
	width: 100%;
	height: 30px;
	bottom: -16px;
	text-align: center;
	z-index: 110;
	}
.infill li.violate button {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	background: transparent url(img/btn.png) no-repeat -490px -280px;
	}
.infill .violateoff { display: none; }

#sus > .violateoff, #sus.suspend .violate { display: none; }

#vioEX, #vioCT {
	position: absolute;
	right: -8px;
	width: 30px;
	height: 30px;
	border: none;
	background: transparent url(img/btn.png) no-repeat -490px -310px;
	z-index: 200;
	}
#vioEX { top:40px; }
#vioCT { bottom:-10px; }

#vioSO {
	position: absolute;
	bottom: -36px;
	right:-28px;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	background: transparent url(img/btn.png) no-repeat -490px -280px;
	z-index: 100;
	}
#vioSO i {
	display: block;
	position: absolute;
	bottom: 5px;
	left: 32px;
	text-align: left;
	text-decoration: none;
	font-size: 9px;
	font-style: normal;
	line-height: 110%;
	}
#vioSO.inSell { display: none; }

.ladder .violate,
li.lug .violate {
	position: absolute;
	width: 30px;
	height: 30px;
	border: none;
	background-color: transparent;
	background-image: url(img/btn.png);
	background-repeat: no-repeat;
	}
.ladder .violate {
	left: -10px;
	background-position: -490px -340px;
	}
li.lug .violate {
	top: auto;
	left: 0;
	right: 0;
	bottom: 38px;
	margin: auto;
	background-position: -490px -280px;
	}


#sus .wS { width: 80px }
#sus .wR { width: 108px }
#sus .wW { width: 164px }
#sus .wL { width: 220px } /* 2019.09 221 -> 220 */
#sus .hC { height: 94px }
#sus .hS { height: 168px }
#sus .hM { height: 242px }
#sus .hL { height: 353px }
#sus .hX { height: 426px }

/* cross bar */

.crossbar {
	position: absolute;
	/*top: 10px;*/
	left: 0;
	width: 100%;
	background: transparent url(img/parts.png) no-repeat;
	z-index: 51;
	}
.private .crossbar { background-image: url(img/parts.png); } /* 検証用 */

.wS .crossbar { height: 142px; margin-bottom: 0px; background-position: -31px 0; }
.wR .crossbar { height: 142px; margin-bottom: 0px; background-position:-117px 0; }
.wW .crossbar { height: 142px; margin-bottom: 0px; background-position:-231px 0; }
.wL .crossbar { height: 142px; margin-bottom: 0px; background-position:-401px 0; }

#sus .suspend { display:none; }

/* backpanel */

.rearpanel {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 52;
	background: transparent url(img/parts.png) no-repeat;
	}
.private .rearpanel { background-image: url(img/parts.png); } /* 検証用 */

.R0 { height:68px; margin-bottom: 2px; }
.R2, .R4, .R6, .R8 { height:74px; }
.R3, .R5, .R7, .R9 { height:111px; }

.wR .R0  { background-position: -117px -412px; }
.wR .R2  { background-position: -117px -486px; }	.wR .R8  { background-position: -800px -333px; }
.wR .R4  { background-position: -117px -560px; }
.wR .R3  { background-position:   -3px -412px; }	.wR .R9  { background-position: -800px -222px; }
.wR .R5  { background-position:   -3px -523px; }
.wW .R0  { background-position: -231px -412px; }
.wW .R2  { background-position: -231px -486px; }	.wW .R8  { background-position: -800px -407px; }
.wW .R4  { background-position: -231px -560px; }
.wW .R3  { background-position: -401px -523px; }	.wW .R9  { background-position: -800px -481px; }
.wW .R5  { background-position: -401px -634px; }

.wR .R6	 { background-position:-632px -592px; }
.wW .R6	 { background-position:-632px -666px; }
.wR .R7	 { background-position:-1008px 0px; }
.wW .R7	 { background-position:-1116px -0px; }

.rearpanel.R8:after, .rearpanel.R9:after {
	display: inline-block;
	position: relative;
	top: 43%;
	width: auto;
	height: auto;
	margin: 0;
	padding: 3px 6px 1px 6px;
	content: "ツヤ有";
	color: white;
	font-size: 9px;
	font-weight: bold;
	line-height: 100%;
	background-color: #666;
	background-image: none;
	border-radius: 3px;
	}

	.rearpanel.R4:after, .rearpanel.R5:after {
		display: inline-block;
		position: relative;
		top: 43%;
		width: auto;
		height: auto;
		margin: 0;
		padding: 3px 6px 1px 6px;
		content: "ダークグレー";
		color: white;
		font-size: 9px;
		font-weight: bold;
		line-height: 100%;
		background-color: #666;
		background-image: none;
		border-radius: 3px;
	}
	

.wS .rearpanel, .wL .rearpanel { display:none; }

/* unit */

.infill .unit {
	position: relative;
	pointer-events: none;
	}

.infill .rung  { height: 16px; z-index:51; } /* bottom unit */
.infill .rung0 { height:  0px; } /* reserve */
.infill .rung1 { height: 18.5px; }
.infill .rung2 { height: 37px; }
.infill .rung3 { height: 55.5px; }
.infill .rung4 { height: 74px; }
.infill .rung5 { height: 92.5px; }
.infill .rung6 { height:111px; }
.infill .rung7 { height:129.5px; }
.infill .rung8 { height:148px; }
.infill .rung9 { height:166.5px; }
.infill .rung10{ height:185px; }
.infill .rung11{ height:203.5px; }

.infill .rung12{ height:222px; }
.infill .rung13{ height:240.5px; }
.infill .rung14{ height:259px; }
.infill .rung15{ height:277.5px; }
.infill .rung16{ height:296px; }
.infill .rung17{ height:314.5px; }
.infill .rung18{ height:333px; }
.infill .rung19{ height:351.5px; }
.infill .rung20{ height:370px; }
.infill .rung21{ height:388.5px; }
.infill .rung22{ height:407px; }

.infill li.upper { margin-top:-1px }

.slot { display:block; position:absolute; top:0; left:0; width:100%; height:6px; z-index:99; } /* 検討 */
.lower .slot { height: 16px; top: -10px; }
.upper .slot { height: 16px; z-index: 98; }

.cargo { position:absolute; top:0; left:0; width:100%; height: 100%; z-index: 98;}
.lower .cargo {}
.upper .cargo { z-index: 99; }

/* reserve */

.reserve {
	position: absolute;
	left:0;
	width: 100%;
	}
.hC .reserve { bottom: 94px }
.hS .reserve { bottom: 168px }
.hM .reserve { bottom: 242px }
.hL .reserve { bottom: 353px }
.hX .reserve { bottom: 426px }

/*! background image ------------------------------------------- */

.ladder, .slot, .cargo, .hang, .extension, .caster {
	background: transparent url(img/parts.png) no-repeat;
	}

.mS .ladder { background-position: -622px bottom; }
.mG .ladder { background-position: -612px bottom; }
.mL .ladder { background-position: -592px bottom; }

/* スチール棚板 */
.wS .G { background-position: -31px -142px; }
.wR .G { background-position:-117px -142px; }
.wW .G { background-position:-231px -142px; }
.wL .G { background-position:-401px -142px; }
/* 木製棚板 */
.wS .U { background-position: -31px -148px; }
.wR .U { background-position:-117px -148px; }
.wW .U { background-position:-231px -148px; }
.wL .U { visibility: hidden; }
/* ステンレス棚板 */
.wS .S { background-position: -31px -154px; }
.wR .S { background-position:-117px -154px; }
.wW .S { background-position:-231px -154px; }
.wL .S { background-position:-401px -154px; }
/* ライトグレー */
.wS .L { background-position: -31px -160px; }
.wR .L { background-position:-117px -160px; }
.wW .L { background-position:-231px -160px; }
.wL .L { background-position:-401px -160px; }
/* ライトグレー・ツヤ有り */
.mL .wS .L { background-position: -31px -196px; }
.mL .wR .L { background-position:-117px -196px; }
.mL .wW .L { background-position:-231px -196px; }
.mL .wL .L { background-position:-401px -148px; }
/* ダークグレー */
.wS .D { background-position: -31px -166px; }
.wR .D { background-position:-117px -166px; }
.wW .D { background-position:-231px -166px; }
.wL .D { background-position:-401px -166px; }
/*.wL .D { visibility: hidden; }*/
/* タモ材棚板 */
.wS .T { background-position: -31px -172px; }
.wR .T { background-position:-117px -172px; }
.wW .T { background-position:-231px -172px; }
.wL .T { visibility: hidden; }
/* ワイヤー棚板 */
.wS .Y { background-position: -31px -178px; }
.wR .Y { background-position:-117px -178px; }
.wW .Y { background-position:-231px -178px; }
.wL .Y { visibility: hidden; }
/* オーク材棚板 */
.wS .O { background-position: -31px -184px; }
.wR .O { background-position:-117px -184px; }
.wW .O { background-position:-231px -184px; }
.wL .O { visibility: hidden; }
/* ウォールナット材棚板 */
.wS .W { background-position: -31px -190px; }
.wR .W { background-position:-117px -190px; }
.wW .W { background-position:-231px -190px; }
.wL .W { visibility: hidden; }

/* コーナー オーク材棚板 */
.be0 .CO, .be4 .CO { background-position:-31px -202px; width: 160px; }
.be2 .CO, .be6 .CO { background-position:-117px -202px; width: 160px; left: 4px; }
/* コーナー ウォールナット材棚板 */
.be0 .CW, .be4 .CW { background-position:-283px -202px; width: 160px; }
.be2 .CW, .be6 .CW { background-position:-368px -202px; width: 160px; left: 4px; }
.wS .CO, .wR .CO, .wL .CO { visibility: hidden; }
.wS .CW, .wR .CW, .wL .CW { visibility: hidden; }

/* 小棚 */
.wW .MS { background-position:-411px -154px; }
.wW .MO { background-position:-231px -288px; }
.wW .MW { background-position:-231px -294px; }
.wS .MS, .wR .MS, .wL .MS { visibility: hidden; }
.wS .MO, .wR .MO, .wL .MO { visibility: hidden; }
.wS .MW, .wR .MW, .wL .MW { visibility: hidden; }

/* ステンレス　帆立補強パーツ */
.mS .wR .F { background-position: -401px -178px; }
.mS .wW .F { background-position: -401px -190px; }
/* グレー　帆立補強パーツ */
.mL .wR .F { background-position: -401px -172px; }	.mG .wR .F { background-position: -401px -172px; }
.mL .wW .F { background-position: -401px -184px; }	.mG .wW .F { background-position: -401px -184px; }
.wS .F, .wL .F { visibility: hidden; }

/* バスケット類 */
.cargo.BP, .cargo.BY, .cargo.BC { top:5px; height:32px; }
.nearlow .BP, .nearlow .BY, .nearlow .BC { top:-5px; height:40px; }
/* スチール PPバスケット */
.mG .wR .BP { background-position: -3px -301px; }
.mG .wS .BP, .mG .wW .BP, .mG .wL .BP { visibility: hidden; }
/* スチール ワイヤーバスケット */
.mG .wR .BY, .mL .wR .BY { background-position:-117px -301px; }
.mG .wW .BY, .mL .wW .BY { background-position:-231px -301px; }
.mG .wS .BY, .mG .wR .BY, .mG .wL .BY,
.mL .wS .BY, .mL .wL .BY { visibility: hidden; }
/* スチール 帆布バスケット */
.mG .wR .BC, .mL .wR .BC { background-position:-117px -338px; }
.mG .wW .BC, .mL .wW .BC { background-position:-231px -338px; }
.mG .wS .BC, .mG .wL .BC,
.mL .wS .BC, .mL .wL .BC { visibility: hidden; }
/* ステンレス PPバスケット */
.mS .wR .BP { background-position:  -3px -338px; }
.mS .wS .BP, .mS .wW .BP, .mS .wL .BP { visibility: hidden; }
/* ステンレス ワイヤーバスケット */
.mS .wR .BY { background-position:-117px -375px; }
.mS .wW .BY { background-position:-231px -375px; }
.mS .wS .BY, .mS .wL .BY { visibility: hidden; }
.mS .be4 div.BY {
	top: 7px;
	left: 74px;
	width: 88px;
	height: 30px;
	background-position: -1098px -716px;
	}
.mS .be6 div.BY {
	top: 7px;
	left: 2px;
	width: 88px;
	height: 30px;
	background-position: -1188px -716px;
	}

/* 斜めタイプ棚 */
.AU, .AL, .AH { background: transparent url(img/parts.png) no-repeat; }
.AU, .AL { height:54px; }
.AH { height:20px; }
.wR .AU { background-position:-117px -210px; top: -30px; } .wW .AU { background-position:-401px -210px; top: -30px; }
.wR .AL { background-position:  -3px -210px; top: -12px; } .wW .AL { background-position:-231px -210px; top: -12px; }
.wR .AH { background-position:  -3px -264px; top: -11px; } .wW .AH { background-position:-231px -264px; top: -11px; }
/* ワードローブバー */
.WB { height: 37px; }
.wR .WB { background-position:-117px -264px; }
.wW .WB { background-position:-401px -264px; }
.wS .WB, .wL .WB { visibility: hidden; }
.be4 .WB, .be6 .WB {
	top: 6px;
	height: 20px;
	width: 6px;
	background-color: transparent;
	background-image: url(img/parts.png);
	background-repeat: no-repeat;
	background-position: -569px -268px;
	}
.be4 .WB { left: 118px; }
.be6 .WB { left: 38px; }

/* オーク材ボックス */
.wW .DO { background-position: -632px 0px; }
.wW .FO { background-position: -632px -74px; }
.wW .GO { background-position: -632px -148px; }
.wW .SO { background-position: -632px -222px; }
.wW .HO { background-position: -632px -148px; }
/* ウォールナット材ボックス */
.wW .DW { background-position: -632px -296px; }
.wW .FW { background-position: -632px -370px; }
.wW .GW { background-position: -632px -444px; }
.wW .SW { background-position: -632px -518px; }
.wW .HW { background-position: -632px -444px; }
/* タモ材引出し */
.wW .DT { background-position: -401px -301px; }
.wW .FT { background-position: -401px -375px; }
.wW .GT { background-position: -401px -449px; }

.wS .DT, .wR .DT, .wL .DT, .wS .FT, .wR .FT, .wL .FT, .wS .GT, .wR .GT, .wL .GT { visibility: hidden; }
.wS .DO, .wR .DO, .wL .DO, .wS .FO, .wR .FO, .wL .FO, .wS .SO, .wR .SO, .wL .SO, .wS .GO, .wR .GO, .wL .GO { visibility: hidden; }
.wS .DW, .wR .DW, .wL .DW, .wS .FW, .wR .FW, .wL .FW, .wS .SW, .wR .SW, .wL .SW, .wS .GW, .wR .GW, .wL .GW { visibility: hidden; }
.wS .HO, .wR .HO, .wL .HO, .wS .HW, .wR .HW, .wL .HW { visibility: hidden; }
/* つっぱり */
.extension { display:none; }
.exSS .extension { background-position:-622px -174px; display: block; }
.exSM .extension { background-position:-622px -230px; display: block; }
.exSL .extension { background-position:-622px -286px; display: block; }
.exLS .extension { background-position:-592px -174px; display: block; }	.exGS .extension { background-position:-612px -174px; display: block; }
.exLM .extension { background-position:-592px -230px; display: block; }	.exGM .extension { background-position:-612px -230px; display: block; }
.exLL .extension { background-position:-592px -286px; display: block; }	.exGL .extension { background-position:-612px -286px; display: block; }
/* キャスター */
.caster { display: none; }
.ct .caster { background-position:-602px -210px; display: block; }
/* サイドパネル */
#left-end .cargo, #right-end .cargo {
	width: 10px;
	background: transparent url(img/parts.png) no-repeat;
	}
#left-end .cargo { margin-left: 16px; }
#right-end .cargo { margin-left: 4px; }

.E0, .E2, .E4, .E8 { height:80px; }
.E1, .E3, .E5, .E9 { height:117px; }
#left-end .E0 { background-position:-965px -0px; }
#left-end .E2 { background-position:-965px -80px; }		#left-end .E8 { background-position:-986px -554px; }
#left-end .E4 { background-position:-965px -160px; }
#left-end .E1 { background-position:-965px -320px; }
#left-end .E3 { background-position:-965px -437px; }	#left-end .E9 { background-position:-986px -634px; }
#left-end .E5 { background-position:-965px -554px; }

#right-end .E0 { background-position:-975px -0px; }
#right-end .E2 { background-position:-975px -80px; }	#right-end .E8 { background-position:-996px -554px; }
#right-end .E4 { background-position:-975px -160px; }
#right-end .E1 { background-position:-975px -320px; }
#right-end .E3 { background-position:-975px -437px; }	#right-end .E9 { background-position:-996px -634px; }
#right-end .E5 { background-position:-975px -554px; }

.cargo.E0:after, .cargo.E1:after {
	display: inline-block;
	position: relative;
	top: 43%;
	left: -19px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 3px 6px 1px 6px;
	content: "ステンレス";
	color: white;
	font-size: 9px;
	font-weight: bold;
	line-height: 100%;
	background-color: #666;
	background-image: none;
	border-radius: 3px;
	transform: rotate(-90deg);
	}

.cargo.E4:after, .cargo.E5:after {
		display: inline-block;
		position: relative;
		top: 43%;
		left: -19px;
		width: auto;
		height: auto;
		margin: 0;
		padding: 3px 6px 1px 6px;
		content: "ダークグレー";
		color: white;
		font-size: 9px;
		font-weight: bold;
		line-height: 100%;
		background-color: #666;
		background-image: none;
		border-radius: 3px;
		transform: rotate(-90deg);
		}

.cargo.E8:after, .cargo.E9:after {
	display: inline-block;
	position: relative;
	top: 43%;
	left: -19px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 3px 6px 1px 6px;
	content: "ツヤ有";
	color: white;
	font-size: 9px;
	font-weight: bold;
	line-height: 100%;
	background-color: #666;
	background-image: none;
	border-radius: 3px;
	transform: rotate(-90deg);
	}

/* インナー サイドパネル */
.cargo.I { background-image: none; }
.cargo.I span {
	display: block;
	position: absolute;
	top: 5px;
	width: 10px;
	background-color: transparent;
	background-image: url(img/parts.png);
	background-repeat: no-repeat;
	}
.cargo.I span.lt { left: 7px; }
.cargo.I span.rt { right: 7px; }
.I0, .I2, .I4 { height:70px; }
.I1, .I3, .I5 { height:107px; }

.rt.I0 { background-position:-986px -0px; }
.rt.I2 { background-position:-986px -70px; }
.rt.I4 { background-position:-986px -140px; }
.rt.I1 { background-position:-986px -210px; }
.rt.I3 { background-position:-986px -317px; }
.rt.I5 { background-position:-986px -424px; }

.lt.I0 { background-position:-996px -0px; }
.lt.I2 { background-position:-996px -70px; }
.lt.I4 { background-position:-996px -140px; }
.lt.I1 { background-position:-996px -210px; }
.lt.I3 { background-position:-996px -317px; }
.lt.I5 { background-position:-996px -424px; }

/* フロントパネル */
.hang {
	display: block;
	position: absolute;
	top: 1px;
	left: 0;
	height: 74px;
	width: 100%;
	}
.be4 .hang, .be6 .hang { display: none; }

.slot {
	-webkit-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
	}

.hang {
	-webkit-transform-origin: center top;
	-webkit-transform: rotateX(0deg);
	transition: -webkit-transform 0.2s ease 0;
	transform-origin: center top;
	transform: rotateX(0deg);
	transition: transform 0.2s ease 0;
	}
.hang.open {
	-webkit-transform: rotateX(80deg);
	transition: -webkit-transform 0.2s ease 0.2s;
	transform: rotateX(80deg);
	transition: transform 0.2s ease 0.2s;
	}
/*
.hang {
	-webkit-transform-origin: center top;
	-webkit-transform: scaleY(1);
	transition: -webkit-transform 0.2s ease 0;
	transform-origin: center top;
	transform: scaleY(1);
	transition: transform 0.2s ease 0;
	}
.hang.open {
	-webkit-transform: scaleY(0.2);
	transform: scaleY(0.2);
	}
*/
.wR .H1 { background-position:-1008px -185px; }
.wR .H2 { background-position:-1008px -259px; }
.wR .H3 { background-position:-1008px -111px; }
.wW .H1 { background-position:-1116px -185px; }
.wW .H2 { background-position:-1116px -259px; }
.wW .H3 { background-position:-1116px -111px; }

.wS .H1, .wS .H2, .wS .H3, .wR .H1, .wL .H1, .wL .H2, .wL .H3 { display: none; }
.wW .H3 { display: none; } /* 2021.09 soldout */

li.lug {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	padding: 4px 2px 0px;
	overflow-x: hidden;
	z-index: 52;
	}
.lugMode li.lug, li.lug.notice { z-index: 99; }

.lug.row22 { bottom: 426px; }
.lug.row21 { bottom: 407.5px; }
.lug.row20 { bottom: 389px; }
.lug.row19 { bottom: 370.5px; }
.lug.row18 { bottom: 352px; }
.lug.row17 { bottom: 333.5px; }
.lug.row16 { bottom: 315px; }
.lug.row15 { bottom: 296.5px; }
.lug.row14 { bottom: 278px; }
.lug.row13 { bottom: 259.5px; }
.lug.row12 { bottom: 241px; }
.lug.row11 { bottom: 222.5px; }
.lug.row10 { bottom: 204px; }
.lug.row9 { bottom: 185.5px; }
.lug.row8 { bottom: 167px; }
.lug.row7 { bottom: 148.5px; }
.lug.row6 { bottom: 130px; }
.lug.row5 { bottom: 111.5px; }
.lug.row4 { bottom: 93px; }
.lug.row3 { bottom: 74.5px; }
.lug.row2 { bottom: 56px; }
.lug.row1 { bottom: 37.5px; }
.lug.row0 { bottom: 19px; }
.lug.row-1 { bottom: 2px; }

li.lug[data-info]:after {
	display: block;
	position: absolute;
	left: auto;
	right: 10px;
	bottom: 4px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 3px 6px 1px 6px;
	content: attr(data-info);
	color: black;
	font-size: 10px;
	line-height: 100%;
	background-color: yellow;
	background-image: none;
	border-radius: 3px;
	}
li.lug canvas.lot {
	position: absolute;
	left: 2px;
	bottom: 0;
	/*background-color: rgba(255, 255, 0, 0.2);*/
	}

.wL li.lug.omitL, .be4 li.lug, .be6 li.lug { display: none; }

/*! 2015aw ----------------------------------------------------- */

#msg p.iType {
	text-align: center;
	}
#msg p.iType button {
	position: relative;
	width: 74px;
	height: 74px;
	margin: 4px 10px;
	padding: 2px;
	vertical-align: top;
	background-color: white;
	border: white solid 1px;
	}
#msg p.iType button span {
	display: block;
	top: 3px;
	left: 3px;
	width: 66px;
	height: 66px;
	background: transparent url(img/btn-cmd.png) no-repeat;
	}
	
#msg p.iType button:hover {
	background-color: #e8e8e8;
	border-color: #e8e8e8;
	}
#msg p.iType button.disenable {
	-moz-opacity:1;
	opacity:1;
	border: 1px solid #aaa;
	}
#msg p.iType button.disenable:hover {
	background-color: transparent;
	border: 1px solid #aaa;
	}
#msg p.iType .bbes span { background-position:   0px -50px; }
#msg p.iType .bbe0 span { background-position: -66px -50px; }
#msg p.iType .bbe2 span { background-position:-132px -50px; }
#msg p.iType .bbe4 span { background-position:-264px -50px; }
#msg p.iType .bbe6 span { background-position:-198px -50px; }

.infill.be4:before, .infill.be6:before {
	content: '';
	position: absolute;
	top: -86px;
	left: -2px;
	width: 168px;
	height: 73px;
	background-color: transparent;
	background-image: url(img/btn-cmd.png);
	background-repeat: no-repeat;
	background-position: -382px -50px;
	z-index: 110;
	}
.infill.hX.be4:before, .infill.hX.be6:before {
	top: 98px;
	}

/*! side view ----------------------------------------------------- */

/* ストレート */
.be4 .S, .be4 .O, .be4 .W, .be4 .T, .be4 .Y, .be4 .L, .be4 .D, .be4 .F {
	left: 83px;
	width: 78px;
	}
.be6 .S, .be6 .O, .be6 .W, .be6 .T, .be6 .Y, .be6 .L, .be6 .D, .be6 .F {
	left: 3px;
	width: 78px;
	}
.be6 .S, .be4 .S,
.be6 .MS,.be4 .MS{ background-position: -253px -154px; }
.be6 .O, .be4 .O,
.be6 .MO,.be4 .MO{ background-position: -253px -184px; }
.be6 .W, .be4 .W,
.be6 .MW,.be4 .MW{ background-position: -253px -190px; }
.be6 .T, .be4 .T { background-position: -253px -172px; }
.be6 .L, .be4 .L { background-position: -253px -160px; }
.be6 .D, .be4 .D { background-position: -253px -166px; }
.be6 .Y, .be4 .Y { background-position: -253px -178px; }
.mS .be6 .F, .mS .be4 .F { background-position: -423px -190px; }

/* 小棚 */
.be4 .MS, .be4 .MO, .be4 .MW { left: 136px; width: 24px; }
.be6 .MS, .be6 .MO, .be6 .MW { left: 4px; width: 24px; }

.be2 .slot.T:after { left: 102px; }
.be4 .slot.T:after { left: 20px; }
.be6 .slot.T:after { left: 18px; }

.be2 .slot.CO:after, .be2 .slot.CW:after,
.be6 .slot.CO:after, .be6 .slot.CW:after { left: 89px; }

.be2 .slot.MO:after, .be2 .slot.MW:after, .be2 .slot.MS:after { left: 106px; }
.be4 .slot.MO:after, .be4 .slot.MW:after, .be4 .slot.MS:after,
.be6 .slot.MO:after, .be6 .slot.MW:after, .be6 .slot.MS:after { display: none; }

.be0 .HO:after, .be0 .HW:after, .be2 .HO:after, .be2 .HW:after {
	position: absolute;
	box-sizing: border-box;
	content: "";
	width: 14px;
	height: 14px;
	background-color: rgba(0,0,0,1);
	border: 1px solid #000;
	border-radius: 7px;
	}
.be0 .cargo.hp1:after, .be2 .cargo.hp1:after { bottom:8px; left:7px; }
.be0 .cargo.hp2:after, .be2 .cargo.hp2:after { bottom:8px; right:7px; }
.be0 .cargo.hp3:after, .be2 .cargo.hp3:after { top:8px; left:7px; }
.be0 .cargo.hp4:after, .be2 .cargo.hp4:after { top:8px; right:7px; }

.be4 .DO, .be4 .FO, .be4 .GO, .be4 .SO, .be4 .HO,
.be4 .DW, .be4 .FW, .be4 .GW, .be4 .SW, .be4 .HW,
.be4 .DT, .be4 .FT, .be4 .GT {
	left: 83px;
	width: 78px;
	background-image: none;
	}
/*
.be4 .DO:before, .be4 .FO:before, .be4 .GO:before, .be4 .SO:before,
.be4 .DW:before, .be4 .FW:before, .be4 .GW:before, .be4 .SW:before,
.be4 .DT:before, .be4 .FT:before, .be4 .GT:before { height: 25px; }
*/
.be6 .DO, .be6 .FO, .be6 .GO, .be6 .SO, .be6 .HO,
.be6 .DW, .be6 .FW, .be6 .GW, .be6 .SW, .be6 .HW,
.be6 .DT, .be6 .FT, .be6 .GT {
	left: 3px;
	width: 78px;
	background-image: none;
	}
/*
.be6 .DO:before, .be6 .FO:before, .be6 .GO:before, .be6 .SO:before,
.be6 .DW:before, .be6 .FW:before, .be6 .GW:before, .be6 .SW:before,
.be6 .DT:before, .be6 .FT:before, .be6 .GT:before { height: 25px; }
*/

.boxSide {
	position: absolute;
	left: 3px;
	height: 74px;
	width: 76px;
	background-color: transparent;
	background-image: url(img/parts.png);
	background-repeat: no-repeat;
	}
.boxSide.mO { background-position: -800px 0px; }
.boxSide.mW { background-position: -800px -74px; }
.boxSide.mT { background-position: -800px -148px; }

/* 高さ調整金具 */
.be4 .JU span.lt { top: 0px; left: 82px; }
.be4 .JU span.rt { top: 0px; right: 2px; }
.be6 .JU span.lt { top: 0px; left: 2px; }
.be6 .JU span.rt { top: 0px; right: 82px; }

/* リアパーツ */
.be4 .crossbar, .be6 .crossbar { display: none; }
.be4 .rearpanel,.be6 .rearpanel{ display: none; }

/* サイドパネル */
/* インナー用サイドパネル */
.be4 .cargo.I, .be6 .cargo.I { display: none; }
#left-end .cargo.I, #right-end .cargo.I { top: 0px; background-image: none; }
#left-end .cargo.I .rt { right: -162px; }
#right-end .cargo.I .lt { left: -161px; }

/*
.pp .cargo.clip span { top: 5px; }
.pp .clip .I0, .pp .clip .I2, .pp .clip .I4 { height: 69px; }
.pp .clip .I1, .pp .clip .I3, .pp .clip .I5 { height:106px; }
*/

/* コーナー列の帆立 */
.c-ladder {
	position: absolute;
	bottom: 0px;
	width: 82px;
	background-color: transparent;
	background-image: url(img/parts.png);
	background-repeat: no-repeat;
	background-position: -1008px bottom;
	z-index: 109;
	}
.be0 .c-ladder, .be4 .c-ladder { right: 1px; }
.be2 .c-ladder, .be6 .c-ladder { left: 1px; }
.wS .c-ladder, .wR .c-ladder, .wL .c-ladder { display:none; }


.c-ladder span {
	display: none;
	position: absolute;
	background-color: transparent;
	background-image: url(img/parts_p.png);
	background-repeat: no-repeat;
	}
.c-ladder .cExtension { display: none; width: 82px; background-position: -4px -116px; }
.exSS .cExtension { display: block; top:-18px; height: 18px; }
.exSM .cExtension { display: block; top:-26px; height: 26px; }
.exSL .cExtension { display: block; top:-47px; height: 47px; }
.c-ladder .cCaster {
	bottom: -12px;
	left: -2px;
	height: 16px;
	width: 84px;
	background-position: -2px -165px;
	}
.ct .cCaster { display: block; }

/*! 転倒防止フックを隠す --------------------------------------- */

.noHook .hook { display: none; } 
.noHook .bundle { display: block; } 

/*! 高さ調整金具（棚板付）検討 --------------------------------- */

.JU {
	background-image: none;
	height:18px;
	top:auto;
	bottom:-5px;
	}
.JU span {
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 4px;
	background: transparent url(img/parts.png) no-repeat;
	}
.JU span.lt { left: -1px; }
.JU span.rt { right: 0px; } 
/* ステンレス */
.mS .JU span { background-position: -7px -375px; }
/* ライトグレー */
.mL .JU span { background-position: -3px -375px; }
/* グレー */
.mG .JU span { background-position: -3px -375px; }

.slot.T:after, .cargo.DT:after, .cargo.FT:after, .cargo.GT:after,
.slot.CO:after,.slot.CW:after,.slot.MO:after,.slot.MW:after,.slot.MS:after {
	display: block;
	position: absolute;
	top: 0px;
	left: 23px;
	right: auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 3px 6px 1px 6px;
	color: white;
	font-size: 9px;
	font-weight: bold;
	line-height: 100%;
	background-color: #666;
	background-image: none;
	border-radius: 3px;
	}
.slot.T:after, .cargo.DT:after, .cargo.FT:after, .cargo.GT:after { content: "タモ材"; }
.slot.CO:after,.slot.CW:after { left:15px; content: "コーナー棚"; }
.slot.MO:after,.slot.MW:after,.slot.MS:after { left: 29px; content: "小棚"; } 

.cargo.DT:after, .cargo.FT:after, .cargo.GT:after { top: 8px; }

#palette li.soldOut, #palette button.soldOut,
#palette li.soldOut + .separator { display: none; }
#vioSO.soldOut { display: inherit; }

#palette button.suspend.soldOut { display: block; visibility: hidden; }

#onlyF, #onlyR {
	position: absolute;
	}
#onlyF {
	bottom: 0px;
	width: 81px;
	/*background-color: rgba(0, 255, 255, 0.25);*/
	z-index: 109;
	}
#onlyR {
	bottom: 23px;
	width: 83px;
	/*background-color: rgba(255, 255, 0, 0.48);*/
	z-index: 0;
	}
.be0 #onlyF, .be4 #onlyF { right: 2px; }
.be2 #onlyF, .be6 #onlyF { left: 1px; }
.be0 #onlyR, .be4 #onlyR { left: 0px; }
.be2 #onlyR, .be6 #onlyR { right: 0px; }

.onlyC span {
	display: block;
	background-color: transparent;
	background-image: url(img/parts.png);
	background-repeat: no-repeat;
	}
#onlyF span.cxU, #onlyF span.cxD {
	position: absolute;
	left: 0;
	width: 81px;
	}
#onlyR span.cxU, #onlyR span.cxD {
	position: absolute;
	left: 0;
	width: 81px;
	
	}
.onlyC span.xS { height: 135px; background-position: -1097px -351px; }
.onlyC span.xM { height: 162px; background-position: -1097px -486px; }

.onlyC span.cF {
	position: absolute;
	bottom: 6px;
	left: 3px;
	height: 6px;
	width: 76px;
	background-position: -404px -178px;
	}
#onlyR span.cF { display: none; } /* とりあえず消しただけ */
/*
.be0 #onlyR span.cF { display: none; }
.be4 #onlyR span.cF { left: 84px; bottom: 6px; }
.be2 #onlyR span.cF { display: none; }
.be6 #onlyR span.cF { left: -77px; }
*/

.be0 .onlyC span.cxU, .be2 .onlyC span.cxU,
.be0 .onlyC span.cxD, .be2 .onlyC span.cxD { visibility: hidden; }

/*! veil 17ss7 ------------------------------------------------- */

.veil {
	display: none;
	position: relative;
	left: 0;
	bottom: 0;
	width: 0;
	z-index: 201;
}
ul.wW.hL.V0 + .veil, ul.wW.hX.V0 + .veil,
ul.wW.hL.V1 + .veil, ul.wW.hX.V1 + .veil { display: inline-block; }
ul.swap + .veil { display: none !important; }
#sim > div ul:nth-child(6n) + .veil { z-index:202; }

.veil:before, .veil:after {
	display: block;
	position: absolute;
	box-sizing: border-box;
	content: '';
	height: 4px;
	width: 164px;
	left: 2px;
	background-color: #ccc;
	bottom: 6px; border-right: 1px solid #333;
}
.veil:before { top: 6px; border-top: 1px solid #333; }
.veil:after { bottom: 10px; border-bottom: 1px solid #333; }	

.veil .screen {
	display: none;
	position: absolute;
	top: 10px;
	left:  0px;
	background: radial-gradient(#fffffc,#faf9f7);
	/*background: radial-gradient(#fffffc,#e7e1d4);*/
	box-shadow: 0px -1px 4px #bfbdb8;
	border-left:1px solid #eee;
	border-right:1px solid #eee;
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	opacity: 1;
}
.veil var {
	display: none;
	position: absolute;
	bottom: 3pt;
	left: 128px;
	width: 0px;
	height: 0px;
	background-color: transparent;
	border-bottom: 8px solid #666;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	}
.veil var:before {
	display: block;
	position: absolute;
	top: 8px;
	left: -20px;
	width: 40px;
	content: 'open';
	text-align: center;
	color: white;
	background-color: #666;
	border-radius: 3px;
	/* bug 対策 */
	-webkit-transform-origin: center top;
	-webkit-transform: rotateX(0deg);
	transform-origin: center top;
	transform: rotateX(0deg);
	}
ul.wW.hL.V1 + .veil .screen, ul.wW.hX.V1 + .veil .screen { display: block; }
ul.wW.hL.V1 + .veil var, ul.wW.hX.V1 + .veil var { display: block; }
#sus.suspend .veil var { display:none; }

.wW + .veil { left: -166px; }
.hL + .veil { height: 353px; }
.hX + .veil { height: 426px; }

.wW + .veil .screen { width: 166px; }
.hL + .veil .screen { height: 329px; }
.hX + .veil .screen { height: 402px; }

.veil.slideR .screen, .veil.slideL .screen {
	background: radial-gradient(#fffffc,#faf9f7);
	-webkit-transition: all 0.2s ease 0.2s;
	transition: all 0.2s ease 0.2s;
	opacity: 0.6;
	}

.veil.slideR .screen { left: 56px; }
.veil.slideL .screen { left: -56px; }
.veil.openR .screen { left: 156px; opacity: 1 }
.veil.openL .screen { left: -156px; opacity: 1 }
.veil.openR var:before, .veil.openL var:before { content: 'close'; }


/* ============================================================ */
/* !---------------【 veil 19ss5 】*/
/* ============================================================ */
/*
.veil {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;
	z-index: 201;
}

.hL .veil { height: 353px; }
.hX .veil { height: 426px; }

.wW .veil .screen { width: 166px; }
.hL .veil .screen { height: 334px; }
.hX .veil .screen { height: 407px; }

.veil:before, .veil:after {
	display: block;
	position: absolute;
	box-sizing: border-box;
	content: '';
	height: 4px;
	width: 164px;
	left: 0px;
	background-color: #ccc;
	bottom: 6px; border-right: 1px solid #333;
}
.veil:before { top: 0px; border-top: 1px solid #333; }
.veil:after { bottom: 12px; border-bottom: 1px solid #333; }	

.veil .screen {
	display: none;
	position: absolute;
	top: 5px;
	left: -2px;
	background: radial-gradient(#fffffc,#faf9f7);
	box-shadow: 0px -1px 4px #bfbdb8;
	border-left:1px solid #eee;
	border-right:1px solid #eee;
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	opacity: 1;
}

.wW.hL .veil.V1 .screen, .wW.hX .veil.V1 .screen { display: block; }
.wW.hL .veil.V1 var, .wW.hX .veil.V1 var { display: block; }

#sus > div ul:nth-child(4n+5) .veil { z-index:202; }
#sus > div ul:nth-child(4n+5) {background-color: red;}

*/

/* ============================================================ */
/* !---------------【 luggage 収納用品対応 】*/
/* ============================================================ */

#lugSwitch {
	display: none;
	position: absolute;
	box-sizing: border-box;
	top:0;
	right: 0;
	width: 120px;
	height: 100%;
	padding-top: 8px;
	padding-left: 16px;
	border-top: 2px solid #e6e6e6;
	border-left: 2px solid #e6e6e6;
	background-color: white;
	z-index: 221;
	}
.onLuggage #palette.dD #lugSwitch { display: block; }
.onLuggage #palette.dD ul { padding-right: 130px; }
.onLuggage #palette.dT ul { padding-right: 50px; }

#lugSwitch button {
	padding: 2px 4px;
	background-color: transparent;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0px 0px 5px #aaa;
	}
#lugSwitch button i {
	display: block;
	width: 74px;
	height: 110px;
	text-indent: -1000px;
	background-color: transparent;
	background-image: url(img/btn-cmd.png);
	background-repeat: none;
	background-position: -558px -6px;
	}
.lugMode #lugSwitch button i {
	background-position: -644px -6px;
	}

/* ============================================================
	luggage 2019.04 lug.cssをオーバーライド
   ============================================================ */

#luggage .switcher { display: none; }
#luggage .lugClipper { padding-left: 130px; }
#luggage:before {
	display: block;
	position: absolute;
	width: 130px;
	height: 100%;
	content: "";
	background-color: white;
	border-bottom-left-radius: 0px;
	}

/* ============================================================
	debug
   ============================================================ */