@charset "utf-8";

/*タイトルから表部分*/
.tablepad{
	margin: auto;
	padding: 0 30px 50px 30px;
	width: 80%;
}
/*タイトル*/
.tablepad h1{
	font-size: 30px;
	width: 100%;
	border-width: 0 0 1px 20px;
	padding-left: 10px;
	border-color: #888 #376b84;
	border-style: solid;
	margin: 50px 0 30px 0;
}
/*ヤーデージ表*/
.yardage{
	display: flex;
	width: 100%;
}
/*ヤーデージテーブル,レートテーブル*/
.table{
	width: 100%;
	margin: 50px 0;
}
/*ヤーデージテーブル*/
.halftable{
	width: 50%;
}
/*テーブルの中身*/
.table th, .table td{
	text-align: center;
	vertical-align: middle;
}
/*テーブル横タイトル部分*/
.table thead th{
	background-color: #376b84;
	border: 1px solid #888;
	height: 40px;
	color: #fff;
}
/*テーブル横タイトル二列目部分*/
.table thead td{
	background-color: #ccc;
}
/*テーブル縦タイトル部分*/
.table tbody th{
	background-color: #ccc;
	border: 1px solid #888;
}
/*テーブル中身部分*/
.table td{
	border: 1px solid #888;	
	height: 40px;

}
/*非表示*/
.hide{
	display: none;
}

/*in/out切替ボタン*/
.inout-btn{
	text-align: center;
	}
.coursebtn{
	display: inline-block;
	padding: 0 20px;
	font-size: 36px;
	color: #27923d;
	}
	#outcoursebtn, 
	#incoursebtn{
		text-align: center;
		color: #37984D;
		font-size: 36px;
		padding: 50px 0;
		font-family: 'Noto Serif JP';
		font-weight: 400;
		}
		
	/*リンクしているボタン部分*/
	.coursebtn a{
		color: #fff;
		background-color: #b8e1c1;
		padding: 5px 20px;
		border-radius: 30px;
		font-size: 24px;
		transition: 0.5s;
		font-family: 'Noto Serif JP';
		font-weight: 400;
		}
	.coursebtn a:hover{
		color: #b8e1c1;
		border: 3px solid #b8e1c1;
		background-color: #fff;
		transition: 0.5s;
		}
	.coursebtn a:active{
		background-color: #d1ffdb;
		}
		
		
/*ホール画像・テキスト全体*/
.courseflex{
	display: flex;
	/*折り返す*/
	flex-wrap: wrap;
	/*左右の間隔を均等*/
	justify-content: space-around;
	}
	/*個別ホール画像・テキスト*/
	.coursehole{
		flex-basis: calc(100% / 3);
		padding-bottom: 20px;
		}
		
	/*ホール画像*/
	.holeimg{
		border-top: 3px solid #d1e2dc;
		border-left: 3px solid #d1e2dc;
		border-bottom: 3px solid #d1e2dc;
		position: relative;
		
		/* 19/5/20画像に変更
		background-color: #f2f8f6;
		background-image: radial-gradient(#e1efea 25%, transparent 25%),
			radial-gradient(#e1efea 25%, transparent 25%);
		background-size: 20px 20px;
		background-position: 0 0, 10px 10px;
		*/
		
			/*gif画像リピート*/
			background: url(../../img/course/bg-courseimg.gif) repeat;
			background-position:left top;
		
		height: 400px;
		text-align: center;


		}
		.holeimg img{
			padding-top: 50px;
			opacity:1;
			}
		
		/*hover時*/
		.holeimg:hover{
			background:none;
			}
		.courseflex div .holeimg:hover img{
			opacity:0;
			}
			.courseflex div .holeimg:hover a{
				display:none;
				}
				
			/*IE,Edgeのみモーダル*/
			@media all and (-ms-high-contrast: none){
				.courseflex div .holeimg:hover a{
					display:block;
					}
			} 
			@supports (-ms-ime-align: auto) {
				.courseflex div .holeimg:hover a{
					display:block;
					}
			}
				
			#outcourse div .holeimg iframe,
			#incourse div .holeimg iframe{
				position: absolute;
				top:0;
				left:0;
				opacity:0;
				width:100%;
				height: 394px;
				z-index:-1;
				}
			#outcourse div .holeimg:hover iframe,
			#incourse div .holeimg:hover iframe{
				opacity:1;
				z-index:10;
				}
				/*ちらつかせないため、IE Edgeはzindex -1 */
				@media all and (-ms-high-contrast: none){
					#outcourse div .holeimg:hover iframe,
					#incourse div .holeimg:hover iframe{
						z-index:-1;
						}
				} 	
				@supports (-ms-ime-align: auto) {
					#outcourse div .holeimg:hover iframe,
					#incourse div .holeimg:hover iframe{
						z-index:-1;
						}
				}
				
				
		/*右端のホール*/
		.rightimg{
			border-right: 3px solid #d1e2dc;
		}
		/*ホールテキスト*/
		.holetext{
			padding: 5px 10px;
			font-size: 14px;
			line-height: 1.5em;
		}