/* ==========================================================================
   About Pages - Shared Styles
   ========================================================================== */

/* --- Hero --- */
.about-hero {
  position: relative;
  aspect-ratio: 1300 / 525;
  margin-top: calc(114vw / var(--p));
}

.about-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.about-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  bottom: 0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

.about-hero-title {
  position: absolute;
  top: calc(-114vw / var(--p));
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  text-align: center;


  img {
    width: 100%;
    height: auto;
    display: block;
  }
}

.about-hero-title img {
  /* filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.35)); */
}


/* --- About Nav --- */
.about-nav {
  margin-top: 150px;
}

.about-nav-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--pc-gutter);
}

.about-nav-list {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 43.5px;
}

.about-nav-item {
  display: flex;
  align-items: center;
  gap: 43.5px;

  &::after {
    content: '';
    display: block;
    width: 2px;
    height: 25.54px;
    background-color: black;
  }

  & a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-en);
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    transition: opacity 0.3s;

    em {
      text-decoration: underline;
      font-weight: 700;
      font-style: normal;
    }

    &:hover {
      opacity: 0.5;
    }
  }

  &.is-active a {
    opacity: 0.28;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    background-color: #f9f9f9;

    em {
      text-decoration: none;
    }
  }
}

.about-nav-num {
  position: relative;
  top: -5px;
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
  flex-shrink: 0;
  font-family: var(--font-en);
}

/* --- Products (Common) --- */
.about-products {
  padding: 150px 0 0;
  background-color: #fff;
}

.about-products-inner {
  margin: 0 auto;
}

.about-products-title {
  max-width: calc(1170px + var(--pc-gutter) * 2);
  padding: 0 var(--pc-gutter);
  margin: 0 auto 52px;
  font-family: var(--font-en);
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}

@keyframes products-scroll {
  from {
    transform: translateX(0);
  }

  to {
    /* (アイテム幅 + margin-right) × 元アイテム数 = 1セット分の幅 */
    transform: translateX(calc((335px + 20px) * -4));
  }
}

.about-products-marquee {
  overflow: hidden;
}

.about-products-track {
  display: flex;
  padding-left: 28px;
  width: max-content;
  animation: products-scroll 16s linear infinite;
  will-change: transform;
}

.about-product-item {
  width: 335px;
  flex-shrink: 0;
  margin-right: 20px;
}

.about-product-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  padding-top: 7px;
}

.about-product-name {
  font-family: var(--font-en);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #000;
  position: absolute;
  top: 0;
  left: -10px;
  writing-mode: vertical-rl;
  z-index: 1;
}

.about-product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f0f0f0;
}

.about-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

a.about-product-item:hover .about-product-image img {
  transform: scale(1.04);
}

.about-product-link {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
  display: flex;
  align-items: center;
  gap: 5px;

  &::after {
    content: '';
    display: block;
    width: 16px;
    height: 12px;
    background: url('../img/top/arrow-right.svg') center center / contain no-repeat;
  }

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: #000;
  }
}

.about-product-description {
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 1.9;
  color: #666;
}

@media screen and (max-width: 1170px) {
  .about-nav {
    margin-top: calc(150vw / var(--p));
  }

  .about-nav-list {
    gap: calc(43.5vw / var(--p));
  }

  .about-nav-item {
    gap: calc(43.5vw / var(--p));

    &::after {
      width: calc(2vw / var(--p));
      height: calc(25.54vw / var(--p));
    }

    & a {
      font-size: calc(25vw / var(--p));
      gap: calc(5vw / var(--p));
    }
  }

  .about-nav-num {
    top: calc(-5vw / var(--p));
    font-size: calc(10vw / var(--p));
  }

  .about-products {
    padding: calc(150vw / var(--p)) 0 0;
  }

  .about-products-title {
    margin: 0 auto calc(52vw / var(--p));
    font-size: calc(40vw / var(--p));
  }

  @keyframes products-scroll {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc((calc(335vw / var(--p)) + calc(20vw / var(--p))) * -4));
    }
  }

  .about-product-item {
    width: calc(335vw / var(--p));
    margin-right: calc(20vw / var(--p));
    gap: calc(16vw / var(--p));
    padding-top: calc(7vw / var(--p));
  }

  .about-product-name {
    font-size: calc(30vw / var(--p));
    left: calc(-10vw / var(--p));
  }

  .about-product-link {
    bottom: calc(14vw / var(--p));
    right: calc(14vw / var(--p));
    font-size: calc(13vw / var(--p));
    gap: calc(5vw / var(--p));

    &::after {
      width: calc(16vw / var(--p));
      height: calc(12vw / var(--p));
    }

    &::before {
      height: calc(1.5vw / var(--p));
    }
  }

  .about-product-description {
    font-size: calc(12vw / var(--p));
  }
}

@media screen and (max-width: 768px) {
  .about-hero {
    aspect-ratio: 400 / 538;
    margin-top: calc(80vw / var(--s));
  }

  .about-hero-title {
    top: calc(-60vw / var(--s));
  }

  .about-nav {
    margin-top: calc(83.3vw / var(--s));
  }

  .about-nav-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: calc(20vw / var(--s)) calc(15vw / var(--s));
    max-width: calc(300vw / var(--s));
    margin: 0 auto;
  }

  .about-nav-item {
    & a {
      font-size: calc(15 vw / var(--s));
    }

    &::after {
      display: none;
    }
  }

  @keyframes products-scroll {
    from {
      transform: translateX(0);
    }

    to {
      /* (アイテム幅 + margin-right) × 元アイテム数 = 1セット分の幅 */
      transform: translateX(calc((225.99vw / var(--s) + 29.3vw / var(--s)) * -4));
    }
  }

  .about-product-item {
    width: calc(225.99vw / var(--s));
    margin-right: calc(29.3vw / var(--s));
    padding-top: calc(12.8vw / var(--s));
  }

  .about-product-name {
    font-size: calc(21vw / var(--s));
    left: calc(-12.2vw / var(--s));
    /* top: calc(-12.8vw / var(--s)); */
  }
}