@charset "UTF-8";

/*

Cascading Style Sheets : home.css

- Last Updated on 2014. 08. 28
- (c) coro film - https://fochoshi.me/

*/

#GlobalNav {
	width: 980px;
	margin: 20px auto;
	padding: 10px 0;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	position:relative;
	}
	#GlobalNav li {
		width: 25%;
		text-align: center;
		float: left;
		}
		#GlobalNav li a {
			display: block;
			border-left: 1px solid #333;
			padding: 12px 0;
			}
			#GlobalNav li:nth-child(1) a{
				border-left:none;
			}
			#GlobalNav li a:hover {
				color: #E07D1E;
				font-weight: bold;
				}

	#Container {
		background: #000000;
		padding:50px 0;
		}
	#preamble {
		width: 980px;
		margin: 0 auto;
		padding: 50px 0;
		position:relative;
		}
		
	#globalFooter {
		background:#595757;
		color:white;
		padding:20px 0;
		line-height:1.5em;
		position: relative;
		}
		#globalFooter > div{
			width:890px;
			margin:0 auto;
			text-align:left;
			}
			#globalFooter > div h3{
				font-size:1.2em;
				}
				#globalFooter > div h3 span{
					font-size:0.9em;
					margin-left:1em;
				}
			#globalFooter > div dl{
				letter-spacing:1px;
				padding:10px 0 0 0;
				display:flex;
				}
				#globalFooter > div dl dt{
					text-align:right;
					}
					#globalFooter > div dl dt strong{
						text-align:right;
						display:block;
						margin-right:1.5em;
						font-weight:bold;
						position: absolute;
						top: 20px;
						right: 17%;
						margin: 0;
					}

				#globalFooter > div dl dd{
					margin:0 0 0 .5em;
					}
					#globalFooter > div dl dd span{
						font-size:0.9em;
						}

#AdminName {
	font-size: 146.2%;
}

#ProjectName {
	font-size: 107.7%;
}

#Copyright {
	background: #595757;
}

#Address {
	margin-left: 30px;
	padding-top: 65px;
	color: #FFF;
	font-size: 92.3%;
	letter-spacing: 0.1em;
	float: left;
}

#Copyright small {
	margin: 67px 30px 7px 0;
	float: right;
}


#nkhp2014{
	position:absolute;
	bottom:130px;
	left:50%;
	margin:0 0 0 220px;
}



#NewsBtn {
	width: 160px;
	position: absolute;
	bottom: 270px;
	right: 170px;
}






#GoFormImg {
	width: 167px;
	height: 181px;
	margin: 20px auto 0;
}

#GoForm {
	width: 242px;
	height: 59px;
	margin: 0 auto;
}

#Access {
	width: 100%;
	padding: 100px 0;
	border-bottom: 1px solid #000;
	background:white;
}

#Access p {
	width: auto;
	margin: 0 auto;
}


.btn{
	display: none;
}

@media screen and (max-width: 768px) {
	#GlobalNav{
		width: 100%;
	}
	#globalFooter > div dl dt strong{
		right: 2%;
	}
}

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


	/*header*/
	header{
		margin: 25px 0;
	}

	.btn{
		display: block;
	}
	button {
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: inherit;
		vertical-align: middle;
		text-align: inherit;
		font: inherit;
	
		-webkit-appearance: none;
		appearance: none;
	}

	/**************** 以下、ハンバーガーボタンのスタイリング ****************/
	.btn {
		/* ボタンの配置位置  */
		position: fixed;
		top: 0px;
		right: 10px;
		/* 最前面に */
		z-index: 10;
		/* ボタンの大きさ  */
		width: 48px;
		height: 48px;
	}

	/***** 真ん中のバーガー線 *****/
	.btn-line {
		display: block;
		/* バーガー線の位置基準として設定 */
		position: relative;
		/* 線の長さと高さ */
		width: 100%;
		height: 4px;
		/* バーガー線の色 */
		background-color: #d6d5d5;
		transition: .2s;
	}

	/***** 上下のバーガー線 *****/
	.btn-line::before , .btn-line::after {
		content: "";
		/* 基準線と同じ大きさと色 */
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #d6d5d5;
		transition: .5s;
	}

	.btn-line::before {
		/* 上の線の位置 */
		transform: translateY(-16px);
		right: 0px;
	}

	.btn-line::after {
		/* 下の線の位置 */
		transform: translateY(16px);
		right: 0px;
	}

	/***** メニューオープン時 *****/
	.btn-line.open {
		/* 真ん中の線を透明に */
		background-color: transparent;
	}

	.btn-line.open::before , .btn-line.open::after {
		content: "";
		background-color: #333;
		transition: .2s;
	}

	.btn-line.open::before {
		/* 上の線を傾ける */
		transform: rotate(45deg);
	}

	.btn-line.open::after {
		/* 上の線を傾ける */
		transform: rotate(-45deg);
	}



	#GlobalNav {
		/* メニューを縦に */
		display: flex;
		flex-direction: column;
		position: fixed;
		/* メニューの位置マイナス指定で画面外に */
		right: -70%;
		width: 70%;
		top: 50px;
		height: 100vh;
		color: #efefef;
		transition: .3s;
	}

	.menu-list {
		/* メニューテキスト位置をリスト内中心に */
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.menu-list:hover {
		background-color: rgba(255, 255, 255, .5);
		color: #333;
		cursor: pointer;
		transition: .3s;
	}

	/***** メニューオープン時位置0にして画面内に *****/
	#GlobalNav.open {
		border-top: none;
			position: fixed;
			right: 0;
			z-index: 5;
			margin: 10px auto 0;
	}
	#GlobalNav.open ul{
		background: rgba(255,255,255,.9);
	}
	#GlobalNav.open li{
		float: inherit;
			width: 100%;
			text-align: left;
			border-top: 1px solid;
			padding: 10px 10px;
	}
	#GlobalNav.open li a{
		border-left: none;
		display: block;
	}

	/*footer*/
	#globalFooter > div{
		width: 100%;
    padding: 0 5%;
	}
	#globalFooter > div dl{
		display: block;
	}
	#globalFooter > div dl dt {
    text-align: left;
	}
	#globalFooter > div dl dt strong {
    text-align: left;
    display: block;
    margin-right: auto;
    font-weight: bold;
    margin-bottom: 20px;
	}

	#globalFooter > div dl dt strong{
		text-align:right;
		display:block;
		margin-right:1.5em;
		font-weight:bold;
		position: inherit;
		top:inherit;
		right: inherit;
		margin: inherit;
	}

}