@charset "utf-8";

/*========================
article header 
/* ===================== */

.main {
    padding-top: 70px;
}

.article__header {
    text-align: center;
    position: relative;
}

.mv {
    color: #86756A;
    text-align: center;
    font-family: Poppins;
    font-size: 3rem;
    font-weight: 600;
    line-height: 50px;
    letter-spacing: 3px;
    background: rgba(255, 255, 255, 0.70);
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 335px;
}

.salo_info_pc {
    display: none;
}

.salo_info_sp {
    height: 500px;
    width: 100%;
    object-fit: cover;
}

/* article header pc */
@media screen and (min-width: 769px) {
    .main {
        padding-top: 90px;
    }
    
    .salo_info_sp {
        display: none;
    }

    .salo_info_pc {
        display: block;
        width: 100%;
        height: 750px;
    }

    .mv {
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 50px; 
    letter-spacing: 4.8px;
    width: 530px;
    padding: 20px 0px;
    }
}/* pc */

/*========================
 saloninfo 
 ========================*/
.section--saloninfo {
    background-color: #F0EBE3;
}

.saloninfo {
    padding: 80px 20px 200px;
    text-align: center;
}

.owner {
    width: 240px;
    object-fit: cover;
}

.owner__voice {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 32px; /* 228.571% */
    margin-top: 30px;
}

.name__title {
    color: #86756A;
    text-align: center;
    font-family: Poppins;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 32px; /* 228.571% */
}

.name {
    text-align: center;
    font-size: 2.3rem;
    font-weight: 500;
    line-height: 32px; /* 139.13% */
    letter-spacing: 3.45px;
}

.alphabet {
    text-align: center;
    font-family: Poppins;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 32px; /* 228.571% */
    letter-spacing: 2.1px;
}

.owner__txt {
    text-align: center;
    font-size: 1.3rem;
    line-height: 2;
    margin-top: 10px;
    padding: 0 10px;
}

.pcBr {
    display: none;
}

.owner__svg {
    height: 170px;
    transform: rotateZ(-22deg) translate(55px, -205px);
    opacity: 0.3;
    color: #CDBBB1;
    position: absolute;
    right: 0;
    overflow: hidden;
}

/* salominfo pc */
@media screen and (min-width: 769px) {
    .saloninfo {
        padding: 150px 100px 150px;
        display: flex;
        justify-content: center;
        gap: 40px;
    }
    
    .owner {
        width: 390px;
        height: 345px;
        object-fit: cover;
    }

    .owner__voice {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 32px; /* 213.333% */
    text-align: left;
    }

    .owner__txt {
    font-size: 1.4rem;
    line-height: 28px; /* 200% */
    text-align: left;
    padding: 0;
    }

    .pcBr {
        display: block;
    }

    .spBr {
        display: none;
    }

    .owner__voice {
        margin-top: 0;
    }

    .owner__voiceGroup {
        text-align: left;
    }

    .name__title {
        text-align: left;
    }

    .name {
        text-align: left;
    }

    .alphabet {
        text-align: left;
    }

    .name-group {
        margin-top: 30px;
    }

    .owner__svg {
        height: 250px;
        transform: rotateZ(-22deg) translate(62px, -260px);
    }
}/* pc */

/* =======================
reason 
========================*/
.section--reason {
    background-image: url(../images/background_concept.png);
}

.reason {
    padding: 80px 20px 0;
    text-align: center;
}

.reasonTitle {
    color: #86756A;
    font-family: "Noto Sans JP";
    font-size: 3rem;
    font-weight: 700;
    line-height: 32px; /* 106.667% */
    letter-spacing: 1.2px;
    position: relative;
}

.reasonTitle::before {
    position: absolute;
    border-bottom: 2px solid #86756A;
    top: 160%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    content: '';
}

.reasonImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reason-wakuPc {
    max-width: 270px;
    max-height: 210px;
    position: relative;
    margin: 0 auto;
    margin-top: 30px;
}

.reason-wakuPc::after {
    content: '';
    display: block;
    width: 115%;
    height: 100%;
    border: 2px solid#86756A;
    position: absolute;
    top: 20px;
    right: -20px;
    z-index: 1;
}

.reason-wakuPc img {
    position: relative;
    z-index: 2;
    max-width: 270px;
    max-height: 210px;
}

.reason01 {
    margin: 80px auto 0;
    max-width: 600px;
}

.reason__title {
    color: #86756A;
    font-size: 2.5rem;
    line-height: 32px; /* 128% */
    letter-spacing: 1px;
    margin-top: 35px;
}

.reason__txt {
    font-size: 15px;
    line-height: 2;
    text-align: left;
    padding: 0 25px; 
    margin-top: 10px;
}

.reason02 {
    margin: 80px auto 0;
    max-width: 600px;
}

.reason03 {
    margin: 80px auto 0;
    max-width: 600px;
}

.reason04 {
    margin: 80px auto 0;
    max-width: 600px;
}

.point-sp__svg {
    width: 180px;
    height: 200px;
    transform: rotateZ(12deg) translate(-87px, 18px);
}

/* reason pc */
@media screen and (min-width: 769px) {
    .reasonTitle {
        font-size: 5rem;
        font-weight: 700;
        line-height: 32px; /* 64% */
        letter-spacing: 2px;
    }

    .reason {
        padding: 150px 100px 150px;
        text-align: center;
    }

    .reasonTitle::before {
        top: 80px;
        width: 310px;
    }

    .reason-wakuPc {
        width: 500px;
        height: 450px;
        margin: 0 auto;
        max-width: none;
        max-height: none;
    }

    .reason-wakuPc img {
        max-width: none;
        max-height: none;
        width: 500px;
        height: 450px;
    }

    .reason-wakuPc::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        border: 2px solid#86756A;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 1;
    }

    .reason__title {
        font-size: 4rem;
        line-height: 1.2; 
        letter-spacing: 1.6px;
        margin-top: 0;
        text-align: left;
    }

    .reason__txt {
        font-size: 1.6rem;
        line-height: 32px;
        margin-top: 30px;
        padding: 0;
    }

    .reason01 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row-reverse;
        margin: 130px auto;
        gap: 50px;
        max-width: 1240px;
        padding: 0 120px;
    }

    .reason02 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 130px auto;
        gap: 50px;
        max-width: 1240px;
        padding: 0 120px;
    }

    .reason03 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row-reverse;
        margin: 130px auto;
        gap: 50px;
        max-width: 1240px;
        padding: 0 120px;
    }

    .reason04 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        gap: 50px;
        max-width: 1240px;
        padding: 0 120px;
    }

    /* .reason__point {
        flex: 1;
    } */

    .point-sp__svg {
        display: none;
    }

}

/* footer */
.footer__container {
    margin-top: 0;
}