@charset "utf-8";

.ttlWrap{gap: 10px;}
.ttlWrap .linkArea{margin: 0 auto; width: 100%;}
.linkArea .button.pdf span{position: relative;font-weight: normal;padding-left: 1.5em;}
.linkArea .button.pdf span::before{
	position: absolute;
	top: 50%;
	left: 0;
	height: 1.2em;
	width: 1em;
	transform: translateY(-50%);
	background-image: url("../img/common/icon_pdf.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	display: block;
	content: '';
}
.linkArea .button.pdf:hover span::before{background-image: url("../img/common/icon_pdf_g.svg");}

h2.ttl span{font-size: 50%;}

/* productlist */
#productlist{
	position: relative;
	padding: 20px 0 40px 0;
}
#productlist ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 960px;
	gap: 20px 10px;
}
#productlist ul li{
	position: relative;
	margin: 0;
	width: calc(33.333% - 7px);
	max-width: 240px;
	text-align: center;
	font-size: 80%;
	line-height: 1.2em;
}
#productlist ul li a{
	position: relative;
	margin: 0 auto 0.5em auto;
	display: block;
	border-radius: 10px;
	overflow: hidden;
}
#productlist ul li img{
	position: relative;
	margin: 0 auto;
	display: block;
}
#productlist .banner{
	position: relative;
	margin: 0 auto 40px auto;
	width: calc(100% - 30px);
	max-width: 960px;
}
#productlist .banner ul{
	position: relative;
	margin: 0 auto;
	width: 100%;
	gap: 5px;
}
#productlist .banner ul li{
	position: relative;
	margin: 0;
	width: calc(50% - 3px);
}
#productlist .banner ul li a{border-radius: 0;}
#productlist .lead{
	position: relative;
	margin: 20px auto 0 auto;
}

/* product */
#product{
	position: relative;
	margin:  0 auto;
	padding: 0 0 40px 0;
}
#product .productWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
}
#product .imgWrap{
    position: relative;
    margin: 0 auto;
}
#product .catch{
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
	font-size: .18rem;
	color: #de0f2c;
	text-align: center;
	font-weight: 500;
}
#product .catch span{font-size: .14rem;}
#product h4{
	position: relative;
	margin: 30px auto 10px auto;
	color: #fb9a1d;
	border-bottom: solid 1px;
	padding-bottom: 5px;
	font-weight: 500;
}
#product h4 a:link, #product h4 a:visited{color: #fb9a1d;}
#product h4.noborder{color: #078373;border-bottom: none;padding-bottom:0;}
#product .productWrap h5{
	position: relative;
	margin: 0 auto;
	color: #A48712;
	font-weight: 500;
	font-size: .16rem;
}
#product .productWrap p{
	position: relative;
	margin: 0 auto;
}
#product .productWrap .Img{
	position: relative;
	margin: 20px 0;
	width: 100%;
	text-align: center;
}
#product .productWrap .Img.mp0{margin: 0 0 20px 0;}
#product .productWrap .Img .caption{
	position: relative;
	margin: 0 auto;
	padding-top: 5px;
	font-size: .12rem;
	line-height: 1.4em;
	color: #ADADAD;
	text-align: center;
}

#product .bgC{
	margin: 0 0 10px 0;
	background-color: #E7F2E7;
	padding: 20px;
}
#product .bgC .Img{margin: 0;}
#product .pname{
	position: relative;
	margin: 0 auto;
	padding: 0;
	color: #49834F;
	font-size: .16rem;
	font-weight: 500;
}
#product .optionT{
	position: relative;
	padding-top: 5px;
}
#product .optionT .caution{display: block; font-size: .12rem;line-height: 1.6em;}

/* typeList */
#product .typeList{
	position: relative;
	margin: 0 auto;
}
#product .typeList.flexbox{gap: 10px;}
#product .typeList .ttl{width: 7em;}
#product .typeList .txt{width: calc(100% - 7em - 10px);}

/* spec */
#product table.spec{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 2px);
	border: solid 1px #3a393c;
	border-collapse: collapse;
	text-align: center;
	vertical-align: middle;
	table-layout: fixed;
}
#product .wscroll{
	position: relative;
	overflow-x: scroll;
}
#product .wscroll table.spec{
	width: 960px !important;
	margin: 0;
}
#product table.spec thead{
	position: relative;
	background-color: #cde3a9;
	border: solid 1px #3a393c;
}
#product table.spec thead th{
	position: relative;
	padding: 3px;
	width: 33.33%;
	text-align: center;
	border: solid 1px #3a393c;
}
#product table.spec tbody th{
	position: relative;
	padding: 3px;
	background-color: #cde3a9;
	border: solid 1px #3a393c;
	width: 33.33%;
	text-align: center;
}
#product table.spec tbody td{
	position: relative;
	padding: 3px;
	background-color: #ffffff;
	border: solid 1px #3a393c;
	width: 33.33%;
	word-wrap: break-word;
}
#product table.spec th.nwrap{width: 12.5em;}
#product table.spec th.weightT{width: 4em;}
#product table.spec th.w5em{width: 5em;}
#product table.spec th.lastT{width: 8em;}
#product table.spec th span{font-size: .13rem;}

/* caution */
#product .caution{
	position: relative;
	margin: 10px auto 0 auto;
}
#product .caution p{
	margin: 5px auto 0 auto;
	padding:0 0 0 1.2em;
	line-height: 1.4em;
}
#product .caution p::before{
	position: absolute;
	top:0;
	left: 0;
	content: '※';
}

/* attention */
#product .attention{
	position: relative;
	margin: 20px auto 0 auto;
	padding: 10px 20px;
	background-color: #f7f8f8;
}
#product .attention p{padding: 5px 0;font-size: 92%;line-height: 1.7em;}

/* productList */
#product .productsList{
	position: relative;
	margin: 40px auto 0 auto;
	font-size: .13rem;
	max-width: 320px;
}

/* process */
#product .process li{
	position: relative;
	margin: 0 .8em 20px 0;
	width: calc(50% - 1.5em);
}
#product .process li .Img{margin: 0 auto;}
#product .process li .Img::after{
	position: absolute;
	top:50%;
	right: -1.8em;
	display: block;
	content: '\025b6';
	color: #7eb427;
	font-size: .12rem;
}
#product .process li:last-child .Img::after{display: none;}

/* qa */
#product .qa, #product .qa dl{
	position: relative;
	margin: 0 auto;
	counter-reset: number 0;
}
#product .qa dl dt{
	position: relative;
	margin: 0 auto 5px auto;
	padding:0 0 0 2em;
	line-height: 1.6em;
	color: #078373;
}
#product .qa dl dt::before{
	position: absolute;
	top:0;
	left: 0;
	content: 'Q' counter(number) '.';
	counter-increment: number 1;
}
#product .qa dl dd{
	position: relative;
	margin: 0 auto 15px auto;
	padding:0 0 0 2em;
	line-height: 1.6em;
}
#product .qa dl dd::before{
	position: absolute;
	top:0;
	left: 0;
	content: 'A' counter(number) '.';
}

#product .subttl{
	position: relative;
	margin: 30px auto 0 auto;
	font-size: .16rem;
	font-weight: 500;
	color: #ffffff;
	background-color: #7eb427;
	padding: 5px 8px;
}

#product .box{position: relative;}

#product .links{
	position: relative;
	margin: 0 auto;
}
#product .links li{
	position: relative;
	margin: 0 auto;
	padding-bottom: 15px;
	padding-left: 1.2em;
}
#product .links li::before{
	position: absolute;
	top:0;
	left: 0;
	content: '・';
}

/* order */
#product .order .orderList{
	position: relative;
	margin: 20px auto 0 auto;
}
#product .order .orderList li{
	position: relative;
	margin: 0 auto 20px auto;
	background-color: #F6F6F6;
	padding: 20px;
}
#product .order .orderList li .Img{
	position: relative;
	margin: 0 auto;
	border: solid 5px #ffffff;
}
#product .order .orderList li .Img img{width: 100%;}
#product .order .orderList li .text{
	position: relative;
	margin: 20px auto 0 auto;
}
#product .order .orderList li .text .ttl{
	position: relative;
	margin:  0 auto;
	color: #078373;
	font-size: .18rem;
	font-weight: 500;
}
#product .order .orderList li .text p{padding: 10px 0 0 0;}
#product .order01 .orderphoto{
	position: relative;
	margin: 10px auto 30px auto;
}
#product .order01 .orderphoto li{
	position: relative;
	margin: 0 0 10px 0;
	width: calc(50% - 5px);
}
#product .order01 .orderphoto li img{width: 100%;}
#product .order01 .orderphoto li p{padding: 10px 5px 0 5px;}
#product .order01 .Img{margin: 20px 0 0 0;}
#product .order01 .text p{padding: 1.6em 0 0 0;}


/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	.ttlWrap{gap: 0;}
	.ttlWrap .linkArea{margin: 0; width: auto;}
	
	/* productlist */
	#productlist{padding: 40px 0 90px 0;}
	#productlist ul{gap: 40px 20px;}
	#productlist ul li{
		width: calc(33.333% - 10px);
		max-width: 220px;
		font-size: 100%;
	}
	#productlist ul li a img:hover{transform: scale(1.05, 1.05);transition: all .3s ease-out;}
	#productlist .banner{margin: 0 auto 60px auto;}
	#productlist .banner ul{gap: 10px;justify-content: center;}
	#productlist .banner ul li{width: calc(33.333% - 8px);}
	#productlist .lead{
		margin: 30px auto 20px auto;
		text-align: center;
	}
	
	/* product */
	#product{padding:40px 0 60px 0;}
	#product h3{font-size: .20rem;margin: 0 auto 30px auto;max-width: 1200px;padding: 25px 10px 20px 10px;}
	#product h3 span{font-size: .40rem;}
	#product .productWrap{max-width: 960px;}
	#product .catch{
		padding: 40px 0 30px 0;
		font-size: .29rem;
		line-height: 1.6em;
	}
	#product .catch span{font-size: .19rem;}
	#product h4{margin: 40px auto 15px auto;font-size: .17rem;}
	#product .productWrap h5{font-size: .18rem;}
	#product .productWrap .Img{margin: 25px auto 0 auto;}
	#product .productWrap .box .Img{width: 350px !important;margin:20px 0 0 0 !important;}
	#product .productWrap .box .text{width: calc(100% - 380px) !important;margin:20px 0 0 0 !important;}
	#product .productWrap .box .text table.spec{margin: 0 auto;}

	#product .productWrap .box.imgL .text{width: calc(40% - 10px) !important;}
	#product .productWrap .box.imgS .text{width: calc(60% - 10px) !important;}
	#product .productWrap .box .Img{
		margin: 30px 0 0 0;
		width: calc(50% - 20px);
	}
	#product .productWrap .box.imgL .Img{width: calc(60% - 10px) !important;}
	#product .productWrap .box.imgS .Img{width: calc(40% - 10px) !important;}
	#product .productWrap .box.imgS .Img img{min-width: 280px;}
	#product .box.option .Img{width: 370px !important;}
	#product .box.option .text{width: calc(100% - 390px) !important;}
	#product .productWrap .Img .caption{
		font-size: .14rem;
		line-height: 1.4em;
	}

	/* typeList */
	#product .typeList h5{margin: 30px auto 0 auto;}
	#product .typeList p{padding: 0;}

	
	/* spec */
	#product table.spec{margin: 20px auto 0 auto;}
	#product table.spec thead th{padding: 5px;}
	#product table.spec tbody th{padding: 5px;}
	#product table.spec tbody td{padding: 5px;}
	
	#product .jack .product03 table.spec th, #product .jack .product04 table.spec th{padding: 2px 5px; width: 10em;}
	#product .jack .product03 table.spec td, #product .jack .product04 table.spec td{padding: 2px 5px;width: calc(100% - 11em);}
	
	#product .jack .product02 .Img{width: 480px;margin:20px 0 0 0;}
	#product .jack .product02 .text{width: calc(100% - 500px);}
	#product .jack .product03 .Img, #product .jack .product04 .Img{width: 480px;margin:20px 0 0 0;}
	#product .jack .product03 .text, #product .jack .product04 .text{width: calc(100% - 510px);}
	#product .jack .product03 table.spec th, #product .jack .product04 table.spec th{padding: 2px 5px; width: 10em;}
	#product .jack .product03 table.spec td, #product .jack .product04 table.spec td{padding: 2px 5px;width: calc(100% - 11em);}
	#product .jack .product05 .Img{width: 560px;margin:30px 0 10px 0;}

	
	/* caution */
	#product .caution p{
		line-height: 1.4em;
		font-size: .14rem;
		padding-top: 0;
	}

	/* attention */
	#product .attention{padding: 30px;}
	#product .attention p{padding: 0;}
	
	/* productList */
	#product .productsList{
		margin: 100px auto 0 auto;
		font-size: .18rem;
	}
	
	#product .subttl{
		margin: 50px auto 0 auto;
		font-size: .20rem;
		padding: 15px;
	}

	#product .w02 .bgC{
		position: relative;
		width: calc(50% - 50px);
		font-size: .15rem;
		margin: 0 0 20px 0;
		padding: 30px 20px;
	}
	#product .pname{font-size: .17rem;}
	#product .optionT{padding-top: 10px;}
	#product .optionT .caution{font-size: .14rem;line-height: 1.6em;}
	#product .bgC .Img{margin: 0 !important;max-width: 100% !important;width: 100% !important;}
	
	/* process */
	#product .process li{
		margin: 0 .8em 0 0;
		width: calc(16.666% - 1.5em);
	}
	#product .process li .Img{width: 100% !important;}
	#product .process li .Img::after{right: -1.5em;}
	#product .process li p{padding-top: 5px;font-size: .14rem;line-height: 1.8em;}
	
	#product .links li{padding-bottom: 20px;}

	/* order */
	#product .order .orderList{margin: 40px auto 0 auto;}
	#product .order .orderList li{
		margin: 0 auto 30px auto;
		padding: 20px 40px 20px 20px;
	}
	#product .order .orderList li .Img{
		margin: 0;
		border: solid 8px #ffffff;
		width: 260px;
	}
	#product .order .orderList li .text{
		margin: 0;
		width: calc(100% - 320px);
	}
	#product .order .orderList li .text .ttl{
		margin:  10px auto 0 auto;
		font-size: .22rem;
	}
	#product .order01 .orderphoto{margin: 30px auto 50px auto;}
	#product .order01 .orderphoto li{
		margin: 0 0 20px 0;
		width: calc(33.33% - 10px);
	}
	

}