@charset "utf-8";

/*--- CSSのフォーマットファイル ----*/

/*--- body設定 ---*/
body {
	font-family: メイリオ,Meiryo UI,Verdana;
	font-size: 14px;
	background-color:#D0E8FF;
	background-image : url(./items/body-back.jpg);
}

/*--- 基本リンク文字色設定 ---*/
a 		{text-decoration:none;}
a:link		{color: #003366;}
a:visited	{color: #993333;}
a:hover		{color:red;text-decoration:underline;}

/*------ フロート設計  ------*/
/*--- 全体枠 900px幅 [#page] ---*/
#page {
	width: 80%;
	min-width: 1000px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	border: 1px solid #336699;
	padding:10px 0 0 0 ;
	background: #FFFFFF;
}

/*--- ヘッダー [#header] ---*/
#header {
	width: 78%;
	min-width: 880px;
	text-align: left;
	margin: 0;
	border: 0px;
	padding: 0 20px 0 20px;
}

#header a		{text-decoration: none;}
#header a:link		{text-decoration: none;}
#header a:visited	{text-decoration: none;}
#header a:hover		{text-decoration: none;}


/*--- リンクナビゲーション [#navi] ---*/
/*上部のメインメニューの設定*/
#navi{
	margin: 10px auto 10px auto;	
	padding: 0px;
	width: 98%;/*ページの幅いっぱいに設定*/
	height:29px;/*メインメニューの縦の幅*/
	position:relative;/*相対位置で指定する*/
	border-top: 1px solid #666666;
	border-right: 1px solid #666666;/*メニューバーを枠で囲む*/
	border-bottom: 1px solid #666666;
	background: linear-gradient(#f0f0f0,#e0e0e0);
}

#navi ul{
	margin: 0;
	padding: 0;
	list-style-type: none; /*文字の下線を消す*/
	font-size: 15px; /*メニューボタンの文字のサイズ*/
	line-height: 200%; /*メニューボタンの縦の幅*/
}

#navi li{
	float:left;
	width:16.55%;  /*メニューボタンの幅は調整すること*/
	text-align: center; /*メニューの文字をセンター合わせに指定*/
	margin:0;
	padding:0;
	border-left: 1px solid #666666;
}

#navi li.selected {
	color:#FFFFFF;
	background: #999966;
	float:left;
	width:16.55%;  /*メニューボタンの幅は調整すること*/
	text-align: center; /*メニューの文字をセンター合わせに指定*/
	margin:0;
	padding:0;
	border-left: 1px solid #666666;
}

/*メインメニューの文字の色を変化させる設定*/
#navi a{
	color:#000000;/*メニューボタンの文字の色*/
	text-decoration: none;/*メニューのリンク文字の下線を消す*/
	display:block;
}

#navi a:hover{
	background: #CCCCFF; /*メニューの文字がカーソルが来た時この色に変わる*/
	display: block;
}

/*--- メイン枠左側 650px [#main] ---*/
#main {
	width: 75%;
	float: left;
	text-align: left;
	margin: 0px;
	border: 0px;
	padding-top: 0px;
	padding-left: 1%;
	padding-right: 1%;
	padding-bottom: 0px;
	border-right: 1px solid #666666;
	background-color: #FFFFFF;
}

/*--- サブ枠右側 210px [#sub] ---*/
#sub {
	width: 20%;
	min-width: 210px;
	float: left;
	text-align: left;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	border: 0px solid #666666;
	padding-top: 0px;
	padding-left: 5px;
	padding-right: 10px;
	padding-bottom: 0px;
}

/*--- メイン画像 [#main-gra] ---*/
#main-gra {
	width: 100%;
	float: left;
	margin: 0 auto 10px auto;
	border: 0px;
	padding: 0px;
}

#main-gra img{
	border: 1px solid #666666;
}

/*--- メイン左側 430pxエリア [#main-left] ---*/
#main-left {
	width: 72%;
	min-width: 430px;
	float: left;
	margin: 0 0 10px 0;
	padding: 0;
	border: 0;
}

/*--- メイン右側 200pxエリア [#main-right] ---*/
#main-right {
	width: 20%;
	min-width: 200px;
	float: right;
	margin: 0 0 10px 0;
	border: 0;
	padding: 0;
	border: 0px solid #666666;
}

/*--- 幅430pxエリア [.float-640px] ---*/
.float-640px {
	width: 100%;
	min-width: 600px;
	float: left;
	text-align: center;
	margin: 0;
	padding: 0px;
	border: 1px solid #666666;
}

/*--- 幅430pxエリア [.float-430px] ---*/
.float-430px {
	width: 100%;
	min-width: 430px;
	float: left;
	text-align: left;
	margin: 0 0 10px 0;
	padding: 0px;
	border: 0px solid #666666;
}

/*--- 幅200pxフロートエリア [.float-200px] ---*/
.float-200px {
	width: 100%;
	min-width: 200px;
	float:left;
	margin: 0 0 10px 0;
	padding: 0px;
	border: 0px solid #666666;
}

/*------ トップページindex専用デザイン ------*/
/*--- コラム最新記事一覧リスト ---*/
table#column-list {
	font-size: 12px;
	padding: 0px;
	line-height: 5px;
}
/*--- 430枠全体ブルーウインドウ枠 ---*/
.float-430px table {
	width: 100%;
}

.float-430px table.blue-window {
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid #336699;
}

/*--- タイトルセル（青バック白文字） ---*/
.float-430px table.blue-window th {
	width: 100%;
	font-size: 14px;
	font-weight: normal;
	text-align: left;
	padding: 4px;
	background-color: #6E9AC6;
	color: #FFFFFF;
}

/*--- 情報内セル（余白3px） ---*/
.float-430px table.blue-window td {
	padding: 5px;
	font-size: 14px;
}

/*--- インフォビルドからのお知らせ リスト部 ---*/
.float-430px .blue-window ul {
	font-size: 14px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 4px;
	padding-bottom: 5px;
	list-style-image: url(items/arroe-blue.gif)
}

/*--- 一般道路情報 ウインドウ枠 ---*/
.float-200px table.blue-window {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid #336699;
	font-size: 12px;
}

/*--- 一般道路情報 タイトル（青バック白文字） ---*/
.float-200px table.blue-window th {
	width: 100%;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	padding-right: 0px;
	padding-bottom: 4px;
	background-color: #6E9AC6;
	color: #FFFFFF;
}

/*--- 一般道路情報 情報セル（余白3px） ---*/
.float-200px table.blue-window td {
	padding: 3px;
}

/*--- グレープレビューウインドウ（200px） ---*/
table.window {
	font-size: 12px;
	font-weight: normal;
	border-collapse: collapse;
	border-spacing: 0;
}

.window_top {
	width:200px;
	height: 16px;
	font-weight: normal;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	padding-right: 0px;
	padding-bottom: 4px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	border: 1px solid #666666;
	background-image : url(./items/gre-back.jpg);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-moz-border-top-right-radius: 4px;
	-moz-border-top-left-radius:: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-top-left-radius:: 4px;
	behavior: url(https://blog.infobuild.jp/css/ie-css3.htc); 
}

.window_middile {
	width:200px;
	text-align: left;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	border-left: 1px solid #999999;
	border-right: 1px solid #999999;
	background-color: #EAEAEA;
}

.window_bottom {
	width:200px;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	border-left: 1px solid #999999;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;
	background-color: #EAEAEA;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	-moz-border-bottom-right-radius: 4px;
	-moz-border-bottom-left-radius:: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius:: 4px;
	behavior: url(./ie-css3.htc); 
}

.window_bottom ol {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 4px;
	padding-bottom: 5px;
}

.window_bottom h3 {
	margin-top: 10px;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	color: #008080;
	font-weight: normal;
	font-size: 14px;
}

/*--- フッター [footer] ---*/
#footer {
	clear: both;	/*フロート解除*/
	width: 100%;
	height: 45px;
	text-align: center;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	border: 0px solid #666666;
	padding-top: 10px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	background-color: #C0C0C0;
}

/*------ コラム記事一覧 専用デザイン [column-**]------*/
/*--- メイン画像 [#column-gra] ---*/
#column-gra {
	width: 640px;
	height: 100px;
	margin: 0 auto 0 auto;
	border: 0;
	padding: 0;
	border: 0;
	background-image : url(https://blog.infobuild.jp/items/title-blog.jpg);
}

/*--- ページ送りエリア [.page-pre] ---*/
.page-prev {
	width: 350px;
	font-size: 12px;
	float: right;
	text-align: right;
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 3px;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	border: 0px solid #666666;
}

/*------ コラム個別記事 専用デザイン [column-**]------*/
/*--- 更新日時左側 200pxエリア [#column-date] ---*/
#column-date {
	width: 200px;
	float: left;
	color: #808000;
	margin: 10px 0 3px 0;
	padding: 0 0 0 10px;
	border: 0px solid #666666;
}

/*--- 右側 450pxエリア [.column-right] ---*/
.column-right {
	width: 400px;
	float: right;
	text-align: right;
	margin: 10px 0 3px 0;
	border: 0;
	padding: 0 20px 0 0;
	border: 0;
}

/*--- タイトル 600pxエリア [#colunm-title] ---*/
#column-title {
	width: 95%;
	min-width: 600px;
	height: 30px;
	clear : both;
	text-align: left;
	font-weight: 800;
	font-size: 22px;
	margin: 0;
	border: 0;
	padding: 15px 0 15px 20px;
	border-left: 20px solid #556b2f;
	border-bottom: 1px solid #556b2f;
	background: linear-gradient(#efffef,#d6ffd6);
}

/*--- 文章掲載エリア 600pxエリア [.colunm-text] ---*/
.column-text {
	width: 95%;
	min-width: 620px;
	clear : both;
	text-align: left;
	margin: 0;
	padding: 10px 15px 10px 15px;
	border: 0px solid #666666;
	font-size: 15px;
}

/*------ プロフィール専用デザイン [profile-**]------*/
/*--- メイン画像 [#profile-gra] ---*/
#profile-gra {
	width: 640px;
	height: 100px;
	margin: 0 0 10px 0;
	padding: 0;
	border: 0px solid #666666;
	background-image : url(https://blog.infobuild.jp/items/tilte-profile.jpg);
}

/*--- プロフィールテーブルデザイン [#profile-details] ---*/
table#profile-details {
	font-size: 13px;
	border-collapse: collapse;
	border-spacing: 0;
}

#profile-details th {
	font-weight: normal;
	width: 100px;
	text-align: left;
	color: #000080;
}

/*--- 愛車紹介画像 [.colt-gra] ---*/
.colt-gra {
	width: 95%;
	min-width: 640px;
	height: 60px;
	text-align: center;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	padding: 0;
	border: 0px solid #666666;
}

/*--- 愛車紹介スペック表テーブル [#colt-spec] ---*/
table#colt-spec {
	font-size: 13px;
	border-collapse: collapse;
	border: 1px solid #000000;
	border-spacing: 0;
	width: 630px;
}

#colt-spec th {
	font-weight: normal;
	width: 130px;
	padding: 3px;
	text-align: left;
	border: 1px solid #000000;
	background-color: #CCCCFF;
}

#colt-spec td {
	font-weight: normal;
	padding: 3px;
	text-align: left;
	border: 1px solid #000000;
	background-color: #FFFFCC;
}

/*--- 愛車紹介　詳細 [.colt-details] ---*/
table.colt-details {
	width: 640px;
	font-size: 13px;
	border-collapse: collapse;
	border-spacing: 0;
}

.colt-details td {
	padding: 3px;
}

/*--- 所持運転免許紹介画像 [#driverlicense-gra] ---*/
#driverlicense-gra {
	width: 95%;
	min-width: 640px;
	height: 100px;
	text-align: center;
	font-size: 15px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-bottom: 0px;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 0px;
	border-top: 0px solid #666666;
	border-left: 0px solid #666666;
	border-right: 0px solid #666666;
	border-bottom: 0px solid #666666;
}

/*--- 所持運転免許紹介 詳細テーブル [.driverlicense-details] ---*/
table.driverlicense-details {
	width: 95%;
	min-width: 640px;
	font-size: 15px;
	border-collapse: collapse;
	border: 1px solid #000000;
	margin-top: 10px;
	border-spacing: 0;
}

.driverlicense-details th {
	font-weight: normal;
	color: #FFFFFF;
	width: 120px;
	padding: 3px;
	text-align: left;
	border: 1px solid #000000;
	background-color: #336699;
}

.driverlicense-details td {
	font-weight: normal;
	padding: 3px;
	text-align: left;
	border: 1px solid #000000;
	background-color: #ECFFEC;
}

/*--- 給油情報　総合一覧テーブル [#fule-total] ---*/
table#fuel-total {
	width: 95%;
	min-width: 640px;
	font-size: 13px;
	border: 2px solid #000000;
	border-collapse: collapse;
}

#fuel-total td {
	font-weight: normal;
	padding: 3px;
	border: 1px solid #000000;
}


/*--- 給油情報　総合一覧テーブル [#fule-list] ---*/
table#fuel-list {
	width: 95%;
	min-width: 640px;
	font-size: 15px;
	border: 1px solid #000000;
	border-collapse: collapse;
	background-color: #E1E1FF;
}

#fuel-list th {
	font-weight: normal;
	color: #FFFFFF;
	padding: 3px;
	border: 1px solid #000000;
	background-color: #669999;
}

#fuel-list td {
	font-weight: normal;
	padding: 3px;
	border: 1px solid #000000;
	background-color: #FFFFCC;
}


/* -- ページ送りデザイン [.page] --*/
.page {
	font-family: "Meiryo UI";
	display: inline-block;
	padding: 10px 16px;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 1px;
	border: solid 1px #c0c0c0;
	background: #e9e9e9;
	box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
	font-size: <?=$font_size?>;
	text-decoration: none;
	color: #717171;
	text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}

.page:hover {
	background: #fefefe;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
	background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}

.page.active {
	border: none;
	background: #616161;
	box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
	color: #f0f0f0;
	text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

.page.passive {
	border: none;
	background: #fefefe;
	box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
	color: #ffffff;
	text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

/* -- 送信ボタン [.button] --*/
.button {
	font-size: 15px;
	font-family :"Meiryo UI","メイリオ","Verdana";
	width: 50px;
	height: 32px;
	padding: 3px;
	border : 1px solid #6C6C6C;
	border-radius: 0.2em;
	background: linear-gradient(#F7F7F7, #DFDFDF);
}

.button5 {
	font-size: 15px;
	font-family :"Meiryo UI","メイリオ","Verdana";
	height: 40px;
	width: 80px;
	padding: 3px;
	border : 1px solid #6C6C6C;
	border-radius: 0.2em;
	background: linear-gradient(#F7F7F7, #DFDFDF);
}

.button_userfile {
	font-size: 15px;
	font-family :"Meiryo UI","メイリオ","Verdana";
	width: 350px;
	padding: 3px;
}