/* 計画書1890番：4.0 のブロック（フロー・続きを読む・概要（自由作成））の見た目。
   正本 mira（mira.good-up.co.jp/utsuwa-mira）の parts/css/loaded-style.css・editor-style.css から、このテーマの CSS（loaded-style.css・style.css・editor-style.css）に無いセレクタの規則だけを切り出した物。
   桃色の直書き #F27689 → このサイトのベース色 #54c3f1（出典＝dev/theme40-work/color_state_2026-10-28.tsv の「③ベース色」）。
   生成＝dev/1890-work/step1/20_build_parts.py（手で直さない＝直すなら正本の CSS を直して作り直す） */

.post-body .flow-block,
body.mceContentBody .flow-block,
.editor-styles-wrapper .flow-block {
  margin-top: 30px;
}
@media all and (min-width: 641px) {
  .post-body .flow-block,
  body.mceContentBody .flow-block,
  .editor-styles-wrapper .flow-block {
    margin-top: 40px;
  }
}
.post-body .flow-block:first-child,
body.mceContentBody .flow-block:first-child,
.editor-styles-wrapper .flow-block:first-child {
  margin-top: 0;
}
.post-body .readmore-toggle {
  display: block;
  width: fit-content;
  background-color: #54c3f1;
  border: none;
  padding: 0.5em 1.5em;
  color: #fff;
  border-radius: 30px;
  margin-inline: auto;
  text-indent: 1em;
  margin-top: 1em;
  outline: none;
}
.flow-block {
  display: flex;
  flex-direction: column;
  gap: 60px;
  counter-reset: step;
}
.flow-block .flow-item {
  counter-increment: step;
  border: 1px solid #ddd;
  padding: clamp(15px, 3vw, 30px);
  padding-top: clamp(25px, 5vw, 30px);
  position: relative;
  border-radius: 6px;
}
.flow-block .flow-item p,
.flow-block .flow-item ul,
.flow-block .flow-item ol {
  line-height: 1.8 !important;
}
.flow-block .flow-item p:not(:first-child),
.flow-block .flow-item ul:not(:first-child),
.flow-block .flow-item ol:not(:first-child) {
  margin-top: 0.5em;
}
.flow-block .flow-item p li,
.flow-block .flow-item ul li,
.flow-block .flow-item ol li {
  line-height: 1.8 !important;
}
.flow-block .flow-item p li:not(:first-child),
.flow-block .flow-item ul li:not(:first-child),
.flow-block .flow-item ol li:not(:first-child) {
  margin-top: 0.2em;
}
.flow-block .flow-item .flow-heading {
  color: #54c3f1;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4 !important;
}
.flow-block .flow-item .flow-heading:not(:first-child) {
  margin-top: 1em;
}
.flow-block .flow-item .flow-heading:empty {
  display: none;
}
.flow-block .flow-item:not(:last-child)::after {
  content: "";
  width: 60px;
  height: 20px;
  background-color: #54c3f1;
  clip-path: polygon(50% 20px, 0% 0%, 60px 0%);
  position: absolute;
  top: calc(100% + 20px);
  left: calc(50% - 30px);
}
.flow-block .flow-item::before {
  width: fit-content;
  line-height: 1;
  padding: 0.5em 1em;
  content: var(--flow-label) " " counter(step, decimal-leading-zero);
  font-weight: bold;
  color: #fff;
  border-radius: 5px;
  background-color: #54c3f1;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.4rem;
  transform: translate(-5px, -50%);
}
.editor-styles-wrapper .readmore-content {
  border: 2px dotted #ccc;
  padding: 15px;
  position: relative;
}
.editor-styles-wrapper .readmore-content::after {
  display: inline-block;
  content: "折りたたむ本文エリア";
  background-color: #ccc;
  font-size: 12px;
  line-height: 1;
  padding: 0.5em;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
}
.readmore-toggle {
  display: block;
  width: fit-content;
  background-color: #54c3f1;
  border: none;
  padding: 0.5em 1.5em;
  color: #fff;
  border-radius: 30px;
  margin-inline: auto;
  text-indent: 1em;
  margin-top: 1em;
  outline: none;
}
.editor-styles-wrapper .wp-block-acf-flow {
  border: 2px dotted #ddd;
  padding-inline: 1em;
  padding-top: 1.5em;
}
.editor-styles-wrapper .wp-block-acf-flow p,
.editor-styles-wrapper .wp-block-acf-flow figure,
.editor-styles-wrapper .wp-block-acf-flow figcaption {
  margin-top: 0;
  line-height: 1.6;
}
.editor-styles-wrapper .wp-block-acf-flow::before {
  display: inline-block;
  content: "フローグループ";
  background-color: #ccc;
  font-size: 12px;
  line-height: 1;
  padding: 0.5em;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
}
.editor-styles-wrapper .wp-block-acf-flow .wp-block-acf-flow-item {
  margin-top: 0;
}
.editor-styles-wrapper .wp-block-acf-flow .wp-block-acf-flow-item:not(:last-child) {
  position: relative;
  margin-bottom: 60px;
}
.editor-styles-wrapper .wp-block-acf-flow .wp-block-acf-flow-item:not(:last-child)::after {
  content: "";
  width: 60px;
  height: 20px;
  background-color: #54c3f1;
  clip-path: polygon(50% 20px, 0% 0%, 60px 0%);
  position: absolute;
  top: calc(100% + 20px);
  left: calc(50% - 30px);
}
div[data-type="my-project/flow-heading"] {
  margin: 0;
}
div[data-type="my-project/flow-heading"]:not(:first-child) {
  margin-top: 1em;
}