@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');
    }
  }
  /* =====================
    message
  ===================== */
  .message {
    padding-block-start: 84px;
    padding-block-end: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/company/message_bg.png');
    inline-size: 100%;

    @media (width <= 768px) {
      background-image: url('../img/company/message_bg_2x.png');
      padding-block-start: calc((100 / 390) * 46 * 1vw);
      padding-block-end: calc((100 / 390) * 69 * 1vw);
    }

    .u-inner {
      display: block flex;
      align-items: center;
      gap: 128px;

      @media (width <= 768px) {
        flex-direction: column;
        align-items: flex-start;
        gap: calc((100 / 390) * 35 * 1vw);
      }

      .title_wrap {
        flex-shrink: 0;

        .picture {
          display: block flow;
          margin-block-start: 61px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 30 * 1vw);
            & img {
              inline-size: calc((100 / 390) * 342 * 1vw);
            }
          }
        }
      }

      .message_wrap {
        padding-right: 40px;
        margin-block-start: 42px;

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

        .ja-catch {
          font-family: var(--yumin);
          font-size: 32px;
          font-weight: 600;
          letter-spacing: 0.96px;
          color: #1b57af;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 28 * 1vw);
            letter-spacing: calc((100 / 390) * 0.84 * 1vw);
          }
        }
        .description {
          margin-block-start: 36px;

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

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

            @media (width <= 768px) {
              margin-block-start: 1.7em;
            }
          }
        }
        .name-set {
          margin-block-start: 24px;
          display: block flex;
          align-items: baseline;
          gap: 24px;
          font-family: var(--yuji);

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

          & dd {
            font-size: 24px;

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

  /* =====================
    Outline
  ===================== */
  .profile {
    padding-block-start: 84px;
    padding-block-end: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/company/outline_bg.png');
    inline-size: 100%;

    @media (width <= 768px) {
      background-image: url('../img/company/outline_bg_2x.png');
      padding-block-start: calc((100 / 390) * 46 * 1vw);
      padding-block-end: calc((100 / 390) * 80 * 1vw);
    }

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

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

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

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

    .table {
      margin-block-start: 60px;

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

      .tr {
        position: relative;
        margin-inline-start: 120px;
        display: block flex;
        align-items: center;
        gap: 64px;

        &::before {
          content: '';
          position: absolute;
          bottom: -104px;
          left: 52px;
          inline-size: 1px;
          block-size: 100%;
          background-color: #dbdbdb;
          z-index: -1;
        }

        @media (width <= 768px) {
          margin-inline-start: 0;
          align-items: flex-start;
          gap: calc((100 / 390) * 24 * 1vw);

          &::before {
            bottom: calc((100 / 390) * -64 * 1vw);
            left: calc((100 / 390) * 32 * 1vw);
          }
        }

        & > dt {
          font-family: var(--title);
          font-size: 28px;
          font-weight: 500;
          text-align: center;
          color: #fff;
          inline-size: 104px;
          aspect-ratio: 1/1;
          border-radius: 50rem;
          background-image: linear-gradient(to top, #1b57af 0%, #549fd6 100%);
          display: block grid;
          place-content: center;
          flex-shrink: 0;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 20 * 1vw);
            inline-size: calc((100 / 390) * 64 * 1vw);
          }
        }
        & > dd {
          display: block grid;
          grid-template-columns: 98px auto;
          gap: 32px;

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

          .year {
            font-family: var(--yumin);
            font-weight: 600;
            color: #1b57af;
          }
        }
        & + .tr {
          margin-block-start: 56px;

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

  /* =====================
    access
  ===================== */
  .access {
    padding-block-start: 84px;
    padding-block-end: 112px;

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

    & iframe {
      margin-block-start: 60px;
      inline-size: 100%;
      block-size: 430px;
      border-radius: 20px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 390) * 46 * 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) * 16 * 1vw);
        flex-direction: column;
        gap: calc((100 / 390) * 24 * 1vw);
      }

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

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