@charset "UTF-8";

/* =====================
  introduction
===================== */
.introduction {
  padding-block: 95px 91px;

  @media (width <=768px) {
    padding-block: var(--nudge-7) var(--nudge-2);
  }

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 27px;

    @media (width <=768px) {
      gap: var(--nudge-4);
    }

    @media (width > 768px) {
      padding-inline: 80px;
    }

    .catch {
      font-size: 34px;
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: 1.7px;

      @media (width <=768px) {
        font-size: var(--nudge-3);
        letter-spacing: calc((100 / 390) * 1.7 * 1vw);
      }
    }

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

/* =====================
  local-nav
===================== */
.local-nav {
  margin-block-start: 0;

  @media (width <=768px) {
    inset-block-start: 26vw;
    inline-size: 95%;
    padding-block-end: calc((100 / 390) * 8 * 1vw);
    margin-inline: auto;
    overflow-x: scroll;
    border: 1px solid var(--bg-key-green);
    border-radius: 5px;
  }

  .u-inner {
    display: block flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
    font-weight: 400;

    @media (width > 768px) {
      padding-inline: 80px;
    }

    @media (width <=768px) {
      display: block grid;
      grid-template-columns: repeat(2, 1fr);
      gap: calc((100 / 390) * 10 * 1vw);
      block-size: 42vw;
      padding-block: calc((100 / 390) * 8 * 1vw);
      padding-inline: calc((100 / 390) * 8 * 1vw);
      overflow-y: scroll;
      font-size: calc((100 / 390) * 13 * 1vw);
    }

    button {
      display: block flex;
      gap: 10px;
      padding-block: 10px;
      padding-inline: 14px;
      text-decoration: underline;
      background: var(--bg-light-green);
      border-radius: 10px;
      transition:
        background 250ms ease 0s,
        color 250ms ease 0s;

      @media (width <=768px) {
        flex-shrink: 0;
        gap: 3vw;
        justify-content: space-between;
        padding-block: 1.5vw;
        padding-inline: 2.5vw;
        border-radius: calc((100 / 390) * 5 * 1vw);
      }

      &::after {
        inline-size: 17px;
        aspect-ratio: 17 / 11;
        content: '';
        background-color: var(--primary);
        mask-image: var(--icon-more);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        transition: background 250ms ease 0s;

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

      @media (any-hover: hover) {
        &:hover {
          background: var(--bg-key-green);
        }
      }
    }
  }
}

/* =====================
  article
===================== */
.article {
  padding-block: 128px;

  @media (width <=768px) {
    padding-block: 0 var(--nudge-7);
    overflow: clip;
  }

  .u-inner {
    display: block grid;
    gap: 58px;

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

    @media (width > 768px) {
      padding-inline: 80px;
    }
  }

  section {
    position: relative;
    display: block grid;
    grid-template-columns: 385px 1fr;
    gap: 0 50px;
    align-items: center;
    inline-size: 100%;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: 0;
    }

    &::before {
      position: absolute;
      inset-block: 53%;
      inset-inline-start: 0;
      inline-size: fit-content;
      block-size: fit-content;
      margin-block: calc((1em - 1lh) / 2);
      font-family: var(--title);
      font-size: 32px;
      font-weight: 300;
      line-height: 1;
      color: #bddebb;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
      content: attr(data-text);
      rotate: 0 0 1 -90deg;
      translate: -42.9% 50%;

      @media (width <=768px) {
        inset-block: 34vw;
        font-size: calc((100 / 390) * 20 * 1vw);
        translate: -39.5% 50%;
      }
    }

    .u-head {
      grid-row: 1 / 2;
      grid-column: 1 / 3;
      font-size: 24px;

      @media (width > 768px) {
        padding-block-start: 12px;
      }

      @media (width <=768px) {
        inline-size: 100%;
        font-size: 4.9vw;
      }
    }

    img {
      grid-row: 2 / 4;
      grid-column: 1 / 2;
      margin-block-start: 29px;
      margin-inline-start: 40px;

      @media (width <=768px) {
        inline-size: 100%;
        block-size: calc((100 / 390) * 202 * 1vw);
        margin-block-start: calc((100 / 390) * 14 * 1vw);
        margin-inline-start: calc((100 / 390) * 53 * 1vw);
        object-fit: cover;
      }
    }

    ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-row: 2 / 4;
      grid-column: 2 / 3;
      gap: 17px;
      margin-block-start: 43px;
      margin-inline-start: 40px;

      @media (width <=768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 1vw;
        inline-size: 100%;
        margin-block-start: var(--nudge-2);
        margin-inline-start: calc((100 / 390) * 59 * 1vw);
      }

      li {
        position: relative;
        padding-inline-start: 20px;
        font-size: 15px;

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

        &::before {
          position: absolute;
          inset-block-start: 50%;
          inset-inline-start: 0;
          inline-size: 12px;
          aspect-ratio: 12 / 2;
          content: '';
          background: var(--primary);
          translate: 0 -50%;

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

    small {
      display: block flex;
      grid-row: 4 / 5;
      grid-column: 2 / 3;
      justify-content: end;
      margin-inline-start: 40px;
      font-size: 15px;
      font-weight: 400;

      @media (width <=768px) {
        display: block flow;
        inline-size: 100%;
        margin-block-start: var(--nudge-2);
        margin-inline: auto 0;
        margin-inline-start: 0;
        font-size: calc((100 / 390) * 12 * 1vw);
        text-align: right;
      }
    }
  }
}