@charset "utf-8";

/*****************************************
　共通設定
*****************************************/

/*styling open close button*/
.menu_button {
  position: fixed;
  right:10px;
  bottom:5%;
  z-index:9999;
  font-size:30px;
}
.menu_button a {
  text-decoration:none;
    display: block;
    height: 90px;
    width:90px;
    background-color: rgba(30,89,99,0.90);
    padding-top: 20px;
    box-sizing: border-box;
    border-radius: 50%;
}
.btn-open:after {
    color:#fff;
    content:"≡";
    font-family:'Lato',"中ゴシックBBB",'Gothic Medium BBB',"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-display: swap;
    transition-property:all .2s linear 0s;
    -moz-transition:all .2s linear 0s;
    -webkit-transition:all .2s linear 0s;
    -o-transition:all .2s linear 0s;
    font-size:50px;
    line-height:1em;
}
.btn-open:hover:after {
  content:"menu";
    font-size:20px;
    line-height:47px;
}
.btn-close:after {
  color:#fff;
  content:"×";
  font-family:'Lato',"中ゴシックBBB",'Gothic Medium BBB',"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-display: swap;
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
    font-size:35px;
    line-height:50px;
}
.btn-close:hover:after {
  content:"close";
    font-size:20px;
    line-height:47px;
}
/*overlay*/
.overlay {
  display:none;
  position:fixed;
  top:0;
  height:100%;
  width:100%;
  background:#333;
  overflow:auto;
  z-index:9997;
}
.wrap {
  color:#e9e9e9;
  text-align:center;
  max-width:90%;
  margin:0 auto;
}
.wrap ul.wrap-nav {
  border-bottom:1px solid #575757;
  text-transform:capitalize;
  padding:150px 0px 100px;
}
.wrap ul.wrap-nav li {
  font-size:20px;
  display:inline-block;
  vertical-align:top;
  width:24%;
  position:relative;
}
.wrap ul.wrap-nav li a {
  color:#34B484;
    font-size:24px;
    letter-spacing: 0.2em;
  font-family:'Lato',"中ゴシックBBB",'Gothic Medium BBB',"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-display: swap;
  display:block;
  padding:8px 0;
  text-decoration:none;
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
}
.wrap ul.wrap-nav li.block_name {
  color:#34B484;
    font-size:24px;
    letter-spacing: 0.2em;
  font-family:'Lato',"中ゴシックBBB",'Gothic Medium BBB',"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro" , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-display: swap;
  padding:8px 0;
  text-decoration:none;
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
  color:#f0f0f0;
}
.wrap ul.wrap-nav ul {
  padding:20px 0;
}
.wrap ul.wrap-nav ul li {
  display:block;
  font-size:13px;
  width:100%;
  color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
  color:#f0f0f0;
    font-size:18px;
}
.wrap ul.wrap-nav ul li a:hover {
  color:#34B484;
}

@media screen and (max-width:48em) {
  .wrap ul.wrap-nav>li {
    width:100%;
    padding:20px 0;
    border-bottom:1px solid #575757;
  }
  .wrap ul.wrap-nav {
    padding:30px 0px 0px;
  }
 /* nav ul {
    opacity:0;
    visibility:hidden;
  }*/
}

@media all and (max-width: 1024px) {
    .menu_button {
        top:85px;
        bottom: auto;
          right:5px;
    }
.menu_button a {
    height: 57px;
    width:57px;
    padding-top: 8px;
}
    .btn-open:after {
    font-size:36px;
    line-height:1em;
    }
        .btn-open:hover:after {
          content:"≡";
    font-size:36px;
    line-height:1em;
        }
    .btn-close:after {
    font-size:36px;
    line-height:1em;
    }
        .btn-close:hover:after {
          content:"×";
    font-size:36px;
    line-height:1em;
        }
}