@charset "utf-8";



/*--------------------------------------------------
  Common
--------------------------------------------------*/
#sustainable{
	background: url(../img/bg_sustainable.jpg);
	position:relative;
	z-index: 0;
}
#sustainable:before{
	content:"";
	background: url(../img/bg_leaf.png);
	background-size: contain;
	display: inline-block;
	position:absolute;
	width:100%;
	height:33vw;
    bottom: 0;
    z-index: 1;
}
#sustainable:after{
	content:"";
	background:url(../img/img_bar_full.jpg);
	display: inline-block;
	position:absolute;
	bottom:0;
	width:100%;
	height:6px;
	z-index: 2;
}
#sustainable .box{
	width:700px;
}
h3.copy{
	font-size: 2.2rem;
    letter-spacing: 0.2rem;
    text-align: center;
    margin-bottom: 2rem;
}
h3.copy span.s{
	font-size:1.5rem;
}
.nav_wrap {
    background: #fff;
}
.c_F0007A{
	color:#F0007A;
}
.c_009A2C{
	color:#009A2C;
}
.c_FFA000{
	color:#FFA000;
}
.c_FE4E32{
	color:#FE4E32;
}
.c_00A8DE{
	color:#00A8DE;
}
.c_00B43D{
	color:#00B43D;
}
.c_FF6000{
	color:#FF6000;
}
.c_F40A8F{
	color:#F40A8F;
}
.c_004D8D{
	color:#004D8D;
}
.c_FF9E00{
	color:#FF9E00;
}
.c_FC1700{
	color:#FC1700;
}
.c_07AE23{
	color:#07AE23;
}



@media screen and (max-width:799px) {
	/*SP-Tablet*/

}
@media screen and (max-width:479px) {
	/*SP*/
	#sustainable .box{
		width:90%;
	}
	#sustainable:before{
		content:"";
		background: url(../img/bg_leaf_sp.png);
		background-size: contain;
		height:47vw;
	}
}

/*--------------------------------------------------
  Top Title
--------------------------------------------------*/

#top_sustainable_title{
	background:#F9A662;
	padding: 13rem 0 8rem;
	position:relative;
}
#top_sustainable_title h2{
    font-size: 2rem;
    color: #fff;
    text-align: center;
}
#top_sustainable_title:before{
	content:"";
	background:url(../img/img_title_chara.png);
	background-size: cover;
    width: 101px;
    height: 134px;
    display: inline-block;
	bottom: -10%;
    left: 75%;
    position: absolute;
	z-index: 2;
}
#top_sustainable_title:after{
	content:"";
	background:url(../img/img_bar_full.jpg);
    width: 100%;
    height: 6px;
    display: inline-block;
    bottom: 0;
    left: 0;
    position: absolute;
}

@media screen and (max-width:799px) {
	/*SP-Tablet*/

}

@media screen and (max-width:479px) {
	/*SP*/
	#top_sustainable_title:before{
		width: 101px;
		height: 134px;
		bottom: -10%;
		left: auto;
		right: 5%;
	}
}


/*--------------------------------------------------
  Sustainable Content
--------------------------------------------------*/
#sustainable_content{
	padding-top: 5rem;
}
#sustainable_content .lead{
	font-size:1.1rem;
	text-align: center;
	margin-bottom: 2rem;
}
#sustainable_content .friendly{
	justify-content: center;
	margin-bottom: 5rem;
}
#sustainable_content .friendly img{
    width: 35%;
    margin: 0 3%;
}


@media screen and (max-width:799px) {
	/*SP-Tablet*/

}

@media screen and (max-width:479px) {
	/*SP*/
	#sustainable_content .friendly img{
		width: 45%;
		margin: 0 2.5%;
	}
}



/*--------------------------------------------------
  SDGs
--------------------------------------------------*/
#sdgs{

}
#sdgs .border h3{
	position: relative;
    z-index: 0;
    margin-bottom: 8rem;
}
#sdgs .border h3 div{
	position:relative;
	background: url(../img/bg_sustainable.jpg);
	z-index: 0;
	display: inline-block;
	padding: 0 2rem;
}
#sdgs .border h3:before{
	content:"";
	background:url(../img/img_bar_full.jpg);
    width: 100%;
    height: 6px;
	display: inline-block;
	position:absolute;
	left: 0;
    top: 50%;
	z-index: -1;
}
#sdgs .about{
	background:#fff;
	text-align: center;
	padding:1rem;
	border-radius:30px;
	position:relative;
	margin-top: 64px;
	margin-bottom:3rem;
}
#sdgs .about:after{
    content: "";
    background: url(../img/img_about_chara.png);
	background-size: contain;
    display: inline-block;
    height: 64px;
    width: 66px;
    position: absolute;
    top: -64px;
}
#sdgs .about h4{
	color:#006CBC;
	font-size:1.25rem;
	position:relative;
	display: inline-block;
	z-index: 1;
	margin-bottom:1rem;
}
#sdgs .about h4 span{
	font-size:1.5rem;
}
#sdgs .about h4:after{
    content: "";
    background: #FFF476;
    width: 100%;
    position: absolute;
    bottom: 0;
    display: inline-block;
    height: 50%;
    left: 0;
	z-index: -1;
}
#sdgs .about p{
	font-size:0.875rem;
	line-height:2;
}
#sdgs .images {
	margin-bottom:4rem;
}
#sdgs .images li{
	margin-bottom:2rem;
}
#sdgs .ink{
	background:#fff;
	padding:2rem;
	margin-bottom: 2.5rem;
	position: relative;
    z-index: 1000;
}
#sdgs .ink > div{
	justify-content: space-between;
	align-items: center;
	padding-bottom:1rem;
	margin-bottom:1rem;
	border-bottom: 1px solid #278E2A;
}
#sdgs .ink h4{
	font-size:1.3rem;
	color:#278E2A;
}
#sdgs .ink .logo{
	max-width:175px;
}
#sdgs .ink .text{
	font-size:0.7rem;
	line-height: 2;
}
#sdgs .ink a{
	color: #278E2A;
    text-decoration: underline;
    font-size: 0.7rem;
    text-align: right;
    width: 100%;
    display: inline-block;
}
#sdgs .slogan{
    font-size: 1.4rem;
    color: #278E2A;
    line-height: 2;
    text-align: center;
    padding-bottom: 13rem;
}

@media screen and (max-width:799px) {
	/*SP-Tablet*/

}

@media screen and (max-width:479px) {
	/*SP*/
	#sdgs .about h4 {
		font-size: 4.5vw;
	}
	#sdgs .about p {
		font-size: 3.3vw;
	}
	#sdgs .border h3:before{
		content:none;
	}
	#sdgs .ink h4{
		margin-bottom:1rem;
		font-size: 4.8vw;
	}
	#sdgs .ink > div{
		justify-content: center;
	}
}