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

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

#toggle-box {
position: relative;
width:34px;
height: 20px;
cursor: pointer;
}
#toggle-box > span {
width: 100%;
height: 2px;
left: 0;
display: block;
background: #33AAE2;
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: #33AAE2;}

.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:none;
z-index: 1;
overflow-x: hidden;
width: 100%;
height:100vh;height !important:100svh !important;
background:#fff;
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);
}
#nav-content a{
color:#222;
}
#nav-content nav {margin-bottom: 30px;}

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

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

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

/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
#l-menu {display: block;position: fixed;}
.nav-logo{display: block;top:15px;left:15px;}
#toggle {display: block;top:22px;right: 30px;}
#nav-content {display:block;}
}


@media screen and (max-width: 600px) {
#nav-content {display: block;}
.nav-logo{top:15px;left:15px;}
.nav-logo img{width:200px;height:auto;}
#toggle {display: block;top:22px;right: 15px;}
#nav-content nav {margin-bottom: 20px;}
}

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

.ac {margin: 0 20px;padding: 40px 40px 10px 40px;font-size: 120%;border-top:1px solid #33AAE2;border-bottom:1px solid #33AAE2;  text-align: left;}
.ac-parent {
  height: 50px;
  line-height:line-height: 50px;
  cursor: pointer;
  transition: .3s;
  color: #333;
width:45%;margin-right:1%;display: inline-block;
}

.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: 45px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  transition: .3s;
  color: #155BA0;
}

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

@media screen and (max-width: 600px) {
.ac {margin: 0 20px;padding: 40px 0px 10px 0;font-size: 110%;}

}
@media screen and (max-width: 480px) {
.ac {padding: 15px 0px 15px 0;font-size: 90%;}
.ac-parent {height: 25px;line-height:25px;width:100%;}
.ac-none {height: 35px;line-height: 35px;}
}


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

#nav-content .btn{letter-spacing:0.1em;font-size:100%;width:250px;text-align:center;}
#nav-content .btn a{display:block;padding:15px 25px 15px 20px;}
#nav-content .orange-btn{ 
background-image: url(../images/btn-line.png), url(../images/grd-btn-orange.png);
background-repeat: no-repeat,no-repeat;
background-size: 18px auto,cover;
background-position: right center, center center;
background-color: transparent;
}
#nav-content .blue-btn{ 
background-image: url(../images/btn-line.png), url(../images/grd-btn-blue.png);
background-repeat: no-repeat,no-repeat;
background-size: 18px auto,cover;
background-position: right center, center center;
background-color: #33AAE2;
margin:0 18px 0 0;
}


/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width:600px){
#nav-content .btn{width:auto;}
}

@media screen and (max-width:480px){
#nav-content .btn{font-size:70%;}
#nav-content .blue-btn{ 
margin:0 3px 0  0;
}
#nav-content .btn a{display:block;padding:10px 20px 10px 15px;}
}

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


.menu-text{font-size:9.5px;letter-spacing:0;padding-top:25px;text-align:center;}


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


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