@charset "utf-8";

.body-back::before {
	content: '';
	background-image: url('/assets/img/bk4.jpg');
	opacity: 0.1;
	/*半透明カラーの透明度*/
	filter: blur(8px);
	/*ぼかし度*/
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: -1;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	background-size: 100% auto;
}


html {
	width100%;
	height: 100%;
}

body {
	background: #F8F8F8;
	color: #606468;
	font: 87.5%/1.5em 'Open Sans', sans-serif;
	margin: 0;
	width: 100%;
	background-image: linear-gradient(141deg, #86e4b8 0%, #f5fff5 29%, #ffffff 50%);
}

#footer {
	position: fixed;
	bottom: 10;
	width: 100%;
	height: 100px;
	text-align: center;
	color: #dc143c;
	font-weight: 700;
	font-size: 24px;
}

.back {
	position: fixed;
	bottom: 10px;
	right: 30px;
	/* animation: fade-in 2s; */
}

@keyframes fade-in {

	/* You could think of as "step 1" */
	0% {
		opacity: 0;
	}

	/* You could think of as "step 2" */
	100% {
		opacity: 1;
	}
}

.btn_a {
	width: 46px;
	height: 15px;
	background: #FFF;
	border: 1px solid #2a82a3;
	border-radius: 70px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	color: #2a82a3;
	padding: 22px 10px 20px;
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 200%;
	box-shadow: 0px 4px 0px rgba(000, 000, 000, 0.3);
	-moz-box-shadow: 0px 4px 0px rgba(000, 000, 000, 0.3);
	-webkit-box-shadow: 0px 4px 0px rgba(000, 000, 000, 0.3);
	transition: background-color 0.5s ease-in;
	-webkit-transition: background-color 0.5s ease-in;
}

.btn_a:hover {
	background: #2a82a3;
	color: #FFF;
	box-shadow: none;
	margin-top: 10px;
	position: relative;
	top: 3px;
}

.btn_a i {
	margin-top: -8px;
}

.warning {
	display: none;
	position: fixed;
	top: 10px;
	right: 10px;
	animation-name: shake;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
}

.warning_a {
	width: fit-content;
	height: 10px;
	background: #a7050142;
	border: 1px solid #690806;
	border-radius: 70px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	color: #9a1613;
	padding: 15px 8px 25px 8px;
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 20pt;
	box-shadow: 0px 4px 0px rgba(000, 000, 000, 0.3);
	-moz-box-shadow: 0px 4px 0px rgba(000, 000, 000, 0.3);
	-webkit-box-shadow: 0px 4px 0px rgba(000, 000, 000, 0.3);
	transition: background-color 0.5s ease-in;
	-webkit-transition: background-color 0.5s ease-in;
}

.warning_a:hover {
	background: #8A6D3B;
	color: #FCF8E3;
	box-shadow: none;
	/* margin-top: 3px; */
	/* position: relative; */
	/* top: 3px; */
}

.warning_a i {
	margin-top: -10px;

}

.warning_label {
	font-size: 14pt;
	font-weight: 600;
	color: E5004F;
}

.warning_menu {
	text-align: right;
}

.btn-square-little-rich {
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #FFF;
	background: #FF9999;
	/*色*/
	border: solid 1px #FF6699;
	/*線色*/
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.btn-square-little-rich:active {
	/*押したとき*/
	border: solid 1px #FF0033;
	box-shadow: none;
	text-shadow: none;
}

#lg-frm {
	padding-top: 15px;
}

#main {
	padding: 10px 15px;
	background-color: white;
	height: 100%;
}

.bd-ds-bot {
	border-bottom: 1px solid #434a52;
	padding-bottom: 3px;
}

.s-15 {
	font-size: 1.82em;
	line-height: 1.6em;
}

.plr-5 {
	padding: 0px 5px;
}



@keyframes shake {
	0% {
		right: 10px
	}

	1% {
		right: 7px
	}

	2% {
		right: 15px
	}

	3% {
		right: 2px
	}

	4% {
		right: 18px
	}

	5% {
		right: 5px
	}

	6% {
		right: 13px
	}

	7% {
		right: 10px
	}

	8% {
		right: 13px
	}

	9% {
		right: 5px
	}

	10% {
		right: 18px
	}

	11% {
		right: 2px
	}

	12% {
		right: 15px
	}

	13% {
		right: 7px
	}

	14% {
		right: 10px
	}
}
@keyframes pulse {
	from {
		opacity: 1.0;
	}

	to {
		opacity: 0.2;
	}
}
@-webkit-keyframes pulse {
	from {
		opacity: 1.0;
	}

	to {
		opacity: 0.2;
	}
}

.blinking {
	animation-name: pulse;
	-webkit-animation-name: pulse;
	/* 実行する名前 */
	animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	/* 0.5秒かけて実行 */
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	/* 何回実行するか。infiniteで無限 */
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	/* イーズインアウト */
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
	/* alternateにするとアニメーションが反復 */
	animation-delay: 0s;
	-webkit-animation-delay: 0s;
	/* 実行までの待ち時間 */
}

.btn-register {
	background: #FFF;
	border: 1px solid #2a82a3;
	border-radius: 70px;
	-moz-border-radius: 70px;
	-webkit-border-radius: 70px;
	color: #2a82a3;
	padding: 10px 10px 10px;
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 200%;
	box-shadow: 0px 4px 0px rgba(000, 000, 000, 0.3);
	-moz-box-shadow: 0px 4px 0px rgba(000, 000, 000, 0.3);
	-webkit-box-shadow: 0px 4px 0px rgba(000, 000, 000, 0.3);
	transition: background-color 0.5s ease-in;
	-webkit-transition: background-color 0.5s ease-in;
}
.btn-register:focus{
	outline: none;
}

.glyphicon-refresh-animate {
	animation: spin .7s infinite cubic-bezier(0.4, 0, 1, 1);
	-webkit-animation: spin2 .7s infinite cubic-bezier(0.4, 0, 1, 1);
	font-size: 30px;
}
@keyframes spin2 {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}
@-webkit-keyframes spin2 {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	from {
		transform: scale(1) rotate(0deg);
	}

	to {
		transform: scale(1) rotate(360deg);
	}
}

#spin-loader{
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: #888888;
    opacity: 0.5;
	position: absolute;
	padding-top:100px;
	z-index: 9999;
}
#spin-loader > span{
	position: relative;
    left: 43%;
	font-size: 100px;
	color: #337ab7;
}
#loader-txt {
	color: crimson;
    text-align: center;
	font-size: 30px;
	font-weight: bold;
}

#disconnect_warning{
	z-index:9997;
	position: absolute;
	width: 100%;
	height: 100%;
	background: white;
	text-align: center;
	padding-top: 100px;
	display: none;
}
#disconnect_warning > h3 {
	font-weight: bold;
    color: crimson;
}
.circle-container {
	height: 120px;
	width: 120px;
	/* margin: 250px auto 0; */
	position: absolute;
	/* float: right; */
	transform: rotate(180deg);
	right: 10px;
	top: 20px;
  }
  .circle {
	background-color:#fff;
	height: 120px;
	width: 120px;
	display: block;
	border: 5px solid #00baff;
	border-radius: 100px;
	position: absolute;
	bottom: 0;
	z-index: 1;
	animation-name:circle;
	animation-duration:1s;
	animation-timing-function:linear;
	animation-delay:0s;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-play-state:running;
	-webkit-animation-name:circle;
	-webkit-animation-duration:1s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	-webkit-animation-play-state:running;
  }
  .fa-button {
	font-size: 42px;
	color: #00baff;
	bottom: 27px;
	position: absolute;
	left: 50%;
	margin-left: -18px;
	animation-name:arrow;
	animation-duration:1s;
	animation-timing-function:linear;
	animation-delay:0s;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-play-state:running;
	-webkit-animation-name:arrow;
	-webkit-animation-duration:1s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:0s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:normal;
	-webkit-animation-play-state:running;
  }
  .pulse {
	  margin: 0 auto;
	  border-radius: 100px;
	  position: absolute;
	left: 5px;
	  top: 5px;
	  z-index: 0;
	  background-color: transparent;
	  opacity: 0;
	  width: 110px;
	  height: 110px;
	  border: 10px solid #00baff;
	  -webkit-border-radius: 100px;
	  -moz-border-radius: 100px;
	  -o-border-radius: 100px;
	  -ms-border-radius: 100px;
	  border-radius: 100px;
	  /* Giving Animation Function */
	  -webkit-animation: pulse 1s linear infinite 0.3s;
	  -moz-animation: pulse 1s linear infinite 0.3s; 
	  border-image: initial;
  }
  @keyframes arrow
	  {
	  0%   {bottom:0;}
	  75% {bottom:90px;}
	  100% {bottom:0;}
	  }
  @-webkit-keyframes arrow
	  {
	  0%   {bottom:0;}
	75% {bottom:90px;}
	  100% {bottom:0;}
	}
  @keyframes circle
	  {
	  0%   {height:120px;}
	  10% {height: 120px;}
	50% {height: 130px;}
	  75% {height: 150px;}
	90% {height: 130px;}
	  100% {height: 120px;}
	  }
  @-webkit-keyframes circle
	  {
	  0%   {height:120px;}
	  10% {height: 120px;}
	50% {height: 130px;}
	  75% {height: 150px;}
	90% {height: 130px;}
	  100% {height: 120px;}
	  }
  @-webkit-keyframes pulse {       
	0% {-webkit-transform: scale(0); opacity: 0;}
	8% {-webkit-transform: scale(0); opacity: 0;}
	15% {-webkit-transform: scale(0.1); opacity: 1;}
	30% {-webkit-transform: scale(0.5); opacity: 1;}
	100% {opacity: 0; -webkit-transform: scale(1.5);}
  }
  @-moz-keyframes pulse {       
	0% {-webkit-transform: scale(0); opacity: 0;}
	8% {-webkit-transform: scale(0); opacity: 0;}
	15% {-webkit-transform: scale(0.1); opacity: 1;}
	30% {-webkit-transform: scale(0.5); opacity: 1;}
	100% {opacity: 0; -webkit-transform: scale(1.5);}
  }