@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.3rem;
	letter-spacing: 0.1em;
	line-height: 2.0em;
	color: #333333;
	font-weight: 400;
}
	
	span br {
		display: inline;
	}

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

nav.globalMenuSp ul {
    background: #FFFFFF;
    margin: 0 auto;
    padding: 70px 0 0 0 ; 
    width: 100%;
	text-align: center;
	list-style-type: none;
	font-family: Red Hat Display , san-serif;
	font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 0.2em;
	color: #80522c;
}

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

nav.globalMenuSp ul li a {
    display: block;
    color: #80522c;
    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: 20px;
    top: 25px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 3;
    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 #80522c;
}

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

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

.navToggle span:nth-child(4) {
    top: 33px;
	left: 1px;
	text-align: center;
	font-family: Red Hat Display , san-serif;
	font-weight: 700;
	font-size:1.2rem;
	letter-spacing: 0.1em;
	color: #80522c;
}


/* 最初の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);
}


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

}

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

#top_sp_bottom img {
	width: 90%;
}

#top_sp_bottom img:nth-of-type(2) {
	margin: 4% 0;
}
	

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

}

.bnr ul li{
	width: 90%;
	margin: 2% 0;
}

.bnr ul li img {
	width: 100%;
}	

	.bnr {
		width: 100%;
		margin: 0 auto;
	}
	
/*--------------------------
Top - News
--------------------------*/

#top_news_bg {
	background: #EEFCFF;
}

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

#top_news_bg h1 {
	font-size: 2.0rem;
	letter-spacing: 0.15em;
	font-weight: 900;
	line-height: 2.2em;
	color: #005081;
	font-family: 'Red Hat Display';
	text-align: left;
	padding: 50px 0 30px 10%;
}

#top_news_bg h1 span {
	border-bottom: solid 2px ;
	padding-bottom: 2px;
}

#blog_container_top_news .news {
	border-bottom: solid #E6EFF4 1px;
	padding: 25px 0;
	
}

#blog_container_top_news .news:first-child {
	border-bottom: solid #E6EFF4 1px;
	border-top: solid #E6EFF4 1px;
	margin-top:0;
}

#blog_container_top_news .news p {
	font-size: 1.2rem;
	font-weight: 400;
	font-family: 'Red Hat Display';
	letter-spacing: 0.15em;
	line-height: 1em;
	padding-bottom: 10
		px;
	color: #005083;
}

#blog_container_top_news .news h2 {
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	line-height: 1.8em;
	color: #005083;
}


/*--------------------------
Trailer
--------------------------*/
#trailer_container_sp {
	widows: 100%;
	padding:  10% 0;
}
.trailer_sp_inner {
	width: 90%;
	margin:0 auto 5% auto;
}
	
/*--------------------------
Intro
--------------------------*/

	#intro_container_bg_sp {
		width: 100%;
	}
	
	#intro_container_bg_sp img {
		width: 100%;
	}
	
#intro_container_inner{
	width: 	80%;
	margin: 0 auto 0 auto;
}
	
.ttl_hl_pc {
	padding: 0 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;*/
}


/*--------------------------
Story
--------------------------*/	

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

.story_container_photo {
	margin-top: 15%;
}

#story_container_bg {
	margin-top: 15%;
	width: 100%;
}

/*--------------------------
Cast & Staff
--------------------------*/

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

#cast_container_inner ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content:space-around;
	list-style-type: none;
	margin: 2% auto;
}

#cast_container_inner ul li {
	width: 100%;
	margin:7% 0;
}

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

#staff_container {
	width: 100%;
	margin: 0 auto;
}

#staff_container img {
	
	width: 100%;
	margin: 10% 0;
}

#staff_container_bg {
	margin-top: 10%;
	width: 100%;
}

#staff_container_bg img {
	width: 100%;
}

#staff_container p {
	font-size: 1.3rem;
	letter-spacing: 0.1em;
	line-height: 2.0em;
	color: #333333;
	font-weight: 400;
}

#profile_container {
	width: 100%;
	margin: 10% auto;
	background: #eee9e4;
}

#profile_container_inner {
	width: 100%;
	margin: 0 10%;
	padding: 10% 0;
}

	#marcel_prof, #klaus_prof {
		width: 80%;
	}
	
#profile_container_inner #marcel_prof img:nth-of-type(1) {
	width: 100%;
}

#profile_container_inner #marcel_prof img:nth-of-type(2) {
	margin: 30px 0;
}

#marcel_prof span {
	font-size: 1.2rem;
}

#marcel_prof p {
	margin: 0 0 30px 0;
	font-size: 1.5rem;
	letter-spacing: 0.15em;
	line-height: 1.5em;
	color: #333333;
	font-weight: 400;
}

#profile_container_inner #klaus_prof img:nth-of-type(1) {
	margin: 60px 0 30px 0;
}

#klaus_prof span {
	font-size: 1.2rem;
}

#klaus_prof p {
	margin: 0 0 30px 0;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	line-height: 2.0em;
	color: #333333;
	font-weight: 400;
}

	
/*--------------------------
Footer
--------------------------*/

#footer {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 10% 0 ;
}

#footer img {
	width: 80%;
}





}