@charset "utf-8";
/* CSS Document */

body {
  -webkit-text-size-adjust: 100%;
  background: #000000;
  padding:0;
  margin: 0;
  width: 100%;
  height: 100%;
}

@keyframes bggradient{
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#main-contents {
  position: relative;
  padding: 10% 0;
  width: 100%;
  height: 100%;
  background:linear-gradient(45deg, #000000,#111111,#222222);/*グラデーションを定義*/
  background-size: 200% 200%;/*サイズを大きくひきのばす*/
  animation: bggradient 20s ease infinite;
}

#main-contents > .inner {
  position: relative;
  display: block;
  border: 1px solid #303030;
  border-radius: 5px;
  padding: 0;
  margin: 0 auto;
  width: 90%;
  height: 100%;
  /*background-color:rgba(20,20,20,0.3);*/
}

.glow {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-animation: glow 3s linear 0s infinite alternate;
}

.particles {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;

}

.rotate {
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
}

.angle {
  position: absolute;
  top: 0;
  left: 0;
}

.size {
  position: absolute;
  top: 0;
  left: 0;
}

.position {
  position: absolute;
  top: 0;
  left: 0;
}

.pulse {
  position: absolute;
  top: 0;
  left: 0;
}

.particle {
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.rotate {
  -webkit-animation: rotate 20s linear 0s infinite alternate;
}

.pulse{
  -webkit-animation: pulse 1.5s linear 0s infinite alternate;
}


@-webkit-keyframes glow {
  0% {
    opacity: 1;
    transform: rotate(0deg);
    box-shadow: 0 0 60px 20px #f1e7c1, 25px 15px 50px 10px #fff, -5px -25px 30px 5px #fff;
  }
  100% {
    opacity: 0.5;
    transform: rotate(5deg);
    box-shadow: 0 0 90px 20px #f1e7c1, 35px 20px 40px 10px #fff, -30px -30px 40px 5px #fff;
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes angle {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes size {
  0% {
    -webkit-transform: scale(.2);
  }
  100% {
    -webkit-transform: scale(.6);
  }
}

@-webkit-keyframes position {
  0% {
    -webkit-transform: translate3d(0,0,0);
    opacity: 1;
  }
  50 %{
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(100px,100px,0);
    opacity: 0;
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(.5);
  }
}

@-webkit-keyframes particle {
  0% {
    box-shadow: inset 0 0 20px 20px #FFFFFF, 0 0 50px 10px #0079e8, inset 0 0 80px 80px #269aff;
  }
  33.33% {
    box-shadow: inset 0 0 20px 20px #FFFFFF, 0 0 130px 10px #0079e8, inset 0 0 50px 50px #269aff;
  }
  33.34% {
    box-shadow: inset 0 0 20px 20px #FFFFFF, 0 0 50px 10px #2693ff, inset 0 0 80px 80px #52abff;
  }
  66.66% {
    box-shadow: inset 0 0 20px 20px #FFFFFF, 0 0 130px 10px #2693ff, inset 0 0 50px 50px #52abff;
  }
  66.67% {
    box-shadow: inset 0 0 20px 20px #FFFFFF, 0 0 50px 10px #485fe8, inset 0 0 80px 80px #7d71e8;
  }
  100% {
    box-shadow: inset 0 0 20px 20px #FFFFFF, 0 0 130px 10px #485fe8, inset 0 0 50px 50px #7d71e8;
  }
}

.rotate .angle:nth-child(1){
  /* change the angle every 2 seconds */
  -webkit-animation: angle 10s steps(5) 0s infinite;
}
.rotate .angle:nth-child(1) .size{
  /* change the size of the particle every 2 seconds */
  -webkit-animation: size 10s steps(5) 0s infinite;
}
.rotate .angle:nth-child(1) .particle{
  /* animate the glow and change the color every 2 seconds */
  -webkit-animation: particle 6s linear infinite alternate;
}
.rotate .angle:nth-child(1) .position{
  /* animate the fly out of the particle and its fade out at the end */
  -webkit-animation: position 2s linear 0s infinite;
}

.rotate .angle:nth-child(2){
  /* change the angle every 2 seconds */
  -webkit-animation: angle 4.95s steps(3) -1.65s infinite;
}
.rotate .angle:nth-child(2) .size{
  /* change the size of the particle every 2 seconds */
  -webkit-animation: size 4.95s steps(3) -1.65s infinite alternate;
}
.rotate .angle:nth-child(2) .particle{
  /* animate the glow and change the color every 2 seconds */
  -webkit-animation: particle 4.95s linear -3.3s infinite alternate;
}
.rotate .angle:nth-child(2) .position{
  /* animate the fly out of the particle and its fade out at the end */
  -webkit-animation: position 1.65s linear 0s infinite;
}


.rotate .angle:nth-child(3){
  /* change the angle every 2 seconds */
  -webkit-animation: angle 13.76s steps(8) -6.88s infinite;
}
.rotate .angle:nth-child(3) .size{
  /* change the size of the particle every 2 seconds */
  -webkit-animation: size 6.88s steps(4) -5.16s infinite alternate;
}
.rotate .angle:nth-child(3) .particle{
  /* animate the glow and change the color every 2 seconds */
  -webkit-animation: particle 5.16s linear -1.72 infinite alternate;
}
.rotate .angle:nth-child(3) .position{
  /* animate the fly out of the particle and its fade out at the end */
  -webkit-animation: position 1.72s linear 0s infinite;
}

.rotate .angle:nth-child(5) .position{
  /* animate the fly out of the particle and its fade out at the end */
  -webkit-animation: position 2.45s linear 0s infinite;
}

/*---------------------------------------------------------*/
/* login-page */
/*---------------------------------------------------------*/

/* logo-field */

.logo-field {
	display:block;
	position:absolute;
	top:24px;
	left:50%;
  margin: 0 0 0 -108px;
	width:216px;
}

.logo-field h1 {
	display:block;
	padding:0;
	margin:0;
	z-index:1000;
}

.logo-field h1 a {
	display:block;
	width:216px;
	height:0px;
	padding:162px 0 0 0;
	margin:0;
	overflow:hidden;
	background:url(../img/logo_test2.png) no-repeat top center;
	background-size:cover;
}

/* login-field */

.login-field {
	position:relative;
	padding:0;
	margin:0 auto;
	width:80%;
	height:70%;
	text-align:center;
}

.login-field .form-box {
	position:absolute;
	top:60%;
	left:50%;
  margin-left: -50%;
  width: 100%;
}

input[type="text"],input[type="password"] {
	outline:none;
	display:inline-block;
	padding:4px 6px;
	margin:0 auto;
	border:1px solid #ffffff;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	background:#FAFAFA;
	width:60%;
  color:#8b8b8b;
	max-width:280px;
  color:#131313;
	font-size:14px;
  line-height: 21px;
}

input[type="submit"] {
	display:inline-block;
	padding:4px 6px;
	margin:0;
	border:1px solid #FFFFFF;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	background:#FAFAFA;
	width:60%;
	max-width:280px;
	color:#131313;
	letter-spacing:.5em;
  font-weight: bold;
	text-indent:.5em;
  line-height: 21px;
	cursor:pointer;
}

input[type="submit"]:hover {
  background: #FFFFFF;
}

/* link-field */

.link-field {
	position:absolute;
	bottom:50px;
	left:0px;
  width: 100%;
	z-index:100;
}

.link-field p {
	line-height: 1em;
	padding: 0;
	margin: 0;
  color: #FFFFFF;
	font-size: 15px;
  text-align: center;
}

.link-field p:nth-of-type(1) {
	font-size:24px;
	font-family: Montserrat-SemiBold;
	font-weight:bold;
	z-index:1000;
	line-height: 1em;
  color: #FFFFFF;
}

.link-field p span {
	display:inline-block;
  font-size: 24px;
  text-indent: .1em;
}

.link-field .ext-link {
	padding:0 1em 0 0;
  color:#FFFFFF;
	font-size: 15px;
}

.link-field .ext-link a {
  display: inline-block;
  padding: .5em 0 .5em 1.5em;
  background: url(../img/arrow_white.png) no-repeat left 50%;
  background-size: 14px 14px;
  text-decoration: underline;
  color:#FFFFFF;
}

/*----------------------------------------------------------------------------
 ***                                                                width480
----------------------------------------------------------------------------*/

@media only screen and (min-width: 480px){


}

/*----------------------------------------------------------------------------
 ***                                                                width560
----------------------------------------------------------------------------*/

@media only screen and (min-width: 560px){

#main-contents {
  position: relative;
  padding: 5% 0;
}

.logo-field {
  top:24px;
}

/* link-field */

.link-field {
	position:absolute;
	bottom:6px;
}

}

/*----------------------------------------------------------------------------
 ***                                                                width768
----------------------------------------------------------------------------*/

@media only screen and (min-width: 768px){

/* logo-field */

.logo-field {
  top:18px;
  width:360px;
  margin: 0 0 0 -180px;
}

.logo-field h1 a {
  width:360px;
  height:0px;
  padding:270px 0 0 0;

}

.login-field {
	padding:240px 0;
	margin:0 auto;
	width:95%;
	background-size:cover;
	text-align:center;
}

.link-field {
	bottom:50px;
	right:5%;
}

.membership {
	padding:41px 0 0 0;
	margin:0 0 24px 0;
	width:332px;
	height:0px;
}

.company a {
	padding:28px 0 0 0;
	margin:0;
	width:111px;
	height:0px;
}


/*----------------------------------------------------------------------------
 ***                                                                width1024
----------------------------------------------------------------------------*/

@media only screen and (min-width: 1024px){

#main-contents {
  padding: 36px 0 15% 0;
}

#main-contents > .inner {
  max-width: 980px;
  min-height: 560px;
}

.login-field {
	max-width:980px;
}

}