/* ------------------- ナビゲーションの為のCSS 2 ------------------- */
@media screen and (min-width:320px) and (max-width:768px) {

#g-nav.panelactive::after {
    content:url(../imgs/menu_guide.png);
    position:absolute;
    z-index:1000;
    bottom:10%;
    right:0%;
    transform:translateX(-30px);
    color:black;
    font-size:3rem;
    font-family:'Kosugi Maru',sans-serif;
}
}

/* -------------------- ナビゲーションの為のCSS -------------------- */

/* スクロール禁止 */
body.fixed {
    overflow:hidden;
}

#g-nav {
    /* position:fixed;にし、z-indexの数値を小さくして最背面へ */
    position:fixed;
	z-index:999;
	top:-100vh;
    left:0px;
	width:100%;
    height:100vh;
	background:white;
    opacity:0;
	transition:all 0.5s;
}

/* アクティブクラスがついたら透過なしにして最前面へ */
#g-nav.panelactive {
    top:0px;
    opacity:1;
}

/* #g-nav.panelactive::before {
    content:'メニュー';
    position:absolute;
    z-index:999;
    top:25%;
    left:50%;
    transform:translateX(-50%);
    color:black;
    font-size:3rem;
    font-family:'Kosugi Maru',sans-serif;
} */

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

/*ナビゲーション*/
#g-nav ul {
    display:none;
    position:absolute;
    z-index:999;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

#g-nav.panelactive ul {
    display:block;
}

/* リストのレイアウト設定 */
#g-nav li {
	display:block;
    margin:0px auto 15px;
	text-align:center;
	list-style:none;
    color:#000;
}

#g-nav li:last-child {
    margin-bottom:0px;
}

#g-nav li a {
	color:#000;
	text-decoration:none;
	padding:10px;
	display:block;
	text-transform:uppercase;
	letter-spacing:0.1em;
    font-size:2rem;
	font-weight:bold;
}

/* ボタンのためのCSS */
div.openbtn {
	position:absolute;
	right:0px;
	z-index:9999;/*ボタンを最前面に*/
	cursor:pointer;
    width:60px;
    height:60px;
}

/* #responsive_menu に fixed クラスが付いたときのスタイル */
#responsive_menu.fixed .openbtn span {
    background-color:black
}

div.menutext {
    position:absolute;
    top:43px;
    z-index:9999;
    color:#000;
    font-size:1.2rem;
    text-align:center;
}

div.menutext.hidden {
    display:none;
}

/*×に変化*/	
.openbtn span{
    display:inline-block;
    transition:all .4s;
    position:absolute;
    left:0px;
    height:3px;
    border-radius:2px;
	background-color:black;
  	width:80%;
}

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

.openbtn span:nth-of-type(2) {
	top:30px;
}

.openbtn span:nth-of-type(3) {
	top:45px;
}

.openbtn.active span:nth-of-type(1) {
    top:15px;
    left:0px;
    transform:translateY(15px) rotate(-45deg);
    width:80%;
    background:black;
}

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

.openbtn.active span:nth-of-type(3){
    top:45px;
    left:0px;
    transform:translateY(-15px) rotate(45deg);
    width:80%;
    background:black;
}

/* ------------------------- 追随メニュー -------------------------- */

/* 背景色の設定 jQueryトグルクラス */
div#responsive_menu.menu_bgcolor {
    background:rgba(255,255,255,0.5);
}

div.site_logo.displayLogo img {
    display:none;
}

/* ふわっと出現させるためのCSS */

/*　上に上がる動き　*/

#responsive_menu.UpMove {
	position:fixed;
	animation:UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-100px);
  }
}

/*　下に下がる動き　*/

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