@charset "UTF-8";

.bg-about {
	background: url("../images/bg_about.png") no-repeat right top;
	background-size: 70% auto;
}
.sec-info {
	color: #fff;
	background-color: #b27291;
	padding: 3em 0 5em 0;
	font-family: 'Noto Sans JP', sans-serif;
}

.sec-contribution {
	padding: 3em 0 5em 0;	
	color: #fff;
	background-color: #873162;
	font-family: 'Noto Sans JP', sans-serif;
}



@media screen and (min-width: 751px){
	.sec-info .tb-white tr {
		width: 20%;
	}
	
	.sec-mark {
		padding: 3em 0 5em 0;
		background-color: #f2f2f2;
	}
	.wrapper-mark {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #ccc;
		background-color: #fff;
	}

	.wrapper-mark .mark {
		width: 25%;
		text-align: center;
	}
	.wrapper-mark .mark img {
		width: 60%;
		height: auto;
	}
	.wrapper-mark .txt {
		width: 50%;
	}
	.wrapper-mark .txt h3,
	.wrapper-mark .txt p {
		padding-left: 3%;
		padding-right: 3%;
	}
	.wrapper-mark .pic {
		width: 25%;
	}
	.wrapper-mark .pic img {
		width: 100%;
		height: auto;
	}
	.box_graf {		
		width: 100%;
		padding-bottom: 70%;
		background: url("../images/img_about.png") no-repeat top center;
		background-size: 100% auto;
	}
}

@media screen and (max-width:750px){
	.sec-mark {
		padding: 1em 0 2em 0;
		background-color: #f2f2f2;
	}
	.wrapper-mark {
		padding: 3em;
		border: 1px solid #ccc;
		background-color: #fff;
	}
	.wrapper-mark .mark {
		text-align: center;
		margin-bottom: 2em;
	}
	.wrapper-mark .mark img {
		width: 40%;
		height: auto;
	}
	.wrapper-mark .txt {
		margin-bottom: 2em;
	}
	.wrapper-mark .pic {
		text-align: center;
	}
	.wrapper-mark .pic img {
		width: 70%;
		height: auto;
	}
	.box_graf {		
		width: 100%;
		padding-bottom: 90%;
		background: url("../images/img_about.png") no-repeat 0 12em;
		background-size: 100% auto;
	}
}