@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 {
    position: relative;
    padding-block-start: 80px;
    padding-block-end: 87px;
    min-block-size: 741px;

    &::before,
    &::after {
      content: '';
      display: block flow;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      inline-size: 100%;
      min-block-size: 741px;
      position: absolute;
      pointer-events: none;
      top: 0;
      z-index: -1;
    }
    &::before {
      background-image: url('../img/company/message_bg_01.png');
      left: 0;
    }
    &::after {
      background-image: url('../img/company/message_bg_02.png');
      right: 0;
    }
    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 80 * 1vw);
      padding-block-end: calc((100 / 390) * 80 * 1vw);
      min-block-size: calc((100 / 390) * 986 * 1vw);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/company/message_bg_2x.png');
      &::before,
      &::after {
        display: none;
      }
    }

    .u-inner {
      display: block flex;
      align-items: start;
      gap: 116px;

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

      .wrap {
        inline-size: 627px;
        margin-block-start: 24px;

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

        .u-content-catch {
          inline-size: fit-content;
          margin-inline: auto;

          @media (width <= 768px) {
            inline-size: auto;
            font-size: calc((100 / 390) * 20 * 1vw);
            font-weight: 500;
            line-height: 1.6;
          }
        }
        .description {
          margin-block-start: 37px;

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

          @media (width <= 768px) {
            gap: calc((100 / 390) * 24 * 1vw);
            margin-block-start: calc((100 / 390) * 16 * 1vw);
          }
          & dd {
            font-family: var(--name);
            font-size: 36px;
            font-weight: bold;
            line-height: 1.5;

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

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

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

    .outline_wrap {
      background-color: #fff;
      margin-inline: 80px;
      border-radius: 10px;
      padding-inline: 80px;
      padding-block: 80px;

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

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

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 33 * 1vw);
        }
        & .tr {
          padding-inline: 80px 0;

          @media (width <= 768px) {
            padding-inline: 0;
          }
          & :where(dt, dd) {
            padding-block: 23.7px;

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

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

  /* =====================
    history
  ===================== */
  .history {
    position: relative;
    padding-block-start: 112px;
    padding-block-end: 112px;

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

    .history_wrap {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/company/history_bg.png');
      margin-inline: 80px;
      border-radius: 10px;
      padding-inline: 80px;
      padding-block: 80px 122px;

      @media (width <= 768px) {
        margin-inline: 0;
        border-radius: calc((100 / 390) * 10 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        padding-block: calc((100 / 390) * 48 * 1vw) calc((100 / 390) * 75 * 1vw);
        background-image: url('../img/company/history_bg_2x.png');
      }

      .table {
        position: relative;
        margin-block-start: 64px;
        padding-inline: 80px;

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

        .tr {
          display: block grid;
          grid-template-columns: 179px 1fr;
          padding-block: 16px;

          @media (width <= 768px) {
            position: relative;
            grid-template-columns: 1fr;
            padding-block: calc((100 / 390) * 12 * 1vw);
            row-gap: calc((100 / 390) * 4 * 1vw);
            padding-inline: calc((100 / 390) * 53 * 1vw) calc((100 / 390) * 16 * 1vw);

            &::before {
              content: '';
              display: block flow;
              background-color: #cbb088;
              inline-size: calc((100 / 390) * 13 * 1vw);
              block-size: calc((100 / 390) * 13 * 1vw);
              border-radius: 50rem;
              position: absolute;
              left: calc((100 / 390) * 16 * 1vw);
              top: calc((100 / 390) * 20 * 1vw);
            }

            &::after {
              content: '';
              display: block flow;
              background-color: #cbb088;
              inline-size: 1px;
              block-size: 108%;
              position: absolute;
              left: calc((100 / 390) * 22 * 1vw);
              top: calc((100 / 390) * 20 * 1vw);
            }
          }

          & dt {
            font-weight: 500;

            @media (width <= 768px) {
              position: relative;
            }
          }

          & dd {
            position: relative;
            display: block flex;
            align-items: center;
            gap: 80px;

            &::before {
              content: '';
              display: block flow;
              background-color: #cbb088;
              inline-size: 16px;
              block-size: 16px;
              border-radius: 50rem;
            }

            &::after {
              content: '';
              display: block flow;
              background-color: #cbb088;
              inline-size: 1px;
              block-size: 240%;
              position: absolute;
              left: 8px;
              top: 50%;
            }

            @media (width <= 768px) {
              display: block flow;
              &::before,
              &::after {
                display: none;
              }
            }
          }
        }
        &::after {
          content: '';
          display: block flow;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/company/history.png');
          inline-size: 354px;
          block-size: 236px;
          position: absolute;
          right: -40px;
          bottom: -42px;
          pointer-events: none;
        }

        @media (width <= 768px) {
          &::after {
            background-image: url('../img/company/history_2x.png');
            inline-size: calc((100 / 390) * 120 * 1vw);
            block-size: calc((100 / 390) * 81 * 1vw);
            top: calc((100 / 390) * -65 * 1vw);
            right: calc((100 / 390) * 16 * 1vw);
            bottom: unset;
          }
        }
      }
    }
  }

  /* =====================
    access
  ===================== */
  .access {
    position: relative;
    padding-block-start: 112px;
    padding-block-end: 112px;
    background-color: #f8f4ef;

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

    & iframe {
      inline-size: 100%;
      block-size: 400px;
      margin-block-start: 48px;

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

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

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

      .description {
        font-size: 15px;
        margin-block-start: 16px;

        @media (width <= 768px) {
          font-size: calc((100 / 390) * 13 * 1vw);
          margin-block-start: calc((100 / 390) * 5 * 1vw);
          white-space: nowrap;
        }
      }

      .map-link {
        @media (width <= 768px) {
          padding: calc((100 / 390) * 17 * 1vw) calc((100 / 390) * 32 * 1vw);
        }

        .u-arrow {
          &::after {
            mask-image: var(--icon-link);
            inline-size: 16px;
            aspect-ratio: 1 / 1;
          }
          @media (width <= 768px) {
            font-size: calc((100 / 390) * 15 * 1vw);
            &::after {
              inline-size: calc((100 / 390) * 16 * 1vw);
            }
          }
        }
      }
    }
  }
}