@charset "UTF-8";

/* ---------- 1. FLOW title ---------- */
#chart_title + section {
  background: #efe9e1 !important;
  padding: 60px 20px 50px !important;
  text-align: center;
}
#chart_title + section h2.h {
  font-size: 60px;
  font-weight: 900;
  color: #d6272c;
  letter-spacing: 6px;
  line-height: 1;
  margin: 0 0 24px;
}
#chart_title + section .heading p {
  font-size: 16px;
  line-height: 1.9;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

/* ---------- 2. Full-width flow section ---------- */
#chart_list + div {
  background: #efe9e1 !important;
  padding: 20px 0 60px !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}
#chart_list + div .content_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 60px !important;
  box-sizing: border-box;
  overflow: visible !important;
}

/* This is what centers the whole diagram on desktop: the block
   is capped at 660px and centered, instead of stretching edge
   to edge across the page. On phones the viewport is already
   narrower than 660px so this has no effect -- sp is untouched. */
#chart_list + div .wrapper_item {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  padding-top: 14px;
  overflow: visible;
}

/* ---------- 3. Each step row -- same flex technique everywhere ---------- */
#chart_list + div .inner_item {
  display: flex;
  align-items: center;
  gap: 10px;                  /* was 18px -- icon and text pulled in even closer */
  width: 100%;
  position: relative;
  padding-bottom: 60px;
  overflow: visible;
}
#chart_list + div .inner_item:last-child {
  padding-bottom: 0;
}

/* Icon column: fixed pixel width, not a percentage -- this is
   what keeps it a sane, consistent size instead of shrinking to
   nothing or blowing up. */
#chart_list + div .inner_item > a {
  flex: 0 0 170px !important;   /* was 130px -- bigger icon column again */
  max-width: 170px !important;
  width: 170px !important;
}

/* Text column: just takes whatever space is left. Since the row
   itself is capped at 660px total, this never gets excessively
   wide. */
#chart_list + div .inner_item_txt {
  flex: 1 1 auto;
  text-align: left;
}

/* ---------- 4. Icon circle -- always a perfect circle ---------- */
#chart_list + div .inner_item_img {
  position: relative;
  overflow: visible;
  width: 170px;                 /* was 130px -- bigger icon again */
  max-width: 100%;
  aspect-ratio: 1 / 1;       /* height always matches width -- never squashes into an oval */
  margin: 0 auto;
}

#chart_list + div .flow-icon-crop {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 6px solid #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
#chart_list + div .flow-icon-crop img {
  max-width: 60% !important;
  height: auto !important;
  object-fit: contain;
  box-sizing: border-box;
  border-radius: 0;
}

/* number badge -- fixed top-left spot on every circle, text set by JS */
#chart_list + div .flow-step-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* ---------- 5. Text block ---------- */
#chart_list + div .inner_item_txt h3.h {
  font-size: 20px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 10px;
}
#chart_list + div .inner_item_txt p {
  font-size: 14px;
  line-height: 1.85;
  color: #333;
  margin: 0;
}

/* ---------- 6. Arrow -- pinned under the icon column ----------
   Same fixed width as the icon column above, so text-align:center
   inside it always lands exactly under the icon -- no drift. */
#chart_list + div .flow-arrow {
  position: absolute;
  left: 0;
  width: 170px;                 /* matches new icon column width */
  text-align: center;
  bottom: 4px;
  font-size: 30px;
  font-weight: 900;
  color: #d6272c;
  line-height: 1;
}


.composite_box01.block_images_22 .inner_item_txt, .composite_box01.block_images_23 .inner_item_txt, .composite_box01.block_images_24 .inner_item_txt {
    max-width: 100%;
}


/* ---------- 7. Responsive: 600px -- small phones (unchanged, this is the "sp" version you liked) ---------- */
@media (max-width: 600px) {
  #chart_title + section h2.h { font-size: 40px; letter-spacing: 3px; }

  #chart_list + div .content_wrapper { padding: 0 16px !important; }

  #chart_list + div .inner_item {
    gap: 10px;                   /* was 10px -- pulled in tighter on mobile too */
    padding-bottom: 50px;
  }
  #chart_list + div .inner_item > a {
    flex: 0 0 110px !important; /* was 90px -- bigger icon column on mobile */
    max-width: 110px !important;
    width: 110px !important;
  }
  #chart_list + div .inner_item_txt {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
  }
  #chart_list + div .inner_item_img {
    width: 110px;               /* was 90px */
  }
  #chart_list + div .flow-icon-crop img { padding: 8px; } /* was 10px -- less padding so the icon graphic fills the bigger circle */
  #chart_list + div .flow-step-badge {
    width: 40px;                /* was 34px -- larger badge on mobile too */
    height: 40px;
    font-size: 14px;            /* was 12px */
    top: -6px;
    left: -6px;
  }
  #chart_list + div .flow-arrow {
    width: 110px !important;    /* matches new mobile icon column */
    font-size: 26px;
  }
  #chart_list + div .inner_item_txt h3.h { font-size: 16px; }
  #chart_list + div .inner_item_txt p { font-size: 13px; }
}


@media screen and (max-width: 768px) {

 .composite_box01.block_images_22 .inner_item_img img, .composite_box01.block_images_23 .inner_item_img img, .composite_box01.block_images_24 .inner_item_img img {
    margin-bottom: 0px;
}
}