@charset "utf-8";

/*-----------------------------------------------------------
スタッフ紹介
-----------------------------------------------------------*/

.fontB {
    font-family: var(--font-family02);
}

.staffItemBox {
    mask-image: url(/system_panel/uploads/images/img-mask05.png);
    -webkit-mask-image: url(/system_panel/uploads/images/img-mask05.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-image: url(https://hair-room-noa.com/system_panel/uploads/images/top-concept-bg.png);
    background-repeat: repeat;
    background-position: right;
    background-attachment: scroll;
    background-size: cover;
}

.staffNameEn {
    font-family: var(--font-family02);
    letter-spacing: 0.05em;
    line-height: 1.45em;
    color: var(--primary);
    font-size: 16px;
    margin: 8px 0 0;
}

.staffNameJa {
    font-size: 22px;
    letter-spacing: 0.03em;
    line-height: 1.8em;
}

.staffNameSet {
    gap: 5px 20px;
}

.staffContentsFlex {
    display: flex;
    align-items: baseline;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.staffItemWr .staffItemBox:first-child {
    margin-top: 0;
}

.staffItemWr .staffItemBox {
    margin-top: 40px;
}

.staffItemWr .staffItemBox:nth-child(odd)>.staffItemFlexBox {
    flex-direction: column;
}
.staffItemWr .staffItemBox:nth-child(even)>.staffItemFlexBox {
    flex-direction: column;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:768px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
    .staffNameEn {
        margin: 10px 0 0;
        font-size: 16px;
    }

    .staffNameJa {
        font-size: 25px;
    }

    .staffContentsFlex {
        font-size: 16px;
    }

    .staffItemWr .staffItemBox:nth-child(odd)>.staffItemFlexBox {
        flex-direction: row;
    }
    .staffItemWr .staffItemBox:nth-child(even)>.staffItemFlexBox {
        flex-direction: row-reverse;
    }
    
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
}/* min-width: 768px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1024px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

    .staffNameSet {
        gap: 5px 49px;
    }

    .staffNameEn {
        font-size: 18px;
    }
  
    .staffNameJa {
        font-size: 30px
    }

    .staffContentsFlex {
        font-size: 18px;
    }

    .staffItemWr .staffItemBox {
        margin-top: 80px;
    }

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
}/* min-width: 1024px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1200px) {
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
    .staffNameJa {
        font-size: 35px
    }


/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
}/* min-width: 1200px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */