@charset "utf-8";
body  {
	font: 100% "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, ;
	background:	#fff url(img/bgcolor02.png) repeat-x;
	margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */
	padding: 20px 10px;
	text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */
	color:#033460;
}


/************************************************************
各区画
【#container】
　一番外枠
　.Opening #container：TOPのFlash画面用の設定
　.JAES #container：TOPページの設定

【#container2】
　背景画像（サッカーボール）を入れるための枠
　.JAES #container2
　.JAES #container2-fix：サイズ固定、縦画面の小さいページ用
************************************************************/







/************************************************************
TOPのFlash画面用の設定
************************************************************/
.Opening #container{ 
	border: 3px solid #ccc;
	text-align: center; /* この設定は body エレメントの text-align: center より優先されます。 */
	margin: -240px 0 0 -320px;  /*縦横の半分をネガティブマージンでずらす*/
	position: absolute;  /*body要素に対して絶対配置*/
	top: 50%;  /*上端を中央に*/
	left: 50%;  /*左端を中央に*/
	width: 640px;  /*横幅*/
	height: 480px;  /*縦幅*/
} 

/************************************************************
TOPのページ用の設定
************************************************************/
.JAES #container {
	width: 900px;
	margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */
	border: 1px solid #ccc;
	text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */
	background-color: #fff;

} 

/************************************************************
背景画像用の設定　containerの中にネスト（入れ子）されている。
　背景画像（サッカーボール）を入れるための枠
　.JAES #container2
　.JAES #container2-fix：サイズ固定、縦画面の小さいページ用
************************************************************/
.JAES #container2{

	background:url(img/succer001.jpg) no-repeat right bottom;
	margin: 0; /* 自動マージン（幅と連動）により、ページが中央揃えになります */
	border: 0;
	min-height:790px;
	height:auto !important; /* IE6 &Mac5.5 min-height bug回避*/
	height:790px; /* IE6 &Mac5.5 min-height bug回避*/
}

/************************************************************
Header部分の設定
************************************************************/
.JAES #header { 
	margin:0;
	padding: 0;  /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */
/*	background:url(img/top.jpg);*/
	text-align:right;
	height:	150px;
	background:url(img/headerbg.png) repeat-x left top;

} 

.JAES #headerimg{
	text-align:left;
	float:left;
	margin:20px 0 0 40px;
	display: inline ;
	}


.JAES #header h1 {
/* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */
	padding:50px 50px 0px 30px;
	/*padding: 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */
/*	font-size:1.0em;*/
	text-align:right;
		color:#033460;
/*	font:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
/*	margin:50px 50px 0px 30px;*/
	margin:0;
}

.JAES #header h2{
	
	padding: 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */
/*	font-size:1.0em;*/
	text-align:right;
		color:#033460;
	font:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin:0px 50px 30px 30px;
}



/************************************************************
sidebarの設定　画面で言うと左下のフレーム
************************************************************/

.JAES #sidebar1 {
	float: left; 
	width: 13em; /* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */
	padding:0 15px 0 15px; /* 上余白と下余白により、この div 内に視覚的なスペースが設定されます */
	margin:0;
}

.JAES #sidebar1 h3, .JAES #sidebar1 p {
	margin-left: 10px; /* サイドバーに配置されるすべてのエレメントに左マージンと右マージンが設定されている必要があります */
	margin-right: 10px;
}

/********************************************************************
サイドバーの見栄え部分
*********************************************************************/
#sidebar{
	margin:0;
	padding:15px 3px 15px 3px;
	float:left;
	background:#fbfbf3;
	width:200px;
	height:auto;
	border:solid 1px #f3f3f3;
	}


#navBar{
	margin:0;
	padding:0;
	list-style-type:none;
}

#navBar a{
	background:url(img/buttonGR10px.gif) no-repeat;
	background-position:17px 8px;
	display:block;
	color:#033460;
	text-decoration: none;
	padding:5px 5px 5px 30px;
	margin-bottom:3px;
	font-size:14px;
}
#navBar a:hover{
	background:#cbf7b8 url(img/buttonGR10px.gif) no-repeat;
	background-position:17px 8px;
}

#navBar #menu{
	background:url(img/menubg01.png) repeat-y;
/*	background-color:#c5ec84;*/
	color:#033460;
	padding:5px;
}

#navBar #navBar1{
	font-size:16px;
	margin:0;
	padding:0 0 0 5px;
}






/************************************************************
mainContentの設定　画面で言うと右下のフレーム

#mainContent に関するヒント：
1. #mainContent と #sidebar1 の間のスペースは、#mainContent div の右マージンによって設定されます。#sidebar1 div に含まれるコンテンツの量に関係なく、#sidebar1 div のスペースは維持されます。#sidebar1 のコンテンツが終了した後のスペースに #mainContent div のテキストを挿入するには、この右マージンを削除します。
2. #mainContent div の幅より広いエレメントが #mainContent div 内に配置されると、フローティングエレメントの落下（フローティング状態ではない #mainContent 領域がサイドバーの下に配置されること）が発生する可能性があります。ハイブリッドレイアウトの場合（全体の幅の単位はパーセント、サイドバーの単位は em）、使用可能な幅を正確に計算できない場合があります。ユーザーのテキストサイズが平均よりも大きい場合、#sidebar1 div が広くなるため、#mainContent div のスペースが狭くなります。クライアントが Contribute を使用してコンテンツを追加する予定である場合は、この制限に注意してください。
3. 下の Internet Explorer の条件分岐コメントでは、#mainContent に「hasLayout」を設定するのにズームプロパティが使用されます。これにより、いくつかの IE 固有のバグを回避できます。

	#mainContent:通常使用する設定
	#mainContentTop：Topページにのみ使用する設定
************************************************************/

/* ---old mainContent---
.JAES #mainContent {
  margin: 0 0 20px 240px;
  padding:20px 30px 0 15px;
  color:#003460;
} */

.JAES #mainContent {

/*  margin: 5px 0 0 15em; /* 右マージンは、em またはピクセルで設定できます。これにより、ページの右側にスペースが設定されます。 */
  margin: 0 15px 15px 238px;
  padding:15px 15px 15px 15px;
  color:#003460;
/*  border:solid 2px #e8ffd1;*/
  background:#fbfbf3;
  border:solid 1px #f3f3f3;

} 


.JAES #mainContentPict {

/*  margin: 5px 0 0 15em; /* 右マージンは、em またはピクセルで設定できます。これにより、ページの右側にスペースが設定されます。 */
  margin: 0 0 20px 240px;
  padding:0 30px 0 15px;
  color:#003460;
/*  border-left:solid 1px #eee;*/

} 

.JAES #mainContentTop {

/*  margin: 5px 0 0 15em; /* 右マージンは、em またはピクセルで設定できます。これにより、ページの右側にスペースが設定されます。 */
  margin: 5px 0 0 20px;
  padding:0px 30px 0 15px;
  color:#003460;
} 

.JAES #subContent2{
	margin:0;
	float:left;
	width:600px;
	padding-top: 40px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 35px;
	letter-spacing: 2px;
	line-height: 1.2em;
}
	
/************************************************************
パンくずの設定
************************************************************/
.JAES #linker{
	font-size:11px;
	color:#999;
	margin: 10px 0 10px 20px;
}

/************************************************************
書体の設定
h1,h2はheaderで使用しているため　コメントアウト
************************************************************/

/*.JAES #header h1 {
	padding:0;
	margin:0;
	text-align:right;
	color:#033460;
}*/

/*.JAES #header h2{
	padding: 0;
	margin:0;
	color:#033460;
	font:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}*/

.JAES h3{
	border-left:#003460 solid ;
	border-left-width:5px;
	border-bottom:#003460 dotted;
	border-bottom-width:1px;
	width:360px;
	margin:0 0 10px 0;
	padding:0 0px 0px 5px;
}

#short
{
	width:290px;
}


h4{
	padding:0;
	margin:10px;
	}
	
h5{
	padding:0;
	margin:7px 20px;
	}

.JAES p{
	font-size:14px;
	color:#003460;
	margin:0;
	padding:0;
	text-decoration: none;
}




/*************************************************************
Footerの見た目
*************************************************************/
#bottom{
	margin:0 ;
	height:41px;
	color:#003460;
	border-top:dotted;
	border-bottom:dotted;	
	border-width:1px;
	background:#c5ec84;
}

.JAES #bottom-logo{
	margin:2px 0 0 10px;

	float:left;
	display: inline;/*2倍float　margin バグ*/
}


#bottom-link{
	margin: 12px 20px 0 0;
	text-align:right;

}

#bottom a{
	margin: 12px 0 0 0;
	font-size:15px;
	text-align:right;
	color:#003460;
	text-decoration:none;
}


.JAES #copyright{
	text-align:right;
	font-size:12px;
}







/* 再使用できる各種クラス */
.fltrt { /* このクラスは、ページ上でフローティングエレメントを右側に配置するのに使用できます。プローティングエレメントは、ページ上でその横に配置されるエレメントの前に配置される必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスは、ページ上でフローティングエレメントを左側に配置するのに使用できます */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/*************************************************************
各タグの設定
*************************************************************/
/*li{
	margin:0;
	padding:0;
	font-size:0.8em;
	}*/

img{
	border:0;　/*イメージでのリンクで罫線を見せない*/
}

img.imgBorder{
	border:solid 3px #CCCCCC;
	display:inline;
	margin:5px;
	}




ol{margin:0;}

p.descript{
	padding:0;
	margin:0 0 10px 10px;
}

.center{
	text-align:center;
}

.right{
	text-align:right;
}

.left{
	text-align:left;
	padding-left:15px;
}

	  /**************************************************************
	  table周り
	  **************************************************************/
	  .JAES table{
		  padding:0;
		  margin:0 0 10px 10px;
		  width:95%;

	  }
	  
	  /*.JAES th,td{
		  background-color:#e8ffd1;
		  color:003560;
	  }*/

	  .JAES th{
		  background-color:#e8ffd1;
		  color:#003560;
	  }
	  .JAES dt{
		  margin:10px 280px 0 0;
		  font-weight:bold ;
		  background-color:#e8ffd1;
		  color:#003560;
	  }
	  .JAES dd{
		  margin-top:5px;
		  margin-left:20px;
	  }


	  .JAES td{
		  padding-left:10px;
		  color:#003560;
	  }
	  

#table0{
	border:0;
	padding:0;
}


#table1{
	border:solid 1px #ddd;
	border-collapse:collapse;
}	
#table1 td,th{
border:solid 1px #ddd;
}

#table1 th{
	text-align:center;
}


/*************************************************************
不明なものたち
*************************************************************/

#news {
	text-align:left;
	font-size:0.8em;
}


.image {
	top:10px;
	left:10px;
	float:left;
}

	

	
#rule{
	padding:0;
	margin:0 0 10px 30px;}
	
#rule-list{
	padding:0;
	margin:0 0 0 20px;}
	



/*TopページのNews部分*/
.JAES #information{
	padding:0;
	margin-bottom:20px;
	}


/*サブページ以下の一番大きいコンテンツ*/
.JAES #subContent1{
	padding:0;
	margin:0;
}



#scroll {
	margin:15px 10px;
}

.links {
  margin:0;
  padding:10px;
}





.m-b5{ margin-bottom:5px;}
.m-b10{ margin-bottom:10px;}
.m-b15{ margin-bottom:15px;}
.m-b20{ margin-bottom:20px;}
.m-b30{ margin-bottom:30px;}
.m-b40{ margin-bottom:40px;}

.m-l20{ margin-left:20px;}
.m-l30{ margin-left:30px;}


.lh-20{line-height:20px}




/*-------------------------------
form_common
------------------------------ */

INPUT.text {
	WIDTH: 90%
}

INPUT.text1 {
	WIDTH: 50%
}

INPUT.text2 {
	WIDTH: 40%
}

INput.text3 {
	WIDTH: 10%
}

INput.text4 {
	WIDTH: 80%
}

INput.text5 {
	WIDTH: 30%
}

.p1 {
	color : #808080;
	font-size : 0.9em;
}

.p2 {
	margin-right: 15px;
	margin-left: 10px;
	}

INPUT.post-left {
	WIDTH: 2em
}
INPUT.post-right {
	WIDTH: 3em
}
INPUT.tel {
	WIDTH: 4em
}
INPUT.post-add {
	MARGIN: 3px 0px; WIDTH: 95%
}
INPUT.mail {
	MARGIN-TOP: 3px; MARGIN-BOTTOM: 3px; WIDTH: 95%; MARGIN-RIGHT: 0px
}
TEXTAREA.textarea {
	WIDTH: 95%; HEIGHT: 10em
}


#table3{
	line-height:17px;}


.table2 {padding: 10px;}
.table2 table{
	width: 100%;
		border-collapse:collapse;
	
}
.table2 table th{
	background-color: #e8ffd1;
	border: 1px solid #c5ec84;
	border-collapse:collapse;
	text-align: center;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.table2 table td{
	border: 1px solid #c5ec84;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}

.necessary {
	color: #ed1c24
	
}



/*
 Topページのバナー設定
 サイドバー的な使い方
*/
#banner{
	padding-top:40px;
	float: right;
	margin:0 auto;
	width:250px;
}

/*TOPページのFlash一修正*/
.JAES #FlashID{
	margin-left:20px;
	margin-bottom:20px;
}
/**********************************************************
各種hack
***********************************************************/

/* hide hack from Mac-IE5 \*/* html #bottom-link,#banner,#mainContentA { height: 1%; }/* end hiding */

/*
IEで背景画像とコンテンツが1pxずれるのを回避
-------------------------------------------------/*

/* IE7でpadding指定 */
*:first-child+html body {
padding-left: 1px;
}

/* IE6以下でpadding指定 */
*html body {
padding-left: 1px;
}

#block{
  	border:solid 1px #f3f3f3;
	  background:#fbfbe3;

/* clearfix
-------------------------------------------------------------*/
.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;

}

.clearfix {
	/zoom: 1;

}
#subContent2 p {
	padding-bottom: 15px;
}