@charset "UTF-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
}

.pc-v{
	display: block;
}

.smp-v{
	display: none;
}

section.section_lv1.bg_gray {
    display: none;
}

section.sdgs {
	width: 100%;
	overflow: hidden;
	padding: 3rem 0 0 0;
}

h1.sub_header_ttl img {
    margin: 0 auto;
}

p.sdgs-capt {
    text-align: center;
    line-height: 2;
    font-size: 22px;
    padding: 0 0 3rem 0;
}

h2.sdgs-h2 {
    text-align: center;
    padding: 12rem 0 10rem 0;
    position: relative;
    font-size: 2.5rem;
    letter-spacing: 0.5rem;
    line-height: 1.8;
    margin: 0;
	font-weight: 600;
}
h2.sdgs-h2 span{
	color: #0798D8;
}


h2.sdgs-h2:before{
	content: "";
	width: 1px;
	height: 8rem;
	max-height: 120px;
	background: #0798D8;
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

h2.sdgs-h2 img {
    max-width: 50%;
    margin: 0 auto 2rem;
    display: block;
}

.sdgs-box {
    display: flex;
    margin: 0 0 10rem 0;
	position: relative;
}

.sdgs-box:last-of-type{
	margin-bottom: 0;
}

.sdgs-img {
    position: absolute;
	width: 34rem;
	z-index: 1;
}

.sdgs-img img {
    width: 100%;
}

.sdgs-txt {
    width: 60%;
    box-sizing: border-box;
    background: #555;
    position: relative;
    z-index: 0;
	min-height: 25rem;
}


.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-txt {
    border-bottom-right-radius: 20px;
	padding: 3rem 8rem 4rem 22rem;
	margin: 0 40% 0 0;
}

.sdgs-block .sdgs-box:nth-of-type(even) .sdgs-txt {
 	border-bottom-left-radius: 20px;
	padding: 3rem 22rem 4rem 8rem;
	margin: 0 0 0 40%;
}

.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-img {
	top: -4rem;
	left: 55%;
}

.sdgs-block .sdgs-box:nth-of-type(even) .sdgs-img {
	top: -4rem;
	right: 55%;
}

.sdgs-block .sdgs-box:first-of-type .sdgs-txt {
    background: #FCC331;
}

.sdgs-block .sdgs-box:nth-of-type(2) .sdgs-txt {
    background: #A21942;
}

.sdgs-block .sdgs-box:nth-of-type(3) .sdgs-txt {
    background: #3F7E44;
}

.sdgs-block .sdgs-box:nth-of-type(4) .sdgs-txt {
    background: #BF8B2E;
}

.sdgs-block .sdgs-box:nth-of-type(5) .sdgs-txt {
    background: #C5192D;
}

.sdgs-block .sdgs-box:nth-of-type(6) .sdgs-txt {
    background: #19486A;
}

.sdgs-block .sdgs-img:before {
    display: block;
    content: "";
    width: 170px;
    height: 70px;
    position: absolute;
    right: 0;
    bottom: 20px;
}

.sdgs-block .sdgs-box:first-of-type .sdgs-img:before{
	background: url(https://engagingtoys.jp/wp-content/themes/engaging_toys/images/sdg-img001-acc.png) center center;
	background-repeat: no-repeat;
	right: -40px;
    bottom: 18px;
}

.sdgs-block .sdgs-box:nth-of-type(2) .sdgs-img:before{
	background: url(https://engagingtoys.jp/wp-content/themes/engaging_toys/images/sdg-img002-acc.png) center center;
	background-repeat: no-repeat;
	left: -70px;
    bottom: 18px;
}
.sdgs-block .sdgs-box:nth-of-type(3) .sdgs-img:before{
	background: url(https://engagingtoys.jp/wp-content/themes/engaging_toys/images/sdg-img003-acc.png) center center;
	background-repeat: no-repeat;
	right: -40px;
    bottom: 18px;
}
.sdgs-block .sdgs-box:nth-of-type(4) .sdgs-img:before{
	background: url(https://engagingtoys.jp/wp-content/themes/engaging_toys/images/sdg-img004-acc.png) center center;
	background-repeat: no-repeat;
	left: -70px;
    bottom: 18px;
}
.sdgs-block .sdgs-box:nth-of-type(5) .sdgs-img:before{
	background: url(https://engagingtoys.jp/wp-content/themes/engaging_toys/images/sdg-img005-acc.png) center center;
	background-repeat: no-repeat;
	right: -40px;
    bottom: 18px;
}
.sdgs-block .sdgs-box:nth-of-type(6) .sdgs-img:before{
	background: url(https://engagingtoys.jp/wp-content/themes/engaging_toys/images/sdg-img006-acc.png) center center;
	background-repeat: no-repeat;
	left: -70px;
    bottom: 18px;
}


.sdgs-txt dl{
	margin: 0;
	color: #fff;
}

.sdgs-txt dl dt{
	margin: 0 0 1.5rem 0;
}

.sdgs-txt dl dt figure {
    display: flex;
    align-items: center;
	margin: 0;
}

.sdgs-txt dl dt figure img{
	border: 6px solid #fff;
	margin: 0 20px 0 0;
}

.sdgs-txt dl dt figure figcaption {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.4;
}

.sdgs-txt dl dd{
	margin: 0 0 0 0;
	font-size: 1.2rem;
	line-height: 2;
}


.sdgs-txt dl dd.sdgs-txt-link {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
	margin: 1rem 0 0 0;
}

.sdgs-txt dl dd.sdgs-txt-link a {
    border: 1px solid #fff;
    line-height: 1;
    padding: 15px;
    box-sizing: border-box;
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    width: 48%;
    margin: 0;
	text-align: center;
}

.sdgs-txt dl dd.sdgs-txt-link a:hover{
	background: #fff;
	color: #444;
}

.sdgs-bnr {
    padding: 10rem 0;
    text-align: center;
}
.sdgs-bnr a {
    display: inline-block;
}


@media (max-width:1440px){
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-txt {
		padding: 3rem 8rem 4rem 12rem;
	}
	.sdgs-block .sdgs-box:nth-of-type(even) .sdgs-txt {
		padding: 3rem 12rem 4rem 8rem;
	}
	.sdgs-txt {
		min-height: 22rem;
	}
	.sdgs-txt dl dt figure figcaption {
		font-size: 1.8rem;
	}
	.sdgs-txt dl dt figure img {
		height: 6rem;
	}
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-img {
		left: 52%;
	}
	.sdgs-block .sdgs-box:nth-of-type(even) .sdgs-img {
		right: 52%;
	}
	.sdgs-txt dl dd {
		font-size: 1rem;
	}
	.sdgs-txt dl dd.sdgs-txt-link a {
		padding: 15px 0;
		font-size: 0.8rem;
		width: 49%;
	}
}

@media (max-width:1280px){
	p.sdgs-capt {
		font-size: 1rem;
	}
	h2.sdgs-h2 {
		font-size: 2.2rem;
	}
	h2.sdgs-h2 img {
		max-width: 45%;
	}
	.sdgs-box {
		margin: 0 0 8rem 0;
	}
	.sdgs-img {
		width: 28rem;
	}
	.sdgs-txt {
		width: 65%;
	}
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-txt {
		margin: 0 35% 0 0;
		padding: 3rem 7rem 4rem 12rem;
	}
	.sdgs-block .sdgs-box:nth-of-type(even) .sdgs-txt {
		margin: 0 0 0 35%;
		padding: 3rem 12rem 4rem 7rem;
	}
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-img {
		left: 58%;
	}
	.sdgs-block .sdgs-box:nth-of-type(even) .sdgs-img {
		right: 58%;
	}
	.sdgs-txt dl dt figure img {
		height: 5rem;
		border: 4px solid #fff;
	}
	.sdgs-txt dl dt figure figcaption {
		font-size: 1.6rem;
	}

}

@media (max-width:768px){
	section.sdgs {
		width: 100%;
		overflow: hidden;
	}
	h2.sdgs-h2 {
		padding: 9rem 0 10rem 0;
		font-size: 2rem;
	}
	h2.sdgs-h2:before {
		height: 5rem;
	}
	h2.sdgs-h2 img {
		max-width: 60%;
	}
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-txt {
		padding: 3rem 6rem 4rem 5rem;
	}
	.sdgs-block .sdgs-box:nth-of-type(even) .sdgs-txt {
		padding: 3rem 5rem 4rem 6rem;
	}
	.sdgs-img {
		width: 25rem;
	}
	.sdgs-txt {
		width: 85%;
		min-height: 18rem;
	}
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-txt {
		margin: 0 15% 0 0;
		padding: 2rem 20rem 4rem 10rem;
	}
	.sdgs-block .sdgs-box:nth-of-type(even) .sdgs-txt {
		margin: 0 0 0 15%;
		padding: 2rem 10rem 4rem 20rem;
	}
	
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-img {
		left: 60%;
	}
	
	.sdgs-block .sdgs-box:nth-of-type(even) .sdgs-img {
		right: 60%;
	}
	
	.sdgs-txt dl dt figure figcaption {
		font-size: 1.4rem;
	}
	.sdgs-txt dl dd {
		font-size: 0.9rem;
	}
	.sdgs-txt dl dd.sdgs-txt-link a {
		width: 70%;
		margin: 3% 0;
	}
	
	.sdgs-txt dl dd.sdgs-txt-link a:last-of-type {
		margin-bottom: 0;
	}
}

@media (max-width:767px){
	.sub_header_img_wrap img {
		width: auto;
		height: auto;
	}
}

@media (max-width:580px){
	.pc-v{
		display: none;
	}

	.smp-v{
		display: block;
	}
	
	h1.sub_header_ttl img {
		margin: 0 auto;
		max-width: 50%;
	}
	
	p.sdgs-capt {
		font-size: 0.9rem;
		padding: 0 10%;
		margin:  0 0 10% 0;
	}
	.sdgs-box {
		width: 100%;
		padding: 38% 10% 0;
		box-sizing: border-box;
		margin: 0 0 3rem 0;
	}
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-txt, .sdgs-block .sdgs-box:nth-of-type(even) .sdgs-txt {
		margin: 0;
		padding: 2rem;
		padding-top: 8rem;
		width: 100%;
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
	}
	
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-img, .sdgs-block .sdgs-box:nth-of-type(even) .sdgs-img{
		width: 80%;
		top: 0;
		left: 50%;
		right: auto;
		transform: translateX(-47%);
	}
	.sdgs-txt dl dd.sdgs-txt-link a {
		width: 90%;
		margin: 3% auto;
		padding: 22px 0;
		font-size: 0.9rem;
	}
	.sdgs-bnr{
		padding: 5rem 0;
	}
	.sdgs-bnr a img {
		width: 80%;
		margin: 0 auto;
	}
	.sdgs-block .sdgs-img:before {
		width: 100px;
		height: 40px;
		position: absolute;
	}
	.sdgs-block .sdgs-box:first-of-type .sdgs-img:before{
		right: -40px;
		bottom: 18px;
		background-size: contain;
	}

	.sdgs-block .sdgs-box:first-of-type .sdgs-img:before {
		right: 0px;
		bottom: auto;
		left: auto;
		background-size: contain;
	}
	.sdgs-block .sdgs-box:nth-of-type(2) .sdgs-img:before{
		right: 0px;
		bottom: auto;
		left: auto;
		background-size: contain;
		transform: rotate(180deg);
	}
	.sdgs-block .sdgs-box:nth-of-type(3) .sdgs-img:before{
		right: 0px;
		bottom: auto;
		left: auto;
		background-size: contain;
	}
	.sdgs-block .sdgs-box:nth-of-type(4) .sdgs-img:before{
		right: 0px;
		bottom: auto;
		left: auto;
		background-size: contain;
		transform: rotate(180deg);
	}
	.sdgs-block .sdgs-box:nth-of-type(5) .sdgs-img:before{
		right: 0px;
		bottom: auto;
		left: auto;
		background-size: contain;
	}
	.sdgs-block .sdgs-box:nth-of-type(6) .sdgs-img:before{
		right: 0px;
		bottom: auto;
		left: auto;
		background-size: contain;
		transform: rotate(180deg);
	}
}

@media (max-width:480px){
	.sdgs-box {
		margin: 0 0 3rem 0;
	}
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-txt, .sdgs-block .sdgs-box:nth-of-type(even) .sdgs-txt {
		padding-top: 6rem;
	}
	.sdgs-txt dl dt figure img {
		height: 3.8rem;
		margin-right: 15px;
		border: 3px solid #fff;
	}
	.sdgs-txt dl dt figure figcaption {
		font-size: 1.2rem;
	}
	.sdgs-txt dl dd.sdgs-txt-link a {
		width: 100%;
		font-size: 0.8rem;
	}
	.sdgs-bnr a {
		display: inline-block;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10%;
	}
	.sdgs-bnr a img{
		width: 100%;
	}
}

@media (max-width:428px){
	section.sdgs {
		padding: 2rem 0 0 0;
	}
	h1.sub_header_ttl img {
		max-width: 45%;
	}
	p.sdgs-capt {
		padding: 0 5%;
	}
	h2.sdgs-h2 {
		padding: 7rem 0 4rem 0;
		font-size: 1.8rem;
		line-height: 1.4;
	}
	h2.sdgs-h2 img {
		max-width: 80%;
	}
	.sdgs-box {
		padding: 45% 5% 0;
	}
	.sdgs-txt dl dt figure figcaption {
		font-size: 1.1rem;
	}
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-img, .sdgs-block .sdgs-box:nth-of-type(even) .sdgs-img {
		width: 90%;
	}
	.sdgs-block .sdgs-box:nth-of-type(odd) .sdgs-txt, .sdgs-block .sdgs-box:nth-of-type(even) .sdgs-txt {
		padding-bottom: 3rem;
	}
}

@media (max-width:390px){
	
}