@charset "utf-8";
/* CSS Document */

/* =========================================
   スクロールで左からフェードイン
========================================= */

/* ▼ 初期状態：左にずらして透明に */
.scroll-fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* ▼ 表示状態：元位置＋完全に不透明 */
.scroll-fade-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* =========================================
   テキストスクランブル用
========================================= */

.text-scramble {
  opacity: 0;
  display: inline-block;
}

/* =========================================
   背景が伸びてテキスト出現アニメーション
========================================= */

/* ラッパー。inline要素だと扱いづらいので inline-block 推奨 */
.bgextend {
  display: inline-block;
  position: relative;
  overflow: hidden; /* はみ出た背景色を隠す */
  opacity: 0;       /* 初期は非表示 */
  line-height: 1;
  vertical-align: baseline;
}

/* 中のテキスト */
.bgappear {
  opacity: 0;       /* 初期は非表示 */
  position: relative;
  z-index: 2;       /* 背景バーより上に表示 */
}

/* ---------- アニメーション定義 ---------- */

/* ベース：全体がふわっと出現 */
@keyframes bgextendAnimeBase {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 中身：後からフワッと表示 */
@keyframes bgextendAnimeSecond {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* 背景が左から伸びて、そのまま残るアニメーション */
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  100% {
    transform-origin: left;
    transform: scaleX(1);  /* ← 全体を覆った状態で止まる */
  }
}

/* ---------- is-animated が付いたときに動かす ---------- */

/* .is-animated が付いたら本体をフェードインさせる */
.bgextend.is-animated {
  animation: bgextendAnimeBase 0.3s forwards;
}

/* 中の文字は少し遅れて表示 */
.bgextend.is-animated .bgappear {
  animation: bgextendAnimeSecond 0.6s 0.5s forwards;
}

/* =========================================
   背景の疑似要素 & 色管理
========================================= */

/* デフォルト（赤 or 白）のバー設定 */
.bgextend.bgLRextend::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #DC164D; /* デフォルトは赤（白にしたい部分はクラスで上書き） */
  transform-origin: left;
  transform: scaleX(0);      /* ← 最初は横幅0 */
  z-index: 1;
}

/* is-animated が付いたら背景をスライドさせる */
.bgextend.bgLRextend.is-animated::before {
  animation: bgLRextendAnime 0.8s forwards;
}

/* 白バーにしたい場合だけこのクラスを追加で付ける */
.bgextend.bgLRextend.bg-color-white::before {
  background-color: #FFFFFF;
}

.bgextend.bgLRextend.bg-color-black::before {
  background-color: #000000;
}


/* ハッカー風アニメ用：レイアウト崩さない程度に */
.js-scramble {
  display: inline-block;
}


.arrowAnimation a img {
  transition: transform 0.25s ease;
}

.arrowAnimation a:hover img {
  transform: translateX(5px);
}

.viewmore-text {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  color: #DC164D;
  text-transform: uppercase;
}

/* もともとの --opacity 系は使わないので、あれば削除してOK */
/* 基本は常に見えている */
.char {
  display: inline-block;
  opacity: 1;
}

/* ホバー中：消える→出るを繰り返す */
.viewmore-text.is-animating .char {
  animation-name: fadeOutIn;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: calc(0.06s * var(--char-index));
}

@keyframes fadeOutIn {
  0%, 100% {
    opacity: 1;
  }
  40%, 60% {
    opacity: 0;
  }
}

.whitespace {
  display: inline-block;
  width: 0.4em;
}

/* recruit VIEW MORE アニメ対象 */
.recruit-viewmore-text {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* 初期状態：常に表示 */
.recruit-viewmore-text .char {
  display: inline-block;
  opacity: 1;
}

/* ホバー時（JSで付与） */
.recruit-viewmore-text.is-animating .char {
  animation-name: fadeOutInRecruit;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: calc(0.06s * var(--char-index));
}

@keyframes fadeOutInRecruit {
  0%, 100% { opacity: 1; }
  40%, 60% { opacity: 0; }
}

/* スペース */
.recruit-viewmore-text .whitespace {
  display: inline-block;
  width: 0.4em;
}