/* =========================================================
   Froi Line 2026 — main.css
   レイヤー順: reset → base → layout → components → legacy → utilities
   legacy は旧テーマ時代に本文へ手書きされたクラス（.green / .shoplist-tbl など）の受け皿
   ========================================================= */

@layer reset, base, layout, components, legacy, utilities;

/* ---------- tokens ---------- */
:root {
	--ink: #17211c;
	--ink-2: #46524b;
	--ink-3: #78837c;
	--line: #e2e9e3;
	--bg: #ffffff;
	--bg-soft: #f5f8f4;
	--bg-tint: #edf8e7;

	--brand: #18c900;          /* ロゴ・旧サイトのグリーン */
	--brand-strong: #0b7a28;   /* 白地の文字用（コントラスト確保） */
	--brand-deep: #0a4f1f;
	--teal: #13a596;
	--lime: #c9d82a;
	--line-green: #06c755;     /* LINE 公式のブランドカラー */
	--line-green-hover: #05b14b;
	--red: #d23c3c;

	--grad: linear-gradient(120deg, var(--teal) 0%, var(--brand) 55%, var(--lime) 100%);

	--font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
	--font-en: "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;

	--radius-s: 10px;
	--radius: 16px;
	--radius-l: 24px;
	--shadow-s: 0 1px 2px rgb(23 33 28 / .06), 0 2px 8px rgb(23 33 28 / .05);
	--shadow: 0 2px 6px rgb(23 33 28 / .06), 0 12px 32px rgb(23 33 28 / .08);

	--ease: cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);

	--wrap: 1120px;
	--wrap-text: 760px;
	--gutter: clamp(16px, 4vw, 32px);
	--header-h: 64px;

	interpolate-size: allow-keywords;
	color-scheme: light;
}
@media (min-width: 900px) {
	:root { --header-h: 76px; }
}

/* ---------- reset ---------- */
@layer 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, figure, blockquote, dl, dd, ol, ul { margin: 0; }
	ol[class], ul[class], nav ul, nav ol, .drawer ul, .sitemap ul { list-style: none; padding: 0; }
	img, svg, video { max-width: 100%; height: auto; }
	img { display: block; }
	button, input, select, textarea { font: inherit; color: inherit; }
	button { cursor: pointer; }
	table { border-collapse: collapse; }
}

/* ---------- base ---------- */
@layer base {
	html {
		scroll-behavior: smooth;
		scroll-padding-top: calc(var(--header-h) + 16px);
		&:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
	}
	@media (prefers-reduced-motion: reduce) {
		html { scroll-behavior: auto; }
		*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	}
	body {
		font-family: var(--font);
		font-size: 1rem;
		line-height: 1.85;
		color: var(--ink);
		background: var(--bg);
		font-feature-settings: "palt" 0;
		-webkit-font-smoothing: antialiased;
		overflow-wrap: anywhere;
		line-break: strict;
	}
	h1, h2, h3, h4 { line-height: 1.4; text-wrap: balance; font-feature-settings: "palt"; }
	p { text-wrap: pretty; }
	a { color: var(--brand-strong); text-underline-offset: .2em; text-decoration-thickness: 1px; }
	a:hover { color: var(--brand-deep); }
	:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
	::selection { background: var(--bg-tint); color: var(--brand-deep); }

	.icon { width: 1.25em; height: 1.25em; flex: none; }
}

/* ---------- layout ---------- */
@layer layout {
	.skip-link {
		position: absolute; left: 8px; top: -100px; z-index: 1000;
		background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 8px;
		&:focus { top: 8px; }
	}

	/* header */
	.site-header {
		position: sticky; top: 0; z-index: 50;
		background: rgb(255 255 255 / .86);
		-webkit-backdrop-filter: saturate(1.6) blur(14px);
		backdrop-filter: saturate(1.6) blur(14px);
		border-bottom: 1px solid transparent;
		transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
		&[data-scrolled] { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgb(23 33 28 / .06); }
	}
	.site-header__inner {
		max-width: var(--wrap); margin-inline: auto;
		height: var(--header-h);
		padding-inline: var(--gutter);
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
	}
	.site-logo {
		display: block; flex: none;
		& img { height: 40px; width: auto; }
		@media (min-width: 900px) { & img { height: 50px; } }
	}
	.site-header__actions { display: flex; align-items: center; gap: 10px; }

	.menu-button {
		display: grid; place-items: center; gap: 3px;
		width: 52px; height: 52px; padding: 0;
		border: 0; border-radius: 14px;
		background: var(--ink); color: #fff;
		transition: background-color .2s var(--ease), transform .2s var(--ease);
		&:hover { background: var(--brand-deep); }
		&:active { transform: scale(.96); }
	}
	.menu-button__bars {
		display: grid; gap: 4px; width: 20px;
		& span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: width .25s var(--ease); }
		& span:nth-child(2) { width: 70%; justify-self: end; }
	}
	.menu-button:hover .menu-button__bars span:nth-child(2) { width: 100%; }
	.menu-button__label { font: 700 9px/1 var(--font-en); letter-spacing: .14em; }

	.site-main { display: block; }

	/* page */
	.page-hero {
		background:
			radial-gradient(120% 140% at 100% 0%, rgb(201 216 42 / .16), transparent 55%),
			radial-gradient(90% 120% at 0% 100%, rgb(19 165 150 / .12), transparent 60%),
			var(--bg-soft);
		border-bottom: 1px solid var(--line);
	}
	.page-hero__inner {
		max-width: var(--wrap); margin-inline: auto;
		padding: clamp(20px, 4vw, 36px) var(--gutter) clamp(28px, 5vw, 52px);
	}
	.page-hero__eyebrow {
		display: inline-flex; align-items: center; gap: .4em;
		margin-top: clamp(16px, 3vw, 28px);
		font-size: .8125rem; font-weight: 700; color: var(--brand-strong); letter-spacing: .06em;
	}
	.page-hero__title {
		margin-top: .35em;
		font-size: clamp(1.625rem, 4.6vw, 2.5rem);
		font-weight: 800; letter-spacing: .02em;
	}
	.breadcrumb ol {
		display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
		list-style: none; padding: 0; margin: 0;
		font-size: .8125rem; color: var(--ink-3);
	}
	.breadcrumb li { display: inline-flex; align-items: center; }
	.breadcrumb li + li::before {
		content: ""; width: 6px; height: 6px; margin-inline: 10px;
		border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
		transform: rotate(45deg); opacity: .6;
	}
	.breadcrumb a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
	.breadcrumb a:hover { color: var(--brand-strong); text-decoration: underline; }
	.breadcrumb .icon { width: 1.1em; height: 1.1em; }

	.page-body {
		max-width: calc(var(--wrap-text) + var(--gutter) * 2);
		margin-inline: auto;
		padding: clamp(32px, 6vw, 64px) var(--gutter) clamp(48px, 8vw, 88px);
	}
	.page-body--wide { max-width: calc(var(--wrap) + var(--gutter) * 2); }

	/* sections */
	.section { padding-block: clamp(56px, 10vw, 112px); }
	.section:nth-of-type(even) { background: var(--bg-soft); }
	.section__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
	.section__lead { max-width: 46em; margin: 0 auto clamp(28px, 5vw, 44px); text-align: center; color: var(--ink-2); }
	.section__more { margin-top: clamp(24px, 4vw, 36px); text-align: center; }

	/* cta band */
	.cta-band {
		position: relative; isolation: isolate; overflow: hidden;
		background: var(--brand-deep); color: #fff;
		&::before {
			content: ""; position: absolute; inset: -40% -10%; z-index: -1;
			background:
				radial-gradient(40% 60% at 15% 30%, rgb(19 165 150 / .55), transparent 70%),
				radial-gradient(35% 55% at 85% 70%, rgb(201 216 42 / .35), transparent 70%);
			filter: blur(10px);
		}
	}
	.cta-band__inner {
		max-width: 780px; margin-inline: auto; text-align: center;
		padding: clamp(56px, 9vw, 96px) var(--gutter);
	}
	.cta-band__eyebrow { font: 700 .75rem/1 var(--font-en); letter-spacing: .24em; color: var(--lime); }
	.cta-band__title { margin-top: .7em; font-size: clamp(1.375rem, 4vw, 2.125rem); font-weight: 800; }
	.cta-band__text { margin: 1em auto 2em; color: rgb(255 255 255 / .82); }

	/* footer */
	.site-footer { background: #0f1713; color: rgb(255 255 255 / .78); }
	.site-footer__inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(48px, 8vw, 80px) var(--gutter) 24px; }
	.site-footer a { color: rgb(255 255 255 / .82); text-decoration: none; }
	.site-footer a:hover { color: #fff; text-decoration: underline; }
	.site-footer__bottom {
		margin-top: clamp(40px, 6vw, 64px); padding-top: 24px;
		border-top: 1px solid rgb(255 255 255 / .12);
		display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	}
	.site-footer__logo { display: inline-block; background: #fff; border-radius: 12px; padding: 6px 12px; }
	.site-footer__logo img { height: 36px; width: auto; }
	.site-footer__copy { font: .8125rem/1 var(--font-en); letter-spacing: .06em; color: rgb(255 255 255 / .55); }

	/* floating CTA (mobile) & to-top */
	.float-cta {
		position: fixed; inset: auto 0 0 0; z-index: 40;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: rgb(255 255 255 / .9);
		-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
		border-top: 1px solid var(--line);
		translate: 0 110%;
		transition: translate .4s var(--ease-out);
		&[data-show] { translate: 0 0; }
		&[data-show][data-hide] { translate: 0 110%; }
		@media (min-width: 900px) { display: none; }
	}
	.to-top {
		position: fixed; right: 16px; bottom: 16px; z-index: 41;
		width: 48px; height: 48px; border-radius: 50%;
		display: grid; place-items: center;
		background: #fff; color: var(--ink); box-shadow: var(--shadow);
		opacity: 0; pointer-events: none; translate: 0 12px;
		transition: opacity .3s var(--ease), translate .3s var(--ease);
		&[data-show] { opacity: 1; pointer-events: auto; translate: 0 0; }
		&:hover { color: var(--brand-strong); }
		@media (max-width: 899px) { bottom: calc(84px + env(safe-area-inset-bottom)); width: 42px; height: 42px; }
	}
}

/* ---------- components ---------- */
@layer components {
	/* buttons */
	.btn {
		--btn-bg: var(--ink); --btn-fg: #fff;
		display: inline-flex; align-items: center; justify-content: center; gap: .5em;
		min-height: 48px; padding: .7em 1.5em;
		border: 0; border-radius: 999px;
		background: var(--btn-bg); color: var(--btn-fg);
		font-weight: 700; line-height: 1.3; text-decoration: none; text-align: center;
		transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
		&:hover { color: var(--btn-fg); transform: translateY(-1px); }
		&:active { transform: translateY(0) scale(.98); }
		& .icon { width: 1.4em; height: 1.4em; }
	}
	.btn--line {
		--btn-bg: var(--line-green);
		box-shadow: 0 6px 18px rgb(6 199 85 / .28);
		&:hover { --btn-bg: var(--line-green-hover); box-shadow: 0 10px 26px rgb(6 199 85 / .34); }
	}
	.btn--ghost {
		--btn-bg: #fff; --btn-fg: var(--ink);
		box-shadow: inset 0 0 0 1.5px var(--line);
		&:hover { --btn-fg: var(--brand-strong); box-shadow: inset 0 0 0 1.5px var(--brand); }
		& .icon { width: 1.1em; height: 1.1em; transition: translate .2s var(--ease); }
		&:hover .icon { translate: 3px 0; }
	}
	.btn--sm { min-height: 40px; padding: .45em 1em; font-size: .8125rem; box-shadow: none; }
	.btn--sm .icon { width: 1.35em; height: 1.35em; }
	.btn--lg { min-height: 58px; padding: .8em 2em; font-size: 1.0625rem; }
	.btn--block { display: flex; width: 100%; }

	.text-link {
		display: inline-flex; align-items: center; gap: .35em;
		font-weight: 700; text-decoration: none;
		& .icon { width: 1.1em; transition: translate .2s var(--ease); }
		&:hover .icon { translate: 4px 0; }
	}

	/* section title */
	.section-title {
		display: grid; justify-items: center; gap: .5em; text-align: center;
		margin-bottom: clamp(20px, 4vw, 32px);
		font-size: clamp(1.5rem, 4.4vw, 2.25rem); font-weight: 800; letter-spacing: .02em;
	}
	.section-title__en {
		font: 700 .75rem/1 var(--font-en); letter-spacing: .22em; text-transform: uppercase;
		background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
	}
	.section-title--sm { font-size: clamp(1.25rem, 3.4vw, 1.625rem); }

	/* hero */
	.hero {
		position: relative; isolation: isolate; overflow: hidden;
		padding: clamp(48px, 10vw, 120px) 0 clamp(56px, 10vw, 120px);
		background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
	}
	.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
	.hero__blob {
		position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
		animation: float 18s var(--ease) infinite alternate;
	}
	.hero__blob--a { width: 46vmax; height: 46vmax; right: -14vmax; top: -18vmax; background: rgb(19 165 150 / .45); }
	.hero__blob--b { width: 34vmax; height: 34vmax; left: -12vmax; bottom: -16vmax; background: rgb(24 201 0 / .3); animation-delay: -6s; }
	.hero__blob--c { width: 22vmax; height: 22vmax; right: 18%; bottom: -8vmax; background: rgb(201 216 42 / .45); animation-delay: -12s; }
	@keyframes float {
		to { translate: 3vmax 2vmax; scale: 1.08; }
	}
	.hero__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
	.hero__eyebrow {
		display: inline-flex; align-items: center; gap: .8em;
		font: 600 .75rem/1 var(--font-en); letter-spacing: .18em; color: var(--ink-3); text-transform: uppercase;
		& span {
			padding: .55em .9em; border-radius: 999px; color: #fff; letter-spacing: .16em;
			background: var(--grad);
		}
	}
	.hero__title {
		margin-top: .6em;
		font-size: clamp(2rem, 7.4vw, 3.5rem); font-weight: 800; line-height: 1.28; letter-spacing: .01em;
		& span { display: block; }
		& em {
			font-style: normal; position: relative; z-index: 0; padding-inline: .05em;
			background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
		}
		& em::after {
			content: ""; position: absolute; z-index: -1; inset: auto -.05em .08em;
			height: .26em; border-radius: 4px; background: rgb(201 216 42 / .35);
		}
	}
	.hero__lead { max-width: 34em; margin-top: 1.4em; font-size: clamp(.98rem, 2.4vw, 1.125rem); color: var(--ink-2); }
	.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vw, 40px); }
	/* 特徴タグ: スマホは小さなピル、PCは右側に浮かぶカード */
	.hero__tags {
		display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 5vw, 48px);
		& li {
			display: inline-flex; align-items: center; gap: .45em;
			padding: .55em 1em; border-radius: 999px;
			background: rgb(255 255 255 / .8); box-shadow: var(--shadow-s);
			font-size: .875rem;
		}
		& strong { font-weight: 700; }
		& small { display: none; }
		& .icon { color: var(--brand-strong); }
	}
	@media (max-width: 599px) {
		.hero__actions .btn { flex: 1 1 100%; }
	}
	@media (min-width: 1000px) {
		.hero__inner {
			display: grid; align-items: center; gap: 56px;
			grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
		}
		.hero__visual {
			position: relative; isolation: isolate;
			&::before {
				content: ""; position: absolute; z-index: -1; inset: -12% -8%;
				border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
				background: var(--grad); opacity: .16; filter: blur(2px);
				animation: morph 14s var(--ease) infinite alternate;
			}
		}
		@keyframes morph {
			to { border-radius: 58% 42% 40% 60% / 45% 58% 42% 55%; rotate: 8deg; }
		}
		.hero__tags {
			display: grid; gap: 16px; margin: 0;
			& li {
				display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center;
				padding: 18px 22px; border-radius: 20px;
				background: rgb(255 255 255 / .82);
				-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
				box-shadow: var(--shadow); border: 1px solid rgb(255 255 255 / .9);
				animation: bob 6s var(--ease) infinite alternate;
				animation-delay: calc(var(--d) * -2s);
			}
			& li:nth-child(2) { margin-left: 40px; }
			& li:nth-child(3) { margin-left: 12px; }
			& strong { font-size: 1.0625rem; font-weight: 800; }
			& small { display: block; grid-column: 2; font-size: .8125rem; color: var(--ink-3); }
		}
		.hero__tag-icon {
			grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
			background: var(--grad); color: #fff;
			& .icon { color: #fff; width: 24px; height: 24px; }
		}
		@keyframes bob { to { translate: 0 -8px; } }
	}

	/* hero photo（スマホは本文の下に横長で、PCは右カラムに縦長で） */
	.hero__photo {
		position: relative; margin: clamp(28px, 6vw, 40px) 0 0;
		border-radius: var(--radius-l); overflow: hidden;
		aspect-ratio: 4 / 3; box-shadow: var(--shadow);
		& img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
		&::after {
			content: ""; position: absolute; inset: 0; pointer-events: none;
			background: linear-gradient(180deg, transparent 55%, rgb(10 30 20 / .35));
		}
	}
	@media (min-width: 1000px) {
		.hero__visual { padding-bottom: 24px; }
		.hero__photo {
			margin: 0 0 0 auto; width: min(100%, 420px); aspect-ratio: 3 / 4;
			border-radius: 32px 32px 32px 120px;
			& img { object-position: 60% 40%; }
		}
		.hero__visual .hero__tags {
			position: absolute; left: -48px; bottom: 0; width: 300px;
		}
		.hero__visual .hero__tags li:nth-child(2) { margin-left: 28px; }
		.hero__visual .hero__tags li:nth-child(3) { margin-left: 8px; }
	}

	/* steps */
	.steps {
		display: grid; gap: 16px; counter-reset: step;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	}
	.step {
		position: relative;
		padding: 28px 24px 24px; border-radius: var(--radius);
		background: #fff; box-shadow: var(--shadow-s); border: 1px solid var(--line);
		& p { margin-top: .5em; color: var(--ink-2); font-size: .9375rem; }
	}
	.step__img {
		width: 112px; height: 112px; margin: -8px 0 4px auto; float: right;
		@media (max-width: 599px) { width: 88px; height: 88px; }
	}
	.step__num {
		display: inline-block;
		font: 800 2rem/1 var(--font-en); letter-spacing: .02em;
		background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
	}
	.step__title { margin-top: .4em; font-size: 1.125rem; font-weight: 800; }
	.steps--compact { margin-block: 28px; }

	/* compare table */
	.compare-table {
		max-width: 880px; margin-inline: auto; overflow-x: auto;
		border-radius: var(--radius); box-shadow: var(--shadow-s); border: 1px solid var(--line); background: #fff;
		& table { width: 100%; font-size: .9375rem; table-layout: fixed; }
		& th, & td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
		& tbody tr:last-child > * { border-bottom: 0; }
		& thead th { font-size: 1rem; background: var(--bg-soft); }
		& thead th:first-child { width: 9em; }
		& tbody th { color: var(--ink-2); font-weight: 700; }
		@media (max-width: 599px) {
			& table { font-size: .8125rem; line-height: 1.6; }
			& th, & td { padding: 12px 10px; }
			& thead th:first-child { width: 5.6em; }
		}
		& .is-haken { background: var(--bg-tint); font-weight: 700; color: var(--brand-deep); }
		& thead .is-haken { background: var(--brand-strong); color: #fff; }
	}

	/* cards */
	.card-list {
		display: grid; gap: 12px;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	}
	.card { container-type: inline-size; }
	.card__link {
		position: relative; display: grid; gap: 4px; height: 100%;
		padding: 18px 48px 18px 20px; border-radius: var(--radius);
		background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s);
		color: var(--ink); text-decoration: none;
		transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
		&:hover { color: var(--ink); border-color: rgb(24 201 0 / .45); box-shadow: var(--shadow); transform: translateY(-2px); }
	}
	.card__title { font-weight: 800; line-height: 1.5; }
	.card__desc { font-size: .8125rem; color: var(--ink-3); line-height: 1.6; }
	@media (max-width: 599px) {
		.card-list { gap: 8px; }
		.card__link { padding: 14px 46px 14px 16px; gap: 2px; }
		.card__title { font-size: .9375rem; }
		.card__desc { font-size: .75rem; }
	}
	.card__arrow {
		position: absolute; right: 16px; top: 50%; translate: 0 -50%;
		width: 28px; height: 28px; padding: 6px; border-radius: 50%;
		background: var(--bg-tint); color: var(--brand-strong);
		transition: background-color .2s var(--ease), color .2s var(--ease), translate .2s var(--ease);
	}
	.card__link:hover .card__arrow { background: var(--brand-strong); color: #fff; translate: 3px -50%; }

	.guide-groups { display: grid; gap: clamp(40px, 6vw, 64px); }
	/* グループの見出しは写真の上に重ねる。PCは写真を左に置き、カードを右に2列 */
	.guide-group__visual {
		position: relative; margin: 0 0 16px; border-radius: var(--radius-l); overflow: hidden;
		aspect-ratio: 16 / 9; box-shadow: var(--shadow-s);
		& img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease-out); }
		&::after {
			content: ""; position: absolute; inset: 0;
			background: linear-gradient(180deg, transparent 35%, rgb(8 22 15 / .78));
		}
		& figcaption {
			position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; color: #fff;
		}
	}
	.guide-group:hover .guide-group__visual img { scale: 1.04; }
	.guide-group__title {
		display: flex; align-items: center; gap: .6em;
		font-size: 1.375rem; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / .3);
	}
	.guide-group__en {
		display: block; margin-top: 6px; font: 700 .6875rem/1 var(--font-en); letter-spacing: .22em;
		text-transform: uppercase; color: var(--lime);
	}
	@media (min-width: 1000px) {
		.guide-group { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
		.guide-group__visual {
			margin: 0; aspect-ratio: 3 / 4; position: sticky; top: calc(var(--header-h) + 24px);
			& figcaption { left: 24px; bottom: 24px; }
		}
		.guide-group .card-list { grid-template-columns: 1fr 1fr; }
	}
	.guide-group__icon {
		display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
		background: var(--grad); color: #fff;
	}

	/* area */
	.area-list {
		display: grid; gap: 12px;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	}
	/* エリアは写真カード。文字は写真の下側に白で重ねる */
	.area-card {
		position: relative; isolation: isolate; overflow: hidden;
		display: grid; align-content: end; gap: 4px; height: 100%; min-height: 200px;
		padding: 20px; border-radius: var(--radius);
		background: var(--ink); box-shadow: var(--shadow-s);
		color: #fff; text-decoration: none;
		transition: box-shadow .25s var(--ease), transform .25s var(--ease);
		&::before {
			content: ""; position: absolute; inset: 0; z-index: -1;
			background: linear-gradient(180deg, rgb(8 22 15 / .1) 15%, rgb(8 22 15 / .55) 50%, rgb(8 22 15 / .9));
		}
		&:hover { color: #fff; box-shadow: var(--shadow); transform: translateY(-3px); }
		&:hover .area-card__img { scale: 1.06; }
		@media (min-width: 1000px) { min-height: 260px; }
	}
	.area-card__img {
		position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
		transition: scale .8s var(--ease-out);
	}
	.area-card__name { display: flex; align-items: center; gap: .4em; font-size: 1.375rem; font-weight: 800; text-shadow: 0 2px 10px rgb(0 0 0 / .35); }
	.area-card__name .icon { color: var(--lime); }
	.area-card__desc { font-size: .8125rem; color: rgb(255 255 255 / .85); }

	.chip-row {
		margin-top: 24px; padding: 20px; border-radius: var(--radius);
		background: #fff; border: 1px dashed var(--line);
		& ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
	}
	.chip-row__label { display: flex; align-items: center; gap: .4em; margin-bottom: 12px; font-size: .875rem; font-weight: 700; color: var(--ink-2); }
	.chip {
		display: inline-block; padding: .45em 1em; border-radius: 999px;
		background: var(--bg-soft); color: var(--ink); font-size: .875rem; text-decoration: none;
		transition: background-color .2s var(--ease), color .2s var(--ease);
		&:hover { background: var(--brand-strong); color: #fff; }
	}

	/* kana grid */
	.kana-grid {
		display: grid; gap: 8px;
		grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
		max-width: 720px; margin-inline: auto;
		& a {
			display: grid; place-items: center; aspect-ratio: 1;
			border-radius: 12px; background: #fff; border: 1px solid var(--line);
			font-weight: 800; font-size: 1.125rem; color: var(--ink); text-decoration: none;
			transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
		}
		& a:hover, & a[aria-current] { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; transform: translateY(-2px); }
	}
	.kana-grid--sm { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; max-width: none;
		& a { border-radius: 9px; font-size: .9375rem; }
	}
	.kana-grid--row {
		display: flex; gap: 6px; overflow-x: auto; max-width: none; padding-bottom: 6px;
		scroll-snap-type: x proximity; scrollbar-width: thin;
		& a { flex: 0 0 40px; aspect-ratio: 1; scroll-snap-align: start; font-size: 1rem; border-radius: 10px; }
	}
	.glossary-nav { max-width: var(--wrap); margin-inline: auto; padding: 16px var(--gutter) 0; }

	/* related */
	.related { background: var(--bg-soft); border-top: 1px solid var(--line); }
	.related__inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(48px, 8vw, 80px) var(--gutter); }

	/* sitemap */
	.sitemap {
		display: grid; gap: 32px 40px;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	}
	.sitemap__title {
		display: flex; align-items: center; gap: .5em;
		margin-bottom: 14px; padding-bottom: 10px;
		font-size: .9375rem; font-weight: 800; letter-spacing: .04em;
		border-bottom: 1px solid currentColor;
		& .icon { opacity: .8; }
		& a { color: inherit; }
	}
	.sitemap ul { display: grid; gap: 8px; font-size: .875rem; }
	.sitemap__subtitle { margin: 18px 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; opacity: .7; }
	.sitemap__more { font-size: .8125rem !important; }
	.sitemap__desc { display: block; font-size: .8125rem; color: var(--ink-3); line-height: 1.6; }

	.sitemap--footer {
		@media (max-width: 599px) {
			grid-template-columns: 1fr 1fr; gap: 28px 20px;
			.sitemap__col--glossary { grid-column: 1 / -1; }
			ul { font-size: .8125rem; gap: 6px; }
			.sitemap__title { font-size: .875rem; }
		}
		.sitemap__title { color: #fff; border-bottom-color: rgb(255 255 255 / .18); }
		.kana-grid a { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .12); color: #fff; }
		.kana-grid a:hover { background: var(--brand); border-color: var(--brand); text-decoration: none; }
	}
	.sitemap--page {
		gap: 28px;
		.sitemap__col { padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); }
		.sitemap__title { font-size: 1.0625rem; color: var(--ink); border-bottom-color: var(--line); }
		.sitemap__title .icon { color: var(--brand-strong); }
		ul { gap: 12px; font-size: .9375rem; }
		ul a { font-weight: 700; }
	}
	.notfound__lead { margin-bottom: 32px; color: var(--ink-2); }

	/* consult page */
	.consult__lead { font-size: 1.0625rem; }
	.consult__cta { display: grid; justify-items: center; margin-top: 8px; }
	.consult__faq { margin-top: 32px; padding: 16px 20px; border-radius: var(--radius-s); background: var(--bg-soft); font-size: .9375rem; }

	/* drawer */
	.drawer {
		position: fixed; inset: 0 0 0 auto;
		width: min(440px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh;
		margin: 0; padding: 0; border: 0;
		background: transparent; color: var(--ink);
		overflow: visible;
		translate: 100% 0;
		transition:
			translate .45s var(--ease-out),
			overlay .45s var(--ease-out) allow-discrete,
			display .45s var(--ease-out) allow-discrete;
		&[open] { translate: 0 0; }
		&::backdrop {
			background: rgb(10 20 15 / 0);
			-webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
			transition:
				background-color .45s var(--ease),
				backdrop-filter .45s var(--ease),
				overlay .45s allow-discrete,
				display .45s allow-discrete;
		}
		&[open]::backdrop { background: rgb(10 20 15 / .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
	}
	@starting-style {
		.drawer[open] { translate: 100% 0; }
		.drawer[open]::backdrop { background: rgb(10 20 15 / 0); backdrop-filter: blur(0); }
	}
	.drawer__panel {
		display: flex; flex-direction: column; height: 100%;
		background: #fff; box-shadow: -20px 0 60px rgb(10 20 15 / .18);
		border-radius: 24px 0 0 24px;
		overflow: hidden;
		@media (max-width: 480px) { border-radius: 0; }
	}
	.drawer__head {
		display: flex; align-items: center; justify-content: space-between;
		height: var(--header-h); padding-inline: 20px 12px; flex: none;
		border-bottom: 1px solid var(--line);
	}
	.drawer__title {
		font: 800 .8125rem/1 var(--font-en); letter-spacing: .28em;
		background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
	}
	.drawer__close {
		display: grid; place-items: center; width: 48px; height: 48px;
		border: 0; border-radius: 14px; background: var(--bg-soft); color: var(--ink);
		transition: background-color .2s var(--ease), rotate .3s var(--ease);
		&:hover { background: var(--bg-tint); rotate: 90deg; }
		& .icon { width: 22px; height: 22px; }
	}
	.drawer__nav {
		flex: 1; overflow-y: auto; overscroll-behavior: contain;
		padding: 12px 16px 24px;
	}
	.drawer__home {
		display: flex; align-items: center; gap: .6em;
		padding: 14px 12px; border-radius: 12px;
		font-weight: 800; color: var(--ink); text-decoration: none;
		&:hover { background: var(--bg-soft); color: var(--brand-strong); }
		& .icon { color: var(--brand-strong); }
	}
	.drawer__group {
		border-top: 1px solid var(--line);
		& summary {
			display: flex; align-items: center; gap: 12px;
			padding: 14px 12px; border-radius: 12px; cursor: pointer;
			list-style: none;
			&::-webkit-details-marker { display: none; }
			&:hover { background: var(--bg-soft); }
		}
		&::details-content {
			block-size: 0; overflow: clip;
			transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
		}
		&[open]::details-content { block-size: auto; }
		& ul { display: grid; gap: 2px; padding: 0 0 12px 52px; }
		& ul a {
			display: block; padding: 9px 12px; border-radius: 10px;
			color: var(--ink-2); font-size: .9375rem; text-decoration: none;
			&:hover { background: var(--bg-soft); color: var(--brand-strong); }
			&[aria-current] { color: var(--brand-strong); font-weight: 700; background: var(--bg-tint); }
		}
		& .kana-grid { padding: 4px 0 8px 52px; }
	}
	.drawer__group-icon {
		display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
		background: var(--bg-tint); color: var(--brand-strong);
		transition: background-color .25s var(--ease), color .25s var(--ease);
	}
	.drawer__group[open] .drawer__group-icon { background: var(--grad); color: #fff; }
	.drawer__group-label {
		flex: 1; display: grid; font-weight: 800; line-height: 1.35;
		& small { font: 600 .6875rem/1.4 var(--font-en); letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; }
	}
	.drawer__chev { color: var(--ink-3); transition: rotate .3s var(--ease); }
	.drawer__group[open] .drawer__chev { rotate: 90deg; }
	.drawer__more {
		display: inline-flex; align-items: center; gap: .3em; margin: 0 0 14px 52px;
		font-size: .875rem; font-weight: 700; text-decoration: none;
		& .icon { width: 1em; }
	}
	.drawer__sub {
		display: flex; flex-wrap: wrap; gap: 6px 18px;
		margin-top: 8px; padding: 18px 12px 0; border-top: 1px solid var(--line);
		& a { font-size: .8125rem; color: var(--ink-2); text-decoration: none; }
		& a:hover { color: var(--brand-strong); text-decoration: underline; }
	}
	.drawer__cta {
		flex: none; padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--line); background: var(--bg-soft);
		& p { margin-bottom: 10px; font-size: .8125rem; color: var(--ink-2); text-align: center; }
	}
	/* 開いたときに中身を順に浮かび上がらせる */
	.drawer[open] :is(.drawer__home, .drawer__group, .drawer__sub, .drawer__cta) {
		animation: drawer-in .5s var(--ease-out) both;
		animation-delay: calc(var(--i, 0) * 45ms + 120ms);
	}
	@keyframes drawer-in {
		from { opacity: 0; translate: 16px 0; }
	}
}

/* スクロールで要素がふわっと出る（対応ブラウザのみ） */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.card, .step, .area-card, .compare-table, .guide-group__title {
			animation: reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
		@keyframes reveal {
			from { opacity: 0; translate: 0 18px; }
		}
	}
}

/* ---------- legacy: 旧テーマ時代の本文 ---------- */
@layer legacy {
	.legacy {
		font-size: 1rem;

		& > * + *, & .wrap > * + * { margin-top: 1.1em; }
		& .container, & .wrap { display: block; }

		& h2 {
			margin-top: 2.4em; margin-bottom: .6em;
			font-size: clamp(1.375rem, 3.6vw, 1.75rem); font-weight: 800;
		}
		& h3 {
			display: flex; align-items: center; gap: .5em;
			margin-top: 2.4em; margin-bottom: .8em; padding: .55em 0 .55em .9em;
			font-size: clamp(1.1875rem, 3vw, 1.375rem); font-weight: 800;
			border-left: 4px solid; border-image: var(--grad) 1;
			background: linear-gradient(90deg, var(--bg-soft), transparent 80%);
		}
		& h3 img { width: auto; height: 1.9em; flex: none; border-radius: 0; }
		& h3.center { justify-content: center; border-left: 0; padding-left: 0; background: none; }
		& h4 { margin-top: 2em; margin-bottom: .5em; font-size: 1.0625rem; font-weight: 800; color: var(--brand-deep); }
		& h5 { margin-top: 1.6em; font-size: 1rem; font-weight: 800; }
		& .wrap > h3:first-child, & .wrap > h4:first-child { margin-top: 0; }

		& p { margin-block: 0 1.1em; }
		& ul:not([class]), & ol:not([class]) { padding-left: 1.4em; margin-bottom: 1.2em; }
		& ul:not([class]) li::marker { color: var(--brand); }
		& li + li { margin-top: .35em; }
		& hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); }

		& img { border-radius: var(--radius-s); }
		& p > img, & div > img, & a > img { margin-inline: auto; }
		& .aligncenter { margin-inline: auto; }
		& iframe { max-width: 100%; border-radius: var(--radius-s); }

		/* 文字装飾 */
		& .intro { font-size: 1.0625rem; color: var(--ink-2); padding: 1.1em 1.3em; border-radius: var(--radius); background: var(--bg-soft); }
		& .green { color: var(--brand-strong); }
		& .red, & .fc-red { color: var(--red); }
		& .fc-blue { color: #1f62c8; }
		& .fc-wh { color: #fff; }
		& .bold { font-weight: 700; }
		& .center { text-align: center; }
		& .text-right { text-align: right; }
		& .large { font-size: 1.25em; }
		& .fs-24 { font-size: 1.5rem; }
		& .under-line { background: linear-gradient(transparent 62%, rgb(201 216 42 / .5) 62%); }
		& .bg-yellow { background: #fff6c8; padding-inline: .2em; }
		& .bg-green, & .l-green_back { background: var(--bg-tint); padding: .2em .4em; border-radius: 6px; }
		& .bg-red { background: #fde8e8; padding: .2em .4em; border-radius: 6px; }
		& .caution, & .border { padding: 1em 1.2em; border: 1px solid var(--line); border-radius: var(--radius-s); }
		& .fukidasi {
			position: relative; padding: 1em 1.2em; border-radius: var(--radius); background: var(--bg-tint);
		}

		/* 表 */
		& .table-scroll { overflow-x: auto; margin-block: 1.2em; border-radius: var(--radius-s); border: 1px solid var(--line); }
		& table { width: 100%; font-size: .9375rem; background: #fff; }
		& th, & td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
		& tr:last-child > * { border-bottom: 0; }
		& th { width: 32%; background: var(--bg-soft); font-weight: 700; white-space: nowrap; }
		& .normal-tbl td:first-child { width: 30%; background: var(--bg-soft); font-weight: 700; }

		/* 「〜に戻る」などのボタン */
		& .btn_green {
			display: flex; width: fit-content; align-items: center; gap: .4em;
			margin: 1.6em auto 0; padding: .7em 1.6em; border-radius: 999px;
			background: #fff; color: var(--brand-strong); font-weight: 700; text-decoration: none;
			box-shadow: inset 0 0 0 1.5px var(--brand);
			&::before { content: "‹"; font-size: 1.2em; line-height: 1; }
			&:hover { background: var(--brand-strong); color: #fff; }
		}

		/* 収入例・紹介の2カラム */
		& .col2_flex, & .side { display: grid; gap: 16px; align-items: start; margin-block: 1em; }
		@media (min-width: 640px) {
			& .col2_flex { grid-template-columns: minmax(0, 220px) 1fr; }
		}
		& .text_area { margin: 0; }
		& .col2_flex > img, & .img_area { max-width: 220px; margin-inline: auto; }
		& .side_text { margin-bottom: 1em; }
		& .side_img { margin-inline: auto; }

		/* 人気店舗の例 */
		& .wrap > div:has(> .table-scroll .shoplist-tbl) {
			margin-top: 2em; padding: 20px; border-radius: var(--radius);
			background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s);
			& > img { max-height: 280px; width: 100%; object-fit: cover; }
		}

		/* 派遣エリア */
		& .haken-map { display: grid; gap: 16px; }
		& .haken-map ul {
			display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px;
			list-style: none; padding: 0; margin: 0;
		}
		& .haken-map li { margin: 0; }
		& .haken-map li a {
			display: block; padding: 14px; border-radius: var(--radius-s); text-align: center;
			background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s);
			font-weight: 800; color: var(--ink); text-decoration: none; line-height: 1.5;
			& span { display: none; } /* 旧店舗数（更新されていない数字）は出さない */
			&:hover { border-color: var(--brand); color: var(--brand-strong); }
		}
		& .haken-map-list ul {
			display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0;
		}
		& .haken-map-list li { margin: 0; }
		& .haken-map-list li p {
			margin: 0; padding: .35em .9em; border-radius: 999px; background: var(--bg-soft); font-size: .875rem;
		}
		& #haken-area > .wrap > a, & #haken-area .wrap > a { display: block; margin-top: 12px; }

		/* 用語辞典 */
		& .glossary_table { background: none; }
		& .glossary_table td { padding: 4px; border: 0; width: auto; }
		& .glossary_table a {
			display: grid; place-items: center; min-height: 44px; border-radius: 10px;
			background: #fff; border: 1px solid var(--line); font-weight: 800; color: var(--ink); text-decoration: none;
			&:hover { background: var(--brand-strong); color: #fff; }
		}
		& .table-scroll:has(.glossary_table) { border: 0; }
		& dl:not([class]) > dt {
			margin-top: 1.4em; padding-top: 1.2em; border-top: 1px solid var(--line);
			font-size: 1.0625rem;
		}
		& dl:not([class]) > dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
		& dl:not([class]) > dd { margin-top: .3em; color: var(--ink-2); }

		/* よくある質問・コツ（JSで開閉。JSが無ければ全部表示） */
		& .Accordion { cursor: pointer; position: relative; }
		& h3.Accordion {
			margin-top: 1em; padding-right: 2.6em;
			&::after {
				content: ""; position: absolute; right: 1em; top: 50%; width: 9px; height: 9px;
				border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
				translate: 0 -70%; rotate: 45deg; transition: rotate .25s var(--ease);
			}
			&[aria-expanded="true"]::after { rotate: 225deg; translate: 0 -30%; }
		}
		& .Accordion_cont { padding: .2em 0 .6em .9em; }
		& .Accordion_cont[hidden] { display: none; }
		& .Accordion_cont:not([hidden]) { animation: acc-open .35s var(--ease-out); }
		@keyframes acc-open { from { opacity: 0; translate: 0 -6px; } }

		& .table_top, & dl.table {
			display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin: 0;
		}
		& .table_top { margin-bottom: 8px; }
		& .table_top dt { visibility: hidden; }
		& .table_top dd { padding: .5em; border-radius: 10px; text-align: center; font-weight: 800; background: var(--bg-soft); }
		& .table_top dd:nth-of-type(1) { background: var(--brand-strong); color: #fff; }
		& #kotsu > .wrap > dl:not([class]) > dt { margin: 0; padding: 0; border: 0; }
		& #kotsu > .wrap > dl:not([class]) > dt + dd { margin-bottom: 8px; }
		& dt.Accordion { margin-top: 8px; }
		& dl.table > dt {
			padding: 14px 32px 14px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line);
			font-weight: 800; position: relative;
		}
		& dl.table > dd { padding: 12px; border-radius: 12px; font-size: .875rem; background: var(--bg-soft); margin: 0; }
		& dl.table > dd:nth-of-type(1) { background: var(--bg-tint); }
		& dl.table > dd > p { margin: 0 0 .2em; font-size: 1.375rem; font-weight: 800; line-height: 1; }
		& dl.table > dd:nth-of-type(1) > p { color: var(--brand-strong); }
		& dl.table > dd:nth-of-type(2) > p { color: var(--red); }
		& .triangle {
			position: absolute; right: 12px; top: 50%; translate: 0 -50%; margin: 0;
			font-size: .75rem; color: var(--ink-3); transition: rotate .25s var(--ease);
		}
		& dt.Accordion[aria-expanded="true"] .triangle { rotate: 180deg; }
		& .table_cont { padding: 16px 18px; border-radius: 12px; border: 1px dashed var(--line); margin-top: 8px; }
		& .table_cont h3 { margin: 0 0 .6em; padding: 0; font-size: 1.0625rem; }
		@media (max-width: 639px) {
			& .table_top, & dl.table { grid-template-columns: 1fr 1fr; }
			& .table_top dt { display: none; }
			& dl.table > dt { grid-column: 1 / -1; }
		}
	}
}

/* ---------- utilities ---------- */
@layer utilities {
	.u-visually-hidden {
		position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.u-sp { display: inline; }
	@media (min-width: 600px) { .u-sp { display: none; } }
	/* 狭い画面ではヘッダーのLINEボタンをアイコンだけにする（読み上げ用の文字は残す） */
	@media (max-width: 379px) {
		.site-header .btn--line span {
			position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
		}
		.site-header .btn--line { padding-inline: .7em; }
	}
}