@charset "utf-8";



/*********** btm setup ***********/

/* global class */
.lightbox_ph { /* lightbox呼び出し用のclassのため、ここに記述しないこと */ }
.clear { clear:both; }
.clearfix {zoom:1;}
.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; zoom: 1; }

.color_01 { color:#ff3300; }
.color_02 { color:#384cd1; }

.no_wrap{ overflow:hidden;zoom:1; }
.hover80 a:hover img,a.hover80:hover img,a:hover img.hover80 {filter: alpha(opacity=80);-moz-opacity:0.80;opacity:0.80;}
.hover60 a:hover img,a.hover60:hover img,a:hover img.hover60 {filter: alpha(opacity=60);-moz-opacity:0.60;opacity:0.60;}


.img_center { text-align: center; padding: 30px 0 0; }
.img_center a:hover { opacity: 0.5; }

.mt30 { margin-top: 30px !important;}
.mt45 { margin-top: 45px; }
.mb20 {margin-bottom: 20px !important;}
.mb40 {margin-bottom: 40px !important;}
.mr20 {margin-right: 20px !important;}

@media screen and (max-width:768px){
	.img_center { padding: 15px 0 0; }
	.mt30 { margin-top: 15px; }
	.mt45 { margin-top: 22px; }
}



/* img area */
.left_box { float:left; }
.right_box { float:right; }
.left_box_space { float:left; padding:15px 20px 0; }
.right_box_space { float:right; padding:15px 20px 0; }

.left_box_no_wrap { float:left; padding:15px 0 0 20px; }
.right_box_no_wrap { float:right;padding:15px 20px 0 0;  }

.drop1 { border:1px solid #ddd; padding:1px; }

#content .photo_center { text-align:center; padding:10px 0 0; }
span.photo_center { display:block; }






/* content caption */
#main h2,h2#sld { }
#main h3 { 
	padding:10px; text-align:center;
	background: -moz-linear-gradient(top, #ffeeb6, #ffdf79);
	background: -webkit-linear-gradient(top, #ffeeb6, #ffdf79);
	background: linear-gradient(to bottom, #ffeeb6, #ffdf79);
	margin: 20px auto;
}
#main h3 img { width: 100%; height: auto; max-width: 960px;}
#main h4 {  }
#main h5 { padding-top:20px; text-align:center; }

/* content p */
#content p { padding:15px 20px 0; }

/*  rollup */
#content p.page-up { padding-top:20px; text-align:right; }


/* INDEX
------------------------------------ */
#main_img { width: 960px; margin: 20px auto 0; }
#main_img img { width: 100%; height: auto; }

body.top section { width: 100%; margin: 70px auto 0; }

.wrap_cnt { width: 960px; margin: 20px auto 0; }
.wrap_cnt .head_box { text-align: center; }
.wrap_cnt .bene_img { width: 70%; height: auto; margin: 0 auto; text-align: center;}
.wrap_cnt .bene_img img { width: 100%; height: auto; margin: 0 auto;}

@media screen and (max-width:959px){
	.wrap_cnt { width: 95%; margin: 20px auto 0; }
	.wrap_cnt .bene_img { width: 90%; height: auto; margin: 0 auto; text-align: center;}
	.wrap_cnt .bene_img img { width: 100%; height: auto; margin: 0 auto;}
}
@media screen and (max-width:768px){
	#main_img { width: 100%; margin: 20px auto 0; }
	#main_img img { width: 100%; height: auto; }
	body.top section { width: 100%; margin: 40px auto 0; }
}


/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 768px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
	.col img { width: 100%; height: auto; }
}

/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 49.2%;
}

.know .span_1_of_2 img {
	width: 100%; height: auto;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 768px) {
	.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
}


/* LINE UP
------------------------------------ */
#lineup_intro .head_box { text-align: center; font-size: 22px; }
#lineup_intro .head_box h3 img { width: auto; height: auto; max-width: 960px;}
.wrap_cnt .all_car { 
	margin: 2em 0;
	text-align: center; color: #fff; font-size: 43px; font-weight: bold;
	background: #FF0000;
	padding: 10px 0 3px;
}
.wrap_cnt .all_car .all_car_s a{ font-size: 20px; font-weight: normal; color: #fff;}
.wrap_cnt .all_car_top { 
	margin: 1em 0;
	text-align: center; color: #058ed9; font-size: 35px; font-weight: bold;
}

#lineup_nav {
	width: 900px; margin: 30px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#lineup_nav li {
	width: 24%;
	margin-bottom: 15px;
	display: inline-block;
}
#lineup_nav li img { width: 100%; height: auto; } 


@media screen and (max-width:768px){
	#lineup_intro .head_box { text-align: center; font-size: 16px; }
	#lineup_intro .head_box h3 img { width: 95%; height: auto;  margin: 0 auto; }
	.wrap_cnt .all_car { font-size: 19px; }
	.wrap_cnt .all_car .all_car_s a{ font-size: 14px;}
	
	#lineup_nav {
	width: 95%; margin: 30px auto 0; }
    #lineup_nav li {
	width: 48%;
}
#lineup_nav li img { width: 100%; height: auto; } 

}



#lineup_intro h3 { 
	padding:10px; text-align:center;
	background: -moz-linear-gradient(top, #edf1ba, #9bcb60);
	background: -webkit-linear-gradient(top, #edf1ba, #9bcb60);
	background: linear-gradient(to bottom, #edf1ba, #9bcb60);
	margin: 20px auto;
}

/*  ラインナップ */
body.cars section { width: 100%; margin: 70px auto 0; }
body.cars section:first-child { margin: 0px auto 0; }


.wrap_lineup { padding: 50px auto 60px; }
.wrap_lineup .head_box { 
	color: #fff;
	font-size: 30px; padding:0 ; }
.wrap_lineup .head_box h4 { width: 865px; margin: 0 auto; padding: 5px 0 0 95px !important; text-align: left; position: relative; }

#lineup_8000 .head_box,
#lineup_8000  .head_box h4 { background-color: #2ca857; }
#lineup_10000 .head_box,
#lineup_10000 .head_box h4 { background-color: #ff9900; } 
#lineup_11000 .head_box,
#lineup_11000 .head_box h4 { background-color: #ff6699; } 
#lineup_13000 .head_box,
#lineup_13000 .head_box h4 { background-color: #5588fb; } 
#lineup_15000 .head_box,
#lineup_15000 .head_box h4 { background-color: #0267c1; } 



#lineup_13200 .head_box,
#lineup_13200 .head_box h4 { background-color: #5588fb; } 



.wrap_lineup .new { position: absolute; left: 0; top: -20px; }

.lineup_price {
	width: 90%; margin: 0px auto 0px; }
.lineup_price .price { float: left; display: block; height: 58px; }
.lineup_price .price img { height: 100%; width: auto; }
.lineup_price .etc { float: right; margin: 28px 0 0; display: block; height: 26px; }
.lineup_price .etc img { height: 100%; width: auto; }

.lineup_txt { font-size: 18px; text-align: center; display: block;}
.lineup_txt_sp { font-size: 18px; text-align: center; display: none;}
.lineup_kome { text-align: right; margin-bottom: 1em; }


@media screen and (max-width:768px){
	.wrap_lineup .head_box { font-size: 22px; padding:0 ; line-height: 1.2; }
	.wrap_lineup .new { width:15% !important; height: auto; }
	.wrap_lineup .head_box h4 { width: 80%; margin: 0 auto; padding: 10px 0 5px 15% !important; text-align: left; position: relative; }
	
	.lineup_price .price { clear: left; width: 100%; }
	.lineup_price .etc { clear:: right; width: 100%; }
	.lineup_price .price img,
	.lineup_price .etc img { width: 100%; height: auto; }
	
	.lineup_txt { font-size: 14px; display: none;}
	.lineup_txt_sp { font-size: 14px; display: block;}
}


.lineup {
	width: 100%; margin: 30px auto 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.lineup_c {
	width: 100%; margin: 30px auto 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.lineup_box {
	width: 31.25%;
	box-sizing: border-box; padding: 10px; border-radius: 10px;
	background: #fff; box-shadow: 0px 0px 4px gray;
	margin-bottom: 20px;
	display: inline-block;	
	margin-left: 1%;
	margin-right: 1%;
}
.lineup_box_empty {
	width: 31.25%;
	box-sizing: border-box;
	background: #fff;
	margin-bottom: 20px;
	display: inline-block;	
}

.lineup_box img { width: 100%; height: auto; }
@media screen and (max-width:959px){
	.lineup {  margin: 20px auto 20px; }
}
@media screen and (max-width:768px){
	.lineup_box { width: 48%; }
}
@media screen and (max-width:480px){
	.lineup_box { width: 100%; }
}

.lineup_box_l::after{
  content:"";
  display: block;
  width:30%;
}
.lineup_box_c { margin: 0 auto 70px; }

.lineup_box h5 { font-size: 22px; color: #fff; line-height: 1.2; padding: 5px 0 7px !important; letter-spacing: 1px; }
.lineup_box h5 span { font-size: 80%; }
#lineup_8000 .lineup_box h5 { background-color: #2c9757; } 
#lineup_10000 .lineup_box h5 { background-color: #ff8800; } 
#lineup_11000 .lineup_box h5 { background-color: #ff7799; } 
#lineup_13000 .lineup_box h5 { background-color: #5577fb; } 
#lineup_15000 .lineup_box h5 { background-color: #0278c1; } 

#lineup_13200 .lineup_box h5 { background-color: #0278c1; } 

.lineup_box table { width: 100%;
/*border-collapse: collapse;*/
border-spacing: 0;
margin: 10px 0 0; }

.lineup_box th,
.lineup_box td { border-bottom: solid 1px #999; padding: 5px; text-align: left; }

/*  ラインナップ 注意事項*/
.wrap_notes { padding-top: 10px!important; padding-bottom: 10px!important; margin: 40px auto !important;  background: #fff6cf; }
.notes { width:960px; margin: 10px auto !important; line-height: 1.6; }

@media screen and (max-width:959px){
	.notes { width:95%; }
}

/*  ページ下部コンタクトボタン*/
.wrap_btn_area { padding: 0px auto 50px !important; margin-bottom: 70px !important; }
.btn_area { width:960px; margin: 0.5em auto; border: solid 3px #8cc63f; }
.btn_area h4 { text-align: center; margin: -35px auto 20px;}
.btn_area ul {
	width: 100%; margin: 30px auto 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.btn_area li {
	width: 425px;
	display: inline-block;
	margin: 0 0 15px;
}
.btn_area li img {
	width: 100%; height: auto;
}
@media screen and (max-width:959px){
.wrap_btn_area { padding: 0px auto 70px !important; margin-bottom: 70px !important; }
.btn_area { width:95%; margin: 0.5em auto; border: solid 3px #8cc63f; box-sizing: border-box; }
	.btn_area h4 { width: 95%; text-align: center; margin: -35px auto 20px;}
	.btn_area h4 img { width: 100%; height: auto; max-width: 810px; }
	.btn_area ul { width: 100%; margin: 20px auto 35px; }
	.btn_area li { width: 44.27%; }
	.btn_area li img { width: 100%; height: auto; }
}

.sp_only_br { display: none;}
@media screen and (max-width:959px){
.sp_only_br { display: block;}
}


/* コンタクトボタンエリア*/
#wrap_btn {
	width: 900px; margin: 50px auto 0; }
.wrap_btn {
	width: 900px; margin: 30px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#wrap_btn h4{text-align: center;}

.wrap_btn img {width: 100%; height: auto;}

.btn_box {
width: 440px;
height: auto;
margin-bottom: 40px;
display: inline-block;
}
.btn_box img {
	width: 100%; height: auto;
}
#wrap_btn ul, #plan li { list-style: none; }

.wrap_btn a:hover { opacity: 0.5; }



/* ------------------------------------
 thanks
------------------------------------ */
.thanks_head {
	color:#EE7424; font-size: 2.5em;
}
.thanks_txt {
	font-size: 1.25em; line-height: 2;
	padding: 2em 2em;
	border: solid 5px #FFE287;
	width: 95%; max-width: 960px;
	margin: 0 auto;
	box-sizing: border-box;
}

@media screen and (max-width:640px){
	.thanks_head {
		font-size: 1.75em;
	}
	.thanks_txt {
		width: 95%;
		margin: 0 auto;
		font-size: 1.0em; line-height: 2;
		padding: 1.5em 1.5em;
	}	
}