@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.95); position:fixed; width:100%; height:100%; z-index:9950; cursor: pointer; }
#blackOut2{ display:none; background:rgba(255,255,255,0.95); 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/menu_onbtn.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}
#smpMenu.menuOn{ background:url(../images/menu_offbtnBK.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}
#smpMenu.bkBtn.menuOff{background:url(../images/menu_onbtnBK.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}
#smpMenu.bkBtn.menuOn{ background:url(../images/menu_offbtnBK.png) no-repeat left top; background-size:contain; text-indent:-9999px;overflow:hidden;display:block;}


#smpMenuList{display:block;z-index:10000; position:fixed;   opacity: 0; pointer-events:none;
 background-size:cover; width:350px;margin:0; height:auto;margin-top:0;
 box-sizing:border-box;border-radius: 5px;overflow: hidden;
     top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
    }

    
    
#smpMenuList >header{ height:60px; display:table; width:100%; }
#smpMenuList >header h2{font-size:16px; line-height:1em; display:table-cell; vertical-align:middle; color: #111; font-weight: normal; text-align: center;

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:50px; display:table; border-bottom: 1px solid #ccc; float:none; font-weight:normal; clear: both;}

#smpMenuList ul li a{ display:table-cell; vertical-align:middle; color:#333; font-weight:normal;
font-size:14px; 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:1px solid #666;
	border-right:1px solid #666;
	-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: #111 !important; letter-spacing: 0.3em;
font-weight: 600;
font-style: normal;
    margin-bottom: 20px;
    }

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













@media(max-width:750px){
	

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

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

#smpMenu{width:200px; height: 50px; display:block; position:fixed; top:40px; right:0px; z-index:20050;}

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


#smpMenuList{display:block;z-index:10000; position:fixed;   opacity: 0; pointer-events:none;
 background-size:cover; width:550px;margin:0; height:auto;margin-top:0;
 box-sizing:border-box;border-radius: 5px;overflow: hidden;
     top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
    }

    
    
#smpMenuList >header{ height:60px; display:table; width:100%; }
#smpMenuList >header h2{font-size:16px; line-height:1em; display:table-cell; vertical-align:middle; color: #111; font-weight: normal; text-align: center;

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:90px; display:table; border-bottom: 1px solid #ccc; float:none; font-weight:normal; clear: both;}

#smpMenuList ul li a{ display:table-cell; vertical-align:middle; color:#333; font-weight:normal;
font-size:30px; 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:1px solid #666;
	border-right:1px solid #666;
	-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: #111 !important; letter-spacing: 0.3em;
font-weight: 600;
font-style: normal;
    margin-bottom: 20px;
    }

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