@charset "utf-8";



/* p-top-main
====================================================================== */
.p-top-main {
	position: relative;
	height: 85.5rem;
	padding-top: 9rem;
	.lead {
		position: absolute;
		top: 22rem;
		left: calc(50% - 44.5rem);
		font-size: 4.8rem;
		line-height: calc(110 / 48);
		font-weight: 700;
		z-index: 3;
	}
	.main-svg {
		position: relative;
		display: block;
		width: 94rem;
		margin-inline: auto;
	}
	.illust {
		position: absolute;
		z-index: -1;
		&.-illust1 {
			width: 40rem;
			top: 6rem;
			right: calc(50% + 23rem);
		}
		&.-illust2 {
			width: 36rem;
			top: 50rem;
			right: calc(50% + 29rem);
		}
		&.-illust3 {
			width: 33.5rem;
			top: -3.2rem;
			left: calc(50% + 36.7rem);
		}
		&.-illust4 {
			width: 45rem;
			top: 59rem;
			left: calc(50% + 19rem);
		}
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		height: 58.6rem;
		padding-top: 14rem;
		.lead {
			top: 9rem;
			left: 2rem;
			font-size: 3rem;
			line-height: calc(82 / 30);
		}
		.main-svg {
			width: 42rem;
			margin: 0;
			left: calc(50% - 42rem / 2);
		}
		.illust {
			img {
				transform: scale(.64348);
			}
			&.-illust1 {
				top: -2.8rem;
				right: 13rem;
			}
			&.-illust2 {
				top: 27rem;
				right: 13.8rem;
			}
			&.-illust3 {
				top: -14.2rem;
				left: 18.5rem;
			}
			&.-illust4 {
				top: 30rem;
				left: 9rem;
			}
		}
	}
}


/* p-top-pickup
====================================================================== */
.p-top-pickup {
	position: absolute;
	bottom: 0;
	width: 40rem;
	background: var(--color-peach) url(../img/index/pickup-bg.png) repeat-y;
	background-size: 100% 100%;
	border-radius: 2.2rem;
	z-index: 3;
	&::before {
		content: "";
		position: absolute;
		top: -2.5rem;
		left: -2.4rem;
		width: 5.7rem;
		height: 5.5rem;
		background: url(../img/index/pickup-point.png) no-repeat 50%;
		background-size: 100%;
		z-index: 2;
	}
	a {
		position: relative;
		display: flex;
		align-items: center;
		align-content: flex-start;
		flex-wrap: wrap;
		height: 10rem;
		text-decoration: none;
		padding: 1.5rem 5rem 0 4.5rem;
		font-size: 1.7rem;
		line-height: 1;
		font-feature-settings: "palt";
		h2 {
			margin-right: 2.5rem;
			font-size: 1.9rem;
			color: #fff;
		}
		time {
			font-size: 1.7rem;
			color: #fff;
			font-weight: 500;
		}
		.title {
			width: 100%;
			margin-top: 1.5rem;
			font-size: 1.7rem;
			font-weight: 500;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.u-link-arrow {
			right: 2.5rem;
			top: 2rem;
		}
		@media (hover) {
			&:hover {
				color: #fff;
				.u-link-arrow {
					background-color: #fff;
					color: var(--color-peach);
				}
			}
		}
	}
	@media screen and (min-width: 744px), print {
		left: calc(50% - 53rem);
	}
	@media screen and (max-width: 743px) {
		width: auto;
		left: var(--sp-base-padding);
		right: var(--sp-base-padding);
		border-radius: 2.2rem;
		&::before {
			transform: scale(.85);
		}
		a {
			height: 8.2rem;
			padding: 1.2rem 4rem 0 3.8rem;
			font-size: 1.7rem;
			line-height: 1;
			font-feature-settings: "palt";
			h2 {
				margin-right: 2rem;
				font-size: 1.6rem;
			}
			time {
				font-size: 1.4rem;
			}
			.title {
				margin-top: 1.5rem;
				font-size: 1.4rem;
			}
			.u-link-arrow {
				right: 2rem;
				top: 2rem;
			}
		}
	}
}


/* p-top-about
====================================================================== */
.p-top-about {
	position: relative;
	padding-top: 25rem;
	.u-svg-text {
		top: 3.6rem;
		left: calc(50% - 72rem);
		width: 126rem;
		z-index: 3;
	}
	.about-contents {
		position: relative;
		max-width: 84rem;
		margin-inline: auto;
		z-index: 3;
		h1 {
			margin-bottom: 5rem;
			font-size: 3rem;
			line-height: 1.5;
		}
		.phs {
			.ph {
				border-radius: 2rem;
				overflow: hidden;
				box-shadow: 0 .8rem 1.6rem rgba(228,156,133,.3);
				&.-ph1 {
					width: 26rem;
				}
				&.-ph2 {
					width: 34rem;
				}
			}
		}
	}
	.point {
		position: absolute;
		pointer-events: none;
		user-select: none;
		z-index: -1;
		&.-point1 {
			width: 23.7rem;
			bottom: 13rem;
			right: calc(50% - 7rem);
		}
		&.-point2 {
			width: 13.6rem;
			top: 32.5rem;
			left: calc(50% + 28rem);
		}
		&.-point3 {
			width: 10.3rem;
			top: 37.6rem;
			left: calc(50% + 40rem);
		}
	}
	@media screen and (min-width: 744px), print {
		.about-contents {
			.phs {
				position: relative;
				margin-top: 6rem;
				margin-bottom: 12.6rem;
				height: 24.4rem;
				.ph {
					position: absolute;
					&.-ph1 {
						left: 6.5rem;
						top: 5.8rem;
					}
					&.-ph2 {
						right: 6rem;
						top: 0;
					}
				}
			}
			.more {
				width: fit-content;
				margin-left: auto;
				margin-right: 2rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		padding-top: 12rem;
		padding-inline: var(--sp-base-padding);
		.u-svg-text {
			top: 3.6rem;
			left: -8rem;
			width: 49rem;
			.eng-path-text {
				font-size: 76px;
			}
		}
		.about-contents {
			h1 {
				margin-bottom: 3rem;
				font-size: 2.2rem;
				line-height: calc(57 / 22);
				white-space: nowrap;
				font-feature-settings: "palt";
			}
			.phs {
				position: relative;
				margin-top: 6rem;
				margin-bottom: 8rem;
				.ph {
					margin-bottom: 5rem;
				}
			}
		}
		.point {
			&.-point1 {
				width: 20.8rem;
				bottom: 33.5rem;
				right: 4.5rem;
			}
			&.-point2 {
				width: 11.4rem;
				top: 57rem;
				left: calc(50% + 0rem);
			}
			&.-point3 {
				width: 8.6rem;
				top: 61.5rem;
				left: calc(50% + 9.6rem);
			}
		}
	}
}

/* p-top-info
====================================================================== */
.p-top-info {
	position: relative;
	margin-top: 18rem;
	position: relative;
	background-color: #fff;
	border-radius: 20rem 0 0 6rem;
	padding: 3rem 0 9rem 11rem;
	.u-svg-text {
		top: -8rem;
		left: -8rem;
		width: 106rem;
		z-index: 2;
	}
	h2 {
		margin-bottom: 3rem;
		margin-left: 2.5rem;
		font-size: 3rem;
		line-height: 1.5;
	}
	.info-list {
		a {
			display: flex;
			flex-direction: column;
			height: 100%;
			text-decoration: none;
			--a-color: var(--color-theme);
			.ph {
				overflow: hidden;
				margin-bottom: 3rem;
				aspect-ratio: 560 / 400;
				border-radius: 1.8rem;
				&.-noimage {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #ddd;
					img {
						width: 50%;
					}
				}
			}
			h3 {
				margin-bottom: 4rem;
				font-size: 1.7rem;
				font-weight: var(--font-weight);
				line-height: calc(29 / 17);
			}
			.meta {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: .6rem;
				margin-top: auto;
				time {
					font-size: 1.7rem;
					line-height: 1.5;
					font-weight: 400;
					letter-spacing: 0;
				}
				.category {
					margin-left: auto;
					padding: 0.2em 1.5em;
					border: 1px solid;
					border-radius: 10rem;
					font-size: 1.5rem;
					line-height: 1.5;
				}
			}
		}
	}
	.more {
		position: absolute;
		top: 4rem;
		right: 3rem;
	}
	@media screen and (min-width: 744px), print {
		max-width: var(--base-width);
		margin-inline: auto;
		&::before {
			content: "";
			position: absolute;
			inset: 0 auto 0 50%;
			background-color: #fff;
			width: 200%;
			z-index: -1;
		}
		.info-list-wrapper {
			display: flex;
			gap: 6rem;
			article {
				width: 28rem;
				height: auto;
			}
			a {
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 16rem;
		padding: 9rem 0 11rem;
		.u-svg-text {
			.eng-path-text {
				font-size: 35px;
			}
		}
		h2 {
			margin-bottom: 5.5rem;
			margin-left: 5.5rem;
			font-size: 2.2rem;
		}
		.info-list {
			width: calc(28rem + 1.6rem * 2);
			overflow: visible;
			article {
				height: auto;
				padding-inline: 1.6rem;
			}
		}
		.more {
			top: 9.6rem;
			right: 1.5rem;
		}
	}
}


/* p-top-medical
====================================================================== */
.p-top-medical {
	position: relative;
	margin-top: 15rem;
	.img {
		position: relative;
		pointer-events: none;
		user-select: none;
	}
	.u-svg-text {
		top: -9.4rem;
		left: -9.4rem;
		width: 72.4rem;
	}
	h2 {
		margin-bottom: 6rem;
		font-size: 3.4rem;
		line-height: 1.5;
	}
	.more {
		margin-top: 7rem;
	}
	@media screen and (min-width: 744px), print {
		max-width: 104rem;
		margin-inline: auto;
		.img {
			position: absolute;
			top: 4rem;
			left: -1rem;
			width: 53.6rem;
		}
		h2 {
			margin-left: 43rem;
		}
		.text-contents {
			margin-left: 56.5rem;
		}
		.more {
			margin-left: 59rem;
		}
	}
	@media screen and (max-width: 743px) {
		.img {
			left: 1rem;
			width: 34rem;
			margin-inline: auto;
			margin-bottom: 6rem;
		}
		.u-svg-text {
			--width: calc((34 / 53.6) * 72.4rem);
			top: calc(50% - var(--width) / 2);
			left: calc(50% - var(--width) / 2);
			width: var(--width);
		}
		h2 {
			margin-bottom: 5rem;
			font-size: 2.2rem;
			text-align: center;
		}
		.text-contents {
			padding-inline: var(--sp-base-padding);
			font-size: 1.7rem;
			line-height: calc(39 / 17);
		}
	}
}


/* p-top-doctor
====================================================================== */
.p-top-doctor {
	margin-top: 28rem;
	@media screen and (max-width: 743px) {
		margin-top: 22rem;
	}
}


/* p-top-reserve
====================================================================== */
.p-top-reserve {
	position: relative;
	margin-top: 19rem;
	margin-bottom: 9rem;
	h2 {
		margin-bottom: 8rem;
		font-size: 3rem;
		line-height: 1.5;
		text-align: center;
	}
	.reserve-contents {
		position: relative;
		max-width: var(--base-width);
		margin-inline: auto;
		padding: 8rem 31rem 6.5rem 15rem;
		background-color: #fff;
		border-radius: 20rem 6rem;
		z-index: 2;
		strong {
			color: var(--color-theme);
			&.-l {
				font-size: 110%;
				text-decoration: underline;
			}
		}
		.btn {
			margin-top: 3rem;
		}
		.img {
			position: relative;
			overflow: hidden;
			pointer-events: none;
			p {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 28rem;
			}
		}
	}
	.more {
		margin-top: 6rem;
	}
	@media screen and (min-width: 744px), print {
		.reserve-contents {
			.img {
				position: absolute;
				inset: 0;
				border-radius: 20rem 6rem;
			}
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 17rem;
		margin-bottom: 12rem;
		h2 {
			margin-bottom: 6rem;
			font-size: 2.2rem;
		}
		.reserve-contents {
			padding: 6rem 3rem 0;
			border-radius: 6rem 6rem 16rem 6rem;
			.btn {
				margin-top: 3rem;
			}
			.img {
				height: 43rem;
				margin-inline: -3rem;
				border-radius: 0 0 16rem 6rem;
				p {
					width: 23rem;
				}
			}
		}
		.more {
			margin-top: 6rem;
		}
	}
}



/* mov
====================================================================== */
@media screen {
	.l-main {
		transition: none;
	}
	.p-top-main {
		.lead {
			opacity: 0;
			pointer-events: none;
			span {
				display: inline-block;
				opacity: 0;
				transform: translateY(2rem);
			}
		}
		.p-top-pickup {
			opacity: 0;
			pointer-events: none;
			transform: translateY(4rem);
		}
		.main-svg {
			opacity: 0;
			pointer-events: none;
			transform: scale(.2);
		}
		.illust {
			opacity: 0;
			pointer-events: none;
			&.-illust1 {
				transform: translate(20rem, 10rem);
			}
			&.-illust2 {
				transform: translate(20rem, -10rem);
			}
			&.-illust3 {
				transform: translate(-20rem, 10rem);
			}
			&.-illust4 {
				transform: translate(-20rem, -10rem);
			}
			@media screen and (max-width: 743px) {
				&.-illust1 {
					transform: translate(10rem, 5rem);
				}
				&.-illust2 {
					transform: translate(10rem, -5rem);
				}
				&.-illust3 {
					transform: translate(-10rem, 5rem);
				}
				&.-illust4 {
					transform: translate(-10rem, -5rem);
				}
			}
		}
	}
	body.is-loaded {
		.p-top-main {
			.lead {
				opacity: 1;
				pointer-events: auto;
				span {
					opacity: 1;
					transform: translateY(0);
					transition: opacity .5s linear, transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
				}
			}
			.p-top-pickup {
				opacity: 1;
				pointer-events: auto;
				transform: translateY(0);
				transition: opacity .6s 2s linear, transform .6s 2s cubic-bezier(0.34, 1.56, 0.64, 1);
			}
			.illust {
				opacity: 1;
				pointer-events: auto;
				transform: translate(0, 0) !important;
				transition: opacity .5s .2s linear, transform .8s .2s cubic-bezier(0.34, 1.56, 0.64, 1);
				&.-illust1 {
					transition-delay: .2s;
				}
				&.-illust2 {
					transition-delay: .25s;
				}
				&.-illust3 {
					transition-delay: .3s;
				}
				&.-illust4 {
					transition-delay: .35s;
				}
			}
			.main-svg {
				opacity: 1;
				pointer-events: auto;
				transform: scale(1) ;
				transition: opacity .5s .5s linear, transform .8s .5s cubic-bezier(0.34, 1.56, 0.64, 1);
			}
		}
	}


	._mov_fadein {
		opacity: 0;
	}
	._mov_fadein._mov_showed {
		transition: opacity 1s linear;
		opacity: 1;
	}

	._mov_fadeup {
		opacity: 0;
		transform: translateY(6rem);
	}
	._mov_fadeup._mov_showed,
	._mov_showed ._mov_fadeup {
		transition: transform .5s cubic-bezier(0.5, 1, 0.89, 1), opacity .3s linear;
		opacity: 1;
		transform: translateY(0);
	}

	._mov_fadeup_b {
		opacity: 0;
		transform: translateY(5rem);
	}
	._mov_fadeup_b._mov_showed {
		transition: transform .7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .7s linear;
		opacity: 1;
		transform: translateY(0);
	}

	._mov_fadeleft {
		opacity: 0;
		transform: translateX(-3rem);
	}
	._mov_fadeleft._mov_showed {
		transition: transform .6s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
		opacity: 1;
		transform: translateX(0);
	}

	._mov_faderight {
		opacity: 0;
		transform: translateX(3rem);
	}
	._mov_faderight._mov_showed {
		transition: transform .6s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
		opacity: 1;
		transform: translateX(0);
	}

	._mov_zoomin {
		opacity: 0;
		transform: scale(.2);
	}
	._mov_zoomin.-zomms {
		transform: scale(.6);
	}
	._mov_zoomin._mov_showed {
		transition: transform .6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .6s linear;
		opacity: 1;
		transform: scale(1);
	}

	._mov_zoomout {
		opacity: 0;
		transform: scale(3);
		display: inline-block;
	}
	._mov_zoomout._mov_showed {
		transition: transform .6s cubic-bezier(0.5, 1, 0.89, 1), opacity .6s linear;
		opacity: 1;
		transform: scale(1);
	}

	._mov_delay1 {
		transition-delay: .2s !important;
	}
	._mov_delay2 {
		transition-delay: .4s !important;
	}
	._mov_delay3 {
		transition-delay: .6s !important;
	}
	._mov_delay4 {
		transition-delay: .8s !important;
	}
	._mov_delay5 {
		transition-delay: 1s !important;
	}
	._mov_delay6 {
		transition-delay: .2s !important;
	}
	._mov_delay1s {
		transition-delay: .1s !important;
	}
	._mov_delay2s {
		transition-delay: .2s !important;
	}
	._mov_delay3s {
		transition-delay: .3s !important;
	}
	._mov_delay4s {
		transition-delay: .4s !important;
	}
	._mov_delay5s {
		transition-delay: .5s !important;
	}
	._mov_delay6s {
		transition-delay: .6s !important;
	}

	:where(._mov_fadeup:not(._mov_showed)[id]:not(style):not(script)),
	:where(._mov_fadeup:not(._mov_showed) [id]:not(style):not(script)) {
		scroll-margin-top: calc(var(--target-margin) + 6rem);
	}
}