@charset "utf-8";

body{background-color: #96ddf5;}


/* 共通 */
#goods{
	position: relative;
	margin: 0 auto 12% auto;
}

#goods h2, #goodsshop h2{
	position: relative;
	margin: 3% auto 0 auto;
	font-size: .18rem;
	font-weight: 900;
	color: #92000d;
	height: auto;
}
#goods h2 span, #goodsshop h2 span{
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
#goods h2 span::before, #goods h2 span::after,
#goodsshop h2 span::before, #goodsshop h2 span::after{
	content: '';
	display: block;
	width: 1.2em;
	height: 1.2em;
	background-image: url("../img/icon01.png");
	background-size: contain;
	background-repeat: no-repeat;
	flex-grow: 1;
}
#goods h2 span::before, #goodsshop h2 span::before{margin-right:1em;background-position: 100% 0;}
#goods h2 span::after, #goodsshop h2 span::after{margin-left:1em;background-position: 0 0;}

/* タイトル */
.ttl {
	position: relative;
	margin: -30% auto 0 auto; 
	padding: 0;
}
.ttl h2{
	background-image: url("../img/bg_top.png");
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: 100% 60px;
}
.ttl h2 img{padding-bottom: 40px;}

#goods ul{
	position: relative;
	margin: 3% auto 0 auto;
	width: 80%;
}
#goods ul li{
	position: relative;
	margin: 12% auto 0 auto;
}
#goods ul li h3{
	position: relative;
	margin: 1% auto 3% auto;
	padding: .5em;
	width: 86%;
	border-bottom: solid 2px #92000d;
	color: #92000d;
	font-weight: 900;
	font-size: .20rem;
	text-align: left;
}
#goods ul li .goodsImg{
	position: relative;
	margin: 3% auto;
	width: 90%;
}
#goods ul li p.price{
	position: relative;
	margin: 0 auto;
	width: 90%;
	color: #92000d;
	font-weight: 900;
	font-size: .24rem;
	text-align: right;
}
#goods ul li p.price span{
	font-weight: 700;
	font-size: .14rem;
	padding-left: .5em;
}
#goods ul li p.spec{
	font-size: .14rem;
	text-align: left;
	margin: 0 auto;
	width: 90%;
}
#goods ul li p.price span.priceA{
	font-size: .15rem;
	padding-right: .5em;
}
#goods ul li p.txt{
	position: relative;
	margin: 3% auto;
	width: 90%;
	text-align: left;
}

#goodsshop{
	position: relative;
	margin: 0 auto 42% auto;
}
#goodsshop .shop{
	position: relative;
	margin: 0 auto;
	width: 88%;
	border: solid 3px #005175;
}
#goodsshop .shop a{
	position: relative;
	display: block;
	margin: 2% auto;
	padding: 2%;
	width: 92%;
	background-color: #005175;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}
#goodsshop .shop a span{
	position: relative;
	display: block;
	margin: 2% auto;
	padding: .8% 0;
	background-color: #ffffff;
	color: #005175;
	font-weight: 500;
	font-size: .14rem;
}
#goodsshop .tel{
	position: relative;
	margin: 3% auto;
	font-size: .18rem;
}


/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* タイトル */
	.ttl {margin: -130px auto 0 auto;  }
	.ttl h2{background-size: 100% 120px;padding-bottom: 40px;}
	.ttl h2 img{padding-top: 40px;}

	/* 共通 */
	#goods{margin: 0 auto 120px auto;}
	#goods h2, #goodsshop h2{
		margin: 0 auto;
		padding: 20px 0;
		font-size: .24rem;
	}
	
	#goods ul{
		position: relative;
		margin: 30px auto 20px auto;
		width: 960px;
	}
	#goods ul li{margin: 0 auto 80px auto;}
	#goods ul li .contBg{
		position: relative;
		width: 960px;
		padding: 20px 0 ;
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
	}
	#goods ul li h3{
		margin: 10px auto 20px auto;
		width: 86%;
		font-size: .30rem;
	}
	#goods ul li .goodsImg{
		margin: 0 ;
		width: 400px;
	}
	#goods ul li .goodsTxt{
		margin: 0 ;
		width: 510px;
	}
	#goods ul li p.price{font-size: .28rem;margin: 0 auto 20px auto;}
	#goods ul li p.price span.priceA{font-size: .18rem;}
	#goods ul li p.spec{margin: 0 auto 25px auto;}

	#goodsshop{margin: 0 auto 280px auto;}
	#goodsshop .shop{width: 960px;}
	#goodsshop .shop a{
		position: relative;
		display: block;
		margin: 20px auto;
		padding: 10px;
		width: 900px;
		font-size: .20rem;
	}
	#goodsshop .shop a span{
		margin: 20px auto 10px auto;
		padding: .8% 0;
	}
	#goodsshop .tel{margin: 0 auto; font-size: .20rem;}
}