@charset "UTF-8";

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

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


.reservebtn { position: fixed; display: block; width: 10vw; 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: 2vw; }
.menu-trigger p:nth-of-type(3) { top: 4vw; }
.menu-trigger.active p:nth-of-type(1) { transform: translateY(2vw) rotate(-45deg); background: #fff; }
.menu-trigger.active p:nth-of-type(2) { opacity: 0; }
.menu-trigger.active p:nth-of-type(3) { transform: translateY(-1.9vw) rotate(45deg); background: #fff; }

.spnavi { display: block; position: fixed; top: 0; right: -70vw; z-index: 10;  background: rgba(54, 4, 4,.9); width: 70vw; 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: 2vw 0; border-bottom: dotted 1px rgba(255,255,255,.3); }

.footer { display: block; text-align: center; margin: 10vw auto 0; padding: 5vw 0; height: auto;  background: url(https://jeune-totalbeauty.com/system_panel/uploads/images/footerbg2.jpg) no-repeat center bottom;background-size: cover; overflow: hidden;}
.footer .section {margin-top: 10vw; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 90vw;}
.footer .section .left {width: 100%; text-align: left; color: #fff;}
.footer .section .left p:first-child{display: block; font-size: 100%; margin-bottom: 1vw;}
.footer .section .left a { color: #fff;}
.footer .section .right {display: none;}
/******************/
#root {width: 100%; overflow: hidden;}


.section { position: relative; width: 90vw; height: auto; margin: 10vw auto 0; text-align: center;}
.section h3 {font-size: 130%; }
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; font-size: 100%;}
a.btn p { color: #fff; margin: 0!important; padding: 0!important; font-size: 100%;}
a.btn p:after { content:"-"; color: #fff; display: block; position: absolute; left: 90%; top: 0; bottom: 0; margin: auto; font-size: 100%;}
a.btn2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: .5vw 3vw;
    background: #fff;
    color: #2B2929;
    text-align: center;
    width: max-content;
    border: 1px solid #2B2929;
    border-radius: 1vw;
    transition: .3s;
}

a.btn2 p {
    color: #2B2929;
    margin: 0 !important;
    padding: 0 !important;
    transition: .3s;
}

a.btn2 p:after {
    content: "-";
    color: #2B2929;
    display: block;
    position: absolute;
    left: 90%;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 1em;
    font-size: 190%;
    transition: .3s;
}

/* ホバー時 */
a.btn2:hover {
    background: #000 !important;
    border-color: #000 !important;
}

a.btn2:hover p,
a.btn2:hover p:after {
    color: #fff !important;

}
.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: 32vw; margin-top: 10vw; overflow: hidden;}
.pagettl .txt { position: absolute; width: 100%; height: 27vw; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 2; }
.pagettl .txt h2 {color: #fff; font-size: 150%; 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 .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: 80vw; height:auto; margin: 0 auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.facilitybox .main { position: relative; width: 100%; height: 53vw; 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: calc(100% / 6.16); height: 8vw; overflow: hidden; margin: 0 .5% .5vw 0; background: #efefef; box-sizing: border-box;}
.facilitybox .cell:nth-of-type(6n) {margin-right: 0;}
.facilitybox .cell img {object-fit: cover;}

.item .flcell { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 100%; height: auto; margin: 0 auto 10vw;}
.item .flcell .fleft { order: 2; width: 100%; font-weight: bold; text-align: left;}
.item .flcell .fright { order:1; width: 100%; 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/menubg2.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: 90vw; 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: flex-start; width: 98%; height: auto; margin: 0 auto 10vw;}
.staff .flcell .fleft { display:flex; flex-direction: column; position: relative; width: 34%; height: auto; overflow: visible; font-weight: bold; text-align: left;}
.staff .flcell:nth-of-type(odd) .fleft {order: 2;}
.staff .flcell:nth-of-type(odd) .fright {order: 1;}
.staff .flcell:nth-of-type(even) .fleft {order: 1;}
.staff .flcell:nth-of-type(even) .fright {order: 2;}
.staff .flcell .fleft img { order:1; }
.staff .flcell .fleft .profile { order:2; display: block; 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 .fright { width: 60%; padding: 0 3vw;}
.staff .flcell .fright h3 {width: auto; 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; text-align: left;}

.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: 90vw; 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: 180%; color: #D6CFCF; padding-right: 1vw;}
.flowsection .flcell .fright a { display: block; width: 70%;}

.concept .flcell { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 90vw; 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: 2vw auto; width: 80%; box-sizing: border-box; text-align: center;}
.concept .flcell .fright .bltxtbox { display: block; margin: 0 auto 2vw;}
.concept .flcell .fright .bltxtbox p:first-child {font-size: 120%; color: #fff; background: #000; padding: .8vw; margin: auto; width: max-content;}
.concept .flcell .fright .bltxtbox p:last-child {font-size: 120%; color: #fff; background: #000; padding: .8vw; width: max-content; margin: .5vw auto .5vw; }
.concept .flcell .fright a { display: block; width: 70%;}
.concept .greeting { display: block; width: 100%; height: 45vw; 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; font-size: 120%;}
.concept .greeting h3 { font-size: 140%; margin-top: 2vw; }

.kv { position: relative; width: 100%; height: 65vw; margin-top: 6vw; overflow: hidden;}
.kv .txt { position: absolute; width: 100%; height: 65vw; display: flex; justify-content: flex-start; align-items: flex-start; 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: 50%; text-align: left; margin: 20vw 0 0 5vw;}
.kv .copy p:first-child { display: inline; width: auto; color: #fff; background: #000; padding: .5vw; font-size: 125%; letter-spacing: .3em; margin-bottom: 2vw;}
.kv .copy p:last-child {font-size: 100%; line-height: 1.6; display: block; margin-top: 2vw;}
.kv .copy p:last-child br {display: none;}
.kv .img { position: absolute; width: 50vw; height: auto; z-index: 2; right: 4vw; bottom: 0; }
.kv .bg { position: absolute; width: 100%; height: 65vw; z-index: 1; }
.kv .bg img { width: auto; height: 100%;}

.index .flcell { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; width: 90vw; height: auto; margin: 0 auto;}
.index .flcell .fleft {position: relative; order: 2;width: 70%; overflow: hidden; border-radius: 50%; box-sizing: border-box;}
.index .flcell .fright {position: relative; order: 1; padding: 0 0 0 2vw; width: 100%; box-sizing: border-box; text-align: left;}
.index .flcell .fright .bltxtbox { position: relative; display: block; left: 0; margin-bottom: 2vw;}
.index .flcell .fright .bltxtbox p:first-child {font-size: 130%; color: #fff; background: #707070; padding: .3vw .8vw; width: max-content; letter-spacing: .3em;}
.index .flcell .fright .bltxtbox p:last-child {font-size: 130%; color: #fff; background: #707070; padding: .3vw .8vw; 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: 65vw; margin-top: 6vw; overflow: hidden;}
.indexmenu .menunavi { position: absolute; width: 100%; height: 65vw; 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: 65vw; 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; font-size: 80%;}
.indexmenu .menunavi .btn { position: absolute; bottom: 0; right: 10vw; padding: .5vw 4vw;}
.indexmenu .img { position: absolute; width: 80vw; height: auto; z-index: 2; left: -21vw; bottom: 0; }
.indexmenu .bg { position: absolute; width: 100%; height: 65vw; z-index: 1; }
.indexmenu .bg img { width: auto; height: 100%;}

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

/******************/
  
   .headersns{
	position: fixed;
	z-index: 11;
	top: 0;
	right: 85px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10vw;
    height: 10vw;
	align-items: center;
	padding-top: 14px;
 }

}

@media screen and (max-width: 999px) {
  .headersns {
  	        width: 8vw;
        height: 8vw;
            padding-top: 0px;
  }
  
  .headersns a {
  	min-height: 40px;
    min-width: 40px;
  }
}

@media screen and (max-width: 768px) {
  .headersns {
  	right: 11.5vw;
  }
}

@media screen and (max-width: 500px) {
  .headersns {
  	right: 14vw;
  }
}

/* コピーしたテキストボックスの装飾 */
@media screen and (max-width: 999px) {
.index .bltxtbox { display: block; margin-bottom: 2vw; }
.index .bltxtbox p { font-size: 130%; color: #fff; background: #707070; padding: .3vw .8vw; width: max-content; letter-spacing: .3em; }
.index .bltxtbox p:last-child { margin: .5vw 0 .5vw 4vw; }
}

/* 長文の折り返しと各段落の余白 */
.index .bltxtbox p { max-width: 100%; box-sizing: border-box; margin-bottom: .5vw; }
.index .bltxtbox p:last-child { max-width: calc(100% - 4vw); }

/* トップページの紹介写真を他の写真と同じ角丸にする */
.maincont.index .flcell .fleft { border-radius: 20%; }