@charset "utf-8";
/*====================================================================================================

  online-service

====================================================================================================*/
#online-service {
  margin-bottom: var(--space-max);
}

/*-----------------------------------------------------------------------------------
  intro
-----------------------------------------------------------------------------------*/
#online-service .os-intro {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-l);
  margin-bottom: var(--space-4l);
}
@media (max-width:640px) {
  #online-service .os-intro {
    grid-template-columns: 1fr;
  }
}

/*-----------------------------------------------------------------------------------
  service-list
-----------------------------------------------------------------------------------*/
#online-service .os-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-l);
  margin-bottom: var(--space-4l);
}
@media (max-width:768px) {
  #online-service .os-list {
    gap: var(--space-s);
  }
}
@media (max-width:700px) {
  #online-service .os-list {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}
#online-service .os-contents {
  padding: var(--space-l);
  border-radius: var(--space-m);
}
@media (max-width:768px) {
  #online-service .os-contents {
    padding: var(--space-m);
    border-radius: var(--space-s);
  }
}
#online-service #epark.os-contents {
  border: 2px solid var(--color-epark);
  background-color: var(--color-epark-pale);
}
#online-service #melmo.os-contents {
  border: 2px solid var(--color-melmo);
  background-color: var(--color-melmo-pale);
}
#online-service .os-contents h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2l);
  margin-bottom: var(--space-l);
}
#online-service .os-img {
  display: inline-block;
  margin-right: 0.25em;
}
#online-service #melmo .os-img {
  width: 180px;
}
#online-service #epark .c-list-num > li:before {
  background-color: var(--color-epark);
}
#online-service #melmo .c-list-num > li:before {
  background-color: var(--color-melmo);
}
#online-service .os-flow {
  margin-bottom: var(--space-m);
}
#online-service .os-flow-contents {
  margin-bottom: var(--space-s);
}
#online-service .os-flow-contents h3 {
  font-size: var(--fs-m);
  font-weight: normal;
}
@media (max-width:768px) {
  #online-service .os-flow-contents h3 {
    line-height: var(--line-height-2s);
  }
}
#online-service .os-point {
  margin-bottom: var(--space-m);
}
#online-service #epark .os-flow-contents h3,
#online-service #epark .os-point h3 {
  color: var(--color-epark);
}
#online-service #melmo .os-flow-contents h3,
#online-service #melmo .os-point h3 {
  color: var(--color-melmo);
}
#online-service #melmo .os-flow-contents h3,
#online-service #melmo .os-point h3 {
  color: var(--color-melmo);
}
#online-service #epark .os-point .c-list-mark li:before {
  background-color:var(--color-epark);
}
#online-service #melmo .os-point .c-list-mark li:before {
  background-color:var(--color-melmo);
}
#online-service .os-link {
  width: 100%;
  height: 80px;
}
#online-service .os-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  border-radius: 40px;
  color: inherit;
  font-size: 30px;
  text-decoration: none;
  transition: all 0.2s;
}
#online-service #epark .os-btn {
  background-color: var(--color-epark-light);
  border-bottom: 6px solid var(--color-epark);
}
#online-service #epark .os-btn:hover {
  color: inherit;
  border-bottom: 2px solid var(--color-epark);
}
#online-service #melmo .os-btn {
  background-color: var(--color-melmo-light);
  border-bottom: 6px solid var(--color-melmo);
}
#online-service #melmo .os-btn:hover {
  color: inherit;
  border-bottom: 2px solid var(--color-melmo);
}
@media (max-width:768px) {
  #online-service .os-btn {
    font-size: 22px;
  }
}


/*====================================================================================================

  guidance

====================================================================================================*/
#guidance {
  margin-bottom: var(--space-max);
}