/* ▼「三」ボタン */
.hamburger_btn{
  width: 40px;
  height: 40px;
  z-index: 100; /*最前面*/
  }
.hamburger_btn span{
  position: absolute;
  width: 35px; /*線の長さ*/
  height: 2px; /*線の太さ*/
  background: #FFFFFF; /*線の色*/
  transition: .4s;
  }
.hamburger_btn span:nth-child(1) {top: 25px;}/*上の線*/
.hamburger_btn span:nth-child(2) {top: 35px;}/*中の線*/
.hamburger_btn span:nth-child(3) {top: 45px;}/*下の線*/



/* 「×」ボタン：「三」をクリックすると表示される */
.hamburger_btn.active span:nth-child(1) {top: 30px;transform: rotate(45deg);}/*上の線：クリックされたら真ん中に移動させて45℃回転*/
.hamburger_btn.active span:nth-child(2) {opacity: 0;}/*中の線：クリックされたら透過*/
.hamburger_btn.active span:nth-child(3) {top: 30px;transform: rotate(-45deg);}/*下の線：クリックされたら真ん中に移動させて-45℃回転*/


/* スマホヘッダー：「三」をクリックすると表示されるナビ */
nav.globalMenuSp {
position: fixed;
z-index : 2;
top  : 0;
left : 0;
color: #fff;
background: #898989;
text-align: center;
width: 100%;
opacity: 0;
transition: opacity .6s ease, visibility .6s ease;
visibility: hidden;　/* 閉じているときはリンクは無効 */
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
  border-bottom:solid 1px;
  margin:auto;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
  visibility: visible; /* 閉じているときはリンクは無効 */
}



/* -----　レスポンシブ対応　開始 ----- */
@media screen and (min-width: 1280px) {
/* 最大から1280pxまでの幅の場合に適応される */
.hamburger {display:none;}
.hamburger span {display:none;}
.globalMenuSp {display:none;}
}
/* -----　レスポンシブ対応　終了 ----- */