@charset "utf-8";


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


body {
	width: 100%;
	overflow-x: hidden;
	/* Chromeでスクロールしないので削除
	overscroll-behavior: none;
	*/
}


#contents *,
#contents *::before,
#contents *::after {
	box-sizing: border-box !important;
}

#contents {
	position: relative;
	background-color: #F9F9F6;
	z-index: 0;
	overscroll-behavior: none;	/* chrome対策で追加 */
}

#contents img {
	vertical-align: initial;
	max-width: initial;
}



makeup-finder {
	display: block;
	position: relative;
	width: 390px;
	height: 100%;
	overflow-x: hidden;

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

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

	/* 基本フォント */
	font-family: 游ゴシック体,yugothic,游ゴシック,Yu Gothic,Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,sans-serif;
	color: #484848;
}

#pageLayer {
	position: relative;
	width: 100%;

	min-height: 100vh;
	margin-bottom: 68px;

}

.page {
	height: 100%;

	position: relative;
	width: 100%;

	text-align: center;
}


/*--------------------------
テキストボタン
--------------------------*/
.textBtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-size: 13px;
	font-weight: 500;

	cursor: pointer;
}
.textBtn.disabled {
	opacity: 0.3;
}
.textBtn.withBakArrow::before {
	content: "";

	width: 10px;
	height: 10px;
	border-bottom: solid 2px currentColor;
	border-left: solid 2px currentColor;

	transform: rotate(45deg);
	margin-right: 5px;
}
.textBtn.withFwdArrow::after {
	content: "";

	width: 10px;
	height: 10px;
	border-bottom: solid 2px currentColor;
	border-right: solid 2px currentColor;

	transform: rotate(-45deg);
	margin-left: 5px;
}

/*--------------------------
矩形ボタン
--------------------------*/
.rectBtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 342px;
	height: 60px;
	background-color: #484848;

	cursor: pointer;

	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 36px;
	letter-spacing: 0.05em;
}
.rectBtn.red {
	background-color: #BB0F12;
}
.rectBtn.white {
	background-color: #FFF;
	color: #484848;
	border: solid 1px #484848;
}
.rectBtn.disabled {
	background-color: #DDD;
}


/*--------------------------
閉じるボタン（×マークのみ）
--------------------------*/
.closeBtn {
	padding: 10px;
}
.closeBtn > #icon {
	width: 20px;
	height: 20px;
}
.closeBtn.small > #icon {
	width: 14px;
	height: 14px;
}

/*--------------------------
ヒントボタン（？アイコン付き）
--------------------------*/
.hintBtn {
	font-size: 13px;
	font-weight: 500;
	color: #BB0F12;
	z-index: 10;
	cursor: pointer;
}
.hintBtn > #icon {
	margin-left: 8px;
	height: 16px;
	vertical-align: middle;
}



/*--------------------------
メニューバー
--------------------------*/
#menuBar {
	position: fixed;
	bottom: 0;
	left: 0;

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

	width: 100%;
	height: 68px;
	overflow-y: hidden;
	background-color: #fff;

	border-top: solid 2px #E9E9E9;
}
#menuBar > .menuItem {
	padding-top: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px;

	cursor: pointer
}
#menuBar > .menuItem.inactive {
	opacity: 0.3;
}



/*--------------------------
ロゴ「MakeupFinderで行う3つの診断」
--------------------------*/
.logoPane {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
}
.logoPane > #img {
	
}
.logoPane > #text {
	margin-top: 12px;
	
}


/*--------------------------
下から出てくるオーバーレイの土台
--------------------------*/
#slideupOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #F9F9F6;

	z-index: 9999;
}
#slideupOverlay > #shield {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
#slideupOverlay > #shield::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(3px);
	z-index: -1;
}

#slideupOverlay > #topBar {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #E7E7E7;

	margin-top: -1px;
	background-color: #F9F9F6;
}
#slideupOverlay > #topBar > .leftBtn {
	position: absolute;
	left: 25px;
	color: #676767;
}
#slideupOverlay > #topBar > .rightBtn {
	position: absolute;
	margin-top: 5px;
	right: 15px;
	color: #676767;
}

#slideupOverlay > #topBar > .logoPane {
	align-items: flex-start;
	margin-left: 25px;
}
#slideupOverlay > #topBar > .logoPane > #img {
	width: 160px;
	margin-top: 50px; /* 表示位置を下げる */
}
#slideupOverlay > #topBar > .logoPane > #text {
	margin-top: 5px; /* 表示位置を下げる */
	font-size: 12px;
}
#slideupOverlay > #topBar.no-border {
	border-bottom: none;
}

#slideupOverlay > #layerForPage {
	position: relative;
} 


/*--------------------------
ポップアップダイアログの土台
--------------------------*/
#popupDlg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;

	z-index: 9999;

	display: flex;
	align-items: center;
	justify-content: center;
}
#popupDlg > #shield {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(92, 92, 92, 0.8);
	z-index: 0;
}
#popupDlg > #dlgLayer {
	position: relative;
	display: inline-block;
	background-color: #fff;
	z-index: 1;

	width: 340px;
	max-height: 75vh;
	overflow-x: hidden;
	overflow-y: scroll;
	text-align: center;
}




/***************************************
TOP画面
***************************************/
#topPage {
}
#topPage > #img {
	width: 100%;
}
#topPage > #text {
	margin-top: 24px;
	font-size: 16px;
	font-weight: 500;
	line-height: 28.8px;
}
#topPage > #startBtn {
	margin-top: 24px;
	margin-bottom: 40px;
}

#topPage > #logo {
	margin-top: 60px;
	margin-bottom: 40px;
}
#topPage > #infos {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: 56px;
} 
#topPage > #infos > .info {
	display: inline-block;
	position: relative;
	width: 342px;
}
#topPage > #infos > .info > #img {
	width: 100%;
	height: 342px;
	object-fit: contain;
}
#topPage > #infos > .info > #label {
	margin-top: 32px;	
	font-size: 24px;
	font-weight: 600;
}
#topPage > #infos > .info > #text {
	margin-top: 8px;
	display: inline-block;
	width: 294px;
	font-size: 14px;
	font-weight: 500;
	line-height: 28px;
	text-align: justify;	
}

#topPage > #startBtn2 {
	margin-top: 48px;
}

#topPage > #envInfo {
	margin-top: 40px;
	margin-bottom: 40px;
	display: inline-block;
	width: 85%;
	text-align: left;
	font-size: 10px;
	font-weight: 400;
	line-height: 14px;
}

#topPage > #ver {
	position: absolute;
	right: 10px;
	bottom: 5px;
	font-size: 9px;
	color: #aaa;
}


/***************************************
イントロ画面
***************************************/
#introPage {
	overflow-y: scroll;
}
#introPage > #contentsArea {
	position: relative;
	width: 100%;
	overflow-y: scroll;
	padding-bottom: 20px;
}

#introPage > #btnArea {
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #F9F9F6;
	display: flex;
	flex-direction: column;
	align-items: center; /* 垂直方向に中央揃え */
	width: 100%;
	z-index: 1;
}

#introPage > #btnArea > #btnContainer {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

#introPage > #btnArea > #stepLabel {
	font-size: 16px;
	font-weight: 600;	
}
#introPage > #btnArea > #stepLabel > #bunbo {
	color: #C8C8C8;
}
#introPage > #btnArea > .indicator_line {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background-color: #E7E7E7;
}

#introPage > #btnArea > #btnContainer > #skipBtn {
	width: 96px;
	height: 44px;
	left: 30px;
	font-size: 14px;
	margin-bottom: 24px;
}
#introPage > #btnArea > #btnContainer > #nextBtn {
	width: 96px;
	height: 44px;
	right: 34px;
	font-size: 14px;
	margin-bottom: 24px;
}
#introPage > #btnArea > #startBtn {
	margin: 0 auto; /* 要素自体を中央に配置 */
	margin-bottom: 24px;
}

#introPage .introStep {
	position: relative;

}
#introPage .introStep > #logo {
	margin-top: 32px;
}
#introPage .introStep > #info {
	margin-top: 24px;
}

.introInfo {
	display: inline-block;
}
.introInfo > #figArea {
	display: inline-block;
	position: relative;
	margin-top: 30px;
	width: 260px;
	height: 155px;
	background-color: #fff;
	overflow: hidden;
}
.introInfo > #figArea > #label {
	margin-top: 20px;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
}
.introInfo > #figArea > #forFace {
	position: relative;
	display: flex;
	margin-top: 10px;
	align-items: flex-start;
	justify-content: center;
}
.introInfo > #figArea > #forFace > #illust {
	padding-left: 20px;
	height: 90px;
}
.introInfo > #figArea > #forFace > .resultChart {
	margin-top: 10px;
	transform-origin: center top;
	transform: scale(0.5);
}

.introInfo > #figArea > .persoalColorChart {
	margin-top: 8px;
	transform-origin: center top;
	transform: scale(0.55);
}
.introInfo > #figArea > .skinMap {
	margin-top: 10px;
	transform-origin: center top;
	transform: scale(0.65);
}



.introInfo > #label {
	margin-top: 15px;
	font-size: 16px;
	font-weight: 600;
}
.introInfo > #text {
	margin-top: 15px;

	font-size: 13px;
	font-weight: 500;
	line-height: 23px;
}


#introPage #terms {
	position: relative;
}
#introPage #terms > #label {
	margin-top: 48px;

	font-size: 20px;
	font-weight: 600;
}

#introPage #terms > #textArea {
	margin-top: 24px;

	display: inline-block;
	width: 342px;
	height: 204px;
	background-color: #fff;

	padding: 24px;
	
	font-size: 13px;
	font-weight: 400;
	line-height: 27.3px;
	text-align: left;
}

#introPage #terms > #textArea > #textContent {
	overflow-y: scroll;
	width: 300px;
	height: 180px;
	padding-right: 20px;
}

#introPage #terms > #chkCtrl {
	margin-top: 32px;

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

	gap: 10px;
}
#introPage #terms > #chkCtrl > #box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;

	border: 1px solid #6F6F6F;
	background-color: #fff;	
}
#introPage #terms > #chkCtrl > #box > #icon {
	margin-top: 2px;
}
#introPage #terms > #chkCtrl.checked > #box {
	background-color: #6F6F6F;	
}
#introPage #terms > #chkCtrl > #label {	
	font-size: 15px;
	font-weight: 500;
}


/***************************************
問診画面
***************************************/
#enquetePage {

}
#enquetePage > #contentsArea {
	position: relative;
	width: 100%;
	overflow-y: scroll;
	padding-bottom: 20px;
}

.enqueteStep > #label {
	margin-top: 40px;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.enqueteStep > #label > #step {
	font-family: Roboto;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.07em;
	color: #BB0F12;
}
.enqueteStep > #label > #text {
	font-size: 12px;
	font-weight: 600;
}
.enqueteStep > #indicator {
	margin-top: 24px;
}

.enqueteStep .indicator {	
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
}
.enqueteStep .indicator > #bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 70px;
	height: 70px;
	transform: rotate(-90deg);
}
.enqueteStep .indicator > #fg {
	position: absolute;
	left: 50%;
	top: 22px;
	display: flex;
	justify-content: space-between; /* 子要素を左右に配置 */
	align-items: baseline;
	transform: translateX(-50%);
}
.enqueteStep .indicator > #fg > #bunshi {
	font-family: Roboto;
	font-size: 19.61px;
	font-weight: 500;
	color: #BB0F12;
}
.enqueteStep.q10 .indicator > #fg > #bunshi {
	letter-spacing: -0.05em;
}
.enqueteStep .indicator > #fg > #bunbo {
	margin-left: 2px;
	font-family: Roboto;
	font-size: 14.01px;
	font-weight: 500;
	letter-spacing: -0.03em;
	color: #999;	
}

#indicator_line {
	margin-top: 24px;
}

.indicator_line {	
	position: relative;
	display: inline-flex;
	align-items: end;
	justify-content: flex-end;
	width: 680px;
	height: 30px;
}

.indicator_line > #fg {
	position: absolute;
	top: 0px;
	display: flex;
	transform: translateX(-50%);
	justify-content: flex-end;
	align-items: baseline;
	width: 8%; /* 必要に応じて幅を設定 */
}
.indicator_line > #fg > #bunshi {
	font-family: Roboto;
	font-size: 15px;
	font-weight: 500;
	color: #BB0F12;
	text-align: left; /* 左寄せ */
}

.indicator_line > #fg > #bunshi {
	letter-spacing: -0.05em;
}

.indicator_line > #fg > #bunbo {
	margin-left: 2px;
	font-family: Roboto;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: -0.03em;
	color: #999;
	text-align: right; /* 右寄せ */
}

.indicator_line > #bg {
	position: absolute;
	left: 0;
}

.enqueteStep > #base {
	margin-top: 12px;
	position: relative;
}
.enqueteStep > #base > #question {
	font-size: 17px;
	font-weight: 600;
	line-height: 32px;
}
.enqueteStep > #base > #question > #comment {
	font-size: 13px;
	font-weight: 400;
}
.enqueteStep > #base > #hintBtn {
	margin-top: 8px;
}

.enqueteStep > #base > #illustArea {
	margin-top: 16px;
	height: 60px;
}
.enqueteStep > #base > #illustArea > #img {
	height: 100%;
}
.enqueteStep > #base > #btnArea {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2列 */
	margin-top: 24px;
	justify-content: center;
	align-items: center; /* 垂直方向に中央揃え */

	gap: 10px;
}
.enqueteStep > #base > #btnArea > .enqueteBtn {
	width: 80%;
	height: 56px;
	line-height: 1.2;

	background-color: #F9F9F6;
	border: 1px solid #DDDDDD;

	font-size: 14px;
	font-weight: 600;	
	color: #484848;
}
.enqueteStep > #base > #btnArea > .enqueteBtn.selected {
	background-color: #BB0F12;
	border: none;
	color: #fff;
}
/* 1列目のアイテムを右寄せ */
.enqueteStep > #base > #btnArea > .enqueteBtn:nth-child(odd) {
    justify-self: end;
}

.enqueteStep > #base > #selectQ1 {
	margin-top: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.enqueteStep > #base > #selectQ1 > .selectBox {

	/*display: inline-block;*/
	display: flex;
	position: relative;
    align-items: center;
    justify-content: center;
	width: 220px;
	height: 56px;
	overflow: hidden;
	user-select: none;

	background-color: #fff;
	border: solid 2px #DDD;
}
.enqueteStep > #base > #selectQ1 > .selectBox select {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 56px;	
	opacity: 0;
}
.enqueteStep > #base > #selectQ1 > .selectBox select::-ms-expand {
    display: none;
}
.enqueteStep > #base > #selectQ1 > .selectBox > #mark {
	position: absolute;
	/*
	top: 16px;
	*/
	right: 24px;
	top: 50%;
    transform: translate(0, -52%);
	pointer-events: none;
}
.enqueteStep > #base > #selectQ1 > .selectBox > #view {
	position: absolute;
	top: 50%;
	transform: translate(0, -52%);
	left: 0;
	width: 100%;
	cursor: pointer;

	font-family: Roboto;
	font-size: 26px;
	font-weight: 400;
	line-height: 56px;
}
.enqueteStep > #base > #selectQ1 > #unitLabel {
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
}

#enquetePage > #btnArea {
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #F9F9F6;

	width: 100%;
	padding-top: 10px;
	z-index: 1;
	display: flex;
}
#enquetePage > #btnArea > #nextBtn {
	margin-bottom: 32px;
}
#enquetePage > #btnArea > #backBtn {
	margin-bottom: 48px;
}

/*--------------------------
問診ヒントダイアログ（現状はQ10にしかない）
--------------------------*/
.enqueteHintDlg {
}
.enqueteHintDlg > #title {
	margin-top: 48px;
}
.enqueteHintDlg > #closeBtn {
	margin: 32px 0;
	width: 294px;
	height: 56px;
	font-size: 16px;
}
.enqueteHintDlg > #q10 {
	margin-top: 24px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 24px;
}
.enqueteHintDlg > #q10 > .typePane {
	position: relative;
	width: 294px;
	padding-bottom: 32px;
	border-bottom: 1px solid #E5E5E5;
}
.enqueteHintDlg > #q10 > .typePane:last-child {
	border-bottom: none;
}
.enqueteHintDlg > #q10 > .typePane > #label {
	font-size: 16px;
	font-weight: 600;
	color: #BB0F12;
}
.enqueteHintDlg > #q10 > .typePane > #illust {
	margin-top: 16px;
	height: 130px;
}
.enqueteHintDlg > #q10 > .typePane > #text {
	margin-top: 24px;
	font-size: 13px;
	font-weight: 400;
	line-height: 27.3px;
	text-align: left;
}



/***************************************
撮影画面
***************************************/
#snapPage {
	height: 100%;
	overflow-y: scroll;
}
#snapPage #soundBtn {	
	position: absolute;
	top: 20px;
	left: 302px
}
#snapPage #aclArea {
	position: relative;
	width: 100%;
}

/*--------------------------
撮影方法
--------------------------*/
#snapEntry {
	position: relative;
}
#snapEntry > #label {
	margin-top: 40px;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
#snapEntry > #label > #step {
	font-family: Roboto;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.07em;
	color: #BB0F12;
}
#snapEntry > #label > #text {
	font-size: 12px;
	font-weight: 600;
}
#snapEntry > #illust {
	position: relative;
	margin-top: 16px;
}
#snapEntry > #illust > #img {
	height: 124px;
}
#snapEntry > #text {
	margin-top: 16px;

	font-size: 17px;
	font-weight: 600;
	line-height: 30.6px;
}
#snapEntry > #hintBtn {
	margin-top: 13px;
}
#snapEntry > #snapNotice {
}
#snapEntry > #snapBtn {
	margin-top: 20px;
	margin-bottom: 20px;
}

/*--------------------------
撮影方法のヒントダイアログ
--------------------------*/
#snapHintDlg {

}
#snapHintDlg > #logo {
	margin-top: 50px;
	margin-bottom: 24px;
}
#snapHintDlg > .introInfo {	
}
#snapHintDlg > .introInfo > #figArea {
	border: 1px solid #E5E5E5;
}
#snapHintDlg > .line {
	margin: 24px 0;
	display: inline-block;
	width: 287px;
	height: 1px;
	background-color: #E5E5E5;
}
#snapHintDlg > #closeBtn {
	margin-top: 40px;
	margin-bottom: 26px;
	width: 294px;
	height: 56px;
	font-size: 16px;
}


/*--------------------------
サウンドon/offスイッチ
--------------------------*/
.soundBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.soundBtn > #icon {
	position: absolute;
	top: 2.5px;
	left: 0;
}
.soundBtn > #switchBase {
	position: absolute;
	top: 0;
	left: 33px;
	width: 35px;
	height: 20px;
	background-color: #c9c9c9;
	border-radius: 10px;
}
.soundBtn > #switchBase > #knob {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background-color: #fff;
}
.soundBtn.on > #switchBase {
	background-color: #555;

}
.soundBtn.on > #switchBase > #knob {
	left: 2px;
}

/*--------------------------
撮影失敗画面（分析中画面や撮影画面で表示される）
--------------------------*/
#snapError {
	position: relative;
}
#snapError > #illust {
	margin-top: 60px;
	height: 140px;
	mix-blend-mode: darken;
}
#snapError > #text {
	margin-top: 30px;
	width: 100%;

	font-size: 16px;
	letter-spacing: 0.2em;
	font-weight: 500;	/* W5 */
	line-height: 26px;	
}
#snapError > #snapNotice {
	margin-top: 26px;
}
#snapError > #btnRetry {
	margin-top: 35px;
	margin-bottom: 35px;
}

.snapNotice {
	margin-top: 24px;
	/*padding: 24px 0;*/
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	gap: 8px;

	/*
	border-top: 1px solid #E7E7E7;
	border-bottom: 1px solid #E7E7E7;
	*/
}
.snapNotice > .item {
	margin-left: 12px;
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 8px;
}
.snapNotice > .item > #icon {
	height: 15px;
}
.snapNotice > .item > #text {
	text-align: left;
	width: 246px;
	font-size: 13px;
	font-weight: 500;
	line-height: 27.3px;
}


/***************************************
分析中画面
***************************************/
#analyzingPage {
	height: 100%;
}
#analyzingPage > #wrap {
	position: relative;
	height: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
#analyzingPage > #wrap > #imgArea {
	position: relative;
	width: 150px;
	height: 150px;
}
#analyzingPage > #wrap > #imgArea > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#analyzingPage > #wrap > #meter {
	margin-top: 8px;
}
#analyzingPage > #wrap > #text{
	margin-top: 16px;
	font-size: 15px;
	font-weight: 500;
}

.analyzingMeter {
	position: relative;
	display: inline-block;
}
.analyzingMeter > #counter {
	display: inline-block;
	height: 60px;
	text-align: right;

	font-family: Roboto;
	font-size: 50px;
	font-weight: 300;
	letter-spacing: -0.04em;
}
.analyzingMeter > #percent {
	margin-left: 6px;
	display: inline-block;
	font-family: Roboto;
	font-size: 28px;
	font-weight: 400;
	color: #929292;
	vertical-align: baseline;
}



/***************************************
分析結果画面
***************************************/
#resultPage {
}
#resultPage > #contentsArea {
	position: relative;
	width: 100%;
}
#resultPage > #contentsArea > #title {
	margin-top: 32px;
	margin-bottom: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
#resultPage > #contentsArea > #title > #eng {
	font-family: Roboto;
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.07em;
	color: #BB0F12;	
}
#resultPage > #contentsArea > #title > #jpn {
	font-size: 15px;
	font-weight: 600;
}
#resultPage > #contentsArea > #ankerMenu {
	position: relative;
	width: 100%;
	height: 82px;
}
#resultPage > #contentsArea > #ankerMenu > #menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 82px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1px;
	background-color: #F9F9F6;
	z-index: 20;
}
#resultPage > #contentsArea > #ankerMenu.float > #menu {
	position: fixed;
}

#resultPage > #contentsArea > #ankerMenu > #menu > .menuBtn {
	width: 114px;
	height: 50px;
	color: #fff;
	background-color: #D9D9D9;

	font-size: 14px;
	font-weight: 600;
	line-height: 15.4px;
}
#resultPage > #contentsArea > #ankerMenu > #menu > .menuBtn.active {
	background-color: #BB0F12;	
}


#resultPage > #contentsArea > #resultArea {
	position: relative;
	margin-bottom: 24px;
}


#resultPage > #contentsArea > #lookPane {
	margin: 24px 0;
	padding: 24px 0;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	width: 342px;
	background-color: #fff;
	gap: 24px;
}
#resultPage > #contentsArea > #lookPane > #imgArea {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
#resultPage > #contentsArea > #lookPane > #imgArea > img {
	width: 90px;
	height: 90px;
}
#resultPage > #contentsArea > #lookPane > #txt {
	font-size: 13px;
	font-weight: 500;
	line-height: 26px;
}
#resultPage > #contentsArea > #lookPane > #btn {
	width: 294px;
	height: 58px;
	font-size: 15px;
	font-weight: 600;
}
#resultPage > #contentsArea > #saveBtn {
	margin-top: 24px;
	margin-bottom: 48px;
	width: 342px;
	height: 60px;
	background-color: #484848;
	font-size: 18px;
	font-weight: 600;	
	color: #fff;
}

#resultPage #noData {
	position: relative;
	padding-bottom: 36px;
}
#resultPage #noData > #img {
	margin-top: 120px;
	
}
#resultPage #noData > #msg {
	margin-top: 40px;

	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}
#resultPage #noData > #analyzeBtn {
	margin-top: 120px;	
}
#resultPage #noData > #txtAnalyze {
	margin-top: 5px;
	width: 300px;
	display: inline-block;
	text-align: left;

	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}
#resultPage #noData > #loginBtn {
	margin-top: 100px;

}
#resultPage #noData > #txtLogin {
	margin-top: 15px;
	width: 300px;
	display: inline-block;
	text-align: left;

	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}



.resultContentsBase {
	margin-top: 16px;
	position: relative;
	width: 100%;
}
.resultContentsBase > #base {
	position: relative;
	display: inline-block;
	width: 342px;
	background-color: #fff;
	padding-bottom: 32px;
}

.resultContentsBase > #base > #hintBtn {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 10;
}

.resultContentsBase .separator {
	margin: 32px 0;
	display: inline-block;
	width: 342px;
	height: 1px;
	background-color: #E5E5E5;
}
.resultContentsBase > #base > .separator {
	width: 294px;
}

.resultContentsBase > .detailPane {
	position: relative;
}
.resultContentsBase > .detailPane > #label {
	font-size: 16px;
	font-weight: 600;
}

/*--------------------------
「顔タイプ」タブの内容
--------------------------*/
#faceResultContents {
}
#faceResultContents > #base > #illust {
	margin-top: 77px;
	height: 205px;
}
#faceResultContents > #base > #name {
	margin-top: 24px;
	font-size: 18px;
	font-weight: 600;
	line-height: 36px;
}
#faceResultContents > #base > #text {
	margin-top: 16px;
	display: inline-block;
	width: 294px;
	text-align: left;
	font-size: 12px;
    font-weight: 500;
    line-height: 24px;
}

#faceResultContents > #base > #faceMap {
	margin-top: 24px;
	position: relative;	
}
#faceResultContents > #base > #faceMap > #img {
	width: 294px;
}

#faceResultContents > #base > #faceMap > #frame {
	width: 110px;
	height: 50px;
	border-radius: 5px;
	border: 1px solid #BB0F12;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#faceResultContents > #base > #faceMap > #frame.type1 {
	top: 30%;
	left: 69%;
}
#faceResultContents > #base > #faceMap > #frame.type2 {
	top: 30%;
	left: 31%;
}
#faceResultContents > #base > #faceMap > #frame.type3 {
	top: 69%;
	left: 69%;
}
#faceResultContents > #base > #faceMap > #frame.type4 {	
	top: 69%;
	left: 31%;
}

#faceResultContents #graph {
	margin-top: 40px;
	margin-bottom: 30px;	
	display: inline-block;
	font-size: 10px;
	letter-spacing: 0;
	font-weight: 500;
}
#faceResultContents #graph > #base {
	position: relative;
}
#faceResultContents #graph > #base > #img {
	width: 255px;
}
#faceResultContents #graph > #base > #labelMin {
	position: absolute;
	left: 0;
	top: -20px;
}
#faceResultContents #graph > #base > #labelMax {
	position: absolute;
	right: 0;
	top: -20px;
}
#faceResultContents #graph > #base > #marker {
	position: absolute;
	bottom: -10px;
	transform: translateX(-50%);
	width: 15px;
}
#faceResultContents #graph > #base > #markerLabel {
	position: absolute;
	bottom: -30px;	
}
#faceResultContents #chart {
	margin-top: 100px;
	margin-bottom: 30px;
}
.resultChart {
	display: inline-block;
	font-size: 10px;
	letter-spacing: 0;
	font-weight: 500;
}
.resultChart > #base {
	position: relative;
	width: 160px;
	height: 138.56px;
}
.resultChart > #base > #img {
	width: 100%;
	height: 100%;
}
.resultChart > #base > #axis1 {
	position: absolute;
	top: -20px;
	width: 100%;
}
.resultChart > #base > #axis2 {
	position: absolute;
	left: -10px;
	bottom: -15px;
	transform: translateX(-100%);
}
.resultChart > #base > #axis3 {
	position: absolute;
	right: -10px;
	bottom: -15px;
	transform: translateX(100%);
}
.resultChart > #base > .axis > #img {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -100%);
	padding-bottom: 3px;
	height: 70px;
}
.resultChart > #base > #mark {
	position: absolute;
	width: 13px;
	height: 13px;
	background-color: #BB0F12;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

#faceResultContents #partsInfo {	
	margin-top: 30px;
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0;
	font-weight: 500;
}
#faceResultContents #partsInfo > .onePart {	
	display: inline-flex;
	width: 260px;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 15px;
}
#faceResultContents #partsInfo > .onePart #partLabel {	
	text-align: left;
	flex-grow: 1;
}
#faceResultContents #partsInfo > .onePart #partItem {	
	width: 85px;
	height: 26px;
	text-align: center;
	background-color: #FFF;
	border: solid 1px #555555;
	border-radius: 13px;
	margin-left: 5px;
	line-height: 24px;
	opacity: 0.35;
}
#faceResultContents #partsInfo > .onePart #partItem.ON {	
	background-color: #CBCBBB;
	opacity: 1.0;
}


/*--------------------------
「パーソナルカラー」タブの内容
--------------------------*/
#colorResultContents .persoalColorChart {
	margin-top: 77px;
}
.persoalColorChart {
	position: relative;
	display: inline-block;
	width: 255px;
}
.persoalColorChart > #boxArea {
	position: relative;
	width: 100%;
	height: 80px;
	border: solid 1px #D1D1CF;
}
.persoalColorChart > #boxArea > .box {
	height: 100%;
	display: inline-block;
}
.persoalColorChart > #boxArea > .box:not(:first-child) {
	border-left: solid 1px #D1D1CF;
}
.persoalColorChart > #index {
	margin-top: 30px;
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.persoalColorChart > #index .svgIrodama {
	width: 50px;
	height: 40px;
}
.persoalColorChart > #index .irodamaName {
	margin-top: 4px;
	font-size: 12px;
	letter-spacing: 0;
	font-weight: 500;	
}

#colorResultContents > #base > #name {
	margin-top: 24px;
	font-size: 18px;
	font-weight: 600;		
	line-height: 36px;
}
#colorResultContents > #base > #text {
	margin-top: 16px;
	display: inline-block;
	width: 294px;
	text-align: left;
	font-size: 12px;
    font-weight: 500;
    line-height: 24px;
}

#colorResultContents .colorPattern {
	margin-top: 24px;
	display: inline-block;
	position: relative;
	margin-top: 30px;
	width: 256px;
}
#colorResultContents .colorPattern > .ball {
	display: inline-block;
	width: 49px;
	height: 49px;
	border: solid 1px #D1D1CF;
	border-radius: 24.5px;

	margin-right: 20px;
	margin-bottom: 20px;
}
#colorResultContents .colorPattern > .ball:nth-of-type(4n){
	margin-right: 0;
}
#colorResultContents .colorPattern > .ball:nth-of-type(n+13){
	margin-bottom: 0;
}

#colorResultContents .irodamas {
	margin-top: 30px;
	display: inline-flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
}
#colorResultContents .irodamas > .irodama {
}
#colorResultContents .irodamas > .irodama > svg {
	width: 100px;
	height: 80px;
}
#colorResultContents .irodamas > .irodama > #name {
	margin-top: 20px;
	font-size: 14px;
	letter-spacing: 0;
	font-weight: 500;
}

.svgIrodama {
	display: inline-block;
	position: relative;
	width: 100px;
	height: 80px;

	transition-duration: 100ms;
}
.svgIrodama > svg {
	width: 100%;
	height: 100%;
}

#colorResultContents > #prodArea {
	margin-top: 48px;
	position: relative;
	margin-bottom: 24px;
}
#colorResultContents > #prodArea > #title {
	margin-bottom: 16px;
	font-size: 20px;
	font-weight: 600;
}
#colorResultContents > #prodArea > .label {
	font-size: 18px;
	font-weight: 600;
	color: #BB0F12;	
}
#colorResultContents > #prodArea > .line {
	margin: 32px 0;
	display: inline-block;
	width: 342px;
	height: 1px;
	background-color: #E5E5E5;
}


/*--------------------------
「肌の色」タブの内容
--------------------------*/
#skinResultContents > #base > #map {
	margin-top: 85px;
}
#skinResultContents > #base > #name {
	margin-top: 24px;
	font-size: 18px;
	font-weight: 600;		
	line-height: 36px;
}
#skinResultContents > #base > #irodama {
	margin-top: 16px;
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;;
}
#skinResultContents > #base > #text {
	margin-top: 16px;
	display: inline-block;
	width: 294px;
	text-align: left;
	font-size: 12px;
    font-weight: 500;
    line-height: 24px;
}
#skinResultContents > #prodArea {
	margin-top: 48px;
	position: relative;
	margin-bottom: 24px;
}
#skinResultContents > #prodArea > #title {
	font-size: 20px;
	font-weight: 600;
}
#skinResultContents > #prodArea > .label {
	margin-top: 16px;
	font-size: 18px;
	font-weight: 600;
	color: #BB0F12;
}
#skinResultContents > #prodArea .prodRecommend {
	margin-top: 24px;
}


/*--------------------------
分析結果のヒントダイアログ
--------------------------*/
#resultHintDlg {
	padding-top: 48px;
	padding-bottom: 32px;
}
#resultHintDlg > #title {
	font-size: 18px;
	font-weight: 600;
}
#resultHintDlg > .introInfo {
	margin-top: 24px;
}
#resultHintDlg > .introInfo > #figArea {
	border: 1px solid #E5E5E5;
}

#resultHintDlg > #closeBtn {
	margin-top: 32px;
	width: 290px;
	height: 56px;
	font-size: 16px;
}


/*--------------------------
保存リマインドダイアログ
--------------------------*/
#resultSaveDlg {	
	padding: 24px 0;
}
#resultSaveDlg > #text {
	margin-top: 5px;
	display: inline-block;
	width: 85%;
	text-align: left;

	font-size: 16px;
	font-weight: 400;
	line-height: 24px;	
}
#resultSaveDlg > #btnSave {	
	margin-top: 30px;
	width: 85%;
	background-color: #484848;
	color: #fff;
}
#resultSaveDlg > #btnNoSave {
	margin-top: 30px;
}



/***************************************
メイクルック一覧画面
***************************************/
#lookListPage {
	padding-bottom: 35px;
}
#lookListPage > #title {
	margin-top: 48px;

	font-size: 20px;
	font-weight: 600;
}
#lookListPage > #lookArea {
	margin-top: 40px;
	width: 350px;

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

	gap: 20px;
}

#lookListPage .lookElem {
	position: relative;
	width: 160px;
	height: 210px;

	border: 1px solid #DDD;
	background: #FFF;

	cursor: pointer;
}
#lookListPage .lookElem.best {
	width: 340px;
	height: 285px;
}
#lookListPage .lookElem > #img {
	margin-top: 15px;
	height: 140px;
}
#lookListPage .lookElem.best > #img {	
	margin-top: 25px;
	height: 200px;
}
#lookListPage .lookElem > #text {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
}
#lookListPage .lookElem.best > #text{	
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}

#lookListPage .lookElem > #btnFav {
}

#lookListPage .lookElem > #icon {
	position: absolute;
	top: 74px;
	right: 10px;
}
#lookListPage .lookElem.best > #icon {
	top: 128px;	
}

#lookListPage .lookElem > #bestLabel {
	position: absolute;
	top: 8px;
	left: 10px;

	display: flex;
	align-items: center;
	justify-content: center;
	height: 20px;

	display: inline-flex;
	padding: 0px 8px;
	border-radius: 10px;
	background: #BB0F13;
}
#lookListPage .lookElem > #bestLabel > #icon {
	height: 10px;
}
#lookListPage .lookElem > #bestLabel > #text {
	margin-left: 3px;
	color: #FFF;
	font-size: 10px;
	font-weight: 500;
}
#lookListPage > #analyzeBtn {
	margin-top: 60px;
	
}
#lookListPage > #txtAnalyze {
	margin-top: 15px;
	width: 300px;
	display: inline-block;
	text-align: left;

	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}
#lookListPage > #loginBtn {
	margin-top: 30px;

}
#lookListPage > #txtLogin {
	margin-top: 5px;
	width: 300px;
	display: inline-block;
	text-align: left;

	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}



/***************************************
メイクルック詳細覧画面
***************************************/
#lookDetailPage {
}

#lookDetailPage > #topBar {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 68px;
	z-index: 1;
	margin-top: -1px;

	background-color: #F9F9F6;
	border-bottom: 1px solid #E7E7E7;
}
#lookDetailPage > #topBar > #backBtn {
	margin-left: 25px;
	color: #676767;
}
#lookDetailPage > #topBar > #ankerBtn {
	margin-right: 25px;
	font-size: 14px;
	font-weight: 600;
	color: #484848;
}
#lookDetailPage > #topBar > #ankerBtn::after {
	content: "";
	width: 8px;
	height: 8px;
	border-bottom: solid 1px #BB0F12;
	border-left: solid 1px #BB0F12;
	transform: rotate(-45deg);
	margin-left: 8px;
	margin-bottom: 3px;
}

#lookDetailPage > #contentsArea {
	padding-top: 68px;
	position: relative;
	width: 100%;
}
#lookDetailPage > #contentsArea > #label {
	margin-top: 32px;
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
}
#lookDetailPage > #contentsArea > #label > .red {
	color: #BB0F12;
}

#lookDetailPage > #contentsArea > #lookPane {
	position: relative;
	display: inline-block;
	margin-top: 40px;
	width: 342px;
	padding: 24px;
	background-color: #fff;
}
#lookDetailPage > #contentsArea > #lookPane > #img {
	width: 250px;	
}
#lookDetailPage > #contentsArea > #lookPane > #text {
	margin-top: 24px;
	font-size: 18px;
	font-weight: 500;
	line-height: 22px;
}
#lookDetailPage > #contentsArea > #lookPane > #vmBtn {
	margin-top: 24px;
	width: 294px;
}
#lookDetailPage > #contentsArea > #lookPane > #vmBtn > #icon {
	position: absolute;
	right: 16px;
}

#lookDetailPage > #contentsArea > #howtoPane {
	margin-top: 50px;
	margin-bottom: 0px;
	display: inline-flex;
	flex-direction: column;
	gap: 32px;
}

.howtoElem {	
	position: relative;
	display: inline-block;
	padding-bottom: 24px;
	width: 342px;
	background-color: #fff;
}
.howtoElem > #categoryLabel {
	margin-top: 32px;
	font-size: 20px;
	font-weight: 600;
}
.howtoElem > #illust {
	margin-top: 54px;
	height: 200px;
}
.howtoElem > #guideBtn {
	margin-top: 32px;
	width: 250px;
	height: 37px;

	background-color: #fff;
	border: 1px solid #BB0F12;

	font-size: 13px;
	font-weight: 500;
	color: #BB0F12;
}
.howtoElem > #guideBtn > #icon {
	margin-left: 5px;
}

.howtoElem > .howtoTextArea {
	margin-top: 32px;
}
.howtoTextArea {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap: 16px;
}
.howtoTextArea > .howto {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
}
.howtoTextArea > .howto > #index {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 11px;
	background-color: #BB0F12;

	font-family: Roboto;
	font-size: 10px;
	font-weight: 600;
	color: #fff;

}
.howtoTextArea > .howto > #text {
	width: 260px;
	text-align: justify;
	font-size: 13px;
	font-weight: 500;
	line-height: 24.7px;
}

.howtoElem > #recommend {
	margin-top: 48px;
	position: relative;
}
.howtoElem > #recommend > #label {
	font-size: 16px;
	font-weight: 600;
}
.howtoElem > #recommend > #itemArea {
	margin-top: 30px;
}


/*--------------------------
商品レコメンド要素
--------------------------*/
.prodRecommend {
	position: relative;
	width: 100%;
}
.prodRecommend > #label {
	color: #1A1A1A;
	font-size: 20px;
	font-weight: 500;
}
.prodRecommend > #prodCarousel {
	margin-top: 21px;
}
.prodRecommend > .maruBtn {
	position: absolute;
	top: 138px;

	display: flex;
	width: 38px;
	height: 38px;
	justify-content: center;
	align-items: center;

	border-radius: 19px;
	border: 1px solid #E7E7E7;
	background: #F6F6F6;

	cursor: pointer;
}
.prodRecommend > #btnLeft {
	left: 7px;
}
.prodRecommend > #btnRight {
	right: 7px;
}
.prodRecommend > #btnMore {
	margin-top: 24px;
	font-size: 14px;
	font-weight: 600;
	color: #BB0F12;
}

/*--------------------------
商品カルーセル要素
--------------------------*/
.prodCarousel {
	position: relative;
	width: 100%;

	overflow-x: scroll;
	-ms-overflow-style: none;	
	white-space: nowrap;
}
.prodCarousel::-webkit-scrollbar {
	display: none;
}
.prodCarousel > #itemsLayer {
	margin-left: 24px;
}

.prodElem {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;

	width: 200px;
	height: 280px;

	background: #FFF;
	border: 1px solid #DDDDDD;
	margin-right: 16px;
}
.prodElem > #prodImg {
	margin-top: 24px;
	height: 80px;
}
.prodElem > #brandLogo {
	margin-top: 16px;
	height: 24px;
}
.prodElem > #prodName {
	margin-top: 8px;

	width: 90%;
	white-space: initial;
/*	overflow: hidden;	*/
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-wrap: break-word;

	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}
.prodElem > #sku {
	padding-top: 8px;
	background-color: #fff;
	position: relative;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

}
.prodElem > #sku > #img {
	width: 30px;
	height: 30px;
	border-radius: 15px;
	object-fit: contain;
	border: 0.5px solid #D5D5D5;	
}
.prodElem > #sku > #code {

	max-width: 60%;
	white-space: initial;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-wrap: break-word;

	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
}
.prodElem > #storeBtn {
	margin-top: 24px;
	bottom: 16px;
	color: #BB0F12;
	font-size: 14px;
	font-weight: 600;
	background-color: #fff;
}


/*--------------------------
美類選択メニュー
--------------------------*/
.categorySelectMenu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;

	z-index: 9999;
}
.categorySelectMenu > #shield {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.categorySelectMenu > #shield::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(3px);
	z-index: -1;
}
.categorySelectMenu > #menu {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #FFF;

	border-radius: 20px 20px 0 0;
	border-top: solid 1px #ddd;

	z-index: 10;	
}
.categorySelectMenu > #menu > #title {
	margin-top: 32px;
	margin-bottom: 40px;
	font-size: 20px;
	font-weight: 600;
}
.categorySelectMenu > #menu > #btnClose {
	position: absolute;
	top: 26px;
	right: 27px;
}
.categorySelectMenu > #menu > #itemsLayer {
	margin-bottom: 24px;
	position: relative;
	width: 90%;
	display: inline-flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	gap: 24px;
}
.categorySelectMenu > #menu > #itemsLayer > .item {
	font-size: 16px;
	font-weight: 600;
}
.categorySelectMenu > #menu > #itemsLayer > .item.active {
	color: #BB0F12;
}



/***************************************
ARガイド画面
***************************************/
#ARGuidePage {
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}
#ARGuidePage > #label {
	margin-top: 15px;
	margin-bottom: 15px;
	font-size: 18px;
	font-weight: 500;
}

#ARGuidePage > #arArea {
	position: relative;
	width: 390px;
	height: 390px;
	background-color: #BEBEBE;
}

#ARGuidePage > .howtoTextArea {
	padding: 20px 0;
	width: 100%;
	overflow-y: scroll;
}
#ARGuidePage > .howtoTextArea {
	gap: 10px;
}
#ARGuidePage > .howtoTextArea > .howto {
}
#ARGuidePage > .howtoTextArea > .howto > #index {
}
#ARGuidePage > .howtoTextArea > .howto > #text {
	width: 320px;
}



/***************************************
商品一覧画面
***************************************/
#prodListPage {
}

#prodListPage > #topBar {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 68px;
	z-index: 1;
	margin-top: -1px;

	background-color: #F9F9F6;
	border-bottom: 1px solid #E7E7E7;
}
#prodListPage > #topBar > #backBtn {
	margin-left: 25px;
	color: #676767;
}

#prodListPage > #contentsArea {
	padding-top: 68px;
	position: relative;
	width: 100%;
}
#prodListPage > #contentsArea > #title {
	margin-top: 32px;
	font-size: 20px;
	font-weight: 600;
}
#prodListPage > #contentsArea > #category {
	margin-top: 8px;
	font-size: 16px;
	font-weight: 600;
}

#prodListPage > #contentsArea > #filterGui {
	margin-top: 16px;
}
#prodListPage > #contentsArea > #prodArea {
	margin-top: 24px;
	margin-bottom: 24px;

	position: relative;
	width: 342px;
	display: inline-flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

#prodListPage > #contentsArea > #prodArea #emptyMsg {
	margin-top: 50px;
	width: 100%;
	font-size: 16px;
}

#prodListPage > #contentsArea .prodElem {
	width: 167px;
	margin-right: 0;
}


/*--------------------------
絞り込みコントロール要素
--------------------------*/
.filterGui {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 48px;

	background-color: #FFF;
	border-radius: 24px;
	border: 2px solid #CBCBCB;
}

.filterGui .menuBtn {
	position: relative;
	width: 110px;
	height: 100%;

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

	cursor: pointer;
}
.filterGui .menuBtn.brand {
	border-radius: 24px 0 0 24px;
	padding-left: 5px;
}
.filterGui .menuBtn.birui {
	border-left: solid 1px #CBCBCB;
	border-right: solid 1px #CBCBCB;
}
.filterGui .menuBtn.type {
	border-radius: 0 24px 24px 0;	
	padding-right: 8px;
}
.filterGui .menuBtn > #label {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #000;
}
.filterGui .menuBtn > #label > #line1 {
	font-size: 14px;
	font-weight: 500;
}
.filterGui .menuBtn > #label > #line2 {
	margin-top: -4px;
	padding-bottom: 4px;
	font-size: 12px;
	font-weight: 400;
}

/*--------------------------
絞り込みメニュー
--------------------------*/
.filterMenu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;

	z-index: 9999;
}
.filterMenu > #shield {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.filterMenu > #shield::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(3px);
	z-index: -1;
}
.filterMenu > #menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #FFF;

	border-radius: 20px 20px 0 0;
	border-top: solid 1px #ddd;

	z-index: 10;
}

.filterMenu > #menu > #title {
	margin-top: 32px;
	margin-bottom: 40px;
	font-size: 20px;
	font-weight: 600;
}

.filterMenu > #menu > #btnClose {
	position: absolute;
	top: 26px;
	right: 27px;
}

.filterMenu > #menu > #itemsLayer {
	position: relative;
	overflow-y: scroll;
}
.filterMenu .itemLabel {
	display: inline-block;
	width: 90%;
	text-align: left;
	margin-bottom: 24px;
	font-size: 18px;
	font-weight: 600;
}
.filterMenu .itemElemArea {	
	margin-bottom: 36px;
	position: relative;
	width: 90%;
	display: inline-flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
	gap: 24px;
}
.filterMenu .itemElemArea > .itemElem {	
	margin-bottom: 18px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;

	user-select: none;

}
.filterMenu .itemElemArea > .itemElem > #chkBox {
	width: 20px;
}
.filterMenu .itemElemArea > .itemElem > #label {
	font-size: 16px;
	font-weight: 400;
	color: #000;
}

.filterMenu > #menu > #btnArea {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	padding-top: 10px;
	background-color: #FFF;
}
.filterMenu > #menu > #btnArea > #resetBtn {
	width: 163px;
}
.filterMenu > #menu > #btnArea > #applyBtn {
	width: 163px;
}



/***************************************
お気に入り画面
***************************************/
#favoritePage {
	padding-bottom: 36px;
}
#favoritePage > #title {
	margin-top: 48px;

	font-size: 20px;
	font-weight: 600;
}

#favoritePage > #noData {
	position: relative;
}
#favoritePage > #noData > #img {
	margin-top: 120px;
	
}
#favoritePage > #noData > #msg {
	margin-top: 40px;

	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}
#favoritePage > #noData > #analyzeBtn {
	margin-top: 120px;	
}
#favoritePage > #noData > #lookBtn {
	margin-top: 32px;
	color: #BB0F12;
}

#favoritePage > #lookArea {
	margin-top: 24px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;	
	gap: 18px;
}

#favoritePage .lookElem {
	position: relative;
	width: 340px;
	height: 285px;

	border-radius: 20px;
	border: 1px solid #FFF;
	background: #FFF;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10);
}
#favoritePage .lookElem > #img {
	margin-top: 14px;
	height: 200px;
}
#favoritePage .lookElem > #text {
	margin-top: 3px;
	color: #555;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
}
#favoritePage .lookElem > #btnFav {
}
#favoritePage .lookElem > #icon {
	position: absolute;
	top: 128px;
	right: 10px;
}

#favoritePage #loginBtn {
	margin-top: 30px;

}
#favoritePage #txtLogin {
	margin-top: 5px;
	width: 300px;
	display: inline-block;
	text-align: left;

	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}



/*--------------------------
分析終了ダイアログ
--------------------------*/
#quitAnalyzeDlg {
}
#quitAnalyzeDlg > #title {
	margin-top: 32px;

	font-size: 18px;
	font-weight: 600;
}
#quitAnalyzeDlg > #text {
	margin-top: 20px;

	font-size: 13px;
	font-weight: 500;
}
#quitAnalyzeDlg > #backBtn {
	margin-top: 32px;
	width: 280px;
}
#quitAnalyzeDlg > #quitBtn {
	margin-top: 24px;
	margin-bottom: 32px;
}



/*--------------------------
お気に入りボタン
--------------------------*/
.favBtn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	top: 16px;
	right: 16px;

	cursor: pointer;
}
/*--------------------------
お気に入り登録ダイアログ
--------------------------*/
#favBtnDlg {
	padding: 48px 0;
}
#favBtnDlg > #text {
	margin-top: 20px;
	width: 85%;
	display: inline-block;
	text-align: left;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}
#favBtnDlg > #btnLogin {
	margin-top: 24px;
	width: 85%;
}
#favBtnDlg > #btnClose {
	position: absolute;
	top: 10px;
	right: 10px;
}


/*--------------------------
処理中ダイアログ
--------------------------*/
.processingDlg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;

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

	z-index: 9999;
}
.processingDlg > #shield {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(92, 92, 92, 0.8);
	z-index: 0;
}
.processingDlg > #dlg {
	position: relative;
	width: 342px;
	height: 240px;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #F9F9F6;

	text-align: center;
	z-index: 100;
}
.processingDlg > #dlg > #text {
	font-size: 16px;
	font-weight: 400;
}
.processingDlg #guruguruMark {
	position: relative;
	margin-top: 30px;
	animation: rot360 1200ms steps(10) infinite;
}
@keyframes rot360 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/*--------------------------
アンケートボタン
--------------------------*/

.enqueteRectBtn {
	margin-top: 24px;
	margin-bottom: 24px;
	width: 342px;
	height: 168px;
	background-color: #fff;
	cursor: pointer;
}

.enqueteRectBtn .icon {
	width: 100%;
	height: 100%;
}

/*--------------------------
アンケートモーダル *
--------------------------*/
#enqueteModalOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}

#enqueteModalOverlay .modalContent {
	width: 90%;
	height: 80%;
	max-width: 800px;
	background-color: white;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
}

#enqueteModalOverlay .closeBtn {
	position: absolute;
	top: 0px;
	right: 20px;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	z-index: 10001;
	color: #666;
}

#enqueteModalOverlay .closeBtn:hover {
	color: #333;
}

#enqueteModalOverlay iframe {
	width: 100%;
	height: calc(100% - 30px);
	margin-top: 30px;
	border: none;
	border-radius: 5px;
}