@charset "utf-8";

@import url("base.css");

/*====================================================
------------------------------------------------------
	 article.css  
------------------------------------------------------
====================================================*/

/*================= color ===================

	background #fff
	text01     #333
	text02     #24116F
	text02     #247442	


/*================= contents menu ============

	1: base
		- page
		- a:link
		  a:visited 
		  a:hover
		  a:active
	
	2: -areaA(header)
		- common
		- school
		- jr-high
		- senior-high
		
	4: -areaB(main)
		- common senior-high
		- school
		- jr-high
		
	5: -areaC(Footer)
		- school
		- jr-high
		- senior-high
			
	6: -etc					
			- .gototop
			
			

						
		
============================================== */

/*div,ul,li,h2,h3 { border: 1px solid #333;}*/
/*====================================================
	1: - base
====================================================*/

body { background: #fff; text-align: center; font: normal 12px/22px "lro SVbN", "Osaka|"," Arial","Helvetica","sans-serif"; color: #333; margin: 0;}

.page { width: 765px; border: 1px solid #666; margin: 0 auto;}
.page:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
/*\*//*/
     .page {
         display: inline-table;
     }
 /**/

a:link { color: #3a489e;}
a:visited { color: #333;}
a:hover { color: #ffd700;}
a:active { color: #ffd700;}


/*====================================================
	2: -areaA(header)
====================================================*/
/*
	- common
----------------------------------------------------*/
h1 { width: 240px; height: 35px; margin: 0 auto; position: absolute; top: 32px; left: 14px;}
h1 a:hover  { background-color: #fff; /* IE6p */}
h1 a:hover img { visibility: hidden;}

/*
	- school ID:school
----------------------------------------------------*/
#school #areaA { width: 765px; height: 74px;  padding: 0; margin: 0 auto; position: relative; background: url(../c_img/bgAreaA.gif) no-repeat; border-bottom: 1px solid #24116F;}

#school h1 a { display: block; width: 240px; height: 35px; background: url(../c_img/logoDown.gif) 0 0 no-repeat;}

#school  #hN03 { display: block; width: 70px; height: 30px; background: url(../c_img/btSiteTop.gif) 0 0; padding: 0; margin: 0; overflow:hidden; position: absolute; top: 37px; left: 530px;}
/*\*//*/
 overflow:auto;
/**/
#school  #hN03 a { display: block; width: 70px; height: 30px;  text-indent: -9876em;}
#school  #hN03 a:hover { background: url(../c_img/btSiteTop.gif) -70px 0;}

#school #hN02 { display: block; width: 70px; height: 30px; background: url(../c_img/btContact.gif) 0 0; padding: 0; margin: 0; overflow:hidden; position: absolute; top: 37px; left: 605px;}
/*\*//*/
 overflow:auto;
/**/
#school #hN02 a { display: block; width: 70px; height: 30px;  text-indent: -9876em;}
#school #hN02 a:hover { background: url(../c_img/btContact.gif) -70px 0;}

#school #hN01 { display: block; width: 70px; height: 30px; background: url(../c_img/btAccess.gif) 0 0; padding: 0; margin: 0; overflow:hidden; position: absolute; top: 37px; left: 680px;}
/*\*//*/
 overflow:auto;
/**/
#school #hN01 a { display: block; width: 70px; height: 30px;  text-indent: -9876em;}
#school #hN01 a:hover { background: url(../c_img/btAccess.gif) -70px 0;}


/*
	- jr-high ID:jr
----------------------------------------------------*/
#jr #areaA { width: 765px; height: 74px;  padding: 0; margin: 0 auto; position: relative; background: url(../jr-high/c_img/bgAreaA.gif) no-repeat; border-bottom: 1px solid #247442;}

#jr h1 a { display: block; width: 240px; height: 35px; background: url(../jr-high/c_img/logoDown.gif) 0 0 no-repeat;}

#jr  #hN03 { display: block; width: 70px; height: 30px; background: url(../jr-high/c_img/btSiteTop.gif) 0 0; padding: 0; margin: 0; overflow:hidden; position: absolute; top: 37px; left: 530px;}
/*\*//*/
 overflow:auto;
/**/
#jr #hN03 a { display: block; width: 70px; height: 30px;  text-indent: -9876em;}
#jr  #hN03 a:hover { background: url(../jr-high/c_img/btSiteTop.gif) -70px 0;}

#jr #hN02 { display: block; width: 70px; height: 30px; background: url(../jr-high/c_img/btContact.gif) 0 0; padding: 0; margin: 0; overflow:hidden; position: absolute; top: 37px; left: 605px;}
/*\*//*/
 overflow:auto;
/**/
#jr #hN02 a { display: block; width: 70px; height: 30px;  text-indent: -9876em;}
#jr #hN02 a:hover { background: url(../jr-high/c_img/btContact.gif) -70px 0;}

#jr #hN01 { display: block; width: 70px; height: 30px; background: url(../jr-high/c_img/btAccess.gif) 0 0; padding: 0; margin: 0; overflow:hidden; position: absolute; top: 37px; left: 680px;}
/*\*//*/
 overflow:auto;
/**/
#jr #hN01 a { display: block; width: 70px; height: 30px;  text-indent: -9876em;}
#jr #hN01 a:hover { background: url(../jr-high/c_img/btAccess.gif) -70px 0;}


/*
	- senior-high ID:high
----------------------------------------------------*/
#high #areaA { width: 765px; height: 74px;  padding: 0; margin: 0 auto; position: relative; background: url(../c_img/bgAreaA.gif) no-repeat; border-bottom: 1px solid #24116F;}

#high h1 a { display: block; width: 240px; height: 35px; background: url(../senior-high/c_img/logoDown.gif) 0 0 no-repeat;}

#high  #hN03 { display: block; width: 70px; height: 30px; background: url(../senior-high/c_img/btSiteTop.gif) 0 0; padding: 0; margin: 0; overflow:hidden; position: absolute; top: 37px; left: 530px;}
/*\*//*/
 overflow:auto;
/**/
#high #hN03 a { display: block; width: 70px; height: 30px;  text-indent: -9876em;}
#high  #hN03 a:hover { background: url(../senior-high/c_img/btSiteTop.gif) -70px 0;}

#high #hN02 { display: block; width: 70px; height: 30px; background: url(../senior-high/c_img/btContact.gif) 0 0; padding: 0; margin: 0; overflow:hidden; position: absolute; top: 37px; left: 605px;}
/*\*//*/
 overflow:auto;
/**/
#high #hN02 a { display: block; width: 70px; height: 30px;  text-indent: -9876em;}
#high #hN02 a:hover { background: url(../senior-high/c_img/btContact.gif) -70px 0;}

#high #hN01 { display: block; width: 70px; height: 30px; background: url(../senior-high/c_img/btAccess.gif) 0 0; padding: 0; margin: 0; overflow:hidden; position: absolute; top: 37px; left: 680px;}
/*\*//*/
 overflow:auto;
/**/
#high #hN01 a { display: block; width: 70px; height: 30px;  text-indent: -9876em;}
#high #hN01 a:hover { background: url(../senior-high/c_img/btAccess.gif) -70px 0;}



/*====================================================
	3: -areaB(main)
====================================================*/
/*
	- common
----------------------------------------------------*/
h2 { clear: both; font-size: large; font-weight: bold; padding: 0 0 .3em .5em; margin: 0 auto;}
h3 { clear: both; font-weight: bold; font-size: 140%; margin: 0 0 5px 0;}

h4 { clear: both; font-weight: bold; font-size: 140%; margin: 0 0 5px 0;}
h4.center { text-align: center; padding: 0 0 1em 0;}

p { padding-bottom: 1em;}

#areaB img { display: block; padding: 1px; margin: 0 auto 0 auto;}

#areaB .text { display: block; margin: 1em 0 15px 0;}
#areaB .text:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
/*\*//*/
     #areaB .text {
         display: inline-table;
     }
 /**/

.grBox { width: 580px; background: #e9fee7; border: 1px solid #ccc; padding: .8em; margin: 0 auto 15px auto;}
.ylBox { width: 580px; background: #fcfed1; border: 1px solid #ccc; padding: .8em; margin: 0 auto 15px auto;}
.pkBox { width: 580px; background: #fff0f5; border: 1px solid #ccc; padding: .8em; margin: 0 auto 15px auto;}
.lineBox { width: 580px; background: #fff; border: 1px solid #ccc; padding: .8em; margin: 0 auto 15px auto;}
#areaB .text:after, .grBox:after, .ylBox:after, .pkBox:after, .lineBox:after
{ clear: both; content: "."; display: block; height: 0; visibility: hidden; overflow: auto;}
/*\*//*/
     #areaB .text, .grBox, .ylBox, .pkBox, .lineBox {
         display: inline-table;
     }
 /**/

#areaB .imageRight { display: block; float: right; margin: 5px 0 0 10px;}
#areaB .imageLeft { display: block; float: left; margin: 5px 10px 0 0;}
#areaB .imageCenter { display: block; clear: both; margin: 0 auto; padding: 0;}
#areaB .imageLarge img { padding: 2px; border: 1px solid #ccc;}

p.block { clear: both; display: block; line-height: 140%;}

#areaB ul, #areaB p { margin: .5em 0 .5em 0;}
#areaB li { padding: 0 0 .5em 1em;}
#areaB li ul li { padding: .3em 0 .2em 2em;}


.text140 { font-size: 140%;}
.textBold { display: inline; font-weight: bold; color: #666;}
.textGr { color: #247442;}
.textBl { color: #24116F;}

.rowBox { display: block; width: 600px; margin: 15px auto 20px auto;}
.rowBoxNum { display: block; margin: 15px auto 20px auto;}
.rowBox:after, .rowBoxNum:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
/*\*//*/
     .rowBox, .rowBoxNum {
         display: inline-table;
     }
 /**/
.row3 { display: block; width: 190px; float: left; padding: 0 3px; margin: 0;}
.row2 { display: block; width: 290px; float: left; padding: 0 3px; margin: 0;}
.rowBox .row3 img { margin: 0 auto;}

table.gray { width: 600px; border-spacing: 1px; background-color: #d5d5d5; color: #333;}
table.gray td, table.gray th { padding: 4px 2px;}
table.gray thead th { text-align: center; background: #F5F5F5; color: #666; border: 1px solid #fff; text-transform:uppercase; font-weight: bold;}
table.gray tbody tr { background-color:#fff; text-align:left; }
table.gray tbody tr.odd { background: #f9f9f9; border-top:1px solid #fff;}
table.gray tbody tr td { height: 50px; background: #FFF; border: 1px solid #fff;}
table.gray tbody tr.odd td { background: #f9f9f9; border-top:1px solid #fff;}

table.gray400 { width: 400px; border-spacing: 1px; background-color: #d5d5d5; color: #333; margin: 100px auto 200px auto;}
table.gray400 td, table.gray400 th { text-align: center; padding: 20px 0;}
table.gray400 thead th { text-align: center; background: #F5F5F5; color: #666; border: 1px solid #fff; text-transform:uppercase; font-weight: bold;}
table.gray400 tbody tr { background-color:#fff; text-align:left; }
table.gray400 tbody tr.odd { background: #f9f9f9; border-top:1px solid #fff;}
table.gray400 tbody tr td { height: 50px; background: #FFF; border: 1px solid #fff;}
table.gray400 tbody tr.odd td { background: #f9f9f9; border-top:1px solid #fff;}

.popUp { clear:both;}
.popUp table { margin: 0 auto 30px auto;}

/* ul/li/span Left Padding 2em*/
#areaB ul.announce { clear: both; display: block; list-style: none; line-height: 150%; padding: .5em 0 1em 0; border-top:  1px dotted #ccc;}
#areaB ul.announce li { border-bottom: 1px dotted #ccc; padding: .5em 80px;}
#areaB ul.announce span { display: inline; padding: 0 0 0 2em; line-height: 110%;}


/*
	- school ID:school senior-high ID:high
----------------------------------------------------*/
#areaB { width: 600px; margin: 20px auto 0 auto; padding: 0;}
#areaB .title { width: 600px; background: url(../News/img/bgTitle.gif) repeat-x; border-bottom: 5px solid #24116F; padding: 0 0 1px 0; margin: 0 auto 15px auto;}
#areaB .title span { display: block; color: #3a489e; padding: .3em 0 0 .5em;} 

#areaB .imageLarge { display: block; width: 480px; clear: both; margin: 20px auto 30px auto; color: #24116F;}

h3 { color: #24116F;}



/*
	- jr-high ID:jr
----------------------------------------------------*/
#jr #areaB { width: 600px; margin: 20px auto 0 auto; padding: 0;}
#jr #areaB .title { width: 600px; background: url(../News/img/bgTitle.gif) repeat-x; border-bottom: 5px solid #247442; padding: 0 0 1px 0; margin: 0 auto 15px auto;}
#jr #areaB .title span { display: block; color: #247442; padding: .3em 0 0 .5em;} 

#jr #areaB .imageLarge { display: block; width: 480px; clear: both; margin: 20px auto 30px auto; color: #247442;}

#jr h3 { color: #247442;}


/*====================================================
	4: -areaC(footer)
====================================================*/
/*
	- common
----------------------------------------------------*/
.btClose { display: block; width: 150px; height: 20px; margin: 30px auto 15px auto;}

#areaC .copy { width: 95%; padding: 0 ; margin: 0 5px 2px auto; text-align: right; color: #fff; line-height: 1.3em;  position: absolute; bottom: 0; right: 0;} 

/*
	- school ID:school
----------------------------------------------------*/
#school #areaC { clear: both; width: 765px; height: 150px; background: url(../c_img/bgAreaE.gif) 0 100% no-repeat;  position: relative; margin: 0 auto; padding: 0; font-size: .765em;}

/*
	- jr-high ID:jr
----------------------------------------------------*/
#jr #areaC { clear: both; width: 765px; height: 150px; background: url(../jr-high/c_img/bgAreaE.gif) 0 100% no-repeat;  position: relative; margin: 0 auto; padding: 0; font-size: .765em;}


/*
	- senior-high ID:high
----------------------------------------------------*/
#high #areaC { clear: both; width: 765px; height: 150px; background: url(../senior-high/c_img/bgAreaE.gif) 0 100% no-repeat;  position: relative; margin: 0 auto; padding: 0; font-size: .765em;}



/*====================================================
	5: -ect
====================================================*/

.goToTop { clear: both; display: block; width: 125px; height: 20px; background: url(../c_img/btGoToTop.gif) 0 0 no-repeat; padding: 0; margin: 30px 0 15px auto; overflow:hidden;}
/*\*//*/
 overflow:auto;
/**/
.goToTop a { display: block; width: 125px; height: 20px;  text-indent: -9876em;}
.goToTop a:hover { background: url(../c_img/btGoToTop.gif) 0 -20px;}

#oldPage .goToTop { display: block; width: 125px; height: 20px; background: url(../c_img/btGoToTop.gif) 0 0 no-repeat; padding: 0; margin: 30px auto 15px auto; overflow:hidden;}
/*\*//*/
 overflow:auto;
/**/



/*====================================================
	6: oldPage
====================================================*/
#oldPage { width: 100% border: none; margin:0 auto;}
#oldPage:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
/*\*//*/
     #oldPage {
         display: inline-table;
     }
 /**/

#oldPage #areaB { width: 100%; margin: 20px auto 0 auto; padding: 0;}
#oldPage #areaB table { width: 600px; margin: 0 auto;}

.pmPdf { display: inline; background: url(../News/img/pmPdf.gif) no-repeat 100% 0; padding: 0 18px 0 0;}
.soon { display: inline; color: #cccccc; background: url(../jr-high/c_img/pmTriangleGr.gif) no-repeat 0 100%; padding: 0 0 0 13px; margin-left: 20px;}