/* =================================
	video CSS
================================= */

/*	pickup__mov
============================== */

@media all and (min-width: 768px) {
#movie-square{width:640px;height:640px;margin:10px auto;  line-height: 1.4;}
.embed-tbsplayer{width: 980px;height:550px;}
}
@media all and (max-width: 767px) {
#movie-square{width:320px;height:320px;margin:10px auto;}
}
#movie-box h3{line-height: 1.8;}


#movie-box {width: 980px;margin:0px auto 10px auto;}
#movie-box2{width:900px;margin:10px auto;}
.movie-tit{background: url(../img/title-movie.png) no-repeat 0 0; width:980px; height:80px; margin:0px auto; padding:0; }

#container h3{border-left:5px solid #fed205; padding:.5em; background:#0e2e55; color:#fff; font-size:1.5em;margin:5px auto;}

#movie-box h3 {  text-align:center;padding:.5em; background:#0e2e55; color:#fff; font-size:1.5em;margin:5px auto;}

@media all and (min-width: 768px) {
ul.m_list__mov li.unit h4{
  line-height: 1.4;
  color: #FFFFFF;
  margin-bottom: 10px;
  font-size:85%;
  text-align:center
}
}


@media all and (max-width: 767px) {
 #movie-box{width:100%;margin:10px auto;}
#movie-box2 {width:100%;margin:10px auto;}
#movie-box p{color:#FFFFFF;font-size:150%;}
.movie-tit{width:100%; height:0; padding:20% 0 0; background-size: cover;}
}

/*  movie_list
============================== */
ul.m_list__mov:after {
  content: "";
  display: block;
  clear: both
}

ul.m_list__mov li.unit{
  float: left;
  background:#252a58;]

}


ul.m_list__mov li.unit a {
  display: block;
  text-decoration: none;
}

ul.m_list__mov li.unit a:hover {
  opacity: .6;
}
ul.m_list__mov li.unit a span{
  display: block;
  position: relative;
}

ul.m_list__mov li.unit a span:before {
  box-sizing: border-box;
  background-color: #e60a2f;
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  bottom: 10px;
}

ul.m_list__mov li.unit a span:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  position: absolute;
}

ul.m_list__mov li.unit a span:before,
ul.m_list__mov li.unit a span:after{
	content: "";
	display: block;
}

ul.m_list__mov li.unit h3{
  line-height: 1.4;
  color: #cf0b89;
  margin-bottom: 10px;
  text-align: justify;

}




@media all and (min-width: 768px) {
ul.m_list__mov {width: 980px;margin:0px auto 0px auto;padding:15px 0px 30px 30px;background:#fff;color: #030303;border-bottom:5px solid #fed205;}
ul.m_list__mov li.unit {  width: 290px;  margin-right: 25px;  margin-bottom: 20px; height:250px;}
ul.m_list__mov li.unit:nth-child(3n) { margin-right: 0}
ul.m_list__mov li.unit a span{  width: 290px;  height: 163px;  margin:0 0 13px;  background-size: 290px 163px;}
ul.m_list__mov li.unit a span:before{ width: 40px; height: 40px;}
ul.m_list__mov li.unit a span:after{ left: 25px; bottom: 21px; border-width: 9px 0 9px 14px;}
ul.m_list__mov li.unit img {width: 290px; height: 163px;}
ul.m_list__mov li.unit h3{ font-size: 87.5%;}
}

@media all and (max-width: 767px) {
ul.m_list__mov li.unit h4{
line-height: 1.4;
margin-bottom: 10px;
font-size:120%;
text-align:center;
}

ul.m_list__mov {
width: 100%;
margin: 20px 0 0;
font-size:60%;
background:#fff;
color: #030303;
padding:10px;
}

ul.m_list__mov li.unit{width: 49%;float: left;margin: 2px;font-size:50%;padding-bottom:30px;}
ul.m_list__mov li.unit:nth-child(2n) { margin-right: 0}
ul.m_list__mov li.unit a span{height: 0; padding-top: 56.206%;overflow: hidden;background-size: 100% 100%;}
ul.m_list__mov li.unit a span:before{width: 25px;  height: 25px;}
ul.m_list__mov li.unit a span:after{left: 19px;  bottom: 17px;  border-width: 6px 0 6px 9px;}
ul.m_list__mov li.unit h3{font-size: 75%;margin: 7px 0 0;padding:0 5px; }
}


.mov { position:relative; height:0;margin:0px auto; padding-top:56.2244897959184%; }
.mov-inner { position:absolute; width:100%; height:100%; left:0; top:0; margin:10px auto; }

@media all and (max-width: 767px) {
.mov-inner iframe{ position:absolute; top: 0; right:0; width:100%!important; height:100%!important; }
}