@charset "utf-8";


/* --------------------------------------------------- */
/* Course */
/* --------------------------------------------------- */
#course .pgtitle > div {
	background-image: url('../img/course/title_bg.webp');
}

/* --------------------------------------------------- */
/* Info */
/* --------------------------------------------------- */
#info h2 {
	color: #0c4324;
	font-family: "Noto Serif JP", serif;
	font-size: 2.1rem;
	font-weight: 500;
}
#info .outline {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 0.5em;
}
#info .outline dl {
	display: flex;
	width: 32.0%;
}
#info .outline dl dt,
#info .outline dl dd {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.5em 0;
	width: 50%;
	border-bottom: 1px solid #ccc;
	text-align: center;
}
#info .outline dl:nth-child(-n+3) {
	border-top: 1px solid #ccc;
}
#info .outline dl dt {
	background-color: #e6efe9;
}
#info .outline dl dt p {
	color: #0c4324;
	font-size: 1.3rem;
	font-weight: 500;
}
#info .compe {
	display: flex;
	justify-content: space-between;
}
#info .compe dl {
	display: flex;
	width: 49.0%;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#info .compe dl dt,
#info .compe dl dd {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.5em 0;
}
#info .compe dl dt {
	width: 32%;
	text-align: center;
}
#info .compe dl dd {
	width: 68%;
}
#info .compe dl dt p {
	color: #0c4324;
	font-size: 1.3rem;
	font-weight: 500;
}
#info .compe dl dd span:first-child { margin-right: 1.5em; }
#info .compe dl dd span::before {
	display: inline-block;
	margin-right: 0.5em;
	width: 3.0em;
	background-color: #e6efe9;
	border-radius: 3px;
	color: #0c4324;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
	vertical-align: 0.15em;
}
#info .compe dl dd span:first-child::before { content: 'OUT'; }
#info .compe dl dd span:last-child::before { content: 'IN'; }

@media screen and (max-width: 767px) {
	#info h2 { font-size: 1.8rem; }
	#info .outline dl {
		display: flex;
		width: 49.0%;
	}
	#info .outline dl:nth-child(-n+3) { border-top: 0; }
	#info .outline dl:nth-child(-n+2) { border-top: 1px solid #ccc; }
	#info .compe {
		flex-direction: column;
		justify-content: space-between;
		border-top: 1px solid #ccc;
	}
	#info .compe dl {
		width: 100.0%;
		border-top: 0;
		border-bottom: 1px solid #ccc;
	}
	#info .compe dl dt { width: 50%; }
	#info .compe dl dd { width: 50%; }

}
@media screen and (max-width: 640px) {
	#info .outline dl dt p { font-size: 1.2rem; }
	#info .outline dl dd p { font-size: 1.4rem; }
	#info .compe dl dt p { font-size: 1.2rem; }
	#info .compe dl dd p { font-size: 1.4rem; }
	#info .compe dl dd span::before { vertical-align: 0.05em; }

}
@media screen and (max-width: 420px) {
	#info h2 { font-size: 1.6rem; }
	#info .outline dl {
		display: flex;
		width: 100.0%;
	}
	#info .outline dl:nth-child(-n+2) { border-top: 0; }
	#info .outline dl:first-child { border-top: 1px solid #ccc; }
	#info .outline dl dt { width: 33%; }
	#info .outline dl dd { width: 67%; }
	#info .compe dl dt { width: 40%; }
	#info .compe dl dd { width: 60%; }
}


/* --------------------------------------------------- */
/* Hole */
/* --------------------------------------------------- */
#hole { background-color: #e3e9e6; }
#hole .block-lm { max-width: 800px; }
#hole .selecter  dl { 
	display: flex;
	margin-top: 1px;
	gap: 0 1px;
}
#hole .selecter  dl dt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 10%;
	text-align: center;
}
#hole .selecter  dl dd { 
	display: flex;
	gap: 0 1px;
	width: 90%;
}
#hole .selecter  dl dd a { 
	box-sizing: border-box;
	padding: 0.25em;
	width: 11.11%;
	background-color: #fff;
	color: #0c4324;
	font-size: 1.4rem;
	font-weight: 500;
	text-align: center;
}
#hole .selecter  dl dd a:hover { background-color: #b8ccc0; }
#hole .selecter  dl dd a.select { background-color: #0c4324; color: #fff; }
#hole .selecter  dl:first-child dt { background-color: #6d8e7c; }
#hole .selecter  dl:last-child dt { background-color: #8baf9a; }
#hole .selecter  dl dt h4 {
	color: #fff;
	font-size: 1.2rem;
	font-weight: 600;
}
@media screen and (max-width: 767px) {
	#hole .selecter  dl dd a {  font-size: 1.3rem; }
	#hole .selecter  dl dt h4 { font-size: 1.1rem; }
}
@media screen and (max-width: 420px) {
	#hole .selecter  dl dd a {  font-size: 1.2rem; }
	#hole .selecter  dl dt h4 { font-size: 1.0rem; }
}

.holedetail h3 {
	color: #0c4324;
	font-family: "EB Garamond", serif;
	font-size: 4.8rem;
	font-weight: 400;
	line-height: 1.2;
}
.holedetail h3 span { width: 3.0em; }
.holedetail h3::after {
	content: 'PAR'attr(data-par);
	font-size: 66.66%;
}
.holedetail h3 + div {
	display: flex;
	justify-content: space-between;
	margin-top: 1.0em;
}
.holedetail h3 + div > div {
	width: 68%;
}
.holedetail h3 + div > figure { width: 26%; }
.holedetail .tee {
	display: flex;
	justify-content: space-between;
	margin-top: 1.0em;
}
.holedetail .tee dl {
	display: flex;
	justify-content: space-between;
	padding: 0.3em 0;
	width: 31.6%;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-family: "EB Garamond", serif;
}
.holedetail .tee dl:last-child { color: #c11e7f; }

@media screen and (max-width: 767px) {
	.holedetail h3 { font-size: 4.2rem; }
	.holedetail h3 + div { margin-top: 0.75em; }

}
@media screen and (max-width: 640px) {
	.holedetail h3 { font-size: 3.6rem; }
.holedetail h3 + div {
	flex-direction: column;
	align-items: center;
	margin-top: 1.0em;
	gap: 1.0em;
}
	.holedetail h3 + div > div { width: 100%; }
	.holedetail h3 + div > figure { width: 33.33%; }
	.holedetail .tee { flex-direction: column; margin-top: 0.5em; }
	.holedetail .tee dl {
		width: 100%;
		border-top:0;
		border-bottom: 1px solid #ccc;
	}
}
@media screen and (max-width: 420px) {
	.holedetail h3 { font-size: 3.2rem; }
	.holedetail h3 + div { margin-top: 0.5em; }
	.holedetail .tee { margin-top: 0; }
}



/* --------------------------------------------------- */
/* Spec */
/* --------------------------------------------------- */
#spec h3 {
	color: #0c4324;
	font-family: "EB Garamond", serif;
	font-size: 4.2rem;
	font-weight: 400;
}
#spec h3 span { font-size: 66.66%; }
#spec table {
	width: 100%;
	border-top: 1px solid #ccc;
}
#spec table th,
#spec table td {
	padding: 0.5em;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	text-align: center;
	vertical-align: middle;
}
#spec table th:first-child,
#spec table td:first-child {
	border-left: 0;
}
#spec table thead th { background-color: #e6efe9; }
#spec table tfoot th { background-color: #0c4324; color: #fff; }
#spec table thead th:first-child,
#spec table thead th:nth-child(2),
#spec table thead th:last-child { width: 10%; }
#spec table thead th:nth-child(3),
#spec table thead th:nth-child(4),
#spec table thead th:nth-child(5) { width: 23.33%; }
#spec table tbody tr:nth-child(even) td { background-color: #f9f9f9; }

@media screen and (max-width: 767px) {
	#spec h3 { font-size: 3.6rem; }
}
@media screen and (max-width: 640px) {
	#spec table { font-size: 1.4rem; }
	#spec table thead { font-size: 1.2rem; }
}
@media screen and (max-width: 420px) {
	#spec h3 { font-size: 2.8rem; }
	#spec table thead,
	#spec table tfoot th:first-child { font-size: 3.0vw; }
}

/* --------------------------------------------------- */
/* BasicBreakPoint */
/* --------------------------------------------------- */
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 420px) {
}