@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

/*---------------------------------------------------------
	font
---------------------------------------------------------*/
/* first for IE 4–8 */
@font-face { font-family: HWTGeometricRegular; src: url("../font/HWTGeometricRegularWeb.eot"); }

/* then for WOFF-capable browsers */
@font-face { font-family: HWTGeometricRegular; src: url("../font/HWTGeometricRegularWeb.woff") format("woff"); }

html { height: 100%; }

body { height: 100%; background-color: #1d2022; }

img { vertical-align: top; }

a.btn { display: block; overflow: hidden; }

/*---------------------------------------------------------
	clearfix
---------------------------------------------------------*/
.clearfix { width: 100%; }

.clearfix:after { content: ""; display: block; clear: both; }

.container { position: relative; top: 0; left: 0; width: 100%; height: 100%; }

.btn.floating-closeBtn { position: absolute; top: 46%; right: 0px; z-index: 9999; padding: 20px; }

.l-loading { background-color: #191b1b; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99999; }

.l-loading-inner { margin: -94px 0 0 -80px; position: absolute; top: 50%; left: 50%; width: 160px; height: 187px; opacity: 0; }

#l-loading-back { position: absolute; top: 0px; left: 0px; }

#l-loading-img { position: absolute; top: 152px; left: 53px; }

#l-loading-img-success { position: absolute; top: 141px; left: 34px; display: none; }

.l-about { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; background-color: rgba(0, 0, 0, 0.8); z-index: 99999; display: none; }
.l-about #about-spImg { display: none; }
.l-about #about-pcImg { display: none; }
.l-about .l-about-inner { overflow: auto; height: 100%; }
.l-about .about-imgContainer { position: relative; width: 451px; margin: 0 auto; }
.l-about .about-imgContainer img { position: absolute; }
.l-about .about-imgContainer .about-centerContainer { position: absolute; }
.l-about .about-closeBtn { position: absolute; top: 545px; left: 212px; z-index: 9999; width: 27px; height: 27px; }

.l-about.is-sp .about-imgContainer { position: relative; width: 414px; }
.l-about.is-sp .l-about-inner { background-color: #191b1c; }
.l-about.is-sp #about-spImg { width: 414px; height: auto; }
.l-about.is-sp .about-closeBtn { left: 154px; top: 400px; padding: 40px; }

.l-floating { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; background-color: rgba(0, 0, 0, 0.8); z-index: 99999; display: none; }
.l-floating .l-floating-inner { overflow: auto; height: 100%; }
.l-floating .floating-imgsContainer { width: 800px; margin: 0 auto; }
.l-floating .floating-imgsContainer img { width: 800px; }

.l-floating.is-sp .btn.floating-closeBtn { position: fixed; }
.l-floating.is-sp .floating-imgsContainer { width: 414px; }
.l-floating.is-sp .floating-imgsContainer img { width: 414px; }
.l-floating.is-sp .l-floating-inner { overflow: visible; }

body, html { margin: 0; padding: 0; width: 100%; font-family: sans-serif; font-size: 20px; color: #a5acaf; }

.wrapper { position: relative; min-width: 1035px; }

h2 { font-size: 48px; font-family: HWTGeometricRegular, sans-serif; }

.article_grid { background-repeat: no-repeat; background-position: left top; opacity: 0.5; }

.open_article { position: absolute; margin-top: 6px; margin-left: 1px; }

#flashContent { position: absolute; left: -57px; }

/****---- layout-header ----****/
#l-header { min-width: 1035px; overflow: hidden; position: relative; top: 0; left: 0; }
#l-header .l-nav { width: 250px; height: 100%; min-height: 200px; position: absolute; top: 0; }
#l-header .nav-Box { width: 199px; height: 100%; float: left; overflow: hidden; position: relative; top: 0; left: 0; }
#l-header .nav-Box .nav-bg { width: 199px; height: 100%; position: absolute; top: 0; left: 0; background: url(../images/bg_nav.png) repeat-y left top; background-color: #1d2022; }
#l-header .nav-Box .nav-borderBottom { width: 199px; height: 2px; position: absolute; bottom: 0; left: 0; background: url(../images/border_nav_bottom.png) no-repeat left bottom; z-index: 99; }
#l-header .nav-Box .nav-list-wrapper { width: 100%; height: 204px; background-color: #1d2022; position: relative; top: 0; left: 0; z-index: 88; padding: 42px 0 0 0; }
#l-header .nav-Box .nav-list-wrapper .nav-list { margin: -15px 0 0 28px; }

.header-top { position: relative; top: 0; left: 0; overflow: hidden; }
.header-top .l-slideshow { position: relative; }
.header-top .l-slideshow img { position: absolute; width: 100%; height: auto; }
.header-top .iconScroll { display: block; width: 56px; height: 79px; position: absolute; right: 0; bottom: 10px; }

.nav-list { width: 126px; height: 60px; position: relative; top: 0; left: 0; }
.nav-list .nav-list-inner { position: absolute; top: 0; left: 0; height: 100%; padding: 0 0 0 54px; }
.nav-list .nav-list-inner div { display: block; overflow: hidden; width: 73px; height: 10px; margin: 25px 0 0; }

.is-about .is-def { background: url(../images/icon_nav_about_off.png) no-repeat left center; }
.is-about .is-act { background: url(../images/icon_nav_about_on.png) no-repeat left center; }

.is-fb .is-def { background: url(../images/icon_nav_fb_off.png) no-repeat left center; }
.is-fb .is-act { background: url(../images/icon_nav_fb_on.png) no-repeat left center; }

.is-yt .is-def { background: url(../images/icon_nav_yt_off.png) no-repeat left center; }
.is-yt .is-act { background: url(../images/icon_nav_yt_on.png) no-repeat left center; }

.is-contact .is-def { background: url(../images/icon_nav_contact_off.png) no-repeat left center; }
.is-contact .is-act { background: url(../images/icon_nav_contact_on.png) no-repeat left center; }

.is-footer-contact { position: relative; }
.is-footer-contact .nav_footer_hit { position: absolute; width: 130px; height: 30px; top: 16px; left: 0; }
.is-footer-contact .is-def { background: url(../images/icon_nav_off.png) no-repeat left center; }
.is-footer-contact .is-act { background: url(../images/icon_nav_on.png) no-repeat left center; }

.nav-logo { width: 51px; height: 247px; float: right; position: absolute; top: 0; left: 198px; }
.nav-logo .nav-icon { bottom: 27px; left: -5px; }

.nav-icon { position: absolute; width: 62px; height: 54px; }

.header-explain { width: 100%; background: url(../images/bg_head.jpg) repeat left top; overflow: hidden; position: relative; top: 0; left: 0; text-align: center; padding: 20px 0 30px 0; }
.header-explain .header-slide-pos { text-align: center; height: 3px; margin-bottom: 20px; width: 100%; font-size: 0px; }
.header-explain .header-slide-pos .dot { display: inline-block; width: 3px; height: 3px; margin: 0 7px 0 0; background-color: #4e413b; position: relative; }
.header-explain .header-slide-pos img { position: absolute; left: -8px; top: -8px; }
.header-explain .header-borderTop { background: url(../images/border_header_top.png) repeat-x left top; position: absolute; top: 0; left: 0; width: 100%; height: 1px; }
.header-explain .header-borderRight { background: url(../images/border_rt.png) repeat-y right top; position: absolute; top: 2px; right: 0; width: 12px; height: 100%; }
.header-explain .header-borderBottom { background: url(../images/border_header_bottom.png) repeat-x left bottom; position: absolute; bottom: 0; left: 0; width: 100%; height: 17px; }
.header-explain .header-borderLeft { background: url(../images/border_left.png) repeat-y left top; position: absolute; top: 2px; left: 0; width: 3px; height: 100%; }
.header-explain p.header-num { font-size: 15px; font-weight: bold; margin: 0 0 7px; font-family: HWTGeometricRegular, sans-serif; }
.header-explain h2.header-title { font-size: 66px; font-weight: bold; }
.header-explain p.header-txt { font-size: 11px; line-height: 18px; width: 30%; display: inline-block; margin: 6px 0 0; }
.header-explain p.header-txt p { margin: 0 0 18px; }
.header-explain .gotoWeb { height: 23px; border: solid 2px #8e9091; padding: 0 8px 0 38px; display: inline-block; overflow: hidden; white-space: nowrap; font-family: HWTGeometricRegular, sans-serif; color: #252a2d; text-decoration: none; font-size: 16px; letter-spacing: 1px; line-height: 27px; position: relative; top: 0; left: 0; background-color: #4a555a; max-width: 80%; text-overflow: ellipsis; }
.header-explain .gotoWeb .nav-icon { margin: -15px 0 0 -21px; top: 0; left: 8px; }
.header-explain .gotoWeb #nav_on { display: none; }

.header-explain.sp { width: 100%; }
.header-explain.sp h2.header-title { font-size: 50px; font-weight: bold; width: 90%; word-wrap: break-word; margin: 0 auto; }
.header-explain.sp p.header-txt { width: 90%; }

.nav_hit { width: 130px; height: 40px; left: 10px; top: 10px; position: absolute; z-index: 100; }

/****---- layout-header ----****/
/****---- layout-glid ----****/
.l-glid { /**-- glid-types --**/ /**-- glid-types --**/ /**-- option --**/ }
.l-glid .glid-container { overflow: hidden; margin: 0 0 0 -1px; }
.l-glid .glid-box { margin: 1px; float: left; position: absolute; top: 0; left: 0; background-repeat: no-repeat; }
.l-glid .is-1x1 { width: 206px; height: 271px; }
.l-glid .is-1x1 .glid-img { width: 166px; height: 166px; }
.l-glid .is-1x2 { width: 206px; height: 544px; }
.l-glid .is-1x2 .glid-img { width: 166px; height: 432px; }
.l-glid .is-2x2 { width: 413px; height: 543px; }
.l-glid .is-2x2 .glid-img { width: 369px; height: 432px; }
.l-glid .is-2x2 .arrowIcon { position: absolute; width: 71px; height: 83px; left: 149px; top: 174.5px; z-index: 100; }
.l-glid .is-4x2 { width: 827px; height: 544px; }
.l-glid .is-4x2 .glid-img { width: 785px; height: 432px; }
.l-glid .is-4x2 .arrowIcon { position: absolute; width: 71px; height: 83px; left: 357px; top: 174.5px; z-index: 100; }
.l-glid .is-customPanel .glid-inner { display: none; }
.l-glid .is-battlePanel { z-index: 9; }
.l-glid .is-battlePanel .glid-inner { display: none; }
.l-glid .is-battlePanel .battle-panel { position: absolute; z-index: 1000; left: 0px; top: 0px; width: 206px; height: 271px; overflow: hidden; }
.l-glid .is-battlePanel .battle-panel img { position: absolute; }
.l-glid .is-battlePanel .battle-panel .door { position: absolute; left: 0px; top: 0px; width: 180px; height: 271px; overflow: hidden; }
.l-glid .is-battlePanel .battle-panel.open { overflow: visible; }
.l-glid .is-battlePanel #battle-container { width: 1035px; left: -828px; top: -271px; height: 816px; position: relative; }
.l-glid .is-battlePanel #battle-ui-enemyGageMaxMask, .l-glid .is-battlePanel #battle-ui-playerGageMaxMask { overflow: hidden; position: relative; width: 0; height: 11px; top: 22px; left: 4px; }
.l-glid .is-battlePanel #battle-ui-enemyGage { display: none; position: absolute; top: 334px; left: 30px; }
.l-glid .is-battlePanel #battle-ui-playerGage { display: none; position: absolute; top: 250px; left: 750px; }
.l-glid .is-battlePanel #battle-ui-result { position: absolute; top: 110px; }
.l-glid .is-battlePanel #battle-ui-result-win, .l-glid .is-battlePanel #battle-ui-result-lose { position: absolute; }
.l-glid .is-battlePanel #battle-ui-result-win { background: transparent url("../img/battle/ui/winBack.png") 0 0 repeat; overflow: hidden; height: 440px; }
.l-glid .is-battlePanel #battle-ui-result-lose { background: transparent url("../img/battle/ui/loseBack.png") 0 0 repeat; overflow: hidden; height: 440px; }
.l-glid .is-battlePanel #battle-ui-result-win canvas, .l-glid .is-battlePanel #battle-ui-result-lose canvas, .l-glid .is-battlePanel #battle-ui-result-win img, .l-glid .is-battlePanel #battle-ui-result-lose img { display: block; left: -50px; position: absolute; }
.l-glid .is-battlePanel #battle-ui-result-winMask, .l-glid .is-battlePanel #battle-ui-result-loseMask { position: relative; display: block; overflow: hidden; width: 800px; height: 440px; margin: 0 auto; }
.l-glid .is-oilPressure { width: 620px; height: 271px; background: url(../images/img_yuatsu.png); background-repeat: no-repeat; }
.l-glid .is-logo { width: 620px; height: 271px; background: url(../images/img_kuratas.png); background-repeat: no-repeat; }
.l-glid .glid-inner { margin: 10px 35px 0 9px; }
.l-glid .retro_static { content: ' '; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .08; background: transparent url("../images/video_static_animated.gif") 0 0 repeat; z-index: 100; }
.l-glid .glid-img { overflow: hidden; position: relative; background-color: #000000; }
.l-glid .glid-img img { position: absolute; }
.l-glid .glid-box-hit { position: absolute; width: 827px; height: 544px; z-index: 999; }
.l-glid .glid-box.youtube-open .glid-box-hit { z-index: 0; }
.l-glid .youtube_thumbnail_img { top: -77px; }
.l-glid .img-max-width .glid-img img { width: 100%; height: auto; }
.l-glid .img-max-height .glid-img img { width: auto; height: 100%; }
.l-glid p.glid-title { font-size: 12px; line-height: 14px; margin: 6px 0 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; }
.l-glid p.glid-txt { font-size: 11px; line-height: 14px; overflow: hidden; white-space: break-word; height: 42px; position: relative; }
.l-glid p.glid-date { font-size: 10px; line-height: 14px; position: absolute; bottom: 5px; left: 9px; font-weight: bold; color: #7f7f80; }
.l-glid .newIcon { width: 53px; height: 39px; position: absolute; top: 0; left: 10px; display: none; z-index: 1; }
.l-glid .is-new .newIcon { display: block; }
.l-glid .openIcon { width: 23px; height: 20px; position: absolute; bottom: -20px; left: 50%; margin: 0 0 -1px -23px; display: none; z-index: 66; }
.l-glid .is-open { margin-bottom: 10px; z-index: 9 !important; }
.l-glid .is-open .openIcon { display: block; }
.l-glid .is-leftmost { margin: 1px 1px 1px 0; }
.l-glid .is-rightmost { margin: 1px 0 1px 1px; }
.l-glid .sp-youtube-iframe { position: absolute; top: -75px; }
.l-glid .is-Android { top: 105px; }
.l-glid .panelLoading { position: absolute; right: 10px; bottom: 35px; display: none; }

/**-- option --**/
/**---- detail ----**/
.glid-detailBox { width: 100%; clear: left; height: auto; background-color: #1d2022; color: #FFF; /**-- borders --**/ /**-- borders --**/ }
.glid-detailBox .detailBoxInner { width: 100%; height: auto; position: relative; top: 0; left: 0; background: url(../images/border_top.png) repeat-x left top; }
.glid-detailBox .is-borderLeftTop { background: url(../images/border_left.png) repeat-y left top; width: 3px; height: 100%; position: absolute; top: 2px; left: 0; }
.glid-detailBox .is-borderRightTop { background: url(../images/border_rt.png) repeat-y right top; width: 12px; height: 100%; position: absolute; top: 2px; right: -9px; }
.glid-detailBox .bgRightBottom { width: 46px; height: 294px; position: absolute; right: -9px; bottom: 0; }
.glid-detailBox .closeBtn { position: absolute; top: -11px; right: -9px; width: 41px; height: 41px; display: block; overflow: hidden; z-index: 66; }
.glid-detailBox .imgBox { margin: 0 12px; height: auto; padding: 12px 0; position: relative; overflow: hidden; }
.glid-detailBox .imgBox .detailImg { position: absolute; width: 100%; height: auto; }
.glid-detailBox .imgBox img.max-width { width: 100%; height: auto; }
.glid-detailBox .imgBox img.max-height { width: auto; height: 100%; }
.glid-detailBox .imgBox .cov { width: 100%; height: 100%; position: absolute; }
.glid-detailBox .detail-thumbBox { padding: 10px 0 0 8px; background-color: #1d2022; position: absolute; left: 5px; bottom: 5px; overflow: hidden; }
.glid-detailBox .detail-thumbBox .detail-thumbs { width: 40px; height: 40px; overflow: hidden; float: left; margin: 0 10px 10px 0; position: relative; top: 0; left: 0; cursor: pointer; }
.glid-detailBox .detail-thumbBox .detail-thumbs img.max-width { width: 100%; height: auto; position: absolute; }
.glid-detailBox .detail-thumbBox .detail-thumbs img.max-height { width: auto; height: 100%; position: absolute; }
.glid-detailBox .detail-thumbBox img.currentFrame { width: 56px; height: 58px; position: absolute; top: 1px; left: 0; }
.glid-detailBox ul.share { width: 34px; position: absolute; right: -8px; bottom: 10px; overflow: visible; }
.glid-detailBox ul.share .share-btn { margin: -12px 0 0; position: relative; }
.glid-detailBox ul.share .share-btn .share-btn-hit { width: 34px; height: 104px; left: -10px; top: 16px; position: absolute; z-index: 100; background: url(../images/space.png) repeat left top; }
.glid-detailBox ul.share .share-icon { width: 63px; height: 63px; margin: 0 0 0 -26px; }
.glid-detailBox .share-btn.is-def .actIcon { position: absolute; top: 0; left: 0; }
.glid-detailBox .share-btn.is-act .defIcon { position: absolute; top: 0; left: 0; }
.glid-detailBox .share-link { display: block; margin: -17px 0 0; }
.glid-detailBox .detailContent { margin: 0 auto; background: url(../images/border_bottom.png) repeat-x left bottom; }
.glid-detailBox .detailContent .detailContentInner { position: absolute; top: 30px; left: 30px; width: 916px; }
.glid-detailBox .detailContent .detailContentInner h2.detailTitle { margin: 0 0 12px; font-size: 48px; line-height: 62px; font-weight: bold; letter-spacing: 1px; }
.glid-detailBox .detailContent .detailContentInner div.detailTxt { font-size: 12px; line-height: 18px; margin: 0 0 30px; width: 600px; }
.glid-detailBox .detailContent .detailContentInner div.detailTxt p { margin: 0 0 18px; }
.glid-detailBox .detailContent .detailContentInner .gotoWeb { height: 23px; border: solid 2px #FFF; padding: 0 8px 0 38px; display: inline-block; overflow: hidden; white-space: nowrap; font-family: HWTGeometricRegular, sans-serif; color: #FFF; text-decoration: none; font-size: 16px; letter-spacing: 1px; line-height: 27px; position: relative; top: 0; left: 0; max-width: 550px; text-overflow: ellipsis; }
.glid-detailBox .detailContent .detailContentInner .gotoWeb .nav-icon { margin: -15px 0 0 -21px; top: 0; left: 8px; }
.glid-detailBox .detailContent .detailContentInner .gotoWeb #nav_on { display: none; }

.glid-detailBox.sp { width: 400px; word-wrap: break-word; }
.glid-detailBox.sp .detailContentInner { width: 340px; }
.glid-detailBox.sp .detailContentInner h2.detailTitle { font-size: 32px; line-height: 40px; }
.glid-detailBox.sp .detailContentInner div.detailTxt { width: 300px; }
.glid-detailBox.sp .detailContentInner .gotoWeb { max-width: 250px; }
.glid-detailBox.sp .detail-thumbBox { max-width: 350px; }

.glid-detailBox.column4 { width: 821px; }

.glid-detailBox.column5 { width: 1025px; }

.glid-detailBox.column6 { width: 1235px; }

.glid-detailBox.column7 { width: 1442px; }

/****---- layout-footer ----****/
.l-footer { min-width: 1035px; overflow: hidden; }
.l-footer .footer-loading { display: none; width: 32px; height: 32px; margin: 30px auto; background-image: url(../img/index/bg.png); }
.l-footer .footer-thanx { width: 100%; height: 88px; background: url(../images/border_footer_top.png) repeat-x left top; background-color: #1d2022; position: relative; top: 0; left: 0; padding: 10px 0 0; }
.l-footer .footer-thanx .footer-borderL { position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: url(../images/border_footer_left.png) repeat-y left 8px; }
.l-footer .footer-thanx .footer-borderR { position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: url(../images/border_footer_right.png) repeat-y right 8px; }
.l-footer .footer-thanx .footer-borderB { position: absolute; bottom: 0; right: 0; width: 100%; height: 1px; background: url(../images/border_footer_bottom.png) repeat-x left top; }
.l-footer .footer-thanx h4.footer-title { text-align: center; }
.l-footer .footer-thanx ul.footer-co { width: 777px; overflow: hidden; margin: 19px auto 0; }
.l-footer .footer-thanx ul.footer-co li.co-list { float: left; }
.l-footer .footer-thanx ul.footer-co .co-list.is-logo01 { margin: 0 42px 0 0; }
.l-footer .footer-thanx ul.footer-co .co-list.is-logo02 { margin: 0 50px 0 0; }
.l-footer .footer-thanx ul.footer-co .co-list.is-logo03 { margin: 0 37px 0 0; }
.l-footer .footer-thanx ul.footer-co .co-list.is-logo04 { margin: 0 22px 0 0; }
.l-footer .footer-thanx ul.footer-co .co-list.is-logo05 { margin: 0 32px 0 0; }
.l-footer .footer-thanx.sp { width: 413px; height: auto; padding: 20px 0; }
.l-footer .footer-thanx.sp ul.footer-co { width: 380px; margin: 26px auto 0 !important; }
.l-footer .footer-thanx.sp .co-list:nth-child(3n) { margin: 0 0 33px 0 !important; }
.l-footer .footer-thanx.sp .co-list { margin-bottom: 33px; }
.l-footer .footer-thanx.sp .co-list.is-logo04 { margin: 0 22px 33px 13px !important; }
.l-footer .footer-copy { width: 100%; height: 32px; background: url(../images/border_footer2_tb.png) repeat-x left top; background-color: #1d2022; position: relative; top: 0; left: 0; }
.l-footer .footer-copy .footer-borderL2 { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: url(../images/border_footer2_left.png) repeat-y left top; }
.l-footer .footer-copy .footer-borderR2 { position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: url(../images/border_footer2_right.png) repeat-y right top; }
.l-footer .footer-copy .nav-list { top: -14px; left: -7px; }
.l-footer .footer-copy .copyright { display: block; width: 216px; height: 10px; position: absolute; top: 13px; right: 11px; }

/****---- layout-footer ----****/