@charset "utf-8";



.hero_change { 
  position: relative; 
  background: url(../img/hero_4.webp) no-repeat center center; 
  background-size: cover; 
} 

.hero_change::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: url(../img/842_ev.webp) no-repeat center center; 
  background-size: cover; 
  opacity: 0; 
  animation: crossfade 5s ease-in-out 4s forwards; /* 4s 後にフェードイン */ 
} 
@keyframes crossfade { 
	from { opacity: 0; } to { opacity: 0.5; } 
}

.hero_image {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes bgchange{
	0% {
		background:url(..//img/hero_4.webp) no-repeat center center;
		background-size: cover;
	}
  	100%   {
		background:url(..//img/842_ev.webp) no-repeat center center;
		background-size: cover;}
}

.fixed_btn { 
	opacity: 0; 
	animation: btnFadeIn 2s ease-in-out forwards; 
	animation-delay: 10s; /* 紹介文が出終わるタイミングに合わせる */ 
} 
@keyframes btnFadeIn { 
	from { opacity: 0; } 
	to { opacity: 1; }  
}


.hero_text_change{
	opacity: 1;
	opacity: 0;
	animation-iteration-count: 1;
	animation: text_change 5s ease-in-out;
	animation-fill-mode: forwards; 
	animation-delay: 1s; 
}


@keyframes text_change{
	0%   {opacity: 0;}
	30%   {opacity: 1;}
	70%   {opacity: 1;}
	100%   {opacity: 0;}
}


.hero_text_new {
	opacity: 1;
	opacity: 0;
	animation-iteration-count: 1;
	animation: textFadeIn 5s ease-in-out;
	animation-fill-mode: forwards; 
	animation-delay: 5s; 
}

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

/* @keyframes bgchange{
  0%   {background:#ffffff;}
  25%  {background:#f0ebe7;}
  50%  {background:#fcf4f3;}
  75%  {background:#f8f8eb;}
  100% {background:#ffffff;}
} */