@charset "utf-8";
/* CSS Document */

/* reset*/
html, body, header, nav, aside, footer, h1, h2, h3, h4, div, ul, li, dl, dt, dd, p, img, a{
  margin:0;
  padding:0;
  line-height: 1.0;
  font-family:"Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
}
ul {list-style: none; }

img{border:0;
vertical-align:bottom;}

a {text-decoration: none;}
/*  reset.end
---------------------------------------------------------- */	
body{
background-color:#DBEFE5;}
  
  #container{
	width:100%;
	margin:0 auto;
	background-color:#DBEFE5;
	}
/*  header.start
---------------------------------------------------------- */	
header{
	width:100%;
	background-color:#44BBA6;
	height:150px;
	}
h1{
	background:url(../img/logo.png) no-repeat ;
	height:85px;
	text-indent:-9999px;
	margin:6px auto 0;
	}
	h1 a{
		display:block;
		width:380px;
		height:85px;
		margin:auto 0;
	}
	h1 a:hover, #contact a:hover{
		opacity:0.6;
	}
	
	.header-inner{
		width:960px;
		height:150px;
		margin:0 auto;
		overflow:hidden}
		
	.header-left{
		float:left;
		height:100px;
		width:50%;}
	
	.header-right{
		float:right;
		width:50%;
		height:80px;
    margin-top:10px;
		background:url(../img/header-right.png) no-repeat right bottom;
	    background-size:contain;
		text-indent:-9999px;
		}
#nav{
	width:100%;
	height:50px;
	z-index:1000;
	background-color:#44BBA6;
	box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.6);
}
/*  nav#pc
---------------------------------------------------------- */
nav#pc ul{
	width:960px;
	height:50px;
	margin:0 auto;
	background:#FFF;
	overflow:hidden;}
nav#pc li{
	float:left;
	width:160px;
	height:50px;
	}
nav#pc li a {
  display: block;
  height: 50px;
  text-indent:-9999px;
  background: #FFF url(../img/nav.png) no-repeat 0 0;
}
nav#pc li#home a {
  background: #FFF url(../img/nav.png) no-repeat 0 0;
}
nav#pc li#about a {
  background: #FFF url(../img/nav.png) no-repeat -160px 0;
}
nav#pc li#menu a {
  background: #FFF url(../img/nav.png) no-repeat -320px 0;
}
nav#pc li#staff a {
  background: #FFF url(../img/nav.png) no-repeat -480px 0;
}
nav#pc li#question a {
  background: #FFF url(../img/nav.png) no-repeat -640px 0;
}
nav#pc li#access a {
  background: #FFF url(../img/nav.png) no-repeat -800px 0;
}
nav#pc li#home a:hover {
  background: #FFF url(../img/nav.png) no-repeat 0 -60px;
}
nav#pc li#about a:hover {
  background: #FFF url(../img/nav.png) no-repeat -160px -60px;
}
nav#pc li#menu a:hover {
  background: #FFF url(../img/nav.png) no-repeat -320px -60px;
}
nav#pc li#staff a:hover {
  background: #FFF url(../img/nav.png) no-repeat -480px -60px;
}
nav#pc li#question a:hover {
  background: #FFF url(../img/nav.png) no-repeat -640px -60px;
}
nav#pc li#access a:hover {
  background: #FFF url(../img/nav.png) no-repeat -800px -60px;
}
p#menuToggle, nav#mobile{
  display:none;
}
/*  nav#mobile.end
---------------------------------------------------------- */
.header-inner .fixbar {
  position: absolute;
  top:100px;
  left:0;
}
.header-inner.fixed .fixbar {
  position: fixed;
  top: 0px;
  left:0;
}
/*  header.end/content.start
---------------------------------------------------------- */	
#content{
	overflow:hidden;
	width:960px;
	margin:30px auto 0;
	}

#main{
	float:right;
	width:680px;
	border-radius:6px;
	margin:0 0 30px 30px;
	}
#main h2{
	padding:10px 25px;
	color:#FFF;
	font-size:24px;
	font-weight:bold;
	letter-spacing:3px;
	text-shadow:1px 1px 1px #666;
	border-radius:6px 6px 0 0;
	background:url(../img/back.png) no-repeat;
    }
/*  side.start
---------------------------------------------------------- */

#side{
	float:left;
	width:250px;
	}
	#info{
		width:210px;
		height:200px;
		overflow:hidden;
		padding:0px 20px;
		margin:0 auto 30px;
		background-color:#FFF;
		border-radius:6px;
		box-shadow:0 0 5px #666 inset;}
	#side h3{
		text-align:center;
		font-weight:inherit;
		letter-spacing:3px;
		padding:15px 20px 5px;
		margin-bottom:10px;
		border-bottom:2px solid #44BBA6;
		font-size:24px;}
	#side dl{
		width:190px;
	    margin:0 auto;
		overflow:hidden;}
	#side dt{
		width:60px;
		float:left;
		font-size:18px;
		text-align:center;
		font-weight:bold;}
	#side dd{
		text-align:right;
		line-height:1.4;
		margin-bottom:15px;}
    #facebook, #contact{
		width:100%;
		margin:0 auto 30px;
		background-color:#DBEFE5;}
	#contact a{
		display:block;
		width:250px;
		height:180px;
		background-color:#FF0;
	}
#facebook{
  width:250px;
	height:500px;
}
#facebook a{
	color:#DBEFE5;
}
/*  side,content.end / footer.start
---------------------------------------------------------- */	
footer{
	width:100%;
	background-color:#247365;
	height:100%;
	padding:50px 0 40px;
	color:#FFF;
	text-align:center;}
#footer ul{
	width:700px;
	margin:0 auto 40px;
	overflow:hidden;
}
#footer ul li{
	float:left;
	margin-right:20px;
}
#footer li a{
	width:100px;
	color:#DBEFE5;
	line-height:1.5;
	display:block;
	text-align:center;
	border-bottom:1px solid #FFF;
}
#footer li:last-child{
	margin-right:0px;
}
#footer li a:hover{
	color:#44BBA6;
}
#to-top a{
  position:fixed;
  right:40px;
  bottom:20px;
  opacity:0.6;}
#to-top a:hover{
  opacity:0.9;
}

@media screen and (max-width:959px){
h1{
	background-size:contain;
	background-position:center;
}
/*  nav#mobile
---------------------------------------------------------- */
nav#pc{
  display:none;
}
nav#mobile{
	display:block;
	width:100%;
	height:50px;
}
nav#mobile ul{
  width:100%;
  overflow:hidden;
}
nav#mobile ul li{
	float:left;
	width:16.66%;
	background:#FFF;
	border-right:1px solid #FFF;
	box-sizing:border-box;
}
nav#mobile ul li:last-child{
	border-right:none;
}
nav#mobile ul li a{
	display:block;
	color:#FFF;
	width:100%;
	line-height:50px;
	text-align:center;
	background-color:#44BBA6;
}
nav#mobile ul li a:hover{
	opacity:0.6;
}
/*  nav#mobile.end
---------------------------------------------------------- */
.header-inner{
  width:768px;
}
#content{
	width:100%;
}
#main, #side{
   float:none;
   width:768px;
   margin:0 auto;
}
#main{
	margin-bottom:30px;
}
#side{
	overflow:hidden;
}
#main h2{
	background:#44BBA6;}

#info, #contact{
	float:left;
  margin:0 30px 30px 104px;

}
#contact{
	width:250px;
}
#facebook{
	float:right;
  margin:0 104px 30px 30px;
}
}

@media screen and (max-width:767px){/*iPad miniがターゲットデバイス*/
 html{
	 font-size:90%;
 }
 header, .header-inner{
	 height:126px;
 }
 #nav, nav#mobile{
	height:36px;
	background:#44BBA6;}
 nav#mobile ul{
   width:100%;
 }
 nav#mobile ul li{
   float:none;
   width:100%;
   border-right:none;
   border-bottom:1px solid #FFF;
 }
 nav#mobile li a{
	font-weight:bold;
	font-size:18px;
	letter-spacing:2px;
 }
 .header-inner, #main, #side{
   width:320px;
 }
 .header-left{
	 float:none;
	 width:100%;
 }
 .header-right{
	 display:none;
 }
 
/*  ドロップダウンメニュー
---------------------------------------------------------- */
header nav {
  float:right;
}

header nav p#menuToggle{
  display: block;
  background: #2b2b2b;
  background: -webkit-linear-gradient(top, #eeedf2 1%, #717171 4%, #2b2b2b 84%);
  background: linear-gradient(to bottom, #eeedf2 1%, #717171 4%, #2b2b2b 84%);
  border: 1px solid #444;
  border-radius: 5px;
  color: #fff;
  line-height: 36px;
  padding-left: 20px;
  font-size: 18px;
}
/*3本線の描画*/
#panel-btn{
  float:right;
  display:inline-block;
  position:relative;
  width:36px;
  height:36px;
  border-radius:5px;
  padding-left:10px;
  margin-left:10px;
  background:#fff;
}
#panel-btn-icon{
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  width:22px;
  height:2px;
  margin: -1px 0 0 -11px;
  background:#2196F3;
  transition:0.3s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display:block;
  content:'';/*空要素*/
  position:absolute;
  top:50%;
  left:50%;
  width:22px;
  height:2px;
  margin-left:-11px;
  background:#44BBA6;
  transition:0.3s;
}
#panel-btn-icon:before{
  margin-top:-8px;
}
#panel-btn-icon:after{
  margin-top:6px;
}
#panel-btn .close{
  background:transparent;/*透明*/
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top:0;
}
#panel-btn .close:before{
  transform:rotate(-45deg);
}
#panel-btn .close:after{
  transform:rotate(-135deg);
}
#panel{
  display:none;
  width:100%;
  background:#333;
}
/*  ドロップダウンメニュー終了
---------------------------------------------------------- */
#info, #facebook, #contact{
	float:none;
	margin:0 auto 30px;
}
#footer ul, #footer p{
	width:280px;
	margin:0 auto 30px;
}
#footer ul li{
	margin:10px 20px;
}
}