@charset "utf-8";

/************************************************************
 * CLASSES(プロパティ)
 ************************************************************/

/* WIDTH */
.w81	{ width: 81px; }
.w89	{ width: 89px; }
.w94	{ width: 94px; }
.w100	{ width: 100px; }
.w106	{ width: 106px; }
.w117	{ width: 117px; }
.w141	{ width: 141px; }
.w183	{ width: 183px; }
.w130	{ width: 130px; }
.w189	{ width: 186px; }
.w191	{ width: 191px; }
.w260	{ width: 260px; }
.w325	{ width: 325px; }
.w360	{ width: 360px; }
.w385	{ width: 385px; }
.w410	{ width: 410px; }
.w420	{ width: 420px; }
.w550	{ width: 550px; }
.w555	{ width: 555px; }
.w557	{ width: 557px; }
.w558	{ width: 558px; }

/* HEIGHT */
.h50	{ height: 50px; }
.h70	{ height: 70px; }
.h135	{ height: 135px; }
.h178	{ height: 178px; }
.h200	{ height: 200px; }

/* LINE-HEIGHT */
.lh24	{ line-height: 24px; }
.lh130	{ line-height: 130%; }


/* MARGIN */
.mR9	{ margin-right: 9px; }
.mT2	{ margin-top: 2px; }
.mL0	{ margin-left: 0; }
.mL75	{ margin-left: 75px; }
.mL90	{ margin-left: 90px; }

/* PADDING */
.pT6	{ padding-top: 6px; }
.pB6	{ padding-bottom: 6px; }
.pH7	{ padding-left: 7px; padding-right: 7px; }


/* POSITION */
.rightN15	{ right: -15px; }

/* BACKGROUNG */
.bgGray		{ background-color: #FAF9F1; }
.bgWhite2	{ background-color: #F6F3E3; }

/* BORDER */
.bdDPink	{ border: 1px solid #E6BBBB; }
.bdPink3	{ border: 1px solid #E6BBBB; }

.rankingListWrapper {
position: relative;
overflow: hidden;
zoom: 1;
}

.rankingList {
margin-right: -15px;
}

.rankingListHeading {
margin-bottom: 4px;
}

.rankingList a {
display: block;
text-decoration: none !important;
}

.rankingList a .rankingListInnerAnchor {
text-decoration: none !important;
}
.rankingList a .rankingListInnerAnchor:hover {
text-decoration: underline !important;
}

.rankingListStylist, .rankingListShop {
color: #333333;
font-size: 11px;
font-weight: bold;
}

/* メンズレディース切り替えタブ */
.tabGender a {
	display: block;
	height: 30px;
	background-image: url(/CSP/img/bt/sprites/tab_gender.png?switch=2025062510);
	background-repeat: no-repeat;
	margin-bottom: -1px;
	position: relative;
	z-index: 0;
}
.tabGenderLadys				{ background-position: 0 0; width: 100px; }
.tabGenderLadys:hover		{ background-position: 0 -30px; }
.current .tabGenderLadys		{ background-position: 0 -60px; }

.tabGenderMens				{ background-position: -150px 0; width: 100px; }
.tabGenderMens:hover			{ background-position: -150px -30px; }
.current .tabGenderMens		{ background-position: -150px -60px; }

.tabBody {
	background-color:#FDFDF5;
	width:537px;
	padding:0px 10px;
	border: 1px solid #BFB4AB;
}

.hairStyleList a {
	display: block;
	text-decoration: none !important;
}

.hairStyleList a:hover .hairStyleListInnerAnchor {
 text-decoration: none !important;
}
.hairStyleList a .hairStyleListInnerAnchor:hover {
 text-decoration: underline !important;
}

.hairStyleList, .hairStyleListShop {
	color: #333333;
	font-size: 10px;
}

.styleListImg {
	align-items: center;
	display: flex;
	height: 119px;
	justify-content: center;
	width: 89px;
}
.styleListImg > img {
	max-height: 119px;
	max-width: 89px;
}

.icnCrown1 {
	padding-left: 30px;
	background: url(/CSP/img/bt/icons/sa_icon_crown1.png?switch=2025062510) no-repeat 0 0;
}

.icnCrown2 {
	padding-left: 30px;
	background: url(/CSP/img/bt/icons/sa_icon_crown2.png?switch=2025062510) no-repeat 0 0;
}

.icnCrown3 {
	padding-left: 30px;
	background: url(/CSP/img/bt/icons/sa_icon_crown3.png?switch=2025062510) no-repeat 0 0;
}

.icnCrownOther {
	padding-left: 25px;
	background: url(/CSP/img/bt/icons/sa_icon_crown_other.png?switch=2025062510) no-repeat 0 0;
}

.selectMiddleArea {
	position: relative;
	float:right;
	min-height: 453px;
	width: 557px;
	z-index: 1;
	}

.choose {
	background-color: #FBFAF5;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	color: #665555;
	font-size: 14px;
	font-weight: bold;
	float: left;
	padding: 10px 10px 0 14px;
	width: 160px;
}

.nonFlashBtnArea{
	height:50px;
}

.lookRecentlyAreaChangeHeading {
	border-bottom: none;
}
.ensenSearchBtn > span > span {
	color: #FA6271;
}
.ensenSearchBtn:hover > span > span {
	color: #FFBDBD;
}

/*  SEARCH KEYWORD */
.saSearchKeywordHead {
	padding-top: 3px;
	color: #666666;
	font-weight: bold;
}
.saSearchFreewordBox {
	width: 260px;
	height: 24px;
	padding: 2px 4px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	box-sizing: border-box;
}
.saSearchFreewordBox::placeholder {
	color: #909090;
}
.saSearchFreewordIcon {
	align-items: center;
	display: flex;
}
.saSearchFreewordIcon:before {
	background: url(/CSP/img/svg/sp/icon_search.svg?switch=2025062510) center / contain;
	content: "";
	height: 24px;
	margin-right: 5px;
	width: 24px;
}
/* / SEARCH KEYWORD */

/* AREA */
.saMapWrapWrap {
	position: relative;
}
.routeMa > li {
	background-color: #FFFFFF;
	border: #A7907D 1px solid;
	border-radius: 8px;
	-webkit-box-shadow: 0 2px rgb(204,204,204);
	box-shadow: 0 2px rgb(204,204,204);
	cursor: pointer;
	display: table;
	position: absolute;
	text-align: center;
}
.routeMa a {
	color: #EC6184;
	display: table-cell;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.2;
	padding: 0 2px;
	text-decoration: none;
	vertical-align: middle;
}
.routeMa > li:hover {
	background-color: #EC6184;
	border: #EC6184 2px solid;
	-webkit-box-shadow: 0 2px rgb(204,204,204);
	box-shadow: 0 2px rgb(204,204,204);
	color: #FFFFFF;
	margin-left: -1px;
	margin-top: -1px;
}
.routeMa > li:hover a {
	color: #FFFFFF;
}
.fixedArea {
	padding: 9px 10px 5px 12px;
}
/* /AREA */

/* FEATURE */
.specialContentsWrap {
	overflow: hidden;
	margin-top: 15px;
	margin-right: -10px;
	margin-bottom: -10px;
	word-wrap: break-word;
}
.pickupContents {
	display: inline;
}
.specialContents {
	display: inline;
}
.specialContentsWrap li {
	float: left;
	margin-right: 10px;
	margin-bottom: 8px;
}
.specialContentsWrap a {
	display: block;
	overflow: hidden;
	width: 179px;
	min-height: 199px;
	text-decoration: none;
	border: solid #CCCCCC;
	border-width: 1px 1px 3px 1px;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.specialContents a {
	position: relative;
}
.pickupContents a:hover,
.specialContents a:hover {
	opacity: 0.7;
	-ms-filter: alpha(opacity="70");
	filter: alpha(opacity="70");
}
.specialContents a:hover .scLabel {
	-ms-filter: alpha(opacity="70");
	filter: alpha(opacity="70");
}
.specialContents a:hover .scCount {
	-ms-filter: alpha(opacity="70");
	filter: alpha(opacity="70");
}
.pcImg img {
	width: 177px;
	height: 110px;
	border-radius: 3px 3px 0 0;
}
.pcTxtGroup {
	padding: 7px;
}
.pcTitle {
	font-weight: bold;
	color: #B02A5A;
}
.pcCount {
	color: #666666;
	font-size: 10px;
}
.pcTitleWrap + .pcCatch {
	margin-top: 5px;
}
.pcCatch {
	font-size: 10px;
	font-weight: bold;
	color: #999999;
}
.scImg img {
	width: 177px;
	height: 110px;
	border-radius: 3px 3px 0 0;
}
.scTxtGroup {
	display: block;
	padding: 10px 10px 5px;
}
.scTitle {
	color: #4C4C80;
	display: block;
	font-weight: bold;
}
.scCount {
	bottom: 5px;
	color: #666666;
	display: block;
	font-size: 10px;
	left: 7px;
	position: absolute;
}
.scLabel {
	display: inline-block;
	position: absolute;
	bottom: 5px;
	right: 5px;
	z-index: 0;
	padding: 2px 4px;
	color: #FFFFFF;
	font-size: 10px;
	font-weight: bold;
}
.scLabel.menu,
.scLabel.service,
.scLabel.grade,
.scLabel.stylist,
.scLabel.hairstyl,
.scLabel.pickup{ 
	background-color: #F38696;
}
.scLabel.haircare { background-color: #59A0DC; }
.scLabel.counseling { background-color: #A85F2A; }
.scLabel.mood { background-color: #35BBE7; }
.scLabel.feature { background-color: #85C53A; }
.scLabel.price { background-color: #FC4F69; }
.scLabel.hairset { background-color: #BC18AB; }
.scLabel.mens { background-color: #3C6FD5; }
/* /FEATURE */

/* RANKING */
.saRankingList a {
	text-decoration: none;
}
.saRankingList a:hover .rankingListInnerAnchor {
	text-decoration: underline;
}
.saRankingList > li {
	padding-top: 10px;
	padding-bottom: 5px;
}
/* /RANKING */

.ttlfreewordSearch:before {
	background-position: -170px -6127px;
	height: 30px;
	margin-right: 10px;
	width: 30px;
}
.btnSearchOtherAreaStation {
	color: #EC6184 !important;
	font-size: 13px;
	padding: 5px;
}
.btnSearchOtherAreaStation:before {
	height: 22px;
	margin-right: 5px;
	width: 22px;
}
.btnSearchOtherAreaStation:before {
	background-position: -182px -6293px;
}
.lookRankingTop20 {
	background-color: #FBFAF5;
	font-size: 11px;
	padding: 10px;
	text-align: center;
	margin-top: 5px;
}

/* SAMATOP_おすすめのサロン */
.recommendSalonList {
	display: flex;
	margin-top: 15px;
}
.recommendSalonList > li {
	border: solid #CCCCCC;
	border-radius: 4px;
	border-width: 1px 1px 3px 1px;
	padding: 10px;
	position: relative;
	width: calc((100% * 1 / 3) - (15px * 2));
	word-wrap: break-word;
}
.recommendSalonList > li + li {
	margin-left: 12px;
}
.recommendSalonName {
	color: #4C4C80;
	font-size: 11px;
	font-weight: bold;
	min-height: calc(2em * 1.5);
}
.recommendSalonName::before {
	background-color: #FFFFFF;
	border: 1px solid #AAAAAA;
	border-radius: 3px;
	color: #AAAAAA;
	content: "PR";
	display: inline-block;
	float: left;
	font-size: 10px;
	font-weight: bold;
	line-height: 1;
	margin-right: 10px;
	padding: 1px 2px;
}
.recommendSalonName > a {
	color: inherit;
}
.recommendSalonInfo {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
}
.recommendSalonInfoLeftBlock {
	width: 113px;
}
.recommendSalonInfoRightBlock {
	position: relative;
	width: 105px;
}
.recommendSalonInfoRightBlock > a {
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
.recommendSalonInfoRightBlock:hover {
	text-decoration: underline;
}
.recommendSalonImg {
	border: 1px solid #CCCCCC;
}
.recommendSalonImg > a {
	display: block;
}
.recommendSalonImg > a:hover {
	opacity: 0.7;
}
.recommendSalonImg img {
	width: 100%;
}
.recommendSalonAccess {
	color: #988989;
	font-size: 10px;
	margin-top: 8px;
	max-height: calc(2em * 1.5);
	overflow: hidden;
	padding-left: 15px;
	position: relative;
}
.recommendSalonAccess::before,
.recommendSalonAccess::after {
	background-color: #FFFFFF;
	position: absolute;
}
.recommendSalonAccess::before {
	content: "\2026";
	right: 0;
	top: calc(1em * 1.5);
}
.recommendSalonAccess::after {
	content: "";
	height: 100%;
	width: 100%;
}
.recommendSalonAccess > span::before {
	background-image: url(/CSP/img/bt/icons/icn_train.png?switch=2025062510);
	content: "";
	display: block;
	height: 12px;
	left: 0;
	position: absolute;
	top: 0;
	width: 9px;
}
.recommendSalonCouponName {
	color: #666666;
}
.recommendSalonCouponPrice {
	color: #CC4466;
	font-size: 15px;
	font-weight: bold;
	margin-top: 8px;
	text-align: right;
}