@charset "utf-8";
@import url("./variables.css");

.parallax img.about-b-img {
    height: 100%;
    object-fit: cover;
}

.c-flex-box.-rg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 80%;
    background: #8cc63f;
}

.about-b-flex-box.-lg,
.about-b-flex-box.-rg {
    width: 44.999%;
}

.about-b-flex {
    position: relative;
}

.about-b-flex::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    transform: translateY(-50%);
    width: 1px;
    height: 100%;
    background: var(--color-green-light2);
}

@media screen and (max-width: 960px) {
    .about-b-flex {
        gap: var(--div-mb-sp);
    }

    .about-b-flex-box.-lg,
    .about-b-flex-box.-rg {
        width: 100%;
    }

    .about-b-flex::before {
        display: none;
    }
}

.conditions-list {
    margin-top: 1.25em;
    gap: .25em;
    display: flex;
    flex-direction: column;
}

.conditions-item {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: .5em;
}

.conditions-item::before {
    content: "";
    width: 10px;
    height: 10px;
    left: 0;
    top: 0;
    transform: rotate(45deg);
    background-color: var(--color-green);
    flex-shrink: 0;
}

.conditions-list+.c-textBox {
    margin-top: 1em;
}

@media screen and (max-width: 960px) {
    .conditions-item {
        font-size: .875rem;
    }
}

.howto-flow-item h4 {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding-bottom: 0.75em;
    margin-bottom: 1em;
    border-bottom: 1px solid var(--color-green-light2);
}

.howto-flow-item {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.howto-flow-inner.-lg {
    width: calc(45% - 2rem);
}

.howto-flow-inner.-rg {
    width: calc(55% - 2rem);
}

.howto-head {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding-bottom: 0.75em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid var(--color-green-light2);
}

.howto-head3 {
    font-size: 1.25rem;
    font-family: serif;
}

.howto-flow-list {
    display: flex;
    flex-direction: column;
    gap: 3em;
    margin-bottom: 4rem;
}



@media screen and (max-width: 960px) {

    .howto-head3 {
        font-size: 1rem;
    }

    .howto-flow-list {
        display: flex;
        flex-direction: column;
        gap: var(--div-mb-sp);
    }
}

@media screen and (max-width: 720px) {
    .howto-flow-inner.-lg, .howto-flow-inner.-rg {
        width: 100%;
    }
    .howto-flow-inner.-lg img {
        margin-inline: auto;
    }
    .howto-flow-item {
        flex-direction: column;
    }

    .considering-slider {
        overflow: hidden;
        width: 100%;
    }
}

@media screen and (min-width: 961px) {
    .considering-list {
        display: flex;
        gap: 2rem;
    }

    .considering-item {
        width: calc(33.333% - 2rem);
    }
}

@media screen and (max-width: 960px) {

    .considering-item {
        width: auto;
    }

    .considering-item img {
        width: 100%;
        height: auto;
        display: block;
    }
}

.consultation-wrap {
    padding: 3rem 2rem;
    margin-inline: auto;
    margin-bottom: var(--cotents-pb);
    max-width: 712px;
}

.consultation-wrap .c-head3 {
    font-weight: bold;
    margin-bottom: 1.5em;
}

.considering-list-wrap {
    margin-bottom: 4rem;
}

@media screen and (max-width: 960px) {
    .consultation-wrap .c-head3 {
        font-size: 20px;
    }

    .consultation-wrap {
        padding: 1.5rem 1rem;
    }
}

.outside-column {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 960px) {
    .outside-txtBox .c-head3, .outside-txtBox .c-txt {
        text-align: center;
    }
    .outside-column {
        flex-direction: column;
    }
}