/* =========================================
   文字アニメーション
   ========================================= */
/* タイトル文字のアニメーション（日本語・英語・コンセプト） --------- */
/* --- 初期状態：隠しておく --- */
/* 日本語メイン */
.js-scroll-trigger .section__title-main {
  display: inline-block;
  /*transform: translateY(100%);*/
  transform: translateY(60%);
  opacity: 0;
}

/* 英語（分解されたspan） */
.js-scroll-trigger .section__title-en span {
  display: inline-block;
  /*transform: translateY(100%);*/
  transform: translateY(0);
  opacity: 0;
}

/* --- 発火時：浮き上がる動き --- */
/* 日本語（塊、または分解されたspan） */
.is-active .section__title-main,
.is-active .section__title-main span {
  animation: main-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 英語（分解されたspan） */
.is-active .section__title-en span {
  /*animation: char-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;*/
  animation: char-up 0.6s cubic-bezier(0, 1, 0.58, 1) forwards;
}

/* コンセプト文（分解されたspan） */
.is-active .concept__lead span {
  animation: main-up 0.3s cubic-bezier(0, 1, 0.58, 1) forwards;
}

/* 文字用キーフレーム */
@keyframes main-up {
  0% {
    transform: translateY(60%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes char-up {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 下線のアニメーション（タイプA：擬似要素 ::after） --------- */
/* --- 初期状態：左から右（共通） --- */
.u-line-left::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #666;
  transform: scaleX(0);
  transform-origin: left;
}

/* --- 初期状態：中央から（共通） --- */
.u-line-center::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 120px;
  height: 2px;
  background-color: #666;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}

/* --- 発火時：下線の伸び --- */
.is-active.u-line-left::after,
.is-active.u-line-center::after {
  animation: line-grow 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.2s;
}

/* 中央用はtranslateXの状態を維持したまま伸ばす */
.is-active.u-line-center::after {
  animation-name: line-grow-center;
}

/* 下線用キーフレーム */
@keyframes line-grow { to { transform: scaleX(1); } }
@keyframes line-grow-center { to { transform: translateX(-50%) scaleX(1); } }

/* 下線のアニメーション（タイプB：独立要素 .u-line-target） --------- */
/* --- 初期状態 --- */
.u-line-target {
  display: block;
  transform: scaleX(0);
  will-change: transform;
}

/* CONTACT用の下線 */
.u-line-center {
  width: 120px;
  height: 2px;
  background-color: #666;
  margin: 15px auto 0;
  transform-origin: center;
}

/* --- 発火時 --- */
.is-active .u-line-target.u-line-center {
  animation: line-grow-center-simple 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.4s;
}

/* 独立要素用のシンプルなキーフレーム */
@keyframes line-grow-center-simple {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Conceptエリア専用のレイアウト調整 --------- */
/* 親要素の調整 */
.js-scroll-trigger .concept__lead {
  text-indent: 0 !important;
  padding-left: 0 !important;
  display: block;
  text-align: left !important;
  margin-left: 0;
  overflow: hidden!important;
}

/* 分解された文字(span)の重なり防止 */
.js-scroll-trigger .concept__lead span {
  display: inline-block;
  white-space: pre; 
  letter-spacing: 0.05em !important;
  min-width: 0.8em; 
  vertical-align: bottom;
}

/* 最初のカギ括弧の突き出し */
.js-scroll-trigger .concept__lead span:first-child {
  margin-left: -0.5em;
}

/* 改行タグの維持 */
.concept__lead br {
  display: block;
  content: "";
  margin-top: 0;
}