@charset "utf-8";
/* mod_body
-----------------------------------------*/
.mod_body{
margin:0 auto;
max-width: 1024px;
margin-top: 50px;
height:1500px;
}

/* Nav
-----------------------------------------*/
.Nav {
/* margin-top: 60px; */
/* border-top: solid 1px #F5F4F0; */
/* border-bottom: solid 1px #F5F4F0; */
}
nav > ul > li + li {
border-left: 1px solid #0fadb9;
}
nav ul > li > ul li a {
border-left: none;
}

@media screen and (max-width: 1024px) {
body.is-ovarlay {
position: relative;
}
body.is-ovarlay::before {
width: 100%;
height: 100%;
min-height: 100%;
position: fixed;
z-index: 80;
opacity: 1;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
transition: opacity .6s;
}
.Nav {
border-top:none;
}
nav ul > li + li {
border-left: none;
}
}
.Nav .navbtn {
display: none;
}
@media screen and (max-width: 1024px) {
.Nav .navbtn {
display: block;
position: absolute;
top: 0;
right: 0;
padding: 0;
/* color: #10c3dc; */
}
.Nav .navbtn::after {
display: inline-block;content: "MENU";position: absolute;left: 10px;bottom: -4px;font-size: 76%;color: #10c3dc;/* margin-left: -0.5em; */}
}
@media screen and (max-width: 1024px) {
.Nav .navbtn a,
.Nav .navbtn a.close {
display: block;
position: relative;
width: 60px;
height: 55px;
/**background-color: #000;
border-left: 1px solid #e6e6e6;**/
}
.Nav .navbtn a::before,
.Nav .navbtn a.close::before {position: absolute;top:10px;left: 18px;content:"";width: 20px;height: 3px;background-color: #10c3dc;transition: .2s;}
.Nav .navbtn a.open::before {
top:18px;
transform: rotate(-45deg);
}
.Nav .navbtn a::after,
.Nav .navbtn a.close::after {position: absolute;bottom: 26px;left: 18px;content:"";width: 20px;height: 3px;background-color: #10c3dc;transition: .2s;}
.Nav .navbtn a.open::after {bottom: 34px;
transform: rotate(-135deg);
}
}
@media screen and (max-width: 1024px) {
.Nav .navbtn a.open {
}
}

@media screen and (max-width: 1024px) {
.Nav .navbtn a span {display: block;overflow: hidden;width: 1px;height: 1px;/* color: #10c3dc; */}
.Nav .navbtn a span::after,
.Nav .navbtn a.close span::after {position: absolute;top: 18px;left: 18px;content:"";width: 20px;height: 3px;background-color: #10c3dc;}
.Nav .navbtn a.open span::after {
display: none;
}
}
.Nav ul.close {
display: none;
}
.Nav > ul {margin: 0 auto;max-width: 94%;width: 92%;display: flex;-js-display: flex;-webkit-justify-content: center;justify-content: center;padding-bottom: 16px;}
@media screen and (max-width: 1024px) {
.Nav > ul {display: none;position: absolute;top: 55px;left: 0;right: 0;z-index: 9;background-color: #FFF;background-color: rgba(0, 0, 0, .4);padding: 15px;height: auto;max-width: 100%;width: 100%;}
}
.Nav > ul > li {position: relative;font-size: 15px;display: inline-block;width: 100%;}
@media screen and (max-width: 1024px) {
.Nav > ul > li {
display: block;
border-bottom: solid 1px #f3f3f3;
}
.Nav > ul > li:last-child {
border-bottom: none;
}
}
.Nav > ul > li a {display: block;position: relative;text-decoration: none;padding: 2px 16px;font-size: 88%;color: #333;background-color: #fff;z-index: 2;text-align: center;}
.Nav > ul > li:first-child > a {
border-radius: 10px 10px 0 0;
}
@media screen and (max-width:1280px) {
.Nav > ul > li a {/* padding: 0 12px; */text-align: left;}
}
.Nav > ul > li.parent > a.dd-toggle {
padding-right:25px;
}
@media screen and (max-width:1090px) {
.Nav > ul > li a {/* padding: 0 8px; */display: block;}
}

.Nav > ul > li.parent > a.dd-toggle {
padding-right: 0;
display: inline-block;
position: absolute;
right: 0;
top: 7px;
border-radius: 0;
border: none;
background: none;
}
.Nav > ul > li.parent > a.dd-toggle::before {
display: block;
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 6px;
height: 6px;
margin: -6px 0 0 0;
border-top: solid 2px #00a0e9;
border-right: solid 2px #00a0e9;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}

@media screen and (max-width: 1024px) {
.Nav > ul > li:last-child > a {
border-radius: 0 0 10px 10px;
}
.Nav > ul > li.parent.open > a.dd-toggle::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.Nav > ul > li.parent > a.dd-toggle {
right: 0;
top: 0;
}
.Nav > ul > li:first-child > a.dd-toggle {
border-radius: 0 10px 0 0!important;
}
.Nav > ul > li:last-child > a.dd-toggle {
border-radius: 0 0 10px 0!important;
}
.Nav > ul > li.parent > a.dd-toggle::before {
top: 43%;
right: 20px;
width: 6px;
height: 6px;
margin: 0;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
}
}
@media screen and (max-width: 1024px) {
.Nav > ul > li.parent.open {
border-bottom: none;
}
.Nav > ul > li.open:last-child > a.dd-toggle {
border-radius: 0!important;
}
.Nav > ul > li.open:last-child > a {
border-radius: 0;
}
}
.Nav > ul > li.parent.open > a {
/**color: #FFF;**/
}
.Nav > ul > li.parent.open > a::after {
/**background: #333;
-webkit-transform: scale(1);
transform: scale(1);**/
}
@media screen and (max-width: 1024px) {
.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;
}
.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;
left: 0;
background-color: rgba(255, 255, 255, 1);
z-index: 9;
width: 100%;
}

@media screen and (max-width: 1024px) {
.Nav > ul > li > ul {
background-color: #fbfbfb;
position: static;
}
.Nav > ul > li a {
padding: 17.5px 20px;
font-size: 100%;
}
}

.Nav > ul > li > ul li {/* white-space: nowrap; width: 140px;*/}

.Nav > ul > li > ul li a {
position: relative;
padding: 12px 4px 12px 26px;
text-align: left;
}
@media screen and (max-width: 1024px) {
.Nav > ul > li > ul li a {
border-bottom: solid 1px #dddddd;
background-color: #EEE;
}
.Nav > ul > li > ul li {width: 100%}
}
.Nav > ul > li > ul li a::before {display: block;content: "";position: absolute;top: 50%;left: 12px;width: 6px;height: 6px;margin: -5px 0 0 0;border-top: solid 2px #00a0e9;border-right: solid 2px #00a0e9;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.Nav > ul > li > ul li a:hover {
/**text-decoration: underline;**/
opacity: 1;
}

@media screen and (max-width: 1024px) {
.Nav > ul > li > ul li a:hover {
background-color: #FFF;
}
.Nav > ul > li.parent > a.dd-toggle {
position: absolute;
top: 0;
right: 0;
display: block;
width: 50px;
height: 50px;
color: #fff;
background: #10c3dc;
border-radius: 0;
text-align: center;
line-height: 50px;
padding: 0;
}
}

.Nav > ul > li > ul li ul li a {padding-left: 42px;}
.Nav > ul > li > ul li ul li a::before {left: 20px;}
/* -------------------------------------------------------------------

＜490px以下＞

------------------------------------------------------------------- */
@media screen and (max-width: 498px) {
.Nav .navbtn::after {bottom: -1px;}
}