/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * BACKGROUND COLOR
 */
 
/* ALL */
#container{ background-color:transparent; }

/* HEADER */
#header{ background-color:#FFF; }

	/* GLOBAL MENU */
	#global-menu{ background-color:#00479d; }

/* MAIN */
#main{ background-color:#FFF; }

/* FOOTER */
#footer{
	background-color:#00479d;
}

	#copyright{ color:#4c7eba; }

/* contents */


/* TABLE */
table.lines thead th{ background:#dfe9f1; }

table.lines th{ /*background:#eff5f9;*/ background-color:#f7f8f8; }

table.lines td{ background:#FFF; }



/*
 * TEXT COLOR
 */
html,
button,
input,
select,
textarea{
	color: #000;
}

a,
a:link{ color:#00479d; outline:none; }

a:hover{ /*color:#e18707;*/ text-decoration:none; }

#footer,
#footer a{ color:#FFF; }


/*
 * FONT / TEXT DEDAULT SETTING
 */

/* BASE */
body{
	font-family:Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 13px;
    line-height: 1.5;
}

	/* IE<=8 */
	.lt-ie9 body{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

/* Sefif */
#site-copy,
#top-subject li a .head,
.content-head,
.catch{
	font-family:Georgia, "Times New Roman", Times, "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}


/*
 * TABLE
 */

table{
	width:100%;
}

table.lines,
table.lines th,
table.lines td{
	border:1px solid #CCC;
}

table.lines th,
table.lines td{
	padding:8px;
}

thead th{
	text-align:center;
}


/*
 * FORM
 */

input,
select{
	vertical-align:middle;
}

textarea{
	resize: vertical;
	padding:5px;
}

input[type="text"],
input[type="password"],
textarea,
select{
	border:1px solid #CCC;
	font-size:14px;
}

input[type="text"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover{
	border-color:#64afff;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus{
	border-color:#64afff;
	box-shadow:0 0 3px rgba(100, 175, 255, 0.5);
}

input[type="text"],
input[type="password"]{
	padding-left:5px;
	padding-right:5px;
	height:28px;
	line-height:1;
}
/*IE6/7/8*/
.lt-ie9 input[type="text"],
.lt-ie9 input[type="password"]{
	line-height:28px;
}

input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"]{
	cursor:pointer;
}

.required{
	color:#C00;
}

.button{
	text-align:center;
}

.button a{
	display:inline-block;
	height:27px;
	padding:11px 20px 0;
	margin-left:10px;
	color:#FFF;
	font-size:16px;
	text-decoration:none;
	text-align:center;
	text-shadow:0 -1px 0 rgba(0,0,0,0.2);
	line-height:1;
	
	border-radius:3px;
	background-color:#3067b7;
	border-width:1px;
	border-style:solid;
	border-top-color:#4c7cc1;
	border-left-color:#4c7cc1;
	border-right-color:#2f66b4;
	border-bottom-color:#285798;	
}

.button a.ok,
.nav-button a.ok{
	background-color:#e18707;
	border-top-color:#e59728;
	border-left-color:#dd8407;
	border-right-color:#bb6f06;
	border-bottom-color:#bb6f06;
}

.button a:first-child{ margin-left:0; }

	.button a:hover{ opacity:0.8; filter:alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; }

.button span{
	margin-right:0;
}

.button span:first-child{
	margin-right:10px;
}

.message{
	display:table;
	margin:0 auto;
}

.error{
	color:#C00;
	margin-bottom:10px;
}

form .note{
	color:#999;
	font-size:12px;
}



body,
html{
	height:100%;
}


hr{
	display:block;
	height:0;
	border:0;
	border-top:1px solid #CCC;
	margin:1em 0;
	padding:0;
}

img{
	vertical-align: middle;
}

figure{
	margin:0;
	padding:0;
}

fieldset{
	border:0;
	margin:0;
	padding:0;
}

em,
strong{
	/*
	font-weight:bold;
	*/
}



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

#container{
	position:relative;
	min-height:100%;
	*height:auto !important;  
	*height:100%;
}

/*
 * HEADER
 */
#header{
	height:200px;
}

#header-inner{
	width:960px;
	height:140px;
	margin:0 auto;
}

	#site-name-group{
		position:relative;
		float:left;
		width:540px;
		height:115px;
		padding-top:25px;
	}
	
	#site-name a{
		display:block;
		width:294px;
		height:50px;
		/*
		height:0;
		padding-top:50px;
		overflow:hidden;
		background:url(../img/logo.png) center no-repeat;
		*/
	}
	
	#site-description{
		position:absolute;
		top:64px;
		left:64px;
		color:#29abf5;
		font-size:10px;
		line-height:1;
	}
	
	#site-copy{
		margin-top:20px;
		font-size:18px;
		font-family:/* ! */;
		line-height:1;
	}

#header-contact{
	position:relative;
	float:right;
	width:300px;
}

	#upstream{
		padding-top:20px;
		color:#555;
		font-size:12px;
		line-height:1;
	}
	
	#upstream ul{
		text-align:right;
	}
	
	#upstream li{
		display:inline-block;
	}
	
	#upstream li:before{
		content:" ";
		display:inline-block;
		width:10px;
		height:10px;
		margin:0 5px 0 10px;
		background:url(../img/arrow-forward-gray.png) center no-repeat;
		vertical-align:middle;
	}
	
	#upstream a{
		display:inline-block;
		color:#555;
		text-decoration:none;
		border-bottom:1px dotted #555;
	}
	
	#upstream a:hover{
		color:#e18707;
		border-bottom:none;
	}
	
	#header-contact-tel{
		margin-top:16px;
		font-size:24px;
		font-weight:bold;
		font-family:"Arial Bold", "Helvetica-bold", Arial, Helvetica, sans-serif;
		letter-spacing:1px;
		line-height:1;
	}
	
	#header-contact-tel address:before{
		content:" ";
		display:inline-block;
		width:20px;
		height:20px;
		background:url(../img/icon-tel.png) center no-repeat;
		margin-right:5px;
		vertical-align:middle;
	}
	
	#fb-like{
		position:absolute;
		top:50px;
		right:0;
	}
	
	#header-contact-form{
		margin-top:10px;
		font-size:0;
	}
	
	#header-contact-form li{
		display:inline-block;
		width:150px;
	}
	
	#header-contact-form a,
	.nav-button a{
		display:block;
		height:27px;
		padding-top:11px;
		color:#FFF;
		font-size:16px;
		text-decoration:none;
		text-align:center;
		text-shadow:0 -1px 0 rgba(0,0,0,0.2);
		line-height:1;
		
		border-radius:0 3px 3px 0;
		background-color:#3067b7;
		border-width:1px;
		border-style:solid;
		border-top-color:#4c7cc1;
		border-left-color:#4c7cc1;
		border-right-color:#2f66b4;
		border-bottom-color:#285798;
	}
	
	#header-contact-form li:first-child a,
	.nav-button.application a{
		border-radius:3px 0 0 3px;
		background-color:#e18707;
		border-top-color:#e59728;
		border-left-color:#dd8407;
		border-right-color:#bb6f06;
		border-bottom-color:#bb6f06;
	}
	
	#header-contact-form a:hover,
	.nav-button a:hover{ opacity:0.8; filter:alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; }


#global-menu{
	clear:both;
	background-color:/* ! */;
	font-size:0;
	text-align:center;
}

	#global-menu li{
		position:relative;
		display:inline-block;
		padding:15px 0;
	}
	
	#global-menu a{
		display:block;
		padding:8px 25px;
		border-left:1px dotted #FFF;
		color:#FFF;
		font-size:14px;
		text-decoration:none;
		line-height:1;
	}
	
	#global-menu li:first-child a{
		border-left:none;
	}
	
	#global-menu a:hover,
	#global-menu a.enter{
		color:#29abf5;
	}
	
	#global-menu .tree-wrapper{
		cursor:pointer;
	}
	
	#global-menu .tree{
		width:auto;
		padding:0;
		background-color:#29abf5;
		position:absolute;
		top:50px;
		left:50%;
		z-index:900;
		/*
		height:0;
		overflow:hidden;
		*/
		display:none;
	}
	
		#global-menu #tree-about{
			width:338px;
			margin-left:-169px;
		}
		
		#global-menu #tree-noukan{
			width:220px;
			margin-left:-110px;
		}
		
		#global-menu #tree-instructor{
			width:264px;
			margin-left:-132px;
		}
		
		#global-menu #tree-access{
			width:250px;
			margin-left:-125px;
		}
		
		#global-menu #tree-entrance{
			width:290px;
			margin-left:-145px;
		}
	
	#global-menu .tree li{
		float:left;
		margin:15px 0;
		padding:0 20px;
		border-left:1px solid #FFF;
	}
	
	#global-menu .tree li:first-child{
		border-left:none;
	}
	
	#global-menu .tree a{
		padding:0;
		border-left:none;
		border-bottom:1px dotted #29abf5;
		font-size:12px;
	}
	
	#global-menu .tree a:hover{
		color:#FFF;
		border-bottom-color:#FFF;
	}

	.arrow-up-gm-tree{
		width:18px;
		height:16px;
		background:url(../img/arrow-up-gm-tree.png) center no-repeat;
		position:absolute;
		top:39px;
		left:50%;
		margin-left:-9px;
		
		display:none;
	}


/*
 * MAIN
 */

#main{
	padding-bottom:502px;
}

#contents{
	width:960px;
	margin:0 auto;
}

#contents:after{ content:" "; display:block; height:0; overflow:hidden; clear:both; }

#breadcrumbs{
	padding:25px 10px;
	color:#999;
	font-size:10px;
	line-height:1;
}

#main-contents{
	float:right;
	width:700px;
}

.content{
	margin-top:30px;
}

.content:first-child{
	margin-top:0;
}


.content-header{
	position:relative;
	height:35px;
	margin-bottom:25px;
	border-bottom:5px solid #DDD;
}

.content-header:after{
	content:" ";
	display:block;
	width:320px;
	height:5px;
	background-color:#00479d;
	position:absolute;
	bottom:-5px;
	left:0;
}

.content-head{
	padding-top:10px;
	padding-left:10px;
	color:#00479d;
	font-size:18px;
	font-family:/* ! */;
	line-height:1;
}

.content-body{
	margin:0 10px;
}

.content-more{
	position:relative;
	float:right;
	margin-top:2px;
	font-size:13px;
	line-height:1;
}

.content-more a:after{
	content:"▼";
	display:block;
	color:#00479d;
	position:absolute;
	top:15px;
	left:20px;
}

.content-more a{
	display:block;
	height:28px;
	padding:15px 20px 0 38px;
	border:1px solid #DDD;
	color:#000;
	text-decoration:none;
}

.content-more a:hover{
	background-color:#f7f8f8;
}

#article-image{
	text-align:center;
}



.nav-button{
	margin:50px auto 0;
	text-align:center;
}

.nav-button li{
	display:inline-block;
}

	.nav-button a{
		min-width:140px;
		padding-left:20px;
		padding-right:20px;
		border-radius:3px;
	}
	
	/* #header-contact-form a + .button a の流用 */



/*
 * SIDE
 */

#side-contents{
	float:left;
	width:240px;
}


	#side-contents.fixed{
		position:fixed;
		top:18px;
	}
	
	#side-contents.bottom{
		position:absolute;
		top:auto;
		bottom:390px;
	}


.side-menu:first-child{
	margin-top:-8px;
}

.side-menu-header{
	margin-top:10px;
}

.side-menu:first-child .side-menu-header{
	margin-top:0;
}

.side-menu-head{
	padding-bottom:2px;
	border-bottom:1px solid #DDD;
	color:#999;
	font-size:13px;
	line-height:1;
}

.side-menu li{
	margin-top:10px;
}

.side-menu li a{
	display:block;
	height:29px;
	padding:15px 12px 0;
	border:1px solid #DDD;
	background-color:#f7f8f8;
	background-position:211px center;
	background-repeat:no-repeat;
	color:#000;
	text-decoration:none;
	line-height:1;
}

	.side-menu li.active a{
		border-color:#c0d0e1;
		background-color:#eff5f9;
		background-image:url(../img/arrow-forward-btn-black.png);
	}

.side-menu li:not(.active) a:hover{ opacity:0.7; filter:alpha(opacity=70); -ms-filter: "alpha( opacity=70 )"; }

#side-banner li{
	margin-top:10px;
}
	
	#side-banner li.sep:before{
		content:" ";
		display:block;
		width:100%;
		height:1px;
		background-color:#DDD;
		margin-bottom:10px;
	}

#side-banner li a{
	position:relative;
	display:block;
	width:186px;
	height:29px;
	padding:15px 12px 0 40px;
	border:1px solid #DDD;
	background-color:#f7f8f8;
	background-position:center;
	background-repeat:no-repeat;
	color:#000;
	/*
	font-size:0;
	*/
	text-decoration:none;
	line-height:1;
}

	#side-banner li a:after{
		content:" ";
		display:block;
		width:20px;
		height:32px;
		background-position:center;
		background-repeat:no-repeat;
		background-image:url(../img/arrow-forward-shape-gray.png);
		position:absolute;
		top:50%;
		margin-top:-16px;
		left:9px;
	}

	#side-banner li.request a:after{
		background-color:#00739d;
	}
	
	#side-banner li.kengaku a:after{
		background-color:#32b5aa;
	}
	
	#side-banner li.gansho a{
		height:auto;
		padding:5px 12px 5px 40px;
	}
	
	#side-banner li.gansho a:after{
		background-color:#32b569;
	}
	
	#side-banner li.inverse a{
		background-color:#6eadd1;
		border-color:#6eadd1;
		color:#FFF;
	}
	
	#side-banner li.inverse a:after{
		background-image:url(../img/arrow-forward-btn-white.png);
	}
	
	#side-banner li.facebook a,
	#side-banner li.blog a,
	#side-banner li.kango a,
	#side-banner li.keizaikai a{
		width:238px;
		padding:0;
		height:44px;
		overflow:hidden;
	}
	
	#side-banner li.facebook a img,
	#side-banner li.blog a img,
	#side-banner li.kango a img,
	#side-banner li.keizaikai a img{
		margin-left:-21px;
	}

	#side-banner li.facebook a{
		border-color:#1f4189;
	}
	#side-banner li.facebook a img{
		margin-top:-8px;
	}
	
	#side-banner li.blog a img{
		margin-top:-8px;
	}
	
	#side-banner li.keizaikai a{
		border-color:#867510;
	}
	
	#side-banner li.banner a:after{
		display:none;
	}
	
	
	
	#side-banner li a .head{
		display:inline-block;
		width:200px;
		font-size:16px;
		vertical-align:middle;
	}
	
	#side-banner li.gansho a .head{
		width:148px;
	}

#side-banner a:hover{ opacity:0.7; filter:alpha(opacity=70); -ms-filter: "alpha( opacity=70 )"; }



/*
 * BOTTOM
 */

#bottom-contents{
	clear:both;
	padding-top:30px;
}


/*
 * FOOTER
 */

#footer{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:452px;
	line-height:1;
	
	background:;/* ! */
	color:/* ! */;
}

#footer-inner{
	padding-top:30px;
	width:960px;
	margin:0 auto;
}

#footer-sitemap{
	width:880px;
	margin:0 auto;
}

.lt-ie9 #footer-sitemap{ width:900px; }

#footer-sitemap a,
#footer-sitemap-other a{
	border-bottom:1px dotted #00479d;
	text-decoration:none;
}

#footer-sitemap dd a,
#footer-sitemap-other a{
	margin-left:20px;
}

#footer-sitemap li{
	margin-top:2px;
}

#footer-sitemap li:first-child{
	margin-top:0;
}

#footer-sitemap dt{
	display:inline-block;
	width:138px;
	padding:8px 0;
	border:1px solid #4c7eba;
	text-align:center;
	line-height:1;
}

#footer-sitemap dd,
#footer-sitemap dd li,
#footer-sitemap-other li{
	display:inline-block;
}

#footer-sitemap dd ul{
	font-size:0;
}

#footer-sitemap dd li,
#footer-sitemap-other li{
	margin-left:20px;
	font-size:13px;
}

#footer-sitemap dd li:first-child,
#footer-sitemap-other li:first-child{
	margin-left:0;
}

#footer-sitemap dd li:before,
#footer-sitemap-other li:before{
	content:"|";
}

#footer-sitemap dd li:first-child:before,
#footer-sitemap-other li:first-child:before{
	display:none;
}

#footer-sitemap dd a:hover,
#footer-sitemap-other a:hover{
	border-bottom-color:#FFF;
}

#footer-sitemap-other{
	margin-top:30px;
	text-align:center;
}

#footer-contact{
	width:880px;
	margin:30px auto;
	padding-top:30px;
	border-top:1px solid #4c7eba;
}

#footer-contact dl{
	margin:0 auto;
	text-align:center;
}

#footer-contact dt,
#footer-contact dd{
	display:inline-block;
}

#footer-contact address{
	display:inline-block;
	margin-left:20px;
}

#copyright{
	display:block;
	width:960px;
	margin-top:30px;
	border-top:/* ! */;
	text-align:center;
	font-size:12px;
	color:/* ! */;
}



/*-----IE6-----*/
#lt-ie7-disabled{
	width:800px;
	padding-left:20px;
	margin:50px auto;
	text-align:center;
}

#lt-ie7-disabled ul{
	margin-top:50px;
}

#lt-ie7-disabled li{
	float:left;
	width:180px;
	margin-right:20px;
}

/*footer aleart*/
#footer-contact .site_alert{
	line-height:1.6em;
	padding:5px 30px;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir{
	font:0/0 a;
	text-shadow:none;
	color:transparent;
	*text-indent:-9999px;/*IE<=7*/
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden{
	display:none !important;
	visibility:hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden{
	border:0;
	clip:rect(0 0 0 0);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus{
	clip:auto;
	height:auto;
	margin:0;
	overflow:visible;
	position:static;
	width:auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible{
	visibility:hidden;
}
#footer-contact p{
	text-align:center;
	line-height:32px;
}
#site-description .ui_font_small{
	font-size:0.3em;
}
.ui_font_small{
	font-size:0.5em;
}
#top-subject-noukan .ui_mergin_left{
	padding-left:20px;
	display:inline-block;
}
#top-subject-noukan .ui_font_small{
	position:absolute;
}
/*
 * Clearfix: contain floats
 */

/*
.clearfix:before,
.clearfix:after{
	content:" ";
	display:table;
}

.clearfix:after{
	clear:both;
}

.clearfix{
	*zoom:1;
}
*/
.clearfix:after{ content:" "; display:block; height:0; overflow:hidden; clear:both; }

/*********************************************************************************************/

.em{
	color:#C00;
}

/*********************************************************************************************/

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
   
@media only screen and (max-width: 1200px){
	
	#blog{
		display:none;
	}
	
}

@media only screen and (max-width: 980px) {
	body,
	html{
		height:auto;
	}
	
	img{
		-webkit-user-select: none;
	}
	
	#container{
		width:980px;
		min-height:1300px;
	}
}
@media screen and (max-device-width: 480px) {



}
@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}