@charset "utf-8";

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	overscroll-behavior-y: none;
}

body {
	width: 100%;
	overflow-x: hidden;

	overscroll-behavior-y: none;
}


#contents {
	position: absolute;
	top: 0;
	left: 0;

	width: 750px;
	background-color: #F9F9F6;
	overflow: hidden;
	z-index: 0;
	
	/* スマホピンチで画面拡大するのを無効化（iOSでは効かない？） */
	touch-action: pan-x pan-y;
	-ms-touch-action: pan-x pan-y;

	/* フォント */
	font-family:
		Hiragino Sans,
		"ヒラギノ角ゴシック",
		Hiragino Kaku Gothic ProN,
		"ヒラギノ角ゴ ProN W3",
		Roboto,
		"Droid Sans",
		YuGothic,
		"游ゴシック",
		Meiryo,
		"メイリオ",
		Verdana,
		"ＭＳ Ｐゴシック",
		sans-serif;

	/* 文字サイズ自動調整をOFFに */
	text-size-adjust: 100%;

	/* 基本の文字色 */
	color: #000;

	/* テキスト選択＆長押しメニュー不可 */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;

	/* タップ時のハイライトをなしに */
	-webkit-tap-highlight-color: transparent;

	/* 慣性スクロールON（for Android） */
	-webkit-overflow-scrolling: touch;


	/* CSS変数定義（共通） */
	--color-red: #c80421;
	--frm-color: #c9caca;
	--grayline-color: #959595;
	
	/* CSS変数定義（ブランドごとにオーバーライド） */
	/* ブランドエリア＆美類エリアの背景色 */
	--color-bg-category: #efefef;
	/* お試し中のアイテムエリアの背景色 */
	--color-bg-stock: #efefef;
	/* 美類ボタンの背景色 */
	--color-btn-category: #c80421;
	/* 商品を詳しく見るボタンの背景色 */
	--color-btn-detail: #000000;
	/* 外すボタンの背景色 */
	--color-btn-delete_bg: #ffffff;
	/* 外すボタンの前景色 */
	--color-btn-delete_fg: #000000;
	/* 全てのアイテムを外すボタンの背景色 */
	--color-btn-deleteAll_bg: #ffffff;
	/* 全てのアイテムを外すボタンの前景色 */
	--color-btn-deleteAll_fg: #000000;
	/* TOPボタンの背景色 */
	--color-btn-top: #000000;
	/* カテゴリのアクティブ色（テキスト＆下線） */
	--color-active-category: #c80421;
	/* 商品リストの上端仕切り線の色 */
	--color-line-prodList: #c80421;
	/* 商品のアクティブ色（選択枠＆商品名） */
	--color-active-selProd: #c80421;
	/* SKUのアクティブ色（選択枠＆号数名） */
	--color-active-selSku: #c80421;
	/* 「お試し中のアイテム」ラベル色 */
	--color-text-stockLabel: #000000;
	/* お試し中のアイテムの美類ラベル先頭の「・」の色 */
	--color-dot-biruiLabel: #c80421;
	/* 複数SKU関連の強調色 */
	--color-multi-active: #c80421;
}


.hideScrollbar::-webkit-scrollbar {
	display: none;
}


/*********************************************
起動時のloading表示
*********************************************/
#startLoading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	font-size: 26px;
	padding: 10px;
	z-index: 9999;
	pointer-events: none;
}


/*********************************************
商品リストのloading表示
*********************************************/
#loading {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;

	font-size: 36px;
	height: 100px;
	color: #555;
}



/*---------------------
カテゴリ選択エリア
---------------------*/
#categoryPane {
	position: relative;
	width: 100%;
}
#categoryPane > #categoryArea {
	width: 100%;
	display: flex;
}
#categoryPane > #categoryArea > .btn {
	width: 150px;
	height: 100px;
	font-size: 26px;
	letter-spacing: -0.025em;
	line-height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
#categoryPane > #categoryArea > .btn.active {
	color: var(--color-active-category);
	border-bottom: solid 8px var(--color-active-category);
}

#categoryPane > #subCategoryArea {
	position: relative;
	width: 100%;
	height: 110px;
	background-color: var(--color-bg-category);
	border-top: solid 2px var(--frm-color);
	white-space:nowrap;
	overflow-x: scroll;
	padding: 25px 12px 0 12px;
}
#categoryPane > #subCategoryArea .btn {
	display: inline-block;
	margin: 0 12px;
	height: 60px;
	border-radius: 30px;
	border: solid 2px var(--frm-color);
	font-size: 28px;
	letter-spacing: -0.025em;
	font-feature-settings: "palt"; /* メトリクス */
	color: var(--frm-color);
	background-color: #fff;
	line-height: 60px;
	padding: 0 30px;
	cursor: pointer;
}
#categoryPane > #subCategoryArea .btn.active {
	font-weight: bold;
	color: #fff;
	border: solid 2px var(--color-btn-category);
	background-color: var(--color-btn-category);
}

/*---------------------
商品リストエリア
---------------------*/
#prodListArea {
	position: relative;
	width: 100%;
/*
	border-top: solid 2px var(--color-line-prodList);
*/	
}

/*---------------------
商品選択エリア（１ブランド分）
---------------------*/
#prodPane {
	position: relative;
	width: 100%;
	background-color: #fff;
}
#prodPane:nth-of-type(n+2) {
	border-top: solid 2px var(--grayline-color);
}
#prodPane > #brandLogo {
	position: absolute;
	top: 20px;
	left: 30px;
	width: 160px;
	height: 60px;
	object-fit: contain;
	z-index: 110;
}
#prodPane > #brandName {
	position: absolute;
	top: 20px;
	left: 200px;
	font-size: 28px;
	letter-spacing: -0.025em;
	line-height: 60px;
	z-index: 110;
}

#prodPane > #noItem {
	padding-top: 60px;
	width: 100%;
	font-size: 24px;
	text-align: center;
	line-height: 120px;
	color: #c9caca;
}

#prodPane > #itemsLayer {
	position: relative;
	width: 100%;
	background-color: #fff;
	overflow-x: scroll;
	white-space: nowrap;
	padding: 90px 10px 30px 10px;
	z-index: 100;
}
#prodItem {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 170px;
	white-space: normal;
	margin: 0 15px;
}
#prodItem > #prodImg {
	position: relative;
	width: 100%;
	height: 170px;
}
#prodItem > #prodImg > #img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	cursor: pointer;
}
#prodItem > #prodImg > #frm {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#prodItem > #prodName {
	margin-top: 18px;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: -0.025em;
}
#prodItem > #yakuji {
	font-size: 24px;
	letter-spacing: -0.05em;
}
#prodItem > #mark {
	margin-top: 8px;
	font-size: 20px;
	letter-spacing: -0.05em;
}
#mark.new {
	color: var(--color-red);
}
#mark.soon {
	color: #909090;
}
#mark.limitwp {
	color: var(--color-red);
}
#mark.limitcnt {
	color: var(--color-red);
}

#prodItem.active > #prodImg > #frm {
	border: solid 6px var(--color-active-selProd);
}
#prodItem.active > #prodName {
	color:var(--color-active-selProd);
}

/*---------------------
SKU選択エリア
---------------------*/
#skuPane {
	position: relative;
	width: 100%;
	border-top: dotted 1px #aeaeae;
	overflow-y: hidden;
	z-index: 90;
	padding-bottom: 30px;
}
#skuPane #prodItem {
	margin-top: 30px;
	margin-left: 30px;
	margin-right: 35px;
}
#skuPane > #itemsLayer {
	position: relative;
	display: inline-block;
	width: 515px;
	overflow-x: scroll;
	white-space: nowrap;
	padding: 27px 10px 10px 10px;
}
#skuPane > #padBottom {
	width: 100%;
	height: 30px;
}

#skuItem {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 120px;
	white-space: normal;
	margin: 0 10px;
}
#skuItem > #skuImg {
	position: relative;
	width: 100%;
}
#skuItem > #skuImg > #img {
	width: 100%;
	cursor: pointer;	
}
#skuItem > #skuImg > #frm {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: solid 2px var(--frm-color);
}
#skuItem > #skuName {
	margin-top: 18px;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: -0.025em;
}
#skuItem > #mark {
	margin-top: 8px;
	font-size: 20px;
	letter-spacing: -0.05em;
}
#skuItem.active > #skuImg > #frm {
	border: solid 6px var(--color-active-selSku);
}
#skuItem.active > #skuName {
	color:var(--color-active-selSku);
}

#skuItem.disable {
	pointer-events: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
	opacity: 0.6;
}



/*---------------------
お試し中のアイテム表示エリア
---------------------*/
#stockPane {
	position: relative;
	width: 100%;
	background-color: var(--color-bg-stock);
	text-align: center;
	z-index: 100;
}
#stockPane > #label {
	padding-top: 10px;
	margin-bottom: 10px;
	font-size: 28px;
	letter-spacing: -0.025em;
	font-weight: bold;
	color: var(--color-text-stockLabel);
}
#stockItem {
	position: relative;
	width: 690px;
	margin: auto;
	padding-bottom: 40px;
	text-align: left;
}
#stockItem > #label {
	font-size: 28px;
	font-weight: bold;
	letter-spacing: -0.025em;
}
#stockItem > #label::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background-color: var(--color-dot-biruiLabel);
	margin-right: 10px;
}
#stockItem > #itemArea {
	margin-top: 28px;
	padding-bottom: 30px;
	background-color: #fff;
}
#stockItem > #itemArea > #prodImg {
	width: 170px;
	height: 170px;
	border: solid 2px var(--frm-color);
	margin-top: 30px;
	margin-left: 20px;
	margin-right: 20px;
	vertical-align: top;
}
#stockItem > #itemArea > #skuImg {
	display: inline-block;
	position: relative;
	margin-top: 30px;
	margin-right: 20px;
	width: 120px;
	vertical-align: top;
}
#stockItem > #itemArea > #skuImg > img {
	width: 100%;
}
#stockItem > #itemArea > #texts {
	display: inline-block;
	width: 320px;
	margin-top: 30px;
}
#stockItem > #itemArea > #texts > #brandName {
	font-size: 24px;
	letter-spacing: -0.05em;
}
#stockItem > #itemArea > #texts > #prodName {
	font-size: 28px;
	line-height: 28px;
	font-weight: bold;
	letter-spacing: -0.05em;
	margin-top: 15px;
}
#stockItem > #itemArea > #texts > #yakuji {
	font-size: 24px;
	letter-spacing: -0.05em;
	margin-top: 5px;
}
#stockItem > #itemArea > #texts > #skuName {
	font-size: 28px;
	letter-spacing: -0.05em;
	line-height: 30px;
	margin-top: 10px;
}
#stockItem > #itemArea > #texts > #mark {
	margin-top: 8px;
	font-size: 20px;
	letter-spacing: -0.05em;
}

#stockItem > #itemArea > #btnArea {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;	
	padding: 0 20px;
	margin-top: 30px;
}

#stockItem > #itemArea > #btnArea > #btnDetail {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	height: 80px;
	background-color: var(--color-btn-detail);
	text-align: center;
	color: #fff;
	font-size: 28px;
	letter-spacing: -0.025em;
	line-height: 80px;
	border-radius: 10px;
	cursor: pointer;
}
#stockItem > #itemArea > #btnArea > #btnDetail > #icon {
	height: 60%;
	margin-left: 10px;
	filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}
#stockItem > #itemArea > #btnArea > #btnDelete,
#stockItem > #itemArea > #btnArea > #btnModify {
	position: relative;
	display: inline-block;
	width: 160px;
	height: 80px;
	color: var(--color-btn-delete_fg);
	background-color: var(--color-btn-delete_bg);
	text-align: center;
	font-size: 28px;
	letter-spacing: -0.025em;
	line-height: 80px;
	border-radius: 10px;
	border: solid 2px var(--color-btn-delete_fg);
	cursor: pointer;
}
#stockPane > #btnDeleteAll {
	position: relative;
	display: inline-block;
	width: 480px;
	height: 80px;
	color: var(--color-btn-deleteAll_fg);
	background-color: var(--color-btn-deleteAll_bg);
	text-align: center;
	font-size: 28px;
	letter-spacing: -0.025em;
	line-height: 80px;
	border-radius: 10px;
	border: solid 2px var(--color-btn-deleteAll_fg);
	cursor: pointer;
	margin-bottom: 100px;	
}

#stockItem > #itemArea > #btnArea > #btnDeleteForMultiES,
#stockItem > #itemArea > #btnArea > #btnModifyForMultiES {
	position: relative;
	display: inline-block;
	width: 300px;
	height: 80px;
	color: var(--color-btn-delete_fg);
	background-color: var(--color-btn-delete_bg);
	text-align: center;
	font-size: 22px;
	letter-spacing: -0.025em;
	line-height: 80px;
	border-radius: 10px;
	border: solid 2px var(--color-btn-delete_fg);
	cursor: pointer;

	margin-top: 20px;
}


/*********************************************
多色ESボタン
*********************************************/
#multiBtn {
	position: absolute;
	top: -100px;
	left: 20px;

	width: 80px;
	height: 80px;
	background-color: var(--color-red);
	border-radius: 6px;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;
}

/*********************************************
多色ES画面
*********************************************/
#multiColor {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	z-index: 5;
}
#multiColor > #btnClose {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background-color: #fff;
	cursor: pointer;
}
#multiColor > #btnClose::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 30px;
	width: 34px;
	border-top: solid 2px #000;
	transform: rotate(45deg);
}
#multiColor > #btnClose::after {
	content: "";
	position: absolute;
	left: 13px;
	top: 30px;
	width: 34px;
	border-top: solid 2px #000;
	transform: rotate(-45deg);
}

#multiColor #selectPattern {
	font-size: 28px;
	line-height: 40px;
	letter-spacing: -0.025em;
	color: #fff;
}

#multiColor #selectPattern > #selCol > #label {
	margin-top: 120px;
	display: inline-flex;
	width: 600px;
	height: 50px;
	background-color: #fff;
	color: var(--color-red);
	align-items: center;
	justify-content: center;
}
#multiColor #selectPattern > #selCol > #text {
	margin-top: 60px;
}
#multiColor #selectPattern > #selCol > #selArea {
	margin-top: 60px;
}
#multiColor #selectPattern > #selCol > #selArea > #selItem {
	margin: 0 20px 60px 20px;
}
#multiColor #selectPattern > #selCol > #selArea > #selItem > #label {
	margin-top: 5px;
	margin-bottom: -10px;
}

#multiColor #selectPattern > #selPat > #text {
	margin-top: 230px;
}
#multiColor #selectPattern > #selPat > #selArea {
	margin-top: 60px;
	width: 600px;
}
#multiColor #selectPattern > #selPat > #selArea > #selItem {
	margin: 0 30px 60px 20px;
}
#multiColor #selectPattern > #selPat > #selArea > #selItem > img {
	width: 100%;
	height: 100%;
}
#multiColor #selectPattern > #selPat > #btnBack {
	margin-top: 60px;
	position: relative;
	display: inline-block;
	width: 320px;
	height: 80px;
	border-radius: 40px;
	background-color: #fff;
	color: #000;
	line-height: 80px;
	font-size: 26px;
}
#multiColor #selectPattern > #selPat > #btnBack::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 30px;
	width: 16px;
	height: 16px;
	border-left: solid 2px;
	border-bottom: solid 2px;
	transform: rotate(45deg);
}

#multiColor #selectPattern #selArea {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
#multiColor #selectPattern #selArea > #selItem {
	width: 200px;
	height: 120px;
	background-color: #fff;
	border: solid 4px rgba(0,0,0,0);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	font-size: 26px;
	letter-spacing: -0.025em;
	color: #000;
}
#multiColor #selectPattern #selArea > #selItem.active {
	border-color: var(--color-multi-active);
	color: var(--color-multi-active);
}
#multiColor #selectPattern #selArea > #selItem > #icon {
	width: 47px;
	height: 51px;
	background-color: #000;
	mask-repeat: no-repeat;
}
#multiColor #selectPattern #selArea > #selItem.active > #icon {
	background-color: var(--color-multi-active);
}


#multiColor #confirmMenu {
	font-size: 28px;
	line-height: 40px;
	letter-spacing: -0.025em;
	color: #fff;
}
#multiColor #confirmMenu > #label {
	margin-top: 120px;
	display: inline-flex;
	width: 600px;
	height: 50px;
	background-color: #fff;
	color: var(--color-red);
	align-items: center;
	justify-content: center;
}
#multiColor #confirmMenu > #text {
	margin-top: 60px;
}
#multiColor #confirmMenu > #btnRetry {	
	margin-top: 60px;
}
#multiColor #confirmMenu > #btnChange {	
	margin-top: 50px;
}
#multiColor #confirmMenu > #btnClear {	
	margin-top: 50px;
}
#multiColor #confirmMenu > #btnSim {	
	margin-top: 50px;
	letter-spacing: -0.05em;
}

#multiColor #confirmMenu > .confirmMenuBtn {
	width: 500px;
	height: 100px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	cursor: pointer;
	background-color: #fff;
	color: #000;
	word-break: keep-all;
}
#multiColor #confirmMenu > .confirmMenuBtn.red {
	background-color: var(--color-multi-active);
	color: #fff;
}


#multiColor #selPart {
	font-size: 28px;
	letter-spacing: -0.025em;
	color: #fff;
	text-align: center;
}
#multiColor #selPart > #text {
	margin-top: 120px;	
}
#multiColor #selPart > #pattern {	
	margin-top: 60px;
}
#multiColor #selPart > #pattern > #label {	
}
#multiColor #selPart > #pattern > img {	
	margin-top: 10px;
	width: 200px;
	height: 120px;
}
#multiColor #selPart > #btnArea {
	margin-top: 60px;
	width: 720px;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#multiColor #selPart > #btnArea > #btnNum {	
	position: relative;
	margin: 0 20px 40px 20px;
	width: 320px;
	height: 80px;
	border-radius: 40px;
	background-color: var(--color-multi-active);
	color: #fff;
	line-height: 80px;
	font-size: 28px;
}
#multiColor #selPart > #btnArea > #btnNum::after {	
	content: "";
	position: absolute;
	top: 32px;
	right: 30px;
	width: 16px;
	height: 16px;
	border-right: solid 2px;
	border-top: solid 2px;
	transform: rotate(45deg);
}
#multiColor #selPart > #btnBack {
	margin-top: 20px;
	width: 320px;
	height: 80px;
	border-radius: 40px;
	background-color: #fff;
	color: #000;
	line-height: 80px;
	font-size: 26px;
	letter-spacing: 0;
	display: inline-block;
	position: relative;
}
#multiColor #selPart > #btnBack::before {	
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border-top: solid 2px #000;
	border-left: solid 2px #000;
	transform: rotate(-45deg);
	top: 32px;
	left: 30px;
}


#selPalette {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	text-align: center;
	z-index: 10;
}
#selPalette > #base {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 690px;
	background-color: #fff;
}
#selPalette > #base > #btnClose {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	background-color: #fff;
	border: solid 2px #000;
	border-radius: 30px;
}
#selPalette > #base > #btnClose::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 28px;
	width: 30px;
	border-top: solid 2px #000;
	transform: rotate(45deg);
}
#selPalette > #base > #btnClose::after {
	content: "";
	position: absolute;
	left: 13px;
	top: 28px;
	width: 30px;
	border-top: solid 2px #000;
	transform: rotate(-45deg);
}
#selPalette > #base > #label {
	margin-top: 120px;
	font-size: 28px;
	letter-spacing: -0.025em;
	color: #000;	
}
#selPalette > #base > #skuImg {	
	margin-top: 40px;
	margin-left: 200px;
	margin-right: 200px;
	width: 150px;
}
#selPalette > #base > #selArea {	
	margin-top: 60px;
	margin-bottom: 60px;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
}
#selPalette > #base > #selArea > #selItem {	
	width: 345px;
	margin-bottom: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#selPalette > #base > #selArea > #selItem > #rect {	
	margin-right: 20px;
	display: inline-block;
	width: 100px;
	height: 100px;
	border: solid 1px #c9caca;
}
#selPalette > #base > #selArea > #selItem > #btn {	
	position: relative;
	display: inline-block;
	width: 180px;
	height: 80px;
	border-radius: 40px;
	font-size: 28px;
	color: #fff;
	background-color: var(--color-multi-active);
	line-height: 80px;
}
#selPalette > #base > #selArea > #selItem > #btn::after {	
	content: "";
	position: absolute;
	top: 32px;
	right: 30px;
	width: 16px;
	height: 16px;
	border-right: solid 2px;
	border-top: solid 2px;
	transform: rotate(45deg);
}


#multiColor #selProd {
	font-size: 28px;
	letter-spacing: -0.025em;
	color: #fff;
	text-align: center;
}
#multiColor #selProd > #instArea {
	margin-top: 110px;	
}
#multiColor #selProd > #instArea > #text {	
	display: flex;
	align-items: center;
	justify-content: center;
}
#multiColor #selProd > #instArea > #text > #step {
	margin-right: 20px;
	display: inline-block;
	width: 110px;
	height: 50px;
	line-height: 50px;
	color: var(--color-red);
	background-color: #fff;	
}
#multiColor #selProd > #instArea > #pattern {	
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#multiColor #selProd > #instArea > #pattern > img {	
	margin-top: 10px;
	width: 200px;
	height: 120px;
}
#multiColor #selProd > #btnArea {	
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
#multiColor #selProd > #btnArea > #btnBack {
	margin-right: 25px;	
}
#multiColor #selProd > #btnArea > #btnNext {	
	margin-left: 25px;	
}
#multiColor #selProd > #btnArea > #btnCancel {	
	margin-top: 30px;	
}
#multiColor #selProd > #btnArea > #btnCancel::before {	
	content: "";
	position: absolute;
	top: 40px;
	right: 30px;
	width: 30px;
	border-top: solid 2px;
	transform: rotate(45deg);
}
#multiColor #selProd > #btnArea > #btnCancel::after {
	content: "";
	position: absolute;
	top: 40px;
	right: 30px;
	width: 30px;
	border-top: solid 2px;
	transform: rotate(-45deg);
}

#multiColor #selProd > #btnArea > .btn {
	position: relative;
	font-size: 26px;
	letter-spacing: 0;
	width: 320px;
	height: 80px;
	border-radius: 40px;
	cursor: pointer;
	background-color: #fff;
	color: #000;
	line-height: 80px;
}
#multiColor #selProd > #btnArea > .btn.red {
	background-color: var(--color-multi-active);	
	color: #fff;
}
#multiColor #selProd > #btnArea > .btn.disable {
	background-color: #c9caca;
	color: #808080;
	pointer-events: none;
}
#multiColor #selProd > #btnArea > .btn.sim {
	letter-spacing: -0.1em;
	padding-right: 20px;
}
#multiColor #selProd > #btnArea > .btn.iconL::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 30px;
	width: 16px;
	height: 16px;
	border-left: solid 2px;
	border-bottom: solid 2px;
	transform: rotate(45deg);
}
#multiColor #selProd > #btnArea > .btn.iconR::before {
	content: "";
	position: absolute;
	top: 32px;
	right: 30px;
	width: 16px;
	height: 16px;
	border-right: solid 2px;
	border-top: solid 2px;
	transform: rotate(45deg);
}

#multiColor #prodList {
	margin-top: 60px;
	position: relative;
	display: inline-block;
	width: 690px;
	background-color: #fff;
	color: #000;
	overflow-y: scroll;
}
#multiColor #prodList > #listBase {
	position: relative;
	width: 100%;
	text-align: left;

	padding-bottom: 150px;
}
#multiColor #prodList #skuPane {
	padding-top: 20px;
}
#multiColor #prodList #skuPane #itemsLayer {
	width: 455px;
	padding-top: 40px;
}
#multiColor #prodList #skuPane #selTag {
	position: absolute;
	top: -34px;
	left: 0;
	width: 120px;
	height: 34px;
	background-color: var(--color-active-selSku);
	color: #fff;
	font-size: 24px;
	letter-spacing: -0.025em;
	text-align: center;
	line-height: 34px;
}

#multiColor .filterCtrl > #infoLabel {
	width: 480px;
}



/*********************************************
画面を覆うシールド
*********************************************/
#shield {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 1000;
}



/***************************************
ビューエリア（Perectモジュールの配置先）
高さは起動時に動的に設定される
***************************************/
#viewArea {
	position: relative;
	width: 100%;
	background-color: #999;

	z-index: 10;
}

/*
	共通css（/sp/shared/css/style.css）内で
	YMK-moduleに設定がされているので、それをクリア
*/
#viewArea > #YMK-module {
	margin: initial;
	width: initial;
}


#viewArea > #compareLabel {
	position: absolute;
	left: 0;
	bottom: 100px;
	width: 100%;
	text-align: center;
	font-size: 32px;
	color: #fff;
	text-shadow: 0 0 8px #222;
}

/***************************************
メニューバー
***************************************/
#menuBar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-around;
	text-align: center;
	background-color: #fff;

	border-top: solid 1px #222;
	border-bottom: solid 1px #222;

	width: 100%;
	height: 120px;
	padding: 0 20px;

	font-size: 26px;

	z-index: 300;
}
#menuBar.loading {
	background-color: #000;
}
.menuBtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;

	width: 100px;
	height: 100px;
	
	background-color: #fff;
	border-radius: 10px;
}

.menuBtn > #icon {
	height: 50%;
}
.menuBtn > #label {
	margin-top: 10px;
	font-size: 20px;
	color: #000;
}
.menuBtn.active > #label {
	color: #f00;
}

/* サイズ微調整が必要なアイコン */
#btnPause > #icon {
	padding: 5px;
}
#btnCompare.active > #icon {
	padding: 4px;
}



#menuBar > #ver {
	position: absolute;
	left: 5px;
	bottom: 5px;
	font-size: 16px;
	color: #999;
}

/***************************************
色玉選択エリア
***************************************/
#selectArea {
	position: absolute;
	left: 0;

	background-color: #fff;
	width: 100%;

	z-index: 200;
}
#selectArea > #skuPane {
	padding-bottom: 0;
	border-top: solid 2px #aeaeae;

}

/* 以下、少し小さくしている */
#selectArea > #skuPane #itemsLayer {
	width: 535px;	/* 515px */
}
#selectArea > #skuPane #prodItem {
	width: 150px;	/* 170px */
}
#selectArea > #skuPane #prodName {
	font-size: 20px;	/* 24px */
	line-height: 20px;	/* 24px */
}
#selectArea > #skuPane #skuItem {
	width: 100px;	/* 120px */
}
#selectArea > #skuPane #skuName {
	font-size: 20px;	/* 24px	*/
	line-height: 20px;	/* 24px */
}


#selectArea > #thumb {
	z-index: 100;
	position: absolute;
	top: -50px;
	right: 0;
	width: 110px;
	height: 50px;
	background-color: #fff;
	border-top-left-radius: 20px;
	border-left: solid 2px #aeaeae;
	border-top: solid 2px #aeaeae;

	pointer-events: initial !important;
	cursor: pointer;
	user-select: none;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#selectArea > #thumb::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 100%;
	height: 20px;
	background-color: #fff;
}
#selectArea > #thumb::after {
	content: "";
	width: 22px;
	height: 22px;
	border-left: solid 2px #222;
	border-bottom: solid 2px #222;
	transform: rotate(135deg);
	margin-bottom: -10px;	
}
#selectArea.show > #thumb::after {
	content: "";
	width: 22px;
	height: 22px;
	border-left: solid 2px #222;
	border-bottom: solid 2px #222;
	transform: rotate(-45deg);
	margin-bottom: 10px;	
}

#selectArea > #linkBtn {
	padding: 3px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;

	margin-left: 50%;
	transform: translateX(-50%) translateY(-20px);
}
#selectArea > #linkBtn > #text {
	font-size: 24px;
	color: #222;
	border-bottom: solid 1px #222;
}
#selectArea > #linkBtn > #icon {
	margin-left: 5px;
	height: 30px;
	opacity: 0.8;
}


/***************************************
濃度調整スライダ
***************************************/
.densCtrl {
	position: fixed;
	top: 100px;
	left: 40px;

	opacity: 0.5;
	
	z-index: 100;
}
.densCtrl #bg {
	position: absolute;
	top: 0;
	left: -20px;
	width: 40px;
	height: 400px;
	background-color: #000;
	opacity: 0;
}
.densCtrl #base {
	position: relative;
	width: 4px;
	height: 400px;
	background-color: #bbb;
}
.densCtrl #bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #e03060;
	transform-origin: bottom;
}
.densCtrl #marker {
	position: absolute;
	top: 0;
	left: 2px;

	width: 40px;
	height: 40px;
	background-color: #e03060;
	border-radius: 10px;

	transform-origin: center;
	transform: translate(-50%, -50%);

	cursor: pointer;
	
}



/***************************************
選択商品アイコン表示
***************************************/
#selProdIconList {
	position: absolute;
	top: 20px;
	right: 100px;

	z-index: 100;
}
#selProdIconList > #label {
	position: absolute;
	top: 0;
	left: -620px;
	width: 600px;

	text-align: right;
	font-size: 24px;
	font-weight: bold;

	word-break: keep-all;
	overflow-wrap: break-word; 
	pointer-events: none;

	color: #000;	
	text-shadow:
		2px 2px 8px #fff,
		-2px 2px 8px #fff,
		2px -2px 8px #fff,
		-2px -2px 8px #fff;

}
.selProdIcon {
	position: absolute;
	top: 0;
	left: 0;
	padding-bottom: 20px;

	opacity: 0.5;
}
.selProdIcon > #icon {
	width: 80px;
	height: 80px;
	background-color: #fff;
	border: solid 1px #222;

	border-radius: 10px;
	overflow: hidden;
}
.selProdIcon > #icon.isMulti {
	padding: 10px;
}
.selProdIcon > #icon > img {
	width:100%;
	height:100%;	
	object-fit: contain;
}


/***************************************
選択商品アイコンのポップアップ表示
***************************************/
#prodPopup {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-color: rgba(0, 0, 0, 0.2);

	z-index: 500;
}
#prodPopup > #dlg {
	position: absolute;
	top: 0;
	left: 20px;
	margin-top: 30px;

	transform: scale(0.95);
	transform-origin: top left;
	background-color: #fff;

	border: solid 1px #222;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 4px 4px 8px #555;
}
#prodPopup #stockItem {
}
#prodPopup #stockItem > #itemArea {

	margin-top: 0;
	padding-bottom: 0;
}






.overlayBase {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	
	position: absolute;
	top: 0;
	left: 0;

	background-color: #fff;
	padding-top: 100px;

	z-index: 1100;
}
.overlayBase > #headerArea {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-color: rgba(255, 255, 255, 0.8);

	text-align: center;
	line-height: 100px;
	color: var(--color-text-stockLabel);
	font-weight: bold;
	font-size: 28px;

	z-index: 200;
}
.overlayBase .closeBtn {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	border: solid 4px #000;
	border-radius: 10px;

	cursor: pointer;
}
.overlayBase .closeBtn::before,
.overlayBase .closeBtn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 40px;
	background: #000;
}
.overlayBase .closeBtn::before {
	transform: translate(-50%,-50%) rotate(45deg);
}
.overlayBase .closeBtn::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}




/***************************************
絞り込みコントロール
***************************************/
.filterCtrl {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content:flex-start;
	width: 100%;
	background-color: #ffe;
	border-top: solid 2px var(--frm-color);
	border-bottom: solid 3px var(--frm-color);

	padding: 15px 0;
}
.filterCtrl > #btnConfig {
	position: relative;
	width: 180px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-left: 15px;
	font-size: 22px;
	color: #000;

	border: solid 2px #222;
	border-radius: 10px;
	background-color: #ddd;

	cursor: pointer;

}
.filterCtrl > #btnConfig > #icon {
	margin-left: 15px;
	height: 60%;
}

.filterCtrl > #infoLabel {
	margin-left: 20px;
	width: 530px;

	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 60px;

	text-align: left;
	color: #222;
	font-size: 16px;
}
.filterCtrl > #infoLabel > #table {
	display: flex;
	flex-direction: column;

	word-break: keep-all;
	overflow-wrap: break-word;
}
.filterCtrl > #infoLabel > #table > .rowItem {
	display: flex;
	line-height: 110%;
	margin: 5px 0;
}
.filterCtrl > #infoLabel > #table > .rowItem > .colKey {
	flex-shrink: 0;
	text-align: right;
}
.filterCtrl > #infoLabel > #table > .rowItem > .colVal {
}


/***************************************
絞り込み設定画面
***************************************/
#FilterConfigPage {
	background-color: rgba(0, 0, 0, 0.8);
}
#FilterConfigPage > #headerArea {
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
}
#FilterConfigPage .closeBtn {
	display: none;
}
#FilterConfigPage #btnBack {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 60px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}
#FilterConfigPage #btnBack > #icon {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	position: relative;
	width: 1em;
	height: 4px;
	background: #fff;
}
#FilterConfigPage #btnBack > #icon::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	border: solid 4px #fff;
	border-right: 0;
	border-bottom: 0;
	transform: rotate(-45deg);
	transform-origin: top left;
	position: absolute;
	top: 50%;
	left: -0.05em;
}

.configPane {
	position: relative;
	color: #fff;
	margin-top: 50px;
	margin-bottom: 50px;
}
.configPane > #label {
	font-size: 32px;
	font-weight: bold;

	width: 90%;
	margin-left: 5%;
	margin-bottom: 40px;
	padding-left: 10px;

	line-height: 80px;
	border-bottom: solid 4px #fff;
}
.configPane > #btnArea {
	position: absolute;
	top: 15px;
	right: 30px;
}
.configPane > #btnArea > .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	border: solid 2px #999;
	border-radius: 10px;

	font-size: 20px;
	color: #000;
	background-color: #ccc;

	cursor: pointer;

	padding: 0 20px;
	margin: 0 10px;
}
.configPane > #priceArea {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 600px;
	margin: auto;
}
.configPane > #priceArea > .priceItem {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.configPane > #priceArea > .priceItem > #priceBox {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 60px;
	border: solid 4px #999;

	font-size: 26px;
	color: #222;
	background-color: #fff;
	text-align: center;
}
.configPane > #priceArea > .priceItem > #yenTxt {
	font-size: 32px;
	margin-left: 10px;
	margin-bottom: -10px;
}
.configPane > #priceArea > #karaTxt {
	font-size: 36px;
}


#rangeCtrl {
	position: relative;
	width: 580px;
	height: 15px;
	border: solid 2px #999;
	background-color: #fff;
	border-radius: 5px;

	margin: auto;
	margin-top: 50px;
	margin-bottom: 80px;
}
#rangeCtrl > #activeBar {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #c80421;
}
#rangeCtrl > .marker {
	position: absolute;
	top: 50%;

	width: 40px;
	height: 40px;
	border: solid 4px #999;
	background-color: #fff;
	border-radius: 10px;

	transform: translate(-50%, -50%);

	cursor: pointer;
}


.chkCtrl {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;

	margin-left: 50px;
	margin-bottom: 30px;
}
.chkCtrl > #chkBox {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: solid 6px #fff;
}
.chkCtrl > #chkBox > #chkMark {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: #c80421;
}
.chkCtrl > #label {
	margin-left: 20px;
	font-size: 26px;
	line-height: 50px;
}



/***************************************
商品選択画面
***************************************/
#ProdSelectPage {
	padding-bottom: 30px;
}


/***************************************
選択情報画面
***************************************/
#SelectedInfoPage {
	background-color: var(--color-bg-stock);
}
#SelectedInfoPage > #stockPane {
	margin-top: 30px;
}


/***************************************
Look選択画面
***************************************/
#LookSelectPage {
	padding-bottom: 30px;

	text-align: center;
	background-color: rgba(0,0,0,0.8);
}
#LookSelectPage > #lookItemArea {
	margin-top: 60px;
	margin-bottom: 100px;
}
#LookSelectPage > #lookItemArea > #lookItem {
	margin-bottom: 50px;
}
#LookSelectPage > #lookItemArea > #lookItem > #img {
	width: 400px;
	margin-bottom: 30px;
}
#LookSelectPage > #lookItemArea > #lookItem > #btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 500px;
	height: 100px;
	border-radius: 50px;
	background-color: #fff;

	font-size: 28px;
	line-height: 34px;
	color: #000;

	cursor: pointer;
	word-break: keep-all;
}
#LookSelectPage > #lookItemArea > #lookItem > #btn::after {
	content: "";
	position: absolute;
	right: 40px;
	top: 42px;
	width: 14px;
	height: 14px;
	border-top: solid 2px #000;
	border-right: solid 2px #000;
	transform: rotate(45deg);
}



/***************************************
チュートリアル表示
***************************************/
#tutorial {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#tutorial #btnSelProd {
	position: absolute;
} 
#tutorial #btnSelProd > #popup {
	top: -10px;
	left: 130px;
}
#tutorial #multiBtn {
	position: absolute;
}
#tutorial #multiBtn > #popup {
	top: -30px;
	left: 20px;
	transform: translateY(-100%);
}


.withFade {
	transition-property: opacity visibility;
	transition-duration: 300ms;
}


.popupHint {
	--popup-bg: #fee;
	--popup-border: #555;

	position: absolute;
	display: inline-block;
	padding: 20px;
	background-color: var(--popup-bg);
	border: 2px solid var(--popup-border);
	border-radius: 10px;	
	white-space: nowrap;

	font-size: 26px;
	color: #000;
}

#btnSelProd .popupHint::before {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: -15px;
	top: 20px;
	border-right: 15px solid var(--popup-border);
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;	
}
#btnSelProd .popupHint::after {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: -12px;
	top: 20px;
	border-right: 15px solid var(--popup-bg);
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
}

#multiBtn .popupHint::before {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: 20px;
	bottom: -15px;
	border-top: 15px solid var(--popup-border);
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;	
}
#multiBtn .popupHint::after {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: 20px;
	bottom: -12px;
	border-top: 15px solid var(--popup-bg);
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
}