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

/*共通*/
.textWrap {
    width: 100%;
    text-align: left;
    font-feature-settings: "palt";
    line-height: 1.6em;
    margin-top: 17px;
}

.titleWrap {
    width: 100%;
    margin: 72px auto 54px;
}

.titleWrap-intro {
    margin-top: 0;
}

.titleWrap img {
    width: 123px;
    display: block;
    margin: 0 auto;
}

.titleWrap  p {
    margin-top: 7px;
    font-size: 23px;
    line-height: 1em;
    text-align: center;
    font-weight: bold;
}

.imgWrap,
.contentsWrap .imgWrap{
    width: 100%;
}

.contentsWrap h5 {
    font-weight: bold;
    font-size: 19px;
    line-height: 1em;
    margin-bottom: 10px;
    text-align: left;
}

.breakLineSp01 {
    font-weight: bold;
}


/*イントロエリア*/
.contentsArea h2 {
    letter-spacing: 0.03em;
}

.contentsArea .inner h3 {
    font-size: 23px;
    font-weight: bold;
}

.contentsArea .inner .introArea .imgWrap {
    margin-top: 39px;
}


/*article01*/
.article01 .imgWrap {
    margin-bottom: 30px;
}


/*article02*/
.article02 .imgWrap {
    margin: 57px auto;
    float: none;
}

.article02 .torikumiWrap .txtBox {
    width: 100%;
    padding-left: 25px;
    position: relative;
}

.article02 .torikumiWrap .txtBox:nth-child(1),
.article02 .torikumiWrap .txtBox:nth-child(2) {
    margin-bottom: 57px;
}


.article02 .torikumiWrap .txtBox h5:before {
    background: #FFf;
    content: "";
    height: 17px;
    width: 17px;
    border: solid 2.5px #3B3938;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
/*    transform: translateY(-50%);*/
}

.article02 .sdgsWrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.article02 .sdgsWrap .imgWrap {
    width: 700px;
}

.article02 .sdgsWrap p {
    font-size: 38px;
    font-weight: bold;
    line-height: 1.1em;
    text-align: center;
}

.article02 .sdgsWrap p span {
    font-size: 23.5px;
    font-weight: bold;
    text-align: center;
}


/*article03*/
.article03 .txtBox:nth-child(2),
.article03 .txtBox:nth-child(3){
    margin-bottom: 57px;
}


/*sumWrap*/
.sumWrap {
    display: flex;
    justify-content: space-between;
  /*  width: 83%;*/
    width: 639px;
    align-items: center;
    margin: 0 auto;
}

.contentsArea .inner .sumWrap .imgWrap {
/*    width: 29%;*/
    width: 128px;
}

.sumWrap p {
    font-size: 22px;
    line-height: 1.6em;
    text-align: left;
    font-weight: bold;
/*    font-feature-settings: "palt";*/
}



/*画面サイズが1100px以下の場合*/
@media screen and (max-width: 1100px) {
    .article02 .sdgsWrap .imgWrap {
        width: 69%;;
    }

}

/*画面サイズが900px以下の場合*/
@media screen and (max-width: 900px) {
    .article02 .sdgsWrap p {
        font-size: 4vw;
    }
    
	.article02 .sdgsWrap p span {
        font-size: 2.5vw;
    }
}

/*画面サイズが800px以下の場合*/
@media screen and (max-width: 800px) {

}

/*画面サイズが780px以下の場合*/
@media screen and (max-width: 780px) {

	
	
}

/*画面サイズが680px以下の場合*/
@media screen and (max-width: 680px) {

	
}

/*画面サイズが600px以下の場合*/
@media screen and (max-width: 600px) {
    .sdgs #mv {
        background-position-x: 34%;
    }
    
    .breakLineSp01 {
        font-weight: bold;
    }
    
    .titleWrap {
        margin: 50px auto 30px;
    }
    
    .titleWrap p {
        margin-top: 0;
    }
    
    .contentsArea .inner h3 {
        font-size: 20px;
        line-height: 1.4em;
        font-feature-settings: "palt";
    }
    
    .contentsArea .inner h3 .small {
        font-size: 14px;
        font-weight: 900;
    }
    
    .contentsWrap h5 {
        line-height: 1.6em;
        font-feature-settings: "palt";
    }
    
    .titleWrap p {
        line-height: 1.4em;
        font-size: 20px
    }
    
    .article02 .torikumiWrap .txtBox h5::before {
        top: 2%;
    }
    
    .sumWrap {
        display: block;
        width: 100%;
    }
    
    .contentsArea .inner .sumWrap .imgWrap {
        width: 30%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    
    .sumWrap p {
        font-size: 19px;
        text-align: center;
    }
}

/*画面サイズが480px以下の場合*/
@media screen and (max-width: 480px) {

    .article02 .sdgsWrap p {
        font-size: 3.5vw;
    }
    
    .article02 .sdgsWrap p span {
        font-size: 2.2vw;
    }
    
}

/*画面サイズが400px以下の場合*/
@media screen and (max-width: 400px) {

}