@charset "UTF-8";
/* **************************************************************** *
 * @desc@ 
 * @edit@ 2017/03/31
 * **************************************************************** */
body{
	position:relative;
	color:#333;
	font:
		13px/150%
		"メイリオ","Meiryo",
		"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro",
		"Hiragino Kaku Gothic","ヒラギノ角ゴ",
		"Lucida Grande","Lucida Sans Unicode",
		"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro",
		Helvetica,Arial,Verdana,sans-serif;
	-webkit-text-size-adjust:100%;
}
a{
	outline:none;
	padding-bottom:2px;
	color:#47e0ff;
	text-decoration:underline;
	-moz-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
a:hover{
	outline:none;
	color:#fff;
	text-shadow:0 0 5px #f00;
}
a:active{
	outline:none;
}
img{
	outline:none;
	max-width:100%;
	line-height:0;
	vertical-align:bottom;
}
.small{
	font-size:80% !important;
	line-height:130%;
}
.center{
	text-align:center !important;
}
.right{
	text-align:right;
}
.point{
	color:#ec9800;
}
.red{
	color:#c00;
}
.sp{
	display:none;
}
.tbl{
	display:table;
	width:100%;
	table-layout:fixed;
}
.tbl .cel{
	display:table-cell;
}
.attention{
	font-size:85%;
	line-height:140%;
	padding:15px;
	border:4px double rgba(150, 0, 0, 0.8);
	background:rgba(0, 0, 0, 0.4);
	color:#ccc;
}
ul{
	list-style:none;
}
.bro-snsbox *{
	box-sizing:content-box !important;
}
/* ---------------------------------------------------------------- *
 * スマホ表示
 * ---------------------------------------------------------------- */
@media only screen and (max-width:640px){
	.sp{
		display:block;
	}
	.pc{
		display:none;
	}
}
/* ================================================================ *
 * #top
 * ================================================================ */
.bg{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:680px;
	background:url(../img/top_bg.jpg) 50% 0 no-repeat;
	background-size:cover;
	opacity:0;
}
#top{
	background-attachment:fixed;
}
#top .main{
	display:block;
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:680px;
	background:url(../img/none.png), url(../img/top_img.png) 50% 0 no-repeat;
	background-attachment:fixed;
	background-size:auto,1320px auto;
	text-align:center;
	opacity:0;
}
#top .main h1{
	position:absolute;
	left:50%;
	top:380px;
	width:677px;
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	opacity:0;
}
/* ---------------------------------------------------------------- *
 * スマホ表示
 * ---------------------------------------------------------------- */
@media only screen and (max-width:1200px){
	#top .main{
		background-size:auto,112.1% auto;
	}
}
@media only screen and (max-width:980px){
	.bg{
		height:480px;
	}
	#top .main{
		height:480px;
	}
	#top .main h1{
		top:260px;
		width:auto;
	}
}
@media only screen and (max-width:840px){
	.bg{
		height:380px;
	}
	#top .main{
		height:380px;
	}
	#top .main h1{
		top:200px;
	}
}
@media only screen and (max-width:640px){
	.bg{
		height:280px;
	}
	#top .main{
		height:280px;
		background-size:auto,120% auto;
	}
	#top .main h1{
		top:110px;
		width:320px;
	}
}
/* ================================================================ *
 * container
 * ================================================================ */
.container{
	position:relative;
	background:
		url(../img/bg_g.png) 0 0 repeat-x,
		url(../img/bg03.png) 50% 0 repeat-y,
		url(../img/bg02.png) 50% 600px repeat-y,
		url(../img/bg.png);
	background-size:
		auto,auto,100% auto,auto;
	background-attachment:
		scroll,fixed,fixed,fixed;
}
.container:after{
	content:'';
	position:absolute;
	top:-70px;
	left:0;
	display:block;
	width:100%;
	height:72px;
	background:url(../img/wrapper_bg_t.png) 50% 0 no-repeat;
	background-size:100% 100%;
}
.container .wrapper{
	position:relative;
	margin:0 auto;
	padding:50px 0;
	width:960px;
}
.container .wrapper>section{
	margin:0 auto 50px;
	width:98%;
	text-align:center;
}
.cardBox{
	position:relative;
	background-color:transparent;
	background-position:center top;
	background-repeat:no-repeat;
	background-size:auto 100%;
	text-align:center;
}
.cardBox>div{
	display:table;
	table-layout:fixed;
	margin:0 auto;
}
.cardBox>div>div{
	display:table-cell;
	padding:30px 0;
	width:300px;
	text-align:center;
	vertical-align:middle;
}
.cardBox .card{
	display:block;
}
.cardBox .name{
	position:relative;
	display:block;
	margin-top:5px;
	height:57px;
	background-color:transparent;
	background-position:center top;
	background-repeat:no-repeat;
	background-size:contain;
}
.cardBox .name.n{
	background-image:url(../img/card_name_n.png);
}
.cardBox .name.r{
	background-image:url(../img/card_name_r.png);
}
.cardBox .name.sr{
	background-image:url(../img/card_name_sr.png);
}
.cardBox .name.ssr{
	background-image:url(../img/card_name_ssr.png);
}
.cardBox .name.lr{
	background-image:url(../img/card_name_lr.png);
}
.cardBox .name>span{
	position:absolute;
	left:0;
	top:0;
	padding:7px 5px 0 65px;
	color:#fff;
	font-size:1.1rem;
	line-height:1.3em;
	font-weight:bold;
	text-align:left;
	text-shadow:
		2px -1px 2px rgba(255,140,0,1.0),
		-1px 1px 2px rgba(255,140,0,1.0),
		2px -1px 2px rgba(255,140,0,1.0);
}
/* ---------------------------------------------------------------- *
 * スマホ表示
 * ---------------------------------------------------------------- */
@media only screen and (max-width:980px){
	.container:after{
		background-size:120% 100%;
	}
	.container .wrapper{
		width:auto;
	}
}
@media only screen and (max-width:560px){
	.cardBox>div>div{
		font-size:1.1rem;
		line-height:1.2em;
	}
	.cardBox .card{
		padding:0 28px;
	}
	.cardBox .card img{
		width:100%;
	}
}
/* ================================================================ *
 * SNS
 * ================================================================ */
#sns .bro-snsbox{
	margin:0 auto;
}
#sns .bro-snsbox>div>div{
	padding:0 14px;
}
#sns .bro-snsbox.bro-circle-view>div>div{
	width:42px !important;
}
/* ================================================================ *
 * キープカード
 * ================================================================ */
#keep{
	background-image:url(../img/keep_bg.png);
}
#keep>div>div{
	padding:76px 0 24px;
	width:300px;
}
/* ---------------------------------------------------------------- *
 * スマホ表示
 * ---------------------------------------------------------------- */
@media only screen and (max-width:560px){
}
/* ================================================================ *
 * 達成報酬
 * ================================================================ */
#reward{
	position:relative;
	width:100%;
	text-align:center;
}
#reward .ic{
	position:absolute;
	z-index:10;
	left:7%;
	width:17%;
}
#reward .ic.ic1000{
	top:31.5%;
}
#reward .ic.ic2000{
	top:41.3%;
}
#reward .ic.ic3000{
	top:51.2%;
}
#reward .ic.ic5000{
	top:61%;
}
#reward .ic.ic7000{
	top:71.1%;
}
#reward .ic.ic10000{
	top:80.4%;
	left:5%;
	width:23%;
}
#reward .lottery{
	position:absolute;
	left:31%;
	bottom:0.6%;
	z-index:10;
	width:40%;
}
/* ---------------------------------------------------------------- *
 * スマホ表示
 * ---------------------------------------------------------------- */
@media only screen and (max-width:640px){
}
/* ================================================================ *
 * story
 * ================================================================ */
#story{
}
#story img{
}
/* ---------------------------------------------------------------- *
 * スマホ表示
 * ---------------------------------------------------------------- */
@media only screen and (max-width:640px){
}
/* ================================================================ *
 * charactor
 * ================================================================ */
#chara{
}
#chara img{
}
/* ---------------------------------------------------------------- *
 * スマホ表示
 * ---------------------------------------------------------------- */
@media only screen and (max-width:640px){
}
/* ================================================================ *
 * footer
 * ================================================================ */
footer{
	text-align:center;
	font-size:90%;
}
footer .copy{
	color:#666;
	text-shadow:
		0 0 2px #fff,
		0 0 10px #fff0 0 10px #fff,
		0 0 10px #fff;
}
footer .bnr{
	margin:40px 0 0;
	position:relative;
}
footer .bnr span{
	display:inline-block;
	width:60px;
	height:60px;
	position:relative;
}
footer .zx{
	background:#fff;
	padding:20px 0;
	margin-top:30px;
}
/* ---------------------------------------------------------------- *
 * スマホ表示
 * ---------------------------------------------------------------- */
@media only screen and (max-width:640px){
}
/* ================================================================ *
 * @desc@ gacha
 * ================================================================ */
.whiteout{
	opacity:0;
	box-sizing:border-box;
	overflow:hidden;
	display:block;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:2100010000;
	width:100%;
	height:100%;
	background:#fff;
}
.gacha{
	opacity:0;
	box-sizing:border-box;
	overflow:hidden;
	display:block;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:2100000001;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.9);
}
.gacha.modeBt{
	cursor:pointer;
}
.gacha .monitor{
	overflow:hidden;
	position:absolute;
	z-index:2100000002;
	border-radius:10px;
	background-color:#fff;
	box-shadow:0 0 20px rgba(255,255,255,1.0);
	cursor:default;
}
.gacha .monitor>div{
	overflow:hidden;
	position:relative;
	left:0;
	top:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
}
.gacha .monitor>div>.mail_c,
.gacha .monitor>div>.mail_o{
	position:absolute;
	width:60%;
	text-align:center;
}
.gacha .monitor>div>.mail_c{
	left:200%;
	top:-100%;
	z-index:2100000101;
	opacity:1;
}
.gacha .monitor>div>.mail_c img{
	-moz-transform-origin:50% 100%;
	-webkit-transform-origin:50% 100%;
	-o-transform-origin:50% 100%;
	transform-origin:50% 100%;
	transition:all 1.4s;
}
.gacha .monitor>div>.mail_c img.small{
	-moz-transform:scale(0.8);
	-webkit-transform:scale(0.8);
	-o-transform:scale(0.8);
	transform:scale(0.8);
}
.gacha .monitor>div>.mail_o{
	left:20%;
	top:10%;
	z-index:2100000102;
	opacity:0;
}
.gacha .monitor>div>.ura{
	position:absolute;
	left:32.7%;
	top:16%;
	z-index:2100000100;
	width:36%;
	text-align:center;
	opacity:1;
	-moz-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	-o-transform-origin:50% 50%;
	transform-origin:50% 50%;

	-moz-animation:ura 1.6s linear 1;
	-webkit-animation:ura 1.6s linear 1;
	-o-animation:ura 1.6s linear 1;
	animation:ura 1.6s linear 1;
}
@keyframes ura{
	0%{
		-moz-transform:scale(0.56) rotateZ(9.8deg);
		-webkit-transform:scale(0.56) rotateZ(9.8deg);
		-o-transform:scale(0.56) rotateZ(9.8deg);
		transform:scale(0.56) rotateZ(9.8deg);
	}
	10%{
		-moz-transform:scale(0.56) rotateZ(9.8deg);
		-webkit-transform:scale(0.56) rotateZ(9.8deg);
		-o-transform:scale(0.56) rotateZ(9.8deg);
		transform:scale(0.56) rotateZ(9.8deg);
	}
	100%{
		-moz-transform:scale(1.0) rotateZ(0deg);
		-webkit-transform:scale(1.0) rotateZ(0deg);
		-o-transform:scale(1.0) rotateZ(0deg);
		transform:scale(1.0) rotateZ(0deg);
	}
}
.gacha .monitor>div>.kira{
	position:absolute;
	z-index:2100000110;
	text-align:center;
	opacity:0;
	width:10%;
	-moz-transform-origin:50% 50%;
	-webkit-transform-origin:50% 50%;
	-o-transform-origin:50% 50%;
	transform-origin:50% 50%;

	-moz-transform:scale(0.56);
	-webkit-transform:scale(0.56);
	-o-transform:scale(0.56);
	transform:scale(0.56);

	-moz-animation:kira 1.0s ease-in-out 1;
	-webkit-animation:kira 1.0s ease-in-out 1;
	-o-animation:kira 1.0s ease-in-out 1;
	animation:kira 1.0s ease-in-out 1;
}
@keyframes kira{
	50%{
		opacity:0.8;
		-moz-transform:scale(1.0);
		-webkit-transform:scale(1.0);
		-o-transform:scale(1.0);
		transform:scale(1.0);
	}
	100%{
		opacity:0;
		-moz-transform:scale(0.56);
		-webkit-transform:scale(0.56);
		-o-transform:scale(0.56);
		transform:scale(0.56);
	}
}

.gacha .monitor>div>.gbg{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background-color:transparent;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	opacity:0;
}
.gacha .monitor>div>.gbg.bg1{
	z-index:2100000011;
	background-image:url(../img/gacha_bg1.png);
}
.gacha .monitor>div>.gbg.bg2{
	z-index:2100000012;
	background-image:url(../img/gacha_bg2.png);
}
.gacha .monitor>div>.gbg.bg3{
	z-index:2100000013;
	background-image:url(../img/gacha_bg3.png);
}
.gacha .monitor>div>.skip{
	display:block;
	position:absolute;
	z-index:2100001000;
	top:1.8%;
	right:1.2%;
	width:8%;
	cursor:pointer;
}
.gacha .result{
	position:absolute;
	z-index:2100000002;
	width:522px;
	cursor:default;
}
.gacha .result .cardBox{
	background-image:url(../img/card_bg.png);
}
.gacha .result .btBox{
	display:table;
	table-layout:fixed;
	margin-top:10px;
	width:100%;
}
.gacha .result .btBox>div{
	display:table-cell;
	padding:0 5px;
	width:50%;
}
.gacha .result .bro-snsbox{
	margin:10px auto 0;
}
.gacha .result .bro-snsbox.bro-rect-view>div>div{
	width:42px !important;
}
.gacha .result .close{
	display:block;
	position:absolute;
	z-index:2100000003;
	top:-1.5%;
	right:-0.5%;
	width:9.3%;
	cursor:pointer;
}
/* ---------------------------------------------------------------- *
 * スマホ表示
 * ---------------------------------------------------------------- */
@media only screen and (max-width:800px){
	.gacha .monitor{
		border-radius:0;
	}
}