@charset "utf-8";
/* CSS Document */

.golf_contents {
  margin-bottom: 50px;
}

.golf_contents h2 {
  font-size:20px;
  font-weight: bold;
  background-color: #FBE41A;
  padding: 10px;
  margin-bottom: 15px;
}

.golf_contents h4 {
  font-size:18px;
  font-weight: bold;
  margin: 20px 0;
  text-align: center;
}

.golf_contents h5{
  font-size: 140%;
  font-weight: bold;
  margin: 30px 0 10px;
}

.golf_contents p {
  line-height: 1.4em;
  font-size: 15px!important;
  margin-bottom: 10px;
}

table{
  border-collapse: collapse;
  width: 100%;
}

.golf_contents th,.golf_contents td{
  font-size: 15px!important;
  padding: 1%;
  border:1px #333 solid;
}

.golf_contents dt{
  font-size: 15px!important;
  font-weight: bold;
  margin-top: 25px
}
.golf_contents dd{
  font-size: 15px!important;
  margin: 5px 0;
}

.golf-logo{
  text-align: center;
}

.golf-photo{
  text-align: center;
  margin: 20px 0;
}

.golf-photo img{
  display: inline-block;
  margin: 10px;
}

/* 詳細を見る */

.contents-wrap{
  position: relative;
}
.grad-btn{
  width: 25%;
  background-color: #FBE41A;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px 30px;
  margin: 0 auto;
}
.grad-btn:hover{
  cursor: pointer;
  opacity: 0.8;
}
.grad-btn .fas{
  margin-right: 5px;
}
.grad-btn::after {
  content: "詳細を見る"
}
.content-area {
  position: relative;
  overflow: hidden;
  height: 250px;
}
.content-area::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none;
}
.grad-trigger:checked ~ .grad-btn::after {
  content: "閉じる" 
}
.grad-trigger:checked + .grad-btn {
  background-color: #333333;
  color: #FBE41A;
}
.grad-trigger:checked ~ .grad-btn .fas {
    transform: rotate(180deg);
}
.grad-trigger:checked ~ .content-area {
  height: auto;
  padding-bottom: 60px;
}
.grad-trigger:checked ~ .content-area::before {
  display: none;
}