@charset "UTF-8";
/*-----------------------------------
共通
-----------------------------------*/
section{
	display: block;
}
.yuki {
	margin: 0;
	padding: 0;
	width: 100vw;
	text-align: center;
	background-image:url("/car/service/hokkaido_suv/images/top-haikei02@2x.png");
	background-position: center;
	background-size:cover ; 
	overflow: hidden;
	margin-left:calc(-50vw + 50%);
	background-color:rgba(255, 255, 255, 0.404);
	background-blend-mode:lighten;

}

/* とびきりのSUV */
h1 img{
	width: 786px;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 65px;
	object-fit: contain;

}
/* 注釈 */
.yuki p{
	width: 960px;
	font-size: 20px;
	margin:0 auto;
	text-align: right;
}

/* 白枠 */

#service{
	height: 300px;
	margin: 0 auto;
	display: flex;
	justify-content:space-around ;
	text-align: center;
}

/* オレンジボタン */
.oreng{
	margin-top: 110px;
	padding: 10px;
	width: 530px;
	height: 70px;
	line-height:60px;
	background-color: #f08300;
	border-radius:21px;
	display: block;

}

.oreng a{
	color: #fefefe;
	font:inherit;
	font-size: 48px;
	text-decoration: none;

}

/* みどりボタン */
.midori{
	margin-top: 110px;
	padding: 10px;
	width: 400px;
	height: 70px;
	line-height:60px;
	background-color: #128c8d;
	border-radius:21px;
	display: block;

}

.midori a{
	color: #fefefe;
	font:inherit;
	font-size: 48px;
	text-decoration: none;


}

/* 北海道の広大な */
.greenbox{
	margin: 0;
	padding: 30px 0;
	width: 100vw;
	text-align: center;
	margin-left:calc(-50vw + 50%);
	background-color: #95dbd8;
	border-bottom: 80px solid #fff;
}

.greenbox-sub_txt {
	margin: 0 auto;
	text-align: center;
	width: 980px;
	padding: 30px 0 20px 0;
	color: #4f4b4b;
	font-size: 50px;
	font-weight: bold;
	border-top:8px solid #ffffff ;
	border-bottom: 8px solid #ffffff ;
}

.greenbox h2{
	padding: 80px 0 60px;
	color: #4f4b4b;
	font-size: 110px;
	font-weight: bold;
}

.greenbox-sub_txt2{
	margin: 0 auto;
	width: 960px;
	height: 200px;
	line-height: 63px;
	color: #353434;
	background-color: #fff;
	border: 5px solid #128c8d;
	border-radius:30px;
	font-size: 28px;

}

/* 車種指定できるSUV */
.introduction {
	
	width: 100vw;
	margin: 0 auto;
	text-align: center;
	margin-left:calc(-50vw + 50%);
	background-color: #5eaca9;
	padding-top: 100px;
	padding-bottom: 20px;
	border-bottom: 20px solid #fff;
}
/* 白のbox */
.box{
	margin: 0 auto;
	width: 975px;
	height: 307px;
	background-color:rgba(255, 255, 255, 0.831);
	position: relative;
	padding-top: 35px;
}
.box img{
	width: 191px;
	height: 191px;
	position: absolute;
    top: -100px; /* .box内の上から何pxか */
    right: 0px; /* .box内の右から何pxか */
	object-fit: contain;

}

.underline{
	width: 700px;
	height: 30px;
	margin: 20px 30px 30px 30px;
	padding-top: 20px;
	background-color: #fff;
	border-radius:20px;
	/* background: linear-gradient(transparent 70%,#fff 0%); */
	/* (transparent　色の割合, 蛍光ペンの色 色の割合) */

}

.underline h2{
	color: #128c8d;
	font-size: 63px;
	font-weight: bold;
	margin-top: -25px;
}
.box-text {
	width: 980px;
	margin: 15px 70px;
	height: 200px;
	line-height: 63px;
	color: #4f4b4b;
	font-size: 28px;
	text-align: initial;
}

/* SUVレンタカー予約 */
#reservation{
	width: 100vw;
	margin: 0 auto;
	text-align: center;
	margin-left:calc(-50vw + 50%);
	background-color: #5eaca9;
	padding-top: 50px;
	padding-bottom: 25px;
}

#reservation h3{
	color: #fefefe;
	font-size: 50px;
	font-weight: bold;
	margin-bottom: 35px;
}


#reservation .suv ul{
	margin: 0 auto;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	width: 960px;
}

#reservation .suv li{
	width: 25px;
	text-align: center;
}

#reservation .suv li img{
	margin: 10px;
	width: 285px;
	height: 180px;
	object-fit: contain;

}

#reservation .suv p{
	color: #fffefe;
	font-size: 25px;
	font-weight: bold;
	margin: 15px;
}

.otoku{
	margin: 0 auto;
	text-align: center;
	font-size:21px ;
	color: #fff;
	margin-bottom: 5px;
	margin-top: 40px;
}
.otoku02{
    margin: 0 auto;
    width: 516px;
    text-align: end;
    font-size: 15px;
    color: #fff;
    margin-top: 5px;
}

.yoyaku{
	margin: 0 auto;
	width: 160px;
	height: 40px;
	line-height: 43px;
	background-color: #f08300;
	border-radius:10px;
	display: block;

}

.yoyaku a{
	color: #fffefe;
	font-size: 22px;
	font-weight: bold;
	text-decoration: none;


}

/* スライドJS↓ */
.section{
	width: 960px;
	margin: 0 auto;
}
html, body {
	margin: 0;
	padding: 0;
  }
  * {
	box-sizing: border-box;
  }
.sliderArea {
	width: 960px;
	margin: 0 auto;
}
.sliderArea.w300 {
	max-width: 300px;
}
.slick-slide {
	margin: 0 5px;
}
.slick-slide img {
	width: 290px;
	height: 160px;
	margin: 0 auto;
	object-fit: contain;

}
.slick-prev, .slick-next {
	z-index: 1;
}
.slick-prev:before, .slick-next:before {
	color: #000;
}
.slick-slide {
	transition: all ease-in-out .3s;
	opacity: .2;
}
.slick-active {
	opacity: 1;
}
.slick-current {
	opacity: 1;
}
.thumb {
	margin: 20px 0 0;
}
.thumb .slick-slide {
	cursor: pointer;
}
.thumb .slick-slide:hover {
	opacity: .7;
}

/* まとめてSUVを見る */
.link{
	width: 100vw;
	height: 180px;
	padding-top: 5px;
	margin: 0 auto;
	text-align: center;
	margin-left:calc(-50vw + 50%);
	background-color: #5eaca9;	
	border-top: 20px solid #fff;
	

	
}
.all{
	margin: 0 auto;
	margin-top: 50px;
	padding: 10px;
	width: 600px;
	height: 70px;
	line-height: 55px;
	text-align: center;
	background-color: #f08300;
	border-radius:21px;
	display: block;

}

.all a{
	color: #fefefe;
	font:inherit;
	font-size: 48px;
	text-decoration: none;

}
/* ↓ラインアップ↓ */
#lineup{
	border-top: 80px solid #fff;
	width: 100vw;
	margin: 0 auto;
	margin-left:calc(-50vw + 50%);
	background-color: #5eaca9;
	padding-top: 100px;
	padding-bottom: 169px;
	border-bottom: 80px solid #fff;
}
#lineup h2{
	margin: 0 auto;
	text-align: center;
	margin-bottom: 100px;

}

#lineup h2 img{
	width: 1000px;
	margin: 0 auto;
	object-fit: contain;

}

/* 共通CSS */

.car{
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	position: absolute;
	z-index: 20;

}

.box-text{
	width: 808px;
	margin: 0 auto;
	height: 200px;
	line-height: 50px;
	color: #4f4b4b;
	font-size: 26px;
	text-align: left;
	padding-left: 20px;
	}

/* ヤリスクロス紹介 */



/* ヤリスクロス-----------
--------------------CSS */


.car-1{
	width: 980px;
	height: 1100px;
	margin: 0 auto;
	position: relative;
	margin-bottom: 75px;
	margin-top: 180px;

}
.sale{
	color: #e9523e;
    font-size: 29px;
    font-weight: bold;
    position: absolute;
    z-index: 25;
    height: 100px;
    line-height: 54px;
    margin-top: 67px;
    display: block;
    margin-left: 223px;
}
.ritu{
	font-size: 67px;
	letter-spacing: -4px;
}
.ofu{
	font-size: 57px;
	margin-left: 37px;

}


.line01 img{
	width: 822px;
    height: 491px;
    margin-left: 12px;
    object-fit: contain;

}


.Ravel01 img{
	width: 70px;
	height: 480px;
	margin-right: 80px;
	margin-left: 30px;
	object-fit: contain;

}
.box01{
	width: 810px;
	height: 400px;
	margin-top: 30px;
	color: #353434;
	background-color: #fff;
	border-radius:30px;
	font-size: 30px;
	padding-top: 25px;
	position: absolute;
	z-index: 20;
	bottom: 52px;
	right: 0;
}
.underline01{
	width: 650px;
	height: 30px;
	margin: 20px 30px;
	padding-top: 20px;
	background-color: #ffd097;
	/* background: linear-gradient(transparent 70%,#fff 0%); */
	/* (transparent　色の割合, 蛍光ペンの色 色の割合) */

}

.underline01 h3{
	font-size: 45px;
	font-weight: bold;
	margin-top: -25px;
}

.yoyaku01{
	width: 578px;
	height: 60px;
	margin: 0 auto;
	line-height: 63px;
	background-color: #f08300;
	border-radius:20px;
	text-align: center;
	display: block;
	cursor: pointer;
}




.yoyaku01 a{
	color: #fffefe;
	font-size: 26px;
	font-weight: bold;
	text-decoration: none;
	display: block;

}


.bg-image01 img{
	width: 1100px;
	height: 800px;
	position: absolute;
	z-index: 10;
    bottom: -19px; /* .box内の上から何pxか */
    left: -170px; /* .box内の左から何pxか */
	object-fit: contain;

}

/* RAV4-----
-----------------------CSS */
.car-2{
	width: 980px;
	height: 1100px;
	margin: 0 auto;
	position: relative;
	margin-top: 70px;
	margin-bottom: 194px;

}

.line02 img {
    width: 783px;
    height: 636px;
    margin-top: 60px;
    object-fit: contain;
}


.Ravel02 img{
	width: 84px;
	height: 400px;
	margin-left: 80px;
	margin-top: 100px;
	object-fit: contain;

}

.box02{
	width: 820px;
	height: 370px;
	margin-top: 30px;
	color: #353434;
	background-color: #fff;
	border-radius:30px;
	font-size: 30px;
	padding-top: 46px;
	position: absolute;
	z-index: 20;
	bottom: -50px;
}

.underline02 {
    width: 551px;
    height: 30px;
    margin: 20px 30px;
    padding-top: 20px;
    background-color: #ffd097;
}
.underline02 h3 {
    font-size: 42px;
    font-weight: bold;
    margin-top: -25px;
}



.bg-image3 img{
	width: 1100px;
	height: 800px;
	position: absolute;
	z-index: 10;
    bottom: -160px; /* .box内の上から何pxか */
    right: -170px; /* .box内の右から何pxか */
	object-fit: contain;

}

.yoyaku02{
	width: 300px;
	height: 60px;
	line-height: 63px;
	background-color: #f08300;
	border-radius:20px;
	position: absolute;
	z-index: 20;
	bottom: -140px;
	text-align: center;
	display: block;

}

.yoyaku02 a{
	color: #fffefe;
	font-size: 26px;
	font-weight: bold;
	text-decoration: none;


}

.bg-image02 img{
	width: 1100px;
	height: 800px;
	position: absolute;
	z-index: 10;
    bottom: -124px; /* .box内の上から何pxか */
    right: -170px; /* .box内の右から何pxか */
	object-fit: contain;

}


/* HARRIER-----------
--------------------CSS */

.car-3{
	width: 980px;
	height: 1100px;
	margin: 0 auto;
	position: relative;
	margin-top: 120px;
	margin-bottom: 78px;

}

.line03 img{
	width: 797px;
	height: 488px;
	margin-top: 80px;
	object-fit: contain;

}

.Ravel03 img{
	width: 70px;
	height: 450px;
	margin-right: 80px;
	margin-left: 30px;
	object-fit: contain;

}

.box03{
	width: 810px;
	height: 400px;
	margin-top: 30px;
	color: #353434;
	background-color: #fff;
	border-radius:30px;
	font-size: 30px;
	padding-top: 45px;
	position: absolute;
	z-index: 20;
	bottom: 52px;
	right: 0;
}




.underline03{
	width: 650px;
	height: 30px;
	margin: 20px 30px;
	padding-top: 20px;
	background-color: #ffd097;
	/* background: linear-gradient(transparent 70%,#fff 0%); */
	/* (transparent　色の割合, 蛍光ペンの色 色の割合) */

}

.underline03 h3{
	font-size: 45px;
	font-weight: bold;
	margin-top: -25px;
}

.yoyaku03{
	width: 300px;
	height: 60px;
	line-height: 63px;
	background-color: #f08300;
	border-radius:20px;
	position: absolute;
	z-index: 20;
	bottom: -40px;
	right: 0;
	text-align: center;
	display: block;

}


.yoyaku03 a{
	color: #fffefe;
	font-size: 26px;
	font-weight: bold;
	text-decoration: none;

}


.bg-image03 img{
	width: 1100px;
	height: 800px;
	position: absolute;
	z-index: 10;
    bottom: -13px; /* .box内の上から何pxか */
    left: -170px; /* .box内の左から何pxか */
	object-fit: contain;

}


/* ランドクルーザープラド-----
-----------------------CSS */

.car-4{
    width: 980px;
    height: 1100px;
    margin: 0 auto;
    position: relative;
    margin-top: 133px;
    margin-bottom: 119px;

}



.line04 img {
    width: 732px;
    height: 643px;
    object-fit: contain;
}

.Ravel04 img{
	width: 180px;
	height: 480px;
	margin-top: 15px;
	margin-left: 65px;
	object-fit: contain;

}
.underline04{
	width: 650px;
	height: 30px;
	margin: 20px 30px;
	padding-top: 20px;
	background-color: #ffd097;
	/* background: linear-gradient(transparent 70%,#fff 0%); */
	/* (transparent　色の割合, 蛍光ペンの色 色の割合) */

}

.underline04 h3{
	font-size: 45px;
	font-weight: bold;
	margin-top: -25px;
}

.box04{
	width: 820px;
	height: 370px;
	margin-top: 30px;
	color: #353434;
	background-color: #fff;
	border-radius:30px;
	font-size: 30px;
	padding-top: 25px;
	position: absolute;
	z-index: 20;
	bottom: 47px;
}


.bg-image04 img{
	width: 1100px;
	height: 800px;
	position: absolute;
	z-index: 10;
    bottom: -40px; /* .box内の上から何pxか */
    right: -170px; /* .box内の右から何pxか */
	object-fit: contain;

}

/* 新型ヴェゼル紹介-----------
--------------------CSS */

.car-5{
	width: 980px;
	height: 1100px;
	margin: 0 auto;
	position: relative;
	margin-top: 155px;

}
.line05 img{
	width: 797px;
	height: 488px;
	margin-top: 80px;
	object-fit: contain;

}

.Ravel05 img{
	width: 70px;
	height: 450px;
	margin-right: 80px;
	margin-left: 30px;
	object-fit: contain;

}
.box05{
	width: 810px;
	height: 330px;
	margin-top: 30px;
	color: #353434;
	background-color: #fff;
	border-radius:30px;
	font-size: 30px;
	padding-top: 25px;
	position: absolute;
	z-index: 20;
	bottom: 70px;
	right: 0;
}
.underline05{
	width: 760px;
	height: 30px;
	margin: 25px 20px;
	padding-top: 20px;
	background-color: #ffd097;
	/* background: linear-gradient(transparent 70%,#fff 0%); */
	/* (transparent　色の割合, 蛍光ペンの色 色の割合) */

}

.underline05 h3{
	font-size: 40px;
	font-weight: bold;
	margin-top: -25px;
}

.yoyaku05{
	width: 300px;
	height: 60px;
	line-height: 63px;
	background-color: #f08300;
	border-radius:20px;
	position: absolute;
	z-index: 20;
	bottom: -40px;
	right: 0;
	text-align: center;
	display: block;

}


.yoyaku05 a{
	color: #fffefe;
	font-size: 26px;
	font-weight: bold;
	text-decoration: none;

}


.bg-image05 img{
	width: 1100px;
	height: 800px;
	position: absolute;
	z-index: 10;
    bottom: 16px; /* .box内の上から何pxか */
    left: -170px; /* .box内の左から何pxか */
	object-fit: contain;

}


/* エクストレイルの-----
-----------------------CSS */

.car-6{
	width: 980px;
	height: 1100px;
	margin: 0 auto;
	position: relative;
	margin-top: 55px;
	margin-bottom: 206px;

}



.line06 img {
    width: 732px;
    height: 643px;
    margin-top: 81px;
    object-fit: contain;
}

.Ravel06 img{
	width: 84px;
	height: 400px;
	margin-left: 80px;
	margin-top: 100px;
	object-fit: contain;

}
.underline06{
	width: 670px;
	height: 30px;
	margin: 20px 30px;
	padding-top: 20px;
	background-color: #ffd097;
	/* background: linear-gradient(transparent 70%,#fff 0%); */
	/* (transparent　色の割合, 蛍光ペンの色 色の割合) */

}

.underline06 h3{
	font-size: 43px;
	font-weight: bold;
	margin-top: -25px;
}

.box06{
    width: 820px;
    height: 391px;
    margin-top: 30px;
    color: #353434;
    background-color: #fff;
    border-radius: 30px;
    font-size: 30px;
    padding-top: 33px;
    position: absolute;
    z-index: 20;
    bottom: -56px;
}


.bg-image06 img{
	width: 1100px;
	height: 800px;
	position: absolute;
	z-index: 10;
    bottom: -133px; /* .box内の上から何pxか */
    right: -170px; /* .box内の右から何pxか */
	object-fit: contain;

}


/* ロッキーの-----
-----------------------CSS */

.car-7 {
    width: 980px;
    height: 1100px;
    margin: 0 auto;
    position: relative;
    margin-top: 70px;
    margin-bottom: 250px;
}

.line07 img{
	width: 811px;
	height: 504px;
	margin-top: 170px;
	object-fit: contain;

}

.Ravel07 img{
	width: 70px;
	height: 400px;
	margin-left: 80px;
	margin-top: 100px;
	object-fit: contain;

}

.box07{
	width: 820px;
	height: 330px;
	margin-top: 30px;
	color: #353434;
	background-color: #fff;
	border-radius:30px;
	font-size: 30px;
	padding-top: 25px;
	position: absolute;
	z-index: 20;
	bottom: -15px;
}
.underline07{
	width: 730px;
	height: 30px;
	margin: 20px 30px;
	padding-top: 20px;
	background-color: #ffd097;
	/* background: linear-gradient(transparent 70%,#fff 0%); */
	/* (transparent　色の割合, 蛍光ペンの色 色の割合) */

}

.underline07 h3{
	font-size: 42px;
	font-weight: bold;
	margin-top: -25px;
}

.bg-image07 img{
	width: 1100px;
	height: 800px;
	position: absolute;
	z-index: 10;
    bottom: -160px; /* .box内の上から何pxか */
    right: -170px; /* .box内の右から何pxか */
	object-fit: contain;

}

/* ラングラー */
.box_rangura {
	width: 775px;
    height: 391px;
    margin-top: 29px;
    color: #353434;
    background-color: #fff;
    border-radius: 30px;
    font-size: 30px;
    padding-top: 17px;
    position: absolute;
    z-index: 20;
    bottom: -48px;
}

.box-text_rangura {
	width: 808px;
    margin: 0 auto;
    height: 200px;
    line-height: 50px;
    color: #4f4b4b;
    font-size: 26px;
    text-align: left;
    padding-left: 35px;
}




/* ユーザーボイス */

#voice{
	margin: 0;
	padding: 30px 0;
	width: 100vw;
	text-align: center;
	margin-left:calc(-50vw + 50%);
	background-color: #95dbd8;
	border-top: 60px solid #fff;
	border-bottom: 60px solid #fff;
}

#voice h2{
	width: 850px;
	margin: 0 auto;
	height: 80px;
	line-height: 35px;
	padding: 30px;
	color: #fffefe;
	font-size: 80px;
	font-weight: bold;
	background-color: #5eaca9;
	margin-top: 20px;
	margin-bottom: 30px;
}
.textoya{
	margin: 0 auto;
	width: 980px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}

.textoya .box1-1{
	width: 310px;
}

.box1-1text{
	width: 320px;
	height: 339px;
	padding-top: 10px;
	padding-left: 10px;
	line-height: 40px;
	margin: 0 auto;
	background-color: #fff;
	border: 4px solid #128c8d;
	border-radius:20px;
}
.box1-1text-p{
	text-align: left;
	color: #787878;
	font-size: 21px;
}

.name{
	text-align: right;
	color: #787878;
	font-size: 21px;
}

.box1-1 img{
	width: 217px;
	height: 217px;
	margin-top: -60px;
	object-fit: contain;

}
.box1-2text{
	width: 320px;
	height: 339px;
	padding-top: 10px;
	padding-left: 25px;
	line-height: 40px;
	margin: 0 auto;
	background-color: #fff;
	border: 4px solid #128c8d;
	border-radius:20px;
}
/* SUVレンタカー予約 */
.reservation{
	width: 100vw;
	margin: 0 auto;
	text-align: center;
	margin-left:calc(-50vw + 50%);
	background-color: #5eaca9;
	padding-top: 120px;
	padding-bottom: 25px;
}

.reservation h3{
	color: #fefefe;
	padding-top: 50px;
	font-size: 50px;
	font-weight: bold;
	margin-bottom: 35px;
	border-top: 20px solid #fff;

}


.reservation .suv ul{
	margin: 0 auto;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
	width: 960px;
}

.reservation .suv li{
	width: 25px;
	text-align: center;
}

.reservation .suv li img{
	margin: 10px;
	width: 285px;
	height: 180px;
	object-fit: contain;

}

.reservation .suv p{
	color: #fffefe;
	font-size: 25px;
	font-weight: bold;
	margin: 15px;
}


.tabiraitop{
	margin: 0 auto;
	text-align: center;
}
.tabiraitop-url01{
	margin: 0 auto;
	margin-top: 100px;
	margin-bottom: 80px;
	padding: 10px;
	width: 500px;
	height: 70px;
	line-height:60px;
	background-color: #f08300;
	border-radius:21px;
	display: block;
	color: #fff;
	
}
.tabiraitop-url02{
	margin: 0 auto;
	margin-top: 100px;
	margin-bottom: 80px;
	padding: 10px;
	width: 500px;
	height: 70px;
	line-height:60px;
	background-color: #128c8d;
	border-radius:21px;
	display: block;
	color: #fff;
	
}

.tabiraitop a{
	color: #fefefe;
	font:inherit;
	font-size: 35px;
	text-decoration: none;

}

.oreng:hover,.midori:hover,.tabiraitop-url01:hover,.tabiraitop-url02:hover{

	opacity: 0.5;
  }

  .yoyaku:hover,.all:hover,.yoyaku01:hover,.yoyaku02:hover,.yoyaku03:hover,.yoyaku04:hover,.yoyaku05:hover,.yoyaku06:hover{
	background-color: #f69d33;
  }
  .slick-dots li.slick-active button:before {
    background-color: #1f1f1f;
}
.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #f3eeee;
	margin: 18px;
}
.slick-dots li button:before {
    font-family: 'slick';
    font-size: 30px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '';
    text-align: center;
    opacity: .5;
    color: #656565;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 18px;
	border-radius: 50%;
    background-color: #ccc;
}