/*-------------------------
  	full screen
--------------------------*/


@media screen and (min-width:1800px){
	
}

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

}


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

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

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

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

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

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

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

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

@media screen and (max-width:1200px){
	
	.feature-content{width:55%;}
	.hero h1 span.date {font-size:16px;}
	.overlay ul li {
		width: 31.333%;
		margin: 0 2% 2% 0 !important;
	}
	.overlay ul li:nth-child(3), .overlay ul li:nth-child(6), .overlay ul li:nth-child(9) {
		margin: 0 0 2% 0;
	}
	
	
}

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

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

/*#intro {
    background: none;
    background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	-ms-background-size:cover; 
	min-height:950px;
	background-attachment: inherit;
	background-color:#12101b;
}

#intro .imtro_img{
	display:block;
	width:100%;
}

#intro h3 > br,
#intro h4 > br {
	display:inline;
}*/

#story .showcase-wrap {
    background: rgba(0,0,0,0);
}

/*#story {
    background:none;
	background-color:#030918;
	padding-top:0;
	padding-bottom:0;
}*/


#story .showcase-wrap::before {
	display:none;
}


}
@media screen and (min-width:490px) and (max-width:991px){
	.container {
		width: 100%;
	}
	
	/*.hero h1 {
		width: 80%;
		height: auto;
		margin: 30vh auto 20px auto;
	}*/
	.learn-btn, .use-btn {
		font-size: 12px;
	}
	header i {
		width: 50%;
		margin: 5px 25% 0 25%;
		float: none;
		clear: both;
		display: block;
		font-size: 18px !important;
	}
	
	#intro { min-height:850px; }
	#notes { height: auto; }
	
	/*#cast .col-md-4 {
		width: 100%;
		overflow: hidden;
		float: left;
	}*/
	#cast .feature-content { width: 60%; }
	.padding_spease{
		padding:none;
		width:100;
		margin:0 auto;
	}
	.showcase img.chronology {
		width: 100%;
		float: none;
	}

}

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

	h2{
		font-size:1em;
	}
	/*------------------------
	         comm
	-------------------------*/
	#comment{
		padding:8% 0;
	}
	.comm{
		margin-bottom:5%;
	}
	#comment .col-md-6 img{
		width:100%;
		height:auto;
		padding:0 5%;
	}
	#comment .col-md-6 h3 img{
		max-width:100%;
	}
	/*------------------------
	         intro
	-------------------------*/
	#intro{
		padding:8% 0;
	}
	#intro h2 img{
		max-width:100%;
	}
	.intro{
		position: absolute;
		z-index: -1;
		width: 100%;
		top: 0;
		left:0;
		bottom:0;
	}
	#intro .features-slider {
		background: rgba(255,255,255,0.3);
		padding:5% !important;
	}
	#intro .showcase-wrap {
		padding: 20% 5% 10% 5%;
	}
	.intro h4{
		margin: 5% 40% 100% 3%;
	}
	/*------------------------
	         story
	-------------------------*/
	#story{
		padding:8% 0;
	}
	#story .story{
		min-height:300px;
		background:url(../img/story_bg.jpg) center 30% no-repeat;
		background-size:cover;
	}
	#story h2{
		margin-top:-12%;
	}
	/*------------------------
	         cast
	-------------------------*/
	#cast{
		padding:8% 0;
	}
	/*------------------------
	         staff
	-------------------------*/
	#staff{
		padding:8% 0;
	}
	.staff{
		background:url(../img/staff_sp_bg.jpg) no-repeat bottom right, #000;
		background-size:contain;
	}
	#staff .col-md-4{
		margin:10% 0;
	}
	#staff .col-md-12{
		width:100% !important;
		padding: 3% 3% 40% 3%;
	}
	#staff .staff-link{
		margin:10% 0;
	}

	/*------------------------
	          cast_2(staff)
	-------------------------*/
	#staff .row{ margin:0; }
	#staff .col-md-4{
		width:100%;
	}
	#staff .director{
		width:100%;
	}
	
	#notes{ padding:none; }
	#notes_title{
		padding-top:10%;
		padding-bottom:-50%;
	}
	
	#staff .borderTL{
		border-top:#fcd30b solid 2px;
		border-left:none;
	}
	
	#staff .borderLeft{
		border-left:none;
		border-top:#fcd30b solid 2px;
	}
	
	
	/*------------------------
	         production
	-------------------------*/
	#note{
		padding:8% 0;
	}
	#note h3 img {
		max-height:50px;
		height: auto;
		height:auto !important;
	}
	#note .production_02{
		background: url(../img/production_02_bg.jpg);
		background-position:45% top;
		background-size:cover;
	}

	/*------------------------
	         photo
	-------------------------*/
	.photo{
		margin:8% 0;
		/*min-height:400px;
		background:url(../img/images-photo.jpg) no-repeat center center;
		background-size:cover;*/
	}
	/*------------------------
	         soundtrack
	-------------------------*/
	#soundtrack{
		padding:8% 0;
	}
	.sound{
		 border-right:none; 
	}
	/*------------------------
	         epilogue
	-------------------------*/
	#epilogue{
		padding:8% 0;
	}
	/*-----------------------
			 comment
	----------------------	
	#comment .row {
		margin: 0;
	}
	
	#comment .col-md-12 {
		overflow: hidden;
	}
	
	#comment .col-md-4{
		height:auto;
	}
	
	#comment .director, #comment .director_img {
		height: auto;
		margin: 0 0 0 -2px;
	}
	
	.feature-1,.feature-2{margin-bottom:50px;}
	.device{display:none;}
	.screenshots ul li{width:50%;}
	.screenshots-intro{padding:110px 0 100px 0;}
	.feature-content{width:80%;}
	.features-slider{height:100%}
	footer ul.snsnavi {
		width: 90%;
		height: auto;
		overflow: hidden;
		margin: 30px 5% 0 5%;
	}--*/
	
	/*-----------------------
			  footer
	------------------------*/
	footer ul.snsnavi li {
		width: 25%;
		height:auto;
		float: left;
		margin: 0;
		padding:  0 5px 10px 5px;	
	}
	footer ul.snsnavi li a img {
		width: 100%;
	}
	
	
	footer ul.bannernav {
		width: 90%;
		height: auto;
		overflow: hidden;
		margin: 30px 5% 0 5%;
	}
	footer ul.bannernav li {
		width: 25%;
		height:auto;
		float: left;
		margin: 0;
		padding:  0 5px 10px 5px;	
	}
	footer ul.bannernav li a img {
		width: 100%;
	}
	
	footer ul.corpnavi {
		width: 90%;
		margin: 30px 5% 0 5%;
		overflow: hidden;
	}
	.overlay ul li a {
		font-size: 13px;
	}
	
}

@media screen and  (min-width:841px){
	
	.sp_dvd{
		display:none !important;
	}

}



@media screen and  (max-width:840px){
	
	.pc_dvd{
		display:none !important;
	}
	
.hero .dvd {
    max-width: 352px;
    position: relative;
    width: 100%;
    display: block;
    margin: 0 auto 20px auto;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    top: auto;
    right: auto;
}

}



@media screen and (min-width:640px) and (max-width:840px){
	
	.hero #logo{
		margin-top:50%;
	}
	
	.menu{
		width:75%;
		margin:0 auto;
	}
	.menu ul li{
		padding-bottom:2%;
	}
	
	/*.hero #award{ display:block;}
	.hero #logo{
		max-width:40%;
		margin-top:80%;
	}
	
	.hero #release{
		max-width:75%;
	}
	
	#online_img{
		width:100%;
		max-width:40%;	
	}
	
	#cast .col-md-4{
		width: 100%;
		overflow: hidden;
		float: left;
	}
	#cast .feature-content { width: 60%; }
	
	#staff .col-md-12{
		width:95%;
		margin:0 auto;
	}
	
	#staff .director{
		width:100%;
	}
	
	#staff .col-md-4{
		width:100%;
	}
	
	#staff .borderTL{
		border-top:#fcd30b solid 2px;
		border-left:none;
	}
	
	#staff .borderLeft{
		border-left:none;
		border-top:#fcd30b solid 2px;
	}
	#staff .br_dispry{
		display:none;
	}
	
	#notes.col-md-6{
		width:90%;
	}
	
	#online_img { max-width: 40%; }*/
}

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

}
@media screen and (min-width:640px){
	
}


@media screen and (max-width:640px){
	.pc{ display:none !important;}
	.sp{ display:block !important;}

	.hero .col-md-6.navicon,
	.hero .col-md-6.navicon-2 {
		top: 9px;
		left: -5px;
	}
	.hero .navicon p {
		display:none;
	}
	.hero .icon_tw {
		position: absolute;
		top: 35px;
		left: 13px;
		width: 37px;
	}
	.hero .icon_fb {
		position: absolute;
		top: 80px;
		left: 13px;
		width: 37px;
	}
	.hero .mv .p-bnr{
		position:relative;
		right:0;
		bottom:0;
		width: 40%;
		margin: 0 auto;
	}
	.hero .mv .filmarks-2017-bnr{
		position:relative;
		right:0;
		bottom:0;
		width: 44%;
		margin:3% 3% 0;
		display: inline-block;
	}
	.hero .mv .ranking-bnr{
		position:relative;
		right:0;
		bottom:0;
		width: 44%;
		margin:3% 3% 0;
		display: inline-block;
	}
	.hero .mv .release-bnr{
		position:relative;
		right: 0;
		bottom: 0;
		width: 90%;
		margin:3% auto;
	}
	.hero .mv .p-bnr img,
	.hero .mv .filmarks-2017-bnr img,
	.hero .mv .ranking-bnr img,
	.hero .mv .release-bnr img{
		width:100%;
	}
	#intro {
		min-height:750px;
	}
	.intro h4{
		margin: 5% 10% 100% 3%;
	}	
	#intro .showcase-wrap {
		padding: 25% 5% 10% 5%;
	}
	#note{
	}
	#note h2 img{
		max-width:100%;
	}
	#note .row{
		width:90%;
		margin:0 auto;
	}
	.note-item{
		min-height:300px;
	}
	.note-item a{
		min-height:300px;
	}
	nav{ margin-top:0; }
	
	.overlay ul{ margin-left:0px; }
	.overlay ul li {
		width: 48%;
		margin: 0 4% 4% 0;
	}
	.overlay ul li:nth-child(even) { margin: 0 0 5% 0; }
	.overlay ul li a{padding:10px 0;min-width:100%;font-size:11px; display: block;}
	.overlay ul.icon li {
		width: 52%;
		margin: 0 !important;
	}
	.overlay ul.icon li:nth-child(even) {
		width: 48%;
		margin: 0;
	}
	.overlay ul li a i { width: 20%; }
	.overlay ul.icon li a{ padding:0;min-width:100%;font-size:12px; display: block; }
	
	.news dl { height:auto; }
	.news dl dt span {
		float: none;
		clear: both;
	}
	.news dl dt br {
		display: none;
	}
	/*.hero{
		min-height:750px;
	}*/
	/*.hero h1 span br.sp {
		display: inline;
	}
	.hero #award{
		display:block;
		padding-top:70px;
		max-width:480px;
	}
	.hero #copy{
		width:100%;
		max-width:200px;
		padding-top:30px;
		display:block;
		
	}
	.hero #logo{
		margin-top:60%;
		max-width:75%;
	}
	.hero #release{
		margin-top:20px;
		margin-bottom:20px;
		max-width:400px;
	}
	
	
	#online_img{
		width:100%;
		max-width:40%;	
	}
	
	#h_about{
	}*/
	
	.features-slider {
		padding: 80px 5% 40px 5%;
	}
	.features-img, .features-bg {
		height: 300px;
		min-height: 300px;
	}
	.showcase-wrap {
		padding: 40px 0 0 0;
	}
	
	/*#story .features-slider {
		margin:0 auto;
		width:85%;
	}
	
	
	#cast, #staff, #cast_2{
		padding: 80px 5% 40px 5%;
	}
	
	#cast .col-md-4{
		width: 100%;
		overflow: hidden;
		float: left;
	}
	#cast .feature-content { width: 60%; }
	
	#cast_2 .height{
		height:100%;
	}
	#notes{
		padding:none;
	}
	
	#notes.col-md-6{
		width:90%;
	}

	
	#notes_title{
		padding-top:10%;
		padding-bottom:-50%;
	}*/
	.sns {
		width: 100%;
	}
	
	.sns li:last-child {
		top: 0px;
	}
	
	.sns {
		width: 100%;
	}
	
	.sns li {
	   /* display: block;*/
		margin: 15px auto;
	}	
	
	.sns li:last-child {
	   /* display: block;*/
		margin: 15px auto;
	}	
	/* ==========================================================================
	popup
	========================================================================== */
	body.staff .container {
		padding: 0 5% 30px 5%;
	}
	body.staff h1 {
		margin: 30px 0 10px 0;
	}
	body.cast .container {
		padding: 0 5% 30px 5%;
	}
	body.cast h1 {
		margin: 30px 0 10px 0;
	}
	body.cast img {
		display: none;
	}
	body.news dd, body.cast p.conts, body.staff p.conts, #staff p.conts {
		margin: 0;
		font-size: 11px;
		line-height: 1.3em;
	}
	
	#staff .director{
		width:100%;
	}
	
	#staff .col-md-4{
		width:100%;
	}
	
	#staff .borderTL{
		border-top:#fcd30b solid 2px;
		border-left:none;
	}
	
	#staff .borderLeft{
		border-left:none;
		border-top:#fcd30b solid 2px;
	}
	#staff .br_dispry{
		display:none;
	}
	
	/*-----------------------
			  footer
	------------------------*/
	footer {
		padding: 10px 0px;
	}
	footer ul.snsnavi li {
		width: 50%;
		height:auto;
		float: left;
		margin: 0;
		padding:  0 5px 10px 5px;	
	}
	
	footer ul.bannernav li {
		width: 50%;
		height:auto;
		float: left;
		margin: 0;
		padding:  0 5px 10px 5px;	
	}
	
	footer ul.corpnavi {
		margin: 20px 5%;
	}
	footer ul.corpnavi li {
		width: 50%;
		display: block;
		text-align: left;
		float: left;
	}
	
	/*-----------------------
			comment
	------------------------*/
	/*#comment{
		padding-left:25px;
		padding-right:25px;
	}
	
	#comment .col-md-4{
		height:auto;
	}
	
	#comment .director, #comment .director_img {
		height: auto;
		margin: 0 0 0 -2px;
		padding: -15px 30px 0 30px;
	}*/
	
	
}
@media screen and (max-width:490px){
	.menu ul{
		width:100%;
	}
	.menu ul li{
		width:48%;
	}
	
/*.hero .pre_cam {
    width: 100%;
}	
	#h_about{
	}*/
	
	.use-btn{
		font-size:75%;
		padding: 9px 0;
	}
	.learn-btn{
		font-size:80%;
		padding: 8px 0;
	}
	
	/*.menu .left{
		float:left;
	}
	
	.menu .right{
		float:right;
	}*/
	
/*.epilogue h3{
	font-size:1.5em;
}*/
	
}
@media screen and (max-width:465px){
/*	h2 img {
		height: 20px;
	}
	
h2 {
    font-size: 3em;
}
.epilogue h3{
	font-size:1.2em;
}*/
	.hero{
/*		background:url(../img/main_sp.png)  bottom no-repeat;
		background-size:cover;
		
		-moz-background-size:cover;
		-webkit-background-size:cover;
		-o-background-size:cover;
		-ms-background-size:cover;*/
		
	}
	/*.hero h1 {
		width: 100%;
		min-width: 280px;
		height: auto;
		margin: 30vh auto 0 auto;
	}*/
	/*.hero h1 span.copy {
		padding: 0;
	}
	.hero h1 span.date {
		font-size: 13px;
		margin: 10px 0 20px 0;
	}*/
	
	/*-----------------------
			 header
	------------------------*/
	/*.hero #award{
		display:block;
		max-width:325px;
		margin:0 auto;
	}
	.hero #copy{
		max-width:150px;
		display:block;
	}
	.hero #logo{
		width:100%;
		margin-top:70%;
		max-width:250px;
	}
	.hero #release{
		width:100%;
		max-width:50%;
		margin-top:5%;
		margin-bottom:0;
	}
	
	
	#PCrelease{
		display:none;
	}
	#SPrelease{
		display:block;
		max-width:200px;
		width:100%;
		margin:0 auto;
	}
	
	#online_img { max-width: 50%; }*/

	
/*	#award_box{
		display:none;
	}*/
	

	/*#notes_title{
		width:100%;
		max-width:250px;
		margin:0 auto;
		padding-bottom:50px;
	}
	#notes .col-md-6{
		
		padding-left:25px;
		padding-right:25px;
	}*/
	
	/*#story .showcase-wrap{
		padding-left:-50px;
		padding-right:-50px;
	}*/
	
	
	/*#intro{
		background-position:top center;
		background-size:covcer;
		min-height:1000px;
	}*/
	
	#intro .showcase-wrap{
		width:100%;

	}

	/*#story .br_dispry{
		display:block;
	}
	#staff .br_dispry{
		display:none;
	}
	#comment .br_dispry{
		display:block;
	}
	
	.dis_none{
		display:none;
	}*/
	

	/*-----------------------
			  cast
	------------------------*/
	/*#cast .col-md-4 {
		width: 100%;
		height: auto;
	}
	
	#cast .feature-content {
		width: 100%;
	}
	
	.showcase img.chronology {
		width: 100%;
		float: none;
	}*/
	.feature-icon {
		float: none;
		clear: both;
	}
	
	/*-----------------------
			  staff
	------------------------*/
	/*#staff .row {
		margin: 0;
	}
	#staff .col-md-4 {
		width: 100%;
		height: auto;
		padding: 10px 30px 30px 30px;
		text-align:left;
	}
	#staff .col-md-12 {
		border-left: #fcd30b solid 2px;
		overflow: hidden;
	}
	#staff .feature-icon {
		width: 75%;
		float: none;
		clear: both;
		margin: 0 15%;
	}
	#staff .director, #staff .director_img {
		height: auto;
		margin: 0 0 0 -2px;
		padding: 30px 30px 0 30px;
	}
	#staff .director {
		padding: 0 30px 30px 30px
	}
	
	#staff .borderTL{
		border-top:#fcd30b solid 2px;
		border-left:none;
	}
	
	#staff .borderLeft{
		border-left:none;
		border-top:#fcd30b solid 2px;
	}*/
	
	/*-----------------------
			 comment
	------------------------*/
	/*#comment{
		padding-left:13px;
		padding-right:13px;
	}

	#comment .row {
		margin: 0;
	}
	#comment .col-md-4 {
		width: 100%;
		height: auto;
		padding: 10px 30px 30px 30px;
	}
	#comment .col-md-12 {
		overflow: hidden;
	}
	#comment .feature-icon {
		width: 80%;
		float: none;
		clear: both;
		margin: 0 15%;
	}
	#comment .director, #comment .director_img {
		height: auto;
		border-bottom: none;
		margin: 0 0 0 -2px;
		padding: -15px 30px 0 30px;
	}
	#comment .director {
		padding: 0 30px 30px 30px
	}
	
	.screenshots figcaption .caption-content a {
		display: none;
	}
	.screenshots ul li{width:100%;min-height:100%;float:none;}
	section.video i{font-size:30px;}
	section.video h1{font-size:15px;font-weight:400;}
	section.video{padding:40px;}
	.feature-content{width:100%;text-align:center;margin-top:20px;}
	.feature-icon{display:block;margin:0 auto;}
	blockquote p{width:60%;}
	footer ul.corpnavi li {width: 100%;}*/
}

@media screen and (max-width:320px){
	
	
	.hero{
/*		background:url(../img/main_sp.png) center no-repeat;
		background-size:cover;
		
		-moz-background-size:cover;
		-webkit-background-size:cover;
		-o-background-size:cover;
		-ms-background-size:cover; */
		
		
	}
	.hero h1 {
		margin: 0;
	}
	/*.hero #award{
		width:100%;
		max-width:99%;
		display:block;
	}
	.hero #copy{
		max-width:55%;
		display:block;
	}
	.hero #logo{
		margin-top:80%;
		max-width:200px;
	}
	.hero #release{
	}*/
	
	.menu{
		margin:0 auto;
	}
	.menu ul{
		width:100%;

	}
	
	.menu ul li{
		width:48%;
	}
	
	/*.menu .left{
		float:left;
	}
	
	.menu .right{
		float:right;
	}*/
	
	.use-btn{

		font-size:75%;
	}
	.learn-btn{
		font-size:80%;
	}
	
	#online_img{
		width:100%;
		max-width:40%;	
	}
	
/*	#award_box{
		display:none;
	}*/
	
	.dis_none{
		display:none;
	}
	
	#PCrelease{
		display:none;
	}
	#SPrelease{
		display:block;
		max-width:180px;
		width:100%;
		margin:0 auto;
	}
	
	/*#intro {
		min-height:1500px;
		background-size:cover;
		
	}
	#intro .col-md-6{
		width:100%;
		margin:0 auto;
	}
	
	#intro .features-slider{
		width:100%;
		margin:0 auto;
	}
	
	#intro h3{
		width:100%;
	}
	
	#story{
		width:100%;
		margin:0 auto;
	}
	#story .br_dispry{
		display:block;
	}
	
	#staff .br_dispry{
		display:none;
	}
	
	#comment .br_dispry{
		display:block;
	}
	
	#comment span{
		font-size:10px;
	}
	
	#story features-slider{
		width:100%;
		margin:0 auto;
	}
	
	#h_about{

	}
	
	#notes_title{
		width:100%;
		max-width:200px;
	}
	
	#notes.col-md-6{
		width:90%;
	}
	
	#notes .features-bg{
		background-size:100%;
	}
	
	#staff .borderTL{
		border-top:#fcd30b solid 2px;
		border-left:none;
	}
	
	#staff .borderLeft{
		border-left:none;
		border-top:#fcd30b solid 2px;
	}*/
	
	footer ul.corpnavi li {width: 100%;}
	
}


@media screen and (max-width:980px){
	/*-------------------
	       comment
	-------------------*/
	#comment .row { margin: 0; }
	#comment .col-md-4{ height:auto; }
	#comment .director, #comment .director_img { width:100%; }
	#comment .director{ border-top:none; }
	#comment .director_img { border-bottom:none; }
}

@media screen and (max-width:680px){
	.feature-content{ width:60%; }
}