@charset "UTF-8";
/* CSS Document */

.global-nav {
position:fixed;
right:-100%;
top:67px;
width:100%;
height:100vh;
padding-top:20px;
background-color:#0069b4;
transition:all .3s;
z-index:200;
overflow-y:auto;
font-size:20px;
line-height:27px;
}

.global-nav__list {
border-top:1px #6295c6 solid;
margin:0;
padding:0;
list-style:none;
}

.global-nav__item {
border-bottom:1px #6295c6 solid;
text-align:left;
padding:0;
letter-spacing:0.1em;
}

.global-nav__item span {letter-spacing:0;}

.global-nav__item a {
display:block;
padding:0.5em 2em;
text-decoration:none;
color:#fff !important;
}

.global-nav__item a:link {}
.global-nav__item a:hover {
background:#6295c6;
}

.black-bg {
position:fixed;
left:0;
top:0;
width:100vw;
height:100vh;
z-index:100;
background-color:#fff;
opacity:0;
visibility:hidden;
transition:all .3s;
cursor:pointer;
}

.nav-open .global-nav {right:0;}

.nav-open .black-bg {
opacity:.8;
visibility:visible;
}

/*==================== for Smartphone ====================*/

@media (max-width:640px) {

.hamburger {
position:fixed;
right:15px;
top:20px;
width:25px;
height:35px;
cursor:pointer;
z-index:300;
}

.hamburger__line {
position:absolute;
left:0;
width:25px;
height:2px;
background-color:#0069b4;
transition:all .3s;
}

.hamburger__line--1 {top:0;}
.hamburger__line--2 {top:8px;}
.hamburger__line--3 {top:16px;}

.nav-open .hamburger__line--1 {
background-color:#0069b4;
transform:rotate(45deg);
top:8px;
}

.nav-open .hamburger__line--2 {
width:0;
left:50%;
}

.nav-open .hamburger__line--3 {
background-color:#0069b4;
transform:rotate(-45deg);
top:8px;
}

.global-nav__item {
font-size:16px;
}

.global-nav__item a {
position: relative;
padding-right: 20px;
}

.dropdown__lists {
list-style:none;
}

.dropdown__list a {
padding:0.5em 0 0.5em 4em;
}

.dropdown__list::before {
content:"";
display:block;
background:#6295c6;
height:1px;
width:100%;
margin:0 0 0 4em;
}

.global-nav__item > a::after,
.dropdown__list a::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: translateY(-50%)  rotate(-45deg);
    margin-left: 12px;
    float: right;
    top: 50%;
    right: 2em;
    transition: all .3s ease;
}

.global-nav__item > a:hover::after,
.dropdown__list a:hover::after {
    right: 2.5em;
}

}

/*==================== for PC ====================*/

@media (min-width:641px) {

.hamburger {
display:none;
}

.gnavi__list {
position: relative;
}

/* 初期状態（非表示） */
.dropdown__lists {
position: absolute;
top: 100%;
left: 0;
background-color:rgba(255, 255, 255, 1);
list-style: none;
margin: 0;
padding:10px 20px;
min-width: 120px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px); /* 上から下に降りてくる */
transition: all 0.3s ease;
text-align:left;
z-index: 300;
}

/* ホバーで表示（上から下にスッと出る） */
.gnavi__list:hover > .dropdown__lists {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

/* 各項目 */
.dropdown__list a {
display:inline-block;
margin:10px 0;
padding: 5px 0;
color: #fff;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.3s;
}

.dropdown__list a:hover {
background-color: rgba(255, 255, 255, 0.2);
}

nav li .dropdown__lists li {
margin:0;
}

.dropdown__list {
display:block;
}


}