html,body{
  position:relative;
  overflow-x:hidden;
  /* overflow-x: clip; */
}

:root {
  --primary-color: #87A350;
  --primary-light-color: #B6C896;
  --secondary-color: #1E1E1E;
  --pink-color: #dd848d;
}

.primary-color{
  color: var(--primary-color);
}

.secondary-color{
  color: var(--secondary-color);
}

.jh-container {
  max-width: 1080px;
}

a {
  text-decoration: none;
  transition: color 0.25s
}

a:hover{
  color: var(--primary-light-color);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

section img{
  width: 100%;
}

 /* --- header --- */
 .logo{
  font-size: 40px;
  color: #fff;
  font-weight: 200;
}

.header{
  top: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--primary-light-color);
}

.navbar {
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin: 0 16px;
}

.nav-link{
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  background-color: transparent;
  position: relative;
  transition: background-color 2s;
}

.nav-link:hover{
  color: #fff;
}

.nav-link:after {
  content: '';
  position: absolute;
  width: 86%;
  transform: scaleX(0);
  height: 3px;
  bottom: 6px;
  left: 6%;
  background-color: var(--primary-color);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.nav-link:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

#menuToggle
{
  display: block;
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}

#menuToggle a:hover {
  color: #dfdfdf;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  right: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  right: 0;
  background: #fff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2){
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #fff;
}

#menuToggle input:checked ~ span:nth-last-child(3){
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2){
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 200px;
  margin: -100px 0 0 -50px;
  padding: 10px 16px;
  padding-top: 110px;
  
  background: var(--primary-color);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;

  transform-origin: 0% 0%;
  transform: translate(50%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 20px;
}

#menuToggle input:checked ~ ul {
  transform: translate(-50%, 0);
}

 /* --- banner --- */
.banner{
  max-width: 1200px;
  animation: cycleskycolors 15s ease infinite;
}

.banner img{
  width: 100%;
  margin-top: -9px;
}

@keyframes cycleskycolors {
  0% {
    background: #fff6ec;
  }
  35% {
    background: #bbd0db;
  }
  55%{
    background: #ffd2ba;
  }
  90% {
    background: #beb7cf;
  }
  100% {
    background: #fff6ec;
  }
}

 /* --- intro section --- */
.intro-title{
    font-size: 26px;
    letter-spacing: 0.2em;
    text-align: center;
}

.intro-text-container{
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.intro-text{
  font-size: 20px;
}

@media screen and (max-width: 767px) {
  .intro-title{
    font-size: 24px;
    letter-spacing: 0.1em;
  }
  .intro-text{
    font-size: 16px;
  }
}

#stars-group-1 {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 208px 71px #fff, 228px 97px #fff, 165px 115px #fff, 448px 126px #fff, 398px 66px #fff, 357px 94px #fff, 598px 81px #fff, 634px 20px #fff, 698px 66px #fff, 657px 94px #fff, 803px 81px #fff, 618px 76px #fff, 546px 30px #fff, 856px 66px #fff, 880px 94px #fff, 909px 81px #fff, 835px 18px #fff;
  animation-name: glowing-stars;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-delay: 0s;
}

#stars-group-2 {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 104px 48px #fff, 117px 65px #fff, 153px 10px #fff, 283px 48px #fff, 470px 79px #fff, 362px 18px #fff, 415px 108px #fff, 583px 48px #fff, 616px 118px #fff, 662px 47px #fff, 715px 108px #fff, 508px 18px #fff, 315px 78px #fff, 942px 52px #fff, 514px 89px #fff, 671px 51px #fff, 870px 108px #fff;
  animation-name: glowing-stars;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-delay: 0.2s;
}

#stars-group-3 {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 186px 31px #fff, 152px 42px #fff, 236px 18px #fff, 469px 39px #fff, 543px 62px #fff, 522px 18px #fff, 403px 24px #fff, 669px 136px #fff, 744px 62px #fff, 722px 18px #fff, 603px 24px #fff, 441px 39px #fff, 48px 33px #fff, 802px 134px #fff, 815px 62px #fff, 934px 13px #fff, 976px 24px #fff;
  animation-name: glowing-stars;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-delay: 0.4s;
}


@keyframes glowing-stars {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

 /* --- Describe Section --- */
.describe{
  border-top: 2px solid var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

.describe .describe-subtitle{
  font-size: 22px;
}

.describe .describe-imagedesc{
  background: var(--primary-color);
  color: #fff;
}

.describe .describe-text{
  font-size: 20px;
}

@media screen and (max-width: 767px) {
  .describe .describe-subtitle{
    font-size: 20px;
  }
  .describe .describe-text{
    font-size: 16px;
  }
}

 /* --- Products Section --- */
.products-title{
  font-size: 26px;
  letter-spacing: 0.2em;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .products-title{
    font-size: 24px;
    letter-spacing: 0.1em;
  }
}

 /* --- Map Section --- */

 .map{
  border-bottom: 2px solid var(--primary-color);
 }

 .map-title-container{
  text-align: center;
  border-top: 2px solid var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  padding: 12px;
}

.map-title{
  letter-spacing: 0.2em;
  border-left: 2px solid var(--primary-color);
  border-right: 2px solid var(--primary-color);
  padding: 20px;
}

.map-desc{
  font-size: 20px;
}

.map-color-desc .color-1{
  background-color: #E67675;
  width: 16px;
  height: 16px;
  margin-left: 20px;
  margin-right: 5px;
}

.map-color-desc .color-2{
  background-color: #A0C7E6;
  width: 16px;
  height: 16px;
  margin-left: 20px;
  margin-right: 5px;
}

.map-color-desc .color-3{
  background-color: #F7CB74;
  width: 16px;
  height: 16px;
  margin-left: 20px;
  margin-right: 5px;
}

.map-color-desc .color-4{
  background-color: #E4D8B9;
  width: 16px;
  height: 16px;
  margin-left: 20px;
  margin-right: 5px;
}

.map-color-desc p{
  margin: 0;
}

@media screen and (max-width: 767px) {
  .map-title{
      padding: 18px;
  }
  .map-desc{
    font-size: 16px;
  }
}

.mapwrap {
  width: 100%;
  padding-top: 50%;
  position: relative;
  margin-bottom: 1rem; 
}

#gmap {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0; 
}

.map-intro.single-c {
  padding-bottom: 0; 
}

.p-custommap__link {
  background: #ffad93 !important;
  color: #000 !important;
  margin-top: 1em;
  padding: 0.5em;
  display: block;
  font-size: 0.8em;
  width: 100%;
  text-align: center;
  line-height: 1.8em; 
}

.mapfellow.flex.-c3 .flex-box1 {  width: calc(33.3333% - 1.6666vw); }
.mapfellow__name {  margin-bottom: 1em; }
.mapfellow__name .list-num {  margin-right: 0.25em; }
.mapfellow__list { margin-bottom: 3rem; }
.mapfellow__list li { margin-bottom: 1em; }
.mapfellow__list li:last-child { margin-bottom: 0; }
.mapfellow__list li a {
  width: 100%;
  display: block;
  border-bottom: 1px solid #000;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  justify-content: space-between; 
}

.mapfellow__list li a .list-cat {
  width: 7em;
  overflow: hidden;
  text-align: right;
  display: flex; 
}

.mapfellow__list li a .list-cat > span {
  display: inline-block;
  height: auto;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  font-size: 0.8125rem;
  padding: 0 1em;
  margin-top: auto;
  margin-left: auto;
  line-height: 2rem; 
}
.mapfellow__list li a .list-cat > span.-y { background: #fee777; }
.mapfellow__list li a .list-cat > span.-o { background: #ffc965; }
.mapfellow__list li a .list-cat > span.-g { background: #88d4cc; }
.mapfellow__list li a .list-cat > span.-lg { background: #e1f3b3; }
.mapfellow__list li a .list-cat > span.-p { background: #fe90af; }
.mapfellow__list li a .list-cat > span.-b { background: #95c8ea; }
.mapfellow__list li a .list-cat > span.-r { background: #f76e71; }
.mapfellow__list li a .list-cat > span.-be { background: #e6d8b5; }
.mapfellow__list li a .list-cat > span.-a { background: #fe6940; }
.mapfellow__list li a .list-cat > span.-br { background: #c46342; }
.mapfellow__list li a .list-cat > span.-gr { background: #bccfcd; }
.mapfellow__list li a .list-cat > span.-n { background: #7e9cc3; }
.mapfellow__list li a .list-cat > span.-radio { background: #ccc; }

.mapfellow__list li a .list-place {
  width: calc(100% - 8em);
  line-height: 1.75em;
  padding-bottom: 0.5em; 
}

@media screen and (max-width: 1568px) {
  .mapfellow.flex.-c3 .flex-box1 {  width: calc(50% - 1.6666vw); } 
}

@media screen and (max-width: 899px) {
  .mapfellow {  padding-bottom: 1rem; }

  .mapfellow__name {
    margin-bottom: 0;
    text-align: center;
    padding: 0rem 2rem;
    text-align: left; 
  }

  .mapfellow__list {
    margin-bottom: 2rem;
    padding: 2em 3em 0; 
  }
  .mapfellow__list li:last-child { margin-bottom: 0; }
}

@media screen and (max-width: 560px) {
  .mapfellow.flex.-c3 .flex-box1 { width: 100%; }
  .mapfellow__list {  padding: 1em 2em 0; } 
}

@media screen and (max-width: 899px) {
  .map .single-c {  padding: 0; }
  .map .single-c .-inner-single { max-width: inherit; }
  .map .single-c > .-inner {
    width: 100%;
    max-width: none; 
  }
  .mapwrap {
    padding-top: 100%;
    margin-bottom: 1rem; } 
}

 /* --- Recommand Section --- */

.recommand-desc-container{
  border-bottom: 2px solid #C4C4C4;
}

.recommand-desc-text{
  font-size: 20px;
  margin-top: 14px;
  margin-bottom: 4px;
}

.recommand-link-container{
  position: relative;
}

.recommand .recommand-link{
  color: #fff;
  position: absolute;
  bottom: 0;
  right: 12px;
  padding: 6px 32px;
}

@media screen and (max-width: 767px) {
  .recommand-desc-text{
      font-size: 16px;
      margin-right: 20px;
  }

  .recommand .recommand-link{
    padding: 6px 26px;
  }
}

.recommand .recommand-link1{
  background-color: #F5CCCC;
}

.recommand .recommand-link2{
  background-color: #E67675;
}

.recommand .recommand-link3{
  background: #E4D8B9;
}

.recommand .recommand-link4{
  background: #F5CCCB;
}

.recommand .recommand-link5{
  background: #A0C7E6;
}

.recommand .recommand-link6{
  background: #F7CB74;
}

.recommand .recommand-link7{
  background: #E67675;
}

.recommand .recommand-link8{
  background: #E67675;
}

.recommand .recommand-link9{
  background: #A0C7E6;
}

.recommand .recommand-link10{
  background: #F7CB74;
}

.recommand .recommand-link11{
  background: #A0C7E6;
}

.recommand .recommand-link12{
  background: #F7CB74;
}

 /* --- Footer Section --- */
.footer-bg-color{
  background-color: #e6e1dd;
}

footer a{
  color: var(--secondary-color);
}

footer a:hover{
  color: var(--pink-color);
}

/* ------ share-button  ------- */
.share-button{
  position: fixed;
  bottom: 30vh;
  right: -26px;
  transform: rotate(-90deg);
  background: #dd848d;
  color: #fff;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  height: 30px;
  padding: 6px 10px;
  box-shadow: rgba(0 0 0 / 16%) 0px -1px 3px;
}

.share-icon{
  transform: rotate(90deg);
}

.share-text{
  padding-left: 4px;
}

@media screen and (min-width: 768px) {
  .share-button{
    display: none;
  }
}