@charset "UTF-8";
@import url(./common.css);

/* ------------------------------
ページ内リンク
------------------------------ */
.inside_nav > ul > li {
    width: 33%;
}

/* ------------------------------
our salon
------------------------------ */
.our_salon {
    display: flex;
}
.our_salon > .image_block {
    position: relative;
}
.our_salon > .image_block > img {
    position: absolute;
}
.our_salon > .image_block > img:nth-of-type(1) {
    top: 30px;
}
.our_salon > .image_block > img:nth-of-type(2) {
    width: 50%;
    aspect-ratio: 1;
    top: 0;
}

/* ------------------------------
Staff
------------------------------ */
.staff .member > .profile {
    padding: 1rem 0;
}
.staff .member > .profile > .post > span,
.staff .member > .profile > .name > span {
    display: inline-block;
}
.staff .member > .profile > .post > span:first-of-type,
.staff .member > .profile > .name > span:first-of-type {
    margin-right: 1rem;
}
.staff .member > .profile > .post > span:nth-of-type(2) {
    position: relative;
}
.staff .member > .profile > .post > span:nth-of-type(2)::before {
    content: "";
    display: block;
    width: 1px;
    height: 1rem;
    position: absolute;
    top: 5px;
    left: -9px;
    background-color: var(--border-color);
}
.staff .member > .profile > .name {
    line-height: 2.5;
}
.staff .member > .profile > .name > .ja {
    font-size: 150%;
}
.staff .member > .profile > .name {
    font-family: var(--font-mincho);
}

/* ------------------------------
スマホ版
------------------------------ */
@media screen and (max-width: 800px) {

    .inside_nav > ul > li::before {
        right: calc(6vw + 8px);
    }
    .inside_nav > ul > li::after {
        right: 6vw;
    }

    /* ------------------------------
    Our salon
    ------------------------------ */
    .our_salon {
        flex-direction: column-reverse;
    }
    .our_salon > .image_block {
        width: 100%;
        aspect-ratio: 7 / 5;
    }
    .our_salon > .image_block > img:nth-of-type(1) {
        width: 70%;
        aspect-ratio: 1;
        top: 30px;
        left: -10%;
    }
    .our_salon > .image_block > img:nth-of-type(2) {
        right: 0;
    }
}


/* ------------------------------
PC版
------------------------------ */
@media screen and (min-width: 801px) {

    .inside_nav > ul > li::before {
        right: calc(5vw + 8px);
    }
    .inside_nav > ul > li::after {
        right: 5vw;
    }

    /* ------------------------------
    our salon
    ------------------------------ */
    .our_salon {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: flex-end;
    }
    .our_salon > .text_block {
        width: 35%;
    }
    .our_salon > .image_block {
        width: 60%;
        aspect-ratio: 1;
    }
    .our_salon > .image_block > img:nth-of-type(1) {
        width: 70%;
        aspect-ratio: 3 / 4;
        left: -10%;
    }
    .our_salon > .image_block > img:nth-of-type(2) {
        right: -7vw;
    }

    /* ------------------------------
    We think
    ------------------------------ */
    .think .content {
        display: flex;
        justify-content: space-between;
    }
    .think .content > .text,
    .think .content > .list_block {
        width: 49%;
    }


}

/* ------------------------------
staffのブレイクポイントは1000pxに
------------------------------ */
@media screen and (min-width: 641px) {
    
    /* ------------------------------
    Staff
    ------------------------------ */
    .staff .member_wrapper {
        display: flex;
        justify-content: space-between;
    }
    .staff .member {
        width: 48%;
    }
}
@media screen and (min-width: 1001px) {
    
    /* ------------------------------
    Staff
    ------------------------------ */
    .staff {
        display: flex;
    }
    .staff .h3_block {
        width: 30%;
    }
    .staff .member_wrapper {
        width: 70%;
    }
    .staff .member img {
        aspect-ratio: 2 / 3;
    }
}