/* Nav
-----------------------------------------*/
.Nav {
clear:both;
margin-top: 60px;
}
.Nav ul li{
list-style:none;
font-weight:bold;
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.Nav ul li{
list-style:none;
width:24%;
text-align:center;
}
}
.Nav a:hover { opacity: 0.5; }
@media screen and (max-width: 768px) {
.Nav {
position: relative;
border-top:none;
margin:0;
padding:0;
}
}
.Nav .navbtn {
  display: none;
}
@media screen and (max-width: 768px) {
.Nav .navbtn {
display: block;
position: absolute;
top: -70px;
right: 20px;
}
}
@media screen and (max-width: 768px) {
  .Nav .navbtn a,
  .Nav .navbtn a.close {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #FFF;
  }
  .Nav .navbtn a::before,
  .Nav .navbtn a.close::before {
    position: absolute;
    top:8px;
    left:10px;
    content:"";
    width: 25px;
    height: 4px;
    background-color: #32BFD7;
   transition: .2s;
  }
  .Nav .navbtn a.open::before {
    top:18px;
    transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  }
  .Nav .navbtn a::after,
  .Nav .navbtn a.close::after {
    position: absolute;
    bottom:8px;
    left:10px;
    content:"";
    width: 25px;
    height: 4px;
    background-color: #32BFD7;
    transition: .2s;
  }
  .Nav .navbtn a.open::after {
    bottom:18px;
    transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  }
}
@media screen and (max-width: 768px) {
  .Nav .navbtn a.open {
  }
}
 
@media screen and (max-width: 768px) {
  .Nav .navbtn a span {
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
  }
  .Nav .navbtn a span::after,
  .Nav .navbtn a.close span::after {
    position: absolute;
    top:18px;
    left:10px;
    content:"";
    width: 25px;
    height: 4px;
    background-color: #32BFD7;
  }
  .Nav .navbtn a.open span::after {
    display: none;
  }
}
.Nav ul.close {
  display: none;
}
@media screen and (min-width: 768px) {
.Nav > ul {
margin: 0;
padding:0;
list-style: none;
display:flex !important;
justify-content: flex-end !important;
}
}
@media screen and (max-width: 768px) {
.Nav > ul {
display: none;
position: absolute;
top: -17px;
left: 0;
right: 0;
z-index: 9;
background-color: #FFF;
padding:0
}
}
.Nav > ul > li {
position: relative;
font-size: 15px;
padding:0 1.6%;
width:auto;
}
@media screen and (max-width: 768px) {
  .Nav > ul > li:first-child {
    display: block;
    border-top: solid 1px #dddddd;
  }
  .Nav > ul > li {
    display: block;
    border-bottom: solid 1px #dddddd;
  }
}
.Nav > ul > li a {
  display: block;
  position: relative;
  text-decoration: none;
  padding:0 0 10% 0;
  font-size: 17px;
  color: #000000;
  z-index: 2;
}
@media screen and (max-width: 768px) {
.Nav > ul > li a {
  display: block;
  position: relative;
  text-decoration: none;
  padding:3% 0;
  font-size: 17px;
  color: #000000;
  z-index: 2;
}

}
/*下層の矢印部分
.Nav > ul > li.parent > a {
  padding-right:25px;
}
.Nav > ul > li.parent > a::before {
    display: block;
    content: "";
    position: absolute;
    top: 40%;
    right: 8px;
    width: 6px;
    height: 6px;
    margin: -6px 0 0 0;
    border-top: solid 2px #32BFD7;
    border-right: solid 2px #32BFD7;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}*/
@media screen and (max-width: 768px) {
.Nav > ul > li.parent > a {
padding-right:25px;
}
.Nav > ul > li.parent > a::before {
display: block;
content: "";
position: absolute;
top: 40%;
right: 8px;
width: 6px;
height: 6px;
margin: -6px 0 0 0;
border-top: solid 2px #32BFD7;
border-right: solid 2px #32BFD7;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.Nav > ul > li.parent > a::before {
top: 50%;
}
.Nav > ul > li.parent.open > a::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@media screen and (max-width: 768px) {
  .Nav > ul > li.parent.open {
    border-bottom: none;
  }
}
/*  .Nav > ul > li.parent.open > a{
    color: #FFF;
  }*/
  .Nav > ul > li.parent.open > a::after {
  background: #fff;
  -webkit-transform: scale(1);
  transform: scale(1);
}
/*@media screen and (max-width: 768px) {
  .Nav > ul > li.parent.open > a {
    color: #FFF;
  }
}*/
 
/*.Nav > ul > li a:hover {
  color: #fff;
}*/
.Nav > ul > li a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.Nav > ul > li a,
.Nav > ul > li a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  /*background:#FFF;*/
}
.Nav > ul > li a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
/*.Nav > ul > li a:hover::after {
  background: #333;
  -webkit-transform: scale(1);
  transform: scale(1);
}*/
 
/* 2階層 */
.Nav > ul > li > ul {
  display: none;
  position: absolute;
  top: 38px;
  left: 0;
  width: auto;
  margin:0 0 0 -32px;
  padding:10px 3px;
  background-color:rgba(50,191,215,0.8);
  z-index: 9;
  border-radius: 10px;
}
.Nav > ul > li > ul:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -15px;
  border: 10px solid transparent;
  border-bottom: 15px solid rgba(50,191,215,0.8);
}
@media screen and (max-width: 768px) {
  .Nav > ul > li > ul {
    background-color: #444444;
	padding:0;
    position: static;
	border-radius: 0;
}
  .Nav > ul > li > ul > li:first-child {
    border-top: solid 1px #dddddd;
  }
  .Nav > ul > li > ul:before {
	  display:none;
  }
}
  
.Nav > ul > li > ul li {
  white-space: nowrap;
}
 
.Nav > ul > li > ul li a {
  position: relative;
  padding: 5px 27px 5px 27px;
  color:#FFF;
  font-weight:normal !important;
}
@media screen and (max-width: 768px) {
  .Nav > ul > li > ul li {  
    background-color: #fff;
	 padding: 0 0 0 27px;
	 box-sizing: border-box;
	 margin:0 auto;
  }
  .Nav > ul > li > ul li a {
border-bottom: solid 1px #dddddd;
  position: relative;
  padding: 12px 27px 12px 27px;
  color:#000000;
  font-weight:normal !important;
  width:100% !important;
  
  box-sizing: border-box;
}
}
.Nav > ul > li > ul li a::before {
    display: block;
    content: "";
    position: absolute;
    top: 54%;
    left: 10px;
    width: 6px;
    height: 6px;
    margin: -6px 0 0 0;
    border-top: solid 2px #FFFFFF;
    border-right: solid 2px #FFFFFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media screen and (max-width: 768px) {
  .Nav > ul > li > ul li a:hover {
    background-color: #FFF;
  }
  .Nav ul li:last-child {
  border-bottom::none;
}
.Nav > ul > li > ul li a::before {
    display: block;
    content: "";
    position: absolute;
    top: 54%;
    left: 10px;
    width: 6px;
    height: 6px;
    margin: -6px 0 0 0;
    border-top: solid 2px #32BFD7;
    border-right: solid 2px #32BFD7;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
}
 
.Nav > ul > li > ul li ul li a {
  padding-left: 0;
}
.Nav > ul > li > ul li ul li a::before {
    left: 20px;
}