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

#toggle {
display: block;
position: fixed;
top: 96px;right: 76px;
}

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

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

.is-open #toggle-box > span {background: #333;}
.page .is-open #toggle-box > span {background: #333 !important;}
.is-open #toggle-box > span:nth-child(1) {top: 40%;transform: rotate(15deg) translatey(-10%);}
.is-open #toggle-box > span:nth-child(2) {width: 0;}
.is-open #toggle-box > span:nth-child(3) {top: 40%;transform: rotate(-15deg) 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: #fff;
position: fixed;
top: 0;
left: 0;
padding: 100px 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:100px;
left:90px;
  background: #fff;
  padding:0;
}

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

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


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

@media screen and (max-width: 1200px) {
#l-menu {width: 10px;height: 10px;display: block;}
.nav-logo{top:20px;left:30px;}
.nav-logo img {width: 185px;height: auto;}
#nav-content {display: block;}
#toggle {top: 30px;right: 30px;}
#toggle-box {
position: relative;
width: 50px;
height:10px;
cursor: pointer;
}
#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) {
#toggle {top: 25px;right: 20px;}
.nav-logo{top:20px;left:15px;}
.nav-logo img {width: 140px;height: auto;}
#nav-content {padding:80px 0 0 0;font-size: 18px;}
#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;}
}
/*--------------------------------------------------------------------------------*/

/* 下アイコン */
.under-box{border-top: 1px solid #333;padding: 25px 0;margin: 0 25px ;}
.under-box .yoyaku-box{
background: #333;
display: inline-block;
vertical-align: middle;
line-height:1;
}

.under-box .yoyaku-box a,.under-box .tel-box a{
padding: 10px 19px;
display:block;
}
.under-box .yoyaku-box:hover{filter: alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}

.under-box .tel-box{display: inline-block;
vertical-align: middle;
line-height:1;background: #fff;
}

.under-box .yoyaku-box img{width: 93px;height: auto;}
.under-box .tel-box img{width: 93px;height: auto;}

.otoiawase{margin-top: 5px;}
.form-icon{
border:1px solid #333 !important;
display: inline-block;
vertical-align: top;
line-height:1;
font-size:14px;
margin:8px 10px ;
padding:16px 5px 12px 5px;
width:260px;
}
.form-icon a{display: block;}
.form-icon:hover{background:#fff;}

.form-icon::before {
content: '';
display: inline-block;
background-image: url(../images/mail-icon.png);
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
vertical-align:middle;
margin-right: 5px;margin-top: 0;
}


/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width:480px){
.otoiawase{margin-top: 5px;}
.form-icon{
font-size:12px;
padding:8px 5px 6px 5px;
width:100%;
margin:8px 0;
}
.form-icon::before {width: 16px;
height: 16px;

}

}
/*--------------------------------------------------------------------------------*/


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

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