/* ドロワーメニュー*/
#l-menu {
position: fixed;
background:;
width: 0;height:0;
top:0;right:0;
z-index: 100;
}

#toggle {
display: none;
position: fixed;
top: 32px;right: 32px;
}

#toggle-box {
position: relative;
width: 28px;
height: 21px;
cursor: pointer;
}
#toggle-box > span {
width: 100%;
height: 3px;
left: 0;
display: block;
background: #0075CF;
position: absolute;
transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease;
}

#toggle-box > span:nth-child(1) {top: 0;}
#toggle-box > span:nth-child(2) {top:45%;}
#toggle-box > span:nth-child(3) {bottom: 0;}

.is-open #toggle-box > span {background: #0075CF;}

.is-open #toggle-box > span:nth-child(1) {top: 40%;transform: rotate(45deg) translatey(-10%);}
.is-open #toggle-box > span:nth-child(2) {width: 0;}
.is-open #toggle-box > span:nth-child(3) {top: 40%;transform: rotate(-45deg) translatey(-10%);}

.is-open {overflow: hidden;}
.is-open #nav-content {z-index: 1;transform: translateX(0);}
.is-open #nav-content a {pointer-events: auto;}

/* z-index */
#toggle {z-index: 500;}

#main {position: relative; z-index: 0;}

#nav-content {
display:block;
z-index: 1;
overflow-x: hidden;
width: 100%;
height:100vh;height !important:100svh !important;
background:url(../images/h-bg.png) no-repeat left top;
background-size:cover;
position: fixed;
top: 0;
left: 0;
padding: 80px 0 0 0;
text-align:center;
transform: translateX(100%); 
transition:transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
font-size: 160%;
font-family: "kozuka-m", sans-serif;
}
#nav-content a{
color:#035D77;font-family: "kozuka-m", sans-serif;
}
#nav-content nav {margin-bottom: 30px;}

.nav-logo{
position: absolute;
top:45px;
left:55px;
}

.nav-logo img {width: 101px;height: auto;}

#menu-txt{
font-size:12px;
  font-weight:bold;
margin-top:6px;
color: #fff;
}

/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width: 1050px) {
.page #l-menu {display: block;
position: fixed;
background:;
width: 60px;height:60px;
background-color:#fff;
top:25px;right:22px;
z-index: 100;
border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));
}
.page .nav-logo{display: block;top:30px;left:35px;}
.page #toggle {display: block;top:45px;right: 38px;}
}


@media screen and (max-width: 768px) {
#l-menu {display: block;
position: fixed;
background:;
width: 60px;height:60px;
background-color:#fff;
top:35px;right:22px;
z-index: 100;
border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));
}
.nav-logo{display: block;top:30px;left:35px;}
#toggle {display: block;top:55px;right: 38px;}
}
@media screen and (max-width: 600px) {
#nav-content {display: block;}
.nav-logo{top:15px;left:15px;}
.nav-logo img{width:80px;height:auto;}

#toggle {display: block;}

#menu-txt{
font-size:9px;
  font-weight:bold;
margin-top:6px;
}

#nav-content nav {margin-bottom: 20px;}
}

@media screen and (max-width: 480px) {
#nav-content {padding:80px 0 0 0;font-size: 125%;}
#nav-content ul {list-style: none;margin-bottom: 0;}
#nav-content ul li {margin: 0 0 15px 0;}
}
/*--------------------------------------------------------------------------------*/

.ac {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding-bottom:3px;
}
.ac-parent {
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  transition: .3s;
  color: #333;
}

.ac-child {
padding: 0.2em 0 0.5em 0;
font-size:14px;
}

.ac-child ul li {
margin: 0 0 10px 0 !important;
color: #333;
}
.ac-child ul li a {
color: #333;
}

.ac-none  {
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  transition: .3s;
  color: #155BA0;
}

/*--------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
.ac-parent {height: 35px;line-height: 35px;}
.ac-none {height: 35px;line-height: 35px;}
.ac-child ul li {margin: 0 0 8px 0 !important;}
.ac-child {padding: 0.3em 0 0.0 0;font-size:13px;}
}
/*--------------------------------------------------------------------------------*/

#nav-content .btn{font-weight:500;display: inline-block !important;vertical-align: middle;line-height:1;}
#nav-content .btn a{padding:12px 34px;font-size: 60% !important;}

/*検索窓 */
#nav-content .search-box{display:block;vertical-align: middle;line-height:1;color:#fff;background:#0065B3;height: 40px;padding:3px 0 5px 20px;width:350px;text-align:left;margin: 20px auto 10px auto;}
#nav-content span{font-size: 12px;}
#nav-content .search-title{display:inline-block;vertical-align: middle;}
#nav-content .searchform .screen-reader-text {display: none;}
#nav-content #searchform{display:inline-block;vertical-align: middle;}
#nav-content .searchform{display:inline-block;vertical-align: middle;
    position: relative;
    padding: 0;
    margin: 0 0 0 0;
    width: 280px !important;
}
#nav-content .searchform input{
    line-height: ;
    padding: 7px 35px 5px 10px;
    font-size:60%;
    width: 100%;
    box-sizing: border-box;
    border: none;
    font-weight:;
    border-radius: ;
    outline: none;background:transparent;color: white;
}


#nav-content .searchform #menu-searchsubmit{
    position: absolute;
    top: 1px;
    right: -30px;
    vertical-align: top;
    line-height: 23px;
    border: none;
    background: 0 0;
    font-size: 60%;
    cursor: pointer;
    width: 30px !important;
    font-family: 'Font Awesome 5 Free';
    font-weight:900;
  color: white;
    padding: 5px 0 0 10px;
}
/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width:600px){
#nav-content .btn{width:auto;}
}

@media screen and (max-width:400px){
#nav-content .btn{width:250px !important;margin-bottom:8px;}
#nav-content .search-box{display:block;vertical-align: middle;line-height:1;color:#fff;background:#0065B3;height: 40px;padding:3px 0 5px 20px;width:90%;text-align:left;margin: 20px auto 10px auto;}
#nav-content .searchform{display:inline-block;vertical-align: middle;
    position: relative;
    padding: 0;
    margin: 0 0 0 0;
    width:50px;
}
#nav-content .btn a{font-size: 80% !important;}

#nav-content .searchform input{font-size:80%;}
#nav-content .searchform #menu-searchsubmit{font-size: 80%;}
}

/*--------------------------------------------------------------------------------*/


#toggle-box > span, {
    	background: #0075CF; /* 元の色 */
    }


    #toggle-box > span.invert{
    	background: #0075CF; /* スクロール後の色 */
    }