@charset "utf-8";
/* ヘッダー */
header {
	position: relative;
	margin: 0 auto;
	background-color: #0c1b31;
}
.topttl{
	position: relative;
	margin: 0 auto;
	padding: 5px 0;
}
.topttl img{
	position: relative;
	margin: 0 auto;
	width: 26%;
	max-width: 90px;
}

/* goods */
#goods {
	position: relative;
	margin: -10px auto 0 auto;
	padding:40px 0 50px 0;
}
#goods .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ffffff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
#goods h2{
	position: absolute;
	top: 35px;
	left: 0;
	width: 10%;
	max-width: 30px;
}
#goods h3{
	position: relative;
	margin: 10px auto 30px auto;
	width: calc(100% - 30px);
	max-width: 580px;
}
#goods .lists{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 400px;
	gap: 40px 20px;
}
#goods .lists::after{
	position: relative;
	width: calc(50% - 10px);
	max-width: 340px;
	min-width: 200px;
	height: 1px;
	content: '';
	display: block;
}
#goods .lists li{
	position: relative;
	margin: 0;
	width: calc(50% - 10px);
	max-width: 340px;
	min-width: 200px;
}
#goods .lists li .btn{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 240px;
	outline: solid 1px #094c80;
	cursor: pointer;
}
#goods .lists li .name{
	position: relative;
	margin: 0 auto;
	padding: 10px 0 5px 0;
	color: #094c80;
	font-weight: bold;
	font-size: 115%;
	text-align: center;
}
#goods .lists li .price{
	position: relative;
	margin: 0 auto;
	text-align: center;
}
#goods .lists li .price span{font-size: 140%;font-weight: bold;}
#goods .lists li .spec{
	position: relative;
	margin: 0 auto;
	padding: 10px 0;
	font-size: 90%;
	line-height: 1.4em;
}

#goods .lead{
	position: relative;
	margin: 50px auto 0 auto;
	padding: 10px 15px;
	font-size: 115%;
	line-height: 1.6em;
	background: #2397B8;
	background: linear-gradient(90deg,rgba(35, 151, 184, 1) 0%, rgba(97, 57, 212, 1) 100%);
	color: #ffffff;
	text-align: center;
	font-weight: bold;
	font-style: italic;
}
#goods .lead .yellow{color: #FFF200;}
#goods .pre{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 480px;
}
#goods .pre .btn{
	position: relative;
	margin: 20px auto 0 auto;
	outline: solid 1px #094c80;
	max-width: 300px;
}
#goods .pre .spec{
	position: relative;
	margin: 0 auto;
	padding: 5px 0 10px 0;
	text-align: center;
}
#goods .cautionWrap p{
	margin: 5px auto 0 auto;
	font-size: 94%;
	padding-left: 1em;
	line-height: 1.6em;
}

#goods .shop{
	position: relative;
	margin: 40px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 480px;
	outline: solid 1px #640DA4;
	padding-bottom: 20px;
}
#goods .shop h4{
	position: relative;
	margin: 0 auto;
	padding: 5px 0;
	background-color: #640DA4;
	color: #ffffff;
	font-size: 110%;
	font-weight: bold;
	font-style: italic;
	text-align: center;
}
#goods .shop .cautionWrap{margin: 20px auto 0 auto; width: calc(100% - 30px);}
#goods .shop .cautionWrap p.margin{padding-bottom: 1em;}

.pcN{display: none;}

.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;}


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

	.topttl{display: none;}
	
	/* goods */
	#goods {
		margin: 0 auto;
		padding: 40px 0 80px 0;
	}
	#goods .bg{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
	#goods h2{
		top: 30px;
		left: 18px;
		max-width: 40px;
	}
	#goods h3{
		margin: 15px auto 40px auto;
		max-width: 500px;
	}
	#goods .lists::after{min-width: 180px;}
	#goods .lists li{min-width: 180px;}
	#goods .lists li .name.row2{line-height: 3em;}

	#goods .pre{
		margin: 40px auto 0 auto;
		width: calc(100% - 80px);
		max-width: 680px;
	}
	#goods .shop{
		margin: 60px auto 0 auto;
		width: calc(100% - 80px);
		max-width: 680px;
	}
	
	.goodsModal{position: relative;margin: 0 auto; max-width: 600px;}
	.goodsModal .splide__arrow {
		height: 24px;
		width: 24px;
	}

}

@media screen and (min-width: 420px) and (max-width: 799px){
	#goods .lists{max-width: 400px;}
	#goods .lists::after{min-width: 180px;}
	#goods .lists li{min-width: 180px;}
	#goods .lists li .name.row2{line-height: 3em;}
}
@media screen and (min-width: 1100px) and (max-width: 1299px){
	#goods .lists{max-width: 320px;}
}