#top .title{
    position: relative;
}

#top .bubble {
    display: block;
    width: clamp(8rem, 10vw, 12rem);
    position: absolute;
    top: calc(-2 / 3 * clamp(8rem, 10vw, 12rem));
    left: -52%;
    z-index: 1;
    pointer-events: none;
}

#top h2 {
    margin-bottom: .5em;
}

#detail ul {
    margin-bottom: 6rem;
}

#detail li {
    position: relative;
    width: 48%;
    padding: 4rem var(--pd-card) 3rem;
    border: 2px solid var(--c-orange);
    background-color: #fff;
    border-radius: 1rem;
}

#detail li.eyelash {
    border-color: var(--c-blue);
}

#detail h3 {
    position: absolute;
    top: -.85em;
    left: var(--pd-card);
    padding: .1em .5em;
    margin-bottom: .3em;
    background-color: var(--c-orange);
    color: #fff;
    border-radius: .5rem;
}

#detail .eyelash h3 {
    background-color: var(--c-blue);
}

#detail div:has(>dl) {
    padding: 6rem var(--pd-card);
    margin-bottom: 6rem;
    background-color: #fff;
    border-radius: 1rem;
    border: 2px solid #ccc;
}

@media screen and (max-width: 900px) {
    #top .text-center {
        text-align: left;
    }

    #top br {
        display: none;
    }

    #top .bubble {
        left: -7rem;
    }

    #detail .flex-column-sp>* {
        width: 100%;
    }

    #detail h3 {
        top: -.9em;
    }

    #detail ul {
        row-gap: 4rem;
        margin-bottom: 6rem;
    }

    #detail li {
        padding-block: 3rem 2rem;
    }

    #detail div:has(>dl) {
        padding-block: 3rem;
    }
}