@charset "utf-8";

/*=====================================================
  spring-summer
======================================================*/
._logo-set{
	margin-top: 5%;
}
._visual ._logo{
	width: 15%;
	margin: 0 auto 3%;
}
._visual ._copy{
	width: 12%;
	margin: 0 auto;
}
@media screen and (max-width: 640px){
	._visual ._logo{
		width: 28%;
	}
	._visual ._copy{
		width: 8%;
	}
}

h2{
	width: auto;
	height: 60px;
	text-align: center;
	margin-bottom: 75px;
}
h2 img{
	width: auto;
	max-height: 100%;
	max-width: 100%;
	height: auto;
}
section{
	position: relative;
}
@media screen and (max-width: 640px){
	h2{
		width: auto;
		height: 35px;
		text-align: center;
		margin-bottom: 75px;
	}
	h2 img{
		width: auto;
		max-height: 100%;
		max-width: 100%;
		height: auto;
	}
}

/*=====================================================
navigation
======================================================*/
nav{}
._navi{
	margin: 30px auto;
}
._navi ul{
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	justify-content: center;
}
._navi ul li{
	max-width: 220px;
	width: calc(100% / 3 - 20px);
	margin: 5px 10px;
}
._navi ul li a{
	color: #fff;
	background:#ffa388;
	text-align: center;
	line-height: 45px;
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 14px;
	transition: all .5s;
}
._navi ul li a:hover{
	background:#FFD22D;
}

._navi ._sns{
	display: none;
}

@media screen and (max-width: 640px){
	nav{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99999;
	}
	._navi{
		width: 100%;
		position: absolute;
		top: 0;
		right: 0;
		/*background: #db0093;*/
		display: none;
		padding: 10%;
		box-sizing: border-box;
		margin: 0;
		min-height: 100vh;
	}
	._navi:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		opacity: 0.8;
		background:linear-gradient(135deg, #F29F6C, #7EC1F9);
	}
	._navi ul{
		display: block;
	}
	._navi ul li{
		position: relative;
		width: 100%;
		font-weight: 600;
		max-width: 100%;
		margin: 0;
	}
	._navi ul li a{
		color: #fff;
		background: none;
		line-height: initial;
		padding: 15px 0;
		font-size: 20px;
	}
	._navi ul li a span{
		color: #ff0;
	}
	._navi ul._sns li{
		width: auto;
	}
	._navi ul._sns li a{
		display: block;
		color: #db0093;
		text-align: center;
		font-size: 25px;
		line-height: 45px;
		background: #fff;
		border-radius: 50%;
		width: 45px;
		height: 45px;
		margin: 0 8px;
	}
	._navi ul._sns li a svg{
		fill: #db0093;
	}
	._navi ._sns{
		width: 55px;
		height: 55px;
		margin: 0 auto;
		display: block;
		position: relative;
	}
	._navi ._sns a{
		display: block;
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	._navi ._sns a:before{
		content: "";
		border: solid 1px #fff;
		transform: rotate(-45deg);
		position: absolute;
		display: block;
		width: 75%;
		height: 75%;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		transition: all .5s;
	}
	._navi ._sns a:hover:before{
		background: rgba(255,255,255,.5);
	}	
	.menu {
		width: 40px;
		height: 40px;
		top: 10px;
		right: 10px;
		position:absolute;
		cursor:pointer;
		z-index:999;
		/*background: #db0093;*/
		border-radius: 5px;
		/*padding: 5px;*/
	}
	.menu1 {
		width: 25px;
		height: 3px;
		background: linear-gradient(-70deg, #7EC1F9, #F29F6C);
		position:absolute;
		top: 10px;
		left: 7px;
	}
	.menu2 {
		width: 25px;
		height: 3px;
		background: linear-gradient(-70deg, #7EC1F9, #F29F6C);
		position:absolute;
		top: 18px;
		left: 7px;
	}
	.menu3 {
		width: 25px;
		height: 3px;
		background: linear-gradient(-70deg, #7EC1F9, #F29F6C);
		position:absolute;
		top: 26px;
		left: 7px;
	}
	.menu1,.menu2,.menu3 {
		transition:all .5s ease-out;
		-o-transition:all .5s ease-out;
		opera-moz-transition:all .5s ease-out;
		firefox-webkit-transition:all .5s ease-out;
		chromesafari-ms-transition:all .5s ease-out;
		border-radius: 2px;
		 /*box-shadow: 0 0 3px 2px rgba(255,255,255,0.5); */
	}
	.menuclick1 {
		top:18px;
		-moz-transform:rotate(405deg);
		-webkit-transform:rotate(405deg);
		-o-transform:rotate(405deg);
		-ms-transform:rotate(405deg);
		transform:rotate(405deg);
		box-shadow: none; 
		background:#fff;
	}
	.menuclick2 {
		opacity:0
	}
	.menuclick3 {
		top:18px;
		-moz-transform:rotate(-405deg);
		-webkit-transform:rotate(-405deg);
		-o-transform:rotate(-405deg);
		-ms-transform:rotate(-405deg);
		transform:rotate(-405deg);
		box-shadow: none;
		background:#fff;
	}
}

/*=====================================================
roadshow
======================================================*/
._roadshow{
	padding: 100px 0 50px;
}
._roadshow img{
	display: block;
	width: 60%;
	margin: 0 auto;
	max-width: 345px;
}
@media screen and (max-width: 640px){
	._roadshow{
		padding: 50px 0 0;
	}
}
/*=====================================================
trailer
======================================================*/
._trailer{
	padding: 200px 0;
}
.movie_wrap .movie_bnr ul li a{
	background:#FFDCDC !important;
}
._trailer:after{
	content: "";
	background:url("../img/trailer-pattern-l_pc.png") no-repeat center left;
	width: 20%;
	left: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	display: block;
	position: absolute;
	background-size: 100% auto;
	z-index: -1;
}
._trailer:before{
	content: "";
	background:url("../img/trailer-pattern-r_pc.png") no-repeat center left;
	width: 20%;
	right: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	display: block;
	position: absolute;
	background-size: 100% auto;
	z-index: -1;
}
.movie_wrap{
    margin-bottom: 0;
}
.movie_wrap .movie_bnr a .play_name{
	text-align: center;
	margin-top: -42px;
	font-size: 35px;
	letter-spacing: .1em;
	font-weight: lighter;
	color: #FF8593;
	line-height: 1;
}
@media screen and (max-width: 640px){
	._trailer{
		padding: 150px 0;
	}
	._trailer:after{
		content: "";
		background:url("../img/trailer-pattern-l_sp.png") no-repeat center left;
		width: 25%;
		background-size: 100% auto;
	}
	._trailer:before{
		content: "";
		background:url("../img/trailer-pattern-r_sp.png") no-repeat center left;
		width: 25%;
		background-size: 100% auto;
	}
	.movie_wrap .movie_bnr{
		width: 90%;
		margin: 0 auto;
	}
}

/*=====================================================
intro
======================================================*/
._intro h2{
	margin-bottom: 100px;
}
._intro-wrap{
	background: url("../img/intro-bg_pc.jpg") no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
	position: relative;
	padding: 100px 0;
}
._intro-wrap h3{
	max-width: 1020px;
	width: 75%;
	margin: 0 auto;
	position: absolute;
	top: -50px;
	left: 0;
	right: 0;
	margin: auto;
}
._intro-ph{
	width: 70%;
}
._intro-wrap h4{
	max-width: 900px;
	width: 70%;
	margin: 10% auto 3%;
}
._intro-body{
	width: 60%;
	z-index: 1;
	position: relative;
	margin: 0 auto;
}
/*._intro-body > *{
	background: #fff;
	box-shadow: 10px 10px 0px -5px #FF6478;
}*/
._intro-txt{
	padding: 30px;
	font-size: 18px;
	font-weight: bold;
}
._intro-txt p + p{
	margin-top: 1em;
}
@media screen and (max-width: 640px){
	._intro h2{
		width: auto;
		height: 95px;
		text-align: center;
		margin-bottom: 75px;
	}
	._intro-wrap{
		background: url("../img/intro-bg_sp.jpg") no-repeat center center;
		background-attachment:inherit;
		background-size: auto 100%;
		padding: 50px 0;
	}

	._intro-wrap h3{
		top:-25px;
		width: 90%;
	}
	._intro-ph{
		width: 100%;
	}
	._intro-wrap h4{
		width: 90%;
	}	
	._intro-body{
		width: 100%;
		margin-top: -10%;
	}
	._intro-body ._intro-txt{
		width: 90%;
		margin: 0 auto;
		font-size: 16px;
		padding: 35px 20px;
	}
}

/*=====================================================
story
======================================================*/
._story{
	background: url("../img/story-bg_pc.jpg") no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
	padding: 100px 0;
	color: #666;
	position: relative;
}
._story:after{
	content: "";
	background:url("../img/story-pattern-l_pc.png") no-repeat center left;
	width: 20%;
	left: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	display: block;
	position: absolute;
	background-size: 100% auto;
}
._story:before{
	content: "";
	background:url("../img/story-pattern-r_pc.png") no-repeat center left;
	width: 20%;
	right: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	display: block;
	position: absolute;
	background-size: 100% auto;
}
._story p{
	font-size: 18px;
	text-align: center;
	line-height: 2.5;
	font-weight: 600;
}
@media screen and (max-width: 640px){
	._story{
		background: url("../img/story-bg_sp.jpg") no-repeat center center;
		background-attachment:inherit;
	}
	._story:after{
		content: "";
		background:url("../img/story-pattern-l_sp.png") no-repeat center left;
		width: 40%;
		left: 0;
		top: 0;
		bottom: 0;
		height: 100%;
		display: block;
		position: absolute;
		background-size: 100% auto;
	}
	._story:before{
		content: "";
		background:url("../img/story-pattern-r_sp.png") no-repeat center left;
		width: 40%;
		right: 0;
		top: 0;
		bottom: 0;
		height: 100%;
		display: block;
		position: absolute;
		background-size: 100% auto;
	}
	._story p{
		width: 90%;
		margin: 0 auto;
		text-align: left;
		font-size: 16px;
	}
}


/*=====================================================
cast
======================================================*/
._cast{
	background: url("../img/cast-bg.jpg") no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
	padding: 100px 0;
}
._cast-wrap{
	width: 800px;
	/*width: 90%;*/
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
._cast-slide{
  margin:0 0 5px 0;
	/*width: 62%;*/
	width: 500px;
}

/*選択するサムネイル画像の設定*/

._cast-slide-thumb {
	/*width: 38% !important;*/
	width: 300px;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
}
._cast-slide-thumb ul{
	width: calc(100% / 2);
}
._cast-slide-thumb li{
  cursor: pointer;
  outline: none;
 /* background:#333;*/
  /*width:25%!important;*/
}

._cast-slide-thumb li img{
}

._cast-slide-thumb li.slick-current img{
  opacity: .4;/*選択されているものは透過しない*/
}

.slick_thumb .slick-track {
	transform:unset!important;
}
.thumbnail-current{
	opacity: .4;
}
@media screen and (max-width: 640px){
	._cast-wrap{
		width: 100%;
		display: block;
	}
	._cast-slide{
		width: 100%;
		margin-bottom: 0;
	}
	._cast-slide-thumb{
		width: 100%;
	}
	._cast-slide-thumb ul{
		width: 100%;
		display: flex;
	}
	._cast-slide-thumb li {
		width: calc(100% / 5);
	}
}

/*=====================================================
trailer
======================================================*/
.foot_area{}
.foot_area ._foot-txt{
	max-width: 540px;
	width: 95%;
	margin: 0 auto 50px;
}
.foot_area ._foot-logo{
	max-width: 225px;
	width: 60%;
	margin: 0 auto 75px;
}
.foot_area ._foot-link{
	max-width: 345px;
	width: 90%;
	margin: 0 auto 75px;
}
.foot_area ._foot-link a{
	display: block;
	border: solid 2px #666;
	position: relative;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	padding: 20px 0;
	transition: all .5s;
}
.foot_area ._foot-link a:before{
	content: "";
	border: solid 1px #666;
	display: block;
	margin: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	position: absolute;
	top: 0;
	left: 0;
	transition: all .5s;
}
.foot_area ._foot-link a p{
	font-size: 18px;
	font-weight: bold;
}
.foot_area ._foot-link a span{
	font-size: 14px;
}
.foot_area ._foot-link a:hover{
	color: #fff;
	background: #666;
}
.foot_area ._foot-link a:hover:before{
	content: "";
	border: solid 1px #fff;
}

._foot-credit{
	max-width: 940px;
	width: 95%;
	margin: 0 auto;
}
@media screen and (max-width: 640px){
	
}