/*============================
#flow
============================*/
section#flow {
  padding: var(--padding-block, 80px) var(--padding-inline, 20px);
  background: var(--surface-variant, #f0f6fd);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-row, 56px);
}

section#flow div.flow__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-20, 20px);
}
section#flow div.flow__heading div.heading__en.en {
  display: flex;
  padding-bottom: var(--scale-8, 8px);
  justify-content: center;
  align-items: center;
  border-bottom: var(--scale-4, 4px) solid var(--primary, #003da7);
  color: var(--primary, #003da7);
  text-align: center;
  font-family: Roboto;
  font-size: var(--scale-24, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 24px */
  letter-spacing: 1.92px;
}
section#flow div.flow__heading h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-12, 12px);
}
section#flow div.flow__heading h2 div.h2__sub-title {
  color: var(--on-surface, #2a292c);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-32, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 41.6px */
}
section#flow div.flow__heading h2 div.h2__main-title {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 4px var(--scale-4, 4px);
  flex-wrap: wrap;
  color: var(--primary, #003da7);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 52px */
}
section#flow div.flow__heading h2 div.h2__main-title span.box {
  display: flex;
  padding: var(--scale-4, 4px) var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  background: var(--primary, #003da7);
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-40, 40px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 52px */
}

section#flow div.flow__heading p {
  color: var(--on-surface, #2a292c);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 34px */
}
section#flow div.flow__heading p span.highlight {
  display: inline;
  color: var(--highlight, #f55600);
}
section#flow div.flow__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-40, 40px);
}

section#flow div.flow__container div.flow__rows {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--scale-40, 40px);
}
section#flow div.flow__container div.flow__rows div.rows__row {
  display: flex;
  max-width: var(--width-md, 1100px);
  flex-wrap: wrap;
}
section#flow div.flow__container div.flow__rows div.rows__row div.row__pair {
  display: flex;
  align-items: flex-start;
  flex: 1 0 0;
}
section#flow
  div.flow__container
  div.flow__rows
  div.rows__row
  div.row__pair
  article.pair__article {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
}
section#flow
  div.flow__container
  div.flow__rows
  div.rows__row
  div.row__pair
  article.pair__article
  div.article__arrow {
  display: flex;
  padding: var(--scale-4, 4px) 0;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  background: var(--primary, #003da7);
}

section#flow
  div.flow__container
  div.flow__rows
  div.rows__row
  div.row__pair
  article.pair__article
  div.article__arrow
  svg {
  width: 24px;
  aspect-ratio: 1/1;
}
section#flow
  div.flow__container
  div.flow__rows
  div.rows__row
  div.row__pair
  article.pair__article
  div.article__bar {
  width: var(--scale-8, 8px);
  height: var(--scale-16, 16px);
  background: var(--surface-variant-dark, #cbcccf);
}
section#flow
  div.flow__container
  div.flow__rows
  div.rows__row
  div.row__pair
  article.pair__article
  div.article__body {
  display: flex;
  padding: var(--scale-16, 16px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-8, 8px);
  flex: 1 0 0;
  align-self: stretch;
  background: #fff;
  margin-right: var(--scale-8, 8px);
  margin-left: var(--scale-8);
}
section#flow
  div.flow__container
  div.flow__rows
  div.rows__row
  div.row__pair
  article.pair__article
  div.article__heading {
  display: flex;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
}
section#flow
  div.flow__container
  div.flow__rows
  div.rows__row
  div.row__pair
  article.pair__article
  div.article__heading
  figure.heading__img {
  display: flex;
  width: var(--scale-64, 64px);
  align-items: center;
  aspect-ratio: 1/1;
}
section#flow
  div.flow__container
  div.flow__rows
  div.rows__row
  div.row__pair
  article.pair__article
  div.article__heading
  figure.heading__img
  img {
}
section#flow
  div.flow__container
  div.flow__rows
  div.rows__row
  div.row__pair
  article.pair__article
  div.article__heading
  div.heading__num {
  color: var(--primary, #003da7);
  font-family: Garamond;
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 20px */
}
section#flow
  div.flow__container
  div.flow__rows
  div.rows__row
  div.row__pair
  article.pair__article
  h3 {
  color: var(--on-surface, #2a292c);
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 34px */
}
section#flow
  div.flow__container
  div.flow__rows
  div.rows__row
  div.row__pair
  article.pair__article
  p {
  color: var(--on-surface, #2a292c);
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 27.2px */
}
section#flow div.flow__container div.flow__rows div.flow__note {
  color: var(--on-surface-variant, #717073);
  font-family: "Noto Sans JP";
  font-size: var(--scale-12, 12px);
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 12px */
}

/*============================
#go-to-chart
============================*/

section#go-to-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--scale-40, 40px) 0;
  background: var(--surface-variant, #f0f6fd);
  padding-top: 0;
}
section#go-to-chart .go-to-chart__anchor-button {
  width: 100%;
  display: flex;
  max-width: 400px;
  padding: var(--scale-16, 16px) var(--scale-20, 20px);
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 1000px;
  border: 1px solid var(--primary, #003da7);
  background: var(--surface, #fff);
  box-shadow: 0 var(--scale-4, 4px) var(--scale-4, 4px) 0 rgba(0, 0, 0, 0.25);
  color: var(--primary, #003da7);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-24, 24px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 31.2px */
  margin-inline: auto;
}

section#go-to-chart .go-to-chart__anchor-button div {
  flex: 1 0 0;
}
section#go-to-chart .go-to-chart__anchor-button svg {
  margin: 0 !important;
}