@charset "utf-8";

:root {
    /* pc_font */
    --pc_lger: clamp(35px, 1vw, 50px);
    --pc_lg: clamp(25px, 1vw, 50px);
    --pc_middle: clamp(16px, 1vw, 18px);
    --pc_small: clamp(13px, 1vw, 16px);
    --pc_smaller: clamp(12px, 1vw, 12px);
    /* phone_font */
    --phone_lg: clamp(35px, 1vw, 50px);
    --phone_middle: clamp(20px, 1vw, 25px);
    --phone_small: clamp(13px, 1vw, 16px);
    --phone_smaller: clamp(12px, 1vw, 12px);
    /* font_color */
    --color_black: #333;
    --color_white: #fff;
    --color_green: #416e07;
    --linkColor: red;
    --linkHover: #06c;
}

.concept.guide p {
    line-height: 1.5;
}

.s_section {
    margin: 50px 0;
}

.s_section>p {
    color: var(--color_black);
    font-size: var(--pc_small);
    text-align: left;
}

.s_section.sub p:nth-child(2) {
    /* text-indent: 1rem; */
    text-align: left;
}

.s_ttl {
    font-size: var(--pc_middle);
    text-align: left;
    font-weight: bolder;
}

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

    .s_section>p {
        color: var(--color_black);
        font-size: var(--phone_middle);
        text-align: left;
    }

    .s_ttl {
        font-size: var(--phone_middle);
    }
}


.detail {
    display: flex;
    flex-direction: column;
}

.detail.routine ol {
    width: 80%;
    margin: 50px auto;
    list-style: none;
    counter-reset: counter-name;
    display: flex;
    gap: 25px;
    flex-direction: column;
}

.detail.routine ol li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    /* margin: 10px 10px 10px 15px; */
    text-align: left;
}

.detail.routine ol li p {
    color: var(--color_black);
    font-weight: unset;
    font-size: var(--pc_middle);
}

.detail.routine ol li .smaller_ttl {
    font-size: var(--pc_middle);
    color: var(--color_black);
    font-weight: bolder;
}


.detail.routine ol li .smaller_ttl::before {
    background-color: var(--color_green);
    counter-increment: counter-name;
    content: counter(counter-name);
    color: var(--color_white);
    padding: 15px;
    margin: 0 15px 0 0;
}

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

    .detail.routine ol {
        width: 100%;
        display: flex;
        flex-wrap: unset;
        flex-direction: column;
        gap: 25px;
    }

    .detail.routine ol li {
        width: 100%;
        padding: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .detail.routine ol li .smaller_ttl::before {
        padding: 5px 10px;
    }

    .detail.routine ol li p {
        color: var(--color_black);
        font-weight: unset;
        font-size: var(--phone_middle);
    }

    .detail.routine ol li .smaller_ttl {
        font-size: var(--phone_middle);
    }

}


.detail.car {
    display: unset;
}

.detail.car ol {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
    counter-reset: counter-name;
}

.detail.car ol li p {
    color: var(--color_black);
    font-size: var(--pc_middle);
    /* display: inline-block; */
}

.detail.car ol li p span {
    /* width: 5%; */
    position: relative;
    margin: 0 15px;
}

.detail.car ol li p span::before {
    /* width: 10%; */
    font-size: var(--pc_middle);
    font-weight: normal;
    counter-increment: counter-name;
    content: counter(counter-name) ".";
    color: var(--color_black);
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width:390px) {
    .detail.car ol li p {
        text-align: left;
        font-size: var(--phone_middle);
    }
}

.cost_details {
    margin: 50px auto;
}

.cost_details p {
    width: 80%;
    margin: 50px auto 5px auto;
    color: var(--color_black);
    font-size: var(--pc_middle);
}


.cost_details table {
    width: 80%;
    margin: 0 auto;
}

.cost_details table th {
    border-bottom: 1px solid var(--color_black);
}


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


    .cost_details table th {
        font-size: var(--phone_middle);
    }

    .cost_details p {
        font-size: var(--phone_middle);
    }
}