﻿#salonHead {border-radius: 4px; padding:0; overflow: hidden;background: #fff;}
#salonHead h1 {font-size: 26px;margin-bottom: 2%; color: #fff;background: #2ab5d3; background: -webkit-linear-gradient(-45deg, #57cfb0, #2ab5d3); background: -o-linear-gradient(-45deg, #57cfb0, #2ab5d3); background: -moz-linear-gradient(-45deg, #57cfb0, #2ab5d3); background: -webkit-linear-gradient(135deg, #57cfb0, #2ab5d3); background: -o-linear-gradient(135deg, #57cfb0, #2ab5d3); background: linear-gradient(-45deg, #57cfb0, #2ab5d3);padding: 2% 2%;border-radius: 4px;}
#salonHead .heroVisual img {width: 100%; height: auto;box-shadow: 0 2px 5px 0 rgba(0,0,0,.15), 0 3px 3px -2px rgba(0,0,0,.15);line-height: 0;border-radius: 6px;}
.heroVisual .Card{position: relative; width:100%;line-height: 0; margin-bottom: 25px;}
.heroVisual .closeIcon {position: absolute; max-width: 150px; max-height: 76px;top:2%; right: 2%; z-index: 1;}
.heroVisual .closeIcon img {width: 100%; height: auto;box-shadow: 0 2px 5px 0 rgba(0,0,0,0), 0 3px 3px -2px rgba(0,0,0,0) !important;}
#salonHead .setTxt {}
#salonHead .setTxt h3 {border-left: none;color: #81d4cb;background: url(../img/icon-subT.png) no-repeat;background-size: 16px auto;background-position: 0px 4px;padding-left: 24px;border-bottom: 3px solid #81d4cb;margin-top: 25px;}
#salonHead .setTxt h3.fromSalon {border-left: none;color: #fff;background:#FB8587 url("../img/icon-fromSalon.png"); background-repeat: no-repeat;background-size: 22px auto;background-position: 0px 4px;background-position: 8px 7px;padding: 6px 10px 5px 33px;border-radius: 4px;font-size: 16px;border-bottom: none;}
#salonHead .narrowBox {margin: 0 0 15px;}
#salonHead .narrowBox input[type="text"] {background: url("../img/icon-search-green.svg") 98% 50% no-repeat;background-size: 21px auto;border: 2px solid #C3C3C3;}
@media screen and (max-width: 800px) {
#salonHead .setTxt h3 {margin-top: 20px; background-size: 14px auto; background-position: 0px 3px; padding-left: 21px; font-size: 14px;}
}
/*========================================
オススメセラピスト
=======================================*/
.OsusumeTh {width: 100%; margin: 0 auto 20px; overflow: hidden;}
.OsusumeTh li { float: left; width: 31.5%; padding: 1% 0.5%; margin-right: 1.2%;border-radius: 8px;position: relative;}
.OsusumeTh li .favBtn {position: absolute;background: url("../img/fav_off.png") no-repeat;background-size: cover; width:40px; height: 40px;top: 40px; right: 15px;transition: .4s;z-index: 2;cursor: pointer;}
.OsusumeTh li .favBtn.off {}
.OsusumeTh li .favBtn.on {background: url("../img/fav_on.png") no-repeat;background-size: cover; width:40px; height: 40px;}
.OsusumeTh li .favBtn:hover {transition: .4s; opacity: 0.8}
.OsusumeTh li:nth-child(3n) { float: right; margin-right: 0}
.OsusumeTh li .cnt {background: #fff; border-radius: 8px; width: 92%;margin: 0 auto; padding: 2%; min-height: 415px;}
.OsusumeTh li .cnt .photo {width: 100%; height: 250px; overflow: hidden;}
.OsusumeTh li .cnt .photo img{ width: 100%; height: 100%;object-fit: cover;}
.OsusumeTh li .cnt .photo .thumb{width: 100%; height: 100%; max-width: 193px;position: relative;}
.OsusumeTh li .cnt .photo .thumb::before{ content: ""; display: block; padding-top:108%;}
.OsusumeTh li .cnt .photo .thumb a{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.OsusumeTh li .cnt .photo .thumb img{ width: 100%; height: auto; line-height: 0; position: absolute;bottom: 0;}
.OsusumeTh li .cnt .txt {color:#292929;min-height: 108px;padding-top: 10px}
.OsusumeTh h3 {text-align: center; color:#fff;text-shadow: 1px 2px 0 rgba(0,0,0,0.4); border-radius: 8px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 2px 0; border: none;font-size: 16px; margin-bottom:0;}
.OsusumeTh h3 span {font-size: 12px;}
.OsusumeTh .popularTh h3 {background:url(../img/salon/osusumeTh-01.jpg);}
.OsusumeTh .goodTh h3 {background:url(../img/salon/osusumeTh-02.jpg);}
.OsusumeTh .newTh h3 {background:url(../img/salon/osusumeTh-03.jpg);}
.OsusumeTh li .cnt .name {text-align: center; margin-bottom: 2px; font-weight: bold;}
.OsusumeTh li .cnt .size {text-align: center; margin-bottom: 2px; font-size: 14px;}
.OsusumeTh li .cnt .catch { font-size: 12px; margin-bottom: 0;}
.OsusumeTh .popularTh, .OsusumeTh .popularTh h3 {background:url(../img/salon/osusumeTh-01.jpg);}
.OsusumeTh .goodTh, .OsusumeTh .goodTh h3{background:url(../img/salon/osusumeTh-02.jpg);}
.OsusumeTh .newTh, .OsusumeTh .newTh h3{background:url(../img/salon/osusumeTh-03.jpg);}
@media screen and (max-width: 1120px) {.OsusumeTh h3 {font-size: 15px; margin-bottom:0;}.OsusumeTh li .cnt {min-height: 395px;}}
@media screen and (max-width: 1020px) {.OsusumeTh li .cnt {min-height: 375px;}}

@media only screen and (min-width:801px) and (max-width:989px) {
.OsusumeTh h3 span {font-size: 12px;display: block; line-height: 1;}
}
@media screen and (max-width: 800px) {
#salonHead {border-radius: 0}
#salonHead h1 {font-size:90%; margin-bottom: 10px; padding: 0 1%;}

#salonHead h1 {font-size: 18px;line-height: 1.4;color:#fff;padding: 6px 2%;margin-bottom: 0;border-radius: 0;}
#salonHead .heroVisual img {box-shadow: none;border-radius: 0;}

.OsusumeTh {width: 98%; margin: 0 auto;}
.ggmap {width: 98%;margin: 0 auto;}
.OsusumeTh li {margin: 0 auto 10px;min-height: auto;width: 98%;border-radius: 0;padding: 2% 1%;}
.OsusumeTh li .cnt {width: 94%;margin: 0 auto; padding: 2%; min-height: auto; overflow: hidden;border-radius: 0;}
.OsusumeTh li .cnt .photo {width: 30%; height:auto; float: left;line-height: 0;margin-bottom: 0;max-height: 140px;}
.OsusumeTh li .cnt .photo img{ width: 100%; height: auto; border-radius: 0;}
.OsusumeTh h3 {font-size: 14px; float: right; width: 66%;text-shadow:none; }
.OsusumeTh h3 span {font-size: 14px; display: inline}
.OsusumeTh .popularTh h3, .OsusumeTh .goodTh h3, .OsusumeTh .newTh h3 {background: none; text-align: left; padding: 0;}
.OsusumeTh .popularTh h3 {color:#FF812C; }
.OsusumeTh .goodTh h3 {color:#0AC86C;}
.OsusumeTh .newTh h3 {color:#F186D3;}
.OsusumeTh li .cnt .txt {float: right; width: 66%; padding-top:0;}
.OsusumeTh li .cnt .name { font-size: 14px; text-align: left;}
.OsusumeTh li .cnt .size {font-size: 10px;text-align: left;}
.OsusumeTh li .cnt .catch {font-size: 12px; margin-bottom: 0;text-align: left;}
.OsusumeTh li .favBtn {top: 15px; right: 15px;}
}
@media screen and (max-width: 320px) {
.OsusumeTh h3, .OsusumeTh h3 span {font-size: 13px;}
.OsusumeTh li .cnt .name {margin-bottom: 0;}
.OsusumeTh li .cnt .catch {line-height: 1.2;}
}


/* basicInfo */
.basicInfo {overflow: hidden; padding:10px 2%; margin-bottom: 20px;background: #f9f9f9; border: #eee solid 1px; color: #666;border-radius: 3px;}
.basicInfo dl {overflow: hidden;float: left; width: 50%; font-size: 14px; margin-bottom: 10px;}
.basicInfo dl dt {float: left; width: 25%;}
.basicInfo dl dd {float: right; width: 75%;}
.basicInfo dl.long{width: 100%;}
.basicInfo dl.long dt {float: left; width: 12.5%;}
.basicInfo dl.long dd {float: right; width: 87.5%;}
.basicInfo dl.long dd .serviceTag {width: 100%; overflow: hidden;}
.basicInfo dl.long dd .serviceTag li {display: inline-block; padding: 0 5px 0 28px; font-size: 10px; height: 28px; line-height: 29px; background:#E8E8E8 url(../img/icon-ok.png) no-repeat; background-size: 20px; background-position: 5px 45%; border: #eee solid 1px; color: #666; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px;border-radius: 3px; float: left; width: auto; margin: 0 5px 5px 0}
.basicInfo .txt {float: left; width: 50%;}
.basicInfo .btns { float:right;width: 26%; margin-bottom: 0;margin-top: 4px;}
.basicInfo .txt .date {background: url(../img/icon-time.png) no-repeat 0 48%; background-size: 16px; padding-left: 20px;margin-bottom:0;}
.basicInfo .txt .author{background: url(../img/icon-author.png) no-repeat 0 48%; background-size: 16px; padding-left: 20px;margin-bottom: 0}
.basicInfo .btns li {float: left; width: 40%; text-align: right; line-height: 0;}
.basicInfo .btns li img {width: 40px;}
.update { text-align: right; font-size: 12px;}
.cautionBlock {}
.cautionBlock ul{background:#F1F1F1;border-radius: 5px;padding: 2% 2% 2% 5%;font-size: 80%;margin-bottom: 15px;}
.cautionBlock li{ list-style: decimal;}
.twBlock {width: 500px; margin: 0 auto 20px;}
.basicInfo .relatedSalons {display: flex;flex-wrap:wrap;margin: 0;padding: 0;}
.basicInfo .relatedSalons li {width: 48%;margin: 0 1% 2%;}
.basicInfo .relatedSalons li .btn,
.basicInfo .relatedSalons li a.btn {box-sizing: border-box; width: 100%; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; padding: 10px 5px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #000; border-radius: 3px;box-shadow: 1px 2px 3px rgba(0,0,0,0.2);}
a.btn-flat { overflow: hidden; padding: 1.5rem 6rem; color: #31b4be; border-radius: 0; background: #fff url("../img/arrow.png") no-repeat; background-position: 98% 50%; width: 100%;background-size: 10px auto;}
a.btn-flat span {position: relative;}
a.btn-flat:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: translateX(-96%); transform: translateX(-96%); background: #31b4be;}
a.btn-flat:hover {color: #fff !important;}
a.btn-flat:hover:before {-webkit-transform: translateX(0%); transform: translateX(0%); background: #31b4be url("../img/arrow-white.png") no-repeat;background-position: 98% 50%;background-size: 10px auto;}

@media screen and (max-width: 800px) {
.basicInfo {overflow: hidden; padding:2%; margin-bottom: 20px;background: #f9f9f9; border: #eee solid 1px; color: #666; border-radius:0;}
.basicInfo h3 {border-left: 0;color: #fff;font-size: 14px;line-height: 1.5em;margin-bottom: 8px;background: #0cb2ba;box-sizing: border-box;padding: 6px 5px; height: 30px;}
.basicInfo dl,
.basicInfo dl.long
{width: 98%; margin: 0 1% 10px; font-size: 12px; border-bottom: 1px dotted #C0C0C0;padding-bottom: 2px;}
.basicInfo dl dt,
.basicInfo dl.long dt
{width: 20%;}
.basicInfo dl dd,
.basicInfo dl.long dd
{width: 80%;}
.basicInfo dl.long dd .serviceTag {width: 100%; overflow: hidden;}
.basicInfo dl.long dd .serviceTag li{display: inline-block; padding:0 2px 0 12px; font-size: 8px; height: 20px; line-height: 20px; background:#E8E8E8 url(../img/icon-ok.png) no-repeat; background-size: 10px; background-position: 1px 50%; border: #eee solid 1px; color: #666; border-radius: 3px; float: left; width: auto; margin: 0 5px 5px 0}
/*.basicInfo dl.serviceList dt {width: 100%; margin-bottom: 5px;}
.basicInfo dl.serviceList dd {width:100%;}*/
.basicInfo .btns {float: right;width: 36%;margin-bottom: 0;margin-top: 4px;}
.cautionBlock {}
.cautionBlock ul{padding: 3% 3% 3% 8%;font-size: 10px;margin-bottom: 15px;}
.cautionBlock li{ list-style: decimal;padding-left: 5px;}
.twBlock {width: 100%; margin: 0 auto 20px;}
.basicInfo .relatedSalons {display: flex;flex-wrap:wrap;}
.basicInfo .relatedSalons li {width: 100%;margin: 0 0 2%;}
}


/* コンバージョンボタン */
.cvBtn { padding: .5em 0; overflow: hidden; position: relative;}
.cvBtn a {border: solid #fff 3px; border-radius: 12px; box-shadow: 1px 1px 10px 0 #a1a1a1; color: #fff; display: block; font-size: 16px; font-weight: bold; line-height: 1.3; margin: 2em auto; padding: 1em 2em .8em; position: relative; text-align: center; text-decoration: none; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out; vertical-align: middle; width: 59%;}
.cvBtn.is-fz20 a {font-size: 20px;}
.cvBtn a img {vertical-align: middle;}
.cvBtn a:after { content: ' ' !important;}
 
/* ボタン内のアイコン */
.cvBtn a:before { content: ""; font-family: "fontawesome"; font-weight: normal; font-size: 14px; margin-top: -.6em; position: absolute; right: 15px; top: 50%;}
.cvBtn a:hover {box-shadow: 1px 1px 2px 0 #a1a1a1; filter: alpha(opacity=70); opacity: .7;}
 /* 2つ連続で並べる場合の余白 */
.cvBtn + .cvBtn a { margin-top: 0;}
 /* 緑ボタン */
.cvBtn a {background: #00a23f; background: -webkit-linear-gradient(#00a23f, #39900a); background: linear-gradient(#00a23f, #39900a); text-shadow: 0 0 10px rgba(255,255,255,.8), 1px 1px 1px rgba(0,0,0,1);}
/* 赤ボタン */
.cvBtn.c-red a {background: #fb4e3e; background: -webkit-linear-gradient(#00a23f, #39900a); background: linear-gradient(#fb4e3e, #d64b26);}
/* オレンジボタン */
.cvBtn.c-orange a {background: #f79621; background: -webkit-linear-gradient(#f9c667, #f79621); background: linear-gradient(#f9c667, #f79621);}
/* 青ボタン */
.cvBtn.c-blue a {background: #09c; background: -webkit-linear-gradient(#09c, #069); background: linear-gradient(#09c, #069);}
/* 黒ボタン */
.cvBtn.c-black a {background: #666; background: -webkit-linear-gradient(#8a8a8a, #666); background: linear-gradient(#8a8a8a, #666);}
.is-reflection a {overflow: hidden;}
.is-reflection a:after { -moz-animation: is-reflection 4s ease-in-out infinite; -moz-transform: rotate(45deg); -ms-animation: is-reflection 4s ease-in-out infinite; -ms-transform: rotate(45deg); -o-animation: is-reflection 4s ease-in-out infinite; -o-transform: rotate(45deg); -webkit-animation: is-reflection 4s ease-in-out infinite; -webkit-transform: rotate(45deg); animation: is-reflection 4s ease-in-out infinite; background-color: #fff; content: " "; height: 100%; left: 0; opacity: 0; position: absolute; top: -180px; transform: rotate(45deg); width: 30px;}
.is-reflection + .is-reflection a:after { -webkit-animation-delay: .3s; animation-delay: .3s;}
@keyframes is-reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes is-reflection {
  0% { -webkit-transform: scale(0) rotate(45deg);transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg);transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg);transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg);transform: scale(50) rotate(45deg); opacity: 0; }
}
@media only screen and (max-width: 767px) {
.cvBtn a {font-size: 16px; margin: 0 auto 1em; width: 70%;}
}



.reserveBtn{position: relative; display: inline-block; font-weight: bold; padding: 3% 0; text-decoration: none; color: #00BCD4; background: #ECECEC; transition: .4s; width: 100%; text-align: center; margin-bottom: 15px;}
.reserveBtn:hover {background: #00bcd4;color: white;}

.dischargeBtn{position: relative;font-weight: bold; padding: 2% 0; text-decoration: none; color: #00BCD4; background: #ECECEC; transition: .4s; width: 100%; text-align: center; margin-bottom: 15px;}
.dischargeBtn:hover {background: #00bcd4;color: white;}

.salonLinkBtn{position: relative; display: inline-block; font-weight: bold; padding: 2% 0; text-decoration: none; color: #fff; background: #00bcd4; transition: .4s; width: 100%; text-align: center; margin:10px auto 20px; border-radius: 4px;box-sizing: border-box;border:2px solid #00bcd4;}
.salonLinkBtn:hover {background: #fff;color:#00bcd4;border:2px solid #00bcd4;}

.linkBtn{position: relative; display: inline-block; font-weight: bold; padding: 2% 0; text-decoration: none; color: #00BCD4; background: #ECECEC; transition: .4s; width: 50%; text-align: center;margin: 0 25% 15px; border-radius: 4px;}
.linkBtn:hover {background: #00bcd4;color: white;}

.kuchikomiList li .tx img {width: 100%;height: auto;}