@charset "UTF-8";

@media (max-width: 1100px) {
    .graph-row {
        grid-template-columns: 1fr;
    }


}

@media (max-width: 880px) {
    .top-runner-layout {
        grid-template-columns: 1fr;
    }

    .voice-item__text {
        width: 70%;
    }

}

@media (max-width: 800px) {
    .hero-inner {
        grid-template-columns: 1fr;
    }

    .real-case-body {
        flex-direction: column;
    }

    .real-case-col-right {
        max-width: 100%;
    }

    .real-cases-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body {
        font-size: clamp(15px, 4.5vw, 17px);
    }

    .only-pc {
        display: none;
    }

    .only-sp {
        display: block;
    }

    .header-inner {
        flex-wrap: wrap;
    }

    .header-nav {
        flex-wrap: wrap;
    }

    .hero {
        background-image: url(../image/fv-sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        padding: 3em 1em;
    }

    .hero-mock-graph {
        min-height: auto;
        width: 95%;
        margin: auto;
    }

    .section-wrap {
        padding: min(100/750*100vw, 100px) 1em;
        max-width: 1100px;
        width: 100%;
        margin: 0 auto;
    }

    .top-runner-layout {
        padding: 2em 1em;
        gap: 3em;
    }

    .tab-list {
        padding: 0 1em 1em;
    }

    #graphs h2,
    #real-cases h2,
    #flex h2,
    #similar h2 {
        line-height: 1.3;
    }

    .graph-row {
        grid-template-columns: 1fr;
        gap: 3em;
    }

    .graph-box canvas {
        height: 260px !important;
    }

    .real-case-card {
        padding: 2em 1em;
    }

    #flex h2 {
        letter-spacing: 0;
    }

    .voice-item {
        gap: 0.5em;
        justify-content: space-between;
    }

    .voice-item__text {
        width: 80%;
    }

    .voice-item__img {
        width: 15%;
    }

    .similar-blog-cta {
        line-height: 1.4;
        padding: 0.6em 2em 0.65em;
    }

    .similar-blog-cta {
        font-size: 1.1em;
    }

    .points-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

    .point-card p {
        text-align: center;
    }

    #similar .card-note::before,
    #similar .card-note::after {
        height: 2.8em;
    }

    #similar .card-note::before {
        left: -1em;
    }

    #similar .card-note::after {
        right: -1em
    }

    .back-to-top {
        right: 1em;
    }
}