body {
  font-family: 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Sans-serif';
}
img{
	vertical-align: bottom;
}
section{
	width: 940px;
	margin: 0 auto 120px;
}
#contents{
	width: calc(100% - 20px);
	max-width: 1024px;
	padding: 0 10px;
}
.pc {
  display: block;
}
.hero{
	margin: 30px 0;
}

.lead{
    padding: 20px;
	margin: 0 0 30px 0;
    border: solid 5px #dae3f3;

	.lead_title{
		margin: 0 0 10px 0;
		font-size: 36px;
		font-weight: 700;
		color: #4472c4;
		line-height: 1.2;
	}

	figure{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row-reverse;
	}
	.lead_text{
		margin: 0 30px 0 0;
		font-size: 18px;
		font-weight: 600;
	}

	figure img{
		max-width: 220px;
	}
}

.about{
	.about_title{
		width: 50%;
    	margin: 0 0 0 10px;
	}

	figcaption{
		padding: 30px 40px 50px;
		margin: 0 0 80px 0;
		background: #f2f2f2;
		background-image: url(../images/bg_about.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: bottom center;
		position: relative;
	}

	h3{
		font-size: 30px;
		line-height: 1;
		font-weight: bold;
		position: absolute;
		top: -15px;
		left: 50%;
		transform: translateX(-50%);
	}

	p{
		font-size: 18px;
    	font-weight: 600;
		text-align: center;
	}

	.about_link{
		margin: 20px 0 0 0;
    	font-size: 13px;
	}
	.about_link a{
		color: #5b9bd5;
	}

	img{
		max-width: 700px;
		margin: 0 auto;
		display: block;
	}
}

.activities{
	.activities_articles{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	article{
		width: 45%;
	}
	article:not(:last-of-type){
		margin: 0 0 30px 0;
	}
	article:nth-child(2n){
		margin-top: 80px;
	}
	.activities_title{
		margin: 0 0 20px 0;
	}
	h3{
		margin: 0 0 30px 0;
	}
	figure{
		margin: 0 0 30px 0;
	}
	h4{
		margin: 0 0 30px 0;
		font-size: 26px;
		font-weight: bold;
		line-height: 1;
		text-align: center;
	}
	p{
		margin: 0 0 10px 0;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.2;
	}
	p img{
		width: 220px;
	}
	.forever-green-project figure{
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	.food-education figure{
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}
}

.program{
	.program_title{
		background: linear-gradient(180deg, #fff 0%, #fff 70%, #eef3fc 70%, #eef3fc 100%);
	}

	.program_articles{
		padding: 40px 1.95312%;
    	background: #eef3fc;
	}

	article{
		margin: 0 0 50px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	figure{
		width: 40%;
	}
	figcaption{
		margin: 0 0 10px 0;
	}
	article div{
		width: 55%;
	}
	h3{
		margin: 0 0 10px 0;
		font-size: 36px;
		line-height: 1;
		font-weight: bold;
		color: #70ad47;
	}
	h3 span{
		margin: 0 0 10px 0;
		font-size: 18px;
		font-weight: bold;
		line-height: 1;
		text-align: left;
		color: #a6a6a6;
		display: block;
	}
	p{
		margin: 0 0 10px 0;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.2;
	}
	p img{
		max-width: 270px;
	}
}

.sdgs_list{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.sdgs_item{
	width: calc(20% - 5px);
	margin: 0 5px 0 0;
}
.support{
	.support_title{
		margin: 0 0 30px 0;
	}
	.support_list{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.support_item{
		margin: 0 10px;
		width: 30%;
		border: solid 1px #ccc;
	}
	.support_item a{
		padding: 10px;
		display: block;
	}
}
@media screen and (max-width: 1024px){
	section{
		width: 95%;
	}
	.lead{
		width: calc(95% - 10px);
	}
}

@media screen and (max-width: 800px) {
	section{
		width: 95%;
	}
	.pc {
		display: none;
	}
	.lead{
		.lead_title{
			font-size: 24px;
		}
		figure{
			flex-direction: column-reverse;
		}
		.lead_text{
			margin-bottom: 20px;
			font-size: 16px;
		}
	}
	.about{
		.about_title{
			width: 100%;
			margin-bottom: 20px;
		}
		figcaption{
			padding-left: 15px;
			padding-right: 15px;
		}
		h3{
			font-size: 24px;
		}
		p{
			font-size: 16px;
		}
		.about_link{
			font-size: 12px;
		}
		img{
			max-width: 600px;
		}
	}
	.activities{
		.activities_title{
			margin-bottom: 10px;
		}
		.activities_articles{
			flex-direction: column;
		}
		article{
			width: 100%;
		}
		article:nth-child(2n) {
			margin-top: 0;
		}
		article:not(:last-of-type){
			margin-bottom: 50px;
		}
		h3{
			max-width: 300px;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 10px;
		}
		.sabameshi figure,
		.forever-green-project figure,
		.mega-rocks figure{
			max-width: 70%;
			margin-left: auto;
			margin-right: auto;
		}
		h4{
			font-size: 22px;
		}
		p{
			font-size: 16px;
		}
		p:nth-of-type(2) {
			text-align: center;
		}
		
	}
	.program{
		.program_title{
			background: linear-gradient(180deg, #fff 0%, #fff 65%, #eef3fc 65%, #eef3fc 100%);
		}
		article{
			flex-direction: column;
		}
		figure{
			width: 60%;
			margin: 0 0 20px 0;
		}
		article div{
			width: 95%;
		}
		h3{
			font-size: 24px;
		}
		h3 span{
			font-size: 16px;
		}
		p{
			font-size: 16px;
		}
		p:nth-of-type(2){
			text-align: center;
		}
	}
	.support{
		.support_list{
			flex-direction: column;
		}
		.support_item{
			width: 60%;
			max-width: 350px;
			margin-left: 0;
			margin-right: 0;
			margin-bottom: 20px;
		}
	}
	.sdgs_list{
		justify-content: center;
	}
}

@media screen and (max-width: 480px){
	.about{
		.about_link{
			font-size: 10px;
		}
	}
}