@charset "UTF-8";

/* ===============================
	style
=============================== */

/*------ main-visual ------*/

#main-visual {
	background: url("/images/course/gp-course/main-visual-202101.jpg") no-repeat;
	background-size: cover;
}

/*------ コーストップ ------*/

article {
	margin-bottom:0;
}

/* コースレイアウト */
#layout {
	background: url("/images/course/gp-course/map.jpg") 0 0 no-repeat;
	position:relative;
	margin-bottom:2em;
}

#layout ul#pin li.hole {
	text-align: center;
	background-color: #094b1f;
}
#layout ul#pin li.hole:hover {
	background-color: #859b8d;
}

#layout ul#pin li.h01 { top:25%; left:28%; }
#layout ul#pin li.h02 { top:31%; left:19.5%; }
#layout ul#pin li.h03 { top:17%; left:14.5%; }
#layout ul#pin li.h04 { top:54%; left:15%; }
#layout ul#pin li.h05 { top:73%; left:39%; }
#layout ul#pin li.h06 { top:68%; left:57%; }
#layout ul#pin li.h07 { top:64%; left:41%; }
#layout ul#pin li.h08 { top:60%; left:36%; }
#layout ul#pin li.h09 { top:30%; left:37.5%; }
#layout ul#pin li.h10 { top:26%; left:52.5%; }
#layout ul#pin li.h11 { top:42%; left:63%; }
#layout ul#pin li.h12 { top:55%; left:76%; }
#layout ul#pin li.h13 { top:71%; left:87%; }
#layout ul#pin li.h14 { top:82.5%; left:69.5%; }
#layout ul#pin li.h15 { top:73%; left:75%; }
#layout ul#pin li.h16 { top:66%; left:71%; }
#layout ul#pin li.h17 { top:50%; left:62%; }
#layout ul#pin li.h18 { top:29.5%; left:46.5%; }


/* ヤーデージ */
table.yardage {
	margin:3em 0 ;
}

table.yardage th {
	width:14%;
}
table.yardage td {
	padding:0.5em 0;
}
table.yardage td:nth-child(n+4) {
	background-color: #bfc8c3 ;
}

/* コースレート */
.courserate ul.colorcod {
	margin-top:2em;
}

table.yardage.cr {
	width:45%;
}
table.yardage.cr th,
table.yardage.cr td {
	width:15%;
}


/*------ ホール詳細 ------*/

/* ホール説明 */
#hole-detail p span.shot {
	display: block;
	font-size:1.6rem;
	font-weight: 700;
}
#hole-detail p span.shot:not(:first-child),
#hole-detail p span.shot.mt08 {
	margin-top:0.8em;
}

#hole-detail table.yardage {
    margin: 2em 0 0;
}
#hole-detail table.yardage th,
#hole-detail table.yardage td {
	width:20%;
}
#hole-detail table.yardage th {
	line-height: 1.4;
}
#hole-detail table.yardage td {
	background-color: #bfc8c3;
}

/* 説明テキストがない場合の処置 */
#hole-detail table.yardage {
	margin: 0;
}

/* ===============================
	PC / Tab Style
=============================== */
@media print , screen and (min-width: 768px) {

	/*------ コーストップ ------*/
	
	/* コースレイアウト */	
	#layout {
		width:1080px;
		height:720px;
	}
	
	/* 概要 */
	p.summary {
		line-height: 2.2;
	}
	
	table.overview2 td:first-child {
		width: 40%;
	}
	
	/*------ ホール詳細 ------*/

	/* ページ下部ナビ */
	#holenavi ul#hole-num {
		justify-content: flex-start
	}
	#holenavi ul#hole-num li {
		width:100px;
		margin-right:12.5px;
	}
	#holenavi ul#hole-num li:nth-child(9),
	#holenavi ul#hole-num li:nth-child(18) {
		margin-right:0;
	}
	#holenavi ul#hole-num li:nth-child(-n+9) {
		margin-bottom:1em;
	}

}

/* ===============================
	Mobile Style
=============================== */
@media screen and (max-width: 767px) {
	
	/*------ main-visual ------*/
	
	#main-visual {
		background: url("/images/course/gp-course/main-visual_sp-202101.jpg") no-repeat;
		background-size: cover;
	}
	
	/*------ コーストップ ------*/
	
	.coursettl {
		width:100%;
	}
	
	/* コースレイアウト */	
	#layout {
		width:100%;	
		height:0;
		padding-top: 67% ; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
		background-size: contain;
		margin:0 auto 1em;
	}
	
	/* 概要 */
	table.overview1 td:first-child,
	table.overview2 td:first-child {
		width: 50%;
	}
	table.overview2 td:last-child {
		text-align: left;
	}
	
	/* コースレート */
	table.yardage.cr {
		width:100%;
	}
	table.yardage.cr th,
	table.yardage.cr td {
		width:33.33%;
	}

}