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

nav .gnavi__list {
font-family: "Hiragino Sans Old W6 JIS2004","sans-serif";
}

.global-nav {
position:fixed;
right:-100%;
top:0;
width:100%;
height:100vh;
padding-top:60px;
background-color:#004ebd;
background: linear-gradient(181deg,rgba(0, 72, 173, 1) 35%, rgba(59, 177, 255, 1) 100%);
transition:all .3s;
z-index:200;
overflow-y:auto;
font-size:20px;
line-height:27px;
}

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

.global-nav__item {
text-align:left;
padding:10px 0;
letter-spacing:0.1em;
}

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

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

.global-nav__item a:hover {}

.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:#004ebd;
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:#fff;
transform:rotate(45deg);
top:8px;
}

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

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

.global-nav__item {
color:#fff;
font-size:16px;
font-family: "Hiragino Sans Old W6 JIS2004","sans-serif";
text-align:center;
border-bottom:1px #fff solid;
}

.dropdown__lists {
margin:0 0 0 1em;
}

.dropdown__lists li {
list-style:none;
}

}

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

@media (min-width:641px) {

.hamburger {
display:none;
}

ul {
margin: 0;
}
li {
list-style:none;
}

nav {
border-top:3px #0056d0 solid;
width:100%;
}

.gnavi__wrap {
    width: 100%;
    margin: 0 auto;
    z-index:50;
}
.gnavi__lists {
    display: flex;
    margin:0 auto;
    width:1000px;
}
.gnavi__list {
    width: 20%;
    height: 60px;
    background-color: #fff;
    position: relative;
    transition: all .3s;
}
.gnavi__list:hover {
    background-color: #0056d0;
}
.gnavi__list:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}
.gnavi__list:hover::before {
    background-color: #0071BB;
}
.gnavi__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #1b4059;
    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: all .3s;
}
.gnavi__list:hover a {
    color: #fff;
}

.gnavi__list:hover .dropdown__lists {
    display: block;/*Gナビメニューにホバーしたら表示*/
}
.dropdown__list {
    background-color: #004d80;
    height: 60px;
    transition: all .3s;
    position: relative;
    z-index:40;
}
.dropdown__list:not(:first-child)::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #3492d1;
    position: absolute;
    top: 0;
    left: 0;
}
.dropdown__list:hover {
    background-color: #003558;
}
.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}
.dropdown__list a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
}

.dropdown__lists {
    visibility: hidden;/*デフォルトでは非表示の状態にしておく*/
    opacity: 0;/*不透明度0*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
    width: 100%;
    position: absolute;
    padding:0;
    top: 60px;
    left: 0;
}
.gnavi__list:hover .dropdown__lists {
    visibility: visible;/*Gナビメニューにホバーしたら表示*/
    opacity: 1;/*不透明度1*/
}

}