.main {
  background: url(../img/sp/main_bg.jpg) no-repeat top center;
  background-size: 100%;
  height: calc(530 / 750 * 100vw);
}
.main img {
  width: 100%;
  display: block;
  vertical-align: bottom;
}

.gallery {
  background: #fff;
}
.gallery img {
  width: 100%;
  display: block;
  vertical-align: bottom;
}
.gallery > .con-inner {
  padding: calc(94 / 750 * 100vw) calc(55 / 750 * 100vw) calc(155 / 750 * 100vw);
}
.gallery > .con-inner > .message {
  width: calc(560 / 750 * 100vw);
  margin: calc(60 / 750 * 100vw) auto calc(150 / 750 * 100vw);
}
.gallery > .con-inner > .ttl {
  font-size: calc(52 / 750 * 100vw);
  line-height: 1.27;
  text-align: center;
  color: #b0181f;
}
.gallery > .con-inner > .movie,
.gallery > .con-inner > .brandMovie,
.gallery > .con-inner > .poster {
  text-align: center;
}
.gallery > .con-inner > .movie .txtTtl,
.gallery > .con-inner > .brandMovie .txtTtl,
.gallery > .con-inner > .poster .txtTtl {
  padding-top: calc(160 / 750 * 100vw);
  font-size: calc(42 / 750 * 100vw);
  line-height: 1;
  text-align: center;
  color: #b0181f;
  margin-bottom: calc(57 / 750 * 100vw);
}
.gallery > .con-inner > .movie .logoTtl,
.gallery > .con-inner > .brandMovie .logoTtl,
.gallery > .con-inner > .poster .logoTtl {
  margin: calc(110 / 750 * 100vw) auto calc(40 / 750 * 100vw);
}
.gallery > .con-inner > .movie .img,
.gallery > .con-inner > .brandMovie .img,
.gallery > .con-inner > .poster .img {
  display: inline-block;
  margin: 0 auto calc(30 / 750 * 100vw);
}
.gallery > .con-inner > .movie .txt,
.gallery > .con-inner > .brandMovie .txt,
.gallery > .con-inner > .poster .txt {
  font-size: calc(30 / 750 * 100vw);
  line-height: 1.5;
  text-align: center;
}
.gallery > .con-inner > .movie.cm .img {
  background: url(../img/sp/cm_thumbnail.jpg) no-repeat top center;
  background-size: 100%;
  width: calc(640 / 750 * 100vw);
  height: calc(360 / 750 * 100vw);
}
.gallery > .con-inner > .brandMovie > .movie.dprogram .logoTtl {
  background: url(../img/sp/dprogram_logo.png) no-repeat top center;
  background-size: 100%;
  width: calc(237 / 750 * 100vw);
  height: calc(90 / 750 * 100vw);
}
.gallery > .con-inner > .brandMovie > .movie.dprogram .img {
  background: url(../img/sp/dprogram_thumbnail.jpg) no-repeat top center;
  background-size: 100%;
  width: calc(640 / 750 * 100vw);
  height: calc(360 / 750 * 100vw);
}
.gallery > .con-inner > .brandMovie > .movie.haku .logoTtl {
  background: url(../img/sp/haku_logo.png) no-repeat top center;
  background-size: 100%;
  width: calc(209 / 750 * 100vw);
  height: calc(42 / 750 * 100vw);
}
.gallery > .con-inner > .brandMovie > .movie.haku .img {
  background: url(../img/sp/haku_thumbnail.jpg) no-repeat top center;
  background-size: 100%;
  width: calc(640 / 750 * 100vw);
  height: calc(360 / 750 * 100vw);
}
.gallery > .con-inner > .brandMovie > .movie.senka .logoTtl {
  background: url(../img/sp/senka_logo.png) no-repeat top center;
  background-size: 100%;
  width: calc(280 / 750 * 100vw);
  height: calc(91 / 750 * 100vw);
}
.gallery > .con-inner > .brandMovie > .movie.senka .img {
  background: url(../img/sp/senka_thumbnail.jpg) no-repeat top center;
  background-size: 100%;
  width: calc(640 / 750 * 100vw);
  height: calc(360 / 750 * 100vw);
}
.gallery > .con-inner > .brandMovie > .movie > .logoTtl {
  text-indent: -9999px;
  overflow: hidden;
}
.gallery > .con-inner > .poster .img {
  background: url(../img/sp/poster_thumbnail.jpg) no-repeat top center;
  background-size: 100%;
  width: calc(511 / 750 * 100vw);
  height: calc(723 / 750 * 100vw);
}

@media screen and (min-width: 768px) {
  .main {
    background: url(../img/pc/main_bg.jpg) no-repeat top center;
    background-size: calc(1600 / 980 * 100vw);
    margin-top: calc(112 / 980 * 100vw);
    height: calc(400 / 980 * 100vw);
  }
}
@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 768px) and (min-resolution: 192dpi) {
  .main {
    background: url(../img/pc/retina/main_bg.jpg) no-repeat top center;
    background-size: calc(1600 / 980 * 100vw);
  }
}

@media screen and (min-width: 768px) {
  .gallery {
    background: #f7f8fa;
    background: linear-gradient(90deg, #f7f8fa 0%, #efefef 15%, white 50%, #efefef 85%, #f7f8fa 100%);
  }
  .gallery > .con-inner {
    padding: calc(80 / 980 * 100vw) 0 calc(120 / 980 * 100vw);
  }
  .gallery > .con-inner > .message {
    width: calc(560 / 980 * 100vw);
    margin: calc(50 / 980 * 100vw) auto calc(114 / 980 * 100vw);
  }
  .gallery > .con-inner > .ttl {
    font-size: calc(42 / 980 * 100vw);
    line-height: 1;
  }
  .gallery > .con-inner > .movie,
  .gallery > .con-inner > .brandMovie,
  .gallery > .con-inner > .poster {
    text-align: center;
  }
  .gallery > .con-inner > .movie .txtTtl,
  .gallery > .con-inner > .brandMovie .txtTtl,
  .gallery > .con-inner > .poster .txtTtl {
    padding-top: calc(110 / 980 * 100vw);
    font-size: calc(32 / 980 * 100vw);
    margin-bottom: calc(60 / 980 * 100vw);
  }
  .gallery > .con-inner > .movie .logoTtl,
  .gallery > .con-inner > .brandMovie .logoTtl,
  .gallery > .con-inner > .poster .logoTtl {
    margin: calc(70 / 980 * 100vw) auto calc(30 / 980 * 100vw);
  }
  .gallery > .con-inner > .movie .img,
  .gallery > .con-inner > .brandMovie .img,
  .gallery > .con-inner > .poster .img {
    margin: 0 auto calc(25 / 980 * 100vw);
    cursor: pointer;
  }
  .gallery > .con-inner > .movie .txt,
  .gallery > .con-inner > .brandMovie .txt,
  .gallery > .con-inner > .poster .txt {
    font-size: calc(18 / 980 * 100vw);
  }
  .gallery > .con-inner > .movie.cm .img {
    background: url(../img/pc/cm_thumbnail.jpg) no-repeat top center;
    background-size: 100%;
    width: calc(700 / 980 * 100vw);
    height: calc(393 / 980 * 100vw);
  }
}
@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 768px) and (min-resolution: 192dpi) {
  .gallery > .con-inner > .movie.cm .img {
    background: url(../img/pc/retina/cm_thumbnail.jpg) no-repeat top center;
    background-size: 100%;
  }
}
@media screen and (min-width: 768px) {
  .gallery > .con-inner > .brandMovie {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 calc(50 / 980 * 100vw);
  }
  .gallery > .con-inner > .brandMovie > .movie {
    width: calc(420 / 980 * 100vw);
  }
  .gallery > .con-inner > .brandMovie > .movie.dprogram .logoTtl {
    background: url(../img/pc/dprogram_logo.png) no-repeat top center;
    background-size: 100%;
    width: calc(160 / 980 * 100vw);
    height: calc(60 / 980 * 100vw);
  }
}
@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 768px) and (min-resolution: 192dpi) {
  .gallery > .con-inner > .brandMovie > .movie.dprogram .logoTtl {
    background: url(../img/pc/retina/dprogram_logo.png) no-repeat top center;
    background-size: 100%;
  }
}
@media screen and (min-width: 768px) {
  .gallery > .con-inner > .brandMovie > .movie.dprogram .img {
    background: url(../img/pc/dprogram_thumbnail.jpg) no-repeat top center;
    background-size: 100%;
    width: calc(420 / 980 * 100vw);
    height: calc(236 / 980 * 100vw);
  }
}
@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 768px) and (min-resolution: 192dpi) {
  .gallery > .con-inner > .brandMovie > .movie.dprogram .img {
    background: url(../img/pc/retina/dprogram_thumbnail.jpg) no-repeat top center;
    background-size: 100%;
  }
}
@media screen and (min-width: 768px) {
  .gallery > .con-inner > .brandMovie > .movie.haku .logoTtl {
    background: url(../img/pc/haku_logo.png) no-repeat top center;
    background-size: 100%;
    width: calc(140 / 980 * 100vw);
    height: calc(28 / 980 * 100vw);
  }
}
@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 768px) and (min-resolution: 192dpi) {
  .gallery > .con-inner > .brandMovie > .movie.haku .logoTtl {
    background: url(../img/pc/retina/haku_logo.png) no-repeat top center;
    background-size: 100%;
  }
}
@media screen and (min-width: 768px) {
  .gallery > .con-inner > .brandMovie > .movie.haku .img {
    background: url(../img/pc/haku_thumbnail.jpg) no-repeat top center;
    background-size: 100%;
    width: calc(420 / 980 * 100vw);
    height: calc(236 / 980 * 100vw);
  }
}
@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 768px) and (min-resolution: 192dpi) {
  .gallery > .con-inner > .brandMovie > .movie.haku .img {
    background: url(../img/pc/retina/haku_thumbnail.jpg) no-repeat top center;
    background-size: 100%;
  }
}
@media screen and (min-width: 768px) {
  .gallery > .con-inner > .brandMovie > .movie.senka .logoTtl {
    background: url(../img/pc/senka_logo.png) no-repeat top center;
    background-size: 100%;
    width: calc(160 / 980 * 100vw);
    height: calc(52 / 980 * 100vw);
  }
}
@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 768px) and (min-resolution: 192dpi) {
  .gallery > .con-inner > .brandMovie > .movie.senka .logoTtl {
    background: url(../img/pc/retina/senka_logo.jpg) no-repeat top center;
    background-size: 100%;
  }
}
@media screen and (min-width: 768px) {
  .gallery > .con-inner > .brandMovie > .movie.senka .img {
    background: url(../img/pc/senka_thumbnail.jpg) no-repeat top center;
    background-size: 100%;
    width: calc(420 / 980 * 100vw);
    height: calc(236 / 980 * 100vw);
  }
}
@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 768px) and (min-resolution: 192dpi) {
  .gallery > .con-inner > .brandMovie > .movie.senka .img {
    background: url(../img/pc/retina/senka_thumbnail.jpg) no-repeat top center;
    background-size: 100%;
  }
}
@media screen and (min-width: 768px) {
  .gallery > .con-inner > .brandMovie > .movie:nth-child(2n) {
    margin-left: calc(39 / 980 * 100vw);
  }
  .gallery > .con-inner > .poster .img {
    background: url(../img/pc/poster_thumbnail.jpg) no-repeat top center;
    background-size: 100%;
    width: calc(511 / 980 * 100vw);
    height: calc(723 / 980 * 100vw);
  }
}
@media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 768px) and (min-resolution: 192dpi) {
  .gallery > .con-inner > .poster .img {
    background: url(../img/pc/retina/poster_thumbnail.jpg) no-repeat top center;
    background-size: 100%;
  }
}

@media screen and (min-width: 980px) {
  .main {
    background-size: 1600px;
    margin-top: 112px;
    height: 400px;
  }

  .gallery > .con-inner {
    padding: 110px 0 120px;
  }
  .gallery > .con-inner > .message {
    width: 560px;
    margin: 50px auto 114px;
  }
  .gallery > .con-inner > .ttl {
    font-size: 42px;
  }
  .gallery > .con-inner > .movie .txtTtl,
  .gallery > .con-inner > .brandMovie .txtTtl,
  .gallery > .con-inner > .poster .txtTtl {
    padding-top: 110px;
    font-size: 32px;
    margin-bottom: 60px;
  }
  .gallery > .con-inner > .movie .logoTtl,
  .gallery > .con-inner > .brandMovie .logoTtl,
  .gallery > .con-inner > .poster .logoTtl {
    margin: 70px auto 30px;
  }
  .gallery > .con-inner > .movie .img,
  .gallery > .con-inner > .brandMovie .img,
  .gallery > .con-inner > .poster .img {
    margin: 0 auto 25px;
  }
  .gallery > .con-inner > .movie .txt,
  .gallery > .con-inner > .brandMovie .txt,
  .gallery > .con-inner > .poster .txt {
    font-size: 18px;
  }
  .gallery > .con-inner > .movie.cm .img {
    width: 700px;
    height: 393px;
  }
  .gallery > .con-inner > .brandMovie {
    margin: 0 50px;
  }
  .gallery > .con-inner > .brandMovie > .movie {
    width: 420px;
  }
  .gallery > .con-inner > .brandMovie > .movie.dprogram .logoTtl {
    width: 160px;
    height: 60px;
  }
  .gallery > .con-inner > .brandMovie > .movie.dprogram .img {
    width: 420px;
    height: 236px;
  }
  .gallery > .con-inner > .brandMovie > .movie.haku .logoTtl {
    width: 140px;
    height: 28px;
  }
  .gallery > .con-inner > .brandMovie > .movie.haku .img {
    width: 420px;
    height: 236px;
  }
  .gallery > .con-inner > .brandMovie > .movie.senka .logoTtl {
    width: 160px;
    height: 52px;
  }
  .gallery > .con-inner > .brandMovie > .movie.senka .img {
    width: 420px;
    height: 236px;
  }
  .gallery > .con-inner > .brandMovie > .movie:nth-child(2n) {
    margin-left: 40px;
  }
  .gallery > .con-inner > .poster .img {
    width: 511px;
    height: 723px;
  }
}