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

/* Intoduction */

.Introduction {
	background: url(../../module/introduction/img/BgrBubble.svg) no-repeat center center #8bb431;
	background-size: cover;
	color: #FFF;
}

.Introduction .Circle {
	position: relative;
	display: inline-block;
	width: 180px;
	height: 180px;
	border-radius: 90px;
	-webkit-border-radius: 90px;
	-moz-border-radius: 90px;
	margin:4px;
	background: #FFF;
	color: #4a545a;
}


.Introduction .CircleCenter {
  display: table-cell;
  height: 180px;
  line-height: 180px;
  vertical-align: middle;
  padding: 16px;
  box-sizing: border-box;
}


.Introduction .CircleCenter h3 {
	line-height: 1.2em;
	font-size: 1.5em;
	font-weight: 300;
}

.Introduction .CircleCenter h3 strong {
	font-weight: 600;
}

.Introduction .Bubble1 {
	position: absolute;
	top:12px;
	left:4px;
	width: 36px;
	height: 35px;
	background: url(../../module/introduction/img/Bubble1.png) no-repeat center center;
	background-size: contain;
}

.Introduction .Bubble2 {
	position: absolute;
	top:148px;
	left:10px;
	width: 34px;
	height: 38px;
	background: url(../../module/introduction/img/Bubble2.png) no-repeat center center;
	background-size: contain;
}

.Introduction .Bubble3 {
	position: absolute;
	top:12px;
	right:2px;
	width: 37px;
	height: 36px;
	background: url(../../module/introduction/img/Bubble3.png) no-repeat center center;
	background-size: contain;
}

.Introduction .Bubble4 {
	position: absolute;
	top:142px;
	right:5px;
	width: 37px;
	height: 34px;
	background: url(../../module/introduction/img/Bubble4.png) no-repeat center center;
	background-size: contain;
}

.Introduction button {
	background: #FFF;
	color: #8bb431;
}

.Introduction button:hover {
	background: rgba(255, 255, 255, 0.7);
	}
	
	
@media (max-width: 480px) 
{
	
	.Introduction .Circle {
		margin:15px 5px;
		}

}