@charset "utf-8";

/* /cm/ */
#cm .main_img { 
	text-align: center;
	background-color: #ebebeb;
}
#cm .main_img img { 
	margin: auto; 
}
#cm .inner {
	margin-left: auto;
	margin-right: auto;
	width: 980px;
/*	width: 470px;*/
	margin-bottom: 30px;
}
/*movie_list*/
#cm .movie_list {
	margin: 15px auto 0;
	/*width: 470px;*/
}
#movie .movie_list{ margin:0 auto 50px; }

#cm .movie_list li,#movie .movie_list li{
	width: 470px;
	float: left;
}
/*#cm .movie_list li:nth-child(2n) {margin-top: 40px;}*/

#cm .movie_list li:nth-child(n+3),#movie .movie_list li:nth-child(n+3) {
	margin-top: 40px;
} 
#cm .movie_list li a ,#movie .movie_list li a {
	display: block;
	position: relative;
	cursor: pointer;
}
#cm .movie_list li img,#movie .movie_list li img {
	width: 100%;
	height: auto;
}
#cm .movie_list li a span,#movie .movie_list li a span {
	display: block;
	width: 80px;
	height: 80px;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: rgba(0, 140, 211, 0.85);/* 0, 135, 195*/
	border-radius: 50%;
	z-index: 2;
}
#cm .movie_list li a span img ,#movie .movie_list li a span img {
	width: 24px;
	height: 34px;
	position: absolute;
	top: 24px;
	left: 32px;
}
#cm .movie_list li a > img {
	position: relative;
	z-index: 1;
	border: 1px solid #fff;}
#movie .movie_list li a > img {
	position: relative;
	z-index: 1;
	border: 1px solid #008cd3;}
@media screen and (min-width: 769px) {
	#cm .movie_list li a:hover span ,#movie .movie_list li a:hover span {
		background: rgba(3, 57, 142,0.85);/*230, 46, 139*/
	}
	#cm .movie_list li a:hover img, #movie .movie_list li a:hover img {
		opacity: 1;
	}
	#cm .movie_comingsoon {
		color: #fff;
		font-weight: bold;
		font-size: 32px;
		text-align: center;
		padding: 100px 0;
	}

#campaign{position: relative;
    z-index: 2;
    min-width: 980px;
    padding: 24px 0 82px;
    background-color: #def5ff;}

#campaign::before{	content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    top: -60px;
    width: 100%;
    height: 61px;
    background: url(../images/cm/bg_wavy_top.png) center top repeat-x;}

#cm .movie_list,
#movie .movie_list{	width: 980px;}

#cm .movie_list li:nth-child(2n),
#movie .movie_list li:nth-child(2n){ margin-left: 40px; }

}


#cm .movie_list li p,#movie .movie_list li p {
	text-align: center;
	margin: 10px auto 0;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}


#movie .movie_list li p{ color: #008cd3;}
#cm .movie_comingsoon {
	color: #fff;
	font-weight: bold;
	text-align: center;
	font-size: 40px;
	padding: 80px 0;
}

/*#cm_area1*/
#cm_area1 {
	position: relative;
	z-index: 2;
	background: url(../images/cm/bg_dots.gif) repeat left top;
}
#cm_area1::after {
	content: "";
	width: 100%;
	height: 26px;
	background: url(../images/cm/bg_top_wave.png) repeat-x top center;
	position: absolute;
	left: 0;
	bottom: -24px;
	transform: scale(1,-1);
}
#cm_area1 .bg_inner {
	background: url(../images/cm/bg_cm_obj01.png) no-repeat top center;
}
#cm_area1 .inner {
	padding: 90px 0 85px;
}
#cm_area1 .ttl {
	margin-bottom: 40px;
	text-align: center;
}
#cm_area1 .movie_list li:nth-child(2n) {
	margin-left: 40px;
}
#cm_area1 .movie_list li p {
	color: #008cd3;
}

/*#cm_area2*/
#cm_area2 {
	position: relative;
	background: url(../images/cm/bg_strip2.gif);
}
#cm_area2::after {
	content: "";
	width: 100%;
	height: 26px;
	/* background: url(../images/cm/bg_top_wave.png) repeat-x top left; */
	position: absolute;
	left: 0;
	bottom: -2px;
}
#cm_area2 .bg_inner {
	background: url(../images/cm/bg_cm_obj02.png) no-repeat center center;
}
#cm_area2 .inner {
	padding: 115px 0 160px;
}
#cm_area2 .ttl,#campaign .ttl {
	font-size: 50px;
	font-weight: 500;
	margin-bottom: 40px;
	text-align: center;
}
#cm .movie_list+h2{
	margin-top: 40px;
}
#cm_area2 .cmt {
	margin: -75px 0 0 -20px;

	width: 630px;
	margin-left: auto;
	margin-right: auto;
}

/*#cm_area3*/
#cm_area3 {
	position: relative;
	z-index: 2;
	background: url(../images/cm/bg_dots.gif) repeat left top;
}
#cm_area3 .inner {
	padding: 38px 0 120px;
}
#cm_area3 .cmt {
	text-align: right;
	margin-right: -20px;
}
#cm_area3 .movie_list li p {
	color: #008cd3;
}

#campaign .inner { padding: 100px 0 ;
	margin-left: auto;
	margin-right: auto;
	max-width: 980px; width: 100%;
	}
#campaign p a{ display: block;}
@media screen and (min-width: 769px) {
  #campaign .inner { margin-bottom: 30px;}
}
@media screen and (max-width: 768px) {
	#cm .main_img img {
		width: 100%;
	}
	#cm .inner {
		width: auto;
		padding: 0 30px;
	}
	/*movie_list*/
	#cm_area1 .ttl {
		margin-bottom: 0;
		text-align: center;
	}

	
	#cm .movie_list {margin: 35px auto 20px;}
	#cm .movie_list,
	#movie .movie_list {width: 470px;}
	#cm .movie_list li,#movie .movie_list li{
		width: auto;
		float: none;
	}
	#cm .movie_list li:nth-child(2n),
	#cm .movie_list li:nth-child(n+3) {
		margin: 0;
	}
#movie .movie_list li:nth-child(2n){ margin-top: 40px; }

	#cm .movie_list li + li {
		margin-top: 40px!important;
	}
	#cm .movie_list li a span {
		width: 120px;
		height: 120px;
	}
	#cm .movie_list li a span img {
		width: 37px;
		height: 52px;
		top: 35px;
		left: 47px;
	}
	#cm .movie_list li p, #movie .movie_list li p {
		margin: 10px auto 0;
		font-size: 26px;
	}
	#campaign p a{  font-size: 1.6em;
  padding: 4% 4%;
  line-height: 1.4em;}

	/*wave*/
	#campaign{ background-color: #def5ff; position: relative; }
	#campaign::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    top: -61px;
    width: 100%;
    height: 62px;
    background: url(../images/cm/sp/bg_wavy_top.png) center top repeat-x;
    background-size: auto 100%;}


	/*#cm_area1*/
	#cm_area1::after {
		background: url(../images/cm/sp/bg_top_wave.png) repeat-x top center;
		background-size: 100% auto;
		transform: inherit;
	}
	#cm_area1 .bg_inner {
		background: url(../images/cm/sp/bg_cm_obj01.png) no-repeat top center;
		background-size: 100% auto;
	}
	#cm_area1 .inner {
		padding: 60px 30PX 70px;
	}
	#cm_area1 .movie_list li:last-child {
		margin-top: 60px !important;
	}

	/*#cm_area2*/
	#cm_area2::after {
		content: "";
		width: 100%;
		height: 28px;
		background: url(../images/cm/sp/bg_bottom_wave.png) repeat-x top center;
		background-size: 100% auto;
		position: absolute;
		left: 0;
		bottom: -5px;
	}
	#cm_area2 .bg_inner {
		background: url(../images/cm/sp/bg_cm_obj02.png) no-repeat top center;
		background-size: 100%;
	}
	#cm_area2 .inner {
		padding: 110px 30px 130px;
	}
	#cm_area2 .ttl {
		font-weight: 100;
		margin-bottom: 48px;
		text-align: center;
	}
	#cm_area2 .cmt {
		width: 80%;
		margin: -88px 0 0 -16px;
	}	

	/*#cm_area3*/
	#cm_area3 {
		position: relative;
		z-index: 2;
		background: url(../images/cm/sp/bg_dots.gif) repeat-y left top;
		background-size: 100%;
	}
	#cm_area3 .inner {
		padding: 40px 30px 130px;
	}
	#cm_area3 .cmt {
		margin-right: 0;
	}
	#cm_area3 .movie_list li p {
		color: #008cd3;
	}
}

/*modal*/
.modalMovieWrapper {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	z-index: 1000;
	display: none;
}
.modalMovieWrapper .modalMovieBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: rgba(0,0,0,0.8);
}
.modalMovieWrapper .btnMovieModalClose01 {
	position: absolute;
	cursor: pointer;
	top: 15px;
	right: 15px;
	z-index: 3;
	width: 40px;
	height: 40px;
	transition: opacity 0.3s ease;
}
.modalMovieWrapper .btnMovieModalClose01 svg {
	width: 100%;
	height: 100%;
	fill: #fff;
}
.modalMovieWrapper .btnMovieModalClose01:hover {
	opacity: 0.7;
}
.modalMovieWrapper .modalMovieContents {
	width: 96%;
	max-width: 980px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
}
.modalMovieWrapper .modalMovieCover {
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}
.modalMovieWrapper .modalMovieInner .modalMovieContents iframe {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 8px rgba(0,0,0,0.6);
	background: #000;
}

@media screen and (max-width: 768px) {
	.modalMovieWrapper .btnMovieModalClose01 {
		width: 40px;
    height: 40px;
	}
	.modalMovieWrapper .btnMovieModalClose01:hover {
		opacity: 1;
	}
}