.itemCharacterPage {
  .l-wrapper {
    z-index: 1;
    &::before {
      content: "";
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 1)
        url(/assets/item_character/osama_ranking/img/img_bg.jpg) repeat center
        top;
      z-index: -1;
      @media only screen and (max-width: 767px) {
      }
    }

    .seriesInfo__link {
      a,
      button {
        /* --btnColor: #fff;
        --btnBgColor: #cc0000; */
      }
    }
  }
  .pageHeading__title {
  }
  .seriesSection__logoBox {
    background:
      url(/assets/item_character/osama_ranking/img/frame_center.png) no-repeat
        center center,
      url(/assets/item_character/osama_ranking/img/frame_btm.png) no-repeat
        center bottom,
      url(/assets/item_character/osama_ranking/img/frame_top.png) no-repeat
        center top,
      #610707;
    background-size:
      100% auto,
      100% auto,
      100% auto;
    color: #fff;
    padding: calc(60% / 11.2) calc(80% / 11.2) calc(65% / 11.2);
    @media only screen and (max-width: 767px) {
      padding: calc(80% / 6.9) calc(60% / 6.9) calc(60% / 6.9);
    }
  }
  .seriesSection__logo {
    img {
      max-height: calc(270em / 16);
    }
  }
  .itemSlide .itemList__item__inner:not(:has(> a)),
  .itemSlide .itemList__item__inner a {
  }

  .esSectionWrapper {
    position: relative;
    z-index: 1;
    padding-top: calc(160% / 11.2);
  }
  .orAboutSec {
    margin-bottom: calc(80% / 11.2);
    position: relative;
    @media only screen and (min-width: 768px) {
      width: calc(850% / 11.2);
      margin-inline: auto;
    }
  }
  .orAboutSec__img {
    width: calc(400% / 11.2);
    margin-inline: auto;
    @media only screen and (max-width: 767px) {
      width: calc(690% / 6.9);
    }
    img {
      width: 100%;
      height: auto;
    }
  }
  .orBrandSec {
    @media only screen and (min-width: 768px) {
      width: calc(1000% / 11.2);
      margin-inline: auto;
    }
    .item_notice {
      a {
        display: block;
        background: url(/assets/item_character/osama_ranking/img/img_itemdetail_bg.png)
          no-repeat center center;
        background-size: 100% 100%;
        position: relative;
        text-align: center;
        color: #604610;
        aspect-ratio: 1000 / 423;
        margin: calc(70% / 11.2) auto calc(40% / 11.2);
        box-sizing: border-box;
        text-decoration: none;
        @media only screen and (min-width: 768px) {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        @media only screen and (max-width: 767px) {
          background: url(/assets/item_character/osama_ranking/img/img_itemdetail_bg_sp.png)
            no-repeat center center;
          background-size: 100% 100%;
          margin: calc(60% / 6.9) auto;
          padding: calc(50% / 6.9) 0;
        }
      }
      ._img {
        width: calc(310em / 16);
        img {
        }
        @media only screen and (max-width: 767px) {
          width: 40%;
          margin: 0 auto calc(10em / 26);
        }
      }
      p {
        border-bottom: 1px solid #cec3a2;
        font-size: calc(44em / 16);
        text-align: left;
        font-weight: 600;
        line-height: 1.5;
        @media only screen and (max-width: 767px) {
          font-size: calc(32em / 26);
          text-align: center;
          width: fit-content;
          margin-inline: auto;
        }
        span {
          font-size: calc(32em / 44);
        }
        &:last-of-type {
          position: relative;
          padding-right: calc(30em / 44);
          padding-top: calc(8em / 44);
          &::after {
            content: "▼";
            position: absolute;
            top: calc(50% + (4em / 20));
            right: 0;
            transform: translateY(-50%) rotate(-90deg);
            font-size: calc(20em / 44);
          }
        }
      }
    }
    .brandttl {
      a {
        display: block;
        text-decoration: none;
        background: url(/assets/item_character/osama_ranking/img/img_brandttl_bg.png)
          no-repeat center center;
        background-size: 100% 100%;
        position: relative;
        color: #000;
        aspect-ratio: 1000 / 190;
        @media only screen and (min-width: 768px) {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        @media only screen and (max-width: 767px) {
          background: url(/assets/item_character/osama_ranking/img/img_brandttl_bg_sp.png)
            no-repeat center center;
          background-size: 100% 100%;
          margin: calc(60% / 6.9) auto;
          padding: calc(50% / 6.9) 0;
        }
      }
      .flexright {
        @media only screen and (min-width: 768px) {
          margin-left: calc(35% / 10);
        }
      }
      ._logo {
        width: calc(304em / 16);
        img {
        }
        @media only screen and (max-width: 767px) {
          width: 40%;
          margin: 0 auto calc(10em / 26);
        }
      }
      ._txtBox {
        @media only screen and (min-width: 768px) {
          width: calc(495% / 10);
        }
        @media only screen and (max-width: 767px) {
          margin: calc(10em / 26) 7% 0;
        }
      }
      ._txt {
        font-weight: 600;
        font-size: calc(18em / 16);
        line-height: 1.5;
        padding-top: calc(4em / 18);
        text-align: left;
        @media only screen and (max-width: 767px) {
          font-size: calc(24em / 26);
        }
      }
    }
  }
}