@charset "utf-8";

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

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

/* 解除 */
.si.show{
	will-change: transform;
	opacity: 1;
	transform: 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--border-vertical{
	opacity: 1;
	transform: scaleY(0);
	transform-origin: left top;
}
.si--border::before,
.si--border::after {
	transition: flex-grow .6s var(--easeInOutSine);
}
/*------------------------------*/

/* Smartphone 767px */

/*------------------------------*/
@media(max-width:767px){
	.si--border::before,
	.si--border::after {
		transition: flex-grow .4s var(--easeInOutSine);
	}
}
.si.si--border.show::before,
.si.si--border.show::after {
	flex-grow: 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;
}

/* --------------------- */
/* カスタム: 見出しのアニメーション */
/* 真ん中の線が真ん中から伸びるエフェクト */
.headline-line.si {
	transform: scaleX(0);
	transition: transform 0.6s var(--easeInOutSine);
}
.headline-line.si.show {
	transform: scaleX(1);
}

/* 横書き（-horizontal）のボーダー線が上から下へ伸びるエフェクト */
.headline__wrapper.-horizontal.si::before {
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.6s var(--easeInOutSine);
}
.headline__wrapper.-horizontal.si.show::before {
	transform: scaleY(1);
}