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

#toggle {
display: block;
position: fixed;
top:0px;right: 0;
display: none;
background: #1F2B33;padding: 16px 14px;
border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;
}

#toggle-box {
position: relative;
width: 25px;
height: 20px;
cursor: pointer;
}
#toggle-box > span {
width: 100%;
height: 2px;
left: 0;
display: block;
background: #fff;
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: #fff;}
.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: 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-content .gr-btn{margin: 0 8px;font-size: 16px;border: 1px solid #01A8B8;}
#nav-content .bl-btn{margin: 0 8px;font-size: 16px;border: 1px solid #005480;}


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

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


#nav-content .btn-link{display: inline-block;font-size: 20px;font-weight: 700;margin-top: 20px;}
#nav-content .btn-link a{display: block;color:#fff;padding:15px 60px 15px 35px;border-radius: 24px;-webkit-border-radius: 24px;-moz-border-radius: 24px;
background:#1f2b33 url(../images/arrow-mini-white01.png) no-repeat center right 20px;
}
#nav-content .btn-link a:hover{
filter: alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;
text-decoration:none;
}

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

@media screen and (max-width: 1100px) {
#l-menu {width: 10px;height: 10px;display: block;}
#nav-content {display: block;}
#toggle {top: 24px;right: 20px;}
#toggle-box {
position: relative;
width: 25px;
height: 20px;
cursor: pointer;
}
#toggle {display: block;}

.menu-txt{
display: block;
position: fixed;
top: 36px;
right:15px;
}
.is-open .menu-txt{
display: block;
position: fixed;
}
}

@media screen and (max-width: 600px) {
#toggle {
background: #1F2B33;padding: 10px 8px;
border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;
top: 10px;right: 15px;
}

#toggle-box {
position: relative;
width: 20px;
height: 16px;
cursor: pointer;
}
#nav-content {padding:80px 0 0 0;font-size: 20px;}
#nav-content ul {list-style: none;margin-bottom: 20px;}
#nav-content ul li {margin: 0 0 15px 0;}

#nav-content .gr-btn{margin: 0 5px;font-size: 12px;border: 1px solid #01A8B8;}
#nav-content .bl-btn{margin: 0 5px;font-size: 12px;border: 1px solid #005480;}

.nav-logo{
position: absolute;
top:15px;
left:15px;
}
.nav-logo img {width: 180px;height: auto;}
#nav-content .btn-link{font-size: 16px;}
}
@media screen and (max-width: 480px) {
#nav-content {padding:80px 0 0 0;font-size: 18px;}
}
/*--------------------------------------------------------------------------------*/

.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: #fff;

}

.ac-child {
padding: 0.8em 0 0.8em 0;
font-size:16px;
}

.ac-child ul li {
margin: 0 0 15px 0 !important;
}

/*--------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
.ac-parent {
  height: 35px;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
  transition: .3s;
  color: #fff;
}

.ac-child ul li {
margin: 0 0 10px 0 !important;
}
.ac-child {
padding: 0.8em 0 1em 0;
font-size:13px;
}
}
/*--------------------------------------------------------------------------------*/

