@charset "UTF-8";
/* CSS Document */

body {
	margin:0; padding:0;
}
#estimateWrapper {
	position:absolute;
	/*background:url(../img/bg.png) repeat-x 0 0;*/
	width:100%;
	/*border:1px solid #00F;*/
}
#hacoCanvas {
	position:absolute;
	width:1710px; height:760px;
	overflow:hidden;
	left:-560px;
	/*border:1px solid #F00;*/
}
#icNo1,#icNo2,#icNo3,#icNo4,#icNo5,#icNo6,#icNo7 {
	position:absolute;
	display:none;
}




/*main area*/
#mainArea {
	position:relative;
	width:1190px; height:760px;
	margin:0 auto;
	/*border:1px solid #0F0;*/
}
/*head*/
#header {
	position:absolute;
}
#header h1 {
	position:absolute;
	left:8px; top:4px;
}
#logo {
	position:absolute;
	left:6px; top:21px;
}
#logo a {
	display:block;
	line-height: 1.5;
	width:214px; height: 0; padding-top: 70px; overflow: hidden;
	background: url(../img/logo.png) no-repeat 0 0;
}

/*util*/
#util {
	position:absolute;
	left:176px; top:16px; width:292px; height:68px;
	/*background:#ccc;*/
}
#util li {
	display:inline-block;*display:inline;*zoom:1;
	margin:0 18px 0 0; padding:0;
}
#util li a {
	display:block;
	width:50px; height:0; padding-top:68px; overflow:hidden;
}
#util li#rotateAuto a {
	background: url(../img/bt_rorateAuto.png) no-repeat 0 0;
}
#util li#showBg a {
	background: url(../img/bt_showBg.png) no-repeat 0 0;
	opacity:0.2;
}
#util li#putObject a {
	background: url(../img/bt_putObject.png) no-repeat 0 0;
	opacity:0.2;
}
#util li#openLid a {
	background: url(../img/bt_openLid.png) no-repeat 0 0;
}
#util li#btExpansion a {
	background: url(../img/bt_expansion.png) no-repeat 0 0;
}
#util li#descriptShape a {
	background: url(../img/bt_descriptShape.png) no-repeat 0 0;
}





/*------------------------------*/
/*セットアップエリア*/
#setupArea {
	position:absolute;
	width:538px; height:562px; left:612px; top:37px;
	/*border:1px solid #F00;*/
}
#setupArea h3 {
	position:absolute;
	font-size:146%; font-weight:normal;
	left:35px; top:23px; z-index:22;
}
#setupArea #keijouImage {
	position:absolute;
	left:-30px; top:-24px; z-index:21;
	display:none;
}
.btTeikei {
	position:absolute;
	right:50px; top:26px; z-index:23;
	/*display:none;*/
}
.btTeikei a {
	display:block;
	width:180px; height:22px;
	background-color:#33BEEF;
	padding:3px 0 0 0;
	margin:0 0 0 8px;
	font-size:105%; font-weight:bold; color:#FFF; text-align:center;
	border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;
}


/*pulldown*/
section {
	position:relative;
}
section .content select {
	font-size:100%; width:298px; height:23px; padding:2px 0 0 11px;
	-webkit-appearance: none;-moz-appearance: none;appearance: none;
	border: 1px solid #BBB;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
	background: #FFF url(../img/slc_arrow.png) right 50% no-repeat;
	background-size: 21px, 23px;
}
section .content select.prt1 {
	 width:190px;
	 margin-right:10px;
}
section .content select.prt2 {
	 width:94px;
}
/*[?]button*/
.btQuestion a {
	position:absolute;
	right:18px; top:2px;
	width:17px; height:0; padding-top:16px; overflow:hidden;
	background: url(../img/bt_question.png) no-repeat 0 0;
	display:block;
}
.btQuestion a:hover {background-position:0 -16px;}
#deliArea section#deliveryDate .btQuestion a {
	right:-33px; top:3px;
}
#recommendArea h3 .btQuestion a {
	position:relative;
	display:inline-block;*display:inline;*zoom:1;
	right:0; top:0; vertical-align:top;
	margin:-2px 0 0 2px;
}

/*----------*/
/*基本設定エリア*/
#basicArea {
	position:absolute;
	padding:23px 0 0 35px;
	width:503px; height:539px;
	background:#ECECEE;
	border-radius:10px 0 10px 10px;-moz-border-radius:10px 0 10px 10px;-webkit-border-radius:10px 0 10px 10px;
	box-shadow: 6px 6px 16px rgba(0,0,0,.3);
}
#basicArea h4,
#optionArea h4 {
	display:inline-block;*display:inline;*zoom:1;
	font-size:103%; font-weight:normal; line-height:108%;
	width:140px; /*height:15px;*/
	padding:2px 0 0 7px;
	margin:0 0 12px 0;
	border-left:3px solid #333;
	vertical-align:-4px;
}
#basicArea section .content,
#optionArea section .content {
	vertical-align:top;
}
#boxShape {
	display:none;
}
ul#sideTab {position:absolute;top:0;right:-37px;width:37px;height:auto;z-index:21;}
ul#sideTab li {height:104px;margin-bottom:1px;}


/*boxSize*/
section#boxSize {
	margin:44px 0 14px 0;
}
section#boxSize #minmax {
	font-size:70%; color:#808080;
}
section#boxSize #minmax .low {
	position:absolute;
	right:284px; top:20px;
	color:#333;
}
section#boxSize #minmax .high {
	position:absolute;
	right:63px; top:20px;
	color:#333;
}
section#boxSize ul.content {
	width:100%;
}
section#boxSize ul.content li {
	position:relative;
	display:inline-block;*display:inline;*zoom:1;
	width:100%;
	margin:0 0 7px 0;
	letter-spacing:normal;
	background: left 1px no-repeat;background-size:21px auto;
}
section#boxSize ul.content li.no1 { background-image: url(../img/ic_no1.png); }
section#boxSize ul.content li.no2 { background-image: url(../img/ic_no2.png); }
section#boxSize ul.content li.no3 { background-image: url(../img/ic_no3.png); }
section#boxSize ul.content li.no4 { background-image: url(../img/ic_no4.png); }
section#boxSize ul.content li.no5 { background-image: url(../img/ic_no5.png); }
section#boxSize ul.content li.no6 { background-image: url(../img/ic_no6.png); display:none;}
section#boxSize ul.content li.no7 { background-image: url(../img/ic_no7.png); display:none;}
section#boxSize ul.content li p.title {
	display:inline-block;*display:inline;*zoom:1;
	padding:0 0 0 26px;
	width:66px;
}
section#boxSize ul.content li input {
	font-size:108%; width:50px; height:23px; padding:0 3px 0 0;
	text-align:right;
	border: 1px solid #CCC;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
}
section#boxSize ul.content li span.mm {
	display:inline-block;*display:inline;*zoom:1;
	font-size:85%; font-weight:normal;
	padding:0 0 0 4px;
	width:45px;
}
/*size slider*/
section#boxSize ul.content li div.slider {
	position:absolute;
	right:52px; top:0; width:264px; height:22px;
	/*background:#CCC;*/
}
section#boxSize ul.content li div.slider p.low {
	position:absolute;
	left:0; top:0; width:32px; height:22px;
	text-align:right;
	line-height: 22px;
}
section#boxSize ul.content li div.slider p.high {
	position:absolute;
	right:0; top:0; width:32px; height:22px;
	text-align:left;
	line-height: 22px;
}
section#boxSize ul.content li div.slider div {
	position:absolute;
	left:42px; top:10px; width:180px; height:2px;
	background:#FFF;
	border:none;
}
section#boxSize ul.content li div.slider .ui-slider-handle {
	width:16px;
	height:16px;
	margin-top:-4px;
	background:url(../img/sliderNob.png);
	border-color:#DDD;
	border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
}
section#boxSize ul.content li div.slider .ui-slider-handle:active {
	border-color:#33BEEF;
}

/*error*/
section#boxSize ul.content li input {animation: none;}
div#foilStamping ul.content li input {animation: none;}
section#quantity div.content input {animation: none;}
@keyframes redFlush { 50%{box-shadow: 0 0 0 4px #f00;} }

/*printColor*/
#basicArea .content,
#optionArea .content {
	display:inline-block;*display:inline;*zoom:1;
	/*border:1px solid #F00;*/
}

/*タブ切り替えボタン*/
#btBasicArea,
#btOptionArea {
	text-align:right;
	margin:12px 50px 0 0; 
}
#btBasicArea a,
#btOptionArea a {
	display:inline-block;*display:inline;*zoom:1;
	width:153px; height:22px;
	background-color:#33BEEF;
	padding:3px 0 0 0;
	margin:0 0 0 8px;
	font-size:105%; font-weight:bold; color:#FFF; text-align:center;
	border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;
}
#btBasicArea a,
#btBasicArea a::before,
#btBasicArea a::after,
#btOptionArea a,
#btOptionArea a::before,
#btOptionArea a::after,
.btTeikei a::before,
.btTeikei a::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}
#btBasicArea a:hover,
#btOptionArea a:hover,
.btTeikei a:hover {
	background-color:#52CCFF;
	text-decoration:none;
}
#btBasicArea a:active,
#btOptionArea a:active,
.btTeikei a:active {
	-webkit-transition: all 0s;
	transition: all 0s;
	background-color:#FFEA59;
}


/*----------*/
/*オプション設定エリア*/
#optionArea {
	position:absolute;
	padding:23px 0 0 35px;
	width:503px; height:539px;
	background:#E9E9E9;
	border-radius:10px 0 10px 10px;-moz-border-radius:10px 0 10px 10px;-webkit-border-radius:10px 0 10px 10px;
	box-shadow: 10px 10px 16px rgba(0,0,0,.2);
	display:none;
}
/*箔*/
section#foilStamping {
	margin:44px 0 0 0;
}
section#foilStamping ul.content {
	margin:-5px 0 12px 156px;
}
section#foilStamping ul.content li {
	display:inline-block;*display:inline;*zoom:1;
	margin:0 20px 0 0;
}
section#foilStamping ul.content li span {
	display:inline-block;*display:inline;*zoom:1;
	font-size:85%; font-weight:normal;
	padding:0 0 0 4px;
	width:45px;
}
section#foilStamping ul.content li input {
	font-size:108%; width:50px; height:23px; padding:0 3px 0 0;
	text-align:right;
	border: 1px solid #CCC;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
}
section#foilStamping ul.content li .minmax {
	color:#666;font-size:85%;vertical-align:15px;display:block; margin-left:2.5em;
}
/*梱包*/
section#packingMethod .content_konpou_suryou {
	margin:-5px 0 0 156px;
}
section#packingMethod .content_konpou_suryou input {
	font-size:108%; width:50px; height:23px; padding:0 3px 0 0;
	text-align:right;
	border: 1px solid #CCC;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
}
section#packingMethod .content_konpou_suryou span {
	margin-left:15px;color:#FF2626;
}


/*----------*/
/*deliArea*/
/*quantity*/
#deliArea {
	z-index:30;
	position:absolute;
	bottom:30px; left:0;
	width:452px; height:105px;
	margin:0 0 0 35px;
	border-top:1px dotted #777;
	padding-top:17px;
}
#deliArea section#quantity {
	
}

#deliArea section#quantity h4 {
	display:inline-block;*display:inline;*zoom:1;
	font-size:103%; font-weight:normal; line-height:108%;
	width:45px; /*height:15px;*/
	padding:2px 0 0 7px;
	margin:0 0 12px 0;
	border-left:3px solid #333;
	vertical-align:-4px;
}
#deliArea section#quantity .content {
	display:inline-block;*display:inline;*zoom:1;
}
#deliArea section#quantity .content input {
	font-size:108%; width:76px; height:23px; padding:0 3px 0 0;
	text-align:right;
	border: 1px solid #CCC;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
}
#deliArea section#quantity .content span {
	display:inline-block;*display:inline;*zoom:1;
	font-size:96%; font-weight:normal;
	padding:0 0 0 4px;
	/*width:45px;*/
	vertical-align:-1px;
}
#deliArea ul.listButton {
	letter-spacing:-0.4em;margin-bottom:10px;
}
#deliArea section#quantity ul.listButton {
	width:413px;
	margin:-6px 0 10px 59px;
}
#deliArea ul.listButton li {letter-spacing:normal;display:inline-block;*display:inline;*zoom:1;margin-right:4px;width:54px;height:31px;background:url(../img/bg_listbt.png) no-repeat;
text-align:center;font-size:93%;}
#deliArea ul.listButton li a {display:block;width:54px;height:24px;padding-top:7px;color:#333;text-decoration:none;}
#deliArea ul.listButton li.slc {background:url(../img/bg_listbt_slc.png)no-repeat;}
#deliArea ul.listButton li.disabled {opacity:0.5;filter:alpha(opacity=50);-ms-filter: "alpha( opacity=50 )";}
#deliArea ul.listButton li.attent {background:none;width:80px;text-align:left;margin-right:0px;}

#deliArea span.bltx {color:#33BEEF;display:inline;}

/*deliveryDate*/
#deliArea section#deliveryDate {
	width:452px;
	margin:14px 0 0 0;
}
#deliArea section#deliveryDate h4 {
	display:inline-block;*display:inline;*zoom:1;
	font-size:103%; font-weight:normal; line-height:108%;
	width:45px; /*height:15px;*/
	padding:2px 0 0 7px;
	margin:0 0 12px 0;
	border-left:3px solid #333;
	vertical-align:-1px;
}
section#deliveryDate .content {
	display:inline-block;*display:inline;*zoom:1;width:375px;
}
section#deliveryDate .content select {
	width:154px;
}
section#insatsuHousiki {
	display:none;
}
section .attention {
	padding:0 0 0 166px;
	margin:-4px 0 8px 0;
	font-size:85%;color:#999;
}





/*------------------------------*/
/*下部情報エリア*/
#infoArea {
	position:absolute;
	width:100%; height:136px;
	left:0; bottom:5px;
	background-color: rgba(255,255,255,0.6);
}
#infoArea #infoMainArea {
	position:relative;
	width:1150px; height:136px;
	margin:0 auto;
	/*border:1px solid #F00;*/
}

/*近似再サイズの既存商品*/
#recommendArea {
	display:none;
	position:absolute;
	width:509px; height:136px; left:0; top:0;
}
#recommendArea h3 {
	font-weight:normal;
	font-size:89%;
	margin: -18px 0 0 30px;
}
#recommendArea h3 span{
	font-size:91%;
}
/* 内容 */
#recommendInner {
	z-index:30;
	position:absolute;
	left:1px; top:5px;
	width:508px; height:126px;
	color:#666;
}
#recommendInner #btPrevRec {
	position:absolute;
	left:0; top:0; width:20px; height:126px;
}
#recommendInner #btPrevRec a {
	display:block;
	width:20px; height:0; padding-top:126px; overflow:hidden;
	background: url(../img/bt_prev_recommend.png) no-repeat 0 0;
}
#recommendInner #btNextRec {
	position:absolute;
	right:0; top:0; width:20px; height:126px;
}
#recommendInner #btNextRec a {
	display:block;
	width:20px; height:0; padding-top:126px; overflow:hidden;
	background: url(../img/bt_next_recommend.png) no-repeat 0 0;
}
/*#recommendInner #btPrevRec a:hover,
#recommendInner #btNextRec a:hover {background-position:0 -126px;}*/

#recCanvas {
	position:absolute;
	left:22px; top:0; width:464px; height:126px;
}

ul#recList {
	position:absolute;
	left:22px; top:0; width:464px; height:126px; 
}
ul#recList li.recItem {
	position:relative;
	/*background-color:#FFF;*/
	width:116px; height:126px;
	margin:0;
	float:left;
	display:none;
}
ul#recList li.recItem:hover {
	/*border:1px solid #33BEEF;*/
	background-color: rgba(54,245,255,0.2);
	cursor:pointer;
}
ul#recList li.recItem #recCanvas0 {
	position:absolute;
	width:116px; height:126px;
}
ul#recList li.recItem div.tiKeijou {
	position:absolute;
	width:110px; height:20px; left:0; bottom:16px;
}
ul#recList li.recItem div.tiKeijou p {
	position:absolute;
	left:4px; bottom:0;
	font-size:70%;
	line-height:100%;
	color:#333;
}

/*list*/
ul#recList li.recItem ul {
	position:absolute;
	/*background-color:#FFC;*/
	width:104px; height:44px; left:6px; top:6px;
}
ul#recList li.recItem ul li {
	position:absolute;
	width:34px; height:14px;
	font-size:76%;
	padding-left:15px;
	line-height:1.4em;
}
ul#recList li.recItem ul li.size1 {
	background: url(../img/ic_no1.png) no-repeat 0 0;
	background-size:12px 12px;
	left:0; top:0;
}
ul#recList li.recItem ul li.size2 {
	background: url(../img/ic_no2.png) no-repeat 0 0;
	background-size:12px 12px;
	left:0; top:14px;
}
ul#recList li.recItem ul li.size3 {
	background: url(../img/ic_no3.png) no-repeat 0 0;
	background-size:12px 12px;
	left:0; top:28px;
}
ul#recList li.recItem ul li.size4 {
	background: url(../img/ic_no4.png) no-repeat 0 0;
	background-size:12px 12px;
	left:0; top:42px;
}
ul#recList li.recItem ul li.size5 {
	background: url(../img/ic_no5.png) no-repeat 0 0;
	background-size:12px 12px;
	left:0; top:56px;
}
ul#recList li.recItem ul li.size6 {
	background: url(../img/ic_no6.png) no-repeat 0 0;
	background-size:12px 12px;
	left:0; top:70px;
}
/*金額*/
ul#recList li.recItem .priceArea {
	position:absolute;
	width:116px; height:17px; left:5px; bottom:0;
	/*background-color:#FCC;*/
}
ul#recList li.recItem p.tiGoukei {
	position:absolute;
	font-size:80%; font-weight:normal;
	left:0; bottom:0;
}
ul#recList li.recItem span.price {
	font-size:120%; font-weight:bold;
	margin-left:1px;
	color:#444;
}
ul#recList li.recItem span.price span {
	font-size:80%; font-weight:normal;
	margin-left:2px;
}


/*注意文言*/
#attentionArea {
	/*display:none;*/
	position:absolute;
	width:509px; height:136px; left:0; top:0;
}
#attentionArea p {
	color:#707070;
	font-size:89%;
	line-height:140%;
	position:absolute;
	left:30px; bottom:20px;
}

/*金額エリア*/
#priceArea {
	position:absolute;
	width:auto; height:121px; left:592px; top:10px;
	/*background:#E0E0E0;*/
}
#priceArea dl{
	clear:both;
}
dl#price_total {
	display:block;
	height:40px;
	border-bottom:1px solid #BBBBBB;
	margin:0 0 4px 0;
}
dl#price_total dt {
	/*display:inline-block;*display:inline;*zoom:1;*/
	float:left;
	width:16px; height:0; padding-top:34px; overflow:hidden;
	background: url(../img/ic_total.png) left top no-repeat;
}
dl#price_total dd.price {
	/*display:inline-block;*display:inline;*zoom:1;*/
	float:left;
	font-size:175%;
	padding:6px 0 0 5px;
	vertical-align:top;
	line-height:1;
}
dl#price_total dd.price span {
	font-size:58%;
	vertical-align:1px;
	margin:0 0 0 2px;
}
dl#price_total dd.at {
	float:left;
	color:#33BEEE;
	font-size:89%;
	/*font-weight:bold;*/
	text-align:left;
	padding:0 0 0 4px;
	margin:9px 0 0 4px;
}

dl.price_other dt {
	float:left;
	width:90px;
	font-size:92%;
	/*background:#CCF;*/
}
dl.price_other dd.price {
	float:left;
	font-size:92%;
	text-align:right;
	width:140px;
	/*background:#CFC;*/
}
dl.price_other dd.at {
	float:left;
	color:#666;
	font-size:92%;
	text-align:left;
	/*width:100px;*/
	padding:0 0 0 4px;
	/*background:#CCF;*/
}



/*------------------------------*/
/*仮注文／保存／印刷ボタン*/
#orderArea {
	position:absolute;
	left:852px; top:7px;
	width:278px; height:118px;
}
#btApply {
	position:absolute;
	left:0; top:0;
}
#btApply a {
	display:block;
	width:186px; height:0; padding-top:80px; overflow:hidden;
	background: url(../img/bt_order.png) no-repeat 0 0;
}
#btApply a:hover {background-position:0 -80px;}
#btApply a:active {background-position:0 -160px;}
#btSave {
	position:absolute;
	right:0; top:0x;
}
#btSave a {
	display:block;
	width:90px; height:0; padding-top:80px; overflow:hidden;
	background: url(../img/bt_save.png) no-repeat 0 0;
}
#btSave a:hover {background-position:0 -80px;}
#btSave a:active {background-position:0 -160px;}
#btPrint {
	position:absolute;
	left:0; top:86px;
}
#btPrint a {
	display:block;
	width:276px; height:0; padding-top:32px; overflow:hidden;
	background: url(../img/bt_print.png) no-repeat 0 0;
}
#btPrint a:hover {background-position:0 -32px;}
#btPrint a:active {background-position:0 -64px;}

#orderCover {
	position:absolute;
	background:#F7F7F7;
	width:100%; height:100%;
	opacity:0.7;
	display:none;
}

/* compatible text */
#compatibleText {
	position:relative;
	width:950px;
	/*margin:32px auto;*/
	margin:822px auto 0;
	text-align:center;
	padding-bottom: 105px;
	color:#999;
	font-size:91%;
}