@charset "utf-8";
/* 表側のみに読み込んで、エディタ側では読み込みたくないCSSは全てこのファイルに記述する */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
FVの時は隠しておいて、スクロールしたら表示させる(2022-08-30)mk
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body:not(.wp-admin) .is_fv_hide{
	display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
アニメーション
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*ズーム*/
.scalein {
	opacity: 0;
    transform: scale(0.4);
    transition:all 0.5s cubic-bezier(0.175, 0.885, 0.3, 1.2);
}

.scalein.is-inview {
	opacity: 1;
    transform: scale(1);
}

/*左から右*/
.slideTo_R {
	opacity: 0;
	transform: translateX(-40%);
	transition:all 0.5s  cubic-bezier(0.175, 0.885, 0.4, 1.25);
}
.slideTo_R.is-inview {
	transform: translateX(0%);
	opacity: 1;
}

/*右から左*/
.slideTo_L {
	opacity: 0;
	transform: translateX(40%);
	transition:all 0.5s  cubic-bezier(0.175, 0.885, 0.4, 1.25);
}
.slideTo_L.is-inview {
	transform: translateX(0%);
	opacity: 1;
}

/* 一文字ずつ表示（spanはJSで追加） */
.split span {
	opacity: 0;
	display: inline-block;
	transform: translateY(20px);
}
.split.is-inview span {
	animation: fadeUp 0.8s ease-out forwards;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/*背景 白背景色から画像が出現*/
.bgextend::after {
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(1, 1);
	transition: transform .7s cubic-bezier(0.77, 0.2, 0.05, 1) .3s;
	transform-origin: left top;
	position: absolute;
	left: 0;
	top: 0;
	background: #fff;
}
.bgextend.is-inview.right::after {
	transform: scale(0, 1);
	transform-origin: right bottom;
}
.bgextend.is-inview.left::after {
	transform: scale(0, 1);
	transform-origin: left bottom;
}