﻿.indexNormal h2,
.areaSelectBox h2
{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;}
#Slider {margin:0 0 20px;border-radius:0;box-shadow:none;}
#Slider img {width: 100%; height: auto;}
@media screen and (max-width: 800px) {
.indexNormal h2,
.areaSelectBox h2
{font-size: 18px}
}
/*========================================
topRecSalons
=======================================*/
.subVisual { margin-bottom: 15px;}
.subVisual img{width: 100%; height: auto;}

#topRecSalons {border-radius: 6px; padding: 0; overflow: hidden; background: #fff;}
#topRecSalons .Cnt {padding: 4% 5% 0;overflow: hidden;}
#topRecSalons .Cnt h2 {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: 6px;}
#topRecSalons .Cnt ul {}
#topRecSalons .Cnt ul li {float: left; width: 48%; border-top:1px solid #ECECEC; padding-top: 20px; margin-bottom: 20px;}
#topRecSalons .Cnt ul li:nth-child(2n) {float: right;}
#topRecSalons .Cnt ul li:first-child, #topRecSalons .Cnt ul li:nth-child(2) {padding-top: 0; border-top:0;}
#topRecSalons .Cnt ul li h3 {border:none;}
#topRecSalons .Cnt ul li h3 {position: relative;color: #333333;text-shadow: 0 0 2px white;z-index: 1; padding: 3px 0 0;margin-bottom: 1px;font-size: 16px;}
#topRecSalons .Cnt ul li h3:before {content: "";position: absolute;background:#91FDFB;width: 40px;height: 40px;border-radius: 50%;top: 50%;left: -10px;-moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);z-index: -1;}
#topRecSalons .Cnt ul li .photo {line-height: 0; border-radius: 4px; overflow: hidden;}
#topRecSalons .Cnt ul li .photo img {width: 100% ;height: auto;}
#topRecSalons .Cnt ul li .evalTxt {padding: 15px 0;font-size: 14px;}
#topRecSalons .Cnt ul li .btn{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;}
#topRecSalons .Cnt ul li .btn:hover {background: #00bcd4;color: white;}
#topRecSalons .Cnt ul li .btn span:after{background: url(../img/arrow.png) 98% 0 no-repeat;background-size: 10px auto;-moz-transition-property: all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property: all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property: all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;display: inline-block;content: '';width: 7px;height: 16px;position: absolute;right: 10px;top: 13px;}
@media screen and (max-width: 800px) {
#topRecSalons {border-radius: 0;}
#topRecSalons .Cnt {padding: 0}
#topRecSalons .Cnt h2 {color: #fff; padding: 2% 2% 2% 2%;border-radius: 0; font-size: 16px;margin-bottom: 5px;}
#topRecSalons .Cnt ul { padding: 2% 2%;}
#topRecSalons .Cnt ul li {display: table;width: 100%; border-top:none; border-bottom:1px solid #ECECEC; padding-bottom: 10px; margin-bottom: 15px;padding-top: 0}
#topRecSalons .Cnt ul li:nth-child(2n) {float:none;}
#topRecSalons .Cnt ul li:first-child  {padding-top: 0; border-top:0;}
#topRecSalons .Cnt ul li h3 {font-size: 15px;border:none; min-height: auto;display: table-caption;padding-bottom: 4px;}
#topRecSalons .Cnt ul li h3:before {content: "";position: absolute;background:#91FDFB;width: 40px;height: 40px;border-radius: 50%;top: 50%;left: -4px;-moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);z-index: -1;}
#topRecSalons .Cnt ul li .photo {width: 40%;display: table-cell;vertical-align: top;}
#topRecSalons .Cnt ul li .photo a {width: 100%;height: 100%;}
#topRecSalons .Cnt ul li .evalTxt {width: 60%;display: table-cell;padding:0 0 0 2%;vertical-align: top;font-size: 11px;font-weight: bold;}
#topRecSalons .Cnt ul li .cBtn {display: none;}
}
/*========================================
topMovieBlock
=======================================*/
#topMovieBlock {border-radius: 6px; padding: 0; overflow: hidden; background: #fff;}
#topMovieBlock .Cnt {padding: 4% 5%;}
#topMovieBlock .Cnt h2 {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: 6px;}
#topMovieBlock .Cnt ul {}
#topMovieBlock .Cnt ul li {float: left; width: 48%; border-top:1px solid #ECECEC; padding-top: 20px; margin-bottom: 20px;}
#topMovieBlock .Cnt ul li:nth-child(2n) {float: right;}
#topMovieBlock .Cnt ul li:first-child, #topMovieBlock .Cnt ul li:nth-child(2) {padding-top: 0; border-top:0;}
#topMovieBlock .Cnt ul li h3 {border:none;}
#topMovieBlock .Cnt ul li h3 {position: relative;color: #333333;text-shadow: 0 0 2px white;z-index: 1; padding: 3px 0 0;margin-bottom: 1px;font-size: 16px;}
#topMovieBlock .Cnt ul li h3:before {content: "";position: absolute;background:#91FDFB;width: 40px;height: 40px;border-radius: 50%;top: 50%;left: -10px;-moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);z-index: -1;}
#topMovieBlock .Cnt ul li .photo {line-height: 0; border-radius: 4px; overflow: hidden;}
#topMovieBlock .Cnt ul li .evalTxt {padding: 15px 0;font-size: 14px;}
#topMovieBlock .Cnt ul li .btn{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;}
#topMovieBlock .Cnt ul li .btn:hover {background: #00bcd4;color: white;}
#topMovieBlock .Cnt ul li .btn span:after{background: url(../img/arrow.png) 98% 0 no-repeat;background-size: 10px auto;-moz-transition-property: all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property: all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property: all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;display: inline-block;content: '';width: 7px;height: 16px;position: absolute;right: 10px;top: 13px;}
@media screen and (max-width: 800px) {
#topMovieBlock {border-radius: 0;}
#topMovieBlock .Cnt {padding: 0}
#topMovieBlock .Cnt h2 {color: #fff; padding: 2% 2% 2% 2%;border-radius: 0; font-size: 16px;}
#topMovieBlock .Cnt ul { padding: 2% 4%;}
#topMovieBlock .Cnt ul li, #topMovieBlock .Cnt ul li:nth-child(2) {float: none; width: 100%; border-top:1px solid #ECECEC; padding-top: 20px; margin-bottom: 20px;}
#topMovieBlock .Cnt ul li:nth-child(2n) {float: none;}
#topMovieBlock .Cnt ul li:first-child  {padding-top: 0; border-top:0;}
#topMovieBlock .Cnt ul li h3 {border:none; min-height: auto;}
#topMovieBlock .Cnt ul li h3 {font-size: 16px;}
#topMovieBlock .Cnt ul li h3:before {content: "";position: absolute;background:#91FDFB;width: 40px;height: 40px;border-radius: 50%;top: 50%;left: -10px;-moz-transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);z-index: -1;}
#topMovieBlock .Cnt ul li .photo {line-height: 0; border-radius: 4px; overflow: hidden;}
#topMovieBlock .Cnt ul li .evalTxt {padding: 15px 0;font-size: 14px;}
#topMovieBlock .Cnt ul li .btn{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;}
}


.hotSalons {overflow: hidden; margin-bottom: 20px;}
.hotSalons img {width: 100%;height: auto;}
.hotSalons li {overflow: hidden;position: relative;margin-bottom: 20px;background: url("../img/arrow.png") 98% 50% no-repeat; background-size: 15px auto;box-sizing: border-box; border:1px solid #E4E4E4;border-radius: 4px;padding: 2%;transition: .4s;}
.hotSalons li:hover {background: url("../img/arrow.png") 99% 50% no-repeat; background-size: 15px auto;transition: .4s;}
.hotSalons li a {display: block;width: 100%; color: #313131}
.hotSalons li figure {float: left; width: 48%;position: relative;}
.hotSalons li figure .icon {position: absolute;top: -8%;left: -4%;width: 50px;}
.hotSalons li figure img {border-radius: 6px; overflow: hidden;vertical-align: bottom;}
.hotSalons li .txt {float: right;width: 46%; margin-right: 4%}
.hotSalons li .txt h3 {border: none; margin: 0 0 5px !important; padding: 0 0 5px; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis; color:#FC598C; border-bottom: 1px solid #FC598C;}
.hotSalons li .txt p{font-size: 15px;}
@media screen and (max-width: 800px) {
.hotSalons {margin-bottom:0;}
.hotSalons li {overflow: hidden;position: relative;margin-bottom: 20px;background: url("../img/arrow.png") 98% 50% no-repeat; background-size: 15px auto;padding: 2%;}
.hotSalons li figure {float:none; width: 100%;position: relative;}
.hotSalons li figure .icon {position: absolute;top: -2%;left: -1%;width: 60px;}
.hotSalons li .txt {float: none;width: 100%; margin-right: 0}
.hotSalons li .txt h3 {border: none; margin: 0 0 !important; padding: 0 0 5px;font-size: 13px; overflow: hidden;}
.hotSalons li .txt p{font-size: 11px;font-weight: bold;}
}

.areaMap {}
.areaMap .Cnt {}
.areaMap .Cnt .mapLink {}
.areaMap .Cnt .mapLink .block {}
.areaMap .Cnt .mapLink .block.block-01 {}
.areaMap .Cnt .mapLink .block.block-02 {}
.areaMap .Cnt .mapLink .block.block-03 {}
.areaMap .Cnt .mapLink .block.block-04 {}
.areaMap .Cnt .mapLink .block.block-05 {}
.areaMap .Cnt .mapLink .block ul {}
.areaMap .Cnt .mapLink .block ul.oneClm li{}
.areaMap .Cnt .mapLink .block ul.twoClm li{}
.areaMap .Cnt .mapLink .block ul.twoClm li:nth-child(2n){}
.areaMap .Cnt .mapLink .block ul.threeClm li{}
.areaMap .Cnt .mapLink .block ul.threeClm li:nth-child(3n){}
.areaMap .Cnt .mapLink .block ul.fourClm li{}
.areaMap .Cnt .mapLink .block ul.fourClm li:nth-child(4n){}

.areaSelectBox {border-radius: 4px; padding: 0; overflow: hidden; background: #fff;margin: 0 0 20px; box-shadow: 0px 0px 5px 0px #C8C8C8;}
.areaSelectBox .Cnt {padding: 2%}
.area_btn_grp { display: none; }
.area_active { display: block;}
.areaSelectBox ul {overflow: hidden;}
.areaSelectBox ul li{width: calc(100% / 3);float: left;text-align: center;display: table;box-sizing: border-box;padding: 5px 5px}
.areaSelectBox ul li.preBack {width: 100%;}
.areaSelectBox button {position: relative; display: table-cell; text-align: center; width: 100%; vertical-align: middle; box-sizing: border-box; height: 60px; padding: 0 0 0 12%; cursor: pointer; border-radius: 6px; border: 1px solid #f7f7f7; letter-spacing: 1px; font-weight: 400; font-size: 16px;background: #63cde2; background:-moz-linear-gradient(top, #63cde2 50%, #5ab7ce 50%, #63cde2 100%); background: -webkit-linear-gradient(top, #63cde2 50%, #5ab7ce 50%, #63cde2 100%); background:linear-gradient(to bottom, #63cde2 50%, #5ab7ce 50%, #63cde2 100%); transition: .4s;background-size: 20px auto; background-position: 2% 50%; color: #fff;}
.areaSelectBox button span {display: block;font-size: 80%}
.areaSelectBox button:before {content: '';background:url("../img/icon-map.png") no-repeat;position: absolute; width:15px; height: 24px;background-size:15px auto;margin: auto;left:4%;top: 0;bottom: 0}	
.areaSelectBox ul li.preBack button {background: #CCCCCC;height: 40px;padding: 0 0}
.areaSelectBox ul li.preBack button:before {content: '';background:url("../img/arrowPrevWhite.png") no-repeat;position: absolute; width:10px; height: 18px;background-size:10px auto;margin: auto;left:2%;top: 0;bottom: 0}
.areaSelectBox h3 {position: relative;padding:0 0 0.5rem;border: none;}
.areaSelectBox h3:after {position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; content: ''; border-radius: 2px; 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);}
@media screen and (max-width: 800px) {
.areaSelectBox button {font-size: 11px;line-height: 1.2;padding: 0 5px 0 15px;font-weight:bold}
.areaSelectBox button:before {width:10px; height: 16px;background-size:10px auto;}	
.areaSelectBox ul li.preBack button:before {width:6px; height: 12px;background-size:6px auto;margin: auto;left:2%;top: 0;bottom: 0}
}