@charset "UTF-8";

/* TOP MAIN
----------------------------------------------------- */
#topMain h1,
	#topMain h2,
	#topMain h3,
	#topMain h4,#topMain h5{
		display:none;
	}
/* for PC */
@media screen and (min-width: 769px){
	#topMain{
		background: url(../images/top_pc01.jpg) top center no-repeat;
		background-size:100% auto;
		height:61.5vw;
		z-index:0;
	}
	#topMain02{
		background: url(../images/top_pc02.png) top center no-repeat;
		background-size:100% auto;
		height:59vw;
		
		z-index:0;
	}
	#bg{
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		display:block;
		background:url(../images/bg_pc.png) top center repeat-y;
		background-size:100% auto;
		z-index:-1;
	}
}

@media screen and (max-width: 768px){
	#topMain{
		background: url(../images/top_sp.jpg) top center no-repeat;
		background-size:100% auto;
		height:188vw;
		
	}
	#topMain02{
	}
	#bg{
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		display:block;
		background:url(../images/bg_sp.jpg) top center repeat-y;
		background-size:100% auto;
	}
}


/* LINK
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	#major{
		width:27vw;
		height:24vw;
		background:url(../images/maeuri.png) top center no-repeat;
		background-size:100% auto;
		position:absolute;
		top:-55vw;
		left:1.5vw;
		z-index:3;
		display:block;
	}
	#major p{ display:none;}
	#major a{
		width:100%;
		height:100%;
		display:block;
	}
	#imefo{
		width:27vw;
		height:5vw;
		position:absolute;
		top:-20vw;
		left:1.5vw;
		z-index:3;
		display:block;
	}
	#imefo img{
		width:100%;
		border-radius: 7px;
		box-shadow: 0 0 10px rgba(0,0,0,0.4);
	}
	#ebisu{
		width:27vw;
		height:5vw;
		position:absolute;
		top:-13vw;
		left:1.5vw;
		z-index:3;
		display:block;
	}
	#ebisu img{
		width:100%;
		border-radius: 7px;
		box-shadow: 0 0 10px rgba(0,0,0,0.4);
	}
	#sns{
		position:absolute;
		top:-60vw;
		left:1.9vw;
		width:26vw;
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		z-index:3;
	}
	
	#sns li{
	}
	
	#sns li a{
		padding:0.45vw 0 0 2px;
		text-align:center;
		color:#000;
		display:block;
		width:100%;
		height:3.5vw;
		letter-spacing:1px;
		cursor:pointer;
		border-radius: 8px;
		background:#000;
		box-shadow:0px 0px 20px rgba(0,9,9,0.4);
		text-decoration:none;
		font-size:1.6vw;
	}
	#sns li.twi{ width:5vw;}

	#sns li.youtube{ width:5vw;}

	#sns li.theaterBtn{ width:13vw;}
	#sns li.twi a{
		background:#000 url(../images/x_logo.svg) center center no-repeat;
		background-size:auto 45%;
	}
	#sns li.youtube a{
		background:#ff0101 url(../images/youtube.svg) center center no-repeat;
		background-size:auto 60%;
	}
	#sns li.theaterBtn a{
		background:#fff;
	}
	#trailerBox{
		width:100%;
		margin:5vw auto;
	}
	#trailerArea{
		width:80% !important;
		position:relative;
		z-index:102;
		margin:5vw auto;
	}
	#trailerArea iframe{
		width:64vw;
		height:46vw;
		margin:0 auto;
		box-shadow:0px 0px 20px rgba(0,0,0,0.3);
	}
	.youtubeBtn{
		width:25px;
		height:18px;
		font-size:0;
		display:block;
		background: url(../images/youtube2.svg) center center no-repeat;
		background-size: 100% auto;
		
		margin-top:12px;
		float:right;
	}
	#commentBn{
		width:12vw;
		height:auto;
		position:absolute;
		top:25vw;
		left:63vw;
	}
	#commentBn img{
		width:100%;
	}
	#goodsBn{
		width:12vw;
		height:auto;
		position:absolute;
		top:25vw;
		left:74vw;
	}
	#goodsBn img{
		width:100%;
	}
}
/* for SP */
@media screen and (max-width: 768px)  {
	#douji{
		width:70vw;
		max-width:400px;
		margin:-5vw auto 10vw auto;
	}
	#major{
		width:90vw;
		max-width:400px;
		margin:30px auto;
		height:55vw;
		max-height:300px;
		background:url(../images/maeuri.png) top center no-repeat;
		background-size:100% auto;
		z-index:3;
		display:block;
	}
	#major p{ display:none;}
	#major a{
		width:100%;
		height:100%;
		display:block;
	}
	#imefo{
		width:90vw;
		max-width:400px;
		height:15vw;
		max-height:300px;
		margin:30px auto;
		z-index:3;
		display:block;
	}
	#imefo img{
		width:100%;
		border-radius: 7px;
		box-shadow: 0 0 10px rgba(0,0,0,0.4);
	}
	#ebisu{
		width:90vw;
		max-width:400px;
		height:15vw;
		max-height:300px;
		margin:30px auto;
		z-index:3;
		display:block;
	}
	#ebisu img{
		width:100%;
		border-radius: 7px;
		box-shadow: 0 0 10px rgba(0,0,0,0.4);
	}
	#sns{
		width:250px;
		margin:0 auto;
		z-index:3;
	}
	
	#sns li{
		width:100%;
		margin:0 0 15px 0;
	}
	
	#sns li a{
		padding:8px 0 0 2px;
		text-align:center;
		color:#000;
		display:block;
		width:100%;
		height:56px;
		letter-spacing:1px;
		cursor:pointer;
		border-radius: 8px;
		background:#000;
		box-shadow:0px 0px 20px rgba(0,9,9,0.4);
		text-decoration:none;
		font-size:23px;
	}
	#sns li.twi a{
		background:#000 url(../images/x_logo.svg) center center no-repeat;
		background-size:auto 45%;
	}
	#sns li.youtube a{
		background:#ff0101 url(../images/youtube.svg) center center no-repeat;
		background-size:auto 60%;
	}
	#sns li.theaterBtn a{
		background:#fff;
	}
	.youtubeBox{
		width:80vw;
		margin:5vw auto;
	}
	#trailerArea{
		width:100% !important;
		position:relative;
		z-index:102;
	}
	#trailerArea iframe{
		width:80vw;
		height:45vw;
		box-shadow:0px 0px 20px rgba(0,0,0,0.3);
	}
	.youtubeBtn{
		width:25px;
		height:18px;
		font-size:0;
		display:block;
		background: url(../images/youtube2.svg) center center no-repeat;
		background-size: 100% auto;
		margin-top:12px;
		float:right;
	}
	#commentBn{
		width:24vw;
		height:auto;
		position:absolute;
		top:65vh;
		left:71vw;
	}
	#commentBn img{
		width:100%;
	}
	#goodsBn{
		width:24.5vw;
		height:auto;
		position:absolute;
		top:75vh;
		left:76vw;
	}
	#goodsBn img{
		width:100%;
	}
}
	


/* INTRODUCTION
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	#intro{
		position:relative;
		background:rgba(255, 255, 255,0.9);
		color:#000;
		padding:2vw;
		z-index:4;
		width:90%;
		max-width:1200px;
		margin:0 auto;
	}
	#intro h3{
		display:none;
	}
}
/* for SP */
@media screen and (max-width: 768px){
	#intro{
		position:relative;
		background:rgba(255,255,255,0.9);
	}
	#intro h3{
		background:url(../images/intro_copy.png) no-repeat;
		background-size:100% auto;
		width:100%;
		height:55vw;
		text-indent:-9999px;
	}
	#intro .txtArea{
		width:85%;
		margin:0 auto;
		color:#000;
	}
}


/* FILMS
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	#films{
		position:relative;
		width:90%;
		max-width:1200px;
		margin:10vw auto;
		padding:0;
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		z-index:4;
		color:#000;
		font-size:85%;
		line-height:1.5;
	}
	#film01{
		width:32%;
		background: url(../images/film01.png)top center no-repeat ;
		background-size: 100% auto;	
		padding-top:30%;
	}
	.chuui{
		width:150px;
		float:right;
		margin:0px -40px 0px 0px;
	}
	#film02{
		width:32%;
		background: url(../images/film02_pc.png) top center no-repeat ;
		background-size: 100% auto;	
		padding-top:30%;
	}
	#film03{
		width:32%;
		background: url(../images/film03.png) top center no-repeat ;
		background-size: 100% auto;	
		padding-top:30%;
	}
	#films h2,#films h3{
		display:none;
	}
	#films .txtArea{
		padding:2vw;
		margin:0;
		width:100%;
		background:#fff;
	}
	#films .txtArea h6{
		font-size:70%;
		line-height:1.3;
		margin-top:5px;
		letter-spacing:1;
	}
	#films .txtArea h6.small{
		font-size:70%;
		line-height:1.3;
		color:#fb4855 !important;
	}
}
/* for SP */
@media screen and (max-width: 768px){
	#films{
		position:relative;
		width:100%;
		padding:0;
		z-index:4;
		margin:30vw 0 15vw 0;
		color:#000;
	}
	#film01{
		width:90%;
		background: url(../images/film01.png)top center no-repeat ;
		background-size: 100% auto;	
		padding-top:85%;
		margin-bottom:10vw;
	}
	.chuui{
		width:150px;
		float:right;
		margin:0px -40px 0px 0px;
	}
	#film02{
		width:90%;
		background: url(../images/film02.png) top center no-repeat ;
		background-size: 100% auto;	
		padding-top:85%;
		margin-bottom:10vw;
		margin-left:10%;
	}
	#film03{
		width:90%;
		background: url(../images/film03.png) top center no-repeat ;
		background-size: 100% auto;	
		padding-top:85%;
		margin-bottom:10vw;
	}
	#films h2,#films h3{
		display:none;
	}
	#films .txtArea{
		padding:5.5vw;
		margin:0;
		width:100%;
		background:#fff;
	}
	#films .txtArea h6{
		font-size:85%;
		line-height:1.3;
		margin-top:10px;
		letter-spacing:1;
	}
	#films .txtArea h6.small{
		font-size:70%;
		line-height:1.3;
		color:#fb4855 !important;
	}
}


/* DIRECTOR
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	#director{
		position:relative;
		width:100%;
		background:rgba(0,0,0,0.8) url(../images/direc_en.png) bottom -3vw center no-repeat;
		background-size:90% auto;
		z-index:4;
	}
	#director .txtArea{
		width:90%;
		max-width:1200px;
		margin:0 auto;
		padding-bottom:5vw;
		position:relative;
	}
	#director .txtArea h2{
		font-size:160%;
		font-weight:500;
		margin-bottom:20px;
	}
	#dirimg{
		width:130px;
		float:right;
		margin:0 0 15px 15px;
		border-radius: 1px;
	}
}
/* for SP */
@media screen and (max-width: 768px)  {
	#director{
		position:relative;
		width:100%;
		background:rgba(0,0,0,0.8) url(../images/direc_en.png) bottom -3vw center no-repeat;
		background-size:90% auto;
		z-index:4;
	}
	#director .txtArea{
		width:90%;
		margin:0 auto;
		padding-bottom:5vw;
		position:relative;
	}
	#director .txtArea h2{
		font-size:150%;
		font-weight:500;
		margin-bottom:20px;
		margin-top:40px;
	}
	#dirimg{
		width:100px;
		float:right;
		margin:0 0 15px 15px;
		border-radius: 1px;
	}
}


/* THEATER
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	#theaters{
		background:rgba(128, 136, 115,0.8);
		z-index:4;
	}
	#theaters .txtArea{
		width:90%;
		max-width:1200px;
		margin:0 auto 5vw auto;
	}
	
}
/* for SP */
@media screen and (max-width: 768px)  {
	#theaters{
		background:rgba(128, 136, 115,0.8);
		z-index:4;
	}
	#theaters .txtArea{
		width:90%;
		margin:0 auto 5vw auto;
	}
}
	
/* FOOTER
----------------------------------------------------- */


@media screen and (min-width: 769px){
	#footer{
		width:100%;
		background:#000;
		text-align:center;
		z-index:4;
	}
	#credit img{
		width:90%;
		max-width:600px;
		margin:30px auto;
		position:relative;
	}
	#credit p{
		display:none;
	}
}
@media screen and (max-width: 768px) {
	#footer{
		width:100%;
		background:#000;
		text-align:center;
		z-index:4;
		padding:5vw 0;
	}
	
	#credit img{
		width:90%;
		max-width:600px;
		margin:20px auto;
		position:relative;
	}
	#credit p{
		display:none;
	}
}