@import url("https://fonts.googleapis.com/css2?family=LINE+Seed+JP:wght@100;400;700;800&display=swap");
@keyframes bgSlide {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ca-fade {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  } /* 1s / 8s */
  25% {
    opacity: 1;
  } /* 2s / 8s */
  37.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.itemBrandPage {
  --font-sp: "LINE Seed JP", sans-serif;
  .l-wrapper {
    &::before {
      content: "";
      position: fixed;
      inset: 0;
      background: #fff url(/assets/item_brand/changearts/img/bg_rpt.webp) repeat
        center top / auto;
      z-index: 0;
      @media only screen and (max-width: 767px) {
        background-size: calc(60% / 7.5) auto;
      }
    }
  }
  .kvSlide__img {
    border: 1px solid var(--colorGray5);
  }
  .breadcrumbNav {
  }
  .pageHeading {
    position: relative;
    z-index: 1;
    @media only screen and (max-width: 767px) {
    }
  }
  .pageHeading__title {
    font-weight: 900;
    /* transform: skewX(-8deg); */
  }

  .mainContents {
    padding-bottom: 0;
    position: relative;
  }
  .seriesSection__logoBox {
    @media only screen and (min-width: 768px) {
      /* width: calc(900% / 11.2); */
    }
  }
  .seriesSection__logo {
    margin-bottom: calc(50em / 16);
  }
  .seriesSection__lead {
    text-align: center;
    font-size: calc(18em / 16);
    font-weight: bold;
    @media only screen and (min-width: 768px) {
    }
  }
  .caAboutSec {
    @media only screen and (min-width: 768px) {
      /* width: calc(900% / 11.2); */
      margin-inline: auto;
    }
  }
  .lpBlock1 {
    @media only screen and (min-width: 768px) {
      width: calc(900% / 11.2);
      margin-inline: auto;
      margin-bottom: calc(80% / 11.2);
    }
    @media only screen and (max-width: 767px) {
      margin-bottom: calc(80% / 6.9);
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  ._movBox {
    @media only screen and (min-width: 768px) {
      /* width: calc(900% / 11.2);
      margin-inline: auto; */
    }
  }
  .caAnimateImg {
    aspect-ratio: 1009 / 807;
    position: relative;
    --duration: 1s;
    --fade: 1s;
    --count: 4; /* 枚数 */
    /* 1コマの占有時間 */
    --unit: calc(var(--duration) + var(--fade));
    /* 全体の周期 */
    --total: calc(var(--unit) * var(--count));
    ul {
      position: absolute;
      inset: 0;
    }
    li {
      position: absolute;
      inset: 0;
      background: url(/assets/item_brand/changearts/img/img_about_01_01_JFG35wOc.webp)
        no-repeat center top / contain;
      opacity: 0;
      animation: ca-fade var(--total) infinite;
      &:first-child {
        opacity: 1;
        animation-delay: calc(var(--unit) * 0);
      }
      &:nth-child(2) {
        background-image: url(/assets/item_brand/changearts/img/img_about_01_02_JFG35wOc.webp);
        animation-delay: calc(var(--unit) * -1 * (var(--count) - 1));
      }
      &:nth-child(3) {
        background-image: url(/assets/item_brand/changearts/img/img_about_01_03_JFG35wOc.webp);
        animation-delay: calc(var(--unit) * -1 * (var(--count) - 2));
      }
      &:nth-child(4) {
        background-image: url(/assets/item_brand/changearts/img/img_about_01_04_JFG35wOc.webp);
        animation-delay: calc(var(--unit) * -1 * (var(--count) - 3));
      }
    }
  }

  .caAboutSec__header {
    margin-bottom: calc(60em / 16);
    @media only screen and (max-width: 767px) {
      margin-bottom: calc(60em / 26);
      margin-inline: calc(-30% / 6.9);
    }
    ._txt {
      text-align: center;
      color: #00a1d3;
      font-size: calc(14em / 16);
    }
  }
  .caAboutSec__title {
    margin-inline: auto;
    width: fit-content;
    font-size: calc(52em / 16);
    text-align: center;
    font-family: var(--font-sp);
    font-weight: 800;
    line-height: 1.3;
    color: #00a1d3;
    margin-bottom: calc(4em / 52);
    padding-inline: calc(110em / 52);
    position: relative;
    @media only screen and (max-width: 767px) {
      font-size: calc(50em / 26);
    }
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: calc(93em / 52);
      aspect-ratio: 187/ 202;
      background: url(/assets/item_brand/changearts/img/obj_title_L.webp?ver=1)
        no-repeat center center / contain;
    }
    &::before {
      left: 0;
      background: url(/assets/item_brand/changearts/img/obj_title_L.webp?ver=1)
        no-repeat center center / contain;
    }
    &::after {
      right: 0;
      background: url(/assets/item_brand/changearts/img/obj_title_R.webp?ver=1)
        no-repeat center center / contain;
    }
  }
  .lpBlock2 {
    @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-bottom: calc(80% / 6.9);
    }
    p {
      text-align: center;
      text-shadow: #ffffff 0px 0px calc(8em / 16);
    }
  }
  .lpBlock2__header {
    position: relative;
    margin-bottom: calc(22em / 16);
    padding-inline: calc(100% / 11.8);
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: calc(90% / 11.8);
      aspect-ratio: 90 / 72;
      top: 50%;
      transform: translateY(-50%);
      background: url(/assets/item_brand/changearts/img/obj_title2_R.webp)
        no-repeat center center / contain;
    }
    &::before {
      left: 0;
      transform: translateY(-50%) scaleX(-1);
    }
    &::after {
      right: 0;
    }
  }
  .lpBlock2__title {
    font-size: calc(40em / 16);
    font-weight: 800;
    font-family: var(--font-sp);
    line-height: 1.3;
    margin-inline: auto;
    width: fit-content;
    text-align: center;
    @media only screen and (max-width: 767px) {
      font-size: calc(37em / 26);
    }
  }
  .lpBlock2__main {
    border: solid 3px #2a588c;
    background-color: #e6eaef;
    padding: calc(45% / 10) 0 calc(68% / 10);
    position: relative;
    margin-bottom: calc(60% / 11.2);
    @media only screen and (max-width: 767px) {
      margin-bottom: calc(60% / 6.9);
      padding: calc(60% / 6.9) calc(28% / 6.9) calc(60% / 6.9);
    }
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: calc(20% / 10);
      margin: calc(20% / 10);
      aspect-ratio: 1 / 1;
      top: 0;
      background: url(/assets/item_brand/changearts/img/obj_screw.webp)
        no-repeat center center / contain;
      pointer-events: none;
      @media only screen and (max-width: 767px) {
        width: calc(20% / 6.9);
        margin: calc(20% / 6.9);
      }
    }
    &::before {
      left: 0;
    }
    &::after {
      right: 0;
    }
    ._inner {
      &::before,
      &::after {
        content: "";
        position: absolute;
        width: calc(20% / 10);
        margin: calc(20% / 10);
        aspect-ratio: 1 / 1;
        bottom: 0;
        background: url(/assets/item_brand/changearts/img/obj_screw.webp)
          no-repeat center center / contain;
        pointer-events: none;
        @media only screen and (max-width: 767px) {
          width: calc(20% / 6.9);
          margin: calc(20% / 6.9);
        }
      }
      &::before {
        left: 0;
      }
      &::after {
        right: 0;
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  .lpBlock2__lead {
    text-align: center;
    font-size: calc(18em / 16);
    font-weight: bold;
    margin-bottom: calc(35em / 18);
    line-height: 1.6;
    @media only screen and (max-width: 767px) {
      font-size: calc(28em / 26);
      margin-bottom: calc(40em / 28);
    }
  }
  .caFeatureImgList {
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    @media only screen and (min-width: 768px) {
      width: calc(860% / 9.98);
    }
    li {
      width: calc(400% / 8.6);
    }
    img {
      width: 100%;
      height: auto;
    }
  }
  .caFeatureImgList2 {
    margin-inline: auto;

    @media only screen and (min-width: 768px) {
      width: calc(860% / 9.98);
      display: flex;
      justify-content: space-between;
    }
    li {
      @media only screen and (min-width: 768px) {
        width: calc(400% / 8.6);
      }
      @media only screen and (max-width: 767px) {
        margin-bottom: calc(40% / 6.38);
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    img {
      width: 100%;
      height: auto;
    }
  }
  .caFeatureImg {
    margin-inline: auto;
    @media only screen and (min-width: 768px) {
      width: calc(860% / 9.98);
    }
    img {
      width: 100%;
      height: auto;
    }
    .caFeatureImg__note {
      font-size: calc(14em / 16);
      margin-top: 0.8em;
      text-align: left;
      @media only screen and (min-width: 768px) {
        font-size: calc(22em / 26);
      }
    }
  }

  .caFeatureImg2 {
    width: calc(980% / 9.98);
    margin-inline: auto;
    img {
      width: 100%;
      height: auto;
    }
  }
}