.contact-box {
    position: relative;
    padding: 80px 40px;
    height: auto;
    @media screen and (max-width: 1023px) {
        padding: 40px 20px;
    }
    &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: #7CB537;
        position: absolute;
        top: 0;
        left: 0;
        opacity: .6;
    }
    & > * {
        position: relative;
    }
    & a {
        color: #333;
        transition: .2s;
        text-align: center;
        &:hover {
            opacity: .5;
        }
    }
}
.contact-box .box > div.left .headline + p {
    text-align: center;
    @media screen and (max-width: 600px) {
        text-align: left;
    }
}

.contents-inner,.contents-inner .box {
    padding: 0;
}
.contact-box .box > div.right {
    display: flex;
    gap: 40px 80px;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    @media screen and (max-width: 1023px) {
        margin-top: 40px;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    @media screen and (max-width: 600px) {
        flex-wrap: nowrap;
        gap: 20px;
    }
    & > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
        margin: 0 !important;
        max-width: 230px;
        & figure {
            aspect-ratio: 1;
            width: 100px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            @media screen and (max-width: 600px) {
                width: 60px;
            }
            :is(.tel,.mail) & {
                border-radius: 50%;
                & svg{
                    height: 32px;
                    fill: #BAA28A;
                }
            }
        }
        & a, & p:not(.detail) {
            font-size: 2rem;
            font-weight: 600;
            padding-top: 10px;
        }
        & p.detail {
            font-size: 1.5rem;
            line-height: 1.4;
            @media screen and (max-width: 1023px) {
                text-align: left;
                & br {
                    display: none;
                }
            }
            & a {
                display: block;
            }
            & .sp-br {
                all: initial;
                @media screen and (max-width: 1023px) {
                    display: block;
                    text-align: center;
                }
            }
        }
        &.mail a,&.line a{
            display: flex;
            align-items: center;
            @media screen and (max-width: 600px) {
                font-size: calc(((100vw - 60px)/2/11));
            }
            & svg {
                height: 1em;
                margin-left: .2em;
            }
        }
    }
}