@charset "utf-8";

// インポート
@import "common";


/* ページwrap-------------------------------------------- */

.page{
	width: 100%;
	background: #fff;
}

.view_sp{
	@media screen and (min-width: @pc_w){
		display: none;
	}
}

.view_pc{
	display: none;
	@media screen and (min-width: @pc_w){
		display: block;
	}
}

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

.header_wrap{
	width: 100%;
}

.header{
	width: 100%;
	max-width: @sp_max_w;
	margin: 0 auto;
	padding: 15px 0;
	@media screen and (min-width: @pc_w){
		max-width: @pc_w;
		padding: 20px 0;
	}
}

.header_ttl{
	width: 90%;
	max-width: @sp_max_w;
	margin: 0 auto;
	font-size: 20px;
	font-weight: bold;
	color: @sub_black;
	text-align: left;
	@media screen and (min-width: @pc_w){
		max-width: @pc_w;
		font-size: 36px;
		margin: 0 0 0 20px;
	}
	.ico{
		display: inline-block;
		width: 63px;
		height: 63px;
		margin-right: 10px;
		@media screen and (min-width: @pc_w){
			width: 86px;
			height: 86px;
		}
		img{
			width: 100%;
		}
	}
}

/* main-------------------------------------------- */

.main_wrap{
	width: 100%;
	height: 393px;
	background: @main_bg;
	overflow: hidden;
	@media screen and (min-width: @pc_w){
		height: 587px;
	}
}

.main{
	position: relative;
	width: 100%;
	height: 100%;
	max-width: @sp_max_w;
	margin: 0 auto 5px;
	@media screen and (min-width: @pc_w){
		max-width: @pc_w;
	}
}

// メインタイトル
.main_ttl{
	position: absolute;
	width: 373px;
	top: 11px;
	left: 50%;
	transform: translate(-50%, 0);
	margin-left: -12px;
	z-index: 2;
	@media screen and (min-width: @pc_w){
		width: 248px;
		height: 315px;
		top: 25px;
		left: 28px;
		transform: translate(0, 0);
		margin-left: 0;
	}
	.catch{
		position: absolute;
		display: block;
		width: 203px;
		top: 37px;
		left: 103px;
		@media screen and (min-width: @pc_w){
			top: 0;
			left: 24px;
		}
	}
	.img{
		width: 373px;
		margin-left: -21px;
		@media screen and (min-width: @pc_w){
			position: absolute;
			width: 248px;
			bottom: 0;
			left: 0;
			margin-left: 0px;
		}
	}
}

// メインイメージ
.main_img{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

.model_item,
.deco_item{
	position: absolute;
	img{
		width: auto;
		height: auto;
	}
}

.model_item{
	&.pic01{
		top: -40px;
		left: -515px;
	}
	&.pic02{
		bottom: 0;
		left: -320px;
	}
	&.pic03{
		bottom: 0;
		left: 63px;
	}
	&.pic04{
		top: -50px;
		left: 384px;
	}
	&.pic05{
		bottom: 8px;
		right: 0;
	}
	&.pic06{
		top: -102px;
		right: -538px;
	}
	&.pic07{
		bottom: 0;
		right: -400px;
	}
}

.deco_item{
	&.pic01{
		top: 12px;
		left: -124px;
	}
	&.pic02{
		bottom: 175px;
		left: 20px;
	}
	&.pic03{
		top: 57px;
		left: 330px;
	}
	&.pic04{
		bottom: 46px;
		left: 525px;
	}
	&.pic05{
		top: -5px;
		right: 50px;
	}
}

/* main_info-------------------------------------------- */

.main_info_wrap{
	width: 100%;
}

.main_info{
	position: relative;
	width: @pc_w;
	margin: 90px auto;
	letter-spacing: 0.15em;
	.ico{
		position: absolute;
		top: -60px;
		left: 30px;
		width: 145px;
	}
	.ttl{
		color: @main_black;
		font-size: 36px;
		font-weight: bold;
		margin-bottom: 30px;
	}
	.txt{
		color: @main_black;
		font-size: @fsz_m;
		line-height: 1.8em;
	}
}

/* search-------------------------------------------- */

.search_wrap{
	width: 100%;
	margin: 0 0 20px 0;
}

.search_box_wrap{
	width: 100%;
	padding: 0;
	overflow: hidden;
}

// タイトル共通
.search_ttl_wrap{
	width: 100%;
	background: @main_black;
	cursor: pointer;
	.search_ttl{
		position: relative;
		width: 240px;
		height: 20px;
		margin: 0 auto;
		padding: 25px 0;
		.txt{
			margin: 0 10px 0 18px;
			font-size: @fsz_s;
			color: #fff;
			text-align: center;
			letter-spacing: @lts_m;
		}
		.ico_arrow{
			position: absolute;
			top: 43%;
			right: 0;
			display: inline-block;
			width: 19px;
			height: 9px;
			background: url(../img/search/ico_arrow.png) top left no-repeat;
			background-size: 19px;
		}
		.ico_img{
			position: absolute;
			top: 43%;
			left: 0;
			display: inline-block;
			margin: -5px;
			background-image: url(../img/search/ico_search.png);
			background-size: 28px;
			&.shop{
				width: 28px;
				height: 19px;
				background-position: top center;
			}
			&.theme{
				width: 28px;
				height: 24px;
				background-position: bottom left;
			}
		}
	}
}

/*::::::::::::::::::::::::::::::::::
ショップから探す
:::::::::::::::::::::::::::::::::::*/

.shop_box_wrap{
	width: 100%;
	background: @color_gray;
	margin: 0 0 5px 0;
	.shop_box:first-child{
		padding-top: 30px;
		@media screen and (min-width: @pc_w){
			padding-top: 70px;
		}
	}
}

.shop_box{
	width: 90%;
	max-width: @sp_max_w;
	margin: 0 auto;
	padding-bottom: 15px;
	@media screen and (min-width: @pc_w){
		width: @pc_w;
		max-width: @pc_w;
		padding-bottom: 50px;
		&:after{
		  .clear_fix
		}
	}
	.ttl{
		width: 100%;
		background: @main_black;
		color: #fff;
		font-size: @fsz_s;
		letter-spacing: @lts_m;
		padding: 5px 0;
		margin: 0 0 10px 0;
		@media screen and (min-width: @pc_w){
			float: left;
			box-sizing: border-box;
			width: 184px;
			height: 72px;
			margin-right: @margin_conts;
			color: @main_black;
			line-height: 5em;
			background: none;
			border-bottom: @main_black 1px solid;
			border-right: @main_black 1px solid;
		}
	}
	.list{
		width: 100%;
		&:after{
		  .clear_fix
		}
		@media screen and (min-width: @pc_w){
			width: @pc_w - (184 + @margin_conts);
			float: left;
		}
		li{
			width: 48%;
			float: left;
			margin: 0 4% 4% 0;
			&:nth-child(2n){
				margin: 0 0 4% 0;
			}
			@media screen and (min-width: @pc_w){
				width: 184px;
				margin: 0 20px 20px 0;
				background: #fff;
				&:nth-child(2n){
					margin: 0 20px 20px 0;
				}
				&:nth-child(4n){
					margin: 0 0 20px 0;
				}
			}
			a{
				display: block;
				width: 100%;
				@media screen and (min-width: @pc_w){
					width: 134px;
					padding: 12px 25px;
				}
				img{
					width: 100%;
				}
			}
		}
	}
}

/*::::::::::::::::::::::::::::::::::
テーマから探す
:::::::::::::::::::::::::::::::::::*/

.theme_wrap{
	@media screen and (min-width: @pc_w){
		width: @pc_w;
		margin: 0 auto;
	}
}

.theme_box_wrap{
	width: 100%;
	float: left;
	position: relative;
	.before{
		.com_hover;
	}
	@media screen and (min-width: @pc_w){
		width: 33%;
		margin-bottom: 90px;
	}
	&.theme01{
		background: @color_Key01_bg;
		border-bottom: @main_black 1px solid;
		.before{
			background: lighten(@color_Key01,50%);
		}
		@media screen and (min-width: @pc_w){
			border-bottom: none;
			border-right: @main_black 1px solid;
			border-left: @main_black 1px solid;
		}
	}
	&.theme02{
		background: @color_Key02_bg;
		border-bottom: @main_black 1px solid;
		.before{
			background: lighten(@color_Key02,75%);
		}
		@media screen and (min-width: @pc_w){
			border-bottom: none;
			border-right: @main_black 1px solid;;
		}
	}
	&.theme03{
		background: @color_Key03_bg;
		.before{
			background: lighten(@color_Key03,55%);
		}
		@media screen and (min-width: @pc_w){
			border-right: @main_black 1px solid;;
		}
	}
}

.theme_box{
	display: block;
	width: 90%;
	max-width: @sp_max_w;
	margin: 0 auto;
	padding: 25px 0;
	@media screen and (min-width: @pc_w){
		width: 100%;
		margin: 0;
		padding: 40px 0;
	}
	.item{
		width: 100%;
		img{
			width: 100%;
			margin-bottom: 15px;
			position: relative;
			z-index: 2;
			@media screen and (min-width: @pc_w){
				width: 168px;
				margin: 0 auto;
				margin-bottom: 30px;
			}
		}
		.txt{
			.txt_com_themettl;
			position: relative;
			letter-spacing: -0.05em;
			z-index: 2;
			@media screen and (min-width: @pc_w){
				font-size: @fsz_m;
				line-height: 1.8em;
			}
		}
	}
}

// PC用タイトル
.search_ttl_pc{
	@media screen and (min-width: @pc_w){
		.ttl{
			width: 450px;
			margin: 90px auto 50px;
		}
	}
}

/* conts-------------------------------------------- */

.conts{
	clear: both;
	width: 100%;
	padding-bottom: @margin_conts_list_sp;
	@media screen and (min-width: @pc_w){
		padding-bottom: @margin_conts_list_pc;
	}
	&:before{
		content: " ";
		display: block;
		width: 100%;
		height: 3px;
		border-top: @main_black 4px solid;
		border-bottom: @main_black 2px solid;
	}
	&.theme01{
		background: @color_Key01_bg;
		.conts_list_info{
			&:after{
				.bg_com_Key01
			}
		}
		.conts_list_info_article{
			.catch{
				.bg_com_Key01
			}
		}
		.conts_list_goods_price{
			.price{
				color: @color_Key01;
			}
		}
		@media screen and (min-width: @pc_w){
			.conts_list_info_ttl:after,
			.conts_list_goods:before,
			.conts_list_goods:after{
				.bg_com_Key01
			}
		}
	}
	&.theme02{
		background: @color_Key02_bg;
		.conts_list_info{
			&:after{
				.bg_com_Key02
			}
		}
		.conts_list_info_article{
			.catch{
				.bg_com_Key02
			}
		}
		.conts_list_goods_price{
			.price{
				color: @color_Key01;
			}
		}
		@media screen and (min-width: @pc_w){
			.conts_list_info_ttl:after,
			.conts_list_goods:before,
			.conts_list_goods:after{
				.bg_com_Key02
			}
		}
	}
	&.theme03{
		background: @color_Key03_bg;
		.conts_list_info{
			&:after{
				.bg_com_Key03
			}
		}
		.conts_list_info_article{
			.catch{
				.bg_com_Key03
			}
		}
		.conts_list_goods_price{
			.price{
				color: @color_Key01;
			}
		}
		@media screen and (min-width: @pc_w){
			.conts_list_info_ttl:after,
			.conts_list_goods:before,
			.conts_list_goods:after{
				.bg_com_Key03
			}
		}
	}
}

/*::::::::::::::::::::::::::::::::::
共通タイトル
:::::::::::::::::::::::::::::::::::*/

.conts_ttl{
	width: 100%;
	margin-bottom: @margin_conts_list_sp;
	padding-top: @margin_conts_list_sp;
	@media screen and (min-width: @pc_w){
		margin-bottom: @margin_conts_list_pc;
		padding-top: @margin_conts_list_pc;
	}
	.img{
		display: block;
		width: 90%;
		max-width: @sp_max_w;
		margin: 0 auto 15px;
		@media screen and (min-width: @pc_w){
			width: 513px;
			max-width: 513px;
			margin: 0 auto 28px;
		}
	}
	.txt{
		.txt_com_themettl;
		display: inline-block;
		@media screen and (min-width: @pc_w){
			font-size: 28px;
		}
	}
}

/* conts 記事エリア-------------------------------------------- */

.conts_list{
	width: 90%;
	max-width: @sp_max_w;
	background: #fff;
	margin: 0 auto;
	padding: @margin_conts 0;
	border-radius: 20px;
	@media screen and (min-width: @pc_w){
		width: @pc_w;
		max-width: @pc_w;
		min-height: 700px;
		padding: 40px 0 20px;
		box-sizing: border-box;
		overflow: hidden;
		&:after{
			.clear_fix
		}
	}
}

.conts_list_wrap{
	margin-bottom: @margin_conts_list_sp;
	&:last-of-type{
			margin-bottom: 0;
	}
}

/*::::::::::::::::::::::::::::::::::
info
:::::::::::::::::::::::::::::::::::*/

.conts_list_info{
	&:after{
		content: " ";
    	display: block;
    	width: 90%;
    	height: 2px;
    	margin: 0 auto 20px;
	}
	@media screen and (min-width: @pc_w){
		width: 505px;
		float: left;
		&:after{
			display: none;
		}
	}
}

//階数 & 店名
.conts_list_info_ttl{
	width: 90%;
	margin: 0 auto @margin_conts;
	@media screen and (min-width: @pc_w){
		width: 100%;
		margin: 0 auto;
		&:after{
			content: " ";
			display: block;
			width: 482px;
			height: 2px;
			margin-top: 40px;
		}
	}
	.ico{
		display: inline-block;
		width: 34px;
		height: 34px;
		@media screen and (min-width: @pc_w){
			width: 38px;
			height: 38px;
		}
		img{
			width: 100%;
		}
	}
	.txt{
		display: inline-block;
		width: 219px;
		@media screen and (min-width: @pc_w){
			width: 305px;
		}
		img{
			width: 100%;
		}
	}
}

//ショップイメージ
.conts_list_info_img{
	width: 90%;
	margin: 0 auto @margin_conts;
	@media screen and (min-width: @pc_w){
		position: relative;
		width: 100%;
		height: auto;
		margin: 0;
	}
	img{
		width: 100%;
		@media screen and (min-width: @pc_w){
			position: absolute;
			width: auto;
			height: auto;
			top: 10px;
			left: 30px;
		}
	}
}

//文章
.conts_list_info_article{
	width: 90%;
	margin: 0 auto @margin_conts;
	@media screen and (min-width: @pc_w){
		width: 245px;
		margin: 340px 0 0 30px;
	}
	.catch{
		padding: 8px 15px;
		margin-bottom: @margin_conts;
		color: #fff;
		font-size: @fsz_s;
		letter-spacing: 0.2em;
		text-align: left;
	}
	.txt{
		.txt_com_conts;
		text-align: justify;
	}
}

/*::::::::::::::::::::::::::::::::::
goods
:::::::::::::::::::::::::::::::::::*/

.conts_list_goods{
	@media screen and (min-width: @pc_w){
		width: @pc_w - 505;
		float: right;
		position: relative;
		&:before{
			content: " ";
			display: block;
			width: 100%;
			height: 2px;
		}
		&:after{
			content: " ";
			position: absolute;
			display: block;
			width: 2px;
			height: 253px;
			top: -40px;
    		left: 15px;
		}
	}
}

//商品 文章
.conts_list_goods_lesd{
	width: 90%;
	margin: 0 auto @margin_conts;
	text-align: left;
	@media screen and (min-width: @pc_w){
		margin: 30px 0 0 48px;
		position: relative;
		z-index: 1;
	}
	.catch{
		color: @main_black;
		font-size: @fsz_m;
		letter-spacing: 0.1em;
		font-weight: bold;
		margin-bottom: 10px;
		@media screen and (min-width: @pc_w){
			font-size: 25px;
		}
	}
	.txt{
		.txt_com_conts
	}
}

//商品 イメージ
.conts_list_goods_photo{
	width: 95%;
	margin: 0 0 @margin_conts 5%;
	@media screen and (min-width: @pc_w){
		width: 100%;
		height: auto;
		margin: 0;
	}
	img{
		width: 100%;
		@media screen and (min-width: @pc_w){
			width: auto;
			height: auto;
			position: absolute;
			z-index: 0;
		}
	}
	@media screen and (min-width: @pc_w){
		//パターン（TOP）
		&.ver_top{
			img{
				top: -15px;
				right: 0;
			}
		}
		//パターン（BOTTOM）
		&.ver_bottom{
			img{
				top: 28px;
				right: 0;
			}
		}
	}
}

//商品 コメント（PC）
.conts_list_goods_comment{
	position: relative;
	z-index: 1;
	img{
		display: block;
	}
	//パターン（TOP）
	&.ver_top{
		margin: 145px 0 100px 45px;
	}
	//パターン（BOTTOM
	&.ver_bottom{
		margin: 132px 0 107px 45px;
	}
}


//商品 情報
.conts_list_goods_price{
	width: 90%;
	margin: 0 auto;
	color: @main_black;
	text-align: left;
	@media screen and (min-width: @pc_w){
		position: relative;
		margin: 0 0 0 45px;
		z-index: 1;
	}
	.item{
		margin-bottom: 15px;
		&:last-child{
			margin-bottom: 0;
		}
		@media screen and (min-width: @pc_w){
			margin-bottom: 5px;
		}
	}
	.brand{
		font-size: @fsz_s;
		line-height: 2em;
		@media screen and (min-width: @pc_w){
			font-size: @fsz_ss;
		}
	}
	.ware{
		font-size: @fsz_b;
		font-weight: bold;
		line-height: 1.2em;
		@media screen and (min-width: @pc_w){
			font-size: @fsz_m;
		}
		span{
			font-size: @fsz_s;
			font-weight: normal;
			line-height: 1.2em;
			@media screen and (min-width: @pc_w){
				font-size: @fsz_ss;
			}
		}
	}
	.price{
		font-size: @fsz_b;
		font-weight: bold;
		@media screen and (min-width: @pc_w){
			font-size: @fsz_m;
		}
		span{
			font-size: @fsz_m;
			color: @main_black;
			font-weight: normal;
			@media screen and (min-width: @pc_w){
				font-size: @fsz_s;
			}
		}
	}
}

/*::::::::::::::::::::::::::::::::::
個別スタイル
:::::::::::::::::::::::::::::::::::*/

// ベネトン
#benetton{
	@media screen and (min-width: @pc_w){
		.conts_list_goods{
			.conts_list_goods_price{
				transform: translate3d(0,378px,0);
			}
		}
	}
}

//エムドゥー

#mdeux{
	@media screen and (min-width: @pc_w){
		.conts_list_goods_photo{
			&.ver_bottom{
				img{
					transform: translate3d(0,-15px,0);
				}
			}
		}
	}
}

/* fixnav-------------------------------------------- */

.fixnav_wrap{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #fff;
	z-index: 999;
}

.fixnav{
	width: 100%;
	max-width: @sp_max_w;
	margin: 0 auto;
	@media screen and (min-width: @pc_w){
		width: @pc_w;
		max-width: @pc_w;
	}
	&:after{
	  .clear_fix
	}
	.item{
		width: 25%;
		float: left;
		padding: 10px 0;
		background-origin: padding-box;
		position: relative;
		.before{
			.com_hover;
		}
		&.search .before{
			background: @color_gray;
		}
		&.theme01 .before{
			background: @color_Key01_bg;
		}
		&.theme02 .before{
			background: @color_Key02_bg;
		}
		&.theme03 .before{
			background: @color_Key03_bg;
		}
		a{
			display: block;
			width: 100%;
			padding: 10px 0;
			border-right: @main_black dotted 2px;
			position: relative;
			z-index: 2;
			@media screen and (min-width: @pc_w){
				padding: 0;
			}
			img{
				width: 32px;
				height: 32px;
				margin: 0 auto;
				position: relative;
				z-index: 2;
				@media screen and (min-width: @pc_w){
					width: 248px;
					height: 112px;
				}
			}
		}
		&:last-child a{
				border-right: none;
		}
	}
}