@charset "utf-8";
body{font-family:"メイリオ", Meiryo,"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; font-size:13px; color:#333; line-height:1.3em; text-align:center; margin:0; padding:0;}
/*============================================
①ヘッダ
============================================*/
#header{width:1000px; margin:0 auto 30px;; padding:30px 0; text-align:left;}
/*============================================
②gu看板
============================================*/
div#logo{
width:1000px;
height:118px; /*背景画像のサイズに合わせてボックスの高さを指定*/
text-align:left;
}
/*============================================
③タイトル
============================================*/
div#title {
height:136px; /*背景画像のサイズに合わせてボックスの高さを指定*/
text-align:center;}
/*============================================
④メインメニュー
============================================*/
/* -------------------- */
/* ▼メニューバーの装飾 */
div#ddmenu {
  padding: 0px;
  float: left;
  width: 1000px;
  background-color: #cc0000;
}
.ddmenu li {
  width: 191px;
  float: left;
  list-style-type: none;
  position: relative;
  background-color: #cc0000;
  line-height: 40px;
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size:15px;
}
.ddmenu a {
  background-color: #cc0000;
  color: white;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  display: block;
}
.ddmenu *:hover {
  background-color: #ffdddd;
  color: #dd0000;
}
.ddmenu a:hover {
  background-color: #ffdddd;
  color: #dd0000;
}
.ddmenu li:hover ul {
  display: block;
}
.ddmenu ul {
  margin: 0px;
  padding: 0px;
  display: none;
  position: absolute;
  z-index: 1;
}
.ddmenu ul li {
  border-top: 1px solid pink;
  width: 190px;
}
.ddmenu ul li a {
  line-height: 35px;
  text-align: left;
  font-weight: normal;
  padding-left:10px;
  font-size:12px;
}
.ddmenu ul li a:hover {
  background-color: #ffff80;
  color: #005500;
}

/*============================================
⑤メイン+サイド
============================================*/
#contents{width:1000px; margin:10px auto 10px; overflow:hidden;}
/*============================================
⑥メイン
============================================*/
#main{width:720px; float:left;margin-top:10px;margin-botom:10px;}

/*============================================
⑦見出し
============================================*/
#car_main{
width: 700px;
float: left;
}
/*============================================
⑧メーカー名
============================================*/
#maker{float: left;
width: 700px;
}
h1 {color:black; position: relative;
display: inline-block;
padding: 0 55px;
}
h1:before, h1:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}
h1:before {left:0;}
h1:after {right: 0;}
/*============================================
⑨50音index
============================================*/
.mokujibox{margin: 5px 5px 5px 5px;
float: left;
width: 700px;}
.square_btn{
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
color: black;
background: #ECECEC;
transition: .4s;
margin-bottom: 5px;
}
.square_btn:hover {
background: #EC407A;
color: white;
}
.mokujibox a {text-decoration:none;} /*リンクの下線を無くす*/
/*============================================
⑩車種一覧用ボックス
============================================*/
#parent {
width: 700px;
text-align: center;
padding:30px 0px 0px 15px; /*見出し内容の位置調整*/
float: left;}
/*============================================
⑪あいうえお見出し
============================================*/
#parent .child_top {
width: 700px;
height: 25px;
text-align:left;
margin-top: 8px;
margin-bottom: 20px;
float: left;
display: inline; /*for ie*/
font-size: 16px;
z-index: -1;}
}
hr {
border-top: 1px solid #bbb;
border-bottom: 1px solid #fff;
}
/*============================================
⑫車種フロア
============================================*/

.container:after { width: 700px;
clear: both;
content: '';
display: block;
text-align: center;
}
.item {
float: left;
width: 220px;
height: 150px;
margin-bottom: 1em;
margin-top: 20px;
padding-top: 20px;
}
/*============================================
⑫-1　車種1枠分
============================================*/

.car {
background-color: transparent;
pading-top: 20px;
padding-leftt:5px;
}


/*============================================
⑬車画像
============================================*/
#img {
width: 200px;
background-color: #fff;
text-align: right;
	position:absolute;
	bottom: 0;
text-align: right;}
/*============================================
⑭年式ボタン
============================================*/
  <style>.year{
*zoom: 1;
list-style-type: none;
width: 210px;
margin: 5px 0px 5px 0px;
text-align: left;
float: left;
z-index: 9999;}
.year:before, .year:after{
content: "";
}
.year:after{
clear: both;
}
.year li{
position: relative;
width: 100%;
float: left;
margin: 0;
list-style-type: none;
text-align: left;
float: left;
}
.year li a{
display: block;
margin: 0;
padding: 10px 15px 8px;
background: #191970;
color: #fff;
font-size: 16px;
font-weight:bold;
line-height: 1;
text-decoration: none;
}
.year li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
.year li ul li{
width: 100%;
z-index: 9999;
}
.year li ul li a{
padding: 10px 10px;
border-top: 1px solid #7c8c0e;
background: #fff;
color:black;
text-align: left;
font-size: 11px;
font-weight:normal;
text-align: left;
}
.year li:hover > a{
background: #4169e1;
}
.year li a:hover{
background:#4169e1;
}
#year li ul li{
  overflow: hidden;
  height: 0;
  transition: .2s;
}
#year li:hover ul li{
  overflow: visible;
  height: 30px;
}
#year li ul li a:hover{
background: #afeeee;}
/*============================================
⑮indexへ戻る
============================================*/
#parent .child_back {width: 700px;
height: 50px;
text-align:right;
margin-top: 50px;
float: left;
display: inline; /*for ie*/
font-size: 12px;
}
.square_btn1{
position: relative;
display: inline-block;
padding: 0.25em 0;
text-decoration: none;
color: black; }
.square_btn1:before{
position: absolute;
content: '';
width: 100%;
height: 4px;
top:100%;
left: 0;
border-radius: 3px;
background:#67c5ff;
transition: .2s;
}
.square_btn1 hover:before {
top: -webkit-calc(100% - 3px);
top: calc(100% - 3px);
}

/*============================================
⑯サイド(右)
============================================*/
#sideWrap{width:250px; float:right;
}
#side{background: white ;
       width: 250px;list-style-type: none;
}
#side ul{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
}
#side li{ 
display: inline; 
padding: 0; 
margin: 0; 
}
#side li a{
display: block; 
border-left: 5px solid #474655;
border-top: 1px solid #474655;
border-right: 1px solid #474655;
border-bottom: 1px solid #474655;
background-color: #fff;
padding: 1px 10px;
text-decoration: none;
color: #333;
width: 150px; 
margin: 1px 0px;
text-align: left;
font-size: 11px;
}
#side li a:hover{
border-left: 5px solid #474655;
border-top: 1px solid #474655;
border-right: 1px solid #474655;
border-bottom: 1px solid #474655;
background-color: #d7efd7;
}
/*============================================
⑰フッター
============================================*/
#footer{background:#444;
margin-top: 30px;
padding:20px 0; 
height:20px;
z-index: 0;}

#page-top {

/*位置指定*/
position: fixed;
bottom: 30px;
right: 30px;
z-index:100;
}

#page-top a{

/*背景色*/
background-color:#ddd;
/*文字色*/
color:black;
/*文字周り余白*/
padding:20px;
/*ボタンの丸み*/
border-radius: 5px;
}