
.page_caption p {
  width: fit-content;
  margin: 0 auto;
}
/*----------------------------------------
ご利用までの流れ
----------------------------------------*/
#use_flow {
  padding-top: 15vw;
}
#use_flow .flow_list {
  counter-reset: count 0;
}
#use_flow .flow_list li {
  counter-increment: count 1;
  padding: 1.5rem 0;
  margin-bottom: 5rem;
  background: #91908D;
  border-radius: 20px;
  position: relative;
}
#use_flow .flow_list li:not(:last-child):after {
  content: "";
  margin-left: -1.5rem;
  border: 6rem solid transparent;
  border-top: 4rem solid #91908D;
  position: absolute;
  top: 99%;
  left: 15%;
}
#use_flow .flow_list dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5%;
}
#use_flow .flow_list dl:before {
  display: flex;
  content: counter(count);
  color: var(--fc-base);
  font-family: "heisei-maru-gothic-std", sans-serif;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  font-weight: bold;
  flex-shrink: 0;
  width: 6rem;
  height: 5.5rem;
  margin-left: 3rem;
  background: #ffffff;
  border-radius: 50%;
}
#use_flow .flow_list dl dt {
  color: #fff;
  font-family: "heisei-maru-gothic-std", sans-serif;
  font-size: clamp(2.5rem,3.1vw,3.7rem);
  font-weight: bold;
  line-height: 1.2em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  width: calc(95% - 9rem);
}
#use_flow .flow_list dl dd {
  display: flex;
  text-align: left;
  align-items: center;
  line-height: 1.3em;
  width: 100%;
  padding: 1em;
  margin: 2rem;
  background: #fff;
  border-radius: 0.5rem;
}
@media (min-width:992px) {
  #use_flow .flow_list dl:before {
    width: 9.5rem;
    height: 8rem;
  }
  #use_flow .flow_list dl dt {
    width: 9em;
  }
  #use_flow .flow_list dl dd {
    width: calc(90% - 12rem - 35.5vw);
    height: 4.5em;
    margin: 0 2rem 0 0;
  }
}
@media (min-width:1200px) {
  #use_flow .flow_list dl dd {
    width: calc(90% - 12rem - (3.7rem * 11));
  }
}
/*----------------------------------------
受給者証について
----------------------------------------*/
#use_benefit_card .content_block {
  margin-top: 5rem;
  padding: 3rem;
  background: #fff;
  border-radius: 3rem;
}
#use_benefit_card .block_title {
  color: var(--main-blue);
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.5;
  margin-bottom: 1em;
}
#use_benefit_card .benefit_card_flow {
  counter-reset: count 0;
}
#use_benefit_card .benefit_card_flow li {
  margin-bottom: 1.5em;
}
#use_benefit_card .benefit_card_flow li::before {
  display: block;
  content: "STEP"counter(count);
  counter-increment: count 1;
  color: #fff;
  font-family: "heisei-maru-gothic-std", sans-serif;
  text-align: center;
  margin-bottom: 0.5em;
  background: var(--main-blue);
}
#use_benefit_card .benefit_card_flow li a::before {
  content: "・";
}
#use_benefit_card .benefit_card_flow li a::after {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  margin: 0 0 -0.1em 0.2em;
  background: url(/assets/img/common/icon_link.svg) no-repeat center / contain;
}
#use_benefit_card .benefit_card_flow li a:hover {
  opacity: 0.7;
}
@media (min-width:768px) {
  #use_benefit_card p {
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  #use_benefit_card .content_block {
    padding: 6rem;
  }
  #use_benefit_card .benefit_card_flow li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }
  #use_benefit_card .benefit_card_flow li::before {
    width: fit-content;
    margin-bottom: 0;
    padding: 0 0.5em;
    flex-shrink: 0;
  }
}