@charset "utf-8";

/*------------------------------------------------------------
	メインビジュアル
------------------------------------------------------------*/

.page-id-16 .main-vis-inner {
	background-image: url('../img/course/main_01@1x.jpg');
}

.page-id-18 .main-vis-inner {
	background-image: url('../img/course/main_02@1x.jpg');
}

.page-id-20 .main-vis-inner {
	background-image: url('../img/course/main_03@1x.jpg');
}

.page-id-22 .main-vis-inner {
	background-image: url('../img/course/main_04@1x.jpg');
}

.page-id-24 .main-vis-inner {
	background-image: url('../img/course/main_05@1x.jpg');
}

.page-id-27 .main-vis-inner {
	background-image: url('../img/course/main_06@1x.jpg');
}

.page-id-30 .main-vis-inner {
	background-image: url(../img/course/main_07@1x.jpg);
}

.page-id-32 .main-vis-inner {
	background-image: url(../img/course/main_08@1x.jpg);
}

.page-id-34 .main-vis-inner {
	background-image: url(../img/course/main_09@1x.jpg);
}

.page-id-36 .main-vis-inner {
	background-image: url(../img/course/main_10@1x.jpg);
}

.page-id-38 .main-vis-inner {
	background-image: url(../img/course/main_11@1x.jpg);
}

.page-id-40 .main-vis-inner {
	background-image: url(../img/course/main_12@1x.jpg);
}

.page-id-42 .main-vis-inner {
	background-image: url(../img/course/main_13@1x.jpg);
}

.page-id-44 .main-vis-inner {
	background-image: url(../img/course/main_14@1x.jpg);
}

.page-id-46 .main-vis-inner {
	background-image: url(../img/course/main_15@1x.jpg);
}

.page-id-48 .main-vis-inner {
	background-image: url(../img/course/main_16@1x.jpg);
}

.page-id-50 .main-vis-inner {
	background-image: url(../img/course/main_17@1x.jpg);
}

.page-id-52 .main-vis-inner {
	background-image: url(../img/course/main_18@1x.jpg);
}


/*PC・高解像度ディスプレイ*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 813px) {
 
	.page-id-16 .main-vis-inner {
		background-image: url('../img/course/main_01@2x.jpg');
	}
	
	.page-id-18 .main-vis-inner {
		background-image: url('../img/course/main_02@2x.jpg');
	}
	
	.page-id-20 .main-vis-inner {
		background-image: url('../img/course/main_03@2x.jpg');
	}
	
	.page-id-22 .main-vis-inner {
		background-image: url('../img/course/main_04@2x.jpg');
	}
	
	.page-id-24 .main-vis-inner {
		background-image: url('../img/course/main_05@2x.jpg');
	}
	
	.page-id-27 .main-vis-inner {
		background-image: url('../img/course/main_06@2x.jpg');
	}
	
	.page-id-30 .main-vis-inner {
		background-image: url(../img/course/main_07@2x.jpg);
	}
	
	.page-id-32 .main-vis-inner {
		background-image: url(../img/course/main_08@2x.jpg);
	}
	
	.page-id-34 .main-vis-inner {
		background-image: url(../img/course/main_09@2x.jpg);
	}
	
	.page-id-36 .main-vis-inner {
		background-image: url(../img/course/main_10@2x.jpg);
	}
	
	.page-id-38 .main-vis-inner {
		background-image: url(../img/course/main_11@2x.jpg);
	}
	
	.page-id-40 .main-vis-inner {
		background-image: url(../img/course/main_12@2x.jpg);
	}
	
	.page-id-42 .main-vis-inner {
		background-image: url(../img/course/main_13@2x.jpg);
	}
	
	.page-id-44 .main-vis-inner {
		background-image: url(../img/course/main_14@2x.jpg);
	}
	
	.page-id-46 .main-vis-inner {
		background-image: url(../img/course/main_15@2x.jpg);
	}
	
	.page-id-48 .main-vis-inner {
		background-image: url(../img/course/main_16@2x.jpg);
	}
	
	.page-id-50 .main-vis-inner {
		background-image: url(../img/course/main_17@2x.jpg);
	}
	
	.page-id-52 .main-vis-inner {
		background-image: url(../img/course/main_18@2x.jpg);
	}

}


/*------------------------------------------------------------
	ホール 見出し
------------------------------------------------------------*/

#hole-head {
	width: 100%;
	height: auto;
	border-bottom: 1px solid #000;
	padding-bottom: 12px;
	position: relative;
}

#hole-head:after {
	content: '';
	background: #000;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 1px;
	left: 0;
}

#hole-head h3 {
	font-size: 2.6rem;
    font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-style: italic;
	color: #000;
}

#hole-head p {
	font-size: 1.4rem;
    font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	line-height: 1;
	font-style: italic;
	position: absolute;
	top: 8px;
	right: 0;
	color: #50694E;
}

@media only screen and (min-width: 813px) {
	
	#hole-head {
		padding-bottom: 20px;
	}
	
	#hole-head h3 {
		font-size: 4.2rem;
		font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	}
	
	#hole-head p {
		font-size: 2rem;
		top: 20px;
	}
	
}


/*------------------------------------------------------------
	詳細レイアウト
------------------------------------------------------------*/

#hole-detail {
	padding: 15px 0 0;
	border-bottom: 1px solid #000;
	margin-bottom: 20px;
}

#hole-detail div.hole-box,
#hole-detail div.hole-box-left,
#hole-detail div.hole-box-right {
	width: 100%;
	margin-bottom: 30px;
}

#hole-detail h5 {
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 1px;
	color: #000;
	border-bottom: 1px solid #000;
	padding: 0 0 12px;
	margin-bottom: 23px;
	position: relative;
}

#hole-detail h5 svg {
	color: #50694E;
	margin-right: 6px;
}

#hole-detail h5 span {
	font-size: 1rem;
    font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-style: italic;
	letter-spacing: 0;
	color: #50694E;
	position: absolute;
	top: 3px;
	right: 0;
}

#hole-detail h5:before,
#hole-detail h5:after {
	content: '';
	background: #000;
	width: 1px;
	height: 11px;
	position: absolute;
	top: 21px;
}

#hole-detail h5:before {
	left: 0;
}

#hole-detail h5:after {
	right: 0;
}

#hole-detail div.hole-box-left:first-of-type h5,
#hole-detail div.hole-box-right:first-of-type h5 {
	display: none;
}

@media only screen and (min-width: 813px) {
	
	#hole-detail {
		-webkit-flex-direction: column;
		flex-direction: column;
		padding: 50px 0 0;
		margin-bottom: 40px;
		position: relative;
	}
	
	#hole-detail {
		height: auto;
	}
	
	#hole-detail div.hole-box-left {
		width: 55%;
		margin-bottom: 40px;
		
	}
	#hole-detail div.hole-box-right {
		width: 45%;
		position: absolute;
		top: 50px;
		right: 0;
		margin-bottom: 40px;
		padding-left: 70px;
	}
	
	#hole-detail h5 {
		font-size: 1.6rem;
		padding: 0 0 20px;
	}
	
	#hole-detail h5 svg {
		margin-right: 10px;
	}
	
	#hole-detail h5 span {
		font-size: 1.1rem;
		top: 8px;
	}
	
	#hole-detail h5:before,
	#hole-detail h5:after {
		top: 32px;
	}

	#hole-detail div.hole-box-left:first-of-type h5,
	#hole-detail div.hole-box-right:first-of-type h5 {
		display: block;
	}

}

/*------------------------------------------------------------
	ドローン動画 レスポンシブ化
------------------------------------------------------------*/

.embed-container { 
	position: relative;
	padding-bottom: 56.25%;
	height: 0; 
	overflow: hidden;
	max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0; 
	width: 100%;
	height: 100%; 
}

/*------------------------------------------------------------
	コメント
------------------------------------------------------------*/


div.comment-box {
	line-height: 1.8;
	text-align: justify;
	padding-top: 10px;
}


@media only screen and (min-width: 813px) {
	
	div.comment-box {
		line-height: 2;
		padding-top: 15px;
	}

}


/*------------------------------------------------------------
	ヤード表
------------------------------------------------------------*/

table.yardage {
	width: 100%;
		margin-bottom: 20px;
}

table.yardage thead {
	background: #E9EEE1;
	border-top: 1px solid #50694E;
}

table.yardage tbody tr {
	border-bottom: 1px solid #50694E;
}

table.yardage thead tr th {
	font-size: 1rem;
	color: #000;
	font-weight: 500;
}

table.yardage thead tr th,
table.yardage tbody tr td {
	width: calc(100% / 6);
	text-align: center;
	padding: 5px 0;
}

table.yardage thead tr th:not(:last-child),
table.yardage tbody tr td:not(:last-child) {
	border-right: 1px solid #ccc;
}

@media only screen and (min-width: 813px) {
	
	table.yardage {
		margin-bottom: 20px;
	}
	
	table.yardage thead tr th {
		font-size: 1.3rem;
	}
	
	table.yardage thead tr th,
	table.yardage tbody tr td {
		padding: 10px 0;
	}
	
	table.yardage tbody tr td {
		font-size: 1.4rem;
	}

}


/*------------------------------------------------------------
	コース画像・グリーン画像
------------------------------------------------------------*/

.course-img {
	width: 90%;
	height: auto;
	margin: 0 auto;
}

.green-img img {
	width: 70%;
	height: auto;
	margin: 0 auto;
}
@media only screen and (min-width: 813px) {
	
	.course-img {
		width: 100%;
	}
	
	.green-img img {
		width: 100%;
		max-width: 320px;
	}

}


/*------------------------------------------------------------
	PHOTO GALLERY
------------------------------------------------------------*/

.carusel-hole .slick-slide img {
	max-width: 96%;
	margin: 0 2%;
}


/*------------------------------------------------------------
	PAGER（18ホール）
------------------------------------------------------------*/

.course-navi {
	display: none;
	font-size: 0;
}


@media only screen and (min-width: 1040px) {
	
	.course-navi {
		display: inline-block;
		width: 100%;
		font-size: 0;
		text-align: center;
		margin-bottom: 40px;
	}
	
	.course-navi li {
		display: inline-block;
		width: calc(100% / 18);
		border: 1px solid #ddd;
	}
	
	.course-navi li:not(:last-child) {
		border-right:none;
	}
	
	.course-navi li a {
		display: block;
		font-size: 1.3rem;
		text-decoration: none;
		padding: 10px 0;
	}
	
	.course-navi li a:hover {
		background: #ddd;
	}

}

/*------------------------------------------------------------
	PAGER（NEXT / PREVIOUS）
------------------------------------------------------------*/

.course-pager a {
	display: inline-block;
	width: 45%;
	font-size: 1.1rem;
	text-align: center;
	text-decoration: none;
	border: 1px solid #000;
	padding: 5px 0;
	position: relative;
}

.course-pager a.previous {
	margin-right: 10%;
	float: left;
}

.course-pager a.next {
	float: right;
}

.course-pager a.previous:before,
.course-pager a.next:before {
	font-family: 'Font Awesome 5 Pro';
	position: absolute;
	top: 6px;
}

.course-pager a.previous:before {
	content: '\f104';
	left: 11px;
}

.course-pager a.next:before {
	content: '\f105';
	right: 11px;
}


@media only screen and (min-width: 1040px) {
	
	.course-pager a {
		font-size: 1.3rem;
		padding: 10px 0;
	}
	
	.course-pager a:hover {
		background: #ddd;
	}
	
	.course-pager a.previous:before,
	.course-pager a.next:before {
		top: 11px;
	}

}