/* Scss Document */
@keyframes slideInLeft {
  0% {
    transform: translate3d(-500px, 0, 0);
	overflow: hidden;}
  100% {
    transform: translate3d(0, 0, 0); } }

@keyframes slideOutLeft {
  0% {
    transform: translate3d(0, 0, 0);
	overflow: hidden;}
  100% {
    transform: translate3d(-500px,0, 0);
    overflow: hidden;} }

* {
  box-sizing: border-box; }

body:after {
  background-color:rgba(255,255,255,0.98);
  content: '';
	height:100%;
  left: 0;
  opacity: 0;
  visibility:hidden;
  padding: 0;
  position: absolute;
  top: 0;
  transition: all 0.7s ease;
	z-index:100;
	position:fixed;
	box-shadow: 1px 1px 1px #eee;
}


body.open {
	z-index:-9999;
	
 }

body.open:after {
  opacity:1;
  visibility: visible; }


.b-nav {
	height:100%;
	width:100%;
	background-color:rgba(255,255,255,0.98);
	position:fixed;
	overflow:auto;
	z-index:110;
	top:0;
}

.b-nav.open #menu{
	position:relative;
	top:0;
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background :rgba(231,231,231,0.5);
	border-left: solid 1px #eee;
}

::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 5px;
	box-shadow: inset 0 0 0 2px #eee;
}

.b-nav ul{
	display: flex;
	flex-wrap: wrap;
}


.b-nav:not(.open) {
    visibility: hidden; }


.b-nav .title{
	width:50%;
    color: #444444;
    list-style-type: none;
    padding:5%;
    text-align: left;
	font-weight:600;
	font-size:1.2em;
    transform: translateY(-700px); }

.b-nav img{
	width: 90px;
    padding: 0 15px 0 10px;
}

  .b-nav li {
	  width:calc(100%);
	  border-bottom:0.6px solid #ccc;
	  font-size:1em;
    list-style-type: none;
	  margin:2% 1% 1%;
	  display: flex;
  justify-content: center;
  align-items: center;
}

.b-nav li.single{
	  width:calc(100%);
	  border:0.6px solid #ccc;
	  font-size:1em;
    list-style-type: none;
	  margin:2% 1% 1%;
    text-align: center;
    line-height:0.8em;
}


.b-nav li div:hover{
	background:#bbb;
	color:#fff;
	transition: 0.5s;
}

.b-nav #menu:not(.open) ,
.b-nav:not(.open) {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: slideOutLeft; }

.b-nav.open,
.b-nav.open #menu{
	visibility: visible; 
      animation-duration: 0.5s;
      animation-fill-mode: both;
      animation-name: slideInLeft;
}



.b-nav li.list-title{
	width:100%;
	display:block; 
	font-size:1.6em;
    padding:3% 0;
	background:#696969;
	color:#fff;
	margin:45px 0 0;
	text-align: center;
}



.b-link {
  background: transparent;
  color: #363636;
  font-size: 1.4em;
  font-weight: 400;
  text-decoration: none;
  transition:0.5s;
  width: 100%; 
	display: flex;
  justify-content:flex-start;
  align-items:center;
	text-align: left;
  }

.b-link:before {
	content:" >";
	position:absolute;
	right:0;
	font-weight:bold;
	font-size:1.2em;
	padding:0 20px;
  }

  /*.b-link:hover, .b-link--active {
    border-left: #444444 solid 2px;
    padding-left: 30px; }*/

.b-menu {
  /*background-color:rgba(255,255,255,0.80);*/
  cursor: pointer;
  display: inline-block;
  height: 38px;
  padding-left: 6px;
  padding-top: 13px;
  position: relative;
  transition: all 0.7s;
  user-select: none;
  width: 40px;
  z-index: 200; 
}
/*
  .b-menu:hover {
    border: #444444 solid 2px; }*/

.b-bun-menu::before {
	content:"menu";
  position: relative;
	top:8px;
	left:-3.5px;
  transition: all 0.7s;
font-size:0.6em;
}


.b-bun {
  background: #444444;
  position: relative;
  transition: all 0.7s; }
  .b-bun--top {
    height: 2px;
    top: 0;
    width: 18px; }
  .b-bun--mid {
    height: 2px;
    top: 5px;
    width: 18px; }
  .b-bun--bottom {
    height: 2px;
    top: 10px;
    width: 18px; }


.b-container {
  left: 5px;
  position: fixed;
  top:-1px;
z-index:999;
}

  .b-container:hover:not(.open) .bun-top,
  .b-container:hover:not(.open) .bun-mid,
  .b-container:hover:not(.open) .bun-bottom {
    background: white; }
  .b-container.open .b-main {
    border: #444444 solid 2px; }
  .b-container.open .b-bun--top {
    background: #444444;
    top: 7.5px;
    transform: rotate(45deg); }
  .b-container.open .b-bun--mid {
    opacity: 0; }
  .b-container.open .b-bun--bottom {
    background: #444444;
    top: 3.5px;
    transform: rotate(-45deg); }
  .b-container.open .b-brand {
    color: #444444; }



/* 
black-bg(ハンバーガーメニュー解除用bg)
=================================== */
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 100;
}

/*ハンバーガーメニューが開いたら表示*/
.open .black-bg {
  opacity: 0.3;
  visibility: visible;
}