/*****************
*** footer *******
*****************/
footer {
	position: relative;
	margin: auto;
	padding: 3.75em 0;
	background-color: rgba(67, 67, 67, 1);
	font-size: 5vw;
	line-height: 1;
	color: white;
}
footer h2 {
	font-size: 1.875em;
	font-weight: 700;
	text-align: center;
}
.footer-inner > p {
	padding: 1.5em 1.25em 1em;
	text-align: justify;
	line-height: 1.5;
}
.footer-inner > p > a {
	text-align: center;
	color: white;
	display: block;
}
.store-maps {
	margin: auto;
	padding-top: 1.375em;
	width: 87.5%;
	border-top: 1px solid white;
}
.map-switch {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 1.25em 1.5em;
}
.map-switch > li {
	text-align: center;
	line-height: 2.375;
	color: rgba(67, 67, 67, 1);
	background-color: white;
	border: 0.125em solid white;
	cursor: pointer;
}
.map-switch > li:hover,
.map-switch > li.selected {
	color: white;
	background-color: transparent;
}
#maps {
	position: relative;
	margin-top: 1.5em;
	height: 11.825em;
	overflow: hidden;
}
/*===== 主體CSS ======*/
.reserve_phone {
	display: none;
}
.visuallyhidden {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
	clip-path: inset(0px 0px 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	padding: 0;
	border: 0;
}
body {
	position: relative;
	margin: auto;
	background: white;
	overflow-x: hidden;
}
header,
main {
	position: relative;
	margin: auto;
	font-size: 5vw;
	line-height: 1;
	color: rgb(34, 24, 21);
}
img {
	width: 100%;
}
picture {
	display: block;
}
h1 {
	display: none;
}
.site-logo {
	position: relative;
	width: 100%;
	height: 3.75em;
	background: white;
	display: flex;
	justify-content: center;
	align-items: center;
}
.site-logo img {
	margin: auto;
	width: 78.125%;
}
.header-main {
	position: relative;
}
.btn1 {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 3;
}
.btn picture,
.btn img {
	position: relative;
	z-index: 0;
}
.btn span {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 1.5em;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
}
.float-btn {
	position: fixed;
	right: 0;
}
.float-btn.hidden {
	display: none;
}
.sec {
	position: relative;
}
.sec1 .small > img:first-of-type {
	margin-bottom: -1px;
}
.large {
	display: none;
}
.sec4,
.sec6,
.sec8,
.sec10,
.sec12,
.sec-qa {
	padding: 36px 4.6875%;
}
.sec4 .small {
	margin-bottom: 1em;
}
.sec4 picture img {
	box-shadow: 0 2px 5px rgb(210, 210, 210);
}
.sec5 > picture {
	position: relative;
	z-index: 0;
}
.sec5 > div,
.sec11 > div {
	position: absolute;
	top: 6.8125em;
	left: 0;
	right: 0;
	margin: auto;
	width: 90.625%;
	z-index: 1;
}
.sec5 > div > picture:nth-of-type(n+2) {
	margin-top: .9375em;
}
.sec6 > picture:first-of-type {
	margin-bottom: .6em;
}
.sec10 > div {
	position: relative;
	margin-top: 1em;
}
.sec10 > div::before,
.sec10 > div::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: all .15s;
}
.sec10 > div::before {
	width: 2.75em;
	height: 2.75em;
	background: rgba(0,0,0,.4);
	border-radius: 50%;
}
.sec10 > div::after {
	left: calc(50% - .315em);
	right: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .71875em .875em;
	border-color: transparent transparent transparent white;
}
.sec10 > div:hover::before {
	background: rgba(255,255,255,.9);
	box-shadow: 0 0 4px 1px rgb(210, 210, 210);
}
.sec10 > div:hover::after {
	border-color: transparent transparent transparent red;
}
.sec11 > div > picture:nth-of-type(n+2) {
	margin-top: calc(1em + 1px);
}
.sec12 > div {
	margin-top: 36px;
}
.sec12 > div > img:nth-of-type(n+2) {
	margin-top: 1em;
}
.sec-notice {
	padding-bottom: 36px;
}
.sec-notice > p {
	padding: .33em 4.6875%;
	font-size: 12px;
	text-align: center;
	line-height: 2;
}
.sec-notice > p:first-of-type {	
	color: white;
	background: rgba(204, 206, 230, 1);
}
.sec-notice > p:last-of-type {
	color: rgba(141, 141, 141, 1);
}
.sec-notice > p:last-of-type > span {
	color: black;
}
/*****************
******* qa *******
*****************/
.sec-qa {
	background: rgba(237, 245, 246, 1);
}
.qa {
	margin-top: 1.625em;
}
.qa li:nth-of-type(n+2) {
	margin-top: .75em;
}
.qa li > div:first-of-type {
	position: relative;
	font-size: 1.25em;
	line-height: 1.8;
	color: rgba(250, 255, 181, 1);
	background-color: rgba(71, 152, 173, 1);
	display: flex;
	align-items: stretch;
	cursor: pointer;
}
.qa li > div:first-of-type > span {
	pointer-events: none;
}
.qa li > div:first-of-type > span:first-of-type {
	width: 1.85em;
	font-family: "Microsoft JhengHei UI";
	font-size: 1.3em;
	color: white;
	background: rgba(129, 192, 209, 1);
	display: flex;
	justify-content: center;
	align-items: center;
}
.qa li > div:first-of-type > span:last-of-type {
	padding: .6em .8em;
	width: calc(100% - 2.4em);
	text-align: justify;
}
.qa li > div:nth-of-type(2) {
	color: rgb(96, 96, 96);
}
.qa li > div:last-of-type {
	position: relative;
	padding: 0 .9375em;
	height: 0;
	text-align: justify;
	line-height: 1.875;
	background: white;
	opacity: 0;
}
.qa li.active > div:last-of-type {
	animation: answerOpen .35s ease-out forwards;
}
.notice {
	margin-top: 2em;
	padding: 0 2.25em;
	font-size: 12px;
	text-align: center;
	line-height: 2;
	color: rgba(71, 152, 173, 1);
}
@media only screen and (min-width: 420px) {
	body {
		width: 420px;
	}
	header,
	main,
	footer {
		font-size: 21px;
	}
	.btn1 {
		width: 420px;
		left: calc(50% - 210px);
	}
}
@media only screen and (min-width: 768px) {
	body {
		width: 100%;
	}
	header,
	main {
		font-size: 2.08333vw;
	}
	header,
	main,
	footer {
		max-width: 1280px;
	}
	.btn {
		width: 16.625em;
		filter: drop-shadow(0 2px 5px rgb(214, 219, 220));
	}
	.btn > span {
		font-size: 2em;
	}
	.btn1 {
		position: absolute;
		left: 2em;
		bottom: 3.2em;	
	}
	.btn2 {
		position: relative;
		margin: 2.5em auto 0;
	}
	.btn3 {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2.5em;
		margin: auto;
	}
	.sec2 .small,
	.sec4 .small {
		display: none;
	}
	.large {
		display: block;
	}
	.sec4,
	.sec6,
	.sec8,
	.sec10,
	.sec12,
	.sec-qa {
		padding: 45px 3.90625%;
	}
	.sec4 picture img {
		box-shadow: none;
	}
	.sec5 > div {
		top: 8em;
		left: 7.8125%;
		right: auto;
		width: 52.083%;
	}
	.sec5 > div > picture:nth-of-type(n+2) {
		margin-top: 1.25em;
	}
	.sec10 > picture,
	.sec12 > picture,
	.sec-qa > picture {
		position: relative;
		margin: auto;
		width: 85.876%;
	}
	.sec10 > div {
		margin-top: 2em;
	}
	.sec10 > div::before {
		width: 6.375em;
		height: 6.375em;
	}
	.sec10 > div::after {
		left: calc(50% - .5em);
		border-width: 1.09375em 1.6875em;
	}
	.sec11 > div {
		top: 7.875em;
		width: 84.375%;
	}
	.sec11 > div > picture:nth-of-type(n+2) {
		margin-top: .9375em;
	}
	.sec12 > div {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.sec12 > div > img {
		width: 47.74%;
	}
	.sec12 > div > img:nth-of-type(n+2) {
		margin-top: 0;
	}
	.sec12 > div > img:nth-of-type(n+3) {
		margin-top: 1.5em;
	}
	.sec-notice > p {
		padding: .65em 5.86em;
		font-size: 14px;
	}
	.qa {
		padding: 0 1.875em;
	}
	.qa li:nth-of-type(n+2) {
		margin-top: calc(1em + 1px);
	}
	.qa li > div:first-of-type {
		font-size: 1.5em;
	}
	.qa li > div:first-of-type > span:first-of-type {
		width: 2.3125em;
		font-size: 1.3333em;
	}
	.qa li > div:first-of-type > span:last-of-type {
		padding: .6em 0 .6em .65em;
		width: calc(100% - 3.1em);
	}
	.qa li > div:last-of-type {
		padding: 0 1.333em;
		font-size: 1.125em;
		line-height: 2;
	}
	#reserve {
		font-size: 1.25em;
	}
/*****************
*** footer *******
*****************/
	footer {
		padding: 4.5em 0;
		font-size: 2.604167vw;
	}
	footer h2 {
		font-size: 2em;
	}
	.footer-inner > p {
		padding: 1.25em 1.8em;
		line-height: 1;
	}
	.footer-inner > p > a {
		margin-right: 1.25em;
		padding-left: 0;
		display: inline;
	}
	.store-maps {
		padding-top: 0.8em;
		width: 90.625%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.map-switch {
		width: 29.86%;
		grid-gap: .8em 1.2em;
	}
	.map-switch > li {
		font-size: 0.8em;
		line-height: 1.875;
	}
	#maps {
		margin-top: 0;
		width: 65.8%;
	}
}
@media only screen and (min-width: 1024px) {
	body {
		box-shadow: 0 0 15px rgb(208, 208, 208);
	}
	header,
	main {
		margin-left: auto;
		margin-right: auto;
		font-size: 1.5625vw;
	}
	footer {
		margin-left: auto;
		margin-right: auto;
		font-size: 1.953125vw;
	}
	.btn {
		width: 18.25em;
	}
	.btn > span {
		font-size: 2.36em;
	}
	.btn1 {
		bottom: 4.93em;
		left: 3.36em;
	}
	.btn3 {
		bottom: 4.65em;
	}
	.float-btn {
		top: 22.25em;
		width: 180px !important;
		filter: unset !important;
		z-index: 999;
	}
	.site-logo {
		position: absolute;
		background: none;
		display: none;
	}
	.sec4,
	.sec6,
	.sec10,
	.sec-qa {
		padding: 67px 11.89%;
	}
	.sec5 > div {
		top: 9.97em;
		left: 11.8%;
		width: 44.02%;
	}
	.sec5 > div > picture:nth-of-type(n+2) {
		margin-top: 1.6em;
	}
	.sec6 {
		padding-left: 13.9%;
		padding-right: 13.9%;
	}
	.sec6 > picture:first-of-type {
		margin: 0 auto 1.5em;
		width: 76.5%;
	}
	.sec11 > div {
		top: 10.125em;
		width: 63.525%;
	}
	.sec10 > picture,
	.sec-qa > picture {
		width: 73.5%;
	}
	.sec12 > picture {
		width: 53.275%;
	}
	.sec-notice > p:first-of-type {
		margin: 0 auto 1em;
		width: 70.4%;
		background: linear-gradient(270deg,
			rgba(202, 204, 222, 0) 0%,
			rgba(204, 206, 230, 0.85) 22%,
			rgba(204, 206, 230, 1) 50%,
			rgba(204, 206, 230, 0.85) 78%,
			rgba(202, 204, 222, 0) 100%) 0% 0% no-repeat padding-box;
	}
	.qa {
		padding: 0 3.125em;
	}
	.qa li > div:first-of-type {
		font-size: 1.5em;
	}
	.qa li > div:first-of-type > span:first-of-type {
		font-size: 1.4em;
	}
	.qa li > div:last-of-type {
		font-size: 1.375em;
	}
/*****************
*** footer *******
*****************/
	footer {
		margin-left: auto;
		margin-right: auto;
		padding: 4.5em 0;
		font-size: 1.953125vw;
	}
	.footer-inner > p {
		padding: 1.5em 0 1.25em;
		text-align: center;
	}
	.store-maps {
		width: 68.2%;
	}
}
@media only screen and (min-width: 1280px) {
	html {
		margin: auto;
		max-width: 1280px;
	}
	header,
	main {
		font-size: 20px;
	}
	footer {
		font-size: 25px;
	}
	.sec4, .sec6, .sec10, .sec-qa {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}
@media only screen and (min-width: 1680px) {
	.float-btn {
		right: calc(50% - 850px);
	}
}


@keyframes answerOpen {
	0% {
		padding-top: 0;
		padding-bottom: 0;
		height: auto;
		opacity: 0;
	}
	100% {
		padding-top: .5em;
		padding-bottom: .5em;
		height: auto;
		opacity: 1;
	}
}