/*
 * PT theme stylesheet
 * ビルドステップなし・手書き。グラデーション/background-clip:text は一切使用しない。
 * border-radius は 0 / 4px / 9999px のみ。アニメーションは transform / opacity / clip-path のみ。
 * カラートークンは PiTologi ブランドのティール系 oklch（4色: bg / ink / ink-mute / accent 系統）。
 */

/*
 * Windows の游ゴシックは Regular(400) が細く、本文が掠れて見える。
 * 400 には Medium、700 には Bold を当てた別名を先に並べる（Webフォントは読み込まない）。
 */
@font-face {
	font-family: "PT Yu Gothic";
	src: local("Yu Gothic Medium"), local("YuGothic-Medium");
	font-weight: 400;
}

@font-face {
	font-family: "PT Yu Gothic";
	src: local("Yu Gothic Bold"), local("YuGothic-Bold");
	font-weight: 700;
}

:root {
	--color-bg: oklch(99.4% 0.002 195);
	--color-surface: oklch(100% 0 0);
	--color-band: oklch(96.2% 0.008 195);
	--color-ink: oklch(22% 0.04 205);
	--color-ink-mute: oklch(45% 0.04 205);
	--color-accent: oklch(42% 0.09 195);
	--color-accent-deep: oklch(28% 0.07 200);
	--color-accent-bright: oklch(60% 0.11 195);
	--color-line: oklch(88% 0.01 195);
	--color-error: oklch(48% 0.16 25);
	--color-cta-a: oklch(28% 0.07 200);
	--color-cta-b: oklch(42% 0.09 195);

	--font-jp: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "PT Yu Gothic", "Yu Gothic", "Meiryo", sans-serif;

	--text-hero: clamp(1.875rem, 1.2rem + 2.2vw, 2.875rem);
	--text-xl: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
	--text-lg: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
	--text-base: clamp(1rem, 0.92rem + 0.3vw, 1.0625rem);
	--text-sm: 0.875rem;

	--space-section-sm: clamp(3.5rem, 2.5rem + 3vw, 5rem);
	--space-section-md: clamp(4rem, 2.75rem + 4vw, 6.5rem);
	--space-section-lg: clamp(4.5rem, 3rem + 5vw, 7.5rem);

	--container-w: min(1440px, 100% - clamp(2.5rem, 8vw, 10rem));
}

/* ダークは明示指定時のみ。OS設定に追従させず、明るい面を基本にする。 */
:root[data-theme="dark"] {
	--color-bg: oklch(18% 0.02 205);
	--color-surface: oklch(22% 0.025 205);
	--color-band: oklch(20% 0.022 205);
	--color-ink: oklch(95% 0.01 195);
	--color-ink-mute: oklch(75% 0.02 195);
	--color-accent: oklch(70% 0.1 195);
	--color-accent-deep: oklch(55% 0.09 195);
	--color-accent-bright: oklch(78% 0.12 195);
	--color-line: oklch(32% 0.02 205);
}

/* ---------- reset / base ---------- */

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-jp);
	font-size: var(--text-base);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-jp);
	line-height: 1.45;
	letter-spacing: 0.02em;
	margin: 0;
	font-weight: 700;
}

p {
	margin: 0;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
}

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

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

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

.skip-link {
	position: absolute;
	left: 1rem;
	top: -3rem;
	background: var(--color-ink);
	color: var(--color-bg);
	padding: 0.6rem 1rem;
	z-index: 100;
	transition: transform 0.2s ease;
	transform: translateY(-1rem);
}

.skip-link:focus {
	top: 1rem;
	transform: translateY(0);
}

/* ---------- section rhythm ---------- */

.section {
	padding-block: var(--space-section-sm);
	background: var(--color-bg);
}

.section:nth-of-type(even) {
	padding-block: var(--space-section-md);
}

.section--alt {
	background: var(--color-band);
}

.section__inner {
	width: var(--container-w);
	margin-inline: auto;
}

.section__heading {
	font-size: var(--text-xl);
	margin-bottom: 1.25em;
	max-width: 32ch;
	color: var(--color-accent-deep);
	word-break: auto-phrase;
	text-wrap: balance;
}

.section__note {
	margin-top: 1.5rem;
	color: var(--color-ink-mute);
	font-size: var(--text-sm);
}

/* ---------- buttons ---------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.9em 1.8em;
	border: 1px solid var(--color-ink);
	background: var(--color-ink);
	color: var(--color-bg);
	text-decoration: none;
	font-weight: 700;
	border-radius: 4px;
	transition: transform 0.2s ease;
}

.button:hover {
	transform: translateY(-2px);
}

.button--primary {
	background: var(--color-accent-deep);
	border-color: var(--color-accent-deep);
}

.button--ghost {
	background: transparent;
	color: var(--color-ink);
}

/* ---------- site header / nav ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	min-height: 64px;
	padding-left: clamp(1.25rem, 3vw, 2.5rem);
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-line);
}

.site-header__logo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--color-ink);
}

.site-header__wordmark {
	font-family: var(--font-jp);
	font-size: 1.375rem;
	font-weight: 700;
}

.site-header__center {
	display: none;
}

.site-nav--desktop {
	display: flex;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.2vw, 2.75rem);
	font-size: 0.9375rem;
	font-weight: 700;
}

.site-nav__link {
	position: relative;
	text-decoration: none;
	padding-block: 0.35rem;
}

.site-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
	transform: scaleX(1);
}

.site-header__util {
	display: flex;
	justify-content: flex-end;
	gap: 1.5rem;
	font-size: 0.8125rem;
}

.site-header__util a {
	color: var(--color-ink-mute);
	text-decoration: none;
}

.site-header__util a:hover,
.site-header__util a:focus-visible {
	color: var(--color-ink);
}

.site-header__ctas {
	display: none;
}

/* 右端の色面ボタン。ダークモードでも白文字の可読性を保つため固定色 */
.site-header__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	height: 100%;
	padding-inline: clamp(1.25rem, 1.8vw, 2rem);
	background: var(--color-cta-a);
	color: oklch(99% 0.003 195);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	white-space: nowrap;
}

.site-header__ctas li + li .site-header__cta {
	background: var(--color-cta-b);
}

.site-header__cta-icon {
	transition: transform 0.25s ease;
}

.site-header__cta:hover .site-header__cta-icon,
.site-header__cta:focus-visible .site-header__cta-icon {
	transform: translateY(-3px);
}

.site-header__cta:focus-visible {
	outline: 2px solid var(--color-accent-bright);
	outline-offset: -4px;
}

@media (min-width: 1024px) {
	.site-header {
		min-height: 88px;
	}

	/* ナビは1段のみ。ロゴとCTAの間で上下左右中央に置く。 */
	.site-header__center {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		padding-inline: clamp(1.25rem, 2.5vw, 2.5rem);
	}

	.site-header__ctas {
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.site-nav__list {
		gap: 1.1rem;
		font-size: var(--text-sm);
	}

	.site-header__cta {
		padding-inline: 1rem;
		font-size: var(--text-sm);
	}
}

.site-header__toggle {
	display: inline-flex;
	align-self: center;
	margin-right: clamp(0.75rem, 3vw, 2rem);
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
}

@media (min-width: 1024px) {
	.site-header__toggle {
		display: none;
	}
}

.site-header__toggle-icon {
	position: relative;
	display: block;
	width: 24px;
	height: 14px;
}

.site-header__toggle-icon span {
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background: var(--color-ink);
	transition: transform 0.25s ease;
}

.site-header__toggle-icon span:first-child {
	top: 0;
}

.site-header__toggle-icon span:last-child {
	bottom: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon span:first-child {
	transform: translateY(6px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon span:last-child {
	transform: translateY(-6px) rotate(-45deg);
}

.site-header__toggle-label {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
}

.site-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: var(--color-ink);
	color: var(--color-bg);
	display: grid;
	grid-template-columns: 1fr;
	/* 項目が画面より長いとき上が切れないよう safe を付け、はみ出しはスクロールさせる。
	   上端はヘッダー（z-index 60）の下から始める。 */
	align-content: safe center;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: calc(64px + 0.75rem) clamp(1.25rem, 6vw, 4rem) clamp(1.5rem, 4vh, 3rem);
	clip-path: circle(0% at calc(100% - 2.5rem) 2.5rem);
	transition: clip-path 0.5s ease;
	visibility: hidden;
}

.site-nav-overlay[data-open="true"] {
	clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem);
	visibility: visible;
}

.site-nav-overlay__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.site-nav-overlay__item {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	border-bottom: 1px solid oklch(45% 0.03 205);
	padding-block: clamp(0.4rem, 1.3vh, 0.9rem);
}

.site-nav-overlay__index {
	font-size: var(--text-sm);
	color: oklch(70% 0.03 195);
}

.site-nav-overlay__link {
	font-family: var(--font-jp);
	font-size: clamp(1.0625rem, 0.9rem + 1.2vw, 1.75rem);
	line-height: 1.4;
	text-decoration: none;
	color: var(--color-bg);
}

.site-nav-overlay__meta {
	margin-top: 1.25rem;
	font-size: var(--text-sm);
	color: oklch(70% 0.03 195);
}


.home-summary__text {
	font-size: var(--text-lg);
	max-width: 60ch;
}

.home-together__heading,
.home-beta__heading {
	font-size: var(--text-xl);
	margin-bottom: 1em;
}

.home-together__body,
.home-beta__body {
	max-width: 56ch;
	color: var(--color-ink-mute);
}

.home-faq-excerpt__list {
	display: grid;
	gap: 1rem;
}

.home-faq-excerpt__item {
	border-top: 1px solid var(--color-line);
	padding-block: 1.25rem;
}

.home-faq-excerpt__link {
	color: var(--color-accent-deep);
	font-size: var(--text-sm);
}

.link-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.link-band__heading {
	font-size: var(--text-lg);
}

.link-band__link {
	color: var(--color-accent-deep);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.link-band__note {
	margin-top: 0.75rem;
	color: var(--color-ink-mute);
	font-size: var(--text-sm);
}

/* ---------- page hero (subpages) ---------- */

.page-hero {
	padding-block: var(--space-section-md) var(--space-section-sm);
	border-bottom: 1px solid var(--color-line);
}

.page-hero__label {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-accent-deep);
	margin-bottom: 0.75rem;
}

.page-hero__title {
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
	line-height: 1.35;
	word-break: auto-phrase;
	text-wrap: balance;
}

.page-hero__lead {
	margin-top: 1.25rem;
	max-width: 56ch;
	color: var(--color-ink-mute);
	font-size: var(--text-base);
}

.page-hero__note {
	margin-top: 1rem;
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

/*
 * 画像つきヒーロー。画像は右55%に主題、左45%が空白の構図で生成している。
 * 狭い幅: 本文の下に主題側（右寄せ）を切り出して置く。
 * 900px以上: 画像をセクション全面に敷き、左の空白に本文を載せる。
 * 画像は明るい地なので、ダーク指定時もヒーロー内だけ明るいトークンに戻す。
 */
.page-hero--image {
	--color-ink: oklch(22% 0.04 205);
	--color-ink-mute: oklch(40% 0.04 205);
	--color-accent-deep: oklch(28% 0.07 200);
	--color-line: oklch(88% 0.01 195);
	background-color: oklch(97% 0.008 195);
	color: var(--color-ink);
}

.page-hero__media {
	width: var(--container-w);
	margin: 2rem auto 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.page-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 85% 50%;
}

/* 記事アイキャッチ: 構図が揃わないので中央基準・横長で見出しの下に置く */
.page-hero__media--thumb {
	aspect-ratio: 16 / 9;
}

.page-hero__media--thumb img {
	object-position: 50% 50%;
}

@media (min-width: 900px) {
	.page-hero__media--thumb {
		aspect-ratio: 21 / 9;
	}
}

@media (min-width: 900px) {
	.page-hero--image {
		position: relative;
		display: flex;
		align-items: center;
		min-height: clamp(26rem, 40vw, 38rem);
		overflow: hidden;
	}

	.page-hero--image .page-hero__body {
		position: relative;
		z-index: 1;
	}

	.page-hero--image .page-hero__body > * {
		max-width: min(38%, 32rem);
	}

	.page-hero--image .page-hero__media {
		position: absolute;
		inset: 0;
		width: auto;
		margin: 0;
		aspect-ratio: auto;
	}

	.page-hero--image .page-hero__media img {
		object-position: 100% 50%;
	}
}

/* ---------- bullet / numbered / step lists ---------- */

.bullet-list__list {
	display: grid;
	gap: 1rem;
	counter-reset: bullet;
}

.bullet-list__item {
	position: relative;
	padding-left: 1.75rem;
	border-top: 1px solid var(--color-line);
	padding-top: 1rem;
}

.bullet-list__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.3rem;
	width: 8px;
	height: 8px;
	background: var(--color-accent);
	border-radius: 9999px;
}

.bullet-list__list--ordered {
	counter-reset: bullet;
}

.bullet-list__list--ordered .bullet-list__item {
	counter-increment: bullet;
}

.bullet-list__list--ordered .bullet-list__item::before {
	content: counter(bullet, decimal-leading-zero);
	width: auto;
	height: auto;
	background: none;
	color: var(--color-accent-deep);
	font-size: var(--text-sm);
	font-weight: 700;
	top: 0.9rem;
	border-radius: 0;
}

.bullet-list__note {
	margin-top: 1.5rem;
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

.numbered-list__grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.numbered-list__no {
	display: block;
	font-family: var(--font-jp);
	font-size: clamp(2rem, 1.5vw + 1rem, 2.75rem);
	font-weight: 700;
	color: var(--color-accent);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.numbered-list__title {
	font-size: var(--text-lg);
	margin-bottom: 0.5rem;
}

.numbered-list__body {
	color: var(--color-ink-mute);
}

.step-list__list {
	display: grid;
	gap: 0;
}

.step-list__item {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	grid-template-areas:
		"no title"
		"no body";
	column-gap: 1rem;
	row-gap: 0.4rem;
	align-items: baseline;
	padding-block: 1.5rem;
	border-top: 1px solid var(--color-line);
}

.step-list__no {
	grid-area: no;
	font-family: var(--font-jp);
	color: var(--color-accent-deep);
	font-size: 1.25rem;
}

.step-list__title {
	grid-area: title;
	font-size: var(--text-lg);
}

.step-list__body {
	grid-area: body;
	max-width: 60ch;
	color: var(--color-ink-mute);
}

.step-list__note {
	margin-top: 1.5rem;
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

/* ---------- kv-table / data-table ---------- */

.kv-table__list {
	display: grid;
	gap: 0;
}

.kv-table__row {
	display: grid;
	grid-template-columns: minmax(8rem, 14ch) 1fr;
	gap: 1rem;
	padding-block: 1rem;
	border-top: 1px solid var(--color-line);
}

.kv-table__key {
	color: var(--color-ink-mute);
	font-size: var(--text-sm);
}

.kv-table__note {
	margin-top: 1.5rem;
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

.data-table__scroll {
	overflow-x: auto;
}

.data-table__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
}

.data-table__table th,
.data-table__table td {
	text-align: left;
	padding: 0.9rem 1rem;
	border-top: 1px solid var(--color-line);
}

.data-table__table thead th {
	color: var(--color-ink-mute);
	font-size: var(--text-sm);
	font-weight: 700;
	border-top: none;
}

.data-table__note {
	margin-top: 1.5rem;
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

/* ---------- pricing table ---------- */

.pricing-table__list {
	display: grid;
	gap: 1.5rem;
}

.pricing-table__row {
	border: 1px solid var(--color-line);
	padding: clamp(1.25rem, 2vw, 2rem);
	background: var(--color-surface);
}

.pricing-table__name {
	font-size: var(--text-lg);
	margin-bottom: 0.5rem;
}

.pricing-table__desc {
	color: var(--color-ink-mute);
}

.pricing-table__duration {
	margin-top: 0.75rem;
	font-size: var(--text-sm);
	color: var(--color-accent-deep);
}

.pricing-table__label {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.2em 0.75em;
	border: 1px solid var(--color-accent);
	font-size: var(--text-sm);
	color: var(--color-accent-deep);
}

/* ---------- icon cards (services / industries index) ---------- */

.icon-card__grid {
	display: grid;
	gap: clamp(0.75rem, 1.2vw, 1.25rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
	.icon-card__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.icon-card__grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) and (max-width: 1099px) {
	.icon-card__grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.icon-card__grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.icon-card {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 4px;
}

.icon-card--muted {
	background: var(--color-bg);
	border-style: dashed;
}

.icon-card__link {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	height: 100%;
	padding: clamp(1.25rem, 1.6vw, 1.75rem);
	color: var(--color-ink);
	text-decoration: none;
}

.icon-card__icon {
	width: 44px;
	height: 44px;
	color: var(--color-accent);
	transition: transform 0.25s ease;
}

.icon-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
}

.icon-card__sub {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--color-accent-deep);
}

.icon-card__name {
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1.4;
}

.icon-card__desc {
	font-size: var(--text-sm);
	line-height: 1.7;
	color: var(--color-ink-mute);
}

.icon-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-line);
}

.icon-card__meta {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-accent-deep);
}

.icon-card__arrow,
.state-map__arrow {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 4px;
	background: var(--color-accent);
	color: var(--color-surface);
	transition: transform 0.25s ease;
}

.icon-card__link:hover .icon-card__arrow,
.icon-card__link:focus-visible .icon-card__arrow,
.state-map__link:hover .state-map__arrow,
.state-map__link:focus-visible .state-map__arrow {
	transform: translateX(4px);
}

.icon-card__link:hover .icon-card__icon,
.icon-card__link:focus-visible .icon-card__icon {
	transform: translateY(-3px);
}

.icon-card__link:hover .icon-card__name {
	color: var(--color-accent-deep);
}

/* ---------- finder (/industries/ 用途別・業界別) ---------- */

.finder-tabs {
	border-bottom: 2px solid var(--color-accent-deep);
}

.finder-tabs__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.5rem, 1.5vw, 1.5rem);
}

.finder-tabs__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-accent-deep);
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
	background: var(--color-surface);
	color: var(--color-accent-deep);
	font-weight: 700;
	text-decoration: none;
}

.finder-tabs__tab + .finder-tabs__tab {
	background: var(--color-accent-deep);
	color: var(--color-surface);
}

.finder-tabs__tab svg {
	flex: none;
	transition: transform 0.25s ease;
}

.finder-tabs__tab:hover svg,
.finder-tabs__tab:focus-visible svg {
	transform: translateY(3px);
}

.finder-section {
	scroll-margin-top: 5rem;
}

.finder-section__lead {
	max-width: 60ch;
	margin: -0.5rem 0 clamp(1.5rem, 2.5vw, 2.25rem);
	color: var(--color-ink-mute);
}

.use-card__inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	height: 100%;
	padding: clamp(1.25rem, 1.6vw, 1.75rem);
}

.use-card .icon-card__name {
	margin: 0;
	color: var(--color-ink);
}

.use-card__foot {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-line);
}

.use-card__label {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--color-ink-mute);
}

.use-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.use-card__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.2rem 0.9rem;
	border: 1px solid var(--color-accent);
	border-radius: 9999px;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-accent-deep);
	text-decoration: none;
	transition: transform 0.2s ease;
}

.use-card__link:hover,
.use-card__link:focus-visible {
	transform: translateY(-2px);
	background: var(--color-accent-deep);
	color: var(--color-surface);
}

/* ---------- state map (services index) ---------- */

.state-map__list {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.state-map__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.state-map__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: 1.1rem 1.25rem;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 4px;
	color: var(--color-ink);
	text-decoration: none;
}

.state-map__state {
	line-height: 1.6;
}

.state-map__plan {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-accent-deep);
	white-space: nowrap;
}

.state-map__note {
	margin-top: 1.5rem;
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

@media (max-width: 559px) {
	.state-map__link {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"state arrow"
			"plan arrow";
		row-gap: 0.25rem;
	}
	.state-map__state { grid-area: state; }
	.state-map__plan { grid-area: plan; }
	.state-map__arrow { grid-area: arrow; }
}

/* ---------- faq accordion ---------- */

.faq-accordion__list {
	display: grid;
	gap: 0;
}

.faq-accordion__item {
	border-top: 1px solid var(--color-line);
}

.faq-accordion__item details {
	padding-block: 0.25rem;
}

.faq-accordion__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-block: 1rem;
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.faq-accordion__question::-webkit-details-marker {
	display: none;
}

.faq-accordion__question::after {
	content: "+";
	flex: none;
	font-family: var(--font-jp);
	font-size: 1.5rem;
	transition: transform 0.2s ease;
}

details[open] > .faq-accordion__question::after {
	transform: rotate(45deg);
}

.faq-accordion__answer {
	color: var(--color-ink-mute);
	padding-bottom: 1.25rem;
	opacity: 0;
	animation: pt-faq-in 0.2s ease forwards;
}

@keyframes pt-faq-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ---------- prose block ---------- */

.prose-block__heading {
	font-size: var(--text-lg);
	margin-bottom: 0.75em;
}

.prose-block__body {
	max-width: 60ch;
	color: var(--color-ink-mute);
	white-space: pre-line;
}

/* ---------- cta band ---------- */

.cta-band {
	background: var(--color-ink);
	color: var(--color-bg);
}

.cta-band__inner {
	width: var(--container-w);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}

.cta-band__heading {
	font-size: var(--text-xl);
	max-width: 28ch;
	color: var(--color-bg);
	word-break: auto-phrase;
	text-wrap: balance;
}

.cta-band__copy {
	margin-top: 0.75rem;
	color: oklch(78% 0.02 195);
	max-width: 56ch;
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.cta-band .button {
	border-color: var(--color-bg);
}

.cta-band .button--primary {
	background: var(--color-accent-bright);
	border-color: var(--color-accent-bright);
	color: var(--color-ink);
}

/* 暗い帯の上では枠線ボタンの文字を明色にする（ink on ink で消えるため）。 */
.cta-band .button--ghost {
	background: transparent;
	color: var(--color-bg);
}

/* ---------- works list (開発事例) ---------- */

.works-list__note {
	max-width: 60ch;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

.works-list__list {
	border-top: 2px solid var(--color-ink);
}

.works-list__item {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 0.75rem 1.5rem;
	padding-block: clamp(1.25rem, 2.5vw, 2rem);
	border-bottom: 1px solid var(--color-line);
}

.works-list__no {
	grid-row: span 2;
	font-size: clamp(2rem, 1.5vw + 1rem, 2.75rem);
	font-weight: 700;
	line-height: 1;
	color: var(--color-accent);
	font-variant-numeric: tabular-nums;
}

.works-list__name {
	font-size: var(--text-lg);
	line-height: 1.3;
}

.works-list__en {
	display: inline-block;
	margin-left: 0.5em;
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--color-accent);
}

.works-list__task {
	margin-top: 0.25rem;
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

.works-list__points {
	display: grid;
	gap: 0.35rem;
	font-size: var(--text-sm);
}

.works-list__points li {
	padding-left: 1em;
	text-indent: -1em;
}

.works-list__points li::before {
	content: "— ";
	color: var(--color-accent);
}

.works-list__shot {
	grid-column: 1 / -1;
	margin-top: 0.5rem;
	border: 1px solid var(--color-line);
	border-radius: 4px;
	overflow: hidden;
	background: var(--color-surface);
}

.works-list__shot img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 1024px) {
	.works-list__item {
		grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.2fr);
		align-items: start;
	}

	.works-list__shot {
		grid-column: 2 / -1;
	}

	.works-list__no {
		grid-row: auto;
	}
}

/* ---------- cases (honesty block) ---------- */

.cases-honesty {
	background: var(--color-surface);
	border-block: 1px solid var(--color-line);
}

/* 残り枠は数字を主役にする。0 のときは label だけ出る。 */
.cases-honesty__slots {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-line);
}

.cases-honesty__slots-label {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-accent-deep);
}

.cases-honesty__slots-num {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-ink);
}

.cases-honesty__slots-num strong {
	font-size: clamp(4rem, 10vw, 9rem);
	line-height: 0.9;
	color: var(--color-accent);
	margin-inline: 0.1em;
	font-variant-numeric: tabular-nums;
}

.cases-honesty__body {
	max-width: 60ch;
	color: var(--color-ink-mute);
}

/* ---------- contact form ---------- */

/* 左に「送信後の流れ」と別導線、右に白カードのフォーム。 */
.contact-form__layout {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

@media (min-width: 960px) {
	.contact-form__layout {
		grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr);
	}

	.contact-form__aside {
		position: sticky;
		top: 6rem;
	}
}

.contact-form__aside {
	display: grid;
	gap: 0.75rem;
}

.contact-form__aside-label {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-accent);
	letter-spacing: 0.08em;
}

.contact-form__steps {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	counter-reset: step;
	border-top: 1px solid var(--color-line);
}

.contact-form__steps li {
	counter-increment: step;
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--color-line);
	font-weight: 700;
}

.contact-form__steps li::before {
	content: counter(step, decimal-leading-zero);
	color: var(--color-accent);
	font-size: var(--text-sm);
}

.contact-form__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 4px;
	color: var(--color-ink);
	text-decoration: none;
}

.contact-form__link-body {
	display: grid;
	gap: 0.2rem;
}

.contact-form__link-label {
	font-weight: 700;
}

.contact-form__link-desc {
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

.contact-form__link-arrow {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 4px;
	background: var(--color-ink);
	color: var(--color-bg);
	transition: transform 0.2s ease;
}

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

.contact-form__form {
	display: grid;
	gap: 1.75rem;
	padding: clamp(1.5rem, 3vw, 3rem);
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 4px;
}

.contact-form__row {
	display: grid;
	gap: 1.75rem;
}

@media (min-width: 720px) {
	.contact-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.contact-form__field {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
}

.contact-form__field label {
	display: flex;
	align-items: center;
	font-weight: 700;
}

.contact-form__field input[type="text"],
.contact-form__field input[type="email"],
.contact-form__field select,
.contact-form__field textarea {
	width: 100%;
	min-height: 3.25rem;
	border: 1px solid var(--color-line);
	background: var(--color-bg);
	color: var(--color-ink);
	font: inherit;
	padding: 0.85em 1em;
	border-radius: 4px;
	box-sizing: border-box;
}

.contact-form__field textarea {
	line-height: 1.8;
	resize: vertical;
}

.contact-form__field ::placeholder {
	color: var(--color-ink-mute);
	opacity: 0.7;
}

/* ネイティブの矢印は右端に貼り付くので消し、内側に余白を取った位置に自前の矢印を置く。 */
.contact-form__field select {
	appearance: none;
	padding-right: 3rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23155a5c' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.25rem center;
	background-size: 12px 8px;
	cursor: pointer;
}

.contact-form__field input:focus-visible,
.contact-form__field select:focus-visible,
.contact-form__field textarea:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
	border-color: var(--color-accent);
}

.contact-form__field--radio {
	border: none;
	padding: 0;
	margin: 0;
}

.contact-form__field--radio legend {
	font-weight: 700;
	margin-bottom: 0.75rem;
	padding: 0;
}

.contact-form__radios {
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 720px) {
	.contact-form__radios {
		grid-template-columns: 1fr 1fr;
	}
}

/* ラベル全体を押せるカード。選択中は枠と文字をアクセント色にする。 */
.contact-form__field .contact-form__radio {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-line);
	border-radius: 4px;
	background: var(--color-bg);
	font-weight: 400;
	cursor: pointer;
}

.contact-form__radio input {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.2rem 0 0;
	accent-color: var(--color-accent);
}

.contact-form__radio:has(input:checked) {
	border-color: var(--color-accent);
	box-shadow: inset 0 0 0 1px var(--color-accent);
	background: var(--color-surface);
}

.contact-form__radio:has(input:focus-visible) {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.contact-form__radio-body {
	display: grid;
	gap: 0.2rem;
}

.contact-form__radio-label {
	font-weight: 700;
}

.contact-form__radio:has(input:checked) .contact-form__radio-label {
	color: var(--color-accent-deep);
}

.contact-form__radio-desc {
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

.contact-form__field--consent label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-weight: 400;
}

.contact-form__field--consent input {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--color-accent);
}

.contact-form__required {
	display: inline-block;
	margin-left: 0.6em;
	padding: 0.1em 0.55em;
	border-radius: 4px;
	background: var(--color-accent);
	color: var(--color-surface);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.6;
}

.contact-form__submit {
	justify-self: start;
	min-width: 16rem;
	justify-content: center;
}

@media (max-width: 719px) {
	.contact-form__submit {
		justify-self: stretch;
		min-width: 0;
	}
}

.contact-form__error {
	color: var(--color-error);
	font-size: var(--text-sm);
}

.contact-form__generic-error {
	color: var(--color-error);
	margin-bottom: 1.5rem;
}

.contact-thanks__h1 {
	font-size: var(--text-xl);
}

.contact-thanks__body {
	margin-top: 1rem;
	max-width: 56ch;
	color: var(--color-ink-mute);
}

.contact-thanks__note {
	margin-top: 0.75rem;
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

.contact-thanks .button {
	margin-top: 2rem;
}

/* ---------- privacy ---------- */

.privacy__inner {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	max-width: 68ch;
}

.privacy__heading {
	font-size: var(--text-lg);
	margin-bottom: 0.75em;
}

.privacy__body {
	color: var(--color-ink-mute);
}

/* ---------- estimator mount (owned by pt-estimator agent, layout only) ---------- */

.pt-estimator-root {
	width: var(--container-w);
	margin-inline: auto;
	padding-block: var(--space-section-sm);
}

.pt-estimator__note {
	margin-top: 1rem;
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

/* ---------- site footer ----------
   明るい面にロゴ・横並びナビ・区切り線・会社情報。上に3つの導線カード。 */

.site-footer {
	background: var(--color-surface);
	color: var(--color-ink);
	border-top: 1px solid var(--color-line);
}

.site-footer__cta-band {
	background: var(--color-band);
	padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.site-footer__ctas {
	width: var(--container-w);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
}

.footer-cta {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.25rem 1rem;
	height: 100%;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--color-line);
	border-radius: 4px;
	background: var(--color-surface);
	color: var(--color-ink);
	text-decoration: none;
}

.footer-cta__title {
	font-size: var(--text-lg);
	font-weight: 700;
}

.footer-cta__body {
	grid-column: 1;
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
	line-height: 1.6;
}

.footer-cta__arrow {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 4px;
	background: var(--color-accent);
	color: var(--color-surface);
	transition: transform 0.25s ease;
}

.footer-cta:hover .footer-cta__arrow,
.footer-cta:focus-visible .footer-cta__arrow {
	transform: translateX(4px);
}

.site-footer__main {
	width: var(--container-w);
	margin-inline: auto;
	padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 2rem;
}

.site-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--color-ink);
	text-decoration: none;
}

.site-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__nav > ul:first-child {
	margin-top: 2rem;
}

.site-footer__legal-links {
	margin-top: 1.25rem !important;
	font-size: var(--text-sm);
}

.site-footer__nav a,
.site-footer__nap a {
	position: relative;
	color: inherit;
	text-decoration: none;
}

.site-footer__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.site-footer__nav a:hover::after,
.site-footer__nav a:focus-visible::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__nav a::after,
	.footer-cta__arrow {
		transition: none;
	}
}

.site-footer__legal-links a {
	color: var(--color-ink-mute);
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
	color: var(--color-accent);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-ink);
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

.site-footer__nap span {
	margin-inline: 0.4em;
}

/* ---------- download form ---------- */

.download-form__docs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	border: none;
	padding: 0;
}

.download-form__docs legend {
	margin-bottom: 0.75rem;
	font-weight: 700;
}

.download-form__doc {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--color-line);
	border-radius: 4px;
	background: var(--color-surface);
	cursor: pointer;
}

.download-form__doc:has(input:checked) {
	border-color: var(--color-accent);
	box-shadow: inset 0 0 0 1px var(--color-accent);
}

.download-form__doc input {
	margin-top: 0.3em;
	accent-color: var(--color-accent-deep);
}

.download-form__doc-body {
	display: grid;
	gap: 0.3rem;
}

.download-form__doc-label {
	font-weight: 700;
}

.download-form__doc-desc {
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
	line-height: 1.7;
}

/* ---------- blog ---------- */

.blog-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.25rem;
}

.blog-card__link {
	display: grid;
	gap: 0.75rem;
	height: 100%;
	padding: 1.5rem;
	border: 1px solid var(--color-line);
	border-radius: 4px;
	background: var(--color-surface);
	text-decoration: none;
	color: var(--color-ink);
	transition: transform 0.2s ease;
}

.blog-card__link:hover,
.blog-card__link:focus-visible {
	transform: translateY(-3px);
}

.blog-card__meta,
.blog-post__head .page-hero__label {
	display: flex;
	gap: 1rem;
	font-size: var(--text-sm);
	color: var(--color-ink-mute);
}

.blog-card__cat,
.blog-post__cat {
	color: var(--color-accent);
}

.blog-card__title {
	font-size: 1.1875rem;
	line-height: 1.5;
}

.blog-card__excerpt {
	font-size: var(--text-sm);
	line-height: 1.8;
	color: var(--color-ink-mute);
}

.blog-card__more {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-accent-deep);
}

.blog-list__empty {
	padding: 2rem;
	border: 1px solid var(--color-line);
	border-radius: 4px;
	background: var(--color-surface);
}

.blog-list__empty-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.blog-list .nav-links {
	display: flex;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.blog-list .page-numbers {
	padding: 0.4em 0.9em;
	border: 1px solid var(--color-line);
	border-radius: 4px;
	text-decoration: none;
}

.blog-list .page-numbers.current {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-bg);
}

.blog-post__title {
	max-width: 32em;
}

.prose {
	max-width: 44rem;
	line-height: 1.9;
}

.prose > * + * {
	margin-top: 1.25em;
}

.prose h2 {
	margin-top: 2.5em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--color-line);
	font-size: 1.5rem;
	line-height: 1.4;
}

.prose h3 {
	margin-top: 2em;
	font-size: 1.1875rem;
}

.prose ul,
.prose ol {
	padding-left: 1.5em;
}

.prose a {
	color: var(--color-accent-deep);
}

.prose img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.prose blockquote {
	padding-left: 1.25em;
	border-left: 3px solid var(--color-accent);
	color: var(--color-ink-mute);
}

.blog-post__nav {
	padding-top: 0;
}

/* ---------- responsive: no horizontal scroll at any breakpoint ---------- */

@media (max-width: 480px) {
	.kv-table__row {
		grid-template-columns: 1fr;
	}
	.step-list__item {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		column-gap: 0.75rem;
	}
}