@charset "utf-8";

#header {
	position:fixed;
	top:0;
	left:0;
}

section {
	.wrap {
		.contents {
			h2 {
				display:grid;
				justify-items:start;
				font-size:2rem;
				line-height:1;
				grid-row-gap:.5em;
				margin-bottom:1.5em;
				.font_en {
					font-size:2.8em;
					font-weight:600;
					color:var(--color_main);
					letter-spacing:.1em;
				}
			}
		}
	}
}

#mv {
	.wrap {
		position:relative;
		z-index:1;
		#mvvideo {
			width:100%;
			aspect-ratio:16/6.7;
			object-fit:cover;
			position:relative;
			z-index:1;
			display:block;
		}
		&::before {
			content:'';
			display:block;
			width:100%;
			height:100%;
			position:absolute;
			z-index:2;
			top:0;
			left:0;
			background:url(../img/top/overlay05.png) repeat center center/auto;
		}
	}
}

#service {
	.wrap {
		position:relative;
		z-index:2;
		margin-top:-50px;
		.contents {
			max-width:1100px;
			.contents_inner {
				display:grid;
				grid-template-columns:repeat(2,1fr);
				grid-column-gap:5%;
				li {
					a {
						display:block;
						background-color:#FFFFFF;
						border:1px solid var(--color_main);
						padding:20px 30px;
						position:relative;
						border-radius:10px 10px 30px 10px;
						box-shadow:0 3px 6px rgba(0,0,0,.15);
						height:100%;
						dl {
							dt {
								display:inline-grid;
								grid-template-columns:repeat(2,auto);
								align-items:center;
								grid-column-gap:1em;
								font-size:2rem;
								position:relative;
								line-height:1;
								margin-bottom:.25em;
								padding-right:.33em;
								span {
									color:var(--color_sub);
									position:relative;
									z-index:1;
									&.txt {
										font-family: "M PLUS 1p", sans-serif;
									}
									&.tit {
										font-size:2.2em;
										span {
											font-size:1.3em;
											font-weight:600;
										}
									}
								}
								&::after {
									content:'';
									display:block;
									position:absolute;
									width:40%;
									height:75%;
									background-color:#ffff00;
									right:0;
									bottom:0;
									clip-path:polygon(100% 0,100% 100%,0 100%);
								}
							}
							dd {
								p {
									line-height:1.6;
								}
								img {
									position:absolute;
									display:block;
									width:44px;
									right:10px;
									bottom:10px;
								}
							}
						}
					}
				}
			}
		}
	}
}

#logos {
	.wrap {
		overflow:hidden;
		padding-top:90px;
		.contents {
			.logo_slider {
				div {
					transition: none;
				}
				.slick-slide{
					-webkit-backface-visibility: hidden;
					-webkit-transform-style: preserve-3d;
					max-width:150px;
					padding:0 10px;
				}
				.slick-list {
					overflow:visible;
				}
			}
		}
	}
}

#usecase {
	.wrap {
		padding:90px 0;
		overflow:clip;
		.contents {
			h2 {
				justify-items:center;
			}
			& > p {
				text-align:center;
				font-size:1.8rem;
			}
			.contents_inner {
				max-width:900px;
				margin:0 auto;
				display:grid;
				grid-template-columns:repeat(3,1fr);
				grid-column-gap:3%;
				padding:30px 0;
				li {
					.search-filter-field__input {
						border:none;
						border-radius:2em;
						box-shadow:2px 2px 4px rgba(0,0,0,.15);
						font-size:1.6rem;
						padding-left:1em;
						border:1px solid #EFEFEF;
						input {
							padding:.5em;
							&::placeholder {
								color: var(--color_sub);
								font-size:1.6rem;
								text-align:center;
								font-weight:600;
							}
						}
						.search-filter-component-combobox__selection {
							& > span {
								color: var(--color_sub);
								font-size:1.6rem;
								text-align:center;
								font-weight:600;
								width: 100%;
							}
							
						}
						.search-filter-component-combobox__listbox-toggle {
							&::before {
								content:none;
							}
							svg {
								fill:var(--color_sub);
							}
						}
					}
				}
			}
			.case_slider {
				padding:30px 0;
				margin-bottom:0;
				position:relative;
				&::before {
					content:'';
					display:block;
					width:100vw;
					height:100%;
					position:absolute;
					z-index:-1;
					background-color:#FAFAFA;
					top:0;
					left:50%;
					transform:translateX(-50%);
				}
				.slick-list {
					overflow:visible;
				}
				.case_slide {
					width:360px;
					padding:0 10px;
					.case {
						background-color:#FFFFFF;
						padding:20px 20px 10px;
						box-shadow:0 3px 6px rgba(0,0,0,.15);
						border-radius:10px 10px 20px 10px;
						.cat {
							display:flex;
							flex-wrap:wrap;
							font-size:1.2rem;
							gap:5px;
							margin-bottom:1em;
							a {
								display:grid;
								align-items:center;
								justify-content:center;
								height:2em;
								background-color:#EFEFEF;
								line-height:1;
								padding: 0 1em;
								border-radius:1em;
							}
						}
						h3 {
							font-size:1.6rem;
							color:var(--color_sub);
							line-height:1.5;
							margin-bottom:.5em;
						}
						.img {
							img {
								display:block;
								aspect-ratio:3/2;
								object-fit:cover;
								border-radius:5px;
							}
						}
						p {
							font-size:1.5rem;
							line-height:1.5;
							padding:1em 0;
						}
						& > a {
							display:grid;
							font-size:1.5rem;
							color:var(--color_main);
							grid-template-columns:1fr 2.6em;
							align-items:center;
							width:9em;
							margin-left:auto;
							margin-right:-10px;
						}
					}
				}
				.slick-dots {
					position: relative;
					width:80%;
					max-width:500px;
					bottom: 0;
					display:flex;
					margin:20px auto 0;
					li {
						margin:0;
						width:auto;
						padding:20px 0;
						flex-grow:1;
						&.slick-active {
							button {
								background-color:var(--color_sub);
							}
						}
					}
					button {
						width:100%;
						height:4px;
						padding:0;
						background-color:#cccccc;
						&::before {
							content:none;
						}
					}
				}
			}
			.btnwrap {
				max-width:640px;
				margin:0 auto;
				display:grid;
				grid-template-columns:repeat(2,1fr);
				grid-column-gap:5%;
				padding-top:30px;
				.btn {
					max-width:100%;
					font-size:2.0rem;
				}
			}
		}
	}
}

#construction {
	.wrap {
		padding-top: 90px;
		.contents {
			text-align:center;
			h3 {
				font-size:2.2rem;
				text-align:center;
				color:var(--color_main);
				border:5px solid var(--color_main);
				display:inline-block;
				padding:.75em 2em;
				border-radius:.66em;
				letter-spacing:.05em;
				margin-bottom:1.5em;
				span {
					font-family: "M PLUS 1p", sans-serif;
					line-height:1.6;
					background:linear-gradient(transparent 60%, #ff6 60%);
				}
			}
			.img {
				padding-left:5%;
				img {
					display:block;
				}
			}
		}
	}
}

#nextgene {
	.wrap {
		padding:60px 0 90px;
		overflow:hidden;
		.contents {
			h2 {
				justify-items:center;
				position:relative;
				span {
					font-size:3rem;
					font-family: "M PLUS 1p", sans-serif;
					color:var(--color_sub);
					line-height:1.5;
				}
				& > span {
					border-bottom:5px solid var(--color_sub);
				}
				&::before {
					content:'SYSTEM';
					color: var(--color_main);
					font-size:4em;
					font-weight:600;
					letter-spacing:.1em;
					opacity:.15;
					position:absolute;
					left:50%;
					top:-.66em;
					transform:translateX(-50%);
				}
			}
			& > p {
				text-align:center;
				margin-bottom:5em;
				font-size:1.8rem;
			}
			.contents_wrap {
				margin-bottom:60px;
				&.wes {
					margin-bottom:0;
					.contents_inner {
						&::before {
							background-color:rgba(72,216,138,.3);
						}
					}
				}
				h3 {
					display:inline-grid;
					color: var(--color_sub);
					font-size:1.8rem;
					justify-items:end;
					margin-bottom:-1.75em;
					.txt {
						font-family: "M PLUS 1p", sans-serif;
						padding-right:.5em;
					}
					.tit {
						font-size:2.4em;
						font-weight:600;
						text-shadow:2px 2px 0 #FFFFFF;
						margin-top:-.7em;
						letter-spacing:.05em;
						&:first-letter {
							font-size:2em;
						}
					}
				}
				.contents_inner {
					padding:60px 0 40px;
					display:grid;
					grid-template-columns:repeat(2,1fr);
					grid-gap:30px;
					position:relative;
					&::before {
						content:'';
						display:block;
						width:calc(100% + 150px);
						height:100%;
						position:absolute;
						left:50%;
						top:0;
						transform:translateX(-50%);
						z-index:-1;
						background-color:rgba(0,176,155,.3);
						border-radius:40px;
					}
					a {
						display:grid;
						background-color:#FFFFFF;
						padding:20px 20px 30px;
						border-radius:10px 10px 25px 10px;
						box-shadow:0 3px 6px rgba(0,0,0,.15);
						display:grid;
						grid-template-columns:17% 1fr;
						align-items:center;
						grid-column-gap:4%;
						position:relative;
						min-height:12em;
						
						pointer-events:none;
						padding-bottom:20px;
						.detail {
							h4 {
								font-size:2.0rem;
								line-height:1.3;
								color:var(--color_sub);
								margin-bottom:.66em;
							}
							p {
								line-height:1.66;
								padding-right:40px;
							}
							ul {
								font-size:.9em;
								padding-top:.5em;
								padding-right:1em;
								li {
									line-height:1.5;
									text-indent:-1em;
									padding-left:1em;
									&::before {
										content:'・';
									}
								}
							}
						}
						.icon {
							width:40px;
							position:absolute;
							right:8px;
							bottom:8px;
							display:none;
						}
					}
				}
			}
		}
	}
}

#robots {
	.wrap {
		padding:60px 0;
		position:relative;
		&::after {
			content:'';
			display:block;
			width:100%;
			height:33%;
			position:absolute;
			left:0;
			bottom:0;
			background: #FF9900;
			background: linear-gradient(90deg,rgba(255, 153, 0, 1) 0%, rgba(255, 215, 83, 1) 100%);
			z-index:-1;
		}
		.contents {
			.titbox {
				display:grid;
				grid-template-columns:repeat(2,auto);
				align-items:center;
				justify-content:space-between;
				margin-bottom:50px;
				h2 {
					margin-bottom:0;
				}
				.btn {
					width:12em;
				}
			}
			& > p {
				text-align:center;
				font-size:1.8rem;
				margin-bottom:2em;
			}
			.contents_inner {
				display:grid;
				grid-template-columns:repeat(4,1fr);
				grid-column-gap:2%;
				li {
					background-color:#FFFFFF;
					border-radius:10px 10px 25px 10px;
					box-shadow:0 3px 6px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.1) inset;
					padding:20px;
					text-align:center;
					display:grid;
					justify-items:center;
					grid-template-rows:auto auto 1fr;
					img {
						display:block;
						width:90%;
						margin:0 auto;
					}
					h3 {
						color:var(--color_sub);
						font-size:2.0rem;
						padding:1em 0 .5em;
					}
					p {
						line-height:1.5;
						text-align:left;
						align-self:center;
					}
				}
			}
		}
	}
}

#news {
	.wrap {
		padding:90px 0;
		.contents {
			.contents_inner {
				display:grid;
				grid-template-columns:auto 1fr;
				grid-column-gap:5%;
				align-items:center;
				.newslist {
					dl {
						display:grid;
						grid-template-columns:7em 7em 1fr;
						align-items: center;
						padding:1.5em 0;
						border-bottom:2px dotted #cccccc;
						dt {
							line-height:1.5;
						}
						.cat {
							a {
								background-color:#cccccc;
								color:#FFFFFF;
								font-family: "M PLUS 1p", sans-serif;
								font-size:.8em;
								padding:.2em .8em;
								border-radius:4px;
							}
						}
					}
				}
			}
		}
	}
}

@media (hover:hover) {

	#service {
		.wrap {
			.contents {
				.contents_inner {
					li {
						a {
							transition:.3s;
							&:hover {
								opacity:1;
								transform:scale(1.025);
							}
						}
					}
				}
			}
		}
	}

	#usecase {
		.wrap {
			.contents {
				.case_slider {
					.case_slide {
						.case {
							& > a {
								transition:.3s;
								&:hover {
									width:8.6em;
									opacity:1;
								}
							}
						}
					}
				}
			}
		}
	}
	
	#nextgene {
		.wrap {
			.contents {
				.contents_wrap {
					.contents_inner {
						a {
							transition:.3s;
							.icon {
								transition:.3s;
							}
							&:hover {
								transform:scale(1.01);
								opacity:1;
								.icon {
									transform:translate(5px,5px) rotate(45deg);
								}
							}
						}
					}
				}
			}
		}
	}
	
	#news {
		.wrap {
			.contents {
				.contents_inner {
					.newslist {
						dl {
							dt {
								a {
									&:hover {
										text-decoration:underline;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:1200px) {
	
	#service {
		.wrap {
			.contents {
				.contents_inner {
					li {
						a {
							dl {
								dt {
									font-size:min(1.6vw,2rem);
								}
							}
						}
					}
				}
			}
		}
	}
	
	#nextgene {
		.wrap {
			.contents {
				& > p {
					text-align:center;
					margin-bottom:5em;
					font-size:min(1.5vw,1.8rem);
				}
				.contents_wrap {
					.contents_inner {
						a {
							.detail {
								h4 {
									font-size:min(1.7vw,2.0rem);
								}
							}
						}
					}
				}
			}
		}
	}
	
	#robots {
		.wrap {
			.contents {
				.contents_inner {
					li {
						p {
							font-size:min(1.3vw,1.6rem);
						}
					}
				}
			}
		}
	}

}

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

	section {
		.wrap {
			.contents {
				h2 {
					font-size:1.8rem;
				}
			}
		}
	}
	
	#service {
		.wrap {
			.contents {
				.contents_inner {
					grid-column-gap:3%;
					li {
						a {
							padding:20px;
							dl {
								dt {
									font-size:2rem;
									display:grid;
									grid-template-columns:1fr;
									span {
										&.tit {
											justify-self:end;
										}
									}
								}
								dd {
									p {
										font-size:1.5rem;
										padding-right:2em;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
	#logos {
		.wrap {
			padding-top:60px;
		}
	}
	
	#construction {
		.wrap {
			overflow:hidden;
			.contents {
				.img {
					padding-left:0;
					margin-right:-5%;
					img {
						display:block;
						width:105%;
						max-width:105%;
					}
				}
			}
		}
	}
	
	#nextgene {
		.wrap {
			.contents {
				h2 {
					span {
						font-size:2.5rem;
					}
				}
				& > p {
					font-size:1.6rem;
					text-align:left;
				}
				.contents_wrap {
					.contents_inner {
						grid-gap:20px;
						a {
							grid-template-columns:1fr;
							grid-template-rows:auto auto 1fr;
							img {
								max-width:100px;
								margin:0 auto 1em;
							}
							.detail {
								h4 {
									font-size:min(2.4vw,2.2rem);
									text-align:center;
									min-height:2.5em;
									display:grid;
									align-items:center;
								}
								p {
									line-height:1.66;
									padding-right:0;
								}
							}
							.icon {
								margin:0;
							}
						}
					}
				}
			}
		}
	}
	
	#robots {
		.wrap {
			.contents {
				.contents_inner {
					grid-column-gap:1%;
					li {
						padding:20px 10px;
						h3 {
							color:var(--color_sub);
							font-size:2.0rem;
							padding:1em 0 .5em;
						}
						p {
							font-size:min(1.4vw,1.6rem);
						}
					}
				}
			}
		}
	}
	
	#news {
		.wrap {
			.contents {
				.contents_inner {
					.newslist {
						dl {
							grid-template-columns:7em 1fr;
							grid-row-gap:1em;
							dt {
								grid-area:2/1/3/3;
							}
						}
					}
				}
			}
		}
	}
	
}

@media screen and (max-width:768px) {
	
	section {
		.wrap {
			.contents {
				h2 {
					font-size:1.6rem;
					.font_en {
						font-size:2.5em;
					}
				}
			}
		}
	}

	#mv {
		.wrap {
			aspect-ratio:4/3;
			overflow:hidden;
			#mvvideo {
				aspect-ratio:4/3;
				transform:scale(1.33);
			}
		}
	}
	
	#service {
		.wrap {
			.contents {
				.contents_inner {
					grid-column-gap:3%;
					li {
						a {
							padding:15px 10px 30px;
							border-radius:10px 10px 20px 10px;
							dl {
								dt {
									display:inline-grid;
									font-size:min(3.4vw,2rem);
									grid-row-gap:.5em;
									margin-bottom:.5em;
									span {
										&.txt {
											font-weight:600;
										}
										&.tit {
											font-size:2.0em;
											justify-self:start;
											span {
												font-size:1.3em;
											}
										}
									}
								}
								dd {
									p {
										line-height:1.6;
										font-size:min(3.5vw,1.4rem);
										padding-right:0;
										br {
											display:none;
										}
									}
									img {
										width:30px;
										right:5px;
										bottom:5px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
	#logos {
		.wrap {
			padding-top:30px;
			.contents {
				.logo_slider {
					.slick-slide{
						max-width:100px;
						padding:0 5px;
					}
				}
			}
		}
	}
	
	#usecase {
		.wrap {
			padding:60px 0;
			.contents {
				& > p {
					text-align:left;
					font-size:1.6rem;
					display:inline-block;
				}
				text-align:center;
				.contents_inner {
					max-width:400px;
					grid-template-columns:1fr;
					grid-row-gap:10px;
					padding:30px 0 15px;
				}
				.case_slider {
					padding:20px 0;
					text-align:initial;
					.case_slide {
						width:300px;
						padding:0 5px;
						.case {
							padding:20px 10px 10px;
							.cat {
								font-size:1.1rem;
							}
							h3 {
								font-size:1.5rem;
							}
							p {
								font-size:1.4rem;
							}
							& > a {
								margin-right:0px;
							}
						}
					}
					.slick-dots {
						width:100%;
						li {
							padding:10px 0;
						}
					}
				}
				.btnwrap {
					max-width:320px;
					grid-template-columns:1fr;
					grid-row-gap:10px;
					padding-top:20px;
					.btn {
						font-size:1.8rem;
					}
				}
			}
		}
	}
	
	#construction {
		.wrap {
			padding-top: 60px;
			.contents {
				h3 {
					font-size:min(5vw,2.2rem);
					border:4px solid var(--color_main);
					padding:.75em 1em;
				}
				.img {
					padding-left:0;
				}
			}
		}
	}
	
	#nextgene {
		.wrap {
			padding:60px 0 45px;
			.contents {
				h2 {
					span {
						font-size:min(6vw,2.8rem);
					}
					& > span {
						border:none;
						display:grid;
						justify-items:center;
						span {
							border-bottom:4px solid var(--color_sub);
						}
					}
					&::before {
						font-size:3.2em;
					}
				}
				& > p {
					margin-bottom:3em;
					font-size:1.6rem;
				}
				.contents_wrap {
					margin-bottom:45px;
					h3 {
						font-size:1.6rem;
					}
					.contents_inner {
						padding:40px 0 30px;
						grid-template-columns:1fr;
						grid-gap:20px;
						a {
							padding-bottom:40px;
							padding-bottom:20px;
							img {
								width:80px;
							}
							.detail {
								h4 {
									font-size:min(5.4vw,2.0rem);
									line-height:1.5;
									margin-bottom:.5em;
								}
								p {
									padding-right:0;
								}
								ul {
									font-size:1.3rem;
								}
							}
						}
					}
				}
			}
		}
	}
	
	#robots {
		.wrap {
			padding:30px 0;
			&::after {
				height:50%;
			}
			.contents {
				display:grid;
				.titbox {
					display:contents;
					h2 {
						margin-bottom:1.5em;
					}
					.btn {
						order:3;
						margin:0 auto;
					}
				}
				& > p {
					text-align:left;
					font-size:1.6rem;
				}
				.contents_inner {
					grid-template-columns:repeat(2,1fr);
					grid-gap:10px;
					margin-bottom:30px;
					li {
						h3 {
							font-size:min(4.8vw,2.0rem);
							padding:1em 0 .5em;
						}
						p {
							font-size:min(3.6vw,1.6rem);
						}
					}
				}
			}
		}
	}
	
	#news {
		.wrap {
			padding:60px 0;
			.contents {
				.contents_inner {
					grid-template-columns:1fr;
					.titbox {
						display:contents;
						.btn {
							order:2;
							margin:0 auto;
							width:12em;
						}
					}
					.newslist {
						margin-bottom:30px;
						dl {
							padding:1em 0;
							font-size:1.5rem;
							grid-row-gap:.66em;
						}
					}
				}
			}
		}
	}

}