/* ============================================
   R&D PAGE STYLES
   ============================================ */

.rnd-page {
  background: #ffffff;
}

.rnd-section {
  padding: 48px 0 120px;
  background: #ffffff;
}

.rnd-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 64px;
}

.rnd-title {
  margin: 0;
  align-self: stretch;
  color: var(--color-neutral-opacity-gray-900);
  font-family: "Dunbar Text", "Hiragino Sans", "Meiryo", sans-serif;
  font-size: var(--font-size-64-fluid);
  font-weight: 700;
  line-height: var(--line-height-64-fluid);
  letter-spacing: -0.64px;
}

.rnd-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 48px;
}

.rnd-paragraph {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 16px;
}

.rnd-lead {
  margin: 0;
  align-self: stretch;
  color: var(--color-neutral-solid-gray-800);
  font-family: "Dunbar Text", "Hiragino Sans", "Meiryo", sans-serif;
  font-size: var(--font-size-22-fluid);
  font-weight: 700;
  line-height: var(--line-height-22-fluid);
  letter-spacing: 0;
}

.rnd-body {
  margin: 0;
  align-self: stretch;
  color: var(--color-neutral-solid-gray-800);
  font-family: Roboto, "Hiragino Sans", "Meiryo", sans-serif;
  font-size: var(--font-size-16-fluid);
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.rnd-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: stretch;
  gap: 16px;
}

.rnd-feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  min-height: 184px;
  border-radius: 8px;
  background: #edf7ff;
  padding: 24px;
  row-gap: 16px;
}

.rnd-feature-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--Ulvac---main, #1c7dcd);
}

.rnd-feature-icon {
  width: 24px;
  height: 24px;
  display: block;
  overflow: hidden;
}

.rnd-feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  row-gap: 8px;
}

.rnd-feature-title {
  margin: 0;
  align-self: stretch;
  color: #1a1a1a;
  font-family: Roboto, "Hiragino Sans", "Meiryo", sans-serif;
  font-size: var(--font-size-18-fluid);
  font-weight: 700;
  line-height: var(--line-height-18-fluid);
  letter-spacing: 0;
}

.rnd-feature-text {
  margin: 0;
  align-self: stretch;
  color: #666666;
  font-family: Roboto, "Hiragino Sans", "Meiryo", sans-serif;
  font-size: var(--font-size-15-fluid);
  font-weight: 400;
  line-height: var(--line-height-15-fluid);
  letter-spacing: 0;
}

.rnd-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: 24px;
  border-radius: 8px;
  background: var(--Ulvac---main, #1c7dcd);
  padding: 24px;
}

.rnd-banner-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 16px;
  min-width: 0;
  color: #ffffff;
}

.rnd-banner-content .rnd-stat-label,
.rnd-banner-content .rnd-stat-value,
.rnd-banner-content .rnd-banner-note {
  color: #ffffff;
}

.rnd-banner-stats {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 48px;
}

.rnd-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  row-gap: 4px;
}

.rnd-stat-label,
.rnd-banner-note {
  margin: 0;
  color: var(--color-neutral-white);
  font-family: Roboto, "Hiragino Sans", "Meiryo", sans-serif;
  font-size: var(--font-size-13-fluid);
  font-weight: 400;
  line-height: var(--line-height-13-fluid);
  letter-spacing: 0;
}

.rnd-stat-value {
  margin: 0;
  color: var(--color-neutral-white);
  font-family: Roboto, "Hiragino Sans", "Meiryo", sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: calc(var(--font-size-xl) * 1.5);
  letter-spacing: 0;
}

.rnd-banner-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  column-gap: 4px;
  min-height: 44px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  background: #ffffff;
  padding: 9px 19px 9px 23px;
  text-decoration: none;
  transition:
    background-color 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    transform 0.24s ease;
}

.rnd-banner-button:hover,
.rnd-banner-button:focus-visible {
  background: #1c7dcd;
  border-color: #ffffff;
  box-shadow: 0 10px 24px rgba(6, 49, 87, 0.16);
  transform: translateY(-1px);
}

.rnd-banner-button-text {
  margin: 0;
  color: var(--Ulvac---main, #1c7dcd);
  font-family: Roboto, "Hiragino Sans", "Meiryo", sans-serif;
  font-size: var(--font-size-16-fluid);
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0;
  transition: color 0.24s ease;
}

.rnd-banner-button-icon {
  width: 24px;
  height: 24px;
  display: block;
  transition: filter 0.24s ease;
}

.rnd-banner-button:hover .rnd-banner-button-text,
.rnd-banner-button:focus-visible .rnd-banner-button-text {
  color: #ffffff;
}

.rnd-banner-button:hover .rnd-banner-button-icon,
.rnd-banner-button:focus-visible .rnd-banner-button-icon {
  filter: brightness(0) invert(1);
}

@media (max-width: 1366px) {
  .rnd-section {
    padding-top: 0px;
    padding-bottom: 80px;
  }
  .rnd-container{
    padding-top: 35px;
  }
    .rnd-container{
          row-gap: 44px;
    }
}

@media (max-width: 1280px) {
  .rnd-banner {
    gap: 20px;
  }

  .rnd-banner-stats {
    gap: 32px;
  }
}

@media (max-width: 1100px) {
  .rnd-feature-grid {
    grid-template-columns: 1fr;
  }

  .rnd-feature-card {
    min-height: 0;
  }

  .rnd-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .rnd-banner-button {
    align-self: flex-start;
  }
}