:root {
	--opacity: 0.6;
	--svg-blank: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.4615%2016C1.05183%2016%200.705833%2015.8588%200.4235%2015.5765C0.141167%2015.2942%200%2014.9482%200%2014.5385V1.4615C0%201.05183%200.141167%200.705833%200.4235%200.4235C0.705833%200.141167%201.05183%200%201.4615%200H7.073V0.846249H1.4615C1.30767%200.846249%201.16667%200.910333%201.0385%201.0385C0.910333%201.16667%200.84625%201.30767%200.84625%201.4615V14.5385C0.84625%2014.6923%200.910333%2014.8333%201.0385%2014.9615C1.16667%2015.0897%201.30767%2015.1538%201.4615%2015.1538H14.5385C14.6923%2015.1538%2014.8333%2015.0897%2014.9615%2014.9615C15.0897%2014.8333%2015.1538%2014.6923%2015.1538%2014.5385V8.927H16V14.5385C16%2014.9482%2015.8588%2015.2942%2015.5765%2015.5765C15.2942%2015.8588%2014.9482%2016%2014.5385%2016H1.4615ZM5.68975%2010.9167L5.08725%2010.3102L14.5512%200.846249H9.6885V0H16V6.3115H15.1538V1.4525L5.68975%2010.9167Z%22%20%2F%3E%3C%2Fsvg%3E");
	--svg-arrow: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.784%2013.9375L4.125%2013.2785L9.4045%207.99905L4.125%202.71955L4.784%202.06055L10.7225%207.99905L4.784%2013.9375Z%22%2F%3E%3C%2Fsvg%3E");
	--svg-arrow-right: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.3827%2012.423H5V11.577H17.3827L11.4082%205.6025L12%205L19%2012L12%2019L11.4082%2018.3975L17.3827%2012.423Z%22%20%2F%3E%3C%2Fsvg%3E");
}

:is(#ours, #interview, #environment, #value) {
	scroll-margin-top: calc(var(--offset, 0px) + 20px);
}

@keyframes scroll {
	0% {
		bottom: 100%;
	}
	50% {
		opacity: 0;
		bottom: 80%;
	}
	70% {
		opacity: 0;
		bottom: 100%;
	}
	80% {
		opacity: 1;
	}
}

body {
	color: #1a1a1a;
	font-family: "Noto Sans JP", sans-serif;
	font-feature-settings: "palt";
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	padding-top: var(--offset, 0);
	text-align: justify;
	@media (min-width: 769px) {
		font-size: 18px;
	}
	* {
		box-sizing: border-box;
	}
	img {
		max-width: 100%;
		vertical-align: bottom;
	}
	:is(h1, h2, h3, h4, h5) {
		font-weight: 500;
		text-box-trim: trim-both;
	}
	:is(h4, .h4) {
		font-size: 22px;
		margin: 0;
		@media (min-width: 769px) {
			font-size: 28px;
		}
	}
	:is(h5, .h5) {
		font-size: 16px;
		margin: 0;
	}
	em {
		font-style: normal;
	}
	a {
		color: currentColor;
		text-decoration: none;
		transition: 0.3s ease;
		&:hover {
			opacity: var(--opacity);
		}
	}
}

/*********************************************************
Utility
*********************************************************/
.hide {
	display: none !important;
}
@media (min-width: 769px) {
	.small-show {
		display: none !important;
	}
}
@media (max-width: 768px) {
	.small-hide {
		display: none !important;
	}
}
@media (min-width: 1200px) {
	.medium-show {
		display: none !important;
	}
}
@media (max-width: 1199px) {
	.medium-hide {
		display: none !important;
	}
}

.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}

.container {
	margin-inline: auto;
	max-width: 1440px;
	padding-inline: 20px;
	@media (min-width: 769px) {
		padding-inline: 40px;
	}
}
section > .container {
	display: grid;
	padding-inline: 0;
	@media (min-width: 769px) {
		grid-template-columns: auto 80px;
	}
	h2 {
		border-bottom: 1px solid currentColor;
		font-size: 14px;
		font-weight: bold;
		margin: 0;
		padding: 24px 20px;
		@media (min-width: 769px) {
			border-bottom: none;
			border-left: 1px solid currentColor;
			display: flex;
			align-items: center;
			grid-column: 2;
			grid-row: 1;
			padding: 24px 0 0;
			writing-mode: vertical-rl;
		}
	}
	.inner {
		margin: 64px 20px;
		@media (min-width: 769px) {
			margin: 96px 40px;
		}
	}
	hgroup {
		display: grid;
		gap: 32px;
		margin-bottom: 48px;
		h3 {
			font-size: 26px;
			margin: 0;
		}
		p {
			margin: 0;
		}
		@media (min-width: 769px) {
			grid-template-columns: repeat(2, 1fr);
			h3 {
				font-size: 32px;
			}
		}
	}
}
main section {
	border-bottom: 1px solid #000;
}

/*********************************************************
Component
*********************************************************/
.no-entries {
	margin-block: 0;
}

.icon {
	&.blank {
		aspect-ratio: 1;
		background: currentColor;
		display: inline-block;
		mask: var(--svg-blank) no-repeat;
		width: 16px;
	}
}

.btn {
	background: #00297a;
	border-radius: 28px;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: end;
	font-size: 15px;
	font-weight: 500;
	height: 56px;
	padding-inline: 40px;
	text-decoration: none;
	width: 100%;
	@media (min-width: 769px) {
		max-width: 360px;
	}
	&:hover {
		background: #1ea3da;
		opacity: 1;
	}
	&:after {
		aspect-ratio: 1;
		background: currentColor;
		content: "";
		display: block;
	}
	&[target="_blank"]:after {
		mask: var(--svg-blank) no-repeat;
		width: 16px;
	}
	&:not([target="_blank"]):after {
		mask: var(--svg-arrow-right) no-repeat;
		width: 24px;
	}
}

.logo {
	display: flex;
	align-items: center;
	gap: 8px;

	em {
		border: 1px solid #ddd;
		border-radius: 13px;
		color: #595959;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 10px;
		font-style: normal;
		font-weight: 500;
		height: 25px;
		padding-inline: 12px;
	}
	@media (min-width: 769px) {
		gap: 12px;
		em {
			font-size: 12px;
			height: 23px;
		}
	}
}

/*********************************************************
Header
*********************************************************/
header.l-header {
	background: #fff;
	border-bottom: 1px solid #000;
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 10;
	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: 16px;
		@media (min-width: 769px) {
			padding-block: 20px;
		}
		.logo img {
			max-width: 200px;
			@media (min-width: 769px) {
				max-width: 296px;
			}
		}
		nav {
			display: flex;
			align-items: center;
			gap: 20px;
			a {
				font-size: 15px;
				font-weight: 500;
				&:not(.btn) {
					color: #000;
				}
				&.btn {
					width: initial;
					@media (min-width: 769px) {
						margin-left: 12px;
					}
				}
			}
		}
	}
}

/*********************************************************
Drawer
*********************************************************/
div.l-drawer {
	background: #fff;
	height: 100dvh;
	max-width: 400px;
	position: fixed;
	top: 0;
	right: 0;
	transition: 0.3s ease;
	translate: 100% 0;
	width: 100%;
	z-index: 20;
	.is-drawer-optn & {
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
		translate: 0 0;
	}
	a {
		display: flex;
		&:not(.btn) {
			border-bottom: 1px solid #e5e5e5;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16px 20px;
			&:not([data-drawer]) {
				&:after {
					aspect-ratio: 1;
					background: #1c1b1f;
					content: "";
					mask: var(--svg-arrow) no-repeat;
					width: 16px;
				}
			}
			&[data-drawer] {
				border-bottom: 1px solid #000;
				justify-content: flex-end;
			}
			&:has(+ .btn) {
				border-bottom: 1px solid #000;
			}
		}
		&.btn {
			margin: 40px 20px;
			width: auto;
		}
	}
}

/*********************************************************
Footer
*********************************************************/
footer.l-footer {
	.footer-entry {
		background: #001640;
		color: #fff;
		.inner {
			@media (min-width: 769px) {
				display: flex;
				align-items: center;
				gap: 40px;
				justify-content: space-between;
			}
			P {
				margin: 0 0 32px;
				max-width: 670px;
				@media (min-width: 769px) {
					margin: 0;
				}
			}
			.btn {
				background: #1ea3da;
				flex-shrink: 0;
				&:hover {
					background: #e5e5e5;
					color: #000;
				}
			}
		}
	}
	.footer-copyright {
		margin-block: 48px;
		.logo img {
			width: 240px;
		}
		.inner {
			display: flex;
			gap: 16px;
			margin-top: 48px;
			@media (max-width: 768px) {
				flex-flow: column;
			}
			a {
				color: #595959;
				display: flex;
				align-items: center;
				gap: 6px;
				font-size: 13px;
				&:after {
					aspect-ratio: 1;
					background: currentColor;
					content: "";
					mask: var(--svg-blank) no-repeat;
					width: 10px;
				}
			}
			small {
				color: #999;
				font-size: 10px;
				margin: 8px 0 0;
			}
		}
		@media (min-width: 769px) {
			margin-block: 64px;
			.logo img {
				width: 296px;
			}
			.inner {
				gap: 24px;
				margin-top: 64px;
				small {
					margin: 0 0 0 auto;
				}
			}
		}
	}
}

/*********************************************************
/index.html
*********************************************************/
main#home {
	.main-visual {
		padding: 93px 0 0;
		overflow: hidden;
		@media (min-width: 769px) {
			padding: 110px 0 0;
		}
		.swiper {
			max-width: 1440px;
			overflow: initial;
			z-index: -1;
			.swiper-wrapper {
				transition-timing-function: linear;
			}
			.swiper-slide:has(img + img) {
				div {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					img:last-of-type {
						grid-row: 2;
					}
					&.left-right img:last-of-type {
						grid-column: 2;
					}
					&.right-left img:first-of-type {
						grid-column: 2;
					}
				}
			}
			img {
				border-radius: 20px;
			}
			video {
				max-width: 100%;
			}
		}
		.container {
			grid-template-columns: auto 40px;
			margin-top: calc(-1 * var(--mv, 0));
			@media (min-width: 769px) {
				grid-template-columns: auto 80px;
			}
			h2 {
				border-bottom: none;
				border-left: 1px solid currentColor;
				display: flex;
				align-items: center;
				grid-column: 2;
				grid-row: 1;
				padding: 0;
				position: relative;
				writing-mode: vertical-rl;
				&:before {
					animation: scroll 3s ease-in-out 0.1s infinite;
					aspect-ratio: 1;
					background: #000;
					border-radius: 50%;
					content: "";
					position: absolute;
					bottom: 100%;
					left: 0;
					translate: -60% 45%;
					width: 6px;
				}
			}
			.inner {
				display: grid;
				margin-top: calc(var(--mv, 0) + 40px);
				h1 {
					font-size: 36px;
					line-height: 1.4;
					margin: 0 0 80px;
				}
				p {
					margin: 0 0 32px;
				}
				@media (min-width: 769px) {
					align-items: end;
					gap: 0 40px;
					grid-template-columns: 60% auto;
					margin-top: calc(var(--mv, 0) + 48px);
					h1 {
						font-size: 56px;
						grid-column: 1 / 3;
						margin: 0 0 112px;
					}
					p {
						font-size: 24px;
						margin: 0;
					}
				}
			}
		}
	}
	.ours {
		overflow: auto;
		.services {
			display: grid;
			gap: 32px;
			list-style: none;
			margin: 0;
			padding: 0;
			@media (min-width: 769px) {
				grid-template-columns: repeat(3, 1fr);
			}
			li {
				border: 1px solid #000;
				border-radius: 8px;
				overflow: hidden;
				a {
					display: block;
					&:hover {
						opacity: 1;
						h4 {
							text-decoration: underline;
						}
					}
				}
				img {
					object-fit: cover;
					width: 100%;
				}
				h4 {
					display: flex;
					align-items: center;
					gap: 20px;
					justify-content: space-between;
					font-size: 16px;
					margin: 24px;
					@media (min-width: 769px) {
						font-size: 18px;
						margin: 32px;
					}
				}
			}
		}
		hr {
			border: none;
			margin: 0;
			overflow: initial;
			padding-block: 64px;
			position: relative;
			@media (min-width: 769px) {
				padding-block: 96px;
			}
			&:before {
				border-top: 1px solid #000;
				content: "";
				position: absolute;
				top: 50%;
				right: -20px;
				width: 100dvw;
				@media (min-width: 769px) {
					right: -40px;
				}
			}
		}
		.structure {
			display: grid;
			gap: 48px;
			@media (min-width: 769px) {
				gap: 64px 80px;
				grid-template-columns: auto 45%;
				grid-template-rows: min-content min-content;
				> img {
					grid-column: 2;
					grid-row: 1 / 3;
				}
			}
			.description {
				h4 {
					font-size: 22px;
					margin: 0 0 24px;
					@media (min-width: 769px) {
						font-size: 28px;
					}
				}
				p {
					margin: 0;
				}
			}
			.listed {
				border-top: 1px solid #bbb;
				display: grid;
				gap: 16px 24px;
				grid-template-columns: 80px auto;
				grid-template-rows: min-content auto;
				padding: 40px 0 0;
				img {
					grid-row: 1 / 3;
				}
				h5 {
					font-size: 16px;
				}
				p {
					font-size: 14px;
					margin: 0;
				}
				@media (min-width: 769px) {
					gap: 16px 40px;
					padding: 48px 0 0;
					h5 {
						font-size: 18px;
					}
					p {
						font-size: 16px;
					}
				}
			}
		}
	}
	.interview {
		.interviews {
			display: grid;
			gap: 32px;
			margin-block: 48px;
			@media (min-width: 769px) {
				gap: 32px 48px;
				grid-template-columns: repeat(3, 1fr);
				margin-block: 80px;
				.no-entries {
					grid-column: 1 / 4;
				}
			}
			a {
				border: 1px solid #000;
				border-radius: 8px;
				display: block;
				&:hover {
					opacity: 1;
					h4 {
						text-decoration: underline;
					}
				}
				img {
					object-fit: cover;
					width: 100%;
					border-radius: 7px 7px 0 0;
				}
				h4 {
					font-size: 16px;
					margin: 0;
					padding: 24px 24px 16px;
					@media (min-width: 769px) {
						font-size: 18px;
						padding: 32px 32px 16px;
					}
				}
				div {
					display: flex;
					align-items: flex-end;
					gap: 20px;
					justify-content: space-between;
					padding: 0 24px 24px;
					@media (min-width: 769px) {
						padding: 0 32px 32px;
					}
					p {
						font-size: 13px;
						margin: 0;
						@media (min-width: 769px) {
							font-size: 14px;
						}
					}
					em {
						background: #1c1b1f;
						flex-shrink: 0;
						margin-top: 5px;
						margin-left: auto;
					}
				}
			}
		}
	}
	.environment {
		position: relative;
		.inner {
			margin-bottom: 0;
		}
		ul {
			display: grid;
			gap: 40px;
			list-style: none;
			margin: 0 0 64px;
			padding: 0;
			@media (min-width: 769px) {
				grid-template-columns: repeat(4, 1fr);
			}
			@media (max-width: 768px) {
				li {
					display: grid;
					gap: 0 32px;
					grid-template-columns: 64px auto;
					grid-template-rows: min-content min-content;
					img {
						grid-row: 1 / 3;
					}
				}
			}
			h4 {
				font-size: 18px;
				margin: 0 0 8px;
				@media (min-width: 769px) {
					font-size: 20px;
					margin: 24px 0 8px;
				}
			}
			p {
				font-size: 14px;
				margin: 0;
				@media (min-width: 769px) {
					font-size: 16px;
				}
			}
		}
		picture {
			aspect-ratio: 1;
			display: block;
			margin-inline: -20px;

			@media (min-width: 769px) {
				aspect-ratio: initial;
				height: 720px;
				margin-inline: initial;
			}
			img {
				aspect-ratio: 1;
				object-fit: cover;
				position: absolute;
				bottom: 0;
				left: 50%;
				translate: -50% 0;
				width: 100%;
				z-index: -1;
				@media (min-width: 769px) {
					aspect-ratio: initial;
					height: 720px;
					width: 100dvw;
				}
			}
		}
	}
	.value {
		.inner {
			padding-bottom: var(--height);
		}
		.values {
			display: flex;
			align-items: center;
			justify-content: center;
			perspective: 1200px;
			position: relative;
			width: 100%;
		}

		.value-inner {
			position: relative;
			transform-style: preserve-3d;
			width: 100%;
		}
		article {
			background: #fff;
			backface-visibility: hidden;
			border: 1px solid #000;
			border-radius: 8px;
			display: grid;
			min-height: var(--height);
			overflow: hidden;
			position: absolute !important;
			top: 0 !important;
			left: 0 !important;
			transform-origin: center top !important;
			width: 100%;
			will-change: transform, opacity;
			@media (min-width: 769px) {
				grid-template-columns: repeat(2, 1fr);
			}
			@media (max-width: 768px) {
				grid-template-columns: minmax(0, 1fr);
				> div,
				> h4,
				> p {
					max-width: 100%;
					min-width: 0;
					width: 100%;
				}
			}
			em {
				background: #fff;
				border-right: 1px solid #000;
				border-bottom: 1px solid #000;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				height: 36px;
				position: absolute;
				inset: 0 auto auto 0;
				width: 56px;
				@media (min-width: 769px) {
					height: 40px;
					width: 64px;
				}
			}
			div {
				display: flex;
				align-items: center;
				padding: 20px 0;
				@media (max-width: 768px) {
					border-bottom: 1px solid #000;
				}
				@media (min-width: 769px) {
					border-right: 1px solid #000;
					grid-row: 1 / 3;
					padding: 80px;
				}
				video {
					display: block;
					margin-inline: auto;
					max-width: 140px;
					@media (min-width: 769px) {
						max-width: 240px;
					}
				}
			}
			h4 {
				border-bottom: 1px solid #000;
			}
			p {
				font-size: 15px;
				@media (min-width: 769px) {
					font-size: 16px;
				}
			}
			:is(h4, p) {
				display: flex;
				margin: 0;
				padding: 20px;
				@media (min-width: 769px) {
					align-items: center;
					padding: 56px 64px;
				}
			}
		}
	}
	.jobs {
		.selector {
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
			a {
				display: flex;
				align-items: center;
				gap: 8px;
				font-size: 15px;
				font-weight: 500;
				&:hover {
					opacity: var(--opacity);
				}
				&:after {
					aspect-ratio: 1;
					background: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2223%22%20height%3D%2223%22%20rx%3D%223.5%22%20stroke%3D%22%23ddd%22%2F%3E%3Cpath%20d%3D%22M7%209.5L12%2014.5L17%209.5%22%20stroke%3D%22%23000%22%2F%3E%3C%2Fsvg%3E")
						no-repeat;
					content: "";
					flex-shrink: 0;
					width: 24px;
				}
			}
		}
		.entries {
			border: 1px solid #000;
			border-radius: 8px;
			display: grid;
			margin-block: 48px;
			@media (min-width: 769px) {
				grid-template-columns: repeat(3, 1fr);
				.no-entries {
					grid-column: 1 / 4;
				}
			}
			.no-entries {
				margin: 32px;
			}
			h4 {
				border-bottom: 1px solid #000;
				/* border: 1px solid #000; 
				border-radius: 8px 8px 0 0;*/
				padding: 20px;
				width: 100%;
				@media (min-width: 769px) {
					grid-column: 1 / 4;
					padding: 32px;
				}
			}
			> div {
				border-right: 1px solid #000;
				border-bottom: 1px solid #000;
				@media (max-width: 768px) {
					border-right: none;
					&:last-of-type {
						border: none;
					}
				}
				@media (min-width: 769px) {
					/* &:nth-of-type(3n+1){
						border-right: 1px solid #000;
					} */
					/* &:nth-last-of-type(-n + 3) {
						border-bottom: none;
					} */
					&:nth-of-type(3n) {
						border-right: none;
					}
					&:nth-of-type(3n + 1):nth-last-of-type(-n + 3),
					&:nth-of-type(3n + 1):nth-last-of-type(-n + 3) ~ div {
						border-bottom: none;
					}
				}
				a:hover {
					opacity: 1;
					h5 {
						text-decoration: underline;
					}
				}
				:is(span, a) {
					display: block;
					padding: 20px;
					@media (min-width: 769px) {
						padding: 32px;
					}
					h5 {
						margin: 0 0 16px;
					}
					p {
						display: -webkit-box;
						font-size: 14px;
						margin: 0;
						-webkit-line-clamp: 4;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}
					div {
						display: flex;
						align-items: flex-end;
						gap: 20px;
						justify-content: space-between;
						margin-top: 24px;
					}
					.tags {
						font-size: 12px;
						display: flex;
						flex-wrap: wrap;
						gap: 8px;
						list-style: none;
						margin: 0;
						padding: 0;
						text-box-trim: trim-both;
						li {
							border: 1px solid #ddd;
							border-radius: 4px;
							padding: 1px 6px;
							word-break: break-all;
						}
					}
					em {
						color: #1c1b1f;
						flex-shrink: 0;
						margin-left: auto;
					}
				}
			}
		}
	}
}

/*********************************************************
/privacy-policy.html , /interview.html
*********************************************************/

.sub-page > .container .inner {
	margin-bottom: 48px;
	margin-right: -40px;

	@media (max-width: 768px) {
		margin-bottom: 24px;
		margin-right: 20px;
	}

	.breadcrumb {
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
		justify-content: flex-end;
		font-size: 13px;

		li:last-of-type::before {
			content: "-";
			margin: 0 8px;
			color: #949494;
		}
	}
}

#privacy-policy {
	dl {
		margin-block: 0;

		div {
			margin-bottom: 48px;

			&:last-of-type {
				margin-bottom: 0;
			}
		}

		dt {
			font-size: 28px;
			margin-bottom: 24px;

			@media (max-width: 768px) {
				font-size: 22px;
			}
		}

		dd {
			margin-left: 0;

			p {
				margin-top: 0;

				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
	}
}