@charset "UTF-8";

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('//fonts.googleapis.com/css?family=Quicksand:300,400,500,700');


nav {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 25px 15px 15px;
}
@media screen and (max-width: 960px) {
nav {
  padding: 15px 15px 10px;
  }
}
.gnavi__pc-style {
  margin: 0 auto;
}
.gnavi__pc-style ul {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}
.gnavi__pc-style ul li:not(:last-of-type) {
  margin-right: 12px;
}
.gnavi__pc-style ul li a{
  font-family: "Noto Sans Japanese", sans-serif;
  line-height:100%;
  color: #FFF;
  text-decoration: none;
  font-size: 1.1em;
  letter-spacing: 0.03em;
}
.gnavi__pc-style ul li a:hover{
  color: #FDD23C;
}
@media screen and (max-width: 960px) {
.gnavi__pc-style ul li a{
  font-size: 0.9em;
  letter-spacing: 0.02em;
  }
}

/*ここから下がハンバーガーメニューのスタイル*/
.gnavi__sp-style {
  display: none;
}
@media screen and (max-width: 767px) {
nav {
  padding: 0;
}
.gnavi__pc-style {
  display: none;    
}
.gnavi__sp-style {
  display: block;
}

/*メニューボタン　展開前*/
.menu-btn {
  display : block;
  position: absolute;
  z-index : 3;
  right : 15px;
  top   : 15px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.menu-btn span {
  display : block;
  position: absolute;
  width   : 32px;
  height  : 3px ;
  left    : 6px;
  background : #FFF;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.menu-btn span:nth-of-type(1) {
  top: 10px;
}
.menu-btn span:nth-of-type(2) {
  top: 20px;
}
.menu-btn span:nth-of-type(3) {
  top: 30px;
}
  
/*メニューボタン　展開後*/
.menu-btn.active {
  position: fixed;
}
.menu-btn.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.menu-btn.active span:nth-child(2),
.menu-btn.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/*スマホ用のメニュー*/
.gnavi__sp-style {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  color: #fff;
  background-color: rgba(127,190,37,1);
  text-align: center;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
  display: flex;
  align-items: flex-start;
  padding: 60px 15px 15px;
  visibility: hidden;
}
.gnavi__sp-style.active {
  opacity: 100;
  visibility: visible;
}
.gnavi__sp-style ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.gnavi__sp-style ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
.gnavi__sp-style ul li:last-of-type {
  padding-bottom: 0;
}
.gnavi__sp-style ul li a {
  display: block;
  font-family: "Noto Sans Japanese", sans-serif;
  line-height:100%;
  color: #FFF;
  text-decoration: none;
  font-size: 1.2em;
  letter-spacing: 0.03em;
  padding: 0.8em 0;
}
.gnavi__sp-style ul li a:hover{
  color: #FDD23C;
}
.gnavi__sp-style.active {
  opacity: 1;
}
}

/*-------------------------
電話リンク＆ボタン
--------------------------*/
.spnavtel {
  font-size:2.4em;
  line-height:100%;
  padding:0;
  font-family: 'Quicksand', sans-serif;
  margin: 3px 0;
}
.spnavtel :before {
  content:"";
  display:inline-block;
  width:0.8em;
  height:0.9em;
  background:url(../img/common/icon_tel3.png) no-repeat;
  background-size:contain;
  vertical-align:middle;
}
.spnavtel a{
  text-decoration:none;
  color:#FFF;
  font-weight:600;
}
@media screen and (max-width: 767px) {
.spnavtel {
  font-size:2em;
  }
}

.spnavonline {
  display: block;
  position: relative;
  background: #FFF;
  width: 100%;
  max-width: 240px;
  padding: 8px 12px;
  color: #7FBE25;
  text-align: center;
  text-decoration: none;
  font-size: 1em;
  font-weight: 700;
  transition: all .3s;
  font-family: "Noto Sans Japanese", sans-serif;
  margin-top: 15px;
}
.spnavonline:before {
  content: "";
  position: absolute;
  top: 42%;
  right: 12px;
  width: 10px;
  height: 2px;
  background: #7FBE25;
  transform: rotate(45deg);
}
.spnavonline:after {
  content: "";
  position: absolute;
  top: 56%;
  right: 12px;
  width: 10px;
  height: 2px;
  background: #7FBE25;
  transform: rotate(-45deg);
}
.spnavonline:hover {
  background: #FDD23C;
}