@charset "UTF-8";

/*
*	Title: オレンジブック.Com - 共通CSS
*	URI: 
*	Last Modified: 2009-08-04
*	Description: サイト全体を通して共通で使用する要素を定義する
*	
*	透過pngを使用している箇所があるので注意!!
*	IE6対応で filter を使用しているが、絶対パスによる指定になるので、アップする際に必ずパスを確認すること!!
*/

/*========================================
	1. 基本要素
========================================*/
html, 
body {
	height: 100%;
}

html {
	overflow-y: scroll;
}

body {
	position: relative;
	line-height: 1.7;
	text-align: center;
	font-size: 75%;
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	Xfont-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333333;
}

body textarea {
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/*========================================
	2. リンク要素
========================================*/
a {
	text-decoration: none;
	color: #003399;
	overflow: hidden;
}

a:hover {
	text-decoration: underline;
	color: #ff3300 !important;
}

a img {
	vertical-align: bottom;
}

/*========================================
	3. 背景色設定（品番部分で使用）
========================================*/
.hinban1 {
	background-color: #fffed6 !important;
}

.hinban2 {
	background-color: #33ff99 !important;
}

.hinban3 {
	background-color: #ccffff !important;
}

.hinban4 {
	background-color: #ccccff !important;
}

.hinban5 {
	background-color: #bce0ff !important;
}

.hinban6 {
	background-color: #ccffcc !important;
}

.text {
	ime-mode: active;
}

.character {
	ime-mode: inactive;
}

.number {
	ime-mode: inactive;
	text-align: right;
}


/*========================================
	4. 補足設定
========================================*/
/* ----- 子孫セレクタのfloatによる周りこみを回避 ----- */
.clearfix:after,
#content:after,
#footerNav:after,
#main .pageInfo:after,
#main .baseProductsList ul:after,
.fullContent #contentInner:after {
	content: ".";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
}

.clearfix,
#content,
#footerNav,
#main .pageInfo,
#main .baseProductsList ul,
.fullContent #contentInner {
	display: inline-block;
}

/* Hides from IE-mac \*/
*html .clearfix,
*html #content,
*html #footerNav,
*html #main .pageInfo,
*html #main .baseProductsList ul,
*html .fullContent #contentInner {
	height: 1%;
}
.clearfix,
#content,
#footerNav,
#main .pageInfo,
#main .baseProductsList ul,
.fullContent #contentInner {
	display: block;
}
/* End hide from IE-mac */


/*========================================
	5. 全体枠
========================================*/
#container {
	position: relative;
	margin: 0 auto;
	width: 100％;
	min-width: 970px;
	min-height: 100%;
	background: #ffffff;
	text-align: left;
}
*html #container {
	Xwidth: 970px;
	height: 100%;
}


/*========================================
	6. ヘッダー領域
========================================*/
#header {
	position: relative;
	width: 100％;
	height: 100px;
	background: url(../images/bg_header.jpg) repeat-x left top;
}

/* ----- 内部ヘッダー領域 ----- */
#headerInner {
	position: relative;
	margin: 0 auto;
	width: 970px;
	z-index: 10;
}

/* ----- ロゴ ----- */
#headerInner #logo {
	position: absolute;
	left: -9px;
	top: 0;
	width: 313px;
	height: 96px;
	background: url(../images/img_logoShadow.png) no-repeat left top;
}
*html #headerInner #logo {
	background: none;
	Xfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/trusco/common/images/img_logoShadow.png);
}

/* ----- 会社名 ----- */
#headerInner #campany {
	position: absolute;
	left: 298px;
	top: 4px;
}

/* ----- ヘッダー部ナビゲーション ----- */
#headerInner #headerNav {
	position: absolute;
	right: 105px;
	top: 12px;
}

#headerInner #headerNav li {
	float: left;
	margin-right: 6px;
	font-size: 0;
}

#headerInner #headerNav li a {
	line-height: 1;
	vertical-align: top;
}

/* ----- 法人会員用ログインボタン ----- */
#headerInner #houjinLogin {
	position: absolute;
	right: 2px;
	top: 5px;
}

/* ----- 文字サイズ切り替えボタン ----- */
#headerInner #fontSwitcher {
	position: absolute;
	right: 0;
	top: 46px;
	width: 209px;
	height: 38px;
	background: url(../images/bg_fontSwitcher.png) no-repeat left top;
}
*html #headerInner #fontSwitcher {
	background: url(../images/bg_fontSwitcher.gif) no-repeat left top;
}

#headerInner #fontSwitcher #fontSmall {
	display: block;
	position: absolute;
	left: 99px;
	top: 0;
	width: 33px;
	height: 31px;
	background: url(../images/btn_font.gif) no-repeat -1px 0;
	text-indent: -9999px;
}
#headerInner #fontSwitcher #fontSmall:hover {
	background-position: -1px -31px;
}

#headerInner #fontSwitcher #fontMedium {
	display: block;
	position: absolute;
	left: 133px;
	top: 0;
	width: 33px;
	height: 31px;
	background: url(../images/btn_font.gif) no-repeat -35px 0;
	text-indent: -9999px;
}
#headerInner #fontSwitcher #fontMedium:hover {
	background-position: -35px -31px;
}

#headerInner #fontSwitcher #fontLarge {
	display: block;
	position: absolute;
	left: 167px;
	top: 0;
	width: 33px;
	height: 31px;
	background: url(../images/btn_font.gif) no-repeat -69px 0;
	text-indent: -9999px;
}
#headerInner #fontSwitcher #fontLarge:hover {
	background-position: -69px -31px;
}

#headerInner #fontSwitcher .focusSmall {
	background-position: -1px -31px !important;
}

#headerInner #fontSwitcher .focusMedium {
	background-position: -35px -31px !important;
}

#headerInner #fontSwitcher .focusLarge {
	background-position: -69px -31px !important;
}

/* ----- 印刷用ロゴ・会社ロゴ ----- */
#header #printLogo,
#header #printCampany {
	display: none;
}

/*========================================
	7. コンテンツ領域（外枠）
========================================*/
#content {
	margin: 0 auto;
	width: 970px;
}

#content #topicPath {
	margin-bottom: 14px;
	padding-top: 3px;
	line-height: 1;
	font-size: 85.7%;
}

#content #topicPath a {
	text-decoration: underline;
	color: #333333;
}


/*========================================
	8. コンテンツ領域（メイン領域）
========================================*/
#main {
	float: right;
	width: 740px;
}

/* ----- ページタイトル ----- */
#main h1 {
	position: relative;
	width: 560px;
	min-height: 48px;
	Xoverflow: hidden;
	background: #3e3e3e url(../images/bg_mainTitle.gif) no-repeat left top;
	padding: 17px 150px 0 30px;
	line-height: 1.2;
	font-weight: bold;
	font-size: 142.9%;
	color: #ffffff;
	z-index: 10;
}
*html #main h1 {
	height: 48px;
}

#main h1 span {
	display: block;
	margin-top: -6px;
	margin-bottom: 2px;
	font-weight: normal;
	font-size: 60%;
	color: #cbcbcb;
}

#main h1 .line {
	position: absolute;
	left: 10px;
	bottom: 3px;
	display: block;
	margin: 0;
	width: 720px;
	height: 3px;
	overflow: hidden;
	background: #fe9800;
	font-size: 0;
	z-index: 11;
}

/* ----- ページ内段落枠 ----- */
#main .sectionWrap {
	padding: 16px 20px 24px;
	line-height: 1.7;
}

#main .sectionWrap .pageInfo {
	background: url(../images/img_dotline.gif) repeat-x left top;
}


/*--------------------------------------
	8.1. フレームパターン①： 1カラムだが幅は100%
---------------------------------------*/
.fullContent {
	float: none !important;
	width: 970px !important;
}

/* ----- ページタイトル ----- */
.fullContent h1 {
	width: 790px !important;
	background-image: url(../images/bg_mainTitleFull.gif) !important;
}

.fullContent h1 .line {
	width: 950px !important;
}

/* ----- 2カラムver： 外枠 ----- */
.fullContent #contentInner {
	border-right: 3px solid #cbcbcb;
	border-bottom: 3px solid #cbcbcb;
	border-left: 3px solid #cbcbcb;
	background: url(../images/bg_fullContentPrimary.gif) repeat-y left top;
}

/* ----- 2カラムver： メイン領域 ----- */
.fullContent #contentInner #primary {
	float: right;
	width: 769px;
}

/* ----- ページサブタイトル ----- */
.fullContent #contentInner #primary h2 {
	border-top: 1px solid #cbcbcb;
	border-bottom: 1px solid #cbcbcb;
	padding: 10px 0 8px 20px;
	background: #e4e4e4;
	line-height: 1;
	font-weight: bold;
	font-size: 114.3%;
}

/* ----- 2カラムver： サイド領域（サイドメニュー） ----- */
.fullContent #contentInner #secondary {
	float: left;
	width: 194px;
}

.fullContent #contentInner #secondary ul {
}

.fullContent #contentInner #secondary ul li {
	padding: 1px 0 2px;
	background: url(../images/bg_secondaryList.gif) no-repeat center bottom;
	line-height: 1.4;
	zoom: 1;
}

.fullContent #contentInner #secondary ul li a {
	display: block;
	padding: 6px 5px 5px 24px;
	background: url(../images/icon_arrowDist.gif) no-repeat 10px center;
	color: #333333;
}
.fullContent #contentInner #secondary ul li span {
	display: block;
	padding: 6px 5px 5px 24px;
	background: #fed8be url(../images/icon_arrowDist_on.gif) no-repeat 10px center;
}


/*--------------------------------------
	8.2. フレームパターン②： 1カラムで幅はやや狭い
---------------------------------------*/
.centerContent {
	float: none !important;
	margin-right: auto;
	margin-left: auto;
	width: 800px !important;
}

/* ----- ページタイトル ----- */
.centerContent h1 {
	width: 620px !important;
	background-image: url(../images/bg_mainTitleMiddle.gif) !important;
}

.centerContent h1 .line {
	width: 780px !important;
}

/* ----- 外枠 ----- */
.centerContent #contentInner {
	border-right: 3px solid #cbcbcb;
	border-bottom: 3px solid #cbcbcb;
	border-left: 3px solid #cbcbcb;
}

/* ----- ページサブタイトル ----- */
.centerContent #contentInner  h2 {
	border-top: 1px solid #cbcbcb;
	border-bottom: 1px solid #cbcbcb;
	padding: 10px 0 8px 20px;
	background: #e4e4e4;
	line-height: 1;
	font-weight: bold;
	font-size: 114.3%;
}

/*--------------------------------------
	8.3. テーブル要素のデフォルト設定
---------------------------------------*/
#main .baseTable {
	width: 100%;
}

#main .baseTable th {
	border-right: 1px solid #cbcbcb;
	background: #f1f1f1 url(../images/img_dotline.gif) repeat-x left top;
	padding: 14px 10px 12px;
	line-height: 1.4;
	text-align: left;
	vertical-align: top;
	word-break: break-all;
}

#main .baseTable td {
	background: #ffffff url(../images/img_dotline.gif) repeat-x left top;
	padding: 14px 10px 12px;
	line-height: 1.4;
	text-align: left;
	vertical-align: top;
	word-break: break-all;
}

/* ----- 最初の行 ----- */
#main .baseTable .firstLine th,
#main .baseTable .firstLine td {
	background-image: none;
	padding-top: 13px
}


/*--------------------------------------
	8.4. ページング要素
---------------------------------------*/
#main .pageInfo {
	width: 100%;
	padding: 10px 0;
}

#main .pageInfo .sizeLoading {
	float: left;
	width: 200px;
}

/* ----- 合計件数 ----- */
#main .pageInfo .totalSize {
	float: left;
	width: 200px;
}

#main .pageInfo .totalSize span {
	margin-right: 5px;
	font-weight: bold;
}

/* ----- ページ遷移用リンク ----- */
#main .pageInfo .pagingLink {
	float: right;
	width: 520px;
	text-align: right;
}

#main .pageInfo .pagingLink a,
#main .pageInfo .pagingLink span {
	display: inline-block;
	border: 1px solid #cbcbcb;
	min-width: 18px;
	padding: 8px 5px 7px;
	background: #e5e5e5 url(../images/bg_pagingBtn.gif) repeat-x left top;
	text-align: center;
	line-height: 1;
	vertical-align: top;
	color: #333333;
}
*html #main .pageInfo .pagingLink a,
*html #main .pageInfo .pagingLink span {
	width: 18px;
}

#main .pageInfo .pagingLink span {
	background: #fdd2b4;
}

/* ----- 「前へ」ボタン ----- */
#main .pageInfo .pagingLink .prev {
	margin-right: 6px;
	min-width: 43px;
}
*html #main .pageInfo .pagingLink .prev {
	width: 43px;
}

#main .pageInfo .pagingLink span.prev {
	background: #ffffff;
	color: #cbcbcb;
}

/* ----- 「次へ」ボタン ----- */
#main .pageInfo .pagingLink .next {
	margin-left: 6px;
	min-width: 43px;
}
*html #main .pageInfo .pagingLink .next {
	width: 43px;
}

#main .pageInfo .pagingLink span.next {
	background: #ffffff;
	color: #cbcbcb;
}

/* ----- ページ遷移用リンク（管理画面と同一ver） ----- */
#main .pageInfo .pagenation {
	float: right;
	margin-right: -8px;
	width: 520px;
	padding: 0 0 1px;
	text-align: right;
	letter-spacing: -3px;
	Xfont-size: 0;
	color: #ffffff;
}
*html #main .pageInfo .pagenation {
	letter-spacing: -5px;
}
*:first-child+html #main .pageInfo .pagenation {
	letter-spacing: -5px;
}

#main .pageInfo .pagenation .disabled {
	display: inline-block;
	margin: 0 8px;
	border: 1px solid #cccccc;
	width: 54px;
	padding: 7px 0 6px;
	background: #ffffff;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0;
	line-height: 1;
	font-size: 100%;
	color: #cbcbcb;
}
*html #main .pageInfo .pagenation .disabled {
	display: inline;
}
*:first-child+html #main .pageInfo .pagenation .disabled {
	display: inline;
}

#main .pageInfo .pagenation .dummy {
	visibility: hidden;
}

#main .pageInfo .pagenation a {
	display: inline-block;
	margin: 0 8px;
	border: 1px solid #cccccc;
	min-width: 44px;
	padding: 7px 5px 6px;
	background: #e5e5e5 url(../images/bg_pagingBtn.gif) repeat-x left top;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0;
	line-height: 1;
	font-size: 100%;
	color: #333333;
}
*html #main .pageInfo .pagenation a {
	width: 54px;
	padding-left: 0;
	padding-right: 0;
}

#main .pageInfo .pagenation span {
	margin: 0;
}

#main .pageInfo .pagenation span a {
	margin: 0 1px !important;
	min-width: 16px;
}
*html #main .pageInfo .pagenation span a {
	width: 26px;
	padding-left: 0;
	padding-right: 0;
}

#main .pageInfo .pagenation .current {
	display: inline-block;
	margin: 0 1px;
	border: 1px solid #cccccc;
	width: 26px;
	padding: 7px 0 6px;
	background: #ffd6bc;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0;
	line-height: 1;
	font-size: 100%;
	color: #333333;
}


/*--------------------------------------
	8.5. レコメンド・ランキングなどのベース要素
---------------------------------------*/
#main .baseProductsList {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: 738px;
}

/* ----- 「前へ」ボタン ----- */
#main .baseProductsList .prevBtn{
	position: absolute;
	left: 0;
	top: 29px;
	display: block;
	Xmargin-top: -15px;
	width: 14px;
	height: 30px;
	background: url(../images/btn_recommendPrev.gif) no-repeat left top;
	overflow: hidden;
	text-indent: -9999px;
	z-index: 30;
}

/* ----- 「次へ」ボタン ----- */
#main .baseProductsList .nextBtn {
	position: absolute;
	right: 0;
	top: 29px;
	display: block;
	Xmargin-top: -15px;
	width: 14px;
	height: 30px;
	background: url(../images/btn_recommendNext.gif) no-repeat left top;
	overflow: hidden;
	text-indent: -9999px;
	z-index: 30;
}

/* ----- 商品枠 ----- */
#main .baseProductsList ul {
	padding: 16px 14px 17px;
}
*html #main .baseProductsList ul {
	padding-right: 13px;
	padding-left: 13px;
}

#main .baseProductsList ul li {
	float: left;
	margin: 0 1px;
	width: 140px;
	text-align: center;
	font-size: 85.7%;
}

#main .baseProductsList ul li a {
	text-decoration: underline;
}

#main .baseProductsList ul li p {
	margin: 12px 8px 0 12px;
	line-height: 1.5;
	Xfont-size: 71.4%;
	text-align: left;
}

#main .baseProductsList ul li .name {
	margin: 8px 8px 4px 12px;
	line-height: 1.6;
	Xfont-size: 85.7%;
}

#main .baseProductsList ul li .name a {
	text-decoration: underline;
}

#main .baseProductsList ul li .maker {
	font-size: 90%;
	font-weight: bold;
}

#main .baseProductsList ul li .no {
	font-size: 90%;
}

#main .baseProductsList ul li .code {
	font-size: 90%;
}


#main .baseProductsList ul .hidden {
	background: url(../images/overlay/img_loading.gif) no-repeat 50% 50%;
}

#main .baseProductsList ul .hidden a,
#main .baseProductsList ul .hidden p {
	visibility: hidden;
}

#main .baseProductsList ul li .listNoFrame {
	position: relative;
	margin-top: -5px;
	padding: 15px 0 0;
	background: url(../images/bg_relProduct_blank.gif) no-repeat left top;
	text-align: center;
	zoom: 1;
}

#main .baseProductsList ul li .listNoImage_1 {
	background: url(../images/bg_relProduct_01.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_2 {
	background: url(../images/bg_relProduct_02.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_3 {
	background: url(../images/bg_relProduct_03.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_4 {
	background: url(../images/bg_relProduct_04.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_5 {
	background: url(../images/bg_relProduct_05.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_6 {
	background: url(../images/bg_relProduct_06.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_7 {
	background: url(../images/bg_relProduct_07.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_8 {
	background: url(../images/bg_relProduct_08.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_9 {
	background: url(../images/bg_relProduct_09.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_10 {
	background: url(../images/bg_relProduct_10.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_11 {
	background: url(../images/bg_relProduct_11.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_12 {
	background: url(../images/bg_relProduct_12.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_13 {
	background: url(../images/bg_relProduct_13.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_14 {
	background: url(../images/bg_relProduct_14.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_15 {
	background: url(../images/bg_relProduct_15.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_16 {
	background: url(../images/bg_relProduct_16.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_17 {
	background: url(../images/bg_relProduct_17.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_18 {
	background: url(../images/bg_relProduct_18.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_19 {
	background: url(../images/bg_relProduct_19.gif) no-repeat left top;
}
#main .baseProductsList ul li .listNoImage_20 {
	background: url(../images/bg_relProduct_20.gif) no-repeat left top;
}


/*--------------------------------------
	8.6. 検索エラー時のメッセージ
---------------------------------------*/
#main .searchErrorMessage {
	margin: 20px 0 20px;
	border: 1px solid #ff0000;
	padding: 19px 25px 18px;
	font-size: 114.3%;
	font-weight: bold;
	color: #ff0000;
}


/*--------------------------------------
	8.7. Flash 未対応時のエラー表示
---------------------------------------*/
#content .flashError {
	margin: 0 auto;
	width: 620px;
	padding-top: 114px;
	display: none;
}

#content .flashError p {
	margin-top: 10px;
}

#content .flashError p a,
#content .flashError p img,
#content .flashError p span {
	vertical-align: middle;
}

#content .flashError p span {
	margin-left: 10px;
}

#content .flashError p .textLink {
	padding-left: 8px;
	background: url(../images/icon_arrowS.gif) no-repeat left center;
	text-decoration: underline;
}


/*========================================
	9. コンテンツ領域（サイド領域）
========================================*/
#sidebar {
	float: left;
	width: 200px;
	padding-bottom: 20px;
}


/*========================================
	10. フッター領域
========================================*/
#pootFooter {
	height: 203px;
}

#footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 203px;
	background: url(../images/bg_footer.jpg) repeat-x left 59px;
	cursor: default;
}

#footerInner {
	position: relative;
	margin: 0 auto;
	width: 970px;
	height: 203px;
	z-index: 10;
}

/* ----- フッターナビ ----- */
#footerInner #footerNav {
	position: absolute;
	left: 0;
	top: 75px;
}

#footerInner #footerNav li {
	float: left;
	margin-right: 13px;
	font-size: 0;
}

#footerInner #footerNav li a {
	line-height: 1;
	vertical-align: top;
}

#footerInner #copyright {
	position: absolute;
	right: 0;
	top: 109px;
	width: 363px;
	height: 10px;
	background: url(../images/img_copyright.gif) no-repeat left top;
	text-indent: -9999px;
}

#footerInner #companyName {
	position: absolute;
	right: 0;
	top: 129px;
	display: block;
	width: 105px;
	height: 11px;
	background: url(../images/img_company.gif) no-repeat left top;
	text-indent: -9999px;
}


/* ----- 「ページの先頭へ」ボタン ----- */
#footerInner #pageTop {
	position: absolute;
	right: 0;
	top: 59px;
	z-index: 21;
}

/* ----- フッター飾り（左下部の電球） ----- */
#footerDecorationLeft {
	position: absolute;
	left: 0;
	top: 33px;
	width: 268px;
	height: 170px;
	background: url(../images/bg_footerDecorationLeft.png) no-repeat right top;
	z-index: 1;
}
*html #footerDecorationLeft {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/trusco/common/images/bg_footerDecorationLeft.png);
}

/* ----- フッター飾り（右下部のコード） ----- */
#footerDecorationRight {
	position: absolute;
	right: 0;
	top: 20px;
	width: 117px;
	height: 88px;
	background: url(../images/bg_footerDecorationRight.png) no-repeat right top;
	z-index: 1;
}
*html #footerDecorationRight {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/trusco/common/images/bg_footerDecorationRight.png);
}