@charset "UTF-8";

/* #header{background:url(images/hello.png) no-repeat 72% top;} */
#header .text{background:rgba(255,255,255,0.9);}

/* news in the top */
#news{clear:both;width: 100%;position:relative;height:360px;overflow:hidden;background:#FBEAD8}
#news div.wrapper{width:60.1%;margin: 0 39.9% 0 0;overflow:hidden}
#news img.attachment-full{width:100%;height:auto;z-index:-1;}
#news div.topevent{position:relative;padding: 10px 5%;}
#news div.events{width:60.1%;background:rgba(251,234,216,0.9);
	/*IE8*/filter:progid:DXImageTransform.Microsoft.Gradient
		(GradientType=0,StartColorStr=#99000000,EndColorStr=#99000000);
	position:absolute;bottom:0;z-index:1;color:#920}
#news div.events > ul a{color:#000;text-decoration:underline}
#news div.events > ul a:hover, #news div.events h3 a:hover{color:#f93}
#news div.notification, #news div.finished{	position:absolute;
	height:300px;z-index:2;top:0;padding:10px 0;
	right:0;width:39.9%;height:170px}
#news div.finished{top:170px}
#news .more{position:absolute; bottom: 0px;right:5%;font-size:0.8em;}
#news h2{font-size:1.2em;margin-bottom: 0.8em;color:#000}
#news h3{font-size:1.0em;padding: 0 5%;}
#news ul{font-size:0.9em;line-height:1em; padding-bottom: 5px;}
#news li{padding:0.2em 5%;white-space:nowrap;
	overflow:hidden;-o-text-overflow:ellipsis;-webkit-text-overflow:ellipsis;text-overflow:ellipsis;}
#news div.events ul{padding-bottom:10px}
#news div.events h3{padding-top:10px}

/* panels in the top */
#panel{
	background:#fbead8;
	min-height:20em;
	display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;
	-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	-ms-justify-content:space-between;
	-o-justify-content:space-between;
	justify-content:space-between;}
#panel > div{
	clear:both\9;/*IE8*/
	background-color:#fff;width:29.1%;min-height:3em;padding: 1em 2% 1.5em 2%;
	float:left;/*IE*/
	overflow:hidden;position:relative;z-index:4;
	border:1px solid #F4d2b8;border-width:0 0 1px 1px}
#panel h3{color:#000;background:url(images/icon-link.png) no-repeat 0.2em 0.5em;padding-left:1.6em;font-size: 0.9em;margin:0.5em 0}
#panel h3 a{color:#000}
#panel h3 a:hover{color:#f93}
#panel ul{line-height:1.3em}
#panel li{float:left;padding:4px 8px;background-color:#fbead8;display:block;border:#fff 2px solid}
#panel li > ul > li{background:#fdb;}
#panel .alignmiddle{height:52px;width:52px;left:0;right:0;margin:auto}
#panel .icon img{width:50px;position:relative;display:block;float:left}
#panel .icon img.right{float:right}

/* tables in the sample class schedules */
.optional,.option{background:#fea}
.compul-opt{background:#fc7}
.compul-elec{background:#fba}
.compul{background:#f98;}
td.others{border:#fff 2px solid}
.balloon{display: none;
	width:200px;
	position: absolute;
	top: 1.5em;
	left: 0em;}
table.timetable{width:100%;min-width:600px}
table.timetable a{color:#620}
table.timetable a:hover{color:#fff;position:relative;font-weight:bold}
td.others a{color:#fcebd9}
table.timetable td.optional a:hover{color:#000}
table.timetable tbody td{min-width:5em}
table.timetable tbody th{height:5em}
a:hover .balloon{display: block;
	background-color:#432;padding:0.5em;color:#ffffff;}

table.subjects{width:100%}
table.subjects tbody th{font-weight:normal}
table.subjects .instructor{min-width:5em}
table.sucjects th, table.subjects td{max-width:100px}

#sidebar .QandA{border:1px solid #c60;padding:0}
#sidebar .QandA label{text-decoration:none;font-size:1em;padding-top:1em}
#sidebar .QandA ul{line-height:1em;font-size:0.9em;padding:1em 0}
#sidebar .QandA li{margin:0}


@media screen and (min-width: 1px) {
.ie9 #panel div{clear:both}
#panel ul{width:100%;}
.ie9 #panel > ul{height:6.5em;width:78%;clear:none;
	padding:0;padding-left:2%;padding-top:0.5em;border-bottom:1px solid #F4d2b8}
#panel label{display: block;}
.ie9 #panel label{display:none}
input[type="radio"].on-off + ul{height:0;overflow:hidden;}
input[type="radio"].on-off:checked + ul{height:auto;
	padding:0.5em 5%;border-bottom:1px solid #F4d2b8;clear:both;}
}

/****************************************
          Responsive Factors
*****************************************/

@media screen and (max-width: 1023px) {
table.subjects .instructor{width:3em}
}

@media screen and (max-width: 599px) {
#header{background-position: left 80px;
	background-size:50%}
#news{height:640px;font-size:13.5px}
#news div.wrapper{width:100%; height:300px;position:relative}
#news div.topevent h2{margin:0;	margin-right:5em;
	max-height:3em; overflow:hidden}
#news div.events{
	width:100%; overflow:hidden;
	margin:0; padding:0; padding-top:10px; bottom:0; left:0;}
#news div.notification,
#news div.finished{width:100%; left:0; margin:0; padding:10px 0}
#news div.notification{top:300px; height:140px;}
#news div.finished{top:470px; height:140px; border-top:1px solid #000}
#news .more{top:0}

#panel div{width: 96.6%}
	
table.subjects th,table.subjects td{display:inline-block;margin:0;padding:4px 5px 1px 5px;border:none;text-align:left;font-weight:normal;max-width:96%;line-height:1.3em}
table.subjects .float-none{clear:both;width:100%}
table.subjects thead td{background:#ccc}
table.subjects td,table.subjects th{float:left}
table.subjects th.code{display:table-cell;width:5em;text-align:center;float:none}
table.subjects th.period{width:4em}
table.subjects tr{border-bottom:2px #620 solid}
table.subjects tr:before{content:"";display:inline-block;height:1px;width:100%}
table.subjects .period, table.subjects .category, table.subjects .term{padding-top:10px}
table.subjects .title{font-weight:bold;padding-top:10px}
table.subjects .instructor{width:auto;clear:both}
table.subjects .alloc{}
table.subjects .affil{padding-left:0}
table.subjects .affil:before{content:"("}
table.subjects .affil:after{content:")"}
table.subjects tbody .alloc:before{content:"【配当】"}
}