:root {
	--text: #666;
	--sub: #FFF8B5;
	--sub-text: #615442;
	--bg: #F6F9EC;
	--golf: #ADBE00;
	--golf-text: #9aa800;
	--tennis: #009CD5;
	--general: #B18B6A;
	--restaurant: #E37145;
	--line: #D8D8D8;
	--jp: "Noto Sans JP", sans-serif;
	--en: "Montserrat", sans-serif;
}
body {
	font-family: var(--jp);
	color: var(--text);
	overflow-x: hidden;
	font-feature-settings: "palt";
}
p, td { line-height: 1.6; }
@media screen and (min-width: 768px) {
	main {
		p,
		ul:not(.arrow_link) li, ol li {
			font-size: clamp(0.875rem, 0.687rem + 0.39vw, 1rem);
		}
	}
}
main {
	width: 100%;
	overflow: hidden;
	li { line-height: 1.5; }
}
img {
	width: 100%;
	height: auto;
}
iframe {
	width: 100%;
	border-radius: 1.875rem;
}
time {
	font-family: var(--en);
}
a:hover {
	opacity: .7;
	transition: .2s;
}
.note {
	color: var(--text);
	font-size: 0.75rem;
	font-weight: 400;
	margin-top: .75em;
}
.triangle {
	text-indent: -0.5em;
	padding-left: .5em;
	&::before {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0px 0.3125rem 0.625rem 0.3125rem;
		vertical-align: top;
		transform: rotate(45deg);
		margin-right: 0.25rem;
	}
}
.triangle_general::before {
	border-color: transparent transparent var(--general) transparent;
}
.triangle_golf::before {
	border-color: transparent transparent var(--golf) transparent;
}
.triangle_tennis::before {
	border-color: transparent transparent var(--tennis) transparent;
}
.triangle_restaurant::before {
	border-color: transparent transparent var(--restaurant) transparent;
}
.arrow_general li::after {
	border-color: transparent transparent transparent var(--general);
}
.arrow_golf li::after {
	border-color: transparent transparent transparent var(--golf);
}
.arrow_tennis li::after {
	border-color: transparent transparent transparent var(--tennis);
}
.arrow_restaurant li::after {
	border-color: transparent transparent transparent var(--restaurant);
}
.pc { display: none; }
@media screen and (min-width: 768px) {
	.sp { display: none; }
	.pc { display: block; }
	.inner {
		width: 100%;
		padding: 0 2em;
		margin: 0 auto;
	}
}
@media screen and (min-width: 1120px) {
	.inner {
		width: 1100px;
		padding: 0;
		margin: 0 auto;
	}
}
section:not(.service) {
	padding: 0 1.25rem;
	margin: 5rem 0;
	@media screen and (min-width: 768px) {
		padding: 0;
        	margin: 7.5rem 0;
	}
}
/* ===============================
ボタン
=============================== */
.btn {
	display: flex;
	align-items: center;
	color: #fff;
	font-family: var(--en);
	font-weight: 700;
	font-size: 0.875rem;
	border-radius: 2rem;
	padding: 0.75em 1.25em;
	width: fit-content;
	margin: 3.125rem 0 0 auto;
	&::after {
		content: url(../img/common/ico_arrow.svg);
		height: auto;
		margin-left: 3em;
		display: inline-block;
	}
	&:hover {
		opacity: 1;
		background-color: var(--text);
	}
	@media screen and (min-width: 768px) {
		font-size: 1.125rem;
		padding: 0.5em 1.25em;
		&::after { padding-top: 0.25em; }
	}
}
.general { background-color: var(--general); }
.golf { background-color: var(--golf); }
.tennis { background-color: var(--tennis); }
.restaurant { background-color: var(--restaurant); }

/* ===============================
ヘッダー
=============================== */
header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
	>div {
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.logo {
			padding-left: 1.25rem;
			display: inline-block;
			position: relative;
			/*width: 7.55rem;*/
			width: 10rem;
			height: auto;
			overflow: hidden;
			img {
				display: block;
				width: 100%;
				height: auto;
			}
			span {
				display: block;
				text-indent: -9999px;
				white-space: nowrap;
				overflow: hidden;
				width: 0;
				height: 0;
			}
		}
		.pwa {
			display: inline-flex;
			align-items: center;
			background-color: #F8D376;
			color: #51412A;
			border-radius: 0 0 0 1.25rem;
			padding: 0.5rem 1rem;
			font-size: 0.875rem;
			font-weight: bold;
			margin-top: -12px;
/*			display: none;*/
			.pwa-icon {
				font-size: 1.25rem;
				margin-right: 0.25rem;
				flex-shrink: 0;
			}
			.pwa-text {
				line-height: 1.2;
				span {
					display: block;
					font-size: 0.75rem;
					font-weight: normal;
				}
			}
		}
	}
	>ul {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background-color: var(--sub);
		color: var(--sub-text);
		height: 3.75rem;
		border-top: 1px solid var(--line);
		li {
			width: calc(100% / 5);
			text-align: center;
			font-size: 0.625rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			a {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-decoration: none;
				color: inherit;
				height: 100%;
				span {
					display: block;
					margin-bottom: 0.5em;
					>img {
						height: 1.5625rem;
						width: auto;
					}
				}
			}
			.btn-trigger {
				width: 1.75rem;
				height: 1.5625rem;
				cursor: pointer;
				margin: 0 auto 0.5em;
				.hamburger {
					height: 1rem;
					position: relative;
					display: block;
					margin-top: 0.35rem;
					span {
						position: absolute;
						left: 0;
						width: 100%;
						height: 2px;
						background-color: var(--sub-text);
						border-radius: 4px;
						margin: 0 auto;
						&:nth-of-type(1) {
							top: 0;
						}
						&:nth-of-type(2) {
							top: 0.45rem;
						}
						&:nth-of-type(3) {
							bottom: 0;
						}
					}
				}
			}
			.btn-trigger,
			.btn-trigger span {
				display: block;
				transition: all .5s;
				box-sizing: border-box;
			}
		}
		li:has(.btn-trigger) {
			cursor: pointer;
		}
	}
	nav {
		display: none;
	}
	@media screen and (min-width: 768px) {
		width: 100%;
		height: 60px;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid var(--line);
		>div {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			padding-left: 1.25rem;
			background-color: #fff;
			>div {
				display: flex;
				align-items: center;
				.pwa {
					border-radius: unset;
					margin-top: 0;
					height: 60px;
				}
			}
		}
		nav {
			display: block;
			padding-right: clamp(0.75rem, -1.034rem + 3.71vw, 1.75rem);
			ul {
				display: flex;
				align-items: center;
				gap: clamp(0.75rem, -1.034rem + 3.71vw, 1.75rem);
				padding: 0;
				margin: 0;
				height: 60px;
				>li {
					font-weight: 500;
					height: 100%;
					position: relative;
					transition: .3s;
					a {
						display: flex;
						align-items: center;
						height: 100%;
						font-size: clamp(0.65rem, 0.527rem + 0.46vw, 0.875rem);
					}
					>.triangle::before { display: none; }
					ul, .sub_container { display: none; }
					&:hover {
						opacity: 1;
						font-weight: 600;
						&:has(a.triangle_general) { color: var(--general); }
						&:has(.triangle_golf) { color: var(--golf); }
						&:has(.triangle_tennis) { color: var(--tennis); }
						&:has(.triangle_restaurant) { color: var(--restaurant); }
						&:has(ul)::after {
							position: absolute;
							top: 57px;
							left: 50%;
							transform: translateX(-50%);
							display: block;
							content: url(../img/common/ico_arrow_header.svg);
							width: 3rem;
							z-index: 200;
						}
					}
				}
			}
			li:hover .sub_container,
			li .sub_container:hover {
				opacity: 1;
				display: block;
				position: fixed;
				top: 60px;
				left: 0;
				width: 100%;
				background-color: var(--bg);
				padding: 2.5rem;
				z-index: 90;
				border-bottom: 1px solid var(--line);
				>div {
					@media screen and (min-width: 1120px) {
						max-width: 1100px;
						padding: 2.5rem 0;
					}
					margin: 0 auto;
					>a {
						font-size: 1.5625rem;
						font-weight: 600;
						margin-bottom: 0.5em;
						color: var(--text);
					}
					>div {
						display: flex;
						gap: 1.5em;
						.first {
							margin-top: 0;
							width: calc(100% / 2 - .75em);
							height: 140px;
							span {
								font-size: 1.875rem;
								font-weight: 700;
								&::after { width: 1.875rem; }
							}
						}
						>ul {
							width: calc(100% / 2 - .75em);
							gap: .5em;
						}
						&:not(:has(.first)) {
							ul {
								width: 100%;
								li { width: calc(100% / 4 - .75em); }
							}
						}
					}
				}
			}
			a.current {
				font-weight: 600;
				&.triangle_general { color: var(--general); }
				&.triangle_golf { color: var(--golf); }
				&.triangle_tennis { color: var(--tennis); }
				&.triangle_restaurant { color: var(--restaurant); }
			}
		}
		>ul {
			position: fixed;
			right: 0;
			top: 33%;
			transform: translate(1px, -50%);
			flex-direction: column;
			gap: .5em;
			background-color: transparent;
			border: unset;
			width: auto;
			>li {
				width: 2.5rem;
				height: fit-content;
				padding: 1em 0.5em;
				background-color: var(--sub);
				border-radius: .75rem 0 0 .75rem;
				border: 1px solid var(--line);
				>a {
					writing-mode: vertical-rl;
					text-orientation: upright;
					height: auto;
					text-align: center;
					flex-direction: row;
					align-items: center;
					font-size: 0.75rem;
					font-weight: 500;
					letter-spacing: 0.1em;
					>span {
						display: inline-block;
						img {
							height: 1.25rem;
							width: auto;
						}
					}
				}
				&:hover { opacity: .75; }
			}
		}
	}
	@media screen and (min-width: 1120px) {
		min-width: 1100px;
		nav {
			li:hover .sub_container,
			li .sub_container:hover {
				padding: 0;
			}
		}
	}
}
header.active {
	height: 100dvh;
	background-color: var(--bg);
	>div:first-child {
		background-color: var(--bg);
		display: block;
	}
	.logo {
		width: 10rem;
		padding: 0.8em 1.25rem;
	}
	.pwa {
		display: none;
	}
	.btn-trigger {
		.hamburger {
			span {
				&:nth-of-type(1) {
					-webkit-transform: translateY(0.45rem) rotate(-30deg);
					transform: translateY(0.45rem) rotate(-30deg);
				}
				&:nth-of-type(2) {
					opacity: 0;
				}
				&:nth-of-type(3) {
					-webkit-transform: translateY(-0.45rem) rotate(30deg);
					transform: translateY(-0.45rem) rotate(30deg);
				}
			}
		}
	}
}
header.active nav {
	display: block;
	transition: all .5s;
	padding: 0 1.25rem 120px;
	width: 100%;
	height: 100dvh;
	overflow-y: scroll;
	position: fixed;
	top: 60px;
	z-index: -1;
	>ul {
		>li {
			padding: 1.5em 0;
			border-bottom: 1px solid var(--line);
			&:last-child {
				border-bottom: none;
			}
			>a {
				color: var(--text);
				font-size: 1.5625rem;
				font-weight: 600;
				display: block;
				width: 100%;
				height: 100%;
			}
			ul {
				margin-top: 1em;
				gap: 0.5em;
			}
		}
	}
}
.first {
	display: block;
	width: 100%;
	height: 6.25rem;
	border-radius: 0.9375rem;
	background-position: center;
	margin-top: 1em;
	position: relative;
	overflow: hidden;
	span {
		height: 100%;
		padding-left: 1em;
		color: #fff;
		font-size: 1.25rem;
		font-weight: 600;
		display: flex;
		align-items: center;
		text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
	}
	&::after {
		position: absolute;
		display: block;
		top: 53%;
		transform: translateY(-50%);
		right: 1em;
		content: url(../img/common/ico_arrow.svg);
		border: none;
		width: auto;
		height: auto;
	}
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		z-index: 0;
		transition: transform 0.6s ease;
		transform: scale(1);
		border-radius: 0.9375rem;
	}
	* {
		position: relative;
		z-index: 1;
	}
	&:hover::before {
		transform: scale(1.15);
	}
}
header nav li {
	&:first-child .first::before {
		background-image: url(../img/common/first_course.jpg);
		background-position: 0px 40%;
		background-size: cover;
	}
	&:nth-child(2) .first::before {
		background-image: url(../img/common/first_driving.jpg);
	}
	&:nth-child(3) .first::before {
		background-image: url(../img/common/first_tennis.jpg);
	}
}
.sub_container ul {
	display: flex;
	flex-wrap: wrap;
}
.arrow_link {
	li {
		width: calc(100% / 2 - 0.25em);
		border: 1px solid #999999;
		border-radius: 2rem;
		position: relative;
		height: fit-content;
		a, button {
			padding: 1em;
			display: inline-block;
			color: var(--text);
			font-size: 0.75rem;
			width: 100%;
			height: 100%;
		}
		&::after {
			position: absolute;
			top: 50%;
			right: 1em;
			transform: translateY(-50%);
			content: "";
			display: inline-block;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 5px 0px 5px 5px;
		}
		@media screen and (min-width: 768px) {
			&:hover {
				transition: .3s all;
				&::after { border-color: transparent transparent transparent #fff; }
				a, button {
					color: #fff;
					opacity: 1;
				}
			}
		}
	}
}
@media screen and (min-width: 768px) {
	.arrow_general li:hover {
		background-color: var(--general);
		transition: .3s all;
	}
	.arrow_golf li:hover {
		background-color: var(--golf);
		transition: .3s all;
	}
	.arrow_tennis li:hover {
		background-color: var(--tennis);
		transition: .3s all;
	}
	.arrow_restaurant li:hover {
		background-color: var(--restaurant);
		transition: .3s all;
	}
}
.no_scroll {
	overflow: hidden;
	height: 100vh;
}

/* ===============================
ニュース記事
=============================== */
.news_card {
	position: relative;
	overflow: hidden;
	border-radius: .75em;
	img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		object-fit: cover;
		object-position: top;
	}
	img+div {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		.subtitle {
			color: #fff;
			font-weight: 600;
			font-size: 2.09302vw;
			padding-left: .65em;
			text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
			margin-bottom: .25em;
		}
		.thumbs_text {
			color: #fff;
			padding: .65em;
			font-weight: 800;
			font-size: clamp(0.625rem, 0.446rem + 0.89vw, 0.875rem);
			max-width: 80%;
			line-height: 1.3;
			border-radius: 0 .75em 0 0;
			>span {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				box-sizing: border-box;
			}
		}
	}
	@media screen and (min-width: 768px) {
		border-radius: 1.25em;
		img+div {
			.subtitle {
				font-size: 1rem;
				margin-bottom: 0.25em;
			}
			.thumbs_text {
				font-size: 1.25rem;
			}
		}
	}
}
.topics {
	.news_card {
		img+div {
			.subtitle {
				font-size: .75rem;
				padding-left: 1em;
			}
		}
	}
}
a:has(.news_card) {
	transition: .3s;
	img { transition: transform .5s ease; }
	@media screen and (min-width: 768px) {
		&:hover {
			img {
				transform: scale(1.15);
				transition: .3s;
			}
		}
	}
	time { font-size: 0.875rem; }
	.triangle {
		font-size: 0.8125rem;
		font-weight: 500;
		padding-left: 0.25em;
		text-indent: 0;
		&::before { border-width: 0px 0.25rem 0.5rem 0.25rem; }
	}
	.triangle+p { font-weight: 600; }
	&:has(.triangle_general) {
		.thumbs_text { background-color: var(--general); }
	}
	&:has(.triangle_golf) {
		.thumbs_text { background-color: var(--golf); }
	}
	&:has(.triangle_tennis) {
		.thumbs_text {
			background-color: var(--tennis);
		}
	}
	&:has(.triangle_restaurant) {
		.thumbs_text { background-color: var(--restaurant); }
	}
}

/* ===============================
テーブル
=============================== */
table {
	width: 100%;
	border: 1px solid var(--line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 1.25rem;
	background-color: #F9F9F9;
	overflow: hidden;
	table-layout: fixed;
	th, td {
		vertical-align: middle;
		text-align: center;
		border-bottom: 1px solid var(--line);
	}
	th {
		width: 20%;
		padding: 1em;
		background-color: var(--bg);
		border-right: 1px solid var(--line);
		color: var(--general);
		font-weight: 600;
		&:last-child { border-right: none; }
		@media screen and (min-width: 768px) {
			font-size: clamp(0.75rem, 0.374rem + 0.78vw, 1rem);
		}
	}
	td {
		width: 80%;
		padding: 1em;
		font-weight: 400;
		word-break: break-word;
		white-space: normal;
		overflow-wrap: break-word;
		border-right: 1px solid var(--line);
		&:last-child { border-right: none; }
		@media screen and (min-width: 768px) { font-size: clamp(0.75rem, 0.374rem + 0.78vw, 1rem); }
	}
	thead th {
		background-color: var(--general);
		padding: 1em;
		color: #fff;
		width: calc(100% / 3);
		@media screen and (min-width: 768px) { padding: 1em; }
	}
	tbody>tr:last-child:not(:has(th[rowspan]))>th,
	tbody>tr:last-child>td,
	tbody>tr:nth-last-of-type(2):has(th[rowspan])>th:first-child { border-bottom: none; }
	.note { margin-top: .25em; }
}

/* ===============================
空き打席情報
=============================== */
.none { display: none; }
.modaal-container {
	border-radius: 1.875rem;
	@media screen and (min-width: 768px) {
		width: 37.5rem;
	}
}
.modaal-content-container {
	padding: 1.875rem;
	border-radius: 1.875rem;
	color: var(--text);
	>div {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 1.5em;
		p:first-child {
			font-size: 1.75rem;
			font-weight: 700;
		}
		p:nth-child(2) {
			font-size: 0.75rem;
			text-align: right;
		}
	}
	table {
		border-radius: 1rem;
		margin-bottom: 1em;
		th {
			color: var(--golf);
		}
	}
	@media screen and (min-width: 768px) {
		padding: 5rem;
	}
	a {
		text-decoration: underline;
		color: var(--golf-text);
	}
}

/* ===============================
フッター
=============================== */
footer {
	padding: 0 1.25rem 80px;
	font-size: 0.75rem;
	line-height: 1.5;
	.triangle {
		text-indent: -.9em;
		padding-left: .8em;
		display: block;
	}
	.inner {
		div:first-child {
			>div {
				a:has(img) {
					display: block;
					width: 11.25rem;
					margin-bottom: 3.125rem;
					img {
						width: 100%;
						height: auto;
					}
				}
				.tel {
					margin-bottom: 1.5em;
					>a {
						font-size: 1.125rem;
						font-weight: 700;
						&::before {
							content: url(../img/common/ico_tel.svg);
							margin-right: 0.2em;
							vertical-align: middle;
							font-size: 1rem;
						}
					}
				}
				.tel+ul {
					margin-bottom: 2.5rem;
					li {
						&::before {
							display: inline-block;
							content: "";
							background: url(../img/common/Instagram.png);
							background-size: contain;
							margin-right: 0.5em;
							vertical-align: middle;
							width: 1.5rem;
							height: 1.5rem;
						}
					}
				}
			}
			ul:has(.triangle) {
				column-count: 2;
				justify-content: space-between;
				margin-bottom: 2.5rem;
				>li {
					break-inside: avoid;
					font-weight: 600;
					font-size: 0.8125rem;
					margin-bottom: 1.875rem;
					.triangle::before { border-width: 0px 0.25rem 0.5rem 0.25rem; }
					>ul {
						margin: 0.5em 0 0 0.75rem;
						>li {
							font-size: 0.75rem;
							font-weight: normal;
						}
					}
					&:last-child { margin-bottom: 0; }
				}
			}
		}
		>div:last-child {
			>ul {
				font-size: 0.625rem;
				display: flex;
				gap: 2em;
				margin-bottom: 0.5em;
			}
			small { font-family: var(--en); }
		}
	}
	@media screen and (min-width: 768px) {
		padding: 0 0 1.25rem 0;
		.inner {
			>div:first-child {
				display: flex;
				justify-content: space-between;
				ul:has(.triangle) {
					display: flex;
					flex-wrap: nowrap;
					gap: 2em;
					>li { width: fit-content; }
				}
			}
			>div:last-child {
				display: flex;
				justify-content: space-between;
			}
		}
	}
	.arrow_general li:hover,
	.arrow_golf li:hover,
	.arrow_tennis li:hover,
	.arrow_restaurant li:hover {
		background-color: transparent;
	}
}