@charset "utf-8";

h2{max-width: 490px;}

/* goods */
#goods{
	position: relative;
	margin: 0 auto;
	padding: 45px 0 60px 0;
	background-image: url("../img/corner01.png"), url("../img/corner02.png"), url("../img/corner03.png"), url("../img/corner04.png"), url("../img/bg02.jpg");
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
	background-position: 2px 12px, calc(100% - 2px) 12px, 2px calc(100% - 7px), calc(100% - 2px) calc(100% - 7px), 50% 50%;
	background-size: 65px auto, 65px auto, 65px auto, 65px auto, 150px auto;
}
#goods h2{padding-bottom: 25px;}

.lists{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	gap: 40px 20px;
}
.lists li {
	position: relative;
	margin: 0 auto;
	background-color: rgba(125,30,46,0.5);
	border: solid 1.5px;
	border-image: linear-gradient(180deg,rgba(135, 103, 49, 1) 0%, rgba(250, 242, 186, 1) 20%, rgba(132, 99, 45, 1) 50%, rgba(241, 231, 175, 1) 80%, rgba(132, 99, 45, 1) 100%) 1;
	padding: 5px 5px 40px 5px;
	box-sizing: border-box;
	width: calc(100% - 14px);
}
.lists li::before, .lists li::after{
	position: absolute;
	left: 0;
	width: 100%;
	height: 30px;
	content: '';
	display: block;
	background-image: url("../img/star01.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 80px auto;
}
.lists li::before{top: -15px;}
.lists li::after{bottom: -15px;}
.lists li .Img {
	position: relative;
	margin: 0 auto 15px auto;
	border: solid 1px #ffffff;
	cursor: pointer;
	overflow: hidden;
}
.lists li .Img:hover img{transform: scale(1.05, 1.05);transition: all .3s ease-out;}
.lists li .Img::after{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 15px;
	height: 15px;
	background-color: #e1d24f;
	content: '＋';
	line-height: 1em;
	font-weight: bold;
	padding: 5px;
	color: #000000;
}
.lists li .name {
	position: relative;
	margin: 0 auto;
	color: #e1d24f;
	text-align: center;
	line-height: 1.6em;
	font-size: 120%;
	font-weight: bold;
	padding-bottom: 15px;
}
.lists li .price{
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-size: 90%;
}
.lists li .price span{font-size: 160%;font-weight: bold;}
.lists li .detail{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 20px);
}
.lists li .spec{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 20px);
	gap: 5px 10px;
	font-size: 88%;
}
.lists li .spec dt{
	position: relative;
	margin: 2px 0 0 0;
	width: 4em;
	background-color: #e1d24f;
	border-radius: 5px;
	color: #000000;
	text-align: center;
	line-height: 1em;
	padding: 3px 0;
	font-size: 88%;
}
.lists li .spec dd{
	position: relative;
	margin: 0;
	width: calc(100% - 5em - 10px);
}
.lists li .spec dd.w100{width: 100%;}
.lists li .cautionWrap{
	width: calc(100% - 20px);
	margin: 10px auto 0 auto;
}

.pre{
	position: relative;
	margin: 50px auto 0 auto;
}
.pre h3{
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-size: 110%;
	color: #e1d24f;
}
.pre .Img{
	position: relative;
	margin: 10px auto;
	width: calc(100% - 40px);
	max-width: 560px;
}
.pre .name{
	position: relative;
	margin: 0 auto;
	text-align: center;
}
.pre .name p{font-size: 80%;}
.pre .detail{
	margin: 10px auto;
	width: calc(100% - 40px);
	max-width: 800px;
}
.pre .cautionWrap{
	margin: 10px auto;
	width: calc(100% - 40px);
	max-width: 800px;
}

.attWrap{
	position: relative;
	margin: 40px auto 0 auto;
	width: calc(100% - 40px);
	background-color: rgba(125,30,46,0.5);
	border: solid 1.5px;
	border-image: linear-gradient(180deg,rgba(135, 103, 49, 1) 0%, rgba(250, 242, 186, 1) 20%, rgba(132, 99, 45, 1) 50%, rgba(241, 231, 175, 1) 80%, rgba(132, 99, 45, 1) 100%) 1;
	padding: 5px 5px 0 5px;
	box-sizing: border-box;
}
.attWrap .ttl{
	position: relative;
	margin: 0 auto;
	line-height: 1em;
	padding: 8px 5px 5px 5px;
	text-align: center;
	color: #000000;
	font-weight: bold;
	background-color: #e1d24f;
}
.attWrap .txt{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 30px);
	padding-bottom: 20px;
}
.attWrap .txt h3{
	position: relative;
	margin: 0 auto 10px auto;
	color: #e1d24f;
	text-align: center;
	font-weight: bold;
	font-size: 105%;
}
.attWrap .txt h3.margin{margin: 2em auto 10px auto;}
.attWrap .txt h4{
	position: relative;
	margin: 1em auto 0.5em auto;
	font-weight: bold;
	border-bottom: solid 1px #ffffff;
}
.attWrap .txt .cList{position: relative;}
.attWrap .txt .cList p{
	position: relative;
	padding-left: 1em;
}
.attWrap .txt .cList p::before{
	position: absolute;
	top:0;
	left: 0;
	content: '・';
}
.attWrap .txt a{color: #ffffff;}
.attWrap .txt p{padding-bottom: 0.5em;margin-top: 0.5em;}
.attWrap .txt .cList .listDot{
	position: relative;
	padding-left: 2em;
	padding-bottom: 1em;
}
.attWrap .txt .cList .listDot::before{
	position: absolute;
	top:0;
	left: 1em;
	content: '■';
}
.attWrap .txt .cautionWrap.margin{padding-left: 1em;margin: -0.5em auto 0 auto;}
.attWrap .txt .cautionWrap.marginTop{margin: 1em auto 0 auto;}
.attWrap .txt .cautionWrap p{padding-bottom: 0;line-height: 1.4em;}
.attWrap .txt .cautionWrap p::before{content: '※';}
.attWrap p.lead{
	position: relative;
	padding-bottom: 2em;
}

.bnr{
	position: relative;
	margin: 30px auto 0 auto;
	 width: calc(100% - 40px);
	max-width: 720px;
	z-index: 104;
}
.bnr img{border: solid 1px #904445;}

.goodsModal {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 10px);
	max-width:700px;
}
.goodsModal .splide__slide div{cursor: pointer;}
.goodsModal .splide__arrows .splide__arrow--prev {top:50%;left: -20px;transform: translateY(-50%) rotate(180deg);}
.goodsModal .splide__arrows .splide__arrow--next {top:50%;right: -20px;transform: translateY(-50%);}
.goodsModal .splide__arrow {
	background: transparent;
	border-radius: 0;
	height: 18px;
	width: 18px;
	opacity: 1;
	transform: translateY(0);
}
.goodsModal .splide__arrow:disabled {opacity: 0;}
.goodsModal .Img{border: solid 1px #E2E2E2;}

/* ----- pc ----- */
@media screen and (min-width: 641px) {

	/* goods */
	#goods{
		padding: 80px 0 120px 0;
		background-position: 3px 10px, calc(100% - 3px) 10px, 3px calc(100% - 4px), calc(100% - 3px) calc(100% - 4px), 50% 50%;
		background-size: 123px auto, 123px auto, 123px auto, 123px auto, 300px auto;
	}
	#goods h2{padding-bottom: 45px;}

	.lists{
		max-width: 1000px;
		gap: 60px 20px;
	}
	.lists li {
		padding: 10px 5px 40px 5px;
		width: calc(33.333% - 14px);
	}
	.lists li::before, .lists li::after{
		height: 100px;
		background-size: 100px auto;
	}
	.lists li::before{top: -50px;}
	.lists li::after{bottom: -50px;}

	.lists li .price{font-size: 88%;}
	.lists li .price span{font-size: 160%;}

	.lists li .spec dt{
		margin: 4px 0 0 0;
		padding: 4px 0 2px 0;
	}

	.pre{margin: 90px auto 0 auto;}
	.pre h3{font-size: 130%;}
	.pre .Img{margin: 20px auto;}

	.attWrap{
		margin: 60px auto 0 auto;
		max-width: 960px;
	}
	.attWrap .txt h3{margin: 0 auto 20px auto;}
	.attWrap .txt h3.margin{margin: 3em auto 20px auto;}
	.attWrap .txt h4{margin: 2em auto 1em auto;}
	.attWrap .ttl{padding: 12px 5px 8px 5px;}
	.attWrap .txt{
		margin: 40px auto 20px auto;
		width: calc(100% - 70px);
	}
	.attWrap p.lead{padding-bottom: 3em;}
	
	.bnr{margin: 70px auto 0 auto;}
	
	.goodsModal .splide__arrows .splide__arrow--prev {left: -40px;}
	.goodsModal .splide__arrows .splide__arrow--next {right: -40px;}
	.goodsModal .splide__arrow {
		height: 28px;
		width: 28px;
	}
}