html{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: "MS Pゴシック", sans-serif;
}

body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
}

.wrap {
	overflow: hidden;
}

#header{
	position:fixed;
	margin: 0;
	padding: 5px 15px;
	width: calc( 100% - 30px );
	height: calc( 50px - 10px );
	color: #fff;
	font-size: 1.6em;
}

#wrapper {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom ,#ff7b7bd9,#ff7b7b1c 70%,#fdedc538 90%) fixed;
    overflow: hidden;
    position: relative;
}


#image{
	width:100%;
	height:100%;
}


#login-form{
	margin:70px auto auto auto;
	padding:35px;
	width: calc( 350px - 60px );
	height:350px;
	font-size: 1.2em;
	background:#ffffff;
	border-radius:20px;
	background-color:#f8fdff;
	position:relative;
	z-index:100;
}

#login-form span{
	font-size:0.6em;
	color: #cc0000;
}


#login-form input[type=text], #login-form input[type=password]{
	width: 100%;
	border-top: none;
	border-left: none;
	border-right: none;
	height:35px;
	margin:10px 0 10px 0;
}

p.errmsg{
	font-size:0.8em;
	color: #cc0000;
}

div.submit{
	text-align: right;
}

/*--------------------------------------ログイン画面・デザイン追加部分---*/

#login-form div.login-text{
	padding:10px 0 0 0;
}

.loginimage{
	text-align:center;
	line-height: 100px;
}

.loginimage img{
	vertical-align:middle;
}

/*--------------------------------------背景の四角-*/

ul.figure{
	position:absolute;
	bottom:0px;
	left:0;
	z-index:1;
	height:100%;
}

ul.figure li{
	position:absolute;
	bottom:-165px;
	display:block;
	height:100px;
	width:100px;
	opacity:0.4;
	background-color:#ffffff;
	animation:square 30s infinite;/*-名前・1秒にかかる速度・繰り返すか-*/
	-webkit-animation: square 30s infinite;
	transition-timing-function:linear;
	list-style:none;
}


ul.figure li:nth-child(1){
	left:208px;
	height:150px;
	width:150px;
	animation-duration:30s;
	animation-delay:;
}

ul.figure li:nth-child(2){
	left:1140px;
	height:100px;
	width:100px;
	animation-duration:42s;
	animation-delay:1s;
}

ul.figure li:nth-child(3){
	left:810px;
	height:80px;
	width:80px;
	animation-duration:42s;
	animation-delay:5s;
}

ul.figure li:nth-child(4){
	left:1110px;
	height:70px;
	width:70px;
	animation-duration:45s;
	animation-delay:10s;
}

ul.figure li:nth-child(5){
	left:3169px;
	height:200px;
	width:200px;
	animation-duration:30s;
}

ul.figure li:nth-child(6){
	left:2257px;
	height:55px;
	width:55px;
	animation-duration:60s;
	animation-delay:15s;
}

ul.figure li:nth-child(7){
	left:4427px;
	height:70px;
	width:70px;
	animation-duration:60s;
	animation-delay:4s;
}

ul.figure li:nth-child(8){
	left:157px;
	height:120px;
	width:120px;
	animation-duration:30s;
	animation-delay:16s;
}

ul.figure li:nth-child(9){
	left:27px;
	height:40px;
	width:40px;
	animation-duration:60s;
}

ul.figure li:nth-child(10){
	left:1681px;
	height:190px;
	width:190px;
	animation-duration:55s;
}

/*-下から上へ行くアニメーション-*/
@keyframes square {
	0%{
	transform:translateY(0);
	  }
	100%{
	transform: translateY(-1100px) rotate(-60deg);
}
}




/*-----------------------------------------------IDのメッセージ--------------*/
.login-text div .input {
	position: relative;
	margin: 10px 0px 10px;
}

/*-箱の中-*/
.login-text div .input input {
	outline: none;
	z-index: 1;
	position: relative;
	background: none;
	width: 100%;
	height: 60px;
	border: 0;
	color:#757575;
	font-size: 24px;
	font-weight: 400;
}

/*-マウスでかちっと押した時のアニメーション。線。↓は長さ-*/
.login-text div .input input:focus ~ .bar:before, .login-text div .inpu input:focus ~ .bar:after {
  width:100%;
}

/*-マウスでかちっと押した時のアニメーション。線-*/

/*-文字-*/
.login-text div .input label {
	position: absolute;
	top: -10px;
	left:5px;
	font-size: 18px;
	font-weight: 300;
	line-height:85px;
}

.login-text div .input input:valid ~ label {
	color: #9d9d9d;
	-webkit-transform: translate(-23%, -33%) scale(0.7);
	transform: translate(-23%, -33%) scale(0.7);
}

/*-線二本目？-*/
.login-text div .input .bar {
	position: absolute;
	left: 0;
	bottom:10px;
	background:#afafaf;
	width: 100%;
	height:1px;
}
.login-text div .input .bar:before{
	content: '';
	position: absolute;
	background:#40baff;
	width: 0;
	height: 2px;
	transition: .2s ease;
	left:0%;
}


@media screen and ( max-width:479px )
{
	body{
	overflow-y: hidden;
	height:80%;
	}
	
	#wrapper{
		position:relative;
		overflow-y: hidden;
	}
	#login-form{
		margin:10% auto 0;
	}
	.login-text div .input input:valid ~ label {
	color: #9d9d9d;
	-webkit-transform: translate(-10%, -33%) scale(0.7);
	transform: translate(-10%, -33%) scale(0.7);
	}
	
	#login-form{
		padding:20px 20px 30px 20px;
	}
	
}

@media screen and ( min-width:479px )
{
	span.nav{
		display:none;
	}

}

/*-携帯を横にしたバージョン-*/
@media (orientation: landscape) and (max-width: 767px) {
   #login-form{
   margin:5px auto;
   height:325px;
   padding:20px;
   }
   
   .loginimage{
	   line-height:90px;
	   margin:0 0 20px 0;
   }
   
   .loginimage img{
	   width:25%;
   }
   
   .login-text div .input{
	   margin:0px;
   }
   
   #login-form span{
	   font-size:0.3em;
   }
   
   #login-form div.login-text{
	   padding:0px;
   }
   
   .login-text div .input input:valid ~ label{
	   font-size:15px;
   }
   
}