@charset "UTF-8";
/* base style */
html {
	font-size: 100%;
  }
html, body {
	width: 100%;
  }
  
  body {
	background-color: #f8f8f8;
	color: #060b05;
	font-size: 0.9rem;
	margin: 0;
	padding: 0;
  }
  
  a {
	color: #222;
  }
  
  ul {
	list-style: none;
  }
  
  img {
	max-width: 100%;
  }
 
header{
    width:100%;
    background-color:#a9e3f6;
    display:flex;
    justify-content:space-between; /*メニューを右端に置く方法その１*/
    padding:10px 10% 10px ;/*中幸町～を右から10% ホームアイコン左から10% */
    align-items:center;
    position:fixed;  /*ヘッダーの位置を固定*/
	margin:5px auto;  /*上下5px  左右　自動*/
    top:0px;  /*ヘッダーの位置を固定（上0）*/
    left:0; /*ヘッダーの位置を左固定（左０）*/
	color: #121413;
}
header h2{		
	font-weight: bold;

}

header .logo{
	height: 70px;
}
ul{
    display:flex;
    list-style:none;
	padding: 20px 0px 20px 0px;
	font-weight: bold
}	
header a {
  text-decoration: none;
  color: #b65f07;
}
/*img {
	max-width: 100%;
 }*/
 li {
	list-style: none;
	font-weight:bold;
	margin-left: 5px;
  }
nav{
    margin-left:auto; /*メニューを右端に置く方法その２*/
}
header ul .menu::before{
	content:"";
	display: block;
	margin: 0 auto;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-size:contain ;

}

header li a:hover {
  opacity: 0.7;
}

header li .menu::before{
  content:"";
  display: block;
  margin: 0 auto;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size:contain ;
}
header li .home::before{
	background:url(../ksw_img/home.svg);
}
header li .info::before{
	background:url(../ksw_img/info.svg);
}
header li .ivento::before{
	background:url(../ksw_img/ivent.svg);
}
header li .topix::before{
	background:url(../ksw_img/topix.svg);
}
header li .kodomo::before{
	background:url(../ksw_img/kodomo.svg);
}
header li .amap::before{
	background:url(../ksw_img/map.svg);
}
header li .life::before{
	background:url(../ksw_img/life.svg);
}
header li .gaibu::before{
	background:url(../ksw_img/gaibu.svg);
}

/*-------------------------------------------
footer
-------------------------------------------*/
#footer {
	font-size: 0.8rem;
	padding: 150px 0;
	text-align: center;
  }
  /*-------------------------------------------
  SP
  -------------------------------------------*/
  @media screen and (max-width: 600px) {
	  /*追加*/
   /*-------------------------------------------
	ヘッダー
	------------------------------------------*/
	header {
		max-width: 100%;
		font-size: 0.65rem;
		height: auto;
		padding:10px 5px 0px;
		flex-direction: column;
	  }
	header .logo{
		height: 40px;;
	}  
	header ul{
		padding: 10px 0px 5px 0px;
		font-weight: bold
	}	 
	 header li {
	   font-size: 0.5rem;
		margin-left: 5px;
		text-align: center;
	  }
	 header li .menu::before{
		content:"";
		width: 26px;
		height:26px;
	  }
	  nav{
		margin: 0; /*メニューを右端に置く方法その２*/
	}
	
	}