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

    @media only screen and (width <= 768px) {
      background-image: url('../img/company/mv_2x.png');
    }
  }

  /* =====================
    Outline
  ===================== */
  .outline {
    position: relative;
    padding-block: 130px 267px;

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

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

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

  /* =====================
    access
  ===================== */
  .access {
    position: relative;
    padding-block: 0 160px;

    @media (width <= 768px) {
      padding-block-start: 0;
      padding-block-end: calc((100 / 390) * 111 * 1vw);
    }
    .u-inner {
      .wrap {
        margin-block-start: 48px;
        display: block grid;
        grid-template-columns: repeat(2, max-content);
        align-items: start;
        gap: 20px;

        @media only screen and (width <= 768px) {
          grid-template-columns: repeat(2, auto);
          margin-block-start: calc((100 / 390) * 33 * 1vw);
          gap: calc((100 / 390) * 20 * 1vw);
        }

        & iframe {
          inline-size: 800px;
          block-size: 500px;
          border-radius: 10px;

          @media only screen and (width <= 768px) {
            grid-area: 1/1/2/3;
            inline-size: 100%;
            block-size: calc((100 / 390) * 224 * 1vw);
            border-radius: calc((100 / 390) * 10 * 1vw);
          }
        }

        .img {
          flex-shrink: 0;
          border-radius: 10px;

          @media only screen and (width <= 768px) {
            grid-area: 2/2/3/3;
            border-radius: calc((100 / 390) * 3.2 * 1vw);
            inline-size: calc((100 / 390) * 100 * 1vw);
          }
        }

        .address {
          grid-area: 2/1/3/3;
          display: block grid;
          grid-template-columns: 1fr max-content;
          align-items: start;
          justify-content: space-between;

          @media only screen and (width <= 768px) {
            grid-area: 2/1/3/2;
            display: block flow;

            .u-anchor {
              margin-inline: auto;

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