@charset "UTF-8";

.header-items {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: clamp(2rem,5.5vw,7.9rem);
  margin: 2.8vw 0% 0; /*4rem 0 0*/
  font-size: clamp(9px, 1.1vw, 16px)/*12px,2vw,16px*/;
}
.header-items a{ color: #fff; }
.header-lt {
  width: 22.5vw;
  max-width: 32.5rem;
  padding: 1.2vw 0 1.0vw 2.0vw;
  padding-top: clamp(0.6rem, 1.2vw, 1.7rem);
  padding-bottom: clamp(0.5rem, 1vw, 1.4rem);
  background: #000;
  clip-path: polygon(0% 0%, 100% 0, 85% 100%, 0% 100%);
}
.gn-logo {
  width: clamp(10rem, 16vw, 23rem);
}
/*ローカルナビを左上に表示*/
.gn-lnav{display: none;}
@media only screen and (max-width: 640px) {
.gnav-facilities .header-lt, .gnav-guide .header-lt{ 
  clip-path: none;
  transform: scale(1.0) translateY(0) skew(-30deg);
  padding-left: 8vw;
  width: 51.5vw;
  margin-left: -4vw;
}
.gnav-facilities .header-lt .gn-logo, .gnav-guide .header-lt .gn-logo,
.gnav-facilities .header-lt .gn-lnav, .gnav-guide .header-lt .gn-lnav{ 
  transform: scale(1.0) skew(30deg);
}
/*切り替え*/
.gn-logo { display: none; opacity: 0; animation: fadeIn 0.5s ease-in 0.4s forwards reverse;}
.gn-logo.on { display: block; opacity: 1; animation: fadeIn 0.3s ease-in 0s forwards;}
.gn-lnav,.header-lt:has(.gn-logo.on)::before,.header-lt:has(.gn-logo.on)::after { display: none !important; opacity:0; animation: fadeIn 0.5s ease-in-out 0.4s forwards reverse;}
.gn-lnav.on,.header-lt:has(.gn-lnav.on)::before,.header-lt:has(.gn-lnav.on)::after{ display: block !important; opacity:1; animation: fadeIn 0.3s ease-in-out 0s forwards;}
@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }

  50% {
    display: block;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
}

.header-lt:has(.gn-lnav.on) {
  margin-left: 15vw;
  width: auto;
  height: 14vw;
  padding: 3vw 7vw 3vw 2vw;
}
.header-lt:has(.hd-lnav)::before {
  content: "";
  background: #4fb401;
  width: 21vw;
  height: 14vw;
  position: absolute;
  left: -20vw;
  top: 0;
  display: block;
}
.header-lt:has(.hd-lnav)::after {
  content: "";
  width: 3.4vw;
  height: 3.4vw;
  position: absolute;
  left: -9vw;
  top: 45%;
  display: block;
  border-top: #fff solid 2px;
  border-left: #fff solid 2px;
  transform: skew(30deg) translateY(-50%) rotate(-135deg);
  transition: transform .5s;
}
.header-lt.open:has(.hd-lnav)::after {
  transform: skew(30deg) rotate(45deg);
  transition: transform .5s;
}
.gn-lnav/*:has(.hd-lnav)*/{ 
  width: 110%;
  min-width: 14rem;
}
.flex.hd-lnav {
  color: #fff;
  position: relative;
  text-align: left;
  padding-left: 4.6vw;
  margin-top: -1vw;
}
.flex.hd-lnav span {
  color: #4fb401;
  font-size: 2.7vw;
  letter-spacing: 0.08em;
}
.flex.hd-lnav p {
  font-size: 3.8vw;
}
.header-lt nav.local{
  position: absolute;
  top: 14.8vw;
  left: 44%;
  transform: translate(-50%, -1rem);
  min-width: 17rem;
  width: calc(100% + 3vw);
  justify-content: center;
  background-color: #000;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transition: all .5s;
  font-weight: 700;
  font-size: clamp(0.8rem, 1vw, 1.4rem);
  letter-spacing: 0.5px;
  flex-direction: column;
  padding: 1.7vw 0.35vw;
}
.header-lt.open nav.local{
  visibility: visible;
  opacity: 1;
}
.header-items ul {
  font-weight: 700;
  padding: 2vw 0;
}
.flex.hd-lnav li {
  padding: 2.6vw 0 2.6vw 9vw;
}
.flex.hd-lnav li:first-child{ display: none; }
.header-items .hd-lnav a {
  color: #fff;
  font-size: 3.4vw;
}
}


.topPage .header-lt {
  padding-left: 4.0vw;
  transform: scale(1.5) translateY(8%);
  transition: all .3s 0s;
}
.topPage .header-lt:has(.active) {
  padding-left: 1.8vw;
  transform: scale(1.0);
  transition: all .3s 0s;
}
.topPage .gn-logo {
  transform: scale(0.85);
  transition: all .3s 0s;
}
.topPage .gn-logo.active {
  transform: scale(1.0);
  transition: all .3s 0s;
}

.header-rt .md-flex{
  position: absolute;
  right: 180px;
  z-index: 99;
  top: 11%;
  height: 11rem;
}
.header-items .gn > li:not(:first-child){
  margin-left: 3.2vw;
}
.header-items ul:not(.sub){
  /* padding-top: 0; */
  /* padding-right: 360px; */
  font-weight: 700;
}
.header-items ul.gn > li {
  filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.3));
  color: #FFF;
}
.header-items .hasSub{
  position: relative;
}
.header-rt {
  background: none;
  padding-left: 4.8vw;
  transition: all .3s;
  transform: skew(-30deg);
}
.header-rt > * {
  transform: skew(30deg);
}

@media only screen and (min-width: 641px) {
  .header-rt {
    height: clamp(2rem,5.5vw,7.9rem);
  }
}
@media only screen and (max-width: 640px) {
  .header-items {
    margin-top: 5vw;
    height: 14vw;
    padding: 3vw 0;
  }
  .header-lt {
    width: 47.5vw;
    transform: scale(1.0) translateY(0);
    padding: 3vw 4vw;
  }
  .topPage .header-lt {padding-left: 7vw;}

  .header-lt:has(.active) {
    padding-left: 4vw;
  }
  .gn-logo {
    transition: all .3s 0s;
    width: 35vw;
    transform: scale(1.0);
  }

  .gn{
    display: none;
  }
  .header-items:has(.openbtn.active) .header-lt {
    opacity: 0;
  }
}
@media only screen and (min-width: 641px) {
  .header-items .gn > li > a::before,
  .header-items .gn li.hasSub::before{
    content: "";
      border: #d3fc32 solid;
      border-width: clamp(1rem, 2.4vw, 3.4rem);
      clip-path: polygon(70% 0%, 75% 0, 35% 100%, 30% 100%);
      position: absolute;
      top: clamp(-3.6rem,-2.5vw,-1rem);
      left: 50%;
      transform: translate(-50%);
      height: clamp(3rem,7vw,10.1rem);
      width: clamp(5rem,10vw,14rem) ;
      z-index: 1;
      opacity: 0;
      transition: all .5s;
    }
    .header-items .gn > li > a:hover::before,
    .header-items .gn li.hasSub:hover::before,
    .gnav-guide .header-items li.gn-guide::before,
    .lnav-index .l-nav li.ln-index a::before,
    .lnav-first .l-nav li.ln-first a::before,
    .lnav-member .l-nav li.ln-member a::before,
    .lnav-visitor1 .l-nav li.ln-visitor1 a::before,
    .lnav-visitor2 .l-nav li.ln-visitor2 a::before,
    .lnav-junior .l-nav li.ln-junior a::before,
    .gnav-facilities .header-items li.gn-facilities::before,
    .lnav-fairway .l-nav li.ln-fairway a::before,
    .lnav-bunker .l-nav li.ln-bunker a::before,
    .lnav-amenities .l-nav li.ln-amenities a::before,
    .lnav-access .header-items li.gn-access a::before,
    .gnav-contact .header-items li.gn-contact a::before
    {
      opacity: 1;
      transition: all .5s;
    }
    .header-items .gn .sub {
    position: absolute;
    top: 4.5vw;
    left: 50%;
    transform: translate(-50%, -1rem);
    width: max-content;
    justify-content: center;
    background-color: #000;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    transition: all .5s;
    font-weight: 700;
    font-size: clamp(0.8rem, 1vw,1.4rem);
    letter-spacing: 0.5px;
    flex-direction: column;
    padding: 1.7vw 0.35vw;
  }
/* .header-items .sub::after {
  left: 50%;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  border-color: rgba(0, 153, 255, 0);
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
  border-right-width: 10px;
  margin-left: -10px;
  border-bottom-color: #3a84a7;
  bottom: 100%;
} */
.header-items .gn li.hasSub:hover > ul,
.header-items .gn li.hasSub ul li:hover > ul,
.header-items .gn li.hasSub:active > ul,
.header-items .gn li.hasSub ul li:active > ul{
  visibility: visible;
  opacity: 1;
  /* transform: translate(-50%, 0); */
}

  
.header-items .sub li{
	transition:all .3s;
  padding: .56vw 1.7vw;
}
.header-items .sub li:hover{
  opacity: 0.5;
	transition:all .3s;
}
.header-items .sub li a{
	display: block;
	text-decoration: none;
	color: #FFF;
}
.header-items .sub h3 {
  font-size: 3.2rem;
  padding-top: 2rem;
}
.header-items .sub .en {
  display: block;
  color: #e7240e;
  padding-bottom: 1rem;
}
.header-rt.active {
  background: #000;
  transition: all .3s;
}
}

.openbtn {
  z-index: 99;
  transition: all 0s;
  background-color: #000;
  clip-path: polygon(28% 0%, 100% 0, 100% 100%, 0% 100%);
  margin-left: 2vw;
  box-sizing: content-box;
  padding: clamp(0.9rem,1.9vw,2.8rem) 3.8vw;
  width: clamp(1rem,3.5vw,5.0rem);
  height: clamp(0.8rem,1.6vw,2.3rem);
}
.openbtn.active{
  background: #d3fc32;
  transition: all 0s .5s;
}
body:has(.openbtn.active){
  overflow: hidden;
}

.openbtn span {
  display: block;
  transition: all .5s;
  position: relative;
  right: 0;
  height: 2px;
  /* width: 100%; */
  background-color: #d3fc32;
  z-index: 100;
  text-align: right;
  margin: 0 0 0 auto;
}

.openbtn span:nth-of-type(1) { top:0; width: 80%; }
.openbtn span:nth-of-type(2) { top: calc(50% - 2px); width: 58%; }
.openbtn span:nth-of-type(3) { top: calc(100% - 4px); }

 /* @media only screen and (max-width: 1300px) { */
.openbtn.active span{
  transform-origin: 31%;
  background-color: #000;
  width: 100%;
}
.openbtn.active span:nth-of-type(1) {
   top: 30%;
   transform: rotate(30deg);
  }
  .openbtn.active span:nth-of-type(2) {
    display: none;
  }
  .openbtn.active span:nth-of-type(3){
   top: 63%;
  transform: rotate(-30deg);
}
  /* .header-lt{
    padding-left: 0;
    padding-bottom: 3px;
    height: auto;
    z-index: 5;
  } */
  /* .openbtn {
    right: 0;
  } */
/* } */

@media only screen and (max-width: 640px) {
  .openbtn{
    width: 8.1vw;
    height: 3.1vw;
    padding: 5.4vw 4vw 5.4vw 9vw;
    clip-path: polygon(39% 0%, 100% 0, 100% 100%, 0% 100%);
  }
  .openbtn span {
    height: 1px;
  }
  .openbtn span:nth-of-type(2) { top: calc(50% - 1px); width: 66%; }
  .openbtn span:nth-of-type(3) { top: calc(100% - 2px); }
  
}


#g-nav {
  position: fixed;
  z-index: 4;
  top: 0;
  right: -100vw;
  width: 100vw;
  height: 100vh;
  background: #d3fc32;
  transition: 0.6s cubic-bezier(0.77, 0, 0.18, 1);
  transition-property: right;
  will-change: right;
  border-radius: 0rem;
  /* opacity: 0; */
  /* transition: right .3s; */
}
#g-nav.panelactive {
  right: 0;
  /* top: 1vh; */
  /* opacity: 1; */
  transition: 0.6s cubic-bezier(0.77, 0, 0.18, 1);
  transition-property: right;
  will-change: right;
  /* transition: right .3s; */
}
#header:has(.panelactive) .gn {
  display: none;
}
#g-nav-list {
  padding: 11.5vw 10vw 3vw 14.4vw;
  align-items: flex-start;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#g-nav-list > ul {
  width: 48%;
}
#g-nav li, #g-nav a, #g-nav .en {
  color: #000;
}
#g-nav ul {
  position: relative;
  /* z-index: 4; 
  padding: 11.2vw 14vw 5rem;
  width: 100%;*/
}
#g-nav li {
  text-decoration: none;
  padding: 2.1rem 0;
  letter-spacing: 1px;
  font-size: 1.2vw;
  position: relative;
  line-height: 1.2;
  list-style: none;
  text-align: left;
}
#g-nav li.hasSub {
  padding-bottom: 1rem;
}
#g-nav .en {
  font-size: 2.8vw;
  /* color: #3a84a7; */
  padding-bottom: 8px;
  display: block;
  font-style: italic;
  letter-spacing: 1px;
}
#g-nav .sub {
  top: 0;
  left: 0;
  opacity: 1;
  visibility: visible;
  color: #000;
  padding: 1.2vw 0 0;
  transform: translate(0);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  background: transparent;
  width: 100%;
}
#g-nav .sub li {
  padding: 1.4vw 0.8vw;
  width: 41%;
  border-bottom: 1px solid #abd122;
  font-size: 1.0vw;
  margin-right: 7%;
  letter-spacing: 0;
}
#g-nav .sub li:after {
  content: "";
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: rotate(45deg) translate(-50%);
}
@media only screen and (min-width: 641px) {
#g-nav-list a {
  background-image: linear-gradient(#000, #000);
  background-size: 0 1px;
  background-position: bottom left;
  background-repeat: no-repeat;
  padding-bottom: 5px;
  transition: background-size 0.3s ease-out -0.2s;
}
#g-nav-list a .en {
  background-image: linear-gradient(#000, #000);
  background-size: 0 1px;
  background-position: bottom left;
  background-repeat: no-repeat;
  padding-bottom: 0px;
  transition: background-size 0.2s ease-out;
  margin-bottom: 8px;
  width: fit-content;
}
#g-nav-list a:hover, #g-nav-list a:hover .en {
  background-size: 100% 1px;
}
  
}

@media only screen and (max-width: 640px) {
  #g-nav-list {
    padding: 27vw 8vw 15vw;
  }
  #g-nav-list > ul {
    width: 100%;
  }
  #g-nav li {
    font-size: 3.5vw;
    padding: 3.9vw 0;
  }
    #g-nav .en {
    font-size: 8.4vw;
  }
  .header-items #g-nav .sub {
    padding: 5.2vw 0 4vw;
  }
  #g-nav .sub li {
    /* padding: 5.5vw 0 5.5vw 2.4vw; */
    width: 100%;
    font-size: 3.7vw;
  }
  #g-nav .sub li a{
    display: block;
    padding: 5.5vw 0 5.5vw 2.4vw;
  }

  #g-nav .sub li:after {
    right: 2%;
  }
  #g-nav li:not(.hasSub):active, #g-nav .hasSub a:active{
    background: rgba(0, 0, 0, 0.1);
  }
}

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

/* #g-nav{
  position:fixed;
  z-index: 4;
  top: 1vh;
  right: -60rem;
  width: 96%;
  max-width: 50rem;
  height: 98vh;
  background: #fff;
  transition: 0.6s cubic-bezier(0.77, 0, 0.18, 1);
  transition-property: right;
  will-change: right;
  border-radius: 1rem;
}
#g-nav.panelactive{
  right: 2%;
  top: 1vh;
}

#g-nav.panelactive #g-nav-list{
  position: fixed;
  z-index: 999; 
  width: 96%;
  height: 98vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#g-nav ul {
  position: relative;
  z-index: 4;
  padding: 5rem 8%;
  width: 100%;
}
#g-nav li{
  list-style: none;
  text-align: left;
}
#g-nav li{
  color: #635851;
  text-decoration: none;
  padding: 1rem 0;
  letter-spacing: 0.1em;
  font-size: 2rem;
  position: relative;
  line-height: 1.2;
}
#g-nav .en{
  font-size: .8rem;
  color: #3a84a7;
  padding-bottom: 4px;
  display: inline-block;
}
#g-nav ul.sub {
  padding: 1.2rem 0 0 1rem;
}
#g-nav .sub li {
  list-style: "●";
  color: #cddc39;
  list-style-position: inside;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0.7rem 0;
}
#g-nav .sub a {
  font-size: 1.6rem;
  padding-left: 1rem;
}
*/

@media only screen and (max-width: 1300px) {
  /* #g-nav{
    width: 96%;
    border-radius: 1rem;
  } */
  /* #g-nav ul{
    padding: 5rem 1rem;
  } */
  /* #g-nav li a{
    padding: 10px;
    padding-left: 95px;
    font-size: 2rem;
    line-height: 1.2;
  } */
  /* #g-nav .en{
    font-size: 1.4rem;
  } */
  
}