@charset "utf-8";

/*******************************************
common
*******************************************/
.welfareBox {
    margin-bottom: clamp(40px, 6.944vw, 100px);

    &:first-child {
        .meritDetail__main {
            font-size: var(--font17);
        }
    }
	

    &:last-child {
        margin-bottom: 0;
    }
}

.welfare-main {
    .section__inner {
        padding: 0;
    }

    .box01__ttl {
        font-size: var(--font32);
        padding: 0.63em 1.42em;

        p {
            padding-left: 1.87em;

            &::before {
                width: 1.17em;
                transform: translateY(0.2em);
            }
        }
    }

    .box01__main {
        padding: max(var(--size50), 25px) max(var(--size45), 15px) max(var(--size60), 30px);
    }

    @media screen and (max-width: 480px) {
        .box01__ttl {
            font-size: var(--font25);
        }
    }
}

.cateList {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3px;
}

.welfare-table__item {
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid var(--gray07);

    &:last-child {
        border: none;
    }

    dt {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: var(--font21);
        gap: 0.9em;
        width: 15.476em;
        background-color: var(--beige06);
        padding: 0 1.9em;
        flex-wrap: wrap;

        p {
            text-align: left;
            font-size: 1em;
            font-style: var(--weight700);
        }

        .cateList {
            transform: translateY(23%);
        }
    }

    dd {
        padding: 0 1.47em;
        flex: 1;
        font-size: var(--font17);

        p {
            font-weight: 1em;
        }
    }

    dt,
    dd {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    @media screen and (max-width: 768px) {
        flex-direction: column;

        dt {
            width: 100%;
            justify-content: space-between;
            padding: 1em 0;
            border-bottom: 1px solid var(--gray07);
        }

        dt,
        dd {
            padding-left: 15px;
            padding-right: 15px;
        }
    }
}
.page-btn__list {
    & li {
        .btn {
            font-size: 16px;
            letter-spacing: 0;
            line-height: 1.315;
            padding: 0 1.5em;
			
			@media screen and (max-width: 480px) {
       font-size: 14px;
        }
    }
}
}

/*******************************************
category
*******************************************/
.cate-zen,
.cate-full,
.cate-jun,
.cate-pa,
.cate-a {
    position: relative;
    display: block;
    aspect-ratio: 1;
    width: 1.49em;
    font-size: min(var(--font17), 16.3px);
    font-weight: var(--weight700);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border-radius: clamp(1px, 0.306em, 5px);
    line-height: 1;

    &::before {
        position: absolute;
        font-size: 1em;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 1;
    }
}

.cate-zen {
    background-color: var(--brown01);
    color: var(--white);

    &::before {
        content: "全";
        transform: translate(-47%, -53%);
    }
}

.cate-full {
    background-color: var(--red07);
    color: var(--white);

    &::before {
        content: "正";
    }

}

.cate-jun {
    background-color: var(--white);
    border: 1px solid var(--red01);
    color: var(--red07);

    &::before {
        content: "准";
    }

}

.cate-pa {
    background-color: var(--green03);
    color: var(--white);

    &::before {
        content: "パ";
    }

}

.cate-a {
    background-color: var(--white);
    border: 1px solid var(--green03);
    color: var(--green03);

    &::before {
        content: "ア";
    }
}

/*******************************************
category-explanation
*******************************************/
.category-explanation {
    .section__inner {
        padding: max(var(--size60), 30px) 0 clamp(40px, 8.33vw, 90px);
    }
}

.category-explanation__list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px 35px;

    li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.588em;
        font-size: var(--font17);

        p {
            text-align: left;
            flex: 1;
        }
    }

    .cate-zen,
    .cate-full,
    .cate-jun,
    .cate-pa,
    .cate-a {
        font-size: 1em;
    }
}

/*******************************************
merit__list
*******************************************/
:root {
    --meritListwidth: calc((100% - (var(--meritListGap)*2))/3);
    --meritListGap: 20px;


    @media screen and (max-width: 1024px) {
        --meritListwidth: calc((100% - var(--meritListGap))/2);
    }

    @media screen and (max-width: 768px) {
        --meritListwidth: min(100%, 300px);
        --meritListGap: 10px;
    }
}

.merit__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--meritListGap);

    .cateList {
        justify-content: flex-end;
    }
}

.meritDetail {
    display: flex;
    flex-direction: column;
    width: var(--meritListwidth);
    padding: 15px 10px 10px;
    border: 1px solid var(--brown01);
    border-radius: var(--radius20);
    min-height: 190px;

    .cateList {
        margin-top: auto;
    }

    @media screen and (max-width: 480px) {
        min-height: 120px;
        padding-top: 10px;

        .cateList {
            margin-top: 10px;
        }
    }
}

.meritDetail__ttl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--font23);
    gap: 0.434em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray07);

    p {
        font-size: 1em;
        text-align: left;
        flex: 1;
        line-height: 1.2173;
        font-weight: var(--weight700);
    }

    .icon {
        width: 2.3em;
    }

    @media screen and (max-width: 1300px) {
        font-size: min(var(--font23), 20px);
    }

    @media screen and (max-width: 480px) {
        padding-bottom: 5px;
    }
}

.meritDetail__main {
    font-size: var(--font17);
    padding: 1em 0 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    p {
        font-size: 1em;
        letter-spacing: var(--fontSpace040);
        text-align: left;
        line-height: 1.5;
    }
}

.meritDetail__ttl,
.meritDetail__main p {
    width: 90%;
    margin: 0 auto;

    @media screen and (max-width: 480px) {
        width: 100%;
    }
}

/*******************************************
comebackBox
*******************************************/

.comebackBox {
    background-color: var(--white);
    border: 3px solid var(--red07);
    padding: max(var(--size45), 25px) max(var(--size45), 15px) clamp(10px, 5.2083vw, 75px);
    border-radius: var(--radius30);

    @media screen and (max-width: 768px) {
        border: 2px solid var(--red07);
    }
}

.comebackBox__ttl {
    font-size: var(--font32);
    padding-bottom: 0.625em;
    border-bottom: 3px solid var(--red07);
    font-weight: var(--weight700);

    @media screen and (max-width: 768px) {
        border-bottom: 2px solid var(--red07);
    }
}

.comebackBox__txt {
    margin: 25px 0 40px;
    line-height: 2.117;
    text-align: left;
    letter-spacing: 0.05em;


    @media screen and (max-width: 768px) {
        margin: 15px 0 25px;
    }
}

.welfare-table--comeback {
    .welfare-table__item {
        dt {
            background-color: var(--brown01);

            p {
                color: var(--white);
            }
        }

        dd {
            p {
                text-align: left;
            }
        }


        &:last-child {

            dt {
                background-color: var(--red01);
            }

        }
    }
}