@charset "utf-8";

.company {
  background-color: var(--color-gray);
}

.company-wrapper {
  padding-block-end: clamp(4rem, 2.843rem + 4.94vw, 6rem);
}

.section-heading-wrapper {
  padding-block: clamp(5.5rem, 4.197rem + 5.56vw, 9.2rem) clamp(2.31rem, 1.187rem + 4.79vw, 5.5rem);
  position: relative;
}

#heading-background-logo {
  width: clamp(15.625rem, 7.042rem + 36.62vw, 40rem);
  height: auto;
  flex-shrink: 0;
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: 75%;
  transform: translate(-50%, -50%);
  transition: opacity 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  opacity: 0;
}

#heading-background-logo.visible {
  opacity: 1;
}

.section-heading {
  position: relative;
  z-index: 2;
}

.section-heading .ja {
  margin-inline-start: 0.2rem;
}

.company-table-wrapper {
  padding: clamp(1.59rem, 0.523rem + 4.55vw, 4.62rem) clamp(1rem, 0.296rem + 3vw, 3rem);
  background-color: var(--color-white);
  border-radius: var(--border-radius-base);

  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s var(--ease-base) forwards;
  animation-delay: 0.3s;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.company-table {
  font-size: var(--font-size-text);
  background-color: var(--color-white);
  width: 100%;
  border-collapse: collapse;
  letter-spacing: var(--spacing-text-ja);
}

.company-table tbody {
  width: 100%;
}

.company-table tr {
  display: flex;
  flex-direction: column;
  border-block-start: 1px solid var(--color-gray);
  padding-block: 1.5rem;
  width: 100%;
}

.company-table tr:last-of-type {
  border-block-end: 1px solid var(--color-gray);
}

.company-table th {
  font-family: var(--font-ja);
  font-weight: var(--font-weight-bold-ja);
  color: var(--color-company-heading-gray);
  width: 100%;
  line-height: 2;
  align-self: center;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.company-table td {
  font-family: var(--font-ja);
  font-weight: var(--font-weight-regular-en);
  color: var(--color-black);
  margin-block-start: 0.4rem;
  width: 100%;
  line-height: 2;
  align-self: center;
}

@media (min-width: 64rem) {
  .company-wrapper {
    padding-block-end: 8rem;
  }

  .company-table tr {
    flex-direction: row;
  }
  .company-table th {
    width: 30%;
    margin-inline-start: clamp(0rem, -0.88rem + 3.76vw, 2.5rem);
  }

  .company-table td {
    width: 70%;
    margin-block-start: 0rem;
  }

  .company-sp-br {
    display: none;
  }
}

/* cta */

.cta {
  background-color: var(--color-blue);
}