@charset "utf-8";

/* 福利厚生ページ：成長支援・キャリア形成 */
.growth-career {
  --growth-navy: #063b80;
  --growth-text: #33383b;
  padding: clamp(40px, 3.6vw, 65px) 0 clamp(88px, 9vw, 162px);
  color: var(--growth-text);
}

.growth-career__intro {
  width: min(88%, 1120px);
  margin: 0 auto clamp(80px, 7.8vw, 140px);
  text-align: center;
}

.growth-career__heading {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.growth-career__heading .eyebrow {
  margin: 0 0 12px;
  color: #429bce;
  font-size: clamp(19px, 1.5vw, 27px);
}

.growth-career__heading h2 {
  margin: 0;
  color: #31475d;
  font-size: clamp(25px, 2.42vw, 43px);
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.55;
}

.growth-career__catchphrase {
  margin: clamp(44px, 4.2vw, 76px) 0 clamp(24px, 2.75vw, 49.5px);
  font-family: "Zen Old Mincho", "Yu Mincho", serif;
  font-weight: 400;
}

.growth-career__catchphrase-start {
  display: block;
  margin-bottom: 22px;
  font-size: clamp(24px, 2.35vw, 42px);
  line-height: 1.7;
  letter-spacing: .12em;
}

.growth-career__catchphrase-start > span {
  display: inline-block;
}

.growth-career__catchphrase-grid {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  font-size: clamp(24px, 3.6vw, 64.8px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.growth-career__catchphrase-grid > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.25em;
  padding: .05em 0 .12em;
  color: var(--growth-navy);
}

/* 各文字に同じ幅の背景を割り当て、行全体で左から右へ青をつなぐ。 */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .growth-career__catchphrase-grid > span {
    background-image: linear-gradient(to right, #063b80, #286db2 50%, #429bce);
    background-size: 1000% 100%;
    background-position: calc(var(--growth-character-index) * 100% / 9) center;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.growth-career__introduction {
  max-width: 1030px;
  margin: 0 auto;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 2.3;
  letter-spacing: .06em;
}

.growth-career__introduction p {
  margin: 0;
}

.growth-career__introduction p + p {
  max-width: 950px;
  margin: 36px auto 0;
  text-wrap: balance;
}

.growth-career__steps {
  display: grid;
  gap: clamp(80px, 6.7vw, 120px);
}

.growth-career__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2%;
  align-items: start;
}

.growth-career__content {
  min-width: 0;
  padding: clamp(32px, 4.6vw, 83px) 4.6vw 20px 9.25vw;
}

.growth-career__step-title {
  display: flex;
  align-items: center;
  gap: clamp(22px, 1.8vw, 32px);
  margin: 0 0 clamp(28px, 2.5vw, 45px);
  color: #202526;
  font-size: clamp(32px, 3.25vw, 58px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .03em;
}

.growth-career__number {
  flex-shrink: 0;
  padding-right: clamp(22px, 2vw, 36px);
  border-right: 1px solid #dbe1e4;
  color: var(--growth-navy);
  font-size: clamp(44px, 4.2vw, 76px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
}

.growth-career__subtitle {
  margin: 0 0 clamp(13px, 1.3vw, 23.5px);
  font-family: "Zen Old Mincho", "Yu Mincho", serif;
  font-size: clamp(21px, 1.7vw, 30px);
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: .025em;
  text-wrap: balance;
}

.growth-career__subtitle:not(.growth-career__subtitle--plain) > span {
  padding: .04em .3em .12em 1.2em;
  background: linear-gradient(100deg, #314f8e, #2993ba);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  color: #fff;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.growth-career__subtitle--plain {
  color: var(--growth-text);
  font-size: clamp(20.16px, 1.632vw, 28.8px);
  font-weight: 700;
}

.growth-career__body {
  font-size: clamp(15px, 1vw, 18px);
  line-height: 2.05;
  letter-spacing: .055em;
}

.growth-career__body p {
  margin: 0;
}

.growth-career__body p + p {
  margin-top: clamp(11px, 1.15vw, 20.5px);
}

.growth-career__body + .growth-career__subtitle {
  margin-top: clamp(20px, 2vw, 36px);
}

.growth-career__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1.09;
  margin: 0;
  overflow: hidden;
  background: #e8eef1;
}

.growth-career__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.growth-career__photo::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 35%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #7aafbdb3 48%, #063b80 48%, #053879 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.growth-career__row--reverse .growth-career__content {
  grid-column: 2;
  grid-row: 1;
  padding-left: 8.5vw;
  padding-right: 5.5vw;
}

.growth-career__row--reverse .growth-career__photo {
  grid-column: 1;
  grid-row: 1;
}

.growth-career__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) and (max-width: 1100px) {
  .growth-career__content {
    padding: 20px 3.5vw 0 6vw;
  }

  .growth-career__row--reverse .growth-career__content {
    padding: 20px 6vw 0 3.5vw;
  }

  .growth-career__photo {
    aspect-ratio: .8;
  }

}

@media (max-width: 767.98px) {
  .growth-career {
    padding: 44px 0 80px;
  }

  .growth-career__intro {
    width: 90%;
    margin-bottom: 64px;
  }

  .growth-career__heading h2 {
    font-size: clamp(23px, 5.8vw, 32px);
    letter-spacing: .045em;
  }

  .growth-career__heading .eyebrow {
    margin-bottom: 8px;
    font-size: 19px;
  }

  .growth-career__catchphrase {
    margin: 38px 0 19px;
  }

  .growth-career__catchphrase-start {
    margin-bottom: 14px;
    font-size: clamp(21px, 5.2vw, 32px);
    letter-spacing: .06em;
  }

  .growth-career__catchphrase-grid {
    font-size: clamp(24px, 6.6vw, 45.6px);
  }

  .growth-career__introduction {
    text-align: left;
    font-size: 15px;
    line-height: 2;
    letter-spacing: .035em;
  }

  .growth-career__introduction p + p {
    margin-top: 24px;
    text-wrap: wrap;
  }

  .growth-career__desktop-break {
    display: none;
  }

  .growth-career__steps {
    gap: 64px;
  }

  .growth-career__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .growth-career__content,
  .growth-career__row--reverse .growth-career__content {
    grid-column: auto;
    grid-row: auto;
    padding: 0;
    width: 88%;
    margin: 0 auto;
  }

  .growth-career__step-title {
    gap: 20px;
    margin-bottom: 24px;
    font-size: 32px;
  }

  .growth-career__number {
    padding-right: 20px;
    font-size: 46px;
  }

  .growth-career__subtitle {
    margin-bottom: 12.5px;
    font-size: clamp(20px, 4.8vw, 26px);
    line-height: 1.9;
  }

  .growth-career__subtitle--plain {
    font-size: clamp(19.2px, 4.608vw, 24.96px);
  }

  .growth-career__body {
    font-size: 15px;
    line-height: 2;
    letter-spacing: .035em;
  }

  .growth-career__body p + p {
    margin-top: 11px;
  }

  .growth-career__photo,
  .growth-career__row--reverse .growth-career__photo {
    grid-column: auto;
    grid-row: auto;
    width: 94%;
    aspect-ratio: 1.18;
    margin-left: auto;
  }

  .growth-career__row--reverse .growth-career__photo {
    margin-right: auto;
    margin-left: 0;
  }

}

/* JavaScriptで準備できた要素だけ、画面に入ったときに一度再生する。 */
@media screen and (prefers-reduced-motion: no-preference) {
  .growth-career__step-title.is-animation-ready {
    opacity: 0;
    transform: translateY(28px);
  }

  .growth-career__step-title.is-animation-ready.is-visible {
    animation: growth-career-title-in .9s cubic-bezier(.22, 1, .36, 1) both;
  }

  .growth-career__photo.is-animation-ready {
    opacity: 0;
  }

  .growth-career__photo.is-animation-ready.is-visible {
    animation: growth-career-photo-in 1.8s ease-in-out both;
  }

  .growth-career__catchphrase.is-animation-ready .growth-career__catchphrase-start > span,
  .growth-career__catchphrase.is-animation-ready .growth-career__catchphrase-grid > span {
    opacity: 0;
    transform: translate3d(-.2em, 0, 0);
    will-change: transform, opacity;
  }

  /* 文字の動きを重ね、緩やかな加減速で一続きに表示する。 */
  .growth-career__catchphrase.is-animation-ready.is-visible .growth-career__catchphrase-start > span,
  .growth-career__catchphrase.is-animation-ready.is-visible .growth-career__catchphrase-grid > span {
    animation: growth-career-character-in .9s cubic-bezier(.25, .1, .25, 1) both;
    animation-delay: calc((var(--growth-character-index) + var(--growth-character-offset, 0)) * 55ms);
  }

  .growth-career__subtitle:not(.growth-career__subtitle--plain).is-animation-ready > span {
    background-size: 0% 100%;
  }

  .growth-career__subtitle:not(.growth-career__subtitle--plain).is-animation-ready.is-visible > span {
    animation: growth-career-background-in .9s cubic-bezier(.22, 1, .36, 1) both;
  }
}

@keyframes growth-career-title-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes growth-career-photo-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes growth-career-character-in {
  from {
    opacity: 0;
    transform: translate3d(-.2em, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes growth-career-background-in {
  from { background-size: 0% 100%; }
  to { background-size: 100% 100%; }
}

@media print {
  .growth-career__catchphrase-grid > span {
    animation: none;
    background: none;
    color: var(--growth-navy);
    opacity: 1;
    transform: none;
  }

  .growth-career__subtitle:not(.growth-career__subtitle--plain).is-animation-ready > span {
    animation: none;
    background-size: 100% 100%;
    color: var(--growth-navy);
  }
}