@charset "utf-8";
body{
	margin:0;
	background-image:url(img/background_01.jpg);
}
#container{
	background-color:#24E609;
}
#container h1{
	color:#ffffff;
}
.main{
	width:1280px;
	height:800px;
	background-image:url(img/soccer_1280.png);
	margin:0 auto;
	position:relative;
}

/*ブルブル震えるアニメーション*/
.main img:hover{
	animation: rumble 0.12s linear infinite;
}
@keyframes rumble{
	0%	{transform:rotate(0deg)	translate(0,0);}
	12.5%	{transform:rotate(0.4deg)	translate(1px,-1px);}
	25%	{transform:rotate(0.8deg)	translate(0px,1px);}
	37.5%	{transform:rotate(0.4deg)	translate(-1px,0);}
	50%	{transform:rotate(0deg)	translate(0,0);}
	62.5%	{transform:rotate(-0.4deg)	translate(1px,0);}
	75%	{transform:rotate(-0.8deg)	translate(0,1px);}
	87.5%	{transform:rotate(-0.4deg)	translate(-1px,-1px);}
	100%	{transform:rotate(0deg)	translate(0,0);}
}
/*-------------------------------------------------------*/

#container img{
	width:30px;
	height:30px;
}
#container h1{
	margin-left:72px;
}

div#li{ width:1280px; margin:0 auto; }

/*丸を3つ作って並べる*/
.customer {
 /* サイズ指定 */        
 width:300px;
 height:300px;
 margin:0 4%;
 /*margin-left:190px;
 margin-right:80px;*/
 /* 背景色 */
background-color:#ffffff;
 border:solid 12px #5bade1;
 /* 角を丸くする */
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 float:left;
}
.info {
 padding-top:68px; /* 真ん中にまで文字を下ろす */
}
.customer h3{
 	text-align: center; /* 中央寄せ */
	padding-bottom:36px;
}

.customer h3,
.customer p {
 color: #5bade1; /* 文字を水色に */
 margin: 0; /* h3とpの余白をリセット */
}
 
/* あとは文字サイズや太字を指定 */
.customer h3 {font-size:26px;}
.customer p {font-size:18px; font-weight:bold; line-height:1.5em; padding:0 40px;}

/*影をつける*/
.customer {
 box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px;
 -webkit-box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px;
 -moz-box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px;
}

/*丸にアクションをつける*/
.customer {
　/* ゆっくりと変化(1.0秒間) */
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
}

.customer:hover {
 /* 変化後の色 */
 background:#9FF;
 /* 回転させる */
 -moz-transform: rotateZ(360deg);
 -webkit-transform: rotateZ(360deg);
 -o-transform: rotateZ(360deg);
 -ms-transform: rotateZ(360deg);
 transform:rotateZ(360deg);
}


/*丸2*/
.partner {
 /* サイズ指定 */        
 width:300px;
 height:300px;
 margin:0 4%;
 /*margin-right:80px;*/
 /* 背景色 */
background-color:#ffffff;
border:solid 12px #8ac457;
 /* 角を丸くする */
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
  float:left;
}
.info {
 padding-top:150px; /* 真ん中にまで文字を下ろす */
}
.partner h3{
 	text-align: center; /* 中央寄せ */
	padding-bottom:10px;
}
.partner h3,
.partner p {
 color: #8ac457; /* 文字を薄緑色に */
 margin: 0; /* h3とpの余白をリセット */
}
 
/* あとは文字サイズや太字を指定 */
.partner h3 {font-size:26px;}
.partner p {font-size:18px; font-weight:bold; line-height:1.5em; padding:0 40px;}

/*影をつける*/
.partner {
 box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px;
 -webkit-box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px;
 -moz-box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px;
}

/*丸にアクションをつける*/
.partner {
　/* ゆっくりと変化(1.0秒間) */
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
}

.partner:hover {
 /* 変化後の色 */
 background:#CF6;
 /* 回転させる */
 -moz-transform: rotateZ(360deg);
 -webkit-transform: rotateZ(360deg);
 -o-transform: rotateZ(360deg);
 -ms-transform: rotateZ(360deg);
  transform:rotateZ(360deg);
}


/*丸3*/
.company {
 /* サイズ指定 */        
 width:300px;
 height:300px;
 margin:0 4%;
 /* 背景色 */
background-color:#ffffff;
 border:solid 12px #008b3e;
 /* 角を丸くする */
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
  float:left;
}
.info {
 padding-top:50px; /* 真ん中にまで文字を下ろす */
}
.company h3{
 text-align: center; /* 中央寄せ */
	padding-bottom:10px;
}
.company h3,
.company p {
 color: #008b3e; /* 文字を緑色に */
 margin: 0; /* h3とpの余白をリセット */
}
 
/* あとは文字サイズや太字を指定 */
.company h3 {font-size:26px;}
.company p {font-size:18px; font-weight:bold; line-height:1.5em; padding:0 40px;}

/*影をつける*/
.company {
 box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px;
 -webkit-box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px;
 -moz-box-shadow: rgba(113,135,164,.65098) 3px 3px 6px 3px;
}

/*丸にアクションをつける*/
.company {
　/* ゆっくりと変化(1.0秒間) */
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
}

.company:hover{
 /* 変化後の色 */
 background:#CF0;
 /* 回転させる */
 -moz-transform: rotateZ(360deg);
 -webkit-transform: rotateZ(360deg);
 -o-transform: rotateZ(360deg);
 -ms-transform: rotateZ(360deg);
  transform:rotateZ(360deg);
}


/*--------------------------------------------------*/
/*.sub1{
	width:500px;
	float:left;
	margin-left:150px;
}*/
.sub2{
	/*float:left;
	margin-left:144px;*/
	margin-bottom:50px;
}

/* 変更 */
.sub2 img{
	display:block;
	width:1280px;
	height:427px;
	margin:0 auto;
}
.a01 a{
	position:absolute;
	top:350px;
	left:15px;
}
.a02 a{
	position:absolute;
	top:60px;
	left:150px;
}
.a03 a{
	position:absolute;
	top:215px;
	left:150px;
}
.a04 a{
	position:absolute;
	top:480px;
	left:150px;
}
.a05 a{
	position:absolute;
	top:650px;
	left:150px;
}
.a06 a{
	position:absolute;
	top:350px;
	left:285px;
}
.a07 a{
	position:absolute;
	top:60px;
	left:415px;
}
.a08 a{
	position:absolute;
	top:215px;
	left:415px;
}
.a09 a{
	position:absolute;
	top:480px;
	left:415px;
}
.a10 a{
	position:absolute;
	top:650px;
	left:415px;
}
.a11 a{
	position:absolute;
	top:350px;
	left:550px;
}
.a12 a{
	position:absolute;
	top:700px;
	left:650px;
}
.a13 a{
	position:absolute;
	top:700px;
	left:760px;
}
.a14 a{
	position:absolute;
	top:700px;
	left:870px;
}
/* dialog */
#dialog {
	text-align:left;
}
#dialog p {
	margin:5px 0 15px;
}
li{
	list-style-type:none;
}
a{
	color:#6F0;
}
a:hover{
	text-decoration:underline;
}
/*--------------------------------*/


.kameraman{
	position:absolute;
	top:750px;
	right:30px;
	}
.kameraman img{
	width:150px;
	height:150px;
}
/*tooltip*/
.kameraman span{
	display:none;
	padding:5px;
	position:absolute;
	box-shadow:2px 2px 2px #666;
	background:#ffffff;
	border:#ccc 1px solid;
	width:150px;
	height:80px;
	top:-80px;
	left:10px;
}
/*----------------------------------*/


.clear{
	clear:both;
}
footer{
	margin-top:300px;
	background-color:#C9C9C9;
	text-align:center;
	width:100%;
	position:absolute;
}