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



main{
	width: 100%;
	height: 100%;
}

.container-base{
    width: 100%;
    height: 100%;
  /* background-color: #FFE114;*/
    /*	background-attachment: fixed;
	overflow: scroll;*/
	
/*	gridで中央表示*/
	/*display: grid;
	grid-template-columns: 100vw;
	grid-template-rows: 100vh;*/

}

.top-main-wrapper{
    width: 100%;
    height:100%;
    position: relative;
 
}

.top-sub-wrapper{
    width: 100%;
    line-height: 0;
    position: relative;
    background-color: hsla(0,0%,100%,1.00);    
    padding:0 0 0.5% 0;
}

.top-main-logo-area{
    max-width: 1000px;
    /*height:100%;*/
    position: relative;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto auto;
    z-index: 3;

}

.top-main-wrapper2{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #851A1C;
    z-index: 999;
    background-image: url(../img/pc_top_base1.png);
}

.top-main-base{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    z-index: 2;
    background-image: url(../img/pc_top_base1.png);
    background-repeat: repeat-x;
}




.top-main-img-wrapper{
	width: 100%;
	max-width: 900px;
	/*height:100%;*/
	margin: 0 auto 0;
	position:relative;
	/*background-color: #E40C10;*/
	z-index: 2;
   /* top:60%;*/

}

.top-main-img-wrapper:before {
    content: "";
    display: block;
    /*padding-top: 100%;*/ /* 1:1 */
}

.top-main-upCast{
width: 100%;
position: absolute;
/*left: 50%;
transform: translate(-50%, 45%);*/
z-index:3;
}

.top-main-copy{
width: 9%;
max-width: 80px;
right: 190px;
top:125px;
position: absolute;
z-index:3;

}



.top-main{
width: 100%;
top:0;
position: absolute;
z-index:2;
 line-height: 0;   
}


.top-main-waku{
    width: 100vw;
    height: 100vh;
    position: relative;
    line-height: 0;
}


.top-main-top_01{
    width: 100vw;
    height: 100vh;
    position: absolute; 
    line-height: 0;
}

.heightImg{
    overflow: hidden;
    background-image: url(../img/pc_top_03_01.jpg);
    background-repeat: no-repeat;
   /* background-size: auto 100%;*/
    background-size: 100% auto;
    background-position: center bottom;
    
     width: 100vw;
  height: 100vh;
    
}

.heightImg2{
    overflow-x: hidden;
    background-image: url(../img/pc_top_03_02.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center 0%;
}

.heightImg img{
    
}


@media screen and (max-width: 750px) {
  .top-main-top_01{
      position: relative; 
    height: auto;
}
    
    .top-main-waku{
   height: 100%;
}
  
    
}

.top-main-top_02{
     width: 100%;
    height: 100vh;
position: absolute; 
    top:0px;
     line-height: 0;
}

.top-main-top_03{
     width: 100%;
position: relative; 
     line-height: 0;
    max-width: 1280px;
    margin:auto;
}

@media screen and (max-width: 1500px) {
    
.top-main-top_02{
}  
    
}

@media screen and (max-width: 1100px) {
    
.top-main-top_02{

}  
    
}





.top-main-top_04{
width: 95%;
max-width:740px;
top:52%;
position: relative;
z-index:10;
left: 50%;
transform: translate(-50%, 0%);
}

.top-main-top_05{
width: 100%;
max-width: 600px;
top:793px;
position: absolute;
z-index:5;
left: 50%;
transform: translate(-50%, 0%);
}

.top-main-top_06{
    width: 100%;
    height: 140px;
    top: 956px;
    position: absolute;
    z-index: 3;
    /* left: 50%;
    transform: translate(-50%, 0%);*/
    background-image: url(../img/pc_top_img01.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 100%;
}

.top-main-top_06b{
width: 100%;
max-width: 1000px;
top:831px;
position: absolute;
z-index:3;
left: 50%;
transform: translate(-50%, 0%);
}

.top-credit{
width: 100%;
max-width: 750px;
top:1110px;
position: absolute;
z-index:3;
left: 50%;
transform: translate(-50%, 0%);
}

.top-main-top_07{
width: 100%;
max-width: 140px;
top:150px;
position: absolute;
z-index:5;
left: 0%;

}

.top-main-bnr_cafe{
position: absolute;
width: 100%;
max-width: 180px;
top:250px;
z-index:5;
right:-110px;
}

.theater{
	margin-bottom: 50%;
}

.top-main-bnr_left{
position: absolute;
width: 100%;
max-width: 180px;
top:270px;
z-index:5;
left:-110px;
}






.icon-wrapper{

position: absolute;
left: 50%;
transform: translate(-50%, 0%);
z-index:9;
top:1190px;

 display: flex;
justify-content: center;
}

.icon{
height: 17px;
margin:0 10px;
}

.icon img{
height:100%;
}


.footterBnr-wrapper{
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
z-index:6;
top:950px;
width:100%;
 display: flex;
 flex-wrap: wrap;
/*justify-content: space-between;*/
justify-content: center;
	
}



.footterBnr{
	width:15%;
	margin:0.1em 0.2em;
	max-width: 160px;
}

.footterBnr img{
	width:100%;
	
}


@media screen and (max-width: 750px) {
    
    .top-main-wrapper{
    height: auto;
    }

.footterBnr-wrapper{

position: relative;
width:95%;
max-width: 500px;
right:auto;
left: 50%;
transform: translate(-50%, 0%);
top:0;
margin-bottom: 2rem;
	
display: flex;	
flex-wrap: wrap;
justify-content: space-between;	
}
	
.footterBnr{
	width:48%;
	margin:0em 0.2em;
	max-width: 170px;
}
	
	}

@media screen and (max-width: 960px) {

.top-main-bnr_cafe{
max-width: 170px;
top:470px;
right:0px;
}
	
	.theater{
	margin-bottom: 0%;
}
	
	.top-main-bnr_left{
max-width: 170px;
top:480px;
left:0px;
}

}

@media screen and (max-width: 750px) {


.top-main{
width: 100%;
top:0px;
position: relative;
z-index:2;
}



.sp-trailer{
	position: relative;
	/*z-index: 999;*/
	width: 100%;
	background-color: hsla(359,86%,38%,1.00);
	margin-bottom: 1rem;
}

.top-main-bnr_cafe{
position: relative;
width:95%;
max-width: 500px;
right:auto;
left: 50%;
transform: translate(-50%, 0%);
top:0;
margin-bottom: 2rem;
	
display: flex;	
flex-wrap: wrap;
justify-content: center;
/*justify-content: space-between;	*/
}
	
	
	
.top-main-bnr_item{
	width: 47%;
	margin:0.3em;
}
	.top-main-bnr_item.theater{
		width: 100%;
	margin:0.3em;
	}

.top-main-base{
height:200px;	
}

.top-main-upCast{
width: 90%;
top:8%;

}

.top-main-copy{
width: 10%;
right: 20%;
top:15%;
}

.top-main-top_04{
width: 75%;
top:57%;
}

.top-main-top_05{
width: 98%;
top:72%;
}

.top-main-top_06{
width: 95%;
top:92%;
}
    
    .top-main-top_06b{
width: 95%;
top:92%;
}
	
	.top-main-top_07{
width: 70%;
top:47%;
}

.icon-wrapper{

top:100%;
}




}


@media screen and (max-width: 500px) {

/*.top-main-bnr_cafe{
width:70%;
max-width: 300px;
margin-top:160%;
}

.top-main-top_04{
width: 70%;

}

.top-main-top_05{
width: 98%;
margin-top:125%;
}

.top-main-top_06{
width: 96%;
margin-top:145%;
}*/

}








.base-index{

}



.base-story{
	background-image: url(../img/story_base.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}


.text-wrapper{
	justify-self: center;
	align-self: center;
 
	padding: 15px 30px;
	background: rgba(0,0,0,0.4);
	color: #fff;
	width: 300px;
	text-align: center;

}


/*_________________page top*/





/*bookSlideArera*/

.commentSlideArea{
	position: relative;
	top: 0%;
	left: 0px;
	z-index: 10;
	width: 180px;
}

.commentBase{
	position: relative;
	
}

.commentBase img{
	width:100%;
	
}

.commentArea{
	position: absolute;
	top: 0px;
	left: 0px;
max-width: 170px;
	width:100%;
	height:100%;

}

.slider-commetContainer{
	position: absolute;
	top: 40px;
	left: 7px;
	right: 0;
	width:100%;
	padding:0 5px;
	/*margin: auto;*/
/*	max-width: 164px;*/
/*	background-color: hsla(359,55%,32%,1.00);*/
}


.commentName{
    font-size: 17px;
    line-height: 1em;
    text-align: center;
    margin-bottom: 0.3em;
    font-weight: 900;
    color: #FF0178;
	font-family: "ten-mincho";
	font-weight: 400;
}

.commentName2{
	line-height: 1em;
	font-size: 11px;
	text-align: center;
	margin-bottom: 0.5em;
	color: #000;
	font-family: "ten-mincho";
	font-weight: 400;
	
}

.commentText{
	font-size: 11px;
	line-height: 1.4em;
	/*font-weight: 700;*/
	color: #000;
}

.commentText .blue{
    font-size: 110%;
    color: #0054B7;/*font-weight: 700;*/
}

a .commentTextSet {

}

.commentText:hover {
    color: #292929;
}


.slider-commetContainer.initialized {
  display:block;
}
.slider-commetContainer .slider {
  margin: 0 0px;
  overflow: hidden;
}
.slider-commetContainer .slick-list {
  /*margin-right: -6px;*/  /* ガター分ネガティブマージン */
}






@media screen and (max-width: 960px) {
.commentSlideArea{
	position: relative;
	top: 0%;
	left: 0px;
	z-index: 10;
	width: 170px;
}
	
	.commentArea{
	position: absolute;
	top: 0px;
	left: 0px;
max-width: 155px;
	width:100%;
	height:100%;

}
	
	.commentText{
	font-size: 10.5px;
	line-height: 1.3em;
	/*font-weight: 700;*/
	color: #000;
}

}


@media screen and (max-width: 750px) {
.commentSlideArea{
	position: relative;
	bottom: auto;
	left: 0px;
	right:0px;
	z-index: 1;
	width: 95%;
	padding:0px;
	margin:0 auto 2em auto;
}
	
	.commentArea{
	position: absolute;
	top: 0px;
	left: 0px;
	right:0px;
max-width:100%;
	width:100%;
	height:100%;
	/*	background-color: hsla(359,55%,32%,1.00);*/

}

.slider-commetContainer{
	position: absolute;
	top: 20%;
	left: 4px;
	right: 0px;
	width: 100%;
	padding: 0 20px;
	/*background-color: hsla(263,77%,44%,1.00);*/	/*margin: auto;*/
/*	max-width: 164px;*/
/*	background-color: hsla(359,55%,32%,1.00);*/
}
	
	.commentName{
	font-size: 26px;
	line-height: 1.4em;
	text-align: center;
	margin-bottom: 0.3em;
	font-weight: 900;

}

.commentName2{
	line-height: 1em;
	font-size: 15px;
	text-align: center;
	margin-bottom: 1em;

	
}

.commentText{
		text-align: left;
	font-size: 16px;
	line-height: 1.6em;


}
	
}



/*about*/

.aboutArea{
    position: relative;
    background-image: url(../img/about_base.png);
    background-repeat: repeat-x;
    line-height: 0;
}

.aboutImg{
      line-height: 0;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}




/*@media screen and (min-width: 1281px) {
}*/

@media screen and (min-width: 1101px) {
}

@media screen and (min-width: 961px) {
}



.top-bnr-area {
    position: absolute;
    right: 0%;
    top: 13%;
    width: 25%;
    max-width: 300px;
  
}

.top-bnr {
    width:100%;
}


.spBnr-area{
    line-height: 0;
}

.spBnr{
   width:80%;
    margin:auto;
    padding-top:1rem;
}






/*________________________scene-introduction*/




.base-introduction{
    position: relative;
    background-color: hsla(0,0%,0%,1.00);
    background-image: url(../img/pc_base.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;
    line-height: 0;
    background-position: center center;
    background-repeat: repeat-y;
    
   
}


.introduction-main-wrapper {
    /* background-color: hsla(0,0%,0%,1.00);
    background-image: url(../img/pc_base.jpg);
    background-size: cover;*/
    position: relative;
    z-index: 10;
    overflow: auto;
    width: 100vw;
    height: 100vh;  
}

.introduction_01 {
    width: 100%;
    position: relative;
    z-index: 0;
    /*background-color: hsla(0,0%,0%,1.00);  */  
  /*  overflow: auto; */
}
@media screen and (max-width: 750px) {
  .introduction_01 {
   background-color: hsla(0,0%,0%,1.00);
    background-image: url(../img/pc_base.jpg);
    background-size: cover;  

}  
}

.introduction_02 {
    width: 100%;
    position: absolute;
    z-index: 10;
  /*  overflow: auto; */
}

.introduction_03 {
    width: 100%;
    position: absolute;
    z-index: 20;
/*    overflow: auto; */
}

.character-main-wrapper {
    position: relative;
    z-index: 10;
    /* overflow: auto;*/
    width: 100%;
   
}


.character_01{ background-image: url(../img/character_01.jpg);}
.character_02{ background-image: url(../img/character_02.jpg);}
.character_03{ background-image: url(../img/character_03.jpg);}
.character_04{ background-image: url(../img/character_04.jpg);}
.character_05{ background-image: url(../img/character_05.jpg);}
.character_06{ background-image: url(../img/character_06.jpg);}

.fullHeight img {
    height:100%;
}

.slick-fullHeight {
     max-width: 100%;
    max-height: 100%;
    height: 100vh;
    width: auto\9; /* ie8 */
    margin: 0 auto;
    
        background-repeat: no-repeat;
    background-position: center 0%;
    background-size: cover;
}

.slick-fullHeight img {
    height:100%;
}

.slick-slide:focus {
  outline: none;
}


@media screen and (max-width: 480px) {
    .slick-fullHeight {
 height: 80vh;
    
}
    
}


/*slick arrow
*/
.slick-prev::before {
    content: '';
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url(../img/arrow_l.png);
    background-size: contain;
    vertical-align: middle;
}
.slick-next::before {
    /* content: url(../img/common/arrow-right.png);*/
    content: '';
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url(../img/arrow_r.png);
    background-size: contain;
    vertical-align: middle;
}
.slick-prev {
    width: 80px;
    height: 80px;
    left: 0px;
}
.slick-next {
    width: 80px;
    height: 80px;
    right: 0px;
}

@media (max-width: 450px) {
.slick-prev::before {
    width: 40px;
    height: 40px;
}
.slick-next::before {
    width: 40px;
    height: 40px;
}
.slick-prev {
    width: 40px;
    height: 40px;
    left: 0px;
}
.slick-next {
    width: 40px;
    height: 40px;
    right: 0px;
}
    
  .slick-slide:not(.slick-center) {
      
  /*     -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: 0.2s linear;*/
      
  -webkit-filter: opacity(70%);
  -moz-filter: opacity(70%);
  -o-filter: opacity(70%);
  -ms-filter: opacity(70%);
  filter: opacity(70%);
  transition: 0.2s linear;
}
}