@charset "utf-8";


body {
	overflow-x: hidden;
}


#contents {
	width: 960px;
	overflow-x: hidden;
	position: relative;
	
	/* フォント */
	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;


	border-left: solid 1px var(--frm-color);
	border-right: solid 1px var(--frm-color);
	border-top: solid 4px var(--color-red);
	display: inline-flex;
	text-align: left;

	z-index: 0;
}

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



.hideScrollbar::-webkit-scrollbar, 
.hideScrollbarV::-webkit-scrollbar {
	opacity: 0;
	height: 10px;
	width: 0;
}
.cstmScrollbar::-webkit-scrollbar {
	height: 10px;
}
.cstmScrollbar::-webkit-scrollbar-track {
	border: 0;
	margin: 5px;
}
.cstmScrollbar::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: #999999;
}

/* for Firefox */
.hideScrollbarV {
	scrollbar-width: none;
}
.hideScrollbar {
	scrollbar-width: thin;
	scrollbar-color: #99999900 #00000000;
}
.cstmScrollbar {
	scrollbar-width: thin;
	scrollbar-color: #999999ff #00000000;
}


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

/*********************************************
ビューエリア（画面上段：YMKモジュールの配置場所）
*********************************************/
#viewArea {
	position: relative;
	width: 330px;
	height: 440px;
	overflow: hidden;

	background-color: #999;
	z-index: 10;

	display: inline-block;
	margin: 25px 54px 30px 54px;
}

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

/*********************************************
パネルエリア（画面下段）
*********************************************/
#panelArea {
	position: relative;
	/* heightはjsで設定 */
	overflow-y: scroll;

	z-index: 1;

	border-left: solid 1px var(--frm-color);
	flex: 1;
}

/*********************************************
トップ画面
*********************************************/
#topSeqPane {
	position: relative;
	width: 100%;
	text-align: center;
}
#topSeqPane > #text {
	padding-top: 190px;
	font-size: 16px;
	font-weight: bold;
	line-height: 28px;
	color: var(--color-red);	
}
#topSeqPane > #comment {
	margin-top: 20px;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.025em;	
}
#topSeqPane > #ver {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 10px;
	color: #bbb;
}

/*********************************************
シミュレーション画面
*********************************************/
#simSeqPane {
	position: relative;
	width: 100%;
}

#simSeqPane #panelPadBtm
{
	background-color: #fff;
	width: 100%;
	/* heightはjsで設定 */
}
#simSeqPane #panelPadBtm.withStock
{
	background-color: var(--color-bg-stock);
}

#simSeqPane #loading {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 150px;
	height: 150px;
	color: #c9caca;
	background-color: #fff;
}

/*---------------------
ブランド選択エリア
---------------------*/
#brandPane {
	width: 100%;
	height: 134px;
	background-color: var(--color-bg-category);
}
#brandPane > #label {
	padding-left: 20px;
	padding-top: 8px;
	font-size: 16px;
	font-weight: bold;
}
#brandPane > #label > #comment {
	margin-left: 10px;
	font-weight: normal;
	letter-spacing: -0.025em;
}
#brandPane > #btnArea {
	position: relative;
	width: 100%;
	overflow-x: hidden;
}
#brandPane > #btnArea > #btnsLayer {
	position: relative;
	margin-top: 7px;
	width: 100%;
	height: 90px;
}

#brandPane > #btnArea > #arrowBtn {
	position: absolute;
	top: 43px;
	width: 40px;
	height: 50px;
}
#brandPane > #btnArea > #arrowBtn.left {
	left: 17px;
}
#brandPane > #btnArea > #arrowBtn.right {
	right: 15px;
}
#brandPane > #btnArea > #arrowBtn.left::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 14px;
	height: 14px;
	border-bottom: solid 2px var(--grayline-color);
	border-left: solid 2px var(--grayline-color);
	transform: rotate(45deg);
}
#brandPane > #btnArea > #arrowBtn.right::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 14px;
	height: 14px;
	border-top: solid 2px var(--grayline-color);
	border-right: solid 2px var(--grayline-color);
	transform: rotate(45deg);
}

#brandPane .brandBtn {
	width: 106px;
	height: 40px;
	background-color: #fff;
	cursor: pointer;

	font-size: 14px;
	letter-spacing: -0.075em;
	line-height: 40px;
	text-align: center;
}
#brandPane .brandBtn > #logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#brandPane .brandBtn > #frm {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: solid 1px var(--frm-color);
}
#brandPane .brandBtn.active > #frm {
	border: solid 2px var(--color-red);
}

/*---------------------
カテゴリ選択エリア
---------------------*/
#categoryPane {
	position: relative;
	width: 100%;
}
#categoryPane > #categoryArea {
	width: 100%;
	display: flex;
}
#categoryPane > #categoryArea > .btn {
	width: 104px;
	height: 55px;
	font-size: 14px;
	letter-spacing: -0.025em;
	line-height: 16.69px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;

	text-align: center;
}
#categoryPane > #categoryArea > .btn.active {
	color: var(--color-active-category);
	border-bottom: solid 4px var(--color-active-category);
}

#categoryPane > #subCategoryArea {
	position: relative;
	width: 100%;
	height: 50px;
	background-color: var(--color-bg-category);
	border-top: solid 1px var(--frm-color);
	white-space:nowrap;
/*	overflow-x: scroll;	*/
	padding: 9px 15px 0 8px;
}
#categoryPane > #subCategoryArea .btn {
	display: inline-block;
	margin: 0 5px;
	height: 32px;
	border-radius: 16px;
	border: solid 1px var(--frm-color);
	font-size: 16px;
	letter-spacing: -0.025em;
	font-feature-settings: "palt"; /* メトリクス */
	color: var(--frm-color);
	background-color: #fff;
	line-height: 30px;
	padding: 0 15px;
	cursor: pointer;
}
#categoryPane > #subCategoryArea .btn.active {
	font-weight: bold;
	color: #fff;
	border: solid 1px 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 1px var(--grayline-color);
}
#prodPane > #brandLogo {
	position: absolute;
	top: 10px;
	left: 20px;
	width: 106px;
	height: 40px;
	object-fit: contain;
	z-index: 110;
}
#prodPane > #brandName {
	position: absolute;
	top: 10px;
	left: 140px;
	font-size: 16px;
	letter-spacing: -0.025em;
	line-height: 40px;
	z-index: 110;
}

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

#prodPane > #itemsLayer {
	position: relative;
	width: 100%;
	background-color: #fff;
	overflow-x: scroll;
	white-space: nowrap;
	padding: 60px 10px 10px 10px;
	z-index: 100;
}
#prodPane > #padBottom {
	width: 100%;
	height: 10px;
}
#prodItem {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 110px;
	white-space: normal;
	margin: 0 15px;
}
#prodItem > #prodImg {
	position: relative;
	width: 100%;
	height: 110px;
	cursor: pointer;
}
#prodItem > #prodImg > #img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#prodItem > #prodImg > #frm {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#prodItem > #prodName {
	margin-top: 18px;
	font-size: 14px;
	line-height: 16.5px;
	letter-spacing: -0.025em;
}
#prodItem > #yakuji {
	font-size: 14px;
	letter-spacing: -0.05em;
}
#prodItem > #mark {
	margin-top: 6px;
	font-size: 10px;
	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 4px 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;
}
#skuPane #prodItem {
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 25px;
}
#skuPane #prodItem > #prodImg {
	cursor: initial;
}
#skuPane > #itemsLayer {
	position: relative;
	display: inline-block;
	width: calc(100% - 155px);
	overflow-x: scroll;
	white-space: nowrap;
	padding: 27px 10px 10px 10px;
}
#skuPane > #padBottom {
	width: 100%;
	height: 15px;
}

#skuItem {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 80px;
	white-space: normal;
	margin: 0 10px;
}
#skuItem > #skuImg {
	position: relative;
	width: 100%;
	cursor: pointer;
}
#skuItem > #skuImg > #img {
	width: 100%;
}
#skuItem > #skuImg > #frm {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: solid 1px var(--frm-color);
}
#skuItem > #skuName {
	margin-top: 18px;
	font-size: 14px;
	line-height: 16.5px;
	letter-spacing: -0.025em;
}
#skuItem > #mark {
	margin-top: 6px;
	font-size: 10px;
	letter-spacing: -0.05em;
}
#skuItem.active > #skuImg > #frm {
	border: solid 4px 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: 30px;
	margin-bottom: 10px;
	font-size: 16px;
	letter-spacing: -0.025em;
	font-weight: bold;
	color: var(--color-text-stockLabel);
}
#stockItem {
	position: relative;
	width: 480px;
	margin: auto;
	padding-bottom: 30px;
	text-align: left;
}
#stockItem > #label {
	font-size: 16px;
	font-weight: bold;
	letter-spacing: -0.025em;
}
#stockItem > #label::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 6px;
	background-color: var(--color-dot-biruiLabel);
	margin-right: 10px;
}
#stockItem > #itemArea {
	margin-top: 20px;
	padding-bottom: 20px;
	background-color: #fff;
}
#stockItem > #itemArea > #prodImg {
	width: 110px;
	height: 110px;
	border: solid 1px var(--frm-color);
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 10px;
	vertical-align: top;
}
#stockItem > #itemArea > #skuImg {
	display: inline-block;
	position: relative;
	margin-top: 20px;
	margin-right: 20px;
	width: 80px;
	vertical-align: top;
}
#stockItem > #itemArea > #skuImg > img {
	width: 100%;
}
#stockItem > #itemArea > #texts {
	display: inline-block;
	width: 240px;
	margin-top: 20px;
}
#stockItem > #itemArea > #texts > #brandName {
	font-size: 14px;
	letter-spacing: -0.05em;
}
#stockItem > #itemArea > #texts > #prodName {
	font-size: 16px;
	line-height: 18px;
	font-weight: bold;
	letter-spacing: -0.05em;
	margin-top: 10px;
}
#stockItem > #itemArea > #texts > #yakuji {
	font-size: 16px;
	letter-spacing: -0.05em;
	margin-top: 5px;
}
#stockItem > #itemArea > #texts > #skuName {
	font-size: 16px;
	letter-spacing: -0.05em;
	line-height: 18px;
	margin-top: 10px;
}
#stockItem > #itemArea > #texts > #mark {
	font-size: 12px;
	letter-spacing: -0.05em;
	margin-top: 8px;
}

#stockItem > #itemArea > #btnDetail {
	position: relative;
	display: inline-block;
	width: 280px;
	height: 50px;
	background-color: var(--color-btn-detail);
	text-align: center;
	color: #fff;
	font-size: 16px;
	letter-spacing: -0.025em;
	line-height: 50px;
	border-radius: 25px;
	cursor: pointer;
	margin-left: 20px;
	margin-right: 30px;
	margin-top: 30px;
}
#stockItem > #itemArea > #btnDetail::after {
	content: "";
	position: absolute;
	top: 20px;
	right: 20px;
	width: 10px;
	height: 10px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
}

#stockItem > #itemArea > #btnDelete,
#stockItem > #itemArea > #btnChange {
	position: relative;
	display: inline-block;
	width: 130px;
	height: 50px;
	color: var(--color-btn-delete_fg);
	background-color: var(--color-btn-delete_bg);
	text-align: center;
	font-size: 16px;
	letter-spacing: -0.025em;
	line-height: 50px;
	border-radius: 25px;
	border: solid 1px var(--color-btn-delete_fg);
	cursor: pointer;
}
#stockItem > #itemArea > #btnDelete::after {
	content: "\02715";
	position: absolute;
	right: 18px;
	color: var(--color-btn-delete_fg);
}
#stockPane > #btnDeleteAll {
	position: relative;
	display: inline-block;
	width: 320px;
	height: 50px;
	color: var(--color-btn-deleteAll_fg);
	background-color: var(--color-btn-deleteAll_bg);
	text-align: center;
	font-size: 16px;
	letter-spacing: -0.025em;
	line-height: 50px;
	border-radius: 25px;
	border: solid 1px var(--color-btn-deleteAll_fg);
	cursor: pointer;
	margin-bottom: 100px;	
}
#stockPane > #btnDeleteAll::after {
	content: "\02715";
	position: absolute;
	right: 20px;
	color: var(--color-btn-deleteAll_fg);
}

/*---------------------
TOPボタン
---------------------*/
#topBtn {
	position: absolute;
	right: 30px;
	bottom: 30px;
	width: 60px;
	height: 60px;
	background-color: var(--color-btn-top);
	border-radius: 30px;
	font-size: 15px;
	color: #fff;
	text-align: center;
	line-height: 72px;
	cursor: pointer;
	z-index: 1100;
	visibility: hidden;
	opacity: 0;
	transition-property: opacity visibility;
	transition-duration: 500ms;
}
#topBtn::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 26px;
	width: 8px;
	height: 8px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(-45deg);
}

/*---------------------
お試し中のアイテムボタン
---------------------*/
#stockBtn {
	position: absolute;
	padding-right: 10px;
	left: 15px;
	top: 405px;
	width: 167px;
	height: 32px;
	background-color: var(--color-red);
	border-radius: 16px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.025em;
	color: #fff;
	text-align: center;
	line-height: 32px;
	cursor: pointer;
	z-index: 100;

	visibility: hidden;
	opacity: 0;
	
	transition-property: opacity visibility;
	transition-duration: 300ms;	
}
#stockBtn::before {
	content: "";
	position: absolute;
	top: 10px;
	right: 12px;
	width: 8px;
	height: 8px;
	border-bottom: solid 2px #fff;
	border-left: solid 2px #fff;
	transform: rotate(-45deg);
}


/*********************************************
マスク選択
*********************************************/
#maskArea {
	position: absolute;
	left: 0;
	top: 485px;
	width: 440px;
	text-align: center;
}
#maskArea > #container {
	position: relative;
	display: inline-flex;
	width: 400px;
	align-items:center;
	justify-content: space-around;
}
#maskArea > #container > .maskItem {
	position: relative;
	width: 90px;
	height: 90px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-self: center;
	flex-direction: column;
}
#maskArea > #container > .maskItem > #imgArea {
	height: 55px;
	display: flex;
	align-items: center;
	justify-self: center;
	padding-top: 10px;
}
#maskArea > #container > .maskItem > #label {
	font-size: 14px;
	height: 30px;
	line-height: 30px;
	letter-spacing: -0.025em;
}
#maskArea > #container > .maskItem.active > #label {
	color: var(--color-red);
}
#maskArea > #container > .maskItem > #frm {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: solid 1px var(--frm-color);
}
#maskArea > #container > .maskItem.active > #frm {
	border-width: 2px;
	border-color: var(--color-red);
}



/*********************************************
複数SKU対応
*********************************************/
#multiBtn {
	position: absolute;
	top: 399px;
	left: 286px;
	width: 38px;
	height: 38px;
	background-color: var(--color-red);
	border-radius: 6px;
	cursor: pointer;
	z-index: 99;

	visibility: visible;
	opacity: 1;
	transition-property: opacity visibility;
	transition-duration: 300ms;	

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

#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: 32px;
	height: 32px;
	border-radius: 16px;
	background-color: #fff;
	cursor: pointer;
}
#multiColor > #btnClose::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 16px;
	width: 16px;
	border-top: solid 1px #000;
	transform: rotate(45deg);
}
#multiColor > #btnClose::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 16px;
	width: 16px;
	border-top: solid 1px #000;
	transform: rotate(-45deg);
}

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

#multiColor #selectPattern > #selCol > #label {
	margin-top: 60px;
	display: inline-flex;
	width: 460px;
	height: 30px;
	background-color: #fff;
	color: var(--color-red);
	align-items: center;
	justify-content: center;
}
#multiColor #selectPattern > #selCol > #text {
	margin-top: 40px;
}
#multiColor #selectPattern > #selCol > #selArea {
	margin-top: 30px;
}
#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: 130px;
}
#multiColor #selectPattern > #selPat > #selArea {
	margin-top: 30px;
}
#multiColor #selectPattern > #selPat > #selArea > #selItem {
	margin: 0 10px 0 10px;
	width: 200px;
}
#multiColor #selectPattern > #selPat > #selArea > #selItem > img {
	width: 100%;
	height: 100%;
}
#multiColor #selectPattern > #selPat > #btnBack {
	margin-top: 40px;
	position: relative;
	display: inline-block;
	width: 210px;
	height: 32px;
	border-radius: 16px;
	background-color: #fff;
	color: #000;
	line-height: 32px;
	font-size: 16px;
}
#multiColor #selectPattern > #selPat > #btnBack::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 20px;
	width: 10px;
	height: 10px;
	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: 140px;
	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: 16px;
	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: 16px;
	line-height: 40px;
	letter-spacing: -0.025em;
	color: #fff;
	display: inline-flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 500px;
}
#multiColor #confirmMenu > #label {
	margin-top: 60px;
	display: inline-flex;
	width: 460px;
	height: 30px;
	background-color: #fff;
	color: var(--color-red);
	align-items: center;
	justify-content: center;
}
#multiColor #confirmMenu > #text {
	margin-top: 40px;
}
#multiColor #confirmMenu > #btnRetry {	
	margin-top: 40px;
}
#multiColor #confirmMenu > #btnChange {	
	margin-top: 30px;
}
#multiColor #confirmMenu > #btnClear {	
	margin-top: 30px;
}
#multiColor #confirmMenu > #btnSim {	
	margin-top: 30px;
}

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


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


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


#multiColor #selProd {
	font-size: 16px;
	letter-spacing: -0.025em;
	color: #fff;
	text-align: center;
}
#multiColor #selProd > #instArea {
	margin-top: 40px;	
}
#multiColor #selProd > #instArea > #text {	
	display: flex;
	align-items: center;
	justify-content: center;
}
#multiColor #selProd > #instArea > #text > #step {
	margin-right: 10px;
	display: inline-block;
	width: 66px;
	height: 30px;
	line-height: 30px;
	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: 150px;
	height: 90px;
}
#multiColor #selProd > #btnArea {	
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
#multiColor #selProd > #btnArea > #btnBack {
	margin-right: 15px;	
	margin-left: 15px;	
}
#multiColor #selProd > #btnArea > #btnNext {	
	margin-left: 15px;	
}
#multiColor #selProd > #btnArea > #btnCancel {	
	margin-right: 15px;	
}
#multiColor #selProd > #btnArea > #btnCancel::before {	
	content: "";
	position: absolute;
	top: 15px;
	right: 16px;
	width: 18px;
	border-top: solid 2px;
	transform: rotate(45deg);
}
#multiColor #selProd > #btnArea > #btnCancel::after {
	content: "";
	position: absolute;
	top: 15px;
	right: 16px;
	width: 18px;
	border-top: solid 2px;
	transform: rotate(-45deg);
}

#multiColor #selProd > #btnArea > .btn {
	position: relative;
	font-size: 16px;
	letter-spacing: 0;
	width: 210px;
	height: 32px;
	border-radius: 16px;
	cursor: pointer;
	background-color: #fff;
	color: #000;
	line-height: 32px;
}
#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: 11px;
	left: 20px;
	width: 10px;
	height: 10px;
	border-left: solid 2px;
	border-bottom: solid 2px;
	transform: rotate(45deg);
}
#multiColor #selProd > #btnArea > .btn.iconR::before {
	content: "";
	position: absolute;
	top: 11px;
	right: 20px;
	width: 10px;
	height: 10px;
	border-right: solid 2px;
	border-top: solid 2px;
	transform: rotate(45deg);
}

#multiColor #prodList {
	margin-top: 30px;
	position: relative;
	display: inline-block;
	width: 880px;
	background-color: #fff;
	color: #000;
	overflow-y: scroll;
}
#multiColor #prodList > #listBase {
	position: relative;
	width: 100%;
	text-align: left;
}
#multiColor #prodList #skuPane {
	padding-top: 20px;
}
#multiColor #prodList #skuPane #itemsLayer {
	width: 725px;
	padding-top: 40px;
}
#multiColor #prodList #skuPane #selTag {
	position: absolute;
	top: -21px;
	left: 0;
	width: 80px;
	height: 21px;
	background-color: var(--color-active-selSku);
	color: #fff;
	font-size: 14px;
	letter-spacing: -0.025em;
	text-align: center;
	line-height: 21px;
}






#shield {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 9999;
}



/*********************************************
LOOK対応
*********************************************/
#lookListBtn {
	position: absolute;
	top: 406px;
	left: 65px;
	width: 120px;
	height: 32px;
	background-color: var(--color-red);
	border-radius: 16px;
	cursor: pointer;
	z-index: 99;

	visibility: visible;
	opacity: 1;
	transition-property: opacity visibility;
	transition-duration: 300ms;	

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

	color: #fff;
	font-size: 14px;
	letter-spacing: -0.025em;

}

#otherLookBtnArea {
	position: relative;
	width: 100%;
	text-align: center;
	background-color: var(--color-bg-stock);

	padding-top: 20px;
	padding-bottom: 110px;
}
#otherLookBtnArea > #otherLookBtn {
	position: relative;
	display: inline-block;
	width: 320px;
	height: 50px;

	border: solid 1px #000;
	border-radius: 25px;

	color: #000;
	background-color: #fff;
	font-size: 16px;
	letter-spacing: -0.025em;
	line-height: 50px;

	cursor: pointer;
}
#otherLookBtnArea > #otherLookBtn::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 20px;
	width: 10px;
	height: 10px;
	border-top: solid 1px #000;
	border-left: solid 1px #000;
	transform: rotate(-45deg);
}

#lookSelect {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	z-index: 5;

	overflow-y: scroll;
}
#lookSelect > #btnClose {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background-color: #fff;
	cursor: pointer;
}
#lookSelect > #btnClose::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 16px;
	width: 16px;
	border-top: solid 1px #000;
	transform: rotate(45deg);
}
#lookSelect > #btnClose::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 16px;
	width: 16px;
	border-top: solid 1px #000;
	transform: rotate(-45deg);
}
#lookSelect > #label {
	margin-top: 60px;
	display: inline-block;
	font-size: 16px;
	letter-spacing: -0.025em;
	color: var(--color-red);
	width: 460px;
	height: 30px;
	background-color: #fff;
	line-height: 30px;
}
#lookSelect > #selectArea {
	margin-top: 40px;
	margin-bottom: 40px;
	width: 750px;

	display: inline-flex;
	align-items: flex-start;
	justify-content: start;
	flex-wrap: wrap;
}
#lookSelect > #selectArea > #lookItem {
	margin: 0 20px 50px 20px;
	width: 210px;
}
#lookSelect > #selectArea > #lookItem > #img {
	width: 150px;
	margin-bottom: 20px;
}
#lookSelect > #selectArea > #lookItem > #btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 210px;
	height: 50px;
	border-radius: 25px;
	background-color: #fff;

	font-size: 16px;
	line-height: 20px;
	color: #000;

	cursor: pointer;
	word-break: keep-all;
}
#lookSelect > #selectArea > #lookItem > #btn::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 21px;
	width: 8px;
	height: 8px;
	border-top: solid 1px #000;
	border-right: solid 1px #000;
	transform: rotate(45deg);
}




/* 開発環境用のダミーフッター向け */
footer.dummy {
	position: relative;
	width: 100%;
	height: 50px;
	background-color: #000;
	color: #fff;
	text-align: center;
	line-height: 50px;
	font-size: 24px;
	letter-spacing: 0.1em;
	z-index: 999;
}