/* ===========================================
   Global Design Tokens & Base — QuantarisLab
   =========================================== */

/* -------------------------
   CSS Variables
   ------------------------- */
:root {
	/* Typography */
	--font-primary:      'Noto Sans JP', sans-serif;

	/* Colors */
	--color-heading:     #1a1a1a;
	--color-accent:      #2c5f8a;
	--color-accent-dark: #1e4a6e;
	--color-text:        #444;
	--color-text-light:  #666;
	--color-white:       #fff;
	--color-bg:          #fff;
	--color-bg-grey:     #f5f5f5;
	--color-border:      #e0e0e0;

	/* Layout */
	--container-width:   1200px;
	--section-gap:       80px;
	--section-gap-sp:    56px;
}

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

body {
	font-family: var(--font-primary);
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

/* -------------------------
   Container
   ------------------------- */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-right: auto;
	margin-left: auto;
	padding-right: 40px;
	padding-left: 40px;
}

/* -------------------------
   Section utilities
   ------------------------- */
.section {
	padding-top: var(--section-gap);
	padding-bottom: var(--section-gap);
}

.section-label {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--color-accent);
	letter-spacing: 0.1em;
	text-align: center;
	margin: 0 0 8px;
}

.section-heading-en {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	color: var(--color-heading);
	letter-spacing: 0.08em;
	text-align: center;
	margin: 0 0 40px;
}

.section-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-heading);
	letter-spacing: 0.04em;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--color-accent);
	margin: 0 0 40px;
}

/* -------------------------
   Button base
   ------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 32px;
	font-family: var(--font-primary);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

/* ── Type A: 矢印スライド（黒ソリッド） ──────────────────── */
.btn--primary {
	background: #1a1a1a;
	color: #fff;
	border: none;
	border-radius: 2px;
	padding: 13px 20px 13px 26px;
	position: relative;
	overflow: hidden;
	transition: background 0.25s ease, letter-spacing 0.25s ease;
}
.btn--primary::after {
	content: '→';
	display: inline-block;
	margin-left: 4px;
	transition: transform 0.25s ease;
}
.btn--primary:hover {
	background: #2c5f8a;
	color: #fff;
}
.btn--primary:hover::after {
	transform: translateX(5px);
}

/* ── Type B: ボーダー反転（アウトライン→塗り） ────────────── */
.btn--outline {
	background: transparent;
	color: #1a1a1a;
	border: 1.5px solid #1a1a1a;
	border-radius: 2px;
	padding: 12px 28px;
	position: relative;
	overflow: hidden;
	transition: color 0.28s ease;
	isolation: isolate;
}
.btn--outline::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #1a1a1a;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}
.btn--outline:hover {
	color: #fff;
}
.btn--outline:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}

/* ── Type C: グラデーション（ティール） ─────────────────────── */
.btn--gradient,
.btn--gradient:visited,
.btn--gradient:hover,
.btn--gradient:active {
	color: #fff;
}
.btn--gradient {
	background: #6686b7;
	border: none;
	border-radius: 12px;
	padding: 13px 22px 13px 28px;
	gap: 10px;
	transition: filter 0.25s ease;
}
.btn--gradient::after {
	content: '→';
	display: inline-block;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn--gradient:hover {
	filter: brightness(1.2);
}
.btn--gradient:hover::after {
	transform: translateX(4px);
}

/* ── Type D: テキスト＋矢印アニメーション（ミニマル） ────── */
.btn--text {
	background: none;
	color: #1a1a1a;
	border: none;
	border-radius: 0;
	padding: 4px 0;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	gap: 6px;
	position: relative;
	transition: color 0.22s ease;
}
/* 下線 */
.btn--text::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 0.25s ease;
}
/* 矢印（span.btn-arrow で囲む） */
.btn--text .btn-arrow {
	display: inline-block;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn--text:hover {
	color: #2c5f8a;
}
.btn--text:hover .btn-arrow {
	transform: translateX(6px);
}
.btn--text:hover::before {
	transform: scaleX(1.04);
}

/* ── ボタン配置ヘルパー ─────────────────────────────────── */
.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.btn-row--right  { justify-content: flex-end; }
.btn-row--center { justify-content: center; }
.btn-row--left   { justify-content: flex-start; }

/* -------------------------
   Responsive
   ------------------------- */
@media (max-width: 1199px) {
	.container {
		padding-right: 32px;
		padding-left: 32px;
	}
}

@media (max-width: 767px) {
	.container {
		padding-right: 20px;
		padding-left: 20px;
	}

	.section {
		padding-top: var(--section-gap-sp);
		padding-bottom: var(--section-gap-sp);
	}

	.section-title {
		font-size: 1.25rem;
	}
}