@charset "UTF-8";

/*　メインビジュアル設定　*/
.tnj #mainVisual{
	background-image:url(/images/top/img-top-product01.jpg);
}
.maxi #mainVisual{
	background-image:url(/images/top/img-top-product02.jpg);
}
.tea #mainVisual{
	background-image:url(/images/top/img-top-product03.jpg);
}
.koso #mainVisual{
	background-image:url(/images/top/img-top-product04.jpg);
}
.puree #mainVisual{
	background-image:url(/images/top/img-top-product05.jpg);
}
.olive #mainVisual{
	background-image:url(/images/top/img-top-product06.jpg);
}

.productGrp #mainVisual h1{
	font-family: 'Noto Serif JP', serif;
	font-weight:500;
}

/*　ぱんくず　*/
#pankuzu{
	margin:30px auto;
	width:1520px;
}
@media screen and (max-width: 1600px){#pankuzu{width:1200px;}}
/*　sec02　商品購入画面　*/
#sec02{
	width:1520px;
	margin:auto;
}
@media screen and (max-width: 1600px){#sec02{width:1200px;}}
#sec02 p{
	font-size:18px;
	line-height:32px;
	margin:30px 0;
}
/*　右側カート機能など　*/
#sec02right{
	float:right;
	width:400px;
}
#sec02right h2{
	font-size:32px;
	font-weight:bold;
}
#selectSet p{
	position:relative;
	float:left;
	text-align:center;
	margin:0;
	margin-right:20px;
	padding:0;
	border:solid 1px #ddd;
	height:55px;
	width:70px;
	cursor:pointer;
}
#selectSet span{
	position:absolute;
	display:block;
	top:50%;
	transform:translateY(-50%);
	margin:auto;
	right:0;
	left:0;
	
	font-size:14px;
	line-height:14px;
}

.selectedSet1 #set1{outline:solid 5px #000;}
.selectedSet2 #set2{outline:solid 5px #000;}
.selectedSet3 #set3{outline:solid 5px #000;}
.selectedSet4 #set4{outline:solid 5px #000;}

#submitForm div{
	display:none;
}

.selectedSet1 #set1Form{display:block;}
.selectedSet2 #set2Form{display:block;}
.selectedSet3 #set3Form{display:block;}
.selectedSet4 #set4Form{display:block;}

#sec02 .sale-price{
	font-weight:bold;
	font-size:22px;
	margin-top:70px;
}
#sec02 label{
	font-size:14px;
}
#sec02 select{
	padding:6px 16px;
}
#sec02 .submit{
	background:#E1A162;
	font-size:26px;
	font-weight:bold;
	text-align:center;
	padding:20px 10px;
	cursor:pointer;
}

#sec02 h3{
	border-bottom:solid 1px #9A8876;
	padding:30px 0;
	font-size:20px;
}
/*　左側商品画像など　*/
#sec02left{
	width:1000px;
	margin-right:520px;
}
@media screen and (max-width: 1600px){#sec02left{width:780px;}}
.productVisual{
	position:relative;
	width:1000px;
	height:578px;
}
@media screen and (max-width: 1600px){.productVisual{width:780px;height:440px;}}
.productVisual img{
	position:absolute;
	top:0;
	
	width:100%;
}
.productVisual2, .productVisual3, .productVisual4{
	display:none;
}

.productVisual1 img{
	display:none;
}
.selectedSet1 .set1Visual{display:inline-block;}
.selectedSet2 .set2Visual{display:inline-block;}
.selectedSet3 .set3Visual{display:inline-block;}
.selectedSet4 .set4Visual{display:inline-block;}
.selectedSet1 .productVisualThumb4, .selectedSet2 .productVisualThumb4{display:none;}
.tea .selectedSet1 .productVisualThumb4, .tea .selectedSet2 .productVisualThumb4, .koso .selectedSet1 .productVisualThumb4, .koso .selectedSet2 .productVisualThumb4{display:inline-block;}

.productVisualThumb{
	width:1000px;
	margin-top:60px;
	text-align:center;
}
@media screen and (max-width: 1600px){.productVisualThumb{width:780px;}}
.productVisualThumb1{
	opacity:0.5;
}
.productVisualThumb div, .productVisualThumb img{
	width:150px;
	display:inline-block;
	vertical-align: top;
	border:solid 1px #9A8876;
	margin:0 20px;
	cursor:pointer;
}
@media screen and (max-width: 1600px){.productVisualThumb div, .productVisualThumb img{margin:0 10px;}}

.productVisualThumb1 img{
	display:none;
}
.productVisualThumb div{
	position:relative;
	height:85px;
}
.productVisualThumb div img{
	position:absolute;
	top:0;
	left:0;
	border:none;
	margin:0;
}

#sec02left h3{
	margin-top:100px;
	font-size:26px;
	font-weight:bold;
}
@media screen and (max-width: 1600px){.maxi #sec02left h3{font-size:22px;}}
#sec02left p{
	width:860px;
	margin:30px auto;
	font-size:20px;
	line-height:36px;
}
@media screen and (max-width: 1600px){#sec02left p{width:730px;font-size:18px;}}


/*　comparisonTable　比較表　*/
#comparisonTable{
	width:860px;
	margin:70px;
}
#comparisonTable tr{
	border-bottom:solid 1px #9A8876;
}
#comparisonTable tr.tr1{
	border-bottom:none;
}
#comparisonTable th, #comparisonTable td{
	padding:10px 0;
}
#comparisonTable tr.tr3, #comparisonTable tr.tr5, #comparisonTable tr.tr7{
	background:#F2EEE9;
}
#comparisonTable td{
	text-align:center;
}
#comparisonTable img{
	width:160px;
	display:block;
	margin:auto;
}
#comparisonTable a{
	display:inline-block;
	margin-top:10px;
	padding:4px 10px;
	color:#999;
	background-color:#eee;
	border:solid 1px #ddd;
	pointer-events: none;
}
#comparisonTable a[href]{
	color:#000;
	background-color:#fff;
	border-color:#C2C2C2;
	pointer-events:auto;
}
@media screen and (min-width: 781px) {
	#comparisonTable a[href]:hover{
		opacity:0.6;
	}
}
#comparisonTable th, #comparisonTable td{
	width:240px;
}
#comparisonTable .tableSummary{
	width:140px;
}


/*　secBorder2to3　セクション境目　*/
#secBorder2to3{
	width:100%;
	height:450px;
	background-size:cover;
	background-position:50% 50%;
	margin:100px 0;
}
.tnj #secBorder2to3{
	background-image:url(/images/top/img-top-mainvisual02.jpg);
}
.maxi #secBorder2to3{
	background-image:url(/images/product/img-product-secborder02.jpg);
}
.tea #secBorder2to3{
	background-image:url(/images/product/img-product-secborder03.jpg);
	background-position:center;
}
.koso #secBorder2to3{
	background-image:url(/images/product/img-product-secborder04.jpg);
	background-position:center;
}
.puree #secBorder2to3{
	background-image:url(/images/product/img-product-secborder05.jpg);
}
.olive #secBorder2to3{
	background-image:url(/images/product/img-product-secborder06.jpg);
}


/*　sec3　よくあるご質問　*/
#sec03{
	width:1200px;
	margin:auto;
	margin-bottom:150px;
}
#sec03 h3{
	font-size:26px;
	font-weight:bold;
	border-bottom:solid 1px #9A8876;
	padding:30px 0;
}



/*  ---------------------------------------------------------------
                        レスポンシブ
----------------------------------------------------------------  */
@media screen and (max-width: 780px) {


/*　ぱんくず　*/
#pankuzu{
	width:92%;
}

/*　商品ごとのメインビジュアル設定　*/
.tnj #mainVisual{
	background-image:url(/images/top/img-top-product01.jpg);
}
.maxi #mainVisual{
	background-image:url(/images/product/img-product-maxi-visual01sp.jpg);
}
.tea #mainVisual{
	background-image:url(/images/product/img-product-tea-visual01sp.jpg);
}
.koso #mainVisual{
	background-image:url(/images/product/img-product-koso-visual01sp.jpg);
}
.olive #mainVisual{
	background-image:url(/images/product/img-product-olive-visual01sp.jpg);
}
.puree #mainVisual{
	background-image:url(/images/product/img-product-puree-visual01sp.jpg);
}





/*　sec02　商品購入画面　*/
#sec02{
	width:100%;
}

#sec02right{
	float:none;
	width:100%;
}
#sec02right h2{
	font-size:26px;
	width:92%;
	margin:0 4%;
}
@media screen and (min-width: 600px) {
	#sec02right h2{
		font-size:32px;
	}
}
#sec02 p, #sec02 h3{
	width:92%;
	margin:30px 4%;
}

/*　商品画像　*/
#productVisualWrapperSp{
	position:relative;
	width:100vw;
	height:68vw;
	overflow:hidden;
}
@media screen and (min-width: 600px) {
	#productVisualWrapperSp{
		height:64vw;
	}
}
.productVisual{
	position:absolute;
	width:100vw;
	height:58vw;
}
.productVisual div{
	width:100%;
	height:100%;
}


#selectSet p{
	width:70px;
	margin:20px 4px 30px;
}
@media screen and (min-width: 360px) {
	#selectSet{
		width:92%;
		margin:4%;
	}
}
@media screen and (min-width: 400px) {
	#selectSet p{
		width:70px;
		margin:0 20px 30px 0;
	}
}
#sec02 .sale-price{
	margin-top:0;
}
#sec02 label{
	width:92%;
	margin:auto 4%;
}
#sec02 select{
	margin:auto 4%;
}

#sec02 .submit{
	font-size:18px;
	padding:20px 0;
	text-align:center;
	max-width:320px;
}
@media screen and (min-width: 500px) {
	#sec02 .submit{
		font-size:26px;
		max-width:400px;
	}
}

#sec02left{
	width:100%;
	margin:0;
}

#sec02left p{
	font-size:20px;
}

/*　comparisonTable　比較表　*/
#comparisonTableWrapper{
	width:100%;
	overflow-x:auto;
}
#comparisonTableWrapper h3, #comparisonTable{
	width:92%;
	margin:4%;
}
@media screen and (max-width: 700px) {
	#comparisonTableWrapper h3, #comparisonTable{
		width:620px;
		margin:12px;
	}
	#comparisonTable img{
		width:120px;
	}
	#comparisonTable th, #comparisonTable td{
		width:200px;
	}
	#comparisonTable .tableSummary{
		width:80px;
	}
}
/*　secBorder2to3　セクション境目　*/
#secBorder2to3{
	height:33.33vw;
	margin:60px 0 20px;
	background-image:url(/images/product/img-product-maxi-secborder01sp.jpg);
}

/*　sec3　よくあるご質問　*/
#sec03{
	width:92%;
	margin:auto 4% 50px;
}
#sec03 h3{
	font-size:24px;
}


}