.aa-roles {
  --aa-roles-topic: clamp(112px, 13vw, 200px);
  --aa-roles-notch: 18px;
  --aa-roles-r: 18px;
  --aa-roles-cols: var(--aa-roles-topic) minmax(0, 4fr) minmax(0, 5.2fr);
  background: var(--aa-white);
}

.aa-roles__head {
  display: grid;
  justify-items: center;
  row-gap: 14px;
  margin-bottom: var(--aa-gap-head);
  text-align: center;
}
.aa-roles__head .aa-kicker { margin-bottom: 14px; }

.aa-roles__chart {
  display: grid;
  grid-template-columns: var(--aa-roles-cols);
  row-gap: 12px;
}

.aa-roles__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: stretch;
}

.aa-roles__topic {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 20px;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--aa-ink);
}
.aa-roles__row:not(.aa-roles__row--head) .aa-roles__topic::after { content: ""; flex: 1; height: 1px; background: var(--aa-line); }

.aa-roles__part {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 76px;
  font-size: 16px;
  line-height: 1.5;
}
.aa-roles__part::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform-origin: left center;
}
.aa-roles__part--client {
  padding: 16px calc(var(--aa-roles-notch) + 22px) 16px 26px;
  border-radius: var(--aa-roles-r) 0 0 var(--aa-roles-r);
  clip-path: polygon(0 0, calc(100% - var(--aa-roles-notch)) 0, 100% 50%, calc(100% - var(--aa-roles-notch)) 100%, 0 100%);
  color: var(--aa-body);
  font-weight: 500;
}
.aa-roles__part--client::before { background: var(--aa-line-soft); }
.aa-roles__part--team {
  margin-left: -12px;
  padding: 16px 26px 16px calc(var(--aa-roles-notch) + 30px);
  border-radius: 0 var(--aa-roles-r) var(--aa-roles-r) 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--aa-roles-notch) 50%);
  color: var(--aa-ink);
  font-weight: 700;
}
.aa-roles__part--team::before { background: color-mix(in srgb, var(--aa-primary) 12%, var(--aa-white)); }   

.aa-roles__note {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid var(--aa-primary);
  border-radius: 999px;
  background: var(--aa-white);
  color: var(--aa-primary-deep);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}


.aa-roles__row--head { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1.5px solid var(--aa-ink); }
.aa-roles__row--head .aa-roles__part {
  min-height: 0;
  clip-path: none;
  border-radius: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  gap: 10px;
}
.aa-roles__row--head .aa-roles__part::before { display: none; }
.aa-roles__row--head .aa-roles__part--client { padding: 0 0 0 26px; color: var(--aa-body); }
.aa-roles__row--head .aa-roles__part--team { padding: 0 0 0 calc(var(--aa-roles-notch) + 30px); color: var(--aa-primary-deep); }
.aa-roles__swatch { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.aa-roles__part--client .aa-roles__swatch { background: var(--aa-line-soft); box-shadow: inset 0 0 0 1px var(--aa-faint); }
.aa-roles__part--team .aa-roles__swatch { background: var(--aa-primary-soft); box-shadow: inset 0 0 0 1px var(--aa-primary); }


@media (max-width: 640px) {
  .aa-roles { --aa-roles-topic: 44px; --aa-roles-notch: 10px; --aa-roles-r: 12px; --aa-roles-cols: var(--aa-roles-topic) minmax(0, 1fr) minmax(0, 1.1fr); }
  .aa-roles__chart { row-gap: 8px; }
  .aa-roles__topic { padding-right: 6px; font-size: 14px; }
  .aa-roles__row:not(.aa-roles__row--head) .aa-roles__topic::after { display: none; }
  .aa-roles__part { min-height: 62px; gap: 6px; font-size: 13.5px; line-height: 1.45; }
  .aa-roles__part--client { padding: 10px calc(var(--aa-roles-notch) + 8px) 10px 12px; }
  .aa-roles__part--team { margin-left: -6px; padding: 10px 10px 10px calc(var(--aa-roles-notch) + 12px); }
  .aa-roles__note { max-width: 100%; padding: 2px 8px; font-size: 13px; white-space: normal; text-wrap: balance; }
  .aa-roles__row--head { padding-bottom: 10px; margin-bottom: 2px; }
  .aa-roles__row--head .aa-roles__part { gap: 6px; font-size: 13px; }
  .aa-roles__row--head .aa-roles__part--client { padding-left: 12px; }
  .aa-roles__row--head .aa-roles__part--team { padding-left: calc(var(--aa-roles-notch) + 12px); }
}


@media (prefers-reduced-motion: no-preference) {
  .aa-roles__part--team::before { transition: transform .9s var(--aa-ease); }
  .aa-roles__part--team > * { transition: opacity .6s ease; }
  .aa-roles__chart[data-visible="false"] .aa-roles__part--team::before { transform: scaleX(0); }
  .aa-roles__chart[data-visible="false"] .aa-roles__part--team > * { opacity: 0; }
  .aa-roles__row:nth-child(3) .aa-roles__part--team::before, .aa-roles__row:nth-child(3) .aa-roles__part--team > * { transition-delay: .1s; }
  .aa-roles__row:nth-child(4) .aa-roles__part--team::before, .aa-roles__row:nth-child(4) .aa-roles__part--team > * { transition-delay: .2s; }
  .aa-roles__row:nth-child(5) .aa-roles__part--team::before, .aa-roles__row:nth-child(5) .aa-roles__part--team > * { transition-delay: .3s; }
  .aa-roles__row:nth-child(6) .aa-roles__part--team::before, .aa-roles__row:nth-child(6) .aa-roles__part--team > * { transition-delay: .4s; }
}


.aa-roles__note--ads { border-color: var(--aa-mint-deep); background: var(--aa-tint-mint); color: var(--aa-mint-deep); }

.aa-roles__swatch { width: 10px; height: 10px; border-radius: 50%; box-shadow: none !important; }
.aa-roles__part--client .aa-roles__swatch { background: var(--aa-faint); }
.aa-roles__part--team .aa-roles__swatch { background: var(--aa-primary); }

@supports not (grid-template-columns: subgrid) {
  .aa-roles__row { grid-template-columns: var(--aa-roles-cols); }
}

.aa-roles__brk { display: none; }
@media (max-width: 640px) {
  .aa-roles__brk { display: inline; }
  .aa-roles__sep { display: none; }   
}


.aa-roles__flow {
  --aa-roles-flow-gap: clamp(36px, 5vw, 80px);
  --aa-roles-node: clamp(196px, 17vw, 236px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--aa-roles-flow-gap);
  max-width: 1040px;
  margin: 0 auto clamp(48px, 5vw, 80px);
}
.aa-roles__flow::before {               
  content: "";
  position: absolute;
  top: 50%;
  left: 16%;
  right: 16%;
  height: 10px;
  margin-top: -5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--aa-primary) 22%, var(--aa-white));
}
.aa-roles__step { position: relative; display: flex; justify-content: center; }
.aa-roles__node {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  width: var(--aa-roles-node);
  aspect-ratio: 1;
  border: 1.5px solid var(--aa-line);
  border-radius: 50%;
  background: var(--aa-white);
  box-shadow: var(--aa-shadow-card);
  text-align: center;
}
.aa-roles__node-en { font-family: var(--aa-font-en); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--aa-primary); }
.aa-roles__node-name { font-size: clamp(21px, 1.8vw, 25px); font-weight: 800; letter-spacing: -0.03em; color: var(--aa-ink); }
.aa-roles__node-text { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--aa-body); }
.aa-roles__node-brief { display: none; }
.aa-roles__node-note { font-size: 13px; color: var(--aa-body); }
.aa-roles__step--lead .aa-roles__node {
  border: 0;
  background: var(--aa-primary);
  box-shadow: 0 18px 40px var(--aa-key-glow);
  transform: scale(1.06);
}
.aa-roles__step--lead .aa-roles__node-en { color: rgba(255, 255, 255, .95); }   
.aa-roles__step--lead .aa-roles__node-name { color: var(--aa-white); }
.aa-roles__step--lead .aa-roles__node-text { color: rgba(255, 255, 255, .92); }

.aa-roles__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--aa-roles-flow-gap) / -2 - 22px);
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--aa-white) url("/assets/home/generated/icons/a01dec236afe1f4a5545.svg") center / 20px no-repeat;
  box-shadow: 0 6px 16px rgba(27, 33, 64, .12);
}


@media (max-width: 760px) {
  .aa-roles__flow { --aa-roles-flow-gap: 18px; margin-bottom: 36px; }
  .aa-roles__flow::before { left: 10%; right: 10%; height: 6px; margin-top: -3px; }
  .aa-roles__step { min-width: 0; }
  .aa-roles__node { width: min(100%, 144px); aspect-ratio: 1; min-height: 0; gap: 4px; padding: 6px 4px; }
  .aa-roles__step--lead .aa-roles__node { transform: none; }
  .aa-roles__node-en, .aa-roles__node-full { display: none; }
  .aa-roles__node-brief { display: block; }
  .aa-roles__node-name { font-size: 16px; line-height: 1.25; }
  .aa-roles__node-text { margin-top: 2px; font-size: 13px; line-height: 1.35; }
  .aa-roles__step:not(:last-child)::after { width: 26px; height: 26px; margin-top: -13px; right: calc(var(--aa-roles-flow-gap) / -2 - 13px); background-size: 14px; }
}