@charset "utf-8";

/************************************************************
 * 初期化
 ************************************************************/
body, form, img, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, table,td ,select {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust:none;
}
ul, ol	{ list-style: none; }
img		{ border: none; vertical-align: bottom; }
th		{ text-align: left; }

iframe	{ vertical-align: middle; }

/* clearfix */
.cFix:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
}
.cFix	{ zoom: 1; }

/************************************************************
 * Anchor Style
 ************************************************************/

a				{ text-decoration: none; }
a:link			{ color: #4C4C80; }
a:visited		{ color: #896958; }
a:hover,
a:active		{ color: #7878CC; text-decoration: underline; }

a .imgFrame {
	-webkit-transition: border .2s linear;
	-moz-transition: border .2s linear;
	-ms-transition: border .2s linear;
	-o-transition: border .2s linear;
	transition: border .2s linear;
}
a:hover .imgFrame {
	border: 1px solid #999999;
	-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .05);
}

/************************************************************
 * Font Style
 ************************************************************/

body, input, select, table, td, li ,a {
	font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS P Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', arial, sans-serif, verdana, Helvetica;
}
body, input, select, table {
	color: #333333;
	font-size: 12px;
	line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 12px;
}

/************************************************************
 * CSS Sprite - Common（c.png）
 ************************************************************/

.cS		{ background-image: url(/CSP/img/hc/sprites/c.png?switch=2025062510); background-repeat: no-repeat; border: 0; display: block; }

.regist							{ background-position: -393px -480px; display: block; width:146px; height:24px; margin: 0 auto; }
.regist:hover						{ background-position: -393px -504px; }
.login								{ background-position: -260px -480px; display: block; width:69px; height:24px; }
.login:hover						{ background-position: -260px -504px; }
.salonReserve						{ background-position: -339px -480px; display: block; width: 42px; height: 16px; }
.salonReserve:hover				{ background-position: -339px -496px; }

.viewDetailReservation			{ background-position: -300px -560px; background-repeat: no-repeat; display: block; width: 115px; height: 24px; }
.viewDetailReservation:hover	{ background-position: -300px -584px; }

/************************************************************
 * CSS Sprite - Buttons（b.png）
 ************************************************************/

.bS		{  background: 0; border: 0; background-image: url(/CSP/img/hc/sprites/b.png?switch=2025062510); background-repeat: no-repeat; display: block; }
#myMenu .bS		{  background: 0; border: 0; background-image: url(/CSP/img/hc/sprites/b.png?switch=2025062510); background-repeat: no-repeat; display: block; }

.btnSearch			{ background-position: 0 0; width: 119px; height: 28px; }
.btnSearch:hover	{ background-position: 0 -28px; }

/************************************************************
 * CSS Sprite - Icons（i.png）
 ************************************************************/

.iS		{ background-image: url(/CSP/img/hc/sprites/i.png?switch=2025062510); background-repeat: no-repeat; }
#myMenu .iS { background-image: url(/CSP/img/bt/sprites/i.png?switch=2025062510); background-repeat: no-repeat; }

.newS		{ background-position: -178px -1540px; width: 22px; height: 11px; margin-left: 5px; }
.arrowR	{ background-position: -196px -461px; display: inline-block; padding-left: 8px; }
.arrowROff	{ background-position: -196px -460px; display: inline-block; padding-left: 8px; }

/************************************************************
 * スプライト画像 - 横長画像（y.png）
 ************************************************************/

.yS		{ background-image: url(/CSP/img/hc/sprites/y.png?switch=2025062510); }

/************************************************************
 * ID Style
 ************************************************************/

/* ヘッダー */
#headerWrapper {
	border-bottom: 2px solid #998A8A;
	border-top:    16px solid #BFB4AB;
	zoom: 1;
}
#header {
	width: 1000px;
	margin: 0 auto -2px;
	position: relative;
	border-bottom: 2px solid #998A8A;
}
#headSummary {
	font-size: 10px;
	font-weight: normal;
	color: #FFFFFF;
	padding-left: 18px;
	margin-top: -16px;
	position: absolute;
}
#logoNavi {
	height: 68px;
	position: relative;
	z-index: 0;
}
#logo {
	position: absolute;
 	top: 9px;
 	left: 12px;
	z-index: 0;
}

/* ラッパー */
#wrapper {
	width: 1000px;
	margin: 0 auto;
	position: relative;
}

/* プレコンテンツ */
#preContents {
	padding: 10px 20px 0;
	min-height: 40px;
	_height: 40px;
}
/* コンテンツ */
#contents {
	margin-top: 10px;
	padding: 0 20px;
	min-height: 300px;
	_height: 300px;
}
#mainContents {
	float: left;
	width: 748px;
}
#sideContents {
	float: right;
	width: 180px;
}
#middleSummary {
	color: #999999;
	font-size: 10px;
	position: absolute;
	right: 0;
	bottom: -1.5em;
}
#bottomSummary {
	color: #666666;
	text-align: right;
}

/* マイエリア */
#myMenu			{ background-position: -5430px 0; background-repeat: repeat-y; }
#myMenuHead		{ background-position: -5070px top; background-repeat: no-repeat; }
#myMenuBottom {
	background-position: -5250px bottom;
	background-repeat: no-repeat;
	padding: 4px 4px 7px;
	zoom: 1;
}
/************************************************************
 * Class Style
 ************************************************************/

.user {
	position: absolute;
	top: 0;
	right: 20px;
	line-height: 33px;
}
.user .arrowR {
	display: inline-block;
	background-position: -196px -234px;
}
.move {
	position: absolute;
	bottom: -2px;
	_bottom: -3px;
	right: 20px;
}
.myPageTop	{
	background-position: 0 0;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
.myPageTop:hover{
	background-position: 0 -33px;
}
.myPageTopOn	{
	background-position: 0 -66px;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
.myPagePoint	{
	background-position: -200px 0;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
.myPagePoint:hover{
	background-position: -200px -33px;
}
.myPagePointOn	{
	background-position: -200px -66px;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
.myPageSalon	{
	background-position: -400px 0;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
.myPageSalon:hover{
	background-position: -400px -33px;
}
.myPageSalonOn	{
	background-position: -400px -66px;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
.myPageStylist	{
	background-position: -600px 0;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
.myPageStylist:hover{
	background-position: -600px -33px;
}
.myPageStylistOn	{
	background-position: -600px -66px;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
.myPageStyle	{
	background-position: -800px 0;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
.myPageStyle:hover{
	background-position: -800px -33px;
}
.myPageStyleOn	{
	background-position: -800px -66px;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
.myPageNewStyle	{
	background-position: -1000px 0;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
.myPageNewStyle:hover{
	background-position: -1000px -33px;
}
.myPageNewStyleOn	{
	background-position: -1000px -66px;
	display: block;
	width:171px;
	height: 33px;
	text-indent: -9999px;
	overflow:hidden;
}
/* プレコンテンツ */
#postContents {
	margin-top: 30px;
}

/* フッター */
#footer {
	height: 60px;
	border-top: 1px solid #DDDDDD;
	padding-top: 10px;
	margin-top: 20px;
	position: relative;
}
#copyright {
	position: absolute;
	top: 10px;
	left: 30px;
}
#footerLinks {
	font-size: 10px;
	overflow: hidden;
	position: absolute;
	top: 20px;
	right: 30px;
}
#footerLinks li {
	float: left;
	border-right: 1px solid #DDD;
	padding-right: 15px;
	*padding-right: 16px;
	margin-left: 15px;
	margin-right: -1px;
}
#copyrightnew {
	float:left;
	margin : 0 10px ;
}
#copyrightnew p a {
	font-size: 10px;
	font-weight: bold;
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',MS PGothic,sans-serif;
	line-height: 2;
	color: #435B67 !important;
}

.myMenuTitleTop	{ margin:5px 5px 0; }
.mySalonList li	{ padding:5px 0; }
.mysalonbox ul {
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	padding:5px 10px;
}
.myFeaturedSalonShop	{ background-position: -5430px bottom; background-repeat: repeat-y; }
.myFeaturedSalonShopBottom {
	background-position: -5250px bottom;
	background-repeat: no-repeat;
	zoom: 1;
}
.myFeaturedSalonShop ul {
	padding:0 4px 10px;
}
.myFeaturedSalonShop li {
	margin-top:5px;
	*margin-top:-12px;
}
.myFeaturedSalonShop li.SalonfirstMG {
	margin-top:2px !important;
	*margin-top:-16px !important;
}
.mySalonShopbody {
	background-position: -5954px 0;
	background-repeat: repeat-y;
}
.mySalonShopbodyHead { background-position: -5610px top; background-repeat: no-repeat; }
.mySalonShopbodyBottom {
	background-position: -5782px bottom;
	background-repeat: no-repeat;
	overflow: hidden;
	padding: 7px 8px;
	position: relative;
	z-index: 10;
}

li.mySalonListBox a {
	text-decoration: none;
	cursor: pointer;
}
.mySalonListBox a:link p.salonShop,
.mySalonListBox a:visited p.salonShop {
	color: #0077E6;
}
.mySalonListBox a:hover p.salonShop,
.mySalonListBox a:active p.salonShop {
	color: #0077E6; text-decoration: none  !important;
}
a:hover .mySalonShopbody {
	background-position: -7240px 0;
	background-repeat: repeat-y;
}
a:hover .mySalonShopbodyHead { background-position: -7412px top; background-repeat: no-repeat; }
a:hover .mySalonShopbodyBottom {
	background-position: -7584px bottom;
	background-repeat: no-repeat;
	overflow: hidden;
	padding: 7px 8px;
	position: relative;
	z-index: 10;
}

/* メインコンテンツフッター */
.mainContentsFooter {
	margin-top: 20px;
}

/* メインコンテンツフッターリンク */
.mainContentsFooterLinks {
	margin-top: 20px;
}
.mainContentsFooterLinks li {
	display: inline;
	font-size: 10px;
	color: #CCCCCC;
}
.mainContentsFooterLinks2 {
	margin-top: 5px;
}
.mainContentsFooterLinks2 li {
	display: inline;
	font-size: 10px;
	color: #CCCCCC;
}
/* メインコンテンツフッターバナー */
.mainContentsFooterBanners {
	margin-top: 20px;
}
.mainContentsFooterBanners li {
	float: left;
	margin-top: 10px;
	margin-right: 10px;
}

/* マイエリア */
.myMenuTop {
	background-position: -900px -20px;
}
.myMenuTopTitle {
	height: 29px;
	margin: 0 4px;
}
.txtMypage				{ background-position: -1100px -20px; width: 73px; height: 13px; }
.myMenuTopBody {
	padding: 0 5px;
	text-align: center;
}
.myMenuTitle {
	margin: 10px 5px 0;
}
.txtPoint				{ background-position: -1100px -20px; background-repeat: no-repeat; width: 49px; height: 13px; }
.txtLastReservedSalon	{ background-position: -1100px -40px; background-repeat: no-repeat; width: 116px; height: 13px; }
.txtLastViewedSalon		{ background-position: -1100px -60px; background-repeat: no-repeat; width: 90px; height: 13px; }
.txtMyMenu				{ background-position: -1100px -80px; background-repeat: no-repeat; width: 77px; height: 12px; }
.txtInformation			{ background-position: -1100px -100px; background-repeat: no-repeat; width: 49px; height: 13px; }
.txtMySalon				{ background-position: -1100px -120px; background-repeat: no-repeat; width: 70px; height: 12px; }
.txtMyStyle				{ background-position: -1100px -140px; background-repeat: no-repeat; width: 79px; height: 12px; }
.txtMyStylist			{ background-position: -1100px -160px; background-repeat: no-repeat; width: 104px; height: 12px; }


.myMenuBodyUnlogined {
	background-position: -7240px 0;
	background-repeat: repeat-y;
	margin-top: 10px;
}
.myMenuBodyHeadUnlogined	{ background-position: -7412px top; background-repeat: no-repeat; }
.myMenuBodyBottomUnlogined	{ background-position: -7584px bottom; background-repeat: no-repeat; padding: 7px 8px; overflow: hidden; position: relative; z-index: 10; zoom:1; }
.myMenuBodyUnlogined .arrowR {
	background-position: -196px -3506px !important;
}

.myMenuBody {
	background-position: -5954px 0;
	background-repeat: repeat-y;
/*	margin-top: 5px;*/
	margin-top: 10px;
}
.myMenuBodyHead			{ background-position: -5610px top; background-repeat: no-repeat; }
.myMenuBodyBottom		{ background-position: -5782px bottom; background-repeat: no-repeat; padding: 7px 8px; overflow: hidden; position: relative; z-index: 10; zoom:1; }
.myMenuMainBox {
	background-position: -5782px bottom;
	background-repeat: no-repeat;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 10px;
	overflow: hidden;
	position: relative;
	z-index: 10;
	zoom:1;
}

.myMenuList {
	margin-top: -13px;
	zoom:1;
}
.myMenuListCassette {
	padding-top: 5px;
	margin-top: 5px;
	border-top: 1px dotted #999999;
	position: relative;
	zoom: 1;
	z-index: 0;
}

.myMenuItems {
	margin-top: -10px;
	zoom: 1;
}

.myMenuItemsCassette {
	padding-bottom: 10px;
	position: relative;
	zoom: 1;
	z-index: 0;
}

.myMenuListBottom {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 2px solid #D9D9D9;
}

/* プライバシーマーク */
.privacyMarkCaption {
	width: 105px;
	font-size: 10px;
}

/* フォーム系 */
.tfF {
	border-top: 1px solid #8E8E8E;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #8E8E8E;
	line-height: 1;
	padding: 2px 1px;
}
.tfF_FW {
	border-top: 1px solid #8E8E8E;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #8E8E8E;
	line-height: 1;
	padding: 4px 2px;
}
.tfNF {
	border-top: 1px solid #8E8E8E;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #8E8E8E;
	line-height: 1;
	height: 13px;
	padding-top: 2px;
	*margin-top: -1px;
}
.taF {
	border-top: 1px solid #8E8E8E;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #8E8E8E;
}
.pdF {
	border-top: 1px solid #8E8E8E;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #8E8E8E;
}
.cbF {
	*width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	margin: 0 5px 0 5px;
	*margin: 0 2px 0 3px;
	padding: 0;
}
.sbmF {
	cursor: pointer;
}
/* ページトップリンク */
.pageTopLink {
	margin-top: 20px;
	text-align: right;
}

/* フッターアイコン */
.inService		{ background: url("/CSP/img/hc/icons_buttons/hed_service.gif?switch=2025062510") no-repeat; display: block; width:140px; height:22px; }
.recruitSite	{ background: url("/CSP/img/hc/icons_buttons/hed_recruitsite.gif?switch=2025062510") no-repeat; display: block; width:114px; height:22px; }

/* 表スキン */
.skinTbl1Wrapper {
	border: 1px solid #DED9D6;
}
.skinTbl1 {
	border-collapse: collapse;
	border: 1px solid #FFFFFF;
	background-color: #FFFFFF;
}
.skinTbl1 th {
	background-color: #E5E1DD;
	color: #6E6E6E;
	font-weight: bold;
}
/* 表余白 */
.pCell1 th {
	padding: 5px 0;
}
.pCell1 td {
	padding: 5px 3px;
}

/* 表敬線 */
.bdTblSprt {
	border-top: 1px dotted #D5D5D5;
	font-size: 0;
	height: 0;
}

/* 写真スキン */
.imgFrame {
	border: 1px solid #EEEEEE;
	padding: 1px;
}

/* タブナビゲーション */
.tabRanking a {
	display: block;
	height: 30px;
	background-image: url(/CSP/img/hc/tab/tab_ranking.png?switch=2025062510);
	background-repeat: no-repeat;
}
.tabRankingAll					{ background-position: 0 0; width: 82px;}
.tabRankingAll:hover				{ background-position: 0 -30px; }
.current .tabRankingAll			{ background-position: 0 -30px; }
.tabRankingMedium					{ background-position: -100px 0; width: 80px; }
.tabRankingMedium:hover			{ background-position: -100px -30px; }
.current .tabRankingMedium		{ background-position: -100px -30px; }
.tabRankingSemiLong				{ background-position: -200px 0; width: 80px; }
.tabRankingSemiLong:hover		{ background-position: -200px -30px; }
.current .tabRankingSemiLong	{ background-position: -200px -30px; }
.tabRankingLong					{ background-position: -300px 0; width: 80px; }
.tabRankingLong:hover			{ background-position: -300px -30px; }
.current .tabRankingLong			{ background-position: -300px -30px; }
.tabRankingShort					{ background-position: -400px 0; width: 80px; }
.tabRankingShort:hover			{ background-position: -400px -30px; }
.current .tabRankingShort		{ background-position: -400px -30px; }
.tabRankingVeryShort				{ background-position: -500px 0; width: 80px; }
.tabRankingVeryShort:hover		{ background-position: -500px -30px; }
.current .tabRankingVeryShort	{ background-position: -500px -30px; }
.tabRankingHairSet				{ background-position: -600px 0; width: 80px; }
.tabRankingHairSet:hover			{ background-position: -600px -30px; }
.current .tabRankingHairSet		{ background-position: -600px -30px; }
.tabRankingMrs					{ background-position: -700px 0; width: 80px; }
.tabRankingMrs:hover				{ background-position: -700px -30px; }
.current .tabRankingMrs			{ background-position: -700px -30px; }
.tabRankingMens					{ background-position: -800px 0; width: 82px; }
.tabRankingMens:hover			{ background-position: -800px -30px; }
.current .tabRankingMens			{ background-position: -800px -30px; }

.tabBody {
	padding: 20px 10px;
	background-color: #F3F3F3;
	zoom: 1;
}

/* 王冠アイコン */
.icnCrown1 {
	padding-top: 6px;
	padding-left: 34px;
	background: url(/CSP/img/hc/icons/icon_crown1.png?switch=2025062510) no-repeat 0 0;
}
.icnCrown2 {
	padding-top: 6px;
	padding-left: 34px;
	background: url(/CSP/img/hc/icons/icon_crown2.png?switch=2025062510) no-repeat 0 0;
}
.icnCrown3 {
	padding-top: 6px;
	padding-left: 34px;
	background: url(/CSP/img/hc/icons/icon_crown3.png?switch=2025062510) no-repeat 0 0;
}
.icnCrownOther {
	padding-top: 6px;
	padding-left: 28px;
	background: url(/CSP/img/hc/icons/icon_crown_other.png?switch=2025062510) no-repeat 0 0;
}
/* ランキング */
.rankingList a {
	display: block;
	text-decoration: none !important;
}
.rankingList a .rankingListInnerAnchor {
	text-decoration: none !important;
}
.rankingList a:hover .rankingListInnerAnchor {
	text-decoration: underline !important;
}
.rankingListHeading {
	margin-bottom: 4px;
}
.rankingListStylist,
.rankingListShop {
	color: #666666;
	font-size: 10px;
}
.rankingListWrapper	{
	position: relative;
	overflow:  hidden;
	zoom: 1;
}

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

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

/* コンテンツヘッダー */
.hcHeader {
	padding: 10px 12px 8px;
	background: url(/CSP/img/hc/repeat/bg_contents_heading.png?switch=2025062510) repeat 0 0;
	margin-bottom: 0;
}

/* コンテンツヘッダー TOP用 */
.hcHeaderTopPage {
	height: 62px;
}

/* 見出しスキン */
.hcHeading {
	position: relative;
	top: 7px;
	left: 2px;
	width: 216px;
	height: 26px;
	background: url(/CSP/img/hc/text/text_hair_catalog.png?switch=2025062510) no-repeat 0 0;
}
.hcHeadingCaption {
	font-size: 10px;
	color: #666666;
	font-weight: normal;
}
.skinHeadingWrapper1 {
	height: 18px;
	border-bottom: 1px dotted #959595;
	background: url(/CSP/img/hc/icons/icon_heading.png?switch=2025062510) no-repeat 2px 0;
	padding-left: 14px;
	padding-top: 11px;
}
.skinHeading1 {
	line-height: 1;
}
.skinHeadingWrapper2 {
	border-bottom: 1px dotted #D5D5D5;
	height: 23px;
}
.skinHeadingWrapper2 > h3 {
	color: #665555;
}
.skinHeading2 {
	font-size: 10px;
	font-weight: normal;
	color: #666666;
	vertical-align: 1px;
}

/* 顔型 */
.faceTypeCircle				{ background-position: right -1640px; height: 18px; padding-right:20px; }
.faceTypeEgg					{ background-position: right -1660px; height: 18px; padding-right:20px; }
.faceTypeSquare				{ background-position: right -1680px; height: 18px; padding-right:20px; }
.faceTypeReverseTriangle		{ background-position: right -1700px; height: 18px; padding-right:20px; }
.faceTypeBase					{ background-position: right -1720px; height: 18px; padding-right:20px; }

/************************************************************
 * General Class
 ************************************************************/

/* WIDTH */
.wFull	{ width: 100%; }
.wHalf	{ width: 49.9%; _width: 49.9%; }
.w3Clm	{ width: 33.33333%; }
.w4Clm	{ width: 25%; }
.w80	{ width: 80px; }
.w81	{ width: 81px; }
.w85	{ width: 85px; }
.w89	{ width: 89px; }
.w94	{ width: 94px; }
.w98	{ width: 98px; }
.w100	{ width: 100px; }
.w100m	{ min-width: 100px; _width: 100px; }
.w106	{ width: 106px; }
.w107	{ width: 107px; }
.w118	{ width: 118px; }
.w130	{ width: 130px; }
.w137	{ width: 137px; }
.w141	{ width: 141px; }
.w150	{ width: 150px; }
.w159	{ width: 159px; }
.w160	{ width: 160px; }
.w172	{ width: 172px; }
.w183	{ width: 183px; }
.w185	{ width: 185px; }
.w188	{ width: 188px; }
.w191	{ width: 191px; }
.w204	{ width: 204px; }
.w250	{ width: 250px; }
.w260	{ width: 260px; }
.w273	{ width: 273px; }
.w281	{ width: 281px; }
.w300	{ width: 300px; }
.w312	{ width: 312px; }
.w343	{ width: 343px; }
.w358	{ width: 358px; }
.w360	{ width: 360px; }
.w371	{ width: 371px; }
.w382	{ width: 382px; }
.w383	{ width: 383px; }
.w385	{ width: 385px; }
.w421	{ width: 421px; }
.w454	{ width: 454px; }
.w550	{ width: 550px; }
.w557	{ width: 557px; }
.w558	{ width: 558px; }
.w748	{ width: 748px; }
.w749	{ width: 749px; }

/* HEIGHT */
.h73	{ height: 73px; }

/* LINE-HEIGHT */
.lhDe	{ line-height: 1; }
.lh13	{ line-height: 13px; }
.lh14	{ line-height: 14px; }
.lh15	{ line-height: 15px; }
.lh18	{ line-height: 18px; }
.lh19	{ line-height: 19px; }
.lh23	{ line-height: 23px; }
.lh28	{ line-height: 28px; }
.lh30	{ line-height: 30px; }

/* MARGIN */
.mTN1	{ margin-top: -1px; }
.mTN5	{ margin-top: -5px; }
.mTN10	{ margin-top: -10px; }
.mTN20	{ margin-top: -20px; }
.mT2	{ margin-top: 2px; }
.mT3	{ margin-top: 3px; }
.mT5	{ margin-top: 5px; }
.mT6	{ margin-top: 6px; }
.mT7	{ margin-top: 7px; }
.mT8	{ margin-top: 8px; }
.mT10	{ margin-top: 10px; }
.mT11	{ margin-top: 11px; }
.mT13	{ margin-top: 13px; }
.mT15	{ margin-top: 15px; }
.mT20	{ margin-top: 20px; }
.mT25	{ margin-top: 25px; }
.mT30	{ margin-top: 30px; }
.mT50	{ margin-top: 50px; }

.mR1	{ margin-right: 1px; }
.mR2	{ margin-right: 2px; }
.mR3	{ margin-right: 3px; }
.mR5	{ margin-right: 5px; }
.mR9	{ margin-right: 9px; }
.mR10	{ margin-right: 10px; }
.mR12	{ margin-right: 12px; }
.mR15	{ margin-right: 15px; }
.mR20	{ margin-right: 20px; }
.mR30	{ margin-right: 30px; }
.mR300	{ margin-right: 300px; }
.mRN10	{ margin-right: 10px; }

.mLN4	{ margin-left: -4px; }
.mL3	{ margin-left: 3px; }
.mL5	{ margin-left: 5px; }
.mL10	{ margin-left: 10px; }
.mL15	{ margin-left: 15px; }
.mL20	{ margin-left: 20px; }
.mL25	{ margin-left: 25px; }
.mL30	{ margin-left: 30px; }
.mL40	{ margin-left: 40px; }
.mL90	{ margin-left: 90px; }

.mB2	{ margin-bottom: 2px; }
.mB5	{ margin-bottom: 5px; }
.mBN6	{ margin-bottom: -6px; }
.mB10	{ margin-bottom: 10px; }
.mB15	{ margin-bottom: 15px; }
.mB20	{ margin-bottom: 20px; }
.mB30	{ margin-bottom: 30px; }

.mHA	{ margin-left: auto; margin-right: auto; }

/* PADDING */
.pT2	{ padding-top: 2px; }
.pT3	{ padding-top: 3px; }
.pT5	{ padding-top: 5px; }
.pT8	{ padding-top: 8px; }
.pT10	{ padding-top: 10px; }
.pT15	{ padding-top: 15px; }
.pT20	{ padding-top: 20px; }
.pT30	{ padding-top: 30px; }

.pR2	{ padding-right: 2px; }
.pR5	{ padding-right: 5px; }
.pR10	{ padding-right: 10px; }
.pR15	{ padding-right: 15px; }
.pR20	{ padding-right: 20px; }
.pR30	{ padding-right: 30px; }


.pB5	{ padding-bottom: 5px; }
.pB10	{ padding-bottom: 10px; }
.pB15	{ padding-bottom: 15px; }
.pB20	{ padding-bottom: 20px; }
.pB30	{ padding-bottom: 30px; }
.pB40	{ padding-bottom: 40px; }

.pL2	{ padding-left: 2px; }
.pL5	{ padding-left: 5px; }
.pL10	{ padding-left: 10px; }
.pL15	{ padding-left: 15px; }
.pL20	{ padding-left: 20px; }
.pL30	{ padding-left: 30px; }

.pV1	{ padding-top: 1px !important; padding-bottom: 1px !important;  }
.pV2	{ padding-top: 2px; padding-bottom: 2px; }
.pV5	{ padding-top: 5px; padding-bottom: 5px; }
.pV8	{ padding-top: 8px; padding-bottom: 8px; }
.pV10	{ padding-top: 10px; padding-bottom: 10px; }
.pV15	{ padding-top: 15px; padding-bottom: 15px; }
.pV20	{ padding-top: 20px; padding-bottom: 20px; }

.pH0	{ padding-left: 0 !important; padding-right: 0 !important;  }
.pH5	{ padding-left: 5px; padding-right: 5px; }
.pH10	{ padding-left: 10px; padding-right: 10px; }
.pH15	{ padding-left: 15px; padding-right: 15px; }
.pH20	{ padding-left: 20px; padding-right: 20px; }

.p3		{ padding: 3px; }
.p5		{ padding: 5px; }
.p8		{ padding: 8px; }
.p10	{ padding: 10px; }
.p15	{ padding: 15px; }
.p20	{ padding: 20px; }
.p30	{ padding: 30px; }

.pClear	{ padding: 0 !important; }

/* DISPLAY */
.dn		{ display: none !important; }
.db		{ display: block; }
.di		{ display: inline; }
.dib	{ display: inline-block !important; }
.dibBL	{ display: inline-block !important; *display: inline !important; zoom: 1; }
.offL	{ text-indent: -9999px; overflow: hidden; }
.fgClear{ *padding-top: 9999px; text-indent: -9999px; *text-indent: 0; overflow: hidden; }
.oh		{ overflow: hidden; }
.nowrap	{ white-space: nowrap; }

.zi0	{ z-index: 0; }
.zi1	{ z-index: 1; }
.zi2	{ z-index: 2; }
.zi3	{ z-index: 3; }

.zoom1	{ zoom: 1; }
.wwbw	{ word-wrap: break-word; }
.wbba	{ word-break: break-all; }

/* POSITION */
.fl		{ float: left; }
.fr		{ float: right; }
.cb		{ clear: both; }

.taR	{ text-align: right !important; }
.taC	{ text-align: center !important; }
.taL	{ text-align: left !important; }

.vaT	{ vertical-align: top; }
.vaM	{ vertical-align: middle; }
.vaB	{ vertical-align: bottom; }
.vaBL { vertical-align: baseline; }

.pr			{ position: relative; zoom: 1; }
.pa			{ position: absolute; }
.top0		{ top: 0; }
.top5		{ top: 5px; }
.top8		{ top: 8px; }
.top10		{ top: 10px; }
.top15		{ top: 15px; }
.top20		{ top: 20px; }
.topN8		{ top: -8px; }
.topN20		{ top: -20px; }
.topHalf	{ top: 50%; margin-top: -8px; }
.topHalfH24	{ top: 50%; margin-top: -12px; }
.left0		{ left: 0; }
.left5		{ left: 5px; }
.left10		{ left: 10px; }
.left15		{ left: 15px; }
.left20		{ left: 20px; }
.left210	{ left: 210px; }
.right0		{ right: 0; }
.right5		{ right: 5px; }
.right8		{ right: 8px; }
.right10	{ right: 10px; }
.right15	{ right: 15px; }
.right20	{ right: 20px; }
.bottom0	{ bottom: 0; }
.bottom0	{ bottom: 0; }
.bottom2	{ bottom: 2px; }
.bottom5	{ bottom: 5px; }
.bottom10	{ bottom: 10px; }
.bottom15	{ bottom: 15px; }
.bottom20	{ bottom: 20px; }

/* FOREGROUNG */
.fgRed	{ color: #FF0000; }
.fgDRed		{ color: #DD0000; }
.fgWRed	{ color: #A5184B; }
.fgPink	{ color: #CC4466; }
.fgPink2	{ color: #EC98AB; }
.fgBPink	{ color: #CC0066; }
.fgLPink	{ color: #FFBDBD; }
.fgGray		{ color: #666666; }
.fgLGray{ color: #999999; }
.fgLGray2	{ color: #7F7F7F; }
.fgLLGray{ color: #595959; }
.fgBlack{ color: #555555; }
.fgLLLGray	{ color: #CCCCCC; }
.fgDGray	{ color: #555555; }
.fgBrown	{ color: #553333; }
.fgRbrown	{ color: #632523; }
.fgLOrange	{ color: #E68855; }
.fgOrange	{ color: #E46C0A; }
.fgOrange2	{ color: #FF6600; }
.fgDOragne	{ color: #CC6633; }
.fgBlue		{ color: #0000FF; }
.fgOcher	{ color: #909000; }
.fgkhaki	{ color: #4A452A; }
.fgLkhaki	{ color: #91AC8A; }
.fgWhite{ color: #FFFFFF; }
.fgBlack	{ color: #000000; }
.fgPurple	{ color: #7030A0; }
.fgPurple2	{ color: #9966CC; }
.fgDBlue	{ color: #7D8888; }

.b		{ font-weight: bold !important; }
.n		{ font-weight: normal !important; }

.fs10	{ font-size: 10px; }
.fs11	{ font-size: 11px; }
.fs12	{ font-size: 12px; }
.fs14	{ font-size: 14px; }
.fs16	{ font-size: 16px; }
.fs18	{ font-size: 18px; }
.fs20	{ font-size: 20px; }
.fs22	{ font-size: 22px; }
.fs24	{ font-size: 24px; }

.ti10	{ text-indent: 10px; }
.ti20	{ text-indent: 20px; }

/* BACKGROUNG */
.bgLGray	{ background-color: #F2F2F2; }
.bgGray2	{ background-color: #D9D9D9; }
.bgLGray3	{ background-color: #EEECE1; }
.bgLGray4	{ background-color: #F8F8F8; }
.bgLGray5	{ background-color: #DDDDDD; }
.bgLLGray	{ background-color: #F5F3EF !important; }
.bgDGray	{ background-color: #A6A39B; }
.bgPink		{ background-color: #F5C3CC; }
.bgPink2	{ background-color: #F2DCDB; }
.bgPink3	{ background-color: #FFE6E6; }
.bgPink4	{ background-color: #E6B9B8; }
.bgPink5	{ background-color: #FFE2E8; }
.bgPink6	{ background-color: #FF6666; }
.bgLPink	{ background-color: #FFE2E8; }
.bgWhite	{ background-color: #FFFFFF; }
.bgBrown	{ background-color: #DDD9C3; }
.bgOrange	{ background-color: #FFCB9E; }
.bgOrange2	{ background-color: #FCF7DF; }
.bgBeige	{ background-color: #F6F3E3; }
.bgGreen	{ background-color: #E2EFDF; }
.bgDGreen	{ background-color: #91AC8A; }
.bgWRed	{ background-color: #AA3355; }
.bgLBlue	{ background-color: #D0E3E3; }

/* BORDER */
.sp {
	border-right: 1px solid #CCC;
	margin-right: 10px;
	padding-right: 10px;
}

.sp_l {
    border-left: 1px solid #CCC;
    margin-left: 10px;
    padding-left: 10px;
}

.bdWhiteL		{ border-left: 1px solid #FFFFFF; }
.bdGrayR2		{ border-right: 1px solid #A6A39B; }

.bdGray			{ border: 1px solid #DDDDDD; }
.bdGrayT		{ border-top: 1px solid #DDDDDD; }
.bdGrayR		{ border-right: 1px solid #DDDDDD; }
.bdGrayB		{ border-bottom: 1px dotted #DDDDDD; }
.bdGrayB2		{ border-bottom: 1px solid #DDDDDD; }
.bdGrayL		{ border-left: 1px solid #DDDDDD; }
.bdGrayL2		{ border-left: 1px solid #A6A39B; }

.bdGray2		{ border: 1px solid #A6A6A6; }
.bdGray3		{ border: 1px solid #7F7F7F; }
.bdGray4		{ border: 1px solid #D9D9D9; }
.bdGray5L		{ border-left: 1px solid #999999; }

.bdDotGrayT		{ border-top: 1px dotted #999999; }
.bdDotGrayB	{ border-bottom: 1px dotted #999999; }

.bdGrayR		{ border-right: 1px solid #DDDDDD; }

.bdWhite		{ border: 1px solid #FFFFFF; }
.bdWhiteL		{ border-left: 1px solid #FFFFFF; }

.bdPink		{ border: 1px solid #FF7799; }
.bdPinkB		{ border-bottom: 1px solid #FF7799; }
.bdPinkR		{ border-right: 1px solid #EC98AB; }
.bdPinkL		{ border-left: 1px solid #EC98AB; }

.bdDPink		{ border: 1px solid #E6BBBB; }
.bdDPinkB		{ border-bottom: 1px solid #E6BBBB; }

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

/* BORDER */
.bdPink3	{ border: 1px solid #E6BBBB; }
.bdDotT			{ border-top: 1px dotted #999999; }
.bdDotR			{ border-right: 1px dotted #999999; }
.bdDotB			{ border-bottom: 1px dotted #999999; }

.bdOrangeR		{ border-right:1px solid #FFCB9E; }
.bdOrangeB		{ border-bottom:1px solid #FFCB9E; }
.bdOrangeT		{ border-top:1px solid #FFCB9E; }
.bdOrange5		{ border:5px solid #FFCFA3; }

.bdGreenR		{ border-right:1px solid #91AC8A; }

.bdRedB			{ border-bottom: 2px solid #AA3355; }

.bdWRedB3		{ border-bottom:3px solid #AA3355; }

.bdPurpleB2 { border-bottom: 2px solid #663399; }
.bdBlue			{ border: 1px solid #B4C4C4; }

.hcHeadTtlWrap {
	align-items: center;
	background-color: #F5F3F1;
	display: flex;
	height: 36px;
	justify-content: space-between;
	padding: 0 15px;
}
.hcHeadTtl {
	color: #665555;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}
.ttlCaption {
	color: #6D6D6D;
	font-size: 10px;
}
.hcSubHeadTtl {
	color: #665555;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	padding: 5px 0 5px 14px;
	position: relative;
}
.hcSubHeadTtl::before {
	background-color: #BFB4AB;
	border-radius: 2px;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	top: 0;
	width: 4px;
}
.ladiesLength,
.mensLength {
	display: flex;
	flex-wrap: wrap;
}
.ladiesLength {
	width: 390px;
}
.mensLength {
	width: 290px;
}
.ladiesLength > li,
.mensLength > li {
	margin-right: 10px;
	margin-top: 15px;
}
.ladiesLength > li:nth-child(4n),
.mensLength > li:nth-child(3n) {
	margin-right: 0;
}
.ladiesLength > li > a,
.mensLength > li > a {
	align-items: center;
	border: 1px solid #E0E1E2;
	box-shadow: none;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 130px;
	text-decoration: none;
	transition: border 0.2s linear, box-shadow 0.2s linear;
}
.ladiesLength > li > a:hover,
.mensLength > li > a:hover {
	border: 1px solid #999999;
	box-shadow: 0 0 2px 0 rgb(0 0 0 / 5%);
}
.ladiesLength > li img,
.mensLength > li img {
	width: 88px;
}
.ladiesLength > li span,
.mensLength > li span {
	color: #333333;
	font-weight: bold;
	margin-top: 5px;
}

.hcRecommend,
.hcEditorialRecommend {
	display: flex;
	flex-wrap: wrap;
	margin-top: 5px;
}
.hcRecommend > li,
.hcEditorialRecommend > li {
	margin: 10px 2px 0 8px;
	width: 174px;
}
.hcRecommend > li a,
.hcEditorialRecommend > li a {
	border: 1px solid #EEEEEE;
	box-shadow: none;
	display: block;
	padding: 1px;
	transition: border 0.2s linear, box-shadow 0.2s linear;
}
.hcRecommend > li a:hover,
.hcEditorialRecommend > li a:hover {
	border: 1px solid #999999;
	box-shadow: 0 0 2px 0 rgb(0 0 0 / 5%);
	text-decoration: none;
}
.hcRecommend > li img,
.hcEditorialRecommend > li img {
	width: 170px;
}
.hcEditorialRecommendStyleWrap {
	box-sizing: border-box;
	display: block;
	height: 72px;
}
.hcRecommendStyle {
	align-items: center;
	color: #333333;
	display: flex;
	font-weight: bold;
	justify-content: space-between;
	margin: 0 5px;
}
.hcEditorialRecommendStyle {
	color: #333333;
	display: flex;
	font-weight: bold;
	justify-content: space-between;
	margin: 0 5px;
}
.hcRecommendStyle {
	height: 55px;
}
.hcRecommendStyle::after {
	background: url(/CSP/img/svg/pc/icon_arrow_right_grey.svg?switch=2025062510) no-repeat center / contain;
	content: "";
	display: block;
	height: 20px;
	margin-left: 5px;
	min-width: 20px;
}
.hcEditorialRecommendStyle::after {
	background: url(/CSP/img/svg/pc/icon_arrow_right_grey.svg?switch=2025062510) no-repeat center / contain;
	content: "";
	display: block;
	height: 72px;
	margin-left: 5px;
	min-width: 20px;
}
.hcEditorialRecommendStyleTxt {
	padding-top: 10px;
}
.hcEditorialRecommendStyleCaption {
	display: block;
	font-size: 10px;
	font-weight: normal;
	margin-top: 5px;
}
/* 検索ボタン */
.tabBody .conditionFormSearchBtn {
	height: 26px;
	width: 116px;
}
/* 顔型 */
.faceTypeInput {
	vertical-align: bottom;
}
.faceTypeInput + label::after {
	background: center / contain;
	content: "";
	display: inline-block;
	height: 20px;
	margin-left: 4px;
	vertical-align: bottom;
	width: 20px;
}
.faceTypeInput.round + label::after {
	background-image: url(/CSP/img/svg/pc/icon_face_round_off.svg?switch=2025062510);
}
.faceTypeInput.egg + label::after {
	background-image: url(/CSP/img/svg/pc/icon_face_egg_off.svg?switch=2025062510);
}
.faceTypeInput.square + label::after {
	background-image: url(/CSP/img/svg/pc/icon_face_square_off.svg?switch=2025062510);
}
.faceTypeInput.reverseTriangle + label::after {
	background-image: url(/CSP/img/svg/pc/icon_face_triangle_off.svg?switch=2025062510);
}
.faceTypeInput.base + label::after {
	background-image: url(/CSP/img/svg/pc/icon_face_base_off.svg?switch=2025062510);
}
.faceTypeInput.long + label::after {
	background-image: url(/CSP/img/svg/pc/icon_face_long_off.svg?switch=2025062510);
}
/* スタイル一覧 サムネイルスタイル */
.styleVideoTime {
	align-items: center;
	background-color: rgba(51,51,51,0.8);
	border-radius: 2px;
	bottom: 4px;
	color: #FFFFFF;
	display: flex;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	padding: 4px;
	position: absolute;
	right: 4px;
	width: auto !important;
}
.styleVideoTime::before {
	background: url(/CSP/img/svg/pc/icon_play_white.svg?switch=2025062510) center / contain;
	content: "";
	height: 12px;
	margin-right: 2px;
	width: 12px;
}