@charset "utf-8";
/* SEO対策・LLMO対策とは */
.about-wrapper {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin-inline: auto;
    margin-top: 20px;
}

.about-box {
    display: flex;
    align-items: center;
}

.about-box_img {
    width: 20%;
}

.about-box_img img {
    width: 90%;
    height: auto;
}

.about-box__text {
    width: 80%;
    padding: 10px;
}

.about-box__arrow {
    display: inline-block;
    width: 48.1px;
    height: 50px;
    background: #3573b5;
    clip-path: polygon(0 51.9%, 29.2% 51.9%, 29.2% 0, 70.8% 0, 70.8% 51.9%, 100% 51.9%, 50% 100%);
    margin-left: 5%;
}

.about-bottom {
    text-align: center;
    background: #eee;
    padding: 10px;
    margin-top: 10px;
}

/* ご支援概要 */
.overview-box__wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2%;
    row-gap: 40px;
    margin-top: 50px;
}

.overview-box {
    width: 32%;
    border: 2px solid #3573b5;
    padding: 30px 10px 10px 10px;
    background: #eee;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
    position: relative;
}

.overview-box__head {
    display: block;
    color: #fff;
    text-align: center;
    position: absolute;
    top: -20px;
    left: 50%;
    translate: -50% 0;
    background: #3573b5;
    border-radius: 20px;
    width: 90%;
}

.overview-box__text {
    text-align: center;
    line-height: 150%;
    font-size: 95%;
}

.overview-box__bottom {
    padding: 10px;
    font-weight: bold;
    font-size: 90%;
    line-height: 160%;
    text-align: center;
    border: 2px solid #3573b5;
    background: #fff;
    margin-top: 10px;
}

/* よくあるご質問内容 */
.question-wrapper {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    column-gap: 2%;
    row-gap: 20px;
    margin-top: 20px;
}

.question-box {
    width: 48%;
    background: #B6D1E9;
    border: 2px solid #0350a3;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);

}

.question-box__text {
    display: flex;
    align-items: flex-start;
    column-gap: 5px;
    padding-left: 10px;
}

.question-q {
    color: #fff;
    font-size: 120%;
    background: #0350a3;
    line-height: 120%;
    padding: 2px 10px;
    border-radius: 5px;
}

.question-a {
    color: #3573b5;
    font-size: 120%;
    background: #B6D1E9;
    line-height: 120%;
    padding: 2px 10px;
    border-radius: 5px;
}

.question-box__bottom {
    display: flex;
    align-items: flex-start;
    column-gap: 5px;
    background: #fff;
    border: 10px;
    border-radius: 12px;
    padding: 10px;
    margin-top: 10px;
}

/* ポイント（１） */
.point01-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.point01-top {
    color: #3573b5;
    text-align: center;
    font-weight: bold;
    font-size: 120%;
    width: 100%;
    background: #DAE8F5;
    padding: 10px;
}

.point01-bottom {
    display: flex;
    column-gap: 10px;
}

.point01-bottom__box {
    color: #3573b5;
    text-align: center;
    width: 25%;
    background: #DAE8F5;
    padding: 10px;
}

.point01-bottom__box p {
    font-weight: bold;
}

/* ポイント（2） */
.point02-wrapper {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin-inline: auto;
    margin-top: 20px;
}

.point02-box {
    display: flex;
    align-items: center;
}

.point02-box_img {
    width: 15%;
}

.point02-box_img img {
    width: 80%;
    height: auto;
}

.point02-box__text {
    width: 85%;
    padding: 10px;
}

/* 流れ */
.flow-wrapper {
    display: flex;
    align-items: stretch;
    column-gap: 10px;
    margin-top: 20px;
}

.flow-box {
    padding-block: 20px;
    width: calc((100% - 40px) / 5);
}

.flow-box.--01 {
    border-left: 10px solid #DAE8F5;
}

.flow-box.--01 .flow-box__head {
    background: #DAE8F5;
}

.flow-box.--02 {
    border-left: 10px solid #B6D1E9;
}

.flow-box.--02 .flow-box__head {
    background: #B6D1E9;
}

.flow-box.--03 {
    border-left: 10px solid #94BBDF;
}

.flow-box.--03 .flow-box__head {
    background: #94BBDF;
}

.flow-box.--04 {
    border-left: 10px solid #2C69A9;
}

.flow-box.--04 .flow-box__head {
    background: #2C69A9;
    color: #fff;
}

.flow-box.--05 {
    border-left: 10px solid #1F446B;
}

.flow-box.--05 .flow-box__head {
    background: #1F446B;
    color: #fff;
}

.flow-box__num {
    text-align: center;
    font-weight: bold;
}

.flow-box__head {
    font-size: 110%;
    text-align: center;
    -webkit-clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
}

.flow-box__bottom {
    margin-top: 10px;
    padding: 10px;
    font-size: 90%;
    line-height: 150%;
}

.flow-box__list {
    margin-top: 20px;
}
@media screen and (max-width: 769px) {
    /* SEO対策・LLMO対策とは */
    .about-wrapper {
        align-items: center;
        width: 100%;
    }

    .about-box_img {
        width: 25%;
    }

    .about-box__text {
        width: 75%;
        padding: 10px 0px;
    }

    .about-box__arrow {
        height: 40px;
        margin-left: unset;
    }

    /* ご支援概要 */
    .overview-box__wrapper {
        flex-direction: column;
        row-gap: 40px;
    }

    .overview-box {
        width: 100%;
    }

    /* よくあるご質問内容 */
    .question-wrapper {
        align-items: center;
        flex-direction: column;
    }

    .question-box {
        width: 100%;
        padding: 20px 15px;
    }

    /* ポイント（１） */
    .point01-wrapper {
        flex-direction: row;
        justify-content: center;
        column-gap: 10px;
        width: 100%;
    }

    .point01-top {
        font-size: 120%;
        width: 15%;
        writing-mode: vertical-rl;
    }

    .point01-bottom {
        flex-direction: column;
        row-gap: 10px;
    }

    .point01-bottom__box {
        flex-grow: 1;
        width: 100%;
    }

    /* ポイント（2） */
    .point02-wrapper {
        align-items: center;
        width: 100%;
        column-gap: 10px;
    }
    .point02-box {
    column-gap:5px;
}

    .point02-box_img {
        width: 15%;
    }

    .point02-box_img img {
        width: 90%;
        height: auto;
    }

    .point02-box__text {
        width: 85%;
        padding: 10px 0px;
    }

    /* 流れ */
    .flow-wrapper {
        align-items: center;
        flex-direction: column;
        row-gap: 20px;
        margin-top: 20px;
    }

    .flow-box {
        padding-block: 10px;
        width: 100%;
        max-width: 450px;
    }

    .flow-box__num {
        text-align: center;
        font-weight: bold;
    }

    .flow-box__head {
        font-size: 110%;
        text-align: center;
        -webkit-clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
    }

    .flow-box__bottom {
        margin-top: 10px;
        padding: 10px;
        font-size: 95%;
        line-height: 150%;
    }

    .flow-box__list {
        margin-top: 10px;
    }

}