@charset "utf-8";
.bgCmnTop.lazyloaded{
    background: url("../img/sdgs/bgSdgsTop.jpg") no-repeat center;
}
@media only screen and (max-width: 767px){
    .bgCmnTop.lazyloaded{
        background-image: url("../img/sdgs/bgSdgsTop_sp.jpg");
        background-size: cover;
    }
}
@media only screen and (min-width: 768px){
    .wrapper1080{
        width: calc(100% - 100px);
        max-width: 1080px;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 767px){
    .wrapper1080{
        width: 100%;
    }
    .wrapperSp {
        width: 92%;
        margin: 0 auto;
    }
    #container{
        padding-bottom:0;
    }
}
/* secSdgs */
.secSdgs{
    padding-top: 5px;
    padding-bottom: 150px;
}

/* secHero */
.secHero{
    width: 100%;
    color: #fff;
}
.secHero.lazyloaded{
    background: url(../img/sdgs/bgHero.jpg) center top no-repeat;
}
.secHero .Inner{
    padding-top: 78px;
    padding-bottom:130px;
}
.secHero .tit{
    text-align: center;
    font-size:26px;
    line-height: calc(40 / 26);
    font-weight: bold;
}
.secHero .titEng{
    font-size:32px;
    line-height: calc(40 / 32);
}
.secHero .txtbox{
    width: 100%;
    padding: 0 50px;
    text-align: left;
    margin-top: 33px;
}
.secHero .txt{
    font-size: 16px;
    line-height: calc(40 / 16);
}
.secHero .imgBox{
    width: 100%;
    max-width: 1080px;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 65px;
    border-radius: 20px;
}
@media only screen and (max-width: 767px){
    .secSdgs{
        padding-top: 25px;
        padding-bottom: 52px;
    }
    
    /* secHero */
    .secHero{
        width: 100%;
        color: #fff;
    }
    .secHero.lazyloaded{
        background-image: url(../img/sdgs/bgHero_sp.jpg);
        background-size: cover;
        background-position: center bottom;
    }
    .secHero .Inner{
        padding-top: 44px;
        padding-bottom: 60px;
    }
    .secHero .tit{
        font-size:16px;
        line-height: calc(30 / 16);
    }
    .secHero .titEng{
        font-size:16px;
        line-height: calc(30 / 16);
    }
    .secHero .txtbox{
        padding:0;
        margin-top: 20px;
    }
    .secHero .txt{
        font-size: 14px;
        line-height: calc(30 / 14);
    }
    .secHero .imgBox{
        margin-top: 36px;
        border-radius: 10px;
        max-width: 100%;
    }
}
/* secMiddle */
.secMiddle{
    margin-top:1px;
    background-color:#25231f;
    color: #fff;
}
.secMiddle .Inner{
    width: 100%;
    text-align: center;
    padding: 35px 0;
}
.secMiddle .middletxt{
    font-size:20px;
    line-height: calc(30 / 20);
    font-weight: bold;
}
@media only screen and (max-width: 767px){
    .secMiddle{
        margin-top:2px;
    }
    .secMiddle .Inner{
        padding: 11px 0;
    }
    .secMiddle .middletxt{
        font-size:14px;
        line-height: calc(26 / 14);
    }
}
/* secContent */
.secContent{
    margin-top: 100px;
}
.secContent .Inner{}
/* secContentTitle */
.secContentTitle{
    width: 100%;
    text-align: center;
    position: relative;
    padding-top: 67px;
}
.secContentTitle .TitleIn{
    position: relative;
    z-index: 3;
    color: #25231f;
}
.secContentTitle .titEng{
    font-size:130px;
    line-height: 1;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: -30px;
    color: #f5f5f5;
    z-index: 1;
}
.secContentTitle .subtit{
    font-size: 28px;
    line-height: calc(35 / 28);
    font-weight: bold;
    letter-spacing: 0.05em;
}
.secContentTitle .tit{
    font-size:32px;
    line-height: calc(44 / 32);
    font-weight: bold;
    margin-top: 10px;
    letter-spacing: 0.1em;
}
.secContentTitle .y_tit{
    font-size: 44px;
    line-height: calc(44 / 44);
    color:#c3d60b;
}
.secContentTitle .middletit{
    font-size: 36px;
    line-height: calc(44 / 36);
}
.secContentTitle .Iconlist{
    max-width: calc((140px * 5) + (25px * 4));
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}
.secContentTitle .iconitem{
    width: calc((100% - 100px) / 5);
    margin-right: 25px;
}
@media only screen and (min-width: 1216px){
    .secContentTitle .iconitem:nth-child(5n),
    .secContentTitle .iconitem:last-child{
        margin-right: 0;
    }
    .secContentTitle .iconitem:nth-child(n + 6){
        margin-top: 25px;
    }
}
@media only screen and (max-width: 767px){
    .secContent{
        margin-top: 50px;
    }
    .secContent .Inner{}
    /* secContentTitle */
    .secContentTitle{
        padding-top: 46px;
    }
    .secContentTitle .titEng{
        font-size:80px;
        top: -12px;
    }
    .secContentTitle .subtit{
        font-size: 18px;
        line-height: calc(28 / 18);
    }
    .secContentTitle .tit{
        font-size:26px;
        line-height: calc(40 / 26);
        margin-top: 4px;
    }
    .secContentTitle .y_tit{
        font-size: 40px;
    }
    .secContentTitle .middletit{
        font-size:26px;
        line-height: calc(40 / 26);
    }
    .secContentTitle .Iconlist{
        max-width: 100%;
        width: calc((335 / 375) * 100vw);
        flex-wrap: wrap;
        margin-top: 21px;
    }
    .secContentTitle .iconitem{
        width: calc((100% - 26px) / 3);
        margin-right: 13px;
    }
    .secContentTitle .iconitem:nth-child(3n),
    .secContentTitle .iconitem:last-child{
        margin-right: 0;
    }
    .secContentTitle .iconitem:nth-child(n + 4){
        margin-top:16px;
    }
}
/* secContentlist */
.secContentlist{
    margin-top: 95px;
}
.secContentlist .contentItem{

}
.secContentlist .contentItem + .contentItem{
    margin-top: 119px;
}
.secContentlist .Onbox{
    width: 100%;
    position: relative;
    padding-top: 50px;
}
.secContentlist .Onbox::after{
    content: "";
    position: absolute;
    width: 1080px;
    height: 540px;
    top: 0;
    z-index: 1;
}
.secContentlist.lazyloaded .Onbox::after{
    background: url(../img/sdgs/bgOnbox.png) repeat left top;
}
.secContentlist .backImg{
    width:1080px;
    position: absolute;
    top: 50px;
    z-index: 2;
}
.secContentlist .ontxtbox{
    position: relative;
    z-index: 3;
    padding-top: 285px;
}
.secContentlist .imgIcon{
    width: 256px;
}
.secContentlist .tit{
    font-size:34px;
    line-height: calc(50 / 34);
    font-weight: bold;
    color: #fff;
    margin-top: 23px;
    display: flex;
    flex-direction: column;
    width: fit-content;
}
.secContentlist .titIn{
    display: inline-block;
    background-color: #313131;
    padding: 10px 15px;
    width: fit-content;
}
.secContentlist .titIn + .titIn{
    margin-top: 5px;
}
/* .secContentlist .contentItem:nth-child(2n) .imgIcon{
    margin-left: auto;
}
.secContentlist .contentItem:nth-child(2n) .tit{
    align-items: flex-end;
    margin-left: auto;
} */
@media only screen and (min-width: 768px){
    /* .secContentlist .contentItem:nth-child(2n + 1) .backImg{
        right: 0;
    }
    .secContentlist .contentItem:nth-child(2n + 1) .ontxtbox{
        padding-left: 30px;
    } */
    /* .secContentlist .contentItem:nth-child(2n) .Onbox::after{
        right: 0;
        left: auto;
    }
    .secContentlist .contentItem:nth-child(2n) .backImg{
        left: 0;
    }
    .secContentlist .contentItem:nth-child(2n) .ontxtbox{
        padding-right: 30px;
    } */
    .secContentlist .contentItem .backImg{
        right: 0;
    }
    .secContentlist .contentItem .ontxtbox{
        padding-left: 30px;
    }
    .secContentlist .titIn.spBox{display: none;}
}
.secContentlist .Underbox{
    margin-top: 52px;
}
.secContentlist .underlist{
    display: flex;
    flex-wrap: wrap;
}
.secContentlist .underItem{
    width: calc((100% - 80px) / 3);
    margin-right: 40px;
}
.secContentlist .underItem:nth-child(3n),
.secContentlist .underItem:last-child{
    margin-right: 0;
}
.secContentlist .underItem:nth-child(n + 4){
    margin-top: 40px;
}
.secContentlist .underImg{
    width: 100%;
}
.secContentlist .undertxtbox{
    margin-top: 14px;
    color: #313131
}
.secContentlist .undertit{
    font-size:18px;
    line-height: calc(30 / 18);
    font-weight: bold;
}
.secContentlist .undertxt{
    margin-top: 15px;
    font-size:14px;
    line-height: calc(30 / 14);
}
@media only screen and (max-width: 767px){
    .secContentlist{
        margin-top: 80px;
    }
    .secContentlist .contentItem + .contentItem{
        margin-top: 46px;
    }
    .secContentlist .Onbox{
        width:calc(335 / 375 * 100vw);
        margin: 0 auto;
        padding-top: 0;
    }
    .secContentlist .Onbox::after{
        display: none;
    }
    .secContentlist .backImg{
        width:calc(335 / 375 * 100vw);
        top: 0px;
    }
    .secContentlist .contentItem:nth-child(2n + 1) .backImg{
        right: calc(0% - (20 / 375 * 100vw));
    }
    .secContentlist .contentItem:nth-child(2n) .backImg{
        left: calc(0% - (20 / 375 * 100vw));
    }
    .secContentlist .ontxtbox{
        padding-top: calc(((260 / 375 * 100vw) - (((60 * 2) / 375) * 100vw) - ((10 / 375) * 100vw)) - 25px);
    }
    .secContentlist .imgIcon{
        width: 103px;
    }
    .secContentlist .tit{
        font-size:16px;
        line-height: calc(20 / 16);
        margin-top: 10px;
    }
    .secContentlist .titIn{
        padding: 5px 6px;
    }
    .secContentlist .titIn + .titIn{
        margin-top: 4px;
    }
    .secContentlist .Underbox{
        margin-top: 31px;
    }
    .secContentlist .underlist{
        display: block;
        width: calc(335 / 375 * 100vw);
        margin: 0 auto;
    }
    .secContentlist .underItem{
        width: 100%;
        margin-right: 0px;
    }
    .secContentlist .underItem:nth-child(n + 2),
    .secContentlist .underItem:nth-child(n + 4){
        margin-top: 22px;
    }
    .secContentlist .undertxtbox{
        margin-top: 16px;
    }
    .secContentlist .undertit{
        font-size:15px;
        line-height: calc(28 / 15);
    }
    .secContentlist .undertxt{
        margin-top: 5px;
        font-size: 14px;
        line-height: calc(28 / 14);
    }

    /* ▼2個目限定 */
    .secContentlist .contentItem:nth-child(6) .ontxtbox,
    .secContentlist .contentItem:nth-child(2) .ontxtbox{
        padding-top: calc((260 / 375 * 100vw) - 159px);
    }
}
/* ▼250704 */
.secTextbox{
    text-align: center;
    margin-top: 80px;
}
.secTextbox .tit{
    font-size: 26px;
    line-height: calc(40 / 26);
    font-weight: bold;
}
.secTextbox .txt{
    font-size: 15px;
    line-height: calc(30 / 15);
    margin-top: 30px;
}
@media only screen and (max-width: 767px){
    .secTextbox{
        margin-top: 40px;
    }
    .secTextbox .tit{
        font-size: 26px;
        line-height: calc(40 / 26);
    }
    .secTextbox .txt{
        text-align: left;
        font-size: 13px;
        line-height: calc(26 / 13);
        margin-top: 20px;
    }
}
.secContentlist .ItemTitle{
    text-align: center;
}
.secContentlist .ItemTitle .titJpn{
    font-size: 32px;
    line-height: calc(44 / 32);
    font-weight: bold;
}
.secContentlist .ItemTitle .Ltit{
    font-size: 44px;
    line-height: calc(44 / 44);
    padding-right: 20px;
}
.secContentlist .ItemTitle + .Onbox{
    margin-top: 50px;
}
@media only screen and (max-width: 767px){
    .secContentlist .ItemTitle{
        text-align: center;
    }
    .secContentlist .ItemTitle .titJpn{
        font-size: 18px;
        line-height: calc(28 / 18);
    }
    .secContentlist .ItemTitle .Ltit{
        font-size: 26px;
        line-height: calc(40 / 26);
        padding: 0;
    }
    .secContentlist .ItemTitle + .Onbox{
        margin-top: 20px;
    }
}
@media only screen and (min-width: 768px){
    .secContentlist .Iconlist{
        display: flex;
    }
    .secContentlist .imgIcon{
        width: 120px;
    }
    .secContentlist .imgIcon + .imgIcon{
        margin-left: 20px;
    }
}
@media only screen and (max-width: 767px){
    .secContentlist .Iconlist{
        display: flex;
        flex-wrap: wrap;
        width: calc(200 / 375 * 100vw);
    }
    .secContentlist .imgIcon{
        width: calc((100% - 20px) / 3);
        margin-right: 10px;
    }
    .secContentlist .imgIcon:nth-child(3n){
        margin-right: 0;
    }
    .secContentlist .imgIcon:nth-child(n + 4){
        margin-top: 10px;
    }
}