@charset "utf-8";

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

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

@media (min-height: 800px) {
#g-nav{
    height: 70vh !important;
}
}

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

/*ナビゲーションの縦スクロール*/
#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:40%;
    left:50%;
    transform: translate(-50%,-50%);
	width:80% !important;
}*/

#g-nav ul {
    /* position: absolute; */
    /* z-index: 999; */
    /* top: 40%; */
    /* left: 50%; */
    /* transform: translate(-50%,-50%); */
    /* width: 80% !important; */
    /* display: flex;
    /* flex-wrap: wrap; */
    width: 100%;
}

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

#g-nav li{
  list-style: none;
    text-align: center; 
	background-color: transparent !important;
	border-left:none;
	border-right:none;
	border-top:#025094 solid 1px;
	border-bottom:#025094 solid 1px;
	width:100% !important;
	height: auto;
    line-height: 1.6rem;
}

/*#g-nav li:last-child {
	border-bottom:#f38700 solid 1px;
}*/

#g-nav li a{
  color: #333 !important;
  text-decoration: none;
  padding:0px;
  display: block;
  font-size: 1.5em !important;
}
#g-nav li i {
	font-size:1em !important;
}

#g-nav .g-nav2 {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
	color: #333 !important;
}
#g-nav .g-nav2 a {
	color: #333 !important;
	text-decoration: none;
	line-height:1.5em;
	font-size: 1.2em !important;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
    position: fixed;
    z-index: 9999;
    /* bottom: 8px; */
    /* left: auto; */
    /* right: 10px; */
    cursor: pointer;
    width: 60px;
    height: 60px;
    /* display: inline-block; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}
  
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background-color: #fff;
    width: 45%;
  }

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

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

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

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

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

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