@charset "utf-8";
/* CSS Document */
header .top_nav{
	margin-left: auto;
	margin-right:auto;
	padding-top: 15px;
	/**/max-width:1280px;
}
header nav {
	/**/max-width: 1024px;
	margin-left: 256px;
	padding-top: 25px;
}
#menu {
	width: 100%;
	/*max-width: 1024px;*/
	margin: 0 auto;
	padding: 0;
	display:flex;
	flex-wrap: nowrap;
	justify-content: center;
}
#menu li{
	display: block;
	float: left;
	width: 11%;
	margin: 0;
	padding: 0;
	height: 40px;
	text-align: left;
}
#menu li a {
	display: block;
	padding: 0px;
	/*background-color: #2a83a2;*/
	color: #FFF;
	text-align: center;
	text-decoration: none;
	border-right:1px solid #ecb9aa;
	border-right:solid 1px #e0e1d9;
	
}
#menu li:last-child a{
	border: none;
}
#menu .nav_pets{
	display: none;
}

/*
#menu li a:hover{
	background: rgba(188,0,45,0.3);
}*/
#toggle {
	display: none;
}

/**/
header h1{
	float: left;
	margin-right: 30px;
}


/**　追記
*********************************/
#menu li a{
	text-indent: -9999px;
	background: url(../img/nav_top.png)no-repeat;
	background-position: center 0;
	display: block;
	width: 100%;
	height: 39px;
	padding-top: 1px;
	color: #020000;
}

#menu li:nth-child(2) a{
	background-position: center -40px;
}
#menu li:nth-child(3) a{
	background-position: center -80px;
}
#menu li:nth-child(4) a{
	background-position: center -120px;
}
#menu li:nth-child(5) a{
	background-position: center -160px;
}
#menu li:nth-child(6) a{
	background-position: center -200px;
}
#menu li:nth-child(7) a{
	background-position: center -240px;
}
#menu li:nth-child(8) a{
	background-position: center -280px;
}
#menu li:nth-child(9) a{
	background-position: center -320px;
}
	.top_nav_small{
		display: none;
	}


@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.snip1211 {
  font-family: 'Raleway', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
}
.snip1211 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1211 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 1.5em;
  padding: 0;
}
.snip1211 a {
  padding: 0.4em 0;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  text-decoration: none;
  display: inline-block;
}
.snip1211 a:before {
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
  top: 25%;
  bottom: -10%;
  left: 0;
  right: 0;
  /*border-top: 3px solid #34495e;*/
  border-bottom: 3px solid #bc002d;
}
.snip1211 a:hover,
.snip1211 .current a {
  color: #ffffff;
}
.snip1211 a:hover:before,
.snip1211 .current a:before {
  opacity: 1;
  top: 0;
  bottom: 0;
}























/* =========================
	メディアクエリ
========================= */
/* 画面サイズが1280px以下の場合に適用 */
@media only screen and (max-width: 1280px) {
	header{
		width: 100%;
	}
	header nav {
	margin-left: auto;
	margin-right:auto; 
	max-width: 100%;
	width: 100%;
	padding-top: 0px;
	}


	header h1{
	float: none;
	text-align: center;
	margin:0 0 15px;
	width: 100%;
	}
	#menu li {
		width: 12.5%;
		/*border-bottom: 1px solid #ecb9aa;
		border-bottom: solid 1px #e0e1d9;*/
	}
	#menu li:nth-child(4) a{
		border-right:none;
	}

}

/* 画面サイズが768px以下の場合に適用 */
@media only screen and (max-width: 784px) {
	.top_nav_small h1{
		float: left;
	}
	.top_nav_small{
		display: block;
		margin: 10px 0 10px 10px;
	}
	.top_nav{
		display: none;
		height: 0;
	}

	#menu {
		display: none;
		max-width: 100%;
		width: 100%;
	}
	#menu li {
		width: 100%;
		height: auto;
		border-top: dotted 1px #d1d2ca;
	}
	#menu li a:after{
		content: '>';
		display: block;
		position: absolute;
		right: 30px;
		top: 0;
		font-weight: bold;
		color:#bc002d;
	}
	#menu li a{
    border-right:none;
	text-indent:0;
	background: none;
	text-align: left;
	position: relative;
	display: block;
	line-height: 3;
	}
	#menu .nav_pets{
	display: block;
	background: url(../img/icon_pet.png)no-repeat left 12px;
    background-size: 19px auto;
    padding-left: 2em; 
	}

	#toggle {
		display: block;
		position: absolute;
		top: 15px;
	    right: 20px;
		width: 100%;
		float: right;
		padding: 0;
		margin:0 10px 10px 0; 
		/*background: #bc002d;*/
	}
	#toggle img{
		width: 30px;
		text-align: right;
	}
	/*#toggle > a{
		display: block;
		position: relative;
		padding:20px 0 20px 60px;
		border-bottom: solid 1px #e0e1d9;
		color:#FFF;
		text-align: left;
		text-decoration: none;
	}
	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 30px;
		margin-top: -15px;
		background: #FFF;
	}
	#toggle a:before, #toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 30px;
		height: 6px;
		background: #bc002d;
	}*/
	#toggle a:before {
		margin-top:-9px;
	}
	#toggle a:after {
		margin-top: 3px;
	}

}



/* 画面サイズが480px以下の場合に適用 */
@media only screen and (max-width: 480px) {

	header nav {
	padding-top: 0px;
	}
}