/* 浮き出しmodal用 */
/* ○○用 */
#global_nav {
	display:block;
    clear: both;
    margin: 0 auto;
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 100000;
}

#menu_button {
	z-index:999;
	float:right;
	width:50px;
	margin:3px;

}
#menu_button {
	z-index:10020;
	position:fixed;
	top:10px;
	right:0;
	width:50px;
	height:50px;
	border-radius:25px;
	-moz-border-radius : 25px;
	-webkit-border-radius : 25px;
	margin:3px;
	background-color: transparent;
	opacity:0.8;
}
#menu_button a{
	z-index:10030;
	height:100%;
	width:100%;
	position: absolute;
	left:0;
	top:0;
	cursor: pointer;
}
.menu-line1,
.menu-line2,
.menu-line3 {
	position: absolute;
	left:10px;
	width: 30px;
	height: 2px;
	background-color: #4b4948;
	transition-duration:1s;
}
.modal-close .menu-line1,
.modal-close .menu-line2,
.modal-close .menu-line3{
    background-color: #000;
}
.modal-open {
  display:block;
}
.menu-line1 {
	top:12px;
}
.menu-line2 {
	top:23px;
}
.menu-line3 {
	bottom:14px;
}
.modal-close {
  display:block;
}
a.modal-close > .menu-line1 {
  -webkit-transform: translateY(11px) rotate(-45deg);
  transform: translateY(11px) rotate(-45deg);
}
a.modal-close > .menu-line2 {
  opacity: 0;
  transition-duration:0.5s;
}
a.modal-open > .menu-line2 {
  opacity: 1;
  transition-duration:0.3s;
}
a.modal-close > .menu-line3 {
  -webkit-transform: translateY(-11px) rotate(45deg);
  transform: translateY(-11px) rotate(45deg);
}

#menu {
	width: 250px;
	margin:0px auto;
	padding:0px;
	float:right;
	overflow:hidden;
	margin-top:5px;
	display:none;
	text-decoration: none;
	z-index:10010;
}

#menu h2{
	width: calc(100% - 10px);
	margin:0px auto;
	margin-top:0px;
	padding:11px 0px 9px 10px;
	border-bottom: 1px solid #aaa;
	font-weight:bold;
	background: #ffffff url(../img/l_h2_bk.jpg) no-repeat top left;
	background-position: top right;
	background-size:cover;
}
/*#menu ul{
	list-style-type:none;
	width: 100%;
	margin:0px auto;
	padding:0px;
}

#menu li{
	width: 100%;
	margin:0px auto;
	padding:3px 1%;
	border-bottom: 1px solid #aaa;
	background: #f0f8ff;
}

#menu li:hover,
#menu li:active,
#menu li.li_here{
	border-bottom: 1px solid #aaa;
	background:#afeeee;
	
}

#menu ul li a{
 	margin:0px 0px 0px 0px;
	padding:5px 5px 5px 10px!important;
	display:block;
	text-decoration:none;
}*/
#menu-content {
    position:relative;
    float:right;
    width:calc(85% + 4px);
    max-width:300px;
    margin:0;
    padding:0px;
    text-align: left;
}

.modal-fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}

.b_white {
	display:block;
	width:calc(100% - 6px);
	padding:3px;
	margin: 0 auto;
	text-align:center;
	border-bottom:1px solid #aaa;
	background:#FFF;
}
.b_white a{
	/*line-height:5;*/
	width:80%;
	font-size:80%;
	color:#000000;
	text-decoration:none;
	display:block;
	margin:0px auto ;
	padding:3px;
	vertical-align:middle;
	border: #000080 1px solid;
	border-radius: 20px;
	box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
	background:#ffffff;
}

.b_white a:hover{
	border-radius: 20px;
	background:#00ffff;
	background: -moz-linear-gradient(top, #99eeff 0% ,#eeffff 3%, #0099ff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99eeff), color-stop(3%,#eeffff), color-stop(100%,#0099ff));
	background: -webkit-linear-gradient(top, #99eeff 0%, #eeffff 3%,#0099ff 100%);
	background: -o-linear-gradient(top, #99eeff 0%,#eeffff 3%,#0099ff 100%);
	background: -ms-linear-gradient(top, #99eeff 0%, #eeffff 3%,#0099ff 100%);
	background: linear-gradient(#99eeff 0%, #eeffff 3%,#0099ff 100%);
}

#menu-content p {
    margin:0;
    padding:0;
}
	
.modal-overlay {
    z-index:10000;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.75);
}

.modal-wrap {
    z-index:10010;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
}
@media screen and (max-width: 767px) {
    .modal-wrap {
        cursor: pointer;
    }
}
.modal-open {
    color:#00f;
    text-decoration:none;
}

.modal-open:hover {
    cursor:pointer;
    color:#f00;
}

.modal-close {
    color:#00f;
    text-decoration:none;
}

.modal-close:hover {
    cursor:pointer;
    color:#f00;
}

.slider_open {
  display:block;
  animation: slide_open 0.5s ease 0s 1 normal;
}
@keyframes slide_open {
  0%{
    transform: translateX(250px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
.slider_close {
  animation: slide_close 0.5s ease 0s 1 normal;
  animation-fill-mode:both;
}
@keyframes slide_close {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(calc(85% + 4px));
    opacity: 0;
  }
}