@charset "utf-8";

h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd{
	padding: 0;
	margin: 0;
}

ol,ul{
	list-style-type: none;
}

/*-----------------------------------------------
 root
-----------------------------------------------*/

html{
	overflow-y: scroll;
}

body{
	position: relative;
	overflow-x: hidden;
	min-width: 1000px;
	background-color: #000;
	font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif;
	color: #fff;
}

/*-----------------------------------------------
 font
-----------------------------------------------*/

html{
	min-width: 1000px;
	font-size: medium;	
}

body{
	font-size: 62.5%; /* 16px -> 10px */
}

dt,dd,li,
caption,th,td,
input,button,textarea,select,
h1,h2,h3,h4,h5,h6,p,address{
	line-height: 1.5;
	font-size: 140%;
	margin: 0;
	padding: 0;
}

h1 *,h2 *,h3 *,h4 *,h5 *,h6 *,
p input,p button,p select,
li h1,li h2,li h3,li h4,li h5,li h6,li p,li dt,li dd,li li,li th,li td,li input,li button,li textarea,li select,
dd h1,dd h2,dd h3,dd h4,dd h5,dd h6,dd p,dd dt,dd dd,dd li,dd th,dd td,dd input,dd button,dd textarea,dd select,
tr h1,tr h2,tr h3,tr h4,tr h5,tr h6,tr p,tr dt,tr dd,tr li,            tr input,tr button,tr textarea,tr select{
	font-size: 100%;
}

input,button,select,option,textarea{
	font-size: 14px;
}

a,
a:link,
a:visited{
	color: #7d631d;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

/*-----------------------------------------------
 body
-----------------------------------------------*/

div#loading{
	position: fixed;
	z-index: 201;
	width: 100%;
	height: 100%;
	background-color: #344453;
	background-image: url(../img/loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
}

div#bg{
	position: relative;
	z-index: 0;
}

div#bg div.bg{
	position: fixed;
	opacity: 1;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #000;
}

div#bg div.bg1{
	display: none;
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	width: 1%;
	height: 100%;
	background-image: url(../img/bg-red.png);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

div#bg div.bg2{
	display: none;
	position: fixed;
	z-index: 3;
	top: 0;
	right: 0;
	width: 1%;
	height: 100%;
	background-image: url(../img/bg-blue.png);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

body{
	background-image: url(../img/bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

div#content{
	position: relative;
}

div#content section{
	position: relative;
}

div#content section div.inner{
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

div#content section div.inner h2{
	margin-bottom: 40px;
	text-align: center;
}

/*-----------------------------------------------
 keyvisual
-----------------------------------------------*/

section#keyvisual{
	z-index: 1;
	height: 1470px;
	margin-bottom: -420px;
}


section#keyvisual h1{
	display: none;
	position: absolute;
	z-index: 5;
	top: 228px;
    left: 241px;
}

section#keyvisual div.logo1{
	display: none;
	position: absolute;
	z-index: 5;
    top: 264px;
    left: 241px;
}

section#keyvisual div.logo2{
	display: none;
	position: absolute;
	z-index: 5;
    top: 355px;
    left: 345px;
}

section#keyvisual div.logo3{
	display: none;
	position: absolute;
	z-index: 5;
    top: 228px;
    left: 410px;
}

section#keyvisual div.logo4{
	display: none;
	position: absolute;
	z-index: 5;
    top: 284px;
    left: 544px;
}

section#keyvisual div.logo5{
	display: none;
	position: absolute;
	z-index: 5;
    top: 303px;
    left: 676px;
}

section#keyvisual div.logo6{
	display: none;
	position: absolute;
	z-index: 5;
    top: 240px;
    left: 292px;
}

section#keyvisual div.author{
	display: none;
	position: absolute;
	z-index: 6;
	top: 603px;
    left: 132px;
}

section#keyvisual p.catch1{
	display: none;
	position: absolute;
	z-index: 4;
    top: 20px;
    right: -14px;
}

section#keyvisual p.catch2{
	display: none;
	position: absolute;
	z-index: 4;
	top: 0;
	left: 56px;
}

section#keyvisual p.catch3{
	display: none;
	position: absolute;
	z-index: 4;
    top: 0;
    left: -18px;
}

section#keyvisual div.cover{
	display: none;
	position: absolute;
	z-index: 7;
    top: 759px;
    left: 850px;
	width: 155px;
	border: 2px solid #000;
	line-height: 0;
}

section#keyvisual div.cover img{
	width: 100%;
}

section#keyvisual div.onsale{
	display: none;
	position: absolute;
	z-index: 6;
	top: 666px;
    left: 797px;
	
}

section#keyvisual div.back{
	display: none;
	position: absolute;
	z-index: 1;
	width: 1005px;
	height: 613px;
	top: 0;
    left: 24px;
	background-image: url(../img/back.png);
}

section#keyvisual div.middle{
	display: none;
	position: absolute;
	z-index: 2;
    width: 1175px;
    height: 787px;
    top: 122px;
    left: -14px;
	background-image: url(../img/middle.png);
}

section#keyvisual div.front{
	display: none;
	position: absolute;
	z-index: 3;
    width: 1221px;
    height: 1312px;
    top: 225px;
    left: -43px;
	background-image: url(../img/front.png);
}

section#keyvisual div.front1{
	display: none;
	position: absolute;
	z-index: 5;
    width: 926px;
    height: 1281px;
    top: 411px;
    left: 19px;
	background-image: url(../img/front1.png);
}

section#keyvisual div.front2{
	display: none;
	position: absolute;
	z-index: 3;
    width: 841px;
    height: 1128px;
    top: 236px;
    left: -43px;
	background-image: url(../img/front2.png);
}

section#keyvisual div.front3{
	display: none;
	position: absolute;
	z-index: 4;
    width: 856px;
    height: 1111px;
    top: 229px;
    left: 322px;
	background-image: url(../img/front3.png);
}

/*-----------------------------------------------
 tvcm
-----------------------------------------------*/

section#tvcm{
	z-index: 1;
	padding: 40px 0;
	background-color: rgba(0,0,0,0.7);
}

section#tvcm div.youtube{
	width: 701px;
	margin: 0 auto;
	border: 1px solid #fff;
	line-height: 0;
}

/*-----------------------------------------------
 story
-----------------------------------------------*/

section#story{
	z-index: 1;
	height: 1187px;
	padding: 40px 0 60px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-image: url(../img/bg-story.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}

section#story p{
	opacity: 0;
	margin-bottom: 10px;
	line-height: 0;
}

/*-----------------------------------------------
 character
-----------------------------------------------*/

section#character{
	z-index: 1;
	padding: 40px 0 60px;
}

section#character ul#pnav{
	position: fixed;
	opacity: 0;
	z-index: 10;
	top: 20px;
	left: -30px;
}

section#character ul#pnav li{
	width: 61px;
	height: 70px;
	margin-bottom: 2px;
	line-height: 0;
}

section#character div.box{
	opacity: 0;
	position: relative;
	margin-bottom: 200px;
	background-repeat: no-repeat;
}

section#character div.box div.head{
	width: 1000px;
	height: 21px;
	background-image: url(../img/bg-box-head-black.png);
}

section#character div.box div.body{
	min-height: 970px;
	padding: 0 40px;
	background-color: rgba(0,0,0,0.5);
}

section#character div.box div.body p.catch{
	position: relative;
	opacity: 0;
	z-index: 2;
	margin-bottom: 15px;
	line-height: 0;
}

section#character div.box div.body h2{
	position: relative;
	opacity: 0;
	z-index: 2;
	margin-bottom: 20px;
	text-align: left;
	line-height: 0;
}

section#character div.box div.body div.detail{
	position: relative;
	opacity: 0;
	z-index: 2;
	width: 400px;
}

section#character div.box div.body div.detail p{
	margin-bottom: 20px;
}

section#character div.box div.body div.status{
	position: relative;
	opacity: 0;
	z-index: 2;
	width: 400px;
	border: 1px solid #666;
	background-color: rgba(0,0,0,0.5);
}

section#character div.box div.body div.status h3{
	padding: 5px 10px;
	background-color: #666666;
}

section#character div.box div.body div.status ul li{
	display: inline-block;
	width: 50%;
	min-height: 32px;
	padding: 5px 10px;
	border-bottom: 1px solid #666;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	vertical-align: top;
}

section#character div.box div.body div.status ul li:nth-child(odd){
	border-right: 1px solid #666;
}

section#character div.box div.body div.status ul li:nth-child(5),
section#character div.box div.body div.status ul li:nth-child(6){
	border-bottom: none;
}

section#character div.box div.foot{
	position: relative;
	z-index: 0;
	width: 1000px;
	height: 21px;
	background-image: url(../img/bg-box-head-black.png);
	transform: scale(1, -1);
}

section#character div.character{
	opacity: 0;
	position: absolute;
	z-index: 1;
}

section#character div.c1 div.character{
    top: 3px;
    left: 390px;
	width: 749px;
	height: 1036px;
	background-image: url(../img/character/c1.png);
}

section#character div.c2 div.character{
    top: -55px;
    left: 390px;
	width: 798px;
	height: 1051px;
	background-image: url(../img/character/c2.png);
}

section#character div.c3 div.character{
    top: 3px;
    left: 390px;
	width: 655px;
	height: 1007px;
	background-image: url(../img/character/c3.png);
}

section#character div.c4 div.character{
    top: -21px;
    left: 390px;
	width: 715px;
	height: 1087px;
	background-image: url(../img/character/c4.png);
}

section#character div.c5 div.character{
    top: -30px;
    left: 339px;
	width: 677px;
	height: 1108px;
	background-image: url(../img/character/c5.png);
}

section#character div.c6 div.character{
    top: 23px;
    left: 294px;
	width: 837px;
	height: 1080px;
	background-image: url(../img/character/c6.png);
}

section#character div.c7 div.character{
	top: 33px;
    left: 419px;
	width: 840px;
	height: 1119px;
	background-image: url(../img/character/c7.png);
}

section#character div.c8 div.character{
	top: -64px;
    left: 340px;
	width: 771px;
	height: 1038px;
	background-image: url(../img/character/c8.png);
}

section#character div.c9 div.character{
    top: 143px;
    left: 378px;
	width: 706px;
	height: 859px;
	background-image: url(../img/character/c9.png);
}

section#character div.c1{background-image: url(../img/character/bg1.png);}
section#character div.c2{background-image: url(../img/character/bg2.png);}
section#character div.c3{background-image: url(../img/character/bg3.png);}
section#character div.c4{background-image: url(../img/character/bg4.png);}
section#character div.c5{background-image: url(../img/character/bg5.png);}
section#character div.c6{background-image: url(../img/character/bg6.png);}
section#character div.c7{background-image: url(../img/character/bg7.png);}
section#character div.c8{background-image: url(../img/character/bg8.png);}
section#character div.c9{background-image: url(../img/character/bg9.png);}

/*-----------------------------------------------
 world
-----------------------------------------------*/

section#world{
	z-index: 1;
	padding: 40px 0 60px;
	background-color: rgba(255,255,255,0.2);
}

section#world div.box{
	opacity: 0;
	margin-bottom: 16px;
}

section#world div.box div.head{
	width: 1000px;
	height: 21px;
	background-image: url(../img/bg-box-head-white.png);
}

section#world div.box div.body{
	padding: 0 40px;
	background-color: rgba(255,255,255,0.6);
}

section#world div.box div.foot{
	width: 1000px;
	height: 21px;
	background-image: url(../img/bg-box-head-white.png);
	transform: scale(1, -1);
}

section#world div.box h3{
	font-size: 48px;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", “メイリオ”, Meiryo, serif;
	color: #000;
}

section#world div.box h3 span{
	font-size: 30px;
}

section#world div.box p{
	color: #000;
}

/*-----------------------------------------------
 information
-----------------------------------------------*/

section#information{
	z-index: 1;
	padding: 40px 0 60px;
	background-color: rgba(0,0,0,0.6);
}

section#information div.book{
	position: relative;
	width: 920px;
	margin: 0 auto 100px;
}

section#information div.book:last-child{
	margin-bottom: 0;
}

section#information div.book div.onsale{
	position: absolute;
	top: -90px;
    left: -50px;
}

section#information div.book div.cover{
	position: relative;
	float: left;
	width: 253px;
	line-height: 0;
	border: 1px solid #000000;
}

section#information div.book div.detail{
	float: right;
	width: 638px;
}

section#information div.book div.detail p.catch{
	color: #f42615;
	font-size: 20px;
}

section#information div.book div.detail h3{
	font-size: 48px;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", “メイリオ”, Meiryo, serif;
}

section#information div.book div.detail p.author{
	margin-bottom: 20px;
	font-size: 16px;
}

section#information div.book div.detail p.author span{
	font-size: 20px;
}

section#information div.book div.detail p.text{
	margin-bottom: 20px;
	font-size: 16px;
}

section#information div.book div.detail ul{
	font-size: 0;
}

section#information div.book div.detail ul li{
	display: inline-block;
	margin-right: 16px;
	line-height: 0;
}

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

footer{
	position: relative;
	z-index: 100;
	padding: 20px 0;
	background-color: #344453;
}

footer div.pageup{
	position: fixed;
	z-index: 10;
	right: 10px;
	bottom: 10px;
	line-height: 0;
}

footer div.logo{
	margin-bottom: 10px;
	text-align: center;
	line-height: 0;
}

footer ul.social{
	margin-bottom: 10px;
	text-align: center;
}

footer ul.social li{
	display: inline-block;
	margin-right: 10px;
	vertical-align: top;
	line-height: 0;
}

footer ul.social li:last-child{
	margin-right: 0;
}

footer p{
	text-align: center;
	color: #fff;
}


/*-----------------------------------------------
 opening
-----------------------------------------------*/

div#opening{
	position: fixed;
	z-index: 200;
	width: 100%;
	height: 100%;
	background-color: #000;
}

div#skip{
	position: fixed;
	z-index: 300;
	cursor: pointer;
	top: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
}

div#skip:hover{
	opacity: 0.8;
	animation: btn 0.5s;
	-webkit-animation: btn 0.5s;
	-moz-animation: btn 0.5s;
}

div#opening div.inner{
	overflow: hidden;
	position: fixed;
	top: 50%;
	width: 100%;
	height: 748px;
	margin-top: -374px;
}

div#opening div.bg{
	position: absolute;
	z-index: 0;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 748px;
	background-image: url(../img/op/bg.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}

div#opening div.scene{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 748px;
}

div#opening div.scene1 p.text{
	display: none;
	margin-top: 255px;
	text-align: center;
}

div#opening div.scene2{
	display: none;
}

div#opening div.scene2 p.text{
	display: none;
	margin-top: 312px;
	text-align: center;
}

div#opening div.scene2 p.text2{
	display: none;
	margin-top: 260px;
	text-align: center;
}

div#opening div.scene3{
	display: none;
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

div#opening div.scene3 div.c1{
	display: none;
	position: absolute;
    z-index: 1;
    top: -17px;
    left: -30px;
}

div#opening div.scene3 p.name1{
	display: none;
	position: absolute;
    z-index: 1;
    top: 293px;
    left: 519px;
}

div#opening div.scene3 div.c2{
	display: none;
	position: absolute;
	z-index: 1;
    top: -91px;
    left: 373px;
}

div#opening div.scene3 p.name2{
	display: none;
	position: absolute;
    z-index: 1;
    top: 293px;
    left: 50px;
}

div#opening div.scene3 div.c3{
	display: none;
	position: absolute;
	z-index: 1;
    top: -25px;
    left: 19px;
}

div#opening div.scene3 p.name3{
	display: none;
	position: absolute;
    z-index: 1;
    top: 293px;
    left: 580px;
}

div#opening div.scene3 div.c4{
	display: none;
	position: absolute;
	z-index: 1;
	top: -109px;
    left: 492px;
}

div#opening div.scene3 p.name4{
	display: none;
	position: absolute;
    z-index: 1;
    top: 293px;
    left: 189px;
}

div#opening div.scene3 div.c5{
	display: none;
	position: absolute;
	z-index: 1;
    top: -25px;
    left: -7px;
}

div#opening div.scene3 p.name5{
	display: none;
	position: absolute;
    z-index: 1;
    top: 293px;
    left: 537px;
}

div#opening div.scene3 div.c6{
	display: none;
	position: absolute;
	z-index: 1;
    top: -14px;
    left: 360px;
}

div#opening div.scene3 p.name6{
	display: none;
	position: absolute;
    z-index: 1;
    top: 293px;
    left: 132px;
}

div#opening div.scene3 div.c7{
	display: none;
	position: absolute;
	z-index: 1;
    top: -60px;
    left: 58px;
}

div#opening div.scene3 p.name7{
	display: none;
	position: absolute;
    z-index: 1;
    top: 293px;
    left: 585px;
}

div#opening div.scene3 div.c8{
	display: none;
	position: absolute;
	z-index: 1;
    top: -38px;
    left: 383px;
}

div#opening div.scene3 p.name8{
	display: none;
	position: absolute;
    z-index: 1;
    top: 293px;
    left: 62px;
}

div#opening div.scene3 div.c9{
	display: none;
	position: absolute;
	z-index: 1;
    top: 51px;
    left: 7px;
}

div#opening div.scene3 p.name9{
	display: none;
	position: absolute;
    z-index: 1;
    top: 293px;
    left: 528px;
}

div#opening div.scene4{
	display: none;
}

div#opening div.scene4 p.text{
	position: relative;
	z-index: 3;
	display: none;
	margin-top: 295px;
	text-align: center;
}