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


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 960px) {
.pc { display: none !important; }
.sp { display: block !important; }
}


body {
 background: #fff;
 font-family: "游ゴシック体", YuGothic;
}


img{
	max-width: 100%;
	height: auto;
}


.anchor{
	height: 50px;
}

/*------------------
NAVIGATION
------------------*/

.navigation{
	z-index: 666;
	position: fixed;
	display: flex;
	width: 100%;
	height: 50px;
	background: transparent;
	text-align: center;
}

.nav_items{
   background: #009fe8;
	width: 100%;
	height: 50px;
	display: flex;
	position: fixed;
	justify-content: center;
	align-items: center;
	z-index: 3;
}

.na{
width: 80%;	
}

.nav_item{
	padding: 1px 10px 1px 10px;
	font-size: 1.2rem;
	font-weight: bold;
	list-style-type: none;
}

.nav_item:hover{
	cursor: pointer
}


.nav_item a{
	font-weight: bold;
	cursor: pointer;
}


.nav_item-gaibu{
	font-size: 1.6rem;
	padding-left: 5px;
}



.nav_item2{
	position: absolute;
	right:0;
	padding: 1px 6px 1px 6px;
	font-size: 1.2rem;
	font-weight: bold;
	list-style-type: none;
}

.nav_item2:hover{
	cursor: pointer
}

.nav_item2 a{
	font-weight: bold;
	cursor: pointer;
}


.sns_items{
	display: flex;
	justify-content: center;
	align-items: center;
}

.sns_item{
	padding: 0 7px 0 7px;
	font-size: 1.7rem;
	color: #fff;
}

li {
  list-style: none;
}

.pc-only{
	display: block;
}

.sp-only{
	display: none;
}






.top-m li {
	display:inline-block;
	margin: 12px 10px;
	color: #fff;
	font-size: 24px;
	
}

.top-m li a{
	text-decoration:none;
	color: #000;
}

.top-m li a:hover{
	color: gray;
}


.bnr{
background: url("../img/bnr_bg.jpg");
background-position: center top;
background-size: cover;	
padding-right: 10px;
padding-left: 10px;
}



.top_con{
	display: grid;
	grid-template-columns: 335px 335px 335px;
	gap:35px;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin: 0 auto; 
}

.top_con2{
	display: grid;
	grid-template-columns: 158px 158px;
	gap:45px;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin: 0 auto; 
}


.top_con3{
	display: grid;
	grid-template-columns: 335px 335px;
	gap:35px;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin: 0 auto; 
}


.wrapp {
 position: relative;
 max-width: 1300px;
 text-align: center;
 margin: 0 auto;
}



.moji{
	display: inline-block;
	color: #009fe8;
	font-size: 25px;
	font-weight: 700;
}



.wrapp2 {
 position: relative;
 max-width: 800px;
 text-align: center;
 margin: 0 auto;
}






.intro_main {
 text-align: center;
 max-width: 1920px;	
 background-color: #fff;
}



.story{
text-align: center;
 max-width: 1920px;	
 background-color: #a9222c;
}



.cast{
background: url("../img/c/cast_bg.jpg");
background-position: center top;	
}



/*------------------
コメント
------------------*/

.img_wrap{
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.8;
  transition-duration: 0.3s;
}



.comment{
background: #fff;
text-align: center;
padding:20px 20px;
font-size: 20px;
}

.mo_wrap :not(img){
width: 800px;
font-size: 1.2rem;
font-weight: bold;
line-height: 140%;
text-align: left;
letter-spacing: 1px;	
}



.cont{
padding-top: 50px;
}

  iframe {
	border: none;
	height: 100vh;
	width: 100%;
	}


.staff{
background: url("../img/staff_img_1920_1470.jpg");
background-position: center top;	
}


.staff2{
text-align: center;
 max-width: 1920px;	
 background-color: #fffad9;
}



.author{
text-align: center;
 max-width: 1920px;	
 background-color: #ffffff;
}


footer{
text-align: center;
 max-width: 1920px;	
 background-color: #a9222c;
}



/*--------------------
TRAILER
--------------------*/

.trailer{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999999999;
    opacity: 0;
    display:none;
    transition-duration: 0.5s;
    
}

.trailer.on{
    opacity: 1;
}


.trailer_overlay{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.79);
    opacity: 1;
    z-index: 999999997;
    transition-duration: 1s;
    
}

.close_btn{
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  z-index: 999999999;
  transition-duration: 0.1s;
  opacity: 0;
  cursor: pointer;
}



.trailer.on .close_btn{
     opacity: 1;
}
.close_btn::before,
.close_btn::after {
  position: absolute;
  top: calc(50% - 1px);
  left: -1px;
  content: "";
  display: block;
  width: 30px;
  border-top: 1px solid #fff;
}
 
.close_btn::before {
  transform: skewY(-45deg);
}
 
.close_btn::after {
  transform: skewY(45deg);
}

.close_btn:hover{
    opacity: 0.5 !important;
}

.trailer.on .trailer_overlay{
    opacity: 1;
}

.trailer .trailer_inner{
    position: absolute;
    top: calc(50% - 30px);
    left: 50%;
    transform: translate(-50%,-50%) scale(0.9,0.9);
    width: 53%;
	padding-bottom: 30%;
    height: 1;
    z-index: 999999998;
    transition-duration: 0.5s;
}

.trailer.on .trailer_inner{
    transform: translate(-50%,-50%) scale(1,1);
}

.trailer_tab{
    position: absolute;
    color: #fff;
    top: 100%;
    display:flex;
    width: 100%;
    justify-content: center;
}

.trailer_tab li{
	display: flex;
	justify-content: center;
    width: 30%;
	margin: 15px 20px;
	padding: 10px;
    border:solid 1px #fff;
    font-size: 1.2rem;
    text-align: center;
    background:#fff;
    color: #333;
	border-radius: 4px;
}

.trailer_tab li.f_act{
    background: #000;
    color: #fff;
	cursor: pointer;
}

.trailer_tab li.f_act:hover{
    background: #aaa;
}

#youtube1,#youtube2{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1,1);
    transition-duration: 1s;
    opacity: 1;
}

.trailer.on #youtube1,.trailer.on #youtube2{
    transform: scale(1,1);
    opacity: 1;
}

#youtube{  
}
#youtube2{
    display:none;
}





/*------------------
TopBTN
------------------*/

.btn-pageTop{
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(169,34,44,0.5); 
	border-radius: 50%;
	z-index: 888;
}

.btn-pageTop:hover{
	background: #fdfca0;
	transform: scale(1.1);
	transition: 0.2s;
}

.top_btn_inner{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
}


.btn-pageTop a{
	color: #fff;
}

a:hover .btn-pageTop {
	cursor: pointer;
	color: #a9222c;
}

.btn-pageTop a:active{
}


a{
color: #fff;
}

.sns {
	z-index: 70;
	display: flex;
	justify-content: center;
	align-items: center;
}

.item{
	padding: 8px;
	justify-content: center;
	align-items: center;
}





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

html,body{
font-family: sans-serif;
min-width: auto;
-webkit-overflow-scrolling: touch;

}
	
img{
	width:auto;
    height:auto;
}

	
.news{
background: url("../img/bnr_bg_mbl.jpg");
background-position: center top;
background-size: cover;	
}
	
	
	
.top_con5{
	display: grid;
	grid-template-columns: 50% 50%;
	gap:10px;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin: 0 auto; 
}	
	
.top_con6{
	display: grid;
	grid-template-columns: 50%;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin: 0 auto; 
}		
	
	
.top_con7{
	display: grid;
	grid-template-columns: 80%;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin: 0 auto; 
}
	
	
.moji{
	color: #009fe8;
	font-size: 20px;
	font-weight: 700;
}	
	

	
/*--------------------
navigation
--------------------*/
	

.social_item{
	padding: 5px 10px 5px 10px;
}
	

	
.nav_item a{
	color: #ffcc00;
	text-decoration: none;
}		
		

.top-wra{
	position: relative;
	text-align: center;
   z-index: 100;		
	}	
	
.top_con2{
	display: grid;
	grid-template-columns: 158px 158px;
	gap:25px;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin: 0 auto; 
}	
	
	
	
.wrapp {
 position: relative;
 width: 400px;
 text-align: center;
 margin: 0 auto;
}
	
.sec{
	padding-right: 10px;
	padding-left: 10px;
	}	
	
	
.sec2{
	padding-right: 40px;
	padding-left: 40px;
	}		
	
.intro3 {
position:relative;
min-height: 950px;
margin: 0 auto;
}
	
	
.sec3{
	padding-right: 20px;
	padding-left: 20px;
	}	
	
	
	

	

	
	
.cast{
background: url("../img/c/cast_bg_mbl.jpg");
background-position: center top;
background-size: cover;
}
	


.staff{
background: url("../img/staff_img_mbl.jpg");
background-position: center top;
background-size: cover;
}




/*--------------------
TRAILER
--------------------*/

.trailer{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999999999;
    opacity: 0;
    display:none;
    transition-duration: 0.5s;
    
}

.trailer.on{
    opacity: 1;
}


.trailer_overlay{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.79);
    opacity: 1;
    z-index: 999999997;
    transition-duration: 1s;
    
}

.close_btn{
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  z-index: 999999999;
  transition-duration: 0.1s;
  opacity: 0;
  cursor: pointer;
}



.trailer.on .close_btn{
     opacity: 1;
}
.close_btn::before,
.close_btn::after {
  position: absolute;
  top: calc(50% - 1px);
  left: -1px;
  content: "";
  display: block;
  width: 30px;
  border-top: 1px solid #fff;
}
 
.close_btn::before {
  transform: skewY(-45deg);
}
 
.close_btn::after {
  transform: skewY(45deg);
}

.close_btn:hover{
    opacity: 0.5 !important;
}

.trailer.on .trailer_overlay{
    opacity: 1;
}

.trailer .trailer_inner{
    position: absolute;
    top: calc(50% - 30px);
    left: 50%;
    transform: translate(-50%,-50%) scale(0.9,0.9);
    width: 80%;
	padding-bottom: 45%;
    height: 1;
    z-index: 999999998;
    transition-duration: 0.5s;
}

.trailer.on .trailer_inner{
    transform: translate(-50%,-50%) scale(1,1);
}

.trailer_tab{
    position: absolute;
    color: #fff;
    top: 100%;
    display:flex;
    width: 100%;
    justify-content: center;
}

.trailer_tab li{
	display: flex;
	justify-content: center;
    width: 30%;
	margin: 10px 15px;
	padding: 10px;
    border:solid 1px #fff;
    font-size: 1.3rem;
    text-align: center;
    background:#fff;
    color: #333;
	border-radius: 4px;
}

.trailer_tab li.f_act{
    background: #000;
    color: #fff;
	cursor: pointer;
}

.trailer_tab li.f_act:hover{
    background: #aaa;
}

#youtube1,#youtube2{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1,1);
    transition-duration: 1s;
    opacity: 1;
}

.trailer.on #youtube1,.trailer.on #youtube2{
    transform: scale(1,1);
    opacity: 1;
}

#youtube{  
}
#youtube2{
    display:none;
}
		
	
*{
    margin: 0 auto;
    padding: 0;
}	
	
	#logo_loader .f_logo {
    position: absolute;
    top: -150px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: auto;
    height: 70%;
    text-align: center;
    color: #fff;
}
	
#logo_loader .f_logo img {
    width: auto;
    height: 100vh;
}

.cont2{
padding-top:0px;
}	
	
	
}