@charset "UTF-8";

/* Micro clearfix */

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }


html {
	font-size: 62.5%;
	/* 62.5%を指定すると「1.0 rem = 10px」 */
font-family:"Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"ヒラギノ角ゴ Pro W3","メイリオ", Meiryo,"ＭＳ Ｐゴシック",verdana,sans-serif;
}

body {
	margin: 0;
	padding: 0;
}
p	{
	margin: 0 0 1em;
	color: #444;
	font-family:"Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"ヒラギノ角ゴ Pro W3","メイリオ", Meiryo,"ＭＳ Ｐゴシック",verdana,sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.4;
	text-align: left;
}
a	{
	/* color:#2980b9; */
	color:#f37818;
	text-decoration:none;
}
hr	{
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:1px dotted #ddd;
}
img	{
	width:100%;
	height:auto;
}
img.pdf_icon	{
	width:48px;
	height:48px;
}
img.menu_btn	{
	width:100px;
	height:25px;
	margin-top:-10px;
}
img.qr_code	{
	width:100px;
	height:auto;
}
h1	{
	font-weight:400;
}
h2	{
	font-size:16px;
	font-size:1.6rem;
	font-weight:550;
	margin:0;
	padding:0px 0px 7px 0px;
}
h3	{
	font-size:14px;
	font-size:1.4rem;
	font-weight:550;

}

table {
	width:100%;
	border-collapse:collapse;
}

table th {
	padding:5px;
	font-size:14px;
    font-size:1.4rem;
	color:#fff;
	text-align:left;
	border:1px solid #ddd;
	/*background:#7fb310;*/
	background:#7E7E7E;
}

table td {
	padding:5px;
	font-size:14px;
    font-size:1.4rem;  
	text-align:left;
	border:1px solid #ddd;
	vertical-align:top;
}

dt {
   margin-bottom:3px;
   font-size:12px;
    font-size:1.2rem;  
}

dd {
	font-size:12px;
	font-size:1.2rem;  
	padding:0;
	margin:0 0 0.5em 1em;
	padding:3px;
   	background:#E6E6E6;
   	line-height:1.4em;
}
/*----- header -----*/
header	{
	margin:0 auto;
	width:100%;
	border-bottom:1px dotted #ddd;
}
.logo	{
	width:220px;
	height:auto;
	margin:10px 20px;
}
#header_right {
	display:none;
}


/*----- nav メニュー -----*/
.tog-menu	{
	display:none;
}
.menu-btn	{
	font-size:14px;
	font-size:1.4rem;
	padding: 10px 20px;
	background:white;
	color: #2980b9;
	text-align: center;
	border-bottom:1px solid #ddd;
}
nav {
	background-color: white;
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background:white;
}
nav ul li {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 13px;
	font-size: 1.3rem;
	padding: 9px 0px;
	color:blue;
}
nav li a	{
	color:#2980b9;
	text-decoration:none;
	display: block;
	padding:9px 0px;
	margin:-9px 0px;
	border-bottom:1px solid #ddd;

}
nav li a:hover	{
	display: block;
	color:white;
	background-color:#2980b9;
	padding:9px 0px;
	margin:-9px 0px;
}
nav li a.active	{
	display: block;
	color:white;
	background-color:#2980b9;
	padding:9px 0px;
	margin:-9px 0px;
}

/*----- camera -----*/
.fluid_container {
	margin: 0 auto;
	max-width: 100%;
	width: 100%;
	border-top:2px solid #ddd;


}
.camera_caption	{
	font-size:1.4rem;
	font-size:14px;
	line-height:1.5em;
	color:#fff;
}
.camera_caption	a {
	color:#2980b9;
}

#wrap-contents	{
	width:90%;
	margin:0 auto;	
}

article	{
	margin-top:30px;
}

article	h2 {
	border-bottom:1px solid #d4d4d4;
	margin-bottom:10px;
}

.index_top_h1	{
		font-size:18px;
		line-height:1.5em;
	}

#info_index	{

}
#info_index	h2 {
	border-bottom:1px solid #d4d4d4;
}
#info_index	ul,li {
	font-size:12px;
	font-size:1.2rem;
	line-height:1.5em;
}
#info_index	li	{
	margin:2px 5px 2px -25px;
}
#kitamachi_kuukan	｛

｝
#kitamachi_kuukan h2 {
	border-bottom:1px solid #d4d4d4;
}

#access_info h2 {
	border-bottom:1px solid #d4d4d4;
}

/* 各ページ */
#wrap_top_headling	{
	background-color:#2980b9;
}
#top_headling	{
	padding:10px;
}
#top_headling h1	{
	font-size:24px;
	font-weight:400;
	color:#fff;
	
}

div#map_about  {
    margin: 0 0 2em;
}
div#map_about iframe {
    width:100%;
    max-width: 100%;
}

/* ---- main and sub ---- */
div#main	{

}
/*
#main	ul	{
	list-style: square url('../../images/list_icon.gif') inside;
}
*/
#main	ul	{
	margin-left:-20px;
}
#main	li	{
	margin-left:-20px;
	padding-left:16px;
	padding-bottom:5px;
	list-style:none;
	background-image: url("../../images/list_icon.gif");
	background-repeat: no-repeat;
}

#info_index		ul	{
	margin-left:-20px;
}
#info_index	li	{
	margin-left:-20px;
	padding-left:16px;
	padding-bottom:5px;
	list-style:none;
	background-image: url("../../images/list_icon.gif");
	background-repeat: no-repeat;
}

div#sub		{
	margin-top:20px;
}

#side_menu h2	{
	margin-left:10px;
	border-bottom:1px solid #d4d4d4;
}
/* contact */
#contact	{
	font-size:14px;
	font-size:1.4rem;
}
div#contact_label	{
	margin:10px 0px 5px 0px;
	color:#333;
}
input.name	{
	width:60%;
	margin-top:5px;
	padding:5px;
}
input.tel	{
	width:60%;
	margin-top:5px;
	padding:5px;
}
input.email	{
	width:96%;
	margin-top:5px;
	padding:5px;
}
textarea.message	{
	width:96%;
	height:160px;
	margin-top:5px;
	padding:5px;
}
.submit_btn	{
	width:100px;
	height:40px;
}
#contact_confirm	{
	border:1px dotted #333;
	padding:5px;
}
img.page_top_banner	{
	width:70px;
	height:auto;
	margin-top:40px;
}
img.page_top_banner_index	{
	width:70px;
	height:auto;
	margin-top:40px;
}

#news_index_body	{
	margin-top:20px;
	margin-bottom:20px;
	font-size:14px;
	font-size:1.4rem;
	line-height:1.4em;
}

/*----- side-menu -----*/
#side_menu	{
	padding-bottom:10px;
	background-color:#fff;
	font-size: 12px;
	font-size: 1.2rem;
}
#side_menu ul	{
	margin:0;
	padding:0;
	list-style:none;

}
#side_menu li a	{
		text-decoration:none;
		display: block;
		padding:8px 20px;
}
#side_menu li a:hover	{
	color:#ff3838;
}
/*----- foot-menu -----*/
#foot-menu	{
	padding-bottom:10px;
	background-color:#fff;
	font-size: 12px;
	font-size: 1.2rem;
	border-top:1px solid #ddd;
}
#foot-menu ul	{
	margin:0;
	padding:0;
}
#foot-menu li a	{
	text-decoration:none;
	display: block;
	padding:8px 20px;
	color:#2980b9;
}
#foot-menu li a:hover	{
	background-color:#ddd;
	color:#f37818;
}
	
footer	{
		margin-top:20px;
}
/*----- footer -----*/
footer	{
	background-color:#2980b9;
	height:20px;
	padding-top:20px;
	text-align:center;
}
small  {
	
	color:white;
	font-size: 12px;
	font-size: 1.2rem;
	text-transform: uppercase;
}
small a	{
	color:white;
	text-decoration:none;
}

img.course_banner	{
	width:86%;
	height:auto;
	float:left;
	margin:20px;
}
#timetable th	{
	padding:10px;
	background-color:#84afff;
	text-align:center;
}
#timetable td	{
	padding:10px 3px;

}
#event_table	td	{
	padding:12px;
}
.YoutubeWrapper{
position: relative ;
margin-top: 1.2em ;
margin-bottom: 1.2em ;
padding-top: 69px ;
padding-bottom: 50% ;
overflow: hidden ;
}

.YoutubeWrapper iframe {
position: absolute ;
top: 0 ;
left: 0 ;
height: 100% ;
width: 100% ;
}

#guide_box	{
	width:148px;
	height:148px;
	border:1px solid #ddd;
	margin:8px 8px 8px 3px;
	float:left;
	background:url("../../images/index/bg_guide_text.gif") ;
}
#guide_title	{
	height:33px;
	padding:15px 10px 10px 10px;
	font-size:12px;
	text-align:center;
}
#guide_text	{
	display:block;
	padding:10px;
	font-size:11px;
	line-height:1.5em;
}
#guide_title.color_1	{
	background-color:#2980b9;
}
#guide_title.color_2	{
	background-color:#f608c5;
}
#guide_title.color_3	{
	background-color:#e4ec09;
}
#guide_title.color_4	{
	background-color:#1f63e0;
}
#guide_title.color_5	{
	background-color:#f60840;
}
#guide_title.color_6	{
	background-color:#7fa91a;
}
#guide_title.color_7	{
	background-color:#e50c81;
}
#guide_title.color_8	{
	background-color:#ff9c00;
}
#guide_title a	{
	display:block;
	color:white;
	text-decoration:none;
}

#guide_text	a {
	color:#000;
	text-decoration:none;
}

#login_box	{
	width:160px;
	height:160px;
	margin:0 auto;
	border:1px solid #ddd;
	margin-top:40px;
	padding:40px;
	font-size:14px;
}
#login_box input	{
	width:100%;
	margin:5px 0px;
	padding:5px;
	font-size:14px;	
}
.login_btn	{
	width:60%;
	height:40px;
}
img.photo_gallery_pic	{
	width:200px;
	height:auto;
	margin:10px;
}
#foot_note	{
		width:96%;
		margin:0 auto;
		font-size:12px;
		font-size:1.2rem;
	}
	
#privacy_policy	{
	font-size:14px;
}
/* /// Media Queries による切り替え  641px-960px /// */
@media only screen and (min-width: 481px) {

/*----- nav メニュー -----*/
	.clb	{
		clear:both;
	}
	img.actual	{
		width:auto;
		height:auto;
	}
	
	img.fll	{
		width:auto;
		height:auto;
		float:left;
		margin:0px 10px 10px 0px;
	}
	img.flr	{
		width:auto;
		height:auto;
		float:right;
		margin:0px 0px 10px 10px;
	}
	img.fll50	{
		width:50%;
		height:auto;
		float:left;
		margin:0px 10px 10px 0px;
	}
	img.flr50	{
		width:50%;
		height:auto;
		float:right;
		margin:0px 0px 10px 10px;
	}
	img.fll30	{
		width:30%;
		height:auto;
		float:left;
		margin:0px 10px 10px 0px;
	}
	img.flr30	{
		width:30%;
		height:auto;
		float:right;
		margin:0px 0px 10px 10px;
		
	}
	img.top_topics_l	{
		width:25%;
		height:auto;
		float:left;
		margin:5px 10px;	
		border-radius: 5px;        	/* CSS3草案 */  
	 -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
	 -moz-border-radius: 5px;   	/* Firefox用 */  
	
	}
	img.top_topics_r	{
		width:25%;
		height:auto;
		float:right;
		margin:5px 10px;
		border-radius: 5px;        	/* CSS3草案 */  
	 -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
	 -moz-border-radius: 5px;   	/* Firefox用 */  
	}
	img.cc_topics_l	{
		width:45%;
		height:auto;
		float:left;
		margin:5px 10px;	
		border-radius: 5px;        	/* CSS3草案 */  
	 -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
	 -moz-border-radius: 5px;   	/* Firefox用 */  
	
	}
	img.cc_topics_r	{
		width:45%;
		height:auto;
		float:right;
		margin:5px 10px;
		border-radius: 5px;        	/* CSS3草案 */  
	 -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
	 -moz-border-radius: 5px;   	/* Firefox用 */  
	}
	#header_right {
		display:block;
		width:auto;
		height:auto;
		float:right;
	}
	
	#contact_banner	{
		display:block;
		width:240px;
		height:auto;
		float:left;
	}
	#site_map	{
		display:block;
		width:120px;
		height:auto;
		float:right;
		margin-left:0px;
		margin-top:5px;
	}
	.menu-btn {
		display:none;
	}
	.tog-menu {
		display:block;
		background:white;
	}
	#wrap-nav	{
		border-bottom:1px solid #ddd;
	}

	nav {
		background:white;
	}
	nav ul {
		background:white;
	}
	nav ul li {
		float:left;
		width: 120px;
		text-align: center;
		font-size: 12px;
		font-size: 1.2rem;
		padding: 9px 3px;
	}
	nav li a	{
		border-bottom:none;
	}
	#top_topics	{
		width:70%;
		margin:0 auto;
	}
	#top_topics	h2	{
		font-size:24px;
		text-align:center;
		margin-bottom:10px;
	}
	#top_topics_box	{
		padding:5px;
		border:1px dotted #b4b4b4;
		margin-bottom:20px;
		border-radius: 5px;        	/* CSS3草案 */  
	}   bkit-border-radius: 5px;    /* Safari,Google 
	#topz-border-radius: 5px;   	/* Firefox用 */  _topics_box h3	{
		font-size:16px;
	}
	#top_topics_box p	{
		font-size:12px;
	}
	#top_article	{
		width:65%;
		float:left;
		margin-right:3%;
	}
	#top_article h2	{
		text-align:center;
	}
	#top_article_pic	{
		width:25%;
		float:left;
	}
	
	#wrap_top_headling	{
	
	}
	#top_headling	{
		
	}
	#service_guide	{
		width:84%;
		margin:0 auto;
	}
	#service_guide h2	{
		font-size:20px;
		text-align:center;
		border-bottom:1px solid #ddd;
	}
	
	/* ---- main and sub ---- */
	div#main	{
	}
	div#sub		{

	}

	img.fll_50	{
		width:50%;
		float:left;
		margin:0px 20px 20px 0px;
	}
	img.flr_50	{
		width:50%;
		float:right;
		margin:0px 0px 20px 20px;
	}
	img.contact_banner	{
		width:60%;
		height:auto;
	}
	
	img.site_map	{
		width:100%;
		height:auto;
	}
	img.kitamachi_link	{
		width:100%;
		height:auto;
	}
	input.name	{
		width:40%;
		margin-top:5px;
		padding:5px;
	}
	input.tel	{
		width:40%;
		margin-top:5px;
		padding:5px;
	}
	input.email	{
		width:100%;
		margin-top:5px;
		padding:5px;
	}
	textarea.message	{
		width:100%;
		height:160px;
		margin-top:5px;
		padding:5px;
	}
	.submit_btn	{
		width:200px;
		height:40px;
	}

	#login_box	{
		width:200px;
		height:200px;
		margin:0 auto;
		border:1px solid #ddd;
		margin-top:40px;
		padding:40px 60px 20px 60px;
		font-size:14px;
	}
	#login_box input	{
		width:180px;
		margin:5px 0px;
		padding:5px;
		font-size:14px;	
	}
	.login_btn	{
		width:80px;
		height:40px;
	}

#main dl.information dd {
   margin:0 0 5px 0;
   padding: 5px 0px 5px 9em;
   background:url("http://east.ntk-koganei.org/common/images/bg_dotline.gif") 0 100% repeat-x;
}

	/*----- foot-menu -----*/

	#foot-menu	{
		padding-top:20px;
		padding-bottom:20px;
		background-color:#fff;
		font-size: 12px;
		font-size: 1.2rem;
		border-top:1px solid #ddd;
	}
	
	#foot-menu_left	{
		width:49%;
		float:left;
	}
	#foot-menu_right	{
		width:49%;
		float:right;
	}
	#foot-menu ul	{
		margin:0;
		padding-left:20px;
		list-style:none;
	}
	#foot-menu li	{
		   background:url("http://east.ntk-koganei.org/images/bg_arrow.gif") 0px 12px  no-repeat;
	}

	#foot-menu li a	{
		text-decoration:none;
		display: block;
		padding:8px 20px;
	}
	#foot-menu li a:hover	{
		background-color:#fff;
		color:red;
		font-size:1.3em;
	}
	
	footer	{
		margin-top:20px;
	}
	img.course_banner	{
		width:auto;
		height:auto;
		float:left;
		margin:20px;
	}
	
	#guide_box	{
		width:148px;
		height:148px;
		border:1px solid #ddd;
		margin:10px;
		float:left;
	}
	#guide_title	{
		height:33px;
		padding:12px 7px 7px 7px;
		font-size:13px;
		text-align:center;
	}
	#guide_text	{
		padding:7px;
		font-size:12px;
		line-height:1.5em;
	}
}

/* /// Media Queries による切り替え  960px- /// */
@media only screen and (min-width: 961px) {

	#wrapper {
		width: 100%;
		margin: 0 auto;
	}
	#wrap_header	{
		width:960px;
		margin:0 auto;
	}
	.logo	{
		width:500px;
		height:auto;
		margin:10px 20px;
	}
	#contact_banner	{
		display:block;
		width:200px;
		height:auto;
		float:left;
	}
	#site_map	{
		display:block;
		width:140px;
		height:auto;
		float:right;
		margin-left:20px;
		margin-top:10px;
	}
	nav {
		width:1024px;
		margin:0 auto;
	}
	nav ul li {
		width: 130px;
		font-size: 16px;
		font-size: 1.6rem;
		padding: 0px 5px 9px 5px;
		font-weight:400;

	}
	#wrap-contents	{
		width:960px;
		margin:0 auto;
		margin-top:20px;
	}
	.index_top_h1	{
		font-size:25px;
	}
	

	#info_index	{
		width:80%;
		margin:0 auto;
	}
	#info_index	ul,li {
		font-size:14px;
		font-size:1.4rem;
		line-height:1.5em;
	}
	#contact_index_page	{
		width:300px;
		margin:0 auto;
	}
	img.page_top_banner_index	{
		margin-left:10%;
	}
	/* ---- main and sub ---- */
	div#main	{
		width:600px;
		float:left;
	}
	div#main h2	{
		margin:15px 0px;
	}
	div#sub		{
		width:300px;
		float:right;
		margin-top:20px;
	}
	img.contact_banner	{
		width:100%;
		height:auto;
	}

	#service_guide	{
		width:100%;
		margin:0 auto;
	}
	#service_guide h2	{
		font-size:20px;
		text-align:center;
		border-bottom:1px solid #ddd;
	}
	
	#kitamachi_kuukan	{
		width:360px;
		margin:0 auto;
	
	}
	img.kitamachi_kuukan_banner	{
		width:320px;
		height:auto;
	}
	#access_info	{
		width:600px;
		margin:0 auto;
	}
	#wrap_top_headling	{
		padding:20px 0px;
	}
	#top_headling	{
		width:960px;
		margin:0 auto;
	}
	
	#top_catch_img	{
		width:640px;
		margin:0 auto;
	}
	#table_about	{
		width:600px;
	}
	#map_about	{
		width:600px;
	}

	#wrap_bottom	{
		width:900px;
		margin:0 auto;
		margin-bottom:40px;
	}
	
		#guide_box	{
		width:198px;
		height:198px;
		border:1px solid #ddd;
		margin:20px;
		float:left;
	}
	#guide_title	{
		height:33px;
		padding:15px 10px 10px 10px;
		font-size:18px;
		text-align:center;
	}
	#guide_text	{
		padding:10px;
		font-size:14px;
		line-height:1.5em;
	}
	
	#foot_note	{
		width:960px;
		margin:0 auto;
	}
}
/*
 *	Narashino System
 *	Responsive Web Design
 *	2014
*/