/*
----------------------------------------
sdgs
----------------------------------------
*/

.page-header {
	background: url( ../img/sdgs/2x/header-bg.png ) center center / cover no-repeat;
}

.info-box {
	margin: 6.5rem 0 3.5rem;
}

.info-box .sdgs-mark {
	line-height: 1;
	margin-bottom: 2.5rem;
}

.info-box .ttl-01 {
	margin-bottom: 3rem;
}

.info-box .ttl-01 .jp {
	letter-spacing: .8px;
	margin: 0 0 15px;
}

.info-box .heading-01 {
	margin-bottom: 15px;
}

.info-box .read {
	line-height: 2.4;
	letter-spacing: 1.2px;
}

.sdgs-icon {
	padding: 4rem 0;
}

.sdgs-icon .puzzle-01 {
	top: -210px;
}

.sdgs-icon .ttl {
	text-align: center;
	line-height: 1.5;
	margin-bottom: 2.8rem;
}

.sdgs-icon .icon-list li {
	width: calc( ( 100% - 88px ) / 6 );
	margin-right: 17.6px;
	margin-bottom: 18px;
	line-height: .5;
}

.sdgs-icon .icon-list li:nth-child( 6n ) {
	margin-right: 0;
}

.reason-box {
	padding: 5.5rem 0;
}

.reason-box .ttl-02 {
	margin-bottom: 4.5rem;
}

.reason-box .block-01 {
	padding: 30px 0 20px;
	min-height: 640px;
}

.reason-box .block-01 .wrap > .flex {
	min-height: 590px;
	align-items: center;
}

.reason-box .block-01 > .img {
	right: calc( 50% + 85px );
	padding: 0;
}

.reason-box .block-01 > .en {
	right: 5vw;
}

.reason-box .block-01 .img + .wrap .box {
	width: 50%;
	margin: 0 0 0 auto;
}

.reason-box .block-01 .ttl .en {
	opacity: 0;
	transform: translate( -75px, -25px );
	transition: all .6s;
	transition-delay: 1.2s;
}

.reason-box .block-01.view .ttl .en {
	opacity: 1;
	transform: translate( -115px, -25px );
}

.reason-box .block-01 .ttl h2.jp {
	line-height: 1.4;
}

.activity-box {
	padding: 6rem 0 .5rem;
}

.activity-box .act-list .act {
	margin: 3.7rem 0 8.7rem;
}

.activity-box .act-list .img {
	line-height: .5;
	margin-bottom: 20px;
}

.activity-box .act-list .img img {
	width: 100%;
	height: 400px;
}

.activity-box .act-list .ttl {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 4.2rem 0 2.8rem;
}

.activity-box .act-list .ttl .txt {
	margin-bottom: 20px;
}

.activity-box .act-list .ttl h3 {
	font-size: 4.2rem;
	font-weight: 500;
	line-height: 1.4;
	padding: 21px 0 21px 140px;
	position: relative;
}

.activity-box .act-list .ttl h3::before {
	content: '';
	width: 120px;
	height: 100px;
	background: url( ../img/sdgs/2x/activity-num-01.png ) left center / auto 100px no-repeat;
	position: absolute;
	top: calc( 50% - 60px );
	left: 0;
}

.activity-box .act-list .act-01 .ttl h3::before {
	background: url( ../img/sdgs/2x/activity-num-01.png ) left center / auto 100px no-repeat;
}

.activity-box .act-list .act-02 .ttl h3::before {
	background: url( ../img/sdgs/2x/activity-num-02.png ) left center / auto 100px no-repeat;
}

.activity-box .act-list .act-03 .ttl h3::before {
	background: url( ../img/sdgs/2x/activity-num-03.png ) left center / auto 100px no-repeat;
}

.activity-box .act-list .act-04 .ttl h3::before {
	background: url( ../img/sdgs/2x/activity-num-04.png ) left center / auto 100px no-repeat;
}

.activity-box .act-list .act-05 .ttl h3::before {
	background: url( ../img/sdgs/2x/activity-num-05.png ) left center / auto 100px no-repeat;
}

.activity-box .act-list .ttl .icon {
	line-height: .5;
}

.activity-box .act-list .ttl .icon li {
	margin: 0 4px 8px;
}

.activity-box .act-list .ttl .icon img {
	width: 72px;
}

.activity-box .act-list .read {
	margin-bottom: 33px;
	line-height: 2.4;
	letter-spacing: 1.2px;
	text-align: center;
}

.activity-box .act-list .read.left {
	text-align: left;
}

.activity-box .heading-01 {
	margin-bottom: 20px;
}

.activity-box .heading-01 > span {
	margin: 0 40px 0 50px;
}

.activity-box .topics-list {
	justify-content: center;
}

.activity-box .topics-list .post {
	width: calc( ( 100% - 88px ) / 3 );
	margin-right: 44px;
}

.activity-box .topics-list .post:nth-child( 3n ),
.activity-box .topics-list .post:last-child {
	margin-right: 0;
}

.activity-box .topics-list .post a {
	background: transparent;
}

.activity-box .topics-list figure {
	border-radius: 10px;
}

.activity-box .topics-list .txt {
	padding: 26px 0 0;
}

.activity-box .topics-list .txt h3 {
	margin-bottom: 5px;
}

.activity-box .topics-list .post-time {
	letter-spacing: .8px;
}


/*
----------------------------------------
1400
----------------------------------------
*/

@media screen and ( max-width: 1400px ) {

	.activity-box .act-list .ttl .icon img {
		width: 70px;
	}

	.reason-box .block-01 {
		min-height: initial;
	}

	.reason-box .block-01 .wrap > .flex {
		min-height: initial;
	}

}


/*
----------------------------------------
1200
----------------------------------------
*/

@media screen and ( max-width: 1200px ) {

	.reason-box .block-01 > .img {
		right: calc( 50% + 30px );
	}

	.reason-box .block-01 .ttl .en {
		transform: translate( -25px, -25px );
	}

	.reason-box .block-01.view .ttl .en {
		transform: translate( -65px, -25px );
	}

	.activity-box .act-list .img img {
		height: 30vw;
	}

	.activity-box .topics-list .post {
		width: calc( ( 100% - 40px ) / 3 );
		margin-right: 20px;
	}

}


/*
----------------------------------------
768
----------------------------------------
*/

@media screen and ( max-width: 768px ) {

	.info-box {
		margin: 2rem 0;
	}

	.info-box .ttl-01.jp-txt .mov-txt {
		font-size: 2.1rem;
		letter-spacing: 0;
	}

	.ttl-01.jp-txt .mov-txt {
		font-size: 2.4rem;
	}

	.info-box .read {
		line-height: 2;
		letter-spacing: .4px;
	}

	.sdgs-icon {
		padding: 3rem 0;
	}

	.sdgs-icon .puzzle-01 {
		top: -90px;
	}

	.sdgs-icon .ttl {
		margin-bottom: 2rem;
	}

	.sdgs-icon .icon-list ul {
		max-width: 460px;
		margin: 0 auto;
	}

	.sdgs-icon .icon-list li {
		width: calc( ( 100% - 20px ) / 3 );
		margin: 0 10px 10px 0;
	}

	.sdgs-icon .icon-list li:nth-child( 3n ) {
		margin-right: 0;
	}

	.reason-box {
		padding: 2rem 0;
	}

	.reason-box .ttl-02 {
		margin-bottom: 3rem;
	}

	.reason-box .block-01 {
		padding: 0;
	}

	.reason-box .block-01 > .en {
		display: none;
	}

	.reason-box .block-01 > .img {
		right: 0;
		margin: 0;
	}

	.reason-box .block-01 .img + .wrap .box {
		width: 100%;
	}

	.reason-box .block-01.view .ttl .en {
		transform: scale( .75 );
		margin: -25px 0 0;
		text-align: center;
	}

	.block-01 .ttl h2.jp {
		font-size: 2.4rem;
		text-align: center;
		margin-bottom: 20px;
	}

	.block-01 .read {
		font-size: 1.5rem;
		line-height: 2;
		letter-spacing: .8px;
	}

	.activity-box {
		padding: 1rem 0 0;
	}

	.activity-box .act-list .act {
		margin: 3rem 0 4rem;
	}

	.activity-box .act-list .img {
		margin-bottom: 0;
	}

	.activity-box .act-list .img img {
		height: 53.2vw;
	}

	.activity-box .act-list .ttl {
		align-items: flex-start;
		margin: 0;
		padding: 2rem 0;
		position: relative;
	}

	.activity-box .act-list .ttl h3::before {
		width: 75px;
		height: 50px;
		top: calc( 50% - 30px );
	}

	.activity-box .act-list .act-01 .ttl h3::before {
		background: url( ../img/sdgs/2x/activity-num-01.png ) left center / auto 50px no-repeat;
	}

	.activity-box .act-list .act-02 .ttl h3::before {
		background: url( ../img/sdgs/2x/activity-num-02.png ) left center / auto 50px no-repeat;
	}

	.activity-box .act-list .act-03 .ttl h3::before {
		background: url( ../img/sdgs/2x/activity-num-03.png ) left center / auto 50px no-repeat;
	}

	.activity-box .act-list .act-04 .ttl h3::before {
		background: url( ../img/sdgs/2x/activity-num-04.png ) left center / auto 50px no-repeat;
	}

	.activity-box .act-list .act-05 .ttl h3::before {
		background: url( ../img/sdgs/2x/activity-num-05.png ) left center / auto 50px no-repeat;
	}

	.activity-box .act-list .ttl h3 {
		font-size: 2.2rem;
		padding: 10px 0 10px 75px;
		letter-spacing: 0;
	}

	.activity-box .act-list .ttl .icon li {
		margin: 0 5px 5px 0;
	}

	.activity-box .act-list .ttl .icon img {
		width: 50px;
	}

	.activity-box .act-list .read {
		line-height: 2;
		letter-spacing: .8px;
		text-align: justify;
		margin-bottom: 2.5rem;
	}

	.activity-box .heading-01 > span {
		margin: 0 15px 0 20px;
	}

	.activity-box .topics-list {
		margin-top: 2.5rem;
		flex-direction: column;
	}

	.activity-box .topics-list .post {
		width: 100%;
		margin: 0 0 1.5rem;
	}

}


/*
----------------------------------------
hover
----------------------------------------
*/

@media screen and ( min-width: 769px ) {
}