/* common.css
Define container layout.
==================================== */
a:hover img{
	
	opacity:0.70;
	filter: alpha(opacity=70);
}

html,body{
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	overflow:hidden;

	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO","游ゴシック体","Yu Gothic","YuGothic";
}
body{
	background:url(../../images/bgimage.jpg) center bottom no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;

}
.bx-wrapper,.scroll,.scroll .main{
	width:100%;
	height:100%;
	overflow:hidden;
}
.bx-viewport{
	width:100%!important;
	height:100%!important;
	
}
.main{
	position:relative;
}
#slideoutwrap{
	height:100%;
}
.corl{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	width:580px;
	height:480px;
}
.ad{
	clear:both;
	position:relative;
	left:-72px;
	padding-top:30px;
	width:728px;
	text-align:center;
	overflow:hidden;

}
.ad a.topbn{
	border:solid 1px #000;
	background:#ffffff;
	padding:2px;
	line-height:0px;
	font-size:0px;
	display:block;
	float:left;
	margin:0px 17px;
}
.corl .left{
	float:left;
	margin-left:45px;
}
.corl .right{
	float:right;
	margin-right:45px;
}
.bx-controls-direction{
	display:none;
}
.corl .head{
	
	border:solid 3px #0066ff;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-bottom:20px;
	background:#fff;
	padding:20px;
	height:140px;
}
.corl .head h1{
	height:40px;
	text-align:center;
	line-height:40px;
	font-size:26px;
	font-weight:900;
	color:#003399;
	margin-bottom:10px;
	
}



.ldcode{
	position:absolute;
	z-index:10;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	width:580px;
	height:480px;
}
.ldcode .left{
	float:left;
	margin-left:0;
	width:360px;
}
.ldcode .left textarea{
	width:356px;
	height:145px;
	color:#222;
	font-size:13px;
}
.ldcode .right{
	float:right;
	margin-right:0;
	width:203px;
}
.ldcode .head{
	
	border:solid 3px #0066ff;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-bottom:20px;
	background:#fff;
	padding:20px;
	height:130px;
	position:relative;
}
.ldcode .head h1{
	height:40px;
	text-align:center;
	line-height:40px;
	font-size:26px;
	font-weight:900;
	color:#003399;
	margin-bottom:10px;
	
}
.ldcode .errmsg1,
.ldcode .errmsg2,
.ldcode .errmsg3{
	display:none;
	color:#ff0000;
}




.setsize{
	position:absolute;
	z-index:10;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	margin:auto;
	width:580px;
	height:480px;
}
.setsize .left{
	float:left;
	margin-left:0;
	width:360px;	
	border:solid 3px #0066ff;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background:#fff;
	height:122px;
	padding-top:25px;
}
.setsize .left p{
	margin:0px 20px 20px;
	font-size:20px;
	line-height36px;
	font-weight:900;
}
.setsize p span{
	font-weight:900;
}
.setsize p span.err{
	color:#ff0000;
}
.setsize p span.errmsg{
	display:none;
	color:#ff0000;
}
.setsize .left p input{
	padding:5px;
	font-size:20px;
	line-height26px;
	border:solid 1px #666;
	font-weight:900;
	width:200px;
	margin:0px 0px 0px 10px;
}
.setsize .right{
	float:right;
	margin-right:0;
	width:203px;
}
.setsize .head{
	
	border:solid 3px #0066ff;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	margin-bottom:20px;
	background:#fff;
	padding:20px;
	height:130px;
	position:relative;
}
.setsize .head h1{
	height:40px;
	text-align:center;
	line-height:40px;
	font-size:26px;
	font-weight:900;
	color:#003399;
	margin-bottom:10px;
	
}

.errormsg{
	position:absolute;
	z-index:10;
	bottom:20px;
	left:0px;
	right:0px;
	width:400px;
	margin:0px auto;
	border:solid 3px #ff6666;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background:#fff;
	padding:10px;
	display:none;
}
.errormsg p{
	font-size:14px;
	line-height:20px;
	font-weight:900;
	display:none;
}




#button9,#button10{
	position:absolute;
	right:-30px;
	top:-30px;
}



/*
.scroll{
	float:left;
	display:block;
	height:100%;
	padding:0;
	margin:0;
}
*/




.bx-controls{
	position:fixed;
	top:0px;
	left:0px;
}
































.stagewrap{
	position:relative;
	width:100%;
	height:100%;
}
.stagewrap .partslist{
	width:119px;
	border:solid 2px #ffa72d;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	position:absolute;
	top:320px;
	left:20px;
	padding:3px 0px 4px 13px;
	background:#ffffff;
	line-height:0px;
}
.stagewrap .topbanner{
	width:136px;
	text-align:center;
	border-radius: 5px;
	position:absolute;
	top:20px;
	left:20px;
	padding:0;
	line-height:0px;
	overflow:hidden;
}
.stagewrap .topbanner a{
	display:inline-block;
	margin-bottom:8px;
}
.stagewrap .partslist span{
	display:block;
	text-align:center;
	line-height:20px;
	padding-right:13px;
	font-size:13px;
	margin-bottom:3px;
}
.stagewrap .partslist img{
	border:solid 2px #000;
	margin:0px 8px 5px 0px;
	cursor:pointer;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.stagewrap .partslist img:hover{
	border:solid 2px #666;
}
.stagewrap .partslist img.active{
	border:solid 2px #ff3333;
}
.stagewrap .select{
	width:132px;
	border:solid 2px #ffa72d;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	position:absolute;
	height:180px;
	top:125px;
	left:20px;
	padding-top:3px;
	background:#ffffff;
	text-align:center;
}
.stagewrap .select .title{
	font-size:18px;
	font-weight:900;
	line-height:24px;
}
.stagewrap .select .imagearea{
	line-height:0px;
	margin-bottom:5px;
}
.stagewrap .select img{
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border:solid 2px #000;
}
.stagewrap .select .information{
	text-align:left;
	font-size:12px;
	padding:0px 10px;
	line-height:15px;
}
.stagewrap .tablewrap{

	height:100%;
	width:100%;
	overflow:auto;
	background:url(../../images/id8.png) left top repeat;

}

.stagewrap .tablewrap .tablewrapwrap{
	overflow:hidden;
	float:left;
}
.stagewrap #stagetable{
	margin:95px 180px 150px 170px;
	border-collapse:collapse;
	border:solid 1px #ddd;
	table-layout:fixed;
}
.stagewrap .alert{
	height:20px;
	text-align:center;
	color:#ff0000;
}
.stagewrap #stagetable tr td{
	margin:0px auto;
	border-collapse:collapse;
	border:solid 1px #ddd;
	line-height:0px;
	font-size:0px;
	cursor:pointer;
	background:#ff3333;
	table-layout:fixed;
}
.stagewrap #stagetable tr td img,
.stagewrap #stagetable tr td{
	width:40px!important;
	height:40px!important;
	min-width:40px!important;
	min-height:40px!important;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.stagewrap #stagetable.half tr td img,
.stagewrap #stagetable.half tr td{
	width:20px!important;
	height:20px!important;
	min-width:20px!important;
	min-height:20px!important;
}
.stagewrap #stagetable.quarter tr td img,
.stagewrap #stagetable.quarter tr td{
	width:10px!important;
	height:10px!important;
	min-width:10px!important;
	min-height:10px!important;
}
.stagewrap #stagetable tr td:hover img{
	opacity:0.70;
	filter: alpha(opacity=70);
}
.stagewrap #stagetable tr td img.err{
	opacity:0.50;
	filter: alpha(opacity=50);
}


.tools{
	
	position:absolute;
	z-index:10;
	top:20px;
	left:170px;
	line-height:0px;
	font-size:0px;
	width:585px;
}
.tools a{
	
	display:block;
	width:60px;
	margin:0px 5px 5px 0px;
	float:left;
}

.resizestage{
	z-index:10;
	white-space:nowrap;
	position:absolute;
	top:212px;
	height:162px;
	right:20px;
	background:#fff;
	border-top:solid 2px #fff;
	border-left:solid 2px #fff;
	border-bottom:solid 2px #fff;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	font-size:13px;
	padding:0px 5px;
	width:130px;
}
.adarea{
	position:absolute;
	top:386px;
	right:20px;
	padding:5px 10px 2px;
	background:#fff;
	border-top:solid 2px #fff;
	border-left:solid 2px #fff;
	border-bottom:solid 2px #fff;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	width:120px;
	z-index:10;
}
.resizestage .title{
	display:block;
	text-align:center;
	font-weight:900;
}
.resizestage span{
	display:block;
	margin-bottom:3px;
}
.resizestage span span{
	display:inline;
	margin-bottom:5px;
}
.resizestage span span.err{
	color:#ff0000;
}
.resizestage span.taC{
	text-align:center;
}
.resizestage input[type="text"]{
	width:50px;
	margin-left:5px;
}
.resizestage input[type="radio"]{
	position:relative;
	left:-3px;
}


.submitstage{
	z-index:10;
	position:absolute;
	top:90px;
	height:105px;
	right:20px;
	background:#fff;
	border-top:solid 2px #fff;
	border-left:solid 2px #fff;
	border-bottom:solid 2px #fff;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	line-height:0px;
	font-size:13px;
	padding:4px 5px 0;
	width:130px;
}
.submitstage a{
	display:block;
	margin-bottom:5px;
}


.checklist p{
	font-weight:900;
	font-size:17px;
	line-height:20px;
}

.gc_left,.gc_right,.gc_share{
	margin:8px;
	padding:10px 12px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 3px solid #ffa72d;
}
.gc_left .outputcode{
	margin:10px 0px 0px;
	overflow:hidden;
}

.gc_left .outputcode p{
	float:left;
	width:130px;
	margin-right:20px;
}
.gc_left .outputcode input{
	font-size:24px;
	font-weight:900;
	line-height:26px;
	padding:10px;
}
.gc_left .outputcode p.success,
.gc_left .outputcode p.err,
.gc_left .outputcode p.err2,
.gc_left .outputcode p.nt{
	clear:both;
	width:auto;
	font-size:13px;
}
.gc_left .outputcode p.err,
.gc_left .outputcode p.err2{
	color:#ff3333;
}
.gc_right #outputcode{
	width:526px;
	height:80px;
	margin-top:8px;
	padding:5px;
	font-size:12px;
	line-height:14px;
}
.gc_share .checklist p{
	font-size:28px;
	line-height:40px;
	padding-left:45px;
	color:#660000;
	background:url(../../images/nar4.png) left center no-repeat;
}
.gc_share .info{
	font-size:14px;
	line-height:18px;
	padding-top:10px;
}
.gc_share .info span{
	color:#ff3333;
}
.gc_share .info span strong{
	font-weight:900;
}
.gc_share .sharecode{
	padding-top:10px;
}
.gc_share .sharecode input,
.gc_share .sharecode textarea{
	width:516px;
	padding:5px;
	font-size:13px;
	word-break: break-all;
}
.gc_information{
	font-size:13px;
	margin-left:10px;
}

.bx-controls .bx-pager{
	display:none!important;
}



.share {
    clear: both;
    margin-bottom: 20px;
	overflow:hidden;
}
.share li {
    border-radius: 5px;
    float: left;
    margin: 0 1% 0 0;
    overflow: hidden;
    width: 20%;
}
.share li a {
    color: #fff;
    display: block;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
}
.tweet a{background-color : #55acee;}
.facebook a{background-color : #315096;}
.googleplus a{background-color : #dd4b39;}
.icon-facebook{
	background:url(../../images/facebook.png) left center no-repeat;
	padding-left:18px;
	padding-right:5px;
}
.icon-twitter{
	background:url(../../images/twitter.png) left center no-repeat;
	padding-left:18px;
	padding-right:5px;
}
.icon-google-plus{
	background:url(../../images/googlep.png) left center no-repeat;
	padding-left:18px;
	padding-right:5px;
}








/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(../../images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(../../images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(../../images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(../../images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(../../images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(../../images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(../../images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(../../images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(../../images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#444444;font-weight:900;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(../../images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(../../images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:0px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../../images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(../../images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(../../images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}