@charset "utf-8";

/* -------------------------------------------------------------- */
/*
html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { line-height:1; }
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

/* change colours to suit your needs */
ins { background-color:#ff9; color:#000; text-decoration:none; }
/* change colours to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
/* change border colour to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* -------------------------------------------------------------- */

body {
color:#333;
font-size:small;
font-family:verdana,"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
-webkit-text-size-adjust: none;
}

a { color:#00a0e9; text-decoration:none; }
a:hover { color:#006699; }
a:active, a:focus { outline:0; }


#wrapper {
margin:0 auto;
padding:0 1%;
width:98%;
position:relative;
background:#fff;
}

.inner {
margin:0 auto;
width:100%;
}

/* Header */
#header { height:80px; }

#upper {
/* padding: 2px 10px 10px 17px; */
padding-right:10px;
height:24px;
text-align:right;
margin-top:0px;
}

#upper a { color:#333; }
#upper a:hover { color:#7FC9FF; }


#header h1 {
padding:5px 0 0 17px;
font-size:12px;
font-weight:bold;
}

.logo {
float:left;
margin-left:17px;
margin-top:6px;
color:#00a0e9;
font-size:16px;
font-weight:normal;
}

.logo span {
display:block;
color:#333;
font-size:.6em;
font-weight:normal;
}

.language {
float:right;
padding:5px 10px;
text-align:right;
/* margin-top:6px; */
color:#00a0e9;
font-size:11px;
font-weight:normal;
/* background-color: #efefef; */
color:#00a0e9;
}

/* Main */

#mainBanner {
margin:17px auto;
padding:0;
width:100%;
position:relative;
line-height:0;
}

#mainBanner img {
max-width:100%;
height:auto;
border:4px solid #e2f0ff;
}

/* Grid */
.gridWrapper {
padding-bottom:20px;
overflow: hidden;
}

* html .gridWrapper { height:1%; }

.grid {
float:left;
border-radius:5px;
background:#fff;
}

.box {
margin:0 5px;
padding:10px;
border:1px solid #e2f0ff;
}

.box img {
max-width:100%;
height:auto;
border:4px solid #e2f0ff;
}

.box h3 { padding:10px 0 5px; }

.box h3, .box p {text-align:left; }

.box p.readmore {
padding:10px 5px 5px;
text-align:right;
}

.box2 {
margin:0 5px;
padding:10px;
}

.box2 img {
max-width:100%;
height:auto;
}


/* Contents */
section.content article {
padding:20px;
margin-bottom:20px;
border:1px solid #e2f0ff;
overflow:hidden;
}

* html section.content article { height:1%; }

section.content p { margin-bottom:5px; }

h3.heading {
font-weight:normal;
padding:0 10px;
line-height:36px;
color:#333;
background:#e8f7ff; /* changed from eff7ff; */
}

h4.heading {
font-weight:bold;
padding:0 20px;
line-height:36px;
color:#07a;
background:#e8f7ff; /* changed from eff7ff; */
font-size: 14px;
}

section.content img {
max-width:90%;
height:auto;
}

.alignleft {
float:left;
clear:left;
margin:3px 10px 10px 0;
}

.alignright {
float:right;
clear:right;
margin:3px 0 10px 10px;
}

#gallery .grid img,.border,ul.list img { border:4px solid #e2f0ff; }



/* Table */
table.table {
border-collapse:collapse;
margin:5px auto 15px auto;
}

table.table td {
border-collapse:collapse;
background-color:#f9fcff;
text-align:left;
padding:8px;
border:1px solid #cee5ff;
line-height:20px;
}

table.table th {
background-color:#EDF9FF; /* changed from f4f9ff;, effaff; */
text-align:center; /* changed from text-align: right; */
padding:8px;
white-space:nowrap;
color: #151515;
border-top:1px solid #c9e3ff;
border-right:4px solid #c9e3ff;
border-bottom:1px solid #c9e3ff;
border-left:1px solid #c9e3ff;
font-size:13px;
font-weight:normal;
letter-spacing:1px;
background-repeat:repeat-x;
background-position:top;
}


/* achievement */

#achievement_index {
	margin: 30px auto;
}

.table_ac {
	width:95%;
	table-layout:fixed;
}

table.table_ac {
border-collapse:separate;
border-spacing: 5px;
margin: auto;
}

table.table_ac td {
border-collapse:separate;
background-color:#f9fcff;
text-align:center;
padding:8px;
border:1px solid #cee5ff;
line-height:20px;
font-size:0.9em;
}

table.table_ac td.active_ac {
font-weight: bold;
background-color:#E9F6FF; /* changed from eaf4ff; */
}

#achievement {
	margin-top: 15px;
}

#achievement li {
	width:  95%;
	margin: 5px auto;
	border-bottom: solid 1px;
	border-color: #006699;
	list-style: none;
}
#achievement .name {
	font-weight: normal;
	color: #318ECB; /* changed from 0088cc; */
	font-size: 12px;
	padding: 0 5px 0 12px; /* changed from padding-left: 10px; */
}
#achievement .cont {
	font-size: 12px;
	font-weight: bold;
	color: #0657A9; /* changed from 006699; */
	padding: 0 5px 0 12px; /* changed from padding-left: 10px; */
}
#achievement .journal {
	font-size: 10px;
	font-weight: normal;
	color: #cccccc;
	padding: 0 5px 0 12px; /* changed from padding-left: 10px; */
}
.symbol {
	font-family: symbol;
}

.italic {
	font-style: italic;
}

/* links */

#links {
	margin-top: 30px;
}

#links ul {
	padding-left: 20px;
}

#links li {
	width:  95%;
	margin: 15px auto;
	list-style: none;
	list-style-image: url(images/links.png);
	list-style-position: outside;
	border-bottom: solid 1px;
	border-color: #006699;
}

#links p {
	margin-bottom: 12px;
	font-size: 12px;
}

/*#links ul {
	padding: 0.3em 0;
	list-style-type: none;
	border: none;
}
#links ul li {
	position:relative;
	padding: 0.3em 0 0.3em 1.4em;
	line-height: 1.5;
}
#links ul li::after,
#links ul li::before {
	content: '';
	position: absolute;
}
#links ul li::after {
	left: -0.2em;
	top: 8px;
	width: 20px;
	height: 20px;
	background-color: #006699;
	border-radius: 50%;
}
#links ul li::before {
	z-index: 2;
	left: 3px;
	top: 15px;
	width: 4px;
	height: 4px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}*/

/* Footer */
#footer {
clear:both;
overflow:hidden;
padding:10px 10px 20px 10px;
background:#ECFAFF; /* changed from f2f8ff; */
}

* html #footer { height:1%; }

#footer .grid{
padding:10px 0 5px;
margin:0;
background:transparent;
}

#footer #info .logo, #footer #info .info{float:none;}

#footer #info .info{
clear:both;
padding:10px 0 0 15px;
text-align:left;
}

#footer .logo{font-size:18px;}

#footer .info .tel,#footer .info .tel span,#footer #info .address{
font-size:12px;
color:#333;
}

ul.footnav{
float:left; /* changed from right */
width:650px;
padding:10px; /* changed from 10px 0: */
list-style: none;
}

ul.footnav li{
float:left;
margin-bottom:10px;
padding:0 7px 0 8px;
font-size:11px;
border-right:1px solid #bfddff;
list-style: none;
}

#footer a{color:#333;}
#footer a:hover{color:#7FC9FF;}

address{
clear:both;
padding:5px;
text-align:center;
font-style:normal;
font-size:10px;
color:#333;
background:#d3e8ff;
}


/* For PC */

@media only screen and (min-width: 960px){
	#header,#wrapper,#upper,.inner{ 
	width:960px;
	padding:0;
	margin:0 auto;
	}

	#wrapper{padding-bottom:20px;}

	nav#mainNav{
	clear:both;
	overflow:hidden;
	position:relative;
	background:#e8f7ff; /* changed from eff7ff; */
	}

	nav#mainNav .inner{
	width:932px;
	padding:0 14px;
	}

	nav#mainNav ul li{
	float: left;
	position: relative;
	}

	nav#mainNav li.last{border-right:1px solid #e2f0ff;}

	nav#mainNav ul li a{
	display: block;
	text-align: center;
	_float:left;
	font-size:13px;
	width:154px;
	height:45px;
	padding-top:15px;
	color:#069;
	background:#e8f7ff; /* changed from eff7ff; */
	border-left:1px solid #e2f0ff;
	}

	nav#mainNav ul li a span,nav#mainNav ul li a strong{
	display:block;
	}

	nav#mainNav ul li a span{
	color:#c4e0ff;
	font-size:10px;
	}

	nav div.panel{
	display:block !important;
	float:left;
	}

	a#menu{display:none;}
	
	nav#mainNav li.active a, nav#mainNav li a:hover{
	color:#006699;
	background:#E0F2FF; /* changed from eaf4ff; */
	padding-top:15px;
	font-weight: bold;
	}

	#mainBanner{margin-left:15px;}
	#treepage #mainBanner{margin:15px auto;}

	#main{
	margin: 15px auto;
	width:90%;
	padding-right:15px;
	}

	/* All Grid */
	.gridWrapper{
	width:960px;
	margin:0 0 0 -10px;
	}

	#gallery article{padding:10px 0 10px 10px;}

	/* Grid */
	.grid{
	float:left;
	width:300px;
	margin-left:20px;
	}

	#treepage .grid{width:auto;}

	#gallery .grid{
	width:auto;
	margin:10px 0 2px 10px;
	}
}


@media only screen and (max-width:959px){
*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

nav#mainNav{
clear:both;
width:100%;
margin:0 auto;
padding:0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #f4f9ff), color-stop(0.5, #edf5ff), color-stop(0.00, #f7fbff));
background: -webkit-linear-gradient(top, #f7fbff 0%, #edf5ff 50%, #f4f9ff 100%);
background: -moz-linear-gradient(top, #f7fbff 0%, #edf5ff 50%, #f4f9ff 100%);
background: -o-linear-gradient(top, #f7fbff 0%, #edf5ff 50%, #f4f9ff 100%);
background: -ms-linear-gradient(top, #f7fbff 0%, #edf5ff 50%, #f4f9ff 100%);
background: linear-gradient(top, #f7fbff 0%, #edf5ff 50%, #f4f9ff 100%);
  border:1px solid #ddedff;
}

nav#mainNav a.menu{
width:100%;
display:block;
height:40px;
line-height:40px;
font-weight: normal;
text-align:left;
}

nav#mainNav a#menu span{padding-left:10px;}
nav#mainNav a.menu span:before{content: "→ ";}
nav#mainNav a.menuOpen span:before{content: "↓ ";}

nav#mainNav a#menu:hover{cursor:pointer;}

nav .panel{
display: none;
width:100%;
position: relative;
right: 0;
top:0;
z-index: 1;
}

nav#mainNav ul li{
float: none;
clear:both;
width:100%;
height:auto;
line-height:1.2;
}

nav#mainNav ul li a,nav#mainNav ul li.current-menu-item li a{
display: block;
padding:15px 10px;
text-align:left;
border-bottom:1px dashed #ccc;
}

nav#mainNav ul li a span{padding-left:10px;}

nav#mainNav ul li:first-child a{
border-top:1px solid #ddedff;
}

nav#mainNav ul li:last-child a{border:0;}

nav#mainNav ul li.active a{color:#006699;}

nav div.panel{float:none;}

#treepage #mainBanner{max-width:668px;}

#sidebar{padding-bottom:30px;}

#sidebar article{padding:7px 0;}

#footer .grid,#footer ul.footnav{
float:none;
width:100%;
text-align:center;
list-style: none;
}

ul.footnav li{float:none; 
display:inline-block;
list-style: none;
}

.grid{
width:32%;
margin:10px 0 0 1%;
}

#gallery .grid{
float:left;
width:31%;
margin:0 0 0 1%;
}

#footer .grid img, #footer .info{float:none;}
#footer .grid p{display:block;}
#footer #info .info{float:none;text-align:center;}

#footer.logo,#footer .info{
width:100%;
float:none;
}

}

/* Mobile Landscape */
@media only screen and (max-width:640px){
	#header{
	height:auto;
	padding-bottom:20px;
	}

	#header h1,.logo,.info{text-align:center;}

	.logo,.info{
	clear:both;
	width:100%;
	float:none;
	margin:0;
	}

	.box img{
	float:left;
	margin-right:5px;
	}

	.box h3{padding-top:0;}

	.alignleft,.alignright{
	float:none;
	display:block;
	margin:0 auto 10px;
	}

	#gallery .grid{float:left;}
}

/* Mobile Portrait */
@media only screen and (max-width:480px){
	.grid{width:100%;}
	.box img{max-width:100px;}
	#mainBanner h2,#mainBanner p{font-size:80%;}
}