/*グローバルメニュー　ハンバーガーボタン　*/
nav.globalMenuSp {
 margin-top: auto;
 margin-left: auto;
}

nav.globalMenuSp ul {
 max-width: 700px;
 text-align: right;
}
nav.globalMenuSp ul li {
 list-style-type: none;
 padding: 0;
 display: inline-block;
 position: relative;
 margin-bottom: 0;
 padding-left: 30px;
}


nav.globalMenuSp ul li a {
 text-decoration: none;
 color: #000;
 display: block;
}

nav.globalMenuSp.active {
 transform: translateY(0%);
}

.gnavi_lists {}

.gnavi_list {
 position: relative;
 transition: all .3s;
}

nav.globalMenuSp ul li .dropdown_lists {
 display: none;
 width: 180% !important;
 position: absolute;
 top: 24px;
 left: -20%;
 filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.24));
}

nav.globalMenuSp ul li:hover .dropdown_lists {
 opacity: 100;
 display: block;
}
nav.globalMenuSp ul li:active .dropdown_lists {
 display: block;
}

.dropdown_lists::before {
 position: relative;
 content: '';
 display: block;
 width: 100%;
 height: 10px;
}

.dropdown_list {
 height: 40px;
 font-size: .9em;
 transition: all .3s;
 position: relative;
 background-color: #fff;
 width: 100% !important;
 text-align: left;
 color: #000;
}

.dropdown_list a {
 padding: 10px 0 0 20px !important;
}

.dropdown_list a:hover:before {
 content: '●';
 position: absolute;
 left: 5px;
 font-size: .9em;
}

/*list arrow*/
.list-arrow {
 position: relative;
 display: inline-block;
 padding: 10px;
}

.list-arrow::before {
 content: '';
 width: 10px;
 height: 10px;
 border-top: solid 2px #fff;
 border-right: solid 2px #fff;
 position: absolute;
 left: 10px;
 top: 8px;
}

.list-arrow.arrow-bottom::before {
 transform: rotate(135deg);
}

/*list arrow*/

@media screen and (max-width:768px) {
 nav.globalMenuSp ul li .dropdown_lists {
   display: none;
   position: initial;
   top: 60px;
   filter: none;
 }

 nav.globalMenuSp ul li:hover .dropdown_lists {
   display: block;
   width: 100% !important;
 }
 nav.globalMenuSp ul li:active .dropdown_lists {
   display: block;
   width: 100% !important;
 }

 .dropdown_lists::before {
   display: none;
 }

 .dropdown_list {
   text-align: center;
   padding: inherit !important;
   font-size: 1em;
 }

 .dropdown_list a:hover:before {
   display: none;
 }

 .hamburger {
   background-color: #fff;
   display: block;
   position: fixed;
   z-index: 100;
   right: 5px;
   top: 0;
   width: 50px;
   height: 50px;
   cursor: pointer;
   text-align: center;
   border: 1px solid #fff;
   box-shadow: 0 5px 5px 0 rgb(0 0 0 / 20%);
 }

 .hamburger span {
   display: block;
   position: absolute;
   width: 30px;
   height: 2px;
   left: 10px;
   background: #555;
   -webkit-transition: 0.5s ease-in-out;
   -moz-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
 }

 .hamburger span:nth-child(1) {
   top: 15px;
 }

 .hamburger span:nth-child(2) {
   top: 25px;
 }

 .hamburger span:nth-child(3) {
   top: 35px;
 }

 /* ナビ開いてる時のボタン */
 .hamburger.active span:nth-child(1) {
   top: 25px;
   left: 10px;
   -webkit-transform: rotate(315deg);
   -moz-transform: rotate(315deg);
   transform: rotate(315deg);
 }

 .hamburger.active span:nth-child(2),
 .hamburger.active span:nth-child(3) {
   top: 25px;
   -webkit-transform: rotate(-315deg);
   -moz-transform: rotate(-315deg);
   transform: rotate(-315deg);
 }

 nav.globalMenuSp {
   position: fixed;
   z-index: 2;
   top: -50px;
   left: 0;
   color: #000;
   /* background: #fff; */
   text-align: center;
   transform: translateY(-100%);
   transition: all 0.6s;
   width: 100%;
 }

 nav.globalMenuSp ul {
   background: #fff;
   margin: 0 auto;
   padding: 0;
   width: 100%;
   text-align: center;
 }

 nav.globalMenuSp ul li {
   list-style-type: none;
   padding: 0;
   width: 100%;
   border-bottom: 1px solid #999;
 }

 nav.globalMenuSp ul li:last-child {
   padding-bottom: 0;
   border-bottom: none;
 }

 nav.globalMenuSp ul li a {
   display: block;
   color: #000;
   padding: 1em 0;
   text-decoration: none;
 }

 /* このクラスを、jQueryで付与・削除する */
 nav.globalMenuSp.active {
   transform: translateY(0%);
   top: 0;
   height: 100%;
   opacity: .95;
   z-index: 9;
 }
}
