/*	bn_shisyakai
============================== */
p.bn_shisyakai a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 110%;
  background-image: url(../img/top/bn_shisyakai.jpg);
  background-size: 100%;
  box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.3);
  background-repeat: no-repeat;
}
@media all and (min-width: 768px) {
  p.bn_shisyakai a {
    width: 980px;
    height: 145px;
    margin: 20px auto 0;
    border-radius: 20px;
  }
}
@media all and (max-width: 767px) {
  div.shisyakai {
    padding: 0 10px;
  }
  p.bn_shisyakai a {
    width: 100%;
    height: auto;
    padding: 21.0144927536232% 0 0;
    display: block;
    position: relative;
    background-size: cover;
    background-position: center;
    margin: 10px auto 0;
    border-radius: 5px;
  }
  p.bn_shisyakai a span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
/*	sptrailer
============================== */
p.sptrailer a,
p.sptrailer a span,
p.sptrailer a span img {
  display: block;
  margin-bottom: 10px;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}
p.sptrailer a span {
  position: relative;
}
p.sptrailer a span img {
  position: absolute;
}
@media all and (min-width: 768px) {
  p.sptrailer {
    float: left;
}
p.sptrailer:not(:last-child) {
  margin-right: 20px;
}
p.sptrailer:last-child {
  width: 500px;
}
  p.sptrailer a,
  p.sptrailer a span,
  p.sptrailer a span img {
    width: 460px;
    height: 124px;
  }
  p.sptrailer2 a,
  p.sptrailer2 a span,
  p.sptrailer2 a span img {
    width: 500px;
    height: 124px;
  }

}
@media all and (max-width: 767px) {
  p.sptrailer {
    padding: 0 2%;
  }
  p.sptrailer a span {
    display: block;
    background-color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 110%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    height: 0;
    padding-top: 26.9565217391304%;
  }
  p.sptrailer2 a span {
    padding-top: 24.8%;
}

  p.sptrailer a span img {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}
/*	banner_area
============================== */
.banner_area p a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 110%;
  box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.2);
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  background-size: 100%;
}
.banner_area p.dvd a {
  background-image: url(../img/top/bn_dvd.jpg);
}
.banner_area p.goods a {
  background-image: url(../img/top/bn_goods.jpg);
}
.banner_area p.paravi a {
  background-image: url(../img/top/bn_paravi.jpg);
  border: 2px solid #014f99;
}
.banner_area p.tbsfree a {
  background-image: url(../img/top/bn_tbsfree.jpg);
}
@media all and (min-width: 768px) {
  .banner_area {
    width: 980px;
    margin: 20px auto 0;
  }
  .banner_area p a {
    width: 312px;
    height: 155px;
    float: left;
    border-radius: 10px;
    background-size: auto;
    margin-bottom: 22px;
  }
  .banner_area p:not(:last-child) a {
    margin-right: 22px;
  }
  .banner_area p.paravi a {
    border: 2px solid #014f99;
  }
}
@media all and (max-width: 767px) {
  .banner_area {
    text-align: center!important;
    margin: 2% 2% 0;
  }
  .banner_area p {
    display: inline-block;
    width: 49%;
    height: auto;
  }
  .banner_area p a {
    width: 100%;
    height: 100%;
    /* float: left; */
    position: relative;
    height: 0;
    padding-top: 49.6794871794872%;
    border-radius: 5px;
    margin-bottom: 2%;
  }
  .banner_area p:not(:nth-child(2n)) a {
    margin-right: 2%;
  }
  .banner_area p a span {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
  }
  .banner_area p.paravi a {
    border: 1px solid #014f99;
    height: 0;
  }
}
/*	spcnt
============================== */
.spcnt p a {
  display: block;
  white-space: nowrap;
  text-indent: 110%;
  overflow: hidden;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.spcnt p.quiz a {
  background-image: url(../img/top/quiz_btn.png);
}
.spcnt p.favorite a {
  background-image: url(../img/top/favorite_btn.png);
}
.spcnt p.gallery a {
  background-image: url(../img/top/gallery_btn.png?9);
}
.spcnt p.interview a {
  background-image: url(../img/top/interview_btn.png?8);
}

@media all and (min-width: 768px) {
  .spcnt p a {
    width: 480px;
    height: 203px;
    float: left;
    border-radius: 0 0 20px 20px;
    box-shadow:0px 13px 10px -11px rgba(0,0,0,0.3);
  }
  .spcnt p:nth-child(odd) a {
    margin-right: 20px;
  }
  .spcnt p a span {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0.6)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
    transition: opacity 0.3s ease 0s;
  }
  .spcnt p a span:hover {
    opacity: 1;
  }
}
@media all and (max-width: 767px) {
  .spcnt p a {
    position: relative;
    height: 0;
    padding-top: 42.2916666666667%;
  }
  .spcnt p a span {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

/*	trailer_off
============================== */
.trailer_off, .trailer_off span {
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  white-space: nowrap;
  overflow: hidden;
  text-indent: 110%;
}

@media all and (min-width: 768px) {
  .trailer_off, .trailer_off span {
    width: 500px;
    height: 281px;
  }
}

@media all and (max-width: 767px) {
  .trailer_off {
    position: relative;
    height: 0;
    padding-top: 46.875%;
  }
  .trailer_off span {
    display: block;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}