@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/Noto_Sans_JP/NotoSansJP-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* nomal */
@font-face {
  font-family: "notoserif";
  font-style: normal;
  font-weight: normal;
  src: url("../font/notoserif/NotoSerifJP-Regular.woff2") format("woff2");
  font-display: swap;
}
/* 300 */
@font-face {
  font-family: "notoserif";
  font-style: normal;
  font-weight: 300;
  src: url("../font/notoserif/NotoSerifJP-Light.woff2") format("woff2");
  font-display: swap;
}
/* 400*/
@font-face {
  font-family: "notoserif";
  font-style: normal;
  font-weight: 400;
  src: url("../font/notoserif/NotoSerifJP-Regular.woff2") format("woff2");
  font-display: swap;
}
/* 500 */
@font-face {
  font-family: "notoserif";
  font-style: normal;
  font-weight: 500;
  src: url("../font/notoserif/NotoSerifJP-Medium.woff2") format("woff2");
  font-display: swap;
}
/* 600*/
@font-face {
  font-family: "notoserif";
  font-style: normal;
  font-weight: 600;
  src: url("../font/notoserif/NotoSerifJP-Bold.woff2") format("woff2");
  font-display: swap;
}
.c-mv {
  background: var(--c-light) url("../images/movie/mv.webp") no-repeat left top;
  background-size: 80.8680555556vw auto;
  aspect-ratio: 1440/607;
  border-bottom: 1rem solid var(--c-red);
}
.c-mv .l-container {
  height: 100%;
  position: relative;
}

.c-mv__copy {
  font-family: var(--f-sans);
  font-size: var(--c-fs-h1);
  font-weight: var(--c-fw-semibold);
  line-height: var(--c-lh-medium);
  font-size: 6.4rem;
  display: inline;
  padding: 0.1em 0.2em;
  background: rgba(255, 255, 255, 0.8980392157);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: 1.85;
}

.c-mv__lead {
  font-family: var(--f-sans);
  font-size: var(--c-fs-main-big);
  font-weight: var(--c-fw);
  line-height: var(--c-lh-heading);
  font-weight: 600;
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 10.7rem;
}

.c-movie {
  padding: 10rem 0;
}
.c-movie .c-title {
  margin-bottom: 5rem;
}

.c-movie__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 2.4rem;
  padding: 4.4rem 0;
  border-bottom: 1px solid var(--c-bg-blue);
}

.c-movie__thumb {
  position: relative;
  cursor: pointer;
  width: 35rem;
}
.c-movie__thumb img {
  height: auto;
}
.c-movie__thumb iframe {
  width: 100%;
  aspect-ratio: 350/190;
}

.c-movie__play {
  width: 3.5rem;
  height: 3.5rem;
  background: url("../images/movie/icn-play.svg") no-repeat center/contain;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.c-movie__content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.c-movie__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.c-movie__meta .c-tag {
  border-radius: 1rem;
  width: 7.4rem;
}

.c-movie__date {
  color: var(--c-blue);
}

.c-movie__ttl {
  font-family: var(--f-sans);
  font-size: var(--c-fs-h4);
  font-weight: var(--c-fw-medium);
  line-height: var(--c-lh-heading);
  font-size: 2.8rem;
  margin-bottom: 1.2rem;
}

.c-movie__text {
  font-family: var(--f-sans);
  font-size: var(--c-fs-main);
  font-weight: var(--c-fw);
  line-height: var(--c-lh-medium);
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
}

.c-movie__link {
  color: var(--c-yellow);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.c-movie__link i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 2.3rem;
  height: 2.3rem;
  background-color: var(--c-yellow);
  border-radius: 100%;
  margin-left: 0.6rem;
}
.c-movie__link i::after {
  content: "";
  display: block;
  width: 0.6rem;
  height: 1rem;
  background-color: var(--c-white);
  mask: url("../images/common/icn-arrow.svg") no-repeat center/contain;
  -webkit-mask: url("../images/common/icn-arrow.svg") no-repeat center/contain;
}

.c-movie__single .c-movie__thumb {
  max-width: 50rem;
  width: 100%;
  margin: 0 auto 3rem;
}

@media (751px <= width < 1440px) {
  .c-mv__lead {
    right: 1.5rem;
    bottom: 7.0833333333vw;
  }
  .c-mv__copy {
    font-size: 4.4444444444vw;
  }
}
@media screen and (min-width: 751px) and (max-width: 1000px) {
  .c-movie__thumb {
    width: 26rem;
  }
}
@media screen and (max-width: 750px) {
  .c-mv {
    aspect-ratio: 375/355;
    background-image: url("../images/movie/sp-mv.webp");
    background-size: 100%;
    background-position: top left;
  }
  .c-mv__copy--wrap {
    position: absolute;
    right: 2rem;
    top: 16rem;
  }
  .c-mv__copy {
    font-size: 3.6rem;
    line-height: 1.5;
  }
  .c-mv__lead {
    font-size: 1.8rem;
    top: initial;
    right: 2rem;
    bottom: 5rem;
  }
  .c-movie {
    padding: 5rem 0;
  }
  .c-movie .c-title {
    margin-bottom: 4rem;
  }
  .c-movie__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.8rem;
    padding: 3.2rem 0;
  }
  .c-movie__thumb {
    width: 100%;
  }
  .c-movie__meta .c-tag {
    width: 6.8rem;
    height: 2.8rem;
    font-size: 1.6rem;
  }
  .c-movie__ttl {
    font-size: 2rem;
  }
  .c-movie__text {
    font-size: 1.6rem;
  }
  .c-movie__link {
    font-size: 1.4rem;
  }
  .c-movie__link i {
    width: 2rem;
    height: 2rem;
  }
}