/****************************************
		2. レイアウト
*****************************************/
/*
フォント
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap');

:root {
    --brand-primary: #a0038b;
    --brand-secondary: #000;
	--bg-key: #000;
}

/*=================================
layout
=================================*/
body{
	font-size: 16px;
	/*font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;*/
	font-family: 'Noto Sans JP', YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", sans-serif;
	/*font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;*/
	letter-spacing: 0.1em;
	overflow-x: hidden;
	background-color: var(--brand-primary);
	border-top: 10px var(--brand-primary) solid;
}
a{color: #ce9252;}
img{vertical-align: bottom;}

/*表示*/
.view_pc{display: block;}
.view_pc_tb{display: block;}
.view_tb{display:none;}
.view_tb_sp{display:none;}
.view_sp{display:none;}

.fade,
.fadeup{
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(opacity=0)";
}
/*==================
footer
==================*/
footer{
	width: 100%;
	position: relative;
	padding-bottom: 2em;
	text-align: center;
	color: #fff;
	background-color: var(--brand-secondary);
	font-size: 11px;
}
footer a{
	color: #fff;
}
footer a:hover{
	opacity: 0.7;
}

footer::before{
	content: '';
	display: inline-block;
	width: 100%;
	height: 10px;
}
#footer_wrap{width: 90%;margin: 0 auto;}
#footer_wrap a{display: inline-block;}
#footer_wrap a:hover{opacity: 0.7;}
.footer_sns{text-align:center; padding-top:20px; margin-bottom:10px;}
.footer_sns a{max-width: 40px; margin:4px;}
.footer_sns a img{ width: 100%;}
footer .footer_copy{
	margin: 1.0em 0;
}
#pagetop {
	width: 80px;
	text-align: center;
	position: fixed;
	right: 10px;
	bottom: 10px;
	cursor: pointer;
	z-index: 11;
}
/*==================
load
==================*/
#load{
	z-index: 100;
	width:100%;
	height:100vh;
	top: 0;
	text-align: center;
	position: fixed;
	background-color: var(--brand-primary);
}
#load div {
	max-width: 200px;
	width: 100%;
	margin: 0 auto;
	padding-top: 40vh;
}
#load div img{
	width: 100%;
	max-width: 200px;
}

/*==================
header
=================*/
header{
	text-align: center;
	width: 100%;
	position: relative;
}
header #logo{
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	z-index: 1;
	text-align: center;
	width: 100%;
}
header #logo img{
	width: 30%;
	margin: 0 auto;
	max-width: 200px;
}

/*==================
contents
==================*/
#key{
	width: 100%;
	/*background-color: var(--bg-key);*/
	background-color: var(--brand-primary);
	position: relative;
}


#key section{
	width: 25%;
	max-width: 480px;
	float: left;
	position: relative;
	box-sizing: border-box;
}
#key section:nth-child(1){
	background-color: #41ddff;
	/*animation: c1_bg 8s linear infinite;*/
}
/*@keyframes c1_bg {
	0%,100%{background-color: #41ddff;}
	50%{background-color: #ff41a8;}
}*/
#key section:nth-child(2){
	background-color: #41ff72;
	/*animation: c2_bg 8s linear infinite;*/
}
/*@keyframes c2_bg {
	0%,100%{background-color: #41ff72;}
	50%{background-color: #ffa340;}
}*/
#key section:nth-child(3){
	background-color: #ff414e;
	/*animation: c3_bg 8s linear infinite;*/
}
/*@keyframes c3_bg {
	0%,100%{background-color: #ff414e;}
	50%{background-color: #41acff;}
}*/
#key section:nth-child(4){
	background-color: #ffac41;
	/*animation: c4_bg 8s linear infinite;*/
}
/*@keyframes c4_bg {
	0%,100%{background-color: #ffac41;}
	50%{background-color: #41ff60;}
}*/

#key section:nth-child(5){
	background-color: #ffac41;
}
#key section:nth-child(6){
	background-color: #4bafff;
}
#key section:nth-child(7){
	background-color: #eaeaab;
}
#key section:nth-child(8){
	background-color: #818181;
}
#key section:nth-child(9){
	background-color: #69982B;
}

#key section img.bg_chara{
	width: 100%;
	max-width: 480px;
}
#key section .chara_intro{
	position: absolute;
	top: 70%;
	left: 10%;
	width: 80%;
	max-width: 400px;
	box-sizing: border-box;
}
#key section .chara_intro .name_img{
	max-width: 400px;
	width: 100%;
}
#key section .chara_intro a{
	font-family:  'Noto Sans JP', YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", sans-serif;
	display: inline-block;
	padding: 0.5em;
	text-align: center;
	box-sizing: border-box;
	margin: 2% 5%;
	width: 90%;
	max-width: 400px;
	border-radius: 2.5em;
	-webkit-border-radius: 2.5em;
	-moz-border-radius: 2.5em;
	color: #fff;
	line-height: 1.6em;
}
#key section .chara_intro a:hover{
	opacity: 0.7;
}
#key section .chara_intro a.link_youtube{
	background-color: #ff1d1d;
}
#key section .chara_intro a.link_twitter{
	background-color: #3790ff;
	margin-bottom: 0;
}
/**/
#contents{
	text-align: center;
	padding-bottom: 3.0em;
}
#contents .coming{
	margin: 2.0em auto;
	width: 80%;
	max-width: 500px;
}
#twitter{
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
	height: 300px;
	background-color: #fff;
	box-sizing:border-box;
	overflow: hidden;
}
a.btn_link{
	background-color: #3790ff;
	margin-bottom: 0;
	font-family:  'Noto Sans JP', YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", sans-serif;
	display: inline-block;
	padding: 0.5em;
	text-align: center;
	box-sizing: border-box;
	margin: 2% 5%;
	width: 90%;
	max-width: 400px;
	border-radius: 2.5em;
	-webkit-border-radius: 2.5em;
	-moz-border-radius: 2.5em;
	color: #fff;
	line-height: 1.6em;
}
/*==================
news
==================*/
#news{
	width: 100%;
	margin: 2.0em auto;
	background-color: #000;
	padding: 1.0em;
	box-sizing: border-box;
}
#news h3{
	color: #fff;
	font-size: 1.6em;
	border-bottom: #fff double 3px;
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
}
#news dl{
	max-width: 960px;
	width: 100%;
	text-align: left;
	color: #fff;
	margin: 0 auto;
	padding: 1.0em;
	overflow-x: auto;
	height: 300px;
	box-sizing: border-box;
}
#news dl dt{
	background-color: var(--brand-primary);
	display: inline-block;
	padding: 0.3em;
	margin-top: 0.3em;
}
#news dl dd{
	padding: 0.3em;
	border-bottom: #555 dotted 1px;
	line-height: 1.6em;
}
#news dl dd a{
	color: #ebc4ed;
}
#news dl dd a:hover{
	opacity: 0.7;
}


/*==================
movie
==================*/
#movie{
	padding: 5% 0 0 0;
}
#movie #movie_box{
	width:94%;
	max-width:960px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	position:relative;
}
#movie #movie_box li{
	box-sizing: border-box;
    display: inline-block;
	width: 100%;
    margin: auto;
	position: relative;
	margin: 1%;
	background-color: #000;
}
#movie #movie_box li .youtube{
	position: relative;
    width: 100%;
    padding-top: 56.25%;
	float: left;
}
#movie #movie_box li .youtube iframe{
	border:solid 2px #000;
	background-color: #000;
	box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
/*==================
EFE GAMES
==================*/
.efe_game_about{
	margin: 0 auto;
	max-width: 1100px;
	width: 90%;
}

.efe_game_about p{
	color: #fff;
	background-color: #000;
	box-sizing: border-box;
	padding: 1.0em;
}

.game_select{
	margin: 0 auto;
	max-width: 1100px;
	width: 90%;
}
.game_select h3,
.efe_game_about h3{
	color: #fff;
	font-size: 1.6em;
	max-width: 960px;
	width: 100%;
	margin: 0.5em auto;
}
.game_list{
	padding: 0.5em 0.5em 4em;
	font-size: 90%;
	background-color: #FDE8FF;
	box-shadow: 4px 4px #5B004F;
	position: relative;
	width: 30%;
	float: left;
	margin: 0.5%;
}
.game_list img{
	width: 100%;
}
.appName{
	background-color: #000;
	padding: 0.5em;
	color: #fff;
}
.appSpec{
	padding: 0.2em 0.2em 0.5em;
	color: #000;
	text-align: left;
}
.appSpec table td{
	vertical-align: top;
}
.appSpec table td.cat{
	width: 7em;
}
.game_list a{
	display: block;
	width: auto;
	background-color: #000;
	color: #fff;
	padding: 1em 0.5em;
	text-align: right;
	position:absolute;
	/*height: 3em;*/
	line-height: 1em;
	bottom:0.5em;
	right:0.5em;
	left:0.5em;
	border-radius: 2.5em;
	-webkit-border-radius: 2.5em;
	-moz-border-radius: 2.5em;
}
.game_list a:after{
	content: "ゲームページ→";
	position: relative;
	z-index: 2;
}
.game_list a:hover:before{
	width: 100%;
}
/**/
.game_set{
	margin-top: 1.0em;
}
.game_txt{
	padding: 1.0em;
	box-sizing: border-box;
	max-width: 720px;
	margin: 1.0em auto;
	color: #fff;
	background-color: #000;
}


/**/
@media screen and (max-width: 768px) {
/*表示*/
.view_pc{display:none;}
.view_pc_tb{display: block;}
.view_tb{display:block;}
.view_tb_sp{display:block;}
.view_sp{display:none;}
	
	body{
		font-size: 2.8vw;
	}
/*==================
header
==================*/	
	header #logo img{
		width: 40%;
	}
/*==================
contents
==================*/
	
	#key section{
		width: 50%;
	}
/*==================
EFE GAMES
==================*/
	.game_list{
		width: 45%;
		margin: 1%;
	}
	
}/*max-width: 768px*/

@media screen and (max-width: 480px) {
/*表示*/
body{
	font-size: 2.8vw;
}
em{
	display: block;
	}
/*==================
footer
==================*/
footer{
}
#footer_wrap{width: 96%;}
/*==================
contents
==================*/
/*==================
EFE GAMES
==================*/
	.game_list{
		width: 100%;
		margin: 1%;
		box-sizing: border-box;
	}
}/*media:480*/