@charset "utf-8";



/*--------------------*/
/*　以下メニューCSS　*/
/*--------------------*/

nav {
	position: fixed;
	top: 0;
	right:0;
	width: 300px;
	height: 100%;
	background-color: #333;
	transition: all 0.1s;
	transform: translate(300px);
	z-index: 1000;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}
nav.open {
	transform: translate(0); 
}
nav ul {
	margin: 0;
	padding: 1em;
	list-style-type: none;
	overflow: auto;
}
nav ul li {
	border-bottom: 1px solid #fff;
	text-align: left;
}
nav ul li a {
	display: block;
	text-decoration: none;
	color: #fff;
	padding: 0.8em 0;
}
nav ul li a br{
    display: none;
}

nav ul li.eng a{
    padding-left: 1em;
    background: -moz-linear-gradient(left, #9b491f, #d4865f);
    background: -webkit-linear-gradient(left, #9b491f, #d4865f);
    background: linear-gradient(to right, #9b491f, #d4865f);
}
nav ul li.eng a span{
    padding-left: 20px;
    background: url(../img/common/icon_eng.png) left center no-repeat;
}


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

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


/* 開閉ボタン */

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

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




@media screen and (min-width:1101px){
	/* PCでメニュボタン非表示 */
	.navBtn{display:none;}
	
	/*　PCでメニュー常時表示　*/
	nav{
		position: static;
		transform:none;
        width:100%;
		background-color:transparent;
        background-color: rgba(255,255,255,0.80);
        font-size: 105%;

    }
	nav ul{
        width:100%;
        overflow: visible;
        padding: 0;
        display: flex;
        justify-content: space-between;
	}
	nav ul li {
		padding: 0;
		width: 10%;
        text-align: center;
		border-bottom: none;
        position: relative;
	}
    nav ul li:after{
        position: absolute;
        right: 0;
        top: calc(50% - 25px);
        width: 1px;
        height: 50px;
        background-color: #a8a8a8;
        content: "";
    }
    nav ul li a{
        color:#000;
        padding:0;
        line-height: 1.2em;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 85px;
    }
    nav ul li a br{
        display: inline-block;
    }
    nav ul li.sp{
        display: none;
    }
    
    nav ul li.top a{
        color:#fff;
        background-color: rgba(31,74,155,0.8);
    }
    
    
    
    .home nav ul li.mn01 a,
    .news nav ul li.mn02 a,
    .used nav ul li.mn04 a,
    .results nav ul li.mn04 a,
    .service nav ul li.mn05 a,
    .maintenance nav ul li.mn06 a,
    .factory nav ul li.mn07 a,
    .recruit nav ul li.mn08 a,
    .company nav ul li.mn09 a,
    nav ul li.stay a,
    nav ul li a:hover{
        color:#fff;
        background-color: rgba(31,74,155,0.8);
    }

    
    
    
    nav ul li.eng a{
        color:#fff;
        padding-left: 0;
    }
    nav ul li.eng:after{
        display: none;
    }

    /*　ドロップダウンメニュー　*/
    nav ul li ul{
        list-style: none;
        position: absolute;
        z-index: 9999;
        top: 100%;
        left: 0;
        margin: 0;
        padding: 0;
    }
    nav ul li ul li{
        width: 100%;
        border-right:none;
    }
    nav ul li ul li a{
        padding: 13px 15px;
        border-top: 1px solid #999;
        background-color: #ddd;
    }
    /* 広がるように 表示 */
    nav ul li ul li{
        overflow: hidden;
        height: 0;
        transition: .2s;
    }
    nav ul li:hover ul li{
        overflow: visible;
        height: 55px;
    }


    
    
}

@media (max-width:1500px) and (min-width:1101px){
    nav{
        font-size: 1.15vw;
    }
    nav ul li a{
        height: 5.6vw;
    }

    
}