@charset "utf-8";

ul li{ display:inline-block;}
.center{ text-align:center;}

/* header */

.headline{ background:#f5f5f5; height:19px; font-size:11px; line-height:19px; padding:0 5px;}
.headline>div{ width:100%; max-width:1000px; margin:0 auto;}
.headline nav{ position:absolute; right:0; top:0;}
.headline nav ul li a{ background:url(../img/headline-icon-company.png) left center no-repeat; padding-left:16px;}
.headline nav ul li:nth-child(2) a{ background-image:url(../img/headline-icon-contacts.png);}
.headline nav ul li:nth-child(3) a{ background-image:url(../img/headline-icon-sitemap.png);}
.headline nav ul li+li{ margin-left:25px;}
.headline h1{ font-size:11px; line-height:19px; font-weight:normal;}

header{ width:100%; max-width:1000px; margin:0 auto; padding-top:16px; height:100px;}
header>div{ float:right;}
header>div div{ display:inline-block; width:60px; font-size:11px; line-height:13px; text-align:center; vertical-align:top;}
header>div div span{ display:inline-block; margin-top:4px; color:#ff2e39;}
header>div div span b{ font-size:12px;}
header>div div.est-icon{ height:52px;}
header>div div.est-icon img{ position:absolute; bottom:0; left:0;}
.fluffy { animation: fluffy1 4s ease infinite;}
@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  15% { transform:translateY(0) }
  19% { transform:translateY(-8px) }
  23% { transform:translateY(0) }
  25% { transform:translateY(0) }
  29% { transform:translateY(-8px) }
  33% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
header .tel{ width:278px; height:66px;}
header .tel a{ position:absolute; right:0; bottom:0; line-height:1px; z-index:10}
header .tel a+a{ z-index:15}

nav#gnavi{ background:#cf1313;}
nav#gnavi ul{ width:1000px; margin:0 auto;}
nav#gnavi ul li{ border-left:1px solid #e74747; border-right:1px solid #b91b1b;}
nav#gnavi ul li a{ color:#fff; display:block; line-height:32px; font-size:14px; padding:0 20px;}
nav#gnavi ul li a span+span{ display:block; position:absolute; left:0; top:0; text-align:center; width:100%; z-index:100; background:#fb4700; transition: .5s; opacity:0; font-family: 'Open Sans', sans-serif;}
nav#gnavi ul li a span+span:hover{ opacity:100;}

div.con{ width:100%; max-width:1000px; margin:0 auto;}
div.con>section{ margin-bottom:70px;}

#breadcrumb{ font-size: 12px; color: #ccc !important; margin: 10px 10px -20px; position: relative; z-index: 5}

.mainimg{ width: 50%; height: auto;}

.partslist{ display: inline-block; vertical-align: top;}
.partslist.first{ width: 200px;}
.partslist.second{ width: 720px;}
.partslist-li{ display: inline-block; width: 240px; line-height: 2em; padding-left: 5px;}
.partslist-li.s{ width: 200px;}
.partslist-li.last{ margin-bottom: 40px;}
.partslist-img-car,.partslist-img-part{ position: absolute; z-index: 10000;}
.partslist-img-car{ left: -120px; bottom: 20px;}
.partslist-img-part{ top: -60px; right: -60px;}

.brandlist{ display: inline-block; vertical-align: top; width: 220px;}
.brandlist-li{ display: block; line-height: 2em; padding-left: 5px;}
.top-brandlist-img-01,.top-brandlist-img-02{ position: absolute; z-index: 10000;}
.top-brandlist-img-01{ left: -25px; top: -64px;}
.top-brandlist-img-02{ bottom: -30px; right: -40px;}

.achive-box{ width: calc(50% - 40px); margin: 0 20px 30px; display: inline-block; vertical-align: top;}
.achive-img{ width: 100%; height: auto; margin-bottom: 5px;}
.achive-txt{ line-height: 1.6em;}

.contacts-panel{ border-top:1px solid #ffc4c4; text-align:center;}
.contacts-panel>*{ display:inline-block; vertical-align:text-bottom; margin:0 20px;}
.contacts-panel>span{ display:block; width:280px; margin:-14px auto 15px; padding-top:2px; background:#f33d3d; color:#fff; font-weight:bold; line-height:26px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.content-footer+.contacts-panel{ margin-top:40px;}

/* footer */

#footer { width:100%; max-width:1000px; padding:10px 0; margin:30px auto 0; text-align:center; font-size:10px; line-height:22px; border-top:1px dotted #CC0000; color:#4c1818;}
#footer a{}
#footer a,#footer a:visited,#footer a:active { color:#4c1818; text-decoration:none;}
#footer a:hover { color:#4c0000; text-decoration:none;}
#footer img	{ margin:0 5px 5px 0;}

/* bottom page */

.content-title{ text-align:center; padding:50px 10px 30px; font-weight:bold; border-bottom:1px solid #ffc4c4;}
.content-title span{ color:#fa292d; font-size:14px;}
.content-title h2{ font-size:30px; padding-top:12px; font-style:italic;}

.content-text{ padding:30px;}
.content-text p{ line-height:29px;}
.content-text p+p{ margin-top:30px;}

div.content-footer{ max-width:1000px; padding:0; text-align:center;}
.content-footer>div{ display:inline-block; background:#f5f5f5; width:420px; margin:0 20px; padding:10px; text-align:right; border-radius: 5px;}
.content-footer>div b{ display:block !important; position:absolute; left:-20px; top:27px; width:180px; height:30px; line-height:32px; background:#fa292d; text-align:center; color:#fff; overflow:hidden; border-radius: 5px;}

.sp{ display:none !important;}

.btn-square {
display: block;
padding: 1em;
text-decoration: none;
color: #FFF;
background: #ef1e1e;
border-bottom: solid 4px #be1414;
border-radius: 3px;
font-weight: bold;
text-align: center;
width: 260px;
margin: 0 auto;
}
.btn-square:active {
transform: translateY(4px);
border-bottom: none;
}

#gotop{ margin: 0 15px 40px 0; text-align: right; line-height: 1.8em;}
#gotop a{ display: block;}

@media only screen and (max-width: 768px) {

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

.headline nav{ display:none;}

.headline{ height:auto; padding:4px 5px 2px;}
.headline h1{ font-size:10px; line-height:13px; color:#999;}

header{ padding:10px 4px 0; height:65px;}
header>div{ float:right;}
header>div div{ display:inline-block; width:42px;}
header>div div+div{ margin-left:6px;}
header>div div.est-icon{ height:42px; padding-top:1px;}
header>div div.est-icon img{ position:relative;}
header>div div.est-icon img+img{ margin-top:-5px;}
header>a img{ height:45px; width:auto;}

nav#gnavi{ overflow:auto;}

div.con{ width:100%; max-width:1000px; margin:0 auto;}
div.con>section{ margin-bottom:70px;}

.content-text.noverflow{ overflow: hidden;}
.partslist.first,.partslist.second{ width: 100%;}
.partslist-img-car{ left: auto; bottom: auto; top: 30px; right: -10px; width: 55% !important;}
.partslist-img-part{ top: 240px; right: 5px; width: 45% !important;}

.brandlist{ width: 50%; margin-bottom: 30px;}
.top-brandlist-img-01{ display: none;}
.top-brandlist-img-02{ width: 50% !important; bottom: 8px; right: 10px;}

.achive-box{ width: calc(50% - 20px); margin: 0 10px 30px;}
.achive-img{ margin-bottom: 8px;}

.contacts-panel>*{ display:inline-block; vertical-align:text-bottom; margin:22px auto 0;}
.contacts-panel>span{ margin:-14px auto 0;}
.contacts-panel>span+a{ display:none;}

/* footer */

#footer a{ display:inline-block; width:50%; text-align:left; padding:3px 15px; font-size:12px;}
#footer small{ display:block; margin:10px auto 5px; font-size:12px; background:#cf1313; color:#fff;}

/* bottom */

.content>img,.content-text img{ width:100%; height:auto;}

.content-text{ padding:30px 20px;}

div.content-footer{ max-width:1000px; padding:0; text-align:center;}
.content-footer>div{ display:block; width:94%; margin:0 auto; padding:30px 10px 10px; text-align:center;}
.content-footer>div+div{ margin-top:30px;}
.content-footer>div b{ left:calc(50% - 90px); top:-15px; width:180px; height:30px; line-height:32px; background:#fa292d; text-align:center; color:#fff; overflow:hidden;  border-radius: 5px;}

}