.themeExtra{
	--highlight-color:#7c6453;
	--theme-color1:#838474;
	--theme-color2:#DDDDD3;
	--theme-color3:#F7F7F7;
	--theme-color4:#aa9a8f;
	font-family: Arial;
	color:var(--theme-color1);
}

.cs::-webkit-scrollbar{
	width:10px;
}
.cs::-webkit-scrollbar-thumb{
	border:2px solid transparent;
	border-radius:10px;
	background-color: var(--theme-color2);
	background-clip: content-box;
}
.cs::-webkit-scrollbar-thumb:hover{
	background-color: var(--highlight-color);
}

.themeExtra a[href]:not(.cta):hover{
	color:currentColor;
}

.cta{
	color:#FFF;
	background: var(--highlight-color);
	line-height: 1em;
	padding:0.8em 2.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background 0.2s;
}
.cta:after{
	content:"";
	display: block;
	width:0.7em;
	height:0.7em;
	border:1px solid;
	border-top:none;
	border-left:none;
	transform: rotate(-45deg);
	margin-left:0.5em;
	transition: transform 0.2s;
}
.cta:hover,
a:hover .cta,
a.cta:hover{
	color:#FFF;
	background: var(--theme-color1);
}
.cta:hover:after,
a:hover .cta:after,
a.cta:hover:after{
	transform: translateX(50%) rotate(-45deg);
}

/******************* slick start ******************/
.aromaSlickPN {
	position: absolute;
	top: 50%;
	width: 80px;
	height: 80px;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 0;
	white-space: nowrap;
	overflow: hidden;
	z-index: 1;
}
.aromaSlickPN.prev {
	left: 0;
	transform: translateY(-50%) scaleX(-1);
}
.aromaSlickPN.next {
	right: 0;
}
.aromaSlickPN:before{
	position: absolute;
	content: "";
	left: 35%;
	top:50%;
	width: 50%;
	height: 50%;
	border:1px solid currentColor;
	border-top:none;
	border-left:none;
	transform: translate(-50%, -50%) rotate(-45deg);
	transition: all 0.2s;
}
.aromaSlickPN:hover:before{
	border-color:var(--highlight-color);
	transform: translate(-25%, -50%) rotate(-45deg);
}

.themeExtra .slick-dots{
	bottom:-14%;
	pointer-events:none;
}
.themeExtra .slick-dots li {
	width: 10px;
	height: 10px;
	margin:0 0.6em;
	opacity: 0.25;
	transition: all 0.2s;
	pointer-events:auto;
}
.themeExtra .slick-dots li:hover,
.themeExtra .slick-dots li.slick-active{
	opacity: 1;
}
.themeExtra .slick-dots li button {
	padding:0;
	color:currentColor;
	background: currentColor;
	box-shadow: none;
}
/******************* slick end ********************/

/************************************** walk start ***************************************/
.walk{
	position: relative;
}

/****************** intro start *********************/
.walk .intro{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	background:url(../images/introBg.jpg) no-repeat center/cover;
	z-index: 1;
	overflow: hidden;
}

.walk .intro hgroup{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top:6.66%;
	color:var(--highlight-color);
}

.walk .intro hgroup h3{
	font-size: 3em;
	letter-spacing: 0.15em;
}

.walk .intro hgroup h3.logo{
	width:3.09em;
}
.walk .intro hgroup h3.logo:before{
	content:"";
	display: block;
	padding-top:38.46%;
	background: url(../images/logo.svg) no-repeat center/contain;
}
.walk .intro hgroup h3.logo span{
	display: none;
}

.walk .intro hgroup h3.title{
	margin-top:0.3em;
}

.walk .intro hgroup:after{
	content:"";
	display: block;
	width:1px;
	height:11.42em;
	background: currentColor;
	margin-top:1.2em;
}
/****************** intro end *********************/

/****************** map start *********************/
.map{
	position: relative;
	background: var(--theme-color2);
	overflow: hidden;
}

.map .svgWrapper{
	position: relative;
	width:40%;
	margin-left:30%;
}

/********* svg start *********/
.map svg .shadow{
	fill:#FFFFFF;
}
.map svg .jp{
	fill:#B4B7A0;
}

.aGroup path{
	fill:var(--theme-color1);
	stroke:#FFFFFF;
	stroke-width:2;
	stroke-miterlimit:10;
	transition: fill 0.2s;
	animation:hint 1s ease-in infinite alternate both;
	cursor: pointer;
	--active-color:#D8CA8F;
}
@keyframes hint{
	to{
		opacity:0.5;
		fill:var(--active-color);
	}
}
.aGroup path:nth-child(1){ animation-delay:0s;}
.aGroup path:nth-child(2){ animation-delay:0.1s;}
.aGroup path:nth-child(3){ animation-delay:0.2s;}
.aGroup path:nth-child(4){ animation-delay:0.3s;}
.aGroup path:nth-child(5){ animation-delay:0.4s;}
.aGroup path:nth-child(6){ animation-delay:0.5s;}
.aGroup path:nth-child(7){ animation-delay:0.6s;}
.aGroup path:nth-child(8){ animation-delay:0.7s;}
.aGroup path:nth-child(9){ animation-delay:0.8s;}
@media screen and (min-width:1024px){
	.aGroup path.active{
		fill:var(--active-color);
		animation:none;
	}
}

.lineGroup path{
	fill:none;
	stroke:var(--highlight-color);
	stroke-width:1.5;
	stroke-miterlimit:10;
	pointer-events: none;
}

.map svg .dot{
	fill:var(--highlight-color);
}
/********* svg end *********/

/********* marker start *********/
.map .marker,
.map .marker li{
	position: absolute;
	left:0;
	top:0;
}
.map .marker{
	width:100%;
	pointer-events: none;
}
.map .marker li{
	width:5.18%;
	transform: translateY(-75%);
	opacity: 0;
	transition: all 0.3s ease-out;
}
.map .marker li.active{
	transform: none;
	opacity: 1;
}
.map .marker li:nth-child(1){ margin:21.11% 0 0 83.33%;}
.map .marker li:nth-child(2){ margin:42.96% 0 0 72.22%;}
.map .marker li:nth-child(3){ margin:82.77% 0 0 51%;}
.map .marker li:nth-child(4){ margin:94.07% 0 0 42.96%;}
.map .marker li:nth-child(5){ margin:96.66% 0 0 39.25%;}
.map .marker li:nth-child(6){ margin:99.44% 0 0 22.96%;}
.map .marker li:nth-child(7){ margin:100% 0 0 30%;}
.map .marker li:nth-child(8){ margin:104.44% 0 0 15.37%;}
.map .marker li:nth-child(9){ margin:113.7% 0 0 7.59%;}
.map .marker li:before{
	content:"";
	display: block;
	padding-top:142.85%;
	background: url(../images/marker.svg) no-repeat center/contain;
	transform: translate(-50%, -100%);
}
/********* marker end *********/

/********* 提示文 start *********/
.hintTxt{
	position: absolute;
	left:0;
	top:0;
	margin:34.8% 0 0 24.5%;
	color:var(--highlight-color);
	font-size: 4vw;
	display: none;
}
/********* 提示文 end *********/

/********* ctWrapper start *********/
.map .ctWrapper{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	pointer-events: none;
}
.map .ctWrapper .ct{
	margin:5.33% 0 0 8%;
	width:25.83%;
	pointer-events: auto;
}

.source,
.source .tabCT{
	display:none;
}
.source.active,
.source .tabCT.active{
	display:block;
}

/**** 頁籤 start ****/
.source .tabWrapper{
	position:relative;
	background:var(--highlight-color);
	border-radius:1.2em;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding-top:18.7%;
}
.source .tab{
	position:absolute;
	left:50%;
	top:0;
	transform:translate(-50%, -40%);
	display:flex;
	align-items: center;
}
.source .tab li{
	width:6em;
	border:0.5em solid #dfcec1;
	border-radius: 50%;
	background:#FFF;
}
.source .tab li:not(.active){
	cursor: pointer;
	animation:hintBorder 0.5s ease-in infinite alternate;
	transform: scale(0.85);
	transition: transform 0.2s;
}
@keyframes hintBorder{
	to{
		border-color:#b49f90;
	}
}
.source .tab li:not(.active):hover{
	transform:none;
}
.source .tab li.active{
	border-color:var(--highlight-color);
	cursor: auto;
	animation:none;
	transform:none;
}
.source .tab li+li{
	margin-left:0.5em;
}
.source .tab li:before{
	content:"";
	display: block;
	padding-top:100%;
	background-image:url(../images/sourceIcon.svg);
	background-repeat:no-repeat;
	background-size:1000%;
	opacity: 0.3;
	transition: opacity 0.2s;
}
.source .tab li.active:before{
	opacity: 1;
}
.source:nth-child(1) .tab li:before{ background-position-x:0%;}
.source:nth-child(2) .tab li:before{ background-position-x:11.11%;}
.source:nth-child(3) .tab li:before{ background-position-x:22.22%;}
.source:nth-child(4) .tab li:before{ background-position-x:33.33%;}
.source:nth-child(5) .tab li:before{ background-position-x:44.44%;}
.source:nth-child(6) .tab li:before{ background-position-x:55.55%;}
.source:nth-child(7) .tab li:nth-child(1):before{ background-position-x:66.66%;}
.source:nth-child(7) .tab li:nth-child(2):before{ background-position-x:77.77%;}
.source:nth-child(8) .tab li:before{ background-position-x:88.88%;}
.source:nth-child(9) .tab li:before{ background-position-x:100%;}
/**** 頁籤 end ****/

/**** 頁籤內容 start ****/
.source .tabCTWrapper{
	background:#FFF;
	border-radius:1.2em;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding-bottom: 1.5em;
}

/** 說明 start **/
.detail{
	padding:1.5em 2em 0;
}
.detail hgroup{
	color:var(--highlight-color);
	border-bottom:2px solid var(--theme-color1);
	padding-bottom:1.2em;
	margin-bottom:1.2em;
	display: flex;
	align-items: center;
}
.detail hgroup h4{
	font-size: 1.4em;
	line-height: 1.2em;
	padding:0.2em 0.5em 0.1em;
	border:3px solid;
	border-top:none;
	border-bottom:none;
	white-space: nowrap;
}
.detail hgroup span{
	font-size: 0.8em;
	line-height: 1.5em;
	margin-left:1em;
}
.detail p{
	color:var(--theme-color4);
	margin:0;
	font-size: 0.9em;
}
.detail *+p{
	margin-top:1em;
	line-height: 1.7em;
}
/** 說明 end **/

/** 推薦 start **/
.recommend{
	position: absolute;
	right:0;
	top:0;
	width:27.5%;
	height:100%;
	background:#e8e8e2;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.recommend h5{
	font-size: 1.15em;
	margin:2.5em auto;
	padding-bottom: 0.35em;
	letter-spacing: 0.1em;
	border-bottom:2px solid;
}
.recommend .slickWrapper{
	width:100%;
	flex-grow:1;
	padding-top:54.54%;
	background-repeat:no-repeat;
	background-position:center top;
	background-size:100%;
}
.source:nth-child(1) .slickWrapper{ background-image:url(../images/source1.jpg);}
.source:nth-child(2) .slickWrapper{ background-image:url(../images/source2.jpg);}
.source:nth-child(3) .slickWrapper{ background-image:url(../images/source3.jpg);}
.source:nth-child(4) .slickWrapper{ background-image:url(../images/source4.jpg);}
.source:nth-child(5) .slickWrapper{ background-image:url(../images/source5.jpg);}
.source:nth-child(6) .slickWrapper{ background-image:url(../images/source6.jpg);}
.source:nth-child(7) .tabCT:nth-child(1) .slickWrapper{ background-image:url(../images/source7_1.jpg);}
.source:nth-child(7) .tabCT:nth-child(2) .slickWrapper{ background-image:url(../images/source7_2.jpg);}
.source:nth-child(8) .slickWrapper{ background-image:url(../images/source8.jpg);}
.source:nth-child(9) .slickWrapper{ background-image:url(../images/source9.jpg);}
.recommend .slickWrapper a{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding:0 7.57%;
	text-align: center;
	font-size: 0.95em;
}
.recommend .slickWrapper a .img{
	display: block;
	width:62.85%;
	border-radius:50%;
	overflow:hidden;
	transform: rotate(0deg); /* 解決 iOS 圓角失效 bug */
}
.recommend .slickWrapper a img{
	display: block;
	width:100%;
	transition: transform 0.5s;
}
.recommend .slickWrapper a:hover img{
	transform:scale(1.1);
}
.recommend .slickWrapper a em{
	font-style: normal;
	margin-top:1.5em;
	line-height: 1.6em;
	transition: color 0.2s;
}
.recommend .slickWrapper a:hover em{
	color:var(--highlight-color);
}
.recommend .slickWrapper a .cta{
	margin-top:1.2em;
}
/** 推薦 end **/
/**** 頁籤內容 end ****/

.map .closeBtn{
	display:none;
}
/********* ctWrapper end *********/
/****************** map end *********************/
/************************************** walk end ***************************************/

/************************************** product start ***************************************/
.product{
	text-align: center;
	background: var(--theme-color3);
	padding-top:2.5%;
	overflow: hidden;
}

.product h4{
	font-size: 2.2em;
	line-height: 1em;
}
.product h4 > *{
	display: block;
}
.product h4 span{
	font-weight: normal;
	font-size: 0.95em;
	letter-spacing: 0.05em;
}
.product h4 em{
	margin-top:0.5em;
	letter-spacing: 0.1em;
	font-style: normal;
}

.product .slickWrapper{
	position:relative;
	margin-top:15%;
	padding-top:30%;
	background: var(--theme-color2);
}
.product .slickWrapper .slick{
	position:absolute;
	left:0;
	right:0;
	top:0;
	margin:-12% auto 0;
	width:80%;
}

.product .aromaSlickPN.prev {
	transform: translate(-100%, 95%) scaleX(-1);
}
.product .aromaSlickPN.next {
	transform: translate(100%, 95%);
}

.product a{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding:0 5%;
}
.product .img{
	border-radius:50%;
	overflow:hidden;
	transform: rotate(0deg); /* 解決 iOS 圓角失效 bug */
}
.product img{
	display: block;
	width:100%;
	transition: transform 0.5s;
}
.product a:hover img{
	transform:scale(1.1);
}
.product a em{
	color:var(--highlight-color);
	font-size: 1.25em;
	font-style: normal;
	margin-top:1.5em;
	line-height: 1em;
}
.product a i{
	font-size: 0.85em;
	font-style: normal;
}
.product a em+i{
	margin-top:1em;
	width:100%;
	height: 1.2em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.product a i+i{
	margin-top:0.5em;
	line-height: 1.8em;
	height:3.5em;
	overflow:hidden;
}
.product .cta{
	margin-top:1.5em;
}
/************************************** product end ***************************************/

/************************************** test start ***************************************/
.test{
	position: relative;
	padding:4.16%;
	background:var(--theme-color2);
	overflow:hidden;
}

/****************** Q start *********************/
.Q{
	background:#FFF;
	padding:2.5% 10.45%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.Q h4{
	position: relative;
	color:#FFF;
	background:#b4b7a0;
	font-size: 2.28em;
	line-height: 1em;
	letter-spacing: 0.075em;
	padding:0.8em 1.6em 0.6em;
}
.Q h4:after{
	position: absolute;
	content:"";
	display: block;
	left:50%;
	top:100%;
	transform: translateX(-50%);
	border:0.6em solid #b4b7a0;
	border-left-color:transparent;
	border-right-color:transparent;
	border-bottom:none;
}

.Q .ctWrapper{
	margin-top:4%;
	width:100%;
	overflow:hidden;
}

.topicWrapper{
	width:300%;
	display: flex;
	transition: transform 0.5s ease-out;
}
.topicWrapper.t1{ transform: translateX(0);}
.topicWrapper.t2{ transform: translateX(-33.333%);}
.topicWrapper.t3{ transform: translateX(-66.666%);}

.topic{
	width:33.333%;
	display:flex;
	flex-direction: column;
	align-items: center;
}

.topic h5{
	font-size: 1.78em;
	color:var(--highlight-color);
}

.topic ul{
	margin-top:3%;
	display: flex;
	justify-content: center;
}
.topic li{
	position: relative;
	width:14.68em;
	aspect-ratio:1/1;
	padding:1.57em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.topic li+li{
	margin-left:1.14em;
}
.topic li:before{
	content:"";
	display: block;
	width:100%;
	padding-top:66.25%;
	background-repeat: no-repeat;
	background-position-y: top;
}

.topic:nth-child(1) li:before{ 
	background-image: url(../images/q1.svg);
	background-size: 300%;
}
.topic:nth-child(1) li:nth-child(1):before{ background-position-x: 0%;}
.topic:nth-child(1) li:nth-child(2):before{ background-position-x: 50%;}
.topic:nth-child(1) li:nth-child(3):before{ background-position-x: 100%;}

.topic:nth-child(2) li:before{ 
	background-image: url(../images/qYN.svg);
	background-size: 200%;
}
.topic:nth-child(2) li:nth-child(1):before{ background-position-x: 0%;}
.topic:nth-child(2) li:nth-child(2):before{ background-position-x: 100%;}

.topic:nth-child(3) li:before{ 
	background-image: url(../images/q3.svg);
	background-size: 400%;
}
.topic:nth-child(3) li:nth-child(1):before{ background-position-x: 0%;}
.topic:nth-child(3) li:nth-child(2):before{ background-position-x: 33.33%;}
.topic:nth-child(3) li:nth-child(3):before{ background-position-x: 66.66%;}
.topic:nth-child(3) li:nth-child(4):before{ background-position-x: 100%;}

.topic h6{
	font-size: 1.2em;
	margin-top:0.95em;
	transition: color 0.2s;
}
.topic span{
	font-size: 12px;
	color: #bebdb4;
	margin-top:0.5em;
	transition: color 0.2s;
}

.topic li:after{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	content:"";
	display: block;
	border:1px solid;
	border-radius: 1.57em;
}

.topic li:hover:before,
.topic li.active:before{
	background-position-y: bottom;
}
.topic li:hover h6,
.topic li.active h6{
	color:var(--highlight-color);
}
.topic li:hover span,
.topic li.active span{
	color: var(--theme-color4);
}
.topic li:hover:after,
.topic li.active:after{
	border:3px solid var(--highlight-color);
}

.step{
	margin-top:2%;
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:var(--highlight-color);
}
.step .bar{
	flex-grow:1;
	background: #efefef;
	aspect-ratio:103.25/1;
	display: flex;
}
.step .bar:before{
	content: "";
	display: block;
	background: currentColor;
	transition: width 0.2s ease-out;
}
.step.t1 .bar:before{ width:33.33%;}
.step.t2 .bar:before{ width:66.66%;}
.step.t3 .bar:before{ width:100%;}
.step span{
	margin-left:0.6em;
	font-size: 1.25em;
}
.step em{
	font-style: normal;
}
.step.t1 em:before{ content:"1";}
.step.t2 em:before{ content:"2";}
.step.t3 em:before{ content:"3";}

.Q .cta{
	font-size: 1.5em;
	margin-top:2%;
	cursor: pointer;
	visibility: hidden;
}
.Q .cta.show{
	visibility: visible;
}
.Q .cta.done:after{
	margin-left:1em;
	transform: translateY(-40%) rotate(45deg);
}
.Q .cta.done:hover:after{
	transform: translateY(-10%) rotate(45deg);
}
/****************** Q end *********************/

/****************** result start *********************/
.result{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background: var(--theme-color3);
	transform:translateY(100%);
	transition: transform 0.3s ease-out;
	display: flex;
}
.result.show{
	transform:none;
}

/******* tabBlock start *********/
.result .tabBlock{
	width:17.5%;
	background: currentColor;
}

.result .tabWrapper{
	position: relative;
	margin-top:30%;
	--item-size:5.71em;
	--item-gap:2.14em;
	--corner-size:2.14em;
}

.result .tab{
	position: absolute;
	right:0;
	top:0;
	width:69.04%;
	height:var(--item-size);
	background: var(--theme-color3);
	border-radius:calc(var(--item-size) / 2);
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	pointer-events: none;
	transition: margin-top 0.2s ease-out;
}
.result.r1 .tab{ margin-top:0;}
.result.r2 .tab{ margin-top:calc((var(--item-size) + var(--item-gap)) * 1);}
.result.r3 .tab{ margin-top:calc((var(--item-size) + var(--item-gap)) * 2);}
.result.r4 .tab{ margin-top:calc((var(--item-size) + var(--item-gap)) * 3);}
.result.r5 .tab{ margin-top:calc((var(--item-size) + var(--item-gap)) * 4);}
.result .tab:before,
.result .tab:after{
	position: absolute;
	content: "";
	display: block;
	right:0;
	width:var(--corner-size);
	height:var(--corner-size);
	background: url(../images/tabCorner.svg) no-repeat center/contain;
}
.result .tab:before{
	bottom:100%;
}
.result .tab:after{
	top:100%;
	transform: scaleY(-1);
}

.result .tabWrapper ul{
	position: relative;
}
.result .tabWrapper li{
	display: flex;
	justify-content: center;
	cursor: pointer;
}
.result .tabWrapper li+li{
	margin-top:var(--item-gap);
}
.result .tabWrapper li:before{
	content:"";
	display: block;
	width:var(--item-size);
	height:var(--item-size);
	background-image: url(../images/resultTab.svg);
	background-repeat: no-repeat;
	background-position-y: top;
	background-size: 500%;
	transition: transform 0.2s;
}
.result .tabWrapper li:nth-child(1):before{ background-position-x: 0%;}
.result .tabWrapper li:nth-child(2):before{ background-position-x: 25%;}
.result .tabWrapper li:nth-child(3):before{ background-position-x: 50%;}
.result .tabWrapper li:nth-child(4):before{ background-position-x: 75%;}
.result .tabWrapper li:nth-child(5):before{ background-position-x: 100%;}

.result .tabWrapper li:hover:before,
.result.r1 .tabWrapper li:nth-child(1):before,
.result.r2 .tabWrapper li:nth-child(2):before,
.result.r3 .tabWrapper li:nth-child(3):before,
.result.r4 .tabWrapper li:nth-child(4):before,
.result.r5 .tabWrapper li:nth-child(5):before{
	transform: scale(1.1);
}
.result.r1 .tabWrapper li:nth-child(1):before,
.result.r2 .tabWrapper li:nth-child(2):before,
.result.r3 .tabWrapper li:nth-child(3):before,
.result.r4 .tabWrapper li:nth-child(4):before,
.result.r5 .tabWrapper li:nth-child(5):before{
	background-position-y: bottom;
}
/******* tabBlock end *********/

/******* ctBlock start *********/
.result .ctBlock{
	width:82.5%;
	padding:3% 8.33%;
	overflow:auto;
}

.result h4{
	position: relative;
	font-size: 2.28em;
	line-height: 1em;
	letter-spacing: 0.1em;
	padding-bottom:0.8em;
}
.result h4 span{
	display: inline-block;
}
.result h4 i{
	position: absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background: currentColor;
	transform-origin: left center;
}

.result .tabCTWrapper{
	margin-top:4%;
	overflow: hidden;
}

.result .tabCT{
	justify-content: space-between;
	align-items: flex-start;
	display:none;
}
.result.r1 .tabCT:nth-child(1),
.result.r2 .tabCT:nth-child(2),
.result.r3 .tabCT:nth-child(3),
.result.r4 .tabCT:nth-child(4),
.result.r5 .tabCT:nth-child(5){
	display:flex;
}

/**** 左 start ****/
.result .main{
	width:37.97%;
}
.result .main img{
	display: block;
	width:100%;
	cursor: pointer;
}
.result .main h5{
	text-align: center;
	font-size: 1.85em;
	line-height: 1em;
	color:var(--highlight-color);
	margin-top:1em;
	cursor: pointer;
}
.result .main h5 > *{
	display: block;
}
.result .main h5 span{
	font-size: 0.95em;
	font-weight: normal;
	letter-spacing: 0.05em;
}
.result .main h5 em{
	font-style: normal;
	letter-spacing: 0.1em;
	margin-top:0.5em;
}
.result .btnBlock{
	margin-top:3.5em;
	display: flex;
	justify-content: space-between;
}
.result .cta{
	font-size: 1.28em;
	padding-top:1em;
	flex-grow:1;
}
.result .replayBtn{
	margin-left:4%;
	appearance:none;
	border:none;
	display:flex;
	flex-direction: column;
	align-items: center;
	padding:0.8em;
	font-size: 12px;
	color:currentColor;
	background: var(--theme-color2);
	cursor: pointer;
}
.result .replayBtn:before{
	content: "";
	display: block;
	width:2em;
	height:2em;
	background: url(../images/replay.svg) no-repeat center/contain;
	margin-bottom:0.2em;
}
.result .replayBtn:hover:before{
	animation:replayRotate 1s linear infinite;
}
@keyframes replayRotate{
	to{
		transform: rotate(-360deg);
	}
}
/**** 左 end ****/

/**** 右 start ****/
.result .tabCT > ul{
	width:48.1%;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.result .tabCT > ul > li{
	width:42.1%;
}
.result .tabCT > ul > li:nth-child(n+3){
	margin-top:5%;
}
.result .tabCT > ul > li img{
	display: block;
	width:100%;
	border-radius:1.57em;
}
.result .tabCT li ul{
	font-size: 1.1em;
	color:var(--theme-color4);
	margin:1em 0 0 0.5em;
}
.result .tabCT li ul li{
	line-height: 1em;
	display: flex;
	align-items: center;
}
.result .tabCT li ul li:before{
	content: "";
	display: block;
	width:5px;
	height:5px;
	background: var(--highlight-color);
	border-radius:50%;
	margin-right:0.5em;
}
.result .tabCT li ul li+li{
	margin-top:0.5em;
}
/**** 右 end ****/
/******* ctBlock end *********/
/****************** result end *********************/
/************************************** test end ***************************************/


@media screen and (min-width:1024px) and (max-width:1220px){
	
	/************************************** test start ***************************************/
	.test{
		font-size: 1.14vw;
	}
	/************************************** test end ***************************************/

}


@media screen and (min-width:768px) and (max-width:1023px){
	
	/************************************** product start ***************************************/
	.product .slickWrapper{
		margin-top:22%;
		padding-top:48%;
	}
	.product .slickWrapper .slick{
		margin-top:-18%;
	}
	/************************************** product end ***************************************/

}


@media screen and (max-width:1023px){
	
	main.showMapCTWrapper{
		z-index: 2;
	}
	
	/************************************** walk start ***************************************/
	.walk{
		z-index: 1;
	}
	
	/****************** intro start *********************/
	.walk .intro hgroup{
		margin-top:10%;
	}

	.walk .intro hgroup h3{
		font-size: 8vw;
	}
	/****************** intro end *********************/

	/****************** map start *********************/
	.map .svgWrapper{
		width:auto;
		margin-left:0;
		padding:10% 0;
	}

	/********* svg start *********/
	.map svg .shadow{
		fill:#FFFFFF;
	}
	.map svg .jp{
		fill:#B4B7A0;
	}
	
	.lineGroup{
		display: none;
	}
	/********* svg end *********/

	/********* marker start *********/
	.map .marker{
		display: none;
	}
	/********* marker end *********/
	
	/********* 提示文 start *********/
	.hintTxt{
		display: block;
	}
	/********* 提示文 end *********/

	/********* ctWrapper start *********/
	.map .ctWrapper{
		position: fixed;
		padding:15% 0 5%;
		background: rgba(255, 255, 255, 0.95);
		display:none;
	}
	.map .ctWrapper.show{
		display:block;
	}
	.map .ctWrapper .ct{
		position: relative;
		margin:0 auto;
		width:95%;
		height:100%;
	}
	
	.sourceWrapper,
	.source,
	.source .tabCT{
		height:100%;
	}
	
	.source.active{
		display: flex;
		flex-direction: column;
	}

	/**** 頁籤內容 start ****/
	.source .tabCTWrapper{
		overflow: hidden;
	}
	
	.source .tabCT{
		overflow: auto;
	}

	/** 推薦 start **/
	.recommend{
		position: static;
		width:auto;
		height:auto;
		margin-top:5%;
		padding-bottom:20%;
	}

	.recommend h5{
		margin:1em auto;
	}
	
	.recommend .slickWrapper{
		padding-top: 5%;
		background-position-y:-45vw;
	}
	/** 推薦 end **/
	/**** 頁籤內容 end ****/

	.map .closeBtn{
		position: absolute;
		display:block;
		right: 0;
		bottom: calc(100% + 10px);
		width: 20px;
		height: 20px;
		cursor: pointer;
	}
	.map .closeBtn:before,
	.map .closeBtn:after {
		position: absolute;
		content: "";
		right: 0;
		top: 10px;
		width: 22px;
		height: 2px;
		background: #999;
		border-radius: 1px;
	}
	.map .closeBtn:before {
		transform: rotate(-45deg);
	}
	.map .closeBtn:after {
		transform: rotate(-135deg);
	}
	.map .closeBtn:hover:before,
	.map .closeBtn:hover:after {
		background: #666;
	}
	/********* ctWrapper end *********/
	/****************** map end *********************/
	/************************************** walk end ***************************************/
	
	/************************************** test start ***************************************/
	.test{
		padding:2%;
		font-size: 2.2vw;
	}

	/****************** Q start *********************/
	.Q{
		padding:30% 2%;
	}

	.Q .ctWrapper{
		margin-top:10%;
	}

	.topic ul{
		margin-top:10%;
	}
	.topic li{
		width:12.5em;
		aspect-ratio:auto;
		height:20em;
		padding:0;
		justify-content: flex-start;
	}
	.topic li+li{
		margin-left:0.5em;
	}
	.topic:nth-child(3) li{
		width:9.5em;
	}
	.topic:nth-child(1) li:before{
		margin-top:15%;
	}
	.topic:nth-child(2) li:before,
	.topic:nth-child(4) li:before{
		margin-top:35%;
	}
	.topic:nth-child(3) li:before{
		margin-top:50%;
	}
	
	.topic h6,
	.topic span{
		width:80%;
	}
	
	.step .bar{
		aspect-ratio:auto;
		height:5px;
	}

	.Q .cta{
		font-size: 1.8em;
	}
	/****************** Q end *********************/

	/****************** result start *********************/
	.result{
		flex-direction: column;
	}

	/******* tabBlock start *********/
	.result .tabBlock{
		width:auto;
		height:15%;
		display: flex;
		justify-content: center;
	}

	.result .tabWrapper{
		margin-top:0;
		--item-size:5.2em;
		--item-gap:1.5em;
		--corner-size:1.5em;
	}

	.result .tab{
		right:auto;
		top:auto;
		left:0;
		bottom:0;
		width:var(--item-size);
		height:85%;
		border-radius:calc(var(--item-size) / 2);
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
		transition: margin-left 0.2s ease-out;
	}
	.result.r1 .tab,
	.result.r2 .tab,
	.result.r3 .tab,
	.result.r4 .tab,
	.result.r5 .tab{ margin-top:0;}
	.result.r1 .tab{ margin-left:0;}
	.result.r2 .tab{ margin-left:calc((var(--item-size) + var(--item-gap)) * 1);}
	.result.r3 .tab{ margin-left:calc((var(--item-size) + var(--item-gap)) * 2);}
	.result.r4 .tab{ margin-left:calc((var(--item-size) + var(--item-gap)) * 3);}
	.result.r5 .tab{ margin-left:calc((var(--item-size) + var(--item-gap)) * 4);}
	.result .tab:before,
	.result .tab:after{
		right:auto;
		top:auto;
		bottom:0;
	}
	.result .tab:before{
		right:100%;
	}
	.result .tab:after{
		left:100%;
		transform: scaleX(-1);
	}

	.result .tabWrapper ul{
		display: flex;
		height:100%;
	}
	
	.result .tabWrapper li{
		align-items: center;
	}
	.result .tabWrapper li+li{
		margin-top:0;
		margin-left:var(--item-gap);
	}
	/******* tabBlock end *********/

	/******* ctBlock start *********/
	.result .ctBlock{
		width:auto;
		height:85%;
		padding:10% 5%;
	}

	.result h4{
		text-align: center;
	}

	.result.r1 .tabCT:nth-child(1),
	.result.r2 .tabCT:nth-child(2),
	.result.r3 .tabCT:nth-child(3),
	.result.r4 .tabCT:nth-child(4),
	.result.r5 .tabCT:nth-child(5){
		display:block;
	}

	/**** 左 start ****/
	.result .main{
		width:70%;
		margin:0 auto;
	}
	.result .cta{
		font-size: 1.8em;
		padding-left:1em;
		padding-right:1em;
	}
	/**** 左 end ****/

	/**** 右 start ****/
	.result .tabCT > ul{
		margin-top:15%;
		width:auto;
	}
	.result .tabCT > ul > li{
		width:45%;
	}
	.result .tabCT li ul{
		font-size: 1.6em;
	}
	/**** 右 end ****/
	/******* ctBlock end *********/
	/****************** result end *********************/
	/************************************** test end ***************************************/
	
}


@media screen and (max-width:767px){
	
	/************************************** product start ***************************************/
	.product{
		padding-top:10%;
	}

	.product h4{
		font-size: 1.4em;
	}
	
	.product .slickWrapper{
		margin-top:40%;
		padding-top:95%;
	}
	.product .slickWrapper .slick{
		margin-top:-32%;
		width:90%;
	}
	.product .img{
		width:80%;
	}
	
	.product .aromaSlickPN {
		width:40px;
		height:40px;
	}
	.product .aromaSlickPN.prev {
		transform: translate(-40%, 175%) scaleX(-1);
	}
	.product .aromaSlickPN.next {
		transform: translate(40%, 175%);
	}
	/************************************** product end ***************************************/

}