/* --- 共通設定 (変更なし) --- */
:root {
  --easing: cubic-bezier(0.77, 0, 0.175, 1);
  --duration: 1.2s;
  --delay: 0s; /* スクロール検知ですぐ動かすため、ディレイは0または短めに調整 */
  --color: #333;
}

/* --- テキスト用の設定 --- */
.reveal-text {
  position: relative;
  display: inline-block;
  font-size: 4rem;
  font-weight: bold;
  overflow: hidden;
  color: #000;
  /* ※ここでは opacity: 0 にしない（中身のspanで制御するため） */
}

/* テキスト本体（最初は見えない） */
.reveal-text span {
  opacity: 0; 
  /* アニメーション定義は削除し、下部の .is-active ブロックへ移動 */
}

/* 動くブロック（擬似要素） */
.reveal-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color);
  transform: scaleX(0);
  transform-origin: left;
}


	
	
/* --- ▼▼▼ ここが重要：クラスがついた時のアニメーション ▼▼▼ --- */

/* 画面に入って .is-active が付与されたら、中身を表示 */
.reveal-text.is-active span {
  animation: textAppear var(--duration) var(--easing) forwards;
}

/* 画面に入って .is-active が付与されたら、ブロックを動かす */
.reveal-text.is-active::after {
  animation: blockReveal var(--duration) var(--easing) forwards;
}


	
/* --- 画像用の設定 --- */
.reveal-image {
  position: relative;
  overflow: hidden; /* ブロックがはみ出さないように */
  display: block;   /* または inline-block */
  width: 100%;      /* 必要に応じてサイズ調整 */
  /*max-width: 600px;*/ /* 例：最大幅制限 */
}

/* 画像本体（最初は見えない） */
.reveal-image img {
  width: 100%;
  height: auto;
  display: block; /* 画像下の隙間を消す */
  opacity: 0;     /* 最初は透明 */
}

/* 動くブロック（擬似要素） */
.reveal-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#007AB7; /* テキストと同じ色を使う */
  transform: scaleX(0);
  transform-origin: left;
  z-index: 2; /* 画像より手前に表示させる */
}

	
/* --- divブロック用の設定 --- */
.reveal-box {
  position: relative;
  overflow: hidden;
  
}

/* divの中身（タイトル、pタグ、ボタンなど全て） */
.reveal-box > * {
  opacity: 0; /* 最初は隠しておく */
}

/* 動くブロック（擬似要素） */
.reveal-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #007AB7; /* 共通カラー変数 */
  
  transform: scaleX(0);
  transform-origin: left;
  z-index: 10; /* 中身より手前に表示 */
}

/* --- ▼▼▼ クラスがついた時の動き（div用） ▼▼▼ --- */

/* .is-activeがついたら、中身をすべて表示 */
.reveal-box.is-active > * {
  animation: textAppear var(--duration) var(--easing) forwards;
}

/* .is-activeがついたら、ブロックを動かす */
.reveal-box.is-active::after {
  animation: blockReveal var(--duration) var(--easing) forwards;
}	
	
	
/* --- ▼▼▼ クラスがついた時の動き（画像用） ▼▼▼ --- */

/* 画面に入って .is-active が付与されたら、画像を表示 */
.reveal-image.is-active img {
  animation: textAppear var(--duration) var(--easing) forwards;
}

/* 画面に入って .is-active が付与されたら、ブロックを動かす */
.reveal-image.is-active::after {
  animation: blockReveal var(--duration) var(--easing) forwards;
}	
	
	
	
/* --- アニメーション定義 (変更なし) --- */
@keyframes blockReveal {
  0% { transform: scaleX(0); transform-origin: left; }
  45% { transform: scaleX(1); transform-origin: left; }
  55% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

@keyframes textAppear {
  0% { opacity: 0; }
  49% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}