@charset "utf-8";

/* 1199px以下用（トップメニュー幅以下） ************************************************************************************************************/
@media screen and (max-width: 1199px) {
.PC{display:none !important;}
.SP{display:block !important;}

#spHeaderImg img{width:100%;}

.sgLogoSet img{margin:20px auto; width:80%;}

.headerPadding{padding-top:0px;}

#preCpBtn2{display:none;}


* html .layer_board_bg,
* html .layer_board{
	position:absolute;
}

.layer_board_bg{
	position:fixed;
	width:100%;
	height:100%;
	z-index:1000;
	top:0;
	left:0;
	display:none;
	cursor:pointer;
	background:#000;
}

.layer_board{
	display:none;
	position:fixed;
	left:0%;
	margin:0px;
	text-align:center;
	z-index:2000;
}

.layer_board img{width:70%;}
.layer_board .btn_close a img{width:50%;}


/*Main-----------------------------------------------------------------------------------------------------------------------*/
.flexBox{display:flex; flex-direction:column-reverse;}

#pvBox{margin-top:20px;}
#entryBox{
	margin-top:0px;
	height:auto;
	text-align:center;
}

#entryBox img{width:90%;}

#pvBox img{width:100%;}

#entryBox div{margin:0px;}

.top10Box{width:90%; margin:0 auto !important;}

.preregisterBtn{margin-top:50px; margin-bottom:30px;}

.cd-bg-1{background:none; padding-bottom: 0px;}


/*NEWS-----------------------------------------------------------------------------------------------------------------------*/
.newsBox{
	margin-top:20px;
	margin-bottom:10px;
	width:100%;
	padding:6px;
	border:2px solid #00E3FF;
	background:rgba(0,0,0,0.7);
	height:auto;
}

.newsBox .newsList li{
	margin-bottom:10px;
	border-bottom:solid 1px #81e7fd;
	padding:0px 0px 10px 0px;
	display:table;
	width:100%;
	font-size:28px;
	font-size:2.8rem;
}
.newsBox .newsList li a{text-decoration:none; line-height:28px; line-height:2.8rem; display:block;}
.newsBox .newsList li a:hover{color:#f0ff00;}
.newsBox .newsDate{width:100%; display:block; margin-bottom:5px;}
.newsBox .newsTitle{width:100%; display:block;}

.newsList{width:100%; height:420px; overflow:auto;}
.newsList li{margin-bottom:10px; border-bottom:solid 1px #B5B5B5; padding:0px 0px 10px 0px; display:table; width:100%;}
.newsList li a{text-decoration:none; color:#FFFFFF; line-height:1.8rem;}
.newsList li a:hover{color:#00E3FF;}

.newsMoreBtn{margin-top:20px; text-align:center;}

#newsTl{color:#00E3FF; border-bottom:2px solid #00E3FF; padding-bottom:5px; font-size:40px; font-size:4.0rem;}

	
.newsListBox{
	margin-top:5px;
	width:100%;
	padding:20px;
	border:2px solid #00E3FF;
	background:rgba(0,0,0,0.7);
}

.newsListBox .newsList li{
	margin-bottom:10px;
	border-bottom:solid 1px #81e7fd;
	padding:0px 0px 10px 0px;
	display:table;
	width:100%;
	font-size:28px;
	font-size:2.8rem;
}
.newsListBox .newsList li a{text-decoration:none; line-height:28px; line-height:2.8rem; display:block;}
.newsListBox .newsList li a:hover{color:#f0ff00;}
.newsListBox .newsDate{width:100%; display:block; margin-bottom:5px;}
.newsListBox .newsTitle{width:100%; display:block;}

.newsListBox .newsList{width:100%; height:auto; overflow:visible;}


#newsContentDate{width:100%; font-size:20px; font-size:2.0rem; margin-bottom:4px;}
#newsContentTl{margin-bottom:10px; border-bottom:solid 1px #B5B5B5; padding:0px 0px 10px 0px; font-size:28px; font-size:2.8rem; color:#FFFFFF;}


#newsContent{width:100%; font-size:22px; font-size:2.2rem; line-height:22px; line-height:2.2rem;}
#newsContent p,#newsContent div{line-height:22px; line-height:2.2rem;}
#newsContent img{width:100%;}

.paging{width:100%; font-size:16px; font-size:1.6rem; line-height:22px; line-height:2.2rem;}
.paging #currentPage{display:inline-block; padding:4px; font-size:18px; font-size:1.8rem; line-height:24px; line-height:2.4rem;}
.paging a{display:inline-block; padding:4px; font-size:18px; font-size:1.8rem; line-height:24px; line-height:2.4rem; color:#00E3FF;}


.cpTbl{width:100%; border:1px solid #4A4A4A;}
.cpTbl th{width:15%; padding:5px; border-bottom:1px solid #4A4A4A; border-right:1px solid #4A4A4A; line-height:26px; line-height:2.6rem;}
.cpTbl td{width:85%; padding:5px; border-bottom:1px solid #4A4A4A; line-height:26px; line-height:2.6rem;}


/*Privacy_Terms-----------------------------------------------------------------------------------------------------------------------*/
#privacyTl,#termsTl{color:#00E3FF; border-bottom:2px solid #00E3FF; padding-bottom:5px; font-size:40px; font-size:4.0rem;}

.privacyBox,.termsBox{
	margin-top:5px;
	width:100%;
	padding:20px;
	border:2px solid #00E3FF;
	background:rgba(0,0,0,0.7);
}


/*Twitter-----------------------------------------------------------------------------------------------------------------------*/
#twitterBox{
	margin-top:20px;
	margin-bottom:10px;
	width:100%;
	padding:6px;
	border:2px solid #00E3FF;
	background:rgba(0,0,0,0.7);
	height:auto;
	display:block;
}

#twitterBox-in{margin-top:5px;}

#twitterBox-in iframe{width:100% !important; height:500px !important;}

#twCpBox{margin-bottom:30px;}

#sptwCpBox img{width:100%;}


/*Story-----------------------------------------------------------------------------------------------------------------------*/
#storyBox{padding-top:60px;}


/*Cast-----------------------------------------------------------------------------------------------------------------------*/
#castBox{padding-top:40px;}
#castNameBox{margin-bottom:30px; margin-top:10px;}


/*Designer-----------------------------------------------------------------------------------------------------------------------*/
#designerBox{padding-top:40px;}
#designerNameBox{margin-bottom:15px;}
	
	
/*Gamesystem-----------------------------------------------------------------------------------------------------------------------*/
#gamesystemBox{padding-top:40px;}
#gamesystemBox h3{margin-bottom:10px;}


/*Movie-----------------------------------------------------------------------------------------------------------------------*/
.mvTl{font-size:20px; font-size:2.0rem; color:#F0FF00; margin-top:14px; margin-bottom:4px; text-indent:0;}


/*SideMenu-----------------------------------------------------------------------------------------------------------------------*/
.sideMenuBtn a{position:fixed; right:0px; top:0px; padding:0px !important; z-index:999;}

#sideMenuList{width:100%; padding:10px;}

#sideMenuList li a{
	width:100%;
	display:block;
	background-color:#00b8d7;
	color:#FFFFFF;
	padding:14px;
	margin-bottom:10px;
	font-size:18px;
	font-size:1.8rem;
	text-align:center;
}

#sideMenuList li a:hover{background-color:#0fcded; text-decoration:none;}

.sidebar{position:fixed; color:#fff;}

.sidebar.left{
	top:0;
	left:0;
	bottom:0;
	width:270px;
	background:rgba(0,0,0,0.70);
}

.sidebar.right{
	top:0;
	right:0;
	bottom:0;
	width:270px;
	background:rgba(0,0,0,0.70);
}

.sidebar.top{
	left:0;
	right:0;
	top:0;
	height:270px;
	background:rgba(0,0,0,0.70);
}

.sidebar.bottom{
	left:0;
	right:0;
	bottom:0;
	height:270px;
	background:rgba(0,0,0,0.70);
}


/*Character-----------------------------------------------------------------------------------------------------------------------*/
#characterTl img{width:100%; margin:5px 0px;}

#characterSP img{width:100%}
#voiceBtnBox{text-align:center; width:100%; border-bottom:2px solid #00FBFF; margin-bottom:20px; padding-bottom:20px; margin-top:10px; padding-top:10px;}

#cvBtn1{display:inline-block; position:static; width:48%;}
#cvBtn2{display:inline-block; position:static; width:48%;}


.cIconBox img{margin:0 auto;}

.pfBox{background-color:rgba(0,0,0,0.80);}

.pfBox li{padding:10px; font-size:20px; font-size:2.0rem;}


/*Pre-----------------------------------------------------------------------------------------------------------------------*/
#preCpHeader{padding-top:0px;}


/*Footer-----------------------------------------------------------------------------------------------------------------------*/
.footerLogoBox div{display:inline-block; margin:0px 5px; width:30%}
.footerLogoBox img{width:100%}
.copyright{margin-top:24px; padding-bottom:30px; font-size:14px; font-size:1.4rem; text-align:center;}

.fRegisterBox{
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
}

.fRegisterBox img{width:80%; margin:0 auto;}

.socialBox{
	width:100%;
	margin:0 auto;
	text-align:center;
	margin-bottom:20px;
}

.socialBox a img{
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
}
.socialBox a:hover img{
	opacity:0.7;
	filter:alpha(opacity=70);
}

.socialBox .twIcon{display:inline-block; margin:0 10px;}
.socialBox .fbIcon{display:inline-block; margin:0 10px;}
.socialBox .lineIcon{display:inline-block; margin:0 10px;}


#footerLinks{width:100%; margin-bottom:20px; padding-top:6px; text-align:center;}
#footerLinks ul{margin:0 auto; width:100%;}
#footerLinks ul li{display:inline-block; margin:0px 5px;}
#footerLinks ul li a{color:#FFFFFF; text-decoration:underline; font-size:14px; font-size:1.4rem;}
#footerLinks ul li a:hover{text-decoration:none;}


}
/* /1199px以下用（トップメニュー幅以下） ***********************************************************************************************************/


/* 768px以下用（タブレット以下） ******************************************************************************************************************/
@media screen and (max-width: 768px) {
.PC{display:none !important;}
.SP{display:block !important;}

#spHeaderImg img{width:100%;}

.sgLogoSet img{margin:5px auto 0px 0px; width:70%;}


nav{display:block;}

.backBtn img{text-align:center; width:50%;}
.pageUpBtn img{text-align:center; width:70%;}


* html .layer_board_bg,
* html .layer_board {
	position: absolute;
}

.layer_board_bg {
	position: fixed;
	width: 100%;
	height: 100%;
	
	z-index: 1000;
	
	top: 0;
	left: 0;
	
	display: none;
	cursor: pointer;
	background: #000;
}

.layer_board {
	display: none;
	position: fixed;
	left: 0%;
	margin: 0px;
	
	text-align: center;
	z-index: 2000;
}

.layer_board img{width:100%;}
.layer_board .btn_close a img {width:50%;}


/*Main-----------------------------------------------------------------------------------------------------------------------*/
.flexBox{display:flex; justify-content:space-between}

.cd-bg-1{background:none; padding-bottom: 0px;}

#pvBox{margin-top:10px;}

#entryBox{
	margin-top:0px;
	height:auto;
	text-align:center;
}

#entryBox img{width:90%;}

#entryBox div{margin:0px;}

.top10Box{width:90%; margin:0 auto !important;}


.preregisterBtnT{margin-top:0px; margin-bottom:10px;}
.preregisterBtnB{margin-top:15px; margin-bottom:10px;}

.newsMoreBtn img{width:30%;}

/*NEWS-----------------------------------------------------------------------------------------------------------------------*/
.newsBox .newsList li{
	margin-bottom:10px;
	border-bottom:solid 1px #81e7fd;
	padding:0px 0px 10px 0px;
	display:table;
	width:100%;
	font-size:18px;
	font-size:1.8rem;
}
.newsBox .newsList li a{text-decoration:none; line-height:18px; line-height:1.8rem; display:block;}
.newsBox .newsList li a:hover{color:#f0ff00;}
.newsBox .newsDate{width:100%; display:block; margin-bottom:2px; font-size:16px; font-size:1.6rem;}
.newsBox .newsTitle{width:100%; display:block;}

.newsList{width:100%; height:220px; overflow:auto;}
.newsList li{margin-bottom:10px; border-bottom:solid 1px #B5B5B5; padding:0px 0px 10px 0px; display:table; width:100%;}
.newsList li a{text-decoration:none; color:#FFFFFF; line-height:1.8rem;}
.newsList li a:hover{color:#00E3FF;}

.newsMoreBtn{margin-top:10px; margin-bottom:10px; text-align:center;}

#newsTl{color:#00E3FF; border-bottom:2px solid #00E3FF; padding-bottom:2px; font-size:26px; font-size:2.6rem; margin-top:10px;}


.newsListBox{
	margin-top:5px;
	width:100%;
	padding:5px;
	border:2px solid #00E3FF;
	background:rgba(0,0,0,0.7);
}

.newsListBox .newsList li{
	margin-bottom:10px;
	border-bottom:solid 1px #81e7fd;
	padding:0px 0px 10px 0px;
	display:table;
	width:100%;
	font-size:18px;
	font-size:1.8rem;
}
.newsListBox .newsList li a{text-decoration:none; line-height:1.8rem; display:block;}
.newsListBox .newsList li a:hover{color:#f0ff00;}
.newsListBox .newsDate{width:100%; display:block; margin-bottom:2px; font-size:16px; font-size:1.6rem; line-height:22px; line-height:2.2rem;}
.newsListBox .newsTitle{width:100%; display:block;}

.newsListBox .newsList{width:100%; height:auto; overflow:visible;}



#newsContentDate{width:100%; font-size:16px; font-size:1.6rem; margin-bottom:2px; line-height:22px; line-height:2.2rem;}
#newsContentTl{margin-bottom:10px; border-bottom:solid 1px #B5B5B5; padding:0px 0px 10px 0px; font-size:20px; font-size:2.0rem; color:#FFFFFF;}

#newsContent{width:100%; font-size:16px; font-size:1.6rem; line-height:20px; line-height:2.0rem;}
#newsContent p,#newsContent div{line-height:20px; line-height:2.0rem;}
#newsContent img{width:100%;}

.paging{width:100%; font-size:16px; font-size:1.6rem; line-height:22px; line-height:2.2rem;}
.paging #currentPage{display:inline-block; padding:4px; font-size:18px; font-size:1.8rem; line-height:24px; line-height:2.4rem;}
.paging a{display:inline-block; padding:4px; font-size:18px; font-size:1.8rem; line-height:24px; line-height:2.4rem; color:#00E3FF;}

.cpTbl{width:100%; border:1px solid #4A4A4A;}
.cpTbl th{width:15%; padding:5px; border-bottom:1px solid #4A4A4A; border-right:1px solid #4A4A4A; line-height:26px; line-height:2.6rem;}
.cpTbl td{width:85%; padding:5px; border-bottom:1px solid #4A4A4A; line-height:26px; line-height:2.6rem;}


/*Privacy_Terms-----------------------------------------------------------------------------------------------------------------------*/
#privacyTl,#termsTl{color:#00E3FF; border-bottom:2px solid #00E3FF; padding-bottom:2px; font-size:26px; font-size:2.6rem; margin-top:10px;}

.privacyBox,.termsBox{
	margin-top:5px;
	width:100%;
	padding:5px;
	border:2px solid #00E3FF;
	background:rgba(0,0,0,0.7);
	font-size:14px;
	font-size:1.4rem;
}

.privacyBox h3,.termsBox h3{
	font-size:17px;
	font-size:1.7rem;
	line-height:18px;
	line-height:1.8rem;
	margin:25px 0px 5px 0px;
}

.privacyBox p,.termsBox p{
	line-height:16px;
	line-height:1.6rem;
}

.privacyBox p:last-child,.termsBox p:last-child{
	margin-top:20px;
}

.termsSubTl{margin-bottom:8px;}
.termsTxt_1{margin-bottom:8px;}
.termsTxt{margin-bottom:8px; text-indent:-1.5rem; padding-left:1.5rem;}
.termsTxtIn{margin-bottom:8px;}
.txtEnd{margin-bottom:24px;}



/*Twitter-----------------------------------------------------------------------------------------------------------------------*/
#twitterBox-in{margin-top:5px;}
#twitterBox-in iframe{width:100% !important; height:280px !important;}


/*Story-----------------------------------------------------------------------------------------------------------------------*/
#storyBox{padding-top:30px;}


/*Cast-----------------------------------------------------------------------------------------------------------------------*/
#castBox{padding-top:10px;}
#castNameBox{margin-bottom:10px; margin-top:5px;}


/*Designer-----------------------------------------------------------------------------------------------------------------------*/
#designerBox{padding-top:10px;}
#designerNameBox{margin-bottom:10px;}
#designerBox h3{margin-bottom:5px;}


/*Gamesystem-----------------------------------------------------------------------------------------------------------------------*/
#gamesystemBox{padding-top:25px;}
#gamesystemBox h3{margin-bottom:5px;}


/*Movie-----------------------------------------------------------------------------------------------------------------------*/
.mvTl{font-size:14px; font-size:1.4rem; color:#F0FF00; margin-top:14px; margin-bottom:2px; text-indent:0px;}


/*Character-----------------------------------------------------------------------------------------------------------------------*/
#voiceBtnBox{text-align:center; width:100%; border-bottom:2px solid #00FBFF; margin-bottom:10px; padding-bottom:10px; margin-top:5px; padding-top:5px;}

.pfBox{background-color:rgba(0,0,0,0.80);}

.pfBox li{padding:10px; font-size:13px; font-size:1.3rem;}


/*Footer-----------------------------------------------------------------------------------------------------------------------*/
.footerLogoBox div{display:inline-block; margin:0px 5px; width:40%}
.footerLogoBox img{width:100%}
.copyright{margin-top:24px; padding-bottom:30px; font-size:14px; font-size:1.4rem; text-align:center;}

.fRegisterBox{
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
}

.fRegisterBox img{width:80%; margin:0 auto;}

#appInfo{width:100%; margin-bottom:20px; margin-top: 10px; border-top: 1px solid #424242; padding-top: 10px;}
#appInfo table{margin:0 auto;}
#appInfo th,#appInfo td{padding:8px; font-size:14px; font-size:1.4rem;}

#footerLinks{width:100%; margin-bottom:20px; padding-top:6px; text-align:center;}
#footerLinks ul{margin:0 auto; width:100%;}
#footerLinks ul li{display:inline-block; margin:0px 5px;}
#footerLinks ul li a{color:#FFFFFF; text-decoration:underline; font-size:14px; font-size:1.4rem;}
#footerLinks ul li a:hover{text-decoration:none;}



/*Pre-----------------------------------------------------------------------------------------------------------------------*/
.cpBdr{
	margin-bottom:15px;
	padding-bottom:15px;
	border-bottom:1px solid #00FFFB;
}

#cpPre,#twCp,#twCp2,#twCp3,#designer{margin-top:0px; padding-top:0px;}

#twmvList{text-align:center;}
.twmvListIn{display:inline-block; width:100%; margin:5px 0px;}


#twCp3Bdr{
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #00FFFB;
}


#twCp3In{
	margin-top:12px;
	padding:10px;
	border:1px solid #696969;
}


#twCp3In p{
	font-size:14px;
	font-size:1.4rem;
	line-height:16px;
	line-height:1.6rem;
	margin:5px 0px 12px 0px;
}

.twCp3subTl{
	font-size:18px;
	font-size:1.8rem;
	line-height:20px;
	line-height:2.0rem;
	color:#FFFF00;
}


/*SideMenu-----------------------------------------------------------------------------------------------------------------------*/
.sideMenuBtn img{width:90%;}
.sideMenuBtn a{position:fixed; right:0px; top:0px; padding:0px !important; z-index:999;}

#sideMenuList{width:100%; padding:10px;}

#sideMenuList li a{
	width:100%;
	display:block;
	background-color:#00b8d7;
	color:#FFFFFF;
	padding:14px;
	margin-bottom:10px;
	font-size:18px;
	font-size:1.8rem;
	text-align:center;
}

#sideMenuList li a:hover{background-color:#0fcded; text-decoration:none}

.sidebar{position:fixed;color: #fff;}

.sidebar.left {
	top: 0;
	left: 0;
	bottom: 0;
	width: 160px;
	background:rgba(0,0,0,0.70);
}

.sidebar.right {
	top: 0;
	right: 0;
	bottom: 0;
	width: 160px;
	background:rgba(0,0,0,0.70);
}

.sidebar.top {
	left: 0;
	right: 0;
	top: 0;
	height: 160px;
	background:rgba(0,0,0,0.70);
}

.sidebar.bottom {
	left: 0;
	right: 0;
	bottom: 0;
	height: 160px;
	background:rgba(0,0,0,0.70);
}


/*TopBack-----------------------------------------------------------------------------------------------------------------------*/
 #topbutton{display:none !important;}

}