@charset "UTF-8";

@keyframes txtloop {
	0% {
		transform: translateX(100%);
	}

	to {
		transform: translateX(-100%);
	}
}

@keyframes txtloop2 {
	0% {
		transform: translateX(0);
	}

	to {
		transform: translateX(-200%);
	}
}

#header {
	background: rgba(255, 255, 255, .85);
	backdrop-filter: blur(4px);
}

/*PC*/
@media print, screen and (min-width: 768px) {
	#hed .hed_img .bg_img {
		background-image: url("../images/sdgs/main_img.jpg");
	}

	article {
		overflow: hidden;
	}

	.loop_wrap {
		display: flex;
		width: 100%;
		overflow: hidden;
		margin: 0 auto 0;
	}

	.loop_wrap div {
		flex: 0 0 auto;
		white-space: nowrap;
		font-size: 14rem;
		font-weight: 200;
		line-height: .9;
		overflow: hidden;
		color: rgba(0, 0, 0, .05);
	}

	.loop_wrap div:nth-child(odd) {
		animation: txtloop 70s -35s linear infinite;
	}

	.loop_wrap div:nth-child(even) {
		animation: txtloop2 70s linear infinite;
	}

	#sdgs {
		margin: 0 auto 220px;
	}

	#sdgs .section_wrap {
		width: 1000px;
		margin: auto;
	}

	#sdgs .section_wrap .block {
		background: #FFF;
		padding: 50px;
		box-sizing: border-box;
		margin: 0 auto 60px;
	}


	#sdgs .section_wrap h2 {
		font-size: 30px;
		line-height: 1;
		font-weight: 500;
		margin: 0px auto 50px;
		letter-spacing: .2rem;
	}

	#sdgs .section_wrap h3 {
		font-size: 20px;
		font-weight: 700;
		line-height: 1;
		margin: 0 0 20px;
	}

	#sdgs .section_wrap p {
		margin-bottom: 60px;
	}

	#sdgs .section_wrap p:last-child {
		margin-bottom: 0;
	}

	#sdgs .section_wrap .box {
		background: url("../images/com/bg_contact.jpg") 0 0 repeat;
		padding: 1.2rem;
		box-sizing: border-box;
	}

	#sdgs .section_wrap .box p {
		font-size: 1.2rem;
		font-weight: bold;
		color: #FFF;
	}

}


/*sp*/
@media only screen and (max-width: 767px) {
	#hed .hed_img .bg_img {
		background-image: url("../images/sdgs/main_img_s.jpg");
	}

	#sdgs {
		margin: 0 auto 60px;
	}

	#sdgs .section_wrap {
		width: 100%;
		margin: 0;
	}

	article {
		overflow: hidden;
	}

	.loop_wrap {
		display: flex;
		width: 100%;
		overflow: hidden;
		margin: 0 auto 0;
	}

	.loop_wrap div {
		flex: 0 0 auto;
		white-space: nowrap;
		font-size: 4rem;
		font-weight: 200;
		line-height: .9;
		overflow: hidden;
		color: rgba(0, 0, 0, .05);
	}

	.loop_wrap div:nth-child(odd) {
		animation: txtloop 70s -35s linear infinite;
	}

	.loop_wrap div:nth-child(even) {
		animation: txtloop2 70s linear infinite;
	}

	#sdgs .section_wrap {
		width: 90%;
		margin: auto;
	}

	#sdgs .section_wrap .block {
		background: #FFF;
		padding: 20px;
		box-sizing: border-box;
		margin: 0 auto 30px;
	}


	#sdgs .section_wrap h2 {
		font-size: 20px;
		line-height: 1;
		font-weight: 500;
		margin: 0px auto 20px;
		letter-spacing: .2rem;
	}

	#sdgs .section_wrap h3 {
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		margin: 0 0 10px;
	}

	#sdgs .section_wrap p {
		margin-bottom: 30px;
	}

	#sdgs .section_wrap p:last-child {
		margin-bottom: 0;
	}

	#sdgs .section_wrap .box {
		background: url("../images/com/bg_contact.jpg") 0 0 repeat;
		padding: 15px;
		box-sizing: border-box;
	}

	#sdgs .section_wrap .box p {
		font-weight: bold;
		color: #FFF;
	}

}