/*******************************
setting
*******************************/
#wrapper{
    min-width:640px;
    min-height: inherit;
    overflow: hidden;
}

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

.main .bg-box .bg-hierarchy01{
    background: url(../img/pre/bg02_sp.png) center top no-repeat;
    background-size: 100%;
}

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

.main .bg-cover{
    background-size: 100%;
    background-repeat: no-repeat;
}

.new:before{
	content:"";
	width:89px;height:27px;
	background:url(../img/pre/ico-new_sp.png) no-repeat;
	position:absolute;
}

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



/*******************************
header
*******************************/
.header .article-inner{
    width: 100%;
}


/*******************************
.section
|--section-top
|--section-story
|--section-world
|--section-character
|--section-spec
*******************************/
.section-box{
    display: none;
    position: static;
}
.section h2{text-align: center;}
.section h2 img{
    width: 93.750%;
}

.section .section-article{
    position: static;
}
.section .article-inner{
    width: 100%;
}

.section .section-article .article-box{
    padding:15px;
}

/*section-top*/
.section-top .article-inner{
    position: static;
}

.section-top .section-article .article-box{
    width: 100%;
    padding-top:64.375%;
}

.section-top .section-text .character-design{
    margin-top:4.687%;
}

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


.section-top .section-text .character-design span{
	display:inline-block;
	position:relative;
	top:0px;left:0px;
}

.section-top .section-text .character-design .new:before{
	top:40px;left:-100px;
}

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

.section-top .section-text p{
    margin-top:4.687%;
}

.section-top .article-content02 {
    width: 100%;
    text-align: right;
    top: 5px;
}
.section-top .article-content02 .title-sub-text img{
    width: 31.563%;
}

.section-top .banner-box{
	margin:64px 0 40px 0;
}
.banner-box{
	text-align:center;
}

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

/* section-story */
.section-story{
    margin-top:1.625%;
}
.section-story .section-article{
    margin-top:2.0312%;
}
.section-story h2 + .section-article{
    margin-top:0px;
}
.section-story .section-article h3{
    margin-bottom:3.750%;
}


/* article-background */
.section .section-article .article-inner:before{
    width: 100%;
}

.section-story .section-story-article01{
	position:relative;
}

.section-story .section-story-article02 h3, .section-story .section-story-article02 h3 + p{
	margin-left:0px;
}
/*
.section-story .section-story-article02 .article-inner:before{
	width:100%;
	padding-top:86.562%;
	background-size:100% auto;
	top:-70px;left:-66px;
}
*/
.section-story .section-story-article02 .article-inner:before{
	background:url(../img/pre/bg-watercolor09_sp.png) no-repeat top right;
	width:100%;
	padding-top:86.562%;
	background-size:100% auto;
	top:-430px;left:0px;
}


.section-story .section-story-article03 .article-inner:before{
    background:url(../img/pre/bg-watercolor01_sp.png) no-repeat top right;
    top:126px;right: -31px;
}

.section-story .section-story-article04 .article-inner:before{
    background:url(../img/pre/bg-watercolor02_sp.png) no-repeat top left;
    top:325px;left: 0px;
}

.section-story .section-story-article04 .sp-margin{
    margin-top:9.375%;
}

.section-story .section-story-article01 .article-inner:before{
    top:-80px;left: -40px;
}
.section-story .section-story-article05 .article-inner:before{
    padding-top: 74.219%;
    background:url(../img/pre/bg-watercolor03_sp.png) no-repeat top left;
    background-size: 100%;
    top:-50px;left: -3px;
}

.section-world .section-world-article01 .article-inner:before{
    height: auto;
    padding-top:55.156%;
    background:url(../img/pre/bg-watercolor04_sp.png) no-repeat top left;
    background-size: 100%;
    top:-65px;left: -0px;
}

.section-world .section-world-article01 .article-content02:before{
    content: "";
    width: 100%;
    height: auto;
    padding-top:80.3125%;
    background:url(../img/pre/bg-watercolor05_sp.png) no-repeat top left;
    background-size: 100%;
    position: absolute;
    top:-66px;left: -15px;
    z-index: -1;
}

.section-world .section-world-article02 .article-inner:before{
    width: 100%;height:auto;
    padding-top: 54.0625%;
    background:url(../img/pre/bg-watercolor08_sp.png) no-repeat top right;
    background-size: 100% auto;
    top:73px;right: 0px;
}

.section-character .section-story-article01 .article-inner:before{
    width: 1112px;
    background:url(../img/pre/bg-watercolor05.png) no-repeat top left;
   /* top:45px;*/
	 top:197px;
		left: -60px;
}

.section-spec .section-spec-article02 .article-inner:before{
    height: 1460px;
    background:url(../img/pre/bg-watercolor06_sp.png) no-repeat top left;
    background-size: 100%;
    top:-60px;left: 0px;
    margin-left: 0px;
}

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


.section-spec .article-content02:before{
    background: url(../img/pre/bg-watercolor07_sp.png) no-repeat center center;
    position: absolute;
    left: 50%;
    width: 120%;
    height: auto;
    padding-top: 76.719%;
    margin-left: -58%;
}

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

/* section-story-article */
.section-story .section-story-article01{
    text-align: left;
}
.section-story .section-story-article02{
}
.section-story .section-story-article03{
    text-align: left;
		margin-top:70px;
}

.section-story .section-story-article03 .pict-box{
    text-align: right;
}
.section-story .section-story-article04{
}

.section-story .section-story-article05{
    height: auto;
}

.section-story .section-story-article05 .article-box{
    position: static;
}

.section-story .section-story-article05 .article-box h3{
    left: 60px;
}

.section-story .section-story-article05 .article-box h3 img{
    width: 88.593%;
}

.section-story .section-story-article05 .pict-box{text-align: center;}
.section-story .section-story-article05 .pict-box img{
    width: 89.063%;
}
.section-story .text-story04{
	margin-top:0px;
}


/* section-world */
.section-world{
    margin-top:19.531%;
}

.section-world .section-world-article01{
    margin-bottom:105px;
}

.section-world .section-world-article01 h3{
    height: auto;
    line-height: 100%;
    text-align: center;
    padding-top: 39.218%;
    margin-bottom:5%;
    background:url(../img/pre/bg-section-world01.png) no-repeat center center;
    background-size: cover;
    position: relative;
    top:0px;left:0px;
}

.section-world .section-world-article01 h3 img{
    width: 69.219%;
    margin-top:-7%;margin-left: -45%;
    position: absolute;
    top:50%;left:50%;
}

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

/*
.section-world .section-world-article02 h3 .new:before{
	content:"";
	width:89px;height:27px;
	background:url(../img/pre/ico-new_sp.png);
}
*/

.section-world .section-article .article-content01,
.section-world .section-article .article-content02{
    float: none;
}


.section-world .section-article dl{margin-bottom:280px;}
.section-world .section-article dl dt,
.section-world .section-article dl dd{
    float: none;
}

.section-world .section-article dl dt{
    border-left: solid 1px #000;
    border-width: 2px;
    padding-left: 27px;
    margin-left: 20px;
    margin-top:7.188%;
}
.section-world .section-article dl dd{
    border-width: 2px;
    padding-top:4.062%;
    margin-top: 0px;
		position:relative;
		top:0px;left:0px;
}

.section-world .section-article .world-text{
	
}
.section-world .section-article .btn-trial{
	position:absolute;
	top:160px;left:0px;
}

/*
.section-world .section-article .btn-trial .new:before{
	width:89px;height:27px;
	background:url(../img/pre/ico-new_sp.png);
}
*/

.section-world .section-article .article-content02{
    margin-top:7.813%;
    position: relative;
    top:0px;left:0px;
}
.section-world .section-article .pict-box{
    margin-top:2px;
}

.section-world .section-article .pict-box ul{
    width: 100%;
    display: table;
    table-layout: fixed;
}

.section-world .section-article .pict-box ul li{
    display: table-cell;
    padding-left: 2px;
}

.section-world .section-article .pict-box ul li img{
    width: 100%;
}

.section-world .article-content03 .pict-box{
    position: static;
    margin-bottom:40px;
}

.section-world .article-content03 .pict-box img{
    width: 100%;
}

/* section- character */
.section-character{
    margin-top:10.92%;
}

.section-character .section-article .article-box{
	/*
    padding-bottom:118.375%;
		*/
		padding-bottom:0;
}

.section-character .article-character-intro{
    top: 170px;
    left: 190px;
		position:static;
}

.section-character .article-character-name{
	margin-top:0px;
}
.section-character .article-character-intro .character-name{
    top: 235px;
    left: -30px;
}
.section-character .article-character-name ul li:first-child{
	margin-bottom:15px;
	width:33%;
}
.section-character .article-character-name ul li :first-child img{
	width:96%;
}


.section-character .article-character-name ul li{
	width:33%;
}

.section-character .article-character-name ul li img{
	width:96%;
}

.section-character .article-character-name ul li a.new:before{
	background-size:100%;
	width:24%;
	background-position:center;
	top:0;
    z-index: 10;
}

.section-character .article-character-name li a{
	position:relative;
}
.section-character .article-character-name li.brigitte a.new:before{
		background-size:100%;
	width:24%;
	background-position:center;
	top:0;
    z-index: 10;

}
/*
.section-character .article-character-name li.brigitte a.new:before{
	background-size:100%;
	width:24%;
	background-position:center;
	top:0;
}
*/
.section-character .article-character-intro .character-image{
	position:static;
}
.section-character .character-pict img{
	width:87%;
}
/* character-style */
/* amleth */
.section-character .character-image{top:0px;left:0px;}

.section-character .character-amleth .character-image{top:30px;left:0px;margin-top:-3%;margin-left:22%;}

/* ophelia */
.section-character .character-ophelia .character-image{top:30px;left:0px;margin-top:-3%;margin-left:18%;}

/* brunhild */
.section-character .character-brunhild .character-image{top:30px;left:0px;margin-top:-4%;margin-left:-27%;}

/* maxim */
.section-character .character-maxim .character-image{top:30px;left:0px;margin-top:3%;margin-left:44%;}
.section-character .character-maxim .character-name{left:-10px;}
.section-character .character-maxim .character-pict{
	display:block;
	top:631px;
	left:67px;
	position:absolute;
}

/* blum */
.section-character .character-blum .character-image{top:30px;left:0px;margin-top:4%;margin-left:26%;}
.section-character .character-blum .character-pict{
	display:block;
	top:590px;
	left:50px;
	position:absolute;
}

/* helena */
.section-character .character-helena .character-image{top:30px;left:0px;margin-top:-3%;margin-left:26%;}
.section-character .character-helena .character-name{left:-50px;}
.section-character .character-helena .character-pict{
	display:block;
	top:590px;
	left:60px;
	position:absolute;
}

/* brigitte */
.section-character .character-brigitte .character-image{top:30px;left:0px;margin-top:2%;margin-left:41%;}
.section-character .character-brigitte .character-name{left:-54px;}
.section-character .character-brigitte .character-pict{
	display:block;
	top:590px;
	left:60px;
	position:absolute;
}



/* section-spec */
.section-spec .article-content01,
.section-spec .article-content02{
    float: none;
}

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

.section-spec .section-spec-article02 .article-content01{
    margin-top: 120px;
}

.section-spec .article-content02{
    text-align: center;
}

.section-world .article-content03 .pict-box .pict2{
	margin-top:0;
	text-align:center;
}

.section-world .article-content03 .pict-box .pict2 img{
	width:80%;
}

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

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

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

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

.black-box-area h3 span{
    display: block;
    text-align: center;
    padding: 0px;
    margin-bottom: 15px;
}

.black-box-area h3 > img{
    width: 100%;
}

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

.black-box-area .profile .thumb{
	margin-right:15px;
}

.black-box-area .profile .right-box{
	width:79.875%;
}

.black-box-area .profile .profile-text{
	font-size:16px;
}

.black-box-area .profile01{
	margin-bottom:40px;
	margin-right:0px;
}

.black-box-area .br-pc{display:none;}
.black-box-area .br-sp{display:block;}
	
/*******************************
parts
|--movie-box
|--share-box
|--pict-box
|--float-box
|--btn-box
*******************************/
/*movie-box*/
.movie-box.float-box .movie{
    text-align: center;
    margin:0px;
    float:none;
}
.movie-box.float-box .movie:first-child{margin-bottom:80px;}
.movie-box.float-box .movie:last-child{margin-bottom:30px;}

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



/* share-box */
.share-box{
    margin-top:5.938%;
}

.share-box p{
    line-height: 77px;
}
.share-box .bnr-tw-cp{margin:1.93% 0 0px 0;}

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

.share-box .sns-list ul li.last{
    margin-left: 22px;
}
/* float-box */
.float-box .pc-fleft{float:none;}
.float-box .pc-fright{float:none;}


/* btn-box */
.btn-box .back-btn{
    position:absolute;
    bottom:153px;right: 0px;
    z-index: 999999;
}
/*******************************
header
*******************************/
.header .logo img{
}



/*******************************
.section
*******************************/
.section{
    width: 100%;
}

.section h1 img,
.section .text img{
    width: 100%;
}



/*******************************
footer
*******************************/
.footer{
    padding:15px;
    margin-top:17.969%;
}

.footer .article-inner{
    width: 100%
}

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

.footer .copy{
    margin-right: 0px;
    line-height: 100%;
}

.footer .copy img{
    width:100%;
}



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

.is-image100-sp{
    width:100%;
}

.is-image50-sp{
    width:50%;
}

.is-none-sp{
    display:none;
}