/*===============================================
 Bansbach (http://www.bansbach.jp/)
 style.css (need reset.css)
 Created by nagaishouten.com on 2011/11/20
================================================*/

/*-----------------------------------------------
　目次
 -----------------------------------------------
　[目次]
	・変数
		└色指定
		└レイアウト幅指定
	・画像のプリロード
	・サイト基本構成レイアウト
	・レイアウトパターン
		└メイン部のframed
		└メニュー
	・基本設定
	・ヘッダー
	・メインメニュー（グローバルナビゲーション）
	・メイン
	・サブ
	・サイトバー
		└メニュー
	・フッター
	・個別ページ
		└TOPページ
	・CSS HACK
-----------------------------------------------*/

#NOTES {content: 'This CSS is compiled by "LESS" (Original: http://www.bansbach.jp/css/style.less).';}

/*-------------------------------------------------*/
/* !変数 */
/*-------------------------------------------------*/
/* プロパティ部に埋め込んで使用。展開される */
 
/* 色指定 */
/*----------------------------------- */
@color_base: #000;/*基本[黒]*/
@color_0: #666;/*カラー0[グレー]*/
	@color_0b: #E7E7E7;/*カラー0（薄）*/

/*カラー１[青]*/
@color_1: #0045A4;
	@color_1b: #963;/*薄*/
/*カラー2[グリーン]*/
@color_2: #7C8A4F;
	@color_2b: #E9ECE3;/*薄*/
	@color_2c: #D2D5C5;/*中間*/
/*カラー3[ブルー]*/
@color_3: #6682CC;
	@color_3b: #ECF1F7;/*薄*/
	@color_3c: #D8E2EE;/*中間*/
/*カラー4（薄ベージュ）*/
@color_4: #D8D9CF;

@color_warning: #F00;/*警告色[赤]*/
@color_separator: #CCC;/*垂直区切り線[グレー]*/
@color_link: #06C;/*リンク（通常時）[青]*/
@color_link_over: #F30;/*リンク（オーバー時）[オレンジ]*/

/*一般テーブルのカラー*/
@color_table_line: #666;/*テーブルの線*/
@color_th_text: #333;/*thのテキスト*/
@color_th_link_text: #333;/*thのリンクテキスト*/
@color_th_bg: #CCC;/*thの背景*/
@color_td_text: #333;/*tdのテキスト*/
@color_td_bg: #FFF;/*tdの背景*/
@color_row_th_highlight_bg: #BBD;/*特定行の色付け th*/
@color_row_td_highlight_bg: #CCE;/*特定行の色付け td*/
@color_cell_th_highlight_bg: #BBD;/*特定セルの色付け th or td*/
@color_cell_td_highlight_bg: #CCE;/*特定セルの色付け th or td*/

/*レイアウト幅指定*/
/*----------------------------------- */
/*#containerの幅。100%指定で画面いっぱい*/
@width_container: 950px;

/*2カラム*/
@width_2col_wrapper: 950px;
@width_2col_wrapper_padding: 0;
@width_2col_main: 670px;
@width_2col_main_padding: 30px;
@width_2col_sidebar: 220px;
@width_2col_sidebar_padding: 0;

/*3カラム*/
@width_3col_wrapper: 960px;
@width_3col_wrapper_padding: 0;
@width_3col_contents: 750px;
@width_3col_main: 550px;
@width_3col_sub: 180px;
@width_3col_sidebar: 180px;

/*フォントサイズ*/
/*----------------------------------- */

/*yui
px	%
10	77
11	85
12	93
13	100
14	108
15	116
16	123.1
17	131
18	138.5
19	146.5
20	153.9
21	161.6
22	167
23	174
24	182
25	189
26	197
*/
/* 12pxを100%として算出 */
@font-size-10px: 83%;
@font-size-11px: 91.7%;
@font-size-12px: 100%;
@font-size-13px: 108.3%;
@font-size-14px: 116.7%;
@font-size-16px: 123.1%;
@font-size-18px: 133.3%;
@font-size-20px: 166.7%;
@font-size-24px: 200%;
@font-size-28px: 233%;

/* 13pxを100%として算出 */
/*
@font-size-10px: 77%;
@font-size-11px: 85%;
@font-size-12px: 93%;
@font-size-13px: 100%;
@font-size-14px: 108%;
@font-size-16px: 123.1%;
@font-size-18px: 138.5%;
@font-size-20px: 153.9%;
@font-size-24px: 182%;
*/



/*-------------------------------------------------*/
/* !Mixin（ミックスイン） - 共有プロパティ */
/*-------------------------------------------------*/

/* 【CSS3】角丸 */
/*----------------------------------- */
/* 括弧内の数値で半径を変えられる（括弧なしは、デフォルトの5pxになる） */
/* 使用例（#sampleを3pxの角丸に）：#sample { .rounded-corners(3px); } */
/*bahaviorは CSS3Pie用（※CSSからでなくHTMLからのパスを指定）*/
.rounded-corners (@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
	/*behavior: url(/js/PIE.htc);
	position: relative;*/
}

/* 【CSS3】半透明 */
/*----------------------------------- */
/* 括弧内の数値で透明度を変えられる（括弧なしは、デフォルトの50%になる） */
/* 使用例（#sampleの透明度を25%に）：#sample { .translucent(25); } */
.translucent (@transparency: 50){
	filter: alpha(opacity=@transparency);
	-ms-filter: "alpha(opacity=@transparenc)";
	-moz-opacity: @transparency * 0.01;
	-khtml-opacity: @transparency * 0.01;
	opacity: @transparency * 0.01;
}

/* 【CSS3】ボックスのドロップシャドウ、フチぼかし */
/*----------------------------------- */
/* 横Offset、縦Offset、ぼかし半径、色 */
/* Offsetなしで光彩（外側）の効果 */
/* box幅はOffset分拡がったと解釈されるので注意 */
.box-shadow (@x:0, @y:0, @width:3px, @color:@color_0){
	-moz-box-shadow: @x @y @width @color;
	-webkit-box-shadow: @x @y @width @color;
	box-shadow: @x @y @width @color;
	/*behavior: url(/js/PIE.htc);
	position: relative;*/
}

/* 【CSS3】アニメーション transition  */
/*----------------------------------- */
/* Safari, Chrome のみ対応 */
/* :hover などで事後の状態を指定 */
/* @ease:速度 linear（一定）,ease-in（遅→速）,ease-out（速→遅）,ease（遅→早→遅）
         　　 ease-in-out（遅→早→遅）,cubic-bezier()（ベジェ曲線で変化を指定） */
.transition (@range: all, @time: 1s, @ease: ease-in-out) {
	-moz-transition: @range @time @ease;
	-webkit-transition: @range @time @ease;
	-o-transition: @range @time @ease;
	transition: @range @time @ease;
}

/* リストマーカー */
/*----------------------------------- */
/*サイト独自のもの*/
/*
.listmarker_6a,.listmarker_6b,.listmarker_6c {
	padding-left: 12px;
	background: no-repeat left 0.4em;
}
	.listmarker_6a {background-image: url(../img/common/lm_XXXXXXa.png);}
	.listmarker_6b {background-image: url(../img/common/lm_XXXXXXb.png);}
	.listmarker_6c {background-image: url(../img/common/lm_XXXXXXc.png);}
*/
/*ドット*/
.listmarker_1a,.listmarker_1b,.listmarker_1c {
	padding-left: 12px;
	background: no-repeat left 0.4em;
}
	.listmarker_1a {background-image: url(../img/common/lm_dot_01a.png);}/*灰*/
	.listmarker_1b {background-image: url(../img/common/lm_dot_01b.png);}/**/
	.listmarker_1c {background-image: url(../img/common/lm_dot_01c.png);}/**/
/*矢印（三角・小）*/
.listmarker_2a,.listmarker_2b,.listmarker_2c {
	padding-left: 12px;
	background: no-repeat left 0.4em;
}
	.listmarker_2a {background-image: url(../img/common/lm_arrow_01a.png);}/*紫*/
	.listmarker_2b {background-image: url(../img/common/lm_arrow_01b.png);}/**/
	.listmarker_2c {background-image: url(../img/common/lm_arrow_01c.png);}/**/
/*四角の中に三角矢印*/
.listmarker_3a,.listmarker_3b,.listmarker_3c {
	padding-left: 12px;
	background: no-repeat left 0.7em;
}
	.listmarker_3a {background-image: url(../img/common/lm_arrow_02a.png);}/*灰*/
	.listmarker_3b {background-image: url(../img/common/lm_arrow_02b.png);}/*赤*/
	.listmarker_3c {background-image: url(../img/common/lm_arrow_02c.png);}/**/
/*丸の中に三角矢印*/
.listmarker_4a,.listmarker_4b,.listmarker_4c {
	padding-left: 16px;
	background: no-repeat left 0.2em;
}
	.listmarker_4a {background-image: url(../img/common/lm_arrow_03a.png);}/*ベージュ*/
	.listmarker_4b {background-image: url(../img/common/lm_arrow_03b.png);}/**/
	.listmarker_4c {background-image: url(../img/common/lm_arrow_03c.png);}/**/
/*丸の中に矢印*/
.listmarker_5a,.listmarker_5b,.listmarker_5c {
	padding-left: 16px;
	background: no-repeat left 0.3em;
}
	.listmarker_5a {background-image: url(../img/common/lm_arrow_04a.png);}/*橙赤*/
	.listmarker_5b {background-image: url(../img/common/lm_arrow_04a.png);}/*緑*/
	.listmarker_5c {background-image: url(../img/common/lm_arrow_04a.png);}/**/
/*チェック*/
.listmarker_check {
	padding-left: 16px;
	background: no-repeat left 0.3em;
	background-image: url(../img/common/lm_check_01a.png);
}
/*よくある質問（FAQ,Q&A）*/
.listmarker_faq_question,.listmarker_faq_answer {
	padding-left: 16px;
	background: no-repeat left 0.25em;
}
.listmarker_faq_question {
	background-image: url(../img/common/lm_faq_q.png);
}
.listmarker_faq_answer {
	background-image: url(../img/common/lm_faq_a.png);
}
/*警告*/
.listmarker_coution {
	padding-left: 16px;
	background: no-repeat left 0.3em;
	background-image: url(../img/common/ico_caution3.png);
}
	



/* レイアウトパターン */
/*----------------------------------- */
	
/* --- 水平横並びメニュー（テキスト）--- 
 ul要素のプロパティに .list-inline; を追加して使用 */
.list-inline {
	li {
	   float: left;
        display: inline;
	   a {
	   	display: block;
	   }
	}
}

/* --- 水平横並びメニュー（画像）★失敗、要調査 --- */
/* 水平画像メニューリストのベース 
 【注意】個別設定のCSS（下にサンプルあり）とセットで使用すること */
.list-inline-img {/*要clearfix*/
    zoom: 1;/*hasLayout: true;*/
    background: #000 no-repeat;/*使用先で、要背景画像パス指定*/
    li {
    	float: left;/*使用時、要width指定*/
    	display: inline;
    	a {
    		display: block;
    		&:hover {
    		   background-color: transparent;
    		   img {
    		   	visibility: hidden;/*オーバー時画像が消え、背景（オーバー時画像）を表示*/
    		   }
    		}
    	}
    }
}
/* 個別設定のサンプルCSS
ul背景にロールオーバー時のメニュー統合画像
ID付のliは幅を個別に指定する場合にのみ使用　*/
/*
#list-inline-img-sample {
	ul {
		background-image: url(); ← ロールオーバー時の画像（1枚に統合したもの）
		li {
			width: px; ← 幅が同じ場合のみ指定
			a { height: px; } ← いる？
		}
		li#aaa {width: px;} ← liの幅を個別に指定する場合のみ使用（以下同）
		li#bbb {width: px;}
		li#ccc {width: px;}
	}
}
*/

/* --- テキストが画像の下に回り込まないレイアウト（画像が右） --- */
.img-text-parallel {
    overflow: hidden;/*これらで文字が回り込まなくなる*/
    .text-area {
    	overflow: hidden;/*これらで文字が回り込まなくなる*/
    	img {
    		margin-bottom: 10px;
    	}
    }
    .img-area {
    	float: left;
    	margin-right: 20px;/*画像と文字の間隔*/
    }
}
* html .img-text-parallel,
* html .img-text-parallel .text-area {
    height: 1%;/*IE6対策*/
}

/* --- テキストが画像の下に回り込まないレイアウト（画像が左） --- */
.text-img-parallel {
    overflow: hidden;/*これらで文字が回り込まなくなる*/
    .text-area {
    	overflow: hidden;/*これらで文字が回り込まなくなる*/
    	img {
    		margin-bottom: 10px;
    	}
    }
    .img-area {
    	float: right;
    	margin-left: 20px;/*画像と文字の間隔*/
    }
}
* html .img-text-parallel,
* html .img-text-parallel .text-area {
    height: 1%;/*IE6対策*/
}


/* 枠記事（メインコンテンツ）★整理中 */
.framed-a, .framed-b, .framed-c, .framed-d {
	margin: 1.5em 10px;
    padding: 10px;
    h1 {
		font-weight: bold;
		margin-bottom: 0.5em;
		background: none !important;
		padding-left: 0 !important;
    }
	p:last-child,ul:last-child {
		margin-bottom: 0 !important;
	}
	ul {
	   margin: 0;
        li {.listmarker_1a;}
	}
	.col-horizontal .col {/*等幅段組（幅指定は等幅段組のCSS）*/
		h1 {
    	   color: #036;
		}
	}
}
.framed-a {
    border: 1px solid #AAA;
    .box-shadow (0,0,5px,#AAA);
}
.framed-b {
    border: 1px solid #CCC;
    .rounded-corners(7px);
}
.framed-c {
    background-color: #E7E7E7;
}

.framed-d {
    background-color: #ffff99;
    h1 {
    	color: #F00;
    }
}

/*p要素の上下開けないの*/
.no-margin {
	h1 {
		margin: 0 0 0.5em !important;
		img {margin: 0 !important;}
	}
	p {margin: 0 !important;}
}


/*-------------------------------------------------*/
/* !レイアウトパターン */
/*-------------------------------------------------*/

/* !- ページの枠記事 */
/*----------------------------------- */
/*#wrapper、#contents を clearfixすること*/

/*---２カラム---*/
/*共通*/
#wrapper.r-sm,
#wrapper.r-ms {
	width: @width_2col_wrapper;
	margin: auto;
	#wrapper-inner {margin: @width_2col_wrapper_padding;}
	#contents,#sidebar {display: inline;}
	#contents {
		width: @width_2col_main;
		padding: @width_2col_main_padding;
	}
	#sidebar {
		width: @width_2col_sidebar;
		padding: @width_2col_sidebar_padding;
	}
}
/*サブ、メイン*/
#wrapper.r-sm {
	#contents {float: right;}
	#sidebar {float: left;}
}
/*メイン、サブ*/
#wrapper.r-ms {
	#contents {float: left;}
	#sidebar {float: right;}
}

/*---3カラム---*/
/*共通*/
#wrapper.r-sms,
#wrapper.r-mss {
	width: @width_3col_wrapper;
	margin: auto;
	#wrapper-inner {margin: @width_3col_wrapper_padding;}
	#contents,#sidebar {display: inline;}
	#contents {
		width: @width_3col_contents;
		#main,#sub {display: inline;}
		#main	 {width: @width_3col_main;}
		#sub	 {width: @width_3col_sub;}
	}
	#sidebar {width: @width_3col_sidebar;}
}
/*サブ、メイン、サブ*/
#wrapper.r-sms {
	#contents {
		float: right;
		#main {float: left;}
		#sub {float: right;}
	}
	#sidebar {float: left;}
}
/*メイン、サブ、サブ*/
#wrapper.r-mss {
	#contents {
		float: left;
		#main {float: left;}
		#sub {float: right;}
	}
	#sidebar {float: right;}
}



/* !- 等幅段組レイアウト */
/*----------------------------------- */
/* --段組レイアウト_等幅水平floatボックス-- */
/* ２段組の使用例） class="col-horizontal col2" */
/* --ブロックレベル要素の高さを揃える heightLine.jsと併用すると便利-- */
/* %指定でも可能か要検討 */


/* 共通 */
@width_column_whole: 670px;
@width_column_padding: 10px;
@width_column_margin: 10px;

/*段組数別*/
@width_2column_col: 320px; /* 2段組各カラム幅 */
@width_3column_col: 205px; /* 3段組各カラム幅 */
@width_4column_col: 149px; /* 4段組各カラム幅 */
@width_5column_col: 116px; /* 5段組各カラム幅 */

#contents .col-horizontal {/*幅170+(padding10×2)= 190px幅のブロックを20p間隔で*/
    width: @width_column_whole;/*おさめたい幅*/
    margin: 0 -@width_column_margin*-1 0 0;/*右マージンを間隔分マイナス*/
    overflow: hidden;/*オーバーした部分を消す*/
    .col-horizontal-inner {
    	width: @width_column_whole+@width_column_margin;/*おさめたい幅+間隔*/
    	_zoom: 1;/*hasLayout:true*/
    	.col {
    		.rounded-corners(3px);
    	   width: (@width_3column_col)-(@width_column_padding);/*３段組をデフォルトにしてある*/
    	   padding: @width_column_padding;
    	   float: left;
    	   margin-right: @width_column_margin;/*間隔*/
    	   margin-bottom: @width_column_margin;
		   min-height: 100px;/*最小の高さをキープしたいなら設定*/
    	   _height: 100px;/*最小の高さをキープしたいなら（IE6対策）*/
    	   background-color: #E7E7E7;
    	   h1 {
    	   	background: none;
    	   	margin-bottom: 0.5em;
    	   	padding-left: 0;
    	   	border-bottom: 1px dotted #999;
    	   }
    	   p:last-child {
    	   	margin-bottom: 0;
    	   }
    	}
    	li.col {
    		list-style-type: none;
    	}
    }
}
#contents .col-horizontal.col2 .col-horizontal-inner .col {
	width: (@width_2column_col)-(@width_column_padding);
}
#contents .col-horizontal.col3 .col-horizontal-inner .col {
	width: (@width_3column_col)-(@width_column_padding);
}
#contents .col-horizontal.col4 .col-horizontal-inner .col {
	width: (@width_4column_col)-(@width_column_padding);
}
#contents .col-horizontal.col5 .col-horizontal-inner .col {
	width: (@width_5column_col)-(@width_column_padding);
}
#contents ul.col-horizontal-inner {
/*リスト使用時の余白をなくす。カラム内に記述したリストも余白がなくなるので要再指定。div使った方が良いかも*/
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    li.col {
    	margin-top: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    	background: none;
    	ul {/*カラムブロック内のリストの再定義*/
    		li {}
    	}
    }
}
/*枠記事内に仕様時の幅調整*/
#contents {
	.framed-a, .framed-b, .framed-c {
		.col-horizontal.col2 .col-horizontal-inner .col {
			width: (@width_2column_col)-(@width_column_padding)-21;
		}
		.col-horizontal.col3 .col-horizontal-inner .col {
			width: (@width_3column_col)-(@width_column_padding)-12;
		}
		.col-horizontal.col4 .col-horizontal-inner .col {
			width: (@width_4column_col)-(@width_column_padding)-10;
		}
		.col-horizontal.col5 .col-horizontal-inner .col {
			width: (@width_5column_col)-(@width_column_padding)-9;
		}
	}
}



/*-------------------------------------------------*/
/* !画像のプリロード */
/*-------------------------------------------------*/

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(../img/common/bg_local_menu_over.png);
       /* background-image: url(path/to/image2.png); */
}


/*-------------------------------------------------*/
/* !サイト基本構成レイアウト */
/*-------------------------------------------------*/
/* ここを見ただけでレイアウト構成が把握できる */
/* 作業開始時、プレビューで構成が理解しやすいよう色指定してある */

body {
	background: #CCC url(../img/common/bg.png) top center no-repeat;
	padding: 0 0 15px 0;
}
#container {
	margin: 0 auto;
	width: @width_container;
	background: #FFF;
	.box-shadow (0px,0px,10px,#666);
	#container-inner {}
}
#header {
	background-color: #FFF;
	#hnav {}
}
#gnav {}
#wrapper {/*※レイアウトパターンを参照*/
	background: url(../img/common/bg_wrapper.png) repeat-y left;
	#wrapper-inner {}
	#contents,#sidebar {
		margin: 0;
		overflow: hidden; /*横幅溢れたら隠す*/
	}
	#contents {
		/*3カラムの場合設定*/
		#main,#sub { overflow: hidden; }
	}
	#sidebar {}
}



/*-------------------------------------------------*/
/* !基本設定 */
/*-------------------------------------------------*/

/*文字*/
body {
	color: @color_base;
}
a {
	color: @color_link;
	&:hover {
		color: @color_link_over;
	}
}

/*行揃え*/
.align-left	 {text-align: left !important;}
.align-right {text-align: right !important;}
.align-center {text-align: center !important;}
.valign-top	 {vertical-align: top !important;}
.valign-middle	 {vertical-align: middle !important;}
.valign-bottom	 {vertical-align: bottom !important;}

/*文字表現用クラス*/
.notes {/*注釈など*/
	font-size: @font-size-11px;
	line-height: 1.2;
}

.font-weight-normal {/*太字中で細字を使いたい時に使用*/
	font-weight: normal;
}

/*注意*/
.attention {
	font-weight: bold;
	color: @color_warning;
	background-color: transparent;
}

/*区切り文字*/
.separator {
	color: @color_separator;
}

/*アクセシビリティ用*/
.skip {
	position: absolute;
	left: -9999px;
}
legend.skip {
	display: none;
}

/* 基本テーブル（reset.cssの基本テーブルを上書き） */
@table-line-width: 1px;/*テーブルの線の幅*/
table,th,td {
	border-color: @color_table_line;
}
table {
	margin: 1em 0;
	border-width: @table-line-width 0 0 @table-line-width;
}
table.td-align-center td {/*tdをセンター揃え*/
	text-align: center;
}
table.td-valign-top td {/*td内要素を上揃え*/
	vertical-align: top;
}
caption {}
th, td {
	border-width: 0 @table-line-width @table-line-width 0;
	padding: 2px 10px;
	vertical-align: middle;
}
th {
	color: @color_th_text;
	background-color: @color_th_bg;
	text-align: center;
	a {
		color: @color_th_link_text;
		&:hover {}
	}
}
td {
	color: @color_td_text;
	background-color: @color_td_bg;
}
td.no-padding {
	margin: 0 !important;
	padding: 0 !important;
	img {
		vertical-align: top;
	}
}
tr.row-highlight {
	td {
		background-color: @color_row_td_highlight_bg;
	}
	th {
		background-color: @color_row_th_highlight_bg;
	}
}
th.cell-highlight {
	background-color: @color_cell_th_highlight_bg;
}
td.cell-highlight {
	background-color: @color_cell_td_highlight_bg;
}

/*float フロート*/
@margin-width-float: 10px;/*フロートさせたブロック（主に画像）の空きの幅*/
.float-left {
	float: left;
	margin: 0 @margin-width-float @margin-width-float 0;
}
.float-right {
	float: right;
	margin: 0 0 @margin-width-float @margin-width-float;
}

/*画像*/
a img {/*画像 リンク*/
	border: none;
}
a:hover img {/*ロールオーバー時に明るくなる（背景白の場合）*/
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 0.8;
}
a:active img {/*クリック時にボタン押したような効果*/
	position: relative;
	left: 1px;
	top: 1px;
}


/*-------------------------------------------------*/
/* !ページヘッダー */
/*-------------------------------------------------*/

#page-description {
	text-align: center;
	font-weight: normal;
	font-size: @font-size-10px;
	color: #FFF;
}
#page-header {
	position: relative;
	padding: 15px 15px 147px;
	background: url(../img/common/bg_header_img.png) no-repeat bottom;
	#site-title {
		float: left;
	}
	#site-tagline {
		margin-top: 5px;
		margin-left: 5px;
		color: @color_1;
	}
	#tagline {
	}
	#hnav {/*mixinでうまくいかなかった・・要調査*/
		position: absolute;
		right: 30px;
		top: 25px;
		ul {
			zoom: 1;/*hasLayout: true;*/
			background: transparent no-repeat url(../img/common/hnav_over_combined.png);/*ロールオーバー時の画像（1枚に統合したもの）*/
			li {
				float: left;/*使用時、要width指定*/
    			display: inline;
				a { display: block; }/*いる？*/
				a:hover {
    	   		background-color: transparent;
    	   		img {
    	   			visibility: hidden;/*オーバー時画像が消え、背景（オーバー時画像）を表示*/
    	   		}
    			}
			}
			li#hnav-1 a { width: 50px; } /*それぞれ幅が異なる場合*/
			li#hnav-2 a { width: 50px; }
			li#hnav-3 a { width: 50px; }
		}
		form {
			clear: both;
			padding-top: 5px;
			label {}
			input {color: #999;}
		}
	}
	#company-name {
		float: right;
		margin-top: 7px;
	}
}



/*-------------------------------------------------*/
/* !メインメニュー（グローバルナビゲーション） */
/*-------------------------------------------------*/

#gnav,#topic-path {
	margin: 0;
}
#gnav {/*メニューをテキスト装飾にする場合使用*/
	background-color: transparent;
	ul {
		.list-inline;
		li {
			a {
				font-weight: bold;
				color: @color_1;
				background-color: @color_4;
				margin-right: 3px;
				padding: 5px 7px;
				text-decoration: none;
				.rounded-corners(3px);
				&:hover {
					background-color: #BFBFB5;
				}
			}
		}
	}
}

#gnav-b {
	/*メニューを画像にする場合に使用（id名から"-b"を取る）*/
	/*これを加工し、ulに.list-inline-img を付けてセットで使用*/
	background-color: #CCC;
	ul {
		background: url(../img/common/gnav_over_combined.png) no-repeat;/*ロールオーバー時の画像（1枚に統合したもの）*/
		li {
			width: px;/*幅が同じ場合*/
		}
		li#gnav-1 {width: px;}/*それぞれ幅が異なる場合*/
		li#gnav-2 {width: px;}
		li#gnav-3 {width: px;}
		li#gnav-4 {width: px;}
		li#gnav-5 {width: px;}
		li#gnav-6 {width: px;}
		li#gnav-7 {width: px;}
		li#gnav-8 {width: px;}
	}
}

	/*オーバー時、画像が消え、背景（オーバー時画像）を表示*/
	/*
	.cat-1 #gnav li#gnav-1 a img,
	.cat-2 #gnav li#gnav-2 a img,
	.cat-3 #gnav li#gnav-3 a img,
	.cat-4 #gnav li#gnav-4 a img,
	.cat-5 #gnav li#gnav-5 a img,
	.cat-6 #gnav li#gnav-6 a img,
	.cat-7 #gnav li#gnav-7 a img,
	.cat-8 #gnav li#gnav-8 a img {
		visibility: hidden;
	}
	*/

/*パンくずリスト*/
#topic-path {
	padding: 2px 10px;
	background-color: #333;
	border-top: 1px solid #666;
	border-bottom: 1px solid #000;
	color: #999;
	font-size: @font-size-11px;
	ul {
		.list-inline;
		li {
				
			a {
				padding-right: 1em;
				background: url(../img/common/ar_topicpath.png) no-repeat right center;
				color: #999;
				&:hover {
					color: #FFF;
				}
			}
		}
	
	}
}


/*-------------------------------------------------*/
/* !ページ最上部の帯記事 */
/*-------------------------------------------------*/
#top-bar {
	position: absolute;
	width: 100%;
	top: 0;
	background-color: #000;
	color: #FFF;
	text-align: center;
	border-bottom: 1px solid #666;
	p {
		margin: 3px;
	}
}


/*-------------------------------------------------*/
/* !メインコンテンツ */
/*-------------------------------------------------*/

#contents {
	/*-- コード --------*/
	code {
		.rounded-corners();/*mixin*/
		background: #333 no-repeat left top;
		color: #FFF;
		font-size: @font-size-11px;
		font-family: monospace;
		border: 1px solid #000;
	}
		code.code-html,
		code.code-html5,
		code.code-mt,
		code.code-css,
		code.code-css3,
		code.code-js,
		code.code-jquery,
		code.code-perl,
		code.code-php,
		code.code-sql,
		code.code-command {
			padding-top: 20px;
		}
		code.code-html	 { background-image: url(../img/common/bg_code_html.png); }
		code.code-html5	 { background-image: url(../img/common/bg_code_html5.png); }
		code.code-mt	 { background-image: url(../img/common/bg_code_mt.png); }
		code.code-css	 { background-image: url(../img/common/bg_code_css.png); }
		code.code-css3	 { background-image: url(../img/common/bg_code_css3.png); }
		code.code-js	 { background-image: url(../img/common/bg_code_js.png); }
		code.code-jquery { background-image: url(../img/common/bg_code_jquery.png); }
		code.code-perl	 { background-image: url(../img/common/bg_code_perl.png); }
		code.code-php	 { background-image: url(../img/common/bg_code_php.png); }
		code.code-sql	 { background-image: url(../img/common/bg_code_sql.png); }
		code.code-command { background-image: url(../img/common/bg_code_command.png); }
	/*-- 挿入画像 --------*/
	figure {
		width: 210px;
		img {
		}
		figcaption {
			margin: 5px 0;
			font-size: @font-size-10px;
			line-height: 1.25;
		}
	}
	
	/*-- その他 ----------*/
	p {
		margin-bottom: 1em;
	}
	.pagetop {
		text-align: right;
		font-size: @font-size-10px;
		a {
			color: @color_0;
			padding-left: 10px;
			background: url(../img/common/lm_pagetop.png) no-repeat left center;
		}
	}
	article {
		margin-bottom: 2em;
		header {
			height: 75px;
			margin: -30px -30px 20px -30px;
			padding-top: 25px;
			padding-left: 30px;
			background: #333 url(../img/common/bg_page_header.png) no-repeat;
			color: #FFF;
			h1 {
				font-size: @font-size-20px;
			}
			p {
				font-size: @font-size-10px;
				color: #999;
			}
			/*p.pubdate {
				margin-bottom: 0.5em;
				padding-left: 5px;
				background-color: @color_4;
			}
			.meta,.meta2 {
				padding-left: 5px;
				font-size:  @font-size-11px;
				border: solid @color_4;
			}
			.meta {
				margin: 0.5em 0 0;
				border-width: 1px 0;
			}
			.meta2 {
				margin: 0;
				border-width: 0 0 1px 0;
				a {
					.rounded-corners(2px);
					text-decoration: none;
					color: @color_1;
					background-color: @color_4;
					padding: 0px 2px;
					&:hover {
						color: @color_1b;
						background-color: @color_2b;
						text-decoration: underline;
					}
				}
			}
			*/
		}
		
		.body {
			p#catch {
				font-size: @font-size-16px;
				font-weight: bold;
			}
			h2,h3 {
				margin: 1.25em 0;
			}
			h2 {
				margin-top: 1.5em;
				margin-left: -10px;
				margin-right: -10px;
				padding: 15px 15px 15px 24px;
				background: #333 url(../img/common/bg_h2.png) no-repeat left center;
				color: #FFF !important;
				font-size: @font-size-16px;
				border: 1px solid;
				border-color: #666 #000 #000 #666;
				.rounded-corners(2px);
			}
			section h1 {
				font-size: @font-size-13px;
				margin-bottom: 0.5em;
				padding-left: 16px;
				.listmarker_4a;
			}
			h3 {
				font-size: @font-size-13px;
				margin-top: 2em;
				margin-bottom: 1em;
				padding-left: 16px;
				.listmarker_5a;
				border-bottom: 1px dotted #666;
			}
			h4 {
				margin: 1.25em 0 0.7em;
				.listmarker_1a;
			}
			blockquote {
				margin: 1em 10px;
				padding: 10px;
				border: 1px dotted #666;
				h1 {
					margin-bottom: 0.5em;
					color: @color_base;
					background: none;
					padding: 0;
				}
				p.source {
					margin-bottom: 0;
					text-align: right;
					font-size: @font-size-12px;
				}
			}
			dialog {/*2人の会話文（3人以上はどうするか要検討）*/
				dt,dd {
					margin-bottom: 0.25em;
				}
				dt:before {
					content: 'A『';
				}
				dd:before {
					content: 'B『';
				}
				dt:after, dd:after {
					content: '』';
				}
				dt {}
				dd {color: @color_0;}
			}			
		}
		footer {
			.action {
				margin: 0 10px 15px;
				padding: 30px 20px 0px;
				border-bottom: 5px solid @color_4;
				background: url(../img/common/bg_social_action.png) no-repeat;
			}
		}
	}
	aside {
		margin: 0 10px 20px;
		h1 {
		}
	}
	aside.framed {
		.rounded-corners(3px);
		border: 1px solid #CCC;
		padding: 0 15px 15px;
		h1 {
			margin: 0 -15px 15px; /*aside全体のpadding分をmarginで拡げる*/
			padding: 3px 5px;
			background-color: #CCC;
		}
	}
	aside.books,
	aside.ad-img-l {
		ul{
			li {
				float: left;
				background: none;
				a{
					img {
					}
				}
			}
		}
	}
	aside.ad-img-l {
		padding-left: 40px;
	}
}

#contents {
	/*--- 構成ブロック ----------*/

    /*--- タイトル・見出し ----------*/
	#category-title,
	.headline,
	subhead-1,subhead-2,subhead-3,subhead-4,subhead-5 {
		font-weight: bold;
	}
	#category-title {/*カテゴリ名*/
	}
	.headline {/*大見出し*/
	}
	.leadcopy {/*リードコピー*/
	}
	.subhead-1 {/*小見出し1*/
	}
	.subhead-2 {/*小見出し2*/
	}
	.subhead-3 {/*小見出し3*/
	}
	.subhead-4 {/*小見出し4*/
	}
	.subhead-5 {/*小見出し5*/
	}
}

/* !ソーシャルボタン（twitter, mixiチェック,はてブ etc.） */
/*----------------------------------- */
#contents {
	ul.function-button {
	   li {/*共通*/
	   	display: inline;
	   	background: none;
	   }
	   .bt-mixi-like,
	   .bt-evernote-clip {
	   	a {
	   		display: block !important;
	   		float: left !important;
	   		margin-right: 5px !important;
	   		border: 1px solid blue;
	   	}
	   }
	   .bt-tweet,
	   .bt-gree-like,
	   .bt-hatena-bookmark,
	   .bt-facebook-like {
	   	iframe {
	   		display: block !important;
	   		float: left !important;
	   		margin-right: 5px !important;
	   		border: 1px solid blue;
	   	}
	   }
	   .bt-facebook-like {
	   	.fb-like-button {
				width: 7em;
				height: 1.7em;
				overflow: hidden;
			}
	   }
	   .bt-gree-like {
	   	iframe {
	   		width:80px;
	   		height:16px;
	   		overflow:hidden;
	   	}
	   }
	   .bt-hatena-bookmark {
	   	a.hatena-bookmark-button {
	   		img {
	   			width: 20px;
	   			height: 20px;
	   		}
	   	}
	   }
	   .bt-evernote-clip {}
	}
}


/* !リードコピー下のスペース */
/*----------------------------------- */
#contents {
	#img-and-env {
		margin: 0 10px 10px;
		p, ul {
			margin-bottom: 0.5em;
		}
		p {
			color: @color_2;
		}
		.social-reaction {
			width: 130px;
			float: right;
			background: url(../img/common/bg_translucent_gray.gif);
			padding: 5px;
			.translucent(80);
			.rounded-corners(3px);
			/*各ボタン設定*/
			iframe.twitter-share-button {}
			iframe.facebook-like-button {
				width:71px;
				height:65px;
			}
			iframe.hatena-bookmark-button {}
		}
	}
	.refer {
		.framed-b;
	}
}

/* !前後の記事 */
/*----------------------------------- */
#contents {
	.next-previous {
 	  .framed-a;
	}
}


/* !リスト */
/*----------------------------------- */
/*リストマーカーの設定はMixinで指定してある*/
#contents {
	ul, ol, dl {
		margin: 1em 0;
	}
	ul, ol {
		list-style-position: inside;
		li {
			margin-bottom: 0.7em;
			ul,ol {/*2階層目*/
				margin: 0.25em 0;
				font-size: @font-size-11px;
			}
		}
	}
	ul {
		li {
			.listmarker_2a;
			ul {
				li {
					.listmarker_2a;
				}
			}
		}
	}
	ol {
		list-style-type: decimal;
		li {
			padding: 0px;
			ol {
				li {
					padding-left: 12px;
				}
			}
			ul {
				margin-left: 12px;
				li {
					.listmarker_1a;
				}
			}
		}
	}
	dl {
		dt {
			.listmarker_1a;
			font-weight: bold;
			margin-bottom: 0.5em;
			dfn {font-weight: bold;}
		}
		dd {
			margin: 0 0 1em 1em;
		}
	}
}


/*-------------------------------------------------*/
/* !サブコンテンツ（3カラムレイアウト使用時） */
/*-------------------------------------------------*/


/*-------------------------------------------------*/
/* !サイドバー */
/*-------------------------------------------------*/
#wrapper #sidebar {
	overflow: visible; /*横幅溢れたら隠すのを解除*/
}
#sidebar {
	padding-top: 100px;
	/*枠記事*/
	.section-a, .section-b, .section-c {
	   margin: 7px;
	   padding: 10px;
	   h1 {
	   	margin-bottom: 0.5em;
	   }
	}
	.section-a {
	   border: 1px solid #CCC;
	   background: transparent url(../img/common/bg_translucent_white.gif);
	   h1 {
	   	.listmarker_4a;
	   }
	}
	.section-b {
	   background-color: @color_2b;
	   border: 1px solid @color_2c;
	   .rounded-corners(3px);
	   h1 {
	   	.listmarker_4a;
	   }
	   ul.level-1 {/*1階層目*/
	   	li {
	   	   a {
	   	   	.listmarker_1a;
	   	   }
	   	}
	   }
	}
	.section-c {
	   background-color: @color_3b;
	   border: 1px solid @color_3c;
	   .rounded-corners(3px);
	   h1 {
	   	.listmarker_4a;
	   }
	   ul.level-1 {/*1階層目*/
	   	li {
	   	   a {
	   	   	.listmarker_1a;
	   	   }
	   	}
	   }
	}

	/*メニュー（リストマーカーはミックスインで指定）*/
	nav {
		margin-top: 100px;/*?*/
		margin-bottom: 10px;
		//分割して間を開けたい場合などは、この中で.sectionで分割
		ul.level-1,ul.level-2 {
			li {
				font-size: @font-size-12px;
    		}
		}
		ul.level-1 {/*1階層目*/
    		li {
    			background: #333;
	   		color: #FFF;
    			/*display:inline;*//*IE6で上下に間が空かないために必要*/
    			h1 {
    				padding: 3px 5px;
    				a {
    					font-weight: normal;
    					font-size: @font-size-11px;
    					color: #FF0;
    					&:hover {
    						color: #F90;
    					}
    				}
    			}
    			
    			ul.level-2 {/*2階層目*/
    				li {
    					background: url(../img/common/bg_menu_steel.png) no-repeat top left;
    					padding-left: 3px;
    					position: relative;/*下層ulの位置基準セット*/
						&:hover {
							background: url(../img/common/bg_menu_steel_over.png) no-repeat top left;
							ul.level-3 {/*ロールオーバー時に出現*/
								position: absolute;
								top: 0;
								left:220px;
							}
						}
						
						a {
    						display: block;
    						padding: 4px 0;
    						.listmarker_3a;
    						color: #333;
    						font-weight: bold;
    						text-decoration: none;
    						text-shadow: 1px 1px 0px #FFF;
    						border: 1px solid;
    						border-color: #CCC #999 #999 #CCC;
    						&:hover {
    							color: #FFF;
    							text-shadow: -1px -1px 0px #333;
    						}
    					}
    				}
    				ul.level-3 {/*3階層目*/
    					position: absolute;
						left: -9999px;/*普段は隠しとく*/
						width: 220px;
						z-index: 999;
						.box-shadow;
    					li {
    						padding: 0;
    						a{
    							padding: 2px 0 0 5px;
    							background: none;
    						}
    					}
    				}
    			}
    		}
    		li:hover {}
    	}
	}
	#side-banner {
		margin-bottom: 10px;
		margin-left: 7px;
		li{
			margin-bottom: 5px;
		}
	}
	.ad {
		p {
			margin-bottom: 5px;
		}
	}
}

/* ローカルメニューで現在のページのメニューを
   わかるように（ロールオーバー時の画像） */
/*----------------------------------------*/
.index#PAGENAME1-1 li#lnav-index a,
.cat2#PAGENAME2-1 li#lnav-cat2 a,
.cat3#PAGENAME3-1 li#lnav-cat3 a,
.cat3#PAGENAME3-2 li#lnav-cat3 a,
.cat3#PAGENAME3-3 li#lnav-cat3 a
 {background-image: url(../img/common/bg_local_menu_over.png);}


/*-------------------------------------------------*/
/* !フッター */
/*-------------------------------------------------*/

#page-footer {
	background: url(../img/common/bg_footer_img.jpg) no-repeat;
	position: relative;
	padding: 10px 20px 10px 220px;
	color: #FFF;
	#footer-products,
	#footer-info {
		padding-left: 5em;
		text-indent: -5em;
		font-size: @font-size-10px;
		a {
			color: #FFF;
		}
	}
	#footer-company {
		margin-top: 20px;
		text-align: right;
	}
	/*三段組メニュー群を使う場合
	section {
		width:170px;
		float: left;
		h1 {
			margin-bottom: 10px;
		}
		p,ul {
			font-size: @font-size-11px;
		}
		ul {
			li {
				a {
					display: block;
					color: #FFF;
					padding: 2px 0 2px 20px;
					.listmarker_2a;
					_zoom: 1;
					&:hover {}
				}
			}
		}
	}
	*/
}

/*コピーライト*/
#copyright {
	clear: both;
	margin-top: 5px;
	text-align: center;
	font-size: @font-size-10px;
}


/*-------------------------------------------------*/
/* !ポップアップウインドウ用（Padding,背景なし） */
/*-------------------------------------------------*/
body.popup {
	padding: 0;
	background: none;
}


/*-------------------------------------------------*/
/* !カテゴリ独自のCSS */
/*-------------------------------------------------*/

/* !TOPページ */
/*----------------------------------------*/
/*メインイメージ（上書き）*/
#top-page #page-header {
	padding-bottom: 265px;
	background-image: url(../img/main_img.jpg);
}
/*新着情報*/
#top-page #news {
	h1 {
		font-size: 110%;
		margin-left: -15px;
		margin-right: -15px;
		border-bottom: 4px solid #CCC;
	}
	dt,dd {
	    padding-bottom: .75em;
	    border-bottom: 1px solid #CCC;
	}
	dt {
	    font-weight: normal;
	    width: 8em;
	    float: left;
	}
	dd {
	    margin-bottom: 0.75em;
	}
}
/*商品ブロック*/
#top-page {
	#item-pickup,
	#item-info {
		li {
			margin: 0;
			padding: 0;
		    display: inline;
		    background: none;
		    img {vertical-align: bottom;}
		    &:last-child img {margin-right: 0;}
		}
	}
	#item-pickup {
		ul {clear:both;}
		li img {margin: 0 2px 2px 0;}
	}
	#item-info {
		width: 644px;
		margin-top: 5px;
		padding: 7px;
		background-color: #E7E7E7;
		.rounded-corners(3px);
		ul {margin-top: 0;}
		li img {margin-right: 3px;}
	}
}



/*body要素のclassに各カテゴリを割り当てておく 
<body id="hoge" class="CATEGORY-NAME">*/
.CATEGORY-NAME {}

/* カテゴリごとに背景を切替 */
/*----------------------------------------*/
/*カテゴリごとに背景変更しない場合は不要*/
/* #wrapper-outer { background: url() repeat-x; } ← 入れ子にして背景を二重構造にする場合 */
.toppage #wrapper { background-image: url(../img/common/bg_cat0.png); }
.cat1 #wrapper	 { background-image: url(../img/common/bg_cat1.png); }
.cat2 #wrapper	 { background-image: url(../img/common/bg_cat2.png); }
.cat3 #wrapper	 { background-image: url(../img/common/bg_cat3.png); }
.cat4 #wrapper	 { background-image: url(../img/common/bg_cat4.png); }
.cat5 #wrapper	 { background-image: url(../img/common/bg_cat5.png); }
.cat6 #wrapper	 { background-image: url(../img/common/bg_cat6.png); }
.cat7 #wrapper	 { background-image: url(../img/common/bg_cat7.png); }
.cat8 #wrapper	 { background-image: url(../img/common/bg_cat8.png); }


/* カテゴリごとにサイドバー上部のイメージ切替 */
/*----------------------------------------*/
/* .category-name #sidebar */
#sidebar {
    background-repeat: no-repeat;
    background-position: top left;
    background-image: url(../img/common/sidebar_top_img.jpg);/*デフォルト*/
}
.info #sidebar {
    background-image: url(../img/common/sidebar_top_img.jpg);
}
.info-products #sidebar {
    background-image: url(../img/common/sidebar_top_img.jpg);
}

.products.gas-spring #sidebar {
    background-image: url(../products/gas-spring/img/sidebar_top_img.jpg);
}
.products.gas-spring-lock #sidebar {
    background-image: url(../products/gas-spring-lock/img/sidebar_top_img.jpg);
}
.products.release-system #sidebar {
    background-image: url(../products/release-system/img/sidebar_top_img.jpg);
}
.products.special-gas-spring #sidebar {
    background-image: url(../products/special-gas-spring/img/sidebar_top_img.jpg);
}
.products.stainless-steal #sidebar {
    background-image: url(../products/stainless-steal/img/sidebar_top_img.jpg);
}
.products.mc-dumper #sidebar {
    background-image: url(../products/mc-dumper/img/sidebar_top_img.jpg);
}
.products.table-pillar #sidebar {
    background-image: url(../products/table-pillar/img/sidebar_top_img.jpg);
}
.products.connecting-parts #sidebar {
    background-image: url(../products/connecting-parts/img/sidebar_top_img.jpg);
}

/*-------------------------------------------------*/
/* !ページ独自のCSS */
/*-------------------------------------------------*/
/*サービスカテゴリのリニューアルのページ
<body id="PAGE-NAME" class="CATEGORY-NAME">*/
#PAGE-NAME.CATEGORY-NAME {}

/*-------------------------------------------------*/
/* !情報ページ */
/*-------------------------------------------------*/
/*よくある質問 FAQ*/
#faq {
	dl.faq {
		dt {
			.listmarker_faq_question;
			margin: 0.5em 0 0.25em;
		}
		dd {
			.listmarker_faq_answer;
			margin: 0 0 1em 1em;
		}
		margin-bottom: 1em;
	}
}
/*サイトマップ*/
body#sitemap {
	.body {
		li {
			font-weight: bold;
			margin-bottom: 0.75em;
			li{
				font-weight: normal;
				margin-bottom: 0;
			}
		}
	}

}

/*プライバシーポリシー*/
body#privacy-policy.info dl {
	dt {
		margin: 1.5em 0 0.75em;
	}
	dd {
		line-height: 1.5;
		margin-left: 1em;
	}
}

/*-------------------------------------------------*/
/* !製品ページ */
/*-------------------------------------------------*/
/*バンズバッハ（Bansbach）の製品が選ばれる理由３つ ★*/
#bansbach_feature .col {
	margin-bottom: 5px !important;
	padding-bottom: 0 !important;
	p {
		margin-bottom: 0 !important;
	}
}
/*一覧ページ*/
#products-index .product-list-sample {
	padding: 5px;
	background-color: #E7E7E7;
	.rounded-corners(2px);
}
/*商品説明の表組*/
.products {
	table.specification {
		border: none;
		margin-top: 1px !important;
		tr {
			th,td {
				color: #000;
				border-color: #FFF;
				vertical-align: middle;
				p{
					margin:1em 0;
				}
			}
			th {
				background-color: #99AED3;
			}
			td {
				background-color: #CCD5E8;
				strong {
					color: #063F85;
					a {
						color: #063F85;
						padding-right: 12px;
						background: url(../img/common/ico_external_link.png) no-repeat right top;
						&:hover {
							background-color: #8d9ab5;
						}
					}
				}
				strong:before {
					content: "■ ";
				}
			}
			td.pointer,
			td.item {
				text-align: center;
			}
			td.pointer {color: #000;}/*1つめのカラム*/
				td#f.pointer {background-color: #075E31;}
				td#a.pointer {background-color: #8CBC32;}
				td#xy.pointer {background-color: #E3BB0D;}
				td#n0.pointer {background-color: #FE9E0B;}
				td#n1.pointer {background-color: #E30A0A;}
				td#n2.pointer {background-color: #DF8F09;}
				td#n3.pointer {background-color: #0E3E95;}
				td#n4.pointer {background-color: #5E065F;}
			td.item {/*2つめのカラム*/
				width: 10em;
			}
		}
	}
	table.specification.notes {
		td,th {
			line-height: 1.25em;
			font-size: 0.8em;
		}
	}
	table.specification-detail{/*詳細テーブル*/
		font-size: 80%;
		th {font-weight: bold;}
		th.pointer {color:#FFF;}
		th.ex1.pointer {background-color: #0E3E95;}
		th.ex2.pointer {background-color: #5E065F;width:6em;}
		th.ex3.pointer {background-color: #E30A0A;}
		th.ex4.pointer {background-color: #DF8F09;width:6em;}
		th.ex5.pointer {background-color: #E3BB0D;}
		th.ex6.pointer {background-color: #8CBC32;}
		th.ex7.pointer {background-color: #56982E;}
		th.ex8.pointer {background-color: #666;width:6em;}
		th.ex9.pointer {background-color: #075E31;}
		th.width-1 {width: 6em;}
	}
	table.specification-detail.reduced {
		th,td {
			font-size: 77%;
			.tooltip {font-size: 129.8%;}
		}
	}
}

/*ツールチップ表示（tooltip.js内のスクリプトとともに使用）*/
span.tooltip {
    display: block;
    width:200px;
    padding:10px;
    background:#000;
    color:#FFF;
    text-align: left;
    font-weight: normal !important;
    font-size: 110%;
    -moz-box-shadow: 3px 3px 3px #666;
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
}
span.tooltip b {
    font-weight: bold !important;
}


/*カタログ*/
#catalog-list {
	p {
		margin: 0 0 0.5em;
		line-height: 1.2em;
		text-align: center;
	}
	.catalog-name {
		font-weight: bold;
		color: #039;
	}
	.catalog-notes {
		font-size: 0.8em;
		font-style: oblique;
		margin-bottom: 7px;
	}
}

/*PDF*/
.pdf-area {
	img {
		float:left;
		margin-right:15px;
	}
}
/*動画*/
.products .movie {
	margin-left: 10px;
}

/*接続パーツの製品一覧*/
.connecting-parts-list {
	.img-text-parallel {
		.img-area {
			margin-right: 10px;
		}
		.text-area {
			img {
				margin-bottom: 0;
			}
		}
	}
}

/*リリースシステム*/
.release-system {
	#release-system_pushpin.framed-b {
		background: url(../products/release-system/img/img_bansbach_pushpin.jpg) no-repeat;
		div {
			margin-left: 110px;
		}
	}
	
	/*スタンダートとショートリリースのラベル*/
	p.reccomend-standard,
	p.reccomend-short {
	    color: #FFF;
	    text-align: center;
	    font-size: @font-size-10px;
	    width: 13em;
	    .rounded-corners;
	}
	p.reccomend-standard {
	    background-color: #54b11d !important;
	}
	p.reccomend-short {
	    background-color: #d68225;
	}
	
	#release-system-list {
		.col-horizontal .col {
			h4 {
				margin: 7px 0 0;
				color: @color_1;
			}
			p {
				margin: .5em 0 0;
				line-height: 1.3;
			}
		}
	}
}



/*-------------------------------------------------*/
/* !CSSハック */
/*-------------------------------------------------*/

/* !- clearfix */
/*----------------------------------- */
/*LESSからの書き出しは、各要素ごとに分割されて吐き出されるため冗長で汚い。
  作業中は簡単にコピペできるLESS、本番アップ前に普通のCSSに書き換える*/
/*カンマ区切りの複数要素を変数に入れて簡略化を試みたがダメだった。要素に変数は使えない*/
/* :after は入れ子にできないので注意！*/

header:after,footer:after,section:after,article:after,nav:after,aside:after,
#wrapper:after,#wrapper-inner:after,#container:after,#container-inner:after,
#hnav:after,#gnav:after,#gnav-b:after,#topic-path:after,
#contents:after,#main,#sub:after,#sidebar:after,
.body:after,.main:after,.sub:after,
.list-inline-img:after,.col-horizonal-inner:after,.img-text-parallel:after,.text-img-parallel:after,
#item-pickup ul:after,
.heightLineParent:after,
.clearfix:after {
	clear: both;
	display: block;
	visibility: hidden;
	content: ".";
	height: 0;
}
header,footer,section,article,nav,aside,
#wrapper,#wrapper-inner,#container,#container-inner,
#hnav,#gnav,#gnav-b,#topic-path,
#contents,#main,#sub,#sidebar,
.body,.main,.sub,
.list-inline-img,.col-horizonal-inner,.img-text-parallel,.text-img-parallel,
#item-pickup ul,
.heightLineParent,
.clearfix {
	display: inline-block;
}
/* 以降のコメントは消さないこと（Mac版IE5除外）。でも変換後消えてしまう問題 */
/* 以下Win版IE6以前 ¥*/
* html {
	header,footer,section,article,nav,aside,
	#wrapper,#wrapper-inner,#container,#container-inner,
	#hnav,#gnav,#gnav-b,#topic-path,
	#contents,#main,#sub,#sidebar,
	.body,.main,.sub,
	.list-inline-img,.col-horizonal-inner,.img-text-parallel,.text-img-parallel,
	#item-pickup ul,
	.heightLineParent,
	.clearfix {
		height: 1%;
	}
}
/* */
/* IE7 */
*:first-child+html {
	header,footer,section,article,nav,aside,
	#wrapper,#wrapper-inner,#container,#container-inner,
	#hnav,#gnav,#gnav-b,topic-path,
	#contents,#main,#sub,#sidebar,
	.body,.main,.sub,
	.list-inline-img,.col-horizonal-inner,.img-text-parallel,.text-img-parallel,
	#item-pickup ul,
	.heightLineParent,
	.clearfix {
		min-height: 1px;
	}
}
header,footer,section,article,nav,aside,
#wrapper,#wrapper-inner,#container,#container-inner,
#hnav,#gnav,#gnav-b,#topic-path,
#contents,#main,#sub,#sidebar,
.body,.main,.sub,
.list-inline-img,.col-horizonal-inner,.img-text-parallel,.text-img-parallel,
#item-pickup ul,
.heightLineParent,
.clearfix {
	display: block;
}