/* ハンバーガーボタン
==============================　*/
.toggle-btn {
  width: 40px;
  height: 30px;
  position: absolute;
  left: 85%;
  top: 20px;
  z-index: 9999;
  cursor: pointer;
}

.toggle-btn__line {
  background: #333;
  display: block;
  height: 4px;
  position: absolute;
  transition: transform 0.5s;
  width: 100%;
}

.toggle-btn__line--top {
  top: 3px;
}

.toggle-btn__line--center {
  top: 15px;
}

.toggle-btn__line--bottom {
  top: 27px;
}

.toggle-btn__line--top.active {
  background: #fff;
  top: 15px;
  transform: rotate(45deg);
}
.toggle-btn__line--center.active {
  background: #fff;
  transform: scaleX(0);
}
.toggle-btn__line--bottom.active {
  background: #fff;
  top: 15px;
  transform: rotate(135deg);
}

/* ナビゲーションメニュー
==============================　*/
.global-nav {
  display: none;
  position: fixed;
  background: rgba(51,153,153,0.8);
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999;
}

.global-nav__inner {
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100%;
  height: 100%;
padding-top: 80px;
}

.global-nav__item {
margin-bottom: 7%;
animation: anim 0.5s forwards;
}
@keyframes anim {
  0% {
  transform: translateX(-70px);
  transform: translatey(-20px);
  }
  100% {
  transform: translateX(0px);
  transform: translatey(0px);
  }
}

.global-nav__item {
  font-size: 5.5vw;
  font-weight: normal;
  text-decoration: none;
  transition: 0.5s;
  list-style: none;
font-family: 'Noto Sans JP','Roboto','Gothic Medium BBB','Sawarabi Gothic',sans-serif;
}

.global-nav__item a {
color: #fff;
text-decoration: none;
display:block;
}
.global-nav__item a:hover {
color: #fff;
}

ul.global-nav__list {
list-style:none;
width: 100%;
}

/* サブメニュー */
.global-nav__item .hidden_box {
margin: 0;
padding: 0;
width: 100%;
}

.global-nav__item .hidden_box label{
position:absolute;
top: 0;
right: 10%;
padding: 10px 15px;
cursor: pointer;
cursor: hand;
}

.global-nav__item .hidden_box label::before{
content: "+";
color: #fff;
font-size: 30px;
position: relative;
top: -10px;
}
.global-nav__item .hidden_box input:checked ~ label{
}

.global-nav__item .hidden_box input:checked ~ label::before{
  display: none;
}
.global-nav__item .hidden_box input ~ label::after{
  display: none;
}
.global-nav__item .hidden_box input:checked ~ label::after{
  display: inline-block;
}
.global-nav__item .hidden_box label::after{
content: "-";
color: #fff;
font-size: 30px;
position: relative;
top: -10px;
}

/*ボタンホバー時*/
.global-nav__item .hidden_box label:hover {
color: #fff;
}
.global-nav__item .hidden_box input:checked ~ label:hover{
background-color:rgba(255,255,255,0)!important;
}
.global-nav__item .hidden_box input {
    display: none;
}
.global-nav__item .hidden_box .hidden_show input {
    display: inline-block;
}

/*中身を非表示にしておく*/
.global-nav__item .hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
}


/*クリックで中身表示*/
.global-nav__item .hidden_box input:checked ~ .hidden_show {
padding: 0;
height: auto;
opacity: 1;
transition: 0.8s;
}

ul.global-nav__list .sub-nav{
list-style:none;
width: 100%;
margin: 10px 0 0 0;
}
ul.global-nav__list .sub-nav li{
line-height:1;
padding: 8px 0;
font-size: 4.5vw;
}
.global-nav__item .sub-nav a {
padding: 0 0 0 0;
}


.nav-sp { display: none; }

/* ************************************************ 
*   レスポンシブ
* ************************************************ */
/* PC 画面の横幅が960px以上 */
@media only screen and (min-width: 960px){
.nav-sp { display: none; }
}

/* Tablet (Portrait) 画面の横幅が768px〜959pxまで */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.nav-sp { display: none; }
}

/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
.nav-sp { display: block; }
}