#supporter-main .toc-h2 {
    margin-top: 2.5em;
}

#supporter-main .yokobtn,
#supporter-main .yokobtn-pink {
    margin-top: 2.5em;
}

.hero-img img {
    object-position: center bottom;
}


/* ======================
== example-wrap =========== */

.example-wrap {
    display: flex;
    justify-content: space-between;
    margin-top: 3em;
}

.example-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.example-inner p {
    margin-top: 1em;
}

@media screen and (min-width: 768px) {
    .example-wrap {
        flex-wrap: nowrap;
    }
}

@media (max-width: 767px){
    .example-wrap {
        flex-wrap: wrap;
        gap: 20px 6%;
        padding: 0 10px;
    }

    .example-inner {
        width: 45%;
    }

    .example-inner picture img {
        width: 100%;
        height: auto;
        max-width: 250px;
    }
}

@media (max-width: 500px){
    .example-wrap {
        padding: 0;
    }
}

@media (max-width: 350px){
    .example-wrap {
        flex-direction: column;
    }
    
    .example-inner {
        width: 100%;
        margin-bottom: 40px;
    }

    .example-inner img {
        max-width: 180px;
    }
}


/* ======================
== example-list ========= */

.example-list {
    text-align: center;
}

.example-list span.marker {
    background: linear-gradient(transparent 50%, #FFF9E5 50%);
}