@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap");
.itemCharacterPage {
  --font-sp: "M PLUS 1p", sans-serif;
  .l-wrapper {
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        url(/assets/item_character/umamusume/img/00bg_03square_XyXs3rCx.png)
          no-repeat center 20% / 100% auto,
        url(/assets/item_character/umamusume/img/00bg_02sky_Q7aJeQYR.jpg)
          no-repeat center top / 100% auto;
      z-index: 0;
      @media only screen and (max-width: 767px) {
        background:
          url(/assets/item_character/umamusume/img/00bg_03square_XyXs3rCx.png)
            repeat-y center 20% / 100% auto,
          url(/assets/item_character/umamusume/img/00bg_02sky_Q7aJeQYR.jpg)
            no-repeat center top / 100% auto;
      }
    }
    .seriesInfo__link {
      width: fit-content;
      margin-inline: auto;
      border-radius: 5em;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
      a,
      button {
        --btnColor: #fff;
        --btnBgColor: #39b549;
      }
    }
    .itemList__prev,
    .itemList__next {
      --btnBgColor: #39b549;
      border-width: 0;
    }
  }
  .pageHeading__title {
    font-family: var(--font-sp);
    color: #fcd039;
    text-shadow:
      1px 1px 0 #8c6239,
      -1px -1px 0 #8c6239,
      -1px 1px 0 #8c6239,
      1px -1px 0 #8c6239,
      0px 1px 0 #8c6239,
      0 -1px 0 #8c6239,
      -1px 0 0 #8c6239,
      4px 2px 0 #8c6239;
    font-weight: 900;
  }
  .seriesSection__logoBox {
  }
  .seriesSection__lead {
    display: none;
  }
  #intro_area {
    margin-bottom: calc(60% / 11.2);
    position: relative;

    @media only screen and (min-width: 768px) {
      width: calc(1000% / 11.2);
      margin-inline: auto;
      margin-top: calc(-40% / 11.2);
      font-size: min(16px, calc(16vw / 12));
    }
    @media only screen and (max-width: 767px) {
      margin-inline: calc(-15% / 6.9);
      margin-top: calc(-40% / 6.9);
    }
    .intro_ttl {
      position: absolute;
      top: 0;
      left: calc(40% / 10);
      line-height: 1.15;
      font-family: var(--font-sp);
      @media only screen and (max-width: 767px) {
        top: -1px;
        left: 0;
      }
      &::after {
        content: "";
        background: url(/assets/item_character/umamusume/img/ico01.png)
          no-repeat center center;
        background-size: contain;
        position: absolute;
        top: calc(-35em / 16);
        right: calc(-10em / 16);
        bottom: 0;
        width: calc(77em / 16);
        aspect-ratio: 77 / 80;
        z-index: 0;
        @media only screen and (max-width: 767px) {
          width: calc(60em / 26);
          top: calc(-40em / 26);
          right: 0;
        }
      }

      span {
        color: #fcd039;
        text-shadow:
          1px 1px 0 #8c6239,
          -1px -1px 0 #8c6239,
          -1px 1px 0 #8c6239,
          1px -1px 0 #8c6239,
          0px 1px 0 #8c6239,
          0 -1px 0 #8c6239,
          -1px 0 0 #8c6239,
          4px 2px 0 #8c6239;
        font-size: calc(38em / 16);
        font-weight: 900;
        transform: rotate(-5deg);
        position: relative;
        display: inline-block;
        padding: calc(5em / 38) calc(60em / 38) calc(5em / 38) calc(10em / 38);
        @media only screen and (max-width: 767px) {
          font-size: calc(26em / 26);
          padding: calc(5em / 26) calc(80em / 26) calc(10em / 26)
            calc(20em / 26);
        }

        html[lang="en"] &,
        html[lang="es"] & {
          font-size: calc(32em / 16);
          padding: calc(5em / 32) calc(70em / 32) calc(5em / 32) calc(10em / 32);
          @media only screen and (max-width: 767px) {
            font-size: calc(24em / 26);
          }
        }
      }
    }

    .intro_txt {
      color: #39b54a;
      background: url(/assets/item_character/umamusume/img/bg_about.png)
        no-repeat center top;
      background-size: contain;
      font-weight: 900;
      padding: calc(90% / 10) calc(50% / 10) calc(60% / 10);
      font-size: calc(30em / 16);
      line-height: 1.8em;
      font-family: var(--font-sp);
      aspect-ratio: 980 / 295;
      box-sizing: border-box;
      @media only screen and (max-width: 767px) {
        font-size: calc(21em / 26);
        padding: calc(70% / 6.9) calc(40% / 6.9) calc(40% / 6.9);
      }
      html[lang="en"] & {
        font-size: calc(24em / 16);
        line-height: 2.3em;
        @media only screen and (max-width: 767px) {
          font-size: calc(16em / 26);
        }
      }

      html[lang="es"] & {
        font-size: calc(17em / 16);
        line-height: 3.2em;
        @media only screen and (max-width: 767px) {
          font-size: calc(12em / 26);
        }
      }
    }
  }
  .itemSlide .itemList__item__inner:not(:has(> a)),
  .itemSlide .itemList__item__inner a {
  }

  .seriesInfo__header {
    position: relative;
    @media only screen and (max-width: 767px) {
    }
  }
  .seriesInfo__title {
    color: #fcd039;
    text-shadow:
      1px 1px 0 #8c6239,
      -1px -1px 0 #8c6239,
      -1px 1px 0 #8c6239,
      1px -1px 0 #8c6239,
      0px 1px 0 #8c6239,
      0 -1px 0 #8c6239,
      -1px 0 0 #8c6239,
      4px 2px 0 #8c6239;
    font-size: calc(45em / 16);
    font-weight: 900;
    position: relative;
    line-height: 1;
    padding: calc(20em / 45) 0;
    z-index: 1;
    font-family: var(--font-sp);
    @media only screen and (max-width: 767px) {
      margin-inline: calc(-15% / 6.9);
    }
    &::before {
      content: "";
      background: url(/assets/item_character/umamusume/img/ico02.png) no-repeat
        center center;
      background-size: 100%;
      position: absolute;
      top: 0;
      left: auto;
      transform: translateX(-1.5em);
      bottom: 0;
      width: calc(60em / 45);
      height: 100%;
      z-index: 0;
    }
    &::after {
      background: url(/assets/item_character/umamusume/img/bg_ttl.png) no-repeat
        center center;
      background-size: 100%;
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      z-index: -1;
      bottom: 0;
    }
  }
  .umBrandSec__main {
    margin-bottom: calc(50% / 10);
    @media only screen and (min-width: 768px) {
      width: calc(1000% / 11.2);
      margin-inline: auto;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  .brand_area {
    .brand_area__inner {
      align-items: center;
      margin-top: calc(50% / 10);
      margin-bottom: calc(50% / 10);
      @media only screen and (min-width: 768px) {
        display: flex;
      }
      @media only screen and (max-width: 767px) {
      }
      div {
        @media only screen and (min-width: 768px) {
          width: 35%;
          margin-right: 5%;
        }
        @media only screen and (max-width: 767px) {
          width: calc(400% / 6.9);
          margin-inline: auto;
          margin-bottom: calc(30em / 26);
        }
      }
      img {
        margin: 0 2%;
      }
    }
    p {
      font-size: calc(20em / 16);
      font-weight: 900;
      line-height: 1.8em;
      font-family: var(--font-sp);
      @media only screen and (min-width: 768px) {
        width: 60%;
      }
      @media only screen and (max-width: 767px) {
        font-size: calc(24em / 26);
      }
    }
  }
  .umPointTitle {
    text-align: center;
    margin: auto;
    font-size: calc(50em / 16);
    font-weight: 900;
    font-family: var(--font-sp);
    color: #39b54a;
    text-shadow:
      1px 1px 0 #fff,
      -1px -1px 0 #fff,
      -1px 1px 0 #fff,
      1px -1px 0 #fff,
      0px 1px 0 #fff,
      0 -1px 0 #fff,
      -1px 0 0 #fff,
      4px 2px 0 #fff;
    position: relative;
    @media only screen and (max-width: 767px) {
      font-size: calc(60em / 26);
    }
  }
  .umBrandInfoWrapper {
    @media only screen and (max-width: 767px) {
      font-size: calc(11em / 26);
    }
  }
  .umBrandInfo__tab {
    margin-bottom: calc(-20em / 16);
  }
  .umBrandInfo__tab__items {
    justify-content: space-between;
    gap: 0 0;
    @media only screen and (max-width: 767px) {
      gap: 0 0;
    }
  }
  .umBrandInfo__tab__item {
    width: 33.33%;
    --tabColor: #6454ff;
    @media only screen and (max-width: 767px) {
    }
    a,
    button {
      position: relative;
      background: transparent;
      border: none;
      width: 100%;
      height: auto;
      min-width: 0;
      z-index: 1;
      color: #fff;
      font-family: var(--font-sp);
      font-size: calc(32em / 16);
      font-weight: 800;
      background: var(--tabColor);
      border: solid calc(8em / 32) var(--tabColor);
      border-bottom-width: 0;
      border-radius: calc(20em / 32) calc(20em / 32) 0 0;
      padding: calc(20em / 32) calc(5em / 32) calc(30em / 32);
      &::before {
        display: none;
      }
      &[aria-selected="false"] {
        background-color: #fff;
        color: var(--tabColor);
        border-color: var(--tabColor);
        .tsBrandInfo__tab__txtBox {
          /* opacity: 0.6; */
        }
        &::before {
          /* filter: brightness(0.4); */
        }
      }
    }
    &:nth-child(2) {
      --tabColor: #ff79b1;
    }
    &:nth-child(3) {
      --tabColor: #39b549;
    }
  }
  #area01-01 {
    --tabColor: #6454ff;
  }
  #area01-02 {
    --tabColor: #ff79b1;
  }
  #area01-03 {
    --tabColor: #39b549;
  }
  .umBrand__conts {
    position: relative;
    background: #fff;
    font-size: calc(32em / 16);
    border-radius: calc(20em / 32);
    text-align: center;
    overflow: hidden;
    aspect-ratio: 1000 / 750;
    margin: 0;
    padding: calc(20% / 10) calc(30% / 10) calc(30% / 10);
    z-index: 1;

    border: solid calc(8em / 32) var(--tabColor);
    box-sizing: border-box;
  }
  .umBrand__conts {
    .flexbox {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
    }
    .catch01 {
      color: #fcd039;
      text-shadow:
        1px 1px 0 #8c6239,
        -1px -1px 0 #8c6239,
        -1px 1px 0 #8c6239,
        1px -1px 0 #8c6239,
        0px 1px 0 #8c6239,
        0 -1px 0 #8c6239,
        -1px 0 0 #8c6239,
        4px 2px 0 #8c6239;
      font-weight: 900;
      font-size: calc(43em / 32);
      line-height: 1.5;
      text-align: center;
    }

    .catch02 {
      margin: calc(20% / 10) auto;
      font-weight: 900;
      font-size: calc(30em / 32);
      text-align: center;
      line-height: 1.3;
      color: var(--tabColor);
    }

    .tettei.flexbox p {
      margin: 1% 0.5%;
    }

    .parts01.flexbox p,
    .parts02.flexbox p {
      margin: 1% 0.3%;
    }

    .scene.flexbox {
      width: 145%;
      margin: auto -18%;

      p {
        width: 25%;
        margin: auto -2.3%;
      }

      .img01 {
        width: 20%;
        margin-top: calc(30% / 13.4);
      }

      .img02 {
        margin-top: calc(30% / 13.4);
        width: 28%;
        margin-right: -6%;
      }

      .img03 {
        width: 23%;
        margin-top: 0;
        margin-left: -4%;
        margin-right: -1.8%;
      }

      .img04 {
        margin-top: calc(5% / 13.4);
      }
    }

    .lineup.flexbox {
      margin-left: -6%;

      p {
        margin: 0 -6%;
      }
    }
  }
}