@charset "UTF-8";

/*
*	Title: オレンジブック.Com - オーバーレイ用CSS
*	URI: 
*	Last Modified: 2009-09-09
*	Description: オーバーレイした要素に適用するスタイルを定義する
*/

/*========================================
	1. 基本定義
========================================*/
body {
	position: relative;
}

/* ----- background ----- */
#overlayScreen {
	display: none;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	filter: alpha(opacity=70);
	opacity: 0.7;
	z-index: 100;
}
* html #overlayScreen {	/* IE6 */
	position: absolute;
	width: expression(document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth + 'px');
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#overlayFrame {
	visibility: hidden;
	position: fixed;
	z-index: 110;
	left: 0;
	top: 0;
	width: 80px;
	height: 80px;
	Xoverflow: hidden;
	Xbackground: #cbcbcb;
	background: #ffffff url(../images/overlay/img_loading.gif) no-repeat 24px 24px;
	z-index: 101;
}
*html #overlayFrame {	/* IE6 */
	position: absolute;
	top: 0;
}

#overlayFrame #overlayContent {
	visibility: hidden;
	position: absolute;
	left: 0;
	top: 0;
}


/*========================================
	X. 商品拡大 要素
========================================*/
#overlayExplainProductZoom{
	border: 5px solid #cbcbcb;
	background: #ffffff;
	text-align: left;
}

#overlayExplainProductZoom h2 {
	position: relative;
	padding: 7px 80px 6px 20px;
	min-height: 27px;
	background: #3d3d3d url(../images/overlay/bg_overlayTitle.gif) repeat-x left top;
	font-weight: bold;
	font-size: 114.3%;
	color: #ffffff;
}

#overlayExplainProductZoom h2 span {
	position: absolute;
	right: 8px;
	top: 50%;
	margin-top: -12px;
	display: block;
	width: 64px;
	height: 24px;
	background: url(../images/overlay/btn_overlayClose.gif) no-repeat left top;
	cursor: pointer;
}

#overlayExplainProductZoom div {
	padding: 20px;
	line-height: 1.6;
}




/*========================================
	2. 環境マーク 要素
========================================*/
#overlayExplainEnviroMark {
	border: 5px solid #cbcbcb;
	width: 630px;
	background: #ffffff;
	text-align: left;
}

#overlayExplainEnviroMark h2 {
	position: relative;
	width: 530px;
	padding: 7px 80px 6px 20px;
	background: #3d3d3d url(../images/overlay/bg_overlayTitle.gif) repeat-x left top;
	font-weight: bold;
	font-size: 114.3%;
	color: #ffffff;
}

#overlayExplainEnviroMark h2 span {
	position: absolute;
	right: 8px;
	top: 50%;
	margin-top: -12px;
	display: block;
	width: 64px;
	height: 24px;
	background: url(../images/overlay/btn_overlayClose.gif) no-repeat left top;
	cursor: pointer;
}

#overlayExplainEnviroMark div {
	padding: 20px;
	background: url(../images/img_dotline.gif) repeat-x left top;
	line-height: 1.6;
}

#overlayExplainEnviroMark div h3 {
	min-height: 26px;
	padding: 1px 0 1px 110px;
	font-weight: bold;
	font-size: 114.3%;
}
*html #overlayExplainEnviroMark div h3 {
	height: 26px;
}

#overlayExplainEnviroMark div p {
	margin-top: 6px;
}

/* ----- 環境マーク3種 ----- */
#overlayExplainEnviroMark div #enviroMark01 {
	background: url(../images/img_enviroMark01.gif) no-repeat left center;
}

#overlayExplainEnviroMark div #enviroMark02 {
	background: url(../images/img_enviroMark02.gif) no-repeat left center;
}

#overlayExplainEnviroMark div #enviroMark03 {
	background: url(../images/img_enviroMark03.gif) no-repeat left center;
}

/* ----- 直次郎マーク8種 ----- */
#overlayExplainEnviroMark div #naojiroMark01 {
	padding-left: 51px;
	background: url(../images/img_picto1.gif) no-repeat left center;
}

#overlayExplainEnviroMark div #naojiroMark02 {
	padding-left: 51px;
	background: url(../images/img_picto2.gif) no-repeat left center;
}

#overlayExplainEnviroMark div #naojiroMark03 {
	padding-left: 51px;
	background: url(../images/img_picto3.gif) no-repeat left center;
}

#overlayExplainEnviroMark div #naojiroMark04 {
	padding-left: 51px;
	background: url(../images/img_picto4.gif) no-repeat left center;
}

#overlayExplainEnviroMark div #naojiroMark05 {
	padding-left: 51px;
	background: url(../images/img_picto5.gif) no-repeat left center;
}

#overlayExplainEnviroMark div #naojiroMark06 {
	padding-left: 51px;
	background: url(../images/img_picto6.gif) no-repeat left center;
}

#overlayExplainEnviroMark div #naojiroMark07 {
	padding-left: 51px;
	background: url(../images/img_picto7.gif) no-repeat left center;
}

#overlayExplainEnviroMark div #naojiroMark08 {
	padding-left: 97px;
	background: url(../images/img_picto8.gif) no-repeat left center;
}

#overlayExplainEnviroMark div #naojiroMark09 {
	padding-left: 51px;
	background: url(../images/img_picto9.gif) no-repeat left center;
}


/* ----- 最初の行 ----- */
#overlayExplainEnviroMark .firstLine {
	background-image: none;
}



/*========================================
	4. お問い合わせ分類 要素
========================================*/
#overlayInquiryCategory {
	border: 5px solid #cbcbcb;
	width: 630px;
	background: #ffffff;
	text-align: left;
}

#overlayInquiryCategory h2 {
	position: relative;
	width: 530px;
	padding: 7px 80px 6px 20px;
	background: #3d3d3d url(../images/overlay/bg_overlayTitle.gif) repeat-x left top;
	font-weight: bold;
	font-size: 114.3%;
	color: #ffffff;
}

#overlayInquiryCategory h2 span {
	position: absolute;
	right: 8px;
	top: 50%;
	margin-top: -12px;
	display: block;
	width: 64px;
	height: 24px;
	background: url(../images/overlay/btn_overlayClose.gif) no-repeat left top;
	cursor: pointer;
}

#overlayInquiryCategory div {
	margin-bottom: 18px;
	max-height: 400px;
	overflow-y: auto;
}
*html #overlayInquiryCategory div {
	height: 400px;
}

#overlayInquiryCategory p {
	margin: 15px 20px 0;
}

#overlayInquiryCategory dl {
	margin: 5px 20px 0;
}

#overlayInquiryCategory dl dt {
	margin: 5px 0 0;
	padding: 0 0 0 21px;
	background: url(../images/icon_howto_arrow.jpg) no-repeat left center;
	zoom: 1;
}

#overlayInquiryCategory dl dt a {
	text-decoration: underline;
	font-weight: bold;
}

#overlayInquiryCategory dl dd {
	margin: 0 0 0 27px;
	padding: 0 0 0 9px;
	background: url(../images/icon_arrowS.gif) no-repeat left center;
	zoom: 1;
}

#overlayInquiryCategory dl dd a {
	text-decoration: underline;
}


/*========================================
	5. COCOMITE 要素
========================================*/
#overlayCocomiteInfo {
	border: 5px solid #cbcbcb;
	width: 630px;
	background: #ffffff;
	text-align: left;
}

#overlayCocomiteInfo h2 {
	position: relative;
	width: 530px;
	padding: 7px 80px 6px 20px;
	background: #3d3d3d url(../images/overlay/bg_overlayTitle.gif) repeat-x left top;
	font-weight: bold;
	font-size: 114.3%;
	color: #ffffff;
}

#overlayCocomiteInfo h2 span {
	position: absolute;
	right: 8px;
	top: 50%;
	margin-top: -12px;
	display: block;
	width: 64px;
	height: 24px;
	background: url(../images/overlay/btn_overlayClose.gif) no-repeat left top;
	cursor: pointer;
}

#overlayCocomiteInfo div {
	padding: 15px 20px;
}

#overlayCocomiteInfo div p {
	margin: 10px 0;
}

#overlayCocomiteInfo div p a {
	text-decoration: underline;
}

#overlayCocomiteInfo div .alert {
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 114.3%
}

#overlayCocomiteInfo div dl {
	margin-left: 15px;
	margin-bottom: 25px;
}

#overlayCocomiteInfo div dt {
	width: 100px;
	float: left;
}

#overlayCocomiteInfo div dd {
	margin-left: 100px;
}


/*========================================
	5. ポップアップ（吹き出し）ヘルプ 要素
========================================*/
.balloonHelpFrame {
	visibility: hidden;
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid #ffffff;
	padding: 3px;
	background: #333333;
	z-index: 50;
}

.balloonHelpFrame div {
	width: 195px;
	padding: 6px 10px 4px;
	background: #ffffff;
	text-align: left;
	font-size: 85.7%;
}

.balloonHelpFrame .arrowL{
	display: none;
	position: absolute;
	left: -8px;
	top: 50%;
	margin-top: -7px;
	width: 11px;
	height: 13px;
	background: url(../images/img_balloonArrowL.gif) no-repeat left top;
	z-index: 51;
}

.balloonHelpFrame .arrowR{
	display: none;
	position: absolute;
	right: -8px;
	top: 50%;
	margin-top: -7px;
	width: 11px;
	height: 13px;
	background: url(../images/img_balloonArrowR.gif) no-repeat left top;
	z-index: 51;
}