@charset "shift_jis";
/*　追加CSS読み込み　*/
@import url("set-cam-incable.css");
@import url("auto-cam-number.css");
@import url("set-dvr-intro.css");
@import url("hdsdi-blink-text.css");




/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■

フォームページの基本構造設定

■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

#form {
	width:100%;
	padding: 0;
	margin: 0;
	text-align: center;
	list-style-type: none;
}
#form-body {
	margin-left:auto;
	margin-right:auto;
	width:1080px;
}
#form-body-left {
	float: left;
	width: 265px;
	overflow: hidden;
}
#form-body-center {
	margin-right:0;
	float: left;
	margin: 0px;
	padding-left: 5px;
	padding-right: 5px;
	width: 605px;
}
#form-body-right {
	float: left;
}

.sentaku{
	display:block;
	width:300px;
	margin-left:auto;
	margin-right:auto;
	padding-top:4px;
	height:30px;
	background:url(https://www.wtw.jp/ccd/img/ver2014/sentaku.gif) no-repeat;
	background-position:5px 0px;
	text-align:center;
	}


/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■
セット冒頭のDVR情報部分
■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/
#set-title{
	width:600px;
	display:block;
	overflow:hidden;
	clear:both;
}
#set-title .set-title-obi{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align:left;
	font-size:20px;
	font-weight:700;
	background:#003300 url(../../img/form/common/set-title-bg.gif) repeat-x;
	padding:3px 3px 3px 3px;
	color:#FFF;
	line-height:1;
	}
#set-title{
	/*background:url(../../img/form/common/dvr-disc-bg.gif) repeat-y;*/
	}

#set-title .left-area{
	padding:0px;
	display:block;
	width:290px;
	float:left;
}
#set-title .left-area .icon{
	overflow:hidden;
	width:270px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	}

#set-title .left-area .icon img{
	float:left;
	margin-left:2px;
	margin-top:2px;
}
/*#set-title .right-area{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width:300px;
	float:right;
}
#set-title .right-area .catch{
	text-align:left;
	display:block;
	font-size:20px;
	font-weight:700;
	color:#FFF;
	line-height:1.1;
	padding:5px 0px 5px 5px;
	background:#F00;
	}
#set-title .right-area .price{
	text-align:left;
	color:#FF0;
	width:300px;
	padding:15px 5px 5px 5px;
	font-size:40px;
	font-weight:700;
	line-height:0.5;
	background:#F00;
	font-style:italic;
	}*/
#set-title .right-area .price .big{ font-size:50px;}
#set-title .right-area .price .tax{ text-align:center; line-height:1.5; font-size:12px; padding:0px;}
#set-title .right-area .discr{
	font-size:12px;
	text-align:left;
	line-height:1.3;
	color:#333;
	padding:10px 10px 10px 10px;
	}
#set-title .right-area .caution ul li{
	background:url(../../img/form/common/caution-dot.gif) no-repeat;
	background-position:0px 2px;
	margin-left:15px;
	text-align:left;
	font-size:12px;
	font-weight:700;
	list-style:none;
	line-height:1.2;
	color:#F00;
	padding-left:11px;
	}


.setnaiyo .naiyotxt-main{ 
	width:160px;
	font-size:12px;
	font-weight:700;
	color:#006;
	font-size:12px;
	position:absolute;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.setnaiyo .naiyotxt-sub{
	display:block;
	font-size:11px;
	color:#006;
	font-size:11px;
	}

.setsuzoku .txt-main{
	font-size:12px;
	color:#006;
	font-size:11px;
	position:absolute;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}



/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■

フォーム背景の設定

基本的に変更の必要は無いが、ステップ数が変わる場合は
背景のclassを増減する必要がある。

現在は最大で7ステップ用までclassを設けているので
htmlにて増減を調整し、CSS内は増加以外は変更しないこと。

■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/



/*form background img*/
#order-bg-top {
	background-image: url(../../img/form/common/form-bg-top.gif);
	background-repeat: no-repeat;
	width: 600px;
	height: 40px;
	margin: 0;
	padding: 0;
	float: left;
	margin-top: 30px;
}
#order-bg-center {
	background-image: url(../../img/form/common/form-bg-center.gif);
	background-repeat: repeat-y;
	width: 600px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 0;
	padding: 0;
	float: left;
}
#order-bg-bottom {
	background-image: url(../../img/form/common/form-bg-bottom.gif);
	background-repeat: no-repeat;
	width: 600px;
	height: 20px;
	margin: 0;
	padding: 0;
	float: left;
	clear: left;
}
/*title comment*/
.step-title1, .step-title2, .step-title3, .step-title4, .step-title5, .step-title6, .step-title7 {
	clear:both;
	font-weight: bold;
	padding-top: 35px;
	padding-left: 85px;
	width: 515px;
	height:35px;
	color: #003;
	text-align: left;
	background:no-repeat;
}
.step-title1{ background-image: url(../../img/form/common/step-num01.gif);}
.step-title2{ background-image: url(../../img/form/common/step-num02.gif);}
.step-title3{ background-image: url(../../img/form/common/step-num03.gif);}
.step-title4{ background-image: url(../../img/form/common/step-num04.gif);}
.step-title5{ background-image: url(../../img/form/common/step-num05.gif);}
.step-title6{ background-image: url(../../img/form/common/step-num06.gif);}
.step-title7{ background-image: url(../../img/form/common/step-num07.gif);}

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■

プルダウンメニューのフォント設定

■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/
/*.font11-red-b {
	font-size: 12px;
	color: #F00;
	font-weight: bold;
}*/
.choise-main-camera {
	color: #ff0000;
	font-size: 20px;
	font-weight: bold;
	background:#ffff00;
}
/*.choise-main-cable {
	color: #FF0000;
	font-size: 22px;
	font-weight: bolder;
	text-align: center;
	border:none;
}*/
.choise-camera-number {
	float:left;
	margin-top:8px;
	margin-left:0px;
	color: #ff0000;
	font-size: 20px;
	font-weight: bold;
	background:#ffff00;
}
.choise-camera-cable {
	text-align:center;
	margin-left:0px;
	color: #ff0000;
	font-size: 20px;
	font-weight: bold;
	background:#ffff00;
}
.choise-camera-cable-num {
	text-align:center;
	margin-left:0px;
	color: #ff0000;
	font-size: 25px;
	font-weight: bold;
	background:#ffffff;
	border:0px;
}

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■

ステップ1用設定

■■■■■■■■■■■■■■■■■■■■■■■■■■■




.step01-1 {
	width:568px;
	padding:10px 16px 16px 16px;
}
.step01-1 .step01-1inbox{
	text-align:left;
	overflow:hidden;
	width:568px;
	background:#ffffff;
	display:block;
}


.step01-1 .step01-1inbox .step01-cam-sel-body{
	
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
}
.step01-1 .step01-1inbox .step01-cam-sel-body ul{
	display:block;
	width:540px;
	margin:0px;
	padding:10px;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	
}
.step01-1 .step01-1inbox .step01-cam-sel-body ul li{
	list-style:none;
	display:block;
	margin:0px;
	padding:0px;
	width:265px;
	float:left;
	padding-left:5px;
	font-size:20px;
	color:#cc0000;
	font-weight:bold;
}
.step01-1 .step01-1inbox .step01-cam-sel-body ul li:hover{
	background:#ffff00;
}
.step01-1 .step01-1inbox .step01-cam-sel-body ul li .camnum{
	font-size:12px;
	color:#000000;
	font-weight:normal;

}
*/

/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■

ステップ2用設定

●他ページでの中分類から1商品項目毎にコピペで追加可能。。
中分類用classの親要素に「.step02」を設定している。

■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/



.step02 {
	background-repeat: no-repeat;
	text-align: left;
}
.step02 .camera-item-head{
	border-top: solid 1px #ffff00;
	clear:both;
	overflow:hidden;
	background:#ffffff;
	width:588px;
	margin-left:7px;
}
.step02 .middle-contents600-cameraname, .step02 .middle-contents600-cameraname-gup{
	float:left;
	color:#ffffff;
	margin-left:0px;
	background-position:4px 2px;
	font-size:14px;
	font-weight:700;
	width:240px;
	height:18px;
	padding:9px 5px 10px 15px;
	/*line-height:0.9;*/
}
.step02 .middle-contents600-cameraname-gup{
	background: url(../../img/form/common/step2-choice-bg.gif) no-repeat;
}
.step02 .middle-contents600-cameraname{
	background: url(../../img/form/common/step2-choice-bg-nrml.gif) no-repeat;
}

.step02 .stp2-choice-menu {
	margin-left:7px;
	clear:both;
	width:583px;
	height:30px;
	/*border-bottom: solid 1px #999;*/
	padding:5px;
}

.step02 .middle-contents600-box {
	clear:both;
	width:588px;
	float:left;
	/*border-left:solid 1px #999;*/
	/*border-right:solid 1px #999;*/
	border-bottom: solid 1px #ffff00;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:#ffffff;
	margin-left:7px;
	margin-bottom:10px;
	/*position: relative;*/
}

.step02 .middle-contents-left {
	
	clear:both;
	width:120px;
	float:left;
	padding: 0px 5px 5px 5px;
	/*position: relative;*/
}
.step02 .middle-img120-box {
	width:120px;
	float:left;
	border-left:solid 1px #999;
	border-right:solid 1px #999;
	border-top:solid 1px #999;
}
.step02 .middle-detail120-box {
	width:120px;
	float:left;
	clear: left;
	font-size: 11px;
	padding-top: 3px;
	background-color: #E8E8E8;
	border: solid 1px #999;
	text-align: center;
}
.step02 .middle-img120-box .hot-items {
	position: relative;
	/*left: 7px;
	top: 6px;*/
}

.step02 .middle-arrow-style {
	display: inline;
	vertical-align: middle;
	padding-right:3px;
	padding-bottom: 4px;
}
.step02 .middle-contents-center {
	float:left;
	/*padding-top: 5px;*/
	width: 270px;
}
.step02 .middle-item-detail {
	color:#000;
	float:left;
	font-size: 12px;
	clear: left;
	width: 270px;
	text-align: left;
}
.step02 .middle-item-detail ul li {
	line-height: 13px;
	list-style: none;
}
.step02 .middle-item-detail ul li .middle-txt-gry-b{
	display:inline;
	margin-top:5px;
	padding:5px;
	background:#CCC;
	width:100px;
	text-align:left;
}

/*
リスト先頭のアイコンの黒丸化設定、ここから

品番その他先頭に「●」を付けたくない場合は
「.modelno」classを使用。
*/
.step02 .middle-item-detail-disc {
	display:compact;
	color:#000;
	float:left;
	font-size: 12px;
	clear: left;
	width: 267px;
	text-align: left;
}
.step02 .middle-item-detail-disc ul li {
	line-height: 13px;
	list-style: none;
	background: url(../../../css/middle-class-layout/img/middle-class-dot.gif) no-repeat;
	background-position:2px 1px;
	padding-left:13px;
}
.step02 .middle-item-detail-disc ul .modelno {
	line-height: 13px;
	background:none !important;
	list-style: none !important;
	padding-left:0px  !important;
}
.step02 .middle-item-detail-disc .middle-txt-gry-b{
	display: inline-block;
	background: #CCC;
	text-align: left;
	margin:5px 0px 10px 0px;
	padding:3px;
}

/*
リスト先頭のアイコンの黒丸化設定、ここまで
*/

.step02 .middle-item-price {
	color:#F00;
	float:left;
	font-size: 17px;
	clear: left;
	font-weight: bold;
	/*border-top: dotted 1px #666;*/
	width: 270px;
	text-align: left;
	/*padding-top: 2px;*/
}
.step02 .middle-contents-right {
	float:left;
	width: 170px;
	min-height:120px;
	background-image: url(https://www.wtw.jp/ccd/css/middle-class-layout/img/bg/icon-bg-mvbl.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	padding: 0px 0px 5px 0px;
	margin:5px 0px 5px 5px;
}
.step02 .h-angle {
	background-image: url(https://www.wtw.jp/ccd/css/middle-class-layout/img/bg/icon-bg-mvbl.gif);
	background-color:#fff;
	width:60px;
	height:31px;
	line-height:3.9;
	padding:0px 0px 0px 110px;
	font-size: 12px;
	padding-bottom: 3px;
	color: #F00;
	font-weight: bold;
}
.step02 .item-icons {
	width: 160px;
	padding-left: 8px;
	float: left;
	font-size: 1px;
}
.step02 .item-icons ul li {
	width: 36px;
	list-style: none;
	float: left;
	padding: 1px;
	height: 36px;
}




/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■

ステップ3用設定

■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/

.step03{
	width:568px;
	padding:10px 16px 16px 16px;

}
.step03 .step03inbox{
	text-align:left;
	overflow:hidden;
	width:568px;
	background:#ffffff;
}
.step03 .step03inbox .step03discription{
	padding-top:10px;
	padding-left:11px;
	font-size:12px;
	font-weight:700;
}
.step03 .step03inbox .step03boxcell-left{
	display:block;
	float:left;
	width:120px;
	padding:16px;
}
.step03 .step03inbox .step03boxcell-right{
	display:block;
	float:left;
	width:384px;
	padding:16px;
}
.step03 .step03inbox .step03boxcell-right .step03text01,
.step03 .step03inbox .step03boxcell-right .step03text01-up{
	padding:5px 0px 5px 0px;
	display:block;
	font-size:14px;
	line-height:1.5;
	color:#000000;
}
.step03 .step03inbox .step03boxcell-right .step03text01-up{
	border-bottom:1px solid #9c9c9c;
}
.step03 .step03inbox .step03boxcell-right .step03text02{
	color:#ff0000;
	font-size:14px;
	font-weight:700;
}


/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■

ステップ4用設定

■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/



.step04-1 {
	width:568px;
	padding:10px 16px 16px 16px;
}
.step04-1 .step04-1inbox{
	text-align:left;
	overflow:hidden;
	width:568px;
	background:#ffffff;
}
.step04-1 .step04-1inbox .step04-1boxcell-left{
	display:block;
	float:left;
	width:120px;
	padding:16px;
}
.step04-1 .step04-1inbox .step04-1boxcell-right{
	display:block;
	float:left;
	width:384px;
	padding:16px;
}
.step04-1 .step04-1inbox .step04-1boxcell-right .step04-1text01,
.step04-1 .step04-1inbox .step04-1boxcell-right .step04-1text01-up{
	padding:5px 0px 5px 0px;
	display:block;
	font-size:11px;
	line-height:1.5;
	color:#000000;
}
.step04-1 .step04-1inbox .step04-1boxcell-right .step04-1text01-up{
	border-bottom:1px solid #9c9c9c;
}
.step04-1 .step04-1inbox .step04-1boxcell-right .step04-1text02{
	display:block;
	color:#ff0000;
	font-size:14px;
	font-weight:700;
	line-height:1;
}



/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■

ステップ5用設定

■■■■■■■■■■■■■■■■■■■■■■■■■■■
*/
.step05 {
	width:568px;
	padding:10px 16px 16px 16px;
}
.step05 .step05inbox{
	text-align:left;
	overflow:hidden;
	width:568px;
	background:#ffffff;
}
.step05 .step05inbox .step05boxcell{
	border-left:1px solid #9c9c9c;
	display:block;
	float:left;
	width:120px;
	padding:10px;
}
.step05 .step05inbox .step05boxcell .step05text01{
	padding:5px 0px 0px 5px;
	display:block;
	font-size:11px;
	line-height:15px;
	color:#000000;
}



/* ■■■ステッカー選択ボタンのロールオーバー設定ここから■■■ */

.step05 .step05inbox .step05boxcell .step05text01 .step05-1ststkr,
.step05 .step05inbox .step05boxcell .step05text01 .step05-2ststkr{
	display:block;
	background:#ffffff;
	padding:3px;
}
/*

マウスオン時の設定↓
現在、背景色のみ。

*/
.step05 .step05inbox .step05boxcell .step05text01 .step05-1ststkr:hover{
	cursor:default;
	background:#D4D4D4;
}

.step05 .step05inbox .step05boxcell .step05text01 .step05-2ststkr:hover{
	cursor:default;
	background:#F9AEAE;
}


/* ■■■ステッカー選択ボタンのロールオーバー設定ここまで■■■ */








/*.step05 {
	background-repeat: no-repeat;
	height: 151px;
	font-size: 11px;
	line-height: 13px;
	padding-right: 16px;
	padding-left: 16px;
	width: 568px;
}
.sticker-box {
	width: 142px;
	padding-top: 70px;
	text-align: center;
	float: left;
	line-height: 15px;
}
.sticker-box ul li {
	text-align: right;
	padding-right: 15px;
}*/
/*comfirm setting*/
#comfirm-img {
	width: 600px;
	padding-top: 20px;
	float: left;
}
/*float price box*/
* {
}
body {
/*_overflow:hidden;*/
}
#footer {
	/*_position:absolute;*/
	z-index:3;
	right:0px;
	left:0px;
	bottom:0px;
	height: 143px;
	background-repeat: repeat-x;
}
#set-footer-bg {
	background-image: url(img/set-footer-cal-bg.gif);
	background-repeat: no-repeat;
	width: 950px;
	height: 143px;
	margin-right: auto;
	margin-left: auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
}
.floatbox-text-ex {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 11px;
	float: left;
	text-align: left;
	padding-top: 5px;
}
.floatbox-text {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 11px;
	float: left;
	text-align: left;
	padding-top: 5px;
	clear: left;
	width: 100%;
}
#lot-no {
	float: left;
	text-align: left;
	border-bottom: dotted 1px #000;
	width: 100%;
}
.pcs-box {
	float: left;
	border-bottom: dotted 1px #000;
	margin-bottom: 3px;
	text-align: right;
	width: 100%;
}
.price-box {
	float: left;
	border-bottom: dotted 1px #000;
	margin-bottom: 3px;
	width: 100%;
}
#footer-right-box {
	float: left;
	padding-top: 50px;
	width: 220px;
}
#comfirm-bt {
	width: 195px;
	padding-left: 25px;
	padding-top: 10px;
	height: 22px;
}
#reset-bt {
	width: 195px;
	padding-left: 25px;
	padding-top: 3px;
	height: 22px;
}
/*float price box text box*/
.floatbox-01 {
	color: #FF0000;
	font-size: 13px;
	border:none;
	background-color: #F5F5F5;
}
.floatbox-02 {
	color: #FF0000;
	font-size: 18px;
	text-align: right;
	border:none;
	background-color: #F5F5F5;
	font-weight: bold;
}
/*float box button*/
#comfirm-button-bg {
	background-image: url(../../img/form/common/step6-confirm-bg.gif);
	height: 120px;
	float: left;
	width: 600px;
}
input.comfirm-btn {
	width:160px;
	height:20px;
	background:url(../../img/form/common/bt-comfirm-off.gif) no-repeat;
	border:none;
	cursor:pointer;
	overflow:hidden;
	display: block;
}
input.reset-btn {
	width:160px;
	height:20px;
	background:url(../../img/form/common/bt-reset-off.gif) no-repeat;
	border:none;
	cursor:pointer;
	overflow:hidden;
	display: block;
}
#comfirm-button {
	float: left;
	width: 225px;
	padding-top: 60px;
	padding-left: 75px;
	padding-bottom: 30px;
}
#reset-button {
	float: left;
	padding-top: 60px;
	padding-bottom: 30px;
	padding-left: 70px;
	width: 230px;
}
/*radio button center*/
.bt-middle {
	vertical-align:middle;
}
/*float box*/
#floatMenu {
	position : absolute;
	width : 196px;
	background-color: #F5F5F5;
	font-size: 12px;
	top: 0px;
	background-repeat: no-repeat;
	border: solid 1px #000;
	text-align: right;
}
.floatMenu-comment {
	width: 180px;
	margin-bottom: 2px;
	margin-left: 5px;
	text-align: left;
}