@charset "UTF-8";

.l-netflix {
  overflow: hidden;
}
.l-netflix__plan {
  position: relative;
}
.l-netflix__plan::before {
  content: "";
  position: absolute;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 251.9rem;
  background-image: url("/sp/kakakucom/img/netflix/netflix_bg.png");
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .l-netflix__plan::before {
    background-image: url("/sp/kakakucom/img/netflix/netflix_bg_sp.png");
    height: 200.8rem;
    top: 6rem;
    background-color: #000;
  }
}
.l-netflix__plan::after {
  content: "";
  position: absolute;
  top: -26rem;
  left: 0;
  width: 100%;
  height: 25rem;
  background: linear-gradient(180deg, #ECEDED 0%, #0A0A0B 100%);
}
@media screen and (max-width: 767px) {
  .l-netflix__plan::after {
    height: 6rem;
    top: 0;
    background: linear-gradient(180deg, #EBEBEB 10%, #0a0a0b 100%);
  }
}
.l-netflix__note {
  padding-top: 5.4rem;
}
@media screen and (max-width: 767px) {
  .l-netflix__note {
    padding-top: 26.4rem;
  }
}
.l-netflix__note .p-note {
  margin-top: 0;
}
/*
.p-planNetflix {
  padding-top: 14.4rem;
}
@media screen and (max-width: 767px) {
  .p-planNetflix {
    padding-top: 8.6rem;
  }
}
*/
.p-planNetflix__head {
  position: relative;
  padding: 80px 0;
}
.p-planNetflix__head::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 40rem;
  bottom: -35rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .p-planNetflix__head {
    position: relative;
    padding: 80px 0 40px 0;
  }
  .p-planNetflix__head::before {
    bottom: -26rem;
  }
}
.p-planNetflix__bottom {
  background-color: #FFE103;
  /*  margin-top: -1.4rem;*/
  position: relative;
  padding: 80px 0;
}
@media screen and (max-width: 767px) {
  .p-planNetflix__bottom {
    padding: 40px 0;
  }
}
.p-planNetflix .p-planIntroduction__simple {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .p-planNetflix .p-planIntroduction__linkWrap {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 767px) {
  .p-planNetflix .p-planIntroduction__linkWrap.netflix {
    margin-top: 3.6rem;
  }
}
.p-planNetflix .p-planIntroduction__detail {
  padding: 1.9rem 2.4rem 1.6rem 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-planNetflix .p-planIntroduction__detail {
    padding: 1.9rem 2.2rem 1.6rem 2.2rem;
  }
}

@media screen and (max-width: 767px) {
  .p-planNetflix .p-planIntroduction__two-year {
    margin-top: 2.4rem;
  }
}
.p-qualityNetflix .p-quality__wrap {
  margin-top: 2.6rem;
}
.p-qualityNetflix__wrap {
  margin-top: 2.9rem;
}
@media screen and (max-width: 767px) {
  .p-qualityNetflix__wrap {
    margin-bottom: 3.7rem;
    max-width: 35rem;
    margin-inline: auto;
  }
}
.p-qualityNetflix__item {
  background-color: #fff;
  border-radius: 0.6rem;
  padding: 2.2rem 1.8rem 2.4rem;
}
.p-qualityNetflix__item:nth-child(2) {
  margin-top: 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-qualityNetflix__item:nth-child(2) {
    margin-top: 1.6rem;
  }
}
.p-qualityNetflix__item:nth-child(2) .p-qualityNetflix__text {
  margin-top: 2.4rem;
}
@media screen and (max-width: 767px) {
  .p-qualityNetflix__item:nth-child(2) .p-qualityNetflix__text {
    margin-top: 1.6rem;
  }
}
.p-qualityNetflix__title {
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1.6363636364;
  letter-spacing: 0;
  text-align: center;
}
.p-qualityNetflix__img1 {
  margin-top: 2.4rem;
  width: 42rem;
  height: auto;
  aspect-ratio: 420/203;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-qualityNetflix__img1 {
    margin-top: 1.4rem;
    width: 100%;
  }
}
.p-qualityNetflix__img1 img {
  object-fit: contain;
}
.p-qualityNetflix__text {
  margin-top: 1.4rem;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.8571428571;
  letter-spacing: 0.04em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-qualityNetflix__text {
    text-align: left;
  }
}
.p-qualityNetflix__routerWrap {
  margin-top: 2rem;
  max-width: 30.2rem;
  width: 100%;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-qualityNetflix__routerWrap {
    margin-top: 1.6rem;
  }
}
.p-qualityNetflix__router {
  border: 0.1rem solid #333333;
  border-radius: 0.6rem;
  padding: 1.4rem 0.5rem 1.1rem 1.0rem;
  display: flex;
  gap: 1.2rem;
}
.p-qualityNetflix__routerImg {
  width: 5.2rem;
  height: auto;
  aspect-ratio: 52/101;
}
.p-qualityNetflix__routerImg img {
  object-fit: contain;
}
.p-qualityNetflix__routerText .text {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.8571428571;
  letter-spacing: 0;
}
.p-qualityNetflix__routerText .price {
  display: flex;
  align-items: center;
  margin-top: 1.1rem;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.8571428571;
  letter-spacing: 0;
}
.p-qualityNetflix__routerText .value {
  margin-left: 0.7rem;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0em;
}
.p-qualityNetflix__routerText .unit {
  margin-left: 0.2rem;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.1em;
  position: relative;
}
.p-qualityNetflix__routerText .unit::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 1.5rem;
  width: 0.1rem;
  height: 1.4rem;
  background-color: #333333;
  rotate: 28deg;
}
.p-qualityNetflix__note {
  margin-top: 1.2rem;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.8333333333;
  letter-spacing: 0.04em;
  padding-left: calc(1em + 0.5rem);
  position: relative;
}
.p-qualityNetflix__note::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
.p-qualityNetflix__img2 {
  margin-top: 1.2rem;
  width: 23.5rem;
  height: auto;
  aspect-ratio: 235/132;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-qualityNetflix__img2 {
    margin-top: 1.7rem;
  }
}
.p-qualityNetflix__img2 img {
  object-fit: contain;
}
.p-kvNetflix__bg {
  position: absolute;
  top: -1rem;
  left: -20rem;
  width: 164rem;
  height: 84.4rem;
  pointer-events: none;
  z-index: 2;
}
@media screen and (max-width: 1100px) {
  .p-kvNetflix__bg {
    left: -12rem;
    top: 0.6rem;
    width: 140rem;
    height: 72.2rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .p-kvNetflix__bg {
    left: -20rem;
    top: 0.6rem;
    width: 140rem;
    height: 72.2rem;
  }
}
@media screen and (max-width: 767px) {
  .p-kvNetflix__bg {
    width: 100%;
    height: auto;
    aspect-ratio: 390/831;
    left: 0;
    top: 0;
    z-index: -1;
  }
}
.p-kvNetflix__bg_yellow {
  position: absolute;
  top: 33rem;
  left: -40.7rem;
  width: 62.3rem;
  height: 57.2rem;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .p-kvNetflix__bg_yellow {
    display: none;
  }
}
.p-apply {
  margin: 0 auto 0;
  max-width: 84rem;
  width: 100%;
  padding-inline: 2rem;
  padding: 80px 0;
}
@media screen and (max-width: 767px) {
  .p-apply {
    margin: 0 auto 0;
    padding: 40px 0;
  }
}
.p-apply__wrap {
  border: 0.1rem solid #333333;
  border-radius: 0.6rem;
  padding: 3.2rem 4rem;
}
@media screen and (max-width: 767px) {
  .p-apply__wrap {
    max-width: 84rem;
    padding: 3.4rem 2.4rem 2.4rem;
  }
}
.p-apply__title {
  text-align: center;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .p-apply__title {
    font-size: 1.8rem;
  }
}
.p-apply__list {
  margin-top: 3.2rem;
}
.p-apply__item {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.8571428571;
  letter-spacing: 0.04em;
  padding-left: 1em;
  position: relative;
}
.p-apply__item.red {
  color: #EB003F;
}
.p-apply__item::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
  color: #333333;
}
.p-apply__item .text {
  font-size: 1.4rem;
}
.p-cta__itemLinkNote {
  margin-top: 1.2rem;
  text-align: center;
  padding-left: 0.8rem;
  line-height: 1.4;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .p-cta__itemLinkNote {
    margin-top: 0.7rem;
  }
}
.p-cta__itemLinkNote.long {
  margin-top: 0.2rem;
  padding-left: 1rem;
}
.p-cost {
  padding: 80px 0;
}
@media screen and (max-width: 767px) {
  .p-cost {
    padding: 40px 0;
  }
}
.p-cost__presentContent:nth-child(2) .p-cost__presentLink {
  margin-top: 3.8rem;
}
@media screen and (max-width: 767px) {
  .p-cost__presentContent:nth-child(2) .p-cost__presentLink {
    margin-top: 3.2rem;
  }
}
.btn.netflix > a[target=_blank], .btn.netflix > a {
  background-image: none;
}
.btn.netflix > a[target=_blank]::after, .btn.netflix > a::after {
  content: "";
  position: absolute;
  top: 40%;
  right: 2.4rem;
  transform: translateY(-50%);
  width: 0.6rem;
  height: 1rem;
  background-color: #fff;
  mask: url("/sp/kakakucom/img/netflix/icon_arrow.svg");
  rotate: 90deg;
  transition: background-color 0.3s;
}
@media (any-hover: hover) {
  .btn.cta.netflix:hover > a[target=_blank], .btn.cta.netflix:hover > a {
    background-image: none;
  }
  .btn.cta.netflix:hover > a[target=_blank]::after, .btn.cta.netflix:hover > a::after {
    background-color: #EB003F;
  }
}