@layer base, page;

@import url(kiso.css) layer(base);
@import url(splide.min.css) layer(base);

@layer base {
	:root {
		--header-height: 64px;
		--mask-before: 0%;
		--mask-after: 20%;
		--mask-transparent: 30%;
		--mask-transparent-after: 40%;
		--gutter-xs: calc(var(--gutter-l) / 8);
		--gutter-s: calc(var(--gutter-l) / 2);
		--gutter-m: calc(var(--gutter-l) / 8 * 6);
		--gutter-l: clamp(32px, 5vw, 95px);
		--gutter-section: calc(var(--gutter-l) / 8 * 10);
		--gutter-section-l: calc(var(--gutter-l) / 8 * 15);
		--gutter-section-xl: calc(var(--gutter-l) / 8 * 30);
		--font-inter: "Inter", sans-serif;
		--font-sz12: 0.75rem;
		--font-sz14: 0.88rem;
	}

	@media (width <= 550px) {
		:root {
			--header-height: 48px;
		}
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		overflow-x: clip;
		font-family: "Zen Old Mincho", serif;
		font-size: 0.81rem;
		font-style: normal;
		font-optical-sizing: auto;
		line-height: 1.7;
		letter-spacing: 0.02em;
		background-color: #fff;
	}
}

@layer page {
	.wrapper {
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr auto;
		min-block-size: 100dvh;
		background-color: #fff;
	}

	.fadein {
		filter: blur(20px);
		opacity: 0;
		transition: all cubic-bezier(0.11, 0.53, 0.49, 0.93) 0.5s;
		translate: 0 16px;

		&.is-active {
			filter: blur(0);
			opacity: 1;
			translate: 0;
		}
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		inline-size: 100%;
		height: var(--header-height);
		padding: 0 32px;
		color: #fff;
		background-color: #000;
	}

	.header-logo {
		transition: opacity 0.3s ease;
	}

	.header-logo:hover,
	.header-logo:focus-visible {
		opacity: 0.7;
	}

	@media (width <= 550px) {
		.header {
			padding: 0 16px;
		}

		.header-logo img {
			display: block;
			width: auto;
			height: 16px;
		}
	}

	.nav-list {
		display: flex;
		flex-wrap: wrap;
		gap: 48px;
		justify-content: flex-end;
		font-family: var(--font-inter);
		font-size: var(--font-sz14);
		color: #fff;

		> li > a {
			display: flex;
			align-items: center;
			transition: opacity 0.3s ease;

			&::before {
				display: inline-block;
				width: 3px;
				height: 3px;
				margin-block: auto;
				margin-inline-end: 4px;
				content: "";
				background-color: #fff;
				border-radius: 50%;
			}
		}
	}

	@media (width <= 425px) {
		.nav-list {
			gap: 24px;
		}
	}

	.link {
		color: inherit;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.kv-wrapper {
		position: relative;
		z-index: 1;
		min-block-size: calc(100svh - var(--header-height));
		margin-top: var(--header-height);
		background-color: #000;
	}

	.kv-title {
		position: absolute;
		inset: 0;
		z-index: 10;
		display: grid;
		place-items: center;
		margin: auto;
		font-family: var(--font-inter);
		font-size: 1.13rem;
		font-weight: 500;
		color: #fff;
		text-align: center;
		pointer-events: none;
	}

	.content {
		padding: 0 clamp(24px, 5vw, 95px);
		margin-inline: auto;
	}

	.section-title {
		padding-block-end: 14px;
		font-family: var(--font-inter);
		font-size: var(--font-sz14);
		font-weight: 500;
		text-align: center;
		border-block-end: 1px solid #000;
	}

	.section-text {
		margin-block-start: 16px;
	}

	.about {
		padding-block-start: var(--gutter-section-l);
		container: about / inline-size;

		img {
			width: 100%;
		}
	}

	.about-about {
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: clamp(40px, 5vw, 80px);
	}

	@media (width <= 700px) {
		.about-about {
			grid-template-columns: auto;
			gap: 32px;
		}
	}

	.about-about-text {
		padding-top: 32px;
	}

	.about-title {
		padding-block-end: 8px;
		margin-block-end: 32px;
		font-family: var(--font-inter);
		font-size: var(--font-sz14);
		font-weight: 500;
		border-block-end: 1px solid #000;
	}

	.about-heading-lv03 {
		font-size: 1.13rem;
		font-weight: 500;
	}

	.about-ikenobo {
		margin-block-start: var(--gutter-section-l);
	}

	.about-ikenobo-text {
		display: grid;
		grid-template-columns: 1fr 62.25%;
		gap: var(--gutter-l);
		margin-block-start: 24px;
	}

	@media (width <= 550px) {
		.about-ikenobo-text {
			grid-template-columns: 1fr;
			gap: 24px;
		}
	}

	.work {
		padding-block-start: var(--gutter-section-l);
		margin-block-start: var(--gutter-section-l);
	}

	.work-inner {
		padding-top: var(--gutter-section);
	}

	.work-item {
		max-inline-size: clamp(800px, calc((1200 - 113) / 1200 * 100%), 1200px);

		img {
			width: 100%;
		}
	}

	.work-item:not(:first-child) {
		margin-block-start: var(--gutter-section-l);
	}

	.work-item.right {
		margin-left: auto;
	}

	.work-video {
		position: relative;
	}

	.work-lead {
		display: grid;
		grid-template-columns: 1fr calc((600 / 1087) * 100%);
		gap: var(--gutter-s);
		margin-block-start: 24px;
	}

	@media (width <= 550px) {
		.work-lead {
			grid-template-columns: 1fr;
		}
	}

	.work-text {
		max-inline-size: calc((1200 - 259) / 1200 * 100%);
		margin-block-start: 24px;
	}

	.work-text.right {
		margin-inline-start: auto;
	}

	.work-hr-wrapper {
		position: relative;
		width: calc(346 / 1200 * 100%);
		margin: var(--gutter-section-l) auto;

		&::before {
			position: absolute;
			inset-inline: 0;
			top: -6px;
			z-index: 1;
			inline-size: 12px;
			block-size: 12px;
			margin-inline: auto;
			content: "";
			background: #fff;
		}

		&::after {
			position: absolute;
			inset-inline: 0;
			top: -6px;
			z-index: 2;
			inline-size: 1px;
			block-size: 12px;
			margin-inline: auto;
			content: "";
			background: #9e9e9e;
			rotate: 15deg;
		}
	}

	.work-hr {
		z-index: 0;
		border: none;
		border-top: 1px solid #9f9f9f;
	}

	.work-1col {
		display: flex;
		flex-direction: column;
		gap: var(--gutter-m);
		margin-block-start: var(--gutter-section);
	}

	.work-2col {
		display: flex;
		gap: var(--gutter-m);
		margin-block-start: var(--gutter-section);

		> * {
			min-width: 0;
		}
	}

	@media (width <= 550px) {
		.work-1col,
		.work-2col {
			flex-direction: column;
			gap: 16px;
			margin-block-start: 24px;
		}
	}

	.collaboration {
		padding-block: var(--gutter-section);
		margin-block-start: var(--gutter-section-xl);
		color: #fff;
		text-align: center;
		background-color: #161618;

		.section-title {
			border-color: #fff;
		}

		p {
			font-weight: 500;
		}
	}

	@media (width <= 550px) {
		.collaboration {
			text-align: left;
		}
	}

	.collaboration-heading-lv03 {
		margin-block: 64px 16px;
		font-size: 1.13rem;
		font-weight: 600;
	}

	@media (width <= 550px) {
		.collaboration-heading-lv03 {
			margin-block: 48px 16px;
		}
	}

	.alliance {
		display: grid;
		grid-template-rows: repeat(3, auto);
		grid-template-columns: 1fr 10% 1fr 10% 1fr;
		gap: 14px 0;
		max-width: 1200px;
		margin: 100px auto 0;
	}

	.alliance-item {
		position: relative;
		display: grid;
		grid-template-rows: subgrid;
		grid-template-columns: auto;
		grid-row: 1 / -1;
		align-items: center;
		justify-content: center;

		img {
			margin: auto;
		}
	}

	.alliance-heading {
		font-size: 1.13rem;
		font-weight: 700;
	}

	.alliance-cross-wrapper {
		display: grid;
		grid-row: 1 / -1;
		place-items: center;
	}

	.alliance-cross {
		position: relative;
		width: 36px;
		height: 36px;
		aspect-ratio: 1 / 1;

		&::before,
		&::after {
			position: absolute;
			inset: 0;
			width: 1px;
			height: calc(100% * sqrt(2));
			margin: auto;
			content: "";
			background-color: #fff;
			transform-origin: center;
		}

		&::before {
			rotate: -45deg;
		}

		&::after {
			rotate: 45deg;
		}
	}

	@media (width <= 550px) {
		.alliance {
			grid-template-rows: 1fr 10% 1fr 10% 1fr;
			grid-template-columns: auto;
			gap: 24px;
			margin-top: 40px;
		}

		.alliance-item {
			grid-template-rows: auto;
			grid-row: auto;
			gap: 14px;

			span {
				display: block;
				margin-inline: auto;
				text-align: center;
			}
		}

		.alliance-cross-wrapper {
			grid-row: auto;
		}
	}

	.contact {
		padding-block: 140px;
		text-align: center;
	}

	.contact-link-inner {
		margin-inline: auto;
		font-family: "EB Garamond", serif;
		font-size: 1.63rem;
		font-style: italic;
		text-align: center;
	}

	.contact-link {
		display: inline-flex;
		gap: 13px;
		align-items: center;
		justify-content: center;
		transition: opacity 0.3s ease;
	}

	.splide__toggle {
		position: absolute;
		right: 24px;
		bottom: 16px;
		border: none;
		transition: opacity 0.3s ease;

		&:hover,
		&:focus-visible {
			opacity: 0.7;
		}
	}

	.toggle-video {
		position: absolute;
		right: 24px;
		bottom: 16px;
		z-index: 10;
		width: 12px;
		height: 12px;
		cursor: pointer;
		background: url(/assets/img/ico-pause.svg) no-repeat center/contain;
		border: none;
		transition: opacity 0.3s ease;
		z-index: 10;

		&:hover,
		&:focus-visible {
			opacity: 0.7;
		}
	}

	@media (width <= 550px) {
		.splide__toggle,
		.toggle-video {
			right: 16px;
		}
	}

	.toggle-video.is-paused {
		background: url(/assets/img/ico-play.svg) no-repeat center/contain;
	}

	.privacy-policy {
		padding-block: 40px;
		font-size: var(--font-sz12);
		line-height: 1.8;
		background-color: #f4f4f4;

		h2 {
			margin-bottom: var(--gutter-xs);
			font-size: var(--font-sz14);
			font-weight: 700;
		}
	}

	.privacy-policy-inner {
		inline-size: fit-content;
		margin-inline: auto;
	}

	.footer-inner {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 24px 0;
		margin-inline: auto;

		small {
			font-family: var(--font-inter);
			font-size: 0.63rem;
			line-height: 1;
		}
	}

	.footer-logo {
		font-family: var(--font-inter);
		font-size: 1.13rem;
		font-weight: 600;
	}

	.nav-list > li > a:hover,
	.nav-list > li > a:focus-visible {
		opacity: 0.7;
	}

	.contact-link:hover,
	.contact-link:focus-visible {
		opacity: 0.7;
	}
}