@charset "Shift_JIS";

* {
   font-family:"Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"ヒラギノ角ゴ Pro W3","メイリオ", Meiryo,"MS P ゴシック",verdana,sans-serif;
   color:#4C4C4C;
}

/* --- 全体の背景・テキスト --- */
body {
margin: 0;
padding: 0;
background-color: #ffffff; /* ページの背景色 */
background:url(images/bg_body.gif) 0 0 repeat-y;
background-position:center;
color: #000000; /* 全体の文字色 */
font-size: 100%; /* 全体の文字サイズ */
}

br {
   letter-spacing:normal;
}

a {
   color:#333;
   text-decoration:none;
}

a:hover {
   color:#FF0000;
}

img {
   border:0;
   vertical-align:bottom;
}

h1,h2,h3,h4,h5,h6 {
   margin:0;
}

hr {
		 display:none;
		 overflow:hidden;
		 line-height:0; 
}

.cleaner {
		 clear: both;
		 font-size: 0;
		 line-height: 0;
}


/* --- コンテナ --- */
#container {
width: 820px; /* ページの幅 */
margin: 0 auto; /* センタリング */
background-color: #ffffff; /* メインカラムの背景色 */
border-left: 1px #F5F5F5 solid; /* 左の境界線 */
border-right: 3px #F5F5F5 solid; /* 右の境界線 */
}

/* --- ヘッダ --- */

div#headWrap {
   position:relative;
   width:100%;
   margin:0 auto;
   padding:0px 0px 0px 0px;
   background:#fff;
}

div#header {
   position:relative;
   width:820px;
   height:180px;
   margin:0 auto;
   background:#fff url(images/top.jpg) 0 0px no-repeat;
}

div#header h1 {
   margin:0;
   padding:50px 0px 0px 20px;
   font-size:2em;
   color:#fff;
   line-height:50px;
}

div#header h1 a {
   color:#9B0000;
}

div#header h1 a:hover {
   color:#D30000;
}



/* ========コンテンツレイアウト======== */


/* --- メインカラム --- */

#content {
width: 820px; /* メインカラムの幅 */
}




/* --- コンテンツエリア --- */

div#cont {
   float:right;
   width:810px;
   padding:8px 10px 0px 11px;
}

div#cont a {
   color:#0000FF;
}

div#cont a:hover {
   color:#9B0000;
}

div#cont p{
   margin:0 0 1em 0;
   font-size:0.88em;
	  line-height : 150%;
   padding:10px 20px 0px 6px;
}





/* ========２段組コンテンツ======== */

div#main {
   float:right;
   width:620px;
   padding:0px 0px 0px 0px;
}

div#main a {
   color:#0000FF;
}

div#main a:hover {
			color:#FF0000;
}

div#main h2 {
   margin-top:5px;
   margin-bottom:15px;
   padding:2px 0 0 35px;
   color:#000;
   font-size:0.93em;
   font-weight:bold;
   line-height:28px;
   border:1px solid #D8D8D8;
   background:url(images/bg_h2.gif) 0 0 no-repeat;
}


div#main h3 {
   margin:0 0 0 0;
   padding:12px 0px 0px 6px;
   font-size:0.88em;
   font-weight:bold;
			color:#6F0000;
	  line-height : 170%;
   background:url(images/bg_dotline.gif) 0 100% repeat-x;
}


div#main p{
   margin:0 0 0em 0;
   padding:8px 0px 0px 15px;
   font-size:0.88em;
	  line-height : 140%;
}


div#main ul{
   font-size:0.88em;
   padding:0px;
	  line-height : 150%;
}



/* --- サイドコンテンツ --- */


div#sub {
   float:left;
   width:180px;
   padding:0px 0px 0px 7px;
}


/* --- ボックス --- */
div.box {
				width: 170px; /* ボックスの幅 */
				background-color: #FFFFEE; /* ボックスの背景色 */
				border: 1px #c0c0c0 solid; /* ボックスの境界線 */
				font-size: 14px; /* ボックスの文字サイズ */
				}

/* --- 見出し --- */
div.box h3 {
				font-size:1em;
				font-weight:bold;
				color:#fff;
	  line-height : 150%;
				padding:8px 3px 5px 8px;
				background-color: #000; /* 見出しの背景色 */
				border-bottom: 1px #c0c0c0 solid; /* 見出しの下境界線 */
				}

/* --- ボックス内の段落 --- */
div.box p {
				margin: 0 10px; /* 段落のマージン（上下、左右） */
				}


/* --- ボックス�A --- */
div.box2 {
				width: 170px; /* ボックスの幅 */
				background-color: #FFFFEE; /* ボックスの背景色 */
				border: 1px #c0c0c0 solid; /* ボックスの境界線 */
				font-size: 14px; /* ボックスの文字サイズ */
				}

/* --- 見出し�A --- */
div.box2 h3 {
				font-size:0.88em;
				font-weight:bold;
				color:#fff;
				padding:8px 3px 5px 8px;
				background-color: #045A7B; /* 見出しの背景色 */
				border-bottom: 1px #c0c0c0 solid; /* 見出しの下境界線 */
				}

/* --- ボックス�A内の段落 --- */
div.box2 p {
				margin: 0 10px; /* 段落のマージン（上下、左右） */
				}



/* ========モバイルフレンドリー用メニュー======== */

@media (min-width: 480px) {

  /* サイドバーを消す*/
  #navi{
    display: none;
  }


/* --- モバイルメニューエリア --- */

#navi {
width: 99%; /* エリアの幅 */
margin: 0px; 
}



/* ========会社案内======== */


/* --- 沿革情報エリア --- */

#update {
width: 580px; /* 新着情報エリアの幅 */
font-size: 0.85em;
padding: 9px 20px 7px;
padding-bottom: 12px; /* ボックスの下パディング */
margin-right: 0px; /* メインカラムの右マージン（サイドバーの幅以上） */
}

/* --- 見出し --- */
#update h3 {
margin: 0 0 5px; /* 見出しのマージン（上、左右、下） */
font-size: 100%;
}

/* --- 沿革リスト --- */
#update dl {
width: 100%; /* 新着リストの幅 */
height: 100%; /* 新着リストの高さ */
margin: 0;
padding: 0px; /* ボックス内パディング */
background-color: #fff; /* 新着リストの背景色 */
border-top: 1px #000080 dotted; /* 新着リストの上境界線 */
border-bottom: 1px #000080 dotted; /* 新着リストの下境界線 */
}

/* --- 日付エリア --- */
#update dt {
width: 11.5em; /* 日付エリアの幅 */
float: left;
padding: 17px 0px 16px 3px; /* 日付エリアのパディング（上右下左） */
line-height: 150%;
}

/* --- 本文エリア --- */
#update dd {
margin: 0;
padding: 17px 3px 16px 9.6em; /* 本文エリアのパディング（上右下左） */
border-bottom: 1px #000080 dotted; /* 本文エリアの下境界線 */
line-height: 150%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}



/* ========地図アクセス======== */


/* --- 沿革情報エリア --- */

#update-m {
width: 580px; /* 新着情報エリアの幅 */
font-size: 0.85em;
padding: 9px 20px 7px;
padding-bottom: 12px; /* ボックスの下パディング */
margin-right: 0px; /* メインカラムの右マージン（サイドバーの幅以上） */
}

/* --- 見出し --- */
#update-m h3 {
margin: 0 0 5px; /* 見出しのマージン（上、左右、下） */
font-size: 100%;
}

/* --- 沿革リスト --- */
#update-m dl {
width: 100%; /* 新着リストの幅 */
height: 100%; /* 新着リストの高さ */
margin: 0;
padding: 0px; /* ボックス内パディング */
background-color: #fff; /* 新着リストの背景色 */
border-top: 1px #000080 dotted; /* 新着リストの上境界線 */
border-bottom: 1px #000080 dotted; /* 新着リストの下境界線 */
}

/* --- 日付エリア --- */
#update-m dt {
width: 7.5em; /* 日付エリアの幅 */
float: left;
padding: 17px 0px 16px 3px; /* 日付エリアのパディング（上右下左） */
line-height: 150%;
}

/* --- 本文エリア --- */
#update-m dd {
margin: 0;
padding: 17px 3px 16px 9.6em; /* 本文エリアのパディング（上右下左） */
border-bottom: 1px #000080 dotted; /* 本文エリアの下境界線 */
line-height: 150%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}




/* ========メールフォーム======== */


/* --- フォームエリア --- */
form.contact {
width: 600px; /* フォームエリアの幅 */
font-size: 80%;
padding:0px 0px 0px 12px;
}
/* --- フォームエリア内の段落 --- */
form.contact p {
line-height: 130%;
}
/* --- 段落内の「必須」画像 --- */
form.contact p.attention img {
vertical-align: middle;
}

/* --- テーブル --- */
form.contact table {
width: 100%; /* テーブルの幅 */
background-color: #f9f9f9; /* テーブルの背景色 */
border: 1px #c0c0c0 solid; /* テーブルの境界線 */
}
/* --- 見出しセル（th） --- */
form.contact th {
width: 160px; /* 見出しセルの幅 */
padding: 10px 8px; /* 見出しセルのパディング（上下、左右） */
background-color: #f5f5f5; /* 見出しセルの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* 見出しセルの下境界線 */
text-align: left;
line-height: 130%;
}
/* --- 見出しセル内の補足テキスト --- */
form.contact th span.supplement {
font-weight: normal;
}
/* --- データセル（td） --- */
form.contact td {
padding: 10px 5px 7px; /* データセルのパディング（上、左右、下） */
background-color: #ffffff; /* データセルの背景色 */
border-bottom: 1px #c0c0c0 dotted; /* データセルの下境界線 */
}
/* --- データセル内の補足テキスト --- */
form.contact td span.supplement {
color: #808080;
}

form.contact td span.supplement2 {
color: #FF0000;
}

/* --- 必須項目セル --- */
form.contact td.required {
width: 35px; /* 必須項目セルの幅 */
padding: 10px 3px; /* 必須項目セルのパディング（上下、左右） */
background-color: #c4e6fa; /* 必須項目セルの背景色 */
text-align: center;
}
/* --- 任意項目セル --- */
form.contact td.arbitrary {
background-color: #e0f1fc; /* 任意項目セルの背景色 */
}

/* --- フォーム部品 --- */
form.contact input,
form.contact select,
form.contact textarea {
margin-bottom: 2px; /* フォーム部品の下マージン */
}
/* --- フォーム部品のサイズ --- */
/* --- （長めのテキスト入力欄） --- */
#company, #section, #name, #name1,
#email,#address {
width: 300px; /* フォーム部品の幅 */
}
/* --- （中めのテキスト入力欄） --- */
#tel,#fax1 {
width: 180px; /* フォーム部品の幅 */
}
/* --- （短めのテキスト入力欄） --- */
#zip1, {
width: 80px; /* フォーム部品の幅 */
}
/* --- （複数行のテキスト入力欄） --- */
#message {
width: 350px; /* フォーム部品の幅 */
height: 10em; /* フォーム部品の高さ */
}

/* --- ボタン --- */
form.contact p.button {
margin: 20px 0 0; /* ボタンのマージン（上、左右、下） */
text-align: center;
}




/* ========業務案内======== */


/* --- 業務リストエリア --- */

ul.staff {
width: 640px; /* リストエリアの幅 */
margin: 0;
padding: 0;
list-style-type: none;
}

/* --- リスト項目 --- */
ul.staff li {
padding: 20px 15px; /* リスト項目のパディング（上下、左右） */
border-bottom: 1px #808080 dotted; /* リスト項目の下境界線 */
}

/* --- 項目内容 --- */
ul.staff dl {
width: 100%;
margin: 0;
font-size: 90%;
}

/* --- 写真エリア --- */
ul.staff dt {
width: 180px; /* 写真エリアの幅 */
float: left;
}
ul.staff dt img {
border: 0px #808080 solid; /* 写真の境界線 */
}

/* --- キャプションエリア --- */
ul.staff dd {
margin: 0 0 0 0px; /* キャプションエリアのマージン（上右下左） */
line-height: 150%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}


/* ========写真ギャラリーレイアウト======== */

/* --- リストエリア --- */
ul.thumbnail {
width: 100%; /* リストエリアの幅 */
margin: 0px 3px 0;
padding: 0px 0 0; /* リストエリアのパディング（上、左右、下） */
list-style-type: none;
}

/* --- リスト項目 --- */
ul.thumbnail li {
width: 205px; /* 項目の幅 */
float: left;
}

/* --- 項目内容 --- */
ul.thumbnail dl {
width: 198px; /* 内容の幅 */
margin: 0 auto; /* 内容のセンタリング */
font-size: 13px;
}

/* --- 写真エリア --- */
ul.thumbnail dt {
/* height: 100px; */ /* 写真エリアの高さ（dt要素の高さを指定する場合） */
margin-bottom: 6px; /* 写真エリアの下マージン */
}
ul.thumbnail dt img {
border: 0px #808080 solid; /* 写真の境界線 */
}

/* --- キャプションエリア --- */
ul.thumbnail dd {
margin: 0 0 0px; /* キャプションエリアのマージン（上、左右、下） */
height: 0px; /* キャプションエリアの高さ */
line-height: 140%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}




/* ========フッタ======== */

div#footer {
			clear: right; /* フロートのクリア */
			width: 100%;
			background-color: #fff; /* フッタの背景色 */
   border-top:1px solid #045A7B;
   border-bottom:5px solid #045A7B;
}

address{
   padding:30px 0px 5px 0px;
   font-size:0.75em;
   color:#333;
   text-align:center;
}

div#footMenu {
   width:820px;
   margin:0 auto;
}

div#footMenu ul {
   margin:0;
   padding:12px 8px 0 10px;
   text-align:right;
}

div#footMenu li {
   display:inline;
   margin:0 0 0 10px;
   font-size:0.75em;
   list-style:none;
}

div#footMenu li a {
   padding-left:10px;
   background: url(images/bg_footmenu.gif) 0 50% no-repeat;
}



/* ========tableＣＳＳ======== */

/* --- 表全体 --- */
table.example {
width: 580px; /* 表の幅 */
margin-bottom: 0px; /* 表の下マージン */
border: 1px #c0c0c0 solid; /* 大枠の境界線 */
border-collapse: collapse;
font-size: 90%;
}

/* --- 表タイトル --- */
table.example caption {
padding-bottom: 5px; /* 表タイトルの下パディング */
font-size: 14px;
font-weight:bold;
color:#000094;
text-align: left;
}

/* --- セル --- */
table.example th,
table.example td {
padding: 6px 8px; /* セルのパディング（上下、左右） */
border: 1px #c0c0c0 solid; /* セルの境界線 */
}

/* --- 見出しセル --- */
table.example thead th {
background-color: #deefff; /* 見出しセルの背景色 */
text-align: center;
}

/* --- フッタセル --- */
table.example tfoot td {
background-color: #f5f5f5; /* フッタセルの背景色 */
}

/* --- データセル --- */
table.example tbody td {
background-color: #ffffff; /* データセルの背景色 */
}



/* ========２行記載======== */


/* --- 沿革情報エリア --- */

#update2 {
width: 450px; /* 新着情報エリアの幅 */
font-size: 14px;
padding: 9px 20px 7px;
padding-bottom: 3px; /* ボックスの下パディング */
margin-right: 0px; /* メインカラムの右マージン（サイドバーの幅以上） */
}

/* --- 見出し --- */
#update2 h3 {
margin: 0 0 5px; /* 見出しのマージン（上、左右、下） */
font-size: 100%;
}

/* --- 沿革リスト --- */
#update2 dl {
width: 100%; /* 新着リストの幅 */
height: 100%; /* 新着リストの高さ */
margin: 0;
padding: 0px; /* ボックス内パディング */
background-color: #fff; /* 新着リストの背景色 */
border-top: 0px #000080 dotted; /* 新着リストの上境界線 */
border-bottom: 0px #000080 dotted; /* 新着リストの下境界線 */
}

/* --- 日付エリア --- */
#update2 dt {
width: 25%; /* エリアの幅 */
float: left;
padding: 3px 0px 3px 3px; /* 日付エリアのパディング（上右下左） */
line-height: 120%;
}

/* --- 本文エリア --- */
#update2 dd {
margin: 0;
padding: 3px 3px 3px 9.6em; /* 本文エリアのパディング（上右下左） */
border-bottom: 0px #000080 dotted; /* 本文エリアの下境界線 */
line-height: 120%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}


/* ========２行記載�A======== */


/* --- 沿革情報エリア --- */

#update3 {
width: 580px; /* 新着情報エリアの幅 */
font-size: 0.85em;
padding: 9px 20px 7px;
padding-bottom: 3px; /* ボックスの下パディング */
margin-right: 0px; /* メインカラムの右マージン（サイドバーの幅以上） */
}

/* --- 見出し --- */
#update3 h3 {
margin: 0 0 5px; /* 見出しのマージン（上、左右、下） */
font-size: 100%;
}

/* --- 沿革リスト --- */
#update3 dl {
width: 100%; /* 新着リストの幅 */
height: 100%; /* 新着リストの高さ */
margin: 0;
padding: 0px; /* ボックス内パディング */
background-color: #fff; /* 新着リストの背景色 */
border-top: 0px #000080 dotted; /* 新着リストの上境界線 */
border-bottom: 0px #000080 dotted; /* 新着リストの下境界線 */
}

/* --- 日付エリア --- */
#update3 dt {
width: 150px; /* 日付エリアの幅 */
float: left;
padding: 3px 0px 3px 3px; /* 日付エリアのパディング（上右下左） */
line-height: 120%;
}

/* --- 本文エリア --- */
#update3 dd {
margin: 0;
padding: 3px 3px 3px 9.6em; /* 本文エリアのパディング（上右下左） */
border-bottom: 0px #000080 dotted; /* 本文エリアの下境界線 */
line-height: 120%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}



/* ======== 手順流れ ======== */

/* --- リストエリア --- */
ol.flow {
width: 95%; /* エリアの幅 */
margin: 0;
padding: 9px 12px 7px;
list-style-type: none;
font-size: 95%;
}

/* --- リスト項目 --- */
ol.flow li {
margin-bottom: 12px; /* リスト項目の下マージン */
padding-bottom: 28px; /* リスト項目の下パディング */
background: url(images/flow_back.gif) no-repeat center bottom; /* リスト項目の背景 */
}
/* --- 最後のリスト項目 --- */
ol.flow li.last {
margin-bottom: 0;
padding-bottom: 0;
background-image: none;
}

/* --- ボックス --- */
ol.flow dl {
margin: 0;
border: 1px #c0c0c0 solid; /* ボックスの境界線 */
}

/* --- タイトルエリア --- */
ol.flow dt {
padding: 9px 10px 7px; /* タイトルエリアのパディング（上、左右、下） */
background-color: #f9f9f9; /* タイトルエリアの背景色 */
border-bottom: 1px #c0c0c0 solid; /* タイトルエリアの下境界線 */
font-weight: bold;
color: #999999;
}
/* --- タイトル --- */
ol.flow dt strong {
margin-left: 3px;
color: #2b2b2b;
}

/* --- 本文エリア --- */
ol.flow dd {
margin: 0;
padding: 15px 10px; /* 本文エリアのパディング（上下、左右） */
background-color: #ffffff; /* 本文エリアの背景色 */
color: #2b2b2b;
line-height: 150%;
}



/* ========丸数字のリスト======== */

ol.cc_list {
  counter-reset: my-counter;
  list-style: none;
		margin: 12px 12px 12px 20px;				/* （上右下左） */
		padding: 0px 0 0; /* リストエリアのパディング（上、左右、下） */
}
 
ol.cc_list li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
		font-size:0.95em;
}

ol.cc_list li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #bada55;
  color: #222;
  display: block;
  float: left;
  line-height: 22px;
  margin-left: -30px;
  text-align: center;
  height: 22px;
  width: 22px;
  border-radius: 50%;
}




/* ========新着情報データ======== */

/* --- 新着情報エリア --- */

div.update_new {
width: 620px; /* 新着情報エリアの幅 */
font-size: 13px;
padding-top: 6px; /* 上のパディング */
padding-bottom: 12px; /* 下パディング */
}

/* --- 新着リスト --- */
div.update_new dl {
width: 100%; /* 新着リストの幅 */
height: 80px; /* 新着リストの高さ */
overflow: auto;
margin: 0;
background-color: #FFFFF4; /* 新着リストの背景色 */
border-top: 1px #00557D dotted; /* 新着リストの上境界線 */
border-bottom: 1px #00557D dotted; /* 新着リストの下境界線 */
}

/* --- 日付エリア --- */
div.update_new dt {
width: 6.5em; /* 日付エリアの幅 */
float: left;
padding: 7px 0 6px 6px; /* 日付エリアのパディング（上右下左） */
line-height: 120%;
}

/* --- 本文エリア --- */
div.update_new dd {
margin: 0;
padding: 7px 6px 6px 6.6em; /* 本文エリアのパディング（上右下左） */
border-bottom: 1px #00557D dotted; /* 本文エリアの下境界線 */
line-height: 120%;
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}







/* ========その他ＣＳＳ======== */

.fun-button{ float:right; padding:0px 8px 0px 0px; vertical-align:middle; }


div#pan-url       { width:100%; display:block; overflow:hidden; margin:12px auto 0; }
div#pan-list      { float:left; margin:3px 0; }
div#pan-list  ul  { margin:0; padding:0; font-size:13px; }
div#pan-list  li  { 	display:inline; line-height:120%; list-style-type:none; }
div#pan-list  li a{ 	padding-right:10px; background:url(images/topicpath.gif) no-repeat right; }


.strong{ font-weight:bold; }
.white  { color : #ffffff ; }
.black  { color : #000000 ; }
.blue   { color : #000094 ; }
.green  { color : #008000 ; }
.red    { color : #FF0F0F; }	 

.text10 {font-size: 10px; line-height : 150% ; }
.text10w {font-size: 10px; line-height : 150% ; }
.text12 {font-size: 12px; line-height : 150% ; }
.text12w {font-size: 12px; line-height : 160% ; }
.text14 {font-size: 14px; line-height : 150% ; }
.text14w {font-size: 14px; line-height : 200% ; }
.text16 {font-size: 16px; line-height : 150% ; }
.text18 {font-size: 18px; line-height : 150% ; }
.text20 {font-size: 20px; line-height : 150% ; }
.text26 {font-size: 26px; line-height : 150% ; }
.text30 {font-size: 30px; line-height : 150% ; }

.float-left  { float:left; }
.float-center{ float:center; }
.float-right { float:right; }
.align-center { text-align:center; }
.align-left  { text-align:left; margin-left:10px ; }
.align-right  { text-align:right; margin-right:10px ; }


.padding-6px{ padding:6px; }
.padding6   { padding:6px; }
.padding12  { padding:12px; }
.padding16  { padding:16px; }
.padding20  { padding:20px; }
.padding30  { padding:30px; }
.padding-b6 { padding-bottom:6px; }
.padding-b12{ padding-bottom:12px; }
.padding-b20{ padding-bottom:20px; }
.padding-b30{ padding-bottom:30px; }
.padding-t6 { padding-top:6px; }
.padding-t12{ padding-top:12px; }
.padding-t20{ padding-top:20px; }
.padding-t30{ padding-top:30px; }
.margin6   { margin:6px; }
.margin12  { margin:12px; }
.margin20  { margin:20px; }
.margin30  { margin:30px; }
.margin-b6 { margin-bottom:6px; }
.margin-b12{ margin-bottom:12px; }
.margin-b20{ margin-bottom:20px; }
.margin-b30{ margin-bottom:30px; }
.margin-t6 { margin-top:6px; }
.margin-t12{ margin-top:12px; }
.margin-t20{ margin-top:20px; }
.margin-t30{ margin-top:30px; }