@charset "UTF-8";

/* =====================
  common
===================== */
.main article .u-inner {
  display: block grid;

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

/* =====================
  greeting
===================== */
.greeting {
  padding-block: 80px 100px;

  @media (width <= 768px) {
    padding-block: 12.6vw 13.9vw;
  }

  /* ==== .u-inner ==== */
  .u-inner {
    grid-template-columns: 410px 1fr;
    gap: 28px 120px;
    align-items: flex-start;

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

    /* ==== u-head ==== */
    .u-head {
      grid-area: 1 / 1 / 2 / 2;
      padding-block: 24px 0;

      @media (width <= 768px) {
        padding-block: 0;
      }
    }

    /* ==== catch ==== */
    .catch {
      grid-area: 1 / 2 / 2 / 3;
      font-size: 32px;
      font-weight: 500;
      line-height: 2;
      color: transparent;
      background: linear-gradient(99deg, #274827 15.76%, #aad59a 97.34%);
      background-clip: text;
      -webkit-text-fill-color: transparent;

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

    /* ==== picture ==== */
    .picture {
      grid-area: 2 / 1 / 5 / 2;
      margin-block-start: 38px;

      @media (width <= 768px) {
        margin-block-start: 10.6vw;
      }
    }

    /* ==== body ==== */
    .body {
      grid-area: 2 / 2 / 3 / 3;
      line-height: 2;

      @media (width <= 768px) {
        margin-block-start: 4.5vw;
      }
    }

    /* ==== author ==== */
    .author {
      display: block flex;
      grid-area: 3 / 2 / 4 / 3;
      gap: 20px;
      align-items: baseline;
      font-family: 'Yuji Syuku', system-ui;
      font-weight: 400;

      @media (width <= 768px) {
        gap: calc((100 / 390) * 19.1 * 1vw);
        margin-block-start: 5.4vw;
      }

      & dd {
        font-size: 22px;

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

/* =====================
  environment
===================== */
.environment {
  position: relative;
  padding-block: 44px 161px;
  background-image: url('../img/company/bg.webp');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;

  @media (width <= 768px) {
    padding-block: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 80 * 1vw);
    background-image: url('../img/company/bg_sp.webp');
  }

  &::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline: auto;
    z-index: 1;
    inline-size: 100%;
    block-size: 250px;
    margin-inline: auto;
    content: '';
    background: linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 100%) 100%);
  }

  @media (width <= 768px) {
    &::before {
      block-size: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== .u-inner ==== */
  .u-inner {
    position: relative;
    z-index: 2;
    gap: 57px;
    padding-inline: 73px;

    @media (width <= 768px) {
      gap: 8.9vw;
      padding-inline: calc((100 / 390) * 32 * 1vw);
    }

    /* ==== introduction ==== */
    .introduction {
      inline-size: fit-content;
      margin-inline: auto;
    }

    /* ==== hgroup ==== */
    .hgroup {
      display: block flex;
      gap: 64px;
      align-items: center;
      padding-block: 40px;
      padding-inline: 80px;
      background: white;
      border-radius: 10px;

      @media (width <= 768px) {
        flex-direction: column;
        gap: 3.8vw;
        padding-block: 8.3vw 5.9vw;
        padding-inline: calc((100 / 390) * 24 * 1vw);
        border-radius: calc((100 / 390) * 10 * 1vw);
      }

      /* ==== title ==== */
      .title {
        display: block flex;
        flex-shrink: 0;
        gap: 15px;
        align-items: center;
        font-size: 20px;
        font-weight: 500;
        color: var(--green);

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

        &::before {
          inline-size: 48px;
          aspect-ratio: 1 / 1;
          content: '';
          background-color: currentcolor;
          mask-image: var(--icon-earth);
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
        }

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

      /* ==== p ==== */
      & p {
        font-weight: 500;
        color: var(--gray400);

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

        & span {
          @media (width > 768px) {
            display: block flow;
          }

          line-height: 2;
        }
      }
    }

    /* ==== list ==== */
    .list {
      counter-reset: number;

      & li {
        position: relative;
        padding-block: 20px 21.6px;
        padding-inline: 55px 24px;
        line-height: 2;
        border-block-start: 1px solid var(--gray300);
        border-block-end: 1px solid transparent;

        @media (width <= 768px) {
          padding-block: 3vw 4.2vw;
          padding-inline: 11.4vw calc((100 / 390) * 16.1 * 1vw);
        }

        &:last-child {
          border-block-end-color: var(--gray300);
        }

        &::before {
          position: absolute;
          inset-block-start: 29px;
          inset-inline-start: 24px;
          margin-block: calc((1em - 1lh) / 2);
          font-family: var(--title);
          font-size: 18px;
          font-weight: 500;
          line-height: 1;
          color: var(--green);
          content: '0' counter(number);
          counter-increment: number;
        }

        @media (width <= 768px) {
          &::before {
            inset-block-start: 4.9vw;
            inset-inline-start: 4.2vw;
            font-size: calc((100 / 390) * 16 * 1vw);
          }
        }
      }
    }
  }
}

/* =====================
  outline
===================== */
.outline {
  padding-block: 64px 120px;

  @media (width <= 768px) {
    padding-block: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 52 * 1vw);
  }

  /* ==== .u-inner ==== */
  .u-inner {
    gap: 66px;

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

    /* ==== .section ==== */
    .section {
      & + .section {
        margin-block-start: 1em;
      }

      & address {
        display: block flex;
        flex-wrap: wrap;
        gap: 1em;

        @media (width <= 768px) {
          display: inline;

          & span + span {
            margin-inline-start: 0.75em;
            word-break: break-all;
          }
        }
      }

      .tel-fax {
        display: block flex;
        flex-wrap: wrap;
        gap: 1em;

        @media (width <= 768px) {
          display: inline;
        }
      }
    }
  }
}

/* =====================
  history
===================== */
.history {
  padding-block: 103px 118px;
  background: var(--lightgreen);

  @media (width <= 768px) {
    padding-block: calc((100 / 390) * 48 * 1vw) calc((100 / 390) * 96 * 1vw);
  }

  /* ==== .u-inner ==== */
  .u-inner {
    gap: 66px;

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

/* =====================
  access
===================== */
.access {
  padding-block: 104px 119px;
  background: var(--bg-grid);
  background-repeat: repeat;
  background-position: center center;
  background-size: 29px 29px;

  @media (width <= 768px) {
    padding-block: calc((100 / 390) * 49 * 1vw) calc((100 / 390) * 98 * 1vw);
    background-size: calc((100 / 390) * 29 * 1vw) calc((100 / 390) * 29 * 1vw);
  }

  /* ==== .u-inner ==== */
  .u-inner {
    grid-template-columns: 1fr auto;
    gap: 0;

    /* ==== u-head ==== */
    .u-head {
      grid-area: 1 / 1 / 2 / 3;
    }

    /* ==== address ==== */
    .address {
      grid-area: 2 / 1 / 3 / 2;
      margin-block-start: 67px;
      line-height: 2;

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

    /* ==== u-anchor ==== */
    .u-anchor {
      grid-area: 2 / 2 / 3 / 3;
      align-self: flex-start;
      margin-block-start: 65px;

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

    /* ==== iframe ==== */
    & iframe {
      grid-area: 3 / 1 / 4 / 3;
      inline-size: 100%;
      block-size: 461px;
      margin-block-start: 39px;
      border: none;

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