@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;
	font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif;
}

/*-----------------------------------------------
 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;
}

section{
	position: relative;
}

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

body{
	overflow-x: hidden;
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url(../img/bg.jpg);
	background-attachment: fixed;
}

div#content{
	position: relative;
	width: 100%;
}

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

div#overlay{
	opacity: 0;
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.9)
}

div#overlay2{
	opacity: 0;
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6)
}

ul#gnav {
	display: none;
	position: fixed;
	z-index: 10;
	top: 50%;
	right: 20px;
	margin-top: -140px;
}

ul#gnav li{
	width: 115px;
	height: 40px;
}

ul#gnav li a{
	display: block;
	width: 115px;
	height: 40px;
}

ul#gnav li a:hover{
	background-image: url(../img/gnav-hover.png) !important;
}

ul#gnav li.gnav1{
	background-image: url(../img/gnav-top.png);
}

ul#gnav li.gnav2{
	background-image: url(../img/gnav-pv.png);
}

ul#gnav li.gnav3{
	background-image: url(../img/gnav-illust.png);
}

ul#gnav li.gnav4{
	background-image: url(../img/gnav-story.png);
}

ul#gnav li.gnav5{
	background-image: url(../img/gnav-character.png);
}

ul#gnav li.gnav6{
	background-image: url(../img/gnav-shop.png);
}

ul#gnav li.gnav7{
	background-image: url(../img/gnav-mediamix.png);
}

ul#gnav li.gnav8{
	background-image: url(../img/gnav-products.png);
}

/* 1 */

ul#gnav.active1 li.gnav1 a{
	background-image: url(../img/gnav-hover.png);
}

/* 2 */

ul#gnav.active2 li.gnav1 a{
	background: none;
}

ul#gnav.active2 li.gnav2 a{
	background-image: url(../img/gnav-hover.png);
}

/* 3 */

ul#gnav.active3 li.gnav1 a,
ul#gnav.active3 li.gnav2 a{
	background: none;
}

ul#gnav.active3 li.gnav3 a{
	background-image: url(../img/gnav-hover.png);
}

/* 4 */

ul#gnav.active4 li.gnav1 a,
ul#gnav.active4 li.gnav2 a,
ul#gnav.active4 li.gnav3 a{
	background: none;
}

ul#gnav.active4 li.gnav4 a{
	background-image: url(../img/gnav-hover.png);
}

/* 5 */

ul#gnav.active5 li.gnav1 a,
ul#gnav.active5 li.gnav2 a,
ul#gnav.active5 li.gnav3 a,
ul#gnav.active5 li.gnav4 a{
	background: none;
}

ul#gnav.active5 li.gnav5 a{
	background-image: url(../img/gnav-hover.png);
}

/* 6 */

ul#gnav.active6 li.gnav1 a,
ul#gnav.active6 li.gnav2 a,
ul#gnav.active6 li.gnav3 a,
ul#gnav.active6 li.gnav4 a,
ul#gnav.active6 li.gnav5 a{
	background: none;
}

ul#gnav.active6 li.gnav6 a{
	background-image: url(../img/gnav-hover.png);
}

/* 7 */

ul#gnav.active7 li.gnav1 a,
ul#gnav.active7 li.gnav2 a,
ul#gnav.active7 li.gnav3 a,
ul#gnav.active7 li.gnav4 a,
ul#gnav.active7 li.gnav5 a,
ul#gnav.active7 li.gnav6 a{
	background: none;
}

ul#gnav.active7 li.gnav7 a{
	background-image: url(../img/gnav-hover.png);
}

ul#gnav.active8 li.gnav1 a,
ul#gnav.active8 li.gnav2 a,
ul#gnav.active8 li.gnav3 a,
ul#gnav.active8 li.gnav4 a,
ul#gnav.active8 li.gnav5 a,
ul#gnav.active8 li.gnav6 a,
ul#gnav.active8 li.gnav7 a{
	background: none;
}

ul#gnav.active8 li.gnav8 a{
	background-image: url(../img/gnav-hover.png);
}



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

header#header{
	position: relative;
	height: 990px;
}

header#header h1{
	opacity: 0;
	position: fixed;
	z-index: -1;
    top: 10px;
    left: 50%;
    margin-left: -273px;
	filter: blur(20px);
	-webkit-filter: blur(20px);
	-moz-filter: blur(20px);
	-o-filter: blur(20px);
	-ms-filter: blur(20px);
}

header#header p.name{
	opacity: 0;
	position: absolute;
	z-index: 1;
    top: 84px;
    left: 0;
	filter: blur(20px);
	-webkit-filter: blur(20px);
	-moz-filter: blur(20px);
	-o-filter: blur(20px);
	-ms-filter: blur(20px);
}

header#header div.update{
	opacity: 0;
	position: absolute;
	top: 342px;
    left: 413px;
}

header#header div.release{
	opacity: 0;
	position: absolute;
    top: 50px;
    left: 780px;
}

header#header div.release-comic{
	opacity: 0;
	position: absolute;
    top: 210px;
    left: 830px;
}

header#header div.comicalize{
	opacity: 0;
	position: absolute;
    top: 500px;
    left: 660px;
}

/*-----------------------------------------------
 pv
-----------------------------------------------*/

section#pv{
	opacity: 0;
}

section#pv div.inner{
	position: relative;
	z-index: 2;
	width: 1000px;
	margin: 0 auto;
	padding: 320px 0 90px;
}

section#pv h2{
	position: relative;
	z-index: 1;
	opacity: 0;
	margin: 0 0 5px 145px;
	line-height: 0;
}

section#pv div.youtube{
	position: relative;
	z-index: 1;
	opacity: 0;
	width: 704px;
	height: 395px;
	margin: 0 auto;
	border: 2px solid #000;
	text-align: center;
	line-height: 0;
}

section#pv div.line0{
	overflow: hidden;
	position: absolute;
	z-index: 1;
    top: 0;
    left: -500px;
	width: 1px;
	height: 489px;
	background-image: url(../img/line0.png);
	background-repeat: no-repeat;
}

section#pv div.line0 p{
	opacity: 0;
	line-height: 0;
}

section#pv div.line1{
	overflow: hidden;
	position: absolute;
	z-index: 1;
    top: 0;
    left: -500px;
	width: 1px;
	height: 489px;
	background-image: url(../img/line1.png);
	background-repeat: no-repeat;
}

section#pv div.line1 p{
	opacity: 0;
	line-height: 0;
}

section#pv div.line2{
	overflow: hidden;
	position: absolute;
	z-index: 1;
    top: 0;
    left: -500px;
	width: 1px;
	height: 489px;
	background-image: url(../img/line2.png);
	background-repeat: no-repeat;
}

section#pv div.line2 p{
	opacity: 0;
	line-height: 0;
}

section#pv div.line3{
	overflow: hidden;
	position: absolute;
	z-index: 1;
    top: 0;
    left: -500px;
	width: 1px;
	height: 489px;
	background-image: url(../img/line3.png);
	background-repeat: no-repeat;
}

section#pv div.line3 p{
	opacity: 0;
	line-height: 0;
}

section#pv div.triangle{
	opacity: 0;
	position: absolute;
	width: 169px;
	height: 178px;
	top: 250px;
    left: 80px;
	background-image: url(../img/triangle1.png);
}

/*-----------------------------------------------
 illust
-----------------------------------------------*/

section#illust{
	z-index: 1;
	opacity: 0;
}

section#illust div.inner{
	margin: 0 auto 45px;
}

section#illust div.illust{
	width: 850px;
}

section#illust h2{
	margin-bottom: -30px;
}

section#illust div.illust div.cover{
	position: relative;
	z-index: 1;
	float: right;
	width: 295px;
}

section#illust div.illust div.detail{
	float: left;
	width: 555px;
	padding-top: 125px;
	text-align: center;
}

section#illust div.illust div.detail p{
	margin-bottom: 50px;
}

section#illust div.illust div.detail div.btn-illust{

}

section#illust div.triangle{
	opacity: 0;
	position: absolute;
	width: 277px;
	height: 263px;
    top: -21px;
    right: 0;
	background-image: url(../img/triangle2.png);
}

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

section#story{
	opacity: 0;
}

section#story div.inner{
	z-index: 1;
}

section#story div.inner h2{
	margin-bottom: 50px;
}

section#story div.inner p.text{
	position: relative;
	z-index: 1;
	margin-bottom: 200px;
	text-align: center;
}

section#story div.inner h3{
	opacity: 0;
	margin-left: 45px;
}

section#story div.inner div.scene{
	position: relative;
	height: 1450px;
}

section#story div.inner div.scene div.scene1{
	opacity: 0;
	text-align: center;
}

section#story div.inner div.scene div.scene2{
	opacity: 0;
	position: absolute;
	top: 793px;
	left: 21px;
}

section#story div.inner div.scene div.scene3{
	opacity: 0;
	position: absolute;
	top: 688px;
	left: 312px;
}

section#story div.inner div.scene div.scene4{
	opacity: 0;
	position: absolute;
	top: 708px;
	left: 680px;
}

section#story div.inner div.scene p.text-scene{
	opacity: 0;
	position: absolute;
	top: 950px;
	left: 80px;
}

section#story .bg{
	position: absolute;
	top: -26px;
	left: 0;
	width: 200%;
	height: 100%;
	margin: 0 0 0 -50%;
	background-color: rgba(0,0,0,0.5);
	transform: rotate(-14deg);
}

section#story div.triangle{
	opacity: 0;
	position: absolute;
	width: 549px;
	height: 527px;
    top: 0;
    right: 0;
	background-image: url(../img/triangle3.png);
}

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

section#character{
	opacity: 0;
}

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

section#character div.inner div.col{
	position: relative;
	height: 1100px;
}

section#character div.inner div.col p.text{
	position: absolute;
	opacity: 0;
	z-index: 2;
	top: 150px;
	left: 120px;
}

section#character div.inner div.col div.c1{
	position: absolute;
	z-index: 1;
	opacity: 0;
    top: 56px;
    left: 393px;
}

section#character div.inner div.col div.c2{
	position: absolute;
	z-index: 1;
	opacity: 0;
    top: 60px;
    left: 253px;
}

section#character div.inner div.col div.c3{
	position: absolute;
	z-index: 1;
	opacity: 0;
	top: 40px;
    left: 251px;
}

section#character div.inner div.col p.serif{
	opacity: 0;
	position: absolute;
	z-index: 1;
	top: -80px;
	right: 25px;
}

section#character div.inner div.col1 div.triangle{
	opacity: 0;
	position: absolute;
	width: 608px;
	height: 575px;
    top: 170px;
    right: -70px;
	background-image: url(../img/triangle4.png);
}

section#character div.inner div.col2 div.triangle{
	opacity: 0;
	position: absolute;
	width: 608px;
	height: 575px;
    top: 170px;
    right: -80px;
	background-image: url(../img/triangle5.png);
}

section#character div.inner div.col3 div.triangle{
	opacity: 0;
	position: absolute;
	width: 608px;
	height: 575px;
    top: 170px;
    right: -80px;
	background-image: url(../img/triangle6.png);
}

/*-----------------------------------------------
 shop
-----------------------------------------------*/

section#shop{
	opacity: 0;
}
section#shop h2{
	margin-bottom: 40px;
}
section#shop div.inner{
	z-index: 1;
}

section#shop div.inner div.shop ul li img{
	position: relative;
	z-index: 1;
}


section#shop div.inner div.shop{
	padding: 40px 0 20px;
	border: 1px solid #000;
	background-color: rgba(255,255,255,0.5);
	text-align: center;
}

section#shop div.inner div.shop ul{
	width: 908px;
	margin: 0 auto;
}

section#shop div.inner div.shop ul li{
	overflow: hidden;
	position: relative;
	float: left;
	width: 440px;
	margin-bottom: 20px;
	padding: 20px 0;
	border: 2px solid #000;
	background-color: rgba(255,255,255,0.6);
	line-height: 0;
}

section#shop div.inner div.shop ul li img{
	position: relative;
	z-index: 1;
}

section#shop div.inner div.shop ul li:nth-child(odd){
	margin-right: 20px;
}
section#shop div.inner div.shop ul li div.triangle{
	position: absolute;
	top: -40px;
	left: 0;
	width: 409px;
	height: 427px;
	background-image: url(../img/triangle7.png);
	background-repeat: no-repeat;
}

section#shop div.inner div.shop ul li:nth-child(2) div.triangle{
	transform: rotate(30deg);
}

section#shop div.inner div.shop ul li:nth-child(3) div.triangle{
	transform: rotate(60deg);
}

section#shop div.inner div.shop ul li:nth-child(4) div.triangle{
	transform: rotate(90deg);
}

section#shop div.inner div.shop ul li:nth-child(5) div.triangle{
	transform: rotate(120deg);
}

section#shop div.inner div.shop ul li:nth-child(6) div.triangle{
	transform: rotate(18deg);
}
/*
section#shop div.inner div.shop ul li:last-child{
	width: 904px;
	margin-right: 0;
}
*/

section#shop .bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 100%;
	margin: 0 0 0 -50%;
	background-color: rgba(243,134,155,0.5);
	transform: rotate(14deg);
}

/*-----------------------------------------------
 mediamix
-----------------------------------------------*/

section#mediamix{
	opacity: 0;
}

section#mediamix div.inner{
	margin-bottom: 400px;
}

section#mediamix h2{
	margin-bottom: 60px;
}

section#mediamix h3{
	margin-left: 325px;
}

section#mediamix .comic,
section#mediamix p,
section#mediamix .btn{
	text-align: center;
}
section#mediamix .comic {
	position: relative;
	z-index: 10;
	text-align: center;
	margin-bottom: 30px;
}

/*section#mediamix .comic img {
	width: 460px;
	padding: 0 0 0 13px;
}*/

section#mediamix .comic img {
	padding: 0 0 0 9px;
}

section#mediamix .mediagame {
	margin-top: 18px;
    margin-bottom:15px;
}
section#mediamix .mediagame img {
	width: 100%;
}

section#mediamix p {
	text-align: center;
	margin-bottom: 30px;
}

section#mediamix div.triangle{
	opacity: 0;
	z-index: 1;
	position: absolute;
	width: 169px;
	height: 178px;
	top: 80px;
    left: 270px;
	background-image: url(../img/triangle1.png);
}



/*-----------------------------------------------
 products
-----------------------------------------------*/

section#products{
	opacity: 0;
}

section#products div.inner{
	margin-bottom: 1360px;
}

section#products h2{
	margin-bottom: 60px;
}

section#products div.product{
	position: relative;
	width: 1000px;
	margin-bottom: 50px;
}

section#products div.product div.cover{
	position: relative;
	z-index: 1;
	float: left;
	width: 247px;
}

section#products div.product div.detail{
	float: right;
	width: 725px;
}

section#products div.product div.detail h3{
	font-size: 30px;
}

section#products div.product div.detail p.author{
	font-size: 20px;
}

section#products div.product div.detail p{
	margin-bottom: 40px;
	font-size: 16px;
}

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

section#products div.product div.detail ul{
	font-size: 0;
}

section#products div.product div.detail ul li{
	display: inline-block;
	margin-right: 30px;
}

section#products div.product div.detail ul li.coming{
	opacity: 0.3;
}

section#products div.product div.detail ul li.trial{
}

section#products div.product div.pop{
	position: absolute;
	top: -65px;
    left: -72px;
}

/*-----------------------------------------------
 next
-----------------------------------------------*/

div#next{
	width: 1000px;
	margin: 0 auto;
}

div#next ul{
	position: relative;
	width: 1000px;
	height: 110px;
	line-height: 0;
}

div#next ul li:first-child{
	opacity: 0;
	position: absolute;
	left: 20px;
	bottom: -100px;
}

div#next ul li:last-child{
	opacity: 0;
	position: absolute;
	left: 715px;
	bottom: -100px;
}

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

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

footer div.pageup{
	margin-bottom: 10px;
	text-align: center;
	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;
}