@charset "UTF-8";

.snc{margin-top: -80px; padding-top: 80px;}
#salon{background: #f3f2f4;}
.min_txt { font-size: 12px;}
.single_wrap {padding: 0 0 60px; position: relative; height: 100%; min-height: 100vh;}
.single_inner{position: relative; z-index: 15; margin-top: -5px; width: 980px; margin: 0 auto;}
.shop_inner{height: 100vh;  width: 20%;  background: #606e7f; overflow: hidden;}
.min_ttl {
  font-size: 26px; color: #927c4f; text-align: center;
  letter-spacing: 2.5px; margin: 15px 0 60px;
  font-family: 'Nunito-bold', sans-serif;
}
.shop_info {
  display: flex;
  margin: 0 0 60px;
  border-bottom: dashed 1px #aaa;
  padding-bottom: 60px;
}
/*202307 +add*/
.shop_info_name {display: flex;align-items: flex-end;}
.shop_info_name h4{ font-size: 20px;}
.shop_att{font-size: 13px; margin-top: 5px;}
.shop_info_link {
  position: relative;
  font-size: 14px;
  background: #927c4f;
  color: #fff;
  line-height: 2.2;
  padding: 0 1em;
  border-radius: 4px;
  margin-left: 8px;
  letter-spacing: normal;
  vertical-align: top;
  transition: all .3s;
  height: 32px;
}
.shop_info_link::after{content: "▶︎"; font-size: 0.865em; color: #c4aa8e; margin-left: 0.2em;}
.shop_info_link:hover{background: #b89672;}

.shop_news{margin-top: 1.5%;}
.shop_news a{text-decoration: underline;}
/*202307 +add*/
.salon_nm {font-size: 22px; position: relative; text-align: center;}
.txt_list {
  display: flex;
  margin: 10px 0;
  padding: 6px 0 0;
  line-height: 1.6;
  font-size: 16px;
}
.txt_list{border-top: solid 1px #ccc; }
.txt_list.tel a {
  font-size: 1.18rem; vertical-align: top;line-height: 1.3;
  color: #5c7996; font-weight: bold;
}
.txt_list dt{width: 5.5em;}
.shop_info_top {
  background: #000;
  margin-bottom: 80px;
  z-index: 1000;
  transition: all .3s;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}
.official_logo {
  width: 300px;
  margin: 50px auto 45px;
  text-align: center;
}
.official_logo span{
  color: #fff;
  margin-top: 10px;
  font-size: 20px;
  display: inline-block;
  letter-spacing: 4px;
}

.shop_info .shop_info_main{
  margin-left: 35px;
  width: 525px;
  color: #444;
}

.salon_map { width: 980px; margin: 0 auto;}
.salon_map_main{
  height: 160px;
  width: 95%;
  margin: 10px auto 5px;
  border: solid 1px #ccc;
  border-radius: 4px;
  overflow: hidden;
}
.salon_map_main iframe {
    position: relative;
    width: 100%; height: 100%;
    filter: grayscale(40%);
    transition: all 0.7s ease;
  }
.salon_map_ttl{margin-bottom: 10px;}
.salon_map h4 {
  display: inline-block; margin-right: 8px;
  font-size: 22px; color: #927c4f;
}
.salon_map_ttl a {
  background: #927c4f;  display: inline-block;
  color: #fff; padding: 2px 6px; font-size: 0.96rem;
}
.salon_map_ttl a:hover{background: #aaa;}
.salon_bnr {
  margin-top: 35px; width: 100%; gap: 1%;
  display: flex; justify-content: space-between;
}
.salon_bnr li {margin-top: 5px;} .salon_bnr li { width: 33%;}
.salon_bnr a img{transition: all .3s;} .salon_bnr a:hover img{filter: saturate(120%)}

/*images*/
.shop_img{width: 420px;}
.shop_info_top .shop_img {
  width: 60%; height: 420px; transition: all .3s;
  position: relative; left: 50px; top: 40px; overflow: hidden;
}
.shop_info_top .shop_img img{
  width: 100%; height: 480px; object-fit: cover; object-position: left top;
  font-family: 'object-fit: cover; object-position: left top;';
}
.shop_img_thumb{
  display: flex;
}
.shop_img_thumb li {
    width: 134px;
    height: 90px;
    margin: 5px 3px;
    position: relative;
    cursor: pointer;
    transition: all .3s;
}
.shop_img_thumb li:hover{
  filter: grayscale(60%);
}
.shopslide {
  overflow: hidden;
  width: 100%;
  height: 282px;
}
.shopslide img {
    object-fit: cover;
    object-position: top;
  }

.shopslide li:target {
  z-index: 3;
  -webkit-animation: slide 1s 1;
}

.shopslide li:not(:target) {-webkit-animation: hidden 1s 1;}

@keyframes slide {
  0% {
    transform: translateY(-100%); opacity: 0;
  }
  100% {
    transform: translateY(0%); opacity: 1;
  }
}

@keyframes hidden {
  0% {z-index: 2;}
  100% {z-index: 2;}
}
.attend_title {font-size: 0.86em;}
.salon_shop_link{margin-top: 4%;}
.salon_shop_link a {
  background: #927c4f;
  padding: 0.5em 2em;
  color: #fff;
  font-size: 1.125em;
  font-weight: bold;
  transition: all .3s;
  position: relative;
}

.salon_shop_link a::after {
  width: 0;
  height: 0;
  transition: all .3s;
  border-left: 0.4em solid #ebc8a3;
  border-top: 0.4em solid transparent;
  border-bottom: 0.4em solid transparent;
  content: " ";
  position: absolute;
  right: 0.65em;
  top: 0.95em;
  transition: all .3s;
}
.salon_shop_link a:hover{
  background: #aaa;
}

.salon_shop_link a:hover::after{
  border-left: 0.4em solid #eee;
}

.newopen{
  color: #927c4f;
  font-size: 1rem;
}


@media screen and (max-width: 767px) {
  .single_wrap{padding: 0 0 50px;}
  .salon_nm {font-size: 1rem;}
  .single_wrap, .single_inner{display: block; width: 100%; overflow-x: hidden;}
  .shop_info_top{
    margin-bottom: 30px;
  }
  .single_inner{margin-top: 0;}
  .single_wrap::after{width: 8%;}
  .oficial_logo {width: 250px; margin: 0 auto;}
  .min_ttl{font-size: 20px; letter-spacing: 2px;}
  .min_ttl{margin-bottom: 40px;}

  .shop_info {
    width: 90%;
    display: block;
    margin: 0 auto 10%;
    padding-bottom: 5%;
  }
  .shop_att{font-size: 0.875rem; }

  .shop_info .shop_info_main {
    margin-left: 0;
    width: 82%;
    color: #444;
  }
  .shop_info_ttl {
    min-width: inherit; height: auto;
    top: 0; left: 0;
    display: block; transform: inherit;
    position: relative;
    width: auto;
    margin: 0%; padding: 10% 0;
  }
  .official_logo {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    padding: 10% 0 -4%;
  }
  .official_logo span{
    font-size: 1rem;
    margin-top: 0;
    display: block;
  }

  .txt_list{
    font-size: 1rem;
  }
  .txt_list dt {
    width: 25%;
  }
  .txt_list dd{
    width: 75%;
    font-size: 0.9375rem;
  }
  .txt_list.tel a{line-height: 1.25;}
  /*images*/
  .shopslide {
    height: 60vw;
    max-height: 200px;
  }
  .shop_img_thumb li{
    width: 32%;
    height: 100%;
  }
  .shopslide li{
    overflow: hidden;
    width: 100%;
    height: 62vw;
  }

  .shop_img { width: 100%; margin-left: 0; margin-bottom: 0;}
  .shop_info .shop_info_main { width: 100%; color: #444; margin: 15px 0 0;}
  .salon_map{ width: 90%;}
  /*202307 +add*/
  .shop_info_name { display: block;}
  .shop_info_link {
    font-size: 16px;
    padding: 0.05em 0.5em;
    display: inline-block;
    margin-top: 0.25em;
    margin-left: 0;
    height: 36px;
  }
/*202307 +add*/
  .salon_bnr {width: 90%; margin: 7% auto; display: block;}
  .salon_bnr li{width: 100%; margin: 1% 0;}
  .salon_shop_link {
    margin-top: 8%;
    text-align: center;
  }
  .attend_title {
    font-size: 0.865em;
    display: block;
    margin-left: -0.5em;
  }

  .shop_news{font-size: 15px;}

}