@charset "UTF-8";
/* ===============
article__header
================= */
.article__header{
    padding: 120px var(--contentpadding) 0;
    background-color: #f8f7f5;
}
h2{
    font-size: 3rem;
    line-height: 22px;
    font-family: serif;
}

h2 span{
    font-size: 0.9rem;
    margin: 1px auto 0;
}

/* article__header pc */
@media screen and (min-width:769px) {
    h2{
        font-size: 6rem;
        line-height: 35px;

    }
    h2 span{
        font-size: 1.6rem;
    }
}

/* ================
section--salon
================= */
.section--salon{
    background-color: #f8f7f5;
    position: relative;
}
h3{
    font-size: 2rem;
    font-family: serif;
}

.salon__logo{
    font-size: 16rem;
    font-family: Homemade Apple;
    letter-spacing: -17px;
    color: var(--primary-brown);
    opacity: 0.1;
    position: absolute;
    top: 55px;
    left: 68%;
    transform: translateX(-50%);
}

.salonLogo__img{
    width: 132px;
    height: auto;
    margin-top: 30px;
}

.concept__name{
    margin-top: 15px;
}

.salon__img{
    width: 326px;
    height: auto;
    margin-top: 20px;
    position: relative;
}

.title{
    font-size: 1.8rem;
    font-weight: 700;
    font-family: serif;
    color: #000;
    position: absolute;
    top: 482px;
    left: 45%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.title span{
    color: #fff;
}

.salon__txt{
    margin-top: 30px;
}

.pcBr{
    display: none;
}

.salon__txt span{
    font-size: 1.8rem;
    font-weight: 700;
}

/* staff */
.staff{
    margin-top: 140px;
    position: relative;
}

.staff__logo{
    font-size: 16rem;
    font-family: Homemade Apple;
    letter-spacing: -12px;
    color: var(--primary-brown);
    opacity: 0.1;
    position: absolute;
    top: 214px;
    left: 41%;
    transform: translateX(-50%);
}

.name__group{
    position: relative;
}

.object__six,
.object__eigth,
.object__seven{
    display: none;
}

/* .message__logo{
    font-size: 3rem;
    font-family: serif;
    letter-spacing: -2px;
    transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    position: absolute;
    top: 58%;
    left: 7%;
} */

.staff__img{
    width: 322px;
    height: auto;
}

.name{
    margin-top: 20px;
}


.staff__group{
    text-align: left;
    position: relative;
}

.staff__groupImg{
    width: 390px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.name__txt{
    border-top: 9px dashed var(--primary-brown);
    padding: 30px 0 0;
    margin-top: 80px
}

.staff__groupTxt{
    border-bottom: 9px dashed var(--primary-brown);
    padding: 0 0 30px;
}

.staff__txt,
.staff__groupTxt{
    margin-top: 30px;
}

.staff__groupTxt span{
    font-size: 1.8rem;
    font-weight: 700;
}

/* section--salon pc */
@media screen and (min-width:769px) {
    h3{
        font-size: 3.6rem;
    }
    .salon{
        display: flex;
        margin-top: 86px;
    }
    .salon__logo{
        font-size: 26rem;
        letter-spacing: -53px;
        position: absolute;
        top: 67px;
        left: 64%;
        transform: translateX(-50%);
    }
    .salonLogo__img{
        width: 230px;
        height: auto;
    }
    .concept__name{
        margin-top: 30px;
    }
    .salon__img{
        width: 420px;
        height: auto;
        margin: 134px 0 0 60px;
    }
    .title{
        font-size: 3.2rem;
        color: var(--primary-darkbrown);
        top: 330px;
        left: 68%;
        transform: translateX(-50%);
    }
    .title span{
        color: var(--primary-darkbrown);
    }

    .pcBr{
        display: block;
    }

    .staff{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .staff__logo{
        font-size: 24rem;
        letter-spacing: -11px;
        opacity: 0.15;
        position: absolute;
        top: -55px;
        left: 72%;
        transform: translateX(-50%);
    }
    .name__group{
        margin: 20px 0 0 60px;
    }
    .object__six{
        display: block;
        width: 126px;
        height: auto;
        position: absolute;
        top: 123%;
        left: 26%;
        transform: translateX(-50%);
    }
    .object__eigth{
        display: block;
        width: 52px;
        height: auto;
        rotate: 164deg;
        position: absolute;
        top: 151%;
        left: 52%;
        transform: translateX(-50%);
    }
    .object__seven{
        display: block;
        width: 52px;
        height: auto;
        rotate: -6deg;
        position: absolute;
        top: 123%;
        left: 99%;
        transform: translateX(-50%);
    }

    .staff__img{
        width: 300px;
        height: auto;
    }
    .staff__group{
        max-width: 634px;
        height: auto;
        margin: 0 0 0 116px;
    }
    
}



/* ================
section--effect
================= */
.section--effect ul{
    padding: 27px 12px;
    margin-top: 65px;
    border: 1px solid var(--primary-brown);
}

.section--effect ul:not(:first-of-type){
    margin-top: 18px;
}

.section--effect ul:first-of-type{
    position: relative;
}

.number__pc{
    display: none;
}


.effect__img{
    width: 300px;
    height: auto;
}

h4{
    font-size: 2rem;
    margin-top: 15px;
    border-bottom: solid 2px var(--primary-ligthbrown);
    line-height: 4;

    /* 下線　2px ligthbrown */
    /* text-decoration: underline 2px var(--primary-ligthbrown);
    text-underline-offset: 20px; */
}

.section--effect p{
    text-align: left;
    margin-top: 16px;
}

.effect_txtBr{
    margin-left: 20px;
}

/* section--effect pc */
@media screen and (min-width:769px) {
    .section--effect ul{
        padding: 52px 46px
    }
    .section--effect ul:first-of-type{
        margin-top: 100px;
        position: relative;
    }
    .section--effect ul:not(:first-of-type){
        margin-top: 30px;
    }
    .number__pc{
        display: block;
    }
    .number__pc:first-of-type{
        width: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
    }

    .section--effect li{
        display: flex;
    }
    .effect__img{
        width: 278px;
        height: auto;
        object-fit: contain;
    }
    .section--effect div{
        padding: 0 48px;
        margin-left: 20px;
    }
    h4{
        margin: 0 0 0 30px;
        text-align: left;
    }
    .section--effect p{
    margin: 30px 10px 0 60px;
    }

    .effect_txtBr{
        display: none;
    }
}


/* ================
section--rec
================= */
.section--rec{
    background-image: url(../image/concept/rec\ _background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.rec__group{
    position: relative;
}

.rec__02,
.rec__03{
    display: none;
}

.rec__04{
    position: absolute;
    top: -44%;
    left: 60%;
    transform: translateX(-50%);
    padding: 0 var(--contentpadding) 0 0;
}

.rec__01{
    position: absolute;
    top: 96%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 0 0 var(--contentpadding);
}

.rec__group ul{
    width: 300px;
    height: auto;
    padding: 33px 30px;
    background-color: rgba(181, 167, 149, 0.5);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: 240px auto 0;
}

.rec__group li{
    margin-top: 15px;
}

.section--rec__txt{
    font-size: 2rem;
    font-family: serif;
    opacity: 0.9;
    margin-top: 303px;
}

.section--rec__txt span{
    font-weight: 700;
}

/* section--rec pc */
@media screen and (min-width:769px) {
    /* .rec__02, */
    .rec__03,
    .rec__04{
        display: block;
    }

    .rec__img{
        margin: 120px auto 0;
        opacity: 0.85;
    }

    .rec__01{
        position: absolute;
        width: 688px;
        height: auto;
        top: 34%;
        left: 24%;
        transform: translateX(-50%);
        padding: 0 0 0 var(--contentpaddingpc);
    }

    /* .rec__02{
        position: absolute;
        width: 517px;
        height: auto;
        top: 12%;
        left: 41%;
        transform: translateX(-50%);
    } */

    .rec__03{
        position: absolute;
        width: 523px;
        height: auto;
        top: 96%;
        left: 76%;
        transform: translateX(-50%);
        padding: 0 2.5% 0 0;
    }

    .rec__04{
        position: absolute;
        width: 571px;
        height: auto;
        top: -33%;
        left: 82%;
        transform: translateX(-50%);
        padding: 0 var(--contentpaddingpc) 0 0;
    }
    
    .rec__group ul{
        width: 600px;
        height: auto;
        padding: 60px 30px;
        font-size: 2rem;
        background-color: rgba(181, 167, 149, 0.5);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin: 319px 0 0 30.5%;
    }

    .rec__group li{
    margin-top: 30px;
    }

    .listPc__txt{
        font-size: 2rem;
        margin-top: 15px;
    }

    .section--rec__txt{
        font-size: 3.6rem;
        margin-top: 530px;
    }

}