@charset "utf-8";

/********************************
/********************************
/********************************

l_common

********************************/

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
input,
button,
p {
    color: #333;
}

h2 {
    margin-bottom: 40px;
}

.mb80 {
    margin-bottom: 80px;
}

.mb100 {
    margin-bottom: 100px;
}

.pb0 {
    padding-bottom: 0;
}

.tab_sm,
.sm_only {
    display: none;
}

.sp_only{
      display: none;
    }


/* fonts */
.cabin {
    font-family: 'Cabin', sans-serif;
    font-weight: 700;
}

.josefin {
    font-family: 'Josefin Sans', "YuGothic", 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
}

.selif {
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "Sawarabi Mincho", serif;
}

h2 {
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "Sawarabi Mincho", serif;
    text-align: center;
    font-size: 291.6666%;
    /* 48px */
    color: #6B574E;
    letter-spacing: .1em;
    font-weight: 400;
    position: relative;
    margin-bottom: 1em;
}

/*見出しH２デザイン*/

.toph2:before {
  content: '';
  position: absolute;
  bottom: -8px;
  display: inline-block;
  width: 180px;
  height: 1px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #6B574E;
  border-radius: 2px;
}


h3 {
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "Sawarabi Mincho", serif;
    color: #6B574E;
    padding: .25em 0;
    font-weight: normal;
}


/*H3旧デザイン

h3 {
    font-family: 'Josefin Sans', YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    text-align: center;
    color: #6B574E;
    border: 1px solid #b29d73;
    padding: .25em 0;
    font-weight: normal;
}

*/

/* flex */
.columnsb {
    -ms-flex-line-pack: justify;
    -webkit-align-content: space-between;
    align-content: space-between;
}

.fead-mv {
    opacity: 0;
    -webkit-transition: .8s;
    transition: .8s;
    -ms-transform: translate(0, 30px);
    transform: translate(0, 30px);
    -webkit-transform: translate(0, 30px);
}

.mv {
    opacity: 1;
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

/********************************
/********************************
/********************************

l_components

********************************/

/* ボタン */
.btn {
    font-family: 'Josefin Sans', sans-serif;
    display: inline-block;
    position: relative;
    text-align: center;
    padding: 1em 0;
    color: #6B574E;
    letter-spacing: .25em;
    font-weight: 400;
}

.btn:after {
    position: absolute;
    top: 30%;
    right: 6%;
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    /*font-weight: 900;*/
}

.more-btn:after {
    position: absolute;
    right: 6%;
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: 600;
}

.big {
    background: #F0E8E5;
    color:#6B574E;
    margin: 0 auto;
    letter-spacing: .2em;
    font-weight: bold;
}

.btn2 {
    display: inline-block;
    font-family: 'Josefin Sans', YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    position: relative;
    text-align: center;
    padding: 10px;
    margin: 30px auto 0;
    color: #fff;
    letter-spacing: .2em;
    font-weight: bold;
    background: #6B574E;
    width:270px;
}



/* ページャー */
.pager {
    width: 60%;
    margin: 0 auto;
}

.pager ul li {
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "Sawarabi Mincho", serif;
    width: 46px;
    height: 46px;
    font-size: 30px;
    text-align: center;
    border: 1px solid #333;
}

.pager li.prev,
.pager li.next,
.pager li.current {
    border: none;
}

.pager li.prev {
    padding-right: 1.5em;
}

.pager li.next {
    padding-left: 1em;
}

.pager li.current {
    background: #6B574E;
    color: #fff;
}


/* imgのborder */
.img_border,
.img_border_r {
    position: relative;
    margin-bottom: 7px;
}

.img_border:after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    border: 1px solid #6B574E;
    right: -6px;
    left: 6px;
    top: 6px;
    bottom: -6px;
}

.img_border_r:after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    border: 1px solid #9f8550;
    right: 6px;
    left: -6px;
    top: 6px;
    bottom: -6px;
}

/* imgの下margin */
.img_bottom {
    margin-bottom: 7px;
}

/*ロゴ*/
.img_logo_top{
  text-align: center;
}
/********************************
/********************************

m_common,
m_components

********************************/
@media only screen and (max-width: 1024px) {
    .pc_only {
        display: none;
    }
    
   .sp_only{
      display: block;
    }

    .tab_sm {
        display: block;
    }

    .header_reserve {
        bottom: 0;
        left: 10%;
    }

    .sp_tel {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 100;
    }

    .sp_tel > .flexb {
        min-width: 100%;
    }

    .sp_tel .box {
        width: 33%;
        background: #6B574E;
        padding: .5em;
    }

    .sp_tel .box .fs18 {
        text-align: center;
        color: #fff;
        font-weight: bold;
    }

    .sp_tel .box .fs18 span {
        font-family: 'Josefin Sans', sans-serif;
        padding-right: .5em;
    }

    .sp_tel .box .tel,
    .sp_tel .box .tel a {
        text-align: center;
        color: #fff;
    }

    .sp_tel .box .tel:before {
        content: 'TEL. ';
        font-size: .5em;
    }

    .sp_tel .totop {
        position: fixed;
        right: 2%;
        bottom: 0;
        text-align: center;
        background: #434343;
        font-size: 12px;
        padding: 1em 1.5em;
        color: #fff;
        z-index: 10;
    }

    /* ページャー */
    .pager ul li {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }
}

/********************************

s_common,
s_components

********************************/
@media only screen and (max-width: 599px) {
    .sm_only {
        display: block;
    }

    .pc_tab {
        display: none;
    }

    h2 {
        margin-bottom: 40px;
    }

    /* ページャー */
    .pager {
        width: 70%;
    }

    .pager ul li {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

}

/********************************
/********************************
/********************************

l_header

********************************/
header {
    position: relative;
}

.mainimg {
    position: relative;
    width: 100%;
    height: 100vh;
}

.mainimg ul li .pic {
    background: #F0E8E5;
}

.mainimg ul li .pic img {
    display: block;
}

.control .prev,
.control .next,
.control .pager {
    position: absolute;
    z-index: 100;
}

.control .prev {
    top: calc(50% - 53px / 2);
    left: 1%;
}

.control .next {
    top: calc(50% - 53px / 2);
    right: 1%;
}

.control .pager {
    bottom: 2%;
    left: calc(50% - 132px / 2);
    width: auto;
}

.scroll {
    position: absolute;
    bottom: 23px;
    right: 83px;
}

.header_reserve {
    position: absolute;
    bottom: 0;
    left: 0;
}

.r_btn {
    display: block;
    width: 100%;
    margin-top: 1em;
    background: #333;
    text-align: center;
    color: #fff;
    font-weight: bold;
    padding: 1em 2em;

}

.r_btn span {
    display: block;
    color: #b8c8b0;
    font-weight: normal;
}

.nav_wrap {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.nav_wrap .inner {
    padding: 25px 0;
    margin-top: 0;
    max-width: 1200px;
}

.glogalnav {
    width: 50%;
}

.globalnav ul {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.globalnav ul li {
    padding: 10px 11px;
    font-size: 14px;
}

.globalnav ul li a {
    color:#6B574E;
    text-shadow: 0 1px 5px white;
    font-size: 15px;
    letter-spacing: .1em;
    display: block;
    font-family: 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
}

#gnav .logo {
    width: 17%;
}


.globalnav ul li.cartbtn {
    padding-top: 2px;
}

.globalnav ul li.cartbtn a img {
    max-width: 28px !important;
    -webkit-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0));
    filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0));
}

#gnav {
    position: fixed;
    -webkit-transition: .8s;
    transition: .8s;
    background: rgba(240, 232, 229, 0.7) !important;
}

#gnav .accordion-body {
    width: 80%;
}

.mv-ontext2 {
    font-size: 36px;
    color: #fff;
    font-family: 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px 27px;
    background-color: #6B574ECC;
    transform: translate(-50%, -50%);
}

.mv-ontext {
    font-size: 40px;
    color: #fff;
    font-family: 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
    text-align: center;
    text-shadow: 0 1px 10px #9e854f;
    line-height: 150%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 80%;
}

/********************************
/********************************

m_header

********************************/

@media only screen and (max-width: 1024px) {
    #gnav {
        height: 71px;
    }

    #gnav.nav_wrap .toggle .bar,
    #gnav.action .toggle .bar {
        border-style: inherit;
    }

    #gnav.action .toggle .bar,
    #gnav.action .toggle .bar:before,
    #gnav.action .toggle .bar:after {
        background: #333;
    }

    #gnav .toggle {
        background: none;
        margin-top: 1%;
    }
    #gnav ul li a{
        padding: 7px 15px;
        color: #393939;
        font-size: 14px;
    }

    #gnav .accordion-body {
        top: 0px;
        left: inherit;
        right: 0;
        padding: 10px;
        background: rgba(255, 255, 255, 0.85);
        padding-top: 30px;
    }

    #gnav .inner {
        padding: .25em 0;
    }

    h1.logo {
        width: 50vw;
        margin: 0 auto;
        text-align: center;
        padding: 2% 0;
    }

    .gnav_reserve {
        margin-bottom: 1em;
    }
    #gnav li{
      border-bottom: 0px;
    }

    #gnav .gnav_reserve .r_btn {
        display: block;
        width: 75%;
        margin-top: 1em;
        background: #333;
        text-align: center;
        color: #fff;
        font-weight: bold;
        padding: 1em 2em;
    }

    #gnav .gnav_reserve .r_btn span {
        color: #b8c8b0;
        font-weight: normal;
    }


    .nav_wrap .globalnav {
        display: none;
    }

    .action .globalnav {
        display: block;
        z-index: 9999;
    }

    .accordion-body {
        position: relative;
    }

    .accordion-inner {
        position: absolute;
        left: 0;
        top: 0;
    }
}

.mv-ontext2 {
    font-size: 30px;
  }

/********************************

s-header,
s-footer

********************************/

@media only screen and (max-width: 599px) {
    #gnav {
        height: 60px;
    }

    .mainimg {
        height: 50vh;
    }

    .pic {
        width: 100%;
    }

    .mainimg ul li p.pic {
        width: 100%;
    }
    
    .mv-ontext2 {
    font-size: 16px;
    width: 80%;
    }

    .footer_top .logo,
    .footer_top nav.mini {
        margin: 0 auto;
    }

    .footer_top .logo {
        margin-bottom: 1em;
        ;
    }
}

/********** footer **********/

footer {
    background-color: #F0E8E5;
}

.footer_top {
    padding-bottom: 40px;
}

.footer_top .logo,
.footer_top nav.mini li a {
    color: #6B574E;
}

.footer_top nav.mini ul li {
    font-size: 16px;
    padding-left: 30px;
}

nav.mini .mini_conta:before {
    font-family: "Font Awesome 5 Free";
    content: "\f1d8";
    font-weight: 900;
    padding-right: 10px;
}

nav.mini .mini_insta:before {
    font-family: "Font Awesome 5 Brands";
    content: "\f16d";
    font-weight: 900;
    padding-right: 10px;
}

footer .stores .gr321 {
    border: 1px solid #fbfef3;
    padding: 2.5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;

}

footer .stores h3,
footer .stores .address,
footer .stores .tel {
    text-align: center;
}

footer .stores h3 {
    font-family: inherit;
    border: none;
    margin: 0;
    font-weight: bold;
    color: inherit;
    letter-spacing: 0;
}

footer .stores h3 span {
    font-family: 'Josefin Sans', sans-serif;
    padding-right: .5em;
    font-size: 1.6em;
    font-weight: normal;
}

footer .stores .tel {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 10%;
}

footer .stores .tel:before {
    content: 'TEL. ';
    font-size: .5em;
}

footer .stores .btn {
    background: #333;
}

.footernav {
    position: relative;
    width: 100%;
    background: #F0E8E5;
}

.footernav ul {
    width: 100%;
    margin: auto;
}

.footernav ul li a {
    /*font-family: 'Cabin', sans-serif;*/
    font-family: 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    color: #6B574E;
}

.footernav .totop {
    position: fixed;
    right: 20px;
    bottom:  80px;
    text-align: center;
    background-color: rgba(107, 87, 78, 0.8);
    font-size: 12px;
    padding: .5em 1em;
    color: #fff;
    z-index: 10;
}

.copyright {
     /*font-family: 'Cabin', sans-serif;*/
    font-family: 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    width: 100%;
    height: 130px;
    background: #F0E8E5;
    text-align: center;
    padding: 1em 0 3em;
    color: #6B574E;
}

@media only screen and (max-width: 1024px) {
  .footernav ul li{
    width: 30%;
    margin-bottom: 5px;
  }
  .footernav ul{
    justify-content: initial;
  }
}
@media only screen and (max-width: 599px) {
  .footernav ul li{
    width: 50%;
  }
}




/********************************
/********************************
/********************************

l_index (TOP)

********************************/

/* information */
.info {
    background: #fbfef3;
}

.info .lead {
    color: #9f8550;
    padding-bottom: 1.25em;
    font-family: 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
}

.info .flex {
    margin-top: 2em;
}

.info .flexc div {
    width: 58%;
}

.info .btn {
    background: #b19b70;
}

/* menu */

.menu .box {
/*    margin-bottom: 100px;*/
    position: relative;
}

.menu .box .gr221 {
    margin: 0;
}

.menu .box .gr221:first-of-type {
    padding-bottom: 60px;
}

.menu .box:nth-of-type(odd) .flexb {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.menu h3 {
    margin-bottom: 0;
    width: 100%;
}

.menu .box .btn_wrap {
    position: absolute;
    bottom: 0;
    margin: 0 4% 0 0;
}

.menu .box:nth-of-type(odd) .btn_wrap {
    left: 53.5%;
}

.menu .menu_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    margin: 0 4% 0 0;
}

.menu .lead {
    font-weight: bold;
    color: #819876;
    margin-top: .5em;
}

.menu .price {
    font-size: 18px;
    font-weight: bold;
    color: #666;
    margin-top: 20px;
}

.menu .price span {
    display: block;
    font-weight: normal;
}

.menu .btn {
    background: #6B574E;
    font-size: 18px;
}

.menu .tomenu {
    width: 50%;
    margin: 0 auto;
    font-size: 24px;
    background: #434343;
}

/* salon info  */
.salon_info {
    background: #eceee2;
}

.salon_info .gr321 {
    margin: 0 0 5%;
}

.salon_info .pic {
    margin-bottom: 20px;
}

.salon_info h3 {
    color: #b29d73;
    border-color: #b29d73;
    margin-bottom: 20px;
    letter-spacing: 0;
}

.salon_info .address,
.salon_info .tel {
    color: #666;
    text-align: center;
}

.salon_info .address {
    height: 3em;
}

.salon_info .tel {
    font-size: 16px;
    font-weight: bold;
}

.salon_info .tel:before {
    content: 'TEL：'
}

.tosalon_info {
    background: #b29d73;
    margin-bottom: 20px;
}

.reserve {
    background: #333;
}

.reserve span {
    display: block;
    color: #b29d73;
}

.salon_info .lead {
    text-align: center;
    border: 1px solid #333;
    padding: .5em 0;
    letter-spacing: .1em;
}

/* style gallery  */
.style_gallery {
    background: #fbfef3;
}

.style_gallery .gr422 {
    position: relative;
    margin: 0 0 4%;
}

.style_gallery .gr422 .s_name {
    color: #b29d73;
    z-index: 5;
    font-size: 30px;
}

.style_gallery .short .s_name {
    position: absolute;
    top: 10%;
    left: 8%;
}

.style_gallery .bob .s_name {
    position: absolute;
    top: 67%;
    left: 13%;
}

.style_gallery .long .s_name {
    position: absolute;
    top: 17%;
    left: 53%;
}

.style_gallery .arrange .s_name {
    position: absolute;
    top: 67%;
    left: 18%;
}


/* voice + Q&A */
.voice,
.qa {
    border: 1px solid #9f8550;
}

.voice h2,
.qa h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 30px;
    text-align: center;
    border-bottom: 1px solid #9f8550;
    padding: .3em 0;
    margin: 0;
}

.voice_qa .gr221 {
    margin: 0 0 6%;
}

.voice_qa .col {
    height: 85%;
    padding: 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.voice ul li,
.qa dl dt,
.qa dl dd {
    padding-bottom: 1em;
}

.voice ul li,
.qa dl dd {
    font-size: 16px;
}

.voice ul li .persona {
    display: block;
    text-align: right;
    padding-top: 1em;
}

.voice ul li .persona:before {
    content: '〈';
}

.voice ul li .persona:after {
    content: '〉';
}

.qa dl dt:before {
    content: url(#);
    padding-right: 5px;
}

.qa dl dd:before {
    content: url(#);
    padding-right: 10px;
}

.qa dl dt,
.qa dl dd {
    text-indent: -43px;
    padding-left: 43px;
}

.qa dl dt {
    color: #666;
    font-weight: bold;
    font-size: 16px;
}

.voice_qa .btn {
    background: #b29d73;
    width: 100%;
}

/* staff */
.staff li a {
    display: block;
}

.hstaff-item {
    width: 23%;
    margin: 1%;
}

/* recruit */
.recruit {
    background: #b29d73;
}

.recruit .wrap {
    position: relative;
    margin-bottom: 60px;
}

.recruit .wrap .textarea {
    position: absolute;
    top: 78%;
    left: 50%;
    -webkit-transform: translate(-50%, -78%);
    -ms-transform: translate(-50%, -78%);
    transform: translate(-50%, -78%);
}

.recruit h3,
.recruit .lead {
    text-align: center;
    /*    text-shadow: 0 0 12px #000*/
}

.recruit h3 {
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "Sawarabi Mincho", serif;
    font-weight: bold;
    color: #fff;
    border: none;
    margin: 0;
}

.recruit .lead {
    color: #fff;
    font-weight: bold;
}

/* instagram */
.insta {
    background: #fff;
}

/* blog */
.blog {
    background: #F0E8E5;
}

.blog h3 {
    font-family: "游ゴシック", YuGothic, Hiragino Sans, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    border: none;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 1em;
    letter-spacing: 0;
    color: #b29d73;
}


.blog .date {
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "Sawarabi Mincho", serif;
    text-align: right;
    color: #666;
    padding: 1em 0;
}

.blog .date:before {
    content: '— '
}

.blog .desc {
    margin: 1em 0;
}

.blog .btn {
    background: #b29d73;
}

/* news */
.news .box {
    border: 1px solid #9f8550;
}

.news h3 {
    /*font-family: 'Josefin Sans', sans-serif;*/
    font-size: 18px;
    /*text-align: center;*/
    border: none;
    border-bottom: 1px solid #6B574E;
    padding: .3em 0;
    margin: 0;
}

.news .col {
    height: 80%;
    padding: 5% 3%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}


.news dl dt {
    width: 33%;
}

.news dl dd {
    width: 66%;
    padding-left: 3%;
}

.news .btn {
    /*    background: #b29d73;*/
}

/********************************
/********************************

m_index (TOP)

********************************/
@media only screen and (max-width: 1024px) {

    /* style gallery  */
    .style_gallery .gr422 .s_name {
        font-size: 46px;
    }
}


/********************************

s_index (TOP)

********************************/
@media only screen and (max-width: 599px) {

    /* menu */
    .menu .box .gr221 {
        width: 100%;
    }

    .menu .box .gr221:first-of-type {
        padding-bottom: 20px;
    }

    .menu .box:nth-of-type(even) .btn_wrap,
    .menu .box:nth-of-type(odd) .btn_wrap {
        left: 0;
    }

    .menu .box .btn_wrap {
        position: inherit;
        padding-top: 30px;
    }

    .menu .tomenu {
        width: 100%;
    }

    /* style gallery  */
    .style_gallery .gr422 .s_name {
        font-size: 24px;
    }

    .style_gallery .short .s_name {
        left: 18%;
    }

    .style_gallery .bob .s_name {
        left: 23%;
    }

    .style_gallery .long .s_name {
        left: 53%;
    }

    .style_gallery .arrange .s_name {
        left: 18%;
    }


    .salon_info .gr321 {
        width: 100%;
    }

    /* style_gallery */


    /* recruit */
    .recruit .wrap .textarea {
        position: inherit;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        top: 0;
        left: 0;
    }

    .recruit h3,
    .recruit .lead {
        text-shadow: none;
        color: inherit;
    }

    .recruit h3 {
        font-size: 6vw;
    }
}

/********************************
/********************************
/********************************

l_underpage

********************************/

header h2 {
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "Sawarabi Mincho", serif;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.underpage .content .inner {
    padding: 2em 0;
}

.underpage .content .lead {
    margin: 0 auto;
    padding-bottom: 2rem;
    color: #6B574E;
    text-align: center;
}

.underpage .content .text {
    text-align: left;
    line-height: 2;
}
.underpage .content .tablist .text{
   text-align: left;
}
.underpage .content .point-cont .text{
  text-align: left;
}

.underpage .btn {
    background: #F0E8E5;
}

.underpage .btn.back {
    background: #F0E8E5;
    color: #6B574E;
    width: 80%;
    max-width: 340px;
    margin-left: 20%;
}

.underpage .btn.back:before {
    position: absolute;
    top: 30%;
    left: 6%;
    font-family: "Font Awesome 5 Free";
    content: "\f053";
   /* font-weight: 900;*/
}

.underpage .btn.back:after {
    content: none;
}

@media only screen and (max-width: 1024px) {
    .underpage .content .inner {
        padding: 3.5em 0;
    }
}

/********************************

s_underpage

********************************/
@media only screen and (max-width: 599px) {
    .underpage .content .inner {
        padding: 1em 0;
    }

    .underpage .btn.back {
        width: 100%;
        margin-left: 0;
    }

    .underpage .content .lead {
      padding-top:1em;
        padding-bottom: 0.7rem;
    }

}


/********************************
/********************************
/********************************

l_menu

********************************/
.underpage .menu h3 {
    border: none;
   /*  padding-bottom: 1em; */
    line-height: 1em;
    margin-top: 3em;
    margin-bottom: 1em;
}

.underpage .menu .gr221 h3:first-of-type {
    margin-top: 0;
}

.underpage .menu h3 span {
    font-size: 14px;
    display: block;
    letter-spacing: 0;
}

.underpage .menu dl dt {
    font-weight: bold;
    width: 100%;
    color: #666;
    font-size: 16px;
    padding-bottom: 1em;
}

.underpage .menu dl dt span {
    display: block;
}

.underpage .menu dl dd {
    width: 100%;
    padding-bottom: 1em;
    margin-bottom: 2em;
    border-bottom: 1px solid #abbda2;
}

/********************************
/********************************
/********************************

l_style-Gallery_list

********************************/

.sg_list ul.sg_menu {
    width: 100%;
    margin: 0 auto 80px;
}

.sg_list ul.sg_menu li a {
    font-family: 'Josefin Sans', sans-serif;
    border-left: 1px solid #333;
    padding: 0 50px;
}

.sg_list ul.sg_menu li:first-child a {
    border-left: none;
}

.sg_list .sg_ul li {
    position: relative;
}

.sg_list .sg_ul .text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(93, 115, 71, .4);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: 50;
}

.sg_list .sg_ul .text span {
    display: block;
    text-align: center;
    z-index: 5;
    color: #fff;
    padding: 0 1em;
}

.sg_list .sg_ul li a {
    display: block;
}

.sg_list .sg_ul li a:hover .text {
    opacity: 1;
    padding-top: 80px;
}

/********************************

s_style-Gallery_list

********************************/
@media only screen and (max-width: 599px) {
    .sg_list ul.sg_menu {
        margin-bottom: 40px;
    }

    .sg_list ul.sg_menu li a {
        padding: 0 8px;
    }
}

/********************************
/********************************
/********************************

l_style-Gallery_detail

********************************/

.sg_detail .thumbnail li.gr333 {
    margin: 0;
}

.sg_big {
    margin-bottom: 2em;
}

.sg_image ul {
    width: 100%;
}

.sg_detail h3 {
    text-align: left;
    font-family: inherit;
    font-size: 20px;
    padding: 0;
    border: none;
    letter-spacing: normal;
    font-weight: bold;
}

.sg_detail .sg_image a {
    display: block;
    height: 100%;
}

.sg_detail .detail {
    -ms-flex-line-pack: justify;
    -webkit-align-content: space-between;
    align-content: space-between;
}

.sg_detail .detail ul {
    margin-bottom: 30px;
}

.sg_detail .detail ul li {
    font-size: 16px;
    background: #abbda2;
    color: #fff;
    padding: .25em 1em;
    margin: 0 .5em .5em 0;
}

.sg_detail .detail .stylist {
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    vertical-align: bottom;
    padding-right: 1em;
}

.sg_detail .detail .stylist span {
    font-size: 14px;
    display: block;
    font-weight: normal;
}

.sg_detail h4 {
    border: none;
    font-size: 48px;
    letter-spacing: .1em;
    color: #819876;
    text-align: center;
}

/********************************
/********************************

m_style-Gallery_detail

********************************/
@media only screen and (max-width: 1024px) {
    .sg_detail .detail {
        margin-bottom: 6%;
    }
}


/********************************

s_style-Gallery_detail

********************************/

@media only screen and (max-width: 599px) {
    .sg_detail h3 {
        text-align: center;
    }

    .sg_detail h4 {
        font-size: 36px;
    }


    .sg_detail .sg_image p.pic {
        width: 100%;
    }

    .sg_detail .detail {
        margin-bottom: 2em;
    }

    .sg_detail .detail .d_text {
        text-align: center;
        margin-bottom: 2em;
    }

    .sg_detail .detail .w100 {
        margin-bottom: 2em;
    }

    .sg_detail .detail .w60 {
        width: 60%;
    }

    .sg_detail .detail .w40 {
        width: 40%;
    }
}

/********************************
/********************************
/********************************

l_salon,
l_stylist_list

********************************/
.salon_stylist .store {
    margin-bottom: 75px;
}

.salon_stylist .store:last-of-type {
    margin-bottom: 0;
}

.salon_stylist .store .store_sld {
    position: relative;
    margin-bottom: 60px;
}

.salon_stylist .store .store_sld .control .prev,
.salon_stylist .store .store_sld .control .next,
.salon_stylist .store .store_sld .control .pager {
    position: absolute;
    z-index: 100;
}

.salon_stylist .store .store_sld .control .prev {
    top: calc(50% - 53px / 2);
    left: -5%;
}

.salon_stylist .store .store_sld .control .next {
    top: calc(50% - 53px / 2);
    right: -5%;
}

.salon_stylist .store .store_sld .control .pager {
    bottom: 2%;
    left: calc(50% - 132px / 2);
    width: auto;
}

/*スタッフページの旧見出しデザイン
.salon_stylist .store h3 {
    border: none;
    background: #9f8550;
    color: #fff;
}
*/

.salon_stylist .store .desc {
    padding-bottom: 2em;
}

.salon_stylist .store .info {
    background: none;
}

.salon_stylist .store .info dt {
    font-weight: bold;
    font-style: 18px;
    padding-right: 1em;
    width: 25%;
    color: #666;
    border-right: 1px solid #819876;
}

.salon_stylist .store .info dd {
    width: 72%;
    padding: 0 0 2% 3%;
}

.salon_stylist .store .time {
    margin: 0;
    padding: 0;
}

.salon_stylist .store .time dt {
    border: none;
    font-weight: normal;
    color: inherit;
    text-align: center;
}

.salon_stylist > .map {
    -ms-flex-line-pack: justify;
    -webkit-align-content: space-between;
    align-content: space-between;
}

.salon_stylist .sty_name {
    font-weight: bold;
    line-height: 120%;
    margin-top: .25em;
}

.salon_stylist .sty_name span {
    display: block;
    text-transform: uppercase;
}

.salon_stylist .sty_name .occup {
    font-weight: normal;
    font-size: 16px;
    color: #6B574E;
}


.salon_stylist .sty_name .eng {
    font-weight: normal;
    font-size: 14px;
}

/********************************
/********************************

m_salon

********************************/
@media only screen and (max-width: 1024px) {
    .salon_stylist .store .store_sld .control .prev {
        left: -4%;
    }

    .salon_stylist .store .store_sld .control .next {
        right: -4%;
    }
}


/********************************

s_stylist_list

********************************/
@media only screen and (max-width: 599px) {
    .salon_stylist .sty_name {
        margin-left: 10%;
    }
}

/********************************
/********************************
/********************************

l_stylist_detail

********************************/
.stylist_detail > .inner > .flex > .gr221:last-of-type {
    margin-bottom: 6%;
}

.stylist_detail .store_name {
    font-family: 'Josefin Sans', sans-serif;
    text-align: center;
    color: #b29d73;
    border: 1px solid #b29d73;
    width: 100%;
    height: 2em;
    padding: .25em 0;
    letter-spacing: .25em;
    font-weight: normal;
    margin-bottom: 2em;
}

.stylist_detail .det_sty_name {
    border-bottom: 1px solid #b29d73;
    padding-bottom: 1em;
    margin-bottom: 1em;
}

.stylist_detail .det_sty_name span {
    display: block;
    text-transform: uppercase;
}

.stylist_detail .det_sty_name .occu {
    font-size: 18px;
}

.stylist_detail .det_sty_name .name {
    font-size: 30px;
    font-weight: bold;
    text-align: right;
}

.stylist_detail .det_sty_name .eng {
    font-size: 14px;
    text-align: left;
    padding-bottom: .5em;
}

.stylist_detail .message {
    margin-bottom: 70px;
}
@media only screen and (max-width: 1024px) {
   .stylist_detail .det_sty_name .name  {
        font-size: 26px;
    }
}
@media only screen and (max-width: 599px) {
   .stylist_detail .det_sty_name .name  {
        font-size:23px;
    }
    .stylist_detail .det_sty_name .occu{
      width: 100%;
    }
    .stylist_detail .message{
      margin-bottom: 20px;
    }
}

/********************************
/********************************
/********************************

l_cut

********************************/

.cut h3 {
    font-family: inherit;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    color: #819876;
    border: none;
    padding: 0;
    margin-bottom: 1em;
    letter-spacing: normal;
}

.cut > .inner > .box_wrap > .box {
    border: 1px solid #abbda2;
    padding: 20px;
    margin-bottom: 40px;
}

.cut > .inner > .box_wrap > .box:last-of-type {
    margin-bottom: 110px;
}

.cut > .inner > .box > .flexb > .gr221 {
    margin: 0;
}

.cut h4 {
    background: #abbda2;
    color: #fff;
    text-align: center;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: .1em;
    ;
}

/********************************

s_cut

********************************/
@media only screen and (max-width: 599px) {

    .cut h3,
    .cut h4 {
        text-align: center;
    }
}

/********************************
/********************************
/********************************

l_color,
l_spa & treatment

********************************/
.underpage .color_spatr .inner {
    padding-bottom: 0;
}

.effect_wrap {
    width: 100%;
    background: #eceee2;
}

.underpage .effect {
    padding: 5.5em 0 0em;
}
.underpage .effect ul li{
  margin-bottom: 0;
  padding: .8em 0;
}
.effect ul li.on{
  background: #fff;
  color: #b29d73;
}
.effect {
    width: 60%;
    margin: 0 auto;
    padding: 2em 0;
}

.effect h4 {
    text-align: center;
    font-size: 22px;
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "Sawarabi Mincho", serif;
}

.effect h4 span {
    font-size: 16px;
    display: block;
    margin-bottom: 0px;
    text-align: center;
    line-height: 100%;
}


.effect ul {
    margin: 0 auto;
    width: 95%;
    max-width: 750px;
}
.underpage .effect ul{
    width: 95%;
    max-width: 1000px;
}

.effect ul li {
    width: 45%;
    background: #b29d73;
    color: #fff;
    text-align: center;
    margin-bottom: 1em;
    padding: .5em 0;
    font-size: 18px;
    letter-spacing: .1em;

}

.color_spatr h3 {
    width: 100%;
    border: none;
    letter-spacing: .1em;
    color: #819876;
}

.color_spatr h4 {
    color: #819876;
}

.color_spatr .flow h4 {
    text-align: center;
    border: 1px solid #819876;
    font-weight: normal;
}

.color_spatr .flow ul li {
    width: 48%;
    padding-bottom: 2.5em;
}

.color_spatr .flow ul li .no {
    width: 10%;
}

.color_spatr .flow ul li dl {
    width: 90%;
}

.color_spatr .flow ul li dl dt {
    font-weight: bold;
}

.color_spatr .flow ul li .no span {
    background: #819876;
    color: #fff;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 24px;
    width: 30px;
    height: 20px;
    display: block;
    text-align: center;
    padding-top: 6px;

}

.color_spatr .flow span {
    display: block;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 0.25em;
}


/********************************

s_color,
s_spa & treatment


********************************/
@media only screen and (max-width: 599px) {
    .effect {
        width: 80%;
    }

    .color_spatr .flow ul li .no {
        width: 15%;
    }

    .color_spatr .flow ul li dl {
        width: 85%;
    }

    .color_spatr .flow ul li .no span {
        background: #819876;
        color: #fff;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 18px;
        width: 25px;
        height: 20px;
        display: block;
        text-align: center;
        padding-top: 6px;
    }
}

/********************************
/********************************
/********************************

l_product

********************************/
.product h3 {
    font-family: inherit;
    color: inherit;
    font-size: 16px;
    font-weight: bold;
    border: none;
    letter-spacing: normal;
    text-align: left;
    margin-bottom: 0;
}

.product .brand {
    color: #abbda2;
}

.product .spec {
    text-align: right;
    padding: 1em 0;
}

.product .spec span {
    display: block;
    background: #abbda2;
    color: #fff;
    text-align: left;
    padding-left: 1em;
    margin-top: .5em;
}

.product .spec span:first-of-type {
    margin-top: 0;
}

.underpage .product .text {
    text-align: left;
    line-height: 1.5;
}

/********************************
/********************************
/********************************

l_voice

********************************/

.underpage .voice {
    background: #eceee2;
}

.underpage .voice .box {
    width: 100%;
    margin-bottom: 70px;
    padding: 1em 1.5em;
    border: 1px solid #abbda2;
    outline: 10px solid #ffF;
    background: #fff;
}



.underpage .voice .box .gr221 {
    margin: 0;
    width: 48%;
}

.underpage .voice .box .name {
    font-size: 22px;
    border-bottom: 1px solid #abbda2;
    margin-bottom: .5em;
    padding-bottom: 0.25em;
}

.underpage .voice .box .name span {
    display: block;
    font-size: 14px;
}

.underpage .voice .box .address {
    margin-bottom: 2em;
}

.underpage .voice .box dl dt {
    background: #abbda2;
    color: #fff;
    text-align: center;
    padding-left: 1em;
    margin-top: 3em;
}

.underpage .voice .box dl:first-of-type dt {
    margin-top: 0;
}

/********************************

s_voice

********************************/
@media only screen and (max-width: 599px) {
    .underpage .voice .box .gr221 {
        width: 96%;
        margin: 0 2%;
    }

    .underpage .voice .box .name {
        margin-top: 20px;
    }

}

/********************************
/********************************
/********************************

l_recruit

********************************/

#content.recruit {
    background: #fff;
}

#content.recruit h3 {
    font-size: 32px;
    color: #6B574E;
    margin-bottom: 1.5em;
    text-shadow: none;
    font-weight: normal;
}

#content.recruit .gl_wrap {
    width: 83%;
    padding: 4%;
    margin: 0 auto;
    border: 1px solid #4B4646;
}

#content.recruit .gl_wrap {
    font-size: 16px;
    margin-bottom: 100px;
}

#content.recruit .gl_wrap dl dt {
    width: 20%;
    font-weight: bold;
    padding: 0 0.5em 0 0;
    letter-spacing: 0em;
    color: #666;
    font-size: 16px;
}

#content.recruit .gl_wrap dl dd {
    padding-bottom: 2em;
    width: 80%;
    color: #666;
    font-size: 16px;
}

#content.recruit .oneday {
    margin-bottom: 100px;
}

#content.recruit .oneday .box {
    margin-bottom: 50px;
}

#content.recruit .oneday .gr221 {
    width: 48%;
    margin: 0;
}

#content.recruit .oneday .corner {
    font-size: 22px;
}

#content.recruit .oneday .corner span {
    color: #9f8550;
    font-weight: bold;
    padding-right: 25px;
}

#content.recruit .oneday .desc {
    padding-left: 51px;
    margin-left: 25px;
    border-left: 6px solid #9f8550;
    height: calc(100% - 35px);
}

#content.recruit .u_shev {
    position: relative;
    display: inline-block;
    border-bottom: solid 1px #9f8550;
    margin-bottom: 6%;
    width: 100%;
}

#content.recruit .u_shev:before,
#content.recruit .u_shev:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

#content.recruit .u_shev:before {
    border: solid 66px transparent;
    border-top: solid 18px #9f8550;
}

#content.recruit .u_shev:after {
    border: solid 80px transparent;
    border-top: solid 22px #fff;
    margin-top: -5px;
}

#content.recruit .u_shev .desc {
    width: 100%;
}

#content.recruit .flow h4 {
    color: #9f8550;
    font-size: 22px;
    margin-bottom: 2em;
}

#content.recruit .u_shev:last-of-type:before {
    display: none
}

#content.recruit .u_shev:last-of-type:after {
    display: none
}

@media only screen and (max-width:1024px) {
    #content.recruit h3 {
        font-size: 24px;
    }
}


/********************************

s_recruit

********************************/
@media only screen and (max-width: 1024px) {
    #content.recruit .gl_wrap {
        width: 95%;
    }

    #content.recruit .gl_wrap dl dt {
        font-size: 14px;
    }

    #content.recruit .gl_wrap dl dd {
        font-size: 14px;
    }
}

@media only screen and (max-width: 599px) {
    #content.recruit .gl_wrap dl.flex {
        display: block;
    }

    #content.recruit .gl_wrap dl.flex dt,
    #content.recruit .gl_wrap dl.flex dd {
        width: 100%;
    }

    #content.recruit .gl_wrap dl.flex dt {
        padding-bottom: 0.25em;
    }

    #content.recruit .gl_wrap dl.flex dd {
        padding-left: .5em;
    }

    #content.recruit .oneday .box {
        margin-bottom: 30px;
    }

    #content.recruit .oneday .gr221 {
        width: 98%;
        margin-bottom: 2em;
    }

    #content.recruit .u_shev {
        margin-bottom: 12%;
    }

    #content.recruit .gl_wrap {
        width: 98%;
    }

    #content.recruit .gl_wrap dl.flex dt {
        font-size: 15px;
    }

    #content.recruit .gl_wrap dl.flex dd {
        padding-left: 0;
        font-size: 14px;
    }

    #content.recruit h3 {
        font-size: 20px;
        margin-bottom: 18px;
    }
}

/********************************
/********************************
/********************************

l_fa

********************************/

.faq dl {
    width: 100%;
    margin-bottom: 80px;
}

.faq dl dt {
    font-size: 22px;
    font-weight: bold;
    color: #819876;
    border-bottom: 1px solid #abbda2;
    padding-bottom: .5em;
    margin-bottom: 1em;
}

.faq dl dt:before {
    content: 'Q';
    font-family: 'Josefin Sans', sans-serif;
    font-size: 24px;
    padding: .3em .3em .15em .3em;
    color: #fff;
    background: #819876;
    margin-right: .5em;
    font-weight: normal;
}

.faq dl dt {
    text-indent: -2em;
    padding-left: 2em;

}

.faq dl dd {
    text-indent: -3em;
    padding-left: 3em;
}

.faq dl dd:before {
    content: 'A';
    font-family: 'Josefin Sans', sans-serif;
    font-size: 24px;
    padding: .3em .35em;
    color: #fff;
    background: #333;
    margin-right: .5em;
    font-weight: normal;
}

/********************************
/********************************
/********************************

l_contact

********************************/

.contact .wrap {
    width: 83%;
    padding: 4%;
    margin: 0 auto;
    border: 1px solid #9f8550;
}

.contact .wrap dl dt {
    color: #666;
    width: 20%;
    font-weight: bold;
}

.contact .wrap dl dd {
    width: 80%;
}
.contact .wrap dl{
    margin: 0 0 6%;
}


.contact .wrap .inputtext {
    border: 0;
    padding: .5em;
    border: solid 1px #9f8550;
    width: 100%;
}

.contact .wrap .area {
    height: 12em;
}
.contact .wrap .btn{
  border: none;
}

.contact .wrap .btn_wrap {
    margin-bottom: 5em;
}

.contact .wrap .btn {
    width: 35%;
    background: #6B574E;
    color: #fff;
}

/********************************
/********************************

m_contact

********************************/
@media only screen and (max-width: 1024px) {
    .contact .wrap dl dt {
        width: 25%;
    }

    .contact .wrap dl dd {
        width: 75%;
    }
    .contact .wrap{
      width: 100%;
      margin-bottom: 60px;
    }
    .contact .wrap dl.flex{
      margin-bottom: 20px;
    }
}

/********************************

s_contact

********************************/
@media only screen and (max-width: 599px) {
    .contact .wrap dl.flex {
        display: block;
    }

    .contact .wrap dl.flex dt,
    .contact .wrap dl.flex dd {
        width: 100%;
    }

    .contact .wrap .btn {
        width: 48%;
        font-size: 15px;
    }
    .contact .wrap .btn_wrap {
        margin-bottom: 2em;
    }
    .contact .wrap{
      margin-bottom: 40px;
    }
}

/********************************
/********************************
/********************************

l_blog_list,
l_blog_detail,
l_news_list,
l_news_detail


********************************/
.article-main li {
    width: 31%;
    padding-bottom: 6%;
    margin-left: 1%;
    margin-right: 1%;
}
.article-main li a{
  display: block;
}

.article-box .date {
    /*font-weight: bold;*/
    padding-top: 1em;
}

.article {
    margin-bottom: 100px;
}

.article-box .title,
.article .title {
    color: #6B574E;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-bottom: 1px solid #4B4646;
    text-align: left;
    font-family: inherit;
    letter-spacing: normal;
    padding: 0 0 .5em 0;
    margin: 0 0 .5em 0;
}

.article-box .title {
    letter-spacing: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.article-box .cat span {
    line-height: 120%;
    display: inline-block;
    margin: 2px;
    padding: 4px 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    font-size: 12px;
}

.article .title {
    font-size: 18px;
}

.article-area {
    line-height: 2;
    border-bottom: 1px solid #333;
    padding-bottom: 2em;
    margin-bottom: 2em;
}

.article-area img {
    margin: 2em 0;
}

.article .back_list {
    width: 30%;
}

.article .back_list:before {
    position: absolute;
    top: 30%;
    left: 6%;
    font-family: "Font Awesome 5 Free";
    content: "\f053";
    font-weight: 900;
}

.article .back_list:after {
    content: none;
}

.article-detail h4 {
    border: none;
    font-size: 38px;
    letter-spacing: .1em;
    color: #6B574E;
    text-align: center;
}

.cc-area .pic {
    margin-bottom: 10px;
}

.cc-area .article-box .title {
    margin-top: 10px;
    padding-bottom: 5px;
}

.cc-area .article-box .date {
    padding-top: 0px;
    text-align: right;
}

.side {
    padding-left: 35px;
}


.side.flexb {
    display: block;
}

.side .category,
.side .archive {
    width: 100%;
}

.side .category {
    margin-bottom: 60px;
}

.side .section-title {
    background-color: #F0E8E5;
    color: #6B574E;
    font-size: 24px;
    width: 100%;
    padding: .5em 0;
    text-align: center;
}

.side .category li,
.side .archive li {
    font-size: 16px;
    text-align: center;
    border-bottom: 1px solid #333;
    padding: 1em 0;
}

/********************************

s_blog_list,
s_blog_detail,
s_news_list,
s_news_detail

********************************/
@media only screen and (max-width: 599px) {
    .article-main li {
        width: 100%;
    }

    .article-main {
        margin-bottom: 10%;
    }

    .pager {
        margin-bottom: 10%;
    }

    .article .back_list {
        width: 50%;
    }

    .side {
        padding-left: 0;
    }

    .side.flexb {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .side .category,
    .side .archive {
        width: 46%;
    }

    .side .category {
        margin-bottom: 0;
    }
}

/*20210222追加*/
/*home concept*/
.bk_imgarea {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.bk_img {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.bk_imgarea .inner {
    position: relative;
    z-index: 1;
}

.bk_img img {
    height: 100% !important;
    width: 100%;
    font-family: "object-fit: cover;";
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0.3;
}

.info .txt {
    line-height: 250%;
}


/*home point*/
.point {
    overflow: hidden;
}

.point .inner {
    padding-bottom: 0;
}

.point-title .ja {
    font-size: 24px;
    text-align: left;
    padding-top: 8px;
}

.point-title .en {
    font-size: 20px;
    padding-left: 5px;
}

.point-title {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: #6B574E;
    line-height: 1.2;
    letter-spacing: 0;
    margin-bottom: 30px;
    position: relative;
}

.point-title2 {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: #6B574E;
    line-height: 1.2;
    letter-spacing: 0;
    margin-top: 25px;
    margin-bottom: 10px;
    position: relative;
}
.point-cont {
    width: 65%;
}

.point-img {
  width: 30%;
　height: 300px;
  object-fit: cover;
}

.point-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 50px 30px;
    align-items: center;
}


.point-title::after {
    content: '';
    display: block;
    /*width: 300%;*/
    height: 1px;
    background-color: #4B4646;
    margin: 15px 0;
    position: absolute;
    bottom: -27px;
    left: 0;
}

.point-box + .point-box {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    margin-top: 50px;
}

.point-box:nth-of-type(even) {
    background-color: rgba(240,232,229,0.8);
    margin-right: -999rem;
    padding-right: 999rem;
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse;
}

.point-box:nth-of-type(even) .point-title::after {
    left: auto;
    right: 0;
}

/*230325追加・採用ページH3デザイン*/
.recruith3 {
  color: #6B574E;
    border: solid 1px #6B574E;
    padding: 0.5em;
    font-weight: normal;
}

.recruith3 .span{
  color: #6B574E;
}

/*230327追加・TOPページ店舗 名デザイン*/
.box-mini {
    display: inline-block;
    background-color: #F0E8E5;
    padding: 0.5em;
    margin-bottom: 10px;
    font-weight: normal;
    
}

/*230327追加・TOPページMOREボタンデザイン*/

.menu .box .btn_wrap {
    text-align: right;
}

.more-btn{
  display: inline-block;
  background-color: #F0E8E5;
  padding:0.5em 3em 0.5em 3em;
  margin-bottom: 10px;

}

.more-btn .p{
  font-family: 'Josefin Sans', YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    position: relative;
    text-align: center;
    font-weight: normal;
    padding: 15px 10px;
  
}

/*230327追加TOPページ採用情報ボタン*/

.blog .btn_wrap {
    text-align:center;
}

.recruit-more{
    display: inline-block;
    color: #6B574E;
    border: solid 1px #6B574E;
    padding: 1em 3em 1em 3em;
    font-weight: bold;
    font-family: "游ゴシック",YuGothic,Hiragino Sans,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro",Hiragino Kaku Gothic ProN,"メイリオ",Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}



/*home recruit*/

.home-recruit .lead {
    text-align: center;
    color: rgb(255 255 255);
}

.home-recruit .txt {
    text-align: center;
    color: rgb(255 255 255);
}

.home-recruit .btn {
    margin-right: auto;
}

.home-recruit.bk_imgarea {
    background: #8d8d8d;
}

.home-recruit .btn {
    background: transparent;
    border: 1px solid #fff;
}

.home-recruit .btn {
    width: 100%;
    max-width: 300px;
    margin: 50px auto 0;
}

/*home feature*/
.menu h3 {
    font-size: 30px;
    /*margin-bottom: 30px;*/
    width: 100%;
    letter-spacing: 0;
    padding: 15px 0;
}

.menu .box .text {
    line-height: 250%;
}

/*home blog*/
.h-blog li a {
    display: block;
}

.blog li {
    width: 47.333%;
    margin: 1%;
}

.blog .flexlist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.blog .pic {
    width: 25%;
}

/*.text-area {
    width: 71%;
}*/

.blog .date {
    text-align: left;
}

.blog h3 {
    border: none;
    color: rgb(159, 133, 80);
    font-size: 16px;
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    font-weight: bold;
    text-align: left;
    margin-bottom: 1em;
    letter-spacing: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.blog .date:before {
    display: none;
}

.blog .date {
    padding: 0.5em 0 -0em;
}

.blog .btn {
    max-width: 300px;
    width: 100%;
    background: #b29d73;
    margin: 50px auto 0;
}

/*news*/
.news .box {
    max-width: 700px;
    width: 100%;
    border: 1px solid;
    margin: auto;
    padding: 4% 3%;
    color: rgb(159, 133, 80);
}

.news dl:not(:last-of-type) {
    margin-bottom: 15px;
}

.news .newsarea a {
    display: block;
}

.news dl dt {
    width: 100px;
}

.news dl dd {
    width: calc(100% - 110px);
}
.news dl dd a{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.btn {
    display: inline-block;
    font-family: 'Josefin Sans', YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    position: relative;
    text-align: center;
    padding: 15px;
    margin: 50px auto 0;
    color: #6B574E;
    letter-spacing: .2em;
}

.big {
    font-weight: bold;
    background: #434343;
    letter-spacing: 0.1em;
    width: 30%;
    font-size: 20px;
   /* padding: 20px 10px;*/
}


.insta .item {
    width: 18%;
    margin: 1%;
}

footer .logo img {
    max-width: 170px !important;
}


.footer_top {
    padding-bottom: 0;
}

.copyright {
    background: #F0E8E5;
    text-align: center;
    padding: 20px 10px;
    color: #6B574E;
    font-family: 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif;
    height: auto;
}

@media only screen and (max-width:1024px) {
    .mainimg {
        height: auto;
    }

    .scroll {
        right: 30px;
    }

    .mv-ontext {
        font-size: 30px;
    }

    .hconcept-text {
        display: block;
    }

    .hconcept-text > .txt {
        width: 100%;
    }

    .point-box:nth-of-type(2n+1) {
        padding: 30px;
    }

    .point-box + .point-box {
        margin-top: 20px;
    }

    .big {
        width: 60%;
    }
    footer{
      padding-bottom: 76px;
    }
}

@media only screen and (max-width:599px) {
    .mv-ontext {
        font-size: 17px;
    }

    .mainimg ul li p.pic.up-ofi-75:after {
        padding-top: 65vh;
    }

    #gnav .logo {
        width: 110px;
    }

    .scroll {
        right: 10px;
    }

    .point-box {
        display: block;
    }

    .point-box:nth-of-type(2n+1) {
        padding: 30px 10px;
    }

    .point-cont {
        width: 100%;
    }

    .point-img {
        width: 100%;
        margin-bottom: 12px;
    }

    .point-box + .point-box {
        margin-right: 0rem;
        padding-right: 0rem;
        padding: 30px 10px;
    }

    .point-title .ja {
        font-size: 20px;
    }

    #gnav {
        height: auto;
    }

    .hstaff-item {
        width: 48%;
    }

    .hstaff-item .pic {
        width: 100%;
    }

    .big {
        width: 98%;
        padding: 13px 10px;
        font-size: 17px;
    }

    .home-recruit .txt br {
        display: none;
    }

    .menu h3 {
        font-size: 36px;
        margin-bottom: 20px;
        padding: 7px 0;
    }

    h2 {
        font-size: 30px;
        margin-bottom: 24px;
    }

    .menu .btn {
        margin-top: 10px;
    }

    .btn {
        max-width: 300px;
    }

    /*.menu .box {
        margin-bottom: 50px;
    }*/

    .blog li {
        width: 98%;
        margin: 1%;
        margin-bottom: 10px;
    }

    .blog .date {
        padding-left: 15px;
    }
    .blog .date,.blog h3 {
        padding-left: 15px;
    }

    .news dl dt {
        width: 85px;
    }

    .news dl dd {
        width: calc(100% - 90px);
    }

    .insta .item {
        width: 31%;
    }

    .insta .item .pic {
        width: 100%;
    }

    .insta .item:nth-of-type(10) {
        display: none;
    }

    footer .logo img {
        width: 140px !important;
    }

    .footernav ul {
        width: 100%;
        margin-left: 0;
    }

    .footernav li {
        width: 50%;
        margin-bottom: 5px;
    }

    .footernav .inner {
        padding: 20px 0;
    }

    .inner .btn {
        margin-top: 20px;
    }

    .menu .box .btn_wrap {
        padding-top: 10px;
    }
    footer {
      padding-bottom: 66px;
  }

}

/*02concept*/


/*03company*/
.history-dl {
    border-bottom: 1px solid #4B4646;
}

#content.recruit.company .gl_wrap {
    margin-bottom: 0px;
}

/*04staff-list*/
.storestaff-list li {
    width: 23%;
    margin-left: 1%;
    margin-right: 1%;
}

@media only screen and (max-width:599px) {
    .storestaff-list li {
        width: 48%;
        margin-left: 1%;
        margin-right: 1%;
    }

    .storestaff-list li .pic {
        width: 100%;
    }

    .salon_stylist .sty_name {
        margin-left: 3px;
    }

    .salon_stylist .store {
        margin-bottom: 40px;
    }
}

/*stylist_detail*/
.stylist_detail .store_name {
    margin-bottom: 40px;
}

.underpage .stylist_detail .btn.back {
    margin-right: auto;
    margin-left: auto;
}

.bg_01 {
    background: #FFF;
}

.recruit-list li a {
    color: #fff;
    text-align: center;
    display: block;
    margin: 0 3%;
}
.recruit-list li .recuit-jobttl{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
    text-align: center;
  -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-family: "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝", "Sawarabi Mincho", serif;
}
.recruit-list li [class*="up-ofi"]{
  background: #000;
}
.recruit-list li img{
  opacity: 0.6;
}
@media only screen and (max-width:599px) {
    .recruit-list li a {
        margin-bottom: 10px;
    }

    #content.recruit .flow h4 {
        margin-bottom: 20px;
        font-size: 18px;
    }

    #content.recruit .oneday .corner {
        font-size: 18px;
    }

    #content.recruit .oneday .desc {
        padding-left: 40px;
        border-left: 3px solid #9f8550;
    }
    
    .recruit-list li .recuit-jobttl{
    font-size: 17px;
      
    }
    
}

/*product-list*/
.product-list {
    margin-bottom: 60px;
}

.product .side .category li,
.product .side .archive li {
    padding: 0.8em 0;
}

.product .side .section-title {
    font-size: 20px;
}

@media only screen and (max-width: 1024px) {
    .product .side {
        padding-left: 0;
    }
}


@media only screen and (max-width:599px) {
    .product .inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .product .article-main li {
        width: 48%;
    }

    .product .side .category,
    .product .side .archive {
        width: 48%;
    }
}

/*product-detail*/
.item-title {
    font-size: 20px;
    text-align: left;
    margin-bottom: 20px;
    font-family: "游ゴシック", YuGothic, Hiragino Sans, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    font-weight: bold;
    margin-top: 10px;
    padding-bottom: 0px;
    letter-spacing: 0;
    border-bottom: 1px solid;
}

.item-category span {
    line-height: 120%;
    display: inline-block;
    margin: 2px;
    padding: 4px 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    font-size: 12px;
}

.item-price {
    text-align: right;
    font-weight: bold;
}

.thumbs li.active-img .thumb {
    outline: 2px solid #9f8550;
}

/*05totla_beauty*/
.reserve-area {
    border: 1px solid #b19b70;
    padding: 0 50px 60px;
    margin: auto;
    max-width: 900px;
    width: 95%;
}
.beautytext_area{
  line-height: 200%;
}
.beautypage .point-cont{
  width: 100%;
}

.underpage .menu .reserve-area h3 {
    margin-bottom: 0;
    margin-top: 40px;
    padding-bottom: 10px;
}

.underpage .menu .reserve-area .btn {
    margin-top: 20px;
    max-width: 600px;
    width: 95%;
}

.underpage .menu .tabitem__ttl {
    border: 1px solid #b29d73;
}

.school_boxarea {
    border: 1px solid #b29d73;
}

.school_point {
    margin-bottom: 100px;
}


@media only screen and (max-width:1024px) {
    .underpage .beautypage .menu .gr221 h3:first-of-type {
        margin-bottom: 1em;
    }

    .underpage .effect {
        width: 85%;
    }

    .school_point {
        margin-bottom: 80px;
    }
}

@media only screen and (max-width:599px) {
    .beauty-ttl {
        font-size: 26px;
    }

    .underpage .effect {
        width: 95%;
        padding: 3.5em 0 0em;
    }

    .effect ul li {
        margin-right: auto;
        margin-left: auto;
        padding: .7em 0;
       font-size: 15px;

    }

    .tab_ttl {
        font-size: 24px;
    }

    .reserve-area {
        padding: 0px 3% 26px;
        width: 100%;
    }

    .underpage .menu .reserve-area .btn {
        font-size: 18px;
        width: 100%;
        letter-spacing: 3px;
        margin-top: 5px;
    }

    .underpage .menu .reserve-area h3 {
        margin-top: 20px;
    }

    .school_point {
        margin-bottom: 60px
    }

    .school_point .point-cont {
        width: 100%;
    }

    .underpage .content .school_point .text {
        text-align: left;
    }

    .school_point .point-box {
        padding: 30px 40px;
    }

    .menu {
        overflow: hidden;
    }
}


.tabnav li {
    cursor: pointer
}

.under-main-img {
    position: relative;
    height: auto;
}

.mainimg ul li .pic {
    background: #6B574E;
}

.under-ttl {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
}

.under-main-img ul li .pic img {
    opacity: 0.4;
}

@media only screen and (max-width:599px) {
    .under-ttl {
        font-size: 24px;
    }

    .underpage .content .lead {
        font-size: 20px;
    }
}
[data-element-id] #gnav{
  position: relative !important;
}
[data-element-id] .footernav .totop{
  display: block;
  width: 65px;
  position: static  !important;
  margin-top: 20px;
}
.contact .wrap .btn_wrap button.modoru:after {
    position: absolute;
    top: 30%;
    left: 6%;
    right: auto;
    font-family: "Font Awesome 5 Free";
    content: "\f053";
    font-weight: 900;
}
[data-element-id] .product-list > div{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
[data-element-id] .top_product_list > div{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
}
#gnav .toggle .bar{
  background: #ae9a6d;
}
#gnav .toggle .bar:before{
   background: #ae9a6d;
}
#gnav .toggle .bar:after{
   background: #ae9a6d;
}
[data-element-id] .tab_sm{
  display: block;
}
[data-element-id] .toggle{
  display: none;
}
[data-element-id].sp_tel .box {
    width: 33%;
    background: #434343;
    padding: .5em;
}
[data-element-id] .sp_tel .box .fs18 {
        text-align: center;
        color: #fff;
        font-weight: bold;
    }

[data-element-id] .sp_tel .box .fs18 span {
        font-family: 'Josefin Sans', sans-serif;
        padding-right: .5em;
    }

[data-element-id] .sp_tel .box .tel,
[data-element-id] .sp_tel .box .tel a {
        text-align: center;
        color: #fff;
    }

[data-element-id] .sp_tel .box .tel:before {
        content: 'TEL. ';
        font-size: .5em;
    }
[data-element-id] .globalnav ul li.tab_sm:before {
    content: "スマホ用のナビです";
    display: block;
    background: #333;
    color: #fff;
    font-size: 12px;
    padding: 5px;
    margin: 0;
    text-align: center;
}

[data-element-id] .fead-mv{
  -ms-transform: translate(0, 0px);
  transform: translate(0, 0px);
  -webkit-transform: translate(0, 0px);
}
.cartjs_product_input_txt{
  border: 1px solid #9f8550 !important;
  border-radius: 0px;
}
.cartjs_cart_in > input{
  border-radius: 1px !important;
  background-color: #333333 !important;
  height: 50px !important;
}

.up-ofi-100.contain_img img{
  font-family: "object-fit:contain; object-position: 50% 50%;";
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
}
[data-element-id] .tab__area:first-of-type:before {
    content: "こちらは1つめのタブの内容です";
    display: block;
    background: #8f41b6;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    margin: 0;
    text-align: center;
}
[data-element-id] .tab__area{
  border: 3px solid #8f41b6;
  margin-bottom: 40px;
  padding-bottom: 40px;
}

[data-element-id] .tab__area:nth-of-type(2):before {
    content: "こちらは2つめのタブの内容です";
    display: block;
    background: #8f41b6;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    margin: 0;
    text-align: center;
}


/* 0303 追記 */
.coming-txt{
  display: block;
    text-align: center;
    color: #6B574E;
    font-size: 24px;
    margin-bottom:20px;
}

/* 03/04 追記 */
.mb50{
  margin-bottom: 50px !important;
}

/* 230327 追記ブログカテゴリー */
.cat{
  display: inline-block;
  background-color: #F0E8E5;
  padding: 5px;
}

/* 230327 追記店舗ページホットペッパーのリンクボタンをセンタリング */
.btn_wrap {
    text-align: center;
}

.shubetsu01{
  margin-right: 20px;
}

@media only screen and (max-width:599px) {
.shubetsu02{
  font-size: 13px;
}
}



.newstitle{
  font-size: 22px !important;
}

@media only screen and (max-width:1024px) {
.newsli01{
  width: 31%;
  margin: 0px 1% 6% 1%;
}
}


@media only screen and (max-width:599px) {
.newsli01 {
    width: 100%;
    margin: 0px 1% 10% 1%;
}


.newstitle {
    font-size: 18px !important;
}
}