/*============================
  sub-visual
============================*/
.main {
  position: relative;
}
.main::before {
 position: absolute;
  content:"";
  background: #efdcdd;
  width:100%;
  height:100%;
  top:50px;
  left:0;
  z-index: -1;
}
.sub_mv {
  height: 250px;
  width:85%;
  position: relative;
  background: url(../images/sub_mv.png) no-repeat top center / cover ;
  margin-top:50px;
  margin-left:auto;
}
.sub_mv_commitment {
  background: url(../images/20251015103427856857.JPG) no-repeat top center / cover;
}
.submain_ttl {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .2em;
  display: block;
  
  font-family: "Cormorant", serif;
}
.submain_txt {
  font-weight: 500;
  letter-spacing: .2em;
  display: block;
  font-weight:600;
}
.submain_box{
  position:absolute;
  display: block;
  top: 60%;
  left: -10%;
}
@media screen and (min-width: 768px) {
.sub_mv {
  height: 400px;
}
.submain_ttl {
  font-size:36px;
}
.submain_txt {
  font-size:18px;
}
}
@media screen and (min-width: 1024px) {
.sub_mv{
  height: 550px;
}
.submain_box{
  top: 70%;
}
.main::before {
 position: absolute;
  content:"";
  background: #efdcdd;
  width:100%;
  height:100%;
  top:50px;
  left:0;
}
}
@media screen and (min-width: 1280px) {
.sub_mv{
  height: 650px;
}
.submain_ttl {
  font-size:48px;
}
.submain_txt {
  font-size:20px;
}
}
@media screen and (min-width: 1700px) {
.sub_mv{
  height: 750px;
}
.submain_ttl {
font-size: 48px;
}
}
/*----------------------------
 bread_crumb_list
-----------------------------*/
.breadcrumb{
  font-size: 10px;
  margin-bottom:0;
  background: #efdcdd ;
}
.breadcrumb p{
  margin-left: auto;
}
.breadcrumb a{
color: #7d7d7d;
}
@media screen and (min-width:768px) {
.breadcrumb{
font-size: 14px;
}
}
@media screen and (min-width:1024px) {
.breadcrumb p{
  margin-right:20px;
}
}
  
/* anker link */
.anker__items{
column-gap: 4%;
  row-gap: 10px;
}
.anker__item{
width: 100%;
height: 45px;
position: relative;
display: block;
}
.anker__item a,.anker__item a p{
display: block;
text-align: center;
line-height: 45px;
color:#ec6d73;
transition: all .5s;
background: #f3f0f0;
border-radius:50px;
}

@media screen and (min-width:525px) {
.anker__items{
  row-gap: 10px;
}
.anker__item{
  width: 48%;
}
}
@media screen and (min-width:1024px) {
.anker__item{
  width: 31%;
}
}

.back_btn a{
    background: #7f1210;
    color: #fff;
    padding: 10px 30px;
    display: inline-block;
  }

/* 背景 */
.sub_bg {
  background: #f8f6ed;
}

#item01,#item02,#item03,#item04{
 margin-top:-100px;
 padding-top:100px;
}
@media screen and (min-width:1024px) {
#item01,#item02,#item03,#item04{
 margin-top:-150px;
 padding-top:150px;
}
}

/*============================
 faq
============================*/
/* faq */
.accordion_one {
    margin-bottom: 5px;
}
.ac_header {
  padding: 15px 35px 15px 15px;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition: .2s;
}
.ac_header_text {
  padding-left: 2.5em;
  position: relative;
}
.ac_header_text::before {
  font-weight: bold;
  content: "Q.";
  color: #3b3939;
  padding-left:10px;
  font-size: 16px;
  position: absolute;
  left: 0;
  top: -3px;
  font-family: "Cormorant Infant", serif;
}
.ac_header .i_box {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  right: 15px;
  margin-top: -10px;
}
.ac_header .i_box:before,
.ac_header .i_box:after {
  position: absolute;
  content: "";
  margin: auto;
  box-sizing: border-box;
  vertical-align: middle;
  }
  .ac_header .i_box:before {
  border-top: 2px solid #583f3f;
  width: 16px;
  height: 0;
  top: 0;
  bottom: 0;
  right: 0;
  }
  .ac_header .i_box:after {
  border-left: 2px solid #583f3f;
  width: 0;
  height: 16px;
  top: 0;
  bottom: 0;
  right: 7px;
  transition: .3s;
  }
  .ac_header.open .i_box:after {
  height: 0;
  }
  .accordion_one .ac_inner {
  padding: 0px 15px 0px 15px;
    background: #f3f0f0;
  }
  .accordion_one .open .ac_inner{
  display: block;
  animation: appear .8s ease;
  }
  .ac_inner_text {
  position: relative;
  padding: 10px 0px 10px 2.5em;
  line-height: 2;
}
.ac_inner_text::before {
  content: "A.";
  color: #ec6d73;
  padding-left: 10px;
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 6px;
  font-family: "Cormorant Infant", serif;
}
@media screen and (min-width:1024px) {
  .ac_header{
    padding: 20px 50px 20px 25px;
  }
  .ac_header_text::before{
   font-size:18px; 
  }
  .ac_inner_text::before{
    font-size:20px; 
  }
  .ac_header .i_box{
    width: 20px;
    height: 20px;
    right: 30px;
  }
  .ac_header .i_box:before{
    width: 20px;
  }
  .ac_header .i_box:after{
    height: 20px;
    right: 9px;
  }
  .accordion_one .ac_inner{
    padding: 0 15px 15px 25px;
  }
  .ac_inner_text {
  padding: 10px 20px 0px 40px;
}
}

/*============================
 salon
============================*/
.salon_img{
  column-gap: 2%;
}
.salon_img_list{
  margin-inline: auto;
  width:80%;
  margin-bottom:10px;
}
/* -----Table----- */
.table01 .tr{
  display: block;
  border-bottom: 1px solid #ec6d73;
}
.table01 .th{
  width: 100%;
  padding:20px 0 0px 15px;
  border-bottom:none;
  font-weight:bold;
}
.table01 .td{
  width: 100%;
  padding: 5px 0 5px 15px;
}
@media screen and (min-width:768px) {
.salon_img_list{
  margin-inline: 0;
  width:48%;
  margin-bottom:0px;
}
  
/* -----Table----- */
.table01 .tr{
display: flex;
justify-content: flex-start;
}
.table01 .th{
width: 20%;
padding: 30px 20px 10px;
line-height: 1.6;
}
.table01 .td{
width: 80%;
padding: 30px 20px 10px;
line-height: 1.6;
} 
}

/*============================
 recruit
============================*/
.ideal_area{
  background:#f3f0f0;
  padding:15px;
  display:block;
}
.ideal_list{
  position:relative;
  padding-left:30px;
  margin-bottom:10px;
}
.ideal_list::before{
  position:absolute;
  content:"";
  background: url(../images/check.png) no-repeat top center / cover ;
  width:18px;
  height:18px;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.job_ttl{
  background:#ece4e4;
  padding:10px 20px;
}
@media screen and (min-width:1024px) {
.ideal_area{
  padding:30px 30px 30px 150px;
}
}

/*============================
 staff
============================*/
/* flexbox */
.staff_textBox{
  background:#f3f0f0;
  padding:30px;
}
.staff_textBox .img{
  width: 100%;
  margin-bottom: 20px;
  position:relative;
} 
.staff_name{
  background:#ece4e4;
  padding:5px 10px;
  font-size:12px;
}
.staff_textBox .textarea {
  width: 100%;
} 
.staff_ttl_area{
  border-top: 1px dashed #fff;
  padding-top:15px;
  margin-top:15px;
}
.staff_ttl{
  display:inline-block;
  margin-right: 10px;
  background:#ece4e4;
  padding:5px 10px;
}
@media screen and (min-width:768px) {
/* flexbox */
.staff_textBox .img{
  width: 30%;
  margin-bottom: 0px;
} 
.staff_textBox .textarea {
  width: 65%;
} 
}
@media screen and (min-width:1024px) {
.staff_name{
  font-size:14px;
}
}

/*============================
 commitment
============================*/
.comm_ttl{
  font-size:16px;
}
/* flexbox */
.comm_textBox .img{
  width: 100%;
  margin-bottom: 20px;
  position:relative;
} 
.comm_textBox .textarea {
  width: 100%;
} 
.point{
  font-size:18px;
}
@media screen and (min-width:768px) {
/* flexbox */
.comm_textBox .img{
  width: 46%;
  margin-bottom: 0px;
  position:relative;
} 
.comm_textBox .textarea {
  width: 50%;
} 
}
@media screen and (min-width:1024px) {
.comm_ttl{
  font-size:22px;
}
.point{
  font-size:24px;
}
}
/*============================
 gelnails
============================*/
.gel_point_lists{
  column-gap: 4%;
  row-gap: 30px;
}
.gel_point_list{
  width: 100%;

}
.gel_point_list .gel_ttl{
  display:block;  
  background:#f3f0f0;
  padding: 0 10px 10px 10px;
}
.gel_point_list .num{
  font-size:26px;
  margin-right:5px;
}

.gel_imgs{
  column-gap: 2%;
  row-gap: 20px;
}
.gel_img_list{
  width:48%;
}
.gel_point_list .txt{
  margin-top:5px;
}
.gelprice_ttl{
 position:relative;
 padding-left:30px;
  font-size:16px;
}
.gelprice_ttl::before{
  position:absolute;
  content:"";
  background:#583f3f;
  width:20px;
  height:1px;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.menu_name{
  width:100%;
}
.line{
    background: radial-gradient(#111 10%, transparent 30%) center / 5px 5px;
    background: -ms-radial-gradient(#111 10%, transparent 30%) center / 5px 5px;
    content: '';
    display: flex;
    flex: 1 1 auto;
    height: 5px;
    margin: 0 10px;
}
@media screen and (min-width:768px) {
.gel_point_list .gel_ttl{
  display:flex;
}
.gel_point_list .txt{
  margin-top:5px;
}
.menu_name{
  width:auto;
}
}
@media screen and (min-width:1024px) {
.gel_point_list{
  width: 48%;
}
.gel_point_list .txt{
  margin-top:8px;
}
.gel_img_list{
  width:23%;
}
.gel_img_list:nth-of-type(even){
  padding-top:20px;
}
.gelprice_ttl{
  font-size:18px;
}
}

/*============================
 guide
============================*/
.flow_textBox{
  background:#f3f0f0;
  padding:30px;
  position:relative;
}
.flow_textBox:not(:last-child):before{
  display: block;
  content: "";
  width: 0;
  height: 0;
  width: 0;
  height: 0;
  border-top: 15px solid #ec6d73;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  position: absolute;
  bottom: -5%;
  right: 0;
  left: 0;
  margin: 0 auto;
}
.flow_textBox .img{
  width: 100%;
  margin-bottom: 20px;
  position:relative;
} 
.flow_textBox .textarea {
  width: 100%;
} 
@media screen and (min-width:768px) {
/* flexbox */
.flow_textBox .img{
  width: 30%;
  margin-bottom: 0px;
} 
.flow_textBox .textarea {
  width: 65%;
} 
.flow_textBox:not(:last-child):before{
  bottom: -10%;
}
}
@media screen and (min-width:1024px) {
 .flow_textBox:not(:last-child):before{
  bottom: -13%;
}
}