/*----------------------------------------
	animation keyframes
------------------------------------------*/

@keyframes rotation{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(360deg); }
}
/* animation: rotation 60s linear infinite; */

@keyframes rotation_r{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(-360deg); }
}
/* animation: rotation 60s linear infinite; */

@keyframes hor_move_l{
	0% {transform: translateX(0%);}
	100% {transform: translateX(-100%);}
}
/* animation: hor_move_l 60s linear infinite; */

@keyframes hor_move_r{
	0% {transform: translateX(-100%);}
	100% {transform: translateX(0%);}
}
/* animation: hor_move_r 60s linear infinite; */

@keyframes ver_move_t{
	0% {transform: translateY(0%);}
	100% {transform: translateY(-100%);}
}
/* animation: ver_move_t 60s linear infinite; */

@keyframes ver_move_b{
	0% {transform: translateY(-100%);}
	100% {transform: translateY(0%);}
}
/* animation: ver_move_b 60s linear infinite; */

@keyframes fade_out { 
	0% { opacity: 1; }
	80% { opacity: 1;}
	100% { opacity: 0; visibility: hidden; } 
}
/* animation: fade_out 0.4s ease forwards; */

/*----------------------------------------
	common animation
------------------------------------------*/

/* セクション見出し:横からシュンっと出る(ttl_line.svg は動かさない) */
.sec_tit[data-scroll="reveal"] > :not(:last-child) {
	opacity: 0;
	transform: translateX(-80px) skewX(-10deg);
	transition:
		opacity 0.5s ease-out,
		transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}
.sec_tit[data-scroll="reveal"].scroll_in > :not(:last-child) {
	opacity: 1;
	transform: none;
}

/* 動きを減らす設定のユーザーには、アニメーションなしで表示 */
@media (prefers-reduced-motion: reduce) {
	.sec_tit[data-scroll="reveal"] > :not(:last-child) {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.sec_tit.no_anim > :not(:last-child) {
	transition: none;
}

/* 画像ボタンのホバー演出 */
.btn a,
.gallery_more,
.gallery_arrow,
.sns_list a,
.banner_list a {
	display: inline-block;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn a img,
.gallery_more img,
.gallery_arrow img,
.sns_list a img,
.banner_list a img {
	transition: filter 0.35s ease-out;
}

@media (hover: hover) {
	.btn a:hover,
	.gallery_more:hover,
	.gallery_arrow:hover,
	.sns_list a:hover,
	.banner_list a:hover {
		transform: translateY(-3px) scale(1.05);
	}
	.btn a:hover img,
	.gallery_more:hover img,
	.gallery_arrow:hover img,
	.sns_list a:hover img,
	.banner_list a:hover img {
		filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 255, 255, 0.55));
	}
}


/* NEWS一覧の記事:少し浮いて少し大きくなる(背景ごと動かす) */
.news_list li {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	transform-origin: center;
}

@media (hover: hover) {
	.news_list li:has(> a:not(.disactive):hover) {
		transform: translateY(-3px) scale(1.02);
	}
}

/* 押した瞬間は少し沈む */
.news_list li:has(> a:not(.disactive):active) {
	transform: translateY(0) scale(0.99);
}

/* ARCHIVE STAGE のカード */
.stage_info .grid_list li {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	transform-origin: center;
}

@media (hover: hover) {
	.stage_info .grid_list li:hover {
		transform: translateY(-3px) scale(1.02);
		position: relative;
		z-index: 1;
	}
}

.stage_info .grid_list li {
	position: relative;
}
.stage_info .grid_list li .card_link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/*----------------------------------------
	pages animation
------------------------------------------*/

/* 言語切り替え時の暗転(少し透ける) */
.lang_fade {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}
.lang_fade.is_out,
html.lang_switching .lang_fade {
	opacity: .8;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.lang_fade { transition: none; }
}