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

  /* =====================
    message
  ===================== */
  .message {
    position: relative;
    padding-block-start: 120px;
    padding-block-end: 114px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/company/message_bg.png');

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

    .u-inner {
      padding-inline: 0 225px;

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

      .wrap {
        display: block grid;
        grid-template-columns: max-content auto;
        gap: 24px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          gap: calc((100 / 390) * 32 * 1vw);
        }

        .u-h2-title {
          margin-block-start: 12px;

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

        .unit {
          display: block grid;
          justify-items: center;

          .message_img {
            display: block flow;

            @media (width <= 768px) {
              margin-inline: auto;
              inline-size: 100%;
              margin-inline-end: 0;
            }
          }

          .description {
            margin-block-start: 40px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 32 * 1vw);
            }
          }
          .name-set {
            margin-block-start: 14px;
            display: block flex;
            align-items: baseline;
            justify-content: flex-end;
            gap: 32px;

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

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

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 20 * 1vw);
              }
            }
          }
        }
      }
    }
  }
  /* =====================
    Outline
  ===================== */
  .outline {
    padding-block-start: 120px;
    padding-block-end: 120px;

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

    .u-inner {
      padding-inline: 40px;

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

      .outline_wrap {
        padding-block-start: 92px;
        padding-block-end: 80px;

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

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

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

  /* =====================
    History
  ===================== */
  .history {
    padding-block-start: 120px;
    padding-block-end: 120px;

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

    .u-inner {
      padding-inline: 40px;

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

      .history_wrap {
        background-color: #fff;
        padding-block-start: 92px;
        padding-block-end: 80px;

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

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

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

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

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

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

      .address {
        padding-inline: 48px;
        display: block flex;
        align-items: center;
        justify-content: space-between;
        margin-block-start: 41px;

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

        @media (width <= 768px) {
          .u-anchor {
            margin-inline: auto;
          }
        }
      }
    }
  }
}