/*
----------------------------------------
governance
----------------------------------------
*/

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

.page-header h1 {
	line-height: 1.5;
}

.page-header .note {
	font-size: 2rem;
}

.btn-box {
	padding: 5rem 0;
}

.btn-box .btn-set .flex {
	justify-content: center;
}

.btn-box .btn-set {
	margin-bottom: 0;
}

.btn-set li {
	width: calc( ( 100% - 60px ) / 4 );
	margin-right: 20px;
	margin-bottom: 20px;
}

.sdgs-box {
	margin-bottom: 7rem;
}

.sdgs-box .flex {
	align-items: center;
}

.sdgs-box .sdgs > .box {
	width: calc( ( 100% - 40px ) / 2 );
	padding: 30px;
	background: #fff;
	border-radius: 10px;
}

.sdgs-box .sdgs > .box:nth-child( odd ) {
	margin-right: 40px;
}

.sdgs-box .box .img {
	width: 147px;
	line-height: .5;
}

.sdgs-box .box .txt {
	width: calc( 100% - 147px );
	padding-left: 3rem;
	line-height: 1.6;
}

.sdgs-box .box .txt .en {
	font-size: 1.4rem;
}

.sdgs-box .box .txt .jp {
	font-size: 1.8rem;
	font-weight: 500;
	margin: 10px 0;
}

.sdgs-16 {
	color: #004c88;
}

.sdgs-17 {
	color: #023067;
}

.cont-box {
	padding-bottom: 12rem;
}

.cont-box .cont-wrap {
	padding: 40px;
	border-radius: 10px;
	background: #fff;
}

.cont-box .cont-wrap p {
	margin-bottom: 4rem;
}

.cont-box .cont-wrap .dl-01 {
	margin: 4rem 0;
}

.cont-box .ol-01 > ol:nth-child( odd ) {
	width: 55%;
	padding-right: 20px;
}

.cont-box .ol-01 > ol:nth-child( even ) {
	width: 45%;
}

.cont-box .ol-01 li {
	margin-bottom: 7px;
}

.cont-box .dl-03 {
	margin: 2rem 0;
}


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

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


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

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

	.btn-set li {
		width: calc( ( 100% - 45px ) / 4 );
		margin-right: 15px;
	}

	.btn-set li a {
		font-size: 1.4rem;
		letter-spacing: 0;
		padding: 9px;
		border-radius: 25px;
		background: #fff !important;
	}

	.btn-set li a:hover {
		color: #fff !important;
		background: #8fc31f !important;
	}

	.sdgs-box {
		margin-bottom: 6rme;
	}

	.sdgs-box .sdgs > .box {
		width: calc( ( 100% - 20px ) / 2 );
		padding: 20px;
	}

	.sdgs-box .sdgs > .box:nth-child( odd ) {
		margin-right: 20px;
	}

	.sdgs-box .box .img {
		width: 100px;
	}

	.sdgs-box .box .txt {
		width: calc( 100% - 100px );
		padding-left: 2rem;
	}

	.sdgs-box .box .txt .en {
		font-size: 1.2rem;
	}

	.sdgs-box .box .txt .jp {
		font-size: 1.6rem;
		margin: 5px 0;
	}

	.cont-box {
		padding-bottom: 8rem;
	}

	.cont-box .cont-wrap {
		padding: 20px 20px 10px;
	}

	.cont-box .dl-01 > dt {
		width: 30%;
	}

	.cont-box .dl-01 > dd {
		width: 70%;
	}

	.cont-box .ol-01 {
		flex-direction: column;
	}

	.cont-box .ol-01 > ol:nth-child( odd ),
	.cont-box .ol-01 > ol:nth-child( even ) {
		width: 100%;
		padding: 0;
	}

}


/*
----------------------------------------
1000
----------------------------------------
*/

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


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

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

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

	.btn-set li {
		width: calc( ( 100% - 10px ) / 2 );
		margin-bottom: 15px;
	}

	.btn-set li:first-child {
		width: 100%;
		margin-right: 0;
	}

	.btn-set li:nth-child( odd ) {
		margin-right: 0;
	}

	.btn-set li:nth-child( even ) {
		margin-right: 10px;
	}

	.btn-set li a {
		width: 100%;
	}

	.sdgs-box {
		margin-bottom: 2rem;
	}

	.sdgs-box .sdgs {
		flex-direction: column;
	}

	.sdgs-box .sdgs > .box {
		width: 100%;
		margin-bottom: 20px;
	}

	.sdgs-box .sdgs > .box:nth-child( odd ) {
		margin-right: 0;
	}

	.cont-box {
		padding-bottom: 4rem;
	}

	.cont-box .cont-wrap p {
		margin-bottom: 3rem;
		letter-spacing: .8px;
	}

	.cont-box .cont-wrap .dl-01 {
		margin: 2rem 0;
	}

	.dl-01 > dt:first-of-type {
		border-top: none;
	}

	.cont-box .dl-01 > dt {
		width: 100%;
	}

	.cont-box .dl-01 > dd {
		width: 100%;
	}

	.cont-box .dl-03 {
		margin: 1.5rem 0 3rem;
	}

}


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

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