@charset "utf-8";
#hero {
	width: 100%;
	height: calc((684 / var(--vw)) * 100vw);
	background-color: var(--c-black);
	position: relative;
	overflow: hidden;
}
	.hero__bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
		.hero__bg::after {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			background-color: var(--c-black);
			opacity: .7;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
		.hero__bg__image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	.hero__visual {
		width: calc((600 / var(--vw)) * 100vw);
		height: auto;
		position: absolute;
		top: calc((256 / var(--vw)) * 100vw);
		right: calc((85 / var(--vw)) * 100vw);
		z-index: 2;
	}
	.hero__inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		width: calc((1192 / var(--vw)) * 100%);
		height: 100%;
		padding-bottom: calc((100 / var(--vw)) * 100vw);
		margin: 0 auto;
		position: relative;
		z-index: 3;
	}
		.hero__label {
			width: fit-content;
			height: auto;
			padding: calc((3 / var(--vw)) * 100vw) calc((16 / var(--vw)) * 100vw);
			border-radius: calc((2 / var(--vw)) * 100vw);
			background-color: var(--c-main-blue);
			font-size: calc((14 / var(--vw)) * 100vw);
			font-weight: 700;
			line-height: 1.8;
			letter-spacing: 0.1em;
			color: var(--c-white);
		}
		.hero__copy {
			width: calc(100% - ((561 / var(--vw)) * 100vw));
			height: auto;
			padding-left: calc((3 / var(--vw)) * 100vw);
			margin: calc((11 / var(--vw)) * 100vw) auto 0 0;
			font-size: calc((20 / var(--vw)) * 100vw);
			font-weight: 700;
			line-height: 1.8;
			letter-spacing: 0.1em;
			color: var(--c-white);
		}
		.hero__title {
			width: calc(100% - ((561 / var(--vw)) * 100vw));
			height: auto;
			margin: calc((11 / var(--vw)) * 100vw) auto calc((30 / var(--vw)) * 100vw) 0;
			font-size: calc((40 / var(--vw)) * 100vw);
			font-weight: 700;
			line-height: 1.5;
			letter-spacing: 0.05em;
			color: var(--c-white);
		}
		.hero__category {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			gap: 10px;
			width: calc(100% - ((561 / var(--vw)) * 100vw));
			height: auto;
		}
			.hero__category__item {
				width: fit-content;
				height: auto;
				padding: 2px 12px;
				border-radius: 3px;
				border: solid 1px var(--c-white);
				font-size: 14px;
				font-weight: 500;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: var(--c-white);
			}

#works_details {
	width: 100%;
	height: auto;
	padding: 70px 0 100px;
	background-color: var(--c-bg-gray);
}
	#works_details::after {
		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;
	}
	.works_details__inner {
		width: calc((1120 / var(--vw)) * 100%);
		height: auto;
		margin: 0 auto;
		position: relative;
		z-index: 2;
	}
		.works_details__design {
			width: 100%;
			height: auto;
			margin: 0 auto 80px;
		}
			.works_details__section_heading {
				width: 100%;
				height: auto;
				padding-left: 15px;
				margin: 0 auto 15px;
				font-size: 24px;
				font-weight: 700;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: var(--c-black);
				position: relative;
			}
				.works_details__section_heading::before {
					content: '';
					display: block;
					width: 3px;
					height: 24px;
					background-color: var(--c-black);
					position: absolute;
					top: 8px;
					left: 0;
				}
			.works_details__design__text {
				width: 100%;
				height: auto;
				margin: 0 auto;
				font-size: 14px;
				font-weight: 500;
				line-height: 1.8;
				letter-spacing: 0.05em;
				color: var(--c-black);
			}
			.works_details__design__link {
				width: 100%;
				height: auto;
				margin-top: 10px;
				padding-left: 20px;
				font-size: 12px;
				font-weight: 700;
				line-height: 1.5;
				letter-spacing: 0.05em;
				position: relative;
			}
				.works_details__design__link::before {
					content: '';
					display: block;
					width: 12px;
					height: 12px;
					border-radius: 9999px;
					background-color: var(--c-main-blue);
					position: absolute;
					top: 4px;
					left: 1px;
				}
				.works_details__design__link a {
					display: inline-block;
					color: var(--c-main-blue);
					word-break: break-all;
					position: relative;
				}
					.works_details__design__link a::after {
						content: '';
						display: block;
						width: 100%;
						height: 1px;
						background-color: var(--c-main-blue);
						position: absolute;
						bottom: 0;
						left: 0;
						opacity: 0;
					}
				@media (any-hover: hover) {
					.works_details__design__link a::after {
						transition: .4s;
					}
					.works_details__design__link a:hover::after {
						opacity: 1;
					}
				}
		.works_details__portfolio {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
			gap: 80px 0;
			width: 100%;
			height: auto;
			margin: 0 auto 100px;
		}
			.works_details__portfolio__item {
				height: auto;
			}
			.works_details__portfolio__item._full {
				width: 100%;
			}
			.works_details__portfolio__item._half {
				width: calc((550 / 1120) * 100%);
			}
				.works_details__portfolio__item__heading {
					width: 100%;
					height: auto;
					padding-left: 12px;
					margin: 0 auto 15px;
					font-size: 18px;
					font-weight: 700;
					line-height: 1.5;
					letter-spacing: 0.05em;
					color: var(--c-main-blue);
					position: relative;
				}
					.works_details__portfolio__item__heading::before {
						content: '';
						display: block;
						width: 3px;
						height: 17px;
						background-color: var(--c-main-blue);
						position: absolute;
						top: 6px;
						left: 0;
					}
				.works_details__portfolio__item__media {
					width: 100%;
					height: auto;
				}
		.works_details__way {
			width: 100%;
			height: auto;
			padding: 50px 74px;
			margin: 0 auto 50px;
			border-radius: 5px;
			background-color: var(--c-white);
			position: relative;
		}
			.works_details__way__label {
				display: block;
				width: 60px;
				height: 60px;
				position: absolute;
				top: -19px;
				left: -18px;
				z-index: 2;
			}
				.works_details__way__label__text {
					width: 100%;
					height: auto;
					padding-left: 0.05em;
					font-size: 16px;
					font-weight: 900;
					line-height: 1.5;
					letter-spacing: 0.05em;
					text-align: center;
					color: var(--c-white);
					position: absolute;
					top: 19px;
					left: 0;
					z-index: 2;
				}
			.works_details__way__list {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				gap: 85px;
				width: 100%;
				height: auto;
			}
				.works_details__way__item {
					flex: 1;
					height: auto;
					position: relative;
				}
				.works_details__way__item::before {
					content: '';
					display: block;
					background-color: var(--c-main-blue);
					position: absolute;
				}
					.works_details__way__item__heading {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 40px;
						border-radius: 5px;
						border: solid 1px var(--c-main-blue);
						font-size: 16px;
						font-weight: 700;
						line-height: 1.8;
						letter-spacing: 0.05em;
						text-align: center;
						color: var(--c-main-blue);
					}
					.works_details__way__item__text {
						width: 100%;
						height: auto;
						margin: 7px auto 0;
						font-size: 14px;
						font-weight: 500;
						line-height: 1.8;
						letter-spacing: 0.05em;
						color: var(--c-black);
					}
			.works_details__way__character {
				width: 49px;
				height: auto;
				position: absolute;
				top: -25px;
				right: -16px;
				z-index: 2;
				transform: scaleX(-1);
			}
		.works_details__production {
			width: 100%;
			height: auto;
			margin: 0 auto 80px;
		}
			.works_details__production .works_details__section_heading {
				margin: 0 auto 9px;
			}
			.works_details__contents_list {
				display: flex;
				flex-direction: column;
				gap: 5px;
				width: 100%;
				height: auto;
				padding-left: 19px;
			}
				.works_details__contents_list__item {
					width: 100%;
					height: auto;
					padding-left: 15px;
					font-size: 16px;
					font-weight: 700;
					line-height: 1.5;
					letter-spacing: 0.05em;
					color: var(--c-black);
					position: relative;
				}
				.works_details__contents_list__item::before {
					content: '';
					display: block;
					width: 5px;
					height: 5px;
					border-radius: 9999px;
					background-color: var(--c-black);
					position: absolute;
					top: 10px;
					left: 0;
				}
		.works_details__credits {
			display: grid;
			grid-template-columns: max-content 1fr;
			row-gap: 5px;
			width: 100%;
			height: auto;
		}
			.works_details__credits__row {
				display: grid;
				grid-template-columns: subgrid;
				grid-column: 1 / -1;
				align-items: baseline;
			}
				.works_details__credits__heading {
					height: auto;
					padding-right: 13px;
					font-size: 18px;
					font-weight: 400;
					line-height: 1.5;
					letter-spacing: 0.05em;
					color: var(--c-black);
					position: relative;
				}
					.works_details__credits__heading::after {
						content: '';
						display: block;
						width: 1px;
						height: 16px;
						background-color: var(--c-black);
						position: absolute;
						top: 6px;
						right: 0;
					}
				.works_details__credits__name {
					height: auto;
					padding-left: 12px;
					font-size: 16px;
					font-weight: 500;
					line-height: 1.5;
					letter-spacing: 0.05em;
					color: var(--c-black);
				}
		.works_details__back {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: auto;
			margin: 115px auto 0;
		}
				.works_details__back__btn_wrap .cmn_btn__arrow {
					right: auto;
					left: 19px;
					transform: scaleX(-1) translateY(-50%);
				}

.works_notfound {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 24px;
	width: 100%;
	height: auto;
	padding: 200px 0;
	background-color: var(--c-white);
}
	.works_notfound__text {
		font-size: 16px;
		font-weight: 500;
		line-height: 1.8;
		color: var(--c-black);
	}
	.works_notfound__link {
		font-size: 14px;
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: 0.05em;
		color: var(--c-main-blue);
		text-decoration: underline;
	}

/* ================================================== PC */
@media all and (min-width: 1025px) {
					.works_details__way__item:not(:first-child)::before {
						width: 85px;
						height: 1px;
						top: 20px;
						left: -85px;
					}
}

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



}


/* ================================================== SP */
@media all and (max-width: 1024px) {
/* HERO */
#hero {
	height: auto;
}
	.hero__visual {
		display: none;
	}
	.hero__inner {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: calc((334 / var(--vw)) * 100vw);
		height: auto;
		min-height: calc((523 / var(--vw)) * 100vw);
		padding: calc((230 / var(--vw)) * 100vw) 0 calc((40 / var(--vw)) * 100vw);
	}
		.hero__label {
			padding: calc((4 / var(--vw)) * 100vw) calc((15 / var(--vw)) * 100vw) calc((5 / var(--vw)) * 100vw);
			font-size: calc((12 / var(--vw)) * 100vw);
		}
		.hero__copy {
			width: 100%;
			padding-left: 0;
			margin: calc((5 / var(--vw)) * 100vw) auto 0;
			font-size: calc((14 / var(--vw)) * 100vw);
		}
		.hero__title {
			width: 100%;
			margin: 0 auto calc((35 / var(--vw)) * 100vw);
			font-size: calc((32 / var(--vw)) * 100vw);
		}
		.hero__category {
			width: 100%;
			gap: calc((6 / var(--vw)) * 100vw);
			margin: auto auto 0;
		}
			.hero__category__item {
				padding: calc((2 / var(--vw)) * 100vw) calc((12 / var(--vw)) * 100vw) calc((3 / var(--vw)) * 100vw);
				border-radius: calc((3 / var(--vw)) * 100vw);
				border: solid calc((1 / var(--vw)) * 100vw) var(--c-white);
				font-size: calc((11 / var(--vw)) * 100vw);
			}

#works_details {
	padding: calc((40 / var(--vw)) * 100vw) 0 calc((80 / var(--vw)) * 100vw);
}
	#works_details::after {
		background-image: url(../image/bg@sp.webp);
	}
	.works_details__inner {
		width: calc((334 / var(--vw)) * 100vw);
	}
		.works_details__design {
			margin: 0 auto calc((60 / var(--vw)) * 100vw);
		}
			.works_details__section_heading {
				padding-left: calc((13 / var(--vw)) * 100vw);
				margin: 0 auto calc((20 / var(--vw)) * 100vw);
				font-size: calc((22 / var(--vw)) * 100vw);
				line-height: 1.8;
			}
				.works_details__section_heading::before {
					width: calc((3 / var(--vw)) * 100vw);
					height: calc((22 / var(--vw)) * 100vw);
					top: calc((10 / var(--vw)) * 100vw);
				}
			.works_details__design__text {
				font-size: calc((14 / var(--vw)) * 100vw);
			}
			.works_details__design__link {
				margin-top: calc((15 / var(--vw)) * 100vw);
				padding-left: calc((19 / var(--vw)) * 100vw);
				font-size: calc((12 / var(--vw)) * 100vw);
			}
				.works_details__design__link::before {
					width: calc((12 / var(--vw)) * 100vw);
					height: calc((12 / var(--vw)) * 100vw);
					top: calc((3 / var(--vw)) * 100vw);
					left: 0;
				}
					.works_details__design__link a::after {
						height: calc((1 / var(--vw)) * 100vw);
					}
		.works_details__portfolio {
			gap: calc((50 / var(--vw)) * 100vw) 0;
			margin: 0 auto calc((80 / var(--vw)) * 100vw);
		}
			.works_details__portfolio__item._half {
				width: 100%;
			}
				.works_details__portfolio__item__heading {
					padding-left: calc((13 / var(--vw)) * 100vw);
					margin: 0 auto calc((15 / var(--vw)) * 100vw);
					font-size: calc((16 / var(--vw)) * 100vw);
				}
					.works_details__portfolio__item__heading::before {
						width: calc((3 / var(--vw)) * 100vw);
						height: calc((16 / var(--vw)) * 100vw);
						top: calc((4 / var(--vw)) * 100vw);
					}
		.works_details__way {
			padding: calc((30 / var(--vw)) * 100vw) calc((30 / var(--vw)) * 100vw) calc((30 / var(--vw)) * 100vw) calc((58 / var(--vw)) * 100vw);
			margin: 0 auto calc((50 / var(--vw)) * 100vw);
			border-radius: calc((5 / var(--vw)) * 100vw);
		}
			.works_details__way__label {
				width: calc((50 / var(--vw)) * 100vw);
				height: calc((50 / var(--vw)) * 100vw);
				top: calc((-25 / var(--vw)) * 100vw);
				left: calc((-12 / var(--vw)) * 100vw);
			}
				.works_details__way__label__text {
					font-size: calc((12 / var(--vw)) * 100vw);
					top: calc((17 / var(--vw)) * 100vw);
				}
			.works_details__way__list {
				flex-direction: column;
				justify-content: flex-start;
				gap: calc((25 / var(--vw)) * 100vw);
			}
				.works_details__way__item {
					flex: initial;
					width: 100%;
				}
				.works_details__way__item::before {
					display: none;
					width: calc((2 / var(--vw)) * 100vw);
					height: calc((100% + (25 / var(--vw)) * 100vw));
					top: calc((17 / var(--vw)) * 100vw);
					left: calc((-18 / var(--vw)) * 100vw);
				}
				.works_details__way__item:not(:last-child)::before {
					display: block;
				}
				.works_details__way__item::after {
					content: '';
					display: block;
					width: calc((18 / var(--vw)) * 100vw);
					height: calc((12 / var(--vw)) * 100vw);
					border-radius: 50%;
					background-color: var(--c-main-blue);
					position: absolute;
					top: calc((11 / var(--vw)) * 100vw);
					left: calc((-26 / var(--vw)) * 100vw);
				}
					.works_details__way__item__heading {
						display: block;
						width: 100%;
						height: auto;
						border-radius: initial;
						border: initial;
						font-size: calc((18 / var(--vw)) * 100vw);
						font-weight: 500;
						text-align: left;
					}
					.works_details__way__item__text {
						margin: calc((2 / var(--vw)) * 100vw) auto 0;
						font-size: calc((14 / var(--vw)) * 100vw);
					}
			.works_details__way__character {
				width: calc((38 / var(--vw)) * 100vw);
				top: calc((-25 / var(--vw)) * 100vw);
				right: calc((10 / var(--vw)) * 100vw);
			}
		.works_details__production {
			margin: 0 auto calc((70 / var(--vw)) * 100vw);
		}
			.works_details__production .works_details__section_heading {
				margin: 0 auto calc((10 / var(--vw)) * 100vw);
			}
			.works_details__contents_list {
				gap: calc((7 / var(--vw)) * 100vw);
				padding-left: calc((12 / var(--vw)) * 100vw);
			}
				.works_details__contents_list__item {
					padding-left: calc((13 / var(--vw)) * 100vw);
					font-size: calc((14 / var(--vw)) * 100vw);
				}
				.works_details__contents_list__item::before {
					width: calc((5 / var(--vw)) * 100vw);
					height: calc((5 / var(--vw)) * 100vw);
					top: calc((9 / var(--vw)) * 100vw);
				}
		.works_details__credits {
			display: flex;
			flex-direction: column;
			gap: calc((10 / var(--vw)) * 100vw);
		}
			.works_details__credits__row {
				display: block;
				padding-left: calc((10 / var(--vw)) * 100vw);
				position: relative;
			}
				.works_details__credits__row::after {
					content: '';
					display: block;
					width: calc((1 / var(--vw)) * 100vw);
					height: calc((100% - calc((6 / var(--vw)) * 100vw)));
					background-color: var(--c-black);
					position: absolute;
					top: calc((3 / var(--vw)) * 100vw);
					left: 0;
				}
				.works_details__credits__heading {
					width: 100%;
					margin: 0 auto calc((-1 / var(--vw)) * 100vw);
					font-size: calc((14 / var(--vw)) * 100vw);
				}
					.works_details__credits__heading::after {
						display: none;
					}
				.works_details__credits__name {
					padding-left: 0;
				}
		.works_details__back {
			margin: calc((60 / var(--vw)) * 100vw) auto 0;
		}
				.works_details__back__btn_wrap .cmn_btn__arrow {
					left: calc((17 / var(--vw)) * 100vw);
				}

.works_notfound {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 24px;
	width: 100%;
	height: auto;
	padding: 200px 0;
	background-color: var(--c-white);
}
	.works_notfound__text {
		font-size: 16px;
		font-weight: 500;
		line-height: 1.8;
		color: var(--c-black);
	}
	.works_notfound__link {
		font-size: 14px;
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: 0.05em;
		color: var(--c-main-blue);
		text-decoration: underline;
	}
}

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

}