/***********************************************************

 * top

************************************************************/
.container{
  background: #000;
  box-sizing: border-box;
  color: #fff;
}
@media screen and (max-width: 640px) {
	.container{
	}
}
/*--------------------------------------*/
div {
  box-sizing: border-box;
}
@media screen and (max-width: 640px) {

}

.-sp{
  display: none;
}
@media screen and (max-width: 768px) {
  .-pc{
    display: none;
  }
  .-sp{
    display: block;
  }
}

/*--------------------------------------*/
.header {
  position: relative;
  background: url(../images/dvd/header.png) no-repeat center;
  background-size: cover;
  padding: 2.2vw 0 3vw;
}
.copy {
  width: 32.5%;
  margin-left: 11vw;
}
.logo {
  width: 40.5%;
  margin-left: 4.8vw;
  margin-top: 1.9vw;
}
.release {
  width: 23%;
  margin-left: 15vw;
  margin-top: -4.6vw;
}
.read {
  position: absolute;
  right: 2.2vw;
  top: 3vw;
  width: 1.5%;
}
@media screen and (max-width: 768px) {
  .header {
    background: url(../images/dvd/header-sp.png) no-repeat top center;
    background-size: contain;
    padding: 100vw 0 16vw;
  }
  .copy {
    width: 83%;
    margin: 22.3vw auto 0;
  }
  .logo {
    width: 94%;
    position: relative;
    transform: rotate(-9deg) translateX(-50%);
    left: 50%;
    margin: 0;
  }
  .release {
    width: 67.2%;
    margin: 9.6vw auto 0;
  }
  .read {
    position: absolute;
    right: 5.6vw;
    top: 23vw;
    width: 3.4%;
  }
}

/*--------------------------------------*/
.inner {
  background-color: #1B1A3E;
  position: relative;
  z-index: -1;
  padding: 3.8vw 0 7.4vw;
}
.inner::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(35,9,62,0.3) 10%, rgba(19,5,38,0.5) 20%, rgba(13,7,44,0.8) 45%, rgba(12,6,39,0.9) 55%, rgba(0,0,0,1) 100%);
}
@media screen and (max-width: 768px) {
  .inner {
    padding: 8.5vw 0 21.8vw;
  }
}

/*--------------------------------------*/
.goods {
  width: 66%;
  margin: 0 auto;
  background-color: #ADA6CD;
  padding: 0 0 2.6vw;
}
.goods-ttl {
  font-size: 34px;
  font-weight: 700;
  color: #1D143D;
  text-align: center;
  padding: 0.7vw 0;
}
.goods-img {
  background-color: #fff;
  padding: 3.6vw 0 2.5vw;
}
.goods-img img {
  width: 45.5%;
  margin: 0 auto;
}
.detail {
  display: flex;
  gap: 6%;
  justify-content: space-between;
  width: 75.6%;
  margin: 0 auto;
  padding-top: 4.6vw;
}
.specification {
  width: 50%;
}
.sp-ttl {
  display: inline-block;
  background-color: #1D143D;
  color: #ADA6CD;
  font-size: 24px;
  font-weight: 700;
  padding: 0 0.8em;
  line-height: 1.4;
}
.sp-txt {
  font-size: 15px;
  line-height: 1.6;
  margin-top: 1.2vw;
  color: #000000;
}
.benefits {
  width: 50%;
}
.be-ttl {
  display: inline-block;
  background-color: #1D143D;
  color: #ADA6CD;
  font-size: 24px;
  font-weight: 700;
  padding: 0 0.8em;
  line-height: 1.4;
}
.disc {
  font-weight: 700;
}
.big-font {
  font-size: 18px;
}
.be-txt {
  font-size: 15px;
  line-height: 1.6;
  margin-top: 1.2vw;
  color: #000000;
}
.sm-font {
  font-size: 11px;
}
.subtxt {
  margin-top: 2.3vw;
  color: #000000;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .goods {
    width: 89%;
    padding: 0 0 6.6vw;
  }
  .goods-ttl {
    font-size: 24px;
    line-height: 1.3;
    padding: 3.7vw 0;
  }
  .goods-img {
    padding: 5.3vw 0 4.5vw;
  }
  .goods-img img {
    width: 68.8%;
  }
  .detail {
    display: block;
    width: 86.8%;
    padding-top: 8vw;
  }
  .specification {
    width: 100%;
  }
  .sp-ttl {
    font-size: 18px;
    padding: 0 0.8em;
    line-height: 1.7;
  }
  .sp-txt {
    margin-top: 2.9vw;
  }
  .benefits {
    width: 100%;
  }
  .be-ttl {
    font-size: 18px;
    padding: 0 0.8em;
    line-height: 1.7;
    margin-top: 7.3vw;
  }
  .disc {
  }
  .big-font {
  }
  .be-txt {
    margin-top: 2.9vw;
  }
  .sm-font {
  }
  .subtxt {
    margin-top: 7.3vw;
  }
}

/*--------------------------------------*/
.luxurious{
  width: 66%;
  margin: 3.8vw auto 0;
  padding: 3vw 0 0;
  border-top: dashed 1px #fff;
  display: flex;
}
.blueray {
  width: 50%;
  padding-right: 4.4vw;
  border-right: solid 1px #fff;
}
.bl-tll {
  color: #C4D700;
  font-size: 24px;
  font-weight: 700;
}
.bl-txt {
  margin-top: 0.9vw;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 2.6vw;
}
.dvd {
  width: 50%;
  padding-left: 4.4vw;
}
.dv-tll {
  color: #C4D700;
  font-size: 24px;
  font-weight: 700;
}
.dv-txt {
  margin-top: 0.9vw;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 2.6vw;
}

.purchase {
  color: #C4D700;
  font-size: 15px;
  line-height: 1;
  margin-bottom: 1.1vw;
}
.pu-bnr-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7vw;
}
.pu-bnr-item {
  width: 31%;
}
@media screen and (max-width: 768px) {
  .luxurious{
    width: 89%;
    margin: 16vw auto 0;
    padding: 11.2vw 0 0;
    display: block;
  }
  .blueray {
    width: 100%;
    padding-right: 0;
    border-right: none;
    border-bottom: solid 1px #fff;
    padding-bottom: 11.2vw;
  }
  .bl-tll {
  }
  .bl-txt {
    margin-top: 3vw;
  }
  .dvd {
    width: 100%;
    padding: 11.2vw 0 0;
  }
  .dv-tll {
  }
  .dv-txt {
    margin-top: 3vw;
  }
  
  .purchase {
    margin-top: 8vw;
    margin-bottom: 3vw;
  }
  .pu-bnr-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2.8vw;
  }
  .pu-bnr-item {
    width: 31%;
  }
}

/*--------------------------------------*/
.rental-release {
  width: 40%;
  margin: 6.5vw auto 5.1vw;
}
.origin {
  font-size: 10px;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 1.9vw;
}

.site-btn {
  position: relative;
  width: 22%;
  margin: 0 auto;
}

.site-btn a:hover .-hover {
  opacity: 100%;
}
.-hover {
  position: absolute;
  opacity: 0;
  top: 0;
}
@media screen and (max-width: 768px) {
  .rental-release {
    width: 89%;
    margin: 16vw auto 14.4vw;
  }
  .origin {
    margin-bottom: 6.9vw;
  }
  
  .site-btn {
    width: 66.4%;
  }
}

.movie-all {
  width: 66%;
  margin: 0 auto 3.8vw;
  display: flex;
  justify-content: space-between;
}
.movie-wrap {
  width: 48.5%;
}
@media screen and (max-width: 768px) {
  .movie-all {
    width: 89%;
    margin: 0 auto 10.5vw;
    display: flex;
    flex-direction: column;
    gap: 3.4vw;
  }
  .movie-wrap {
    width: 100%;
  }
}

.movie-inner {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

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