@charset "UTF-8";

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

    @media (width <= 768px) {
      background-image: url('../img/company/mv_sp.png');
    }
  }
  /* =====================
    message
  ===================== */
  .message {
    padding-block: 95px 95px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 110 * 1vw) calc((100 / 750) * 120 * 1vw);
    }

    .u-inner {
      position: relative;
      display: block flex;
      gap: 80px;

      @media (width <= 768px) {
        flex-direction: column;
        gap: calc((100 / 750) * 74 * 1vw);
      }

      .message_wrap {
        .description {
          line-height: 1.9;
          margin-block-start: 56px;
          margin-inline-start: 34px;
          color: #333;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 750) * 39 * 1vw);
            margin-inline-start: 0;
          }
        }

        .name-set {
          inline-size: fit-content;
          margin-inline: auto 0;
          margin-block-start: 38px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 750) * 27 * 1vw);
          }
          .name {
            display: block flex;
            align-items: baseline;
            gap: 28px;
            color: #333;

            @media (width <= 768px) {
              gap: calc((100 / 750) * 28 * 1vw);
            }
            & dt {
              font-weight: 500;
            }
            & dd {
              font-family: var(--yumin);
              font-size: 32px;
              font-weight: 600;
              line-height: 1;

              @media (width <= 768px) {
                font-size: calc((100 / 750) * 48 * 1vw);
              }
            }
          }
        }
      }

      .picture {
        display: block flow;
        flex-shrink: 0;
        margin-inline-end: 34px;
        margin-block-start: 9px;

        @media (width <= 768px) {
          margin-inline: auto 0;
          margin-block-start: 0;
          & img {
            width: calc((100 / 750) * 528 * 1vw);
          }
        }
      }

      .left-in-catch {
        position: absolute;
        top: 28px;
        right: 368px;
        z-index: 5;

        @media (width <= 768px) {
          top: unset;
          bottom: calc((100 / 750) * 384 * 1vw);
          right: unset;
          left: calc((100 / 750) * 34 * 1vw);
        }
      }
    }
  }

  /* =====================
    outline
  ===================== */
  .outline {
    padding-block: 99px 105px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 110 * 1vw) calc((100 / 750) * 120 * 1vw);
    }

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

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

  /* =====================
    access
  ===================== */
  .access {
    padding-block: 96px 38px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 110 * 1vw) calc((100 / 750) * 49 * 1vw);
    }

    & iframe {
      margin-block-start: 35px;
      inline-size: 100%;
      block-size: 310px;

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

    .address {
      display: block flex;
      justify-content: space-between;
      margin-block-start: 41px;

      @media (width <= 768px) {
        flex-direction: column;
        gap: calc((100 / 750) * 56 * 1vw);
        margin-block-start: calc((100 / 750) * 46 * 1vw);
      }
      & address {
        line-height: 1.8;

        @media (width <= 768px) {
          line-height: 1.9;
        }
      }

      .u-anchor {
        padding-block: 19px;

        @media (width <= 768px) {
          padding-block: calc((100 / 750) * 28 * 1vw);
        }
        .btn-txt {
          gap: 8px;

          &::after {
            display: none;
          }
          &::before {
            content: '';
            inline-size: 13px;
            aspect-ratio: 13 / 17;
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center;
            mask-image: var(--icon-map);
            background-color: currentColor;
          }
          @media (width <= 768px) {
            gap: calc((100 / 750) * 20 * 1vw);

            &::before {
              inline-size: calc((100 / 750) * 16 * 1vw);
            }
          }
        }
      }
    }
  }
}