@charset "UTF-8";

.hb-navigation {
position: absolute;
top: 24px;
right: 6px;
width: 34px;
height: 30px;
background: none;
cursor: pointer;
}
.hb-navigation .button {
position: relative;
position: fixed;
width: 34px;
height: 3px;
background: #213491;
transition: all .5s;
-webkit-transition: all .5s;
z-index: 9999;
}
.hb-navigation .button::before, .hb-navigation .button::after {
position: absolute;
width: 34px;
height: 3px;
background: #213491;
transition: all .5s;
-webkit-transition: all .5s;
transition-delay: .5s;
}
.hb-navigation .button::before {
content:'';
top: -11px;
}
.hb-navigation .button::after {
content:'';
top: 11px;
}
.hb-navigation .action.button {
position: relative;
position: fixed;
width: 31px;
height: 3px;
background:none;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
.hb-navigation  .action.button::before {
position:absolute;
top:0;
width: 31px;
height: 3px;
background:#fff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.hb-navigation .action.button::after {
position:absolute;
top:0;
width: 31px;
height: 3px;
background: #fff;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.navigation-contents {
position: relative;
top: 0;
left: 0;
background: rgba(12,61,19,.75);
width: 100%;
margin: auto;
text-align: left;
opacity:0;
transition: all .5s;
-webkit-transition:all .5s;
transform:translateY(-100%);
-webkit-transform:translateY(-100%);
z-index: 9998;
}
.navigation-contents.open {
position: relative;
position: fixed;
opacity: 1;
transform: translateY(0);
-webkit-transform: translateY(0);
}
.section {
position: absolute;
background: rgba(12,19,61,.75);
}
.section.menu p {
	 font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "MS PGothic", sans-serif;
	font-size: 16px;
	font-weight: bold;
	margin: 3px 0px;
	padding: 12px 0px 12px 6px;
	letter-spacing: 1px;
	line-height: 1.2em;
	border-bottom: solid 1px #999;
}
.section.menu p a { color:#fff; text-decoration: none; }
.section.menu p a .sub { color: #cde; font-size: 14px; font-weight: bold; letter-spacing: 0px; }

@media (max-width:767px){
.section.menu p {
	font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "MS PGothic", sans-serif;
	font-size: 18px;
	font-weight: bold;
	margin: 3px 0px;
	padding: 10px 0px 10px 6px;
	letter-spacing: 1px;
	line-height: 1.1em;
	border-bottom: solid 1px #999;
}
.section.menu p a { color:#fff; text-decoration: none; }
.section.menu p a .sub { color: #cde; font-size: 14px; font-weight: bold; letter-spacing: 0px; }
}
section {
	transition:all 1s;
	-webkit-transition:all 1s;
	}

section.close{
	font-weight:100;
	transform:scale(.85,.85);
	-webkit-transform:scale(.85,.85);
}