@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");
.itemCharacterPage {
  --font-sp: "Oswald", sans-serif;
  .l-wrapper {
    &::before {
      content: "";
      position: fixed;
      inset: 0;
      background: #000
        url(/assets/item_character/godzilla/img/bg_main_T1lVODp6.webp?ver=1)
        no-repeat center center / cover;
      z-index: 0;

      @media only screen and (max-width: 767px) {
      }
    }
  }
  .gmz-logo {
    position: fixed;
    top: min(110px, calc(110vw / 12));
    right: min(10px, calc(10vw / 12));
    width: min(203px, calc(203vw / 12));
    aspect-ratio: 407 / 237;
    background: url(/assets/item_character/godzilla/img/logo_minuszero.webp?ver=1)
      no-repeat center center / cover;
    z-index: 0;
    @media only screen and (max-width: 767px) {
      display: none;
    }
  }
  .pageHeading__title {
    font-weight: 900;
  }
  .gmz-kv {
    width: min(936px, calc(936vw / 12));
    margin-inline: auto;
    margin-bottom: calc(40em / 16);
    position: relative;
    @media only screen and (min-width: 768px) {
      margin-top: calc(60em / 16);
    }
    @media only screen and (max-width: 767px) {
      margin-top: calc(60em / 26);
      width: calc(690% / 7.5);
    }
    img {
      width: 100%;
      height: auto;
      display: block;
    }
    ._txt {
      width: fit-content;
      font-weight: bold;
      margin-inline: auto;
      margin-top: 0.5em;
      font-size: calc(24em / 16);
      line-height: 1.5;
      @media only screen and (max-width: 767px) {
        font-size: calc(28em / 26);
      }
    }
  }
  .gmz-movBox {
    width: min(936px, calc(936vw / 12));
    margin-inline: auto;
    margin-top: calc(80em / 16);
    margin-bottom: calc(80em / 16);
    position: relative;
    @media only screen and (max-width: 767px) {
      margin-top: calc(60em / 26);
      margin-bottom: calc(100em / 26);
      width: calc(690% / 7.5);
    }
  }
  .kvWrapper {
    position: relative;
    z-index: 1;
  }
  .kv {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.55);
    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__logo {
    margin-bottom: calc(50em / 16);
    @media only screen and (max-width: 767px) {
      margin-bottom: calc(50em / 26);
    }
    img {
      width: auto;
      border: solid 1px #fff;
      max-height: calc(190em / 16);
      @media only screen and (max-width: 767px) {
        max-height: calc(190em / 26);
      }
    }
  }
  .leadSection {
    @media only screen and (min-width: 768px) {
      width: calc(960% / 11.2);
      margin-inline: auto;
    }
  }
  .seriesInfo__title {
    font-family: var(--font-sp);
    background: url(/assets/item_character/godzilla/img/bg_tex.jpg) no-repeat
      center center / cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: calc(80em / 16);
    letter-spacing: 0.02em;
    line-height: 1.2;
    @media only screen and (max-width: 767px) {
      font-size: calc(90em / 26);
    }
  }
  .itemSlide .itemList__item__inner:not(:has(> a)),
  .itemSlide .itemList__item__inner a {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: solid 1px #fff;
    border-radius: 0;
    .itemList__thumb {
      border-radius: 0;
    }
  }
  .gzInfoSec__mainImg {
    margin-bottom: calc(80% / 11.2);
    @media only screen and (max-width: 767px) {
      margin-bottom: calc(80% / 6.9);
    }
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
  .gzBrandInfo__tab {
    margin-bottom: calc(40% / 11.2);
    @media only screen and (max-width: 767px) {
      margin-bottom: calc(40% / 6.9);
    }
  }
  .gzBrandInfo__tab__items {
    gap: 0 calc(16% / 11.2);
    @media only screen and (max-width: 767px) {
      gap: 0 calc(12% / 6.9);
    }
  }
  .gzBrandInfo__tab__item {
    width: calc(272% / 11.2);
    @media only screen and (max-width: 767px) {
      width: calc(222% / 6.9);
    }
    a,
    button {
      position: relative;
      background: transparent;
      aspect-ratio: 268 / 85;
      border: none;
      width: 100%;
      height: auto;
      min-width: 0;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        clip-path: none;
        transform: none;
        opacity: 1;
        background: url(/assets/item_character/godzilla/img/tab01_on_g92z7bs6.png)
          no-repeat center center / cover;
        transition:
          opacity,
          filter 0.3s;
        box-sizing: border-box;
      }
      &[aria-selected="false"] {
        &::before {
          filter: brightness(0.4);
        }
      }
    }
    &:nth-child(2) {
      a,
      button {
        &::before {
          background-image: url(/assets/item_character/godzilla/img/tab02_on_k3xqznfj.png);
        }
      }
    }
    &:nth-child(3) {
      a,
      button {
        &::before {
          background-image: url(/assets/item_character/godzilla/img/tab03_on_s27dkr9y.png);
        }
      }
    }
  }
  .gzBrand__conts {
    position: relative;
    padding-bottom: calc(50% / 11.2);
    @media only screen and (min-width: 768px) {
      width: calc(1005% / 11.2);
      margin-inline: auto;
      display: flex;
    }
    @media only screen and (max-width: 767px) {
      padding-bottom: calc(50% / 6.9);
    }
    &::before {
      content: "";
      width: calc(822% / 10.05);
      background: url(/assets/item_character/godzilla/img/tab01_bg_j86vsk5p.png)
        no-repeat center bottom / cover;
      aspect-ratio: 822 / 391;
      position: absolute;
      bottom: 0;
      right: 0;
      @media only screen and (max-width: 767px) {
        width: 100%;
        aspect-ratio: 720 / 528;
        background-image: url(/assets/item_character/godzilla/img/tab01_bgsp_kbapgqmy.png);
      }
    }
  }
  .gzBrandInfo__tabPanel {
    &:nth-child(2) {
      .gzBrand__conts {
        &::before {
          background-image: url(/assets/item_character/godzilla/img/tab02_bg_dsnypkvf.png);
        }
      }
    }
    &:nth-child(3) {
      .gzBrand__conts {
        &::before {
          background-image: url(/assets/item_character/godzilla/img/tab03_bg_xctrwdgb.png);
        }
      }
    }
    &[aria-hidden="true"] {
      .gzBrandInfo__img {
      }
    }
  }
  .gzBrandInfo__img {
    position: relative;
    opacity: 1;
    width: calc(576% / 10.05);
    z-index: 1;
    transform: translate(0, 0);
    transition-property: transform, opacity;
    transition-behavior: allow-discrete;
    transition-duration: 0.7s;
    @media only screen and (max-width: 767px) {
      width: calc(540% / 6.9);
    }
    @starting-style {
      transform: translate(-40px, 0);
      opacity: 0;
    }
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
  .gzBrandInfo__txtBox {
    width: calc(390% / 10.05);
    box-sizing: border-box;
    transform: translate(0, 0);
    transition-property: transform, opacity;
    transition-behavior: allow-discrete;
    transition-duration: 0.5s;
    transition-delay: 0.3s;
    @starting-style {
      transform: translate(60px, 0);
      opacity: 0;
    }
    @media only screen and (min-width: 768px) {
      padding-left: calc(30% / 10.05);
      padding-top: calc(120% / 10.05);
    }
    @media only screen and (max-width: 767px) {
      width: calc(610% / 6.9);
      padding-top: calc(40% / 6.9);
      margin-inline: auto;
    }
  }
  .gzBrandInfo__title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: calc(30em / 16);
    font-weight: 900;
    position: relative;
    padding-bottom: calc(15em / 30);
    margin-bottom: calc(15em / 30);
    @media only screen and (max-width: 767px) {
      font-size: calc(30em / 26);
      margin-bottom: calc(18em / 30);
    }
    img {
      width: calc(75em / 30);
    }
    &::after {
      position: absolute;
      content: "";
      left: calc(-100% / 3.9);
      right: 0;
      bottom: 0;
      height: 1px;
      background-color: #fff;
      @media only screen and (max-width: 767px) {
        left: 0;
      }
    }
  }
  .gzBrandInfo__txt {
    position: relative;
    line-height: 1.8;
  }
  .gzMovSec__lead {
    font-size: calc(24em / 16);
    width: fit-content;
    margin-inline: auto;
    margin-bottom: calc(30em / 24);
    @media only screen and (min-width: 768px) {
      text-align: center;
    }
    @media only screen and (max-width: 767px) {
      font-size: calc(30em / 26);
    }
  }
  .gzMovSec__movBox {
    @media only screen and (min-width: 768px) {
      width: calc(1000% / 11.2);
      margin-inline: auto;
    }
  }
}