@charset "utf-8";
nav.gnav {
  max-width: 295px;
  background: red;
  height: auto;
  background: none;
}

/*
.expand {
  display: none;
}
*/

.gnav ul {
  height: auto;
  display: flex;
  align-items: center;
}

.gnav ul li a {
  font-size: 1.5rem;
  color: #000000;
  letter-spacing: 0.05em;
}

.expand {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 60px;
  right: 55px;
	z-index: 100;
	width: 50px;
	height: 24px;
	cursor: pointer;
	text-align: center;
	z-index: 1;
}



.expand.active,.expand.active.scroll {
  left: inherit;
  z-index: 300;
  position: fixed;
  margin-left: 0;
}


.expand span {
  display: block;
  position: relative;
  width: 100%;
  height: 2px;
  left: 0px;
  background: #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.expand span:nth-child(1) {
  top: 0px;
}

.expand span:nth-child(2) {
  top: 9px;
}

.expand span:nth-child(3) {
  top: 18px;
}

.expand span:nth-child(4) {
  top: 27px;
}

.expand.active span {
  width: 50px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #fff;
}

.expand.active span:nth-child(1) {
  top: 12px;
  left: -1px;
}

.expand.active span:nth-child(2) {
  top: 10px;
  left: -1px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.expand.active span:nth-child(3) {
  top: 8px;
  left: -1px;
}

.expand.active::after {
	color: #fff;
	}

nav.gnav {
  position: fixed;
  z-index: 200;
  top:0;
  right: 0;
  padding: 7% 0 9% 50px;
  color: #fff;
  text-align: center;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
  min-height: auto;
  overflow-y: scroll;
  text-align: right;
}

nav.gnav ul {
  margin: 0;
  padding: 0;
  width: auto;
  display: inline-block;
}

nav.gnav ul li {
  list-style-type: none;
  width: 100%;
  transition: .3s all;
  padding-right: 6.5em;
}

nav.gnav ul li:not(:first-child) {
  padding-top: 3em;
}

nav.gnav ul li a {
  display: block;
  color: #fff;
  padding: 0;
  text-decoration: none;
  text-align: left;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", メイリオ, Meiryo, "游ゴシック Medium", YuGothic, YuGothicM, sans-serif;
  font-size: 1.8rem;
  position: relative;
  z-index: 10;
  display: block;
  width: 70vw;
  max-width: 295px;
  font-weight: 300;
  letter-spacing: 0.05em;
}


nav.gnav ul li a:nth-child(2) {
  padding-top: 2em;
}

nav.gnav ul li a:hover {
  opacity: 0.7;
}

nav.gnav ul li a img {
  height: 35px;
}

nav.gnav.active {
  opacity: 100;
  visibility: visible;
  background: #2a2524;
  background-blend-mode: overlay;
  font-weight: 400;

}

nav.gnav ul {
  text-align: left;
  width: 45vw;
}

@media only screen and (max-width: 1250px) {
	
	.entry_bt a {
		width: 20vw;
	}
	.head_nav ul {
		padding-left: 0;
	}
	
	.head_nav {
		padding-right: 17vw;
	}
	
.guide_nav {width: 90%;}
	}
.guide_nav a {
	align-items: flex-start;
    max-width: 320px;
    width: calc(95% / 3);
    }

@media only screen and (min-width: 768px) {
  nav.gnav {
    padding: 150px 0 60px 50px;
    
  }
  nav.gnav ul {
    width: 100%;
  }
  .expand.scroll:not(.active) span {
    background: #000;
  }
  .expand.scroll:not(.active):after {
    color: #000;
  }
	 .for-sp{
      display:none;
    }
}

@media only screen and (min-width: 500px) {

	 .for-sp{
      display:none;
    }
}



@media only screen and (max-width: 768px) {
  nav.gnav {
    text-align: left;
    padding: 10vw 0 10vw 5vw;
    height: auto;
    top: 60px;
  }
  nav.gnav ul li a.nav_h {
    font-size: 1.8rem;
  }
  nav.gnav ul li a {
    font-size: 1.5rem;
        padding: 0.4em 0 0.4em 0.5em;
  }
  nav.gnav ul li:not(:first-child) {
    padding-top: 1.8em;
  }
  nav.gnav ul li a:nth-child(2) {
    padding-top: 1.5em;
}

nav.gnav ul li:last-child {
	padding-top: 1em;
}
nav.gnav ul li:last-child a:nth-child(2) {
    padding-top: 0.3em;
}
  .expand,.expand.scroll,.expand.top_expand,.expand.expand.top_expand.scroll {
    display: inline-block;
    position: fixed;
    top: 22px;
    left: initial;
    right: 15px;
    z-index: 300;
    width: 37px;
    height: 18px;
    cursor: pointer;
    text-align: center;
  }
  .expand.active,.expand.active.scroll {
    top: 22px;
    right: 15px;
    left: initial;
  }
  .expand::after {
    content: "";
    font-size: 1rem;
    position: relative;
    bottom: -25px;
    display: block;
    letter-spacing: 0.08em;
    color: #000;
    display: none;
  }
  .expand span {
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .expand span:nth-child(1) {
    top: 0px;
  }
  .expand span:nth-child(2) {
    top: 9px;
  }
  .expand span:nth-child(3) {
    top: 18px;
  }
  .expand span:nth-child(4) {
    top: 27px;
  }
  .expand.active span {
    width: 40px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .expand.active::after {
    color: #fff;
  }
  .expand.active span:nth-child(1) {
    top: 9px;
    left: -3px;
  }
  .expand.active span:nth-child(2) {
    top: 9px;
    left: -3px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .expand.active span:nth-child(3) {
    top: 9px;
    left: -3px;
  }
}

@media only screen and (max-width: 500px) {
  nav.gnav ul li a img {
    height: 8vw;
  }

nav.gnav {
    padding: 15vw 10vw 40vw 10vw;
}
	
	/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 101%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
}

/*左側メニューを緑色に*/
#sp-fixed-menu li:first-child{
   background: #000;
}

/*左側メニューをオレンジ色に*/
#sp-fixed-menu li:last-child{
   background: #000;
}

/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:20px;
}
	
	
}