@charset "utf-8";

html {
  font-size: 62.5%;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
}
.footer__pagetop-button,
#js-junkoshimada-pagetop-area{display: none;}
.container, .navbar-static-top .container, .navbar-fixed-bottom .container, .span12 {
  width: 120rem;
}
.container {
  margin-right: auto;
  margin-left: auto;
}

/* ------
--------------------- */

.p-backstage__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 4rem;
}
.p-backstage__li {
  flex-basis: 33%;
  max-width: 33%;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
}
li.p-backstage__li:nth-child(3n) {
  margin-right: 0;
}
.p-backstage__nav:after{
  content:"";
  display:block;
  width: 33%;
  height:0;
}

li.p-backstage__li.movie {
  text-align: center;
}
li.p-backstage__li.movie {
  position: relative;
}
span.inner {
  position: absolute;
  height: 100%;
  right: 0;
  left: 0;
}
video {
  height: inherit;
  width: 100%;
  object-position: center;
  object-fit: cover;
}
.video-wrap {
  position: relative;
}
.video-btn {
  content: "";
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:6rem;
  cursor: pointer;
}
/* DH_FRONT_DEPT-7277 */
li.p-backstage__li.movie.video-wrap.videos-row {
  height: 36.48rem;
  padding-bottom: calc(100% / 3 - 4% / 3) !important;
}
li.p-backstage__li.movie.video-wrap.videos-row.rectangle-img {
  position: relative;
  overflow: hidden;
}
li.p-backstage__li.movie.video-wrap.videos-row.rectangle-img img {
  position: absolute;
  transition: -50%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

li.p-backstage__li {
  margin-bottom: 2%;
  margin-right: 2%;
  width: calc(100% / 3 - 4% / 3) !important;
  max-width: calc(100% / 3 - 4% / 3) !important;
  flex-basis: calc(100% / 3 - 4% / 3) !important;
}
.p-backstage__nav {
  width: calc(100% - 5%);
  margin: 0 auto;
  margin-bottom: 4rem;
  justify-content: space-between;
}
.p-backstage__nav::after {
  display: block;
  content: "";
  max-width:  calc(100% / 3 - 4% / 3) !important;
  width: calc(100% / 3 - 4% / 3) !important;
  flex-basis: calc(100% / 3 - 4% / 3) !important;
}
li.p-backstage__li.movie.video-wrap.videos-row video{
  object-position: top;
  font-family: 'object-fit: cover; object-position: top;'
}

/* for tablet */
 
@media only screen and ( min-width: 750px ) and ( max-width: 1200px ){
  html {
   font-size: calc(10* (100vw / 1200));
  }
 
}

/* for sp */
@media only screen and (max-width: 767px) {

  #page-body {
      padding: 0 calc(20* (100vw / 750));
      width: auto;
  }
  .container, .navbar-static-top .container, .navbar-fixed-bottom .container, .span12 {
    width: calc(750* (100vw / 750));
  }

  /* ------
--------------------- */
  .p-backstage__nav {
    margin-bottom:  calc(80* (100vw / 750));
  }
  li.p-backstage__li {
    margin-bottom: 1%;
    margin-right: 1%;
    width: calc(100% / 3 - 2% / 3) !important;
    max-width: calc(100% / 3 - 2% / 3) !important;
    flex-basis: calc(100% / 3 - 2% / 3) !important;
  }
  .video-btn {
    bottom: calc(12* (100vw / 750));
  }
  /* DH_FRONT_DEPT-7277 */
  li.p-backstage__li.movie.video-wrap.videos-row {
    height: calc(200* (100vw / 750));
    padding-bottom: calc(100% / 3 - 2% / 3) !important;
  }

  .p-backstage__nav {
    margin-bottom: calc(80* (100vw / 750));
  }

}