@charset "utf-8";


html, body{
	width: 100%;
	font-size: 100%;
}

body {
  	font-size: 22px;margin: 0;
	font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: rgb(223, 223, 223);
	-webkit-text-size-adjust: 100%;
}





/* ----------------------- */
/* ---- ヘッダーの設定 ---- */
/* ----------------------- */
img {border: none;max-width: 100%}
.header{
	position: relative;
	width: 100%;
	max-height: 85vh;
}
#g-nav{
	display: none;
}
.top{	
	width: 100%;
	max-height: 85vh;
	object-fit: cover;
	vertical-align: top;
}
.logo{
	position: absolute;
	top: 30%;
	width: 70%;
	margin-left: 15%;
}
#menu-bar{
  	display: flex;
	flex-wrap: nowrap;
	width: 90%;
	margin-left: 5%;
	background-color: rgb(47, 47, 47);
	text-align: center;
	align-items: stretch;
	vertical-align: middle;
	padding: 0;
}
#menu-bar div {
	display: flex;
	color: rgb(217, 217, 217);;
	align-items: center;
	justify-content: center;
	flex:20%;
}
#menu-bar div:hover,
.menu-unit:hover{
	background-color: rgb(217, 217, 217);
	color: rgb(47, 47, 47);
}



/* ----------------------- */
/* ---- ここからメイン ---- */
/* ----------------------- */

h1{
	font-size: 30px;
}
h2, h3{
	font-size: 28px;
}
h4, p, details{
	font-size: 24px;
}
#new, #address, #member, #intro, .contents{
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 1%;
	margin-bottom: 1%;
}

h1 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  text-align: center;
}
h1:before {
  content: '';
  position: absolute;
  bottom: -15px;
  display: inline-block;
  width: 100%;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: rgb(47, 47, 47);
  border-radius: 2px;
}
a {
	color: #333;
}
.pagetop {
	text-align: right;
}
.pagetop a {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	background: rgb(47, 47, 47);
	color: #fff;
	border-radius: 50%;
	width: 40px;
	line-height: 40px;

	position: fixed;
	bottom: 20px;
	right: 50px;
}

table, figure{
	text-align: center;
}

.narrow-member{
	display: none;
}
.wide-memnber{
	display: block;
}

table{
	width: 100%;
}

/* ----------------------- */
/* ------- フッター --------*/
/* ----------------------- */
#contact{
	position: relative;
    background-color: rgb(47, 47, 47);
    height: 300px;
    color: rgb(228, 224, 224);
	text-align: center;
	justify-content: center;
}
#home_link:visited{
color:rgb(217, 217, 217);
}



/*テーブル
---------------------------------------------------------------------------*/
/*tテーブルブロック設定*/
.ta1 {
    width: 96%;
    margin: 0px auto 15px;
}
.ta1, .ta1 td, .ta1 th {
    border: 2px solid #3e6680;  /*テーブルの枠線の幅、線種、色*/
    padding: 10px;          /*テーブル内の余白*/
    word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
    width: auto;
    text-align: left;   /*左よせ*/
    background: #eee;   /*背景色*/
}
/*テーブルの左側ボックス*/
.ta1 th {
    width: 30%; /*幅*/
    text-align: center; /*センタリング*/
}

/* ----------------------- */
/* ----- レスポンシブ ----- */
/* ----------------------- */



@media screen and (max-width:1000px){

	
	.narrow-member{
		display: block;
	}
	.wide-member{
		display: none;
	}
	

	/* ----------------------- */
	/* - ハンバーガーメニュー -- */
	/* ----------------------- */
	#g-nav, #g-nav span{
		display: block;
	}
	#menu-bar{
		display: none;
	}
	#g-nav{
		position:fixed;
		z-index: 999;
		top:0%;
		left:120%;
		width:40%;
		height: 100vh;
		background:rgba(153, 153, 153, 0.904);
		transition: all 0.6s;
	}
	#g-nav span{
		position:fixed;
		top:0%;
		left:120%;
		width:100%;
		height: 100vh;
		background:rgba(0, 0, 0, 0.5);
		transition: all 0.6s;
	}
	#g-nav.panelactive{
		top: 0;
		left: 70%;
	}
	#g-nav.panelactive #g-nav-list{
		position: fixed;
		z-index: 999; 
		width: 100%;
		height: 100vh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	#g-nav ul {
		position: absolute;
		z-index: 999;
		top:10;
		left:0;
	}
	#g-nav li{
		list-style: none;
		text-align: left; 
	}
	#g-nav li a{
		color: #333;
		text-decoration: none;
		padding:10px;
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: bold;
		font-size: 18px;
	}

	/* ----------------------- */
	/* -- ハンバーガーボタン -- */
	/* ----------------------- */
	.openbtn{
		position:fixed;
		z-index: 9999;
		top:10px;
		right: 10px;
		cursor: pointer;
		width: 100px;
		height:100px;
	}		
	.openbtn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 14px;
		height: 3px;
		border-radius: 2px;
		background-color: #666;
		width: 45%;
	}
	.openbtn span:nth-of-type(1) {
		top:15px;	
	}
	.openbtn span:nth-of-type(2) {
		top:31px;
	}
	.openbtn span:nth-of-type(3) {
		top:47px;
	}
	.openbtn.active span:nth-of-type(1) {
		top: 18px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}
	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}
	.openbtn.active span:nth-of-type(3){
		top: 30px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}
}