@charset "UTF-8";

/* CSS Document */



body{ margin:0; padding:0; background:#000 url(../img/cmn/header_bg.jpg) no-repeat center top; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height:1.5em; font-size:14px; color:#000;  }
img{ border:none; }

.clearfix:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; }


#wrap{ margin:0 auto;}
#headerwrap{ width:900px; margin:0 auto;}

#header{ padding-top:762px; margin:0 0 40px 0; }
#header #headercontent{ text-align:center; }
#header h1{ margin:0; }
#header p{ color:#CCC; font-size:16px; font-family:Arial, Helvetica, sans-serif; }

#header #contenthr{ margin:20px 0 0 0; }
#header #contenthr h2{ padding:20px 0 0 0; margin:0 0 .5em 0; }
#header #contenthr p{ padding:0 0 20px 0; margin:0; }

#header #contenthr:before,
#header #contenthr:after{ content:" "; display:block; height:1px; background:transparent url(../img/cmn/header_borderline.png) }


#main{ width:900px;}




#contenthead{ padding:15px 0 0 25px; }

#brandconcept{ float:left; width:321px; }
#productlineup{ float:right; width:622px; }

#brandconcept h2,
#productlineup h2{ margin:0; }

#brandconcept .textarea,
#productlineup .textarea{ padding:0 20px; }
.textarea :first-child{ margin-top:0; }

#productlineup .content #productlist,
#brandconcept .content .textarea{ min-height:310px; }

#brandconcept .content{ background:transparent url(../img/cmn/bg_about.jpg) repeat-y 0 0; }
#brandconcept .content:after{ content:" "; display:block; height:13px; background: transparent url(../img/cmn/bg_about_bt.jpg) no-repeat 0 0; }

#productlineup .content{ background:transparent url(../img/cmn/bg_lineup.jpg) repeat-y 0 center; } 
#productlineup .content:after{ content:" "; display:block; height:13px; background: transparent url(../img/cmn/bg_lineup_bt.jpg) no-repeat 0 0; }

#productlineup #productlist{ list-style:none; margin:0; padding:0; text-align:center; } 
#productlineup #productlist li{ display:inline; }
#productlineup #productlist li img{ vertical-align:top; }



#mc{ }




#mc .mainwrap{ padding:0 30px; width:900px; margin:0 0 0 auto; }

#mc .maintext{ float:left; width:330px; }
#mc .largethumb{ float:right; width:550px; }

#mc .mainwrap div :first-child{ margin-top:0; }

#mc .thumblist{ list-style:none; margin:1em 0 0 auto; padding:0 30px 0 0; width:900px; }
#mc .thumblist li{ display:inline; margin:0 3px 0 0; padding:0; }
#mc .thumblist li img{ vertical-align:top; padding:0 0 3px 0; }


#product_batman,
#product_joker{ margin:0; padding:40px 0; }

#product_batman .producttitle,
#product_joker .producttitle{ padding:0 0 5px 0; }


#product_batman h3,
#product_joker h3{ width:370px; float:left; margin:0; }

#product_batman p,
#product_joker p{ font-size:14px; color:#FFF; line-height:1.25em; margin:0; width:520px; float:right; }

#product_batman p.eng,
#product_joker p.eng{ font-size:12px; color:#999; font-family:Arial, Helvetica, sans-serif; }


#product_batman ul,
#product_joker ul{ margin:0; padding:0; list-style:none; }

#product_batman ul li,
#product_joker ul li{ margin:0; padding:0; }

#product_batman ul li img,
#product_joker ul li img{ margin:0; padding:0; display:block; }


#product_batman #images_batman,
#product_joker #images_joker{ width:900px; height:421px; margin:10px 0 0 0; overflow:hidden; position:relative; }

#product_batman ul.cutimage,
#product_joker ul.cutimage{ width:900px; height:421px; overflow:hidden; position:absolute; z-index:10;  }

#product_batman ul.cutimage li,
#product_joker ul.cutimage li{ float:left; }

#product_batman .productslider{ position:absolute; width:391px; right:0; bottom:0; z-index:20; }
#product_joker .productslider{ position:absolute; width:367px; left:0; bottom:0; z-index:20; }

#product_batman .productinfo,
#product_joker .productinfo{ padding:15px; }
#product_batman .productinfo p,
#product_joker .productinfo p{ font-size:12px; line-height:1.5em; float:none; width:auto; }
#product_batman .productinfo h4,
#product_joker .productinfo h4{ margin:0 0 12px 0; }


#product_batman .basicinfo,
#product_joker .basicinfo{ width:310px; float:left; border-left:5px solid #CCC; padding-left:10px; }
#product_batman .specinfo,
#product_joker .specinfo{ width:530px; float:right; border-left:5px solid #CCC; padding-left:10px; }


#about_injustice{ border:1px solid #666; padding:80px 20px 20px 20px; width:800px; margin:2em auto; background:#111 url(../img/cmn/about_injustice.png) no-repeat left top; }
#about_injustice p{ margin:0; color:#FFF; line-height:1.5em }
#about_injustice p+p{ margin-top:.5em; }
#about_injustice p.eng{ font-size:12px; color:#999; font-family:Arial, Helvetica, sans-serif; }


#brandbox{ border:1px solid #666; padding:20px; width:800px; margin:2em auto; background:#111; }
#brandbox p{ margin:0; color:#FFF;}
#brandbox .brandlogo{ float:left; width:200px; }
#brandbox .brandtext{ float:right; width:580px; color:#FFF; text-align:left; }

.chatteeth{ margin:80px 0; text-align:center; }

#footer{ margin:30px 0 0 0; padding:30px 0 10px 0; border-top:1px solid #666; }


/* ------ */



.copy { color:#CCC; font-size:10px; line-height:14px; text-align:center; }
.link a{ color:#FFFFFF; }

a{ color:#FFFFFF; }
a:hover{color:#999; text-decoration:none;}

.padtop10{padding-top:10px;}
.padbtm10{padding-bottom:10px;}


/* common styles */
.hide{ display:none; }
 
/** margin control **/
.nomargin{ margin:0 !important; }
.notopmargin{ margin-top:0 !important; }
.nobtmargin{ margin-bottom:0 !important; }

.leftmargin1em{ margin:0 0 0 1em; }
.leftmargin2em{ margin:0 0 0 2em; }
.rightmargin1em{ margin:0 1em 0 0; }
.rightmargin2em{ margin:0 2em 0 0; }

/** padding control **/
.leftpad1em{ padding:0 0 0 1em; }
.leftpad2em{ padding:0 0 0 2em; }
.rightpad1em{ padding:0 1em 0 0; }
.rightpad2em{ padding:0 2em 0 0; }
.bpad1em{ padding:0 0 1em 0; }

/** text align **/
.aleft{ text-align:left !important; }
.aright{ text-align:right !important; }
.acenter{ text-align:center !important; }

/** float control **/
.fleft{ float:left !important; }
.fright{ float:right !important; }
.clear{ clear:both; }

/** fontsize control **/
.larger{ font-size:larger !important;}
.smaller{ font-size:smaller !important;}

/** width control **/
.contentwidth{ width:100%; }

/** notice color **/
.note{ color:#C00; }

.under_line{ border-bottom:1px solid #999; padding:5px 0; }

/* -- END -- common styles */




/*
bxslider option style
*/
.bx-wrapper .bx-next, .bx-wrapper .bx-prev{ display:none; }
.bx-wrapper:hover .bx-next, .bx-wrapper:hover .bx-prev{ display:block; }

.bx-wrapper { margin: 0 auto 40px; padding: 0; position: relative; zoom: 1; }
.bx-wrapper img { display: block; max-width: 100%; }
.bx-wrapper .bx-viewport { }
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto { bottom: -20px; position: absolute; width: 100%; }
.bx-wrapper .bx-loading { background: url(../img/cmn/bx_loader.gif) center center no-repeat transparent; height: 100%; left: 0; min-height: 50px; position: absolute; top: 0; width: 100%; z-index: 2000; }
.bx-wrapper .bx-pager { color: #666; font-family: Arial; font-size: .85em; font-weight: bold; padding-top: 20px; text-align: center; }
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline; display: inline-block; zoom: 1; }
.bx-wrapper .bx-pager.bx-default-pager a { background: #666; border-radius: 7px; display: block; height: 14px; margin: 0 5px; moz-border-radius: 7px; outline: 0; text-indent: -9999px; webkit-border-radius: 7px; width: 14px; }
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active { background: #F00; }
.bx-wrapper .bx-prev { background:none /* url(/img/cmn/controls.png) no-repeat 0 -32px*/; left: 10px; }
.bx-wrapper .bx-next { background:none /*url(/img/cmn/controls.png) no-repeat -43px -32px*/; right: 10px; }
.bx-wrapper .bx-prev:hover { background-position: 0 0; }
.bx-wrapper .bx-next:hover { background-position: -43px 0; }
.bx-wrapper .bx-controls-direction a { height: 32px; margin-top: -16px; outline: 0; position: absolute; text-indent: -9999px; top: 50%; width: 32px; z-index: 9999; }
.bx-wrapper .bx-controls-direction a.disabled { display: none; }
.bx-wrapper .bx-controls-auto { text-align: center; }
.bx-wrapper .bx-controls-auto .bx-start { background:none/* url(/img/cmn/controls.png) -86px -11px no-repeat*/; display: block; height: 11px; margin: 0 3px; outline: 0; text-indent: -9999px; width: 10px; }
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; }
.bx-wrapper .bx-controls-auto .bx-stop { background:none /*url(/img/cmn/controls.png) -86px -44px no-repeat*/; display: block; height: 11px; margin: 0 3px; outline: 0; text-indent: -9999px; width: 9px; }
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; }
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: center; width: 100%; }
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; }
.bx-wrapper .bx-caption { background: #666\9; background: rgba(80, 80, 80, 0.75); bottom: 0; left: 0; position: absolute; width: 100%; }
.bx-wrapper .bx-caption span { color: #fff; display: block; font-family: Arial; font-size: .85em; padding: 10px; }


/*
    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;}
#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:#000;}
#colorbox{outline:0;}
#cboxContent{margin-top:20px;background:#000;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{border:5px solid #000; background:#fff;}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc; font-size:12px;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc; font-size:12px;}
#cboxLoadingGraphic{background:url(../img/colorbox/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; top:-20px; right:90px; color:#fff;}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../img/colorbox/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../img/colorbox/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
#cboxNext:hover{background-position:bottom right;}
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../img/colorbox/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
#cboxClose:hover{background-position:bottom center;}