* {
  box-sizing: border-box;
}

ul {
  padding: 0;
}

.wp-block-my-blocks-p-step-item {
  list-style-type: none;
}

dd {
  margin-left: 0;
}

.flow.p-step-block {
  padding-left: 120px;
  position: relative;
}

.flow.p-step-block::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -8px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
}

.flow.p-step-block > li {
  position: relative;
}

.flow.p-step-block > li:not(:last-child) {
  margin-bottom: 8vh;
}

.flow.p-step-block > li .icon {
  font-size: 12px;
  color: #fff;
  padding: 8px 20px;
  display: block;
  position: absolute;
  top: 0;
  left: -120px;
  z-index: 100;
}

.flow.p-step-block > li .icon::after {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent var(--arrow-color, #66d5e9);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}

.flow.p-step-block > li dl {
  padding-left: 70px;
  position: relative;
}

.flow.p-step-block > li dl::before,
.flow.p-step-block > li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}

.flow.p-step-block > li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #6b90db;
  border-radius: 50%;
  left: -4px;
}

.flow.p-step-block > li dl::after {
  width: 50px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}

.flow.p-step-block > li dl dt {
  font-size: 20px;
  font-weight: 600;
  color: rgb(107,144,219);
  margin-bottom: 1vh;
}

/* エディタ用スタイル */
.block-editor-block-list__layout .p-step-block {
  padding-left: 120px;
  position: relative;
}

.block-editor-block-list__layout .p-step-block::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -8px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
}

.block-editor-block-list__layout .p-step-item {
  position: relative;
  margin-bottom: 8vh;
  list-style: none;
}

.block-editor-block-list__layout .p-step-item .icon {
  font-size: 12px;
  color: #fff;
  padding: 8px 20px;
  display: block;
  position: absolute;
  top: 0;
  left: -120px;
  z-index: 100;
}

.block-editor-block-list__layout .p-step-item .icon::after {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent var(--arrow-color, #66d5e9);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}

.block-editor-block-list__layout .p-step-item dl {
  padding-left: 70px;
  position: relative;
}

.block-editor-block-list__layout .p-step-item dl::before,
.block-editor-block-list__layout .p-step-item dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}

.block-editor-block-list__layout .p-step-item dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #6b90db;
  border-radius: 50%;
  left: -4px;
}

.block-editor-block-list__layout .p-step-item dl::after {
  width: 50px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}

.block-editor-block-list__layout .p-step-item dl dt {
  font-size: 20px;
  font-weight: 600;
  color: rgb(107,144,219);
  margin-bottom: 1vh;
}

.block-editor-block-list__layout .p-step-item dl dd {
  font-size: initial !important;
}