@charset "UTF-8";


/*------------------------------------------------------------
	RESET
------------------------------------------------------------*/

#contsBody,
div#container {
	padding-top: 0;
}

/*------------------------------------------------------------
	MAIN VISUAL
------------------------------------------------------------*/


#main-vis {
	margin-bottom: 40px;
}

@media only screen and (min-width: 768px) {
	
	#main-vis {
		margin: 110px auto 60px;
	}
	
}

#main-vis .carusel {
	width: 100%;
	margin: 0 auto 0;
}

@media only screen and (min-width: 768px) {
	
	#main-vis .carusel {
		width: calc(100% - 60px);
		min-width: 1240px;
		max-width: 1480px;
	}
	
}




/*------------------------------------------------------------
	タブ
------------------------------------------------------------*/

#product-list {
	margin-bottom: 50px;
}


#tab-select {
	width: 100%;
	text-align: center;
	font-size: 0;
	margin: 0 auto 10px;
}

@media only screen and (min-width: 768px) {
	
	#product-list {
		max-width: 1080px;
		margin: 0 auto 120px;
	}
	
	#tab-select {
		max-width: 900px;
		margin: 0 auto 5px;
	}

}


#tab-select li {
	display: inline-block;
	width: calc(100% / 3);
	font-size: 1.3rem;
	text-align: center;
	padding: 0;
}

#tab-select li a {
	display: block;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #999;
	padding-bottom: 10px;
	text-decoration: none;
}

#tab-select li a.selected {
	color: #2c2c2c;
	position: relative;
}

#tab-select li a.selected:after {
	display: block;
	content: '';
	width: 100%;
	height: 2px;
	background: #1c1c1c;
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
}

#tab-select li:hover a {
	color: #2c2c2c;
}


@media only screen and (min-width: 768px) {
	
	#tab-select li {
		font-size: 1.7rem;
		padding: 0 2%;
	}
	
	#tab-select li a {
		height: 40px;
	}
	
}


/* 商品紹介 */
#tab-panel {
	width: 100%;
}

#tab-panel li {
	justify-content: center;
	align-items: flex-start;
}


@media only screen and (max-width: 767px) {
	
	#tab-panel .oneThird {
		width: calc(100% / 3);
	}

}

#tab-panel .oneThird:last-child {
	margin-right: 0;

}

#tab-panel .oneThird img {
	padding: 10px;
}

#tab-panel .oneThird img:hover {
	opacity: 0.8;
}

#tab-panel .oneThird p {
	font-size: 1.1rem;
	line-height: 1.6;
	text-align: center;
}

#tab-panel .oneThird p a {
	font-weight: 600;
	color: #2c2c2c;
	text-decoration: none;
}

@media only screen and (min-width: 768px) {
	
	#tab-panel .oneThird p {
		font-size: 1.5rem;
		line-height: 1.8;
		letter-spacing: 1px;
		text-align: center;
	}
	
	#tab-panel .oneThird p a:hover {
		text-decoration: underline;
	}
		
}


#tab-panel .oneThird p span.price {
	font-size: 1.1rem;
	font-weight: 600;
}

#tab-panel .oneThird p span.price span {
	font-size: 1rem;
}


@media only screen and (min-width: 768px) {
	
	#tab-panel .oneThird p span.price {
		font-size: 1.6rem;
	}
	
	#tab-panel .oneThird p span.price span {
		font-size: 1.1rem;
	}

	
}


/*------------------------------------------------------------
	コンセプト
------------------------------------------------------------*/

#concept-area {
	margin-bottom: 50px;
}

#concept-area:nth-of-type(2) {
	margin-bottom: 70px;
}

@media only screen and (min-width: 768px) {
	
	#concept-area {
		min-width:1240px;
		max-width: 1320px;
		margin: 0 auto 100px;
		padding: 0 30px;
	}
	
	#concept-area:nth-of-type(2) {
		margin-bottom: 140px;
	}
	
}

@media only screen and (max-width: 769px) {
	
	#concept-area div.oneHalf {
		width: 90%;	
		margin: 0 auto;
	}
	
}

@media only screen and (min-width: 768px) {
	
	div.oneHalf:nth-child(2n) {
		padding-left: 8%;		
	}

}


#concept-area .oneHalf .concept-inner p:not(:last-child) {
	margin-bottom: 10px;
}

h2 {
	font-size: 5vw;
	font-weight: 600;
	line-height: 1.8;
	text-align: center;
	margin: 0 0 20px;
	color: #000;
}

#concept-area .oneHalf a.button {
	margin-top: 30px;
}

#concept-area .oneHalf img {
	margin: 40px auto 0;
}

@media only screen and (min-width: 768px) {
	
	#concept-area .oneHalf .concept-inner {
		width: 520px;
		padding: 0 20px 40px;
		margin: 0 auto;
	}
	
	h2 {
		font-size: 2.4rem;
		margin: 20px 0 30px;
	}
	
	#concept-area .oneHalf a.button {
		margin-top: 40px;
	}
	
	#concept-area .oneHalf img {
		max-width: 360px;
		margin: 60px auto 0;
	}

}


#concept-area figure.oneHalf {
	display: block;
	background: url(../img/top/img_01.jpg) left bottom / cover no-repeat;
	height: 80vw;
	margin-bottom: 30px;
}

#concept-area:nth-of-type(2) figure.oneHalf {
	background: url(../img/top/img_02.jpg) left bottom / cover no-repeat;
}

@media only screen and (min-width: 768px) {
	
	#concept-area figure.oneHalf {
		height: auto;
		margin: 0;
	}
	
}





/*------------------------------------------------------------
	もっと見るボタン
------------------------------------------------------------*/

div.contents a.button {
	margin: 20px auto 10px;
}

@media only screen and (min-width: 813px) {

	div.contents a.button {
		width: 210px;
		font-size: 1.2rem;
		right: 0;
		text-indent: -1em;
		margin: 0 auto;
		position: absolute;
		top: 6px;
	}

}

../