.itemCharacterPage {
  .l-wrapper {
    &::before {
      content: "";
      position: fixed;
      inset: 0;
      background-color: #ff8a01;
      @media only screen and (max-width: 767px) {
      }
    }
  }
  .seriesInfoWrapper {
    border-bottom-color: var(--colorGray9);
  }
  .breadcrumbNav li:last-child {
    color: #000;
  }
  .pageHeading__inner {
    background: url(/assets/item_character/dragonball_series/img/header-logo.webp)
      no-repeat center center / 92% auto;
    height: calc(50em / 16);
    width: calc(480em / 16);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }
  .pageHeading__title {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .kv {
    color: #fff;
    background-color: #000;
    padding-top: min(30px, calc(30% / 12));
    padding-bottom: min(20px, calc(20% / 12));
    @media only screen and (max-width: 767px) {
      padding-top: calc(30% / 7.5);
      padding-bottom: calc(20% / 7.5);
    }
  }
  .seriesSection__logoBox {
    width: 100%;
  }
  .dbSection__logoList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(20em / 16) calc(20em / 16);
    @media only screen and (max-width: 767px) {
      gap: calc(20em / 26) calc(30em / 26);
    }
    li {
      img {
        height: calc(96em / 16);
        width: auto;
        display: block;
        @media only screen and (max-width: 767px) {
          height: calc(100em / 26);
        }
      }
    }
  }
  .seriesInfo__title {
    font-size: calc(60em / 16);
    width: fit-content;
    margin-inline: auto;
    position: relative;
    font-weight: 900;
    @media only screen and (max-width: 767px) {
      font-size: calc(60em / 26);
    }
  }
  .itemSlide .itemList__item__inner:not(:has(> a)),
  .itemSlide .itemList__item__inner a {
    border: solid 1px #000;
    border-radius: 0;
    background-color: #000;
    color: #fff;
    .itemList__thumb {
      border-radius: 0;
      border: solid calc(10em / 16) #000;
      border-bottom-width: 0;
    }
  }
  .itemList__prev,
  .itemList__next {
    border-radius: 0;
    border-width: 0;
  }
  .dbSecWrapper {
    &::after {
      content: "";
      display: block;
      width: 100dvw;
      margin-left: calc(50% - 50dvw);
      margin-right: calc(50% - 50dvw);
      position: relative;
      background-color: #ff8a01;
      padding-bottom: calc(80% / 11.2);
      @media only screen and (max-width: 767px) {
        padding-bottom: calc(80% / 6.9);
      }
    }
  }
  .dbMovSec {
    position: relative;
    color: #ff8a01;
    z-index: 1;
    padding-block: calc(100% / 11.2) calc(100% / 11.2);
    /* margin-bottom: 0; */
    @media only screen and (max-width: 767px) {
      padding-block: calc(100% / 6.9) calc(100% / 6.9);
    }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100dvw;
      left: 50%;
      transform: translateX(-50%);
      background: #000;
      z-index: -1;
    }
  }
  .dbMovSlider {
    margin-inline: auto;
    @media only screen and (min-width: 768px) {
      width: calc(810% / 11.2);
    }
    @media only screen and (max-width: 767px) {
      width: calc(640% / 6.9);
    }
  }
  .dbMovie-slide {
    filter: grayscale(1);
    @media only screen and (max-width: 767px) {
      opacity: 0.4;
    }
    &.swiper-slide-active {
      filter: none;
      opacity: 1;
    }
  }
  .dbMovie_wrap {
    padding-inline: calc(30% / 8.1);
    position: relative;
    iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }
    &::after {
      /* content:"";
      position: absolute;
      inset: 0;
      background-color: rgba(0,0,0,0.5); */
    }
  }
  .dbMovSlider__navWrap {
    display: contents;
    .kvSlide__prev,
    .kvSlide__next {
      color: #fff;
      margin-top: 0;
      top: 50%;
    }
  }
  .dbSpSec {
    position: relative;
    z-index: 1;
    padding-block: calc(60% / 11.2) calc(60% / 11.2);
    /* margin-bottom: 0; */
    @media only screen and (max-width: 767px) {
      padding-block: calc(100% / 6.9) calc(100% / 6.9);
    }
  }
  .dbSpSlider {
    @media only screen and (min-width: 768px) {
      width: calc(1080% / 11.2);
      margin-inline: auto;
    }
    @media only screen and (max-width: 767px) {
      width: calc(320% / 6.9);
      margin-inline: auto;
    }
    .swiper-slide {
      transform: skew(-8deg);
      a {
        display: block;
        overflow: hidden;
        margin-inline: calc(10% / 3.8);
        background-color: #000;
        border-right: calc(10em / 16) solid #000;
        &::before,
        &::after {
          content: "";
          background-color: #000;
          display: block;
          width: calc(60% / 3.5);
          aspect-ratio: 1/ 1;
          border: 1px solid #fff;
          position: absolute;
          bottom: 0;
          left: calc(25% / 3.5);
          margin-bottom: calc(15% / 3.5);
          transform: skew(8deg);
          transition: 0.2s all;
          z-index: 1;
          box-sizing: border-box;
        }
        &::after {
          background-color: #fff;
          mask: url(/assets/item_character/dragonball_series/img/icon_plus.png)
            no-repeat center / contain;
        }
      }
      .dbSpSlider__thumb {
        margin-inline: calc(-42% / 3.5);
        transform: skew(8deg);
        img {
          width: 100%;
          height: auto;
          display: block;
        }
      }
    }
  }
  .dbSpSlider__inner {
    position: relative;
    padding-bottom: calc(10% / 10.8);
    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      padding-bottom: calc(400% / 10.8);
      width: 100dvw;
      background-color: #000;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .dbSpSlider__name {
    font-size: calc(30em / 16);
    font-weight: 900;
    margin-left: calc(-30% / 10.8);
    line-height: 1.2;
    margin-top: calc(10% / 10.8);
    @media only screen and (max-width: 767px) {
      font-size: calc(38em / 26);
      margin-top: calc(20% / 3.2);
      margin-left: calc(-185% / 3.2);
    }
  }
  .dbSpSlider__navWrap {
    margin-top: calc(10% / 10.8);
    float: right;
    @media only screen and (max-width: 767px) {
      margin-top: calc(20% / 3.2);
      margin-right: calc(-185% / 3.2);
    }
  }

  .seriesInfo {
    &:has(.seriesInfo__title[data-txt="ITEMS"]) {
      position: relative;
      padding-block: calc(100% / 11.2) calc(100% / 11.2);
      color: #ff8a01;
      @media only screen and (max-width: 767px) {
        padding-block: calc(100% / 6.9) calc(100% / 6.9);
      }
      &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100dvw;
        left: 50%;
        transform: translateX(-50%);
        background: #000;
        /* z-index: -1; */
      }
      .seriesInfo__link {
        a,
        button {
          --btnColor: #000;
          --btnBgColor: #fff;
        }
      }
    }
  }
}