@charset "utf-8";
#works {
	width: 100%;
	height: auto;
}
	.works__inner {
		width: 100%;
		height: auto;
		position: relative;
	}
		.works__list__wrap {
			width: 100%;
			height: auto;
		}
			.works__list {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-wrap: wrap;
				width: 100%;
				height: auto;
				padding: 1px 0 0;
				position: relative;
			}
				.works__list::before {
					content: '';
					display: block;
					width: 100%;
					height: 1px;
					background-color: var(--color--light_gray);
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}
				.works__list::after {
					content: '';
					display: block;
					width: 33.333333%;
					width: calc(1 / 3);
					height: 0;
				}
				.works__list__item {
					width: 33.333333%;
					width: calc(1 / 3);
					height: auto;
					position: relative;
					background-color: var(--color--bg_gray);
				}
				.run .works__list__item {
					background-color: var(--color--white);
					transition: all .4s;
				}
				.works__list__item:nth-of-type(1) {transition-delay: .1s;}
				.works__list__item:nth-of-type(2) {transition-delay: .2s;}
				.works__list__item:nth-of-type(3) {transition-delay: .3s;}
				.works__list__item:nth-of-type(4) {transition-delay: .4s;}
				.works__list__item:nth-of-type(5) {transition-delay: .5s;}
				.works__list__item:nth-of-type(6) {transition-delay: .6s;}
				.works__list__item:nth-of-type(7) {transition-delay: .7s;}
				.works__list__item:nth-of-type(8) {transition-delay: .8s;}
				.works__list__item:nth-of-type(9) {transition-delay: .9s;}
				.works__list__item:nth-of-type(10) {transition-delay: 1s;}
				.works__list__item:nth-of-type(11) {transition-delay: 1.1s;}
				.works__list__item:nth-of-type(12) {transition-delay: 1.2s;}
					.works__list__item:not(:nth-of-type(3n))::before,
					.works__list__item::after {
						content: '';
						display: block;
						background-color: var(--color--light_gray);
						position: absolute;
						z-index: 2;
					}
					.works__list__item::before {
						width: 1px;
						height: 100%;
						top: 0;
						right: 0;
						transform: translate(50%,0%) scale(1,0);
						transform-origin: top center;
						transition: all .4s;
					}
					.works__list__item:nth-of-type(2)::before {transition-delay: .1s;}
					.works__list__item:nth-of-type(3)::before {transition-delay: .2s;}
					.works__list__item:nth-of-type(4)::before {transition-delay: .3s;}
					.works__list__item:nth-of-type(5)::before {transition-delay: .4s;}
					.works__list__item:nth-of-type(6)::before {transition-delay: .5s;}
					.works__list__item:nth-of-type(7)::before {transition-delay: .6s;}
					.works__list__item:nth-of-type(8)::before {transition-delay: .7s;}
					.works__list__item:nth-of-type(9)::before {transition-delay: .8s;}
					.works__list__item:nth-of-type(10)::before {transition-delay: .9s;}
					.works__list__item:nth-of-type(11)::before {transition-delay: 1s;}
					.works__list__item:nth-of-type(12)::before {transition-delay: 1.1s;}
					.run .works__list__item::before {
						transform: translate(50%,0%) scale(1,1);
					}
					.works__list__item::after {
						width: 100%;
						height: 1px;
						left: 0;
						bottom: 0;
						transform: translate(0%,50%) scale(0,1);
						transform-origin: center left;
						transition: all .4s;
					}
					.works__list__item:nth-of-type(2)::after {transition-delay: .1s;}
					.works__list__item:nth-of-type(3)::after {transition-delay: .2s;}
					.works__list__item:nth-of-type(4)::after {transition-delay: .3s;}
					.works__list__item:nth-of-type(5)::after {transition-delay: .4s;}
					.works__list__item:nth-of-type(6)::after {transition-delay: .5s;}
					.works__list__item:nth-of-type(7)::after {transition-delay: .6s;}
					.works__list__item:nth-of-type(8)::after {transition-delay: .7s;}
					.works__list__item:nth-of-type(9)::after {transition-delay: .8s;}
					.works__list__item:nth-of-type(10)::after {transition-delay: .9s;}
					.works__list__item:nth-of-type(11)::after {transition-delay: 1s;}
					.works__list__item:nth-of-type(12)::after {transition-delay: 1.1s;}
					.run .works__list__item::after {
						transform: translate(0%,50%) scale(1,1);
					}
					.works__list__item__inner {
						display: block;
						width: 100%;
						height: auto;
					}
						.works__list__item__inner::before {
							content: '';
							display: block;
							width: 100%;
							height: 100%;
							background-color: var(--color--black);
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;
							opacity: 0;
							pointer-events: none;
						}
					@media (any-hover: hover) {
						.works__list__item__inner::before {
							transition: .4s;
						}
						.works__list__item__inner:hover::before {
							opacity: .14;
						}
					}
						.works__list__item__image {
							width: 100%;
							height: auto;
							aspect-ratio: 426 / 264;
							overflow: hidden;
						}
							.works__list__item__image img {
								width: 100%;
								height: 100%;
								object-fit: cover;
								object-position: center;
								opacity: 0;
								transform: scale(1.03);
								filter: blur(5px);
								transition: .6s;
							}
							.works__list__item:nth-of-type(1) .works__list__item__image img {transition-delay: .4s;}
							.works__list__item:nth-of-type(2) .works__list__item__image img {transition-delay: .5s;}
							.works__list__item:nth-of-type(3) .works__list__item__image img {transition-delay: .6s;}
							.works__list__item:nth-of-type(4) .works__list__item__image img {transition-delay: .7s;}
							.works__list__item:nth-of-type(5) .works__list__item__image img {transition-delay: .8s;}
							.works__list__item:nth-of-type(6) .works__list__item__image img {transition-delay: .9s;}
							.works__list__item:nth-of-type(7) .works__list__item__image img {transition-delay: 1s;}
							.works__list__item:nth-of-type(8) .works__list__item__image img {transition-delay: 1.1s;}
							.works__list__item:nth-of-type(9) .works__list__item__image img {transition-delay: 1.2s;}
							.works__list__item:nth-of-type(10) .works__list__item__image img {transition-delay: 1.3s;}
							.works__list__item:nth-of-type(11) .works__list__item__image img {transition-delay: 1.4s;}
							.works__list__item:nth-of-type(12) .works__list__item__image img {transition-delay: 1.5s;}
							.run .works__list__item__image img {
								opacity: 1;
								transform: scale(1);
								filter: blur(0px);
							}	
						.works__list__item__details {
							width: 100%;
							height: 17.1875vw;
							padding: 3.125vw 4.375vw 0;
						}
							.works__list__item__info {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								width: 100%;
								height: auto;
								margin: 0 auto var(--11px);
								font-weight: 400;
								line-height: var(--18px);
								letter-spacing: 0.08em;
								color: var(--color--light_gray);
								opacity: 0;
								transform: translate(0%,10px);
								transition: .6s;
							}
							.works__list__item:nth-of-type(1) .works__list__item__info {transition-delay: .6s;}
							.works__list__item:nth-of-type(2) .works__list__item__info {transition-delay: .7s;}
							.works__list__item:nth-of-type(3) .works__list__item__info {transition-delay: .8s;}
							.works__list__item:nth-of-type(4) .works__list__item__info {transition-delay: .9s;}
							.works__list__item:nth-of-type(5) .works__list__item__info {transition-delay: 1s;}
							.works__list__item:nth-of-type(6) .works__list__item__info {transition-delay: 1.1s;}
							.works__list__item:nth-of-type(7) .works__list__item__info {transition-delay: 1.2s;}
							.works__list__item:nth-of-type(8) .works__list__item__info {transition-delay: 1.3s;}
							.works__list__item:nth-of-type(9) .works__list__item__info {transition-delay: 1.4s;}
							.works__list__item:nth-of-type(10) .works__list__item__info {transition-delay: 1.5s;}
							.works__list__item:nth-of-type(11) .works__list__item__info {transition-delay: 1.6s;}
							.works__list__item:nth-of-type(12) .works__list__item__info {transition-delay: 1.7s;}
							.run .works__list__item__info {
								opacity: 1;
								transform: translate(0%,0%);
							}
								.works__list__item__info__date {
									display: flex;
									justify-content: flex-start;
									align-items: center;
									width: auto;
									height: auto;
									margin-right: var(--10px);
									font-size: var(--13px);
								}
									.works__list__item__info__date::after {
										content: '/';
										display: block;
										margin-left: var(--11px);
									}
								.works__list__item__info__customer {
									width: auto;
									height: auto;
									font-size: var(--12px);
								}
							.works__list__item__ttl {
								width: 100%;
								height: auto;
								margin: 0 auto var(--16px);
								font-family: "Noto Serif JP", serif;
								font-size: var(--16px);
								font-weight: 600;
								line-height: 1.5;
								letter-spacing: 0.08em;
								color: var(--color--black);
								opacity: 0;
								transform: translate(0%,10px);
								transition: .6s;
								transition-delay: .7s;
							}
							.works__list__item:nth-of-type(1) .works__list__item__ttl {transition-delay: .7s;}
							.works__list__item:nth-of-type(2) .works__list__item__ttl {transition-delay: .8s;}
							.works__list__item:nth-of-type(3) .works__list__item__ttl {transition-delay: .9s;}
							.works__list__item:nth-of-type(4) .works__list__item__ttl {transition-delay: 1s;}
							.works__list__item:nth-of-type(5) .works__list__item__ttl {transition-delay: 1.1s;}
							.works__list__item:nth-of-type(6) .works__list__item__ttl {transition-delay: 1.2s;}
							.works__list__item:nth-of-type(7) .works__list__item__ttl {transition-delay: 1.3s;}
							.works__list__item:nth-of-type(8) .works__list__item__ttl {transition-delay: 1.4s;}
							.works__list__item:nth-of-type(9) .works__list__item__ttl {transition-delay: 1.5s;}
							.works__list__item:nth-of-type(10) .works__list__item__ttl {transition-delay: 1.6s;}
							.works__list__item:nth-of-type(11) .works__list__item__ttl {transition-delay: 1.7s;}
							.works__list__item:nth-of-type(12) .works__list__item__ttl {transition-delay: 1.8s;}
							.run .works__list__item__ttl {
								opacity: 1;
								transform: translate(0%,0%);
							}
							.works__list__item__txt {
								width: 100%;
								height: auto;
								font-size: var(--12px);
								font-weight: 300;
								line-height: 2;
								letter-spacing: 0.08em;
								color: var(--color--black);
								opacity: 0;
								transform: translate(0%,10px);
								transition: .6s;
							}
							.works__list__item:nth-of-type(1) .works__list__item__txt {transition-delay: .8s;}
							.works__list__item:nth-of-type(2) .works__list__item__txt {transition-delay: .9s;}
							.works__list__item:nth-of-type(3) .works__list__item__txt {transition-delay: 1s;}
							.works__list__item:nth-of-type(4) .works__list__item__txt {transition-delay: 1.1s;}
							.works__list__item:nth-of-type(5) .works__list__item__txt {transition-delay: 1.2s;}
							.works__list__item:nth-of-type(6) .works__list__item__txt {transition-delay: 1.3s;}
							.works__list__item:nth-of-type(7) .works__list__item__txt {transition-delay: 1.4s;}
							.works__list__item:nth-of-type(8) .works__list__item__txt {transition-delay: 1.5s;}
							.works__list__item:nth-of-type(9) .works__list__item__txt {transition-delay: 1.6s;}
							.works__list__item:nth-of-type(10) .works__list__item__txt {transition-delay: 1.7s;}
							.works__list__item:nth-of-type(11) .works__list__item__txt {transition-delay: 1.8s;}
							.works__list__item:nth-of-type(12) .works__list__item__txt {transition-delay: 1.9s;}
							.run .works__list__item__txt {
								opacity: 1;
								transform: translate(0%,0%);
							}
						.works__list__item__stalker {
							position: absolute;
							pointer-events: none;
							opacity: 0;
							/* transition: .3s; */
						}
						.hover .works__list__item__stalker {
							opacity: 1;
						}
						.works__list__item__stalker._circle {
							width: var(--10px);
							height: var(--10px);
							border-radius: 50%;
							background-color: rgba(255, 255, 255, 0.6);
							z-index: 3;
						}
						.hover .works__list__item__stalker._circle {
							width: 7.65625vw;
							height: 7.65625vw;
						}
						.works__list__item__stalker._arrow {
							width: var(--10px);
							height: auto;
							z-index: 4;
							/* transition-delay: .03s; */
						}
							.works__list__item__stalker._arrow svg {
								width: 100%;
								height: auto;
								fill: var(--color--black);
							}
						.hover .works__list__item__stalker._arrow {
							width: 1.9375vw;
						}
		.pagination__wrap {
			width: 100%;
			height: auto;
			background-color: var(--color--white);
		}
			.pagination {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: auto;
				padding: 4.6875vw 0 5.46875vw;
				opacity: 0;
				transform: translate(0%,20%);
				transition: .6s;
			}
			.run .pagination {
				opacity: 1;
				transform: translate(0%,0%);
			}
				.nav-links {
					display: flex;
					justify-content: center;
					align-items: center;
					column-gap: var(--20px);
					width: auto;
					height: auto;
				}
					.page-numbers {
						display: block;
						width: auto;
						height: auto;
						padding-bottom: 0.3125vw;
						font-family: "Noto Serif", serif;
						font-size: var(--16px);
						font-weight: 400;
						line-height: 1.375;
						letter-spacing: 0em;
						color: var(--color--black);
						position: relative;
					}
					.page-numbers.prev,
					.page-numbers.next {
						display: flex;
						justify-content: center;
						align-items: center;
						width: var(--22px);
						height: 2.03125vw;
					}
					.page-numbers.prev {
						margin-right: 1.484375vw;
					}
					.page-numbers.next {
						margin-left: 1.484375vw;
					}
						.page-numbers svg {
							fill: var(--color--black);
						}
						.page-numbers.prev svg {
							transform: scale(-1,1);
						}
						.page-numbers::after {
							content: '';
							display: block;
							width: 100%;
							height: 1px;
							background-color: var(--color--black);
							opacity: 0;
							position: absolute;
							bottom: 0;
							left: 0;
							z-index: 1;
							pointer-events: none;
						}
						.page-numbers.current::after {
							opacity: .34;
						}
					@media (any-hover: hover) {
						.page-numbers::after {
							transition: .3s;
						}
						.page-numbers:hover::after {
							opacity: .34;
						}
					}

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

}

/* Tablet ================================================== */
@media all and (max-width: 768px){
/* works */
			.works__list {
				display: block;
				overflow: hidden;
			}
				.works__list__item {
					width: 100%;
					padding-bottom: 1px;
				}
					.works__list__item::before {
						display: none;
					}
					.works__list__item::after {
						transform: translate(0%,0%) scale(0,1);
					}
					.run .works__list__item::after {
						transform: translate(0%,0%) scale(1,1);
					}
						.works__list__item__image {
							aspect-ratio: 375 / 233;
						}
						.works__list__item__details {
							height: auto;
							padding: 5.866667vw 10vw 6.133333vw;
						}
							.works__list__item__info {
								margin: 0 auto 2.4vw;
							}
								.works__list__item__info__date {
									margin-right: var(--10px);
								}
								.works__list__item__info__customer {
									width: auto;
									height: auto;
									font-size: var(--12px);
								}
							.works__list__item__ttl {
								margin: 0 auto var(--12px);
							}
			.pagination {
				padding: 10.666667vw 0 8.533333vw;
			}
					.page-numbers {
						padding-bottom: 1.066667vw;
						font-size: var(--16px);
					}
					.page-numbers.prev,
					.page-numbers.next {
						height: 6.933333vw;
					}
					.page-numbers.prev {
						margin-right: 4.8vw;
					}
					.page-numbers.next {
						margin-left: 4.8vw;
					}
}

/* SP ================================================== */
@media all and (max-width: 575px){

}