@charset "utf-8";

#header {
	position:fixed;
}

body {
	position:relative;
	&::before {
		content:'';
		display:block;
		width:100%;
		height:100%;
		top:0;
		left:0;
		position:absolute;
		z-index:0;
		background:url(../img/top/bg.png) no-repeat center top/cover;
		pointer-events:none;
	}
}

.bgvideo {
	position:fixed;
	left:0;
	top:0;
	aspect-ratio:16/9;
	z-index:-1;
	pointer-events:none;
	&::before {
		content:'';
		display:block;
		width:100%;
		height:100%;
		top:0;
		left:0;
		position:absolute;
		z-index:1;
		background:url(../img/top/mvbg.png) no-repeat center top/100% auto;
		pointer-events:none;
	}
	&::after {
		content:'';
		display:block;
		width:100%;
		height:100px;
		position:absolute;
		z-index: 2;
		left:0;
		bottom:0;
		background:#FFFFFF;
		background: linear-gradient(0deg ,rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	}
	video {
		width:100vw;
		height:100vh;
		object-fit:cover;
		opacity:.5;
		position: relative;
		z-index: 0;
	}
}

section {
	.wrap {
		padding-top:150px;
		.contents {
			.ttl_box {
				display:grid;
				grid-template-columns:repeat(2,auto);
				justify-content:space-between;
				align-items:center;
				margin-bottom:60px;
				h2 {
					margin-bottom:0;
				}
			}
			h2 {
				font-size:2.0rem;
				margin-bottom:1.5em;
				display:grid;
				grid-template-columns:repeat(3,auto);
				grid-column-gap:1em;
				align-items:center;
				justify-content:start;
				.font_en {
					font-size:6.0rem;
					letter-spacing:.05em;
				}
				.txt {
					color:#999999;
					&::before {
						content:'ー';
						margin-right:.25em;
					}
				}
				img {
					width:8em;
				}
			}
			.btn {
				font-size:1.6rem;
				background-color:#E8E8E8;
				width:250px;
				height:60px;
				margin-right:30px;
				padding:0 0 0 30px;
				display:grid;
				grid-template-columns:repeat(2,auto);
				justify-content:space-between;
				align-items:center;
				position:relative;
				&::before {
					content:'';
					display:block;
					width:100%;
					height:100%;
					position:absolute;
					z-index:0;
					top:0;
					left:0;
					background: #39569B;
					background: linear-gradient(to right bottom,#39569B 0%, #D83C5A 100%);
					opacity:0;
					pointer-events:none;
				}
				.txt {
					position:relative;
					z-index:1;
				}
				.img {
					width:60px;
					transform:translateX(50%);
					transform-origin:left center;
					position:relative;
					z-index:1;
					img {
						display:block;
						&:last-child {
							position:absolute;
							left:0;
							top:0;
							opacity:0;
						}
					}
				}
			}
			.linkbox {
				max-width:100%;
				grid-template-columns:repeat(2,1fr);
			}
		}
		.linkbox {
			display:grid;
			max-width:1300px;
			margin:0 auto;
			grid-template-columns:repeat(3,1fr);
			li {
				&:nth-child(1) {
					z-index:3;
				}
				&:nth-child(2) {
					z-index:2;
					margin-top:15%;
				}
				&:nth-child(3) {
					z-index:1;
					margin-top:30%;
				}
			}
			a {
				aspect-ratio:1.08;
				display:grid;
				position:relative;
				padding:40px;
				&::after {
					content:'';
					display:block;
					width:100%;
					height:100%;
					position:absolute;
					top:20px;
					left:20px;
					z-index:-1;
					background: #24ADCE;
					background: linear-gradient(to right bottom,#FFB55F 0%, #FC839A 100%);
				}
				* {
					z-index:1;
				}
				p {
					color:#FFFFFF;
					line-height:2;
					font-size:min(1.4vw,1.6rem);
				}
				.bg {
					display:block;
					position:absolute;
					width:100%;
					height:100%;
					object-fit:cover;
					filter:brightness(.5);
					z-index:0;
				}
				.ttl {
					display:grid;
					grid-template-columns:repeat(2,auto);
					align-items:end;
					justify-content:start;
					grid-column-gap:1.5em;
					color:#FFFFFF;
					letter-spacing:.1em;
					.font_en {
						display:grid;
						font-size:min(1.4vw,1.6rem);
						span {
							font:inherit;
							font-size:min(5vw,6.0rem);
						}
					}
					h3 {
						color:#FFFFFF;
						font-size:min(1.8vw,2.0rem);
						letter-spacing:.05em;
						display:grid;
						grid-row-gap:.5em;
						transform:translateY(-.2em);
						.font_en {
							font-size:min(1.1vw,1.6rem);
							letter-spacing:.1em;
						}
					}
				}
				.link {
					width:200px;
					color:#FFFFFF;
					justify-self:end;
				}
			}
		}
	}
}

#mv {
	.wrap {
		padding:150px 0;
		position:relative;
		.contents {
			position:relative;
			z-index:1;
			aspect-ratio:11/5;
			display:grid;
			align-items:center;
			.detail {
				position:relative;
				z-index:1;
				h1 {
					font-size:min(6vw,7.0rem);
					letter-spacing:.1em;
					line-height:1.3;
					margin-bottom:.25em;
				}
				p {
					font-size:min(1.8vw,2.0rem);
					display:flex;
					align-items:center;
					column-gap:.33em;
					letter-spacing:.05em;
					.txt1 {
						background: #0A259A;
						background: linear-gradient(to right ,#0A259A 0%, #42BFEC 100%);
					}
					.txt2 {
						background: #E81E4F;
						background: linear-gradient(to right ,#E81E4F 0%, #E7549A 50%, #FCA291 100%);
					}
					.txt3 {
						background: #10714F;
						background: linear-gradient(to right ,#10714F 0%, #4FA9B1 50%, #27D183 100%);
					}
				}
			}
			.img {
				position:absolute;
				width:80%;
				top:50%;
				left:25%;
				transform:translateY(-50%);
				&::after {
					content:'';
					display:block;
					width:100%;
					height:100%;
					position:absolute;
					top:30px;
					left:30px;
					z-index:-1;
					background: #24ADCE;
					background: linear-gradient(to right bottom,#FFB55F 0%, #FC839A 100%);
				}
				img {
					display:block;
					&.txt {
						width:50%;
						position:absolute;
						bottom:auto;
						right:8%;
					}
				}
			}
		}
	}
}

#news {
	.wrap {
		.contents {
			h2 {
				.txtclip {
            		background: #F5C510;
            		background: linear-gradient(to right bottom,#F5C510 0%, #FFED00 100%);
				}
				img {
					width:5em;
				}
			}
			.tabmenu {
				font-size:1.6rem;
				display:flex;
				align-items:center;
				justify-content:start;
				column-gap:1em;
				margin-bottom:1em;
				li {
					cursor:pointer;
					display:grid;
					justify-content:center;
					align-items:center;
					height:2.2em;
					padding:0 1.5em;
					box-shadow:0 3px 6px rgba(0,0,0,.15);
					border-radius:1.1em;
					background-color:#FFFFFF;
					&.active {
						background-color:#333333;
						color:#FFFFFF;
					}
				}
			}
			.news_box {
				.tab {
					&:not(.active) {
						display:none;
					}
					dl {
						font-size:1.6rem;
						display:grid;
						grid-template-columns:5em 7em 1fr;
						align-items:center;
						grid-column-gap:2em;
						padding:1em 0;
						border-bottom:1px solid #CCCCCC;
						min-height:6em;
						.cat {
							a {
								background-color:#E8E8E8;
								white-space:nowrap;
								height:2.2em;
								padding:0 1.33em;
								display:grid;
								width:100%;
								align-items:center;
								justify-content:center;
								border-radius:1.1em;
							}
						}
						dt {
							a {
								line-height:1.5;
							}
						}
					}
				}
			}
		}
	}
}

#service {
	.wrap {
		.contents {
			padding-bottom:60px;
			h2 {
				.txtclip {
            		background: #E81E4F;
            		background: linear-gradient(to right bottom,#E81E4F 0%,#E7549A 50%, #FCA291 100%);
				}
				img {
					width:7em;
				}
			}
		}
		.linkbox {
			li {
				a {
					grid-template-rows:auto 1fr auto;
					& > p {
						align-self:center;
					}
					&::after {
	            		background: #E81E4F;
	            		background: linear-gradient(to right bottom,#E81E4F 0%,#E7549A 50%, #FCA291 100%);
					}
				}
				&:first-child {
					a {
						.bg {
							filter: brightness(.3);
						}
					}
				}
			}
		}
	}
}

#company {
	.wrap {
		.contents {
			h2 {
				.txtclip {
            		background: #10714F;
            		background: linear-gradient(to right bottom,#10714F 0%,#4FA9B1 50%, #27D183 100%);
				}
			}
		}
		.linkbox {
			li {
				&:nth-child(1) {
					margin-top:30%;
				}
				&:nth-child(3) {
					margin-top:0;
				}
				a {
					align-content:space-between;
					& > p {
						align-self:center;
					}
					&::after {
	            		background: #10714F;
	            		background: linear-gradient(to right bottom,#10714F 0%,#4FA9B1 50%, #27D183 100%);
					}
				}
			}
		}
	}
}

#development {
	.wrap {
		.contents {
			h2 {
				margin-bottom:3em;
				.txtclip {
					background: #73318E;
					background: linear-gradient(to right bottom,#73318E 0%,#C75BB2 50%, #E03C6F 100%);
				}
				img {
					width:12em;
				}
			}
			.contents_inner {
				position:relative;
				padding-top:220px;
				padding-bottom:10px;
				& > .img {
					position:absolute;
					z-index:0;
					width:82%;
					top:0;
					left:23%;
					&::after {
						content:'';
						display:block;
						width:100%;
						height:100%;
						position:absolute;
						top:30px;
						left:30px;
						z-index:-1;
						background: #73318E;
						background: linear-gradient(to right bottom,#73318E 0%,#C75BB2 50%, #E03C6F 100%);
					}
				}
				.detail {
					position:relative;
					z-index:1;
					max-width:600px;
					background-color:#FFFFFF;
					padding:40px;
					box-shadow:0 3px 6px rgba(0,0,0,.3);
					p {
						margin-bottom:2em;
					}
					.btn {
						margin-left:auto;
					}
				}
			}
		}
		.linkbox {
			li {
				&:nth-child(1) {
					margin-top:30%;
				}
				&:nth-child(3) {
					margin-top:0;
				}
				a {
					align-content:space-between;
					& > p {
						align-self:center;
					}
					&::after {
	            		background: #10714F;
	            		background: linear-gradient(to right bottom,#10714F 0%,#4FA9B1 50%, #27D183 100%);
					}
				}
			}
		}
	}
}

#recruit {
	.wrap {
		.contents {
			h2 {
				.txtclip {
            		background: #0A259A;
            		background: linear-gradient(to right bottom,#0A259A 0%,#42BFEC 100%);
				}
				img {
					width:9em;
				}
			}
		}
		.linkbox {
			li {
				a {
					align-content:space-between;
					aspect-ratio:1.25;
					&::after {
						background: #0A259A;
						background: linear-gradient(to right bottom,#0A259A 0%,#42BFEC 100%);
					}
				}
			}
		}
	}
}

#people {
	.wrap {
		.contents {
			h2 {
				.txtclip {
            		background: #4CA7D8;
            		background: linear-gradient(to right bottom,#4CA7D8 0%,#53DFF8 100%);
				}
			}
			.contents_inner {
				display:grid;
				grid-template-columns:1fr 280px;
				grid-column-gap:1em;
				margin-bottom:60px;
			}
		}
		.linkbox {
			li {
				a {
					align-content:end;
					&::after {
	            		background: #4CA7D8;
	            		background: linear-gradient(to right bottom,#4CA7D8 0%,#53DFF8 100%);
					}
					.ttl {
						grid-column-gap:1em;
						margin-right:-1em;
						margin-bottom:1em;
						h3 {
							display:flex;
							flex-wrap:wrap;
							font-size:1.8rem;
							.year {
								border-left:1px solid #FFFFFF;
								margin-left:.5em;
								padding-left:.5em;
							}
							span {
								&:last-child {
									width:100%;
								}
							}
						}
					}
					.arrow {
						width:60px;
						justify-self:end;
					}
					.bg {
						filter:brightness(.6);
					}
				}
			}
		}
	}
}

#gallery {
	.wrap {
		overflow:hidden;
		.contents {
			h2 {
				.txtclip {
            		background: #24ADCE;
            		background: linear-gradient(to right bottom,#24ADCE 0%, #33CDC3 50%, #42DFEC 100%);
				}
			}
		}
		.gallery_inner {
			max-width:1500px;
			margin:0 auto;
			display:grid;
			grid-template-columns:repeat(4,1fr);
			align-items:start;
			grid-column-gap:20px;
			padding-bottom:10px;
			padding-right:10px;
			.img {
				&:nth-child(even) {
					margin-top:40px;
				}
				position:relative;
				img {
					display:block;
				}
				&::after {
					content:'';
					display:block;
					width:100%;
					height:100%;
					position:absolute;
					top:10px;
					left:10px;
					z-index:-1;
            		background: #24ADCE;
            		background: linear-gradient(to right bottom,#24ADCE 0%, #33CDC3 50%, #42DFEC 100%);
				}
			}
		}
	}
}

#cpy {
	.wrap {
		padding-top:200px;
		padding-bottom:150px;
		.contents {
			h2 {
				display:block;
				font-size:7.0rem;
				text-align:center;
				margin-bottom:1em;
				line-height:1.5;
			}
			img {
				display:block;
				width:100%;
				max-width:600px;
				margin:0 auto;
			}
		}
	}
}

@media (hover:hover) {
	
	section {
		.wrap {
			a {
				.arrow_hover {
					transition:.3s;
					transform-origin:left center;
				}
				&:hover {
					.arrow_hover {
						transition:.3s;
						transform:scaleX(1.1);
					}
				}
			}
			.contents {
				.btn {
					transition:.3s;
					.img,.txt {
						transition:.3s;
					}
					img {
						transition:.3s;
					}
					&::before {
						transition:.3s;
					}
					&:hover {
						opacity:1;
						&::before {
							opacity:1;
						}
						.txt {
							color:#FFFFFF;
						}
						.img {
							transform:translateX(50%) scaleX(1.1);
							img {
								&:first-child {
									opacity:0;
								}
								&:last-child {
									opacity:1;
								}
							}
						}
					}
				}
			}
		}
	}
	
}

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

	section {
		.wrap {
			.linkbox {
				padding:0 20px 0 0;
			}
		}
	}
	
	#mv {
		.wrap {
			.contents {
				.img {
					width:75%;
				}
			}
		}
	}
	
	#development {
		.wrap {
			.contents {
				.contents_inner {
					& > .img {
						width:77%;
					}
				}
			}
		}
	}
	
	#cpy {
		.wrap {
			.contents {
				h2 {
					display:block;
					font-size:min(6.4vw,7.0rem);
				}
			}
		}
	}

}

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

}

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

	section {
		.wrap {
			padding-top:120px;
			.contents {
				.ttl_box {
					grid-template-columns:1fr;
					grid-row-gap:10px;
					.btn {
						justify-self:end;
					}
				}
				h2 {
					font-size:1.8rem;
					.font_en {
						font-size:5.0rem;
					}
				}
				.linkbox {
					li {
						&:nth-child(2) {
							margin-top:15%;
						}
					}
				}
			}
			.linkbox {
				grid-template-columns:1fr;
				max-width:460px;
				grid-row-gap:50px;
				li {
					&:nth-child(2) {
						margin-top:0;
					}
					&:nth-child(3) {
						margin-top:0;
					}
				}
				a {
					p {
						font-size:1.6rem;
					}
					.ttl {
						.font_en {
							font-size:1.6rem;
							span {
								font-size:6.0rem;
							}
						}
						h3 {
							font-size:2.0rem;
							.font_en {
								font-size:1.6rem;
							}
						}
					}
				}
			}
		}
	}

	#mv {
		.wrap {
			padding:120px 0;
		}
	}
	
	#news {
		.wrap {
			padding-top:30px;
		}
	}
	
	#company {
		.wrap {
			.linkbox {
				li {
					&:nth-child(1) {
						margin-top:0;
					}
				}
			}
		}
	}
	
}

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


	body {
		&::before {
			z-index:-1;
			background:url(../img/top/bg_sp.png) no-repeat center top/cover;
		}
	}
	
	.bgvideo {
		&::before {
			background:url(../img/top/mv_bg_sp.png) no-repeat center top/100% auto;
		}
	}
	
	section {
		.wrap {
			padding-top:90px;
			.contents {
				.ttl_box {
					display:contents;
					h2 {
						margin-bottom:1.5em;
						max-width:400px;
					}
				}
				h2 {
					font-size:1.6rem;
					grid-template-columns:repeat(2,auto);
					.font_en {
						font-size:min(10vw,4.0rem);
					}
					img {
						grid-area:2/2/3/3;
						justify-self:end;
					}
				}
				.linkbox {
					grid-template-columns:1fr;
					li {
						&:nth-child(1),&:nth-child(2)  {
							margin-top:0;
						}
					}
				}
				.btn {
					width:calc(100vw - 70px);
					max-width:350px;
					grid-template-columns:1fr auto;
					text-align:center;
				}
			}
			.linkbox {
				a {
					padding:30px 20px;
					aspect-ratio:.875;
					.ttl {
						.font_en {
							font-size:min(4.4vw,1.6rem);
							span {
								font-size:min(16vw,6.0rem);
							}
						}
						h3 {
							font-size:min(5.4vw,2.0rem);
							.font_en {
								font-size:min(4.3vw,1.6rem);
							}
						}
					}
				}
			}
		}
	}
	
	#mv {
		.wrap {
			padding:90px 0;
			.contents {
				position:relative;
				z-index:1;
				aspect-ratio:unset;
				display:grid;
				align-items:center;
				display:grid;
				grid-row-gap:25vw;
				.detail {
					order:1;
					h1 {
						font-size:min(10vw,5.0rem);
					}
					p {
						font-size:min(4.3vw,1.8rem);
					}
				}
				.img {
					position:relative;
					width:calc(100% + 20px);
					max-width:calc(100% + 20px);
					margin-right:-20px;
					top:0;
					left:0;
					transform:translateY(0);
					&::after {
						width:calc(100% + 20px);
						top:20px;
						left:-20px;
					}
					img {
						&.txt {
							width:70%;
							right:2%;
						}
					}
				}
			}
		}
	}
	
	#news {
		.wrap {
			padding-top:0;
			.contents {
				display:grid;
				h2 {
					.txt {
						padding-right:5em;
					}
					img {
						width:6em;
					}
				}
				.btn {
					order:3;
					margin:0 auto;
					transform:translateX(-15px);
					margin-top:40px;
				}
				.tabmenu {
					font-size:min(4.3vw,1.6rem);
					column-gap:.5em;
					width:100%;
					max-width:500px;
					margin:0 auto 1em;
					li {
						flex-grow:1;
						padding:0 .5em;
					}
				}
				.news_box {
					.tab {
						dl {
							font-size:1.6rem;
							grid-template-columns:5em 1fr;
							grid-column-gap:1em;
							grid-row-gap:.66em;
							padding:1.5em 0;
							.cat {
								justify-self:start;
							}
							dt {
								grid-area:2/1/3/3;
							}
						}
					}
				}
			}
		}
	}
	
	#service {
		.wrap {
			position:relative;
			padding-bottom:120px;
			.contents {
				padding-bottom:50px;
				h2 {
					img {
						width:8em;
						transform:translateX(-1em);
					}
				}
				.btn {
					position:absolute;
					bottom:0;
					left:20px;
				}
				p {
					font-size:1.6rem;
				}
			}
		}
	}
	
	#company {
		.wrap {
			position:relative;
			padding-bottom:120px;
			.contents {
				h2 {
					img {
						grid-area:2/1/3/3;
						width:10em;
						margin-top:.33em;
					}
				}
				.btn {
					position:absolute;
					bottom:0;
					left:20px;
				}
			}
		}
	}
	
	#development {
		.wrap {
			.contents {
				h2 {
					margin-bottom:2.5em;
					grid-template-columns:auto;
					.txt {
						justify-self:end;
						padding-top:.5em;
						margin-right:-1em;
						padding-bottom:.25em;
					}
					img {
						width:14.5em;
						grid-area:unset;
						justify-self:start;
					}
				}
				.contents_inner {
					padding-top:0;
					padding-bottom:0;
					display:grid;
					& > .img {
						position:relative;
						z-index:0;
						width:100%;
						top:0;
						left:0;
						margin-bottom:60px;
						img {
							display:block;
							width:calc(100% + 20px);
							max-width:calc(100% + 20px);
							margin-right:-20px;
						}
						&::after {
							top:20px;
							left:-20px;
						}
					}
					.detail {
						order:2;
						padding:30px 20px;
						p {
							font-size:1.6rem;
						}
						.btn {
							width:calc(100% - 30px);
						}
					}
				}
			}
			.linkbox {
				li {
					&:nth-child(1) {
						margin-top:30%;
					}
					&:nth-child(3) {
						margin-top:0;
					}
					a {
						align-content:space-between;
						& > p {
							align-self:center;
						}
						&::after {
		            		background: #10714F;
		            		background: linear-gradient(to right bottom,#10714F 0%,#4FA9B1 50%, #27D183 100%);
						}
					}
				}
			}
		}
	}
	
	#recruit {
		.wrap {
			.contents {
				display:grid;
				h2 {
					img {
						transform:translateX(-2em);
					}
				}
				.btn {
					order:2;
					margin-top:60px;
					margin-right: auto;
				}
			}
			.linkbox {
				width:calc(100% + 20px);
				max-width:460px;
				li {
					width:calc(100% + 20px);
					a {
						aspect-ratio:.875;
						.ttl {
							margin-bottom:2em;
							.font_en {
								span {
									font-size:min(10.6vw,4.0rem);
									padding-top:.2em;
								}
							}
						}
						&::after {
							left:-20px;
						}
					}
				}
			}
		}
	}
	
	#people {
		.wrap {
			padding-bottom:120px;
			position:relative;
			.contents {
				.ttl_box {
					h2 {
						grid-template-columns:1fr;
						.txt {
							justify-self:end;
							padding-top:.33em;
						}
					}
					.btn {
						position:absolute;
						bottom:0;
						left:20px;
					}
				}
				.contents_inner {
					grid-template-columns:1fr;
					grid-row-gap:30px;
					margin-bottom:50px;
					& > p {
						order:1;
					}
				}
			}
			.linkbox {
				li {
					a {
						.ttl {
							margin-bottom:2em;
							.font_en {
								span {
									font-size:min(10.6vw,4.0rem);
									padding-top:.2em;
								}
							}
							h3 {
								font-size:min(4.4vw,1.6rem);
							}
						}
					}
				}
			}
		}
	}
	
	#gallery {
		.wrap {
			overflow:hidden;
			position:relative;
			padding-bottom:90px;
			.contents {
				.btn {
					position:absolute;
					bottom:0;
					left:20px;
				}
			}
			.gallery_inner {
				max-width:600px;
				grid-template-columns:repeat(2,1fr);
				grid-column-gap:10px;
				padding-right:5px;
				.img {
					&:nth-child(even) {
						margin-top:20px;
					}
					&::after {
						top:5px;
						left:5px;
					}
					&:nth-child(n+3) {
						display:none;
					}
				}
			}
		}
	}
	
	#cpy {
		.wrap {
			padding-top:90px;
			padding-bottom:90px;
			.contents {
				h2 {
					display:block;
					font-size:min(7.5vw,7.0rem);
				}
			}
		}
	}

}