@charset "UTF-8";
/**
 * フロー
 * Emmet: .bl_flow>.bl_flow_item>em.bl_flow_item_num+h3.bl_flow_item_ttl+.bl_flow_item_txt>(p.bl_flow_item_subTtl>strong)+p
 * https://modules.ccc-labo.net/module/
 *
 * 変数
 * --flow--item--num--fz: 数字のフォントサイズ
 * --flow--item--p: 各フローの余白
 * --flow--item--bgc: 
 * --flow--item--bgc--prev: 
 * --flow--item--arrow--top: 
 * --flow--item--num--bd: 
 */
.bl_flow {
  --flow--item--num--fz: 2rem;
  padding-inline-start: var(--flow--item--num--fz);
  padding-block-start: var(--flow--item--num--fz);
  display: flex;
  gap: 3px;
  overflow-x: auto;
}

.bl_flow > * {
  flex: 1;
}

.bl_flow:where(ol, li) {
  list-style: none;
}

.bl_flow_item {
  position: relative;
  z-index: 1;
  padding: var(--flow--item--p, 1em 1.5em);
  background-color: var(--flow--item--bgc, #ccc);
}

.bl_flow_item::before,
.bl_flow_item::after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 0px;
  height: 0px;
  border-left: 1.25em currentcolor solid;
  border-top: 1.25em transparent solid;
  border-bottom: 1.25em transparent solid;
  top: var(--flow--item--arrow--top, 3em);
}

.bl_flow_item::before {
  left: 0;
  color: #fff;
}

.bl_flow_item::after {
  left: -4px;
  color: var(--flow--item--bgc--prev, #ccc);
  z-index: 1;
}

.bl_flow_item:nth-of-type(1)::before,
.bl_flow_item:nth-of-type(1)::after {
  content: none;
}

.bl_flow_item_num {
  --num--size: 2em;
  position: absolute;
  top: calc(var(--num--size) * -0.5);
  left: calc(var(--num--size) * -0.5);
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--num--size);
  height: var(--num--size);
  color: var(--flow--item--bgc, #ccc);
  font-size: var(--flow--item--num--fz);
  font-family: ui-rounded;
  font-weight: 900;
  font-style: normal;
  text-decoration: none;
  overflow: hidden;
  background-color: #fff;
  border-color: currentcolor;
  border-style: solid;
  border-width: var(--flow--item--num--bd, 3px);
  border-radius: var(--num--size);
}

.bl_flow_item_ttl {
  margin-block: 1em 0.5em;
  background-color: #fff;
  padding: 0.25em 0.5em;
}

.bl_flow_item_subTtl {
  border-bottom: 2px currentcolor solid;
}

.bl_flow_item_txt p {
  margin-block: 0.75em;
}

.bl_flow_item_txt :last-child {
  margin-block-end: 0;
}

@media (max-width: 40em) {
  .bl_flow {
    flex-direction: column;
  }
  .bl_flow_item::before,
.bl_flow_item::after {
    left: 0;
    right: 0;
    top: 0;
    margin-inline: auto;
    border-top: 1.25em currentcolor solid;
    border-left: 1.25em transparent solid;
    border-right: 1.25em transparent solid;
    border-bottom: 0 none;
  }
  .bl_flow_item::after {
    top: -4px;
  }
}