@import url("./page-common.css");

.p-vn-target-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Figma: TARGET cards are 184px tall (top padding-bottom 24px, not the shared compact 28px) */
.p-vn-target-grid .p-challenge-card--compact .p-challenge-card__top {
  padding-bottom: 24px;
}

/* ===== STRENGTHS cards (Figma: white cards, rounded bl/tr 20px) ===== */
.p-vn__feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.p-vn__feature-card {
  background-color: var(--color-bg);
  border-radius: 0 20px 0 20px;
  padding: 16px 20px 28px;
}

.p-vn__feature-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--color-accent);
  margin-bottom: 7px;
}

.p-vn__feature-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 3px;
  line-height: 28px;
  min-height: 67px; /* Figma: title area = 2 lines (26px x2) + 14px pad + 1px border, keeps dividers aligned */
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-primary);
  margin-bottom: 14px;
}

/* Figma: cards 02/03 titles use 7px tracking (card 01 stays 3px) */
.p-vn__feature-title--wide {
  letter-spacing: 7px;
}

/* Figma は ls 1px。+2px した本文がカンプの3行組みに収まるよう字間で吸収している */
.p-vn__feature-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0;
  line-height: 26px;
}

/* ===== SERVICE MENU section (Figma: bg #f0f2f1, photo with green offset frame) ===== */
.p-vn__services {
  background-color: var(--color-bg-card);
  /* Figma: 120px top, 56px bottom (section 1464px, content ends 1407) */
  padding-top: 120px;
  padding-bottom: 56px;
}

/* ===== 具体的な支援実績 (Figma S04_case_studies / case-study-v2) ===== */
.p-vn__case {
  padding-block: 60px;
}

.p-vn__case-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  margin-bottom: 24px;
}

.p-vn__case-note {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 24px;
}

/* Figma 1000px をコンテンツ拡大比 1.176 倍に合わせている */
.p-vn__case-card {
  max-width: 1176px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 3px 18px rgba(23, 51, 38, 0.08);
  padding: 20px 40px;
}

.p-vn__case-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 50px;
  border-bottom: 1px solid var(--color-primary);
}

.p-vn__case-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 25px;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
}

.p-vn__case-card__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 1px;
}

.p-vn__case-block__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.45px;
}

.p-vn__case-block__label img {
  display: block;
  flex-shrink: 0;
}

.p-vn__case-consult {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 20px 0;
}

.p-vn__case-consult__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: var(--color-text);
}

.p-vn__case-flow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
}

.p-vn__case-flow__steps {
  display: flex;
  align-items: stretch;
  gap: 3px;
}

.p-vn__case-flow__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(23, 51, 38, 0.06);
  padding: 16px 12px;
}

.p-vn__case-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.p-vn__case-flow__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0.96px;
  color: var(--color-text);
  text-align: center;
}

.p-vn__case-flow__text strong {
  color: var(--color-accent);
  font-weight: 700;
}

.p-vn__case-flow__arrow {
  align-self: center;
  color: var(--color-primary);
  font-size: 16px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .p-vn__case-card {
    padding: 20px;
  }

  .p-vn__case-flow {
    padding-left: 0;
  }

  .p-vn__case-flow__steps {
    flex-direction: column;
    align-items: stretch;
  }

  .p-vn__case-flow__arrow {
    transform: rotate(90deg);
  }
}

.p-vn__services-intro {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 30px;
}

.p-vn__services-intro .c-section-label {
  margin-bottom: 7px;
}

.p-vn__services-intro__title {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 7px;
  margin-bottom: 40px;
}

/* Figma 484px をコンテンツ拡大比 1.176 倍に合わせている */
.p-vn__services-intro__text {
  max-width: 569px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.16px;
  line-height: 32px;
}

/* Photo sits on a green rectangle offset down-right */
/* Figma 465px をコンテンツ拡大比 1.176 倍に合わせている
   （据え置くとテキストとの間に 250px 超の空白ができる） */
.p-vn__services-intro__visual {
  position: relative;
  flex-shrink: 0;
  width: 547px;
  margin: 0 18px 12px 0;
}

.p-vn__services-intro__visual::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 18px;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  z-index: 0;
}

/* Figma 196px も同じ 1.176 倍。幅だけ広げると cover のトリミングが
   カンプより上下に食い込むため、高さも合わせて拡大する */
.p-vn__services-intro__visual img {
  position: relative;
  display: block;
  width: 100%;
  height: 231px;
  object-fit: cover;
  z-index: 1;
}

/* ===== Menu frame (Figma: corner brackets around 5 cards) ===== */
.p-vn__menu-frame {
  position: relative;
  padding: 30px 24px 34px;
}

.p-vn__menu-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 154px;
  height: 122px;
  border-top: 1px solid var(--color-primary);
  border-left: 1px solid var(--color-primary);
  pointer-events: none;
}

.p-vn__menu-frame::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 132px;
  height: 129px;
  border-bottom: 1px solid var(--color-primary);
  border-right: 1px solid var(--color-primary);
  pointer-events: none;
}

.p-vn__menu-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 28px;
}

.p-vn__menu-heading__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.p-vn__menu-heading__icon img {
  display: block;
}

.p-vn__menu-heading__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 2px;
}

/* 本文が+2pxされたぶん、列間を詰めてカード幅を稼いでいる（Figma は 20px） */
.p-vn__menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.p-vn__menu-grid--row2 {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0;
}

/* 本文が+2pxされたぶん、Figma の左右20pxを詰めて文字を収めている */
.p-vn__menu-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-bg);
  border-radius: 8px;
  padding: 20px 12px;
  text-align: center;
}

.p-vn__menu-card__num {
  font-size: 52px;
  font-weight: 700;
  color: var(--color-bg-card);
  line-height: 1;
  margin-bottom: -30px;
}

.p-vn__menu-card__title {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
  line-height: 24px;
}

.p-vn__menu-card__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 21px;
}

/* ===== Timeline box (Figma: white rounded 16px, shadow) ===== */
.p-vn__timeline-box {
  background-color: var(--color-bg);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(21, 40, 30, 0.08);
  padding: 30px;
  margin-top: 30px;
}

.p-vn__timeline-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.p-vn__timeline-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.p-vn__timeline-header__icon img {
  display: block;
}

.p-vn__timeline-header__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 2px;
}

.p-vn__timeline-note {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.39px;
  line-height: 24px;
  margin-bottom: 20px;
}

.p-vn__timeline-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 33px;
  margin-bottom: 18px;
  border: 1px solid var(--color-accent);
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--color-accent);
}

.p-vn__timeline-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
  margin-bottom: 32px;
}

/* Horizontal line through the step circles */
.p-vn__timeline-steps::before {
  content: "";
  position: absolute;
  top: 67px;
  left: 10%;
  right: 10%;
  height: 1px;
  background-color: var(--color-primary);
}

.p-vn__timeline-steps > div {
  position: relative;
}

/* Figma: › chevron separators sit on the connector line, centered between the step circles */
.p-vn__timeline-steps > div:not(:last-child)::after {
  content: "›";
  position: absolute;
  top: 67px;
  right: -5px;
  transform: translate(50%, -50%);
  font-size: 16px;
  line-height: 1;
  color: var(--color-primary);
  pointer-events: none;
}

.p-vn__timeline-step__duration {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.55px;
  margin-bottom: 29px;
}

.p-vn__timeline-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.p-vn__timeline-step__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 22px;
}

.p-vn__phase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  /* Figma: cards hug their own content height (PHASE 01 is shorter), not stretched */
  align-items: start;
}

.p-vn__phase-card {
  background-color: var(--color-bg-card);
  border-radius: 10px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.p-vn__phase-card__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36px;
  color: var(--color-accent);
}

.p-vn__phase-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 22px;
}

.p-vn__phase-card__list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.p-vn__phase-card__list li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-primary);
  flex-shrink: 0;
}

.p-vn__timeline-footnote {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.3px;
  text-align: right;
  opacity: 0.7;
}

@media (max-width: 1200px) {
  .p-vn__services-intro {
    flex-direction: column;
  }

  .p-vn__services-intro__visual {
    width: 100%;
    max-width: 547px;
  }
}

@media (max-width: 1024px) {
  .p-vn-target-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-vn__feature-grid,
  .p-vn__menu-grid,
  .p-vn__timeline-steps,
  .p-vn__phase-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-vn__timeline-steps::before,
  .p-vn__timeline-steps > div::after {
    display: none;
  }
}

/* ===== SP: schedule vertical timeline parts ===== */
.p-vn__sp-timeline .p-tl__item {
  gap: 14px;
}

.p-vn__sp-timeline .p-tl__num {
  width: 30px;
  height: 30px;
}

.p-vn__sp-timeline .p-tl__title {
  font-size: 17px;
}

.p-vn__sp-phase {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.p-vn__sp-phase__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
}

@media (max-width: 768px) {
  /* Figma SP 5:10082 */
  .p-hero__inner {
    padding-bottom: 30px;
  }

  .p-hero__label {
    line-height: 21px;
  }

  /* Figma 5:10091 は枠(342)より広い360pxで1行のままだが、
     文字を+2pxすると末尾が画面外に切れるため折り返しを許可して2行に分ける */
  .p-hero__subtitle {
    white-space: normal;
  }

  .p-vn-target-grid,
  .p-vn__feature-grid,
  .p-vn__menu-grid,
  .p-vn__menu-grid--row2 {
    grid-template-columns: 1fr;
  }

  /* --- TARGET cards (Figma 5:10097): 枠 342×156 に 1px の内側線。
     上下パディング 28 から線の分を引いて 27 にする --- */
  .p-vn-target-grid .p-challenge-card--compact .p-challenge-card__top {
    padding: 27px 19px;
  }

  /* Figma はカード内の改行位置を PC と変えるため、u-pc / u-sp で出し分ける */
  .p-vn-target-grid .p-challenge-card__title br {
    display: inline;
  }

  .p-vn-target-grid .p-challenge-card__title {
    width: 280px;
    font-size: 18px;
    line-height: 26px;
  }

  /* --- STRENGTHS cards --- */
  /* Figma 5:10113: 13px / 行送りは Auto（枠は1行 16px） */
  .p-section__lead {
    line-height: 18px;
  }

  .p-vn__feature-grid {
    gap: 20px;
    margin-top: 20px;
  }

  .p-vn__feature-card {
    border-radius: 4px;
    padding: 24px 20px;
  }

  .p-vn__feature-label {
    font-size: 13px;
    letter-spacing: normal;
    line-height: 15px;
    margin-bottom: 10px;
  }

  .p-vn__feature-title,
  .p-vn__feature-title--wide {
    min-height: 0;
    font-size: 20px;
    letter-spacing: normal;
    line-height: 28px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .p-vn__feature-text {
    font-size: 15px;
    letter-spacing: normal;
    line-height: 24px;
  }

  .p-vn__feature-text br:not(.u-sp),
  .p-vn__feature-title br:not(.u-sp) {
    display: none;
  }

  /* --- SERVICE MENU section (SP: header, photo, text stacked) --- */
  .p-vn__services {
    padding-block: 56px 40px;
  }

  .p-vn__services-intro {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
  }

  .p-vn__services-intro > div:first-child {
    display: contents;
  }

  /* Figma 5:10130: ラベルと見出しは左そろえのまま、ブロックごと中央に置く */
  .p-vn__services-intro__head {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    width: fit-content;
    margin-inline: auto;
  }

  .p-vn__services-intro .c-section-label {
    text-align: left;
    margin-bottom: 0;
  }

  .p-vn__services-intro__title {
    font-size: 26px;
    letter-spacing: normal;
    line-height: 36px;
    margin-bottom: 0;
  }

  .p-vn__services-intro__visual {
    order: 2;
    max-width: none;
    margin: 0;
  }

  .p-vn__services-intro__visual::after {
    display: none;
  }

  .p-vn__services-intro__visual img {
    height: auto;
    aspect-ratio: 342 / 180;
    border-radius: 4px;
  }

  .p-vn__services-intro__text {
    order: 3;
    max-width: none;
    font-size: 16px;
    letter-spacing: normal;
    line-height: 27px;
  }

  /* --- Menu frame (SP: green left border) ---
     Figma 5:10135 の 3px の線はレイアウトに影響しないので、左だけ線の分を引く */
  .p-vn__menu-frame {
    padding: 24px 20px 24px 17px;
    border-left: 3px solid var(--color-primary);
  }

  .p-vn__menu-frame::before,
  .p-vn__menu-frame::after {
    display: none;
  }

  .p-vn__menu-heading {
    gap: 10px;
    margin-bottom: 20px;
  }

  .p-vn__menu-heading__icon {
    border: none;
    background-color: var(--color-bg-alt);
  }

  .p-vn__menu-heading__title {
    font-size: 20px;
    letter-spacing: normal;
    line-height: 28px;
  }

  /* Figma 5:10142: 50px の数字は枠 60px、見出しは 30px の枠に上そろえ */
  .p-vn__menu-card__num {
    line-height: 62px;
  }

  /* 文字を+2pxした分、1行なら32px・2行なら伸びるように下限だけ持たせる */
  .p-vn__menu-card__title {
    min-height: 32px;
  }

  .p-vn__menu-grid,
  .p-vn__menu-grid--row2 {
    gap: 20px;
    margin-bottom: 20px;
  }

  .p-vn__menu-grid--row2 {
    margin-bottom: 0;
  }

  /* --- Schedule box (SP: beige card + vertical timeline) --- */
  .p-vn__timeline-box {
    background-color: var(--color-bg-alt);
    border-radius: 4px;
    box-shadow: none;
    padding: 24px 20px;
    margin-top: 20px;
  }

  .p-vn__timeline-header {
    gap: 10px;
    margin-bottom: 20px;
  }

  .p-vn__timeline-header__icon {
    border: none;
    background-color: #ffffff;
  }

  .p-vn__timeline-header__title {
    font-size: 20px;
    letter-spacing: normal;
    line-height: 28px;
  }

  .p-vn__timeline-note {
    line-height: 21px;
  }

  /* Figma 5:10173: 枠 298×36。線は内側1pxなので上下パディングは 10-1 */
  .p-vn__timeline-badge {
    width: 100%;
    max-width: 298px;
    height: auto;
    padding: 9px 16px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 18px;
    margin-bottom: 20px;
  }

  .p-vn__timeline-steps,
  .p-vn__phase-grid {
    display: none;
  }

  /* --- SP schedule timeline (Figma 5:10175) --- */
  .p-vn__sp-timeline .p-tl__period {
    line-height: 15px;
  }

  .p-vn__sp-timeline .p-tl__title {
    line-height: 24px;
  }

  .p-vn__sp-timeline .p-tl__item:last-child .p-tl__body {
    padding-bottom: 0;
  }

  .p-vn__sp-phase {
    line-height: 16px;
  }

  .p-vn__sp-phase__label {
    line-height: 14px;
  }

  .p-vn__timeline-footnote {
    margin-top: 20px;
    font-size: 13px;
    color: #808080;
    letter-spacing: normal;
    line-height: 18px;
    text-align: left;
    opacity: 1;
  }

  /* --- CASE STUDIES --- */
  /* Figma 5:10235: 最終ステップの下端がカード枠の下端（セクション内 1074px） */
  .p-vn__case {
    padding-block: 56px 53px;
  }

  .p-vn__case-head {
    margin-bottom: 20px;
  }

  .p-vn__case-note {
    font-size: 14px;
    line-height: 19px;
    margin-bottom: 20px;
  }

  .p-vn__case-card {
    gap: 20px;
    border-radius: 8px;
    box-shadow: none;
    padding: 24px 20px 0;
  }

  .p-vn__case-card__header {
    height: auto;
    gap: 10px;
    padding-bottom: 20px;
  }

  .p-vn__case-card__badge {
    width: auto;
    height: auto;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 15px;
  }

  .p-vn__case-card__title {
    width: 200px;
    font-size: 18px;
    letter-spacing: normal;
    line-height: 25px;
  }

  .p-vn__case-consult {
    gap: 8px;
    padding: 0;
  }

  .p-vn__case-block__label {
    gap: 8px;
    font-size: 16px;
    letter-spacing: normal;
    line-height: 19px;
  }

  .p-vn__case-block__label img {
    width: 18px;
    height: 18px;
  }

  /* Figma 5:10257: 「ご支援の流れ」側だけアイコンが 16px */
  .p-vn__case-flow .p-vn__case-block__label img {
    width: 16px;
    height: 16px;
  }

  .p-vn__case-consult__text {
    font-size: 15px;
    line-height: 24px;
  }

  .p-vn__case-flow {
    gap: 12px;
    padding-left: 0;
  }

  /* Figma 5:10260: ステップ枠は上に 23px の余白を持つ */
  .p-vn__case-flow__steps {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding-top: 23px;
  }

  /* Figma 5:10261 ほか: カード高さは内容より大きい固定値。
     01 だけパディングなしで中身が上下中央、02〜04 は 16px の上そろえ */
  .p-vn__case-flow__step {
    flex: none;
    padding: 16px 12px;
  }

  .p-vn__case-flow__step:nth-of-type(1) {
    height: 146px;
    justify-content: center;
    padding: 0 16px;
  }

  .p-vn__case-flow__num {
    width: auto;
    min-width: 28px;
    padding-inline: 5px;
  }

  .p-vn__case-flow__step:nth-of-type(1) .p-vn__case-flow__text {
    height: 84px;
  }

  .p-vn__case-flow__step:nth-of-type(2),
  .p-vn__case-flow__step:nth-of-type(3) {
    height: 145px;
  }

  .p-vn__case-flow__step:nth-of-type(4) {
    height: 143px;
  }

  /* Figma 5:10269: 矢印の枠は 17×5 で、字形は枠からはみ出す */
  .p-vn__case-flow__arrow {
    height: 5px;
    line-height: 7px;
    transform: rotate(90deg);
  }
}