@charset "UTF-8";

/* =====================
  message
===================== */
section[data-type='message'] {
  padding-block: 124px 132px;

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 36 * 1vw) calc((100 / 750) * 134 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 22 * 1vw);
  }

  .u-inner {
    display: grid;
    gap: 52px;

    @media not all and (width >=768px) {
      gap: 0;
    }
  }

  & h3 {
    margin-block: calc((1em - 1lh) / 2);
    font-size: 30px;
    font-weight: 700;

    @media not all and (width >=768px) {
      margin-block-end: calc((100 / 750) * 38 * 1vw);
      font-size: calc((100 / 750) * 40 * 1vw);
    }
  }

  & p {
    margin-block: calc((1em - 1lh) / 2);

    @media not all and (width >=768px) {
      padding-inline-end: 4vw;
      font-size: calc((100 / 750) * 26 * 1vw);
      line-height: 1.78;
    }
  }

  & dl {
    display: grid;
    gap: 14px;
    margin-block: 4px calc((1em - 1lh) / 2);
    margin-inline: auto 0;

    @media not all and (width >=768px) {
      gap: 2.1vw;
      padding-inline-end: 2.7vw;
      margin-block: 7.3vw calc((1em - 1lh) / 2);
      font-size: calc((100 / 750) * 24 * 1vw);
    }

    & dt {
      margin-block: calc((1em - 1lh) / 2);
    }

    & dd {
      display: grid;
      grid-auto-flow: column;
      gap: 24px;
      align-items: center;
      justify-content: flex-end;
      line-height: 1;

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 38 * 1vw);
      }

      .author {
        font-family: var(--author);
        font-size: 32px;
        letter-spacing: 0.1px;
        translate: -1.5px -3px;

        @media not all and (width >=768px) {
          font-size: calc((100 / 750) * 50 * 1vw);
          letter-spacing: unset;
          translate: unset;
        }
      }
    }
  }
}

/* =====================
  profile
===================== */
section[data-type='profile'] {
  padding-block: 124px 132px;
  background-color: var(--water);

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 118 * 1vw) calc((100 / 750) * 134 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
  }

  .u-table {
    margin-block-start: 50px;

    @media not all and (width >=768px) {
      margin-block-start: 6.4vw;
    }
  }
}

/* =====================
  access
===================== */
section[data-type='access'] {
  padding-block: 124px 132px;

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 118 * 1vw) calc((100 / 750) * 208 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
  }

  .u-inner {
    display: grid;
    grid-template: auto auto 1fr / auto 1fr;
    grid-template-areas:
      'hgroup hgroup'
      'iframe iframe'
      'address a';
    padding-block-end: 52px;

    @media not all and (width >=768px) {
      grid-template: auto auto auto 1fr / auto;
      grid-template-areas:
        'hgroup'
        'iframe'
        'address'
        'a';
      padding-block-end: 0;
    }

    & hgroup {
      grid-area: hgroup;
      margin-block-end: 52px;

      @media not all and (width >=768px) {
        margin-block-end: 6.4vw;
      }
    }

    & iframe {
      grid-area: iframe;
      inline-size: 100%;
      block-size: 600px;
      margin-block-end: 24px;

      @media not all and (width >=768px) {
        block-size: calc((100 / 750) * 600 * 1vw);
        margin-block-end: 24px;
      }
    }

    & address {
      grid-area: address;
      line-height: 2.12;

      @media not all and (width >=768px) {
        margin-block-end: 6.4vw;
        font-size: calc((100 / 750) * 26 * 1vw);
        line-height: 1.76;
      }
    }

    & a {
      grid-area: a;
      inline-size: 294px;
      margin-block-start: 10px;
      margin-inline: auto 0;

      @media not all and (width >=768px) {
        inline-size: calc((100 / 750) * 433 * 1vw);
        margin-block-start: 0;
        margin-inline: auto;
      }
    }
  }
}