body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img { 
	margin:0;
	padding:0;
}
img{border-style:none}
html,body {
	margin:0;
	padding:0;
	height:100%;
}

body {
	width: 100%;
	background-color: #C9AF87;
	background-image: url(../img/bg.jpg);
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#top_bg{
	background-color: #FFF;
	background-image: none;
}

ol,ul {list-style:none;}


h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}


a{text-decoration: none;}
.clr{clear: both;}

#container{
	width: 100%;
	position:relative;
    min-height: 100%;
}

#box{
	max-width: 960px;
	margin-right: auto;
	margin-left: auto;
}




/*//////////// nav /////////////////*/
#top-head {
	top: 0;
	position: fixed;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 1;
	z-index: 999;
	background-image: url(../img/header_bg.png);
	height: 100px;
}
#top-head a,#top-head {color: #616061;text-decoration: none;}

#mobile-head {
	max-width: 960px;
	margin-right: auto;
	margin-left: auto;
}

.logo{width: 130px;margin-top: 0px;margin-left: 50px;}

#top-head .logo {
	float: left;
	font-size: 36px;
	z-index: 8888;
}

#global-nav{
    margin-top: 20px;
    z-index: 9999;
	max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

#global-nav ul {
	list-style: none;
	font-size: 12px;
	padding-left: 100px;
	line-height: 24px;
}
#global-nav ul li {float: left;}

#global-nav h3{
	font-size: 16px;
	margin: 0px;
	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	letter-spacing: 0.1em;
	font-weight: bold;
	position: relative;
}

#global-nav p{
	font-size: 10px;
	color: #65000F;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
	font-weight: bold;
	text-align: center;
}
#global-nav a{
	color: #000;
	display: block;
	text-transform: uppercase;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 30px;
}
#global-nav a:hover {
	color: #666;
}

#nav-toggle {
	display: none;
	position: absolute;
	right: 12px;
	top: 14px;
	width: 34px;
	height: 36px;
	cursor: pointer;
	z-index: 101;
}
#nav-toggle div {position: relative;}
#nav-toggle span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #000;
	left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {top: 10px;}
#nav-toggle span:nth-child(2) {top: 21px;}
#nav-toggle span:nth-child(3) {top: 32px;}

@media screen and (max-width: 640px) {
#top-head {top: 0;position: fixed;margin-top: 0;}
#mobile-head {
	width: 100%;
	height: 56px;
	z-index: 999;
	position: relative;
}
#top-head .logo {position: absolute;left: 0px;top: 0px;}
.logo{margin-top: 5px;}

#global-nav {
	position: absolute;
	/* 開いてないときは画面外に配置 */
	top: -650px;
	background-color: #BEB177;
	width: 100%;
	text-align: center;
	padding: 10px 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
#global-nav ul {
	list-style: none;
	position: static;
	right: 0;
	bottom: 0;
	font-size: 18px;
	line-height: 20px;
	padding-left: 0px;
}
#global-nav ul li {float: none;position: static;}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {width: 100%;display: block;color: #fff;padding: 0px 0;}
#nav-toggle {display: block;}
.open #nav-toggle span:nth-child(1) {top: 21px;-webkit-transform: rotate(315deg);-moz-transform: rotate(315deg);transform: rotate(315deg);}
.open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {top: 21px;-webkit-transform: rotate(-315deg);-moz-transform: rotate(-315deg);transform: rotate(-315deg);}
.open #global-nav {-moz-transform: translateY(700px);-webkit-transform: translateY(700px);transform: translateY(700px);}
} 

/*//////////// ここまでnav /////////////////*/



.content{
	padding-bottom: 30px;
	min-height: 100%;
	width: 750px;
	margin-bottom: 150px;
	margin-top: 150px;
	float: right;
}
.content h2{
	font-size: 70px;
	margin-top: 52px;
	color: #fff;
	color: rgba(255,255,255,0.9);
	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
	margin-left: 30px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}
.content p{
	font-size: 14px;
	padding: 10px;
	line-height: 24px;
	display: inline-block;
	padding: 0px;
	margin: 0px;
}



#pager {
	text-align: right;
	position: absolute;
	bottom: 5px;
	z-index: 1000;
	right: 5px;
	padding: 0px;
}
#pager a {
	background-color: #000;
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 10px;
	box-shadow: 0 1px 1px #cef;
	margin-right: 5px;
}
#pager a.selected {
	background-color: #FAFAFA;
}
#pager a span {
	display: none;
}
			
#thumbs {
	display: none;
	border: 1px solid rgba(0, 0, 0, 0.8);
	background-color: rgba(0, 0, 0, 0.5);
	width: 150px;
	height: 76px;
	padding: 0px;
	position: absolute;
	z-index: 10;
	top: 385px;
	right: 10px;
}

#thumbs img {
	1display: block;
	1float: left;
}

#works {
	padding: 15px 0px;
}
#works li{
	display: inline;
}
#works li a{
	padding-right: 10px;
}
#works img {
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	padding: 12px; 
	background: rgba(255,255,255,0.9);
}

.top_title{
	float: left;
	color:#65000F;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
	width: 100%;
	height: 20px;
	margin-right: 0%;
}

.top_title span{
	color:#000;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin-left: 10px;
}

.top_card{
	float: left;
	color:#F30306;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
	width: 100%;
}


#under_box{
	float: left;
	width: max-960px;
	margin-bottom: 150px;
}

#banner{
	float: left;
	width: 460px;
	margin-bottom: 20px;
}

#banner img{
	float: left;
	box-shadow: 0 5px 10px #000;
	margin-bottom: 22px;
}

#banner2{
    float: left;
    width: 100%;
    margin-bottom: 30px;
    padding-left: 0px;
    margin-left: 35px;
}

#banner2 img{
    float: left;
    margin-right: 5px;
    margin-left: 5px;
}


.topinfo_big {
	float: right;
	height: auto;
	width: 640px;
	margin-bottom: 30px;
	margin-top: 30px;
}

.topinfo_big img{
	float: left;
	width: 100%;
}
.topinfo_mini {
	float: right;
	height: auto;
	width: 320px;
	margin-bottom: 30px;
	margin-top: 30px;
}
.topinfo_mini img {
	float: left;
	width: 90%;
}

#feed1{
    background-image: url(../img/bg.jpg);
    width: 440px;
    box-shadow: 0 5px 10px #000;
    height: 192px;
    float: right;
    padding: 15px;
}

#feed1 a{
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
}

.feed_item{}
.feed_item_title{
	
}
.feed_item_title a{margin-bottom: 20px;}
.feed_item_date{
	font-size: 20px;
}

#topnews {
	margin-top: 40px;
}

#topnews a{
	letter-spacing: 0.1em;
}

#topnews h3{
    font-size: 10px;
    margin-bottom: 5px;
    font-weight: bolder;
    background-color: #900;
    width: 80px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    text-align: center;
    float: left;
}

#topnews p{
    font-size: 14px;
    height: 50px;
    font-weight: bolder;
    text-decoration: underline;
    margin-left: 10px;
    width: 330px;
    float: left;
}

#footer{
	background-image: url(../img/footer_bg.png);
	height: 145px;
	width: 100%;
	padding-top: 5px;
	bottom: 0px;
	position:absolute;
}
#footer_in{
	margin-top: 15px;
	margin-left: auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width: 960px;
	margin-right: auto;
}

#footer_text{
	width: 400px;
	float: left;
}

#footer_text h3{
	font-size: 18px;
	color:#65000F;
	font-weight: bold;
	padding-bottom: 5px;
}

#footer_text p{
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
}

#footer_img{
    float: right;
    margin-right: 0px;
    width: 450px;
    margin-top: 10px;
    text-align: right;
}

#footer_img img{
    margin-right: 10px;
    margin-left: 10px;
}


/* ========　会社概要　======== */
dl.coinfo {
	margin-top: 40px;
	font-size: 15px;
	line-height: 1.5em;
	letter-spacing: 0.1em;
	float: left;
	width: 720px;
	margin-left: 30px;
}

dl.coinfo dt {
	width: 110px;
	float: left;
	margin-bottom: 20px;
}
dl.coinfo dd {
	float: left;
	width: 610px;
	margin-bottom: 20px;
}

#about_contents{
	color: #FFF;
	font-size: 16px;
	width: 550px;
	margin-right: 170px;
	line-height: 25px;
	margin-top: 60px;
	float: left;
	margin-left: 30px;
	margin-bottom: 30px;
	text-shadow: 2px 2px 2px #000;
}



/* ========　料金表　======== */

table.example {
	width: 700px; /* 表の幅 */
	border-collapse: collapse;
	text-align: center;
	color: ;
	color: #FFF;
	text-shadow: 1px 1px 2px #000;
	margin-bottom: 50px;
	margin-top: 30px;
}

/* --- 表タイトル --- */
table.example caption {
	text-align: left;
	font-size: 20px;
	font-weight: bold;
}

/* --- セル --- */
table.example th,
table.example td {
	padding: 10px;
}

/* --- 見出しセル --- */
table.example thead th {
border-bottom: 2px #65000F solid; /* 見出しセルの下境界線 */
}

/* --- データセル --- */
table.example tbody td {
border-bottom: 1px #65000F dotted; /* データセルの下境界線 */
}


/* ========　お問い合わせ　======== */
.contact_in{
	width: auto;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #FFF;
	padding-left: 30px;
	letter-spacing: 0.1em;
}

.contact_in p{
	font-size: 15px;
	color: #65000F;
	font-weight: bold;
	padding-bottom: 5px;
	padding-top: 40px;
}

.contact_in h3,.contact_in h3 a{
	font-size: 30px;
	font-weight: bold;
	padding-bottom: 30px;
	padding-top: 30px;
	color: #FFF;
	text-shadow: 2px 2px 2px #000;
}
.contact_in h4{
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 10px;
	margin-top: -10px;
}

.contact_in span{
	font-size: 20px;
	padding-right: 15px;
	padding-left: 15px;
}


#map{
	margin: 30px;
}

#link img{
	margin: 30px;
}



/* ========　中古車情報　======== */

.carboxtop{
	height: 40px;
	position: relative;
	line-height: 1em;
	float: left;
	margin-bottom: 30px;
	background-color: #65000F;
	color: #FFF;
	}
	
.carbox{
	background-color: rgba(255,255,255,0.2);
	height: 100px;
	position: relative;
	line-height: 1em;
	float: left;
	margin-bottom: 30px;
	padding-bottom: 50px;
	padding-top: 10px;
}
	
.carbox h3{
	font-size: 20px;
	font-weight: bold;
	height: 24px;
	color: #FFF;
	text-shadow: 2px 2px 2px #000;
	position: relative;
	line-height: 150%;
}


.demo img{
	border: 2px solid #FFF;
	margin-right: 5px;
	float: left;
	width: 130px;
}

.carphoto,.price,.model,.year,.km,.shaken,.mission,.etc{
	display:table;
	width:auto;
	height:100px;
	float: left;
}

.carphoto p,.price p,.model p,.year p,.km p,.shaken p,.mission p,.etc p{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	line-height:1.5em;
	border-right: 1px dotted #FFF;
	padding-right: 3px;
	padding-left: 3px;
	font-weight: bold;
	font-size: 12px;
}

.carphoto{width: 140px;}
.price{width: 100px;}

.model{width: 70px;}
.year{width: 70px;}
.km{width: 70px;}
.shaken{width: 60px;}
.mission{width: 70px;}
.etc{width: 160px;}


#new{
	position: absolute;
	top: -10px;
	left: 50%;
	margin-left: -60px;
}

#new img{
	height: 30px;
	width: 30px;
}

#dummy {
	clear: both;
}

.sp {display: none !important;}
.pc {display: block !important;}


/**/
@media screen and (max-width: 640px) {
.sp {display: block !important;}
.pc {display: none !important;}

.logo{margin-left: 10px;}
	
#banner{width: 100%;}
#banner img{width: 100%;}

#feed1{
	width: 90%;
	height: 192px;
	float: left;
	padding: 5%;
	margin-bottom: 30px;
}
	
.topinfo_top {width: 90%; margin-right: 5%; margin-left: 5%;}
.topinfo_big {width: 90%; margin-right: 5%; margin-left: 5%;}
.topinfo_mini {width: 90%; margin-right: 5%; margin-left: 5%;}


#banner2{width: 100%;margin-left: 0px;}
#banner2 img{width: 25%;margin-right: 0px;margin-left: 0px;}

#under_box{margin-bottom: 300px;}
#footer_in{width: 100%;}
#footer_text{width: 97%;margin-left: 3%;}
#footer_text h3{font-size: 20px;padding-bottom: 0px;}
#footer_text p{font-size: 14px;line-height: 18px;}
#footer_img{
	margin-top: -140px;
	margin-right:5%;
	margin-left:5%;
	width: 90%;
	text-align: center;
}
#footer_img img{}

.content{width: 90%;margin-bottom: 300px;}

.carboxtop{width: 100%;height: 160px;}
.carbox{height: 370px;}
.carbox h3{width: 100%;margin-bottom: 30px;margin-left: 10px;}

.demo img{width: 60%;margin-right: 20%;margin-left: 20%;}
.carphoto,.price,.model,.year,.km,.shaken,.mission,.etc{height:50px;}
.carphoto p,.price p,.model p,.year p,.km p,.shaken p,.mission p,.etc p{
	border-right: 1px dotted #FFF;
	border-bottom: 1px dotted #FFF;}
	
.carphoto {width: 100%;}
.demo {width: 100%;}
.price{width: 22%;}
.model{width: 25%;}
.year{width: 50%;}
.km{width: 33.3%;}
.shaken{width: 33.3%;}
.mission{width: 33.3%;}
.etc{width: 100%;}

dl.coinfo {font-size: 18px;width: 95%;margin-left: 5%;}
dl.coinfo dt {width: 100%;}
dl.coinfo dd {width: 100%;margin-bottom: 20px;}
#about_contents{width: 90%;margin-left: 5%;margin-right: 5%;}

/* ========　料金表　======== */

table.example {width: 100%;}

.contact_in{padding-left: 0px;}
.contact_in h3,.contact_in h3 a{font-size: 20px;}
.contact_in span{font-size: 14px;}
#map{margin: 0px;}

}
