/*
VILLA LIFE INDAH
nav.css
TOP専用（途中までナビを見せない仕組み）

/*----------------------------------------------
  NAVI
------------------------------------------------*/
/* PC ------------- */

.header_wrap{
display: none;/*最初は隠す*/
}
.header{
position: fixed; 
width: 100vw;
height:74px;
top:0;
left:0;
right: 0;
margin:0 auto;
padding: 6px 40px 0;
font-size: 15px;
background-color: rgba(255,255,255,0.91); /*#ffffff*/
color: #7E5435;
border-bottom:1px solid #fff;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 300;
}
.header.fixed{
position: fixed;
top: 0;
}

.nav-list{
/* navの横並び */
display: flex;
}

.nav-list li{
 list-style:none;
 padding:2px 0 0 20px;
 color: #7E5435; 
}

.nav-item{
/* ナビの左側に余白 */
margin-left: 15px;
}

.nav-item-logo{
	display: none;/*PCは非表示*/
}

/****** NAV CURRENT ↓ ****/
.nav-list li.nav-item a.active {
 font-weight: 400;
}
/*********** ↑ ***********/


.burger-btn{
display: none;
}

.nav-list{
font-family:'Comfortaa', cursive
}


/* LINK COLOR  */
.header a {
	text-decoration: none;
	color: #7E5435;
}
.header a:link{ 
  text-decoration: none; 
  color: #7E5435;
}
.header a:visited { 
  color: #7E5435;
}
.header a:hover {
	color: #00A0C0
}

 
/* MOBILE  Humberger-NAVI ------------- */

@media screen and (max-width:1080px){
.header{
  padding: 0.5% 4% 0 2%;
}
.burger-btn{
  display: block;
  width: 40px;
  height: 42px;
  position: relative;
  z-index: 3;
  
/* codepenの挙動用 */
background-color:transparent;
border:none;
}
.bar{
  width: 32px;
  height: 2.5px;
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #7E5435;
}
.bar_top{
  top: 10px;
}
.bar_mid{
  top: 50%;
  transform: translate(-50%,-50%);
}
.bar_bottom{
  bottom: 10px;
}

/* humberger-menu CLOSE ------------- */	
.burger-btn.close .bar_top{
  transform: translate(-50%,11px) rotate(45deg);
  transition: transform .3s;
  background-color:#7E5435;
}
.burger-btn.close .bar_mid{
  opacity: 0;
  transition: opacity .3s;
  background-color:#7E5435;

}
.burger-btn.close .bar_bottom{
  transform: translate(-50%,-8px) rotate(-45deg);
  transition: transform .3s;
  background-color:#7E5435; 
}

/* Humberger-Navi APPEAR------------- */
.nav-wrapper{
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;/*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/
 }
 .header-nav{
  width: 100%;
  height: 100%;
  background-color:#f2f2f2;
  opacity:0.99;
  z-index: 100;
  }
.header-nav a{
   color:#7E5435 !important;
  }
.header-nav a:active{
   color:#00A0C0 !important;
  }
.header-nav a:hover {
   color:#00A0C0 !important;
  }
.header-nav .nav-list{
    display: block;
    position: absolute;
    top: 52%;
	  left: 50%;
    transform: translate(-50%,-60%);
    text-align: center;	
  }
.header-nav .nav-item{
	display: block;
	width:100%;
 margin:0 auto 28px;
	padding:0px 100px 28px;
	font-family: 'Noto Serif JP', serif !important;
	font-size: 25px;
	font-weight: 400;
	text-align: center;
	line-height: 40%;
	border-bottom: #BDAC7B 1px dotted;
}
.header-nav .nav-item-logo{
	display: block; /*mobileは表示*/
	margin:0px auto;
	padding:50px 50px 30px;
}
}  
}