@charset "UTF-8";


/* header
-------------------*/
.header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 75px;
    background: url(/images/common/pattern.png) no-repeat center / cover;
    background-blend-mode: color-burn;
    background-color: #3b444b;
    position: fixed;
    top: 0;
    z-index: 50;
}


.h-logo {
    width: 200px;
}

.h-logo img {
    vertical-align: baseline;
}

.h-wrap {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 18px;
    line-height: 1;
}

.drawer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.h-tel {
    width: 100%;
    font-size: 27px;
}

.h-tel::before {
    width: 43px;
    height: 32px;
    margin-right: 10px;
}

.h-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    font-size: 12px;
    letter-spacing: 0em;
    color: #fff;
}

.h-instagram {
    width: 30px;
    height: 30px;
}

.h-info dl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
}

.h-info dt {
    width: 62px;
    padding: 1px 0;
    background-color: #fff7eb;
    color: #4e575f;
    text-align: center;
}

.h-info dd {
    flex: 1;
}

.h-nav_list {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    width: 100%;
    font-size: 15px;
    color: #fff7eb;
}

.h-nav_link {
    padding-bottom: 5px;
    border-bottom: 1px solid #fff;
}


/* main-vis
-------------------*/
.main-vis {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 95vw;
    min-height: 356px;
    margin-top: 75px;
    background: url(/images/key/main_vis_bg.jpg) no-repeat center left 25% / cover;
    position: relative;
    overflow: hidden;
}

.main-vis_img {
    width: 100%;
    height: 66.666vw;
    min-height: 250px;
    margin-top: 10%;
}

.main-vis_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-vis_catch {
    width: 100%;
    height: 100%;
    position: absolute;
}

.main-vis_catch_img:nth-child(1) {
    width: 110%;
    position: absolute;
    top: 5%;
    left: -11%;
}

.main-vis_catch_img:nth-child(2) {
    width: 75%;
    position: absolute;
    bottom: 5%;
    right: -8%;
}


/* sub-vis
-------------------*/
.sub-vis {
    width: 100%;
    padding: 20px 20px 30px;
    margin-top: 75px;
    background:
        url(/images/key/sv_deco.png) no-repeat top left / 60%,
        url(/images/key/sub_vis_bg.jpg) no-repeat center / cover;
    position: relative;
    overflow: hidden;
    text-align: right;
}

.sub-vis_img {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.sub-vis_img img {
    width: 100%;
    object-fit: cover;
}

.sub-vis_title {
    display: inline-block;
    margin-top: 10px;
    padding-left: 50px;
    padding-right: 10px;
    background: url(/images/common/pattern_title.png) no-repeat center;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: #ac4b48;
    font-family: "Anton";
    font-style: italic;
    font-size: 45px;
    letter-spacing: 0.01em;
    line-height: 1.1;
    white-space: nowrap;
    position: relative;
    transform: skewX(2deg);
}

.sub-vis_title::before {
    content: "";
    width: 130px;
    height: 110px;
    background: url(/images/key/sv_title_deco.png) no-repeat center / contain;
    position: absolute;
    top: -40px;
    left: -40px;
}

.sub-vis_title::after {
    content: "";
    display: block;
    width: calc(100% + 5px);
    height: 5px;
    margin-left: 0px;
    background-color: #ac4b48;
}


/* top
-------------------*/
.top-greeting {
    padding: 5% 0 30%;
    background:
        url(/images/common/section_star.png) repeat-x bottom 10px center / 20px,
        url(/images/common/pattern.png) no-repeat center / cover;
    background-color: #e0d9d0;
    background-blend-mode: luminosity;
    position: relative;
}

.top-greeting::before {
    content: "";
    width: 150%;
    height: 618px;
    background: url(/images/top/greeting_deco_rt.png) no-repeat top right / contain;
    position: absolute;
    top: -20px;
    right: 0;
}

.top-greeting::after {
    content: "";
    width: 50%;
    height: 626px;
    background: url(/images/top/greeting_deco_rb.png) no-repeat bottom right / contain;
    position: absolute;
    bottom: 38px;
    right: 0;
}

.top-greeting_wrap {
    position: relative;
    z-index: 1;
}

.top-greeting_title {
    width: 100%;
    margin-bottom: 5%;
}

.top-greeting_btn {
    margin-top: 30px;
}

.top-greeting_img {
    margin-top: 60px;
    position: relative;
}

.top-campaign {
    padding: 30% 0 20%;
    background:
        url(/images/common/pattern.png) no-repeat center / cover;
    background-color: #e0d9d0;
    background-blend-mode: luminosity;
    position: relative;
}

.top-campaign::before {
    content: "";
    width: 50%;
    height: 657px;
    background: url(/images/top/campaign_deco_l.png) no-repeat top left / contain;
    position: absolute;
    top: 0px;
    left: 0;
}

.top-campaign::after {
    content: "";
    display: block;
    width: 65%;
    height: 44vw;
    min-height: 165px;
    margin-left: auto;
    background: url(/images/top/campaign_deco_r.jpg) no-repeat right / contain;
    position: absolute;
    top: 3%;
    right: -10%;
}

.top-campaign_title {
    width: 110%;
    margin-bottom: 5%;
    position: relative;
    z-index: 2;
}

.top-campaign_title::before {
    content: "";
    width: 60%;
    height: 26.666vw;
    min-height: 100px;
    background: url(/images/top/campaign_title_deco.png) no-repeat right / contain;
    position: absolute;
    left: -30%;
    bottom: -10%;
    z-index: -1;
}

.top-campaign_title::after {
    content: "";
    width: 100vw;
    height: 1.866vw;
    min-height: 7px;
    background-color: #4c555c;
    position: absolute;
    right: 50%;
    bottom: 15%;
    z-index: -2;
}

.top-campaign_box {
    width: 100%;
    padding: 30px 25px 40px;
    background:
        url(/images/common/pattern.png) no-repeat center / cover;
    background-color: #fdf7ed;
    background-blend-mode: luminosity;
    outline: 6px solid #4c555c;
    outline-offset: -12px;
    box-shadow: 2px 2px 0px #4c555c;
    position: relative;
    z-index: 1;
}

.top-campaign_box_title {
    width: 305px;
    margin-top: -10px;
    margin-left: -30px;
    margin-bottom: 20px;
}

.top-campaign_box_img {
    margin-bottom: 20px;
    position: relative;
}

.top-campaign_box_txt {
    font-size: 14px;
    line-height: 1.6;
}

.top-campaign_box_txt p::first-line {
    line-height: 2.1;
}

.top-campaign_box_txt .deco {
    margin-right: 3px;
    padding: 2px 3px 0;
    background-color: #ac4b48;
    color: #fef8ee;
}

.top-campaign_box_txt .num {
    font-size: 20px;
}

.top-payment {
    padding: 20% 0 30%;
    background:
        url(/images/common/section_star.png) repeat-x bottom 10px center / 20px,
        url(/images/top/payment_deco_lb.png) no-repeat bottom 0 left -20% / 50%,
        url(/images/top/payment_bg.jpg) no-repeat center / cover;
    position: relative;
}

.top-payment::before {
    content: "";
    width: 50%;
    height: 29.599vw;
    min-height: 111px;
    background: url(/images/top/payment_deco_lt.png) no-repeat left center / contain;
    position: absolute;
    top: -13%;
    left: 0;
}

.top-payment::after {
    content: "";
    width: 348px;
    height: 219px;
    background: url(/images/top/payment_deco_rb.png) no-repeat left center / contain;
    position: absolute;
    bottom: 40px;
    right: calc(50% - 960px);
}

.top-payment_title {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.top-payment_box {
    width: 100%;
    margin-top: -30px;
    padding: 50px 25px 80px;
    background: url(/images/common/pattern.png) no-repeat center / cover;
    background-color: #4e575f;
    background-blend-mode: color-burn;
    outline: 4px solid #f2ebe2;
    outline-offset: -8px;
    text-align: center;
    position: relative;
}

.top-payment_box::after {
    content: "";
    width: 134px;
    min-height: 126px;
    background: url(/images/top/payment_box_deco.png) no-repeat left top / contain;
    position: absolute;
    right: -5%;
    bottom: -25%;
}

.top-payment_txt {
    font-size: 14px;
    color: #fff;
    text-align: left;
}



/* inc-contact
-------------------*/
.inc-contact {
    padding: 5% 0 20%;
    background:
        url(/images/common/pattern.png) no-repeat center / cover;
    background-color: #4e575f;
    background-blend-mode: color-burn;
    position: relative;
}

.inc-contact::before {
    content: "";
    width: 80%;
    height: 657px;
    background: url(/images/inc-contact/deco.png) no-repeat top right / contain;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.inc-contact_title {
    width: 120%;
    margin-bottom: 10%;
    margin-left: -5%;
}

.inc-contact_wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.inc-contact_txt {
    padding-bottom: 30px;
    color: #fff;
    position: relative;
}

.inc-contact_txt::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #d3b88e;
    opacity: 0.4;
    position: absolute;
    bottom: 0;
    right: 0;
}

.inc-contact_txt .note {
    margin-top: 18px;
}

.inc-contact_link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.inc-contact_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.inc-contact_info dl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    letter-spacing: 0em;
    line-height: 1.6;
}

.inc-contact_info dt {
    width: 62px;
    padding: 1px 0;
    background-color: #d3b88e;
    font-size: 13px;
    text-align: center;
    color: #4e575f;
}

.inc-contact_info dd {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

/* inc-page-link
-------------------*/
.inc-page-link {
    padding: 20% 0;
    background:
        url(/images/common/section_star.png) repeat-x top 10px center / 20px,
        url(/images/common/pattern.png) no-repeat center / cover;
    background-color: #e0d9d0;
    background-blend-mode: luminosity;
    position: relative;
}

.inc-page-link_list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 40px;
}

.inc-page-link_item {
    width: 100%;
    height: auto;
}

.inc-page-link_item a {
    display: block;
    width: 100%;
    position: relative;
}

.inc-page-link_item_title {
    width: 100%;
    height: 50%;
    position: absolute;
    top: -20px;
    left: 0;
    z-index: 1;
}

.inc-page-link_item_title img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;
}

.inc-page-link_item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* top-news
-------------------*/
.top-news {
    padding: 20% 0 20%;
    background:
        url(/images/top/news_deco_rb.png) no-repeat right -20% bottom / 50%,
        url(/images/common/pattern_2.png) no-repeat center / cover;
    background-color: #b8b1a8;
    background-blend-mode: luminosity;
    position: relative;
}

.top-news::before {
    content: "";
    width: 50%;
    height: 33.066vw;
    min-height: 124px;
    background: url(/images/top/news_deco_lt.png) no-repeat left center / contain;
    position: absolute;
    top: -48px;
    left: 0;
}

.top-news_wrapper {
    position: relative;
}

.top-news_title {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 50px;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.top_news_list {
    width: 100%;
}

.top-news_content {
    width: 100%;
}

.top-news_btn {
    margin-top: 50px;
}

.top-news_empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 580px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

/* concept
-------------------*/
.concept {
    background:
        url(/images/common/section_star.png) repeat-x bottom 10px center / 20px,
        url(/images/common/pattern.png) no-repeat center / cover;
    background-color: #e0d9d0;
    background-blend-mode: luminosity;
    position: relative;
}

.concept::before {
    content: "";
    width: 50%;
    height: 120px;
    background: url(/images/concept/deco_rt.png) no-repeat right center / contain;
    position: absolute;
    top: 20px;
    right: -70px;
}

.concept_item {
    position: relative;
}

.concept_item:not(:last-child) {
    margin-bottom: 60px;
}

.concept_item_wrap {
    width: 100%;
}

.concept_item_title {
    width: 100%;
    padding: 10px 20px;
    margin-bottom: 20px;
    margin-left: auto;
    background: url(/images/common/pattern_title.png) no-repeat center;
    background-color: #ac4b48;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    position: relative;
}

.concept_item_title::before {
    content: "";
    width: 60px;
    height: 50px;
    position: absolute;
    top: -40px;
    left: 0px;
}

.concept_item:nth-of-type(1) .concept_item_title::before {
    background: url(/images/concept/num01.png) no-repeat center right / contain;
}

.concept_item:nth-of-type(2) .concept_item_title::before {
    background: url(/images/concept/num02.png) no-repeat center right / contain;
}

.concept_item:nth-of-type(3) .concept_item_title::before {
    background: url(/images/concept/num03.png) no-repeat center right / contain;
}

.concept_item_img {
    margin-bottom: 20px;
    position: relative;
}

.staff {
    background:
        url(/images/common/pattern.png) no-repeat center / cover;
    background-color: #e0d9d0;
    background-blend-mode: luminosity;
    position: relative;
}

.staff_item {
    position: relative;
}

.staff_wrap {
    width: 100%;
}

.staff_wrap_title {
    margin-top: 60px;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 3px solid #ac4b48;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ac4b48;
    position: relative;
}

.staff_wrap_title::before {
    content: "";
    width: 140px;
    height: 100px;
    background: url(/images/concept/staff_title_deco.png) no-repeat center / contain;
    position: absolute;
    right: 0;
    bottom: -25px;
}

.staff_wrap_title .rubi {
    font-size: 16px;
}

.staff_img {
    width: 335px;
    margin: 0 auto 25px;
    box-shadow:
        -4px 4px 1px #fef8ee,
        -8px 8px 1px #ac4b48;
    position: relative;
}

/* hair/eyelash menu
-------------------*/
.menu {
    background:
        url(/images/common/section_star.png) repeat-x bottom 10px center / 20px,
        url(/images/common/pattern.png) no-repeat center / cover;
    background-color: #e0d9d0;
    background-blend-mode: luminosity;
    position: relative;
}

.menu:nth-of-type(even) {
    background:
        url(/images/common/section_star.png) repeat-x bottom 10px center / 20px,
        url(/images/common/pattern_3.png) repeat center;
}

.menu_title {
    margin-bottom: 50px;
}

.menu_list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
    background-color: #fff;
}

.menu_item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    padding: 5px 10px;
    background: rgba(224, 217, 208, 0.2);
}

.menu_item .fee {
    margin-left: auto;
    font-size: 14px;
    line-height: calc(28 / 14);
    text-align: right;
    color: #ac4b48;
}

.menu_list .note {
    width: 100%;
    margin-top: 10px;
    padding: 6px 20px;
    background-color: #3b444b;
    font-size: 13px;
    text-align: center;
    color: #fff;
}

.menu_note {
    width: 100%;
    margin-top: 30px;
    padding: 15px 20px;
    border: 1px solid #ac4b48;
    background-color: #fdf7ed;
    text-align: center;
    color: #ac4b48;
}

/* info
-------------------*/
.info {
    background:
        url(/images/common/section_star.png) repeat-x bottom 10px center,
        url(/images/common/pattern.png) no-repeat center / cover;
    background-color: #e0d9d0;
    background-blend-mode: luminosity;
    position: relative;
}

.info::before {
    content: "";
    width: 349px;
    height: 219px;
    background: url(/images/access/deco_rt.png) no-repeat right center / contain;
    position: absolute;
    top: 50px;
    right: calc(50% - 960px);
}

.info::after {
    content: "";
    width: 535px;
    height: 316px;
    background: url(/images/access/deco_lb.png) no-repeat left center / contain;
    position: absolute;
    bottom: 60px;
    left: calc(50% - 960px);
}

.info_box {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.info_map {
    margin-top: 40px;
}

.info_map iframe {
    width: 100%;
    height: 250px;
    border: none;
}

/* footer
-------------------*/
.f-top {
    width: 100%;
    padding: 50px 0 80px;
    background: url(/images/common/pattern.png) no-repeat center / cover;
    background-blend-mode: color-burn;
    background-color: #4e575f;
    color: #fff;
}

.f-logo {
    display: block;
    width: 240px;
    margin: 0 auto 40px;
}

.f-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.f-add {
    margin-bottom: 30px;
    font-size: 14px;
    text-align: center;
}

.f-info_list dl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
    letter-spacing: 0em;
}

.f-info_list dl:not(:last-child) {
    margin-bottom: 10px;
}

.f-info_list dt {
    width: 62px;
    padding: 1px 0;
    background-color: #fff;
    font-size: 13px;
    color: #4e575f;
    text-align: center;
}

.f-info_list dd {
    flex: 1;
    font-size: 12px;
}

.f-link {
    text-align: right;
}

.f-tel {
    margin-bottom: 25px;
}

.f-nav_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 25px 15px;
    width: 463px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.05em;
}

.copyright {
    padding: 15px 0 30px;
    background-color: #fff;
    font-size: 11px;
    line-height: 1;
    color: #d3b88e;
    text-align: center;
}




/*# sourceMappingURL=style_sp.css.map */