@charset 'UTF-8';


/*------------------------------------------------------------
	MAIN VIS 画像
------------------------------------------------------------*/

#main-vis-area #main-vis {
	background-image: url('../img/lineup/main_sp.jpg') ;
}

@media only screen and (min-width: 813px) {
	
	#main-vis-area #main-vis {
		background-image: url('../img/lineup/main_pc.jpg') ;
	}
		
}

/*------------------------------------------------------------
	中見出しテキスト
------------------------------------------------------------*/

.conts-box h4 {
	font: 500 1.5rem/2 'Roboto', sans-serif;
	color: #000;
	text-align: left;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
	margin-bottom: 10px;
	position: relative;
}

.conts-box h4:nth-of-type(2) {
	margin-top: 20px;
}

.conts-box h4 span {
	font-size: 1.3rem;
	position: absolute;
	top: 2px;
	right: 0;
}

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

	.conts-box h4 {
	    font-size: 2rem;
	    letter-spacing: 1px;
	    padding-bottom: 15px;
	    margin-bottom: 20px;
	}
	
	.conts-box h4 span {
		font-size: 1.5rem;
		top: 12px;
	}

}

/*------------------------------------------------------------
	メニューボックス
------------------------------------------------------------*/

@media only screen and (min-width: 813px) {
	
	#product-list {
		max-width: 1400px;
		margin: 0 auto 120px;
	}
	
}

.product-box {
	text-align: justify;
	margin: 20px 0 0;
}

@media only screen and (min-width: 813px) {
	
	.product-box {
		margin: 40px 0;
	}
	
}

.product-box .one-third {
	margin-bottom: 40px;
}

.product-box .one-third:last-child,
.product-box .one-third figure {
	margin-bottom: 0;
}

@media only screen and (min-width: 813px) {
	
	.product-box .one-third {
		margin-bottom: 50px;
	}
	
	.product-box .one-third:nth-child(n+4) {
		margin-bottom: 0;
	}
	
	/*商品画像*/
	.product-box .one-third figure {
		margin-bottom: 15px;
	}
	
	.product-box .one-third figure a:hover img {
		opacity: 0.8;
	}
	
}


/*LAUBEST LOGO*/
.product-box div.brand-name {
	display: block;
	background: url(../img/lineup/brand-name.svg) left top / contain no-repeat;
	width: 80px;
	height: 15px;
	text-indent: -9999px;
}

.product-box dl {
	margin: 10px 0 15px;
}

.product-box dl dt {
	font-size: 1.7rem;
	font-weight: 600;
	margin-bottom: 10px;
}

.product-box dl dt span {
	display: block;
	font-size: 1.2rem;
	line-height: 1.5;
}

.product-box dl dt a {
	display: inline-block;
	color: #000;
	cursor: pointer;
	position: relative;
}

.product-box dl dt a:hover {
	color: #3e5689;
}

.product-box dl dt a:after {
	content: '';
	display: inline-block;
	background: url(../img/common/bg_exlink_gry.svg) no-repeat right center;
    background-size: 10px 9px;
    width: 10px;
    height: 9px;
    margin-left: 6px;
}

@media only screen and (min-width: 813px) {
	
	.product-box dl {
		margin: 5px 0 15px;
	}
	
	.product-box dl dt {
		margin-bottom: 15px;
	}
	
	.product-box dl dt span {
		font-size: 1.3rem;
	}

}

.product-box dl dd {
    background: #f2f3f4;
    padding: 12px 15px 10px;
    line-height: 1.8;
}



/*販売価格*/
.price-list {
	font-size: 1.3rem;
}

@media only screen and (min-width: 813px) {
	
	.price-list {
		font-size: 1.4rem;
	}
	
}

.price-list li {
	line-height: 28px;
	margin: 0 5px 5px 0;
	float: left;
}

.price-list li span.box {
	display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    border: 1px solid #ccc;
    padding: 6px;
    margin-right: 3px;
}

@media only screen and (min-width: 813px) {
	
	.price-list li {
		margin: 0 15px 5px 0;
	}
	
}

.price-list li.teiki {
	color: #b1697e;
}

.price-list li.teiki span.box {
	border: 1px solid #b1697e;
	background: #f0e2e5;
	color: #b1697e;
}

.price-list li span.tax {
	font-size: 1.1rem;
}

/*購入ボタン*/
.product-box a.button {
	margin: 0 auto;
}

@media only screen and (min-width: 813px) {
	
	/*購入ボタン*/
	.product-box a.button {
		margin: 15px auto 0;
	}

}

/*------------------------------------------------------------
	MODAL 設定
------------------------------------------------------------*/

.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1500;
}

.modal__bg{
    background: rgba(205,205,205,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal__content {
	background: #fff;
	width: 90vw;
	max-width: 560px;
	padding: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 200;
	transform: translate(-50%,-50%);
}

.modal__content p.modal-ttl {
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 10px;
}

.modal__content a.js-modal-close {
	display: block;
	margin: 20px auto 0;
	text-align: center;
	text-decoration: none;
}

.modal__content a.js-modal-close:hover {
	color: #475E91;
}

@media only screen and (min-width: 813px) {
	
	.modal__content{
		background: #fff;
		width: 90vw;
		max-width: 560px;
		padding: 40px;
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 200;
		transform: translate(-50%,-50%);
	}

	.modal__content a.js-modal-close {
		margin: 30px auto 0;
	}

}