/*========== SP_PULLDOWN_MENU ==========*/
.sp_headdnav_btn {
	display: none; color: #fff; float: right; padding: 7px 10px; margin: 8px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #0E0E0E;
	background-image: -moz-linear-gradient(top, #151515, #040404);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
	background-image: -webkit-linear-gradient(top, #151515, #040404);
	background-image: -o-linear-gradient(top, #151515, #040404);
	background-image: linear-gradient(to bottom, #151515, #040404);
	background-repeat: repeat-x;
	border-color: #040404 #040404 #000;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
	filter: progid:DXImageTransform.Microso
}
.sp_headdnav_btn:hover {background-color: #040404;}

@media screen and (max-width: 800px){
	body {-webkit-text-size-adjust: 100%;}
	.pc {display: none;}
	.sp {display: block;}
	img {max-width: 100%;}
	.box {padding: 20px;}

	/*========== SP_MENU ==========*/
	.spheader {
		background-color: #1B1B1B;
		background-image: -moz-linear-gradient(top, #222222, #111111);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222), to(#111));
		background-image: -webkit-linear-gradient(top, #222, #111);
		background-image: -o-linear-gradient(top, #222222, #111111);
		background-image: linear-gradient(to bottom, #222, #111);
		background-repeat: repeat-x;
		border-color: #252525;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
		font-family: 'abarth_heavyregular';
	 }
	.sp_navbar {
		background-color: #1B1B1B;
		background-image: -moz-linear-gradient(top, #222222, #111111);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222), to(#111));
		background-image: -webkit-linear-gradient(top, #222, #111);
		background-image: -o-linear-gradient(top, #222222, #111111);
		background-image: linear-gradient(to bottom, #222, #111);
		background-repeat: repeat-x;
		border-color: #252525;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
	}
	.sp_navbar h1 {float: left; padding: 5px; color: #999; font-size: 20px; line-height: 35px; }
	.sp_navbar h1 img {width: 32px;}
	.sp_navbar h1 a {color: #999;}
	.sp_headdnav_btn {display: block; cursor: pointer;}
	.sp_headdnav_btn .icon-bar {display: block; width: 18px; height: 2px; background-color: #F5F5F5; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}
	.sp_headdnav_btn .icon-bar + .icon-bar {margin-top: 3px; }
	.sp_headdnav_btn:hover .icon-bar {background-color: #fff;}

	.sp_mainnav .mainnav_body {padding: 0 40px; width: auto;}
	.sp_mainnav .mainnav_body .spnav {width: 100%; display: none; padding: 10px 0;}
	.sp_mainnav .mainnav_body .spnav li {display: block; }
	.sp_mainnav .mainnav_body .spnav li:first-child {margin-left: 0;}
	.sp_mainnav .mainnav_body .spnav li a {display: block; padding: 9px 15px; margin-bottom: 2px; color: #999; font-weight: bold;}
	.sp_mainnav .mainnav_body .spnav li a:hover {
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
		background-color: #0E0E0E;
		background-image: -moz-linear-gradient(top, #151515, #040404);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
		background-image: -webkit-linear-gradient(top, #151515, #040404);
		background-image: -o-linear-gradient(top, #151515, #040404);
		background-image: linear-gradient(to bottom, #151515, #040404);
		background-repeat: repeat-x;
		border-color: #040404 #040404 #000;
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
		filter: progid:DXImageTransform.Microso
	}
	.sp_mainnav .mainnav_body .spnav .opens {display: none;}
	.sp_mainnav .mainnav_body .spnav li .nav_open_sp a {margin: 0 15px;}

	/*========== INDEX ==========*/
	.slideBody {height: 300px;}
    .slideBody .cover {width: 100%; height: 300px;}
	.slideBody .cover > div {vertical-align: top; padding-top: 20px; padding-left: 5%;}
	.slideBody .cover h2{font-size: 24px;}

	/*========== COMMON ==========*/
	.container {width: 100%; box-sizing: border-box;}
	.column {margin-left: 0}
	.col_double, .col_single {width: 100%; }
	.view770 {}
	.column.col_half {width: 48%; margin-left: 4%;}
	.column.col_half.first {margin-left: 0;}
	.corner .col_half {width: 48%; margin-left: 4%;}
	.corner .col_half.first {margin-left: 0;}
	.photoL {width: 56%; margin-right: 2%; float: left;}
	.txtR {width: 40%;}

	/*========== SUB HEAD ==========*/
	.subhead_wrap {height: 400px;}
	.subhead_wrap .blacktile.cover, .subhead_wrap .blacktile.contain {width: 100%; height: 200px; left: 0; margin-left: 0; top: 200px;}
	.whitetile {width: 100%; height: 200px; right: 0; top: 0; min-width: initial; }
	.subhead_wrap .whitetile .subhead {height: 200px;}

	/*========== SUB PRODUCT ==========*/
	.subhead_prod {background: #000;}
	.subhead_prod .cover{width: 100%; height: 300px; margin-left: 0; left: 0; background-position: center; background-size: 130%!important; background-repeat: no-repeat;}
	.subhead_prod .contain {width: 100%; height: 300px; margin-left: 0; left: 0; background-position: center; background-size: 100%!important; background-repeat: no-repeat;}
	.subhead_prod .subhead {width: 100%;}
	.subhead_prod {height: 300px;}
	.subhead_prod .blacktile {display: none;}
	.subhead_prod .subhead .subpage_nav {width: 80px; padding-left: 10px;}
	.subhead_prod .subpage_nav .btn {line-height: 1; font-size: 8px;}
	.subhead_prod .subhead h1 {left: 110px; font-size: 16px;}

	.sidefix_wrap {display: none;}
	.models .model {margin: 0; }
	.models .col_single {margin: 0; width: 45%; padding: 2%; vertical-align: top;}
	.subbody #model h3 {margin: 0 0 15px;}
	#specification .name {color: #FFF; font-family: 'abarth_heavyregular'; font-size: 16px; line-height: 1.4; padding-bottom: 10px; height: auto;}
	.abarth595 #exterior .wheels li {margin: 0 7px 40px; }
	.corner_img {max-width: 100%; box-sizing: border-box; width: auto;}
	.colorcombi_wrap .table_colorcombi {width: 100%;}
	.colorcombi_wrap .table_colorcombi thead img {max-width: 100%;}
	.colorcombi_wrap .table_colorcombi th, .table_colorcombi td {padding: 8px 4px; }
	#interior .tx_r, .table_colorcombi .car_img {font-size: 8px;}
	.table_spec th {width: 35%; }
	.productslide_wrap .bx-controls-direction a {top: 0; width: 24px; height: 100%; margin: 0; }
	.productslide_wrap .bx-controls-direction .bx-prev {left: -30px; }
	.productslide_wrap .bx-controls-direction .bx-next {right: -30px; }
	.abarth500 #esseesse .productslide_wrap .bx-controls-direction a {height: 100%; margin: 0; }
	.brembo595_img {width: 100%;}
	.merit .column{margin: 10px 0;}

	/*========== SUB ==========*/
	.prod_list .inner_cell {float: none;}
	.prod_list .corner_img {margin: 0 0 10px;}
	.prod_list .photoL, .prod_list .txtR {float: left;}
	.story {padding: 28px;}
	.recycle .container, .history .container, .autoexpert .container, .maestro .container, .offer .container {width: 90%;}

	/*========== MAESTRO SERVICE ==========*/
	.maestro .flow .fl {float: left; width: 48%;}
	.maestro .flow .first {margin-right: 4%;}
	.maestro .left700 {margin-bottom: 20px;}
	.maestro .left700 p {width: 60%; padding-right: 4%; }
	.maestro .left700 img {float: right; width: 36%}
	.maestro .hidebx .right700 p {width: 60%;}
	.maestro .hidebx .col_single {margin-right: 0; width: 85%; padding: 8px 5%;}
	.maestro .hidebx{height: 280px;}

	/*========== FORM ==========*/
	.form_popup,.form_popup .container{width: 280px; overflow: hidden;}
	.modal_form{height:100%;}
	.modal_form iframe{height: 290px;}
	.modal_form_inner{height: 100%; width:300px; margin: 10px auto; overflow: auto;-webkit-overflow-scrolling:touch;}
	.modal_form_body {width: 100%; height: 300px; position: absolute; left: 0; top: 0; margin: 0; z-index: 3; }
	.form_tab > ul > li {display: none; vertical-align: middle; width: 100%;}
	.form_tab > ul > li:first-child {width: 90%; background: #c51216; color: #fff; text-indent: 0; padding: 5%; text-align: center; }
	.form_tab_body li {display: block;vertical-align: middle;}
	.form_tab_body li a {line-height: 30px;height: 30px;}
	.form table tr td{display:block;border:none;}
	.form table tr td.title{width: 100%;}
	.form table tr{clear:both;}
	.form table tr td textarea, .form table tr td input[type="text"] {width: 100%; padding:5px 0;}
	.form table .msg {clear: both; display: block; }
	.form table tr td.title{padding:10px 0px; text-indent: 10px; }
	.form table tr td input.s {width: 50px; margin: 0 10px 0 10px; }
	.form table .customSelect{width: 100%; }

}

@media screen and (max-width: 800px) and (min-width: 641px){
	#exterior .inner_cell:first-child {width: 25%; margin-right: 1%;}
}

@media screen and (max-width: 640px) {
	/*========== COMMON ==========*/
	.box {max-width: 100%; width: 100%; float: none; margin: 0 auto 40px; box-sizing: border-box;}
	.inner_cell {float: none;}
	.title.view770 {padding: 20px; box-sizing: border-box;}

	.subbody h2 {line-height: 1.4;}
	.subbody h3 {font-size: 18px; line-height: 1.6;}
	.subbody h4 {font-size: 16px; line-height: 1.6;}
	.subbody h2 {font-size: 22px; }
	.subbody h3 {font-size: 22px; }

	.subhead_wrap .subhead .fs70 {font-size: 50px; }
	.subhead_wrap .subhead .fs60 {font-size: 40px; }
	.subhead_wrap .subhead .fs50 {font-size: 32px; }

	/*========== FOOTER ==========*/
	.subnav .btn {width: 90%; padding: 0 5%;}
	.subnav .subnav_body li {width: 100%; margin: 0 0 20px;}
	.footer_part ul li{margin: 0 2%;}
	.footer_links > div {display: block; width: 100%; text-align: center; vertical-align: middle; margin: 30px auto; }
	.sns li {margin: 0 10px 30px;}

	/*========== INDEX ==========*/
	.slideBody .cover {background-position: center bottom; background-size: 140%!important; background-repeat: no-repeat;}

	/*========== SUB HEAD ==========*/
	.subhead_wrap .blacktile.cover, .subhead_wrap .blacktile.contain {width: 100%; height: 200px; margin: 0 auto; left: 0; margin-left: 0; top: 200px; display: block; background-size: auto 100%!important;}
	.subhead_prod .cover, .subhead_prod .contain {background-position: center bottom;}
	.subhead_wrap .subhead h1.black {color: #fff; padding-right: 5%;}
	.subhead_wrap h1 .subtxt.red {font-weight: normal; color: #fff; font-size: 15px; padding-top: 10px; display: inline-block;}
	.container_cross {padding: 20px 18px;}
	.container_cross h2 {padding-left: 20px;}
	.double .corner_img_model {padding: 18px; }
	.column.col_half, .corner .col_half {width: 100%; margin-left: 0;}

	/*========== SUB PRODUCT ==========*/
	.productslide_wrap {margin: 0 20px; }
	.spec .hyou {width: 100%;}
	#model h4, #model h3 {line-height: 1.2; font-size: 16px; margin: 0 0 10px;}
	#specification .name {font-size: 12px;}
	#model p {font-size: 10px;}
	.colorcombi_wrap {width: 100%; padding: 0 18px; margin: 0 0 30px; overflow-x: scroll; -webkit-overflow-scrolling: touch; border: 8px solid #3C3D41; box-sizing: border-box;}
	.colorcombi_wrap .table_colorcombi {width: 600px;}
	.colorcombi_wrap::-webkit-scrollbar {background: #3C3D41;}
	.colorcombi_wrap::-webkit-scrollbar:horizontal {background: #3C3D41; width: 10px;}
	.colorcombi_wrap::-webkit-scrollbar-thumb:horizontal {background: #BEBEBE; width: 10px;}
	#exterior .wheels li, .abarth595 #exterior .wheels li {margin: 0 2%; width: 45%; font-size: 80%;}
	#exterior .wheels li img {width: 60%; margin: 0 0 10px; }
	.specBody .viewport {height: 300px;}
	#specification .topic {font-size: 80%;}
	.table_spec {font-size: 80%;}
	.table_spec th, .table_spec td {padding: 8px 4px;}
	.brembo595_img {width:100%; margin: 0 0 10px;}
	.brembo595_img li {width: 31%; margin: 0 1%; }
	.brembo595_img .inner_Ls, .brembo595_img .inner_Rs {width: 100%; float: none;}
	#esseesse {font-size: 80%;}
	#esseesse .corner_top_left, #esseesse .corner_top_right, #esseesse .corner_bottom_left, #esseesse .corner_bottom_right {display: none;}
	#esseesse .mt {margin-top: 10px;}
	#esseesse .box {margin-bottom: 0px; padding: 0 20px 20px;}
	#esseesse .corner_img {padding: 0 0 20px;}
	#esseesse h3, #esseesse h4 {line-height: 1.4;}
	#esseesse .price {padding: 0; margin: 0;}
	#esseesse .productslide > li {margin: 0 20px 0 0; position: relative; }
	#esseesse .productslide li .viewport {height: 360px; overflow:hidden; position:relative; }
	#esseesse .productslide li .overview {list-style:none; position:absolute; left:0; top:0; margin-right: 20px; width: 95%;}
	#esseesse .productslide li .scrollbar {position:absolute; background-position:0 0; right: 0px; top:0; width:10px; display: block;}
	#esseesse .productslide li .track {background: #3c3d41; height: 100%; width: 10px; position: relative; }
	#esseesse .productslide li .thumb {background: #bebebe; height: 50px; width: 10px; cursor:pointer; overflow:hidden; position:absolute; top:0; left:0; }
	#esseesse .productslide li .thumb .end {display: none; height:0; width:10px; }
	#esseesse .productslide li .disable {display:none; }
	#financialsolusions .title p {font-size: 16px}
	.fn1 img {height: 50px; padding-bottom: 10px;}
	.fn1 p, .fn1-2 p {position: static; }

	.photoL, .txtR {float: none; width: 100%; margin: 0 0 15px;}
	.prod_list .photoL, .prod_list .txtR {float: none; width: 100%; margin: 0 0 15px;}
	.story, .history_movie {padding: 18px;}
	.story_box img {margin-bottom: 15px;}
	.recycle table {font-size: 0.8%}
	.recycle .table_spec thead td {background: #FFF; color: #26272C; width: 50%; }
	.recycle .table_spec th, .recycle .table_spec td {padding: 8px 2px;}
	.recycle .productslide_wrap {margin: 0; }
	.recycle .bx-controls {display: none;}
	.title_bgb {font-size: 13px; margin: 0px auto 10px;}

	/*========== MAESTRO SERVICE ==========*/
	.maestro .flow .fl{float: none;width: 100%;}
	.maestro .left700{margin-bottom: 20px;}
	.maestro .left700 p{width: 100%; padding-right: 0; float: none; }
	.maestro .left700 img{float: none; width: 50%; margin-bottom: 20px;}
	.maestro .hidebx{height: 350px;}
	.maestro .hidebx .right700 p{width: 95%; float: none; padding: 1%;}

}


























