.itemCharacterPage {
  .l-wrapper {
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 1)
        url(/assets/item_character/mashle/img/bg_top_p4mkhny3.png) no-repeat
        center top / 100% auto;
      z-index: 0;
      @media only screen and (max-width: 767px) {
        background: #000;
      }
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-left: solid 3px #79582f;
      border-right: solid 3px #79582f;
      margin-inline: 10px;
      z-index: 0;
      pointer-events: none;
      @media only screen and (max-width: 767px) {
        border-left: solid 2px #79582f;
        border-right: solid 2px #79582f;
        margin-inline: 5px;
      }
    }
    .seriesInfo__link {
      a,
      button {
        --btnColor: #d6c368;
        --btnBgColor: #9c001c;
      }
    }
    .breadcrumbNav li:last-child {
      color: #fff;
    }
  }
  .pageHeading__title {
    font-family: var(--font-serif);
  }
  .seriesSection__logoBox {
    background: url(/assets/item_character/mashle/img/bg_intro_y4ihg2ke.png)
      no-repeat center top / 100% 100%;
    color: #fff;
    padding: calc(50% / 11.2) calc(50% / 11.2) calc(80% / 11.2);
    @media only screen and (max-width: 767px) {
      width: auto;
      margin-inline: calc(-30% / 6.9);
      padding: calc(80% / 6.9) calc(30% / 6.9) calc(80% / 6.9);
      background-size: auto 100%;
    }
  }
  .seriesSection__lead {
    font-family: var(--font-serif);
  }

  .itemSlide .itemList__item__inner:not(:has(> a)),
  .itemSlide .itemList__item__inner a {
    background: #79582f;
    color: #fff;
    border-radius: 0;
    .itemList__thumb {
      border-radius: 0;
    }
    &:hover {
      .itemList__title {
        color: inherit;
      }
    }
  }

  .seriesInfo__header {
    position: relative;
    font-family: var(--font-serif);
  }
  .seriesInfo__title {
  }
  .msContents {
    @media only screen and (min-width: 768px) {
      width: calc(1000% / 11.2);
      margin-inline: auto;
      margin-bottom: calc(80% / 11.2);
    }
    @media only screen and (max-width: 767px) {
      margin-inline: calc(-30% / 6.9);
    }
  }
  .msContents__title {
    padding: calc(20em / 36) calc(60em / 36);
    color: #000;
    background: url(/assets/item_character/mashle/img/bg_about_p38ske6v.png)
      no-repeat center center;
    background-size: 100% 100%;
    text-align: center;
    font-size: calc(36em / 16);
    font-weight: bold;
    line-height: 1.5;
    position: relative;
    z-index: 1;
    margin-bottom: calc(30em / 36);
    @media only screen and (max-width: 767px) {
      font-size: calc(36em / 26);
      padding: calc(10em / 36) calc(60em / 36);
    }
  }
  .msContents__lead {
    font-size: calc(23em / 16);
    margin-bottom: calc(30em / 23);
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1.5;
    @media only screen and (max-width: 767px) {
      font-size: calc(30em / 26);
    }
  }
  .msContents {
    .aboutArea {
      position: relative;
      z-index: 0;
      padding: calc(120% / 10) calc(20% / 10);
      @media only screen and (max-width: 767px) {
        text-align: center;
        padding: calc(20% / 7.5) calc(40% / 7.5);
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .about_logo {
      margin-bottom: calc(40em / 16);
      width: calc(300% / 10);
      @media only screen and (max-width: 767px) {
        width: calc(320% / 6.7);
        margin-inline: auto;
      }
    }
    .about_txt {
      margin-bottom: calc(30em / 16);
      line-height: 1.8;
      @media only screen and (max-width: 767px) {
        font-size: calc(22em / 26);
        text-align: left;
      }
    }
    .about_btn {
      a {
        border-radius: 0;
      }
    }
    .about_img {
      position: absolute;
      z-index: -1;
      @media only screen and (min-width: 768px) {
        right: calc(-235% / 10);
        top: 0;
        margin-top: calc(-122% / 10);
        width: calc(919% / 10);
      }
      @media only screen and (max-width: 767px) {
        margin: -40% -40% 0 -35%;
        position: relative;
        width: auto;
      }
    }
  }
  .seriesInfo {
    &:has(.seriesInfo__title[data-txt="ITEMS"]) {
      position: relative;
      padding-block: calc(140% / 11.2) calc(100% / 11.2);
      color: #000;
      @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: #9c001c;
        background: #9c001c
          url(/assets/item_character/mashle/img/line_s3an87t9.png) no-repeat
          center top 10px;
        background-size: contain;
        /* z-index: -1; */
        @media only screen and (max-width: 767px) {
          background-size: 200% auto;
        }
      }
      .seriesInfo__link {
        a,
        button {
          --btnColor: #fff;
          --btnBgColor: #000;
        }
      }
    }
  }
}