*{
	line-break: strict ;	/* 日本語禁則処理 */
	margin: 0 ;
	padding: 0 ;
}

/*======================================
	gnavi
=======================================*/
#gnavi{
  width:100%;
  position: relative;
  top:0;
  z-index: 5;
}

/*----- menu -----*/
nav {
  background-color: #fff;
  position: fixed;
  padding:30px 50px 0;
  top: 0;
  left: 0;
  width: 250px;
  height:auto;
  transition: all 0.8s;/*開閉時スピード*/
  transform: translate(0);/*移動幅*/
}
nav.open {transform: translate(-350px); }
ul.menu{margin-top:90px;}
.menu li{
  font-size:23px;
  line-height:2.2;
  text-align: left;
  color:#000;
  letter-spacing: 2px;
  font-family: 'Open Sans', sans-serif;
}
.menu li a{color:#000;}
.menu li > ul > li{
  margin-left: 20px;
  font-size:12px;
  line-height:1.7;
  color: #484848;
  letter-spacing: 0.5px;
  font-family: 'Roboto', sans-serif;
}
.menu li > ul > li a{color:#484848;}
ul.submenu{margin-top: 70px;}
.submenu li{
  font-size:12px;
  line-height:1.7;
  text-align: left;
  color: #484848;
  letter-spacing: 0.5px;
  font-family: 'Roboto', sans-serif;
}
.submenu li a{color:#000;}


/*----- Language -----*/
ul.lang{
  border-top:1px solid #bfbfbf;
  margin-top:30px;
  padding-top:30px;
  font-size:0;
  text-align: left;
}
ul.lang li{
  background-color:#888;
  margin-right: 8px;
  display: inline-block;
  width:40px;
  height:40px;
  font-size:12px;
  line-height: 2.1;
  color:#fff;
  position: relative;
  top:0;
}
ul.lang li p{position: absolute;top:25%;left:25%;}
ul.lang li:last-child{margin-right:0;}
ul.lang li a{color:#fff;display: block;}
ul.lang li a.active{background-color:#000;width:40px;height:40px;}

/*----- ハンバーガーメニュー -----*/
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all 0.8s;
  box-sizing: border-box;
  cursor :pointer;
}
.menu-trigger {
  background-color:#00936b;
  position:fixed;
  top:0;
  width: 70px;
  height: 70px;
  z-index: 999;
}
.menu-trigger span {
  position: absolute;
  width: 40px;
  height: 2px;
  left:15px;
  right:0;
  margin-top:20px;
  background-color: #fff;
  border-radius: 2px;
}



/*------------------------------
PC
------------------------------*/
@media screen and (min-width: 769px){
  h1.pc{
    margin-top:150px;
    text-align: left;
  }
  h1.sp{display: none;}
  nav {height:100%;}
  .menu-trigger {left:280px;}
  .menu-trigger.active {left:0;height:100%;}
  .menu-trigger .menuttl{opacity: 0;}
  .menu-trigger.active .menuttl{
    opacity: 100;
    position: absolute;
    top:55%;
    left:30%;
    letter-spacing: 2px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color:#fff;
  }
  .menu-trigger span:nth-of-type(1) {transform: translateY(12px) rotate(-45deg);}
  .menu-trigger span:nth-of-type(2) {opacity: 0;}
  .menu-trigger span:nth-of-type(3) {transform: translateY(12px) rotate(45deg);}

  .menu-trigger.active span:nth-of-type(1) {transform: translateY(0)rotate(0deg); top: 48%;}
  .menu-trigger.active span:nth-of-type(2) {opacity:100;top: 49.5%;}
  .menu-trigger.active span:nth-of-type(3) {transform: translateY(0)rotate(0deg);top: 51%;}
}


/*------------------------------
Tablet / Smartphone
------------------------------*/
@media only screen and (max-width : 770px ){
  /*----- menu -----*/
  h1.sp{
    padding-left:5%;
    text-align: left;
    position:fixed;
    top:15px;
    left:0;
    z-index: 10;
    float: left;
  }
  h1.sp img{width:60%;}
  h1.pc{display: none;}
  nav {
    background-color:#00936b;
    padding:13% 10% 0;
    width: 80%;
    height:100%;
    transform: translate(-100%);
  }
  nav.open {transform: translate(0); }
  ul.menu{margin-top:15px;}
  .menu li{
    font-size:23px;
    line-height:2.2;
    text-align: left;
    color:#fff;
    letter-spacing: 2px;
    font-family: 'Open Sans', sans-serif;
  }
  .menu li > ul > li{color: #fff;letter-spacing: 0.5px;}
  ul.submenu{margin-top: 30px;}
  .submenu li{font-size:108%;color: #fff;letter-spacing: 1px;}
  .menu li a,.menu li > ul > li a,.submenu li a{color:#fff;}
  
  /*----- Language -----*/
  ul.lang{
    border-top:0;
    margin:30px 0;
    padding-top:0;
  }
  ul.lang li{
    background-color:#43a37f;
    margin-right: 4%;
    width:48%;
    height:40px;
    font-size:15px;
    line-height: 2.1;
  }
  ul.lang li p{position: absolute;top:20%;left:40%;}
  ul.lang li:last-child{margin-right:0;}
  ul.lang li a{color:#fff;display: block;}
  ul.lang li a.active{background-color:#005b3d;width:100%;height:40px;}
  
  .menu-trigger {float:right;right: 0;}
  .menu-trigger .menuttl{display:none;}
  .menu-trigger span:nth-of-type(1) {top: 0;}
  .menu-trigger span:nth-of-type(2) {top: 12px;}
  .menu-trigger span:nth-of-type(3) {top: 24px;}
  .menu-trigger.active span:nth-of-type(1) {transform: translateY(12px) rotate(-45deg);}
  .menu-trigger.active span:nth-of-type(2) {opacity: 0;}
  .menu-trigger.active span:nth-of-type(3) {transform: translateY(-12px) rotate(45deg);}
  
  
  
}