@charset "utf-8";


/*--------------Media-------------*/
@media screen and (max-width:767px) {
	/* PC only*/
	.pc{
		display: none;
	}
	/* Time */
	time{
		background-color: #ffe6b3;
		color: #2e0000;
		line-height: 2;
	}
	/* End of Time */
	/* Update */
	.update{
		background-image: url("../img/banner/update2.png");
		background-size: 100%;
		background-repeat: no-repeat;
		width: 100vw;
		height: 40vw;
	}
	.update ul{
		color: #ffe6b3;
		text-decoration: none;
		outline: none;
		position: relative;
		padding-top: 15px;
		left: 16vw;
		width: 60vw;
		height: 35vw;
		margin: 0 auto;
		font-size: 16px;
		overflow-y: auto;
	}
	/* End of Update */
	/* Banner */
	.bannerwrap{
		margin: 0 auto;
	}
	.left,.right,.center{
		width: 100vw;
		height: 40vw;
	}
	.worldview{
		background-size: 100%;
		background-image: url("../img/banner/worldview2.png");
	}
	.characters{
		background-size: 100%;
		background-image: url("../img/banner/characters.png");
	}
	.timeline{
		background-size: 100%;
		background-image: url("../img/banner/timeline.png");
	}
	.skill{
		background-size: 100%;
		background-image: url("../img/banner/skill.png");
	}
	.item{
		background-size: 100%;
		background-image: url("../img/banner/item.png");
	}
	.geography{
		background-size: 100%;
		background-image: url("../img/banner/geography.png");
	}
	.interview{
		background-size: 100%;
		background-image: url("../img/banner/interview.png");
	}
	.research{
		background-size: 100%;
		background-image: url("../img/banner/research2.png");
	}
	.research ul{
		color: #ffe6b3;
		text-decoration: none;
		outline: none;
		position: relative;
		padding-top: 15px;
		left: 30vw;
		width: 60vw;
		height: 35vw;
		margin: 0 auto;
		font-size: 20px;
	}
	li a{
		color: #ffe6b3;
		text-decoration: none;
	}
	/* End of Banner */
	/* Footer */
	.footer{
		clear: both;
	}
	/* End of Footer */
}

/*--------------PC-------------*/
@media screen and (min-width:768px) {
	/* U2video */
	.u2video{
		position: fixed;
		z-index: -99;
		width: 100%;
		height: 100%;
	}
	/* End of U2video */
	/* Time */
	time{
		background-color: #ffe6b3;
		color: #2e0000;
		line-height: 2;
	}
	/* End of Time */
	/* Update */
	.update{
		background-image: url("../img/banner/update.png");
		width: 800px;
		margin: 0 auto;
		padding-top:20px;
		height: 280px;
	}
	.update ul{
		color:#ffe6b3;
		text-decoration:none;
		outline:none;
		position: relative;
		padding-top: 10px;
		left: 130px;
		margin: 0 auto;
		width: 500px;
		height: 250px;
		font-size: 16px;
		overflow-y: scroll;
	}
	.updatelist li{
		top: 10px;
		padding-bottom: 10px;
	}
	/* End of Update */
	/* Banner */
	.bannerwrap{
		width: 1010px;
		margin: 0 auto;
	}
	.left{
		float: left;
		width: 500px;
		height: 200px;
	}
	.right{
		float: right;
		width: 500px;
		height: 200px;
	}
	.center{
		float: left;
		width: 1010px;
		height: 300px;
		overflow-x: hidden;
	}
	.worldview{
		background-image: url("../img/banner/worldview.png");
	}
	.characters{
		background-image: url("../img/banner/characters.png");
	}
	.timeline{
		background-image: url("../img/banner/timeline.png");
	}
	.skill{
		background-image: url("../img/banner/skill.png");
	}
	.item{
		background-image: url("../img/banner/item.png");
	}
	.geography{
		background-image: url("../img/banner/geography.png");
	}
	.interview{
		background-image: url("../img/banner/interview.png");
	}
	.research{
		background-image: url("../img/banner/research.png");
	}
	.research ul{
		color:#ffe6b3;
		text-decoration:none;
		outline:none;
		position: relative;
		padding-top: 20px;
		left: 500px;
		margin: 0 auto;
		font-size: 30px;
	}
	li a{
		color: #ffe6b3;
		text-decoration: none;
	}
	/* End of Banner */
	/* Footer */
	.footer{
		clear: both;
	}
	/* End of Footer */
}