/* circle */

.for_circle {
	position: relative;
}

.circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	position: absolute;
	animation: .9s bound ease-in infinite alternate;
	z-index: 1;
}

.circle.small {
	width: 25px;
	height: 25px;
}

.circle.small-s {
	width: 20px;
	height: 20px;
}

.circle.anime02 {
	animation: .9s bound2 ease-out infinite alternate;
}

.circle.purple {
	background-color: #c09ad6;
	left: 15%;
	/* top: 180px; */
	top: 60px;
}

.circle.yellow {
	background-color: #e5e024;
	/* bottom: 50px; */
	bottom: 100px;
	right: 15%;
}

.circle.pink {
	background-color: #ffb8d0;
	left: 10%;
	top: 130px;
}

.circle.blue {
	background-color: #86b4e8;
	right: 10%;
	bottom: 140px;
}

.circle.green {
	background-color: #7bc7c2;

}

.circle.orange {
	background-color: #ff931e;
}

.circle.left_top {
	left: 20%;
	top: 5%;
}

.circle.left_bottom {
	left: 5%;
	bottom: 2%;
}

.circle.right_middle {
	right: 10%;
	left: inherit;
	top: 40%;
}

.circle.right_minus {
	right: 5%;
	bottom: -2%;
}

.circle.right_minus_top {
	right: 5%;
	top: -15%;
}

.circle.left_minus {
	left: 20%;
	bottom: -10%;
	top: inherit;
}


@keyframes bound {
	0% { transform:translateY(0px);}
	100% { transform: translateY(20px);}
}

@keyframes bound2 {
	0% { transform:translateY(20px);}
	100% { transform: translateY(0px);}
}

.summary .circle.pink {
	left: 45%;
	bottom: 5%;
	top: inherit; 
}

.summary .circle.yellow {
	right: 5%;
	bottom: 0;
}

.summary .circle.green {
	left: 15%;
	bottom: 15%;
}

.summary .circle.orange {
	left: 15%;
	bottom: 15%;
}

.service .pink {
	top: -5%;
	width: 20px;
	height: 20px;
}

.service .green {
	left: 30%;
	top: 21%;
	z-index: 1;
	width: 20px;
	height: 20px;
}

.service .purple {
	top: 55%;
}

.service .yellow {
	top: 33%;
}

.service .orange {
	bottom: 23%;
	left: 25%;
	width: 20px;
	height: 20px;

}

.service .green02 {
	left: inherit;
	right: 15%;
	top: inherit;
  bottom: 35%;
	
}

.service .yellow.left_bottom {
	top: inherit;
	bottom: 2%;
}

.service .pink02 {
	left: inherit;
	right: 5%;
	top: inherit;
  bottom: 13%;
	width:30px;
	height: 30px;
}

.office .circle.pink { 
	right: 0;
	bottom: 5%;
	left: inherit;
	top: inherit;
}

.office .circle.purple { 
	left: 5%;
	bottom: -50px;
	top: inherit;
}

.office .circle.green { 
	right: 15%;
	bottom: 0;
	left: inherit;
	top: inherit;
}

.office .circle.orange { 
	left: 20%;
	bottom: 6%;
	top: inherit;
}

.insurance .circle.pink {
	left: 30%;
	top: 5%;
}
.insurance .circle.purple {
	right: 15%;
	left: inherit;
	top: 40%;
}
.insurance .circle.green {
	left: 16%;
	bottom: 4%;
}

.ikiiki .circle.green {
	left: 5%;
	top: 8%;
}
.ikiiki .circle.yellow {
	right: 5%;
	top: 8%;
}

@media screen and (max-width: 768px) {
	.circle {
		display: none;
	}
}