@charset "utf-8";
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
    background: #ae00e7;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
input{
	border:1px solid #b0b0b0;
	padding:3px 5px 4px;
	color:#979797;
	width:190px;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


.logo-area {
    width: 320px;
    height: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -240px;
    margin-left: -160px;
    border: 10px solid #FFF;
    z-index: 200;
    background-position: center 10px;
    background-size: 250px auto;
    background-repeat: no-repeat;
    background-image: url(../../img/logo.png);
    background-color: #8a15b0;
}


.anim01 {
  background: -webkit-linear-gradient(#ae00e7, #8a15b0);
  background: linear-gradient(#ae00e7, #8a15b0);
  background-size: cover;
  -webkit-animation: gradAnim 6s ease infinite;
          animation: gradAnim 6s ease infinite;
  height: 120vh;
    position: fixed;
    width: 100%;
    top: -20vh;
    left: 0px;
    z-index: 100;
    opacity: 0.6;
    mix-blend-mode: color-burn;
}
@-webkit-keyframes gradAnim {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
 
@keyframes gradAnim {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: #000;
	font-weight: 400;
	font-size: 15px;
	color: #ae00e7;
	overflow-y: scroll;
	overflow-x: hidden;
}
.ie7 body{
	overflow:hidden;
}
a{
	color: #333;
	text-decoration: none;
}

.clr{
	clear: both;
}

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
	content: '';
	background-repeat: repeat;
	background-position: top left;
	background-image: url(../../img/dot.png);
	background-color: transparent;
}
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}

.cb-slideshow li:nth-child(1) span { background-image: url(../../img/enter1.png) }
.cb-slideshow li:nth-child(2) span {
    background-image: url(../../img/enter2.png);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

@-webkit-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -webkit-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	    -webkit-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -webkit-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -moz-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -moz-transform: scale(1.05);
	    -moz-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -moz-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -moz-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -o-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -o-transform: scale(1.05);
	    -o-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -o-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -o-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -ms-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -ms-transform: scale(1.05);
	    -ms-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -ms-transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -ms-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.05);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.1);
	}
	22% {
		opacity: 0;
		-webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -transform: scale(1.1);
	}
	100% { opacity: 0 }
}

.button-a {
  border:3px solid rgba(255,255,255,1);
  background-color: transparent;
  color: rgba(255,255,255,1);
  transition: .6s all;
  width: 200px;
  height: 3.2rem;
  outline: none;
  font-size: 1.5rem;
  line-height: 3rem;
  letter-spacing: .2rem;
  padding: 20px auto;
  text-align: center;
}
.button-a.enter-b {
  position: absolute;
  top: 220px;
  left: 50px;
}

.button-a.exit-b {
  position: absolute;
  top: 220px;
  right: 50px;
}
.button-a::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform-origin: 50% 50%;
  z-index:-1;
}
.button-a::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(174,0,231,1);
  position: absolute;
  left: 0;
  top: 0;
  transition: .3s all;
  transform: scale(1,0);
  transform-origin: 0 50%;
  opacity: 0;
  z-index:-1;
}
.button-a:hover {
  color: #FFF;
}
.button-a:hover::after {
  transform: scale(1,1);
  opacity: 1;
}

h1 {
	position: absolute;
	top: 0;
	left: 0;
	color: #ffffff;
	font-size: .9rem;
	z-index: 999;
	width: 100%;
	background-color: #ae00e7;
	text-align: center;
	line-height: 1.5;
}


.logo-area p {
position: absolute;
bottom: 100px;
left: 0;
width: 100%;
font-size: .8rem;
color: #ffffff;
font-weight: normal;
text-align: center;
}

.ad {
    position: absolute;
	padding: 10px 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #8a15b0;
    z-index: 300;
}