@charset "utf-8";

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

#g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
                                top:0;
                                right: -120%;
                                width:100%;
                                height: 100%;/*ナビの高さ*/
                                background: rgba(0, 0, 0, 0.3);
    /*動き*/
  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;
                                z-index: 999;
                                top:0;
                                right:0;
                                padding: 30% 15% 0 10%;
                                background: #000;
                                height: 100%;
}

/*リストのレイアウト設定*/
#g-nav li {
                                list-style: none;
                                text-align: left; 
}

#g-nav li a {
                                color: #a86cc8;
                                text-decoration: none;
                                padding:5px 10px;
                                display: block;
                                letter-spacing: 0.1em;
                                transition: .2s all;
                                position: relative;
                                font-family: "Noto Serif Display", serif;
                                font-weight: 700;
}
#g-nav li a:hover {
                                color: #a86cc8;
                                opacity: 0.7;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1 {
                                position:fixed;
                                z-index: 9999;/*ボタンを最前面に*/
                                top: 10px;
                                right: 5px;
                                cursor: pointer;
                                width: 50px;
                                height: 50px;
}
  
/*×に変化*/  
.openbtn1 span {
                                display: inline-block;
                                transition: all .4s;
                                position: absolute;
                                left: 14px;
                                height: 2px;
                                border-radius: 2px;
                                background-color: #a86cc8;
                                width: 45%;
  }

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

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

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

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

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

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


p.menu {
                                margin: 0 auto;
                                text-align: center;
                                padding: 48px 0 0;
                                font-size:0;
                                color: #a86cc8;
}
p.menu:before {font-size: 11px; content: "MENU"}
.openbtn1.active p.menu:before {
                                content: "CLOSE";
}



/*990px以上 ----------------------------------------*/

@media screen and (min-width:990px){
#g-nav{
//                                width: 60%;
}
/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション文字揃え*/
                                position: absolute;
                                z-index: 999;
                                top:0;
                                right:0;
                                padding: 11% 18% 0 5%;
                                height: 100%;
}
#g-nav li a {
                                font-size: 110%;
                                padding: 0.8rem 10px;
}
.openbtn1 {
                                top: 10px;
                                right: 4%;
}

}



/*page-topボタン ----------------------------------------*/
#page-top a {
                                display: flex;
                                justify-content:center;
                                align-items:center;
                                width: 40px;
                                height: 40px;
                                padding: 8px 10px 12px;
                                text-align: center;
                                text-decoration: none;
                                transition:all 0.3s all;
                                opacity: 0.8;
                                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#page-top a img {
                                width: 20px;
                                margin: 0;
}
#page-top a:hover{
                                opacity: 1;
                                padding: 5px 10px 15px;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:5px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

@media screen and (min-width:990px){
#page-top a {
                                width: 50px;
                                height: 50px;
                                padding: 8px 10px 12px;
}
#page-top a img {
                                width: 25px;
}
#page-top {
                                right: 3%;
	bottom:10px;
}
}