.d-hp.d-hp--flow .d-flow-shell { width: min(100% - 96px, 900px); margin-inline: auto; }
.d-hp.d-hp--flow .d-flow-hero { display: grid; min-height: 620px; grid-template-columns: 7fr 5fr; background: var(--dhp-paper); }
.d-hp.d-hp--flow .d-flow-hero__copy { position: relative; z-index: 1; padding: 104px max(54px, calc((100vw - 1344px) / 2)); color: var(--dhp-white); background: var(--dhp-blue); clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%); }
.d-hp.d-hp--flow .d-flow-hero > img { width: 100%; height: 100%; min-height: 620px; object-fit: cover; object-position: 50% 50%; }
.d-hp.d-hp--flow .d-flow-label,
.d-hp.d-hp--flow .d-flow-chapter header p { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: .16em; }
.d-hp.d-hp--flow .d-flow-hero h1 { margin: 58px 0 40px; font-size: clamp(50px, 4.3vw, 68px); line-height: 1.28; letter-spacing: -.055em; }
.d-hp.d-hp--flow .d-flow-hero h1 span,
.d-hp.d-hp--flow .d-flow-contact h2 span { display: block; }
.d-hp.d-hp--flow .d-flow-hero__copy > p:not(.d-flow-label) { max-width: 610px; margin: 0 0 20px; font-size: 17px; font-weight: 700; line-height: 1.9; }

.d-hp.d-hp--flow .d-flow-chapter { padding: 112px 0 124px; }
.d-hp.d-hp--flow .d-flow-chapter--talk { background: var(--dhp-paper); }
.d-hp.d-hp--flow .d-flow-chapter--make { color: var(--dhp-white); background: var(--dhp-ink); }
.d-hp.d-hp--flow .d-flow-chapter--grow { color: var(--dhp-white); background: var(--dhp-green); }
.d-hp.d-hp--flow .d-flow-chapter header h2 { margin: 26px 0 0; font-size: 44px; line-height: 1.35; letter-spacing: -.04em; }
.d-hp.d-hp--flow .d-flow-chapter header h2::after { display: block; width: 205px; height: 7px; margin-top: 14px; content: ""; background: currentColor; border-radius: 50%; transform: rotate(1deg); }
.d-hp.d-hp--flow .d-flow-notice { display: grid; margin: 58px 0 36px; padding: 25px 30px; color: var(--dhp-ink); background: var(--dhp-white); border-left: 8px solid var(--dhp-orange); gap: 7px; font-size: 14px; line-height: 1.7; }
.d-hp.d-hp--flow .d-flow-steps { position: relative; margin: 66px 0 0; padding: 0; list-style: none; }
.d-hp.d-hp--flow .d-flow-steps::before { position: absolute; top: 80px; bottom: 178px; left: 39px; width: 3px; content: ""; background: var(--dhp-blue); }
.d-hp.d-hp--flow .d-flow-steps li { position: relative; display: grid; min-height: 178px; grid-template-columns: 80px minmax(0, 1fr); gap: 38px; }
.d-hp.d-hp--flow .d-flow-step__number { position: relative; z-index: 1; display: grid; width: 80px; height: 80px; place-items: center; background: inherit; border: 3px solid currentColor; border-radius: 50%; font-size: 20px; font-weight: 900; }
.d-hp.d-hp--flow .d-flow-chapter--talk .d-flow-step__number { background: var(--dhp-paper); }
.d-hp.d-hp--flow .d-flow-chapter--make .d-flow-step__number { background: var(--dhp-ink); }
.d-hp.d-hp--flow .d-flow-chapter--grow .d-flow-step__number { background: var(--dhp-green); }
.d-hp.d-hp--flow .d-flow-step__number-glyph,
.d-hp.d-hp--flow .d-flow-step__title-glyph,
.d-hp.d-hp--flow .d-flow-step__final-line-glyph { display: contents; }
.d-hp.d-hp--flow .d-flow-steps h3 { margin: 7px 0 12px; font-size: 27px; line-height: 1.4; }
.d-hp.d-hp--flow .d-flow-steps p { margin: 0 0 14px; font-size: 16px; line-height: 1.9; }
.d-hp.d-hp--flow .d-flow-photo-band { display: grid; margin-top: 52px; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.d-hp.d-hp--flow .d-flow-photo-band img { width: 100%; height: 306px; object-fit: cover; }
.d-hp.d-hp--flow .d-flow-photo-band img:nth-child(1) { object-position: 45% 50%; }
.d-hp.d-hp--flow .d-flow-photo-band img:nth-child(2) { object-position: 64% 50%; }
.d-hp.d-hp--flow .d-flow-photo-band img:nth-child(3) { object-position: 56% 50%; }
.d-hp.d-hp--flow .d-flow-photo-band img:nth-child(4) { object-position: 55% 50%; }

.d-hp.d-hp--flow .d-flow-supplements { padding: 90px 0; color: var(--dhp-white); background: var(--dhp-blue); }
.d-hp.d-hp--flow .d-flow-supplements__grid { display: grid; width: min(100% - 96px, 1344px); grid-template-columns: repeat(3, 1fr); gap: 24px; }
.d-hp.d-hp--flow .d-flow-supplements article { min-height: 340px; padding: 34px; border: 1px solid rgba(255,255,255,.3); }
.d-hp.d-hp--flow .d-flow-supplements h2 { margin: 0 0 26px; font-size: 24px; line-height: 1.45; }
.d-hp.d-hp--flow .d-flow-supplements p { margin: 0 0 18px; font-size: 15px; line-height: 1.9; }

.d-hp.d-hp--flow .d-flow-contact { padding: 84px 0; color: var(--dhp-white); background: var(--dhp-orange); }
.d-hp.d-hp--flow .d-flow-contact__inner { display: flex; width: min(100% - 96px, 1344px); min-height: 190px; align-items: center; justify-content: space-between; gap: 50px; }
.d-hp.d-hp--flow .d-flow-contact h2 { margin: 0; font-size: 43px; line-height: 1.3; }
.d-hp.d-hp--flow .d-flow-contact p { margin: 20px 0 0; font-size: 14px; }
.d-hp.d-hp--flow .d-flow-contact .d-cta__link { color: var(--dhp-white); background: transparent; }

@media (min-width: 1100px) {
  .d-hp.d-hp--flow .d-flow-hero { position: relative; display: block; }
  .d-hp.d-hp--flow .d-flow-hero__copy { width: 918px; height: 620px; box-sizing: border-box; clip-path: polygon(0 0, 100% 0, 91.5% 100%, 0 100%); }
  .d-hp.d-hp--flow .d-flow-hero > img { position: absolute; top: 55px; right: 45px; width: 460px; height: 510px; min-height: 0; }
  .d-hp.d-hp--flow .d-flow-chapter--talk .d-flow-steps li { min-height: 189px; }
  .d-hp.d-hp--flow .d-flow-chapter--talk .d-flow-steps::before { bottom: 189px; }
  .d-hp.d-hp--flow .d-flow-chapter--make { padding-bottom: 104.4375px; }
  .d-hp.d-hp--flow .d-flow-chapter--make .d-flow-notice { margin-top: 42px; margin-bottom: 24px; padding-block: 39px; }
  .d-hp.d-hp--flow .d-flow-chapter--make .d-flow-steps li { min-height: 228.84375px; }
  .d-hp.d-hp--flow .d-flow-chapter--make .d-flow-steps::before { bottom: 228.84375px; }
  .d-hp.d-hp--flow .d-flow-chapter--make .d-flow-photo-band { margin-top: 59.5625px; }
  .d-hp.d-hp--flow .d-flow-chapter--grow { padding-bottom: 120.625px; }
  .d-hp.d-hp--flow .d-flow-chapter--grow .d-flow-steps li { min-height: 129px; }
  .d-hp.d-hp--flow .d-flow-chapter--grow .d-flow-steps::before { display: none; }
  .d-hp.d-hp--flow .d-flow-photo-band img:nth-child(2),
  .d-hp.d-hp--flow .d-flow-photo-band img:nth-child(3),
  .d-hp.d-hp--flow .d-flow-photo-band img:nth-child(4) { object-position: 50% 50%; }
  .d-hp.d-hp--flow .d-flow-supplements article { min-height: 516px; }
  .d-hp.d-hp--flow .d-flow-contact__inner { min-height: 161px; }
}

@media (max-width: 1099px) and (min-width: 768px) {
  .d-hp.d-hp--flow .d-flow-shell { width: min(100% - 64px, 960px); }
  .d-hp.d-hp--flow .d-flow-hero__copy { padding-inline: 32px; }
  .d-hp.d-hp--flow .d-flow-supplements__grid { width: min(100% - 64px, 960px); grid-template-columns: repeat(2, 1fr); }
  .d-hp.d-hp--flow .d-flow-supplements article:last-child { max-width: calc(50% - 12px); }
  .d-hp.d-hp--flow .d-flow-contact__inner { width: min(100% - 64px, 960px); }
}

@media (max-width: 767px) {
  .d-hp.d-hp--flow .d-flow-shell { width: calc(100% - 40px); }
  .d-hp.d-hp--flow .d-flow-hero { position: relative; display: block; height: 537px; min-height: 0; overflow: visible; }
  .d-hp.d-hp--flow .d-flow-hero__copy { width: 100%; height: 537px; box-sizing: border-box; padding: 54px 20px 50px; clip-path: none; }
  .d-hp.d-hp--flow .d-flow-hero h1 { margin: 34px 0 28px; font-size: 42px; line-height: 1.3; }
  .d-hp.d-hp--flow .d-flow-hero__copy > p:not(.d-flow-label) { font-size: 17px; line-height: 1.85; }
  .d-hp.d-hp--flow .d-flow-hero > img { position: absolute; z-index: 1; top: 555px; left: 20px; width: calc(100% - 40px); height: 294px; min-height: 0; object-position: 50% 48%; }
  .d-hp.d-hp--flow .d-flow-chapter { padding: 66px 0 76px; }
  .d-hp.d-hp--flow .d-flow-chapter--talk { padding: 408px 0 88.588px; }
  .d-hp.d-hp--flow .d-flow-chapter header p { font-size: 11px; }
  .d-hp.d-hp--flow .d-flow-chapter header h2 { margin-top: 20px; font-size: 31px; }
  .d-hp.d-hp--flow .d-flow-chapter header h2::after { width: 142px; height: 5px; }
  .d-hp.d-hp--flow .d-flow-notice { margin-top: 51.6px; padding: 26.5px 20px; }
  .d-hp.d-hp--flow .d-flow-steps { margin-top: 48px; }
  .d-hp.d-hp--flow .d-flow-steps::before { top: 50px; bottom: 225px; left: 24px; }
  .d-hp.d-hp--flow .d-flow-steps li { min-height: 225px; grid-template-columns: 50px minmax(0, 1fr); gap: 18px; }
  .d-hp.d-hp--flow .d-flow-step__number { width: 50px; height: 50px; font-size: 14px; }
  .d-hp.d-hp--flow .d-flow-steps h3 { margin-top: 2px; font-size: 21px; font-weight: 800; }
  .d-hp.d-hp--flow .d-flow-steps p { font-size: 16px; line-height: 1.9; }
  .d-hp.d-hp--flow .d-flow-chapter--make { padding-bottom: 71.96875px; }
  .d-hp.d-hp--flow .d-flow-chapter--make .d-flow-steps li { min-height: 274.2px; }
  .d-hp.d-hp--flow .d-flow-chapter--make .d-flow-steps::before { bottom: 274.2px; }
  .d-hp.d-hp--flow .d-flow-chapter--make .d-flow-photo-band { margin-top: 6.765625px; }
  .d-hp.d-hp--flow .d-flow-chapter--grow { padding-bottom: 70.319px; }
  .d-hp.d-hp--flow .d-flow-chapter--grow .d-flow-steps li { min-height: 180px; }
  .d-hp.d-hp--flow .d-flow-chapter--grow .d-flow-steps::before { display: none; }
  .d-hp.d-hp--flow .d-flow-photo-band { grid-template-columns: 1fr; gap: 8px; }
  .d-hp.d-hp--flow .d-flow-photo-band img { height: 210px; }
  .d-hp.d-hp--flow .d-flow-photo-band img:nth-child(2) { object-position: 58% 50%; }
  .d-hp.d-hp--flow .d-flow-photo-band img:nth-child(3) { object-position: 48% 50%; }
  .d-hp.d-hp--flow .d-flow-supplements { padding: 20.5px 0; }
  .d-hp.d-hp--flow .d-flow-supplements__grid { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 20px; }
  .d-hp.d-hp--flow .d-flow-supplements article { min-height: 285px; padding: 28px; }
  .d-hp.d-hp--flow .d-flow-contact { padding: 91px 0 84px; }
  .d-hp.d-hp--flow .d-flow-contact__inner { display: block; width: calc(100% - 40px); min-height: 0; }
  .d-hp.d-hp--flow .d-flow-contact h2 { font-size: 32px; }
  .d-hp.d-hp--flow .d-flow-contact p { font-size: 14px; line-height: 1.7; }
  .d-hp.d-hp--flow .d-flow-contact .d-cta { margin-top: 34px; }
}

@media (min-width: 390px) and (max-width: 767px) {
  .d-hp.d-hp--flow .d-flow-chapter--make .d-flow-steps::before { top: 66.328125px; bottom: 399.296875px; left: 30.5px; }
  .d-hp.d-hp--flow .d-flow-chapter--make .d-flow-steps li { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; }
  .d-hp.d-hp--flow .d-flow-chapter--make .d-flow-step__number { width: 64px; height: 64px; font-size: 22.4px; }
  .d-hp.d-hp--flow .d-flow-chapter--make .d-flow-step__number-glyph { position: relative; top: 2px; display: inline; font-size: 24px; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="03"],
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="04"],
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="05"],
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] { height: 274.1875px; min-height: 0; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] { height: 314.515625px; min-height: 0; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="03"] { --dhp-flow-row-shift: 2.328125px; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="04"] { --dhp-flow-row-shift: -14.859375px; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="05"] { --dhp-flow-row-shift: -33.046875px; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] { --dhp-flow-row-shift: -79.234375px; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] { --dhp-flow-row-shift: -49.75px; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="03"] .d-flow-step__number,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="04"] .d-flow-step__number,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="05"] .d-flow-step__number,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] .d-flow-step__number,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] .d-flow-step__number,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="03"] > div,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="04"] > div,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="05"] > div,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] > div,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] > div { transform: translateY(var(--dhp-flow-row-shift)); }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="04"] .d-flow-step__title-line,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] .d-flow-step__title-line { display: block; white-space: nowrap; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] p,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] p { display: inline; margin: 0; white-space: normal; line-height: 29.6px; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] .d-flow-step__line,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] .d-flow-step__line { line-height: inherit; white-space: nowrap; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] .d-flow-step__line--1-1,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] .d-flow-step__line--1-2,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] .d-flow-step__line--1-3,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] .d-flow-step__line--1-4,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] .d-flow-step__line--2-2,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] .d-flow-step__line--2-3,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="06"] .d-flow-step__line--2-4,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] .d-flow-step__line--1-1,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] .d-flow-step__line--1-2,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] .d-flow-step__line--2-2,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] .d-flow-step__line--2-3,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="07"] .d-flow-step__line--2-4 { display: block; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] { height: 389.296875px; min-height: 0; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] > div { line-height: 1.85; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] .d-flow-step__number { transform: translateY(-10px); }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] h3 { margin-top: -6px; font-size: 23px; line-height: 29.4px; letter-spacing: -.333333px; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] .d-flow-step__title-glyph { position: relative; top: 1px; display: inline; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] p { line-height: inherit; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] p:nth-of-type(1) { margin-bottom: -2px; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] p:nth-of-type(1) .d-flow-step__line { display: block; white-space: nowrap; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] p:nth-of-type(2),
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] p:nth-of-type(3) { display: inline; margin: 0; white-space: normal; letter-spacing: normal; line-height: inherit; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] p:nth-of-type(2) .d-flow-step__line,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] p:nth-of-type(3) .d-flow-step__line { letter-spacing: normal; line-height: inherit; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] .d-flow-step__line--2-1,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] .d-flow-step__line--3-2,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] .d-flow-step__line--3-3,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] .d-flow-step__line--3-4 { display: block; white-space: nowrap; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] .d-flow-step__line--3-4 .d-flow-step__final-line-glyph { position: relative; top: -1px; display: inline; }
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] .d-flow-step__line--2-2,
  .d-hp.d-hp--flow .d-flow-steps li[data-dhp-flow-step="08"] .d-flow-step__line--3-1 { display: inline; white-space: nowrap; }
}