@charset "utf-8";
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
株式会社サンロイヤル新潟　カスタム対応
	ver.2025.05.30.Custom-SunroyalNiigata
	ページフッター　スタイルシート
────────────────────────────────────────
FileName:		/resources/css/common-animation.css
Editor:			TRUSTEC
Description:	アニメーション　スタイルシート。
────────────────────────────────────────
2025/05/30:		サンプル開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/*========= ぼかす動きのCSS ===============*/
/* ぼかしを取る */
.removeBlur{
    transition: all 0.8s;
	filter: unset !important;
	opacity: 1 !important;
	/*filter: opacity(1) !important;*/
}
/* ぼかす */
.setBlur{
	transition: all 0.8s;
    filter: blur(30px);
	opacity: 0.3;
}

/*========= ふわっと出現するの動きのCSS ===============*/

/* 下から */
.fadeInUp{
	animation-name:fadeInUpAnime;
	animation-duration:1s;
	filter: opacity(1) !important;
	transition: all 1s ease-in;
}

@keyframes fadeInUpAnime{
	0% {
	  transform: translateY(30px);
		filter: opacity(0);
	}
	65% {
	  transform: translateY(3px);
	}
	100% {
	  transform: translateY(0);
	}
	20%,100% {
		filter: opacity(1);
	}


}

/* 上から */
.fadeInDown{
	animation-name:fadeInDownAnime;
	animation-duration:1s;
	filter: opacity(1) !important;
	transition: all 1s ease-in;
}

@keyframes fadeInDownAnime{
	0% {
	  transform: translateY(-30px);
		filter: opacity(0);
	}
	65% {
	  transform: translateY(-3px);
	}
	100% {
	  transform: translateY(0);
	}
	20%,100% {
		filter: opacity(1);
	}
}

/* 左から */
.fadeInLeft{
	animation-name:fadeInLeftAnime;
	animation-duration:1s;
	filter: opacity(1) !important;
	transition: all 1s ease-in;
}

@keyframes fadeInLeftAnime{
  0% {
    transform: translateX(20px);
	filter: opacity(0);
  }
  65% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
		filter: opacity(1) !important;
  }

}

/* 右から */
.fadeInRight{
	animation-name:fadeInRightAnime;
	animation-duration:1s;
	filter: opacity(1) !important;
	transition: all 1s ease-in;
}

@keyframes fadeInRightAnime{
  0% {
    transform: translateX(-20px);
	filter: opacity(0);
  }
  65% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
		filter: opacity(1) !important;
  }
}

/* その場で */
.fadeIn{
	animation-name:fadeInAnime;
	animation-duration:1s;
	filter: opacity(1) !important;
	transition: all 1s ease-in;
}

@keyframes fadeInAnime{
	0% {
		filter: opacity(0);
		transition: all 1s ease-in;
	}
	100% {
		filter: opacity(1) !important;
	}
}


/*========= ふわっと消える動きのCSS ===============*/

/* 上へ */
.fadeOutUp{
	animation-name:fadeOutUpAnime;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 1;
	transition: all 0.8s;
}

@keyframes fadeOutUpAnime{
  from {
    opacity: 1 !important;
	transform: translateY(0);
  }

  to {
    opacity: 0;
	transform: translateY(-30px);
  }
}



/*========= 追従ボタン用 ===============*/
/* スライドイン（右→中央） */
@keyframes slideInFromRight {
  0% {
    transform: translateX(10%);
    opacity: 0;
  }
  65% {
    transform: translateX(1%);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 1;
  }
}

/* スライドアウト（中央→左） */
@keyframes slideOutToRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  65% {
    transform: translateX(9%);
  }
  100% {
    transform: translateX(10%);
  }
  80%,100% {
    opacity: 0;
  }
}

/* アニメーションクラス */
.slide-in-right {
  animation: slideInFromRight 0.3s ease-out forwards;
}
.slide-out-right {
  animation: slideOutToRight 0.3s ease-in forwards;
}



/*========= ボタン - 波紋 ===============*/
.map-link:hover,
.footer-address .footer-map-link:hover,
.footer-address .footer-map-link:hover{
  background-position: right center;
  background-size: 200% auto;
  -webkit-animation: pulse 2s infinite;
  animation: ripple-white 1.5s infinite;
}
.map-link:hover,
.btn-andmore:hover,
.contact-web-link:hover,
.nav-item .contact:hover {
  background-position: right center;
  background-size: 200% auto;
  -webkit-animation: pulse 2s infinite;
  animation: ripple 1.5s infinite;
}
@media screen and (max-width: 1000px) {
	.map-link:active,
	.footer-address .footer-map-link:active,
	.footer-address .footer-map-link:active{
	  background-position: right center;
	  background-size: 200% auto;
	  -webkit-animation: pulse 2s infinite;
	  animation: ripple-white 1.5s infinite;
	}
	.map-link:active,
	.btn-andmore:active,
	.contact-web-link:active,
	.nav-item .contact:active {
	  background-position: right center;
	  background-size: 200% auto;
	  -webkit-animation: pulse 2s infinite;
	  animation: ripple 1.5s infinite;
	}
}
/* PCの時は:hover */
@media screen and (min-width: 1001px) {
	.map-link:hover,
	.footer-address .footer-map-link:hover,
	.footer-address .footer-map-link:hover{
	  background-position: right center;
	  background-size: 200% auto;
	  -webkit-animation: pulse 2s infinite;
	  animation: ripple-white 1.5s infinite;
	}
	.map-link:hover,
	.btn-andmore:hover,
	.contact-web-link:hover,
	.nav-item .contact:hover {
	  background-position: right center;
	  background-size: 200% auto;
	  -webkit-animation: pulse 2s infinite;
	  animation: ripple 1.5s infinite;
	}
}

/* アニメーション */
@keyframes ripple {
  0% {box-shadow: 0 0 0 0 #00813d;}
  70% {box-shadow: 0 0 0 10px rgb(27 133 251 / 0%);}
  100% {box-shadow: 0 0 0 0 rgb(27 133 251 / 0%);}
}
@keyframes ripple-white {
  0% {box-shadow: 0 0 0 0 #ffffff;}
  70% {box-shadow: 0 0 0 10px rgb(27 133 251 / 0%);}
  100% {box-shadow: 0 0 0 0 rgb(27 133 251 / 0%);}
}


/*========= ボタン - 矢印が移動 ===============*/
.href-txt:after,
.href-txt:after {
    right: 30px;
	transition: ease .3s;
}
.href-txt:hover:after,
.href-txt:hover:after {
    right: 27px;
	transition: ease .3s;
}


/*========= ボタン - 背景が左右移動 ===============*/
.footer-copyright-menu-list .sitemap-item:hover,
.footer-sitemap-horizontal .sitemap-item:hover{
	text-decoration:underline;
	transition: all 0.3s ease-out;
}
#navbar-subMenue a:hover::after{
  opacity: 1;
}
@media screen and (max-width: 1000px) {
	.footer-copyright-menu-list .sitemap-item:active,
	.footer-sitemap-horizontal .sitemap-item:active{
		text-decoration:underline;
		transition: all 0.3s ease-out;
	}
	#navbar-subMenue a:active::after{
	  opacity: 1;
	}
}
/* PCの時は:hover */
@media screen and (min-width: 1001px) {
	.footer-copyright-menu-list .sitemap-item:hover,
	.footer-sitemap-horizontal .sitemap-item:hover{
		text-decoration:underline;
		transition: all 0.3s ease-out;
	}
	#navbar-subMenue a:hover::after{
	  opacity: 1;
	}
}