@charset "utf-8";

section {
	.wrap {
		padding:90px 0;
		.contents {
			h2 {
				font-size:4.0rem;
				font-weight:400;
				letter-spacing:.05em;
				/* &:first-letter {
					font-size:1.5em;
					color:var(--color_main);
				} */
			}
		}
	}
}

#mv {
	.wrap {
		padding:0;
		video {
			display:block;
			width:100%;
			height:calc(100vh - 110px);
			height:calc(100dvh - 110px);
			object-fit:cover;
		}
	}
}

#works {
	.wrap {
		&:first-child {
			padding-bottom:60px;
		}
		.contents {
			.title_box {
				display:grid;
				grid-template-columns:auto 1fr;
				grid-column-gap:5%;
				align-items:center;
				p {
					font-size:1.6rem;
					display:none;
				}
			}
		}
		&.works {
			background-color:var(--color_sub2);
			padding:50px;
			&:not(:last-child) {
				margin-bottom:90px;
			}
			.contents {
				h3 {
					color:#FFFFFF;
					font-size:1.8rem;
					font-weight:500;
					margin-bottom:1em;
					letter-spacing:.05em;
				}
			}
			.img_box {
			max-width: 600px;
			margin:0 auto;
				display:flex;
				flex-wrap:wrap;
				align-items:start;
				gap:20px;
				img {
					display:block;
					max-width:calc(100vw - 40px);
				}
			}
			&.works1 {
				.img1 {
					flex-grow:1;
					width:calc(49.5% - 11px);
				}
				.img_inner {
					flex-grow:1;
					display:grid;
					grid-row-gap:20px;
					width:calc(50.5% - 10px);
					.img2 {
						width:100%;
					}
					.img3 {
						width:100%;
					}
				}
				.img4 {
					width:100%;
				}
			}
			&.works2 {
				.img1 {
					width:52.5%;
				}
				.img_inner {
					flex-grow:1;
					display:flex;
					flex-wrap:wrap;
					justify-content:space-between;
					gap:20px;
					width:calc(47.5% - 21px);
					.img2 {
						width:calc(50% - 11px);
					}
					.img3 {
						width:calc(50% - 10px);
					}
					.img4 {
						width:100%;
					}
				}
				.img5 {
					flex-grow:1;
					width:calc(38% - 21px);
				}
				.img6 {
					flex-grow:1;
					width:62%;
				}
			}
			&.works3 {
				.img1 {
					width:51.5%;
				}
				.img_inner {
					width:calc(48.5% - 21px);
					flex-grow:1;
					display:flex;
					flex-wrap:wrap;
					gap:20px;
					.img2 {
						width:100%;
					}
					.img3 {
						width:calc(50% - 10px);
					}
					.img4 {
						width:calc(50% - 10px);
					}
					.img5 {
						width:100%;
					}
				}
			}
			&.works4 {
				.img1 {
					width:52.5%;
				}
				.img2 {
					width:calc(47.5% - 21px);
					flex-grow:1;
				}
				.img3,.img4,.img5 {
					width:calc((100%/3) - 13.5px);
				}
			}
			&.works5 {
				.img1 {
					flex-grow:1;
					width:100%;
				}
				.img2,.img3,.img4 {
					width:calc((100%/3) - 13.5px);
				}
			}
		}
	}
}

#news {
	.wrap {
		.contents {
			h2 {
				margin-bottom:.5em;
			}
			.slider_wrap {
				.slick-list {
					overflow:visible;
				}
				.slider {
					img {
						width:1000px;
						max-width:80vw;
					}
				}
			}
			.news {
				max-width:900px;
				margin:50px auto 0;
				display:grid;
				grid-row-gap:15px;
				dl {
					font-size:1.6rem;
					display:grid;
					grid-template-columns:7em 1fr;
					align-items:center;
					dt {
						line-height:1.5;
					}
					a {
						&.nolink {
							pointer-events: none;
						}
						&.link {
							&::after {
								content:'»';
								color:#ff0000;
							}
						}
					}
				}
			}
		}
	}
}

#link {
	.wrap {
		background-color:var(--color_sub2);
		.contents {
			display:grid;
			grid-row-gap:50px;
			max-width:1000px;
			a {
				display:grid;
				grid-template-columns:auto 1fr;
				align-items:center;
				h2 {
					color:#FFFFFF;
					letter-spacing:.1em;
					min-width:7em
				}
			}
		}
	}
}

@media (hover:hover) {

	#link {
		.wrap {
			.contents {
				a {
					h2,img {
						transition:.3s;
					}
					&:hover {
						img {
							filter:brightness(1.2);
						}
						h2 {
							letter-spacing:.15em;
						}
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:1200px) {

}

@media screen and (max-width:1024px) {
	
	section {
		.wrap {
			.contents {
				h2 {
					font-size:3.4rem;
				}
			}
		}
	}
	
	#mv {
		.wrap {
			video {
				max-height:calc(100vh - 100px);
				max-height:calc(100dvh - 100px);
				height: auto;
				aspect-ratio: 16/9;
			}
		}
	}
	
	#works {
		.wrap {
			&:first-child {
				padding-bottom:30px;
			}
			.contents {
				.title_box {
					p {
						font-size:1.5rem;
					}
				}
			}
			&.works {
				padding:50px 30px;
				&:not(:last-child) {
					margin-bottom:60px;
				}
			}
		}
	}
}

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

	section {
		.wrap {
			padding:45px 0;
			.contents {
				h2 {
					font-size:2.6rem;
				}
			}
		}
	}
	
	#mv {
		.wrap {
			padding:0;
			video {
				/* height:calc(100vh - 80px);
				height:calc(100dvh - 80px); */
				max-height:calc(100vh - 80px);
				max-height:calc(100dvh - 80px);
			}
		}
	}
	
	#works {
		.wrap {
			&:first-child {
				padding-bottom:20px;
			}
			.contents {
				.title_box {
					display:grid;
					grid-template-columns:1fr;
					grid-row-gap:20px;
				}
			}
			&.works {
				padding:30px 20px;
				&:not(:last-child) {
					margin-bottom:30px;
				}
				.contents {
					width:100%;
					h3 {
						font-size:1.6rem;
					}
				}
			}
		}
	}
	
	#news {
		.wrap {
			.contents {
				.news {
					margin:30px auto 0;
					dl {
						font-size:1.4rem;
						grid-template-columns:1fr;
						grid-row-gap:.5em;
					}
				}
			}
		}
	}
	
	#link {
		.wrap {
			.contents {
				grid-row-gap:30px;
				a {
					grid-template-columns:1fr;
					grid-row-gap:15px;
				}
			}
		}
	}
		
}

@media screen and (max-width:640px) {

}