@charset "utf-8";

body {
	height: 100%;
    font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    -webkit-text-size-adjust: none;
    background: #fff;
    color: #c7c7c7;
    line-height: 2;
	font-size: 20px;
}

/* 親要素に基準位置を指定します */
.parent {
	position: relative; 
	/* ウィンドウ幅を想定して指定していますが適宜変更してください */
	width: 100vw;
	height: 100vh;
}

/* .parentに対して.childを上下左右中央にします */
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);/* 要素の大きさの半分の距離を左、上方向に移動する */
	-webkit-transform: translateY(-50%) translateX(-50%);
}

.tolink_game {
	position: absolute;
	top: 65%;
	left: 47.5%;
}

.tolink_game a {
	text-decoration: none;
    color: #777;
}

.tolink_art {
	position: absolute;
	top: 65%;
	left: 30%;
}

.tolink_art a {
	text-decoration: none;
    color: #777;
}

.tolink_design {
	position: absolute;
	top: 65%;
	left: 65%;
}

.tolink_design a {
	text-decoration: none;
    color: #777;
}

/* その場で */
.fadeIn {
	animation-name:fadeInAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}	

/* スライドイン */
.slideInG {
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1.5s both;
}

.slideInA {
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1.3s both;
}

.slideInD {
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1.7s both;
}


@keyframes fadeInAnime {
	from {
	  opacity: 0;
	}
	to {
	  opacity: 1;
	}
}
  
@keyframes slideIn {
	0% {
	  transform: translateX(50px);
	  opacity: 0;
	}
	100% {
	  transform: translateX(0);
	}
	40%,100% {
	  opacity: 1;
	}
}