@charset "utf-8";
/* CSS Document */
body{	
	background-color:#eee6d1;
	color:#333;
	min-width:950px;
}
p{color:#FFF;}

#mainvisual{
	z-index: -1;
}
.mainBottomLine{
	position:absolute;
	background-image:url(/public/img/suwirun/main-bottom-line.webp);
	background-repeat: no-repeat;
	background-size:100% 243px;
	background-position:center bottom;
	height:350px;
	width:100%;
	margin-top:251px;
	z-index:1;
}
/* SLIDE */
#slider_wrapper .mainTitle{
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% auto;
	height:600px;
}
#slider_wrapper .slide1{
	background-image:url(/public/img/suwirun/mainslide01.webp);
}
#slider_wrapper .slide2{
	background-image:url(/public/img/suwirun/mainslide02.webp);
}

#mainvisual.seriesProduct .slick-list{
	height: 300px;
}


/* Slick */
.slick-prev:before{
	content:"«";
	font-family:"NotoSerifJP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Arial, Verdana, "ＭＳ Ｐゴシック" !important;
	font-size:60px;
	opacity:1;
}
.slick-prev{
	left:-40px;
}
.slick-next:before{
	content:"»";
	font-family:"NotoSerifJP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Arial, Verdana, "ＭＳ Ｐゴシック" !important;
	font-size:60px;
	opacity:1;
}
.slick-next{
	right:-30px;
}
.slick-prev, .slick-next{
	top:40%;
}
.slick-dots{
	text-align:right;
}
.slick-dots li button:before{
	font-size:14px;
	color:#FFF;
}
.slick-dots li.slick-active button:before{
	color:#FFF;
	opacity:1;
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before,
.slick-dots li.slick-active button:hover:before,.slick-dots li button:hover:before{
	color:#FFCD2E;
}
.slick-dots li{
	margin:0 2px;
}

h1,h2,h4{
	color:#12301b;
}
h3{
	text-align: center;
	color:#333;
}
h1{
	text-align: center;
	font-size: 30px;
	margin-bottom: 20px;
}
#suwirunProduct h1{
	text-align: center;
	color: #FFF;
	background: linear-gradient(0.25turn, rgba(18,48,27,0), rgba(18,48,27,0.8), rgba(18,48,27,1),rgba(18,48,27,0.8),rgba(18,48,27,0));
	margin-bottom: 0;
}
#suwirunProduct h2{
	background:none;
	color:#12301b;
}
h1 span{display: inline-block;}
h2{
	text-align: center;
	color: #FFF;
	background: linear-gradient(0.25turn, rgba(18,48,27,0), rgba(18,48,27,0.8), rgba(18,48,27,1),rgba(18,48,27,0.8),rgba(18,48,27,0));
}
#suwirunDetail h2{
	margin-bottom: 50px;
}

.suwirunWrapper{
	max-width: 1000px;
	margin: 0 auto;
	margin-top: -350px;
}
.suwirunWrapper.series{
	margin-top: 30px;
}
.suwirunWrapper section{
	margin-bottom: 80px;
}
.suwirunWrapper p{
	color: #333;
}
.mainPic{
	text-align: center;
}
img.suwirunTitle{
	max-width:280px;
}
img.suwirunLogo{
	max-width:200px;
}
.linkWrapper{
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
}
#suwirunProduct .linkWrapper{
	max-width: none;
}
.linkBtn{
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 5px;
}
.linkBtn a div{
	border: 1px solid #12301b;
	border-radius: 5px;
	color: #12301b;
	text-align: center;
	padding: 5px 0;
}
.linkBtn a p{color: #12301b;font-size: 15px;}
.linkBtn a:hover div{
	background-color:#12301b;
	color:#FFF;
}
.linkBtn a:hover p{color: #FFF;}
.suwirunContent{
	margin: 30px 0 50px 0;
}
.columTwo{
    display: flex;
    justify-content: flex-start;
}
.columTwo .colL,.columTwo .colR{
	width: 50%;
}
#suwirunFeatures .suwirunContent p,
#suwirunReason .suwirunContent p{
	margin-bottom:30px;
}
#suwirunProduct .suwirunContent .columTwo .colR p{
	padding-left: 20px;
}
#suwirunSeries .columTwo .colL,#suwirunDetail .columTwo .colL{
	width: 40%;
}
#suwirunSeries .columTwo .colR,#suwirunDetail .columTwo .colR{
	width: 60%;
	padding-left: 20px;
}
#suwirunSeries h2{
	margin-bottom: 50px;
}
#suwirunSeries h4{
	border-left: 10px solid #12301b;
	font-size: 24px;
	padding-left: 10px;
	line-height: 1.2;
	margin-bottom: 10px;
}#suwirunDetail h3{
	border-left: 10px solid #12301b;
	font-size: 24px;
	padding-left: 10px;
	line-height: 1.2;
	margin-bottom: 10px;
	text-align: left;
	color:#12301b;
}
#suwirunSeries h4 span,#suwirunDetail h3 span{
	font-size: 20px;
	display: block;
}
.productSeries,.productDetial{
	padding-bottom: 50px;
	border-bottom: dotted 1px #12301b;
	margin-bottom: 80px;
}
.osusume{
	margin-top: 20px;
}
.capacity{
	margin-top: 20px;
}
.price,.delivery,.materials{
	margin-top: 20px;
}
.osusumeTime,.priceTitle,.capacityTitle,.deliveryTitle,.materialsTitle{
	margin-bottom: 5px;
}
.osusumeTime span,.priceTitle span,.capacityTitle span,.deliveryTitle span,.materialsTitle span{
	border: 1px solid #12301b;
	border-radius: 5px;	
	color: #12301b;
	padding: 5px 20px;
}
.gotoProduct{
	width: 250px;
}
.gotoProduct a div{
    padding: 10px;
    text-align: center;
    background-color: #12301b;
    border: 2px solid #12301b;
	border-radius: 5px;
    line-height: 1.5;
    transition: all 0.3s ease-in-out 0s;
}
.suwirunWrapper .gotoProduct a p{
	color: #ffcb05;	
    transition: all 0.3s ease-in-out 0s;
}
.suwirunWrapper .gotoProduct a:hover p{
	color: #12301b;	
    transition: all 0.3s ease-in-out 0s;
}
.gotoProduct a:hover div{
	background-color: #ffcb05;
}

#reserve{
	background-color:#652d90;
}
.reserveWrapper .reserveBtn a div p{
	color: #522671;
    transition: all 0.3s ease-in-out 0s;
}
.reserveWrapper .reserveBtn a:hover div p{
	color: #ffcb05;
    transition: all 0.3s ease-in-out 0s;
}

/*------- SMART PHONE ------*/
@media only screen and (max-width : 450px) {
	body{
	  	min-width: inherit;
  	}
	.suwirunWrapper section{
		margin-bottom: 30px;
	}
	#slider_wrapper .mainTitle {
		background-size: cover;
		height: 300px;
	}
	#mainvisual.seriesProduct #slider_wrapper .mainTitle{
		background-position: center 90%;
	}
    #slider_wrapper .slide1{
        background-image:url(/public/img/suwirun/mainslide01-sp.webp);
    }
    #slider_wrapper .slide2{
        background-image:url(/public/img/suwirun/mainslide02-sp.webp);
    }
	
	
	#mainvisual.seriesProduct .slick-list{
		height: 150px;
	}
	.mainBottomLine{
		margin-top:0;
	}
	.suwirunWrapper{
		margin-top:-200px;
	}
	img.suwirunTitle{
		width: 50%;
	}
	img.suwirunLogo{
		width: 30%;
	}
	h1{
		font-size:18px;
	}
	.linkWrapper{
		display: block;
	}
	.linkBtn a div{
		margin-bottom: 20px;
	}
	.suwirunContent{
		margin: 10px 0;
	}
	.columTwo{
		display: block;
	}
	.columTwo .colL,.columTwo .colR,#suwirunDetail .columTwo .colL,#suwirunDetail .columTwo .colR{
		width: 100%;
	}
	#suwirunFeatures .suwirunContent p, #suwirunReason .suwirunContent p{
		width: 90%;
		margin: 0 auto;
	}
	#suwirunFeatures .suwirunContent p{
		margin-bottom: 20px;
	}
	#suwirunSeries h2{
		margin-bottom: 20px;
	}
	#suwirunSeries .columTwo .colL{
		width: 100%;
		margin-bottom: 20px;
	}
	#suwirunSeries .columTwo .colR{
		width: 100%;
		padding: 0;
	}
	#suwirunSeries h4,#suwirunDetail h3{
		font-size: 20px;
	}
	#suwirunSeries h4 span,#suwirunDetail h3 span{
		font-size: 16px;
	}
	.gotoProduct{
		width: 100%;
	}
	.productSeries{
		width: 90%;
		margin: 0 auto;
		padding-bottom:30px;
		margin-bottom: 50px;
	}
	
	#suwirunProduct .suwirunContent .columTwo .colR p{
		padding: 20px 5% 0 5%;
	}
	.productDetial{
		width: 90%;
		margin: 0 auto 40px auto;
		padding-bottom: 20px;
	}
	#suwirunSeries .columTwo .colR, #suwirunDetail .columTwo .colR{
		padding: 20px 0 0 0;
	}
	
	
}