@charset "utf-8";

#container {
	font-family : 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,'ＭＳ Ｐゴシック',Verdana,Arial,Helvetica,sans-serif;
}

/* アウトライン
------------------------------*/
#graphict {
	position: relative;
	zoom: 1;
}
#graphict:after {
	display: block;
	clear: both;
	content: "";
	height: 0;
}
.content {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ",Meiryo,'ＭＳ Ｐゴシック',Verdana,Arial,Helvetica,sans-serif;
	font-size: 88%;
	line-height: 1.7;
}

.navigation,
.navigationInner {
	background: #dadada;
}
.navigation .menu img,
.filterBLock li {
	cursor: pointer;
}

.content img,
.navigation img{
	vertical-align: top;
}
.mouseover:hover > * {
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-o-transition: opacity 0.2s ease-out;
	-ms-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
	opacity: 0.5;
	filter: alpha(opacity=50);
	zoom: 1;
}

/* ナビゲーション
------------------------------*/
.filterBLock > div {
	padding: 0 0 20px;
}
.filterBLock h3 {
	position: relative;
	border-bottom: 1px solid #3b3b3b;
	margin: 0 0 20px;
	padding: 0 4px 2px;
}
.filterBLock h3 .assist {
	position: absolute;
	bottom: 5px;
	right: 0;
}
.filterBLock .listA,
.filterBLock .listB {
	font-weight: bold;
}
.filterBLock .listA li {
	margin: 0 0 20px;
}
.filterBLock .listA li,
.filterBLock .resultColor {
	padding: 0 0 0 22px;
}
.filterBLock .listA .active,
.filterBLock .resultColor li:before {
	background: url(../../common/img/navigation/ico_checked.png) no-repeat 0 50%;
}
	.filterBLock .listA li span,
	.filterBLock .resultColor li {
		display: block;
		padding: 3px;
	}
	.filterBLock .listA .active span,
	.filterBLock .resultColor li {
		background: #fff;
	}

.filterBLock .resultColor {
	display: none;
	margin: 20px 15px 0;
}
.filterBLock .resultColor li {
	position: relative;
	margin-bottom: 3px;
	cursor: default;
}
.filterBLock .resultColor li:before {
	display: block;
	content: "";
	position: absolute;
	left: -22px;
	width: 18px;
	height: 16px;
}
.filterBLock .resultColor .palette {
	display: inline-block;
	vertical-align: top;
	width: 1em;
	height: 1em;
	margin: 0 3px 0 0;
}

.filter-color .color1 .palette {background: #fff; border: 1px solid #ccc;}
.filter-color .color2 .palette {background: #a3a3a3;}
.filter-color .color3 .palette {background: #030303;}
.filter-color .color4 .palette {background: #fb6da0;}
.filter-color .color5 .palette {background: #d50013;}
.filter-color .color6 .palette {background: #ff9736;}
.filter-color .color7 .palette {background: #e2cfa7;}
.filter-color .color8 .palette {background: #ffcb46;}
.filter-color .color9 .palette {background: #673d33;}
.filter-color .color10 .palette {background: #4bb24f;}
.filter-color .color11 .palette {background: #3e84d8;}
.filter-color .color12 .palette {background: #b055d6;}
.filter-color .color13 .palette {background: url(../../common/img/navigation/bg_color-other.png) repeat 0 0;}

.desktop main.color1 {background: #fff;}
.desktop main.color2 {background: #ededed;}
.desktop main.color3 {background: #cdcdcd;}
.desktop main.color4 {background: #ffe2ec;}
.desktop main.color5 {background: #f8ccd0;}
.desktop main.color6 {background: #ffead6;}
.desktop main.color7 {background: #f9f5ed;}
.desktop main.color8 {background: #fff5d9;}
.desktop main.color9 {background: #e1d8d6;}
.desktop main.color10 {background: #daf0db;}
.desktop main.color11 {background: #d8e6f8;}
.desktop main.color12 {background: #efdcf8;}
.desktop main.color13 {background: url(../../common/img/navigation/bg_main_color-other.jpg) repeat-y 50% 0;}

.filterBLock .listB .name {
	display: none;
	position: absolute;
	top: -27px;
	left: -12px;
	background: #fff;
	border: 1px solid #030303;
	width: 50px;
	padding: 5px 0;
	text-align: center;
	font-size: 10px;
	line-height: 1;
	white-space: nowrap;
}
.filterBLock .listB li:hover .name {
	display: block;
}
.filterBLock .listB li:hover .name:before {
	position: absolute;
	bottom: -9px;
	left: 20px;
	content: "";
	background: url(../../common/img/navigation/arrow_balloon.png) no-repeat 0 0;
	width: 9px;
	height: 9px;
}
.filterBLock .listB .palette {
	display: block;
	border: solid 2px transparent;
	outline: solid 2px transparent;
	margin: 0 auto;
}
.filterBLock .listB .active .palette {
	border-color: #fff;
	outline-color: #000;
}

/* SNS
------------------------------*/
.sns {
	padding: 0 0 10px;
}
.sns li {
	float: right;
	margin: 0 0 0 15px;
}
.fb_iframe_widget > span {
	vertical-align: baseline!important;
}

/* 商品一覧
------------------------------*/
.sortItems p,
.sortItems ul,
.sortItems li {
	float: left;
	white-space: nowrap;
	line-height: 1.1;
}
.sortItems p {
	border-right: 1px solid #333;
	margin: 0 15px 5px 0;
	padding: 0 15px 0 0;
	font-weight: bold;
}
.sortItems li {
	margin: 0 15px 5px 0;
}
.sortItems a {
	text-decoration: none;
	color: #000;
}
.sortItems a:hover {
	text-decoration: underline;
}
.sortItems .active {
	text-decoration: none!important;
	color: #888;
	cursor: default!important;
}

.gridBlock {
	overflow: hidden;
}
.gridBlock .gridBox {
	overflow: hidden;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	float: left;
	background:#fff;
}
#contentBlock .active {
	color: #ff0000;
}

.productItems {
	overflow: hidden;
}
.productItems .data {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	background: url(../../common/img/bg_overlay-a.png) repeat 0 0;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #fff;
}
	.productItems .data .text {
		border: 1px solid #ccc;
		border-width: 2px 0;
		margin: 30px 30px 0;
		padding: 10px 0;
		font-size: 95%;
		line-height: 1.5;
	}
	.productItems .data .title {
		padding: 0 0 7px;
	}
	.productItems .data .price {
		font-size: 110%;
		color: #ff0000;
	}
		.productItems .data .price span {
			padding: 0 0 0 2px;
			font-size: 65%;
		}
	.productItems .data .stock {
		display: none;
	}

.productItems .btn .fav,
.productItems .btn .link {
	position: absolute;
	bottom: 12px;
	width: 86px;
	height: 86px;
	cursor: pointer;
}
.productItems .btn .fav {
	left: 20px;
}
.productItems .btn .link {
	right: 20px;
}
.productItems .btn .fav span,
.productItems .btn .link a {
	display: block;
	width: 86px;
	height: 86px;
	text-indent: -9999px;
}
	.productItems .btn .fav span {
		background: url(../../common/img/item/btn_check.png) no-repeat 50% 50%;
	}
	.productItems .btn .fav.active span {
		background-image: url(../../common/img/item/btn_check_on.png);
	}
	.productItems .btn .link a {
		background: url(../../common/img/item/btn_detail.png) no-repeat 50% 50%;
	}

.productItems li {
	position: relative;
}
.productItems .gender {
	position: absolute;
	top: 0;
	left: 0;
}
.productItems .favorite {
	display: none;
	position: absolute;
	bottom: 5px;
	left: 5px;
	background: url(../../common/img/item/ico_favorite.png) no-repeat 0 0;
	width: 38px;
	height: 32px;
	text-indent: -9999px;
}
.productItems .favorite.active {
	display: block;
}
	.productItems .status .label {
		position: absolute;
		top: 50%;
		left: 0;
		background: url(../../common/img/bg_overlay-a.png) repeat 0 0;
		width: 100%;
		margin: -1em 0 0;
		padding: 1px 0 0;
		text-align: center;
		font-weight: bold;
		color: #fff;
	}

.addBtn {
	padding: 20px 0 65px;
	text-align: center;
}

/* CHECK LIST
------------------------------*/
.favorite .pageTitle {
	margin: 50px 0;
	text-align: center;
	font-weight: bold;
}
.favorite .pageTitle div {
	padding-bottom: 10px;
}
.favorite .btnTop {
	padding: 0 0 15px;
}
.favorite .btnTop a {
	display: block;
	background: #dadada;
	padding: 22px 0 8px;
	text-align: center;
}

.noItem {
	display: none;
}
.desktop .noItem {
	padding: 200px 0 50px;
	text-align: center;
}
.desktop .favorite .noItem {
	padding-top: 100px;
}
.smartphone .noItem {
	padding: 50px 2% 0;
	text-align: left;
}
.noItem p {
	margin: 0 0 10px;
}