@charset "utf-8";

@import url('swiper.min.css');
@import url('nouislider.css');

/* ////////////////////////////////////////////////////////////
	Project Name 	FOUNDATION SHADE FINDER
	File Name 		style.css
*/

/*============================================================
	ICON FONT
*/
@font-face {
	font-family: 'icon';
    src: url(../fonts/icon.eot?#iefix);
    src: url(../fonts/icon.eot?#iefix) format("embedded-opentype"), url(../fonts/icon.woff) format("woff"), url(../fonts/icon.woff2) format("woff2"), url(../fonts/icon.ttf) format("truetype"), url(../fonts/icon.svg#iconfont) format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
[class^="su-icon-"], [class*=" su-icon-"] {
	font-family: 'icon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.su-icon-arrow-next:before {
	content: "\e900";
}
.su-icon-arrow-prev:before {
	content: "\e901";
}
.su-icon-return:before {
	content: "\e902";
}

/*============================================================
	OVERWRITE
*/
.c-header-search__wrapper {
	display: none;
}
.c-search--mobile-active .c-header-search__wrapper {
	display: block;
}
.c-breadcrumb {
	display: none !important;
}

/*============================================================
	SIZE CHECKER
*/
.su-body-size-pc {
	display: none;
}
@media screen and (min-width: 60.0625em) {
	.su-body-size-pc {
		display: block;
	}
}

/*============================================================
	LAYOUT CHECKER
*/
.su-check-layout {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
}
.su-check-layout div {
	display: table;
	width: 100%;
	height: 100%;
}
.su-check-layout div dl {
	display: table-row;
}
.su-check-layout div dl dt {
	display: table-cell;
}
.su-check-layout div dl dt span {
	display: block;
	height: 100%;
}

/*============================================================
	HTML
*/
.su-body * {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 0;
	text-decoration: none;
	text-indent: 0;
	text-transform: none;
	font-style: normal;
	font-size: inherit;
    font-family: inherit;
    font-weight: 400;
	line-height: inherit;
	color: inherit;
}
.su-body {
	overflow: hidden;
	position: relative;
	width: 100%;
	color: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.su-body-result .su-body {
	height: auto !important;
}
.su-body ul,
.su-body ol {
	list-style-type: none;
}
.su-body a {
	text-decoration: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	cursor: pointer;
}
.su-body a:focus,
.su-body a:hover {
	color: inherit;
}
.su-body img {
	display: block;
	width: 100%;
	pointer-events: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-touch-callout: none;
	-moz-user-select: none;
	touch-callout: none;
	user-select: none;
}
.su-body .su-base-color {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f3d9c2;
	transition-duration: 0.5s;
	transition-property: background-color;
	transition-timing-function: linear;
	transition-delay: 0s;
}
.su-body .su-base-color-select01,
.su-body .su-base-color-select02,
.su-body .su-base-color-select03,
.su-body .su-base-color-select04,
.su-body .su-base-color-select04-howto,
.su-body .su-base-color-select05 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f3d9c2;
	transition: opacity 0.3s linear, background-color 3s ease;
}
.su-current-select04 .su-body .su-base-color-select04 {
	transition-duration: 0.3s, 0.2s;
}
.su-body .su-base-aspect {
	display: block;
	position: relative;
	padding-top: 110%;
	height: 0;
}
.su-body-result .su-base-aspect {
	display: none !important;
}
.su-body .su-scene {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.su-body .su-stage {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}
.su-body .su-safewall {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.su-body {
	font-size: 4.266vw; /* 375 => 16px */
}
/* < 481px */
@media screen and (min-width: 30.0625em) {
	.su-body {
		font-size: 21px;
	}
}
/* < 751px */
@media screen and (min-width: 46.9375em) {

}
/* < 961px */
@media screen and (min-width: 60.0625em) {
	.su-body {
		font-size: 16px;
		max-height: 600px;
	}
	.su-body .su-base-aspect {
		padding-top: 0;
		/* height: 480px; */
		height: 600px;
	}
	.su-body .su-content {
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.su-body .su-stage {
		height: auto;
	}
}
@media screen and (min-width: 1280px) {
	.su-body .su-base-aspect {
		/* padding-top: 37.5%; */
		padding-top: 46.9%;
		height: 0;
	}
	.su-body .su-base-color,
	.su-body .su-base-color-select01,
	.su-body .su-base-color-select02,
	.su-body .su-base-color-select03,
	.su-body .su-base-color-select04,
	.su-body .su-base-color-select05,
	.su-body .su-scene {
		left: 50%;
		margin-left: -640px;
		width: 1280px;
	}
}

/*------------------------------
	ANIMATION
*/

/* IN */
.su-body .su-base-color-select01,
.su-body .su-base-color-select02,
.su-body .su-base-color-select03,
.su-body .su-base-color-select04,
.su-body .su-base-color-select05 {
	opacity: 0;
	transition: opacity 0.5s linear, background-color 3s ease;
}
.su-body .su-base-color-select04-howto {
	opacity: 0;
}
.su-body .su-base-color-select01.su-anim-in,
.su-body .su-base-color-select02.su-anim-in,
.su-body .su-base-color-select03.su-anim-in,
.su-body .su-base-color-select04.su-anim-in,
.su-body .su-base-color-select05.su-anim-in {
	opacity: 1;
}
.su-body .su-base-color-select01.su-anim-out,
.su-body .su-base-color-select02.su-anim-out,
.su-body .su-base-color-select03.su-anim-out,
.su-body .su-base-color-select04.su-anim-out,
.su-body .su-base-color-select05.su-anim-out {
	transition: opacity 0.3s linear, background-color 3s ease;
	opacity: 0;
}

/*============================================================
	FONT
*/
.su-body {
	/*font-family: 'Helvetica Neue LT W05_55 Roman';
    font-family: 'Helvetica Neue LT W05_75 Bold';
    font-family: 'Helvetica Neue LT W05_53 Ext';
    font-family: 'Helvetica Neue LT W05_45 Light';
    font-family: 'Helvetica Neue LT W05_43 Lt Ex';*/

	/*
	'HelveticaNeueLTStd-Lt',
	'HelveticaNeueLTStd-LtEx',
	'HelveticaNeueLTStd-BdCn',
	'HelveticaNeueLTStd-Roman',
	'HelveticaNeueLTStd-Ex',
	'HelveticaNeueLTStd-Bd'
	*/

    font-family: 'Helvetica Neue LT W05_55 Roman', 'HelveticaNeueLTStd-Roman',"HelveticaNeueLTStd-Ex","DFHeiStd-W7", sans-serif;
    font-weight: 400;
	font-family: 'HelveticaNeue-Extended', Helvetica, arial, 'microsoft jhenghei', sans-serif;
}
.su-body input {
    font-family: 'Helvetica Neue LT W05_55 Roman', 'HelveticaNeueLTStd-Roman',"HelveticaNeueLTStd-Ex","DFHeiStd-W7", sans-serif !important;
    font-weight: 400;
	font-family: 'HelveticaNeue-Extended', Helvetica, arial, 'microsoft jhenghei', sans-serif;
}
.su-body h1,
.su-body h2,
.su-body h3,
.su-body h4,
.su-body .su-font-lt {
	text-transform: none;
    font-family: 'Helvetica Neue LT W05_43 Lt Ex', 'HelveticaNeueLTStd-LtEx',"DFHeiStd-W7", sans-serif;
    font-weight: 400;
	font-family: 'HelveticaNeue-Extended', Helvetica, arial, 'microsoft jhenghei', sans-serif;
}
.su-body .su-font-ex {
    font-family: 'Helvetica Neue LT W05_53 Ext', 'HelveticaNeueLTStd-Ex',"DFHeiStd-W7", sans-serif;
    font-weight: 400;
	font-family: 'HelveticaNeue-Extended', Helvetica, arial, 'microsoft jhenghei', sans-serif;
}

/*============================================================
	LOADING
*/
.su-body .su-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	transition-duration: 0.3s;
	transition-property: opacity;
	transition-timing-function: linear;
}
.su-body .su-loading div {
	position: relative;
	width: 50px;
	height: 50px;
}
.su-body .su-loading div span {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 0;
	animation-name: anim-loading;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
.su-body .su-loading div span img {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	height: 50px;
}
@keyframes anim-loading {
	0%   {height: 0%;}
	100% {height: 100%;}
}
@media screen and (min-width: 1280px) {
	.su-body .su-loading {
		margin-left: -640px;
		left: 50%;
		width: 1280px;
	}
}

/*============================================================
	VISIBLE
*/

/* SP */
@media screen and (max-width: 60.0625em) {
	.su-visible-pc {
		display: none;
	}
	.su-visible-sp {
		display: block;
	}
}

/* PC */
@media screen and (min-width: 60.0625em) {
	.su-visible-sp {
		display: none;
	}
	.su-visible-pc {
		display: block;
	}
}

/*============================================================
	BUTTON
*/
.su-body .su-btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 38px;
	background-color: #000;
	border: 1px solid #fff;
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	transition: all .25s ease-out;
}

/* HOVER */
@media screen and (min-width: 60.0625em) {
	.su-none-touch-device .su-body a.su-btn:hover,
	.su-none-touch-device .su-body button.su-btn:hover {
		background-color: #fff;
		border-color: #000;
		color: #000;
	}
}

/*============================================================
	1. INDEX
*/
.su-body .su-scene-index {
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
}

/*------------------------------
	SP
*/
@media screen and (max-width: 60.0625em) {

	.su-body .su-scene-index {
		background-image: url(../img/common/index-sp.jpg?v=230825);
		background-position: 50% 50%;
		color: #fff;
	}
	.su-body .su-scene-index .su-content {
		margin: 0 auto;
		padding: 20px 0 0 0;
		width: 226px;
		height: 100%;
	}
	.su-body .su-scene-index h1 {
		margin: 0 0 16px 0;
	}
	.su-body .su-scene-index p {
		font-size: 5vw;
		line-height: 1.5;
		white-space: nowrap;
	}
	.su-body .su-scene-index .su-ctr-scene-next {
		position: absolute;
		top: 20%;
		left: 0;
		width: 100%;
	}
	.su-body .su-scene-index .su-ctr-scene-next .su-btn {
		margin: 0 auto;
		width: 226px;
	}

	.su-index-prod{
		position: absolute;
		left: 5px;
		bottom: 0;
		width:20%;
	}

}

/*------------------------------
	PC
*/
@media screen and (min-width: 60.0625em) {

	.su-body .su-scene-index {
		background-image: url(../img/common/index-pc.jpg?v=230825);
		background-position: 70% 0%;
	}
	.su-body .su-scene-index .su-stage {
		display: flex;
		align-items: center;
		padding: 0 0 0 55%;
		height: 100%;
	}
	.su-body .su-scene-index h1 {
		margin: 0 0 25px 0;
		width: 354px;
	}
	.su-body .su-scene-index p {
		font-size: 24px;
		line-height: 1.66;
	}
	.su-body .su-scene-index .su-ctr-scene-next {
		margin: 50px 0 0 0;
	}
	.su-body .su-scene-index .su-ctr-scene-next .su-btn {
		width: 224px;
	}

	.su-index-prod{
		position: absolute;
		right: 5px;
		bottom: 0;
		width:10%;
	}

}

/*------------------------------
	ANIMATION
*/

/* IN */
.su-body .su-scene-index.su-anim-prev {
	opacity: 0;
}
.su-body .su-scene-index.su-anim-in {
	transition-duration: 0.5s;
	transition-property: opacity;
	transition-timing-function: linear;
	opacity: 1;
}
.su-body .su-scene-index .su-content {
	opacity: 0;
}
.su-body .su-scene-index.su-anim-in .su-content {
	transition-duration: 0.5s;
	transition-property: opacity;
	transition-timing-function: linear;
	transition-delay: 0.5s;
	opacity: 1;
}

/* OUT */
.su-body .su-scene-index.su-anim-out {
	transition-duration: 0.3s;
	transition-property: opacity;
	transition-timing-function: linear;
	opacity: 0;
}

/*============================================================

	2. user select

*/
.su-body .su-scene-select .su-content {
	display: table;
	width: 100%;
	height: 100%;
}
.su-body .su-scene-select .su-head {
	display: table-row;
}
.su-body .su-scene-select .su-head .su-inner {
	display: table-cell;
	vertical-align: top;
	height: 1px;
}
.su-body .su-scene-select .su-head .su-steps {
	position: relative;
	text-align: center;
}
.su-body .su-scene-select .su-head .su-steps .su-ctr-prev,
.su-body .su-scene-select .su-head .su-steps .su-ctr-next {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	top: 2px;
	width: 56px;
	font-size: 17px;
	line-height: 1.2;
}
.su-body .su-scene-select .su-head .su-steps .su-ctr-prev {
	left: 0;
}
.su-body .su-scene-select .su-head .su-steps .su-ctr-next {
	right: 0;
	opacity: 0.3;
}
.su-body .su-scene-select .su-head .su-steps .su-ctr-prev a,
.su-body .su-scene-select .su-head .su-steps .su-ctr-next span {
	display: block;
	padding: 2px 5px;
}
.su-body .su-scene-select .su-head .su-steps .su-num {
	position: relative;
	margin: 0 30px;
}
.su-body .su-scene-select .su-head .su-steps .su-num ol {
	display: flex;
}
.su-body .su-scene-select .su-head .su-steps .su-num ol li {
	position: relative;
	padding: 0 0 15px 0;
	flex-basis: 33.333%;
	max-width: 33.333%;
	opacity: 0.3;
	transition: opacity 0.5s linear;
}
.su-body .su-scene-select .su-head .su-steps .su-num ol li i {
	display: block;
	font-size: 18px;
	line-height: 1.5;
}
.su-body .su-scene-select .su-head .su-steps .su-num ol li span {
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -40px;
	width: 80px;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
}
.su-body .su-scene-select .su-head .su-steps .su-num .su-line {
	content: '';
	display: block;
	position: absolute;
	top: 10px;
	top: 13px;
	width: 33.333%;
	height: 1px;
	padding: 0 25px;
}
.su-body .su-scene-select .su-head .su-steps .su-num .su-line01 {
	left: 16.666%;
}
.su-body .su-scene-select .su-head .su-steps .su-num .su-line02 {
	right: 16.666%;
}
.su-body .su-scene-select .su-head .su-steps .su-num .su-line i {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
	height: 1px;
}
.su-body .su-scene-select .su-head .su-steps .su-num .su-line i::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #000;
	opacity: 0.3;
}
.su-body .su-scene-select .su-head .su-steps .su-num .su-line i::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #000;
}
.su-body .su-scene-select .su-outer {
	display: table-row;
}
.su-body .su-scene-select .su-outer .su-inner {
	display: table-cell;
	vertical-align: top;
	position: relative;
}
.su-body .su-scene-select .su-section-outer {
	position: relative;
	width: 100%;
	height: 100%;
}
.su-body .su-scene-select .su-section {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}
.su-body .su-scene-select .su-head .su-steps .su-num ol li.su-current {
	opacity: 1;
}

/*------------------------------
	SP
*/
@media screen and (max-width: 60.0625em) {
	.su-body .su-scene-select .su-head .su-inner {
		padding: 10px 0 15px 0;
	}
	.su-body .su-scene-select .su-head .su-title {
		margin: 15px 0 0 0;
		padding: 0 15px;
		font-size: 7vw;
		line-height: 1.4;
	}
}

/*------------------------------
	PC
*/
@media screen and (min-width: 60.0625em) {
	.su-body .su-scene-select .su-head .su-wrap {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: relative;
		padding: 0 15px;
		height: 100px;
	}
	.su-body .su-scene-select .su-head .su-steps {
		z-index: 1;
		width: 490px;
	}
	.su-body .su-scene-select .su-head .su-steps .su-num {
		margin: 0 20px;
	}
	.su-body .su-scene-select .su-head .su-steps .su-num .su-line {
		top: 13px;
		padding: 0;
		width: 32px;
	}
	.su-body .su-scene-select .su-head .su-steps .su-num .su-line01 {
		left: 33.333%;
		margin-left: -16px;
	}
	.su-body .su-scene-select .su-head .su-steps .su-num .su-line02 {
		right: 33.333%;
		margin-right: -16px;
	}
	.su-body .su-scene-select .su-head .su-title {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0 0 0 30px;
		height: 100%;
		font-size: 30px;
		line-height: 1.2;
	}
	.su-body .su-scene-select .su-head .su-title .su-title-in {
		display: flex;
		align-items: center;
		height: 100%;
	}
	.su-body .su-scene-select .su-head .su-title h2 {
		padding: 0 530px 0 0;
	}
	.su-body .su-scene-select .su-head .su-title h2 br {
		display: none;
	}
}

/*------------------------------
	ANIMATION
*/
.su-body .su-scene-select .su-head .su-wrap {
	opacity: 0;
	transition: opacity 0.3s linear;
}
.su-body .su-scene-select.su-head-anim-in .su-head .su-wrap {
	opacity: 1;
}
.su-body .su-scene-select .su-head .su-title {
	transition: opacity 0.3s linear;
}
.su-body .su-scene-select.su-title-anim-out .su-head .su-title {
	opacity: 0;
}
.su-body .su-scene-select .su-head .su-steps .su-num .su-line i::after {
	transform: translateX(-100%);
}
.su-body .su-scene-select.su-steps-line-move .su-head .su-steps .su-num .su-line i::after {
	transition: transform 0.5s ease;
}
.su-body .su-scene-select .su-head .su-steps .su-num .su-line.su-set-next i::after {
	transform: translateX(-100%);
}
.su-body .su-scene-select.su-steps-line-move .su-head .su-steps .su-num .su-line.su-set-next i::after {
	transform: translateX(100%);
}
.su-body .su-scene-select .su-head .su-steps .su-num .su-line.su-set-prev i::after {
	transform: translateX(100%);
}
.su-body .su-scene-select.su-steps-line-move .su-head .su-steps .su-num .su-line.su-set-prev i::after {
	transform: translateX(-100%);
}

/*============================================================

	2 - 1. how would you describe your skin undertone? 

*/
.su-body .su-scene-light-or-dark .su-list a {
	display: block;
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
}
.su-body .su-scene-light-or-dark .su-list .su-bg01 {
	background-image: url(../img/common/step01-01.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg02 {
	background-image: url(../img/common/step01-02.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg03 {
	background-image: url(../img/common/step01-03.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg04 {
	background-image: url(../img/common/step01-04.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg05 {
	background-image: url(../img/common/step01-05.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg06 {
	background-image: url(../img/common/step01-06.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg07 {
	background-image: url(../img/common/step01-07.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg08 {
	background-image: url(../img/common/step01-08.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg09 {
	background-image: url(../img/common/step01-09.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg10 {
	background-image: url(../img/common/step01-10.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg11 {
	background-image: url(../img/common/step01-11.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg12 {
	background-image: url(../img/common/step01-12.jpg);
}
.su-body .su-scene-light-or-dark .su-list .su-bg13 {
	background-image: url(../img/common/step01-13.jpg);
}

.su-body .su-scene-light-or-dark .su-list .section03-su-bg01 {
	background-image: url(../img/model/matte-375.jpg);
}
.su-body .su-scene-light-or-dark .su-list .section03-su-bg02 {
	background-image: url(../img/model/matte-574.jpg);
}
.su-body .su-scene-light-or-dark .su-list .section03-su-bg03 {
	background-image: url(../img/model/matte-784.jpg);
}

.su-body .su-section#select03 .su-list ul li .su-bg01 {
	background-image: url(../img/common/step02-02-01.jpg);
}
.su-body .su-section#select03 .su-list ul li .su-bg02 {
	background-image: url(../img/common/step02-02-02.jpg);
}
.su-body .su-section#select03 .su-list ul li .su-bg03 {
	background-image: url(../img/common/step02-02-03.jpg);
}
.su-body .su-section#select03 .su-list ul li .su-bg04 {
	background-image: url(../img/common/step02-02-04.jpg);
}
.su-body .su-section#select03 .su-list ul li .su-bg05 {
	background-image: url(../img/common/step02-02-05.jpg);
}
.su-body .su-section#select03 .su-list ul li .su-bg06 {
	background-image: url(../img/common/step02-02-06.jpg);
}
.su-body .su-section#select03 .su-list ul li .su-bg07 {
	background-image: url(../img/common/step02-02-07.jpg);
}
.su-body .su-section#select03 .su-list ul li .su-bg08 {
	background-image: url(../img/common/step02-02-08.jpg);
}

/*------------------------------
	SP
*/
@media screen and (max-width: 60.0625em) {
	.su-body .su-scene-light-or-dark .su-section-pc {
		position: relative;
		overflow: hidden;
		height: 0;
	}
	.su-body .su-scene-light-or-dark .su-section-sp {
		height: 100%;
	}
	.su-body .su-scene-light-or-dark .su-list {
		position: relative;
		height: 100%;
		font-size: 6vw;
		color: #fff;
	}
	.su-body .su-scene-light-or-dark .su-list ul {
		height: 100%;
	}
	.su-body .su-scene-light-or-dark .su-list ul li {
		height: auto;
	}
	.su-body .su-scene-light-or-dark .su-list ul li.su-current {
		opacity: 1 !important;	
	}
	.su-body .su-scene-light-or-dark .su-list ul li .su-hover {
		display: none;
	}
	.su-body .su-scene-light-or-dark .su-list a {
		position: relative;
		padding-top: 60%;
	}
	.su-body .su-scene-light-or-dark .su-list .su-block {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.su-body .su-scene-light-or-dark .su-list .su-block h3 {
		position: relative;
		padding: 0 45px 0 0;
	}
	.su-body .su-scene-light-or-dark .su-list .su-block h3 i {
		display: block;
		position: absolute;
		top: 0.1em;
		right: 18px;
		font-size: 6vw;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll {
		position: absolute;
		z-index: 10;
		top: 0;
		bottom: 0;
		left: 0;
		width: 60px;
		font-size: 12px;
		line-height: 1.5;
		color: #fff;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll .su-cap {
		position: absolute;
		left: 0;
		width: 100%;
		text-align: center;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll .su-cap-light {
		top: 20px;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll .su-cap-dark {
		bottom: 20px;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll .su-scroll {
		position: absolute;
		top: 45px;
		bottom: 45px;
		left: 50%;
		width: 1px;
		background-color: #fff;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll .su-scroll i {
		position: absolute;
		top: 0;
		left: -1px;
		width: 3px;
		height: 40px;
		background-color: #fff;
		transition: top 0.4s ease;
	}
	.su-body .su-scene-light-or-dark.su-anim-opening .su-list-scroll .su-scroll i {
		transition: top 0.1s ease;
	}
	.su-body .su-scene-light-or-dark .su-list-prev,
	.su-body .su-scene-light-or-dark .su-list-next {
		display: none;
	}
}

/*------------------------------
	PC
*/
@media screen and (min-width: 60.0625em) {
	.su-body .su-scene-light-or-dark .su-section-sp {
		position: relative;
		overflow: hidden;
		height: 0;
	}
	.su-body .su-scene-light-or-dark .su-section-pc {
		width: 100%;
		height: 100%;
	}
	.su-body .su-scene-light-or-dark .su-list {
		position: relative;
		width: 100%;
		height: 100%;
		font-size: 30px;
		color: #fff;
	}
	.su-body .su-scene-light-or-dark .su-list ul {
		height: 100%;
	}
	.su-body .su-scene-light-or-dark .su-list ul li {
		width: 448px;
		height: 100%;
	}
	.su-body .su-scene-light-or-dark .su-list ul li.su-current {
		opacity: 1 !important;	
	}
	.su-body .su-scene-light-or-dark .su-list ul li .su-hover {
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: opacity 0.1s linear;
	}
	.su-body .su-scene-light-or-dark .su-list ul li .su-hover::before,
	.su-body .su-scene-light-or-dark .su-list ul li .su-hover::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0.2);
	}
	.su-body .su-scene-light-or-dark .su-list ul li .su-hover::after {
		transform: translateX(-100%);
		background-color: rgba(255,255,255,0.5);
		transition: transform 0.15s linear 0.1s;
	}
	.su-body .su-scene-light-or-dark .su-list a {
		display: block;
		position: relative;
		height: 100%;
	}
	.su-body .su-scene-light-or-dark .su-list .su-block {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.su-body .su-scene-light-or-dark .su-list .su-block h3 {
		position: absolute;
		bottom: 50px;
		left: 0px;
		width: 100%;
		text-align: center;
	}
	.su-body .su-scene-light-or-dark .su-list .su-block h3 i {
		display: none;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll {
		position: absolute;
		z-index: 10;
		bottom: 30px;
		left: 50%;
		margin-left: -224px;
		width: 448px;
		font-size: 12px;
		line-height: 20px;
		color: #fff;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll .su-cap {
		position: absolute;
		top: -8px;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll .su-cap-light {
		right: 100%;
		margin-right: 30px;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll .su-cap-dark {
		left: 100%;
		margin-left: 30px;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll .su-scroll {
		position: relative;
		width: 100%;
		height: 1px;
		background-color: #fff;
	}
	.su-body .su-scene-light-or-dark .su-list-scroll .su-scroll i {
		position: absolute;
		top: -1px;
		left: 0;
		width: 64px;
		height: 3px;
		background-color: #fff;
		transition: left 0.4s ease;
	}
	.su-body .su-scene-light-or-dark.su-anim-opening .su-list-scroll .su-scroll i {
		transition: left 0.1s ease;
	}
	.su-body .su-scene-light-or-dark .su-list-prev,
	.su-body .su-scene-light-or-dark .su-list-next {
		position: absolute;
		z-index: 10;
		top: 50%;
		margin-top: -40px;
		font-size: 66px;
		line-height: 80px;
		color: #fff;
		cursor: pointer;
	}
	.su-body .su-scene-light-or-dark .su-list-prev {
		left: 0;
		padding-left: 15px;
	}
	.su-body .su-scene-light-or-dark .su-list-next {
		right: 0;
		padding-right: 15px;
	}
}

/*------------------------------
	ANIMATION
*/
.su-body .su-scene-light-or-dark {
	opacity: 0;
	transition: opacity 0.5s linear;
}
.su-body .su-scene-light-or-dark.su-anim-in {
	opacity: 1;
}
.su-body .su-scene-light-or-dark .su-list ul li {
	transition: opacity 0.1s linear;
}
.su-body .su-scene-light-or-dark.su-anim-out .su-list ul li {
	opacity: 0.5;
}
.su-body .su-scene-light-or-dark.su-anim-out {
	transition: opacity 0.1s linear 0.15s;
	opacity: 0;
}

/*------------------------------
	HOVER
*/
@media screen and (min-width: 60.0625em) {
	.su-none-touch-device .su-body .su-scene-light-or-dark .su-list ul li a:hover .su-hover {
		opacity: 1;
	}
	.su-none-touch-device .su-body .su-scene-light-or-dark .su-list ul li a:hover .su-hover::after {
		transform: translateX(100%);
	}
}

/*============================================================

	2 - 2. do you burn or tan?

*/
.su-body .su-scene-burn-or-tan .su-list {
	height: 100%;
	color: #fff;
}
.su-body .su-scene-burn-or-tan .su-list ul {
	height: 100%;
}
.su-body .su-scene-burn-or-tan .su-list ul li.su-current {
	opacity: 1 !important;	
}
.su-body .su-scene-burn-or-tan .su-list ul li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-bg01 {
	background-image: url(../img/common/step02-01-01.jpg);
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-bg02 {
	background-image: url(../img/common/step02-01-02.jpg);
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-bg03 {
	background-image: url(../img/common/step02-01-03.jpg);
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-row {
	display: table;
	width: 100%;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-block {
	display: table-cell;
	vertical-align: middle;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-block .su-skin-image {
	position: relative;
	padding-top: 100%;
	height: 0;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-block .su-skin-image span {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-block .su-skin-image .su-base,
.su-body .su-scene-burn-or-tan .su-list ul li .su-block .su-skin-image .su-image {
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-block .su-skin-image .su-base {
	background-image: url(../img/common/step02-skin-base.jpg);
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-bg01 .su-block .su-skin-image .su-image {
	background-image: url(../img/common/step02-skin01.jpg);
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-bg02 .su-block .su-skin-image .su-image {
	background-image: url(../img/common/step02-skin02.jpg);
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-bg03 .su-block .su-skin-image .su-image {
	background-image: url(../img/common/step02-skin03.jpg);
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-block .su-skin-image .su-line {
	opacity: 0;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-block .su-skin-image .su-line i {
	position: absolute;
	display: block;
	background-color: #fff;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-block .su-skin-image .su-line .su-line-l {
	bottom: 0;
	left: 0;
	width: 1px;
	height: 100%;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-block .su-skin-image .su-line .su-line-t {
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-block .su-skin-image .su-line .su-line-r {
	top: 0;
	right: 0;
	width: 1px;
	height: 100%;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-block .su-skin-image .su-line .su-line-b {
	bottom: 0;
	right: 0;
	width: 100%;
	height: 1px;
}
.su-body .su-scene-burn-or-tan .su-list ul li .su-title {
	display: table-cell;
	vertical-align: middle;
}

/*------------------------------
	SP
*/
@media screen and (max-width: 60.0625em) {
	.su-body .su-scene-burn-or-tan .su-list ul li a {
		background-position: 50% 30%;
	}
	.su-body .su-scene-burn-or-tan .su-list ul li {
		height: 33.333%;
		font-size: 18px;
		line-height: 1.4;
	}
	.su-body .su-scene-burn-or-tan .su-list ul li .su-hover {
		display: none;
	}
	.su-body .su-scene-burn-or-tan .su-list ul li .su-block {
		padding: 0 15px;
		width: 115px;
	}
	.su-body .su-scene-burn-or-tan .su-list ul li .su-title h3 {
		position: relative;
		padding: 0 45px 0 0;
	}
	.su-body .su-scene-burn-or-tan .su-list ul li .su-title h3 span {
		display: block;
	}
	.su-body .su-scene-burn-or-tan .su-list ul li .su-title h3 i {
		display: block;
		position: absolute;
		top: 50%;
		right: 18px;
		margin-top: -8px;
		font-size: 17px;
		line-height: 1;
	}
}

/*------------------------------
	PC
*/
@media screen and (min-width: 60.0625em) {
	.su-body .su-scene-burn-or-tan .su-list ul li a {
		background-position: 50% 50%;
	}
	.su-body .su-scene-burn-or-tan .su-list ul {
		display: flex;
		justify-content: space-between;
	}
	.su-body .su-scene-burn-or-tan .su-list ul li {
		position: relative;
		width: 100%;
		font-size: 18px;
		line-height: 1.4;
	}
	.su-body .su-scene-burn-or-tan .su-list ul li .su-hover {
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0.2);
		opacity: 0;
		transition: opacity 0.1s linear;
	}
	.su-body .su-scene-burn-or-tan .su-list ul li .su-block {
		padding: 0 30px;
		width: 188px;
	}
	.su-body .su-scene-burn-or-tan .su-list ul li .su-title h3 span {
		display: block;
	}
	.su-body .su-scene-burn-or-tan .su-list ul li .su-title h3 i {
		display: none;
	}
}

/*------------------------------
	ANIMATION
*/
.su-body .su-scene-burn-or-tan {
	opacity: 0;
	transition: opacity 0.5s linear;
}
.su-body .su-scene-burn-or-tan.su-anim-in {
	opacity: 1;
}
.su-body .su-scene-burn-or-tan.su-opening .su-list ul li .su-block .su-skin-image .su-line .su-line-t,
.su-body .su-scene-burn-or-tan.su-opening .su-list ul li .su-block .su-skin-image .su-line .su-line-b {
	width: 0;
	transition: width 0.1s linear 0.5s;
}
.su-body .su-scene-burn-or-tan.su-opening .su-list ul li .su-block .su-skin-image .su-line .su-line-l,
.su-body .su-scene-burn-or-tan.su-opening .su-list ul li .su-block .su-skin-image .su-line .su-line-r {
	height: 0;
	transition: height 0.1s linear 0.6s;
}
.su-body .su-scene-burn-or-tan.su-opening-in .su-list ul li .su-block .su-skin-image .su-line .su-line-t,
.su-body .su-scene-burn-or-tan.su-opening-in .su-list ul li .su-block .su-skin-image .su-line .su-line-b {
	width: 100%;
}
.su-body .su-scene-burn-or-tan.su-opening-in .su-list ul li .su-block .su-skin-image .su-line .su-line-l,
.su-body .su-scene-burn-or-tan.su-opening-in .su-list ul li .su-block .su-skin-image .su-line .su-line-r {
	height: 100%;
}
.su-body .su-scene-burn-or-tan.su-opening .su-list ul li .su-block .su-skin-image .su-line {
	opacity: 1;
	transition: opacity 0.3s linear 0.7s;
}
.su-body .su-scene-burn-or-tan.su-opening-in .su-list ul li .su-block .su-skin-image .su-line {
	opacity: 0;
}
.su-body .su-scene-burn-or-tan.su-opening .su-list ul li .su-block .su-skin-image .su-base {
	opacity: 0;
	transition: opacity 0.3s linear 0.7s;
}
.su-body .su-scene-burn-or-tan.su-opening .su-list ul li .su-block .su-skin-image .su-image {
	opacity: 0;
	transition: opacity 0.4s linear 1s;
}
.su-body .su-scene-burn-or-tan.su-opening-in .su-list ul li .su-block .su-skin-image .su-base,
.su-body .su-scene-burn-or-tan.su-opening-in .su-list ul li .su-block .su-skin-image .su-image {
	opacity: 1;
}
.su-body .su-scene-burn-or-tan.su-opening .su-list ul li .su-title h3 span {
	transform: translateX(-30px);
	opacity: 0;
	transition: transform 0.4s ease 1s, opacity 0.4s ease 1s;
}
.su-body .su-scene-burn-or-tan.su-opening-in .su-list ul li .su-title h3 span {
	transform: translateX(0px);
	opacity: 1;
}
.su-body .su-scene-burn-or-tan.su-opening .su-list ul li .su-title h3 i {
	opacity: 0;
	transition: opacity 0.4s linear 1s;
}
.su-body .su-scene-burn-or-tan.su-opening-in .su-list ul li .su-title h3 i {
	opacity: 1;
}
.su-body .su-scene-burn-or-tan .su-list ul li {
	transition: opacity 0.1s linear;
}
.su-body .su-scene-burn-or-tan.su-anim-out .su-list ul li {
	opacity: 0.5;
}
.su-body .su-scene-burn-or-tan.su-anim-out {
	transition: opacity 0.1s linear 0.15s;
	opacity: 0;
}

/*------------------------------
	LOOP
*/
@media screen and (max-width: 60.0625em) {
	.su-body .su-scene-burn-or-tan.su-anim-loop .su-list ul li .su-block .su-skin-image .su-line .su-line-t,
	.su-body .su-scene-burn-or-tan.su-anim-loop .su-list ul li .su-block .su-skin-image .su-line .su-line-b {
		width: 0;
		animation-name: animLine1;
		animation-duration: 0.1s;
		animation-delay: 0.1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
	.su-body .su-scene-burn-or-tan.su-anim-loop .su-list ul li .su-block .su-skin-image .su-line .su-line-l,
	.su-body .su-scene-burn-or-tan.su-anim-loop .su-list ul li .su-block .su-skin-image .su-line .su-line-r {
		height: 0;
		animation-name: animLine2;
		animation-duration: 0.1s;
		animation-delay: 0.2s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
	.su-body .su-scene-burn-or-tan.su-anim-loop .su-list ul li .su-block .su-skin-image .su-line {
		opacity: 1;
		animation-name: animOpacityOut;
		animation-duration: 0.3s;
		animation-delay: 0.3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
	.su-body .su-scene-burn-or-tan.su-anim-loop .su-list ul li .su-block .su-skin-image .su-base {
		opacity: 0;
		animation-name: animOpacityIn;
		animation-duration: 0.3s;
		animation-delay: 0.3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
	.su-body .su-scene-burn-or-tan.su-anim-loop .su-list ul li .su-block .su-skin-image .su-image {
		opacity: 0;
		animation-name: animOpacityIn;
		animation-duration: 0.4s;
		animation-delay: 0.6s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
	.su-body .su-scene-burn-or-tan.su-anim-loop .su-list ul li .su-title h3 span {
		transform: translateX(-30px);
		opacity: 0;
		animation-name: animTranslateCopy;
		animation-duration: 0.4s;
		animation-delay: 1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: ease;
	}
	.su-body .su-scene-burn-or-tan.su-anim-loop .su-list ul li .su-title h3 i {
		opacity: 0;
		animation-name: animOpacityIn;
		animation-duration: 0.4s;
		animation-delay: 1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
}


/*------------------------------
	HOVER
*/
@media screen and (min-width: 60.0625em) {
	.su-none-touch-device .su-body .su-scene-burn-or-tan .su-list ul li a:hover .su-hover {
		opacity: 1;
	}
	.su-none-touch-device .su-body .su-scene-burn-or-tan .su-list ul li a:hover .su-block .su-skin-image .su-line .su-line-t,
	.su-none-touch-device .su-body .su-scene-burn-or-tan .su-list ul li a:hover .su-block .su-skin-image .su-line .su-line-b {
		width: 0;
		animation-name: animLine1;
		animation-duration: 0.1s;
		animation-delay: 0.1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
	.su-none-touch-device .su-body .su-scene-burn-or-tan .su-list ul li a:hover .su-block .su-skin-image .su-line .su-line-l,
	.su-none-touch-device .su-body .su-scene-burn-or-tan .su-list ul li a:hover .su-block .su-skin-image .su-line .su-line-r {
		height: 0;
		animation-name: animLine2;
		animation-duration: 0.1s;
		animation-delay: 0.2s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
	.su-none-touch-device .su-body .su-scene-burn-or-tan .su-list ul li a:hover .su-block .su-skin-image .su-line {
		opacity: 1;
		animation-name: animOpacityOut;
		animation-duration: 0.3s;
		animation-delay: 0.3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
	.su-none-touch-device .su-body .su-scene-burn-or-tan .su-list ul li a:hover .su-block .su-skin-image .su-base {
		opacity: 0;
		animation-name: animOpacityIn;
		animation-duration: 0.3s;
		animation-delay: 0.3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
	.su-none-touch-device .su-body .su-scene-burn-or-tan .su-list ul li a:hover .su-block .su-skin-image .su-image {
		opacity: 0;
		animation-name: animOpacityIn;
		animation-duration: 0.4s;
		animation-delay: 0.6s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-timing-function: linear;
	}
}

@keyframes animLine1 {
	0%   { width: 0; }
	100% { width: 100%; }
}
@keyframes animLine2 {
	0%   { height: 0; }
	100% { height: 100%; }
}
@keyframes animOpacityIn {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes animOpacityOut {
	0%   { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes animTranslateCopy {
	0%   { transform: translateX(-30px); opacity: 0; }
	100% { transform: translateX(0px); opacity: 1; }
}

/*============================================================

	2 - 3. how would you describe your skin?

*/
.su-body .su-scene-describe .su-list {
	overflow: visible;
	width: 100%;
	height: 100%;
	color: #fff;
}
.su-body .su-scene-describe .su-list ul {
	position: absolute;
	top: 0;
	bottom: 0;
}
.su-body .su-scene-describe .su-list ul li {
	height: 100%;
}
.su-body .su-scene-describe .su-list ul li.su-current {
	opacity: 1 !important;	
}
.su-body .su-scene-describe .su-list ul li .su-block {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	height: 100%;
	text-align: center;
}
.su-body .su-scene-describe .su-list ul li .su-block {
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
.su-body .su-scene-describe .su-list ul li .su-bg01 {
	background-image: url(../img/model/matte-375.jpg);
}
.su-body .su-scene-describe .su-list ul li .su-bg02 {
	background-image: url(../img/model/matte-574.jpg);
}
.su-body .su-scene-describe .su-list ul li .su-bg03 {
	background-image: url(../img/model/matte-784.jpg);
}
.su-body .su-scene-describe .su-list ul li .su-bg04 {
	background-image: url(../img/common/step02-02-04.jpg);
}
.su-body .su-scene-describe .su-list ul li .su-bg05 {
	background-image: url(../img/common/step02-02-05.jpg);
}

/*------------------------------
	SP
*/
@media screen and (max-width: 60.0625em) {
	.su-body .su-scene-describe .su-section-pc {
		overflow: hidden;
		height: 0;
	}
	.su-body .su-scene-describe .su-section-sp {
		height: 100%;
	}
	.su-body .su-scene-describe .su-list ul li .su-hover {
		display: none;
	}
	.su-body .su-scene-describe .su-list ul li .su-block .su-in {
		padding: 0 0 25px 0;
	}
	.su-body .su-scene-describe .su-list ul li .su-block .su-in p {
		font-size: 12px;
		line-height: 1.6;
	}
	.su-body .su-scene-describe .su-list ul li .su-block .su-in .su-btn {
		margin: 15px auto 0 auto;
		width: 166px;
	}
	.su-body .su-scene-describe .su-list-prev,
	.su-body .su-scene-describe .su-list-next {
		display: none;
	}
}

/*------------------------------
	PC
*/
@media screen and (min-width: 60.0625em) {
	.su-body .su-scene-describe .su-section-sp {
		overflow: hidden;
		height: 0;
	}
	.su-body .su-scene-describe .su-section-pc {
		overflow: hidden;
		height: 100%;
	}
	.su-body .su-scene-describe .su-list ul li {
		position: relative;
		width: 448px;
	}
	.su-body .su-scene-describe .su-list ul li .su-hover {
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: opacity 0.1s linear;
	}
	.su-body .su-scene-describe .su-list ul li .su-hover::before,
	.su-body .su-scene-describe .su-list ul li .su-hover::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0.2);
	}
	.su-body .su-scene-describe .su-list ul li .su-hover::after {
		transform: translateX(-100%);
		background-color: rgba(255,255,255,0.5);
		transition: transform 0.15s linear 0.1s;
	}
	.su-body .su-scene-describe .su-list ul li .su-block .su-in {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		position: relative;
		padding: 0 0 30px 0;
		width: 100%;
		height: 100%;
	}
	.su-body .su-scene-describe .su-list ul li .su-block .su-in p {
		font-size: 18px;
		line-height: 1.4;
	}
	.su-body .su-scene-describe .su-list ul li .su-block .su-in .su-btn {
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: auto;
		opacity: 0 !important;
	}
	.su-body .su-scene-describe .su-list-prev,
	.su-body .su-scene-describe .su-list-next {
		position: absolute;
		z-index: 10;
		top: 50%;
		margin-top: -40px;
		font-size: 66px;
		line-height: 80px;
		color: #fff;
		cursor: pointer;
	}
	.su-body .su-scene-describe .su-list-prev {
		left: 0;
		padding-left: 15px;
	}
	.su-body .su-scene-describe .su-list-next {
		right: 0;
		padding-right: 15px;
	}
}

/*------------------------------
	ANIMATION
*/
.su-body .su-scene-describe {
	opacity: 0;
	transition: opacity 0.5s linear;
}
.su-body .su-scene-describe.su-anim-in {
	opacity: 1;
}
.su-body .su-scene-describe .su-list ul::before,
.su-body .su-scene-describe .su-list ul::after,
.su-body .su-scene-describe .su-list ul li {
	transition: opacity 0.1s linear;
}
.su-body .su-scene-describe.su-anim-out .su-list ul::before,
.su-body .su-scene-describe.su-anim-out .su-list ul::after,
.su-body .su-scene-describe.su-anim-out .su-list ul li {
	opacity: 0.5;
}
.su-body .su-scene-describe.su-anim-out {
	transition: opacity 0.1s linear 0.15s;
	opacity: 0;
}

/*------------------------------
	HOVER
*/
@media screen and (min-width: 60.0625em) {
	.su-none-touch-device .su-body .su-scene-describe .su-list ul li.su-hover-active .su-hover {
		opacity: 1;
	}
	.su-none-touch-device .su-body .su-scene-describe .su-list ul li.su-hover-active .su-hover::after {
		transform: translateX(100%);
	}
}

/*============================================================

	2 - 4. now, finetune your shade according to your preference

*/

/*------------------------------
	SP
*/
@media screen and (max-width: 60.0625em) {
	.su-body .su-scene-shade-according .su-section-pc {
		overflow: hidden;
		height: 0;
		overflow-y: auto;
	}
	.su-body .su-scene-shade-according .su-section-sp {
		height: 100%;
	}
	.su-body .su-scene-shade-according .su-section-sp div {
		position: absolute;
		font-size: 12px;
		line-height: 1.3;
	}
	.su-body .su-scene-shade-according .su-label-golden {
		top: 0;
		width: 100%;
		text-align: center;
	}
	.su-body .su-scene-shade-according .su-label-rosy {
		bottom: 20px;
		width: 100%;
		text-align: center;
	}
	.su-body .su-scene-shade-according .su-label-lighter {
		top: 50%;
		left: 15px;
		margin-top: -8px;
	}
	.su-body .su-scene-shade-according .su-label-darker {
		top: 50%;
		right: 15px;
		margin-top: -8px;
	}
	.su-body .su-scene-shade-according .su-howto,
	.su-body .su-scene-shade-according .su-howto-pointer,
	.su-body .su-scene-shade-according .su-base,
	.su-body .su-scene-shade-according .su-select-pointer,
	.su-body .su-scene-shade-according .su-pad {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.su-body .su-scene-shade-according .su-howto span {
		display: block;
		position: absolute;
		top: 30px;
		right: 13px;
		width: 154px;
		height: 112px;
		background-color: transparent;
		background-image: url(../img/common/howto.svg);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.su-body .su-scene-shade-according .su-howto-pointer {
		padding: 100px 100px;
	}
	.su-body .su-scene-shade-according .su-howto-pointer span {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
	}
	.su-body .su-scene-shade-according .su-howto-pointer span i {
		display: block;
		position: absolute;
		margin: -15px 0 0 -15px;
		width: 30px;
		height: 30px;
		border: 4px solid #fff;
		border-radius: 50%;
	}
	.su-body .su-scene-shade-according .su-howto-pointer span .su-howto-pointer-x {
		top: 50%;
		left: 0;
	}
	.su-body .su-scene-shade-according .su-howto-pointer span .su-howto-pointer-y {
		top: 100%;
		left: 50%;
	}
	.su-body .su-scene-shade-according .su-base {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.su-body .su-scene-shade-according .su-base span {
		display: block;
		width: 150px;
		height: 150px;
		background-color: transparent;
		background-image: url(../img/common/bottle-silhouette.svg);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.su-body .su-scene-shade-according .su-select-pointer span {
		display: block;
		position: absolute;
		top: 90px;
		bottom: 90px;
		left: 80px;
		right: 80px;
	}
	.su-body .su-scene-shade-according .su-select-pointer i {
		display: block;
		position: absolute;
		width: 30px;
		height: 30px;
		border: 4px solid #fff;
		border-radius: 50%;
		opacity: 0;
		transition: opacity 0.3s linear;
	}
	.su-body .su-scene-shade-according .su-select-pointer i.su-pointer01 {
		bottom: 0;
		left: 0;
	}
	.su-body .su-scene-shade-according .su-select-pointer i.su-pointer02 {
		top: 50%;
		left: 0;
		margin: -15px 0 0 0;
	}
	.su-body .su-scene-shade-according .su-select-pointer i.su-pointer03 {
		top: 0;
		left: 0;
	}
	.su-body .su-scene-shade-according .su-select-pointer i.su-pointer04 {
		bottom: 0;
		left: 50%;
		margin: 0 0 0 -15px;
	}
	.su-body .su-scene-shade-according .su-select-pointer i.su-pointer05 {
		top: 50%;
		left: 50%;
		margin: -15px 0 0 -15px;
	}
	.su-body .su-scene-shade-according .su-select-pointer i.su-pointer06 {
		top: 0;
		left: 50%;
		margin: 0 0 0 -15px;
	}
	.su-body .su-scene-shade-according .su-select-pointer i.su-pointer07 {
		bottom: 0;
		right: 0;
	}
	.su-body .su-scene-shade-according .su-select-pointer i.su-pointer08 {
		top: 50%;
		right: 0;
		margin: -15px 0 0 0;
	}
	.su-body .su-scene-shade-according .su-select-pointer i.su-pointer09 {
		top: 0;
		right: 0;
	}
	.su-body .su-scene-shade-according .su-btn-ctr {
		position: absolute;
		bottom: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 75px;
		height: 75px;
		border-radius: 50%;
		text-align: center;
		font-size: 12px;
		line-height: 1.3;
		color: #000;
	}
	.su-body .su-scene-shade-according .su-btn-reset {
		border: 1px solid #000;
	}
	.su-body .su-scene-shade-according .su-btn-next {
		border: 1px solid #fff;
		background-color: #000;
		color: #fff;
	}
	/*------------------------------
		ANIMATION
	*/
	.su-body .su-base-color-select04-howto {
		transition: opacity 0.5s linear, background-color 0.5s linear;
	}
	.su-body .su-scene-shade-according .su-howto-pointer span i {
		opacity: 0;
		transition: opacity 0.2s linear, top 0.5s linear, left 0.5s linear;
	}
	.su-body .su-scene-shade-according .su-howto span {
		opacity: 0;
		transition: opacity 0.2s linear;
	}
	.su-body .su-scene-shade-according .su-base span {
		width: 65vw;
		height: 65vw;
		margin-bottom: 5%;
	}
	.su-body .su-scene-shade-according .su-range-title{
		font-size: 5vw;
		text-align: center;
	}
	.su-body .su-scene-shade-according .su-btn-ctr {
		opacity: 0.5;
		transition: opacity 0.5s linear;
	}
	.su-body .su-scene-shade-according.su-anim-finish .su-base span,
	.su-body .su-scene-shade-according.su-anim-finish .su-btn-ctr {
		opacity: 1;
	}
	
	.su-body .su-scene-shade-according .su-range-txt{
		position: absolute;
		bottom: 0;
		left: 50%;
		font-size: 4vw;
		text-align: center;
		transform: translateX(-50%);
	}
	.su-body .su-scene-shade-according .su-range {
		position: relative;
		padding: 0 15px;
		height: 20vw;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider::before {
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		background-color: #000;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base {
		position: relative;
		margin: 0 auto;
		width: 60vw;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base span,
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base i {
		display: block;
		position: absolute;
		top: -9px;
		width: 1px;
		height: 17px;
		background-color: #000;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-line-l {
		left: 0;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-line-c {
		left: 50%;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-line-r {
		left: 100%;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base span {
		margin-left: -8px;
		width: 17px;
		opacity: 0;
		cursor: pointer;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-area-l {
		left: 0;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-area-c {
		left: 50%;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-area-r {
		left: 100%;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-pointer {
		position: absolute;
		top: 0;
		left: 0;
		margin: -9px 0 0 27.9vw;
		width: 17px;
		height: 17px;
		cursor: pointer;
		transition: left 0.2s ease;
	}
	.su-range-moving .su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-pointer {
		transition-duration: 0;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-pointer::before {
		content: '';
		display: block;
		position: absolute;
		top: 3px;
		left: 3px;
		width: 11px;
		height: 11px;
		background-color: #000;
		border-radius: 50%;
	}
	.su-body .su-scene-shade-according .su-range .su-cap {
		position: absolute;
		align-items: center;
		width: 17vw;
		height: 100%;
		font-size: 5vw;
	}
	.su-body .su-scene-shade-according .su-range .su-cap span {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		cursor: pointer;
		transform: translate(-50%,-50%);
		white-space: nowrap;
	}
	.su-body .su-scene-shade-according .su-range .su-cap-left {
		left: 0;
	}
	.su-body .su-scene-shade-according .su-range .su-cap-right {
		right: 0;
	}
	.su-body .su-scene-shade-according .su-btns {
		display: flex;
		justify-content: space-between;
		margin: 5% 5%;
	}
	.su-body .su-scene-shade-according .su-btns li {
		flex-basis: 48%;
		max-width: 48%;
		padding: 0;
	}
	.su-body .su-scene-shade-according .su-btn-reset {
		background-color: transparent;
		border-color: #000;
		color: #000;
	}
}

/*------------------------------
	PC
*/
@media screen and (min-width: 60.0625em) {
	.su-body .su-base-color-select04-howto {
		display: none;
	}
	.su-body .su-scene-shade-according {
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	.su-body .su-scene-shade-according .su-section-sp {
		overflow: hidden;
		height: 0;
	}
	.su-body .su-scene-shade-according .su-section-pc {
		height: 100%;
	}
	.su-body .su-scene-shade-according .su-row-outer {
		padding: 0 0 50px 0;
		height: 100%;
	}
	.su-body .su-scene-shade-according .su-row {
		display: table;
		width: 100%;
		height: 100%;
	}
	.su-body .su-scene-shade-according .su-base {
		display: table-cell;
		vertical-align: middle;
	}
	.su-body .su-scene-shade-according .su-base span {
		display: block;
		margin: 0 auto;
		width: 400px;
		height: 400px;
		background-color: transparent;
		background-image: url(../img/common/bottle-silhouette.svg);
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.su-body .su-scene-shade-according .su-ctr {
		display: table-cell;
		vertical-align: middle;
		padding: 30px 45px 0 45px;
		width: 545px;
		border-left: 1px solid #000;
	}
	.su-body .su-scene-shade-according .su-range-title{
		font-size: 24px;
		text-align: center;
	}
	.su-body .su-scene-shade-according .su-range-txt{
		position: absolute;
		bottom: 0;
		left: 46%;
		font-size: 20px;
		text-align: center;
		transform: translateX(-50%);
	}
	.su-body .su-scene-shade-according .su-range {
		position: relative;
		padding: 0 15px;
		height: 100px;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider {
		position: absolute;
		top: 50%;
		left: 75px;
		right: 105px;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider::before {
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		background-color: #000;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base {
		position: relative;
		margin: 0 auto;
		width: 192px;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base span,
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base i {
		display: block;
		position: absolute;
		top: -9px;
		width: 1px;
		height: 17px;
		background-color: #000;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-line-l {
		left: 0;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-line-c {
		left: 50%;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-line-r {
		left: 100%;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base span {
		margin-left: -8px;
		width: 17px;
		opacity: 0;
		cursor: pointer;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-area-l {
		left: 0;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-area-c {
		left: 50%;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-range-area-r {
		left: 100%;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-pointer {
		position: absolute;
		top: 0;
		left: 0;
		margin: -9px 0 0 88px;
		width: 17px;
		height: 17px;
		cursor: pointer;
		transition: left 0.2s ease;
	}
	.su-range-moving .su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-pointer {
		transition-duration: 0;
	}
	.su-body .su-scene-shade-according .su-range .su-range-slider .su-range-slider-base .su-pointer::before {
		content: '';
		display: block;
		position: absolute;
		top: 3px;
		left: 3px;
		width: 11px;
		height: 11px;
		background-color: #000;
		border-radius: 50%;
	}
	.su-body .su-scene-shade-according .su-range .su-cap {
		display: flex;
		align-items: center;
		width: 65px;
		height: 100%;
		font-size: 18px;
	}
	.su-body .su-scene-shade-according .su-range .su-cap span {
		display: block;
		cursor: pointer;
	}
	.su-body .su-scene-shade-according .su-range .su-cap-left {
		float: left;
	}
	.su-body .su-scene-shade-according .su-range .su-cap-right {
		float: right;
	}
	.su-body .su-scene-shade-according .su-btns {
		display: flex;
		margin: 50px 0 0 0;
	}
	.su-body .su-scene-shade-according .su-btns li {
		flex-basis: 50%;
		max-width: 50%;
		padding: 0 15px;
	}
	.su-body .su-scene-shade-according .su-btn-reset {
		background-color: transparent;
		border-color: #000;
		color: #000;
	}
}

/*------------------------------
	ANIMATION
*/
.su-body .su-scene-shade-according {
	opacity: 0;
	transition: opacity 0.5s linear;
}
.su-body .su-scene-shade-according.su-anim-in {
	opacity: 1;
}
.su-body .su-scene-shade-according.su-anim-out {
	opacity: 0;
}

/*============================================================

	2 - 5. which finish do you prefer?

*/
.su-body .su-scene-which-finish .su-list {
	height: 100%;
	color: #fff;
}
.su-body .su-scene-which-finish .su-list ul {
	display: flex;
	height: 100%;
}
.su-body .su-scene-which-finish .su-list ul li {
	flex-basis: 50%;
	max-width: 50%;
	height: 100%;
}
.su-body .su-scene-which-finish .su-list ul li.su-current {
	opacity: 1 !important;	
}
.su-body .su-scene-which-finish .su-list ul li .su-block {
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
.su-body .su-scene-which-finish .su-list ul li .su-block .su-product span {
	display: block;
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}
/* .su-body .su-scene-which-finish .su-list ul li .su-block-matte .su-product span { */
.su-body .su-scene-which-finish .su-list ul li .su-block-product01 .su-product span {
	/* background-image: url(../img/common/step03-bottle-matte.png); */
	/* background-image: url(../img/common/product01.jpg); */
}
/* .su-body .su-scene-which-finish .su-list ul li .su-block-glow .su-product span { */
.su-body .su-scene-which-finish .su-list ul li .su-block-product02 .su-product span {
	/* background-image: url(../img/common/step03-bottle-glow.png); */
	/* background-image: url(../img/common/step03-bottle-cream.png); */
	/* background-image: url(../img/common/product02.jpeg); */
}

/*------------------------------
	SP
*/
@media screen and (max-width: 60.0625em) {
	
	.su-body .su-scene-which-finish .su-list ul {
		flex-wrap: wrap;
	}
	.su-body .su-scene-which-finish .su-list ul li {
		flex-basis: 100%;
		max-width: 100%;
		height: 50%;
	}
	.su-body .su-scene-which-finish .su-list ul li.su-current {
		opacity: 1 !important;	
	}
	.su-body .su-scene-which-finish .su-list ul li .su-block {
		background-size: 100% auto;
	}
	.su-body .su-scene-which-finish .su-list ul li .su-block {
		display: flex;
		align-items: flex-end;
		height: 100%;
	}
	.su-body .su-scene-which-finish .su-list ul li .su-block .su-product {
		padding: 20px 25px;
		width: 100%;
	}
	.su-body .su-scene-which-finish .su-list ul li .su-block .su-product span {
		margin: 0 auto;
		width: 75px;
		height: 124px;
	}
	.su-body .su-scene-which-finish .su-list ul li:nth-child(1) .su-block .su-product span {
		margin: 0 0 0 auto;
	}
	.su-body .su-scene-which-finish .su-list ul li:nth-child(2) .su-block .su-product span {
		margin: 0 auto 0 0;
	}
	.su-body .su-scene-which-finish .su-list ul li .su-block .su-product h3 {
		display: none;
	}
	.su-body .su-scene-which-finish .su-list ul li .su-block .su-product .su-btn {
		margin: 15px 0 0 0;
	}
	/* .su-body .su-scene-which-finish .su-list ul li .su-block-matte { */
	.su-body .su-scene-which-finish .su-list ul li .su-block-product01 {
		/* background-image: url(../img/common/step03-model-matte2.jpg); */
		background-image: url(../img/common/product01.jpg);
	}
	/* .su-body .su-scene-which-finish .su-list ul li .su-block-glow { */
	.su-body .su-scene-which-finish .su-list ul li .su-block-product02 {
		/* background-image: url(../img/common/step03-model-glow.jpg); */
		background-image: url(../img/common/product02.jpeg);
	}
}

/*------------------------------
	PC
*/
@media screen and (min-width: 60.0625em) {
	.su-body .su-scene-which-finish .su-list ul li .su-hover {
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		transition: opacity 0.1s linear;
	}
	.su-body .su-scene-which-finish .su-list ul li .su-hover::before,
	.su-body .su-scene-which-finish .su-list ul li .su-hover::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0.2);
	}
	.su-body .su-scene-which-finish .su-list ul li .su-hover::after {
		transform: translateX(-100%);
		background-color: rgba(255,255,255,0.5);
		transition: transform 0.15s linear 0.1s;
	}
	.su-body .su-scene-which-finish .su-list ul li .su-block {
		position: relative;
		display: flex;
		align-items: center;
		height: 100%;
	}
	.su-body .su-scene-which-finish .su-list ul li .su-block .su-product {
		display: flex;
		align-items: flex-end;
		padding: 0 32px;
		width: 100%;
	}
	.su-body .su-scene-which-finish .su-list ul li:first-child .su-block .su-product {
		flex-direction: row-reverse;
	}
	.su-body .su-scene-which-finish .su-list ul li .su-block .su-product span {
		width: 160px;
		height: 264px;
	}
	.su-body .su-scene-which-finish .su-list ul li .su-block .su-product h3 {
		padding: 0 30px;
		font-size: 36px;
		line-height: 1.1;
	}
	.su-body .su-scene-which-finish .su-list ul li .su-block .su-product .su-btn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: auto;
		opacity: 0;
	}
	/* .su-body .su-scene-which-finish .su-list ul li .su-block-matte { */
	.su-body .su-scene-which-finish .su-list ul li .su-block-product01 {
		/* background-image: url(../img/common/step03-model-matte2.jpg); */
		background-image: url(../img/common/product01.jpg);
	}
	/* .su-body .su-scene-which-finish .su-list ul li .su-block-glow { */
	.su-body .su-scene-which-finish .su-list ul li .su-block-product02 {
		/* background-image: url(../img/common/step03-model-glow.jpg); */
		background-image: url(../img/common/product02.jpeg);
	}
}

/*------------------------------
	HOVER
*/
@media screen and (min-width: 60.0625em) {
	.su-none-touch-device .su-body .su-scene-which-finish .su-list ul li.su-hover-active .su-hover {
		opacity: 1;
	}
	.su-none-touch-device .su-body .su-scene-which-finish .su-list ul li.su-hover-active .su-hover::after {
		transform: translateX(100%);
	}
}

/*------------------------------
	ANIMATION
*/
.su-body .su-scene-which-finish {
	opacity: 0;
	transition: opacity 0.5s linear;
}
.su-body .su-scene-which-finish.su-anim-in {
	opacity: 1;
}
.su-body .su-scene-which-finish .su-list ul li {
	transition: opacity 0.1s linear;
}
.su-body .su-scene-which-finish.su-anim-out .su-list ul li {
	opacity: 0.5;
}
.su-body .su-scene-which-finish.su-anim-out {
	transition: opacity 0.1s linear 0.15s;
	opacity: 0;
}

/*============================================================

	3. your personal match is...

*/
.su-body .su-scene-matching {
	background-color: #f3d9c2;
}
.su-body .su-scene-matching .su-base span {
	display: block;
	background-color: transparent;
	background-image: url(../img/common/bottle-silhouette.svg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}

/*------------------------------
	SP
*/
@media screen and (max-width: 60.0625em) {
	.su-body .su-scene-matching .su-content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		text-align: center;
	}
	.su-body .su-scene-matching .su-title {
		margin: 0 0 50px 0;
		font-size: 18px;
		line-height: 1.2;
	}
	.su-body .su-scene-matching .su-base {
		margin: 0 auto;
		width: 109px;
		height: 182px;
	}
	.su-body .su-scene-matching .su-base span {
		width: 100%;
		height: 100%;
	}
}

/*------------------------------
	PC
*/
@media screen and (min-width: 60.0625em) {
	.su-body .su-scene-matching .su-content {
		height: 100%;
	}
	.su-body .su-scene-matching .su-content .su-wrap {
		display: table;
		margin: 0 auto;
		height: 100%;
	}
	.su-body .su-scene-matching .su-title {
		display: table-cell;
		vertical-align: middle;
		padding: 0 60px 0 0;
		font-size: 24px;
		line-height: 1.2;
	}
	.su-body .su-scene-matching .su-base {
		display: table-cell;
		vertical-align: middle;
	}
	.su-body .su-scene-matching .su-base span {
		width: 130px;
		height: 216px;
	}
}

/*------------------------------
	ANIMATION
*/
.su-body .su-scene-matching {
	opacity: 0;
	transition: opacity 0.5s linear;
}
.su-body .su-scene-matching.su-anim-in {
	opacity: 1;
}
.su-body .su-scene-matching.su-anim-out {
	opacity: 0;
}

/*============================================================
	4. result
*/
.su-body .su-scene-result {
	height: 0;
	position: relative;
	background: transparent url(../img/common/bg-pattern.jpg) 0 0 repeat;
	background-size: 100px 100px;
	color: #fff;
}
.su-body-result .su-body .su-scene-result {
	height: auto;
}
.su-form{
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	overflow: hidden;
	background: #0d121a;
	background-size: 100% auto;
}
.su-form-inner-container{
	display: flex;
	flex-wrap: wrap;
}
.su-form-section{
	flex-basis: 0 0 100%;
	max-width: 100%;
}
.su-form  .su-form-bg{
	display: none;
}
.su-form  .su-form-container{
	position: relative;
	transform: translateY(0);
	background-size: cover;
	text-align: center;
	background: rgba(255,255,255,0.5);
	padding: 5vw 0;
}
.su-form .su-form-title{
	font-size: 4.5vw;
	color: white;
	text-align: center;
	padding: 5%;
	white-space: nowrap;
}
.su-form .su-form-title span{
	font-size: 140%;
}
.su-form .su-form-title-cn{
	font-size: 5vw;
}
.su-form-tnc{
	font-size: 2.5vw;
	padding: 0 5% 5%;
	color: white;
}
.su-botanicoil_logo{
	width: 50%;
	margin: 0 auto 5%;
}
.su-form  .su-form-txt{
	position: relative;
	display: inline-block;
	font-family:  "Helvetica Neue LT W05_43 Lt Ex", "HelveticaNeueLTStd-LtEx", "DFHeiStd-W7", sans-serif;
	font-size: 4.5vw;
	color: black;
	text-align: center;
	margin: 0 5% 5% 5%;
	font-family: 'HelveticaNeue-Extended', Helvetica, arial, 'microsoft jhenghei', sans-serif;
}
.su-form  .su-form-container .su-form-txt::after{
	position: absolute;
	display: block;
	content: "";
	left: 105%;
	top: 0;
	width: 13vw;
	height: 13vw;
	background: url(../img/common/free-sample.png) no-repeat center;
	background-size: contain;
}
.su-form  .iframe__form{
	position: relative;
	width: 95%;
	max-height: 2000px !important;
}
.su-form  .su-form-img{
	background-position: cover;
	padding: 5vw 0;
	text-align: center;
}
.su-form  .su-form-img img{
	width: 80%;
}
.su-form  .su-form-name{
	font-family: "HelveticaNeueLTStd-LtEx","DFHeiStd-W7", "Microsoft JhengHei";
	display: block;
	font-size: 7vw;
	color: black;
	text-align: center;
	padding: 5%;
	font-family: 'HelveticaNeue-Extended', Helvetica, arial, 'microsoft jhenghei', sans-serif;
}

/**/
.su-body .su-scene-result .su-ctr-scene-prev {
	position: absolute;
	top: 10px;
	left: 15px;
	transition: opacity 0.5s linear;
}
.su-body .su-scene-result .su-ctr-scene-prev a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	background-color: rgba(0,0,0,0.5);
	border-radius: 50%;
	text-align: center;
	font-size: 18px;
	line-height: 1;
	color: #fff;
}
.su-body .su-scene-result .su-ctr-scene-prev a i {
	display: block;
}
.su-body .su-scene-result .su-artist-tips .su-tips-image {
	position: absolute;
	background-color: transparent;
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-image: url(../img/common/result-tips-image.png);
	background-size: contain;
}
.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-portrait span {
	display: block;
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-image: url(../img/common/uchiide-portrait.jpg);
	background-size: cover;
}
.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-name .su-sign {
	width: 105px;
	height: 26px;
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-image: url(../img/common/uchiide-sign.png);
	background-size: contain;
}
.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-image span {
	display: block;
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}
.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-tip-matte .su-item .su-image span {
	background-image: url(../img/tips/01-matte.jpg);
}
.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-tip-glow .su-item .su-image span {
	background-image: url(../img/tips/01-glow.jpg);
}
.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-tip-booster .su-item .su-image span {
	background-image: url(../img/tips/02.jpg);
}
.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-tip-hue3 .su-item .su-image span {
	background-image: url(../img/tips/03-ir025.jpg);
}
.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-tip-hue4 .su-item .su-image span {
	background-image: url(../img/tips/03-m225.jpg);
}
.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-tip-hue5 .su-item .su-image span {
	background-image: url(../img/tips/03-m335.jpg);
}
.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-tip-hue6 .su-item .su-image span {
	background-image: url(../img/tips/03-m521.jpg);
}
.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-tip-hue7 .su-item .su-image span {
	background-image: url(../img/tips/03-apricot.jpg);
}

/*------------------------------
	SP
*/
@media screen and (max-width: 60.0625em) {
	/**/
	.su-body .su-scene-result .su-kv {
		padding-top: 61.866%;
		height: 0;
		background-color: transparent;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		background-size: contain;
	}
	/**/
	.su-body .su-scene-result .su-product {
		position: relative;
		padding: 15px;
	}
	.su-body .su-scene-result .su-product .su-base-texture,
	.su-body .su-scene-result .su-product .su-base-product {
		position: absolute;
		background-color: transparent;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		background-size: contain;
	}
	.su-body .su-scene-result .su-product .su-base-texture {
		top: 30px;
		left: 0;
		width: 150px;
		height: 206px;
	}
	.su-body .su-scene-result .su-product .su-base-product {
		top: -25px;
		left: 30px;
		width: 105px;
		height: 172px;
	}
	.su-body .su-scene-result .su-product .su-detail {
		padding: 0 0 30px 150px;
		min-height: 240px;
		font-size: 12px;
		line-height: 1.6;
	}
	.su-body .su-scene-result .su-product .su-detail .su-main-title{
		font-size: 5vw;
	}
	.su-body .su-scene-result .su-product .su-detail h2 {
		font-size: 12vw;
		line-height: 1.2;
	}
	.su-body .su-scene-result .su-product .su-detail h3 {
		margin: 2px 0 0 0;
		font-size: 4.5vw;
		line-height: 1.2;
	}
	.su-body .su-scene-result .su-product .su-detail h4 {
		margin: 5px 0 15px 0;
		font-size: 12px;
	}
	.su-body .su-scene-result .su-product .su-tnc{
		font-size: 3vw;
		margin-top: 5%;
	}
	.su-body .su-scene-result .su-product .su-jpy {
		margin: 12px 0 0 0;
	}
	.su-body .su-scene-result .su-product .su-btn {
		margin: 0 auto;
		width: 225px;
	}
	
	.su-select-cream .su-body .su-scene-result .su-product .su-base-texture {
		width: 200px;
	}
	.su-select-cream .su-body .su-scene-result .su-product .su-base-product {
		top: unset;
		left: 20px;
	}
	
	/**/
	.su-body .su-scene-result .su-foundation {
		position: relative;
		display: flex;
		align-items: center;
		margin: 35px 0 0 0;
		padding: 15px;
		height: 232px;
		background-color: transparent;
		background-position: 90% 30%;
		background-repeat: no-repeat;
		background-image: url(../img/common/result-foundation-sp.jpg);
		background-size: cover;
		font-size: 12px;
	}
	.su-body .su-scene-result .su-foundation .su-detail {
		padding: 0 48% 0 0;
	}
	.su-body .su-scene-result .su-foundation .su-detail h3 {
		margin: 8px 0;
	}
	.su-body .su-scene-result .su-foundation .su-detail .su-btn {
		margin: 20px 0 0 0;
	}
	/**/
	/**/
	.su-body .su-scene-result .su-artist-tips {
		position: relative;
		margin: 40px 0 0 0;
		padding: 45px 0 50px 0;
		background-color: #000;
		font-size: 12px;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips-image {
		top: -40px;
		right: -30px;
		width: 180px;
		height: 180px;
	}
	.su-body .su-scene-result .su-artist-tips h2 {
		padding: 0 15px;
		font-size: 18px;
		line-height: 1.5;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director {
		margin: 25px 0 0 0;
		padding: 0 15px;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-in {
		display: table;
		width: 100%;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-portrait {
		display: table-cell;
		vertical-align: top;
		width: 75px;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-portrait span {
		width: 75px;
		height: 75px;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-name {
		display: table-cell;
		vertical-align: top;
		padding: 0 0 0 15px;
		line-height: 1.3;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-name h4 {
		margin: 8px 0 8px 0;
		font-size: 18px;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips-swiper-pager {
		display: flex;
		margin: 25px 0 0 0;
		padding: 0 15px;
		font-size: 18px;
		line-height: 1.2;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips-swiper-pager div {
		position: relative;
		padding: 0 50px 0 0;
		text-align: center;
		outline: 0;
		opacity: 1;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips-swiper-pager div:last-child {
		padding: 0;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips-swiper-pager div::before {
		content: '';
		display: block;
		position: absolute;
		top: 7px;
		top: 10px;
		right: 10px;
		width: 30px;
		height: 1px;
		background-color: #fff;
		opacity: 0.5;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips-swiper-pager div:last-child::before {
		display: none;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips-swiper-pager div span {
		display: block;
		width: 20px;
		opacity: 0.5;
		transition: opacity 0.3s ease;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips-swiper-pager div.su-current {
		background-color: transparent;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips-swiper-pager div.su-current span {
		opacity: 1;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list ul li {
		padding: 0 15px;
		width: 88%;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-lead {
		line-height: 1.6;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item {
		margin: 25px 0 0 0;
		padding: 15px;
		background-color: #fff;
		color: #000;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-row {
		display: table;
		width: 100%;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-image {
		display: table-cell;
		vertical-align: top;
		width: 75px;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-image span {
		width: 75px;
		height: 110px;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-detail {
		display: table-cell;
		vertical-align: top;
		padding: 5px 0 0 15px;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-detail .su-jpy {
		margin: 10px 0 0 0;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-detail .su-btn {
		margin: 20px 0 0 0;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list-sp {
		margin: 25px 0 0 0;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list-pc {
		overflow: hidden;
		height: 0;
	}
	/**/
	.su-body .su-scene-result .su-ctr-scene-retry {
		margin: 50px 0 0 0;
	}
	.su-body .su-scene-result .su-ctr-scene-retry .su-btn {
		margin: 0 auto;
		width: 285px;
		height: 58px;
	}
	.su-body .su-scene-result .su-ctr-scene-retry .su-btn i {
		display: block;
		position: absolute;
		top: 50%;
		left: 10px;
		margin-top: -7px;
		font-size: 14px;
		line-height: 1;
	}
	.su-body .su-scene-result .su-ctr-scene-prev {
		padding-top: 0 !important;
	}
	/**/
	.su-body .su-scene-result .su-banner-faceshaper {
		margin: 50px 0 0 0;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-outer {
	}
	.su-body .su-scene-result .su-banner-faceshaper a {
		position: relative;
		display: block;
		padding-top: 53.333%;
		height: 0;
		background-color: transparent;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-image: url(../img/common/banner-faceshaper-sp.jpg);
		background-size: cover;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-inner {
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		padding: 0 15px;
		width: 100%;
		height: 100%;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-inner h2 {
		padding: 0;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-inner h2 span {
		display: block;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-inner h2 span:first-child {
		font-size: 12px;
		line-height: 1.5;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-inner h2 span:last-child {
		overflow: hidden;
		margin: 5px 0 20px -1px;
		width: 200px;
		height: 25px;
		background-color: transparent;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-image: url(../img/common/logo-faceshaper.svg);
		background-size: contain;
		text-indent: -999em;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-inner .su-btn {
		width: 178px;
	}

}

/*------------------------------
	PC
*/
@media screen and (min-width: 60.0625em) {
	.su-body .su-scene-result .su-ctr-scene-prev {
		top: 30px;
		left: 30px;
	}
	/**/
	.su-body .su-scene-result .su-main {
		display: table;
		width: 100%;
		height: 490px;
		height: 600px;
	}
	/**/
	.su-body .su-scene-result .su-kv {
		display: table-cell;
		vertical-align: top;
		width: 47.5%;
		background-color: transparent;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		background-size: contain;
	}
	/**/
	.su-body .su-scene-result .su-main-detail {
		display: table-cell;
		vertical-align: middle;
		padding: 45px 30px 50px 128px;
		background-color: #000;
	}
	.su-body .su-scene-result .su-main-detail-in {
	}
	.su-body .su-scene-result .su-product {
		position: relative;
	}
	.su-body .su-scene-result .su-product .su-base-texture {
		display: none;
	}
	.su-body .su-scene-result .su-product .su-base-product {
		position: absolute;
		top: 60px;
		left: -195px;
		width: 160px;
		height: 262px;
		background-color: transparent;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		background-size: contain;
	}
	.su-body .su-scene-result.su-none-foundation .su-product .su-base-product {
		top: 50%;
		margin-top: -131px;
	}
	.su-body .su-scene-result .su-product .su-detail {
		max-width: 400px;
		font-size: 12px;
		line-height: 1.6;
	}
	.su-body .su-scene-result .su-product .su-detail .su-main-title{
		font-size: 32px;
	}
	.su-body .su-scene-result .su-product .su-detail .su-main-copy{
		font-size: 18px;
	}
	.su-body .su-scene-result .su-product .su-tnc{
		font-size: 12px;
		margin-top: 20px;
	}
	.su-body .su-scene-result .su-product .su-detail h2 {
		font-size: 42px;
		line-height: 1.2;
	}
	.su-body .su-scene-result .su-product .su-detail h3 {
		margin: 10px 0 0 0;
		font-size: 24px;
		line-height: 1.2;
	}
	.su-body .su-scene-result .su-product .su-detail h4 {
		margin: 5px 0 15px 0;
		font-size: 12px;
	}
	.su-body .su-scene-result .su-product .su-jpy {
		margin: 12px 0 0 0;
	}
	.su-body .su-scene-result .su-product .su-btn {
		margin: 20px 0 0 0;
		width: 225px;
	}
	/**/
	.su-body .su-scene-result .su-foundation {
		position: relative;
		display: flex;
		align-items: center;
		margin: 35px 0 0 0;
		padding: 15px 30px;
		min-height: 160px;
		border: 1px solid #828282;
		background-color: transparent;
		background-position: 100% 50%;
		background-repeat: no-repeat;
		background-image: url(../img/common/result-foundation-pc.png);
		background-size: contain;
		font-size: 12px;
	}
	.su-body .su-scene-result .su-foundation .su-detail h3 {
		margin: 8px 0;
	}
	.su-body .su-scene-result .su-foundation .su-detail .su-btn {
		margin: 20px 0 0 0;
		width: 192px;
	}
	/**/
	.su-form  {
		position: relative;
		font-size: 12px;
		background: #0d121a;
		background-size: cover;
		padding: 40px 0;
	}
	.su-form-inner-container{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: unset;
		align-items: center;
	}
	.su-form-section{
		flex-basis: 50%;
		max-width: 50%;
	}
	.su-form  .su-form-bg{
		display: block;
	}
	.su-form  .su-form-bg img{
		width: 100%;
	}
	.su-form  .su-form-img{
		position: relative;
		background: transparent;
		padding: 0;
	}
	.su-form  .su-form-img img{
		width: 80%;
	}
	.su-form  .su-form-name-mb{
		display: none;
	}
	.su-form  .su-form-img .su-form-name{
		display: block;
		font-size: 28px;
		color: black;
		text-align: center;
	}
	.su-form  .su-form-container{
		position: relative;
		background: transparent;
		text-align: center;
		background: rgba(255,255,255,0.5);
		padding: 20px 0;
	}
	.su-form .su-form-title{
		font-family:  "Helvetica Neue LT W05_43 Lt Ex", "HelveticaNeueLTStd-LtEx", "DFHeiStd-W7", sans-serif;
		font-size: 35px;
		text-align: center;
		color: white;
		margin-bottom: 20px;
		padding: 0;
	font-family: 'HelveticaNeue-Extended', Helvetica, arial, 'microsoft jhenghei', sans-serif;
	}
	.su-form-tnc{
		font-family:  "Helvetica Neue LT W05_43 Lt Ex", "HelveticaNeueLTStd-LtEx", "DFHeiStd-W7", sans-serif;
		font-size: 13px;
		color: white;
		padding: 0 5%;
	font-family: 'HelveticaNeue-Extended', Helvetica, arial, 'microsoft jhenghei', sans-serif;
	}
	.su-botanicoil_logo{
		width: 50%;
		margin: 0 auto 5%;
	}
	.su-form  .su-form-container .su-form-txt{
		position: relative;
		display: inline-block;
		font-family:  "Helvetica Neue LT W05_43 Lt Ex", "HelveticaNeueLTStd-LtEx", "DFHeiStd-W7", sans-serif;
		font-size: 28px;
		color: black;
		text-align: center;
		margin: 0;
		margin-bottom: 5%;
		padding: 0;
	font-family: 'HelveticaNeue-Extended', Helvetica, arial, 'microsoft jhenghei', sans-serif;
	}
	.su-form  .su-form-container .su-form-txt::after{
		position: absolute;
		display: block;
		content: "";
		left: 105%;
		top: 0;
		width: 75px;
		height: 75px;
		background: url(../img/common/free-sample.png) no-repeat center;
		background-size: contain;
	}
	.su-form  .su-form-container .iframe__form{
		width: 95%;
		max-height: 2000px !important;
	}

	@media screen and (max-width: 1280px) {
		.su-form  .su-form-container .su-form-txt{
			font-size: 2.188vw;
		}
	}
	/**/
	.su-body .su-scene-result .su-artist-tips {
		position: relative;
		margin: 80px 0 0 0;
		padding: 0 30px;
		background-color: #000;
		font-size: 12px;
	}
	.su-body .su-scene-result .su-artist-tips .su-container {
		position: relative;
		margin: 0 auto;
		padding: 45px 0 80px 0;
		max-width: 1024px;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips-image {
		top: -128px;
		right: -64px;
		width: 256px;
		height: 256px;
	}
	.su-body .su-scene-result .su-artist-tips h2 {
		font-size: 18px;
		line-height: 1.5;
	}
	.su-body .su-scene-result .su-artist-tips h2 br {
		display: none;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director {
		margin: 25px 0 0 0;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-in {
		display: table;
		width: 352px;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-portrait {
		display: table-cell;
		vertical-align: top;
		width: 64px;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-portrait span {
		width: 64px;
		height: 64px;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-name {
		display: table-cell;
		vertical-align: top;
		padding: 0 0 0 30px;
		line-height: 1.3;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-name h4 {
		float: left;
		margin: 8px 0 0 0;
		font-size: 18px;
	}
	.su-body .su-scene-result .su-artist-tips .su-artistic-director .su-name .su-sign {
		float: right;
		margin: 10px 0 0 0;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips-swiper-pager {
		display: none;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list ul li {
		padding: 0 15px;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-lead {
		line-height: 1.6;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item {
		margin: 25px 0 0 0;
		padding: 15px;
		background-color: #fff;
		color: #000;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-row {
		display: table;
		width: 100%;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-image {
		display: table-cell;
		vertical-align: top;
		width: 75px;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-image span {
		width: 75px;
		height: 110px;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-detail {
		display: table-cell;
		vertical-align: top;
		padding: 5px 0 0 15px;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-detail .su-jpy {
		margin: 10px 0 0 0;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list .su-item .su-detail .su-btn {
		margin: 20px 0 0 0;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list-pc {
		margin: 25px 0 0 0;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list-pc ul {
		display: flex;
		margin: 0 -15px;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list-pc ul li {
		flex-shrink: 0;
		flex-basis: 33.333%;
		max-width: 33.333%;
	}
	.su-body .su-scene-result .su-artist-tips .su-tips .su-list-sp {
		overflow: hidden;
		height: 0;
	}
	/**/
	.su-body .su-scene-result .su-ctr-scene-retry {
		margin: 80px 0 0 0;
	}
	.su-body .su-scene-result .su-ctr-scene-retry .su-btn {
		margin: 0 auto;
		width: 320px;
		height: 60px;
		font-size: 18px;
	}
	.su-body .su-scene-result .su-ctr-scene-retry .su-btn i {
		display: block;
		position: absolute;
		top: 50%;
		left: 30px;
		margin-top: -11px;
		font-size: 22px;
		line-height: 1;
	}
	.su-body .su-scene-result .su-ctr-scene-prev {
		padding-top: 0 !important;
	}
	/**/
	.su-body .su-scene-result .su-banner-faceshaper {
		margin: 50px 0 0 0;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-outer {
		margin: 0 auto;
		width: 512px;
	}
	.su-body .su-scene-result .su-banner-faceshaper a {
		position: relative;
		display: block;
		padding-top: 200px;
		height: 0;
		background-color: transparent;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-image: url(../img/common/banner-faceshaper-pc.jpg);
		background-size: cover;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-inner {
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		padding: 0 30px;
		width: 100%;
		height: 100%;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-inner h2 span {
		display: block;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-inner h2 span:first-child {
		font-size: 12px;
		line-height: 1.5;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-inner h2 span:last-child {
		overflow: hidden;
		margin: 5px 0 28px -2px;
		width: 260px;
		height: 32px;
		background-color: transparent;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-image: url(../img/common/logo-faceshaper.svg);
		background-size: contain;
		text-indent: -999em;
	}
	.su-body .su-scene-result .su-banner-faceshaper .su-inner .su-btn {
		width: 222px;
	}
}

/* .su-body .su-scene-result .su-product .su-detail .su-cream, */
/* .su-body .su-scene-result .su-product .su-detail .su-matte, */
/* .su-body .su-scene-result .su-product .su-detail .su-glow, */
.su-body .su-scene-result .su-product .su-detail .su-select-hide {
	display: none;
}
.su-select-cream .su-body .su-scene-result .su-product .su-detail .su-cream,
.su-select-matte .su-body .su-scene-result .su-product .su-detail .su-matte,
.su-select-glow .su-body .su-scene-result .su-product .su-detail .su-glow {
	display: block;
}
.su-body .su-scene-result.su-none-foundation .su-foundation {
	display: none !important;
}
.su-form  .su-sample-na {
	display: none;
}
.su-body .su-scene-result.su-none-sample .su-form .su-sample-na {
	display: block;
}
.su-body .su-scene-result.su-none-sample .su-form .su-sample-a {
	display: none;
}

/*------------------------------
	ANIMATION
*/
.su-body .su-scene-result {
	opacity: 0;
	transition: opacity 0.5s linear;
}
.su-body .su-scene-result.su-anim-in {
	opacity: 1;
}
.su-body .su-scene-result.su-anim-out {
	transition: opacity 0.3s linear;
	opacity: 0;
}

/*------------------------------
	HOVER
*/
@media screen and (min-width: 60.0625em) {
	.su-none-touch-device .su-body .su-scene-result .su-banner-faceshaper a:hover .su-inner .su-btn {
		background-color: #fff;
		border-color: #000;
		color: #000;
	}
}

/*============================================================
	X. DEPTH
*/
.su-body .su-base-result {
	z-index: 2;
}
.su-body .su-loading {
	z-index: 30;
}
.su-body .su-safewall {
	z-index: 32;
}


@media screen and (min-width:20em) {
	
}
/* TB S */
@media screen and (min-width:30.0625em) {
	
}
/* TB */
@media screen and (min-width:46.9375em) {
	
}
/* PC S */
@media screen and (min-width:60.0625em) {
	
}
/* PC */
@media screen and (min-width:79.0625em) {
	
}
/* PC L */
@media screen and (min-width:100em) {
	
}
/* PC XL */
@media screen and (min-width:120.0625em) {
	
}



.debug {
	overflow: hidden;
	position: fixed;
	top: 5px;
	right: 5px;
	z-index: 99990;
	width: 100px;
	height: 100px;
	background: #fff;
	display: none;
}
.debug .p {
	position: absolute;
	z-index: 99999;
	top: 0;
	left: 0;
	margin: 49px 0 0 49px;
	width: 2px;
	height: 2px;
	background: #000;
}
.debug i {
	display: block;
	position: absolute;
}
.debug span {
	position: absolute;
	z-index: 99995;
	display: block;
	background: #fff;
	opacity: 0.5;
}
.debug span.line-x01 {
	top: 0;
	left: 33.333%;
	width: 1px;
	height: 100%;
}
.debug span.line-x02 {
	top: 0;
	left: 66.666%;
	width: 1px;
	height: 100%;
}
.debug span.line-y01 {
	top: 33.333%;
	left: 0;
	width: 100%;
	height: 1px;
}
.debug span.line-y02 {
	top: 66.666%;
	left: 0;
	width: 100%;
	height: 1px;
}