@charset "UTF-8";
.leftCurtainbg, .rightCurtainbg {
    display: block;
    content: "";
    position:fixed;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    top: 0;
    background-color: #000;
	background-size: auto 100vh;
	background-repeat: none;
    animation-duration:7.2s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
}
.leftCurtainbg {
    right: 50%;
    transform: scaleX(0);
    animation-name:curtainAnimeLeft;
}

.rightCurtainbg {
    left: 50%;
    transform: scaleX(1);
    animation-name:curtainAnimeRight;
}

@keyframes curtainAnimeLeft {
	0% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

@keyframes curtainAnimeRight {
	0% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

.fadeout {
  animation : fadeOut 12s;
  animation-fill-mode: both;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



.top_first{
	background-color:#333;
	width:100vw;
	height:100vh;
}
.top_first a{
	text-decoration: none;	
}
p{
	color:#fff;
	font-size:22px;
	margin-top:10px;
	text-shadow: 0 0 2px #333;
	letter-spacing: 3px;
}
.top_first-image{
	width:100%;
	height:92%;
	background-image:url("../img/open.png");
	background-size: cover;
	background-position: center;
}
.top_first-title{
	padding-top:40px;
}
.top_first-logo{
	height:15%;
	text-align:center;
	margin-top:430px;
}
.top_first-logo img{
	width:auto;
	height:100%;
}
.top_first-contents{
	background-color:#000;
	width:100%;
	height:8%;
	padding-top:20px;
}
.top_first-contents ul li{
	display: inline-block;
	vertical-align: middle;
	padding-left:20px;
	letter-spacing: 3px;
	font-size:12px;
}
.top_first-contents ul li:first-child{
	padding-left:0;
}
.top_first-contents ul li a{
	color:#fff;
	text-decoration: none;
	list-style: none;
}

.top_second {
	background-color:#333;
	width:100vw;
	height:100vh;
    animation: fadeIn 6s ease 0s 1 normal;
    -webkit-animation: fadeIn 10s ease 0s 1 normal;
	z-index: 10;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
.top_second-image{
    display: flex;
	width:100%;
	height:92%;
	overflow: hidden;
}
.top_second-image img{
	width:auto;
	height:100%;
  animation:loop-slide infinite linear 50s both;
}
@keyframes loop-slide{
    0% {transform: translateX(0)}
  100% {transform: translateX(-100%)}
}

.top_second-contents{
	background-color:#000;
	width:100%;
	height:8%;
	padding-top:20px;
}
.top_second-contents ul li{
	display: inline-block;
	vertical-align: middle;
	padding-left:20px;
	letter-spacing: 3px;
	font-size:12px;
}
.top_second-contents ul li:first-child{
	padding-left:0;
}
.top_second-contents ul li a{
	color:#fff;
	text-decoration: none;
	list-style: none;
}

@media(max-width:600px){
.top_first-title p{
	font-size:12px;
	margin-top:40px
}	
.top_first-logo{
	height:8%;
	text-align:center;
	margin-top:450px;
}
.top_first-message p{
	font-size:12px;
	margin-top:10px
}	
.top_first-contents ul li{
	font-size:8px;
	letter-spacing: 1.5px;
}
.top_second-contents ul li{
	font-size:8px;
	letter-spacing: 1.5px;
}
}