@charset "UTF-8";

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
	font-family:"Rounded Mplus 1c", 'Varela Round', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

 }

html,body {
	position: relative;
	width: 100%;
	height:100%;

	}

body::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: url(/shironekoproject/tenyuu/img/bg.png);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
}

.fade {
	cursor: pointer;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

.fade:hover {
	filter: alpha(opacity=70);
	-moz-opacity:0.70;
	opacity:0.70;
}
.wrap {
	position: relative;
	z-index: 2;
	min-width: 1100px;
}
.coverArea {
	display: block;
	position:fixed;
	width:100%;
	height: 100%;
	z-index: 10000;
	background: #fff;
}
.coverArea .cover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 270px;
	height: 270px;
	text-align: center;
	font-size: 12px;
	color: #bbb;
	font-family: 'Bellefair', serif;
}
.coverArea .cover img {
	width: 100%;
}
.coverArea .cover span img {
	width: 125px;
	height: auto;
}
.off {
	opacity: 0;
}

.bg {
	width: 100%;
	height: 100%;
	position: relative;
	height:auto;
}

.menuArea {
	position: fixed;
	top: 10vh;
	right: 10px;
	z-index: 10;
}
.menuArea .bnt {
	position: relative;
}
.menuArea .btn i {
	position: absolute;
	top: 25px;
	left: 22px;
	opacity: 0;
	cursor: pointer;
}
.menuArea:hover .btn i {
	opacity: 1;
}
.menuArea .btn i img {
	width: 20px;
	height: auto;
}

#navArea {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 5;
	background: rgba(0, 0, 0, .5);

}
#navArea .wrap {
	position: relative;
}
#navArea .wrap .nav {
	position: relative;
	width: 480px;
	margin: 6vh auto;
	background: url(/shironekoproject/tenyuu/img/nav_bg.png) 50% 0 no-repeat;
}
#navArea ul {
	padding: 10px;
}
#navArea li a {
	display: inline-block;
	padding: 27px 60px;
}
#navArea li a i {
	opacity: 0;
	padding: 0 5px 0 0;
}
#navArea li a:hover i {
	opacity: 1;
}
#navArea ul li img {
	vertical-align: middle;
}

header {
	position: relative;
	width: 100%;
	height: 818px;
	background: url(/shironekoproject/tenyuu/img/header.png) 50% 0 no-repeat;
}
@-webkit-keyframes blinking {
    0% { opacity: 0; }
  50% { opacity: 0; }
  51% { opacity: 1; }
  100% { opacity: 1; }
}
@-moz-keyframes blinking {
    0% { opacity: 0; }
  50% { opacity: 0; }
  51% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes blinking {
    0% { opacity: 0; }
  50% { opacity: 0; }
  51% { opacity: 1; }
  100% { opacity: 1; }
}

@-webkit-keyframes wiggle01 {
   0% { top: -8px; }
   1% { top: -8px; }
   2% { top: 8px; }
   3% { top: 8px; }
   4% { top: -8px; }
   5% { top: -8px; }
   6% { top: 8px; }
   7% { top: 8px; }
   8% { top: -8px; }
   9% { top: -8px; }
  10% { top: 0; }
 100% { top: 0; }
}
@-moz-keyframes wiggle01 {
   0% { top: -8px; }
   1% { top: -8px; }
   2% { top: 8px; }
   3% { top: 8px; }
   4% { top: -8px; }
   5% { top: -8px; }
   6% { top: 8px; }
   7% { top: 8px; }
   8% { top: -8px; }
   9% { top: -8px; }
  10% { top: 0; }
 100% { top: 0; }
}
@keyframes wiggle01 {
   0% { top: -8px; }
   1% { top: -8px; }
   2% { top: 8px; }
   3% { top: 8px; }
   4% { top: -8px; }
   5% { top: -8px; }
   6% { top: 8px; }
   7% { top: 8px; }
   8% { top: -8px; }
   9% { top: -8px; }
  10% { top: 0; }
 100% { top: 0; }
}

.bnrArea {
	position: relative;
	width: 640px;
	height: 168px;
	margin: 10vh auto 0;
	text-align: center;
}
.bnrArea a {
	position: absolute;
	top: 0;
	left: 0;
}
.bnrArea a:hover {
	-webkit-animation: wiggle01 1000ms ease-in-out infinite alternate;
	-moz-animation: wiggle01 1000ms ease-in-out infinite alternate;
	animation: wiggle01 1000ms ease-in-out infinite alternate;

}
.bnrArea i {
	position: absolute;
	top: 105px;
	right: 43px;
	-webkit-animation: blinking 1s ease-in-out infinite alternate;
	-moz-animation: blinking 1s ease-in-out infinite alternate;
	animation: blinking 1s ease-in-out infinite alternate;
}
.storyArea {
	position: relative;
	width: 1000px;
	height: 700px;
	margin: 10vh auto 0;
	text-align: center;
}
.storyArea .title {
	position: relative;
	text-align: center;
}
.storyArea .title i {
	position: absolute;
	top: 27px;
	left: 390px;
}

.storyArea .text {
	position: absolute;
	bottom: 34px;
	right: 230px;
	-webkit-animation: blinking 1s ease-in-out infinite alternate;
	-moz-animation: blinking 1s ease-in-out infinite alternate;
	animation: blinking 1s ease-in-out infinite alternate;
}



@-webkit-keyframes jump01 {
    0% { top: 0; }
  75% { top: 0; }
  80% { top: -10px; }
  85% { top: -10px; }
  90% { top: 0; }
  100% { top: 0; }
}
@-moz-keyframes jump01 {
    0% { top: 0; }
  75% { top: 0; }
  80% { top: -10px; }
  85% { top: -10px; }
  90% { top: 0; }
  100% { top: 0; }
}
@keyframes jump01 {
    0% { top: 0; }
  75% { top: 0; }
  80% { top: -10px; }
  85% { top: -10px; }
  90% { top: 0; }
  100% { top: 0; }
}

@-webkit-keyframes jump02 {
    0% { top: 55px; }
  15% { top: 55px; }
  20% { top: 45px; }
  25% { top: 45px; }
  30% { top: 55px; }
  100% { top: 55px; }
}
@-moz-keyframes jump02 {
    0% { top: 55px; }
  15% { top: 55px; }
  20% { top: 45px; }
  25% { top: 45px; }
  30% { top: 55px; }
  100% { top: 55px; }
}
@keyframes jump02 {
    0% { top: 55px; }
  15% { top: 55px; }
  20% { top: 45px; }
  25% { top: 45px; }
  30% { top: 55px; }
  100% { top: 55px; }
}
.storyArea .motionArea {
	position: relative;
	margin: 10vh 0 20vh;
}
.storyArea .chara01 {
	position: absolute;
	top: 0;
	left: 140px;
	z-index: 1;
	-webkit-animation: jump01 1s ease-in-out infinite alternate;
	-moz-animation: jump01 1s ease-in-out infinite alternate;
	animation: jump01 1s ease-in-out infinite alternate;
}
.storyArea .chara02 {
	position: absolute;
	top: 55px;
	right: 180px;
	z-index: 1;
	-webkit-animation: jump02 1s ease-in-out infinite alternate;
	-moz-animation: jump02 1s ease-in-out infinite alternate;
	animation: jump02 1s ease-in-out infinite alternate;
}
.storyArea .pop {
	position: absolute;
	top: 320px;
	left: 110px;
	z-index: 2;
}



.charaArea {
	position: relative;
	width: 1100px;
	margin: 25vh auto 0;
	text-align: center;
}
.charaArea .title {
	position: relative;
	text-align: center;
}
.charaArea .title i {
	position: absolute;
	top: 27px;
	left: 360px;
}

.specialArea {
	position: relative;
	width: 800px;
	margin: 15vh auto 0;
	text-align: center;
}
.specialArea .title {
	position: relative;
	text-align: center;
}

.specialArea .qWrap {
	position: relative;
	padding: 50px 0 0;
}
.specialArea .qWrap .qBg {
	position: relative;
	z-index: 1;
}
.specialArea .step0 .window {
	position: absolute;
	z-index: 2;
	bottom: 10px;
	left: 10px;
}




.border01 {
	width: 100%;
	height: 6px;
	border-top: 4px solid #504034;
	background: #392311;
	border-bottom: 4px solid #25170b;
}
footer {
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	position: relative;
	margin-top: 20vh;
	background: url('/shironekoproject/tenyuu/img/footer_bg.png') 50% 50% no-repeat;
}
.snsArea {
	width: 100%;
	text-align: center;
	padding:3% 0 2%;
}
.snsArea li {
	display: inline-block;
	margin: 0 5px;
	text-align: center;
	vertical-align: middle;
}
.snsArea li img {
	width: 40px;
}

.shiroLogo {
	padding: 10px;
	text-align: center;
}
.shiroLogo img {
	width: 300px;
}
.appArea {
	margin: 0;
	padding: 10px 0;
	background:url(/shironekoproject/billion_battle/img/footer_app_bg.png) 50% 0 repeat-y;
}
.appArea ul {
	width: 100%;
	text-align: center;
}
.appArea li {
	display: inline-block;
	margin: 0 5px;
	text-align: center;
	vertical-align: middle;
}
footer .link {
	margin-top: 15px;
	line-height: 1.5;
	text-align: center;
	font-size: 12px;
	color: #fff;
}
footer .link i img {
	width: 14px;
	height: auto;
}
footer .link a i {
	padding: 0 0 0 10px;
	opacity: 0;
}
footer .link a:hover i {
	opacity: 1;
}

footer .link a:link,
footer .link a:visited {
	color: #fff;
}
footer .notice {
	padding: 40px 0;
	text-align: center;
}
.copyright {
	margin-top: 0%;
	padding: 20px;
	text-align: center;
	font-size: 12px;
	color: #fff;
}