@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/company/mv.png');
  }
  /* =====================
    about
  ===================== */
  .about {
    padding-block-start: 89px;
    padding-block-end: 88px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/company/philosophy_bg.png');
    inline-size: 100%;

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

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

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

      .wrap {
        background-color: #fff;
        border-radius: 10px;
        display: block grid;
        place-content: center;
        padding-block: 67px 81px;

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

        .u-content-catch {
          margin-block-start: 43px;
          text-align: center;

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

        .description {
          text-align: center;
          margin-block-start: 56px;

          @media (width <= 768px) {
            text-align: left;
            margin-block-start: calc((100 / 390) * 32 * 1vw);
          }
        }
      }
    }
  }
  /* =====================
    message
  ===================== */
  .message {
    position: relative;
    padding-block-start: 106px;
    padding-block-end: 116px;

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

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

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

      .wrap {
        display: block grid;
        grid-template-columns: 460px auto;
        gap: 46px;
        margin-block-start: 53px;

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

        .message_img {
          display: block flow;

          @media (width <= 768px) {
            margin-inline: auto;
            inline-size: calc((100 / 390) * 358 * 1vw);
          }
        }

        .description {
          & + .description {
            margin-block-start: 0.7em;

            @media (width <= 768px) {
              margin-block-start: 0.7em;
            }
          }
        }
        .name-set {
          margin-block-start: 12px;
          display: block flex;
          align-items: baseline;
          justify-content: flex-end;
          gap: 32px;

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

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

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 20 * 1vw);
            }
          }
        }
      }
    }
  }
  /* =====================
    Outline
  ===================== */
  .profile {
    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: 120px;

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

      .profile_wrap {
        background-color: #fff;
        border-radius: 10px;
        padding-block-start: 68px;
        padding-block-end: 80px;

        @media (width <= 768px) {
          border-radius: calc((100 / 390) * 10 * 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: 106px;
    padding-block-end: 119px;

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

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

      & iframe {
        margin-block-start: 52px;
        inline-size: 100%;
        block-size: 370px;
        border-radius: 10px;

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

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

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

        & address {
          margin-block-start: 14px;

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

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