@charset "UTF-8";
/* CSS Document */

/* =====================================================================
*    0. Bace Color
*    ---
*         Funabi Magenta        #CC006A
*         Funabi Lte Blue       #33CCFF
*         Funabi Beige          #F8F7F1
*    ---
*    1.   Header
*    1.1. Global Menu
*    2.   Contents
*    2.1. Left Area
*    2.2. Center Area
*    2.3. Right Area
*    3.   Footer
*    3.1. Sitemap Area
*    3.2. Footer Area
* =================================================================== */

/* =====================================================================
*
*    1. Main Area
*
* =================================================================== */

.lower-wide div#container { width: 100%;}

.grid-wrapper { margin: 0 0 22px 244px; padding-right: 10px;}
.grid-container { min-height: 752px; padding: 56px 10px 0 89px; background-color: #F8F7F1; border: 1px solid #DDDDDD; border-top: 0;}

#grid-content { overflow: hidden; height: 0; }
#grid-content article { width: 380px; height: 220px; margin: 0 1px 1px 0; background: url(/juken/about/images/bg-staffbox.gif) 0 0 repeat; position: relative;}

#grid-content article p.student-img { width: 160px; height: 220px; position: absolute; top: 0; left: 0;}
#grid-content article dl { width: 220px; height: 220px; background-color: #FFFFFF; position: absolute; top: 0; right: 0;}
#grid-content article dt { width: 210px; padding: 16px 0 0 10px; font-size: 122%; font-weight: bold; float: left;}
#grid-content article dd { width: 178px; padding: 12px 11px 0; float: left; font-size: 77%; line-height: 1.4em;}
#grid-content article dd.passing { padding-top: 8px;}
#grid-content article dd.high-bg {}
#grid-content article p.btn { width: 80px; width: 380px; height: 18px; height: 220px; padding: 16px 10px 0 0; padding: 0; position: absolute; top: 0; right: 0;}
#grid-content article p.btn a { width: 380px; height: 220px; display: block;}
#grid-content article p.btn a:hover { height: 216px; border-top: 4px solid #CC006A;}
#grid-content article p.btn a img { padding: 15px 0 0 290px;}
#grid-content article p.btn a:hover img { padding: 11px 0 0 290px;}

#grid-content article.msg:hover p,
#grid-content article.msg:hover dl {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
}

#grid-content div.large {
/*	width: 316px;
*/}

/* aside */
.lower-wide div#container aside { width: 233px; float: left; position: absolute; top: 0; left: 7px;}

/* vertical line */
.lower-wide .vertical { position: absolute; top: 56px; left: 275px;}

/* sort navigation */
.lower-wide .sort-nav { width: 66px; position: absolute; top: 285px; left: 257px;}
.lower-wide .sort-nav li { width: 20px; padding: 1px; float: left;}

/* page transition */
.lower-wide ul.page-transition { width: auto; margin: 70px 10px 0 0; border-top: 1px solid #CCCCCC; padding: 0 0 3px;}
.lower-wide ul.page-transition li.next,
.lower-wide ul.page-transition li.prev { border-top: 0;}



/* ---------------------------------------
----          message iframe          ----
--------------------------------------- */
body.message { background: #EEEEEE;}

.message ul { width: 616px; height: 22px;}
.message ul li { float: right;}

article.msg-area { width: 596px; height: 436px; border: 1px solid #CCCCCC; padding: 21px; background: #FFFFFF;}

.student-info { width: 180px; float: left;}
.student-info h4 { font-size: 197%; font-weight: bold; padding-top: 20px; line-height: 1.0em;}
.student-info p.back_parent { padding-top: 18px;}
.student-info p.back_parent a { font-size: 77%;}
.scroll-pane { width: 388px; height: 436px; border: 1px solid #000; border: 0; overflow: auto;}
.scroll-pane h3 { font-size: 93%; font-weight: bold; padding: 3px 0 26px; line-height: 2.0em;}
.scroll-pane h2 { padding-bottom: 12px; font-size: 93%; font-weight: bold;}
.scroll-pane h2.profile { padding-bottom: 0;}
.scroll-pane p { padding: 0 12px 30px 0; font-size: 93%; line-height: 1.8em;}
.scroll-pane p.profile { padding-bottom: 20px; line-height: 1.8em;}
.scroll-pane p.profile span { color: #FFFFFF;}

/* ---- scroll panel ---- */

.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; float: right; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background-color: #DEDEDE; }
.jScrollPaneDrag { position: absolute; background: #666666; cursor: pointer; overflow: hidden; }
.jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; }
a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 9px; }
a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 9px; }