.d-hp.d-hp--top {
  --top-blue: #0757e6;
  --top-green: #008f4d;
  --top-orange: #f04418;
  --top-yellow: #ffd21c;
  --top-black: #071014;
  --top-paper: #f7f4ee;
  --top-white: #fff;
  --top-ink: #111719;
  color: var(--top-ink);
  background: var(--top-black);
}

.d-hp.d-hp--top img { width: 100%; }
.d-hp.d-hp--top a { text-decoration: none; }
.d-hp.d-hp--top .top-sp-only { display: none; }
.d-hp.d-hp--top .top-pc-only { display: inline; }
.d-hp.d-hp--top .top-sp-break { display: none; }
.d-hp.d-hp--top .top-nowrap { display: inline-block; white-space: nowrap; }
.d-hp.d-hp--top .top-scribble { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.d-hp.d-hp--top .top-section-label { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: .045em; line-height: 1; }
.d-hp.d-hp--top .top-label-line { width: 84px; height: 10px; margin-top: 9px; color: var(--top-blue); stroke-width: 4; }

.d-hp.d-hp--top .d-header--top { height: 82px; padding: 0 clamp(30px, 4.2vw, 68px); }
.d-hp.d-hp--top .d-header__brand { font-weight: 950; }
.d-hp.d-hp--top .d-header__descriptor { font-weight: 800; }
.d-hp.d-hp--top .d-footer--top { padding: 0 clamp(30px, 4vw, 64px); }
.d-hp.d-hp--top .d-footer--top p { font-size: 35px; font-weight: 950; }
.d-hp.d-hp--top .d-footer--top svg { stroke-width: 2; }

.d-hp.d-hp--top .top-hero {
  position: relative;
  min-height: 1010px;
  overflow: hidden;
  isolation: isolate;
  color: var(--top-white);
  background: var(--top-black);
}
.d-hp.d-hp--top .top-hero__photo-field { position: absolute; inset: 0; z-index: -3; }
.d-hp.d-hp--top .top-hero__photo { position: absolute; overflow: hidden; background: #182024; }
.d-hp.d-hp--top .top-hero__photo img { height: 100%; object-fit: cover; filter: saturate(.84) contrast(1.04); }
.d-hp.d-hp--top .top-hero__photo--store { top: 0; left: -2%; width: 41%; height: 70%; clip-path: polygon(0 0, 92% 0, 100% 83%, 82% 100%, 0 95%); }
.d-hp.d-hp--top .top-hero__photo--store img { object-position: 43% 45%; }
.d-hp.d-hp--top .top-hero__photo--workshop { top: -2%; left: 32%; width: 42%; height: 66%; clip-path: polygon(4% 0, 100% 0, 88% 92%, 12% 100%, 0 38%); }
.d-hp.d-hp--top .top-hero__photo--workshop img { object-position: 50% 45%; }
.d-hp.d-hp--top .top-hero__photo--field { top: 0; right: -2%; width: 38%; height: 72%; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 88%, 6% 42%); }
.d-hp.d-hp--top .top-hero__photo--field img { object-position: 56% 42%; }
.d-hp.d-hp--top .top-hero__photo--desk { right: -3%; bottom: -2%; left: -2%; height: 52%; clip-path: polygon(0 26%, 28% 12%, 55% 21%, 78% 2%, 100% 18%, 100% 100%, 0 100%); }
.d-hp.d-hp--top .top-hero__photo--desk img { object-position: 52% 82%; filter: saturate(.72) brightness(.65) contrast(1.08); }
.d-hp.d-hp--top .top-hero__vignette { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 58% 30%, transparent 0 23%, rgba(2, 7, 9, .12) 45%, rgba(2, 7, 9, .5) 100%), linear-gradient(180deg, rgba(3, 8, 10, .16) 0%, rgba(3, 8, 10, .26) 57%, rgba(3, 8, 10, .88) 100%); }
.d-hp.d-hp--top .top-hero__vignette::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(2, 7, 9, .44), transparent 42%, rgba(2, 7, 9, .18)); }
.d-hp.d-hp--top .top-hero__cards { position: absolute; inset: 0; z-index: 4; }
.d-hp.d-hp--top .top-phase-card { position: absolute; width: 258px; overflow: hidden; background: var(--top-white); border: 1px solid rgba(6, 11, 14, .3); border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, .42); transform-origin: 50% 60%; }
.d-hp.d-hp--top .top-phase-card img,
.d-hp.d-hp--top .top-phase-image { width: 100%; height: auto; object-fit: contain; }
.d-hp.d-hp--top .top-hero-card--1 { top: 88px; left: calc(50% - 68px); z-index: 2; transform: rotate(-5deg); }
.d-hp.d-hp--top .top-hero-card--2 { top: 54px; left: calc(50% + 178px); z-index: 3; transform: rotate(4deg) scale(1.04); }
.d-hp.d-hp--top .top-hero-card--3 { top: 393px; left: calc(50% + 68px); z-index: 4; transform: rotate(6deg); }
.d-hp.d-hp--top .top-hero__copy { position: absolute; z-index: 5; left: clamp(38px, 5.2vw, 84px); top: 468px; width: 630px; }
.d-hp.d-hp--top .top-hero__copy h1 { margin: 0; font-size: clamp(52px, 5.7vw, 82px); font-weight: 950; letter-spacing: -.075em; line-height: 1.15; text-shadow: 0 5px 25px rgba(0, 0, 0, .62); }
.d-hp.d-hp--top .top-hero__line { width: min(100%, 630px); height: 22px; margin-top: 13px; color: #0b60ff; }
.d-hp.d-hp--top .top-hero__copy p { margin: 27px 0 0; font-size: 21px; font-weight: 850; line-height: 1.65; text-shadow: 0 3px 16px rgba(0, 0, 0, .8); }
.d-hp.d-hp--top .top-hero__scroll { position: absolute; right: 42px; bottom: 38px; margin: 0; font-size: 11px; font-weight: 900; letter-spacing: .25em; writing-mode: vertical-rl; }
.d-hp.d-hp--top.is-ready .top-hero-card { animation: top-card-arrive 240ms cubic-bezier(.2, .7, .25, 1) both; }
.d-hp.d-hp--top.is-ready .top-hero-card--1 { animation-delay: 80ms; }
.d-hp.d-hp--top.is-ready .top-hero-card--2 { animation-delay: 220ms; }
.d-hp.d-hp--top.is-ready .top-hero-card--3 { animation-delay: 360ms; }
@keyframes top-card-arrive {
  from { opacity: 0; translate: 0 22px; scale: .98; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

.d-hp.d-hp--top .top-about { min-height: 600px; display: grid; grid-template-columns: minmax(280px, 32%) minmax(0, 68%); background: var(--top-paper); }
.d-hp.d-hp--top .top-section-heading--about { align-self: center; padding: 60px clamp(34px, 4.5vw, 72px); }
.d-hp.d-hp--top .top-about__headline-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px; column-gap: 18px; align-items: center; margin-top: 46px; }
.d-hp.d-hp--top .top-about__headline-row h2 { position: static; margin: 0; font-size: clamp(31px, 3vw, 48px); font-weight: 950; letter-spacing: -.055em; line-height: 1.25; }
.d-hp.d-hp--top .top-about__headline-icon { width: 52px; height: 52px; color: var(--top-orange); }
.d-hp.d-hp--top .top-about__headline-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.d-hp.d-hp--top .top-about__body { margin: 34px 0 0; font-size: 16px; font-weight: 750; line-height: 1.85; }
.d-hp.d-hp--top .top-about__visual { position: relative; min-height: 0; align-self: center; overflow: hidden; background: #342a1e; }

.d-hp.d-hp--top .top-service { position: relative; padding: 70px clamp(28px, 4vw, 64px) 46px; overflow: hidden; color: var(--top-white); background: var(--top-black); }
.d-hp.d-hp--top .top-section-title-row { position: relative; z-index: 1; }
.d-hp.d-hp--top .top-service .top-label-line { color: #2b73ff; }
.d-hp.d-hp--top .top-service__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.d-hp.d-hp--top .top-service-card { min-width: 0; overflow: hidden; border-radius: 3px; background: var(--top-paper); }
.d-hp.d-hp--top .top-service-card__copy { position: relative; min-height: 158px; padding: 30px 26px 24px 78px; color: var(--top-ink); }
.d-hp.d-hp--top .top-service-card__copy::after { position: absolute; right: 24px; bottom: 18px; left: 78px; height: 4px; content: ""; transform: rotate(-1deg); background: currentColor; border-radius: 50%; }
.d-hp.d-hp--top .top-service-no { position: absolute; top: 28px; left: 24px; display: grid; width: 38px; height: 38px; place-items: center; color: currentColor; border: 2px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 900; }
.d-hp.d-hp--top .top-service-card h3 { margin: 0; font-size: clamp(21px, 2vw, 31px); font-weight: 950; letter-spacing: -.04em; line-height: 1.25; }
.d-hp.d-hp--top .top-service-card p { margin: 18px 0 0; font-size: 13px; font-weight: 850; line-height: 1.55; }
.d-hp.d-hp--top .top-service-card--blue .top-service-card__copy { color: var(--top-blue); }
.d-hp.d-hp--top .top-service-card--orange .top-service-card__copy { color: var(--top-orange); }
.d-hp.d-hp--top .top-service-card--green .top-service-card__copy { color: var(--top-green); }
.d-hp.d-hp--top .top-service-card__visual { position: relative; height: auto; align-self: center; overflow: hidden; background: #ddd; }
.d-hp.d-hp--top .top-service__summary { margin: 36px auto 0; padding: 20px 24px; color: var(--top-white); border: 1px solid rgba(255, 255, 255, .4); border-left: 7px solid var(--top-yellow); }
.d-hp.d-hp--top .top-service__summary p { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.55; text-align: center; }
.d-hp.d-hp--top .top-service__summary-sp { display: none; }

.d-hp.d-hp--top .top-for-you { padding: 78px clamp(28px, 4vw, 64px) 82px; background: var(--top-paper); }
.d-hp.d-hp--top .top-section-title-row--for-you h2 { margin: 34px 0 0; font-size: clamp(34px, 4vw, 58px); font-weight: 950; letter-spacing: -.06em; line-height: 1.2; }
.d-hp.d-hp--top .top-for-you__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
.d-hp.d-hp--top .top-for-you-card { position: relative; min-height: 0; overflow: hidden; color: var(--top-white); background: #20292a; }

.d-hp.d-hp--top .top-flow { position: relative; min-height: 520px; display: grid; grid-template-columns: 24% 1fr; align-items: center; padding: 60px clamp(30px, 4vw, 64px) 82px; overflow: hidden; color: var(--top-white); background: var(--top-blue); }
.d-hp.d-hp--top .top-flow::after { position: absolute; right: -50px; bottom: -90px; width: 190px; height: 190px; content: ""; transform: rotate(22deg); background: var(--top-yellow); }
.d-hp.d-hp--top .top-flow__heading h2 { margin: 35px 0 0; font-size: clamp(38px, 4.2vw, 61px); font-weight: 950; letter-spacing: -.055em; line-height: 1.2; }
.d-hp.d-hp--top .top-flow .top-label-line { color: var(--top-white); }
.d-hp.d-hp--top .top-flow__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6.5%; margin: 0; padding: 0; list-style: none; }
.d-hp.d-hp--top .top-flow__steps li { position: relative; z-index: 2; text-align: center; }
.d-hp.d-hp--top .top-flow__circle { display: grid; aspect-ratio: 1; width: min(190px, 90%); margin: 0 auto; place-items: center; color: var(--top-blue); background: var(--top-white); border-radius: 50%; }
.d-hp.d-hp--top .top-flow__circle svg { width: 58%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.d-hp.d-hp--top .top-flow__steps strong { display: inline-block; margin-top: 15px; font-size: 21px; font-weight: 900; border-bottom: 2px solid var(--top-white); }
.d-hp.d-hp--top .top-flow__arrow { position: absolute; top: 46%; font-size: 34px; font-weight: 900; }
.d-hp.d-hp--top .top-flow__arrow--1 { left: 45.8%; }
.d-hp.d-hp--top .top-flow__arrow--2 { left: 69%; }
.d-hp.d-hp--top .top-flow__note { position: absolute; z-index: 2; right: 11%; bottom: 27px; left: 4%; margin: 0; font-size: 13px; font-weight: 750; line-height: 1.5; text-align: center; }

.d-hp.d-hp--top .top-company { min-height: 0; display: grid; grid-template-columns: 56% 44%; background: var(--top-paper); }
.d-hp.d-hp--top .top-company__visual { position: relative; min-height: 0; align-self: center; overflow: hidden; background: #dfe2de; }
.d-hp.d-hp--top .top-company__copy { align-self: center; padding: 70px clamp(38px, 5.5vw, 88px); }
.d-hp.d-hp--top .top-company__copy h2 { margin: 44px 0 0; font-size: clamp(39px, 4.2vw, 63px); font-weight: 950; letter-spacing: -.065em; line-height: 1.2; }
.d-hp.d-hp--top .top-company__line { width: min(100%, 340px); height: 18px; margin-top: 8px; color: var(--top-green); }
.d-hp.d-hp--top .top-company__body { margin: 36px 0 0; font-size: 16px; font-weight: 750; line-height: 1.9; }

.d-hp.d-hp--top .top-contact { min-height: 410px; display: grid; grid-template-columns: minmax(390px, 1.2fr) minmax(260px, .85fr) 240px; align-items: center; gap: 46px; padding: 58px clamp(30px, 4vw, 64px); color: var(--top-white); background: var(--top-orange); }
.d-hp.d-hp--top .top-contact .top-label-line { color: var(--top-white); }
.d-hp.d-hp--top .top-contact h2 { margin: 38px 0 0; font-size: clamp(42px, 4.8vw, 69px); font-weight: 950; letter-spacing: -.065em; line-height: 1.18; }
.d-hp.d-hp--top .top-contact__cta { display: flex; min-height: 78px; align-items: center; justify-content: space-between; padding: 0 30px; border: 2px solid rgba(255, 255, 255, .95); font-size: 20px; font-weight: 900; }
.d-hp.d-hp--top .top-contact__cta:focus-visible { outline: 4px solid var(--top-yellow); outline-offset: 3px; }
.d-hp.d-hp--top .top-contact__mark { width: 200px; height: 200px; }
.d-hp.d-hp--top .top-contact__mark svg { width: 100%; height: 100%; fill: none; stroke: var(--top-white); stroke-width: 3; }

@media (min-width: 1001px) {
  .d-hp.d-hp--top .top-about__headline-row { width: calc(100% + 62px); }
  .d-hp.d-hp--top .top-about__headline-row h2 { font-size: 34px; }
  .d-hp.d-hp--top .top-flow__heading h2 { font-size: 48px; }
  .d-hp.d-hp--top .top-contact h2 { font-size: 56px; }
}

@media (max-width: 1000px) {
  .d-hp.d-hp--top .d-header__descriptor { display: none; }
  .d-hp.d-hp--top .d-header__nav { gap: 20px; }
  .d-hp.d-hp--top .top-hero-card--1 { left: 42%; }
  .d-hp.d-hp--top .top-hero-card--2 { left: 65%; }
  .d-hp.d-hp--top .top-hero-card--3 { left: 55%; }
  .d-hp.d-hp--top .top-phase-card { width: 220px; }
  .d-hp.d-hp--top .top-about { grid-template-columns: 38% 62%; }
  .d-hp.d-hp--top .top-service__cards,
  .d-hp.d-hp--top .top-for-you__cards { gap: 16px; }
  .d-hp.d-hp--top .top-service-card__copy { padding-left: 65px; }
  .d-hp.d-hp--top .top-service-no { left: 16px; }
  .d-hp.d-hp--top .top-contact { grid-template-columns: 1fr minmax(260px, .8fr) 150px; }
  .d-hp.d-hp--top .top-contact__mark { width: 150px; height: 150px; }
}

@media (min-width: 721px) and (max-width: 1000px) {
  .d-hp.d-hp--top .top-contact {
    grid-template-columns: minmax(260px, 420px) 150px;
    grid-template-areas:
      "copy copy"
      "cta mark";
    justify-content: space-between;
    column-gap: clamp(18px, 3vw, 28px);
    row-gap: 24px;
    padding: 48px clamp(24px, 4vw, 40px);
  }
  .d-hp.d-hp--top .top-contact__copy { grid-area: copy; }
  .d-hp.d-hp--top .top-contact__cta { grid-area: cta; }
  .d-hp.d-hp--top .top-contact__mark { grid-area: mark; }
}

@media (max-width: 720px) {
  .d-hp.d-hp--top .d-header--top { height: 64px; padding: 0 15px; }
  .d-hp.d-hp--top .d-header__brand { font-size: 23px; }
  .d-hp.d-hp--top .d-footer--top { padding: 0 20px; }
  .d-hp.d-hp--top .d-footer--top p { font-size: 27px; }
  .d-hp.d-hp--top .d-footer--top svg { width: 28px; height: 28px; }
  .d-hp.d-hp--top .top-pc-only { display: none; }
  .d-hp.d-hp--top .top-sp-only { display: inline; }
  .d-hp.d-hp--top .top-sp-break { display: initial; }
  .d-hp.d-hp--top .top-section-label { font-size: 14px; }

  .d-hp.d-hp--top .top-hero { min-height: 1040px; }
  .d-hp.d-hp--top .top-hero__photo-field { height: 1040px; }
  .d-hp.d-hp--top .top-hero__photo { clip-path: none; }
  .d-hp.d-hp--top .top-hero__photo--store { top: 0; left: 0; width: 64.615%; height: 507px; border-right: 1px solid rgba(0, 0, 0, .75); }
  .d-hp.d-hp--top .top-hero__photo--store img { object-position: 43% 50%; }
  .d-hp.d-hp--top .top-hero__photo--workshop { top: 0; right: 0; left: auto; width: 35.385%; height: 238px; border-bottom: 1px solid rgba(0, 0, 0, .75); }
  .d-hp.d-hp--top .top-hero__photo--workshop img { object-position: 52% 48%; }
  .d-hp.d-hp--top .top-hero__photo--field { top: 238px; right: 0; width: 35.385%; height: 269px; }
  .d-hp.d-hp--top .top-hero__photo--field img { object-position: 46% 48%; }
  .d-hp.d-hp--top .top-hero__photo--desk { top: 800px; right: 0; bottom: auto; left: 0; width: 100%; height: 240px; }
  .d-hp.d-hp--top .top-hero__photo--desk img { object-position: 50% 83%; filter: saturate(.75) brightness(.6); }
  .d-hp.d-hp--top .top-hero__vignette { background: linear-gradient(180deg, rgba(2, 7, 9, .12) 0, rgba(2, 7, 9, .1) 49%, rgba(2, 7, 9, .97) 49%, rgba(2, 7, 9, .96) 78%, rgba(2, 7, 9, .36) 100%); }
  .d-hp.d-hp--top .top-hero__vignette::after { background: linear-gradient(90deg, rgba(2, 7, 9, .12), transparent 70%); }
  .d-hp.d-hp--top .top-phase-card { width: 116px; border-radius: 6px; box-shadow: 0 10px 26px rgba(0, 0, 0, .48); }
  .d-hp.d-hp--top .top-hero-card--1 { top: 58px; left: 37.692%; transform: rotate(-4deg); }
  .d-hp.d-hp--top .top-hero-card--2 { top: 326px; left: 12.821%; transform: rotate(5deg); }
  .d-hp.d-hp--top .top-hero-card--3 { top: 326px; left: 57.436%; transform: rotate(-4deg); }
  .d-hp.d-hp--top .top-hero__copy { top: 507px; left: 0; width: 100%; height: 293px; padding: 54px 20px 32px; background: rgba(7, 16, 20, .97); }
  .d-hp.d-hp--top .top-hero__copy h1 { font-size: clamp(41px, 11.8vw, 48px); line-height: 1.18; }
  .d-hp.d-hp--top .top-hero__line { width: 94%; height: 16px; margin-top: 10px; }
  .d-hp.d-hp--top .top-hero__copy p { margin-top: 20px; font-size: 15px; line-height: 1.58; }
  .d-hp.d-hp--top .top-hero__scroll { display: none; }

  .d-hp.d-hp--top .top-about { min-height: 0; display: block; }
  .d-hp.d-hp--top .top-section-heading--about { padding: 52px 20px 44px; }
  .d-hp.d-hp--top .top-about__headline-row { grid-template-columns: minmax(0, 1fr) 44px; column-gap: 14px; margin-top: 31px; }
  .d-hp.d-hp--top .top-about__headline-row h2 { font-size: 26px; line-height: 1.25; }
  .d-hp.d-hp--top .top-about__headline-icon { width: 44px; height: 44px; }
  .d-hp.d-hp--top .top-about__body { margin-top: 24px; font-size: 14px; line-height: 1.75; }
  .d-hp.d-hp--top .top-about__visual { min-height: 0; }

  .d-hp.d-hp--top .top-service { padding: 52px 14px 42px; }
  .d-hp.d-hp--top .top-service__cards { display: block; margin-top: 28px; }
  .d-hp.d-hp--top .top-service-card { display: grid; grid-template-columns: 50% 50%; min-height: 190px; margin-top: 12px; }
  .d-hp.d-hp--top .top-service-card__copy { min-height: 190px; padding: 25px 13px 18px 49px; }
  .d-hp.d-hp--top .top-service-card--blue .top-service-card__copy { padding-right: 5px; }
  .d-hp.d-hp--top .top-service-no { top: 23px; left: 10px; width: 31px; height: 31px; font-size: 10px; }
  .d-hp.d-hp--top .top-service-card h3 { font-size: 18px; line-height: 1.3; }
  .d-hp.d-hp--top .top-service-card p { margin-top: 18px; font-size: 12px; line-height: 1.5; }
  .d-hp.d-hp--top .top-service-card__copy::after { right: 13px; bottom: 16px; left: 49px; height: 3px; }
  .d-hp.d-hp--top .top-service-card__visual { height: auto; align-self: center; }
  .d-hp.d-hp--top .top-service__summary { margin-top: 24px; padding: 16px 20px; }
  .d-hp.d-hp--top .top-service__summary p { font-size: 12.5px; line-height: 1.5; text-align: left; }
  .d-hp.d-hp--top .top-service__summary-pc { display: none; }
  .d-hp.d-hp--top .top-service__summary-sp { display: block; }

  .d-hp.d-hp--top .top-for-you { padding: 54px 15px 58px; }
  .d-hp.d-hp--top .top-section-title-row--for-you h2 { margin-top: 30px; font-size: 28px; }
  .d-hp.d-hp--top .top-for-you__cards { display: block; margin-top: 34px; }
  .d-hp.d-hp--top .top-for-you-card { min-height: 0; margin-top: 18px; }

  .d-hp.d-hp--top .top-flow { min-height: 430px; display: block; padding: 48px 12px 88px; }
  .d-hp.d-hp--top .top-flow__heading h2 { margin-top: 24px; font-size: 27px; }
  .d-hp.d-hp--top .top-flow__steps { gap: 8%; margin-top: 40px; }
  .d-hp.d-hp--top .top-flow__circle { width: 88px; max-width: 100%; }
  .d-hp.d-hp--top .top-flow__steps strong { margin-top: 11px; font-size: 16px; }
  .d-hp.d-hp--top .top-flow__arrow { top: 225px; font-size: 22px; }
  .d-hp.d-hp--top .top-flow__arrow--1 { left: 31.5%; }
  .d-hp.d-hp--top .top-flow__arrow--2 { left: 64%; }
  .d-hp.d-hp--top .top-flow__note { right: 20px; bottom: 30px; left: 20px; font-size: 11.5px; line-height: 14px; text-align: left; }

  .d-hp.d-hp--top .top-company { min-height: 0; display: flex; flex-direction: column-reverse; }
  .d-hp.d-hp--top .top-company__visual { min-height: 0; }
  .d-hp.d-hp--top .top-company__copy { padding: 52px 20px 43px; }
  .d-hp.d-hp--top .top-company__copy h2 { margin-top: 31px; font-size: 35px; }
  .d-hp.d-hp--top .top-company__line { width: 240px; height: 15px; }
  .d-hp.d-hp--top .top-company__body { display: block; }

  .d-hp.d-hp--top .top-contact { min-height: 520px; display: block; position: relative; padding: 52px 20px 42px; }
  .d-hp.d-hp--top .top-contact h2 { margin-top: 32px; font-size: 36px; line-height: 1.2; }
  .d-hp.d-hp--top .top-contact__cta { position: absolute; bottom: 48px; left: 20px; width: 54%; min-height: 64px; padding: 0 17px; font-size: 16px; }
  .d-hp.d-hp--top .top-contact__mark { position: absolute; right: 16px; bottom: 34px; width: 130px; height: 130px; }
}

@media (max-width: 359px) {
  .d-hp.d-hp--top .top-about__headline-row { grid-template-columns: minmax(0, 1fr) 44px; column-gap: 14px; }
  .d-hp.d-hp--top .top-about__headline-row h2 { max-width: 210px; font-size: 25px; }
  .d-hp.d-hp--top .top-hero__copy h1 { font-size: 39px; }
  .d-hp.d-hp--top .top-phase-card { width: 108px; }
  .d-hp.d-hp--top .top-hero-card--1 { left: 37%; }
  .d-hp.d-hp--top .top-hero-card--2 { left: 10%; }
  .d-hp.d-hp--top .top-hero-card--3 { left: 58%; }
  .d-hp.d-hp--top .top-service-card h3 { font-size: 16px; }
  .d-hp.d-hp--top .top-service-card p { font-size: 12px; }
  .d-hp.d-hp--top .top-contact h2 { font-size: 36px; }
  .d-hp.d-hp--top .top-contact__mark { width: 118px; height: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  .d-hp.d-hp--top *,
  .d-hp.d-hp--top *::before,
  .d-hp.d-hp--top *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}