@charset "utf-8";

/* p-top-main
====================================================================== */
@keyframes scrollAnim {
	0% {
		transform: translateY(-100%);
	}
	20%, 80% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100%);
	}
}
@keyframes jump {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	12% {
		transform: scale(1.04, .94);
	}
	28% {
		transform: translateY(-12px) scale(.98, 1.03);
	}
	42% {
		transform: translateY(0) scale(1);
	}
}
.p-top-main {
	position: relative;
	/* overflow: hidden; */
	margin-top: calc(var(--header-height) * -1);
	padding-block: calc(var(--header-height) + 3rem) 4rem;
	.illust {
		position: relative;
		overflow: hidden;
		border-radius: 3rem;
		background-color: #fff;
		* {
			pointer-events: none;
			user-select: none;
		}
		.inner-wrap {
			position: absolute;
			inset: 0;
		}
		.inner {
			position: absolute;
			top: 0;
			left: 0;
			width: 272rem;
			transform-origin: top left;
			will-change: transform;
		}
		.tree {
			position: absolute;
			inset: 0;
			z-index: 1;
			g {
				transform-box: fill-box;
				transform-origin: center bottom;
				&.is-squash {
					transform: scaleY(1.1);
				}
			}
		}
		.object {
			position: absolute;
			inset: 0;
			z-index: 3;
			g {
				transform-box: fill-box;
			}
		}
		.parts {
			& > * {
				position: absolute;
				z-index: 4;
				&.-parts1 {
					width: calc(134 * .1rem);
					top: calc(1420 * .1rem);
					left: calc(178 * .1rem);
				}
				&.-parts2 {
					width: calc(178 * .1rem);
					top: calc(1190 * .1rem);
					left: calc(638 * .1rem);
				}
				&.-parts3 {
					width: calc(150 * .1rem);
					top: calc(524 * .1rem);
					left: calc(1606 * .1rem);
				}
				&.-parts4 {
					width: calc(110 * .1rem);
					top: calc(1238 * .1rem);
					left: calc(2192 * .1rem);
					z-index: 2;
				}
			}
		}
		.anime-show {
			display: block;
			opacity: 0;
			transform: scale(.2);
			transform-origin: 50%;
			&.is-show {
				opacity: 1;
				transform: scale(1);
				transition: transform 0.4s cubic-bezier(0.22, 1.8, 0.36, 1), opacity .4s;
			}
		}
	}
	.lead {
		margin-block: auto;
	}
	.link {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		a {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 36rem;
			height: 11rem;
			margin-inline: auto;
			align-items: center;
			border-radius: 1rem;
			border: .3rem solid #fff;
			font-size: 1.4rem;
			line-height: 1.5;
			box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
			text-decoration: none;
			.arrow {
				position: absolute;
				right: 1rem;
				bottom: 1rem;
				width: 1.5rem;
				height: 1.5rem;
				background-color: #000;
				border-radius: 100%;
				&::before {
					content: "";
					position: absolute;
					inset: 0 0 0 .2rem;
					width: .5rem;
					height: .7rem;
					margin: auto;
					background-color: #fff;
					clip-path: polygon(0 0, 100% 50%, 0 100%);
				}
			}
			&.-diagnosis {
				background-color: #FF9D00;
				.title {
					color: #fff;
					font-size: 2.5rem;
				}
				.ico-check {
					position: absolute;
					top: -1.3rem;
					left: .7rem;
					width: 5.2rem;
				}
				&::before {
					content: "";
					position: absolute;
					top: 3.6rem;
					left: 1.6rem;
					width: 32rem;
					height: 5rem;
					background: url(../img/top/btn-diagnosis-ico.png) no-repeat 50%;
					background-size: 100%;
					pointer-events: none;
				}
			}
			&.-movie {
				padding-bottom: 1rem;
				background: url(../img/top/btn-movie-bg.png) no-repeat 50%;
				background-size: cover;
				color: #fff;
				.en {
					color: #fff;
					font-size: 2.8rem;
					font-weight: 500;
				}
			}
		}
	}
	.scroll {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 5rem;
		font-size: 1.2rem;
		line-height: 1;
		z-index: 10;
		.txt {
			position: absolute;
			left: 50%;
			bottom: calc(100% + 1rem);
			transform: translateX(-50%);
			-webkit-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
		}
		.line {
			overflow: hidden;
			position: relative;
			display: block;
			height: 3rem;
			width: 1px;
			margin-inline: auto;
			&::after {
				content: "";
				position: absolute;
				inset: 0;
				background-color: #000;
				animation: scrollAnim 1.5s ease-in-out infinite;
			}
		}
	}
	@media screen and (min-width: 744px), print {
		/* height: calc(100vh - var(--header-height));
		min-height: 77rem; */
		height: 100vh;
		min-height: calc(77rem + var(--header-height));
		display: flex;
		gap: 4rem;
		padding-inline: var(--pc-base-padding);
		.illust {
			/* width: calc(100% - (48rem + 4rem));
			max-width: 100rem; */
			flex-grow: 1;
			/* height: 74rem; */
		}
		.main {
			/* flex-grow: 1; */
			position: relative;
			width: 48rem;
			display: flex;
			flex-direction: column;
			justify-content: end;
			z-index: 3;
			.lead {
				position: relative;
				width: 33rem;
				margin-inline: auto;
			}
		}
		@media (orientation: portrait) {
			height: auto;
		}
	}
	@media screen and (max-width: 743px) {
		padding: calc(var(--header-height) + 1rem) 1rem 1rem;
		.illust {
			height: 28rem;
			border-radius: 2rem;
		}
		.main {
			position: relative;
			padding-top: 7rem;
			.lead {
				width: 22rem;
				margin-inline: auto;
				padding-left: 2.4rem;
				box-sizing: content-box;
			}
		}
		.link {
			a {
				width: 35rem;
				height: 8rem;
				border-width: 0.2rem;
				font-size: 1.3rem;
				line-height: 1.3;
				&.-diagnosis {
					.title {
						font-size: 2.2rem;
					}
					&::before {
						top: 2rem;
						left: 3.6rem;
						width: 28rem;
						height: 4.9rem;
						background-image: url(../img/top/btn-diagnosis-ico.png);
					}
					.ico-check {
						width: 4.2rem;
					}
				}
				&.-movie {
					font-size: 1.2rem;
					padding-bottom: 0;
					.en {
						font-size: 2.6rem;
					}
				}
			}
		}
		.scroll {
			display: none;
		}
	}

	.-ico1 {
		right: 5rem;
		top: calc(5.4rem + var(--header-height));
	}
	.-ico2 {
		right: 38rem;
		top: calc(6rem + var(--header-height));
	}
	.-ico3 {
		right: 5rem;
		bottom: 28rem;
	}
	.-ico4 {
		right: 11rem;
		bottom: 29rem;
	}
	@media screen and (max-width: 743px) {
		.-ico1,
		.-ico2 {
			display: none;
		}
		.-ico3 {
			right: 1rem;
			bottom: 16.5rem;
			transform: scale(.6);
		}
		.-ico4 {
			right: 30rem;
			bottom: 18rem;
			transform: scale(.6);
		}
	}


	.illust,
	.lead,
	.link,
	.scroll,
	.p-ico {
		opacity: 0;
		pointer-events: none;
	}
	.lead {
		transform: scale(.5);
		opacity: 0;
	}
	.link {
		opacity: 0;
		transform: translateY(6rem);
	}
	&:has(.is-loaded) {
		.illust,
		.lead,
		.link,
		.scroll,
		.p-ico {
			pointer-events: auto;
		}
		.illust,
		.p-ico {
			opacity: 1;
			transition: opacity .5s linear;
		}
		.scroll {
			opacity: 1;
			transition: opacity .5s 1.3s linear;
		}
		.lead {
			transition: transform .5s .3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .5s .3s linear;
			opacity: 1;
			transform: scale(1);
		}
		.link {
			transition: transform .5s .8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .4s .8s linear;linear;
			opacity: 1;
			transform: scale(1);
		}
	}

	#loading {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: var(--font-family-noto);
		font-size: 1.6rem;
		.anime {
			display: flex;
			align-items: end;
			margin-bottom: 2rem;
			gap: 2.6rem;
			div {
				animation: jump 1.2s ease-in-out infinite;
				transform-origin: center bottom;
			}
			.-img1 {
				width: 3.9rem;
			}
			.-img2 {
				width: 3.7rem;
				margin-bottom: 0.5rem;
				animation-delay: .1s;
			}
			.-img3 {
				width: 3.7rem;
				animation-delay: .2s;
			}
		}
		@media screen and (max-width: 743px) {
			font-size: 1.4rem;
			.anime {
				transform: scale(.8);
				margin-bottom: 0;
			}
		}
	}
}

body {
	overflow-x: clip;
	overflow-y: scroll;
}
html.is-first {
	.l-header {
		transform: translateY(-110%);
	}
	.l-footer {
		display: none;
	}
	.l-main {
		min-height: 100dvh;
	}
	.p-top-main ~ * {
		position: fixed;
		top: 1000rem;
		left: -1000rem;
		width: 100%;
	}

	.p-top-main {
		.illust {
			transform-origin: left bottom;
			will-change: transform, border-radius;
			border-radius: 0;
			.inner-wrap {
				transform: scale(1.2);
			}
		}
		&:has(.is-loaded) {
			.scroll {
				opacity: 0;
			}
			.lead {
				transform: scale(.5);
				opacity: 0;
			}
			.link {
				opacity: 0;
				transform: translateY(6rem);
			}
		}
		@media screen and (min-width: 744px), print {
		}
	}
}
html.is-first-start {
	.l-header {
		transition: transform .5s .8s ease;
		transform: none;
	}
	.p-top-main {
		.illust {
			transform-origin: left bottom;
			transform: scale(1) translate(0) !important;
			transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1), border-radius 1s cubic-bezier(0.65, 0, 0.35, 1);
			will-change: transform, border-radius;
			.inner-wrap {
				transform: scale(1);
				transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
				will-change: transform;
			}
		}
		&:has(.is-loaded) {
			.scroll {
				opacity: 1;
				transition: opacity .5s 1.8s linear;
			}
			.lead {
				transition: transform .5s .8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .5s .8s linear;
				opacity: 1;
				transform: scale(1);
			}
			.link {
				transition: transform .5s 1.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .4s 1.3s linear;linear;
				opacity: 1;
				transform: scale(1);
			}
		}
		@media screen and (min-width: 744px), print {
		}
	}
}

/* p-top-about
====================================================================== */
.p-top-about {
	position: relative;
	padding-block: 14rem;
	font-size: 1.8rem;
	line-height: 2.5;
	text-align: center;
	--ls: .05em;
	.title {
		width: 66rem;
		margin-inline: auto;
		margin-bottom: 10rem;
	}
	.btn {
		margin-top: 10rem;
		display: flex;
		justify-content: center;
		gap: 4rem;
	}
	.bg {
		position: absolute;
		inset: 0 0 auto;
		height: 176rem;
		z-index: -1;
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		position: relative;
		padding-block: 34.2rem 36rem;
		font-size: 1.3rem;
		--ls: .02em;
		.title {
			width: 31.6rem;
			margin-bottom: 2.8rem;
		}
		.sp-acc {
			position: relative;
			overflow: hidden;
			height: 2lh;
			transition: height var(--transition);
			&::after {
				content: "";
				position: absolute;
				inset: auto 0 0;
				height: 3lh;
				background: linear-gradient(
					to bottom,
					rgb(from var(--bg-base) r g b / 0),
					var(--bg-base)
				);
			}
			.arrow {
				position: absolute;
				right: 0;
				left: 0;
				bottom: 0;
				margin-inline: auto;
				width: 2rem;
				height: 2rem;
				border-radius: 100%;
				background-color: var(--color-base);
				z-index: 4;
				transform: rotate(90deg);
				transition: transform var(--transition);
				&::before {
					content: "";
					position: absolute;
					inset: 0 0 0 .2rem;
					width: .6rem;
					height: .8rem;
					margin: auto;
					background-color: #fff;
					clip-path: polygon(0 0, 100% 50%, 0 100%);
				}
			}
			&.-open {
				&::after,
				.arrow {
					transition: opacity .2 ease;
					opacity: 0;
					pointer-events: none;
				}
			}
		}
		.btn {
			margin-top: 4rem;
			flex-direction: column;
			gap: 2rem;
		}
		.bg {
			height: 132rem;
		}
		.bg2 {
			position: absolute;
			inset: auto 0 0;
			z-index: -1;
		}
	}

	.bg-ph {
		position: absolute;
		width: 32rem;
		z-index: -1;
		img {
			border-radius: 1rem;
		}
		&.-ph1 {
			top: 19.4rem;
			right: min(calc((430 + 800) / 1600 * 99%), calc(50% + 430 * .1rem));
		}
		&.-ph2 {
			top: 44rem;
			left: min(calc((430 + 800) / 1600 * 99%), calc(50% + 430 * .1rem));
		}
		&.-ph3 {
			top: 68.4rem;
			right: min(calc((480 + 800) / 1600 * 100%), calc(50% + 480 * .1rem));
		}
		&.-ph4 {
			top: 117rem;
			right: min(calc((430 + 800) / 1600 * 99%), calc(50% + 430 * .1rem));
		}
		&.-ph5 {
			top: 93rem;
			left: min(calc((480 + 800) / 1600 * 99%), calc(50% + 480 * .1rem));
		}
		@media screen and (max-width: 743px) {
			width: 16rem;
			&.-ph1 {
				top: 16rem;
				right: calc(50% + 4rem);
			}
			&.-ph2 {
				width: 12.8rem;
				top: 21rem;
				left: calc(50% + 5rem);
			}
			&.-ph3 {
				display: none;
			}
			&.-ph4 {
				top: auto;
				bottom: 6rem;
				right: calc(50% + 1rem);
			}
			&.-ph5 {
				top: auto;
				bottom: 20rem;
				left: calc(50% + 1rem);
			}
		}
	}

	.p-ico.-mesh.-l {
		top: 55rem;
	}
	.p-ico.-mesh.-r {
		bottom: 6rem;
	}

	.-ico1 {
		left: calc(50% + 31rem);
		top: 10.4rem;
	}
	.-ico2 {
		right: calc(50% + 25rem);
		top: 6rem;
	}
	.-ico3 {
		right: calc(50% + 36rem);
		top: 10.3rem;
	}
	.-ico4 {
		left: calc(50% + 45rem);
		top: 23rem;
	}
	.-ico5 {
		left: calc(50% + 58.4rem);
		left: min(calc((584 + 800) / 1600 * 103%), calc(50% + 584 * .1rem));
		top: 70.8rem;
	}
	.-ico6 {
		right: calc(50% + 49rem);
		top: 98rem;
	}
	.-ico7 {
		right: calc(50% + 36.4rem);
		top: 137rem;
	}
	.-ico8 {
		left: calc(50% + 45rem);
		top: 113.4rem;
	}
	.-ico9 {
		left: calc(50% + 40.4rem);
		top: 118rem;
	}
	.-ico10 {
		left: calc(50% + 53rem);
		top: 121.4rem;
	}
	.-ico11 {
		left: calc(50% + 63.8rem);
		left: min(calc((638 + 800) / 1600 * 105%), calc(50% + 638 * .1rem));
		top: 119rem;
	}
	@media screen and (max-width: 743px) {
		.p-ico.-mesh.-l {
			top: 16rem;
		}
		.p-ico.-mesh.-r {
			top: 71rem;
			bottom: auto;
		}
		.p-ico.-mesh.-sp2 {
			top: 109rem;
		}
		.p-ico.-mesh.-sp3 {
			top: auto;
			bottom: -16rem;
			z-index: 2;
		}

		.-ico1 {
			left: calc(50% + 5rem);
			top: 3rem;
		}
		.-ico2 {
			right: calc(50% + 3rem);
			top: 3rem;
		}
		.-ico3 {
			right: calc(50% + 8rem);
			top: 2.3rem;
		}
		.-ico4 {
			left: calc(50% + 2rem);
			top: 12rem;
		}
		.-ico5 {
			left: calc(50% + 12rem);
			top: 101rem;
		}
		.-ico6 {
			display: none;
		}
		.-ico7 {
			right: calc(50% - 6.5rem);
			top: auto;
			bottom: -1rem;
		}
		.-ico8 {
			left: calc(50% + 5rem);
			top: auto;
			bottom: 16rem;
		}
		.-ico9 {
			left: calc(50% + 3rem);
			top: auto;
			bottom: 10.6rem;
		}
		.-ico10 {
			left: calc(50% + 8rem);
			top: auto;
			bottom: 9rem;
		}
		.-ico11 {
			display: none;
		}
	}
}

/* c-top-heading
====================================================================== */
.c-top-heading {
	text-align: center;
	&::before {
		content: "";
		display: block;
		width: 8rem;
		height: 3.8rem;
		margin-inline: auto;
		margin-bottom: 1rem;
		background: url(../img/point-title.svg) no-repeat 50%;
		background-size: 100%;
	}
	.title {
		--ls: .15em;
		font-size: 6rem;
		line-height: 1.5;
		padding-left: var(--ls);
		.u-ff_en {
			font-size: calc(70 / 60 * 100%);
			font-weight: var(--font-weight-medium);
			line-height: 1;
		}
	}
	.title-en {
		font-size: 7rem;
		line-height: 1.5;
		font-weight: var(--font-weight-medium);
		--ls: .05em;
	}
	.en {
		font-size: 2.6rem;
		line-height: 1.5;
		font-weight: var(--font-weight-medium);
		--ls: .05em;
	}
	@media screen and (min-width: 744px), print {
		&::after {
			content: "";
			display: block;
			width: 4rem;
			height: 0.6rem;
			margin-top: 2rem;
			margin-inline: auto;
			border-radius: 10rem;
			background-color: var(--bd-color);
		}
		&.-no-line::after {
			content: none;
		}
	}
	@media screen and (max-width: 743px) {
		&::before {
			width: 4rem;
			height: 1.9rem;
			margin-bottom: .8rem;
		}
		.title {
			margin-bottom: .5rem;
			font-size: 3rem;
		}
		.title-en {
			font-size: 3.6rem;
		}
		.en {
			font-size: 1.4rem;
		}
	}
}

/* c-top-box
====================================================================== */
.c-top-box {
	position: relative;
	max-width: 140rem;
	width: calc(100% - var(--pc-base-padding) * 2);
	margin-inline: auto;
	padding-block: 12rem 14rem;
	background-color: #fff;
	border-radius: 10rem;
	z-index: 3;
	.bg {
		position: absolute;
		inset: 0 0 auto;
		height: 35rem;
		z-index: -1;
	}
	@media screen and (max-width: 743px) {
		width: calc(100% - var(--sp-base-padding) * 2);
		padding-block: 6rem 8rem;
		border-radius: 4rem;
		.bg {
			inset: 0 calc(var(--sp-base-padding) * -1) auto;
			height: 16rem;
		}
	}
}

/* p-top-case
====================================================================== */
.p-top-case {
	--bd-color: #2FD5C2;
	overflow: hidden;
	position: relative;
	padding-block: 10rem;
	background-color: #2FD5C2;
	.embla {
		overflow: hidden;
	}
	.embla__container {
		display: flex;
	}
	.contents {
		--item-width: 46rem;
		--item-wrap-width: calc(var(--item-width) + 2rem * 2);
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: calc(var(--item-wrap-width) * 5);
		.case-item {
			width: var(--item-wrap-width);
			padding: 7rem 2rem 8rem;
			a {
				position: relative;
				display: block;
				height: 58rem;
				margin-inline: auto;
				padding: 5rem 3.6rem;
				border-radius: 2rem;
				border: .4rem solid #fff;
				text-decoration: none;
				font-size: 4rem;
				line-height: 1.6;
				color: var(--color-base);
				--ls: .05em;
				box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.20);
				.num {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 4rem;
					padding-bottom: 1.6rem;
					border-bottom: 2px solid;
					font-size: 4rem;
					font-weight: var(--font-weight-medium);
					line-height: 1;
					--ls: .05em;
					.label {
						font-size: 2rem;
					}
				}
				.img {
					position: absolute;
					width: 18rem;
					right: 3rem;
					bottom: 3rem;
				}
				.arrow {
					position: absolute;
					right: 2rem;
					bottom: 2rem;
					width: 2rem;
					height: 2rem;
					margin-block: auto;
					border-radius: 100%;
					background-color: var(--color-base);
					transform-origin: 100% 100%;
					z-index: 2;
					&::before {
						content: "";
						position: absolute;
						inset: 0 0 0 .2rem;
						width: .6rem;
						height: .8rem;
						margin: auto;
						background-color: #fff;
						clip-path: polygon(0 0, 100% 50%, 0 100%);
					}
				}
			}
			&.-case1 a {
				background: #FDDA8D;
			}
			&.-case2 a {
				background: #FFF9B7;
			}
			&.-case3 a {
				background: #b3e7ff;
			}
			&.-case4 a {
				background: #FFD7D7;
			}
			&.-case5 a {
				background: #C5FFDC;
			}
		}
		.c-slide-arrow {
			top: calc(50% - var(--width) / 2);
			&.-l {
				right: calc(50% + 24rem);
			}
			&.-r {
				left: calc(50% + 24rem);
			}
		}
		.swiper-pagination-bullet-active {
			background-color: var(--bd-color);
		}
	}
	.btn {
		margin-top: 4rem;
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		padding-block: 6rem;
		.contents {
			--item-width: 27.6rem;
			--item-wrap-width: calc(var(--item-width) + 1rem * 2);
			.case-item {
				padding: 3rem 1rem 5rem;
				a {
					height: 34.8rem;
					padding: 3.6rem 2rem;
					border-radius: 1.2rem;
					border-width: 0.2rem;
					font-size: 2.4rem;
					box-shadow: 0 0 1.2rem 0 rgba(0, 0, 0, 0.20);
					.num {
						margin-bottom: 2rem;
						padding-bottom: 1.2rem;
						border-bottom-width: 1px;
						font-size: 2.4rem;
						.label {
							font-size: 1.2rem;
						}
					}
					.img {
						width: 11rem;
						right: 2rem;
						bottom: 2rem;
					}
					.arrow {
						right: 1.6rem;
						bottom: 1.6rem;
						transform-origin: 100% 100%;
						transform: scale(.8);
					}
				}
			}
			.c-slide-arrow {
				top: calc(50% - var(--width) / 2 - 1rem);
				&.-l {
					right: calc(50% + 14.4rem);
				}
				&.-r {
					left: calc(50% + 14.4rem);
				}
			}
		}
		.btn {
			margin-top: 1rem;
		}
		.bg {
			top: -2.2rem;
		}
		.btn {
			margin-top: 2rem;
		}
	}

	.-ico1 {
		right: calc(50% + 50rem);
		top: 10.4rem;
	}
	.-ico2 {
		right: calc(50% + 35.5rem);
		top: 20.4rem;
	}
	.-ico3 {
		right: calc(50% + 22rem);
		top: 12rem;
	}
	.-ico4 {
		left: calc(50% + 34.5rem);
		top: 10rem;
	}
	@media screen and (max-width: 743px) {
		.-ico1 {
			right: calc(50% + 7rem);
			top: -4.4rem;
		}
		.-ico2 {
			right: calc(50% + 7.3rem);
			top: 3rem;
		}
		.-ico3 {
			right: calc(50% - 14rem);
			top: auto;
			bottom: -4rem;
		}
		.-ico4 {
			left: calc(50% + 7rem);
			top: -2rem;
		}
	}
}

/* p-top-staff
====================================================================== */
.p-top-staff {
	--bd-color: #ffd84d;
	overflow: hidden;
	position: relative;
	padding-block: 10rem;
	background-color: #ffd84d;
	.contents {
		--item-width: calc(100rem * .8);
		--item-wrap-width: calc(var(--item-width) + 5rem * 2);
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: calc(var(--item-wrap-width) * 3);
		.swiper-slide {
			width: var(--item-wrap-width);
		}
		.staff-item {
			padding: calc(8rem * .8) calc(5rem * .8);
			a {
				position: relative;
				display: block;
				height: calc(58.8rem * .8);
				background-position: 50%;
				background-size: cover;
				border-radius: 100rem;
				border: .6rem solid;
				text-decoration: none;
				.img {
					position: absolute;
					inset: auto 0 0;
					height: calc(68rem * .8);
					display: flex;
					justify-content: center;
					align-items: end;
					padding-left: 5rem;
					overflow: hidden;
					border-radius: 0 0 calc(28.8rem * .8) calc(28.8rem * .8);
					img {
						width: auto;
						height: 100%;
					}
				}
				.flag {
					position: absolute;
					left: 0;
					top: calc(2.4rem * .8);
					width: calc(26.8rem * .8);
					height: calc(10.7rem * .8);
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					padding-left: 1rem;
					background: no-repeat 50%;
					background-size: 100%;
					text-align: center;
					font-size: calc(1.8rem * .8);
					line-height: 1.6;
					.center {
						font-size: calc(1.4rem * .8);
					}
				}
				.title {
					--ls: 0;
					position: absolute;
					left: 0;
					right: 0;
					bottom: -3rem;
					z-index: 3;
					h3 span {
						white-space: nowrap;
						width: fit-content;
						display: block;
						padding: .6rem 3rem;
						background-color: #fff;
						border: 2px solid #000;
						font-size: 3rem;
						line-height: 1.5;
						& + span {
							margin-top: -2px;
						}
					}
					.name {
						width: fit-content;
						padding: calc(1rem * .8) calc(3rem * .8);
						background-color: #000;
						color: #fff;
						font-size: calc(1.6rem * .8);
					}
				}
				.abg {
					position: absolute;
					overflow: hidden;
					inset: 0;
					border-radius: 100rem;
					z-index: -1;
				}
			}
			&.-department1 a {
				border-color: #7CCEF4;
				.flag {
					background-image: url(../img/top/staff-flag1.svg);
				}
			}
			&.-department2 a {
				border-color: #FF8888;
				.flag {
					background-image: url(../img/top/staff-flag2.svg);
				}
			}
			&.-department3 a {
				border-color: #5CB531;
				.flag {
					background-image: url(../img/top/staff-flag3.svg);
				}
			}
		}
		.c-slide-arrow {
			top: calc(50% - var(--width) / 2);
			&.-l {
				right: calc(50% + (52rem * .8));
			}
			&.-r {
				left: calc(50% + (52rem * .8));
			}
		}
		.swiper-pagination-bullet-active {
			background-color: var(--bd-color);
		}
	}
	.btn {
		margin-top: 4rem;
	}
	@media screen and (min-width: 744px), print {
	}
	@media screen and (max-width: 743px) {
		padding-block: 6rem;
		.contents {
			--item-width: 32rem;
			--item-wrap-width: calc(var(--item-width) + .4rem * 2);
			.staff-item {
				padding: 9rem 1rem 4.5rem;
				a {
					height: 20rem;
					border-width: .3rem;
					.img {
						height: 22rem;
						padding-left: 0;
						border-radius: 0 0 9.7rem 9.7rem;
					}
					.flag {
						left: 0;
						top: -7rem;
						transform-origin: 0 0;
						transform: scale(.6);
					}
					.title {
						bottom: -2rem;
						h3 span {
							padding: .3rem .5rem;
							border-width: 1px;
							font-size: 1.2rem;
							& + span {
								margin-top: -1px;
							}
						}
						.name {
							padding: .2rem .6rem;
							font-size: 1rem;
						}
					}
				}
			}
			.c-slide-arrow {
				top: calc(50% - var(--width) / 2 + 2rem);
				&.-l {
					right: calc(50% + 15rem);
				}
				&.-r {
					left: calc(50% + 15rem);
				}
			}
		}
		.btn {
			margin-top: 2rem;
		}
		.c-top-box {
			&::after {
				height: 19rem;
			}
		}
	}


	.-ico1 {
		right: calc(50% + 35rem);
		top: 9rem;
	}
	.-ico2 {
		right: calc(50% + 49.5rem);
		top: 13.4rem;
	}
	.-ico3 {
		right: calc(50% + 30rem);
		top: 18rem;
	}
	.-ico4 {
		left: calc(50% + 40.5rem);
		top: 16rem;
	}
	.-ico5 {
		left: calc(50% + 20.2rem);
		top: 14rem;
	}
	@media screen and (max-width: 743px) {
		.-ico1 {
			display: none;
		}
		.-ico2 {
			display: none;
		}
		.-ico3 {
			right: calc(50% + 7.7rem);
			top: 1.6rem;
		}
		.-ico4 {
			display: none;
		}
		.-ico5 {
			left: calc(50% + 8rem);
			top: 13rem;
		}
	}
}

/* p-top-talk
====================================================================== */
.p-top-talk {
	--bd-color: #d6aeea;
	overflow: hidden;
	position: relative;
	padding-block: 10rem;
	background-color: #d6aeea;
	.contents {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 200rem;
		overflow: visible;
		.talk-item {
			width: calc((46rem * 1.2) + 2rem * 2);
			padding: 5rem 2rem 8rem;
			&.-even {
				padding-top: 11rem;
			}
			a {
				position: relative;
				display: block;
				text-decoration: none;
				font-size: 1.6rem;
				.img {
					position: relative;
					margin-bottom: 3rem;
					aspect-ratio: 600 / 420;
					border-radius: 1rem;
					overflow: hidden;
					box-shadow: 0 0 2rem rgba(0, 0, 0, 0.20);
				}
				.copy {
					margin-bottom: 2rem;
					font-size: 3rem;
					line-height: 1.6;
				}
			}
		}
		.c-slide-arrow {
			top: calc(50% - var(--width) / 2 - 5rem);
			&.-l {
				right: calc(50% + 26.6rem);
			}
			&.-r {
				left: calc(50% + 26.6rem);
			}
		}
		.swiper-pagination-bullet-active {
			background-color: var(--bd-color);
		}
	}
	.btn {
		margin-top: 4rem;
	}
	@media screen and (max-width: 743px) {
		padding-block: 6rem;
		.contents {
			position: relative;
			width: 100vw;
			.talk-item {
				width: calc(28rem + 1rem * 2);
				padding: 4rem 1rem;
				&.-even {
					padding-top: 7rem;
				}
				a {
					font-size: 1.1rem;
					.img {
						margin-bottom: 1rem;
						border-radius: .5rem;
						box-shadow: 0 0 1rem rgba(0, 0, 0, 0.20);
					}
					.copy {
						margin-bottom: 1rem;
						font-size: 1.6rem;
					}
				}
			}
			.c-slide-arrow {
				top: calc(50% - var(--width) / 2 - 2rem);
				&.-l {
					right: calc(50% + 13.5rem);
				}
				&.-r {
					left: calc(50% + 13.5rem);
				}
			}
		}
		.btn {
			margin-top: 2rem;
		}
	}

	.-ico1 {
		left: calc(50% + 39rem);
		top: 6rem;
	}
	.-ico2 {
		left: calc(50% + 29rem);
		top: 11rem;
	}
	.-ico3 {
		right: calc(50% + 38rem);
		top: 16.5rem;
	}
	.-ico4 {
		left: calc(50% + 47.5rem);
		top: 12rem;
	}
	@media screen and (max-width: 743px) {
		.-ico1 {
			left: calc(50% + 2rem);
			top: 0.4rem;
		}
		.-ico2 {
			left: calc(50% + 5rem);
			top: 4rem;
		}
		.-ico3 {
			right: calc(50% + 0.7rem);
			top: -0.4rem;
		}
		.-ico4 {
			left: calc(50% - 14rem);
			top: auto;
			bottom: -9rem;
		}
	}
}


/* p-top-workplace
====================================================================== */
.p-top-workplace {
	position: relative;
	padding-block: 14rem;
	background-color: #fff;
	.contents {
		position: relative;
		max-width: 130rem;
		margin-inline: auto;
		margin-top: 9.5rem;
		z-index: 3;
		.items {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 5.8rem 5rem;
			.item {
				width: 40rem;
				&.-wide {
					width: 62rem;
				}
				a {
					position: relative;
					height: 24rem;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					border-radius: 2rem;
					border: .3rem solid #fff;
					text-align: center;
					box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
					text-decoration: none;
					.title {
						display: block;
						font-size: 3.8rem;
						line-height: 1.5;
						.u-ff_en {
							display: block;
							font-size: calc(45 / 38 * 100%);
							font-weight: var(--font-weight-medium);
							line-height: 1;
						}
						.l {
							font-size: calc(46 / 38 * 100%);
							line-height: 1.3;
						}
					}
					.logo {
						width: 10rem;
						margin-bottom: 1rem;
						padding-top: 1rem;
						filter: var(--white-filter);
					}
					.en {
						display: block;
						margin-top: 1.2rem;
						font-size: 2.4rem;
						line-height: 1.2;
						color: #fff;
						opacity: 0.6;
					}
					.ico-check {
						position: absolute;
						top: 6rem;
						left: -1.4rem;
						width: 7rem;
					}
					.ico-clip {
						position: absolute;
						top: -2rem;
						right: 3rem;
						width: 17.3rem;
						height: 6.5rem;
						font-size: 1.6rem;
						display: flex;
						justify-content: center;
						align-items: center;
						padding-top: 1.8rem;
						background: url(../img/top/ico-clip.svg) no-repeat 50%;
						background-size: 100%;
						transform: rotate(6.45deg);
						--ls: .1em;
					}
					.flag {
						position: absolute;
						left: 2.8rem;
						top: -3.4rem;
						width: 19.2rem;
						height: 7.4rem;
						padding-left: 1.8rem;
						padding-top: 2rem;
						background: url(../img/top/workplace-flg.svg) no-repeat 50%;
						background-size: 100%;
						font-size: 1.8rem;
						line-height: 1.4;
						&.-wide {
							width: 26.2rem;
							background-image: url(../img/top/workplace-flg-wide.svg);
						}
					}
					.lead {
						margin-bottom: 0.5rem;
						font-size: 1.8rem;
						line-height: 1.6;
					}
					.ico {
						position: absolute;
					}
					.arrow {
						position: absolute;
						right: 2rem;
						bottom: 2rem;
						width: 2rem;
						height: 2rem;
						margin-block: auto;
						border-radius: 100%;
						background-color: var(--color-base);
						transform-origin: 100% 100%;
						z-index: 2;
						&::before {
							content: "";
							position: absolute;
							inset: 0 0 0 .2rem;
							width: .6rem;
							height: .8rem;
							margin: auto;
							background-color: #fff;
							clip-path: polygon(0 0, 100% 50%, 0 100%);
						}
					}
					&.-item1 {
						background: #9EE0B9;
						.title {
							font-size: 3.6rem;
							line-height: 1.3;
						}
						.ico {
							width: 7rem;
							right: 1.6rem;
							top: -3.5rem;
						}
					}
					&.-item2 {
						background: #FFB38A;
						.ico {
							width: 18.8rem;
							right: -2.6rem;
							top: -4.6rem;
						}
					}
					&.-item3 {
						background: #96AEC4;
						.ico {
							width: 11.9rem;
							right: 2rem;
							top: -6.4rem;
						}
					}
					&.-item4 {
						background: #F6A7A1;
						flex-direction: row;
						align-items: start;
						padding-top: 5rem;
						.column .title {
							width: 5.5em;
						}
						.column + .column {
							position: relative;
							padding-left: 8.8rem;
							&::before {
								content: "&";
								position: absolute;
								left: 0;
								top: 0;
								width: 8.8rem;
								text-align: center;
								line-height: 1;
								font-size: 10rem;
								color: #fff;
								font-family: var(--font-family-en);
								font-weight: var(--font-weight-semi);
								font-style: normal;
							}
							& > * {
								position: relative;
								right: 1rem;
							}
						}
						.en {
							margin-top: 0.6rem;
						}
						.note {
							position: absolute;
							right: 0;
							left: 0;
							bottom: 3rem;
							text-align: center;
							font-size: 2.9rem;
						}
						.ico {
							width: 11.9rem;
							left: 0.8rem;
							bottom: -7.6rem;
						}
					}
					&.-item5 {
						background: #6FDDEB;
						.ico {
							width: 5rem;
							right: 5.6rem;
							top: -2.4rem;
						}
						.ico.-ico2 {
							width: 10.3rem;
							right: 5.4rem;
							top: auto;
							bottom: -4rem;
						}
					}
				}
			}
		}
	}
	@media screen and (max-width: 743px) {
		padding-block: 8rem;
		.contents {
			max-width: 35rem;
			margin-top: 6rem;
			.items {
				flex-direction: column;
				gap: 4rem;
				.item {
					width: 100% !important;
					a {
						height: 12.8rem;
						border-radius: 1.4rem;
						border-width: 0.2rem;
						box-shadow: 0 0 0.7rem 0 rgba(0, 0, 0, 0.10);
						.title {
							font-size: 2.4rem;
							.u-ff_en {
								display: block;
								font-size: calc(45 / 38 * 100%);
								font-weight: var(--font-weight-medium);
								line-height: 1;
							}
							.l {
								font-size: calc(46 / 38 * 100%);
								line-height: 1.3;
							}
						}
						.logo {
							width: 7.2rem;
							margin-bottom: .3rem;
							padding-top: 0;
						}
						.en {
							margin-top: .6rem;
							font-size: 1.4rem;
						}
						.ico-check {
							position: absolute;
							top: 3rem;
							left: 1.2rem;
							width: 5rem;
						}
						.ico-clip {
							top: -3.6rem;
							right: 1.8rem;
							width: 10rem;
							font-size: 1.2rem;
							padding-top: 1rem;
						}
						.ico {
							transform: scale(.6);
						}
						.flag {
							left: 1.8rem;
							top: -2.8rem;
							transform-origin: 0 0;
							transform: scale(calc(130 / 192));
						}
						.lead {
							margin-bottom: 0.2rem;
							font-size: 1.26rem;
						}
						.arrow {
							right: 1.2rem;
							bottom: 1.2rem;
							transform-origin: 100% 100%;
							transform: scale(.8);
						}
						&.-item1 {
							.title {
								font-size: 2.4rem;
							}
							.ico {
								top: -3.2rem;
							}
						}
						&.-item2 {
							.ico {
								top: -4rem;
							}
						}
						&.-item3 {
							.ico {
								right: 0rem;
								top: -5.2rem;
							}
						}
						&.-item4 {
							padding-top: 2.5rem;
							.column + .column {
								padding-left: 6.6rem;
								&::before {
									top: -0.5rem;
									width: 6.6rem;
									font-size: 6.8rem;
								}
							}
							.note {
								bottom: 1rem;
								font-size: 2rem;
							}
							.ico {
								width: 10rem;
								bottom: -4.1rem;
							}
						}
						&.-item5 {
							.ico {
								right: 5rem;
								top: -2rem;
							}
							.ico.-ico2 {
								right: 3.2rem;
								bottom: -5.5rem;
							}
						}
					}
				}
			}
		}
	}

	.p-ico.-mesh.-l {
		top: 6rem;
		z-index: 1;
	}
	.-ico1 {
		left: calc(50% + 42rem);
		top: 17.4rem;
		z-index: 2;
	}
	@media screen and (max-width: 743px) {
		.p-ico.-mesh.-l {
			top: -2rem;
		}
		.-ico1 {
			left: calc(50% + 10.4rem);
			top: 3.4rem;
		}
	}
}


/* p-top-movie
====================================================================== */
.p-top-movie {
	position: relative;
	padding-block: 14rem;
	z-index: 2;
	.contents {
		max-width: 100rem;
		margin-inline: auto;
		margin-top: 7rem;
		display: flex;
		flex-direction: column;
		gap: 8rem;
		iframe {
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			border-radius: 2rem;
		}
	}
	@media screen and (max-width: 743px) {
		padding-block: 8rem;
		.contents {
			margin-top: 5rem;
			margin-inline: var(--sp-base-padding);
			gap: 4rem;
			iframe {
				border-radius: .7rem;
			}
		}
	}

	.p-ico.-mesh.-l {
		top: 44%;
	}
	.p-ico.-mesh.-r {
		top:  8%;
	}

	.-ico1 {
		right: calc(50% + 43rem);
		top: 12rem;
	}
	.-ico2 {
		right: calc(50% + 59rem);
		top: 44rem;
	}
	.-ico3 {
		right: calc(50% + 56.6rem);
		bottom: 46rem;
	}
	.-ico4 {
		right: calc(50% + 54.5rem);
		bottom: 31rem;
	}
	.-ico5 {
		left: calc(50% + 60rem);
		top: 53rem;
	}
	.-ico6 {
		left: calc(50% + 54rem);
		top: 85rem;
	}
	.-ico7 {
		left: calc(50% + 62rem);
		top: 96rem;
	}
	.-ico8 {
		left: calc(50% + 52.5rem);
		bottom: 22rem;
	}
	@media screen and (max-width: 743px) {
		.p-ico.-mesh.-l {
			display: none;
		}
		.p-ico.-mesh.-r {
			top: -13rem;
		}

		.-ico1 {
			right: calc(50% + 7.6rem);
			top: -0.6rem;
		}
		.-ico2 {
			right: calc(50% + 5rem);
			top: auto;
			bottom: -7rem;
		}
		.-ico3,
		.-ico4,
		.-ico5,
		.-ico7 {
			display: none;
		}
		.-ico6 {
			left: calc(50% + 3rem);
			top: auto;
			bottom: -2.4rem;
		}
		.-ico8 {
			left: calc(50% + 11rem);
			bottom: 2rem;
		}
	}
}


/* mov
====================================================================== */
@media screen {
	._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 .4s cubic-bezier(0.5, 1, 0.89, 1), opacity .4s 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(--header-height) + var(--target-margin) + 6rem);
	} */
}