@charset "UTF-8";

.text > p:not(.visible) {
	visibility: hidden;
}
.character {
	/* アニメーション開始前のスタイルを指定 */
	position: relative;
	top: 10px;
	opacity: 0;
	/* アニメーション設定 */
	--property: top, opacity;/* アニメーションに使用するプロパティ */
	--duration: 300ms;/* 一字あたりの表示に掛ける時間 */
	--delay: -200ms;/* 前の一字のアニメーション終了からの遅延時間 */
	transition-propaty: var(--property);
	transition-timing-function: steps(20,end);
	transition-duration: var(--duration);
	transition-delay: calc( ( var(--duration) + var(--delay) ) * var(--index,0) + var(--delay) );
}

.visible .character {
	/* アニメーション終了時のスタイルを指定 */
	top: 0;
	opacity: 1;
	/* 処理軽減 */
	will-change: var(--property);
}


.underline_before {
	background: linear-gradient(#0071be, #0071be) 0 100%/0 6px no-repeat;
	transition: background .8s;
	text-decoration: none;
    display: inline-block;
  padding-bottom: 10px;
}
.underline_after {
	background-size: 100% 6px;
}