@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: #452F0D;}
a:visited { text-decoration: none; color: #452F0D;}
a:hover { text-decoration: none;}
a:active { text-decoration: none; color: #452F0D;}
a:link,a:visited,a:hover,a:active {transition: all .6s; }
a:hover { opacity: .4;}

img { width: 100%; height: auto;}

* {word-break: break-all;}
.requiredText {color:red; padding-left:.3vw;}

@media screen and (min-width: 1000px) {
iframe { display:block; width:100%; height:30vw; border: none; margin: 0 auto;}
body {font-size:1vw; background: #fff; font-family: a-otf-ryumin-pr6n, serif;  color: #707070; }

/************/
.headerlogo {width: 12.6vw; height: auto; display: block; position: fixed; z-index: 9; left: 2vw; top: 0;}
.headerh1 {display: block; position: absolute; z-index: 9; left: 17vw; top: 2vw; font-size: 90%; color: #400404; font-weight: normal;}
#spMenu { position: fixed; z-index: 11; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 5.5vw; height: 4vw; transition: all 1s; padding: 0; align-items: center; margin: 0; }
#spMenu .menu-trigger { position: relative; width: 1.5vw; height: 1.5vw; display: block; justify-content: center; align-items: center; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }

.reservebtn { position: fixed; display: block; width: 5vw; height: auto; right: 0; top: 20vw; z-index: 9;}

.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: #360404; font-size: 0.1em; }
.menu-trigger p { position: absolute; left: 0; width: 100%; height: 1px; background: #360404; font-size: 0.1em; box-shadow: 0px 0px 8px rgba(0,0,0,0.2); }
.menu-trigger p:nth-of-type(1) { top: 0; }
.menu-trigger p:nth-of-type(2) { top: .7vw; }
.menu-trigger p:nth-of-type(3) { top: 1.3vw; }
.menu-trigger.active p:nth-of-type(1) { transform: translateY(.7vw) rotate(-45deg); background: #fff; }
.menu-trigger.active p:nth-of-type(2) { opacity: 0; }
.menu-trigger.active p:nth-of-type(3) { transform: translateY(-.56vw) rotate(45deg); background: #fff; }

.spnavi { display: block; position: fixed; top: 0; right: -40vw; z-index: 10;  background: rgba(54, 4, 4,.6); width: 40vw; height: 100%; padding: 5vw 2vw 0; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-transition: all 1s; transition: all 1s; }
.spnavi.active { right: 0;}
.spnavi a { color: #fff; display: block; padding: 1vw 0; border-bottom: dotted 1px rgba(255,255,255,.3); }

.footer { display: block; text-align: center; margin: 10vw auto 0; height: 22vw;  background: url(https://jeune-totalbeauty.com/system_panel/uploads/images/footerbg.jpg) no-repeat center bottom;background-size: 100% auto; overflow: hidden;}
.footer .section {margin-top: 10vw; display: flex; justify-content: center; align-items: center; width: 70vw;}
.footer .section .left {width: 70%; text-align: left; color: #fff;}
.footer .section .left p:first-child{display: block; font-size: 110%; margin-bottom: 1vw;}
.footer .section .left a { color: #fff;}
.footer .section .right {width: 30%; text-align: right; color: #fff;font-family: adobe-garamond-pro, serif; }
.footer .section .right p { display: block; float: right; width: max-content; font-size: 130%; line-height: 1.5; text-align: left;}
/******************/
#root {width: 100%; overflow: hidden;}


.section { position: relative; width: 70vw; height: auto; margin: 10vw auto 0; text-align: center;}

a.btn { position: relative; display: flex; justify-content: center; align-items: center; margin: 0; padding: .5vw 3vw; background: #2B2929; color: #fff; text-align: center; width: max-content; border-radius: 1vw;}
a.btn p { color: #fff; margin: 0!important; padding: 0!important;}
a.btn p:after { content:"-"; color: #fff; display: block; position: absolute; left: 90%; top: 0; bottom: 0; margin: auto; line-height: 1em; font-size: 190%;}

.mb3{margin-bottom: 3vw;}
.mb5{margin-bottom: 5vw;}

.form .formRow { margin: 0 0 2vw; padding: 0; text-align: left;}
.form .formRow input[type="text"],.form .formRow input[type="email"],.form .formRow textarea {width: 90%;}
.form .formRow textarea {height: 10em;}
.form p {margin-bottom: 0;}
.form .pp { display: block;width: 100%;height: 20vw;margin: 3vw auto;overflow: scroll;border: solid 1px #fafafa;padding: 1vw; box-sizing: border-box; text-align: left;}
.form .submit { text-align: center; margin: auto;}
.form #submit { width: max-content; padding: 1vw 10vw; color: #fff; opacity: .2; margin: auto; background: #2B2929; border-radius: 1vw; }
.form #submit.active {opacity: 1;}

.pagettl { position: relative; width: 100%; height: 26.8vw; margin-top: 4vw; overflow: hidden;}
.pagettl .txt { position: absolute; width: 100%; height: 26.8vw; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 2; }
.pagettl .txt h2 {color: #fff; font-size: 190%; font-weight: normal; letter-spacing: .6em;}
.pagettl .txt p {color: #fff; font-size: 90%; letter-spacing: .6em;}
.pagettl .bg { position: absolute; width: 100%; height: auto; z-index: 1; }

.hbox { text-align: center; margin: 0 auto 5vw; background: url(https://jeune-totalbeauty.com/system_panel/uploads/images/hboxtop.png) no-repeat top left,url(https://jeune-totalbeauty.com/system_panel/uploads/images/hboxbtm.png) no-repeat bottom right; background-size: 2vw auto, 2vw auto; width: max-content; padding: 1vw 5vw;}
.hbox h2,.hbox h3 { font-size: 190%; font-weight: normal; letter-spacing: .3em;}

.saloninfo .section {width: 60%; }
.saloninfo .flcell { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: auto; margin: 0 auto; border-top: dotted 1px #C7C7C7;}
.saloninfo .flcell:nth-last-of-type(1) { border-bottom: dotted 1px #C7C7C7;}
.saloninfo .flcell .fleft { width: 30%; font-weight: bold; text-align: left; color: #A21111;}
.saloninfo .flcell .fright { width: 70%; padding: 1vw; box-sizing: border-box; display: block; text-align: left;}

.facilitybox { width: 56vw; height:auto; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.facilitybox .main { position: relative; width: 100%; height: 36vw; overflow: hidden; margin-bottom: .4vw;}
.facilitybox .main img {object-fit: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
.facilitybox .cell {width: 24.5%; height: 9vw; overflow: hidden; margin: 0 .5% .4vw 0; background: #efefef;}
.facilitybox .cell img {object-fit: cover;}

.item .flcell { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: auto; margin: 0 auto;}
.item .flcell:nth-of-type(even) .fleft {order: 1;}
.item .flcell:nth-of-type(even) .fright {order: 2;}
.item .flcell:nth-of-type(odd) .fleft {order: 2;}
.item .flcell:nth-of-type(odd) .fright {order: 1;}
.item .flcell .fleft { width: 35%; font-weight: bold; text-align: left;}
.item .flcell .fright { width: 65%; padding: 3vw; box-sizing: border-box; display: block; text-align: left;}
.item .flcell .fright h3 { display: block;font-size: 120%; margin-bottom: 3vw;}
.item .flcell .fright p { display: block; margin-bottom: 3vw;}
.item .flcell .fright a {margin-bottom: 1vw; width: 60%; }

.maincont.menu .menunavi {width: 100%; height: auto; overflow: hidden; padding: 10vw 0; background: url(https://jeune-totalbeauty.com/system_panel/uploads/images/menubg.jpg) no-repeat center center; background-size: 100% auto;}
.maincont.menu .menunavi .navi { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 60vw; margin: 0 auto;}
.maincont.menu .menunavi .navi .cell { width: 33.3%; text-align: center; margin: 0 auto 3vw;}
.maincont.menu .menunavi .navi .cell img {width: 50%; height: auto;}
.maincont.menu .menunavi .navi .cell p {color: #fff;}

.menulist {background: #F8F5F5; padding: 5vw; text-align: center;}
.menulist h2 {text-align: center; margin-bottom: 3vw; font-size: 120%;}
.menulist .flcell { display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; height: auto; margin: 0 auto; border-top: dotted 1px #831B13;}
.menulist .flcell .fleft { width: 85%; padding: 1.5vw; text-align: left; box-sizing: border-box;}
.menulist .flcell .fleft h3 { font-size: 110%; margin-bottom: 1vw;}
.menulist .flcell .fright { width: 15%; padding: 1.5vw; font-size: 110%; text-align: right; box-sizing: border-box;}

.voicecell {position: relative; width: 50vw; background: #F8F5F5; padding: 4vw 5vw; text-align: center; margin: 10vw auto 0;}
.voicecell .flag { width: 14vw; height: auto; position: absolute; top: -3vw; left: -2vw;}
.voicecell .ttl {display: flex;justify-content: space-between;width: 100%;align-items: center;padding-bottom: 1vw;margin-bottom: 1vw;border-bottom: dotted 1px #707070;}
.voicecell .ttl p:first-child{ font-size: 120%; font-weight: bold;}
.voicecell .ttl p:last-child{ font-size: 80%; line-height: 1.2; text-align: left;}
.voicecell .txtcell {text-align: left;}

.staff .flcell { display: flex; justify-content: flex-start; align-items: center; width: 80%; height: auto; margin: 0 auto 10vw;}
.staff .flcell:nth-of-type(even) .fleft {order: 1;}
.staff .flcell:nth-of-type(even) .fright {order: 2;}
.staff .flcell:nth-of-type(odd) .fleft {order: 2;}
.staff .flcell:nth-of-type(odd) .fright {order: 1;}
.staff .flcell .fleft { display:flex; flex-direction: column; position: relative; width: 25%; height: 24vw; overflow: visible; font-weight: bold; text-align: left;}
.staff .flcell .fleft img { order:1; /*display: block; position: absolute; z-index: 1; object-fit: cover; object-position: 50% 50%;*/ }
.staff .flcell .fleft .profile { order:2; display: block;/* position: absolute; z-index: 2; right: -3vw; bottom: 1vw;*/ width: 100%; padding: 1vw; background: #000;}
.staff .flcell .fleft .profile .top { display: block; height: auto; color: #fff; text-align:left;}
.staff .flcell .fleft .profile .top h3 { font-size: 100%;}
.staff .flcell .fleft .profile .top p { font-size: 60%; display: block; width: max-content;}
.staff .flcell .fleft .profile .btm { color: #fff; font-size: 60%;}
.staff .flcell:nth-of-type(even) .fright { width: 75%; padding: 0 0 0 6vw; box-sizing: border-box; display: block; text-align: left;}
.staff .flcell:nth-of-type(odd) .fright { width: 75%; padding: 0 6vw 0 0; box-sizing: border-box; display: block; text-align: left;}
.staff .flcell .fright h3 {width: max-content; display: block; font-size: 100%; font-weight: normal; margin-bottom: 2vw; background: #A21111; padding: .8vw 1vw; color: #fff;}
.staff .flcell .fright p { display: block; margin-bottom: 2vw;}

.flowsection { width: 100%; height: auto; margin: 0 auto;}
.flowsection:nth-of-type(3) { background: #F8F5F5; padding: 5vw 0;}
.flowsection:nth-of-type(4),.flowsection:nth-of-type(6) { background: url(https://jeune-totalbeauty.com/system_panel/uploads/images/tri_colored.png),#fff; padding: 5vw 0; background-size: 10vw auto; background-repeat: no-repeat; background-position: top center;}
.flowsection:nth-of-type(5),.flowsection:nth-of-type(7) { background: url(https://jeune-totalbeauty.com/system_panel/uploads/images/tri_w.png),#F8F5F5; padding: 5vw 0; background-size: 10vw auto; background-repeat: no-repeat; background-position: top center;}
.flowsection .flcell { display: flex; justify-content: flex-start; align-items: center; width: 60vw; height: auto; margin: 0 auto;}
.flowsection:nth-of-type(odd) .fleft {order: 2;}
.flowsection:nth-of-type(odd) .fright {order: 1;}
.flowsection:nth-of-type(even) .fleft {order: 1;}
.flowsection:nth-of-type(even) .fright {order: 2;}
.flowsection .flcell .fleft {width: 30%;}
.flowsection .flcell .fright {padding: 5vw; width: 70%; box-sizing: border-box;}
.flowsection .flcell .fright .ttl {display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1vw;}
.flowsection .flcell .fright .ttl p:first-child {font-size: 280%; color: #D6CFCF; padding-right: 1vw;}
.flowsection .flcell .fright a { display: block; width: 70%;}

.concept .section {width: 50vw;}
.concept .flcell { display: flex; justify-content: flex-start; align-items: center; width: 50vw; height: auto; margin: 0 auto;}
.concept .flcell .fleft {position: relative; z-index: 1;width: 40%; overflow: hidden; border-radius: 50%;}
.concept .flcell .fright {position: relative; z-index: 2; padding: 0 0 0 2vw; width: 60%; box-sizing: border-box; text-align: left;}
.concept .flcell .fright .bltxtbox { position: relative; display: block; left: -5vw; margin-bottom: 2vw;}
.concept .flcell .fright .bltxtbox p:first-child {font-size: 120%; color: #fff; background: #000; padding: .8vw; width: max-content;}
.concept .flcell .fright .bltxtbox p:last-child {font-size: 120%; color: #fff; background: #000; padding: .8vw; width: max-content; margin: .5vw 0 .5vw 2vw }
.concept .flcell .fright a { display: block; width: 70%;}
.concept .greeting { display: block; width: 100%; text-align: center; margin: 0 auto 10vw; background: url(https://jeune-totalbeauty.com/system_panel/uploads/images/bg_gold.jpg) no-repeat center center; padding: 8vw 0; background-size: cover;}

.kv { position: relative; width: 100%; height: 40vw; margin-top: 6vw; overflow: hidden;}
.kv .txt { position: absolute; width: 100%; height: 40vw; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 3; background: url(https://jeune-totalbeauty.com/system_panel/uploads/images/btmline-min.png) no-repeat bottom center; background-size: 100% auto;}
.kv .copy { width: 60%; text-align: left;}
.kv .copy p:first-child { display: block; width: max-content; color: #fff; background: #000; padding: .5vw; font-size: 170%; letter-spacing: .3em; margin-bottom: 2vw;}
.kv .copy p:last-child {font-size: 130%; line-height: 1.6;}
.kv .img { position: absolute; width: 31vw; height: auto; z-index: 2; right: 12vw; bottom: 0; }
.kv .bg { position: absolute; width: 100%; height: 40vw; z-index: 1; }

.index .flcell { display: flex; justify-content: flex-start; align-items: center; width: 60vw; height: auto; margin: 0 auto;}
.index .flcell .fleft {position: relative; z-index: 1;width: 40%; overflow: hidden; border-radius: 50%;}
.index .flcell .fright {position: relative; z-index: 2; padding: 0 0 0 2vw; width: 60%; box-sizing: border-box; text-align: left;}
.index .flcell .fright .bltxtbox { position: relative; display: block; left: -8vw; margin-bottom: 2vw;}
.index .flcell .fright .bltxtbox p:first-child {font-size: 150%; color: #fff; background: #000; padding: .3vw .8vw; width: max-content; letter-spacing: .3em;}
.index .flcell .fright .bltxtbox p:last-child {font-size: 150%; color: #fff; background: #000; padding: .3vw .8vw; width: max-content; margin: .5vw 0 .5vw 4vw; letter-spacing: .3em; }
.index .flcell .fright a {display: block; width: max-content; padding: .5vw 4vw; float: right; margin: 2vw 0 0;}
.index .greeting { display: block; width: 100%; text-align: center; margin: 0 auto 10vw; background: url(https://jeune-totalbeauty.com/system_panel/uploads/images/bg_gold.jpg) no-repeat center center; padding: 8vw 0; background-size: cover;}


.indexmenu { position: relative; width: 100%; height: 40vw; margin-top: 6vw; overflow: hidden;}
.indexmenu .menunavi { position: absolute; width: 100%; height: 40vw; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 3; background: url(https://jeune-totalbeauty.com/system_panel/uploads/images/btmline_rev.png) no-repeat bottom center; background-size: 100% auto;}
.indexmenu .menunavi .navi { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 42vw; margin: 0 0 0 30vw;}
.indexmenu .menunavi .navi .cell { width: 33.3%; text-align: center; margin: 0 auto 4vw;}
.indexmenu .menunavi .navi .cell img {width: 60%; height: auto;}
.indexmenu .menunavi .navi .cell p {color: #fff;}
.indexmenu .menunavi .btn { position: absolute; bottom: 0; right: 10vw; padding: .5vw 4vw;}
.indexmenu .img { position: absolute; width: 60vw; height: auto; z-index: 2; left: -6vw; bottom: 0; }
.indexmenu .bg { position: absolute; width: 100%; height: 40vw; z-index: 1; }

.index .itemcell { display: flex; justify-content: space-between; align-items: center; width: 60vw; height: auto; margin: 0 auto;}
.index .itemcell .fleft {position: relative; order: 2; width: 30vw; height: 30vw; overflow: hidden; border-radius: 50%;}
.index .itemcell .fleft img {object-fit: cover; height: 100%;}
.index .itemcell .fright {position: relative; order: 1; padding: 0; width: 20vw; box-sizing: border-box; text-align: left;}
.index .itemcell .fright h2 { color: #000; font-size: 430%; line-height: 1; font-weight: bold; margin: 0 0 3vw;}
.index .itemcell .fright h3 { color: #fff; font-size: 120%; background: #A21111; padding: .5vw; text-align: center; margin-bottom: 1vw;}
.index .itemcell .fright a {display: block; width: max-content; padding: .5vw 4vw; margin: 2vw 0 0;}
  
.index .itemcell .fright.fright20260819 {width: auto;}

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

}











/* gjs-dashed */
.gjs-dashed * {padding: 20px!important;}
.gjs-dashed .header { top: 0; opacity: 1;}
.gjs-dashed .spnavi {right: 0; top: 200px;}
.gjs-dashed .sharehouseImgBox .imgbox {height: auto; overflow: visible;}
.gjs-dashed .sharehouseImgBox .imgbox .txtbox,.gjs-dashed .sharehouseImgBox .imgbox .img {position: relative; height: auto;}
.gjs-dashed .sharehouseImgBox a.imgbox:hover .txtbox {opacity: 1; transform: scale(100%); transition: all .6s;}
.gjs-dashed .staffDetailBox .staffCell .txt .interview { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; margin: 21vw 0 2vw;}
.gjs-dashed .staff .flcell .fleft {height: max-content;}
.gjs-dashed .staff .flcell .fleft img {position: relative;}
.gjs-dashed .staff .flcell .fleft .profile {position: relative; left: 0; top: 0; width: 200px;}
.gjs-dashed .staff .flcell .fleft .profile .top{display: block;}
.gjs-dashed .index .itemcell { display: block; width: 100%; height: auto; margin: 0 auto;}
.gjs-dashed .index .itemcell .fleft {position: relative; order: 2; width: 30vw; height: auto; overflow: visible; border-radius: 50%;}