@charset "utf-8";

:root {
	--margin-bottom-sp: 50px;
}

body{
	background-color: var(--color-gray);
	background:linear-gradient(to top, var(--color-gray) 0%, rgba(230,230,230,0) 90%),#fff;
	background-repeat: no-repeat;
	
}

section h3 {
	display: inline;
}
.gridArea {
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 260px;
	line-height: calc(40/16);
}
#info {
	margin-right: 20px;
}
section h4 {
	text-decoration: underline;
}
section dt,
section dd {
	display: inline-block;
}
section dt,
section span {
	margin-right: 1rem;
}
#map {
	width: 100%;
}
#map iframe {
	width: 100%;
	height: 100%;
}

.contents {
	position: relative;
	overflow: hidden;
	}

.contents::before,
.contents::after{
	content: "";
	position: absolute;
	width: 470px;
	height: 428px;
	background-image: url(../images/tree.png);
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
	transform: scale(0.7);
}

.contents::before{
	left: -240px;
	bottom: -50px;
}

.contents::after{
	background-position: right -190px top 0;
	right: -80px;
	top: 180px;
}

@media screen and (max-width: 700px) {
	.gridArea {
		display: block;
		margin-bottom: 0px;
	}
	#info,
	#map,
	#info>div {
		margin-bottom: var(--margin-bottom-sp);
		margin-right: 0;
	}
	#info {
		text-align: center;
	}
	#info>div {
		display: inline-block;
	}
	#info>div,
	#info>p {
		text-align: left;
	}
	section h4 {
		text-decoration: none;
	}
	#map {
		height: 157px;
	}

		/* SPの木レイアウト */
	.contents{
		position: relative;
		padding-bottom: 4rem;
	}

	.contents::before,
	.contents::after{
		background-size: contain;
		transform: scale(0.50);
		z-index: -1;
		pointer-events: none;
	}
	
	.contents::before{
		top: 15px;
		left: -120px;
		bottom: auto;
		transform-origin: left top;
	}

	.contents::after{
		bottom: 280px;
		right: -25px;
		top: auto;
		transform-origin: right bottom;
	}

}