:root{
    --recruitBoxWidth: 288px;
    --recruitImageWidth: var(--recruitBoxWidth);
    --recruitImageHeight: calc(var(--recruitImageWidth) - var(--recruitImageWidth) * 0.2);
    --hoverRecruitImageWidth: calc(var(--recruitImageWidth) * 1.2);
    --hoverRecruitImageHeight: calc(var(--recruitImageHeight) * 1.2);
    --hoverRecruitImageLeft: calc(var(--recruitImageWidth) * -0.1);
    --hoverRecruitImageTop: calc(var(--recruitImageHeight) * -0.1);
}

.recruitArea{
    width: 1200px;
    margin: 0 auto;
}

.recruitFlex{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    align-content: center;
    gap: 16px;
    flex-wrap:wrap;
}
.recruitBox{
    width: var(--recruitImageWidth);
    box-shadow: -6px 6px 6px rgba(0,0,0,0.3);
}

.recruitTitle,
.recruitSalonName,
.recruitSalonAddress{
    padding: 4px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.recruitTitle,
.recruitSalonName{
    font-weight: bold;
}
.recruitSalonAddress{
    font-size: 0.8rem;
}

.recruitImage{
    width: var(--recruitImageWidth);
    height: var(--recruitImageHeight);
    overflow: hidden;
    position: relative;
}
.recruitImage > .inner{
    position: absolute;
    top: 0;
    left: 0;
    width: var(--recruitImageWidth);
    height: var(--recruitImageHeight);
    max-width: var(--recruitImageWidth);
    max-height: var(--recruitImageHeight);
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    background-position: center;
    transition: 300ms;
}

.recruitBox:hover > .recruitImage > .inner{
    top: var(--hoverRecruitImageTop);
    left: var(--hoverRecruitImageLeft);
    width: var(--hoverRecruitImageWidth);
    height: var(--hoverRecruitImageHeight);
    max-width: var(--hoverRecruitImageWidth);
    max-height: var(--hoverRecruitImageHeight);
}