/* ページ全体で利用するもの */

.speech-bubble {
    margin: 30px auto 0;
    position: relative;
    background: #f2f2f2;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.speech-bubble::after {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 41px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 41'><path d='M36.814 40.8892C39.0395 40.8889 40.49 38.5501 39.5015 36.5562L22.6861 2.64014C21.5838 0.416847 18.4133 0.416847 17.3111 2.64014L0.495625 36.5562C-0.492983 38.5502 0.958399 40.8892 3.1841 40.8892H36.814Z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 41'><path d='M36.814 40.8892C39.0395 40.8889 40.49 38.5501 39.5015 36.5562L22.6861 2.64014C21.5838 0.416847 18.4133 0.416847 17.3111 2.64014L0.495625 36.5562C-0.492983 38.5502 0.958399 40.8892 3.1841 40.8892H36.814Z'/></svg>") no-repeat center / contain;
}

.speech-bubble.gray {
    width: 457px;
    height: 68px;
    background: #f2f2f2;
}

.speech-bubble.gray::after {
    background: #f2f2f2;
}

.speech-bubble.white {
    width: 313px;
    height: 68px;
    background: #fff;
}

.speech-bubble.white::after {
    background: #fff;
}

@media screen and (max-width: 767px) {
    .speech-bubble.gray {
        width: 100%;
    }
}

/* 導入部分 */

.intro .content-block ul {
    margin-top: 43px;
    display: flex;
    justify-content: center;
    gap: 56px;
}

.intro .content-block ul li {
    max-width: 434px;
}

.intro .content-block ul li .title {
    height: 59px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(113deg, #AC020E 26.99%, #91000A 85.99%);
}

.intro .content-block ul li .text {
    padding: 30px 20px;
    background: #f2f2f2;
}

.intro .cta-block {
    margin-top: 60px;
}

.intro .cta-block a {
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .intro .hedding-block h2 {
        font-size: 1.4rem;
    }

    .intro .content-block ul {
        flex-direction: column;
        gap: 3rem;
    }
}

/* ノーコード */

.nocode .hedding-block .subtext strong {
    color: #c02!important;

}

.nocode .content-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

.nocode .content-block .feature-list {
    max-width: 774px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.nocode .content-block .feature-list .feature-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-content: baseline;
    text-align: center;
}

.nocode .content-block .feature-list .feature-item .image-box {
    max-width: 146px;
    margin: 0 auto;
}

.nocode .content-block .feature-list .feature-item .image-box img {
    width: 100%;
    height: auto;
}

.nocode .content-block .point {
    max-width: 834px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.nocode .content-block .point .item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.nocode .content-block .point .item .image-box {
    max-width: 392px;
    margin: 0 auto;
}

.nocode .content-block .point .item .image-box img {
    width: 100%;
    height: auto;
}

.nocode .content-block .point .item p {
    text-align: center;
}

@media screen and (max-width: 767px) {
    .nocode .content-block .feature-list {
        grid-template-columns: 1fr;
    }

    .nocode .content-block .point {
        flex-direction: column;
        gap: 3rem;
    }
}

/* ローコード */

.lowcode {
    background: #f2f2f2;
}

.lowcode .hedding-block .subtext strong {
    color: #c02!important;
}

.lowcode .content-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

.lowcode .content-block .image-text {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
}

.lowcode .content-block .image-text .text-box h3 {
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

.lowcode .content-block .image-text .text-box h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 33px;
    height: 4px;
    background: var(--color-h2-underline);
}

.lowcode .content-block .image-text .text-box p strong {
    color: #c02!important;
}

.lowcode .content-block .cta-box a {
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .lowcode .content-block .image-text {
        grid-template-columns: 1fr;
    }
}