/*
section.top {
	background-color: #fff;
	> div {
		max-width: 1920px;
		margin-inline: auto;
		@media (width < 1000px) {
			width: 1000px;
			height: 500px;
		}
		@media (width < 600px) {
			width: auto;
			height: auto;
		}
		> div.block {
			display: grid;
			> picture {
				grid-area: 1/1/2/2;
				> img {
					max-width: 100%;
					@media (width < 900px) {
						margin-left: calc((100vw - 900px) / 2);
					}
					@media (width < 600px) {
						margin-left: 0;
					}
				}
			}
			> div.bg {
				position: relative;
				grid-area: 1/1/2/2;
				align-self: center;
				background-color: #fff;
				width: 100%;
				height: 40%;
				opacity: 0.4;
				@media (width < 1000px) {
					height: 30%;
				}
				@media (width < 600px) {
					height: 15%;
				}
			}
			> div.title {
				grid-area: 1/1/2/2;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-family: var(--font-serif);
				width: min(100vw,1920px);
				position: relative;
				> img {
					padding-inline: 10%;
					max-width: 100%;
					@media (width < 600px) {
						padding-inline: 5%;
					}
				}
			}
		}
	}
}
*/
section.usopen2012sp {
	display: none;
	@media (width < 600px) {
		display: block;
	}
	> figure {
		width: 100%;
		> img {
			width: 100%;
		}
	}
}
section.movie {
	background-color: #eee;
	> div {
		max-width: 1920px;
		margin-inline: auto;
		> video {
			max-width: 100%;
			display: block;
		}
	}
}
section.usopen2012pc {
	background-color: #fff;
	> div {
		max-width: 1920px;
		margin-inline: auto;
		@media (width < 1000px) {
			width: 1000px;
			height: auto;
		}
		@media (width < 600px) {
			width: auto;
		}
		> div {
			@media (width < 600px) {
				display: none;
			}
			margin-top: -2%;
			> figure {
				> img {
					max-width: 100%;
					@media (width < 900px) {
						margin-left: calc((100vw - 900px) / 2);
					}
				}
			}
		}
	}
}
section.news {
	padding: 20px 5% 0 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			font-family: var(--font-serif);
			color: #006354;
			font-size: min(3.5rem,9vw);
			line-height: 1.4;
			font-weight: 600;
			> small {
				padding-left: 10px;
				font-size: min(1.2rem,5vw);
				color: #4c4948;
			}
		}
		> div.newsarea {
			background-color: #f4f9f8;
			padding-block: 25px;
			padding-inline: 30px;
			@media (width < 340px) {
				padding-inline: 10px;
			}
			> .inform {
				> a {
					text-decoration: none;
					padding: 15px 0;
					display: flex;
					padding-right: 25px;
					background-image: url(./image/chevron_right_green.svg);
					background-repeat: no-repeat;
					background-position: 100% 50%;
					&[target="_blank"] {
						background-image: url(./image/external_green.svg);
					}
					&:hover {
						opacity: 0.7;
					}
					> dl {
						display: grid;
						grid-template-columns: 90px 130px 1fr;
						row-gap: 5px;
						@media (width < 920px) {
							grid-template-columns: 90px 130px 1fr;
						}
						> dt:nth-of-type(1) {
							font-size: 1rem;
							line-height: 1.2;
							color: #888;
							@media (width < 920px) {
								grid-row: 1/2;
								grid-column: 1/2;
							}
						}
						> dt:nth-of-type(2) {
							@media (width < 920px) {
								grid-row: 1/2;
								grid-column: 2/3;
							}
							> ce-inform-category {
							}
						}
						> dd {
							@media (width < 920px) {
								grid-row: 2/3;
								grid-column: 1/4;
							}
							> .subject {
								font-size: 1rem;
								line-height: 1.3;
								color: #222;
								font-weight: 500;
							}
							> .body {
								margin-top: 5px;
								font-size: 0.9rem;
								line-height: 1.3;
								color: #888;
								font-weight: 400;
							}
						}
					}
				}
			}
			> figure {
				margin-top: 30px;
				text-align: center;
				> a {
					display: inline-block;
					align-self: center;
					justify-self: center;
					text-decoration: none;
					&:hover {
						opacity: 0.7;
					}
					> div {
						padding: 5px 40px;
						display: inline-flex;
						align-items: center;
						border: 1px solid #111;
						@media (width < 890px) {
							padding: 2px 30px;
						}
						> p {
							color: #111;
							font-size: min(1.0rem,5vw);
							line-height: 1.4;
							font-weight: 500;
							letter-spacing: 8px;
						}
						> img {
							width: 20px;
						}
					}
				}
			}
		}
	}
}
section.link {
	padding: 30px 5% 0 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 20px;
		@media (width < 600px) {
			grid-template-columns: 1fr;
			row-gap: 20px;
		}
		> a {
			text-decoration: none;
			&:hover {
				opacity: 0.8;
			}
			> picture {
				> img {
					max-width: 100%;
					border-radius: 5px;
				}
			}
		}
	}
}
section.course {
	padding: 20px 5% 0 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			font-family: var(--font-serif);
			color: #006354;
			font-size: min(3.5rem,8vw);
			line-height: 1.4;
			font-weight: 600;
			> small {
				padding-left: 10px;
				font-size: min(1.2rem,4vw);
				color: #4c4948;
			}
		}
		> div.coursearea {
			display: grid;
			> img {
				grid-area: 1/1/2/2;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			> div {
				grid-area: 1/1/2/2;
				justify-self: senter;
				align-self: center;
				padding-block: 20px;
				padding-inline: 5vw;
				display: flex;
				flex-direction: column;
				row-gap: 20px;
				> h2 {
					text-align: center;
					font-family: var(--font-serif);
					color: #fff;
					font-size: min(3.2rem,6vw);
					line-height: 1;
					font-weight: 600;
				}
				> p {
					text-align: center;
					color: #fff;
					font-size: min(1rem,5vw);
					line-height: 1.4;
					@media (width < 750px) {
						> br {
							display: none;
						}
					}
				}
				> div {
					text-align: center;
					> a {
						display: inline-block;
						text-decoration: none;
						&:hover {
							opacity: 0.7;
						}
						> div {
							padding: 5px 40px;
							display: inline-flex;
							align-items: center;
							border: 1px solid #fff;
							@media (width < 890px) {
								padding: 2px 30px;
							}
							> p {
								color: #fff;
								font-size: min(1.0rem,5vw);
								line-height: 1.4;
								font-weight: 500;
								letter-spacing: 8px;
							}
							> img {
								width: 20px;
							}
						}
					}
				}
			}
		}
	}
}
section.clubhouse {
	padding: 20px 5% 0 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			font-family: var(--font-serif);
			color: #006354;
			font-size: min(3.5rem,8vw);
			line-height: 1.4;
			font-weight: 600;
			> small {
				padding-left: 10px;
				font-size: min(1.2rem,4vw);
				color: #4c4948;
			}
		}
		> div.housearea {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 40px;
			row-gap: 40px;
			@media (width < 750px) {
				grid-template-columns: 1fr;
			}
			> a {
				display: grid;
				text-decoration: none;
				&:hover {
					opacity: 0.8;
				}
				> figure {
					grid-area: 1/1/2/2;
					> img {
						max-width: 100%;
					}
				}
				> div.bg {
					position: relative;
					grid-area: 1/1/2/2;
					align-self: center;
					background-color: #fff;
					opacity: 0.8;
					width: 100%;
					height: 45%;
				}
				> div.title {
					grid-area: 1/1/2/2;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-family: var(--font-serif);
					position: relative;
					> h1 {
						font-size: min(2.4rem,8vw);
						line-height: 1.1;
						color: #006354;
						font-weight: 500;
					}
					> p {
						font-size: min(1.5rem,4vw);
						line-height: 1.0;
						color: #333;
						font-weight: 500;
					}
				}
			}
		}
	}
}
section.map {
	margin-top: 80px;
	> div {
		position: relative;
		overflow: hidden;
		width: 100%;
		> div.google {
			> iframe {
				position: absolute;
				top: 0;
				left: -400px;
				width: calc(100% + 400px + 1100px);
				height: 100%;
				pointer-events: none;
				border: none;
			}
			> div.bg {
				position: absolute;
				top: 0;
				background-color: rgba(0, 0, 0, 0.4);
				mix-blend-mode: multiply;
				width: 100%;
				height: 100%;
			}
		}
		> div.info {
			margin-block: 4%;
			max-width: 1000px;
			margin-inline: auto;
			position: relative;
			z-index: 3;
			padding-inline: 5%;
			> div.block {
				max-width: 600px;
				margin-inline: auto;
				background-color: rgba(255, 255, 255, 0.8);
				text-align: center;
				padding-inline: 10%;
				> h3 {
					padding-top: 10px;
					font-family: var(--font-serif);
					font-size: min(2.4rem,8vw);
					line-height: 1.1;
					color: var(--color-accent);
					font-weight: 500;
				}
				> article {
					padding-top: 10px;
					text-align: left;
					> h4 {
						font-size: min(1.2rem,4.5vw);
						line-height: 1.6;
						color: #333;
						font-weight: 600;
					}
					> p {
						font-size: min(0.9rem,4.5vw);
						line-height: 1.4;
						color: #222;
					}
				}
				> a {
					margin-block: 20px;
					display: inline-block;
					text-decoration: none;
					background-color: var(--color-accent);
					&:hover {
						opacity: 0.8;
					}
					> div.link {
						padding-block: 10px;
						padding-inline: 20px;
						display: inline-flex;
						align-items: center;
						border: 1px solid #fff;
						column-gap: 5px;
						> p {
							color: #fff;
							font-size: min(1.0rem,4.5vw);
							line-height: 1.4;
							letter-spacing: 2px;
						}
						> img {
							width: 20px;
						}
					}
				}
			}
		}
	}
}
section.memberlink {
	position: fixed;
	bottom: 0;
	z-index: 5;
	display: none;
	width: 100%;
	transition: transform 0.3s;
	@media (width < 1000px) {
		display: block;
	}
	&.hidden {
		transform: translateY(100px);
	}
	> div {
		text-align: center;
		background-image: linear-gradient(#e14e30,#b42b28);
		> a {
			display: block;
			text-decoration: none;
			padding-block: 12px;
			&:hover {
				opacity: 0.8;
			}
			> div {
				display: inline-block;
				font-size: 1.0rem;
				line-height: 1.3;
				color: #fff;
				font-family: var(--font-serif);
				background-image: url(./common/image/mark_chevron_right_fff.svg);
				background-repeat: no-repeat;
				background-position: 100% 50%;
				padding-right: 20px;
			}
		}
	}
}