@charset "utf-8";

/* ============================================================
	overwrite volume.css
   ============================================================ */

#bg-family {
	position:absolute;
	top:60px;
	left:50px;
	}

/* ============================================================
	シミュレーター
   ============================================================ */

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

/* control panel ---------------------------------------------- */

#panel {
	position: relative;
	width: 100%;
	height: 140px;
	margin-left: auto;
	margin-right: auto;
	border-top: 2px solid #e6e6e6;
	z-index:40;
	}
#panel > div {
	position: relative;
	}
#switch {
	position: absolute;
	top:0;
	left:0;
	width: 122px;
	border-right: 2px solid #e6e6e6;
	z-index: 60;
	}
#switch button, #switch button:active {
	display: block;
	position: relative;
	width: 124px;
	height: 70px;
	margin-right: -2px;
	padding:0;
	color:#999;
	background-color: transparent;
	}
#switch button span {
	display: block;
	width: 100px;
	height: 50px;
	margin: 0 auto;
	/*padding-right: 4px;*/
	margin-right: 14px;
	background-color: transparent;
	background-repeat: no-repeat;
	}
#bWalnut { border-bottom-left-radius: 0px; }
#bOak span { background-position: -200px -280px; background-image: url(img/sprite.png); }
#bWalnut span { background-position: -200px -338px; background-image: url(img/sprite.png); }

#switch button.active {
	color: #333;
	font-weight: bold;
	background: #e6e6e6 url(img/panel_arrow.png) no-repeat right center;
	border-right: none;
	}

#panel ul {
	display: block;
	position: relative;
	/*width: 766px;*/
	height: 140px;
	margin: 0 auto;
	padding: 0 0 0 144px;
	text-align: center;
	background-color: white;
	border-bottom-left-radius: 0px;
	z-index: 50;
	}
/*#panel ul.active { display: block; }*/
#panel .soldout { /* 2023.12 */
	display: none;
	}

#stock li {
	display: inline-block;
	position: relative;
	margin: 9px 13px 5px 13px;
	}
	
#stock button {
	position: relative;
	vertical-align: bottom;
	background-color: transparent;
	/*background-color: #f0f0f0;*/
	}
#stock button span,
#stock button span i,
#dragballoon i {
	display: block;
	position: relative;
	background-color: transparent;
	background-image: url(img/sprite.png);
	background-repeat:  no-repeat;
	/*background-color: yellow;*/
	}
#stock button span.lb {
	position: absolute;
	left:0;
	bottom: -1.8em;
	width: 100%;
	background-image: none;
	/*background-color: lime;*/
	}
#stock button span i,
#dragballoon i { position:absolute; top:0; width:4px; height:100%; }
#dragballoon i { display: none; }
#dragballoon.anch i { display: block; }
.aL button span i, #dragballoon.aL i { left:-1px; }
.aR button span i, #dragballoon.aR i { right:-1px; }

.bSS, .bSM, .bSX { width: 21px; height: 106px; margin: 0 14px; }
.bWS, .bWM, .bWX { width: 41px; height: 106px; margin: 0 8px; }
.bOX { width: 41px; height: 106px; margin: 0 8px; }
.bTX { width: 62px; height: 106px; margin: 0 4px; }
.bPX { width: 46px; height: 106px; margin: 0 8px; }
.bDX { width: 64px; height: 106px; margin: 0 4px; }
.bOV { width: 38px; height:  19px; margin: 0 8px; }
.bTV { width: 59px; height:  19px; margin: 0 4px 0 8px; }
.bPV { width: 38px; height:  19px; margin: 0 8px; }
.bDV { width: 59px; height:  19px; margin: 0 4px 0 8px; }
.bNM { width: 83px; height: 106px; margin: 0 8px; }
.bCM { width: 114px; height: 106px; margin: 0 4px; }
.bNV { width: 38px; height:  19px; margin: 0 8px; }
.bCV { width: 59px; height:  19px; margin: 0 4px 0 8px; }

#stock button .bQ { width: 41px; height:  41px; margin: 0 4px; background: #ccc; }

#stock button span.sp {
	height:60px;
	background-image: none;
	}

.Oak .Oak.dead { visibility: hidden; }
.Walnut .Oak.dead { visibility: hidden; }
/*.aL .Walnut .lb { visibility: hidden; }*/

.aL .Oak .bSS { background-position: -340px 0px; } .aL .Oak .bSS i { background-position: -317px 0px; }
.aL .Oak .bSM { background-position: -385px 0px; } .aL .Oak .bSM i { background-position: -362px 0px; }
.aL .Oak .bSX { background-position: -430px 0px; } .aL .Oak .bSX i { background-position: -407px 0px; }
.aL .Oak .bWS { background-position: -320px 0px; } .aL .Oak .bWS i { background-position: -317px 0px; }
.aL .Oak .bWM { background-position: -365px 0px; } .aL .Oak .bWM i { background-position: -362px 0px; }
.aL .Oak .bWX { background-position: -410px 0px; } .aL .Oak .bWX i { background-position: -407px 0px; }

.aL .Oak .bOX { background-position: -476px 0px; }
.aL .Oak .bTX { background-position: -455px 0px; }
.aL .Oak .bPX { background-position: -6px -402px; }
.aL .Oak .bDX { background-position: -54px -402px; }
.aL .Oak .bNM { background-position: -373px -379px; }
.aL .Oak .bCM { background-position: -471px -379px; }

.aR .Oak .bSS,
.aR .Oak .bWS { background-position: -317px 0px; } .aR .Oak .bSS i, .aR .Oak .bWS i { background-position: -357px 0px; }
.aR .Oak .bSM,
.aR .Oak .bWM { background-position: -362px 0px; } .aR .Oak .bSM i, .aR .Oak .bWM i { background-position: -402px 0px; }
.aR .Oak .bSX,
.aR .Oak .bWX { background-position: -407px 0px; } .aR .Oak .bSX i, .aR .Oak .bWX i { background-position: -447px 0px; }

.aR .Oak .bOX,
.aR .Oak .bTX { background-position: -452px 0px; } 
.aR .Oak .bPX { background-position: -6px -402px; } 
.aR .Oak .bDX { background-position: -54px -402px; }
.aR .Oak .bNM { background-position: -365px -430px; } 
.aR .Oak .bCM { background-position: -460px -430px; }

.Oak .bOV { background-position: -476px -87px; }
.Oak .bTV { background-position: -455px -87px; }
.Oak .bPV { background-position: -476px -87px; }
.Oak .bDV { background-position: -455px -87px; }
.Oak .bNV { background-position: -476px -87px; }
.Oak .bCV { background-position: -455px -87px; }

.aL .Walnut .bSS { background-position: -340px -107px } .aL .Walnut .bSS i { background-position: -317px -107px; }
.aL .Walnut .bSM { background-position: -385px -107px } .aL .Walnut .bSM i { background-position: -362px -107px; }
.aL .Walnut .bSX { background-position: -430px -107px } .aL .Walnut .bSX i { background-position: -407px -107px; }
.aL .Walnut .bWS { background-position: -320px -107px } .aL .Walnut .bWS i { background-position: -317px -107px; }
.aL .Walnut .bWM { background-position: -365px -107px } .aL .Walnut .bWM i { background-position: -362px -107px; }
.aL .Walnut .bWX { background-position: -410px -107px } .aL .Walnut .bWX i { background-position: -407px -107px; }

.aL .Walnut .bOX { background-position: -476px -107px }
.aL .Walnut .bTX { background-position: -455px -107px }
.aL .Walnut .bPX { background-position: -6px -513px }
.aL .Walnut .bDX { background-position: -54px -514px }
.aL .Walnut .bNM { background-position: -365px -399px; }
.aL .Walnut .bCM { background-position: -460px -399px; }

.aR .Walnut .bSS,
.aR .Walnut .bWS { background-position: -317px -107px } .aR .Walnut .bSS i, .aR .Walnut .bWS i { background-position: -357px -107px; }
.aR .Walnut .bSM,
.aR .Walnut .bWM { background-position: -362px -107px } .aR .Walnut .bSM i, .aR .Walnut .bWM i { background-position: -402px -107px; }
.aR .Walnut .bSX,
.aR .Walnut .bWX { background-position: -407px -107px } .aR .Walnut .bSX i, .aR .Walnut .bWX i { background-position: -447px -107px; }

.aR .Walnut .bOX,
.aR .Walnut .bTX { background-position: -452px -107px }
.aR .Walnut .bPX { background-position: -6px -513px }
.aR .Walnut .bDX { background-position: -54px -514px }
.aR .Walnut .bNM { background-position: -365px -430px; }
.aR .Walnut .bCM { background-position: -460px -430px; }

.Walnut .bOV { background-position: -476px -194px; }
.Walnut .bTV { background-position: -455px -194px; }
.Walnut .bPV { background-position: -476px -194px; }
.Walnut .bDV { background-position: -455px -194px; }
.Walnut .bNV { background-position: -476px -194px; }
.Walnut .bCV { background-position: -455px -194px; }

#dragballoon .bOV, #dragballoon .bTV , #dragballoon .bPV , #dragballoon .bDV  , #dragballoon .bNV , #dragballoon .bCV { margin-top:54px; }

.Walnut .Oak.wdead { visibility: hidden; display: none !important;}
.Oak .Oak.all { visibility: hidden; display: none !important;}
.Walnut .Oak.all { visibility: hidden; display: none !important;}

/* luggage：収納用品対応 -------------------------------------- */


.onLuggage #panel {
	box-sizing: border-box;
	padding-right: 120px;
	}

.onLuggage #stock li {
	margin: 9px 10px 5px 10px;
	}

#lugSwitch {
	display: none;
	position: absolute;
	bottom:0;
	right: 0;
	width: 120px;
	height: 138px;
	border-left: 2px solid #e6e6e6;
	z-index: 210;
	}
.onLuggage #lugSwitch {
	display: block;
	}
#lugSwitch button {
	position: relative;
	top: 10px;
	left: 10px;
	background-color: transparent;
	}
#lugSwitch span {
	display: none;
	box-sizing: border-box;
	width: 87px;
	height: 122px;
	text-align: center;
	background: transparent url(img/sprite.png) no-repeat;
	}
#lugSwitch span.lug { background-position: -562px 0px; }
#lugSwitch span.shelf { background-position: -562px -123px; }
#lugSwitch .Off span.lug { display: block; }
#lugSwitch .On span.shelf { display: block; }

#planpreview .lug {
	position: absolute;
	top:0;
	left:0;
	}


/* partition at landscape mode -------------------------------- */

#dragballoon .bP { width: 44px; height: 94px; margin: 12px 21px 0; }
#dragballoon .Oak .bP { background: url(img/sprite.png) no-repeat -517px 0; }
#dragballoon .Walnut .bP { background: url(img/sprite.png) no-repeat -517px -107px; }

#waitWrap {
	display: none;
	}
.landscape #waitWrap {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 70;
	}
#waitWrap div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	filter: alpha(opacity=80);
	opacity: 0.8;
	background-color: white;
	}
#waitWrap p {
	position: relative;
	margin-top: 45px;
	text-align: center;
	line-height: 170%;
	z-index: 80;
	}
#waitWrap span {
	padding: 8px;
	color: #333;
	/*font-weight: bold;*/
	background-color: white;
	}

/* 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 0 0;
	background-color: transparent;
	background-image: url(img/sprite.png);
	background-repeat: no-repeat;
	vertical-align: top;
	}
#commander .rotate, #commander .help { margin-top: 30px; }
.msie #commander button { margin-top: 6px; }
.msie #commander .rotate, .msie #commander .help { margin-top: 30px; }

#commander .save { background-position: -10px -244px; }
#commander .print { background-position: -60px -244px; }
#commander .flip { background-position: -110px -244px; }
#commander .undo { background-position: -10px -294px; visibility: hidden; display: none; }
#commander .redo { background-position: -10px -344px; visibility: hidden; display: none; }
#commander .help { background-position: -60px -294px; }
#commander .review { background-position: -60px -344px; }

/*#commander .rotate { background-position: -10px -244px; }*/
#commander .rotate { background-position: -10px -294px; }
.landscape #commander .rotate { background-position: -10px -344px; }

/* remover ---------------------------------------------------- */

#remover {
	display: none;
	position: absolute;
	right: 40px;
	bottom: 16px;
	z-index: 30;
	}
.landscape #remover { display: block; }

#remover.over {
	border-color: #666;
	}
#remover .keeper {
	position: relative;
	min-width: 98px;
	}	
#remover p {
	margin-bottom: 8px;
	}
#remover button {
	margin-right: 10px;
	background: none;
	}
#remover button span {
	display: block;
	width: 44px;
	height: 94px;
	}
#remover span.ObP {
	background: url(img/sprite.png) no-repeat -517px 0;
	}
#remover span.WbP {
	background: url(img/sprite.png) no-repeat -517px -107px;
	}
#remover span.lb {
	display: block;
	position: absolute;
	bottom: 30px;
	right: 0;
	min-width: 38px;
	padding: 3px 5px;
	text-align: right;
	background-color: #ccc;
	}
#remover span.lb var {
	font-size: large;
	font-weight: bold;
	}

/* stacking shelf --------------------------------------------- */

#pile {
	display: inline-block;
	position: relative;
	width: 0;
	height: 469px; /* 2020.03 adjust */
	vertical-align: bottom;
	}
#ssf {
	display: inline-block;
	position: relative;
	width: auto;
	margin: 0 auto;
	vertical-align: bottom;
	white-space: nowrap;
	}

#ssf.aL { margin-left:50px; margin-right:-50px; }
#ssf.aR { margin-left:20px; margin-right:-20px; }

#ssf * {cursor: pointer;}

.infill {
	display: inline-block;
	position: relative;
	vertical-align: bottom;
	margin: 0;
	padding: 0;
	line-height: 100%;
	}

.ladder {
	position: absolute;
	width: 10px;
	bottom:0;
	z-index: 200;
	}

#ssf ul.locating {
	background: rgba(0,0,0,0.1);
	}
#ssf ul.locating * {
	display: none;
	}
/*#ssf div.locating button { display:none; }*/
/*
#ssf .wedge {
	display:block;
	position:absolute;
	bottom:94%;
	left:50%;
	padding: 8px;
	font-size:10px;
	line-height: 120%;
	border: 1px solid #ccc;
	z-index:300;
	background-color: white;
	
	filter: alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#ssf.aL .wedge { margin-left: -70px; }
#ssf.aR .wedge { margin-left: -90px; }
#ssf .wedge.show {
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}
*/

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

/*
.ladder { z-index: 200; margin-left: -5px; margin-right: -5px; }
.infill { z-index: 50; }
*/

.aL .ladder { right:-5px }
.aL #right-end .ladder { display: none; }
.aR .ladder { left:-5px }
.aR #left-end .ladder { display: none; }

.ladder span, .slot {
	display: block;
	position: relative;
	width: 100%;
	background: transparent url(img/sprite.png) no-repeat;
	}
.ladder .top { height: 163px; z-index: 198; margin-bottom: -6px; }
.ladder .mid { height:  85px; z-index: 196; margin-bottom: -10px; }
.ladder .btm { height: 168px; z-index: 194; }
/* オーク材 */
.mO .top { background-position: -10px -10px; }
.mO .mid { background-position: -20px -88px; }
.mO .btm { background-position: -30px  -5px; }
/* ウォールナット材 */
.mW .top { background-position: -40px -10px; }
.mW .mid { background-position: -50px -88px; }
.mW .btm { background-position: -60px  -5px; }

.hM .top, .hS .top, .hS .mid { display: none; }

.mid.cat { display: none; }
.btm.cat { height: 93px; }


#left-end, #right-end {
	width: 30px; /* 暫定 */
	}

/* infill */

#ssf .wS { width: 79px }
#ssf .wW { width: 158px }
#ssf .wO { width: 158px } /* オープンタイプ2列 */
#ssf .wT { width: 237px } /* オープンタイプ3列 */

#ssf .wP { width: 158px } /* オープンタイプ2列 */
#ssf .wD { width: 237px } /* オープンタイプ3列 */

#ssf .wN { width: 237px } /* オープンタイプ2列 */
#ssf .wC { width: 400px } /* オープンタイプ3列 */

#dmark.hU { height: 71px }
#ssf .infill.hS, #dmark.hS { height: 163px }
#ssf .infill.hM, #dmark.hM { height: 242px }
#ssf .infill.hX, #dmark.hX { height: 400px }
/*#ssf .ladder { height:400px; }*/

.left-end, .right-end { width: 30px; }

/* unit */

.infill .unit {
	position: relative;
	height: 79px;
	width: 100%;
	}
/*
.infill .mk {
	background :transparent url(img/kihon.gif) no-repeat center 40%;
	}
*/

#ssf .wO .unit { width: 158px; }
#ssf .wT .unit { width: 237px; }
#ssf .wP .unit { width: 158px; }
#ssf .wD .unit { width: 237px; }
#ssf .wN .unit { width: 237px; }
#ssf .wC .unit { width: 400px; }
#ssf .row4.empty { height: 79px; }
#ssf .row3.empty { height: 158px; }
#ssf .row2.empty { height: 237px; }
#ssf .row2.desk { height: 34px; }
#ssf .row1.desk { height: 0px; }

#ssf .row1.deskguard { height: 60px; }

#ssf .row5.cat { height: 0px; }
#ssf .row4.cat { height: 0px; }
#ssf .row3.cat { height: 79px; }
#ssf .row2.cat { height: 79px; }
#ssf .row1.cat { height: 79px; }

.row5 { z-index:115; }
.row4 { z-index:125; }
.row3 { z-index:130; }
.row2 { z-index:120; }
.row1 { z-index:110; }
.row0 { z-index:100; }

.infill .rowT { height: 5px; }
.infill .slot { position: absolute; left:0; z-index:100; }
.infill .cargo { position: relative; width:100%; height: 100%; left:2px; text-align:left; overflow: hidden; z-index:105; }
.rowT .slot { height: 16px; bottom: -11px; }
.row5 .slot { height: 12px; bottom: -7px; }
.hM .rowT .slot,
.row4 .slot { height:  5px; bottom: -1px; }
.hS .rowT .slot,
.row3 .slot { height: 12px; bottom: 0px; }
.row2 .slot { height: 12px; bottom: 0px; }
.row1 .slot { height: 16px; bottom: 0px; }

.hM .row5, .hM .row4 { display:none; }
.hS .row5, .hS .row4, .hS .row3 { display:none; }

.cargo .lot { position: absolute; bottom: 4px; }
.aH .cargo .lot { bottom: 0px; }
.cargo .col0 { left: 0px; }
.cargo .col1 { left: 79px; }
.cargo .col2 { left: 158px; }
.cargo .col3 { left: 237px; }
.cargo .col4 { left: 316px; }

/* オーク材 */
.mO .rowT .slot { background-position: -75px -10px; }
.mO .row5 .slot { background-position: -75px -26px; }
.mO.hM .rowT .slot,
.mO .row4 .slot { background-position: -75px -38px; }
.mO.hS .rowT .slot,
.mO .row3 .slot { background-position: -75px -43px; }
.mO .row2 .slot { background-position: -75px -67px; }
.mO .row1 .slot { background-position: -75px -91px; }
.mO .row2.mW .slot { background-position: -75px -164px; }
.mO .row1.mW .slot { background-position: -75px -188px; }
/* ウォールナット材 */
.mW .rowT .slot { background-position: -75px -107px; }
.mW .row5 .slot { background-position: -75px -123px; }
.mW.hM .rowT .slot,
.mW .row4 .slot { background-position: -75px -135px; }
.mW.hS .rowT .slot,
.mW .row3 .slot { background-position: -75px -140px; }
.mW .row2 .slot { background-position: -75px -164px; left: -2px;}
.mW .row1 .slot { background-position: -75px -188px; }
.mW .row2.mO .slot { background-position: -75px -67px; }
.mW .row1.mO .slot { background-position: -75px -91px; }

/* オープン型追加棚の仮挿入 */
#ssf .alter1 .row3.empty,
#ssf .alter2 .row3.empty { height: 79px; }
#ssf .alter1 .row2.empty,
#ssf .alter2 .row2.empty { height: 158px; }
#ssf .mO.alter1 .row3 .slot,
#ssf .mO.alter2 .row3 .slot { background-position: -75px -38px; height: 5px; bottom: -1px; }
#ssf .mW.alter1 .row3 .slot,
#ssf .mW.alter2 .row3 .slot { background-position: -75px -135px; height: 5px; bottom: -1px; }
#ssf .alter2 .row2 { margin-bottom: 79px; }
#ssf .mO.alter1 .row2 .slot,
#ssf .mO.alter2 .row2 .slot { background-position: -75px -43px; }
#ssf .mW.alter1 .row2 .slot,
#ssf .mW.alter2 .row2 .slot { background-position: -75px -140px; }
#ssf .mO.alter1 .row2.mW .slot,
#ssf .mO.alter2 .row2.mW .slot { background-position: -75px -140px; }
#ssf .mW.alter1 .row2.mO .slot,
#ssf .mW.alter2 .row2.mO .slot { background-position: -75px -43px; }
#ssf .mO.alter1 .row1 .slot { background-position: -75px -67px; height: 12px; }
#ssf .mW.alter1 .row1 .slot { background-position: -75px -164px; height: 12px; }
#ssf .mO.alter1 .row1.mW .slot { background-position: -75px -164px; height: 12px; }
#ssf .mW.alter1 .row1.mO .slot { background-position: -75px -67px; height: 12px; }

/* オープン型の仕切り板 */

.slot i,
.slot .spl {
	display: block;
	position: absolute;
	width:10px;
	height: 75px;
	left:74px;
	border: none;
	margin: 0;
	padding: 0;
	
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	
	background: transparent url(img/sprite.png) no-repeat;
	}
.slot i + i, .slot .spl + .spl { left:153px; }
.wO .slot i + i, .wO .slot .spl + .spl { display:none; }
.wP .slot i + i, .wP .slot .spl + .spl { display:none; }

.unit.mO.desk .slot i  { left:2px; }
.unit.mO.desk .slot i + i { left: 155px; }

.unit.mW.desk .slot i  { left:2.5px; }
.unit.mW.desk .slot i + i { left: 155px; }

.row5 .slot i, .row5 .slot .spl { bottom:11px; }
.row3 .slot i, .row3 .slot .spl { bottom:4px; }
.row2 .slot i, .row2 .slot .spl { bottom:5px; }
.row1 .slot i, .row1 .slot .spl { bottom:5px; }

.mO .slot i,
.unit.mO .slot i { background-position: -30px  -20px; }
.unit.mO.desk .slot i { width: 154px; height: 31px; background-position: -125px -401px; }
.unit.mO.desk .slot i + i { width: 83px; height: 31px; background-position: -278px -401px; }

.mO .row1.deskguard .slot { bottom: 13px; left:2px; height: 48px; background-position: -125px -488px; }

.mW .slot i,
.unit.mW .slot i { background-position: -60px  -20px; }

.unit.mW.desk .slot i { width: 156px; height: 31px; background-position: -125px -444px; }
.unit.mW.desk .slot i + i { width: 83px; height: 31px; background-position: -278px -444px; }

.mW .row1.deskguard .slot { bottom: 13px; left:2px; height: 48px; background-position: -125px -542px; }

/*
.tryM .rowT, .tryM .row5, .tryM .top { opacity: 0.2 }
.tryS .rowT, .tryS .row5, .tryS .row4, .tryS .top, .tryS .mid { opacity: 0.2 }
*/

/* 猫 */
.mO .rowT.mO.cat.small .slot { width:83px; background-position: -75px -735px; }
.mO .row3.cat.small .slot { width:162px; background-position: -75px -700px; }
.mO .rowT.mO.cat .slot { width:162px; background-position: -75px -735px; }
.mO .row3.cat .slot { width:241px; background-position: -75px -700px; }
.mO .row2.cat .slot { background-position: -75px -699px; }
.mO .row1.cat .slot { background-position: -75px -725px; }

.aR .mO .rowT.mO.cat.small .slot { left: 155px; }
.aR .mO .row3.cat.small .slot { left: 77px; }
.aR .mO .rowT.mO.cat .slot { left: 239px; }
.aR .mO .row3.cat .slot { left: 158px; }

.mW .rowT.mW.cat.small .slot { width:83px; background-position: -75px -775px; }
.mW .row3.cat.small .slot { width:162px; background-position: -75px -774px; }
.mW .rowT.mW.cat .slot { width:162px; background-position: -75px -775px; }
.mW .row3.cat .slot { width:241px; background-position: -75px -774px; }
.mW .row2.cat .slot { background-position: -75px -797px; }
.mW .row1.cat .slot { background-position: -75px -821px; }
.aL .unit.mO.cat .slot i  { left:74px; }
.aL .unit.mO.cat .slot i + i { left: 153px; }
.aL .unit.mO.cat .slot i + i + i { left: 232px; }
.aL .unit.mO.cat .slot i + i + i + i  { left: 311px; }
.aL .unit.mO.cat .slot i + i + i + i + i { left: 390px; }
.aL .unit.mO.cat .slot i + i + i + i + i + i { left: 469px; }

.aR .unit.mO.cat.row2 .slot i  { left:311px; }
.aR .unit.mO.cat.row2 .slot i + i { left: 232px; }
.aR .unit.mO.cat.row2 .slot i + i + i { left: 153px; }
.aR .unit.mO.cat.row1 .slot i  { left:311px; }
.aR .unit.mO.cat.row1 .slot i + i { left: 232px; }
.aR .unit.mO.cat.row1 .slot i + i + i { left: 153px; }
.aR .unit.mO.cat.row1 .slot i + i + i + i { left: 74px; }

.aR .wN .unit.mO.cat.row2 .slot i  { left:153px; }
.aR .wN .unit.mO.cat.row2 .slot i + i { left: 74px; }
.aR .wN .unit.mO.cat.row1 .slot i  { left:153px; }
.aR .wN .unit.mO.cat.row1 .slot i + i { left: 74px; }

.unit.mW.cat .slot i  { left:74px; }
.unit.mW.cat .slot i + i { left: 153px; }
.unit.mW.cat .slot i + i + i { left: 232px; }
.unit.mW.cat .slot i + i+ i + i  { left: 311px; }
.unit.mW.cat .slot i + i+ i + i + i { left: 390px; }
.unit.mW.cat .slot i + i + i + i + i + i { left: 469px; }

.wN .row1.cat .slot  i + i + i,
.wN .row1.cat .slot  i + i + i + i, 
.wN .row2.cat .slot i + i + i, 
.wN .row3.cat .slot i + i { display:none; }

.unit.mO.cat .slot i { background-position: -18px -92px; }
.unit.mO.cat .slot i + i { background-position: -18px -92px; }
.unit.mO.cat .slot i + i + i { background-position: -18px -92px;  }
.unit.mO.cat .slot i + i + i + i { background-position: -18px -92px; }
 
.infill .arrow.cat.wC { position: absolute; width: 395px; height: 240px; bottom: 0; z-index: 200; }
.infill .arrow.cat.wN { position: absolute; width: 237px; height: 240px; bottom: 0; z-index: 200; }

.mO .arrow.cat.wC .slot.ud i { width: 36px; height: 52px; background-position: -546px -280px; }
.mO .arrow.cat.wC .slot.lr i { width: 52px; height: 36px; background-position: -589px -288px; }

.mO .arrow.cat.wC .slot.ud i { top: -25px; left: 25px; }
.mO .arrow.cat.wC .slot.ud i + i { top: 49px; left: 108px; }
.mO .arrow.cat.wC .slot.lr i { top: 20px; left: 57px; }
.mO .arrow.cat.wC .slot.lr i + i { top: 20px; left: 135px; }
.mO .arrow.cat.wC .slot.lr i + i + i { top: 96px; left: 57px; }
.mO .arrow.cat.wC .slot.lr i + i + i + i { top: 96px; left: 135px; }
.mO .arrow.cat.wC .slot.lr i + i + i + i + i { top: 96px; left: 215px; }
.mO .arrow.cat.wC .slot.lr i + i + i + i + i + i { top: 173px; left: 293px; }
.mO .arrow.cat.wC .slot.lr i + i + i + i + i + i + i { top: 173px; left: 373px; }

.aR .mO .arrow.cat.wC .slot.ud i { top: -25px; left: 344px; }
.aR .mO .arrow.cat.wC .slot.ud i + i { top: 49px; left: 268px; }
.aR .mO .arrow.cat.wC .slot.lr i { top: 20px; left: 212px; }
.aR .mO .arrow.cat.wC .slot.lr i + i { top: 20px; left: 291px; }
.aR .mO .arrow.cat.wC .slot.lr i + i + i { top: 96px; left: 135px; }
.aR .mO .arrow.cat.wC .slot.lr i + i + i + i { top: 96px; left: 215px; }
.aR .mO .arrow.cat.wC .slot.lr i + i + i + i + i { top: 96px; left: 293px; }
.aR .mO .arrow.cat.wC .slot.lr i + i + i + i + i + i { top: 173px; left: -28px; }
.aR .mO .arrow.cat.wC .slot.lr i + i + i + i + i + i + i { top: 173px; left: 54px; }

.aR .mO .arrow.cat.wN .slot.ud i { top: 50px; left: 182px; }
.aR .mO .arrow.cat.wN .slot.ud i + i { top: 130px; left: 107px; }
.aR .mO .arrow.cat.wN .slot.lr i { top: 18px; left: 130px; }
.aR .mO .arrow.cat.wN .slot.lr i + i { top: 96px; left: 134px; }
.aR .mO .arrow.cat.wN .slot.lr i + i + i { top: 96px; left: 54px; }
.aR .mO .arrow.cat.wN .slot.lr i + i + i + i { top: 173px; left: -27px; }
.aR .mO .arrow.cat.wN .slot.lr i + i + i + i + i { top: 173px; left: 54px; }

.mO .arrow.cat.wN .slot.ud i { width: 36px; height: 52px; background-position: -543px -282px; }
.mO .arrow.cat.wN .slot.lr i { width: 52px; height: 36px; background-position: -587px -289px; }

.mO .arrow.cat.wN .slot.ud i { top: 50px; left: 25px; }
.mO .arrow.cat.wN .slot.ud i + i { top: 126px; left: 108px; }
.mO .arrow.cat.wN .slot.lr i { top: 18px; left: 57px; }
.mO .arrow.cat.wN .slot.lr i + i { top: 96px; left: 134px; }
.mO .arrow.cat.wN .slot.lr i + i + i { top: 96px; left: 54px; }
.mO .arrow.cat.wN .slot.lr i + i + i + i { top: 173px; left: 135px; }
.mO .arrow.cat.wN .slot.lr i + i + i + i + i { top: 173px; left: 210px; }

.unit.mW.cat .slot i { background-position: -50px -92px; }
.unit.mW.cat .slot i + i { background-position: -50px -92px; }
.unit.mW.cat .slot i + i + i { background-position: -50px -92px;  }
.unit.mW.cat .slot i + i + i + i { background-position: -50px -92px; }
 
.mW .arrow.cat.wC .slot.ud i { width: 36px; height: 52px; background-position: -374px -370px; }
.mW .arrow.cat.wC .slot.lr i { width: 52px; height: 36px; background-position: -588px -288px; }

.mW .arrow.cat.wC .slot.ud i { top: -25px; left: 25px; }
.mW .arrow.cat.wC .slot.ud i + i { top: 49px; left: 108px; }
.mW .arrow.cat.wC .slot.lr i { top: 20px; left: 57px; }
.mW .arrow.cat.wC .slot.lr i + i { top: 20px; left: 135px; }
.mW .arrow.cat.wC .slot.lr i + i + i { top: 96px; left: 57px; }
.mW .arrow.cat.wC .slot.lr i + i + i + i { top: 96px; left: 135px; }
.mW .arrow.cat.wC .slot.lr i + i + i + i + i { top: 96px; left: 215px; }
.mW .arrow.cat.wC .slot.lr i + i + i + i + i + i { top: 173px; left: 293px; }
.mW .arrow.cat.wC .slot.lr i + i + i + i + i + i + i { top: 173px; left: 373px; }

.aR .mW .arrow.cat.wC .slot.ud i { top: -25px; left: 344px; }
.aR .mW .arrow.cat.wC .slot.ud i + i { top: 49px; left: 268px; }
.aR .mW .arrow.cat.wC .slot.lr i { top: 20px; left: 212px; }
.aR .mW .arrow.cat.wC .slot.lr i + i { top: 20px; left: 291px; }
.aR .mW .arrow.cat.wC .slot.lr i + i + i { top: 96px; left: 135px; }
.aR .mW .arrow.cat.wC .slot.lr i + i + i + i { top: 96px; left: 215px; }
.aR .mW .arrow.cat.wC .slot.lr i + i + i + i + i { top: 96px; left: 293px; }
.aR .mW .arrow.cat.wC .slot.lr i + i + i + i + i + i { top: 173px; left: -28px; }
.aR .mW .arrow.cat.wC .slot.lr i + i + i + i + i + i + i { top: 173px; left: 54px; }

.aR .mW .arrow.cat.wN .slot.ud i { top: 50px; left: 182px; }
.aR .mW .arrow.cat.wN .slot.ud i + i { top: 130px; left: 107px; }
.aR .mW .arrow.cat.wN .slot.lr i { top: 18px; left: 130px; }
.aR .mW .arrow.cat.wN .slot.lr i + i { top: 96px; left: 134px; }
.aR .mW .arrow.cat.wN .slot.lr i + i + i { top: 96px; left: 54px; }
.aR .mW .arrow.cat.wN .slot.lr i + i + i + i { top: 173px; left: -27px; }
.aR .mW .arrow.cat.wN .slot.lr i + i + i + i + i { top: 173px; left: 54px; }

.mW .arrow.cat.wN .slot.ud i { width: 36px; height: 52px; background-position: -543px -282px; }
.mW .arrow.cat.wN .slot.lr i { width: 52px; height: 36px; background-position: -587px -289px; }

.mW .arrow.cat.wN .slot.ud i { top: 50px; left: 25px; }
.mW .arrow.cat.wN .slot.ud i + i { top: 126px; left: 108px; }
.mW .arrow.cat.wN .slot.lr i { top: 18px; left: 57px; }
.mW .arrow.cat.wN .slot.lr i + i { top: 96px; left: 134px; }
.mW .arrow.cat.wN .slot.lr i + i + i { top: 96px; left: 54px; }
.mW .arrow.cat.wN .slot.lr i + i + i + i { top: 173px; left: 135px; }
.mW .arrow.cat.wN .slot.lr i + i + i + i + i { top: 173px; left: 210px; }

.infill .arrow.cat.wN { position: absolute; width: 237px; height: 240px; bottom: 0; z-index: 200; }
.mW .arrow.cat.wN .slot.ud i { width: 36px; height: 52px; background-position: -374px -370px; }
.mW .arrow.cat.wN .slot.lr i { width: 52px; height: 36px; background-position: -413px -378px; }
.mW .arrow.cat.wN .slot.ud i { top: 50px; left: 25px; }
.mW .arrow.cat.wN .slot.ud i + i { top: 126px; left: 108px; }
.mW .arrow.cat.wN .slot.lr i { top: 20px; left: 57px; }
.mW .arrow.cat.wN .slot.lr i + i { top: 96px; left: 57px; }
.mW .arrow.cat.wN .slot.lr i + i + i { top: 96px; left: 135px; }
.mW .arrow.cat.wN .slot.lr i + i + i + i { top: 173px; left: 135px; }
.mW .arrow.cat.wN .slot.lr i + i + i + i + i { top: 173px; left: 210px; }

.aR .mW .arrow.cat.wN .slot.ud i { top: 50px; left: 25px; }
.aR .mW .arrow.cat.wN .slot.ud i + i { top: 126px; left: 108px; }
.aR .mW .arrow.cat.wN .slot.lr i { top: 20px; left: 57px; }
.aR .mW .arrow.cat.wN .slot.lr i + i { top: 96px; left: 57px; }
.aR .mW .arrow.cat.wN .slot.lr i + i + i { top: 96px; left: 135px; }
.aR .mW .arrow.cat.wN .slot.lr i + i + i + i { top: 173px; left: 135px; }
.aR .mW .arrow.cat.wN .slot.lr i + i + i + i + i { top: 173px; left: 210px; }

.mO .arrow.cat.wN .slot  i + i + i + i + i + i ,
.mO .arrow.cat.wN .slot  i + i + i + i + i + i + i,
.wN .arrow.cat.wN .slot  i + i + i + i + i + i ,
.wN .arrow.cat.wN .slot  i + i + i + i + i + i + i { display:none; }

/* hook */
.infill .hook.desk { position: absolute; width: 237px; height: 400px; bottom: 0; z-index: 200; }
.infill .hook.desk.wP { position: absolute; width: 158px; height: 400px; bottom: 0; z-index: 200; }
.mO .hook.desk .slot i { width: 24px; height: 24px; background-position: -542px -250px;}
.mO .hook.desk.wD .slot i { top: -20px; left: -9px; }
.mO .hook.desk.wD .slot i + i { top: -20px; left: 226px; }
.mO .hook.desk.wP .slot i { top: -20px; left: -9px; }
.mO .hook.desk.wP .slot i + i { top: -20px; left: 147px; display: block;}

.infill .hook.desk { position: absolute; width: 237px; height: 400px; bottom: 0; z-index: 200; }
.infill .hook.desk.wP { position: absolute; width: 158px; height: 400px; bottom: 0; z-index: 200; }
.mW .hook.desk .slot i { width: 24px; height: 24px; background-position: -542px -250px;}
.mW .hook.desk.wD .slot i { top: -20px; left: -9px; }
.mW .hook.desk.wD .slot i + i { top: -20px; left: 226px; }
.mW .hook.desk.wP .slot i { top: -20px; left: -9px; }
.mW .hook.desk.wP .slot i + i { top: -20px; left: 147px; display: block;}

.infill .hook.cat { position: absolute; width: 395px; height: 240px; bottom: 0; z-index: 200; }
.infill .hook.cat.wN { position: absolute; width: 237px; height: 240px; bottom: 0; z-index: 200; }
.mO .hook.cat .slot i { width: 24px; height: 24px; background-position: -542px -250px;}
.mO .hook.cat.wC .slot i { top: -26px; left: -9px; }
.mO .hook.cat.wC .slot i + i { top: -26px; left: 70px; }
.mO .hook.cat.wC .slot i + i + i { top: -26px; left: 148px; }
.mO .hook.cat.wC .slot i + i + i + i { top: 49px; left: 226px; }
.mO .hook.cat.wC .slot i + i + i + i + i { top: 130px; left: 306px; }
.mO .hook.cat.wC .slot i + i + i + i + i + i { top: 130px; left: 386px; }
.mO .hook.cat.wN .slot i { top: -26px; left: -9px; }
.mO .hook.cat.wN .slot i + i { top: -26px; left: 70px; }
.mO .hook.cat.wN .slot i + i + i { top: 49px; left: 150px; }
.mO .hook.cat.wN .slot i + i + i + i { top: 130px; left: 226px; }

.aR .mO .hook.cat.wC .slot i { top: -26px; left: 387px; }
.aR .mO .hook.cat.wC .slot i + i { top: -26px; left: 306px; }
.aR .mO .hook.cat.wC .slot i + i + i { top: -26px; left: 227px; }
.aR .mO .hook.cat.wC .slot i + i + i + i { top: 49px; left: 149px; }
.aR .mO .hook.cat.wC .slot i + i + i + i + i { top: 130px; left: 70px; }
.aR .mO .hook.cat.wC .slot i + i + i + i + i + i { top: 130px; left: -11px; }
.aR .mO .hook.cat.wN .slot i { top: -26px; left: 224px; }
.aR .mO .hook.cat.wN .slot i + i { top: -26px; left: 145px; }
.aR .mO .hook.cat.wN .slot i + i + i { top: 49px; left: 68px; }
.aR .mO .hook.cat.wN .slot i + i + i + i { top: 130px; left: -10px; }

.wN .hook.cat .slot i { width: 24px; height: 24px; background-position: -542px -250px;}
.wN .hook.cat.wC .slot i { top: -26px; left: -9px; }
.wN .hook.cat.wC .slot i + i { top: -26px; left: 70px; }
.wN .hook.cat.wC .slot i + i + i { top: -26px; left: 148px; }
.wN .hook.cat.wC .slot i + i + i + i { top: 49px; left: 226px; }
.wN .hook.cat.wC .slot i + i + i + i + i { top: 130px; left: 306px; }
.wN .hook.cat.wC .slot i + i + i + i + i + i { top: 130px; left: 386px; }
.wN .hook.cat.wN .slot i { top: -26px; left: -9px; }
.wN .hook.cat.wN .slot i + i { top: -26px; left: 70px; }
.wN .hook.cat.wN .slot i + i + i { top: 49px; left: 150px; }
.wN .hook.cat.wN .slot i + i + i + i { top: 130px; left: 226px; }


.mO .hook.cat.wN .slot  i + i + i + i + i ,
.mO .hook.cat.wN .slot  i + i + i + i + i + i,
.wN .hook.cat.wN .slot  i + i + i + i + i ,
.wN .hook.cat.wN .slot  i + i + i + i + i + i { display:none; }

/* landscape 2013.06.27 -------------------------------------- */

#ssf.aH * {
	/*cursor: default;*/
	margin-top: 0;
	}

#ssf.aH.aL { padding-left:24px; margin-left:0px; margin-right:0px; text-align: right; }
#ssf.aH.aR { padding-right:24px; margin-left:0px; margin-right:0px; text-align: left; }

.aH .infill {
	display: block;
	z-index: 200;
	}

.aH .ladder {
	display: block;
	position: relative;
	bottom: auto;
	right: auto;
	z-index: 100;
	}
#ssf.aH .wS { width: 158px; }
.aH .wM { width: 237px; }
.aH .wX { width: 395px; } /* 395 */
.aH .ladder.wX { width: 397px; } /* 395 */

.aH .infill, .aH .ladder { margin-left: 8px; margin-right: 8px; }

.aH .infill.row5 { height:75px; margin-bottom: -1px; }
.aH .infill.row4 { height:75px; margin-bottom: -1px; }
.aH .infill.row3 { height:75px; margin-bottom: -8px; }
.aH .infill.row2 { height:75px; margin-bottom: -8px; }
.aH .infill.row1 { height:76px; margin-bottom:-12px; }

.aH .infill .unit {
	display: inline-block;
	height: 100%;
	width: 79px;
	}
.aH .infill .unit.col0 { width: 0px; }

.aH .slot {
	width: 10px;
	height: 100%;
	bottom: 0;
	z-index: 110;
	}
.aH .infill.row5 .slot.pipe { height:73px; margin-bottom:-1px; }
.aH .infill.row4 .slot.pipe { height:73px; margin-bottom:0px; }
.aH .infill.row3 .slot.pipe { height:73px; margin-bottom:2px; }
.aH .infill.row2 .slot.pipe { height:73px; margin-bottom:2px; }
.aH .infill.row1 .slot.pipe { height:73px; margin-bottom:3px; }
.aH.aL .slot { left: auto; right: -5px; }
.aH.aR .slot { left: -5px; right: auto; }
/*.aH.aR .slot { left: auto; right: -5px; }*/
.aH .mO .slot, .aH .unit.mO .slot { background-position: -30px  -20px; }
.aH .mW .slot, .aH .unit.mW .slot { background-position: -60px  -20px; }
.aH .unit .slot.pipe { background-position: 0px  -20px; }


.aH .ladder span {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 79px;
	height: 100%;
	}
.aH .ladder span:first-child { width: 83px; }

.aH.aL .ladder span:last-child  { margin-right: 0px; }
.aH.aL .ladder.wM span:last-child  { margin-right: -2px; }
.aH.aL .ladder span:first-child { margin-left: -2px; }
.aH.aR .ladder span:first-child { margin-left: 3px; }

.aH .ladder.row5 { height: 16px; margin-bottom:-11px; }
.aH .ladder.row4 { height: 11px; margin-bottom: -6px; }
.aH .ladder.row3 { height:  5px; }
.aH .ladder.row2 { height: 12px; }
.aH .ladder.row1 { height: 12px; margin-bottom: -1px;}
.aH .ladder.row0 { height: 16px; }
/* オーク材 */
.aH .ladder.row5.mO span { background-position: -85px -10px; }
.aH .ladder.row4.mO span { background-position: -85px -26px; }
.aH .ladder.row3.mO span { background-position: -85px -38px; }
.aH .ladder.row2.mO span { background-position: -85px -43px; }
.aH .ladder.row1.mO span { background-position: -85px -67px; }
.aH .ladder.row0.mO span { background-position: -85px -91px; }
.aH .ladder.row2.mO span.top { background-position: -115px -43px; }
.aH .ladder.row1.mO span.top { background-position: -115px -67px; }
/*
.aH .ladder.row2.mO span.top { background-position: -105px -55px; }
.aH .ladder.row1.mO span.top { background-position: -105px -79px; }
*/
/* ウォールナット材 */
.aH .ladder.row5.mW span { background-position: -85px -107px; }
.aH .ladder.row4.mW span { background-position: -85px -123px; }
.aH .ladder.row3.mW span { background-position: -85px -135px; }
.aH .ladder.row2.mW span { background-position: -85px -140px; }
.aH .ladder.row1.mW span { background-position: -85px -164px; }
.aH .ladder.row0.mW span { background-position: -85px -188px; }
.aH .ladder.row2.mW span.top { background-position: -115px -140px; }
.aH .ladder.row1.mW span.top { background-position: -115px -164px; }
/*
.aH .ladder.row2.mW span.top { background-position: -105px -152px; }
.aH .ladder.row1.mW span.top { background-position: -105px -176px; }
*/


/* base set mark ---------------------------------------------- */

.infill.anchor:before {
	display: block;
	position: absolute;
	content:"";
	
	width: 64px;
	height: 12px;
	
	top: -18px;
	left: 50%;
	margin-left: -32px;
	
	background-color: transparent;
	background-image: url(img/sprite.png);
	background-repeat: no-repeat;
	background-position: -309px -350px;
	}
.infill.anchor.none:before{background-image: none;}

.infill.hS.anchor:before { top: -22px; }
.suspend .infill.anchor:before { display: none; }

.aH.aL .infill.anchor:before {
	top: 26px;
	left: 100%;
	margin-left: 6px;
	background-position: -312px -374px;
	}
.aH.aR .infill.anchor:before {
	top: 26px;
	left: -74px;
	margin-left: 6px;
	background-position: -312px -362px;
	}
/*
.unit b {
	display:block;
	position: absolute;
	bottom: -15px;
	left: 50%;
	width: 64px;
	height: 12px;
	margin-left: -32px;
	background :transparent url(img/sprite.png) no-repeat -309px -350px;
	}
.aH.aL .unit b {
	left: 84px;
	width: 61px;
	height: 12px;
	margin-left: 0px;
	background-position: -312px -374px;
	}
.aH.aR .unit b {
	left: -67px;
	width: 61px;
	height: 12px;
	margin-left: 0px;
	background-position: -312px -362px;
	}
.aH .row5 .unit b { top:33px; }
.aH .row4 .unit b { top:32px; }
.aH .row3 .unit b { top:29px; }
.aH .row2 .unit b { top:27px; }
.aH .row1 .unit b { top:25px; }
*/

/* violate ---------------------------------------------------- */

.infill .violate {
	position: absolute;
	left: 0px;
	width: 100%;
	height: 30px;
	bottom: -24px;
	text-align: center;
	z-index: 210;
	}
.infill .violate span {
	display: block;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	background: transparent url(img/sprite.png) no-repeat -40px -214px;
	}
#ssf.aH .violate {
	position: absolute;
	top: 18px;
	bottom: auto;
	left: -10px;
	width: 30px;
	height: 30px;
	border: none;
	background: transparent url(img/sprite.png) no-repeat -10px -214px;
	}


.infill .violateoff { display: none; }
#ssf.suspend .violate { display: none; }

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

#w-measure {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -16px;
	text-align: center;
	z-index: 240;
	}
#w-measure ol {
	position: relative;
	height: 12px;
	margin: 0 27px -12px 27px; /* 暫定 */
	border-left: 1px solid black;
	border-right: 1px solid black;
	}
.aH.aL #w-measure ol { margin-left: 30px; margin-right: 8px; }
.aH.aR #w-measure ol { margin-left: 7px; margin-right: 31px; }
#w-measure li {
	position: relative;
	top: 6px;
	height: 6px;
	border-top: 1px solid black;
	}
#w-measure span {
	position: relative;
	top: -9px;
	padding: 0 4px;
	font-size: 10px;
	font-family: monospace;
	background-color: white;
	}
#h-measure {
	position: absolute;
	bottom:2px;
	right:0px;
	z-index: 240;
	}
.aL #h-measure {
	right:auto;
	left:0px;
	}
.aH.aR #h-measure { right: -8px; }
.aH.aL #h-measure { left: -12px; }

#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: absolute;
	top: 42%;
	left:-20px;
	width: 38px;
	padding: 4px 0;
	text-align: center;
	font-size: 10px;
	font-family: monospace;
	line-height: 120%;
	background-color: white;
	}

/* luggage violate -------------------------------------------- */

#h-measure #volpark {
	position: absolute;
	top: auto;
	bottom: -36px;
	left: -8px;
	width: auto;
	height: auto;
	border: none;
	}

#volpark .violate,
#ssf.aH #volpark .violate {
	display: block;
	position: relative;
	top: 0px;
	left: 0px;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	background: transparent url(img/sprite.png) no-repeat -40px -214px;
	}

/* page header ------------------------------------------------ */

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

#dmark,#umark {
	display:none;
	position: absolute;
	background: rgba(0,0,0,0.2);
	border: 1px solid #aaa;
	bottom:0;
	z-index: 195;
	}

#imark {
	position: absolute;
	/*background: rgba(0,0,0,0.1);*/
	border: 1px solid #aaa;
	width: 200px;
	height: 200px;
	z-index: 230;
	}
#imark > div { position:absolute; top:0; right:0; width:50%; height:50%; }
#imark button		{ position:absolute; width:30px; height:30px; }
#imark .vertical	{ top:	 -15px; left: -15px; background: transparent url(img/sprite.png) no-repeat -130px -214px; }
#imark .horizontal	{ bottom:-15px; right:-15px; background: transparent url(img/sprite.png) no-repeat -160px -214px; }
#imark .duplicate 	{ bottom:-10px; right:-15px; background: transparent url(img/sprite.png) no-repeat -190px -214px; }
#imark .delete		{ bottom:-10px; left: -15px; background: transparent url(img/sprite.png) no-repeat -220px -214px; }
#imark .infilldrag	{ bottom:-15px; left: -15px; background: transparent url(img/sprite.png) no-repeat -280px -214px; }

.aR #imark > div { left:0; right:auto; width:50%; height:50%; }
.aR #imark .vertical	{ left:auto; right:-15px; }
.aR #imark .horizontal	{ left:-15px; right:auto; }
.aR #imark .duplicate 	{ left:-15px; right:auto; }
.aR #imark .delete		{ left:auto; right:-15px; }
.aR #imark .infilldrag	{ left:auto; right:-15px; }

.not-vertical .vertical, .not-horizontal .horizontal, .not-duplicate .duplicate,
.not-delete .delete, .not-drag .infilldrag { display: none; }

#imark.not-border { border: none; }

#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; }

#dragballoon {
	position: absolute;
	width:0px;
	height:0px;
	overflow: visible;
	z-index: 600;
	}

#dragballoon > div {
	position: absolute;
	height: 126px;
	top: -100px;
	text-align: center;
	background-color: transparent;
	background-image: url(img/sprite.png);
	background-repeat: no-repeat;
	}
#dragballoon.aR > div {
	width: 78px; /* 111-33 */
	right: 0;
	padding-right: 33px;
	background-position: -312px -214px;
	}
#dragballoon.aL > div {
	width: 84px; /* 111-27 */
	left: 4px;
	padding-left: 27px;
	background-position: -423px -214px;
	}
#dragballoon div div {
	position: relative;
	margin: 7px auto 0 auto;
	vertical-align: bottom;
	background-color: transparent;
	background-image: url(img/sprite.png);
	background-repeat:  no-repeat;
	z-index: 610;
	}
#dragballoon span {
	display: none;
	position: absolute;
	top: 44px;
	width: 50px;
	height: 34px;
	background: transparent url(img/sprite.png) no-repeat -160px -244px;
	/*background-color: rgba(107,235,124,0.6);*/
	z-index: 620;
}
#dragballoon.aL span { left: 43px; }
#dragballoon.aR span { left: 15px; }
#dragballoon span.chg { display:block; }
#dragballoon span.bad { display:block; background-position: -210px -244px; }
#dragballoon span.rmv { display:block; background-position: -260px -244px; }

/* messenger -------------------------------------------------- */

#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: 910px;
	height: 100%;
	margin: 0 auto;
	/*background-color: rgba(128, 255, 250, 0.6);*/
	}

#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 span {
	display: block;
	position: absolute;
	background: transparent url(img/message_frame.png) no-repeat 0 0;
	}
#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 .tl { top:-16px; left:0; width:50%; height:16px; background-position:-32px 0; }
#msg .tr { top:-16px; right:0; width:50%; height:16px; background-position:100% -16px; }
#msg .ml { top:0; left:0; width:16px; height:100%; background-position:0 0; background-repeat: repeat-y; }
#msg .mr { top:0; right:0; width:16px; height:100%; background-position:-16px 0; background-repeat: repeat-y; }
#msg .bl { bottom:-16px; left:0; width:50%; height:16px; background-position:-32px -32px; }
#msg .br { bottom:-16px; right:0; width:50%; height:16px; background-position:100% -48px; }
*/

#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/sprite.png) no-repeat -160px -278px;
	}
.no-touch #msg button.close:hover {
	background: transparent url(img/sprite.png) no-repeat -180px -278px;
	}
#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; }

/* ============================================================
	yank_ie under 11
   ============================================================ */
/*
.cargo:after{
	display: block;
	position:absolute;
	content: " ";
	top: 0;
	left: 0;
	width: 100%;
	height: 74px;
	background: transparent url(img/shadow.png) no-repeat left bottom;
	}
*/

.msie.under11 .cargo:after{
	display: block;
	position:absolute;
	content: " ";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.001);
	}

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

body {
	overflow: visible;
	}
/* */
#logger {
	position: absolute;
	top: auto;
	right: 1em;
	bottom: 6em;
	width: 10em;
	height: auto; /*6em;*/
	padding: 4px;
	overflow-y: auto;
	font-size: 14px;
	line-height: 100%;
	color: white;
	background-color: black;
	opacity: 0.7;
	z-index: 10000;
}
/* */
#pile img { opacity: 0.1; }

/* ============================================================
	slider
   ============================================================ */
   /*
#panel ul {
	display: flex;
	position: initial;
	overflow: auto;
    overflow-y: hidden;
	width: 667px;
	height: 140px;
	margin: 0px 131px;
	padding: inherit;
	text-align: center;
	background-color: white;
	border-bottom-left-radius: 0px;
	scroll-snap-type: x mandatory;
	z-index: 50;
}

#stock button span.lb {
    position: absolute;
    left: 0;
    bottom: -0.6em;
    width: 100%;
    background-image: none;
}

#stock li {
    display: flex;
    position: initial;
	scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.onLuggage #stock li {
    margin: 0px 10px 5px 10px;
}

#btn-panel-l {
    position: absolute;
    top: 32px;
    left: 136px;
    width: 25px;
    z-index: 60;
    font-size: 50px;
}

#btn-panel-r {
    position: absolute;
    top: 32px;
    left: 779px;
    width: 25px;
    z-index: 60;
    font-size: 50px;
}

#panel ul {
    display: flex;
    position: initial;
    overflow: auto;
    overflow-y: hidden;
    width: 599px;
    height: 140px;
    margin: 0px 159px;
    padding: inherit;
    text-align: center;
    background-color: white;
    border-bottom-left-radius: 0px;
    scroll-snap-type: x mandatory;
    z-index: 50;
}
*/