@charset "utf-8";

/* CSS Document */

/*--common--*/
* {
margin:0;
padding:0;
color:#333333;
font-family:Arial,Verdana, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
body {
text-align:center;
padding:0 0 3px;
font-size:0.8em;
line-height:140%;
background:#edf6d7 url(../images/bg.gif) center top no-repeat;
}
a img {border:none}
a {
color:#004477;
text-decoration:underline;
}
a:hover {
color:#004477;
text-decoration:none;
}
.link {
color:#004477;
}
li {list-style:none}
img {
border-style:none;
vertical-align:top;
}
table {border-collapse:collapse}
th,td {
border:1px solid #bebebe;
border-collapse:collapse;
vertical-align:middle;
_font-size:0.8em;
padding:2px 5px;
text-align:left;
}
th {
background:#efefef;
white-space:nowrap;
}
.clear {
clear:both;
visibility:hidden;
height:0;
width:0;
}
.clearB {clear:both}
.clearfix:after {
content:".";
display:block;
height:0; 
clear:both; 
visibility:hidden;
}
.nowrap {white-space:nowrap}
.imgRight {
float:right;
margin:0 5px 0 10px;
}


/*--layout--*/
#container {
width:800px;
margin:5px auto 0;
text-align:left;
}
#container h1 {
font-size:12px;
font-weight:normal;
}
ul#login {
text-align:right;
height:14px;
margin:0 0 12px;
}
#logo {
width:385px;
height:32px;
float:left;
background:url(../images/bg_logo.gif) left bottom no-repeat;
}
#logo h2 img {
width:248px;
height:20px;
margin:12px 0 0 137px;
display:block;
}
ul#tabs {
height:32px;
margin:0 0 0 145px;
float:right;
}
ul#tabs li {
float:left;
height:32px;
}
ul#tabs li img {
display:block;
}
ul#tabs li#tab01 {
width:119px;
height:32px;
margin:0 2px 0 0;
}
ul#tabs li#tab02 {
width:148px;
height:32px;
}
#flash,
#pagetitle {
width:800px;
height:180px;
clear:both;
}
#contents {
width:800px;
background:url(../images/bg_contents.gif) repeat-y;
}
ul#leftnav {
width:151px;
margin:0 0 200px 1px;
float:left;
border-bottom:1px solid #999999;
}
ul#leftnav ul li a {
_width:100%;
background:#f2f2f2;
display:block;
margin:0 0 0 3px;
padding:3px 3px 3px 12px;
text-decoration:none;
border-bottom:1px solid #999999;
border-right:1px solid #999999;
border-left:12px solid #cccccc;
color:#333333;
}
ul#leftnav ul li a:hover {
background:#efefef;
border-left:12px solid #999999;
color:#004477;
}
ul#leftnav ul li a strong {
color:#004477;
}
#main {
width:616px;
margin:15px 0 100px 15px;
float:left;
}
address {
clear:both;
text-align:center;
width:800px;
height:27px;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
line-height:2.1;
background:url(../images/bg_copyright.gif) left bottom no-repeat;
color:#ffffff;
display:block;
}
ul#footer {
float:right;
padding:5px 0 10px;
}
ul#footer li a {
color:#333333;
text-decoration:none;
}
ul#footer li a:hover {
text-decoration:underline;
}
.pdf-file {
background:url(../images/pdf.gif) no-repeat;
padding-left:20px;
}
.index p,
.intro p,
.job p,
.contact p,
.intro ul {
padding:0 5px .8em;
}
.location p {
padding:5px;
}
.intro table {
width:616px;
margin:0 0 15px;
}
.index h3,
.about h3,
.opinion h3,
.job h3,
.intro h3,
.application h3,
.links h3,
.textbooks h3,
.terms h3,
.location h3,
.contact h3 {
background:url(../images/bg_stylo.gif) left bottom no-repeat;
width:616px;
height:26px;
font-size:18px;
line-height:1.2;
color:#05146f;
margin:0 0 10px;
padding:0 0 0 32px;
}
.faq h3,
.intro h4,
.job h4,
.textbooks h4 {
background:url(../images/bg_orange.gif) left top no-repeat;
width:616px;
height:27px;
color:#ffffff;
margin:20px 0 5px;
padding:0 0 0 10px;
font-size:14px;
line-height:1.9;
clear:both;
}
.about h4 {
background:url(../images/icon_blue.gif) left 50% no-repeat;
font-size:12px;
margin:0 0 5px;
padding:0 0 0 21px;
}
.terms h4 {
background:url(../images/icon_blue.gif) left 50% no-repeat;
font-size:12px;
padding:0 0 0 21px;
}
.job h5 {
background:url(../images/icon_blue.gif) left 50% no-repeat;
font-size:12px;
margin:5px 0;
padding:0 0 0 21px;
}
.intro h5 {
font-size:12px;
padding:0 5px;
color:#990000;
}
.intro h6 {
font-size:12px;
padding:0 5px;
color:#006600;
}
.intro dl {
font-size:12px;
padding:0 5px 10px;
}
.intro dt {
font-weight:bold;
}
.box,
.staffbox {
width:616px;
background:url(../images/bg_box_bottom.gif) left bottom no-repeat;
margin:0 0 15px;
padding:0 0 6px;
}
.box dl,
.staffboxinfo {
width:616px;
padding:0;
background:url(../images/bg_box.gif) left bottom repeat-y;
}
.box dl dl {
width:600px;
background:none;
margin:5px;
}
.box dd {
padding:5px 10px 2px;
line-height:1.6;
}
.box dd ul {
margin:0;
padding:5px 0 0;
}
.box dl dl dt {
font-weight:bold;
}
.box dl dl dd {
padding:0;
}
.staffboxinfo img {
width:76px;
margin:0 10px 4px;
float:left;
}
.staffboxinfo dl {
width:500px;
float:left;
margin:5px 0 0;
}
.terms ol {
padding:2px 0 20px;
}
.job ol {
padding:0 0 10px;
}
.terms ol ol {
padding:3px 0 0;
}
.terms li {
margin:0 10px 10px 10px;
padding:0 0 0 1em;
text-indent:-1em;
}
.job li {
margin:0 10px;
padding:0 0 0 1.5em;
text-indent:-1.5em;
}
.terms li li {
margin:0;
padding:0 0 0 1em;
text-indent:-1em;
}
.about dl,
.about ul {
padding:2px 5px 20px;
}
.about li,
.about dd {
margin:0;
padding:0 0 .2em 1em;
text-indent:-1em;
}
.policy dl {
padding:0 0 15px;
}
dl.date {
width:345px;
float:left;
padding:0 0 15px;
}
.policy dt,
dl.date dt {
background:url(../images/icon_blue.gif) left 50% no-repeat;
padding:0 0 0 21px;
font-weight:bold;
}
.policy dd,
dl.date dd {
margin:0 0 0 21px;
}
dl.date dd.anotheryear {
margin:0 0 .8em 21px;
}
dl.date dd strong {
margin:0 0 0 3px;
color:#ff0000;
}
.job p.conclusion {
padding-top:30px;
}
#jobexample {
padding:0 10px 10px 10px;
}
#jobexample li {
white-space:nowrap;
float:left;
margin:0 15px 0 0;
}
.studensbox {
width:606px;
margin:0 0 35px 5px;
}
.studensbox img {
width:113px;
float:left;
margin:0 10px 0 0;
display:block;
}
.studensbox p,
.studensbox dl {
width:483px;
padding:24px 0 0;
float:left;
display:block;
}
.studensbox dt {
font-weight:bold;
}
.studensbox dd {
padding:.2em 0 1em;
}
img#flyer {
width:275px;
margin:0 0 15px;
float:left;
display:block;
}
.job pre {
width:320px;
float:right;
}
.job p {
clear:both;
}
#qa dl {
padding:5px 5px 20px ;
}
#qa dt,
#qa dd {
text-indent:-25px;
margin:0 0 5px;
padding:0 0 0 25px;
}
#qa dd ul,
#qa dd ol {
padding:0 0 3px 25px;
}
#qa dd.multi ol {
padding:0;
}
#qa dd.multi {
text-indent:0;
}
#qa dd.multi ul {
padding:0;
}
.schoolinfo dl {
padding:0 0 1.5em;
}
.schoolinfo dd {
padding:2px 0 0 2px;
}
.schoolinfo dl.telfax {
float:left;
width:189px;
margin:0 24px 0 0;
}
.curriculum {
width:307px;
float:left;
}
#descript {
border:3px double #FF6666;
background:#ffffdd;
width:610px;
margin:30px 0 0;
padding:10px 0 0;
clear:both;
}
#descript p {
padding-left:10px;
padding-right:10px;
}
#descript img {
float:right;
margin:0 10px 10px 5px;
}
#map {
width:616px;
height:400px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}
#delivery dl {
padding:0 5px 10px;
}
#delivery dt {
font-weight:bold;
color:#990000;
}
#delivery dd ul {
padding:.2em 0 0;
}
#delivery dd li {
padding:0 0 0 1.5em;
text-indent:-1.5em;
}
.contact form dt {
float:left;
width:190px;
text-transform:capitalize;
text-indent:30px;
font-weight:bold;
}
.contact form dd {
padding:0 0 0 190px;
}
.contact form input,
.contact form textarea {
display:block;
}
.contact form dl{
width:616px;
margin:0 0 2px;
padding:3px 0 10px;
background:url(../images/bg_inquiry.gif) left top no-repeat;
}
.contact form ul{
width:200px;
margin:5px 0 0 190px;
}
.contact form li{
float:left;
padding:0 5px 0 0;
}
.contact form textarea {
width:405px;
}
.links li {
margin:0 0 .3em;
}
.links li span {
color:#666666;
}
.sitemap li {
margin:0 0 1.3em 5px;
background:url(../images/icon_yellow.gif) left 1px no-repeat;
padding:0 0 0 22px;
}
.sitemap ul ul li {
margin:.2em 0 0;
background:none;
padding:0;
color:#004477;
}
p.caution {
border:3px double #666666;
padding:5px;
background:#f2f2f2;
}
.photos {
width:616px;
margin:0 0 15px;
}
#adobe {
padding:20px 0 0;
}
#adobe a {
font-size:11px;
text-decoration:none;
color:#666666;
}
#adobe a:hover {
color:#333333;
}
#adobe img {
width:112px;
margin:0 5px 0 0;
}
.TabbedPanels {
clear:none;
width:616px;
}
/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.TabbedPanelsTabGroup {
width:300px;
margin:0 0 25px;
float:left;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {
float:left;
width:300px;
margin:0 0 .3em;
list-style:none;
-moz-user-select:none;
-khtml-user-select:none;
cursor:pointer;
overflow:hidden;
}

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
color:#ff0033;
}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
color:#990000;
font-weight:bold;
}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.TabbedPanelsContentGroup {
float:right;
width:300px;
margin:0 0 25px;
}
#indexflash {
width:544px;
height:330px;
margin:15px auto;
}
#indexbox {
width:544px;
margin:0 auto 15px;
padding:0 0 10px;
background:url(../images/bg_indexbox.gif) left bottom;
text-align:left;
}
#english {
width:266px;
float:left;
}
#english h3 {
width:105px;
margin:0 0 0 2px;
float:left;
}
#english p {
padding:5px;
}
#japanese {
width:266px;
float:right;
}
#japanese h3 {
width:105px;
float:right;
}
#japanese p {
padding:5px 5px 5px 10px;
}
#japanese ul {
clear:both;
padding:0 0 0 10px;
}
#log {
width:408px;
margin:15px auto 0;
text-align:left;
}
#log h4 {
width:154px;
float:left;
}
#logbox {
width:254px;
height:161px;
background:url(../images/login_box.gif) right bottom no-repeat;
float:left;
}
#logbox h5 {
margin:0 0 15px;
}
.shadow input {
background:url(../images/login_bg.gif) repeat-x;
}
.centre {text-align:center}
#logbox td {padding:2px 3px 10px;border:none}
.loginerror {
width:408px;
clear:both;
font-weight:bold;
text-align:center;
}
.loginerror td {
color:#ff0000;
border:none;
text-align:center;
font-size:16px;
}
#youtubeBox {
width:616px;
text-align:center;
padding:5px 0 0;
}