body.page-about #scene-mission {
  background-image: url("../img/about-mission_bg.jpg") !important;
}

body.page-about #scene-vision {
  background-image: url("../img/about-vision_bg.jpg") !important;
}

body.page-about #scene-value {
  background-image: url("../img/about-value_bg.jpg") !important;
}

.l3d-scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0 !important;
}

.l3d-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.l3d-bg {
  position: absolute;
  top: -20%;
  left: 0;
  right: 0;
  height: 140%;
  background-size: cover;
  background-position: center center;
  will-change: transform;
  z-index: 0;
}

.l3d-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

#scene-mission .l3d-vignette {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.08) 35%,
    rgba(0, 0, 0, 0.08) 65%,
    rgba(0, 0, 0, 0.52) 100%
  );
}

#scene-vision .l3d-vignette {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.22) 55%,
    rgba(0, 0, 0, 0.08) 100%
  );
}

#scene-value .l3d-vignette {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.08) 35%,
    rgba(0, 0, 0, 0.08) 65%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.l3d-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

#scene-mission > .l3d-content {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 75px);
  padding-top: 52px;
  padding-bottom: 80px;
}

#scene-mission > .l3d-content > .u-content-width {
  margin-top: auto;
}

#scene-vision > .l3d-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - 75px);
  padding-top: 80px;
  padding-bottom: 100px;
}

#scene-value > .l3d-content {
  display: block;
  min-height: auto;
  padding-top: 30vh;
  padding-bottom: 100px;
}

@keyframes l3d-slide-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.page-about .c-about-page-title {
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  animation: l3d-slide-up 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) 0.1s both;
}

.l3d-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.l3d-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.l3d-reveal[data-delay="1"] {
  transition-delay: 150ms;
}

.l3d-reveal[data-delay="2"] {
  transition-delay: 300ms;
}

.l3d-reveal[data-delay="3"] {
  transition-delay: 450ms;
}

.l3d-reveal[data-delay="4"] {
  transition-delay: 600ms;
}

.l3d-reveal[data-delay="5"] {
  transition-delay: 750ms;
}

.l3d-reveal[data-delay="6"] {
  transition-delay: 900ms;
}

.l3d-reveal[data-delay="7"] {
  transition-delay: 1050ms;
}

body.page-about .c-value-item.l3d-reveal {
  opacity: 0;
  transform: translateY(80px);
  filter: blur(5px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s ease;
}

body.page-about .c-value-item.l3d-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

body.page-about .c-value-list .c-value-item:nth-child(1).l3d-reveal {
  transition-delay: 0ms;
}

body.page-about .c-value-list .c-value-item:nth-child(2).l3d-reveal {
  transition-delay: 100ms;
}

body.page-about .c-value-list .c-value-item:nth-child(3).l3d-reveal {
  transition-delay: 200ms;
}

body.page-about .c-value-list .c-value-item:nth-child(4).l3d-reveal {
  transition-delay: 300ms;
}

body.page-about .c-value-list .c-value-item:nth-child(5).l3d-reveal {
  transition-delay: 80ms;
}

body.page-about .c-value-list .c-value-item:nth-child(6).l3d-reveal {
  transition-delay: 160ms;
}

body.page-about .c-value-list .c-value-item:nth-child(7).l3d-reveal {
  transition-delay: 240ms;
}

body.page-about .l-msg-slide-wrap {
  position: relative;
  z-index: 40;
}

body.page-about .l-profile {
  position: relative;
  z-index: 40;
  background-color: #fff;
}

body.page-about .l-message {
  position: sticky;
  top: 0;
  z-index: 46;
}

body.page-about .c-highlight-section__main-title {
  font-size: clamp(72px, 7.2vw + 31px, 117px) !important;
}

body.page-about .c-highlight-section__sub-title {
  font-size: 16px !important;
}

body.page-about .c-about-page-title p {
  font-size: clamp(36px, 1.8vw + 26px, 47px) !important;
}

body.page-about .c-about-page-title h2 {
  font-size: 16px !important;
}

body.page-about #scene-mission .c-highlight-section__text,
body.page-about #scene-vision .c-highlight-section__text,
body.page-about #scene-value .c-highlight-section__text {
  font-size: clamp(20px, 1.8vw, 27px) !important;
  padding: 6px 14px 8px 22px !important;
  margin-top: 6px !important;
}

body.page-about .c-value-number {
  font-size: 40px !important;
}

body.page-about .c-value-title {
  font-size: clamp(25px, 0.9vw + 19px, 32px) !important;
}

body.page-about .c-value-description {
  font-size: clamp(14px, 0.9vw + 9px, 20px) !important;
}

body.page-about .c-message-highlight {
  font-size: clamp(20px, 1.8vw, 27px) !important;
}

body.page-about .c-message-highlight span {
  padding: 5px 11px !important;
}

body.page-about .c-message-text {
  font-size: 16px !important;
}

body.page-about .c-message-signature {
  font-size: clamp(13px, 0.9vw + 9px, 16px) !important;
}

body.page-about .c-profile-item {
  font-size: clamp(18px, 0vw + 15px, 21px) !important;
}

body.page-about .c-about-text {
  font-size: clamp(13px, 0.9vw + 9px, 16px) !important;
}

@media (max-width: 768px) {
  .l3d-bg {
    background-position: center center;
  }

  body.page-about #scene-mission > .l3d-content,
  body.page-about #scene-vision > .l3d-content {
    min-height: calc(100vh - 50px) !important;
  }

  body.page-about .c-highlight-section__main-title {
    font-size: 17vw !important;
  }

  body.page-about #scene-mission .c-highlight-section__text,
  body.page-about #scene-vision .c-highlight-section__text,
  body.page-about #scene-value .c-highlight-section__text {
    font-size: clamp(14px, 4vw, 18px) !important;
    padding: 4px 12px 6px 18px !important;
    margin-top: 4px !important;
    margin-left: -9px !important;
  }

  body.page-about .c-message-highlight {
    font-size: clamp(14px, 4vw, 18px) !important;
    gap: 5px !important;
    margin-bottom: 29px !important;
  }

  body.page-about .c-value-item {
    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
    margin-bottom: 16px !important;
    align-items: center !important;
  }

  body.page-about .c-value-number {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 18px !important;
    padding-top: 0 !important;
    align-self: center !important;
  }

  body.page-about .c-value-content {
    display: contents !important;
  }

  body.page-about .c-value-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    min-width: unset !important;
    margin: 0 !important;
    align-self: center !important;
  }

  body.page-about .c-value-description {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    padding-left: 0 !important;
  }

  body.page-about .l-values-title {
    margin-bottom: 30px !important;
  }

  body.page-about .l-footer .u-padding-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 415px) {
  body.page-about .c-highlight-section__main-title {
    font-size: 17vw !important;
  }

  body.page-about #scene-mission .c-highlight-section__text,
  body.page-about #scene-vision .c-highlight-section__text,
  body.page-about #scene-value .c-highlight-section__text {
    font-size: 4vw !important;
  }

  body.page-about .c-message-highlight {
    font-size: 4vw !important;
  }
}