/*!******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/1-section-hero/style.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************/
@keyframes infiniteBounce {
  from {
    transform: translateY(-1rem);
  }
  to {
    transform: translateY(0);
  }
}
.notre-impact-content .section-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 20rem);
  padding-bottom: 7rem !important;
  width: 100%;
  position: relative;
  padding: 3rem 0 5rem;
  box-sizing: border-box;
}
.notre-impact-content .section-hero .hero-images {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  position: relative;
  z-index: 0;
  margin-bottom: 5rem;
}
.notre-impact-content .section-hero .hero-images .image-hand {
  margin: 0;
  aspect-ratio: 3/4;
  flex-basis: clamp(100px, 22.5%, 230px);
  flex-shrink: 0;
  position: relative;
}
.notre-impact-content .section-hero .hero-images .image-hand:first-child {
  z-index: 5;
  transform: translate(200%, 0) rotateZ(0);
}
.notre-impact-content .section-hero .hero-images .image-hand:nth-child(2) {
  z-index: 4;
  transform: translate(100%, 0) rotateZ(0);
}
.notre-impact-content .section-hero .hero-images .image-hand:nth-child(3) {
  z-index: 3;
}
.notre-impact-content .section-hero .hero-images .image-hand:nth-child(4) {
  z-index: 2;
  transform: translate(-100%, 0) rotateZ(0);
}
.notre-impact-content .section-hero .hero-images .image-hand:nth-child(5) {
  z-index: 1;
  transform: translate(-200%, 0) rotateZ(0);
}
.notre-impact-content .section-hero .hero-images .image-hand picture, .notre-impact-content .section-hero .hero-images .image-hand img {
  width: 100%;
  height: 100%;
}
.notre-impact-content .section-hero .hero-images .image-hand img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.375rem;
}
.notre-impact-content .section-hero .hero-ttl {
  text-align: center;
  font-size: 2.5rem;
  line-height: 1.25em;
}
.notre-impact-content .section-hero .hero-ttl span {
  display: block;
  opacity: 0;
  transform: translateY(1.5rem);
}
.notre-impact-content .section-hero .hero-ttl .underline, .notre-impact-content .section-hero .hero-ttl zoro {
  color: var(--custom-color-accent-content);
  font-size: 3.75rem;
  opacity: 0;
  transform: translateY(1.5rem);
}
.notre-impact-content .section-hero .hero-ttl .underline::after, .notre-impact-content .section-hero .hero-ttl zoro::after {
  padding-bottom: calc(12.5% - 0.35em);
}
.notre-impact-content .section-hero .hero-ttl .underline::before, .notre-impact-content .section-hero .hero-ttl zoro::before {
  background-color: var(--ds-semantic-color-accent1-surface-subtle);
  -webkit-mask-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMjMgMjMiIGZpbGw9Im5vbmUiPgo8cGF0aCBkPSJNMiAxNC42MTg0QzE1LjYzODggMTAuODk5NyAyNi41NDk4IDguOTA5NTkgNDAuMTQ3MSA3LjE1MjQ0QzYzLjY1OTcgNC4xMTM5NyA4Ny43NzM4IDMuMzczNTkgMTEyLjIzNiAyLjM3NTM0QzExNi42NzcgMi4xOTQxMSAxMzEuMzI0IDEuMTIzMDMgMTIxLjk3NSAzLjA5MDQ4QzExNC4xMTQgNC43NDQ5MiAxMDkuMTIgNi40MTc4NCAxMDIuNjU4IDkuMjQwODlDOTYuMDM1NSAxMi4xMzQ2IDgzLjYzNzIgMTcuMjk5NCA4Ni40NDk4IDE2LjkzNTVDMTA0LjM1OSAxNC42MTg0IDEyNi4xNjEgMTMuMjE0MSAxNDYuMTg2IDEzLjIxNDFDMTYxLjM3NCAxMi44OTQxIDIwMS41MTYgMTYuOTM1NSAyMjEgMjAuNzQyMiIgc3Ryb2tlPSIjOTNDNUZEIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIi8+Cjwvc3ZnPg==);
          mask-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyMjMgMjMiIGZpbGw9Im5vbmUiPgo8cGF0aCBkPSJNMiAxNC42MTg0QzE1LjYzODggMTAuODk5NyAyNi41NDk4IDguOTA5NTkgNDAuMTQ3MSA3LjE1MjQ0QzYzLjY1OTcgNC4xMTM5NyA4Ny43NzM4IDMuMzczNTkgMTEyLjIzNiAyLjM3NTM0QzExNi42NzcgMi4xOTQxMSAxMzEuMzI0IDEuMTIzMDMgMTIxLjk3NSAzLjA5MDQ4QzExNC4xMTQgNC43NDQ5MiAxMDkuMTIgNi40MTc4NCAxMDIuNjU4IDkuMjQwODlDOTYuMDM1NSAxMi4xMzQ2IDgzLjYzNzIgMTcuMjk5NCA4Ni40NDk4IDE2LjkzNTVDMTA0LjM1OSAxNC42MTg0IDEyNi4xNjEgMTMuMjE0MSAxNDYuMTg2IDEzLjIxNDFDMTYxLjM3NCAxMi44OTQxIDIwMS41MTYgMTYuOTM1NSAyMjEgMjAuNzQyMiIgc3Ryb2tlPSIjOTNDNUZEIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIi8+Cjwvc3ZnPg==);
}
.notre-impact-content .section-hero .catch-copy {
  text-align: center;
  margin-bottom: 2rem;
  font-size: var(--ds-core-typography-font-size-s-bis);
  opacity: 0;
}
.notre-impact-content .section-hero .next-section-wrap {
  justify-content: center;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
}
.notre-impact-content .section-hero .next-section-wrap .arrow::after {
  display: none;
}
.notre-impact-content .section-hero .next-section-wrap .wp-block-button {
  width: 3.75rem;
  height: 3.75rem;
  position: static;
  padding: 0;
  animation: infiniteBounce ease-in-out 2.5s alternate infinite;
}
.notre-impact-content .section-hero .next-section-wrap .wp-block-button .wp-element-button {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 0;
  background: transparent;
}
.notre-impact-content .section-hero .next-section-wrap .wp-block-button .wp-element-button::after {
  background-color: var(--custom-color-accent2-content);
}
@media screen and (max-height: 1000px) {
  .notre-impact-content .section-hero {
    padding: 1.25rem 0 5rem;
  }
}
@media screen and (max-height: 850px) {
  .notre-impact-content .section-hero .hero-images {
    margin-bottom: 3rem !important;
  }
}
@media screen and (max-width: 839px) {
  .notre-impact-content .section-hero {
    min-height: calc(100svh - 85px);
    padding: 1.25rem 1.25rem 5rem;
  }
}
@media screen and (max-width: 600px) {
  .notre-impact-content .section-hero .hero-ttl {
    font-size: 1.75rem;
  }
  .notre-impact-content .section-hero .hero-ttl .underline, .notre-impact-content .section-hero .hero-ttl zoro {
    font-size: 3rem;
    line-height: 1;
  }
}
@media screen and (max-height: 700px) {
  .notre-impact-content .section-hero {
    min-height: 0;
    padding-top: 0 !important;
    justify-content: flex-start;
  }
}
@media screen and (max-height: 700px) and (max-width: 600px) {
  .notre-impact-content .section-hero {
    min-height: calc(100svh - 85px);
  }
}
@keyframes opacityAnim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hand1 {
  0% {
    opacity: 0;
    transform: translate(200%, 0) rotateZ(0);
  }
  33% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(26.25%, 40%) rotateZ(-15deg);
  }
}
@keyframes hand2 {
  0% {
    opacity: 0;
    transform: translate(100%, 0) rotateZ(0);
  }
  33% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(10%, 10%) rotateZ(-7.5deg);
  }
}
@keyframes hand4 {
  0% {
    opacity: 0;
    transform: translate(-100%, 0) rotateZ(0);
  }
  33% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-10%, 10%) rotateZ(7.5deg);
  }
}
@keyframes hand5 {
  0% {
    opacity: 0;
    transform: translate(-200%, 0) rotateZ(0);
  }
  33% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-26.25%, 40%) rotateZ(15deg);
  }
}
@keyframes fadeFromTop1 {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.section-hero .hero-images .image-hand:first-child {
  animation: hand1 ease-out 0.5s forwards;
}
.section-hero .hero-images .image-hand:nth-child(2) {
  animation: hand2 ease-out 0.5s forwards;
}
.section-hero .hero-images .image-hand:nth-child(3) {
  animation: opacityAnim ease-out 0.15s forwards;
}
.section-hero .hero-images .image-hand:nth-child(4) {
  animation: hand4 ease-out 0.5s forwards;
}
.section-hero .hero-images .image-hand:nth-child(5) {
  animation: hand5 ease-out 0.5s forwards;
}
.section-hero .hero-ttl span {
  animation: fadeFromTop1 ease-out 0.25s 0.25s forwards;
}
.section-hero .hero-ttl .underline, .section-hero .hero-ttl zoro {
  animation: fadeFromTop1 ease-out 0.25s 0.35s forwards;
}
.section-hero .catch-copy {
  animation: opacityAnim ease-out 0.25s 0.5s forwards;
}

/*# sourceMappingURL=style-index.css.map*/