@charset "UTF-8";
/* CSS Document */
/*—————————————————————————————————
genaral
—————————————————————————————————*/
html {scroll-behavior:smooth;}
.pc_only {display: none;}
.subtit {color: #272727;margin: 5% 0 2% 5%;}
.sub_txt {color: #959595;}
.sub_txt01 {margin-top: 3%;}
.sub_txt02 {color: #BAB4B1;font-size: 12px;letter-spacing: .1em;}
.sub_txt03 {color: #B69984;}
.bg_img {width: 100%; background-color: rgba(76,41,23,0.3);}
.bg_img02 {background-color: rgba(244,244,244,0.9);}
.mtb_2p {margin: 2% 0;}
.mtb_4p {margin: 4% 0;}
.ft_bold {font-weight: bold;}
.black {color: #272727;}
.hiramin{font-size: 1.4rem;}
/*—————————————————————————————————
header
—————————————————————————————————*/

.header_inner {
  
}
.header_inner_wrap {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  align-items: center;
  justify-content: space-between;
  padding: 2%;
  font-weight: bold;
  color: #4c2917;
}
.header_inner_wrap ul {

}
.header_inner_wrap ul li {

}
.header_inner_wrap_logo {
  font-weight: bold;
  color: #4c2917;
}
.header_inner_wrap_nav {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
  width: 100%;
}

/*—————————————————————————————————
drawer
—————————————————————————————————*/
/*
nav
———————————*/
.drawer_inner {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open .drawer_inner {
  left: 0;
  opacity: 1;
}
.drawer_inner .drawer_wrap {
  padding: 25px 25px 0 25px;
}
.drawer_inner .drawer_wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer_inner .drawer_wrap ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #bab4b1;
}
.drawer_inner .drawer_wrap ul li a {
  display: block;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
.drawer_inner.drawer_wrap ul li a:hover {
  background: #e4e4e4;
}
.drawer_inner .sns_list {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  list-style: none;
  padding: 0 30px;
}
.drawer_inner .sns_list .sns_list_item {
  display: block;
  padding: 8px;
}
@media screen and (max-width: 767px) {
  .drawer_wrap {
    left: -220px;
    width: 220px;
  }
}
/*
.toggle_btn
———————————*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 22px;
  right: 30px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}
/*
#mask
———————————*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}

/*—————————————————————————————————
keyV
—————————————————————————————————*/
.keyV {
  width: 100%;
}
.keyV_photo {
  width: 100%;
  height: 80vh;
  background-image: url(../img/keyV.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.keyV .catch {
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  height: 80vh;
  margin: 0 auto;
}
.keyV .catch img {
  width: 80%;
}
.keyV .bg-slider {
/*  width: 100vw;*/
  height: 80vh;
  background-position:center center;
  background-size: cover;
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

/*—————————————————————————————————
info
—————————————————————————————————*/
.info {
  margin: 10% 0;
}
.info_title {
  font-size: 1.2rem;
}
.info_sub {
  font-size: 3rem;
}
.info_text {
  margin-top: 10%;
}

/*—————————————————————————————————
concept
—————————————————————————————————*/
.concept_wrap {
  margin: 10% 0;
}
.concept_photo {
  height: 50vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.concept_img01 {  background-image: url("../img/concept_01.jpg");}
.concept_img02 {  background-image: url("../img/concept_02.jpg");
                  background-position: top;}
.concept_img03 {  background-image: url("../img/concept_03.jpg");}
.concept_photo .bg_img {
  height: 50vh;
}
.concept_photo .bg_img .layer_txt {
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  padding: 1% 3%;
  color: #fff;
  font-size: 4rem;
  font-style: italic;
}
.concept_wrap .concept_photo .bg_img .notera {
  color: #4c2917;
  transform: rotate(-10deg);
/*
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
*/
}
.concept_textbox {
  width: 87%;
  margin: 4% auto;
}
/*
.concept_textbox_wrap .sub {
  font-size: 1.3rem
}
*/
.concept_textbox_item_text {
  font-size: .9rem;
}
/*—————————————————————————————————
staff
—————————————————————————————————*/
/*
.staff_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: center;
  margin: 10% 0;
}
*/
.staff_wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: center;
  margin: 10% 0;
}
.staff_list {
  margin: 4% 0 12%;
}

/*—————————————————————————————————
bg_photo
—————————————————————————————————*/
.bg_photo {
  height: 40vh;
  background:  center / cover no-repeat url("../img/image_01.jpg");
}
.bg_photo .bg_img {
  height: 40vh;
}
/*—————————————————————————————————
style
—————————————————————————————————*/
.style {
  margin-top: 1em;
}
/*
.style_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: center;
  margin: 10% 0;
}
*/
.style_wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: center;
  margin: 10% 0;
}
.style_list {
  margin: 4% 0 12%;
  text-align: left;
}

/*—————————————————————————————————
salon
—————————————————————————————————*/
.salon_photo_pc { display: none; }
.salon_photo {
  height: 40vh;
  background:  center / cover no-repeat url("../img/salon_img01.jpg");
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}
.salon .bg_img02 {
  width: 75%;
  height: 30vh;
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 2%;
  padding: 10px;
}
.salon .sub_txt03 {
  font-size: 28px;
}
/*—————————————————————————————————
access
—————————————————————————————————*/
.access {
  margin-top: 1em;
}
.access .inner {
  margin-top: 8%;
}
.access_list {
  margin: 4% 0;
}
.access .action_link {
  display: block;
  margin: 2% 0;
  width: 100%;
  border: 1px solid #000;
  padding: 4% 0;
  text-align: center;
  letter-spacing: .2em;
  cursor: pointer;
}
.access .action .fa-instagram {
  padding-right: 10px;
}
.access .access_item-map {
  margin: 4% 0;
}
.access_item-map {
  width: 100%;
/*  height: 40vh;*/
}
.access_map {
  width: 100%;
  height: 40vh;
}
/*—————————————————————————————————
menu
—————————————————————————————————*/
.menu {
  margin-top: 8%;
}
.menu_subtit {
  margin-bottom: 4%;
  padding: 3% 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  text-align: center;
}
.menu_item {
  margin: 4% 0 20%;
}

/*—————————————————————————————————
footer
—————————————————————————————————*/

.footer_inner {
  background-color: #f4f4f4;
  padding: 10% 0;
}
/*
@media screen and (min-width:768px){
}
*/
@media screen and (min-width:1024px){
/*—————————————————————————————————
general
—————————————————————————————————*/
.none { display: none; }
.pc_only {display: block;}
.subtit {color: #272727;font-size: 3rem;width: 88%;margin: 1em auto;}
/*—————————————————————————————————
pc-header
—————————————————————————————————*/
.header_inner_wrap {
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}
.header_inner_wrap_logo h1 {
  font-size: 4rem;
}
.header_inner_wrap_nav {
  display: block;
  width: 840px;
}
.header_inner_wrap ul {
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
  -webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
  padding-right: 4%;
}
.header_inner_wrap ul li {
  width: 140px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  margin-right: 2px;
  letter-spacing: .15em;
}
.header_inner_wrap .header_inner_wrap_nav .sns_list {
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
  width: 10%;
  margin-left: 20px;
}
.header_inner_wrap .header_inner_wrap_nav .sns_list_item {
  margin: 0 16px;
}

  
/*—————————————————————————————————
pc-keyV
—————————————————————————————————*/
.keyV {
  width: 100%;
  position: relative;
}
.keyV_photo {
  width: 90%;
}
.keyV .catch img {
  width: 30%;
}
.keyV .keyV_btn {
  position: absolute;
  top: 8%;
  right: 0;
  padding: 1.5% 4%;
  background-color: #c32838;
  color: #fff;
}
.keyV .keyV_btn a {
  
}
/*—————————————————————————————————
pc-info
—————————————————————————————————*/
.info {
  margin: 4% 0;
}
.info_title {
  font-size: 1.8rem;
}
.info_sub {
  font-size: 5rem;
}
.info_text {
  margin-top: 4%;
  text-align: center;
  line-height: 1.8em;
}

/*—————————————————————————————————
pc-concept
—————————————————————————————————*/
.concept_wrap {
  margin: 0;
}
/*
.concept_item {
  display: grid;
  grid-template-columns: 1fr 55%;
  align-items: center;
}
.concept_item02 {
  display: grid;
  grid-template-columns: 45% 1fr;
  align-items: center;
}
.concept_wrap:nth-of-type(odd) .concept_textbox {
    grid-row: 1/2;
}
*/
.concept_item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 55%;
  grid-template-columns: 1fr 55%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.concept_item02 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 45% 1fr;
  grid-template-columns: 45% 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.concept_wrap:nth-of-type(odd) .concept_textbox {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
}
.concept_textbox {
  height: 100%;
}
.concept_textbox_wrap {
  height: 100%;
}
.concept_item .concept_photo,
.concept_item .bg_img,
.concept_item02 .concept_photo,
.concept_item02 .bg_img {
  height: 100%;
}
.concept .concept_item:nth-of-type(2) {
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.concept_item .concept_photo {
/*  margin-left: 4%;*/
}
.concept_item02 .concept_photo {
/*  margin-right: 4%;*/
}
.concept_photo,.concept_textbox {
  -webkit-box-flex:1;
	-ms-flex:1;
  flex: 1;
}
.concept_textbox_item {
  width: 80%;
  padding: 50px 0;
}
.concept_textbox_item_text {
  font-size: .9rem;
}
/*—————————————————————————————————
pc-staff
—————————————————————————————————*/
.staff_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin: 4% 0 6%;
}
.staff_list {
  text-align: center;
  margin: 0 0 1% 1% ;
}
.staff_list img {
  width: 90%;
}
/*—————————————————————————————————
pc-style
—————————————————————————————————*/
.style {
  margin-top: 0;
}
/*
.style_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 4% 0;
}
*/
.style_wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 4% 0;
}
.style_list {
  margin: 0 0 3% 2%;
}
.style_list p {
  text-align: left;
}
/*—————————————————————————————————
pc-access
—————————————————————————————————*/
.access_list {
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.access_list dd {
  margin-left: 4%;
}
/*—————————————————————————————————
pc-salon
—————————————————————————————————*/
.salon_photo { display: none; }
.salon_photo_pc {
  height: 420px;
  margin: 6em 0 4em 0;
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
	justify-content: space-around;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  text-align: center;
  
}
.salon_photo_pc img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}
.salon .bg_img01 {
  max-width: 25%;
  min-width: 25%;
  height: 420px;
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  background-color: rgba(244,244,244,1);;
}
.salon .sub_txt03 {
  font-size: 48px;
}
/*—————————————————————————————————
pc-access
—————————————————————————————————*/

.access,.access .inner {
 margin-top: 0;
}
/*
.access_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
*/
.access_wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
.access_item,.access_item-map {
  -webkit-box-flex:1;
	-ms-flex:1;
  flex: 1;
}
.access_list dt {
  width: 16%;
}
.access .action {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  width: 86%;
}
.access .action_link {
  margin: 0 4px;
  padding: 3% 0;
}
.access_map {
  width: 100%;
  height: 90%;
  margin: 1% 0;
}

/*—————————————————————————————————
pc-menu
—————————————————————————————————*/
.memu {
  margin-top: 0;
}
/*
.menu .inner {
  margin: 10% auto;
}
*/
.menu_wrap {
  display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
  -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
  -ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.menu_item {
  width: 45%;
  margin: 4% 0;
}

}