@charset "utf-8";
.hero_overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--c-white);
	position: fixed;
	inset: 0;
	z-index: 9999;
}
	.hero_overlay__logo {
		width: 80px;
		height: auto;
	}
		.hero_overlay__logo svg {
			fill: var(--c-main-blue);
		}

html._is_loading {
	overflow: hidden;
}
	html._is_loading body {
		overflow: hidden;
		position: fixed;
		width: 100%;
	}

html._is_loading .hero_overlay__logo,
html._is_loading .hero_bg__main,
html._is_loading .hero_bg__main__character,
html._is_loading .hero_bg__image,
html._is_loading .hero__lines__balloon,
html._is_loading .hero__lines__text,
html._is_loading .hero__copy__main_text,
html._is_loading .hero__copy__sub_text,
html._is_loading .hero__cta,
html._is_loading #header {
	opacity: 0;
}

html._hero_skip .hero_overlay {
	display: none;
}

#hero_bg {
	width: 100%;
	height: 100vh;
	background-color: var(--c-bg-gray);
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	user-select: none;
}
	#hero_bg::before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background-image: url(../image/bg@pc.webp);
		background-size: 100% auto;
		background-position: top center;
		background-repeat: repeat;
		mix-blend-mode: multiply;
		opacity: .3;
		position: absolute;
		top: 0%;
		left: 0%;
		z-index: 1;
	}
	.hero_bg__inner {
		width: 100%;
		min-width: 1440px;
		height: auto;
		aspect-ratio: 1440 / 1078;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}
		.hero_bg__main {
			width: calc((298.64 / var(--vw)) * 100%);
			height: auto;
			position: absolute;
			top: calc((608 / 1078) * 100%);
			left: calc((715 / var(--vw)) * 100%);
			transform: translate(-50%, -50%);
		}
			.hero_bg__main > img:nth-of-type(1) {
				position: relative;
				z-index: 1;
			}
			.hero_bg__main > img:nth-of-type(2) {
				opacity: .4;
				mix-blend-mode: multiply;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
			}
			.hero_bg__main__character {
				width: calc((172 / 298.64) * 100%);
				height: auto;
				position: absolute;
				top: calc((157 / 477.05) * 100%);
				left: calc((65 / 298.64) * 100%);
				z-index: 3;
			}
		.hero_bg__image {
			height: auto;
			position: absolute;
			transform: translate(-50%, -50%);
		}
		.hero_bg__image._01 {
			width: calc((289 / var(--vw)) * 100%);
			top: calc((21 / 1078) * 100%);
			left: calc((343 / var(--vw)) * 100%);
		}
		.hero_bg__image._02 {
			width: calc((281 / var(--vw)) * 100%);
			top: calc((131 / 1078) * 100%);
			left: calc((704 / var(--vw)) * 100%);
		}
		.hero_bg__image._03 {
			width: calc((281 / var(--vw)) * 100%);
			top: calc((17 / 1078) * 100%);
			left: calc((1061 / var(--vw)) * 100%);
		}
		.hero_bg__image._04 {
			width: calc((276 / var(--vw)) * 100%);
			top: calc((-6 / 1078) * 100%);
			left: calc((1389 / var(--vw)) * 100%);
		}
		.hero_bg__image._05 {
			width: calc((268 / var(--vw)) * 100%);
			top: calc((637 / 1078) * 100%);
			left: calc((-16 / var(--vw)) * 100%);
		}
		.hero_bg__image._06 {
			width: calc((281 / var(--vw)) * 100%);
			top: calc((546 / 1078) * 100%);
			left: calc((347 / var(--vw)) * 100%);
		}
		.hero_bg__image._07 {
			width: calc((259 / var(--vw)) * 100%);
			top: calc((497 / 1078) * 100%);
			left: calc((1067 / var(--vw)) * 100%);
		}
		.hero_bg__image._08 {
			width: calc((272 / var(--vw)) * 100%);
			top: calc((526 / 1078) * 100%);
			left: calc((1402 / var(--vw)) * 100%);
		}
		.hero_bg__image._09 {
			width: calc((289 / var(--vw)) * 100%);
			top: calc((1037 / 1078) * 100%);
			left: calc((349 / var(--vw)) * 100%);
		}
		.hero_bg__image._10 {
			width: calc((260 / var(--vw)) * 100%);
			top: calc((1089 / 1078) * 100%);
			left: calc((704 / var(--vw)) * 100%);
		}
		.hero_bg__image._11 {
			width: calc((261 / var(--vw)) * 100%);
			top: calc((1194 / 1078) * 100%);
			left: calc((1071 / var(--vw)) * 100%);
		}

main section {
	position: relative;
	z-index: 2;
}
#hero {
	width: 100%;
	height: 100vh;
	user-select: none;
}
	.hero__inner {
		width: 100%;
		height: 100%;
		position: relative;
	}
		.hero__lines {
			width: max(calc((191 / var(--vw)) * 100vw), 191px);
			height: auto;
			position: absolute;
			top: calc((358 / 1078) * 100%);
			left: calc((716 / var(--vw)) * 100%);
			z-index: 2;
		}
			.hero__lines__balloon {
				width: 100%;
				height: auto;
				position: relative;
				z-index: 1;
			}
			.hero__lines__text {
				width: calc((106 / 191) * 100%);
				height: auto;
				position: absolute;
				top: calc((45 / 117.5) * 100%);
				left: calc((43 / 191) * 100%);
				z-index: 2;
			}
		.hero__cta {
			width: calc((170 / var(--vw)) * 100%);
			height: auto;
			position: absolute;
			bottom: calc((100 / 1078) * 100%);
			left: calc((78 / var(--vw)) * 100%);
			z-index: 2;
		}
			.hero__cta__link {
				display: block;
				width: 100%;
				height: auto;
				position: relative;
			}
				.hero__cta__hana {
					height: auto;
					position: absolute;
					z-index: 2;
				}
				.hero__cta__hana._01 {
					width: calc((42 / 170) * 100%);
					top: calc((-18 / 96) * 100%);
					right: calc((-5 / 170) * 100%);
				}
				.hero__cta__hana._02 {
					width: calc((32 / 170) * 100%);
					bottom: calc((8 / 96) * 100%);
					left: 0;
				}
				.hero__cta__balloon {
					width: 100%;
					height: auto;
					position: relative;
					z-index: 1;
				}
					.hero__cta__balloon__text {
						display: block;
						width: fit-content;
						height: auto;
						font-size: calc((16 / var(--vw)) * 100vw);
						font-weight: 700;
						line-height: 1.5;
						letter-spacing: 0.05em;
						color: var(--c-white);
						position: absolute;
						top: calc((31 / 96) * 100%);
						left: calc((29 / 170) * 100%);
						z-index: 2;
					}
					.hero__cta__balloon__arrow {
						display: block;
						width: calc((11 / 170) * 100%);
						height: auto;
						position: absolute;
						top: calc((39 / 96) * 100%);
						right: calc((22 / 170) * 100%);
						z-index: 2;
					}
						.hero__cta__balloon__arrow svg {
							fill: var(--c-white);
						}
		.hero__copy {
			width: calc((233 / var(--vw)) * 100%);
			height: auto;
			position: absolute;
			bottom: calc((103 / 1078) * 100%);
			right: calc((140 / var(--vw)) * 100%);
			z-index: 2;
		}
			.hero__copy__main_text {
				width: calc((228 / 233) * 100%);
				height: auto;
				margin: 0 auto calc((12 / var(--vw)) * 100vw) 0;
			}
			.hero__copy__sub_text {
				width: 100%;
				height: auto;
				font-size: calc((16 / var(--vw)) * 100vw);
				font-weight: 300;
				line-height: 1.5;
				letter-spacing: 0.02em;
				color: var(--c-gray);
			}

#about {
	width: 100%;
	height: auto;
	padding: 195px 0 180px;
}
	.about__inner {
		width: calc((1200 / var(--vw)) * 100%);
		height: auto;
		margin: 0 auto;
	}
		.about__contents {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 100%;
			height: auto;
			padding: max(calc((99 / var(--vw)) * 100vw), 99px) max(calc((119 / var(--vw)) * 100vw), 119px) max(calc((93 / var(--vw)) * 100vw), 93px) max(calc((103 / var(--vw)) * 100vw), 103px);
			border: solid max(calc((1 / var(--vw)) * 100vw), 1px) var(--c-white);
			border-radius: max(calc((40 / var(--vw)) * 100vw), 40px);
			background-color: rgba(255, 255, 255, 0.7);
			backdrop-filter: blur(0px);
			-webkit-backdrop-filter: blur(0px);
			opacity: 0;
			transform: scale(0.88);
			transition: transform .6s cubic-bezier(0.34, 1.7, 0.64, 1),
			            opacity .4s ease-out,
			            backdrop-filter .6s ease-out;
		}
		._run.about__contents {
			backdrop-filter: blur(4px);
			-webkit-backdrop-filter: blur(4px);
			opacity: 1;
			transform: scale(1);
		}
			.about__contents__left {
				width: fit-content;
				height: auto;
			}
				.about__logo {
					width: max(calc((40 / var(--vw)) * 100vw), 40px);
					height: auto;
					margin: 0 auto max(calc((20 / var(--vw)) * 100vw), 20px) 0;
					transform: translateY(0.3vw);
					opacity: 0;
					transition: .6s;
					transition-delay: .6s;
				}
				._run .about__logo {
					transform: translateY(0);
					opacity: 1;
				}
					.about__logo svg {
						fill: var(--c-main-blue);
					}
				.about__heading {
					width: 100%;
					height: auto;
					font-size: max(calc((50 / var(--vw)) * 100vw), 50px);
					font-weight: 300;
					line-height: 1;
					letter-spacing: 0.1em;
					color: var(--c-main-blue);
					transform: translateY(0.3vw);
					opacity: 0;
				}
				._run .about__heading {
					transform: translateY(0);
					opacity: 1;
					transition: .6s;
					transition-delay: .8s;
				}
			.about__contents__right {
				flex: 1;
				max-width: calc((397 / 980) * 100%);
				height: auto;
			}
				.about__contents__ja_text {
					width: 100%;
					height: auto;
					margin: 0 auto max(calc((20 / var(--vw)) * 100vw), 20px);
					font-size: max(calc((16 / var(--vw)) * 100vw), 16px);
					font-weight: 500;
					line-height: 2.2;
					letter-spacing: 0.1em;
					color: var(--c-black);
					transform: translateY(0.3vw);
					opacity: 0;
				}
				._run .about__contents__ja_text {
					transform: translateY(0);
					opacity: 1;
					transition: .6s;
					transition-delay: 1s;
				}
				.about__contents__en_text {
					width: 100%;
					height: auto;
					font-size: max(calc((12 / var(--vw)) * 100vw), 12px);
					font-weight: 300;
					line-height: 2.2;
					letter-spacing: 0em;
					color: var(--c-dark-gray);
					transform: translateY(0.3vw);
					opacity: 0;
				}
				._run .about__contents__en_text {
					transform: translateY(0);
					opacity: 1;
					transition: .6s;
					transition-delay: 1.1s;
				}
				.about__contents__btn_wrap {
					width: max(calc((135 / var(--vw)) * 100vw), 135px);
					height: auto;
					margin: max(calc((70 / var(--vw)) * 100vw), 70px) auto 0 0;
					transform: translateY(0.3vw);
					opacity: 0;
				}
				._run .about__contents__btn_wrap {
					transform: translateY(0);
					opacity: 1;
					transition: .6s;
					transition-delay: 1.2s;
				}
					.about__contents__btn {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						height: auto;
					}
						.about__contents__btn__text {
							font-size: max(calc((14 / var(--vw)) * 100vw), 14px);
							font-weight: 500;
							line-height: 1;
							letter-spacing: 0.1em;
							color: var(--c-main-blue);
						}

#works {
	width: 100%;
	height: auto;
	padding: max(calc((110 / var(--vw)) * 100vw), 110px) 0 max(calc((140 / var(--vw)) * 100vw), 140px);
	border-radius: max(calc((100 / var(--vw)) * 100vw), 100px) max(calc((100 / var(--vw)) * 100vw), 100px) 0 0;
	border: solid max(calc((1 / var(--vw)) * 100vw), 1px) var(--c-white);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	background-color: rgba(245, 245, 245, 0.8);
}
	.works__inner {
		width: calc((1200 / var(--vw)) * 100%);
		height: auto;
		margin: 0 auto;
	}
		.works__heading {
			width: 100%;
			height: auto;
			margin: 0 auto max(calc((68 / var(--vw)) * 100vw), 68px);
		}
			.works__heading__main_text {
				width: max(calc((228 / var(--vw)) * 100vw), 228px);
				margin: 0 auto max(calc((14 / var(--vw)) * 100vw), 14px) 0;
			}
				.works__heading__main_text svg {
					fill: var(--c-black);
				}
			.works__heading__sub_text {
				color: var(--c-black);
			}
		.works__new_item {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
			width: 100%;
			height: auto;
			padding: max(calc((46 / var(--vw)) * 100vw), 46px) max(calc((59 / var(--vw)) * 100vw), 59px) max(calc((33 / var(--vw)) * 100vw), 33px);
			margin: 0 auto max(calc((50 / var(--vw)) * 100vw), 50px);
			border-radius: max(calc((10 / var(--vw)) * 100vw), 10px);
			background-color: var(--c-white);
			border: solid max(calc((1 / var(--vw)) * 100vw), 1px) var(--c-gray);
			position: relative;
			transform: translateY(0.6vw);
			opacity: 0;
			transition: 1.2s;
		}
	@media (any-hover: hover) {
		.works__new_item {
			transition: .4s;
		}
		.works__new_item:hover {
			border-color: var(--c-main-blue);
		}
	}
		.works__new_item._run {
			transform: translateY(0);
			opacity: 1;
		}
			.works__new_item__pick_up {
				display: flex;
				justify-content: center;
				align-items: center;
				width: max(calc((76 / var(--vw)) * 100vw), 76px);
				height: auto;
				aspect-ratio: 1 / 1;
				position: absolute;
				top: max(calc((-30 / var(--vw)) * 100vw), -30px);
				left: max(calc((-39 / var(--vw)) * 100vw), -39px);
				pointer-events: none;
				transform: scale(0.8);
				opacity: 0;
				transition: transform .6s cubic-bezier(0.34, 1.7, 0.64, 1),
							opacity .4s ease-out;
				transition-delay: .4s;
			}
			.works__new_item._run .works__new_item__pick_up {
				transform: scale(1);
				opacity: 1;
			}
				.works__new_item__pick_up__icon {
					width: 100%;
					height: auto;
					position: relative;
					z-index: 1;
				}
				.works__new_item__pick_up__text {
					width: 100%;
					height: auto;
					padding-right: max(calc((1 / var(--vw)) * 100vw), 1px);
					font-size: max(calc((12 / var(--vw)) * 100vw), 12px);
					font-weight: 500;
					line-height: 1;
					letter-spacing: 0em;
					text-align: center;
					color: var(--c-black);
					position: absolute;
					top: max(calc((31 / var(--vw)) * 100vw), 31px);
					left: 0;
					z-index: 2;
				}
			.works__new_item__link {
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
			}
			.works__new_item__label_wrap {
				width: 100%;
				height: auto;
				margin: 0 auto max(calc((20 / var(--vw)) * 100vw), 20px);
			}
				.works__new_item__label {
					display: flex;
					justify-content: center;
					align-items: center;
					width: fit-content;
					height: auto;
					padding: max(calc((3 / var(--vw)) * 100vw), 3px) max(calc((25 / var(--vw)) * 100vw), 25px) max(calc((2 / var(--vw)) * 100vw), 2px);
					margin: 0 0 0 auto;
					border-radius: 9999px;
					background-color: var(--c-black);
					font-size: max(calc((10 / var(--vw)) * 100vw), 10px);
					font-weight: 700;
					line-height: 1.8;
					letter-spacing: 0em;
					color: var(--c-white);
					transform: translateY(0.5vw);
					opacity: 0;
					transition: .6s;
					transition-delay: .6s;
				}
				.works__new_item._run .works__new_item__label {
					transform: translateY(0);
					opacity: 1;
				}
			.works__new_item__details {
				width: calc((420 / 1080) * 100%);
				height: auto;
				padding-top: calc((34 / var(--vw)) * 100vw);
				padding-right: calc((70 / 1080) * 100%);
			}
				.works__new_item__details__title {
					width: 100%;
					height: auto;
					margin: 0 auto max(calc((30 / var(--vw)) * 100vw), 30px);
				}
					.works__new_item__details__title__sub_text {
						width: 100%;
						height: auto;
						margin: 0 auto max(calc((10 / var(--vw)) * 100vw), 10px);
						font-size: max(calc((12 / var(--vw)) * 100vw), 12px);
						font-weight: 500;
						line-height: 1.5;
						letter-spacing: 0.05em;
						color: var(--c-main-blue);
						transform: translateY(0.5vw);
						opacity: 0;
						transition: .6s;
						transition-delay: .4s;
					}
					.works__new_item._run .works__new_item__details__title__sub_text {
						transform: translateY(0);
						opacity: 1;
					}
					.works__new_item__details__title__main_text {
						width: 100%;
						height: auto;
						font-size: max(calc((30 / var(--vw)) * 100vw), 30px);
						font-weight: 700;
						line-height: 1.5;
						letter-spacing: 0.05em;
						color: var(--c-black);
						transform: translateY(0.5vw);
						opacity: 0;
						transition: .6s;
						transition-delay: .45s;
					}
					.works__new_item._run .works__new_item__details__title__main_text {
						transform: translateY(0);
						opacity: 1;
					}
				.works__new_item__details__heading {
					width: 100%;
					height: auto;
					margin: 0 auto max(calc((14 / var(--vw)) * 100vw), 14px);
					font-size: max(calc((18 / var(--vw)) * 100vw), 18px);
					font-weight: 700;
					line-height: 1.8;
					letter-spacing: 0.05em;
					color: var(--c-black);
					transform: translateY(0.5vw);
					opacity: 0;
					transition: .6s;
					transition-delay: .5s;
				}
				.works__new_item._run .works__new_item__details__heading {
					transform: translateY(0);
					opacity: 1;
				}
				.works__new_item__details__text {
					width: 100%;
					height: auto;
					margin: 0 auto max(calc((58 / var(--vw)) * 100vw), 58px);
					font-size: max(calc((14 / var(--vw)) * 100vw), 14px);
					font-weight: 500;
					line-height: 1.8;
					letter-spacing: 0.05em;
					color: var(--c-black);
					transform: translateY(0.5vw);
					opacity: 0;
					transition: .6s;
					transition-delay: .55s;
				}
				.works__new_item._run .works__new_item__details__text {
					transform: translateY(0);
					opacity: 1;
				}
				.works__new_item__details__category_list {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					gap: max(calc((5 / var(--vw)) * 100vw), 5px) max(calc((4 / var(--vw)) * 100vw), 4px);
					width: 100%;
					height: auto;
					transform: translateY(0.5vw);
					opacity: 0;
					transition: .6s;
					transition-delay: .6s;
				}
				.works__new_item._run .works__new_item__details__category_list {
					transform: translateY(0);
					opacity: 1;
				}
					.works__new_item__details__category_list__item {
						display: flex;
						justify-content: center;
						align-items: center;
						width: fit-content;
						height: auto;
						padding: max(calc((2 / var(--vw)) * 100vw), 2px) max(calc((4 / var(--vw)) * 100vw), 4px);
						border-radius: max(calc((1 / var(--vw)) * 100vw), 1px);
						border: solid max(calc((1 / var(--vw)) * 100vw), 1px) var(--c-dark-gray);
						background-color: var(--c-white);
						font-size: max(calc((12 / var(--vw)) * 100vw), 12px);
						font-weight: 500;
						line-height: 1;
						letter-spacing: 0em;
						color: var(--c-dark-gray);
					}
			.works__new_item__image {
				width: calc((660 / 1080) * 100%);
				height: auto;
				border-radius: max(calc((10 / var(--vw)) * 100vw), 10px);
				overflow: hidden;
				position: relative;
				opacity: 0;
				transition: 1s;
				transition-delay: .6s;
			}
			.works__new_item._run .works__new_item__image {
				opacity: 1;
			}
				.works__new_item__image::after {
					content: '';
					display: block;
					width: 100%;
					height: 100%;
					background-color: rgba(255, 255, 255, 0.5);
					backdrop-filter: blur(4px);
					-webkit-backdrop-filter: blur(4px);
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					transition: 1s;
					transition-delay: .6s;
				}
				.works__new_item._run .works__new_item__image::after {
					background-color: rgba(255, 255, 255, 0);
					backdrop-filter: blur(0px);
					-webkit-backdrop-filter: blur(0px);
				}
			.works__new_item__btn_wrap {
				width: 100%;
				height: auto;
				margin: max(calc((28 / var(--vw)) * 100vw), 28px) auto 0;
				opacity: 0;
				transition: .6s;
				transition-delay: .6s;
			}
			.works__new_item._run .works__new_item__btn_wrap {
				opacity: 1;
			}
				.works__new_item__btn {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: max(calc((135 / var(--vw)) * 100vw), 135px);
					height: auto;
					margin: 0 0 0 auto;
				}
					.works__new_item__btn__text {
						font-size: max(calc((14 / var(--vw)) * 100vw), 14px);
						font-weight: 500;
						line-height: 1;
						letter-spacing: 0.1em;
						color: var(--c-main-blue);
					}
				@media (any-hover: hover) {
					.works__new_item:hover .works__new_item__btn__arrow {
						background-color: var(--c-main-blue);
					}
						.works__new_item:hover .works__new_item__btn__arrow svg {
							fill: var(--c-white);
						}
				}
		.works__list {
			width: 100%;
			height: auto;
		}
		.works__list.swiper {
			overflow: visible;
			touch-action: auto;
		}
			.works__list .swiper-wrapper {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: max(calc((20 / var(--vw)) * 100vw), 20px);
				width: 100%;
				transform: none;
			}
			.works__list__item {
				width: 100%;
				height: auto;
				padding: max(calc((15 / var(--vw)) * 100vw), 15px) max(calc((14 / var(--vw)) * 100vw), 14px) max(calc((43 / var(--vw)) * 100vw), 43px);
				border-radius: max(calc((10 / var(--vw)) * 100vw), 10px);
				border: solid max(calc((1 / var(--vw)) * 100vw), 1px) var(--c-gray);
				background-color: var(--c-white);
				position: relative;
				overflow: hidden;
				--works_item_delay: 0s;
				transform: translateY(0.5vw);
				opacity: 0;
				transition-property: opacity, transform;
				transition-duration: .6s, .6s;
				transition-timing-function: ease, ease;
				transition-delay: var(--works_item_delay), var(--works_item_delay);
			}
			.works__list__item:nth-of-type(2) {
				--works_item_delay: .15s;
			}
			.works__list__item:nth-of-type(3) {
				--works_item_delay: .3s;
			}
			.works__list__item:nth-of-type(4) {
				--works_item_delay: .45s;
			}
			.works__list__item:nth-of-type(5) {
				--works_item_delay: .6s;
			}
			.works__list__item:nth-of-type(6) {
				--works_item_delay: .75s;
			}
			.works__list._run .works__list__item {
				transform: translateY(0);
				opacity: 1;
			}
		@media (any-hover: hover) {
			.works__list__item {
				transition-property: opacity, transform, border-color;
				transition-duration: .6s, .6s, .4s;
				transition-timing-function: ease, ease, ease;
				transition-delay: var(--works_item_delay), var(--works_item_delay), 0s;
			}
			.works__list__item:hover {
				border-color: var(--c-main-blue);
			}
		}
				.works__list__item__link {
					display: block;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
					.works__list__item__image {
						width: 100%;
						height: auto;
						border-radius: max(calc((5 / var(--vw)) * 100vw), 5px);
						margin: 0 auto max(calc((30 / var(--vw)) * 100vw), 30px);
						overflow: hidden;
					}
					.works__list__item__details {
						width: 100%;
						height: auto;
						padding: 0 max(calc((15 / var(--vw)) * 100vw), 15px);
					}
						.works__list__item__title {
							width: 100%;
							height: auto;
							margin: 0 auto max(calc((18 / var(--vw)) * 100vw), 18px);
						}
							.works__list__item__title__sub_text {
								width: 100%;
								height: auto;
								font-size: max(calc((12 / var(--vw)) * 100vw), 12px);
								font-weight: 500;
								line-height: 1.5;
								letter-spacing: 0.05em;
								color: var(--c-main-blue);
							}
							.works__list__item__title__main_text {
								width: 100%;
								height: auto;
								font-size: max(calc((18 / var(--vw)) * 100vw), 18px);
								font-weight: 700;
								line-height: 1.8;
								letter-spacing: 0.1em;
								color: var(--c-black);
							}
						.works__list__item__category_list {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							flex-wrap: wrap;
							gap: max(calc((7 / var(--vw)) * 100vw), 7px);
							width: 100%;
							height: auto;
						}
							.works__list__item__category_list__item {
								display: flex;
								justify-content: center;
								align-items: center;
								width: fit-content;
								height: auto;
								padding: max(calc((2 / var(--vw)) * 100vw), 2px) max(calc((4 / var(--vw)) * 100vw), 4px);
								border-radius: max(calc((1 / var(--vw)) * 100vw), 1px);
								border: solid max(calc((1 / var(--vw)) * 100vw), 1px) var(--c-dark-gray);
								background-color: var(--c-white);
								font-size: max(calc((12 / var(--vw)) * 100vw), 12px);
								font-weight: 500;
								line-height: 1;
								letter-spacing: 0em;
								color: var(--c-dark-gray);
							}
						.works__list__item__arrow {
							width: max(calc((44 / var(--vw)) * 100vw), 44px);
							height: max(calc((31 / var(--vw)) * 100vw), 31px);
							border-color: var(--c-white);
							background-image: url(../image/arrow-bg.webp);
							background-size: cover;
							background-position: center;
							background-repeat: no-repeat;
							position: absolute;
							bottom: max(calc((9 / var(--vw)) * 100vw), 9px);
							right: 9px;
							z-index: 2;
						}
							.works__list__item__arrow svg {
								fill: var(--c-white);
							}
		.works__nav,
		.works__nav__arrow_wrap {
			display: none;
		}
		.works__btn_wrap {
			margin: max(calc((80 / var(--vw)) * 100vw), 80px) auto 0;
			opacity: 0;
			transition: .6s;
		}
		.works__list._run ~ .works__btn_wrap {
			opacity: 1;
		}

#service {
	width: 100%;
	height: auto;
	background-color: var(--c-blue);
	position: relative;
	overflow: clip;
}
	#service::before {
		content: '';
		display: block;
		width: 100%;
		height: 100vh;
		background-image: url(../image/bg@pc.webp);
		background-size: 100% auto;
		background-position: top center;
		background-repeat: repeat;
		mix-blend-mode: multiply;
		opacity: .3;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.service__inner {
		width: 100%;
		height: auto;
		margin-top: -100vh;
		position: relative;
		z-index: 2;
	}
		.service__obj {
			width: 100%;
			height: 100vh;
			position: sticky;
			top: 0;
			left: 0;
			z-index: 0;
			overflow: hidden;
			pointer-events: none;
		}
			.service__obj__belt {
				height: calc((176 / var(--vw)) * 100vw);
				overflow: hidden;
				position: absolute;
				bottom: calc((25 / var(--vw)) * 100vw);
				left: 0;
				right: 0;
				transform: translateZ(0);
			}
				.service__obj__belt__inner {
					display: flex;
					align-items: center;
					width: 100%;
					height: 100%;
				}
					.service__obj__belt__item {
						display: flex;
						align-items: center;
						flex-shrink: 0;
						width: fit-content;
						height: 100%;
						animation: service_obj_belt-loop 50s linear infinite;
					}
						.service__obj__belt__item svg {
							flex-shrink: 0;
							width: auto;
							height: 100%;
						}
				@keyframes service_obj_belt-loop {
					from { transform: translate3d(0, 0, 0); }
					to { transform: translate3d(-50%, 0, 0); }
				}
			.service__obj__character {
				width: calc((72 / var(--vw)) * 100vw);
				height: auto;
				position: absolute;
				bottom: calc((10 / var(--vw)) * 100vw);
				left: calc((13 / var(--vw)) * 100vw);
				z-index: 1;
				transform: translateZ(0);
			}
		.service__contents {
			width: 100%;
			height: auto;
			margin-top: -100vh;
		}
			.service__contents__inner {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				width: calc((1200 / var(--vw)) * 100%);
				height: 100%;
				margin: 0 auto;
			}
				.service__contents__left {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: calc((493 / 1200) * 100%);
					height: 100vh;
					padding: calc((104 / 988) * 100vh) 0 0;
					position: sticky;
					top: 0;
				}
					.service__heading {
						width: 100%;
						height: auto;
						position: absolute;
						top: calc((143 / 988) * 100vh);
						left: 0;
					}
						.service__heading__main_text {
							width: calc((189 / 493) * 100%);
							margin: 0 auto calc((13 / var(--vw)) * 100vw) 0;
						}
							.service__heading__main_text svg {
								fill: var(--c-white);
							}
						.service__heading__sub_text {
							font-size: calc((14 / var(--vw)) * 100vw);
							color: var(--c-white);
						}
					.service__nav_wrap {
						display: contents;
					}
						.service__nav {
							width: min(calc((327 / 493) * 100%), 327px);
							height: auto;
							position: relative;
						}
							.service__nav__list {
								display: flex;
								flex-direction: column;
								gap: min(calc((16 / var(--vw)) * 100vw), 16px);
								width: 100%;
								height: auto;
								counter-reset: number 0;
							}
								.service__nav__list__item {
									width: 100%;
									height: auto;
									padding: min(calc((14 / var(--vw)) * 100vw), 14px) 0 min(calc((14 / var(--vw)) * 100vw), 14px) min(calc((62 / var(--vw)) * 100vw), 62px);
									border-radius: 9999px;
									border: solid 1px var(--c-white);
									position: relative;
									cursor: pointer;
								}
								._active.service__nav__list__item {
									background-color: var(--c-white);
								}
									.service__nav__list__item__line {
										display: block;
										width: 1px;
										height: min(calc((16 / var(--vw)) * 100vw), 16px);
										background-color: var(--c-white);
										position: absolute;
										bottom: 100%;
										left: 50%;
										transform: translateX(-50%) scaleY(0);
										transform-origin: top center;
									}
									.service__nav__list__item::before {
										counter-increment: number 1;
										content: counter(number,decimal-leading-zero) '';
										display: block;
										width: fit-content;
										height: auto;
										font-family: "Roboto", sans-serif;
										font-size: min(calc((16 / var(--vw)) * 100vw), 16px);
										font-weight: 500;
										line-height: 1.5;
										letter-spacing: 0.05em;
										color: var(--c-white);
										position: absolute;
										top: min(calc((13 / var(--vw)) * 100vw), 13px);
										left: min(calc((27 / var(--vw)) * 100vw), 27px);
										z-index: 1;
									}
									._active.service__nav__list__item::before {
										color: var(--c-blue);
									}
									.service__nav__list__item__en_text {
										display: block;
										padding-left: min(calc((2 / var(--vw)) * 100vw), 2px);
										font-size: min(calc((14 / var(--vw)) * 100vw), 14px);
										font-weight: 500;
										line-height: 1.5;
										letter-spacing: 0.05em;
										color: var(--c-white);
									}
									._active .service__nav__list__item__en_text {
										color: var(--c-blue);
									}
									.service__nav__list__item__ja_text {
										display: block;
										font-size: min(calc((16 / var(--vw)) * 100vw), 16px);
										font-weight: 700;
										line-height: 1.5;
										letter-spacing: 0.05em;
										color: var(--c-white);
									}
									._active .service__nav__list__item__ja_text {
										color: var(--c-main-blue);
									}
							@media (any-hover: hover) {
								.service__nav__list__item {
									transition: .4s;
								}
								.service__nav__list__item:hover {
									background-color: var(--c-white);
								}
									.service__nav__list__item::before {
										transition: .4s;
									}
									.service__nav__list__item:hover::before {
										color: var(--c-blue);
									}
									.service__nav__list__item__en_text {
										transition: .4s;
									}
									.service__nav__list__item:hover .service__nav__list__item__en_text {
										color: var(--c-blue);
									}
									.service__nav__list__item__ja_text {
										transition: .4s;
									}
									.service__nav__list__item:hover .service__nav__list__item__ja_text {
										color: var(--c-main-blue);
									}
							}
					.service__btn_wrap {
						width: min(calc((327 / 493) * 100%), 327px);
						height: min(calc((70 / var(--vw)) * 100vw), 70px);
						margin: min(calc((34 / var(--vw)) * 100vw), 34px) auto 0 0;
					}
						.service__btn_wrap .cmn_btn {
							padding-right: min(calc((13 / 327) * 100%), 13px);
						}
							.service__btn_wrap .cmn_btn__text {
								font-size: min(calc((14 / var(--vw)) * 100vw), 14px);
							}
							.service__btn_wrap .cmn_btn__arrow {
								width: min(calc((39 / 327) * 100%), 39px);
								height: min(calc((31 / var(--vw)) * 100vw), 31px);
							}
								.service__btn_wrap .cmn_btn__arrow svg {
									width: min(calc((10 / var(--vw)) * 100vw), 10px);
								}
				.service__contents__right {
					width: calc((707 / 1200) * 100%);
					height: 100%;
				}
					.service__contents__card_list {
						width: 100%;
						height: auto;
					}
						.service__contents__card_list__item {
							display: flex;
							align-items: center;
							width: 100%;
							height: 100vh;
						}
							.service__contents__card_list__item__inner {
								width: 100%;
								height: auto;
								aspect-ratio: 707 / 550;
								background-color: var(--c-white);
								border-radius: calc((20 / var(--vw)) * 100vw);
								overflow: hidden;	
								position: relative;
							}
								.service__contents__card_list__item__number {
									display: flex;
									justify-content: center;
									align-items: center;
									width: calc((88 / 707) * 100%);
									aspect-ratio: 1 / 1;
									border-radius: 0 0 calc((20 / var(--vw)) * 100vw) 0;
									background-image: url(../image/btn-bg.webp);
									background-size: auto 130%;
									background-position: center;
									background-repeat: no-repeat;
									position: absolute;
									top: 0;
									left: 0;
								}
									.service__contents__card_list__item__number__text {
										font-size: 24px;
										font-weight: 500;
										line-height: 1;
										color: var(--c-white);
										margin: 0;
									}
								.service__contents__card_list__item__sub_heading {
									font-size: calc((12 / var(--vw)) * 100vw);
									font-weight: 500;
									line-height: 1.5;
									letter-spacing: 0.05em;
									color: var(--c-main-blue);
									position: absolute;
									top: calc((29 / 550) * 100%);
									right: calc((31 / 707) * 100%);
								}
								.service__contents__card_list__item__image {
									height: auto;
									position: absolute;
									left: 50%;
									transform: translateX(-50%);
									overflow: hidden;
								}
								._01 .service__contents__card_list__item__image {
									width: calc((260 / 707) * 100%);
									aspect-ratio: 260 / 199;
									top: calc((132 / 550) * 100%);
								}
								._02 .service__contents__card_list__item__image {
									width: calc((288 / 707) * 100%);
									aspect-ratio: 288 / 209;
									top: calc((149 / 550) * 100%);
								}
								._03 .service__contents__card_list__item__image {
									width: calc((282 / 707) * 100%);
									aspect-ratio: 282 / 224;
									top: calc((134 / 550) * 100%);
								}
								._04 .service__contents__card_list__item__image {
									width: calc((269 / 707) * 100%);
									aspect-ratio: 269 / 195;
									top: calc((134 / 550) * 100%);
								}
									.service__contents__card_list__item__image img {
										height: auto;
										position: absolute;
										pointer-events: none;
									}
									._01 .service__contents__card_list__item__image img {
										width: calc((1076 / 260) * 100%);
										top: calc((-111 / 199) * 100%);
										left: calc((-569 / 260) * 100%);
									}
									._02 .service__contents__card_list__item__image img {
										width: calc((1061 / 288) * 100%);
										top: calc((-113 / 209) * 100%);
										left: calc((-137 / 288) * 100%);
									}
									._03 .service__contents__card_list__item__image img {
										width: calc((1277 / 282) * 100%);
										top: calc((-554 / 224) * 100%);
										left: calc((-158 / 282) * 100%);
									}
									._04 .service__contents__card_list__item__image img {
										width: calc((1164 / 269) * 100%);
										top: calc((-510 / 195) * 100%);
										left: calc((-634 / 269) * 100%);
									}
								.service__contents__card_list__item__contents {
									display: flex;
									justify-content: space-between;
									align-items: center;
									width: calc((567 / 707) * 100%);
									height: auto;
									position: absolute;
									bottom: calc((96 / 550) * 100%);
									left: 50%;
									transform: translate(-50%, 50%);
								}
									.service__contents__card_list__item__heading {
										width: fit-content;
										height: auto;
										font-size: calc((26 / var(--vw)) * 100vw);
										font-weight: 700;
										line-height: 1.5;
										letter-spacing: 0.05em;
										color: var(--c-black);
									}
									.service__contents__card_list__item__category_wrap {
										width: calc((306 / 567) * 100%);
										height: auto;
									}
										.service__contents__card_list__item__category_list {
											display: flex;
											justify-content: flex-start;
											align-items: flex-start;
											flex-wrap: wrap;
											gap: 9px 7px;
											width: 100%;
											height: auto;
										}
											.service__contents__card_list__item__category_list__item {
												padding-left: calc((17 / var(--vw)) * 100vw);
												font-size: calc((14 / var(--vw)) * 100vw);
												font-weight: 500;
												line-height: 1.5;
												letter-spacing: 0em;
												color: var(--c-black);
												position: relative;
											}
												.service__contents__card_list__item__category_list__item::before {
													content: '';
													display: block;
													width: calc((11 / var(--vw)) * 100vw);
													height: calc((11 / var(--vw)) * 100vw);
													border-radius: 9999px;
													background-color: var(--c-main-blue);
													position: absolute;
													top: 50%;
													left: 0;
													transform: translateY(-50%);
												}
								.service__contents__card_list__item__etc {
									font-size: calc((14 / var(--vw)) * 100vw);
									font-weight: 500;
									line-height: 1.5;
									color: var(--c-black);
									position: absolute;
									bottom: calc((28 / 550) * 100%);
									right: calc((31 / 707) * 100%);
								}

#blog {
	width: 100%;
	height: auto;
	padding: max(calc((105 / var(--vw)) * 100vw), 105px) 0 0;
	background-color: var(--c-bg-gray);
	position: relative;
	z-index: 2;
	overflow: clip;
}
	.blog__inner {
		width: calc((1360 / var(--vw)) * 100%);
		height: auto;
		margin: 0 auto;
	}
		.blog__contents {
			width: 100%;
			height: auto;
			border-radius: max(calc((40 / var(--vw)) * 100vw), 40px);
			background-color: var(--c-white);
			padding: max(calc((100 / var(--vw)) * 100vw), 100px) 0 max(calc((65 / var(--vw)) * 100vw), 65px);
		}
			.blog__contents__inner {
				width: calc((1200 / 1360) * 100%);
				height: auto;
				margin: 0 auto;
			}
				.blog__contents__top {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					width: 100%;
					height: auto;
					position: relative;
				}
					.blog__heading {
						width: fit-content;
						height: auto;
					}
						.blog__heading__main_text_wrap {
							display: flex;
							justify-content: flex-start;
							align-items: flex-end;
							width: fit-content;
							height: auto;
							margin: 0 auto max(calc((17 / var(--vw)) * 100vw), 17px) 0;
						}
							.blog__heading__icon {
								width: max(calc((46 / var(--vw)) * 100vw), 46px);
								height: auto;
								margin-right: max(calc((20 / var(--vw)) * 100vw), 20px);
								transform-origin: right bottom;
								opacity: 0;
								transform: scale(0.6);
								transition: transform .4s cubic-bezier(0.34, 1.7, 0.64, 1),
											opacity .3s ease-out,
											backdrop-filter .4s ease-out;
							}
							._run .blog__heading__icon {
								opacity: 1;
								transform: scale(1);
							}
							.blog__heading__main_text {
								width: max(calc((408 / var(--vw)) * 100vw), 408px);
							}
								.blog__heading__main_text svg {
									fill: var(--c-black);
								}
						.blog__heading__sub_text {
							color: var(--c-black);
						}
					.blog__obj {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						gap: max(calc((40 / var(--vw)) * 100vw), 40px);
						width: fit-content;
						height: auto;
						position: absolute;
						top: max(calc((-33 / var(--vw)) * 100vw), -33px);
						right: max(calc((-20 / 1200) * 100%), -20px);
						z-index: 1;
					}
						.blog__obj__balloon {
							display: flex;
							justify-content: center;
							align-items: center;
							width: max(calc((367 / var(--vw)) * 100vw), 367px);
							height: max(calc((66 / var(--vw)) * 100vw), 66px);
							border-radius: 9999px;
							border: solid max(calc((1 / var(--vw)) * 100vw), 1px) var(--c-black);
							background-color: var(--c-white);
							position: relative;
							top: max(calc((2 / var(--vw)) * 100vw), 2px);
							transform: translateX(0.6vw);
							opacity: 0;
							transition: .6s;
							transition-delay: .75s;
							z-index: 2;
						}
						._run .blog__obj__balloon {
							transform: translateX(0);
							opacity: 1;
						}
							.blog__obj__balloon__text {
								font-size: max(calc((12 / var(--vw)) * 100vw), 12px);
								font-weight: 500;
								line-height: 1.5;
								letter-spacing: 0.1em;
								color: var(--c-black);
								overflow: hidden;
							}
								.blog__obj__balloon__text span {
									display: inline-block;
									transform: translateY(100%);
									transition: .6s;
								}
								._run .blog__obj__balloon__text span {
									transform: translateY(0);
								}
							.blog__obj__balloon__line {
								display: block;
								width: max(calc((20 / var(--vw)) * 100vw), 20px);
								height: max(calc((1 / var(--vw)) * 100vw), 1px);
								background-color: var(--c-black);
								position: absolute;
								top: 50%;
								right: calc((-10 / 367) * 100%);
								transform: translateY(-50%);
								z-index: 2;
							}
						.blog__obj__character {
							width: max(calc((79 / var(--vw)) * 100vw), 79px);
							height: auto;
							opacity: 0;
							transform: translate(40%, -70%) scale(0.9);
							transform-origin: center bottom;
						}
						._run .blog__obj__character {
							animation: blog_obj_character-in .75s cubic-bezier(.55, 0, .35, 1) forwards;
						}
						@keyframes blog_obj_character-in {
							0%   { opacity: 0; transform: translate(30%, -70%) scale(1); }
							60%  {             transform: scale(1.15, 0.85); }
							65%  { opacity: 1; transform: translate(0, 0) }
							70%  {             transform: translate(0, 0) scale(0.95, 1.05); }
							90%  {             transform: translate(0, 0) scale(1); }
							100% { opacity: 1; transform: translate(0, 0) scale(1); }
						}
				.blog__list_wrap {
					width: 100%;
					height: auto;
					margin-top: max(calc((40 / var(--vw)) * 100vw), 40px);
				}
					.blog__list {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						gap: max(calc((39 / var(--vw)) * 100vw), 39px);
						width: 100%;
						height: auto;
					}
						.blog__list__item {
							width: 100%;
							height: auto;
							transform: translateY(0.5vw);
							opacity: 0;
							transition: .6s;
						}
						.blog__list__item:nth-child(2) {
							transition-delay: .15s;
						}
						.blog__list__item:nth-child(3) {
							transition-delay: .3s;
						}
						._run .blog__list__item {
							transform: translateY(0);
							opacity: 1;
						}
							.blog__list__item__link {
								display: block;
								width: 100%;
								height: 100%;
							}
								.blog__list__item__thumbnail {
									width: 100%;
									aspect-ratio: 308 / 161.22;
									margin: 0;
									border-radius: max(calc((5 / var(--vw)) * 100vw), 5px);
									background-color: var(--c-bg-gray);
									overflow: hidden;
								}
									.blog__list__item__thumbnail img {
										height: 100%;
										object-fit: cover;
										object-position: center;
									}
								.blog__list__item__details {
									width: 100%;
									height: auto;
									padding: max(calc((18 / var(--vw)) * 100vw), 18px) max(calc((7 / var(--vw)) * 100vw), 7px) 0;
									position: relative;
								}
									.blog__list__item__date {
										display: block;
										width: 100%;
										height: auto;
										margin: 0 auto max(calc((8 / var(--vw)) * 100vw), 8px);
										font-size: max(calc((12 / var(--vw)) * 100vw), 12px);
										font-weight: 500;
										line-height: 1.5;
										letter-spacing: 0.05em;
										color: var(--c-light-gray);
									}
									.blog__list__item__title {
										width: 100%;
										height: auto;
										margin: 0 auto max(calc((20 / var(--vw)) * 100vw), 20px);
										font-size: max(calc((14 / var(--vw)) * 100vw), 14px);
										font-weight: 500;
										line-height: 1.5;
										letter-spacing: 0.05em;
										color: var(--c-black);
									}
									.blog__list__item__author {
										display: flex;
										justify-content: flex-start;
										align-items: center;
										gap: max(calc((10 / var(--vw)) * 100vw), 10px);
										width: 100%;
										height: auto;
									}
										.blog__list__item__author__icon {
											display: block;
											width: max(calc((20 / var(--vw)) * 100vw), 20px);
											height: max(calc((20 / var(--vw)) * 100vw), 20px);
											border-radius: 9999px;
											overflow: hidden;
											flex-shrink: 0;
										}
											.blog__list__item__author__icon img {
												height: 100%;
												object-fit: cover;
												object-position: center;
											}
										.blog__list__item__author__name {
											width: fit-content;
											height: auto;
											font-size: max(calc((10 / var(--vw)) * 100vw), 10px);
											font-weight: 700;
											line-height: 1.5;
											letter-spacing: 0.05em;
											color: var(--c-black);
										}
									.blog__list__item__arrow {
										position: absolute;
										bottom: 0;
										right: 0;
									}
								@media (any-hover: hover) {
									.blog__list__item__link:hover .blog__list__item__arrow {
										background-color: var(--c-main-blue);
									}
										.blog__list__item__link:hover .blog__list__item__arrow svg {
											fill: var(--c-white);
										}
								}
					.blog__btn_wrap {
						margin: max(calc((70 / var(--vw)) * 100vw), 70px) auto 0;
						transform: translateY(0.5vw);
						opacity: 0;
						transition: .6s;
						transition-delay: .45s;
					}
						._run .blog__btn_wrap {
							transform: translateY(0);
							opacity: 1;
						}

#member {
	width: 100%;
	height: auto;
	padding: max(calc((85 / var(--vw)) * 100vw), 85px) 0 0;
	position: relative;
	z-index: 3;
	overflow: hidden;
}
	.member__inner {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
		.member__contents {
			width: 100%;
			height: auto;
			border-radius: max(calc((40 / var(--vw)) * 100vw), 40px);
			background-color: var(--c-blue);
			padding: max(calc((105 / var(--vw)) * 100vw), 105px) 0 max(calc((70 / var(--vw)) * 100vw), 70px);
			position: relative;
		}
			.member__obj {
				width: max(calc((107 / var(--vw)) * 100vw), 107px);
				height: auto;
				position: absolute;
				top: max(calc((-14 / var(--vw)) * 100vw), -14px);
				right: max(calc((-11 / var(--vw)) * 100vw), -11px);
				z-index: 2;
			}
				.member__obj__character {
					width: 100%;
					height: auto;
					opacity: 0;
					transform: translateY(-130%);
					transform-origin: top center;
				}
				._run .member__obj__character {
					animation: member_obj_character-slide 0.8s cubic-bezier(.5, .15, .65, .85) forwards;
				}
				@keyframes member_obj_character-slide {
					0%   { opacity: 0; transform: translateY(-130%); }
					10%  { opacity: 1; transform: translateY(-130%); }
					100% { opacity: 1; transform: translateY(0); }
				}
			.member__contents::before {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				border-radius: max(calc((40 / var(--vw)) * 100vw), 40px);
				background-image: url(../image/index/member-bg@pc.webp);
				background-size: 100% auto;
				background-position: bottom center;
				background-repeat: no-repeat;
				mix-blend-mode: multiply;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
			.member__contents__inner {
				width: calc((893 / 1360) * 100%);
				height: auto;
				margin: 0 auto;
				position: relative;
				z-index: 2;
			}
				.member__heading {
					width: 100%;
					height: auto;
					margin: 0 auto max(calc((67 / var(--vw)) * 100vw), 67px);
				}
					.member__heading__main_text {
						width: max(calc((523 / var(--vw)) * 100vw), 523px);
						margin: 0 auto max(calc((16 / var(--vw)) * 100vw), 16px);
					}
						.member__heading__main_text svg {
							fill: var(--c-white);
						}
					.member__heading__sub_text {
						text-align: center;
						color: var(--c-white);
					}
				.member__list_wrap {
					width: 100%;
					height: auto;
				}
					.member__list {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						gap: max(calc((25 / var(--vw)) * 100vw), 25px) max(calc((20 / var(--vw)) * 100vw), 20px);
						width: 100%;
						height: auto;
					}
						.member__list__item {
							width: 100%;
							height: auto;
							padding: max(calc((13 / var(--vw)) * 100vw), 13px) max(calc((17 / var(--vw)) * 100vw), 17px) max(calc((20 / var(--vw)) * 100vw), 20px);
							border-radius: max(calc((5 / var(--vw)) * 100vw), 5px);
							background-color: var(--c-white);
							position: relative;
							opacity: 0;
						}
						._run .member__list__item {
							animation: member_list_item-pop_in .6s ease forwards;
						}
						._run .member__list__item:nth-child(2) { animation-delay: .08s; }
						._run .member__list__item:nth-child(3) { animation-delay: .16s; }
						._run .member__list__item:nth-child(4) { animation-delay: .24s; }
						._run .member__list__item:nth-child(5) { animation-delay: .32s; }
						._run .member__list__item:nth-child(6) { animation-delay: .4s; }
						@keyframes member_list_item-pop_in {
							0%   { opacity: 0; transform: scale(0.85); }
							60%  { opacity: 1; transform: scale(1.03); }
							100% { opacity: 1; transform: scale(1); }
						}
							.member__list__item__new_icon {
								width: calc((68 / 283) * 100%);
								height: auto;
								position: absolute;
								top: max(calc((-17 / var(--vw)) * 100vw), -17px);
								right: max(calc((-22 / var(--vw)) * 100vw), -22px);
								opacity: 0;
							}
							._run .member__list__item__new_icon {
								animation: member_list_item_new_icon-fade_in 0.4s ease forwards;
							}
							._run .member__list__item:nth-child(2) .member__list__item__new_icon { animation-delay: .6s; }
							._run .member__list__item:nth-child(3) .member__list__item__new_icon { animation-delay: .7s; }
							._run .member__list__item:nth-child(4) .member__list__item__new_icon { animation-delay: .8s; }
							._run .member__list__item:nth-child(5) .member__list__item__new_icon { animation-delay: .9s; }
							._run .member__list__item:nth-child(6) .member__list__item__new_icon { animation-delay: 1s; }
							@keyframes member_list_item_new_icon-fade_in {
								0%   { opacity: 0; transform: scale(0.6); }
								100% { opacity: 1; transform: scale(1); }
							}
								.member__list__item__new_icon__text {
									width: 100%;
									height: auto;
									padding: 0 0 0 max(calc((3 / var(--vw)) * 100vw), 3px);
									font-size: max(calc((12 / var(--vw)) * 100vw), 12px);
									font-weight: 900;
									line-height: 1.3;
									letter-spacing: 0.05em;
									text-align: center;
									color: var(--c-white);
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%, -50%);
								}
							.member__list__item__position {
								width: 100%;
								height: auto;
								font-size: max(calc((12 / var(--vw)) * 100vw), 12px);
								font-weight: 500;
								line-height: 1.5;
								letter-spacing: 0.05em;
								color: var(--c-light-gray);
							}
							.member__list__item__contents {
								width: 100%;
								height: auto;
								aspect-ratio: 249 / 232;
								position: relative;
							}
								.member__list__item__image {
									width: 100%;
									height: auto;
								}
								.member__list__item__profile {
									width: 100%;
									height: auto;
									position: absolute;
									bottom: 0;
									left: 0;
									z-index: 2;
								}
									.member__list__item__profile__position {
										width: fit-content;
										height: auto;
										padding: max(calc((2 / var(--vw)) * 100vw), 2px) max(calc((12 / var(--vw)) * 100vw), 12px);
										border-radius: max(calc((3 / var(--vw)) * 100vw), 3px) max(calc((3 / var(--vw)) * 100vw), 3px) 0 0;
										background-color: var(--c-black);
										font-size: max(calc((12 / var(--vw)) * 100vw), 12px);
										font-weight: 700;
										line-height: 1.5;
										letter-spacing: 0em;
										color: var(--c-white);
										position: absolute;
										top: 0;
										left: 0;
										transform: translateY(-100%);
									}
										.member__list__item__profile__position::after {
											content: '';
											display: block;
											width: max(calc((11 / var(--vw)) * 100vw), 11px);
											height: max(calc((11 / var(--vw)) * 100vw), 11px);
											background-image: url(../image/index/memper-position_edge.svg);
											background-size: cover;
											background-position: center;
											background-repeat: no-repeat;
											position: absolute;
											bottom: 0;
											left: 100%;
										}
									.member__list__item__profile__name_wrap {
										display: flex;
										justify-content: flex-start;
										align-items: center;
										gap: max(calc((9 / var(--vw)) * 100vw), 9px);
										width: 100%;
										height: auto;
										padding: max(calc((3 / var(--vw)) * 100vw), 3px) 0 max(calc((4 / var(--vw)) * 100vw), 4px) max(calc((12 / var(--vw)) * 100vw), 12px);
										border-radius: 0 max(calc((3 / var(--vw)) * 100vw), 3px) max(calc((3 / var(--vw)) * 100vw), 3px) max(calc((3 / var(--vw)) * 100vw), 3px);
										background-color: rgba(255, 255, 255, 0.7);
										backdrop-filter: blur(10px);
										-webkit-backdrop-filter: blur(10px);
									}
										.member__list__item__profile__name__main_text {
											width: fit-content;
											height: auto;
											font-size: max(calc((16 / var(--vw)) * 100vw), 16px);
											font-weight: 700;
											line-height: 1.5;
											letter-spacing: 0.05em;
											color: var(--c-black);
										}
										.member__list__item__profile__name__sub_text {
											width: fit-content;
											height: auto;
											padding-top: max(calc((2 / var(--vw)) * 100vw), 2px);
											font-size: max(calc((10 / var(--vw)) * 100vw), 10px);
											font-weight: 500;
											line-height: 1.5;
											letter-spacing: 0.05em;
											color: var(--c-light-gray);
										}
					.member__btn_wrap {
						margin: max(calc((50 / var(--vw)) * 100vw), 50px) auto 0;
						transform: translateY(0.5vw);
						opacity: 0;
						transition: .6s;
						transition-delay: .9s;
					}
					._run .member__btn_wrap {
						transform: translateY(0);
						opacity: 1;
					}

/* ================================================== PC */
@media all and (min-width: 1025px) {

/* SERVICE */
						.service__nav {
							opacity: 0;
							transition: .6s;
						}
						.service__nav._run {
							opacity: 1;
						}
					.service__btn_wrap {
						transform: translateY(0.3vw);
						opacity: 0;
						transition: .6s;
					}
					._run.service__btn_wrap {
						transform: translateY(0);
						opacity: 1;
					}

}

@media all and (min-width: 1025px) and (max-width: 1600px) {
							.service__contents__card_list__item {
								position: sticky;
								top: 0;
							}

}

@media all and (max-width: 1440px) {
/* MEMBER */
			.member__contents__inner {
				width: 90%;
				max-width: 893px;
			}
}

/* ================================================== SP */
@media all and (max-width: 1024px) {
/* HERO_BG */
#hero_bg {
	height: 100vh;
	overflow: initial;
	overflow-x: clip;
}
	#hero_bg::before {
		background-image: url(../image/bg@sp.webp);
	}
	.hero_bg__inner {
		min-width: initial;
		/* 100svh は iOS Safari で 100lvh と同値を返すバグがあるため、JS (index.js) で
		   visualViewport.height を inline height に当てて上書きする。
		   CSS の値は JS off / 非 iOS のフォールバック。 */
		height: 100svh;
		aspect-ratio: initial;
		position: absolute;
		top: 0;
		left: 0;
		transform: none;
	}
		.hero_bg__main {
			width: calc((129.68 / var(--vw)) * 100vw);
			top: calc((323 / 663) * 100%);
			left: calc((193 / var(--vw)) * 100vw);
		}
			.hero_bg__main__character {
				width: calc((75 / 129.68) * 100%);
				top: calc((71.25 / 204.68) * 100%);
				left: calc((28 / 129.68) * 100%);
			}
		.hero_bg__image {
			height: auto;
			position: absolute;
			transform: translate(-50%, -50%);
		}
		.hero_bg__image._01 {
			width: calc((125 / var(--vw)) * 100%);
			top: calc((67 / 663) * 100%);
			left: calc((33 / var(--vw)) * 100%);
		}
		.hero_bg__image._02 {
			width: calc((122 / var(--vw)) * 100%);
			top: calc((103 / 663) * 100%);
			left: calc((189 / var(--vw)) * 100%);
		}
		.hero_bg__image._03 {
			width: calc((122 / var(--vw)) * 100%);
			top: calc((63 / 663) * 100%);
			left: calc((344 / var(--vw)) * 100%);
		}
		.hero_bg__image._04 {
			display: none;
		}
		.hero_bg__image._05 {
			display: none;
		}
		.hero_bg__image._06 {
			width: calc((122 / var(--vw)) * 100%);
			top: calc((270 / 663) * 100%);
			left: calc((34 / var(--vw)) * 100%);
		}
		.hero_bg__image._07 {
			width: calc((112 / var(--vw)) * 100%);
			top: calc((254 / 663) * 100%);
			left: calc((347 / var(--vw)) * 100%);
		}
		.hero_bg__image._08 {
			display: none;
		}
		.hero_bg__image._09 {
			width: calc((118 / var(--vw)) * 100%);
			top: calc((460.5 / 663) * 100%);
			left: calc((37 / var(--vw)) * 100%);
		}
		.hero_bg__image._10 {
			width: calc((113 / var(--vw)) * 100%);
			top: calc((533.5 / 663) * 100%);
			left: calc((198.5 / var(--vw)) * 100%);
		}
		.hero_bg__image._11 {
			width: calc((113 / var(--vw)) * 100%);
			top: calc((458.5 / 663) * 100%);
			left: calc((348.5 / var(--vw)) * 100%);
		}

/* HERO */
#hero {
	height: 100svh;
}
		.hero__lines {
			width: calc((93 / var(--vw)) * 100vw);
			top: calc((206 / 663) * 100%);
			left: calc((188 / var(--vw)) * 100vw);
		}
			.hero__lines__text {
				width: calc((51.61 / 93) * 100%);
				top: calc((21.8 / 57) * 100%);
				left: calc((20.94 / 93) * 100%);
			}
		.hero__cta {
			width: calc((60 / var(--vw)) * 100vw);
			aspect-ratio: 1 / 1;
			bottom: calc((31 / 663) * 100svh);
			left: auto;
			right: calc((18 / var(--vw)) * 100vw);
		}
			.hero__cta__link {
				height: 100%;
				background-color: var(--c-main-blue);
				border-radius: 9999px;
			}
				.hero__cta__hana._01 {
					width: calc((15 / 60) * 100%);
					top: auto;
					bottom: calc((3 / 60) * 100%);
					right: auto;
					left: 0;
				}
				.hero__cta__hana._02 {
					width: calc((20 / 60) * 100%);
					top: calc((-4 / 60) * 100%);
					left: auto;
					right: 0;
				}
				.hero__cta__balloon {
					height: 100%;
				}
					.hero__cta__balloon__icon {
						display: block;
						width: calc((24 / 60) * 100%);
						height: auto;
						position: absolute;
						top: calc((23 / 60) * 100%);
						left: calc((18 / 60) * 100%);
						z-index: 2;
					}
						.hero__cta__balloon__icon svg {
							fill: var(--c-white);
						}
		.hero__copy {
			width: calc((139 / var(--vw)) * 100vw);
			bottom: calc((29 / 663) * 100svh);
			right: auto;
			left: calc((21 / var(--vw)) * 100vw);
		}
			.hero__copy__main_text {
				width: calc((133 / 139) * 100%);
				margin: 0 auto;
			}
			.hero__copy__sub_text {
				font-size: calc((10 / var(--vw)) * 100vw);
				letter-spacing: 0em;
			}

/* ABOUT */
#about {
	padding: calc((40 / var(--vw)) * 100vw) 0 calc((90 / var(--vw)) * 100vw);
}
	.about__inner {
		width: calc((334 / var(--vw)) * 100%);
	}
		.about__contents {
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			padding: calc((29 / var(--vw)) * 100vw) calc((25 / var(--vw)) * 100vw) calc((49 / var(--vw)) * 100vw);
			border: solid calc((1 / var(--vw)) * 100vw) var(--c-white);
			border-radius: calc((10 / var(--vw)) * 100vw);
			background-color: rgba(255, 255, 255, 0.6);
		}
		._run.about__contents {
			backdrop-filter: blur(15px);
			-webkit-backdrop-filter: blur(15px);
		}
			.about__contents__left {
				width: 100%;
				margin: 0 auto calc((30 / var(--vw)) * 100vw);
			}
				.about__logo {
					width: calc((40 / var(--vw)) * 100vw);
					margin: 0 auto calc((20 / var(--vw)) * 100vw);
				}
				.about__heading {
					font-size: calc((26 / var(--vw)) * 100vw);
					text-align: center;
				}
			.about__contents__right {
				flex: initial;
				width: 100%;
				max-width: initial;
			}
				.about__contents__ja_text {
					margin: 0 auto calc((10 / var(--vw)) * 100vw);
					font-size: calc((14 / var(--vw)) * 100vw);
				}
				.about__contents__en_text {
					font-size: calc((12 / var(--vw)) * 100vw);
					line-height: 2;
				}
				.about__contents__btn_wrap {
					width: calc((115 / var(--vw)) * 100vw);
					margin: calc((20 / var(--vw)) * 100vw) auto 0;
				}
						.about__contents__btn__text {
							font-size: calc((12 / var(--vw)) * 100vw);
						}

/* WORKS */
#works {
	padding: calc((50 / var(--vw)) * 100vw) 0;
	border-radius: calc((50 / var(--vw)) * 100vw) calc((50 / var(--vw)) * 100vw) 0 0;
	border: solid calc((1 / var(--vw)) * 100vw) var(--c-white);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	overflow: clip;
}
	.works__inner {
		width: calc((356 / var(--vw)) * 100%);
	}
		.works__heading {
			margin: 0 auto calc((60 / var(--vw)) * 100vw);
		}
			.works__heading__main_text {
				width: calc((168 / var(--vw)) * 100vw);
				margin: 0 auto calc((10 / var(--vw)) * 100vw);
			}
			.works__heading__sub_text {
				text-align: center;
			}
		.works__new_item {
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			padding: calc((39 / var(--vw)) * 100vw) calc((10 / var(--vw)) * 100vw) calc((16 / var(--vw)) * 100vw);
			margin: 0 auto calc((40 / var(--vw)) * 100vw);
			border-radius: calc((10 / var(--vw)) * 100vw);
			border: solid calc((1 / var(--vw)) * 100vw) var(--c-gray);
		}
			.works__new_item__pick_up {
				width: calc((76 / var(--vw)) * 100vw);
				top: calc((-42 / var(--vw)) * 100vw);
				left: calc((-13 / var(--vw)) * 100vw);
			}
				.works__new_item__pick_up__text {
					font-size: calc((12 / var(--vw)) * 100vw);
					top: calc((29 / var(--vw)) * 100vw);
				}
			.works__new_item__label_wrap {
				margin: 0 auto calc((20 / var(--vw)) * 100vw);
				order: 1;
			}
				.works__new_item__label {
					padding: calc((3 / var(--vw)) * 100vw) calc((25 / var(--vw)) * 100vw) calc((2 / var(--vw)) * 100vw);
					margin: 0 auto;
					font-size: calc((10 / var(--vw)) * 100vw);
				}
			.works__new_item__details {
				width: 100%;
				padding: 0 calc((13 / var(--vw)) * 100vw);
				margin: 0 auto;
				order: 3;
			}
				.works__new_item__details__title {
					margin: 0 auto calc((20 / var(--vw)) * 100vw);
				}
					.works__new_item__details__title__sub_text {
						margin: 0 auto calc((10 / var(--vw)) * 100vw);
						font-size: calc((10 / var(--vw)) * 100vw);
					}
					.works__new_item__details__title__main_text {
						font-size: calc((24 / var(--vw)) * 100vw);
					}
				.works__new_item__details__heading {
					margin: 0 auto calc((10 / var(--vw)) * 100vw);
					font-size: calc((18 / var(--vw)) * 100vw);
				}
				.works__new_item__details__text {
					margin: 0 auto calc((30 / var(--vw)) * 100vw);
					font-size: calc((12 / var(--vw)) * 100vw);
				}
				.works__new_item__details__category_list {
					gap: calc((5 / var(--vw)) * 100vw) calc((4 / var(--vw)) * 100vw);
				}
					.works__new_item__details__category_list__item {
						padding: calc((1 / var(--vw)) * 100vw) calc((4 / var(--vw)) * 100vw) calc((2 / var(--vw)) * 100vw);
						border-radius: calc((1 / var(--vw)) * 100vw);
						border: solid calc((1 / var(--vw)) * 100vw) var(--c-dark-gray);
						font-size: calc((12 / var(--vw)) * 100vw);
					}
			.works__new_item__image {
				width: 100%;
				margin: 0 auto calc((20 / var(--vw)) * 100vw);
				border-radius: calc((10 / var(--vw)) * 100vw);
				order: 2;
			}
			.works__new_item__btn_wrap {
				padding: 0 calc((13 / var(--vw)) * 100vw);
				margin: calc((20 / var(--vw)) * 100vw) auto 0;
				order: 4;
			}
				.works__new_item__btn {
					width: calc((115 / var(--vw)) * 100vw);
				}
					.works__new_item__btn__text {
						font-size: calc((12 / var(--vw)) * 100vw);
					}
					.works__new_item__btn__arrow {
						padding-top: calc((1 / var(--vw)) * 100vw);
					}
						.works__new_item__btn__arrow svg {
							width: calc((10 / var(--vw)) * 100vw);
						}
		.works__list {
			overflow: hidden;
			position: relative;
		}
			.works__list .swiper-wrapper {
				display: flex;
				grid-template-columns: initial;
				gap: 0;
			}
			.works__list__item {
				width: calc((300 / var(--vw)) * 100vw);
				height: auto;
				flex-shrink: 0;
				padding: calc((10 / var(--vw)) * 100vw) calc((9 / var(--vw)) * 100vw) calc((15 / var(--vw)) * 100vw);
				border-radius: calc((10 / var(--vw)) * 100vw);
				border: solid calc((1 / var(--vw)) * 100vw) var(--c-gray);
			}
			.works__list__item.swiper-slide-active {
				filter: drop-shadow(0 0 10px rgba(0, 0, calc((7 / var(--vw)) * 100vw), 0.1));
			}
				.works__list__item__image {
					border-radius: calc((5 / var(--vw)) * 100vw);
					margin: 0 auto calc((20 / var(--vw)) * 100vw);
				}
				.works__list__item__details {
					padding: 0 calc((12 / var(--vw)) * 100vw);
				}
					.works__list__item__title {
						margin: 0 auto calc((8 / var(--vw)) * 100vw);
					}
						.works__list__item__title__sub_text {
							margin: 0 auto calc((4 / var(--vw)) * 100vw);
							font-size: calc((10 / var(--vw)) * 100vw);
						}
						.works__list__item__title__main_text {
							font-size: calc((18 / var(--vw)) * 100vw);
						}
					.works__list__item__category_list {
						width: calc((100% - ((30 / var(--vw)) * 100vw)));
						gap: calc((7 / var(--vw)) * 100vw);
					}
						.works__list__item__category_list__item {
							padding: calc((1 / var(--vw)) * 100vw) calc((4 / var(--vw)) * 100vw) calc((2 / var(--vw)) * 100vw);
							border-radius: calc((1 / var(--vw)) * 100vw);
							border: solid calc((1 / var(--vw)) * 100vw) var(--c-dark-gray);
							font-size: calc((12 / var(--vw)) * 100vw);
						}
					.works__list__item__arrow {
						width: calc((30 / var(--vw)) * 100vw);
						height: calc((20 / var(--vw)) * 100vw);
						padding-top: calc((1 / var(--vw)) * 100vw);
						border-color: var(--c-main-blue);
						background-image: none;
						position: absolute;
						bottom: calc((15 / var(--vw)) * 100vw);
						right: calc((17 / var(--vw)) * 100vw);
					}
						.works__list__item__arrow svg {
							width: calc((10 / var(--vw)) * 100vw);
							fill: var(--c-main-blue);
						}
		.works__nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: calc((292 / var(--vw)) * 100vw);
			margin: calc((30 / var(--vw)) * 100vw) auto 0;
			position: relative;
		}
			.works__nav__current,
			.works__nav__total {
				font-size: calc((12 / var(--vw)) * 100vw);
				font-weight: 700;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: var(--c-main-blue);
			}
			.works__nav__scrollbar {
				width: calc((226 / var(--vw)) * 100vw);
				height: calc((4 / var(--vw)) * 100vw);
				background-color: var(--c-gray);
				border-radius: 9999px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
				.works__nav__scrollbar__progress {
					width: 0%;
					height: 100%;
					background-color: var(--c-main-blue);
					border-radius: inherit;
					transition: width 0.2s ease;
				}
				.works__nav__scrollbar__handle {
					width: calc((16 / var(--vw)) * 100vw);
					height: calc((16 / var(--vw)) * 100vw);
					margin: 0;
					padding: 0;
					background-color: var(--c-white);
					border: none;
					border-radius: 9999px;
					position: absolute;
					top: 50%;
					left: 0%;
					transform: translate(-50%, -50%);
					transition: left 0.2s ease;
					touch-action: none;
					cursor: grab;
				}
				.works__nav__scrollbar._dragging .works__nav__scrollbar__progress,
				.works__nav__scrollbar._dragging .works__nav__scrollbar__handle {
					transition: none;
				}
				.works__nav__scrollbar._dragging .works__nav__scrollbar__handle {
					cursor: grabbing;
				}
			.works__nav__arrow_wrap {
				display: flex;
				justify-content: space-between;
				pointer-events: none;
				position: absolute;
				top: 50%;
				left: calc((16 / var(--vw)) * 100vw);
				right: calc((16 / var(--vw)) * 100vw);
				transform: translateY(-50%);
				z-index: 2;
			}
				.works__nav__arrow {
					display: flex;
					justify-content: center;
					align-items: center;
					width: calc((40 / var(--vw)) * 100vw);
					height: calc((40 / var(--vw)) * 100vw);
					border-radius: 9999px;
					background-color: rgba(255, 255, 255, 0.6);
					backdrop-filter: blur(4px);
					-webkit-backdrop-filter: blur(4px);
					border: none;
					margin: 0;
					padding: 0;
					position: static;
					pointer-events: auto;
				}
				.works__nav__arrow::after { display: none; }
				.works__nav__arrow svg {
					width: calc((9 / var(--vw)) * 100vw);
					height: auto;
					fill: var(--c-main-blue);
				}
				.works__nav__arrow._prev svg {
					transform: rotate(90deg);
				}
				.works__nav__arrow._next svg {
					transform: rotate(-90deg);
				}
				.works__nav__arrow.swiper-button-disabled {
					opacity: 0.4;
				}
		.works__btn_wrap {
			margin: calc((40 / var(--vw)) * 100vw) auto 0;
		}

/* SERVICE */
	#service::before {
		background-image: url(../image/bg@sp.webp);
	}
		.service__obj {
			/* margin-top: -100vh と単位を揃える (元 100svh だと address bar 表示時に
			   obj.height < 100vh となり、見出し位置が #service.top から上方向にずれる) */
			margin-top: 0;
		}
			.service__obj__belt {
				height: calc((46 / var(--vw)) * 100vw);
				bottom: calc((14 / 663) * 100svh);
			}
					.service__obj__belt__item {
						animation: service_obj_belt-loop 15s linear infinite;
					}
			.service__obj__character {
				width: calc((60 / var(--vw)) * 100vw);
				bottom: calc((15 / 663) * 100svh);
				left: calc((16 / var(--vw)) * 100vw);
			}
			.service__contents__inner {
				flex-direction: column;
				justify-content: flex-start;
				align-items: stretch;
				width: 100%;
				height: auto;
				/* padding-top = 100vh で、service__inner と service__contents の
				   margin-top: -100vh 合計 -200vh + service__obj.height +100vh と相殺し
				   ヘディング (.service__heading) を #service.top に着地させる */
				padding: calc((100 / var(--vw)) * 100vw) 0 calc((120 / var(--vw)) * 100vw);
			}
				.service__contents__left {
					display: contents;
				}
					.service__heading {
						margin: 0 auto calc((30 / var(--vw)) * 100vw);
						position: static;
						order: 1;
					}
						.service__heading__main_text {
							width: calc((152 / var(--vw)) * 100vw);
							margin: 0 auto calc((10 / var(--vw)) * 100vw);
						}
						.service__heading__sub_text {
							text-align: center;
						}
					.service__nav_wrap {
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: calc((20 / var(--vw)) * 100vw);
						margin: 0 auto;
						left: 0;
						right: 0;
						/* 初期: absolute + padding-top でカード._01 の下 30px 位置に内容を配置。
						   flow には影響しないので item._02 以降の位置が動かない。
						   JS が card._01 sticky 開始時に `_stuck` を付け、position: fixed に切替
						   → DOM 位置に依存せず viewport の決まった位置 (カード._01 下 30) で固定。
						   card._04 sticky 解除時に `_unstuck` を付け、position: absolute + top: 100% + 30 に切替
						   → nav が card_list の下端 + 30 の位置で card と一緒に流れる。
						   will-change で GPU 合成 layer に promote し、position 切替時の re-composite を滑らかに。 */
						position: absolute;
						top: 0;
						padding-top: calc(12svh + (468 / 663) * 100svh + (30 / var(--vw)) * 100vw);
						z-index: 10;
						will-change: transform;
					}
					.service__nav_wrap._stuck {
						position: fixed;
						top: calc(12svh + (468 / 663) * 100svh + (30 / var(--vw)) * 100vw);
						padding-top: 0;
					}
					.service__nav_wrap._unstuck {
						position: absolute;
						top: calc(100% + (30 / var(--vw)) * 100vw);
						padding-top: 0;
					}
						.service__nav {
							width: calc((350 / var(--vw)) * 100vw);
							margin: 0 auto;
						}
							.service__nav__list {
								flex-direction: row;
								justify-content: center;
								align-items: center;
								gap: calc((7 / var(--vw)) * 100vw);
								width: 100%;
							}
								.service__nav__list__item {
									flex-shrink: 0;
									width: calc((35 / var(--vw)) * 100vw);
									height: calc((35 / var(--vw)) * 100vw);
									padding: 0;
									transition: .4s;
								}
								._active.service__nav__list__item {
									width: auto;
									height: calc((35 / var(--vw)) * 100vw);
									padding: 0 calc((20 / var(--vw)) * 100vw) 0 calc((42 / var(--vw)) * 100vw);
								}
									.service__nav__list__item__line {
										display: none;
									}
									.service__nav__list__item::before {
										font-size: calc((12 / var(--vw)) * 100vw);
										top: 50%;
										left: 50%;
										transform: translate(-50%, -50%);
										transition: .4s;
									}
									._active.service__nav__list__item::before {
										top: 50%;
										left: calc((13 / var(--vw)) * 100vw);
										transform: translateY(-50%);
									}
									.service__nav__list__item__en_text {
										display: flex;
										justify-content: center;
										align-items: center;
										height: 100%;
										padding-left: 0;
										font-size: calc((10 / var(--vw)) * 100vw);
										opacity: 0;
										transform: translateY(100%);
										transition: .4s;
									}
									._active .service__nav__list__item__en_text {
										opacity: 1;
										transform: translateY(0);
									}
									.service__nav__list__item__ja_text {
										display: none;
									}
					.service__btn_wrap {
						width: calc((334 / var(--vw)) * 100vw);
						height: calc((54 / var(--vw)) * 100vw);
						/* card._04 sticky 解除タイミング (= card_list.bottom が viewport.top + card._04.height
						   に到達した scroll 位置) で btn がちょうど画面下端に来るよう、
						   card_list と btn の間に (100svh - card._04.height) 分の space を確保する。
						   これで btn が card._04 sticky 中は画面外、解除と同時に下端から自然に上がってくる動きになる。 */
						/* margin: calc(100svh - 12svh - (468 / 663) * 100svh) auto 0; */
						margin: calc((117 / var(--vw)) * 100vw) auto 0;
						order: 4;
					}
						.service__btn_wrap .cmn_btn {
							padding-right: calc((2 / var(--vw)) * 100vw);
						}
							.service__btn_wrap .cmn_btn__text {
								font-size: calc((14 / var(--vw)) * 100vw);
							}
							.service__btn_wrap .cmn_btn__arrow {
								width: calc((30 / var(--vw)) * 100vw);
								height: calc((20 / var(--vw)) * 100vw);
							}
								.service__btn_wrap .cmn_btn__arrow svg {
									width: calc((10 / var(--vw)) * 100vw);
								}
				.service__contents__right {
					width: 100%;
					height: auto;
					margin-top: -12svh;
					order: 2;
				}
				/* nav_wrap は SP で card_list の中（item._01 の直後）に挿入されるため、
				   right 側で nav 用の余白を確保する必要はない（card_list の sticky range と
				   自然に同期する）。 */
					.service__contents__card_list {
						display: flex;
						flex-direction: column;
						gap: calc((20 / var(--vw)) * 100vw);
						width: 100%;
						height: auto;
						position: relative;
					}
					/* ::after を flex の最終子として置いて content area を 1 アイテム分だけ伸ばし、
					   4 枚目（最終 item）に sticky range を確保する。
					   padding-bottom では sticky の containing block (= 親 content edge) を超えないため不可。 */
					.service__contents__card_list::after {
						content: '';
						display: block;
						height: calc(12svh + (468 / 663) * 100svh);
					}
						.service__contents__card_list__item {
							display: flex;
							justify-content: center;
							align-items: flex-start;
							width: 100%;
							height: auto;
							padding-top: 12svh;
							position: sticky;
							top: 0;
						}
						.service__contents__card_list__item._01 { z-index: 1; }
						.service__contents__card_list__item._02 { z-index: 2; }
						.service__contents__card_list__item._03 { z-index: 3; }
						.service__contents__card_list__item._04 { z-index: 4; }
							.service__contents__card_list__item__inner {
								width: calc((350 / var(--vw)) * 100vw);
								height: calc((468 / 663) * 100svh);
								aspect-ratio: initial;
								border-radius: calc((20 / var(--vw)) * 100vw);
							}
								.service__contents__card_list__item__number {
									width: calc((70 / 350) * 100%);
								}
									.service__contents__card_list__item__number__text {
										font-size: calc((18 / var(--vw)) * 100vw);
									}
								.service__contents__card_list__item__sub_heading {
									font-size: calc((12 / var(--vw)) * 100vw);
									top: calc((29 / 518) * 100%);
									right: calc((27 / var(--vw)) * 100vw);
								}
								._01 .service__contents__card_list__item__image {
									width: min(calc((210 / 350) * 100%), 305px);
									top: calc((79 / 468) * 100%);
									left: calc((178 / 350) * 100%);
								}
								._02 .service__contents__card_list__item__image {
									width: min(calc((202 / 350) * 100%), 293px);
									top: calc((90 / 468) * 100%);
									left: calc((183 / 350) * 100%);
								}
								._03 .service__contents__card_list__item__image {
									width: min(calc((180 / 350) * 100%), 260px);
									top: calc((93 / 468) * 100%);
									left: calc((168 / 350) * 100%);
								}
								._04 .service__contents__card_list__item__image {
									width: min(calc((186 / 350) * 100%), 269px);
									top: calc((93 / 468) * 100%);
									left: calc((177 / 350) * 100%);
								}
								.service__contents__card_list__item__contents {
									flex-direction: column;
									justify-content: flex-start;
									align-items: center;
									gap: calc((20 / var(--vw)) * 100vw);
									width: calc((310 / 350) * 100%);
									bottom: auto;
									top: calc((274 / 468) * 100%);
									transform: translate(-50%, 0);
								}
									.service__contents__card_list__item__heading {
										width: 100%;
										font-size: min(calc((20 / var(--vw)) * 100vw), 32px);
										text-align: center;
									}
									.service__contents__card_list__item__category_wrap {
										width: 100%;
										max-width: 520px;
									}
										.service__contents__card_list__item__category_list {
											justify-content: center;
											gap: min(calc((9 / var(--vw)) * 100vw), 13.5px) min(calc((7 / var(--vw)) * 100vw), 10.5px);
										}
											.service__contents__card_list__item__category_list__item {
												padding-left: min(calc((15 / var(--vw)) * 100vw), 24px);
												font-size: min(calc((12 / var(--vw)) * 100vw), 20px);
											}
												.service__contents__card_list__item__category_list__item::before {
													width: min(calc((9 / var(--vw)) * 100vw), 13.5px);
													height: min(calc((9 / var(--vw)) * 100vw), 13.5px);
												}
								.service__contents__card_list__item__etc {
									font-size: min(calc((12 / var(--vw)) * 100vw), 18px);
									bottom: min(calc((28 / 468) * 100%), 42px);
									right: min(calc((27 / 350) * 100%), 40.5px);
								}

/* BLOG */
#blog {
	padding: calc((58 / var(--vw)) * 100vw) 0 calc((70 / var(--vw)) * 100vw);
}
	.blog__inner {
		width: calc((334 / var(--vw)) * 100%);
	}
		.blog__contents {
			border-radius: calc((10 / var(--vw)) * 100vw);
			padding: calc((46 / var(--vw)) * 100vw) 0 calc((38 / var(--vw)) * 100vw);
		}
			.blog__contents__inner {
				width: calc((300 / var(--vw)) * 100vw);
			}
				.blog__contents__top {
					flex-direction: column;
					justify-content: flex-start;
					align-items: stretch;
				}
					.blog__heading {
						width: 100%;
						margin: 0 auto calc((43 / var(--vw)) * 100vw);
						order: 2;
					}
						.blog__heading__main_text_wrap {
							justify-content: center;
							width: 100%;
							margin: 0 auto calc((10 / var(--vw)) * 100vw);
						}
							.blog__heading__icon {
								width: calc((35 / var(--vw)) * 100vw);
								margin-right: calc((8 / var(--vw)) * 100vw);
							}
							.blog__heading__main_text {
								width: calc((248 / var(--vw)) * 100vw);
							}
						.blog__heading__sub_text {
							text-align: center;
						}
					.blog__obj {
						display: block;
						width: 100%;
						position: relative;
						top: 0;
						right: 0;
						order: 1;
					}
						.blog__obj__balloon {
							display: block;
							width: 100%;
							height: auto;
							margin: 0 auto calc((5 / var(--vw)) * 100vw);
							border-radius: initial;
							border: none;
							background-color: initial;
							position: initial;
						}
							.blog__obj__balloon__text {
								display: block;
								width: 100%;
								height: auto;
								margin: 0 auto calc((10 / var(--vw)) * 100vw);
								font-size: calc((12 / var(--vw)) * 100vw);
								text-align: center;
							}
							.blog__obj__balloon__line {
								width: calc((1 / var(--vw)) * 100vw);
								height: calc((12 / var(--vw)) * 100vw);
								margin: 0 auto;
								position: initial;
								transform: initial;
							}
						.blog__obj__character {
							width: calc((51 / var(--vw)) * 100vw);
							opacity: 0;
							transform: translate(40%, -70%) scale(0.9);
							transform-origin: center bottom;
							position: absolute;
							top: calc((-78 / var(--vw)) * 100vw);
							right: calc((-26 / var(--vw)) * 100vw);
						}
				.blog__list_wrap {
					margin-top: calc((42 / var(--vw)) * 100vw);
				}
					.blog__list {
						grid-template-columns: repeat(1, 1fr);
						gap: calc((20 / var(--vw)) * 100vw);
					}
						.blog__list__item:nth-child(n+2) {
							display: none;
						}
								.blog__list__item__thumbnail {
									border-radius: calc((10 / var(--vw)) * 100vw);
								}
								.blog__list__item__details {
									padding: calc((20 / var(--vw)) * 100vw) 0 0;
								}
									.blog__list__item__date {
										margin: 0 auto calc((8 / var(--vw)) * 100vw);
										font-size: calc((12 / var(--vw)) * 100vw);
									}
									.blog__list__item__title {
										margin: 0 auto calc((17 / var(--vw)) * 100vw);
										font-size: calc((16 / var(--vw)) * 100vw);
									}
									.blog__list__item__author {
										gap: calc((10 / var(--vw)) * 100vw);
									}
										.blog__list__item__author__icon {
											width: calc((24 / var(--vw)) * 100vw);
											height: calc((24 / var(--vw)) * 100vw);
										}
										.blog__list__item__author__name {
											font-size: calc((12 / var(--vw)) * 100vw);
										}
										.blog__list__item__arrow svg {
											width: calc((11 / var(--vw)) * 100vw);
										}
				.blog__btn_wrap {
					margin: calc((40 / var(--vw)) * 100vw) auto 0;
				}

/* MEMBER */
#member {
	padding: 0;
}
	.member__inner {
		width: 100%;
	}
		.member__contents {
			border-radius: calc((20 / var(--vw)) * 100vw);
			padding: calc((108 / var(--vw)) * 100vw) 0 calc((46 / var(--vw)) * 100vw);
		}
			.member__obj {
				display: none;
			}
			.member__contents::before {
				border-radius: calc((20 / var(--vw)) * 100vw);
				background-image: url(../image/index/member-bg@sp.webp);
			}
			.member__contents__inner {
				width: calc((334 / var(--vw)) * 100%);
			}
				.member__heading {
					margin: 0 auto calc((24 / var(--vw)) * 100vw);
				}
					.member__heading__main_text {
						width: calc((227.51 / var(--vw)) * 100vw);
						margin: 0 auto calc((10 / var(--vw)) * 100vw);
					}
					.member__list {
						grid-template-columns: repeat(2, 1fr);
						gap: calc((13 / var(--vw)) * 100vw) calc((7 / var(--vw)) * 100vw);
					}
						.member__list__item {
							padding: calc((7 / var(--vw)) * 100vw) calc((10 / var(--vw)) * 100vw) calc((14 / var(--vw)) * 100vw);
							border-radius: calc((3 / var(--vw)) * 100vw);
						}
							.member__list__item__new_icon {
								width: calc((40 / var(--vw)) * 100vw);
								top: calc((-10 / var(--vw)) * 100vw);
								right: calc((-13 / var(--vw)) * 100vw);
							}
								.member__list__item__new_icon__text {
									padding: 0 0 0 calc((2 / var(--vw)) * 100vw);
									font-size: calc((8 / var(--vw)) * 100vw);
									top: 52%;
								}
							.member__list__item__position {
								font-size: calc((10 / var(--vw)) * 100vw);
							}
							.member__list__item__contents {
								margin: calc((-3.5 / var(--vw)) * 100vw) auto 0;
							}
								.member__list__item__profile {
									bottom: calc((-4 / var(--vw)) * 100vw);
								}
									.member__list__item__profile__position {
										padding: calc((3 / var(--vw)) * 100vw) calc((6 / var(--vw)) * 100vw) calc((4 / var(--vw)) * 100vw);
										border-radius: calc((2 / var(--vw)) * 100vw) calc((2 / var(--vw)) * 100vw) 0 0;
										font-size: calc((10 / var(--vw)) * 100vw);
										line-height: 1;
									}
										.member__list__item__profile__position::after {
											width: calc((6 / var(--vw)) * 100vw);
											height: calc((6 / var(--vw)) * 100vw);
										}
									.member__list__item__profile__name_wrap {
										gap: calc((9 / var(--vw)) * 100vw);
										padding: calc((4 / var(--vw)) * 100vw) 0 calc((4 / var(--vw)) * 100vw) calc((7 / var(--vw)) * 100vw);
										border-radius: 0 calc((2 / var(--vw)) * 100vw) calc((2 / var(--vw)) * 100vw) calc((2 / var(--vw)) * 100vw);
									}
										.member__list__item__profile__name__main_text {
											font-size: calc((12 / var(--vw)) * 100vw);
										}
										.member__list__item__profile__name__sub_text {
											padding-top: calc((2 / var(--vw)) * 100vw);
											font-size: calc((10 / var(--vw)) * 100vw);
										}
				.member__btn_wrap {
					width: calc((310 / var(--vw)) * 100vw);
					height: calc((54 / var(--vw)) * 100vw);
					margin: calc((40 / var(--vw)) * 100vw) auto 0;
				}
}

/* ===== タブレット系: 実機が iPhone SE 縦持ち (375x667) より横長な物理比率なら .hero_bg__inner を
   デザイン比率で固定し横幅基準にする。判定は CSS の aspect-ratio MQ ではなく cmn.js の
   `_wide_aspect_device` クラスで行う (iOS Safari の visible viewport 評価ブレ回避)。
   画像は inner に対する % 配置なのでレイアウト関係が崩れず、被りも発生しない ===== */
@media all and (max-width: 1024px) {
	html._wide_aspect_device .hero_bg__inner {
		width: 100%;
		height: auto;
		aspect-ratio: 375 / 663;
		/* aspect-ratio 非対応ブラウザのフォールバックとして 100vh は確保 */
		min-height: 100vh;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
		/* inner の高さが aspect-ratio 由来 (vw 比例) に変わるため、
		   children の top を `100%` (= inner.height 基準) で上書きして追従させる */
		html._wide_aspect_device .hero_bg__main { top: calc((323 / 663) * 100%); }
		html._wide_aspect_device .hero_bg__image._01 { top: calc((67 / 663) * 100%); }
		html._wide_aspect_device .hero_bg__image._02 { top: calc((103 / 663) * 100%); }
		html._wide_aspect_device .hero_bg__image._03 { top: calc((63 / 663) * 100%); }
		html._wide_aspect_device .hero_bg__image._06 { top: calc((270 / 663) * 100%); }
		html._wide_aspect_device .hero_bg__image._07 { top: calc((254 / 663) * 100%); }
		html._wide_aspect_device .hero_bg__image._09 { top: calc((460.5 / 663) * 100%); }
		html._wide_aspect_device .hero_bg__image._10 { top: calc((533.5 / 663) * 100%); }
		html._wide_aspect_device .hero_bg__image._11 { top: calc((458.5 / 663) * 100%); }
}

@media all and (max-width: 768px) {

}