@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: #333;
	text-decoration: none;
}
a:hover {
	color: #999;
}

.jp {
	font-family: 'Noto Serif JP', serif;
}
.en {
	font-family: 'Roboto', sans-serif;
}

body {
	background: #fff;
	color: #333;
	font-family: 'Hina Mincho', serif;
	font-size: 15px;
	line-height: 1.8;
	letter-spacing: 1px;
}

/* --------------- TOP IMAGE --------------- */
#home-slider-wrap {
	width: 100vw;
	height: 56vw;
	max-width: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
}
#home-slider {
	float: left;
	width: 100%;
	height: 100%;
	max-height: 100%;
}
.flexslider {
	height: 100%;
	overflow: visible !important;
}
.flexslider .slides > li {
	background-position: center center;
}
.flexslider .slides li video {
	max-width: 100%;
}

.top-logo {
	width: 20vw;
	height: 30vw;
	background: url("../img/top-logo.png") no-repeat;
	background-size: 100%;
	position: absolute;
	left: calc(50vw - 10vw);
	top: 15vh;
	z-index: 2;
}

/* --------------- CONCEPT --------------- */
#main-content {
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	padding-top: 64vw;
}

.concept {
	width: 100%;
}
.concept img {
	width: 100%;
}

/* --------------- PRODUCTS --------------- */
.products {
	width: 1080px;
	height: auto;
	margin: 0 auto;
	padding: 18vh 0 0;
	clear: both;
}
.products ul li {
	width: 270px;
	float: left;
	text-align: center;
	margin-bottom: 12vh;
	
}
.products ul li img.products-img {
	width: 100%;
}
.products ul li img.products-price {
	width: 81px;
}
.products ul li p {
	line-height: 1.4;
	margin-bottom: 0.8em;
}
.products p.taxin {
	width: 77px;
	height: 8px;
	background: url("../img/taxin.png") no-repeat;
	background-size: 100%;
	text-indent: -9999%;
	display: inline-block;
	float: right;
	margin: -9vh 96px 0 0;
}

/* --------------- MESSAGET --------------- */
.message {
	text-align: center;
	font-size: 18px;
	margin: 10vh auto 0;
	clear: both;
}
.message a {
	text-decoration: underline;
}

/* --------------- FOOTER --------------- */
footer {
	width: 100%;
	padding-bottom: 10vh;
}
.footer-content {
	width: 700px;
	height: 157px;
	background: url("../img/footer.png") no-repeat;
	background-size: 100%;
	margin: 10vh auto 0;
	position: relative;
}
.footer-content h4,
.footer-content h5,
.footer-content h6 {
	text-indent: -9999%;
}
.footer-content a.footer-link {
	display: block;
	position: absolute;
	top: 120px;
	left: 315px;
	width: 170px;
	height: 25px;
}
p.copy {
	width: 338px;
	height: 13px;
	background: url("../img/copy.png") no-repeat;
	background-size: 100%;
	margin: 10vh auto 0;
	text-indent: -9999%;
}

.sp {
	display: none;
}

/* =Small Window
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (max-width: 1200px) {
	.products {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 15vh 0 0;
	}
	.products ul li {
		width: 25%;
		float: left;
		text-align: center;
		margin-bottom: 10vh;
	}
	.products p.taxin {
		margin: -8vh 5vw 0 0;
	}
}

/* =Responsiveness: Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (max-width: 767px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	#main-content {
		width: 90%;
		max-width: 90%;
		margin: 0 auto;
		padding-top: 40vh;
	}
	
	/* --------------- TOP IMAGE --------------- */
	.top-logo {
		width: 24vw;
		height: 36vw;
		background: url("../img/top-logo.png") no-repeat;
		background-size: 100%;
		position: absolute;
		left: calc(50vw - 12vw);
		top: 5vh;
	}
	
	/* --------------- PRODUCTS --------------- */
	.products {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 15vh 0 0;
	}
	.products ul li {
		width: 50%;
		float: left;
		text-align: center;
		margin-bottom: 10vh;
	}
	.products p.taxin {
		margin: -8vh calc(45vw - 48.5px) 0;
		float: none;
		clear: both;
		display: block;
	}
	/* --------------- FOOTER --------------- */
	.footer-content {
		width: 90vw;
		height: 73vw;
		background: url("../img/footer-sp.png") no-repeat;
		background-size: 100%;
		margin: 10vh auto 0;
	}
	.footer-content a.footer-link {
		top: 68vw;
		left: 0vw;
		width: 40vw;
		height: 25px;
	}
}