@charset "utf-8";
#hero {
	width: 100%;
	height: auto;
	padding: 156px 0 97px;
	background-color: var(--c-blue);
	position: sticky;
	top: 0;
	z-index: 2;
	overflow: clip;
}
	#hero::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 {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
		.hero__bg__main {
			width: 224.11px;
			height: auto;
			position: absolute;
			top: -102px;
			right: 98px;
		}
			.hero__bg__main__bg {
				width: 100%;
				height: auto;
				opacity: .7;
				position: relative;
			}
				.hero__bg__main__bg > img:nth-of-type(1) {
					position: relative;
					z-index: 1;
				}
				.hero__bg__main__bg > 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((128.9 / 224.11) * 100%);
				height: auto;
				position: absolute;
				top: calc((191.37 / 358) * 100%);
				left: calc((55.81 / 224.11) * 100%);
				transform: rotate(-5.84deg);
				z-index: 3;
			}
		.hero__bg__image {
			height: auto;
			position: absolute;
		}
		.hero__bg__image._01 {
			width: 178px;
			top: -95px;
			right: 360px;
		}
		.hero__bg__image._02 {
			width: 162px;
			top: 202px;
			left: 49px;
		}
		.hero__bg__image._03 {
			width: 152px;
			top: 245px;
			left: 261px;
		}
		.hero__bg__image._04 {
			width: 152px;
			top: 313px;
			left: 476px;
		}
	.hero__inner {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0 auto;
		position: relative;
		z-index: 3;
	}
		.hero__heading {
			width: 100%;
			height: auto;
			margin: 0 auto 44px;
		}
			.hero__heading__main_text {
				width: 225px;
				height: auto;
				margin: 0 auto 13px;
			}
				.hero__heading__main_text svg {
					fill: var(--c-white);
				}
			.hero__heading__sub_text {
				text-align: center;
				color: var(--c-white);
			}
		.hero__category {
			width: calc((1120 / var(--vw)) * 100%);
			height: auto;
			padding: 34px 0;
			margin: 0 auto;
			border-radius: 10px;
			background-color: rgba(245, 245, 245, 0.95);
			position: relative;
			z-index: 2;
		}
			.hero__category__inner {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: calc((1028 / 1120) * 100%);
				height: auto;
				margin: 0 auto;
			}
				.hero__category__balloon_wrap {
					width: 334px;
					height: auto;
					position: relative;
				}
					.hero__category__character {
						width: 72px;
						height: auto;
						position: absolute;
						top: -31px;
						left: -2px;
						z-index: 2;
					}
					.hero__category__balloon {
						display: flex;
						justify-content: center;
						align-items: center;
						width: fit-content;
						height: auto;
						padding: 13px 40px;
						margin: auto 35px 3px auto;
						border-radius: 9999px;
						border: solid 1px var(--c-black);
						position: relative;
					}
						.hero__category__balloon__text {
							display: block;
							width: fit-content;
							height: auto;
							font-size: 12px;
							font-weight: 700;
							line-height: 1.5;
							letter-spacing: 0.1em;
							text-align: center;
							color: var(--c-black);
						}
						.hero__category__balloon__line {
							display: block;
							width: 20px;
							height: 1px;
							background-color: var(--c-black);
							position: absolute;
							top: 50%;
							left: -10px;
							transform: translate(0%, -50%);
							z-index: 2;
						}
				.hero__category__list_wrap {
					flex: 1;
					height: auto;
					padding: 23px 0 23px 30px;
					border-left: dashed 1px var(--c-dark-blue);
				}
					.hero__category__list {
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						flex-wrap: wrap;
						gap: 10px 7px;
						width: 100%;
						height: auto;
					}
						.hero__category__list__item {
							width: fit-content;
							height: auto;
						}
							.hero__category__list__item a {
								display: flex;
								justify-content: center;
								align-items: center;
								width: fit-content;
								height: auto;
								padding: 3px 17px;
								border-radius: 3px;
								border: solid 1px var(--c-black);
								font-size: 12px;
								font-weight: 700;
								line-height: 2.2;
								letter-spacing: 0.1em;
								color: var(--c-black);
								transition: .4s;
							}
							._current.hero__category__list__item a {
								border-color: var(--c-main-blue);
								background-color: var(--c-main-blue);
								color: var(--c-white);
							}
						@media (any-hover: hover) {
							.hero__category__list__item a:hover {
								background-color: #69A3FF;
								color: var(--c-white);
							}
						}

#works {
	width: 100%;
	height: auto;
	padding: 80px 0 0;
	margin-top: -40px;
	border-radius: 40px 40px 0 0;
	background-color: var(--c-white);
	position: relative;
	z-index: 4;
}
	.works__inner {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
		.works__list_wrap {
			width: calc((1200 / var(--vw)) * 100%);
			height: auto;
			padding: 0 0 90px;
			margin: 0 auto;
		}
			.works__list {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 80px 22px;
				align-items: start;
				width: 100%;
				height: auto;
			}
				.works__list__item {
					width: 100%;
					height: auto;
					position: relative;
				}
				.works__list__item._hide {
					display: none;
				}
					.works__list__item__link {
						display: block;
						width: 100%;
						height: auto;
					}
						.works__list__item__new {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 62px;
							height: auto;
							position: absolute;
							top: -24px;
							left: -23px;
							z-index: 3;
						}
							.works__list__item__new__text {
								width: 100%;
								height: auto;
								font-size: 12px;
								font-weight: 500;
								line-height: 1;
								letter-spacing: 0.05em;
								text-align: center;
								color: var(--c-black);
								position: absolute;
								top: 26px;
								left: 0%;
								z-index: 2;
							}
						.works__list__item__image {
							width: 100%;
							height: auto;
							aspect-ratio: 385 / 253;
							border-radius: 5px;
							overflow: hidden;
						}
							.works__list__item__image img {
								width: 100%;
								height: 100%;
								object-fit: cover;
								object-position: center;
							}
						.works__list__item__details {
							width: 100%;
							height: auto;
							padding: 0 6px;
							margin: 18px auto 0;
							position: relative;
						}
							.works__list__item__title {
								width: 100%;
								height: auto;
							}
								.works__list__item__title__sub_text {
									width: calc(100% - 54px);
									height: auto;
									margin-bottom: 1px;
									font-size: 12px;
									font-weight: 700;
									line-height: 1.5;
									letter-spacing: 0.05em;
									color: var(--c-dark-blue);
								}
								.works__list__item__title__main_text {
									width: calc(100% - 54px);
									height: auto;
									font-size: 18px;
									font-weight: 700;
									line-height: 1.5;
									letter-spacing: 0.05em;
									color: var(--c-black);
								}
							.works__list__item__arrow {
								width: 44px;
								height: 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;
								top: 11px;
								right: 0px;
								z-index: 2;
							}
								.works__list__item__arrow svg {
									width: 11px;
									fill: var(--c-white);
								}
					.works__list__item__category_list {
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						flex-wrap: wrap;
						gap: 10px 5px;
						width: 100%;
						height: auto;
						padding: 0 6px;
						margin-top: 15px;
					}
						.works__list__item__category_list__item {
							width: fit-content;
							height: auto;
						}
							.works__list__item__category_list__item button {
								display: flex;
								justify-content: center;
								align-items: center;
								width: fit-content;
								height: auto;
								padding: 1px 9px;
								border-radius: 3px;
								border: solid 1px var(--c-black);
								background-color: var(--c-white);
								font-size: 12px;
								font-weight: 500;
								line-height: 1.5;
								letter-spacing: 0.05em;
								color: var(--c-black);
								cursor: pointer;
							}
					@media (any-hover: hover) {
						.works__list__item__image img {
							transition: transform .4s;
							will-change: transform;
						}
						.works__list__item:hover .works__list__item__image img {
							transform: scale(1.04);
						}
						.works__list__item:hover .works__list__item__arrow {
							background-color: var(--c-main-blue);
						}
							.works__list__item:hover .works__list__item__arrow svg {
								fill: var(--c-white);
							}
							.works__list__item__category_list__item button {
								transition: .4s;
							}
							.works__list__item__category_list__item button:hover {
								border-color: var(--c-main-blue);
								background-color: var(--c-main-blue);
								color: var(--c-white);
							}
					}
			.works__pager {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: auto;
				padding: 22px 0;
				border-top: solid 1px #ECECEC;
			}
			.works__pager._hide {
				display: none;
			}
				.works__pager__btn {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 24px;
					width: 102px;
					height: 55px;
					padding: 1px 0 0;
					border-radius: 50%;
					border: solid 1px var(--c-main-blue);
					background-color: transparent;
					cursor: pointer;
					transition: .4s;
				}
				.works__pager__btn:disabled {
					border-color: var(--c-light-gray);
					cursor: default;
					pointer-events: none;
				}
					.works__pager__btn__text {
						font-size: 12px;
						font-weight: 500;
						line-height: 1.5;
						letter-spacing: 0.05em;
						color: var(--c-main-blue);
						transition: .4s;
					}
					.works__pager__btn:disabled .works__pager__btn__text {
						color: var(--c-light-gray);
					}
					.works__pager__btn__arrow {
						display: block;
						width: 11px;
						height: auto;
					}
					.works__pager__btn._back .works__pager__btn__arrow {
						transform: scaleX(-1);
					}
						.works__pager__btn__arrow svg {
							fill: var(--c-main-blue);
							transition: .4s;
						}
						.works__pager__btn:disabled .works__pager__btn__arrow svg {
							fill: var(--c-light-gray);
						}
			@media (any-hover: hover) {
				.works__pager__btn:not(:disabled):hover {
					background-color: var(--c-main-blue);
				}
					.works__pager__btn:not(:disabled):hover .works__pager__btn__text {
						color: var(--c-white);
					}
						.works__pager__btn:not(:disabled):hover .works__pager__btn__arrow svg {
							fill: var(--c-white);
						}
			}
				.works__pager__current {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 330px;
					height: auto;
					position: relative;
				}
					.works__pager__current__label {
						width: fit-content;
						height: auto;
						margin-right: 12px;
						font-size: 12px;
						font-weight: 500;
						line-height: 1.5;
						letter-spacing: 0.05em;
						color: var(--c-main-blue);
					}
					.works__pager__current__num_wrap {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 87px;
						height: 49px;
						position: relative;
					}
						.works__pager__current__num__current {
							font-size: 30px;
							font-weight: 700;
							line-height: 1.5;
							letter-spacing: 0.05em;
							color: var(--c-main-blue);
							position: absolute;
							top: 0;
							left: 8px;
							z-index: 2;
						}
						.works__pager__current__num__sep {
							display: block;
							width: 1px;
							height: 22px;
							background-color: var(--c-light-gray);
							position: absolute;
							top: 16px;
							left: 32px;
							transform: rotate(40deg);
							z-index: 2;
						}
						.works__pager__current__num__total {
							width: fit-content;
							height: auto;
							font-size: 18px;
							font-weight: 700;
							line-height: 1.5;
							letter-spacing: 0.05em;
							color: var(--c-light-gray);
							position: absolute;
							top: 15px;
							left: 43px;
							z-index: 2;
						}
						.works__pager__current__num__chevron {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 18px;
							height: 18px;
							position: absolute;
							top: 18px;
							right: 2px;
							z-index: 2;
						}
							.works__pager__current__num__chevron svg {
								width: 6px;
								fill: var(--c-main-blue);
							}
							.works__pager__select {
								width: 100%;
								height: 100%;
								opacity: 0;
								-webkit-appearance: none;
								appearance: none;
								cursor: pointer;
								position: absolute;
								top: 0;
								left: 0;
								z-index: 2;
							}
			.works__empty {
				width: 100%;
				height: auto;
				padding: 60px 0;
				font-size: 14px;
				text-align: center;
				color: var(--c-gray);
			}

/* CONTACT_SEC */
#contact_sec {
	overflow: clip;
	z-index: 3;
}
	/* #contact_sec::after {
		display: none;
	} */
				.contact_sec__contents_bg {
					height: 100%;
					top: 0;
				}

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

}

@media all and (min-width: 1440px) {
		.hero__category {
			width: 90%;
			max-width: 1120px;
		}
}


/* ================================================== SP */
@media all and (max-width: 1024px) {
/* HERO */
#hero {
	padding: calc((125 / var(--vw)) * 100vw) 0 calc((116 / var(--vw)) * 100vw);
	position: relative;
}
	#hero::before {
		background-image: url(../image/bg@sp.webp);
	}
		.hero__bg__main {
			width: calc((105.8 / var(--vw)) * 100vw);
			top: calc((-58 / var(--vw)) * 100vw);
			right: calc((58 / var(--vw)) * 100vw);
		}
		.hero__bg__image._01 {
			width: calc((84 / var(--vw)) * 100vw);
			top: calc((-55 / var(--vw)) * 100vw);
			right: calc((182 / var(--vw)) * 100vw);
		}
		.hero__bg__image._02 {
			width: calc((88 / var(--vw)) * 100vw);
			top: calc((15 / var(--vw)) * 100vw);
			left: auto;
			right: calc((-51 / var(--vw)) * 100vw);
		}
		.hero__bg__image._03 {
			width: calc((92.18 / var(--vw)) * 100vw);
			top: calc((193 / var(--vw)) * 100vw);
			left: calc((-34 / var(--vw)) * 100vw);
		}
		.hero__bg__image._04 {
			width: calc((86.39 / var(--vw)) * 100vw);
			top: calc((217 / var(--vw)) * 100vw);
			left: calc((76.67 / var(--vw)) * 100vw);
		}
		.hero__heading {
			margin: 0 auto calc((25 / var(--vw)) * 100vw);
		}
			.hero__heading__main_text {
				width: calc((163.47 / var(--vw)) * 100vw);
				margin: 0 auto calc((11 / var(--vw)) * 100vw);
			}
		.hero__category {
			width: calc((334 / var(--vw)) * 100%);
			padding: calc((30 / var(--vw)) * 100vw);
			border-radius: calc((6 / var(--vw)) * 100vw);
		}
			.hero__category__inner {
				width: 100%;
			}
				.hero__category__balloon_wrap {
					display: none;
				}
				.hero__category__list_wrap {
					flex: initial;
					width: 100%;
					padding: 0;
					border-left: none;
				}
					.hero__category__list {
						gap: calc((10 / var(--vw)) * 100vw);
					}
							.hero__category__list__item a {
								padding: calc((3 / var(--vw)) * 100vw) calc((19 / var(--vw)) * 100vw) calc((4 / var(--vw)) * 100vw);
								border-radius: calc((3 / var(--vw)) * 100vw);
								border: solid calc((1 / var(--vw)) * 100vw) var(--c-black);
								font-size: calc((11 / var(--vw)) * 100vw);
							}

/* WORKS */
#works {
	padding: calc((110 / var(--vw)) * 100vw) 0 0;
	margin-top: calc((-60 / var(--vw)) * 100vw);
	border-radius: calc((60 / var(--vw)) * 100vw) calc((60 / var(--vw)) * 100vw) 0 0;
}
		.works__list_wrap {
			width: calc((334 / var(--vw)) * 100%);
			padding: 0 0 calc((48 / var(--vw)) * 100vw);
		}
			.works__list {
				grid-template-columns: repeat(1, 1fr);
				gap: calc((70 / var(--vw)) * 100vw) 0;
			}
						.works__list__item__new {
							width: calc((55 / var(--vw)) * 100vw);
							top: calc((-21 / var(--vw)) * 100vw);
							left: calc((-17 / var(--vw)) * 100vw);
						}
							.works__list__item__new__text {
								font-size: calc((10 / var(--vw)) * 100vw);
								top: calc((24 / var(--vw)) * 100vw);
							}
						.works__list__item__image {
							border-radius: calc((5 / var(--vw)) * 100vw);
						}
						.works__list__item__details {
							padding: 0 calc((6 / var(--vw)) * 100vw);
							margin: calc((20 / var(--vw)) * 100vw) auto 0;
						}
								.works__list__item__title__sub_text {
									width: calc(100% - ((61 / var(--vw)) * 100vw));
									margin-bottom: calc((1 / var(--vw)) * 100vw);
									font-size: calc((12 / var(--vw)) * 100vw);
								}
								.works__list__item__title__main_text {
									width: calc(100% - ((61 / var(--vw)) * 100vw));
									font-size: calc((18 / var(--vw)) * 100vw);
								}
							.works__list__item__arrow {
								width: calc((44 / var(--vw)) * 100vw);
								height: calc((31 / var(--vw)) * 100vw);
								top: calc((11 / var(--vw)) * 100vw);
							}
								.works__list__item__arrow svg {
									width: calc((11 / var(--vw)) * 100vw);
								}
					.works__list__item__category_list {
						gap: calc((10 / var(--vw)) * 100vw) calc((5 / var(--vw)) * 100vw);
						padding: 0 calc((6 / var(--vw)) * 100vw);
						margin-top: calc((15 / var(--vw)) * 100vw);
					}
							.works__list__item__category_list__item button {
								padding: calc((1 / var(--vw)) * 100vw) calc((9 / var(--vw)) * 100vw);
								border-radius: calc((3 / var(--vw)) * 100vw);
								border: solid calc((1 / var(--vw)) * 100vw) var(--c-dark-gray);
								font-size: calc((12 / var(--vw)) * 100vw);
							}
			.works__pager {
				padding: calc((20 / var(--vw)) * 100vw) 0;
				border-top: solid calc((1 / var(--vw)) * 100vw) #ECECEC;
			}
				.works__pager__btn {
					gap: calc((18 / var(--vw)) * 100vw);
					width: calc((80 / var(--vw)) * 100vw);
					height: calc((43 / var(--vw)) * 100vw);
					padding: calc((1 / var(--vw)) * 100vw) 0 0;
					border: solid calc((1 / var(--vw)) * 100vw) var(--c-main-blue);
				}
					.works__pager__btn__text {
						font-size: calc((10 / var(--vw)) * 100vw);
					}
					.works__pager__btn__arrow {
						width: calc((11 / var(--vw)) * 100vw);
					}
				.works__pager__current {
					width: calc((117 / var(--vw)) * 100vw);
				}
					.works__pager__current__label {
						margin-right: calc((12 / var(--vw)) * 100vw);
						font-size: calc((10 / var(--vw)) * 100vw);
					}
					.works__pager__current__num_wrap {
						width: calc((44 / var(--vw)) * 100vw);
						height: calc((36 / var(--vw)) * 100vw);
					}
						.works__pager__current__num__current {
							font-size: calc((24 / var(--vw)) * 100vw);
							left: 0;
						}
						.works__pager__current__num__sep {
							width: calc((1 / var(--vw)) * 100vw);
							height: calc((21 / var(--vw)) * 100vw);
							top: calc((11 / var(--vw)) * 100vw);
							left: calc((22 / var(--vw)) * 100vw);
						}
						.works__pager__current__num__total {
							font-size: calc((14 / var(--vw)) * 100vw);
							top: calc((12 / var(--vw)) * 100vw);
							right: calc((24 / var(--vw)) * 100vw);
						}
						.works__pager__current__num__chevron {
							width: calc((19 / var(--vw)) * 100vw);
							height: calc((19 / var(--vw)) * 100vw);
							top: calc((11 / var(--vw)) * 100vw);
							right: 0;
						}
							.works__pager__current__num__chevron svg {
								width: calc((6 / var(--vw)) * 100vw);
							}
			.works__empty {
				padding: calc((60 / var(--vw)) * 100vw) 0;
				font-size: calc((14 / var(--vw)) * 100vw);
			}
}

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

}