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

/*=========================================================
 *
 *	css file for "http://utanohoshi.com/"
 *	file name : rwd/pc.css	
 *
=========================================================*/

/*@media screen and (min-width: 1000px) {*/


html,body{position:relative;height:100%;}

	.pc_show { display: block; }
	.pc_hide { display: none; }	

img {
    height: auto;
    width: auto;
}

/* reset
---------------------------*/
body,h1,h2,h3,h4,h5,h6,div,p,table,th,td,ul,li,dl,dt,dd,fieldset,address,strong,em,img{
	margin:0;
	padding:0;
	color:#333;
	font-weight:normal;
	font-style:normal;
	line-height:140%;
	list-style:none;
	vertical-align:top;
	border:none;
	border-spacing:0;
	border-collapse:collapse;
	zoom:1;
	font-size: 16px;
}
 html, body {
height: 100%;
}

html>/**/body{
	overflow-y:scroll;
}
html:first-child body{
	min-height:100%;
}
table{
	width:100%;
}
li{
	display:list-item;
	zoom:normal;
}
img,a img{
	font-size:0%;
	line-height:0%;
	vertical-align:bottom;
	background:transparent;
}
object,embed{
	vertical-align:top;
}


.clearfix:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
	


/* base
-------------------------------------------------- */
body {
	font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


#header{
	background-color: #000;
}

#container {
	width: 100%;
}

#keyvisual{
	width: 985px;
	margin: 0 auto;
	text-align: center;
}

#gnavi{
	background-color: #7092be;
}

#gnavi ul{
	width: 985px;
	margin: 0 auto 40px auto;
}
#gnavi ul li{
	width: 324px;
	display: inline-table;
	text-align: center;
	font-size: 140%;
}
#gnavi ul li.top{
	width: 326px;
}
#gnavi ul li a{
	display:block;
	width: 324px;
	height: 55px;
	padding: 20px 0 0 0;
     color: #fff;
	vertical-align: middle !important;
	text-decoration: none;
	background-color: #7092be;
}

#gnavi ul li.top a{
	width: 326px;
}

#topPage #gnavi ul li.top a,
#classPage #gnavi ul li.class a,
#schedulePage #gnavi ul li.schedule a,
#gnavi ul li a:hover{
	background-color: #3067ae;
}


#contents{
	width: 985px;
	margin: 0 auto;
}
#leftArea{
	width: 210px;
	float: left;
}
#rightArea{
	width: 740px;
	float: right;
}

.topintro{
	text-align: center;
}



#blackboard{
	word-break:break-all;
	color:#fff;background-color:#140;
	margin:0 5px 40px 5px;
	padding:30px;
	border:8px solid #a60;
	border-radius:3px;
	box-shadow:2px 2px 4px #999,2px 2px 2px #020 inset;
	text-shadow:0px 0px 2px #000;
}
#topintro{
	font-size: 225%;
	color: #fff;
	margin: 0 0 20px 0;
}



#blackboard h2{
	color: #fff;
	font-size: 225%;
	font-weight: bold;
	margin: 0 0 10px 0;
}

#blackboard p.read{
	margin: 0 0 20px 0;
}
	

#location,
#class,
#whats{
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	border-bottom: 1px dotted #fff;
}


#blackboard h3{
	color: #fff;
	font-size: 130%;
	margin: 0 0 5px 0;
}


#blackboard p{
	color: #fff;
}

.history{
	margin: 0 0 40px 0;	
}

#schedulePage #topintro h1,
#classPage #topintro h1{
	margin: 0 0 20px 0;
	padding: 10px;
	background-color:#eaf2fb;
	color: #7092be;
	font-size: 68%;
	border: 1px solid #7092be;
}
	
.navigator h2,
#classinfo h2,
.history h2{
	margin: 0 0 20px 0;
	padding: 10px;
	background-color:#7092be;
	color: #fff;
	font-size: 140%;
}

.history table{
	width: 100%;
}
.history table th{
	width: 20%;
	padding: 3%;
	border-bottom: 1px dotted #7092be;
	background-color: #eaf2fb;
}
.history table td{
	padding: 3%;
	border-bottom: 1px dotted #7092be;
}

#order{
	margin: 0 0 40px 0;	
	padding: 10px;
	border: 1px solid #7092be;
	background-color: #eaf2fb;
}

#content{
	margin: 0 0 20px 0;
	padding: 10px;
	background: #7092be;
}

#content h2{
	margin: 0 0 5px 0;
	padding: 10px;
	background-color: #fff;
	font-weight: bold;
	text-align: center;
}

#content p{
	padding: 10px;
	background-color: #fff;
	font-size: 90%;
}

#calendar{
	margin: 0 0 20px 0;
}


#content p.email{
	margin: 0 0 1px 0;
}


#footer{
	padding: 50px 0 0 0;
	clear: both;
}

#footer p{
	background: #7092be;
	padding: 30px 0 10px 0;
	color: #fff;
	text-align: center;
}

#classinfo .box{
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
	border-bottom: 1px dotted #7092be;
}

#classinfo .name{
	width: 200px;
	float: left;
	padding: 20px;
	background-color: rgb(51, 102, 102);
}

#classinfo .name h3{
	font-size: 110%;
	color: #fff;
}

#classinfo .name h3 .na{
	color: #fad163;
}

#classinfo .info{
	float: right;
	width: 485px;
}

.navigator .box{
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
	border-bottom: 1px solid #7092be;
}


.navigator .box .img{
	margin: 0;
	padding: 0;
	width: 150px;
	float: left;
}
.navigator .box .img img{
	width: 150px;
	height: 150px;
}

.navigator .box .info{
	width: 570px;
	float: right;
}

.navigator .box .info h3{
	font-weight: bold;
	margin: 0 0 10px 0;
}

.navigator .box .info p.read{
	margin: 0 0 10px 0;
}
.navigator .box .info p.messages{
	color: rgb(51, 102, 102);
}

#schedulePage #rightArea #main{
	margin: 0 0 40px 0;
}

#schedulePage #rightArea .facebook{
	float: left;
	width: 490px;
}

#schedulePage #rightArea .timeline{
	float: right;
	width: 250px;
}

/*}*//* end media*/