@charset "UTF-8";

/* =========================================================
	Foundation
========================================================= */
:root {
	--color-bg: #343434;
	--color-bg-secondary: #4d4d4d;
	--color-text: #f7f7f7;
	--color-muted: rgba(255, 255, 255, .78);
	--color-line: rgba(255, 255, 255, .12);
	--color-accent: #f5a4b2;
	--font-base: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-en: "Montserrat", var(--font-base);
	--font-roboto: "Roboto", var(--font-base);
	--container: min(100% - clamp(48px, 9vw, 160px), 1180px);
	--header-height: clamp(78px, 8vw, 108px);
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--duration: .8s;
}

:where(*, *::before, *::after) {
	box-sizing: border-box;
}

:where(html) {
	font-size: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}

:where(body) {
	min-inline-size: 320px;
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-base);
	font-size: clamp(.875rem, .82rem + .28vw, 1rem);
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .08em;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, p, figure, dl, dd) {
	margin: 0;
}

:where(ul, ol) {
	padding: 0;
	margin: 0;
	list-style: none;
}

:where(img, svg) {
	display: block;
	max-inline-size: 100%;
}

:where(img) {
	block-size: auto;
}

:where(a) {
	color: inherit;
	text-decoration: none;
}

:where(button, input, textarea, select) {
	font: inherit;
}

:where(:focus-visible) {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
}

/* =========================================================
	Layout
========================================================= */
.l-site {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: var(--color-bg);
}

.l-container {
	inline-size: var(--container);
	margin-inline: auto;
}

.l-header {
	position: fixed;
	z-index: 20;
	top: 0;
	left: 0;
	inline-size: 100%;
	min-block-size: var(--header-height);
	pointer-events: none;
}

.l-header__inner {
	display: flex;
	align-items: flex-start;
	gap: clamp(12px, 10vw, 56px);
	inline-size: min(100% - clamp(28px, 4vw, 60px), 96%);
	margin-inline: auto;
	padding-block-start: clamp(22px, 2.2vw, 34px);
	pointer-events: auto;
}

.l-header__logo {
	flex: 0 0 auto;
}

.l-header__nav {
	padding-block-start: clamp(1px, .5vw, 7px);
}

.l-header__nav-list {
	display: flex;
	align-items: center;
	gap: clamp(22px, 3.2vw, 52px);
}

.l-header__nav-link {
	display: block;
	font-family: var(--font-roboto);
	font-size: clamp(.75rem, .62rem + .34vw, .95rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .16em;
	transition: opacity .2s ease;
}

.l-header__nav-link:hover {
	opacity: .65;
}

/* =========================================================
	Component
========================================================= */
.c-logo {
	display: inline-grid;
	justify-items: center;
	gap: 7px;
	inline-size: clamp(48px, 5.2vw, 72px);
	line-height: 1;
}

.c-logo__mark {
	display: block;
	inline-size: clamp(33px, 3.8vw, 56px);
	aspect-ratio: 1;
	border: clamp(9px, .9vw, 13px) solid var(--color-text);
	border-radius: 50%;
}

.c-logo__text {
	font-family: var(--font-en);
	font-size: clamp(.62rem, .5rem + .32vw, .82rem);
	font-weight: 700;
	line-height: .9;
	letter-spacing: .1em;
	text-align: center;
}

.c-section-title {
	font-family: var(--font-roboto);
	font-size: clamp(4.05rem, 2.75rem + 4.1vw, 6rem);
	font-weight: 100;
	line-height: 1;
	letter-spacing: .1em;
}

.c-blueprint-bg {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}


.bg__image__blk {
	background-image: url(../../image/kv_bg.svg);
	background-size: cover;
	background-repeat: no-repeat;
}

.c-blueprint-bg>* {
	position: relative;
	z-index: 1;
}

/* =========================================================
	Project
========================================================= */

.p-opening {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: var(--color-bg);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	animation: opening-screen-hide 2s ease 2.05s forwards;
}

.p-opening__logo {
	inline-size: clamp(82px, 8vw, 118px);
	block-size: auto;
	opacity: 0;
	animation: opening-logo 2.9s ease .15s forwards;
}

body.is-opening {
	overflow: hidden;
}

@keyframes opening-logo {
	0% {
		opacity: 0;
	}

	37% {
		opacity: 1;
	}

	63% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes opening-screen-hide {
	0% {
		opacity: 1;
		visibility: visible;
	}

	100% {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

.p-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(420px, 52vw);
	min-block-size: clamp(680px, 100dvh, 800px);
}

.p-hero__content {
	display: grid;
	align-items: center;
	padding-block-start: var(--header-height);
}

.p-hero__text {
	inline-size: min(100% - clamp(18px, 9vw, 50px), 690px);
	margin-inline: auto;
}

.p-hero__title {
	font-size: clamp(2.1rem, 1.36rem + 2.3vw, 2.8rem);
	font-weight: 400;
	line-height: 1.72;
	letter-spacing: .1em;
}

.p-hero__lead {
	margin-block-start: clamp(24px, 3.2vw, 48px);
	color: var(--color-muted);
	font-size: clamp(.86rem, .74rem + .34vw, 1rem);
	font-weight: 600;
	line-height: 2.15;
	letter-spacing: .12em;
}

.p-hero__image {
	position: relative;
	block-size: calc(100% - 70px);
	min-block-size: 0;
	margin-block-start: 70px;
}

.p-hero__image::after {
	position: absolute;
	inset: 0;
	content: "";
	background: rgba(48, 48, 48, .04);
}

.p-hero__image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 52% 50%;
}

.p-about {
	position: relative;
}

.p-about__body {
	display: grid;
	align-items: center;
	min-block-size: clamp(470px, 38vw, 560px);
}

.p-about__inner {
	padding-block: clamp(82px, 8vw, 126px) clamp(74px, 7vw, 108px);
}

.p-about__copy {
	margin-block-start: clamp(36px, 4vw, 54px);
	font-size: clamp(1.22rem, .93rem + .88vw, 1.65rem);
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .1em;
}

.p-about__text {
	max-inline-size: 730px;
	margin-block-start: clamp(20px, 2.6vw, 32px);
	color: var(--color-muted);
	font-size: clamp(.84rem, .76rem + .26vw, .96rem);
	font-weight: 600;
	line-height: 2.25;
	letter-spacing: .08em;
}

.p-about__image {
	block-size: clamp(390px, 36vw, 520px);
}

.p-about__image img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 48% 42%;
	filter: brightness(.72) saturate(.78);
}

.p-works {
	padding-block: clamp(160px, 15vw, 230px) clamp(180px, 14vw, 245px);
	background: var(--color-bg);
}

.p-works__header {
	text-align: center;
}

.p-works__sub-title {
	margin-block-start: 18px;
	font-size: clamp(1.1rem, .92rem + .7vw, 1.55rem);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .14em;
}

.p-works__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin-block-start: clamp(58px, 5.2vw, 78px);
}

.p-works__item {
	aspect-ratio: 1.2 / 1;
	overflow: hidden;
}

.p-works__item img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: brightness(.82) saturate(.82);
	transition: scale .6s var(--ease-out), filter .6s var(--ease-out);
}

.p-works__item:hover img {
	scale: 1.04;
	filter: brightness(.95) saturate(.9);
}

.p-works__item:nth-child(1) img {
	object-position: 50% 50%;
}

.p-works__item:nth-child(2) img {
	object-position: 50% 50%;
}

.p-works__item:nth-child(3) img {
	object-position: 50% 50%;
}

.p-works__item:nth-child(4) img {
	object-position: 50% 62%;
}

.p-works__item:nth-child(5) img {
	object-position: 50% 48%;
}

.p-company {
	position: relative;
	background: var(--color-bg-secondary);
}

.p-company::before {
	position: absolute;
	top: 0;
	left: 0;
	inline-size: clamp(30px, 5.4vw, 20px);
	block-size: 100%;
	content: "";
	background: var(--color-accent);
}

.p-company__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(330px, .82fr);
	gap: clamp(72px, 13vw, 230px);
	min-block-size: clamp(420px, 36vw, 470px);
	padding-block: clamp(76px, 7.2vw, 94px) clamp(66px, 7vw, 84px);
}

.p-company__block--contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.p-company__heading {
	font-family: var(--font-roboto);
	font-size: clamp(2.1rem, 1.45rem + 1.8vw, 3rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .18em;
}

.p-company__list {
	margin-block-start: clamp(42px, 4vw, 60px);
}

.p-company__row {
	display: grid;
	grid-template-columns: 7.4em minmax(0, 1fr);
	gap: clamp(20px, 2vw, 32px);
	font-size: clamp(.84rem, .77rem + .24vw, .95rem);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .08em;
}

.p-company__row+.p-company__row {
	margin-block-start: 9px;
}

.p-company__row dt {
	color: rgba(255, 255, 255, .9);
}

.p-company__row dd {
	color: rgba(255, 255, 255, .86);
}

.p-company__mail {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-block-start: clamp(38px, 4vw, 58px);
	font-family: var(--font-en);
	font-size: clamp(.9rem, .8rem + .25vw, 1rem);
	font-weight: 500;
	letter-spacing: .12em;
	transition: opacity .2s ease;
}

.p-company__mail:hover {
	opacity: .68;
}

.p-company__mail-icon {
	position: relative;
	display: block;
	inline-size: 30px;
	block-size: 22px;
}

.p-company__copyright {
	margin-block-start: auto;
	padding-block-start: 72px;
	font-family: var(--font-en);
	font-size: clamp(.88rem, .78rem + .24vw, 1rem);
	font-weight: 500;
	letter-spacing: .12em;
}

/* =========================================================
	Utility
========================================================= */
.u-sp-only {
	display: none;
}

.u-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.js-fadein {
	opacity: 0;
	translate: 0 28px;
	transition: opacity var(--duration) var(--ease-out), translate var(--duration) var(--ease-out);
}

.js-fadein.is-inview {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	:where(html) {
		scroll-behavior: auto;
	}

	:where(*, *::before, *::after) {
		scroll-behavior: auto !important;
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.js-fadein {
		opacity: 1;
		translate: 0 0;
	}

	.p-opening {
		display: none;
	}
}

/* =========================================================
	Responsive
========================================================= */
@media (max-width: 900px) {
	:root {
		--container: min(100% - 68px, 680px);
		--header-height: 96px;
	}

	.l-header__inner {
		align-items: flex-start;
		justify-content: space-between;
		inline-size: calc(100% - 30px);
		gap: 12px;
		padding-block-start: 16px;
	}

	.l-header__nav {
		flex: 1 1 auto;
		padding-block-start: 13px;
	}

	.l-header__nav-list {
		justify-content: flex-end;
		gap: clamp(18px, 5.2vw, 44px);
	}

	.l-header__nav-link {
		font-size: clamp(.68rem, .56rem + .8vw, .9rem);
		letter-spacing: .12em;
	}

	.p-hero {
		display: block;
		min-block-size: auto;
	}

	.p-hero__content {
		min-block-size: clamp(540px, 76dvh, 724px);
		padding-block-start: var(--header-height);
	}

	.p-hero__text {
		inline-size: min(100% - 30px, 680px);
	}

	.p-hero__title {
		font-size: clamp(1.55rem, 1.03rem + 3.1vw, 2.85rem);
		line-height: 1.72;
		letter-spacing: .08em;
	}

	.p-hero__lead {
		margin-block-start: clamp(26px, 6vw, 48px);
		font-size: clamp(.78rem, .58rem + 1.2vw, 1rem);
		line-height: 2.06;
		letter-spacing: .08em;
	}

	.p-hero__image {
		block-size: min(100vw, 760px);
		min-block-size: 0;
		margin-block-start: 0;
	}

	.p-hero__image img {
		object-position: 49% 54%;
	}

	.p-about__body {
		min-block-size: auto;
	}

	.p-about__inner {
		padding-block: clamp(100px, 24vw, 180px) clamp(78px, 15vw, 116px);
	}

	.p-about__copy {
		margin-block-start: clamp(42px, 10vw, 72px);
		font-size: clamp(1.2rem, .84rem + 2.1vw, 1.7rem);
		line-height: 2;
	}

	.p-about__text {
		margin-block-start: clamp(24px, 5vw, 42px);
		font-size: clamp(.78rem, .6rem + 1vw, .95rem);
		line-height: 2.1;
	}

	.p-about__image {
		block-size: clamp(430px, 77vw, 620px);
	}

	.p-about__image img {
		object-position: 52% 42%;
	}

	.p-works {
		padding-block: clamp(140px, 32vw, 240px) clamp(150px, 30vw, 230px);
	}

	.p-works__list {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 0px;
		list-style: none;
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.p-works__item:nth-child(1),
	.p-works__item:nth-child(2) {
		grid-column: span 3;
		aspect-ratio: 1/1;
	}

	.p-works__item:nth-child(3),
	.p-works__item:nth-child(4),
	.p-works__item:nth-child(5) {
		grid-column: span 2;
		aspect-ratio: 1/1;
	}

	.p-works__item img {
		width: 100%;
		height: auto;
		display: block;
		object-fit: cover;
		aspect-ratio: 1/1;
	}

	.p-works__item {
		aspect-ratio: 1.56 / 1;
	}

	.p-company::before {
		inline-size: 30px;
	}

	.p-company__inner {
		grid-template-columns: 1fr;
		gap: clamp(64px, 14vw, 92px);
		inline-size: min(100% - 88px, 680px);
		min-block-size: auto;
		padding-block: clamp(84px, 15vw, 120px) clamp(64px, 15vw, 110px);
	}

	.p-company__heading {
		font-size: clamp(1.9rem, 1.34rem + 3.1vw, 3rem);
	}

	.p-company__list {
		margin-block-start: clamp(34px, 8vw, 58px);
	}

	.p-company__row {
		grid-template-columns: 6.7em minmax(0, 1fr);
		gap: 14px;
		font-size: clamp(.72rem, .55rem + .95vw, .9rem);
		line-height: 1.7;
	}

	.p-company__mail {
		margin-block-start: clamp(30px, 7vw, 54px);
	}

	.p-company__copyright {
		margin-block-start: clamp(70px, 17vw, 120px);
		padding-block-start: 0;
	}

	.u-sp-only {
		display: inline;
	}
}

@media (max-width: 520px) {
	:root {
		--container: calc(100% - 30px);
		--header-height: 70px;
	}

	.l-header__inner {
		inline-size: calc(100% - 24px);
	}

	.c-logo {
		inline-size: 44px;
		gap: 5px;
	}

	.c-logo__mark {
		inline-size: 30px;
		border-width: 8px;
	}

	.c-logo__text {
		font-size: .54rem;
	}

	.l-header__nav-list {
		gap: clamp(14px, 5.2vw, 24px);
	}

	.l-header__nav-link {
		font-size: .84rem;
		letter-spacing: .1em;
	}

	.p-hero__text {
		inline-size: calc(100% - 28px);
	}

	.p-company__inner {
		inline-size: calc(100% - 72px);
	}

	.p-company__row {
		grid-template-columns: 5.7em minmax(0, 1fr);
		gap: 9px;
	}
}