@charset "UTF-8";
/* ==========================================================================
   MakeIT v9 / base.css
   リセット・デザイントークン・タイポグラフィ・グリッド・ユーティリティ
   プロパティ順: position → flex → width → height → line-height → margin
                → padding → border → background → color → font → その他 → z-index → overflow
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   特大見出し（c-display-xl / c-display-lg）用。和文は Noto Sans JP にフォールバック
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "TeX Gyre Adventor";
	font-style: normal;
	font-weight: 700;
	src: url("/font/Texgyreadventor-Bold.otf") format("opentype");
	font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
	--color-black: #010101;
	--color-white: #fff;
	--color-gray-900: #1a1a1a;
	--color-gray-700: #4d4d4d;
	--color-gray-500: #757575;
	--color-gray-400: #9d9d9d;
	--color-gray-300: #ccc;
	--color-gray-100: #f2f2f2;
	--color-line: rgba(1, 1, 1, .12);
	--color-line-inverse: rgba(255, 255, 255, .16);

	--font-sans: "Inter Tight", "Noto Sans JP", "Hiragino Sans", sans-serif;
	--font-ja: "Noto Sans JP", "Hiragino Sans", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
	--font-display: "TeX Gyre Adventor", "Inter Tight", "Noto Sans JP", sans-serif;

	/* 375px → 1920px で線形に変化 */
	--fs-display-xl: clamp(56px, 7.25vw + 28.8px, 168px);
	--fs-display-lg: clamp(44px, 5.44vw + 23.6px, 128px);
	--fs-heading-lg: clamp(32px, 2.78vw + 21.6px, 75px);
	--fs-heading-md: clamp(24px, 2.14vw + 16px, 57px);
	--fs-heading-sm: clamp(20px, 1.55vw + 14.2px, 44px);
	--fs-body-lg: clamp(17px, .45vw + 15.3px, 24px);
	--fs-body-md: clamp(15px, .19vw + 14.3px, 18px);
	--fs-label: 11px;

	--gutter: 20px;
	--margin-x: clamp(16px, 2.07vw + 8.2px, 48px);
	--header-h: 64px;

	--space-xs: clamp(8px, .52vw + 6px, 16px);
	--space-sm: clamp(16px, .52vw + 14px, 24px);
	--space-md: clamp(24px, 1.55vw + 18.2px, 48px);
	--space-lg: clamp(48px, 2.59vw + 38.3px, 88px);
	--space-xl: clamp(64px, 4.14vw + 48.5px, 128px);
	--space-section: clamp(96px, 6.8vw + 70.5px, 200px);

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;

	--ease-expo: cubic-bezier(.16, 1, .3, 1);
	--ease-quart: cubic-bezier(.76, 0, .24, 1);
}

@media (min-width: 1000px) {
	:root {
		--header-h: 72px;
	}
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, dl, dt, dd,
figure, blockquote, address {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

address {
	font-style: normal;
}

picture {
	display: block;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
}

button {
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
	min-width: 320px;
	line-height: 1.8;
	background: var(--color-white);
	color: var(--color-black);
	font-family: var(--font-sans);
	font-size: var(--fs-body-md);
	font-weight: 400;
	letter-spacing: -.01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "palt";
	overflow-x: clip;
}

::selection {
	background: var(--color-black);
	color: var(--color-white);
}

/* Lenis（lenis.css 相当） */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.c-display-xl,
.c-display-lg,
.c-heading-lg,
.c-heading-md,
.c-heading-sm {
	line-height: 1;
	font-weight: 700;
	letter-spacing: -.045em;
	font-feature-settings: "palt";
}

.c-display-xl {
	line-height: .92;
	font-family: var(--font-display);
	font-size: var(--fs-display-xl);
	letter-spacing: -.05em;
}

.c-display-lg {
	line-height: .95;
	font-family: var(--font-display);
	font-size: var(--fs-display-lg);
	letter-spacing: -.05em;
}

.c-heading-lg {
	line-height: .98;
	font-size: var(--fs-heading-lg);
}

.c-heading-md {
	line-height: 1.02;
	font-size: var(--fs-heading-md);
	letter-spacing: -.04em;
}

.c-heading-sm {
	line-height: 1.1;
	font-size: var(--fs-heading-sm);
	letter-spacing: -.03em;
}

/* 和文見出し（欧文より行間・字間をゆるめる） */
.c-heading-ja {
	line-height: 1.4;
	font-family: var(--font-ja);
	letter-spacing: -.02em;
}

.c-body-lg {
	line-height: 1.75;
	font-size: var(--fs-body-lg);
	letter-spacing: -.02em;
}

.c-body-md {
	line-height: 1.9;
	font-size: var(--fs-body-md);
}

.c-label {
	display: inline-flex;
	align-self: start;
	align-items: center;
	gap: .8em;
	line-height: 1.4;
	font-family: var(--font-mono);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.c-label::before {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	content: "";
}

.c-muted {
	color: var(--color-gray-500);
}

/* --------------------------------------------------------------------------
   Layout: container / grid
   12 カラム（700px 未満は 4 カラム）、最大幅なしの可変グリッド
   -------------------------------------------------------------------------- */
.l-container {
	padding-inline: var(--margin-x);
}

.l-section {
	padding-block: var(--space-section);
}

.l-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-md) var(--gutter);
}

.l-grid > * {
	grid-column: 1 / -1;
}

@media (min-width: 700px) {
	.l-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.l-col-2 { grid-column: auto / span 2; }
	.l-col-3 { grid-column: auto / span 3; }
	.l-col-4 { grid-column: auto / span 4; }
	.l-col-5 { grid-column: auto / span 5; }
	.l-col-6 { grid-column: auto / span 6; }
	.l-col-7 { grid-column: auto / span 7; }
	.l-col-8 { grid-column: auto / span 8; }
	.l-col-9 { grid-column: auto / span 9; }
	.l-col-10 { grid-column: auto / span 10; }
	.l-col-12 { grid-column: 1 / -1; }

	.l-start-2 { grid-column-start: 2; }
	.l-start-3 { grid-column-start: 3; }
	.l-start-4 { grid-column-start: 4; }
	.l-start-5 { grid-column-start: 5; }
	.l-start-6 { grid-column-start: 6; }
	.l-start-7 { grid-column-start: 7; }
	.l-start-8 { grid-column-start: 8; }
	.l-start-9 { grid-column-start: 9; }
}

/* --------------------------------------------------------------------------
   Theme: 暗い面
   -------------------------------------------------------------------------- */
.u-dark {
	background: var(--color-black);
	color: var(--color-white);
}

.u-dark .c-muted {
	color: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.u-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	overflow: hidden;
}

@media (max-width: 699px) {
	.u-pc-only {
		display: none !important;
	}
}

@media (min-width: 700px) {
	.u-sp-only {
		display: none !important;
	}
}