
#sizeSearch .content {padding-left: 0;}
.content h1 {font: 0/0 a; text-shadow: none; color: transparent; background: url(/sizesearch/img/size_search_title.png) no-repeat; width:243px; height: 35px; border: 0; margin: 15px 0 0; background-size: 243px 35px;}

.lead {font-size:12px;}

.share {margin-top: 30px;}
.share li {display: inline-block;}

.wrapAroundBanner { min-width: 0;}


/* ------------------------------

	SEARCH AREA

-------------------------------- */


#sizeSreachContent,
#slider{visibility: hidden;}

.content header {float: left;}

#slider {float: left; margin-top: 18px;}

.sideBarArea{
	width: 160px;
	position:relative;
	float: left;
	margin-left: 40px;
}

.sideBarArea .title{
	font-size:1.2em; font-weight:bold;
	line-height: 33px;
	display: inline-block;
}



.sideBarArea .sideBar{
	width:160px; height:22px;
	position: relative;
	clear: both;
}

.sideBarArea .bar{
	width:158px; height:12px;
	border:1px #ccc solid;
	background:#fff;
	position:absolute; left:0px; top:3px;
	font-family:Helvetica, Arial, sans-serif;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
}


.sideBarArea .tgl{
	display:block;
	position:absolute; left:120px; top:0px;
	width:40px; height:20px;
	cursor:pointer;
	background:#333;

	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;		
}

.sideBarArea .tgl table{
	border-collapse:collapse;
	margin:0; padding:0;
	position:relative; left:0px; top:0px;
	width:40px; height:20px;
	color:#fff; text-decoration:none;
	
}

.sideBarArea .tgl table th{
	padding:2px 0 0 3px;
	font-size:0.5em;
	height:18px;
	vertical-align:middle;
}

.sideBarArea .tgl table td{
	padding:2px 3px 0 0;
	font-size:0.5em;
	height:18px;
	text-align:right;
	vertical-align:middle;
}

.sideBarArea a:hover{
	background: #7F0019;
	color:#fff; text-decoration:none;
}

.sideBarArea .min{
	float:left;
	font-size:10px;
	font-family:Helvetica, Arial, sans-serif;
	color: #999;
}

.sideBarArea .max{
	float:right;
	font-size:10px;
	font-family:Helvetica, Arial, sans-serif;
	color: #999;
}

.sideBarArea .meter{
	 text-align: right;
	 margin-bottom: 5px;
}

.sideBarArea .meter dl{display:none; position:absolute; right:0; top:28px; z-index: 2;}
.sideBarArea .meter dl dt{position:absolute; width: 0; right: 41px; top: -10px; height: 10px; display: block; border-bottom: 10px solid #f5f2e9; border-left: 5px solid transparent; border-right: 5px solid transparent; font: 0/0 a; text-shadow: none; color: transparent;}
.sideBarArea .meter dl dd{padding:5px; background:#f5f2e9; color: #d00; border-radius: 5px; margin-top: 10px; text-align: left; white-space: nowrap;}

.sideBarArea .cm{
	font-weight:bold; font-size:14px;
	font-family:Helvetica, Arial, sans-serif;
	line-height: 33px;
	display: inline-block;
}

.sideBarArea .num{
	display: inline-block;
	text-align:right;
	border:1px #bbb solid;
	width:38px;
	padding:1px 3px;
	margin-right: 1px;
	font-size:20px;
	font-family:Helvetica, Arial, sans-serif;
	font-weight:bold;
	outline:none;	
	box-shadow:inset 1px 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.2);　/* Firefox用 */  
	-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.2);　/* Safari,Google Chrome用 */  	
}


.content #sizeSreachContent{position:relative; width:880px; height:580px; clear: both; padding-top: 30px;}
.content #searchArea{z-index:1; position:absolute; width:880px; height:580px;}

#searchArea #itemArea{float: right; width:730px; height:580px; position: relative; border-left:1px #ccc solid;}
.result {margin: 0 0 10px 20px; color: #999;}
.result span {font-weight: bold; font-family: Helvetica, Arial, sans-serif; font-size: 14px;}
#itemArea #resultItem{position:absolute; right:0px; padding-right:10px; width:720px; height:543px; overflow:auto;}
#resultItem .hItem{width:63px; height:63px; position:absolute; left:5px; top:5px;}
#resultItem .hItem img{width:99%;height:99%;}
#resultItem .hItem a,
#resultItem .hItem a:link,
#resultItem .hItem a:visited,
#resultItem .hItem a:active{border:1px #fff solid; width:100%;height:100%; display:block;}
#resultItem .hItem a:hover{border:1px #7F0019 solid;}

#history{width: 140px; margin-top: 30px; float: left;}
#history .link {display: none;}
.historyItem {height: 300px; margin-left: 15px; overflow: hidden;}
.historyItem .hItem{width:60px; height:60px; background: #000;}
.historyItem .hItem a,
.historyItem .hItem a:link,
.historyItem .hItem a:visited,
.historyItem .hItem a:active{display:block; background: #fff; padding: 5px;}
.historyItem .hItem a:hover{opacity: 0.9;}
.historyItem .hItem img{width:50px;height:50px;}

#history .title,
.tab .title{font-weight:bold; font-size:11px; margin-bottom: 10px;}

.tab{width: 140px; float: left;}
.tab li a{font-size:12px; display:block; text-decoration:none; padding: 5px 2px 5px 15px; background: url(//img.muji.net/img/store/common/sprite_sidenav.png) no-repeat 5px -178px; line-height: 1;}
.tab li a:hover{color:#707070; background: #e6e6e6 url(//img.muji.net/img/store/common/sprite_sidenav.png) no-repeat 5px -178px;}
.tab li.on a{color:#666; background: #f5f5f5; cursor:default; font-weight:bold;}

 
 /* ------------------------------

	DETAIL AREA

-------------------------------- */
.content #detailArea {
	position: fixed; left:50%; top:50%;
	width: 860px;
	height: 520px;
	padding: 10px;
	margin: -270px auto auto -440px;
	background:#fff;
	z-index: 200;
	display:none;
	border: 1px solid #aaa;
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	border-radius: 7px;
}

#detailArea .btnClose a{
	font: 0/0 a; text-shadow: none; color: transparent;
	display: block;
	position: absolute;
	right: 10px;
	top: 10px;
	width: 38px;
	height: 38px;
	z-index: 300;
	/*background: url(/sizesearch/img/btn_close.png) no-repeat;*/
}

#detailArea .btnClose a:hover{
	/*background: url(/sizesearch/img/btn_close.png) bottom no-repeat;*/
}

#detailArea .btnClose a:before {
	font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
	font-size: 60px;
	line-height: 38px;
	top: 0;
	left: 0;
	display: block;
	width: 35px;
	content: "\00d7";
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	overflow: visible;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
	text-decoration: none;
	color: #ccc;
	border: 0;
	outline: 0;
	background: transparent;
}

#detailArea .btnClose a:hover:before {
    color: #999;
}

#calc {margin: 10px 0 20px 42px; width:770px;}

#calc .totalWidth .meter{
	height:14px;
	background:#eee;
	box-shadow: 1px 1px 1px rgba(0,0,0,.2) inset;
	border-radius: 2px;
	border: 1px solid #ccc;
	margin-bottom: 10px;
}

#calc .totalWidth .meter .itemcm{
	font: 0/0 a; text-shadow: none; color: transparent;
	display: block;
	float: left;
	height:14px;
	border-left: 1px solid rgba(200,200,200,.25);
	margin-left: -1px;
background: #333; /* Old browsers */
background: -moz-linear-gradient(top,  #555 0%, #222 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #555 0%,#222 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #555 0%,#222 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #555 0%,#222 100%); /* IE10+ */
background: linear-gradient(to bottom,  #555 0%,#222 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666', endColorstr='#333',GradientType=0 ); /* IE6-9 */
}
#calc .totalWidth .meter .itemcm:first-child{
border-top-left-radius:2px;
border-bottom-left-radius:2px;
border-left: 0;
}
#calc .totalWidth .meter .itemcm:last-child{
border-top-right-radius:2px;
border-bottom-right-radius:2px;
}
#calc .totalDepth,
#calc .availableWidth{display: inline-block;}
#calc .totalDepth div,
#calc .availableWidth div{display: inline;}
#calc .totalDepth .totalDepthD{display: none;}
#calc .totalcm,
#calc .sum {font-family:Helvetica, Arial, sans-serif; font-size: 11px; line-height: 14px;}
#calc .totalWidth strong{font-size: 14px; font-weight: bold;}

#setItemArea {position: relative;}
#setItemArea .btnLeft a,
#setItemArea .btnRight a{position:absolute; display:block; width:33px; height: 61px; top: 110px; font: 0/0 a; text-shadow: none; color: transparent;}
#setItemArea .btnLeft a{background-position-x: left; left: 0;}
#setItemArea .btnRight a{background-position-x: right; right: 0;}
#setItemArea .off a {cursor:default; text-decoration:none;}
#setItemArea .on a {background-image: url(/sizesearch/img/btn_prevnext.png); background-repeat:no-repeat; background-position-y: top;}
#setItemArea .on a:hover {background-position-y: bottom;}

#setItemArea #setItemAreaOuter{width: 776px;height: 290px; overflow:hidden; margin: 0 auto;}
#setItemArea .list{width:6000px; position:relative;}
#setItemArea .list:after{content: ""; display: block; clear: both;}
#setItemArea .list .hItem{position:relative; float:left; margin:0 10px 0 0; width: 248px;height: 288px; border:1px #ccc solid;}

#setItemArea .list .hItem .title{margin: 10px; font-weight:bold;}
#setItemArea .list .hItem .img{text-align:center; margin:20px 0;}
#setItemArea .list .hItem .price{margin:10px; font-size:11px;}
#setItemArea .list .hItem .price span{font-family:Helvetica, Arial, sans-serif; font-weight: bold; font-size: 14px; margin: 0 5px;}
#tPrice{font-family:Helvetica, Arial, sans-serif; font-weight: bold; font-size: 16px; margin: 0 5px;}
#setItemArea .list .hItem .price dt,
#setItemArea .list .hItem .price dd{display:inline;}
#setItemArea .list .hItem .chk{display: none;}
#setItemArea .list .hItem .size{font-size:11px; margin: 10px 0 10px 10px;}
#setItemArea .list .hItem .size dd{display: inline-block; margin-right: 10px;}
#setItemArea .list .hItem .size span {font-family:Helvetica, Arial, sans-serif; font-weight: bold; font-size: 12px;}


#setItemArea .list .hItem .btnSet{
	width:198px; margin:0 auto 0 auto;
}

#setItemArea .list .hItem .btnSet li{
	width:198px; height:29px;
	margin-bottom:5px;
}


#setItemArea .list .hItem .btnSet li.btnDetail a:link,
#setItemArea .list .hItem .btnSet li.btnDetail a:visited,
#setItemArea .list .hItem .btnSet li.btnDetail a:active
{
	text-align:center;
	background:#4C4C4C;
	color:#fff; font-weight:bold;
	font-size:1.2em;
	text-decoration:none;
	border-radius: 2px;	
}
#setItemArea .list .hItem .btnSet li.btnDetail a:hover{
	background:#7F0019;
	color:#fff; font-weight:bold;
	text-decoration:none;

}

.delItem a {
	display: block;
	position: absolute;
	right:10px;
	top:10px;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	/*background-image: url(/sizesearch/img/btn_close_s.png);
	background-repeat: no-repeat;*/
	width:22px;
	height: 22px;
}

.delItem a:hover {background-position-y: bottom;}

.delItem a:before {
	font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
	font-size: 40px;
	line-height: 22px;
	top: 0;
	left: 0;
	display: block;
	width: 22px;
	content: "\00d7";
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	overflow: visible;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
	text-decoration: none;
	color: #ccc;
	border: 0;
	outline: 0;
	background: transparent;
}

.delItem a:hover:before {
    color: #999;
}


#setItemArea .list .hItem .btnSet li.btnCart.off{cursor:default;}


#setItemArea .list .hItem .btnSet li a{
	width:198px;padding:7px 0;
	display:block;
}

#setItemArea .list .hItem.empty div{
	color:#ccc;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	margin-top: 140px;
}



#setItemSel{
	width:840px;
	margin:0 auto;
}

#setItemSel .title{
	position:relative;
	padding-bottom:5px;
	border-bottom:1px #ccc solid;
	margin-bottom:5px;
	font-weight:bold;
	
}

#setItemSel .list{
	position:absolute;
	background:#fff;
	width:3000px; height:80px;
}

#setItemSel .list .noitem{
	width:795px;text-align:center;margin-top:30px;
}

#setItemSel .list .hItem{background:#fff; float:left;margin-right:5px;}
#setItemSel .list a{display:block; width:70px; height:70px; border:1px #fff solid;}
#setItemSel .list a:hover{border:1px #7F0019 solid;}
#setItemSel .btnLeft{float:left; width:20px;}
#setItemSel .btnLeft a{text-align:center;width:20px; display:block; border-radius: 2px;}
#setItemSel .btnLeft.off a,
#setItemSel .btnLeft.off a:hover{padding:20px 1px; cursor:default; text-decoration:none; color:#fff; background:#C5C5C5;}
#setItemSel .btnLeft.on a{padding:20px 1px; text-decoration:none; color:#fff; background:#333333;}
#setItemSel .btnLeft.on a:hover{background:#7F0019;}
#setItemSel .btnRight{float: right; width:20px;}

#setItemSel .btnRight a{text-align:center;width:20px; /*height:50px;*/ display:block; border-radius: 2px;}
#setItemSel .btnRight.off a,
#setItemSel .btnRight.off a:hover{padding:20px 1px; cursor:default; text-decoration:none; color:#fff; background:#C5C5C5;}
#setItemSel .btnRight.on a{padding:20px 1px; text-decoration:none; color:#fff; background:#333333;}
#setItemSel .btnRight.on a:hover{background:#7F0019;}

#setItemListOuter{
	position:relative;
	margin:0 auto;
	width:770px; height:80px;
	overflow:hidden;
}

#addCartArea {text-align: right; margin: 10px 48px 10px 0;}
#addCartArea dl {display: inline-block; border-bottom:1px #ccc solid; margin-right: 5px; padding-bottom: 2px;}
#addCartArea dt,
#addCartArea dd {display: inline;}
#addCartArea #allcart{
	width:95px; padding:3px 0;
	display:inline-block;
	text-align:center;
	background:#4C4C4C;
	color:#fff; font-weight:bold;
	text-decoration:none;	
	border-radius: 2px;
}
#addCartArea #allcart:hover{background:#7F0019;}

#mOver{
	display:none;
	width:96px;
	font-size:0.78em;
	position:absolute;
	z-index:1000;
 		
}

#mOver div{
	width:96px; height:45px;
	position:absolute;
	background:#000;	
	border-radius: 2px;
}
#mOver dl{
	padding:3px;
	color:#ddd;
	position:absolute;
}
#mOver dt{
	width:30px;
	float:left;
}
#mOver dd{
	float:right;
	width:54px;
	text-align:right;
}
#mOver dd strong{
 font-weight:bold;
}

#maskArea{
	display:none;
	background:#000;
	position:fixed; left:0; top:0;
	z-index: 150;
	width:100%; height:100%;
	opacity: 0.15;
}


/* ------------------------------

	modePC tablet

-------------------------------- */


/*.viewmode-PC .sideBarArea input.num {display: inline-block;}*/
.tablet header {float: none; text-align: center;}
.tablet header h1 {margin: 0 auto;}
.tablet header .lead {text-align: center; display: inline-block;}
.tablet #slider {float: none; display: flex;}
.tablet .sideBarArea {width: 33.333%; padding: 0 2%; margin-left: 0; box-sizing: border-box;}
.tablet .sideBarArea .meter {text-align: center;}
.tablet .sideBarArea .sideBar {width: 220px;}
.tablet .sideBarArea .bar {width: 218px;}
.tablet .sideBarArea .tgl {left: 180px;}


/* ------------------------------

	max-width 768px

-------------------------------- */


@media screen and (max-width: 768px){

	.content {padding: 0;}
	.content {overflow: visible; box-sizing: border-box;}
	.content header {float: none;}
	.content h1 {margin: 40px auto 0;}
	.content #sizeSreachContent {width: 100%; height: auto;}
	.content #searchArea {width: 100%; height: auto; position: static;}
	.content #detailArea {left: 0; top: 0; width: 100%; height: 100vh;/*height: 100%;*/ margin: auto; border: none; border-radius: 0; box-sizing: border-box; padding: 15px;}
	.content .share {padding: 0 20px;}

	.lead {text-align: center;}

	#sizeSreachContent {height: auto;}
	#slider {display: flex; float: none;}
	#history {display :none;}
	#searchArea #itemArea {float: none; width: 100%; height: auto; border: none;}
	#itemArea #resultItem {right: auto; padding: 0; width: 100%; height: auto; display: flex; flex-wrap: wrap; position: static;}

	.sideBarArea {float: none; margin-left: 0; width: 33.333%;}
	.sideBarArea .title {display: block; padding-bottom: 15px;}
	.sideBarArea .meter {text-align: center;}
	.sideBarArea .sideBar {width: 100px; margin: 0 auto;}
	.sideBarArea .bar {width: 98px;}
	.sideBarArea .tgl {left: 60px;}
	.sideBarArea .min {padding: 0 10px;}
	.sideBarArea .max {padding: 0 10px;}

	.tab {width: 100%; overflow: scroll; white-space: nowrap; float: none; -webkit-overflow-scrolling: touch; text-align: center; padding: 0 20px 0 4px; box-sizing: border-box;}
	.tab .title {display: none;}
	.tab li {display: inline-block;}
	.tab li a {color: #ccc; font-size: 14px; font-weight: bold; background: none; padding: 8px 0; margin: 0 0 0 16px; border-bottom: 2px solid #fff;}
	.tab li a:hover {background: none;}
	.tab li.on a {background: none; color: #333; border-bottom: 2px solid #999;}

	.result {margin: 15px 0; text-align: center;}
	.result span {color: #333; font-size: 16px;}

	#resultItem .hItem {width: 25%; height: auto; position: static; padding: 10px; box-sizing: border-box;}
	#resultItem .hItem a, #resultItem .hItem a:link, #resultItem .hItem a:visited, #resultItem .hItem a:active {height: auto;}
	#resultItem .hItem a {position: relative;}
	#resultItem .hItem img { width: 100%; height: 100%;}
	#resultItem .hItem.clicked a {border: 1px solid #fff;}
	#resultItem .hItem.clicked a:after {pointer-events: none; content: " "; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: url(/sizesearch/img/icon-click.png) no-repeat center center; background-size: 60px 30px; background-color: rgba(0,0,0,0.3);}
	#resultItem .hItem.clicked a img {opacity: 0.7;}

	#setItemArea #setItemAreaOuter {width: 100%; height: auto;}
	#setItemArea {margin-right: -15px;}
	#setItemArea .list {display: flex; overflow-x: scroll; -webkit-overflow-scrolling: touch; width: 100%;}
	#setItemArea .list .hItem {max-width: 42%; min-width: 42%; margin: 0 4% 0 0; box-sizing: border-box; position: relative; width: auto; height: auto;}
	#setItemArea .list .hItem.empty div {position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: 0; width: 100%;}
	#setItemArea .list .hItem .img { text-align: center; margin: 10px 0 5px;}
	#setItemArea .list img {width: 75%; height: auto;}
	#setItemArea .list:last-child:after {content: "\0a0"; width: 4%; display: block;}

	#calc {width: 100%; margin: 10px 0 20px 0px;}
	#calc .totalWidth .meter {width: 80%;}

	#addCartArea {margin: 20px 0; text-align: center;}

	#setItemSel {width: 100%;}
	.btnLeft, .btnRight {display: none;}
	#setItemSel .list .hItem {display: inline-block; float: none;}
	#setItemSel .list .noitem {width: auto; text-align: left;}
	#setItemSel .list a:hover {border: 1px solid #fff;}
	#setItemListOuter {width: auto; overflow: scroll; -webkit-overflow-scrolling: touch;}
	#setItemListOuter .list {width: 100%; white-space: nowrap;}

	.tablet #setItemArea #setItemAreaOuter {padding: 2.5% 0 2.5% 2.5%; box-sizing: border-box;}
	.tablet #setItemArea .list .hItem {max-width: 34%; min-width: 34%;}
	.tablet #calc {padding: 0 20px; box-sizing: border-box; margin-top: 7.5%;}
	.tablet #calc .totalWidth .meter {width: 100%;}
	.tablet #setItemSel {padding: 10px 20px; box-sizing: border-box;}

}