@import "https://fonts.googleapis.com/css?family=IM+Fell+Double+Pica+SC";
body,html{width:100%;height:100%;font-size:16px;/*font-family:'IM Fell Double Pica SC',serif;*/ color:#1e1e1e;line-height:1.6;}

#wrapper{width:100%;min-height:100%;position:relative}
a { color:#000; text-decoration:none; }
.active { color: #635d45 !important; }
.not-active { color:#EEE !important; pointer-events: none; cursor: default; background-color: rgba(0,0,0,0.5) !important; }
.clearfix:after{content:".";display:block;clear:both;height:0;visibility:hidden}
hr{border:0;padding-bottom:46px;border-bottom:2px dotted gray;margin-bottom:38px}

/******** Navigation ********/
#nav{height:100%;position:fixed;box-sizing:border-box;padding:20px}

/*#nav #menu {}
#nav #menu li:first-child a:after{ -webkit-transition:all 300ms;-moz-transition:all 300ms;transition:all 300ms }
#nav #menu li:nth-child(2) a:after{ -webkit-transition:all 600ms;-moz-transition:all 600ms;transition:all 600ms }
#nav #menu li:nth-child(3) a:after{ -webkit-transition:all 900ms;-moz-transition:all 900ms;transition:all 900ms }
#nav #menu li:last-child a:after{ -webkit-transition:all 1200ms;-moz-transition:all 1200ms;transition:all 1200ms }*/

#nav #menu li a{color:#000;text-decoration:none;text-transform:capitalize;font-variant:small-caps;font-size:15px}
#nav #menu li a::first-letter{font-size:30px}
#nav #menu li a:hover{color:#635d45;}
#nav ul{margin:0;padding:0;list-style:none;overflow:hidden;z-index:3;float:left}
#nav .menu{clear:both;max-height:0;transition:max-height .2s ease-out}
#nav .menu-icon{cursor:pointer;display:inline-block;padding:28px 20px;position:relative;user-select:none;z-index:1}
#nav .menu-icon .navicon{background:#333;display:block;height:2px;position:relative;transition:background .2s ease-out;width:18px}
#nav .menu-icon .navicon:before,#nav .menu-icon .navicon:after{background:#333;content:'';display:block;height:100%;position:absolute;transition:all .2s ease-out;width:100%}
#nav .menu-icon .navicon:before{top:5px}
#nav .menu-icon .navicon:after{top:-5px}
#nav .menu-btn{display:none}
#nav .menu-btn:checked ~ .menu{max-height:550px;width:100%}
#nav .menu-btn:checked ~ .menu-icon .navicon{background:transparent}
#nav .menu-btn:checked ~ .menu-icon .navicon:before{transform:rotate(-45deg)}
#nav .menu-btn:checked ~ .menu-icon .navicon:after{transform:rotate(45deg)}
#nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,#nav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after{top:0}

#nav #menu li{position:relative;padding-left:9px;/*height:33px;*/margin-bottom:5px}
#nav #menu li:before{display:block;height:80%;width:1px;position:absolute;top:5px;left:0;background-color:#be0000;content:""}
#nav #menu li a{height:100%;display:block;display:table-cell;vertical-align:middle;position:relative}
#nav #menu li:first-child{padding-left:3px}
#nav #menu li:first-child:before{display:none}
#nav #menu li a p{transition:opacity ease 250ms;height:32px;color:#000;font-size:27px;line-height:32px}
#nav #menu li a:hover p,#nav #menu li.visit a p{opacity:.4}
#nav #menu li.blank a p{opacity:1}

#nav #menu2 #share{margin-bottom:15px}
#nav #menu2 #share li{float:left;margin-right:10px;background-color:#be0000}
#nav #menu2 #share li a,#nav #menu2 .link-portal a{display:block;transition:opacity 250ms ease}
#nav #menu2 #share li a:hover,#nav #menu2 .link-portal a:hover{opacity:.6;filter:alpha(opacity=60)}
#nav #menu2 #share li a img{display:block}

#nav2{padding:20px;box-sizing:border-box}

/******** Main ********/
#main{height:100%;padding-left:180px}
#main .sub-menu li a{color:#635d45;text-decoration:none;font-size:20px}
#main .sub-menu li a:hover{color:#666}
/*#main h2 {font-size:18px;font-weight:700; text-transform:uppercase; }*/
/*#nav #menu2 h2{font-size:12px;margin-bottom:5px}*/
#main h2::first-letter, #nav2 h2::first-letter, .remodal h2::first-letter{font-size:21px}
#main h2:before, #nav2 h2:before, .remodal h2:before { position: relative; top: -3px; color:#635d45; content: "|"; padding-right:5px; }
#main h3{color:#635d45;font-size:30px;margin-top:-10px;font-weight:700}
#main{height:100%;padding-left:180px}

.main-title{font-size:50px;color:#635d45}
.sub-title{font-size:20px; color:#FFFFFF}

.sentence{padding:20px; -webkit-animation-duration: 2s !important; animation-duration: 2s !important;}
.sentence section{padding:1em 0;letter-spacing:1px}
.sentence section:first-child{padding-top:0}
.sentence-divider{border-top:2px solid #be0000;padding-top:20px!important;margin-top:20px}

.sentence .thumbs{padding-top:1em}
.sentence .thumbs ul{margin-bottom:4px}
/*.sentence .thumbs ul:first-child{margin-bottom:26px}*/
.sentence .thumbs ul:last-child{margin-bottom:0}
.sentence .thumbs ul li{/*background-color:#b0a67a;*/padding:1px;float:left;margin-right:5px; margin-bottom:5px;}
/*.sentence .thumbs ul li:first-child{margin-left:0!important}*/
.sentence .thumbs li img { border:2px solid #000; }
.sentence .thumbs li img:hover { border: 2px solid #635d45;}
.fader { transition: opacity ease 500ms; }

.fancybox-title { font-family: inherit !important; font-size:21px; }
.fancybox-title-float-wrap .child{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;text-shadow:none!important;padding:10px 20px!important;background:rgba(0,0,0,1);letter-spacing:1px;font-weight:400}

.imgleft { width: 350px; margin: 0px 20px 20px 0px; float:left; }
.imgright { width: 350px; margin: 0px 0px 20px 20px; float:right; }

#scrollup{width:40px;height:40px;position:fixed;bottom:50px;right:20px;display:none;text-indent:-9999px;cursor:pointer;opacity:.6;z-index:2}
#scrollup:hover{opacity:1}
#scrollup img{display:block}

#sub-menu-top dl dd.new:after{content:"";display:block;background:url(../img/game_system/icon-new2.png) no-repeat;width:64px;height:31px;position:absolute;top:3px;left:3px}
.submenu ul{margin-bottom:60px}
.submenu ul li{margin-top:7px;width:25%;max-width:285px;float:left;margin-right:2%;position:relative}
.submenu img{width:100%; max-width:285px; border: 3px solid #000;}
.submenu img:hover { border: 3px solid #635d45; }

#sub-menu-bottom .block{width:30%;float:left}
#sub-menu-bottom .block:first-child{margin-right:40px}
/*#sub-menu-bottom dl{margin-bottom:30px}*/
#sub-menu-bottom dl dt{margin-bottom:10px; margin-top:20px; font-size:21px; }
#sub-menu-top dl dd,#sub-menu-bottom dl dd{float:left;margin-left:8px;margin-bottom:8px;padding:2px;position:relative}

.three_style dl{float:left;width:400px}
.three_style dl:first-child{margin-right:29px;padding-right:30px;border-right:1px solid #bbb082}
.three_style dl dt{margin-bottom:10px}
.three_style dl dd{margin-bottom:14px;background-color:#6e6952;position:relative;padding:1px}
.three_style dl dd h3{padding-bottom:10px;border-bottom:1px solid #bbb082;margin-bottom:10px}

div.kiryu { background:url(../img/common/bg-kiryu.png) no-repeat center center fixed #f1f1f1; }
div.majima { background:url(../img/common/bg-majima.png) no-repeat center center fixed #f1f1f1; } 

.remodal .sentence .col2 dd{float:left}
.remodal .sentence .col2 dd.left{ width:25%; margin-right:27px;padding-right:26px;border-right:1px solid #bbb082}
.remodal .sentence .col2 dd.left img { width:100% }
.remodal .sentence .col2 dd.right{width:65%;}

.remodal .sentence .syscol dd{float:left}
.remodal .sentence .syscol dd.left{ width:40%; margin-right:27px;padding-right:26px;border-right:1px solid #bbb082}
.remodal .sentence .syscol dd.left img { width:100% }
.remodal .sentence .syscol dd.right{width:50%;}
.remodal .sentence .syscol dd.right ul li { margin-bottom:5px; }

.remodal .sentence .castcol dd{float:left}
.remodal .sentence .castcol dd.left{ width:40%; margin-right:27px;padding-right:26px;border-right:1px solid #bbb082 }
.remodal .sentence .castcol dd.left img { width:100% }
.remodal .sentence .castcol dd.right{width:50%;}
.remodal .sentence .castcol dd.right img {width:100%;}

.remodal .sentence .back:before { color:#bbb082;font-size:26px;line-height:41px;vertical-align:middle; content:"<"; margin-right: 0.5em;}}

.sub-nav{border-top:3px dotted gray;padding-top:50px;padding-bottom:50px;}
.sub-nav-mlv ul li:before,.sub-nav-stage ul li:after,.sub-nav ul li:first-child:before{color:#bbb082;font-size:26px;line-height:41px;vertical-align:middle}
.sub-nav ul li{float:left;margin-left:40px;vertical-align:middle;line-height:41px;font-size:20px}
.sub-nav ul li:first-child:before{content:"<"; margin-right: 0.5em;}
.sub-nav ul li:first-child:after{content:""; margin-left: 0em;}
.sub-nav ul li:after {content: ">"; margin-left: 0.5em;}
.sub-nav ul li a:hover{ color:#b30000; }

.submenu figure { margin-right:10px;}
.submenu img{-webkit-transition:all 300ms;-moz-transition:all 300ms;transition:all 300ms}
.submenu img:hover{transform:translate(0,-10px);-webkit-transform:translate(0,-10px);-o-transform:translate(0,-10px);-moz-transform:translate(0,-10px)}
.submenu img:hover:after{ background:rgba(0,0,0,.75); width:100%; height:100%; content:'View' }	
.submenu figure:hover {color: #635d45 !important; }
.submenu figcaption { font-size:12px; text-align:center;}


/******** Cast ********/
#cast-titles { text-align:center; }
#cast-kiryu,#cast-majima{position:absolute;top:50%;left:50%}
#cast-kiryu{margin-top:-111px;margin-left:-295px}
#cast-majima{margin-top:-111px;margin-left:73px}
#cast-kiryu .main-title,#cast-majima .main-title{ color:#FFF !important; text-shadow: 1px 1px 10px #000000; display:block; }
#cast-kiryu .sub-title,#cast-majima .sub-title{ text-shadow: 1px 1px 10px #000000; display:block; margin-top: -15px; }
#cast-kiryu .button,#cast-majima .button,#purchase-button .button{display:inline-block;padding:0 1em;font-size:14px;line-height:23px;background-color:#12110d;margin-right:4px;transition:background-color ease 300ms;bottom:-35px;color:#FFF}
#cast-kiryu .button:hover,#cast-majima .button:hover,#purchase-button .button:hover{ background-color:rgba(190,0,0,0.8);cursor:pointer}
#cast-kiryu .button span,#cast-majima .button span,#purchase-button .button span{font-size:13px;color:#bbb082}

.cast-brief {font-size:18px; margin-bottom:20px; color: #635d45; }

/******** Purchase ********/
#purchase-links { /*width:70%;*/ }
#purchase-links li { display: inline-block; margin:10px; width:200px; text-align:center;  }
#purchase-links li a { color: #FFF; padding:10px; font-size:18px; background-color:rgba(0,0,0,0.8); display:block;}
#purchase-links li a:hover { background-color:rgba(190,0,0,0.8); }
#purchase-links li a span{font-size:13px;color:#bbb082}

#purchase-shot { /*float:left; margin-right:40px;*/ }
#purchase-button { /*float:left;*/ margin-top:20px; margin-bottom:200px; width:1000px; /*background: rgba(255, 255, 255, .8); padding:20px;*/ }

/******** Footer ********/
#footer{width:100%;position:absolute;left:0;bottom:0;background-color:#424242;background-color:rgba(23,23,23,0.8);padding:10px;z-index:100;font-family:Arial,Helvetica,sans-serif;box-sizing:border-box;z-index:-1;}
#footer .copyright{float:left;height:27px;width:100%}
#footer ul#disclaimer{margin:0 auto;font-family:Arial,Helvetica,Verdana,sans-serif}
#footer ul#disclaimer li{display:inline-block;padding:5px;vertical-align:middle}
#footer ul#disclaimer li#esrb{min-width:157px;height:auto}
#footer ul#disclaimer li#esrb img{width:175px;height:auto;min-height:72px;vertical-align:middle}
#footer ul#disclaimer li#sega img{width:100%;height:auto;max-width:100px}
#footer ul#disclaimer li#playstation img{width:100%;height:auto;max-width:180px}
#footer ul#disclaimer li#legal{width:60%;font-size:10px;color:#FFF}

/******** Media Queries ********/
@media (max-width:674px) {
#nav{position:relative;height:auto;width:100%;overflow:auto}
#nav #menu{width:100%;margin:0 auto}
#nav #menu li:before{display:none}
#nav #menu li:first-child,.gt-945 #nav #menu li a p{display:none}
#nav #menu li{margin:0;padding:10px;text-align:center;background:#FFF}
#nav #menu li a{width:100%;display:block}
#nav #menu2{display:none}
#main{width:100%;height:auto;position:inherit!important;top:0!important;padding:0!important;margin:0!important}
#main h2{position:inherit!important;top:0!important;padding-left:0}
#main h3{position:inherit!important;top:0!important}
#main ul.sub-menu{position:inherit!important;top:0!important}

#sub-menu-bottom .block{width:100%;}
.submenu ul li { width: 100%; }

/*#cast-titles { margin-top:570px; }*/

.three_style dl:first-child { border-right: none; }

.remodal .sentence .col2 dd.left { width:100%; margin-right:0px;padding-right:0px;border-right: none; }
.remodal .sentence .col2 dd.right {width:100%;}
.remodal .sentence .castcol dd.left{ width:100%; margin-right:0px;padding-right:0px;border-right: none; }
.remodal .sentence .castcol dd.right{width:100%;}
.remodal .sentence .syscol dd.left{ width:100%; margin-right:0px;padding-right:0px;border-right: none; }
.remodal .sentence .syscol dd.right{width:100%;}

#purchase-links { width:100%; } #purchase-links li { width:90%; }

#purchase-shot { width:100%; margin:0 auto; text-align:center; }
#purchase-button {  width:100%; margin:0 auto; margin-top:20px; text-align:center; }

#footer{text-align:center;/* position:inherit !important;*/ }
#footer ul#disclaimer li#legal{width:90%}
}

@media (min-width: 48em) {
#nav #menu li:before{display:block;height:80%;width:1px;position:absolute;top:5px;left:0;background-color:#be0000;content:""}
#nav #menu li a{height:100%;display:block;display:table-cell;vertical-align:middle;position:relative}
#nav #menu li:first-child{padding-left:3px}
#nav #menu li:first-child:before{display:none}
#nav #menu li a .new{position:absolute;top:0;right:-40px;color:#d80000;font-size:14px;line-height:19px}
#nav #menu li a .new.mini{font-size:9px;right:-28px}
#nav .menu{clear:none;max-height:none}
#nav .menu-icon{display:none}
}