/* ===================================================================
CSS information
style info :ブロック用
=================================================================== */
/*-----------------------------------------------
ブロック共通
----------------------------------------------- */

.title_block {
	@include fs(20);
	font-size: 14px;
	border-bottom: 2px solid #861313;
	padding: 0.4em 0;
	margin: 0 10px 10px;
	font-weight: 500;
	text-shadow: 2px 2px 2px rgba($black,.2);
}

/*-----------------------------------------------
オススメ商品
----------------------------------------------- */

#recommend_area {
	margin: 15px 10px 20px 10px;
	padding-top: 10px;
	border: #CCC solid 1px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	h2 {
		font-size: 12px;
		margin-left: 10px;
	}
	li {
		width: 290px;
	}
}

.recommendblock {
	width: 270px;
	padding: 5px 10px 5px 8px;
	margin: 0 auto;
	clear: both;
	img {
		width: 80px;
		float: left;
	}
	.productContents {
		width: 68%;
		float: right;
		text-align: left;
		p {
			clear: both;
			&.comment {
				width: 17em;
				height: 3.7em;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-webkit-text-overflow: ellipsis;
				clear: both;
			}
		}
	}
	.sale_price {
		clear: both;
		float: right;
		text-align: right;
	}
}

#recommend_area {
	div.moveWrap {
		width: 290px;
		height: auto;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
		-webkit-box-sizing: border-box;
	}
	ul.moveWrapBG {
		margin: 0;
		padding: 0;
		display: inline-block;
		position: relative;
		width: 100%;
		height: auto;
		visibility: hidden;
		-webkit-box-sizing: border-box;
	}
	div {
		&.slideMask {
			margin: 0 auto;
			padding: 0;
			margin-right: 1px;
			position: absolute;
			top: 0;
			left: 0;
			border: 4px #FFF solid;
			-webkit-box-sizing: border-box;
		}
		&.moveWrap > ul.move {
			width: 10000px;
			margin: 0;
			padding: 0;
			position: relative;
			left: 0;
			top: 0;
			list-style: none;
			-webkit-transition: all 0.6s ease-in-out;
			-webkit-transform: translate3d(0, 0, 0);
			margin: 0;
			padding: 0;
			display: none;
			li.slideUnit {
				width: 290px !important;
				margin: 0;
				padding: 0;
				float: left;
				list-style: none;
				text-align: center;
				-webkit-box-sizing: border-box;
			}
		}
	}
	li.slideUnit > div {
		padding: 4px;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		-webkit-box-sizing: border-box;
	}
	div.flickSlideBottom {
		width: 100%;
		margin-top: 5px;
		border-top: #DBDBDB solid 1px;
		background: -moz-linear-gradient(center top, #FFFFFF 0%, #DEE4EA 95%, #FFFFFF 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(0.95, #DEE4EA), color-stop(0, #FFFFFF));
		border-bottom-right-radius: 8px;
		-webkit-border-bottom-right-radius: 8px;
		-moz-border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
		-webkit-border-bottom-left-radius: 8px;
		moz-border-bottom-left-radius: 8px;
		div {
			&.bottomLeft {
				display: table-cell;
				-webkit-box-sizing: border-box;
				-webkit-box-shadow: rgba(0, 0, 0, 0.09766) 0px 1px 3px, rgba(255, 255, 255, 1) 0px 0px 0px inset;
				vertical-align: middle;
				padding: 0 10px;
			}
			&.bottomRight {
				display: table-cell;
				-webkit-box-sizing: border-box;
				-webkit-box-shadow: rgba(0, 0, 0, 0.09766) 0px 1px 3px, rgba(255, 255, 255, 1) 0px 0px 0px inset;
				vertical-align: middle;
				padding: 0 10px;
				font-size: 16px;
				font-weight: bold;
				color: #7F7F7F;
				background-color: transparent;
				border-bottom-right-radius: 8px;
				-webkit-border-bottom-right-radius: 8px;
				-moz-border-bottom-right-radius: 8px;
				border-left: #DBDBDB solid 1px;
			}
			&.bottomLeft {
				font-size: 16px;
				font-weight: bold;
				color: #7F7F7F;
				background-color: transparent;
				border-bottom-left-radius: 8px;
				-webkit-border-bottom-left-radius: 8px;
				-moz-border-bottom-left-radius: 8px;
				border-right: #DBDBDB solid 1px;
				&:after {
					font-size: 10px;
					padding: 5px;
					text-align: left;
					display: table-cell;
				}
				&:before {
					margin-top: 2px;
					padding: 5px;
					text-align: left;
					display: table-cell;
				}
			}
			&.bottomRight {
				&:before {
					font-size: 10px;
					padding: 5px;
					text-align: right;
					display: table-cell;
				}
				&:after {
					margin-top: 2px;
					padding: 5px;
					text-align: right;
					display: table-cell;
				}
			}
		}
		ul.slidePager {
			width: 100%;
			margin: 0;
			padding: 0;
			display: table-cell;
			text-align: center;
			li.slidePagerPointer {
				font-size: 10px;
				width: 6px;
				height: 6px;
				margin: 12px 6px 6px 6px;
				display: inline-block;
				background-color: #CCC;
				border-radius: 6px;
				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				&.active {
					background-color: #333;
				}
			}
		}
	}
}

/*-----------------------------------------------
カテゴリリスト（アコーディオン）
----------------------------------------------- */

#category_area {
	margin-bottom: 20px;
}

#categorytree {
	ul {
		margin: 10px 10px 0 10px;
		border: #A9ACAB solid 1px;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		background: #f4F6F8;
	}
	li {
		font-size: 16px;
		font-weight: bold;
		-webkit-transition: opacity 0.3s ease-in;
		-webkit-transition-delay: 0.2s;
		clear: both;
		border-bottom: #CCC solid 1px;
		border-top: #FFF solid 1px;
		line-height: 1.3em;
		vertical-align: middle;
		ul {
			border: none;
			margin: 0;
			padding: 0;
		}
		&:first-child {
			border-top: none;
		}
		li:first-child {
			border-top: #CCC solid 1px;
		}
		&:last-child, li:last-child {
			border-bottom: none;
		}
	}
	ul li a {
		padding: 0.6em 0;
	}
	.category_body {
		display: inline-block;
		a {
			width: 100%;
			display: inline-block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
		}
	}
	.category_header {
		width: 1.5em;
		margin: 0 6px 0 8px;
		display: inline-block;
		background: transparent;
		text-align: right;
		&.plus, &.minus {
			color: #FFF;
			margin: 0 6px 0 8px;
			padding: 2px 0;
			display: inline-block;
			text-align: center;
			width: 1.5em;
			height: 1.3em;
			-webkit-border-radius: 8px;
			background: #515866;
			background: -moz-linear-gradient(center top, #6D7481 0%, #515866 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6D7481), color-stop(1, #515866));
			-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.7);
			-webkit-border-radius: 3px;
		}
		&.plus > a, &.minus > a {
			width: 1.5em;
			color: #FFF;
			display: inline-block;
			margin: 0;
			padding: 0;
			text-decoration: none;
		}
	}
	.level1 {
		.category_header {
			width: 1.5em;
		}
		.category_body {
			width: 100%;
			font-size: 13px;
			display: block;
			line-height: 1;
			padding: 10px 15px;
			box-sizing: border-box;
			a {
				padding: 0;
			}
		}
	}
	.level2 {
		.category_header {
			width: 1.5em;
			margin-left: 2em;
		}
		.category_body {
			width: 79%;
		}
	}
	.level3 {
		.category_header {
			width: 1.5em;
			margin-left: 3.4em;
		}
		.category_body {
			width: 71.5%;
		}
	}
	.level4 {
		.category_header {
			width: 1.5em;
			margin-left: 4.8em;
		}
		.category_body {
			width: 64%;
		}
	}
	.level5 {
		.category_header {
			margin-left: 6.2em;
		}
		.category_body {
			width: 56%;
		}
	}
	.category_body a {
		&:link, &:visited {
			color: #000;
			text-decoration: none;
			cursor: pointer;
		}
	}
	.category_header {
		&.plus a, &.minus a {
			color: #FFF;
		}
	}
}

/*レベル調整*/

/*リンクカラー*/

/*-----------------------------------------------
news
----------------------------------------------- */

#news_area {
	li {
		display: block;
		clear: both;
		padding: 10px;
		line-height: 1.3;
		background-color: #FEFEFE;
		background: -moz-linear-gradient(center top, #FEFEFE 0%, #EEEEEE 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE), color-stop(1, #EEEEEE));
		border-top: #FFF solid 1px;
		border-bottom: #CCC solid 1px;
	}
	.news_date {
		clear: both;
		font-size: 12px;
		letter-spacing: 0.1em;
	}
	.post_wrap {
		padding: 15px;
		margin: 0 10px;
		height: 200px;
		overflow: scroll;
		background: $silver;
		.post_date {
			display: inline-block;
			@include fs(16);
			color: #888;
			margin: 0 0 3px;
		}
		.label {
			@include fs(15);
			color: #fff;
			display: inline-block;
			width: 80px;
			text-align: center;
			border-radius: 4px;
			padding: .4em .4em .4em;
			line-height: 1;
			vertical-align: middle;
			position: relative;
			margin-left: 1em;
			margin-top: -.5em;
		}
		.post_ttl {
			display: block;
			margin: 3px 0 10px;
		}
		.post_cont {
			font-size: 13px;
			margin: 0 0 15px;
			padding: 0 0 15px;
			border-bottom: 1px dashed #aaa;
		}
	}
}

.induction_bnr {
	padding: 10px;
}

.closing_section {
	padding: 10px 0;
	background: $silver;
	.closing_ttl {
		text-align: center;
		@include fs(22);
	}
	a {
		display: block;
		margin: 10px 10px 0;
		img {
			border-radius: 4px;
		}
	}
}

#category_area {
	.title_block {
		margin-bottom: 0;
	}
}
.cat_list {
	margin: 0 10px;
	li {
		a,span {
			color: $baseFontColor;
			display: block;
			padding: 1.5em 0em 1.5em 4em;
			background: $white;
			border-bottom: 1px solid $midsilver;
			position: relative;
			@include fs(18);
			@include fontAwesomeAfter('\f054',$grey,80%);

			&::after {
				position: absolute;
				top: 50%;
				right: 0;
				margin-top: -.4em;
			}

			img {
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -1.5em;
				width: 3em;
			}
		}

		span::after {
			content: '\f078';
		}
		span.open::after {
			content: '\f077';
		}
	}
	.sub {
		display: none;
		li {
			a {
				padding: 1em 0em 1em 4em;
				@include fs(16);

				&::before {
					content: "◆";
					display: block;
					position: absolute;
					top: 50%;
					margin-top: -.8em;
					left: 1.2em;
					color: rgba($sub,.2);
				}

				&::after {
					right: 10px;
				}
			}
		}
		&.col-2 {
			@include clearfix;

			li {
				width: 50%;
				float: left;
				box-sizing: border-box;

				&:nth-child(2n) {
					border-left: 1px solid $midsilver;
				}
			}
		}
	}
}