.esg_catchphrase{
    display:flex;
    flex-direction: row;
    column-gap: 25px;
    padding:40px 55px;
    background-color: #f7f7f7;
    border-radius:30px;
}

.esg_catchphrase [class*=quotes-]{
    width:60px;
    height:50px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size:contain;
    transition: all 0.5s;
}
.esg_catchphrase [class~=quotes-start]{
    background-image:url(../images/quotes-start.png);
}
.esg_catchphrase [class~=quotes-end]{
    background-image:url(../images/quotes-end.png);
}

.esg_catchphrase .catchphrase_text{
    flex:1;
    padding:0 1.5em;
}
.esg_catchphrase .catchphrase_text > p{
    margin:0 0 !important;
    font-size:1.2em;
    text-align: center;
    line-height: 1.8;
    word-break: keep-all;
}

@media all and (max-width:960px){
    .esg_catchphrase{
        column-gap: 18px;
        padding:30px 45px;
        border-radius:20px;
    }
    .esg_catchphrase .catchphrase_text > p{
        font-size:1em;
        line-height: 1.6;
    }
}

@media all and (max-width:640px){
    .esg_catchphrase{
        column-gap: 10px;
        padding:20px 35px;
        border-radius:15px;
    }
    .esg_catchphrase .catchphrase_text{
        padding:0 0.75em;
    }
    .esg_catchphrase [class*=quotes-]{
        width:40px;
        height:30px;
        transition: all 0.5s;
    }
}


.esg_rules{
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    margin:30px 0;
    gap: 30px;
}
.esg_rules > div{
    display:flex;
    width:100%;
}
.esg_rules > div > dl{
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}
.esg_rules > div > dl > dt{
    display: flex;
    align-items: center;
    justify-content: center;
    width:278px;
    flex:0 0 278px;
    height:100%;
    border-radius:30px;
    font-size:26px;
    color:#fff;
    gap:25px;
    transition: all 0.5s;    
}
.esg_rules > div:nth-child(odd) > dl > dt{
    background-color:#00b60c;
}
.esg_rules > div:nth-child(even) > dl > dt{
    background-color:#008075;
}
.esg_rules > div > dl > dd{
    flex: 1;
    padding: 1.8em 3em;
    background-color: #f7f7f7;
    border: 3px solid #ddd;
    border-radius: 25px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 18px;
}
.esg_rules > div:nth-child(odd) > dl > dd{
    border-color:#00b60c;
}
.esg_rules > div:nth-child(even) > dl > dd{
    border-color:#008075;
}

@media (max-width:1024px){
    .esg_rules > div > dl > dt{
        flex:0 0 200px;
        height:150px;
        transition: all 0.5s;
    }
}
@media (max-width:768px){
    .esg_rules > div > dl {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: center;
        justify-content: flex-start;
        gap:0px;
    }
    .esg_rules > div > dl > dt{
        height:auto;
        flex:1;
        padding:0.5em 1em;
        width:100%;
        border-radius:25px 25px 0 0;
        font-size:20px;
    }
    .esg_rules > div > dl > dt > img{
        width:40px;
    }
    .esg_rules > div > dl > dt br{display:none;}
    .esg_rules > div > dl > dd{
        height:auto;
        flex:1;
        padding:0.5em 1em;
        width:100%;
        border-radius:0 0 25px 25px;
        font-size:17px;
    }
}