@charset "utf-8";

/* PAGETOP */
.pageTopImg {
	background: url(/CSP/img/common/btn_pageTop.png?switch=2025062510) no-repeat;
	bottom: 20px;
	display: none;
	height: 54px;
	text-indent: 100%;
	overflow: hidden;
	position: fixed;
	right: 20px;
	width: 54px;
	white-space: nowrap;
	z-index: 999;
}
/* ヘッダー */
.header {
	padding: 10px 10px 0;
}
.header:after {
	clear: both;
	content: "";
	display: block;
}
.logo {
	float: left;
}
.logo > a {
	display: block;
}
.promoWord {
	float: left;
	font-size: 10px;
	letter-spacing: 0.5px;
	margin: -2px 0 0 4px;
}
.genderTooltip {
	background: #FFFFFF;
	border: 1px solid #E0E1E2;
	border-radius: 8px;
	box-shadow: 0 0 8px 0 #CCCCCC;
	position: absolute;
	top: 57px;
	width: 134px;
	z-index: 100;
}
.genderTooltip::after {
	background-color: #FFFFFF;
	box-shadow: 0 0 8px 0 #CCCCCC;
	content: "";
	height: 8px;
	position: absolute;
	right: 24px;
	top: -4px;
	transform: rotate(45deg);
	width: 8px;
	z-index: -1;
}
.genderTooltipList {
	background-color: #FFFFFF;
	border-radius: 8px;
}
.genderTooltipItem {
	color: #837373 !important;
	display: block;
	font-weight: bold;
	line-height: 44px;
	padding-left: 36px;
	text-decoration: none;
}
.genderTooltipItem.isCr {
	color: #C43357 !important;
	position: relative;
}
.genderTooltipItem.isCr::after {
	background-image: url(/CSP/img/svg/sp/icon_check_bt.svg?switch=2025062510);
	background-size: contain;
	content: "";
	height: 20px;
	left: 12px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
}
.genderTooltipList > li + li {
	border-top: 1px solid #E0E1E2;
}
.logCond {
	float: right;
}
.logCond:after {
	clear: both;
	content: "";
	display: block;
}
.headerBtn {
	float: left;
}
.headerBtn + .headerBtn {
	margin-left: 8px;
}
.btnLogCond {
	background-color: #FFFFFF;
	border: 1px solid #B2B2B2;
	border-radius: 4px;
	box-sizing: border-box;
	display: block;
	height: 37px;
	letter-spacing: -0.5px;
	text-align: center;
	text-decoration: none;
	width: 60px;
}
.headerBookmarkBtn {
	letter-spacing: -1px;
}
.headerBtnIcn {
	background-size: contain;
	display: block;
	height: 20px;
	margin: 1px auto 0;
	width: 20px;
}
.headerBookmarkIcn {
	background-image: url(/CSP/img/svg/sp/icon_bookmark.svg?switch=2025062510);
}
.headerLoginIcn {
	background-image: url(/CSP/img/svg/sp/icon_login.svg?switch=2025062510);
}
.headerMypageIcn {
	background-image: url(/CSP/img/svg/sp/icon_mypage.svg?switch=2025062510);
}
.headerBtnTtl {
	color: #837373 !important;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.2;
}
@media screen and (max-width: 374px) {
	.headerMyBtn {
		width: 50px;
	}
	.headerBookmarkBtn > .headerBtnTtl,
	.headerMyBtn > .headerBtnTtl,
	.headerBtnTtl > span {
		display: inline-block;
		letter-spacing: -0.8px;
		transform: scale(0.9);
	}
	.genderNotSelect > .headerBtnTtl {
		padding-right: 0;
	}
	.genderNotSelect > .headerBtnTtl::after {
		right: 4px;
	}
	.genderNotSelect > .headerBtnTtl > span > span {
		padding-right: 8px;
	}
}
.countBadgeWrap {
	background: #DB0E41;
	border-radius: 12px;
	box-sizing: border-box;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 11px;
	height: 20px;
	line-height: 20px;
	min-width: 20px;
	padding-left: 5px;
	padding-right: 5px;
	position: absolute;
	right: 3px;
	text-align: center;
	top: 3px;
	z-index: 2;
}
.userInfoWrap {
	line-height: 24px;
	margin-top: 5px;
}
.userInfoWrap > a {
	box-sizing: border-box;
	color: #000000;
	display: block;
	padding: 0 20px 0 8px;
	position: relative;
	text-decoration: none;
}
.userInfoWrap > a:after {
	border: solid #666666;
	border-width: 0 3px 3px 0;
	content: "";
	display: block;
	height: 6px;
	line-height: 1;
	margin-top: -4.5px;
	position: absolute;
	right: 8px;
	top: 50%;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width: 6px;
}
.userInfoName {
	color: #CC4466;
	display: inline-block;
	max-width: 137px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	white-space: nowrap;
}
.userInfoGuest {
	color: #000000;
}
.userInfoName + span {
	color: #000000;
	display: inline-block;
	font-size: 11px;
	vertical-align: middle;
}
.userInfoPointWrap {
	float: right;
}
.userInfoPoint {
	color: #CC0000;
	display: inline-block;
	max-width: 62px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	white-space: nowrap;
}
.userInfoPoint + span {
	color: #000000;
	display: inline-block;
	font-size: 11px;
	vertical-align: middle;
}
.userInfoPointTxt {
	color: #000000;
	font-size: 8px;
}
.pontaInfoWrap {
	display: table;
	margin-bottom: 5px;
	line-height: 1;
	width: 100%;
}
.pontaInfoTxt {
	display: table-cell;
	padding-left: 8px;
	vertical-align: middle;
}
.pontaInfoTxt > img {
	vertical-align: baseline;
}
.pontaInfoImg {
	display: table-cell;
	padding-right: 5px;
	width: 65px;
}
.pointInfoWrap {
	padding: 4px 8px 1px;
}
.pointInfoBox {
	align-items: center;
	display: flex;
	justify-content: space-between;
}
.pointInfoTxt2line {
	display: none;
}
.pointInfoAlert {
	font-size: 10px;
	margin-top: 6px;
}
.pointInfoAlert > a {
	color: #DD0000 !important;
	text-decoration: none;
}
@media screen and (max-width: 374px) {
	.pointInfoTxt {
		display: none;
	}
	.pointInfoTxt2line {
		display: block;
	}
	.pointInfoImg {
		align-self: flex-end;
	}
}
.icnArrowL {
	padding-left: 10px;
	position: relative;
}
.icnArrowL:before {
	border-bottom: 4px solid transparent;
	border-left: 4px solid #988989;
	border-right: 4px solid transparent;
	border-top: 4px solid transparent;
	content: "";
	display: block;
	height: 0;
	left: 0;
	margin-top: -4px;
	position: absolute;
	top: 50%;
	width: 0;
}

/* 性別切り替え */
.genderLadiesIcn {
	background-image: url(/CSP/img/svg/sp/icon_gender_ladies.svg?switch=2025062510);
}
.genderMensIcn {
	background-image: url(/CSP/img/svg/sp/icon_gender_mens.svg?switch=2025062510);
}
.headerGenderTtl {
	padding-right: 8px;
	position: relative;
}
.headerGenderTtl::after {
	background: url(/CSP/img/svg/sp/icon_arrow_down.svg?switch=2025062510) center / contain;
	bottom: 2px;
	content: "";
	display: block;
	height: 8px;
	position: absolute;
	right: 0;
	width: 8px;
}
.genderNotSelect {
	color: #B2B2B2 !important;
	line-height: 1.2;
	padding-top: 5px;
}

/* 見出し */
.bdTitle {
	color: #665555;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	padding: 6px 0 6px 11px;
	position: relative;
}
.bdTitle:before {
	background-color: #988989;
	border-radius: 5px;
	bottom: 0;
	content: "";
	display: block;
	height: auto;
	left: 0;
	position: absolute;
	top: 0;
	width: 5px;
}
/* 美容 */
.bdTitleBt {
	color: #D36985;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	padding: 6px 0 6px 11px;
	position: relative;
}
.bdTitleBt:before {
	background-color: #D36985;
	border-radius: 5px;
	bottom: 0;
	content: "";
	display: block;
	height: auto;
	left: 0;
	position: absolute;
	top: 0;
	width: 5px;
}
/* キレイ */
.bdTitleKr {
	color: #8C61B8;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	padding: 6px 0 6px 11px;
	position: relative;
}
.bdTitleKr:before {
	background-color: #8C61B8;
	border-radius: 5px;
	bottom: 0;
	content: "";
	display: block;
	height: auto;
	left: 0;
	position: absolute;
	top: 0;
	width: 5px;
}

/* ラジオボタン・チェックボックス */
/* 標準タイプ */

.basicRadio,
.basicCheck {
	display: none;
	margin: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.basicRadio + label,
.basicCheck + label {
	padding: 3px 0 0 25px;
	position: relative;
}
.basicRadio + label:before,
.basicCheck + label:before {
	background-color: #FFFFFF;
	border: 2px solid #CCCCCC;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	content: "";
	display: block;
	height: 20px;
	left: 0;
	position: absolute;
	width: 20px;
}
.basicRadio + label:before,
.basicCheck + label:before,
.basicRadio + label:after,
.basicCheck:checked + label:after {
	top: 0;
}
.basicRadio + label:before {
	border-radius: 10px;
}
.basicCheck + label:before {
	border-radius: 4px;
}
.basicRadio + label:after,
.basicCheck:checked + label:after {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	content: "";
	display: block;
	position: absolute;
}
.basicRadio + label:after {
	background-color: #CCCCCC;
	border-radius: 5px;
	height: 10px;
	left: 5px;
	margin-top: 5px;
	width: 10px;
}
.basicCheck:checked + label:after {
	border-color: #FFFFFF;
	border-style: solid;
	border-width: 0 0 3px 3px;
	height: 8px;
	left: 4px;
	margin-top: 4px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width: 13px;
}
.basicRadio:disabled + label,
.basicCheck:disabled + label {
	color: #CCCCCC;
}
.basicRadio:disabled + label:before,
.basicCheck:disabled + label:before,
.basicRadio:checked:disabled + label:before,
.basicCheck:checked:disabled + label:before {
	background-color: #FFFFFF;
	border-color: #E6E6E6;
}
.basicRadio:checked:disabled + label:after,
.basicRadio:disabled + label:after {
	background-color: #E6E6E6;
}
.basicCheck:checked:disabled + label:after {
	content: none;
}

/* チェック後に領域全体を色付けするタイプ */
.fillCheck,
.fillRadio {
	display: none;
	margin: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.fillCheck + label {
	border: solid 1px #E6E6E6;
	border-radius: 4px;
	color: #988989;
	display: block;
	font-weight: bold;
	padding: 0 0 0 25px;
	position: relative;
}
.fillRadio + label {
	border: solid 1px #dfd9d5;
	border-radius: 4px;
	color: #988989;
	display: block;
	font-weight: bold;
	padding-left: 5px;
	position: relative;
}
.fillCheck + label:before,
.fillCheck:checked + label:after,
.fillRadio + label:before,
.fillRadio:checked + label:after {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	content: "";
	display: block;
	position: absolute;
}
.fillCheck + label:before {
	background-color: #FFFFFF;
	border: 2px solid #CCCCCC;
	border-radius: 4px;
	height: 14px;
	left: 5px;
	margin-top: -7px;
	top: 50%;
	width: 14px;
}
.fillCheck:checked + label,
.fillRadio:checked + label {
	background-color: #BFB4AB;
	border-color: #BFB4AB;
	color: #FFFFFF;
}
.fillCheck:checked + label:before,
.fillRadio:checked + label:before {
	content: none;
}
.fillCheck:checked + label:after {
	border-color: #FFFFFF;
	border-style: solid;
	border-width: 0 0 3px 3px;
	height: 8px;
	left: 5px;
	margin-top: -6px;
	top: 50%;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width: 13px;
}
.fillRadio:checked + label:after {
	border-color: #FFFFFF;
	border-style: solid;
	border-width: 0 0 3px 3px;
	height: 8px;
	right: 5px;
	margin-top: -6px;
	top: 50%;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width: 13px;
}
.fillCheck:disabled + label,
.fillRadio:disabled + label,
.fillCheck:disabled + label:before,
.fillRadio:disabled + label:before,
.fillCheck:checked:disabled + label:before,
.fillRadio:checked:disabled + label:before {
	background-color: #FFFFFF;
}
.fillCheck:disabled + label,
.fillRadio:disabled + label {
	border: none;
	color: #CCCCCC;
}
.fillRadio:disabled + label {
	border: solid 1px #efecea;
}
.fillCheck:disabled + label:before,
.fillRadio:disabled + label:before,
.fillCheck:checked:disabled + label:before,
.fillRadio:checked:disabled + label:before {
	border-color: #E6E6E6;
	content: "";
}
.fillCheck:checked:disabled + label:after,
.fillRadio:checked:disabled + label:after {
	content: none;
}
.wbba { word-break: break-all; }
/* MARGIN */
.mV5 { margin-top: 5px; margin-bottom: 5px; }

/* COLOR */
.fcCatch { color: #CC4466; }
.txtLink { color: #4C4C80 !important; }

/* 横スクロール */
.cntScrollX {
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	white-space: nowrap;
}

/* SEO・パンくず */
.breadcrumb,
.bottomSummary {
	font-size: 10px;
}
.breadcrumb > li {
	display: inline;
}
.breadcrumb > li + li:before {
	content: ">";
	margin: 0 8px 0 5px;
}
.breadcrumbTop {
	margin-top: 5px;
	padding: 1px 8px;
}
.breadcrumbBottom,
.bottomSummary {
	border-bottom: 1px solid #BFB9B0;
	padding: 10px;
}

/* グローバルナビゲーション */
.gnavi {
	border-bottom: 1px solid #E0E1E2;
	font-size: 14px;
	font-weight: bold;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.gnavi li {
	border-top: 1px solid #E0E1E2;
}

/* ナビゲーションリンク */
.navLink,
.navLink:link,
.navLink:visited,
.gnavi li {
	color: #333333;
}
.navLink {
	display: block;
	line-height: 20px;
}
.navLink {
	padding: 12px 36px 12px 16px;
	position: relative;
	text-decoration: none;
}
.navLink::after {
	background: url(/CSP/img/svg/sp/icon_arrow_right_gray.svg?switch=2025062510) center / contain;
	content: "";
	height: 20px;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
}

/* accordion */
.accordionCnt {
	display: none;
}
.accordionCnt .navLink {
	font-size: 12px;
	padding: 12px 36px 12px 32px;
}
.accordionCnt .navLinkSecond {
	font-size: 11px;
	padding: 11px 30px 11px 30px;
}

/** 差し込みバナーコンテンツ */
.bannerContents {
	width: 100%;
}

/* ギフト券吹き出し */
.giftPopupWrapper {
	left: 0;
	margin-left: 15px;
	margin-right: 15px;
	position: absolute;
	right: 0;
	top: 62px;
	-webkit-transition: opacity 0.4s linear;
	transition: opacity 0.4s linear;
	z-index: 1000;
}
.giftPopup {
	background-color: #FFFFFF;
	border: 2px solid #D36985;
	border-radius: 6px;
	box-sizing: border-box;
	float: right;
	padding: 10px 35px 10px 10px;
	position: relative;
	text-align: center;
}
.giftPopup::before,
.giftPopup::after {
	border-style: solid;
	content: "";
	height: 0;
	position: absolute;
	width: 0;
}
.giftPopup:before {
	background: #FFFFFF;
	border: 2px solid;
	border-color: #D36985 #D36985 transparent transparent;
	bottom: 31px;
	height: 10px;
	right: 17px;
	transform: rotate(-45deg);
	width: 10px;
}
.giftPopup:after {
	border-color: transparent transparent #FFFFFF transparent;
	border-width: 0 4px 10px 4px;
	bottom: 100%;
	right: 20px;
}
.giftPopupClose {
	border-radius: 10px;
	bottom: 0;
	height: 20px;
	margin: auto;
	position: absolute;
	right: 10px;
	text-indent: -9999px;
	top: 0;
	width: 20px;
	z-index: 1001;
}
.giftPopupClose::before,
.giftPopupClose::after {
	background-color: #B4B4B4;
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 12px;
}
.giftPopupClose::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.giftPopupClose::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* フッターアコーディオン */
.footerAccordionOpenBtn {
	padding: 12px 36px 12px 16px;
}
.accordionArrowB {
	position: relative;
}
.accordionArrowB::after,
.accordionBtn::after {
	background: url(/CSP/img/svg/sp/icon_arrow_down_gray.svg?switch=2025062510) center / contain;
	content: "";
	height: 20px;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
}
.accordionArrowB.isOpened::after,
.accordionBtn.isOpened::after {
	background-image: url(/CSP/img/svg/sp/icon_arrow_up_gray.svg?switch=2025062510);
}
.footerAccordionLinkList > li {
	font-size: 12px;
}
.footerAccordionLinkList > li > p {
	line-height: 20px;
	padding: 12px 36px 12px 32px;
}
.footerAccordionLinkList > li > a {
	color: #666666 !important;
	display: block;
	padding-bottom: 11px;
	padding-left: 10px;
	padding-top: 11px;
	text-decoration: none;
}
.footerAccordionLinkListContent {
	display: none;
}
.footerAccordionLinkListContent > li > .navLink {
	font-weight: normal;
	padding-left: 48px;
}
.footerAccordionNoLinkColor {
	color: #CCCCCC;
}

/* フッター */
.siteFooter {
	background-color: #FFFFFF;
	border-top: 1px solid #E0E1E2;
	padding: 16px;
}
.siteFooterBt {
	border-top: 2px solid #D36985;
}
.siteFooterKr {
	border-top: 2px solid #9A68CD;
}
.siteFooterNav {
	margin: -6px auto;
	width: 280px;
}
.siteFooterNavList {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	line-height: 22px;
}
.siteFooterNavList > li {
	font-size: 10px;
	padding: 0 4px;
}
.siteFooterNavList > li > a:link,
.siteFooterNavList > li > a:visited {
	color: #4C4C80;
	text-decoration: underline;
}
.siteFooterRecruitBrand {
	margin: 23px 0 -9px;
}
.siteFooterRecruitBrandLink {
	display: inline-block;
	height: 27px;
	padding: 9px 0;
}
.siteFooterRecruitBrandLink > img {
	height: 100%;
}
.siteFooterReserveSystemDesc {
	border-bottom: 1px solid #E0E1E2;
	margin: -16px -16px 16px;
	padding: 16px;
	text-align: center;
}
.siteFooterReserveSystemBrandLogo {
	margin-top: 8px;
}