// ==================================================
// Index style setting
// ==================================================
// keyv
// ----------------------------------------
.keyv {
	color: $white;
	overflow: hidden;
	background: #ccc8bf;
	background-image: url(../img/index/keyv_bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	&:before,
	&:after {
		content: "";
		display: block;
		position: absolute;
		width: 1000px;
		height: 100%;
		background: rgba($white,0.5);
		top: 0;
		z-index: 1;
	}
	&:before {
		left: 50%;
		margin-left: -(1140px+60px)*0.5-1000px;
	}
	&:after {
		right: 50%;
		margin-right: -(1140px+60px)*0.5-1000px;
	}
	.slide {
		height: 300px;
		position: relative;
		img {
			width: 2000px;
			position: absolute;
			left: 50%;
			margin-left: -1000px;
			max-width: none;
		}
	}
	.slick-arrow {
		position: absolute;
		top: 50%;
		margin-top: -80px*0.5;
		z-index: 2;
		@include textIn;
		width: 40px;
		height: 80px;
		border: none;
		background: transparent;
		background-size: 40px 80px;
		background-repeat: no-repeat;
		@include opacity(0.8);
		&:hover {
			@include opacity(1);
		}
		&.slick-prev {
			left: 50%;
			margin-left: -(1140px+60px)*0.5-40px;
			background-image: url(../img/index/slick-prev.png);
		}
		&.slick-next {
			right: 50%;
			margin-right: -(1140px+60px)*0.5-40px;
			background-image: url(../img/index/slick-next.png);
		}
	}
}
@include ltMD {};
@include ltSM {
	.keyv {
		&:before {
			margin-left: -(720px+40px)*0.5-(1000px);
		}
		&:after {
			margin-right: -(720px+40px)*0.5-(1000px);
		}
		.slide {
			height: 300px*(720/1140);
			img {
				width: 2000px*(720/1140);
				margin-left: -1000px*(720/1140);
			}
		}
		.slick-arrow {
			margin-top: -60px*0.5;
			width: 30px;
			height: 60px;
			background-size: 30px 60px;
			&.slick-prev {
				margin-left: -(720px+40px)*0.5-30px;
			}
			&.slick-next {
				margin-right: -(720px+40px)*0.5-30px;
			}
		}
	}
};
@include ltXS {
	.keyv {
		// DOM
		// ----------------------------------------
		.slick-list {
			height: 189.47px;
			.slick-track {
				height: 189.47px;
				.slide {
					position: absolute !important;
					left: 0 !important;
					height: 189.47px;
				}
			}
		}
	}
};
@include ltXXS {};
// ==================================================
// Index Modules
// ==================================================
.headding_index {
	img {
		width: 45px;
	}
	font-size: 24px;
	line-height: 45px;
	border-bottom: 3px solid $sub;
	padding: 7px;
	font-weight: bold;
	text-shadow: 2px 2px 2px rgba($trueblack,0.3);
	margin-bottom: 10px;
}
.container-mb {
	margin-bottom: 15px;
}
@include ltMD {
	.container-mb {
		margin-bottom: 15px*0.7;
	}
};
@include ltSM {
	.container-mb {
		margin-bottom: 15px*0.5;
	}
};
@include ltXS {
	.container-mb {
		margin-bottom: 0;
	}
};
@include ltXXS {};

// ==================================================
// Section style setting
// ==================================================
.index_content {
	& > .container:first-child {
		margin-top: -60px;
	}
	& > section,
	& > .section {
		padding-top: 20px;
	}
	// cam_bnr
	// ----------------------------------------
	.bnr,.square {
		background: $white;
	}
	// searchbox
	// ----------------------------------------
	.searchbox {
		display: table;
		background: $midsilver;
		padding: 10px 0 0;
		margin-bottom: 10px;
		.subttl {
			display: table-cell;
			vertical-align: middle;
			padding-left: 20px;
			width: 180px;
			text-shadow: 2px 2px 2px rgba($trueblack,0.3);
		}
		ul {
			display: table-cell;
			width: 960px;
			li {
				float: left;
				margin-left: 10px;
				margin-bottom: 10px;
				background: $white;
				box-shadow: 2px 2px 2px rgba($trueblack,0.1);
			}
			&.col_3 img {
				width: 306px;
			}
			&.col_4 img {
				width: 227px;
			}
			&.col_5 img {
				width: 180px;
			}
			&.native {
				width: 100%;
				img {
					width: 140px;
				}
				li {
					a {
						display: block;
						text-align: center;
						width: 178px;
					}
					&.large a {
						width: 366px;
						img {
							width: 366px;
							&.md {
								display: none;
							}
						}
					}
				}
			}
		}
	}
	// index_news
	// ----------------------------------------
	.index_news {
		width: 568px;
		border: 2px solid $sub;
		.ttl {
			background: $sub;
			color: $white;
			font-weight: bold;
			@include fs(24);
			padding: 5px 10px;
		}
		.post_wrap {
			padding: 10px 20px;
			height: 374px;
			overflow-y: scroll;
			&.early {
				height: 252px;
			}
		}
		.post_date {
			display: block;
			color: $midgrey;
			@include fontAwesome('\f040',inherit,inherit);
		}
		.label {
			color: $white;
			display: inline-block;
			width: 80px;
			text-align: center;
			border-radius: 4px;
		}
		.post_cont {
			padding: 10px 0;
			border-bottom: 1px solid $lightgrey;
			margin-bottom: 10px;
		}
	}
	// intro
	// ----------------------------------------
	.intro {
		width: 568px;
		img {
			margin-top: 2px;
		}
	}
	// shoplist
	// ----------------------------------------
	.shoplist {
		width: 570px;
		img {
			margin-bottom: 2px;
		}
	}
}
@include ltMD {
	.index_content {
		// cam_bnr
		// ----------------------------------------
		.cam_bnr {}
		// searchbox
		// ----------------------------------------
		.searchbox {
			display: block;
			.subttl {
				display: block;
				br {
					display: none;
				}
				width: 100%;
			}
			ul {
				display: block;
				@include clearfix;
				li {
					margin-left: 6px;
				}
				&.col_3 {
					margin-left: 1px;
					li {
						margin-left: 5px;
					}
				}
				&.col_4 {
					margin-left: 1px;
				}
				&.col_5 {
					margin-left: 2px;
				}
				&.native {
					li {
						margin-left: 10px;
						a {
							width: 145px;
						}
						&.large a {
							width: 300px;
							img {
								&.md {
									display: inherit;
								}
								&.lg {
									display: none;
								}
							}
						}
					}
				}
			}
		}
		// index_news
		// ----------------------------------------
		.index_news {
			width: 470px;
			.post_wrap {
				height: 300px;
				&.early {
					height: 201px;
				}
			}
		}
		// intro
		// ----------------------------------------
		.intro {
			width: 470px;
			img {
				margin: 0;
			}
		}
		// shoplist
		// ----------------------------------------
		.shoplist {
			width: 470px;
			img {
				margin: 0;
			}
		}
	}
};
@include ltSM {
	.index_content {
		// cam_bnr
		// ----------------------------------------
		.cam_bnr {
		}
		// searchbox
		// ----------------------------------------
		.searchbox {
			.subttl {
				br {
				}
			}
			ul {
				li {
					margin-left: 1%;
				}
				&.col_3 {
					margin-left: 0;
					width: 100%;
					li {
						width: 32%;
						margin-left: 1%;
					}
				}
				&.col_4 {
					margin-left: 0;
					width: 99%;
					li {
						width: 24%;
					}
				}
				&.col_5 {
					margin-left: 0;
					width: 99%;
					li {
						width: 19%;
					}
				}
				&.native {
					margin-left: 0;
					img {
					}
					li {
						width: 15%;
						margin-left: 10px;
						a {
							width: 100%;
						}
						&.large {
							width: 32%;
							a {
								width: 100%;
								img {
								}
							}
						}
					}
				}
			}
		}
		// index_news
		// ----------------------------------------
		.index_news {
			width: 360px;
			.ttl {
			}
			.post_wrap {
				height: 222px;
				&.early {
					height: 146px;
				}
			}
			.post_date {
				display: inline;
			}
			.post_ttl {
				display: block;
				font-weight: bold;
			}
			.label {
			}
			.post_cont {
			}
		}
		// intro
		// ----------------------------------------
		.intro {
			width: 360px;
			img {
				// margin: 0;
			}
		}
		// shoplist
		// ----------------------------------------
		.shoplist {
			width: 360px;
			img {
				// margin: 0;
			}
		}
	}
};
@include ltXS {};
@include ltXXS {};
// ==================================================
// Closing style setting
// ==================================================
// f_closing
// ----------------------------------------
.f_closing {
	@include clearfix;
	padding-top: 50px;
	padding-bottom: 35px;
	border-top: 2px solid $midsilver;
	margin-top: 40px;
	.f_tel {
		width: 357px;
		float: left;
	}
	ul {
		@include clearfix;
		width: 770px;
		float: right;
	}
	li {
		float: left;
		margin-left: 15px;
		margin-bottom: 15px;
		a {
			display: block;
			width: 370px;
			height: 60px;
			padding-top: 15px;
			box-sizing: border-box;
			background: $base;
			text-align: center;
			@include noHover;
			&:hover {
				background: #FF5500;
			}
			img {
				width: 345px;
			}
		}
	}
}
@include ltMD {
	.f_closing {
		.f_tel {
			width: 32%;
		}
		ul {
			width: 66%;
		}
		li {
			margin-left: 2%;
			width: 48%;
			a {
				width: 100%;
				height: 50px;
				img {
					width: 96%;
					@include Crisp;
				}
			}
		}
	}
};
@include ltSM {
	.f_closing {
		li {
			margin-bottom: 2%;
			a {
				padding-top: 12px;
				height: 40px;
			}
		}
	}
};
@include ltXS {};
@include ltXXS {};