/* =================================
	video CSS
================================= */
/*	header main_image
============================== */
.head-top {background-image:url(../img/header-bg.jpg);background-repeat: repeat-x;}




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

.pickup__mov{
  height: auto;
}
.pickup__mov h2 {
    color: #d70a30;
    text-shadow: 1px 1px 2px #bfbfbf;
    margin: 15px 0 0;
}
@media all and (min-width: 768px) {
.pickup__mov{
  width: 890px;
  margin: 20px auto 40px;
}
.pickup__mov h2 {
  font-size: 143.8%;
}
}
@media all and (max-width: 767px) {
.pickup__mov{
  margin: 10px auto 20px;
}
.pickup__mov h2 {
  font-size: 100%;
}
}

/*  movie_list
============================== */

h3.m_heading {
  color: #fff;
  background-color: #d70a30;
  background-image: -moz-linear-gradient( #dd70a30 0%, #ba0707 100%);
  background-image: -webkit-linear-gradient( #d70a30 0%, #ba0707 100%);
  background-image: linear-gradient( #d70a30 0%, #ba0707 100%);
  border-top:1px solid #dab568;
  border-bottom:1px solid #9d731a;
  text-shadow: 1px 1px 2px #ba960b;
}
ul.m_list__mov:after {
  content: "";
  display: block;
  clear: both
}

ul.m_list__mov li.unit{
  float: left;
}


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: #d70a30;
  margin-bottom: 10px;
  text-align: justify
}

@media all and (min-width: 768px) {
h3.m_heading {
  margin: 40px 0px;
  font-size: 125%;
  font-weight: 4;
  padding: 15px;
}
ul.m_list__mov {
  width: 920px;
  margin: 20px auto 0
}
ul.m_list__mov li.unit {
  width: 290px;
  margin-right: 25px;
  margin-bottom: 20px;
}
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) {
h3.m_heading {
  margin: 20px 0px;
  font-size: 87.5%;
  font-weight: 2;
  padding: 10px;
}
ul.m_list__mov {
  width: 100%;
  margin: 20px 0 0
}
ul.m_list__mov li.unit{
  width: 50%;
  float: left;
  margin-bottom: 20px;
}
ul.m_list__mov li:nth-child(odd) a{
  display: block;
  margin-right: 7px;
}
ul.m_list__mov li:nth-child(even) a{
  display: block;
  margin-right: 0px;
}
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; 
}
}
