@charset "UTF-8";
/* CSS Document */

/*******************************
 reset
*******************************/
html{height:100%;}
h1,h2,h3,ul,dl,dd,p{margin:0;}
ul{padding:0;}
li{list-style-type: none;}



/*******************************
 setting
*******************************/

body,html{
}

#wrapper{
	margin:0 auto;
	background:url(../img/pre/bg01.jpg) left top #fbfbfb;
	position:relative;
	top:0px;left:0px;overflow: hidden;
}

.main{
    display: none;
	width:100%;
	height:100%;
}

.main .bg-box {
    width: 100%;
    height: 100%;
    position: relative;
    top:0px;left:0px;
}

.main .bg-box .bg-hierarchy{
    top:0px;
}
.main .bg-box .bg-hierarchy01{
    background: url(../img/pre/bg-hierarchy01.png) center top no-repeat;
}

.main .bg-box .bg-hierarchy02{
    background: url(../img/pre/bg-hierarchy02.png) center top no-repeat;
}

.lt-ie9 .main .bg-cover{
    min-height: 900px;
    position: static;
}

.background-image{
	max-height:1080px;
	overflow:hidden;
	position:absolute;
	top:0px;left:0px;
	z-index:-1;
}

.new:before{
	content:"";
	width:71px;height:22px;
	background:url(../img/pre/ico-new.png);
	position:absolute;
	z-index:999;
}

/*******************************
enter-select-sound
*******************************/
.enter-select-sound{
}

.enter-select-sound .enter-select-sound-inner{
    width: 495px;
    height: 220px;
    margin: auto auto;
    position: absolute;
    top:0px;right: 0px;bottom:0px;left:0px;
}

.enter-select-sound .text{
    text-align: center;
}

.enter-select-sound ul{
    margin-top: 40px;
}
.enter-select-sound li{
    float: left;
    margin-left: 80px;
}
.enter-select-sound li:fist-child{
    margin-left:0px;
}

/* soud-btn */
.enter-select-sound .sound-btn{
    display: block;
    width: 166px;
    min-height: 101px;
    cursor:pointer;
    position: relative;
    top:0px;left:0px;
}

.enter-select-sound .sound-btn img{
    position: absolute;
    bottom:0px;left:0px;
}


/*******************************
sound-switch-box
*******************************/
.sound-switch-box{
    position: absolute;
    top:0px;right: 0px;
}

.sound-switch-box .sound-switch-inner{
    background:rgba(0,0,0,0.5);
    padding:6px 10px;
}

.sound-switch-box a{
    display: block;
    width:134px;height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.sound-switch-box a img{
    
}

/*******************************
load-animatetion
*******************************/
.load-anime-elm{
    display: none;
    position: relative;
    top:-10px;left:0px;
    opacity: 0;
}

/*******************************
header
*******************************/
.header{
    display: none;
    position: relative;
    top:-10px;left:0px;
}
.header .article-inner{
    width: 1025px;
    margin: 0 auto;
    position: relative;
    top:0px;left: 0px;
}

.header .article-box{
    padding:0px 53px;
}

/*******************************
.section
    |--section-top
    |--section-story
    |--section-world
    |--section-character
    |--section-spec
*******************************/
.section-box{
    position: relative;
    top:0px;left:0px;
}
.section{
    margin-bottom:0px;
}

.section .section-article{
    position: relative;
    top:0px;left:0px;
}

.section .article-inner{
    width: 1025px;
    margin: 0 auto;
    position: relative;
    top:0px;left:0px;
    z-index: 10;
}

.section h1{
	position:relative;
	top:-10px;left:0px;
}

.section .text{
    display: none;
	margin-bottom:23px;
    position: relative;
    top:-10px;left:0px;
    opacity: 0;
}

.section h2{
    text-align: center;
    position: relative;
    top:0px;left:0px;
    z-index: 20;
}
/* section-top */
.section-top .article-content01{
    position: relative;
    top:0px;left:0px;
}
.section-top .article-content02{
    position: absolute;
    top:-10px;right:0px;left: auto;
}

.section-top .article-box{
    width: 500px;
    text-align: center;
}

.section-top .section-text .release{
	margin-top:10px;
}

.section-top .section-text .character-design{
    margin-top:10px;
		position:relative;
		top:0px;left:0px;
}
.section-top .section-text .character-design2{
    margin:5px 0 10px 0;
}


.section-top .section-text .character-design .new:before{
	top:8px;left:87px;
}

.section-top .section-text .btn-box{margin-top:5px;}

.section-top .banner-box{
	margin-top:10px;
}

.section-top .banner-box .btn-movie{margin-bottom:10px;}

.section-top .banner-box .btn-movie a.new:before{top:-9px;}

.banner-box{
	text-align:center;
}

.banner-box a{
	display:inline-block;
	position:relative;
	top:0px;left:0px;
}

.ie8 .banner-box a > *{
	position:relative;
	z-index:-1;
}


.banner-box a.new:before{
	top:26px;left:7px;
}

/* section-story */
.section-story {
    margin-top:40px;
}

.section-story .section-article h3{
    margin-bottom:30px;
}


/* article-background */
.section .section-article .article-inner:before{
    content:"";
    position: absolute;
    z-index: -1;
}

.section-story .section-story-article02 .article-inner:before{
    width: 702px;height: 508px;
    background: url(../img/pre/bg-watercolor09.png) no-repeat top right;
    top: -138px;left: -40px;
    z-index: -1;
}
.section-story .section-story-article03 .article-inner:before{
    width: 687px;height: 510px;
    background:url(../img/pre/bg-watercolor01.png) no-repeat top right;
    top:100px;right: -104px;
    z-index: -1;
}

.section-story .section-story-article04 .article-inner:before{
    width: 1131px;height: 849px;
    background:url(../img/pre/bg-watercolor02.png) no-repeat top right;
    top:360px;left: -43px;
}

.section-world .section-world-article01 .article-inner:before{
    width: 961px;height: 1352px;
    background:url(../img/pre/bg-watercolor04.png) no-repeat top right;
    top:-132px;left: 16px;
}

.section-world .section-world-article02 .article-inner:before{
    width: 556px;height: 346px;
    background:url(../img/pre/bg-watercolor08.png) no-repeat top right;
    top:-6px;right: 10px;
}

.section-world .section-world-article02 .article-box3 .article-inner:before{
    width: 487px;height: 145px;
    background:url(../img/pre/bg-watercolor10.png) no-repeat top right;
    top:180px;right: 94px;
}

.section-character .section-story-article01 .article-inner:before{
    width:1112px;height: 1290px;
    background:url(../img/pre/bg-watercolor05.png) no-repeat top right;
    top:180px;
		left:-40px;
}

.section-spec .section-spec-article02 .article-inner:before{
    width:2052px;height: 627px;
    margin-left: -1026px;
    background:url(../img/pre/bg-watercolor06.png) no-repeat top right;
    top:-170px;left: 50%;
}

.section-spec .article-content02:before{
    content: "";
    width: 569px;
    height: 344px;
    margin-left: 0px;
    background: url(../img/pre/bg-watercolor07.png) no-repeat top right;
    position: absolute;
    top: -87px;
    left: -95px;
    z-index: -1;
}


.section-spec .btn-movie{
		position:relative;
		margin-top:40px;
}
.ie8 .section-spec .btn-movie{
	z-index:-1;
}

.ie8 .section-spec .btn-movie .btn-inner{
	position:relative;
	z-index:-1;
}

.section-spec .btn-movie.new:before{
		top:-11px;left:7px;
}


/*.section-story .section-story-article05 .article-inner:before{
    width: 992px;height: 611px;
    background:url(../img/pre/bg-watercolor03.png) no-repeat top right;
    top:-254px;left: 120px;
}*/


/* section-story-article */
.section-story .section-story-article01{
    text-align: right;
    margin-top:-15px;
		z-index:100;
}

.section-story .section-story-article01 h3{margin-right:55px;}
.section-story .section-story-article01 h3 + p{margin-right:30px;}

.section-story .section-story-article02{
    margin-top:-80px;
}

.section-story .section-story-article02 h3,
.section-story .section-story-article02 h3 + p{
	margin-left:60px;
}

.section-story .section-story-article03{
    text-align: right;
		margin-top:50px;
    position: relative;
    top:0px;left: 0px;
    z-index: 10;
}

.section-story .section-story-article04{
    margin-top:-410px;
    z-index: 9;
}

.section-story .section-story-article04 .article-content02{
    margin-top:80px;
}

.section-story .section-story-article05{
    height: 394px;
    position: relative;
    top:0px;left:0px;
}

.section-story .section-story-article05 .article-box{
    position: absolute;
    top:-150px;left:323px;
}

.section-story .section-story-article05 .article-box h3{
    position: absolute;
    bottom:5px;left:-83px;
}

.section-story .text-story04{
	margin-top:40px;
}


/* section-world */
.section-world .section-article .article-box{
    padding:0px 53px;
}

.section-world .section-article .article-box2{
	position:relative;
	margin-top:85px;
}

.section-world .section-article .article-box2.new:before{top:-15px;}

.section-world .section-world-article01{
    margin-bottom: 60px;
}
.section-world .section-world-article01 h3{
    height: 252px;
    line-height: 252px;
    background:url(../img/pre/bg-section-world01.png) no-repeat center center;
    padding-left:100px;
    margin-bottom:70px;
    margin-top:23px;
}

.section-world .section-world-article02 h3{
    border-bottom:solid 1px #000;
    padding-bottom:13px;
    margin-bottom:15px;
}

.section-world .section-world-article02 h3 span{
	display:inline-block;
	padding-left:80px;
	position:relative;
	top:0px;left:0px;
}
.section-world .section-world-article02 h3 span.new:before{
	content:"";
	width:71px;
	height:22px;
	background:url(../img/pre/ico-new.png);
	position:absolute;
	top:15px;left:0px;
}

.section-world .section-article dl{
    width: 610px;
}
.section-world .section-article dl dt,
.section-world .section-article dl dd{
    float: left;
}

.section-world .section-article dl dt{
    width: 240px;
    margin-top: 70px;
}

.section-world .section-article dl dd{
    min-height: 122px;
    border-left: solid 1px #000;
    padding-left: 27px;
    margin-left: 20px;
    margin-top: 70px;
}

.section-world .section-article dl dt:first-child,
.section-world .section-article dl dt:first-child + dd{
    margin-top: 0px;
}

.section-world .section-article .btn-trial{
	margin-top:20px;
}

.section-world .section-article .btn-trial a{
	display:block;
	position:relative;
	top:0px;left:0px;
}
.ie8 .section-world .section-article .btn-trial a > *{
	position:relative;
	z-index:-1;
}
.section-world .section-article .btn-trial .new:before{
	top:-11px;left:7px;
}

.section-world .section-article .pict-box ul li{
    margin-top:1px;
    margin-right: 1px;
}

.section-world .section-article .article-content01{float:right;}
.section-world .section-article .article-content02{float: left;}

.section-world .article-content02 .pict-box{margin-top:120px;}
.section-world .article-content02 .pict-box:first-child{margin-top:0px;}

/*
.section-world .article-content03 .pict-box .pict2{
	margin:-20px 130px 0 0;
}
*/



.section-world .article-content03{
    position: relative;
    top:0px;left:0px;
}

.section-world .article-content03 .pict-box{
    position: absolute;
    top:10px;right: 0px;
}

.section-world .article-content03 .pict-box2{
	top:-9px;
	right:130px;
}

/* section-character */
.section-character{
    margin-top: 85px;
}

.section-character .article-box{
    padding-bottom: 1000px;
    position: relative;
    top:0px;left:0px;
}

.section-character .article-character-name{
		margin-top:20px;
    position: relative;
    top:0px;left:0px;
    z-index: 10;
}

.section-character .article-character-name ul{margin-bottom:20px;}

.section-character .article-character-name ul li{
    /*margin-top:20px;*/
		float:left;
    position: relative;
    top:0px;left:0px;
		margin-bottom:15px;
}
.section-character .article-character-name ul li:first-child{
    margin-top:0px;
}

.section-character .article-character-name li a.new:before{
    top:37px;left:14px;
    z-index: 10;
}
.section-character .article-character-name li.brigitte a.new:before{
    top:41px;left:10px;
    z-index: 10;
}



.section-character .article-character-name li a > *{
	position:relative;
	z-index:-1;
}

.section-character .article-character-intro{
    position: absolute;
    top:240px;left:50px;
}

.section-character .article-character-intro .character-image{position: absolute;}
.section-character .article-character-intro .character-name{
    background:url(../img/pre/bg-character-name.png) center center no-repeat;
    padding: 156px 88px 106px 70px;
    position: absolute;
}

.section-character .article-character-intro .character-pict{}

/* character-style */
/* amleth */
.section-character .character-amleth .character-name{top:86px;left:375px;}
.section-character .character-amleth .character-image{top:0px;left:0px;}
.section-character .character-amleth .character-pict{display:none;}


/* ophelia */
.section-character .character-ophelia .character-name{top:232px;left:375px;}
.section-character .character-ophelia .character-image{top:0px;left:0px;}
.section-character .character-ophelia .character-pict{display:none;}

/* brunhild */
.section-character .character-brunhild .character-name{top:116px;left:508px;}
.section-character .character-brunhild .character-image{top:-10px;left:-160px;}
.section-character .character-brunhild .character-pict{display:none;}

/* maxim */
.section-character .character-maxim .character-name{top:86px;left:412px;}
.section-character .character-maxim .character-name p{
    position: relative;
    top:3px;left:-15px;
}
.section-character .character-maxim .character-image{top:10px;left:153px;}
.section-character .character-maxim .character-pict{
	display:block;
	top:480px;
	left:492px;
	position:absolute;
}

/* blum */
.section-character .character-blum .character-name{top:160px;left:360px;}
.section-character .character-blum .character-image{top:30px;left:-20px;}

.section-character .character-blum .character-pict{
	display:block;
	top:517px;
	left:450px;
	position:absolute;
}


/* helena */
.section-character .character-helena .character-name{top:190px;left:320px;}
.section-character .character-helena .character-name p{
    position: relative;
    top:-4px;left:22px;
}

.section-character .character-helena .character-image{top:-15px;left:10px;}

.section-character .character-helena .character-pict{
	display:block;
	top:541px;
	left:430px;
	position:absolute;
}


/* brigitte */
.section-character .character-brigitte .character-name{top:185px;left:340px;}
.section-character .character-brigitte .character-name p{
    position: relative;
    top:-6px;left:24px;
}

.section-character .character-brigitte .character-image{top:45px;left:100px;}

.section-character .character-brigitte .character-pict{
	display:block;
	top:537px;
	left:456px;
	position:absolute;
}



/* section-spec */
.section-spec .article-box{
    padding:0px 53px;
}

.section-spec .section-spec-article01{
    margin-bottom:100px;
    position: relative;
    top:0px;left:0px;
    z-index: 100;
}

.section-spec .article-content01{
    float: left;
}
.section-spec .article-content02{
    margin-top: 25px;
    float: right;
    position: relative;
    top:0px;left:0px;
}

.section-spec .spec-btn{
    text-align: center;
}

.section-spec .btn-box{
    text-align: right;
}

.section-spec .btn-box p:first-child{
    margin-bottom:17px;
    margin-top: 20px;
}

.section-spec .btn-box .before-pict{position: relative;top:0px;left: 0px;}
.section-spec .btn-box .before-pict:before{
    content: "";
    width:180px;height: 78px;
    background: url(../img/pre/ico-btn-trial.png);
    position: absolute;
    top: -35px;left:-147px;
}

.ie8 .black-box > *{
	position:relative;
	z-index:-1;
}
.black-box{
	position:relative;
	z-index:0;
}

.black-box-area .black-box{
    box-sizing: border-box;
    background-color:#303030;
    border:solid 1px #e1dab6;
		position:relative;
		top:0px;left:0px;
}

.black-box-area .black-box.new:before{
	top:-11px;left:7px;
}

.black-box-area .inner-border{
    border: solid 1px #7a7764;
    margin: 2px;
}

.black-box-area .balck-box-inner{
    padding:23px 58px;
}

.black-box-area h3 span{
    padding-right: 0px;
}

.black-box-area h3{
    background: url(../img/pre/bg-section-spec.png) left bottom no-repeat;
    padding-bottom: 20px;
}

.black-box-area .movie-box{
    margin-top:30px;
}

.black-box-area .profile-box{
	background: url(../img/pre/bg-section-spec.png) left top no-repeat;
	padding-top:35px;
	margin-top:20px;
}

.black-box-area .profile{
	float:left;
}

.black-box-area .profile .thumb{
	margin-right:14px;
	margin-top:6px;
	float:left;
}

.black-box-area .profile .right-box{
	float:left;
}

.black-box-area .profile .profile-text{
	color:#FFF;
	font-size:12px;
	margin-top:12px;
}

.black-box-area .profile01{
	margin-right:55px;
}

.black-box-area .br-sp{display:none;}
.black-box-area .br-pc{display:block;}

/*******************************
parts
    |--movie-box
    |--share-box
    |--pict-box
    |--float-box
    |--btn-box
*******************************/
/* movie-box */
.movie-box{
    margin-top:10px;
}
.movie-box .thumb img{border:solid 1px #FFF;}
.movie-box.yellow .thumb img{border:solid 1px #d2ccab;}

.movie-box.float-box .movie{
    float: left;
    margin-left: 40px;
    position: relative;
    top:0px;left:0px;
}
.movie-box.float-box .movie:first-child{
    margin-left: 0px;
}

.movie-box .movie.new .thumb:before{
    content: "";
    width: 71px;height: 22px;
    background: url(../img/pre/ico-new.png);
    position: absolute;
    top:-10px;left:-10px;
    z-index: 10;
}

.movie-box .movie.new:before{background:none;}

/*
.movie-box .movie.new:before{
	top:-10px;
	left:47px;
}
*/

.movie-box .thumb{
    display: inline-block;
    position: relative;
    top:0px;left:0px;
		z-index:1;
}
.movie-box .thumb a:before{
    content: "";
    width: 86px;
    height: 86px;
    background:url(../../assets/img/pre/btn-play-movie.png);
    margin-top:-43px;margin-left: -43px;
    position: absolute;
    top:50%;left:50%;
		z-index:10;
}

.movie-box.yellow .thumb a:before{
    width: 66px;height: 66px;
    background:url(../../assets/img/pre/btn-play-movie02.png);
    margin-top:-33px;margin-left: -33px;
}

.movie-box .thumb a > *{
	position:relative;
	z-index:-1;
}

.movie-box .title{
    text-align: center;
    margin-top: 10px;
}

.movie-box .detail{
    min-height: 109px;
    margin-bottom: 28px;
}

/* share-box */
.share-box{
    margin-top:15px;
    position: relative;
    top:0px;left:0px;
}

.share-box .center-box{
    display: inline-block;
}

.share-box p,
.share-box .sns-list{
    float: left;
}

.share-box p{
    line-height: 50px;
    margin-right: 7px;
}



/*.share-box .center-box{text-align: center;}
.share-box .center-box .centered{display: inline-block;}*/

.share-box .sns-list{
    line-height:100%;
}

.share-box .sns-list ul{
    display:inline-block;
}

.share-box .sns-list ul li{
    margin-left:5px;
    float:left;
    list-style-type:none;
}

.share-box .sns-list ul li:first-child{
    margin-left:0px;
}

.share-box .sns-list ul li.last{
    margin-left: 14px;
}

.share-box .bnr-tw-cp{
	float:none;
	margin:-5px 0 10px 0;
}

/* pict-box */
.pict-box > p{margin-top:15px;}
.pict-box > p:first-child{margin-top:0px;}


/* float-box */
.float-box .pc-fleft{float:left;}
.float-box .pc-fright{float:right;}


/* btn-box */
.btn-box .back-btn{
    position: fixed;
    bottom:30px;right: 50px;
    z-index: 999999;
}
/*******************************
header
*******************************/
.header .logo{
}

/*******************************
 Function
 	|--is-hover-fade / マウスオーバーアニメーション　FadeIn Out
*******************************/
.is-hover-fade{
	-webkit-transition:all 0.25s ease;
	transition:all 0.25s ease;	
}

.is-hover-fade:hover{
	opacity:0.7;	
}



/*******************************
 footer
*******************************/
.footer{
	width:100%;
	padding:17px 0px 13px;
    position: relative;
    top:0px;left: 0px;
    z-index: 10;
}

.footer .article-inner{
    width: 1025px;
    margin: 0 auto;
}

.footer .article-box{
    padding:0px 53px;
}

.footer .copy{
	margin-right:26px;
	line-height:55px;	
}

.footer .btn{
	float:left;
	line-height:55px;
	margin-left:30px;
}

.footer .btn a{
	display:inline-block;
	width:240px;
	height:40px;
	color:#FFF;
	font-size:14px;
	text-align:center;
	text-decoration:none;
	line-height:40px;
	border:solid 1px #FFF;
	box-sizing:border-box;
	/*Ie7*/
	*display: inline;  
	*zoom: 1;
}

.footer .btn a .gt{
	padding-left:10px;	
}