@charset "UTF-8";

/*--------------------------------------------------------------*/
/* 全パーツ共通(20*5=100秒ループ)
/*--------------------------------------------------------------*/
.action {
	animation-duration: 40.0s;
	animation-iteration-count: infinite;
}
.back {		position: absolute;
		top: 0px ;
		left:0px ;
}

/*--------------------------------------------------------------*/
/* アクション＋ベース位置＝＞パーツ名(全部別々にしておく)
/*--------------------------------------------------------------*/
@keyframes logo_act {				/* ロゴは固定？ */
	from	{	opacity: 0;	}
	4%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.logo {		position: absolute;
		top: 0px ;
		left:0px ;
		animation-name: logo_act;
}

@keyframes lastlogo_act {
	from	{	opacity: 0;	}
	92%	{	opacity: 0; transform:scale(5)		}
	94%	{	opacity: 0.7; transform:scale(1)	}
	98%	{	opacity: 0.7; transform:scale(1)	}
	to	{	opacity: 0;	}
}
.lastlogo {	position: absolute;
		top: 265px ;
		left:372px ;
		font-size:20px;
		font-weight:700;
		animation-name: lastlogo_act;
}

/*--------------------------------------------------------------*/
@keyframes mail_act {				/* 真ん中のメールアイコン	*/
	from	{	opacity: 0;						}
	 8%	{	opacity: 0; transform:scale(0.1);			}
	 9%	{	opacity: 1; transform:scale(0.3);			}
	10%	{	opacity: 1; transform:translate(-130px,-60px) scale(0.1)}
	90%	{	opacity: 1; transform:translate(-130px,-60px) scale(0.1)}
	92%	{	opacity: 1; transform:translate(0px,0px) scale(0.1)	}
	94%	{	opacity: 1; transform:translate(0px,0px) scale(0.3)	}
	98%	{	opacity: 1; transform:translate(0px,0px) scale(0.3)	}
	to	{	opacity: 0; transform:translate(0px,0px) scale(0.3)	}
}
.mail {		position: absolute;
		top: -105px ;
		left:25px ;
		animation-name: mail_act;
}
/*--------------------------------------------------------------*/
@keyframes scene0_act {
	from	{	opacity: 0;	}
	 1%	{	opacity: 0;	}
	 3%	{	opacity: 1;	}
	 8%	{	opacity: 1;	}
	 9%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene0 {	position: absolute;
		top: 190px ;
		left:310px ;
		font-size:30px;
		font-weight:900;
		animation-name: scene0_act;
}
/*--------------------------------------------------------------*/
/* シーン１
/*--------------------------------------------------------------*/
@keyframes scene1c_act {
	from	{	opacity: 0;	}
	 9%	{	opacity: 0;	}
	10%	{	opacity: 1;	}
	25%	{	opacity: 1;	}
	26%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene1c {	position: absolute;
		top: 150px ;
		left:320px ;
		font-size:24px;
		font-weight:600;
		animation-name: scene1c_act;
}

@keyframes scene11_act {
	from	{	opacity: 0;	}
	10%	{	opacity: 0;	}
	11%	{	opacity: 1;	}
	25%	{	opacity: 1;	}
	26%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene11 {	position: absolute;
		top: 100px ;
		left:90px ;
		font-size:30px;
		color:white;
		animation-name: scene11_act;
}
@keyframes scene12_act {
	from	{	opacity: 0;	}
	11%	{	opacity: 0;	}
	12%	{	opacity: 1;	}
	25%	{	opacity: 1;	}
	26%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene12 {	position: absolute;
		top: 100px ;
		left:670px ;
		font-size:30px;
		color:white;
		animation-name: scene12_act;
}

@keyframes scene13_act {
	from	{	opacity: 0;	}
	12%	{	opacity: 0;	}
	13%	{	opacity: 1;	}
	25%	{	opacity: 1;	}
	26%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene13 {	position: absolute;
		top: 280px ;
		left:60px ;
		font-size:30px;
		color:white;
		animation-name: scene13_act;
}

@keyframes scene14_act {
	from	{	opacity: 0;	}
	13%	{	opacity: 0;	}
	14%	{	opacity: 1;	}
	25%	{	opacity: 1;	}
	26%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene14 {	position: absolute;
		top: 280px ;
		left:670px ;
		font-size:30px;
		color:white;
		animation-name: scene14_act;
}

/*--------------------------------------------------------------*/
/* シーン２
/*--------------------------------------------------------------*/
@keyframes scene2c_act {
	from	{	opacity: 0;	}
	26%	{	opacity: 0;	}
	27%	{	opacity: 1;	}
	41%	{	opacity: 1;	}
	42%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene2c {	position: absolute;
		top: 150px ;
		left:320px ;
		font-size:24px;
		font-weight:600;
		animation-name: scene2c_act;
}

@keyframes scene21_act {
	from	{	opacity: 0;	}
	27%	{	opacity: 0;	}
	28%	{	opacity: 1;	}
	41%	{	opacity: 1;	}
	42%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene21 {	position: absolute;
		top: 90px ;
		left:40px ;
		font-size:30px;
		color:white;
		animation-name: scene21_act;
}
@keyframes scene22_act {
	from	{	opacity: 0;	}
	29%	{	opacity: 0;	}
	30%	{	opacity: 1;	}
	41%	{	opacity: 1;	}
	42%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene22 {	position: absolute;
		top: 100px ;
		left:670px ;
		font-size:30px;
		color:white;
		animation-name: scene22_act;
}

@keyframes scene23_act {
	from	{	opacity: 0;	}
	28%	{	opacity: 0;	}
	29%	{	opacity: 1;	}
	41%	{	opacity: 1;	}
	42%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene23 {	position: absolute;
		top: 280px ;
		left:40px ;
		font-size:30px;
		color:white;
		animation-name: scene23_act;
}

@keyframes scene24_act {
	from	{	opacity: 0;	}
	30%	{	opacity: 0;	}
	31%	{	opacity: 1;	}
	41%	{	opacity: 1;	}
	42%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene24 {	position: absolute;
		top: 280px ;
		left:670px ;
		font-size:30px;
		color:white;
		animation-name: scene24_act;
}

/*--------------------------------------------------------------*/
/* シーン３
/*--------------------------------------------------------------*/
@keyframes scene3c_act {
	from	{	opacity: 0;	}
	42%	{	opacity: 0;	}
	43%	{	opacity: 1;	}
	57%	{	opacity: 1;	}
	58%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene3c {	position: absolute;
		top: 150px ;
		left:320px ;
		font-size:24px;
		font-weight:600;
		animation-name: scene3c_act;
}

@keyframes scene31_act {
	from	{	opacity: 0;	}
	44%	{	opacity: 0;	}
	45%	{	opacity: 1;	}
	57%	{	opacity: 1;	}
	58%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene31 {	position: absolute;
		top: 100px ;
		left:60px ;
		font-size:30px;
		color:white;
		animation-name: scene31_act;
}
@keyframes scene32_act {
	from	{	opacity: 0;	}
	45%	{	opacity: 0;	}
	46%	{	opacity: 1;	}
	57%	{	opacity: 1;	}
	58%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene32 {	position: absolute;
		top: 100px ;
		left:670px ;
		font-size:30px;
		color:white;
		animation-name: scene32_act;
}

@keyframes scene33_act {
	from	{	opacity: 0;	}
	43%	{	opacity: 0;	}
	44%	{	opacity: 1;	}
	57%	{	opacity: 1;	}
	58%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene33 {	position: absolute;
		top: 280px ;
		left:90px ;
		font-size:30px;
		color:white;
		animation-name: scene33_act;
}

@keyframes scene34_act {
	from	{	opacity: 0;	}
	46%	{	opacity: 0;	}
	47%	{	opacity: 1;	}
	57%	{	opacity: 1;	}
	58%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene34 {	position: absolute;
		top: 280px ;
		left:670px ;
		font-size:30px;
		color:white;
		animation-name: scene34_act;
}

/*--------------------------------------------------------------*/
/* シーン４
/*--------------------------------------------------------------*/
@keyframes scene4c_act {
	from	{	opacity: 0;	}
	58%	{	opacity: 0;	}
	59%	{	opacity: 1;	}
	89%	{	opacity: 1;	}
	90%	{	opacity: 0;	}
	to	{	opacity: 0;	}
}
.scene4c {	position: absolute;
		top: 170px ;
		left:330px ;
		font-size:22px;
		font-weight:600;
		animation-name: scene4c_act;
}
@keyframes scene41_act {
	from	{	opacity: 0;	}
	59%	{	opacity: 0; transform:translate(100px,0px)	}
	60%	{	opacity: 1; transform:translate(0px,0px)	}
	87%	{	opacity: 1; transform:translate(0px,0px)	}
	88%	{	opacity: 0; transform:translate(100px,0px)	}
	to	{	opacity: 0;	}
}
.scene41 {	position: absolute;
		top: 220px ;
		left:10px ;
		font-size:18px;
		color:white;
		animation-name: scene41_act;
}

@keyframes scene42_act {
	from	{	opacity: 0;	}
	59.2%	{	opacity: 0; transform:translate(100px,0px)	}
	60.2%	{	opacity: 1; transform:translate(0px,0px)	}
	87.2%	{	opacity: 1; transform:translate(0px,0px)	}
	88.2%	{	opacity: 0; transform:translate(100px,0px)	}
	to	{	opacity: 0;	}
}
.scene42 {	position: absolute;
		top: 240px ;
		left:10px ;
		font-size:18px;
		color:white;
		animation-name: scene42_act;
}

@keyframes scene43_act {
	from	{	opacity: 0;	}
	59.4%	{	opacity: 0; transform:translate(100px,0px)	}
	60.4%	{	opacity: 1; transform:translate(0px,0px)	}
	87.4%	{	opacity: 1; transform:translate(0px,0px)	}
	88.4%	{	opacity: 0; transform:translate(100px,0px)	}
	to	{	opacity: 0;	}
}
.scene43 {	position: absolute;
		top: 260px ;
		left:10px ;
		font-size:18px;
		color:white;
		animation-name: scene43_act;
}

@keyframes scene44_act {
	from	{	opacity: 0;	}
	59.6%	{	opacity: 0; transform:translate(100px,0px)	}
	60.6%	{	opacity: 1; transform:translate(0px,0px)	}
	87.6%	{	opacity: 1; transform:translate(0px,0px)	}
	88.6%	{	opacity: 0; transform:translate(100px,0px)	}
	to	{	opacity: 0;	}
}
.scene44 {	position: absolute;
		top: 280px ;
		left:10px ;
		font-size:18px;
		color:white;
		animation-name: scene44_act;
}

@keyframes scene45_act {
	from	{	opacity: 0;	}
	59.8%	{	opacity: 0; transform:translate(100px,0px)	}
	60.8%	{	opacity: 1; transform:translate(0px,0px)	}
	87.8%	{	opacity: 1; transform:translate(0px,0px)	}
	88.8%	{	opacity: 0; transform:translate(100px,0px)	}
	to	{	opacity: 0;	}
}
.scene45 {	position: absolute;
		top: 300px ;
		left:10px ;
		font-size:18px;
		color:white;
		animation-name: scene45_act;
}
/*--------------------------------------------------------------------*/