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

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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップ > 見出しアニメーション
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* =============================
共通
============================= */

/* 背景イン（左 → 右） */
@keyframes bg-in {
	from { transform: translateX(-101%); }
	to   { transform: translateX(0); }
}

/* 背景アウト（右へ消える） */
@keyframes bg-out {
	from { transform: translateX(0); }
	to   { transform: translateX(101%); }
}

/* =============================
#home_about
============================= */

#home_about .animate > span {
	position: relative;
	display: inline-block;
	overflow: hidden;
	visibility: hidden;
	z-index: 0;
	color: transparent; /* テキストノード含め完全非表示 */
}

/* 1行目の mark は必ず初期非表示 */
#home_about .animate > span:first-of-type mark {
	color: transparent;
}

/* 背景ブロック */
#home_about .animate > span::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--main);
	transform: translateX(-101%);
	z-index: 1;
}

/* is-inview */
#home_about .animate.is-inview > span {
	visibility: visible;
}

#home_about .animate.is-inview > span::after {
	animation:
		bg-in 0.2s cubic-bezier(.77, 0, .6, 1) forwards,
		bg-out 0.2s cubic-bezier(.77, 0, .6, 1) forwards;
}

/* ---------- 1行目 ---------- */
#home_about .animate.is-inview > span:first-of-type::after {
	animation-delay: 0s, 0.8s;
}

#home_about .animate.is-inview > span:first-of-type {
	animation: text-show 0.3s forwards;
	animation-delay: 0.6s;
}

#home_about .animate.is-inview > span:first-of-type mark {
	animation: mark-show 0.3s forwards;
	animation-delay: 0.6s;
}

/* ---------- 2行目 ---------- */
#home_about .animate.is-inview > span:first-of-type + br + span::after {
	animation-delay: 0.4s, 1.2s;
}

#home_about .animate.is-inview > span:first-of-type + br + span {
	animation: text-show 0.3s forwards;
	animation-delay: 1s;
}

/* =============================
#home_company
============================= */

#home_company .animate > span {
	position: relative;
	display: inline-block;
	overflow: hidden;
	visibility: hidden;
	z-index: 0;
	color: transparent;
}

/* mark 初期非表示 */
#home_company .animate mark {
	color: transparent;
}

/* 背景ブロック */
#home_company .animate > span::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--main);
	transform: translateX(-101%);
	z-index: 1;
}

/* is-inview */
#home_company .animate.is-inview > span {
	visibility: visible;
}

#home_company .animate.is-inview > span::after {
	animation:
		bg-in 0.2s cubic-bezier(.77, 0, .6, 1) forwards,
		bg-out 0.2s cubic-bezier(.77, 0, .6, 1) forwards;
}

/* ---------- 1行目 ---------- */
#home_company .animate.is-inview > span:first-of-type::after {
	animation-delay: 0s, 0.8s;
}

#home_company .animate.is-inview > span:first-of-type {
	animation: text-show 0.3s forwards;
	animation-delay: 0.6s;
}

/* ---------- 2行目（mark） ---------- */
#home_company .animate.is-inview > span:first-of-type + br + span::after {
	animation-delay: 0.4s, 1.2s;
}

#home_company .animate.is-inview > span:first-of-type + br + span {
	animation: text-show 0.3s forwards;
	animation-delay: 1s;
}

#home_company .animate.is-inview > span:first-of-type + br + span mark {
	animation: mark-show 0.3s forwards;
	animation-delay: 1s;
}

/* =============================
共通 > トップ
============================= */

/* テキスト表示 */
@keyframes text-show {
	to { color: var(--text); }
}

/* mark 表示 */
@keyframes mark-show {
	to { color: var(--main); }
}

/* =============================
下層 > プロモ
============================= */

.note_page_promo .animate span {
	position: relative;
	display: inline-block;
	overflow: hidden;
	visibility: hidden;
	color: transparent; /* ← 文字は色で隠す */
}

/* 背景ブロック */
.note_page_promo .animate span::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--main);
	transform: translateX(-101%);
	z-index: 1;
}

/* is-inview */
.note_page_promo .animate.is-inview span {
	visibility: visible;
}

.note_page_promo .animate.is-inview span::after {
	animation:
		bg-in 0.2s cubic-bezier(.77, 0, .6, 1) forwards,
		bg-out 0.2s cubic-bezier(.77, 0, .6, 1) forwards;
}

/* ---------- 1行目 ---------- */
.note_page_promo .animate.is-inview p span::after {
	animation-delay: 0s, 0.8s;
}

.note_page_promo .animate.is-inview p span {
	animation:  text-show-main 0.3s forwards;
	animation-delay: 0.6s;
}

/* ---------- 2行目 ---------- */
.note_page_promo .animate.is-inview h1 span::after {
	animation-delay: 0.4s, 1.2s;
}

.note_page_promo .animate.is-inview h1 span {
	animation: text-show-text 0.3s forwards;
	animation-delay: 1s;
}

/* ---------- アニメーション ---------- */
/* 1行目：mainカラー */
@keyframes text-show-main {
	to { color: var(--main); }
}

/* 2行目：通常テキストカラー */
@keyframes text-show-text {
	to { color: var(--text); }
}