@charset "utf-8";

/* ---------------------------
    front page - fv
----------------------------- */
.fv {
  height: calc(100vh - var(--header-height-pc));
  margin: auto;
  max-width: 198rem;
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.fv__inner {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.fv__title {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: auto auto auto 13.7rem;
  position: relative;
}

.fv__title-l {
  display: flex;
  flex-direction: column;
  font-size: 4.5rem;
  font-weight: 400;
  line-height: normal;
  z-index: 1;
}

.fv__title-sub {
  display: flex;
  flex-direction: column;
  /* position: fixed; */
  font-size: 1.4rem;
  line-height: normal;
  font-weight: 400;
}

.fv__graphic-wrap {
  overflow: clip;
  position: absolute;
  width: 100%;
  height: 110%;
  bottom: 0;
  top: 0;
  left: 0;
  z-index: var(--z-graphic-behind);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.7s ease;
}

.fv__graphic-wrap.in-news-section {
  opacity: 0.2;
}


.fv__graphic-wrap svg {
  position: sticky;
  top: 10%;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  transform: translateY(-38%);
}

/* ===================================
   FV SVG - アスペクト比ベースのレスポンシブ調整
   PC用 (min-width: 751px)
=================================== */

@media screen and (min-width: 751px) {
  
  /* デフォルト: アスペクト比 ~1.0 */
  .fv__graphic-wrap svg {
    transform: translateY(-2%) rotate(5deg);
  }

  /* アスペクト比 1.1以上 */
  @media screen and (min-aspect-ratio: 11/10) {
    .fv__graphic-wrap svg {
      transform: translateY(-5%) rotate(4deg);
    }
  }

  /* アスペクト比 1.2以上 */
  @media screen and (min-aspect-ratio: 6/5) {
    .fv__graphic-wrap svg {
      transform: translateY(-10%) rotate(5deg);
    }
  }

  /* アスペクト比 1.27以上 */
  @media screen and (min-aspect-ratio: 127/100) {
    .fv__graphic-wrap svg {
      transform: translateY(-15%) rotate(4deg);
    }
  }

  /* アスペクト比 1.35以上 */
  @media screen and (min-aspect-ratio: 27/20) {
    .fv__graphic-wrap svg {
      transform: translateY(-20%) rotate(3deg);
    }
  }

  /* アスペクト比 1.5以上 */
  @media screen and (min-aspect-ratio: 3/2) {
    .fv__graphic-wrap svg {
      transform: translateY(-25%) rotate(5deg);
    }
  }

  /* アスペクト比 1.6以上 (16:10) */
  @media screen and (min-aspect-ratio: 16/10) {
    .fv__graphic-wrap svg {
      transform: translateY(-28%) rotate(4deg);
    }
  }

  /* アスペクト比 1.78以上 (16:9) */
  @media screen and (min-aspect-ratio: 16/9) {
    .fv__graphic-wrap svg {
      transform: translateY(-32%) rotate(6deg);
    }
  }

}


/* ===================================
   FV SVG  レスポンシブ対応
=================================== */

.fv__graphic-pc {
  display: block;
}


.fv__graphic-sp {
  display: none;
}


@media screen and (max-width: 750px) {
  .fv__graphic-pc {
    display: none;
  }

  .fv__graphic-sp {
    display: block;
  }
}

.fv__graphic-pc path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

@media screen and (max-width: 750px) {
  .fv {
    position: relative;
    overflow: visible;
    max-width: none;
    height: calc(100vh - var(--header-height-sp));
  }

  .fv__title {
    gap: 1.14rem;
    margin-left: 3rem;
  }

  .fv__title-l {
    font-size: 2.6rem;
    z-index: var(--z-content-base);
  }

  .fv__title-sub {
    font-size: 0.8rem;
  }

  .fv__graphic-wrap {
    position: absolute;
    height: 100%;
  }

  .fv__graphic-sp-wrapper {
    position: sticky;
    width: 100%;
    height: auto;
    top: calc(50vh - var(--header-height-sp) / 2 + 3rem);
    left: 0;
  }

  .fv__graphic-wrap svg {
    object-fit: cover;
    height: inherit;
    top: 0;
    transform: translateY(0);
  }

  /* PC用SVGを非表示 */
  .fv__graphic-pc {
    display: none;
  }

  /* SP用SVGを表示 */
  .fv__graphic-sp {
    display: block;
  }

}

/* ===================================
    FV SVG パスのアニメーション
=================================== */
.fv__graphic-wrap svg path {
  stroke-dashoffset: 0;
  opacity: 0;
  animation: drawLineSVG 5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
}

.fv__graphic-wrap svg {
  -webkit-mask-image: linear-gradient(135deg,
      black 0%,
      black 40%,
      transparent 40.1%,
      transparent 100%);
  mask-image: linear-gradient(135deg,
      black 0%,
      black 40%,
      transparent 40.1%,
      transparent 100%);
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  animation: revealDiagonalMask 15s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards;
}

/* 
  シンプルで滑らかな描画アニメーション
  開始 → 表示 → 徐々に薄くなる
*/
@keyframes drawLineSVG {
  0% {
    opacity: 0;
    stroke-dashoffset: 0;
  }

  /* 急速に立ち上がる（最初の30%） */
  30% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  /* そのまま表示継続（30%-70%） */
  70% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  /* その後なめらかに薄くなる（70%-100%） */
  100% {
    opacity: 0.85;
    stroke-dashoffset: 0;
  }
}

/* 
  シンプルで滑らかなマスク展開アニメーション
  左下から右上へ対角線に流れる
*/
@keyframes revealDiagonalMask {
  0% {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }

  /* 滑らかに左上へ移動（0%-50%） */
  50% {
    -webkit-mask-position: -14% -14%;
    mask-position: -14% -14%;
  }

  /* その後さらに左上へ移動＆フェードアウト（50%-100%） */
  100% {
    -webkit-mask-position: -100% -100%;
    mask-position: -100% -100%;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ===================================
   FV SVG パスのアニメーション レスポンシブ対応
=================================== */

@media screen and (max-width: 750px) {
  .fv__graphic-wrap svg path {
    animation: drawLineSVG 13s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s forwards;
  }

  .fv__graphic-wrap svg {
    animation: revealDiagonalMask 13s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s forwards;
  }
}






/* ---------------------------
    front page - news
----------------------------- */
.front-news {
  width: 100%;
  padding: 0.9rem 12rem 3rem;
}

.front-news__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: stretch;
  gap: 3rem;
  /* padding-right: 12rem; */
}

.front-news__list {
  width: 62%;
  display: flex;
  flex-direction: column;
}

.front-news__item a {
  width: 100%;
  transition: 0.3s ease;
}

.front-news__item a:hover {
  opacity: 0.5;
}

.front-news__link {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 2.1rem 0;
  align-items: center;
  gap: 4.5rem;
}

.front-news__item::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(to left,
      #EEE9E5 0%,
      #477C98 67.31%,
      #002246 81.73%);
  background-size: contain;
  background-repeat: no-repeat;
}

.front-news__date {
  font-weight: 400;
  text-align: center;
  flex-shrink: 0;
}

.front-news__title {
  font-family: var(--font-strong);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.7px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* read more */
.read-more {
  margin: 0 0 0 auto;
  max-width: 20rem;
  width: 100%;
  padding: 0 1rem;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  padding-bottom: 0.3rem;
  transition: opacity 0.3s ease;
  pointer-events: all;
  overflow: hidden;
}

.read-more:hover {
  opacity: 1;
}

.read-more span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ===================================
  read more 矢印　アニメーション
=================================== */
.read-more:hover span {
  animation: slideOutInDiagonal 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slideOutInDiagonal {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }

  40% {
    transform: translate(0.8rem, -0.8rem);
    opacity: 0.3;
  }

  48% {
    transform: translate(1rem, -1rem);
    opacity: 0;
  }

  52% {
    transform: translate(-1rem, 1rem);
    opacity: 0;
  }

  60% {
    transform: translate(-0.8rem, 0.8rem);
    opacity: 0.3;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.read-more-icon {
  width: 100%;
  padding: 0.4rem 0;
  display: block;
}

/* ===================================
  read more ボーダー　アニメーション
=================================== */
.read-more::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right,
      #EEE9E5 0%,
      #477C98 67.31%,
      #002246 81.73%,
      #002246 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  opacity: 0.5;
}

.read-more:hover::after {
  animation: underlineFlow 0.8s cubic-bezier(.16, 1, .3, 1) forwards;
}

@media screen and (max-width: 750px) {
  .read-more-icon {
    width: 1.5em;
    height: auto;
  }
}

@keyframes underlineFlow {
  0% {
    background: linear-gradient(to right,
        #EEE9E5 0%,
        #477C98 67.31%,
        #002246 81.73%,
        #002246 100%);
  }

  5% {
    background: linear-gradient(to right,
        #002246 0%,
        #EEE9E5 5%,
        #477C98 70%,
        #002246 85%);
  }

  10% {
    background: linear-gradient(to right,
        #002246 0%,
        #EEE9E5 8%,
        #477C98 72%,
        #002246 88%);
  }

  15% {
    background: linear-gradient(to right,
        #002246 0%,
        #002246 5%,
        #EEE9E5 15%,
        #477C98 73%,
        #002246 90%);
  }

  20% {
    background: linear-gradient(to right,
        #002246 0%,
        #002246 10%,
        #EEE9E5 22%,
        #477C98 72%,
        #002246 90%);
  }

  25% {
    background: linear-gradient(to right,
        #002246 0%,
        #002246 12%,
        #EEE9E5 25%,
        #477C98 70%,
        #002246 90%);
  }

  30% {
    background: linear-gradient(to right,
        #002246 0%,
        #002246 15%,
        #EEE9E5 30%,
        #477C98 68%,
        #002246 88%);
  }

  35% {
    background: linear-gradient(to right,
        #002246 0%,
        #002246 20%,
        #477C98 60%,
        #EEE9E5 85%,
        #EEE9E5 100%);
  }

  40% {
    background: linear-gradient(to right,
        #002246 0%,
        #002246 23%,
        #477C98 57%,
        #EEE9E5 83%,
        #EEE9E5 100%);
  }

  45% {
    background: linear-gradient(to right,
        #002246 0%,
        #002246 27%,
        #477C98 53%,
        #EEE9E5 80%,
        #EEE9E5 100%);
  }

  50% {
    background: linear-gradient(to right,
        #002246 0%,
        #002246 30%,
        #477C98 50%,
        #EEE9E5 77%,
        #EEE9E5 100%);
  }

  55% {
    background: linear-gradient(to right,
        #002246 0%,
        #002246 33%,
        #477C98 48%,
        #EEE9E5 73%,
        #EEE9E5 100%);
  }

  60% {
    background: linear-gradient(to right,
        #002246 0%,
        #002246 35%,
        #477C98 47%,
        #EEE9E5 70%,
        #EEE9E5 100%);
  }

  65% {
    background: linear-gradient(to right,
        #EEE9E5 0%,
        #477C98 43%,
        #002246 63%,
        #EEE9E5 82%,
        #EEE9E5 100%);
  }

  70% {
    background: linear-gradient(to right,
        #EEE9E5 0%,
        #477C98 45%,
        #002246 68%,
        #EEE9E5 87%,
        #EEE9E5 100%);
  }

  75% {
    background: linear-gradient(to right,
        #EEE9E5 0%,
        #477C98 50%,
        #002246 72%,
        #002246 92%);
  }

  80% {
    background: linear-gradient(to right,
        #EEE9E5 0%,
        #477C98 55%,
        #002246 75%,
        #002246 95%);
  }

  85% {
    background: linear-gradient(to right,
        #EEE9E5 0%,
        #477C98 60%,
        #002246 78%,
        #002246 97%);
  }

  90% {
    background: linear-gradient(to right,
        #EEE9E5 0%,
        #477C98 63%,
        #002246 80%,
        #002246 98%);
  }

  95% {
    background: linear-gradient(to right,
        #EEE9E5 0%,
        #477C98 65%,
        #002246 81%,
        #002246 99%);
  }

  100% {
    background: linear-gradient(to right,
        #EEE9E5 0%,
        #477C98 67.31%,
        #002246 81.73%,
        #002246 100%);
  }
}

@media screen and (max-width: 750px) {
  .front-news {
    padding: 2rem 3rem 0;
    margin: 0 auto 9rem;
  }

  .front-news__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    gap: 2rem;
  }

  .front-news__list {
    max-width: none;
    width: 100%;
  }

  .front-news__link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1rem 0;
    justify-content: none;
  }

  .front-news__item::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(to left,
        #EEE9E5 0%,
        #477C98 67.31%,
        #002246 81.73%);
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .front-news__date {
    font-size: 1.5rem;
  }

  .front-news__title {
    font-size: 1.3rem;
    letter-spacing: 0.65px;
    line-height: 1.69;
    overflow: hidden;
    white-space: normal;
    text-align: left;
    /* Limit to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
}

/* ---------------------------
    front page - 共通 style
----------------------------- */
.front-about,
.front-business,
.front-record {
  margin: auto;
  max-width: 198rem;
  width: 100%;
}

.front-about__content,
.front-record__content,
.front-business__content {
  display: flex;
  flex-direction: column;
  margin: auto 12rem auto auto;
  max-width: 53.3rem;
  width: 100%;
}

.front-about__inner,
.front-business__inner,
.front-record__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 12rem;
}

.front-about__heading,
.front-business__heading,
.front-record__heading {
  font-size: 16rem;
  font-weight: 400;
  position: relative;
}

.heading-wrapper {
  display: inline-block;
  position: relative;
}

.heading-char {
  display: inline-block;
  position: relative;

  background:
    linear-gradient(to top,
      #0C1B2D 0%,
      #0C1B2D 50%,
      #878A8C 100%);
  background-size: 100% 250%;
  background-position: 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #0C1B2D;
  color: #0C1B2D;

  -webkit-mask-image: linear-gradient(to top, black 0%, black 100%);
  mask-image: linear-gradient(to top, black 0%, black 100%);
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;
  -webkit-mask-position: bottom;
  mask-position: bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  opacity: 0;

  transition:
    mask-size 2.1s cubic-bezier(0.25, 1, 0.5, 1),
    -webkit-mask-size 2.1s cubic-bezier(0.25, 1, 0.5, 1),
    background-position 2.4s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 2.4s cubic-bezier(0.33, 1, 0.68, 1);

  transition-delay: calc(var(--char-index) * 0.06s);
}

.front-about__heading.heading-active .heading-char,
.front-business__heading.heading-active .heading-char,
.front-record__heading.heading-active .heading-char {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-position: 0% 0%;
  opacity: 1;

}


/* Mobile */
@media screen and (max-width: 750px) {

  .front-about__heading,
  .front-business__heading,
  .front-record__heading {
    font-size: 6.4rem;
    padding: 0;
    margin-bottom: 2rem;
  }

  .heading-char {
    background-size: 100% 180%;
    transition:
      mask-size 1.5s cubic-bezier(0.25, 1, 0.5, 1),
      -webkit-mask-size 1.5s cubic-bezier(0.25, 1, 0.5, 1),
      background-position 1.8s cubic-bezier(0.25, 1, 0.5, 1),
      opacity 1.8s cubic-bezier(0.33, 1, 0.68, 1);
    transition-delay: calc(var(--char-index) * 0.06s);
  }

}

.front-about__title,
.front-business__title,
.front-record__title {
  font-size: 3.2rem;
  font-weight: 400;
  font-family: var(--font-strong);
  line-height: 1.56;
}

.front-business__title {
  margin-bottom: 1.5rem;
}

.front-about__text,
.front-business__text,
.front-record__text,
.front-recruit__text,
.front-company__text {
  font-family: var(--font-strong);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.07rem;
  margin-bottom: 3rem;
}

@media screen and (max-width: 750px) {
  .pc-br {
    display: none;
  }

  .front-about,
  .front-business,
  .front-record {
    margin: auto;
    max-width: none;
    width: 100%;
  }

  .front-about__inner,
  .front-business__inner,
  .front-record__inner {
    margin: 0 auto 12rem;
    padding-right: 0;
  }

  .front-about__content,
  .front-record__content,
  .front-business__content {
    padding: 0 1.6rem;
    margin-right: 0;
    max-width: none;
  }

  .front-about__heading,
  .front-business__heading,
  .front-record__heading {
    font-size: 6.4rem;
    line-height: 0.78;
    padding: 0;
    margin-bottom: 2rem;
  }

  .front-about__title,
  .front-business__title,
  .front-record__title {
    font-size: 2.2rem;
    line-height: 1.45;
    margin-bottom: 2rem;
  }

  .front-about__text,
  .front-business__text,
  .front-record__text {
    font-size: 1.3rem;
    line-height: 1.69;
    letter-spacing: 0.065rem;
    margin-bottom: 1rem;
  }
}

/* ===================================
  front page - 文字　アニメーション
=================================== */
.split {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);
}

/* -------------------------------
          アニメーション速度
  ------------------------------- */
.split .splitText br {
  display: block;
  content: '';
  width: 100%;
  height: 0;
}

.split .splitText {
  display: block;
}

.split .splitText .char {
  opacity: 0;
  transform: translateY(20px);
  /*速度を調整*/
  transition: opacity 2.4s ease, transform 1.8s ease;
  /* 一文字ずつ出る速さ*/
  transition-delay: calc(var(--index) * 0.075s);
  display: inline-block;
}

/* ===================================
   FV Title アニメーション
=================================== */

/* FV Title Heading Wrapper */
.fv__title-line .heading-wrapper {
  display: inline-block;
  position: relative;
}

.fv__title-l .fv-heading-char {
  display: inline-block;
  position: relative;

  background:
    linear-gradient(to top,
      #0C1B2D 0%,
      #0C1B2D 50%,
      #878A8C 100%);
  background-size: 100% 250%;
  background-position: 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #0C1B2D;
  color: #0C1B2D;

  -webkit-mask-image: linear-gradient(to top, black 0%, black 100%);
  mask-image: linear-gradient(to top, black 0%, black 100%);
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;
  -webkit-mask-position: bottom;
  mask-position: bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;

  /* transition:
    mask-size 1.8s cubic-bezier(0.25, 1, 0.5, 1),
    -webkit-mask-size 1.8s cubic-bezier(0.25, 1, 0.5, 1),
    background-position 2.1s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 2.1s cubic-bezier(0.33, 1, 0.68, 1);

  transition-delay: calc(var(--char-index) * 0.01s); */
  transition:
    mask-size 2.1s cubic-bezier(0.25, 1, 0.5, 1),
    -webkit-mask-size 2.1s cubic-bezier(0.25, 1, 0.5, 1),
    background-position 2.4s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 2.4s cubic-bezier(0.33, 1, 0.68, 1);

  transition-delay: calc(var(--char-index) * 0.06s);
}


.front-record__heading .heading-char {
  color: var(--color-light) !important;
  -webkit-text-fill-color: var(--color-light) !important;
}


.fv__title-l.fv-title-active .fv-heading-char {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-position: 0% 0%;
  opacity: 1;
}

/* Mobile version - faster animation */
@media screen and (max-width: 750px) {
  .fv-heading-char {
    background-size: 100% 180%;
    transition:
      mask-size 1.5s cubic-bezier(0.25, 1, 0.5, 1),
      -webkit-mask-size 1.5s cubic-bezier(0.25, 1, 0.5, 1),
      background-position 1.8s cubic-bezier(0.25, 1, 0.5, 1),
      opacity 1.8s cubic-bezier(0.33, 1, 0.68, 1);
    transition-delay: calc(var(--char-index) * 0.06s);
  }
}

/* ===================================
   FV Title Subtitle Character Animation
=================================== */

.fv__title-sub .fv-heading-char {
  display: inline-block;
  position: relative;

  background:
    linear-gradient(to top,
      #0C1B2D 0%,
      #0C1B2D 50%,
      #878A8C 100%);
  background-size: 100% 250%;
  background-position: 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #0C1B2D;
  color: #0C1B2D;
  -webkit-mask-image: linear-gradient(to top, black 0%, black 100%);
  mask-image: linear-gradient(to top, black 0%, black 100%);
  -webkit-mask-size: 100% 0%;
  mask-size: 100% 0%;
  -webkit-mask-position: bottom;
  mask-position: bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  opacity: 0;

  transition:
    mask-size 1.8s cubic-bezier(0.25, 1, 0.5, 1),
    -webkit-mask-size 1.8s cubic-bezier(0.25, 1, 0.5, 1),
    background-position 2.1s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 2.1s cubic-bezier(0.33, 1, 0.68, 1);

  transition-delay: calc(var(--char-index) * 0.01s);
  /* transition:
    mask-size 2.1s cubic-bezier(0.25, 1, 0.5, 1),
    -webkit-mask-size 2.1s cubic-bezier(0.25, 1, 0.5, 1),
    background-position 2.4s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 2.4s cubic-bezier(0.33, 1, 0.68, 1);

  transition-delay: calc(var(--char-index) * 0.06s); */
}

.fv__title-sub.fv-title-active .fv-heading-char {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-position: 0% 0%;
  opacity: 1;
}




@media screen and (max-width: 750px) {
  .fv__title-l .fv-heading-char {
    background-size: 100% 180%;
    transition:
      mask-size 0.7s cubic-bezier(0.25, 1, 0.5, 1),
      -webkit-mask-size 0.7s cubic-bezier(0.25, 1, 0.5, 1),
      background-position 1s cubic-bezier(0.25, 1, 0.5, 1),
      opacity 1s cubic-bezier(0.33, 1, 0.68, 1);
    transition-delay: calc(var(--char-index) * 0.045s);
  }

  .fv__title-sub .fv-heading-char {
    background-size: 100% 180%;
    transition:
      mask-size 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      -webkit-mask-size 0.3s cubic-bezier(0.25, 1, 0.5, 1),
      background-position 0.5s cubic-bezier(0.25, 1, 0.5, 1),
      opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    transition-delay: calc(var(--char-index) * 0.02s);
  }
}

/* -------------------------------
    HEADLINE（見出し）のアニメーション
   ------------------------------- */
.split.isActive .headline .char {
  /* 文字間の遅延を調整 */
  --delay: 0.03s;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 1.5s var(--ease-in-quad) calc(var(--delay) * var(--index)),
    transform 2s var(--ease-out-quart) calc(var(--delay) * var(--index));
}

.splitText.isActive .char {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------
       DESCRIPTION のアニメーション
   ------------------------------- */
.split.isActive .description .char {
  --delay: 0.01s;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s var(--ease-in-quad) calc(var(--delay) * var(--index) + 0.65s),
    transform 1s var(--ease-out-quart) calc(var(--delay) * var(--index) + 0.65s);
}

@media screen and (max-width: 750px) {
  .split .splitText br {
    display: none !important;
  }
}

/* -------------------------------
    front page - wab section
---------------------------------- */
.front-about__title {
  margin-bottom: 2rem;
  line-height: 1.56;
}

@media screen and (max-width: 750px) {
  .front-about__text br {
    display: none;
  }
}

/* -------------------------------
    front page - business section
---------------------------------- */
.front-business__heading {
  margin-bottom: 6rem;
}

@media screen and (max-width: 750px) {
  .front-business__heading {
    margin-bottom: 2rem;
  }

  .front-business__text br {
    display: none;
  }
}

/* -------------------------------
    front page - record section
---------------------------------- */
.front-record__inner {
  color: var(--color-light);
}

.front-record .pc-br {
  display: block;
}

.front-record .pc-sp {
  display: none;
}

.front-record__heading {
  color: var(--color-light);
}


.front-record__title {
  margin-bottom: 2rem;
  line-height: 1.56;
  color: var(--color-light);
}

@media screen and (max-width: 750px) {
  .front-record__title {
    line-height: 1.45;
  }

  .front-record .pc-br {
    display: none;
  }

  .front-record .pc-sp {
    display: block;
  }

  .front-record__text br {
    display: none;
  }
}

/* -------------------------------
    front page - company and recruit section
---------------------------------- */
.front-dual {
  padding: 4.1rem 1rem;
}

.front-dual .split {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.front-dual-inner {
  margin: auto;
  max-width: 116.3rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  color: var(--color-light);
}

.front-recruit__heading,
.front-company__heading {
  margin-bottom: 2rem;
  font-size: 4.8rem;
  font-weight: 400;
  line-height: 1.04;
}

.read-more-cercle {
  border-radius: 2.5rem;
  line-height: 1;
  border: 1px solid var(--color-light);
  display: inline-flex;
  padding: 1.4rem 7.3rem;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease;
  margin-bottom: 0;
  width: max-content;
}

.read-more-cercle-text {
  font-size: 1.4rem;
  text-align: center;
  font-weight: 400;
}

.read-more-cercle:hover {
  background-color: var(--color-base);
  border: 1px solid var(--color-base);
}

.front-company {
  padding-right: 1rem;
  flex-shrink: 0;
}

.front-recruit {
  padding-left: 1rem;
  flex-shrink: 0;
}

.vertical-divider {
  width: 1px;
  background-color: var(--color-light);
  align-self: stretch;
  flex-shrink: 0;
}

.front-recruit__text,
.front-company__text {
  color: var(--color-light);
  max-width: 52rem;
  width: 100%;
}

/* ===================================
   Tablet/Smaller Desktop Range 
=================================== */
@media screen and (max-width: 1000px) {

  .front-dual-inner .front-company__text.description,
  .front-dual-inner .front-recruit__text.description {
    max-width: 35rem !important;
    width: 100%;
  }

  .front-company__text.splitText br,
  .front-recruit__text.splitText br {
    display: none !important;
  }
}

@media screen and (max-width: 750px) {
  .front-dual {
    padding: 0;
  }

  .front-dual-inner {
    max-width: none;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid var(--color-light);
    border-bottom: 1px solid var(--color-light);
    padding: 1.2rem 0 4rem;
  }

  .vertical-divider {
    width: 100%;
    height: 1px;
    margin: 4rem 0;
  }

  .front-recruit__heading,
  .front-company__heading {
    margin-bottom: 1rem;
    font-size: 2.4rem;
    line-height: 2.08;
  }

  .front-company__text,
  .front-recruit__text {
    font-size: 1.4rem;
    line-height: 1.85;
    letter-spacing: 0.07rem;
    margin-bottom: 4rem;
    max-width: none;
  }

  .front-company {
    margin: auto;
    padding: 0 1.5rem;
    flex-shrink: 0;
  }

  .front-recruit {
    margin: auto;
    padding: 0 1.5rem;
    flex-shrink: 0;
  }

  .read-more-cercle {
    padding: 1.4rem 7rem;
  }

  .front-company__text br,
  .front-recruit__text br {
    display: none;
  }
}

/* -------------------------------
    front page -  bottom
---------------------------------- */
.front-bottom .sp-br {
  display: none;
}

.front-bottom {
  width: 100%;
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* margin-bottom: 4.9rem; */
}

.fv__graphic-wrap svg stop {
  transition: stop-color 0.8s ease;
}

/* アニメーション */
@keyframes drawLineFromBottom {
  to {
    stroke-dashoffset: 0;
  }
}

.front-tagline {
  position: relative;
  z-index: 2;
  font-size: 1.6rem;
  color: var(--color-light);
  font-weight: 400;
  line-height: 3.12;
  letter-spacing: 0.08rem;
  max-width: 116.2rem;
  width: 100%;
  line-height: 3.12;
  margin: 38.5rem auto 31.9rem auto;
}

@media screen and (max-width: 750px) {
  .front-bottom .sp-br {
    display: block;
  }

  .front-bottom {
    padding-top: 0;
    margin-bottom: 0;

  }

  .front-tagline {
    position: absolute;
    bottom: 35%;
    z-index: 2;
    font-size: 1.4rem;
    line-height: 1.91;
    letter-spacing: normal;
    margin: 0;
    padding-left: 1.1rem;
  }
}