@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/company/mv.png');

    @media (width <= 768px) {
      background-image: url('../img/company/mv_2x.png');
    }
  }
  /* =====================
    company
  ===================== */
  .message {
    padding-block-start: 91px;
    padding-block-end: 120px;

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

    .content-catch {
      margin-block-start: 53px;

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

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

      .description + .description {
        margin-block-start: 2em;
      }

      .name-set {
        inline-size: fit-content;
        margin-inline: auto 11px;
        margin-block-start: 48px;
        & > dt {
          font-family: var(--yumin);
          font-weight: 600;
        }
        .name {
          display: block flex;
          align-items: center;
          gap: 16px;
          margin-block-start: 8px;
          & > dt {
            font-family: var(--yumin);
            font-weight: 600;
          }
          & > dd {
            font-family: var(--yuji);
            font-size: 22px;
            font-weight: 400;
          }
        }

        @media (width <= 768px) {
          margin-inline: auto calc((100 / 390) * 6 * 1vw);
          margin-block-start: calc((100 / 390) * 35 * 1vw);
          .name {
            gap: calc((100 / 390) * 16 * 1vw);
            margin-block-start: calc((100 / 390) * 4 * 1vw);
            & > dd {
              font-size: calc((100 / 390) * 20 * 1vw);
            }
          }
        }
      }
    }
  }

  /* =====================
    profile
  ===================== */
  .profile {
    padding-block-start: 91px;
    padding-block-end: 128px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 62 * 1vw);
      padding-block-end: calc((100 / 390) * 80 * 1vw);
    }
    .u-table {
      margin-block-start: 64px;

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

  /* =====================
    access
  ===================== */
  .access {
    padding-block-start: 91px;
    padding-block-end: 128px;

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

    .access-list {
      display: block grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 64px;
      margin-block-start: 61px;

      @media only screen and (width <= 768px) {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: calc((100 / 390) * 50 * 1vw);
        margin-block-start: calc((100 / 390) * 42 * 1vw);
      }
      & > li {
        & > iframe {
          inline-size: 608px;
          block-size: 400px;

          @media only screen and (width <= 768px) {
            inline-size: calc((100 / 390) * 358 * 1vw);
            block-size: calc((100 / 390) * 240 * 1vw);
          }
        }
        .title {
          position: relative;
          font-weight: 500;
          margin-block-start: 24px;
          display: block flex;
          align-items: center;
          gap: 16px;
          padding-inline: 8px;

          &::before {
            content: '';
            display: block flow;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../img/_common/icon_pin.svg');
            inline-size: 11px;
            block-size: 21px;
          }

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

            &::before {
              inline-size: calc((100 / 390) * 10 * 1vw);
              block-size: calc((100 / 390) * 20 * 1vw);
            }
          }
        }

        .address {
          margin-block-start: 14px;
          display: block flex;
          align-items: center;
          justify-content: space-between;

          @media only screen and (width <= 768px) {
            margin-block-start: calc((100 / 390) * 12 * 1vw);
            flex-direction: column;
            align-items: flex-start;
            gap: calc((100 / 390) * 16 * 1vw);
          }

          .map-link {
            display: block flex;
            align-items: center;
            gap: 18px;
            padding-inline: 10px;
            border-bottom: dashed 2px #d91a1a;
            padding-block-end: 12px;
            &::after {
              content: '';
              display: block flow;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              background-image: url('../img/_common/icon_link.svg');
              inline-size: 16px;
              block-size: 16px;
            }

            @media only screen and (width <= 768px) {
              gap: calc((100 / 390) * 14 * 1vw);
              padding-inline: calc((100 / 390) * 8 * 1vw);
              padding-block-end: calc((100 / 390) * 12 * 1vw);
              &::after {
                inline-size: calc((100 / 390) * 13 * 1vw);
                block-size: calc((100 / 390) * 13 * 1vw);
              }
            }
          }
        }
      }
    }
  }
}