*{
margin:0;
padding:0;
text-align:center;
font-family:"メイリオ","Hiragino Kaku Gothic ProN",sans-serif;
/*font-size:18px;*/
/*line-height:1.6;*/
}
a img{
border:none;
}
img{
vertical-align:bottom;
}
li{
list-style-type: none;
}
.responsive{
max-width:100%;
}
.responsiveW{
width:100%;
}

#curtain{
position:fixed;
width:100%;
height:100%;
background-color:#fff;
pointer-events:none;
z-index:999;
}

#menu_fix{
position:fixed;
top:0;
padding:5px 0;
width:100%;
background-image:url(images/info_bg.png);
opacity:0;
z-index:900;
}
#menu_fix .logo{
float:left;
width:10%;
}
#menu_fix .btn{
float:right;
padding-top:10px;
width:90%;
text-align:right;
}
#menu_fix .btn > div{
position:relative;
display:inline-block;
margin-left:-10px;
width:12%;
}
#menu_fix .btn > div > .new{
position:absolute;
top:-20%;
left:-3%;
width:24%;
}

#header{
position:relative;
width: 100%;
height: 100vh;
background:url(images/header_pc.jpg) 50% 100%;
background-size:cover;
overflow:hidden;
backface-visibility: hidden;
}
#header .catch{
position:absolute;
left:0;
top:0;
width:100%;
z-index:800;
}
#header .gazai{
position:absolute;
left:0;
top:0;
width:100%;
}
#header .header_0{
position:absolute;
left:32%;
top:43%;
}
#header .header_1{
position:absolute;
left:49%;
top:3%;
}
#header .header_2{
position:absolute;
left:8%;
top:20%;
}
#header .rightTop{
position:absolute;
padding-bottom:20px;
top:0%;
right:0%;
width:100%;
background: -moz-linear-gradient(rgba(23,63,193,0.5),rgba(23,63,193,0)); 
background: -webkit-linear-gradient(rgba(23,63,193,0.5),rgba(23,63,193,0)); 
background: linear-gradient(rgba(23,63,193,0.5),rgba(23,63,193,0)); 
}
#header .menu_pc{
position:relative;
left:-100%;
}
#header .rightTop ul{
text-align:right;
}
#header .rightTop li{
display:inline-block;
position:relative;
margin:0.5% 0 0 -10px;
width:12%;
max-width:190px;
}
#header .menu_pc .new{
position:absolute;
top: -8%;
left: -6%;
width: 22%;
}
#header .rightCenter{
position:absolute;
top:25%;
right:-1%;
width:35%;
max-width:540px;
pointer-events: none;
}
#header .rightCenter .header_logo{
margin-top:-10%;
}
#header .rightBottom{
position:absolute;
bottom:0;
right:18%;
width:17%;
}
#header .header_424 {
margin:-1% auto 0 auto;
width: 50%;
}
#header .leftTop{
position:absolute;
top:1%;
left:-1%;
width:180px;
}

#header .leftCenter{
}
#header .leftBottom{
position:absolute;
bottom:0%;
left:1%;
width:48%;
max-width:700px;
text-align:left;
}
#header .leftBottom .ambassadorArea{
width:22%;
}
#header .leftBottom .maeuriArea{
margin-top:-10px;
width:50%;
}
#header .leftBottom .guestArea{
margin-top:-10px;
display:inline-block;
}
#header .leftBottom .guestArea:nth-of-type(3){
width:35%;
}
#header .leftBottom .guestArea:nth-of-type(4){
width:27%;
}

#info{
position:relative;
padding:20px 0 30px 0;
color:#fff;
background-image:url(images/info_bg.png);
}
#info .sns ul{
display:table;
table-layout:fixed;
margin:5px auto 0 10%;
width:60%;
}
#info .sns li{
display:table-cell;
padding:0 4%;
}
#info > .credit > ul{
display:table;
table-layout:fixed;
width:100%;
}
#info > .credit > ul > li{
display:table-cell;
vertical-align:top;
}
#info > .credit > ul > li:nth-of-type(2){
width:56%;
}
#info > .credit > ul > li:nth-of-type(2n+1){
width:22%;
text-align:right;
}
#info > .credit > ul > li > p{
margin-top:10px;
font-size:1rem;
line-height:1.4;
}
.size8{
font-size:0.8rem;
}
.size7{
font-size:0.7rem;
}

#info .toho{
margin:20px auto 0 auto;
width:80px;
}
#info .banner_dvd{
max-width:280px;
width:90%;
}
#info .banner_large{
margin:20px auto 0 auto;
max-width:255px;
}
#info > .banner > ul{
display:table;
table-layout:fixed;
margin:20px auto 0 auto;
width:750px;
}
#info > .banner > ul > li{
display:table-cell;
padding:0 5px;
}

#intro{
position:relative;
overflow:hidden;
}
#intro #midashi_story{
position:absolute;
left: 32.5%;
top: 2%;
width:28%;
}
#intro #story{
position:absolute;
left:0%;
top:9%;
width:95%;
}
#intro .story_catch{
position:absolute;
left:0%;
top:5%;
width:60%;
}
#intro .chara_catch{
position:absolute;
left: 60%;
top: 62%;
width:38%;
}
#intro #midashi_chara{
position:absolute;
left:32.5%;
top:74%;
width:28%;
}
#intro #chara{
position:absolute;
left: 0%;
top: 76%;
width: 100%;
}
#intro #chara div{
display:inline-block;
}
#intro #chara div:nth-of-type(1){
width:30%;
}
#intro #chara div:nth-of-type(3){
padding:0 2%;
width:21%;
}
#intro #chara div:nth-of-type(4){
width:22%;
}
#intro > #chara > div.sp{
display:none;
}
#intro .curtain{
position:absolute;
top:0;
width:100%;
height:100%;
background-image:url(images/info_bg.png);
pointer-events:none;
z-index:800;
}

#footer{
margin-top:-5px;
padding-bottom:20px;
}
#footer .footer_0{
margin:0 auto;
width:40%;
}
#footer .footer_1{
margin:20px auto 0 auto;
width:10%;
}
#footer .copyright{
margin:0 auto 0 auto;
width:16%;
}

/*colorbox*/
#cboxOverlay {
background: url() rgba(0,22,74,0.8);
}
.cboxIframe{
background:transparent;
}
#cboxContent{
background:transparent;
}
#cboxTopLeft,#cboxTopCenter,#cboxTopRight,
#cboxMiddleLeft,#cboxMiddleRight,
#cboxBottomLeft,#cboxBottomCenter,#cboxBottomRight{
width:0;
height:0;
}
#cboxClose {
top: 0;
right: 0;
width: 55px;
height: 80px;
background: url(images/cb_close.png) no-repeat 0 0;
background-size:100%;
}
#cboxClose:hover {
background-position: 0 0;
}
#cboxLoadingOverlay,#cboxLoadingGraphic{
background:url();
}

.sp{
display:none;
}
.sp_inline{
display:none;
}
.sp_inline2{
display:none;
}


@media (max-width: 1220px) {
.sp_inline2{
display:inline;
}
}


@media (max-width: 960px) {
#container{
overflow:hidden;
}
#menu_open,#menu_close{
position:fixed;
top:2%;
right:3%;
width:14%;
height:14%;
display:none;
z-index:802;
}
#menu{
position:fixed;
opacity:0;
z-index:801;
}
#menu > .logo{
position:absolute;
left:20%;
top:1%;
margin:0 auto;
width:60%;
}
#menu > .btn{
position:absolute;
top:20%;
}
#menu > .btn > div{
position:relative;
display:inline-block;
width:45%;
}
#menu > .btn > div > .new{
position:absolute;
top:-12%;
left:-8%;
width:24%;
}

#shade{
position:fixed;
width:100%;
height:100%;
background-color:rgba(0,62,162,0.8);
z-index:800;
display:none;
}

#header{
height: auto;
background:url();
}
#header .header_bg{
position:relative;
}
#header .gazai{
top:0;
}
#header .catch{
position:absolute;
left:-1.5%;
top:-1%;
}
#header .header_0{
position:absolute;
left:30%;
top:30%;
width:60%;
}
#header .header_1{
position:absolute;
left:60%;
top:3%;
width:32%;
}
#header .header_2{
position:absolute;
left:4%;
top:17%;
width:47%;
}
#header .rightCenter{
top:69%;
right:0;
left:0;
margin:auto;
width:60%;
}
#header .rightBottom{
right:0;
bottom:15%;
width:26%;
}
#header .leftBottom{
left:-1%;
bottom:0%;
width:34%;
}
#header .leftBottom .ambassadorArea{
width:80%;
}
#header .leftBottom .guestArea{
margin-top:-8%;
display:block;
}
#header .leftBottom .guestArea:nth-of-type(3){
width:78%;
}
#header .leftBottom .guestArea:nth-of-type(4){
width:67%;
}

#info #midashi_doga{
margin:0 auto 0 20%;
width:50%;
}
#info #dogaArea{
position:relative;
margin:10px auto 0 auto;
width:96%;
}
#info #dogaArea .doga_waku{
position:absolute;
top:-1%;
pointer-events:none;
}
#info #dogaArea .btn > div{
display:inline-block;
width:45%;
}
#info #dogaArea .btn > div{
margin-top:10px;
}
#info .banner_guest{
margin:15px auto 0 auto;
width:96%;
}
#info .banner_maeuri{
margin:-2px auto 0 auto;
width:96%;
}
#info > .credit{
margin-top:20px;
}
#info > .credit > ul > li:nth-of-type(2){
width:100%;
}
#info > .credit > ul > li:nth-of-type(2n+1){
width:0%;
}
#info .banner_dvd{
margin:20px auto 0 auto;
max-width:100%;
width:90%;
}
#info .btn{
margin-top:20px;
}
#info .btn > div{
position:relative;
display:inline-block;
width:47%;
}
#info .btn > div > .new{
position:absolute;
top:-12%;
left:-6%;
width:22%;
}
#info .sns > ul{
display:table;
table-layout:fixed;
margin:20px auto 0 auto;
width:65%;
}
#info .sns > ul > li{
display:table-cell;
padding:0 5%;
}
#info p{
margin:20px auto 0 auto;
width:96%;
}

/*slick*/
#intro #slick{
position:absolute;
top:15.5%;
width:100%;
}
.slide-arrow {
position: absolute;
top: 42%;
width: 13%;
}
.next-arrow {
left: 4%;
z-index: 700;
}
.prev-arrow {
right: 4%;
z-index: 701;
}
.slick-disabled{
display:none !important;
}

#intro #midashi_story{
opacity:0;
}
#intro #story{
left:0%;
top:32%;
width:100%;
pointer-events:none;
}
#intro .story_catch{
left:0%;
top:2%;
width:82%;
pointer-events:none;
}
#intro .chara_catch{
left: auto;
right:-2%;
top: 83%;
width:60%;
z-index:700;
}
#intro #chara{
margin:0 auto;
left: 1%;
top: 65%;
width:98%;
text-align:left;
}
#intro #midashi_chara{
top:62%;
opacity:0;
}
#intro #chara div{
display:inline-block;
}
#intro #chara div:nth-of-type(1){
width:54%;
}
#intro #chara div:nth-of-type(2){
width:40%;
}
#intro #chara div:nth-of-type(3){
margin:-10% 0 0 2%;
width:40%;
}
#intro > #chara > div.sp{
display:inline-block;
}
#intro > #chara > div.chara_2.pc{
display:none;
}

#footer{
margin-top:20px;
}
#footer .footer_0{
width:90%;
}
#footer .footer_1{
width:30%;
}
#footer .copyright{
width:60%;
}
#footer .banner_large{
margin:10px auto 0 auto;
}
#footer .banner_large > div{
display:inline-block;
margin-top:10px;
width:45%;
}
#footer .banner{
margin-top:10px;
}
#footer .banner > div{
display:inline-block;
margin-top:10px;
width:30%;
}
#footer .banner.sp > div:nth-of-type(1) > a > img,#footer .banner.sp > div:nth-of-type(3) > a > img{
border:1px solid #999;
}

/*colorbox*/
#cboxClose {
margin: auto;
top:auto;
bottom: 10%;
left: 0;
right: 0;
width: 35px;
height: 50px;
}

.sp{
display:block;
}
.pc{
display:none;
}
.sp_inline{
display:inline;
}
.pc_inline{
display:none;
}
}