@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.05em;
	line-height: 2.0em;
	color: #FFFFFF;
	font-family: 'Noto Serif JP', 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;
}
	


/*--------------------------
Glitch SP
--------------------------*/

.glitch_container {
  --glitch-width: 100%;
  --glitch-height: 70vh;
  --gap-horizontal: 10px;
  --gap-vertical: 5px;
  --color-title: #fff;
  --time-anim: 4s;
  --delay-anim: 2s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: none;
  --blend-mode-4: overlay;
  --blend-mode-5: overlay;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: transparent;
  --blend-color-4: transparent;
  --blend-color-5: #000000;
	padding-top: 70px;
	background: #000000;
}

/* Glitch styles */
.glitch {
	position: relative;
	width: var(--glitch-width);
	height: var(--glitch-height);
	overflow: hidden;
	margin: 0 auto;
	
}

.glitch__img {
  position: absolute;
  top: calc(-1 * var(--gap-vertical));
  left: calc(-1 * var(--gap-horizontal));
  width: calc(100% + var(--gap-horizontal) * 2);
  height: calc(100% + var(--gap-vertical) * 2);
  background: url("../img/top_photo_sp.jpg") no-repeat 50% 0;
  background-color: var(--blend-color-1);
  background-size: contain;
  transform: translate3d(0,0,0);
  background-blend-mode: var(--blend-mode-1);
}
	
/*--------------------------
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: 80%;
		margin: 0 auto 5% auto;
		text-align: center;
	}
	
	
/*--------------------------
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
--------------------------*/

#youtube_wrap {
	position: relative;
	height: 50vh;
	width: 100%;
	background: #000000;
}

#over_btn {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: 50;
}

#over_line {
	background: repeating-linear-gradient(-45deg,#000000 0,#000000 2px,transparent 2px,transparent 6px);
	width: auto;
    height: 50vh;
	opacity: 0.2;
	z-index: 5;
}

#youtube {
	z-index: 1;
}
/*--------------------------
Intro
--------------------------*/	
	#intro_container_ttl_sp {
		width: 90%;
		margin: 10% auto 5% auto;
	}
	
	#intro_container_ttl_sp img {
		width: 50%;
		vertical-align: top;
	}
	
	#intro_container_txt_sp {
		width: 100%;
		margin: 0 auto;
		/*background: url("../img/intro_bg_sp.jpg") no-repeat;
		background-size: contain;*/
	}
	
	#intro_container_txt_sp p {
		width: 80%;
		padding-top: 0%;
		margin: 0 auto;
	}
	
	

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

	#story_container_sp {
		padding: 10% 0;
	}
	
	#story_container_ttl_sp {
		width: 90%;
		margin: 10% auto 5% auto;
	}
	
	#story_container_ttl_sp img {
		width: 50%;
		vertical-align: top;
	}
	
	#story_container_hl_sp {
		width: 80%;
		margin: 0 auto 5% auto;
	}
	
	#story_contaner_top_txt, #story_contaner_mid_txt {
		display: flex;
		flex-direction: row;/*子要素を縦並び or 横並び*/
		flex-wrap: wrap;
		align-items: flex-start;/*垂直方向の揃え*/
		justify-content:space-between;/*水平方向の揃え*/
		list-style-type: none;
		width: 80%;
		margin: 0 auto 3% auto;
	}
	
	#story_contaner_top_txt, #story_contaner_top_txt {
		
	}
	
	#story_contaner_top_txt_left, #story_contaner_mid_txt_right {
		width: 85%;
	}
	
	#story_contaner_top_txt #story_contaner_top_txt_left p {}
	
	#story_contaner_top_txt_right, #story_contaner_mid_txt_left {
		width: 10%;
	}
	
	#story_contaner_top_photo, #story_contaner_mid_photo {
		width:100%;
		margin: 0 0 5% 0;
	}
	
	#story_contaner_top_photo img, #story_contaner_mid_photo img {
		width:100%;
	}
	
	#story_container_btm {
		width: 100%;
		margin: 0 auto;
	}
	
	#story_contaner_btm_txt p {
		width: 80%;
		margin: 0 auto;
	}
	
	#story_container_bg_sp img {
		vertical-align: top;
	}
	
	

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

	#cast_container_sp {
		padding: 0 0 10% 0;
		background: url("../img/caststaff_bg.jpg") no-repeat;
		background-size: cover;
	}
	
	#cast_container_ttl_sp {
		width: 90%;
		margin: 10% auto 5% auto;
	}
	
	#cast_container_ttl_sp img {
		width: 50%;
		vertical-align: top;
	}
	
	
#cast_container_inner_sp {
	width: 80%;
	margin: 0 auto;
}

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

#cast_container_inner_sp ul li {
	width: 50%;
	margin:7% 0;
}

/*#cast_container_inner_sp ul li:nth-of-type(1) {
	width: 50%;
	margin:0 0 7% 0;
}
*/
	
	
	#staff_container_sp {
		padding-top: 0;
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content:center;
		list-style-type: none;
		margin: 5% auto;
		position: relative;
	}

	#staff_container_sp #staff_container_left_sp {
		width: 100%;
		margin: 7% 0;
	}

	#staff_container_sp #staff_container_left_sp img {
		width: 100%;
	}

	#staff_container_sp #staff_container_right_sp {
		width: 100%;
	}

	#staff_container_sp #staff_container_right_sp p {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.2rem;
		font-weight: 400;
	}

	#staff_container_sp #staff_container_right_sp img {
		margin-bottom: 5%;
		object-fit: cover;
		object-position: top;
		width: 100%;
		height: 30vh;
	}

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

#footer_sp {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

#footer_sp img {
	vertical-align: top;
}



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

nav.globalMenuSp ul {
    background: #000000;
    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: #c00202;
}

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

nav.globalMenuSp ul li a {
    display: block;
    color: #c00202;
    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: 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 #c00202;
}

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

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

.navToggle span:nth-child(4) {
    top: 33px;
	left: 1px;
	text-align: center;
	font-family: 'Bodoni Moda', serif;
	font-weight: 700;
	font-size:1.2rem;
	letter-spacing: 0.1em;
	color: #c00202;
}


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


}