@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	/*全要素のマージン・パディングをリセット*/
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
}

/*============================================
全般的なスタイル
============================================*/
.item {
	float: left;
	margin-right: 10px;
	padding: 10px;
	width: 60px;
	height: 60px;
	background: #EF5F5D;
	color: #fff;
	list-style: none;
	text-align: center;
	line-height: 60px;
	opacity: 0;
}

.textSkip {
	font-size: 25px;
	display: flex;
	height: 1vh;

	right: 2%;
	position: absolute;
	float: right;
	text-align: right;
	text-decoration: none;
	z-index: 11;
}

a {
	text-decoration: none;
}

@media screen and (max-width: 768px) {
	.textSkip {
		font-size: 20px;
	}
}

/*============================================
文字エフェクト
============================================*/
.text1 {
	font-size: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 1vh;

	position: absolute;
	top: 40%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	/* width: 1000px; */
	width: 100%;
	text-align: center;
	/*一応BOX内の文字も中央寄せ*/
}

.text2 {
	font-size: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 1vh;

	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100px;
	text-align: center;
	/*一応BOX内の文字も中央寄せ*/

	/* width: 1000px; */
	width: 100%;
	/*headerにwidthやheightを記入するのはあまり好ましくないですがご了承ください。*/
	/* height: 400px; */
	height: 100%;
}

@media screen and (max-width: 768px) {
	.text1 {
		font-size: 36px;
	}

	.text2 {
		font-size: 36px;
	}
}

/* 信頼 */
.label1 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 5s;


}

/* × */
.label2 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 5s;
}

/* 検査 */
.label3 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 5s;
}

/* 情報 */
.label19 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 5s;
}


/* T */
.label4 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 6s;
	animation-duration: 1s;
}

/* R */
.label5 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 6900ms;
	animation-duration: 1s;
}

/* U */
.label6 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 6400ms;
	animation-duration: 1s;
}

/* S */
.label7 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 7400ms;
	animation-duration: 1s;
}

/* T */
.label8 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 6700ms;
	animation-duration: 1s;
}


/* I */
.label9 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 7300ms;
	animation-duration: 1s;
}

/* N */
.label10 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 6500ms;
	animation-duration: 1s;
}

/* S */
.label11 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 6100ms;
	animation-duration: 1s;
}

/* P */
.label12 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 6300ms;
	animation-duration: 1s;
}

/* E */
.label13 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 6600ms;
	animation-duration: 1s;
}

/* C */
.label14 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 7200ms;
	animation-duration: 1s;
}

/* T */
.label15 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 6800ms;
	animation-duration: 1s;
}

/* I */
.label16 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 7200ms;
	animation-duration: 1s;
}

/* O */
.label17 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 7100ms;
	animation-duration: 1s;
}

/* N */
.label18 {
	opacity: 0;
	animation-name: fadein;
	animation-fill-mode: forwards;
	animation-delay: 7300ms;
	animation-duration: 1s;
}


@keyframes fadein {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadein {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1;
	}

}



/* =============================================
 lodingアニメーション
==============================================*/
/* ブラウザのスクロールバーを常に表示させることでカクカクッとなるのを防ぐ */

/* ローディングの背景部分のCSS */
.loader {
	background: #FFF;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}

/* ローディングのアニメーション部分のCSS */
.loader-animation,
.loader-animation:before,
.loader-animation:after {
	background: #44FF99;
	-webkit-animation: load1 1s infinite ease-in-out;
	animation: load1 1s infinite ease-in-out;
	width: 1em;
	height: 4em;
}

.loader-animation {
	height: 10px;
	left: 50%;
	margin: -5px 0 0 -5px;
	position: absolute;
	top: 50%;
	width: 10px;
	color: #44FF99;
	text-indent: -9999em;
	font-size: 10px;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

.loader-animation:before,
.loader-animation:after {
	position: absolute;
	top: 0;
	content: '';
}

.loader-animation:before {
	left: -1.5em;
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.loader-animation:after {
	left: 1.5em;
}

@-webkit-keyframes load1 {

	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}

	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}

@keyframes load1 {

	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}

	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}