@charset "utf-8";

/* ===================================================================
	コンテンツ
		00 ブランド背景用
		01 基本設定
		02 ブランド
		03 スライド
		04 ブランドタイトル
		05 ブランド画像
		06 ニュース
		07 表示条件
		08 新着アイテム
		09 現在のランキング
		10 バナー
		11 おすすめアイテム
		12 新着コーディネート
		13 最近チェックしたアイテム
		14 下段テキスト
		15 3/1クロコレリニューアル 告知枠
=================================================================== */
/* brand_title */
@import url("/static/full/css/brand_title.min.css");

/* シルバーエッグ */
@import url("/static/full/css/silveregg.min.css");
/* 00 ブランド背景用→layout.cssに移動
--------------------------------------------------------------------*/

/* 01 基本設定
--------------------------------------------------------------------*/

#wrapper {
}
#contents {
	width: 960px;
	margin: 0 auto;
	text-align: left;
}
#contents:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#condition {
	background-color: #f4f4f4;
	width: 960px;
	margin: 0 auto;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#condition ul {
	padding: 8px 0 8px 84px;
	margin-bottom: 25px;
}
#condition ul li {
	float: left;
	margin-right: 8px;
	width: 152px;
}
#condition ul li a {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	width: 152px;
	height: 32px;
}
#condition ul li.condition-1 a {
	background: url("/static/full/images/top/condition_tab_1.gif") no-repeat;
}
#condition ul li.condition-2 a {
	background: url("/static/full/images/top/condition_tab_2.gif") no-repeat;
}
#condition ul li.condition-3 a {
	background: url("/static/full/images/top/condition_tab_3.gif") no-repeat;
}
#condition ul li.condition-4 a {
	background: url("/static/full/images/top/condition_tab_4.gif") no-repeat;
}
#condition ul li.condition-5 a {
	background: url("/static/full/images/top/condition_tab_5.gif") no-repeat;
}
#condition ul li a.active {
	background-position: left -32px;
}
#condition ul li a:hover {
	background-position: left -32px;
}
/* 02 ブランド→layout.cssに移動
--------------------------------------------------------------------*/


/* 03 スライド
--------------------------------------------------------------------*/
#slide {
	text-align: left;
	margin: 0 auto;
	padding-bottom: 19px;
	width: 960px;
}
#slide ul {
	position: relative;
	height: 240px;
}
#slide li {
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	position: absolute;
	top: 0px;
	left: 0px;
}
#slide #slide-wrap {
	position: relative;
	overflow: hidden;
	width: 960px;
	height: 240px;
}
#slide #slide-wrap #slide-photo {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 240px;
	overflow: hidden;
}
#slide #slide-wrap #slide-photo ul {
	position: relative;
	width: 960px;
	height: 240px;
}
#slide #slide-wrap #slide-photo ul li {
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	position: absolute;
	top: 0px;
	left: 0px;
}
#slide #slide-wrap #slide-photo ul li a:hover img {
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
#slide #slide-wrap #slide-L {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 32px;
	height: 240px;
	z-index: 10;
}
#slide #slide-wrap #slide-L a {
	background: url("/static/full/images/top/slide_l.png") no-repeat;
	display: block;
	width: 32px;
	height: 240px;
}
#slide #slide-wrap #slide-R {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 32px;
	height: 240px;
	z-index: 10;
}
#slide #slide-wrap #slide-R a {
	background: url("/static/full/images/top/slide_r.png") no-repeat;
	display: block;
	width: 32px;
	height: 240px;
}
#slide #slide-wrap #slide-radiusT {
	background: url("/static/full/images/common/full_radius_top.png") no-repeat;
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 2px;
	z-index: 20;
}
#slide #slide-wrap #slide-radiusB {
	background: url("/static/full/images/common/full_radius_bottom.png") no-repeat;
	font-size: 0;
	line-height: 0;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 960px;
	height: 2px;
	z-index: 20;
}
/*タイトル*/
.section_title {
	text-align: center;
	font-size: 18px;
	margin-bottom: 15px;
}
/*新着・ランキング・レコメンド・チェックしたアイテム*/
#brandNewArrival, .check-item, #ranking, #recommend {
	padding-bottom: 50px;
}
.item-list ul {
	margin-left: 0;
}
.item-list.item-list-col5 ul {
	margin-left: -10px;
}
.item-list ul li {
	float: left;
	padding: 0;
	width: 240px;
	font-size: 14px;
	position: relative;
	margin-bottom: 20px;
	z-index: 50;
}
.item-list.item-list-col5 ul li {
	width: calc(100% / 5);
	padding-left: 10px;
	box-sizing: border-box;
}
.item-list ul li.lastChild {
}
.item-list ul li a {
	display: block;
}
.item-list ul li a:hover {
	text-decoration: none;
}
.item-list ul li h3 {
	font-size: 13px;
	padding: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.item-list ul li span {
	display: block;
}
.item-list ul li span.item-photo {
	display: block;
}
.item-list ul li span.item-name {
	display: block;
	padding: 0 5px 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.item-list ul li span.price {
	padding: 0 5px 5px;
}
.item-list ul li span.price.sale {
	color: #B31A36;
}
.item-list ul li span.taxin {
	display: inline;
	font-size: 0.65em;
}
.item-list ul li span.price_off {
	display: inline;
}
.item-list ul li span.icon {
	min-height: 20px;
}
.item-list ul li span.icon img {
	margin-bottom: 4px;
}
.item-list .item-photo {
	position: relative;
}
.item-list .rank_no {
	position: absolute;
	top: 10px;
	left: 10px;
}

.item-list .item-photo {
	position: relative;
}

.item-list .item-photo img {
	width: 100%;
}
.item-list ul li span.soldOut {
	position: absolute;
	z-index: 100;
}
.item-list ul li span.usedItem {
	position: absolute;
	z-index: 101;
	margin-left: -40px;
	margin-top: 0px;
}

.item-list ul li span.usedonly {
	font-size: 10px;
	background: #FFF;
	border: solid 1px #bdbcbc;
	border-radius: 12px;
	padding: 5px 21px 5px 10px;
	background-image: url(/static/full/images/common/list_used_icon.png);
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: 92%;
	bottom: 5px;
	right: 5px;
}

.top_category {
	width: 960px;
	height: 145px;
	margin: 0 auto 50px;
}
.top_category a:hover {
	opacity: 0.45;
}
.top_category .tab li {
	float: left;
	width: 240px;
	height: 53px;
	text-align: center;
	line-height: 53px;
	border-bottom: #000000 1px solid;
}
.top_category .tab a {
	display: block;
	text-decoration: none;
	width: 240px;
	height: 52px;
	text-align: center;
	line-height: 52px;
	font-size: 18px;
}
.top_category .tab li.active {
	height: 52px;
	line-height: 52px;
	border-bottom: #000000 3px solid;
}
.tab li.active a {
	height: 52px;
	line-height: 52px;
}
#all, #women, #men, #kids {
	width: 920px;
	margin: 0 auto;
	padding: 15px 20px 0 20px;
}
#women, #men, #kids {
	display: none;
}
#all li, #women li, #men li, #kids li {
	float: left;
/*	width: 92px;*/
/*	height: 82px;*/
	width: 82px;
	height: auto;
	text-align: center;
	vertical-align: middle;
}
#all li a, #women li a, #men li a, #kids li a {
	display: block;
/*	width: 92px;*/
/*	height: 82px;*/
	width: 82px;
	height: auto;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
}
#all a span, #women a span, #men a span, #kids a span {   display: table-cell;
    vertical-align: middle;
    font-size: 12px;
    /* height: 12px; */
    width: 82px;
    height: 24px;
    line-height: 12px;
    padding: 10px 0 10px 0;
}
#all a img, #women a img, #men a img, #kids a img {
	display: block;
	margin: 0 auto;
}
#top_brand {
	padding: 15px 0 35px 0;
}
#top_brand li {
	float: left;
	width: 320px;
	/*height: 184px;*/
}
#top_brand li img {
	display: block;
}

/* 06 3/1クロコレリニューアル 告知枠
--------------------------------------------------------------------*/
.topbnrWrap {
    margin: 0 auto;
	width:960px;
	height: 480px;
    margin-bottom: 50px;
}
.topbnrWrap a:hover {
	opacity:0.8;
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
}
.topbnrWrap .yuutai {
	font-size: 123%;
	line-height: 1.7;
	letter-spacing: 1px;
	text-align: center;
}
.topbnrWrap .yuutai h3, .topbnrWrap .yuutai h4 {
	font-family: "Century Gothic", "Verdana", ヒラギノ角ゴ Pro W3, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #F00;
	letter-spacing: 3px;
	font-weight: bold;
}
.topbnrWrap .yuutai h3 {
	font-size: 240%;
}
.topbnrWrap .yuutai h4 {
	font-size: 150%;
}
.topbnrWrap .yuutai .txtTop {
	display: block;
	margin-top: 2%;
}
.topbnrWrap .topbnrBtn li {
    width: 50%;
    float: left;
    margin: 0;
    padding: 0;
}
.topbnrWrap .bannerlist li {
    margin-bottom: .8%;
}
.topbnrWrap .bannerlist li:last-child {
	margin-bottom:0;
}

.topbnrWrap .flexslider {
	position: relative;
    height: 480px!important;
    max-height: 480px!important;
}
.topbnrWrap .flex-control-nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -20px;
    display: flex!important;
    align-items: center;
    justify-content: center;
}
.topbnrWrap .flex-control-nav li {
	padding: 0 5px;
}
.topbnrWrap .flex-control-nav li a {
	display: block;
    width: 10px;
    height: 10px;
    background: #dcdcdc;
    border-radius: 50%;
    font-size: 0;
}
.topbnrWrap .flex-control-nav li a.flex-active {
    background: #999;
}

/* topics
--------------------------------------------------------------------*/
.section_topics {
	margin-bottom: 30px;
}
.topics_list {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.topics_list li {
	width: calc(50% - 10px);
	margin-bottom: 20px;
}
.topics_list li:nth-child(odd) {
	margin-right: 10px;
}
.topics_list li:nth-child(even) {
	margin-left: 10px;
}
.topics_list li > a {
	display: flex;
	align-items: center;
	transition: all 0.2s linear;
}
.topics_list li > a:hover {
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
.topics_list_img {
	width: 200px;
}
.topics_list_txt {
	width: calc(100% - 200px);
	padding-left: 20px;
	font-size: 14px;
}

/* bnr2
--------------------------------------------------------------------*/
.section_bnr2 {
	margin-bottom: 30px;
}
.bnr2_list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 30px 0;
}
.bnr2_list li {
	width: calc(50% - 10px);
}
.bnr2_list li:nth-child(odd) {
	margin-right: 10px;
}
.bnr2_list li:nth-child(even) {
	margin-left: 10px;
}
.bnr2_list li > a {
	display: block;
	transition: all 0.2s linear;
}
.bnr2_list li > a:hover {
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

.topBnr2_item_txt {
	display: none;
}

/* brand
--------------------------------------------------------------------*/
.section_brand {
	margin-bottom: 50px;
	text-align: center;
}
.brand_tab {
	display: flex;
    width: 600px;
    margin: 0 auto 20px;
}
.brand_tab li {
    width: calc(100%/4 - 10px);
    height: 40px;
    line-height: 40px;
    margin: 0 5px;
    background: #eee;
    cursor: pointer;
    transition: all 0.2s linear;
}
.brand_tab li:hover,
.brand_tab li.selected {
	background: #000;
	color: #fff;
}
.brand_tabbox {
	margin: 0 auto 30px;
}
.brand_tab_list {
	display: flex;
	flex-wrap: wrap;
	border-left: 1px solid #eee;
	border-top: 1px solid #eee;
}
.brand_tab_item {
	width: calc(100%/3);
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
}
.brand_tab_item a {
	display: block;
	padding: 5px 0;
}
.brand_tab_item.is-off a {
	position: relative;
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    filter:grayscale(100%);
}
.brand_tab_item.is-off a::after {
	content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.1);
    position: absolute;
    top: 0;
    left: 0;
}
.brand_tab_item img  {
	width: calc(100% - 2px);
}

/*  プロパ/そのほかのサービス用css
--------------------------------------------------------------------*/
#other_service {
	padding: 15px 0 35px 0;
}
#other_service li {
	float: left;
	width: 320px;
	height: 184px;
}
#other_service li img {
	display: block;
}

/*  outlet用CSS
--------------------------------------------------------------------*/
#cts_wrapper .contents-rankingItems .section_title {
    text-align: center;
    font-size: 18px;
    margin: 20px 0 5px 0 !important;
}
