@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
.itemCharacterPage {
  --font-sp: "Roboto Condensed", sans-serif;
  .l-wrapper {
    &::before {
      content: "";
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 21, 1)
        url(/assets/item_character/cinema-series/img/bgPatternWide.jpg)
        no-repeat center center / cover;
      z-index: 0;
      @media only screen and (max-width: 767px) {
      }
    }
    .seriesInfo__link {
      a,
      button {
        --btnColor: #fff;
        --btnBgColor: #00c695;
      }
    }
  }
  .kvSlide__pagination .swiper-pagination-bullet-active::before {
    background-color: #00c695;
  }
  .pageHeading__inner {
    &::before {
      content: "";
      width: calc(252em / 16);
      aspect-ratio: 982 / 280;
      background: url(/assets/item_character/cinema-series/img/logo_cinema.webp)
        no-repeat center center / contain;
      display: block;
      margin-inline: auto;
      margin-bottom: calc(15em / 16);
    }
  }
  .pageHeading__title {
    font-size: calc(28em / 16);
  }
  .seriesSection__logo {
    img {
      @media only screen and (min-width: 768px) {
        max-width: min(340px, calc(340vw / 12));
      }
    }
  }
  .itemList__prev,
  .itemList__next {
    border-radius: 0;
    --btnColor: #fff;
    --btnBgColor: #00c695;
  }

  .seriesInfo__header {
    position: relative;
    @media only screen and (max-width: 767px) {
    }
  }
  .seriesInfo__title {
    font-size: calc(50em / 16);
    font-family: var(--font-sp);
    width: fit-content;
    margin-inline: auto;
    position: relative;
    z-index: 1;
    line-height: 1.1;
    color: #000;
    @media only screen and (max-width: 767px) {
      font-size: calc(60em / 26);
    }
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      margin-inline: calc(-15em / 50);
      background: #01de9f;
      transform: skewX(10deg);
      z-index: -1;
    }
  }
  .dsSecWrapper {
  }
  .cinemaLocalNav {
    margin-bottom: calc(100em / 16);
    @media only screen and (max-width: 767px) {
      margin-bottom: calc(140em / 26);
    }
  }
  .cinemaLocalNav__items {
    display: flex;
    gap: calc(25em / 16);
    flex-wrap: wrap;
    justify-content: center;
    @media only screen and (max-width: 767px) {
      gap: calc(25em / 26);
    }
    li {
      font-weight: bold;
      font-size: calc(26em / 16);
      @media only screen and (max-width: 767px) {
        font-size: calc(32em / 26);
      }
      a {
        display: block;
        background-color: #01de9f;
        text-decoration: none;
        padding-inline: calc(30em / 26) calc(58em / 26);
        position: relative;
        @media only screen and (max-width: 767px) {
          padding-inline: calc(30em / 32) calc(58em / 32);
        }
        &::after {
          content: "";
          position: absolute;
          top: 50%;
          right: calc(20em / 26);
          background-color: currentColor;
          width: calc(10em / 26);
          aspect-ratio: 10 / 14;
          transform: translateY(-50%);
          /* デフォルトは右向き三角形 */
          clip-path: polygon(0 0, 100% 50%, 0 100%);
        }

        /* アンカーリンク(#〜)のときだけ下向き三角形に上書き */
        &[href^="#"]::after {
          width: calc(14em / 26);
          aspect-ratio: 14 / 10;
          clip-path: polygon(0 0, 100% 0%, 50% 100%);
        }
      }
    }
  }
  .cinemaSeriesList {
    @media only screen and (max-width: 767px) {
      .logoList__items {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: calc(30em / 26) calc(30% / 6.9);
      }
      .logoList__item {
        width: calc(330% / 6.9);
        margin-bottom: 0;
      }
      .logoList__img {
        aspect-ratio: 344 / 124;
        padding: 5.8139534884% 11.6279069767%;
        img {
          width: 86.8421052632%;
          height: 67.7419354839%;
        }
      }
    }
  }
  .cinemaPhotoList {
    margin-bottom: calc(60% / 11.2);
    @media only screen and (max-width: 767px) {
      margin-bottom: calc(60% / 6.9);
    }
  }
  .cinemaPhotoList__items {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8em / 16) calc(8% / 11.2);
    @media only screen and (max-width: 767px) {
      gap: calc(8em / 16) calc(15% / 6.9);
    }
    li {
      width: calc(274% / 11.2);
      @media only screen and (max-width: 767px) {
        width: calc(220% / 6.9);
      }
      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }
  }
  .cinemaAboutInfo {
    color: #fff;
    position: relative;
    z-index: 1;
    padding-block: calc(80% / 11.2);
    @media only screen and (max-width: 767px) {
      padding-block: calc(100% / 6.9);
    }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100dvw;
      left: 50%;
      transform: translateX(-50%);
      background: #000;
      z-index: -1;
    }
  }
  .cinemaAboutInfo__logo {
    width: calc(370% / 11.2);
    margin-inline: auto;
    margin-bottom: calc(40em / 16);
    @media only screen and (max-width: 767px) {
      width: calc(370% / 6.9);
      margin-bottom: calc(40em / 26);
    }
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
  .cinemaAboutInfo__txt1 {
    text-align: center;
    color: #01de9f;
    font-size: calc(20em / 16);
    font-weight: bold;
  }
  .cinemaAboutInfo__txt2 {
    text-align: center;
    margin-bottom: 2em;
  }
  .cinemaAboutList {
    margin-top: calc(-80% / 11.2);
    @media only screen and (max-width: 767px) {
      margin-top: calc(-100% / 6.9);
    }
  }
  .cinemaAboutList__items {
    display: flex;
    justify-content: space-between;
    li {
      width: calc(360% / 11.2);
      ._imgBox {
        img {
          width: 100%;
          height: auto;
          display: block;
        }
      }
      ._txt {
        margin-top: 1em;
        font-weight: 500;
        line-height: 1.5;
        @media only screen and (max-width: 767px) {
          font-size: calc(24em / 26);
        }
      }
    }
  }
}