@charset "utf-8";

#rec_gnav,
#gnavArea,
#gnavArea_biz{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.gnav_inner{
  max-width: 1400px;
  width: 92.1875%;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
}

@media (max-width: 768px) {
  .gnav_inner{
    height: 70px;
  }
}

/* =========================
logo
========================= */
.gnav_logo img{
  height: 50px;
  width: auto;
}
.logo_blk{
  display:none;
}

#gnavArea.is-scroll .logo_wht,
#rec_gnav.is-scroll .logo_wht{
  display:none;
}
#gnavArea.is-scroll .logo_blk,
#rec_gnav.is-scroll .logo_blk{
  display:block;
}

@media (max-width: 768px) {
  .gnav_logo img{
    height: 40px;
  }
}


/* =========================
nav
========================= */
.menu_btn{
  display:none;
}

.gnav_list{
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
}

.gnav_list li{
  position: relative;
  color: #fff;
}
#gnavArea_biz .gnav_list li{
  position: relative;
  color: #000;
}

.gnav_list li > a{
  position: relative;
  display: inline-block;
  color: #000;
  /* font-size: clamp(1.8rem, 2.2vw, 1.8rem); */
  text-decoration: none;
  transition: opacity .3s ease;
}
#rec_gnav .gnav_list li > a,
#gnavArea .gnav_list li > a{
  color: #fff;
}
#gnavArea.is-scroll .gnav_list li > a,
#gnavArea.is-scroll .gnav_list li,
#rec_gnav.is-scroll .gnav_list li > a,
#rec_gnav.is-scroll .gnav_list li{
  color:#000;
}

/* お問い合わせ ボタン */
a.gnav_btn{
  display:flex;
  justify-content:center;
  align-items:center;
  background: #fff;
  border:1px solid #000;
  border-radius:40px;
  color:#000 !important;
  padding:5px 20px;
  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
#rec_gnav a.gnav_btn{
  background: #fff;
  border: none;
}
@media (hover:hover){
  a.gnav_btn:hover{
    background-image: linear-gradient(
    90deg,
    rgba(247,236,213,1),
    rgba(220,235,230,1)
  );
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0,0,0,.12);
  }
}


/* =========================
緑丸 共通
========================= */
.gnav_list li > span{
  position: relative;
}
.gnav_list li > a::before,
.gnav_list li > span::before{
  content: "";
  position: absolute;
  top: -10px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38b000;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .3s ease,
    transform .3s ease;
}
#rec_gnav .gnav_list li > a::before{
  background: #fff;
}
#rec_gnav.is-scroll .gnav_list li > a::before{
  background:#38b000;
}

/* hover時 */
.gnav_list li:hover > a:not(.gnav_btn)::before{
  opacity:1;
  transform:translateY(0);
}

/* 現在ページ */
.page-case .nav_case a::before,
.page-company .nav_company a::before,
.page-recruit .nav_recruit a::before,
.post-type-archive-news .nav_news a::before,
.single-news .nav_news a::before,
.home .nav_top a::before{
  opacity: 1;
  transform: translateX(-50%) scale(1);
}


/* =========================
current page
========================= */
/* トップ */
.home .nav_top a::before{
  opacity: 1;
  transform: scale(1);
}
/* 事業紹介 */
.page-id-129 .has_child > span::before,/* ふるさと納税 */
.page-id-131 .has_child > span::before,/* オフィス */
.page-id-135 .has_child > span::before/* 民泊 */{
  opacity: 1;
  transform: translateY(0);
}
/* 会社 */
.page-id-115 .nav_company a::before{
  opacity: 1;
  transform: scale(1);
}
/* 支援実績 */
.post-type-archive-case .nav_case a::before,
.single-case .nav_case a::before{
  opacity: 1;
  transform: scale(1);
}
/* お知らせ */
.post-type-archive-news .nav_news a::before,
.single-news .nav_news a::before{
  opacity: 1;
  transform: scale(1);
}
/* 採用 */
.page-id-188 .nav_recruit a::before{
  opacity: 1;
  transform: scale(1);
}


/* =========================
dropdown
========================= */
.dropdown{
  position: absolute;
  top: 120%;
  left: 0;
  background: #fff;
  border-radius: 5px;
  min-width: 600px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s ease;
  padding: 20px 70px 40px;
  margin: 0;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}
.has_child{
  position:relative;
}
.has_child.current > span::before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  height:6px;
  border-radius:50%;
  background:#38b000;
}

/* hover時 */
.has_child:hover .dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown li{
  width: 100%;
}
#gnavArea .gnav_list li.has_child a,
#gnavArea_biz .gnav_list li.has_child a,
#rec_gnav .gnav_list li.has_child a{
  position: relative;
  display: block;
  color: #000;
  white-space: nowrap;
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
}
#gnavArea .gnav_list li.has_child a::after,
#gnavArea_biz .gnav_list li.has_child a::after,
#rec_gnav .gnav_list li.has_child a::after{
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-top: 2px solid #222;
  border-right: 2px solid #222;
  transform: rotate(45deg);
}
#gnavArea .gnav_list li.has_child a:hover::after,
#gnavArea_biz .gnav_list li.has_child a:hover:after,
#rec_gnav .gnav_list li.has_child a:hover:after{
  border-top: 2px solid #00ad1b;
  border-right: 2px solid #00ad1b;
}

#gnavArea .gnav_list li.has_child a:hover,
#gnavArea_biz .gnav_list li.has_child a:hover,
#rec_gnav .gnav_list li.has_child a:hover{
  color: #00ad1b;
}

.dropdown li > a::before{
  display:none;
}

/* =========================
スクロール後
========================= */
header,
#gnavArea,
#rec_gnav{
  transition:
    background-color .4s ease,
    box-shadow .4s ease;
}
header.is-scroll,
#gnavArea.is-scroll,
#rec_gnav.is-scroll{
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 10px rgba(0,0,0,.09);
}

/* =========================
バーガーメニュー
========================= */
@media (max-width:1024px){
  .menu_btn{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    width: 50px;
    height: 50px;
    background:#fff;
    border:1px solid #000;
    border-radius:50%;
    cursor:pointer;
    z-index:999;
  }
  .menu_btn span{
    width:30px;
    height:2px;
    background:#000;
    transition:.3s;
  }
  .menu_btn.is-open span{
    background:#000;
  }
  #rec_gnav.is-scroll .menu_btn span{
    background:#000;
  }
  .menu_btn.is-open span:nth-child(1){
  transform:
    translateY(8px)
    rotate(45deg);
  }
  .menu_btn.is-open span:nth-child(2){
    opacity:0;
  }
  .menu_btn.is-open span:nth-child(3){
    transform:
      translateY(-8px)
      rotate(-45deg);
  }
  .gnav{
    position:fixed;
    top:0;
    right:-100%;
    width:90%;
    height:100vh;
    background:#eee;
    transition:.4s;
  }
  .gnav.is-open{
    right:0;
  }

  .gnav_list{
    flex-direction:column;
    align-items:flex-start;
    gap: 25px;
    padding:75px 25px;
  }

  #rec_gnav .gnav_list li > a,
  #gnavArea .gnav_list li > a,
  .has_child > span{
    color:#000;
    width: 100%;
  }
  .gnav_list li{width: 100%;}

  .dropdown{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    min-width: auto;
    display: block;
    background: none;
    box-shadow: none;
    padding: 0;
  }
  #gnavArea .gnav_list li.has_child a, #gnavArea_biz .gnav_list li.has_child a, #rec_gnav .gnav_list li.has_child a{
    font-size: 1.4rem;
    padding: 14px 0;
  }
  #gnavArea .gnav_list li.has_child a::after,
  #gnavArea_biz .gnav_list li.has_child a::after,
  #rec_gnav .gnav_list li.has_child a::after{
    right: 0;
    width: 7px;
    height: 7px;
    border-top: 1px solid #222;
    border-right: 1px solid #222;
  }

  .has_child:hover .dropdown{
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .gnav_list li > a::before{
    top: 45%;
    left: -7%;
  }
  .gnav_list li > span::before{
    top: 45%;
    left: -15%;
  }

  #rec_gnav .gnav_list li > a::before {
    background: #38b000;
  }

}