@charset "UTF-8";

/* news
----------------------------------------------- */
.top-news { padding: 3.5vw 0; background: #fdf9fa; }
.top-news-content { margin: auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }
.top-news-title {width: 22vw;padding: 3.5vw 0 2.5vw;font-size: 3.8vw;font-family: 'Cinzel';text-align: center;letter-spacing: 0.4vw;border-right: 1px solid #aba6a2;}
.top-news-link { padding: 1vw 6vw 0 3.5vw; position: relative; flex: 1; }
.top-news-link:after { content: ''; border-top: 1.5vw solid transparent; border-right: 1.5vw solid #625d5a; border-bottom: 1.5vw solid #625d5a; border-left: 1.5vw solid transparent; position: absolute; right: 3.5vw; bottom: 1vw; }
.top-news-link-time {margin-bottom: 0.5vw;font-size: 3.4vw;font-family: 'Cinzel';letter-spacing: 0.2vw;position: relative;display: block;}
.top-news-link-title { position: relative; }
.top-news-link-title span {font-size: 3.4vw;line-height: 1.4;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}

/* concept
----------------------------------------------- */
.top-concept { padding: 12vw 0; }
.top-concept-content { width: 90vw; margin: auto; }
.top-concept-image { width: 100%; margin: auto; position: relative; }
.top-concept-image .image01 { width: 78vw; }
.top-concept-image .image02 { width: 50vw; margin: -14vw -5vw 0 auto; z-index: 1; position: relative; }
.top-concept-text { width: 100%; }
.top-concept-title { margin: -2.5vw 0 5vw; }
.top-concept-title .en {margin-bottom: 5vw;font-size: 3.8vw;font-family: 'Cinzel';letter-spacing: 0.4vw;display: block;}
.top-concept-title .jp { font-size: 5vw; font-family: var(--mincho); font-weight: 600; line-height: 1.6; display: block; }
.top-concept-comment { margin-bottom: 6vw; }
.top-concept-comment p {margin-bottom: 4vw;font-size: 3.6vw;text-align: justify;text-justify: inter-ideograph;font-feature-settings: "palt";line-height: 1.8;letter-spacing: 0.04em;}
.top-concept-more { margin-left: 0; }

/* menu
----------------------------------------------- */
.top-menu { padding: 12vw 0 2vw; background: url(../images/top-menu-bg.jpg) no-repeat top center; background-size: cover; }
.top-menu-title { width: 90vw; }
.top-menu-items { width: 100%; }
.top-menu-items li { width: 100%; margin-bottom: 10vw; }
.top-menu-items li:nth-child(even) .top-menu-image { margin-left: auto; }
.top-menu-items li:nth-child(even) .top-menu-item-text { margin: -12vw auto 0 0; }
.top-menu-image { width: 80vw; z-index: 1; position: relative; }
.top-menu-item-text { width: 90vw; padding: 18vw 10vw 6vw; margin: -12vw 0 0 auto; background: #fff; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); }
.top-menu-item-title {padding-bottom: 2.5vw;margin-bottom: 2.5vw;font-size: 6vw;font-family: var(--mincho);font-weight: 600;line-height: 1.2;border-bottom: 1px solid #c9c7c6;}
.top-menu-item-comment p {font-size: 3.6vw;text-align: justify;text-justify: inter-ideograph;font-feature-settings: "palt";line-height: 1.8;letter-spacing: 0.04em;}

/* brand
----------------------------------------------- */
.top-brand { padding: 12vw 0; }
.top-brand-head { width: 90vw; margin: 0 auto 5vw; }
.top-brand-head p {font-size: 3.6vw;text-align: justify;text-justify: inter-ideograph;font-feature-settings: "palt";line-height: 1.6;letter-spacing: 0.04em;}
.top-brand-title { margin-bottom: 4vw; }
.top-brand-items, .top-machine-items { width: 100%; }
.top-brand-items .slick-track, .top-machine-items .slick-track { display: flex; }
.top-brand-item, .top-machine-item { width: 80vw; height: auto; margin: 0 2.5vw; background: #fff; border: 1px solid #ededed; position: relative; }
.top-brand-item-image, .top-machine-item-image { width: 100%; }
.top-brand-item-text, .top-machine-item-text { padding: 5vw 0; border-top: 1px solid #ededed; }
.top-brand-item-title { text-align: center; }
.top-brand-item-title .en { margin-bottom: 1vw; font-size: 7.37vw; font-family: 'Cinzel'; letter-spacing: 0.4vw; display: block; }
.top-brand-item-title .jp { font-size: 3.42vw; color: #baa298; display: block; }

/* machine
----------------------------------------------- */
.top-machine { padding: 12vw 0; background: #fdf9f9; }
.top-machine-title { width: 90vw; }
.top-machine-item-title {margin-bottom: 2vw;font-size: 6.2vw;font-family: var(--mincho);text-align: center;line-height: 1.4;}
.top-machine-item-comment { padding: 0 5vw; }
.top-machine-item-comment p {font-size: 3.4vw;text-align: justify;text-justify: inter-ideograph;font-feature-settings: "palt";line-height: 1.6;letter-spacing: 0.04em;}

/* salon
----------------------------------------------- */
.top-salon { padding: 24vw 0 7vw; background: url(../images/top-salon-bg.jpg) no-repeat top center; background-size: 100%; }
.top-salon-head { width: 100%; padding-top: 10vw; margin: 0 auto 8vw; z-index: 1; position: relative; }
.top-salon-head:before { content: ''; width: 90vw; height: 100%; background: #fff; border-top: 5px solid #baa298; z-index: -1; position: absolute; top: 0; left: 5vw; }
.top-salon-head p {font-size: 4vw;font-family: var(--mincho);text-align: center;line-height: 1.6;}
.top-salon-head p span { margin-right: 1vw; color: #9e756b; font-size: 6.58vw; display: inline-block; }
.top-salon-title {margin: 0 auto 8vw;font-size: 13vw;font-family: 'Cinzel';text-align: center;letter-spacing: 0.4vw;position: relative;display: table;}
.top-salon-title .deco { width: 25vw; position: absolute; bottom: -5vw; right: -16vw; }
.top-salon-box { width: 90vw; margin: 0 auto 5vw; }
.top-salon-box-title.open .plus:after { -moz-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); }
.top-salon-box-title .plus { width: 6vw; height: 6vw; background: #baa298; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: 50%; right: 0; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.top-salon-box-title .plus:before { content: ''; width: 3vw; height: 1px; background: #fff; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }
.top-salon-box-title .plus:after { content: ''; width: 1px; height: 3vw; background: #fff; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }

.top-salon-accordion-box { padding: 1px 0; display: none; }
.top-salon-items { width: 100%; }
.top-salon-item { width: 100%; padding: 6vw 0; border-bottom: 1px dashed #b7b5b3; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; align-items: flex-start; }
.top-salon-item:last-child{border-bottom: none;}
.top-salon-item.premium .top-salon-item-image:after {content: 'プレミアム店舗';width: 100%;padding: 1.5vw 0;color: #9e756b;font-size: 3.29vw;font-weight: bold;text-align: center;background: #fdf9f9;z-index: 1;position: absolute;bottom: 0;left: 0;}
.top-salon-item-image { width: 40vw; position: relative; }
.top-salon-item-image img { width: 100%; }
.top-salon-item-text { padding-left: 4vw; flex: 1; }
.top-salon-item-title {margin-bottom: 2vw;font-size: 3.8vw;font-weight: bold;line-height: 1.4;}
.top-salon-item-address {margin-bottom: 3vw;font-size: 3.4vw;line-height: 1.4;}
.top-salon-item-address span{font-size: 3.2vw;}

.top-salon-contact-items { width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; }
.top-salon-contact-items li { width: 48%; font-size: 3.29vw; font-family: var(--mincho); text-align: center; }
.top-salon-contact-items li.tel a { color: #9e746b; background: #fff; border: 1px solid #9e746b; }
.top-salon-contact-items li.web a { color: #fff; background: #baa298; }
.top-salon-contact-items a {padding: 2vw 0;-moz-border-radius: 10vw;-webkit-border-radius: 10vw;border-radius: 10vw;}

/* qa
----------------------------------------------- */
.top-qa { padding: 12vw 0; background: #fdf9f9 url(../images/top-qa-bg.jpg) no-repeat center left; background-size: auto 100%; }
.top-qa-content { width: 90vw; margin: auto; }
.top-qa-items { width: 100%; margin-bottom: 6vw; }
.top-qa-items li { padding: 6vw 5vw; margin-bottom: 5vw; background: #fff; border: 1px solid #c9b5ad; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.top-qa-item-question {padding: 0 0 3.5vw 10vw;margin-bottom: 3.5vw;font-size: 4.4vw;font-family: var(--mincho);line-height: 1.4;border-bottom: 1px dashed #b4b4b4;position: relative;}
.top-qa-item-question:before { content: 'Q'; width: 8vw; height: 8vw; padding-top: 0.8vw; color: #fff; font-size: 4.21vw; font-family: var(--mincho); text-align: center; background: #baa199; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: 0; left: 0; }
.top-qa-item-question p { padding-top: 0.5vw; }
.top-qa-item-answer {padding-left: 10vw;font-size: 3.6vw;text-align: justify;text-justify: inter-ideograph;font-feature-settings: "palt";line-height: 1.8;letter-spacing: 0.04em;position: relative;}
.top-qa-item-answer:before {content: 'A';width: 8vw;height: 8vw;padding-top: 0.3vw;color: #fff;font-size: 4.2vw;font-family: var(--mincho);text-align: center;text-indent: 0.5vw;background: #817a74;-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;position: absolute;top: 0;left: 0;}

/* qa
----------------------------------------------- */
.top-banner { padding: 12vw 0 7vw; }
.top-banner-items { width: 80vw; margin: auto; }
.top-banner-items li { width: 100%; margin-bottom: 5vw; }
.top-banner-items img { width: 100%; }

/* ============================================= 
pc
================================================*/
@media screen and (min-width: 736px) { 

/* news
----------------------------------------------- */
.top-news { padding: 0; }
.top-news-content { width: 960px; }
.top-news-title { width: 105px; padding: 17px 0 14px; font-size: 16px; letter-spacing: 2px; }
.top-news-link { padding: 4px 20px 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }
.top-news-link:after { display: none; }
.top-news-link-time { margin: 0 15px 0 0; font-size: 16px; letter-spacing: 2px; }
.top-news-link-title:after { content: ''; border-top: 5px solid transparent; border-right: 5px solid #625d5a; border-bottom: 5px solid #625d5a; border-left: 5px solid transparent; position: absolute; right: -15px; bottom: 0; }
.top-news-link-title span { font-size: 14px; }

/* concept
----------------------------------------------- */
.top-concept { padding: 80px 0; }
.top-concept-content { width: 960px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; }
.top-concept-text { width: 500px; -webkit-order: 1; order: 1; }
.top-concept-image { width: 600px; margin: 0 -200px 0 0; -webkit-order: 2; order: 2; }
.top-concept-image .image01 { width: 100%; }
.top-concept-image .image02 { width: 390px; margin: -65px -120px 0 auto; }
.top-concept-title { margin: 0 0 20px; }
.top-concept-title .en { margin-bottom: 20px; font-size: 16px; letter-spacing: 2px; }
.top-concept-title .jp { font-size: 26px; }
.top-concept-comment { margin-bottom: 40px; }
.top-concept-comment p { margin-bottom: 10px; font-size: 15px; }
.top-menu { padding: 100px 0 40px; background: url(../images/top-menu-bg-pc.jpg) no-repeat top center; background-size: cover; }

/* menu
----------------------------------------------- */
.top-menu-content { width: 960px; margin: auto; }
.top-menu-title { width: 100%; }
.top-menu-items li { padding-top: 35px; margin-bottom: 60px; position: relative; }
.top-menu-items li:nth-child(odd) .top-menu-image { left: 0; }
.top-menu-items li:nth-child(odd) .top-menu-item-text { padding: 40px 40px 50px 70px; margin: 0 0 0 auto; }
.top-menu-items li:nth-child(even) .top-menu-image { right: 0; }
.top-menu-items li:nth-child(even) .top-menu-item-text { padding: 40px 70px 50px 40px; margin: 0 auto 0 0; }
.top-menu-image { width: 480px; position: absolute; top: 0; }
.top-menu-item-text { width: 520px; }
.top-menu-item-title { padding-bottom: 15px; margin-bottom: 15px; font-size: 25px; }
.top-menu-item-comment p { font-size: 16px; }

/* brand
----------------------------------------------- */
.top-brand { padding: 100px 0; }
.top-brand-content, .top-machine-content { width: 960px; margin: auto; }
.top-brand-head { margin-bottom: 40px; }
.top-brand-head p { font-size: 16px; }
.top-brand-title { margin-bottom: 30px; }
.top-brand-items, .top-machine-items { width: calc(50vw + 475px); }
.top-brand-items .slick-prev, .top-machine-items .slick-prev { width: 50px; left: -25px; }
.top-brand-items .slick-next, .top-machine-items .slick-next { width: 50px; }
.top-brand-item, .top-machine-item { width: 430px; margin: 0 12px; }
/* .top-brand-item:after, .top-machine-item:after { border-width: 6px; right: 5px; bottom: 5px; } */
.top-brand-item-text, .top-machine-item-text { padding: 25px 0; }
.top-brand-item-title .en { margin-bottom: 5px; font-size: 26px; letter-spacing: 2px; }
.top-brand-item-title .jp { font-size: 14px; }

/* machine
----------------------------------------------- */
.top-machine { padding: 100px 0; }
.top-machine-item-title { margin-bottom: 5px; font-size: 26px; }
.top-machine-item-comment { padding: 0 30px; }
.top-machine-item-comment p { font-size: 14px; }

/* salon
----------------------------------------------- */
.top-salon { padding: 140px 0 100px; background: none; z-index: 1; position: relative; }
.top-salon:before { content: ''; width: 100%; min-width: 2000px; height: 230px; background: url(../images/top-salon-bg-pc.jpg) no-repeat top center; background-size: cover; z-index: -1; position: absolute; top: 0; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.top-salon-head { padding: 50px 0 60px; margin: 0; }
.top-salon-head:before { width: 500px; height: 100%; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.top-salon-head p { font-size: 20px; }
.top-salon-head p span { margin-right: 4px; font-size: 25px; }
.top-salon-title { margin-bottom: 40px; font-size: 56px; letter-spacing: 2px; }
.top-salon-title .deco { width: 100px; bottom: -20px; right: -66px; }
.top-salon-box { width: 960px; margin-bottom: 20px; }
.top-salon-box-title .plus { width: 30px; height: 30px; }
.top-salon-box-title .plus:before { width: 15px; }
.top-salon-box-title .plus:after { height: 15px; }
.top-salon-items { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.top-salon-item { padding: 30px 0; }
.top-salon-item:nth-child(odd) { width: 520px; padding: 30px 80px 30px 0; }
.top-salon-item:nth-child(even) { flex: 1; }
.top-salon-item:last-child,.top-salon-item:nth-last-child(2){border-bottom: none;}

.top-salon-item.premium .top-salon-item-image:after { padding: 10px 0 9px; font-size: 14px; }
.top-salon-item-image { width: 160px; }
.top-salon-item-text { padding-left: 25px; }
.top-salon-item-title {margin-bottom: 8px;font-size: 16px;line-height: 1.6;}
.top-salon-item-address {margin-bottom: 20px;font-size: 14px;}
.top-salon-item-address span{font-size: 12px;}
.top-salon-contact-items li { font-size: 16px; }
.top-salon-contact-items a { padding: 8px 0 7px; }

/* qa
----------------------------------------------- */
.top-qa { padding: 100px 0; background: #fdf9f9; z-index: 1; position: relative; }
.top-qa:before { content: ''; width: calc(50vw - 200px); height: 100%; background: url(../images/top-qa-bg-pc.jpg) no-repeat center; background-size: cover; z-index: -1; position: absolute; top: 0; left: 0; }
.top-qa-content { width: 960px; }
.top-qa-items { margin-bottom: 40px; }
.top-qa-items li { padding: 30px 20px; margin-bottom: 20px; }
.top-qa-item-question { padding: 0 0 20px 45px; margin-bottom: 20px; font-size: 20px; }
.top-qa-item-question:before { width: 34px; height: 34px; padding-top: 4px; font-size: 18px; top: 5px; }
.top-qa-item-answer { padding-left: 45px; font-size: 15px; }
.top-qa-item-answer:before { width: 34px; height: 34px; padding-top: 1px; font-size: 18px; text-indent: 1px; top: -2px; }

/* banner
----------------------------------------------- */
.top-banner { padding: 80px 0; }
.top-banner-items {width: 640px;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.top-banner-items li { width: 310px; margin: 0; }
}

/* ============================================= 
retina用
================================================*/ 
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 
.top-menu { background-image: url(../images/top-menu-bg-pc@2x.jpg) ; }
.top-salon:before { background-image: url(../images/top-salon-bg-pc.jpg) ; }
.top-qa:before { background-image: url(../images/top-qa-bg-pc@2x.jpg); } 
}