Ruby勉強会（Ryukyu Ruby's　Rookies）と徒然なる歴史評論

さてと解体屋のおじさんです、こんにちは。
んで、今日のテーマですが、wordpressのスマホ対応の話を書きたいと思いますが・・・

簡単ともいえるし、こだわって何処までも難しくできるし、どっちが良いです？（汗）

一応簡単な方から述べると、wordpressのプラグインのwptouchをインストールと有効化。
以上で終了になります。簡単でしょ？（笑）

まあ、その動画作りましょうか。ちょいと待ってくださいよ。




そしてスマホでアクセスした場合の画像になります。
以下をご覧くださいませ。






こんな感じになりますが、問題点が一つ。
スマホとPCでのデザインが、変わりすぎ。

スマホで見てPCで確認しようと思った場合、極端なデザイン変化にお客さんが追い付いていけない可能性があります。

でも、気にしない人は気にしないので、このままで良いかもしれません。
実際、デザイン変化しても気にしないで放っておいているサイトは多数存在します。

ですが、俺は気にする。めっちゃ気にする。これで金を稼いでいないといっても、意地でも同一デザインにしたい（－－（待て）

というわけですので、前回のブログと同じように、wordpressのテーマをレスポンシブ対応することにいたしましたが・・・
ここからなんですが、はっきり書いていいですか？

cssが3000行突破しておりますが、全部書きますので、覚悟して読んでもらっていいですか？ほぼ全部英語表記なんですが、よろしいですか？（－－（待て）

wordpressのテーマを作成するとなった場合、普通なら三つに分かれているcssファイルを一つに統合する段取りになります。更にcssは後から読み込むのが有効とされますので、

まずはスマホ版のcssを書いたうえで、その中に上に一回PC版のcssを書いたうえで、さらに次はスマホ版のcssを書く、それをスマホ、タブレット、PCと三回繰り返す。

なので・・・膨大なCSSになります。俺、これを全部一人で書いたんだぞ。

前振りは止めて・・・では、css3000行をお読みください。
ちなみに条件を整えたら、コピペも出来ますので、試してみるのも悪くはないと思います。

ただし、それなりに勉強してから行ってください。では、いきます。



/*
Theme Name: Child
Template: twentytwelve
*/

@charset "utf-8";

/* for SmartPhone */
@media only screen and (max-width: 480px) {



body {
color: #666666;/*全体の文字色*/
margin: 0px;
padding: 0px;
font: 14px/2 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";/*背景色、背景画像の読み込み*/
background-color: #00471C;
background-image: url(/images/bg.png);
}
h1,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure{
margin: 0px;
padding: 0px;
}
h2{
margin-top: 5px;
padding-top: 5px;
margin-bottom: 0px;
padding-bottom: 0px;
}
hr{
margin: 0px;
padding: 0px;
}


body > h1 {
font-size: 10px;/*文字サイズ*/
color: #FFF;/*文字色*/
background: #000;/*背景色*/
text-align: right;/*右寄せ*/
}
body > h1 a, body > h1 a:hover {
color: #FFF;
text-decoration: none;
}

body > h1 {
text-align: center;
}

a {
color: #666;/*リンクテキストの色*/
}
a:hover {
color: #000;/*マウスオン時の文字色（全体）*/
text-decoration: none;/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}



header {
height: 80px;
}

header h2 {
padding-top: 10px;
position: static;
text-align: center;
}
header h2 img {
width: 80%;
height: auto;
}


header #banner1 {
position: static;
height: auto;
text-align: center;
}
.l_box{
margin: 0;
padding: 0;
width: 100%;
list-style: none outside;
}

nav#menu ul {
margin: 0px;
padding: 0px;
}
nav#menu li {
float: left;
list-style: none;
width: 50%;
height: 100%;
}



nav#menu ul li a {
color: #E1D38B;/*文字色*/
text-decoration: none;
display: block;
text-align: center;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*同上*/
background-color: #313131;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#313131));/*グラデーション*/
background-image: -webkit-linear-gradient(#494949, #313131);/*同上*/
background-image: linear-gradient(#494949, #313131);/*同上*/
border-top: 1px solid #666;/*上の線の幅、線種、色*/
border-right: 1px solid #666;/*右の線の幅、線種、色*/
border-left: 1px solid #666;/*左の線の幅、線種、色*/

font-weight: bold;/*文字を太字にする設定*/


}
/*マウスオン時の設定*/
nav#menu ul li a:hover {
color: #000;/*文字色*/
background: #FFFFFF;/*背景色*/
}
/*最初のメニューの設定*/
nav#menu ul > li:first-child {
margin-left: -20px;
}

nav#menu ul li a span {
display: none;
}
nav#menu ul > li:last-child {
margin-bottom: 10px;
}

/*メニュー１個ごとの設定*/

nav#menu ul li {
margin-bottom: 2px;
width: 49.3%;
border: 1px solid #000000 ;
margin-left: -2px;

}


nav#menu ul li a {
height: auto;
width: auto;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
/*最初のメニューの設定*/
nav#menu ul > li:first-child {
margin-left: -2px;
}

/*current（現在表示中のページのメニュー）*/
nav#menu ul li#current a {
color: #000;/*文字色*/
width: 158px;
background-color: #FFFFFF;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#FFFFFF));/*グラデーション*/
background-image: -webkit-linear-gradient(#e6e6e6, #FFFFFF);/*同上*/
background-image: linear-gradient(#e6e6e6, #FFFFFF);/*同上*/
border-top: 1px solid #FFF;/*上の線の幅、線種、色*/
border-right: 1px solid #FFF;/*右の線の幅、線種、色*/
border-left: 1px solid #FFF;/*左の線の幅、線種、色*/
}
nav#menu ul li#current a {
width: auto;
border-top: none;
border-right: none;
border-left: none;
}



.clearLeft {
clear: left;
}
#container {
width: auto;
margin-right: 6px;
margin-left: 6px;
}

.clear {
clear: both;　/*floatの解除、ここがポイント*/
height: 0;
visibility: hidden;
white-space: nowrap;

}

.box{
padding: 0px;
overflow: hidden;
zoom:1;

}


#main {
float: none;/*中央に回り込み*/
width: auto;/*メインコンテンツ幅*/
background-color: #ffffff;
padding: 5px;
}
#main section > h2,
#main article > h2 {
background-color: #313131;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#313131));/*グラデーション*/
background-image: -webkit-linear-gradient(#494949, #313131);/*同上*/
background-image: linear-gradient(#494949, #313131);/*同上*/
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
font-size: 100%;
color: #E1D38B;/*文字色*/
padding: 3px 10px 3px 15px;/*左から、上、右、下、左側への余白*/
clear: both;
border-bottom: 4px solid #005923;/*下部の線の幅、線種、色*/
}
#main h2 img {
vertical-align: middle;
}


#sub {
float: none;/*中央に回り込み*/
width: auto;/*サブコンテンツ幅*/
background-color: #ffffff;
padding: 5px;
}
#main h2 {
margin-top: 5px;
padding-top: 5px;
}


/*subコンテンツ内のh1タグ設定*/
#sub h1 {
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 6px 6px 0 0;/*角丸のサイズ。それぞれ左上、右上、右下、左下への設定*/
font-size: 100%;
text-align: center;/*文字をセンタリング*/
padding: 5px 0px;/*左から、上下、左右への余白*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
}
#sub h3 {
display: block;
float: none;
width: 100%;
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 6px 6px 0 0;/*角丸のサイズ。それぞれ左上、右上、右下、左下への設定*/
font-size: 100%;
text-align: center;/*文字をセンタリング*/
padding: 5px 0px;/*左から、上下、左右への余白*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
margin: 0px;
}


/*サブコンテンツ用　車ボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
#sub article.box1 {
font-size: 11px;/*文字サイズ*/
width: 238px;/*ボックスの幅*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e3e3e3));/*グラデーション*/
background-image: -webkit-linear-gradient(#FFF, #e3e3e3);/*同上*/
background-image: linear-gradient(#FFF, #e3e3e3);/*同上*/
border-bottom: 1px solid #999;/*下の線の幅、線種、色*/
border-right: 1px solid #999;/*右の線の幅、線種、色*/
border-left: 1px solid #999;/*左の線の幅、線種、色*/
line-height: 1.6;/*行間*/
position: relative;
overflow: hidden;
}
#sub article.box1 a {
padding: 5px;/*ボックス内の余白*/
text-decoration: none;
display: block;
overflow: hidden;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
#sub article.box1 a:hover {
background-color: #ffea99;/*マウスオン時のボックス色*/
}
/*h1見出しタグ*/
#sub article.box1 h1 {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
border: none;
text-align: left;
padding: 0;
background: none;
color: #00471c;
}
#sub article.box1 h4 {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
border: none;
text-align: left;
padding: 0;
background: none;
color: #00471c;
}

/*p段落タグ*/
#sub article.box1 p {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
padding: 0px;
}
/*サムネイル画像設定*/
#sub article.box1 figure {
float: left;/*左に回り込みさせる設定*/
padding: 0px;
}
/*サムネイル画像のフチ*/
#sub article.box1 figure img {
border: 1px solid #999;/*枠線の幅、線種、色*/
vertical-align: bottom;
}

#sub article.box1 {
font-size: 12px;/*文字サイズ*/
width: 100%;/*ボックスの幅*/
-moz-box-sizing:border-box;
box-sizing:border-box;
}



/*subコンテンツの段落タグ設定*/
#sub p {
padding-right: 10px;
padding-left: 10px;
}
#main, #sub {
float: none;
width: auto;
}
#main p {
padding: 0;
}

#sub ul {
margin-bottom: 1em;
width: 100%;
list-style: none;
margin: 0px;
padding: 0px;
margin-bottom: 15px;
}
/*メニュー１個ごとの設定*/
#sub ul li a {
text-decoration: none;
display: block;
border-right: 1px solid #999;/*右側の線の幅、線種、色*/
border-bottom: 1px solid #999;/*下側の線の幅、線種、色*/
border-left: 1px solid #999;/*左側の線の幅、線種、色*/
padding-left: 10px;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*同上*/
background-color: #313131;/*背景色*/
color: #FFFFFF;/*文字色*/
}
/*マウスオン時の設定*/
#sub ul li a:hover {
background-color: #000;/*背景色*/
color: #FFF;/*文字色*/
width: 96%;
}
/*list.html内の中古車紹介の各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main section.list article {
border: 1px solid #999;/*枠線の幅、線種、色*/
margin-bottom: 1em;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e3e3e3));/*グラデーション*/
background-image: -webkit-linear-gradient(#FFF, #e3e3e3);/*同上*/
background-image: linear-gradient(#FFF, #e3e3e3);/*同上*/
-webkit-box-shadow: 0px 2px 5px #CCC, 0px 0px 1px 1px #FFF inset;/*影の設定。右・下・ぼかし幅・色の設定, ＋内側への影を右・下・ぼかし幅・色を設定*/
box-shadow: 0px 2px 5px #CCC, 0px 0px 1px 1px #FFF inset;/*同上*/
position: relative;
overflow: hidden;
}
/*ボックス内の段落タグ設定*/
#main section.list article p {
padding: 0px;
margin-left: 220px;/*左の写真とのバランスをとって設定*/
}
/*ボックス内の写真設定*/
#main section.list article figure img {
float: left;/*画像を左へ回り込み*/
background-color: #FFF;/*画像の背景色。ここでは枠線と画像の間の色になります。*/
padding: 5px;/*余白。ここに上の行で設定した背景色が出ます。*/
border: 1px solid #CCC;/*枠線の幅、線種、色*/
vertical-align: bottom;
}
/*ボックス内のh1タグ設定*/
#main section.list article h2 {
font-size: 100%;
border-left: 3px solid #007d31;/*左側の線の幅、線種、色*/
margin-bottom: 0.5em;
color: #000;/*文字色*/
padding-left: 5px;
background-color: #00471c;/*背景色*/
color: #E1D38B;
}
/*リンクの設定*/
#main section.list article a {
padding: 10px;/*ボックス内の余白*/
text-decoration: none;
display: block;
overflow: hidden;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
#main section.list article a:hover {
background-color: #ffea99;/*マウスオン時のボックス色*/
}

/*list.html内の中古車一覧の各ブロック
---------------------------------------------------------------------------*/
/*ボックス内の写真設定*/
#main section.list article figure img {
float: left;
width: 90%;
height: auto;
margin-right: 10px;
}
/*ボックス内の段落タグ設定*/
#main section.list article p {
margin-left: 0;
}




html {
overflow: auto;
}

footer {
background-color: #000;
clear: both;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;
}



footer .pr {
display: block;
font-size: 80%;
}
footer a {
text-decoration: none;
color: #FFF;
}

.mb1em {
margin-bottom: 1em;
}

.color1 {
color: #F00;
}

.snsb {
overflow: hidden;
}
.snsb ul {
display:inline-block;
list-style: none;
margin: 0px;
padding: 0px;
margin-right: 0px;
}

.snsb iframe {
margin: 0 !important;
}

.sn {
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;

}
.sn ul {
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;
}
.sn li {
text-align: center;
display: inline-block;
margin-right: 0px;
color: #FFF;
}
.sn li a {
color: #fff;
text-decoration: none;
}
.sn iframe {
margin: 0 !important;
}



/*list.html内のおすすめ表示*/
.osusume {
font-size: 10px;
color: #FFF;
background: #F00;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}
/*list.html内SOLD OUT表示*/
.sumi {
font-size: 10px;
color: #FFF;
background: #069;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}
.end {
font-size: 10px;
color: #FFF;
background: #e6a52c;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}

.navigation{
overflow: hidden;
margin-bottom: 40px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: url(images/gray.gif) repeat-y 50% 0;
}
.navigation > div{
width: 50%;
}

.navigation .alignright{
text-align: right;
}

.navigation a{
display: block;
padding: 1em;
border: none;
}
.navigation a:hover{
background: #cddbb6;
color: #000;
}
.navigation .alignright a:hover{
border-left: 1px solid #ddd;
}
.alignleft {
float: left;
}

.alignright {
float: right;
}

.nav-single{
overflow: hidden;
margin-bottom: 40px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

.nav-single > div{
width: 50%;
}

.nav-single a{
display: block;
padding: 1em;
border: none;
}

.nav-single a:hover{
background: #cddbb6;
color: #000;

}



.nav-previous{
float: left;
}

.nav-next{
float: right;
}

/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
clear: both;
}
#pagetop a {
color: #FFF;/*文字色*/
font-size: 10px;/*文字サイズ*/
background-color: #000000;/*背景色*/
text-decoration: none;
text-align: center;
width: 10em;/*ボックス幅*/
display: block;
float: right;
}
/*マウスオン時*/
#pagetop a:hover {
background-color: #333;
color: #FFF;
}

span.search-excerpt {
background-color: #efe098;
}

/*テーブル１
---------------------------------------------------------------------------*/
.ta1 {
width: 100%;
}
.ta1, .ta1 td, .ta1 th{
border: 1px solid #999;/*テーブルの枠線の幅、線種、色*/
line-height: 2;
}
/*テーブル内の右側*/
.ta1 td{
width: 457px;
padding: 10px;
}
/*テーブル内の左側の見出し部分*/
.ta1 th{
width: 200px;
padding: 10px;
text-align: center;
background-color: #e2e2e2;/*背景色*/
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi{
width: auto;
text-align: left;
background-color: #e2e2e2;/*背景色*/
}
/*テーブルのキャプション設定*/
.ta1 caption{

padding: 3px;
border-top: 1px solid #999;/*上側の線の幅、線種、色*/
border-right: 1px solid #999;/*右側の線の幅、線種、色*/
border-left: 3px solid #007d31;/*左側の線の幅、線種、色*/
text-align: left;
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
font-weight: bold;
}
/*submitボタンの設定*/
input[type="submit"] {
width: 250px;/*ボタン幅*/
padding: 10px;/*ボタン内の余白*/
margin-bottom: 20px;
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 30px;/*角丸のサイズ*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
font-size: 14px;/*文字サイズ*/
}
/*submitボタンのマウスオン時の設定*/
input[type="submit"]:hover {
background-color: #007d31;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#00471c), to(#007d31));/*グラデーション*/
background-image: -webkit-linear-gradient(#00471c, #007d31);/*同上*/
background-image: linear-gradient(#00471c, #007d31);/*同上*/
color: #E1D38B;
}
/*こだわりアイコンのフロート指定(CMS用)*/
.ta1 td .specialbox {
float: left;
width: 200px;
height: 40px;

}

/*テーブル内の右側*/
.ta1 td{
width: auto;
padding: 2px;
}
/*テーブル内の左側の見出し部分*/
.ta1 th{
width: 100px;
padding: 2px;
}


.alpha a:hover img {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=70)";
}



.g-page,
.g-page[style],
.g-page iframe[style],
.g-page span{
width: 100% !important;
}

.responsive-widget-syncer{
width:100%;
max-width:100%;
}


}

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

body {
color: #666666;/*全体の文字色*/
margin: 0px;
padding: 0px;
font: 14px/2 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";/*背景色、背景画像の読み込み*/
background-color: #00471C;
background-image: url(/images/bg.png);
}
h1,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure{
margin: 0px;
padding: 0px;
}
h2{
margin-top: 5px;
padding-top: 5px;
margin-bottom: 0px;
padding-bottom: 0px;
}

hr{
margin: 0px;
padding: 0px;
}


body > h1 {
font-size: 10px;/*文字サイズ*/
color: #FFF;/*文字色*/
background: #000;/*背景色*/
text-align: right;/*右寄せ*/
}
body > h1 a, body > h1 a:hover {
color: #FFF;
text-decoration: none;
}

body > h1 {
text-align: center;
}

a {
color: #666;/*リンクテキストの色*/
}
a:hover {
color: #000;/*マウスオン時の文字色（全体）*/
text-decoration: none;/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}



header {
height: auto;
}
header h2 {
padding-top: 10px;
text-align: center;
}
header #banner1 {
text-align: center;
}

nav#menu ul {
margin: 0px;
padding: 0px;
}
nav#menu li {
float: left;
list-style: none;
width: 50%;
height: 100%;
}



nav#menu ul li a {
color: #E1D38B;/*文字色*/
text-decoration: none;
display: block;
text-align: center;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*同上*/
background-color: #313131;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#313131));/*グラデーション*/
background-image: -webkit-linear-gradient(#494949, #313131);/*同上*/
background-image: linear-gradient(#494949, #313131);/*同上*/
border-top: 1px solid #666;/*上の線の幅、線種、色*/
border-right: 1px solid #666;/*右の線の幅、線種、色*/
border-left: 1px solid #666;/*左の線の幅、線種、色*/

font-weight: bold;/*文字を太字にする設定*/




}
/*マウスオン時の設定*/
nav#menu ul li a:hover {
color: #000;/*文字色*/
background: #FFFFFF;/*背景色*/
}
/*最初のメニューの設定*/
nav#menu ul > li:first-child {
margin-left: 0px;
}

nav#menu ul li a span {
display: none;
}
nav#menu ul > li:last-child {
margin-bottom: 10px;
}


nav#menu ul li {
margin-bottom: 2px;
width: 49.3%;
border: 1px solid #000000 ;
margin-left: 0px;

}


nav#menu ul li a {
height: auto;
width: auto;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
/*最初のメニューの設定*/
nav#menu ul > li:first-child {
margin-left: 0px;
}

/*current（現在表示中のページのメニュー）*/
nav#menu ul li#current a {
color: #000;/*文字色*/
width: 158px;
background-color: #FFFFFF;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#FFFFFF));/*グラデーション*/
background-image: -webkit-linear-gradient(#e6e6e6, #FFFFFF);/*同上*/
background-image: linear-gradient(#e6e6e6, #FFFFFF);/*同上*/
border-top: 1px solid #FFF;/*上の線の幅、線種、色*/
border-right: 1px solid #FFF;/*右の線の幅、線種、色*/
border-left: 1px solid #FFF;/*左の線の幅、線種、色*/
}

nav#menu ul li#current a {
width: auto;
border-top: none;
border-right: none;
border-left: none;
}


#container {
width: auto;
margin-right: 6px;
margin-left: 6px;
}

.clear {
clear:both;　/*floatの解除、ここがポイント*/
}

#main {
float: none;/*中央に回り込み*/
width: auto;/*メインコンテンツ幅*/
background-color: #ffffff;
padding: 5px;
}
#sub {
float: none;/*中央に回り込み*/
width: auto;/*サブコンテンツ幅*/
background-color: #ffffff;
padding: 5px;
}

#sub {
float: none;/*中央に回り込み*/
width: auto;/*サブコンテンツ幅*/
background-color: #ffffff;
padding: 5px;
}


#main section > h2,
#main article > h2 {
background-color: #313131;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#313131));/*グラデーション*/
background-image: -webkit-linear-gradient(#494949, #313131);/*同上*/
background-image: linear-gradient(#494949, #313131);/*同上*/
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
font-size: 100%;
color: #E1D38B;/*文字色*/
padding: 3px 10px 3px 15px;/*左から、上、右、下、左側への余白*/
clear: both;
border-bottom: 4px solid #005923;/*下部の線の幅、線種、色*/
}
#main h2 img {
vertical-align: middle;
}


/*subコンテンツ内のh1タグ設定*/
#sub h1 {
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 6px 6px 0 0;/*角丸のサイズ。それぞれ左上、右上、右下、左下への設定*/
font-size: 100%;
text-align: center;/*文字をセンタリング*/
padding: 5px 0px;/*左から、上下、左右への余白*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
}
#sub h3 {
display: block;
float: none;
width: 100%;
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 6px 6px 0 0;/*角丸のサイズ。それぞれ左上、右上、右下、左下への設定*/
font-size: 100%;
text-align: center;/*文字をセンタリング*/
padding: 5px 0px;/*左から、上下、左右への余白*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
margin: 0px;
}



/*subコンテンツの段落タグ設定*/
#sub p {
padding-right: 10px;
padding-left: 10px;
}
#main, #sub {
float: none;
width: auto;
}
#main p {
padding: 0;
}
#main h2 {
margin-top: 5px;
padding-top: 5px;
}

#sub ul {
margin-bottom: 1em;
width: 100%;
list-style: none;
margin: 0px;
padding: 0px;
margin-bottom: 15px;
}
/*メニュー１個ごとの設定*/
#sub ul li a {
text-decoration: none;
display: block;
border-right: 1px solid #999;/*右側の線の幅、線種、色*/
border-bottom: 1px solid #999;/*下側の線の幅、線種、色*/
border-left: 1px solid #999;/*左側の線の幅、線種、色*/
padding-left: 10px;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*同上*/
background-color: #313131;/*背景色*/
color: #FFFFFF;/*文字色*/
}
/*マウスオン時の設定*/
#sub ul li a:hover {
background-color: #000;/*背景色*/
color: #FFF;/*文字色*/
width: 97%;
}

/*サブコンテンツ用　車ボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
#sub article.box1 {
font-size: 11px;/*文字サイズ*/
width: 238px;/*ボックスの幅*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e3e3e3));/*グラデーション*/
background-image: -webkit-linear-gradient(#FFF, #e3e3e3);/*同上*/
background-image: linear-gradient(#FFF, #e3e3e3);/*同上*/
border-bottom: 1px solid #999;/*下の線の幅、線種、色*/
border-right: 1px solid #999;/*右の線の幅、線種、色*/
border-left: 1px solid #999;/*左の線の幅、線種、色*/
line-height: 1.6;/*行間*/
position: relative;
overflow: hidden;
}
#sub article.box1 a {
padding: 5px;/*ボックス内の余白*/
text-decoration: none;
display: block;
overflow: hidden;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
#sub article.box1 a:hover {
background-color: #ffea99;/*マウスオン時のボックス色*/
}
/*h1見出しタグ*/
#sub article.box1 h1 {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
border: none;
text-align: left;
padding: 0;
background: none;
color: #00471c;
}
#sub article.box1 h4 {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
border: none;
text-align: left;
padding: 0;
background: none;
color: #00471c;
}

/*p段落タグ*/
#sub article.box1 p {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
padding: 0px;
}
/*サムネイル画像設定*/
#sub article.box1 figure {
float: left;/*左に回り込みさせる設定*/
padding: 0px;
}
/*サムネイル画像のフチ*/
#sub article.box1 figure img {
border: 1px solid #999;/*枠線の幅、線種、色*/
vertical-align: bottom;
}

#sub article.box1 {
font-size: 12px;/*文字サイズ*/
width: 100%;/*ボックスの幅*/
-moz-box-sizing:border-box;
box-sizing:border-box;
}

/*list.html内の中古車紹介の各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main section.list article {
border: 1px solid #999;/*枠線の幅、線種、色*/
margin-bottom: 1em;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e3e3e3));/*グラデーション*/
background-image: -webkit-linear-gradient(#FFF, #e3e3e3);/*同上*/
background-image: linear-gradient(#FFF, #e3e3e3);/*同上*/
-webkit-box-shadow: 0px 2px 5px #CCC, 0px 0px 1px 1px #FFF inset;/*影の設定。右・下・ぼかし幅・色の設定, ＋内側への影を右・下・ぼかし幅・色を設定*/
box-shadow: 0px 2px 5px #CCC, 0px 0px 1px 1px #FFF inset;/*同上*/
position: relative;
overflow: hidden;
}
/*ボックス内の段落タグ設定*/
#main section.list article p {
padding: 0px;
margin-left: 220px;/*左の写真とのバランスをとって設定*/
}
/*ボックス内の写真設定*/
#main section.list article figure img {
float: left;/*画像を左へ回り込み*/
background-color: #FFF;/*画像の背景色。ここでは枠線と画像の間の色になります。*/
padding: 5px;/*余白。ここに上の行で設定した背景色が出ます。*/
border: 1px solid #CCC;/*枠線の幅、線種、色*/
vertical-align: bottom;
}
/*ボックス内のh1タグ設定*/
#main section.list article h2 {
font-size: 100%;
border-left: 3px solid #007d31;/*左側の線の幅、線種、色*/
margin-bottom: 0.5em;
color: #000;/*文字色*/
padding-left: 5px;
background-color: #00471c;/*背景色*/
color: #E1D38B;
}
/*リンクの設定*/
#main section.list article a {
padding: 10px;/*ボックス内の余白*/
text-decoration: none;
display: block;
overflow: hidden;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
#main section.list article a:hover {
background-color: #ffea99;/*マウスオン時のボックス色*/
}

/*list.html内の中古車一覧の各ブロック
---------------------------------------------------------------------------*/
/*ボックス内の写真設定*/
#main section.list article figure img {
float: left;
width: 160px;
height: auto;
margin-right: 10px;
}
/*ボックス内の段落タグ設定*/
#main section.list article p {
margin-left: 0;
}



html {
overflow: auto;
}

footer {
background-color: #000;
clear: both;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;
}



footer .pr {
display: block;
font-size: 80%;
}
footer a {
text-decoration: none;
color: #FFF;
}

.color1 {
color: #F00;
}


.mb1em {
margin-bottom: 1em;
}

.snsb {
overflow: hidden;
}
.snsb li {
display:inline-block;
list-style: none;
margin: 0px;
padding: 0px;
margin-right: 0px;
}

.snsb iframe {
margin: 0 !important;
}

.sn {
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;

}
.sn ul {
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;
}
.sn li {
text-align: center;
display: inline-block;
margin-right: 0px;
color: #FFF;
}
.sn li a {
color: #fff;
text-decoration: none;
}
.sn iframe {
margin: 0 !important;
}


/*list.html内のおすすめ表示*/
.osusume {
font-size: 10px;
color: #FFF;
background: #F00;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}
/*list.html内SOLD OUT表示*/
.sumi {
font-size: 10px;
color: #FFF;
background: #069;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}
.end {
font-size: 10px;
color: #FFF;
background: #e6a52c;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}

.navigation{
overflow: hidden;
margin-bottom: 40px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: url(images/gray.gif) repeat-y 50% 0;
}
.navigation > div{
width: 50%;
}

.navigation .alignright{
text-align: right;
}

.navigation a{
display: block;
padding: 1em;
border: none;
}
.navigation a:hover{
background: #cddbb6;
color: #000;
}
.navigation .alignright a:hover{
border-left: 1px solid #ddd;
}
.alignleft {
float: left;
}

.alignright {
float: right;
}


.nav-single{
overflow: hidden;
margin-bottom: 40px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

.nav-single > div{
width: 50%;
}

.nav-single a{
display: block;
padding: 1em;
border: none;
}

.nav-single a:hover{
background: #cddbb6;
color: #000;

}


.nav-previous{
float: left;
}

.nav-next{
float: right;
}


/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
clear: both;
}
#pagetop a {
color: #FFF;/*文字色*/
font-size: 10px;/*文字サイズ*/
background-color: #000000;/*背景色*/
text-decoration: none;
text-align: center;
width: 10em;/*ボックス幅*/
display: block;
float: right;
}
/*マウスオン時*/
#pagetop a:hover {
background-color: #333;
color: #FFF;
}


span.search-excerpt {
background-color: #efe098;
}

/*テーブル１
---------------------------------------------------------------------------*/
.ta1 {
width: 100%;
}
.ta1, .ta1 td, .ta1 th{
border: 1px solid #999;/*テーブルの枠線の幅、線種、色*/
line-height: 2;
}
/*テーブル内の右側*/
.ta1 td{
width: 457px;
padding: 10px;
}
/*テーブル内の左側の見出し部分*/
.ta1 th{
width: 200px;
padding: 10px;
text-align: center;
background-color: #e2e2e2;/*背景色*/
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi{
width: auto;
text-align: left;
background-color: #e2e2e2;/*背景色*/
}
/*テーブルのキャプション設定*/
.ta1 caption{


padding: 3px;
border-top: 1px solid #999;/*上側の線の幅、線種、色*/
border-right: 1px solid #999;/*右側の線の幅、線種、色*/
border-left: 3px solid #007d31;/*左側の線の幅、線種、色*/
text-align: left;
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
font-weight: bold;


}
/*submitボタンの設定*/
input[type="submit"] {
width: 250px;/*ボタン幅*/
padding: 10px;/*ボタン内の余白*/
margin-bottom: 20px;
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 30px;/*角丸のサイズ*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
font-size: 14px;/*文字サイズ*/
}
/*submitボタンのマウスオン時の設定*/
input[type="submit"]:hover {
background-color: #007d31;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#00471c), to(#007d31));/*グラデーション*/
background-image: -webkit-linear-gradient(#00471c, #007d31);/*同上*/
background-image: linear-gradient(#00471c, #007d31);/*同上*/
color: #E1D38B;
}
/*こだわりアイコンのフロート指定(CMS用)*/
.ta1 td .specialbox {
float: left;
width: 200px;
height: 40px;

}

/*テーブル内の右側*/
.ta1 td{
width: auto;
padding: 2px;
}
/*テーブル内の左側の見出し部分*/
.ta1 th{
width: 200px;
padding: 2px;
}


.alpha a:hover img {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=70)";
}



.g-page,
.g-page[style],
.g-page iframe[style],
.g-page span{
width: 100% !important;
}



}

@media only screen and (min-width:851px) {

/*全体の設定
---------------------------------------------------------------------------*/
body {
color: #666666;/*全体の文字色*/
margin: 0px;
padding: 0px;
font: 14px/2 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";/*背景色、背景画像の読み込み*/
background-color: #00471C;
background-image: url(/images/bg.png);
}
h1,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure{
margin: 0px;
padding: 0px;
}
h2{
margin-top: 5px;
padding-top: 5px;
margin-bottom: 0px;
padding-bottom: 0px;
}

hr{
margin: 0px;
padding: 0px;
}

ul{
list-style-type: none;
}
img {
border: none;
}
input,textarea,select {
font-size: 1em;
}
form {
margin: 0px;
}
table {
border-collapse:collapse;
font-size: 100%;
border-spacing: 0;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
color: #666;/*リンクテキストの色*/
}
a:hover {
color: #000;/*マウスオン時の文字色（全体）*/
text-decoration: none;/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*bodyの直接の子要素のh1タグ設定
---------------------------------------------------------------------------*/
body > h1 {
font-size: 10px;/*文字サイズ*/
color: #FFF;/*文字色*/
background: #000;/*背景色*/
text-align: right;/*右寄せ*/
}
body > h1 a, body > h1 a:hover {
color: #FFF;
text-decoration: none;
}


/*コンテナー（HP最上段のh1タグ以外を囲むボックス）
---------------------------------------------------------------------------*/
#container {
width: 980px;/*コンテナー幅*/
margin-right: auto;
margin-left: auto;
}

/*ヘッダー内のh1タグ（サイト名ロゴ）
---------------------------------------------------------------------------*/
header {
position: relative;
height: 80px;/*ヘッダーの高さ*/
width: 100%;
}
/*ロゴ*/
header h1 {
position: absolute;
left: 20px;/*ヘッダーブロックに対して左から20pxの位置に配置*/
top: 20px;/*ヘッダーブロックに対して上から20pxの位置に配置*/

}
header h2 {
position: absolute;
left: 20px;/*ヘッダーブロックに対して左から20pxの位置に配置*/
top: 10px;/*ヘッダーブロックに対して上から20pxの位置に配置*/

}

/*買い取りバナー*/
header #banner1 {
position: absolute;
top: 18px;/*ヘッダーブロックに対して上から15pxの位置に配置*/
right: 20px;/*ヘッダーブロックに対して右から20pxの位置に配置*/
}

/*上部のメインメニュー
---------------------------------------------------------------------------*/
/*メニュー１個ごとの設定*/
nav#menu ul li {
float: left;
margin-left: 4px;
line-height: 18px;
top: 80px;
}



nav#menu ul li a {
color: #E1D38B;/*文字色*/
text-decoration: none;
display: block;
text-align: center;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*同上*/
background-color: #313131;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#313131));/*グラデーション*/
background-image: -webkit-linear-gradient(#494949, #313131);/*同上*/
background-image: linear-gradient(#494949, #313131);/*同上*/
border-top: 1px solid #666;/*上の線の幅、線種、色*/
border-right: 1px solid #666;/*右の線の幅、線種、色*/
border-left: 1px solid #666;/*左の線の幅、線種、色*/
height: 44px;
width: 157px;
font-weight: bold;/*文字を太字にする設定*/
padding-top: 8px;
}
/*マウスオン時の設定*/
nav#menu ul li a:hover {
color: #000;/*文字色*/
background: #FFFFFF;/*背景色*/
}
/*最初のメニューの設定*/
nav#menu ul > li:first-child {
margin-left: 0px;
}
/*英語表記の設定*/
nav#menu ul li a span {
font-size: 9px;/*文字サイズ*/
display: block;
font-weight: normal;/*文字を太字でなく標準にする設定*/
}
/*current（現在表示中のページのメニュー）*/
nav#menu ul li#current a {
color: #000;/*文字色*/
width: 158px;
background-color: #FFFFFF;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#FFFFFF));/*グラデーション*/
background-image: -webkit-linear-gradient(#e6e6e6, #FFFFFF);/*同上*/
background-image: linear-gradient(#e6e6e6, #FFFFFF);/*同上*/
border-top: 1px solid #FFF;/*上の線の幅、線種、色*/
border-right: 1px solid #FFF;/*右の線の幅、線種、色*/
border-left: 1px solid #FFF;/*左の線の幅、線種、色*/
}




/*コンテンツ（main,subを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
clear: left;
width: 960px;/*コンテンツ幅*/
background-color: #FFF;/*背景色*/
padding: 10px;/*コンテンツ内の余白*/
overflow: hidden;
}

/*トップページのスライドショー
---------------------------------------------------------------------------*/
#mainimg {
position: relative;
height: 270px;
width: 960px;
margin-bottom: 10px;
}
#mainimg img {
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
vertical-align: bottom;
}
#mainimg .slide_file {
display: none;
}
#slide_image {
z-Index:2;
position: absolute;
left:0px;
top:0px;
}
#slide_image2 {
z-Index:1;
position: absolute;
left:0px;
top:0px;
}



/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
float: left;/*左側に回り込み*/
width: 700px;/*メインコンテンツ幅*/
background-color: #ffffff;
padding-left: 2px;
}


/*mainコンテンツのsectionとarticleの直接の子要素のh1タグの設定*/
#main section > h1,
#main article > h1 {
background-color: #313131;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#313131));/*グラデーション*/
background-image: -webkit-linear-gradient(#494949, #313131);/*同上*/
background-image: linear-gradient(#494949, #313131);/*同上*/
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
font-size: 100%;
color: #E1D38B;/*文字色*/
padding: 3px 10px 3px 15px;/*左から、上、右、下、左側への余白*/
clear: both;
border-bottom: 4px solid #005923;/*下部の線の幅、線種、色*/
}
#main h1 img {
vertical-align: middle;
}

/*mainコンテンツのsectionとarticleの直接の子要素のh2タグの設定*/
#main section > h2,
#main article > h2 {
background-color: #313131;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#313131));/*グラデーション*/
background-image: -webkit-linear-gradient(#494949, #313131);/*同上*/
background-image: linear-gradient(#494949, #313131);/*同上*/
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
font-size: 100%;
color: #E1D38B;/*文字色*/
padding: 3px 10px 3px 15px;/*左から、上、右、下、左側への余白*/
clear: both;
border-bottom: 4px solid #005923;/*下部の線の幅、線種、色*/
}
#main h2 img {
vertical-align: middle;
}





/*mainコンテンツの段落タグ設定*/
#main p {
padding: 0.5em 10px 1em;/*左から、上、左右、下への余白*/
}
#main > p {
background-color: #FFF;
}

/*サブコンテンツ
---------------------------------------------------------------------------*/
html{
height: 100%;
}

body{
height: 100%;
}


#sub {
float: right;/*右側に回り込み*/
width: 240px;/*サブコンテンツ幅*/
background-color: #ffffff;
margin: 0 auto;
padding: 0px 0px 0px 0px;
padding-left : 2px;

height: 100%;
min-height: 100%;
}

body > #sub{
height: auto;
}

/*subコンテンツ内のh1タグ設定*/
#sub h1 {
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 6px 6px 0 0;/*角丸のサイズ。それぞれ左上、右上、右下、左下への設定*/
font-size: 100%;
text-align: center;/*文字をセンタリング*/
padding: 5px 0px;/*左から、上下、左右への余白*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
}
#sub h3 {
width: 238px;
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 6px 6px 0 0;/*角丸のサイズ。それぞれ左上、右上、右下、左下への設定*/
font-size: 100%;
text-align: center;/*文字をセンタリング*/
padding: 5px 0px;/*左から、上下、左右への余白*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
}

/*subコンテンツの段落タグ設定*/
#sub p {
padding-right: 10px;
padding-left: 10px;
}

/*サブコンテンツ内のメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
#sub ul {
margin-bottom: 1em;
width: 240px;
}
/*メニュー１個ごとの設定*/
#sub ul li a {

text-decoration: none;
display: block;
border-right: 1px solid #999;/*右側の線の幅、線種、色*/
border-bottom: 1px solid #999;/*下側の線の幅、線種、色*/
border-left: 1px solid #999;/*左側の線の幅、線種、色*/
padding-left: 10px;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*同上*/
background-color: #313131;/*背景色*/
color: #FFFFFF;/*文字色*/
}
/*マウスオン時の設定*/
#sub ul li a:hover {
background-color: #000;/*背景色*/
color: #FFF;/*文字色*/
width: 96%;
}

/*サブコンテンツ用　車ボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
#sub article.box1 {
font-size: 11px;/*文字サイズ*/
width: 240px;/*ボックスの幅*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e3e3e3));/*グラデーション*/
background-image: -webkit-linear-gradient(#FFF, #e3e3e3);/*同上*/
background-image: linear-gradient(#FFF, #e3e3e3);/*同上*/
border-bottom: 1px solid #999;/*下の線の幅、線種、色*/
border-right: 1px solid #999;/*右の線の幅、線種、色*/
border-left: 1px solid #999;/*左の線の幅、線種、色*/
line-height: 1.6;/*行間*/
position: relative;
overflow: hidden;
}
#sub article.box1 a {
padding: 5px;/*ボックス内の余白*/
text-decoration: none;
display: block;
overflow: hidden;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
#sub article.box1 a:hover {
background-color: #ffea99;/*マウスオン時のボックス色*/
}
/*h1見出しタグ*/
#sub article.box1 h2 {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
border: none;
text-align: left;
padding: 0;
background: none;
color: #00471c;
}
#sub article.box1 h4 {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
border: none;
text-align: left;
padding: 0;
background: none;
color: #00471c;
}

/*p段落タグ*/
#sub article.box1 p {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
padding: 0px;
}
/*サムネイル画像設定*/
#sub article.box1 figure {
float: left;/*左に回り込みさせる設定*/
padding: 0px;
}
/*サムネイル画像のフチ*/
#sub article.box1 figure img {
border: 1px solid #999;/*枠線の幅、線種、色*/
vertical-align: bottom;
}

/*フッター設定
---------------------------------------------------------------------------*/
html {
overflow: auto;
}

footer {
background-color: #000;
clear: both;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;
}



footer .pr {
display: block;
font-size: 80%;
}
footer a {
text-decoration: none;
color: #FFF;
}


/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl{
overflow: auto;/*高さ指定を超えるとiframe風にスクロールが出る設定。全部表示させたいならこの行と下のheightの行を削除。*/
height: 400px;
padding-left: 10px;
}
/*日付設定*/
#new dt {
font-weight: bold;/*太字にする設定。標準がいいならこの行削除。*/
float: left;
width: 8em;
}
/*記事設定*/
#new dd {
border-bottom: 1px solid #d2d2d2;/*下線の幅、線種、色*/
padding-left: 8em;
}
#new dd img {
vertical-align: middle;
}

/*list.html内の中古車紹介の各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main section.list article {
border: 1px solid #999;/*枠線の幅、線種、色*/
margin-bottom: 1em;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e3e3e3));/*グラデーション*/
background-image: -webkit-linear-gradient(#FFF, #e3e3e3);/*同上*/
background-image: linear-gradient(#FFF, #e3e3e3);/*同上*/
-webkit-box-shadow: 0px 2px 5px #CCC, 0px 0px 1px 1px #FFF inset;/*影の設定。右・下・ぼかし幅・色の設定, ＋内側への影を右・下・ぼかし幅・色を設定*/
box-shadow: 0px 2px 5px #CCC, 0px 0px 1px 1px #FFF inset;/*同上*/
position: relative;
overflow: hidden;
}
/*ボックス内の段落タグ設定*/
#main section.list article p {
padding: 0px;
margin-left: 180px;/*左の写真とのバランスをとって設定*/
}
/*ボックス内の写真設定*/
#main section.list article figure img {
float: left;/*画像を左へ回り込み*/
background-color: #FFF;/*画像の背景色。ここでは枠線と画像の間の色になります。*/
padding: 5px;/*余白。ここに上の行で設定した背景色が出ます。*/
border: 1px solid #CCC;/*枠線の幅、線種、色*/
vertical-align: bottom;
}
/*ボックス内のh1タグ設定*/
#main section.list article h2 {

font-size: 100%;
border-left: 3px solid #007d31;/*左側の線の幅、線種、色*/
margin-bottom: 0.5em;
color: #000;/*文字色*/
padding-left: 5px;
background-color: #00471c;/*背景色*/
color: #E1D38B;


}
/*リンクの設定*/
#main section.list article a {
padding: 10px;/*ボックス内の余白*/
text-decoration: none;
display: block;
overflow: hidden;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
#main section.list article a:hover {
background-color: #ffea99;/*マウスオン時のボックス色*/
}

/*テーブル１
---------------------------------------------------------------------------*/
.ta1 {
width: 100%;
}
.ta1, .ta1 td, .ta1 th{
border: 1px solid #999;/*テーブルの枠線の幅、線種、色*/
line-height: 2;
}
/*テーブル内の右側*/
.ta1 td{
width: 457px;
padding: 10px;
}
/*テーブル内の左側の見出し部分*/
.ta1 th{
width: 200px;
padding: 10px;
text-align: center;
background-color: #e2e2e2;/*背景色*/
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi{
width: auto;
text-align: left;
background-color: #e2e2e2;/*背景色*/
}
/*テーブルのキャプション設定*/
.ta1 caption{

padding: 3px;
border-top: 1px solid #999;/*上側の線の幅、線種、色*/
border-right: 1px solid #999;/*右側の線の幅、線種、色*/
border-left: 3px solid #007d31;/*左側の線の幅、線種、色*/
text-align: left;
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
font-weight: bold;


}
/*submitボタンの設定*/
input[type="submit"] {
width: 250px;/*ボタン幅*/
padding: 10px;/*ボタン内の余白*/
margin-bottom: 20px;
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 30px;/*角丸のサイズ*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
font-size: 14px;/*文字サイズ*/
}
/*submitボタンのマウスオン時の設定*/
input[type="submit"]:hover {
background-color: #007d31;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#00471c), to(#007d31));/*グラデーション*/
background-image: -webkit-linear-gradient(#00471c, #007d31);/*同上*/
background-image: linear-gradient(#00471c, #007d31);/*同上*/
color: #E1D38B;
}
/*こだわりアイコンのフロート指定(CMS用)*/
.ta1 td .specialbox {
float: left;
width: 200px;
height: 40px;

}

/*FAQページの設定
---------------------------------------------------------------------------*/
/*FAQブロック全体*/
dl.faq {
padding-right: 10px;
padding-left: 10px;
}
/*質問ブロック*/
dl.faq dt {
padding-left: 20px;
font-weight: bold;/*文字を太字にする設定*/
color: #F00;/*文字色*/
background-image: url(../images/faq_q.png);/*背景画像の読み込み*/
background-repeat: no-repeat;/*背景画像をリピートしない*/
background-position: left 3px;/*背景画像を左側、3pxの場所に配置*/
}
/*回答ブロック*/
dl.faq dd {
padding-left: 20px;
background-image: url(../images/faq_a.png);/*背景画像の読み込み*/
background-repeat: no-repeat;/*背景画像をリピートしない*/
background-position: left 3px;/*背景画像を左側、3pxの場所に配置*/
}

/*その他
---------------------------------------------------------------------------*/
.look {
background: #dcdcdc;
}
.mb1em {
margin-bottom: 1em;
}
.clear {
clear: both;
}
ul.disc {
padding: 0em 25px 1em;
list-style: disc;
}
.color1 {
color: #F00;
}
.pr {
font-size: 10px;
}
.btn {
font-size: 13px;
}
.wl {
width: 96%;
}
.ws {
width: 50%;
}
.c {
text-align: center;
}
figcaption {
font-size: 11px;
}
.sortbox {
text-align: right;
margin-bottom: 1em;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
padding: 10px;
background: #e5e5e5;
}
.big1 {
font-size: 130%;
}
/*list.html内のおすすめ表示*/
.osusume {
font-size: 10px;
color: #FFF;
background: #F00;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}
/*list.html内SOLD OUT表示*/
.sumi {
font-size: 10px;
color: #FFF;
background: #069;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}
.end {
font-size: 10px;
color: #FFF;
background: #e6a52c;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}



.snsb {
overflow: hidden;
}
.snsb ul {
margin-left: -50px;
}
.snsb li {
display:inline-block;
margin-right: 0px;
}
.snsb iframe {
margin: 0 !important;
}

.sn {
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;

}
.sn ul {
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;
}
.sn li {
text-align: center;
display: inline-block;
margin-right: 0px;
color: #FFF;
}
.sn li a {
color: #fff;
text-decoration: none;
}
.sn iframe {
margin: 0 !important;
}



.post-meta .post-date,
.post-meta .category{
padding-right: 1em;
}

.navigation{
overflow: hidden;
margin-bottom: 40px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: url(images/gray.gif) repeat-y 50% 0;
}
.navigation > div{
width: 50%;
}

.navigation .alignright{
text-align: right;
}

.navigation a{
display: block;
padding: 1em;
border: none;
}
.navigation a:hover{
background: #cddbb6;
color: #000;
}
.navigation .alignright a:hover{
border-left: 1px solid #ddd;
}
.alignleft {
float: left;
}

.alignright {
float: right;
}


.nav-single{
overflow: hidden;
margin-bottom: 40px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

.nav-single > div{
width: 50%;
}

.nav-single a{
display: block;
padding: 1em;
border: none;
}

.nav-single a:hover{
background: #cddbb6;
color: #000;

}


.nav-previous{
float: left;
}

.nav-next{
float: right;
}

#cat{
padding: 0px;
font-size: 14px;
font-weight : bold;
color: #00471C;


}
#cat option[value="0"]{
background: #f9fbf3;
}
#cat option[value="1"]{
background: #f9fbf3;
}
#cat option[value="2"]{
background: #f9fbf3;
}
#cat option[value="3"]{
background: #f9fbf3;
}
#cat option[value="4"]{
background: #f9fbf3;
}
#cat option[value="5"]{
background: #f9fbf3;
}
#cat option[value="6"]{
background: #f9fbf3;
}
#cat option[value="7"]{
background: #f9fbf3;
}
#cat option[value="8"]{
background: #f9fbf3;
}
#cat option[value="9"]{
background: #f9fbf3;
}
#cat option[value="10"]{
background: #f9fbf3;
}
#cat option[value="11"]{
background: #f9fbf3;
}
#cat option[value="12"]{
background: #f9fbf3;
}
#cat option[value="13"]{
background: #f9fbf3;
}




#cat option[value="14"]{
background: #ffffff;
}
#cat option[value="15"]{
background: #ffffff;
}
#cat option[value="16"]{
background: #ffffff;
}

#cat option[value="17"]{
background: #ffffff;
}

#cat option[value="18"]{
background: #ffffff;
}

#cat option[value="19"]{
background: #ffffff;
}





/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
clear: both;
}
#pagetop a {
color: #FFF;/*文字色*/
font-size: 10px;/*文字サイズ*/
background-color: #000000;/*背景色*/
text-decoration: none;
text-align: center;
width: 10em;/*ボックス幅*/
display: block;
float: right;
}
/*マウスオン時*/
#pagetop a:hover {
background-color: #333;
color: #FFF;
}



span.search-excerpt {
background-color: #efe098;
}



.alpha a:hover img {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=70)";
}


.g-page,
.g-page[style],
.g-page iframe[style],
.g-page span{
width: 100% !important;
}


}



/*プリント設定
---------------------------------------------------------------------------*/


@media print{

/*全体の設定
---------------------------------------------------------------------------*/
body {
color: #666666;/*全体の文字色*/
margin: 0px;
padding: 0px;
font: 14px/2 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";/*背景色、背景画像の読み込み*/
background-color: #00471C;
background-image: url(/images/bg.png);
}
h1,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure{
margin: 0px;
padding: 0px;
}
h2{
margin-top: 5px;
padding-top: 5px;
margin-bottom: 0px;
padding-bottom: 0px;
}

hr{
margin: 0px;
padding: 0px;
}

ul{
list-style-type: none;
}
img {
border: none;
}
input,textarea,select {
font-size: 1em;
}
form {
margin: 0px;
}
table {
border-collapse:collapse;
font-size: 100%;
border-spacing: 0;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
color: #666;/*リンクテキストの色*/
}
a:hover {
color: #000;/*マウスオン時の文字色（全体）*/
text-decoration: none;/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*bodyの直接の子要素のh1タグ設定
---------------------------------------------------------------------------*/
body > h1 {
font-size: 10px;/*文字サイズ*/
color: #FFF;/*文字色*/
background: #000;/*背景色*/
text-align: right;/*右寄せ*/
}
body > h1 a, body > h1 a:hover {
color: #FFF;
text-decoration: none;
}


/*コンテナー（HP最上段のh1タグ以外を囲むボックス）
---------------------------------------------------------------------------*/
#container {
width: 980px;/*コンテナー幅*/
margin-right: auto;
margin-left: auto;
}

/*ヘッダー内のh1タグ（サイト名ロゴ）
---------------------------------------------------------------------------*/
header {
position: relative;
height: 80px;/*ヘッダーの高さ*/
width: 100%;
}
/*ロゴ*/
header h1 {
position: absolute;
left: 20px;/*ヘッダーブロックに対して左から20pxの位置に配置*/
top: 20px;/*ヘッダーブロックに対して上から20pxの位置に配置*/

}
header h2 {
position: absolute;
left: 20px;/*ヘッダーブロックに対して左から20pxの位置に配置*/
top: 10px;/*ヘッダーブロックに対して上から20pxの位置に配置*/

}

/*買い取りバナー*/
header #banner1 {
position: absolute;
top: 18px;/*ヘッダーブロックに対して上から15pxの位置に配置*/
right: 20px;/*ヘッダーブロックに対して右から20pxの位置に配置*/
}

/*上部のメインメニュー
---------------------------------------------------------------------------*/
/*メニュー１個ごとの設定*/
nav#menu ul li {
float: left;
margin-left: 4px;
line-height: 18px;
top: 80px;
}



nav#menu ul li a {
color: #E1D38B;/*文字色*/
text-decoration: none;
display: block;
text-align: center;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*同上*/
background-color: #313131;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#313131));/*グラデーション*/
background-image: -webkit-linear-gradient(#494949, #313131);/*同上*/
background-image: linear-gradient(#494949, #313131);/*同上*/
border-top: 1px solid #666;/*上の線の幅、線種、色*/
border-right: 1px solid #666;/*右の線の幅、線種、色*/
border-left: 1px solid #666;/*左の線の幅、線種、色*/
height: 44px;
width: 157px;
font-weight: bold;/*文字を太字にする設定*/
padding-top: 8px;
}
/*マウスオン時の設定*/
nav#menu ul li a:hover {
color: #000;/*文字色*/
background: #FFFFFF;/*背景色*/
}
/*最初のメニューの設定*/
nav#menu ul > li:first-child {
margin-left: 0px;
}
/*英語表記の設定*/
nav#menu ul li a span {
font-size: 9px;/*文字サイズ*/
display: block;
font-weight: normal;/*文字を太字でなく標準にする設定*/
}
/*current（現在表示中のページのメニュー）*/
nav#menu ul li#current a {
color: #000;/*文字色*/
width: 158px;
background-color: #FFFFFF;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#FFFFFF));/*グラデーション*/
background-image: -webkit-linear-gradient(#e6e6e6, #FFFFFF);/*同上*/
background-image: linear-gradient(#e6e6e6, #FFFFFF);/*同上*/
border-top: 1px solid #FFF;/*上の線の幅、線種、色*/
border-right: 1px solid #FFF;/*右の線の幅、線種、色*/
border-left: 1px solid #FFF;/*左の線の幅、線種、色*/
}




/*コンテンツ（main,subを囲むブロック）
---------------------------------------------------------------------------*/
#contents {
clear: left;
width: 960px;/*コンテンツ幅*/
background-color: #FFF;/*背景色*/
padding: 10px;/*コンテンツ内の余白*/
overflow: hidden;
}

/*トップページのスライドショー
---------------------------------------------------------------------------*/
#mainimg {
position: relative;
height: 270px;
width: 965px;
margin-bottom: 10px;
}
#mainimg img {
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
vertical-align: bottom;
}
#mainimg .slide_file {
display: none;
}
#slide_image {
z-Index:2;
position: absolute;
left:0px;
top:0px;
}
#slide_image2 {
z-Index:1;
position: absolute;
left:0px;
top:0px;
}



/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
float: left;/*左側に回り込み*/
width: 699px;/*メインコンテンツ幅*/
background-color: #ffffff;
padding-left: 7px;
}


/*mainコンテンツのsectionとarticleの直接の子要素のh1タグの設定*/
#main section > h1,
#main article > h1 {
background-color: #313131;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#313131));/*グラデーション*/
background-image: -webkit-linear-gradient(#494949, #313131);/*同上*/
background-image: linear-gradient(#494949, #313131);/*同上*/
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
font-size: 100%;
color: #E1D38B;/*文字色*/
padding: 3px 10px 3px 15px;/*左から、上、右、下、左側への余白*/
clear: both;
border-bottom: 4px solid #005923;/*下部の線の幅、線種、色*/
}
#main h1 img {
vertical-align: middle;
}

/*mainコンテンツのsectionとarticleの直接の子要素のh2タグの設定*/
#main section > h2,
#main article > h2 {
background-color: #313131;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#494949), to(#313131));/*グラデーション*/
background-image: -webkit-linear-gradient(#494949, #313131);/*同上*/
background-image: linear-gradient(#494949, #313131);/*同上*/
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
font-size: 100%;
color: #E1D38B;/*文字色*/
padding: 3px 10px 3px 15px;/*左から、上、右、下、左側への余白*/
clear: both;
border-bottom: 4px solid #005923;/*下部の線の幅、線種、色*/
}
#main h2 img {
vertical-align: middle;
}





/*mainコンテンツの段落タグ設定*/
#main p {
padding: 0.5em 10px 1em;/*左から、上、左右、下への余白*/
}
#main > p {
background-color: #FFF;
}

/*サブコンテンツ
---------------------------------------------------------------------------*/
html{
height: 100%;
}

body{
height: 100%;
}


#sub {
float: right;/*右側に回り込み*/
width: 240px;/*サブコンテンツ幅*/
background-color: #ffffff;
margin: 0 auto;
padding: 0px 0px;

height: 100%;
min-height: 100%;
}

body > #sub{
height: auto;
}

/*subコンテンツ内のh1タグ設定*/
#sub h1 {
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 6px 6px 0 0;/*角丸のサイズ。それぞれ左上、右上、右下、左下への設定*/
font-size: 100%;
text-align: center;/*文字をセンタリング*/
padding: 5px 0px;/*左から、上下、左右への余白*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
}
#sub h3 {
width: 238px;
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 6px 6px 0 0;/*角丸のサイズ。それぞれ左上、右上、右下、左下への設定*/
font-size: 100%;
text-align: center;/*文字をセンタリング*/
padding: 5px 0px;/*左から、上下、左右への余白*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
}

/*subコンテンツの段落タグ設定*/
#sub p {
padding-right: 10px;
padding-left: 10px;
}

/*サブコンテンツ内のメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
#sub ul {
margin-bottom: 1em;
width: 240px;
}
/*メニュー１個ごとの設定*/
#sub ul li a {

text-decoration: none;
display: block;
border-right: 1px solid #999;/*右側の線の幅、線種、色*/
border-bottom: 1px solid #999;/*下側の線の幅、線種、色*/
border-left: 1px solid #999;/*左側の線の幅、線種、色*/
padding-left: 10px;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*同上*/
background-color: #313131;/*背景色*/
color: #FFFFFF;/*文字色*/
}
/*マウスオン時の設定*/
#sub ul li a:hover {
background-color: #000;/*背景色*/
color: #FFF;/*文字色*/
width: 96%;
}

/*サブコンテンツ用　車ボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
#sub article.box1 {
font-size: 11px;/*文字サイズ*/
width: 249px;/*ボックスの幅*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e3e3e3));/*グラデーション*/
background-image: -webkit-linear-gradient(#FFF, #e3e3e3);/*同上*/
background-image: linear-gradient(#FFF, #e3e3e3);/*同上*/
border-bottom: 1px solid #999;/*下の線の幅、線種、色*/
border-right: 1px solid #999;/*右の線の幅、線種、色*/
border-left: 1px solid #999;/*左の線の幅、線種、色*/
line-height: 1.6;/*行間*/
position: relative;
overflow: hidden;
}
#sub article.box1 a {
padding: 5px;/*ボックス内の余白*/
text-decoration: none;
display: block;
overflow: hidden;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
#sub article.box1 a:hover {
background-color: #ffea99;/*マウスオン時のボックス色*/
}
/*h1見出しタグ*/
#sub article.box1 h1 {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
border: none;
text-align: left;
padding: 0;
background: none;
color: #00471c;
}
#sub article.box1 h4 {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
border: none;
text-align: left;
padding: 0;
background: none;
color: #00471c;
}

/*p段落タグ*/
#sub article.box1 p {
margin-left: 90px;/*左の画像とバランスをとって設定する*/
padding: 0px;
}
/*サムネイル画像設定*/
#sub article.box1 figure {
float: left;/*左に回り込みさせる設定*/
padding: 0px;
}
/*サムネイル画像のフチ*/
#sub article.box1 figure img {
border: 1px solid #999;/*枠線の幅、線種、色*/
vertical-align: bottom;
}

/*フッター設定
---------------------------------------------------------------------------*/
html {
overflow: auto;
}

footer {
background-color: #000;
clear: both;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;
}



footer .pr {
display: block;
font-size: 80%;
}
footer a {
text-decoration: none;
color: #FFF;
}


/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl{
overflow: auto;/*高さ指定を超えるとiframe風にスクロールが出る設定。全部表示させたいならこの行と下のheightの行を削除。*/
height: 400px;
padding-left: 10px;
}
/*日付設定*/
#new dt {
font-weight: bold;/*太字にする設定。標準がいいならこの行削除。*/
float: left;
width: 8em;
}
/*記事設定*/
#new dd {
border-bottom: 1px solid #d2d2d2;/*下線の幅、線種、色*/
padding-left: 8em;
}
#new dd img {
vertical-align: middle;
}

/*list.html内の中古車紹介の各ブロック
---------------------------------------------------------------------------*/
/*各ボックスの設定*/
#main section.list article {
border: 1px solid #999;/*枠線の幅、線種、色*/
margin-bottom: 1em;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e3e3e3));/*グラデーション*/
background-image: -webkit-linear-gradient(#FFF, #e3e3e3);/*同上*/
background-image: linear-gradient(#FFF, #e3e3e3);/*同上*/
-webkit-box-shadow: 0px 2px 5px #CCC, 0px 0px 1px 1px #FFF inset;/*影の設定。右・下・ぼかし幅・色の設定, ＋内側への影を右・下・ぼかし幅・色を設定*/
box-shadow: 0px 2px 5px #CCC, 0px 0px 1px 1px #FFF inset;/*同上*/
position: relative;
overflow: hidden;
}
/*ボックス内の段落タグ設定*/
#main section.list article p {
padding: 0px;
margin-left: 220px;/*左の写真とのバランスをとって設定*/
}
/*ボックス内の写真設定*/
#main section.list article figure img {
float: left;/*画像を左へ回り込み*/
background-color: #FFF;/*画像の背景色。ここでは枠線と画像の間の色になります。*/
padding: 5px;/*余白。ここに上の行で設定した背景色が出ます。*/
border: 1px solid #CCC;/*枠線の幅、線種、色*/
vertical-align: bottom;
}
/*ボックス内のh1タグ設定*/
#main section.list article h2 {
font-size: 100%;
border-left: 3px solid #007d31;/*左側の線の幅、線種、色*/
margin-bottom: 0.5em;
color: #000;/*文字色*/
padding-left: 5px;
background-color: #00471c;/*背景色*/
color: #E1D38B;
}
/*リンクの設定*/
#main section.list article a {
padding: 10px;/*ボックス内の余白*/
text-decoration: none;
display: block;
overflow: hidden;
-webkit-transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
transition: 0.5s;/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
#main section.list article a:hover {
background-color: #ffea99;/*マウスオン時のボックス色*/
}

/*テーブル１
---------------------------------------------------------------------------*/
.ta1 {
width: 100%;
}
.ta1, .ta1 td, .ta1 th{
border: 1px solid #999;/*テーブルの枠線の幅、線種、色*/
line-height: 2;
}
/*テーブル内の右側*/
.ta1 td{
width: 457px;
padding: 10px;
}
/*テーブル内の左側の見出し部分*/
.ta1 th{
width: 200px;
padding: 10px;
text-align: center;
background-color: #e2e2e2;/*背景色*/
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi{
width: auto;
text-align: left;
background-color: #e2e2e2;/*背景色*/
}
/*テーブルのキャプション設定*/
.ta1 caption{


padding: 3px;
border-top: 1px solid #999;/*上側の線の幅、線種、色*/
border-right: 1px solid #999;/*右側の線の幅、線種、色*/
border-left: 3px solid #007d31;/*左側の線の幅、線種、色*/
text-align: left;
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
font-weight: bold;


}
/*submitボタンの設定*/
input[type="submit"] {
width: 250px;/*ボタン幅*/
padding: 10px;/*ボタン内の余白*/
margin-bottom: 20px;
border: 1px solid #999;/*枠線の幅、線種、色*/
border-radius: 30px;/*角丸のサイズ*/
background-color: #00471c;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#007d31), to(#00471c));/*グラデーション*/
background-image: -webkit-linear-gradient(#007d31, #00471c);/*同上*/
background-image: linear-gradient(#007d31, #00471c);/*同上*/
color: #E1D38B;
-webkit-box-shadow: 0px 2px 5px #bebebe;/*影の設定。それぞれ右へ、下へ、ぼかし幅、色の設定。*/
box-shadow: 0px 2px 5px #bebebe;/*同上*/
font-size: 14px;/*文字サイズ*/
}
/*submitボタンのマウスオン時の設定*/
input[type="submit"]:hover {
background-color: #007d31;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#00471c), to(#007d31));/*グラデーション*/
background-image: -webkit-linear-gradient(#00471c, #007d31);/*同上*/
background-image: linear-gradient(#00471c, #007d31);/*同上*/
color: #E1D38B;
}
/*こだわりアイコンのフロート指定(CMS用)*/
.ta1 td .specialbox {
float: left;
width: 200px;
height: 40px;

}

/*FAQページの設定
---------------------------------------------------------------------------*/
/*FAQブロック全体*/
dl.faq {
padding-right: 10px;
padding-left: 10px;
}
/*質問ブロック*/
dl.faq dt {
padding-left: 20px;
font-weight: bold;/*文字を太字にする設定*/
color: #F00;/*文字色*/
background-image: url(../images/faq_q.png);/*背景画像の読み込み*/
background-repeat: no-repeat;/*背景画像をリピートしない*/
background-position: left 3px;/*背景画像を左側、3pxの場所に配置*/
}
/*回答ブロック*/
dl.faq dd {
padding-left: 20px;
background-image: url(../images/faq_a.png);/*背景画像の読み込み*/
background-repeat: no-repeat;/*背景画像をリピートしない*/
background-position: left 3px;/*背景画像を左側、3pxの場所に配置*/
}

/*その他
---------------------------------------------------------------------------*/
.look {
background: #dcdcdc;
}
.mb1em {
margin-bottom: 1em;
}
.clear {
clear: both;
}
ul.disc {
padding: 0em 25px 1em;
list-style: disc;
}
.color1 {
color: #F00;
}
.pr {
font-size: 10px;
}
.btn {
font-size: 13px;
}
.wl {
width: 96%;
}
.ws {
width: 50%;
}
.c {
text-align: center;
}
figcaption {
font-size: 11px;
}
.sortbox {
text-align: right;
margin-bottom: 1em;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
padding: 10px;
background: #e5e5e5;
}
.big1 {
font-size: 130%;
}
/*list.html内のおすすめ表示*/
.osusume {
font-size: 10px;
color: #FFF;
background: #F00;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}
/*list.html内SOLD OUT表示*/
.sumi {
font-size: 10px;
color: #FFF;
background: #069;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}
.end {
font-size: 10px;
color: #FFF;
background: #e6a52c;
text-align: center;
display: block;
width: 120px;
position: absolute;
right: 0px;
bottom: 0px;
-webkit-transform: rotate(-45deg) translate(37px,20px);
-ms-transform: rotate(-45deg) translate(37px,20px);
transform: rotate(-45deg) translate(37px,20px);
}



.snsb {
overflow: hidden;
}
.snsb ul {
margin-left: -50px;
}
.snsb li {
display:inline-block;
margin-right: 0px;
}
.snsb iframe {
margin: 0 !important;
}

.sn {
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;

}
.sn ul {
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFF;
}
.sn li {
text-align: center;
display: inline-block;
margin-right: 0px;
color: #FFF;
}
.sn li a {
color: #fff;
text-decoration: none;
}
.sn iframe {
margin: 0 !important;
}



.post-meta .post-date,
.post-meta .category{
padding-right: 1em;
}

.navigation{
overflow: hidden;
margin-bottom: 40px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background: url(images/gray.gif) repeat-y 50% 0;
}
.navigation > div{
width: 50%;
}

.navigation .alignright{
text-align: right;
}

.navigation a{
display: block;
padding: 1em;
border: none;
}
.navigation a:hover{
background: #cddbb6;
color: #000;
}
.navigation .alignright a:hover{
border-left: 1px solid #ddd;
}
.alignleft {
float: left;
}

.alignright {
float: right;
}

.nav-single{
overflow: hidden;
margin-bottom: 40px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

.nav-single > div{
width: 50%;
}

.nav-single a{
display: block;
padding: 1em;
border: none;
}

.nav-single a:hover{
background: #cddbb6;
color: #000;

}

.nav-previous{
float: left;
}

.nav-next{
float: right;
}



#cat{
padding: 0px;
font-size: 14px;
font-weight : bold;
color: #00471C;


}
#cat option[value="0"]{
background: #f9fbf3;
}
#cat option[value="1"]{
background: #f9fbf3;
}
#cat option[value="2"]{
background: #f9fbf3;
}
#cat option[value="3"]{
background: #f9fbf3;
}
#cat option[value="4"]{
background: #f9fbf3;
}
#cat option[value="5"]{
background: #f9fbf3;
}
#cat option[value="6"]{
background: #f9fbf3;
}
#cat option[value="7"]{
background: #f9fbf3;
}
#cat option[value="8"]{
background: #f9fbf3;
}
#cat option[value="9"]{
background: #f9fbf3;
}
#cat option[value="10"]{
background: #f9fbf3;
}
#cat option[value="11"]{
background: #f9fbf3;
}
#cat option[value="12"]{
background: #f9fbf3;
}
#cat option[value="13"]{
background: #f9fbf3;
}




#cat option[value="14"]{
background: #ffffff;
}
#cat option[value="15"]{
background: #ffffff;
}
#cat option[value="16"]{
background: #ffffff;
}

#cat option[value="17"]{
background: #ffffff;
}

#cat option[value="18"]{
background: #ffffff;
}

#cat option[value="19"]{
background: #ffffff;
}





/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
clear: both;
}
#pagetop a {
color: #FFF;/*文字色*/
font-size: 10px;/*文字サイズ*/
background-color: #000000;/*背景色*/
text-decoration: none;
text-align: center;
width: 10em;/*ボックス幅*/
display: block;
float: right;
}
/*マウスオン時*/
#pagetop a:hover {
background-color: #333;
color: #FFF;
}


span.search-excerpt {
background-color: #efe098;
}



.alpha a:hover img {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=70)";
}


.g-page,
.g-page[style],
.g-page iframe[style],
.g-page span{
width: 100% !important;
}



}

さて、ついていけてますか？（－－？（待て）

マジです。本当にこれを書いたのです。トラック解体やりながら（←本職トラック解体業）
ですので、池間解体は動画とおりレスポンシブwebデザインを、きっちり仕上げてあるわけです。

他のデザインを無料でやれと言ったら拒否します。有料じゃないとやってられない、そのくらいのレベルです。

んで、スマホ対応なんですが、下記を参考。

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

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

@media only screen and (min-width:851px) {
}

上記のなかに順番よくソースコードを書いたら、たとえば

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

/*current（現在表示中のページのメニュー）*/
nav#menu ul li#current a { /*ここにはPC画面の表示入力*/
color: #000;/*文字色*/
width: 158px;
background-color: #FFFFFF;/*背景色（古いブラウザだとここの色のみが出ます）*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#FFFFFF));/*グラデーション*/
background-image: -webkit-linear-gradient(#e6e6e6, #FFFFFF);/*同上*/
background-image: linear-gradient(#e6e6e6, #FFFFFF);/*同上*/
border-top: 1px solid #FFF;/*上の線の幅、線種、色*/
border-right: 1px solid #FFF;/*右の線の幅、線種、色*/
border-left: 1px solid #FFF;/*左の線の幅、線種、色*/
}
nav#menu ul li#current a {　　　　　　　　　　　　/*ここにスマホ画面の入力*/
width: auto;
border-top: none;
border-right: none;
border-left: none;
}

}

というかんじで、「cssは後から書いたものが優先される」というシステムを利用して、一つ一つ書き直していくわけです。

この作業を、
「cssコーティング」と言います。たぶん、自作wordpress子テーマで一番難解な部分かと思われます。


・・・初心者にはついていけないと思います。中級者でも厳しいと思われます。
ですが、頑張ってください。

本日はここまでにしてお茶にします。お疲れ様です。
( ^^) _U~~