@charset "utf-8";

/*　メインメニューCSS　*/
/*--------------------*/

.navMenu {
	position: fixed;
	top: 0;
	right:0;
	width: 100%;
	height: 100%;
    background-color: rgba(26,30,28,0.7);
	transition: all 0.5s;
	transform: translate(100%);
	z-index: 1000;
}
.navMenu.open {
	transform: translate(0); 
}
.navMenu ul {
	margin: 0;
	padding: 1em;
	list-style-type: none;
	overflow: auto;
}
.navMenu ul li {
	border-bottom: 1px solid #fff;
	text-align: left;
}
.navMenu ul li a {
	display: block;
	text-decoration: none;
	color: #fff;
	padding: 1em 0;
}

    @media screen and (max-width:910px){
        .navMenu {
            padding-top: 20px;
        }
        /* サブメニュー */
        .navMenu ul ul{
            padding: 0;
            margin-left: 1em;
        }
        .navMenu ul ul li:first-child {
            border-top: 1px solid #fff;
        }
        .navMenu ul ul li:last-child {
            border-bottom: none;
        }

        .navMenu ul ul li a:before {
            content: "-";
            padding-right: 0.5em;
        }
    }


/* 開閉ボタン */

.navBtn button {
  display: block;
    background-color:#0096fa;
  border: none;
  padding: 3px 10.5px;
  width: 51px;
  color: #333;
  letter-spacing: 0.1em;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right:10px;
  z-index: 1001;
  text-align: center;
  outline: none;
}
/* ハンバーガーボタン3本線 */
.navBtn button span.bar {
  display: block;
  height: 3px;
  background-color: #fff;
  margin: 9px 0;
  transition: all 0.1s;
  transform-origin: 0 0;
}
/* メニューアクティブ時 */
.navBtn button.active{
/*	background-color:#666;*/
    padding-left: 14px;
}

.navBtn button.active span.bar {
  width: 36px;
}
.navBtn button.active .bar1 {
  transform: rotate(42deg);
}
.navBtn button.active .bar2 {
  opacity: 0;
}
.navBtn button.active .bar3 {
  transform: rotate(-42deg);
  margin-left:-2px;
}




@media screen and (min-width:911px){
	/* PCでメニュボタン非表示 */
	.navBtn{display:none;}
	
	/*　PCでメニュー常時表示　*/
	.navMenu{
		position: static;
		transform:none;
		width:calc(100% - 610px);
        max-width: 960px;
		background-color:transparent;
        margin-left: auto;
        letter-spacing: 0;
	}
	.navMenu ul{
		width:100%;
		margin:auto;
        padding: 0;
        overflow: visible;
        display: flex;
        justify-content: space-between;
        align-items: center;
	}
	.navMenu ul li {
		padding: 0;
        margin-left: 1em;
        margin-right: 1em;
		width: auto;
		border-bottom: none;
		text-align:center;
        position: relative;
	}
	.navMenu ul li:last-child{
		border-right:none;
	}
	.navMenu ul li a{
		color:#fff;
        padding: 15px 0;
	}
    .fixed .navMenu ul li a{
        color:#000;
    }
    .fixed .navMenu ul li a:hover{
        color:#00c0fa;
    }
    .home .navMenu ul li.m01 a,
    .business .navMenu ul li.m02 a,
    .equipment .navMenu ul li.m03 a,
    .works .navMenu ul li.m04 a,
    .company .navMenu ul li.m05 a,
    .recruit .navMenu ul li.m06 a,
    .voice .navMenu ul li.m06 a,
    .faq .navMenu ul li.m07 a{
        color:#00c0fa;
    }

    
    .navMenu ul li.sp{
        display: none;
    }
    .navMenu ul li.toi{
        width: 200px;
        border-radius: 30px;
        overflow: hidden;
    }
    .navMenu ul li.toi a{
        width: 100%;
        height: 60px;
        border-radius: 30px;
        background: -moz-linear-gradient(left, rgba(0,136,241,0.8), rgba(0,192,250,0.8));
        background: -webkit-linear-gradient(left, rgba(0,136,241,0.8), rgba(0,192,250,0.8));
        background: linear-gradient(to right, rgba(0,136,241,0.8), rgba(0,192,250,0.8));
        color: #fff;
        overflow: hidden;

        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        transition: 0.3s;
    }
    .navMenu ul li.toi a:before{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        border: solid 1px #00c0fa;
        border-radius: 30px;
        content: "";
    }
    .navMenu ul li.toi a .bg{
        position: absolute;
        right: -30px;
        top: 1px;
        width: 0;
        height: calc(100% - 2px);
        background-color: #fff;
        content: "";
        border-radius: 30px;
        overflow: hidden;
        transition: 0.3s;
    }
    .navMenu ul li.toi a:hover .bg{
        width: 150%;
    }
    .navMenu ul li.toi a .txt{
        padding-left: 40px;
        background-image: url(../img/common/icon_mail_w.png);;
        background-position: left center;
        background-repeat: no-repeat;
        position: relative;
        z-index: 3;
    }
    .navMenu ul li.toi a:hover{
        color: #0096fa;
    }
    .navMenu ul li.toi a:hover .txt{
        background-image: url(../img/common/icon_mail.png);;
    }
    
    /*　ドロップダウンメニュー　*/
    .navMenu ul li ul{
        list-style: none;
        position: absolute;
        z-index: 999;
        top: 100%;
        left: calc(-100px + 2em);
        width: 200px;
        margin: 0;
        padding: 0;
        display: block;
    }
    .navMenu ul li ul li{
        width: 100%;
        border-right:none;
        margin: 0;
    }
    .navMenu ul li ul li a{
        color: #000;
        padding: 13px 10px;
        border-top: 1px solid #999;
        background-color: #ddd;
    }

    /* 広がるように 表示 */
    .navMenu ul li ul li{
        overflow: hidden;
        height: 0;
        transition: .2s;
    }
    .navMenu ul li:hover ul li{
        overflow: visible;
        height: 55px;
    }


}



@media (min-width:911px) and (max-width:1550px){
    
    .navMenu{
        width:calc(100% - 35.4vw);
    }
    .navMenu ul li {
        font-size: 1vw;
        line-height: 1.8em;
    }
    .navMenu ul li.toi{
        width: 12.9vw;
    }
    .navMenu ul li.toi a{
        width: 12.9vw;
        height: 3.8vw;
    }
    .navMenu ul li.toi a .txt{
        padding-left: 2vw;
        background-size: 1.5vw auto;
    }

    
    /*　ドロップダウンメニュー　*/
    .navMenu ul li ul{
        left: calc(-6.45vw + 2em);
        width: 12.9vw;
    }
    .navMenu ul li ul li a{
        padding: 0.8vw 0.64vw;
    }

    .navMenu ul li:hover ul li{
        overflow: visible;
        height: 3.54vw;
    }

    
    
    
}