@charset "utf-8";

section {
	.wrap {
		padding:120px 0;
		.contents {
			h2 {
				font-size:2.4rem;
				display:grid;
				grid-row-gap:.66em;
				color:#333333;
				font-weight:500;
				margin-bottom:2em;
				span {
					font-size:9.6rem;
					font-weight:500;
					color:var(--color_main);
				}
			}
			.ttl_box {
				display:grid;
				grid-template-columns:repeat(2,auto);
				align-items:center;
				justify-content:space-between;
			}
			.slider_wrap {
				margin:0 -15px;
				.slick-arrow {
					width:40px;
					height:40px;
					z-index:5;
					&::before {
						content:none;
					}
					&.slick-next {
						background:url(../img/common/arrow-box-green-right.svg) no-repeat center center/contain;
						right:-45px;
					}
					&.slick-prev {
						background:url(../img/common/arrow-box-green-left.svg) no-repeat center center/contain;
						left:-45px;
					}
				}
				.slick-dots {
					position:relative;
					bottom:auto;
					margin-top:20px;
					li {
						margin:0 5px;
						padding:5px 0;
						width:auto;
						height:auto;
						button {
							height:3px;
							width:50px;
							padding:0;
							background-color:#999999;
							&::before {
								content:none;
							}
						}
						&.slick-active {
							button {
								background-color:var(--color_main);
							}
						}
					}
				}
			}
		}
	}
}

#mv {
	.wrap {
		position:relative;
		z-index:1;
		padding:0;
		overflow: clip;
		.mvvideo {
			width:100%;
			min-width:100%;
			aspect-ratio:16/6.7;
			max-height:calc(100vh - 300px);
			object-fit:cover;
			position:relative;
			z-index:1;
			display:block;
		}
		.slider_mv {
			max-width:1200px;
			margin:-100px auto 0;
			position:relative;
			z-index:1;
			.slider {
				.slick-list {
					overflow: visible;
				}
				.slide {
					padding:0 10px;
					transition:1s;
					width: 370px;
					a {
						display:block;
						img {
							display:block;
							border:3px solid #FFFFFF;
							box-shadow:0 3px 6px rgba(0,0,0,.15);
						}
					}
					&.slick-current {
						transform:scale(1.36);
						& ~ .slide {
							transform:translateX(18%);
						}
					}
					&:not(.slick-current):not(.slick-current ~ .slide) {
						transform:translateX(-18%);
					}
					&.center-slide {
						transform:scale(1.36);
					}
					&.right-slide {
						transform:translateX(18%);
					}
					&.left-slide {
						transform:translateX(-18%);
					}
				}
				.slick-dots {
					position:relative;
					bottom:auto;
					margin-top:50px;
					li {
						margin:0 5px;
						padding:5px 0;
						width:auto;
						height:auto;
						button {
							height:6px;
							width:70px;
							padding:0;
							background-color:#FFFFFF;
							border:1px solid var(--color_main);
							&::before {
								content:none;
							}
						}
						&.slick-active {
							button {
								background-color:var(--color_main);
							}
						}
					}
				}
			}
		}
	}
}

#company {
	.wrap {
		padding-bottom:0;
		overflow:clip;
		.contents {
			h3 {
				font-size:2.7rem;
				color:#3C6172;
				line-height:1.5;
				padding-bottom:.33em;
				border-bottom:5px solid var(--color_sub2);
				margin-bottom:1.5em;
			}
			.contents_inner {
				display:grid;
				align-items:center;
				grid-column-gap:5%;
				.detail {
					p {
						&:not(:last-child) {
							margin-bottom:1em;
						}
					}
				}
				&.item1 {
					grid-template-columns:30% 1fr;
					margin-bottom:50px;
				}
				&.item2 {
					grid-template-columns:repeat(2,1fr);
					margin-bottom:90px;
					.img {
						display:grid;
						grid-template-columns:repeat(2,1fr);
						grid-column-gap:5px;
					}
				}
			}
		}
		.slider_company {
			.slide {
				img {
					display:block;
				}
			}
			.slick-list {
				overflow:visible;
			}
			.slick-slider div{
				transition: none;
			}
			.slick-slide{
				-webkit-backface-visibility: hidden;
				-webkit-transform-style: preserve-3d;
			}
		}
	}
}

#works {
	.wrap {
		.contents {
			.link {
				display:flex;
				margin-bottom:40px;
				li {
					flex-grow:1;
					cursor:pointer;
					background-color:var(--color_sub3);
					display:grid;
					height:3.5em;
					align-items:center;
					justify-content:center;
					box-shadow:0 3px 6px rgba(0,0,0,.2);
					&.active {
						background-color:var(--color_sub);
						color:#FFFFFF;
					}
				}
			}
			.slider_wrap {
				&:not(.active) {
					opacity:0;
					overflow:hidden;
					height:0;
					pointer-events:none;
				}
				& > div {
					margin-bottom:0;
					.slide {
						padding:0 15px;
						a {
							display:grid;
							.img {
								position:relative;
								img {
									display:block;
									width:100%;
									aspect-ratio:4/3;
									object-fit:cover;
								}
								.cat {
									position:absolute;
									z-index:1;
									background-color:var(--color_sub3);
									right:0;
									bottom:0;
									font-size:1.3rem;
									padding:1em 1.5em;
								}
							}
							p {
								font-size:1.7rem;
								line-height:1.5;
								font-weight:400;
								text-align:center;
								padding-top:1em;
							}
						}
					}
				}
			}
		}
	}
}

#column {
	.wrap {
		background:url(../img/top/column-bg.jpg) no-repeat center center/cover;
		.contents {
			.slider_wrap {
				.slider_column {
					margin-bottom:0;
					.slide {
						padding:0 15px;
						a {
							display:grid;
							.img {
								position:relative;
								img {
									display:block;
									width:100%;
									aspect-ratio:4/3;
									object-fit:cover;
								}
								.cat {
									position:absolute;
									z-index:1;
									background-color:var(--color_sub3);
									right:0;
									bottom:0;
									font-size:1.3rem;
									padding:1em 1.5em;
								}
							}
							.date {
								font-size:1.4rem;
								padding:.75em 0 .5em;
							}
							p {
								font-size:2.0rem;
								line-height:1.5;
								font-weight:400;
							}
						}
					}
				}
			}
		}
	}
}

#news {
	.wrap {
		.contents {
			.news {
				li {
					border-bottom:1px solid #cccccc;
					a {
						display:grid;
						padding:30px;
						grid-template-columns:32% 1fr;
						grid-column-gap:3%;
						align-items:center;
						.img {
							img {
								display:block;
								width:100%;
								aspect-ratio:7/4;
								object-fit:cover;
							}
						}
						.detail {
							.info {
								display:grid;
								align-items:center;
								grid-template-columns:8em auto;
								justify-content:start;
								font-size:1.3rem;
								margin-bottom:1.5em;
								.cat {
									background-color:var(--color_main);
									color:#FFFFFF;
									a {
										padding:.5em .75em;
										display:block;
										color:#FFFFFF;
										font-size:1.1rem;
									}
								}
							}
							h3 {
								font-size:2.0rem;
								line-height:1.5;
								margin-bottom:1em;
							}
							p {
								font-size:1.4rem;
								line-height:1.66;
							}
						}
					}
				}
			}
		}
	}
}

#contact {
	.bgimg {
		width:100%;
		height:600px;
		background:url(../img/top/parallax.jpg) no-repeat center center/cover;
		background-attachment:fixed;
	}
	.wrap {
		position:relative;
		&::before {
			content:'';
			display:block;
			width:100%;
			height:640px;
			position:absolute;
			z-index:0;
			top:0;
			left:0;
			background:url(../img/top/contact-bg.jpg) no-repeat center center/cover;
		}
		.contents {
			position:relative;
			z-index:1;
			h2 {
				justify-items:center;
				margin-bottom:1em
			}
			p {
				&.body {
					text-align:center;
					margin-bottom:3em;
				}
			}
			ul {
				background-color:var(--color_sub3);
				padding:30px 100px 60px;
				margin-bottom:90px;
				li {
					border-bottom:1px solid #000000;
					font-size:4.0rem;
					a {
						display:grid;
						grid-template-columns:1.5em 1fr 1.5em;
						align-items:center;
						grid-column-gap:.5em;
						padding:.66em 0;
						div {
							display:grid;
							grid-template-columns:auto 1fr;
							align-items:center;
							grid-column-gap:1em;
							grid-row-gap:.33em;
							.tit {
								font-weight:700;
							}
							.txt {
								font-size:1.9rem;
								font-weight:400;
							}
							.note {
								grid-area:2/1/3/3;
								font-size:1.1rem;
								&:has(span) {
									display:grid;
									grid-template-columns:auto 1fr;
									align-items:center;
									grid-column-gap:1em;
									span {
										font-size:1.8rem;
										font-weight:700;
									}
								}
							}
						}
					}
				}
			}
			dl {
				display:grid;
				font-size:1.8rem;
				grid-template-columns:10em 1fr;
				align-items:center;
				grid-row-gap:2em;
				dt {
					img {
						display:block;
						width:70%;
						margin:0 auto;
					}
				}
				dd {
					border-left:1px solid #000000;
					display:grid;
					grid-row-gap:.5em;
					padding-left:1em;
					height:100%;
					align-content:center;
					p {
						font-size:inherit;
						line-height:1.8;
					}
					a {
						justify-self:end;
						font-weight:600;
						color:var(--color_sub);
					}
				}
			}
		}
	}
}

@media (hover:hover) {
	
	.slick-slide {
		a {
			&:hover {
				overflow: hidden;
				opacity: 1;
				filter: brightness(1.2);
			}
		}
	}

}

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

	#works {
		.wrap {
			.contents {
				.slider_wrap {
					width:calc(100% - 50px);
					margin:0 auto;
				}
			}
		}
	}
	
	#column {
		.wrap {
			.contents {
				.slider_wrap {
					width:calc(100% - 50px);
					margin:0 auto;
				}
			}
		}
	}
	
}

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

	section {
		.wrap {
			padding:90px 0;
			.contents {
				h2 {
					font-size:2rem;
					span {
						font-size:7rem;
					}
				}
			}
		}
	}
	
	#mv {
		.wrap {
			.slider_mv {
				margin:-60px auto 0;
				.slider {
					.slide {
						width: 280px;
					}
				}
			}
		}
	}
	
	#works {
		.wrap {
			.contents {
				.link {
					li {
						font-size:1.4rem;
					}
				}
				.slider_wrap {
					& > div {
						.slide {
							padding:0 10px;
							a {
								.img {
									.cat {
										font-size:1.2rem;
									}
								}
								p {
									font-size:1.6rem;
								}
							}
						}
					}
				}
			}
		}
	}
	
	#column {
		.wrap {
			.contents {
				.slider_wrap {
					.slider_column {
						.slide {
							padding:0 10px;
							a {
								.img {
									.cat {
										font-size:1.2rem;
									}
								}
								p {
									font-size:1.6rem;
								}
							}
						}
					}
				}
			}
		}
	}
	
	#contact {
		.bgimg {
			height:400px;
		}
		.wrap {
			.contents {
				ul {
					padding:30px;
					li {
						font-size:3.0rem;
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:768px) {
	
	section {
		.wrap {
			padding:60px 0;
			.contents {
				h2 {
					font-size:1.8rem;
					span {
						font-size:4.6rem;
					}
				}
				.ttl_box {
					display:contents;
				}
				.slider_wrap {
					.slick-arrow {
						width:30px;
						height:30px;
						&.slick-next {
							right:-15px;
						}
						&.slick-prev {
							left:-15px;
						}
					}
					.slick-dots {
						li {
							margin:0 3px;
							button {
								width:40px;
							}
						}
					}
				}
			}
		}
	}
	
	#mv {
		.wrap {
			.mvvideo {
				aspect-ratio: 1.55;
				max-height: calc(100dvh - 56vw);
			}
			.slider_mv {
				margin:max(-15vw,-80px) auto 0;
				.slider {
					.slide {
						padding:0 20px;
						width: min(73.5vw,370px);
					}
					.slick-dots {
						margin-top:40px;
						li {
							margin:0 3px;
							button {
								height:5px;
								width:40px;
							}
						}
					}
				}
			}
		}
	}
	
	#company {
		.wrap {
			.contents {
				.contents_wrap {
					display:grid;
				}
				.btn {
					order:2;
					margin:0 auto 30px;
				}
				h3 {
					font-size:2rem;
					border-bottom:3px solid var(--color_sub2);
				}
				.contents_inner {
					&.item1 {
						grid-template-columns:1fr;
						margin-bottom:30px;
						.img {
							margin-bottom:20px;
						}
					}
					&.item2 {
						grid-template-columns:1fr;
						margin-bottom:30px;
						.img {
							grid-area:1/1/2/2;
							margin-bottom:20px;
						}
					}
				}
			}
		}
	}
	
	#works {
		.wrap {
			.contents {
				position:relative;
				padding-bottom:100px;
				.btn {
					position:absolute;
					left:50%;
					bottom:0;
					transform:translateX(-50%);
				}
				.link {
					flex-wrap:wrap;
					margin-bottom:30px;
					row-gap:1px;
					li {
						width:33%;
						&:first-child {
							width:5em;
						}
					}
				}
				.slider_wrap {
					width:100%;
					& > div {
						.slide {
							padding:0 5px;
						}
					}
				}
			}
		}
	}
	
	#column {
		.wrap {
			.contents {
				position:relative;
				padding-bottom:100px;
				.btn {
					position:absolute;
					left:50%;
					bottom:0;
					transform:translateX(-50%);
				}
				.slider_wrap {
					width:100%;
					.slider_column {
						.slide {
							padding:0 5px;
						}
					}
				}
			}
		}
	}
	
	#news {
		.wrap {
			.contents {
				display:grid;
				.btn {
					order:2;
					margin:0 auto;
				}
				.news {
					margin-bottom:30px;
					li {
						border-bottom:1px solid #cccccc;
						a {
							padding:15px 0;
							grid-template-columns:30% 1fr;
							grid-template-rows:auto 1fr auto;
							grid-column-gap:5%;
							align-items:start;
							align-content:start;
							.img {
								grid-area:1/1/3/2;
								img {
									aspect-ratio:1;
								}
							}
							.detail {
								display:contents;
								.info {
									margin-bottom:1em;
								}
								h3 {
									font-size:1.6rem;
									margin-bottom:0;
								}
								p {
									margin-top:1em;
									grid-area:3/1/4/3;
								}
							}
						}
					}
				}
			}
		}
	}
	
	#contact {
		.bgimg {
			background:url(../img/top/parallax.jpg) no-repeat center center/cover;
			height:200px;
		}
		.wrap {
			position:relative;
			&::before {
				content:'';
				display:block;
				width:100%;
				height:640px;
				position:absolute;
				z-index:0;
				top:0;
				left:0;
				background:url(../img/top/contact-bg.jpg) no-repeat center center/cover;
			}
			.contents {
				p {
					&.body {
						margin-bottom:2em;
					}
				}
				ul {
					padding:20px;
					margin-bottom:30px;
					li {
						font-size:2.0rem;
						a {
							display:grid;
							grid-template-columns:1.5em 1fr 1em;
							div {
								grid-template-columns:1fr;
								.txt {
									font-size:1.6rem;
								}
								.note {
									grid-area:unset;
									line-height:1.4;
									&:has(span) {
										grid-template-columns:1fr;
										grid-row-gap:.33em;
									}
								}
							}
						}
					}
				}
				dl {
					font-size:1.4rem;
					grid-template-columns:5em 1fr;
					grid-row-gap:1.5em;
					dt {
						img {
							width:90%;
							margin-left:0;
						}
					}
					dd {
						padding-left:.66em;
						font-size:1.3rem;
						p {
							line-height:1.6;
						}
						a {
							font-size:1.2rem;
						}
					}
				}
			}
		}
	}
	
}