/* rso-top.css - RSO top page template styles */

/* rsoセクション専用CSS */

/* --------------------------------
   Hero
--------------------------------- */
.rso-top-page .hero {
  height: 620px;
}

/* --------------------------------
   Solution
--------------------------------- */
.rso-top-solution {
  padding: var(--space-xl) 0 var(--space-xxl) 0;
}

.rso-top-solution .heading {
  margin-bottom: var(--space-lg);
}


/* --------------------------------
   Service
--------------------------------- */
.rso-top-service {
  padding: var(--space-lg) 0 var(--space-xxl) 0;
}

.rso-top-service__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  flex-direction: column;
}

.rso-top-service__item {
  position: relative;
  flex: 1 1 calc(50% - var(--space-lg));
  border-radius: var(--radius-md);
  background: #fff;
  text-align: left;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow .2s ease;
  display: flex;
  align-items: stretch;
}

.rso-top-service__item:hover {
  box-shadow: var(--shadow-lg);
}

.rso-top-service__illustration {
  display: flex;
  padding: var(--space-xl);
  align-items: center;
  background: var(--color-bg-alt);
  flex: 0 0 45%;
}

.rso-top-service__illustration img {
  margin: auto;
}

.rso-top-service__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);

}

.rso-top-service__text {
  flex: 1 1 auto;
}

.rso-top-service__text h3 {
  font-size: var(--fz-xl);
  margin: 0;
  margin-bottom: var(--space-xs);
}

.rso-top-service__text h3 span {
  font-size: var(--fz-xs);
  line-height: 1;
  display: block;
  color: var(--color-primary);
}

.rso-top-service__text p {
  margin: 0;
  margin-top: var(--space-xs);
  font-size: var(--fz-sm);
  color: var(--color-text-light);
}

.rso-top-service__arrow {
  flex: 0 0 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rso-top-service__arrow img {
  max-width: 100%;
  max-height: 100%;
  transition: transform .18s ease;
}

.rso-top-service__item:hover .rso-top-service__arrow img {
  transform: translateX(4px);
}


/* --------------------------------
   case-study
--------------------------------- */
.rso-top-case-study {
  background: var(--color-bg-alt);
  padding: var(--space-xxl) 0;
}


/* --------------------------------
   rso-top-reason
--------------------------------- */
.rso-top-reason {
  padding: var(--space-xxl) 0;
}

/* --------------------------------
   seminar
--------------------------------- */
.rso-top-seminar {
  padding: 0 0 var(--space-xxl) 0;
}

/* --------------------------------
   faq
--------------------------------- */
.rso-top-faq {
  padding: var(--space-xxl) 0;
  background: var(--color-bg-alt);
}

/* --------------------------------
   news
--------------------------------- */
.rso-top-news {
  padding: var(--space-xxl) 0;
}



/* ================================
   Tablet（~1023px）
================================ */
@media (max-width: 1023px) {}

/* ================================
   Smartphone（~767px）
================================ */
@media (max-width: 767px) {

  .rso-top-page .hero__title span {
    font-size: var(--fz-sm);
  }

  .rso-top-service__inner {
    flex-direction: column;
  }

  .rso-top-service__item {
    flex-direction: column;
  }

  .rso-top-service__illustration {
    flex: 0 0 120px;
  }

  .rso-top-service__arrow {
    flex: 0 0 20px;
  }
}