@charset "utf-8";
/* CSS Document */
:root {
	--color-blue: #006894;
	--color-blue2: #88DCFF;
	--color-blue-light: #E1F6FF;
	--color-blue-light2: #BFECFF;
	--pc_inner_width: clamp(21.875rem, 6.21rem + 67.74vw, 87.5rem);
}
* {
	font-family: hiragino-mincho-pron, sans-serif!important;
	font-size: clamp(1rem, 0.926rem + 0.37vw, 1.25rem);
	font-optical-sizing: auto!important;
	font-style: normal!important;
	color: var(--color-blue);
	line-break: strict!important;
	word-break: normal!important;
}
body {
	position: relative;
	background-image: linear-gradient(90deg, rgba(225, 246, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(225, 246, 255, 1) 100%);
	width: 100%;
	z-index: -999;
}
h1, h2, h3 {
	color: var(--color-blue);
}
a {
	color: inherit;
}
a:hover {
	text-decoration: none;
	color: inherit;
}

.uk-heading-divider {
	border-bottom: calc(.2px + .05em) solid var(--color-blue);
}
.uk-accordion-title {
	font-size: inherit;
}
.fadeup-trigger {
	opacity: 0;
}
.fadeup {
	-webkit-animation: fadeUpAnime .5s forwards;
	-o-animation: fadeUpAnime .5s forwards;
	animation: fadeUpAnime .5s forwards;
	opacity: 0;
}
@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#top {
	height: 100vh;
	background: url(./../img/top_bg.png) center bottom / cover;
}
.wrap-top-logo {
	padding: 10px 0;	
}
.top-logo {
	width: var(--pc_inner_width);
	margin: 0 auto;
}
.top-logo h1 {	
	color: #fff;
	font-weight: 600;
	margin: 0;
}
.blur{
	animation-name: blurAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes blurAnime{
	from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}
	
	to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}
.blurTrigger{
	opacity: 0;
}
.scale-up {
	transform: scale(0.5);
	opacity: 0;
	transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.wrap-top-img {
	position: relative;
	width: 100%;
	height: 70vh;
}
.wrap-top-img::before {
	content: "";
	position: absolute;	
	width: 100%;
	height: 100%;
	background: url("../img/top_img.png") center / cover;
	clip-path: url(#top-clip-path);
}
.top-title {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: 60%;
	margin-top: 10%;
	margin-left: auto;
}
.top-title h2 {
	font-size: clamp(1.5rem, 0.304rem + 3.48vw, 4rem);
	text-shadow: 5px 0 5px #fff, -5px 0 5px #fff, 0 -5px 5px #fff, 0 5px 5px #fff;
	text-align: right;
}
.top-img-amount {
	display: flex;
	flex-wrap: wrap;
	padding-right: 30px;
}
.top-img-amount dt {
	text-align: right;
	width: 80%;
	font-size: clamp(1rem, 0.768rem + 1.16vw, 2rem);
	font-weight: 300;
	text-shadow: 5px 0 5px #fff, -5px 0 5px #fff, 0 -5px 5px #fff, 0 5px 5px #fff;
}
.top-img-amount dd {
	width: calc(20% - 10px);
	padding-left: 10px;
	font-size: clamp(1rem, 0.768rem + 1.16vw, 2rem);
	text-shadow: 5px 0 5px #fff, -5px 0 5px #fff, 0 -5px 5px #fff, 0 5px 5px #fff;
	text-align: right;
}
@media screen and (max-width: 1350px) {
	.top-img-amount dt {
		width: 75%;
	}
	.top-img-amount dd {
		width: calc(25% - 10px);
	}
}
.wrap-link-btn {
	width: var(--pc_inner_width);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}
.link-btn {
	width: calc(100% / 3 - 40px);
	background: url("./../img/btn_bg.png") center / cover;	
	border: 2px solid #fff;
	border-radius: 999px;
	text-align: center;
	transition: all .3s ease-in;
}
.link-btn:nth-child(n+4) {
	margin-top: 10px;
}
.link-btn a {
	display: inline-block;	
	transition: all .3s ease-in-out;
	padding: 15px;
	width: calc(100% - 30px);
}
.link-btn button {
	display: inline-block;	
	transition: all .3s ease-in-out;
	padding: 15px;
	width: calc(100% - 30px);
	background: none;
	border: none;
	cursor: pointer;
}
.link-btn button:hover {
	font-weight: bold;
	text-shadow: 1px 1px 3px #fff;
}
.link-btn:hover {
	background: url("./../img/btn_bg.png") bottom / cover;
	box-shadow: 2px 2px 7px 1px #fff;
}
.wrap-treatment-details {
	width: var(--pc_inner_width);
	margin: 0 auto;
}
main {
	position: relative;
	padding-top: 200px;
	width: 100%;
	height: 100%;
}
main h1 {
	position: relative;
	z-index: 1;
	text-shadow: 2px 2px 5px var(--color-blue);
	font-size: clamp(2rem, 1.536rem + 2.32vw, 4rem);
}
main h1::before {
	content: "english title";
	position: absolute;
	width: 100%;
	color: #BFECFF;
	top: 25px;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	text-shadow: none;
} 
main #treatment-details h1::before {
	content: "Treatment details"
}
main #case-list h1::before {
	content: "case";
}
main #flow-of-treatment h1::before {
	content: "flow of treatment";
}
main #about-fees h1::before {
	content: "about fees"
}
main #precautions h1::before {
	content: "precautions";
}
main #question h1::before {
	content: "Q & A"
}
.wrap-decoration {
	position: absolute;
	width: 100%;
	height: 100%;
	top: -200px;
	overflow: hidden;
	z-index: -990;
}
.bg-decoration {
	position: absolute;
	background: url("../img/sparkling-2.png") center / contain repeat;
	width: 30%;
	height: 150%;	
	opacity: .3;
	top: -45vh;
	z-index: -990;
}
.bg-decoration.right {
	top: -20vh;
	right: 0;
}
.bg-decoration.dark {
	background: url("../img/sparkling.png") center / contain repeat;
	width: 20%;
	opacity: .5;
	top: 5vh;
}
.reservation-title {
	width: 50px;
	background: url("../img/reservation-bg.png") left / cover;
	border: 2px solid #fff;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.reservation-title h1 {
	font-size: 1.7rem;
	padding: 11px;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 0 10px #FF2374;
}
.wrap-reservation-form {
	position: fixed;
	display: flex;
	top: 50%;
	transform: translateY(-50%);
	right: -652px;
	z-index: 999;
	box-shadow: 5px 5px 10px 1px #0000007d;
	opacity: 0;
}
.reservation-form {
	width: 550px;
	background: url("../img/reservation-bg.png") center / cover;
	padding: 30px 50px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
.reservation-form h2 {
	font-size: 1.7rem;
	text-align: center;
	font-weight: bold;
}
#mobile-reservation {
	width: 100px;
    height: 100px;
    position: fixed;
    bottom: 5vh;
    right: 2vw;
    z-index: 999;
	opacity: 0;
}
#mobile-reservation a > div {
	position: relative;
}
.wrap-reservation-circle {	
	width: 100px;
	height: auto;
	overflow: visible;
}
.wrap-reservation-circle-text {
	position: absolute;
	overflow: visible;
	width: 85%;
	height: auto;
	top: -2px;
	left: -78px;
	transform: rotate(185deg);
}
.reservation-circle-text {
	fill: #fff;
	letter-spacing: 3px;
}
.reservation-img {
	position: absolute;
	width: 40px;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 35px auto;
	animation: upDown 3s ease-in-out infinite;
}
@keyframes upDown {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}
.qr-code img {
	width: 150px;
	height: auto;
}
.about-pmu {
	max-width: 1200px;
	margin: 50px auto 0;
	font-size: clamp(1.2rem, 0.909rem + 1.45vw, 2rem);
}
.pmu-explanation {
	position: relative;
	z-index: 1;
}
.pmu-explanation p {
	position: relative;
	z-index: 1;
	margin: 70px auto 0;
	padding: 30px 100px;
	background: var(--color-blue-light);
	box-shadow: 5px 5px 20px #0000004d;	
}
.pmu-explanation::before,
.pmu-explanation::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.pmu-explanation::before {
	background: var(--color-blue2);
	top: -20px;
	left: -20px;	
}
.pmu-explanation::after {
	background: var(--color-blue-light2);
	top: 20px;
	left: 20px;
}
.worries {
	width: clamp(9.375rem, 7.955rem + 7.1vw, 11.5rem);
	height: clamp(9.375rem, 7.955rem + 7.1vw, 11.5rem);
	border-radius: 50%;
	background: url("./../img/deco-blue.jpg") center / cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;	
}
.worries:nth-child(odd) {
	animation: upAndDown 5s ease-in-out infinite;
}
@keyframes upAndDown {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(70px)
	}
	100% {
		transform: translateY(0);
	}
}
.worries:nth-child(even) {
	margin-top: 70px;
	animation: upAndDown2 5s ease-in-out infinite;
}
@keyframes upAndDown2 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-70px)
	}
	100% {
		transform: translateY(0);
	}
}
.worries p {
	color: #fff;
	text-align: center;
	text-shadow: 2px 2px 5px #0000004d;
}
.wrap-worries {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 70px;
}
.wrap-kinds {
	background: var(--color-blue-light2);
	border-radius: 100px;
	margin-top: 150px;
}
.kinds-contents {
	width: var(--pc_inner_width);
	margin: 30px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.kinds-contents div {
	background: #fff;
	padding: 25px;
	box-shadow: 5px 5px 20px #0000004d;
	width: calc(100% / 3 - 100px);
}
.wrap-staff {
	width: var(--pc_inner_width);
	margin: 150px auto 0;
	position: relative;
}
.staff-bg {
	background: url("../img/staff-bg.jpg") center / cover;
	padding: 150px 100px;
}
.staff {
	background: #ffffffbf;
	padding: 50px 100px;
	border-radius: 30px;
}
.staff p {
	font-size: 1.5rem;
}
#case-list,
#flow-of-treatment,
#about-fees,
#precautions,
#question {
	margin-top: 200px;
}
.wrap-case-img {
	background: var(--color-blue-light2);
}
.wrap-case-img > div {
	width:  var(--pc_inner_width);
	margin: 0 auto;
	padding-bottom: 70px;
}
.mix-case-img,
.powder-case-img {
	display: flex;
	justify-content: space-around;
}
.mix-case-img div,
.powder-case-img div {
	width: calc(100% / 2 - 10px);
	max-width: 400px;
	height: auto;
}
.side-effects {
	position: relative;
	background: #fff;
	padding: 50px 100px;
	margin-top: 100px;
}
.side-effects::before {
	content: "";
	position: absolute;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	border: 2px solid var(--color-blue);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.demerit {
	margin-top: 50px;
}
.demerit-title {
	background: url("../img/deco-blue.jpg") center / cover;
	padding: 80px;
	width: 30%;
	max-width: 250px;
	box-shadow: 5px 5px 20px #0000004d;
	position: relative;
	z-index: 1;
}
.demerit-title h3 {
	color: #fff;
}
.demerit-list {
	padding: 20px 10px 20px 80px;
	width: 70%;
	margin-left: auto;
	margin-top: -150px;
	position: relative;
}
.demerit-list ul {
	margin: 0 0 0 90px;
}
@media screen and (max-width: 1400px) {
	.demerit-list ul {
		margin: 0 0 0 145px;
	}
}
@media screen and (max-width: 1200px) {
	.demerit-list ul {
		margin: 0 0 0 160px;
	}
}
.demerit-list::before,
.demerit-list::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border: 2px solid var(--color-blue);
	z-index: 0;
}
.demerit-list::before {
	top: -10px;
	left: -10px;
}
.demerit-list::after {
	top: 10px;
	left: 10px;
}
.wrap-flow-of-treatment {
	width: var(--pc_inner_width);
	margin: 0 auto;
}
.wrap-flow-img {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 100px;
	align-items: center;
	position: relative;
}
.wrap-flow-img::before {
	content: "";
	position: absolute;
	width: 80%;
	height: 30px;
	background: var(--color-blue2);
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}
.wrap-flow-img.first-row::after,
.wrap-flow-img.second-row::after {
	content: "";
	position: absolute;
	width: 30px;
	height: 427px;
	background: var(--color-blue2);
	top: calc(50% - 15px);	
	z-index: -1;
}
.wrap-flow-img.first-row::after {
	right: 9.5%;
}
.wrap-flow-img.second-row::after {
	left: 9.5%;
}
.flow-img {
	position: relative;
	background: #ffffffbf;
	padding: 90px 10px 15px;
	width: 20%;
	box-shadow: 5px 5px 20px #0000004d;
	display: flex;
	flex-direction: column;
}
.flow-img div:first-child {
	width: 150px;
	height: auto;
	margin: 0 auto;
}
.flow-img::before {
	content: "no.";
	position: absolute;
	background: url(./../img/deco-blue.jpg) center / cover;
	color: #fff;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	border-radius: 50%;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
}
.flow-img.flow-01::before {
	content: "1";
}
.flow-img.flow-02::before {
	content: "2";
}
.flow-img.flow-03::before {
	content: "3";
}
.flow-img.flow-04::before {
	content: "4";
}
.flow-img.flow-05::before {
	content: "5";
}
.flow-img.flow-06::before {
	content: "6";
}
.flow-img.flow-07::before {
	content: "7";
}
.flow-img.flow-08::before {
	content: "8";
}
.flow-img.flow-09::before {
	content: "9";
}
.flow-img.flow-03,
.flow-img.flow-06{
	position: relative;
}
.flow-img.flow-03::after,
.flow-img.flow-06::after {
	content: "";
	position: absolute;
	background-color: #006894c7;
	width: 150px;
	height: 50px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	bottom: -80px;
	left: calc(50% - 75px);
	animation: moveDown 2.5s ease-in-out infinite;
}
@keyframes moveDown {
	0% {
		transform: translateY(-10px);
		opacity: 0;
	}
	10% {
		transform: translateY(-10px);
		opacity: 1;
	}
	90% {
		transform: translateY(10px);
		opacity: 1;
	}
	100% {
		transform: translateY(10px);
		opacity: 0;
	}
}
.wrap-triangle {
	filter: drop-shadow(0 0 10px #fff);
}
.triangle {
	display: block;
	position: relative;
	background-color: #006894c7;
	width: 50px;
	height: 150px;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
	animation: moveRight 2.5s ease-in-out infinite;
}
@keyframes moveRight {
	0% {
		transform: translateX(-10px);
		opacity: 0;
	}
	10% {
		transform: translateX(-10px);
		opacity: 1;
	}
	90% {
		transform: translateX(10px);
		opacity: 1;
	}
	100% {
		transform: translateX(10px);
		opacity: 0;
	}
}
.triangle-l {
	background-color: #006894c7;
	width: 50px;
	height: 150px;
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
	animation: moveleft 2.5s ease-in-out infinite;
}
@keyframes moveleft {
	0% {
		transform: translateX(10px);
		opacity: 0;
	}
	10% {
		transform: translateX(10px);
		opacity: 1;
	}
	90% {
		transform: translateX(-10px);
		opacity: 1;
	}
	100% {
		transform: translateX(-10px);
		opacity: 0;
	}
}
.wrap-fee-list,
.wrap-precautions,
.wrap-question,
.modified {
	width: var(--pc_inner_width);
	margin: 0 auto;
}
.fee-list caption {
	caption-side: bottom;
	text-align: right;
	font-size: 1rem;
	text-shadow: 3px 0px 3px #fff, -3px 0px 3px #fff, 0 3px 3px #fff, 0 -3px 3px #fff;
}
.fee-list {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;	
}
.fee-list th {
	background: url("./../img/deco-blue.jpg") center / cover;
	color: #fff;
	font-weight: bold;
	border: 1px solid var(--color-blue);
	width: 30%;
}
.fee-list td {
	border: 1px solid var(--color-blue);
	text-align: center;
	text-shadow: 3px 0px 3px #fff, -3px 0px 3px #fff, 0 3px 3px #fff, 0 -3px 3px #fff;
	background: #ffffff70;
}
.fee-list td:first-child {
	width: 55%;
}
.fee-list.mobile td {
	width: calc(100% / 3);
	padding: 5px;
}
.wrap-fee-list p {
	color: #fff;
	text-align: center;
	font-weight: bold;
	padding: 5px;
	background: url("../img/deco-blue.jpg") center / cover;
	border-radius: 999px;
	margin-top: 30px;
}
.precautions-list {
	background: var(--color-blue-light);
	padding: 50px 100px;
	box-shadow: 5px 5px 20px #0000004d;	
}
.question-list li a {
	background: url("./../img/deco-blue.jpg") center / cover;
	color: #fff;
	padding: 15px 120px;
}
.question-list li a:hover {
	color: #fff;
	font-weight: bold;
}
.uk-accordion-title::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20version=%221.1%22%20viewBox=%220%200%2013%2013%22%3E%3Crect%20y=%226%22%20width=%2213%22%20height=%221%22%20fill=%22%23fff%22/%3E%3Crect%20x=%226%22%20width=%221%22%20height=%2213%22%20fill=%22%23fff%22/%3E%3C/svg%3E");
}
.uk-open>.uk-accordion-title::before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEzIDEzIj4KICA8cmVjdCB5PSI2IiB3aWR0aD0iMTMiIGhlaWdodD0iMSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}
.question-list li div {
	background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(191, 236, 255, 1) 100%);	
}
.question-list li div p {
	padding: 50px 120px;
}
.modified p {
	text-align: right;
}
footer {
	position: relative;
}
footer .clip-svg {
	position: absolute;
	top: 0;
	left: 0;
}
footer::before {
	content: "";
	position: absolute;
	background: url("./../img/bg.jpg") center / cover;
	width: 100%;
	height: 100%;
	clip-path: url(#footer-clip-path);
	bottom: 0;
	z-index: -900;
}
.footer-contents {
	padding: 100px 0 15px 0;
	width: var(--pc_inner_width);
	margin: 0 auto;
}
.footer-contents h2,
.footer-contents h2 span {
	color: #fff;
}
.wrap-footer-contents {
	padding: 40px 100px;
	backdrop-filter : blur(20px);
	background: #ffffff4d;
	border-radius: 50px;
}
.hospital-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.address {
	width: 50%;
}
.address p {
	color: #fff;
	text-align: left;
}
.address p:first-child {
	font-size: 1.5rem;
	font-weight: bold;
}
.medical-hours {
	background: #ffffffdb;
	border-radius: 30px;
	padding: 20px;
	width: calc(50% - 40px);
	max-width: 400px;
}
#reservation .medical-hours {
	width: calc(100% - 80px);
}
.medical-hours > div {
	display: flex;
	justify-content: center;
}
.week {
	padding: 15px 25px;
	background: url("../img/deco-blue.jpg") center / cover;
	border-radius: 999px;
}
.week p {
	color: #fff;
	margin: 0;
}
.copyright {
	color: #fff;
	margin-top: 15px;
}
#backtotop {
	position: fixed;
    bottom: 3em;
    right: 5vw;
	z-index: 985;
	opacity: 0;
}
.block {
	width: 80px;
	height: 80px;
	margin: auto;
}
.circleText {
	overflow: visible;
	animation: rotation 18s linear infinite;
}
.circleText__circle {
	fill: none;
}
.circleText__text {
	fill: var(--color-blue);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-shadow: 1px 1px 1px #fff;
}
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);}
}
.arrow{
	position: absolute;
    top: 25%;
    left: 50%;
}