@charset "UTF-8";

.section {
  background-color: var(--white);
}

.key-visual img {
  width: 100%;
  height: auto;
}

.text-center {
  font-size: var(--font-size-md);

  h1 {
    line-height: 1.5;
    font-size: var(--font-size-xl);

    span {
      display: block;
      font-size: var(--font-size-5xl);
    }
  }

  p {
    line-height: 1.75;
  }
}

.section--dark-gray, .section--light-gray {
  text-align: center;
}

.section--dark-gray {
  background-color: var(--gray-100);
}

.section--light-gray {
  background-color: var(--gray-50);
}

.section--light-gray .heading-3xl,
.section--dark-gray .heading-3xl {
  text-align: center;
  line-height: 1.5;

  span {
    display: block;
    font-size: var(--font-size-xl);
    color: var(--colors-primary-600);
  }
}

.webinars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--size-2xl);
}

@media (width < 768px) {
  .webinars {
    grid-template-columns: repeat(1, 1fr);
  }
}

.webinar {
  width: 100%;
  background-color: var(--white);
  padding: var(--size-2xl);
  border-radius: calc(var(--scale-4xs) * 1rem);
  text-align: left;

  .webinar__thumbnail {
    width: 100%;
    height: auto;
    margin-bottom: var(--size-2xl);
  }

  .webinar__time {
    font-size: var(--font-size-sm);
    color: var(--colors-primary-600);
    margin-bottom: var(--size-3xs);
  }

  .webinar__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--size-lg);
    line-height: 1.5;
  }

  .webinar__recommendation {
    font-weight: bold;
    margin-bottom: var(--size-3xs);
  }

  .webinar__list {
    padding-left: var(--size-lg);
  }

  .webinar__list-item {
    list-style-type: disc;
  }
}

.webinar__cta {
  display: inline-block;
  background-color: var(--colors-primary-500);
  color: var(--white);
  text-decoration: none;
  padding: var(--size-md) var(--size-xl);
  border-radius: calc(var(--scale-4xs) * 1rem);
  border: 1px solid var(--colors-primary-600);
  font-size: var(--font-size-lg);
  margin-top: var(--size-4xl);
  transition: background-color 0.3s;

  &:hover {
    background-color: var(--colors-primary-600);
    color: var(--white);
    text-decoration: none;
  }

  &:focus {
    text-decoration: none;
  }
}

@media (width < 980px) {
  .footer-service .inner,
  .footer-corp .inner {
    width: auto;
  }

  .path {
    width: auto;
  }
}