@charset "utf-8";

/* RESET
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table.table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0; margin: 0px; padding: 0px;}

ol, ul, li {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 62.5%; /*1em = 10px*/
	line-height: 140%;
	color:#333;
	background-color:#fff;
	-webkit-text-size-adjust:100%;
}
img {border:none; width:auto; height: auto; max-width:100%;}

.clearfix:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}
.clearfix {min-height: 1px;}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

p {font-size: 1.2em; color: #333;}

a {outline: medium none;}
a:link {color: #333; text-decoration: none;}
a:visited {color: #333; text-decoration: none;}
a:hover {color: #00a3d9; text-decoration: underline;}
img {vertical-align: bottom;}
a img {border: none;}
a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
	background-color: transparent;
}

/*----- container -----------------------------------*/
body .container {
	margin: 0 2%;
	width: 96%;
	height: auto;
}
body .container:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}
.wrap, .inner {margin: 0 auto; width:100%; height: auto;}
.wrap:after, .inner:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}

.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb40 {margin-bottom:40px;}


.left, .right {float:none}

.pc {display: none;}
.sp {display: block;}

/*----- header -----------------------------------*/
header {
	width: 100%;
	height: auto;
}
header .inner {padding: 0;}
header .siteTitle {
	margin: 1.2em 0 0 10px;
	width: 60%;
	height: auto;
	float:left;
}

/* Toggle Button */
#mobile-head {
	width: 100%;
	height: 58px;
	z-index: 999;
	position: relative;
}
.subnav {
	position: absolute;
	top: -500px;
	background: #fff;
	width: 100%;
	text-align: center;
	padding: 5px 0 0 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	z-index: 990;
}
.subnav ul {
	list-style: none;
	position: static;
	right: 0;
	bottom: 0;
	font-size: 1.2em;
}
.subnav ul li {
	float: none;
	position: static;
	border-bottom:1px dotted #999999;
}
#top-head .subnav ul li a,
#top-head.fixed .subnav ul li a {
	width: 100%;
	display: block;
	color: #333;
	padding: 1em 0;
}
#nav-toggle {
	display: block;
	position: absolute;
	right: 12px;
	top: 12px;
	width: 36px;
	height: 40px;
	cursor: pointer;
	z-index: 101;
}
#nav-toggle div {position: relative;}
#nav-toggle span, 
#nav-toggle p {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #666;
	left: 0;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 10px;}
#nav-toggle span:nth-child(3) {top: 20px;}
#nav-toggle p {
	top: 28px;
	height: auto;
	font-size:0.6em;
	line-height:1.2em;
	text-align:center;
	background: transparent;
}

/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
	top: 10px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open #nav-toggle span:nth-child(3) {
	top: 10px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
}
/* .subnav スライドアニメーション */
.open .subnav {
	/* .subnav top + #mobile-head height */
	-moz-transform: translateY(556px);
	-webkit-transform: translateY(556px);
	transform: translateY(556px);
}



/*----- navigation -----------------------------------*/
nav {
	width: 100%;
	height: auto;
	border-top:1px solid #ffff00;
	background-color: #01748d;
}
nav ul {
	margin: 0 auto;
	width:100%;
	height: auto;
}
nav ul li {
	width:20%;
	line-height: 1;
	float:left;
}
nav ul:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}
nav.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index:800;
}

/*----- メイン画像 -----------------------------------*/
.visual {
	width: 100%;
	height: 150px;
	text-align:center;
	overflow:hidden;
	background-color: #e4e4e4;
}
.visual a:hover img {
	opacity:1;
	filter:alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	background-color: transparent;
}

/*----- ニュース一覧 -----------------------------------*/
.newsBlock {
	margin: 0 auto;
	padding: 25px 0 20px 0;
	width:100%;
	height: auto;
}
.newsBlock:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}
.newsBlock .news, .newsBlock .research, .newsBlock .event {
	margin:0;
	width:100%;
	height: auto;
}
.newsBlock .inner {
	padding: 0 0 0 10px;
	width:auto;
	border-left:5px solid #56a0b0;
}
.newsBlock .inner h2 {
	padding: 5px 0 5px 0;
	font-size: 1.8em;
	line-height: 1.5em;
	font-weight:bold;
	color:#333333;
	text-align:left;
}
.newsBlock .inner .past {
	padding: 0 1em 0 0;
	font-size: 1.4em;
	line-height: 1.5em;
	font-weight:bold;
	color:#333333;
	text-align:right;
	background: url(../images/arr.png) no-repeat right center;
}

.newsBlock .circle {
	margin:5px auto 15px;
	width:40%;
	height: auto;
}

.newsBlock dl {
	width: 100%;
	height: auto;
}
.newsBlock dt {
	padding: 2px 10px;
	font-size: 1.2em;
	line-height: 1;
	font-weight: normal;
	text-align:center;
	color:#ffffff;
	background-color: #56a0b0;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	display:inline;
}
.newsBlock dd {
	margin: 0.5em 0 1.2em 0;
	padding: 0 0 1em 0;
	font-size: 1.2em;
	line-height: 1.8em;
	border-bottom:1px dotted #999;
}
.newsBlock dd a{display:block;}
.newsBlock dd:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}
.newsBlock dd .icn {
	margin: 0 0 0 1em;
	width: 12%;
	height: auto;
	line-height: 1;
	float:right;
}

/*----- イベント・サブメニュー -----------------------------------*/
.container-box {
	margin: 0 0 10px 0;
	padding: 15px 0 0;
	width:100%;
	height: auto;
	background: url(../images/bg.png) repeat 0 0;
	border-top:1px solid #cccccc;
	border-bottom:1px solid #cccccc;
}
.container-box .sub_contents {
	margin: 0 2%;
	width: 96%;
	height: auto;
}
.container-box .sub_contents ul {
	margin: 0 0 15px 0;
	width: 100%;
	height: auto;
}
.container-box .sub_contents ul li {
	height: auto;
	line-height: 1;
	float:left;
}
.container-box .sub_contents .bnr_event li {margin: 0 0 10px 0; width: 100%;}
.container-box .sub_contents .bnr_event li:nth-child(2n) {}
.container-box .sub_contents .sub_menu li {margin:0 0 8px; width: 48%;}
.container-box .sub_contents .sub_menu li:nth-child(2n) {float:right;}
.container-box .sub_contents ul:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}



/*===============================================
= footer
===============================================*/
footer {
	padding: 15px 0 20px 0;
	width: 100%;
	height: auto;
}
footer .relations {
	margin: 0 2%;
	width: 96%;
	height: auto;
	text-align:center;
}

footer .relations ul {
	margin: 0 auto 20px;
	width: 100%;
	height: auto;
}
footer .relations li {
	margin: 0 1%;
	width: 31%;
	height: auto;
	line-height: 1;
	float:left;
}
footer .relations ul:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}

footer p {text-align:center;}
footer .guide {
	padding: 0 0 15px 0;
	font-size: 2em;
	line-height: 1.2em;
	color:#333333;
}
footer .copyright {
	padding: 15px 0 0 0;
	font-size: 1em;
	line-height: 1.8em;
	color:#999999;
	border-top:1px solid #cccccc;
}

.pagetop{
	position: fixed;
	bottom: 50px;
	right: 25px;
	width: 54px;
	height: 54px;
	cursor:pointer;
}
footer.entry-footer {width:auto;}


/*===============================================
= More than 641px 
= Except for Smart Phone
===============================================*/
@media screen and (min-width: 641px) {

	.left {float:left;}
	.right {float:right;}
	.pc {display: block;}
	.sp {display: none;}

	/*----- container -----------------------------------*/
	body .container {
		margin: 0 auto;
		width: 960px;
		height: auto;
	}
	.inner {margin: 0 auto; width:960px;height: auto;}
	
	/*----- header -----------------------------------*/
	header {height: 100px;}
	header .inner {padding: 28px 0 0;}
	header .siteTitle {
		margin: 0;
		width: 330px;
		height: 47px;
		float:left;
	}
	#mobile-head {
		width: 330px;
		height: auto;
		z-index: 999;
		position: relative;
	}

	.subnav {
		position: relative;
		top: 0;
		padding: 0 0 0 0;
		margin-top:20px;
		width: 550px;
		height: auto;
		float:right;
		background: #ffffff;
	}
	.subnav ul {position: relative; width:auto;float:right;}
	.subnav ul li {
		float:left;
		position: relative;
		border-bottom:none;
		margin:0 0 0 1em;
	}
	#top-head .subnav ul li a {
		width: auto;
		color: #333333;
		padding:0 0 0 2em;
		line-height: 150%;
		font-weight:bold;
		text-align:left;
	}
	.subnav ul li.eng {background: url(../images/icn_eng.png) no-repeat 0 center;}
	.subnav ul li.sitemap {background: url(../images/icn_sitemap.png) no-repeat 0 center;}
	.subnav ul li.access {background: url(../images/icn_access.png) no-repeat 0 center;}
	.subnav ul li.inq {background: url(../images/icn_inq.png) no-repeat 0 center;}
	.subnav ul:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}


	/* Toggle Button */
	#nav-toggle {
		display: none;
		position: absolute;
		right: 12px;
		top: 14px;
		width: 34px;
		height: 36px;
		cursor: pointer;
		z-index: 101;
	}
	
	/*----- navigation -----------------------------------*/
	nav {
		min-width: 960px;
		height: 54px;
	}
	nav ul {
		width:960px;
		height: 53px;
	}
	
	/*----- メイン画像 -----------------------------------*/
	.visual {
		height: 250px;
		min-width: 960px;
	}
	
	/*----- ニュース一覧 -----------------------------------*/
	.newsBlock {
		padding: 25px 0 40px 0;
		width:920px;
	}
	.newsBlock .news, .newsBlock .research, .newsBlock .event {
		margin:0 115px 0 0;
		width:230px;
		float:left;
	}
	.newsBlock .event {margin-right:0;}
	
	.newsBlock .circle {
		margin:10px auto 30px;
		width:182px;
	}
	.newsBlock dt {padding: 2px 10px 1px;}
	.newsBlock dd .icn {
		margin: 0 0 0.2em 1em;
		width: 60px;
	}
	
	/*----- イベント・サブメニュー -----------------------------------*/
	.container-box {
		margin: 0 0 10px 0;
		padding: 40px 0 0;
		min-width: 960px;
	}
	.container-box .sub_contents {
		margin: 0 auto;
		width: 960px;
	}
	.container-box .sub_contents ul {margin: 0 0 30px 0;}
	.container-box .sub_contents ul li {}
	.container-box .sub_contents .bnr_event li {margin:0; width: 468px;}
	.container-box .sub_contents .bnr_event li:nth-child(2n) {float:right;}
	.container-box .sub_contents .sub_menu li {margin:0 15px 8px 0; width: 310px;}
	.container-box .sub_contents .sub_menu li:nth-child(2n) {float:left;}
	.container-box .sub_contents .sub_menu li:nth-child(3n) {margin-right: 0;}
	
	
	
	/*===============================================
	= footer
	===============================================*/
	footer {
		padding: 35px 0;
		min-width: 960px;
	}
	footer .relations {
		margin: 0 auto;
		width: 960px;
	}
	
	footer .relations ul {
		margin: 0 auto 40px;
		width: auto;
	}
	footer .relations li {
		margin:0 10px;
		width: 168px;
		float:none;
		display:inline;
	}
	footer .guide {
		padding: 0 0 25px 0;
		font-size: 2.4em;
	}
	footer .copyright {
		padding: 20px 0 0 0;
	}
	footer.entry-footer {width:720px;}

}