:root{
  --primary:#37321e;
  --dark:#21252f;
  --body:#1e1e1e;
  --linkdark:#fff;
  --darkgreen:#37321e;
  --box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  --gold:#9f7a36;
}

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  
}


@media (min-width: 835px){
  .smp{
  display: none;
  }

  .category h2 {
    padding-bottom: 10px;
    font-size: 26px;
    background-image: repeating-linear-gradient(90deg, #b4a983 0, #b4a983 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
    background-size: 4px 4px;
    background-repeat: repeat-x;
    background-position: center bottom;
  } 

  .copy{
    margin-top:19px;
    font-size:12px;
  }
  .subhero{
    display: flex;
    flex-direction: row-reverse;
    max-width: 1280px;
    margin: 0 auto 74px;
  }
  .subhero .img{
    height: 100%;   
  }

  .subhero .text{
    margin: 110px 0 39px;
  }

  .quote{
    padding-left: 70px;
  }
  
  .smp{
    display: none !important;
  }


  .wrapper{
    height: 75vh;
    background-position: center top;
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
    z-index: 2;
    color: white;
    
  }
  
  .wrapper{
    background-position: center top;
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
    z-index: 2;
    color: white;
  }
  
  .wrapper::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .profile{
    position:absolute;
    bottom: 10%;
    right: 10%;
    background-color: rgba(0, 0, 0, 0.2);
    display: inline-block;
    padding: 0;
  }

  .profile table{
    color: white;
    padding: 0;
  }

  .title{
    position: absolute;
    display: inline-block;
    width: auto;
  }

}

@media (max-width: 834px){
  .pc{
  display: none;
  }



.category h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	text-align: center;
}

.category h2::before,
.category h2::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: var(--gold);
}

.category h2::before {
	margin-right: 15px;
}
.category h2::after {
	margin-left: 15px;
}

  li{
    font-size: 14px;
  }

  a{
    text-decoration: none;
    color: #000;
  }

  .pc{
    display: none;
  }

  .segment{
    padding-top: 1rem;
  }
  
  .wrapper{
    height: 50vh;
    background-position: center top;
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
    z-index: 2;
    color: white;
  }


  
  .wrapper::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(
    to bottom,
    hsla(0, 0%, 35.29%, 0) 0%,
    hsla(0, 0%, 34.53%, 0.034375) 16.36%,
    hsla(0, 0%, 32.42%, 0.125) 33.34%,
    hsla(0, 0%, 29.18%, 0.253125) 50.1%,
    hsla(0, 0%, 24.96%, 0.4) 65.75%,
    hsla(0, 0%, 19.85%, 0.546875) 79.43%,
    hsla(0, 0%, 13.95%, 0.675) 90.28%,
    hsla(0, 0%, 7.32%, 0.765625) 97.43%,
    hsla(0, 0%, 0%, 0.8) 100%
    
  );
  }

  .title{
    text-align: center;
    position: absolute;
    top: 30%;
    width: 90%;
    
  }

  .title h1{
    text-align: center;
  }

  .profile{
    border: 2px black;
    position: absolute;
    top: 55vh;
    
  }

}

.publicholiday {
  text-align: left;
  border-radius: 50px;
  max-width: 260px;
  padding: 10px 25px;
  color: #313131;
  transition: 0.3s ease-in-out;
  font-weight: 500;
}
.publicholiday :after {
  top: 50%;
  right: 20px;
  border-radius: 1px;
  transition: 0.2s ease-in-out;
  font-weight: 900;
  transform: translateY(-50%);
}


.title{
  padding: 1rem;
  border-top: solid var(--gold) 3px;
  border-bottom: solid var(--gold) 3px;
  background-color: rgba(139, 124, 107, 0.7);
  backdrop-filter: blur(12px);
}






.btn-stitch {
  font-size: 1.2em;
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #dc3545;
  color: #FFF;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 5px #dc3545;
  border: dashed 1px #FFF;
  letter-spacing: 0.1em;
  transition: opacity 0.2s ease-in-out;
}

.btn-stitch:hover {
  border: dotted 1px #FFF;
  opacity: 0.8;
}




@keyframes skewanime {
	100% {
		left:-10%;
	}
}

.app{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  }
  
.main {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  }

.course{
  display:flex;
  align-items:center;
  justify-content: center;
  background-color: white;
}

.coursedata ul {
  background-color: #f0e8de;
  color: black;
  border: solid 1px var(--gold);
  padding: 0 0.5em;
  position: relative;
  }
  
.coursedata ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 0.5em;
  border-bottom: dashed 1px var(--gold);
  list-style-type: none!important;
  }
  
  
.coursedata ul li:last-of-type {
  border-bottom: none;
  }

.figure-caption p{
  margin: 0;
}

.golf h3,.golf h5,.coursedata h5{
  padding: 0.25em 0.5em;
  background: transparent;
  border-left: solid 5px var(--gold);
}


.golf ul{
  counter-reset:list;
  list-style-type:none;
  font-size: 14px;
  line-height: 1.6;
  padding:0;
  }
.golf ul li{
  position:relative;
  padding: 0 0 0 20px;
  margin: 7px 0 7px 0px;
  font-size:14px;
  line-height: 30px;
  border-bottom: dashed 1px #e1c2c2;
  }
.golf ul li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #e1c2c2;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  }






.kingaku{
  border-style: none;
  border: 0;
  background-color: transparent;
}

.kingaku p{
  margin: 0;
}


.hole{
  font-size: 18px;
  font-weight: 500;
  color:var(--darkgreen);
}




.hero{
  background-position: center top;
  background-size: cover;
  position: relative;
  background-repeat: no-repeat;
  z-index: 2;
}

.hero::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0, 0.5);
  z-index: -1;
}

.hero img{
  width: 100%;
  height: 434px;
  object-fit: cover;
}

.price{
  background: var(--stripe);
}

select[name="qty"] {
  width: 100px; 
}