@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
.mt20{margin-top: 20px;}
.mt40{margin-top: 40px;}
.mt60{margin-top: 60px;}
.mb30{margin-bottom: 30px;}

ul {list-style: none;}
dl figure{display: flex;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}
.swiper a:hover img{
	transform: scale(1.1); /* 拡大 */}

h2,h3,h4,dt,dd,a,p,li,span{
font-family: "source-han-sans-japanese", sans-serif;
font-style: normal;}

a:hover img{transition: 0.5s;}

h1 .mainbnr{
	text-align: center;
	background-color: #f7f7f7;
	line-height: 0;}
h1 img{max-width: 70%;margin: 0 auto;}
h2{
	display: inline-block;
	margin: 0 auto;
	font-weight: 200;
	font-size: 28px;}

.inner{
	width: 1080px;
	margin: 0 auto;}

#prologue{margin: 80px 0 150px 0;}
#prologue .inner{text-align: center;}
#prologue h2{border-bottom: double 4px #a11e1a;}
#prologue h3{font-size: 30px; color: #a11e1a;font-weight: 500; letter-spacing: 3px;}
#prologue h4{border-bottom: solid 1px #a11e1a; margin-bottom: 10px;}
#prologue p{margin: 10px 0 20px; font-size: 16px;}
#prologue .right dl{font-size: 15px;}
#prologue .right dt{color: #a11e1a;}
#prologue .right dd{margin-bottom: 5px;}
#prologue .right dd:last-child{margin-bottom: 0}
#prologue .product-description{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 80px 0 50px;}
#prologue .product-description .right{
	width: 50%;
	text-align: left;
	align-content: center;
	position: relative;}
#prologue .product-description .right:after{
	content: url("../img/kumo-01.webp");
	position: absolute;
	top: -20px;
	right: -50px;
	z-index: -1;}
#prologue .product-description .left{position: relative;}
#prologue .product-description .left:after{
	content:url("../img/maru.webp");
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;}

#prologue .sub{
	display: flex;
	position: relative;
	justify-content: space-between;
	border: solid 1px #a11e1a;
	box-sizing: border-box;
	padding: 20px 30px;}
#prologue .sub:before{
	content: url("../img/kumo-02.webp");
	position: absolute;
	left: -150px;
	top: -98px;}
#prologue .sub:after{
	content: url("../img/kumo-03.webp");
	position: absolute;
	right: -150px;
	bottom: -98px;}
#prologue .sub dl{
	width: 50%;
	text-align: left;
	align-content: center;}
#prologue .sub dt{
	font-size: 25px;
	padding-bottom: 10px;
	color: #a11e1a;}
#prologue .sub dd{font-size: 16px;}



#select{margin-bottom: 80px; background-image: url("../img/ichimatsu-back.webp");}
#select .inner{padding: 60px 0; text-align: center;}
#select h2{color: #fff; margin-bottom: 50px;border-bottom: double 4px #fff;}
#select .step-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}
#select .step-1,
#select .step-2,
#select .step-3,
#select .step-4{
	width: 49%;
	background-color: #fff;
	position: relative;}
#select .step-1 p,
#select .step-2 p,
#select .step-3 p,
#select .step-4 p{
	font-size: 24px;
	font-weight: 500;
	text-align: left;
	padding: 7px 0 0 70px;}

#select .step-1,
#select .step-2{margin-bottom: 20px;}

#select .step-1:before{
	content: "1";
	font-size: 30px;
	background-color: #000;
	color: #fff;
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0;
	top: 0;}
#select .step-2:before{
	content: "2";
	font-size: 30px;
	background-color: #000;
	color: #fff;
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0;
	top: 0;}
#select .step-3:before{
	content: "3";
	font-size: 30px;
	background-color: #000;
	color: #fff;
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0;
	top: 0;}
#select .step-4:before{
	content: "4";
	font-size: 30px;
	background-color: #000;
	color: #fff;
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0;
	top: 0;}



#series .inner{text-align: center;}
#series h2{border-bottom: double 4px #a11e1a;}
#series .anker{display: flex;flex-wrap: wrap;justify-content: space-between;margin:50px 0 80px 0}
#series ul{width: 48%; text-align: left;}
#series li{border-bottom: solid 1px;}
#series li:nth-child(n+2){margin-top: 20px;}
#series li a{display: block; position: relative;font-size: 22px;}
#series li a:after{
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 10px;
	border-bottom: 1px solid #a11e1a;
	border-right: 1px solid #a11e1a;
	position: absolute;
	right: 0;
	top: 50%;
	transform: rotate(45deg) translateY(-50%);}
#series li a span{font-size: 80%;}

#series .product-box{margin-bottom: 60px;}
#series .product-box h3{
	border-bottom: solid 1px #a11e1a;
	margin-bottom: 20px;
	font-size: 35px;
	text-align: left;
	color: #a11e1a;
	font-weight: 300;}
#series .product-box h3 span{text-align: left;color: #a11e1a;font-weight: 300; font-size: 80%;}
#series .product-box .inner-flex{display: flex; flex-wrap: wrap; justify-content: space-between;}
#series .product-box .inner-flex .left{width: 30%;}
#series .product-box .inner-flex .right{width: 65%;}
#series .product-box .inner-flex img{max-width: 100%;}
#series .product-box dl:first-child{padding-top: 60px;}
#series .product-box dl:nth-child(n+2){margin-top: 20px;}
#series .product-box dd{
	background:#f4f4f4;
	line-height:50px;
	text-align:center;
	border:#666 1px solid;
	display:none;
	box-sizing: border-box;
	padding: 20px;}
#series .product-box dd .flex{
	display: flex;
	flex-wrap: wrap;}
#series .product-box dd .product{
	box-sizing: border-box;
	padding: 20px;
	width: 32%;
	background-color: #fff;
	margin-right: 2%}
#series .product-box dd .product:nth-child(3n){margin-right: 0;}
#series .product-box dd .product:nth-child(n+4){margin-top: 2%;}

#series .product-box dt{
	font-size: 25px;
	padding: 0 20px;
	font-weight: 100;
	position: relative;
	display:block;
 	line-height:50px;
	text-align:left;
	border:#666 1px solid;
	cursor:pointer;}
/* 「+」を追加 */
#series .product-box dt::before,
#series .product-box dt::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4%;
  width: 17px;
  height: 1px;
  margin: auto;
  background-color: #a11e1a;}
#series .product-box dt::after {
  transform: rotate(90deg);
  transition: .3s;}
/* クリックしたときに「+」を「−」に変更 */
#series .product-box dt.is-active::after {
	transform: rotate(180deg);}


	
#series .product-box .name{
	text-align: left;
	font-size: 20px;}
#series .product-box .name span{font-size: 80%;}
#series .product-box .price{
	text-align: right;
	font-size: 30px;
	color: #a11e1a;
}




.spotlist_back{
	margin-top: 60px;
	text-align: center;}
.spotlist_back a{
	font-size: 20px;
	border: solid 2px;
	padding: 15px 80px;
	border-radius: 10px;}

@media only screen and (max-width: 768px) {}
@media (max-width: 1024px) {}
@media (max-width: 768px) {
	h1 img{max-width: 100%;}
	
	.inner{
		width: 90%;
		margin: 0 auto;}
	.inner img{
		max-width: 100%;}
	
	#prologue{margin: 50px 0;}
	#prologue h3{font-size: 27px; line-height: 1.7;}
	#prologue .inner{margin: 0 auto 30px;}
	#prologue .inner h2{font-size: 28px;}
	#prologue .inner p{text-align: left;}
	#prologue .right dl{font-size: 16px;}
	#prologue .right dt{font-weight: 500;}
	#prologue .right dd{margin-bottom: 15px; line-height: 1.5;}
	#prologue h4{font-size: 20px;}
	#prologue .product-description{display: block; padding: 50px 0;}
	#prologue .product-description .right{width: 100%;}
	#prologue .product-description .right:after{content: url(../img/kumo-01.webp); top:-70px;}
	#prologue .sub{display: block; padding: 20px;}
	#prologue .sub dl{width: 100%; margin-bottom: 20px;}
	#prologue .sub:before{content: "";}
	
	#series .product-box h3{line-height: 1; font-size: 30px;}
	#series .product-box h3 span{font-size: 70%;}
	#series .product-box .inner-flex img{max-width:80%; }
	#series .product-box .inner-flex .left{width: 100%;}
	#series .product-box .inner-flex .right{width: 100%;}
	#series .product-box dl:first-child{padding-top: 20px;}
	#series .product-box dd .product{width: 100%;margin-right: 0;}
	#series .product-box dd .product:nth-child(n+2){margin-top: 20px;}
	#series .product-box dt{line-height: 2; font-size: 22px; font-weight: 300;}
	#series .product-box dl:nth-child(n+2){margin-top: 15px;}
	#series li a{line-height: 1; font-size: 20px;}
	#series li a span{line-height: 1.7;}
	#series li:nth-child(n+2){margin-top: 30px;}
	
	
	
	#select .step-1:before,
	#select .step-2:before,
	#select .step-3:before,
	#select .step-4:before{
		font-size: 20px;
		width: 30px;
		height: 30px;}
	#select .step-1 p, #select .step-2 p, #select .step-3 p, #select .step-4 p{
		font-size: 20px;
		padding: 0 0 0 50px;}
	#select .step-box img{
		max-width: 80%;
	}
	
	.more{width: 100%;}
	.more a{font-size: 18px;}
	
	
	
}
@media (max-width: 599px) {
}