@charset "utf-8";

#smpMenu{ display:block;}
#smpMenuList{ display:block;}
#blackOut{ display:none; }
#blackOut2{ display:none; }
#SubMenu{ display:none;}


a#smpMenu:hover{ opacity: 1;}
a#smpMenu:active{ opacity: 1;}
a#smpMenu:visited{ opacity: 1;}



@media(min-width:751px){

/* ---------------------------------------------------------------------------------
パソコン*/
	

#blackOut{ display:none; background:rgba(255,255,255,0.5); position:fixed; width:100%; height:100%; z-index:9950; cursor: pointer; }
#blackOut2{ display:none; background:rgba(255,255,255,0.8); position:fixed; width:100%; height:100%; z-index:9950;}

#smpMenu{width:100px; height:100px;display:block; position:fixed; top:20px; right:20px; z-index:20050;}

    
#smpMenu.menuOff{background:url(../images/sp/menu_onbtn.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}
#smpMenu.menuOn{ background:url(../images/sp/menu_offbtn.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}



#smpMenuList{display:block;z-index:10000; position:fixed; background:#000; top: 140px;
 background-size:cover; width:350px;margin:0; height:auto;margin-top:0;right:-350px;
 box-sizing:border-box;border-radius: 5px;overflow: hidden}

    
    
#smpMenuList >header{ height:120px; display:table; width:100%; background: #222;}
#smpMenuList >header h2{font-size:32px; line-height:1em; display:table-cell; vertical-align:middle; background:url(../images/sp/hanbrg_bar.png) no-repeat left center; padding-left:0; color: #fff; font-weight: 800; text-align: center;
font-family: futura-pt-bold, sans-serif;
font-weight: 700;
font-style: normal;}
    
#smpMenuList >header a{ display:table-cell; text-align:right;padding-right:30px; vertical-align:middle;}
#smpMenuList >header a img{ width:199px; height:60px;}



#smpMenuList ul{ }
#smpMenuList ul li{ width:100%; height:70px; display:table; border-bottom: 1px dashed #222; float:none; font-weight:normal; clear: both;}

#smpMenuList ul li a{ display:table-cell; vertical-align:middle; color:#fff; font-weight:normal;
font-size:16px; text-align:center;padding:0 0 0 0;  position:relative;  margin: 0; width: 100%;
border: 0 !important; width: 100%; 
    }
    

    #smpMenuList ul li a:last-child{ border-left: 1px solid #ddd;}
     #smpMenuList ul li a.menuhalf{width: 50%;}

#smpMenuList ul li a::after{
	content:"";
	display: block;
	width:8px;
	height:8px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	left:15px;
	top:50%;
	margin-top:-4px;
}

#smpMenuList ul li a:hover{opacity: 0.7}

.closeBtn{ display:block; text-align:center;padding:5px 10px; width: 100px; background: #fff;margin-top: 40px; margin:  20px auto 0; color: #002864 !important; letter-spacing: 0.3em;
font-weight: 600;
font-style: normal;
    border-radius: 5px;
    margin-bottom: 20px;
    }

    .closeBtn img{ width: 200px;}
    
} /* Responsive End */













@media(max-width:750px){
	

/* ---------------------------------------------------------------------------------
スマホ*/
	

#blackOut{ display:none; background:rgba(255,255,255,0.5); position:fixed; width:100%; height:100%; z-index:9950; cursor: pointer; }
#blackOut2{ display:none; background:rgba(255,255,255,0.8); position:fixed; width:100%; height:100%; z-index:9950;}

#smpMenu{width:120px; height:120px;display:block; position:fixed; top:20px; right:20px; z-index:20050;}

#smpMenu.menuOff{background:url(../images/sp/menu_onbtn.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}
#smpMenu.menuOn{ background:url(../images/sp/menu_offbtn.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}



#smpMenuList{display:block;z-index:10000; position:fixed; background:#000 ; top: 160px;
 background-size:cover; width:700px;margin:0 25px; height:auto;margin-top:0;right:-750px;
    border-radius: 15px;
border:none; box-sizing:border-box;}


#smpMenuList >header a{ display:table-cell; text-align:right;padding-right:30px; vertical-align:middle;}
#smpMenuList >header a img{ width:199px; height:60px;}



#smpMenuList ul{ padding: 10px;}
#smpMenuList ul li{ ;width:100%; height:120px; display:table; float:none; border:1px dashed #333;font-weight:normal; clear: both;}

#smpMenuList ul li a{ display:table-cell; vertical-align:middle; color:#fff; font-weight:normal;
 font-size:30px; text-align:center;padding:0 0 0 0;  position:relative; margin-left:0; margin-right:0;
      border: 0 !important; 
    }
    

    #smpMenuList ul li a:last-child{ border-left: 1px solid #ddd;}
     #smpMenuList ul li a.menuhalf{width: 50%;}
    
#smpMenuList ul li a::after{
	content:"";
	display: block;
	width:8px;
	height:8px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	left:20px;
	top:50%;
	margin-top:-4px;
}

#smpMenuList ul li a:hover{ text-decoration:none; background-color:#6e4e43; color:#fff;}

.closeBtn{ display:block; text-align:center;padding:40px; width: 200px; background: #fff;padding: 10px; margin-top: 40px; margin:  40px auto 60px; color: #002864 !important; letter-spacing: 0.3em;
    border-radius: 15px;
font-weight: 600;
font-style: normal;      
    }

    .closeBtn img{ width: 200px;}
    
} /* Responsive End */