/*----------------------------------------------------------------
 loading_circle.css
 update:	2015.12.03
 author:	Akihiro Yuasa
 License: 	MIT License (MIT)
-----------------------------------------------------------------*/ 

@charset "utf-8";
/*------------------------------
.loading_circle3
-------------------------------*/
.loading_circle3{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
	/*　ローディングサイズ */
	transform:scale(0.8,0.8) translate3d(-50%,-50%,0);
	-webkit-transform:scale(0.8,0.8) translate3d(-50%,-50%,0);
}
.circle3-base{
	width:80%;
	height:80%;
	border-radius:100%;
	background:#000;
	position:absolute;
	left:10%;
	top:10%;
	z-index:999;
}
.circle3-circle{
	opacity:1;
	width:100%;
	height:100%;
	border-radius:100%;
	background: #0e53ca; /* Old browsers */
	background: -moz-linear-gradient(left,  #0e53ca 50%, #4cdae1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(50%,#0e53ca), color-stop(100%,#4cdae1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #0e53ca 50%,#4cdae1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #0e53ca 50%,#4cdae1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #0e53ca 50%,#4cdae1 100%); /* IE10+ */
	background: linear-gradient(to right,  #0e53ca 50%,#4cdae1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e53ca', endColorstr='#4cdae1',GradientType=1 ); /* IE6-9 */
	animation: circle3-load linear 0.5s infinite;
	-o-animation: circle3-load linear 0.5s infinite;
	-ms-animation: circle3-load linear 0.5s infinite;
	-webkit-animation: circle3-load linear 0.5s infinite;
	-moz-animation: circle3-load linear 0.5s infinite;
	transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
}
@keyframes circle3-load {
	100% {
		transform: rotate(360deg);
	}
}
@-o-keyframes circle2-load {
	100% {
		-o-transform: rotate(360deg);
	}
}
@-ms-keyframes circle2-load {
	100% {
		-ms-transform: rotate(360deg);
	}
}
@-webkit-keyframes circle3-load {
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes circle2-load {
	100% {
		-moz-transform: rotate(360deg);
	}
}
/*------------------------------
.loading_circle2
-------------------------------*/
.loading_circle2 {
	position: absolute;
	top: 70px;
	left: 12px;
	width: 50px;
	height: 50px;
	margin: auto;
	opacity:0;
	/*　ローディングサイズ */
	transform:scale(0.5,0.5);
	-webkit-transform:scale(0.5,0.5);
}

.loading_circle2 .circle2-dot:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	opacity:1;
	background:#666666;	/* カラー */
}

.loading_circle2 .circle2-dot {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 40px;
	height: 100%;
	margin: auto;
}
.loading_circle2 .circle2-dot:nth-child(1) {
	transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}
.loading_circle2 .circle2-dot:nth-child(1):before {
	animation: circle2-load 0.92s linear 0.12s infinite;
	-o-animation: circle2-load 0.92s linear 0.12s infinite;
	-ms-animation: circle2-load 0.92s linear 0.12s infinite;
	-webkit-animation: circle2-load 0.92s linear 0.12s infinite;
	-moz-animation: circle2-load 0.92s linear 0.12s infinite;
}

.loading_circle2 .circle2-dot:nth-child(2) {
	transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
}
.loading_circle2 .circle2-dot:nth-child(2):before {
	animation: circle2-load 0.92s linear 0.23s infinite;
	-o-animation: circle2-load 0.92s linear 0.23s infinite;
	-ms-animation: circle2-load 0.92s linear 0.23s infinite;
	-webkit-animation: circle2-load 0.92s linear 0.23s infinite;
	-moz-animation: circle2-load 0.92s linear 0.23s infinite;
}
.loading_circle2 .circle2-dot:nth-child(3) {
	transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
}
.loading_circle2 .circle2-dot:nth-child(3):before {
	animation: circle2-load 0.92s linear 0.35s infinite;
	-o-animation: circle2-load 0.92s linear 0.35s infinite;
	-ms-animation: circle2-load 0.92s linear 0.35s infinite;
	-webkit-animation: circle2-load 0.92s linear 0.35s infinite;
	-moz-animation: circle2-load 0.92s linear 0.35s infinite;
}
.loading_circle2 .circle2-dot:nth-child(4) {
	transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
}
.loading_circle2 .circle2-dot:nth-child(4):before {
	
	animation: circle2-load 0.92s linear 0.46s infinite;
	-o-animation: circle2-load 0.92s linear 0.46s infinite;
	-ms-animation: circle2-load 0.92s linear 0.46s infinite;
	-webkit-animation: circle2-load 0.92s linear 0.46s infinite;
	-moz-animation: circle2-load 0.92s linear 0.46s infinite;
}
.loading_circle2 .circle2-dot:nth-child(5) {
	transform: rotate(225deg);
	-o-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
}
.loading_circle2 .circle2-dot:nth-child(5):before {
	
	animation: circle2-load 0.92s linear 0.58s infinite;
	-o-animation: circle2-load 0.92s linear 0.58s infinite;
	-ms-animation: circle2-load 0.92s linear 0.58s infinite;
	-webkit-animation: circle2-load 0.92s linear 0.58s infinite;
	-moz-animation: circle2-load 0.92s linear 0.58s infinite;
}
.loading_circle2 .circle2-dot:nth-child(6) {
	transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
}
.loading_circle2 .circle2-dot:nth-child(6):before {
	animation: circle2-load 0.92s linear 0.69s infinite;
	-o-animation: circle2-load 0.92s linear 0.69s infinite;
	-ms-animation: circle2-load 0.92s linear 0.69s infinite;
	-webkit-animation: circle2-load 0.92s linear 0.69s infinite;
	-moz-animation: circle2-load 0.92s linear 0.69s infinite;
}
.loading_circle2 .circle2-dot:nth-child(7) {
	transform: rotate(315deg);
	-o-transform: rotate(315deg);
	-ms-transform: rotate(315deg);
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
}
.loading_circle2 .circle2-dot:nth-child(7):before {
	animation: circle2-load 0.92s linear 0.81s infinite;
	-o-animation: circle2-load 0.92s linear 0.81s infinite;
	-ms-animation: circle2-load 0.92s linear 0.81s infinite;
	-webkit-animation: circle2-load 0.92s linear 0.81s infinite;
	-moz-animation: circle2-load 0.92s linear 0.81s infinite;
}
.loading_circle2 .circle2-dot:nth-child(8) {
	transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
}
.loading_circle2 .circle2-dot:nth-child(8):before {
	animation: circle2-load 0.92s linear 0.92s infinite;
	-o-animation: circle2-load 0.92s linear 0.92s infinite;
	-ms-animation: circle2-load 0.92s linear 0.92s infinite;
	-webkit-animation: circle2-load 0.92s linear 0.92s infinite;
	-moz-animation: circle2-load 0.92s linear 0.92s infinite;
}
@keyframes circle2-load {
	100% {
		opacity: 0;
		transform: scale(0);
	}
}
@-o-keyframes circle2-load {
	100% {
		opacity: 0;
		-o-transform: scale(0);
	}
}
@-ms-keyframes circle2-load {
	100% {
		opacity: 0;
		-ms-transform: scale(0);
	}
}
@-webkit-keyframes circle2-load {
	100% {
		opacity: 0;
		-webkit-transform: scale(0);
	}
}
@-moz-keyframes circle2-load {
	100% {
		opacity: 0;
		-moz-transform: scale(0);
	}
}
/*------------------------------
.loading_circle1
-------------------------------*/
.loading_circle1{
	position:absolute;
	left:30px;
	top:30px;
	/*　ローディングサイズ */
	transform:scale(1.0,1.0);
	-webkit-transform:scale(1.0,1.0);
}

.segment {
	/*　ローディングカラー */
	background-color:#4edde1;
	height:3px;
	width:9px;
}
.sheath {
	position: absolute;
	opacity:0.3;
}

.sheath:nth-child(1) {
	transform: rotate(-30deg) translate(12px);
	-o-transform: rotate(-30deg) translate(12px);
	-ms-transform: rotate(-30deg) translate(12px);
	-webkit-transform: rotate(-30deg) translate(12px);
	-moz-transform: rotate(-30deg) translate(12px);
}

.sheath:nth-child(2) {
	transform: rotate(-60deg) translate(12px);
	-o-transform: rotate(-60deg) translate(12px);
	-ms-transform: rotate(-60deg) translate(12px);
	-webkit-transform: rotate(-60deg) translate(12px);
	-moz-transform: rotate(-60deg) translate(12px);
}

.sheath:nth-child(3) {
	transform: rotate(-90deg) translate(12px);
	-o-transform: rotate(-90deg) translate(12px);
	-ms-transform: rotate(-90deg) translate(12px);
	-webkit-transform: rotate(-90deg) translate(12px);
	-moz-transform: rotate(-90deg) translate(12px);
}

.sheath:nth-child(4) {
	transform: rotate(-120deg) translate(12px);
	-o-transform: rotate(-120deg) translate(12px);
	-ms-transform: rotate(-120deg) translate(12px);
	-webkit-transform: rotate(-120deg) translate(12px);
	-moz-transform: rotate(-120deg) translate(12px);
}

.sheath:nth-child(5) {
	transform: rotate(-150deg) translate(12px);
	-o-transform: rotate(-150deg) translate(12px);
	-ms-transform: rotate(-150deg) translate(12px);
	-webkit-transform: rotate(-150deg) translate(12px);
	-moz-transform: rotate(-150deg) translate(12px);
}

.sheath:nth-child(6) {
	transform: rotate(-180deg) translate(12px);
	-o-transform: rotate(-180deg) translate(12px);
	-ms-transform: rotate(-180deg) translate(12px);
	-webkit-transform: rotate(-180deg) translate(12px);
	-moz-transform: rotate(-180deg) translate(12px);
}


.sheath:nth-child(7) {
	transform: rotate(-210deg) translate(12px);
	-o-transform: rotate(-210deg) translate(12px);
	-ms-transform: rotate(-210deg) translate(12px);
	-webkit-transform: rotate(-210deg) translate(12px);
	-moz-transform: rotate(-210deg) translate(12px);
}

.sheath:nth-child(8) {
	transform: rotate(-240deg) translate(12px);
	-o-transform: rotate(-240deg) translate(12px);
	-ms-transform: rotate(-240deg) translate(12px);
	-webkit-transform: rotate(-240deg) translate(12px);
	-moz-transform: rotate(-240deg) translate(12px);
}


.sheath:nth-child(9) {
	transform: rotate(-270deg) translate(12px);
	-o-transform: rotate(-270deg) translate(12px);
	-ms-transform: rotate(-270deg) translate(12px);
	-webkit-transform: rotate(-270deg) translate(12px);
	-moz-transform: rotate(-270deg) translate(12px);
}


.sheath:nth-child(10) {
	transform: rotate(-300deg) translate(12px);
	-o-transform: rotate(-300deg) translate(12px);
	-ms-transform: rotate(-300deg) translate(12px);
	-webkit-transform: rotate(-300deg) translate(12px);
	-moz-transform: rotate(-300deg) translate(12px);
}

.sheath:nth-child(11) {
	transform: rotate(-330deg) translate(12px);
	-o-transform: rotate(-330deg) translate(12px);
	-ms-transform: rotate(-330deg) translate(12px);
	-webkit-transform: rotate(-330deg) translate(12px);
	-moz-transform: rotate(-330deg) translate(12px);
}


.sheath:nth-child(12) {
	transform: rotate(-360deg) translate(12px);
	-o-transform: rotate(-360deg) translate(12px);
	-ms-transform: rotate(-360deg) translate(12px);
	-webkit-transform: rotate(-360deg) translate(12px);
	-moz-transform: rotate(-360deg) translate(12px);
}