:root {
  --delay-1: 0.1s;
  --delay-2: 0.2s;
  --delay-3: 0.3s;
  --delay-4: 0.4s;
}


.renewal_content {
  &#movie-works-content {
    padding-top: 130px;
  }

  &#movie-works-content .ttl01 {
    width: 668px;
    max-width: 668px;
  }

  .movie-desc {
    margin-top: 100px;
  }

  .movie-desc__inner {
    padding-inline: 30px;
    max-width: 774px;
    margin-inline: auto;
  }

  .movie-desc__text {
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 58px;
    letter-spacing: 1.25px;
    margin-inline: auto;
    width: fit-content;
  }

  .movie-desc__detail {
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 2.2;
    margin-top: 33px;
  }

  .movie-works {
    margin-top: 104px;
  }

  .movie-works__inner {
    max-width: 1010px;
    margin-inline: auto;
    padding-inline: 30px;
  }

  .movie-works__filter {
    margin-top: 76px;
    max-width: 942px;
    margin-inline: auto;
    padding-inline: 50px;
    display: flex;
    flex-direction: column;
    gap: 45px;
  }

  .movie-works__filter-group {
    list-style: none;
  }

  .movie-works__filter-label {
    color: #2C2C2C;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 2.2;
    padding-left: 22px;
    position: relative;
    padding-bottom: 14px;
    border-bottom: 1px solid #CECECE;
  }

  .movie-works__filter-label::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #034CCB;
    -webkit-mask-image: url('../images/movie_works/filter-label-icon.svg');
    mask-image: url('../images/movie_works/filter-label-icon.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    top: calc(50% - 7px);
    transform: translateY(-50%);
    left: 0;
  }

  .movie-works__filter-buttons {
    display: flex;
    gap: 22.5px;
    margin-top: 23px;
  }

  .movie-works__filter-button {
    padding: 7.1px 0;
    border-radius: calc(infinity * 1px);
    border: 1px solid #034CCB;
    background-color: #fff;
    color: #034CCB;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
    max-width: 192px;
    width: 100%;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  }

  .movie-works__filter-button--all {
    font-weight: 400;
  }

  .movie-works__filter-button:hover {
    background-color: #034CCB;
    color: #fff;
  }

  .movie-works__filter-button.active {
    background-color: #034CCB;
    color: #fff;
  }

  .movie-works__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 5.5vw, 75px);
    margin-top: 78px;
  }

  .movie-works__item {
    list-style: none;
  }

  .movie-works__item-link {
    display: block;
    transition: opacity 0.3s ease-in-out;
  }

  .movie-works__item-link:hover {
    opacity: 0.7;
  }

  .movie-works__thumbnail-wrap {
    display: grid;
    grid-template-columns: 29.97% 40.07% 29.97%;
  }

  .movie-works__item-img-bg {
    background-color: #F5F5F5;
  }

  .movie-works__item-link.is-landscape .movie-works__thumbnail-wrap {
    grid-template-columns: 1fr;
  }

  .movie-works__item-link.is-landscape .movie-works__thumbnail {
    aspect-ratio: 287/204;
  }

  .movie-works__thumbnail {
    height: 100%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 115/204;
  }

  .movie-works__item-img-bg--play {
    position: relative;
  }

  .movie-works__item-img-bg--play::after {
    content: "";
    position: absolute;
    width: 45.956px;
    height: 30.247px;
    background-color: #034CCB;
    -webkit-mask-image: url(../images/movie_works/video-arrow.svg);
    mask-image: url(../images/movie_works/video-arrow.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    right: 16px;
    bottom: 12px;
  }

  .movie-works__tags {
    margin: 10px 0 5px 0;
  }

  .movie-works__tag {
    display: inline-block;
    color: #FFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.5px;
    padding: 6.5px 7px;
    border-radius: 40px;
    background-color: #034CCB;
    margin-right: 11px;
  }

  .movie-works__title {
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.71231;
    letter-spacing: 0.65px;
  }

  .page-numbers {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    justify-content: center;
    margin-top: 48px;
  }

  .movie-works__page-link {
    width: 43px;
    height: 43px;
    color: #339;
    font-family: "Noto Sans", sans-serif;
    font-size: 18.971px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.949px;
    background-color: #F5F5F5;
    border-radius: calc(infinity * 1px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .movie-works__page-link.is-current {
    background-color: #339;
    color: #fff;
  }

  a.movie-works__page-link {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  }

  a.movie-works__page-link:hover {
    background-color: #339;
    color: #fff;
  }

  .movie-works__page-link.is-dots {
    background-color: transparent;
    width: fit-content;
  }

  /* ページネーション矢印の共通スタイル */
  .movie-works__page-prev,
  .movie-works__page-next {
    content: "";
    display: inline-block;
    width: 50px;
    height: 11px;
    background-color: #339;
    -webkit-mask-image: url('../images/movie_works/page-arrow.svg');
    mask-image: url('../images/movie_works/page-arrow.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.3s ease-in-out;
  }

  .movie-works__page-prev {
    transform: scale(-1, 1);
  }

  .movie-works__page-prev:hover {
    transform: scale(-1, 1) translateX(5px);
  }

  .movie-works__page-next:hover {
    transform: translateX(5px);
  }

  .movie-works__notfound {
    text-align: center;
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin-top: 80px;
    font-family: "Noto Sans JP", sans-serif;
  }

  .movie-works__contact {
    margin-top: 110px;
    text-align: center;
  }

  a.movie-works__contact-link {
    display: inline-block;
    padding: 34px 109.783px 34px 72px;
    border-radius: 20px;
    background: #339;
    color: #FFF;
    border: 2px solid #339;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 21.957px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 2.196px;
    position: relative;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  }

  a.movie-works__contact-link:hover {
    background-color: #fff;
    color: #339;
  }

  a.movie-works__contact-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 32px;
    width: 14px;
    height: 14px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: right 0.3s ease-in-out;
  }

  a.movie-works__contact-link:hover::after {
    right: 25px;
  }

  .movie-works__top-link-wrap {
    margin-top: 138px;
    margin-bottom: 141px;
  }

  /* フェード */
  .js-fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;

    &.is-active {
      opacity: 1;
    }
  }

  .js-fade-in.--delay-1 {
    transition-delay: var(--delay-1);
  }

  .js-fade-in.--delay-2 {
    transition-delay: var(--delay-2);
  }

  .js-fade-in.--delay-3 {
    transition-delay: var(--delay-3);
  }

  .js-fade-in.--delay-4 {
    transition-delay: var(--delay-4);
  }

}

.pc-only {
  display: block;
}

/* ===============================================
# モバイル
=============================================== */

@media (max-width: 1023px) {
  .renewal_content {
    .movie-works__grid {
      gap: 20px;
    }
  }
}


@media (max-width: 767px) {
  .renewal_content {
    &#movie-works-content .ttl01 {
      width: 300px;
    }

    .movie-desc {
      margin-top: 41px;
    }

    .movie-desc__inner {
      padding-inline: 22px;
      max-width: 450px;
    }

    .movie-desc__text {
      font-size: 16px;
      line-height: 2.5;
      letter-spacing: 0.8px;
      padding-inline: 17px;
    }

    .movie-desc__detail {
      margin-top: 25px;
    }

    .movie-works {
      margin-top: 51px;
    }

    .movie-works__inner {
      max-width: 450px;
      margin-inline: auto;
      padding-inline: 22px;
    }

    .movie-works__ttl02 {
      margin-left: 12px;
    }

    .movie-works__filter {
      margin-top: 5px;
      padding-inline: 0;
      gap: 27px;
    }

    .movie-works__filter-label {
      font-size: 15px;
      position: relative;
      padding-bottom: 8px;
    }

    .movie-works__filter-label::before {
      top: calc(50% - 4px);
    }

    .movie-works__filter-buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-top: 22px;
    }

    .movie-works__grid {
      grid-template-columns: 1fr;
      margin-top: 55px;
      padding-inline: 22px;
      gap: 75px;
    }

    a.movie-works__contact-link {
      padding: 27px 85px 26px 66px;
      border-radius: 10.319px;
      border: 1px solid #339;
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 1.6px;
    }

    .movie-works__contact {
      margin-top: 77px;
    }

    a.movie-works__contact-link::after {
      right: 20px;
      width: 10px;
      height: 10px;
      border-top: 2px solid currentColor;
      border-right: 2px solid currentColor;
    }

    .movie-works__top-link-wrap {
      margin-top: 52px;
      margin-bottom: 86px;
    }

    a.movie-works__top-link {
      background: #333399;
      border: 2px solid #333399;
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 262px;
      height: 62px;
      color: #fff;
      font-size: 14px;
      border-radius: 50px;
      font-family: "Noto Serif JP", serif;
      font-weight: bold;
      margin-inline: auto;
      transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    }

    .page-numbers {
      margin-top: 56px;
    }

  }

  .renewal_content#movie-works-content {
    padding-top: 114px;
  }

  .pc-only {
    display: none;
  }

}

/* ===============================================
# モーダル
=============================================== */

.modal-video {
  background: rgba(0, 0, 0, 0.8) !important;
}

.modal-video-body {
  max-width: 1100px !important;
}

@media (max-width: 388px) {
  .modal-video-movie-wrap {
    padding-bottom: 130.25% !important;
  }
}

@media (min-width: 389px) and (max-width: 767px) {
  .modal-video-movie-wrap {
    padding-bottom: 135.25% !important;
  }
}