@charset "utf-8";
/* CSS Document hbnav.css*/

/*=========ナビゲーションのためのCSS（ ハンバーガーメニュー） ===============*/

/*ナビゲーション(ハンバーガーメニューが開いた状態)*/
.l-g-nav1{
	
	background-image: url("../images_nav/Menucolorbar.svg");

	background-size: cover;
	background-color: #A5E5C3;

	
    position:fixed;/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:-160%;
  /*top:-120%;*/
	left:0;
	/*left: auto;
   right: auto;*/
	width:100%;
	height: 100vh;/*ナビの高さ*/
	
	overflow-y: auto;
	
  -ms-overflow-style: none;/*  IE, Edge スクロールバー非表示 */
	padding: 0 0 5% ;

	text-align: left;
	 /*動き 0.3s*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
.l-g-nav1.panelactive{
    top: 0;
}


/*ul*/
.nav-list {
	margin:  0;
	padding: 62px 0 0; /* 80px 50px*/
   list-style: none;
}


.nav-list li a {
   display: inline-block;/*text部分に反応*/
	padding: 30px 20px 0;/*30px 0px 0px 30px;*/
	/*padding: 12px 0px 0px 30px;*/
   color: #818181;
   font-size: 21px;/*1.5rem*/
	text-decoration: none;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: 500;
   
}

.nav-list li a:hover, .nav-sns a:hover {
   color: #F6F5B0;
}
/*牛乳リニューアルにつき追記*/
/*
.sono1 {
	pointer-events: none;
	opacity: 0.5;
}	*/
/*ここまで*/


/*menu内SNSボタン*/
.nav-sns {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	position: absolute;
	top: 3vh;
	right: 1vw;
	
	
}

.nav-sns a {
  	display:block; 
	padding: 0;
	width: 43px;
	height: 43px;
	font-size: 23px;
	line-height: 37px;
	border-radius: 50%;
	text-align: center;
	background-color: #F0797B;
	color: #FFF /*#A5E5C3*/;
	border: solid 2px #FFF/*#C36264*/;
}

	/*SNSアイコン同士の余白*/
.nav-sns div {
	margin:20%; /* 0 5% 4% 0;*/
	
}


/*========= ボタンのためのCSS ===============*/
/*ハンバーガーメニュー ボタン*/
.navopenbtn1{
	display: block;
	width: 65px;
   height: 65px;
   background-image: url("../images_nav/hamburger1.svg");
 background-repeat: no-repeat;
   background-position: center;
	position: fixed;
	z-index: 9970;/*ボタンを最前面に*/
	cursor: pointer;
	
   
   top: 6px;
   left: 6px;
}

/*navopbtn-activeクラスが付与されるとcloseボタンに入れ替え*/
.navopbtn-active{
	background-image: url("../images_nav/closebtn.svg");
   background-color: #A5E5C3;
   width: 55px;
   height: 55px;
   border : solid 3px #5DAB84;
   z-index: 9975;	
}



/**/
.un-navbtn {
   display: block;
   width: 65px;
   height: 65px;
   background-image: url("../images_nav/hamburger1.svg");
   background-repeat: no-repeat;
   background-position: center;
   position: fixed;
   top: 6px;
   left: 6px;
   z-index: 70;
}

.un-navbtn.close {
   background-image: url("../images_nav/closebtn.svg");
   background-color: #A5E5C3;
   width: 55px;
   height: 55px;
   border : solid 3px #5DAB84;
   z-index: 75;
   }


/*.openbtn1{

	position: fixed;
	z-index: 9999;ボタンを最前面に
	cursor: pointer;
	top:10px;
	left:10px;
    width: 50px;
    height:50px;
	border-radius: 50%;
	background:#838383;
	
}*/

/*========= レイアウトのためのCSS ===============*/
.un-l-header{
  width:100%;
  background:#333;
  color:#fff;
  text-align: center;
  padding: 20px;
}




@media (min-width: 768px){

/*========= ボタンのためのCSS ===============*/
/*ハンバーガーメニュー ボタン*/
.navopenbtn1{
		
	width: 70px;
    height: 70px;
	background-size: cover;
	top: 3%;
	left: auto;
	margin-left: 2%;

	}
    
/*navopbtn-activeクラスが付与されるとcloseボタンに入れ替え*/
	.navopbtn-active{
		width: 65px;
		height: 65px;
	
	}

	.nav-list {
		padding-top: 100px;
	}	
	
	.nav-list li a {
	font-size: 32px;

	padding-left: 8%;
	padding-bottom: 2%;
		
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 500;
		
	}


.l-g-nav1 {
		left:auto;
		margin: 0 auto;
		max-width: 1040px;
				
	}
	
	.nav-sns a {
	width: 65px;
	height: 65px;
	font-size: 35px;
	line-height: 55px;
    border: solid 3px;
	
	}
	
	/*SNSアイコン同士の余白*/
	.nav-sns div {
	margin: 15%;/*0 5% 2% 0;*/
	
}
	
	
}

