body {
  background-color: var(--color-white);
}

main {
  margin-top: 100px;

  @media (width <= 767px) {
    margin-top: 68px;
  }
}

.intro-section {
  @media (width <= 767px) {
    margin-bottom: 3.75rem;
  }
}

.intro-section-mv-container {
  display: grid;
  grid-template: 'overlay' / 1fr;

  .mv-section-image,
  .mv-section-title-group {
    grid-area: overlay;
  }

  &::after {
    z-index: 1;
    grid-area: overlay;
    width: 100%;
    height: 100%;
    pointer-events: none;
    content: '';
    background: linear-gradient(to right, rgb(17 21 29 / 100%) 0%, rgb(17 21 29 / 0%) 50%);
  }

  .mv-section-image {
    width: 100%;
  }

  @media (width <= 767px) {
    grid-template: 'image' 'main' / 1fr;

    .mv-section-image {
      grid-area: image;
    }

    .mv-section-title-group {
      grid-area: main;
    }
  }

  .mv-section-title-group {
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    align-self: center;
    max-width: 800px;
    margin-left: calc(50vw - 680px);
    color: var(--color-white);

    @media (width <= 767px) {
      gap: 1.5rem;
      width: 91.5%;
      max-width: unset;
      margin-top: 2rem;
      color: var(--color-black);
    }

    @media (width <= 1439px) {
      margin-left: 2.1%;
    }

    .page-title {
      margin-bottom: unset;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

      @media (width <= 767px) {
        text-shadow: none;
      }
    }
  }
}

.page-subtitle {
  font-size: clamp(1.875rem, 1.554rem + 1.61vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

  :is(html[lang='ja'], html[lang='jp']) :is(&:not(.en-label)) {
    font-size: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem);
  }

  @media (width <= 767px) {
    text-shadow: none;
  }
}

.section-title {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}

.free-spaces-section {
  padding-top: 7.5rem;
  margin-bottom: 7.5rem;

  @media (width <= 767px) {
    padding-top: 3.75rem;
    margin-bottom: 3.75rem;
    border-top: 1px solid rgb(126 144 153 / 20%);
  }

  .section-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

.applications-section {
  margin-bottom: 7.5rem;

  @media (width <= 767px) {
    margin-bottom: 3.75rem;
  }
}

.application-grid-wrapper {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */

  &::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
}

.applications-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  width: 83.3%;
  max-width: 1200px;
  margin: auto;

  @media (width <= 767px) {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-left: 4.25%;

    .application-item {
      flex-shrink: 0;
      width: 240px;
    }
  }
}

.applications-section-link-wrapper {
  display: grid;
  justify-items: end;
  margin-top: 1.5rem;
}

.eye-catch-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
}

.application-item-title {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-black);
}

.industries-section {
  margin-bottom: 7.5rem;

  @media (width <= 767px) {
    margin-bottom: 3.75rem;
  }
}

.industries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;

  @media (width <= 767px) {
    gap: 2.5rem;
  }
}

.industry-item {
  display: grid;
  grid-template: 'body image' / 1fr 1.5fr;
  gap: 7.5%;

  @media (width <= 767px) {
    grid-template: 'image' 'body' / 1fr;
    gap: 1.5rem;
  }

  .industry-item-image-container {
    grid-area: image;
  }

  .industry-item-body {
    display: flex;
    flex-direction: column;
    grid-area: body;
    gap: 1.5rem;

    @media (width <= 767px) {
      gap: 0.5rem;
    }
  }
}

.industry-eye-catch-image {
  width: 100%;
  aspect-ratio: 690 / 387;
  object-fit: cover;
}

.industry-item-title {
  font-size: clamp(1.875rem, 1.554rem + 1.61vw, 3rem);
  font-weight: 700;
  line-height: 1.2;

  :is(html[lang='ja'], html[lang='jp']) :is(&:not(.en-label)) {
    font-size: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem);
  }
}

.industry-item-description-container {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-black);
}

.contact-block-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--color-black);

  @media (width <= 767px) {
    grid-template-columns: 1fr;
  }
}