/* Shared three-step contract flow. Legacy s-salary-* selectors are the adopted visual ABI. */
.s-salary-flow {
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--salary-flow-section-y-start) 0 var(--salary-flow-section-y-end);
  color: var(--salary-flow-copy);
  background:
    radial-gradient(circle at 6% 18%, rgba(226, 240, 244, .82), transparent 24%),
    radial-gradient(circle at 96% 72%, rgba(245, 221, 210, .34), transparent 20%),
    var(--salary-flow-paper);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
}

.s-salary-flow *,
.s-salary-flow *::before,
.s-salary-flow *::after { box-sizing: inherit; }

.s-salary-flow__inner { width: min(calc(100% - 64px), var(--salary-flow-content-width)); margin-inline: auto; }

.s-salary-flow__header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .72fr);
  align-items: end;
  gap: clamp(48px, 7vw, 112px);
  margin-bottom: clamp(82px, 8vw, 118px);
}

.s-salary-flow__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; color: var(--salary-flow-accent); font-family: Georgia, serif; font-size: .76rem; font-weight: 700; letter-spacing: .18em; }
.s-salary-flow__eyebrow i { width: 42px; height: 1px; background: currentColor; }
.s-salary-flow__header h2 { margin: 0; color: var(--salary-flow-ink); font-family: var(--font-serif, "Shippori Mincho", "Yu Mincho", serif); font-size: var(--salary-flow-title-size); font-weight: var(--salary-flow-title-weight); line-height: var(--salary-flow-title-leading); letter-spacing: .045em; }
.s-salary-flow__header > p { margin: 0 0 7px; padding-left: 26px; border-left: 1px solid color-mix(in srgb, var(--salary-flow-accent) 62%, transparent); font-size: .98rem; line-height: 2.05; }
.s-salary-flow__journey { position: relative; }

.s-salary-flow__journey-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0 0 42px; padding: 0 8px 20px; border-bottom: 1px solid var(--salary-flow-line); }
.s-salary-flow__journey-head > p { display: flex; align-items: center; gap: 13px; margin: 0; color: var(--salary-flow-accent); font-family: Georgia, serif; font-size: .68rem; letter-spacing: .14em; }
.s-salary-flow__journey-head > p i { width: 44px; height: 1px; background: currentColor; }
.s-salary-flow__journey-head > p b { color: var(--salary-flow-ink); font-family: var(--font-serif, "Shippori Mincho", "Yu Mincho", serif); font-size: .94rem; font-weight: 500; letter-spacing: .08em; }
.s-salary-flow__journey-head > small { color: var(--salary-flow-muted); font-size: .72rem; letter-spacing: .08em; }

.s-salary-flow__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4.1vw, 60px); margin: 0; padding: 0 8px; list-style: none; }
.s-salary-flow__stage { position: relative; min-width: 0; padding-top: 90px; }
.s-salary-flow__stage--blue { --salary-flow-card-soft: var(--salary-flow-blue-soft); --salary-flow-card-accent: var(--salary-flow-blue); }
.s-salary-flow__stage--gold { --salary-flow-card-soft: var(--salary-flow-gold-soft); --salary-flow-card-accent: var(--salary-flow-accent); }
.s-salary-flow__stage--coral { --salary-flow-card-soft: var(--salary-flow-coral-soft); --salary-flow-card-accent: var(--salary-flow-coral); }
.s-salary-flow__stage::before { position: absolute; z-index: 0; top: 31px; left: calc(50% + 34px); width: calc(100% + clamp(32px, 4.1vw, 60px) - 68px); height: 2px; background: var(--salary-flow-ink); content: ""; }
.s-salary-flow__stage::after { position: absolute; z-index: 1; top: 25px; right: calc(25px - clamp(32px, 4.1vw, 60px)); width: 13px; height: 13px; border-top: 2px solid var(--salary-flow-ink); border-right: 2px solid var(--salary-flow-ink); content: ""; transform: rotate(45deg); }
.s-salary-flow__stage:last-child::before, .s-salary-flow__stage:last-child::after { display: none; }
.s-salary-flow__step-index { position: absolute; z-index: 2; top: 0; left: 50%; display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid color-mix(in srgb, var(--salary-flow-card-accent) 52%, transparent); border-radius: 50%; color: var(--salary-flow-ink); background: var(--salary-flow-surface); box-shadow: 0 0 0 8px var(--salary-flow-paper); transform: translateX(-50%); }
.s-salary-flow__step-index::after { position: absolute; top: 63px; left: 31px; width: 1px; height: 27px; background: var(--salary-flow-card-accent); content: ""; }
.s-salary-flow__step-index span { margin-top: 7px; font-family: Georgia, serif; font-size: 1.45rem; line-height: 1; }
.s-salary-flow__step-index b { margin-top: -7px; color: var(--salary-flow-card-accent); font-family: Georgia, serif; font-size: .43rem; font-weight: 700; letter-spacing: .1em; }

.s-salary-flow__card { position: relative; min-height: 610px; height: 100%; padding: 38px clamp(25px, 2.5vw, 36px) 34px; border: 1px solid color-mix(in srgb, var(--salary-flow-ink) 17%, transparent); background: var(--salary-flow-surface); box-shadow: 0 24px 58px color-mix(in srgb, var(--salary-flow-ink) 8.5%, transparent); }
.s-salary-flow__card::before { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--salary-flow-card-accent); content: ""; }
.s-salary-flow__card::after { position: absolute; right: 23px; bottom: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--salary-flow-card-accent); box-shadow: 12px 0 0 color-mix(in srgb, var(--salary-flow-card-accent) 44%, transparent); content: ""; }
.s-salary-flow__card-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid color-mix(in srgb, var(--salary-flow-ink) 13%, transparent); }
.s-salary-flow__card-head > p { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--salary-flow-accent); font-family: Georgia, serif; }
.s-salary-flow__card-head > p span { font-size: .6rem; letter-spacing: .16em; }
.s-salary-flow__card-head > p b { font-size: 1.55rem; font-weight: 500; }
.s-salary-flow__pict { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid color-mix(in srgb, var(--salary-flow-card-accent) 42%, transparent); border-radius: 50%; background: var(--salary-flow-surface); box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--salary-flow-card-soft) 64%, transparent); }
.s-salary-flow__pict svg { width: 39px; height: 39px; overflow: visible; }
.s-salary-flow__pict .paper { fill: var(--salary-flow-surface); stroke: var(--salary-flow-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-salary-flow__pict .soft { fill: var(--salary-flow-card-soft); stroke: var(--salary-flow-card-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.s-salary-flow__pict .line { fill: none; stroke: var(--salary-flow-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-salary-flow__pict .accent { fill: none; stroke: var(--salary-flow-card-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-salary-flow__pict .accent-soft { fill: var(--salary-flow-card-soft); stroke: var(--salary-flow-card-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-salary-flow__pict .accent-fill { fill: var(--salary-flow-card-accent); }

.s-salary-flow__scene { position: relative; display: grid; height: 178px; place-items: center; overflow: hidden; margin: 24px 0 0; border: 1px solid color-mix(in srgb, var(--salary-flow-card-accent) 20%, transparent); border-radius: 96px 96px 18px 18px; background: radial-gradient(circle at 78% 20%, rgba(255,255,255,.88) 0 4%, transparent 4.5%), color-mix(in srgb, var(--salary-flow-card-soft) 78%, var(--salary-flow-surface)); }
.s-salary-flow__scene::before { position: absolute; inset: 16px 18px auto auto; width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--salary-flow-card-accent) 34%, transparent); border-radius: 50%; content: ""; }
.s-salary-flow__scene::after { position: absolute; right: 32px; bottom: 19px; width: 36px; height: 1px; background: color-mix(in srgb, var(--salary-flow-card-accent) 48%, transparent); content: ""; }
.s-salary-flow__scene img { position: relative; z-index: 1; width: 96%; height: 96%; object-fit: contain; transform: translateY(4px) scale(1.03); }
.s-salary-flow__guide { display: inline-block; margin: 22px 0 12px; padding: 5px 14px 6px; color: var(--salary-flow-ink); background: var(--salary-flow-card-soft); font-size: .78rem; font-weight: 700; letter-spacing: .09em; }
.s-salary-flow__card h3 { margin: 0; color: var(--salary-flow-ink); font-family: var(--font-serif, "Shippori Mincho", "Yu Mincho", serif); font-size: clamp(1.42rem, 1.8vw, 1.72rem); font-weight: var(--salary-flow-card-title-weight); line-height: 1.55; letter-spacing: .035em; }
.s-salary-flow__card h3 span { font-size: .72em; letter-spacing: .02em; }
.s-salary-flow__body { margin: 18px 0 0; font-size: .9rem; line-height: 1.95; }
.s-salary-flow__tab { position: absolute; top: 104px; right: -12px; display: grid; width: 22px; min-height: 94px; place-items: center; padding: 9px 4px; color: var(--salary-flow-ink); background: var(--salary-flow-card-soft); font-family: Georgia, serif; font-size: .58rem; letter-spacing: .1em; writing-mode: vertical-rl; }

.s-salary-flow__cta { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1.25fr) minmax(300px, .9fr); align-items: center; gap: clamp(22px, 2.6vw, 38px); width: min(calc(100% - 120px), 1120px); margin: clamp(100px, 9vw, 132px) auto 0; padding: clamp(38px, 4vw, 54px); color: var(--salary-flow-surface); background: var(--salary-flow-ink); box-shadow: 0 28px 70px color-mix(in srgb, var(--salary-flow-ink) 18%, transparent); }
.s-salary-flow__cta::before { position: absolute; top: -68px; right: 16%; width: 1px; height: 68px; background: var(--salary-flow-coral); content: ""; }
.s-salary-flow__cta::after { position: absolute; top: -74px; right: calc(16% - 5px); width: 11px; height: 11px; border: 3px solid var(--salary-flow-paper); border-radius: 50%; background: var(--salary-flow-coral); box-shadow: 0 0 0 1px var(--salary-flow-coral); content: ""; }
.s-salary-flow__cta-mark { position: relative; display: grid; width: 118px; height: 118px; place-items: center; border: 1px solid color-mix(in srgb, var(--salary-flow-surface) 34%, transparent); border-radius: 50%; color: var(--salary-flow-ink); background: #eef5f6; }
.s-salary-flow__cta-mark span { margin-top: 20px; color: var(--salary-flow-accent); font-family: Georgia, serif; font-size: .52rem; font-weight: 700; letter-spacing: .14em; }
.s-salary-flow__cta-mark b { margin-top: -23px; font-family: var(--font-serif, "Shippori Mincho", "Yu Mincho", serif); font-size: 1.55rem; }
.s-salary-flow__cta-mark i { position: absolute; right: 13px; bottom: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--salary-flow-coral); }
.s-salary-flow__cta-copy > p { margin: 0 0 14px; color: #d8bd83; font-family: Georgia, serif; font-size: .67rem; letter-spacing: .14em; }
.s-salary-flow__cta-copy h3 { margin: 0; font-family: var(--font-serif, "Shippori Mincho", "Yu Mincho", serif); font-size: clamp(1.8rem, 2.4vw, 2.1rem); font-weight: 500; line-height: 1.55; letter-spacing: .04em; }
.s-salary-flow__cta-action > p { margin: 0 0 22px; color: color-mix(in srgb, var(--salary-flow-surface) 82%, transparent); font-size: .9rem; line-height: 1.9; }
.s-salary-flow__cta-action a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 58px; padding: 14px 20px; color: var(--salary-flow-ink); background: var(--salary-flow-surface); text-decoration: none; box-shadow: 7px 7px 0 rgba(216, 189, 131, .72); transition: transform var(--corp-detail-action-duration, .2s) var(--corp-detail-action-ease, ease), box-shadow var(--corp-detail-action-duration, .2s) var(--corp-detail-action-ease, ease); }
.s-salary-flow__cta-action a:hover { transform: translate(var(--corp-detail-action-lift, -2px), var(--corp-detail-action-lift, -2px)); box-shadow: 10px 10px 0 rgba(216, 189, 131, .72); }
.s-salary-flow__cta-action a:focus-visible { outline: 3px solid #d8bd83; outline-offset: 4px; }
.s-salary-flow__cta-action a > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--salary-flow-blue-soft); }
.s-salary-flow__cta-action a svg { width: 18px; height: 18px; }
.s-salary-flow__cta-action a > svg { transition: transform var(--corp-detail-action-duration, .2s) var(--corp-detail-action-ease, ease); }
.s-salary-flow__cta-action a:hover > svg { transform: translateX(var(--corp-detail-action-arrow-shift, 3px)); }
.s-salary-flow__cta-action a b { font-size: .9rem; letter-spacing: .04em; }
.s-salary-flow__cta-action small { display: block; margin-top: 16px; color: color-mix(in srgb, var(--salary-flow-surface) 62%, transparent); font-size: .68rem; line-height: 1.7; }

@media (max-width: 1080px) {
  .s-salary-flow__inner { width: min(calc(100% - 48px), 920px); }
  .s-salary-flow__header { grid-template-columns: 1fr; gap: 28px; }
  .s-salary-flow__header > p { max-width: 620px; }
  .s-salary-flow__stages { display: block; width: min(100%, 760px); margin-inline: auto; padding: 0; }
  .s-salary-flow__stage { min-height: 0; margin: 0 0 46px; padding: 0 0 0 104px; }
  .s-salary-flow__stage::before { top: 70px; bottom: -48px; left: 31px; width: 2px; height: auto; }
  .s-salary-flow__stage::after { top: auto; right: auto; bottom: -42px; left: 25px; transform: rotate(135deg); }
  .s-salary-flow__step-index { top: 24px; left: 0; transform: none; }
  .s-salary-flow__step-index::after { top: 31px; left: 63px; width: 41px; height: 1px; }
  .s-salary-flow__card { display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 1fr); column-gap: 36px; min-height: 0; padding: 38px 40px; }
  .s-salary-flow__card-head { grid-column: 1 / -1; }
  .s-salary-flow__scene { grid-column: 1; grid-row: 2 / span 4; height: 230px; margin-top: 28px; }
  .s-salary-flow__guide { grid-column: 2; align-self: end; justify-self: start; margin-top: 30px; }
  .s-salary-flow__card h3, .s-salary-flow__body { grid-column: 2; }
  .s-salary-flow__cta { grid-template-columns: 112px 1fr; gap: clamp(30px, 4vw, 58px); width: min(100% - 72px, 760px); }
  .s-salary-flow__cta-mark { width: 98px; height: 98px; grid-row: 1 / 3; }
  .s-salary-flow__cta-action { grid-column: 2; }
}

@media (max-width: 720px) {
  .s-salary-flow { padding-block: 92px; }
  .s-salary-flow__inner { width: min(calc(100% - 36px), 560px); }
  .s-salary-flow__header { margin-bottom: 68px; }
  .s-salary-flow__header h2 { font-size: clamp(2rem, 9vw, 2.65rem); line-height: 1.5; }
  .s-salary-flow__header > p { padding-left: 18px; font-size: .9rem; line-height: 1.95; }
  .s-salary-flow__journey-head { display: block; padding-inline: 0; }
  .s-salary-flow__journey-head > p { flex-wrap: wrap; }
  .s-salary-flow__journey-head > p i { display: none; }
  .s-salary-flow__journey-head > p b { flex-basis: 100%; margin-top: 7px; }
  .s-salary-flow__journey-head > small { display: block; margin-top: 12px; }
  .s-salary-flow__stage { margin-bottom: 38px; padding-left: 58px; }
  .s-salary-flow__stage::before { top: 54px; bottom: -40px; left: 22px; }
  .s-salary-flow__stage::after { bottom: -34px; left: 16px; }
  .s-salary-flow__step-index { top: 24px; width: 46px; height: 46px; }
  .s-salary-flow__step-index span { margin-top: 5px; font-size: 1.08rem; }
  .s-salary-flow__step-index b { margin-top: -6px; font-size: .34rem; }
  .s-salary-flow__step-index::after { top: 22px; left: 45px; width: 13px; }
  .s-salary-flow__card { display: block; padding: 32px 25px 34px; }
  .s-salary-flow__card-head > p { display: block; }
  .s-salary-flow__card-head > p span { display: block; margin-bottom: 3px; }
  .s-salary-flow__pict { width: 58px; height: 58px; }
  .s-salary-flow__pict svg { width: 36px; height: 36px; }
  .s-salary-flow__scene { height: 158px; margin-top: 22px; border-radius: 86px 86px 16px 16px; }
  .s-salary-flow__scene img { width: 100%; height: 100%; }
  .s-salary-flow__guide { margin-top: 22px; }
  .s-salary-flow__card h3 { font-size: 1.42rem; }
  .s-salary-flow__tab { right: -8px; }
  .s-salary-flow__cta { display: block; width: calc(100% - 24px); margin-top: 94px; padding: 36px 26px 38px; }
  .s-salary-flow__cta::before { top: -55px; right: 28px; height: 55px; }
  .s-salary-flow__cta::after { top: -61px; right: 23px; }
  .s-salary-flow__cta-mark { width: 82px; height: 82px; margin: -74px 0 25px auto; box-shadow: 0 0 0 8px var(--salary-flow-paper); }
  .s-salary-flow__cta-mark span { margin-top: 15px; font-size: .42rem; }
  .s-salary-flow__cta-mark b { margin-top: -19px; font-size: 1.2rem; }
  .s-salary-flow__cta-copy h3 { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .s-salary-flow__cta-action { margin-top: 24px; }
  .s-salary-flow__cta-action a { padding-inline: 15px; }
  .s-salary-flow__cta-action a b { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .s-salary-flow__cta-action a, .s-salary-flow__cta-action a > svg { transition: none; }
}