@charset "UTF-8";

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

.h_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1680px;
    height: 120px;
}

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

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

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

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

.h-info dl {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.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: 840px;
    margin-top: 120px;
    background: url(/images/key/main_vis_bg.jpg) no-repeat center / cover;
    position: relative;
    overflow: hidden;
}

.main-vis_img {
    margin-top: 70px;
}

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

.main-vis_catch_img:nth-child(1) {
    position: absolute;
    top: 13px;
    left: calc(50% - 960px);
}

.main-vis_catch_img:nth-child(2) {
    position: absolute;
    bottom: 0px;
    right: calc(50% - 960px);
}

@media screen and (max-width: 1920px) {
    .main-vis_catch_img:nth-child(1) {
        left: 0;
    }

    .main-vis_catch_img:nth-child(2) {
        right: 0;
    }
}


/* sub-vis
-------------------*/
.sub-vis {
    display: flex;
    align-items: center;
    width: 100%;
    height: 550px;
    margin-top: 120px;
    background:
        url(/images/key/sv_deco.png) no-repeat top left,
        url(/images/key/sub_vis_bg.jpg) no-repeat center / cover;
    position: relative;
    overflow: hidden;
}

.sub-vis_img {
    position: absolute;
    right: calc(50% - 960px);
}

.sub-vis_title {
    padding-right: 30px;
    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: 111px;
    letter-spacing: 0.01em;
    line-height: 1.1;
    position: relative;
    left: calc(50% - 560px);
    transform: skewX(2deg);
}

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

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


/* top
-------------------*/
.top-greeting {
    height: 950px;
    padding-top: 40px;
    padding-bottom: 185px;
    background:
        url(/images/common/section_star.png) repeat-x bottom 10px center,
        url(/images/common/pattern.png) repeat center;
    background-color: #e0d9d0;
    background-blend-mode: luminosity;
    position: relative;
}

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

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

.top-greeting_wrap {
    padding-left: 440px;
    position: relative;
    z-index: 1;
}

.top-greeting_title {
    width: 823px;
    height: 402px;
}

.top-greeting_txt {
    width: 560px;
}

.top-greeting_btn {
    width: 480px;
    margin-top: 25px;
}

.top-greeting_img {
    position: absolute;
    top: 0;
    left: calc(50% - 960px);
}

.top-campaign {
    padding: 87px 0 100px;
    background:
        url(/images/common/pattern.png) repeat center;
    background-color: #e0d9d0;
    background-blend-mode: luminosity;
    position: relative;
}

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

.top-campaign::after {
    content: "";
    width: 630px;
    height: 430px;
    background: url(/images/top/campaign_deco_r.jpg) no-repeat right / contain;
    position: absolute;
    top: 30px;
    right: calc(50% - 960px);
}

.top-campaign_title {
    width: 908px;
    height: 236px;
    margin-left: -16px;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.top-campaign_title::before {
    content: "";
    width: 473px;
    height: 207px;
    background: url(/images/top/campaign_title_deco.png) no-repeat right / contain;
    position: absolute;
    left: -340px;
    bottom: -49px;
    z-index: -1;
}

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

.top-campaign_box {
    width: 1080px;
    height: 384px;
    padding: 40px;
    background:
        url(/images/common/pattern.png) repeat center;
    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 {
    margin-top: -15px;
    margin-left: -40px;
    margin-bottom: 20px;
}

.top-campaign_box_img {
    position: absolute;
    top: 40px;
    right: 40px;
}

.top-campaign_box_txt {
    font-size: 20px;
    line-height: 1.7;
}

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

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

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

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

.top-payment::before {
    content: "";
    width: 535px;
    height: 316px;
    background: url(/images/top/payment_deco_lt.png) no-repeat left center / contain;
    position: absolute;
    top: -134px;
    left: calc(50% - 960px);
}

.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: 778px;
    height: 289px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.top-payment_box {
    width: 100%;
    height: 210px;
    margin-top: -60px;
    padding-top: 73px;
    background: url(/images/common/pattern.png) repeat center;
    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: 202px;
    height: 183px;
    background: url(/images/top/payment_box_deco.png) no-repeat left top / contain;
    position: absolute;
    right: -46px;
    bottom: -76px;
}

.top-payment_txt {
    font-size: 18px;
    line-height: calc(41 / 18);
    color: #fff;
}



/* inc-contact
-------------------*/
.inc-contact {
    padding: 13px 0 100px;
    background:
        url(/images/common/pattern.png) repeat center;
    background-color: #4e575f;
    background-blend-mode: color-burn;
    position: relative;
}

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

.inc-contact_title {
    width: 1053px;
    height: 340px;
    margin-left: -91px;
    margin-bottom: 10px;
}

.inc-contact_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.inc-contact_txt {
    line-height: calc(36 / 16);
    color: #fff;
    position: relative;
}

.inc-contact_txt::after {
    content: "";
    width: 1px;
    height: 120px;
    background-color: #d3b88e;
    opacity: 0.4;
    position: absolute;
    top: 12px;
    right: -40px;
}

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

.inc-contact_link {
    text-align: center;
}

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

.inc-contact_info dl {
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0em;
    line-height: 1;
}

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

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

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

.inc-page-link_wrapper {
    width: 100%;
}

.inc-page-link_list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 1920px;
    margin: 0 auto;
}

@media screen and (max-width: 1850px) {
    .inc-page-link_list {
        justify-content: center;
        gap: 60px 45px;
    }
}

.inc-page-link_item a {
    width: 610px;
    height: 280px;
    position: relative;
}

.inc-page-link_item_title {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 1;
}

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

.top-news::before {
    content: "";
    width: 491px;
    height: 324px;
    background: url(/images/top/news_deco_lt.png) no-repeat left center / contain;
    position: absolute;
    top: -48px;
    left: calc(50% - 960px);
}

.top-news_wrapper {
    position: relative;
}

.top-news_title {
    width: 533px;
    height: 336px;
    margin-left: -66px;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.top_news_list {
    width: 580px;
    position: absolute;
    top: 60px;
    right: 0;
}

.top-news_btn {
    width: 320px;
    margin-top: -8px;
    margin-left: 37px;
}

.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,
        url(/images/common/pattern.png) repeat center;
    background-color: #e0d9d0;
    background-blend-mode: luminosity;
    position: relative;
}

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

.concept_item {
    position: relative;
}

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

.concept_item_wrap {
    width: 540px;
    height: 520px;
}

.concept_item:nth-child(odd) .concept_item_wrap {
    margin-left: auto;
}

.concept_item:nth-child(even) .concept_item_wrap {
    margin-left: 100px;
    margin-right: auto;
}

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

.concept_item_title::before {
    content: "";
    width: 100px;
    height: 77px;
    position: absolute;
    top: -5px;
    left: -115px;
}

.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 {
    position: absolute;
    top: 0;
}

.concept_item:nth-child(odd) .concept_item_img {
    left: calc(50% - 960px);
}

.concept_item:nth-child(even) .concept_item_img {
    right: calc(50% - 960px);
}

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

.staff_item {
    position: relative;
}

.staff_wrap {
    width: 600px;
    margin-left: auto;
    padding-top: 190px;
}

.staff_wrap_title {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 7px solid #ac4b48;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ac4b48;
    position: relative;
}

.staff_wrap_title::before {
    content: "";
    width: 246px;
    height: 174px;
    background: url(/images/concept/staff_title_deco.png) no-repeat center / contain;
    position: absolute;
    right: 102px;
    bottom: -35px;
}

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

.staff_img {
    box-shadow:
        -9px 9px 1px #fef8ee,
        -18px 18px 1px #ac4b48;
    position: absolute;
    top: 0;
    left: -100px;
}

.staff_txt p:not(:last-of-type) {
    margin-bottom: 20px;
}

/* hair/eyelash menu
-------------------*/
.menu {
    padding-top: 130px;
    background:
        url(/images/common/section_star.png) repeat-x bottom 10px center,
        url(/images/common/pattern.png) repeat center;
    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,
        url(/images/common/pattern_3.png) repeat center;
}

.menu_title {
    margin-bottom: 70px;
}

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

.menu_item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: calc(50% - 20px);
    padding: 3px 20px;
    background: rgba(224, 217, 208, 0.2);
}

.menu_item .fee {
    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: 55px;
    padding: 30px;
    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) repeat center;
    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_title {
    margin-bottom: 70px;
}

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

.info_map {
    margin-top: 40px;
}

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

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

.f-logo {
    display: inline-block;
    margin-bottom: 30px;
}

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

.f-add {
    margin-bottom: 15px;
    font-size: 14px;
}

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

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

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

.f-info_list dd {
    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: 20px 0 45px;
    background-color: #fff;
    font-size: 14px;
    line-height: 1;
    color: #d3b88e;
    text-align: center;
}

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