@charset "utf-8";

@import url("base.css");

@import url("structure.css");

/*====================================================
------------------------------------------------------
	 main.css
------------------------------------------------------
====================================================*/

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

	1: pageImg
	
	2: common
	   - h2
		- h3
		- text
			- .w90Br
			- .w90
			- .w100Br
			- .w100Br
			- .s85Br
			- .s85
			
			
	*3: Top  ID:stop
	
	4: Introduction  ID:intro
	
	:areaE 
	  - copy

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

/*====================================================
	1: pageImg
====================================================*/

#stop #areaB { background: url(../img/pageImg.jpg);}

#pageImg { width: 175px; height: 295px; background: no-repeat; text-indent: -9876em; margin: -10px 0 0 0;}

#access #pageImg, 
#sitemap #pageImg, 
#sp #pageImg, 
#pp #pageImg, 
#contact #pageImg,
#link #pageImg  { background: url(../c_img/pageImg.jpg) no-repeat;}


#intro #pageImg { background: url(../Introduction/img/pageImg.jpg);}

/*====================================================
	2: common
====================================================*/
h2 { width: 545px; height: 25px; text-indent: -9876em; margin: 0 0 15px 0; background: no-repeat;} 
h3 { width: 545px; height: 30px; text-indent: -9876em; margin: 0 0 15px 0; background: no-repeat;} 


/*
  -text
====================================================*/
/*
	- w = width
	- s = font size
	- R = text align Right
*/	

p { padding: 0 0 .8em 0;}
.w90 { width: 90%;}
.s85 { font-size: .765em;}
.s85R { font-size: .765em; text-align: right;}
.w100R { width: 100%; text-align: right;}
.w100s85R { width: 100%; text-align: right; font-size: .765em;  }



/*====================================================
	3: Top  ID:stop
====================================================*/
#stop #areaA { width: 765px; height: 74px;  padding: 0; margin: 0 auto; position: relative; background: url(../c_img/bgAreaA.gif) no-repeat;}
#stop #areaStopSwf { width: 765px; height: 294px; background: url(../img/pageImg.jpg) 0 0; margin: 0 auto; padding: 0;}
#stop #areaCD { background: url(../img/bgTopAreaCD.gif) repeat-y;}
#stop #areaC { width: 565px;}
#stop .goToTop { margin: 0 10px 15px auto;} 

#stop #whatsNew { float: left; width: 325px; padding: 0 0 0 0;}
#stop #whatsNew h2.h2_00 { width: 315px; height: 20px; background: url(../img/s00_h2_00.jpg); margin-bottom: 5px;}
#stop #whatsNew h2.h2_01 { width: 315px; height: 20px; background: url(../img/s00_h2_01.jpg); margin-top: 15px; margin-bottom: 5px;}
#stop #whatsNew h2.h2_02 { width: 315px; height: 20px; background: url(../img/s00_h2_02.jpg); margin-top: 15px; margin-bottom: 5px;}

#stop #pickup { float: right; width: 240px;}
#stop #pickup h2.h2_03 { width: 230px; height: 20px; background: url(../img/s00_h2_03.jpg); margin: 0 0 0 auto;}

/*
	- Magazine
------------------------------------------------------------*/
ul.topMagazin { display: block; clear: right;  width: 240px; list-style-type: none; margin: 0 0 15px 0; padding: 0;}
ul.topMagazin li a,ul.topMagazin li a:hover { width: 240px; height: 95px; display: block; background: transparent; vertical-align: top; overflow:hidden; margin: 0; padding: 0;}
/*\*//*/
 overflow:auto;
/**/

ul.topMagazin li,  ul.topMagazin li a { width: 240px; height: 95px;}

ul.topMagazin li span, ul.topMagazin li a span { display: none;}

ul.topMagazin li#oMs01 a { background: url(../img/btTopGroundD.jpg) 0 0;}
ul.topMagazin li#oMs05 a { background: url(../img/btTopKidsCenter.jpg) 0 0;}
ul.topMagazin li#oMs02 a { background: url(../img/btTopVoriesA.jpg) 0 0;}
ul.topMagazin li#oMs03 a { background: url(../img/btTopCampusP.jpg) 0 0;}
ul.topMagazin li#oMs04 a { background: url(../img/btTopJrOpenC.jpg) 0 0;}
ul.topMagazin li#oMs06 a { background: url(../img/btTopHiOpenC.jpg) 0 0;}

ul.topMagazin li#oMs01 a:hover {  background: url(../img/btTopGroundD.jpg) -240px 0 ;}
ul.topMagazin li#oMs05 a:hover {  background: url(../img/btTopKidsCenter.jpg) -240px 0 ;}
ul.topMagazin li#oMs02 a:hover {  background: url(../img/btTopVoriesA.jpg) -240px 0 ;}
ul.topMagazin li#oMs03 a:hover {  background: url(../img/btTopCampusP.jpg) -240px 0 ;}
ul.topMagazin li#oMs04 a:hover {  background: url(../img/btTopJrOpenC.jpg) -240px 0 ;}
ul.topMagazin li#oMs06 a:hover {  background: url(../img/btTopHiOpenC.jpg) -240px 0 ;}


/*
	- Magazine New
------------------------------------------------------------*/
ul.topMagazin li#oMs01new a { background: url(../img/btNewTopGroundD.jpg) 0 0;}
ul.topMagazin li#oMs02new a { background: url(../img/btNewTopVoriesA.jpg) 0 0;}
ul.topMagazin li#oMs03new a { background: url(../img/btNewTopCampusP.jpg) 0 0;}
ul.topMagazin li#oMs04new a { background: url(../img/btNewTopJrOpenC.jpg) 0 0;}
ul.topMagazin li#oMs06new a { background: url(../img/btNewTopHiOpenC.jpg) 0 0;}

ul.topMagazin li#oMs01new a:hover {  background: url(../img/btNewTopGroundD.jpg) -240px 0 ;}
ul.topMagazin li#oMs02new a:hover {  background: url(../img/btNewTopVoriesA.jpg) -240px 0 ;}
ul.topMagazin li#oMs03new a:hover {  background: url(../img/btNewTopCampusP.jpg) -240px 0 ;}
ul.topMagazin li#oMs04new a:hover {  background: url(../img/btNewTopJrOpenC.jpg) -240px 0 ;}
ul.topMagazin li#oMs06new a:hover {  background: url(../img/btNewTopHiOpenC.jpg) -240px 0 ;}

ul.topMagazin li a p { width: 130px; font-size: .768em; line-height: 120%; padding: 0 0 0 0; margin: 50px 5px 0 auto;}


ul.topMagazin li a:link { color: #666; text-decoration: none;}
ul.topMagazin li a:visited { color: #333; text-decoration: none;}
ul.topMagazin li a:hover { color: #3a489e; }
ul.topMagazin li a:active { color: #3a489e;}





/*====================================================
	4: Introduction  ID:intro
====================================================*/
#intro .h2_00 { background: url(../Introduction/img/s01_h2_00.gif); margin: 30px 0 15px 0;}
#intro .h2_01 { background: url(../Introduction/img/s01_h2_01.gif);}
#intro .h2_02 { background: url(../Introduction/img/s01_h2_02.gif);}
#intro .h2_03 { background: url(../Introduction/img/s01_h2_03.gif);}

#intro .h3_00 { background: url(../Introduction/img/s01_h3_00.gif); margin: 0 0 30px 0;}
#intro .h3_01 { width: 370px;height: 170px;  background: url(../Introduction/img/s01_h3_00.gif);}

#intro p { padding: 0 0 1em 20px;}


#intro dl.rowBox {  display: block; width: 525px; margin: 0 0 15px auto; }
#intro dl.rowBox:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
/*\*//*/
     #intro dl.Box {
         display: inline-table;
     }
 /**/ 

#intro dl.rowBox dt { float: left; width: 110px; height: 170px; background: url(../Introduction/img/s01_00.jpg) no-repeat; text-indent: -9876em;}
#intro dl.rowBox dd { float: right; width: 390px; }

#intro dl.rowBox dt.length { float: left; width: 110px; height: 170px; background: url(../Introduction/img/s01_00.jpg) no-repeat; text-indent: -9876em;}
#intro dl.rowBox dd.lengthText { float: right; width: 390px; height: 170px; background: url(../Introduction/img/s01_h3_01.gif) no-repeat; text-indent: -9876em;}
#intro ul.ulLength { display: block; width: 90%; margin: 0 auto 1em auto;} 
#intro ul.ulLength li { padding: 0 0 .5em 0;}

#intro dl.rowBox dd.ja { float: left; width: 250px; color: #3a489e; font-size: 120%; line-height: 200%;}
#intro dl.rowBox dd.en { float: right; width: 250px; color: #515151; line-height: 260%; padding: 1.5em 0 0 0;}


#intro dl.history dt { font-weight: bold; color: #9f984d;}
#intro dl.history dd { padding: 0 0 1em 0;}
#intro dl.history dd img { display: block; float: right; margin: -2em 0 0 5px;}



/*====================================================
	 -areaE(footer)
====================================================*/
#areaE .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;}