@charset 'UTF-8';

:root {
    --col-wine: #840c3d;
}

.sp_wrapper_tx_v3 {
    background-color: var(--col-wine);
    padding: 3% 5%;
}

.sp_wrapper_anc_v4 {
    background-color: var(--bk-white);
    padding: 0 5%;

    & .anc_box {
        gap: 20px 30px;

        & > a {
            background-color: var(--bk-white);
            color: var(--col-wine) !important;
            border-radius: 0;
            box-shadow: none;
            border-top: solid 2px var(--col-wine);
            border-bottom: solid 2px var(--col-wine);
            height: 80px;
            width: calc((100% - 60px) / 3);
        }

        & > a.longanc {
            width: 100%;
        }
    }
}

.tit1 {
    & > h3 {
        padding: 0 0 10px 5px;
        border-bottom: solid 2px var(--col-wine);
        display: flex;
        gap: 10px 20px;
        font-size: 2.6rem;
        margin: 0 0 50px;

        & > p.point {
            background: var(--col-wine);
            color: var(--fc-white) !important;
            border-radius: 8px;
            font-size: 1.4rem;
            height: 40px;
            padding: 12px 15px;
        }

        & > p.point_tit {
            height: 40px;
            padding: 5px 0 0;

            & > span {
                color: var(--col-wine) !important;
                display: inline-block;
                margin: 0 5px 0 0;
            }
        }
    }
}

.sp_wapper_block {

    & .column2 {

        & > p {

            & > span.com_line {
                background: linear-gradient(to bottom, #fff 50%, #ffc4dc 50%);
                padding: 0 5px;
            }

            & > span.sub_tit {
                color: var(--col-wine)!important;
                font-size: 2.0rem;
                font-weight: bold;
                margin: 0 0 15px;
                display: block;
            }
        }

        & .numberbox {
            margin: 35px 0 0;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;

            & > a {
                width: calc((100% - 10px) / 2);
                border: solid 2px var(--col-wine);
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 30px 0 0;
                position: relative;
                color: var(--col-wine) !important;
                border-radius: 5px;

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

        & .tempbox {
            margin: 35px 0 0;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;   

            & > a {
                width: 100%;
                border: solid 2px var(--col-wine);
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 30px 0 0;
                position: relative;
                color: var(--col-wine) !important;
                border-radius: 5px;

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

    & .column4 {

        & > a {
            width: 100%;
            border: solid 2px var(--col-wine);
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 30px 0 0;
            position: relative;
            color: var(--col-wine) !important;
            border-radius: 5px;

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

.tablebox {
    margin: 0 0 100px;

    & table {
        width: 100%;
        border-collapse: unset;

        & td:first-child {
            width: 20%;
            background: var(--bk-dgray);
            text-align: center;
            padding: 15px;
            border-right: solid 3px var(--bk-white);
            position: relative;

            & > a {
                color: var(--fc-white) !important;
                display: flex;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
                padding: 0 30px 0 0;

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

        & td:nth-child(2) {
            width: 80%;
            background: var(--bk-gray);
            padding: 15px;
        }
    }

    & tr {
        border-bottom: solid 3px var(--bk-white);
    }

    & tr:last-child {
        border-bottom: none;
    }
}

.itembox {

    & .item_wine {
        margin: 0 0 100px;

        & > h4 {
            background: var(--bk-dgray);
            color: var(--fc-white) !important;
            height: 50px;
            padding: 13px 5px 0 20px;
            margin: 0 0 40px;
        }

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

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