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

  about
  
--------------------------------------------------------------------------------*/
.about-sec {
  --ttl2-fs: var(--fs-3l);
}

/*--------------------------------------------------------------------------------
  .about-symptom
--------------------------------------------------------------------------------*/
.about-symptom {
  display: flex;
  background-color: var(--bg-base);
  padding: 1rem;
  line-height: var(--lh-s);
}
.about-symptom dt {
  color: var(--color-blue);
  flex-shrink: 0;
  font-weight: 500;
}

/*--------------------------------------------------------------------------------
  .flow
--------------------------------------------------------------------------------*/
@media not (max-width: 640px) {
  .flow {
    --no-width: 6.5rem;
    --no-mgt: -0.25rem;
  }
}
@media (max-width: 640px) {
  .flow {
    --no-width: 4.5rem;
    --no-mgt: -0.15rem;
  }
}
.flow {
  --rgap: 2rem;
  --item-rgap: 0.5rem;
  --no-bg: var(--color-base);
  --no-line-color: var(--border-color);
  display: flex;
  flex-direction: column;
  row-gap: var(--rgap);
}
.flow_item {
  display: flex;
  flex-direction: column;
  row-gap: var(--item-rgap);
}
.flow_ttl {
  font-size: var(--fs-3m);
  font-weight: 400;
  display: grid;
  grid-template-columns: auto 1fr;
  position: relative;
}
.flow_txt {
  align-self: center;
}
.flow_no {
  color: var(--color-blue);
  width: var(--no-width);
  font-size: var(--fs-s);
  align-self: start;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 0.25rem;
  font-family: var(--ff-min);
  font-weight: 500;
  margin-top: var(--no-mgt);
}
.flow_no .num {
  font-size: var(--fs-l);
}
@media not (max-width: 640px) {
  .flow_desc {
    padding-left: var(--no-width);
  }
}