/* Course
=================================== */

#course #container { background:url(../img/bg_course.jpg) fixed; background-size:cover; }
#course #pagebody { background-color:#fff; color:#333; }

/* hole list
----------------------------------- */

#holeList { margin-bottom:15px; }
#holeList ul { /* for space */ font-size:0; }
#holeList ul li { display:inline-block; width:5.08474576271187%; vertical-align:middle; /* for space */ font-size:1rem; }
#holeList ul li.ctop { width:8.47457627118645%; }
#holeList ul li a { display:block; width:100%; padding:0.5em 0; box-sizing:border-box; border-right:#333 1px solid; background-color:#000; color:#fff; font-family:"Poppins", sans-serif; text-align:center; text-decoration:none; }
.cTop #holeList li.ctop a, #holeList li.ctop a:hover,
.cHole1 #holeList li.h1 a, #holeList li.h1 a:hover,
.cHole2 #holeList li.h2 a, #holeList li.h2 a:hover,
.cHole3 #holeList li.h3 a, #holeList li.h3 a:hover,
.cHole4 #holeList li.h4 a, #holeList li.h4 a:hover,
.cHole5 #holeList li.h5 a, #holeList li.h5 a:hover,
.cHole6 #holeList li.h6 a, #holeList li.h6 a:hover,
.cHole7 #holeList li.h7 a, #holeList li.h7 a:hover,
.cHole8 #holeList li.h8 a, #holeList li.h8 a:hover,
.cHole9 #holeList li.h9 a, #holeList li.h9 a:hover,
.cHole10 #holeList li.h10 a, #holeList li.h10 a:hover,
.cHole11 #holeList li.h11 a, #holeList li.h11 a:hover,
.cHole12 #holeList li.h12 a, #holeList li.h12 a:hover,
.cHole13 #holeList li.h13 a, #holeList li.h13 a:hover,
.cHole14 #holeList li.h14 a, #holeList li.h14 a:hover,
.cHole15 #holeList li.h15 a, #holeList li.h15 a:hover,
.cHole16 #holeList li.h16 a, #holeList li.h16 a:hover,
.cHole17 #holeList li.h17 a, #holeList li.h17 a:hover,
.cHole18 #holeList li.h18 a, #holeList li.h18 a:hover { background-color:#4aab01; border-right:none; }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

#course #pagettl { border-bottom:#ddd 1px solid; }

#holeList { margin-bottom:10px; }
#holeList ul { text-align:center; }
#holeList ul li { width:2em; font-size:0.9rem; }
#holeList ul li.ctop { width:4em; }

}


/* course map
----------------------------------- */

#cs-map-box:after {content:"";clear:both;display:block;}

#cs-map-area { width:580px; float:left; }
#cs-map { position:relative; width:auto; height:0; margin-bottom:15px; padding-top:104.013605442177%; }
#cs-map-inner { position: absolute; left:0; top:0; width:100%; height:100%; background:url(../img/course/course_top_map2024.jpg) center center no-repeat; background-size:cover; }

#cs-txt-area { width:340px; float:right; }
#cs-map-t { position:absolute; z-index:20; top:10px; left:20px; font-family:'Oswald', sans-serif; text-shadow:0px 0px 5px rgba(0,0,0,0.8); }
#cs-map-t h2 { color:#fff; font-size:170%; line-height:140%; font-weight:400; }

#cs-map-point { position:relative; display:block; width:100%; height:100%; list-style:none; }
#cs-map-point li { position:absolute; z-index:10; width:74px; height:74px; }
#cs-map-point li a { display:flex; justify-content:center; align-items:center; width:100%; height:100%; background-color:#fff100; font-family:"Poppins", sans-serif; color:#000; text-align:center; text-decoration:none; }
@media (hover: hover) { #cs-map-point li a:hover { background-color:#000; color:#fff; } }


li#hole1 { top:908px; left:102px; }
li#hole2 { top:998px; left:531px; }
li#hole3 { top:1027px; left:686px; }
li#hole4 { top:1318px; left:747px; }
li#hole5 { top:1170px; left:1155px; }
li#hole6 { top:1060px; left:995px; }
li#hole7 { top:912px; left:786px; }
li#hole8 { top:848px; left:446px; }
li#hole9 { top:868px; left:217px; }
li#hole10 { top:370px; left:422px; }
li#hole11 { top:17px; left:872px; }
li#hole12 { top:77px; left:1162px; }
li#hole13 { top:307px; left:1105px; }
li#hole14 { top:357px; left:966px; }
li#hole15 { top:480px; left:852px; }
li#hole16 { top:888px; left:1017px; }
li#hole17 { top:649px; left:800px; }
li#hole18 { top:507px; left:436px; }

#cs-t1 { font-size:90%; line-height:160%; }

#cs-map-yard { margin-bottom:10px; padding-bottom:10px; border-bottom:#efefef 1px solid; color:#999; font-size:120%; line-height:140%; letter-spacing:0.01em; font-family:'Oswald', sans-serif; }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

#cs-map-area { width:auto; float:none; }

#cs-map-t { display:none; }

#cs-map-point li { font-size:3.0vw; }

#cs-txt-area { width:auto; float:none; }

#cs-map-yard { font-size:110%; }

}


/* hole
----------------------------------- */

#cs-box-l { float:left; width:300px; margin:0 30px 15px 0; }
#cs-dgm { position:relative; width:100%; height:0; }
#cs-dgm p { position:absolute; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:auto 100%; text-indent:-9999px; }

.cHole1 #cs-dgm p { background-image:url(../img/course/hole_p1.png); }
.cHole2 #cs-dgm p { background-image:url(../img/course/hole_p2.png); }
.cHole3 #cs-dgm p { background-image:url(../img/course/hole_p3.png); }
.cHole4 #cs-dgm p { background-image:url(../img/course/hole_p4.png); }
.cHole5 #cs-dgm p { background-image:url(../img/course/hole_p5.png); }
.cHole6 #cs-dgm p { background-image:url(../img/course/hole_p6.png); }
.cHole7 #cs-dgm p { background-image:url(../img/course/hole_p7.png); }
.cHole8 #cs-dgm p { background-image:url(../img/course/hole_p8.png); }
.cHole9 #cs-dgm p { background-image:url(../img/course/hole_p9.png); }
.cHole10 #cs-dgm p { background-image:url(../img/course/hole_p10.png); }
.cHole11 #cs-dgm p { background-image:url(../img/course/hole_p11.png); }
.cHole12 #cs-dgm p { background-image:url(../img/course/hole_p12.png); }
.cHole13 #cs-dgm p { background-image:url(../img/course/hole_p13_2023.png); }
.cHole14 #cs-dgm p { background-image:url(../img/course/hole_p14.png); }
.cHole15 #cs-dgm p { background-image:url(../img/course/hole_p15.png); }
.cHole16 #cs-dgm p { background-image:url(../img/course/hole_p16.png); }
.cHole17 #cs-dgm p { background-image:url(../img/course/hole_p17.png); }
.cHole18 #cs-dgm p { background-image:url(../img/course/hole_p18.png); }

.cHole1 #cs-dgm { padding-top:317.312072892938%; }
.cHole2 #cs-dgm { padding-top:242.908438061041%; }
.cHole3 #cs-dgm { padding-top:270.247933884298%; }
.cHole4 #cs-dgm { padding-top:252.025586353945%; }
.cHole5 #cs-dgm { padding-top:290.595009596929%; }
.cHole6 #cs-dgm { padding-top:247.191011235955%; }
.cHole7 #cs-dgm { padding-top:385.405405405405%; }
.cHole8 #cs-dgm { padding-top:302.18818380744%; }
.cHole9 #cs-dgm { padding-top:237.152777777778%; }
.cHole10 #cs-dgm { padding-top:249.640287769784%; }
.cHole11 #cs-dgm { padding-top:318.161434977578%; }
.cHole12 #cs-dgm { padding-top:233.99209486166%; }
.cHole13 #cs-dgm { padding-top:153.18877551%; }
.cHole14 #cs-dgm { padding-top:296.458333333333%; }
.cHole15 #cs-dgm { padding-top:365.7824933687%; }
.cHole16 #cs-dgm { padding-top:244.247787610619%; }
.cHole17 #cs-dgm { padding-top:360%; }
.cHole18 #cs-dgm { padding-top:283.298969072165%; }

#cs-box-r { float:left; width:610px; }

#cs-ttl { font-family:'Oswald', sans-serif; padding-bottom:0.7em; margin-bottom:1.0em; border-bottom:#999 1px solid; }
#cs-ttl:after {content:"";clear:both;display:block;}
#cs-number { display:inline-block; font-size:140%; font-weight:normal; margin-right:0.5em; padding-bottom:0.2em; }
#cs-number #cs-nm { display:inline-block; font-size:300%; }
#cs-coursename { font-size:180%; display:inline-block; color:#999; }
#cs-coursename .jp { font-size:65%; }
#cs-yard { padding:0.6em 0 0.2em; font-size:130%; letter-spacing:0.01em; }

#cs-t-box { margin-bottom:20px; }
#cs-t-box h2 { margin-bottom:13px; font-size:140%; line-height:140%; color:#1a9800; }
#cs-t-box p { font-size:90%; line-height:160%; }

#cs-latest-data h3 { background-color:#46a201; color:#fff; padding:0.4em 0.6em; font-size:90%; line-height:140%; }
#cs-latest-data table { width:100%; border-left:#ddd 1px solid; }
#cs-latest-data table th, #cs-latest-data table td { vertical-align:top; padding:0.4em 0.4em; border-right:#ddd 1px solid; border-bottom:#ddd 1px solid; font-size:90%; line-height:140%; }
#cs-latest-data table th { text-align:left; white-space:nowrap; }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

#cs-box-l { float:none; width:50%; margin:0 25% 15px 25%; }

#cs-box-r { float:none; width:auto; }

#cs-ttl { font-size:90%; }

#cs-t-box h2 { margin-bottom:10px; font-size:120%; }
#cs-t-box p { font-size:80%; }

#cs-latest-data { font-size:90%; }
#cs-latest-data table th { white-space:normal; }
#cs-latest-data table th br { display:none; }

}