@charset "UTF-8";
.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    &::after {
      background-image: url('../img/company/mv.png');
    }
  }

  /* =====================
    greeting
  ===================== */
  .greeting {
    position: relative;
    padding-block-start: 126px;
    padding-block-end: 120px;

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

    .inner {
      inline-size: 1440px;
      margin-inline: auto;
      padding-inline: 120px 0;

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

      .wrap {
        position: relative;
        display: block grid;
        grid-template-columns: 588px auto;
        grid-template-rows: repeat(3, max-content);
        align-items: start;
        column-gap: 112px;

        @media only screen and (width <= 768px) {
          grid-template-columns: auto;
          grid-template-rows: repeat(4, max-content);
          column-gap: 0;
        }

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

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

        .unit {
          grid-area: 2/1/3/2;
          margin-block-start: 8px;

          @media only screen and (width <= 768px) {
            grid-area: 3/1/4/2;
            margin-block-start: calc((100 / 390) * 16 * 1vw);
          }
          .description {
            margin-block-start: 30px;

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

        .name-set {
          grid-area: 3/1/4/2;
          display: block flex;
          align-items: baseline;
          justify-content: flex-end;
          gap: 32px;
          margin-block-start: 16px;

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

          & dd {
            font-family: var(--name);
            font-size: 32px;
            font-weight: bold;
            line-height: 1.5;

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

        .img {
          grid-area: 1/2/4/3;
          display: block flow;
          margin-block-start: 14px;

          @media only screen and (width <= 768px) {
            grid-area: 1/1/2/2;
            inline-size: calc((100 / 390) * 300 * 1vw);
            margin-inline: auto calc((100 / 390) * -16 * 1vw);
          }
        }

        &::before {
          content: '';
          position: absolute;
          bottom: -120px;
          right: 445px;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/company/message_2.png');
          inline-size: 239px;
          block-size: 337px;
        }

        @media only screen and (width <= 768px) {
          &::before {
            bottom: calc((100 / 390) * -144 * 1vw);
            right: unset;
            inline-size: calc((100 / 390) * 140 * 1vw);
            block-size: auto;
            aspect-ratio: 239/337;
          }
        }
      }
    }
  }
  /* =====================
    Outline
  ===================== */
  .outline {
    padding-block-start: 112px;
    padding-block-end: 112px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/company/outline_bg.png');
    inline-size: 100%;
    min-block-size: 1205px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
      min-block-size: unset;
    }

    .u-inner {
      .wrap {
        margin-inline: 40px;
        background-color: rgba(255, 255, 255, 0.05);
        padding-inline: 80px;
        padding-block: 86px 80px;

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

        .u-table {
          --_border-color: #fff;
          color: #fff;
          margin-block-start: 61px;

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

  /* =====================
    access
  ===================== */
  .access {
    position: relative;
    padding-block-start: 126px;
    padding-block-end: 120px;
    background-color: #efefef;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
    }
    .inner {
      inline-size: 1440px;
      margin-inline: auto;

      @media only screen and (width <= 768px) {
        inline-size: 100%;
      }

      & iframe {
        inline-size: 100%;
        block-size: 400px;
        margin-block-start: 64px;

        @media only screen and (width <= 768px) {
          block-size: calc((100 / 390) * 320 * 1vw);
          margin-block-start: calc((100 / 390) * 48 * 1vw);
        }
      }
      .address {
        padding-inline: 160px;
        display: block flex;
        align-items: center;
        justify-content: space-between;
        margin-block-start: 34px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 32 * 1vw);
          margin-block-start: calc((100 / 390) * 24 * 1vw);
          flex-direction: column;
          align-items: start;
          gap: calc((100 / 390) * 24 * 1vw);
        }

        .u-anchor {
          padding-inline: 80px;

          @media only screen and (width <= 768px) {
            margin-inline: auto;
          }
        }
      }
    }
  }
}