@charset "utf-8";

#g-nav{
  /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
  position:fixed;
  z-index: -1;
  opacity: 0;/*はじめは透過0*/
  /*ナビの位置と形状*/
  top:0;
  width:100%;
  height: 100vh;/*ナビの高さ*/
  /*動き*/
  transition: all .5s;
}
/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
  opacity: 1;
  z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: relative;
  top:0;
  left: 0;
  width: 100vw;
  z-index: 999;
  height: 100vh;/*表示する高さ*/
}
#g-nav.panelactive #g-nav-list-bg {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  z-index: 998;
  height: 100vh;/*表示する高さ*/
  background-image: linear-gradient(90deg, #675b55cc, #4c423ecc);
  mix-blend-mode: multiply;
}
.en_menu {
  font-family: var(--fontOrp);
  font-size: 120%;
}
.jp_menu {
  font-family: var(--fontSerif);
  font-weight: 200;
  font-size: 90%;
  text-align: right;
}

#g-nav #nav_BG {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top:0;
  left:0;
  width: 860px;
  height: 100vh;
  background-image: linear-gradient(90deg, #675b55, #4c423e);
}
#g-nav #nav_wrap {
  display: flex;
  justify-content:center;
  align-items: flex-end;
  width: 100%;
  background-image: linear-gradient(90deg, #675b55, #4c423e);
}

/*ヴェレーナロゴ*/
#VERENA_LOGO {
  margin-bottom: 40px;
  width: 185px;
}

/*ナビゲーション*/
#g-nav ul {
  display: none;
}



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

#g-nav ul.main-nav {
  width: 320px;
  border-right: 1px solid #fff;
  padding-right: 60px;
  margin-right: 40px;
}

#g-nav ul li {
  text-align: left;
  width: 100%;
  position: relative;
  color: var(--Color2);
  letter-spacing: 0.1em;
  font-weight: 400;
}
#g-nav ul.main-nav li {
  margin-top: .8em;
}

#g-nav ul.sub-nav li {
  border-bottom: 1px solid #fff;
}
#g-nav ul.sub-nav li:first-of-type {
  border-top: 1px solid #fff;
}

#g-nav ul li a {
  font-family: var(--fontEn);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: .3s;
}
#g-nav ul.main-nav li a {
  padding:6px 10px;
  justify-content: space-between; 
}
#g-nav ul.sub-nav li a {
  padding:14px 75px;
  justify-content: center;
}

#g-nav ul.main-nav li a:not([tabindex="-1"]):hover,
#g-nav ul.sub-nav li a:not([tabindex="-1"]):hover {
  color: #F2FDBE;
  background-color: rgba(255,255,255,0.05);
}

/*リンクしない場合*/
#g-nav ul li a[tabindex="-1"] {
  color: #888;
  cursor:default;
}

/*パネルアクティブ対応*/
#g-nav.panelactive ul {
  display: block;
  z-index: 999;
}


/*========= ボタンのためのCSS ===============*/
.openbtn{
  position:fixed;
  z-index: 9999;/*ボタンを最前面に*/
  top:7px;
  right: 20px;
  cursor: pointer;
  width: 75px;
  height:50px;
}
  
/*×に変化*/    
.openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  height: 1px;
  border-radius: 2px;
  background-color: #fff;
  width: 100%;
}
.openbtn span:nth-of-type(1) {
  top:15px;
}
.openbtn span:nth-of-type(2) {
  top:23px;
}
.openbtn span:nth-of-type(3) {
  top:31px;
}
.openbtn.active span:nth-of-type(1) {
  top: 18px;
  transform: translateY(6px) rotate(-15deg);
}
.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn.active span:nth-of-type(3){
  top: 30px;
  transform: translateY(-6px) rotate(15deg);
}

.openbtn div {
  color: white;
  display: inline-block;
  transition: all .4s;
  position: absolute;
  bottom:0;
  width: 100%;
  font-size: 0.5em;
  text-align: center;
}

.openbtn div.txt-close {
  display: none;
}
.openbtn.active { /*メニューを開いたら乗算を強制的にオフ*/
  mix-blend-mode: normal !important;
}
.openbtn.active div.txt-menu {
  display: none;
}
.openbtn.active div.txt-close {
  display: inline-block;
}

div.navipct {
  position: absolute;
  display: flex;
  top:0;
  right: 0;
  width: 40px;
  height: 14px;
  font-size: 10px;
  color: #fff;
  background-image: var(--requBtn);
  letter-spacing: 0;
  justify-content: center;
  align-items: center;
}



/* ----------------------- */
/* 860 */
/* ----------------------- */
@media screen and (max-width: 860px) {

#g-nav #nav_BG {
  width: 100%;
}
#g-nav ul.main-nav {
  padding-right: 20px;
  margin-right: 20px;
}

}


/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
#g-nav {
  background-image: linear-gradient(90deg, #675b55cc, #4c423ecc);
  overflow: auto;
}

#g-nav #nav_wrap {
  display: block;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  height:auto;
}
#g-nav.panelactive #g-nav-list-bg {
  height:auto;
  mix-blend-mode:normal;
}

#g-nav #nav_BG {
  height:auto;
}




#g-nav ul.main-nav {
  padding-right:none;
  border: none;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}
#g-nav ul.sub-nav {
  margin-top: 25px;
}
#g-nav ul.main-nav li {
  margin-top: .5em;
}
#g-nav ul.sub-nav li a {
  padding:10px 75px;
}
/*ヴェレーナロゴ*/
#VERENA_LOGO {
  margin-top: 3vw;
  margin-bottom: 2vw;
  margin-left: 1vw;
  width: 30%;
}

}