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

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


/* =======================================

クラス付与で使えるCSSアニメーション

 ---------------------------------------

以下のクラスと「animate」の2つのクラスを追加すること

======================================= */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ズーム「scale_in」
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.scale_in {
	opacity: 0;
    transform: scale(0.4);
    transition:all 0.5s cubic-bezier(0.175, 0.885, 0.3, 1.2);
}
.scale_in.is-inview {
	opacity: 1;
    transform: scale(1);
}

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

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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
下から上「slide_up」
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.slide_up {
  opacity: 0;
  transform: translateY(50%);
  transition:all 0.6s  cubic-bezier(0.175, 0.885, 0.4, 1.25);
}
.slide_up.is-inview {
  transform: translateX(0%);
  opacity: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
白背景色から画像が出現「bg_extend」
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bg_extend::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;
}
.bg_extend.is-inview::after {
	transform: scale(0, 1);
	transform-origin: left bottom;
}