@charset "UTF-8";

/* =====================
  common
===================== */
.main article {
  position: relative;
  z-index: 2;

  .u-inner {
    position: relative;
    z-index: 2;
    isolation: isolate;
  }
}

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

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

  /* ==== .u-inner ==== */
  .u-inner {
    position: relative;
  }

  /* ==== text ==== */
  .text {
    position: relative;
    margin-inline-end: 145px;

    @media (width <= 768px) {
      z-index: 2;
      margin-inline: 4vw auto;
    }

    p[lang='en'] {
      display: block grid;
      inline-size: fit-content;
      margin-inline: auto 0;
      font-size: 90px;
      font-weight: 400;
      line-height: 1;

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

    p.catch {
      position: absolute;
      inset-block-start: 106px;
      inset-inline-end: -25px;
      z-index: 2;
      font-size: 27px;
      font-weight: 500;

      @media (width <= 768px) {
        inset-block-start: 107px;
        inset-inline-end: 0.1vw;
        z-index: 2;
        font-size: calc((100 / 390) * 22 * 1vw);
      }
    }
  }

  /* ==== picture ==== */
  .picture {
    position: absolute;
    inset-block-start: 410px;
    inset-inline-start: auto;

    @media (width <= 768px) {
      inset-block-start: 22vw;
      inline-size: calc((100 / 390) * 178 * 1vw);
      block-size: calc((100 / 390) * 168 * 1vw);
    }
  }

  /* ==== body ==== */
  .body {
    max-inline-size: 605px;
    margin-block-start: 78.5px;
    margin-inline: auto 81px;

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

/* =====================
  greeting
===================== */
.greeting {
  padding-block: 73px 168px;

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    gap: 50px 103px;

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

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

  /* ==== picture ==== */
  .picture {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    margin-block-end: 2px;

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

  /* ==== catch ==== */
  .catch {
    grid-row: 3 / 5;
    grid-column: 1 / 2;
    font-size: 40px;

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

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

  /* ==== body ==== */
  .body {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    margin-block-start: 9px;

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

  /* ==== author ==== */
  .author {
    display: block flex;
    grid-row: 4 / 5;
    grid-column: 2 / 3;
    gap: 25px;
    align-items: center;
    margin-block-start: -23px;

    @media (width <= 768px) {
      gap: 4.2vw;
      margin-block-start: -6vw;
      margin-inline: auto 0;
      font-size: calc((100 / 390) * 14 * 1vw);
    }

    dd {
      font-size: 22px;
      font-weight: 500;
      translate: 0 -2px;

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

/* =====================
  outline
===================== */
.outline {
  padding-block: 0 99px;
  overflow: clip;

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 50px;
    padding-block-start: 9px;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 9.4vw;
      padding-block-start: 2.7vw;
    }
  }

  /* ==== u-table ==== */
  .u-table {
    .column {
      @media (width > 768px) {
        flex-direction: row;
      }
    }
  }
}

/* =====================
  access
===================== */
.access {
  position: relative;
  z-index: 2;
  padding-block: 80px 180px;
  overflow: clip;

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

  /* ==== .u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    grid-template-columns: 1fr 773px;
    gap: 0 50px;
    padding-block-start: 9px;

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

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    margin-block-end: 48px;

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

  /* ==== iframe ==== */
  iframe {
    grid-row: 2 / 4;
    grid-column: 2 / 3;
    inline-size: 100%;
    block-size: 351px;

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

  /* ==== iframe ==== */
  address {
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    gap: 16px;
    block-size: fit-content;
    margin-block-start: 72px;

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

    > span {
      display: grid;
      gap: 0;
      align-items: flex-start;
    }

    .tel-fax {
      display: block flex;
      gap: 3px;

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

        a[href^='tel:'] {
          text-decoration: underline;
        }
      }
    }
  }

  /* ==== u-anchor ==== */
  .u-anchor {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    align-self: flex-start;
    margin-block-start: -9px;

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