@charset "utf-8";

#header {
	position:fixed;
	background-color:transparent;
	transition: .3s;
	.header {
		.header_inner {
			.logo {
				a {
					color:var(--color_white);
				}
			}
			.menu-gmenu-container {
				.menu {
					& > li {
						& > a {
							color:var(--color_white);
						}
						&:has(ul) {
							& > a {
								&::after {
									border-color:var(--color_white);
								}
							}
						}
					}
				}
			}
		}
	}
	&.scroll {
		background-color:rgba(2,21,64,.8);
	}
}

section {
	.wrap {
		.contents {
			h2 {
				font-size:3.6rem;
				line-height:1;
				color:var(--color_white);
				display:grid;
				margin-bottom:1.75em;
				.font_jp {
					font-weight:500;
					margin-top:-.8em;
				}
				.font_en {
					font-size:10rem;
					color:rgba(255,255,255,.2);
				}
			}
			p {
				color:var(--color_white);
			}
		}
	}
}

#mv {
	position:relative;
	.wrap {
		aspect-ratio:2.2;
		background:url(../img/top/mv.jpg) no-repeat center center/cover;
		display:grid;
		grid-template-columns:1fr;
		align-items:center;
		justify-content:center;
		overflow:hidden;
		&::before {
			content:'';
			display:block;
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			z-index:1;
			background-color:rgba(70,127,255,.8);
			mix-blend-mode: multiply;
		}
		.contents {
			width:100%;
			max-width:100%;
			position:relative;
			z-index:2;
			text-align:center;
			border-top:1px solid rgba(255,255,255,.6);
			border-bottom:1px solid rgba(255,255,255,.6);
			padding:.9em 0;
			font-size:min(4.6vw,6.0rem);
			&::before {
				content:'';
				height:100vh;
				border-right:1px solid rgba(255,255,255,.6);
				position:absolute;
				right:10%;
				top:50%;
				transform:translateY(-50%);
			}
			h1 {
				line-height:1.5;
				color:#FFFFFF;
				font-weight:500;
			}
			p {
				font-size:2em;
				line-height:1;
				color:rgba(255,255,255,.3);
				margin-top:-.4em;
			}
		}
	}
	.mv-example {
		position:absolute;
		z-index:3;
		right:0;
		bottom:0;
		background-color:var(--color_white);
		font-size:2.4rem;
		padding:1em 1.5em;
		width:560px;
		transform:translateY(50%);
		display:grid;
		grid-template-columns:1fr 2em;
		grid-column-gap:.5em;
		align-items:end;
		dl {
			dt {
				color:var(--color_sub);
				margin-bottom:.33em;
			}
			dd {
				font-size:2.0rem;
				line-height:1.3;
			}
		}
	}
}

#company {
	.wrap {
		padding:150px 0 120px;
		overflow:clip;
		.contents {
			margin-bottom:120px;
			.contents_inner {
				display:grid;
				grid-template-columns:1fr 50%;
				align-items:center;
				grid-column-gap:8%;
				.detail {
					p {
						margin-bottom:3em;
					}
				}
				.img {
					position:relative;
					img {
						display:block;
						width:85%;
						position:relative;
						z-index:1;
						&:first-child {
							transform:translateX(50%);
							margin-bottom:-20%;
							z-index:0;
						}
					}
				}
			}
		}
		#company_slider {
			li {
				font-size:12rem;
				color:var(--color_main);
				text-shadow:0 0 2px var(--color_white),0 0 2px var(--color_white),0 0 2px var(--color_white);
				span {
					font:inherit;
					color:var(--color_white);
					text-shadow:none;
				}
			}
		}
	}
}

#service {
	.wrap {
		padding-bottom:120px;
		overflow:clip;
		.contents {
			h2 {
				margin-bottom:1em;
			}
			p.font_jp {
				font-size:2.4rem;
				line-height:1.5;
			}
			.contents_inner {
				display:grid;
				grid-template-columns:40% 1fr;
				grid-column-gap:8%;
				align-items:center;
				margin-top:90px;
				.img {
					margin-left:-25%;
				}
				.detail {
					padding:120px 0;
					position:relative;
					&::before {
						content:'';
						display:block;
						width:100vw;
						height:100%;
						background-color:var(--color_sub);
						position:absolute;
						z-index:-1;
						left:-200px;
						top:0;
					}
					.service_list {
						font-size:1.6rem;
						display:grid;
						grid-row-gap:4em;
						margin-bottom:5em;
						max-width:560px;
						li {
							a {
								display:block;
								position:relative;
								padding-bottom:1em;
								&::before {
									content:'';
									display:block;
									width:100%;
									height:1px;
									background-color:var(--color_white);
									position:absolute;
									left:0;
									bottom:0;
								}
								&::after {
									content:'';
									display:block;
									width:2.5em;
									height:1px;
									background-color:var(--color_white);
									position:absolute;
									right:0;
									bottom:0;
									transform-origin:right bottom;
									transform:rotate(25deg);
								}
								h3 {
									font-size:2.4rem;
									color:#FFFFFF;
									font-weight:500;
									margin-bottom:.5em;
								}
								p {
									line-height:1.5;
								}
								.num {
									font-size:12rem;
									color:rgba(255,255,255,.2);
									position:absolute;
									right:1em;
									top:-.36em;
								}
							}
						}
					}
				}
			}
		}
	}
}
			
#example {
	.wrap {
		padding-bottom:120px;
		.contents {
			h2 {
				justify-items:center;
			}
			#results_slider {
				margin-bottom:60px;
				ul {
					li {
						a {
							display:grid;
							justify-items:start;
							grid-template-rows:auto auto 1fr;
							grid-row-gap:1em;
							border:1px solid var(--color_white);
							padding:30px;
							height:100%;
							img {
								aspect-ratio:.9;
								object-fit:cover;
							}
							.cat {
								font-size:1.4rem;
								color:var(--color_sub);
								background-color:var(--color_white);
								padding:.33em 1em;
							}
							h3 {
								color:var(--color_white);
								line-height:1.5;
								font-weight:500;
							}
						}
					}
				}
				.splide__pagination {
					bottom: auto;
					left: auto;
					padding: 0;
					position: relative;
					right: auto;
					width:80%;
					margin:30px auto 0;
					column-gap:10px;
					flex-wrap:nowrap;
					li {
						flex-grow:1;
						max-width:90px;
						.splide__pagination__page {
							background: var(--color_white);
							border-radius: unset;
							display: inline-block;
							height: 5px;
							margin: 0;
							opacity: 1;
							width: 100%;
						}
						.splide__pagination__page.is-active {
							background-color:#2B457D;
							transform: scale(1);
						}
					}
				}
			}
			.btn_more {
				margin:0 auto;
			}
		}
	}
}


#recruit {
	.wrap {
		padding-bottom: 90px;
		background:url(../img/top/recruit_bg.jpg) no-repeat center center/cover;
		position:relative;
		padding:90px 0;
		&::before {
			content:'';
			display:block;
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			z-index:1;
			background-color:rgba(70,127,255,.8);
			mix-blend-mode: multiply;
		}
		.contents {
			position:relative;
			z-index:2;
			text-align:center;
			h2 {
				justify-items:center;
			}
			p {
				line-height:1.8;
				margin-bottom:3em;
				&.body {
					font-size:3.0rem;
					line-height:1.5;
					margin-bottom:1.33em;
				}
			}
			.btn_more {
				margin: 0 auto 60px;
			}
		}
		#recruit_slider {
			position:relative;
			z-index:2;
			ul {
				li {
					width:350px;
				}
			}
		}
	}
}


@media (hover:hover) {
	
	#mv {
		.mv-example {
			dl {
				transition:.3s;
			}
			img {
				transition:.3s;
			}
			&:hover {
				opacity:1;
				dl {
					opacity:.66;
				}
				img {
					transform:translateX(.33em);
				}
			}
		}
	}
	
	#service {
		.wrap {
			.contents {
				.contents_inner {
					.detail {
						.service_list {
							li {
								a {
									&::before {
										transition:.3s;
									}
									&::after {
										transition:.3s;
									}
									&:hover {
										&::before {
											width:calc(100% + 5px);
										}
										&::after {
											transform:translateX(5px) rotate(20deg);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}

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

}

@media screen and (max-width:1024px) {
	
	section {
		.wrap {
			.contents {
				h2 {
					font-size:3.0rem;
					.font_en {
						font-size:8rem;
					}
				}
			}
		}
	}
	
	#mv {
		.mv-example {
			font-size:2.0rem;
			width:460px;
			dl {
				dd {
					font-size:1.8rem;
				}
			}
		}
	}
	
	#service {
		.wrap {
			.contents {
				p.font_jp {
					font-size:2.2rem;
				}
				.contents_inner {
					grid-column-gap:5%;
					margin-top:60px;
					.detail {
						padding:60px 0;
						.service_list {
							grid-row-gap:3em;
							margin-bottom:3em;
						}
					}
				}
			}
		}
	}
				
	#example {
		.wrap {
			.contents {
				#results_slider {
					ul {
						li {
							a {
								padding:20px;
								h3 {
									font-size:1.5rem;
								}
							}
						}
					}
				}
			}
		}
	}
	
}

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

	#header {
		.header {
			.header_inner {
				.spbtn {
					.bar,&::before,&::after {
						background-color:var(--color_white);
					}	
				}
			}
		}
	}
	
	section {
		.wrap {
			.contents {
				h2 {
					font-size:min(6.4vw,3rem);
					.font_en {
						font-size:min(16vw,8rem);
					}
				}
			}
		}
	}
	
	#mv {
		.wrap {
			aspect-ratio:1.5;
			.contents {
				font-size:min(6vw,6.0rem);
			}
		}
		.mv-example {
			font-size:2.0rem;
			padding:.66em 1em;
			width:min(80%,400px);
			dl {
				dd {
					font-size:1.6rem;
				}
			}
		}
	}
	
	#company {
		.wrap {
			padding:90px 0 60px;
			.contents {
				margin-bottom:30px;
				.contents_inner {
					grid-template-columns:1fr;
					grid-row-gap:50px;
					.detail {
						p {
							margin-bottom:2em;
						}
					}
					.img {
						img {
							display:block;
							width:66%;
							position:relative;
							z-index:1;
							&:first-child {
								transform:translateX(0);
								margin-left:auto;
							}
						}
					}
				}
			}
			#company_slider {
				li {
					font-size:6rem;
				}
			}
		}
	}
	
	#service {
		.wrap {
			padding-bottom:60px;
			.contents {
				h2 {
					margin-bottom:1em;
				}
				p.font_jp {
					font-size:min(4.2vw,1.8rem);
					line-height:1.8;
				}
				.contents_inner {
					grid-template-columns:1fr;
					grid-row-gap:20px;
					margin-top:30px;
					.img {
						margin-left:0;
						img {
							aspect-ratio:2;
							object-fit:cover;
							object-position:bottom center;
						}
					}
					.detail {
						padding:50px 0;
						position:relative;
						&::before {
							width:100vw;
							left:-20px;
						}
						.service_list {
							grid-row-gap:2em;
							margin-bottom:40px;
							li {
								a {
									.num {
										right:.5em;
									}
								}
							}
						}
						.btn_more {
							margin:0 auto;
						}
					}
				}
			}
		}
	}
				
	#example {
		.wrap {
			padding-bottom:60px;
			overflow:clip;
			.contents {
				#results_slider {
					margin:0 -20px 30px;
					ul {
						li {
							width:240px!important;
							a {
								img {
									aspect-ratio:.9;
									object-fit:cover;
								}
								h3 {
									font-size:1.4rem;
								}
								.cat {
									font-size:1.3rem;
								}
							}
						}
					}
					.splide__pagination {
						width:90%;
						margin:20px auto 0;
						column-gap:5px;
						li {
							.splide__pagination__page {
								height: 5px;
							}
						}
					}
				}
			}
		}
	}
	
	
	#recruit {
		.wrap {
			padding:60px 0;
			.contents {
				p {
					line-height:1.8;
					font-size:min(4.2vw,1.6rem);
					margin-bottom:2em;
					&.body {
						margin-bottom:1em;
					}
				}
			}
			#recruit_slider {
				ul {
					li {
						width:250px;
					}
				}
			}
		}
	}

}