@charset "UTF-8";
/* 固定ページ「movie用のスタイルシート 動きを加える */

/*==================================================
↓↓↓ここから　動きのあるcss
===================================*

/*==================================================
バウンドアニメーション
/* ーーーーーーーーーーーーーーーーーーーーーーーーー */
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0); /* 初期位置 */
	}
	40% {
		transform: translateY(-30px); /* 上に跳ねる高さ（-30px） */
	}
	60% {
		transform: translateY(-15px); /* 少し低い位置に跳ねる（-15px） */
	}
}

/* バウンドアニメーションを適用する要素のスタイル */
.element-2 {
	animation: bounce 2s infinite; /* 2秒間隔で無限にバウンドする */
}

/*==================================================
ふわっ
===================================*/
/* その場で */
/* その場で */
.fadeIn{
	animation-name:fadeInAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeInAnime{
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* fadeUp */

.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* 右から */

.fadeRight{
	animation-name:fadeRightAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeRightAnime{
	from {
		opacity: 0;
		transform: translateX(100px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 左から */

.fadeLeft{
	animation-name:fadeLeftAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeLeftAnime{
	from {
		opacity: 0;
		transform: translateX(-100px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}



/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
	opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
	animation-name:flipDownAnime;
	animation-duration:5s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes flipDownAnime{
	from {
		transform: perspective(2500px) rotateX(100deg);
		opacity: 0;
	}

	to {
		transform: perspective(2500px) rotateX(0);
		opacity: 1;
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
	opacity: 0;
}

/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:3s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
	from {
		opacity:0;
	}

	to {
		opacity:1;  
	}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:2s;
	animation-delay: 1s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*右から*/
.bgRLextend::before{
	animation-name:bgRLextendAnime;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	/*伸びる背景色の設定*/
	/* background-color: #004900;  */
	background-color: #e8f1ef
		/* 	background-image:url("http://www.test.j-union.net/wp-content/uploads/2024/03/header_logo.png"); */
		background-position:center center;

}
.bgRLextend::after{

}


@keyframes bgRLextendAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}
/*左から*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1.2s;
	animation-fill-mode:forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	/*伸びる背景色の設定*/
	/* background-color: #004900;  */
	background-color: #e8f1ef;
	/* 	background-image:url("http://www.test.j-union.net/wp-content/uploads/2024/03/header_logo.png"); */
	background-position:center center;

}
.bgRLextend::after{

}


@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
	position: relative; /* 枠線が書かれる基点*/
	opacity:0;
}

.lineTrigger.lineanime{
	animation-name:lineAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
	/*   from {
	opacity:0;
}

	to {
	opacity:1;  
	*/
	0% {
		opacity: 0;
	}
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
	position: absolute;
	content:"";
	width:0;
	height:1px;
	background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
	position: absolute;
	content:"";
	width: 1px;
	height:0;
	background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
	top:0;
	left:0;
}

.lineTrigger.lineanime::before {
	animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
	top:0;
	right:0;
}

.lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
	bottom:0;
	right:0;
}

.lineTrigger.lineanime::after {
	animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
	bottom:0;
	left:0;
}

.lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
	0% {width:0%;}
	100%{width:100%;}
}

@keyframes lineAnime2 {
	0% {height:0%;}
	100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
	animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0;/*初期値を透過0にする*/ 
}

@keyframes lineInnerAnime{
	0% {opacity:0;}
	100% {opacity:1;}
}
/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
	animation-name:smoothAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
	transform-origin: left;
	opacity:0;
}

@keyframes smoothAnime{
	from {
		transform: translate3d(0, 100%, 0) skewY(12deg);
		opacity:0;
	}

	to {
		transform: translate3d(0, 0, 0) skewY(0);
		opacity:1;
	}
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
	animation-name:rotateXAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
	from{
		transform: rotateX(0);
		opacity: 0;
	}
	to{
		transform: rotateX(-360deg);
		opacity: 1;
	}
}

/*　Y軸（横へ） */
.rotateY{
	animation-name:rotateYAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		opacity: 0;
	}
	to{
		transform: rotateY(-360deg);
		opacity: 1;
	}
}

/* Z 軸（左へ） */
.rotateLeftZ{
	animation-name:rotateLeftZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
	}
	to{
		transform: rotateZ(-360deg);
		opacity: 1;
	}
}

/*　Z 軸（右へ） */
.rotateRightZ{
	animation-name:rotateRightZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
	}
	to{
		transform: rotateZ(360deg);
		opacity: 1;
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
	opacity: 0;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.smoothTrigger{
	opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
	from {
		transform: scale(0.6);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* 縮小 */
.zoomOut{
	animation-name:zoomOutAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
	from {
		transform: scale(1.2);
		opacity: 0;
	}

	to {
		transform:scale(1);
		opacity: 1;
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.zoomInTrigger,
.zoomOutTrigger{
	opacity: 0;
}

/*==================================================
/* アニメーションスタートの遅延時間を決めるCSS*/
/*===================================*/
.delay-time03{ 
	animation-delay: 0.3s;
}
.delay-time05{  
	animation-delay: 0.5s;
}
.delay-time07{  
	animation-delay: 0.7s;
}
.delay-time1{  
	animation-delay: 1s;

}

.delay-time15{  
	animation-delay: 1.5s;
}

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

.delay-time25{  
	animation-delay: 2.5s;
}
.delay-time3{  
	animation-delay: 3s;
}
.delay-time35{  
	animation-delay: 3.5s;
}
.delay-time4{  
	animation-delay: 4s;
}

/*==================================================
/* 文字にマーカーつける */
/* .marker-target {
position: relative;
display: inline-block; 
color: black;
background-color: transparent;
cursor: default;
overflow: visible;
} */

/* 擬似要素で線を作る */
/* .marker-target::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 1em;
background: yellow; 
width: 0;
transition: width 0.6s ease;
z-index: -1;
} */

/* マーカーが付いたら線を横いっぱいに広げる */
/* .marker-target.marker-highlight::before {
width: 100%;
} */


.marker-target {
	background: linear-gradient(
		transparent 50%,            /* 上40%までは透明 */
		rgba(255, 255, 153, 0.8) 40% /* 40%から下は半透明の黄色 */
	);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	transition: background-size 2s ease;
	box-decoration-break: clone;/*複数行にわたっても背景が途切れない*/
	-webkit-box-decoration-break: clone;
}

.marker-highlight {
	background-size: 100% 100%;
}


/* アニメーションループ お客様の声*/
.anime-loop span {
	opacity: 0;
	animation: flow 1s infinite ease-in-out;
}

/* ▶1 → ▶2 → ▶3 をしっかりずらす */
.arrow span:nth-child(1) { animation-delay: 0s; }
.arrow span:nth-child(2) { animation-delay: 0.3s; }
.arrow span:nth-child(3) { animation-delay: 0.6s; }

@keyframes flow {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; transform: translateX(5px); }
  40%  { opacity: 1; transform: translateX(25px); }
  50%  { opacity: 0; transform: translateX(40px); }
  100% { opacity: 0; transform: translateX(40px); }
}
/*==================================================
↑ここまで　動きのあるcss
===================================*/