@charset "UTF-8";

@media screen and (max-width: 999px) {
.formTd .d-inline-block {display:block!important;}
.formTd .d-inline-block input { margin-right: .4vw;}
.requiredText {color:red; padding-left:.3vw;}

.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: 3.0vw;counter-reset: number 0;}

.header { position: fixed; z-index: 9; top: 4vw; left: 4%; width: 92%; margin: 0 auto; 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: 35vw; height: auto;}
.header .logo.active {filter: invert(); opacity: .6;}
.header .menu { display: none; 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: 7.5vw; height: 7.5vw; transition: all 1s; padding: 0; align-items: center; margin: 0 0 0 3vw; }
#spMenu .menu-trigger { position: relative; width: 7.5vw; height: 7.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: 2vw; }
.menu-trigger p:nth-of-type(2) { top: 3.1vw; }
.menu-trigger p:nth-of-type(3) { top: 4.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: 100vh; padding: 25vw 4.15vw 0 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: 4vw; display: block; width: 100%;}
.spnavi .gmenu a p { color: #848484; font-size: 100%; line-height: 1.3;}
.spnavi .cp { font-size: 90%; 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: 5vw; left: 4%; width: 92%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.footer h1 {color: #fff; font-size: 85%; font-weight: normal; text-align: left; margin-bottom: 3vw;}
.footer .sns { width: auto; display: flex; justify-content: space-between; align-items: center;}
.footer .sns a {display: block; width: 6vw; height: 6vw; margin-left: 3vw;}
.footer .sns a img { display: block; width: 100%; height: 100%; object-fit: cover;}

.pagettl {width: 100%; height: 40vh; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.pagettl h1,.pagettl h2 {font-size: 140%; letter-spacing: 0.05em;display: block; margin-bottom: 2vw; text-align: center;}

.btmlink {position: relative; z-index: 2; padding-bottom: 30vw; background: rgba(0,0,0,.2); }
.btmlink .section {margin: 0 auto 26vw;}
.btmlink .section .ttl { /*transform: rotate(-90deg);transform-origin: bottom; */ width: 80vw; height: max-content; position: relative; margin: 15vw auto 0;/* top: 10vw; left: -5%;*/}
.btmlink .section .ttl:after { position: absolute; content:""; display: block; width: 9vw; height: 1px; background: #fff; top: 3.5vw; bottom: 0; left: 24vw;}
.btmlink .section .ttl h2 { font-size: 180%;}
.btmlink .salonCell {width: 80vw; margin: -20vw auto 0; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; font-size: 100%;}
.btmlink .salonCell .cell { width: 100%; border-top: solid 1px rgba(255,255,255,.3); text-align: left; margin-bottom: 5vw;}
.btmlink .salonCell .cell:last-of-type { margin-bottom: 0vw;}
.btmlink .salonCell .cell h3 { font-size: 170%; margin: 3vw 0 .3vw;}
.btmlink .salonCell .cell h3 + p { margin-bottom: 4vw;}
.btmlink .salonCell .cell .img { margin-bottom: 3vw; 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 .img + p a { color: #fff;}
.btmlink .salonCell .cell .btn { display: flex; justify-content: center; align-items: center; background: #fff; width: 70%; text-align: center; padding: 1.5vw 0; box-sizing: border-box; font-size: 100%; margin: 0 auto 4vw; border-right-style: none;}
.btmlink .salonCell .cell .btn p { color: #000; position: relative; font-size: 100%;}
.btmlink .salonCell .cell .btn:after { display: block; content:"+"; padding-left: 2vw; color: #000; }
.btmlink .salonCell .cell .reserve { display: flex; justify-content: center; align-items: center; background: #fff; width: 100%; text-align: center; box-sizing: border-box; font-size: 130%; padding: 1.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: 6vw 5vw; text-align: center; background: #fff;}
.recruitcta .whitebg h3 {color: #000; font-size: 140%; margin-bottom: 3vw;}
.recruitcta .whitebg p {display: block; width: 60vw; 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: relative;; z-index: 2; width: 100%; height: auto; padding: 0; box-sizing: border-box; width: 100%; height: auto;}
.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));}
.hqdbg .txt h2 { position: absolute; top: 15vw; left: 33vw; font-size: 170%; line-height: 1.6; margin-bottom: 0;}
.hqdbg .txt p { position: relative; padding: 45vw 0 0;}

.duocell .cell.bgblk.voice {aspect-ratio: unset; padding: 3vw;}
.bgblk.voice .ttl {display: flex; flex-direction: column; width: 100%; margin-bottom: 3vw;}
.bgblk.voice .ttl h3,
.bgblk.voice h3 { font-size: 150%; line-height: 1.6;margin-bottom: 2vw;}
.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; flex-direction: column; width: 100%;}
.indexsec1 .flcell .fleft { width: 100%; aspect-ratio: 1/1.256; overflow: hidden; margin-bottom: 4vw;}
.indexsec1 .flcell .fleft video { width: 100%; height: 100%; object-fit: cover;}
.indexsec1 .flcell .fright { width: 100%;}
.indexsec1 .flcell .fright .imgtxt {position: relative;}
.indexsec1 .flcell .fright .imgtxt img { height: 12vw; 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;}
.indexsec1 .flcell .fright .txt h1 {font-size: 130%; margin-bottom: 3vw;}
.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 .fleft { aspect-ratio: 1/1.256;}
.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.448; 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: 70%; height: max-content; text-align: center; border: solid 1px #fff; padding: 5vw 0; box-sizing: border-box; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);}
.sdalonhead .txt h1 { font-size: 180%; line-height: 1; margin-bottom: 2vw;}
.sdalonhead .bg {position: absolute; z-index: 1; width: 100%; aspect-ratio: 1/0.448; overflow: hidden; }
.sdalonhead .bg img { width: 100%; height: 100%; object-fit: cover; }
.salonsection .sdalonhead + h2 {margin-top: 10vw; text-align: center; font-size: 160%; width: 92%; margin: 10vw auto 4vw; line-height: 1.4;}
.salonsection .sdalonhead + h2 + p {display: block; width: 86%; margin: 4vw auto 0; text-align: center; text-align: left;}
.salonsection .btnbox { display: flex; justify-content: space-between; align-items: center; flex-direction: column; margin: 4vw auto 0;}
.salonsection .btnbox a { margin: 0 auto 3vw; width: 40vw;}

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


.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: 95%; margin: 15vw auto 0;}

.btn {border-radius: 3vw; position: relative; width: max-content; margin-left: auto; margin-right: auto; padding: .6vw 6vw .6vw 5vw; display: flex; justify-content: center; align-items: center; font-size: 120%;}
.btn {background: #fff;}
.btn:after { display: block; content:"+"; padding-left: 2vw; 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: 2vw; color: #fff; }
.btn.blk p {color: #fff; width: max-content; margin: 0; padding: 0;}

.mb1 {margin-bottom: 2vw!important;}
.mb3 {margin-bottom: 4vw!important;}
.mb5 {margin-bottom: 10vw!important;}
.mb7 {margin-bottom: 14vw!important;}
.mb10 {margin-bottom: 20vw!important;}
.mt10 {margin-top: 20vw!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: 120%;}

.hbox p { text-align: center; margin-top: 2vw;}

.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: 35%; text-align: left; font-size: 100%;}
.txtlist .flcell .fright { width: 65%; text-align: left; font-size: 100%;}
.txtlist .flcell .fright a {color: #fff;}

.duolist .cell .flcell { display: flex; justify-content: space-between; flex-direction: column; margin: 0 auto 8vw; }
.duolist .cell .flcell .fleft { position: relative; z-index: 2; width: 100%; 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: 100%; text-align: left; font-size: 100%; background: rgba(0,0,0,.15); padding: 7vw 5vw 5vw; box-sizing: border-box;}
.duolist .cell.interview .flcell .fright { padding: 20vw 5vw 5vw;}
.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: 140%; line-height: 1.6; margin-bottom: 3vw;}
.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; font-size: 90%;}

.duocell { height: auto; display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0 auto;}
.duocell .cell { display: block; height: auto; width: 49.5%; margin: 0 1% 1% 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: 40vw;}
.duocell.recruit .cell:nth-of-type(3),.duocell.recruit .cell:nth-of-type(7) {margin-left: 5vw;}
.duocell.hqd .cell {width: 49.5%; aspect-ratio: unset; display: flex; justify-content: flex-start; align-items: center;}
.duocell.hqd .cell h2,.duocell.hqd .cell h3 {margin-bottom: 0; width: 80%; font-size: 130%;}
.duocell.hqd .cell .check {width: 17%; height: auto; margin-right: 3%;}
.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: 49.5%; height: auto; overflow: hidden; padding: 0; margin: 0 1% 1% 0; padding: 2vw; 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(2n) {margin-right: 0;}
.quadcell .cell .ttl { display: flex; justify-content: space-between; align-items: center; flex-wrap:wrap; width: 100%;}
.quadcell .cell .ttl h3 {font-size: 110%; font-weight: normal; width: 60%; order:1;}
.quadcell .cell .ttl p {font-size: 80%; font-weight: normal; width: 100%; text-align: left; order:3;}
.quadcell .cell .ttl a { display: block; width: 3vw; height: 3vw; margin-left: 2vw; order:2;}
.quadcell .cell .ttl a img { width: 100%; height: 100%; object-fit: contain; vertical-align: top;}

.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 h3 { font-size: 150%; line-height: 1.6;}
.bgwht .menu .flcell { display: flex; flex-direction: column; margin: 0 auto 0px; border-bottom: 1px solid rgba(0,0,0,.15); padding: 3.5vw 0vw;}
.bgwht .menu .flcell:nth-of-type(1) { border-top: 1px solid rgba(0,0,0,.15);}
.bgwht .menu .flcell .fleft { width: 100%; margin-bottom: 3vw;}
.bgwht .menu .flcell .fright { width: 100%; text-align: right;}
/*
background: url(../../../system_panel/uploads/images/cnr1.png)
*/

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