/*navigtion*/
.pc-menu {
 max-width: 1200px;
 margin: auto;
 margin-top: 14px;
 margin-bottom: 7px;
 display: flex;
 justify-content: center;
}

.pc-menu li {
 color: #333;
 font-size: min(1vw, 14px);
 font-weight: 600;
 border-left: 1px solid #333;
 padding: 0 1.9%;
}

.pc-menu li:first-child {
 border: none;
 padding-left: 0;
}

.pc-menu li:last-child {
 padding-right: 0;
}

.pc-menu li a,
.pc-menu li a:active {
 color: #333;
 text-decoration: none;
 transition: .3s;
}
.pc-menu li a:hover{
  color: #2cb4a8;
}
nav.globalMenuSp {
 display: none;
}

/*　ハンバーガーボタン　*/
/* デザインが崩れるのでここは変更 ここから */
/*
.hamburger {
 display: none;
 position: absolute;
 z-index: 3;
 right: 15px;
 top: 10px;
 width: 50px;
 height: 50px;
 cursor: pointer;
 text-align: center;
}
*/
.hamburger {
 display: none;
 position: absolute;
 z-index: 3;
 right: 0;
 top: 10px;
 width: 50px;
 height: 50px;
 cursor: pointer;
 text-align: center;
}
/* デザインが崩れるのでここは変更 ここまで */

.hamburger span {
 display: block;
 position: absolute;
 width: 40px;
 height: 2px;
 background: #555;
 -webkit-transition: 0.3s ease-in-out;
 -moz-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
 top: 20px;
}

.hamburger span:nth-child(2) {
 top: 35px
}

.hamburger span:nth-child(3) {
 top: 50px;
}

.hamburger span:nth-child(4) {
 display: none;
}

@media only screen and (max-width: 1024px) {
  .logo-img {
    max-width: 220px;
  }

  .other-links.pc-only {
    display: none;
  }

  .pc-menu {
    display: none;
  }

  #searchBt.btnAcv {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
  }
  header.active{
    position: fixed;
  }
  .hamburger {
    display: block;
    background-color: #fff;
  }

  /* ナビ開いてる時のボタン */
  .hamburger.active span:nth-child(1) {
    top: 20px;
    left: 0px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 20px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .hamburger.active span:nth-child(4) {
    display: block;
    top: 40px;
    height: 20px;
    background: none;
    font-size: .7em;
    background-color: #fff;
  }

  .scrollbar {
    max-height: 90vh;
    padding: 2em;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* デザインが崩れるのでここは変更 ここから */
  /*
  nav.globalMenuSp {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    z-index: 2;
    top: 80px;
    right: 0;
    color: #000;
    background: #fff;
    padding: 10px 10px 15px 5px;
    transition: .5s;
    ★ width: 80%; ★
    display: block;
  }
  */
  nav.globalMenuSp {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    z-index: 2;
    top: 80px;
    right: 0;
    color: #000;
    background: #fff;
    padding: 10px 10px 15px 5px;
    transition: .5s;
    /* width: 80%; */
    display: block;
    border: 1px solid rgb(0 0 0 / 37%);
  }
  /* デザインが崩れるのでここは変更 ここまで */

  /* デザインが崩れるのでここは変更 ここから */
  /*
  nav.globalMenuSp.active {
    visibility: visible;
    opacity: 100;
    transform: translateX(0%);
    box-shadow: -5px 5px 4px -2px rgb(0 0 0 / 37%)
  }
  */
  nav.globalMenuSp.active {
    visibility: visible;
    opacity: 100;
    transform: translateX(0%);
  }
  /* デザインが崩れるのでここは変更 ここまで */

  nav.globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    text-indent: 10px;
    margin-bottom: 30px;
  }

  #fontSize ul {
    text-indent: 0;
  }

  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
  }

  nav.globalMenuSp ul li.separator {
    border-bottom: 1px solid #000;
  }

  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  nav.globalMenuSp ul li:hover {
    background: #ddd;
  }

  nav.globalMenuSp ul li a {
    display: block;
    font-size: .9em;
    color: #000;
    padding: .5em 0;
    text-decoration: none;
  }

  #BtnMenu {
    display: inline-block;
    width: 27px;
    margin-left: 10px;
    position: relative;
    top: 1em;
  }

  #BtnMenu.btnAcv {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
  }
}

@media only screen and (min-width: 768px) {
  nav.globalMenuSp > #banner-area{
    display: none;
  }
}

@media only screen and (max-width: 640px) {
  nav.globalMenuSp > #banner-area{
   flex-direction: column;
  }
  nav.globalMenuSp > #banner-area .banner{
   width: 80%;
  }
}