@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&display=swap");

/* common */
:root {
	--font-lato: "Lato", "Noto Sans JP", sans-serif;
	--bud-gradient: linear-gradient(to right, #39d700 0%, #cfee00 100%);
	--background: #202020;
	--gray: #505050;
	--gray-txt: #8d8d8d;
	--black-line: #404040;
}
body {
	background: var(--background);
	font-family: "Noto Sans JP", sans-serif;

	.sp {
		display: none;
	}

	.pc {
		display: block;
	}
}

.breadcrumbs {
	margin-bottom: 48px;
	ol {
		display: flex;
		gap: 10px;
		align-items: center;
		overflow: auto hidden;
		li {
			color: var(--gray-txt);
			font-size: 12px;
			line-height: 1;
			letter-spacing: 0.02em;
			white-space: nowrap;
			a {
				color: #fff;
				text-decoration: none;
			}
			+ &::before {
				content: "";
				display: inline-block;
				width: 6px;
				height: 6px;
				background: url(/common/images/ico_breadcrumbs.png) no-repeat center/cover;
				margin: 0 10px 2px 0;
			}
		}
	}
}

.content-inner {
	width: calc(100vw - 2.78vw - 190px);
	margin-inline: 2.78vw auto;
}

.index-content-inner {
	width: calc(100vw - 4.861vw - 160px);
	margin-inline: 4.861vw auto;
	display: grid;
	grid-template-columns: 38px calc(100% - calc(38px + 3.2638vw));
	gap: 3.2638vw;
}
.sec-ttl-wrapper {
	writing-mode: vertical-lr;
	height: fit-content;
	position: sticky;
	top: 100px;
}
.sec-ttl--en {
	color: var(--gray);
	font-size: 13px;
	font-family: var(--font-lato);
	line-height: 1;
}
.sec-ttl {
	color: #fff;
	font-size: 25px;
	line-height: 1;
	margin-top: 30px;
	height: fit-content;
	padding-bottom: 95px;
	position: relative;
	&::after {
		content: "";
		display: block;
		width: 1px;
		height: 70px;
		background: #fff;
		position: absolute;
		left: 12px;
		bottom: 0;
	}
}
.sec-btn {
	display: block;
	max-width: 350px;
	background: var(--bud-gradient);
	padding: 22px 94px 22px 24px;
	color: #000;
	font-size: 13px;
	line-height: 1.2307;
	border-radius: 5px;
	margin-inline: auto 0;
	position: relative;
	z-index: 0;
	overflow: hidden;
	&::before {
		content: "";
		width: 100%;
		height: 100%;
		background: #fff;
		position: absolute;
		inset: 0;
		scale: 0 1;
		transition: 0.2s;
		transform-origin: left;
		z-index: -1;
	}
	&::after {
		content: "";
		display: block;
		width: 40px;
		height: 9px;
		position: absolute;
		right: 30px;
		top: 26px;
		transition: 0.2s;
		background: url(/common/images/ico_arrow_btn.png) no-repeat center/100% auto, url(/common/images/ico_arrow_btn.png) no-repeat left -40px center/100% auto;
	}
	&:hover {
		&::before {
			scale: 1 1;
		}
		&::after {
			background: url(/common/images/ico_arrow_btn.png) no-repeat right -40px center/100% auto, url(/common/images/ico_arrow_btn.png) no-repeat center/100% auto;
		}
	}
}
.toggle-txt {
	.text-front,
	.text-back {
		display: block;
		margin-inline: auto 0;
		height: 1lh;
		backface-visibility: hidden;
		transition: transform 0.2s;
	}
	.text-front {
		transform: translateY(0.5lh) rotateX(0deg);
	}
	.text-back {
		transform: rotateX(-90deg);
	}
	&:hover {
		.text-front {
			transform: rotateX(90deg);
		}
		.text-back {
			transform: translateY(-0.5lh) rotateX(0deg);
		}
		&::before {
			scale: 2 1;
		}
	}
}
.contact-btn {
	display: block;
	background: var(--bud-gradient);
	color: #000;
	font-size: 12px;
	font-family: var(--font-lato);
	line-height: 1.5;
	letter-spacing: 0.15em;
	text-align: center;
	border-radius: 10vh;
}
.recruit-btn {
	display: block;
	position: relative;
	color: #fff;
	font-size: 12px;
	font-family: var(--font-lato);
	line-height: 1.5;
	letter-spacing: 0.15em;
	text-align: center;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 10vh;
		padding: 1px;
		background: var(--bud-gradient);
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
	}
}

@media (width<768px) {
	/* common */
	body {
		.sp {
			display: block;
		}
		.pc {
			display: none;
		}
	}
	.content-inner {
		width: calc(100% - 40px);
		margin-inline: auto;
	}
	.breadcrumbs {
		margin-bottom: 80px;
		ol li {
			font-size: 10px;
			+ &::before {
				width: 6px;
				height: 6px;
				background: url(/common/images/ico_breadcrumbs.png) no-repeat center/cover;
				margin: 0 5px 1px 0;
			}
		}
	}
	.index-content-inner {
		width: calc(100% - 40px);
		margin-inline: auto;
		grid-template-columns: 28px 1fr;
		gap: 6.1538vw;
	}
	.sec-ttl--en {
		font-size: 12px;
	}
	.sec-ttl {
		font-size: 15px;
		padding-bottom: 95px;
		&::after {
			left: 8px;
		}
	}
}