@charset "UTF-8";

html{height:100%;}

body{
	-webkit-text-size-adjust: 100%;
	padding:0;
	margin: 0;
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	background: #000;
	height:100%;
}

/* default */

div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,
h6,pre,code,form,fieldset,legend,
input,textarea,p,blockquote,
th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;word-break: break-all;font-size:inherit;width:100%;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
.aligncenter{text-align:center;}
img{vertical-align: bottom;line-height: 1;}
img{max-width:100%;}
a img{opacity:1;}
*{box-sizing:border-box;}

/* common item ---------------------------------------*/

.clearfix:after,
.inner:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.wrapper{}

header{
	width:100%;
	height:60px;
	background-color:rgba(0,0,0,0.8);
	position:fixed;
	left:0px;
	top:0px;
	z-index: 100;
}

nav.gnav{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1000;
	background: #000;
	display: none;
}

.gnav_header{
	background: #8D7752;
	background: #907C58;
	box-sizing:border-box;
	height:60px;
	padding-top: 17px;
	position: relative;
	text-align: center;
}

.gnav_logo{width:130px;}

.menu_close{
	position: absolute;
	right:25px;
	top:14px;
}

.menu_close img{width:14px;}
.gnav ul li{border-bottom:1px dashed #3D3D3C;}

.gnav ul li a{
	display: block;
	text-align: center;
	height:80px;
	box-sizing:border-box;
	padding-top: 32px;
	line-height: 1.0;
}

.gnav ul li a img{height:17px;}

footer{
	width:100%;
	height:60px;
	background-color:rgba(0,0,0,0.9);
	position:fixed;
	left:0px;
	bottom:0px;
	z-index: 100;
}

.gray{color:#aaa;}


/* header ---------------------------------------*/

header .sound_controll{
	background: url(../img/volume.png) no-repeat left top;
	background-size: 100%;
	width:21px;
	height:19px;
	position: absolute;
	left:20px;
	top:20px;
	text-indent: -99em;
	overflow: hidden;
}

header .logo{
	background: url(../img/title.png) no-repeat left top;
	background-size: 100%;
	width:135px;
	height:34px;
	position: absolute;
	left:50%;
	top:15px;
	text-indent: -99em;
	overflow: hidden;
	margin:0 0 0 -67px;
}

header .menu_open{
	background: url(../img/menu.png) no-repeat left top;
	background-size: 100%;
	width:19px;
	height:13px;
	position: absolute;
	right:20px;
	top:20px;
	text-indent: -99em;
	overflow: hidden;
}


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

footer .memo{
	background: url(../img/memo_title.png) no-repeat left top;
	background-size: 100%;
	width:70px;
	height:24px;
	position: absolute;
	left:20px;
	top:20px;
	text-indent: -99em;
	overflow: hidden;
}

footer .memo_list{
	overflow: hidden;
	float: right;
	margin-top: 10px;
	width:calc(100% - 100px);
}

footer .memo_list li{
	float: left;
	margin-left: 5px;
}

footer .memo_list li:first-child{margin-left: 0;}

footer .memo_list li span{
	display: block;
	text-indent: -999em;
	overflow: hidden;
	background: url(../img/memo.png) no-repeat left top;
	background-size: 100%;
	width:38px;
	height:41px;
}

footer .memo_list li.active span{
	background-image: url(../img/memo_active.png);
}

footer .memo_list li.on span{
	background-image: url(../img/memo_on.png);
}



/* stage common ---------------------------------------*/

.stage{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	display: none;
}

.stage.active{
	display: block;
}

.ad_bnr{
	width:90%;
	position: absolute;
	left:5%;
	top:70px;
}

.person_name{
	position: absolute;
	background: rgba(255,255,255,0.5);
	padding:3px;
	border-radius:20px;
	display: inline-block;
	color:#fff;
	font-size: 13px;
	line-height: 1.0;
}

.person_name span{
	display: inline-block;
	background: rgba(0,0,0,0.5);
	padding:5px 15px;
	border-radius:20px;
	white-space: nowrap;
}

.person_name_detail{
	left:50%;
	top:27%;
	transform:translate(-50%,0%);
}

.person_talk{
	position: absolute;
	left:5%;
	bottom:80px;
	background: rgba(255,255,255,0.7);
	box-sizing:border-box;
	padding:15px;
	border-radius:15px;
	background-size: 100%;
	width:90%;
}

.person_talk p{
	font-size: 14px;
	line-height: 1.5;
}

.person_talk .btn_more{
	position: absolute;
	right:0px;
	bottom:0px;
	width:30px;
	height:30px;
}

.person_talk .btn_more:after{
    display:block;
    content:'';
	background: url(../img/arrow_more.png) no-repeat center center;
	background-size: 10px;
	width:10px;
	height:5px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-3px 0 0 -5px;
}

.person_talk_fukidashi{
	position: absolute;
	background: rgba(255,255,255,0.8);
	box-sizing:border-box;
	padding:15px;
	border-radius:0 15px 15px 15px;
	background-size: 100%;
	display: inline-block;
}

.person_talk_fukidashi:after{
    display:block;
    content:'';
    background:url(../img/fukidashi_point.png) no-repeat left top;
    background-size: 14px;
    width:14px;
    height:17px;
    position:absolute;
    left:0px;
    top:-16px;
}

.person_image{
	position: absolute;
	left:0%;
	top:25%;
	text-align: center;
}

.person_image_main{
	position: absolute;
	left:0%;
	top:35%;
	width:100%;
	text-align: center;
}

.comment{
	position: absolute;
	left:5%;
	bottom:80px;
	width:90%;
	text-align: center;
	color:#fff;
	font-size: 14px;
}

.comment p{
	display: inline-block;
	padding:5px 18px 0;
	position: relative;
}

.comment p:before,
.comment p:after{
	content:'';
	display: block;
	background: url(../img/icon_comment_left.png) 0 0 no-repeat;
	background-size: 100%;
	width:10px;
	height:8px;
	position: absolute;
	top:0px;
}

.comment p:before{left:0px;}
.comment p:after{
	right:0px;
	background-image: url(../img/icon_comment_right.png)
}

.stage_navi{
	position: absolute;
	left:0px;
	top:50%;
	width:100%;
	margin:-13px 0 0 0;
}

.stage_navi_btn{
	position: absolute;
	top:0px;
	text-indent: -999em;
	width:16px;
	height:26px;
	overflow: hidden;
}

.stage_navi_btn.prev{
	background: url(../img/arrow_left.png) no-repeat left top;
	background-size: 100%;
	left:20px;
}

.stage_navi_btn.next{
	background: url(../img/arrow_right.png) no-repeat left top;
	background-size: 100%;
	right:20px;
}

.stage_navi_back{
	position: absolute;
	right:5px;
	bottom:70px;
	width:67px;
	height:67px;
}

.stage_navi_btn_back{
	position: absolute;
	top:0px;
	text-indent: -999em;
	width:67px;
	height:67px;
	overflow: hidden;
	background: url(../img/btn_back.png) no-repeat left top;
	background-size: 100%;
}

/* stage top ---------------------------------------*/

.stage_top{
	background: url(../img/bg_top.jpg) no-repeat center center;
	background-size: cover;
}

.top_title{
	position:absolute;
	left:0%;
	top:50%;
	width:100%;
	transform:translate(0%,-50%);
	text-align: center;
}

.top_title img{
	width:90%;
	max-width:300px;
}

.top_notice{
	position:absolute;
	left:5%;
	bottom:10px;
	width:90%;
	line-height: 1.3;
	color:#848484;
	font-size: 12px;
}


/* stage bgm ---------------------------------------*/

.stage_bgm{
	background: url(../img/bg_intro.jpg) no-repeat center center;
	background-size: cover;
}

.bgm_inner{
	position: absolute;
	left:0%;
	top:60%;
	width:100%;
	transform:translate(0%,-50%);
	z-index:70;
	color:#fff;
	text-align: center;
}

.bgm_message{
	padding:0 20px 10px;
}

.bgm_message p{
	margin-bottom: 1em;
	line-height: 1.6;
	font-size: 13px;
}

.btn_bgm_on,
.btn_bgm_off{
	background: #FD9727;
	color:#fff;
	line-height: 1.0;
	padding:12px 25px;
	border-radius:30px;
	width:160px;
	display: block;
	margin:0 auto;
	font-size: 13px;
	margin-bottom: 15px;
}
.btn_bgm_off{background: #37474F;}


/* stage introduction ---------------------------------------*/

.stage_introduction{
	background: url(../img/bg_intro.jpg) no-repeat center center;
	background-size: cover;
}

.introduction_inner{
	position: absolute;
	left:0%;
	top:45%;
	width:100%;
	transform:translate(0%,-50%);
	z-index:70;
	color:#fff;
	text-align: center;
}

.introduction_message{
	padding:0 20px 10px;
}

.introduction_message p{
	margin-bottom: 1em;
	line-height: 1.6;
	font-size: 13px;
}

.introduction_keyword{
	border:1px solid #aaa;
	margin:0 15% 20px;
	background: rgba(255,255,255,0.1);
	padding:20px 0;
	font-size: 13px;
}

.from{
	color:#aaa;
	font-size: 13px;
	line-height: 1.0;
	margin-bottom: 20px;
}

.btn_join{
	background: #FD9727;
	color:#fff;
	line-height: 1.0;
	padding:12px 25px;
	border-radius:30px;
	display: inline-block;
	font-size: 13px;
}

.introduction_present{
	position:fixed;
	left:0;
	bottom:0;
	width:100%;
	padding:10px;
	background: RGBA(96, 0, 0, 0.9);
	z-index:70;
	color:#fff;
	font-size: 12px;
	overflow: hidden;
}

.introduction_present img{
	float: left;
	width:100px;
	margin-right: 15px;
}

.introduction_present p{
	line-height: 1.3;
	overflow: hidden;
}

@media screen and (max-width: 370px){
	.introduction_message{padding:0 10px 10px;}
	.introduction_message p{
		margin-bottom: 0.5em;
		line-height: 1.5;
		font-size: 12px;
	}
	.introduction_keyword{
		margin:0 5% 10px;
		padding:10px 0;
		font-size: 12px;
	}
	.from{
		font-size: 12px;
		margin-bottom: 10px;
	}

	.introduction_present{
		padding:5px;
	}

	.introduction_present img{
		width:70px;
		margin-right: 10px;
	}
}

/* stage introduction2 ---------------------------------------*/

.stage_introduction2{
	background: url(../img/bg_intro2.jpg) no-repeat center center;
	background-size: cover;
}


/* stage greeting ---------------------------------------*/

.stage_greeting{
	background: url(../img/bg_lobby.jpg) no-repeat center center;
	background-size: cover;
}

.person_image_master{top:35%;}

.person_image_master img{
	width:50%;
}

.person_name_master{
	left:50%;
	top:27%;
	transform:translate(-50%,0%);
}


/* stage lobby ---------------------------------------*/

.stage_lobby{
	background: url(../img/bg_lobby.jpg) no-repeat center center;
	background-size: cover;
}

.person_talk_fukidashi_master{
	right:10%;
	top:60%;
	width:160px;
}

/* stage bar ---------------------------------------*/

.stage_bar{
	background: url(../img/bg_bar.jpg) no-repeat center center;
	background-size: cover;
}

.person_name_majo{
	left:30%;
	top:20%;
	transform:translate(-50%,0%);
}

.person_name_lady{
	left:70%;
	top:25%;
	transform:translate(-50%,0%);
}

.person_image_majo{
	width:48%;
	left:0px;
}
.person_image_majo img{
	width:100%;
}

.person_image_lady{
	width:48%;
	left:52%;
	top:33%;
}

.person_image_lady img{
	width:100%;
}

.person_image_main_majo img{width:60%;}
.person_image_main_lady img{width:60%;}

/* stage lounge ---------------------------------------*/

.stage_lounge{
	background: url(../img/bg_lounge.jpg) no-repeat center center;
	background-size: cover;
}

.person_name_mummy{
	left:50%;
	top:22%;
	transform:translate(-50%,0%);
}

.person_image_mummy{
	width:80%;
	left:20%;
	top:30%;
}

.person_image_mummy img{
	width:105%;
	max-width:105%;
}

.person_image_main_mummy img{width:90%;}


/* stage hall ---------------------------------------*/

.stage_hall{
	background: url(../img/bg_hall.jpg) no-repeat center center;
	background-size: cover;
}

.person_name_maskman{
	left:30%;
	top:20%;
	transform:translate(-50%,0%);
}

.person_name_dracula{
	left:75%;
	top:25%;
	transform:translate(-50%,0%);
}

.person_image_maskman{
	width:85%;
	left:-30%;
	top:28%;
}
.person_image_maskman img{
	width:100%;
}

.person_image_dracula{
	width:60%;
	left:45%;
	top:33%;
}

.person_image_dracula img{
	width:100%;
}



.person_image_main_maskman{
	left:-15%;
}



/* stage clear ---------------------------------------*/

.stage_clear{
	padding: 60px 0;
	text-align: center;
	overflow:auto;
}

.clear_image img{
	width:100%;
}

.clear_message{
	color:#fff;
	padding:0 20px 25px;
}

.clear_message h2{
	width:263px;
	margin:0 auto;
	padding:20px 0;
}

.clear_message h3{
	line-height: 1.0;
	font-size: 17px;
	margin-bottom: 10px;
}
.clear_message p{
	line-height: 1.5;
	font-size: 13px;
}

.btn_present{
	background: #FD9727;
	color:#fff;
	line-height: 1.0;
	padding:12px 25px;
	border-radius:30px;
	width:170px;
	display: block;
	margin:0 auto;
	font-size: 13px;
	margin-bottom: 15px;
}

.link_back{
	color:#FD9727;
	font-size: 13px;
	padding-top: 10px;
	line-height: 1.0;
}


/* stage reward ---------------------------------------*/

.stage_reward{
	padding: 60px 0 60px;
	text-align: center;
	overflow:auto;
}

.reward_image{margin-bottom: 30px;}

.reward_image img{
	width:100%;
}

.reward_message{
	color:#fff;
	padding:0 20px 25px;
}

.reward_message h3{
	line-height: 1.0;
	font-size: 12px;
	margin-bottom: 5px;
	color:#FD9727;
}

.reward_message p{
	line-height: 1.6;
	font-size: 16px;
	color:#FD9727;
	margin-bottom: 20px;
}

.reward_message table{
	font-size: 12px;
	width:80%;
	margin:0 auto;
	line-height: 1.5;
}

.reward_message table th{
	width:70px;
	text-align: right;
	vertical-align: top;
}

.reward_message table td{text-align: left;}

.btn_present{
	background: #FD9727;
	color:#fff;
	line-height: 1.0;
	padding:12px 25px;
	border-radius:30px;
	width:170px;
	display: block;
	margin:0 auto;
	font-size: 13px;
	margin-bottom: 15px;
}

.reward_notice{
	color:#aaa;
	font-size: 12px;
	text-align: left;
	padding:30px 20px 0;
}

.reward_notice li{
	line-height: 1.5;
	text-indent: -1em;
	margin-left: 1em;
}

.reward_notice li a{
	color:#FD9727;
	text-decoration: none;
}


/* modal ---------------------------------------*/

.modal{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:50;
	display: none;
}

.modal.active{display: block;}

.overlay{
	position:fixed;
	left:0px;
	top:0;
	width:100%;
	height:100%;
	z-index:50;
	background: rgba(0,0,0,0.9);
}


.modal_inner{
	position: absolute;
	left:0%;
	top:50%;
	width:100%;
	transform:translate(0%,-50%);
	z-index:70;
	color:#fff;
	text-align: center;
}

/* modal tutrial ---------------------------------------*/

.tutrial_inner{
	height:100%;
}
.tutrial1{display: none;}
.tutrial2{display: none;display: block;}
.tutrial3{display: none;}
.tutrial1_message{
	position: absolute;
	left:15%;
	top:50%;
	width:70%;
	transform:translate(0,-50%);
	line-height: 1.0;
}

.tutrial2_message{
	position: absolute;
	left:15%;
	bottom:70px;
	width:70%;
}

.tutrial3_inner{
	position:absolute;
	left:0%;
	width:100%;
	top:50%;
	transform:translate(0%,-50%);
}

.tutrial3_message{
	width:90%;
	margin-left: 5%;
	margin-bottom: 100px;
	background: rgba(255,255,255,0.8);
	box-sizing:border-box;
	padding:12px 25px;
	border-radius:15px;
	background-size: 100%;
	color:#000;
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
}

.tutrial3_message strong{color:#aa0000;}

.btn_start{
	background: #FD9727;
	color:#fff;
	line-height: 1.0;
	padding:12px 25px;
	border-radius:30px;
	width:160px;
	margin:0 8px;
	display: inline-block;
	font-size: 13px;
	text-align: center;
}



/* modal keyword get ---------------------------------------*/

.keyword_title{
	width:298px;
	margin:0 auto;
}

.keyword_image{
	width:136px;
	margin:0 auto 10px;
}

.keyword_comment{
	font-size: 13px;
	margin-bottom: 15px;
}

.btn_close{
	background: #FD9727;
	color:#fff;
	line-height: 1.0;
	padding:12px 25px;
	border-radius:30px;
	width:140px;
	margin:0 8px;
	display: inline-block;
	font-size: 13px;
	text-align: center;
}



/* modal answer ---------------------------------------*/


.answer_lead{
	font-size: 17px;
	line-height: 1.0;
	margin-bottom: 20px;
}

.answer_input{
	margin-bottom: 30px;
	padding:0 10%;
}

.answer_input input{
	border:1px solid #aaa;
	font-size: 25px;
	line-height: 1.0;
	padding:10px;
	background: rgba(255,255,255,0.2);
	color:#fff;
	box-sizing:border-box;
	width:100%;
}

.answer_btn{
	font-size: 0px;
}

.btn_submit,
.btn_quit{
	background: #FD9727;
	color:#fff;
	line-height: 1.0;
	padding:12px 25px;
	border-radius:30px;
	width:140px;
	margin:0 8px;
	display: inline-block;
	font-size: 13px;
	text-align: center;
}

.btn_quit{background: #37474F;}