@charset "UTF-8";

/* =====================
  message
===================== */
.message {
  padding-block: 116px 97px;
  background-image: url('../img/company/message/bg.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  @media only screen and (width <= 768px) {
    padding-block: 20.7vw 13.3vw;
    background-image: url('../img/company/message/bg_sp.webp');
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 728px 440px;
    gap: 47px 57px;
    padding-inline: 15px;

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

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

    @media only screen and (width <= 768px) {
      margin-inline-start: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== body ==== */
  .body {
    grid-area: 2 / 1 / 4 / 2;
    padding-inline-start: 26px;
    font-size: 18px;
    line-height: 2;
    color: var(--black);

    @media only screen and (width <= 768px) {
      padding-inline-start: unset;
      font-size: calc((100 / 390) * 15 * 1vw);
      line-height: 1.8;
    }
  }

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

    @media only screen and (width <= 768px) {
      inline-size: calc((100 / 390) * 326 * 1vw);
      margin-block-start: 0;
      margin-inline: auto;
    }
  }

  /* ==== author ==== */
  .author {
    display: block flex;
    grid-area: 3 / 2 / 4 / 3;
    gap: 42px;
    align-items: baseline;
    justify-content: center;
    margin-block-start: -40px;

    @media only screen and (width <= 768px) {
      gap: 4vw;
      margin-block-start: calc((100 / 390) * 5 * -1 * 1vw);
    }

    & dt {
      font-size: 18px;
      font-weight: 400;

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

    & dd {
      font-family: 'Zen Old Mincho', serif;
      font-size: 36px;
      font-weight: 700;

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

/* =====================
  outline
===================== */
.outline {
  padding-block: 97px 96px;
  background: var(--back);

  @media only screen and (width <= 768px) {
    padding-block: 16.2vw;
    padding-inline: calc((100 / 390) * 16 * 1vw);
  }

  /* ==== u-inner ==== */
  .u-inner {
    max-inline-size: 1120px;
    padding-block: 74px 80px;
    padding-inline: 140px;
    background: var(--white);
    border-radius: 20px;

    @media only screen and (width <= 768px) {
      max-inline-size: unset;
      padding-block: 12.4vw;
      padding-inline: calc((100 / 390) * 16 * 1vw);
      border-radius: calc((100 / 390) * 20 * 1vw);
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    margin-inline: auto;

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

  /* ==== u-table ==== */
  .u-table {
    margin-block-start: 81px;

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

/* =====================
  access
===================== */
.access {
  padding-block: 91px 96px;

  @media only screen and (width <= 768px) {
    padding-block: 16.4vw 16.5vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: auto 820px;
    gap: 51px 0;
    padding-inline-end: 40px;

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: calc((100 / 390) * 24 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-area: 1 / 1 / 2 / 2;
    align-self: flex-start;

    @media (width > 768px) {
      margin-inline-start: 16px;
    }

    @media only screen and (width <= 768px) {
      margin-inline-start: calc((100 / 390) * 16 * 1vw);
    }
  }

  /* ==== address ==== */
  .address {
    display: block grid;
    grid-area: 2 / 1 / 3 / 2;
    margin-inline-start: 40px;
    font-size: 18px;
    color: var(--black);

    @media (width > 768px) {
      align-self: flex-end;
      margin-block-start: 95px;
    }

    @media only screen and (width <= 768px) {
      display: block flex;
      flex-direction: column;
      margin-inline-start: calc((100 / 390) * 0 * 1vw);
      font-size: calc((100 / 390) * 15 * 1vw);
    }
  }

  /* ==== u-anchor ==== */
  .u-anchor {
    grid-area: 3 / 1 / 4 / 2;

    @media (width > 768px) {
      padding-block: 15px;
      padding-inline: 31px 20px;
      margin-block-start: -2px;
      margin-inline-start: 40px;
    }
  }

  /* ==== iframe ==== */
  & iframe {
    grid-area: 1 / 2 / 4 / 3;
    inline-size: 100%;
    block-size: 400px;
    margin-block-start: 6px;

    @media only screen and (width <= 768px) {
      block-size: calc((100 / 390) * 200 * 1vw);
      margin-block-start: calc((100 / 390) * 8 * 1vw);
    }
  }
}