@charset "utf-8";

/* Energy Saving and Renewable Energy
================================================== */
#main {
	line-break: strict;
}

#pageTitle {
	display: none;
}

.btns {
	margin-top: 24px
}

.btns .btn:not(.cv) a,
.btns .btn > span {
	min-height: 56px;
	font-size: var(--font-size14);
}

.titleCol {
	display: grid;
	grid-template-columns: auto 588px;
	gap: 24px 36px;
}

.titleCol h2,
.titleCol p {
	margin-bottom: 0;
}

@media screen and (max-width: 927px) {
	.titleCol {
		grid-template-columns: 223px auto;
	}
}

@media screen and (max-width: 767px) {
	.titleCol {
		grid-template-columns: auto;
	}
}

.kv {
	min-height: 600px;
	background: url(../images/img_kv.jpg) no-repeat center / cover;
	display: grid;
	place-items: center flex-start;
}

.kvText {
	width: 588px;
	color: #fff;
}

.kvText h1 {
	margin-bottom: 24px;
	color: #fff;
}

.kvText p {
	font-size: var(--font-size18);
}

@media screen and (max-width: 767px) {
	.kv {
		min-height: 646px;
		margin-top: 0 !important;
		padding-top: 40px;
		background-image: url(../images/img_kv_sp.jpg);
		place-items: flex-end;
	}
	
	.kvText {
		width: auto;
	}
	
	.kvText h1 {
		margin-bottom: 16px;
		font-size: var(--font-size30);
	}
	
	.kvText p {
		font-size: var(--font-size16);
	}
}

@media screen and (min-width: 768px) {
	.visionWrap {
		padding: 40px;
		background: url(../images/img_vision.jpg) no-repeat center / cover;
	}
	
	.visionCol {
		width: 560px;
		margin-left: auto;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1px;
	}
	
	.visionCol .vision1 {
		grid-column: span 2;
	}
	
	.visionCol > div {
		padding: 30px 32px;
		background-color: rgba(255, 255, 255, .92);
	}
	.vision p {
		margin-bottom: 0;
	}
}

@media screen and (max-width: 767px) {
	.visionCol > div {
		margin-bottom: 32px;
	}
	
	.vision img {
		width: 100%;
	}
}

.vision h3 {
	margin-bottom: 16px;
}

.issue {
	background: url(../images/img_issue.jpg) no-repeat center / cover;
}

.issue h2,
.issue p {
	color: #fff;
}

@media screen and (max-width: 767px) {
	.issue {
		padding-bottom: 240px;
		background-image: url(../images/img_issue_sp.jpg);
	}
}

.initiative {
	background-color: var(--bgLgray);
}

.initiative .splide {
	margin-top: 72px;
}

.initiative h3 {
	margin-bottom: 18px;
	font-size: var(--font-size22);
}

.initiative .thumb {
	margin-bottom: 18px;
}

@media screen and (max-width: 767px) {
	.initiative .splide {
		margin-top: 42px;
	}
	
	.initiative h3 {
		min-height: auto;
		font-size: var(--font-size20);
	}
}

.results .splide {
	margin-top: 40px;
}

.results .splide__slide {
  padding: 16px 16px 0;
}

.results .splide__slide .icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 56px;
	z-index: 1;
}

.results .thumb {
	position: relative;
}

.results .thumb::after {
	content: '';
	position: absolute;
	top: calc(100% + 32px);
	left: 50%;
	transform: translate(-50%, -50%);
	border: 8px solid var(--darkGreen);
	border-radius: 50%;
}

.results h3 {
	margin: 56px 0 12px;
	color: var(--darkGreen);
	font-size: var(--font-size18);
	text-align: center;
}

.results .splide::before {
	content: '';
	position: absolute;
	top: 232px;
	left: -48px;
	width: calc(100% + 96px);
	border-bottom: 2px solid var(--darkGreen);
}
	
@media screen and (min-width: 768px) {
	.results .splide {
		margin-right: 48px;
		margin-left: 48px;
	}
	
	.results .splide__arrow {
		width: 40px;
		height: 40px;
	}
	
	.results .splide__arrow::before {
		background-size: 11px;
	}
	
	.results .splide__arrow--prev {
		left: -48px;
	}
	
	.results .splide__arrow--next {
		right: -48px;
	}
}

@media screen and (max-width: 1280px) {
	.results .splide::before  {
		top: calc((100vw - 80px - 208px) / 3 * .564 + 16px + 30px);
	}
}

@media screen and (max-width: 767px) {
	.results .splide .splide__track {
		padding: 0 16px 0 12px !important;
	}
	
	.results .splide__slide {
	  padding: 8px 4px 0 8px;
	}
	
	.results .splide__slide .icon {
		width: 48px;
		height: 48px;
	}
	
	.results .splide::before  {
		top: calc((100vw - 40px) * .564 + 8px + 30px);
		left: 0;
		width: 100%;
	}
}

@media screen and (min-width: 768px) {
	.activity .headding {
		min-height: 362px;
		padding: 12px 24px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: url(../images/img_activity.jpg) no-repeat center / cover;
	}
	
	.activity .headding h2,
	.activity .headding p {
		color: #fff;
		text-align: center;
	}
	
	.activity .headding h2 {
		margin-top: 0;
	}
	
	.activity .headding p {
		margin-bottom: 0;
		font-size: var(--font-size18);
		line-height: 2;
	}
	
	.activity .column li {
		display: block !important;
	}
	
	.activity .moreBtn {
		display: none;
	}
}

.activity .column {
	margin-top: 64px;
	gap: 40px 80px;
	flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
	.activity .column {
		margin-top: 36px;
	}
}

.activity .column li {
	padding-left: 0;
	background: none;
	width: calc((100% - 160px) / 3);
}

.activity .column h3 {
	padding-top: 92px;
	position: relative;
}

.activity .column h3::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 72px;
	height: 72px;
	border: 2px solid var(--darkGreen);
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
}

.activity .activity1 h3::before {
	background-image: url(../images/ico_activity1.svg);
}

.activity .activity2 h3::before {
	background-image: url(../images/ico_activity2.svg);
}

.activity .activity3 h3::before {
	background-image: url(../images/ico_activity3.svg);
}

.activity .activity4 h3::before {
	background-image: url(../images/ico_activity4.svg);
}

.activity .activity5 h3::before {
	background-image: url(../images/ico_activity5.svg);
}

.activity .activity6 h3::before {
	background-image: url(../images/ico_activity6.svg);
}

.activity h3 {
	margin-bottom: 16px;
	color: var(--darkGreen);
	font-size: var(--font-size22);
	text-align: center;
}

@media screen and (max-width: 767px) {
	.activity .headding h2 {
		margin-top: 32px;
	}
	
	.activity h3 {
		font-size: var(--font-size20);
	}
	
	.activity .column li {
		width: 100%;
	}
	
	.activity .column li:nth-child(3):has(+ li[style="display: none;"]) {
		position: relative;
	}
	
	.activity .column li:nth-child(3):has(+ li[style="display: none;"])::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, transparent, #fff 78%);
	}
	
	.activity .moreBtn:has(.hide[style="display: none;"]) {
		margin-top: -184px;
		margin-bottom: 80px;
	}
}

.donationBelt {
  background-color: #c6e2f0;
}

.donationBelt::before {
  background-image: url(/japan/uploads/bg_climate3.jpg);
  background-position: 50% 30%;
}

.donationBelt::after {
  background-image: linear-gradient(to right, #c6e2f0, transparent);
}

@media screen and (max-width: 767px) {
  .donationBelt::after {
    background-image: linear-gradient(to bottom, #c6e2f0, transparent);
  }
}

.contentBody + #supportWithDonation {
	margin-top: calc(792px * .4545 / 2 + 80px);
	z-index: -1;
}

#donateForm {
	padding-bottom: 200px;
}

@media screen and (max-width: 767px) {
	.contentBody + #supportWithDonation {
		margin-top: calc(792px * .4545 / 2 + 20px);
	}
	
	#donateForm {
		padding-bottom: 190px;
	}
}