@charset "UTF-8";
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes blinking-s {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blinking {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in-left {
  0% {
    transform: translateX(60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right {
  0% {
    transform: translateX(-60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-up {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-down {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-zoom-in {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fade-zoom-out {
  0% {
    transform: scale(1.1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fade-clip-left {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes fade-clip-right {
  from {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes fade-clip-up {
  from {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes fade-clip-down {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes fade-clip-center {
  from {
    clip-path: inset(100%);
    opacity: 0;
  }
  to {
    clip-path: inset(0);
    opacity: 1;
  }
}
@keyframes fade-clip-circle {
  from {
    clip-path: circle(0 at 50% 50%);
    opacity: 0;
  }
  to {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
  }
}
@keyframes fade-clip-skew {
  from {
    clip-path: polygon(0 0, 0 0, 0 0);
    opacity: 0;
  }
  to {
    clip-path: polygon(0 0, 200% 0, 0 200%);
    opacity: 1;
  }
}
@keyframes fade-clip-wave {
  from {
    clip-path: polygon(0 0, 0 0, 0 0);
    transition: all 0.5s cubic-bezier(0.55, 0.06, 0.33, 1.85);
    transform: translateX(-30px) scale(0.8) skew(8deg);
    opacity: 0;
  }
  to {
    clip-path: polygon(0 0, 200% 0, 0 200%);
    transform: translateX(0) scale(1) skew(0);
    opacity: 1;
  }
}
@keyframes cover-left {
  0%, 20% {
    transform-origin: 0 50%;
  }
  20%, 100% {
    transform-origin: 100% 50%;
  }
  20% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes cover-right {
  0%, 20% {
    transform-origin: 100% 50%;
  }
  20%, 100% {
    transform-origin: 0 50%;
  }
  20% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes cover-up {
  0%, 20% {
    transform-origin: 50% 100%;
  }
  20%, 100% {
    transform-origin: 50% 0;
  }
  20% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes cover-down {
  0%, 20% {
    transform-origin: 50% 0;
  }
  20%, 100% {
    transform-origin: 50% 100%;
  }
  20% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes hover-zoom-in {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@keyframes hover-zoom-out {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes hover-zoom-in-blink {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}
@keyframes hover-zoom-out-blink {
  0% {
    transform: scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes titleImgMaskIn {
  0% {
    clip-path: inset(100% 0 0 0);
  }
  100% {
    clip-path: inset(0% 0 0 0);
  }
}
@keyframes titleMaskIn {
  0% {
    clip-path: inset(100% 0 0 0);
  }
  100% {
    clip-path: inset(0% 0 0 0);
  }
}
@keyframes contentSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes introSlideUp {
  0% {
    transform: translateY(0);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes introSlideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
}
.intro {
  opacity: 1;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  transition: clip-path 0.5s ease;
  clip-path: inset(0 0 0 0);
}
.intro__inner {
  width: 100%;
  padding: 0 15px;
}
.intro:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
  opacity: 1;
  z-index: -1;
}
.intro__content {
  width: 100%;
  margin-bottom: 40px;
}
.intro__title__img {
  height: auto;
  clip-path: inset(100% 0 0 0);
  animation: titleImgMaskIn 0.3s ease-out 0.5s forwards;
  --title-img-margin-top: 45px;
  margin: var(--title-img-margin-top) 0 20px 0;
}
.intro__title__img img {
  height: auto;
}
.intro__title {
  color: var(--color-white);
  font-weight: 700;
  line-height: 1.5;
  font-size: 1.5rem;
  clip-path: inset(100% 0 0 0);
  animation: titleMaskIn 0.3s ease-out 0.5s forwards;
}
.intro.intro--scrolled {
  clip-path: inset(0 0 100% 0);
}
.intro.intro--returning {
  animation: introSlideDown 0.3s ease forwards;
}

body {
  background-color: #ffffff;
  color: #323232;
}

.sec-head {
  padding: 110px 0 58px 0;
}
.sec-head--thin {
  padding: 110px 0 31px 0;
}
.sec-head--small {
  padding: 110px 0 60px 0;
}
.sec-head--padding-bottom--narrow {
  padding: 110px 0 0px 0;
}

.description__inner {
  padding: 0 15px;
}
.description__title__img {
  height: auto;
  margin-bottom: 21px;
}
.description__title__img img {
  height: auto;
}
.description__title {
  font-weight: 700;
  line-height: 1.5;
  font-size: 1.5rem;
}
.description__copy {
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
  font-size: 1.5rem;
  padding: 52px 0 29px 0;
}
.description__copy span {
  color: var(--color-primary);
}
.description__text {
  font-weight: 700;
  line-height: 1.65;
  font-size: 0.875rem;
  margin-top: 32px;
}
.description__img {
  width: 90%;
  height: auto;
  margin: 0 auto;
}
.description__img img {
  display: block;
  margin: 0 auto;
}
.description__img img.img--roadmap1 {
  box-sizing: content-box;
  margin-top: 70px;
}

.section {
  padding: 0px 10px 0px 10px;
}
.section--full-width {
  padding: 0px 0px 0px 0px;
}
.section__container {
  padding: 0px 10px 0px 10px;
}
.section__container--nopadding {
  padding: 0px 0px 0px 0px;
}
.section__head__wrapper {
  padding: 0px 10px;
}
.section__head {
  border-top: 1px solid var(--color-primary);
  padding: 20px 5px 0;
}
.section__head__title {
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.5;
  font-size: 1.5rem;
  margin-bottom: 32px;
}
.section__head__title--skill {
  margin-bottom: 50px;
}
.section__head__title--mid {
  margin-bottom: 31px;
}
.section__head__title--office {
  margin-bottom: 50px;
}
.section__head__title--staff {
  color: #323232;
  margin-bottom: 31px;
}
.section__head__text {
  font-weight: 700;
  line-height: 1.67;
  font-size: 0.875rem;
}
.section__head__text--normal {
  font-weight: 400;
}
.section__head__subtext {
  line-height: 1.65;
  font-size: 0.75rem;
}
.section__head__name {
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.65;
  font-size: 1.3125rem;
  margin-bottom: 14px;
}
.section__head__name span {
  line-height: 1.65;
  font-size: 0.875rem;
  margin-left: 21px;
}
.section__head__position {
  font-weight: 700;
  line-height: 1.65;
  font-size: 0.875rem;
  margin-bottom: 36px;
}
.section__head__position span {
  font-weight: 400;
  margin: 0 12px;
}
.section__head__profile {
  font-weight: 700;
  line-height: 1.67;
  font-size: 0.875rem;
}
.section__head__interview {
  text-align: right;
  font-weight: 700;
  line-height: 1.65;
  font-size: 0.875rem;
  margin: 0 0px 32px;
}
.section__list {
  font-weight: 700;
  line-height: 1.67;
  font-size: 0.875rem;
  list-style-position: outside;
  padding-left: 1em;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 20px 0;
  padding-left: 10px;
}
.section__list li {
  position: relative;
  padding-left: 7px;
  display: inline-block;
}
.section__list li::before {
  content: "■";
  position: absolute;
  left: -1em;
  color: var(--color-primary);
}
.section__list--row {
  width: 100%;
  font-weight: 700;
  line-height: 1.67;
  font-size: 0.875rem;
  list-style-position: outside;
  padding-left: 1em;
  list-style-type: none;
  padding-left: 15px;
}
.section__list--row li {
  position: relative;
  padding-left: 7px;
  display: inline-block;
}
.section__list--row li::before {
  content: "■";
  position: absolute;
  left: -1em;
  color: var(--color-primary);
}
.section__list--row li {
  display: inline-block;
  margin-right: 20px;
}
.section__list--row--normal {
  font-weight: 400;
}
.section__body {
  padding: 0 20px;
}
.section__body__inner {
  padding: 0 20px;
}
.section__body--padding-thin-sp {
  padding: 0 5px;
}
.section__body--padding-mid-sp {
  padding: 0 10px;
}
.section__body--no-padding-right {
  padding: 0 0px 0 0px;
}
.section__body--full-width {
  padding: 0 0 0 0;
}
.section__body--padding-middle {
  padding: 0 20px;
}
.section__body--padding-wide {
  padding: 0 20px;
}
.section__body--padding-wide-sp-nopadding {
  padding: 0 0px;
}
.section__title {
  color: var(--color-primary);
  font-weight: 700;
  line-height: 1.65;
  font-size: 3rem;
  margin-bottom: 40px;
}
.section__title--hero {
  margin-bottom: 70px;
}
.section__subtitle {
  font-weight: 700;
  line-height: 1.65;
  font-size: 1.3125rem;
  margin-bottom: 16px;
}
.section__text {
  font-weight: 700;
  line-height: 1.65;
  font-size: 0.875rem;
}
.section__title--hero {
  color: #323232;
  font-weight: 700;
  line-height: 1.65;
  font-size: 1.3125rem;
  margin-bottom: 20px;
  padding: 0 15px;
}
.section__text--hero {
  color: #323232;
  font-weight: 700;
  line-height: 1.65;
  font-size: 0.875rem;
  margin-bottom: 62px;
  padding: 0 15px;
}
.section__subtext {
  line-height: 1.65;
  font-size: 0.8125rem;
}
.section__img {
  width: 100%;
  height: auto;
}
.section__img img {
  display: block;
  margin: 0 auto;
}
.section__img img.img--roadmap2 {
  box-sizing: content-box;
  margin-top: 70px;
}
.section__img.img--data {
  box-sizing: content-box;
  margin-top: 50px;
  margin-bottom: 62px;
}
.section__img--data {
  margin-bottom: 70px;
}
.section__img--left {
  width: auto;
  margin-left: 0;
}
.section__img--left img {
  margin-left: 0;
}
.section__img__caption {
  text-align: center;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.65;
  font-size: 0.875rem;
  margin-top: 55px;
}
.section__img__text {
  text-align: center;
  font-weight: 700;
  line-height: 1.65;
  font-size: 0.875rem;
  margin-top: 50px;
}
.section__foot {
  display: flex;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 0px;
  padding-right: 0px;
}
.section__foot--nomargin-top {
  margin-top: 50px;
}
.section__nav {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px 0;
}
.section__nav-item {
  align-self: flex-end;
  text-align: right;
}
.section__nav--large {
  gap: 20px 0;
}

/* アニメーション初期状態（隠す） */
.st-animate {
  opacity: 0;
  visibility: hidden;
}

/* アニメーション実行時に表示 */
.st-animate.animate__animated {
  opacity: 1;
  visibility: visible;
}

/* カスタムアニメーション遅延 */
.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.4s;
}

.delay-3 {
  animation-delay: 0.6s;
}

/* data属性対応のアニメーションミックスイン */
/* 通常のアニメーションクラス（遅延なし） */
.animate__fadeIn {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(30px * 0.5);
  animation-name: fadeIn;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__fadeIn[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__fadeIn[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__fadeIn[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__fadeInUp {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(1000px * 0.5);
  animation-name: fadeInUp;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__fadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__fadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__fadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__fadeInDown {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(100px * 0.5);
  animation-name: fadeInDown;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__fadeInDown[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__fadeInDown[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__fadeInDown[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__fadeInLeft {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(100px * 0.5);
  animation-name: fadeInLeft;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__fadeInLeft[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__fadeInLeft[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__fadeInLeft[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__fadeInRight {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(100px * 0.5);
  animation-name: fadeInRight;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__fadeInRight[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__fadeInRight[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__fadeInRight[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__slideInUp {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(30px * 0.5);
  animation-name: slideInUp;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__slideInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__slideInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__slideInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__slideInDown {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(30px * 0.5);
  animation-name: slideInDown;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__slideInDown[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__slideInDown[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__slideInDown[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__slideInLeft {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(100% * 0.5);
  animation-name: slideInLeft;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__slideInLeft[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__slideInLeft[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__slideInLeft[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__slideInRight {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(100% * 0.5);
  animation-name: slideInRight;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__slideInRight[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__slideInRight[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__slideInRight[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__bounceInUp {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(3000px * 0.5);
  animation-name: bounceInUp;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__bounceInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__bounceInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__bounceInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__bounceInDown {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(3000px * 0.5);
  animation-name: bounceInDown;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__bounceInDown[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__bounceInDown[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__bounceInDown[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__zoomInUp {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(1000px * 0.5);
  animation-name: zoomInUp;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__zoomInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__zoomInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__zoomInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__zoomInDown {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(1000px * 0.5);
  animation-name: zoomInDown;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__zoomInDown[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__zoomInDown[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__zoomInDown[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__zoomInLeft {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(1000px * 0.5);
  animation-name: zoomInLeft;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__zoomInLeft[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__zoomInLeft[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__zoomInLeft[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__zoomInRight {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(1000px * 0.5);
  animation-name: zoomInRight;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__zoomInRight[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__zoomInRight[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__zoomInRight[data-distance] {
  --animate-distance: attr(data-distance);
}

/* .st-animate要素専用のアニメーションクラス（遅延付き） */
.st-animate.animate__fadeIn {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(30px * 0.5);
  animation-name: fadeIn;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__fadeIn[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__fadeIn[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__fadeIn[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__fadeInUp {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(100px * 0.5);
  animation-name: fadeInUp;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__fadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__fadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__fadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__fadeInDown {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(100px * 0.5);
  animation-name: fadeInDown;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__fadeInDown[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__fadeInDown[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__fadeInDown[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__fadeInLeft {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(100px * 0.5);
  animation-name: fadeInLeft;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__fadeInLeft[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__fadeInLeft[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__fadeInLeft[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__fadeInRight {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(100px * 0.5);
  animation-name: fadeInRight;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__fadeInRight[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__fadeInRight[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__fadeInRight[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__slideInUp {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(30px * 0.5);
  animation-name: slideInUp;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__slideInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__slideInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__slideInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__slideInDown {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(30px * 0.5);
  animation-name: slideInDown;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__slideInDown[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__slideInDown[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__slideInDown[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__slideInLeft {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(100% * 0.5);
  animation-name: slideInLeft;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__slideInLeft[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__slideInLeft[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__slideInLeft[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__slideInRight {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(100% * 0.5);
  animation-name: slideInRight;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__slideInRight[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__slideInRight[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__slideInRight[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__bounceInUp {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(3000px * 0.5);
  animation-name: bounceInUp;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__bounceInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__bounceInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__bounceInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__bounceInDown {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(3000px * 0.5);
  animation-name: bounceInDown;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__bounceInDown[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__bounceInDown[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__bounceInDown[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__zoomInUp {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(1000px * 0.5);
  animation-name: zoomInUp;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__zoomInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__zoomInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__zoomInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__zoomInDown {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(1000px * 0.5);
  animation-name: zoomInDown;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__zoomInDown[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__zoomInDown[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__zoomInDown[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__zoomInLeft {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(1000px * 0.5);
  animation-name: zoomInLeft;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__zoomInLeft[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__zoomInLeft[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__zoomInLeft[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__zoomInRight {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(1000px * 0.5);
  animation-name: zoomInRight;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__zoomInRight[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__zoomInRight[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__zoomInRight[data-distance] {
  --animate-distance: attr(data-distance);
}

/* clip-pathアニメーションクラス（遅延なし） */
.animate__clipInFromLeft {
  --animate-duration: 0.65s;
  --animate-delay: 0s;
  --animate-distance: calc(30px * 0.5);
  animation-name: clipInFromLeft;
  animation-duration: var(--animate-duration, 0.65s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__clipInFromLeft[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__clipInFromLeft[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__clipInFromLeft[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__clipInFromRight {
  --animate-duration: 0.65s;
  --animate-delay: 0s;
  --animate-distance: calc(30px * 0.5);
  animation-name: clipInFromRight;
  animation-duration: var(--animate-duration, 0.65s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__clipInFromRight[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__clipInFromRight[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__clipInFromRight[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__clipInFromTop {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(30px * 0.5);
  animation-name: clipInFromTop;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__clipInFromTop[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__clipInFromTop[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__clipInFromTop[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__clipInFromBottom {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(30px * 0.5);
  animation-name: clipInFromBottom;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__clipInFromBottom[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__clipInFromBottom[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__clipInFromBottom[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__clipInFromCenter {
  --animate-duration: 0.5s;
  --animate-delay: 0s;
  --animate-distance: calc(30px * 0.5);
  animation-name: clipInFromCenter;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.animate__clipInFromCenter[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__clipInFromCenter[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__clipInFromCenter[data-distance] {
  --animate-distance: attr(data-distance);
}

/* .st-animate要素専用のclip-pathアニメーションクラス（遅延付き） */
.st-animate.animate__clipInFromLeft {
  --animate-duration: 0.65s;
  --animate-delay: 0.15s;
  --animate-distance: calc(30px * 0.5);
  animation-name: clipInFromLeft;
  animation-duration: var(--animate-duration, 0.65s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__clipInFromLeft[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__clipInFromLeft[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__clipInFromLeft[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__clipInFromRight {
  --animate-duration: 0.65s;
  --animate-delay: 0.15s;
  --animate-distance: calc(30px * 0.5);
  animation-name: clipInFromRight;
  animation-duration: var(--animate-duration, 0.65s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__clipInFromRight[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__clipInFromRight[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__clipInFromRight[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__clipInFromTop {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(30px * 0.5);
  animation-name: clipInFromTop;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__clipInFromTop[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__clipInFromTop[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__clipInFromTop[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__clipInFromBottom {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(30px * 0.5);
  animation-name: clipInFromBottom;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__clipInFromBottom[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__clipInFromBottom[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__clipInFromBottom[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__clipInFromCenter {
  --animate-duration: 0.5s;
  --animate-delay: 0.15s;
  --animate-distance: calc(30px * 0.5);
  animation-name: clipInFromCenter;
  animation-duration: var(--animate-duration, 0.5s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}
.st-animate.animate__clipInFromCenter[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__clipInFromCenter[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__clipInFromCenter[data-distance] {
  --animate-distance: attr(data-distance);
}

/* 移動距離をカスタマイズするためのオーバーライド */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, var(--animate-distance, 30px), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, calc(-1 * var(--animate-distance, 30px)), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(calc(-1 * var(--animate-distance, 30px)), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(var(--animate-distance, 30px), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    transform: translate3d(calc(-1 * var(--animate-distance, 100%)), 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    transform: translate3d(var(--animate-distance, 100%), 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, var(--animate-distance, 3000px), 0) scaleY(5);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--animate-distance, 20px)), 0) scaleY(0.9);
  }
  75% {
    transform: translate3d(0, calc(var(--animate-distance, 10px) * 0.33), 0) scaleY(0.95);
  }
  90% {
    transform: translate3d(0, calc(-1 * var(--animate-distance, 5px)), 0) scaleY(0.985);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, calc(-1 * var(--animate-distance, 3000px)), 0) scaleY(5);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, var(--animate-distance, 25px), 0) scaleY(0.9);
  }
  75% {
    transform: translate3d(0, calc(-1 * var(--animate-distance, 10px)), 0) scaleY(0.95);
  }
  90% {
    transform: translate3d(0, var(--animate-distance, 5px), 0) scaleY(0.985);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, var(--animate-distance, 1000px), 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, calc(-1 * var(--animate-distance, 60px)), 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, calc(-1 * var(--animate-distance, 1000px)), 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, var(--animate-distance, 60px), 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(calc(-1 * var(--animate-distance, 1000px)), 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(var(--animate-distance, 10px), 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(var(--animate-distance, 1000px), 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(calc(-1 * var(--animate-distance, 10px)), 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
/* clip-pathアニメーションのキーフレーム */
@keyframes clipInFromLeft {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
  }
}
@keyframes clipInFromRight {
  from {
    clip-path: inset(0 0 0 100%);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 0 0%);
    opacity: 1;
  }
}
@keyframes clipInFromTop {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
  }
}
@keyframes clipInFromBottom {
  from {
    clip-path: inset(100% 0 0 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0% 0 0 0);
    opacity: 1;
  }
}
@keyframes clipInFromCenter {
  from {
    clip-path: inset(50% 50% 50% 50%);
    opacity: 1;
  }
  to {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.animate__blink {
  animation: blink 0.5s ease;
}

/* 複合アニメーションクラス */
/* clip + fadeInUp の組み合わせ */
@keyframes clipInFromLeftFadeInUp {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: translate3d(0, var(--animate-distance, 30px), 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes clipInFromRightFadeInUp {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: translate3d(0, var(--animate-distance, 30px), 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes clipInFromTopFadeInUp {
  from {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    transform: translate3d(0, var(--animate-distance, 30px), 0);
  }
  to {
    clip-path: inset(0% 0 0 0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes clipInFromBottomFadeInUp {
  from {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    transform: translate3d(0, var(--animate-distance, 30px), 0);
  }
  to {
    clip-path: inset(0% 0 0 0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes clipInFromCenterFadeInUp {
  from {
    clip-path: inset(50% 50% 50% 50%);
    opacity: 0;
    transform: translate3d(0, var(--animate-distance, 30px), 0);
  }
  to {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* 複合アニメーションクラス（遅延なし） */
.animate__clipInFromLeftFadeInUp {
  --animate-duration: 0.8s;
  --animate-delay: 0s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipInFromLeftFadeInUp;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --animate-distance: calc(50px * 0.5);
}
.animate__clipInFromLeftFadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__clipInFromLeftFadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__clipInFromLeftFadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__clipInFromRightFadeInUp {
  --animate-duration: 0.8s;
  --animate-delay: 0s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipInFromRightFadeInUp;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --animate-distance: calc(50px * 0.5);
}
.animate__clipInFromRightFadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__clipInFromRightFadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__clipInFromRightFadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__clipInFromTopFadeInUp {
  --animate-duration: 0.8s;
  --animate-delay: 0s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipInFromTopFadeInUp;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --animate-distance: calc(50px * 0.5);
}
.animate__clipInFromTopFadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__clipInFromTopFadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__clipInFromTopFadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__clipInFromBottomFadeInUp {
  --animate-duration: 0.8s;
  --animate-delay: 0s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipInFromBottomFadeInUp;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --animate-distance: calc(50px * 0.5);
}
.animate__clipInFromBottomFadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__clipInFromBottomFadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__clipInFromBottomFadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.animate__clipInFromCenterFadeInUp {
  --animate-duration: 0.8s;
  --animate-delay: 0s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipInFromCenterFadeInUp;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --animate-distance: calc(50px * 0.5);
}
.animate__clipInFromCenterFadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__clipInFromCenterFadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__clipInFromCenterFadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

/* .st-animate要素専用の複合アニメーションクラス（遅延付き） */
.st-animate.animate__clipInFromLeftFadeInUp {
  padding-bottom: 2%;
  --animate-duration: 0.8s;
  --animate-delay: 0.15s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipInFromLeftFadeInUp;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --animate-distance: calc(50px * 0.5);
}
.st-animate.animate__clipInFromLeftFadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__clipInFromLeftFadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__clipInFromLeftFadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__clipInFromRightFadeInUp {
  --animate-duration: 0.8s;
  --animate-delay: 0.15s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipInFromRightFadeInUp;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --animate-distance: calc(50px * 0.5);
}
.st-animate.animate__clipInFromRightFadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__clipInFromRightFadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__clipInFromRightFadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__clipInFromTopFadeInUp {
  --animate-duration: 0.8s;
  --animate-delay: 0.15s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipInFromTopFadeInUp;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --animate-distance: calc(50px * 0.5);
}
.st-animate.animate__clipInFromTopFadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__clipInFromTopFadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__clipInFromTopFadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__clipInFromBottomFadeInUp {
  --animate-duration: 0.8s;
  --animate-delay: 0.15s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipInFromBottomFadeInUp;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --animate-distance: calc(50px * 0.5);
}
.st-animate.animate__clipInFromBottomFadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__clipInFromBottomFadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__clipInFromBottomFadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__clipInFromCenterFadeInUp {
  --animate-duration: 0.8s;
  --animate-delay: 0.15s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipInFromCenterFadeInUp;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --animate-distance: calc(50px * 0.5);
}
.st-animate.animate__clipInFromCenterFadeInUp[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__clipInFromCenterFadeInUp[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__clipInFromCenterFadeInUp[data-distance] {
  --animate-distance: attr(data-distance);
}

/* アニメーション組み合わせユーティリティクラス */
/* 複数のアニメーションを順次実行するためのクラス */
.animate-combined {
  /* 最初のアニメーション */
  /* 2番目のアニメーション（最初のアニメーション完了後に開始） */
  /* 3番目のアニメーション */
}
.animate-combined.animate-first {
  animation-fill-mode: both;
}
.animate-combined.animate-second {
  animation-fill-mode: both;
  animation-delay: calc(var(--animate-duration, 0.5s) + var(--animate-delay, 0s));
}
.animate-combined.animate-third {
  animation-fill-mode: both;
  animation-delay: calc(var(--animate-duration, 0.5s) * 2 + var(--animate-delay, 0s));
}

/* 同時実行アニメーション用のミックスイン */
/* 同時実行アニメーションクラス */
.animate__clipInFromLeftWithFadeInUp {
  animation: clipInFromLeft 0.8s ease 0s both, fadeInUp 0.8s ease 0s both;
}

.animate__clipInFromRightWithFadeInUp {
  animation: clipInFromRight 0.8s ease 0s both, fadeInUp 0.8s ease 0s both;
}

.animate__clipInFromTopWithFadeInUp {
  animation: clipInFromTop 0.8s ease 0s both, fadeInUp 0.8s ease 0s both;
}

.animate__clipInFromBottomWithFadeInUp {
  animation: clipInFromBottom 0.8s ease 0s both, fadeInUp 0.8s ease 0s both;
}

.animate__clipInFromCenterWithFadeInUp {
  animation: clipInFromCenter 0.8s ease 0s both, fadeInUp 0.8s ease 0s both;
}

/* .st-animate要素専用の同時実行アニメーションクラス */
.st-animate.animate__clipInFromLeftWithFadeInUp {
  animation: clipInFromLeft 0.8s ease 0.15s both, fadeInUp 0.8s ease 0.15s both;
}

.st-animate.animate__clipInFromRightWithFadeInUp {
  animation: clipInFromRight 0.8s ease 0.15s both, fadeInUp 0.8s ease 0.15s both;
}

.st-animate.animate__clipInFromTopWithFadeInUp {
  animation: clipInFromTop 0.8s ease 0.15s both, fadeInUp 0.8s ease 0.15s both;
}

.st-animate.animate__clipInFromBottomWithFadeInUp {
  animation: clipInFromBottom 0.8s ease 0.15s both, fadeInUp 0.8s ease 0.15s both;
}

.st-animate.animate__clipInFromCenterWithFadeInUp {
  animation: clipInFromCenter 0.8s ease 0.15s both, fadeInUp 0.8s ease 0.15s both;
}

@keyframes clipZoomIn {
  from {
    clip-path: inset(5% round var(--clip-round, 15px));
    transform: scale(1) translate3d(0, 30px, 0);
  }
  to {
    clip-path: inset(0% round var(--clip-round, 15px));
    transform: scale(1) translate3d(0, 0, 0);
  }
}
.animate__clipZoom {
  --animate-duration: 0.8s;
  --animate-delay: 0s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipZoomIn;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --clip-round: 15px;
}
.animate__clipZoom[data-duration] {
  --animate-duration: attr(data-duration);
}
.animate__clipZoom[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.animate__clipZoom[data-distance] {
  --animate-distance: attr(data-distance);
}

.st-animate.animate__clipZoom {
  --animate-duration: 0.8s;
  --animate-delay: 0.15s;
  --animate-distance: calc(50px * 0.5);
  animation-name: clipZoomIn;
  animation-duration: var(--animate-duration, 0.8s);
  animation-delay: var(--animate-delay, 0.15s);
  animation-timing-function: ease;
  animation-fill-mode: both;
  --clip-round: 15px;
}
.st-animate.animate__clipZoom[data-duration] {
  --animate-duration: attr(data-duration);
}
.st-animate.animate__clipZoom[data-delay-time] {
  --animate-delay: attr(data-delay-time);
}
.st-animate.animate__clipZoom[data-distance] {
  --animate-distance: attr(data-distance);
}

.interview {
  margin-bottom: 70px;
}
.interview__body {
  display: flex;
  flex-direction: column;
  gap: 50px 0;
  padding: 0px 15px;
}
.interview__hero {
  margin-bottom: 70px;
}
.interview__hero--left {
  width: 70%;
}
.interview__hero--right {
  margin-left: auto;
  width: 70%;
}
.interview__hero img {
  width: 100%;
  height: auto;
}
.interview__profile {
  padding: 0px 58px;
  margin-bottom: 32px;
}
.interview .grid2 {
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  align-items: flex-start;
  -ms-grid-columns: (1fr)[1];
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 20px 20px;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  height: auto;
  box-sizing: border-box;
}
.interview .grid2-item {
  -ms-grid-row-align: stretch;
      align-self: stretch;
  overflow: hidden;
}
.interview .profile {
  display: flex;
  flex-direction: column;
}
.interview .profile__img {
  width: 100%;
  height: auto;
  margin-bottom: 23px;
}
.interview .profile__img img {
  width: 100%;
  height: auto;
}
.interview .profile__company {
  display: inline-block;
  line-height: 1.65;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.interview .profile__names {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 16px;
}
.interview .profile__names-ja {
  line-height: 1.65;
  font-size: 1.3125rem;
}
.interview .profile__names-en {
  line-height: 1.65;
  font-size: 0.875rem;
  margin-left: 22px;
}
.interview .profile__bio {
  display: inline-block;
  line-height: 1.65;
  font-size: 0.75rem;
}
.interview__foot {
  margin-top: 75px;
}
.interview__foot img {
  width: 100%;
  height: auto;
}
.interview__title {
  line-height: 1.5;
  font-size: 1.3125rem;
  font-weight: 700;
  margin-bottom: 26px;
}
.interview__question {
  line-height: 1.67;
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 22px;
}
.interview__answer {
  line-height: 1.67;
  font-size: 0.875rem;
  color: #323232;
  font-weight: 700;
  margin-bottom: 22px;
}
.interview__speaker {
  color: var(--color-primary);
}
.interview__separator {
  margin: 0 0.31em;
}
@media (min-width: 640px) {
  .intro__inner {
    padding: 0 40px;
  }
  .intro__content {
    margin-bottom: 56px;
  }
  .intro__title__img {
    --title-img-margin-top: -8px;
    margin: var(--title-img-margin-top) 0 27px 0;
    width: 70%;
  }
  .intro__title {
    line-height: 1.5;
    font-size: 2.25rem;
  }
  .sec-head {
    padding: 140px 0 80px 0;
  }
  .sec-head--thin {
    padding: 170px 0 60px 0;
  }
  .sec-head--small {
    padding: 170px 0 70px 0;
  }
  .sec-head--padding-bottom--narrow {
    padding: 170px 0 0px 0;
  }
  .description__inner {
    padding: 0 40px;
  }
  .description__title__img {
    width: 70%;
  }
  .description__title {
    line-height: 1.5;
    font-size: 2.25rem;
  }
  .description__copy {
    line-height: 1.5;
    font-size: 1.75rem;
  }
  .description__copy {
    padding: 76px 0 36px 0;
  }
  .description__text {
    line-height: 1.65;
    font-size: 1.125rem;
  }
  .description__img img.img--roadmap1 {
    margin-top: 141px;
    margin-bottom: 38px;
    padding-left: 20px;
  }
  .section {
    padding: 0px 20px 0px 20px;
  }
  .section--full-width {
    padding: 0px 0px 0px 0px;
  }
  .section__container {
    padding: 0px 20px 0px 20px;
  }
  .section__container--nopadding {
    padding: 0px 0px 0px 0px;
  }
  .section__head__wrapper {
    padding: 0px 20px;
  }
  .section__head {
    padding: 28px 20px 0;
  }
  .section__head__title {
    line-height: 1.5;
    font-size: 1.875rem;
  }
  .section__head__title {
    margin-bottom: 42px;
  }
  .section__head__title--skill {
    margin-bottom: 10px;
  }
  .section__head__title--mid {
    margin-bottom: 42px;
  }
  .section__head__title--office {
    margin-bottom: 64px;
  }
  .section__head__title--staff {
    margin-bottom: 56px;
  }
  .section__head__text {
    line-height: 1.67;
    font-size: 1.125rem;
  }
  .section__head__subtext {
    line-height: 1.65;
    font-size: 0.9375rem;
  }
  .section__head__name {
    line-height: 1.65;
    font-size: 1.75rem;
  }
  .section__head__name {
    margin-bottom: 23px;
  }
  .section__head__name span {
    line-height: 1.65;
    font-size: 1.125rem;
  }
  .section__head__name span {
    margin-left: 36px;
  }
  .section__head__position {
    line-height: 1.65;
    font-size: 1.125rem;
  }
  .section__head__position span {
    margin: 0 24px;
  }
  .section__head__position {
    margin-bottom: 50px;
  }
  .section__head__profile {
    line-height: 1.67;
    font-size: 1.125rem;
  }
  .section__head__interview {
    line-height: 1.65;
    font-size: 1.125rem;
  }
  .section__head__interview {
    margin: 0 0 90px;
  }
  .section__list {
    line-height: 1.67;
    font-size: 1.125rem;
  }
  .section__list {
    gap: 40px 0;
  }
  .section__list {
    padding-left: 41px;
  }
  .section__list--row {
    line-height: 1.67;
    font-size: 1.125rem;
  }
  .section__list--row li {
    margin-right: 40px;
  }
  .section__list--row {
    padding-left: 25px;
  }
  .section__body {
    padding: 0 20px;
  }
  .section__body__inner {
    padding: 0 20px;
  }
  .section__body--padding-thin-sp {
    padding: 0 20px;
  }
  .section__body--padding-mid-sp {
    padding: 0 20px;
  }
  .section__body--no-padding-right {
    padding: 0 0 0 40px;
  }
  .section__body--full-width {
    padding: 0 0 0 0;
  }
  .section__body--padding-middle {
    padding: 0 40px;
  }
  .section__body--padding-wide {
    padding: 0 120px;
  }
  .section__body--padding-wide-sp-nopadding {
    padding: 0 40px;
  }
  .section__title {
    line-height: 1.65;
    font-size: 3rem;
  }
  .section__title {
    margin-bottom: 80px;
  }
  .section__title--hero {
    margin-bottom: 140px;
  }
  .section__subtitle {
    line-height: 1.65;
    font-size: 1.75rem;
  }
  .section__subtitle {
    margin-bottom: 35px;
  }
  .section__text {
    line-height: 1.65;
    font-size: 1.125rem;
  }
  .section__title--hero {
    line-height: 1.65;
    font-size: 1.75rem;
  }
  .section__title--hero {
    padding: 0 0px;
    margin-bottom: 36px;
  }
  .section__text--hero {
    line-height: 1.65;
    font-size: 1.125rem;
  }
  .section__text--hero {
    padding: 0 0px;
    margin-bottom: 100px;
  }
  .section__subtext {
    line-height: 1.65;
    font-size: 1rem;
  }
  .section__img img.img--roadmap2 {
    margin-top: 106px;
    padding-left: 33px;
  }
  .section__img.img--data {
    margin-top: 72px;
    margin-bottom: 98px;
    padding-left: 6px;
  }
  .section__img--data {
    margin-bottom: 145px;
  }
  .section__img__caption {
    line-height: 1.65;
    font-size: 1.125rem;
  }
  .section__img__caption {
    margin-top: 107px;
  }
  .section__img__text {
    line-height: 1.65;
    font-size: 1.125rem;
  }
  .section__img__text {
    margin-top: 88px;
  }
  .section__foot {
    margin-top: 50px;
    padding-right: 21px;
  }
  .section__foot--nomargin-top {
    margin-top: 70px;
  }
  .section__nav {
    gap: 35px 0;
  }
  .section__nav--large {
    gap: 30px 0;
  }
  .animate__fadeIn {
    --animate-distance: 30px;
  }
  .animate__fadeInUp {
    --animate-distance: 1000px;
  }
  .animate__fadeInDown {
    --animate-distance: 100px;
  }
  .animate__fadeInLeft {
    --animate-distance: 100px;
  }
  .animate__fadeInRight {
    --animate-distance: 100px;
  }
  .animate__slideInUp {
    --animate-distance: 30px;
  }
  .animate__slideInDown {
    --animate-distance: 30px;
  }
  .animate__slideInLeft {
    --animate-distance: 100%;
  }
  .animate__slideInRight {
    --animate-distance: 100%;
  }
  .animate__bounceInUp {
    --animate-distance: 3000px;
  }
  .animate__bounceInDown {
    --animate-distance: 3000px;
  }
  .animate__zoomInUp {
    --animate-distance: 1000px;
  }
  .animate__zoomInDown {
    --animate-distance: 1000px;
  }
  .animate__zoomInLeft {
    --animate-distance: 1000px;
  }
  .animate__zoomInRight {
    --animate-distance: 1000px;
  }
  .st-animate.animate__fadeIn {
    --animate-distance: 30px;
  }
  .st-animate.animate__fadeInUp {
    --animate-distance: 100px;
  }
  .st-animate.animate__fadeInDown {
    --animate-distance: 100px;
  }
  .st-animate.animate__fadeInLeft {
    --animate-distance: 100px;
  }
  .st-animate.animate__fadeInRight {
    --animate-distance: 100px;
  }
  .st-animate.animate__slideInUp {
    --animate-distance: 30px;
  }
  .st-animate.animate__slideInDown {
    --animate-distance: 30px;
  }
  .st-animate.animate__slideInLeft {
    --animate-distance: 100%;
  }
  .st-animate.animate__slideInRight {
    --animate-distance: 100%;
  }
  .st-animate.animate__bounceInUp {
    --animate-distance: 3000px;
  }
  .st-animate.animate__bounceInDown {
    --animate-distance: 3000px;
  }
  .st-animate.animate__zoomInUp {
    --animate-distance: 1000px;
  }
  .st-animate.animate__zoomInDown {
    --animate-distance: 1000px;
  }
  .st-animate.animate__zoomInLeft {
    --animate-distance: 1000px;
  }
  .st-animate.animate__zoomInRight {
    --animate-distance: 1000px;
  }
  .animate__clipInFromLeft {
    --animate-distance: 30px;
  }
  .animate__clipInFromRight {
    --animate-distance: 30px;
  }
  .animate__clipInFromTop {
    --animate-distance: 30px;
  }
  .animate__clipInFromBottom {
    --animate-distance: 30px;
  }
  .animate__clipInFromCenter {
    --animate-distance: 30px;
  }
  .st-animate.animate__clipInFromLeft {
    --animate-distance: 30px;
  }
  .st-animate.animate__clipInFromRight {
    --animate-distance: 30px;
  }
  .st-animate.animate__clipInFromTop {
    --animate-distance: 30px;
  }
  .st-animate.animate__clipInFromBottom {
    --animate-distance: 30px;
  }
  .st-animate.animate__clipInFromCenter {
    --animate-distance: 30px;
  }
  .animate__clipInFromLeftFadeInUp {
    --animate-distance: 50px;
  }
  .animate__clipInFromLeftFadeInUp {
    --animate-distance: 50px;
  }
  .animate__clipInFromRightFadeInUp {
    --animate-distance: 50px;
  }
  .animate__clipInFromRightFadeInUp {
    --animate-distance: 50px;
  }
  .animate__clipInFromTopFadeInUp {
    --animate-distance: 50px;
  }
  .animate__clipInFromTopFadeInUp {
    --animate-distance: 50px;
  }
  .animate__clipInFromBottomFadeInUp {
    --animate-distance: 50px;
  }
  .animate__clipInFromBottomFadeInUp {
    --animate-distance: 50px;
  }
  .animate__clipInFromCenterFadeInUp {
    --animate-distance: 50px;
  }
  .animate__clipInFromCenterFadeInUp {
    --animate-distance: 50px;
  }
  .st-animate.animate__clipInFromLeftFadeInUp {
    --animate-distance: 50px;
  }
  .st-animate.animate__clipInFromLeftFadeInUp {
    --animate-distance: 50px;
  }
  .st-animate.animate__clipInFromRightFadeInUp {
    --animate-distance: 50px;
  }
  .st-animate.animate__clipInFromRightFadeInUp {
    --animate-distance: 50px;
  }
  .st-animate.animate__clipInFromTopFadeInUp {
    --animate-distance: 50px;
  }
  .st-animate.animate__clipInFromTopFadeInUp {
    --animate-distance: 50px;
  }
  .st-animate.animate__clipInFromBottomFadeInUp {
    --animate-distance: 50px;
  }
  .st-animate.animate__clipInFromBottomFadeInUp {
    --animate-distance: 50px;
  }
  .st-animate.animate__clipInFromCenterFadeInUp {
    --animate-distance: 50px;
  }
  .st-animate.animate__clipInFromCenterFadeInUp {
    --animate-distance: 50px;
  }
  .animate__clipZoom {
    --animate-distance: 50px;
  }
  .animate__clipZoom {
    --clip-round: 30px;
  }
  .st-animate.animate__clipZoom {
    --animate-distance: 50px;
  }
  .st-animate.animate__clipZoom {
    --clip-round: 30px;
  }
  .interview {
    margin-bottom: 140px;
  }
  .interview__body {
    gap: 85px 0;
    padding: 0px 40px;
  }
  .interview__hero {
    margin-bottom: 120px;
  }
  .interview__hero--left {
    width: 70%;
  }
  .interview__hero--right {
    width: 70%;
  }
  .interview__profile {
    padding: 0px 58px;
    margin-bottom: 87px;
  }
  .interview .grid2 {
    grid-gap: 25px 25px;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
  .interview .profile__img {
    margin-bottom: 38px;
  }
  .interview .profile__company {
    line-height: 1.65;
    font-size: 1.125rem;
  }
  .interview .profile__names {
    margin-bottom: 24px;
  }
  .interview .profile__names-ja {
    line-height: 1.65;
    font-size: 1.5rem;
  }
  .interview .profile__names-en {
    line-height: 1.65;
    font-size: 1rem;
  }
  .interview .profile__bio {
    line-height: 1.65;
    font-size: 0.875rem;
  }
  .interview__foot {
    margin-top: 150px;
  }
  .interview__title {
    line-height: 1.5;
    font-size: 1.75rem;
  }
  .interview__title {
    margin-bottom: 46px;
  }
  .interview__question {
    line-height: 1.67;
    font-size: 1.125rem;
  }
  .interview__question {
    margin-bottom: 30px;
  }
  .interview__answer {
    line-height: 1.67;
    font-size: 1.125rem;
  }
  .interview__answer {
    margin-bottom: 30px;
  }
}
@media (min-width: 1100px) {
  .intro__title__img {
    width: auto;
    --title-img-margin-top: 90px;
    margin: var(--title-img-margin-top) 0 27px 0;
  }
  .intro__title {
    line-height: 1.5;
    font-size: 3rem;
  }
  .sec-head {
    padding: 185px 0 104px 0;
  }
  .sec-head--thin {
    padding: 185px 0 65px 0;
  }
  .sec-head--small {
    padding: 202px 0 75px 0;
  }
  .sec-head--padding-bottom--narrow {
    padding: 200px 0 0px 0;
  }
  .description__title__img {
    margin-bottom: 28px;
    width: auto;
  }
  .description__title {
    line-height: 1.5;
    font-size: 3rem;
  }
  .description__copy {
    line-height: 1.5;
    font-size: 3rem;
  }
  .description__copy {
    padding: 106px 0 70px 0;
  }
  .description__text {
    line-height: 1.65;
    font-size: 1.5rem;
  }
  .description__text {
    margin-top: 53px;
  }
  .description__img {
    width: 100%;
  }
  .description__img img.img--roadmap1 {
    padding-left: 59px;
  }
  .section__head {
    padding: 37px 20px 0;
  }
  .section__head__title {
    line-height: 1.5;
    font-size: 3rem;
  }
  .section__head__title {
    margin-bottom: 53px;
  }
  .section__head__title--mid {
    margin-bottom: 52px;
  }
  .section__head__title--office {
    margin-bottom: 74px;
  }
  .section__head__title--staff {
    margin-bottom: 66px;
  }
  .section__head__text {
    line-height: 1.67;
    font-size: 1.5rem;
  }
  .section__head__subtext {
    line-height: 1.65;
    font-size: 1.125rem;
  }
  .section__head__name {
    line-height: 1.65;
    font-size: 2.25rem;
  }
  .section__head__name span {
    line-height: 1.65;
    font-size: 1.5rem;
  }
  .section__head__position {
    line-height: 1.65;
    font-size: 1.5rem;
  }
  .section__head__position {
    margin-bottom: 78px;
  }
  .section__head__profile {
    line-height: 1.67;
    font-size: 1.5rem;
  }
  .section__head__interview {
    line-height: 1.65;
    font-size: 1.5rem;
  }
  .section__list {
    line-height: 1.67;
    font-size: 1.5rem;
  }
  .section__list--row {
    line-height: 1.67;
    font-size: 1.5rem;
  }
  .section__body--padding-wide-sp-nopadding {
    padding: 0 120px;
  }
  .section__title {
    line-height: 1.65;
    font-size: 3rem;
  }
  .section__subtitle {
    line-height: 1.65;
    font-size: 2.25rem;
  }
  .section__text {
    line-height: 1.65;
    font-size: 1.5rem;
  }
  .section__title--hero {
    line-height: 1.65;
    font-size: 2.25rem;
  }
  .section__title--hero {
    margin-bottom: 54px;
  }
  .section__text--hero {
    line-height: 1.65;
    font-size: 1.5rem;
  }
  .section__text--hero {
    margin-bottom: 140px;
  }
  .section__subtext {
    line-height: 1.65;
    font-size: 1.25rem;
  }
  .section__img img.img--roadmap2 {
    margin-top: 141px;
    padding-left: 67px;
  }
  .section__img.img--data {
    margin-top: 94px;
    margin-bottom: 133px;
    padding-left: 6px;
  }
  .section__img__caption {
    line-height: 1.65;
    font-size: 1.5rem;
  }
  .section__img__text {
    line-height: 1.65;
    font-size: 1.5rem;
  }
  .interview__body {
    gap: 120px 0;
    padding: 0px 220px;
  }
  .interview__hero {
    margin-bottom: 200px;
  }
  .interview__profile {
    padding: 0px 220px;
    margin-bottom: 127px;
  }
  .interview .grid2 {
    grid-gap: 50px 100px;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
  .interview .profile__company {
    line-height: 1.65;
    font-size: 1.5rem;
  }
  .interview .profile__company {
    margin-bottom: 0px;
  }
  .interview .profile__names {
    margin-bottom: 28px;
  }
  .interview .profile__names-ja {
    line-height: 1.65;
    font-size: 2.25rem;
  }
  .interview .profile__names-en {
    line-height: 1.65;
    font-size: 1.5rem;
  }
  .interview .profile__names-en {
    margin-left: 36px;
  }
  .interview .profile__bio {
    line-height: 1.65;
    font-size: 1.125rem;
  }
  .interview__title {
    line-height: 1.5;
    font-size: 2.25rem;
  }
  .interview__title {
    margin-bottom: 56px;
  }
  .interview__question {
    line-height: 1.67;
    font-size: 1.5rem;
  }
  .interview__question {
    margin-bottom: 40px;
  }
  .interview__answer {
    line-height: 1.67;
    font-size: 1.5rem;
  }
  .interview__answer {
    margin-bottom: 40px;
  }
}