/* CSS Document */

#pagePath{
	display: none;
}

#hero{
	position: relative;
	display: grid;
	@media (max-width: 1199.98px) {
		background: #e8e8e8;
		padding-bottom: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		.slick-slider{
			display: grid;
			grid-template-columns: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 1fr auto 1fr clamp(24px, calc(32 / 1200 * 100dvw), 32px);
			grid-row-gap: 24px;
		}
		.slick-list{
			grid-column: 1 / 6;
		}
		.slick-arrow{
			margin: 0 12px;
		}
		.slick-prev{
			grid-column: 2;
			grid-row: 2;
			justify-self: end;
		}
		.slick-next{
			grid-column: 4;
			grid-row: 2;
		}
		.slick-dots{
			grid-column: 3;
			grid-row: 2;
			grid-gap: 8px;
			margin: 0 12px;
		}
	}
	@media (min-width: 1200px) {
		.slick-slider{
			display: grid;
			grid-template-columns: 1fr auto auto auto clamp(24px, calc(32 / 1200 * 100dvw), 32px);
			grid-row-gap: 24px;
			&:before{
				content: "";
				grid-column: 1 / 6;
				grid-row: 1;
				height: clamp(560px, calc(765 / 1200 * 100dvw), 765px);
			}
		}
		.slick-list{
			grid-column: 1 / 6;
			grid-row: 1 / 4;
		}
		.slick-arrow{
			margin: 0 8px;
		}
		.slick-prev{
			grid-column: 2;
			grid-row: 2;
			justify-self: end;
		}
		.slick-next{
			grid-column: 4;
			grid-row: 2;
		}
		.slick-dots{
			grid-column: 3;
			grid-row: 2;
			grid-gap: 8px;
			margin: 0 8px;
		}
	}
}

#heroSlide{
	display: grid;
	& dl{
		grid-column: 1;
		grid-row: 1;
		position: relative;
		display: grid;
	}
	& dt{
		order: 1;
		color: var(--variable-color);
		padding: 0.25em 0.5em;
		font-weight: 500;
		font-size: clamp(24px, calc(36 / 768 * 100dvw), 36px);
		letter-spacing: 0.08em;
		text-align: center;
		@media (min-width: 1200px) {
			justify-self: center;
			width: min(var(--wrap-fit), 640px);
		}
	}
	& dd{
		display: contents;
		& img{
			width: 100%;
			height: clamp(560px, calc(765 / 1200 * 100dvw), 765px);
			object-fit: cover;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

#news{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(40px, calc(72 / 1200 * 100dvw), 72px) 0;
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 849.1 623.42"><path fill="white" opacity="0.1" d="M21.27,319.62c18.27,19.16,63.88,33,121.91,24.52,56.78-8.31,62.64-9.59,102.55-7.82,44.24,1.96,64.21,6.13,100.13,15.04,33.85,8.4,95.56,38.33,163.78,32.56,68.22-5.77,149.9-32.22,140.89-70.29-7.33-30.96-56.64-32.79-84.97-32.79s-82.39,5.4-128.24,22.09c-45.85,16.69-88.38,22.04-130.13,25.54-41.75,3.5-68.57-3.41-89.07-8.36s-58.01-17.52-83.26-26.1c0,0-28.12-9.61-47.82-12.07-63.03-7.89-84.03,18.52-65.76,37.68ZM139.88,135.3c61.13-20.81,74.38-32.22,121.33-33.54s84.24,8.65,121.92,17.96,163.94,48.05,237.04,36.48,111.9-56.22,99.85-102.49C707.96,7.44,630.75-.98,600.26.09c-30.49,1.06-75.02,13.89-123.45,41.66-48.43,27.77-94.91,42.6-139.64,49.63-44.74,7.04-93.93,1.67-116.26-5.28s-68.89-25.07-91.01-37.61c0,0-23.35-14.38-52.11-17.05C9.39,25.11-13.33,72.39,7.37,101.61c20.7,29.22,71.39,54.5,132.51,33.69ZM773.99,145.25c-27.72,3.08-49.8,15.83-49.8,15.83-20.96,11.17-65.35,27.73-86.7,34.22s-49.28,15.55-92.76,10.96c-43.48-4.59-87.77-11.6-135.52-33.48s-104.04-28.96-133.55-28.96-78.16,3.69-88.49,43c-11.74,44.7,75.68,84.6,146.72,92.16,71.04,7.56,135.31-31.67,170.56-42.69,37.41-11.69,58.18-17.69,104.28-19.72,30.87-1.36,41.92-3.5,106.79,10.25,60.46,12.82,107.93-7.02,126.95-32.14,19.02-25.12-2.59-56.72-68.48-49.4ZM517.27,520.36c-26.48,0-77,5.36-119.86,21.91-42.86,16.55-82.6,21.86-121.63,25.33-39.02,3.47-64.16-3.11-83.25-8.29-19.56-5.31-57.9-18.72-78.37-26.72,0,0-19.27-8.81-44.14-11.14-59.13-5.54-78.53,18.37-61.46,37.37s59.65,32.85,113.94,24.32c53.84-8.47,58.54-9.51,95.84-7.75,41.35,1.95,59.55,9.6,93.13,18.45,31.64,8.34,89.78,34.49,153.54,28.77s144.37-36.02,131.68-69.72c-11.03-29.3-52.94-32.53-79.42-32.53ZM722.4,392.63c-28.66,2.53-59.37,12.93-59.37,12.93-21.68,9.17-59.68,22.84-81.76,28.16-22.08,5.32-50.95,12.77-95.91,9-44.96-3.77-88.14-12.18-140.11-27.5-50.4-14.86-106.33-25.64-136.84-25.64s-86.48,3.49-92.73,37.16c-6.78,36.52,70.53,70.22,151.7,75.68,73.55,4.95,139.9-26.01,176.35-35.06,38.68-9.6,60.18-14.08,107.81-16.2,42.97-1.91,48.6-4.45,110.41,8.42,61.81,12.87,111.59-5.77,131.26-26.4s-2.68-46.58-70.8-40.57Z"/></svg>') no-repeat calc(50dvw + clamp(88px, calc(240 / 1200 * 100dvw), 240px)) top / clamp(304px, calc(848 / 1200 * 100dvw), 848px) auto, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 697.02 511.75"><path fill="white" opacity="0.1" d="M424.62,427.16c-21.74,0-63.21,4.4-98.39,17.99-35.18,13.59-67.81,17.94-99.84,20.79-32.03,2.85-52.67-2.55-68.34-6.8-16.06-4.36-47.53-15.37-64.33-21.93,0,0-15.82-7.23-36.24-9.14-48.54-4.55-64.47,15.08-50.45,30.68,14.02,15.6,48.97,26.97,93.53,19.96,44.19-6.95,48.06-7.81,78.68-6.36,33.94,1.6,48.89,7.88,76.45,15.14,25.97,6.84,73.7,28.31,126.04,23.62,52.34-4.7,118.51-29.56,108.1-57.23-9.05-24.05-43.46-26.7-65.19-26.7ZM114.83,111.07c50.18-17.08,61.06-26.45,99.6-27.53,38.54-1.08,69.16,7.1,100.08,14.74,30.93,7.64,134.58,39.44,194.58,29.95,60-9.5,91.86-46.15,81.96-84.13C581.15,6.11,517.77-.8,492.75.07c-25.03.87-61.59,11.4-101.34,34.2-39.76,22.8-77.91,34.97-114.63,40.74-36.72,5.78-77.1,1.37-95.43-4.33-18.33-5.7-56.55-20.58-74.71-30.87,0,0-19.16-11.8-42.78-13.99C7.71,20.61-10.94,59.42,6.05,83.41c16.99,23.99,58.6,44.74,108.78,27.66ZM17.46,262.37c15,15.73,52.44,27.09,100.07,20.13,46.61-6.82,51.42-7.87,84.18-6.42,36.32,1.61,52.71,5.03,82.2,12.35,27.79,6.9,78.45,31.46,134.45,26.73,56-4.74,123.05-26.45,115.66-57.7-6.01-25.41-46.5-26.92-69.75-26.92s-67.63,4.43-105.27,18.13c-37.64,13.7-72.55,18.09-106.83,20.96-34.28,2.88-56.29-2.8-73.12-6.86-16.83-4.06-47.62-14.38-68.35-21.42,0,0-23.08-7.89-39.25-9.91-51.74-6.48-68.98,15.2-53.98,30.93ZM635.36,119.23c-22.75,2.53-40.88,12.99-40.88,12.99-17.21,9.17-53.65,22.77-71.17,28.09-17.53,5.32-40.45,12.76-76.14,9-35.69-3.77-72.05-9.53-111.24-27.49s-85.41-23.77-109.63-23.77-64.16,3.03-72.64,35.3c-9.64,36.69,62.12,69.44,120.44,75.65,58.32,6.21,111.07-26,140.01-35.05,30.71-9.6,47.76-14.52,85.6-16.19,25.34-1.12,34.41-2.87,87.66,8.41,49.63,10.52,88.59-5.77,104.21-26.39,15.62-20.62-2.13-46.56-56.21-40.55ZM593.01,322.3c-23.52,2.08-48.74,10.62-48.74,10.62-17.79,7.53-48.99,18.75-67.11,23.12-18.12,4.37-41.82,10.48-78.73,7.39-36.9-3.1-72.36-10-115.02-22.57-41.37-12.19-87.29-21.04-112.33-21.04s-70.99,2.86-76.12,30.51c-5.57,29.98,57.89,57.64,124.53,62.12,60.38,4.06,114.84-21.35,144.76-28.78,31.75-7.88,49.4-11.56,88.5-13.3,35.27-1.57,39.89-3.65,90.64,6.91s91.6-4.73,107.75-21.67c16.15-16.93-2.2-38.24-58.12-33.3Z"/></svg>') no-repeat calc(50dvw - clamp(56px, calc(136 / 1200 * 100dvw), 136px) - clamp(248px, calc(696 / 1200 * 100dvw), 697px)) bottom / clamp(248px, calc(696 / 1200 * 100dvw), 696px) auto, var(--variable-color);
	&:before{
		content: "";
		grid-column: 1;
		grid-row: 1 / 4;
		background: #fff;
		border-radius: clamp(8px, calc(16 / 1200 * 100dvw), 16px);
	}
	&>*{
		grid-column: 1;
	}
	& h2{
		grid-row: 1;
		font-weight: 700;
		font-size: clamp(24px, calc(36 / 768 * 100dvw), 36px);
		letter-spacing: 0.06em;
		text-align: center;
	}
	#newsList{
		grid-row: 2;
	}
	#newsLink{
		grid-row: 3;
	}
	@media (max-width: 991.98px) {
		& h2{
			margin-top: 24px;
		}
		#newsList,
		#newsLink{
			padding: 24px clamp(16px, calc(32 / 768 * 100dvw), 32px);
		}
	}
	@media (min-width: 992px) {
		grid-template-columns: 320px calc(var(--wrap) - 280px);
		grid-template-rows: auto 1fr;
		&:before{
			grid-column: 1 / 3;
			grid-row: 1 / 3;
		}
		& h2{
			margin: 40px 0 0 40px;
		}
		#newsList{
			grid-column: 2;
			grid-row: 1 / 3;
			padding: 40px 64px;
		}
		#newsLink{
			grid-row: 2;
			align-self: start;
			margin: 40px 0 40px 40px;
			filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
		}
	}
}

#newsList{
	& section{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 8px 16px;
		&:nth-child(n+2){
			padding-top: 16px;
			border-top: 1px solid var(--variable-color);
		}
		&:not(:last-child){
			padding-bottom: 16px;
		}
	}
	& h3{
		order: 1;
		width: 100%;
		font-weight: 500;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		letter-spacing: 0.05em;
	}
	& h3+div{
		display: contents;
		& time{
			font-weight: 500;
			font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
			letter-spacing: 0.05em;
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px;
		}
		& li{
			display: grid;
			align-items: center;
			width: 6em;
			padding: 0 0.5em;
			background: var(--variable-color);
			border-radius: 2px;
			color: #fff;
			font-weight: 500;
			font-size: clamp(10px, calc(11 / 768 * 100dvw), 11px);
			letter-spacing: 0.05em;
			text-align: center;
			text-transform: uppercase;
			&.tagNew{
				background: #c51e50;
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

#newsLink{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		align-items: center;
		min-width: min(100%, clamp(250px, calc(340 / 768 * 100dvw), 340px));
		min-height: clamp(32px, calc(64 / 768 * 100dvw), 64px);
		padding: 4px clamp(16px, calc(24 / 768 * 100dvw), 24px);
		background: var(--variable-color);
		color: #fff;
		border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
		font-weight: 500;
		font-size: clamp(14px, calc(17 / 768 * 100dvw), 17px);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		@media (min-width: 768px) {
			grid-template-columns: 1fr auto;
			column-gap: 8px;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 12px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><polyline points="11 3.5 6 8.5 1 3.5" style="fill: none; stroke: black;"/></svg>') no-repeat center / contain;
			}
		}
	}
}

#link{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	justify-content: center;
	grid-gap: clamp(32px, calc(64 / 1200 * 100dvw), 64px);
	width: var(--wrap);
	margin: clamp(48px, calc(112 / 1200 * 100dvw), 112px) auto;
	& dl{
		position: relative;
		display: grid;
		background: #ccc;
		border-radius: 10px;
	}
	& dt{
		order: 1;
		padding: 0.75em 1em;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.1em;
		text-align: center;
	}
	& dd{
		&:has(img){
			padding: 8px 8px 0 8px;
		}
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 4px;
		}
		&:has(a){
			display: contents;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

#works{
	position: relative;
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: 24px 0 clamp(48px, calc(104 / 1200 * 100dvw), 104px) 0;
	overflow: hidden;
	& h2{
		display: grid;
		color: var(--variable-color);
		font-weight: 700;
		font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.1em;
		text-align: center;
		&:after{
			content: attr(data-ruby);
			color: var(--color);
			font-size: clamp(24px, calc(36 / 768 * 100dvw), 36px);
			line-height: 1;
		}
	}
	#worksList{
		margin-top: clamp(16px, calc(32 / 1200 * 100dvw), 32px);
	}
	#worksLink{
		margin-top: clamp(32px, calc(80 / 1200 * 100dvw), 80px);
	}
	.slick-slide{
		margin: 0 12px;
	}
	.slick-list{
		margin: 0 -12px;
	}
	@media (max-width: 1199.98px) {
		.slick-list{
			overflow: visible;
		}
	}
	@media (max-width: 575.98px) {
		.slick-slider{
			grid-template-columns: 0 1fr 0;
			padding: 0 24px;
			grid-row-gap: 24px;
			&:before{
				content: "";
				grid-column: 2;
				grid-row: 1;
				aspect-ratio: 3 / 2;
			}
		}
		.slick-list{
			grid-column: 2;
			grid-row: 1 / 3;
		}
		.slick-arrow{
			align-self: center;
			justify-self: center;
			background: #fff;
		}
		.slick-dots{
			grid-column: 2;
			grid-gap: 8px;
		}
	}
	@media (min-width: 576px) {
		padding-top: clamp(48px, calc(112 / 1200 * 100dvw), 112px);
		.slick-slider{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			grid-gap: 24px;
		}
		.slick-list{
			order: -1;
			width: calc(100% + 24px);
		}
		.slick-next{
			order: 1;
		}
		.slick-dots{
			grid-gap: 8px 16px;
		}
	}
}

#worksList{
	display: grid;
	&:not(.slick-initialized){
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
		grid-gap: 24px;
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			grid-row: 1;
			aspect-ratio: 3 / 2;
			border-radius: 12px;
			background: var(--dummy);
		}
	}
	& h3{
		font-weight: 500;
		font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
		letter-spacing: 0.05em;
	}
	& h3+div{
		display: contents;
		& p{
			font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
			letter-spacing: 0.04em;
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px;
		}
		& li{
			display: grid;
			align-items: center;
			padding: 0 0.5em;
			border: 1px solid currentColor;
			border-radius: 2px;
			color: var(--variable-color);
			font-weight: 500;
			font-size: clamp(10px, calc(11 / 768 * 100dvw), 11px);
			letter-spacing: 0.05em;
			text-align: center;
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		grid-row: 1;
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 12px;
		}
	}
}

#worksLink{
	display: flex;
	justify-content: center;
	& a{
		display: grid;
		align-items: center;
		min-width: min(100%, clamp(250px, calc(340 / 768 * 100dvw), 340px));
		min-height: clamp(32px, calc(64 / 768 * 100dvw), 64px);
		padding: 4px clamp(16px, calc(24 / 768 * 100dvw), 24px);
		background: var(--variable-color);
		color: #fff;
		border-radius: clamp(4px, calc(8 / 768 * 100dvw), 8px);
		font-weight: 500;
		font-size: clamp(14px, calc(17 / 768 * 100dvw), 17px);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		@media (min-width: 768px) {
			grid-template-columns: 1fr auto;
			column-gap: 8px;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 12px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><polyline points="11 3.5 6 8.5 1 3.5" style="fill: none; stroke: black;"/></svg>') no-repeat center / contain;
			}
		}
	}
}



.slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	aspect-ratio: 1;
	width: 24px;
	border: 1px solid currentColor;
	border-radius: 100%;
	color: #aaa;
	font-size: 0;
	z-index: 1;
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: currentColor;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black;"><polyline points="6 3 11 8 6 13"/></svg>') no-repeat center / 16px;
	}
	&.slick-prev:before{
		transform: scale(-1, 1);
	}
}

.slick-dots{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	& li{
		aspect-ratio: 1;
		width: 10px;
		background: #bdbdbd;
		border-radius: 100%;
		overflow: hidden;
		&.slick-active{
			background: var(--variable-color);
		}
	}
	& button{
		visibility: hidden;
	}
}