@charset "UTF-8";
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom: 0; font-weight: normal;}
h1,h2,h3,h4 {font-weight: bold;}
p {margin-bottom: 0; line-height: 1.6;}

a:link { text-decoration: none; color: #3E3D3D;}
a:visited { text-decoration: none; color: #3E3D3D;}
a:hover { text-decoration: none;}
a:active { text-decoration: none; color: #3E3D3D;}
a:link,a:visited,a:hover,a:active {transition: all .6s; }
a:hover { opacity: .4;}

img { max-width: 100%; width: 100%; height: auto; vertical-align: bottom}
#saloninfosec .cell p.tell a {color:#fff;}
* {word-break: break-all font-family: sans-serif;}

.linebtn {display:none!important;}
.linebtn.on {display:block!important;}

.wow {opacity: 0;}

.formTd .d-inline-block {display:block!important;}
.formTd .d-inline-block input { margin-right: .4vw;}
.requiredText {color:red; padding-left:.3vw;}

.dn {display:none!important;}

.maincont {position: relative; z-index: 2; opacity: 0; transition all 1s; margin-bottom: 15vw;}
.maincont.on {opacity: 1; transition all 1s;}
.videoCont { position: fixed; top: 0; right: 0; z-index: 1; width: 100%; height: 100vh; }
.videoCont video { width: 100%; height: 100%; aspect-ratio:1/0.563; object-fit: cover; opacity: .2;}
body {background: #848484; color: #fff; font-size: .9vw;counter-reset: number 0;}

.widget {position: relative; width: 100%; height: 100%; aspect-ratio:1/1.3; margin: 0 auto;}
.widget .cover {position: absolute; top: 0; left: 0; z-index: 2; display: block; width: 100%; height: 100%; margin: 0 auto;}
.widget #instagramfeed {position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; margin: 0 auto;}



@media screen and (min-width: 1000px) {
.header { position: fixed; z-index: 9; top: 1vw; left: 0; width: 91.7%; margin: 0 4.15vw; display: flex; justify-content: space-between; align-items: center;}
.header .logo { width: 53.8vw; height: auto; display: block; text-align: left;}
.header .logo img {display: block; width: 11.2vw; height: auto;}
.header .logo.active {filter: invert(); opacity: .6;}
.header .menu { display: flex; justify-content: center; align-items: center; width: auto; }
.header .menu a {display: block; width: auto; margin-right: 4vw; font-size: 90%;}
.header .menu a:last-child {margin-right: 0;}
.header .menu a p { font-size: 100%; color: #fff;}

#spMenu {  display: flex; justify-content: center; align-items: center; width: 2.5vw; height: 4vw; transition: all 1s; padding: 0; align-items: center; margin: 0 0 0 3vw; }
#spMenu .menu-trigger { position: relative; width: 2.5vw; height: 2.5vw; display: block; justify-content: center; align-items: center; margin: auto; top: 0; bottom: 0; left: 0; right: 0;}
.menu-trigger,.menu-trigger p { display: block; transition: all .4s; box-sizing: border-box; }
.menu-trigger.down p { position: absolute; left: 0; width: 100%; height: 1px; background: #fff; font-size: 0.1em; }
.menu-trigger p { position: absolute; left: 0; width: 100%; height: 1px; background: #fff; font-size: 0.1em; box-shadow: 0px 0px 8px rgba(255,255,255,0.2); }
.menu-trigger p:nth-of-type(1) { top: 0; }
.menu-trigger p:nth-of-type(2) { top: 1.1vw; }
.menu-trigger p:nth-of-type(3) { top: 2.3vw; }
.menu-trigger.active p:nth-of-type(1) { transform: translateY(1.2vw) rotate(-45deg); background: #848484; }
.menu-trigger.active p:nth-of-type(2) { opacity: 0; }
.menu-trigger.active p:nth-of-type(3) { transform: translateY(-1.05vw) rotate(45deg); background: #848484; }

.spnavi { display: flex; flex-direction: column; overflow: hidden; position: fixed; top: 0; left: 0; z-index: -8; opacity: 0; width: 100%; height: max-content; padding: 8vw 4.15vw 1.5vw 4.15vw; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; transition: all .6s; background: rgba(255,255,255,.95);}
.spnavi.active { z-index: 8; opacity: 1; transition: all .5s;}
.spnavi .gmenu { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%;}
.spnavi .gmenu a { font-size: 100%; display: block; margin-bottom: 2vw; display: block; width: 33.3%;}
.spnavi .gmenu a p { color: #848484; font-size: 100%; line-height: 1.3;}
.spnavi .cp { font-size: 80%; text-align: left; color: #848484; padding-top: 1vw; margin-top: 1vw; border-top: solid 1px #eaeaea; text-align: right;}

.footer { position: fixed; z-index: 7; bottom: 2vw; left: 0; width: 91.7%; margin: 0 4.15vw; display: flex; justify-content: space-between; align-items: center;}
.footer h1 {color: #fff; font-size: 85%; font-weight: normal; text-align: left;}
.footer .sns { width: auto; display: flex; justify-content: space-between; align-items: center;}
.footer .sns a {display: block; width: 2vw; height: 2vw; margin-left: 3vw;}
.footer .sns a img { display: block; width: 100%; height: 100%; object-fit: cover;}

.pagettl {width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.pagettl h1,.pagettl h2 {font-size: 300%; display: block; margin-bottom: 2vw;}

.btmlink {position: relative; z-index: 2; padding-bottom: 12vw; background: rgba(0,0,0,.2); }
.btmlink .section {margin: 0 auto 26vw;}
.btmlink .section .ttl { transform: rotate(-90deg);transform-origin: bottom;  width: max-content; height: max-content; position: relative; top: 10vw;}
.btmlink .section .ttl:after { position: absolute; content:""; display: block; width: 9vw; height: 1px; background: #fff; top: 1.5vw; bottom: 0; right: -10vw;}
.btmlink .salonCell {width: 76.3vw; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; font-size: 80%;}
.btmlink .salonCell .cell { width: 27%; border-top: solid 1px rgba(255,255,255,.3); text-align: left;}
.btmlink .salonCell .cell h3 { font-size: 170%; margin: 1vw 0 .3vw;}
.btmlink .salonCell .cell h3 + p { margin-bottom: 2vw;}
.btmlink .salonCell .cell .img { margin-bottom: 1vw; overflow: hidden; aspect-ratio:1/.75;}
.btmlink .salonCell .cell .img img { display: block; width: 100%; height: 100%; object-fit: cover;}
.btmlink .salonCell .cell .img + p { display: block; margin-bottom: 2vw;}
.btmlink .salonCell .cell .btn { display: flex; justify-content: center; align-items: center; background: #fff; width: 70%; text-align: center; padding: .5vw 0; box-sizing: border-box; font-size: 100%; margin: 0 auto 2vw; border-right-style: none;}
.btmlink .salonCell .cell .btn p { color: #000; position: relative; font-size: 80%;}
.btmlink .salonCell .cell .btn:after { display: block; content:"+"; padding-left: 1vw; color: #000; }
.btmlink .salonCell .cell .reserve { display: flex; justify-content: center; align-items: center; background: #fff; width: 100%; text-align: center; padding: 2vw; box-sizing: border-box; font-size: 100%; padding: .5vw 0;}
.btmlink .salonCell .cell .reserve p { color: #000; position: relative;}

.recruitcta { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; width: 100%; height: auto; aspect-ratio:1/.344; background: url(../../../system_panel/uploads/images/bg_recruitcta.jpg) no-repeat center center; background-size: cover;}
.recruitcta .whitebg { width: auto; height: auto; padding: 3vw; text-align: center; background: #fff;}
.recruitcta .whitebg h3 {color: #000; font-size: 170%; margin-bottom: 3vw;}
.recruitcta .whitebg p {display: block; width: 50vw; text-align: left;color: #000; margin-bottom: 3vw;}

.maincont.salondetail .hbox h2 { line-height: 1.3;}

.hqdbg {position: relative; width: 100%; height: auto; aspect-ratio: 1/.482;}
.hqdbg .bg {position: absolute; z-index: 1; width: 100%; height: auto; aspect-ratio: 1/.482;}
.hqdbg .bg img { display: block; width: 100%; height: 100%; object-fit: cover;}
.hqdbg .txt {position: absolute; z-index: 2; width: 100%; height: auto; padding: 0; box-sizing: border-box; width: 60%; height: auto; top: 9vw; left: 30vw; }
.hqdbg .txt * {-webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3)); filter: drop-shadow(3px 3px 5px rgba(0,0,0,.3));}

.duocell .cell.bgblk.voice {aspect-ratio: unset; padding: 3vw;}
.bgblk.voice .ttl {display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 3vw;}
.bgblk.voice .ttl h3:before { counter-increment: number 1;  content: "0" counter(number) " ";}



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

.kv {position: relative; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%; height: auto; aspect-ratio: 1/.667; overflow: hidden; background: #000;}
.kv .slide {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 1/.667;}
.kv .slide img { width: 100%; height: 100%; object-fit: cover;}

.indexsec1 .flcell {display: flex; justify-content: space-between; align-items: flex-start; width: 100%;}
.indexsec1 .flcell .fleft { width: 28vw; aspect-ratio: 1/1.456; overflow: hidden;}
.indexsec1 .flcell .fleft video { width: 100%; height: 100%; object-fit: cover;}
.indexsec1 .flcell .fright { width: 45vw;}
.indexsec1 .flcell .fright .imgtxt {position: relative;}
.indexsec1 .flcell .fright .imgtxt img { height: 9vw; width: auto; display: block;}
.indexsec1 .flcell .fright .imgtxt img:nth-child(2) {position: relative; top: -1vw; left: 3vw;}
.indexsec1 .flcell .fright .imgtxt img:nth-child(3) {position: relative; top: -3.5vw;}
.indexsec1 .flcell .fright .txt {position: relative; margin-left: 3vw;}
.indexsec1 .flcell .fright .txt h1 {font-size: 130%; margin-bottom: 3px; margin-bottom: 2vw;}
.indexsec1 .flcell .fright .txt h1 + p {margin-bottom: 3vw; font-size: 90%;}
.indexsec1 .flcell .fright .txt .btn { margin: 0;}

.indexsec1 .section:nth-of-type(2) .flcell {flex-direction: row-reverse;}
.indexsec1 .section:nth-of-type(2) .flcell .fright .imgtxt { margin-left: 13vw;}
.indexsec1 .section:nth-of-type(2) .flcell .fright .imgtxt img:nth-child(1) {position: relative;  left: 4.4vw;}
.indexsec1 .section:nth-of-type(2) .flcell .fright .imgtxt img:nth-child(2) {position: relative; top: -1vw; left: 11vw;}
.indexsec1 .section:nth-of-type(2) .flcell .fright .imgtxt img:nth-child(3) {position: relative; top: -3.5vw;}
.indexsec1 .section:nth-of-type(2) .flcell .fright .txt {position: relative; text-align: right;}
.indexsec1 .section:nth-of-type(2) .flcell .fright .txt .btn { margin: 0 0 0 auto;}

.salonsection { margin-top: 15vw; }
.sdalonhead {position: relative; width: 100%; height: auto; aspect-ratio: 1/0.348; display: flex; justify-content: center; align-items: center;}
.sdalonhead:after {position: absolute; z-index: 2; display: block; content:""; width: 1px; height: 10vw; background: rgba(255,255,255,.3); bottom: -5vw; left: 0; right: 0; margin: auto;}
.sdalonhead .txt {position: absolute; z-index: 2; width: 50%; height: max-content; text-align: center; border: solid 1px #fff; padding: 5vw 0; box-sizing: border-box; backdrop-filter: blur(12px);}
.sdalonhead .bg {position: absolute; z-index: 1; width: 100%; aspect-ratio: 1/0.348; overflow: hidden; }
.sdalonhead .bg img { width: 100%; height: 100%; object-fit: cover; }
.salonsection .sdalonhead + h2 {margin-top: 10vw; text-align: center;}
.salonsection .sdalonhead + h2 + p {display: block; width: 60%; margin: 4vw auto 0; text-align: center; text-align: left;}
.salonsection .btnbox { display: flex; justify-content: space-between; align-items: center; width: max-content; margin: 4vw auto 0;}
.salonsection .btnbox a { margin: 0 2vw; width: 14vw;}

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


.slideS {position: relative;}
.slideS img {display: block; position: absolute; top: 3vw; left: 3vw; width: 120%; aspect-ratio: 1/.667; z-index: 2; transition: opacity 1s ease;}
.slideS img.active {opacity: 1;}













.section {width: 76.3vw; margin: 15vw auto 0;}

.btn {border-radius: 2vw;position: relative; width: max-content; margin-left: auto; margin-right: auto; padding: .3vw 2vw .3vw 3vw; display: flex; justify-content: center; align-items: center;}
.btn {background: #fff;}
.btn:after { display: block; content:"+"; padding-left: 1vw; color: #000; }
.btn p {color: #000; width: max-content; margin: 0; padding: 0;}
.btn.blk {background: #000;}
.btn.blk:after { display: block; content:"+"; padding-left: 1vw; color: #fff; }
.btn.blk p {color: #fff; width: max-content; margin: 0; padding: 0;}

.mb1 {margin-bottom: 1vw!important;}
.mb3 {margin-bottom: 3vw!important;}
.mb5 {margin-bottom: 5vw!important;}
.mb7 {margin-bottom: 7vw!important;}
.mb10 {margin-bottom: 10vw!important;}
.mt10 {margin-top: 10vw!important;}

.tac {text-align: center;}
.tal {text-align: left;}
.tar {text-align: right;}

.hbox { display: block; text-align: center; margin: 0 auto 5vw;}
.hbox h2 { text-align: center; line-height: 1;font-size: 230%;}
.hbox p { text-align: center; margin-top: 1vw;}

.txtlist .flcell { display: flex; justify-content: space-between; align-items: flex-start; margin: 0 auto 0px; border-bottom: 1px solid rgba(255,255,255,.15); padding: 1.5vw;}
.txtlist .flcell:nth-of-type(1) { border-top: 1px solid rgba(255,255,255,.15);}
.txtlist .flcell .fleft { width: 30%; text-align: left; font-size: 100%;}
.txtlist .flcell .fright { width: 70%; text-align: left; font-size: 100%;}
.txtlist .flcell .fright a {color: #fff;}

.duolist .cell .flcell { display: flex; justify-content: space-between; margin: 0 auto 8vw; }
.duolist .cell .flcell .fleft { position: relative; z-index: 2; width: 40%; aspect-ratio: 1/.667;}
.duolist .cell .flcell .fleft img {display: block; position: absolute; top: 3vw; left: 3vw; width: 120%; aspect-ratio: 1/.667; z-index: 2;}
.duolist .cell .flcell .fleft img.recruit {aspect-ratio:1/.8!important;}
.duolist .cell .flcell .fright {  position: relative; z-index: 1; width: 60%; text-align: left; font-size: 100%; background: rgba(0,0,0,.15); padding: 5vw; box-sizing: border-box;}
.duolist .cell.interview .flcell .fright p {line-height: 1.3; margin-bottom: 4vw;}
.duolist .cell.interview .flcell .fright p strong {font-size: 105%;}
.duolist .cell .flcell .fright h2,.duolist .cell .flcell .fright h3 {font-size: 170%; margin-bottom: 1vw;}
.duolist .cell .flcell .fright h3 strong { font-size: 60%;}
.duolist .cell .flcell .fright h3 + p { margin-bottom: 3vw;}
.duolist .cell .flcell .fright p.recruit { margin-bottom: 0;}
.duolist .cell .flcell .fright h3 + p a {color: #fff;}
.duolist .cell .flcell .fright .btnbox {display: flex; justify-content: space-between; align-items: center; width: 100%;}
.duolist .cell .flcell .fright .btnbox a p {color: #000;}
.duolist .cell .flcell:nth-of-type(even) .fleft {order:2;}
.duolist .cell .flcell:nth-of-type(even) .fleft img {display: block; position: absolute; top: 3vw; left: -3vw; width: 120%; aspect-ratio: 1/.667; z-index: 2;}
.duolist .cell .flcell:nth-of-type(even) .fright {order:1;}

.duocell { height: auto; display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0 auto;}
.duocell .cell { display: block; height: auto; width: 37.9vw; margin: 0 .4vw .4vw 0; border: none; aspect-ratio: 1/.667; overflow: hidden;}
.duocell .cell img { aspect-ratio: 1/.667;object-fit: cover;}
.duocell .cell.full {width: 100%; aspect-ratio: 1/.332; margin: 0;}
.duocell .cell.full img { aspect-ratio: 1/.332;}
.duocell .cell:nth-of-type(2n) {margin-right: 0;}
.duocell.recruit .cell {width: 35.9vw;}
.duocell.recruit .cell:nth-of-type(3),.duocell.recruit .cell:nth-of-type(7) {margin-left: 4vw;}
.duocell.hqd .cell {width: 37.9vw; aspect-ratio: unset; display: flex; justify-content: flex-start; align-items: center;}
.duocell.hqd .cell h3 {margin-bottom: 0;}
.duocell.hqd .cell .check {width: 10%; height: auto; margin-right: 1em;}
.duocell.hqd .cell .check img{aspect-ratio:unset;}
.duocell.hqd .cell.bgwht .check  {filter: invert();}

.tricell { width: 100%; height: auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.tricell .cell { display: block; height: auto; width: 31%; margin: 0 3.5% 4vw 0; border: none;}
.tricell .cell:nth-of-type(3n) {margin-right: 0;}

.quadcell {display: flex; justify-content: flex-start; flex-wrap: wrap;}
.quadcell .cell { display: block; width: 24.6%; height: auto; overflow: hidden; padding: 0; margin: 0 .4vw .4vw 0; padding: 1vw; box-sizing: border-box; background: rgba(0,0,0,.14);}
.quadcell .cell .img { aspect-ratio: 1/1.503; overflow: hidden; margin-bottom: 1vw;}
.quadcell .cell .img img { display: block; width: 100%; height: 100%; object-fit: cover;}
.quadcell .cell:nth-of-type(4n) {margin-right: 0;}
.quadcell .cell .ttl { display: flex; justify-content: space-between; align-items: center; width: 100%;}
.quadcell .cell .ttl h3 {font-size: 120%; font-weight: normal;}
.quadcell .cell .ttl p {font-size: 90%; font-weight: normal;}
.quadcell .cell .ttl a { display: block; width: 1vw; height: 2vw;}
.quadcell .cell .ttl a img { width: 100%; height: 100%; object-fit: contain;}

.bgblk { display: block; background: rgba(0,0,0,.14); padding: 4vw; box-sizing: border-box;}
.bgwht { display: block; background: rgba(255,255,255,.5); padding: 4vw; box-sizing: border-box;}
.bgwht * {color: #000;}
.bgwht .menu .flcell { display: flex; justify-content: space-between; align-items: flex-start; margin: 0 auto 0px; border-bottom: 1px solid rgba(0,0,0,.15); padding: 1.5vw;}
.bgwht .menu .flcell:nth-of-type(1) { border-top: 1px solid rgba(0,0,0,.15);}
.bgwht .menu .flcell .fleft { width: 85%;}
.bgwht .menu .flcell .fright { width: 15%; text-align: right;}
/*
background: url(../../../system_panel/uploads/images/cnr1.png)
*/

.w60 {display: block; width: 50%; margin-right: auto; margin-left: auto; }
}


/* gjs-dashed */
.gjs-dashed {background: #848484!important;}
.gjs-dashed div,.gjs-dashed a {padding: 20px 5px!important;}
.gjs-dashed .wow {opacity: 1!important;}
.gjs-dashed .section { width: 100%;}
.gjs-dashed .maincont {opacity: 1!important;}
.gjs-dashed .duolist .cell .flcell .fleft img {display: block; position: absolute; top: 3vw; left: 3vw; width: 80%; aspect-ratio: 1/.667; z-index: 2;}