@charset "UTF-8";

.layer {position:absolute; width:500rem; top:115rem; left:50rem; z-index:100; box-shadow:3rem 3rem 10rem rgba(0,0,0,0.2); background:#fff;}
.layer .close {display:flex; align-items:center; justify-content:flex-end; background:#fff; font-size:14rem; text-align:right; height:36rem; padding-right:50rem;}
.layer .close form > * {display:inline-block; vertical-align:middle;}
.layer .close form input[type="checkbox"] {margin-right:5rem;}
.layer .close a {position:absolute; width:36rem; height:36rem;; right:0; top:0; color:transparent; background:#333;}
.layer .close a:before,
.layer .close a:after {content:''; position:absolute; top:50%; left:50%; width:2px; height:44%; background:#fff; transform:translate(-50%, -50%) rotate(45deg);}
.layer .close a:after {transform:translate(-50%, -50%) rotate(-45deg);}
.layer a.control {display:block; position:absolute; left:0; top:0; width:36rem; height:36rem; z-index:1; background:#333; color:transparent;}
.layer a.control::before {content:''; position:absolute; left:15rem; top:50%; width:8rem; height:8rem; border-top:2px solid #fff; border-left:2px solid #eee; transform:translateY(-50%) rotate(-45deg); }
.layer a.control.next {background:#444; left:36rem; transform:rotate(180deg);}
@media all and (max-width:768px){
  .layer {top:110rem !important; left:50% !important; width:90% !important; transform:translateX(-50%);}
  .layer img {width:100%;}
}

#container {width:var(--container-inner-width); margin:0 auto; background:#f8f4ea; border-radius:var(--border-radius-10rem);}

.reserve {padding:60rem 0;}
.reserve .wrap {display:flex; justify-content:space-between;}
.reserve .wrap > div {min-height:512.34rem; position:relative; padding:var(--padding-40rem); padding-top:30rem; border-radius:var(--border-radius-10rem); box-shadow:0 10rem 20rem rgba(92,69,10,0.1);}
.reserve .wrap > div .tit {margin-bottom:25rem; font-size:23rem; }
.reserve .cal {width:48.124%; margin:0 30rem; }
.reserve .explain {margin-top:30rem;}
.reserve .explain li {margin:7rem 0; position:relative; padding-left:27rem;}
.reserve .explain li:last-child {margin-bottom:0;}
.reserve .explain li:before {content:''; position:absolute; top:10rem; left:10rem; width:4px; height:4px; background:#323232; border-radius:50%;}
.reserve .explain li strong {font-weight:600;}
.reserve .explain li:nth-child(2) strong {color:#8f1616;}
.reserve .location {width: 25.938%; background:#084636; color:#fff;}
.reserve .location ul {border-top:1px solid rgba(255,255,255,0.2); display:flex; flex-direction:column; height:calc(100% - 62rem); }
.reserve .location ul li {flex:1; display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,0.2);}
.reserve .location ul li a {display:flex; align-items:center; color:#fff; padding:0 20rem; position:relative; width:100%;}
.reserve .location ul li a:before {content:''; width:10rem; height:13rem; flex-shrink:0; flex-grow:0; margin-top:-2rem; margin-right:15rem; background:url('/design2024/parkgolf/img/main/icon3.png') no-repeat 0 0/contain;}
.reserve .location ul li a:after {content:''; width:16rem; height:13rem; flex-shrink:0; flex-grow:0; position:absolute; right:20rem;  background:url('/design2024/parkgolf/img/main/icon4.png') no-repeat 0 0/contain; opacity:0;}
.reserve .location ul li a.on,
.reserve .location ul li a:hover {font-weight:700;}
.reserve .location ul li a.on:after,
.reserve .location ul li a:hover:after {opacity:1;}
.reserve .time {width:25.938%; background:#eca73c;}
.reserve .time ul li {margin:var(--margin-y-15rem);}
.reserve .time ul li a {display:block; border-radius:var(--border-radius-6rem); border:1px dashed #bd8325; padding:20rem;}
.reserve .time ul li a p {font-weight:600;}
.reserve .time ul li a p strong {display:inline-block; margin-right:10rem;}
.reserve .time ul li a.on,
.reserve .time ul li a:hover {color:#fff; background:#a46305; border:1px solid #a46305; box-shadow:0 10rem 20rem rgba(92,69,10,0.2)}
.reserve .limit {display:inline-block; margin-top:3rem;}
.reserve .limit span.current {font-weight:700;}
.reserve .selected {display:inline-flex; align-items:center; background:#d89630; border-radius:var(--border-radius-6rem); padding:13rem 20rem; width:100%;}
.reserve .selected div.date {display:block; width:100rem; flex-shrink:0; flex-grow:0;}
.reserve .selected div.fac {display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.reserve .confirm {background:#a46305; position:absolute; bottom:40rem; padding:14rem 10rem; width:calc(100% - 80rem); color:#fff; text-align:center; font-weight:600; border-radius:var(--border-radius-6rem); box-shadow:0 10rem 20rem rgba(92,69,10,0.2);}
@media all and (max-width:1740px){
  .reserve .confirm {width:calc(100% - 60rem);}
}
@media all and (max-width:1440px){
  .reserve .location {margin:0 16rem;}
}
@media all and (max-width:1240px){
  .reserve {padding:0;}
  .reserve .wrap {padding:0; flex-wrap:wrap;}
  .reserve .wrap > div {border-radius:0; box-shadow:none; min-height:auto;}
  .reserve .cal {width:100%; background:#f8f4ea; margin:0;}
  .reserve .location {width:100%; margin:0;}
  .reserve .location ul {min-height:330rem;}
  .reserve .time {width:100%;}
}
@media all and (max-width:768px){
  .reserve .confirm {width:calc(100% - 50rem);}
}
@media all and (max-width:599px){
  .reserve .explain {margin-bottom:20rem;}
  .reserve .location ul {min-height:330rem;}
  .reserve .confirm {width:100%; position:static; display:block; margin-top:40rem;}
}


.notice { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction: column; justify-content:center; align-items:center; z-index:10; border-radius:var(--border-radius-10rem); overflow:hidden; text-align: center; /*display:none;*/} 
.notice::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.7); backdrop-filter:blur(10px); z-index:-1}
.notice span {display: block; font-size:15rem; text-transform: uppercase; font-weight:700; margin-bottom:7rem; color:var(--p_color);}
.notice p {font-weight: 500;}
@media all and (max-width:1240px){
  .notice {border-radius: 0;}
}

.board .wrap {display:flex; justify-content:space-between;}
.board .left {width:29.369%;}
.board .left .tit {font-size:39rem; line-height:1.45; font-weight:600; letter-spacing:-1rem;}
.board .left .tit b {font-weight:700;}
.board .left .tit span {color:#5a3b0c;}
.board .left .more {display:inline-block; position:relative; margin-top:30rem; padding:0 30rem; background:#332e34; border-radius:40rem; line-height:50rem; color:#fff; font-weight:700;}
.board .left .more:after {content:'';position:absolute; top:0; right:-40rem; width:50rem; height:50rem; background:#332e34 url('/design2024/parkgolf/img/main/icon2.png') no-repeat 0 0/200% auto; border-radius:50%;}
.board .right {width:calc(70.631% - 80rem);}
.board .right .list li {border-bottom:1px solid #e0d6bf; padding:30rem 20rem;}
.board .right .list li:first-child {padding-top:5rem;}
.board .right .list li a {display:block; position:relative; padding-right:100rem;}
.board .right .list li a:before {content:''; position:absolute; top:50%; right:0; width:35rem; height:7rem; background:url('/design2024/parkgolf/img/main/icon1.png') no-repeat 0 0/contain; }
.board .right .top {display:flex; align-items:center;}
.board .right .top .tit {font-size:23rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.board .right .small {display:flex; flex-shrink:0; flex-grow:0; align-items:center; margin-left:30rem;}
.board .right .small span {display:flex; align-items:center;}
.board .right .small span:after {content:''; flex-shrink:0; flex-grow:0; width:1px; height:10px; margin:0 15rem; background:#e0d6bf;}
.board .right .small span:last-child:after {display:none;}
.board .right .small span.type {color:#11316f; font-weight:600;}
.board .right .small span.date {color:#4e4e4e; font-weight:600;}
.board .right .txt {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; max-height:3.4em; overflow:hidden; margin:20rem 2rem 0; color:#4e4e4e; line-height:1.7em; word-wrap:break-word; text-overflow:ellipsis;}
@media all and (max-width:1440px){
  .board .left .tit {font-size:35rem; line-height:1.5;}
  .board .right {width:calc(70.631% - 60rem);}
}
@media all and (max-width:1240px){
  .board {margin-top:40rem; position:relative;}
  .board .wrap {flex-wrap:wrap;}
  .board .left {width:100%; text-align:center;} 
  .board .left .more {margin-left:-40rem; margin-bottom:40rem;}
  .board .right {width:100%;}
}
@media all and (max-width:768px){
  .board .right .list li a {padding-right:0;}
  .board .right .list li a:before {display:none;}
  .board .right .top {flex-wrap:wrap;}
  .board .right .top .tit {order:1;}
  .board .right .small {width:100%; order:0; margin-left:0; margin-bottom:7rem; margin-left:1rem;}
}
@media all and (max-width:599px){
  .board .left .tit {font-size:31rem;}
  .board .left .more {margin-top:20rem; margin-left:-33rem; line-height:44rem; font-size:16rem;}
  .board .left .more:after {right:-33rem; width:44rem; height:44rem;}
  .board .right .top .tit {white-space:wrap; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; max-height:3.4em; line-height:1.7em; word-wrap:break-word;}
  .board .right .list li {padding:30rem 5rem;}
}

.facility {margin-top:25rem;}
.facility .slick-dots {position:absolute; top:25rem; right:3rem;}
.facility .slick-list {margin:var(--margin-x--15rem); padding-top:60rem;}
.facility .slick-list li {padding:var(--margin-x-15rem); position:relative;}
.facility .num {display:flex; align-items:center; justify-content:center; position:absolute; top:-25rem; left:40rem; width:50rem; height:50rem; background:#f8f4ea; color:#a44116; font-weight:700; font-style:italic; border-radius:50%;}
.facility .img img {width:100%; height:269rem; background:#ddd; object-fit:cover; border-radius:var(--border-radius-10rem);}
.facility .detail {display:flex;justify-content:space-between;align-items:flex-start;margin-top:20rem;padding:0 5rem;}
.facility .detail .left {display:flex;}
.facility .detail .left .tit {width:230rem; font-size:23rem; font-weight:700;}
.facility .detail .left .list {width:calc(100% - 230rem); padding-right:60rem;}
.facility .detail .left .list p {margin:5rem 0;}
.facility .detail .right {display:flex; align-items:center; margin:5rem 0; flex-grow:0; flex-shrink:0; font-weight:600;}
.facility .detail .right:after {content:''; width:0; height:0; margin-left:10rem; margin-top:-2rem; border-style:solid; border-width:4rem 0 4rem 7rem; border-color: transparent transparent transparent #5a5957;}
@media all and (max-width:1240px){
  .facility .num {left:0;}
  .facility .detail .left {flex-wrap:wrap;}
  .facility .detail .left .tit {width:100%;}
  .facility .detail .left .list {width:100%; padding-right:0; margin:10rem 0 0 3rem;}
}
@media all and (max-width:599px){
  .facility .detail {flex-wrap:wrap;}
  .facility .detail .left {width:100%;}
  .facility .detail .right {width:100%; margin:20rem 3rem 0;}
}