@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==================================================
   FUKUDA NOUKI
   COMMON SCROLL ANIMATION
================================================== */


/* ==================================================
   01. IMAGE REVEAL
   class="reveal-img"
================================================== */

.reveal-img{
	position:relative;
	overflow:hidden;
}

/* 画像本体 */

.reveal-img img{
	display:block;

	transform:scale(1.06);
	transition:
		transform 1.15s cubic-bezier(.22,1,.36,1);

	will-change:transform;
}


/* 画像を覆う幕 */

.reveal-img::after{
	content:"";

	position:absolute;
	z-index:2;

	top:0;
	right:0;

	width:100%;
	height:100%;

	background:#fff;

	pointer-events:none;

	transition:
		width 1.05s cubic-bezier(.76,0,.24,1);

	will-change:width;
}


/* 表示 */

.reveal-img.is-show::after{
	width:0;
}

.reveal-img.is-show img{
	transform:scale(1);
}


/* ==================================================
   02. LINE REVEAL
   class="reveal-line"
================================================== */

.reveal-line{
	position:relative;
}


/* 横線 */

.reveal-line::after{
	content:"";

	display:block;

	width:0;
	height:2px;

	margin-top:12px;

	background:currentColor;

	transition:
		width .8s cubic-bezier(.22,1,.36,1);

	will-change:width;
}


/* 表示 */

.reveal-line.is-show::after{
	width:42px;
}


/* ==================================================
   03. TEXT UP
   class="reveal-up"
================================================== */

.reveal-up{
	opacity:0;

	transform:translateY(18px);

	transition:
		opacity .75s ease,
		transform .9s cubic-bezier(.22,1,.36,1);

	will-change:opacity,transform;
}


/* 表示 */

.reveal-up.is-show{
	opacity:1;
	transform:translateY(0);
}


/* ==================================================
   DELAY
   必要なときだけ追加
================================================== */

.reveal-delay-1{
	transition-delay:.10s !important;
}

.reveal-delay-2{
	transition-delay:.20s !important;
}

.reveal-delay-3{
	transition-delay:.30s !important;
}


/* ==================================================
   ACCESSIBILITY
   動きを減らす設定の端末ではアニメーションOFF
================================================== */

@media (prefers-reduced-motion:reduce){

	.reveal-img img,
	.reveal-img::after,
	.reveal-line::after,
	.reveal-up{
		transition:none !important;
	}

	.reveal-img::after{
		width:0;
	}

	.reveal-img img{
		transform:none;
	}

	.reveal-up{
		opacity:1;
		transform:none;
	}

	.reveal-line::after{
		width:42px;
	}

}

/* ==================================================
   04. SIDE REVEAL
   左からゆっくりスライドイン
   class="reveal-side"
================================================== */

.reveal-side{
	opacity:0;

	transform:translateX(-30px);

	transition:
		opacity 1.2s ease,
		transform 1.6s cubic-bezier(.22,1,.36,1);

	will-change:opacity,transform;
}


/* 表示 */

.reveal-side.is-show{
	opacity:1;
	transform:translateX(0);
}


/* ==================================================
   ACCESSIBILITY
================================================== */

@media (prefers-reduced-motion:reduce){

	.reveal-side{
		opacity:1;
		transform:none;
		transition:none !important;
	}

}