@charset "utf-8";

/*-----------------------------------------
-----------------------------------------*/
/*----------------------------------------
	- base
	- top_area
	- born_area
	- project_area
-----------------------------------------*/
/*-----------------------------------------
	base
-----------------------------------------*/
:root {
	--main_color: #006430;
}
a {
	text-decoration: none;
	transition: all .3s ease;
}
#project_area a[tabindex] {
	position: relative;
	display: flex;
}
#project_area a[tabindex]::before {
	content: '';
	position: absolute;
	display: block;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .4);
	z-index: 5;
	border-radius: 50%;
}

@media (hover: hover) {
	a:hover {
		opacity: 0.8;
	}
	a[tabindex]:hover {
		opacity: 1;
	}
}
picture {
	display: block;
}


/*-----------------------------------------
	top_area
-----------------------------------------*/
#top_area {
	background: url(../img/concept/main.jpg) no-repeat center;
	background-size: cover;
	width: 100%;
	height: 76.272vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin-bottom: 35.36vw;
}
#top_area .text_block .mark {
	width: 13.832vw;
	margin: 0 auto 1.36vw;
	padding-top: 3.18vw;
}
#top_area .text_block h2 {
	width: 33vw;
	margin: 0 auto 2.5vw;
}
#top_area .text_block p {
	text-align: center;
	color: #fff;
	font-weight: 600;
	font-size: min(calc((31 / 2200) * 100vw), 31px);
	line-height: 2.129;
}
#top_area picture {
	content: '';
	position: absolute;
	width: 76.45vw;
	bottom: -35.36vw;
}

@media screen and (max-width:768px) {
	#top_area {
		background: url(../img/concept/main_sp.jpg) no-repeat center;
		background-size: cover;
		width: 100%;
		height: 237.33333vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		margin-bottom: 26.4vw;
	}
	#top_area .text_block .mark {
		width: 24.8vw;
		margin: 0 auto 1.36vw;
		padding-top: 7.06vw;
	}
	#top_area .text_block h2 {
		width: 63.73333vw;
		margin: 0 auto 8.93333vw;
	}
	#top_area .text_block p {
		font-size: min(calc((36 / 750) * 100vw), 18px);
		letter-spacing: 0.075em;
		line-height: 1.5555;
	}
	#top_area picture {
		width: 95vw;
		bottom: -22.6666vw;
	}
}

/*-----------------------------------------
	born_area
-----------------------------------------*/
#born_area {
	position: relative;
}
/* 葉っぱ_位置設定 */
.reaf {
	content: '';
	position: absolute;
	transition: all .3s ease;
}
.reaf01 {
	/*top: 5.9vw;*/
	right: 10vw;
	width: 6.136vw;
	max-width: 267px;
}
.reaf02 {
	/* top: 33.36vw; */
	right: 6.818vw;
	width: 12.7272vw;
	max-width: 652px;
	z-index: -1;
}
.reaf03 {
	/* top: 65.1818vw; */
	left: 8.727vw;
	width: 15.818vw;
	max-width: 708px;
}

#born_area p,
#born_area h3 {
	color: var(--main_color);
}
#born_area .text_area {
	text-align: center;
}
#born_area .text_area p {
	font-size: min(calc((31 / 2200) * 100vw), 28px);
	line-height: 2.129;
}
#born_area .text_area p.wide {
	font-size: min(calc((55 / 2200) * 100vw), 52px);
	line-height: 1.45;
	margin-bottom: 43px;
}
#born_area .policy {
	padding-top: 67.727vw;
	position: relative;
}
#born_area .policy::before {
	content: '';
	position: absolute;
	background: url(../img/concept/area_wide_img.png) no-repeat center;
	background-size: cover;
	top: 0; left: 0;
	width: 100%;
	height: 74.86vw;
	z-index: -1;
}
#born_area .policy .contents {
	margin-bottom: 75px;
}
#born_area .policy .contents h3 {
	margin-bottom: 35px;
	font-size: 36px;
}
#born_area .policy .contents ul {
	display: flex;
	gap: 0 6.25px;
}
#born_area .policy p.source {
	font-size: 12px;
	text-align: right;
}

@media screen and (max-width:768px) {
	#born_area .text_area p {
		font-size: min(calc((28 / 750) * 100vw), 14px);
		line-height: 1.60;
		letter-spacing: 0.05em;
		font-weight: 700;
	}
	#born_area .text_area p.wide {
		font-size: min(calc((50 / 750) * 100vw), 25px);
		line-height: 1.2;
		margin-bottom: 22px;
	}
	#born_area .policy {
		padding-top: 121.6vw;
	}
	#born_area .policy::before {
		content: '';
		position: absolute;
		background: url(../img/concept/area_wide_img_sp.png) no-repeat center;
		background-size: cover;
		top: -2.666vw; left: 0;
		width: 100%;
		height: calc(121.6vw + 2.666vw);
		z-index: -1;
	}
	#born_area .policy .contents {
		margin-bottom: 42px;
	}
	#born_area .policy .contents h3 {
		margin-bottom: 25px;
		font-size: 24px;
		text-align: center;
		font-weight: bold;
	}
	#born_area .policy .contents ul {
		flex-direction: column;
		gap: 21px 0;
	}
	#born_area .policy p.source {
		font-size: 10px;
	}
}
@media screen and (max-width:500px) {
	#born_area .text_area p.wide {
		font-size: 20px;
	}
	#born_area span.br_500 {
		display: block;
	}
}

/*-----------------------------------------
	project_area
-----------------------------------------*/
#project_area {
	width: 100%;
	/*background: url(../img/concept/bg_pj.png) no-repeat center;*/
	background: url(../img/concept/bg_pj1.png) no-repeat center;
	background-size: cover;
	/*height: 149.93333vw;*/
	height: 135vw;
	position: relative;
	margin-bottom: 41.25px;
}
#project_area::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/concept/bg_pj-cover.png) no-repeat top center / contain;
}
#project_area h3 {
	content: '';
	position: absolute;
	width: 16.5vw;
	top: 4.681vw;
	left: 10.636vw;
}
#project_area .center_mark {
	content: '';
	position: absolute;
	width: 18.636vw;
	top: 40.54vw; left: 50%;
	transform: translate(-50%, 0);
}
#project_area .circle_block .circle {
	content: '';
	position: absolute;
	width: 25.8vw;
}
.circle.item01 {
	top: 12.136vw;
	left: 50%;
	transform: translateX(-50%);
}
.circle.item02 {
	top: 25.181vw;
	right: 11.6918vw;
}
.circle.item06 {
	top: 25.181vw;
	left: 11.6918vw;
}
.circle.item04 {
	top: 67.5vw;
	left: 50%;
	transform: translateX(-50%);
}
.circle.item05 {
	top: 53.1818vw;
	left: 11.6918vw;
}
.circle.item03 {
	top: 53.1818vw;
	right: 11.6918vw;
}
#project_area .img{
	position: absolute;
	bottom: 0;
	left: 0;
}
#project_area .notion.text-note{
	text-align: right;
	margin: 0;
}
p.notion {
	margin-bottom: 42.5px;
}

@media screen and (max-width:768px) {
	#project_area {
		width: 100%;
		/*background: url(../img/concept/bg_pj_sp.png) no-repeat;*/
		background-size: cover;
		/*height: 255.7333vw;*/
		height: 250vw;
		position: relative;
		margin-bottom: 22px;
	}
	#project_area h3 {
		width: 27.333vw;
		top: 4.5333vw;
		left: 4.66666vw;
	}
	#project_area .center_mark {
		content: '';
		position: absolute;
		width: 27.46666vw;
		top: 3.3333vw; left: 50%;
		transform: translate(-50%, 0);
	}
	#project_area .circle_block {
		padding-top: 50.66666vw;
		display: flex;
		flex-wrap: wrap;
		gap: 15px 12px;
	}
	#project_area .circle_block .circle {
		position: initial;
		width: calc((100% - 12px) / 2 );
		z-index: 10;
	}
	.circle.item01,
	.circle.item02,
	.circle.item03,
	.circle.item04,
	.circle.item05,
	.circle.item06 {
		transform: none;
	}
	p.notion {
		margin-bottom: 23px;
	}
}