@charset "UTF-8";

/* ----------------------------------------------------
	about
---------------------------------------------------- */
.about {
	padding: 70px 0;
	text-align: center;
}

.about__title {
	margin-bottom: 1em;
	font-size: 23px;
	font-weight: normal;
}

.about__lead {
	line-height: 2;
	font-size: 20px;
}

.about__title--icon {
	margin: 3em 0 2.5em;
}

.about__title--icon img {
	width: 45.53889%;
}

@media screen and (max-width: 768px) {
	.about {
		padding: 9.11458vw 0;
	}

	.about__title {
		font-size: 4.29688vw;
	}

	.about__lead {
		font-size: 3.90625vw;
	}

	.about__title--icon img {
		width: 100%;
	}
}

/*
	icon
------------------------------ */
.about .icon__title {
	margin-bottom: 1.5em;
	font-size: 25px;
}

.about .icon__title span {
	padding-right: 2em;
	font-weight: bold;
	border-bottom: dotted 2px rgb(var(--blk));
	display: inline-block;
	position: relative;
	cursor: pointer;
}

.about .icon__title span::before {
	width: 10px;
	height: 10px;
	line-height: 1;
	color: rgb(var(--blk));
	border: solid 3px currentColor;
	border-bottom: 0;
	border-left: 0;
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%) rotate(135deg);
	transition: transform 0.3s ease;
	content: "";
}

.about .icon__title span.active::before {
	transform: translateY(-25%) rotate(-45deg);
}

.about .icon__detail {
	display: none;
}

.about .icon__list {
	margin: 0 auto;
	max-width: 709px;
	display: flex;
	flex-wrap: wrap;
}

.about .icon__list li {
	margin-bottom: 8px;
	width: calc((100% - 40px) / 6);
}

.about .icon__list li:not(:nth-child(6n)) {
	margin-right: 8px;
}

@media screen and (max-width: 768px) {
	.about .icon__title {
		font-size: 4.55729vw;
	}

	.about .icon__title span::before {
		width: 1.30208vw;
		height: 1.30208vw;
		border-width: 0.39063vw;
	}

	.about .icon__list li {
		margin-bottom: 1.04167vw;
		width: calc((100% - (1.04167vw * 5)) / 6);
	}

	.about .icon__list li:not(:nth-child(6n)) {
		margin-right: 1.04167vw;
	}
}

/* ----------------------------------------------------
	section
---------------------------------------------------- */
.section {
	padding: 60px 0 120px;
}

.section:nth-child(odd) {
	background: #EFF5F4;
}

@media screen and (max-width: 768px) {
	.section {
		padding: 7.81250vw 0 15.625vw;
	}
}

/*
	section__title
------------------------------ */
.section__title {
	margin-bottom: 1.75em;
	text-align: center;
}

.section__title img {
	width: auto;
}

/* SDGs Experience */
#sdgs .section__title img {
	height: 207px;
}

.en #sdgs .section__title img {
	height: 175px;
}

@media screen and (max-width: 768px) {
	#sdgs .section__title img {
		height: 26.95313vw;
	}

	.en #sdgs .section__title img {
		height: 23.33333vw;
	}
}

/* Eco Friendly */
#eco .section__title img {
	height: 192px;
}

.en #eco .section__title img {
	height: 160px;
}

@media screen and (max-width: 768px) {
	#eco .section__title img {
		height: 25vw;
	}

	.en #eco .section__title img {
		height: 21.33333vw;
	}
}

/* Community & Society */
#community .section__title img {
	height: 170px;
}

.en #community .section__title img {
	height: 137px;
}

@media screen and (max-width: 768px) {
	#community .section__title img {
		height: 22.13542vw;
	}

	.en #community .section__title img {
		height: 18.26667vw;
	}
}

/* For People */
#people .section__title img {
	height: 173px;
}

.en #people .section__title img {
	height: 145px;
}

@media screen and (max-width: 768px) {
	#people .section__title img {
		height: 22.52604vw;
	}

	.en #people .section__title img {
		height: 19.33333vw;
	}
}

/*
	section__list
------------------------------ */
.section__list {
	display: flex;
	flex-wrap: wrap;
}

.section__item {
	background: #fff;
	margin-bottom: 60px;
	padding: 52px 42px;
	width: 46.66667%;
	display: flex;
	flex-direction: column;
}

.section__item:not(:nth-child(even)) {
	margin-right: calc(100% - (46.66667% * 2));
}

.section:nth-child(even) .section__item {
	background: #EFF5F4;
}

@media screen and (max-width: 768px) {
	.section__list {
		display: block;
	}

	.section__item {
		margin-bottom: 7.81250vw;
		padding: 9.86667vw 6.4vw;
		width: 100%;
	}

	.section__item:not(:nth-child(even)) {
		margin-right: 0;
	}
}

/* title */
.section__item .title {
	padding-top: 2em;
	font-size: 22px;
	line-height: 1.25;
	position: relative;
}

.section__item .title::before {
	background: #4DBF9C;
	width: 90px;
	height: 5px;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
}

.section__item .title small {
	font-size: 16px
}

@media screen and (max-width: 768px) {
	.section__item .title {
		padding-top: 1em;
		font-size: 5.86667vw;
	}
}

/* text */
.section__item .text {
	margin: 2em 0;
}

.section__item .text .linkText a::after {
	content: "＞";
}

@media screen and (max-width: 768px) {
	.section__item .text {
		margin: 1em 0;
		font-size: 4.26667vw;
	}
}

/* target */
.section__item .target {
	margin-bottom: 2em;
	display: flex;
	flex-wrap: wrap;
}

.section__item .target li {
	margin: 0 8px 8px 0;
	max-width: 57px;
}

@media screen and (max-width: 768px) {
	.section__item .target {
		margin-bottom: calc(1em - 2.13333vw);
		display: flex;
		flex-wrap: wrap;
	}

	.section__item .target li {
		margin: 0 2.13333vw 2.13333vw 0;
		max-width: 15.2vw;
	}
}

.section__item .target.over5 {
	max-width: 200px;
}

@media screen and (max-width: 768px) {
	.section__item .target.over5 {
		max-width: 51.99999vw;
	}
}

/* linkBtn */
.section__item .linkBtn {
	margin-top: auto;
}

.section__item .linkBtn a {
	margin: 0;
}

@media screen and (max-width: 768px) {
	.section__item .linkBtn a {
		margin: 0 auto;
	}
}

/*
	full
------------------------------ */
.section__item.full {
	background: none;
	margin: 0 0 60px;
	padding: 0;
	width: 100%;
	display: grid;
	grid-template-columns: 37% 2.33333% 60.66667%;
}

.section:nth-child(even) .section__item.full {
	background: none;
}

.section__item.full .title {
	padding-top: 0;
	grid-column: 3/4;
	grid-row: 1/2;
}

.section__item.full .title::before {
	display: none;
}

.section__item.full .image {
	grid-column: 1/2;
	grid-row: 1/5;
}

.section__item.full .text {
	margin: 1em 0;
	grid-column: 3/4;
	grid-row: 2/3;
}

.section__item.full .target {
	margin-bottom: 1em;
	grid-column: 3/4;
	grid-row: 3/4;
}

.section__item.full .linkBtn {
	grid-column: 3/4;
	grid-row: 4/5;
}

@media screen and (max-width: 768px) {
	.section__item.full {
		background: none;
		margin: 0 0 60px;
		width: 100%;
		display: grid;
		grid-template-columns: 43.47826% -3.76812% 52.75362%;
	}

	.section__item.full .title {
		grid-column: 3/4;
		grid-row: 1/2;
	}

	.section__item.full .image {
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.section__item.full .text {
		grid-column: 1/4;
		grid-row: 2/3;
	}

	.section__item.full .target {
		grid-column: 1/4;
		grid-row: 3/4;
	}

	.section__item.full .linkBtn {
		grid-column: 1/4;
		grid-row: 4/5;
	}
}