@charset "UTF-8";

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

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

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

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

article {
	margin-bottom:0;
}

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

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

#layout ul#pin li.name.tsutsu,
#layout ul#pin li.hole.tsutsu {
	text-align: center;
	background-color: #7a331e;
}
#layout ul#pin li.hole.tsutsu:hover {
	background-color: #9d8077;
}

#layout ul#pin li.name.kobu,
#layout ul#pin li.hole.kobu {
	text-align: center;
	background-color: #13436a;
}
#layout ul#pin li.hole.kobu:hover {
	background-color: #677d8e;
}

#layout ul#pin li.name.kusu { top:25%; left:33%; }
#layout ul#pin li.h01.kusu { top:20%; left:56%; }
#layout ul#pin li.h02.kusu { top:31%; left:41%; }
#layout ul#pin li.h03.kusu { top:53%; left:24%; }
#layout ul#pin li.h04.kusu { top:70%; left:30%; }
#layout ul#pin li.h05.kusu { top:64%; left:22%; }
#layout ul#pin li.h06.kusu { top:44%; left:24%; }
#layout ul#pin li.h07.kusu { top:50%; left:31%; }
#layout ul#pin li.h08.kusu { top:41%; left:36%; }
#layout ul#pin li.h09.kusu { top:14%; left:55%; }

#layout ul#pin li.name.tsutsu { top:50%; left:46%; }
#layout ul#pin li.h01.tsutsu { top:39%; left:62%; }
#layout ul#pin li.h02.tsutsu { top:56%; left:49%; }
#layout ul#pin li.h03.tsutsu { top:40%; left:56%; }
#layout ul#pin li.h04.tsutsu { top:31%; left:56%; }
#layout ul#pin li.h05.tsutsu { top:44%; left:48%; }
#layout ul#pin li.h06.tsutsu { top:58%; left:42%; }
#layout ul#pin li.h07.tsutsu { top:60%; left:39%; }
#layout ul#pin li.h08.tsutsu { top:40%; left:45%; }
#layout ul#pin li.h09.tsutsu { top:24%; left:59%; }

#layout ul#pin li.name.kobu { top:67%; left:70%; }
#layout ul#pin li.h01.kobu { top:47%; left:64%; }
#layout ul#pin li.h02.kobu { top:67%; left:48%; }
#layout ul#pin li.h03.kobu { top:74%; left:49%; }
#layout ul#pin li.h04.kobu { top:61%; left:61%; }
#layout ul#pin li.h05.kobu { top:67%; left:63%; }
#layout ul#pin li.h06.kobu { top:61%; left:68%; }
#layout ul#pin li.h07.kobu { top:38%; left:70%; }
#layout ul#pin li.h08.kobu { top:36%; left:74%; }
#layout ul#pin li.h09.kobu { top:27%; left:77%; }


/* 概要 */
.summary .rotation img {
	width:100%;
}

/* ヤーデージ */
ul.colorcod {
	margin-top:3em;
}
ul.colorcod li {
	padding:0 0.5em;
}
ul.colorcod li.bent {
	background-color: #a1c4ad ;
	margin-right: 0.5em;
}
ul.colorcod li.korai {
	background-color: #e1cfa5 ;
}

table.yardage td.bent {
	background-color: #a1c4ad ;
	border-bottom:none;
	line-height: 2;
}
table.yardage td.korai {
	background-color: #e1cfa5 ;
	line-height: 2;
}

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

table.yardage.cr {
	width:75%;
}
table.yardage.cr th,
table.yardage.cr td {
	width:15%;
}
table.yardage.cr td.darkgr {
	background-color: #1a3222 ;
	color:#FFFFFF;	
}


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

/* ページ下部ナビ */
#holenavi ul#course-nav {
	justify-content: space-between;
	margin-bottom:1em;
}
#holenavi ul#course-nav li a {
	display: block;
	text-align: center;
	padding: 0.4em 0;
	color:#FFFFFF;
	transition: .3s;
}

#holenavi ul#course-nav li:nth-child(1) a,
#holenavi ul#hole-num.kobu li a {
	background-color: #13436a;
}
#holenavi ul#course-nav li:nth-child(1) a.hovering,
#holenavi ul#course-nav li.kobuvisit a,
#holenavi ul#hole-num.kobu li a.hovering,
#holenavi ul#hole-num.kobu li a.active {
	color:#FFFFFF;
	background-color: #677d8e;
}

#holenavi ul#course-nav li:nth-child(2) a,
#holenavi ul#hole-num.tsutsu li a {
	background-color: #7a331e;
}
#holenavi ul#course-nav li:nth-child(2) a.hovering,
#holenavi ul#course-nav li.tsutsuvisit a,
#holenavi ul#hole-num.tsutsu li a.hovering,
#holenavi ul#hole-num.tsutsu li a.active {
	color:#FFFFFF;
	background-color: #9d8077;
}

#holenavi ul#course-nav li:nth-child(3) a,
#holenavi ul#hole-num.kusu li a {
	background-color: #094b1f;
}
#holenavi ul#course-nav li:nth-child(3) a.hovering,
#holenavi ul#course-nav li.kusuvisit a,
#holenavi ul#hole-num.kusu li a.hovering,
#holenavi ul#hole-num.kusu li a.active {
	color:#FFFFFF;
	background-color: #859b8d;
}

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

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

	/*------ コーストップ ------*/
	
	/* コースレイアウト */	
	#layout {
		width:1080px;
		height:720px;
	}
	
	/* 概要 */
	.summary {
		justify-content: space-between;
		align-items: center;
	}
	.summary p {
		width:770px;
		line-height: 2.2;
	}
	.summary .rotation {
		width:200px;
	}
	
	/*------ ホール詳細 ------*/

	/* ページ下部ナビ */
	#holenavi ul#course-nav li {
		width:326px;
	}

}

/* ===============================
	Mobile Style
=============================== */
@media screen and (max-width: 767px) {
	
	/*------ main-visual ------*/
	
	#main-visual {
		background: url("/images/course/manna-course/main-visual_sp-202101.jpg") no-repeat;
		background-size: cover;
	}
	
	/*------ コーストップ ------*/
	
	/* コースレイアウト */	
	#layout {
		width:100%;	
		height:0;
		padding-top: 67% ; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
		background-size: contain;
		margin:0 auto 2em;
	}
		
	#layout ul#pin li.name.kusu { top:17%; left:22%; }
	#layout ul#pin li.h01.kusu { top:19%; left:52%; }
	#layout ul#pin li.h02.kusu { top:28%; left:41%; }
	#layout ul#pin li.h06.kusu { top:41%; left:24%; }
	#layout ul#pin li.h08.kusu { top:39%; left:36%; }
	#layout ul#pin li.h09.kusu { top:12%; left:55%; }
	
	#layout ul#pin li.name.tsutsu { top:13%; left:66%; }
	#layout ul#pin li.h07.tsutsu { top:60%; left:37%; }
	#layout ul#pin li.h08.tsutsu { top:38%; left:45%; }
	
	#layout ul#pin li.name.kobu { top:76%; left:67%; }
	#layout ul#pin li.h05.kobu { top:69%; left:61%; }
	
	
	/* 概要 */
	.summary .rotation {
		width:100%;
		text-align: center;
		margin-top:2em;
	}
	.summary .rotation img {
		width:50%;
	}
	
	table.overview1 td:first-child {
		width: 40%;
	}
	table.overview2 td:not(:first-child) {
		width: 24%;
	}
	
	/* コースレート */
	table.yardage.cr {
		width:100%;
	}
	table.yardage.cr th,
	table.yardage.cr td {
		width:25%;
	}

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

	/* ページ下部ナビ */
	#holenavi ul#course-nav li {
		width:100%;
	}
	#holenavi ul#course-nav li:not(:last-child) {
		margin-bottom:0.5em;
	}

	
	
}