@charset "UTF-8";

/* //////////////////////////////////////////////////

　ベースのスタイル

////////////////////////////////////////////////// */

/* Font
-------------------------------------------------- */
body {
	color:#555252;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 'メイリオ',　Meiryo,　sans-serif;
	font-size:14px;
	-webkit-text-size-adjust:100%;
	line-height:1;
}
input, select, textarea {
	font-size:100%;
}
p, li, dt, dd, th, td {
	line-height:1.7;
}
a:link, a:visited {
	color:#555252;
	text-decoration:none;
}
a:hover, a:active {
	text-decoration: underline;
}
.fsi {
	font-style: italic;
}
.sm{
	display: none;
}

@media screen and (max-width: 768px) {
	body {
		font-size:75%;
	}
	input, select, textarea {
		font-size:16px;
	}
	.sm{
		display: block;
	}
}




/* layout
-------------------------------------------------- */
.container {
	position: relative;
	width: 980px;
	margin:0 auto;
}
.hidden-pc {
	display: none;
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
	#wrapper {
	}
	.container {
		width: auto;
		margin:0 10px;
	}
	.hidden-sp {
		display:none;
	}
	.hidden-pc {
		display: block;
	}
	.noFloat-sp {
		float:none;
		width:auto !important;
	}
	img.fit {
		width: 100%;
		height: auto;
	}
}




/* header
-------------------------------------------------- */
#header {
	position: absolute;
	z-index: 5000;
	width: 100%;
}

#header .box1 {
	padding: 10px 0;
	background-color: #FFF;
	color: #000;
}
#header .box2 {
	padding: 20px 0;
	background-color: #e3e6ed;
	color: #000;
}
#header .container {
	
}
/* fixed */
#change {
	position: fixed;
	z-index: 5000;
	top: -200px;
	left: 0;
	width: 100%;
	background: #fff;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}
#change.active {
	top: 0;
}
#change .container {
	padding: 10px 0;
}

.logo.site {
	float: left;
	margin-left: 10px;
}
.logo.site a {
	display: block;
	background-image: url(../img/common/logo_fixed.png);
	background-size: 118px;
	width: 118px;
	height: 20px;
	text-indent: -9999px;
}
#change .logo.site a {
	background-image: url(../img/common/logo_fixed.png);
}

.usedcarBtn {
	position: absolute;
	top: -62px;
	right: 0;
}
#change .usedcarBtn {
	position: absolute;
	top: 0;
	right: 0;
}

@media screen and (max-width: 768px) {
	#header{
		position: relative;
	}
	#header .container {
		
	}
	#header .box2{
		padding: 10px 0;
	}
	/* fixed */
	#change {
		display: none;
	}
	#change.active{
		display: block;
	}
	#change .container {
		padding: 10px 0;
	}
	.logo.site {
		float: none;
		margin-bottom: 8px;
	}
	.usedcarBtn {
		top: -102px;
	}
	.usedcarBtn img {
		width: 70px;
	}
}





/* global navi
-------------------------------------------------- */

.gNavi {
	float: left;
	
}

.contactNav{
	float: right;
	padding-right: 170px;
}

.gNavi li {
	float: left;
	padding: 0 23px 0 10px;
	background-image: url(../img/common/bg_gnavi_fixed.png);
	background-position: 100% 50%;
	background-repeat: no-repeat !important;
	font-weight: bold;
	font-size: 13px;
}
.gNavi li:last-child{
	background-image:none;
}

.contactNav li{
	float: left;
	padding: 0 23px 0 10px;
	font-weight: bold;
	font-size: 13px;
}
.contactNav li.arrow{
	background: url(../img/common/mrk_fLink.png) left center no-repeat;
}
.contactNav li.tel {
	padding-left: 23px;
	background-image: url(../img/common/ico_tel_fixed.png);
	background-position: 10px 50%;
	background-repeat: no-repeat;
	background-size: 10px;
}
.gNavi li a {
	display: block;
}
.gNavi li a:hover {
	text-decoration: none;
}
/* fixed */
#change .gNavi li {
	background-image: url(../img/common/bg_gnavi_fixed.png);
}


#change .gNavi li.tel {
	background-image: url(../img/common/ico_tel_fixed.png);
	color: #080404;
}
#change .gNavi li a {
	color: #080404;
}

#home .gNavi .nav1 a,
#contact .gNavi .nav3 a,
.gNavi li a:hover {
	color: #60b0d5 !important;
}


@media screen and (max-width: 768px) {
	.contactNav{
		float: none;
		padding-right: 0;
		width: 85%;
	}
	.contactNav li{
		padding: 0 10px;
		
	}
	.gNavi {
		clear: both;
		float: none;
		margin-left: -5px;
		display: none;
	}
	.gNavi li,
	#change .gNavi li {
		padding: 10px 15px;
		font-size: 12px;
		background: none;
		display: block;
		float: none;
		border-top: 1px dotted #999;
	}
	.gNavi li.tel {
		padding-left: 18px;
		background-position: 5px 50%;
	}

}
@media screen and (max-width: 385px) {
	.gNavi li:nth-child(3) {
		background: none !important;
	}
}


/* menubtn
-------------------------------------------------- */
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger {
	position: relative;
	width: 30px;
	height: 24px;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #000;
	border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(2) {
	top: 10px;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
}



/* page title
-------------------------------------------------- */
html, body, #wrapper {
	height: 100%;
}
#mainimg {
	position: relative;
	height: 450px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-align: center;
}
#pagetit {
	color: #60b0d5;
	font-size: 2.14em;
	background-repeat: no-repeat;
	background-position: center top;
}
#mainimg p {
	margin-top: 15px;
	color: #fff;
	font-size: 1.4em;
	line-height: 1.5;
}
#mainimg .scroll {
	position: absolute;
	bottom: 45px;
	left: 0;
	width: 100%;
}

@media screen and (max-width: 768px) {
	#mainimg .scroll {
		bottom: 20px;
	}
	#mainimg .scroll img {
		width: 45px;
	}
}




/* contents
-------------------------------------------------- */
#contents {
}
@media screen and (max-width: 768px) {
}





/* footer
-------------------------------------------------- */

#btmBtn .btn {
	display: block;
	text-align: center;
	color: #fff;
	font-size: 20px;
}
#btmBtn .btn:hover {
	opacity: 0.8;
}
#btmBtn .btn span {
	display: inline-block;
	padding: 15px 0;
	background-position: 0 50%;
	background-repeat: no-repeat;
	padding-left: 35px;
}
#btmBtn .btn.contact {
	background-color: #e25e5e;
}
#btmBtn .btn.contact span {
	background-image: url(../img/common/ico_contact.png);
}
#btmBtn .btn.home {
	background-color: #60b0d5;
}
#btmBtn .btn.home span {
	background-image: url(../img/common/ico_home.png);
}
#contact #btmBtn .btn.contact,
#home #btmBtn .btn.home {
	display: none;
}

#fNavi {
	background-color: #36363a;
}
#fNavi ul {
	overflow: hidden;
	width: 984px;
	margin: 0 auto;
	padding: 70px 0 50px;
}
#fNavi li {
	float: left;
	margin: 0 3px;
	color: #fff;
	border: 1px solid #466778;
	text-align: center;
}
#fNavi li a{
	display: inline-block;
	height: 100%;
	color: #FFF;
	text-decoration: none;
}
#fNavi li a span{
	width: 90%;
	display: inline-block;
	background: url(../img/common/arrow_foot.png) right center no-repeat;
}
#fNavi li img {
	margin-bottom: 5px;
	border: 1px solid #36363a;
}
#flow #fNavi li:nth-child(1) img,
#after #fNavi li:nth-child(2) img,
#coating #fNavi li:nth-child(3) img,
#clean #fNavi li:nth-child(4) img {
	border: 1px solid #60b0d5;
}


#flow #fNavi li:nth-child(1) a,
#after #fNavi li:nth-child(2) a,
#coating #fNavi li:nth-child(3) a,
#clean #fNavi li:nth-child(4) a,
#fNavi li a:hover {
	background: #60b0d5;
	color: #FFF;
}

#clean #fNavi li
#footer {
	border-bottom: 3px solid #60b0d5;
	padding: 20px 0;
	text-align: center;
}

#footer {
	border-bottom: 3px solid #60b0d5;
	padding: 20px 0;
	text-align: center;
}
#footer .fLink {
	display: inline-block;
	margin-right: 50px;
}
#footer .fLink li {
	display: inline-block;
	margin-left: 30px;
	padding-left: 10px;
	background: url(../img/common/mrk_fLink.png) no-repeat 0 50%;
	font-size: 12px;
	line-height: 1;
}
#footer .copy {
	display: inline-block;
	margin-left: 50px;
	font-size: 12px;
}

#footer .pagetop {
}


@media screen and (max-width: 768px) {
	#btmBtn .btn span {
		padding-left: 20px;
		font-size: 15px;
	}
	#btmBtn .btn.contact span {
		background-size: 12px;
	}
	#btmBtn .btn.home span {
		background-size: 13px;
	}

	
	#fNavi ul {
		width: auto;
		padding: 40px 2px 20px;
	}
	#fNavi li {
		width: 23%;
		margin-bottom: 10px;
	}
	#fNavi li img {
		width: 100%;
	}


	#footer {
		padding: 15px 0 0;
	}
	#footer .fLink {
		display: block;
		margin: 0 0 15px;
	}
	#footer .fLink li {
		margin: 0 10px;
		padding-left: 5px;
		background-size: 3px;
		font-size: 11px;
	}
	#footer .copy {
		display: block;
		margin: 0 0 15px;
		font-size: 11px;
	}
}

@media screen and (max-width: 480px) {
	#fNavi li {
		width: 48%;
	}
}





/* pagetop */
#footer .pagetop {
	position: absolute;
	top: -47px;
	right: -54px;
}
@media screen and (max-width: 768px) {
	#footer .pagetop {
		top: -30px;
		right: 0px;
	}
	#footer .pagetop img {
		width: 27px;
	}
}