/**
 * PT components — ラベル・矢印ボタン・トップのヒーロー／PTとは帯／開発方式の行。
 * pt.css のトークンだけを使う。グラデーションなし、角丸は 0 / 4px / 9999px のみ。
 */

/* ---------- ( Label ) ---------- */

.section-label {
	margin-bottom: 0.75rem;
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-accent);
}

/* ---------- arrow link（枠付きボタン＋四角い矢印アイコン） ---------- */

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 3.25rem;
	padding: 0.35rem 0.35rem 0.35rem 1.25rem;
	border: 1px solid var(--color-line);
	border-radius: 4px;
	background: var(--color-surface);
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.arrow-link__icon {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 4px;
	background: var(--color-accent-deep);
	color: var(--color-surface);
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.arrow-link:hover .arrow-link__icon,
.arrow-link:focus-visible .arrow-link__icon {
	transform: translateX(4px);
}

.arrow-link:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.arrow-link--solid {
	border-color: var(--color-accent-deep);
	background: var(--color-accent-deep);
	color: var(--color-surface);
}

.arrow-link--solid .arrow-link__icon {
	background: var(--color-surface);
	color: var(--color-accent-deep);
}

.arrow-link--invert {
	border-color: var(--color-surface);
	background: var(--color-surface);
	color: var(--color-accent-deep);
}

/* 濃色面の上で使う2つ目のボタン（透明＋白枠） */
.arrow-link--ghost {
	border-color: oklch(100% 0 0 / 0.55);
	background: transparent;
	color: var(--color-surface);
}

.arrow-link--ghost .arrow-link__icon {
	background: var(--color-surface);
	color: var(--color-accent-deep);
}

/* ---------- PTとは帯（ブランド色ベタ） ---------- */

.about-band {
	background: var(--color-accent-deep);
	color: var(--color-surface);
}

.about-band__inner {
	display: grid;
	gap: 2rem;
}

@media (min-width: 960px) {
	.about-band__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: center;
		gap: 4rem;
	}
}

.about-band .section-label {
	color: oklch(85% 0.05 195);
}

.about-band__heading {
	font-size: var(--text-xl);
	color: var(--color-surface);
}

.about-band__text {
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
	line-height: 2;
}

.about-band__body .arrow-link {
	margin-top: 2rem;
}

/* ---------- 開発方式 01 / 02 ---------- */

.dev-methods__rows {
	display: grid;
	gap: 1.5rem;
	padding: 0;
	list-style: none;
}

.dev-row {
	display: grid;
	gap: 1.5rem;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-radius: 4px;
	background: var(--color-surface);
}

@media (min-width: 900px) {
	.dev-row {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: 3rem;
		align-items: center;
	}
}

.dev-row__no {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-accent);
}

.dev-row__title {
	margin-top: 0.75rem;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	color: var(--color-accent-deep);
}

.dev-row__lead {
	margin-top: 1rem;
	font-size: 0.9375rem;
	line-height: 1.9;
	color: var(--color-ink-mute);
}

.dev-row__price {
	margin-top: 1rem;
	font-size: var(--text-sm);
	font-weight: 700;
}

.dev-row .arrow-link {
	margin-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.arrow-link__icon {
		transition: none;
	}
}