/*============================
#bridge
============================*/
section#bridge {
  /*background: url(../images/flow-bg.svg) center top / 700px auto no-repeat;*/
  display: flex;
  padding: var(--scale-40, 40px) var(--padding-inline) 0;
  flex-direction: column;
  align-items: center;
  gap: var(--scale-24, 24px);
  align-self: stretch;
}
section#bridge div.bridge__chatch {
  color: var(--on-surface, #4d4848);
  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 */
}
section#bridge div.bridge__chatch .catch__copy {
  margin-top: 1em;
}
section#bridge div.bridge__chatch .catch__copy svg {
  display: inline-block;
  width: 1em;
}

section#bridge div.bridge__chatch span.highlight {
  color: var(--primary, #c37e81);
}

section#bridge div.bridge__chatch span.highlight {
  color: var(--primary, #c37e81);
}

section#bridge div.bridge__title {
  display: flex;
  padding: var(--scale-24, 24px) var(--scale-8, 8px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-12, 12px);
  align-self: stretch;
  background: rgba(243, 217, 221, 0.56);
}
section#bridge div.bridge__title div.title__subtitle {
  background: #fff;
  color: var(--primary, #c37e81);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: min(24px, 100vw / 375 * 11);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 31.2px */
}
section#bridge div.bridge__title h2 {
  color: var(--on-surface, #4d4848);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-32, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: 180%; /* 57.6px */
  display: flex;
  gap: var(--scale-16);
}
@media screen and (max-width: 768px) {
  section#bridge div.bridge__title h2 {
    flex-direction: column;
  }
}

section#bridge div.bridge__title h2 .rank {
}
section#bridge div.bridge__title h2 img.logo {
  display: inline-block;
  width: 312px;
  aspect-ratio: 312 / 52;
  flex-shrink: 0;
}
section#bridge div.bridge__title h2 svg {
  display: inline-block;
  width: 32px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

/*============================
#flow
============================*/
section#flow {
  display: flex;
  padding: var(--padding-block, 80px) var(--padding-inline, 20px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-56, 56px);
  align-self: stretch;
}

section#flow h2 {
  font-size: min(100vw / 375 * 24, 40px);
  display: flex;
  padding: var(--scale-8, 8px) var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  border-radius: var(--scale-4, 4px);
  border: var(--scale-2, 2px) solid var(--primary, #c37e81);
  background: #fff;
  color: var(--on-surface, #4d4848);
  text-align: center;
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 40px */
  position: relative;
}

section#flow h2:before {
  position: absolute;
  left: calc(var(--scale-2, 2px) * -1);
  top: calc(var(--scale-2, 2px) * -1);
  content: "";
  width: var(--scale-8, 8px);
  height: 8px;
  aspect-ratio: 1/1;
  border-radius: var(--scale-4, 4px) 0 0 0;
  background: var(--surface, #fff);
}
section#flow h2:after {
  position: absolute;
  right: calc(var(--scale-2, 2px) * -1);
  bottom: calc(var(--scale-2, 2px) * -1);
  content: "";
  width: var(--scale-8, 8px);
  height: 8px;
  aspect-ratio: 1/1;
  border-radius: 0 0 var(--scale-4, 4px) 0;
  background: var(--surface, #fff);
}

section#flow div.flow__container {
  width: 100%;
  max-width: var(--width-md);
}
section#flow div.flow__container .flow__h3 {
  background: var(--primary);
  color: #fff;
  font-size: var(--scale-32);
  display: flex;
  gap: var(--scale-20);
  margin-bottom: 1em;
  border-radius: var(--scale-8);
  padding: var(--scale-16);
  font-weight: bold;
  justify-content: center;
  text-align: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  section#flow div.flow__container .flow__h3 {
    flex-direction: column;
  }
}

section#flow div.flow__container .flow__h3 .h3__img {
  font-size: var(--scale-18, 18px);
}
section#flow div.flow__container .flow__h3 .h3__img img {
  width: var(--scale-80);
  height: auto;
}
section#flow div.flow__container div.flow__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--scale-20, 20px);
}
section#flow div.flow__container div.flow__body div.body__steps {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 16;
  justify-items: center;
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step.steps__step--title {
  border-radius: var(--scale-8, 8px);
  display: flex;
  padding: var(--scale-8, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-16, 16px);
  flex: 1 0 0;
  align-self: stretch;
  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 */
  width: 100%;
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps--voicetep
  div.steps__step.steps__step--title {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: var(--scale-4, 4px) var(--scale-8, 8px);
  align-self: stretch;
  flex-wrap: wrap;
  flex-direction: row;
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step
  svg {
  margin-left: 0;
  margin-right: 0;
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step
  img {
  margin-left: 0;
  margin-right: 0;
}

section#flow div.flow__container div.flow__body div.body__steps div.bar {
  width: var(--scale-40, 40px);
  height: 100%;
  min-height: var(--scale-24, 24px);
  background: var(--border, #c5b2b2);
}

section#flow
  div.flow__container
  div.flow__body
  div.body__steps--voicetep
  div.bar {
  width: var(--scale-40, 40px);
  background: #e8b6bc;
  grid-row: span 1;
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps--voicetep
  div.bar--tall {
  grid-row: span 9;
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step {
  background: var(--surface-variant, #f4eded);
  display: flex;
  padding: var(--scale-8, 8px);
  flex-direction: column;
  justify-content: center;
  gap: var(--scale-4, 4px);
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  width: 100%;
  color: var(--on-surface, #4d4848);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  align-self: stretch;
  line-height: 130%; /* 26px */
  text-align: center;
  min-height: 3em;
}

section#flow
  div.flow__container
  div.flow__body
  div.body__steps--voicetep
  div.steps__step {
  background: var(--primary, #c37e81);
  color: var(--surface, #fff);
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps--voicetep
  div.steps__step
  .highlight {
  color: #edff00;
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step
  div.sub-text {
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-12, 12px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 15.6px */
}

section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step
  div.sub-text.highlight {
  color: #e04949;
}

section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step.steps__step--result {
  display: flex;
  flex-direction: column;
  padding: var(--scale-16, 16px);
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 16px var(--scale-16, 16px);
  align-self: stretch;
  justify-content: space-between;
}

section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step.steps__step--result
  > div {
  display: flex;
  gap: var(--scale-8) var(--scale-16);
}

@media screen and (max-width: 768px) {
  section#flow
    div.flow__container
    div.flow__body
    div.body__steps
    div.steps__step.steps__step--result
    > div {
    flex-direction: column;
    align-items: center;
  }
}

section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step.steps__step--result
  img {
  margin-inline: auto;
  max-width: 240px;
  width: 100%;
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step.steps__step--result
  div.result__text {
  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 */
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step.steps__step--result
  svg {
  display: flex;
  width: var(--scale-64, 64px);
  height: 64px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1/1;
  margin-right: 0;
  margin-left: 0;
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--voicetep {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--voicetep
  div.steps__step.steps__step--title {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--voicetep
  div.steps__step.steps__step--title
  img {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--voicetep
  div.bar {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--voicetep
  div.steps__step {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps
  div.steps__step
  div.main-text {
  justify-content: center;
  align-items: center;
  gap: 8px;
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--voicetep
  div.steps__step
  div.sub-text {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--voicetep
  div.steps__step.steps__step--result {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--voicetep
  div.steps__step.steps__step--result
  div.result__text {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--others {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--others
  div.steps__step.steps__step--title {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--others
  div.bar {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--others
  div.steps__step {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--others
  div.steps__step
  div.main-text {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--others
  div.steps__step
  div.sub-text.highlight {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--others
  div.steps__step.steps__step--result {
}
section#flow
  div.flow__container
  div.flow__body
  div.body__steps.body__steps--others
  div.steps__step.steps__step--result
  div.result__text {
}
section#flow div.flow__container div.flow__who {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--scale-20, 20px);
  align-self: stretch;
  width: 100%;
  margin-top: var(--scale-20);
}
section#flow div.flow__container div.flow__who div.who__peoples.who__peoples {
  flex: 1 0 0;
  display: flex;
  padding: var(--scale-16, 16px);
  flex-direction: column;
  align-items: center;
  gap: var(--scale-8, 8px);
  align-self: stretch;
  border-radius: var(--scale-8, 8px);
  border: var(--scale-4, 4px) solid var(--border, #c5b2b2);
  background: #fff;
}
section#flow
  div.flow__container
  div.flow__who
  div.who__peoples.who__peoples--voicetep {
  border: var(--scale-4, 4px) solid var(--primary, #c37e81);
}
section#flow div.flow__container div.flow__who div.who__peoples h3 {
  color: var(--primary, #c37e81);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 30px */
}
section#flow
  div.flow__container
  div.flow__who
  div.who__peoples
  div.peoples__people {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--scale-8, 8px);
}
section#flow
  div.flow__container
  div.flow__who
  div.who__peoples
  div.peoples__people
  p {
  color: var(--on-surface, #4d4848);
  font-family: "Noto Sans JP";
  font-size: var(--scale-16, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 20.8px */
  position: relative;
  padding-left: 1em;
}
section#flow
  div.flow__container
  div.flow__who
  div.who__peoples
  div.peoples__people
  p
  span.circle {
  left: 0;
  top: 0.4em;
  position: absolute;
  width: 0.5em;
  aspect-ratio: 1/1;
  border: 2px solid var(--primary);
  border-radius: 1000px;
}
section#flow
  div.flow__container
  div.flow__who
  div.who__peoples.who__peoples--others {
}
section#flow
  div.flow__container
  div.flow__who
  div.who__peoples.who__peoples--others
  h3 {
}
section#flow
  div.flow__container
  div.flow__who
  div.who__peoples.who__peoples--others
  div.peoples__people {
}
section#flow
  div.flow__container
  div.flow__who
  div.who__peoples.who__peoples--others
  div.peoples__people
  p {
}