@charset "UTF-8";
#nav-toggle{
position: fixed;/*位置を固定する*/
top: 25px;
right: 25px;
height: 32px;
cursor: pointer;
}
#nav-toggle>div{
position: relative;
width: 36px;
}
/*ハンバーガーメニューのボーダー設定*/
#nav-toggle span{
width: 100%;/*メニュのボーダーの横幅*/
height: 1px;/*メニュのボーダーの線幅*/
left: 0;
display: block;
background-color: #333333;/*線の色*/
position: absolute;/*相対位置*/
transition: transform .6s ease-in-out,top .5s ease;/*アニメーション*/
}
#nav-toggle span:nth-child(1){
top:0;
}
#nav-toggle span:nth-child(2){
top:14px;
}
#nav-toggle span:nth-child(3){
top:28px;
}
#nav-toggle:hover span:nth-child(1){
top:4px;
}
#nav-toggle:hover span:nth-child(3){
top:24px;
}
.open #nav-toggle span{
background-color: #FFFFFF;
}
.open #nav-toggle span:nth-child(1){
top:15px;
transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2){
top:15px;
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3){
top:15px;
transform: rotate(-45deg);
}

/*重なり順*/
#nav-toggle{
z-index: 1000;
}
.wrapper{
z-index: 900;
}
#global-nav{
background-color: #000000;
color: #FFFFFF;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 990;
text-align: center;
display: flex;
visibility: hidden;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 28px;
opacity: 0;
transition: opacity .6s ease, visibility .6s ease;
}
#global-nav a{
display: block;/*ブロック表示に変更*/
color: #FFFFFF;/*文字色*/
text-decoration: none;/*文字の飾りを無し*/
padding: 10px 0;/*上下 左右*/
transition: color .6s ease;
/*tranditionのプロパティ
要素(タグ)ごとに変化を設定できる
何を変化させるのか ⇨ 文字色(color)
開始から終了の時間 ⇨ ミリ秒設定(.6s)1000ミリ秒＝1秒
変化の進行度合い ⇨ 開始時と終了時はゆっくり変化*/
}
#global-nav ul{
list-style: none;/*箇条書きの記号を非表示*/
}
#global-nav ul li{
opacity: 0;
transform: translateX(200px);
transition: transform .6s ease, opacity .2s ease;
}
#global-nav ul li:nth-child(2){
transition-delay:  .15s;/*遅延*/
}
#global-nav ul li:nth-child(3){
transition-delay:  .3s;/*遅延*/
}
#global-nav ul li:nth-child(4){
transition-delay:  .45s;/*遅延*/
}
#global-nav ul li:nth-child(5){
transition-delay:  .6s;/*遅延*/
}
#global-nav ul li:nth-child(6){
transition-delay:  .75s;/*遅延*/
}
#global-nav ul li:nth-child(7){
transition-delay:  .9s;/*遅延*/
}
/*open(ハンバーガーメニューを開くとき)*/
.open {
overflow: hidden;/*ボックスの範囲から溢れたものは非表示*/
}
.open #global-nav {
visibility: visible;/*表示する*/
opacity: 1;/*不透明度*/
}
.open #global-nav li{
opacity: 1;
transform: translateX(0);
transition: transform 1s ease, opacity 0.9 ease;
}
#global-nav ul{
background-color: transparent;
display: block;
}
#global-nav nav{
width: 150px;/*メニューボタンと同じサイズ*/
height: auto;
}

@media (min-width: 960px) {
#nav-toggle {
visibility: hidden;
}
div#global-nav {
width: 310px;
height: 50px;
position: relative;
right: 0;
opacity: 1;
transition: none;
background-color: transparent;
visibility: visible;
}
div#global-nav nav {
width: 100%;
}
div#global-nav nav ul {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
list-style: none;
align-items: center;
}
#global-nav nav ul li{
width: 150px;
height: 50px;
line-height: 50px;
transform: none;
transition: none;
opacity: 1;
}
#global-nav li a {
display: block;
text-align: center;
width: 100%;
height: 50px;
transition: none;
color:cornflowerblue;/*メニューテキストの色*/
text-stroke:1px #fff;
/*-webkit-text-stroke:1px #fff;*/
padding: 0;
}
#global-nav li a:hover{
color:aqua;/*メニューテキストの色(マウスオーバー)*/
}
}