@charset "utf-8";


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


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

	overscroll-behavior: none;
}


#contents {
	width: 393px;
	position: relative;
	
	/* 文字サイズ自動調整を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;	


	font-family: "Noto Sans JP", sans-serif;

	text-align: center;

	z-index: 2000;
}



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

	padding-bottom: 20px;
}

#slideUp {
	width: 100%;
	position: absolute;
	left: 0;

	background-color: #fff;
	border-radius: 8px 8px 0 0;

	border-top: 0.33px solid #ddd;
}
#slideUp > #header {
	display: flex;
	align-items: center;
	justify-content: space-between;	
	width: 100%;
	height: 60px;

	border-bottom: 0.33px solid #0000004D;	
}
#slideUp > #header > .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;

	cursor: pointer;
}
#slideUp > #header > .btn > #icon {
	height: 100%;
}
#slideUp > #header > #btnBack {
	margin-left: 22px;
}
#slideUp > #header > #logo {
	height: 20px;
}
#slideUp > #header > #btnClose {
	margin-right: 22px;
}

#slideUp > #pageLayer {
	position: relative;	
}




/***************************************
TOP画面
***************************************/
#topPage {
	padding-bottom: 0;

}
#topPage > #kv {
	width: 100%;
}
#topPage > #notice {
	margin-top: 20px;

	display: inline-block;
	width: 350px;
	text-align: left;

	font-size: 10px;
	font-weight: 400;
	line-height: 14.48px;
	color: #45433E;
}
#topPage > #info {
	margin-top: 70px;
}
#topPage > #info > #illust {
	height: 174px;
}
#topPage > #info > #text {
	margin-top: 33px;

	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #45433E;	
}
#topPage > #info > #btn {
	margin-top: 18px;

	width: 259px;
	height: 44px;
}
#topPage > #info > #btn > #arrow {
	top: 17.64px;
	right: 20.39px;
}
#topPage > .startPane {
	margin-top: 75px;
}
#topPage > #ver {
	margin-top: 15px;
	margin-bottom: -15px; 
	margin-left: 5px;
	font-size: 9px;
	color: #aaa;
	text-align: left;
}

/*--------------------------
規約とはじめるボタンのセット
--------------------------*/
.startPane > #kiyaku {
	display: inline-block;
	position: relative;
}
.startPane > #kiyaku > #label {
	text-align: left;

	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.startPane > #kiyaku > #label > #icon {
	height: 14px;
}
.startPane > #kiyaku > #label > #text {
	margin-left: 4px;

	font-size: 14px;
	font-weight: 500;
	color: #555;
}
.startPane > #kiyaku > #text {
	margin-top: 8px;

	position: relative;
	width: 348px;
	height: 110px;
	border: 1px solid #D1D1CF;
	border-radius: 4px;
	
	overflow-y: scroll;
	padding: 10px 10px 10px 14px;

	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
	text-align: left;
	color: #555;
}
.startPane > #kiyaku > #chk {
	margin-top: 8px;
}

.startPane > #btnStart {
	margin-top: 40px;
}


/***************************************
軽圧式塗布法の情報画面
***************************************/
#infoPage {
}
#infoPage > #title {
	margin-top: 40px;
	
	font-size: 16px;
	font-weight: 400;
	color: #45433E;
}
#infoPage > #illust {
	margin-top: 63px;

	height: 200px;
}
#infoPage > #points {
	margin-top: 40px;
}
#infoPage .pointElem {
	position: relative;
	display: inline-block;
	width: 350px;
	text-align: left;
	color: #45433E;

	margin-bottom: 60px;
}
#infoPage .pointElem > #label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
#infoPage .pointElem > #label > #prefix {
	font-size: 16px;
	font-weight: 400;
}
#infoPage .pointElem > #label > #icon {
	height: 18px;
	margin: 0 6px;
}
#infoPage .pointElem > #label > #title {
	font-size: 16px;
	font-weight: 700;
}
#infoPage .pointElem > #subtitle {
	font-size: 16px;
	font-weight: 400;
}
#infoPage .pointElem > #text {
	margin-top: 18px;

	font-size: 14px;
	font-weight: 400;
	line-height: 20.27px;
}
#infoPage > .startPane  {
	margin-top: 50px;
}


/***************************************
楽しみ方説明画面
***************************************/
#howtoPage {		
}

/*--------------------------
ステップ番号とタイトルのセット
--------------------------*/
.stepTitle {
	margin-top: 50px;

	position: relative;
	font-size: 16px;
	font-weight: 400;
	color: #45433E;
}
.stepTitle > #popup {
	position: absolute;
	left: 50%;
	top: 6px;
}

#howtoPage > #howtos {
	margin-top: 5px;
}
#howtoPage .howtoElem {
	margin-top: 20px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#howtoPage .howtoElem > #illust {
}
#howtoPage .howtoElem > #label {
	margin-top: 10px;

	display: flex;
	align-items: center;
	justify-content: center;
}
#howtoPage .howtoElem > #label > #icon {
	height: 14px;
}
#howtoPage .howtoElem > #label > #text {
	margin-left: 6px;

	font-size: 16px;
	font-weight: 400;
	color: #45433E;
}
#howtoPage > #btnNext {
	margin-top: 30px;
}


/***************************************
モード選択（コットン使用/未使用）画面
***************************************/
#selectPage {		
}
#selectPage > #imgCotton {
	margin-top: 27px;
	height: 150px;
}
#selectPage > #btnCottonR {
	margin-top: 6px;
}
#selectPage > #btnCottonL {
	margin-top: 6px;
}
#selectPage > #imgHand {
	margin-top: 12px;
	height: 150px;
}
#selectPage > #btnHand {
	margin-top: 6px;
}

#selectPage .infoRL {
	position: absolute;
	right: 55px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#selectPage .infoRL > #icon {
	height: 22px;
}
#selectPage .infoRL > #label {
	margin-left: 10px;

	width: 50px;
	height: 30px;
	border-radius: 8px;
	background-color: #45433E;

	font-size: 16px;
	font-weight: 400;
	line-height: 30px;	
	color: #fff;
}


/***************************************
使用量の目安画面
***************************************/
#amountPage {

}
#amountPage > .infoBox {
	margin-top: 30px;
	height: 208px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
#amountPage > .infoBox > #img {
}
#amountPage > .infoBox > #info {
	font-weight: 400;
	color: #45433E;
}
#amountPage > .infoBox > #info > #label {
	font-size: 16px;
}
#amountPage > .infoBox > #info > #text {
	font-size: 14px;
}
#amountPage > #btnNext {
	margin-top: 30px;
}


/***************************************
マッサージ画面
***************************************/
#massagePage {

}


.canvasDiv {
	position: relative;
}
.canvasDiv #cvs {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
}

#viewArea {
	position: relative;

	width: 100%;
	height: 393px;
	background-color: #F4F4F5;

	overflow: hidden;
}
#viewArea #canvasWrap {
	position: absolute;
}
#viewArea #canvasWrap #cameraCvs {
	width: 100%;
	height: 100%;
}
#viewArea #canvasWrap #movieDiv {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: center center;
}

#viewArea #canvasWrap #movieDiv #cvs {
	opacity: 0.5;
}

#viewArea #guide {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#viewArea #guide > #frm {
	width: 250px;
}

#massagePage > #bottomArea {
	position: relative;
}



.massgaePageContentBase {
	position: relative;
}

/*--------------------------
マッサージ準備ローディング画面要素
--------------------------*/
#loadingContent {

}
#loadingContent > #loadingBar {
	position: absolute;
	top: -75px;
	left: 84px;
}
#loadingContent > #tipsCarousel {
	margin-top: 15px;
}

.tipsCarousel {
	position: relative;
	width: 100%;
	height: 275px;
	overflow-x: hidden;
}
.tipsCarousel > #itemsLayer {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}

.tipsCarousel .btnDir {
	padding: 10px;
	cursor: pointer;
}
.tipsCarousel .btnDir > #icon {
	height: 13.5px;
	pointer-events: none;
}
.tipsCarousel > #btnL {
	position: absolute;
	top: 90px;
	left: 16px;
}
.tipsCarousel > #btnR {
	position: absolute;
	top: 90px;
	right: 16px;
}

.tipsElem {
	margin: 0 59px;

	width: 275px;
	height: 241px;

	position: absolute;
	top: 0;
	left: 0;

	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.tipsElem > #title {
	font-size: 16px;
	font-weight: 400;
	color: #45433E;	
}
.tipsElem > #illust {
	
}
.tipsElem > #infoArea {
	width: 100%;	
}
.tipsElem > #infoArea > .info {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between
}
.tipsElem > #infoArea > .info > #label {
	width: 45px;
	height: 20px;
	border-radius: 4px;
	background-color: #45433E;

	font-size: 12px;
	font-weight: 400;
	color: #fff;
	line-height: 20px;
	white-space: nowrap;
}
.tipsElem > #infoArea > .info > #text {
	margin-left: 4px;

	width: 230px;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	text-align: left;		
	color: #45433E;
}


/*--------------------------
マッサージ開始前画面要素
--------------------------*/
#entranceContent {

}
#entranceContent > #infoArea {
	margin-top: 30px;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	width: 335px;
	gap: 9px;
}
#entranceContent > #infoArea .info {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
#entranceContent > #infoArea .info > #icon {
	margin-top: 3px;
	margin-right: 6px;

	width: 16px;
	height: 16px;	
}
#entranceContent > #infoArea .info > #text {
	font-size: 14px;
	font-weight: 400;
	color: #45433E;
	text-align: left;
}
#entranceContent > #infoArea .info > #text > .bold {
	font-weight: 700;
}
#entranceContent > #btnStart {
	margin-top: 32px;
}


/*--------------------------
マッサージ実践中画面要素
--------------------------*/
#practiceContent {

}
#practiceContent > #btnArea {
	margin-top: 5px;
	position: relative;
}
#practiceContent #btnSound {
	width: 50px;
	height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}
#practiceContent #btnSound > #icon {
	width: 25px;
}
#practiceContent > #indicator {
	margin-top: 50px;
}
#practiceContent > #howtoArea {
	margin-top: 40px;

	display: inline-block;
	width: 305px;

	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	text-align: left;
	color: #45433E;
}




/***************************************
結果画面
***************************************/
#resultPage {

}
#resultPage > #scoreCtrl {
	margin-top: 55px;
}
#resultPage > #graphDir {
	margin-top: 26px;
}
#resultPage > #graphSpd {
	margin-top: 12px;
}
#resultPage > #prodCarousel {
	margin-top: 66px;
}
#resultPage > #btnHadapasha {
	margin-top: 52px;

	width: 259px;
	height: 44px;
}
#resultPage > #btnHadapasha > #arrow {
	top: 17.64px;
	right: 20.39px;
}
#resultPage > #btnEnd {
	margin-top: 30px;
}

/*--------------------------
トータルスコア表示要素
--------------------------*/
.scoreCtrl {
	position: relative;
	display: inline-block;
}
.scoreCtrl > #ring {
	width: 275px;
	height: 275px;

	transform-origin: center center;
	transform: rotate(-90deg);

}
.scoreCtrl > #fg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.scoreCtrl > #fg > #icon {
	height: 22px;
}
.scoreCtrl > #fg > #score {
	display: flex;
	align-items: baseline;
	justify-content: center;	

}
.scoreCtrl > #fg > #score > #cur {
	font-size: 40px;
	font-weight: 900;
	color: #B7272B;
}
.scoreCtrl > #fg > #score > #total {
	font-size: 20px;
	font-weight: 900;
	color: #939393;
}
.scoreCtrl > #fg > #label {
	font-size: 16px;
	font-weight: 400;
	color: #45433E
}

/*--------------------------
各スコア棒グラフ表示要素
--------------------------*/
.resultGraph {
	position: relative;
	display: inline-flex;

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

	width: 318px;
	height: 35px;
	border-radius: 17.5px;
	background-color: #F4F4F5;

}
.resultGraph > #label {
	width: 70px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.resultGraph > #label > #icon {
	height: 14px;
}
.resultGraph > #label > #text {
	margin-left: 11px;
	margin-right: 10px;

	font-size: 14px;
	font-weight: 400;
	color: #45433E;
}

#graphSpd > #label > #text {
	margin: 5px;
}

.resultGraph > #bar {
	position: relative;
	width: 223px;
	height: 12px;
	background-color: #fff;
	border-radius: 6px;
}
.resultGraph > #bar > #active {
	position: absolute;
	top: 2px;
	left: 2px;

	width: 219px;
	height: 8px;
	border-radius: 4px;
	background-color: #B7272B;
}
.resultGraph > #bar > #dots {
	position: absolute;
	top: 5px;
	left: 0;
	width: 100%;
}
.resultGraph > #bar > #dots > .dot {
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 1px;
	background-color: #fff;
}

/*--------------------------
商品カルーセル要素
--------------------------*/
.prodCarousel {
	position: relative;
	width: 100%;
	overflow-x: hidden;
}
.prodCarousel > #label {
	margin-bottom: 8px;
	margin-left: 23px;

	font-size: 16px;
	font-weight: 400;
	text-align: left;
	color: #45433E;
}
.prodCarousel > #itemsLayer {
	position: relative;
	white-space: nowrap;
}
.prodCarousel::-webkit-scrollbar {
	display: none;
}
.prodElem {
	position: relative;

	padding: 23px 15px;
	margin: 6px 22.5px;
	width: 348px;

	background-color: #fff;

	border-radius: 10px;
	box-shadow: 0px 0px 6px 0px #0000001A;

	display: inline-flex;
	align-items: flex-start;
	justify-content: space-between;

	color: #000;
}
.prodElem > #prodImg {	
	width: 100px;
	height: 100px;
}
.prodElem > #r {
	position: relative;
	width: 200px;
	text-align: left;

	white-space: initial;
}
.prodElem > #r > #brandName {	
	font-size: 11px;
	font-weight: 400;
	line-height: 16.5px;
}
.prodElem > #r > #prodName {	
	margin-top: 9px;

	font-size: 13px;
	font-weight: 500;
	line-height: 19.5px;	
}
.prodElem > #r > #birui {	
	margin-top: 9px;

	font-size: 10px;
	font-weight: 400;
	line-height: 15px;
}
.prodElem > #r > #btnDetail {	
	margin-top: 19px;

	width: 100%;
	height: 44px;

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

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

	font-size: 11px;
	font-weight: 500;
	text-align: center;
	color: #45433E;

	cursor: pointer;
}
.prodCarousel > #indicator {
	margin-top: 20px;
	
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.prodCarousel > #indicator .mark {
	width: 8px;
	height: 8px;
	background-color: #fff;
	border: 1px solid #9F9F9F;
	border-radius: 4px;
}
.prodCarousel > #indicator .mark.active {
	width: 12px;
	height: 12px;
	background-color: #1A1A1A;
	border: none;
	border-radius: 6px;
}









.loadingBar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

}
.loadingBar > #bar {
	position: relative;
	width: 224px;
	height: 6px;
	background-color: #fff;
	border-radius: 3px;	
}
.loadingBar > #bar > #current {
	position: absolute;
	top: 0.5px;
	left: 0.5px;
	width: 223px;
	height: 5px;
	border-radius: 2.5px;
	background-color: #B7272B;

}
.loadingBar > #text {
	margin-top: 10px;

	font-size: 10px;
	font-weight: 500;
	color: #45433E;
}


#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	width: 100dvw;
	height: 100vh;
	height: 100dvh;

	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 32px;
	font-weight: bold;	

	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
#loading #mark {
	transform-origin: center, center;
	transform: rotate(-90deg);
}




.commonBtn {
	position: relative;
	display: inline-flex;

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

	width: 348px;
	height: 70px;
	border: solid 1px #D3D2CF;
	background-color: #fff;

	cursor: pointer;
	transition-duration: 300ms;

	--color-fg: #45433E;
}

.commonBtn > #label {
	font-size: 16px;
	font-weight: 400;
	color: var(--color-fg);

	user-select: none;
	margin-left: 16px;
}
.commonBtn > #arrow {
	position: absolute;
	top: 29.65px;
	right: 21.4px;
	width: 8px;
	height: 8px;

	border-top: solid 1px var(--color-fg);
	border-right: solid 1px var(--color-fg);
	transform: rotate(45deg);

	user-select: none;
}
.commonBtn > #icon {
	margin-left: 16px;
	margin-right: -6px;
	height: 23px;	
}
.commonBtn.disable {
	background-color: #D3D2CF;
	
	cursor: not-allowed;
	pointer-events: none;

	--color-fg: #807F7D;
}




.checkCtrl {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}
.checkCtrl > #box {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 15.34px;
	height: 15.34px;	
	border: solid 1px #D0D0D2;
	border-radius: 3.07px;
	background-color: #fff;
}
.checkCtrl.checked > #box {
	background-color: #B7272B;
	border: none;
}
.checkCtrl > #box > #mark {
	width: 9px;
	visibility: hidden;
}
.checkCtrl.checked > #box > #mark {
	visibility: visible;
}
.checkCtrl > #label {
	margin-left: 8px ;
	font-size: 12px;
	font-weight: 400;
	color: #3C4043;
}



.stepIndicator {
	position: relative;
	display: inline-block;
}
.stepIndicator > #indicator {
	height: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}
.stepIndicator > #indicator > .mark {
	width: 8px;
	height: 8px;
	background-color: #fff;
	border: solid 1px #9F9F9F;
	border-radius: 4px;
}
.stepIndicator > #indicator > .mark.active {
	width: 12px;
	height: 12px;
	background-color: #1A1A1A;
	border: none;
	border-radius: 6px;
}

.stepIndicator > #popup {
	position: absolute;
	top: -11px;
}



.stepPopup {
	transform: translate(-50%, -100%);
}
.stepPopup > #bg {
	height: 32px;
}
.stepPopup > #label {
	position: absolute;
	top: 0;
	left: 50%;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	line-height: 30px;

	transform: translate(-50%);
}






._tmpInfo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 20px;
	font-weight: 700;
	color: #f00;

	pointer-events: none;
}