@charset "UTF-8";
html,body{height:100%;min-height:100%;}
body {font: 80%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;background:#000000;position: relative;overflow: hidden;visibility: hidden;}
/*loading*/
#loader {margin:auto;width: 100%;height:100vh;text-align: center;font-size: 32px;color: #efefef;position: fixed;top:0;left:0;right:0;bottom:0;z-index: 999;display:block;background: #000;}
.Loder_cont{position: absolute;top:0;left:0;right:0;bottom:0;margin: auto;width:100%;height:20px;}
.Loder_cont p{font-size:80%;letter-spacing: .3em;}
#bar {width: 100%;height: 0;border:none;}
/*#bar span {display: block;width: 0px;height: 1px;background: #efefef;}*/
#load-text{letter-spacing: 3px;font-size: 80%;}
#container {top: 0;left: 0;width: 100%;position: absolute;z-index: 1;}
#wrap{width:100%;}
.stageBase {width: 100%; position: relative;overflow: hidden;}
.stageBase .content_column { padding: 0;}
#stage1 {background:url(../img/bg_01.jpg) no-repeat center fixed;background-size: cover;}
#stage2 {background:url(../img/bg_02.jpg) no-repeat center fixed;background-size: cover;}
#stage3 {background:url(../img/bg_03.jpg) no-repeat center fixed;background-size: cover;}
#stage4 {background:url(../img/bg_03.jpg) no-repeat center fixed;background-size: cover;}
#stage4_ {background:url(../img/bg_04.jpg) no-repeat center fixed;background-size: cover;}
#stage5 {background:url(../img/bg_05.jpg) no-repeat center fixed;background-size: cover;}
#stage6 {background:url(../img/bg_06.jpg) no-repeat center fixed;background-size: cover;}
#pageNav {top: 0;right: 25px; width: 15px;text-align: center;position: fixed;z-index: 2;}
#pageNav ul {width: auto;display: block;}
#pageNav ul li {padding-bottom: 5px;width: 50px;height: 30px;display: block;overflow: hidden;}
#pageNav ul li a {width: 15px;height: 15px;background: rgba(255,255,255,.5) no-repeat center center;display: block;border-radius:50%;}
#pageNav ul li.activeStage a { background: rgba(255,110,0,1) no-repeat center center;}
/*#pageDown {bottom: 0;left: 0;width: 100%; height: 40px;text-align: center;position: fixed;overflow: hidden;z-index: 3;}
#pageDown a {margin: 0 auto; width: 30px;height: 30px;background: transparent url(../img/scroll.png) no-repeat center center;
display: block;}*/

h1{text-align: left;margin:50px 100px;}
h1 p{font-size: 2.5em;letter-spacing: 2px;color: #fff;text-shadow: 2px 2px #000;text-indent: 5em;}


/* News */
.topics{width:30%;margin-left:15%;position: relative;}
.topics p{letter-spacing: 2px;margin:0;font-size:120%;line-height: 25px;vertical-align: middle;color:#1f1f1f;padding:30px;background:rgba(255,255,255,.5);border: #fff 1px solid;margin-bottom: 5px;}
.topics p a{border-bottom: 1px solid #FFFE77;color: #FFFE77;}
.topics p a:hover{color: #fff;border-bottom: none;}

/*sns*/
.sns ul{position:relative;display: flex;flex-flow: row nowrap;justify-content:flex-end; width:auto;padding:10px 0;}
.snsbutton{margin: 10px 5px;width:50px;height:50px;position:relative;z-index:1;display: block;background: transparent;border-radius: 50%;overflow: hidden;}
.snsbutton img{display:block;transition: 0.3s ease-in-out;width:100%;height:100%;}

h2{text-align: center;margin:30px auto;text-shadow: 3px 2px 1px #000;}
h2 p.category_title{color: #fff;font-family: "copperplate";font-weight: 700;font-size:60px;letter-spacing: 10px;text-indent:10px;}
.category_title::after{content: "";border: #fff solid 2px;height: 2px;display: block;width:500px;margin: -15px auto 5px;box-shadow: 3px 2px 1px #000;}
h2 p.category_caption{color: #fff;font-family: "tbnpmincho-std";font-size:20px;letter-spacing: 40px;text-indent:1.5em;}

#globalnav{width:150px;background:rgba(0,0,0,0.7);position: fixed;height:100%;left:0px;top:0;display: flex;flex-flow: row wrap;justify-content: center;z-index:99;}
nav {text-align: center;overflow:hidden;margin-top:50px;}
nav ul {display:flex;flex-flow: column wrap;justify-content: center;}
nav ul li {letter-spacing: 2px;padding:30px 10px;text-align: justify;font-family: "copperplate";font-weight: 700;position: relative;}
nav ul li a{color: #FFFFFF;font-size: 20px;transition: .3s;width:100%;height:100%;display: block;}
nav ul li a:hover{color: #ED6540;}

#menubtn{color:#fff;position: fixed;z-index:99;top:0;left:0px;background: rgba(100,100,100,.8);padding:5px;width:150px;cursor: pointer;}
#menubtn p{text-align: center;font-size: 25px;letter-spacing: 5px;display: inline;margin-left:.5em;}
#menubtn i{text-align: center;font-size: 18px;letter-spacing: 5px;display: inline;margin-left:.5em;}

/*#menubtn p:first-child{font-size:48px;line-height: 35px;}*/
.content_column{position: relative;left:50px;}

.list-mv00{opacity: 0;-webkit-transform: translate(0,0px);transform: translate(0,0px);}
.mv00{opacity: 1;-webkit-transform: translate(0,0);transform: translate(0,0);}
.list-mv01{opacity: 0;-webkit-transform: translate(0,0px);transform: translate(0,0px);}
.mv01{opacity: 1;-webkit-transform: translate(0,0);transform: translate(0,0);}

.column_inner{transition: 3s;}
.column_inner p{text-indent: 0.5em;}
.column_outer{transition: 0.5s;}


.text_column{background: rgba(0,0,0,.6);width:80%;margin:0 auto;max-width:800px;color:#fff;padding:30px;}
.text_column p{text-align: justify;font-size:1.2em;letter-spacing: 2px;line-height: 1.8em;}
.text_column p span{letter-spacing: -0.3em;}
.paragraph{margin-bottom:1em;}

.system_column{background: rgba(0,0,0,.6);width:90%;margin:0 auto;color:#fff;padding:30px;margin-top:50px; max-width:970px;}
.system_column p{text-align: justify;font-size:1.2em;letter-spacing: 2px;line-height: 1.8em;width:80%;margin:0 auto;}
.ssimg{display: flex; flex-flow: row wrap;width:100%;justify-content: center;margin:20px auto;}
.ssimg img{margin:10px;}
.sys_chara{width: 80%;display: flex;flex-flow: row nowrap;justify-content: flex-start;margin:30px auto 0;align-items: center;}
.sys_chara img{border-radius:10px;margin-right:20px;}
.j_chara p{font-family: "tbnpmincho-std";font-size:1.3em;letter-spacing: 4px;text-indent:0em;max-width:600px;text-align: justify;margin:5px 0;}
.j_chara p:first-child{font-size: 2em;border-bottom:1px solid;}
.nextpage{margin-top: 20px;text-align: center;}
.nextpage::after{content: "NEXT";color: #fff;font-size:1.5em;letter-spacing: 2px;display: block;font-family: "copperplate";text-shadow: 2px 1px 1px  #000;}
.nextpage{margin-top: 0px;text-align: center;}
/*.movie{padding:300px 0 500px;top:-250px;}*/
.moviethumb{position: relative;margin:0 auto;text-align: center;overflow: hidden;border: solid 2px #D9D9D9;vertical-align: bottom;width:60%;}
.movie_column{background: rgba(0,0,0,.6);width:80%;margin:0 auto;max-width:800px;color:#fff;padding:30px;}

.softinfo_wrap{position: relative; display:flex;flex-flow: row wrap;justify-content: space-between;letter-spacing: 5px;text-align: center;width:60%;margin: 0 auto;}
.softinfo{margin:2px; font-family: "tbnpmincho-std";font-size: 1.3em;}
.softinfo li{width:100%;margin:5px;vertical-align: middle;border-radius: 5px;padding:15px 0;}
.right-softinfo-h2{line-height:25px !important;padding:10px 0!important;letter-spacing: 0 !important;}
.right-softinfo{background:rgba(0,0,0,.8);height:70px;line-height: 40px;color:#ECECEC;}
.left-softinfo{background: rgba(0,0,0,.8);color:#ECECEC;font-weight: 700;height:50px;line-height: 20px;}
.flex-item{flex-grow: 1;}
.buybtn{padding:20px 30px;border: 1px solid #fff;width:300px;margin:0 auto;text-align: center;font-weight: 700;letter-spacing: 5px;margin-top:30px;background:rgba(0,0,0,.5);transition: .3s;position: relative; font-family: "tbnpmincho-std";}
.buybtn a{display: block;color: #fff;width:100%;height:100%;}
.buybtn:hover{background:rgba(255,0,0,.5);}

/*person*/
.chara_wrap{width:80%;margin:0 auto;position: relative;max-width:1000px;height:100%;}
.charaset{width:100%;position: relative;}
.charaset ul{position: relative;}
.charaset ul li{width:100%;display:none;position: absolute;}
.charaset ul li:first-child{display:block}

.charaarea{display: flex; justify-content: center;align-items: flex-end;bottom:0;position: relative;}
.chara_info{width:50%;background: rgba(0,0,0,.5);color: #fff;padding:30px;margin-bottom: 30%;}
.chara_img{width:50%;}
.chara_img img{width:130%;min-width:680px;}
.iconset{width:55%;position: absolute;z-index: 1;margin:20px 20px 0;top:0;}
.iconset ul{display: flex;justify-content: flex-start;flex-flow: row wrap;}
.iconset ul li{cursor: pointer;transition: .3s;background: rgba(0,0,0,.5);overflow: hidden;margin:2px;border: 1px solid  rgba(200,200,200,.7);width:30px;height:100px;position: relative;}
.iconset ul li img{margin:auto;vertical-align: bottom;height:100%;position: absolute;top:0;left:0;bottom:0;right:0;}
.iconset ul li:hover{opacity: .5;}
.select{display:block;}

/*corporatelogo*/
footer{display:block;background: #000;bottom:0;position: absolute;width:100%;padding-top:10px;}
footer .logo{display:flex;position:relative;justify-content: center;align-items: center;padding-bottom:20px;}
footer p{text-align: center;padding-bottom: 20px;color: #C8C8C8;font-weight: lighter;letter-spacing: 2px;border-top-width: 2px;position:relative;}


@media screen and (max-width: 1280px) {
h1{width:80%;margin: 30px auto;}
h1 img{width:100%;}
h2{margin: 0;}
h2 p.category_title{font-size:40px;letter-spacing: 10px;text-indent:10px;}
.category_title::after{content: "";border: #fff solid 1px;height: 2px;display: block;width:300px;margin: -10px auto 5px;box-shadow: 3px 2px 1px #000;}
.text_column{width:70%;margin:0 auto;padding:10px;}
.text_column p{text-align: justify;font-size:0.9em;letter-spacing: 2px;line-height: 1.8em;}
.system_column{width:70%;padding:10px;margin-top:0px;}
.system_column p{text-align: justify;font-size:1em;width:100%;margin:10px 0;}
.ssimg{margin:0px auto;width:100%;}
.ssimg img{margin:0px;width:50%;height:50%;}
.sys_chara{width: 100%;margin:10px auto 0;align-items: center;}
.sys_chara img{width:20%;}
.j_chara p{font-size:1em;}
.j_chara p:first-child{font-size: 1.5em;}
nav ul li {padding:10px 10px;}

/*person*/
.chara_wrap{width:90%;max-width:800px;margin: 0 auto;}
.charaset ul{bottom:0;}
.charaset ul li{width:100%;display:none;}
.charaset ul li:first-child{display:block}

.charaarea{display: flex; justify-content:flex-end;align-items:flex-end;flex-flow: column;padding-right: 20px;}
.chara_info{width:80%;padding:10px;order: 1;margin-top:-35%;margin-right: 20px;}
.chara_img{width:60%;}
.chara_img img{width:100%;min-width: auto;}

.iconset{width:40%;left:10%;}
.iconset ul{display: flex;justify-content: flex-start;flex-flow: row wrap;}
.iconset ul li{height:50px;}
.iconset ul li img{vertical-align: bottom;height:auto;width:100%;}
.iconset ul li:hover{opacity: .5;}
.select{display:block;}
.softinfo{font-size: 1em;}
.softinfo li{width:100%;margin:2px;vertical-align: middle;border-radius: 5px;padding:10px;}
.right-softinfo{line-height: 20px;height:auto;}
.left-softinfo{line-height:20px;height:auto;}



/*corporatelogo*/
footer{padding-top:5px;}
footer .logo{padding-bottom:10px;}
footer p{padding-bottom: 5px;}


}
@media screen and (max-width: 768px) {
#globalnav{left:-150px;}
.softinfo_wrap{flex-flow: row wrap;}
.content_column{left:0px;}
.chara_wrap{width:100%;}
.iconset{margin:0;width:40%;left:5%;}
/*.iconset ul li{height:60px;}*/
.chara_img{width:100%;}
.chara_img img{display: block;margin-left: 100px;}
.charaset ul{position: relative;}
.charaset ul li{position: relative;}
.chara_info{width:80%;padding:10px;order: 1;margin:-40% auto 0;position: absolute;}
}