@charset "utf-8";

/* ハンバーガーボタン
==============================　*/
.toggle-btn {
width: 30px;
height: 30px;
position: fixed;
right: 5%;
top: 35px;
z-index: 99999;
cursor: pointer;
}
.toggle-btn::before {
position:relative;
top: -10px;
left: -11px;
content:"";
display:inline-block;
width:50px;
height:50px;
border: 1px solid #898989;
background: rgba(255,255,255,0.7);
border-radius: 50vh;
transition: 0.5s;
}
.toggle-btn:hover::before {
border: 1px solid #0075c1;
transition: 0.5s;
}

.toggle-btn:hover .toggle-btn__line{
background: #0075c1;
transition: 0.5s;
}
.toggle-btn__line {
background: #898989;
display: block;
height: 2px;
position: absolute;
transition: transform 0.5s;
width: 100%;
}

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

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

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

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

/* ナビゲーションメニュー
==============================　*/
.global-nav {
display: none;
position: fixed;
top: 0;
left: 0;
/* background: rgba(220,231,245,0.9);　*/
background: rgba(177,197,222,0.9);
width: 100%;
height: 100%;
z-index: 9999;
}

.global-nav__innerbox {
display: flex;
justify-content: start;
align-items: center;
height: 100%;
width: 80%;
max-width: 1200px;
margin: 0 auto;
}
.global-nav__inner {
display: flex;
justify-content: start;
align-items: flex-start;
width: 100%;
}

ul.global-nav__list {
list-style:none;
width:40%;
}
.global-nav__item {
margin: 0 0 35px 0;
animation: anim 0.5s forwards;
position: relative;
}
.global-nav__item2 {
margin: 0 0 20px 0;
animation: anim 0.5s forwards;
position: relative;
}
@keyframes anim {
  0% {
  transform: translateY(-10px);
  }
  100% {
  transform: translateU(0px);
  }
}
.global-nav__item a,
.global-nav__item2 a {
  color: #fff;
  font-size: 30px;
  font-weight: 400;
  text-decoration: none;
  transition: 0.5s;
  list-style: none;
letter-spacing: 0.1em;
}
.global-nav__item a:hover,
.global-nav__item2 a:hover {
  color: #0075c1;
}

ul.global-nav-sub-menu {
margin: 0 0 35px 0;
padding: 0;
}
ul.global-nav-sub-menu2 {
margin: 0;
padding: 0;
}
.global-subnav__item {
color: #fff;
font-size: 16px;
list-style:none;
margin: 0 0 2.5% 0;
animation: anim 0.5s forwards;
position: relative;
}
.global-subnav__item a {
color: #fff;
font-size: 17px;
font-weight: 400;
text-decoration: none;
transition: 0.5s;
list-style: none;
letter-spacing: 0.1em;
}
.global-subnav__item a:hover {
  color: #0075c1;
}


/* Tablet (Portrait) 画面の横幅が768px〜1159pxまで */
@media only screen and (min-width: 768px) and (max-width: 1159px) {
.global-nav__inner {
justify-content: space-between;
}
ul.global-nav__list {
width:47.5%;
}

}


/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
.toggle-btn {
  width: 30px;
  height: 30px;
  position: fixed;
  right: 5%;
  top: 20px;
  z-index: 99999;
  cursor: pointer;
}
.global-nav__innerbox {
width: 90%;
}
.global-nav__inner {
justify-content: space-between;
}
ul.global-nav__list {
width:47.5%;
}

.global-nav__item {
margin: 0 0 30px 0;
}
.global-nav__item2 {
margin: 0 0 15px 0;
}
.global-nav__item a,
.global-nav__item2 a {
font-size: 7vw;
}

ul.global-nav-sub-menu {
margin: 0 0 30px 0;
}
.global-subnav__item {
font-size: 4.25vw;
margin: 0 0 15px 0;
}
.global-subnav__item a {
font-size: 4.25vw;
}

}