@charset "utf-8";

.anime-scroll--hidden-x{
    overflow-x:hidden;
}
.anime-scroll--hidden-y{
    overflow-y:hidden;
}

/* 基本設定 */
.si{
	opacity: 0;
	transition: 
	opacity 1s var(--easeInOutSine),
	transform .8s var(--easeInOutSine);
}

/* 解除 */
.si.show{
	will-change: transform;
	opacity: 1;
	transform: none;
}

/* 検索結果ボックス */
/* 最初は非表示 */
.search__result-box {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, transform 0.6s ease;
	pointer-events: none;
}
/* 表示時に追加するクラス */
.search__result-box.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
/* 非表示へ戻すためのクラス（オプション） */
.search__result-box.hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
/* --------------------- */
/* アニメーション */
/* 手前からフワッ */
.si--scale{
	transform: scale(1.3);
}
/* 下からスライドイン */
.si--up{
	transform: translateY(10px);
}
/* 上からスライドイン */
.si--down{
	transform: translateY(-10px);
}
/* 左からスライドイン */
.si--left{
	transform: translateX(-10px);
}
/* 右からスライドイン */
.si--right{
	transform: translateX(10px);
}
/* フワッと表示 */
.si--fade{
	opacity: 0;
}
/* ボーダー */
.si.si--border{
	opacity: 1;
	transform: scaleX(0);
	transform-origin: center center;
	transition-delay: .2s;
}
.si.si--border-right{
	opacity: 1;
	transform: scaleX(0);
	transform-origin: top left;
	transition-delay: .2s;
}
.si--border-vertical{
	opacity: 1;
	transform: scaleY(0);
	transform-origin: left top;
}
.si.si--border.show{
	transform: scaleX(1);
}
.si.si--border-vertical.show{
	transform: scaleY(1);
}



/* --------------------- */
/* ディレイ--.si基準 */
.si--delay_short{
	transition-delay: .2s;
}

.si--delay_mid{
	transition-delay: .4s;
}

.si--delay_mid-long{
	transition-delay: .6s;
}

.si--delay_long{
	transition-delay: .8s;
}

.si--delay_very-long{
	transition-delay: 1s;
}
.si--delay_longest{
	transition-delay: 1.4s;
}


/* --------------------- */
/* クイック--.si基準 */
.si--quick_short{
	transition-delay: -.2s;
}
.si--quick_mid{
	transition-delay: -.4s;
}