@charset "UTF-8";

/* TOP MAIN
----------------------------------------------------- */


#topMain h1,#topMain h2,#topMain h3,#topMain h4{ display:none;}

@media screen and (min-width: 1081px) {
	#topMain{
	position:relative;
	background:url("../images/top_pc.jpg") center top no-repeat;
	background-size:1080px auto;
	width:1080px;
	margin:0 auto;
	height:893px;
	}
	
}
@media screen and (min-width: 641px) and (max-width:1080px) {
	#topMain{
	position:relative;
	width:100%;
	height:86vw;
	background:url("../images/top_pc.jpg") center top no-repeat;
	background-size:105% auto;
	}
	
}
@media screen and (max-width: 640px) {
	#topMain{
	position:relative;
	width:100%;
	background:url("../images/teaser_sp.jpg") no-repeat;
	background-size:100% auto;
	height:191vw;
	}
}

/* FOOTER
----------------------------------------------------- */
@media screen and (min-width: 1081px) {
	footer{
		width:100%;
		position:relative;
	}
	footer .content{
		background:url("../images/footer_bg_sp.jpg") center top repeat-y;
		background-size:110% auto;
		text-align:center;
		position:relative;
		margin:0 auto;
		padding:40px 0;
	}
	
	#koukai{
		width:344px;
		height:170px;
		background:url("../images/theater_pc_sp.png") no-repeat;
		background-size:100% auto;
		display:block;
		text-indent:-9999px;
		margin:0 auto;
		}
	#ftimg01{
		position:absolute;
		top:60px;
		right:0;
	}
	#ftimg02{
		position:absolute;
		top:90px;
		left:20px;
	}
}
@media screen and (min-width: 641px) and (max-width:1080px) {
	footer{
		
	}
	footer .content{
		background:url("../images/footer_bg_sp.jpg") center top repeat-y;
		background-size:110% auto;
		text-align:center;
		position:relative;
		margin:0 auto;
		padding:40px 0 40px 0px;
		width:72%;
	}
	#koukai{
		width:35vw;
		height:17vw;
		background:url("../images/theater_pc_sp.png") no-repeat;
		background-size:100% auto;
		display:block;
		text-indent:-9999px;
		margin:0 auto;
	}
	#ftimg01{
		position:absolute;
		top:50px;
		right:0;
		width:12%;
	}
	#ftimg02{
		position:absolute;
		top:80px;
		left:10px;
		width:22%;
	}
}
@media screen and (max-width: 640px) {
	footer{
		width:100%;
		margin:0 auto;
		text-align:center;
		background:url("../images/footer_bg_sp.jpg") center top repeat-y;
		background-size:100% auto;
		position:relative;
		padding:10% 0 ;
	}
	footer .content{
		margin: 0 auto !important;
	}
	#koukai{
		width:100%;
		height:27vw;
		background:url("../images/koukai_sp.png") no-repeat;
		background-size:100% auto;
		display:block;
		text-indent:-9999px;
		margin:0 auto;
	}
}

/* SNS LINK
----------------------------------------------------- */
#snsLink li{
	opacity:1;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}
#snsLink li:hover{ opacity:0.8;}
@media screen and (min-width: 641px){
	
	#snsLink{
	width:95%;
	max-width:800px;
	display:flex;
	justify-content: center; 
	margin:20px auto;
	}
	#snsLink li{
	width:24%;
	height:40px;
	border-radius: 8px; 
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px; 
	margin:0 1%;
	color:#000 !important;
	}
	#snsLink li a{
		width:100%;
		height:100%;
		padding:14px 0 0 30px;
		display:block;
		color:#000 !important;
		font-weight:600;
		font-size:1.3rem;
		line-height:1;
		letter-spacing:1px;
	}
	#snsLink li.ist{
		background:#fff url("../images/insta.svg") top 9px left 12px no-repeat;
		background-size:20px auto;
	}
	#snsLink li.fce{
		background:#fff url("../images/facebook.svg") top 9px left 12px no-repeat;
		background-size:20px auto;
	}
	#snsLink li.twi{
		background:#fff url("../images/twitter.svg") top 9px left 12px no-repeat;
		background-size:20px auto;
	}
	#snsLink li.yt{
		background:#fff url("../images/youtube.svg") top 11px left 12px no-repeat;
		background-size:24px auto;
	}
	#snsLink li.yt a{
		font-size:1.6rem;
		padding-top:13px;
	}
}

@media screen and (max-width: 850px) {
	#snsLink{
	width:100%;
	display:flex;
	justify-content: center; 
	margin:20px auto;
	}
	#snsLink li{
	width:100px;
	height:27px;
	border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px; 
	margin:0 1%;
	color:#000 !important;
	}
	#snsLink li a{
		width:100%;
		height:100%;
		padding:9px 0 0 20px;
		display:block;
		color:#000 !important;
		font-weight:600;
		font-size:1.0rem;
		line-height:1;
		letter-spacing:0.5px;}
	#snsLink li.ist{
		background:#fff url("../images/insta.svg") top 6px left 7px no-repeat;
		background-size:15px auto;
	}
	#snsLink li.fce{
		background:#fff url("../images/facebook.svg") top 6px left 7px no-repeat;
		background-size:15px auto;
	}
	#snsLink li.twi{
		background:#fff url("../images/twitter.svg") top 6px left 7px no-repeat;
		background-size:15px auto;
	}
	#snsLink li.yt{
		background:#fff url("../images/youtube.svg") top 7px left 7px no-repeat;
		background-size:18px auto;
	}
	#snsLink li.yt a{
		font-size:1.3rem;
		padding-top:7px;
	}
}
@media screen and (max-width: 360px) {
	#snsLink{
	width:100%;
	display:flex;
	justify-content: center; 
	margin:20px auto;
	}
	#snsLink li{
	width:35px;
	height:35px;
	border-radius: 26px; 
	-webkit-border-radius: 26px;
	-moz-border-radius: 26px; 
	margin:0 1%;
	text-indent:-9999px;
	color:#000 !important;
	}
	#snsLink li a{
		width:100%;
		height:100%;
		padding:9px 0 0 25px;
		display:block;
		color:#000 !important;
		font-weight:600;
		font-size:0.5rem;
		letter-spacing:0.5px;}
	#snsLink li.ist{
		background:#fff url("../images/insta.svg") top 9px left 11px no-repeat;
		background-size:15px auto;
	}
	#snsLink li.fce{
		background:#fff url("../images/facebook.svg") top 9px left 11px no-repeat;
		background-size:15px auto;
	}
	#snsLink li.twi{
		background:#fff url("../images/twitter.svg") top 9px left 11px no-repeat;
		background-size:15px auto;
	}
}

/* TRAILER
----------------------------------------------------- */
#trailerBtn img{
	-moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.6);
	-webkit-box-shadow: 1px 1px 8px rgba(0,0,0,0.6);
	box-shadow: 1px 1px 8px rgba(0,0,0,0.6);
	}
@media screen and (min-width: 1080px) {
	#trailerBtn{
	position:absolute;
	top:465px;
	right:150px;
	width:235px;}
	
}
@media screen and (min-width: 641px) and (max-width:1080px) {
	#trailerBtn{
		position:absolute;
		top:44vW;
		right:12vW;
		width:24vW;
		display:block;
	}
}


@media screen and (max-width: 640px){
	#trailerArea{
	position:relative;
	width:270px;
	margin:0 auto 0px auto;
	}
}


/* BANNER
----------------------------------------------------- */
#bannerArea{
	margin:60px 0;
}
#kikoBanner,
#illustBanner{
	position:relative;
	max-width:270px;
	margin:0 5px;
	line-height:1;
}

#kikoBanner img,
#illustBanner img{
	width:100%;
	max-width:270px;
}
@media screen and (max-width: 640px){
	#bannerArea{
		margin:30px auto;
		width:92%;
	}
#kikoBanner,
#illustBanner{
	max-width:270px;
	margin:5px 0;
}
}


/* INTRO
----------------------------------------------------- */
@media screen and (min-width: 1081px) {
	
	#intro{
		margin:40px auto 60px auto;
	}
	#intro h2{
		position:relative;
		text-indent:-9999px;
		width:793px;
		height:313px;
		background:url("../images/intro_ti.jpg") center top no-repeat;
		background-size:100% auto;
		margin:0 auto 40px -20px;
	}
	#itGirl{
		width:100%;
		height:309px;
		margin:0 auto;
		background:url("../images/it-girl.jpg") center top no-repeat;
		display:block;
		text-indent:-9999px;
	}
}
@media screen and (min-width: 641px) and (max-width:1080px) {
	
	#intro{
		margin:40px auto 60px auto;
	}
	#intro h2{
		position:relative;
		text-indent:-9999px;
		max-width:793px;
		width:105%;
		height:32vw;
		background:url("../images/intro_ti.jpg") center top no-repeat;
		background-size:100% auto;
		margin:0 auto 40px -2%;
		
	}
	#itGirl{
		width:100%;
		max-width:689px;
		margin:20px auto 0 auto;
		height:309px;
		background:url("../images/it-girl.jpg") center top no-repeat;
		background-size:100% auto;
		display:block;
		text-indent:-9999px;
	}
}

@media screen and (max-width: 640px){
	#intro{
		margin:10% auto 5% auto;
	}
	#intro h2{
		position:relative;
		text-indent:-9999px;
		width:100%;
		height:85vw;
		background:url("../images/intro_ti_sp.jpg") center top no-repeat;
		background-size:100% auto;
		margin:0 auto 20px 0px;
	}
	#intro p{
		padding:0 5%;
	}
	#itGirl{
		width:94%;
		margin:10px auto 0 auto;
		height:70vw;
		background:url("../images/it-girl_sp.jpg") center top no-repeat;
		background-size:100% auto;
		display:block;
		text-indent:-9999px;
	}
}

/* ABOUT MOVIE
----------------------------------------------------- */
#aboutMovie{
		
	}
.abM{
}
.abMHeader{
	padding:16px 20px 13px 20px;
	margin-bottom:20px;
	position:relative;
}
.abM:nth-child(1) .abMHeader{ background:#00abd6;}
.abM:nth-child(2) .abMHeader{ background:#e9622d;}
.abM:nth-child(3) .abMHeader{ background:#14a862;}
.abM:nth-child(4) .abMHeader{ background:#e5355a;}

.abMHeader h3{
	color:#fff;
	font-size:160%;
	font-weight:500;
	line-height:1;
	margin-bottom:20px;
}
.abMHeader h3 .ogTitle{
	font-size:60%;
	letter-spacing:0.1em;
}
.abMHeader p{
	font-size:70%;
	line-height:1.3;
}
.abMHeader p .sml{
	font-size:60%;
}
.abMHeader img.himg{
	position:absolute;
	bottom:0;
	right:5%;
}
#movie01 .abMHeader img.himg,
#movie02 .abMHeader img.himg{
	bottom:-13px;
}
#movie03 .abMHeader img.himg{
	right:2%;
}
.abMHeader img.mark{
}
.abMContent{
	margin-bottom:30px;
	position:relative;
}
.abMContent img{
	position:absolute;
	top:0;
	right:0;
	display:block;
}
@media screen and (min-width: 769px) {
	.abMContent p{
		width:50%;
	}
	.abMContent img{
		width:45% !important;
	}
}


@media screen and (max-width: 768px){
	#movie01 .abMHeader img.himg{bottom:auto; top: 10px; width:25vw; max-width:135px;}
	#movie02 .abMHeader img.himg{bottom:auto; top: -25px; width:20vw; max-width:106px;}
	#movie03 .abMHeader img.himg{right:2%; top: -24px; width:30vw; max-width:162px;}
	#movie04 .abMHeader img.himg{right:2%; top: -30px; width:20vw; max-width:98px;}
	.abMHeader{
		width:94%;
		margin:0 auto;
	}
	.abMHeader h3{
		font-size:125%;
		line-height:1.4;
	}
	.abMHeader h3 .ogTitle{
		font-size:5s0%;
		display:block;
		letter-spacing:0.1em;
	}
	.abMHeader p{
		line-height:1.2;
		width:100%;
	}
	
	.abMHeader p br{
	}
	.abMContent p{
		width:100%;
		margin-top:5%;
		padding:0 5%;
	}
	.abMHeader img.mark{
		height:15px;
	}
	.abMContent img{
		width:94%;
		position:relative;
		margin:0 auto;
		display:block;
	}
}



/* SPAAK
----------------------------------------------------- */
#spaak{
	background:#fff02e;
	position:relative;
	margin:150px auto 60px auto;
}
#spaak h3 img{
	width:100%;
	}
@media screen and (min-width: 1081px) {
	#spaak{
		padding:30px;
	}
	#spaak h3{
		position:absolute;
		width:350px;
		top:-40px;
		right:30px;
	}
	#spaakImg{
		float:left;
		margin:-60px 30px 10px -60px;
	}
	#spaak p{
		padding-top:50px;
	}
}
@media screen and (min-width: 641px) and (max-width:1080px) {
	#spaak{
		padding:20px;
	}
	#spaak h3{
		float:right;
		width:43vw;
		max-width:350px;
		margin-top:-40px;
	}
	#spaakImg{
		float:left;
		width:30vw;
		max-width:260px;
		margin:-50px 30px 10px -60px;
	}
	#spaak p{
		padding-top:10vw;
	}
}

@media screen and (max-width: 640px){
	#spaak{
		padding:5% 5% 10% 5%;
		
		margin:20% auto 10% auto;
	}
	#spaak h3{
		float:none;
		width:80%;
		max-width:350px;
		margin:-11.5vw auto 0 auto;
	}
	#spaak h3 img{
		width:100%;
	}
	#spaakImg{
		float:none;
		margin:10px auto 5% auto;
		display:block;
	}
}





/* THEATER
----------------------------------------------------- */
@media screen and (min-width: 1081px) {
	#theater{
		
	}
	#theater h3{
		width:763px;
		height:230px;
		background:url("../images/theater_ti.png") center top no-repeat;
		text-indent:-9999px;
	}
	
}
@media screen and (min-width: 641px) and (max-width:1080px) {
	#theater h3{
		width:100%;
		height:25vw;
		background:url("../images/theater_ti.png") center top no-repeat;
		background-size:100% auto;
		text-indent:-9999px;
	}
}

@media screen and (max-width: 640px){
	#theater{
		margin-bottom:20%;
	}
	#theater h3{
		width:100%;
		height:34vw;
		background:url("../images/theater_ti_sp.jpg") center top no-repeat;
		background-size:100% auto;
		text-indent:-9999px;
	}
}





/* contentsFooter
----------------------------------------------------- */
.contentsFooter{
	background:#cccccc;
	padding:60px 0 30px 0;
	font-size:0.7rem;
	color:#999;
	text-align:center;
	letter-spacing:0.15rem;
	position:relative;
}