@charset "utf-8";
/* CSS Document */

/*reset.css*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*common*/
:root {
	--gold1:#cab263;
	--gold2:#9d8e5b;
	--main-font:"Noto Sans JP", sans-serif;
	--en-font:"Jost", sans-serif;
	--hover-transform:all .3s ease-in-out;
	--show-anime: opacity .5s, translate 1s;
}
body{
	background:#fbfbfb;
	/*background:#e5e7e6;*/
	font-family:var(--main-font);
}
.btn{
	background:#ccc;
}
.cont{
	background:#f9f9f9;
	display:none;
	width:100%;

}

/*temporary
.rcont{
	display:block;
}*/

.show{
	display:block;
}
.footer{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:calc(3000vw/375);
	color:#8f876d;
	text-align:center;
	font-size:calc(1000vw/375);
	line-height:calc(3000vw/375);
}

/*startpage*/
.startpage{
	height:100vh;
	background:#e5e7e6 url("../img/bg_startpage.jpg") left top repeat-x;
	background-size:100% 100%;
	text-align:center;
}
.startpage .header img{
	width:calc(7800vw/375);
	margin:calc(5000vw/375) auto calc(4800vw/375);
}
.startpage h1 img{
	display:block;
	width:calc(24500vw/375);
	margin:0 auto;
}
.startpage_bulk{
	width:calc(23500vw/375);
	margin:calc(2800vw/375) auto calc(3000vw/375);
}
.startpage .btn{
	position:relative;
	width:calc(31500vw/375);
	background:#fff;
	margin:0 auto;
	padding:calc(1400vw/375) 0;
	text-align:center;
	border-radius:calc(500vw/375);
	box-shadow: 0px 0px calc(1200vw/375) 0px rgba(0, 0, 0, 0.078);
}
.startpage .btn:after{
	content:"";
	position:absolute;
	top:calc(2200vw/375);
	right:calc(2800vw/375);
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: calc(500vw/375) solid transparent;
	border-bottom: calc(500vw/375) solid transparent;
	border-left: calc(1300vw/375) solid #cab263;
	border-right: 0;
}
.startpage .btn img{
	display:block;
	width:calc(9900vw/375);
	margin:0 auto;}

/*question pages*/
.qcont .header,
.rcont .header{
	height:calc(9000vw/375);
	background:#fff;
}
.qcont .header img,
.rcont .header img{
	display:block;
	width:calc(4800vw/375);
	margin:0 auto;
	padding-top:calc(2200vw/375);
}
.qcont .question{
	margin-top:calc(4400vw/375);
	text-align:center;
}
.question_num{
	display:inline-block;
	margin-bottom:calc(1000vw/375);
	padding:calc(300vw/375) calc(700vw/375);
	background:var(--gold1);
	border-radius:calc(300vw/375);
	color:#fff;
	font-size:calc(2000vw/375);
	font-family: "Jost", sans-serif;
}
.question_text{
	color:var(--gold1);
	margin-bottom:calc(2000vw/375);
	font-size:calc(1700vw/375);
}
#btn1,#btn2,#btn217,#btn261{
	height:calc(21000vw/375);
}
#btn1 img{
	width:calc(15950vw/375);
	height:calc(15050vw/375);
	padding-top:calc(1700vw/375);
	padding-left:calc(6200vw/375);	
}
#btn2 img{
	width:calc(17450vw/375);
	height:calc(15450vw/375);
	padding-top:calc(1100vw/375);
	padding-left:calc(4500vw/375);
}
#btn217 img{
	width:calc(22300vw/375);
	height:calc(14800vw/375);
	padding-top:calc(1200vw/375);
	padding-left:calc(1900vw/375);
}
#btn261 img{
	width:calc(23000vw/375);
	height:calc(16250vw/375);
	padding-top:calc(800vw/375);
	padding-left:calc(1700vw/375);
}
.qcont .btn{
	box-sizing: border-box;
	display:flex;
	align-items:center;
	width:calc(33500vw/375);
	border-radius:calc(500vw/375);
	margin:0 auto calc(800vw/375);
	padding:calc(1500vw/375);
	background:#fff;
	color:var(--gold1);
	font-size:calc(1400vw/375);
	box-shadow: 0px 0px calc(1400vw/375) 0px rgba(0, 0, 0, 0.06);
}
.option_num{
	width:calc(3000vw/375);
	font-family: "Jost", sans-serif;
	font-size:calc(2000vw/375);
	line-height:calc(2500vw/375);
}
.qcont1 .btn,.qcont2 .btn{
	align-items:flex-start;
}
.qcont1 .option_num,.qcont2 .option_num{
	margin-top: calc(-300vw/375);
}
.option_text{
	font-size:calc(1600vw/375);
	line-height:1.0;
}

/*result page hero*/
.hero{
	padding-top:calc(6000vw/375);
	text-align:center;
}
.circle{
	width:calc(24100vw/375);
	height:calc(24100vw/375);
	background:#fff;
	border-radius:50%;
	margin:0 auto;
}
.cha_recommended{
	padding:calc(4200vw/375) 0 calc(1200vw/375);
	font-size:calc(1500vw/375);
}
.cha_colorname{
	font-family: "Jost", sans-serif;
	font-size:calc(3300vw/375);
	letter-spacing:0.2em;
}
.text_feature{
	position:absolute;
	bottom:calc(11000vw/375);
	left:0;
	right:0;
	margin:0 auto;
	font-size:calc(1800vw/375);
	line-height:calc(2600vw/375);
	letter-spacing:0.1em;
	z-index:500;
}
.icons_feature{
	display:flex;
	justify-content:center;
	gap:calc(400vw/375);
	padding:calc(9600vw/375) 0 calc(6700vw/375);
}
.icons_feature .icon{
	display:block;
	width:calc(9000vw/375);
	padding:calc(400vw/375) 0 calc(400vw/375) calc(500vw/375);
	border-radius:calc(500vw/375);
	color:#fff;
	letter-spacing:0.2em;
	font-size:calc(1400vw/375);
}
.illust_prouduct{
	position:absolute;
	width:calc(6900vw/375);
	right:calc(5500vw/375);
	bottom:calc(16400vw/375);
	z-index:400;
}
.text_kome{
	position:absolute;
	right:calc(1000vw/375);
	bottom:calc(1000vw/375);
	color:#666;
	font-size:calc(1000vw/375);
}


/*result page product*/
.product_nm{
	width:calc(26500vw/375);
	margin-left:calc(3300vw/375);
	padding-top:calc(42500vw/375);
}
.product_num{
	position:relative;
}
.product_nm .product_num:before{
	content:"";
	display:block;
	position:absolute;
	background:var(--gold2);
	opacity:0.5;
	width:calc(2000vw/375);
	height:1px;
	top:calc(-26600vw/375);
	left:calc(1400vw/375);
}
.product_nm .product_num:after{
	content:"";
	display:block;
	position:absolute;
	background:var(--gold2);
	opacity:0.5;
	width:1px;
	height:calc(26600vw/375);;
	top:calc(-26600vw/375);;
	left:calc(1400vw/375);
}
.product_uv .product_num:before{
	content:"";
	display:block;
	position:absolute;
	background:var(--gold2);
	opacity:0.5;
	width:calc(4200vw/375);
	height:1px;
	top:calc(-38000vw/375);
	right:calc(1400vw/375);
}
.product_uv .product_num:after{
	content:"";
	display:block;
	position:absolute;
	background:var(--gold2);
	opacity:0.5;
	width:calc(100vw/375);
	height:calc(38000vw/375);;
	top:calc(-38000vw/375);;
	right:calc(1400vw/375);
}
.product_name{
	margin:0 0 calc(1600vw/375);
	padding-top:calc(500vw/375);
	line-height: 1.3;
	color:var(--gold2);
	font-size:calc(1600vw/375);
	font-weight:600;
}
.product_name span{
	margin-left:calc(-600vw/375);
	font-size:calc(1400vw/375);
	font-weight:400;
}
.product_desc{
	margin-bottom:calc(1200vw/375);
	color:#666;
	font-size:calc(1200vw/375);
	line-height:1.5;
}
.product_price{
	margin-bottom:calc(700vw/375);
	color:#666;
	font-size:calc(1200vw/375);
	font-weight:600;
}
.product_info{
	margin-bottom:calc(2000vw/375);
	display:flex;
	color:#666;
	font-size:calc(1200vw/375);
	font-weight:600;
}
.product_info span{
	display:block;
}
.product_info span:not(:last-child):after{
	content:"/";
	margin:0 calc(500vw/375);
}
.product_linkbtn a{
	position:relative;
	box-sizing:border-box;
	display:block;
	width:calc(17600vw/375);
	line-height:1.0;
	background:#fff;
	border:#af9a53 calc(100vw/375) solid;
	border-radius:calc(500vw/375);
	color:#af9a53;
	padding:calc(1000vw/375) calc(1500vw/375);
	text-decoration:none;
	font-size:calc(1450vw/375);
	letter-spacing:0.06em;
}
.product_linkbtn a:hover{
	opacity:0.7;
}
.product_linkbtn a:before{
	content:"";
    position: absolute;
    width: calc(1000vw/375);
    height:calc(100vw/375);
    background-color:#af9a53;
    right:calc(1000vw/375);
    top:calc(1600vw/375);
    rotate: 20deg;	
}
.product_linkbtn a:after{
	content: '';
    position: absolute;
    width:calc(3600vw/375);
    height:calc(100vw/375);
    background-color:#af9a53;
    top: calc(1800vw/375);
    right:calc(1000vw/375);
}
.product_linkbtn a:link,.product_linkbtn a:visitedd{
	color:#af9a53;
	text-decoration:none;
}
.product_uv{
	margin:calc(3300vw/375) calc(3800vw/375) 0 auto;
	width:calc(27000vw/375);
}
.product_uv .product_name{
	text-align:right;
}
.product_uv .product_span{
	text-align:right;
}
.product_uv .product_num{
	margin:0 0 0 auto;
}

.btn_tryagain a{
	position:relative;
	display:block;
	width:calc(31500vw/375);
	background:#fff;
	margin:calc(7000vw/375) auto;
	padding:calc(1675vw/375) 0;
	text-align:center;
	border-radius:calc(500vw/375);
	box-shadow: 0px 0px calc(1200vw/375) 0px rgba(0, 0, 0, 0.1);
	color:var(--gold1);
	text-decoration:none;
	font-size:calc(1800vw/375);
	letter-spacing:0.1em;
}
.btn_tryagain a:after{
	content:"";
	position:absolute;
	top:calc(2200vw/375);
	right:calc(2800vw/375);
	display:block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: calc(500vw/375) solid transparent;
	border-bottom: calc(500vw/375) solid transparent;
	border-left: calc(1300vw/375) solid #cab263;
	border-right: 0;
}
.btn_tryagain a:link,.btn_tryagain a:visited{
	color:var(--gold1);
	text-decoration:none;
}
.kome{
	box-sizing:border-box;
	width:100%;
	padding:0 calc(3000vw/375) calc(1500vw/375);
	color:#666;
	font-size:calc(1000vw/375);
	line-height:1.2;
}

/*result page footer*/
.rcont .footer{
	position:relative;
	height:initial;
	background:#fff;
}
.rcont .footer_links{
	padding:calc(3000vw/375) calc(2000vw/375);
	text-align:left;
	font-size:calc(1400vw/375);
}
.rcont .footer_links li:first-of-type{
	margin-bottom:calc(500vw/375);
}
.rcont .footer_links a{
	display:block;
	padding:calc(500vw/375);
	line-height:1.0;
}
.rcont .footer_links li a:before{
	content:"→";
	margin-right:calc(500vw/375);
	color:var(--gold1);
}
.rcont .footer_links li a,.rcont .footer_links li a:link,.rcont .footer_links li a:visited{
	color:var(--gold1);
	text-decoration:none;
}
.rcont .footer_links li a:hover{
	opacity:0.7;
}
.rcont .copyright{
	height:calc(3200vw/375);
	line-height:calc(3200vw/375);
	background:#bba76e;
	color:#fff;
	font-size:calc(1000vw/375);
}
.pagetop{
	position:absolute;
	right:calc(600vw/375);
	bottom:calc(2200vw/375);
	width:calc(4800vw/375);
	height:calc(4800vw/375);
	border-radius:50%;
	border:var(--gold1) calc(150vw/375) solid;
	background:#fff;
}
.pagetop:before{
	content:"";
	display:block;
	position:absolute;
	top:calc(2200vw/375);
	right:calc(1500vw/375);
	width:calc(1200vw/375);
	height:calc(150vw/375);
	background:var(--gold1);
    rotate: 57deg;
}
.pagetop:after{
	content:"";
	display:block;
	position:absolute;
	top:calc(2200vw/375);
	left:calc(1500vw/375);
	width:calc(1200vw/375);
	height:calc(150vw/375);
	background:var(--gold1);
    rotate: -57deg;
}

/*result page all colors*/
.rcont#pink .hero{position:relative;background:#ffedf2;}
.rcont#pink .cha_recommended,
.rcont#pink .cha_colorname{color:#fe819e;}
.rcont#pink .circle img{width:calc(12500vw/375);margin-top:calc(800vw/375);}
.rcont#pink .text_feature{text-shadow: calc(-200vw/375) 0 rgba(255, 237, 242, 1.0), 0 calc(200vw/375) rgba(255, 237, 242, 1.0), calc(200vw/375) 0 rgba(255, 237, 242, 1.0), 0 calc(-200vw/375) rgba(255, 237, 242, 1.0),
		calc(-200vw/375) calc(-200vw/375) rgba(255, 237, 242, 1.0), calc(200vw/375) calc(-200vw/375) rgba(255, 237, 242, 1.0), calc(-200vw/375) calc(200vw/375) rgba(255, 237, 242, 1.0), calc(200vw/375) calc(200vw/375) rgba(255, 237, 242, 1.0);}
.rcont#pink .icons_feature .icon{background-color:#fe819e;}
/*.rcont#pink .illust_prouduct{position:absolute;width:calc(7000vw/375);right:calc(4000vw/375);bottom:calc(9400vw/375);}*/
.rcont#pink .product{background:url(../img/bg_result_pink.jpg) no-repeat left top;background-size:cover;}

.rcont#orange .hero{position:relative;background:#ffe7db;}
.rcont#orange .cha_recommended,
.rcont#orange .cha_colorname{color:#ff926a;}
.rcont#orange .circle img{width:calc(8600vw/375);margin-top:calc(1800vw/375);}
.rcont#orange .text_feature{text-shadow: calc(-200vw/375) 0 rgba(255, 231, 219, 1.0), 0 calc(200vw/375) rgba(255, 231, 219, 1.0), calc(200vw/375) 0 rgba(255, 231, 219, 1.0), 0 calc(-200vw/375) rgba(255, 231, 219, 1.0),
		calc(-200vw/375) calc(-200vw/375) rgba(255, 231, 219, 1.0), calc(200vw/375) calc(-200vw/375) rgba(255, 231, 219, 1.0), calc(-200vw/375) calc(200vw/375) rgba(255, 231, 219, 1.0), calc(200vw/375) calc(200vw/375) rgba(255, 231, 219, 1.0);}
.rcont#orange .icons_feature .icon{background-color:#ff926a;width:calc(10000vw/375);}
.rcont .icons_feature .icon.longtext{letter-spacing:-0.06em;}
/*.rcont#orange .illust_prouduct{position:absolute;width:calc(7000vw/375);right:calc(4000vw/375);bottom:calc(13800vw/375);}*/
.rcont#orange .product{background:url(../img/bg_result_orange.jpg) no-repeat left top;background-size:cover;}

.rcont#blue .hero{position:relative;background:#ecf5fd;}
.rcont#blue .cha_recommended,
.rcont#blue .cha_colorname{color:#83aff0;}
.rcont#blue .circle img{width:calc(8400vw/375);margin-top:calc(2200vw/375);}
.rcont#blue .text_feature{text-shadow: calc(-200vw/375) 0 rgba(236, 245, 253, 1.0), 0 calc(200vw/375) rgba(236, 245, 253, 1.0), calc(200vw/375) 0 rgba(236, 245, 253, 1.0), 0 calc(-200vw/375) rgba(236, 245, 253, 1.0),
		calc(-200vw/375) calc(-200vw/375) rgba(236, 245, 253, 1.0), calc(200vw/375) calc(-200vw/375) rgba(236, 245, 253, 1.0), calc(-200vw/375) calc(200vw/375) rgba(236, 245, 253, 1.0), calc(200vw/375) calc(200vw/375) rgba(236, 245, 253, 1.0);}
.rcont#blue .icons_feature .icon{background-color:#83aff0;width:calc(12000vw/375);}
/*.rcont#blue .illust_prouduct{position:absolute;width:calc(7000vw/375);right:calc(5500vw/375);bottom:calc(13300vw/375);}*/
.rcont#blue .product{background:url(../img/bg_result_blue.jpg) no-repeat left top;background-size:cover;}

.rcont#green .hero{position:relative;background:#f0fae5;}
.rcont#green .cha_recommended,
.rcont#green .cha_colorname{color:#8dda8a;}
.rcont#green .circle img{width:calc(8400vw/375);margin-top:calc(800vw/375);}
.rcont#green .text_feature{text-shadow: calc(-200vw/375) 0 rgba(240, 250, 229, 1.0), 0 calc(200vw/375) rgba(240, 250, 229, 1.0), calc(200vw/375) 0 rgba(240, 250, 229, 1.0), 0 calc(-200vw/375) rgba(240, 250, 229, 1.0),
		calc(-200vw/375) calc(-200vw/375) rgba(240, 250, 229, 1.0), calc(200vw/375) calc(-200vw/375) rgba(240, 250, 229, 1.0), calc(-200vw/375) calc(200vw/375) rgba(240, 250, 229, 1.0), calc(200vw/375) calc(200vw/375) rgba(240, 250, 229, 1.0);}
.rcont#green .icons_feature .icon{background-color:#8dda8a;}
/*.rcont#green .illust_prouduct{position:absolute;width:calc(7000vw/375);right:calc(4000vw/375);bottom:calc(9400vw/375);}*/
.rcont#green .product{background:url(../img/bg_result_green.jpg) no-repeat left top;background-size:cover;}

.rcont#yellow .hero{position:relative;background:#fff8d9;}
.rcont#yellow .cha_recommended,
.rcont#yellow .cha_colorname{color:#ffcd00;}
.rcont#yellow .circle img{width:calc(7400vw/375);margin-top:calc(1800vw/375);}
.rcont#yellow .text_feature{text-shadow: calc(-200vw/375) 0 rgba(255, 248, 217, 1.0), 0 calc(200vw/375) rgba(255, 248, 217, 1.0), calc(200vw/375) 0 rgba(255, 248, 217, 1.0), 0 calc(-200vw/375) rgba(255, 248, 217, 1.0),
		calc(-200vw/375) calc(-200vw/375) rgba(255, 248, 217, 1.0), calc(200vw/375) calc(-200vw/375) rgba(255, 248, 217, 1.0), calc(-200vw/375) calc(200vw/375) rgba(255, 248, 217, 1.0), calc(200vw/375) calc(200vw/375) rgba(255, 248, 217, 1.0);}
.rcont#yellow .icons_feature .icon{background-color:#ffcd00;}
/*.rcont#yellow .illust_prouduct{position:absolute;width:calc(7000vw/375);right:calc(4000vw/375);bottom:calc(9400vw/375);}*/
.rcont#yellow .product{background:url(../img/bg_result_yellow.jpg) no-repeat left top;background-size:cover;}

.rcont#lavendar .hero{position:relative;background:#f3eefd;}
.rcont#lavendar .cha_recommended,
.rcont#lavendar .cha_colorname{color:#b5a9f8;letter-spacing:0.14em;}
.rcont#lavendar .circle img{width:calc(8800vw/375);margin-top:calc(2400vw/375);}
.rcont#lavendar .text_feature{text-shadow: calc(-200vw/375) 0 rgba(243, 238, 253, 1.0), 0 calc(200vw/375) rgba(243, 238, 253, 1.0), calc(200vw/375) 0 rgba(243, 238, 253, 1.0), 0 calc(-200vw/375) rgba(243, 238, 253, 1.0),
		calc(-200vw/375) calc(-200vw/375) rgba(243, 238, 253, 1.0), calc(200vw/375) calc(-200vw/375) rgba(243, 238, 253, 1.0), calc(-200vw/375) calc(200vw/375) rgba(243, 238, 253, 1.0), calc(200vw/375) calc(200vw/375) rgba(243, 238, 253, 1.0);}
.rcont#lavendar .icons_feature .icon{background-color:#b5a9f8;}
/*.rcont#lavendar .illust_prouduct{position:absolute;width:calc(7000vw/375);right:calc(4700vw/375);bottom:calc(13600vw/375);}*/
.rcont#lavendar .product{background:url(../img/bg_result_lavendar.jpg) no-repeat left top;background-size:cover;}

.rcont#beige .hero{position:relative;background:#f5efe4;}
.rcont#beige .cha_recommended,
.rcont#beige .cha_colorname{color:#d4c28a;}
.rcont#beige .circle img{width:calc(7300vw/375);margin-top:calc(1600vw/375);}
.rcont#beige .text_feature{text-shadow: calc(-200vw/375) 0 rgba(245, 239, 228, 1.0), 0 calc(200vw/375) rgba(245, 239, 228, 1.0), calc(200vw/375) 0 rgba(245, 239, 228, 1.0), 0 calc(-200vw/375) rgba(245, 239, 228, 1.0),
		calc(-200vw/375) calc(-200vw/375) rgba(245, 239, 228, 1.0), calc(200vw/375) calc(-200vw/375) rgba(245, 239, 228, 1.0), calc(-200vw/375) calc(200vw/375) rgba(245, 239, 228, 1.0), calc(200vw/375) calc(200vw/375) rgba(245, 239, 228, 1.0);}
.rcont#beige .icons_feature .icon{background-color:#d4c28a;}
/*.rcont#beige .illust_prouduct{position:absolute;width:calc(7000vw/375);right:calc(4000vw/375);bottom:calc(9400vw/375);}*/
.rcont#beige .product{background:url(../img/bg_result_beige.jpg) no-repeat left top;background-size:cover;}

/* analyzing... */
#analyzing{
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
}
#analyzing span{
	display:block;
	width:100%;
	height:15px;
	position:absolute;
	top:0;bottom:0;left:0;right:0;
	margin:auto;
	color:var(--gold1);
	text-align:center;
	font-size:calc(1500vw/375);
	font-weight:600;
	letter-spacing:0.1em;
}
.hide{
	display:none!important;
}

@media screen and (min-width:480px) {
	
	/* common */
	.footer{
		height:calc(30px/375*480);
		font-size:calc(10px/375*480);
		line-height:calc(30px/375*480);
	}
	
	/*startpage*/
	.cont{
		position:absolute;
		top:0;bottom:0;right:0;left:0;
		width:480px;
		height:854px;
		margin:auto;
		overflow:hidden;
		box-shadow: 0px 0px calc(20px / 375 * 480) 0px rgba(0, 0, 0, 0.1);
	}
	.startpage .header img{
		width:calc(78px/375*480);
		margin:calc(50px/375*480) auto calc(48px/375*480);
	}
	.startpage h1 img{
		width:calc(245px/375*480);
	}
	.startpage_bulk{
		width:calc(235px/375*480);
		margin:calc(28px/375*480) auto calc(30px/375*480);
	}
	.startpage .btn{
		position:relative;
		width:calc(315px/375*480);
		padding:calc(14px/375*480) 0;
		border-radius:calc(5px/375*480);
		box-shadow: 0px 0px calc(12px/375*480) 0px rgba(0, 0, 0, 0.078);
	}
	.startpage .btn:after{
		top:calc(22px/375*480);
		right:calc(28px/375*480);
		border-style: solid;
		border-top: calc(5px/375*480) solid transparent;
		border-bottom: calc(5px/375*480) solid transparent;
		border-left: calc(13px/375*480) solid #cab263;
		border-right: 0;
	}
	.startpage .btn img{
		display:block;
		width:calc(99px/375*480);
		margin:0 auto;
	}
	
	/*question pages*/
	.qcont .header,
	.rcont .header{
		height:calc(90px/375*480);
	}
	.qcont .header img,
	.rcont .header img{
		width:calc(48px/375*480);
		padding-top:calc(22px/375*480);
	}
	.qcont .question{
		margin-top:calc(44px/375*480);
	}
	.question_num{
		margin-bottom:calc(10px/375*480);
		padding:calc(3px/375*480) calc(7px/375*480);
		border-radius:calc(3px/375*480);
		font-size:calc(20px/375*480);
	}
	.question_text{
		margin-bottom:calc(20px/375*480);
		font-size:calc(17px/375*480);
	}
	#btn1,#btn2,#btn217,#btn261{
		height:calc(210px/375*480);
	}
	#btn1 img{
		width:calc(159.5px/375*480);
		height:calc(150.5px/375*480);
		padding-top:calc(17px/375*480);
		padding-left:calc(53px/375*480);		
	}
	#btn2 img{
		width:calc(174.5px/375*480);
		height:calc(154.5px/375*480);
		padding-top:calc(11px/375*480);
		padding-left:calc(30px/375*480);
	}
	#btn217 img{
		width:calc(223px/375*480);
		height:calc(148px/375*480);
		padding-top:calc(12px/375*480);
		padding-left:calc(2px/375*480);
	}
	#btn261 img{
		width:calc(230px/375*480);
		height:calc(162.5px/375*480);
		padding-top:calc(8px/375*480);
		padding-left:calc(0px/375*480);
	}
	.qcont .btn{
		width:calc(315px/375*480);
		border-radius:calc(5px/375*480);
		margin:0 auto calc(8px/375*480);
		padding:calc(15px/375*480);
		font-size:calc(14px/375*480);
		box-shadow: 0px 0px calc(14px/375*480) 0px rgba(0, 0, 0, 0.06);
	}
	.option_num{
		width:calc(30px/375*480);
		font-size:calc(20px/375*480);
		line-height:calc(25px/375*480);
	}
	.qcont1 .option_num,.qcont2 .option_num{
		margin-top: calc(-3px/375*480);
	}
	.option_text{
		font-size:calc(16px/375*480);
	}

	/*result page hero*/
	.hero{
		padding-top:calc(60px/375*480);
	}
	.circle{
		width:calc(241px/375*480);
		height:calc(241px/375*480);
	}
	.cha_recommended{
		padding:calc(42px/375*480) 0 calc(12px/375*480);
		font-size:calc(15px/375*480);
	}
	.cha_colorname{
		font-size:calc(33px/375*480);
	}
	.text_feature{
		bottom:calc(110px/375*480);
		font-size:calc(18px/375*480);
		line-height:calc(26px/375*480);
	}
	.icons_feature{
		gap:calc(4px/375*480);
		padding:calc(96px/375*480) 0 calc(67px/375*480);
	}
	.icons_feature .icon{
		width:calc(90px/375*480);
		padding:calc(4px/375*480) 0 calc(4px/375*480) 5px;
		border-radius:calc(5px/375*480);
		font-size:calc(14px/375*480);
	}
	.illust_prouduct{width:calc(69px/375*480);right:calc(55px/375*480);bottom:calc(164px/375*480);}
	/*.illust_prouduct{
		width:calc(70px/375*480);
		right:calc(40px/375*480);
		bottom:calc(94px/375*480);
	}*/
	.text_kome{
		right:calc(10px/375*480);
		bottom:calc(10px/375*480);
		font-size:calc(10px/375*480);
	}

	/*result page product*/
	.cont.rcont{
		height:initial;
		overflow-y:scroll;
	}
	.product_nm{
		width:calc(265px/375*480);
		margin-left:calc(33px/375*480);
		padding-top:calc(425px/375*480);
	}
	.product_nm .product_num:before{
		width:calc(20px/375*480);
		height:1px;
		top:calc(-266px/375*480);
		left:calc(14px/375*480);
	}
	.product_nm .product_num:after{
		width:1px;
		height:calc(266px/375*480);
		top:calc(-266px/375*480);
		left:calc(14px/375*480);
	}
	.product_uv .product_num:before{
		width:calc(36px/375*480);
		height:1px;
		top:calc(-380px/375*480);
		right:calc(14px/375*480);
	}
	.product_uv .product_num:after{
		width:1px;
		height:calc(380px/375*480);
		top:calc(-380px/375*480);;
		right:calc(14px/375*480);
	}
	.product_name{
		margin:0 0 calc(16px/375*480);
		padding-top:calc(5px/375*480);
		font-size:calc(16px/375*480);
	}
	.product_name span{
		margin-left:calc(-6px/375*480);
		font-size:calc(14px/375*480);
	}
	.product_desc{
		margin-bottom:calc(12px/375*480);
		font-size:calc(12px/375*480);
	}
	.product_price{
		margin-bottom:calc(7px/375*480);
		font-size:calc(12px/375*480);
	}
	.product_info{
		margin-bottom:calc(20px/375*480);
		font-size:calc(12px/375*480);
	}
	.product_info span:not(:last-child):after{
		margin:0 calc(5px/375*480);
	}
	.product_linkbtn a{
		width:calc(200px/375*480);
		border:#af9a53 1px solid;
		border-radius:calc(5px/375*480);
		padding:calc(10px/375*480) calc(15px/375*480);
		font-size:calc(15px/375*480);
	}
	.product_linkbtn a:before{
		width: calc(10px/375*480);
		height:calc(1px/375*480);
		right:calc(20px/375*480);
		top:calc(16px/375*480);
	}
	.product_linkbtn a:after{
		width:calc(36px/375*480);
		height:calc(1px/375*480);
		top: calc(18px/375*480);
		right:calc(20px/375*480);
	}
	.product_uv{
		margin:calc(33px/375*480) calc(33px/375*480) 0 auto;
		width:calc(270px/375*480);
	}
	.btn_tryagain a{
		width:calc(315px/375*480);
		margin:calc(70px/375*480) auto;
		padding:calc(16.75px/375*480) 0;
		border-radius:calc(5px/375*480);
		box-shadow: 0px 0px calc(12px/375*480) 0px rgba(0, 0, 0, 0.1);
		font-size:calc(18px/375*480);
	}
	.btn_tryagain a:after{
		top:calc(22px/375*480);
		right:calc(28px/375*480);
		border-top: calc(5px/375*480) solid transparent;
		border-bottom: calc(5px/375*480) solid transparent;
		border-left: calc(13px/375*480) solid #cab263;
	}
	.kome{
		padding:0 calc(30px/375*480) calc(15px/375*480);
		font-size:calc(10px/375*480);
	}

	/*result page footer*/
	.rcont .footer_links{
		padding:calc(30px/375*480) calc(20px/375*480);
		font-size:calc(14px/375*480);
	}
	.rcont .footer_links li:first-of-type{
		margin-bottom:calc(5px/375*480);
	}
	.rcont .footer_links a{
		padding:calc(5px/375*480);
	}
	.rcont .footer_links li a:before{
		margin-right:calc(5px/375*480);
	}
	.rcont .copyright{
		height:calc(32px/375*480);
		line-height:calc(32px/375*480);
		font-size:calc(10px/375*480);
	}
	.pagetop{
		right:calc(6px/375*480);
		bottom:calc(22px/375*480);
		width:calc(48px/375*480);
		height:calc(48px/375*480);
		border:var(--gold1) calc(1.5px/375*480) solid;
		background:#fff;
	}
	.pagetop:before{
		top:calc(22px/375*480);
		right:calc(15px/375*480);
		width:calc(12px/375*480);
		height:calc(1.5px/375*480);
	}
	.pagetop:after{
		top:calc(22px/375*480);
		left:calc(15px/375*480);
		width:calc(12px/375*480);
		height:calc(1.5px/375*480);
	}
	/*result page all colors*/
	.rcont#pink .circle img{width:calc(125px/375*480);margin-top:calc(8px/375*480);}
	.rcont#pink .text_feature{text-shadow: calc(-2px/375*480) 0 rgba(255, 237, 242, 1.0), 0 2px rgba(255, 237, 242, 1.0), 2px 0 rgba(255, 237, 242, 1.0), 0 calc(-2px/375*480) rgba(255, 237, 242, 1.0),calc(-2px/375*480) calc(-2px/375*480) rgba(255, 237, 242, 1.0), 2px calc(-2px/375*480) rgba(255, 237, 242, 1.0), calc(-2px/375*480) 2px rgba(255, 237, 242, 1.0), 2px 2px rgba(255, 237, 242, 1.0);}
	.rcont#pink .product{background-image:url(../img/bg_result_pink_pc.jpg);}

	.rcont#orange .circle img{width:calc(86px/375*480);margin-top:calc(18px/375*480);}
	.rcont#orange .text_feature{text-shadow: calc(-2px/375*480) 0 rgba(255, 231, 219, 1.0), 0 2px rgba(255, 231, 219, 1.0), 2px 0 rgba(255, 231, 219, 1.0), 0 calc(-2px/375*480) rgba(255, 231, 219, 1.0),calc(-2px/375*480) calc(-2px/375*480) rgba(255, 231, 219, 1.0), 2px calc(-2px/375*480) rgba(255, 231, 219, 1.0), calc(-2px/375*480) 2px rgba(255, 231, 219, 1.0), 2px 2px rgba(255, 231, 219, 1.0);}
	.rcont#orange .icons_feature .icon{width:calc(100px/375*480);}
	.rcont#orange .product{background-image:url(../img/bg_result_orange_pc.jpg);}

	.rcont#blue .circle img{width:calc(84px/375*480);margin-top:calc(22px/375*480);}
	.rcont#blue .text_feature{text-shadow: calc(-2px/375*480) 0 rgba(236, 245, 253, 1.0), 0 2px rgba(236, 245, 253, 1.0), 2px 0 rgba(236, 245, 253, 1.0), 0 calc(-2px/375*480) rgba(236, 245, 253, 1.0),calc(-2px/375*480) calc(-2px/375*480) rgba(236, 245, 253, 1.0), 2px calc(-2px/375*480) rgba(236, 245, 253, 1.0), calc(-2px/375*480) 2px rgba(236, 245, 253, 1.0), 2px 2px rgba(236, 245, 253, 1.0);}
	.rcont#blue .icons_feature .icon{width:calc(120px/375*480);}
	.rcont#blue .product{background-image:url(../img/bg_result_blue_pc.jpg);}

	.rcont#green .circle img{width:calc(84px/375*480);margin-top:calc(8px/375*480);}
	.rcont#green .text_feature{text-shadow: calc(-2px/375*480) 0 rgba(240, 250, 229, 1.0), 0 2px rgba(240, 250, 229, 1.0), 2px 0 rgba(240, 250, 229, 1.0), 0 calc(-2px/375*480) rgba(240, 250, 229, 1.0),calc(-2px/375*480) calc(-2px/375*480) rgba(240, 250, 229, 1.0), 2px calc(-2px/375*480) rgba(240, 250, 229, 1.0), calc(-2px/375*480) 2px rgba(240, 250, 229, 1.0), 2px 2px rgba(240, 250, 229, 1.0);}
	.rcont#green .product{background-image:url(../img/bg_result_green_pc.jpg);}

	.rcont#yellow .circle img{width:calc(74px/375*480);margin-top:calc(18px/375*480);}
	.rcont#yellow .text_feature{text-shadow: calc(-2px/375*480) 0 rgba(255, 248, 217, 1.0), 0 2px rgba(255, 248, 217, 1.0), 2px 0 rgba(255, 248, 217, 1.0), 0 calc(-2px/375*480) rgba(255, 248, 217, 1.0),calc(-2px/375*480) calc(-2px/375*480) rgba(255, 248, 217, 1.0), 2px calc(-2px/375*480) rgba(255, 248, 217, 1.0), calc(-2px/375*480) 2px rgba(255, 248, 217, 1.0), 2px 2px rgba(255, 248, 217, 1.0);}
	.rcont#yellow .product{background-image:url(../img/bg_result_yellow_pc.jpg);}

	.rcont#lavendar .circle img{width:calc(88px/375*480);margin-top:calc(24px/375*480);}
	.rcont#lavendar .text_feature{text-shadow: calc(-2px/375*480) 0 rgba(243, 238, 253, 1.0), 0 2px rgba(243, 238, 253, 1.0), 2px 0 rgba(243, 238, 253, 1.0), 0 calc(-2px/375*480) rgba(243, 238, 253, 1.0),calc(-2px/375*480) calc(-2px/375*480) rgba(243, 238, 253, 1.0), 2px calc(-2px/375*480) rgba(243, 238, 253, 1.0), calc(-2px/375*480) 2px rgba(243, 238, 253, 1.0), 2px 2px rgba(243, 238, 253, 1.0);}
	.rcont#lavendar .product{background-image:url(../img/bg_result_lavendar_pc.jpg);}

	.rcont#beige .circle img{width:calc(73px/375*480);margin-top:calc(16px/375*480);}
	.rcont#beige .text_feature{text-shadow: calc(-2px/375*480) 0 rgba(245, 239, 228, 1.0), 0 2px rgba(245, 239, 228, 1.0), 2px 0 rgba(245, 239, 228, 1.0), 0 calc(-2px/375*480) rgba(245, 239, 228, 1.0),calc(-2px/375*480) calc(-2px/375*480) rgba(245, 239, 228, 1.0), 2px calc(-2px/375*480) rgba(245, 239, 228, 1.0), calc(-2px/375*480) 2px rgba(245, 239, 228, 1.0), 2px 2px rgba(245, 239, 228, 1.0);}
	.rcont#beige .product{background-image:url(../img/bg_result_beige_pc.jpg);}
	
	/* analyzing... */
	#analyzing span{
		height:calc(15px/375*480);
		font-size:calc(15px/375*480);
	}	
}


@media (max-width:820px) and (min-aspect-ratio: 375/667) {
	.cont{
		position:relative;
		box-sizing:border-box;
		aspect-ratio: 375 / 680;
		height:100%;
	}
}
@media (max-width:820px) and (max-aspect-ratio: 375/667) {
	.cont{
		position:relative;
		box-sizing:border-box;
		height:100vh;
	}
}