@charset "utf-8";

/****************************************
Smart phone BASE 767
*****************************************/
@media screen and (max-width:767px){
body{min-width:100%;}
.sp_view{display: block;}
.pc_view{display: none;}

/*--------------------------
COMMON
--------------------------*/
#wrapper {
	min-width: initial;
}
	
#wrapper img{
	max-width: 100%;
}

	
.ttl_pc {
	padding: 15% 0 5% 0;
	margin: 0 auto;
	width: 100%;
	/*font-family: 'Red Hat Display' , san-serif;
	font-weight: 500;
	font-size: 1.7rem;
	letter-spacing: 0.25em;
	color: #43679e;*/
}
.ttl_sp {
text-align: center;
margin: 10% 0;
}

.underline_nv {
	border-top: #43679e solid 1px;
	padding-top: 13px;
}

h1 {
	font-size: 1.7rem;
	letter-spacing: 0.15em;
	font-weight: 300;
	line-height: 1.8em;
	color: #0037ee;
}

h2 {
	font-size: 2.2rem;
	letter-spacing: 0.15em;
	font-weight: 500;
	line-height: 2.0em;
	color: #0037ee;
}

	
p {
	font-size: 1.5rem;
	letter-spacing: 0.05em;
	line-height: 1.8em;
	color: #FFFFFF;
	font-family: 'Noto sans JP', sans-serif;
	font-weight: 500;
}
	
	span br {
		display: inline;
	}
	


/*--------------------------
Top
--------------------------*/
	
#top_container_sp {
	padding-top: 60px;
	position: relative;
	width: 100%;
	margin: 0%;
	background: #000000;

}

#top_container_sp img {
	width: 100%;
	vertical-align: top;
}
	
#top_sp_bottom {
	padding: 5% 0 10% 0;
	width: 100%;
	text-align: center;
}

#top_sp_bottom img {
	width: 80%;
}

#top_sp_bottom img:nth-of-type(2) {
	margin: 5% 0;
}
	
/*--------------------------
Top - Banner
--------------------------*/
	
	#intheater{
		width: 90%;
		margin: 5% auto 5% auto;
	}

/*--------------------------
Top - Banner
--------------------------*/
#banner ul {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content:center;
	list-style-type: none;
	margin: 5% auto;

}

#banner ul li{
	width: 90%;
	margin: 2% 0;
}

#banner ul li img {
	width: 100%;
}	

	.bnr {
		width: 90%;
		margin: 0 auto;
	}

.bnr_sp_bd_dvd {
	width: 90%;
	margin: 5% auto 5% auto;
}

.bnr_sp_bd_dvd img {
	width: 250%;
}
	
/*--------------------------
Trailer
--------------------------*/
#trailer_pc {
    background: url("../img/trailer_bg.jpg") no-repeat;
    background-position:center center;
    background-size:cover;
}
	


#trailer_pc p {
    text-align: center;
}

.trailer_container {
    width: 100%;
    margin: 0 auto;
}
	
.trailer_container {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.trailer_container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#trailer_yt {
    margin: 0;  
}

#trailer_pc ul {
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 2% 10% 10% 10%;
	list-style-type: none;
	color: #FFFFFF;
}
#trailer_pc ul li {
	margin: 0 0;
    /*border: #be8655 1px solid;*/
    padding: 10px 0;
    font-size: 1.5rem;
}

#trailer_pc ul li a {
    color: #be8655;
    font-weight: 500;
}

/*--------------------------
ムビチケ
--------------------------*/

#widgets_ticket {
	width: 100%;
	padding: 0 0 10% 0;
}

#mvtk-widgets-container {
	text-align: center;
	margin: 0 auto;
}

/*--------------------------
Intro
--------------------------*/

#intro_container_pc {
/*	background: #EEFCFF;*/
	padding-top: 50%;;
	width: 100%;
	position: relative;
	background: url("../img/intro_bg.jpg") no-repeat;
	background-size: cover;
	background-position: top right 50%;
	/*border-bottom: #000000 solid 15px;*/
	
}

#intro_ttl_sp {
	margin-bottom: 10%;
}

#intro_ttl_sp img {
		width: 70%;
}
	
#intro_header_sp {
	width: 100%;
	margin-bottom: 5%;
}

#intro_header_sp img {
	
	width: 100%;
}

#intro_container_inner{
	width: 80%;
	margin: 0 auto 0 auto;
	padding:0 0 10% 0;
}


#intro_photo {
	width: 100%;
}

#intro_photo img {
	width: 100%;
}
/*--------------------------
Story
--------------------------*/

#story_container_pc {
/*	background: #EEFCFF;*/
	padding-top: 20%;
	width: 100%;
	position: relative;
	background: url("../img/story_bg.jpg") no-repeat;
	background-position: center bottom;
	background-size: cover;
	border-bottom: #000000 solid 15px;
}


#story_ttl_pc {
	margin-bottom: 10%;
}
	
#story_ttl_pc img {
	width: 35%;
}

#story_header_pc {
	width: 100%;
	margin-bottom: 5%;
}

#story_header_pc img {
	
	width: 100%;
}


#story_container_inner{
	width: 80%;
	margin: 0 auto 0 auto;
	padding:0 0 40vh 0;
}

	

/*--------------------------
Cast
--------------------------*/

#cast_ttl_pc {
	margin-bottom: 10%;
	width: 90%;
	margin: 0 auto;
}
	
#cast_ttl_pc img {
	width: 28%;
}
	
#cast_container_pc {
	width: 100%;
	padding-top: 0%;
	background: url("../img/cast_bg.jpg") no-repeat;
	background-position: center center;
	background-size: cover;
}

#cast_container_inner {
	width: 90%;
	margin: 0 auto;
}

#cast_container_inner ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content:flex-start;
	list-style-type: none;
	margin: 10% auto 0 auto;
	padding-bottom: 10%;
	
}

#cast_container_inner ul li {
	width: 50%;
	margin:0 0 12% 0;
}

#cast_container_inner ul li:nth-of-type(1) {
	width: 100%;
	margin-bottom: 5%;
}

#cast_container_inner ul li img {
	width:100%;
}


/*--------------------------
Staff
--------------------------*/

	
#staff_ttl_pc {
	margin-bottom: 10%;
	width: 100%;
	margin: 0 auto;
}
	
#staff_ttl_pc img {
	width: 33%;
}


#staff_container_pc {
	width: 100%;
	padding-top: 5%;

}

#staff_container_pc {
	width: 80%;
	margin: 0 auto;
}

#staff_container_inner ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content:flex-start;
	list-style-type: none;
	margin: 10% auto 0 auto;
	padding-bottom: 10%;
	
}

#staff_container_inner ul li {
	width: 100%;
	margin:0 0 10%x 0;
}



#staff_container_inner ul li img {
	width:100%;
}
	
/*--------------------------
Footer
--------------------------*/

#footer {
	width: 100%;
	height: 40%;
	background: url("../img/footer_bg.jpg") no-repeat;
	background-size: cover;
	background-position: right top;
	position: absolute;
	margin: 0;
	padding: 0;
}

#footer_credits {
	margin: 0 auto;
	width: 90%;
	position:absolute;
	bottom:10%;
	left:50%;
	transform:translateX(-50%);
}

#footer_credits img {
	width: 100%;
	margin: 0;
	padding: 0;
}


/*--------------------------
NAVIGATION
--------------------------*/
/* グルーバルメニュー */
nav.globalMenuSp {
    position: fixed;
    z-index: 100;
    top: 0;
    /*right: 0;*/
    left: 0;
    height: 100%;
    overflow: auto;
    background: #C4C4C4;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

nav.globalMenuSp ul {
    background: #C4C4C4;
    margin: 0 auto;
    padding: 70px 0 0 0 ; 
    width: 100%;
	text-align: center;
	list-style-type: none;
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 0.2em;
	color: #000000;
}

nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 10px 0 0 0;
    width: 100%;
    
}

nav.globalMenuSp ul li a {
    display: block;
    color: #000000;
    padding: 1em 0;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0);
}
	
	
nav.globalMenuSp ul li:nth-child(2) {
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;

}
	
	nav.globalMenuSp ul li a div.nav_news:nth-child(1) {
		margin-right: 10px;
	}

.overflowHidden {
    overflow: hidden;
}
/* ハンバーガー */
.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 17px;
    top: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 200;
    text-align: center;
}

.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 40px;
    
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 0;
}

.navToggle span:nth-child(1) {
    top: 0px;
	border-bottom: solid 3px #000000;
}

.navToggle span:nth-child(2) {
    top: 9px;
	border-bottom: solid 3px #000000;
}

.navToggle span:nth-child(3) {
    top: 18px;
	border-bottom: solid 3px #000000;
}

.navToggle span:nth-child(4) {
    top: 32px;
	left: 1px;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size:1.3rem;
	letter-spacing: 0.1em;
	color: #000000;
}


/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 13px;
    left: 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 13px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}


}