@charset "utf-8";

/* サロン一覧ページ */

.salonlist-primary-h2-wrap{
  border-top: 1px solid #cacaca;
  padding-top: 10px;
  border-bottom: 1px solid #cacaca;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.salonlist-primary-h2{
  border-left: 5px solid #ff7301;
  padding-left: 15px !important;
  padding-top: 5px;
  padding-bottom: 5px;
}
.salonlist-primary-h2 strong{
  font-size: 28px;
  font-weight: bold;
  margin-right: 20px;
}
.salonlist-primary-txt{
  font-size:16px;
  margin-bottom: 20px;
}

.salonlist-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.salonlist-item {
  width: 304px;
  display: flex;
  z-index: 1;
  margin-bottom: 20px;
}
.salonlist-item a{
  transition: all 0.2s;
}
.salonlist-item a:hover{
  opacity: 0.7;
}
.item-content {
  position: relative;
  border: 1px solid #e0e0e0;
}
  
input[type=radio] {
display: none; /* ラジオボタンを非表示にする */
}

.salonlist-filter ul{
  list-style-type: none;
  display: flex;
}

.salonlist-filter nav{
background: #f4f4f4;
padding: 10px;
}

.salonlist-filter label{
  /* background: #f5f4f4; */
  background: #fff;
  color: #969696;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
  display: block;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 16px;
  font-weight: bold;
  margin-right: 10px;
  box-shadow: 1px 1px 1px -1px rgb(0 0 0 / 30%);
  border-radius: 2px;
}
.salonlist-filter label:hover{
  opacity: 0.7;
}
.salonlist-filter input[type='radio']:checked + label{
  /* background: #ff7301; */
  background: linear-gradient(0deg, #ff4800 0%,#ff6d00 100%);
  box-shadow: 1px 1px 1px -1px rgb(0 0 0 / 30%) inset;
  color: #fff;
}

.content-pic{
  position: relative;
  overflow: hidden;
}
.content-pic img{
  vertical-align: bottom;
  max-width: 100%;
  transition: 0.3s all;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.item-content:hover .content-pic img {
    transform: scale(1.2,1.2);
    transition: 0.3s all;
}
  
  
.content-area{
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}
.content-body{
  padding: 15px;
  font-size: 14px;
  min-height: 288px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content-addr{
  margin-bottom: 10px;
}
.content-body h2{
  font-size:17px;
  font-weight: bold;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.content-body h2 a{
  text-decoration: none;
}

.content-table{
  margin-bottom: 10px;
}
.content-table th,
.content-table td{
  vertical-align: top;
}

.content-tags ul{
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.content-tags ul li{
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 1;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 13px;
}
.content-links{
  margin-top: 10px;
}
.content-links ul{
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}
.content-links ul li{
  width: 128px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-links ul li a{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}
  

  
/* 銀座 */
.salon-ginza .content-area{
  background: #008446;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-ginza .content-body h2 a{
  color: #008446; 
}
.salon-ginza .content-table th{
  color: #008446; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-ginza .content-tags ul li{
  color: #008446;
  background: #e5f2ec;
}
.salon-ginza .content-links .link-map a{
  color: #008446;
  border: 1px solid #008446; 
}
.salon-ginza .content-links .link-detail a{
  color: #fff;
  background: #008446;
  border: 1px solid #008446;
}
  
/* 東京 */
.salon-tokyo .content-area{
  background: #c41018;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-tokyo .content-body h2 a{
  color: #c41018; 
}
.salon-tokyo .content-table th{
  color: #c41018; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-tokyo .content-tags ul li{
  color: #c41018;
  background: #ffeff0;
}
.salon-tokyo .content-links .link-map a{
  color: #c41018;
  border: 1px solid #c41018; 
}
.salon-tokyo .content-links .link-detail a{
  color: #fff;
  background: #c41018;
  border: 1px solid #c41018;
}

  
/* 秋葉原 */
.salon-akihabara .content-area{
  background: #FF3E00;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-akihabara .content-body h2 a{
  color: #FF3E00; 
}
.salon-akihabara .content-table th{
  color: #FF3E00; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-akihabara .content-tags ul li{
  color: #FF3E00;
  background: #fff3ef;
}
.salon-akihabara .content-links .link-map a{
  color: #FF3E00;
  border: 1px solid #FF3E00; 
}
.salon-akihabara .content-links .link-detail a{
  color: #fff;
  background: #FF3E00;
  border: 1px solid #FF3E00;
}

/* 赤坂 */
.salon-akasaka .content-area{
  background: #0000b6;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-akasaka .content-body h2 a{
  color: #0000b6; 
}
.salon-akasaka .content-table th{
  color: #0000b6; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-akasaka .content-tags ul li{
  color: #0000b6;
  background: #efefff;
}
.salon-akasaka .content-links .link-map a{
  color: #0000b6;
  border: 1px solid #0000b6; 
}
.salon-akasaka .content-links .link-detail a{
  color: #fff;
  background: #0000b6;
  border: 1px solid #0000b6;
}



/* 虎ノ門 */
.salon-toranomon .content-area{
  background: #008690;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-toranomon .content-body h2 a{
  color: #008690; 
}
.salon-toranomon .content-table th{
  color: #008690; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-toranomon .content-tags ul li{
  color: #008690;
  background: #ecfeff;
}
.salon-toranomon .content-links .link-map a{
  color: #008690;
  border: 1px solid #008690; 
}
.salon-toranomon .content-links .link-detail a{
  color: #fff;
  background: #008690;
  border: 1px solid #008690;
}




/* 新宿 */
.salon-shinjuku .content-area{
  background: #5b13b3;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-shinjuku .content-body h2 a{
  color: #5b13b3; 
}
.salon-shinjuku .content-table th{
  color: #5b13b3; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-shinjuku .content-tags ul li{
  color: #5b13b3;
  background: #f4eaff;
}
.salon-shinjuku .content-links .link-map a{
  color: #5b13b3;
  border: 1px solid #5b13b3; 
}
.salon-shinjuku .content-links .link-detail a{
  color: #fff;
  background: #5b13b3;
  border: 1px solid #5b13b3;
}

  
  
/* 西新宿 */
.salon-nishishinjuku .content-area{
  background: #68B900;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-nishishinjuku .content-body h2 a{
  color: #68B900; 
}
.salon-nishishinjuku .content-table th{
  color: #68B900; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-nishishinjuku .content-tags ul li{
  color: #68B900;
  background: #f8ffef;
}
.salon-nishishinjuku .content-links .link-map a{
  color: #68B900;
  border: 1px solid #68B900; 
}
.salon-nishishinjuku .content-links .link-detail a{
  color: #fff;
  background: #68B900;
  border: 1px solid #68B900;
}




/* 渋谷宮益坂 */
.salon-shibuyamiyamasuzaka .content-area{
  /* background: #ddaa00; */
  background: #00b3cf;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-shibuyamiyamasuzaka .content-body h2 a{
  color: #00b3cf; 
}
.salon-shibuyamiyamasuzaka .content-table th{
  color: #00b3cf; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-shibuyamiyamasuzaka .content-tags ul li{
  color: #00b3cf;
  background: #effdff;
}
.salon-shibuyamiyamasuzaka .content-links .link-map a{
  color: #00b3cf;
  border: 1px solid #00b3cf; 
}
.salon-shibuyamiyamasuzaka .content-links .link-detail a{
  color: #fff;
  background: #00b3cf;
  border: 1px solid #00b3cf;
}




  
/* 渋谷道玄坂 */
.salon-shibuya .content-area{
  background: #da7706;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-shibuya .content-body h2 a{
  color: #da7706; 
}
.salon-shibuya .content-table th{
  color: #da7706; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-shibuya .content-tags ul li{
  color:#da7706;
  background: #fff7ee;
}
.salon-shibuya .content-links .link-map a{
  color: #da7706;
  border: 1px solid #da7706; 
}
.salon-shibuya .content-links .link-detail a{
  color: #fff;
  background: #da7706;
  border: 1px solid #da7706;
}
  


/* 恵比寿 */
.salon-ebisu .content-area{
  background: #ff3e77;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-ebisu .content-body h2 a{
  color: #ff3e77; 
}
.salon-ebisu .content-table th{
  color: #ff3e77; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-ebisu .content-tags ul li{
  color: #ff3e77;
  background: #fff2f6;
}
.salon-ebisu .content-links .link-map a{
  color: #ff3e77;
  border: 1px solid #ff3e77; 
}
.salon-ebisu .content-links .link-detail a{
  color: #fff;
  background: #ff3e77;
  border: 1px solid #ff3e77;
}



  
/* 池袋 */
.salon-ikebukuro .content-area{
  background: #9a8d00;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-ikebukuro .content-body h2 a{
  color: #9a8d00; 
}
.salon-ikebukuro .content-table th{
  color: #9a8d00; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-ikebukuro .content-tags ul li{
  color: #9a8d00;
  background: #fffded;
}
.salon-ikebukuro .content-links .link-map a{
  color: #9a8d00;
  border: 1px solid #9a8d00; 
}
.salon-ikebukuro .content-links .link-detail a{
  color: #fff;
  background: #9a8d00;
  border: 1px solid #9a8d00;
}
  
/* 横浜*/
.salon-yokohama .content-area{
  background: #6f3500;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-yokohama .content-body h2 a{
  color: #6f3500; 
}
.salon-yokohama .content-table th{
  color: #6f3500; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-yokohama .content-tags ul li{
  color: #6f3500;
  background: #fff7ef;
}
.salon-yokohama .content-links .link-map a{
  color: #6f3500;
  border: 1px solid #6f3500; 
}
.salon-yokohama .content-links .link-detail a{
  color: #fff;
  background: #6f3500;
  border: 1px solid #6f3500;
}


/* 桜木町 */
.salon-sakuragicho .content-area{
  background: #ca0078;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-sakuragicho .content-body h2 a{
  color: #ca0078; 
}
.salon-sakuragicho .content-table th{
  color: #ca0078; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-sakuragicho .content-tags ul li{
  color: #ca0078;
  background: #fff0f9;
}
.salon-sakuragicho .content-links .link-map a{
  color: #ca0078;
  border: 1px solid #ca0078; 
}
.salon-sakuragicho .content-links .link-detail a{
  color: #fff;
  background: #ca0078;
  border: 1px solid #ca0078;
}


/* 川崎 */
.salon-kawasaki .content-area{
  background: #0076af;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-kawasaki .content-body h2 a{
  color: #0076af; 
}
.salon-kawasaki .content-table th{
  color: #0076af; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-kawasaki .content-tags ul li{
  color: #0076af;
  background: #effaff;
}
.salon-kawasaki .content-links .link-map a{
  color: #0076af;
  border: 1px solid #0076af; 
}
.salon-kawasaki .content-links .link-detail a{
  color: #fff;
  background: #0076af;
  border: 1px solid #0076af;
}


/* 大宮 */
.salon-omiya .content-area{
  background: #06c49f;
  color: #fff;
  font-size: 16px;
  font-weight:bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}
.salon-omiya .content-body h2 a{
  color: #06c49f; 
}
.salon-omiya .content-table th{
  color: #06c49f; 
  font-size: 18px;
  padding-right: 4px;
}
.salon-omiya .content-tags ul li{
  color: #06c49f;
  background: #ecfffb;
}
.salon-omiya .content-links .link-map a{
  color: #06c49f;
  border: 1px solid #06c49f; 
}
.salon-omiya .content-links .link-detail a{
  color: #fff;
  background: #06c49f;
  border: 1px solid #06c49f;
}


/* 施設一覧地図 */
.st-link{
  transition: opacity 0.3s;
  background: #fff;
  outline: none;
}
.st-link g{
  outline: none;
}
.st-link:hover{
  opacity: 0.6;
  /* width: 200px; */
}
  
.salon-map-header{
  border-top: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  padding: 20px;
}
  
.salon-map{
  /*
  width: 950px;
  */

  overflow: hidden;
  position: relative;
  vertical-align: bottom;
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  width: 948px;
  /*
  height: 498px;
  */
  height: 600px;
  margin-left: auto;
  margin-right: auto;
}
.salon-map svg{
  transform-origin: center center;
  object-fit: cover;
  vertical-align: bottom;
  /*
  height: 100%;
  width: 100%;
  */
  /*
  transition: transform 0.3s ease;
  transform: scale(1.5);
  */
}
.salon-map-notice {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1;
  font-size: 12px;
  background: rgb(255 255 255 / 80%);
  padding: 15px;
  border: 1px solid #e0e0e0;
  animation: fadeOut 0.3s ease-in 0s forwards;
}
.smn-title{
font-size: 24px;
font-weight: bold;
line-height: 1;
margin-bottom: 10px;
}
.smn-exp{
font-size: 12px;
}
  
.salon-map-notice.-visible {
  display: block;
  animation: fadeIn 0.3s ease-in 0s forwards;
}
  
  
@keyframes fadeIn{
  from{
      opacity: 0;
      left: -150px;
  }
  to{
      opacity: 1;
      left: 15px;
  }
}
@keyframes fadeOut{
  from{
      opacity: 1;
  }
  to{
      opacity: 0;
      display: none;
      left: -150px;
  }
}
  
  
  

/* ツールチップ */
.tippy-box[data-theme~='ginza']{ background-color: #008446; }
.tippy-box[data-theme~='ginza'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='ginza'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #008446; }

.tippy-box[data-theme~='tokyo']{ background-color: #c41018; }
.tippy-box[data-theme~='tokyo'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='tokyo'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #c41018; }

.tippy-box[data-theme~='akihabara']{ background-color: #ff3e00; }
.tippy-box[data-theme~='akihabara'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='akihabara'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #ff3e00; }

.tippy-box[data-theme~='akasaka']{ background-color: #0000b6; }
.tippy-box[data-theme~='akasaka'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='akasaka'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #0000b6; }

.tippy-box[data-theme~='toranomon']{ background-color: #0b818a; }
.tippy-box[data-theme~='toranomon'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='toranomon'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #0b818a; }

.tippy-box[data-theme~='shinjuku']{ background-color: #5b13b3; }
.tippy-box[data-theme~='shinjuku'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='shinjuku'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #5b13b3; }

.tippy-box[data-theme~='nishishinjuku']{ background-color: #68b900; }
.tippy-box[data-theme~='nishishinjuku'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='nishishinjuku'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #68b900; }

.tippy-box[data-theme~='shibuya_miyamasuzaka']{ background-color: #00B3CF; }
.tippy-box[data-theme~='shibuya_miyamasuzaka'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='shibuya_miyamasuzaka'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #00B3CF; }

.tippy-box[data-theme~='shibuya']{ background-color: #da7706; }
.tippy-box[data-theme~='shibuya'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='shibuya'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #da7706; }

.tippy-box[data-theme~='ebisu']{ background-color: #ff3e77; }
.tippy-box[data-theme~='ebisu'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='ebisu'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #ff3e77; }

.tippy-box[data-theme~='ikebukuro']{ background-color: #9a8d00; }
.tippy-box[data-theme~='ikebukuro'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='ikebukuro'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #9a8d00; }

.tippy-box[data-theme~='yokohama']{ background-color: #6f3500; }
.tippy-box[data-theme~='yokohama'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='yokohama'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #6f3500; }

.tippy-box[data-theme~='sakuragicho']{ background-color: #ca0078; }
.tippy-box[data-theme~='sakuragicho'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='sakuragicho'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #ca0078; 
  }
.tippy-box[data-theme~='kawasaki']{ background-color: #0076af; }
.tippy-box[data-theme~='kawasaki'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='kawasaki'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #0076af; 
  }
.tippy-box[data-theme~='omiya']{ background-color: #06c49f; }
.tippy-box[data-theme~='omiya'][data-placement^='top'] > .tippy-arrow::before,
.tippy-box[data-theme~='omiya'][data-placement^='bottom'] > .tippy-arrow::before{ border-top-color: #06c49f; }
  
  
/* モバイル */
@media screen and (max-width: 540px) {
  .salonlist-filter{
    margin-bottom: 0 !important;
  }
  .salonlist-filter nav{
    padding: 5px;
  }
  .salonlist-filter ul{
    flex-wrap: wrap;
    text-align: center;
  }
  .salonlist-filter ul li{
    width: calc(50% - 10px);
    margin: 5px;
  }
  .salonlist-filter label{
    margin-right: 0;
  }
  .salonlist-item{
    width: 100%;
    margin-bottom: 10px;
  }
  .salonlist-container{
    padding: 10px;
  }
  .salonlist-primary-txt{
    padding: 10px;
    margin-bottom: 10px;
  }
  .salon-map-header{
    padding: 10px;
    border: none;
    margin-top: -10px;
  }
  .salon-map-header .salonlist-primary-txt{
    display: none;
  }
  .salon-map{
    max-width: 100%;
    border: none;
    height: auto;
    margin-bottom: 10px !important;
    max-width: calc(100% - 20px);
  }
  .mobile-salonlist-primary-txt{
    font-size:16px;
    margin-bottom: 0px !important;
  }
  .content-links ul li{
    width: calc(50% - 7px);
  }
  .content-body{
    min-height: auto;
  }
}