body{
	background: #afd8e8;
}

main{
	background: url(../images/sideBg.png) repeat-y center top/1900px;
}

footer{
	background: #FFF;
}

.themeEventContainer{
	font-size: clamp(10px, 1.16vw, 14px);
}

.themeEventContainer p{
	line-height: 1.7em;
	margin: 0;
	color:#666;
}

/*********************************** header start ***********************************************/
.themeEventContainer header{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.themeEventContainer h2{
	font-size: 1.57em;
}
.themeEventContainer .introTxt{
	position: relative;
	margin-top:1.5em;
}
.themeEventContainer .introTxt .obj{
	position: absolute;
	top:50%;
	transform: translateY(-55%);
	width:2.5em;
	animation:introObj 1s ease-in-out infinite alternate;
}
@keyframes introObj{
	to{
		transform: translateY(-45%);
	}
}
.themeEventContainer .introTxt .o1{
	right:calc(100% + 1em);
}
.themeEventContainer .introTxt .o2{
	left:calc(100% + 1em);
	animation-delay:0.75s;
}
.themeEventContainer .introTxt .obj:before{
	content:"";
	display: block;
	aspect-ratio:0.42;
	background: url(../images/introObj.svg) no-repeat center/100%;
}
.themeEventContainer .introTxt .o2:before{
	transform: scaleX(-1);
}
/*********************************** header end ***********************************************/

/*********************************** guide start ***********************************************/
.guide{
	margin:5% auto 0;
	width:90%;
	overflow:hidden;
}

.guide li{
	--color1:#f9fee9;
	--color2:#fdecdb;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:5%;
}
.guide li:nth-child(odd){
	background: var(--color1);
}
.guide li:nth-child(even){
	flex-direction: row-reverse;
	background: var(--color2);
}

.guide li img,
.guide li .txt{
	width:48%;
}

.guide li img{
	display: block;
}

.guide li .txt h3{
	font-size: 1.5em;
	line-height: 1em;
	text-align: center;
	padding:0.6em 1em;
	box-shadow: 0.35em 0.35em 0 0 #FFF;
}
.guide li:nth-child(odd) .txt h3{
	background: var(--color2);
}
.guide li:nth-child(even) .txt h3{
	background: var(--color1);
}

.guide li .txt p{
	margin-top:1.5em;
}
/*********************************** guide end ***********************************************/

/*********************************** storeBlock start ***********************************************/
.storeBlock{
	position: relative;
	padding:8.94% 20.52% 7%;
	font-size: clamp(10px, 1.15vw, 22px);
	background: #afd8e8 url(../images/storeBg.svg) repeat-y center top/100%;
	overflow: hidden;
}

.storeBlock .CT{
	--color1:#6ca9b7;
	--color2:#ff8585;
	position: relative;
	padding:7.14% 12.14% 8.92%;
	background: #fffef5;
	z-index: 1;
}

.storeBlock .CT:before,
.storeBlock .CT:after{
	position: absolute;
	content: "";
	display: block;
	left:0;
	width:100%;
	aspect-ratio:28;
	background: url(../images/paperTop.svg) no-repeat center/100%;
}
.storeBlock .CT:before{
	bottom:100%;
}
.storeBlock .CT:after{
	top:100%;
	translate:0 -1px;
	rotate:-180deg;
}

.storeBlock .CT .btm{
	left:50%;
	top:100%;
	width:153.92%;
	aspect-ratio:5.9448;
	translate:-50% -55%;
	background: url(../images/storeObj3.svg) no-repeat center/100%;
	z-index: 1;
	pointer-events: none;
}
.storeBlock .CT .btm:before,
.storeBlock .CT .btm:after{
	position: absolute;
	content:"";
	display: block;
	left:0;
	top:0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	animation-name:flower;
	animation-duration:2s;
	animation-timing-function:ease-in-out;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-fill-mode: both;
}
.storeBlock .CT .btm:before{
	width:16.35%;
	aspect-ratio:0.67;
	background-image: url(../images/storeObj4.svg);
	margin:-9.86% 0 0 6.84%;
	transform-origin: right bottom;
	animation-delay:0s;
}
.storeBlock .CT .btm:after{
	width:14.96%;
	aspect-ratio:0.71;
	background-image: url(../images/storeObj5.svg);
	margin:-7.83% 0 0 74.24%;
	transform-origin: left bottom;
	animation-delay:1s;
}
@keyframes flower{
	from{
		transform: rotate(-5deg);
	}
	to{
		transform: rotate(5deg);
	}
}

/***************** header start *******************/
.storeBlock header h3{
	position: absolute;
	left:50%;
	top:0;
	font-size: 2.2em;
	line-height: 1em;
	letter-spacing: 0.1em;
	transform-origin: left center;
}
.storeBlock header h3 span{
	display: block;
	transform: translate(-50%, -70%);
	white-space: nowrap;
	color:#FFF;
	background:var(--color2);
	padding:0.4em 1.1em;
	border-radius:2em;
}
.storeBlock header ul{
	display: flex;
	justify-content: space-between;
}
.storeBlock header li{
	width:49.17%;
	height:3.9em;
	color:var(--color1);
	border:0.1em solid var(--color1);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.2s;
	border-radius:0.3em;
	font-weight: bold;
	text-align: center;
	cursor:pointer;
}
.storeBlock header li:hover,
.storeBlock header li.active{
	color:#FFF;
	background: var(--color1);
}
/***************** header end *******************/

/***************** tabCTWrapper start *******************/
.storeBlock .tabCTWrapper{
	margin-top:5.89%;
}

.storeBlock .tabCT{
	color:var(--color1);
	font-family: Arial, 微軟正黑體;
	display: none;
}
.storeBlock .tabCT.active{
	display: block;
}

.storeBlock h4,
.storeBlock h5{
	line-height: 1em;
}
.storeBlock h4{
	font-size: 2.2em;
	display: flex;
	align-items: center;
}
.storeBlock h4:before{
	content:"";
	display: block;
	width:0.7em;
	aspect-ratio:0.94;
	background: url(../images/flower.svg) no-repeat center/100%;
	margin-right:0.25em;
}
.storeBlock h5{
	color:var(--color2);
	font-size: 1.36em;
	margin-left:-0.5em;
}
.storeBlock p{
	line-height: 1.8em;
	margin:0;
}
.storeBlock p strong{
	color:var(--color2);
	display: block;
}
.storeBlock p strong em{
	font-style: normal;
	font-size: 1.5em;
}

/******** tabCT1 start ********/
.storeBlock .tabCT:nth-child(1) .detail,
.storeBlock .tabCT:nth-child(1) .detail li+li{
	margin-top:2em;
}
.storeBlock .tabCT:nth-child(1) p{
	margin-top:0.5em;
}
.storeBlock .tabCT:nth-child(1) .detail li:nth-child(3) p strong{
	display: inline;
}

.storeBlock .tabCT:nth-child(1) .slick{
	margin-top:2.5em;
}
.storeBlock .tabCT:nth-child(1) .slick li{
	padding:0 0.5em;
}
.storeBlock .tabCT:nth-child(1) .slick li img{
	display: block;
	width:100%;
	border-radius:0.5em;
}
/******** tabCT1 end ********/

/******** tabCT2 start ********/
.storeBlock .tabCT:nth-child(2) .intro p span{
	position: relative;
}
.storeBlock .tabCT:nth-child(2) .intro p span:before{
	position: absolute;
	content: "";
	display: block;
	left:1em;
	top:0.2em;
	width:2.8em;
	aspect-ratio:1.25;
	background: url(../images/flower2.svg) no-repeat center/100%;
}

/**** product start ****/
.storeBlock .tabCT:nth-child(2) .product{
	margin-top:3em;
	background: #ffecda;
	padding:3.52% 3.52% 5%;
	border-radius:1em;
	color:#57868e;
}
.storeBlock .tabCT:nth-child(2) .slick{
	font-size:0.82em;
	text-align: center;
}
.storeBlock .tabCT:nth-child(2) li{
	transform-origin: center 65%;
	margin:0 0.15em;
	transition: transform 0.2s;
}
.storeBlock .tabCT:nth-child(2) li:not(.slick-center){
	transform: scale(0.85);
}
.storeBlock .tabCT:nth-child(2) .slick a{
	color:currentColor;
	display: block;
}
.storeBlock .tabCT:nth-child(2) .slick a em{
	font-style: normal;
	font-weight: bold;
	display: block;
	transition: color 0.2s;
}
.storeBlock .tabCT:nth-child(2) li:not(.slick-center) a em{
	color:#b2b2b2;
}
.storeBlock .tabCT:nth-child(2) .slick .img{
	margin-top:0.8em;
	border-radius:0.6em;
	overflow: hidden;
	transition: opacity 0.2s;
}
.storeBlock .tabCT:nth-child(2) li:not(.slick-center) .img{
	opacity:0.5;
}
.storeBlock .tabCT:nth-child(2) .slick img{
	display: block;
	width:100%;
	transition: transform 1s;
}
.storeBlock .tabCT:nth-child(2) .slick a:hover img{
	transform: scale(1.1);
}
.storeBlock .tabCT:nth-child(2) .slick a em{
	font-style: normal;
	display: block;
	line-height: 1.4em;
	margin-top:1em;
}
/**** product end ****/

.storeBlock .tabCT:nth-child(2) p{
	margin-top:0.95em;
}
/******** tabCT2 end ********/

/******** cta start ********/
.storeBlock .cta{
	font-size: 0.81em;
	margin-top: 3em;
	line-height: 1.8em;
	color:#666;
}
.storeBlock .cta a{
	color:currentColor;
	display:inline-flex;
	align-items: center;
	margin-left: 0.2em;
	transition: color 0.2s;
	transform: translateY(0.2em);
}
.storeBlock .cta a:hover{
	color:var(--color1);
}
.storeBlock .cta a:before{
	content:"";
	display: block;
	width:1.2em;
	aspect-ratio:1;
	background: url(../images/tel.svg) no-repeat center/contain;
}
.storeBlock .cta a span{
	display: inline-block;
	margin-left:0.4em;
	font-size: 0.95em;
}
.storeBlock .cta ol{
	list-style: decimal;
	padding-left:1.2em;
}
/******** cta end ********/
/***************** tabCTWrapper end *******************/

/***************** obj start *******************/
.storeBlock .obj{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}
@keyframes bird{
	from{
		translate:0 -5%;
	}
	to{
		translate:0 5%;
	}
}
.storeBlock .o1,
.storeBlock .o2{
	left:0;
	top:0;
	animation-name:bird;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-fill-mode: both;
	z-index: 2;
}
.storeBlock .o1{
	width:15.26%;
	aspect-ratio:0.83;
	margin: 4.52% 0 0 77%;
	background-image: url(../images/storeObj1.svg);
	animation-delay:0s;
}
.storeBlock .o2{
	width:14.94%;
	aspect-ratio:0.86;
	margin: 30.84% 0 0 4.31%;
	background-image: url(../images/storeObj2.svg);
	animation-delay:1s;
}
/***************** obj end *******************/
/*********************************** storeBlock end ***********************************************/


@media screen and (max-width:1023px){
	
	.themeEventContainer{
		font-size: 14px;
	}

	/*********************************** header start ***********************************************/
	.themeEventContainer .introTxt{
		width:65%;
	}
	.themeEventContainer .introTxt p br{
		display: none;
	}
	/*********************************** header end ***********************************************/
	
	/*********************************** guide start ***********************************************/
	.guide{
		width:auto;
	}

	.guide li{
		display: block;
	}

	.guide li img{
		width:100%;
	}
	.guide li .txt{
		width:auto;
		margin-top:1em;
	}
	.guide li .txt h3{
		font-size: 1.2em;
	}
	/*********************************** guide end ***********************************************/
	
	/*********************************** storeBlock start ***********************************************/
	.storeBlock{
		margin-top:10%;
		padding:10% 2.5% 15%;
		font-size: clamp(12px, 1.74vw, 22px);
	}
	
	/***************** header start *******************/
	.storeBlock header h3{
		font-size: 1.8em;
	}
	.storeBlock header h3 span{
		padding-top: 0.5em;
	}
	
	.storeBlock header ul{
		font-size: 1.1em;
	}
	/***************** header end *******************/

	.storeBlock .CT{
		padding:15% 5%;
	}

	/***************** tabCTWrapper start *******************/
	/******** tabCT2 start ********/
	/**** product start ****/
	.storeBlock .tabCT:nth-child(2) .slick{
		font-size:1em;
	}
	/**** product end ****/
	/******** tabCT2 end ********/

	/******** cta start ********/
	.storeBlock .cta{
		font-size: 0.95em;
		margin-left:3%;
	}
	/******** cta end ********/
	/***************** tabCTWrapper end *******************/

	/***************** obj start *******************/
	.storeBlock .o1{
		margin:2% 0 0 84%;
	}
	.storeBlock .o2{
		margin: 8% 0 0 0;
	}
	/***************** obj end *******************/
	/*********************************** storeBlock end ***********************************************/
	
}