@charset "utf-8";

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
top:0;
right: -120%;
width:100%;
height: 100vh;/*ナビの高さ*/
background:#EBEBEB;
/*動き*/
transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え
    position: absolute;
    
    top:30%;
    left:20%;
    transform: translate(-20%,-30%);
	*/
	z-index: 999;
	margin: auto;
	padding-top: 5em;
}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
text-align: left;
padding-left: 30px;	
}

#g-nav li a{
color: #DD7190;
font-size: 	1.8rem;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5em;	
}

#g-nav li a:hover {
transition: all .6s;
opacity: 0.6;	
}





/*========= ボタンのためのCSS ===============*/
/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/
/*ボタンを左側に配置する*/
.openbtn-set{
position:fixed;
top:10px;
right: 0px;
z-index: 9999;/*ボタンを最前面に*/
background: #fff;
border-top: 3px solid #DD7190;
border-bottom: 3px solid #DD7190;
border-left: 3px solid #DD7190;
border-radius: 20% 0% 0% 20%;	
}

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn1{
position: relative;/*ボタン内側の基点となるためrelativeを指定*/
/*background:#D54884;*/
cursor: pointer;
width: 55px;
height:55px;
}

/*ボタン内側*/
.openbtn1 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 15px;
    height: 2px;
    border-radius: 5px;
    background: #DD7190;
    width: 45%;
  }


.openbtn1 span:nth-of-type(1) {
top:13px;
}

.openbtn1 span:nth-of-type(2) {
top:19px;
}

.openbtn1 span:nth-of-type(3) {
top:25px;
}

.openbtn1 span:nth-of-type(3)::after {
content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
position: absolute;
top:0px;
left:-6px;
color: #DD7190;
font-size: 0.8em;
text-transform: uppercase;
}

/*activeクラスが付与されると線が回転して×になり、Menu?Closeに変更*/

.openbtn1.active span:nth-of-type(1) {
    top: 14px;
    left: 20px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn1.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 26px;
    left: 20px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn1.active span:nth-of-type(3)::after {
    content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
    top:0px;
    left:0px;
	font-size: 0.75em;
}