@charset "utf-8";
/*
/*	Copyright 2012. tutsgeek.
/*


/************************************/
/*	BASE STYLES 
/************************************/

body{
	padding:0;	
	margin:0;	
	width:100%;	
	height:100%;
	font-size:14px;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */

	-webkit-text-size-adjust: 100%;
	line-height:1.4;
	font-family:'Exoregular', Arial, sans-serif;
	min-width:1080px;
}


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }
*{
	outline:none;
}
a img{
	border:none;
}
.spacer{
	clear:both;	
	width:100%;	
	height:0;
}
.body-wrapper {

	width:100%;		
	margin:0 auto;	
	padding:0;
}
.controller {
	width:940px; 
	height:auto; 
	margin:0 auto;	
	padding:0;
}
h1, h2, h3, h4, h5, h6{
	font-weight:normal;
	color:#464a55;
}
p{
	font-size:14px;
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a{
	color:#464a55;
}

h1 { font-size: 101px; }
h2 { font-size: 58px; }
h3 { font-size: 30px; }
h4 { font-size: 18px; font-family:'Exobold', Arial, sans-serif;}
h5 { font-size: 14px; }
h6 { font-size: 12px; }

footer#footer h1,
footer#footer h2,
footer#footer h3,
footer#footer h4,
footer#footer h5,
footer#footer h6 {color:#FFF;}
/*footer#footer p{color:#fff;}*/
footer#footer a{color:#16beef;}


/*------------------------------------------------------------------*/ 
/*	menu
/*------------------------------------------------------------------*/

.body-wrapper{
	background:#23272a;
}


/*全体に色をつけるのはやめる*/
/*
body { background:#111; height:100%; }
*/

	img { border:none; }
	
.all-service{
	float:left;
	overflow:hidden;
}
.service-circles{
	float:left;
/*
	height:783px;
*/
height: 550px;		/*画像の高さ＋上下10px*/

	/*
	background:url(../img/service-line.png) no-repeat;
	*/
	/*
	background:url(../images/circle/circle_w.png) no-repeat;
	*/
	background:url(../images/circle/circle.png) no-repeat;
	
	background-position:48% 50%;
}
.service-circles img{
/*これがあると円のアイコンの後ろと前とがずれる

	margin:35px 0 0 0;
*/
}
.service-circles h4{
	margin:10px 0 0 0;
	font-size:18px;
	text-transform:uppercase;
}
.center-circle{

	background:url(../images/circle/circle_s49.png) no-repeat;
	
	
/*
	background:url(../images/circle/center-circle.png) no-repeat;
*/
	width:49px; /*310px;*/
	height:49px; /*310px;*/

	position:absolute;
	margin:249px 0 0 453px;

	text-align:center;
	/*重なり順序　大きい数字：上*/
	z-index:1000;
}
.center-circle img{
/*
	margin:80px 0 0 0;
*/
/*
	margin:80px 0 0 0;
*/
}
.center-circle h4{
	color: #FFF;
	text-transform:uppercase;
}
.service1, .service2, .service3, .service4, .service5, .service6, .service7{ background:url(../images/circle/service-circle.png) no-repeat; width:110px; height:110px; text-align:center;}

.service1:hover, .service2:hover, .service3:hover, .service4:hover, .service5:hover, .service6:hover, .service7:hover{ background:url(../images/circle/service-circle-hover.png) no-repeat; width:110px; height:110px; text-align:center;}

/*--spiralia--*/
.service1{
	/*
	margin:0 0 0 388px;
	*/
	/*
	margin:20px 0 0 405px;
	*/
	margin:25px 0 0 405px;
	
	
	position:absolute;
}
/*--OtherOrganizm--*/
.service2{
	/*
	margin:152px 0 0 121px;
	*/
	margin:100px 0 0 250px;

	position:absolute;
}
/*--Ecdysozoa^^*/
.service3{
	/*
	margin:152px 0 0 657px;
	*/
	/*
	margin:100px 0 0 550px;
	*/
	margin:100px 0 0 555px;

	position:absolute;
}
/*--Lower Phyla--*/
.service4{
	/*
	margin:463px 0 0 121px;
	*/
	/*
	margin:255px 0 0 230px;
	*/
	margin:259px 0 0 225px;

	position:absolute;
}
/*--Chaetognatha--*/
.service5{
	/*
	margin:463px 0 0 657px;
	*/
	/*
	margin:255px 0 0 590px;
	*/
	margin:260px 0 0 595px;
	
	position:absolute;
}
/*--Xenacoelomorpha--*/
.service6{
	/*
	margin:617px 0 0 388px;
	*/
	/*
	margin:375px 0 0 320px;
	*/
	margin:380px 0 0 325px;
	
	position:absolute;
}
/*--Deuterostomia--*/
.service7{
	/*
	margin:375px 0 0 485px;
	*/
	margin:380px 0 0 485px;
	
	position:absolute;
	
}

.service-description {
	text-align:center;
	margin-top:0px;
}
.service-description p, .service-description h4{
	color:#FFF;
	margin-right:10px;
	margin-left:10px;
	text-align:left;
}
.service-description h4{
	text-transform:uppercase;
	margin-bottom:0;
}
@-webkit-keyframes spin {  
from {  
    -webkit-transform: rotate(0deg);
}  
to {  
    -webkit-transform: rotate(360deg); 
    }  
}
@-webkit-keyframes spinback {  
from {  
    -webkit-transform: rotate(0deg);  
}  
to {  
    -webkit-transform: rotate(-360deg);  
    }  
}
.service-circles{  
    -webkit-animation-name: spin;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-timing-function: linear;  
    -webkit-animation-duration: 40s; 
}  
.service1, .service2, .service3, .service4, .service5, .service6, .service7 {  
    -webkit-animation-name: spinback;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-timing-function: linear;  
    -webkit-animation-duration: 40s;  
}

.map{
	width:100%;
	height:0px;
	border-bottom:10px solid #d9d9d9;
	border-top:10px solid #d9d9d9;
	float:left;
	clear:both;
	box-shadow:0 0 1px #333333;
	-moz-box-shadow:0 0 1px #333333;
	-webkit-box-shadow:0 0 1px #333333;
}