@charset "UTF-8";

/* =====================
  anchor-image
===================== */
.anchor-image {
  display: block grid;
  grid-template-columns: 530px auto auto;
  gap: 60px;
  padding-block: 160px;
  padding-inline: 80px;

  @media (width <=768px) {
    display: block flex;
    flex-direction: column;
    gap: 0;
    padding-block: 0 var(--nudge-7);
    padding-inline: var(--nudge-2);
  }

  @media (any-hover: hover) {
    &:hover {
      img {
        filter: brightness(0.7);
      }
    }
  }

  li {
    position: relative;
    display: block grid;
    gap: 10px;
    align-content: start;

    @media (width <=768px) {
      gap: var(--nudge-2);
      padding-block: var(--nudge-6);
      border-block-end: 1px solid var(--gray_border);
    }

    @media (any-hover: hover) {
      &:hover {
        .arrow {
          background-color: var(--gold);

          &::before {
            background-color: white;
            translate: 15% 0;
          }
        }

        img {
          filter: brightness(1);
        }
      }
    }

    >a {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    img {
      object-fit: cover;
      transition: filter 250ms ease 0s;

      @media (width <=768px) {
        inline-size: 100%;
        block-size: calc((100 / 390) * 160 * 1vw);
      }
    }
  }

  li[data-id='message'] {
    grid-row: 1 / 2;
    grid-column: 1 / 2;

    @media (width > 768px) {
      .text {
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        padding-block: 20px 17px;
        text-align: center;
        background: rgb(255 255 255 / 10%);

        hgroup {
          margin-inline: auto;

          [lang='en'] {
            margin-inline: auto;
            text-align: center;
          }
        }

        .arrow {
          margin-inline: auto;

          @media (width > 768px) {
            translate: 0 -3px;
          }
        }
      }
    }
  }

  li[data-id='philosophy'] {
    grid-row: 1 / 2;
    grid-column: 2 / 3;

    img {
      object-position: 86% 0;
    }

    @media (width > 768px) {
      img {
        block-size: 250px;
      }
    }
  }

  li[data-id='overview'] {
    grid-row: 1 / 2;
    grid-column: 3 / 3;

    @media (width > 768px) {
      img {
        block-size: 250px;
      }
    }
  }

  li[data-id='history'] {
    grid-row: 2 / 3;
    grid-column: 1 / 2;

    @media (width > 768px) {
      img {
        block-size: 220px;
      }

      .arrow {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
      }
    }
  }

  li[data-id='access'] {
    grid-row: 2 / 3;
    grid-column: 2 / 4;

    @media (width > 768px) {
      img {
        block-size: 220px;
      }

      .arrow {
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
      }
    }
  }

  hgroup {
    display: block grid;
    gap: 4px;
    inline-size: fit-content;

    @media (width <=768px) {
      gap: 0;
    }

    h2 {
      font-size: 24px;
      font-weight: 600;

      @media (width <=768px) {
        font-size: calc((100 / 390) * 20 * 1vw);
      }
    }

    [lang='en'] {
      inline-size: fit-content;
      margin-block-end: -4px;
      font-size: 16px;
      font-weight: 400;
      background: var(--gradation2);
      background-clip: text;
      -webkit-text-fill-color: transparent;

      @media (width <=768px) {
        margin-block-end: calc((100 / 390) * -4 * 1vw);
        font-size: calc((100 / 390) * 15 * 1vw);
      }
    }
  }

  .text {
    position: relative;
    display: block grid;
    gap: 22px;
    align-self: flex-start;
    margin-block-start: 10px;

    @media (width <=768px) {
      gap: var(--nudge-2);
      margin-block-start: 0;
    }
  }

  p {
    margin-block-start: 3px;
    font-size: 15px;
    font-weight: 500;

    @media (width <=768px) {
      margin-block-start: 0;
      font-size: calc((100 / 390) * 15 * 1vw);
    }
  }

  .arrow {
    z-index: 2;
    display: block grid;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 50px;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    border: 1px solid var(--gold);
    border-radius: 50%;
    transition: background 250ms ease 0s;

    @media (width <=768px) {
      position: absolute;
      inset-block-start: calc((100 / 390) * 13 * 1vw);
      inset-inline-end: 4vw;
      inline-size: calc((100 / 390) * 30 * 1vw);
    }

    &::before {
      inline-size: 18px;
      aspect-ratio: 18 / 12;
      content: '';
      background-color: var(--gold);
      mask-image: var(--icon-arrow);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      transition:
        background 250ms ease 0s,
        translate 250ms ease 0s;

      @media (width <=768px) {
        inline-size: calc((100 / 390) * 10 * 1vw);
      }
    }
  }
}

/* =====================
  anchor-list
===================== */
.anchor-list {
  display: block grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 20px;
  padding-block: 0 160px;
  padding-inline: 80px;

  @media (width <=768px) {
    display: block flex;
    flex-direction: column;
    gap: var(--nudge-2);
    padding-block: 0 var(--nudge-6);
    padding-inline: calc((100 / 390) * 16 * 1vw);
  }

  li {
    position: relative;
    display: block grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 42px;
    align-items: center;
    inline-size: 100%;
    padding-block: 30px 48px;
    padding-inline: 30px;
    background: var(--bg, #f2f2f2);
    border: 1px solid var(--gray_text, #898989);

    @media (width <=768px) {
      gap: var(--nudge-2);
      padding-block: var(--nudge-3);
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }

    a {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    hgroup {
      display: block grid;
      gap: 9px;

      @media (width <=768px) {
        gap: 0;
      }

      h2 {
        font-size: 24px;
        font-weight: 600;
        line-height: 1.5;

        @media (width <=768px) {
          font-size: calc((100 / 390) * 20 * 1vw);

          br {
            display: none;
          }
        }
      }

      [lang='en'] {
        inline-size: fit-content;
        font-size: 16px;
        font-weight: 400;
        background: var(--gradation2);
        background-clip: text;
        -webkit-text-fill-color: transparent;

        @media (width <=768px) {
          margin-block-end: calc((100 / 390) * -4 * 1vw);
          font-size: calc((100 / 390) * 15 * 1vw);
        }
      }
    }

    p {
      font-size: 14px;
      line-height: 1.9;

      @media (width <=768px) {
        font-size: calc((100 / 390) * 14 * 1vw);
      }
    }

    .arrow {
      position: absolute;
      inset-block: auto;
      inset-inline-end: 29px;
      z-index: 2;
      display: block grid;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      inline-size: 50px;
      aspect-ratio: 1 / 1;
      pointer-events: none;
      border: 1px solid var(--gold);
      border-radius: 50%;
      transition: background 250ms ease 0s;

      @media (width <=768px) {
        inset-inline-end: calc((100 / 390) * 12 * 1vw);
        inline-size: calc((100 / 390) * 30 * 1vw);
      }

      &::before {
        inline-size: 18px;
        aspect-ratio: 18 / 12;
        content: '';
        background-color: var(--gold);
        mask-image: var(--icon-arrow);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        transition:
          background 250ms ease 0s,
          translate 250ms ease 0s;

        @media (width <=768px) {
          @media (width <=768px) {
            inline-size: calc((100 / 390) * 10 * 1vw);
          }
        }
      }
    }

    @media (any-hover: hover) {
      &:hover {
        .arrow {
          background-color: var(--gold);

          &::before {
            background-color: white;
            translate: 15% 0;
          }
        }
      }
    }
  }
}