@charset "utf-8";
/* CSS Document */
:root {
	--main-bg-color: rgba(255, 255, 255, 0.9);
	--main-key-color: white;
	--main-text-color: #3a546b;
	--square-color: rgba(255, 255, 255, 0);
	--bg2-color: rgba(255, 255, 255, 0.9);
}
.navwrap{
	margin-top: 10px;
	width:100%;
	align-self: center;
	justify-content: space-between;
}
nav{
	width:100%;
	align-self: center;
}
nav ul{
    display:flex;
    justify-content: space-around;
}
.gnav li{
	text-align: center;
}
.gnav a{
	display: block;
	padding:10px;
	width: 100%;
	color: var(--main-text-color);
	text-decoration: none;
	transition: .5s;
	border-bottom: 2px solid rgba(255, 255, 255, 0);
	font-weight: 600;
}
.gnav a:hover{
	color: var(--key-color);
	border-bottom: 2px solid var(--key-color);
	opacity:.7; 
}
#btn_open{
	display: none;
}
aside {
	width:0px; height:0px;
}/* firefoxt対策 */

@media screen and (max-width: 768px) {
	.navwrap{
		flex-direction: column;
	}
	.gnav{
		flex-direction: column;
	}
	.gnav li{
		margin:0 auto;
		padding:0 0;
		widows: 300px;
	}
	.gnav a{
		padding-top:30px;
		padding-bottom:10px;
		color: var(--main-text-color);
	}
	#gnav_1 .navwrap{
		background: var(--main-key-color);
	}
	#gnav_1 a{
		width:100%;
		height:100%;
	}
	label{
		display:block;
		width: 50px;
		height:50px;
		position: fixed;
		right:5px;
		top:5px;
		background: var(--square-color);
	}
	label span{
		width: 50%;	
		height: 3px;
		display: block;
		position:absolute;
		left: 25%;
		background:  var(--main-text-color);
		transition: all 0.2s linear;
	}
	label span:nth-of-type(1){
		top:15px;
		transform: rotate(0);
	}
	label span:nth-of-type(2){
		top:23px;
		transform: scale(1);
	}
	label span:nth-of-type(3){
		bottom:15px;
		transform: rotate(0);
	}
	#btn_open:checked+label span:nth-of-type(1){
	/*	E + Fは「隣接セレクタ」。
		E 要素の「直後」に現れる F 要素という意味。
		詳しくは、「css　結合子」で検索*/
		top: 15px;
		transform-origin: top right;
		transform:rotate(-45deg);
	}
	#btn_open:checked+label span:nth-of-type(2){
		transform:scale(0);
	}
	#btn_open:checked+label span:nth-of-type(3){
		bottom: 15px;
		transform-origin: bottom right;
		transform:rotate(45deg);
	}
	#gnav_1{
		margin-top: 0;
		width:100%;
		padding: 80px 0 600px;
		background: var(--bg2-color);
		overflow: hidden;
		position: fixed;
		z-index: 100;
		top: 0;
		right: -100%;
		transition: left .5s, right .5s;
	}
	#gnav_1 ul{
		margin: 0;
		padding-left: 0;
	}
	#gnav_1 li{
		line-height: 1.5;
	}
	#gnav_1 a{
		text-decoration: none;
	}
	#btn_open:checked ~ #gnav_1{
	/*E ~ Fは「関節セレクタ」。
	E 要素の「後に現れる」 F 要素.
	E要素とF要素の間に、他の要素が入っていてもcssが効く。
	注意：E要素とF要素は"兄弟要素"でなければならない）*/
		right: 0;
	}
	.btn_menu{
		cursor: pointer;
		z-index:1000;
	}

	/* ***hb*** */
	.hb{
		position: static;
		margin:60px auto 0;
		text-align:center;
		width:150px;
	}
	.hb_logo img{
		width:100%;
		width:100px;
	}
	.hb_logo a{
		display: inline-block;
	}
	.hb_logo a:hover{
		-webkit-transform: scale(1.05, 1.05);
		-ms-transform: scale(1.05, 1.05);
		transform: scale(1.05, 1.05);
		opacity: .6;
		transition: .5s;
	}
	.hb address{
		color: #990033;
		font-style: normal;
		font-size:14px;
	}
	/* menu */
	.btn_menu::after {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -3px;
		content: 'MENU';
		display: block;
		width: 100%;
		color: var(--main-text-color);
		font-size: 12px;
		text-decoration: none;
		text-align: center;
		white-space: nowrap;
		transition: all .4s;
	}
	#btn_open:checked ~ .btn_menu::after{
		content: 'CLOSE';
	}
}/*768px*/
@media screen and (max-width: 480px) {
	#gnav_1{
		margin: 0;
		width: 100%;
		padding: 50px 0 600px;
	}
	.gnav li{
		/* width:85%; */
		margin: 0 auto;
	}
	.gnav a{
		padding-top:22px;
	}
}/*480px*/