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

　CSS構成

　//絶対に変更しないCSS
　- reset.css           全てのブラウザ固有CSSをリセットするCSS。基本触らないこと。
　- bootstrap.min.css   Bootstrapコンポーネントを利用するためのCSS。基本触らないこと。
　- all.min.css         Font Awesome を利用するためのCSS。基本触らないこと。
　- aos.css             AOSを利用するためのCSS。基本触らないこと。

　//基本的には変更しないCSS
　- base.css            基本の文字設定や、Webフォントの読み込みなど。基本触らなくてもOK。

　//メインで利用しているCSS
　- common.css          ヘッダー、フッター、下層ページのタイトルなど、共通ページレイアウトを記載したCSS
　- stlye.css           各ページ固有のレイアウトを記載したCSS

　//補助的に利用しているCSS
　- module.css          見出しやリスト、テーブルなど、共通利用できるパーツをまとめたCSS
　- utility.css         マージンやパディング、文字サイズや文字色など、補助的に利用できるCSS
　- animation.css       オリジナルのアニメーションCSS

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


/* split-type ----------------------------------------*/
.char{
    transform: translateY(0.3em);
    opacity: 0;
}
/* js-slide-up-clip-up ----------------------------------------*/
.js-slide-up-clip-up{
    transition: 0.5s ease-out;
}

/* js-slide-list-left ----------------------------------------*/
.js-slide-list-left{
    overflow: hidden;
}

/* extend ----------------------------------------*/
*[data-gsap="extend-left"],
*[data-gsap="extend-right"]{
    position: relative;
    overflow: hidden;
}

*[data-gsap="extend-left"] *,
*[data-gsap="extend-right"] *{
    opacity: 0;
}
.extend-right::before,
.extend-left::before{
    position: absolute;
    top: 0;
    content: "";
    width: 0;
    height: 100%;
    background: linear-gradient(90deg,#1dd4c5 0%, #1a5dcc 100%);
    z-index: 2;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
}
.extend-right::before{
    left: 0;
    animation-name:LRextendAnime;
}
@keyframes LRextendAnime{
	0% {
        left: 0;
        width: 0;
	}
	45% {
        left: 0;
        width: 100%;
	}
	55% {
        left: 0;
        width: 100%;
	}
	100% {
        left: 100%;
        width: 100%;
	}
}

.extend-left::before{
    right: 0;
    animation-name:RLextendAnime;
}
@keyframes RLextendAnime{
	0% {
        right: 0;
        width: 0;
	}
	45% {
        right: 0;
        width: 100%;
	}
	55% {
        right: 0;
        width: 100%;
	}
	100% {
        right: 100%;
        width: 100%;
	}
}

.extend-right *,
.extend-left *{
    animation-name:extendAnimeContents;
	animation-duration:0.1s;
    animation-delay: 0.5s;
	animation-fill-mode:forwards;
}
@keyframes extendAnimeContents{
	0% {
        opacity: 0;
	}
	100% {
        opacity: 1;
	}
}