@charset "UTF-8";


html,body{
height:100%;
width:100%;
}
body{
background: #fff;
min-width: 1200px;
}


/*オープニング動画*/
#opYT{
width: 100%;
height: 100%;
cursor: pointer;
}/*
#player{
margin: 0 5%;
}*/
#opSkip{
display: block;
position: absolute;
right: 50px;
}

/*オープニング*/
#opWrap{
width:100%;
height:100%;
position: fixed;
overflow: hidden;
display: none;
}
#op{
width:100%;
height:auto;
position:absolute;
bottom:0;
left:0;
opacity: 0;
}

section{
min-width: 1200px;
}

/*メイン部分*/
#wrapper{
width: 100%;
min-width: 1200px;
height: 100%;
opacity: 0;
}
#main{
display: block;
width: 100%;
height: 100%;
background: url(images_new/main_fade.png) repeat-x center bottom, url(images_new/main.jpg) no-repeat left center;
background-size: auto,cover;
position: relative;
font-size: 0;
min-height: 750px;
}
#catch{
position: absolute;
top:5%;
left:25%;
}
#ttl_pc{
position: absolute;
top:50%;
left: 65%;
margin-top: -260px;
margin-left: -325px;
}
#ttl_ipad{
display: none;
}
#ttl{
position: absolute;
top:50%;
left: 65%;
margin-top: -220px;
margin-left: -180px;
}


.newMark{
position: absolute;
height: 30px;
width: auto;
top:0;
left: 0;
}
.menuBTN{
display: inline-block;
width: 200px;
height: 64px;
position: relative;
margin-right: 5px;
}
.menuBTN:nth-last-of-type(1){
margin-right: 12px;
}
.menuBG{
display: block;
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background:url(images_new/menu_bg_pc.png?180109) no-repeat;
background-size: 100%;
opacity: 0.6;
transition: all .2s ease-out;
/*
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
*/
}
.menuBTN:hover .menuBG{
opacity: 0.9;
}
.menuBTN img:nth-of-type(1){
position: relative;
width: 100%;
height: 100%;
}
#snsWrap{
display: inline-block;
width: 65px;
height: 64px;
}
.sns{
display: inline-block;
}
.sns:nth-of-type(2n+1){
margin-right: 5px;
}
.sns:nth-of-type(1),
.sns:nth-of-type(2){
margin-bottom: 5px;
}
#shareWrap{
position: absolute;
top: 10px;
right: 10px;
}
#shareWrap a{
display: inline-block;
border-right: dotted 1px #FFF;
}
#shareWrap a:nth-of-type(1){
border-left: none;
border-right: none;
margin-right: 10px;
}
#shareWrap a:nth-of-type(2){
border-left: dotted 1px #FFF;
}
#shareWrap img{
padding: 0 5px;
}
#sspbnrWrap{
position: absolute;
bottom: 130px;
right: 50px;
}
#sspbnrWrap a{
display: inline-block;
position: relative;
margin-right: 6px;
margin-bottom: 6px;
}
/*
#sspbnrWrap a:nth-last-of-type(1),
#sspbnrWrap a:nth-last-of-type(3){
margin-right: 0px;
}*/

#sspbnrWrap a:nth-last-of-type(1){
margin-right: 0px;
}


#sspbnrWrap2{
position: absolute;
top: 50px;
right: 10px;
}
#sspbnrWrap2 a{
display: inline-block;
position: relative;
margin-right: 6px;
margin-bottom: 6px;
}

#sspbnrWrap2 a:nth-last-of-type(1){
margin-right: 0px;
}
.tabT,
.tabT img{
display: none;
}

nav{
position: absolute;
bottom: 45px;
left: 50%;
margin-left: -549px;
}
.pt{
width: 100%;
text-align: center;
padding: 20px 0;
}
#main .pt{
position: absolute;
bottom: 5px;
left: 0;
padding: 0;
}
.ptBar{
width: 45%;
height: 22px;
}

/*バナー部分*/
#bannerWrap{
width: 100%;
background: url(images_new/main_grade.png) repeat-x center top;
background-size: auto;
}
/*スペシャルバナー*/
#spWrap{
font-size: 0;
padding-top: 15px;
text-align: center;
}
#spWrap a{
display: inline-block;
position: relative;
margin-right: 5px;
}
#spWrap a:nth-last-of-type(1){
margin-right: 0;
}
/*タイアップバナー*/
#tieupWrap{
font-size: 0;
padding: 0px 0 10px 0;
text-align: center;
}
#tieupWrap a{
position: relative;
margin-bottom: 5px;
margin-right: 5px;
}
#tieupWrap a:nth-last-of-type(1){
margin-right: 0;
}
/*ビリング*/
#billing{
display: block;
margin: 20px auto;
}
/*公式サイトバナー*/
#officialWrap{
font-size: 0;
text-align: center;
padding-top: 10px;
}
#officialWrap a{
position: relative;
margin-right: 5px;
display: inline-block;
}
#officialWrap a:nth-last-of-type(1){
margin-right: 0;
}
/*スポンサーバナー*/
#sponcerWrap{
font-size: 0;
text-align: center;
padding: 10px 0 20px 0;
max-width: 1000px;
margin: 0 auto;
}
.sponcer{
display: inline-block;
position: relative;
margin-right: 5px;
margin-bottom: 5px;
}
.sponcerEnd{
margin-right: 0;
}
/*コピーライト*/
#cr{
display: block;
margin: 0 auto;
padding: 10px 0;
}
/*フッターリンク*/
#footerLink {
display:block;
padding:0 0 20px 0;
font-size: 11px;
line-height: 1em;
text-align: center;
color: #FFF;
}
#footerLink a,
#footerLink a:visited {
color: #FFF;
}
#footerLink a:hover {
color: #FE0;
}
/*情報系*/
#cb{
display: none;
}
.infoPict{
vertical-align: top;
display: inline-block;
margin: 0 10px 0 56px;
}
.infoCloseBTN{
vertical-align: top;
display: inline-block;
}

/*映画紹介*/
.about{
position: fixed;
background: url(images_about/bg.jpg)center top repeat-x;
width: 100%;
overflow: hidden;
min-width: 1200px;
top:0;
left: 0;
transition: all .2s ease-out;
opacity: 0;
}
.info{
position: fixed;
background:url(images_info/bg.png)center top;
width: 100%;
overflow: hidden;
min-width: 1200px;
top:0;
left: 0;
transition: all .2s ease-out;
color: #FFF;
opacity: 0;
}
/*
.info{
min-width: 1200px;
color: #FFF;
background:url(images_info/bg.png)center top;
position: fixed;
width: 100%;
overflow: hidden;
opacity: 1;
top:0;
left: 0;
transition: all .2s ease-out;
}*/
.show{
opacity: 1;
position: absolute;
visibility: visible;
}
.hide{
/*opacity: 0;
z-index: -1;*/
visibility: hidden;
}
/*白バック*/
#whiteWrap{
position: fixed;
width: 100%;
height: 100%;
background: #FFF;
z-index: 20;
}
.closeBTN{
position: fixed;
top:100px;
left:1060px;
right:auto;
z-index: 10;
}
.about .closeBTN{
top:40px;
}
#intro{
display: block;
margin: 0 auto;
padding: 30px 0 20px 0;
}
/*loopSlider*/
.loopslider {
margin: 0 auto;
width: 100%;
height: 180px;
text-align: left;
position: relative;
overflow: hidden;
font-size: 0;
}

.loopslider ul {
/*width: 100%;*/
height:180px;
float: left;
display: inline;
overflow: hidden;
font-size: 0;
}
.loopslider ul li {
width: 320px;
height: 180px;
float: left;
display: inline;
overflow: hidden;
vertical-align: top;
font-size: 0;
}
.loopslider ul li img {
width: 320px;
height: 180px;
}
.loopslider ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}

.loopslider ul {
display: inline-block;
overflow: hidden;
}

/*ストーリー*/
#storyWrap{
padding: 260px 0 20px 0;
}
#story{
position: relative;
margin: 0 auto;
width: 1050px;
height: 580px;
}
#storyBG{
position: absolute;
display: block;
margin: 0 auto;
}
#storyTXT{
position: absolute;
display: block;
margin: 0 auto;
}
/*キャラ*/
#charaWrap{
padding: 100px 0 0px 0;
}
#ttlCh{
display: block;
margin: 0 auto 20px auto;
}
.swiper-container{
background: #2d491a;
box-shadow:0px 0px 10px 1px rgba(0,0,0,0.8);
}
.swiper-slide,
.swiper-slide img{
width:430px;
height:530px;
}
#ftrCharaWrap{
position: relative;
height:465px;
}

#ftrCharaWrap img{
position: absolute;
z-index: 1;
}
#dora{
bottom:30px;
left:345px;
}
#nobi{
bottom:10px;
left:165px;
}
#shizu{
bottom:10px;
left:560px;
}
#gian{
bottom:50px;
left:10px;
}
#suneo{
bottom:200px;
left:660px;
}
#minidora{
bottom:50px;
left:650px;
}
#island{
bottom:-1px;
right:0px;
}


/*映画情報*/

.info header{
position: fixed;
width: 100%;
min-width: 1200px;
top:0;
left: 0;
text-align: center;
background: url(images_info/head_bg.png) center top;
background-size: 100% auto;
padding: 10px 0;
vertical-align: bottom;
z-index: 1;
}
#infoTTL{
margin-right: 20px;
}
.info header a{
display: inline-block;
margin: 0 2px;
}
.infoScene{
width: 100%;
height: auto;
}
.infoScene:nth-of-type(1){
/*margin-top: 66px;*/
}
#introductionWrap,
#guestWrap,
#songsWrap,
#screenplayWrap,
#booksWrap{
padding: 100px 0 70px 0;
text-align: center;
}
.info p{
width: 960px;
margin: 40px auto;
font-size: 17px;
text-align: justify;
line-height: 1.8em;
}
.info p span{
font-size: 13px;
display: block;
text-align: right;
}
.info #introductionWrap{
margin-top: 50px;
padding-bottom: 120px;
/*margin: -50px auto;
padding: 200px 0 100px 0;*/
background:url(images_info/sen1.png) -20px -50px  no-repeat;
}
.info #guestWrap{
background:url(images_info/sen2.png) center 260px no-repeat;
}
.info #songsWrap{
background:url(images_info/sen3.png) center 490px no-repeat;
}
.info #screenplayWrap{
background:url(images_info/sen4.png) center 510px no-repeat;
}
.info #booksWrap{
background:url(images_info/sen5.png) center 250px no-repeat;
padding-bottom: 30px;
}
.comments{
display: inline-block;
text-align: center;
width: 960px;
}
.comments p{
margin-top: 20px;
font-size: 15px;
text-align: justify;
}

#guestWrap .comments{
margin-top: 180px;
margin-right: 50px;
vertical-align: top;
width: 260px;
}
#guestWrap .comments p{
width: 260px;
}
#guestWrap .comments:nth-last-of-type(1){
margin-right: 0;
}
#songTTL p{
display: inline-block;
text-align: left;
vertical-align: top;
margin-right: 10px;
margin-top: 0;
margin-bottom: 100px;
font-size: 18px;
line-height: 1.1em;
}
#songTTL p:nth-of-type(1),
#songTTL p:nth-of-type(3){
font-size: 16px;
border: solid 2px #FFF;
text-align: center;
vertical-align:center;
width: 140px;
padding: 35px 0
}
#songTTL p:nth-of-type(2),
#songTTL p:nth-of-type(4){
margin-right: 0px;
}
#songTTL p:nth-of-type(2),
#songTTL p:nth-of-type(4){
width: 250px;
}
#songTTL p strong{
font-size: 20px;
line-height: 1.6em;
}
#songTTL p span{
display: inline;
text-align: left;
font-size: 14px;
line-height: 1.0em;
}
#songsWrap .comments,
#songsWrap .comments p{
text-align: center;
}

#screenplayWrap .comments{
margin-top: -20px;
margin-bottom: 320px;
}
.infoTTL{
margin-top:-200px; 
padding-top:200px;
}
#bookAll{
display: block;
width: 500px;
margin: 0 auto;
text-align: center;
}
.book{
display: inline-block;
margin-top: 50px;
vertical-align: top;
width: 210px;
text-align: center;
}
.book:nth-of-type(2n+1){
margin-right: 50px;
}
.book:nth-of-type(3),
.book:nth-of-type(4){
margin-top: 20px;
}
.book img{
margin-bottom: 10px;
}
.book a img{
margin-bottom: 0px;
}
.book a{
display: block;
margin: 10px auto;
}
.book p{
width: 210px;
font-size: 14px;
text-align: center;
margin-top: 10px;
}
.infoScenes{
position: relative;
}
.wave{
position: absolute;
top:0;
}

@media screen and (min-width:1200px){
.closeBTN{
left:auto;
right:40px;
}
}