@charset "utf-8";

html,body{
	font-size:16px;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","メイリオ","meiryo","Lucida Grande", "ＭＳ Ｐゴシック", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	color:#353535;
	margin:0;
	padding:0;
	text-align:center;
}

h1{
	margin:0;
	padding:0;
}

p{
	margin:0;
}

.wrap{
	max-width:1080px;
	margin:0 auto;
	padding:0 1em;
}

.container{
	display: flex;
	align-items: flex-start;
	max-width:1080px;
	margin:0 auto;
	padding:0 2%;
}

#about .container{
	/*align-items: center;*/
}

/*header*/
header{
	background:linear-gradient(#f4f8f8,#edf3f1);
	box-shadow:0 3px 1px rgba(0,0,0,0.15);
	display: flex;
	align-items: center;
	width:100%;
	height:60px;
	position:fixed;
	z-index:100;
}

h1{
	width:48%;
	padding:0;
	font-size:1.25rem;
	text-align:left;
}

h1 a{
	color:#005662;
	text-decoration:none;
}

h1 img{
	vertical-align:middle;
	width:25%;
	max-width:130px;
}

nav{
	display: flex;
	width:52%;
	font-size:0.88rem;
}

nav div{
	width:20%;
	height:60px;
	border-left:1px solid #9db7b7;
	display: flex;
	align-items:center;
}

nav a{
	width:90%;
	height:50%;
	color:#005662;
	text-decoration:none;
	margin:0 auto 4px;
}

nav a:hover{
	font-weight:bold;
	color:#2299a9;
	border-bottom:4px solid #2299a9;
	margin:0 auto;
}

/*content*/

section{
	padding:2rem 0;
	text-align:left;
	line-height:1.6em;
}

section#main{
	padding:0;
}

section:nth-child(odd){
	background:#f2f6f5;
}

.main{
	background:#c3c3b7;
	text-align:center;
}

.pc{
	width:100%;
	max-width:1200px;
	text-align:0 auto;
}

.sp{
	display:none;
}

.lead{
	color:#00707f;
	font-size:1.13rem;
	text-align:center;
	margin:2em 0 0;
}


section h2{
	color:#00707f;
	border-bottom:6px solid #00707f;
	width:38.8%;
	margin:0 auto 2rem;
	font-size:1.5rem;
	text-align:center;
	padding:0 0 1rem;
}

section table{
	width:74%;
	margin:0 auto;
	border-collapse: separate;
	border-spacing:1em 0;
	font-size:1rem;
}

section th,section td{
	border-bottom:1px dotted #999;
	padding:1rem 0;
}

section th{
	color:#2299a9;
	font-size:1.13rem;
	width:15%;
	vertical-align:top;
	text-align:center;
	margin-right:1.25rem;
}

section strong{
	color:#2299a9;
	font-size:1.13rem;
}

.container p{
	width:66%;
}

.about_img{
	width:29%;
	margin:0 0 0 4%;
	padding:7px 7px 3px 7px;
	text-align:center;
	font-size:85%;
	color:#00707f;
	font-weight:bold;
	border:1px solid #2299a9;

}

.about_img img{
	width:100%;
	margin-bottom:0.3em;
	
}


.map{
	margin: 0 2% 0 0;
	position: relative;
	width: 50%;
	padding-top: 35%;
}
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

.directions div{
	margin-bottom:1.5rem;
}

.bus{
	padding:0.7em;
	border:solid 1px #777;
	background:#f2f6f5;
}

.gotop{
	position:fixed;
	bottom:1rem;
	right:1rem;
}

a.gotop:hover{
	opacity:0.8;
}

/*footer*/
footer{
	padding:2rem 0;
	background:#00707f;
	color:#fff;
	font-size:0.88rem;
}

footer a{
	display:block;
	border-radius:0.5rem;
	border:solid 1px #fff;
	width:240px;
	margin:0 auto 2rem;
	text-decoration:none;
	color:#fff;
	padding:1em 1em 1em 0;
	font-size:1.13rem;
	background:url(../img/tri.png) 90% center no-repeat;
}

footer a:hover{
	background:url(../img/tri.png) 90% center no-repeat rgba(255,255,255,0.2);
}


/*for ipad*/
@media screen and (max-width: 930px) {
	html,body{
		font-size:12px;
	}
	
	nav a{
		height:auto;
		padding:1em 0;
	}
	
	section table{
		width:80%;
	}
	
	.container{
		margin:0 2%;
	}

}

/*for sp*/
@media screen and (max-width: 414px) {
	.sp{
		display:block;
		width:100%;
	}
	.pc{
		display:none;
	}


	header{
		display:block;
		height:auto;
	}
	
	h1{
	width:100%;
	
	}
	
	h1 img{
		width:25%;
	}
	
	nav{
		width:100%;
		background:#fff;
	}
	
	nav div{
		height:auto;
	}

	nav div.nav_left{
		border-left:none;
	}

	nav a{
		width:100%;
		margin:0 auto;
		padding:0.5em 0;
		font-size:10px;
	}

	
	.lead{
		margin:2em 2% 0;
	}
	
	section#access{
		padding:2rem 0 1rem;
	}

	section h2{
		border-bottom:5px solid #00707f;
		width:60%;
		margin:0 auto 1rem;
		padding:0 0 0.5rem;
	}

	section table{
		width:98%;
	}

	.container{
		flex-direction:column;
	}

	.container p{
	width:100%;
	}
	
	.about_img{
		width:80%;
		margin:1em auto 0;
	}
	
	.map{
		width:100%;
		padding-top:56%;
		margin:1rem auto 1.5rem;
	}
	
	footer{
		padding:2rem 0 4rem;;
	}
	
	footer a{
		width:200px;
	}
	
	.gotop{
		right:0.5em;
		bottom:0.5em;
		text-align:right;
	}
	
	.gotop img{
		width:75%;
	}


}