
/*============================================================
	乗りほ～DAY　基本
============================================================ */
/*
layout.css
color:#222222;
point color2:#00aebb
point color3:#e60020

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

.header_wrap{
}
.header{
position: fixed; 
width: 100vw;
height:92px;
top:0;
left:0;
right: 0;
margin:0 auto;
padding: 3px 17px 0 19px;
font-size: 16.4px;
font-weight: 500;
background-color: rgba(0, 174, 187,0.94); /*#00aebb*/
color: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 300;
border-bottom: #ffffff 0.5px solid;
}
.header.fixed{
position: fixed;
top: 0;
}

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

.nav-list li{
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
 list-style:none;
 padding:0 0 0 20px;
 color: #FFFFFF; 
}

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

.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:"Sawarabi Gothic", sans-serif;
}


/* LINK COLOR  */
.header a {
	text-decoration: none;
	color: #FFFFFF;
}
.header a:link{ 
  text-decoration: none; 
  color: #FFFFFF;
}
.header a:visited { 
  color: #FFFFFF;
}
.header a:hover {
	color: #F48E00
}


/* TAB NAVI ------------- */
@media screen and  (max-width: 1180px)  {
.header{
font-size: 15.2px !important;
padding: 3px 17px 0 18px !important;
letter-spacing: 0.05em;
}
.nav-item{
/* ナビの左側に余白 */
margin-left: 10px;
margin-top:3px;
}
.nav-list li{
 padding:0 0 0 17px;
}
}

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

@media screen and (max-width:1079px){
.header{
 padding: 0.5% 2% 0 ;
}
.burger-btn{
	display: block;
	width: 44px;
	height: 42px;
	right:15px;
	position: relative;
	z-index: 3;
  
/* codepenの挙動用 */
background-color:transparent;
border:none;
}
.bar{
	width: 36px;
	height: 2.5px;
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background-color: #FFFFFF;
}
.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:#2b2b2b;
}
.burger-btn.close .bar_mid{
  opacity: 0;
  transition: opacity .3s;
  background-color:#2b2b2b;

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

/* MOBILE Navi APPEAR------------- */
.nav-wrapper{
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;/*.btn_triggerとの前後関係を調整*/
 }
 .header-nav{
		margin:0 auto;
  width: 100%;
  height: 100%;
  background-color:#f2f2f2;
  opacity:0.99;
  z-index: 100;
  }
.header-nav a{
   color:#2b2b2b !important;
  }
.header-nav a:active{
   color:#00A0C0 !important;
  }
.header-nav a:hover {
   color:#00A0C0 !important;
}
.header-nav .nav-list{
   display: block;
   position: absolute;
   top: 42%;
	  left: 50%;
   transform: translate(-50%,-50%);
   text-align: center;
   padding:2px 0px 2px;
}
.header-nav .nav-item{
	display: block;
	width:100%;
 margin:0 auto 20px;
	padding:0 5px 18px;
	font-family: "Sawarabi Gothic", sans-serif;
	font-size: 19px;
	font-weight: 400;
	text-align: center;
	line-height: 0.8;
letter-spacing: 0.05em;
	white-space: nowrap;
	border-bottom: #5dc2d0 1px dotted;
}
.header-nav .nav-item-logo{
	display: block; /*mobileは表示*/
	margin:0px auto 15px;
	padding:0 0 20px;
 text-align: center;
}
}  

/*   ------------------------------*/ 
@media screen and (max-width: 767px) {
.burger-btn{
 right:10px !important;
}
}