/*****************
*** 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%;
}
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;
}
.header-content {
	position: absolute;
	top: 16.625em;
	left: 7%;
	width: 86%;
}
.circle3 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.circle3 > img {
	width: 5.3125em;
}
.circle3 > img:nth-of-type(2) {
	padding-top: .625em;
}
.btn1 {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 3;
}
.float-btn {
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 999;
}
.float-btn.show {
	display: flex;
}
.sec {
	position: relative;
}
.sec1 {
	padding: 2.625em .625em 2em;
	background: linear-gradient(180deg, rgb(219,230,238), rgb(152,167,179));
}
.sec1 > img {
	margin-bottom: 2em;
}
.sec2 {
	padding: 2.625em .625em 2.5em;
	background: rgb(219,230,238);
}
.symptom {
	margin-top: 2.375em;
	padding-left: 1.25em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.symptom > li {
	width: 8em;
}
.symptom > li:nth-of-type(n+3) {
	margin-top: 1.625em;
}
.symptom > li > div {
	position: relative;
	font-size: 1.125em;
	text-align: center;
	line-height: 1.78;
	color: rgb(90,90,90);
}
.symptom > li > div > span {
	position: absolute;
	left: -1.115em;
	top: calc(50% - 1.15em);
	width: 2.23em;
	line-height: 2.23em;
	color: white;
	background-color: rgb(237, 30, 30);
	border-radius: 50%;
}
.sec4,
.sec5,
.sec6,
.sec7 {
	padding: 2.625em 0 2.5em;
	background: linear-gradient(180deg, white, rgb(219,230,238));
}
.sec4 h2,
.sec5 h2,
.sec6 h2,
.sec7 h2,
.sec8 h2 {
	font-size: 1.875em;
	font-weight: 700;
	text-align: center;
	color: rgb(187, 151, 94);
}
.ruby {
	margin-top: 1.25em;
	padding-right: .625em;
}
.sec4-content {
	position: relative;
	margin-top: -2.75em;
	margin-left: 1.875em;
	width: 16.375em;
	box-shadow: 4px 4px 10px rgb(220, 220, 220);
}
.sec4-content > span {
	position: absolute;
	background: rgb(187, 151, 94);
	display: block;
}
.sec4-content > span:nth-of-type(2n+1) {	
	width: .125em;
	height: 14em;	
}
.sec4-content > span:nth-of-type(2n) {	
	width: 14em;
	height: .125em;	
}
.sec4-content > span:nth-of-type(1),
.sec4-content > span:nth-of-type(2) {
	top: -.875em;
	left: -.875em;
}
.sec4-content > span:nth-of-type(3),
.sec4-content > span:nth-of-type(4) {
	bottom: -.875em;
	right: -.875em;
}
.advantage {
	margin-top: 4em;
	padding: 0 1.25em;
}
.sec5 {
	padding-top: 2.3125em;
}
.sec5 h2 {
	line-height: 1.33;
	color: rgb(86, 131, 167);
}
.sec5 h3 {
	margin: 1.222em auto;
	font-size: 1.125em;
	font-weight: 700;
	text-align: center;
	color: rgb(90, 90, 90);
}
.sec5 h2 span {
	display: block;
}
.video {
	margin: auto;
	width: 18.4375em;
}
.sec6 h2,
.sec7 h2,
.sec8 h2 {
	color: rgb(86, 131, 167);
}
.sec6 > div {
	margin-top: 1.875em;
	padding: 0 .625em;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.sec6 > div:first-of-type {
	margin-top: 2.5em;
}
.sec6 > div > img {
	width: 9em;
}
.sec6 > div:nth-of-type(3) > img {
	width: 100%;
}
.sec7 {
	padding-bottom: 1.25em;
	background: linear-gradient(180deg, white, rgb(226, 234, 241));
}
.sec7 > div:first-of-type {
	margin-top: 1em;
}
.dr {
	position: relative;
	margin-bottom: 1.375em;
	padding: 0 .625em;
}
.name {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	z-index: 2;
}
.name > img {
	width: 6.25em;
	border-radius: 50%;
	box-shadow: 0 0 5px 1px rgb(226, 226, 226);
}
.name h3 {
	padding-bottom: 1.7778em;
	padding-left: .4em;
	font-size: 1.125em;
	color: rgb(86, 131, 167);
}
.recommend {
	position: relative;
	margin-top: -1.375em;
	padding: 1.75em .625em 1.5em 1.25em;
	text-align: justify;
	line-height: 1.5;
	color: rgb(83, 64, 42);
	background-color: white;
	border: 2px solid rgb(201, 230, 253);
	border-radius: 9px;
	box-shadow: 0 5px 1px rgb(204, 217, 227);
	z-index: 1;
}
.sec8 {
	padding: 6em .625em 6em 1em;
	background: linear-gradient(180deg, rgb(226, 234, 241), rgb(219,230,238));
}
.sec8 > img {
	position: absolute;
	top: 0;
	right: 0;
	width: 7.5em;
}
/*****************
******* qa *******
*****************/
.qa {
	margin-top: 1.625em;
}
.qa li:nth-of-type(n+2) {
	margin-top: .75em;
}
.qa li > div:first-of-type {
	position: relative;
	padding: 0 2em 0 1.5em;
	height: 3.667em;
	line-height: 1.5;
	color: white;
	background-color: rgb(86, 131, 167);
	border-radius: 1em;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.qa li > div:nth-of-type(2) {
	color: rgb(96, 96, 96);
}
.qa li > div:first-of-type::before,
.qa li > div:first-of-type::after {
	content: "";
	position: absolute;
}
.qa li > div:first-of-type::before {
	top: calc(50% - 1em);
	left: -0.8125em;
	width: 2em;
	height: 2em;
	background: url(../../img/flx-q.svg) no-repeat;
	background-size: cover;
}
.qa li > div:first-of-type::after {
	right: .625em;
	top: calc(50% - .21875em);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .4375em;
	border-color: white transparent transparent transparent;
}
.qa li > div:last-of-type {
	position: relative;
	padding: 0 2.856em 0 1.714em;
	height: 0;
	text-align: justify;
	line-height: 1.86;
	opacity: 0;
}
.qa li.active > div:first-of-type {
	background: rgb(139, 172, 198);
}
.qa li.active > div:first-of-type::after {
	top: calc(50% - .65625em);
	border-color: transparent transparent rgb(86, 131, 167) transparent;
}
.qa li.active > div:last-of-type {
	animation: answerOpen .35s ease-out forwards;
}
.notice {
	margin-top: 2em;
	padding: 0 1em;
	font-size: 14px;
	text-align: center;
	line-height: 2;
	color: rgb(45, 84, 115);
}
@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: 94.791667%;
	}
	header,
	main {
		font-size: 2.08333vw;
	}
	header,
	main,
	footer {
		max-width: 1280px;
	}
	.float-btn {
		position: fixed;
		top: 75%;
		right: .5em;
		width: 3.75em;
		height: 3.75em;
		font-size: 1.25em;
		line-height: 1.25;
		color: white;
		background: rgb(230, 199, 143);
		border-radius: 50%;
		box-shadow: 0 0 .5em rgb(150, 150, 150);
	}
	.float-btn::after {
		content: "";
		position: absolute;
		width: 3em;
		height: 3em;
		border-radius: 50%;
		background: radial-gradient(circle, rgb(241, 216, 178), rgb(215, 178, 109));
		box-shadow: 0 0 .75em white;
		z-index: -1;
	}
	.site-logo {
		position: absolute;
		background: none;
		display: none;
	}
	.header-content {
		left: 46.02%;
		top: 19.125em;
		width: 23.5em;
	}
	.circle3 > img {
		width: 7.125em;
	}
	.circle3 > img:nth-of-type(2) {
		padding-top: 1em;
	}
	.btn1 {
		position: absolute;
		left: 2.625em;
		bottom: 2.75em;
		width: 13.625em;
		filter: drop-shadow(0 -2px 5px rgb(214, 219, 220));
	}
	.sec1 {
		padding: 2em 0 1.875em;
	}
	.sec1 > img {
		position: absolute;
		left: 3.125em;
		top: 5.8125em;
		width: 18.375em;
		box-shadow: 0 2px 10px rgb(136, 149, 160);
		z-index: 2;
	}
	.sec1 > picture {
		position: relative;
		margin-left: 13em;
		width: 29.75em;
		display: block;
	}
	.sec2 {
		padding: 1.875em 0 2.215em;
	}
	.sec2 > picture {
		position: relative;
		margin: auto;
		width: 39em;
		display: block;
	}
	.symptom {
		padding-left: 0;
		margin: 1.875em auto 0;
		width: 37.25em;
	}
	.symptom > li {
		width: 11.5em;
	}
	.symptom > li:nth-of-type(n+3) {
		margin-top: 0;
	}
	.symptom > li:nth-of-type(n+4) {
		margin-top: 1.875em;
	}
	.symptom > li > div {
		font-size: 1.625em;
		line-height: 1.92;
	}
	.symptom > li > div > span {
		left: -1.2em;
		top: calc(50% - 1.1925em);
		width: 2.385em;
		line-height: 2.385;
	}
	.sec4 {
		padding: 2em 0;
	}
	.sec4 h2, .sec5 h2, .sec6 h2, .sec7 h2, .sec8 h2 {
		font-size: 2.1875em;
	}
	.ruby {
		position: absolute;
		top: 6.25em;
		right: 0;
		margin: 0;
		padding: 0;
		width: 19.75em;
		z-index: 2;
	}
	.sec4-content {
		margin: 3.125em 0 0 2.375em;
		width: 25em;
	}
	.sec4-content > span:nth-of-type(2n+1) {
		height: 10.375em;
	}
	.sec4-content > span:nth-of-type(2n) {
		width: 10.375em;
	}
	.sec4-content > span:nth-of-type(1), .sec4-content > span:nth-of-type(2) {
		top: -1.125em;
		left: -1.125em;
	}
	.sec4-content > span:nth-of-type(3), .sec4-content > span:nth-of-type(4) {
		bottom: -1.125em;
		right: -1.125em;
	}
	.advantage {
		margin: 4em auto 0;
		padding: 0;
		width: 32.5em;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.advantage > li {
		width: 10.125em;
	}
	.sec5,
	.sec6,
	.sec7 {
		padding: 1.875em 1.25em;
	}
	.sec5 h2 {
		line-height: 1;
	}
	.sec5 h2 span {
		padding-left: .34em;
		display: inline;
	}
	.sec5 h3 {
		margin: 1.3em auto;
		font-size: 1.25em;
	}
	.video {
		width: 100%;
	}
	.sec6 {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.sec6 h2 {
		width: 100%;
	}
	.sec6 > div:first-of-type {
		margin-top: auto;
	}
	.sec6 > div {
		margin-top: 1.875em;
		padding: 0;
		width: 20.625em;
	}
	.sec6 > div > img {
		width: 9.875em;
	}
	.sec7 {
		padding-bottom: 2.25em;
	}
	.dr {
		padding: 0 1.25em 0 .75em;
	}
	.name > img {
		width: 7em;
	}
	.name h3 {
		padding-bottom: 3.85em;
		font-size: 1.25em;
	}
	.recommend {
		margin-left: 3.875em;
		margin-top: -4.375em;
		padding: .25em 3em .25em 3.5em;
		width: 37.1875em;
	}
	.sec8 {
		padding: 5.5em 5em 4.5em;
	}
	.sec8 > img {
		width: 11.375em;
	}
	.qa {
		margin-top: 2em;
	}
	.qa li {
		padding-left: .625em;
	}

	.qa li:nth-of-type(n+2) {
		margin-top: 1em;
	}
	.qa li > div:first-of-type {
		padding: 0 5em 0 2.2em;
		height: 3.6em;
		font-size: 1.25em;
		line-height: 1.5;
	}
	.qa li > div:first-of-type::before {
		top: calc(50% - 1.125em);
		width: 2.25em;
		height: 2.25em;
	}
	#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 {
		width: 95.703125%;
		box-shadow: 0 0 15px rgb(208, 208, 208);
	}
	header,
	main {
		margin-left: auto;
		margin-right: auto;
		font-size: 1.7578125vw;
	}
	footer {
		margin-left: auto;
		margin-right: auto;
		font-size: 1.953125vw;
	}
	.float-btn {
		font-size: 1.333em;
	}
	.header-content {
		left: 47.96%;
		top: 23.667em;
		width: 24.556em;
	}
	.circle3 > img {
		width: 7.445em;
	}
	.btn1 {
		left: 3.222em;
		bottom: 3.333em;
		width: 16.223em;
	}
	.sec1,
	.sec2 {
		padding: 2.5em 0;
	}
	.sec1 > picture {
		margin-left: 16.778em;
		width: 36em;
	}
	.sec1 > img {
		top: 6.111em;
		left: 1.667em;
		width: 24.4445em;
	}
	.sec2 > picture {
		width: 41.667em;
	}
	.symptom {
		width: 40.445em;
	}
	.symptom > li {
		width: 12.445em;
	}
	.symptom > li:nth-of-type(n+4) {
		margin-top: 2em;
	}
	.symptom > li > div {
		font-size: 1.667em;
		line-height: 1.867;
	}
	.symptom > li > div > span {
		left: -1.267em;
		bottom: calc(50% - 1.265em);
		width: 2.53em;
		line-height: 2.53;
	}
	.sec4 {
		padding: 1.778em 0;
	}
	.sec4 h2, .sec5 h2, .sec6 h2, .sec7 h2, .sec8 h2 {
		font-size: 2.333em;
	}
	.ruby {
		top: 10.833em;
		width: 23.223em;
	}
	.sec4-content {
		margin: 7.167em 0 0 3em;
		width: 29.833em;
	}
	.advantage {
		margin-top: 6.667em;
		width: 36.111em;
	}
	.advantage > li {
		width: 11.22em;
	}
	.sec5, .sec6, .sec7 {
		padding: 3em 1.667em 2.5em;
	}
	.sec5 h3 {
		margin: 1.25em auto;
		font-size: 1.333em;
	}
	.sec6 > div {
		margin-top: 2.222em;
		width: 24.444em;
	}
	.sec6 > div > img {
		width: 11.722em;
	}
	.sec7 {
		padding-bottom: 1.389em;
	}
	.dr {
		padding: 0 4.444em 0 3.889em;
	}
	.name > img {
		width: 7.7778em;
	}
	.name h3 {
		padding-bottom: 3.96em;
		padding-left: .8em;
		font-size: 1.333em;
	}
	.recommend {
		margin-top: -4.778em;
		margin-left: calc(100% - 37.6em);
		padding: .4em 1.333em .4em 3.611em;
		width: 37.6111em;
		line-height: 1.56;
	}
	.sec8 {
		padding: 5.556em 5.778em 3.778em;
	}
	.sec8 > img {
		right: 5.778em;
		width: 11.333em;
	}
	.qa {
		padding: 0 5.555em;
	}
	.qa li {
		padding-left: .889em;
	}
	.qa li > div:first-of-type {
		padding: 0 2.75em 0 1.5em;
		height: 3em;
		font-size: 1.333em;
		line-height: 1.25;
		border-radius: .75em;
	}
	.qa li > div:first-of-type::before {
		top: calc(50% - 1em);
		left: -0.833em;
		width: 2em;
		height: 2em;
	}
	.qa li > div:first-of-type::after {
		right: .75em;
	}
	.qa li > div:last-of-type {
		font-size: 1em;
	}
	.notice {
		font-size: 16px;
	}
/*****************
*** 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: 22.5px;
	}
	footer {
		font-size: 25px;
	}
}
@media only screen and (min-width: 1440px) {
	.float-btn {
		right: calc(50vw - 640px - 2em);
	}
}

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