@charset "utf-8";

/* 各ページ共通部分のCSS */

/* ==========================
    レイアウト
========================== */
body
{
	margin: 0;
	padding:0;
	text-align: center;
}

html, body, #container
{
	height:100%;
}

body > #container
{
	height:auto;
	min-height:100%;
}

#header,#area,#bottom_service,#container-themes
{
	width: 1000px;
	min-width: 1000px;
	max-width: 1000px;
	margin:0 auto;
	text-align: left;
}

#main {
	margin:0 auto;
	text-align: left;
	padding-bottom:180px;
}

/* 全体エリア */
#container
{
	background-color:#FFFFFF;
	text-align:center;
	width:1000px;
	margin:0 auto 0 auto;
}

/* 全体エリア/*IE6用のハック*/
*html #container
{
	background-color:#FFFFFF;
	text-align:center;
	width:1010px;
	margin:0 auto 0 auto;
	padding-bottom:35px;
}

/* 左サイド */
#leftArea
{
	float: left;
	width:200px;
}
/* ---------- お見積書発行 */
#leftArea #estimate {
	margin:0 0 10px;
	text-align:center;
}
/* ---------- サイト表記 */
#leftArea #sitepolicy {
	margin:0 8px;
}

#leftArea #sitepolicy p {
	margin-top:8px;
	font-size:11px;
	color:#666666;
	text-align:left
}

#leftArea #sitepolicy div.ssl {
	text-align:center;
	border-bottom:dotted 1px #ccc;
	padding:0 0 8px;
	margin:0 0 8px;
}
#leftArea #sitepolicy div.privacy {
	text-align:center;
	border-bottom:dotted 1px #ccc;
	padding:0 0 8px;
	margin:0 0 8px;
}
#leftArea #sitepolicy div.privacy p {
	text-align:center;
}
#leftArea #sitepolicy div.thema {
	text-align:center;
	border-bottom:dotted 1px #ccc;
	padding:0 0 8px;
	margin:0 0 8px;
}

/* 右サイド */
#rightArea
{
	float: right;
	clear:right;
	width:200px;
}

#rightArea h2.title
{
	width:200px;
	height:50px;
	background: url("../img/common/menu-head.gif") no-repeat scroll 0 0 transparent;
	line-height:50px;
}
#rightArea h2.title span
{
	padding:0 0 0 40px;
}
#rightArea div.middle
{
	background: url("../img/common/menu-back.gif") repeat-y scroll 0 0 transparent;
	margin:0;
	padding:0 10px;
}
#rightArea div.bottom
{
	background: url("../img/common/menu-bottom.gif") repeat-y scroll 0 0 transparent;
	height:12px;
	margin:0 0 10px;
}


#rightArea dl#link
{
	margin:0 0 10px;
	text-align:center;
}

#rightArea dl#link dt
{
	margin:0 0 3px;
	padding:0;
}
#rightArea dl#link dd
{
	margin:0;
	padding:0;
}
#rightArea div.information
{
	margin:0 3px 10px;
	text-align:center;
}
#rightArea #data
{	
	margin:0;
	padding:5px 0;
}
#rightArea #guide
{
	margin:0;
	padding:5px 0;
}
#rightArea #bill
{
	margin:0;
	padding:10px 0;
	text-align:center;
	border-bottom:dotted 1px #ccc;
}
#rightArea #credit
{
	margin:0;
	padding:5px 0;
	text-align:center;
}


/* ボディ */

body.mainIndex #contents
{
	margin:0 200px 0;
}

body.category #contents, body.page #contents, body.mypage #contents , body.mypage #contents
{
	float: right;
	padding-left: 19px;
	width:780px;
}

/* ==========================
    1カラム
========================== */

body.OneColumn #contents
{
	margin: 0 auto;
	width:800px;
	text-align: left;
	padding-bottom:180px;
}

body.OneColumn #contents h2
{
	padding-left:25px;
	font-size:153.9%;
	line-height:18px;
	background:url(../img/common/sh-dot.gif) 0 0 no-repeat;
}

body.OneColumn #contents h3.long {
	background:transparent url(../img/common/sh-blueback800.gif) no-repeat scroll 0 0;
	color:#444;
	font-size:123.1%;
	height:40px;
	letter-spacing:0.1em;
	line-height:40px;
	margin-bottom:15px;
	width:800px;
	padding-left: 18px;
}

body.OneColumn #contents h3.short {
	width:385px;
	background:url("../img/cart/sh-blueback385.gif") no-repeat scroll 0 0 transparent;
	color:#444;
	font-size:123.1%;
	height:40px;
	letter-spacing:0.1em;
	line-height:40px;
	margin-bottom:15px;
	padding-left: 18px;
}

body.OneColumn #contents div.note
{
	width:800px;
	margin:0 0 20px 0;
	padding: 8px 0 0 0;
	background:url(../img/common/bg800gray-up.gif) 0 0 no-repeat #eee;
}

body.OneColumn #contents div.note .inner
{
	width:800px;
	padding-bottom: 5px;
	background:url(../img/common/bg800gray-low.gif) bottom no-repeat;
}

body.OneColumn #contents div.note p
{
	margin:0;
	padding:0 8px;
}
/* ==========================
    ワイドカラム
========================== */

body.WideColumn #contents
{
	margin: 0 auto;
	width:950px;
	text-align: left;
	padding-bottom:0px;
}

body.WideColumn #contents div.note
{
	width:950px;
	margin:0 0 20px 0;
	padding: 8px 0 0 0;
	background:url(../img/common/bg950gray-up.gif) 0 0 no-repeat #eee;
}

body.WideColumn #contents div.note .inner
{
	width:950px;
	padding-bottom: 5px;
	background:url(../img/common/bg950gray-low.gif) bottom no-repeat;
}

/* ==========================
    2カラム
========================== */

body.TwoColumn #contents
{
	margin: 0 auto;
	width:780px;
	text-align: left;
	float: right;
}

body.TwoColumn #contents h2.dot
{
	padding-left:25px;
	font-size:153.9%;
	line-height:18px;
	background:url(../img/common/sh-dot.gif) 0 0 no-repeat;
}

body.TwoColumn #contents h3.long {
	background:transparent url(../img/common/sh-blueback.gif) no-repeat scroll 0 0;
	color:#444;
	font-size:123.1%;
	height:40px;
	letter-spacing:0.1em;
	line-height:40px;
	margin-bottom:15px;
	width:780px;
	padding-left: 18px;
}

body.TwoColumn #contents div.note
{
	width:780px;
	margin:0 0 20px 0;
	padding: 8px 0 0 0;
	background:url(../img/common/bg730gray-up.gif) 0 0 no-repeat #eee;
}

body.TwoColumn #contents div.note .inner
{
	width:780px;
	padding-bottom: 5px;
	background:url(../img/common/bg730gray-low.gif) bottom no-repeat;
}

body.TwoColumn #contents div.note p
{
	margin:0;
	padding:0 8px;
}

/* ==========================
    フォントの指定
========================== */
body
{
	font-family:Verdana, Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: #313131;
	background-color:#fff;
}

* + html body
{
	font-family: "メイリオ", "Meiryo";
}

/* リンクの指定 */
a:link
{
	color: #152290;
}

a:visited
{
	color: #152290;
}

a:hover
{
	color: #f00202;
	text-decoration:none;
}

a.blank
{
	background: url("../img/common/window.gif") no-repeat scroll 0 0 transparent;
	padding:2px 0 2px 18px;
}

/* 着色指定 */

span.red
{
	color:#ff0000;
}

/* ==========================
    ヘッダー
========================== */
#header
{
	position :relative;
	height:105px;
}

/* ロゴ */
#header .toplogo
{
	position :absolute;
	top: 20px;
	left:0;
	float: left;
}

/* 概要 */
#header h1.description
{
	position :absolute;
	top:5px;
	left:0px;
	font-size:77%;
	color:#313131;
}

/* ==========================
    フォーム制御
========================== */
.updnWatermark {   
	color: #999;
	padding: 0px 0px 0px 5px;
}  

.required_bg {
	background:#f8ded1;
}

.formError {
	position:absolute;
	top:300px; left:300px;
	padding-bottom:13px;
	display:block;
	z-index:5000;
}
#debugMode{
	background:#000;
	position:fixed;
	width:100%; height:200px;
	top:0; left:0;
	overflow:scroll;
	opacity:0.8;
	display:block;
	padding:10px;
	color:#fff;
	font-size:108%;
	z-index:100000;
}
		
.ajaxSubmit{ padding:20px; background:#55ea55;border:1px solid #999;display:none}

/* エラーダイアログの定義 */
.formError .formErrorContent {
	width:100%; 
	white-space:nowrap;
	background:#EE2200;
	color:#fff;
	#width:150px;
	#font-family:tahoma;
	font-size:77%;
	border:1px solid #ddd;
	box-shadow: 0px 0px 2px #000;
	-moz-box-shadow: 0px 0px 6px #000;
	-webkit-box-shadow: 0px 0px 6px #000;
	padding:1px 5px 1px 5px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
.greenPopup .formErrorContent {background:#33be40;}
			
.blackPopup .formErrorContent {background:#393939;color:#FFF;}
			
.formError .formErrorArrow{
	position:absolute;
	bottom:0;left:20px;
	width:15px; height:15px;

	z-index:5001;
}
.formError .formErrorArrowBottom{top:0;margin:-6px;}
			
.formError .formErrorArrow div{
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
	box-shadow: 0px 1px 2px #444;
	-moz-box-shadow: 0px 2px 3px #444;
	-webkit-box-shadow: 0px 2px 3px #444;
	font-size:0px; height:2px; background:#EE2200;margin:0 auto;line-height:0px; font-size:0px; display:block;
}
.formError .formErrorArrowBottom div{
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}
					
.greenPopup .formErrorArrow div{background:#33be40;}
.blackPopup .formErrorArrow div{background:#393939;color:#FFF;}

.formError .formErrorArrow .line10{width:15px;border:none;} 
.formError .formErrorArrow .line9{width:13px;border:none;} 
.formError .formErrorArrow .line8{width:11px;} 
.formError .formErrorArrow .line7{width:9px;} 
.formError .formErrorArrow .line6{width:7px;} 
.formError .formErrorArrow .line5{width:5px;} 
.formError .formErrorArrow .line4{width:3px;} 
.formError .formErrorArrow .line3{width:1px;
border-left:2px solid #ddd;
border-right:2px solid #ddd;
border-bottom:0px solid #ddd;} 
.formError .formErrorArrow .line2{width:3px;border:none;background:#ddd;}
.formError .formErrorArrow .line1{width:1px;border:none;background:#ddd;}


/* Form Width */
.box2 { width: 22px; }
.box3 { width: 33px; }
.box4 { width: 40px; }
.box5 { width: 48px; }
.box6 { width: 54px; }
.box8 { width: 68px; }
.box10 { width: 82px; }
.box15 { width: 117px; }
.box16 { width: 130px; }
.box20 { width: 152px; }
.box25 { width: 187px; }
.box30 { width: 222px; }
.box33 { width: 243px; }
.box35 { width: 257px; }
.box40 { width: 292px; }
.box45 { width: 341px; }
.box50 { width: 362px; }
.box52 { width: 376px; }
.box54 { width: 390px; }
.box60 { width: 432px; }
.box65 { width: 467px; }
.box68 { width: 488px; }
.box76 { width: 544px; }

/* ime-mode IE, Firefox3 */
.imeDisabled {
	ime-mode: disabled;
}

.imeActive {
	ime-mode: active;
}

/* watermark */
.watermark {
	color: #999 !important;
}

.errorField {
	border-color:#FF7594;
	background:#FFC8F1;
}

/* error message */
div.error {
	margin:1em 0px;
	border:solid 1px #FF0000;
	background-color:#FFF0F5;
	padding:10px;
	color:red;
	font-weight:bold;
}

div.info {
    background-color:#E0FFFF;
    border-style:solid; 
    border-color:blue;
    border-width:2px;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 2px 2px 2px 2px;
    font-size: 87.5%; line-height: 150%;
}

span.reiqured {
  color: #FF0000;
	background-color:#FFFFFF;
	font-size:92%;
	padding:1px 3px;
	margin:0 0 0 5px;
}

/* ==========================
    グローバルナビ
========================== */

#globalNavi
{
	background-color:#ee2604;
	margin-bottom:20px;
}

#globalblock
{
  background-color: #EE2604;
	margin:0 auto 0 auto;
	width:1000px;
}

*html #globalblock
{
	margin:0 auto 0 auto;
	width:1000px;
}


/* ----------  メイン（大） */

#gNavi-main
{
	height:28px;
	background: url("../img/common/gNavi-back.gif") no-repeat scroll right 50% transparent;
}

#gNavi-main li
{
	float: left;
	width:200px;
	line-height:28px;
	height:28px;
	background: url("../img/common/gNavi-back.gif") no-repeat scroll left 50% transparent;
}

#gNavi-main li a
{
	color:#FFFFFF;
	text-decoration:none;
	font-weight:bold;
}
#gNavi-main li a:hover
{
	color:#FF9999;
	text-decoration:none;
	font-weight:bold;
}

#gNavi-sub
{
	position :absolute;
	top:75px;
	right:0px;
}

#gNavi-sub li
{
	float: left;
	margin-left:10px;
	background: url("../img/common/arrow-bl-dot-left.gif") no-repeat scroll 5px 50% transparent;
	padding: 5px 5px 5px 22px;
}

#gNavi-sub li.ico_login
{
	background: url("../img/common/icon_key.gif") no-repeat scroll 0 50% transparent;
	padding: 5px 5px 5px 22px;
}

#gNavi-sub li.ico_cart
{
	background: url("../img/common/icon_cart.gif") no-repeat scroll 0 50% transparent;
	padding: 5px 5px 5px 22px;
}

/* ==========================
    左サイド
========================== */

#leftArea h2.title
{
	width:200px;
	height:43px;
	line-height:50px;
	background: url("../img/common/menu-head.gif") no-repeat scroll 0 0 transparent;
}
#leftArea h2.title span
{
	padding: 0 0 0 40px;
}

#leftArea div.menu
{
	background: url("../img/common/menu-back.gif") repeat-y scroll 0 0 transparent;
	height:180px;
}
#leftArea div.bottom
{
	background: url("../img/common/menu-bottom.gif") repeat-y scroll 0 0 transparent;
	height:12px;
	margin:0 0 10px;
}


#leftArea #searchBox h3, #leftArea dl.menu dt
{
	height:30px;
}

/* ----------  検索フォーム */
#leftArea #searchBox p
{
	padding:0 10px 8px 10px;
	background:url(../img/common/side-sh-bottom.gif) bottom no-repeat #6c6c6c;
}

#leftArea #searchBox li
{
	width: 180px;
	float:left;
}

#leftArea #searchBox p input
{
	width:155px;
	border:none;
	padding:2px;
	background:url(../img/common/ic-side-search.gif) right no-repeat #ffffff;
}

/* ----------  すぐにわかる！ */
#leftArea #support
{
	margin-bottom:20px;
	text-align:center;
}

/* ---------- サイト表記 */
#leftArea #sitepolicy li
{
	margin: 0 10px 10px 10px;
	font-size:85%;
	color:#666;
}

/* ----------  商品のリスト */

#leftArea ul
{
	margin-bottom:10px;
}

#leftArea ul li.cate_section
{
	width:200px;
	background: url("../img/common/menu-back.gif") repeat-y scroll 0 0 transparent;
}

#leftArea ul li.cate_section a
{
	display:block;
	text-decoration: none;
	color:#313131;
	padding:5px 12px 5px 34px;
	background: url("../img/common/arrow-red-right.gif") no-repeat scroll 20px 11px transparent;
}

#leftArea ul li.cate_section a:hover
{
	background: url("../img/common/menu-select.gif") no-repeat scroll 10px 50%;
}

#leftArea ul li ul li.cate_section2 a
{
	display:block;
	border-bottom:1px solid #e1e1e1;
	border-right:1px solid #f5f5f5;
	text-decoration: none;
	padding:0px 12px 0 29px;
	height:38px;
	line-height:38px;
	background: url("../img/common/arrow-red-right.gif") no-repeat scroll 10px 50% #e8e8e8;
}

#leftArea ul li ul li.cate_section2 a:hover
{
	background: url("../img/common/arrow-red-right.gif") no-repeat scroll 10px 50% #FFF;
}

/* ----------  ご利用ガイドサイドメニュー */
#leftArea dl.menu dt
{
	height:30px;
}

#leftArea dl.menu dd
{
	margin-bottom:15px;
}

#leftArea dd.section a
{
	display:block;
	font-size:90%;
	line-height:20px;
	background:#EEEEEE;
	border-bottom:1px solid #fff;
	text-decoration: none;
	color:#313131;
	padding:3px 8px;
}

#leftArea dd.section br
{
	margin:0;
	padding:0;
	display:none;
}

#leftArea dd.section a:hover
{
	color:#fff;
	background: #707070;
	font-size:90%;
	line-height:20px;
}

/* ==========================
    右サイド
========================== */
#rightArea div.section
{
	width:180px;
	margin-bottom:10px;
}

#rightArea div.section2
{
	width:180px;
	margin-bottom:10px;
}

#rightArea div.feature
{
	text-align:left;
	border-top:solid 4px #003399;
	border-right:solid 1px #cccccc;
	border-left:solid 1px #cccccc;
	border-bottom:solid 1px #cccccc;
}

#rightArea div.info-side
{
	text-align:left;
	border-top:solid 4px #990000;
	border-right:solid 1px #cccccc;
	border-left:solid 1px #cccccc;
	border-bottom:solid 1px #cccccc;
}

#rightArea div.feature img, #rightArea div.info-side img
{
	margin:5px 0px 5px 10px;
}

#rightArea div.feature p, #rightArea div.info-side p
{
	margin:0px 10px 5px 10px;
	color:#666666;
	font-size:93%;
}

/* ----------  商品のリスト */
#rightArea dl.menu dt
{
	height:30px;
}

#rightArea dd.section a
{
	display:block;
	font-size:90%;
	line-height:20px;
	background:#EEEEEE;
	border-bottom:1px solid #fff;
	text-decoration: none;
	color:#313131;
	padding:3px 8px;
}

#rightArea dd.section br
{
	margin:0;
	padding:0;
	display:none;
}

#rightArea dd.section a:hover
{
	color:#fff;
	background: #707070;
	font-size:90%;
	line-height:20px;
}

/* ==========================
    サービス一覧
========================== */
#bottom_service
{
	font-size:93%;
	margin-top:125px;
	padding-top:25px;
	border-top:1px dotted #ccc;
	
}

#bottom_service ul li
{
	float: left;
	margin:0 10px 10px 0;
	width:180px;
}

#bottom_service ul .ServiceName
{
	background: url("../img/common/arrow-red-right.gif") no-repeat scroll 0 50% #FFF;
	padding: 3px 6px 3px 15px;
	border-bottom:dotted 1px #CCC;
	margin-bottom:10px;
	font-weight:bold;
}

#bottom_service ul li ul li
{
	font-size:85%;
	margin:0 4px;
}

#bottom_service ul li ul li a
{
	color:#666;
}

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

#footer
{
	text-align:center;
	height:150px;
	margin-top:-150px;
	background:#313131;
}

#container-themes
{
	background:#313131;
}

#container-footer
{
	background:#EFEFEF;
}

/* 著作権表記 */
address
{
	font-size:93%;
	color:#999;
	text-align:center;
}

/* ==========================
    サイトテーマ
========================== */
#themes
{
	color:#FFF;
	font-size:77%;
}

#themes p
{
	margin-bottom:10px;
}

#themes a
{
	color:#FFF;
}


#footer ul li
{
	float: left;
	margin-right:20px;
}
#themes ul li a
{
	padding-left:15px;
	background-image: url(../img/common/arrow-yl-dot-right-f.gif);
	background-repeat: no-repeat;
	background-position: 0 center;
}

/* ==========================
    フッターコンテンツ
========================== */

#area
{
	padding:8px 12px;
	background-color:#EFEFEF;
	margin-bottom:10px;
}

/* 小さいロゴ */
#area ul li
{
	height:60px;
	line-height:60px;
	color:#313131;
	font-size:77%;
}

/* ==========================
    clearfix
========================== */
.clearfix
{
	display:inline-block;
	min-height:1%;  /* for IE 7*/
}

.clearfix:after
{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/* Hides from IE-mac \*/
  * html .clearfix
{
	height: 1%;
}

.clearfix
{
	display: block;
}

/* End hide from IE-mac */

.clear
{
	clear:both;
}