@charset 'UTF-8';

.accodion_box {
    margin: 30px 0 0;
}

.sp_wrapper_anc_v4 {
    background-color: var(--bk-white);
    margin: 0 0 70px;

    & .anc_box {
        max-width: 100%;

        & > a {
            padding: 50px 30px 10px 10px;
            color: var(--fc-ksgreen) !important;
            box-shadow: none;
            height: 130px;
            border: solid 2px var(--bk-ksgreen);
            font-size: 2.2rem;

            @media screen and (max-width: 1050px) {
                font-size: 1.8rem;
            }

            @media screen and (max-width: 498px) {
                padding: 60px 30px 10px 10px;
                font-size: 2.2rem;
                height: auto;
                width: 100%;
            }
        }

        & > a.check1 {

            &:after {
                content: "";
                background: url(/excludes/KEC/img/special/ac_select/icon-check1.png) no-repeat;
                background-size: 100%;
                width: 120px;
                height: 40px;
                top: 10px;
                left: 10px;
                position: absolute;
            }
        }

        & > a.check2 {

            &:after {
                content: "";
                background: url(/excludes/KEC/img/special/ac_select/icon-check2.png) no-repeat;
                background-size: 100%;
                width: 120px;
                height: 40px;
                top: 10px;
                left: 10px;
                position: absolute;
            }
        }

        & > a.check3 {

            &:after {
                content: "";
                background: url(/excludes/KEC/img/special/ac_select/icon-check3.png) no-repeat;
                background-size: 100%;
                width: 120px;
                height: 40px;
                top: 10px;
                left: 10px;
                position: absolute;
            }
        }
    }
}

.selectbox {
    margin: 0 0 100px;

    & .maintit {

        & h2 {
            position: relative;
            padding: 0 0 0 150px;
            border-bottom: none;
            height: 50px;
            background: linear-gradient(to bottom, #fff 50%, #b8d471 50%);
            font-size: 3.8rem;
            font-weight: bold;
            text-shadow: 3px 3px 3px var(--fc-white);

            &:before {
                position: absolute;
                content: "";
                background: url(/excludes/KEC/img/special/ac_select/icon-title.png) no-repeat;
                background-size: 110px;
                width: 110px;
                height: 55px;
                bottom: 6px;
                left: 17px;
            }

            &:after {
                position: absolute;
                content: "";
                border-bottom: solid 25px #fff;
                border-right: solid 30px transparent;
                border-left: solid 30px transparent;
                bottom: 0;
                right: -30px;
            }
            
        }
    }

    & .slectcont {
            margin: 50px 0 0;

        & .subtit {
            margin: 0 0 30px;

            & h3 {
                padding: 9px 0 7px 20px;
                border-left: solid 10px #b8d471;
            }
        }

        & .smalltit {
            margin: 0 0 20px;

            & h4 {
                font-size: 2.4rem;
                padding: 5px 0 3px 20px;
                position: relative;

                &:before {
                    position: absolute;
                    content: "";
                    border-left: solid 8px;
                    border-top: solid 6px transparent;
                    border-bottom: solid 6px transparent;
                    top: 50%;
                    left: 0;
                    transform: translate(0, -50%);
                }
            }
        }

        & .contbox {
            display: flex;
            flex-wrap: wrap;
            gap: 70px 20px;

            & .com {
                width: 50%;

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

                & > p {

                    & > a {
                        color: var(--fc-blue)!important;
                        text-decoration: underline!important;
                    }
                }

                & .size_select {
                    margin: 20px 0;
                    border: solid 2px var(--bk-dgray);
                    border-radius: 5px;

                    & > h4 {
                        background: var(--bk-dgray);
                        color: var(--fc-white) !important;
                        padding: 10px;
                    }

                    & .size {
                        padding: 10px;

                        & > a {
                            color: var(--fc-blue)!important;
                            text-decoration: underline;
                            padding: 0 20px 0 0;
                            display: inline-block;
                            margin: 0 20px 0 0;
                            position: relative;

                            &:before {
                                content: ">";
                                top: 0;
                                right: 0;
                                position: absolute;
                            }
                        }
                    }
                }

            }

            & .image {
                width: calc(50% - 20px);

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

            }
        }

    }

    & .maler_cate {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 60px 0 100px;

        @media screen and (max-width: 768px) {
            gap: 10px;        
        }

        & > a {
            width: calc((100% - 60px) / 4);
            border: solid 2px;
            padding: 10px;
            display: flex;
            align-items: center;
            height: 85px;
            justify-content: center;

            @media screen and (max-width: 768px) {
                width: calc((100% - 30px) / 4);     
            }

            @media screen and (max-width: 498px) {
                width: calc((100% - 20px) / 3);     
            }

            & > img {
                max-width: 180px !important;
                width: 100%;
            }
        }
    }

    & .maler_box {

        & .maintit {
            margin: 0 0 50px;

            & > h3 {
                padding: 0 0 10px 10px;
                border-bottom: solid 1px;

                & > img {
                    max-width: 180px !important;
                }
            }
        }

        & .mainbox {
            display: flex;
            flex-wrap: wrap;
            gap: 70px 10px;

            & .series {
                width: calc((100% - 30px) / 4);

                @media screen and (max-width: 1050px) {
                    width: calc((100% - 20px) / 3);
                }

                @media screen and (max-width: 598px) {
                    width: calc((100% - 10px) / 2);
                }

                & .s_tit {
                    background: var(--bk-dgray);
                    color: var(--fc-white) !important;
                    padding: 10px;
                    text-align: center;
                    margin: 0 0 10px;

                    & > h4 {

                        & > span {
                            font-size: 2.4rem;
                            font-weight: bold;
                            margin: 0 5px 0 0;
                        }

                    }
                }
            }
        }
    }
}

.underline {
    display: inline-block;
    padding: 0 5px;
    background: linear-gradient(to bottom, #fff 60%, yellow 60%);
} 

.itembox {
    border: solid 1px;
    padding: 15px 5px 5px;
    margin: 10px 0 0;

    & .numbox {
        text-align: center;

        & > p {
            border-bottom: dashed 1px;
            padding: 0 0 5px;
            margin: 0 0 15px;
        }
    }
}