/* ドロワーメニュー*/
#l-menu {
position: fixed;
width: 42px !important;
height:42px !important;
top:10px;right:10px;
z-index: 100;
background:#fff;
border-radius: 50%;-webkit-border-radius:  50%;-moz-border-radius:  50%;
display:none;
}

#toggle {
display: block;
position: fixed;
top: 23px;right: 20px;
display:none;

}

#toggle-box {
position: relative;
width: 22px;
height: 16px;
cursor: pointer;
}
#toggle-box > span {
width: 100%;
height: 2px;
left: 0;
display: block;
background: #F29300;
position: absolute;
transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease;
}
.page #toggle-box > span {
background: #F29300 !important;
}

#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: #F29300;}
.page .is-open #toggle-box > span {background: #F29300 !important;}
.is-open #toggle-box > span:nth-child(1) {top: 42%;transform: rotate(45deg) translatey(-10%);}
.is-open #toggle-box > span:nth-child(2) {width: 0;}
.is-open #toggle-box > span:nth-child(3) {top: 42%;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: 100%;
background: #FEFAEE !important;
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: 26px;
}

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

.nav-logo{
position: absolute;
top:0;
left:0;
  background: #fff;
  padding:0;
}

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

#nav-content .link-u{margin: 40px 0 15px 0;}
#nav-content .link-s{}
#nav-content .link-otoiawase{background:#FCCF3C url(../images/f-otoiawase.png) no-repeat left 15px center;
background-size:20px auto;color: #FFF;display:inline-block;font-size:14px;margin:0 12px;border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius: 6px;}
#nav-content .link-otoiawase:hover{
filter: alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
}
#nav-content .link-otoiawase a{color: #FFF;display:block;padding:10px 14px 10px 40px;}
#nav-content .link-tel{background: #FFF url(../images/f-tel.png) no-repeat left 15px center;
background-size:20px auto;color:#FFAF99;display:inline-block;font-size:14px;margin:0 12px;border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius: 6px;}
#nav-content .link-tel:hover{
filter: alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
}
#nav-content .link-tel a{color:#F29300;display:block;padding:10px 14px 10px 40px;}

#nav-content .tsubasa{border:1px solid #56B4DF !important;color: #56B4DF !important;display:block;font-size:16px;width: 330px;margin: 0 auto 8px auto;}

#nav-content .tsubasa a{color: #56B4DF !important;display:block;padding:10px 14px 10px 40px;}
#nav-content .tsubasa:hover{color: #fff !important;}
#nav-content .tsubasa a:hover{background-color:#56B4DF;color: #fff !important;}

#nav-content .hoikukai{border:1px solid #29AF4B !important;color: #29AF4B !important;display:block;font-size:16px;width: 330px;margin: 0 auto;}
#nav-content .hoikukai a{color: #29AF4B !important;display:block;padding:10px 14px 10px 40px;}
#nav-content .hoikukai:hover{color: #fff !important;}
#nav-content .hoikukai a:hover{background-color:#29AF4B;color: #fff !important;}

#nav-content .tbs{background:url(../images/f-icon-amariko.png) no-repeat left center;
background-size:28px auto;padding:5px 34px;}
#nav-content .hik{background:url(https://sakaiminato-hoikukai.jp/images/f-icon-hoikukai.png) no-repeat left center;
background-size:28px auto;padding:5px 38px;}

/*レスポンシブ対応------------------------------------------------------------------*/

@media screen and (max-width: 1000px) {
#l-menu {width: 10px;height: 10px;}
.nav-logo img {width: 140px;height: auto;}
#nav-content {}
#toggle {}
#toggle-box {
position: relative;
width: ;
height:;
cursor: pointer;
}


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

@media screen and (max-width: 768px) {
#l-menu {display:block !important;}
#toggle {display: block !important;}
}

@media screen and (max-width: 480px) {
.nav-logo img {width: 104px;height: auto;}
#nav-content {padding:60px 0 0 0;font-size: 20px;}
#nav-content .link-otoiawase{margin:0 4px;}
#nav-content .link-tel{margin:0 4px;}
#nav-content .tsubasa{width: 90%;}
#nav-content .hoikukai{width: 90%;}
}
/*--------------------------------------------------------------------------------*/

.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 10px 0 !important;}
.ac-child {padding: 0.3em 0 0.0 0;font-size:13px;}
}
/*--------------------------------------------------------------------------------*/



    #toggle-box > span, {
    	background: #fff; /* 元の色 */
    }
#menu-txt {
    	color: #fff; /* 元の色 */
    }

    #toggle-box > span.invert{
    	background: #F29300; /* スクロール後の色 */
    }
#menu-txt.invert-b{
    	color: #F29300; /* スクロール後の色 */
    }