/* reset
------------------------------------------------------------------------------*/
body { margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,th,td,p,address,form,div,img {margin: 0;padding: 0;border: none;font-size: 100%; font-weight:normal;
position:static}
a,strong,em,abbr,span,img {border: none;}
ul{list-style:none;}
img{vertical-align:bottom;}

a:link{
color:#272727;
text-decoration:none;
}
a:visited{
color:#272727;
text-decoration:none;
}
a:active{
color:#272727;
text-decoration:none;
}
a:hover{
color:#333333;
text-decoration:none;
}

/* ベース
------------------------------------------------------------------------------*/
body {
  /* MFPのブラウザサイズ*/
    width: 1024px;
    height: 736px;
    font-style: normal;
    font-weight: normal;
    font-size: 20pt;
    overflow: hidden;
    color:#272727;
    /* color:#474747; */
    background:#fff;
    font-family:'メイリオ', 'Meiryo', sans-serif;
}

/*ページデザイン大枠*/
div#container
{
	margin:0px auto;
	position:relative;
}
body > #container
{
	width: 1024px;
	background: #ffffff;
}
#foot
{
	position:absolute;
	margin: 0px;
	padding: 0px;
	bottom:0px;
	height:88px;
	width:1024px;
	font-size:small;
}

#sample
{
	position: absolute;
	visibility: visible;
	left: 4px;
	top: 0px;
	z-index: 3;
}

/*table
---------------------------------------------------*/
table{
/*width: 100%;*/
border-collapse: collapse;
}
table th{
padding: 0px;
text-align: left;
vertical-align:middle;
color: #333;
}

table td{
padding: 0px;
background-color: #fff;
}


/* ヘッダー
------------------------------------------------------------------------------*/
#header{
	width:1024px;
	border-bottom:4px solid #ffc0e6;
	background:#FFF;
}
.hrad{
	width:984px;

}
.button_box{
	padding:5px 10px 5px 10px;
}
.button_box input{
	vertical-align: bottom;
}
.MessageSpace
{
	width:614px;
	height:78px;
	padding:5px 10px 5px 20px;
	font-size: 16pt;
}
div#MessageSpace{
	font-size: 16pt;
}
div.header-error-msg{
	font-size: 12pt;
	color: red;
}

.logo
{
	width:220px;
	height:88px;
}

/* 入力エリア
------------------------------------------------------------------------------*/
#inputArea{
	width:880px;
	margin:4px auto 6px;
}
#inputArea.top{
	width: 794px;
	margin: 179px 122px 82px 108px;
}
#inputArea.topQr{
	width: 794px;
	margin: 147px 60px 82px 60px;
}

#qrMsgArea.qrMsg {
    margin-left: 165px;
    margin-top: 40px;
    font-weight: bold;
    font-size: 30px;
}

.qrImg {
    margin-left: 205px;
    margin-top: 34px;
}

/*プリント番号入力エリア
---------------------------------------------------*/
.inputNumAreaWrap{
	margin-bottom:7px;
	background:#fcf9fb;
}
/*
.inputNumAreaWrap tr td{
	background:#fcf9fb;
}
*/
.inputNumAreaWrap tr td.qr{
	padding-left:40px;
}
.inputNumArea{
	width:566px;
}
.inputNumArea tr th{
	font-size:18pt;
	width:206px;
	padding:20px 0px;
	text-align:center;
	background:#ff66a0;
	color:#ffffff;
}

/*
.inputNumArea tr td{
}
*/

#printNo{
	width:206px;
	text-align:center;
}
.inputNumArea tr td{
	font-size:24pt;
	background:#e5e5e5;
	color:#626262;
	text-align:center;
}
/*プリント番号入力ボックス（非表示）*/
#contentsNo{
	width:500px;
	display:none;
}
.numArea01,
#contentsNo_1{
	width:90px;
}
.numArea02,
#contentsNo_2{
	width:120px;
}
.numArea03,
#contentsNo_3{
	width:120px;
}
.space{
	text-align:center!important;
	width:10px;
}
/*キーボードエリア
---------------------------------------------------*/
.keyboard{
/*
	background-color:#fcf9fb;
	background-image:url("/static/img/background.png")!important;
*/
	background-repeat:no-repeat;
}
.keyboard tr td{
	width:62px;
	padding-right:10px;
	padding-bottom:14px;
	background-color:transparent;
}
.keyboard tr td input{
	vertical-align: bottom;
}
.funcBtnArea{
	padding-right:0px!important;
	padding-left:10px;
}

/*バナーエリア
---------------------------------------------------*/
.bannerArea{
	width:100%;
	background:#fcf9fb!important;
}
.bannerArea tr td{
	background:#fcf9fb!important;
}

/*購入確認画面
---------------------------------------------------*/
#contentArea{
	height:508px;
	position:relative;
}

/*右カラム
---------------------------------------------------*/
.contentsinfo{
	position:absolute;
	width:528px;
	left:458px;
	top:20px;
}
.contentsinfo h2{
	padding: 6px 0px 6px 20px;
	border-left:6px solid #ff66a0;
	margin-bottom: 35px;
	font-size:22px;
	height: 22px;
	line-height: 22px;
}

/* 設定確認テーブル */

/*コンテンツ情報表示テーブルスタイル(名称)*/
.content_table{
	margin-bottom:20px;
}

.contentsinfo table{
	border:1px solid #c3c3c3;
	font-size:18px;
}
.contentsinfo table th{
	width:114px;
	background:#e5e5e5;
	padding: 0px 10px;
	height: 54px;
	border-bottom:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-left:1px solid #c3c3c3;
}
.contentsinfo table td{
	width:98px;
	padding: 0px 15px;
	border-bottom:1px solid #c3c3c3;
}
.contentsinfo table.content_table td{
	line-height: 19px;
}
.contentsinfo table td p.small{
	font-size: 10px;
	line-height: 10px;
}

/* 設定確認テーブル */

.contentsinfo table.contentNum{
	margin-bottom:21px;
}
.contentsinfo table.contentNum th{
	width:113px;
	font-size:18px!important;
}
.contentsinfo table.contentNum td{
	width:362px;
	font-size: 30px;
    font-family: 'Century Gothic';
    font-weight: 800;
	color: #474747;
}

/*ボタンボックス
---------------------------------------------------*/
table.btnBox{
	padding:0px;
	border:0px;
	background:inherit;
	position:absolute;
	right:0px;
	top:374px;
	background:#fcf9fb;
}
table.btnBox td{
	width:190px;
	padding:0px;
	border:0px;
	background:inherit;
	text-align:right;
	background:#fcf9fb;
}


/*左カラム
---------------------------------------------------*/
div.prev
{
	width:376px;
	position:absolute;
	top:20px;
	left:40px;
}

/*サムネイル表示テーブルスタイル*/
.prev_table
{
	width:376px;
	height:376px;
	text-align:center;
	vertical-align:middle;
	/* margin-bottom:56px; */
	background:#fcf9fb;
	border: 1px #e5e5e5 solid;
}
.prev_table tr td img
{
max-width:350px;
max-height:350px;

}
div.prev p{
	color:#707070;
	font-size:14px;
}

/* エラー
------------------------------------------------------------------------------*/
table.error{
	width:1024px;
	height:auto;
	margin-bottom:0px;
}
table.error tr td{
	text-align:center;
	padding:0px;
	vertical-align:middle;
}
table.error tr td h2{
	margin-top:120px;
	margin-bottom:30px;
}


/* 共通
------------------------------------------------------------------------------*/


/*
.button_box{
}
*/
.mb14{
	margin-bottom:14px;
}
.mb20{
	margin-bottom:20px;
}
.mb60{
	margin-bottom:60px;
}

.serviceProv span{
	padding:0 3px;
}
.center{
	text-align:center;
	margin:0px auto;
}

/* cf
------------------------------------------------------------------------------*/
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:block;
    overflow:hidden;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

/* /top */
/* .center{
	display: flex;
    justify-content: center;
    align-items: center;
} */
.topButtonform{
	width: 793px;
	/* margin: 0px 72px; */
}
.topButtonform td{
	background-color: transparent;
	padding-right: 70px;
}
.topButtonform td.last{
	padding-right: 0px;
}

.topButtonformQr{
	width: 793px;
	/* margin: 0px 72px; */
}
.topButtonformQr td{
	background-color: transparent;
	padding-right: 38px;
}
.topButtonformQr td.last{
	padding-right: 0px;
}

/* selectTop */
#inputArea.selectTop{
	width:984px;
	margin: 0px 21px 0px 19px;
	display: block;
}
.inputAreaBody{
	width: 984px;
}
.inputLeftArea{
	width: 892px;
	margin: 0px;
	padding: 0px;
	float: left;
}
.selectedMenu{
	height: 40px;
	font-size: 16px;
	font-weight: 400;
}
/*
table.selectedMenu td{
	background-color: #fcf9fb;
}
*/
.selectedMenu span{
	font-weight: 800;
	color: #474747;
}

/* ページングバー */
.inputRightArea{
	width: 62px;
	height: 438px;
	margin: 40px 0px 20px 20px;
	padding: 5px;
	background-color: #d5d5d5;
	float: left;
	text-align: center;
	/* IE7は効かない */
	border-radius: 5px;
}
.inputRightArea input{
	height: 19px;
    width: 21px;
    vertical-align: bottom;
    background-color: #ffffff;
    padding: 21.5px 20.5px;
}
.pageCountArea{
	width: 62px;
	height: 304px;
	margin: 5px 0px;
	background-color: #f0f0f0;
	position: relative;
}
.pageCountArea div{
	position: absolute;
	width: 62px;
	top: 50%;
	margin-top: -33px;
	left: 0%;
	vertical-align: bottom;
}
.pageCountArea p{
	font-family: 'Century Gothic';
	font-size: 20px;
	font-weight: 800;
}
.pageCountBorder{
	width: 36px;
	height: 2px;
	margin: 5px 13px;
	border-top: solid #272727 2px;
}

/* confirm */
.copiesBtn,
.purchaseBtn{
	float: left;
}
.copiesBtn{
	width: 314px;
	margin-right: 62px;
}
.copiesTitle{
	font-size: 20px;
	margin-bottom: 10px;
}
.copiesTitleBorder{
	border-bottom: 2px solid #c3c3c3;
	margin-bottom: 28px;
}
.copiesBtnArea{
	margin: 0px 20px;
}
.copiesBtnArea input,
.copiesBtnArea p{
	float: left;
}
.copiesBtnArea p{
	margin: 0px 34px;
	width: 90px;
	height: 52px;
	line-height: 52px;
	padding: 0px 20px 0px 0px;
	text-align: right;
	background-color: #fff;
	border: 1px solid #c3c3c3;
	font-size: 18px;
	color: #474747;
}
.copiesBtnArea p span{
	font-size: 36px;
	font-weight: 800;
	font-family: 'Century Gothic';
	margin-right: 5px;
}
.copiesBtnArea input{
	margin: 5px 0px;
}

/* select category */
.categoryArea{
	margin: 45px 0px;
	width: 892px;
	height: 358px;
	overflow: hidden;
}
.categoryList{
	width: 892px;
	display: block;
}
.categoryList ul{
	width: 892px;
	overflow: hidden;
}
.categoryList ul li{
	float: left;
	width: 160px;
	height: 160px;
	padding-right: 23px;
	padding-bottom: 24px;
}
.categoryList.pickup ul li{
	width: 430px;
	height: 174px;
	padding-right: 32px;
}
.categoryList ul li.nopadding{
	padding-right: 0px;
}
/* 最後の要素の後に空間を作っておく */
.categoryList ul li.last{
	padding-bottom: 600px;
}
.categoryList ul li input{
	width: 160px;
	height: 160px;
	background-color: #f0f0f0;
}
.categoryList.pickup ul li input{
	width: 430px;
	height: 173px;
}


/* selectProducts */
.productsListBottom{
	margin: 13px 0px 20px 0px;
	width: 916px;
	height: 70px;
}
.totalPriceTable{
	height: 56px;
	width: 429px;
	border: 3px solid #082868;
	float: left;
	margin: 8px 40px 0px 0px;
}
.totalPriceTable div{
	height: 56px;
	float: left;
	width: 247px;
	text-align: right;
	font-size: 20px;
	font-weight: 400px;
}
.totalPriceTable div span{
	font-size: 36px;
	font-weight: 800;
	font-family: "Century Gothic";
	margin-right: 5px;
}
.totalPriceTable div p{
	margin: 6px 14px;
	color: #474747;
}
.totalPriceTable div.totalPriceTitle{
	background-color: #082868;
	width: 179px;
	text-align: center;
	font-weight: 800px;
}
.totalPriceTable div.totalPriceTitle p{
	margin: 13px 0px;
	font-weight: 800;
	color: #ffffff;
}
.productsList{
	width: 860px;
	height: 333px;
	padding: 16px;
	background-color: #f0f0f0;
	overflow: hidden;
}
.productsList input[type=checkbox]{
	width: 0px;
	height: 0px;
	padding: 0px;
	margin: 0px;
	display: block;
	margin-bottom: -4px;
}
.productsList label{
	float: left;
	height: 160px;
	width: 418px;
	margin:0px 24px 13px 0px;
	display: block;
}
.productsList label.right0Label{
	margin-right: 0px;
}
.productsList label.bottom16Label{
	margin-bottom: 16px;
}
.productsList label.lastLabel{
	padding-bottom: 349px;
}
.productButton{
	/* width: 384px; */
	width: 391px;
	height: 140px;
	/* padding: 7px 17px; */
	padding: 7px 10px 7px 17px;
	display: block;
	background-color: #ffffff;
	border: 3px solid #ffffff;
}
.productButton.rightProduct{
	margin-left: 0px;
}
.productButton .productThumbArea{
	width: 140px;
	height: 140px;
	margin-right: 16px;
	float: left;
}
.productButton img.productThumb{
	max-width: 140px;
	max-height: 140px;
}
.productButtoncontent{
	margin: 4px 0px;
    height: 132px;
	/* width: 228px; */
	width: 235px;
	float: left;
	overflow: hidden;
}
.productButtonInner{
	float: left;
	height: 50px;
}
.productButtonTitle{
	font-size: 18px;
	height: 82px;
	line-height: 25px;
}
.productButtonInfo{
	float: left;
	/* font-size: 16px; */
	font-size: 15px;
	/* width: 186px; */
	width: 193px;
}
.productButtonCheckImg{
	float: left;
	background-image: url("/static/img/select/icon_check_off.png");
	background-size: 42px;
	height: 42px;
	margin-top: 8px;
	width: 42px;
	vertical-align: bottom;
}
/* productButton checked */
div.productButton.checked{
	border: 3px solid #1cb7ef;
}
div.productButton.checked .productButtonCheckImg{
	background-image: url("/static/img/select/icon_check.png");
}
/* productButton unchecked */
div.productButton.unchecked{
	border: 3px solid #ffffff;
}
div.productButton.unchecked .productButtonCheckImg{
	background-image: url("/static/img/select/icon_check_off.png");
}
/* productButton disabled */
div.productButton.disabled{
	filter: alpha(opacity=50);
	opacity: 0.5;
}
#reset{
	position: absolute;
	visibility: visible;
	width: 1024px;
	height: 736px;
	left: 0px;
	top: 0px;
	display: none;
	z-index: 1;
}
#reset .resetBack{
/*
	width: 1024px;
	height: 736px;
*/
	width: 1030px;
	height: 740px;
	background-color: #272727;
	filter: alpha(opacity=80);
	opacity: 0.8;
}
#reset .resetwrapper{
	position:absolute;
	top: 0;
	left: 0;
	width: 340px;
	height: 193px;
	padding: 80px 150px 73px;
	margin: 194px 192px;
	background-color: #ffffff;
	filter: alpha(opacity=100);
	opacity: 1.0;
}
#reset .resetwrapper p{
	font-size: 20px;
	text-align: center;
	margin-bottom: 88px;
}
.resetBtnArea input.first{
	float: left;
}
.resetBtnArea input.first{
	margin-right: 40px;
}


#endmodal{
	position: absolute;
	visibility: visible;
	width: 1024px;
	height: 736px;
	left: 0px;
	top: 0px;
	display: none;
	z-index: 1;
}
#endmodal .endBack{
	width: 1030px;
	height: 740px;
	background-color: #272727;
	filter: alpha(opacity=80);
	opacity: 0.8;
}
#endmodal .endwrapper{
	position:absolute;
	top: 0;
	left: 0;
	width: 340px;
	height: 293px;
	padding: 80px 150px 73px;
	margin: 144px 192px;
	background-color: #ffffff;
	filter: alpha(opacity=100);
	opacity: 1.0;
}
#endmodal .endwrapper .endErrorIcon{
	font-size: 20px;
	text-align: center;
	margin-bottom: 28px;
}
#endmodal .endwrapper .endErrorMsg{
	font-size: 20px;
	text-align: center;
	margin-bottom: 88px;
}


/* confirmMix */
.confirmMixArea{
	width: 984px;
	padding: 16px 20px;
	/* height: 349px; */
	height: 373px;
	background-color: #f0f0f0;
}
.cartProductsTable{
	width: 984px;
	font-size: 16px;
}
.cartProductsTable th{
	color: #ffffff;
	height: 37px;
	background-color: #082868;
	padding: 0px 15px;
}
.cartProductsTable td{
	height: 53px;
	border: solid 3px #f0f0f0;
	border-left: solid 2px #f0f0f0;
	border-right: solid 2px #f0f0f0;
	padding: 0px 15px;
}
.cartProductsTable td.first{
	border-left: none;
	text-align: center;
}
.cartProductsTable td.end{
	border-right: none;
}
.cartProductsTable tr td img{
	width: auto;
	height: auto;
	max-width: 42px;
	max-height: 42px;
	padding: 5px 0px;
}
.cartProductsTable .max300{
	width: 300px;
}

.confirmMixArea.white{
	background-color: #ffffff;
	padding: 13px 20px 0px;
	height: 94px;
}
.confirmMixBottomArea{
	width: 984px;
}
.confirmMixBottomArea .confirmMixBottomRight,
.confirmMixBottomArea input{
	float: left;
}
.confirmMixBottomRight{
	width: 435px;
	margin-right: 359px;
}
.confirmMixBottomArea div .serviceProv{
	color: #707070;
    font-size: 14px;
}
.confirmMixBottomArea .totalPriceTable{
	margin: 0px;
}


/* QRダイレクトアクセス用
---------------------------------------------------*/
.offscreen {
    position: absolute;
    left: -9999px;
}