@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){

/* ---------------------------------------------------------------------------------
パソコン*/
	
#spMenuBox{ display:none;}



} /* Responsive End */













@media(max-width:750px){
	

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


.openbtn1{
  position: relative;/*ボタン内側の基点となるためrelativeを指定*/
  background:none;
  cursor: pointer;
    width: 40px;
    height:40px;
  border-radius: 5px;
    display: block;
}



/*ボタン内側*/
.openbtn1 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 0px;
    height: 2px;
  background: #000;
    width: 80%;
    z-index: 1000;
    
  }

.themeBlack .openbtn1 span{
  background: #000;
  }
.themeWhite .openbtn1 span{
  background: #000;
  }

.openbtn1 span:nth-of-type(1) {
  top:28px; 
}

.openbtn1 span:nth-of-type(2) {
  top:45px;
}

.openbtn1 span:nth-of-type(3) {
  top:62px;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn1.menuOn span:nth-of-type(1) {
    top:38px;
    left: 9px;
    transform: translateY(6px) rotate(-45deg);
    width: 60%;
  background: #000;
    
}

.openbtn1.menuOn span:nth-of-type(2) {
  opacity: 0;/*真ん中の線は透過*/
  background: #000;
    left: 9px;
}

.openbtn1.menuOn span:nth-of-type(3){
    top: 49px;
    left: 9px;
    transform: translateY(-6px) rotate(45deg);
    width: 60%;
  background: #000;
}


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

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

    


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

    
    
#pcMenuList >header,
#smpMenuList >header{ height:auto; width:100%;padding-bottom: 130px;text-align: center;  display: table}
#pcMenuList >header h2,
#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;}
    
#pcMenuList >header h1,
#smpMenuList >header a{ display:table-cell; text-align:center; vertical-align:middle;}
#pcMenuList >header h1 img,
#smpMenuList >header a img{ width:40%; }

    
    
#pcMenuList a.contactBtn,
#smpMenuList a.contactBtn{ 
    transition: all  0.2s ease;
    border-collapse: separate;
    border: 1px solid #666;
    border-radius: 0;
    display: table; 
    vertical-align: middle;
    line-height: 1em;
    width: 100%; 
    height: 75px; 
    text-align: center;
    color: #333; 
    font-size: 28px; 
    letter-spacing: 0.1em;
	font-family: 'Roboto', sans-serif;
   }
	
#pcMenuList a.contactBtn span,
#smpMenuList a.contactBtn span{ display: table-cell; vertical-align: middle;border-collapse: collapse;}
#pcMenuList a.contactBtn img,
#smpMenuList a.contactBtn img{ width: 35px;vertical-align:middle;margin-right: 14px;margin-top:-5px}
    
    

#pcMenuList ul,
#smpMenuList ul{ margin-bottom: 105px;}
#pcMenuList ul li,
#smpMenuList ul li{ width:100%; display:table;  float:none; font-weight:normal; clear: both;font-family: 'Roboto', sans-serif; letter-spacing: 0.11em;  margin-bottom: 0;border-collapse: separate; position: relative; transition: all  0.6s ease;}

#pcMenuList.listOn ul li,
#smpMenuList.listOn ul li{letter-spacing: 0.09em;left: 0;}
    
#pcMenuList ul li a,
#smpMenuList ul li a{ display:table-cell; vertical-align:middle; color:#333; font-weight:normal;
font-size:30px; text-align:left;padding:30px 0 30px 34px;  position:relative;  margin: 0; width: 100%;
border: 0 !important; width: 100%;
}
    

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

#pcMenuList ul li a::after,
#smpMenuList ul li a::after{
	content:"";
	display: block;
	width:22px;
	height:2px;
	border-top:3px solid #145cb4;
	position: absolute;
	left:0; 
	top:50%;
	margin-top:-2px;
}

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


    
} /* Responsive End */