@charset "utf-8";
/* CSS Document */
.mt20{margin-top: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb160{margin-bottom: 160px;}

.pc-v{display: block;}
.sp-v{display: none;}
ul {list-style: none;}
figure{line-height: 0;}
a img:hover{opacity: 0.9;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}

/*----fonttype----*/
/*-R-*/
#prologue p,
#reason .reason-box .reason dd,
#ranking p,
#brand dd{
font-family: "zen-kaku-gothic-new", sans-serif;
font-weight: 400;
font-style: normal;}
/*-M-*/
nav a,#prologue figure:after,
#reason .reason-box .reason dt,
#product .item-box .item a{font-family: "zen-kaku-gothic-new", sans-serif;
font-weight: 500;
font-style: normal;
}
/*-B-*/
h2,h2 span,
#product .item-box .item h3,
#wave p a,
#ranking h3,#ranking .price{font-family: "zen-kaku-gothic-new", sans-serif;
font-weight: 700;
font-style: normal;}


h1{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;}

h2{font-size: 28px; text-align: center; position: relative; margin-bottom: 40px;}
h2 span{color: #e50012;}


.mainbnr{
	text-align: center;
	background-color: #f7f7f7;
	line-height: 0;
	margin-bottom: 50px;}
.mainbnr img{max-width: 70%;margin: 0 auto;}


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



#prologue{margin-bottom: 60px;}
#prologue .inner{position: relative;}
#prologue .inner:after{
	content: "";
	background: url("../img/prologue-main.webp")no-repeat;
	width: 627px;
	height: 532px;
	position: absolute;
	right: -275px;
	top: -110px;
	z-index: -1;}
#prologue h2{text-align: left; color: #e50012; font-size: 36px;}
#prologue figure{margin-bottom: 30px; position: relative; display: inline-block;}
#prologue figure:after{
	content: "ジェフダとは";
	color: #e50012;
	font-size: 14px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 105%;
	width: 100%;
	font-weight: bold;}
#prologue p{width: 675px; font-size: 16px;}



nav{background-color: #e50012; margin-bottom: 60px;}
nav ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
nav li{width: 20%; text-align: center;}
nav a{color: #fff; font-size: 20px; display: block; padding: 10px 0;}



#reason{margin-bottom: 60px;}
#reason .reason-box{display: flex; flex-wrap: wrap; justify-content: space-between;}
#reason .reason-box .reason{width: 31%; box-sizing: border-box; padding: 30px; position: relative;   box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);}
#reason .reason-box .reason:nth-child(2){margin-top: 15px;}
#reason .reason-box .reason:nth-child(3){margin-top: 25px;}
#reason .reason-box .reason:first-child:before{
	content: "";
	background: url("../img/01.webp")no-repeat;
	width: 59px;
	height: 42px;
	position: absolute;
	left: -20px;
	top: -20px;}
#reason .reason-box .reason:nth-child(2):before{
	content: "";
	background: url("../img/02.webp")no-repeat;
	width: 66px;
	height: 42px;
	position: absolute;
	left: -20px;
	top: -20px;}
#reason .reason-box .reason:nth-child(3):before{
	content: "";
	background: url("../img/03.webp")no-repeat;
	width: 67px;
	height: 42px;
	position: absolute;
	left: -20px;
	top: -20px;}
#reason .reason-box .reason figure{text-align: center;}
#reason .reason-box .reason figure img{max-width: 100%;}
#reason .reason-box .reason dt{font-size: 23px; color: #e50012; text-align: center; padding: 10px 0; line-height: 1.4;}
#reason .reason-box .reason dd{font-size: 16px; line-height: 1.6;}



#product{margin-bottom: 60px;}
#product .item-box{display: flex; flex-wrap: wrap; justify-content: space-between; border-bottom:solid 1px #e50012;}
#product .item-box .item{width: 25%; box-sizing: border-box; padding: 22.5px; border-left:solid 1px #e50012; border-top:solid 1px #e50012; text-align: center;}
#product .item-box .item:nth-child(4n){border-right: solid 1px #e50012;}
#product .item-box .item figure img{max-width: 100%;}
#product .item-box .item h3{font-size: 20px; text-align: center; color: #e50012; line-height: 1; padding: 20px 0;}
#product .item-box .item a{background-color: #00a29c; font-size: 15px; color: #fff; display: inline-block; padding: 5px 0; border-radius: 3px; width: 80%;}



#wave{margin-bottom: 60px;}
#wave h2{font-size: 35px; text-align: center; color: #e50012;}
/* スライダーのwrapper */
#wave .infinite-slider .swiper-wrapper,
#wave .infinite-slider2 .swiper-wrapper{transition-timing-function: linear;}
/* スライド */
#wave .infinite-slider .swiper-slide,
#wave .infinite-slider2 .swiper-slide{height: 180px !important; /* 高さを指定 */width: auto !important; margin: 0 30px;}
/* スライド内の画像 */
#wave .infinite-slider .swiper-slide img,
#wave .infinite-slider2 .swiper-slide img{max-width: 100%;height: auto;}
#wave p{text-align: center;}
#wave p a{font-size: 20px; color: #fff; display: inline-block; background-color: #e50012; padding: 5px 15px; border-radius: 5px;}





#ranking{margin-bottom: 60px; background-color: #fafafa;}
#ranking .inner{padding: 60px 0;}
#ranking p{font-size: 16px; text-align: left; margin-bottom: 50px;}
#ranking .swiper-slide{padding-top: 30px; position: relative;}
#ranking .swiper-slide h3{font-size: 16px;}
#ranking .swiper-slide .price{font-size: 18px;}
#ranking .swiper-slide img{max-width: 100%;}
.swiper-button-next:after, .swiper-button-prev:after{
	background-color: #e50012;
	width: 50px;
	height: 50px;
	border-radius: 80px;
	text-align: center;
	font-size: 25px !important;
	align-content: center;
	font-weight: bold;}
.swiper-button-next, .swiper-button-prev{
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size) / 20 * 27) !important;
	color: #fff !important;}
#ranking span{position: absolute; top: 0; left: 0;}
#ranking span img{max-height: 20px;}



#brand .two{display: flex; flex-wrap: wrap;}
#brand .two dt{margin-bottom: 20px;}
#brand .two dl{width: 50%; box-sizing: border-box; padding: 30px; border: solid 1px #191919; border-right: none;}
#brand .two dl:last-child{border-right: 1px solid #191919;}
#brand .four{display: flex; flex-wrap: wrap;}
#brand .four dl{width: 25%; box-sizing: border-box; padding: 30px; border-bottom:solid 1px #191919; border-left:solid 1px #191919; display: flex; flex-direction: column;}
#brand .four dl:last-child{border-right:solid 1px #191919;}
#brand .two dt,
#brand .four dt{text-align: center; line-height: 1;}
#brand .two dt img,
#brand .four dt img{max-width: 100%;}
#brand dd{font-size: 16px;}


.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: 1000px) {}
@media (max-width: 768px) {
	.pc-v{display: none;}
	.sp-v{display: block;}

	
	h1 img{max-width: 100%;}
	.inner{width: 95% !important;}
	h2{margin-bottom: 20px;}
	
	.mainbnr{margin-bottom: 80px;}
	.mainbnr img{max-width: 100%;}
	
	#prologue h2{font-size: 23px;}
	#prologue .inner:after{width: 427px; height: 332px; background-size: contain; top: -200px;}
	#prologue p{width: 100%;}
	
	nav ul{padding: 10px 0;}
	nav li{width: 100%; padding: 10px; position: relative; border-bottom: dashed 1px #fff; text-align: left;}
	nav li:after{
	content:"";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 10px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg) translateY(-50%);
	position: absolute;
	top: 50%;
	right: 0;}
	nav li:last-child{border: none;}
	nav a{font-size: 18px; display: block;}
	
	#reason .reason-box .reason{width: 100%;}
	#reason .reason-box .reason:first-child:before{width: 49px; height: 32px; background-size: contain; left: -10px; top: -10px;}
	#reason .reason-box .reason:nth-child(2):before{width: 56px; height: 32px; background-size: contain; left: -10px; top: -10px;}
	#reason .reason-box .reason:nth-child(3):before {width: 57px;height: 32px; background-size: contain; left: -10px;top: -10px;}
	
	#product .item-box .item{width: 50%;}
	#product .item-box .item:nth-child(2n){border-right: solid 1px #e50012;}
	#product .item-box .item a{width: 100%;}
	
	#wave h2{font-size: 24px;}
	
	#ranking .inner{padding: 60px 0 0;}
	#ranking .swiper-slide{width: 30% !important;}
	.swiper-button-next, .swiper-button-prev{top: 30% !important;}
	.swiper-button-next:after, .swiper-button-prev:after{width: 40px; height: 40px; font-size: 20px !important;}
	
	#brand .two dl,#brand .four dl{width: 100%;}
	#brand .two dl,#brand .four dl{border: solid 1px #191919; border-bottom: none;}
	#brand .four dl:last-child{border-bottom: solid 1px #191919;}
	#brand .four dl{padding: 20px;}
	
}