/*  通常時  */

.nav {
  width: 1000px;
  height: 50px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  z-index: 2000;
}
.nav li {
  position: relative;
  list-style: none;
  top: 0px;
}
.nav li a {
  display: block;
  width: 196px;
  height: 38px;
  box-sizing: border-box;
  letter-spacing: -0.01em;
}
.nav > li:hover > a {/*layer-1*/
  color: orange;
  background: transparent;
}
.nav > li li:hover > a {/*layer-2*/
  color: olive;
  background: transparent;
  position: absolute;
}
.nav li ul {
  top: 0px;
  left: 0px;
  width: 196px;
}
.nav li ul li {
  overflow: hidden;
  height: 0;
  top:-103px;
  display: block;
  background: transparent;
  clear: both;
  width: 196px;
}
.nav li ul li a {
 clear: both;
 width: 196px;
 letter-spacing: 0em!important;
}

.nav li ul li a:hover {
height: 35px;
	border-bottom: 3px solid #2d5473;
	z-index: 1001;
	width: 196px!important;
	overflow: hidden;
}

.nav li:hover > ul > li {
  overflow: visible;
  height: 38px;
	background: #fff;
	border: 1px solid #2d5473;
	border-collapse: collapse!important;
	border-spacing:0px!important;
	font-size: 0.9em;
	width: 196px!important;
}
  .nav li ul li ul {
    top: 0;
    left: 160px;
  }
  .nav li ul li ul:before {/*layer-2▷*/
    position: absolute;
    content: "";
    top: 15px;
    left: 30px;
    border: 5px solid transparent;
    border-left: 5px solid #fff;
  }
  .nav li ul li ul li:hover > a {/*layer-3*/
    color: pink;
  }
  .nav li ul li ul.left {
    top: 0;
    left: -190px;
  }
  .nav li ul li ul.left:before,/*layer-2-left▷*/
  .nav li ul li ul li ul.left:before {/*layer-3-left▷*/
    position: absolute;
    content: "";
    top: 15px;
    left: 190px;
    border: 3px solid transparent;
    border-right: 3px solid #fff;
  }
  .nav li ul li ul.left li:hover > a {/*layer-2-left*/
    color: pink;
    background: #afc6e2;
  }
  .nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/
    color: purple;
    background: #afc6e2;
  }
.content {
  width: 100%;
  height: 200px;
  background: #eee;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  box-sizing: border-box;
}



/* chrome のみ */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {

.nav li ul li {
  overflow: hidden;
  height: 0;
  top:-53px;
  display: block;
  background: transparent;
  clear: both;
  width: 196px;
}

}




/*  FIX時  */
#top-head.fixed .nav {
  display: none;
}
#top-head.fixed .nav li {
  position: relative;
  list-style: none;
  top: -10px;
  padding: 0;
  font-size: 0.9em!important;
  text-align: center;
  width: 160px!important;
}
#top-head.fixed .nav li a {
  display: block;
  width: 160px!important;
  height: 38px;
  box-sizing: border-box;
  background-color: transparent;
  padding: 0;
}
#top-head.fixed .nav > li:hover > a {/*layer-1*/
  color: orange;
  background: transparent;
}
#top-head.fixed .nav > li li:hover > a {/*layer-2*/
  color: olive;
  background: transparent;
  position: absolute;
}
#top-head.fixed .nav li ul {
  top: 0px;
  left: 0px;
  width: 114px!important;
}

#top-head.fixed .nav li ul li {
  overflow: hidden;
  height: 38px;
  top:0px;
  background: #fff;
  top:-300px;
  font-size: 0.82em!important;
  width: 114px!important;
  display: block;
}

#top-head.fixed .nav li ul li a {
 clear: both;
 width: 114px!important;
 display: block;
}

#top-head.fixed .nav li ul li a:hover {
    height: 38px;
	top:0px;
	border-bottom: 2px solid #2d5473;
	z-index: 1001;
	width: 114px!important;
	display: block;
}

#top-head.fixed .nav li:hover > ul > li {
    overflow: visible!important;
	display: block;
    height: 38px;
	background: #fff;
	border: 1px solid #2d5473!important;
	border-collapse: collapse!important;
	top:35px;
	z-index: 9999;
	font-size: 0.9em;
	width: 114px!important;
}

 #top-head.fixed .nav li ul li ul {
    top: 0;
    left: 100px;
  }
#top-head.fixed  .nav li ul li ul:before {/*layer-2▷*/
    position: absolute;
    content: "";
    top: 15px;
    left: 30px;
    border: 5px solid transparent;
    border-left: 5px solid #fff;
  }
#top-head.fixed  .nav li ul li ul li:hover > a {/*layer-3*/
    color: pink;
  }
#top-head.fixed  .nav li ul li ul.left {
    top: 0;
    left: -100px;
  }
#top-head.fixed  .nav li ul li ul.left:before,/*layer-2-left▷*/
#top-head.fixed  .nav li ul li ul li ul.left:before {/*layer-3-left▷*/
    position: absolute;
    content: "";
    top: 15px;
    left: 100px;
    border: 3px solid transparent;
    border-right: 3px solid #fff;
  }
#top-head.fixed  .nav li ul li ul.left li:hover > a {/*layer-2-left*/
    color: pink;
    background: #afc6e2;
  }
#top-head.fixed  .nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/
    color: purple;
    background: #afc6e2;
  }
#top-head.fixed .content {
  width: 1000px;
  height: 200px;
  background: #eee;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  box-sizing: border-box;
}


@media screen and (max-width: 960px) {
/*  スマホ表示 */

.nav {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0!important;
  display: flex;
}
.nav li {
  display: block;
  width: 100%!important;
  position: relative;
  list-style: none;
  top: 0!important;
	font-size: 0.94em!important;
	padding: 0px!important;
}
.nav li a {
  display: block;
  width: 100%!important;
  height: 50px;
  box-sizing: border-box;
padding-top: 18px!important;
padding-bottom: 4px;
}
.nav > li:hover > a {/*layer-1*/
  color: orange;
  background: #68a838!important;
}
.nav > li li:hover > a {/*layer-2*/
  color: olive;
  background: #68a838!important;
  position: absolute;
}
.nav li ul {
  display: none!important;
  overflow: hidden;
}
.nav li ul li {
  display: none!important;
}
.nav li ul li a {
  display: none!important;
}

.nav li ul li a:hover {
display: none;
}

.nav li:hover > ul > li {
  display: none;
}
  .nav li ul li ul {
   display: none;
  }
  .nav li ul li ul:before {/*layer-2▷*/
    display: none;
  }
  .nav li ul li ul li:hover > a {/*layer-3*/
   display: none;
  }
  .nav li ul li ul.left {
    display: none;
  }
  .nav li ul li ul.left:before,/*layer-2-left▷*/
  .nav li ul li ul li ul.left:before {/*layer-3-left▷*/
    display: none;
  }
  .nav li ul li ul.left li:hover > a {/*layer-2-left*/
    display: none;
  }
  .nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/
    display: none;
  }
.content {
  width: 100%;
  height: auto!important;
  background: transparent;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  box-sizing: border-box;
}
	

/*  スマホ表示 - fixed - */

#top-head.fixed .nav {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0!important;
  display: flex;
}
#top-head.fixed .nav li {
  position: relative;
  list-style: none;
  top: 0!important;
		font-size: 0.94em!important;
	padding: 0px!important;
	height: 34px!important;
	width: 100%!important;
}
#top-head.fixed .nav li a {
  display: block;
  width: 100%;
  height: 34px!important;
  box-sizing: border-box;
padding-top: 11px!important;
padding-bottom: 4px;
width: 100%!important;
}
#top-head.fixed .nav > li:hover > a {/*layer-1*/
  color: orange;
  background: #68a838!important;
}
#top-head.fixed .nav > li li:hover > a {/*layer-2*/
  color: olive;
  background: #68a838!important;
  position: absolute;
}
#top-head.fixed .nav li ul {
  display: none!important;
  overflow: hidden;
}
#top-head.fixed .nav li ul li {
  display: none!important;
}
#top-head.fixed .nav li ul li a {
  display: none!important;
}

#top-head.fixed .nav li ul li a:hover {
display: none;
}

#top-head.fixed .nav li:hover > ul > li {
  display: none;
}
#top-head.fixed .nav li ul li ul {
   display: none;
  }
	
#top-head.fixed .nav li ul li ul:before {/*layer-2▷*/
    display: none;
  }
#top-head.fixed .nav li ul li ul li:hover > a {/*layer-3*/
   display: none;
  }
#top-head.fixed .nav li ul li ul.left {
    display: none;
  }
#top-head.fixed .nav li ul li ul.left:before,/*layer-2-left▷*/
#top-head.fixed .nav li ul li ul li ul.left:before {/*layer-3-left▷*/
    display: none;
  }
#top-head.fixed .nav li ul li ul.left li:hover > a {/*layer-2-left*/
    display: none;
  }
#top-head.fixed .nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/
    display: none;
  }
#top-head.fixed .content {
  width: 100%;
  height: auto!important;
  background: transparent;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  box-sizing: border-box;
}
	
}