@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{
	}
	#topBg{
		background:url(../images/top_pc_bg.jpg) no-repeat;
		background-size:100% auto;
		width:100vw;
		height:170vh;
		position:absolute;
		top:0;
		left:0;
		z-index:0;
	}
	#topTxt{
		background: url(../images/top_txt_pc.png) no-repeat;
		background-size:100% auto;
		width:100vw;
		height:65vw;
		position:absolute;
		top:0;
		left:0;
		display:block;
		z-index:1;
	}
	#topLogo{
		background: url(../images/top_logo_pc.png) no-repeat;
		background-size:100% auto;
		width:100vw;
		height:65vw;
		position:absolute;
		top:0;
		left:0;
		display:block;
		z-index:2;
	}
	#topPiano{
		background: url(../images/top_piano_pc.png) no-repeat;
		background-size:100% auto;
		width:100vw;
		height:65vw;
		position:absolute;
		top:0;
		left:0;
		display:block;
		z-index:2;
	}
	#topCon{
		position:relative;
		width:100vw;
		display:block;
		z-index:3;
	}
	#commentBn{
		width:13vw;
		height:13vw;
		position:absolute;
		top:39vw;
		right:2vw;
		z-index:3;

	-webkit-transition: 250ms ease all;
	-moz-transition: 250ms ease all;
	transition: 250ms ease all;
  	animation: rotate 5s linear infinite;
	}
	#commentBn img{
		width:100%;
		height:auto;
	}
	
}
@media screen and (max-width: 768px){
	#topMain{
	}
	#topMain p{
		display:none;
	}
	#topBg{
		background:url(../images/top_sp_bg.jpg) no-repeat;
		background-size:100% auto;
		width:100vw;
		height:250vh;
		position:absolute;
		top:0;
		left:0;
		z-index:0;
		opacity:0;
		-webkit-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
		-moz-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
		transition:         all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	
	#topTxt{
		background: url(../images/top_txt_sp.png) no-repeat;
		background-size:100% auto;
		width:100vw;
		height:35vw;
		position:absolute;
		top:0;
		left:0;
		display:block;
		opacity:0;
		z-index:1;
		-webkit-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
		-moz-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
		transition:         all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	#topCopy{
		background: url(../images/top_copy_sp.png) no-repeat;
		background-size:100% auto;
		width:100vw;
		height:135vw;
		position:absolute;
		top:-30px;
		left:-30px
		display:block;
		opacity:0;
		z-index:1;
		-webkit-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
		-moz-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
		transition:         all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	#topLogo{
		background: url(../images/top_logo_sp.png) no-repeat;
		background-size:100% auto;
		width:100vw;
		height:225vw;
		position:absolute;
		top:0px;
		left:0;
		display:block;
		opacity:0;
		z-index:2;
		-webkit-transition: all 1200ms cubic-bezier(0.165, 0.84, 0.44, 1);
		-moz-transition: all 1200ms cubic-bezier(0.165, 0.84, 0.44, 1);
		transition:         all 1200ms cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	#topPiano{
		background: url(../images/top_piano_sp.png) no-repeat;
		background-size:100% auto;
		width:100vw;
		height:65vw;
		position:absolute;
		top:160vw;
		left:0;
		display:block;
		opacity:0;
		z-index:2;
		-webkit-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
		-moz-transition: all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
		transition:         all 700ms cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	#topCon{
		margin-top:190vw;
		position:relative;
		width:100vw;
		display:block;
		z-index:3;
	}
	#topBg.topanime,
	#topTxt.topanime,
	#topCopy.topanime,
	#topLogo.topanime,
	#topPiano.topanime,
	#topCon.topanime{
		opacity:1;
	}

	#topCopy.topanime{ top:0;}
	#topLogo.topanime{ top:0;}
	#catchCopy{
		width:100%;
	}
	#commentBn{
		width:35vw;
		height:35vw;
		position:absolute;
		top:158vw;
		left:-5vw;
		z-index:3;

	-webkit-transition: 250ms ease all;
	-moz-transition: 250ms ease all;
	transition: 250ms ease all;
  	animation: rotate 5s linear infinite;
	}
	#commentBn img{
		width:100%;
		height:auto;
	}
}


/* TOP02
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	
	#sns{
		width:640px;
		margin:60vw auto 30px auto;
		position:relative;
		display:flex;
		justify-content: space-between;
	}
	#sns::before{
		content:'';
		position:absolute;
		top:-6vw;
		left:2vw;
		width:11vw;
		height:11vw;
		display:block;
		background:url(../images/link_p.png) no-repeat;
		background-size:100% auto;
		z-index:1;
	}
	#sns li{
		width:300px;
		z-index:3;
		position:relative;
	}
	
	#sns li a{
		padding:13px 0 0 0;
		text-align:center;
		font-size:110%;
		color:#fff;
		display:block;
		margin-bottom:10px;
		width:100%;
		height:60px;
		border-radius:8px;
		letter-spacing:2px;
		cursor:pointer;
		border-radius: 10px;
		background:#000;
		box-shadow:0px 0px 20px rgba(0,9,9,0.2);
	}
	#sns li.theaterBtn a{
		background:#396f31;
	}
	#sns li.twi a{
		background:#000 url(../images/x_logo.svg) center center no-repeat;
		background-size:auto 40%;
		border-radius: 10px;
	}
	#event{
		width:640px;
		margin:0 auto 60px auto;
	}
	#event img{ width:100%; border-radius: 10px;
	
		box-shadow:0px 0px 20px rgba(0,9,9,0.2);
	}
	#trailerBox{
		width:840px;
		height:550px;
		margin-bottom:50px;
		background:#000 ;
		background-size:90% auto;
		border-radius: 10px;
		box-shadow:0px 0px 20px rgba(0,9,9,0.2);
		margin:0 auto;
		position:relative;
		overflow:hidden;
	}
	#topCon #trailerBox{
		margin-bottom:70px !important;
	}
	#youtubeBox{
		width:100%;
		height:500px;
		margin:0 auto 0 auto;
	}
	
	#trailerBox ul{
		display:flex;
		position:absolute;
		width:100%;
		top:500px;
		height:50px;
	}
	#trailerBox ul li{
		width:50%;
		height:50px;
		background:#396f31;
		overflow:hidden;
		margin:0 ;
	}
	#trailerBox ul li a{
		width:100%;
		color:#fff;
		font-size:110%;
		text-align:center;
		display:block;
		height:100%;
		padding:14px 0 0px 0;
		line-height:1;
		cursor:pointer;
	}
	#trailerBox ul li a:first-child{
		border-right:1px solid rgba(0,0,0,0.4);
	}
	
}
/* for SP */
@media screen and (max-width: 768px)  {
	#sns{
		width:300px;
		z-index:10 !important;
		margin:50px auto 15px auto;
		position:relative;
	}
	#sns::before{
		content:'';
		position:absolute;
		top:-19vw;
		right:1vw;
		width:30vw;
		height:21vw;
		display:block;
		background:url(../images/link_p.png) no-repeat;
		background-size:100% auto;
		z-index:2;
	}
	#sns li{
		width:300px;
		margin-bottom:15px;
		display:block;
		position:relative;
		z-index:3;
	}
	#sns li a{
		padding:12px 0 0 0;
		text-align:center;
		font-size:125%;
		color:#fff;
		display:block;
		width:100%;
		height:55px;
		border-radius:8px;
		letter-spacing:2px;
		cursor:pointer;
		border-radius: 10px;
		background:#000;
		box-shadow:0px 0px 20px rgba(0,9,9,0.2);
	}
	#sns li.theaterBtn a{
		background:#396f31;
	}
	#sns li.twi a{
		background:#000 url(../images/x_logo.svg) center center no-repeat;
		background-size:auto 40%;
		border-radius: 10px;
	}
	#sns li.youtube a{
		background:#ff0101 url(../images/youtube.svg) center center no-repeat;
		background-size:auto 45%;
		border-radius: 10px;
	}
	#event{
		width:300px;
		margin:0 auto 60px auto;
	}
	#event img{ width:100%; border-radius: 10px;
	
		box-shadow:0px 0px 20px rgba(0,9,9,0.2);
	}
	#trailerBox{
		width:300px;
		height:240px;
		background:#000;
		background-size:90% auto;
		border-radius: 10px;
		box-shadow:0px 0px 20px rgba(0,9,9,0.2);
		margin:0 auto;
		position:relative;
		overflow:hidden;
	}
	#youtubeBox{
		width:100%;
		margin:0 auto 0 auto;
	}
	#trailerBox ul{
		display:flex;
		position:absolute;
		width:100%;
		top:195px;
		height:45px;
	}
	#trailerBox ul li{
		width:50%;
		height:45px;
		background:#396f31;
		overflow:hidden;
		margin:0 ;
	}
	#trailerBox ul li a{
		width:100%;
		color:#fff;
		font-size:115%;
		text-align:center;
		display:block;
		height:100%;
		padding:12px 0 0px 0;
		line-height:1;
	}
	#trailerBox ul li a:first-child{
		border-right:1px solid rgba(0,0,0,0.1);
	}
	
}
	

/* MAEURI
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	#ticket{
		width:100%;
		max-width:840px;
		position:relative;
		text-align:center;
		margin:150px auto 80px auto ;
		z-index:1;
	}
	#ticket::before{
		content:'';
		position:absolute;
		top:-110px;
		left:6vw;
		width:100px;
		height:120px;
		display:block;
		background:url(../images/ticket_p.png) no-repeat;
		background-size:100% auto;
		z-index:2;
	}
	#ticket .content{
		width:100%;
		border-radius: 10px;
		margin:0 auto;
		z-index:3;
		position:relative;
		text-align:center;
	}
}
/* for SP */
@media screen and (max-width: 768px)  {
	#ticket{
		width:100%;
		max-width:300px;
		position:relative;
		text-align:center;
		margin:50vw auto 20vw auto;
		z-index:1;
	}
	#ticket::before{
		content:'';
		position:absolute;
		top:-32vw;
		left:6vw;
		width:28vw;
		height:34vw;
		display:block;
		background:url(../images/ticket_p.png) no-repeat;
		background-size:100% auto;
		z-index:2;
	}
	#ticket .content{
		background:#fff;
		padding:10px 0 ;
		width:100%;
		border-radius: 10px;
		z-index:3;
		position:relative;
		box-shadow:0px 0px 20px rgba(0,9,9,0.1);
	}
	
}
	

/* INTRODUCTION
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	#preIntro{
		background:url(../images/preintro_p.jpg) no-repeat center top;
		background-size:100% auto ;
		width:100vw;
		height:40vw;
		margin:10vw  0 0 0;
	}
	#bgWrap{
		width:100%;
		height:100%;
		overflow:hidden;
	}
	#movBG{
		background:url(../images/mov_bg.png) no-repeat;
		background-size: auto 100%;
		height:240vh;
		width:100vw;
		display:block;
		position:fixed;
		top:-40vh;
		left:0vw;
		animation: rotate 300s linear infinite;
		z-index:1;
		opacity:0;
	}
	.scrollDown #movBG{
		opacity:1;
		-webkit-transition: all 800ms linear;
		-moz-transition: all 800ms linear;
		transition:         all 800ms linear;
	}
	@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
	}
	#intro{
		position:relative;
		overflow:hidden;
		padding-top:50px;
		margin-bottom:50px;
	}
	
	#intro .txtArea{
		width:90vw;
		max-width:840px;
		margin:0 auto;
		position:relative;
		background:#fff;
		padding:20px 20px 10px 20px;
		border-radius: 15px;
		box-shadow:0 0 30px rgba(0,0,0,0.1);
	}
	#intro01,#intro02{ 
		position:relative;
		margin-bottom:50px;}
	#intro h4{
		width:800px;
		height:140px;
		margin:0 auto;
		text-indent:-9999px;
	}
	#intro01 h4 {
		background:url(../images/intro01.png) no-repeat;
		background-size:100% auto;
	}
	#intro02 h4 {
		height:170px;
		background:url(../images/intro02.png) no-repeat;
		background-size:100% auto;
	}
	
	
}
/* for SP */
@media screen and (max-width: 768px){
	#preIntro{
		background:url(../images/preintro_p.jpg) no-repeat left 30% top;
		background-size:auto 100%;
		width:100vw;
		height:140vw;
		margin:10vw  0 0 0;
	}
	#bgWrap{
		width:100%;
		height:100%;
		overflow:hidden;
	}
#movBG{
	background:url(../images/mov_bg.png) no-repeat;
	background-size: auto 100%;
	height:240vh;
	width:300vw;
	display:block;
	position:fixed;
	top:-40vh;
	left:-50vw;
  	animation: rotate 400s linear infinite;
	z-index:1;
	opacity:0;
}
.scrollDown #movBG{
	opacity:1;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
 	transition:         all 300ms linear;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
	#intro{
		position:relative;
		overflow:hidden;
		padding-top:10vw;
	}
	
	#intro .txtArea{
		width:90vw;
		margin:0 auto;
		position:relative;
		background:#fff;
		padding:20px;
		border-radius: 15px;
		box-shadow:0 0 30px rgba(0,0,0,0.1);
	}
	#intro01,#intro02{ position:relative;
		margin-bottom:10vw;}
	#intro h4{
		width:100vw;
		height:18vw;
		margin:0 auto;
		text-indent:-9999px;
	}
	#intro01 h4 {
		background:url(../images/intro01.png) no-repeat;
		background-size:100% auto;
	}
	#intro02 h4 {
		height:23vw;
		background:url(../images/intro02.png) no-repeat;
		background-size:100% auto;
	}
	
	
}

/* STORY
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	#story{
		padding-top:50px;
		padding-bottom:250px;
		position:relative;
		overflow:hidden;
	}
	
	#story .txtArea{
		width:90vw;
		max-width:840px;
		margin:50px auto;
		position:relative;
		background:rgba(255,255,255,0.85);
		padding:30px;
		border-radius: 15px;
		box-shadow:0 0 40px rgba(0,0,0,0.2);
	}
	#storyP{
		width:140px;
		position:absolute;
		bottom:250px;
		right:20vw;
	}
	#storyBg{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:#396f31 url(../images/story_bg.jpg) top center no-repeat;
		background-size: cover;
	}
	
}
/* for SP */
@media screen and (max-width: 768px){
	#story{
		padding-top:10vw;
		padding-bottom:25vw;
		position:relative;
		overflow:hidden;
	}
	
	#story .txtArea{
		width:90vw;
		margin:0 auto;
		position:relative;
		background:rgba(255,255,255,0.85);
		padding:20px;
		border-radius: 15px;
		box-shadow:0 0 40px rgba(0,0,0,0.2);
	}
	#storyP{
		width:30vw;
		position:absolute;
		bottom:10vw;
		right:10vw;
	}
	#storyBg{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:#396f31 url(../images/story_bg.jpg) top center no-repeat;
		background-size: auto 100% ;
	}
}



/* STAFF CAST
----------------------------------------------------- */
.modalOpen{
	display:clock;
	width:100%;
	height:100%;
	cursor:pointer;
}
.modalOpen a{
	display:clock;
	width:100%;
	height:100%;
	cursor:pointer;
}

/* for PC */
@media screen and (min-width: 769px)  {
	#staff{
		position:relative;
		margin:50px 0 100px 0;
	}
	#cast{
		position:relative;
		margin:50px 0 0 0;
	}
	#cast ul{
		width:90vw;
		max-width:840px;
		margin:0 auto;
		display:flex;
		margin:0 auto;
		flex-wrap: wrap;
		justify-content:space-between;
	}
	#staff ul{
		display:flex;
		margin:0 auto;
		justify-content:space-between;
		
		width:90vw;
		max-width:840px;
	}
	.staffBox,.castBox{
		width:380px;
		height:105px;
		margin:0 auto;
		background:#fff;
		padding:12px 10px 10px 103px;
		border-radius: 10px;
		margin-top:35px;
		box-shadow:0 0 20px rgba(0,0,0,0.1);
		z-index:1;
		position:relative;
	}
		.staffBox{ padding-left:15px; width:48%; margin:0;}
	
	.staffBox a h4,
	.castBox a h4{
		text-align:left;
		font-size:110%;
		font-weight:bolder;
		line-height:1.2;
		color:#000;
	}
	
	.staffBox a h6,
	.castBox a h6{
		font-weight:bolder;
		font-size:75%;
		letter-spacing:0.5px;
		text-align:left;
		margin-left:2px;
		color:#000;
	}
	.castBox a h5,
	.staffBox a h5{
		font-size:90%;
		text-align:left;
		color:#53844c;
	}
		.castBox a h5{
			position:absolute;
			left:103px;
			bottom:15px;
		}
		.staffBox a h5{
			color:#b40005;
			margin-bottom:5px;
		}
	.staffBox a p,
	.castBox a p{
		font-size:95%;
		color:#000;
	}
	.castBox .pimg{
		width:85px;
		border-radius: 10px;
		position:absolute;
		top:10px;
		left:10px;
	}
}
/* for SP */
@media screen and (max-width: 768px){
	#staff{
		position:relative;
		margin:15vw 0;
	}
	#cast{
		position:relative;
		margin:15vw 0;
	}
	#cast ul{
		width:90vw;
		margin:0 auto;
	}
	#staff ul{
		display:flex;
		margin:0 auto;
		justify-content:space-between;
		width:90vw;
	}
	.staffBox,.castBox{
		width:100%;
		height:105px;
		margin:0 auto;
		background:#fff;
		padding:12px 10px 10px 103px;
		border-radius: 10px;
		margin-top:5vw;
		box-shadow:0 0 20px rgba(0,0,0,0.1);
		z-index:1;
		position:relative;
	}
		.staffBox{ padding-left:15px; width:48%; margin:0;}
	
	.staffBox a h4,
	.castBox a h4{
		text-align:left;
		font-size:110%;
		font-weight:bolder;
		line-height:1.2;
		color:#000;
	}
	
	.staffBox a h6,
	.castBox a h6{
		font-weight:bolder;
		font-size:75%;
		letter-spacing:0.5px;
		text-align:left;
		margin-left:2px;
		color:#000;
	}
	.castBox a h5,
	.staffBox a h5{
		font-size:90%;
		text-align:left;
		color:#53844c;
	}
		.castBox a h5{
			position:absolute;
			left:103px;
			bottom:15px;
		}
		.staffBox a h5{
			color:#b40005;
			margin-bottom:5px;
		}
	.staffBox a p,
	.castBox a p{
		font-size:95%;
		color:#000;
	}
	.castBox .pimg{
		width:85px;
		border-radius: 10px;
		position:absolute;
		top:10px;
		left:10px;
	}
	
}
.plusIcon{
	width:21px;
	height:21px;
	display:block;
	font-size:13px;
	font-weight:700;
	line-height:1;
	color:#fff;
	text-align:center;
	padding-top:3px;
	position:absolute;
	bottom:10px;
	right:10px;
	background:#53844c;
	border-radius: 15px;
}
.staffBox .plusIcon{
	background:#b40005;
}


/* PHOTOS
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	#photos{
		position:relative;
		z-index:1;
	}
}
/* for SP */
@media screen and (max-width: 768px)  {
	#photos{
		position:relative;
		z-index:1;
	}
	#scroller li img{
		width:200px !important;
		height:auto;
	}
}


/* COMMENT
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px){
	#comment{
		width:100%;
		height:600px;
		position:relative;
		padding:50px 0 50px 0;
		overflow:hidden;
		text-align:center;
	}
	#comment h6{
		font-size:80%;
		color:#fff;
		display:block;
		text-align:center;
	}
	#comment p {
		width:100%;
		text-align:center;
	}
	#comment p img{
		width:400px;
	}
	#commentBg{
		position:absolute;
		top:0;
		left: 0;
		width:100vw;
		height:600px;
		background:url(../images/comment_bg.jpg)center center no-repeat;
		background-size:100% auto ;
	}
}
/* for SP */
@media screen and (max-width: 768px) {
	#comment{
		width:100%;
		position:relative;
		padding:15vw 0 10vw 0;
		overflow:hidden;
	}
	#comment h6{
		font-size:80%;
		color:#fff;
		text-align:center;
	}
	#comment img{
		width:100%;
	}
	#commentBg{
		position:absolute;
		top:0;
		left:-100vw;
		width:200vw;
		height:100%;
		background:url(../images/comment_bg.jpg)top left no-repeat;
		background-size:cover ;
	}
}


/* THEATERS
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	#theaters{
		margin:50px auto;
	}
	#theater{
		position:relative;
		width:90vw;
		margin:0 auto;
	}
}
/* for SP */
@media screen and (max-width: 768px)  {
	#theaters{
		margin:5vw auto;
	}
	#theater{
		position:relative;
		width: 90% !important;
		margin:0 auto;
	}
	
}


/* FOOTER
----------------------------------------------------- */
@media screen and (min-width: 769px){
	#footer{
		background:#396f31;
		text-align:center;
		position:relative;
		padding:30px 0 20px 0;
	}
	#credit{
		width:95vw;
		max-width:840px;
		margin:0 auto;
		text-align:center;
		background-size:100% auto;
	}
	#credit h4 img{
		width:100%;
		max-width:440px;
		margin-bottom:10px;
	}
	#credit h4{
		width:100%;
		text-align:center;
	}
	#credit p{
		width:100%;
		text-align:center;
		font-size:80%;
		font-weight:bolder;
		letter-spacing:0;
		line-height:1.3em;
	}
}
@media screen and (max-width: 768px) {
	#footer{
		background:#396f31;
		text-align:center;
		position:relative;
		padding:5vw 0;
	}
	#credit{
		width:95vw;
		margin:0 auto;
		text-align:center;
		background-size:100% auto;
	}
	#credit h4 img{
		width:100%;
		max-width:340px;
	}
	#credit h4{
		width:100%;
		text-align:center;
	}
	#credit p{
		width:100%;
		text-align:center;
		font-size:90%;
		font-weight:bolder;
		letter-spacing:0;
		line-height:1.3em;
		transform: scale(0.9,1);
	}
}



/* ANIMAtTION
----------------------------------------------------- */
.pulse {

	-webkit-animation:pulse 1s infinite linear alternate;
	animation:pulse 1s infinite linear alternate;
	
	}
@keyframes pulse {
	from {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  
	50% {
	  -webkit-transform: scale3d(1.05, 1.05, 1.05);
	  transform: scale3d(1.05, 1.05, 1.05);
	}
  
	to {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  }


/* MODAL
----------------------------------------------------- */
/* for PC */
@media screen and (min-width: 769px)  {
	.modal{
		width:100vw;
		height:130vh;
		background:rgba(0,0,0,0.5);
		position:fixed;
		top:0;
		left:0;
		content:'';
		z-index:10000;display:none;
	}
	
	.modalContents{
		z-index:12 !important;
		width:90vw;
		max-width:840px;
		height:70vh;
		margin:15vh auto 0 auto;
		background:#fff;
		padding:8vh 30px 5vh 30px ;
		border-radius: 15px;
		display:block;
		position:relative;
	}
	.modalContents h4{
		text-align:left;
		font-size:130%;
		font-weight:bolder;
		line-height:1.2;
	}
	
	.modalContents h6{
		font-weight:bolder;
		font-size:85%;
		letter-spacing:0.5px;
		text-align:left;
		margin-left:2px;
	}
		.modalCast h6{
			margin-bottom:10px;
		}
	.modalContents h5{
		font-size:100%;
		text-align:left;
		color:#53844c;
	}
		.modalStaff h5{
			color:#b40005;
			margin-bottom:5px;
		}
	.modalContents p{
		margin-top:10vh;
		font-size:90%;
		clear:both;
		height:75vh;
		overflow-y:scroll
	}
	.modalContents .pimg{
		height:20vh;
		border-radius: 10px;
		float:right;
	}
	#openingTrailer{
		width:100vw;
		height:100vh;
		position:fixed;
		padding:8vh 0 0 0;
		top:0;
		left:0;
		background:#000;
		display:block;
		z-index:9600;
	}
	.modalClose{
		width:30px;
		height:30px;
		display:block;
		font-size:13px;
		font-weight:700;
		line-height:1;
		color:#fff;
		text-align:center;
		padding-top:7px;
		position:absolute;
		top:12px;
		right:12px;
		background:#53844c;
		border-radius: 30px;
	}
	.modalStaff .modalClose{
		background:#b40005;
	}
	#openingTrailer #trailerBox{
		position:relative;
		z-index:10001;
	}
	#openingTrailer .modalClose{
		position:absolute;
		top:8vh;
		margin:-18px auto 0 auto;
		right:-840px;
		left:0;
		z-index:10002;
		cursor:pointer;
	}
}
/* for SP */
@media screen and (max-width: 768px){
	.modal{
		width:100vw;
		height:130vh;
		background:rgba(0,0,0,0.5);
		position:fixed;
		top:0;
		left:0;
		content:'';
		z-index:10000;
		display:none;
	}
	.modalContents{
		z-index:12 !important;
		width:90vw;
		height:82vh;
		margin:10vh auto 0 auto;
		background:#fff;
		padding:8vh 20px 5vh 20px ;
		border-radius: 15px;
		display:block;
		position:relative;
	}
	.modalContents h4{
		text-align:left;
		font-size:130%;
		font-weight:bolder;
		line-height:1.2;
	}
	
	.modalContents h6{
		font-weight:bolder;
		font-size:85%;
		letter-spacing:0.5px;
		text-align:left;
		margin-left:2px;
	}
		.modalCast h6{
			margin-bottom:10px;
		}
	.modalContents h5{
		font-size:100%;
		text-align:left;
		color:#53844c;
	}
		.modalStaff h5{
			color:#b40005;
			margin-bottom:5px;
		}
	.modalContents p{
		margin-top:5vw;
		clear:both;
		height:50vh;
		overflow-y:scroll
	}
	.modalContents .pimg{
		width:95px;
		border-radius: 10px;
		float:right;
	}
	.modalClose{
		width:30px;
		height:30px;
		display:block;
		font-size:13px;
		font-weight:700;
		line-height:1;
		color:#fff;
		text-align:center;
		padding-top:7px;
		position:absolute;
		top:8px;
		right:8px;
		background:#53844c;
		border-radius: 30px;
		cursor:pointer;
	}
	.modalStaff .modalClose{
		background:#b40005;
	}
}