@charset "utf-8";

/* root
---------------------------------------------------*/
:root {
	--margin-bottom-large: 100px;
	--margin-bottom-medium: 80px;
	--margin-bottom-small: 34px;
}
@media screen and (max-width: 700px) {
	:root {
		--margin-bottom-large: 85px;
		--margin-bottom-medium: 46px;
		--margin-bottom-small: 0;
	}
}

/* main visual
---------------------------------------------------*/
#mainVisuals {
	margin-bottom: var(--margin-bottom-large);
	box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px 3px;
	margin-top: 5px;
}
#mainVisuals picture img {
	height: 472px;
	object-fit: cover;
}

/* contents
---------------------------------------------------*/
#concept,
#news {
	padding-left: var(--space-contents-LR);
	padding-right: var(--space-contents-LR);
}
#concept,
#news,
main p {
	text-align: center;
}

/* concept
---------------------------------------------------*/
#concept {
	margin-bottom: var(--margin-bottom-large);
	line-height: 4.375;
}
#concept h2 br:nth-child(2) {
	display: none;
}

/* news
---------------------------------------------------*/
#news {
	padding-top: var(--margin-bottom-medium);
	padding-bottom: var(--margin-bottom-medium);
}
#news h2 {
	font-size: var(--fs-24px);
}
#news h2,
#news #newsList {
	margin-bottom: var(--margin-bottom-small);
}
.newsItem {
	margin-bottom: var(--margin-bottom-small);
}
#newsList dt,
#newsList dd {
	line-height: 2;
}
#news p a {
	display: inline-block;
	line-height: 2;
	padding: 0 25px;
	color: var(--color-green);
}

/* button
---------------------------------------------------*/
.button {
	margin-bottom: var(--margin-bottom-medium);
	background-color: var(--color-gray);
	z-index: 1;
}

/* background tree
---------------------------------------------------*/
.gray {
	position: relative;
	z-index: 1;
}
.gray::before {
	content: "";
	background-image: url(../images/tree.png);
	width: 475px;
	height: 428px;
	position: absolute;
	top: -95px;
	left: -186px;
	z-index: -1;
	pointer-events: none;
}
.gray::after{
	content: "";
	background-image: url(../images/tree.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right -35px bottom 0;
	width: 390px;
	height: 350px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
	pointer-events: none;
}

/* SP対応 */
@media screen and (max-width: 700px) {
	section {
		margin-left: 0;
		margin-right: 0;
	}
	#mainVisuals picture img {
		height: 85vh;
		max-height: 1162px;
	}
	#concept {
		line-height: 2.9;
	}
	#news #newsList {
		margin-bottom: 0;
	}
	#newsList dt,
	#newsList dd {
		line-height: 2.5;
	}
	.gray::after {
		background-image: none;
	}
	#concept h2 br:nth-child(2) {
		display: block;
	}
}

/* メインの文章の改行調整 */
@media screen and (max-width: 1280px) {
	#concept p br {
		display: none;
	}
}
@media screen and (max-width: 475px) {
	#concept h2 br:first-child {
		display: none;
	}
	#concept h2 br:nth-child(2) {
		display: none;
	}
}