@charset "UTF-8";
.contents #movie {
  width: 72.3846153846vw;
  margin: 0 auto;
  padding: 3.8461538462vw 0 7.6923076923vw;
}
@media screen and (max-width: 767px) {
  .contents #movie {
    width: 86.67vw;
    padding: 13.3333333333vw 0;
  }
}
.contents #movie h2.ttl {
  width: 100%;
}
.contents #movie .movie-box {
  background-image: url("../img/back-redPattern.jpg");
  background-size: cover;
  background-repeat: repeat;
  background-size: 3vw 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2.77vw;
}
.contents #movie .movie-box .inner {
  background-color: #fff;
  border-radius: 2.31vw;
  width: 97%;
  height: 97%;
  margin: 1.5% auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.contents #movie .movie-box .inner iframe#youtube1,
.contents #movie .movie-box .inner iframe#youtube2 {
  width: 70.21vw;
  height: 39.49vw;
}
@media screen and (max-width: 767px) {
  .contents #movie .movie-box {
    border-radius: 3.4vw;
  }
  .contents #movie .movie-box .inner iframe#youtube1,
  .contents #movie .movie-box .inner iframe#youtube2 {
    width: 84.07vw;
    height: 47.29vw;
  }
}
.contents #movie ul.movie-links {
  display: flex;
  justify-content: space-between;
  margin: 6.1538461538vw auto 0;
  align-items: center;
  width: 46.1538461538vw;
}
.contents #movie ul.movie-links .link-button {
  width: 22.3076923077vw;
}
@media screen and (max-width: 767px) {
  .contents #movie ul.movie-links {
    margin-top: 12vw;
    width: 82.6666666667vw;
  }
  .contents #movie ul.movie-links .link-button {
    width: 40vw;
  }
}
.contents #movie ul.movie-links a {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}
.contents #movie ul.movie-links a .on,
.contents #movie ul.movie-links a .off {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.contents #movie ul.movie-links a .off {
  display: none;
}
.contents #movie ul.movie-links a .on {
  z-index: 1;
  display: block;
}

/* ---------------------------------------------
*   Youtube
--------------------------------------------- */
.js-youtube2 {
  display: none;
}

.contents #read {
  padding-bottom: 9.1538461538vw;
  width: 91.5384615385vw;
  margin: 0 auto;
  filter: drop-shadow(0.59vw 0.59vw 1vw rgba(0, 0, 0, 0.5));
}
.contents #read .back-el {
  background-image: url("../img/read-back-parts.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0.59vw 0.59vw 1vw rgba(0, 0, 0, 0.5));
  width: 100%;
  height: 3.3123076923vw;
}
.contents #read .read-el-middle {
  width: 96.58%;
  margin: 0 auto;
  padding: 3.46vw 0;
  background: #c11c24;
}
.contents #read .read-el-middle .read-inner {
  margin: 0 auto;
  background: #fff;
  width: 95.7%;
  border-top: solid 0.92vw #c19640;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contents #read .read-el-middle .read-inner h2.ttl {
  width: 63.51%;
  margin: 9% auto 3%;
}
@media screen and (max-width: 767px) {
  .contents #read .read-el-middle .read-inner h2.ttl {
    width: 81.35%;
    margin: 15% auto 8%;
  }
}
.contents #read .read-el-middle .read-inner p.txt {
  width: 78.68%;
}
@media screen and (max-width: 767px) {
  .contents #read .read-el-middle .read-inner p.txt {
    width: 87.1%;
  }
}
.contents #read .read-el-middle .read-inner .image {
  position: relative;
  width: 72.88%;
  margin-bottom: 14%;
}
.contents #read .read-el-middle .read-inner .image .pd-desc {
  position: absolute;
  width: 37.3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: -5%;
  left: 14%;
}
.contents #read .read-el-middle .read-inner .image .pd-desc a {
  width: 100%;
}
.contents #read .read-el-middle .read-inner .image .pd-desc .name {
  width: 82%;
  padding-bottom: 7%;
}
@media screen and (max-width: 767px) {
  .contents #read .read-el-middle .read-inner .image {
    width: 96.14%;
    margin-bottom: 9%;
  }
  .contents #read .read-el-middle .read-inner .image .pd-desc {
    position: unset;
    width: 74.3%;
    margin: 1% auto;
  }
  .contents #read .read-el-middle .read-inner .image .pd-desc .name {
    width: 68%;
    padding-bottom: 6%;
  }
}
.contents #read .read-el-middle .read-inner .bottom-image,
.contents #read .read-el-middle .read-inner .bottom-image img {
  width: 100%;
}

.contents #point {
  background-image: url(../img/pc/point-back-pc.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 108.0769230769vw;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .contents #point {
    background-image: url(../img/sp/point-back-sp.png);
    height: 425.3333333333vw;
  }
}
.contents #point h3.ttl {
  width: 57.3076923077vw;
  margin: 0 auto;
  padding: 10vw 0 6.9230769231vw;
}
@media screen and (max-width: 767px) {
  .contents #point h3.ttl {
    width: 100%;
    padding: 24.2666666667vw 0 15.3333333333vw;
  }
}
.contents #point ul.point-block {
  margin: 0 auto;
  width: 84.1538461538vw;
  display: flex;
  flex-direction: column;
  gap: 6.1538461538vw;
}
@media screen and (max-width: 767px) {
  .contents #point ul.point-block {
    width: 86.6666666667vw;
    gap: 9.6vw;
  }
}
.contents #point ul.point-block li.point-list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.contents #point ul.point-block li.point-list p.txt {
  width: 71.57%;
}
.contents #point ul.point-block li.point-list div.image {
  width: 26.33%;
}
@media screen and (max-width: 767px) {
  .contents #point ul.point-block li.point-list {
    flex-direction: column;
    gap: 6vw;
  }
  .contents #point ul.point-block li.point-list p.txt, .contents #point ul.point-block li.point-list div.image {
    width: 100%;
  }
}

.contents #lineup {
  padding: 9.2307692308vw 0;
}
@media screen and (max-width: 767px) {
  .contents #lineup {
    padding: 8.2666666667vw 0 21.8666666667vw;
  }
}
.contents #lineup h3.ttl img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .contents #lineup h3.ttl img {
    padding-bottom: 5.3333333333vw;
  }
}
.contents #lineup ul {
  display: flex;
  width: 81.5384615385vw;
  margin: 0 auto;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .contents #lineup ul {
    flex-direction: column;
    align-items: center;
    width: 55.3333333333vw;
    gap: 21.8666666667vw;
  }
}
.contents #lineup ul li.item-block {
  width: 18.4615384615vw;
}
.contents #lineup ul li.item-block .item-photo {
  width: 100%;
  height: 14.8553846154vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contents #lineup ul li.item-block .item-photo img {
  filter: drop-shadow(0.6153846154vw 1.1538461538vw 0.6153846154vw rgba(66, 33, 11, 0.5));
}
@media screen and (max-width: 767px) {
  .contents #lineup ul li.item-block .item-photo img {
    filter: drop-shadow(3.3333333333vw 3.6vw 1.7333333333vw rgba(66, 33, 11, 0.5));
  }
}
.contents #lineup ul li.item-block .item-photo .pd1vw {
  padding-top: 1vw;
}
.contents #lineup ul li.item-block .item-name img {
  padding: 2.3076923077vw 0 1.9230769231vw;
}
@media screen and (max-width: 767px) {
  .contents #lineup ul li.item-block .item-name img {
    padding: 6.6666666667vw 0 4.5333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents #lineup ul li.item-block {
    width: 100%;
  }
  .contents #lineup ul li.item-block .item-photo {
    height: auto;
  }
}

.contents #records {
  background-color: #12294b;
  width: 100%;
  padding: 9.0769230769vw 0 8.4615384615vw;
}
.contents #records h3.ttl, .contents #records p.txt {
  margin-bottom: 3.8461538462vw;
}
@media screen and (max-width: 767px) {
  .contents #records h3.ttl {
    margin-bottom: 2.6666666667vw;
  }
  .contents #records p.txt {
    margin-bottom: 5.3333333333vw;
  }
}

.contents #other {
  padding: 6.4615384615vw 0 12.3076923077vw;
}
@media screen and (max-width: 767px) {
  .contents #other {
    padding: 14vw 0 24vw;
  }
}
.contents #other h3.ttl {
  width: 78vw;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .contents #other h3.ttl {
    width: 88.5333333333vw;
  }
}
.contents #other ul.other-point {
  width: 78vw;
  margin: 0 auto 12.3076923077vw;
  display: flex;
  flex-direction: column;
  gap: 3.4615384615vw;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .contents #other ul.other-point {
    width: 88.5333333333vw;
    margin: 0 auto 18.6666666667vw;
    gap: 4.6666666667vw;
  }
}
.contents #other ul.links {
  width: 53.2307692308vw;
  margin: 0 auto 12.3076923077vw;
  display: flex;
  flex-direction: column;
  gap: 5.9230769231vw;
  align-items: center;
}
.contents #other ul.links li {
  width: 100%;
}
.contents #other ul.links a.link-banner {
  display: block;
}
@media screen and (max-width: 767px) {
  .contents #other ul.links {
    width: 88.5333333333vw;
    margin: 0 auto 21.3333333333vw;
    gap: 13.3333333333vw;
  }
}
.contents #other .point-cnt-shadow {
  width: 100%;
  filter: drop-shadow(0 0 0.6vw rgba(150, 90, 4, 0.8));
}
@media screen and (max-width: 767px) {
  .contents #other .point-cnt-shadow {
    filter: drop-shadow(0.5vw 0.5vw 0.9vw rgba(150, 90, 4, 0.8));
  }
}
.contents #other .backToTop {
  width: 36.5384615385vw;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .contents #other .backToTop {
    width: 76vw;
  }
}

/* ---------------------------------------------
*   動画ポップアップ
--------------------------------------------- */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80vw;
  max-height: 42.6667vw;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .popup-content {
    max-width: 90.1333333333vw;
    max-height: 50.7vw;
  }
}
.popup-content iframe {
  width: 100%;
  height: 100%;
}

#popupClose {
  position: absolute;
  top: 0%;
  right: -5%;
  width: 3vw;
  height: 3vw;
  padding: 1.4vw 0;
  display: block;
  cursor: pointer;
}
#popupClose span:first-of-type,
#popupClose span:last-of-type {
  display: block;
  width: 100%;
  height: 0.2vw;
  transform-origin: center center;
  background-color: #fff;
}
#popupClose span:first-of-type {
  transform: rotate(45deg);
}
#popupClose span:last-of-type {
  transform: translateY(-0.3em) rotate(-45deg);
  transform: translateY(1.4em) rotate(-45deg);
  transform: translateY(1vw) rotate(-45deg);
  transform: translateY(-0.2vw) rotate(-45deg);
}
@media screen and (max-width: 767px) {
  #popupClose {
    width: 9vw;
    height: 9vw;
    top: -24%;
    right: 0;
    padding: 4.1vw 0;
  }
  #popupClose span:first-of-type,
  #popupClose span:last-of-type {
    height: 0.8vw;
  }
  #popupClose span:last-of-type {
    transform: translateY(-0.8vw) rotate(-45deg);
  }
}/*# sourceMappingURL=style.css.map */