.itemBrandPage {
  .l-wrapper {
    background-color: #fff;
    color: #000;
    &::before {
      content: "";
      position: fixed;
      inset: 0;
      background: #000 url(/assets/item_brand/metal_build/img/bg_bl.jpg)
        repeat-y center top / 100%;
      z-index: 0;
      @media only screen and (max-width: 767px) {
      }
    }
    .footerPageTop a {
      --btnColor: #fff;
      --btnBgColor: #000;
    }
  }
  .pageHeading {
    margin-bottom: 0;
    padding-bottom: calc(50em / 16);
    @media only screen and (max-width: 767px) {
      padding-bottom: calc(60em / 26);
    }
  }
  .pageHeading__inner {
    background: url(/assets/item_brand/metal_build/img/header_logo.webp)
      no-repeat center center / contain;
    height: calc(60em / 16);
    width: calc(250em / 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 {
    /* padding-top: min(30px, calc(30% / 12)); */
    padding-bottom: min(10px, calc(10% / 12));
    margin-bottom: 0;
    @media only screen and (max-width: 767px) {
      /* padding-top: calc(30% / 7.5); */
      padding-bottom: calc(20% / 7.5);
    }
  }
  .kvSlide__pagination {
    .swiper-pagination-bullet {
      &::before {
        background-color: var(--colorGray5);
      }
    }
    .swiper-pagination-bullet-active {
      &::before {
        background-color: var(--colorRed);
      }
    }
  }

  .itemSlide .itemList__item__inner:not(:has(> a)),
  .itemSlide .itemList__item__inner a {
    background: #fff;
    color: #000;
    border-radius: 0;
    .itemList__thumb {
      border-radius: 0;
    }
  }
  .mainContents {
    padding-bottom: 0;
    position: relative;
  }
  .seriesSection:not(.seriesSection2) {
    .seriesInfoWrapper {
      padding-top: calc(100% / 11.2);
      padding-bottom: 1px;
      margin-bottom: 0;
      border-bottom-width: 0;
      position: relative;
      z-index: 1;
      color: #000;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100dvw;
        left: 50%;
        transform: translateX(-50%);
        background: #fff url(/assets/item_brand/metal_build/img/bg_wt.jpg)
          repeat-y center top / 100%;
        z-index: -1;
      }
    }
  }
  .seriesSection2 {
    padding-top: min(100px, calc(100% / 12));
    background-color: #fff;
    color: #000;
    position: relative;
    margin-bottom: calc(-1 * (min(20px, (20vw / 12)) + calc(70em / 16)));
    padding-bottom: min(100px, (100% / 12));
    @media only screen and (max-width: 767px) {
      padding-top: calc(100% / 7.5);
      margin-bottom: calc(-1 * ((20vw / 7.5) + calc(100em / 26)));
      padding-bottom: calc(140% / 7.5);
    }
    .seriesSection__backLink {
      a,
      button {
        --btnBgColor: #000;
        --btnColor: #fff;
      }
    }
  }
  .lpSection {
    position: relative;
    margin-bottom: calc(60% / 11.2);
    &:last-child {
      margin-bottom: 0;
    }
    @media only screen and (max-width: 767px) {
      margin-bottom: calc(60% / 6.9);
    }
  }
  .lpSection__header {
    position: relative;
    margin-bottom: calc(30em / 16);
    background: url(/assets/item_brand/metal_build/img/hrader_ornament_01.png)
      no-repeat center center / auto calc(40em / 16);
    @media only screen and (max-width: 767px) {
      background-size: auto calc(40em / 26);
      margin-bottom: calc(30em / 26);
    }
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      height: calc(120em / 16);
      border-left: solid calc(2em / 16) #b29951;
      @media only screen and (max-width: 767px) {
        height: calc(80em / 26);
        border-left-width: calc(3em / 26);
      }
    }
    &::before {
      left: 0;
    }
    &::after {
      right: 0;
    }
  }
  .lpSection__header2 {
    margin-bottom: calc(10em / 16);
  }
  .lpSection__title {
    width: calc(385% / 11.2);
    margin-inline: auto;
    padding-top: calc(10% / 11.2);
    @media only screen and (max-width: 767px) {
      width: calc(385% / 6.9);
    }
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
  .lpSection__main {
    border: solid calc(2em / 16) #b29951;
    border-top: none;
    padding: calc(20% / 11.2);
    padding-top: 0;
    @media only screen and (max-width: 767px) {
      border-width: calc(3em / 26);
      padding: calc(20% / 6.9);
      padding-top: 0;
    }
  }
  .lpBlock {
    background-color: rgba(218, 218, 218, 0.4);
    padding: calc(30% / 10.76) calc(80% / 10.76);
    @media only screen and (max-width: 767px) {
      padding: calc(20% / 6.5);
    }
  }
  .lpBlock__title {
    font-size: calc(20em / 16);
    width: fit-content;
    margin-inline: auto;
    margin-bottom: calc(20em / 20);
  }
  .lpBlock__andmore {
    text-align: right;
    margin-top: -0.5em;
  }

  .seriesInfo:has(.seriesInfo__title[data-txt="TOPICS"]) {
    .seriesInfo__link {
      a,
      buton {
        border-color: var(--colorGray5);
      }
    }
  }
  .seriesInfoWrapper:not(
    :has([data-txt="関連作品ページ"], [data-txt="関連ブランドページ"])
  ) {
    .seriesInfo:has(.seriesInfo__title[data-txt="ITEMS"]) {
      margin-bottom: 0;
    }
  }
  .seriesInfo:has(.seriesInfo__title[data-txt="ITEMS"]) {
    padding-top: calc(100% / 11.2);
    padding-bottom: calc(100% / 11.2);
    position: relative;
    z-index: 1;
    color: #fff;
    @media only screen and (max-width: 767px) {
      padding-top: calc(100% / 6.9);
      padding-bottom: calc(100% / 6.9);
    }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100dvw;
      left: 50%;
      transform: translateX(-50%);
      background: #000 url(/assets/item_brand/metal_build/img/bg_bl.jpg)
        repeat-y center top / 100%;
      z-index: -1;
    }
  }
  .seriesInfo__header {
    overflow-x: clip;
  }
  .seriesInfo__title {
    font-family: "Noto Serif JP", "Times", "Times New Roman", Helvetica, serif;
    background: linear-gradient(to bottom, #e7c95e 0%, #937c1b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: calc(60em / 16);
    width: fit-content;
    margin-inline: auto;
    position: relative;
    @media only screen and (max-width: 767px) {
      font-size: calc(60em / 26);
    }
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 55%;
      width: 50vw;
      height: calc(20em / 60);
      background: url(/assets/item_brand/metal_build/img/hrader_ornament_02.png)
        no-repeat center right / auto 100%;
    }
    &::before {
      left: 0;
      transform: translate(-100%, -50%);
      margin-left: calc(-30em / 60);
    }
    &::after {
      right: 0;
      transform: translate(100%, -50%) scaleX(-1);
      margin-right: calc(-30em / 60);
    }
  }
  .mb-pickupSec__img {
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
  .mb-pickupSec__intrTxt {
    text-align: center;
    /* font-size: 1.1em; */
    letter-spacing: 0.05em;
    line-height: 2;
    padding: 2em 0 0;
    @media only screen and (max-width: 767px) {
      font-size: calc(24em / 26);
    }
    small {
      font-size: 0.8em;
    }
  }
}
