/*
 * Tobiso main stylesheet
 * - 食べログを参考にしたポータルUI
 * - レスポンシブ: モバイルファースト → タブレット → デスクトップ
 * - WCAG 2.2 AA: focus-visible, contrast, semantic tokens
 */

/* ----------------------------------------
 * 1. Design tokens (CSS custom properties)
 *    Tabelog タイポ/スペーシングを尊重しつつ、
 *    可読性・コントラストを担保した surface 色に拡張
 * ---------------------------------------- */
:root {
	/* Typography stack */
	--font-primary: メイリオ, Meiryo, "Hiragino Sans", "ヒラギノ角ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans JP", "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Type scale (per Tabelog tokens) */
	--font-size-xs:  9px;
	--font-size-sm:  10px;
	--font-size-md:  10.5px;
	--font-size-lg:  11px;
	--font-size-xl:  12px;
	--font-size-2xl: 13px;
	--font-size-3xl: 14px;
	--font-size-4xl: 15px;
	--font-size-base: 14px; /* mobile-readable base for contractor portal */
	--font-size-h1:   24px;
	--font-size-h2:   20px;
	--font-size-h3:   17px;

	--font-weight-base: 400;
	--font-weight-bold: 700;
	--line-height-base: 1.6;

	/* Spacing scale (per Tabelog) */
	--space-1: 2px;
	--space-2: 3px;
	--space-3: 4px;
	--space-4: 5px;
	--space-5: 6px;
	--space-6: 7px;
	--space-7: 9px;
	--space-8: 10px;
	--space-9: 14px;
	--space-10: 20px;
	--space-11: 28px;
	--space-12: 40px;
	--space-13: 64px;

	/* Color tokens */
	--c-text-primary:   #2d2d33;
	--c-text-secondary: #595960;
	--c-text-tertiary:  #ffffff;
	--c-text-muted:     #767680;
	--c-text-link:      #0066cc;
	--c-text-link-hover:#004f9e;

	/* Brand: 鳶装 = 職人 + 信頼。Tabelog風の暖色と建設業の青で構成 */
	--c-brand:        #e60044; /* 鳶装メイン（食べログ系のアクセント） */
	--c-brand-dark:   #b80037;
	--c-brand-light:  #fff0f3;
	--c-accent:       #0066cc; /* 信頼の青 */
	--c-accent-dark:  #004f9e;
	--c-success:      #1f9c4f;
	--c-warning:      #e69500;
	--c-danger:       #c8102e;

	--c-surface-base:  #ffffff;
	--c-surface-alt:   #f7f7f8;
	--c-surface-muted: #ececef;
	--c-surface-dark:  #13131e;
	--c-surface-overlay: rgba(0,0,0,.55);

	--c-border:       #d2d2d2;
	--c-border-light: #ececef;
	--c-border-focus: #0066cc;

	/* Radius */
	--radius-sm: 3px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-xl: 14px;
	--radius-pill: 999px;

	/* Shadow */
	--shadow-sm: 0 1px 2px rgba(0,0,0,.06);
	--shadow-md: 0 2px 8px rgba(0,0,0,.08);
	--shadow-lg: 0 8px 32px rgba(0,0,0,.12);

	/* Motion */
	--duration-instant: 200ms;
	--duration-quick:   150ms;
	--ease: cubic-bezier(.2,.6,.2,1);

	/* Layout */
	--container: 1180px;
	--container-narrow: 760px;
	--header-h-mobile: 56px;
	--header-h-desktop: 72px;
}

/* ----------------------------------------
 * 2. Reset & base
 * ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-base);
	line-height: var(--line-height-base);
	color: var(--c-text-primary);
	background: var(--c-surface-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--c-text-link); text-decoration: none; transition: color var(--duration-instant) var(--ease); }
a:hover { color: var(--c-text-link-hover); text-decoration: underline; }
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--c-border-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 var(--space-9); color: var(--c-text-primary); font-weight: var(--font-weight-bold); }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
p { margin: 0 0 var(--space-9); }
ul, ol { margin: 0 0 var(--space-9); padding-left: 1.4em; }
table { border-collapse: collapse; width: 100%; }

/* Skip link */
.skip-link {
	position: absolute; top: -200px; left: 0;
	background: var(--c-text-primary); color: #fff;
	padding: var(--space-9) var(--space-10);
	z-index: 1000;
}
.skip-link:focus-visible { top: 0; }

/* ----------------------------------------
 * 3. Layout primitives
 * ---------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--space-9);
}
.container--narrow { max-width: var(--container-narrow); }
.container--with-aside {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-11);
	padding-top: var(--space-11);
	padding-bottom: var(--space-12);
}
@media (min-width: 960px) {
	.container--with-aside {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

/* ----------------------------------------
 * 4. Header
 * ---------------------------------------- */
.site-header {
	background: var(--c-surface-base);
	border-bottom: 1px solid var(--c-border-light);
	position: sticky; top: 0; z-index: 50;
	box-shadow: var(--shadow-sm);
}
.site-header__bar { background: var(--c-surface-base); }
.site-header__row {
	display: flex;
	align-items: center;
	gap: var(--space-9);
	height: var(--header-h-mobile);
}
@media (min-width: 960px) {
	.site-header__row { height: var(--header-h-desktop); }
}
.site-header__brand { flex-shrink: 0; }
.brand {
	display: inline-flex; align-items: center; gap: var(--space-7);
	color: var(--c-text-primary);
	font-weight: var(--font-weight-bold);
}
.brand:hover { text-decoration: none; }
.brand__mark {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 36px; height: 36px;
	background: var(--c-brand);
	color: #fff;
	border-radius: var(--radius-md);
	font-size: 18px;
	font-weight: var(--font-weight-bold);
}
.brand__name {
	display: flex; flex-direction: column;
	font-size: 17px;
	line-height: 1.1;
}
.brand__name small {
	font-size: var(--font-size-sm);
	color: var(--c-text-muted);
	font-weight: 400;
}

.site-header__burger {
	margin-left: auto;
	width: 40px; height: 40px;
	background: transparent; border: 0;
	display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.site-header__burger span {
	display: block; width: 22px; height: 2px;
	background: var(--c-text-primary);
	border-radius: 2px;
	transition: transform var(--duration-instant) var(--ease), opacity var(--duration-instant) var(--ease);
}
.site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 960px) { .site-header__burger { display: none; } }

.site-nav { display: none; }
.site-nav__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; gap: var(--space-10);
}
.site-nav__list a {
	color: var(--c-text-primary);
	font-weight: 500;
}
.site-nav__list a:hover { color: var(--c-brand); text-decoration: none; }
@media (min-width: 960px) { .site-nav { display: block; margin-left: auto; } }

.site-header__cta { display: none; margin-left: var(--space-9); }
@media (min-width: 1024px) { .site-header__cta { display: block; } }

.site-header__searchbar {
	background: var(--c-surface-alt);
	border-top: 1px solid var(--c-border-light);
	padding: var(--space-8) 0;
}

/* ----------------------------------------
 * 5. Mobile nav (drawer)
 * ---------------------------------------- */
.mobile-nav {
	position: fixed;
	top: var(--header-h-mobile); left: 0; right: 0; bottom: 0;
	background: var(--c-surface-base);
	padding: var(--space-10);
	overflow-y: auto;
	z-index: 49;
	transform: translateX(-100%);
	transition: transform var(--duration-instant) var(--ease);
}
.mobile-nav[hidden] { display: block; transform: translateX(-100%); pointer-events: none; }
.mobile-nav.is-open { transform: translateX(0); pointer-events: auto; }
.mobile-nav__list { list-style: none; padding: 0; margin: 0 0 var(--space-10); }
.mobile-nav__list li { border-bottom: 1px solid var(--c-border-light); }
.mobile-nav__list a {
	display: block; padding: var(--space-9) 0;
	color: var(--c-text-primary); font-weight: 500;
}
.mobile-nav__cta { display: grid; gap: var(--space-8); }
@media (min-width: 960px) { .mobile-nav { display: none !important; } }

/* ----------------------------------------
 * 6. Buttons
 * ---------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--space-6);
	padding: 10px 18px;
	border-radius: var(--radius-md);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	border: 1px solid transparent;
	background: var(--c-surface-muted);
	color: var(--c-text-primary);
	text-decoration: none;
	transition: background var(--duration-instant) var(--ease), color var(--duration-instant) var(--ease), transform var(--duration-instant) var(--ease), box-shadow var(--duration-instant) var(--ease);
	min-height: 44px; /* Touch target */
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--c-brand); color: #fff; }
.btn--primary:hover { background: var(--c-brand-dark); color: #fff; box-shadow: var(--shadow-md); }

.btn--ghost { background: var(--c-surface-base); color: var(--c-text-primary); border-color: var(--c-border); }
.btn--ghost:hover { background: var(--c-surface-alt); }

.btn--accent { background: var(--c-accent); color: #fff; }
.btn--accent:hover { background: var(--c-accent-dark); color: #fff; }

.btn--sm { padding: 6px 12px; min-height: 36px; font-size: var(--font-size-xl); }
.btn--lg { padding: 14px 24px; min-height: 52px; font-size: var(--font-size-3xl); }
.btn--block { display: flex; width: 100%; }

/* ----------------------------------------
 * 7. Hero
 * ---------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero__bg {
	position: absolute; inset: 0;
	background:
		linear-gradient(135deg, rgba(230,0,68,.92) 0%, rgba(184,0,55,.92) 60%, rgba(19,19,30,.85) 100%),
		url('../img/hero-bg.svg') center/cover no-repeat;
	z-index: 0;
}
.hero__inner {
	position: relative; z-index: 1;
	padding: var(--space-12) 0 var(--space-13);
	color: #fff;
}
.hero__eyebrow {
	display: inline-block;
	background: rgba(255,255,255,.15);
	padding: var(--space-5) var(--space-9);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-9);
}
.hero__title {
	color: #fff;
	font-size: clamp(22px, 5vw, 38px);
	line-height: 1.3;
	margin: 0 0 var(--space-9);
}
.hero__title .hero__eyebrow { display: block; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
.hero__lead {
	color: rgba(255,255,255,.92);
	font-size: var(--font-size-3xl);
	margin-bottom: var(--space-11);
}

.hero-search {
	background: #fff;
	border-radius: var(--radius-lg);
	padding: var(--space-10);
	box-shadow: var(--shadow-lg);
	color: var(--c-text-primary);
}
.hero-search__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
}
@media (min-width: 720px) {
	.hero-search__row {
		grid-template-columns: 1fr 1fr 2fr auto;
		align-items: end;
	}
}
.hero-search__field { display: flex; flex-direction: column; gap: var(--space-5); }
.hero-search__label {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--c-text-secondary);
}
.hero-search input[type="search"],
.hero-search select {
	width: 100%;
	height: 48px;
	padding: 0 var(--space-9);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	font-size: var(--font-size-3xl);
	background: var(--c-surface-base);
	color: var(--c-text-primary);
}
.hero-search input[type="search"]:focus-visible,
.hero-search select:focus-visible {
	border-color: var(--c-border-focus);
	box-shadow: 0 0 0 3px rgba(0,102,204,.2);
}
.hero-search__submit { min-height: 48px; }

.hero__chips {
	list-style: none; padding: 0; margin: var(--space-10) 0 0;
	display: flex; flex-wrap: wrap; gap: var(--space-7);
}
.hero__chips a {
	display: inline-block;
	background: rgba(255,255,255,.15);
	color: #fff;
	padding: var(--space-6) var(--space-9);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-2xl);
	border: 1px solid rgba(255,255,255,.3);
}
.hero__chips a:hover { background: rgba(255,255,255,.25); text-decoration: none; }

/* ----------------------------------------
 * 8. Sections
 * ---------------------------------------- */
.section { padding: var(--space-12) 0; }
.section + .section { border-top: 1px solid var(--c-border-light); }
.section__title {
	font-size: clamp(20px, 3vw, 26px);
	margin-bottom: var(--space-7);
}
.section__lead { color: var(--c-text-secondary); margin-bottom: var(--space-11); }

/* Region grid */
.region-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--space-10);
}
@media (min-width: 600px) { .region-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .region-grid { grid-template-columns: repeat(3, 1fr); } }
.region {
	background: var(--c-surface-alt);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-10);
}
.region__title {
	font-size: var(--font-size-3xl);
	color: var(--c-brand-dark);
	border-bottom: 2px solid var(--c-border-light);
	padding-bottom: var(--space-7);
	margin-bottom: var(--space-9);
}
.region__list {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-9);
}
.region__list a { color: var(--c-text-primary); font-size: var(--font-size-2xl); }
.region__list a:hover { color: var(--c-brand); }
.region__list small { color: var(--c-text-muted); font-size: var(--font-size-xl); }

/* ----------------------------------------
 * 9. Cards (contractor / column)
 * ---------------------------------------- */
.cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
}
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cards--list { grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards--list { grid-template-columns: 1fr; } }

.card {
	display: flex; flex-direction: column;
	background: var(--c-surface-base);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--duration-instant) var(--ease), transform var(--duration-instant) var(--ease);
}
.cards--list .card { flex-direction: column; }
@media (min-width: 720px) { .cards--list .card { flex-direction: row; } }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__media {
	display: block;
	background: var(--c-surface-muted);
	aspect-ratio: 16/10;
	overflow: hidden;
	position: relative;
}
@media (min-width: 720px) {
	.cards--list .card__media { width: 280px; flex-shrink: 0; aspect-ratio: 4/3; }
}
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-instant) var(--ease); }
.card:hover .card__img { transform: scale(1.04); }
.card__media-fallback {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--c-text-muted); font-size: var(--font-size-2xl);
}
.card__body {
	display: flex; flex-direction: column;
	padding: var(--space-10);
	flex: 1;
}
.card__head { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-7); }
.card__title { font-size: var(--font-size-h3); margin: 0; }
.card__title a { color: var(--c-text-primary); }
.card__title a:hover { color: var(--c-brand); text-decoration: none; }
.card__rating { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.card__reviews { color: var(--c-text-muted); font-size: var(--font-size-xl); }
.card__meta { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0 0 var(--space-7); }
.card__excerpt { color: var(--c-text-secondary); font-size: var(--font-size-2xl); margin: 0 0 var(--space-9); }
.card__facts { margin: 0 0 var(--space-9); padding: 0; font-size: var(--font-size-2xl); }
.card__facts > div { display: flex; gap: var(--space-7); border-top: 1px dashed var(--c-border-light); padding: var(--space-6) 0; }
.card__facts > div:last-child { border-bottom: 1px dashed var(--c-border-light); }
.card__facts dt { color: var(--c-text-muted); width: 80px; flex-shrink: 0; }
.card__facts dd { margin: 0; color: var(--c-text-primary); }
.card__foot { display: flex; gap: var(--space-7); flex-wrap: wrap; margin-top: auto; }

/* Stars */
.stars { display: inline-flex; align-items: center; gap: 2px; }
.star { color: var(--c-warning); font-size: 16px; }
.star--empty { color: var(--c-border); }
.star--half { position: relative; color: var(--c-border); }
.star--half::before {
	content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden;
	color: var(--c-warning);
}
.stars__num { margin-left: var(--space-5); color: var(--c-text-secondary); font-weight: 700; font-size: var(--font-size-2xl); }

/* Badges */
.badge {
	display: inline-block;
	padding: var(--space-3) var(--space-7);
	border-radius: var(--radius-pill);
	background: var(--c-surface-muted);
	color: var(--c-text-secondary);
	font-size: var(--font-size-xl);
	border: 1px solid transparent;
	font-weight: 500;
}
.badge--area { background: var(--c-brand-light); color: var(--c-brand-dark); border-color: var(--c-brand-light); }
.badge--ghost { background: transparent; border-color: var(--c-border); }
a.badge:hover { text-decoration: none; background: var(--c-surface-alt); }

/* ----------------------------------------
 * 10. Archive / search
 * ---------------------------------------- */
.archive { padding: var(--space-11) 0 var(--space-12); }
.archive__head { margin-bottom: var(--space-11); }
.archive__title { font-size: clamp(22px, 4vw, 30px); margin-bottom: var(--space-7); }
.archive__lead { color: var(--c-text-secondary); margin-bottom: var(--space-7); }
.archive__count { color: var(--c-text-secondary); font-size: var(--font-size-2xl); }
.archive__count strong { color: var(--c-brand); font-size: var(--font-size-h3); }

.archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-11);
}
@media (min-width: 960px) {
	.archive__grid { grid-template-columns: 280px minmax(0, 1fr); }
}

.archive__aside { position: relative; }
.filter-toggle {
	width: 100%;
	background: var(--c-surface-alt);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	padding: var(--space-9);
	font-size: var(--font-size-3xl);
	font-weight: 700;
	color: var(--c-text-primary);
	margin-bottom: var(--space-9);
}
.filter-toggle::after { content: "▼"; margin-left: var(--space-7); font-size: var(--font-size-xl); }
.filter-toggle[aria-expanded="true"]::after { content: "▲"; }
.filter-panel { display: none; }
.filter-panel.is-open { display: block; }
@media (min-width: 960px) {
	.filter-toggle { display: none; }
	.filter-panel { display: block; position: sticky; top: calc(var(--header-h-desktop) + var(--space-9)); }
}

.filter {
	background: var(--c-surface-base);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-10);
}
.filter__title { font-size: var(--font-size-h3); margin-bottom: var(--space-9); }
.filter__group { margin-bottom: var(--space-10); }
.filter__label { display: block; font-size: var(--font-size-xl); font-weight: 700; color: var(--c-text-secondary); margin-bottom: var(--space-6); }
.filter__group input[type="search"],
.filter__group select {
	width: 100%; height: 40px; padding: 0 var(--space-9);
	border: 1px solid var(--c-border); border-radius: var(--radius-md);
	font-size: var(--font-size-2xl); background: var(--c-surface-base);
}
.filter__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-5); }
.chip {
	display: inline-flex; align-items: center;
	padding: var(--space-5) var(--space-8);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-pill);
	background: var(--c-surface-base);
	font-size: var(--font-size-xl);
	cursor: pointer;
	transition: background var(--duration-instant) var(--ease), border-color var(--duration-instant) var(--ease);
}
.chip:hover { background: var(--c-surface-alt); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.filter__actions { margin-top: var(--space-10); }
.filter__reset { display: block; text-align: center; margin-top: var(--space-7); font-size: var(--font-size-xl); color: var(--c-text-muted); }

/* ----------------------------------------
 * 11. Single contractor
 * ---------------------------------------- */
.single-contractor { padding-bottom: var(--space-12); }
.single-hero {
	position: relative;
	background: var(--c-surface-dark);
	color: #fff;
	overflow: hidden;
}
.single-hero__media {
	position: absolute; inset: 0;
	opacity: .35;
}
.single-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.single-hero__inner { position: relative; padding: var(--space-12) 0; }
.single-hero__breadcrumbs { color: rgba(255,255,255,.8); font-size: var(--font-size-xl); margin-bottom: var(--space-7); }
.single-hero__breadcrumbs a { color: rgba(255,255,255,.95); }
.single-hero__title { color: #fff; font-size: clamp(24px, 4vw, 34px); margin-bottom: var(--space-7); }
.single-hero__rating { display: flex; align-items: center; gap: var(--space-7); margin-bottom: var(--space-9); }
.single-hero__rating .stars__num { color: #fff; }
.single-hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-10); }
.single-hero__badges .badge { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); }
.single-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-7); }

.single-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-11);
	padding-top: var(--space-11);
}
@media (min-width: 960px) {
	.single-body { grid-template-columns: minmax(0, 1fr) 320px; }
}
.single-section { margin-bottom: var(--space-11); }
.single-section__title {
	font-size: var(--font-size-h2);
	border-left: 4px solid var(--c-brand);
	padding-left: var(--space-9);
	margin-bottom: var(--space-9);
}
.info-table th, .info-table td {
	border-bottom: 1px solid var(--c-border-light);
	padding: var(--space-9);
	text-align: left;
	vertical-align: top;
	font-size: var(--font-size-2xl);
}
.info-table th { width: 30%; background: var(--c-surface-alt); color: var(--c-text-secondary); font-weight: 700; }

.tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-7); }
.tag-list a {
	display: inline-block;
	background: var(--c-surface-alt);
	padding: var(--space-6) var(--space-9);
	border-radius: var(--radius-pill);
	color: var(--c-text-primary);
	font-size: var(--font-size-2xl);
}
.tag-list a:hover { background: var(--c-brand-light); color: var(--c-brand-dark); text-decoration: none; }

.cta-card {
	background: var(--c-surface-alt);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-10);
	margin-bottom: var(--space-10);
	display: grid; gap: var(--space-7);
}
.cta-card h3 { margin: 0; font-size: var(--font-size-h3); }
.cta-card__note { color: var(--c-text-muted); font-size: var(--font-size-xl); margin: 0; }

.aside-related {
	background: var(--c-surface-base);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-10);
}
.aside-related h3 { margin: 0 0 var(--space-9); font-size: var(--font-size-h3); }
.aside-related__list { list-style: none; padding: 0; margin: 0; }
.aside-related__list li { border-bottom: 1px dashed var(--c-border-light); }
.aside-related__list a { display: block; padding: var(--space-7) 0; color: var(--c-text-primary); font-size: var(--font-size-2xl); }

/* ----------------------------------------
 * 12. FAQ / Breadcrumbs
 * ---------------------------------------- */
.faq {
	background: var(--c-surface-base);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-7);
	padding: 0;
}
.faq summary {
	cursor: pointer; padding: var(--space-9) var(--space-10);
	font-weight: 700; font-size: var(--font-size-3xl);
	list-style: none;
	position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "＋"; position: absolute; right: var(--space-10); top: 50%; transform: translateY(-50%);
	font-size: var(--font-size-h2); color: var(--c-brand);
}
.faq[open] summary::after { content: "−"; }
.faq p { margin: 0; padding: 0 var(--space-10) var(--space-9); color: var(--c-text-secondary); }

.breadcrumb { padding: var(--space-7) 0; font-size: var(--font-size-xl); color: var(--c-text-muted); }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-5); }
.breadcrumb li::after { content: "›"; margin-left: var(--space-5); color: var(--c-text-muted); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--c-text-link); }

/* ----------------------------------------
 * 13. Search form (header)
 * ---------------------------------------- */
.searchform__row {
	display: flex; gap: var(--space-5);
}
.searchform__input {
	flex: 1;
	height: 40px;
	padding: 0 var(--space-9);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	font-size: var(--font-size-2xl);
	background: var(--c-surface-base);
}
.searchform__label {
	position: absolute; left: -9999px;
}
.searchform__submit { white-space: nowrap; }

/* ----------------------------------------
 * 14. Footer
 * ---------------------------------------- */
.site-footer { background: var(--c-surface-dark); color: rgba(255,255,255,.85); margin-top: var(--space-12); }
.site-footer__cta {
	background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
	color: #fff;
	padding: var(--space-11) 0;
}
.site-footer__cta-row {
	display: grid; gap: var(--space-9);
	align-items: center;
}
@media (min-width: 720px) { .site-footer__cta-row { grid-template-columns: 1fr auto; } }
.site-footer__cta-title { color: #fff; font-size: clamp(20px, 3vw, 28px); margin-bottom: var(--space-5); }
.site-footer__cta-sub { color: rgba(255,255,255,.85); margin: 0; font-size: var(--font-size-2xl); }
.site-footer__cta .btn--primary { background: #fff; color: var(--c-brand); }
.site-footer__cta .btn--primary:hover { background: rgba(255,255,255,.9); color: var(--c-brand-dark); }

.site-footer__main { padding: var(--space-12) 0; }
.site-footer__cols {
	display: grid; gap: var(--space-11);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__cols { grid-template-columns: repeat(4, 1fr); } }
.site-footer__col h3 { color: #fff; font-size: var(--font-size-3xl); margin-bottom: var(--space-9); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: var(--space-7); }
.site-footer__col a { color: rgba(255,255,255,.75); font-size: var(--font-size-2xl); }
.site-footer__col a:hover { color: #fff; }
.footer-pref {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-7);
}
.footer-more { display: inline-block; margin-top: var(--space-7); color: var(--c-brand-light) !important; font-size: var(--font-size-xl); }

.site-footer__bottom { background: rgba(0,0,0,.25); padding: var(--space-9) 0; }
.site-footer__bottom-row {
	display: flex; flex-direction: column; gap: var(--space-7);
	align-items: flex-start;
	font-size: var(--font-size-xl);
}
@media (min-width: 720px) { .site-footer__bottom-row { flex-direction: row; justify-content: space-between; align-items: center; } }
.site-footer__copy { margin: 0; color: rgba(255,255,255,.6); }

/* ----------------------------------------
 * 15. Pagination
 * ---------------------------------------- */
.pagination, .nav-links {
	display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center;
	margin-top: var(--space-11);
}
.pagination .page-numbers, .nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 var(--space-7);
	border: 1px solid var(--c-border); border-radius: var(--radius-md);
	background: var(--c-surface-base); color: var(--c-text-primary);
	font-size: var(--font-size-2xl);
}
.pagination .page-numbers.current, .nav-links .page-numbers.current {
	background: var(--c-brand); color: #fff; border-color: var(--c-brand);
}
.pagination .page-numbers:hover, .nav-links .page-numbers:hover {
	background: var(--c-surface-alt); text-decoration: none;
}

/* ----------------------------------------
 * 16. Empty state
 * ---------------------------------------- */
.empty-state {
	text-align: center;
	padding: var(--space-12) var(--space-9);
	background: var(--c-surface-alt);
	border-radius: var(--radius-lg);
}
.empty-state h2 { margin-bottom: var(--space-7); }
.empty-state .btn { margin: var(--space-7) var(--space-5); }
.empty-state__search { margin-top: var(--space-10); max-width: 480px; margin-inline: auto; }

/* ----------------------------------------
 * 17. Prose (column body)
 * ---------------------------------------- */
.prose { font-size: var(--font-size-3xl); line-height: 1.85; color: var(--c-text-primary); }
.prose h2 { font-size: var(--font-size-h2); border-left: 4px solid var(--c-brand); padding-left: var(--space-9); margin-top: var(--space-12); }
.prose h3 { font-size: var(--font-size-h3); margin-top: var(--space-11); }
.prose img { border-radius: var(--radius-md); margin: var(--space-9) 0; }
.prose a { text-decoration: underline; }

/* ----------------------------------------
 * 18. Utility
 * ---------------------------------------- */
.empty { color: var(--c-text-muted); padding: var(--space-11); text-align: center; }
.widget__title { font-size: var(--font-size-h3); border-bottom: 2px solid var(--c-border-light); padding-bottom: var(--space-7); margin-bottom: var(--space-9); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* High contrast */
@media (prefers-contrast: more) {
	:root {
		--c-text-secondary: #000;
		--c-text-muted: #000;
		--c-border: #000;
	}
}

/* Print */
@media print {
	.site-header, .site-footer, .filter-panel, .filter-toggle, .hero-search, .mobile-nav { display: none !important; }
	body { color: #000; background: #fff; }
}

/* ----------------------------------------
 * 19. 掲載申込フォーム (page-touroku.php)
 * ---------------------------------------- */

/* ハニーポット非表示 */
.tobiso-hp {
	position: absolute; left: -9999px; top: -9999px;
	width: 1px; height: 1px; overflow: hidden;
}

.touroku-wrap { padding-top: var(--space-12); padding-bottom: var(--space-13); }

/* ---- ヘッダー ---- */
.touroku-head { margin-bottom: var(--space-11); text-align: center; }
.touroku-head__title { font-size: clamp(22px, 4vw, 32px); margin-bottom: var(--space-9); }
.touroku-head__lead { color: var(--c-text-secondary); font-size: var(--font-size-3xl); margin-bottom: var(--space-10); }
.touroku-head__steps {
	list-style: none; padding: 0; margin: 0 auto;
	display: flex; justify-content: center; gap: 0;
	max-width: 480px;
}
.touroku-head__steps li {
	flex: 1; text-align: center;
	padding: var(--space-8) var(--space-7);
	font-size: var(--font-size-2xl);
	color: var(--c-text-muted);
	border-bottom: 3px solid var(--c-border);
	position: relative;
}
.touroku-head__steps li span {
	display: block; font-weight: 700;
	font-size: var(--font-size-3xl);
	color: inherit;
	margin-bottom: var(--space-3);
}
.touroku-head__steps li.is-active {
	color: var(--c-brand);
	border-color: var(--c-brand);
	font-weight: 700;
}

/* ---- フォーム全体 ---- */
.touroku-form { display: grid; gap: var(--space-11); }

/* ---- セクション ---- */
.touroku-section {
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-lg);
	padding: var(--space-11) var(--space-10);
	background: var(--c-surface-base);
}
.touroku-section__legend {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	color: var(--c-text-primary);
	padding: 0 var(--space-7);
	float: none;
	line-height: 1;
}
.touroku-section__note {
	color: var(--c-text-muted);
	font-size: var(--font-size-2xl);
	margin: 0 0 var(--space-9);
	padding: var(--space-7) var(--space-9);
	background: var(--c-surface-alt);
	border-radius: var(--radius-sm);
}

/* ---- フォーム行グリッド ---- */
.form-row { display: grid; gap: var(--space-9); margin-bottom: var(--space-9); }
.form-row--2 { grid-template-columns: 1fr; }
.form-row--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.form-row--2 { grid-template-columns: repeat(2, 1fr); }
	.form-row--3 { grid-template-columns: repeat(3, 1fr); }
}
.form-field--span2 { grid-column: span 1; }
@media (min-width: 640px) { .form-field--span2 { grid-column: span 2; } }

/* ---- フォームフィールド ---- */
.form-field { display: flex; flex-direction: column; gap: var(--space-5); }
.form-label {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--c-text-secondary);
}
.req { color: var(--c-brand); }
.req-badge {
	display: inline-block;
	background: var(--c-brand);
	color: #fff;
	font-size: var(--font-size-xl);
	padding: var(--space-2) var(--space-7);
	border-radius: var(--radius-pill);
	vertical-align: middle;
	margin-left: var(--space-7);
	font-weight: 400;
}

.form-input,
.form-textarea {
	width: 100%;
	padding: var(--space-9);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	font-size: var(--font-size-3xl);
	font-family: var(--font-primary);
	background: var(--c-surface-base);
	color: var(--c-text-primary);
	transition: border-color var(--duration-instant) var(--ease), box-shadow var(--duration-instant) var(--ease);
	min-height: 44px;
}
.form-input:focus-visible,
.form-textarea:focus-visible {
	border-color: var(--c-border-focus);
	box-shadow: 0 0 0 3px rgba(0,102,204,.18);
	outline: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--c-text-muted); }
.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) { border-color: var(--c-danger); }

.form-textarea { resize: vertical; min-height: 160px; }
.form-hint { font-size: var(--font-size-xl); color: var(--c-text-muted); margin: 0; }

/* ---- チェックボックスグループ ---- */
.form-checkgroup {
	display: flex; flex-wrap: wrap; gap: var(--space-7);
	padding: var(--space-8) 0;
}
.form-check {
	display: inline-flex; align-items: center; gap: var(--space-6);
	cursor: pointer; font-size: var(--font-size-2xl);
	padding: var(--space-6) var(--space-9);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-pill);
	background: var(--c-surface-base);
	transition: background var(--duration-instant) var(--ease), border-color var(--duration-instant) var(--ease);
	user-select: none;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
	accent-color: var(--c-brand);
	width: 16px; height: 16px;
	flex-shrink: 0;
}
.form-check:has(input:checked) {
	background: var(--c-brand-light);
	border-color: var(--c-brand);
	color: var(--c-brand-dark);
	font-weight: 700;
}
.form-check:hover { background: var(--c-surface-alt); }
.form-check--large {
	padding: var(--space-9) var(--space-10);
	border-radius: var(--radius-md);
	font-size: var(--font-size-3xl);
}

/* ---- ファイルアップロード ---- */
.file-upload {
	display: flex; align-items: center; gap: var(--space-9);
	flex-wrap: wrap;
}
.file-upload__input {
	position: absolute; left: -9999px; width: 1px; height: 1px;
}
.file-upload__name {
	font-size: var(--font-size-2xl);
	color: var(--c-text-muted);
}
.file-upload__preview {
	width: 120px; height: 90px;
	object-fit: cover; border-radius: var(--radius-md);
	border: 1px solid var(--c-border);
}

/* ---- 郵便番号（短め） ---- */
.form-input--postal { max-width: 160px; }

/* ---- 数値＋単位の横並び ---- */
.form-input-with-unit {
	display: flex; align-items: center; gap: var(--space-7);
}
.form-input-with-unit .form-input { flex: 1; }
.form-unit {
	white-space: nowrap;
	color: var(--c-text-muted);
	font-size: var(--font-size-2xl);
	flex-shrink: 0;
}

/* 郵便番号行 */
.form-row--postal {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-9);
	margin-bottom: var(--space-9);
}
@media (min-width: 640px) {
	.form-row--postal { grid-template-columns: 180px 1fr; }
}

/* ---- 文字数カウント ---- */
.char-count { font-weight: 700; color: var(--c-accent); }
.char-count-status { margin-left: var(--space-7); font-size: var(--font-size-xl); }
.char-count-status.is-ok   { color: var(--c-success); }
.char-count-status.is-warn { color: var(--c-brand); }

/* ---- 同意チェック ---- */
.touroku-agree {
	padding: var(--space-10);
	background: var(--c-surface-alt);
	border-radius: var(--radius-lg);
	border: 1px solid var(--c-border-light);
}

/* ---- 送信ボタン ---- */
.touroku-submit {
	text-align: center;
}
.touroku-submit .btn { max-width: 480px; margin: 0 auto var(--space-7); }
.touroku-submit__note { font-size: var(--font-size-xl); color: var(--c-text-muted); margin: 0; }

/* ---- 補足情報 ---- */
.touroku-info {
	margin-top: var(--space-12);
	background: var(--c-surface-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-10);
	border: 1px solid var(--c-border-light);
}
.touroku-info__title { font-size: var(--font-size-h3); margin-bottom: var(--space-9); }
.touroku-info__list { margin: 0; }
.touroku-info__list dt {
	font-weight: 700; color: var(--c-text-secondary);
	font-size: var(--font-size-2xl);
	margin-top: var(--space-9);
}
.touroku-info__list dt:first-child { margin-top: 0; }
.touroku-info__list dd {
	margin-left: 0;
	color: var(--c-text-secondary);
	font-size: var(--font-size-2xl);
	padding-left: var(--space-9);
	border-left: 3px solid var(--c-border-light);
	margin-top: var(--space-5);
}

/* ---- 完了画面 ---- */
.touroku-done {
	text-align: center;
	padding: var(--space-12) var(--space-9);
}
.touroku-done__icon { font-size: 64px; margin-bottom: var(--space-10); }
.touroku-done__title { font-size: clamp(22px, 4vw, 30px); color: var(--c-success); margin-bottom: var(--space-9); }

/* ---- 通知バナー ---- */
.notice {
	padding: var(--space-9) var(--space-10);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-10);
	font-size: var(--font-size-3xl);
	font-weight: 500;
	border-left: 4px solid;
}
.notice--success { background: #edfff4; border-color: var(--c-success); color: #145a33; }
.notice--error   { background: #fff0f0; border-color: var(--c-danger);  color: #7b1a22; }



/* ---- フォームエラー強調 ---- */
.form-field.is-error .form-label,
.touroku-agree.is-error .form-check {
	color: var(--c-danger);
}
.form-field.is-error .form-input,
.form-field.is-error .form-textarea,
.form-field.is-error .form-checkgroup,
.touroku-agree.is-error {
	border-color: var(--c-danger);
	background: #fff5f5;
	box-shadow: 0 0 0 3px rgba(220, 53, 69, .12);
}
.form-field.is-error .form-input:focus-visible,
.form-field.is-error .form-textarea:focus-visible {
	border-color: var(--c-danger);
	box-shadow: 0 0 0 4px rgba(220, 53, 69, .18);
}
.form-error {
	margin: 0;
	padding: var(--space-5) var(--space-7);
	border-left: 4px solid var(--c-danger);
	border-radius: var(--radius-sm);
	background: #fff1f1;
	color: var(--c-danger);
	font-size: var(--font-size-xl);
	font-weight: 700;
}
.form-error--client { display: none; }
.form-error--client.is-visible { display: block; }