@charset "utf-8";

/* 共通 */
.anchor {
    position: relative;
    z-index: -99;
    pointer-events: none;
    padding-top: 80px;
    margin-top: -80px;
}

.inWrap {
    padding-top: 70px;
}

.inBtm {
    padding-bottom: 70px;
}

.area {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

.inArea01 {
    width: 100%;
    max-width: 1350px;
    padding: 0 15px;
    margin: 0 auto;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
テキスト
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.inTxt01 {
    font-size: clamp(13px, calc(0.8125rem + ((1vw - 3.75px) * 0.1942)), 16px);
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2em;
}

.inTxt01 span {
    font-size: 150%;
}

.inTxt02 {
    font-size: clamp(14px, calc(0.8125rem + ((1vw - 3.75px) * 0.3236)), 18px);
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 2em;
}

.inTxt02 span {
    font-size: 150%;
}

.inTxt03 {
    font-size: clamp(12px, 11.515px + 0.129vw, 14px);
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 2em;
}

.mtTxt p:nth-of-type(n + 2) {
    margin: 15px 0 0;
}

.inTit01 {
    font-size: clamp(20px, 15.631px + 1.165vw, 38px);
    font-family: var(--font-family02);
    letter-spacing: 0;
    line-height: 1.45;
    font-weight: 500;
}

.inTit02 {
    font-size: clamp(24px, 16.961px + 1.877vw, 53px);
    font-family: var(--font-family03);
    letter-spacing: 0;
    line-height: 1.45;
    font-weight: 400;
}

/* .inTit01 {
    font-size: clamp(20px, 15.631px + 1.165vw, 38px);
    font-family: var(--font-family03);
    letter-spacing: 0;
    line-height: 1.45;
    font-weight: 400;
} */

.inSubtit01 {
    font-size: clamp(13px, calc(0.8125rem + ((1vw - 3.75px) * 0.1942)), 16px);
    font-weight: 400;
    letter-spacing: 0em;
    line-height: 1.45em;
    font-family: var(--font-family02);
}

.inLink a {
    color: inherit;
    text-decoration: underline;
}

.inLink a:hover {
    color: inherit;
    text-decoration: none;
}

/*-----------------------------------------------------------
テキスト
-----------------------------------------------------------*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
パンくず
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.pankuzuWr {
    margin: 0 auto;
    max-width: 1920px;
    width: 100%;
}

.pankuzuAr {
    margin: 0 auto;
    padding: 10px 15px 0;
    max-width: 1350px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 500;
    font-size: 14px;
}

.pankuzuLink {
    font-size: 14px;
    display: flex;
    align-items: center;
    color: var(--black);
}

.pankuzuLink:hover {
    color: var(--black);
    text-decoration: underline;
}

.pankuzuTxt {
    font-size: 14px;
    line-height: 1.5em;
}

.pankuzuLink>p {
    text-decoration: none;
}

.pankuzuLink:hover>p {
    text-decoration: underline;
}

/*-----------------------------------------------------------
パンくず
-----------------------------------------------------------*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
下層カバー
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.cover {
    position: relative;
    width: 100%;
    height: 300px;
}

.cover::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #7C868E;
    mix-blend-mode: multiply;
}

.cvrAr {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1350px;
    height: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.cvrBx {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: max-content;
    margin: auto 0;
    padding: 20px 0 0;
    color: #C7C7C7;
}

.cvrTit {
    position: relative;
    margin: 0 20px 0 0;
    font-size: 30px;
    letter-spacing: 0em;
    line-height: 1.3em;
    font-weight: 400;
    font-family: var(--font-family03);
}

.cvrTxt {
    font-size: 18px;
    letter-spacing: 0em;
    line-height: 1.5em;
    font-weight: 400;
}

/*-----------------------------------------------------------
コンセプト
-----------------------------------------------------------*/

.conceptReadBg {
    position: relative;
}

.conceptReadBg::before {
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    max-width: 1620px;
    background: var(--white);
    filter: drop-shadow(3px 3px 35px rgba(0, 0, 0, .04));
}

.conceptLinkItem {
    position: relative;
}

.conceptLinkItem::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: #7C868E;
    mix-blend-mode: multiply;
    transition: all .3s;
}

.conceptLinkItem:hover::before {
    opacity: .5;
}

.conceptLinkBg {
    position: relative
}

.conceptLinkBg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: -1;
    width: 100%;
    max-width: 1420px;
    background: var(--white);
    filter: drop-shadow(3px 3px 35px rgba(0, 0, 0, .04));
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    メニュー
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.inMenuAr {
    max-width: 1680px;
}


.inMenuTitBx {
    color: var(--primary);
}

.inMenuFl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.inMenuFlCol {
    width: 100%;
    max-width: 800px;
}

.inMenuFlCol:nth-of-type(n+2) {
    margin: 45px 0 0;
}

.inMenuListItem:nth-of-type(n+2) {
    margin: 45px 0 0;
}

.inMenuItemTitBx {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    padding: 0 0 5px 0;
    border-bottom: 1px solid var(--primary);
}

.inMenuItemCate {
    font-size: clamp(20px, 15.146px + 1.294vw, 40px);
    color: var(--primary);
}

.inMenuItemTitAddTxtBx {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.inMenuListBx {
    margin: 15px 0 0;
}

.inMenuListTr {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #B7B7B7;
}

.inMenuListTr:first-child {
    padding: 0 0 12px;
}

.inMenuListTh {
    flex: 1;
}

.inMenuListTd {
    width: 100%;
    max-width: max-content;
    margin: 0 0 0 auto;
}

.inMenuListTit {
    font-size: clamp(16px, 15.029px + 0.259vw, 20px);
    color: var(--primary);
}

.inMenuListTxtBx {
    margin: 5px 0 0;
    font-size: clamp(13px, 12.515px + 0.129vw, 15px);
}

.inMenuListPrice {
    font-size: clamp(17px, 16.272px + 0.194vw, 20px);
}

.inReadPointBg::before {
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    max-width: 1620px;
    background: var(--white);
    filter: drop-shadow(3px 3px 35px rgba(0, 0, 0, .04));
}


/*-----------------------------------------------------------
メニュー
-----------------------------------------------------------*/

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
スタッフ
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* .staffBx {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
} */

.staffBx {
    margin: 60px auto 0 0;
    display: inline-block;
    width: 100%;
    position: relative;
}

.staffBx:first-child {
    margin: 0 auto 0 0;
}

.staffBx:nth-of-type(even) {
    margin: 60px 0 0 auto;
}

.staffBx01 {
    max-width: 1427px;
}

.staffBx02 {
    max-width: 1888px;
}

.staffBx03 {
    max-width: 1890px;
}

.staffBx04 {
    max-width: 1469px;
}

.staffItem {
    margin: 0 auto 0 auto;
    position: relative;
}

.staffBx:nth-of-type(even) .staffItem {
    margin: 0 auto 0 auto;
}

.staffItem::before {
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    max-width: 1220px;
    background: var(--white);
    filter: drop-shadow(3px 3px 35px rgba(0, 0, 0, .04));
}

.staffBx:nth-of-type(even) .staffItem::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: -1;
    width: 100%;
    max-width: 1220px;
    background: var(--white);
    filter: drop-shadow(3px 3px 35px rgba(0, 0, 0, .04));
}

.staffItemNameBx {
    gap: 10px 20px;
}

.staffItemName {
    font-size: clamp(18px, 16.544px + 0.388vw, 24px);
    letter-spacing: 0;
}

.staffImgBx {
    overflow: hidden;
    aspect-ratio: 52/59;
}

.staffImgBx img{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.staffEnTitleBox {
    width: 100%;
    z-index: 1;
}

.staff-en-title04 {
    margin: 0;
    text-align: center;
}

.staffText01 {
    font-size: clamp(13px, 12.515px + 0.129vw, 15px);
}

/*-----------------------------------------------------------
ご予約について
-----------------------------------------------------------*/

.mycolle-area01 {
	gap: 20px;
}

.mycolle-area02 {
    gap: 40px 11.9%;
}

.mycolle-btn-area .btn02 {
    padding: 12px 4% 14px 10px;
}

/*===========================================================
サロン紹介
===========================================================*/

.salonEnTitleBox01 {
    margin: 0 0 30px;
}

.salonWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.salon-en-title03 {
    margin: 0;
    line-height: 1.2em;
    opacity: .55;
}

.salonRootWr::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: -1;
    width: 100%;
    max-width: 1740px;
    background: var(--white);
    filter: drop-shadow(3px 3px 35px rgba(0, 0, 0, .04));
}

.salonCancelBx::before {
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    max-width: 1620px;
    background: var(--bg-tertiary);
    filter: drop-shadow(3px 3px 35px rgba(0, 0, 0, .04));
}

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


    /*===========================================================

===========================================================*/



}

/* min-width: 414px ここまで */


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


    /*===========================================================

===========================================================*/



}

/* min-width: 544px ここまで */


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

    .inWrap {
        padding-top: 140px;
    }

    .inBtm {
        padding-bottom: 140px;
    }

    .anchor {
        margin-top: -120px;
        padding-top: 120px;
    }

    .mtTxt p:nth-of-type(n + 2) {
        margin: 35px 0 0;
    }

    /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    下層カバー
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

    .cover {
        height: 400px;
    }

    .cvrBx {
        flex-direction: row;
        align-items: baseline;
    }

    .cvrTit {
        font-size: 45px;
    }

    .cvrTxt {
        font-size: 21px;
    }

    /*-----------------------------------------------------------
    コンセプト
    -----------------------------------------------------------*/

    .conceptReadBg::before {
        width: calc(100% - 15px);
        border-radius: 0 100vmax 100vmax 0;
    }

    .conceptLinkBg::before {
        width: calc(100% - 15px);
        border-radius: 100vmax 0 0 100vmax;
    }

    /*===========================================================

===========================================================*/


    /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    メニュー
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

    .inMenuItemTitBx {
        flex-direction: row;
        gap: 10px;
    }

    .inMenuListBx {
        margin: 30px 0 0;
    }

    .inMenuListTr {
        flex-direction: row;
        gap: 10px;
        align-items: flex-end;
        padding: 18px 0;
    }

    .inMenuListTr:first-child {
        padding: 0 0 18px;
    }

    .inMenuListItem:nth-of-type(n+2) {
        margin: 60px 0 0;
    }

    .inMenuItemTitBx {
        padding: 0 0 10px 0;
    }

    .inReadPointBg::before {
        width: calc(100% - 15px);
        border-radius: 0 100vmax 100vmax 0;
    }

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

    .staffItem {
        margin: 0 auto 0 0;
        padding: 50px 13% 60px 25px !important;
        position: relative;
    }

    .staffBx:nth-of-type(even) .staffItem {
        margin: 0 0 0 auto;
        padding: 50px 25px 60px 13% !important;
    }

    .staffItem::before {
        left: 0;
        right: auto;
        width: calc(100% - 15px);
        border-radius: 0 100vmax 100vmax 0;
    }

    .staffBx:nth-of-type(even) .staffItem::before {
        left: auto;  /* 左固定を解除 ★これが必要 */
        right: 0;
        width: calc(100% - 15px);
        border-radius: 100vmax 0 0 100vmax;
    }

    .staff-en-title04 {
        text-align: right;
    }

    .staffBx:nth-of-type(even) .staff-en-title04 {
        text-align: left;
    }

    /*-----------------------------------------------------------
    サロン紹介
    -----------------------------------------------------------*/

    .salonRootWr::before {
        width: calc(100% - 15px);
        border-radius: 100vmax 0 0 100vmax;
    }

    .salonCancelBx::before {
        width: calc(100% - 15px);
        border-radius: 0 100vmax 100vmax 0;
    }

}

/* min-width: 768px ここまで */


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

    /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    下層カバー
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

    .cvrTit::before {
        width: 125%;
    }

    .cvrTit {
        font-size: 60px;
    }

    .cvrTxt {
        font-size: 24px;
    }

    /*-----------------------------------------------------------
    下層カバー
    -----------------------------------------------------------*/

    /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    メニュー
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

    .inMenuFl {
        flex-direction: row;
        align-items: flex-start;
    }

    .inMenuFlCol {
        width: 47.5%;
    }

    .inMenuFlCol:nth-of-type(n+2) {
        margin: 0;
    }

    .inMenuListItem:nth-of-type(n+2) {
        margin: 80px 0 0;
    }

    .inMenuListTr {
        padding: 24px 0;
    }

    .inMenuListTr:first-child {
        padding: 0 0 24px;
    }

    /*-----------------------------------------------------------
    メニュー
    -----------------------------------------------------------*/

    /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	スタッフ
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

    /* .staffBx {
        grid-template-columns: repeat(2, 1fr);
    } */

    .staffBx {
        margin: 80px auto 0 0;
    }

    .staffBx:first-child {
        margin: 0 auto 0 0;
    }

    .staffBx:nth-of-type(even) {
        margin: 80px 0 0 auto;
    }

    .staffItem {
        padding: 90px 13% 100px 25px !important;
    }

    .staffBx:nth-of-type(even) .staffItem  {
        padding: 90px 25px 100px 13% !important;
    }

    .staffItemTr {
        flex-direction: column !important;
    }

    .staffItemTh {
        width: 100% !important;
    }

    /*-----------------------------------------------------------
	スタッフ
	-----------------------------------------------------------*/

/*===========================================================

===========================================================*/



}

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


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


/*===========================================================

===========================================================*/

/*===========================================================
サロン紹介
===========================================================*/

    .salonEnTitleBox01 {
        margin: 0;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }

    .salonWrap {
        flex-direction: row;
    }

}

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


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

    .conceptLinkItemIn {
        padding: 30px !important;
    }

    .staffItemNameBx {
        flex-direction: row !important;
    }

    .staffItemName {
        margin: 0 !important;
        text-align: right !important;
    }

    .staffItemTr {
        flex-direction: row !important;
    }

    .staffItemTh {
        width: 25% !important;
    }

    .salonVertical {
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }

    .staffBx {
        display: flex;
        flex-direction: row-reverse;
    }

    .staffBx:nth-of-type(even) {
        flex-direction: row;
    }

    .salonVertical {
        height: max-content;
    }

    .staffEnTitleBox {
        width: auto;
    }

    .staffEnTitleBox01 {
        max-width: 424px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

    .staffEnTitleBox02 {
        max-width: 779px;
        position: absolute;
        bottom: 3%;
        left: 0;
        margin: auto;
    }

    .staffEnTitleBox03 {
        max-width: 879px;
        position: absolute;
        bottom: 3%;
        right: 0;
        margin: auto;
    }

    .staffEnTitleBox04 {
        max-width: 444px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

/*===========================================================

===========================================================*/

}

/* min-width: 1440px ここまで */


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

/* min-width: 1520px ここまで */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */