@charset "utf-8";

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Site Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*          google fonts          */

/*          Site Contents          */
.sectionTop {
	position: relative;
	z-index: 4;
}
.bg {
	background: linear-gradient( 13deg,#19193c 0%,#00001e 100%);
	padding: 130px 0 100px;
}



.navibgBox {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     キービジュアル     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
.wrapper {
	
}
.wrapper::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(/img/top/filter.png) repeat center;
	z-index: 1;
}
.topMovieWrap {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.topMovieWrap.fix {
	position: fixed;
}
#topBgMovie {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
#topBgMovie #mp4 {
	width: 100%;
	top: 0%;
	bottom: 0;
	left: 0%;
	right: 0;
}

.topBox {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}
.keyvisual {
	margin: 0 0 0 auto;
	max-width: 780px;
	position: relative;
}
.keyvisual li {
	position: absolute;
	z-index: -1;
	top: 0;
	-webkit-transition: .3s ease-out;
	transition: .3s ease-out;
	opacity: 0;
}
.keyvisual li.on {
	position: relative;
	z-index: 1;
	opacity: 1;
}
.keyvisualButton {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	cursor: pointer;
}
.keyvisualButton .off {
	display: none;
}
.keyvisual .bgkeyvisual {
	width: 100%;
	height: 100%;
	background: url(/img/keyvisual/keyvisual_w.jpg)no-repeat;
	background-size : cover;
	background-position: 50% 0%;
}
.keyvisualBox {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.keyBtnBG {
	position: absolute;
	background: rgba(0,0,0,.4);
	-webkit-transition: .3s ease-out;
	transition: .3s ease-out;
}
.keyvisualButton li:hover .keyBtnBG {
	background: rgba(0,0,0,0);
}


.catchphrase {
	position: absolute;
	top: 30px;
	left: 60px;
}
.rightBox {
	width: 370px;
	background: #03172D;
	margin: 0 0 0 auto;
	position: relative;
}
.logoBox {
	padding: 30px 40px 117px;
	text-align: center;
	background: url(/img/top/logoBG.jpg)no-repeat;
	background-size: cover;
}
.logoBox img {
	margin: auto;
}
.logoBox .logo {
	padding: 30px 0 0;
}
.logoBox .roadshow {
	margin: auto;
	padding: 5px 14px 0 0;
}
.topicsBox {
	margin-top: -203px;
}
.movitickBox {
	display: block;
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 15px 0;
}
.theaterLink {
	padding-top: 0;
	text-align: center;
	position: relative;
}
.theaterLink a {
	margin: 5px 0;
	display: block;
}

.bt_topics {
	background: #00001e;
	position: relative;
}

.bt_topicsBox {
	width: 1200px;
	margin: auto;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 30px 0;
}
.bt_topicsBox a {
	width: 280px;
	display: block;
	margin: 0 10px;
}





/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     ムービー     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
#movie {
	position: relative;
	z-index: 6;
}
.movieWrap {
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
}
#youtubeBgMovie {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) skewY(13deg);
	-webkit-transform: translate(-50%, -50%) skewY(13deg);
	-ms-transform: translate(-50%, -50%) skewY(13deg);
	margin: auto;
	z-index: -1;
}
.movieWrap .trailerDot {
	width: 100%;
	height: 100%;
	background: rgba(0,0,139,.4);
}
.youtube {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 105px;
	height: 105px;
}
.youtube:hover {
	text-decoration: none;
}
.playBox {
	position: relative;
	top: -50px;
}
.playBox p {
	font-size: 3.3rem;
	text-align: center;
}

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     ニュース     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
.newsWrap {
	position: relative;
	background: linear-gradient( #00001e 0%,#19193c 100%);
	width: 100%;
}
.newsBox {
	width: 670px;
	margin: auto;
	padding: 30px 0 400px;
}
.newsBox .title {
	font-size: 3.0rem;
	text-align: center;
}
.newsList {
	padding-top: 70px;
	font-size: 2.0rem;
}
.newsList li {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-bottom: 25px;
}
.newsList .day {
	width: 100px;
	margin-right: 70px;
}
.newsList .txt {
	width: 500px;
}
.readMoreBox {
	font-size: 2.4rem;
	text-align: center;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	margin-top: 45px;
}
.readMoreBox a {
	background-color: #3d4a6b;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 5px 10px;
}
.readMoreBox a:hover {
	text-decoration: none;
}
.readMoreBox a span {
	display: block;
}
.readMoreBox a .migi {
	font-size: 2.2rem;
}
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     イントロダクション     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
.intWrap {
	position: relative;
	overflow: hidden;
}
.intBox {
	position: absolute;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(/img/top/introBg.jpg);
	background-size: cover;
	background-position: 50% 30%;
	z-index: -1;
}
.intBox.fix {
	position: fixed;
}
.intBox::after {
	content: '';
	background-color: rgba(0,9,74,.8);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
.intTxtBox {
	text-align: center;
	padding: 180px 0 100px;
	position: relative;
	z-index: 4;
}
.intTxtBox .txtImg {
	padding-top: 70px;
}
.intTxtBox .title {
	font-size: 3.0rem;
	color: #FFF;
}
.intTxtBox .txt {
	font-size: 2.0rem;
	color: #FFF;
	padding-top: 50px;
	text-align: center;
	font-weight: bold;
}
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     キャラクター     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
#character {
	z-index: 6;
	transform: skewY(-13deg);
}
.charaTxtBox {
	margin: auto;
	width: 1200px;
	padding: 300px 0 70px;
	transform: skewY(13deg);
}
.charaTxtBox .title {
	font-size: 3.0rem;
	color: #000013;
	width: 1200px;
}
#character .readMoreBox {
	margin-top: 10px;
	margin-bottom: 70px;
}
.charaTxtBox .top {
	padding-top: 50px;
}
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     cast     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
.castWrap {
	color: #0f0f30;
	font-weight: bold;
}
.castBox {
	text-align: center;
}
.castBox .txt {
	line-height: 30px;
	padding-top: 70px;
}
.castBox .txt .topSpace {
	padding-top: 20px;
}
.castBox .txt ul {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
}

.castBox .txt ul li {
	font-size: 1.7rem;
	padding: 0 10px;
}
.castBox .txt ul li span {
	font-size: 1.3rem;
}


/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     staff     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
.staffWrap {
	color: #0f0f30;
	font-weight: bold;
}
.staffBox {
	text-align: center;
}
.staffBox .txt {
	font-size: 1.7rem;
}
.staffBox .txt {
	line-height: 30px;
	padding-top: 50px;
}
.staffBox .txt ul {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
}

.staffBox .txt ul li {
	font-size: 1.7rem;
	padding: 0 10px;
}
.staffBox .txt ul li span {
	font-size: 1.3rem;
}

/*+-+-+-+-+-+-+-+-+-+-+-+-++-+-+-+-+-+-+-+-+-+-+-+*/
.LogoBoxTop {
	background: #fbfbfb;
	padding: 10px 0;
}
.botLogoBox {
	width: 660px;
	text-align: center;
	margin: auto;
}
.botLogoBox .logo {
	padding-bottom: 20px;
}


/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     twitter     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
.twitterWidget {
	width: 660px;
	margin: auto;
	padding: 100px 0 50px;
}
.twitter>iframe {
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: 100% !important;
}
.twitter {
	height: 470px;
}
.twitter>iframe {
	border: 1px #3d4a6b solid !important;
}











/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Media Screen     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*          SP          */
@media screen and (max-width:768px) {
	
	.keyvisual {
		position: relative;
		z-index: 1;
		max-width: 100%;
	}
	.rightBox {
		width: 100%;
		background: linear-gradient(#00001e 0%,#19193c 100%);
	}
	.replace {
		/*-webkit-flex-direction: column-reverse;
		flex-direction: column-reverse;*/
		position: relative;
		/*display: -webkit-flex;
		display: flex;*/
	}
	.sp.roadshow {
		width: 80%;
		margin: auto;
		max-width: 500px;
		padding-top: 20px;
	}
	.topicsBox {
		margin-top: 0;
		margin: auto;
		max-width: 500px;
	}
	.theaterLink {
		padding-top: 0;
		width: 70%;
		margin: auto;
	}
	.theaterLink a {
		margin: 10px 0;
	}
	
	.bt_topics {
		background: #19193c;
		margin-bottom: -50px;
		padding-bottom: 150px;
	}
	.bt_topicsBox {
		width: 70%;
		padding: 0;
	}
	.bt_topicsBox a {
		width: 100%;
		margin: 10px 0;
	}
	
	
	
	
	.movitickBox {
		padding: 10px;
		max-width: 500px;
		margin: auto;
	}
	.movieWrap .trailerDot {
		position: absolute;
		top: 0;
	}
	.movieWrap {
		height: 200px;
	}
	.movieImg {
		position: absolute;
		width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	.playBox p {
		font-size: 2.6rem;
	}
	.playBox img {
		width: 80%;
		padding-top: 10px;
	}
	.playBox {
		top: -20px;
		text-align: center;
	}
	.newsWrap {
		background: linear-gradient( 13deg,#19193c 0%,#00001e 100%);
	}
	.newsBox {
		width: 90%;
		padding: 40px 0 60px;
		max-width: 500px;
	}
	.newsBox .title {
		font-size: 2.6rem;
	}
	.newsList {
		padding-top: 30px;
		font-size: 1.2rem;
	}
	.newsList .day {
		width: 30%;
		margin-right: 0px;
	}
	.newsList .txt {
		width: 70%;
	}
	.newsList li {
		font-weight: bold;
	}
	.readMoreBox {
		margin-top: 30px;
		font-size: 1.6rem;
	}
	.readMoreBox a {
		position: relative;
	}
	.readMoreBox a .migi {
		font-size: 1.3rem;
		position: relative;
		top: 1px;
		left: 3px;
	}
	
	.intTxtBox {
		padding: 0 0 100px;
	}
	.intTxtBox .txtImg {
		padding-top: 50px;
		width: 80%;
		max-width: 500px;
		margin: auto;
		text-align: left;
	}
	.intTxtBox .txt {
		font-size: 1.2rem;
		width: 80%;
		margin: auto;
		padding-top: 30px;
		max-width: 500px;
		text-align: left;
	}
	
	
	.charaWrap {
		height: 280px;
	}
	#character {
		background: url(/img/top/haruka_sp.jpg);
		background-size: cover;
		background-position: 50% 50%;
	}
	.charaTxtBox {
		width: 100%;
		max-width: 500px;
		margin: auto;
		padding: 110px 0 40px;
	}
	.charaTxtBox .title {
		font-size: 2.6rem;
		width: 100%;
		line-height: 2;
		text-align: center;
	}
	.charaTxtBox .top {
		padding: 20px 0 0 20px;
		width: 50%;
	}
	#character .readMoreBox {
		margin-bottom: 30px;
	}
	
	.bg {
		padding: 70px 0 50px;
		top: -50px;
		position: relative;
	}
	
	.staffBox {
		max-width: 500px;
		margin: auto;
		width: 90%;
	}
	.staffBox .title {
		font-size: 2.6rem;
	}
	.staffBox .txt {
		padding-top: 50px;
		line-height: 20px;
	}
	.staffBox .txt ul li {
		font-size: 1.1rem;
		padding: 0 5px;
	}
	.staffBox .txt ul li span {
		font-size: 1.0rem;
	}
	.staffBox .txt ul li .small {
		font-size: .6rem;
	}
	
	
	.castBox {
		max-width: 500px;
		margin: auto;
		width: 85%;
	}
	.castBox .txt {
		padding-top: 50px;
		line-height: 20px;
	}
	.castBox .txt ul li {
		font-size: 1.1rem;
		padding: 0 5px;
	}
	.castBox .txt ul li span {
		font-size: 1.0rem;
	}
	.castBox .txt .topSpace {
		padding-top: 10px;
	}
	
	
	
	
	.LogoBoxTop {
		position: relative;
		top: -50px;
		background: #fbfbfb;
		transform: skewY(-13deg);
	}
	.botLogoBox {
		width: 90%;
		margin: auto;
		max-width: 500px;
	}
	.botLogoBox .logo {
		width: 70%;
		margin: auto;
	}
	
	.twitterWidget {
		width: 90%;
		padding: 40px 0 0;
		max-width: 500px;
		margin: auto;
	}
	.twitter {
		height: 250px;
	}
	
	.bannerList {
		max-width: 500px;
		margin: auto;
	}
	
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     キービジュアル＆更新情報     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
	
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     イントロダクション     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/

	/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     イントロダクション     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
}

/*          PC          */
@media screen and (min-width:769px) {
/*          Site Contents          */
	.topBox {
		width: 1200px;
		margin: auto;
	}
	.keyvisualBox {
		width: 830px;
	}
	.keyvisualButton {
		width: 50px;
	}
	.newsBox {
		margin-bottom: -300px;
	}
	.naviLogo {
		margin-left: 40px;
	}
	.navibgBox {
		min-width: 1200px;
	}
	.navigationList {
		overflow-y: auto;
		overflow-x: hidden;
		background: url(/img/top/menu_bg.jpg)no-repeat,#05051d;
		background-position: 50% 0%;
	}
	.naviList li {
		padding: 0 0 0 40px;
	}
	
	.topicsBoxTop {
		width: 100%;
		transform: skewY(-13deg);
		height: 120px;
		background: #03172D;
		position: relative;
		top: -60px;
	}
	
	

	#character {
		background: url(/img/top/haruka.jpg);
		background-size: cover;
		background-position: 50% 50%;
	}

	.charaTxtBox {
		text-align: center;
	}
	.castBox {
		width: 1200px;
		margin: auto;
	}

	.staffBox .txt .w1050 {
		width: 1050px;
		margin: auto;
	}
	
	
	
	
	
	.footer {
		padding: 20px 0 60px;
	}
	
	
}