@charset "UTF-8";

/* ========================================
  contents
======================================== */
html,
body {
  height: 100%;
}

.l-contents {
  background:
    url(../images/movie/movie_bg.png) left top no-repeat,
    url(../images/common/bg_dot_top.png) left top repeat-x,
    url(../images/common/bg_dot_bottom.png) left bottom repeat-x #244db6;
  background-size: 85.78125% auto, 30px 400px, 30px 400px; /* 1647 / 1920 * 100 */
  padding-bottom:20%;
  min-height: calc(100vh - 270px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-movie_inner {
  position: relative;
  width: 100%;
  min-width: 960px;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 7%;
}

.p-movie_ttl {
  width: 76.25%; /*976/1280*100*/
  margin-bottom: 60px;
  margin-left: auto;
  margin-right: auto;
}

.p-movie_area {
  width: 81.29%; /*1040/1280*100*/
  margin: 0 auto;
  padding: 15px 20px;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #000;
}

.p-movie_area-inner {
  padding: 0 10%;
  background:
    url(../images/movie/square.png) left top repeat-y,
    url(../images/movie/square.png) right top repeat-y;
  background-size: 8% auto;
}

.p-movie_frame {
  position: relative;
  padding-top: 56.25%;
}

.p-movie_frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-movie_list.chara {
  margin-top: 60px;
}

.p-movie_list {
  width: 65.625%; /*840/1280*100*/
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
  text-align: center;
  font-size: 0;
}

.p-movie_item {
  position: relative;
  display: inline-block;
  width: 30.95238%; /*260/840*100*/
  margin-bottom: 30px;
  margin-left: 1.1904761%;
  margin-right: 1.1904761%;
  cursor: pointer;
  vertical-align: top;
}

.p-movie_thumb {
  position: relative;
  background-color: #fff;
  border: 5px solid #000;
  border-radius: 6px;
}

.p-movie_thumb img {
  opacity: 1;
}
.p-movie_thumb:hover img,
.is-current .p-movie_thumb img {
  opacity: 0.7;
}

.p-movie_thumb:after {
  content: '';
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    url(../images/top/hover_lefttop.png) left top no-repeat,
    url(../images/top/hover_righttop.png) right top no-repeat,
    url(../images/top/hover_rightbottom.png) right bottom no-repeat,
    url(../images/top/hover_leftbottom.png) left bottom no-repeat;
  background-size: 8.541666% auto;
  pointer-events: none;
}

.p-movie_item.is-current .p-movie_thumb:after {
  display: block;
  -webkit-transform: scale(1.08,1.14);
  transform: scale(1.08,1.14);
}

body:not(.is-tablet) .p-movie_item:hover .p-movie_thumb:after {
  display: block;
}

body:not(.is-tablet) .p-movie_item:hover .p-movie_thumb:after {
  display: block;
  -webkit-animation: thumbHover 500ms steps(2) infinite;
  animation: thumbHover 500ms steps(2) infinite;
}

.p-movie_chara-left {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 30.9375%;
  width: 32.734375%; /*419/1280*100*/
  -webkit-transform: translate(-30.07159%, -4.65116%);
  transform: translate(-30.07159%, -4.65116%);
  pointer-events: none;
}
.is-tablet .p-movie_chara-left {
  -webkit-transform: translate(-22.43436%, -4.65116%);
  transform: translate(-22.43436%, -4.65116%);
}

.p-movie_chara-right {
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 30.59375%;
  width: 19.76562%; /*253/1280*100*/
  -webkit-transform: translate(17.78656%, -4.42037%);
  transform: translate(17.78656%, -4.42037%);
  pointer-events: none;
}
.is-tablet .p-movie_chara-right {
  -webkit-transform: translate(4%, -4.42037%);
  transform: translate(4%, -4.42037%);
}

.icon-webcm {
  position: absolute;
  top: 0;
  right: 0;
  width: 45.76923%; /*119/260*100*/
  -webkit-transform: translate(33.61345%, -39.34426%);
  transform: translate(33.61345%, -39.34426%);
  z-index: 10;
}

.is-new {
  position: absolute;
  top: 0;
  left: 50%;
  width: 66px;
  height: 22px;
  -webkit-transform: translate(-50%, -68.18181%);
  transform: translate(-50%, -68.18181%);
  background: url(../images/movie/icon_new.png) left top no-repeat;
  background-size: contain;
  z-index: 10;
}

.is-hover img.alpah {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

@-webkit-keyframes thumbHover {
  0% {
    -webkit-transform: scale(1.03,1.09);
    transform: scale(1.03,1.09);
  }
  100% {
    -webkit-transform: scale(1.08,1.14);
    transform: scale(1.08,1.14);
  }
}

@keyframes thumbHover {
  0% {
    -webkit-transform: scale(1.03,1.09);
    transform: scale(1.03,1.09);
  }
  100% {
    -webkit-transform: scale(1.08,1.14);
    transform: scale(1.08,1.14);
  }
}

#movie.is-tablet .l-wrapper {
  height: 100%;
  margin-bottom: -40px;
}
#movie.is-tablet .l-contents  {
  height: 100%;
}

#movie.is-tablet .l-footer {
  position: absolute;
  bottom: 40px;
}