@charset "UTF-8";
/*
 * Think for Design — main.css
 * Single consolidated stylesheet (was assets/css/parts/*.css).
 * Sections below correspond to the previous module files; the order
 * matches the legacy 01- ... 46- numeric prefix to preserve cascade.
 */


/* ============================================================
 * 01-base
 * ============================================================ */

/* =========================================================
   Think for Design - main.css
   ========================================================= */

/* -----------------------------
   1. Tokens (CSS custom properties)
----------------------------- */
:root {
	/* Colors — knot-inspired neutral system. Default theme values live here;
	   per-section variants below redefine each token directly (no indirection,
	   because CSS var() aliases on :root do not re-resolve at the use site
	   when an ancestor overrides the source variable). */

	--section-bg:        #fbfaf7;
	--section-bg-soft:   #f4f1eb;
	--section-bg-card:   #ffffff;
	--section-fg:        #1d1916;
	--section-fg-soft:   #423d36;
	--section-fg-mute:   #807a72;
	--section-line:      #e3dfd8;
	--section-line-soft: #efece6;
	--section-accent:    #353535;

	/* Legacy tokens — kept in sync with --section-* values directly. */
	--color-bg:        #fbfaf7;
	--color-bg-pure:   #ffffff;
	--color-fg:        #1d1916;
	--color-fg-soft:   #423d36;
	--color-fg-mute:   #807a72;
	--color-line:      #e3dfd8;
	--color-line-soft: #efece6;
	/* Per-theme deep tones — footer + CTA bg adapt to each theme's palette. */
	--color-deepest:   #1d1916; /* footer + CTA main */
	--color-deeper:    #2a2420; /* CTA left text panel */
	--color-deep:      #4a4137; /* CTA sub button */

	/* Typography */
	--font-jp: "Gen Interface JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
	--font-en: "Jost", "Helvetica Neue", Arial, sans-serif;

	/* Sizes */
	--container-max: 1500px;
	--container-pad: clamp(15px, 3.6vw, 60px);

	/* Spacing scale (vertical rhythm) */
	--space-section: clamp(80px, 14vw, 160px);
	--space-section-sm: clamp(60px, 10vw, 120px);
	--space-block: clamp(40px, 6vw, 72px);
	--space-12: 12px;
	--space-16: 16px;
	--space-24: 24px;
	--space-32: 32px;
	--space-48: 48px;
	--space-64: 64px;

	/* Header */
	--header-h: 80px;

	/* Easing */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 768px) {
	:root {
		--header-h: 64px;
	}
}

/* -----------------------------
   1b. Theme variants (knot-inspired, section-scoped)
----------------------------- */

/* Warm beige — About + Service (knot /menu/, --color-base-menu #dbd7cf) */
body.theme-warm {
	--section-bg:        #dbd7cf;
	--section-bg-soft:   #e8e4dc;
	--section-bg-card:   #f4f1eb;
	--section-fg:        #2a2622;
	--section-fg-soft:   #4d4640;
	--section-fg-mute:   #847b6e;
	--section-line:      #c8c2b6;
	--section-line-soft: #d2cdc1;
	--section-accent:    #6e6051;
	/* Legacy aliases — re-set directly so existing selectors pick them up. */
	--color-bg:        #dbd7cf;
	--color-bg-pure:   #f4f1eb;
	--color-fg:        #2a2622;
	--color-fg-soft:   #4d4640;
	--color-fg-mute:   #847b6e;
	--color-line:      #c8c2b6;
	--color-line-soft: #d2cdc1;
	/* Warm dark browns for footer + CTA. */
	--color-deepest:   #2a2420;
	--color-deeper:    #1f1b18;
	--color-deep:      #4a4137;
}

/* Cool light grey — CASE / EVENT / NEWS / WORKS (knot /gallery/, --color-gray-ec #eceded) */
body.theme-cool {
	--section-bg:        #eceded;
	--section-bg-soft:   #f4f4f4;
	--section-bg-card:   #ffffff;
	--section-fg:        #2c2e2f;
	--section-fg-soft:   #4a4d4f;
	--section-fg-mute:   #7d8284;
	--section-line:      #d6d8d9;
	--section-line-soft: #e3e5e6;
	--section-accent:    #5a5f61;
	--color-bg:        #eceded;
	--color-bg-pure:   #ffffff;
	--color-fg:        #2c2e2f;
	--color-fg-soft:   #4a4d4f;
	--color-fg-mute:   #7d8284;
	--color-line:      #d6d8d9;
	--color-line-soft: #e3e5e6;
	/* Cool dark grays for footer + CTA. */
	--color-deepest:   #232527;
	--color-deeper:    #181a1c;
	--color-deep:      #3d4042;
}

/* Mocha — JOURNAL (knot /menu/ tonal scheme:
   warm dark gray-brown bg + light beige text). */
body.theme-mocha {
	--section-bg:        #7c7671;
	--section-bg-soft:   #6b655f;
	--section-bg-card:   #9d9693;
	--section-fg:        #dbd7cf;
	--section-fg-soft:   #e8e3da;
	--section-fg-mute:   #b3aa9d;
	--section-line:      #9d9693;
	--section-line-soft: #6b655f;
	--section-accent:    #f2f0ec;
	--color-bg:        #7c7671;
	--color-bg-pure:   #6b655f;
	--color-fg:        #dbd7cf;
	--color-fg-soft:   #e8e3da;
	--color-fg-mute:   #b3aa9d;
	--color-line:      #9d9693;
	--color-line-soft: #6b655f;
	/* Deep mocha browns for footer + CTA (darker than the page bg). */
	--color-deepest:   #3d3833;
	--color-deeper:    #2c2924;
	--color-deep:      #5c5550;
}

/* Sage — Service pages (knot /recruit/ tonal scheme:
   dark olive bg + light-sage text, all in the same hue family). */
body.theme-sage {
	--section-bg:        #576359;
	--section-bg-soft:   #4b564d;
	--section-bg-card:   #636f63;
	--section-fg:        #b1b9b1;
	--section-fg-soft:   #c8cfc8;
	--section-fg-mute:   #8c948c;
	--section-line:      #6e7a6e;
	--section-line-soft: #4b564d;
	--section-accent:    #d6dad4;
	--color-bg:        #576359;
	--color-bg-pure:   #4b564d;
	--color-fg:        #b1b9b1;
	--color-fg-soft:   #c8cfc8;
	--color-fg-mute:   #8c948c;
	--color-line:      #6e7a6e;
	--color-line-soft: #4b564d;
	/* Deep olive greens for footer + CTA (darker than the page bg). */
	--color-deepest:   #2e3830;
	--color-deeper:    #232b25;
	--color-deep:      #4a564b;
}

/* Dark — About + its sub-pages (matches the front dark band, --tfd-dark #24211e) */
body.theme-dark {
	--section-bg:        #24211e;
	--section-bg-soft:   #2c2825;
	--section-bg-card:   #322e2a;
	--section-fg:        #ffffff;
	--section-fg-soft:   #d9d4ce;
	--section-fg-mute:   #9a938b;
	--section-line:      #3c372f;
	--section-line-soft: #322e29;
	--section-accent:    #e8e3da;
	--color-bg:        #24211e;
	--color-bg-pure:   #2c2825;
	--color-fg:        #ffffff;
	--color-fg-soft:   #d9d4ce;
	--color-fg-mute:   #9a938b;
	--color-line:      rgba(255, 255, 255, 0.16);
	--color-line-soft: rgba(255, 255, 255, 0.10);
	/* Footer + CTA stay a touch deeper than the page. */
	--color-deepest:   #1c1916;
	--color-deeper:    #141210;
	--color-deep:      #3a342d;
}

/* -----------------------------
   2. Reset
----------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: auto;
	overflow-x: clip;
	width: 100%;
}

body {
	margin: 0;
	font-family: var(--font-jp);
	font-weight: 400;
	color: var(--color-fg);
	background: var(--color-bg);
	line-height: 1.8;
	letter-spacing: 0.04em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	width: 100%;
	max-width: 100%;
}

/* Lenis smooth scroll setup */
html.lenis,
html.lenis body {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}
.lenis.lenis-stopped {
	overflow: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s var(--ease-out);
}
a:hover {
	opacity: 0.6;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

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

p {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/* Loader (full-screen, fades out on load) */
.loader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.6s var(--ease-out), visibility 0s 0.6s;
}
.loader.is-hidden {
	opacity: 0;
	visibility: hidden;
}
.loader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: min(80vw, 360px);
}
.loader__logo {
	opacity: 0;
	animation: loader-logo-in 0.8s 0.1s var(--ease-out) forwards;
}
.loader__logo svg {
	width: 100%;
	height: auto;
	max-width: 320px;
	display: block;
}
.loader__bar {
	position: relative;
	width: 100%;
	height: 1px;
	background: var(--color-line);
	overflow: hidden;
}
.loader__bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0;
	background: var(--color-fg);
	animation: loader-bar 1.8s var(--ease-out) forwards;
}
@keyframes loader-logo-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes loader-bar {
	0%   { width: 0; }
	100% { width: 100%; }
}
body.is-loading,
body.is-hero-locking {
	overflow: hidden;
}



/* ============================================================
 * 02-diagnosis-modal
 * ============================================================ */

/* -----------------------------
   Diagnosis: floating banner + modal
----------------------------- */
.diag-banner {
	position: fixed;
	right: clamp(16px, 2vw, 28px);
	bottom: clamp(16px, 2vw, 28px);
	width: clamp(240px, 24vw, 300px);
	background: #fff;
	border: 1px solid var(--color-line);
	box-shadow: 0 12px 32px rgba(28, 22, 18, 0.10);
	padding: 12px 14px 12px 16px;
	z-index: 80;
	transform: translateY(140%);
	opacity: 0;
	transition: transform 0.6s var(--ease-out), opacity 0.4s var(--ease-out);
}
.diag-banner.is-visible {
	transform: translateY(0);
	opacity: 1;
}
.diag-banner.is-dismissed { display: none; }
.diag-banner__close {
	position: absolute;
	top: 2px;
	right: 4px;
	width: 22px;
	height: 22px;
	background: transparent;
	border: 0;
	color: var(--color-fg-mute);
	font-size: 15px;
	cursor: pointer;
	line-height: 1;
}
.diag-banner__close:hover { color: var(--color-fg); }
.diag-banner__link {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0;
	text-align: left;
	cursor: pointer;
}
.diag-banner__body {
	flex: 1;
	min-width: 0;
}
.diag-banner__label {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
	margin-bottom: 4px;
}
.diag-banner__title {
	display: block;
	font-size: 13px;
	letter-spacing: 0.03em;
	line-height: 1.4;
	font-weight: 500;
	color: var(--color-fg);
	margin-bottom: 2px;
}
.diag-banner__sub {
	display: block;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--color-fg-mute);
}
.diag-banner__arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--color-fg);
	border-radius: 50%;
	font-size: 13px;
	color: var(--color-fg);
	transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.diag-banner__link:hover .diag-banner__arrow {
	background: var(--color-fg);
	color: #fff;
	transform: translateX(2px);
}
@media (max-width: 600px) {
	.diag-banner { width: calc(100vw - 24px); padding: 10px 12px 10px 14px; }
}

/* Modal */
.diag-modal {
	position: fixed;
	inset: 0;
	/* Above the menu-open header (z-index:1000), otherwise the invisible header
	   strip steals clicks on the top-right close button on shorter viewports. */
	z-index: 1100;
	display: none;
}
.diag-modal.is-open { display: block; }
.diag-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 22, 18, 0.5);
	animation: diag-fade-in 0.3s var(--ease-out);
}
.diag-modal__panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(740px, calc(100vw - 32px));
	height: min(720px, calc(100vh - 32px));
	/* Pin the modal to the default cream/dark theme regardless of which page
	   theme is active, so quiz options stay readable. */
	--color-bg:        #fbfaf7;
	--color-bg-pure:   #ffffff;
	--color-fg:        #1d1916;
	--color-fg-soft:   #423d36;
	--color-fg-mute:   #807a72;
	--color-line:      #e3dfd8;
	--color-line-soft: #efece6;
	background: var(--color-bg);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
	animation: diag-pop-in 0.4s var(--ease-out);
}
.diag-modal__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.diag-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 1px solid var(--color-line);
	color: var(--color-fg);
	font-size: 19px;
	cursor: pointer;
	border-radius: 50%;
}
.diag-modal__close:hover { background: var(--color-fg); color: #fff; border-color: var(--color-fg); }

@keyframes diag-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes diag-pop-in {
	from { opacity: 0; transform: translate(-50%, -45%); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Quiz inside modal — flex layout: head fixed / list scrolls / footer fixed */
.diag-quiz {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.diag-quiz__head {
	flex-shrink: 0;
	padding: clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px) 0;
}
.diag-quiz__concerns {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	min-height: 0;
	padding: 0 clamp(32px, 5vw, 56px) 16px;
	margin: 0;
	list-style: none;
	display: grid;
	align-content: start;
	gap: 6px;
}
.diag-quiz__progress {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 24px;
}
.diag-quiz__bar {
	flex: 1;
	height: 1px;
	background: var(--color-line);
	overflow: hidden;
}
.diag-quiz__bar i {
	display: block;
	height: 100%;
	background: var(--color-fg);
	transition: width 0.4s var(--ease-out);
}
.diag-quiz__title {
	font-size: clamp(19px, 2vw, 23px);
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin-bottom: 24px;
}
.diag-quiz__options {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	min-height: 0;
	list-style: none;
	margin: 0;
	padding: 0 clamp(32px, 5vw, 56px) 16px;
	display: grid;
	align-content: start;
	gap: 6px;
}
.diag-quiz__option {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--color-line);
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1.7;
	color: var(--color-fg);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.diag-quiz__option::before {
	content: '';
	display: inline-flex;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border: 1px solid var(--color-fg-mute);
	margin-top: 2px;
	transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.diag-quiz__option:hover {
	border-color: var(--color-fg);
	background: rgba(0, 0, 0, 0.02);
}
.diag-quiz__option:hover::before {
	border-color: var(--color-fg);
}
.diag-quiz__back {
	background: transparent;
	border: 0;
	padding: 4px 0;
	font-size: 13px;
	color: var(--color-fg-mute);
	cursor: pointer;
	letter-spacing: 0.05em;
}
.diag-quiz__back:hover { color: var(--color-fg); }

/* Empathy concerns checklist */
.diag-quiz__desc {
	font-size: 14px;
	letter-spacing: 0.05em;
	color: var(--color-fg-mute);
	margin: -12px 0 24px;
}
.diag-quiz__concern {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--color-line);
	cursor: pointer;
	transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.diag-quiz__concern:hover {
	border-color: var(--color-fg);
	background: rgba(0, 0, 0, 0.02);
}
.diag-quiz__concern input { display: none; }
.diag-quiz__concern-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1px solid var(--color-fg-mute);
	flex-shrink: 0;
	margin-top: 2px;
	transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.diag-quiz__concern-icon::after {
	content: '';
	width: 8px;
	height: 8px;
	background: #fff;
	opacity: 0;
	transition: opacity 0.2s var(--ease-out);
}
.diag-quiz__concern input:checked ~ .diag-quiz__concern-icon {
	background: var(--color-fg);
	border-color: var(--color-fg);
}
.diag-quiz__concern input:checked ~ .diag-quiz__concern-icon::after {
	opacity: 1;
}
.diag-quiz__concern-text {
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1.7;
	color: var(--color-fg);
}
.diag-quiz__concern input:checked ~ .diag-quiz__concern-text {
	font-weight: 500;
}

.diag-quiz__footer {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--color-bg);
	border-top: 1px solid var(--color-line);
	padding: 18px clamp(32px, 5vw, 56px);
}
.diag-quiz__count {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--color-fg-mute);
}
.diag-quiz__submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Step indicator & profile tag */
.diag-quiz__step {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.diag-quiz__profile-tag {
	font-family: var(--font-jp);
	letter-spacing: 0.06em;
	background: var(--color-fg);
	color: #fff;
	padding: 2px 10px;
	font-size: 12px;
}

/* Profile selection cards (step 1) */
.diag-profile-list {
	list-style: none;
	margin: 0;
	padding: 0 clamp(32px, 5vw, 56px) clamp(32px, 5vw, 56px);
	display: grid;
	gap: 10px;
}
.diag-profile-card {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	gap: 4px 12px;
	align-items: center;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--color-line);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), padding 0.25s var(--ease-out);
}
.diag-profile-card:hover {
	border-color: var(--color-fg);
	background: rgba(0, 0, 0, 0.02);
	padding-left: 26px;
}
.diag-profile-card__en {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
	grid-column: 1;
	grid-row: 1;
}
.diag-profile-card__label {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	grid-column: 1;
	grid-row: 2;
}
.diag-profile-card__desc {
	font-size: 13px;
	color: var(--color-fg-mute);
	letter-spacing: 0.04em;
	line-height: 1.6;
	grid-column: 1;
	grid-row: 3;
	margin-top: 4px;
}
.diag-profile-card__arrow {
	grid-column: 2;
	grid-row: 1 / 4;
	font-size: 17px;
	color: var(--color-fg-mute);
	transition: color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.diag-profile-card:hover .diag-profile-card__arrow {
	color: var(--color-fg);
	transform: translateX(4px);
}

/* Result fallback text */
.diag-result__fallback {
	font-size: 15px;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	padding: 24px 0;
}

/* Result extras: picked concerns recap */
.diag-result__picked-label {
	font-size: 12px;
	letter-spacing: 0.18em;
	color: var(--color-fg-mute);
	margin: 0 0 8px;
}
.diag-result__picked {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	gap: 4px;
}
.diag-result__picked li {
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	padding: 4px 0;
	padding-left: 18px;
	position: relative;
}
.diag-result__picked li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--color-fg);
	font-weight: 700;
}

/* Result */
.diag-result {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	min-height: 0;
	padding: clamp(32px, 5vw, 56px);
}
.diag-result__label {
	display: block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 8px;
}
.diag-result__title {
	font-size: clamp(19px, 2vw, 23px);
	letter-spacing: 0.06em;
	margin-bottom: 24px;
}
.diag-result__card {
	padding: 32px 28px;
	background: #f8f6f2;
	border-left: 2px solid var(--color-fg);
	margin-bottom: 24px;
}
.diag-result__en {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	display: block;
	margin-bottom: 12px;
}
.diag-result__name {
	font-size: clamp(19px, 2vw, 23px);
	letter-spacing: 0.06em;
	line-height: 1.5;
	margin-bottom: 12px;
}
.diag-result__sub {
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	margin-bottom: 24px;
}
.diag-result__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 8px;
}
.diag-result__actions .btn,
.diag-result__actions .btn--ghost {
	flex: 0 0 auto;
}
@media (max-width: 600px) {
	.diag-result__actions { flex-direction: column; align-items: flex-start; gap: 14px; }
}
.diag-result__retry {
	text-align: center;
	margin-top: 32px;
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
}
.skip-link:focus {
	left: 16px;
	top: 16px;
	z-index: 9999;
	background: #fff;
	padding: 8px 12px;
	border: 1px solid var(--color-fg);
}



/* ============================================================
 * 03-layout
 * ============================================================ */

/* -----------------------------
   3. Layout primitives
----------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.section {
	padding-block: var(--space-section);
}
/* Event archive (/event/) list section — reduce top padding only, this page only (client review). */
.post-type-archive-event .section {
	padding-top: 80px;
}
.section--center {
	text-align: center;
}
/* Warm-cream background variation (subtle rhythm) */
.section--vmv,
.section--entry,
.section--contact-cta {
	background: #f3efe8;
}
.section__more {
	margin-top: var(--space-48);
	text-align: center;
}

.section-heading {
	margin-bottom: clamp(24px, 3vw, 40px);
}
.section-heading__label {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(35px, 4.2vw, 57px);
	letter-spacing: 0.06em;
	color: var(--color-fg);
	text-transform: capitalize;
	line-height: 1.1;
	margin-bottom: 18px;
}
.section-heading__title {
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 1.7;
	letter-spacing: 1px; /* #6304 全ページ 2.7px->1px */
	font-weight: 500;
	color: var(--color-fg-soft);
}
.section-lead {
	font-size: clamp(15px, 1.05vw, 16px);
	color: var(--color-fg-soft);
	line-height: 2.1;
	letter-spacing: 0.06em;
	max-width: 680px;
	margin-bottom: var(--space-block);
}



/* ============================================================
 * 04-button
 * ============================================================ */

/* -----------------------------
   4. Components: Button (acra/fieldcorp-style — text + circle arrow)
----------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 14px 0;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: capitalize;
	color: var(--color-fg);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-fg);
	cursor: pointer;
	white-space: nowrap;
	transition: gap 0.4s var(--ease-out), opacity 0.2s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.btn::after {
	content: '→';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-fg);
	border-radius: 50%;
	font-size: 15px;
	color: var(--color-fg);
	background: transparent;
	flex-shrink: 0;
	transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.btn:hover {
	gap: 28px;
	opacity: 1;
}
.btn:hover::after {
	background: var(--color-fg);
	color: var(--color-bg);
	transform: translateX(2px);
}
.btn:disabled,
.btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}
.btn:disabled:hover,
.btn[disabled]:hover {
	gap: 20px;
}
.btn:disabled:hover::after,
.btn[disabled]:hover::after {
	background: transparent;
	color: var(--color-fg);
	transform: none;
}

.btn--ghost {
	color: var(--color-fg-soft);
	border-bottom-color: var(--color-fg-soft);
}
.btn--ghost::after {
	border-color: var(--color-fg-soft);
	color: var(--color-fg-soft);
}
.btn--ghost:hover::after {
	background: var(--color-fg-soft);
	color: var(--color-bg);
}

/* On dark backgrounds (e.g., loader, footer-cta) */
.cta-block .btn,
.cta-block .btn--ghost,
.hero--video .btn,
.story .btn {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.6);
}
.cta-block .btn::after,
.hero--video .btn::after,
.story .btn::after {
	border-color: #fff;
	color: #fff;
}
.cta-block .btn:hover::after,
.hero--video .btn:hover::after {
	background: #fff;
	color: var(--color-fg);
}
/* Story section — keep the circle outlined on hover (no white fill) */
.story .btn:hover::after {
	background: transparent;
	color: #fff;
	transform: translateX(2px);
}



/* ============================================================
 * 05-header
 * ============================================================ */

/* -----------------------------
   5. Header
----------------------------- */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	height: var(--header-h);
	/* Inherits the page's section bg/fg so the header blends with each theme
	   (knot-style). Per-page themes (warm/cool/sage) flip these tokens. */
	background: var(--color-bg);
	z-index: 100;
	transition: transform 0.4s var(--ease-out), background 0.3s var(--ease-out);
}
.site-header[data-hidden="true"] {
	transform: translateY(-100%);
}

/* Overlay state — transparent, white text on top of hero video */
.site-header.is-overlay {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
.site-header.is-overlay .site-header__logo svg path,
.site-header.is-overlay .site-header__logo svg text,
.site-header.is-overlay .site-header__logo svg .cls-1 {
	fill: #fff;
}
.site-header.is-overlay .site-header__logo-text {
	color: #fff;
}
.site-header.is-overlay .site-nav__link {
	color: #fff;
}
.site-header.is-overlay .site-nav__link::after {
	background: #fff;
}
.site-header.is-overlay .site-header__cta {
	background: #fff;
	color: var(--color-fg);
	box-shadow: none;
	border: 0px solid #1a1a1a;
}
.site-header.is-overlay .site-header__cta:hover {
	background: #fff;
	color: var(--color-fg);
	box-shadow: none;
}
/* Nav-trigger lines turn white in overlay state */
body.has-overlay-header .nav-trigger__btn span {
	background: #ffffff !important;
}
/* In overlay state on mobile, drop the dark circle so the lines are clearly
   readable against the hero video (instead of a near-invisible dark circle). */
body.has-overlay-header .nav-trigger {
	background-color: transparent !important;
	box-shadow: none !important;
}
body.has-overlay-header .nav-trigger__btn {
	width: 32px !important;
	height: 22px !important;
}
body.has-overlay-header .nav-trigger__btn span {
	height: 2px;
	background: #fff !important;
}

/* Dark state — solid charcoal header while scrolling over the front dark band
   (hero → service). White logo/nav; switches back to light past the band.
   When is-overlay is also active (very top), its transparent bg wins. */
.site-header.is-dark {
	background: var(--tfd-dark, #24211e);
}
.site-header.is-dark .site-header__logo svg path,
.site-header.is-dark .site-header__logo svg text,
.site-header.is-dark .site-header__logo svg .cls-1 {
	fill: #fff;
}
.site-header.is-dark .site-header__logo-text { color: #fff; }
.site-header.is-dark .site-nav__link { color: #fff; }
.site-header.is-dark .site-nav__link::after { background: #fff; }
.site-header.is-dark .site-header__cta {
	background: #fff;
	color: var(--color-fg);
	box-shadow: none;
	border: 0px solid #1a1a1a;
}
.site-header.is-dark .site-header__cta:hover {
	background: #fff;
	color: var(--color-fg);
	box-shadow: none;
}
body.has-dark-header .nav-trigger {
	background-color: transparent !important;
	box-shadow: none !important;
}
body.has-dark-header .nav-trigger__btn span {
	background: #fff !important;
}

/* フロント最上部: ヘッダーを白（JS非依存＝body.home）。追従(is-scrolled)で従来色に戻る。 */
body.home:not(.is-scrolled) .site-header__logo svg path,
body.home:not(.is-scrolled) .site-header__logo svg text,
body.home:not(.is-scrolled) .site-header__logo svg .cls-1 { fill: #fff; }
body.home:not(.is-scrolled) .site-nav__link { color: #fff; }
body.home:not(.is-scrolled) .site-nav__link::after { background: #fff; }
/* Contact: 最上部(overlay)=白背景・黒文字 / 追従(overlay解除後)=黒背景・白文字。枠なし */
body.home.has-overlay-header .site-header .site-header__cta,
body.home.has-overlay-header .site-header.is-overlay .site-header__cta,
body.home.has-overlay-header .site-header.is-dark .site-header__cta,
body.home.has-overlay-header .site-header .site-header__cta:hover,
body.home.has-overlay-header .site-header.is-overlay .site-header__cta:hover,
body.home.has-overlay-header .site-header.is-dark .site-header__cta:hover {
	background: #fff;
	color: var(--color-fg);
	box-shadow: none;
	border: 0;
}
body.home:not(.has-overlay-header) .site-header .site-header__cta,
body.home:not(.has-overlay-header) .site-header.is-dark .site-header__cta,
body.home:not(.has-overlay-header) .site-header .site-header__cta:hover,
body.home:not(.has-overlay-header) .site-header.is-dark .site-header__cta:hover {
	background: var(--color-fg);
	color: #fff;
	box-shadow: none;
	border: 0;
}
/* ハンバーガー3本線: 最上部は白（確実に） */
body.home:not(.is-scrolled) .nav-trigger__btn span { background: #ffffff !important; }

/* Pop-down animation when transitioning from overlay → solid */
.site-header.is-popping-in {
	animation: header-pop-in 0.55s var(--ease-out);
}
@keyframes header-pop-in {
	0%   { transform: translateY(-100%); }
	60%  { transform: translateY(4px); }
	100% { transform: translateY(0); }
}
.site-header__inner {
	height: 100%;
	width: 100%;
	padding-left: 1.2vw;
	padding-right: 1.2vw; /* client #5142: ロゴ左と同じ余白 */
	display: flex;
	align-items: center;
	gap: 32px;
}
.site-header__logo {
	display: inline-flex;
	align-items: center;
	height: 38px;
}
.site-header__logo svg {
	height: 100%;
	width: auto;
}
/* Logo SVG has a hardcoded fill via inline <style> (cls-1: #050000).
   Override it so the logo follows the per-page theme. */
.site-header__logo svg path,
.site-header__logo svg text,
.site-header__logo svg .cls-1 {
	fill: var(--color-fg);
	transition: fill 0.3s var(--ease-out);
}
.site-header__logo-text {
	font-family: var(--font-en);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.02em;
	color: var(--color-fg);
}
.site-nav {
	margin-left: auto;
	height: 100%;
}
.site-nav__list {
	display: flex;
	gap: clamp(16px, 2vw, 32px);
	height: 100%;
	align-items: stretch;
}
.site-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}
.site-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: capitalize;
	color: var(--color-fg);
	padding: 4px 2px;
}
.site-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: var(--color-fg);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.4s var(--ease-out);
}
.site-nav__item.is-current .site-nav__link::after,
.site-nav__item:hover .site-nav__link::after {
	transform: scaleX(1);
}

/* Dropdown */
.site-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -8px);
	min-width: 220px;
	padding: 16px 0;
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s 0.3s;
	z-index: 50;
}
.site-nav__item.has-dropdown:hover .site-nav__dropdown,
.site-nav__item.has-dropdown:focus-within .site-nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	pointer-events: auto;
	transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0s 0s;
}
.site-nav__dropdown-list {
	display: grid;
	gap: 0;
}
.site-nav__dropdown-list a {
	display: block;
	padding: 10px 24px;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	white-space: nowrap;
	transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.site-nav__dropdown-list a:hover {
	background: rgba(0, 0, 0, 0.03);
	opacity: 1;
}
.site-header__cta {
	height: 40px;
	padding: 0 22px;
	display: inline-flex;
	align-items: center;
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--color-bg);
	background: var(--color-fg);
	border-radius: 999px;
	text-transform: capitalize;
	transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.site-header__cta:hover {
	background: var(--color-bg);
	color: var(--color-fg);
	box-shadow: inset 0 0 0 1px var(--color-fg);
	opacity: 1;
}
@media (max-width: 900px) {
	.site-nav,
	.site-header__cta {
		display: none;
	}
}

/* -----------------------------
   5b. Nav Trigger (fieldcorp-style)
----------------------------- */
/* Base style — circular dark trigger (used on mobile/tablet by default) */
.nav-trigger {
	margin-left: auto;
	flex-shrink: 0;
	z-index: 110;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* 固定の暗色にする（var(--color-fg) は theme-dark/mocha/sage で明色に反転し、
	   白い3本線が見えなくなるため）。白線は全背景で視認できる。 */
	background-color: #1c1916;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(28, 22, 18, 0.2);
	box-sizing: border-box;
}
.nav-trigger__btn {
	position: relative;
	width: 22px;
	height: 16px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: block;
}
.nav-trigger__btn span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	transition: transform 0.4s var(--ease-out), top 0.3s var(--ease-out), bottom 0.3s var(--ease-out), opacity 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
	transform-origin: center;
	border-radius: 1px;
	display: block;
}
.nav-trigger__btn span:nth-child(1) { top: 0; }
.nav-trigger__btn span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-trigger__btn span:nth-child(3) { bottom: 0; }
.nav-trigger[aria-expanded="true"] .nav-trigger__btn span:nth-child(1) {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}
.nav-trigger[aria-expanded="true"] .nav-trigger__btn span:nth-child(2) {
	opacity: 0;
}
.nav-trigger[aria-expanded="true"] .nav-trigger__btn span:nth-child(3) {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

/* Desktop (>=901px) — switch to the minimal line-only style without circle */
@media (min-width: 901px) {
	.nav-trigger {
		margin-left: 0;
		width: 32px;
		height: 18px;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}
	.nav-trigger__btn {
		width: 100%;
		height: 100%;
	}
	.nav-trigger__btn span {
		background: var(--color-fg);
	}
	body.has-overlay-header .nav-trigger__btn span {
		background: #fff;
	}
}

/* While the menu is open, lift the header (containing the trigger) above the menu panel
   so the hamburger turns into a visible close (×) button. */
body.menu-open .site-header {
	z-index: 1000;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
body.menu-open .site-header__logo,
body.menu-open .site-nav,
body.menu-open .site-header__cta {
	visibility: hidden;
}
/* While the menu is open, force the dark trigger style regardless of overlay state
   so the close (×) reads against the menu panel's light background. */
body.menu-open.has-overlay-header .nav-trigger__btn span {
	background: #fff !important;
}
@media (max-width: 900px) {
	body.menu-open .nav-trigger {
		/* 固定の暗色（var(--color-fg) は暗テーマで白く反転し、開いた時の白い×が
		   白円に溶けて消えるため）。メニューパネルがどのテーマ色でも×が読める。 */
		background-color: #fff !important;                                            /* (口頭指示) 暗→白 */
		box-shadow: 0 4px 16px rgba(28, 22, 18, 0.18) !important;
	}
	body.menu-open .nav-trigger__btn {
		width: 22px !important;
		height: 16px !important;
	}
	/* (口頭指示 2026-06-27) ×を黒に＋"close"テキスト。has-overlay-header の白線!important(0,3,1)を後勝ちで上書き。 */
	body.menu-open .nav-trigger__btn span,
	body.menu-open.has-overlay-header .nav-trigger__btn span {
		background: #1d1916 !important;
		height: 2px !important;
	}
	body.menu-open .nav-trigger__btn::after {
		content: "close";
		position: absolute;
		top: calc(100% + 5px);
		left: 50%;
		transform: translateX(-50%);
		font-family: var(--font-en);
		font-size: 10px;
		line-height: 1;
		letter-spacing: 0.12em;
		text-transform: lowercase;
		color: #1d1916;
	}
}
@media (min-width: 901px) {
	body.menu-open .nav-trigger {
		width: 36px !important;
		height: 36px !important;
	}
	body.menu-open .nav-trigger__btn {
		width: 24px !important;
		height: 24px !important;
	}
	body.menu-open .nav-trigger__btn span {
		background: var(--color-fg) !important;
		height: 2.5px !important;
	}
}

/* Mobile: float the hamburger bottom-right as a white circle + black 3-lines + "menu".
   ★第15R（社長口頭指示）: 旧来は body.is-scrolled（スクロール後）だけこの追従デザインだった
   が、全ページSPで「閉じた状態は常にこの白丸+黒線+menu」に統一する。よって is-scrolled 条件を外し、
   :not(.menu-open) の閉じた状態すべてに適用する（位置=bottom-right フロート・見た目=白丸黒線menu、
   いずれも #3121 /flow/ の常時化実装と同一＝見た目も位置も常時）。
   旧 page-id-11(#3121) / post-type-archive-event(#3599) の個別ルールは本ルールに吸収＝削除した。

   視認性: position:fixed で float すると、front 暗ヒーロー(has-overlay/has-dark)上でも
   ヘッダー帯から切り離されて白丸が浮く。背景 #fff・線 #1d1916 を !important + 固定色にし、
   has-overlay-header / has-dark-header の透明背景・白線 !important ルールや、各 theme-dark/mocha/
   sage/tone の --color-fg 反転を無効化する。これは旧 is-scrolled 追従状態が全ページ（front 含む）で
   既に証明済みの挙動と同一。
   メニューを開くと既存の×（ダーク）スタイルに戻すため :not(.menu-open) で限定。 */
@media (max-width: 900px) {
	/* (口頭指示 2026-06-27) スクロール後のみ右下フロート＝is-scrolled 再ゲート。
	   既定（≤160px）はヘッダー右上固定（基本.nav-trigger 暗丸）。第15R常時化を位置面で見直し。 */
	body.is-scrolled:not(.menu-open) .nav-trigger {
		position: fixed;
		right: 16px;
		bottom: 16px;
		top: auto;
		left: auto;
		margin-left: 0;
		z-index: 120;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #fff !important;
		box-shadow: 0 4px 16px rgba(28, 22, 18, 0.18) !important;
	}
	body.is-scrolled:not(.menu-open) .nav-trigger__btn {
		width: 22px !important;
		height: 16px !important;
		transform: translateY(-4px);
	}
	body.is-scrolled:not(.menu-open) .nav-trigger__btn span {
		background: #1d1916 !important;
	}
	body.is-scrolled:not(.menu-open) .nav-trigger__btn::after {
		content: "menu";
		position: absolute;
		top: calc(100% + 5px);
		left: 50%;
		transform: translateX(-50%);
		font-family: var(--font-en);
		font-size: 10px;
		line-height: 1;
		letter-spacing: 0.12em;
		text-transform: lowercase;
		color: #1d1916;
	}
}

/* -----------------------------
   5c. Menu Panel (fieldcorp-style overlay)
----------------------------- */
.menu-panel {
	position: fixed;
	inset: 0;
	/* Inherit page section bg so the hamburger overlay matches each theme. */
	background: var(--color-bg);
	z-index: 900;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s var(--ease-out), visibility 0s 0.5s;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: block;
}
.menu-panel.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s var(--ease-out);
}
.menu-panel__container {
	width: 100%;
	max-width: 1080px;
	margin-inline: auto;
	padding: clamp(96px, 14vh, 140px) clamp(24px, 5vw, 64px) clamp(48px, 8vh, 80px);
}

/* Clean vertical list — large, readable, well-spaced (katariba-style) */
.menu-panel__list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.menu-panel__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.menu-panel.is-open .menu-panel__item {
	opacity: 1;
	transform: translateY(0);
}
.menu-panel.is-open .menu-panel__item:nth-child(1) { transition-delay: 0.10s; }
.menu-panel.is-open .menu-panel__item:nth-child(2) { transition-delay: 0.14s; }
.menu-panel.is-open .menu-panel__item:nth-child(3) { transition-delay: 0.18s; }
.menu-panel.is-open .menu-panel__item:nth-child(4) { transition-delay: 0.22s; }
.menu-panel.is-open .menu-panel__item:nth-child(5) { transition-delay: 0.26s; }
.menu-panel.is-open .menu-panel__item:nth-child(6) { transition-delay: 0.30s; }
.menu-panel.is-open .menu-panel__item:nth-child(7) { transition-delay: 0.34s; }
.menu-panel.is-open .menu-panel__item:nth-child(8) { transition-delay: 0.38s; }

.menu-panel__item .menu-panel__main {
	display: grid;
	grid-template-columns: minmax(140px, 220px) 1fr auto;
	align-items: center;
	gap: 32px;
	padding: 28px 8px;
	text-align: left;
	transition: padding-left 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.menu-panel__item .menu-panel__main::after {
	content: '→';
	font-family: var(--font-en);
	font-size: 19px;
	color: var(--color-fg-mute);
	transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.menu-panel__item .menu-panel__main:hover {
	padding-left: 16px;
	opacity: 1;
}
.menu-panel__item .menu-panel__main:hover::after {
	transform: translateX(6px);
	color: var(--color-fg);
}
.menu-panel__en {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(29px, 3.2vw, 41px);
	letter-spacing: 0.06em;
	color: var(--color-fg);
	line-height: 1.1;
}
.menu-panel__ja {
	font-size: 14px;
	letter-spacing: 0.18em;
	color: var(--color-fg-mute);
}

.menu-panel__sub {
	margin: 0;
	padding: 0 8px 24px 8px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.menu-panel__sub li {
	text-align: left;
}
.menu-panel__sub a {
	display: inline-block;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	padding: 4px 0;
	transition: color 0.25s var(--ease-out);
	position: relative;
}
.menu-panel__sub a::before {
	content: '−';
	margin-right: 8px;
	color: var(--color-fg-mute);
}
.menu-panel__sub a:hover {
	color: var(--color-fg);
	opacity: 1;
}

.menu-panel__lower {
	display: flex;
	gap: 24px 36px;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	list-style: none;
	margin: clamp(40px, 6vh, 64px) 0 0;
	padding: 0;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s var(--ease-out) 0.45s, transform 0.4s var(--ease-out) 0.45s;
}
.menu-panel.is-open .menu-panel__lower {
	opacity: 1;
	transform: translateY(0);
}
.menu-panel__lower a {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--color-fg-soft);
	transition: color 0.25s var(--ease-out);
}
.menu-panel__lower a:hover {
	color: var(--color-fg);
	opacity: 1;
}

@media (max-width: 900px) {
	.menu-panel__container {
		padding: 88px 24px 56px;
		max-width: 640px;
	}
	.menu-panel__item .menu-panel__main {
		grid-template-columns: 1fr auto;
		gap: 4px 16px;
		padding: 22px 4px;
	}
	.menu-panel__ja {
		grid-column: 1 / -1;
		grid-row: 2;
		font-size: 12px;
	}
	.menu-panel__item .menu-panel__main::after {
		grid-column: 2;
		grid-row: 1;
	}
	.menu-panel__en {
		font-size: clamp(23px, 5vw, 29px);
	}
	.menu-panel__sub {
		padding: 0 4px 18px;
		gap: 6px 18px;
	}
}
@media (max-width: 480px) {
	.menu-panel__container {
		padding: 80px 20px 56px;
	}
	/* en ラベル（ID 2546）: 21→24px */
	.menu-panel__en { font-size: 25px; }
	/* サブリンク（ID 2543）: 12→13px */
	.menu-panel__sub a { font-size: 14px; }
	/* メイン項目の上padding（ID 2544）: 22→40px（全項目共通） */
	.menu-panel__item .menu-panel__main { padding-top: 40px; }
	/* サブリストの下padding（ID 2545）: 18→40px（全項目共通） */
	.menu-panel__sub { padding-bottom: 40px; }
}

body.menu-open {
	overflow: hidden;
}

/* Diagnosis modal: lock scroll and hide the site header (its own ×/hamburger
   must not compete with the modal close button — fixes mobile close tap). */
body.diag-open {
	overflow: hidden;
}
body.diag-open .site-header {
	display: none;
}



/* ============================================================
 * 06-front
 * ============================================================ */

/* -----------------------------
   6. Hero
----------------------------- */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: var(--header-h);
	padding-bottom: 80px;
	display: flex;
	align-items: center;
	background: var(--color-bg);
}
/* Video hero */
.hero--video {
	color: #fff;
}
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Photo slideshow (cross-fade) */
.hero__slides {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 1.6s var(--ease-out);
	will-change: opacity;
}
.hero__slide.is-active {
	opacity: 1;
}
.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.60) 100%);
	pointer-events: none;
}
.hero__blur {
	position: absolute;
	inset: 0;
	backdrop-filter: blur(18px) saturate(110%);
	-webkit-backdrop-filter: blur(18px) saturate(110%);
	background: rgba(28, 22, 18, 0.35);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s var(--ease-out), visibility 0s 0.9s;
	pointer-events: none;
	z-index: 2;
}
.hero__blur.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.9s var(--ease-out), visibility 0s 0s;
}
.hero--video .hero__layout { position: relative; z-index: 1; }
.hero--video .hero__label { color: rgba(255,255,255,0.8); }
.hero--video .hero__title,
.hero--video .hero__sub { color: #fff; }
.hero--video .hero__lead { color: rgba(255,255,255,0.85); }
.hero--video .btn {
	background: #fff;
	color: var(--color-fg);
	border-color: #fff;
}
.hero--video .btn:hover {
	background: transparent;
	color: #fff;
}
.hero--video .btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,0.6);
}
.hero--video .btn--ghost:hover {
	background: #fff;
	color: var(--color-fg);
	border-color: #fff;
}
.hero--video .hero__scroll { color: rgba(255,255,255,0.85); }
.hero--video .hero__scroll-line { background: rgba(255,255,255,0.5); }
.hero--video .hero__scroll-line::after { background: #fff; }
.hero__layout {
	width: 100%;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}
.hero__text {
	min-width: 0;
}
.hero__media {
	margin: 0;
	overflow: hidden;
}
.hero__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}
@media (max-width: 900px) {
	.hero__layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.hero__media img {
		aspect-ratio: 16 / 11;
	}
}
/* Hero text — scroll-revealed line-by-line (nuset-style)
   Default: visible (fail-safe if JS doesn't run).
   JS adds .is-armed to [data-hero-text] to hide them, then reveals one by one. */
[data-hero-text].is-armed .hero-fade {
	opacity: 0;
	filter: blur(10px);
	transform: translateY(24px);
	transition:
		opacity 1.4s var(--ease-out),
		filter 1.6s var(--ease-out),
		transform 1.4s var(--ease-out);
	will-change: opacity, transform, filter;
}
[data-hero-text].is-armed .hero-fade.is-revealed {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-hero-text].is-armed .hero-fade {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}
}

/* Hero prose (longer narrative shown after the headline group) */
.hero__prose {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	width: 100%;
	max-width: 880px;
	padding: 0 var(--container-pad);
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s var(--ease-out), visibility 0s 0.8s;
	pointer-events: none;
}
.hero__prose.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.8s var(--ease-out), visibility 0s 0s;
}
.hero__prose-line {
	font-size: clamp(16px, 1.6vw, 21px);
	line-height: 2.2;
	letter-spacing: 0.08em;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 400;
}
.hero__prose-line:first-child {
	font-size: clamp(21px, 2.4vw, 31px);
	letter-spacing: 0.1em;
	line-height: 1.7;
	font-weight: 700;
	color: #fff;
	margin-bottom: 12px;
}

/* Hero text fade-out when transitioning to prose */
.hero--video .hero__layout .hero__text {
	transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
}
.hero__text.is-faded {
	opacity: 0;
	transform: translateY(-20px);
	pointer-events: none;
}

/* Apply hero-fade animation to prose lines as well */
[data-hero-prose].is-armed .hero-fade {
	opacity: 0;
	filter: blur(10px);
	transform: translateY(24px);
	transition:
		opacity 1.4s var(--ease-out),
		filter 1.6s var(--ease-out),
		transform 1.4s var(--ease-out);
}
[data-hero-prose].is-armed .hero-fade.is-revealed {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

/* Hero scroll hint */
.hero__hint {
	position: absolute;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.6);
	opacity: 0;
	transition: opacity 0.6s var(--ease-out);
	z-index: 5;
}
.hero__hint.is-visible { opacity: 1; }
.hero__hint.is-out { opacity: 0; }
.hero__hint-line {
	display: block;
	width: 1px;
	height: 40px;
	background: rgba(255, 255, 255, 0.4);
	position: relative;
	overflow: hidden;
	animation: hero-hint 1.8s var(--ease-out) infinite;
}
@keyframes hero-hint {
	0%   { transform: translateY(-100%); }
	100% { transform: translateY(100%); }
}

.hero__label {
	display: inline-block;
	font-family: var(--font-en);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.4em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
	margin-bottom: 44px;
}
.hero__title {
	font-size: clamp(21px, 2.8vw, 35px);
	line-height: 1.6;
	letter-spacing: 0.18em;
	font-weight: 500;
	margin-bottom: 20px;
}
/* Front hero — anchor the text block to the bottom-left and enlarge the title
   (client review). Scoped to .hero--dark so subpage heroes are unaffected.
   Title: 90px / line-height 110px / max-width 900px on BOTH PC and SP. */
.hero--dark {
	align-items: flex-end;
}
.hero--dark .hero__layout {
	grid-template-columns: 1fr;
	/* Pull the text block further left than the standard container inset (client review). */
	padding-left: clamp(20px, 3vw, 48px);
}
.hero--dark .hero__text {
	text-align: left;
}
.hero--dark .hero__title {
	font-size: 91px;
	line-height: 110px;
	max-width: 900px;
	margin-bottom: 40px;
}
/* Hero eyebrow label (client review): 12px / letter-spacing 6px / line-height 32px / margin-bottom 35px. */
.hero--dark .hero__label {
	font-size: 13px;
	letter-spacing: 6px;
	line-height: 32px;
	margin-bottom: 20px;
}
/* Hero sub copy (client review): 18px / line-height 36px. */
.hero--dark .hero__sub {
	font-size: 19px;
	line-height: 36px;
}
.hero__sub {
	font-size: clamp(13.5px, 1vw, 16px);
	color: var(--color-fg);
	letter-spacing: 0.14em;
	line-height: 2.2;
	margin-bottom: 24px;
	font-weight: 400;
}
.hero__lead {
	font-size: clamp(15px, 1.05vw, 16px);
	color: var(--color-fg-soft);
	line-height: 2.1;
	letter-spacing: 0.06em;
	margin-bottom: 56px;
}
.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.hero__scroll {
	position: absolute;
	right: var(--container-pad);
	bottom: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--color-fg-mute);
}
.hero__scroll-line {
	display: block;
	width: 1px;
	height: 64px;
	background: var(--color-fg-mute);
	position: relative;
	overflow: hidden;
}
.hero__scroll-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-fg);
	transform-origin: top;
	animation: scrollLine 2.4s var(--ease-out) infinite;
}
@keyframes scrollLine {
	0%   { transform: scaleY(0); transform-origin: top; }
	50%  { transform: scaleY(1); transform-origin: top; }
	51%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 768px) {
	.hero__scroll { display: none; }
}

/* -----------------------------
   7. VMV
----------------------------- */
/* Vertical stack per wireframe */
.vmv-stack {
	margin-top: var(--space-block);
	display: flex;
	flex-direction: column;
}
.vmv-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: clamp(24px, 4vw, 56px);
	padding: clamp(40px, 6vh, 64px) 0;
	border-top: 1px solid var(--color-line);
}
.vmv-row:last-child {
	border-bottom: 1px solid var(--color-line);
}
.vmv-row__label {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	padding-top: 8px;
}
.vmv-row__title {
	font-size: clamp(21px, 2.4vw, 31px);
	line-height: 1.7;
	letter-spacing: 0.08em;
	margin-bottom: 20px;
	max-width: 720px;
}
.vmv-row__text {
	color: var(--color-fg-soft);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	max-width: 720px;
}
@media (max-width: 768px) {
	.vmv-row {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* -----------------------------
   8a. Concept Story (craftcorp-style scrolling columns)
----------------------------- */
.story {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #2a2420;
	color: #fff;
	padding-block: clamp(80px, 12vh, 160px);
}
.story__bg {
	position: absolute;
	left: -20%;
	top: -25%;
	width: 140%;
	height: 150%;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(6px, 0.6vw, 14px);
	padding: clamp(6px, 0.6vw, 14px);
	z-index: 0;
	pointer-events: none;
	transform: rotate(-6deg);
	transform-origin: center center;
	overflow: visible;
}
.story__col {
	position: relative;
	overflow: hidden;
	height: 100%;
}
.story__col ul {
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 0.6vw, 14px);
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.story__col--1 ul { animation: story-scroll-up   45s linear infinite; }
.story__col--2 ul { animation: story-scroll-down 55s linear infinite; }
.story__col--3 ul { animation: story-scroll-up   65s linear infinite; }
.story__col--4 ul { animation: story-scroll-down 50s linear infinite; }
.story__col--5 ul { animation: story-scroll-up   60s linear infinite; }
.story__col ul li {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.story__col ul li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@keyframes story-scroll-up {
	0%   { transform: translateY(0); }
	100% { transform: translateY(-50%); }
}
@keyframes story-scroll-down {
	0%   { transform: translateY(-50%); }
	100% { transform: translateY(0); }
}

.story__overlay {
	position: absolute;
	inset: 0;
	background: rgba(40, 32, 26, 0.62);
	z-index: 1;
	pointer-events: none;
}

.story__content {
	position: relative;
	z-index: 2;
	width: 100%;
	text-align: center;
	color: #fff;
}
.story__label {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 32px;
}
.story__title {
	font-size: clamp(33px, 6vw, 81px);
	line-height: 1.5;
	letter-spacing: 0.06em;
	font-weight: 700;
	margin-bottom: 40px;
	color: #fff;
}
.story__lead {
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 2.2;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.88);
	max-width: 720px;
	margin: 0 auto 48px;
}
.story__lead strong {
	font-weight: 700;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 2px;
}
.story__cta {
	margin-top: 48px;
}
.story__cta .btn {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}
.story__cta .btn:hover {
	background: transparent;
	color: #fff;
}

.story__steps {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(16px, 3vw, 48px);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.story__steps li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.story__steps li.story__step-arrow {
	flex-direction: row;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-en);
	font-size: 19px;
}
.story__step-num {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.25em;
	color: rgba(255, 255, 255, 0.65);
}
.story__step-name {
	font-size: clamp(14px, 1.2vw, 16px);
	letter-spacing: 0.1em;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.story__col ul { animation: none; }
}
@media (max-width: 600px) {
	.story__bg { gap: 6px; padding: 6px; }
	.story__steps { flex-direction: column; gap: 16px; }
	.story__steps li.story__step-arrow { transform: rotate(90deg); }
}

/* -----------------------------
   8a2. Concept scroll-stack (solest-style) + blur-in reveal
----------------------------- */
/* Blur-in: gentle blur→sharp reveal driven by IntersectionObserver (.is-show).
   Values mirror solest: blur .5rem, translateY 6.25rem, 2s ease. */
.js-blur-in {
	opacity: 0;
	filter: blur(8px);
	transform: translateY(100px);
	transition:
		opacity 2s ease,
		filter 2s ease,
		transform 2s ease;
	will-change: opacity, transform, filter;
}
.js-blur-in.is-show {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.js-blur-in {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}
}

/* Scroll-stack — faithful to solest .pg-content-idea:
   a persistent sticky catch layer (z-index above) + cards pulled up with
   margin-top:-100svh so they stack/cross-switch behind the catch on scroll. */
.cstack {
	position: relative;
}
/* Persistent catch — stays pinned on one side while the cards switch behind it */
.cstack__catch {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	padding: clamp(112px, 16vh, 160px) var(--container-pad);
	pointer-events: none;
	z-index: 2;
}
.cstack__catch-text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	text-align: right;
	pointer-events: auto;
}
.cstack__label {
	font-family: var(--font-en);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.4em;
	color: rgba(255, 255, 255, 0.7);
	padding-right: 15px;
}
.cstack__title {
	font-size: clamp(16px, 1.4vw, 22px);
	line-height: 1.7;
	letter-spacing: 0.3em;
	font-weight: 400;
	color: #fff;
}
/* Cards pulled up to overlap the catch */
.cstack__items {
	position: relative;
	z-index: 1;
	margin-top: -100svh;
}
.cstack__item {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: clamp(112px, 16vh, 160px) var(--container-pad);
	background-size: cover;
	background-position: 50%;
	overflow: hidden;
	border-radius: clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px) 0 0;
	z-index: 1;
}
.cstack__item-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28,22,18,0.30) 0%, rgba(28,22,18,0.62) 100%);
}
.cstack__item-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.4vw, 16px);
	max-width: 600px;
	color: #fff;
}
.cstack__item-num {
	font-family: var(--font-en);
	font-weight: 400;
	font-size: clamp(14px, 1vw, 16px);
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.6);
}
.cstack__item-lead {
	font-size: clamp(18px, 1.8vw, 27px);
	line-height: 2;
	letter-spacing: 0.2em;
	font-weight: 400;
	color: #fff;
	margin: 0;
}
.cstack__item-body {
	font-size: clamp(13.5px, 1vw, 15px);
	line-height: 2.1;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}
/* Stagger within a card */
.cstack__item-lead.js-blur-in { transition-delay: 0.1s; }
.cstack__item-body.js-blur-in { transition-delay: 0.2s; }
/* Outro — sibling after the stack (catch un-pins here); narrative close + CTA */
.cstack__outro {
	position: relative;
	z-index: 3;
	background: var(--color-bg);
	padding-block: clamp(96px, 16vh, 180px);
	text-align: center;
}
.cstack__outro-inner {
	width: 100%;
}
.cstack__outro-text {
	font-size: clamp(16px, 1.5vw, 22px);
	line-height: 2.2;
	letter-spacing: 0.18em;
	font-weight: 400;
	color: var(--color-fg);
	margin: 0 0 44px;
}
.cstack__outro-text strong {
	font-weight: 500;
}
.cstack__outro-cta {
	display: flex;
	justify-content: center;
}
@media (max-width: 768px) {
	.cstack__catch {
		justify-content: flex-start;
		align-items: flex-start;
		padding: clamp(96px, 14vh, 120px) var(--container-pad);
	}
	.cstack__catch-text { text-align: left; }
	.cstack__item-text { max-width: none; }
	/* スマホのカードのリード文（client review ID 2478/2479）: 19→18px / lh 38→34px / letter-spacing 3.8→2px */
	.cstack__item-lead { font-size: 19px; line-height: 34px; letter-spacing: 2px; }
}
/* Reduced motion / no-sticky fallback — catch + cards stack in normal flow */
@media (prefers-reduced-motion: reduce) {
	.cstack__catch,
	.cstack__item {
		position: relative;
		height: auto;
		min-height: 70vh;
	}
	.cstack__items { margin-top: 0; }
}

/* -----------------------------
   8. Concept (3-node flow per wireframe — legacy styles, kept for fallback)
----------------------------- */
.concept-flow {
	display: grid;
	grid-template-columns: 1fr 32px 1fr 32px 1fr;
	gap: 24px;
	margin-top: var(--space-block);
	align-items: start;
}
.concept-flow__step {
	display: flex;
	flex-direction: column;
}
.concept-flow__media {
	margin: 0 0 24px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.concept-flow__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.concept-flow__num {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 20px;
}
.concept-flow__title {
	font-size: clamp(19px, 1.9vw, 23px);
	letter-spacing: 0.08em;
	line-height: 1.7;
	margin-bottom: 16px;
}
.concept-flow__step p {
	color: var(--color-fg-soft);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
}
.concept-flow__arrow {
	align-self: center;
	margin-top: clamp(60px, 12vw, 110px);
	width: 32px;
	height: 1px;
	background: var(--color-fg-mute);
	position: relative;
}
.concept-flow__arrow::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	border-top: 1px solid var(--color-fg-mute);
	border-right: 1px solid var(--color-fg-mute);
}
@media (max-width: 900px) {
	.concept-flow {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.concept-flow__arrow {
		justify-self: center;
		margin: 0;
		width: 1px;
		height: 32px;
	}
	.concept-flow__arrow::after {
		right: auto;
		top: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%) rotate(135deg);
	}
}

/* -----------------------------
   9. Service
----------------------------- */
.service {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-48);
	margin-top: var(--space-block);
}
.service__item {
	display: flex;
	flex-direction: column;
}
.service__media {
	margin: 0 0 32px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.service__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.service__label {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.service__num {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 24px;
}
.service__link {
	display: inline-block;
	margin-top: 24px;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--color-fg);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--color-fg);
	transition: gap 0.3s var(--ease-out);
}
.service__title {
	font-size: clamp(18px, 1.7vw, 21px);
	letter-spacing: 0.08em;
	line-height: 1.8;
	margin-bottom: 28px;
}
.service__text {
	color: var(--color-fg-soft);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	margin-bottom: 28px;
}
.service__list li {
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	padding: 14px 0;
	border-bottom: 1px solid var(--color-line-soft);
}
.service__list li:first-child {
	border-top: 1px solid var(--color-line-soft);
}

@media (max-width: 768px) {
	.service { grid-template-columns: 1fr; gap: var(--space-32); }
}

/* -----------------------------
   9b. Service Tower (unnohouse-style stacked cards)
----------------------------- */
.section--service {
	background: #f3efe8;
	padding-block: var(--space-section);
}
.srv-tower__head {
	max-width: 1100px;
	margin: 0 auto var(--space-section-sm);
	text-align: center;
}
.srv-tower__head-en {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
	margin-bottom: 24px;
}
.srv-tower__head-ja {
	font-size: clamp(29px, 4.6vw, 57px);
	letter-spacing: 0.06em;
	line-height: 1.55;
	font-weight: 700;
	margin-bottom: 32px;
}
.srv-tower__head-lead {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 2.1;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	max-width: 1040px;
	margin: 0 auto;
}

/* Two-column layout: scrolling content + sticky photo */
.srv-tower {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
}
.srv-tower__content {
	display: flex;
	flex-direction: column;
}
.srv-tower__item {
	min-height: 80vh;
	padding-block: 12vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.srv-tower__item:first-child { padding-top: 4vh; }
.srv-tower__item:last-child  { padding-bottom: 8vh; }

/* Sticky pinned photo stack */
.srv-tower__media-stack {
	position: sticky;
	top: var(--header-h);
	height: calc(100vh - var(--header-h) - 32px);
	display: flex;
	align-items: center;
	margin: 0;
}
.srv-tower__media-pinned {
	position: relative;
	width: 100%;
	height: min(80vh, 700px);
	overflow: hidden;
}
.srv-tower__media {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.8s var(--ease-out), transform 1.2s var(--ease-out);
}
.srv-tower__media.is-active {
	opacity: 1;
	transform: scale(1);
}
.srv-tower__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.srv-tower__media-num {
	position: absolute;
	right: 24px;
	bottom: 16px;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(49px, 6vw, 89px);
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.95);
	mix-blend-mode: difference;
	line-height: 1;
	pointer-events: none;
	transition: opacity 0.4s var(--ease-out);
}
.srv-tower__num {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(57px, 9vw, 129px);
	letter-spacing: 0.02em;
	color: #fff;
	line-height: 1;
	display: block;
	margin-bottom: clamp(24px, 3vw, 40px);
	grid-row: 1;
}
.srv-tower__sectitle {
	margin-bottom: clamp(24px, 3vw, 40px);
}
.srv-tower__en {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(14px, 1.05vw, 16px);
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
	margin-bottom: 16px;
}
.srv-tower__title {
	font-size: clamp(23px, 3vw, 37px);
	letter-spacing: 0.06em;
	line-height: 1.45;
	font-weight: 700;
}
.srv-tower__lead {
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.9;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	font-weight: 500;
	margin-bottom: 16px;
}
.srv-tower__desc {
	font-size: 15px;
	line-height: 1.95;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	margin-bottom: 24px;
}
.srv-tower__list {
	margin: 0 0 32px;
	padding: 24px 0 0;
	list-style: none;
	border-top: 1px solid var(--color-line);
}
.srv-tower__list li {
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	border-bottom: 1px solid var(--color-line);
	position: relative;
}
.srv-tower__list a {
	display: block;
	padding: 10px 0 10px 20px;
	color: inherit;
	transition: color 0.25s var(--ease-out), padding-left 0.3s var(--ease-out);
}
.srv-tower__list a:hover {
	color: var(--color-fg);
	padding-left: 26px;
	opacity: 1;
}
.srv-tower__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 18px;
	width: 8px;
	height: 1px;
	background: var(--color-fg);
}
.srv-tower__btn-wrap {
	margin-top: 8px;
}
.srv-tower__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: capitalize;
	color: var(--color-fg);
	padding: 8px 0;
	border-bottom: 1px solid var(--color-fg);
	transition: gap 0.4s var(--ease-out);
}
.srv-tower__btn:hover {
	gap: 20px;
	opacity: 1;
}
.srv-tower__arrow {
	font-style: normal;
	font-size: 13px;
	transition: transform 0.4s var(--ease-out);
}
.srv-tower__btn:hover .srv-tower__arrow {
	transform: translateX(4px);
}

/* Per-item media is shown only on mobile (desktop uses pinned crossfade stack) */
.srv-tower__item-media { display: none; }

@media (max-width: 900px) {
	.srv-tower { grid-template-columns: 1fr; }
	/* Hide the desktop pinned crossfade stack — each item carries its own photo on mobile */
	.srv-tower__media-stack { display: none; }
	.srv-tower__item {
		min-height: 0;
		padding-block: 24px 32px;
		border-top: 1px solid var(--color-line);
	}
	.srv-tower__item:first-child { border-top: 0; padding-top: 0; }
	.srv-tower__item-media {
		display: block;
		margin: 0 0 20px;
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}
	.srv-tower__item-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}

/* -----------------------------
   10. Why (3-column per wireframe)
----------------------------- */
.why {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-48) clamp(20px, 2.5vw, 40px);
	margin-top: var(--space-block);
}
@media (max-width: 1100px) {
	.why { grid-template-columns: repeat(2, 1fr); }
}
.why__item {
	display: flex;
	flex-direction: column;
}
.why__media {
	margin: 0 0 24px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.why__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.why__num {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 20px;
}
.why__title {
	font-size: clamp(16px, 1.4vw, 18px);
	letter-spacing: 0.08em;
	line-height: 1.7;
	margin-bottom: 16px;
}
.why__item p {
	color: var(--color-fg-soft);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
}
@media (max-width: 900px) {
	.why { grid-template-columns: 1fr; gap: 32px; }
	/* Each Feature card becomes 2-col on mobile: photo left, text right */
	.why__item {
		display: grid;
		grid-template-columns: 38% 1fr;
		gap: 16px;
		align-items: start;
	}
	.why__media { margin: 0; aspect-ratio: 4 / 3; grid-row: 1 / span 4; }
	.why__num { margin-bottom: 8px; font-size: 13px; }
	.why__title { font-size: 15px; line-height: 1.6; margin-bottom: 8px; letter-spacing: 0.06em; }
	.why__item p { font-size: 14px; line-height: 1.85; }
}

/* -----------------------------
   11. Flow
----------------------------- */
.flow {
	display: grid;
	gap: 0;
	margin-top: var(--space-block);
}
.flow__step {
	display: grid;
	grid-template-columns: 160px 200px 1fr;
	align-items: baseline;
	gap: 24px;
	padding: 32px 0;
	border-top: 1px solid var(--color-line);
}
.flow__step:last-child {
	border-bottom: 1px solid var(--color-line);
}
.flow__num {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
}
.flow__title {
	font-size: clamp(17px, 1.5vw, 20px);
	letter-spacing: 0.08em;
	line-height: 1.8;
}
.flow__step p {
	color: var(--color-fg-soft);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
}
@media (max-width: 768px) {
	.flow__step {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* -----------------------------
   12. Messages
----------------------------- */
.messages {
	display: grid;
	gap: 0;
	margin-top: var(--space-block);
}
.messages__item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 8px 32px;
	padding: 48px 0;
	border-top: 1px solid var(--color-line);
}
.messages__item:last-child { border-bottom: 1px solid var(--color-line); }
.messages__num {
	grid-column: 1;
	grid-row: 1 / span 2;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	padding-top: 8px;
}
.messages__title {
	grid-column: 2;
	font-size: clamp(19px, 2vw, 25px);
	letter-spacing: 0.08em;
	line-height: 1.8;
	margin-bottom: 20px;
}
.messages__item p {
	grid-column: 2;
	color: var(--color-fg-soft);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	max-width: 640px;
}
@media (max-width: 768px) {
	.messages__item {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* -----------------------------
   13. Entry (photo + body)
----------------------------- */
.entry {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-48);
	margin-top: var(--space-block);
}
.entry__card {
	display: flex;
	flex-direction: column;
}
.entry__media {
	margin: 0 0 32px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.entry__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.entry__body {
	border-top: 1px solid var(--color-fg);
	padding-top: 28px;
}
.entry__label {
	display: block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.entry__title {
	font-size: clamp(19px, 1.9vw, 23px);
	letter-spacing: 0.08em;
	line-height: 1.8;
	margin-bottom: 20px;
}
.entry__card p {
	color: var(--color-fg-soft);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	margin-bottom: 32px;
}
@media (max-width: 768px) {
	.entry { grid-template-columns: 1fr; }
	.entry__card { padding: 32px 24px; }
}

/* -----------------------------
   14. About
----------------------------- */
.about {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: var(--space-48);
	margin-top: var(--space-block);
}
.about__portrait {
	margin: 0 0 32px;
	overflow: hidden;
}
.about__portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}
.about__name-en {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 8px;
}
.about__name-ja {
	font-size: clamp(21px, 2.2vw, 27px);
	letter-spacing: 0.08em;
	line-height: 1.6;
	margin-bottom: 20px;
}
.about__role {
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--color-fg-mute);
	line-height: 1.9;
}
.about__body p {
	color: var(--color-fg-soft);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	margin-bottom: 28px;
}
.about__links {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--color-line);
}
.about__links a {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.15em;
	color: var(--color-fg);
}
@media (max-width: 768px) {
	.about { grid-template-columns: 1fr; gap: var(--space-32); }
}

/* -----------------------------
   14a. Works (photo grid showcase)
----------------------------- */
.works__head {
	margin-bottom: var(--space-block);
}
.works__head .section-heading { margin-bottom: 24px; }
.works-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 48px) clamp(16px, 2vw, 32px);
}
.works-grid__item {
	display: block;
}
.works-grid__link {
	display: block;
}
.works-grid__media {
	margin: 0 0 16px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.works-grid__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--ease-out);
}
.works-grid__link:hover .works-grid__media img {
	transform: scale(1.04);
}
.works-grid__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}
.works-grid__cat {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
}
.works-grid__year {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}
.works-grid__name {
	font-size: clamp(15px, 1.2vw, 17px);
	letter-spacing: 0.06em;
	font-weight: 700;
	line-height: 1.7;
}
@media (max-width: 900px) {
	.works-grid { grid-template-columns: repeat(2, 1fr); }
	/* タブレット〜スマホ全域で事例カードの見出しを大きく */
	.works-grid--case .works-grid__name { font-size: 22px; }
}
@media (max-width: 600px) {
	.works-grid { grid-template-columns: 1fr; }
	.works-grid--case .works-grid__name { font-size: 22px; }
}

/* Case study extras (works-grid--case) */
.works-grid--case .works-grid__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.works-grid__case-body {
	padding-top: 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.works-grid__case-num {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
}
.works-grid--case .works-grid__name {
	font-size: clamp(16px, 1.4vw, 19px);
	font-weight: 700;
	line-height: 1.65;
}
.works-grid__case-excerpt {
	font-size: 14px;
	color: var(--color-fg-soft);
	line-height: 1.9;
	letter-spacing: 0.04em;
	flex: 1;
}
.works-grid__case-cta {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-top: 4px;
	transition: color 0.25s var(--ease-out);
}
.works-grid__link:hover .works-grid__case-cta { color: var(--color-fg); }

/* -----------------------------
   YouTube section
----------------------------- */
.section--youtube {
	background: var(--color-bg);
}
.section--why,
.section--works,
.journal-block,
.section--youtube {
	padding-bottom: 0;
}
.yt-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 48px) clamp(16px, 2vw, 32px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.yt-card__link {
	display: block;
	color: var(--color-fg);
}
.yt-card__media {
	position: relative;
	margin: 0 0 16px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--color-fg);
}
.yt-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--ease-out), opacity 0.4s var(--ease-out);
}
.yt-card__link:hover .yt-card__media img {
	transform: scale(1.04);
	opacity: 0.7;
}
.yt-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 29px;
	color: #fff;
	pointer-events: none;
	text-shadow: 0 2px 12px rgba(0,0,0,0.4);
	transition: transform 0.3s var(--ease-out);
}
.yt-card__link:hover .yt-card__play { transform: scale(1.15); }
.yt-card__title {
	font-size: clamp(16px, 1.4vw, 19px);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.7;
	margin-bottom: 8px;
}
.yt-card__excerpt {
	font-size: 14px;
	color: var(--color-fg-soft);
	line-height: 1.9;
	letter-spacing: 0.04em;
}
@media (max-width: 900px) {
	.yt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.yt-grid { grid-template-columns: 1fr; }
	/* スマホでは動画カードの見出しを少し大きく */
	.yt-card__title { font-size: 17px; }
}

/* -----------------------------
   14a2. Events (latest 3 cards)
----------------------------- */
.events__head {
	max-width: 800px;
	margin: 0 auto var(--space-block);
	text-align: center;
}
.events__head .section-heading { margin-bottom: 24px; text-align: center; }
.events__head .section-lead { margin: 0 auto; max-width: 760px; text-align: center; }
.events-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: clamp(40px, 4vw, 80px);
	row-gap: clamp(56px, 6vw, 96px);
}
.event-card {
	display: flex;
	flex-direction: column;
}
.event-card__cat-row { padding: 0 0 12px; }
.event-card__cat {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg);
	border: 1px solid var(--color-fg);
	border-style: none; /* client 2026-07-11 #5041: solid->none */
	padding: 4px 14px;
}
.event-card__media {
	display: block;
	margin: 0 0 16px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.event-card__media figure { margin: 0; height: 100%; }
.event-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease-out);
}
.event-card__media:hover img { transform: scale(1.04); }
.event-card__schedule {
	font-family: var(--font-en);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	margin-bottom: 12px;
}
.event-card__title {
	font-size: clamp(17px, 1.4vw, 20px);
	letter-spacing: 0.06em;
	line-height: 1.9;
	margin: 20px 0 5px;
}
.event-card__excerpt {
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	margin-bottom: 20px;
	flex: 1;
}
.event-card__links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: auto;
}
.event-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.18em;
	border: 1px solid var(--color-fg);
	color: var(--color-fg);
	transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.event-card__link:hover {
	background: var(--color-fg);
	color: #fff;
	opacity: 1;
}
.event-card__link--reserve {
	background: var(--color-fg);
	color: #fff;
}
.event-card__link--reserve:hover {
	background: transparent;
	color: var(--color-fg);
}
.event-card__link i {
	font-style: normal;
	transition: transform 0.3s var(--ease-out);
}
.event-card__link:hover i { transform: translateX(3px); }

@media (max-width: 900px) {
	/* Mobile: horizontal swipe slider with scroll-snap */
	.section--events .container { padding-right: 0; }
	/* コンテナの右パディングを0にした分、見出し文が右端からはみ出すので戻す */
	.events__head { padding-right: var(--container-pad); }
	.events-grid {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		gap: 16px;
		padding: 4px var(--container-pad) 24px 0;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.events-grid::-webkit-scrollbar { display: none; }
	.events-grid > .event-card {
		flex: 0 0 78%;
		max-width: 320px;
		scroll-snap-align: start;
	}
	.events-grid > .event-card:first-child { margin-left: 0; }
}

/* -----------------------------
   14a3. Journal filter buttons (archive)
----------------------------- */
.journal-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 var(--space-block);
	padding-bottom: 24px;
	border-bottom: 0;
}
.journal-filter__btn {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 10px 18px;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	transition:
		background-color 0.25s var(--ease-out),
		border-color 0.25s var(--ease-out),
		color 0.25s var(--ease-out);
}
.journal-filter__btn:hover {
	border-color: var(--color-fg);
	color: var(--color-fg);
	opacity: 1;
}
.journal-filter__btn.is-active {
	background: var(--color-fg);
	border-color: var(--color-fg);
	color: #fff;
}
.journal-filter__btn.is-active .journal-filter__count {
	color: rgba(255, 255, 255, 0.7);
}
.journal-filter__count {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--color-fg-mute);
}

/* -----------------------------
   14b0. Journal block (craftcorp BLOG-style)
----------------------------- */
.journal-block {
	padding-block: var(--space-section);
	background: var(--color-bg);
}
.journal-block__head {
	margin-bottom: var(--space-block);
}
.journal-block__ttl {
	display: flex;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}
.journal-block__en {
	font-family: var(--font-en);
	font-weight: 700;
	font-size: clamp(49px, 7vw, 97px);
	letter-spacing: 0.02em;
	color: var(--color-fg);
	line-height: 1;
}
.journal-block__jp {
	font-size: clamp(14px, 1.1vw, 17px);
	letter-spacing: 0.18em;
	color: var(--color-fg-mute);
}
.journal-block__layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: start;
}
.journal-block__side {
	position: sticky;
	top: calc(var(--header-h) + 24px);
}
.journal-block__side-ttl {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-line);
}
.journal-block__cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}
.journal-block__cats li a {
	display: block;
	padding: 8px 0;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	border-bottom: 1px solid var(--color-line-soft);
	transition: color 0.25s var(--ease-out), padding-left 0.3s var(--ease-out);
}
.journal-block__cats li a:hover {
	color: var(--color-fg);
	padding-left: 8px;
}
.journal-block__cats .is-all {
	font-weight: 700;
	color: var(--color-fg);
}
.journal-block__posts {
	display: flex;
	flex-direction: column;
}
/* Desktop only shows the first 3 rows — the 4th exists for the mobile 2x2 grid */
@media (min-width: 901px) {
	.journal-row:nth-of-type(n+4) { display: none; }
}
.journal-row + .journal-row { border-top: 1px solid var(--color-line); }
.journal-row__link {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 32px;
	padding: 32px 0;
	color: var(--color-fg);
}
.journal-row__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.journal-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--ease-out);
}
.journal-row__link:hover .journal-row__media img { transform: scale(1.04); }
.journal-row__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.journal-row__meta {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 12px;
}
.journal-row__date {
	font-family: var(--font-en);
	font-size: 13px; /* #6365 14->13 */
	letter-spacing: 1px;
	color: #1a1a1a;
}
.journal-row__cat {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 1px; /* #6366 */
	color: #1a1a1a;
	border: 1px solid #1a1a1a;
	padding: 3px 10px;
}
.journal-row__title {
	font-size: clamp(18px, 1.6vw, 23px);
	letter-spacing: 0.06em;
	line-height: 1.55;
	margin-bottom: 8px;
}
.journal-row__excerpt {
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1.9;
	color: var(--color-fg-soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.journal-block__more {
	margin-top: 48px;
	text-align: center;
}
@media (max-width: 900px) {
	.journal-block__layout { grid-template-columns: 1fr; }
	/* グリッド列を min-width:0 にしないと、中の横スクロール帯(cats)や長い見出しが
	   列をコンテンツ幅まで膨張させ、ページ全体が横オーバーフロー＝全要素が右で見切れる。
	   これが「カテゴリが横スクロールできない／カードが見切れる」の真因。 */
	.journal-block__side,
	.journal-block__posts { min-width: 0; }
	.journal-block__side { position: static; }
	/* カテゴリは1行・横スクロールに。スクロールバーは表示して（マウス環境でも操作可） */
	.journal-block__cats {
		display: flex;
		flex-wrap: nowrap;
		gap: 20px;
		overflow-x: auto;
		touch-action: pan-x;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
	}
	.journal-block__cats li { flex: 0 0 auto; }
	.journal-block__cats li a { padding: 4px 0; border: 0; white-space: nowrap; }
	/* 記事は1列（縦並び）のリストに */
	.journal-block__posts {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.journal-row + .journal-row { border-top: 0; }
	.journal-row__link {
		grid-template-columns: 96px 1fr;
		gap: 14px;
		padding: 0;
		align-items: start;
	}
	/* テキスト列が grid セルからはみ出さないように（min-width:auto の罠対策）。
	   overflow:hidden は使わない（クリップ＝見切れになるため）。折り返しで吸収。 */
	.journal-row { min-width: 0; }
	.journal-row__body { min-width: 0; }
	.journal-row__title,
	.journal-row__excerpt { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
	.journal-row__title { font-size: 15px; line-height: 1.55; letter-spacing: 0.04em; }
	.journal-row__excerpt { display: none; }
	.journal-row__meta { gap: 8px; margin-bottom: 6px; }
	.journal-row__date { font-size: 13px; } /* #6365 SP 12->13 */
	.journal-row__cat { font-size: 11px; padding: 2px 6px; }
}

/* -----------------------------
   14b. Journal
----------------------------- */
.journal__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: var(--space-block);
}
.journal__head .section-heading {
	margin-bottom: 0;
}
.journal__more {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: capitalize;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-fg);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--color-fg);
}
.journal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-32) var(--space-32);
}
.journal-grid--archive {
	gap: 60px 60px;
	margin-top: var(--space-block);
}
.journal-card {
	display: block;
}
.journal-card__link {
	display: block;
}
.journal-card__media {
	margin: 0 0 20px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.journal-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--ease-out);
}
.journal-card__link:hover .journal-card__media img {
	transform: scale(1.04);
}
.journal-card__meta {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 12px;
}
.journal-card__date {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}
.journal-card__cat {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	border: 1px solid var(--color-line);
	padding: 3px 10px;
}
.journal-card__title {
	font-size: clamp(16px, 1.3vw, 18px);
	letter-spacing: 0.06em;
	line-height: 1.7;
	color: var(--color-fg);
}
@media (max-width: 900px) {
	.journal-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.journal-grid {
		grid-template-columns: 1fr;
		gap: var(--space-32);
	}
}



/* ============================================================
 * 07-single-journal
 * ============================================================ */

/* -----------------------------
   Article layout (Journal single — sidebar + main)
----------------------------- */
.article-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	width: 100%;
	padding-top: var(--header-h);
	align-items: start;
}
.article-layout:not(.article-layout--3col) {
	max-width: 1440px;
	margin: 0 auto;
}
/* 3-column variant — centered with max-width, same approach as service pages */
.article-layout.article-layout--3col {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) 300px;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
.article-side {
	border-right: 1px solid var(--color-line);
	align-self: stretch;
}
.article-side--right {
	border-right: 0;
	border-left: 1px solid var(--color-line);
}
.article-side__inner {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	padding: 56px 28px 56px 40px;
	max-height: calc(100vh - var(--header-h) - 32px);
	overflow-y: auto;
}
.article-side__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: #bcb6ab;
	margin-bottom: 40px;
	transition: color 0.25s var(--ease-out);
}
.article-side__back:hover { color: var(--color-fg); opacity: 1; }

.article-side__group { margin-bottom: 40px; }
.article-side__heading {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-line);
}
.article-side__cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}
.article-side__cats li a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 0;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	transition: color 0.25s var(--ease-out), padding-left 0.3s var(--ease-out);
}
.article-side__cat-count {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--color-fg-mute);
}
.article-side__cats li a:hover {
	color: var(--color-fg);
	padding-left: 6px;
}
.article-side__cats li.is-active a {
	color: var(--color-fg);
	font-weight: 700;
}

.article-side__popular {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
}
.article-side__popular > li {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-line-soft);
}
.article-side__popular > li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.article-side__popular > li > a {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 12px;
	align-items: flex-start;
	color: var(--color-fg);
}
.article-side__pop-media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.article-side__pop-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--ease-out);
}
.article-side__popular > li > a:hover .article-side__pop-media img {
	transform: scale(1.06);
}
.article-side__pop-meta {
	display: flex;
	gap: 6px;
	margin-bottom: 4px;
	flex-wrap: wrap;
}
.article-side__pop-meta time {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--color-fg-mute);
}
.article-side__pop-meta span {
	font-family: var(--font-en);
	font-size: 10px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
	border: 1px solid var(--color-line);
	padding: 1px 6px;
}
.article-side__pop-title {
	font-size: 13px;
	letter-spacing: 0.04em;
	line-height: 1.55;
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Right main content — fills the entire right grid column */
.article-main {
	padding: clamp(40px, 6vh, 80px) clamp(24px, 4vw, 80px) var(--space-section);
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	justify-self: stretch;
}
.article-main .article-bread {
	padding-top: 0;
	margin-bottom: 32px;
}

@media (max-width: 1280px) {
	.article-layout.article-layout--3col { grid-template-columns: 220px minmax(0, 1fr) 260px; }
}
@media (max-width: 1100px) {
	.article-layout.article-layout--3col { grid-template-columns: 220px minmax(0, 1fr); }
	.article-layout.article-layout--3col .article-side--right { display: none; }
}
@media (max-width: 1024px) {
	.article-layout { grid-template-columns: 240px 1fr; }
	.article-side__inner { padding: 32px 16px 32px 24px; }
}
@media (max-width: 900px) {
	.article-layout,
	.article-layout.article-layout--3col {
		grid-template-columns: 1fr;
		display: flex;
		flex-direction: column;
	}
	.article-side {
		border-right: 0;
		border-left: 0;
		border-bottom: 1px solid var(--color-line);
	}
	/* Left sidebar (TOC + CATEGORY) above article; right (NEW POSTS) below */
	.article-side--left  { order: 0; }
	.article-main        { order: 1; padding: 24px; max-width: 100%; }
	.article-side--right { order: 2; border-bottom: 0; border-top: 1px solid var(--color-line); }
	.article-layout.article-layout--3col .article-side--right { display: block; }
	.article-side__inner {
		position: static;
		max-height: none;
		padding: 32px 24px;
	}
}

/* Related posts in single page */
.related-posts--in-article {
	margin-top: var(--space-section-sm);
	padding: var(--space-block) clamp(24px, 4vw, 80px);
	background: #f3efe8;
	margin-left: calc(-1 * clamp(24px, 4vw, 80px));
	margin-right: calc(-1 * clamp(24px, 4vw, 80px));
}
@media (max-width: 900px) {
	.related-posts--in-article { margin-left: 0; margin-right: 0; }
}

.article-bread {
	font-size: 12px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.article-bread a {
	color: var(--color-fg-mute);
	transition: color 0.25s var(--ease-out);
}
.article-bread a:hover { color: var(--color-fg); opacity: 1; }
.article-bread__sep { color: var(--color-line); }
.article-bread__current {
	color: var(--color-fg);
	font-size: 12px;
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.article-single {
	margin-top: 32px;
	margin-bottom: var(--space-section-sm);
}
.article-single__header {
	margin-bottom: 32px;
}
.article-single__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.article-single__date {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}
.article-single__cat {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	border: 1px solid var(--color-line);
	padding: 4px 12px;
}
.article-single__title {
	font-size: clamp(25px, 3vw, 37px);
	letter-spacing: 0.06em;
	line-height: 1.55;
	font-weight: 700;
	color: var(--color-fg);
}
.article-single__author {
	margin: 16px 0 0;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.16em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
}
.article-single__author strong {
	font-family: var(--font-jp);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	margin-left: 8px;
}

/* Author card displayed after the article body */
.article-author-card {
	margin: var(--space-block) 0 0;
	background: var(--section-bg-soft);
	border: 1px solid var(--color-line);
}
.article-author-card__inner {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 28px;
	padding: 32px;
	color: var(--color-fg);
	transition: background 0.25s var(--ease-out);
}
.article-author-card__inner:hover {
	background: var(--section-bg-card);
	opacity: 1;
}
.article-author-card__photo {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 50%;
	background: var(--color-line-soft);
}
.article-author-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.article-author-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.article-author-card__label {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.22em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
}
.article-author-card__name {
	font-size: clamp(19px, 1.8vw, 23px);
	letter-spacing: 0.06em;
	line-height: 1.4;
	margin: 4px 0 0;
}
.article-author-card__role {
	font-size: 13px;
	letter-spacing: 0.06em;
	line-height: 1.7;
	color: var(--color-fg-soft);
	margin: 0;
}
.article-author-card__intro {
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
	margin: 6px 0 4px;
}
.article-author-card__more {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.22em;
	color: var(--color-fg);
	text-transform: capitalize;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
.article-author-card__more i {
	font-style: normal;
	transition: transform 0.3s var(--ease-out);
}
.article-author-card__inner:hover .article-author-card__more i {
	transform: translateX(4px);
}
@media (max-width: 600px) {
	.article-author-card__inner {
		grid-template-columns: 100px 1fr;
		gap: 20px;
		padding: 24px;
	}
}
.article-single__thumb {
	margin: 0 0 var(--space-block);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.article-single__thumb img,
.article-single__thumb .wp-post-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Table of contents */
.article-toc {
	background: #f3efe8;
	padding: 32px 36px;
	margin: 0 0 56px;
	border-left: 2px solid var(--color-fg);
}
.article-toc__title {
	font-size: 15px;
	letter-spacing: 0.15em;
	color: var(--color-fg);
	font-weight: 700;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-line);
}
.article-toc__list {
	counter-reset: toc-h2;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
}
.article-toc__list > li {
	counter-increment: toc-h2;
	padding: 10px 0;
	border-bottom: 1px dashed var(--color-line);
}
.article-toc__list > li:last-child { border-bottom: 0; }
.article-toc__list > li > a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	color: var(--color-fg-soft);
	transition: color 0.25s var(--ease-out), padding-left 0.3s var(--ease-out);
}
.article-toc__list > li > a::before {
	content: counter(toc-h2, decimal-leading-zero);
	flex-shrink: 0;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}
.article-toc__list > li > a:hover {
	color: var(--color-fg);
	padding-left: 4px;
	opacity: 1;
}
.article-toc__list ol {
	list-style: none;
	margin: 8px 0 0;
	padding: 0 0 0 26px;
	font-size: 13px;
	color: var(--color-fg-soft);
}
.article-toc__list ol li { padding: 4px 0; }
.article-toc__list ol li > a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	color: var(--color-fg-mute);
	transition: color 0.25s var(--ease-out), padding-left 0.3s var(--ease-out);
}
.article-toc__list ol li > a::before {
	content: '';
	width: 10px;
	height: 1px;
	background: var(--color-fg-mute);
	flex-shrink: 0;
	transform: translateY(-3px);
}
.article-toc__list ol li > a:hover {
	color: var(--color-fg);
	padding-left: 4px;
	opacity: 1;
}
.article-toc.is-empty,
[data-article-toc].is-empty { display: none; }

/* Article body */
.article-single__body {
	font-size: 17px;
	line-height: 2.05;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
.article-single__body p {
	margin: 0 0 28px;
}
.article-single__body h2 {
	font-size: clamp(21px, 2vw, 27px);
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin: 72px 0 24px;
	color: var(--color-fg);
	scroll-margin-top: calc(var(--header-h) + 24px);
}
.article-single__body h3 {
	font-size: clamp(18px, 1.7vw, 22px);
	letter-spacing: 0.06em;
	line-height: 1.7;
	margin: 52px 0 16px;
	color: var(--color-fg);
	scroll-margin-top: calc(var(--header-h) + 16px);
}
.article-single__body h4 {
	font-size: 17px;
	letter-spacing: 0.06em;
	margin: 36px 0 12px;
	color: var(--color-fg);
}
.article-single__body ul,
.article-single__body ol {
	margin: 0 0 28px;
	padding-left: 1.6em;
}
.article-single__body li { margin-bottom: 8px; }
.article-single__body img,
.article-single__body figure {
	margin: 40px 0;
}
.article-single__body figure img { margin: 0; }
.article-single__body figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--color-fg-mute);
	text-align: center;
	letter-spacing: 0.05em;
}
.article-single__body blockquote {
	border-left: 3px solid var(--color-fg);
	padding: 8px 24px;
	margin: 32px 0;
	color: var(--color-fg);
	font-style: normal;
}
.article-single__body a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.article-single__body strong { font-weight: 700; color: var(--color-fg); }

.article-single__footer {
	margin-top: var(--space-block);
	padding-top: 32px;
	border-top: 1px solid var(--color-line);
}
.article-single__nav {
	text-align: center;
}

/* Prev / Next post navigation */
.article-pn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 48px;
}
.article-pn__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border: 0;
	background: transparent;
	color: var(--color-fg);
	transition: transform 0.3s var(--ease-out);
}
.article-pn__item:hover {
	transform: translateY(-2px);
	opacity: 1;
}
.article-pn__item--empty {
	background: transparent;
	pointer-events: none;
}
.article-pn__item--next {
	text-align: right;
}
.article-pn__label {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
}
.article-pn__row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.article-pn__item--next .article-pn__row {
	flex-direction: row;
	justify-content: flex-end;
}
.article-pn__media {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	margin: 0;
	overflow: hidden;
}
.article-pn__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease-out);
}
.article-pn__item:hover .article-pn__media img {
	transform: scale(1.06);
}
.article-pn__title {
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	font-weight: 500;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}
@media (max-width: 768px) {
	.article-pn { grid-template-columns: 1fr; gap: 12px; }
	.article-pn__item--next { text-align: left; }
	.article-pn__item--next .article-pn__row { flex-direction: row-reverse; justify-content: flex-end; }
}

/* Related posts ("こちらの記事もおすすめ") */
.related-posts {
	background: var(--section-bg-soft);
	padding-block: var(--space-section-sm);
	margin-top: var(--space-section-sm);
}
.related-posts__head {
	text-align: center;
	margin-bottom: var(--space-block);
}
.related-posts__label {
	display: block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--color-fg-mute);
	margin-bottom: 12px;
}
.related-posts__title {
	font-size: clamp(21px, 2.4vw, 29px);
	letter-spacing: 0.08em;
	line-height: 1.55;
}
.related-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-32);
	list-style: none;
	margin: 0;
	padding: 0;
}
.related-posts__link {
	display: block;
	color: var(--color-fg);
}
.related-posts__media {
	margin: 0 0 16px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #fff;
}
.related-posts__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--ease-out);
}
.related-posts__link:hover .related-posts__media img { transform: scale(1.04); }
.related-posts__meta {
	display: flex;
	gap: 12px;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
	margin-bottom: 8px;
}
.related-posts__meta span {
	border: 1px solid var(--color-line);
	padding: 2px 8px;
}
.related-posts__name {
	font-size: clamp(15px, 1.3vw, 17px);
	letter-spacing: 0.06em;
	line-height: 1.7;
}
.related-posts__more {
	margin-top: var(--space-48);
	text-align: center;
}
@media (max-width: 900px) {
	.related-posts__grid { grid-template-columns: 1fr; }
}

/* (legacy single-journal styles — :not(body) prevents matching WordPress body class) */
.single-journal:not(body) {
	max-width: 800px;
	padding-top: calc(var(--header-h) + var(--space-section-sm));
}
.single-journal__label {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	display: block;
	margin-bottom: 16px;
}
.single-journal__title {
	font-size: clamp(25px, 3vw, 37px);
	letter-spacing: 0.06em;
	line-height: 1.7;
	margin-bottom: 24px;
}
.single-journal__date {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}
.single-journal__thumb {
	margin: 48px 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}
.single-journal__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.single-journal__body {
	color: var(--color-fg-soft);
	font-size: 16px;
	letter-spacing: 0.05em;
	line-height: 2.1;
}
.single-journal__body h2 { font-size: clamp(21px, 2vw, 25px); margin: 56px 0 16px; letter-spacing: 0.06em; }
.single-journal__body h3 { font-size: clamp(18px, 1.6vw, 21px); margin: 40px 0 12px; letter-spacing: 0.06em; }
.single-journal__body p { margin-bottom: 28px; }
.single-journal__body a { text-decoration: underline; }
.single-journal__nav {
	margin-top: var(--space-48);
	text-align: center;
}



/* ============================================================
 * 08-front-cta
 * ============================================================ */

/* -----------------------------
   14c. Contact CTA (front bottom)
----------------------------- */
.contact-cta {
	text-align: center;
}
.contact-cta .section-heading {
	margin-bottom: 32px;
}
.contact-cta .section-heading__title {
	max-width: 800px;
	margin-inline: auto;
}
.contact-cta__lead {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 2.1;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	margin: 0 auto 48px;
	max-width: 720px;
}
.contact-cta__buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* -----------------------------
   14c2. CTA Block (acra-a style — full-width split)
----------------------------- */
.cta-block {
	display: flex;
	min-height: 400px;
	margin: 0;
	color: #f5f5f5;
	background: var(--color-deepest);
}
.cta-block__text {
	width: 55%;
	background: var(--color-deeper);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 40px;
	font-size: clamp(16px, 1.4vw, 20px);
	letter-spacing: 0.12em;
	line-height: 2;
	font-weight: 400;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.cta-block__text::after {
	content: 'Think for Design';
	position: absolute;
	left: 50%;
	bottom: -28px;
	transform: translateX(-50%);
	font-family: var(--font-en);
	font-weight: 700;
	font-size: clamp(61px, 9vw, 141px);
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.05);
	white-space: nowrap;
	pointer-events: none;
	line-height: 1;
}
.cta-block__text-inner {
	position: relative;
	z-index: 1;
	max-width: 540px;
}
.cta-block__text-inner strong {
	font-weight: 700;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 2px;
}

.cta-block__actions {
	width: 45%;
	display: flex;
	flex-direction: column;
}

.cta-block__main {
	flex: 2;
	background: var(--color-deepest);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 4vw, 56px);
	padding: 48px 40px;
	font-family: var(--font-en);
	font-weight: 300;
	font-size: clamp(25px, 3vw, 41px);
	letter-spacing: 0.06em;
	color: #f5f5f5;
	-webkit-font-smoothing: antialiased;
	transition: background-color 0.3s var(--ease-out);
}
.cta-block__main:hover {
	background: var(--color-deeper);
	opacity: 1;
}
.cta-block__main-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(56px, 6vw, 80px);
	height: clamp(56px, 6vw, 80px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	font-size: 19px;
	color: #fff;
	transition: transform 0.4s var(--ease-out), background 0.3s var(--ease-out);
	flex-shrink: 0;
}
.cta-block__main:hover .cta-block__main-arrow {
	background: #fff;
	color: var(--color-deepest);
	transform: translateX(8px);
}

.cta-block__sub {
	flex: 1;
	background: var(--color-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px 32px;
	font-family: var(--font-en);
	font-size: clamp(15px, 1.2vw, 18px);
	letter-spacing: 0.08em;
	color: #f5f5f5;
	transition: background-color 0.3s var(--ease-out);
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.cta-block__sub:hover {
	background: var(--color-deepest);
	opacity: 1;
}
.cta-block__sub-icon {
	display: inline-flex;
	opacity: 0.85;
}
.cta-block__sub-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

@media (max-width: 900px) {
	.cta-block {
		flex-direction: column;
		min-height: 0;
	}
	.cta-block__text,
	.cta-block__actions { width: 100%; }
	.cta-block__text { padding: 56px 24px 80px; }
	.cta-block__main { padding: 40px 24px; }
	.cta-block__sub  { padding: 20px 24px; }
}
@media (max-width: 600px) {
	.cta-block__br-sp { display: none; }
	.cta-block__sub-text { font-size: 14px; word-break: break-all; }
}



/* ============================================================
 * 09-front-news
 * ============================================================ */

/* -----------------------------
   14d. News table (front)
----------------------------- */
.news-table {
	width: 100%;
	margin-top: var(--space-block);
	border-collapse: collapse;
}
.news-table__row {
	border-top: 1px solid var(--color-line);
}
.news-table__row:last-child {
	border-bottom: 1px solid var(--color-line);
}
.news-table__date,
.news-table__cat,
.news-table__title {
	padding: 24px 0;
	vertical-align: middle;
}
.news-table__date {
	width: 140px;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}
.news-table__cat {
	width: 160px;
}
.news-table__cat span {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	border: 1px solid var(--color-line);
	padding: 4px 12px;
	font-family: var(--font-en);
}
.news-table__title a {
	font-size: 15px;
	letter-spacing: 0.06em;
	line-height: 1.7;
	color: var(--color-fg);
}
@media (max-width: 768px) {
	.news-table,
	.news-table tbody,
	.news-table__row,
	.news-table__title {
		display: block;
		width: 100%;
	}
	.news-table__row {
		padding: 20px 0;
	}
	/* 日付とカテゴリは1行に並べ、カテゴリを日付の右側へ */
	.news-table__date,
	.news-table__cat {
		display: inline-block;
		width: auto;
		padding: 0 0 10px;
		vertical-align: middle;
	}
	.news-table__date {
		margin-right: 14px;
	}
	.news-table__title {
		padding: 0;
	}
}



/* ============================================================
 * 10-archive-news
 * ============================================================ */

/* -----------------------------
   15. News list
----------------------------- */
.news-list {
	margin-top: var(--space-block);
}
.news-list__item {
	border-top: 1px solid var(--color-line);
}
.news-list__item:last-child {
	border-bottom: 1px solid var(--color-line);
}
.news-list__link {
	display: grid;
	grid-template-columns: 110px max-content;
	column-gap: 24px;
	row-gap: 12px;
	align-items: center;
	padding: 28px 0;
	width: 100%;
}
.news-list__date {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}
.news-list__cat {
	font-size: 13px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
	border: 1px solid var(--color-line);
	padding: 4px 10px;
	display: inline-block;
	width: max-content;
}
.news-list__title {
	grid-column: 1 / -1;
	font-size: 16px;
	color: var(--color-fg);
	line-height: 1.8;
	width: 100%;
	display: block;
}
@media (max-width: 768px) {
	.news-list__link {
		grid-template-columns: max-content max-content;
		row-gap: 8px;
		padding: 24px 0;
	}
}



/* ============================================================
 * 11-single-news
 * ============================================================ */

/* -----------------------------
   16. Single News
----------------------------- */
.single-news:not(body) {
	max-width: 800px;
	padding-top: calc(var(--header-h) + var(--space-section-sm));
}
.single-news__date {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}
.single-news__title {
	font-size: clamp(25px, 3vw, 37px);
	line-height: 1.5;
	margin-top: 16px;
	margin-bottom: 32px;
}
.single-news__thumb {
	margin-bottom: 48px;
}
.single-news__body {
	color: var(--color-fg-soft);
	line-height: 2;
}
.single-news__body h2 {
	font-size: clamp(21px, 2vw, 25px);
	margin: 48px 0 16px;
}
.single-news__body h3 {
	font-size: clamp(18px, 1.6vw, 21px);
	margin: 32px 0 12px;
}
.single-news__body p {
	margin-bottom: 24px;
}
.single-news__body a {
	text-decoration: underline;
}
.single-news__nav {
	margin-top: var(--space-48);
	text-align: center;
}



/* ============================================================
 * 12-page-base
 * ============================================================ */

/* -----------------------------
   16b. Page hero (subpage header)
----------------------------- */
.page-hero {
	padding-top: 180px;
	padding-bottom: clamp(60px, 10vh, 120px);
	border-bottom: 1px solid var(--color-line);
}
.page-hero .container {
	max-width: var(--container-max);
}
.page-hero__label {
	display: inline-block;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--color-fg-mute);
	margin-bottom: 32px;
}
.page-hero__title {
	font-size: 45px;
	letter-spacing: 0.08em;
	line-height: 1.6;
	font-weight: 700;
	margin-bottom: 24px;
}
.page-hero__lead {
	font-size: clamp(15px, 1.05vw, 16px);
	line-height: 2.1;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	max-width: 640px;
}

.container--narrow {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* -----------------------------
   16c. Generic page content
----------------------------- */
.page-content__body {
	color: var(--color-fg-soft);
	line-height: 2.1;
	letter-spacing: 0.05em;
	font-size: 16px;
}
.page-content__body h2 {
	font-size: clamp(21px, 2.2vw, 27px);
	letter-spacing: 0.06em;
	line-height: 1.7;
	margin: 56px 0 16px;
}
.page-content__body h3 {
	font-size: clamp(18px, 1.6vw, 21px);
	letter-spacing: 0.06em;
	margin: 40px 0 12px;
}
.page-content__body p {
	margin-bottom: 28px;
}
.page-content__body ul,
.page-content__body ol {
	margin: 0 0 28px;
	padding-left: 1.4em;
}
.page-content__body li {
	margin-bottom: 8px;
}
.page-content__body a {
	text-decoration: underline;
}
.legal h2 {
	font-size: 19px;
	letter-spacing: 0.06em;
	margin: 48px 0 16px;
}
.legal__update {
	margin-top: 56px;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}

.page-text {
	max-width: 800px;
	margin-top: var(--space-block);
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 2.1;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
}
.page-text p { margin-bottom: 32px; }



/* ============================================================
 * 13-page-about
 * ============================================================ */

/* -----------------------------
   16d. Founder (About page)
----------------------------- */
.founder {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: clamp(40px, 5vw, 80px);
	margin-top: var(--space-block);
}
.founder__portrait {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.founder__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.founder__name-en {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 8px;
}
.founder__name-ja {
	font-size: clamp(25px, 2.6vw, 33px);
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}
.founder__role {
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg-mute);
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--color-line);
}
.founder__text p {
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	margin-bottom: 24px;
}
.founder__history {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--color-line);
}
.founder__history-row {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 24px;
	padding: 12px 0;
	border-bottom: 1px solid var(--color-line-soft);
}
.founder__history-row dt {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}
.founder__history-row dd {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.05em;
}
@media (max-width: 768px) {
	.founder { grid-template-columns: 1fr; }
}

/* -----------------------------
   16e. Group cards (About)
----------------------------- */
.group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-48);
	margin-top: var(--space-block);
}
.group__card {
	display: block;
	color: var(--color-fg);
}
.group__media {
	margin: 0 0 24px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}
.group__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--ease-out);
}
.group__card:hover .group__media img { transform: scale(1.04); }
.group__label {
	display: block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 12px;
}
.group__name {
	font-size: clamp(21px, 2vw, 27px);
	letter-spacing: 0.08em;
	line-height: 1.6;
	margin-bottom: 16px;
}
.group__card p {
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
@media (max-width: 768px) {
	.group { grid-template-columns: 1fr; }
}



/* ============================================================
 * 14-page-service-detail-legacy
 * ============================================================ */

/* -----------------------------
   16f. Service detail (Service page)
----------------------------- */
.service-detail {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: clamp(40px, 5vw, 80px);
	padding-block: clamp(60px, 10vh, 100px);
	border-top: 1px solid var(--color-line);
}
.service-detail:last-of-type { border-bottom: 1px solid var(--color-line); }
.service-detail--reverse {
	direction: rtl;
}
.service-detail--reverse > * { direction: ltr; }
.service-detail__num {
	display: block;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 24px;
}
.service-detail__title {
	font-size: clamp(25px, 2.8vw, 37px);
	letter-spacing: 0.08em;
	line-height: 1.6;
	margin-bottom: 16px;
}
.service-detail__lead {
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	line-height: 1.9;
}
.service-detail__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}
.service-detail__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.service-detail__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.service-detail__text p {
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	margin-bottom: 28px;
}
.service-detail__list {
	margin: 0;
}
.service-detail__list > div {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid var(--color-line);
}
.service-detail__list > div:last-child { border-bottom: 1px solid var(--color-line); }
.service-detail__list dt {
	font-size: 14px;
	letter-spacing: 0.06em;
}
.service-detail__list dd {
	margin: 0;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--color-fg-mute);
	text-align: right;
}
@media (max-width: 900px) {
	.service-detail,
	.service-detail--reverse,
	.service-detail__body {
		grid-template-columns: 1fr;
		direction: ltr;
		gap: 32px;
	}
}



/* ============================================================
 * 15-page-flow-legacy
 * ============================================================ */

/* -----------------------------
   16g. Flow detail (Flow page)
----------------------------- */
.flow-detail {
	margin-top: var(--space-block);
}
.flow-detail__step {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: clamp(40px, 5vw, 64px);
	padding-block: clamp(48px, 8vh, 72px);
	border-top: 1px solid var(--color-line);
}
.flow-detail__step:last-child { border-bottom: 1px solid var(--color-line); }
.flow-detail__num {
	display: block;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 20px;
}
.flow-detail__title {
	font-size: clamp(23px, 2.4vw, 31px);
	letter-spacing: 0.08em;
	line-height: 1.6;
}
.flow-detail__body p {
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	margin-bottom: 28px;
	max-width: 640px;
}
.flow-detail__meta {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px 32px;
	padding-top: 16px;
	border-top: 1px solid var(--color-line-soft);
	max-width: 720px;
}
.flow-detail__meta > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.flow-detail__meta dt {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
}
.flow-detail__meta dd {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.05em;
}
@media (max-width: 768px) {
	.flow-detail__step {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}



/* ============================================================
 * 16-page-faq-legacy
 * ============================================================ */

/* -----------------------------
   16h. FAQ
----------------------------- */
.faq {
	margin-top: var(--space-block);
	max-width: 920px;
}
.faq__item {
	border-top: 1px solid var(--color-line);
	padding: 28px 0;
}
.faq__item:last-child { border-bottom: 1px solid var(--color-line); }
.faq__q {
	font-size: clamp(16px, 1.4vw, 19px);
	letter-spacing: 0.06em;
	line-height: 1.7;
	font-weight: 500;
	color: var(--color-fg);
	margin-bottom: 12px;
	padding-left: 36px;
	position: relative;
}
.faq__q::before {
	content: 'Q';
	position: absolute;
	left: 0;
	font-family: var(--font-en);
	font-size: 15px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}
.faq__a {
	margin: 0 0 0 36px;
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}



/* ============================================================
 * 17-page-contact-form-legacy
 * ============================================================ */

/* -----------------------------
   16i. Contact form
----------------------------- */
.contact-form {
	margin-top: var(--space-block);
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.contact-form__row {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.contact-form__row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 24px;
}
.contact-form__row--split > div {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.contact-form__label {
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	display: flex;
	align-items: center;
	gap: 8px;
}
.contact-form__required {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.2em;
	background: var(--color-fg);
	color: #fff;
	padding: 3px 8px;
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
	width: 100%;
	padding: 16px 20px;
	border: 1px solid var(--color-line);
	background: #fff;
	font: inherit;
	font-size: 16px;
	color: var(--color-fg);
	letter-spacing: 0.04em;
	transition: border-color 0.25s var(--ease-out);
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
	outline: none;
	border-color: var(--color-fg);
}
.contact-form__textarea {
	resize: vertical;
	min-height: 200px;
}
.contact-form__check {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-size: 14px;
	letter-spacing: 0.05em;
}
.contact-form__check input {
	width: 18px;
	height: 18px;
	accent-color: var(--color-fg);
}
.contact-form__check a { text-decoration: underline; }
.contact-form__submit {
	margin-top: 16px;
	text-align: center;
}
.contact-form__note {
	margin-top: 16px;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--color-fg-mute);
}
/* Reservation-form note centred (client review; scoped so the contact page note stays left). */
.reservation .contact-form__note {
	text-align: center;
	margin-top: 0;
}
@media (max-width: 600px) {
	.contact-form__row--split { grid-template-columns: 1fr; }
}



/* ============================================================
 * 18-page-contact-info-legacy
 * ============================================================ */

/* -----------------------------
   16j. Contact info
----------------------------- */
.contact-info {
	margin-top: clamp(64px, 10vh, 100px);
	padding-top: 40px;
	border-top: 1px solid var(--color-line);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.contact-info__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.contact-info__label {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
}
.contact-info__item p {
	font-size: 15px;
	line-height: 1.8;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
.contact-info__item a { text-decoration: underline; }
@media (max-width: 768px) {
	.contact-info { grid-template-columns: 1fr; }
}



/* ============================================================
 * 19-single-service
 * ============================================================ */

/* -----------------------------
   16j2. Service single (left sidebar + right content)
----------------------------- */
.srv-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	max-width: 1440px;
	margin: 0 auto;
	padding-top: var(--header-h);
	align-items: start;
}
.srv-side {
	border-right: 1px solid var(--color-line);
	align-self: stretch;
}
.srv-side__inner {
	position: sticky;
	top: var(--header-h);
	padding: 56px 24px 56px 40px;
	max-height: calc(100vh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Subtle scrollbar so it doesn't dominate the design */
	scrollbar-width: thin;
	scrollbar-color: var(--color-line) transparent;
}
.srv-side__inner::-webkit-scrollbar { width: 6px; }
.srv-side__inner::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 3px; }
.srv-side__inner::-webkit-scrollbar-track { background: transparent; }
.srv-side__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: #bcb6ab;
	margin-bottom: 48px;
	transition: color 0.25s var(--ease-out);
}
.srv-side__back:hover { color: var(--color-fg); opacity: 1; }
.srv-side__heading {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--color-line);
}
.srv-side__heading-en {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 23px;
	letter-spacing: 0.12em;
	color: var(--color-fg);
}
.srv-side__heading-ja {
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--color-fg-mute);
}
.srv-side__heading:hover { opacity: 0.7; }

.srv-side__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.srv-side__item {
	position: relative;
}
.srv-side__item + .srv-side__item { margin-top: 22px; }
/* ── Accordion row (category label + chevron) ──────────────────── */
.srv-side__row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.srv-side__link {
	display: block;
	flex: 1 1 auto;
	font-size: 15px;
	letter-spacing: 0.06em;
	line-height: 1.6;
	color: var(--color-fg);
	transition: color 0.3s ease, opacity 0.25s var(--ease-out);
}
.srv-side__link:hover { opacity: 0.7; }
.srv-side__item.is-active > .srv-side__row > .srv-side__link {
	font-weight: 500;
}

/* Active-marker dash (kept from previous design) */
.srv-side__row::before {
	position: absolute;
	right: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%);
	content: "";
	display: block;
	height: 1px;
	background: var(--color-fg);
	width: 0;
	transition: width 0.4s var(--ease-out);
}
.srv-side__item.is-active > .srv-side__row::before {
	width: 22px;
}

/* Plus / minus toggle */
.srv-side__toggle {
	flex: 0 0 auto;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: -2px -4px -2px 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-fg);
	border-radius: 50%;
	transition: background-color 0.2s ease;
}
.srv-side__toggle:hover {
	background: rgba(0, 0, 0, 0.04);
}
.srv-side__chev {
	position: relative;
	display: block;
	width: 12px;
	height: 12px;
}
.srv-side__chev::before,
.srv-side__chev::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	background: currentColor;
	transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out);
}
.srv-side__chev::before {
	width: 12px;
	height: 1px;
	transform: translate(-50%, -50%);
}
.srv-side__chev::after {
	width: 1px;
	height: 12px;
	transform: translate(-50%, -50%);
}
.srv-side__toggle[aria-expanded="true"] .srv-side__chev::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

/* Accordion body */
.srv-side__sub {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s var(--ease-out);
}
.srv-side__item.is-open > .srv-side__sub {
	max-height: 800px;
}
.srv-side__sub-item {
	margin: 0;
	padding-left: 14px;
	position: relative;
}
.srv-side__sub-item:first-child { padding-top: 14px; }
.srv-side__sub-item:last-child  { padding-bottom: 6px; }
.srv-side__sub-item + .srv-side__sub-item { margin-top: 14px; }
.srv-side__sub-item a {
	display: block;
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1.55;
	color: var(--color-fg-soft);
	transition: color 0.25s ease;
}
.srv-side__sub-item a:hover { color: var(--color-fg); }
.srv-side__sub-item.is-active a {
	color: var(--color-fg);
	font-weight: 500;
}
/* マーカー●をテキスト垂直中央に（ID 2735）。a を flex 化し align-items:center で確実に中央へ。
   絶対配置 top オフセット依存と first-child の padding ズレ（ID 2730）を解消。 */
.srv-side__sub-item::before { display: none; }
.srv-side__sub-item { padding-left: 0; }
.srv-side__sub-item a {
	display: flex;
	align-items: center;
	gap: 9px;
}
.srv-side__sub-item a::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-fg-mute);
}
.srv-side__sub-item.is-active a::before {
	background: var(--color-fg);
}
.srv-side__cta {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--color-line);
}
.srv-side__cta-link {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.25em;
	color: var(--color-fg);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--color-fg);
	display: inline-block;
}

/* Right content */
.srv-main {
	padding: clamp(40px, 6vh, 80px) clamp(24px, 5vw, 80px) var(--space-section);
	min-width: 0;
}
.srv-main__bread {
	display: flex;
	gap: 8px;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
	margin-bottom: 32px;
}
.srv-main__bread span { color: var(--color-fg-mute); }
.srv-main__cat {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.srv-main__title {
	font-size: clamp(25px, 2.9vw, 37px);
	letter-spacing: 0.06em;
	line-height: 1.5;
	margin-bottom: 15px;
	max-width: 880px;
}
.srv-main__sub {
	font-size: 17px;
	letter-spacing: 0.06em;
	line-height: 1.9;
	margin-bottom: 48px;
	color: var(--color-fg);
	font-weight: 500;
	max-width: 720px;
}
.srv-main__media {
	margin: 0 0 56px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.srv-main__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srv-main__body {
	max-width: none;
	font-size: 16px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	margin-bottom: 64px;
}
.srv-main__section { margin-bottom: 64px; max-width: 880px; }
.srv-main__h2 {
	font-size: clamp(21px, 2vw, 27px);
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-line);
}
.srv-main__concerns {
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: 16px;
}
.srv-main__concerns li {
	padding-left: 28px;
	position: relative;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
.srv-main__concerns li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 16px;
	height: 1px;
	background: var(--color-fg);
}
.srv-main__support,
.srv-main__outcomes {
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: 16px;
}
.srv-main__support li,
.srv-main__outcomes li {
	padding-left: 28px;
	position: relative;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
.srv-main__support li::before,
.srv-main__outcomes li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 16px;
	height: 1px;
	background: var(--color-fg);
}
.srv-main__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}
.srv-main__step {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 32px;
	padding: 28px 0;
	border-top: 1px solid var(--color-line);
	align-items: baseline;
}
.srv-main__step:first-child { border-top: 0; padding-top: 0; }
.srv-main__step:last-child { border-bottom: 1px solid var(--color-line); }
.srv-main__step-num {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
}
.srv-main__step-body h3 {
	font-size: clamp(17px, 1.5vw, 20px);
	letter-spacing: 0.06em;
	margin-bottom: 12px;
}
.srv-main__step-body p {
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
.srv-main__pricebox {
	margin: 64px 0;
	padding: 48px 40px;
	border: 1px solid #ffffff;
	background: #ffffff;
	max-width: none;
	width: 100%;
}
.srv-main__pricelabel {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	display: block;
	margin-bottom: 12px;
}
.srv-main__price {
	font-family: var(--font-en);
	font-size: clamp(29px, 3vw, 39px);
	font-weight: 500;
	letter-spacing: 0.04em;
	margin-bottom: 8px;
}
.srv-main__period { font-size: 14px; letter-spacing: 0.05em; color: var(--color-fg-mute); margin-bottom: 32px; }
.srv-main__features {
	margin: 0 0 32px;
	padding: 24px 0 0;
	border-top: 1px solid var(--color-line);
	display: grid;
	gap: 12px;
	font-size: 15px;
	color: var(--color-fg-soft);
	letter-spacing: 0.05em;
	line-height: 1.7;
}
.srv-main__faqs { margin: 0; }
.srv-main__faq { padding: 24px 0; border-top: 1px solid var(--color-line); }
.srv-main__faq:first-child { border-top: 0; padding-top: 0; }
.srv-main__faq:last-child { border-bottom: 1px solid var(--color-line); }
.srv-main__faq dt {
	font-size: 19px;
	letter-spacing: 0.06em;
	line-height: 1.7;
	font-weight: 500;
	padding-left: 32px;
	position: relative;
	margin-bottom: 12px;
}
.srv-main__faq dt::before {
	content: 'Q';
	position: absolute;
	left: 0;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
}
.srv-main__faq dd {
	margin: 0 0 0 32px;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
.srv-main__cta {
	margin-top: 80px;
	padding: 56px 40px;
	background: var(--section-bg-card);
	border: 1px solid var(--color-line);
	text-align: center;
}
.srv-main__cta h2 {
	font-size: clamp(23px, 2.4vw, 31px);
	letter-spacing: 0.08em;
	line-height: 1.6;
	margin-bottom: 16px;
}
.srv-main__cta p { font-size: 15px; line-height: 1.9; color: var(--color-fg-soft); margin-bottom: 32px; }
.srv-main__cta-buttons { display: flex; gap: 16px 40px; justify-content: center; flex-wrap: wrap; }
.srv-main__cta-link {
	margin: 28px 0 0;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--color-fg-soft);
}
.srv-main__cta-link a {
	color: var(--color-fg);
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 2px;
	transition: border-color .3s ease, color .3s ease;
}
.srv-main__cta-link a:hover {
	color: var(--color-fg);
	border-bottom-color: var(--color-fg);
}
.srv-main__extra {
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: 18px;
}
.srv-main__extra li {
	padding-left: 28px;
	position: relative;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
.srv-main__extra li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 16px;
	height: 1px;
	background: var(--color-fg);
}
.srv-main__extra li strong {
	color: var(--color-fg);
	font-weight: 600;
	letter-spacing: 0.06em;
}

@media (max-width: 1024px) {
	.srv-layout {
		grid-template-columns: 240px 1fr;
	}
	.srv-side__inner { padding: 32px 16px 32px 24px; }
}
@media (max-width: 900px) {
	.srv-layout {
		grid-template-columns: 1fr;
	}
	.srv-side {
		border-right: 0;
		border-bottom: 1px solid var(--color-line);
	}
	.srv-side__inner {
		position: static;
		max-height: none;
		padding: 24px;
	}
	.srv-side__list { display: flex; flex-wrap: wrap; gap: 4px; }
	.srv-side__item a { padding: 8px 12px; border-left: 0; border-bottom: 2px solid transparent; }
	.srv-side__item.is-active a { border-left: 0; border-bottom-color: var(--color-fg); }
	.srv-main__step { grid-template-columns: 1fr; gap: 8px; }
}



/* ============================================================
 * 20-page-service
 * ============================================================ */

/* -----------------------------
   16k. Service overview (page-service)
----------------------------- */
.entry-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-32);
	margin-top: var(--space-block);
}
.entry-mini {
	border: 1px solid var(--color-line);
	padding: 32px 28px;
	background: #fff;
}
.entry-mini__cat {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.entry-mini__title {
	font-size: clamp(16px, 1.4vw, 19px);
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin-bottom: 20px;
}
.entry-mini__list {
	font-size: 14px;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	line-height: 2;
}
@media (max-width: 900px) { .entry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .entry-grid { grid-template-columns: 1fr; } }

.srv-block__head {
	margin-bottom: var(--space-block);
	max-width: 800px;
}
.srv-block__label {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.srv-block__title {
	font-size: clamp(25px, 3vw, 37px);
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin-bottom: 16px;
}
.srv-block__lead {
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
/* /service/ tonal sections — break the monotony of a single bg color
   by gently rotating through 3 shades within the same hue family. */
.srv-section {
	padding-block: var(--space-section-sm);
}
.srv-section.srv-tone--1 { background: var(--section-bg); }
.srv-section.srv-tone--2 { background: var(--section-bg-soft); }
.srv-section.srv-tone--0 {
	background: color-mix(in srgb, var(--section-bg) 65%, var(--section-bg-card) 35%);
}
/* On tone--2 (slightly darker) keep cards readable by lifting their bg */
.srv-section.srv-tone--2 .srv-card {
	background: color-mix(in srgb, var(--section-bg-card) 80%, #fff 20%);
}
/* On dark themes (sage / mocha), bump card text colors so they don't
   disappear into the olive/brown card background. */
body.theme-sage .srv-card__en,
body.theme-mocha .srv-card__en,
body.theme-sage .srv-card__price,
body.theme-mocha .srv-card__price {
	color: var(--color-fg-soft);
}
body.theme-sage .srv-card__lead,
body.theme-mocha .srv-card__lead {
	color: var(--section-accent);
}
body.theme-sage .srv-card__title,
body.theme-mocha .srv-card__title {
	color: var(--section-accent);
}
body.theme-sage .srv-tower__btn,
body.theme-mocha .srv-tower__btn {
	color: var(--section-accent);
	border-bottom-color: var(--section-accent);
}

.srv-carousel {
	position: relative;
}
.srv-cards {
	display: flex;
	gap: var(--space-32);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.srv-cards::-webkit-scrollbar { display: none; }
/* Flat prev/next arrows */
.srv-carousel__arrow {
	position: absolute;
	top: calc(50% - 13px);
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-fg);
	border: 1px solid var(--color-fg);
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.srv-carousel__arrow--prev { left: -8px; }
.srv-carousel__arrow--next { right: -8px; }
.srv-carousel__arrow svg { width: 16px; height: 16px; display: block; }
.srv-carousel__arrow:hover { background: var(--color-fg-soft); border-color: var(--color-fg-soft); }
.srv-carousel__arrow:disabled { opacity: 0; pointer-events: none; }
/* Scroll progress line */
.srv-carousel__progress {
	position: relative;
	height: 2px;
	margin-top: 24px;
	background: var(--color-line);
	overflow: hidden;
}
.srv-carousel__progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 30%;
	background: var(--color-fg);
	transition: left 0.2s var(--ease-out), width 0.2s var(--ease-out);
}
/* Hide controls when there's nothing to scroll */
.srv-carousel:not(.is-scrollable) .srv-carousel__arrow,
.srv-carousel:not(.is-scrollable) .srv-carousel__progress { display: none; }
.srv-cards .srv-card {
	flex: 0 0 auto;
	width: 340px;
	scroll-snap-align: start;
}
.srv-card {
	border: none;
	padding: 32px 28px;
	background: var(--section-bg-card);
	color: var(--color-fg);
	display: flex;
	flex-direction: column;
}

/* Service listing card (with image at top) */
.srv-card--link {
	padding: 0;
	overflow: hidden;
}
.srv-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	flex-shrink: 0;
}
.srv-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.srv-card--link:hover .srv-card__media img {
	transform: scale(1.04);
}
.srv-card__body {
	padding: 24px 28px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.srv-card__num {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 12px;
}
.srv-card__en {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.18em;
	color: var(--color-fg-mute);
	margin-bottom: 12px;
}
.srv-card__title {
	font-size: clamp(16px, 1.4vw, 18px);
	letter-spacing: 0.06em;
	line-height: 1.7;
	margin-bottom: 12px;
}
.srv-card__lead {
	font-size: 13px;
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	margin-bottom: 0;
}
.srv-card__list {
	margin: 0 0 20px;
	border-top: 1px solid var(--color-line-soft);
}
.srv-card__list li {
	border-bottom: 1px solid var(--color-line-soft);
	padding: 10px 0;
	font-size: 14px;
	letter-spacing: 0.05em;
}
.srv-card__price {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--color-fg-mute);
	margin-top: auto;
	padding-top: 16px;
	margin-bottom: 14px;
}
.srv-card__link {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--color-fg);
	padding-bottom: 0;
	border-bottom: 1px solid var(--color-fg);
	display: inline-block;
}
@media (max-width: 900px) { .srv-cards .srv-card { width: min(80vw, 300px); } }

/* Service page — category navigation (sticky under the header) */
.srv-nav {
	position: sticky;
	top: var(--header-h);
	z-index: 40;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-line);
}
.srv-nav__list {
	display: flex;
	gap: clamp(14px, 2vw, 32px);
	list-style: none;
	margin: 0;
	padding: 16px 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.srv-nav__list::-webkit-scrollbar { display: none; }
.srv-nav__list a {
	position: relative;
	display: inline-block;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--color-fg-soft);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 4px;
	transition: color 0.3s var(--ease-out);
}
.srv-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--color-fg);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--ease-out);
}
.srv-nav__list a:hover { color: var(--color-fg); }
.srv-nav__list a:hover::after { transform: scaleX(1); }
/* Offset anchored sections so they clear the fixed header + sticky nav */
.srv-section { scroll-margin-top: calc(var(--header-h) + 60px); }

.srv-related {
	margin-top: var(--space-48);
	padding: 32px 32px;
	border: 1px solid var(--color-line);
	background: #fff;
}
.srv-related h4 { font-size: 15px; letter-spacing: 0.15em; margin-bottom: 12px; font-family: var(--font-en); color: var(--color-fg-mute); }
.srv-related p { font-size: 15px; line-height: 1.9; color: var(--color-fg-soft); margin-bottom: 24px; }
.srv-related__links { display: flex; gap: 16px; flex-wrap: wrap; }



/* ============================================================
 * 21-page-service-lp-legacy
 * ============================================================ */

/* -----------------------------
   16l. Service detail (page-service-*)
----------------------------- */
.srv-detail__cat {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 8px;
}
.srv-detail__num {
	display: block;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 24px;
}
.srv-detail__title {
	font-size: clamp(27px, 3.2vw, 41px);
	letter-spacing: 0.06em;
	line-height: 1.55;
	margin-bottom: 24px;
}
.srv-detail__sub {
	font-size: clamp(16px, 1.3vw, 19px);
	letter-spacing: 0.06em;
	line-height: 1.9;
	margin-bottom: 32px;
	color: var(--color-fg);
	font-weight: 500;
}
.srv-detail__body {
	font-size: 16px;
	line-height: 2.1;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	max-width: 720px;
	margin-bottom: 56px;
}
.srv-detail__h3 {
	font-size: clamp(18px, 1.6vw, 21px);
	letter-spacing: 0.06em;
	margin: 56px 0 24px;
	padding-top: 16px;
	border-top: 1px solid var(--color-line);
}
.srv-detail__bullets {
	margin: 0 0 32px;
	padding-left: 1.4em;
	color: var(--color-fg-soft);
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
}
.srv-detail__bullets li { margin-bottom: 8px; list-style: disc; }
.srv-detail__steps {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 24px;
}
.srv-detail__steps li {
	border-top: 1px solid var(--color-line);
	padding-top: 24px;
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 24px;
}
.srv-detail__steps li span {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
}
.srv-detail__steps li h4 {
	font-size: clamp(16px, 1.4vw, 19px);
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}
.srv-detail__steps li p {
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
@media (max-width: 768px) {
	.srv-detail__steps li { grid-template-columns: 1fr; gap: 8px; }
}
.srv-detail__pricebox {
	margin-top: 56px;
	padding: 40px;
	border: 1px solid var(--color-fg);
	background: #fff;
	max-width: 560px;
}
.srv-detail__pricebox--inline {
	margin: 24px 0 32px;
	padding: 24px;
	display: flex;
	gap: 24px;
	align-items: baseline;
}
.srv-detail__pricelabel {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	display: block;
	margin-bottom: 8px;
}
.srv-detail__price {
	font-family: var(--font-en);
	font-size: clamp(25px, 3vw, 33px);
	letter-spacing: 0.04em;
	font-weight: 500;
	margin-bottom: 8px;
}
.srv-detail__period {
	font-size: 14px;
	letter-spacing: 0.05em;
	color: var(--color-fg-mute);
	margin-bottom: 24px;
}
.srv-detail__pricebox ul {
	margin: 0 0 32px;
	font-size: 14px;
	color: var(--color-fg-soft);
	line-height: 2;
	letter-spacing: 0.05em;
}

.srv-meta-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-32);
	margin-bottom: var(--space-block);
	padding-block: var(--space-32);
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
}
.srv-meta-row > div { display: flex; flex-direction: column; gap: 8px; }
.srv-meta-row span { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.25em; color: var(--color-fg-mute); }
.srv-meta-row strong { font-size: clamp(21px, 2vw, 27px); font-weight: 500; letter-spacing: 0.04em; }
.srv-meta-row p { font-size: 14px; line-height: 1.8; color: var(--color-fg-soft); }
@media (max-width: 768px) { .srv-meta-row { grid-template-columns: 1fr; } }

.callout {
	margin: 32px 0;
	padding: 24px 28px;
	background: #f3efe8;
	border-left: 2px solid var(--color-fg);
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.05em;
}

.why-three {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-32);
	margin-top: var(--space-block);
}
.why-three__item {
	border-top: 1px solid var(--color-fg);
	padding-top: 24px;
}
.why-three__item span { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.25em; color: var(--color-fg-mute); display: block; margin-bottom: 16px; }
.why-three__item h3 { font-size: clamp(18px, 1.6vw, 21px); letter-spacing: 0.06em; line-height: 1.6; margin-bottom: 16px; }
.why-three__item p { font-size: 14px; line-height: 2; letter-spacing: 0.05em; color: var(--color-fg-soft); }
@media (max-width: 900px) { .why-three { grid-template-columns: 1fr; } }

.plan-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-32);
	margin-top: var(--space-block);
}
.plan-card {
	border: 1px solid var(--color-line);
	padding: 40px 32px;
	background: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
}
.plan-card--featured {
	border-color: var(--color-fg);
	border-width: 2px;
}
.plan-card__badge {
	position: absolute;
	top: -12px;
	left: 32px;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	background: var(--color-fg);
	color: #fff;
	padding: 4px 12px;
}
.plan-card h3 { font-size: clamp(19px, 1.8vw, 23px); letter-spacing: 0.06em; margin-bottom: 12px; }
.plan-card__price { font-family: var(--font-en); font-size: clamp(21px, 2vw, 25px); letter-spacing: 0.04em; font-weight: 500; margin-bottom: 8px; }
.plan-card__lead { font-size: 14px; line-height: 1.9; color: var(--color-fg-soft); margin-bottom: 24px; }
.plan-card ul { margin: 0 0 24px; font-size: 14px; color: var(--color-fg-soft); line-height: 1.9; }
.plan-card li { padding: 8px 0; border-bottom: 1px solid var(--color-line-soft); }
.plan-card .btn { margin-top: auto; }
@media (max-width: 900px) { .plan-cards { grid-template-columns: 1fr; } }



/* ============================================================
 * 22-page-about-extras
 * ============================================================ */

/* -----------------------------
   16m. About page extras (history, achievements, company)
----------------------------- */
.history {
	margin-top: var(--space-block);
}
.history__row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: clamp(24px, 4vw, 56px);
	padding: 32px 0;
	border-top: 1px solid var(--color-line);
}
.history__row:last-child { border-bottom: 1px solid var(--color-line); }
.history__row dt { font-family: var(--font-en); font-size: 19px; letter-spacing: 0.1em; color: var(--color-fg-mute); }
.history__row dd { margin: 0; }
.history__row h4 { font-size: clamp(17px, 1.5vw, 20px); letter-spacing: 0.06em; margin-bottom: 12px; }
.history__row p { font-size: 15px; line-height: 2; letter-spacing: 0.05em; color: var(--color-fg-soft); }
@media (max-width: 768px) { .history__row { grid-template-columns: 1fr; gap: 12px; } }

.achievements {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-32);
	margin-top: var(--space-block);
}
.achievements__item {
	border-top: 1px solid var(--color-fg);
	padding-top: 24px;
}
.achievements__item strong {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(29px, 3.6vw, 49px);
	letter-spacing: 0.04em;
	display: block;
	margin-bottom: 12px;
}
.achievements__item span {
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--color-fg-mute);
}
@media (max-width: 900px) { .achievements { grid-template-columns: repeat(2, 1fr); } }

.company-info {
	margin-top: var(--space-block);
}
.company-info__row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	padding: 20px 0;
	border-top: 1px solid var(--color-line);
}
.company-info__row:last-child { border-bottom: 1px solid var(--color-line); }
.company-info__row dt { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.2em; color: var(--color-fg-mute); padding-top: 4px; }
.company-info__row dd { margin: 0; font-size: 15px; line-height: 1.9; letter-spacing: 0.05em; }
.company-info__row a { text-decoration: underline; }
@media (max-width: 768px) { .company-info__row { grid-template-columns: 1fr; gap: 4px; } }

.founder__cta {
	margin-top: 32px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}



/* ============================================================
 * 23-page-contact
 * ============================================================ */

/* -----------------------------
   16n. Contact page
----------------------------- */

/* Alert messages */
.contact-alert {
	padding: 24px 28px;
	margin-bottom: 48px;
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: 0.04em;
}
.contact-alert--success {
	background: #f0f4ef;
	border-left: 3px solid var(--color-fg);
}
.contact-alert--error {
	background: #faf0f0;
	border-left: 3px solid #c0392b;
}
.contact-alert strong { display: block; margin-bottom: 8px; font-weight: 600; }
.contact-alert ul { margin: 0; padding-left: 1.4em; }
.contact-alert li { margin-top: 4px; }

/* Intro / examples */
.contact-intro {
	margin-bottom: clamp(48px, 8vh, 80px);
	padding-bottom: clamp(48px, 8vh, 80px);
	border-bottom: 1px solid var(--color-line);
}
.contact-intro__label {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 24px;
}
.contact-examples {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.contact-examples li {
	padding: 16px 0;
	border-bottom: 1px solid var(--color-line);
	font-size: 16px;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
	padding-left: 20px;
	position: relative;
}
.contact-examples li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-fg-mute);
}
.contact-examples li:first-child { border-top: 1px solid var(--color-line); }
.contact-intro__note {
	font-size: 14px;
	line-height: 2;
	color: var(--color-fg-mute);
	letter-spacing: 0.04em;
}

/* Form wrapper */
.contact-form-wrap {
	margin-top: 0;
}
.contact-form-wrap__head {
	margin-bottom: var(--space-block);
}
.contact-form-wrap__title {
	font-size: clamp(21px, 2vw, 27px);
	letter-spacing: 0.06em;
	margin-bottom: 12px;
}
.contact-form-wrap__sub {
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--color-fg-mute);
}

/* Optional badge */
.contact-form__opt {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
	border: 1px solid var(--color-line);
	padding: 2px 7px;
}

/* Radio buttons */
.contact-form__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
}
.contact-form__radio {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 15px;
	letter-spacing: 0.04em;
}
.contact-form__radio input {
	width: 18px;
	height: 18px;
	accent-color: var(--color-fg);
	cursor: pointer;
}

/* Notice block */
.contact-notice {
	padding: 28px 32px;
	background: #f7f5f0;
	margin-top: 8px;
}
.contact-notice__title {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.contact-notice__list {
	padding-left: 1.4em;
	font-size: 14px;
	line-height: 2.1;
	color: var(--color-fg-soft);
	letter-spacing: 0.04em;
}
.contact-notice__list strong { font-weight: 600; color: var(--color-fg); }



/* ============================================================
 * 24-page-sitemap
 * ============================================================ */

/* -----------------------------
   16o. Sitemap
----------------------------- */
.sitemap-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-48) var(--space-32);
	margin-top: var(--space-block);
}
.sitemap-col h2 {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-line);
}
.sitemap-col ul li {
	padding: 8px 0;
	font-size: 15px;
	letter-spacing: 0.05em;
}
@media (max-width: 900px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sitemap-grid { grid-template-columns: 1fr; } }



/* ============================================================
 * 25-single-event
 * ============================================================ */

/* -----------------------------
   16p. Event detail (single-event)
----------------------------- */
.page-hero__schedule {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 0;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	background: transparent;
	border: 0;
}
.page-hero__schedule::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1916' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15.5 14.5'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
}
.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-top: 16px;
}
.page-hero__meta .page-hero__schedule,
.page-hero__meta .page-hero__location {
	margin-top: 0;
}
.page-hero__location {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
}
.page-hero__location::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23807a72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s-7-7.58-7-13a7 7 0 0 1 14 0c0 5.42-7 13-7 13z'/><circle cx='12' cy='9' r='2.5'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
}
.event-detail__media {
	margin: 0 0 var(--space-block);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.event-detail__media img,
.event-detail__media .wp-post-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.event-detail__body {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 2;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	margin-bottom: var(--space-block);
}

/* Catch / lead paragraph — first paragraph or any element with `.catch`.
   Mirrors .case-single__catch design (left-border accent quote). */
.event-detail__body .catch,
.event-detail__body p.is-catch,
.event-detail__body > p:first-child.lead {
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 400;
	color: var(--color-fg-soft);
	line-height: 1.8;
	letter-spacing: 0.06em;
	border-left: 2px solid var(--color-fg-mute);
	padding-left: 16px;
	margin-bottom: clamp(40px, 5vw, 64px);
}

/* Headings — match case-single hierarchy */
.event-detail__body h1 {
	font-size: clamp(23px, 2.4vw, 31px);
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	margin-top: clamp(48px, 6vw, 72px);
	margin-bottom: 20px;
}
.event-detail__body h1:first-child { margin-top: 0; }

.event-detail__body h2 {
	font-size: clamp(17px, 1.4vw, 21px);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--color-fg);
	margin-top: clamp(40px, 5vw, 64px);
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-line);
}
.event-detail__body h3 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	margin-top: 32px;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--color-line);
}
.event-detail__body h4 {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--color-fg);
	margin-top: 28px;
	margin-bottom: 10px;
}

.event-detail__body p { margin-bottom: 24px; }
.event-detail__body p:last-child { margin-bottom: 0; }

.event-detail__body img {
	width: 100%;
	height: auto;
	display: block;
	margin-block: 32px;
}
.event-detail__body figure {
	margin: 32px 0;
}
.event-detail__body figcaption {
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--color-fg-mute);
}

.event-detail__body ul,
.event-detail__body ol {
	margin: 0 0 24px;
	padding-left: 1.6em;
}
.event-detail__body li {
	margin-bottom: 6px;
	line-height: 1.9;
}
/* Event body <ul> rendered as a flat checkmark checklist (client review). */
.event-detail__body ul {
	list-style: none;
	margin-bottom: 60px;
	padding-left: 0;
}
.event-detail__body ul li {
	position: relative;
	padding-left: 2em;
}
.event-detail__body ul li::before {
	content: "";
	position: absolute;
	left: 0.15em;
	top: 0.5em;
	width: 0.62em;
	height: 0.34em;
	border-left: 2px solid var(--color-fg);
	border-bottom: 2px solid var(--color-fg);
	transform: rotate(-45deg);
}

.event-detail__body blockquote {
	margin: 24px 0;
	padding: 0 0 0 20px;
	border-left: 2px solid var(--color-fg-mute);
	font-size: 15px;
	color: var(--color-fg-soft);
	line-height: 2;
	letter-spacing: 0.05em;
}

.event-detail__body strong { font-weight: 500; color: var(--color-fg); }
.event-detail__body em     { font-style: normal; color: var(--color-fg); border-bottom: 1px solid var(--color-line); }
.event-detail__body a {
	color: var(--color-fg);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.event-detail__body a:hover { opacity: 0.7; }

.event-detail__body hr {
	border: 0;
	border-top: 1px solid var(--color-line);
	margin: 48px 0;
}

.event-detail__nav { margin-top: var(--space-section-sm); text-align: center; }

/* Reservation block */
.reservation {
	margin-top: var(--space-section-sm);
	padding: clamp(40px, 5vw, 64px);
	background: #fff;
	border: 1px solid var(--color-line);
}
.reservation__head { text-align: center; margin-bottom: var(--space-block); }
.reservation__label {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--color-fg-mute);
	display: block;
	margin-bottom: 12px;
}
.reservation__title {
	font-size: clamp(23px, 2.4vw, 29px);
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}
.reservation__lead {
	font-size: 15px;
	color: var(--color-fg-soft);
	line-height: 1.9;
}
.reservation__layout {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
}
@media (max-width: 900px) {
	.reservation__layout { grid-template-columns: 1fr; }
}

/* Calendar */
.reservation__calendar {
	background: #f8f6f2;
	padding: 24px;
	border: 1px solid var(--color-line);
}
.calendar__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}
.calendar__title {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(17px, 1.5vw, 21px);
	letter-spacing: 0.06em;
}
.calendar__btn {
	width: 32px;
	height: 32px;
	font-size: 17px;
	color: var(--color-fg);
	background: transparent;
	border: 1px solid var(--color-line);
	cursor: pointer;
	transition: background 0.2s var(--ease-out);
}
.calendar__btn:hover:not(:disabled) { background: rgba(0,0,0,0.05); }
.calendar__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.calendar__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 8px;
}
.calendar__weekdays span {
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--color-fg-mute);
	padding: 8px 0;
	font-family: var(--font-en);
}
.calendar__weekdays .is-sun { color: #c75450; }
.calendar__weekdays .is-sat { color: #5479a8; }

.calendar__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.calendar__day {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font-size: 14px;
	color: var(--color-fg);
	background: #fff;
	border: 1px solid transparent;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.calendar__day--empty {
	background: transparent;
	cursor: default;
}
.calendar__day.is-sun { color: #c75450; }
.calendar__day.is-sat { color: #5479a8; }
.calendar__day:not(:disabled):hover {
	border-color: var(--color-fg);
}
.calendar__day.is-past {
	background: transparent;
	color: rgba(0,0,0,0.18);
	cursor: not-allowed;
}
.calendar__day.is-full {
	background: #f1eee8;
	color: rgba(0,0,0,0.35);
	cursor: not-allowed;
}
.calendar__day.is-selected {
	background: var(--color-fg);
	color: #fff;
	border-color: var(--color-fg);
}
.calendar__day.is-selected.is-sun,
.calendar__day.is-selected.is-sat { color: #fff; }
.calendar__day .calendar__date {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
}
.calendar__day .calendar__icon {
	font-size: 15px;
	line-height: 1;
}
.calendar__day.is-available .calendar__icon { color: #4a8c4a; }
.calendar__day.is-few .calendar__icon       { color: #c79a4a; }
.calendar__day.is-full .calendar__icon      { color: rgba(0,0,0,0.4); }
.calendar__day.is-selected .calendar__icon  { color: #fff; }

.calendar__legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 16px;
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--color-fg-mute);
}
.calendar__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.calendar__legend-item i {
	display: inline-block;
	width: 16px;
	height: 16px;
	text-align: center;
	font-style: normal;
	font-size: 15px;
	line-height: 16px;
}
.calendar__legend-item i.is-available::before { content: '◯'; color: #4a8c4a; }
.calendar__legend-item i.is-few::before       { content: '△'; color: #c79a4a; }
.calendar__legend-item i.is-full::before      { content: '×'; color: rgba(0,0,0,0.5); }

/* Reservation panel (right side) */
.reservation__panel {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.reservation__step {
	border-top: 1px solid var(--color-line);
	padding-top: 20px;
}
.reservation__step:first-child { border-top: 0; padding-top: 0; }
.reservation__step-num {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	display: block;
	margin-bottom: 8px;
}
.reservation__step-title {
	font-size: 16px;
	letter-spacing: 0.06em;
	margin-bottom: 16px;
}
.reservation__selected {
	font-size: 15px;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	background: #f8f6f2;
	padding: 14px 16px;
	border-left: 2px solid var(--color-fg);
}
.reservation__slots {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}
.reservation__slot {
	min-height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 18px;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	background: #fff;
	border: 1px solid var(--color-line);
	cursor: pointer;
	transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
	text-align: left;
}
.reservation__slot:hover:not(:disabled) { border-color: var(--color-fg); }
.reservation__slot.is-selected {
	background: var(--color-fg);
	color: #fff;
	border-color: var(--color-fg);
}
.reservation__slot.is-full {
	background: #f1eee8;
	color: rgba(0, 0, 0, 0.4);
	cursor: not-allowed;
	border-color: var(--color-line-soft);
}
.reservation__slot-badge {
	font-family: var(--font-jp);
	font-size: 12px;
	letter-spacing: 0.06em;
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid currentColor;
	background: rgba(0, 0, 0, 0.04);
}
.reservation__slot.is-available .reservation__slot-badge { color: #4a8c4a; background: rgba(74, 140, 74, 0.08); }
.reservation__slot.is-few .reservation__slot-badge       { color: #c79a4a; background: rgba(199, 154, 74, 0.10); }
.reservation__slot.is-full .reservation__slot-badge      { color: rgba(0,0,0,0.45); background: rgba(0,0,0,0.04); }
.reservation__slot.is-selected .reservation__slot-badge {
	color: #fff;
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.4);
}
.reservation__form {
	display: grid;
	gap: 8px;
}
.reservation__form .contact-form__label {
	margin-top: 12px;
}
.reservation__summary {
	margin-top: 24px;
	padding: 14px 16px;
	background: #f8f6f2;
	font-size: 14px;
	letter-spacing: 0.05em;
}
.reservation__summary strong {
	font-weight: 500;
	color: var(--color-fg);
}
.reservation__submit {
	margin-top: 16px;
	width: 100%;
	justify-content: center;
	border-bottom: 0;
}
.reservation__submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Submission result message */
.reservation__result {
	margin-top: 16px;
	padding: 16px 20px;
	font-size: 15px;
	letter-spacing: 0.05em;
	line-height: 1.7;
	border-left: 3px solid var(--color-fg-mute);
	background: #f8f6f2;
}
.reservation__result.is-loading {
	border-left-color: var(--color-fg-mute);
	color: var(--color-fg-soft);
}
.reservation__result.is-success {
	border-left-color: #4a8c4a;
	background: #ecf5ec;
	color: #2a5e2a;
}
.reservation__result.is-error {
	border-left-color: #c75450;
	background: #fbecec;
	color: #8a3835;
}


/* -----------------------------
   Inquiry / Video application form (no calendar)
----------------------------- */
.reservation--inquiry .reservation__form--inquiry {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 720px;
	margin: 0 auto;
}
.reservation--inquiry .reservation__form-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.reservation--inquiry .reservation__submit {
	margin-top: 8px;
	align-self: flex-start;
}
.reservation--inquiry .reservation__head {
	margin-bottom: clamp(28px, 3vw, 40px);
}


/* ============================================================
 * 26-front-showcase
 * ============================================================ */

/* -----------------------------
   17a. Showcase (full-bleed photo break)
----------------------------- */
.showcase {
	margin-block: var(--space-section);
}
.showcase__media {
	margin: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
}
.showcase__media img {
	width: 100%;
	height: clamp(320px, 56vh, 640px);
	object-fit: cover;
	display: block;
}
.showcase__caption {
	margin-top: 16px;
	padding-inline: var(--container-pad);
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--color-fg-mute);
}



/* ============================================================
 * 27-footer
 * ============================================================ */

/* -----------------------------
   17. Footer
----------------------------- */
.site-footer {
	background: var(--color-deepest);
	color: #fff;
	padding-block: var(--space-section-sm);
}
.site-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.site-footer__top {
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: var(--space-48);
	padding-bottom: var(--space-48);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.site-footer__brand {
	max-width: 360px;
}
.site-footer__logo {
	display: inline-block;
	margin-bottom: 24px;
}
.site-footer__logo svg {
	width: clamp(160px, 14vw, 220px);
	height: auto;
	display: block;
}
.site-footer__logo svg text,
.site-footer__logo svg path,
.site-footer__logo svg .cls-1 {
	fill: #ffffff !important;
}
.site-footer__tagline {
	font-size: 14px;
	line-height: 2;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 24px;
}
.site-footer__address {
	font-style: normal;
	font-size: 13px;
	line-height: 1.9;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.55);
}
.site-footer__address a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
}
.site-footer__sns {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	gap: 14px;
	align-items: center;
}
.site-footer__sns a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: rgba(255, 255, 255, 0.8);
	transition: color 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}
.site-footer__sns a:hover {
	color: #fff;
	opacity: 1;
}
.site-footer__sns-text {
	font-family: var(--font-en);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.05em;
}
.site-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.site-footer__col-title {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.25em;
	text-transform: capitalize;
	color: rgba(255, 255, 255, 0.95);
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.site-footer__col-list {
	display: grid;
	gap: 10px;
}
.site-footer__col-list a {
	font-size: 13px;
	letter-spacing: 0.06em;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.25s var(--ease-out);
}
.site-footer__col-list a:hover {
	color: rgba(255, 255, 255, 1);
	opacity: 1;
}
/* Backwards-compat for older list class (if any nav fallback uses it) */
.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.site-footer__list a {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.85);
	text-transform: capitalize;
}
.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 32px;
	gap: 24px;
	flex-wrap: wrap;
}
.site-footer__copy {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.5);
}
.site-footer__legal {
	display: flex;
	gap: 16px;
}
.site-footer__legal a {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 900px) {
	.site-footer__top {
		grid-template-columns: 1fr;
		gap: var(--space-32);
	}
	.site-footer__cols {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}
@media (max-width: 600px) {
	/* スマホではフッターのサイトマップ（リンク3列）は非表示にする */
	.site-footer__cols {
		display: none;
	}
}



/* ============================================================
 * 28-animation
 * ============================================================ */

/* -----------------------------
   18. Animation: initial states
----------------------------- */
[data-anim="fade-up"] {
	opacity: 0;
	transform: translate3d(0, 32px, 0);
	transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
	will-change: opacity, transform;
}
[data-anim="fade-up"].is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Character split (used on hero + section headings) */
[data-split] .char,
[data-split-chars] .char {
	display: inline-block;
	will-change: transform;
}
/* Hidden state only applied via JS class to avoid permanent invisibility if GSAP fails */
[data-split].is-splitting .char,
[data-split-chars].is-splitting .char {
	transform: translate3d(0, 110%, 0);
	transition: transform 1s var(--ease-out);
}
[data-split].is-visible .char,
[data-split-chars].is-visible .char {
	transform: translate3d(0, 0, 0);
}
[data-split],
[data-split-chars] {
	overflow: hidden;
}

/* Image mask reveal (used on photos) */
[data-reveal] {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.2s var(--ease-out);
	will-change: clip-path;
}
[data-reveal].is-visible {
	clip-path: inset(0 0 0 0);
}

/* Image inner wrapper for zoom (counter-motion of parent reveal) */
[data-reveal] img {
	transform: scale(1.08);
	transition: transform 1.6s var(--ease-out);
}
[data-reveal].is-visible img {
	transform: scale(1);
}

/* Photo hover effect */
.hero__media img,
.showcase__media img,
.about__portrait img {
	transition: transform 0.8s var(--ease-out), filter 0.6s var(--ease-out);
}
.hero__media:hover img,
.showcase__media:hover img,
.about__portrait:hover img {
	transform: scale(1.02);
}

/* Custom cursor (small trailing ●) */
.cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-fg);
	pointer-events: none;
	z-index: 5000;
	will-change: transform, opacity;
	transition: opacity 0.4s;
	opacity: 0;
}
.cursor.is-active {
	opacity: 1;
}
@media (hover: none), (pointer: coarse) {
	.cursor { display: none; }
}

/* Scroll progress bar (fixed at top) */
.scroll-progress {
	position: fixed;
	inset: 0 auto auto 0;
	width: 100%;
	height: 1px;
	background: transparent;
	z-index: 200;
	pointer-events: none;
}
.scroll-progress__fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--color-fg);
	transform-origin: left;
	transform: scaleX(0);
	transition: transform 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
	[data-anim="fade-up"],
	[data-split] .char,
	[data-split-chars] .char,
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	[data-reveal] img {
		transform: none !important;
	}
	html.lenis,
	html.lenis body {
		scroll-behavior: smooth;
	}
}



/* ============================================================
 * 29-pagination
 * ============================================================ */

/* -----------------------------
   19. Pagination (default WP)
----------------------------- */
.pagination,
.nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: var(--space-48);
	font-family: var(--font-en);
	font-size: 15px;
	letter-spacing: 0.1em;
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--color-line);
}
.page-numbers.current {
	background: var(--color-fg);
	color: #fff;
	border-color: var(--color-fg);
}



/* ============================================================
 * 30-archive-works-legacy
 * ============================================================ */

/* =========================================================
   Works / Case — Archive (fieldcorp style)
   ========================================================= */

.case-archive {
	padding-block: var(--space-section);
}
.case-archive__head {
	margin-bottom: var(--space-block);
}

/* Category filter */
.works-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-bottom: clamp(40px, 6vw, 72px);
}
.works-filter__btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--color-fg-mute);
	border-bottom: 1px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}
.works-filter__btn:hover,
.works-filter__btn.is-active {
	color: var(--color-fg);
	border-bottom-color: var(--color-fg);
}
.works-filter__count {
	font-size: 11px;
	opacity: 0.6;
}

/* Case grid (3 columns) */
.case-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(40px, 5vw, 80px) clamp(16px, 2.5vw, 40px);
	list-style: none;
	margin: 0 0 var(--space-block);
	padding: 0;
}
.case-card__link {
	display: block;
	color: var(--color-fg);
}
.case-card__thumb {
	margin: 0 0 20px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.case-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.55s var(--ease-out);
}
.case-card__link:hover .case-card__thumb img {
	transform: scale(0.95);
}
.case-card__cat {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 1px; /* #6308 全ページ 2.9px->1px */
	color: var(--color-fg-mute);
	text-transform: capitalize;
	margin-bottom: 8px;
}
.case-card__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: 0.05em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
@media (max-width: 900px) {
	.case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.case-grid { grid-template-columns: 1fr; }
}



/* ============================================================
 * 31-single-works
 * ============================================================ */

/* =========================================================
   Works / Case — Single (fieldcorp style)
   ========================================================= */

.case-single {
	padding-bottom: 0;
}

/* Hero */
.case-single__hero {
	margin: 0;
	width: 100%;
	height: clamp(320px, 65vh, 720px);
	overflow: hidden;
}
.case-single__hero--full {
	height: 100vh;
	height: 100svh;
}

/* Site mockup — PC / SP tab + inner scroll preview (paddledesign-style) */
.case-mockup {
	padding-block: clamp(60px, 10vw, 140px);
	background: #f3efe8;
}
.case-mockup__tabs {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-bottom: clamp(32px, 4vw, 56px);
}
.case-mockup__tab {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 32px;
	border: 1px solid var(--color-fg);
	background: transparent;
	color: var(--color-fg-mute);
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.18em;
	cursor: pointer;
	transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.case-mockup__tab:first-child { border-right: 0; }
.case-mockup__tab.is-active {
	background: var(--color-fg);
	color: #fff;
}
.case-mockup__tab-icon {
	display: inline-block;
	font-size: 15px;
	line-height: 1;
}
.case-mockup__viewport {
	display: none;
}
.case-mockup__viewport.is-active {
	display: block;
}

/* PC frame — looks like a Mac browser window */
.case-mockup__frame--pc {
	max-width: 1100px;
	margin: 0 auto;
	background: #fff;
	border-radius: 10px 10px 0 0;
	box-shadow: 0 30px 80px rgba(28, 22, 18, 0.20);
	overflow: hidden;
	border: 1px solid #d8d4cc;
}
.case-mockup__bar--pc {
	display: flex;
	gap: 8px;
	padding: 14px 18px;
	background: linear-gradient(#f0ece5, #e8e4dd);
	border-bottom: 1px solid #d8d4cc;
}
.case-mockup__bar--pc span {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #d8d4cc;
}
.case-mockup__bar--pc span:nth-child(1) { background: #ff5f57; }
.case-mockup__bar--pc span:nth-child(2) { background: #febc2e; }
.case-mockup__bar--pc span:nth-child(3) { background: #28c840; }
.case-mockup__frame--pc .case-mockup__scroll {
	height: clamp(420px, 65vh, 720px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}
.case-mockup__frame--pc .case-mockup__scroll img {
	width: 100%;
	height: auto;
	display: block;
}

/* SP frame — looks like a phone */
.case-mockup__frame--sp {
	max-width: 380px;
	margin: 0 auto;
	background: #1d1916;
	border-radius: 40px;
	padding: 14px 14px 16px;
	box-shadow: 0 30px 80px rgba(28, 22, 18, 0.22);
	position: relative;
}
.case-mockup__bar--sp {
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}
.case-mockup__bar--sp::before {
	content: '';
	width: 92px;
	height: 6px;
	border-radius: 6px;
	background: #fff;
	opacity: 0.35;
}
.case-mockup__frame--sp .case-mockup__scroll {
	background: #fff;
	border-radius: 26px;
	height: clamp(520px, 70vh, 760px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.case-mockup__frame--sp .case-mockup__scroll img {
	width: 100%;
	height: auto;
	display: block;
}

/* Custom scrollbars for the inner viewports */
.case-mockup__scroll::-webkit-scrollbar { width: 8px; }
.case-mockup__scroll::-webkit-scrollbar-track { background: transparent; }
.case-mockup__scroll::-webkit-scrollbar-thumb {
	background: rgba(28, 22, 18, 0.20);
	border-radius: 8px;
}
.case-mockup__scroll::-webkit-scrollbar-thumb:hover { background: rgba(28, 22, 18, 0.35); }

@media (max-width: 600px) {
	.case-mockup__frame--pc { max-width: 100%; }
	.case-mockup__frame--pc .case-mockup__scroll { height: 60vh; }
	.case-mockup__bar--pc { padding: 10px 14px; }
	.case-mockup__bar--pc span { width: 9px; height: 9px; }
	.case-mockup__tab { padding: 12px 22px; font-size: 12px; }
}

/* Cutout images (brochure / deliverable mockups, fieldcorp-style) */
.case-cutouts {
	padding-block: clamp(60px, 10vw, 140px);
	background: #d8cbb1;
}
.case-cutouts .container {
	max-width: 1080px;
}
.case-cutouts__item {
	margin: 0 auto;
	padding-block: clamp(32px, 5vw, 80px);
	max-width: 880px;
	display: block;
}
.case-cutouts__item:first-child { padding-top: 0; }
.case-cutouts__item:last-child  { padding-bottom: 0; }
.case-cutouts__item img {
	width: 100%;
	height: auto;
	display: block;
}
.case-cutouts__caption {
	margin: 24px auto 0;
	max-width: 720px;
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
	text-align: center;
}
.case-single__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Breadcrumb */
.case-single__breadcrumb {
	padding-block: 20px;
	border-bottom: 1px solid var(--color-line);
	margin-bottom: clamp(40px, 6vw, 80px);
}
.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--color-fg-mute);
}
.breadcrumb-list li + li::before {
	content: ' / ';
	margin: 0 8px;
	opacity: 0.5;
}
.breadcrumb-list a {
	color: var(--color-fg-mute);
	transition: color 0.2s;
}
.breadcrumb-list a:hover { color: var(--color-fg); }

/* Inner layout: main + aside */
.case-single__inner {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 0 clamp(48px, 6vw, 96px);
	align-items: start;
	margin-bottom: var(--space-section);
}

/* Title block */
.case-single__head {
	margin-bottom: clamp(40px, 5vw, 64px);
}
.case-single__cat {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.22em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
	margin-bottom: 16px;
}
.case-single__title {
	font-size: clamp(21px, 2.4vw, 31px);
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: 0.06em;
	margin-bottom: 20px;
}
.case-single__catch {
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 400;
	color: var(--color-fg-soft);
	line-height: 1.8;
	letter-spacing: 0.06em;
	border-left: 2px solid var(--color-fg-mute);
	padding-left: 16px;
}

/* Article content */
.case-single__content {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 2;
	letter-spacing: 0.05em;
}
.case-single__content h2 {
	font-size: clamp(17px, 1.4vw, 21px);
	font-weight: 500;
	letter-spacing: 0.08em;
	margin-top: clamp(40px, 5vw, 64px);
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-line);
}
.case-single__content h3 {
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 500;
	margin-top: 32px;
	margin-bottom: 12px;
}
.case-single__content p { margin-bottom: 1.6em; }
.case-single__content img {
	width: 100%;
	height: auto;
	display: block;
	margin-block: 32px;
}

/* Sidebar: project info */
.case-single__aside {
	position: sticky;
	top: calc(var(--header-h) + 24px);
}
.case-info {
	border: 1px solid #ffffff;
	background-color: #ffffff;
	padding: 28px 24px;
}
.case-info__label {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.28em;
	color: var(--color-fg-mute);
	margin-bottom: 20px;
}
.case-info__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.case-info__item {
	padding: 14px 0;
	border-top: 1px solid var(--color-line-soft);
	display: block;
}
.case-info__item:first-child { border-top: none; padding-top: 0; }
.case-info__item dt {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
	margin-bottom: 6px;
}
.case-info__item dd {
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
	margin: 0;
}
.case-info__link {
	display: inline-flex; align-items: baseline; gap: 4px;
	color: var(--color-fg);
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 2px;
	transition: border-color .25s ease;
}
.case-info__link:hover { border-bottom-color: var(--color-fg); }
.case-info__link span { font-size: 12px; color: var(--color-fg-mute); }
.case-info__visit {
	display: inline-flex !important;
	margin-top: 24px;
	width: 100%;
	justify-content: center;
}

/* Prev / All / Next navigation */
.case-nav {
	border-top: 1px solid var(--color-line);
	padding-block: clamp(40px, 6vw, 80px);
	margin-top: 0;
}
.case-nav__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-inline: var(--container-pad);
	align-items: center;
}
.case-nav__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--color-fg);
	max-width: 280px;
}
.case-nav__link--right {
	align-items: flex-end;
	margin-left: auto;
}
.case-nav__dir {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	transition: color 0.2s;
}
.case-nav__link:hover .case-nav__dir { color: var(--color-fg); }
.case-nav__thumb {
	margin: 0;
	width: 100%;
	max-width: 200px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.case-nav__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease-out);
}
.case-nav__link:hover .case-nav__thumb img { transform: scale(1.04); }
.case-nav__label {
	font-size: 13px;
	letter-spacing: 0.06em;
	line-height: 1.7;
	color: var(--color-fg-soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.case-nav__all {
	text-align: center;
}
.case-nav__all-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--color-fg);
}
.case-nav__all-label {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.28em;
	color: var(--color-fg-mute);
}
.case-nav__all-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3px;
	width: 18px;
}
.case-nav__all-grid i {
	display: block;
	width: 7px;
	height: 7px;
	background: var(--color-fg-mute);
	transition: background 0.2s;
}
.case-nav__all-link:hover .case-nav__all-grid i { background: var(--color-fg); }
.case-nav__empty { display: block; }

@media (max-width: 960px) {
	.case-single__inner {
		grid-template-columns: 1fr;
	}
	.case-single__aside {
		position: static;
		order: -1;
		margin-bottom: 40px;
	}
}
@media (max-width: 640px) {
	.case-nav__inner {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
	}
	.case-nav__all {
		grid-column: 1 / -1;
		order: -1;
		margin-bottom: 8px;
	}
	.case-nav__thumb { max-width: 140px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONCEPT PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* — Wrapper ——————————————————————————————————————— */
.concept-wrap {
	display: grid;
	grid-template-columns: 270px 1fr;
	max-width: none;
	margin: 0;
	/* コンテンツページとして快適な左右余白（左右対称・ヘッダーの1.2vwより広く） */
	padding: 180px clamp(24px, 4vw, 72px) 0;
	align-items: start;
}

/* — Left sidebar ————————————————————————————————— */
.concept-sidebar {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	padding: 0 40px clamp(60px, 8vh, 100px) 0;
}
.concept-sidebar__cat {
	display: block;
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--color-fg-mute);
	margin-bottom: 10px;
}
.concept-sidebar__title {
	display: block;
	font-family: var(--font-en);
	font-size: 25px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--color-fg);
	margin-bottom: 60px;
	line-height: 1;
}
.concept-sidebar__nav {
	display: flex;
	flex-direction: column;
}
.concept-sidebar__link {
	display: block;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--color-fg-mute);
	padding: 10px 0 10px 0;
	border-bottom: 1px solid var(--color-line);
	text-decoration: none;
	transition: color 0.25s, padding-left 0.3s;
	position: relative;
}
.concept-sidebar__link:first-child { border-top: 1px solid var(--color-line); }
.concept-sidebar__link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 1px;
	background: var(--color-fg);
	transition: width 0.3s ease;
}
.concept-sidebar__link:hover { color: var(--color-fg); }
.concept-sidebar__link.is-active {
	color: var(--color-fg);
	padding-left: 20px;
}
.concept-sidebar__link.is-active::before { width: 12px; }

/* — Right content ———————————————————————————————— */
.concept-content {
	border-left: 1px solid var(--color-line);
	padding-left: clamp(40px, 5vw, 80px);
	padding-top: 0;
	padding-bottom: 120px;
}

/* — Sections ————————————————————————————————————— */
.concept-section {
	padding: 0 0 72px;
	border-bottom: 1px solid var(--color-line);
}
.concept-section--statement {
	padding-top: 0;
	padding-bottom: 40px;
	border-bottom: none;
}
.concept-section--last { border-bottom: none; }

/* — Feature photo (statement直下) ———————————————— */
.concept-feat-img {
	margin: 0 0 40px;
	overflow: hidden;
	aspect-ratio: 16 / 7;
}
.concept-feat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* — Main copy ———————————————————————————————————— */
.concept-statement {
	font-size: clamp(31px, 4vw, 61px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.02em;
	margin-bottom: 40px;
}

/* — Section heading ——————————————————————————————— */
.concept-section__head { margin-bottom: 36px; }
.concept-section__ja {
	display: block;
	font-size: 35px;
	font-weight: 700;
	margin-bottom: 5px;
}
.concept-section__en {
	display: block;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: capitalize;
	color: var(--color-fg-mute);
}

/* — Body text ———————————————————————————————————— */
.concept-text p {
	font-size: 16px;
	line-height: 2.4;
	color: var(--color-fg-soft);
}
.concept-text p + p { margin-top: 1.5em; }

/* — Image + text (想い section) ————————————————— */
.concept-img-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}
.concept-img-text__fig {
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.concept-img-text__fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.concept-img-text__body p {
	font-size: 16px;
	line-height: 2.4;
	color: var(--color-fg-soft);
}
.concept-img-text__body p + p { margin-top: 1.5em; }

/* — 2-photo row (背景 section) ——————————————————— */
.concept-img-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 48px;
}
.concept-img-row figure {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.concept-img-row figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* — Profile ——————————————————————————————————————— */
.concept-profile {
	display: grid;
	grid-template-columns: clamp(180px, 26%, 300px) 1fr;
	gap: 48px;
	align-items: start;
}
.concept-profile__fig {
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.concept-profile__fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 0.9s ease;
}
.concept-profile__fig:hover img { transform: scale(1.04); }
.concept-profile__name-en {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--color-fg-mute);
	margin-bottom: 6px;
}
.concept-profile__name {
	font-size: clamp(21px, 2.2vw, 27px);
	font-weight: 300;
	letter-spacing: 0.05em;
	margin-bottom: 10px;
}
.concept-profile__role {
	font-size: 12px;
	line-height: 1.9;
	color: var(--color-fg-mute);
	margin-bottom: 24px;
}
.concept-profile__text p {
	font-size: 14px;
	line-height: 2.3;
	color: var(--color-fg-soft);
}
.concept-profile__text p + p { margin-top: 1.4em; }

/* — Message closing ——————————————————————————————— */
.concept-closing {
	font-size: clamp(16px, 1.6vw, 21px) !important;
	font-weight: 300 !important;
	color: var(--color-fg) !important;
	line-height: 1.9 !important;
	padding-top: 40px;
	margin-top: 40px !important;
	border-top: 0;
}
.concept-sig {
	font-family: var(--font-en);
	font-size: 15px !important;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute) !important;
	margin-top: 18px !important;
}

/* — Responsive ——————————————————————————————————— */
@media (max-width: 1200px) {
	.concept-wrap { grid-template-columns: 200px 1fr; }
	.concept-sidebar__title { font-size: 21px; }
}
@media (max-width: 860px) {
	.concept-wrap { grid-template-columns: 1fr; }
	.concept-sidebar {
		position: static;
		padding: clamp(40px, 6vh, 72px) 0 0;
	}
	.concept-sidebar__nav { display: none; }
	.concept-content {
		border-left: none;
		border-top: 1px solid var(--color-line);
		padding-left: 0;
		margin-top: 32px;
	}
	.concept-img-text { grid-template-columns: 1fr; gap: 32px; }
	.concept-img-text__fig { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
	.concept-profile { grid-template-columns: 1fr; gap: 28px; }
	.concept-profile__fig { max-width: 220px; }
	.concept-img-row { grid-template-columns: 1fr; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STAFF PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* — Lead ————————————————————————————————————————— */
.staff-lead {
	max-width: 720px;
	margin-top: 40px;
}
.staff-lead p {
	font-size: 16px;
	line-height: 2.3;
	color: var(--color-fg-soft);
}
.staff-lead p + p { margin-top: 1.4em; }

/* — Staff grid (overview cards) ——————————————————— */
.staff-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	margin-top: 56px;
}
.staff-card__inner {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.staff-card__fig {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-bottom: 28px;
	background: var(--color-line);
}
.staff-card__fig--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}
.staff-card__fig--placeholder::after {
	content: 'PHOTO';
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
}
.staff-card__fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 0.8s ease;
}
.staff-card:hover .staff-card__fig img { transform: scale(1.04); }
.staff-card__en {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--color-fg-mute);
	margin-bottom: 4px;
}
.staff-card__name {
	font-size: clamp(19px, 1.8vw, 23px);
	font-weight: 300;
	letter-spacing: 0.04em;
	margin-bottom: 10px;
}
.staff-card__role {
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-fg-mute);
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--color-line);
}
.staff-card__domains {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin-bottom: 20px;
}
.staff-card__domains li {
	font-size: 11px;
	letter-spacing: 0.04em;
	padding: 3px 10px;
	border: 1px solid var(--color-line);
	color: var(--color-fg-mute);
}
.staff-card__intro {
	font-size: 14px;
	line-height: 2.0;
	color: var(--color-fg-soft);
	padding-bottom: 24px;
	flex: 1;
}
.staff-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--color-fg);
	margin-top: auto;
}
.staff-card__more::after {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	background: currentColor;
	transition: width 0.3s;
}
.staff-card:hover .staff-card__more::after { width: 36px; }

/* — Profile detail ———————————————————————————————— */
.staff-profile {
	border-top: 1px solid var(--color-line);
}
.staff-profile__layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 72px;
	align-items: start;
}
.staff-profile--reverse .staff-profile__layout {
	grid-template-columns: 1fr 320px;
}
.staff-profile--reverse .staff-profile__fig { order: 2; }
.staff-profile--reverse .staff-profile__body { order: 1; }

.staff-profile__fig {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--color-line);
}
.staff-profile__fig--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}
.staff-profile__fig--placeholder::after {
	content: 'PHOTO';
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
}
.staff-profile__fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.staff-profile__en {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--color-fg-mute);
	margin-bottom: 6px;
}
.staff-profile__name {
	font-size: clamp(23px, 2.4vw, 31px);
	font-weight: 300;
	letter-spacing: 0.04em;
	margin-bottom: 10px;
}
.staff-profile__role {
	font-size: 13px;
	line-height: 1.9;
	color: var(--color-fg-mute);
	padding-bottom: 28px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--color-line);
}
.staff-profile__bio {
	margin-bottom: 40px;
}
.staff-profile__bio p {
	font-size: 15px;
	line-height: 2.3;
	color: var(--color-fg-soft);
}
.staff-profile__bio p + p { margin-top: 1.4em; }

/* — Message blockquote ——————————————————————————— */
.staff-profile__message {
	border-left: 2px solid var(--color-fg);
	padding: 4px 0 4px 28px;
	margin: 0 0 40px;
}
.staff-profile__message p {
	font-size: 15px;
	line-height: 2.3;
	color: var(--color-fg-soft);
}
.staff-profile__message p + p { margin-top: 1.2em; }

/* — Qualifications ——————————————————————————————— */
.staff-qualifications {
	margin-bottom: 36px;
}
.staff-qualifications__label {
	display: block;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: capitalize;
	color: var(--color-fg-mute);
	margin-bottom: 10px;
}
.staff-qualifications__list {
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--color-line);
}
.staff-qualifications__list li {
	font-size: 13px;
	color: var(--color-fg-soft);
	padding: 9px 0;
	border-bottom: 1px solid var(--color-line);
}

/* — Writing topics ——————————————————————————————— */
.staff-topics {
	margin-bottom: 40px;
}
.staff-topics__label {
	display: block;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: capitalize;
	color: var(--color-fg-mute);
	margin-bottom: 12px;
}
.staff-topics__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
}
.staff-topics__list li {
	font-size: 12px;
	padding: 5px 14px;
	border: 1px solid var(--color-line);
	color: var(--color-fg-soft);
}

/* — Article link ————————————————————————————————— */
.staff-profile__article-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--color-fg);
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	transition: gap 0.3s;
}
.staff-profile__article-link:hover { gap: 20px; }

/* — Bottom CTA row ——————————————————————————————— */
.staff-cta-row {
	border-top: 1px solid var(--color-line);
}
.staff-cta-row__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 64px;
	align-items: center;
}
.staff-cta-row__heading {
	font-size: clamp(19px, 2vw, 27px);
	font-weight: 300;
	line-height: 1.5;
	margin-bottom: 16px;
}
.staff-cta-row__lead {
	font-size: 15px;
	line-height: 2.1;
	color: var(--color-fg-soft);
	max-width: 560px;
}
.staff-cta-row__btns {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-shrink: 0;
	min-width: 260px;
}
.staff-cta-row__btns .btn {
	width: 100%;
	justify-content: center;
}

/* — Responsive ——————————————————————————————————— */
@media (max-width: 1000px) {
	.staff-profile__layout,
	.staff-profile--reverse .staff-profile__layout {
		grid-template-columns: 260px 1fr;
		gap: 48px;
	}
	.staff-profile--reverse .staff-profile__fig { order: 0; }
	.staff-profile--reverse .staff-profile__body { order: 0; }
}
@media (max-width: 760px) {
	.staff-grid { grid-template-columns: 1fr; gap: 56px; }
	.staff-profile__layout,
	.staff-profile--reverse .staff-profile__layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.staff-profile__fig { position: static; max-width: 260px; }
	.staff-cta-row__inner { grid-template-columns: 1fr; gap: 40px; }
}



/* ============================================================
 * 32-page-flow
 * ============================================================ */

/* =============================================================
   19. Flow page
   ============================================================= */

/* — Sidebar + Content layout ————————————————————————————— */
.flow-wrap {
	display: grid;
	grid-template-columns: 260px 1fr;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 clamp(24px, 6vw, 100px);
	align-items: start;
}
.flow-sidebar {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	padding: clamp(48px, 5vw, 72px) 40px clamp(60px, 8vh, 100px) 0;
}
.flow-sidebar__top {
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-line);
}
.flow-sidebar__cat {
	display: block;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--color-fg-mute);
	margin-bottom: 6px;
}
.flow-sidebar__title {
	display: block;
	font-family: var(--font-en);
	font-size: 23px;
	font-weight: 500;
	letter-spacing: 0.08em;
}
.flow-sidebar__nav {
	display: flex;
	flex-direction: column;
}
.flow-sidebar__link {
	display: block;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--color-fg-mute);
	padding: 8px 0;
	text-decoration: none;
	position: relative;
	transition: color 0.2s ease, padding-left 0.2s ease;
}
.flow-sidebar__link[href^="#step"] {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.14em;
}
.flow-sidebar__link::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 1px;
	background: var(--color-fg);
	transition: width 0.3s ease;
}
.flow-sidebar__link.is-active {
	color: var(--color-fg);
	padding-left: 20px;
}
.flow-sidebar__link.is-active::before { width: 12px; }
.flow-sidebar__sep {
	height: 1px;
	background: var(--color-line);
	margin: 8px 0;
}

/* — Flow section spacing ————————————————————————————————— */
.flow-section {
	padding: clamp(48px, 5vw, 72px) 0;
	border-bottom: 1px solid var(--color-line);
}
.flow-section--last { border-bottom: none; margin-bottom: 160px; }

/* — Lead text in hero ———————————————————————————————————— */
.flow-lead {
	margin-top: 40px;
	max-width: 680px;
	display: grid;
	gap: 16px;
}
.flow-lead p {
	font-size: 15px;
	line-height: 2.1;
	color: var(--color-fg-soft);
	letter-spacing: 0.04em;
}

/* — Steps ——————————————————————————————————————————————— */
.flow-steps {
	list-style: none;
	padding: 0;
	margin: 0;
}
.flow-step {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 0 64px;
	padding: 56px 0;
	border-bottom: 1px solid var(--color-line);
	align-items: start;
}
.flow-step__marker {
	display: flex;
	flex-direction: column;
	padding-top: 4px;
}
.flow-step__label {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 2px;
}
.flow-step__num {
	font-family: var(--font-en);
	font-size: 53px;
	font-weight: 300;
	color: var(--color-fg);
	line-height: 1;
	letter-spacing: -0.02em;
}
.flow-step__title {
	font-size: clamp(17px, 1.6vw, 21px);
	font-weight: 700;
	margin-bottom: 20px;
	letter-spacing: 0.02em;
	line-height: 1.5;
}
.flow-step__desc {
	font-size: 15px;
	line-height: 2.1;
	color: var(--color-fg-soft);
	margin-bottom: 20px;
	max-width: 640px;
}
.flow-step__note {
	font-size: 14px;
	line-height: 1.9;
	color: var(--color-fg-mute);
	border-left: 2px solid var(--color-line);
	padding-left: 16px;
	margin-top: 4px;
}
.flow-step__tags {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.flow-step__tags li {
	font-size: 13px;
	letter-spacing: 0.04em;
	padding: 5px 14px;
	border: 1px solid var(--color-line);
	color: var(--color-fg-soft);
}

/* — Consultation examples ——————————————————————————————— */
.flow-consult__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--color-line);
}
.flow-consult__list li {
	padding: 22px 32px 22px 0;
	border-bottom: 1px solid var(--color-line);
	font-size: 15px;
	letter-spacing: 0.04em;
	line-height: 1.7;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--color-fg-soft);
}
.flow-consult__list li::before {
	content: '—';
	font-family: var(--font-en);
	color: var(--color-fg-mute);
	flex-shrink: 0;
}

/* — Note / supplement ——————————————————————————————————— */
.flow-note__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px 80px;
	align-items: start;
}
.flow-note__text {
	font-size: 15px;
	line-height: 2.1;
	color: var(--color-fg-soft);
}
.flow-note__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 14px;
}
.flow-note__list li {
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1.8;
	color: var(--color-fg-soft);
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-line);
}
.flow-note__list li:last-child { border-bottom: none; padding-bottom: 0; }
.flow-note__list li::before {
	content: '';
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-fg-mute);
	flex-shrink: 0;
	margin-top: 8px;
}

/* — CTA ————————————————————————————————————————————————— */
.flow-cta__heading {
	font-size: clamp(19px, 2vw, 27px);
	font-weight: 300;
	line-height: 1.5;
	margin-bottom: 20px;
	max-width: none;
	width: 100%;
}
.flow-cta__lead {
	font-size: 15px;
	line-height: 2.1;
	color: var(--color-fg-soft);
	max-width: 600px;
	margin-bottom: 36px;
}
.flow-cta__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 48px;
}

/* — Responsive ——————————————————————————————————————————— */
@media (max-width: 1000px) {
	.flow-wrap { grid-template-columns: 200px 1fr; }
}
@media (max-width: 860px) {
	.flow-wrap { grid-template-columns: 1fr; }
	.flow-sidebar { display: none; }
	.flow-step {
		grid-template-columns: 80px 1fr;
		gap: 0 40px;
		padding: 40px 0;
	}
	.flow-step__num { font-size: 41px; }
	.flow-note__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
	.flow-step {
		grid-template-columns: 1fr;
		gap: 16px 0;
		padding: 36px 0;
	}
	.flow-step__marker { flex-direction: row; align-items: baseline; gap: 8px; }
	.flow-step__num { font-size: 33px; }
	.flow-consult__list { grid-template-columns: 1fr; }
	.flow-cta__btns { flex-direction: column; }
	.flow-cta__btns .btn { justify-content: center; }
}



/* ============================================================
 * 33-page-faq
 * ============================================================ */

/* =============================================================
   20. FAQ page
   ============================================================= */

/* — Lead ———————————————————————————————————————————————— */
.faq-lead {
	margin-top: 40px;
	max-width: 680px;
	display: grid;
	gap: 16px;
}
.faq-lead p {
	font-size: 15px;
	line-height: 2.1;
	color: var(--color-fg-soft);
	letter-spacing: 0.04em;
}

/* — Search + filter bar ————————————————————————————————— */
.faq-filter-bar {
	border-top: 0; /* client #5068 */
	border-bottom: 0; /* client #5068 */
	padding: clamp(32px, 4vw, 56px) 0;
}
.faq-search {
	margin-bottom: 36px;
}
.faq-search__label {
	display: none; /* removed per client review */
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--color-fg-mute);
	margin-bottom: 10px;
	font-family: var(--font-jp);
}
.faq-search__hint {
	display: none; /* removed per client review */
	font-size: 13px;
	color: var(--color-fg-mute);
	letter-spacing: 0.04em;
	margin-bottom: 20px;
	line-height: 1.8;
}
/* Pill-shaped search box with a flat magnifier icon (client review). */
.faq-search__box {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 580px;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	padding: 12px 24px;
}
.faq-search__box::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1916' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.55;
}
.faq-search__input {
	flex: 1;
	border: none;
	background: transparent;
	font-family: var(--font-jp);
	font-size: 15px;
	padding: 4px 0;
	color: var(--color-fg);
	letter-spacing: 0.05em;
	outline: none;
	-webkit-appearance: none;
}
.faq-search__input::placeholder { color: var(--color-fg-mute); }
.faq-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.faq-search__btn {
	all: unset;
	cursor: pointer;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--color-fg-mute);
	flex-shrink: 0;
	padding-left: 20px;
	transition: color 0.2s;
}
.faq-search__btn:hover { color: var(--color-fg); }

/* — Category filter ————————————————————————————————————— */
.faq-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.faq-cat {
	all: unset;
	cursor: pointer;
	font-size: 13px;
	letter-spacing: 0.06em;
	padding: 6px 16px;
	border: 1px solid var(--color-line);
	color: var(--color-fg-mute);
	transition: border-color 0.2s, color 0.2s, background 0.2s;
	line-height: 1.4;
}
.faq-cat:hover {
	border-color: var(--color-fg-soft);
	color: var(--color-fg-soft);
}
.faq-cat.is-active {
	background: var(--color-fg);
	color: #fff;
	border-color: var(--color-fg);
}

/* — FAQ groups ——————————————————————————————————————————— */
.faq-group { margin-bottom: 64px; }
.faq-group.is-hidden { display: none; }
.faq-group__heading {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-size: 25px;
	font-weight: 700;
	margin-bottom: 0;
	padding-bottom: 14px;
	border-bottom: 0; /* client #5070 */
	letter-spacing: 0.04em;
}
.faq-group__cat {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	font-weight: 400;
}

/* — Accordion items ————————————————————————————————————— */
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item.is-hidden { display: none; }
.faq-item__q {
	all: unset;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	width: 100%;
	cursor: pointer;
	padding: 22px 0;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.75;
	box-sizing: border-box;
	color: var(--color-fg);
}
.faq-item__q span:first-child { flex: 1; font-size: 18px; }
.faq-item__icon {
	display: block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	position: relative;
}
.faq-item__icon::before,
.faq-item__icon::after {
	content: '';
	position: absolute;
	background: var(--color-fg);
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-item__icon::before {
	width: 12px; height: 1px;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}
.faq-item__icon::after {
	width: 1px; height: 12px;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}
.faq-item__q[aria-expanded="true"] .faq-item__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}
.faq-item__body { padding-bottom: 24px; }
.faq-item__body p { font-size: 16px; }
.faq-item__a {
	font-size: 15px;
	line-height: 2.1;
	color: var(--color-fg-soft);
	letter-spacing: 0.04em;
	max-width: 720px;
}

/* — No results ——————————————————————————————————————————— */
.faq-noresults {
	padding: 48px 0;
	font-size: 15px;
	color: var(--color-fg-mute);
	letter-spacing: 0.05em;
	text-align: center;
}

/* — CTA ————————————————————————————————————————————————— */
.faq-cta { border-top: 1px solid var(--color-line); }
.faq-cta__heading {
	font-size: clamp(19px, 2vw, 25px);
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: 20px;
}
.faq-cta__text {
	font-size: 15px;
	line-height: 2.1;
	color: var(--color-fg-soft);
	max-width: 600px;
	margin-bottom: 32px;
	letter-spacing: 0.04em;
}
.faq-cta__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
}

/* — Responsive ——————————————————————————————————————————— */
@media (max-width: 760px) {
	.faq-cats { gap: 6px; }
	.faq-cat { font-size: 12px; padding: 5px 12px; }
	.faq-item__q { font-size: 14px; padding: 18px 0; }
	.faq-cta__btns { flex-direction: column; }
	.faq-cta__btns .btn { justify-content: center; }
}



/* ============================================================
 * 34-page-company
 * ============================================================ */

/* =============================================================
   21. Company page
   ============================================================= */

/* — Company info table ——————————————————————————————————— */
.company-table {
	margin-top: 40px;
	border-top: 1px solid var(--color-line);
}
.company-table__row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 24px;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-line);
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: 0.04em;
}
.company-table__row dt {
	color: var(--color-fg-mute);
	font-weight: 400;
	flex-shrink: 0;
}
.company-table__row dd {
	color: var(--color-fg);
	margin: 0;
}

/* — Company CTA ——————————————————————————————————————————— */
.company-cta {
	border-top: 1px solid var(--color-line);
}
.company-cta__heading {
	font-size: clamp(19px, 2vw, 27px);
	font-weight: 300;
	line-height: 1.5;
	margin-bottom: 20px;
}
.company-cta__lead {
	font-size: 15px;
	line-height: 2.1;
	color: var(--color-fg-soft);
	max-width: 580px;
	margin-bottom: 36px;
}
.company-cta__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* — Responsive ——————————————————————————————————————————— */
@media (max-width: 760px) {
	.company-table__row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.company-cta__btns { flex-direction: column; }
	.company-cta__btns .btn { justify-content: center; }
}



/* ============================================================
 * 35-page-diagnosis
 * ============================================================ */

/* =============================================================
   22. 無料診断 (Free Diagnosis)
============================================================= */

/* App container + transitions */
.diag-section { padding-top: clamp(48px, 8vh, 80px); padding-bottom: clamp(80px, 12vh, 140px); }
.diag-app {
	min-height: 400px;
	transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
.diag-app--exit  { opacity: 0; transform: translateY(12px); }
.diag-app--enter { animation: diagEnter 0.35s var(--ease-out) forwards; }
@keyframes diagEnter {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* — Branch selection ———————————————————————————————————— */
.diag-branch__q {
	font-size: clamp(17px, 1.8vw, 21px);
	letter-spacing: 0.04em;
	color: var(--color-fg);
	margin-bottom: clamp(32px, 5vh, 56px);
	text-align: center;
}
.diag-branch__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.diag-branch__card {
	all: unset;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 32px 28px;
	border: 1px solid var(--color-line);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.diag-branch__card:hover,
.diag-branch__card:focus-visible {
	border-color: var(--color-fg);
	background: #f7f5f0;
}
.diag-branch__card-label {
	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	color: var(--color-fg-mute);
}
.diag-branch__card-title {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-fg);
	line-height: 1.5;
}
.diag-branch__card-sub {
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--color-fg-mute);
	line-height: 1.7;
}
.diag-branch__card-desc {
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
	line-height: 1.8;
	padding-top: 8px;
	border-top: 1px solid var(--color-line);
}
.diag-branch__card-arrow {
	font-family: var(--font-en);
	color: var(--color-fg-mute);
	margin-top: auto;
	padding-top: 12px;
}
@media (max-width: 780px) {
	.diag-branch__cards { grid-template-columns: 1fr; }
}

/* — Progress ————————————————————————————————————————————— */
.diag-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 40px;
}
.diag-progress__bar {
	flex: 1;
	height: 2px;
	background: var(--color-line);
	overflow: hidden;
}
.diag-progress__fill {
	height: 100%;
	background: var(--color-fg);
	transition: width 0.4s var(--ease-out);
}
.diag-progress__label {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	white-space: nowrap;
}
.diag-progress__count {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--color-fg-mute);
	white-space: nowrap;
}

/* — Question ————————————————————————————————————————————— */
.diag-q__text {
	font-size: clamp(17px, 1.8vw, 21px);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.7;
	color: var(--color-fg);
	margin-bottom: 32px;
}
.diag-q__note {
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.diag-q__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 48px;
}
.diag-option {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 24px;
	border: 1px solid var(--color-line);
	cursor: pointer;
	transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.diag-option input[type="radio"] { display: none; }
.diag-option::before {
	content: '';
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	transition: background 0.2s, border-color 0.2s;
}
.diag-option.is-selected {
	border-color: var(--color-fg);
	background: #f7f5f0;
}
.diag-option.is-selected::before {
	background: var(--color-fg);
	border-color: var(--color-fg);
}
.diag-option:hover:not(.is-selected) { border-color: var(--color-fg-soft); }
.diag-option__text {
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
	line-height: 1.6;
}
.diag-option.is-selected .diag-option__text { color: var(--color-fg); }

/* Free text */
.diag-ft__textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 20px 24px;
	border: 1px solid var(--color-line);
	background: #fff;
	font: inherit;
	font-size: 16px;
	color: var(--color-fg);
	letter-spacing: 0.04em;
	resize: vertical;
	transition: border-color 0.25s var(--ease-out);
	margin-bottom: 48px;
}
.diag-ft__textarea:focus {
	outline: none;
	border-color: var(--color-fg);
}

/* Nav buttons */
.diag-q__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.diag-q__back {
	all: unset;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--color-fg-mute);
	cursor: pointer;
	transition: color 0.2s;
}
.diag-q__back:hover { color: var(--color-fg); }
.diag-q__next {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: #fff;
	background: var(--color-fg);
	padding: 14px 32px;
	cursor: pointer;
	transition: opacity 0.2s;
}
.diag-q__next[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}
.diag-q__next:not([disabled]):hover { opacity: 0.8; }

/* — Result ——————————————————————————————————————————————— */
.diag-result {
	/* No flex/gap — children manage their own margins so spacing stays tight */
	display: block;
}
.diag-result__badge {
	padding: clamp(40px, 6vw, 64px);
	background: #f7f5f0;
	text-align: center;
}
.diag-result__branch-label {
	display: block;
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 20px;
}
.diag-result__type-pre {
	font-size: 13px;
	letter-spacing: 0.15em;
	color: var(--color-fg-mute);
	margin-bottom: 12px;
}
.diag-result__type-name {
	font-size: clamp(27px, 3.5vw, 41px);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	margin-bottom: 20px;
	line-height: 1.3;
}
.diag-result__tagline {
	font-size: clamp(15px, 1.5vw, 18px);
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	line-height: 1.8;
}

.diag-result__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.diag-result__section {
	padding-bottom: 32px;
	border-bottom: 1px solid var(--color-line);
}
.diag-result__section:last-child { border-bottom: 0; padding-bottom: 0; }
.diag-result__section-title {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.diag-result__section-text {
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
}

.diag-result__links {
	padding: 36px 40px;
	border: 1px solid var(--color-line);
}
.diag-result__links-title {
	font-family: var(--font-en);
	font-size: 11px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 20px;
}
.diag-result__link-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.diag-result__link {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-line);
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--color-fg);
	text-decoration: none;
	transition: opacity 0.2s;
}
.diag-result__link:first-child { border-top: 1px solid var(--color-line); }
.diag-result__link:hover { opacity: 0.6; }

.diag-result__email {
	padding: clamp(32px, 5vw, 48px);
	background: #f7f5f0;
}
.diag-result__email-title {
	font-size: clamp(16px, 1.6vw, 19px);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-fg);
	margin-bottom: 12px;
}
.diag-result__email-sub {
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--color-fg-mute);
	line-height: 1.9;
	margin-bottom: 28px;
}
.diag-result__email-done {
	font-size: 15px;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	padding: 20px 0;
}
.diag-email-form__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}
.diag-email-form__input {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	border: 1px solid var(--color-line);
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--color-fg);
	letter-spacing: 0.04em;
	transition: border-color 0.25s var(--ease-out);
}
.diag-email-form__input:focus {
	outline: none;
	border-color: var(--color-fg);
}
.diag-email-form__btn { margin-bottom: 12px; width: 100%; justify-content: center; }
.diag-email-form__note {
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--color-fg-mute);
}

.diag-result__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	flex-wrap: wrap;
}
.diag-result__restart {
	all: unset;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--color-fg-mute);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.2s;
}
.diag-result__restart:hover { color: var(--color-fg); }

@media (max-width: 600px) {
	.diag-email-form__fields { grid-template-columns: 1fr; }
	.diag-result__links { padding: 28px 24px; }
	.diag-result__badge { padding: 40px 24px; }
	.diag-result__email { padding: 32px 24px; }
	.diag-result__cta { flex-direction: column; align-items: flex-start; gap: 20px; }
}



/* ============================================================
 * 36-page-service-lp
 * ============================================================ */

/* =================================================================
   Service LP — category landing pages
================================================================= */
.lp { display: block; }
.lp-section__title {
	font-size: clamp(23px, 2.6vw, 38px);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin-bottom: clamp(28px, 4vw, 56px);
	text-align: center;
}

/* Hero ----------------------------------- */
.lp-hero {
	padding: calc(var(--header-h) + clamp(60px, 10vw, 120px)) clamp(24px, 6vw, 100px) 0;
	background: var(--color-bg);
	border-bottom: 0;
}
.lp-hero__inner {
	max-width: 1100px;
	margin-inline: auto;
}
.lp-hero__eyebrow {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
	margin-bottom: 24px;
}
.lp-hero__title {
	font-size: clamp(29px, 3.6vw, 57px);
	letter-spacing: 0.06em;
	line-height: 1.55;
	font-weight: 700;
	color: var(--color-fg);
	margin: 0 0 clamp(28px, 3vw, 40px);
}
.lp-hero__lead {
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 2;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	margin: 0 0 clamp(24px, 3vw, 32px);
}
.lp-hero__body {
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 2;
	letter-spacing: 0.04em;
	color: var(--color-fg-mute);
	margin: 0;
	max-width: 760px;
}
.lp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

/* Generic LP CTA buttons */
.lp-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px 16px 24px;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.18em;
	border: 1px solid var(--color-fg);
	border-radius: 999px;
	transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
	cursor: pointer;
	background: transparent;
	color: var(--color-fg);
}
.lp-cta:hover {
	background: var(--color-fg);
	color: #fff;
	opacity: 1;
}
.lp-cta--primary {
	background: var(--color-fg);
	color: var(--color-bg);
}
.lp-cta--primary:hover { background: var(--color-deepest); color: #fff; }
.lp-cta--sub {
	border: 0;
	padding: 12px 8px;
	color: var(--color-fg-soft);
	background: transparent;
	letter-spacing: 0.16em;
}
.lp-cta--sub:hover {
	background: transparent;
	color: var(--color-fg);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.lp-cta .btn__arrow {
	font-style: normal;
	transition: transform 0.3s var(--ease-out);
}
.lp-cta:hover .btn__arrow { transform: translateX(3px); }

/* Summary cards ----------------------------------- */
.lp-summary {
	padding-block: clamp(60px, 8vw, 100px);
	background: var(--section-bg-soft);
}
.lp-summary__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
}
.lp-summary__card {
	background: var(--section-bg-card);
	padding: clamp(24px, 2.8vw, 36px);
	border: 1px solid var(--color-line);
}
.lp-summary__title {
	font-size: clamp(16px, 1.3vw, 19px);
	letter-spacing: 0.08em;
	font-weight: 700;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-line);
	color: var(--color-fg);
}
.lp-summary__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.lp-summary__list li {
	font-size: 14px;
	line-height: 1.85;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	padding-left: 18px;
	position: relative;
}
.lp-summary__list li + li { margin-top: 8px; }
.lp-summary__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 8px;
	height: 1px;
	background: var(--color-fg);
}
@media (max-width: 900px) {
	.lp-summary__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Problem ----------------------------------- */
.lp-problem { padding-block: clamp(80px, 10vw, 120px); }
.lp-problem__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 800px;
	margin-inline: auto;
}
.lp-problem__list li {
	padding: 18px 0 18px 32px;
	border-bottom: 1px solid var(--color-line);
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.85;
	letter-spacing: 0.04em;
	position: relative;
	color: var(--color-fg-soft);
}
.lp-problem__list li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 26px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--color-fg);
	border-bottom: 2px solid var(--color-fg);
	transform: rotate(-45deg);
}
.lp-problem__closing {
	max-width: 800px;
	margin: clamp(40px, 5vw, 60px) auto 0;
	font-size: 15px;
	line-height: 2;
	color: var(--color-fg-soft);
}

/* Why ----------------------------------- */
.lp-why {
	padding-block: clamp(80px, 10vw, 120px);
	background: var(--color-deepest);
	color: #fff;
}
.lp-why .lp-section__title { color: #fff; }
.lp-why__body {
	max-width: 800px;
	margin: 0 auto;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 2.1;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.85);
	text-align: center;
}

/* Lineup ----------------------------------- */
/* Service links heading — large EN over small JA */
.lp-services__head {
	text-align: center;
	margin-bottom: clamp(28px, 4vw, 56px);
	line-height: 1.1;
}
.lp-services__en {
	display: block;
	font-family: var(--font-en);
	font-size: clamp(35px, 5vw, 65px);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--color-fg);
}
.lp-services__ja {
	display: block;
	margin-top: 10px;
	font-size: clamp(13px, 1.1vw, 15px);
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
}

/* Service links — vertical stack of full-width cover-image banners (jins-style) */
.lp-svc-stack {
	/* Full-bleed so card width is measured against the viewport, not the container */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 3vw, 40px);
}
.lp-svc-row {
	position: relative;
	display: block;
	width: 95vw;
	margin-inline: auto;
	overflow: hidden;
	aspect-ratio: 16 / 6;
	color: #fff;
	text-decoration: none;
	border-radius: clamp(14px, 1.6vw, 22px);
	transform-origin: center center;
	will-change: transform;
}
.lp-svc-row__media {
	position: absolute;
	inset: 0;
}
.lp-svc-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s var(--ease-out);
}
.lp-svc-row:hover .lp-svc-row__media img { transform: scale(1.05); }
.lp-svc-row__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(28,22,18,0.62) 0%, rgba(28,22,18,0.32) 55%, rgba(28,22,18,0.12) 100%);
}
.lp-svc-row__body {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: clamp(24px, 4vw, 56px);
	max-width: 640px;
}
.lp-svc-row__en {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.3em;
	opacity: 0.85;
}
.lp-svc-row__title {
	font-size: 33px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 46px;
}
.lp-svc-row__lead {
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.9;
	letter-spacing: 0.04em;
	opacity: 0.9;
}
.lp-svc-row__arrow {
	position: absolute;
	right: clamp(24px, 4vw, 56px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	font-family: var(--font-en);
	font-size: 23px;
	transition: transform 0.3s var(--ease-out);
}
.lp-svc-row:hover .lp-svc-row__arrow { transform: translateY(-50%) translateX(6px); }
@media (max-width: 768px) {
	.lp-svc-row { aspect-ratio: 16 / 11; width: 95vw; }
	.lp-svc-row__arrow { display: none; }
	.lp-svc-row__body { max-width: none; }
}

.lp-lineup { padding-block: clamp(80px, 10vw, 120px); }
.lp-lineup__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
}
.lp-lineup__card {
	padding: clamp(28px, 3vw, 40px);
	background: var(--section-bg-card);
	border: 1px solid var(--color-line);
	display: flex;
	flex-direction: column;
}
.lp-lineup__title {
	font-size: clamp(17px, 1.4vw, 20px);
	letter-spacing: 0.06em;
	font-weight: 700;
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-line);
}
.lp-lineup__text {
	font-size: 14px;
	line-height: 1.95;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
	margin: 0 0 24px;
	flex: 1;
}
.lp-lineup__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg);
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
}
.lp-lineup__cta:hover { opacity: 0.7; }
@media (max-width: 768px) {
	.lp-lineup__grid { grid-template-columns: 1fr; }
}

/* Comparison Table ----------------------------------- */
.lp-compare { padding-block: clamp(80px, 10vw, 120px); background: var(--section-bg-soft); }
.lp-compare__wrap {
	overflow-x: auto;
	border: 1px solid var(--color-line);
	background: var(--section-bg-card);
}
.lp-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.7;
}
.lp-compare__table th {
	padding: 18px 16px;
	background: var(--color-deepest);
	color: #fff;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.18em;
	font-weight: 500;
	text-align: left;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.lp-compare__table th:last-child { border-right: 0; }
.lp-compare__table td {
	padding: 16px;
	border-bottom: 1px solid var(--color-line);
	border-right: 1px solid var(--color-line);
	color: var(--color-fg-soft);
	vertical-align: top;
	letter-spacing: 0.04em;
}
.lp-compare__table td:last-child { border-right: 0; }
.lp-compare__table tr:last-child td { border-bottom: 0; }
.lp-compare__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--color-fg);
	padding: 6px 14px;
	border: 1px solid var(--color-fg);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	transition: background 0.3s, color 0.3s;
}
.lp-compare__cta:hover { background: var(--color-fg); color: var(--color-bg); opacity: 1; }
.lp-compare__cta .btn__arrow { font-style: normal; }

/* Mid CTA ----------------------------------- */
.lp-midcta {
	padding-block: clamp(80px, 10vw, 120px);
	padding-inline: clamp(24px, 6vw, 100px);
	background: var(--color-deepest);
	color: #fff;
	text-align: center;
}
.lp-midcta__inner { max-width: 800px; margin-inline: auto; }
.lp-midcta__title {
	font-size: clamp(21px, 2.2vw, 29px);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin: 0 0 24px;
	color: #fff;
}
.lp-midcta__text {
	font-size: 15px;
	line-height: 2;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 40px;
}
.lp-midcta__cta {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
.lp-midcta .lp-cta {
	border-color: #fff;
	color: #fff;
	background: transparent;
}
.lp-midcta .lp-cta:hover { background: #fff; color: var(--color-deepest); }
.lp-midcta .lp-cta--primary { background: #fff; color: var(--color-deepest); }
.lp-midcta .lp-cta--primary:hover { background: rgba(255,255,255,0.85); }
.lp-midcta .lp-cta--sub { border: 0; color: rgba(255,255,255,0.7); }
.lp-midcta .lp-cta--sub:hover { color: #fff; }

/* Benefits ----------------------------------- */
.lp-benefits { padding-block: clamp(80px, 10vw, 120px); }
.lp-benefits__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 800px;
	margin-inline: auto;
}
.lp-benefits__list li {
	display: grid;
	grid-template-columns: 64px 1fr;
	align-items: baseline;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-line);
}
.lp-benefits__num {
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 23px;
	letter-spacing: 0.04em;
	color: var(--color-fg-mute);
}
.lp-benefits__text {
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.85;
	letter-spacing: 0.04em;
	color: var(--color-fg);
}

/* Cases ----------------------------------- */
.lp-cases { padding-block: clamp(80px, 10vw, 120px); background: var(--section-bg-soft); }
.lp-cases__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
}
.lp-cases__card {
	background: var(--section-bg-card);
	padding: clamp(28px, 3vw, 40px);
	border: 1px solid var(--color-line);
}
.lp-cases__label {
	display: block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.25em;
	color: var(--color-fg-mute);
	margin-bottom: 18px;
}
.lp-cases__text {
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: var(--color-fg);
	margin: 0;
}
@media (max-width: 900px) {
	.lp-cases__grid { grid-template-columns: 1fr; }
}

/* Flow ----------------------------------- */
.lp-flow { padding-block: clamp(80px, 10vw, 120px); }
.lp-flow__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 720px;
	margin-inline: auto;
	counter-reset: flow;
}
.lp-flow__list li {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 24px;
	align-items: flex-start;
	padding: 24px 0;
	border-top: 1px solid var(--color-line);
	position: relative;
}
.lp-flow__list li:first-child { border-top: 0; }
.lp-flow__num {
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 29px;
	letter-spacing: 0.02em;
	color: var(--color-fg-mute);
	line-height: 1;
}
.lp-flow__text {
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.85;
	letter-spacing: 0.04em;
}

/* FAQ ----------------------------------- */
.lp-faq { padding-block: clamp(80px, 10vw, 120px); background: var(--section-bg-soft); }
.lp-faq__list {
	max-width: 800px;
	margin: 0 auto;
}
.lp-faq__item {
	padding: 24px 0;
	border-bottom: 1px solid var(--color-line);
}
.lp-faq__q {
	font-size: clamp(16px, 1.2vw, 20px);
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 14px;
	padding-left: 28px;
	position: relative;
	line-height: 1.6;
}
.lp-faq__q::before {
	content: 'Q.';
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-en);
	color: var(--color-fg-mute);
}
.lp-faq__a {
	margin: 0;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
	padding-left: 28px;
	position: relative;
}
.lp-faq__a::before {
	content: 'A.';
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-en);
	color: var(--color-fg-mute);
}

/* Final CTA ----------------------------------- */
.lp-finalcta {
	padding-block: clamp(80px, 10vw, 140px);
	padding-inline: clamp(24px, 6vw, 100px);
	background: var(--color-deepest);
	color: #fff;
	text-align: center;
}
.lp-finalcta__inner { max-width: 860px; margin-inline: auto; }
.lp-finalcta__support {
	font-size: 14px;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.65);
	margin: 0 0 32px;
}
.lp-finalcta__title {
	font-size: clamp(23px, 2.6vw, 33px);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin: 0 0 24px;
	color: #fff;
}
.lp-finalcta__text {
	font-size: clamp(15px, 1.1vw, 16px);
	line-height: 2;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 48px;
}
.lp-finalcta__cta {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
.lp-finalcta .lp-cta {
	border-color: #fff;
	color: #fff;
	background: transparent;
}
.lp-finalcta .lp-cta:hover { background: #fff; color: var(--color-deepest); }
.lp-finalcta .lp-cta--primary { background: #fff; color: var(--color-deepest); }
.lp-finalcta .lp-cta--primary:hover { background: rgba(255,255,255,0.85); }
.lp-finalcta .lp-cta--sub { border: 0; color: rgba(255,255,255,0.7); }
.lp-finalcta .lp-cta--sub:hover { color: #fff; }

/* tone design LP -- bespoke sections (2026-07-11) ----------- */
/* WHY: multi-paragraph prose variant of the dark why band */
.lp-why__body--prose {
	text-align: left;
	max-width: 720px;
}
.lp-why__body--prose p { margin: 0; }
.lp-why__body--prose p + p { margin-top: 1.6em; }

/* FOR WHOM: reuses .lp-summary grid/card inside its own section */
.lp-tone-target { padding-block: clamp(80px, 10vw, 120px); }
.lp-tone-target .lp-section__title { margin-bottom: clamp(28px, 3.4vw, 44px); }
.lp-tone-target__note {
	text-align: center;
	margin: clamp(32px, 4vw, 48px) auto 0;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 2;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
}

/* PLANS: reuses .td-plans cards inside an LP-styled section */
.lp-tone-plans {
	padding-block: clamp(80px, 10vw, 120px);
	background: var(--section-bg-soft);
}
.lp-tone-plans .lp-section__title { margin-bottom: clamp(16px, 2vw, 24px); }
.lp-tone-plans__lead {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 2;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}



/* ============================================================
 * 37-page-link
 * ============================================================ */

/* -----------------------------
   18. Link page (linktree-style profile)
----------------------------- */
.page-link-body {
	background: #f1ede5;
	font-family: var(--font-jp);
	color: var(--color-fg);
	-webkit-font-smoothing: antialiased;
}
.page-link-body .site-header,
.page-link-body .site-footer,
.page-link-body .cta-block,
.page-link-body .nav-trigger,
.page-link-body .menu-panel,
.page-link-body .diagnosis-banner,
.page-link-body .diagnosis-modal,
.page-link-body .skip-link,
.page-link-body .loader {
	display: none !important;
}

.link-page {
	position: relative;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 32px 16px 80px;
	overflow: hidden;
}
.link-page__bg {
	position: fixed;
	inset: 0;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
}
.link-page__bg::after {
	content: '';
	position: absolute;
	inset: 50% 0 0;
	background: linear-gradient(180deg, rgba(241,237,229,0) 0%, #f1ede5 60%);
}

.link-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 380px;
	background: #fff;
	padding: 40px 28px 56px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.link-card__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.link-card__mark {
	display: block;
	width: 110px;
	color: var(--color-fg);
}
.link-card__mark svg {
	width: 100%;
	height: auto;
	display: block;
}
.link-card__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 18px;
}
.link-card__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--color-fg);
	transition: opacity .25s ease;
}
.link-card__social a:hover { opacity: .55; }
.link-card__social svg {
	width: 22px;
	height: 22px;
}

.link-block {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.link-block__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.32em;
	font-weight: 500;
	color: var(--color-fg);
	text-transform: capitalize;
}
.link-block__rule {
	display: block;
	width: 24px;
	height: 1px;
	background: var(--color-fg);
}
.link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.link-item {
	display: flex;
	gap: 14px;
	background: #f6f4ef;
	padding: 16px 18px;
	color: var(--color-fg);
	transition: background .25s ease, transform .25s ease;
}
.link-item:hover {
	background: #ece7dc;
}
.link-item__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.link-item__title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: var(--color-fg);
}
.link-item__sub {
	font-size: 12.5px;
	letter-spacing: 0.04em;
	line-height: 1.7;
	color: var(--color-fg-soft);
}
.link-item__arrow {
	font-family: var(--font-en);
	font-size: 17px;
	color: var(--color-fg);
	align-self: center;
	flex: 0 0 auto;
	transition: transform .25s ease;
}
.link-item:hover .link-item__arrow { transform: translateX(3px); }

.link-item--row {
	align-items: center;
}
.link-item--row .link-item__title {
	font-size: 16px;
	font-weight: 600;
}

.link-item--banner {
	flex-direction: column;
	gap: 14px;
	padding: 18px;
}
.link-item--banner .link-item__media {
	display: block;
	width: 100%;
	overflow: hidden;
	background: #1d1916;
}
.link-item--banner .link-item__media img {
	width: 100%;
	height: auto;
	display: block;
}
.link-item--banner .link-item__body {
	gap: 8px;
	text-align: center;
	align-items: center;
}
.link-item--banner .link-item__title {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.06em;
}
.link-item--banner .link-item__sub {
	text-align: left;
	font-size: 13px;
	line-height: 1.85;
}

.link-item--site {
	align-items: center;
}
.link-item--site .link-item__title {
	font-family: var(--font-en);
	letter-spacing: 0.1em;
	font-size: 15.5px;
}

@media (max-width: 480px) {
	.link-card {
		max-width: 100%;
		padding: 32px 20px 48px;
		gap: 32px;
	}
	.link-page {
		padding: 16px 12px 56px;
	}
}



/* ============================================================
 * 38-page-photo-gallery
 * ============================================================ */

/* -----------------------------
   19. Photo Gallery (sub-page of brand photo service)
----------------------------- */
.photo-gallery {
	padding: 120px 0 0;
}
.photo-gallery .container--narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.photo-gallery .container--wide   { max-width: 1480px; margin: 0 auto; padding: 0 24px; }

.photo-gallery__hero {
	padding: 40px 0 56px;
	text-align: center;
}
.photo-gallery__bread {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0 0 32px;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--color-fg-mute);
}
.photo-gallery__bread a { color: var(--color-fg-soft); transition: color .25s ease; }
.photo-gallery__bread a:hover { color: var(--color-fg); }
.photo-gallery__bread span { color: var(--color-fg-mute); }

.photo-gallery__eyebrow {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.32em;
	color: var(--color-fg-soft);
	margin-bottom: 14px;
}
.photo-gallery__title {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(35px, 5vw, 57px);
	letter-spacing: 0.18em;
	line-height: 1.2;
	margin: 0 0 24px;
	color: var(--color-fg);
}
.photo-gallery__lead {
	max-width: 640px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.95;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}

.photo-gallery__filter {
	padding: 16px 0 32px;
	border-bottom: 1px solid var(--color-line);
	margin-bottom: 40px;
}
.photo-gallery__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.photo-gallery__tab {
	font-family: var(--font-jp);
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--color-fg-mute);
	background: transparent;
	border: 0;
	padding: 8px 4px;
	cursor: pointer;
	position: relative;
	transition: color .25s ease;
}
.photo-gallery__tab::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--color-fg);
	transform: translateX(-50%);
	transition: width .3s ease;
}
.photo-gallery__tab:hover { color: var(--color-fg); }
.photo-gallery__tab.is-active { color: var(--color-fg); }
.photo-gallery__tab.is-active::after { width: 24px; }

.photo-gallery__grid-wrap { padding-bottom: 80px; }
.photo-gallery__grid {
	column-count: 4;
	column-gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1200px) { .photo-gallery__grid { column-count: 3; } }
@media (max-width: 760px)  { .photo-gallery__grid { column-count: 2; column-gap: 8px; } }
@media (max-width: 420px)  { .photo-gallery__grid { column-count: 1; } }

.photo-gallery__cell {
	display: block;
	margin: 0 0 12px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}
.photo-gallery__cell.is-hidden { display: none; }
.photo-gallery__open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #f4f1ea;
	cursor: pointer;
	overflow: hidden;
	transition: opacity .3s ease;
}
.photo-gallery__open img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .8s ease;
}
.photo-gallery__open:hover img { transform: scale(1.04); }
.photo-gallery__open:hover { opacity: .88; }

.photo-gallery__empty {
	padding: 40px 0 100px;
	text-align: center;
}
.photo-gallery__empty p {
	font-size: 15px;
	color: var(--color-fg-soft);
	line-height: 2;
	margin-bottom: 32px;
}
.photo-gallery__empty .btn { display: inline-flex; }

.photo-gallery__cta {
	background: #fff;
	padding: 80px 0;
	border-top: 1px solid var(--color-line);
	text-align: center;
}
.photo-gallery__cta h2 {
	font-size: clamp(21px, 2vw, 27px);
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin: 0 0 32px;
}
.photo-gallery__cta-buttons {
	display: flex;
	gap: 16px 32px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Lightbox */
.photo-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(20, 18, 16, 0.94);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1200;
	padding: 40px;
}
.photo-lightbox.is-open { display: flex; }
.photo-lightbox__frame {
	margin: 0;
	max-width: 92vw;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}
.photo-lightbox__frame img {
	max-width: 100%;
	max-height: 80vh;
	display: block;
	object-fit: contain;
}
.photo-lightbox__caption {
	color: rgba(255,255,255,.7);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-align: center;
}
.photo-lightbox__close,
.photo-lightbox__nav {
	position: absolute;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 33px;
	cursor: pointer;
	width: 56px;
	height: 56px;
	transition: opacity .2s ease;
	z-index: 1;
}
.photo-lightbox__close { top: 20px; right: 20px; }
.photo-lightbox__nav { top: 50%; transform: translateY(-50%); }
.photo-lightbox__nav--prev { left: 16px; }
.photo-lightbox__nav--next { right: 16px; }
.photo-lightbox__close:hover,
.photo-lightbox__nav:hover { opacity: .65; }
@media (max-width: 600px) {
	.photo-lightbox { padding: 20px; }
	.photo-lightbox__nav { width: 44px; height: 44px; font-size: 25px; }
}

/* Feature link banner inside service detail (e.g. → photo gallery) */
.srv-main__feature-link {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"en arrow"
		"title arrow"
		"sub arrow";
	align-items: center;
	gap: 4px 24px;
	margin: 32px 0;
	padding: 28px 32px;
	background: #fff;
	border: 1px solid var(--color-line);
	color: var(--color-fg);
	transition: background .25s ease, border-color .25s ease;
}
.srv-main__feature-link:hover {
	background: #f6f4ef;
	border-color: var(--color-fg);
}
.srv-main__feature-link-en {
	grid-area: en;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.32em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
}
.srv-main__feature-link-title {
	grid-area: title;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--color-fg);
}
.srv-main__feature-link-sub {
	grid-area: sub;
	font-size: 13.5px;
	line-height: 1.85;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
	margin-top: 6px;
}
.srv-main__feature-link-arrow {
	grid-area: arrow;
	font-family: var(--font-en);
	font-size: 23px;
	color: var(--color-fg);
	transition: transform .25s ease;
}
.srv-main__feature-link:hover .srv-main__feature-link-arrow {
	transform: translateX(4px);
}



/* ============================================================
 * 39-page-movie-gallery
 * ============================================================ */

/* -----------------------------
   20. Movie Gallery (sub-page of brand movie service)
----------------------------- */
.movie-gallery {
	padding: 120px 0 0;
}
.movie-gallery .container--narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }

.movie-gallery__hero {
	padding: 40px 0 64px;
	text-align: center;
}
.movie-gallery__bread {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0 0 32px;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--color-fg-mute);
	flex-wrap: wrap;
}
.movie-gallery__bread a { color: var(--color-fg-soft); transition: color .25s ease; }
.movie-gallery__bread a:hover { color: var(--color-fg); }
.movie-gallery__bread span { color: var(--color-fg-mute); }

.movie-gallery__eyebrow {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.32em;
	color: var(--color-fg-soft);
	margin-bottom: 14px;
}
.movie-gallery__title {
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(35px, 5vw, 57px);
	letter-spacing: 0.18em;
	line-height: 1.2;
	margin: 0 0 24px;
	color: var(--color-fg);
}
.movie-gallery__lead {
	max-width: 640px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.95;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}

.movie-gallery__list-wrap {
	padding-bottom: 96px;
}
.movie-gallery__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 88px;
}
.movie-gallery__item {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.movie-gallery__item-title {
	margin: 0;
	font-size: clamp(19px, 1.8vw, 23px);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.6;
	color: var(--color-fg);
}
.movie-gallery__embed {
	position: relative;
	background: #000;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.movie-gallery__embed iframe,
.movie-gallery__embed video,
.movie-gallery__embed embed,
.movie-gallery__embed object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.movie-gallery__caption {
	margin: 4px 0 0;
	font-size: 14.5px;
	line-height: 1.95;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
}

.movie-gallery__empty {
	padding: 40px 0 100px;
	text-align: center;
}
.movie-gallery__empty p {
	font-size: 15px;
	color: var(--color-fg-soft);
	line-height: 2;
	margin-bottom: 32px;
}

.movie-gallery__cta {
	background: #fff;
	padding: 80px 0;
	border-top: 1px solid var(--color-line);
	text-align: center;
}
.movie-gallery__cta h2 {
	font-size: clamp(21px, 2vw, 27px);
	letter-spacing: 0.06em;
	line-height: 1.6;
	margin: 0 0 32px;
}
.movie-gallery__cta-buttons {
	display: flex;
	gap: 16px 32px;
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 600px) {
	.movie-gallery__list { gap: 64px; }
}



/* ============================================================
 * 40-archive-works
 * ============================================================ */

/* -----------------------------
   21. Works archive (knot /gallery/ inspired)
----------------------------- */
.works-archive { padding: 120px 0 0; }
.works-archive .container--narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.works-archive .container--wide   { max-width: 1380px; margin: 0 auto; padding: 0 clamp(32px, 6vw, 80px); }

.works-archive__hero { padding: 40px 0 56px; text-align: center; }
.works-archive__bread {
	display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
	margin: 0 0 32px;
	font-size: 13px; letter-spacing: 0.05em; color: var(--section-fg-mute);
}
.works-archive__bread a { color: var(--section-fg-soft); transition: color .25s ease; }
.works-archive__bread a:hover { color: var(--section-fg); }
.works-archive__eyebrow {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 13px; letter-spacing: 0.32em; color: var(--section-fg-soft);
	margin-bottom: 14px;
}
.works-archive__title {
	font-family: var(--font-en); font-weight: 500;
	font-size: clamp(35px, 5vw, 57px); letter-spacing: 0.18em; line-height: 1.2;
	margin: 0 0 24px; color: var(--section-fg);
}
.works-archive__lead {
	max-width: 640px; margin: 0 auto;
	font-size: 15px; line-height: 1.95; letter-spacing: 0.05em; color: var(--section-fg-soft);
}

.works-archive__filter {
	padding: 16px 0 24px;
	border-bottom: 1px solid var(--section-line);
	margin-bottom: 40px;
}
.works-archive__filter-summary {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 12px 20px;
	padding: 8px 0;
}
.works-archive__filter-count {
	font-size: 14px; letter-spacing: 0.06em;
	color: var(--section-fg-soft);
}
.works-archive__filter-count strong {
	color: var(--section-fg); font-weight: 600;
	font-family: var(--font-en); font-size: 17px;
	margin: 0 2px;
}
.works-archive__filter-active {
	display: flex; flex-wrap: wrap; gap: 6px;
	flex: 1;
}
.works-archive__chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--section-bg-card);
	border: 1px solid var(--section-line);
	font-size: 13px; letter-spacing: 0.04em;
	color: var(--section-fg);
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.works-archive__chip strong { font-weight: 600; }
.works-archive__chip span { font-size: 15px; line-height: 1; opacity: 0.6; }
.works-archive__chip:hover {
	background: var(--color-fg); color: var(--color-bg);
	border-color: var(--color-fg); opacity: 1;
}
.works-archive__chip--clear { background: transparent; }
.works-archive__filter-toggle {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 16px; margin-left: auto;
	font-family: var(--font-jp); font-size: 14px; letter-spacing: 0.06em;
	color: var(--section-fg);
	background: transparent;
	border: 1px solid var(--section-line);
	border-radius: 999px;
	cursor: pointer;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.works-archive__filter-toggle:hover {
	background: var(--color-fg); color: var(--color-bg);
	border-color: var(--color-fg);
}
.works-archive__filter-toggle-icon {
	width: 8px; height: 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .3s ease;
}
.works-archive__filter-toggle[aria-expanded="true"] .works-archive__filter-toggle-icon {
	transform: rotate(-135deg) translate(-2px, -2px);
}
.works-archive__filter-body {
	padding: 24px 0 8px;
	display: grid;
	gap: 28px;
}
.works-archive__filter-body[hidden] { display: none; }
.works-archive__filter-group {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 16px 32px;
	align-items: start;
}
@media (max-width: 768px) {
	.works-archive__filter-group { grid-template-columns: 1fr; gap: 8px; }
}
.works-archive__filter-heading {
	margin: 4px 0 0;
	font-family: var(--font-jp);
	font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
	color: var(--section-fg);
	display: flex; flex-direction: column; gap: 2px;
}
.works-archive__filter-heading span {
	font-family: var(--font-en); font-weight: 500;
	font-size: 11px; letter-spacing: 0.2em;
	color: var(--section-fg-mute);
}
.works-archive__tabs {
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	gap: 6px 14px; margin: 0; padding: 0; list-style: none;
}
.works-archive__tab {
	display: inline-flex; align-items: baseline; gap: 4px;
	font-family: var(--font-jp); font-size: 14px; letter-spacing: 0.1em;
	color: var(--section-fg-mute);
	background: transparent; border: 0; padding: 8px 4px;
	cursor: pointer; position: relative;
	transition: color .25s ease;
}
.works-archive__tab::after {
	content: ''; position: absolute;
	left: 50%; bottom: 0; width: 0; height: 1px;
	background: var(--section-fg);
	transform: translateX(-50%); transition: width .3s ease;
}
.works-archive__tab:hover { color: var(--section-fg); }
.works-archive__tab.is-active { color: var(--section-fg); }
.works-archive__tab.is-active::after { width: 24px; }
.works-archive__count {
	font-family: var(--font-en); font-size: 12px;
	color: var(--section-fg-mute); letter-spacing: 0.1em;
}

.works-archive__grid-wrap { padding-bottom: 80px; }
.works-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: clamp(28px, 3vw, 48px);
	row-gap: clamp(40px, 4.5vw, 72px);
	margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1100px) { .works-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .works-archive__grid { grid-template-columns: 1fr; } }

.works-archive__cell {
	display: block; margin: 0;
}
.works-archive__link {
	display: block; color: inherit;
	transition: opacity .3s ease;
}
.works-archive__thumb {
	margin: 0; overflow: hidden; background: var(--section-line-soft);
}
.works-archive__thumb img {
	display: block; width: 100%; height: auto;
	transition: transform .8s ease;
}
.works-archive__link:hover .works-archive__thumb img { transform: scale(1.04); }

.works-archive__meta {
	padding: 14px 4px 8px;
	display: flex; flex-direction: column; gap: 6px;
}
.works-archive__svc {
	font-family: var(--font-en); font-size: 13px; letter-spacing: 0.16em;
	color: var(--section-fg-soft); text-transform: capitalize;
}
.works-archive__cell-title {
	margin: 0;
	font-size: 17px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.6;
	color: var(--section-fg);
}
.works-archive__sub {
	display: flex; flex-wrap: wrap; gap: 0 10px;
	font-size: 13px; letter-spacing: 0.05em;
	color: var(--section-fg-mute);
}
.works-archive__cat::after { content: ''; }
.works-archive__cat + .works-archive__client::before {
	content: '・'; margin: 0 2px; opacity: 0.6;
}
.works-archive__cat,
.works-archive__client {
	font-size: inherit; letter-spacing: inherit; color: inherit;
}

.works-archive__pagination {
	display: flex; justify-content: center;
	padding: 32px 0;
}
.works-archive__pagination .nav-links {
	display: flex; gap: 12px; align-items: center;
}
.works-archive__pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; height: 32px; padding: 0 10px;
	font-family: var(--font-en); font-size: 13px; letter-spacing: 0.1em;
	color: var(--section-fg-soft);
	border: 1px solid var(--section-line);
	transition: background .25s ease, color .25s ease;
}
.works-archive__pagination .page-numbers.current {
	background: var(--section-fg); color: var(--section-bg-card);
	border-color: var(--section-fg);
}
.works-archive__pagination .page-numbers:hover { background: var(--section-line); }

.works-archive__empty {
	padding: 80px 0; text-align: center;
	color: var(--section-fg-soft);
}

.works-archive__cta {
	background: var(--section-bg-card);
	padding: 80px 0;
	border-top: 1px solid var(--section-line);
	text-align: center;
}
.works-archive__cta h2 {
	font-size: clamp(21px, 2vw, 27px); letter-spacing: 0.06em;
	line-height: 1.6; margin: 0 0 32px;
}
.works-archive__cta-buttons {
	display: flex; gap: 16px 32px; justify-content: center; flex-wrap: wrap;
}



/* ============================================================
 * 41-tone-design
 * ============================================================ */

/* =========================================================
   tone design — designer membership community
   ========================================================= */

/* Theme variant — knot photography about palette
   https://knotphotography.jp/about/
   Base bg: #cbd4da (soft cool blue-gray). Cards / sections that need
   crisp text sit on white. Accent uses --color-base-about #5b6f76. */
body.theme-tone {
	/* Same palette family as the journal (theme-cool) so the look stays
	   coherent across long-form reading surfaces. Tonal layering is
	   expressed through small lightness steps within the same hue. */
	--td-tone-700:       #2c2e2f; /* deepest accents (final CTA) */
	--td-tone-600:       #d6d8d9; /* sidebar */
	--td-tone-500:       #eceded; /* default page bg */
	--td-tone-450:       #e4e5e5; /* alt section (slightly darker) */
	--td-tone-400:       #dfe0e0; /* deeper alt */
	--td-tone-350:       #f1f1f1; /* cards on default */
	--td-tone-300:       #e8e9e9; /* cards on alt section */
	--td-tone-200:       #f4f4f4; /* form inputs */
	--td-tone-100:       #f8f8f8; /* highest layer (rare) */

	--section-bg:        var(--td-tone-500);
	--section-bg-soft:   var(--td-tone-450);
	--section-bg-card:   var(--td-tone-350);
	--section-fg:        #2c2e2f;
	--section-fg-soft:   #4a4d4f;
	--section-fg-mute:   #7d8284;
	--section-line:      #d6d8d9;
	--section-line-soft: #e3e5e6;
	--section-accent:    #5a5f61;
	--color-bg:          var(--td-tone-500);
	--color-fg:          #2c2e2f;
	--color-fg-soft:     #4a4d4f;
	--color-fg-mute:     #7d8284;
	--color-line:        #d6d8d9;
	--color-line-soft:   #e3e5e6;
	--color-deepest:     #2c2e2f;
	--color-deeper:      #404244;
	--color-deep:        #5a5f61;
	--td-accent:         #5a5f61;
	--td-accent-soft:    #9aa0a4;
	background: var(--color-bg);
	color: var(--color-fg);
}

/* Scope core text + section colors so they read crisp on the cool bg */
body.theme-tone .td-h2,
body.theme-tone .td-page__title,
body.theme-tone .td-hero__title { color: var(--color-fg); font-weight: 500; }
body.theme-tone .td-prose,
body.theme-tone .td-prose p,
body.theme-tone .td-lead,
body.theme-tone .td-page__sub,
body.theme-tone .td-faq__a { color: var(--color-fg-soft); }

/* Sections sit on the cool blue bg; --alt steps slightly lighter. */
body.theme-tone .td-page,
body.theme-tone .td-lp,
body.theme-tone .td-page__hero,
body.theme-tone .td-section { background: var(--color-bg); }
body.theme-tone .td-section--alt { background: var(--td-tone-400); }

/* Sidebar shares the page bg — separation comes from the right border only */
body.theme-tone .td-side {
	background: var(--color-bg);
	border-right-color: var(--color-line);
}
body.theme-tone .td-shell { background: var(--color-bg); }

/* Cards / panels use the tone-300 step to stay within the same hue family */
body.theme-tone .td-side__login,
body.theme-tone .td-cancel-cta,
body.theme-tone .td-mypage-card,
body.theme-tone .td-benefit,
body.theme-tone .td-plan,
body.theme-tone .td-locked,
body.theme-tone .td-cta-box,
body.theme-tone .td-resources,
body.theme-tone .td-match,
body.theme-tone .td-session-reservation,
body.theme-tone .td-journal-single__foot,
body.theme-tone .td-checkout-card,
body.theme-tone .td-sub-status {
	background: var(--td-tone-300);
	border-color: rgba(53,53,53,0.08);
}
/* Cards inside an --alt section step one shade up so they still read as cards */
body.theme-tone .td-section--alt .td-mypage-card,
body.theme-tone .td-section--alt .td-benefit,
body.theme-tone .td-section--alt .td-plan,
body.theme-tone .td-section--alt .td-checkout-card,
body.theme-tone .td-section--alt .td-cta-box,
body.theme-tone .td-section--alt .td-resources {
	background: var(--td-tone-200);
}

/* Tables / forms blend with their container */
body.theme-tone .td-table th,
body.theme-tone .td-table td,
body.theme-tone .td-tokushoho td { background: var(--td-tone-300); }
body.theme-tone .td-tokushoho th { background: var(--td-tone-400); }

/* Form inputs sit on top — slightly lighter still */
body.theme-tone .td-form__row input[type="text"],
body.theme-tone .td-form__row input[type="email"],
body.theme-tone .td-form__row input[type="url"],
body.theme-tone .td-form__row input[type="password"],
body.theme-tone .td-form__row input[type="number"],
body.theme-tone .td-form__row select,
body.theme-tone .td-form__row textarea,
body.theme-tone .td-side__login input,
body.theme-tone .td-thread__reply textarea {
	background: var(--td-tone-100);
	border-color: rgba(53,53,53,0.08);
}
body.theme-tone .td-form__row input:focus,
body.theme-tone .td-form__row select:focus,
body.theme-tone .td-form__row textarea:focus { border-color: var(--td-accent); }

/* Member-side chat bubble (member voice) keeps the accent */
body.theme-tone .td-chat-msg {
	background: var(--td-tone-300);
	border-color: rgba(53,53,53,0.08);
}

/* Accent bits */
body.theme-tone .td-side__brand-en,
body.theme-tone .td-eyebrow,
body.theme-tone .td-locked__icon { color: var(--td-accent); }
body.theme-tone .td-side__item.is-active a { color: var(--td-accent); }
body.theme-tone .td-side__item.is-active a::before { background: var(--td-accent); }
body.theme-tone .td-finalcta { background: var(--td-accent); }
/* Featured plan — keep light bg with accent border so price/text are readable in black. */
body.theme-tone .td-plan--featured {
	background: var(--section-bg-card);
	border: 2px solid var(--td-accent);
	color: var(--color-fg);
}
body.theme-tone .td-plan--featured .td-plan__name,
body.theme-tone .td-plan--featured .td-plan__price { color: var(--color-fg); }
body.theme-tone .td-plan--featured .td-plan__price span,
body.theme-tone .td-plan--featured .td-plan__price small,
body.theme-tone .td-plan--featured .td-plan__list li { color: var(--color-fg-soft); }
body.theme-tone .td-plan--featured .td-plan__list li::before { color: var(--td-accent); }
body.theme-tone .td-plan--featured .td-plan__flag { background: var(--td-accent); color: #fff; }
body.theme-tone .td-chat-msg--member { background: var(--td-accent); border-color: var(--td-accent); }
body.theme-tone .td-side__badge { background: var(--td-accent); }
body.theme-tone .td-notify { background: var(--td-accent); }
body.theme-tone .td-notify__dot { background: #ff8a5c; box-shadow: 0 0 0 4px rgba(255,138,92,0.18); }

body.theme-tone .td-h2,
body.theme-tone .td-page__title { color: var(--color-fg); }
body.theme-tone .td-side__brand-en { color: var(--td-accent); }
body.theme-tone .td-side__item.is-active a { color: var(--td-accent); }
body.theme-tone .td-side__item.is-active a::before { background: var(--td-accent); }
body.theme-tone .td-finalcta { background: var(--td-accent); }
body.theme-tone .td-locked__icon,
body.theme-tone .td-eyebrow { color: var(--td-accent); }
/* Featured plan — keep light bg with accent border so price/text are readable in black. */
body.theme-tone .td-plan--featured {
	background: var(--section-bg-card);
	border: 2px solid var(--td-accent);
	color: var(--color-fg);
}
body.theme-tone .td-plan--featured .td-plan__name,
body.theme-tone .td-plan--featured .td-plan__price { color: var(--color-fg); }
body.theme-tone .td-plan--featured .td-plan__price span,
body.theme-tone .td-plan--featured .td-plan__price small,
body.theme-tone .td-plan--featured .td-plan__list li { color: var(--color-fg-soft); }
body.theme-tone .td-plan--featured .td-plan__list li::before { color: var(--td-accent); }
body.theme-tone .td-plan--featured .td-plan__flag { background: var(--td-accent); color: #fff; }
body.theme-tone .td-chat-msg--member { background: var(--td-accent); border-color: var(--td-accent); }
body.theme-tone .td-side__badge,
body.theme-tone .td-notify__dot { background: var(--td-accent); box-shadow: 0 0 0 4px rgba(91,111,118,0.18); }
body.theme-tone .td-notify { background: var(--td-accent); }

body.tone-design { color: var(--color-fg); }

/* Containers / grid */
.td-lp,
.td-page {
	background: var(--color-bg);
	min-height: 80vh;
	padding-top: var(--header-h);
}
.td-section {
	padding: var(--space-section) 0;
	background: var(--color-bg);
}
.td-section--alt {
	background: var(--section-bg-soft);
}
.td-section__inner {
	width: min(var(--container-max), 100%);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}
.td-section__inner--narrow { max-width: 920px; }
.td-section__inner--narrowest { max-width: 560px; }

/* Inside the sidebar shell, narrow inners should hug the left of the
   content column, not center between the sidebar and the right edge.
   The page hero needs the same treatment so its breadcrumb / heading
   start at the same x-coordinate as the cards below. */
.td-shell .td-section__inner,
.td-shell .td-section__inner--narrow,
.td-shell .td-section__inner--narrowest,
.td-shell .td-page__hero { margin-left: 0; }

/* Dashboard pages (mypage / sessions etc.) want tighter section rhythm —
   the landing-grade --space-section creates dead air between status panels. */
.td-shell .td-section { padding: clamp(40px, 4.5vw, 64px) 0; }
.td-shell .td-page__hero { padding-bottom: clamp(28px, 3.5vw, 48px); }

.td-grid-2 {
	display: grid;
	grid-template-columns: minmax(280px, 460px) 1fr;
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
@media (max-width: 800px) {
	.td-grid-2 { grid-template-columns: 1fr; gap: 32px; }
}

/* Type */
.td-eyebrow {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.td-h2 {
	font-size: clamp(27px, 3.4vw, 41px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--color-fg);
	margin: 0 0 28px;
}
.td-h2--center { text-align: center; }
.td-lead {
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 2;
	color: var(--color-fg-soft);
	max-width: 720px;
	margin: 0 0 48px;
}
.td-prose p {
	font-size: 17px;
	line-height: 2;
	color: var(--color-fg-soft);
	margin: 0 0 1.5em;
}

/* Hero */
.td-hero {
	padding: clamp(80px, 14vw, 160px) 0 clamp(60px, 10vw, 120px);
	background: var(--color-bg);
}
.td-hero__inner {
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--container-pad);
}
.td-hero__en {
	display: block;
	font-family: var(--font-en);
	font-size: clamp(14px, 1.2vw, 16px);
	letter-spacing: 0.32em;
	color: var(--color-fg-mute);
	margin-bottom: 24px;
}
.td-hero__title {
	font-size: clamp(31px, 5vw, 57px);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--color-fg);
	margin: 0 0 32px;
}
.td-hero__sub {
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 2;
	color: var(--color-fg-soft);
	max-width: 640px;
	margin: 0 0 40px;
}
.td-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Page hero (sub-pages) */
.td-page--narrow .td-section__inner { max-width: 720px; }
.td-page__hero {
	padding: clamp(60px, 10vw, 120px) 0 clamp(40px, 6vw, 60px);
	width: min(var(--container-max), 100%);
	margin: 0 auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}
.td-page__en {
	display: block;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.32em;
	color: var(--color-fg-mute);
	margin: 16px 0 16px;
}
.td-page__title {
	font-size: clamp(29px, 4vw, 43px);
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-fg);
	margin: 0 0 16px;
}
.td-page__sub {
	font-size: 16px;
	line-height: 1.9;
	color: var(--color-fg-soft);
	margin: 0;
}
.td-page__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	font-size: 14px;
	color: var(--color-fg-mute);
	margin: 16px 0 0;
}

/* Breadcrumbs */
.td-bread {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-family: var(--font-en);
	letter-spacing: 0.06em;
	color: var(--color-fg-mute);
}
.td-bread a { color: var(--color-fg-mute); text-decoration: none; }
.td-bread a:hover { color: var(--color-fg); }
.td-bread span:not(:has(*)) { color: var(--color-fg); }

/* Benefits grid */
.td-benefits {
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--color-line);
	border: 1px solid var(--color-line);
}
.td-benefit {
	background: var(--section-bg-card);
	padding: clamp(28px, 4vw, 48px);
	display: flex;
	flex-direction: column;
}
.td-benefit__num {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.td-benefit__title {
	font-size: clamp(18px, 1.6vw, 21px);
	font-weight: 500;
	line-height: 1.6;
	margin: 0 0 16px;
}
.td-benefit__body {
	font-size: 15px;
	line-height: 1.9;
	color: var(--color-fg-soft);
	margin: 0;
}
.td-benefit__body a {
	color: var(--color-fg);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Member cards */
.td-members {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}
.td-members--grid { margin-top: 32px; }
.td-member-card a {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform 0.4s var(--ease-out);
}
.td-member-card a:hover { transform: translateY(-4px); }
.td-member-card__thumb {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--color-line-soft) center/cover no-repeat;
	margin-bottom: 16px;
}
.td-member-card__name {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 4px;
}
.td-member-card__role,
.td-member-card__loc {
	font-size: 13px;
	color: var(--color-fg-mute);
	margin: 0 0 4px;
	line-height: 1.6;
}
.td-member-card__skills {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin: 8px 0 0;
	padding: 0;
}
.td-member-card__skills li {
	font-size: 12px;
	padding: 3px 8px;
	border: 1px solid var(--color-line);
	color: var(--color-fg-soft);
	border-radius: 999px;
}

/* Badges */
.td-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.12em;
	background: var(--color-fg);
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
}
.td-badge--lg {
	padding: 6px 14px;
	font-size: 13px;
	letter-spacing: 0.16em;
}
.td-badge--free {
	background: #fff;
	color: var(--color-fg);
	border: 1px solid var(--color-line);
}
.td-badge--lock {
	background: var(--color-fg-mute);
	color: #fff;
}
.td-badge--inline {
	position: static;
	display: inline-block;
	margin-left: 8px;
	vertical-align: middle;
}

/* Video cards */
.td-videos {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}
.td-video-card a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.td-video-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-line) center/cover no-repeat;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.td-video-card__play {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: var(--color-fg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}
.td-video-card__title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	margin: 0 0 6px;
}
.td-video-card__meta {
	display: flex;
	gap: 12px;
	font-size: 13px;
	color: var(--color-fg-mute);
	margin: 0;
}

/* Audio list */
.td-audio-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-line);
}
.td-audio-row {
	border-bottom: 1px solid var(--color-line);
}
.td-audio-row a {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 24px;
	align-items: center;
	padding: 22px 0;
	color: inherit;
	text-decoration: none;
	transition: padding 0.3s var(--ease-out);
}
.td-audio-row a:hover { padding-left: 12px; }
.td-audio-row__title {
	font-size: 16px;
	font-weight: 500;
	color: var(--color-fg);
}
.td-audio-row__dur,
.td-audio-row__date {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--color-fg-mute);
}
@media (max-width: 600px) {
	.td-audio-row a { grid-template-columns: 1fr auto; }
	.td-audio-row__date { grid-column: 1 / -1; font-size: 12px; }
}

/* Filter buttons */
.td-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 40px;
}
.td-filter__btn {
	font-size: 14px;
	padding: 8px 18px;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	color: var(--color-fg-soft);
	text-decoration: none;
	transition: all 0.3s var(--ease-out);
}
.td-filter__btn:hover,
.td-filter__btn.is-active {
	background: var(--color-fg);
	border-color: var(--color-fg);
	color: #fff;
}

/* Checklist */
.td-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.td-checklist li {
	font-size: 16px;
	line-height: 1.9;
	padding-left: 28px;
	position: relative;
	margin-bottom: 12px;
	color: var(--color-fg-soft);
}
.td-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-fg);
	font-weight: 500;
}

/* Pricing plans */
.td-plans {
	list-style: none;
	margin: 56px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}
.td-plan {
	background: var(--section-bg-card);
	border: 1px solid var(--color-line);
	padding: 36px 28px;
	display: flex;
	flex-direction: column;
	position: relative;
}
.td-plan--featured {
	border-color: var(--color-fg);
	background: var(--color-fg);
	color: #fff;
}
.td-plan--featured .td-plan__price small,
.td-plan--featured .td-plan__price span,
.td-plan--featured .td-plan__list li { color: rgba(255,255,255,0.7); }
.td-plan--featured .td-plan__list li::before { color: #fff; }
.td-plan__flag {
	position: absolute;
	top: -1px;
	right: -1px;
	background: #fff;
	color: var(--color-fg);
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.16em;
	padding: 6px 14px;
}
.td-plan__name {
	font-family: var(--font-en);
	font-size: 19px;
	letter-spacing: 0.12em;
	margin: 0 0 16px;
}
.td-plan__price {
	font-size: 29px;
	font-weight: 500;
	margin: 0 0 24px;
}
.td-plan__price span {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-fg-mute);
	display: block;
	margin-bottom: 4px;
}
.td-plan__price small {
	font-size: 13px;
	color: var(--color-fg-mute);
}
.td-plan__list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	flex: 1;
}
.td-plan__list li {
	font-size: 14px;
	line-height: 1.9;
	padding-left: 22px;
	position: relative;
	margin-bottom: 6px;
	color: var(--color-fg-soft);
}
.td-plan__list li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--color-fg-mute);
}

/* Plan comparison table */
.td-table-wrap { overflow-x: auto; margin-top: 32px; }
.td-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 15px;
}
.td-table th,
.td-table td {
	border: 1px solid var(--color-line);
	padding: 16px 14px;
	text-align: center;
	background: var(--section-bg-card);
}
.td-table th { font-weight: 500; }
.td-table th small { display: block; font-weight: 400; color: var(--color-fg-mute); margin-top: 4px; }
.td-table tbody td:first-child { text-align: left; font-weight: 500; }

/* Steps (join flow) */
.td-steps {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}
.td-steps__item {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--color-line);
}
.td-steps__item:last-child { border-bottom: none; }
.td-steps__num {
	font-family: var(--font-en);
	font-size: 23px;
	letter-spacing: 0.1em;
	color: var(--color-fg);
}
.td-steps__item h3 {
	font-size: 18px;
	font-weight: 500;
	margin: 0 0 8px;
}
.td-steps__item p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--color-fg-soft);
	margin: 0;
}

/* FAQ — dl/dt/dd structure with Q./A. markers */
.td-faqs {
	margin: 32px 0 0;
	padding: 0;
}
.td-faq {
	border-top: 1px solid var(--color-line);
	padding: 24px 0;
}
.td-faq:last-child { border-bottom: 1px solid var(--color-line); }
.td-faq dt {
	position: relative;
	padding-left: 40px;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-fg);
	line-height: 1.7;
	margin: 0 0 12px;
}
.td-faq dt::before {
	content: "Q";
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--color-bg-pure);
	background: var(--color-fg);
	border-radius: 50%;
}
.td-faq dd {
	position: relative;
	padding-left: 40px;
	margin: 0;
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
}
.td-faq dd::before {
	content: "A";
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--color-fg);
	background: transparent;
	border: 1px solid var(--color-fg);
	border-radius: 50%;
}
.td-faq__icon { display: none; }
.td-faq__a {
	padding: 0 28px 24px 28px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--color-fg-soft);
	position: relative;
}
.td-faq__a::before {
	content: "A.";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-en);
	color: var(--color-fg-mute);
}

/* Forms */
.td-form {
	margin: 32px 0 0;
}
.td-form__row {
	margin-bottom: 24px;
}
.td-form__row label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
	color: var(--color-fg);
}
.td-form__row label span {
	color: #c14a4a;
	margin-left: 4px;
}
.td-form__row input[type="text"],
.td-form__row input[type="email"],
.td-form__row input[type="url"],
.td-form__row input[type="password"],
.td-form__row input[type="number"],
.td-form__row select,
.td-form__row textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-line);
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: var(--color-fg);
	border-radius: 0;
	transition: border-color 0.2s;
}
.td-form__row input:focus,
.td-form__row select:focus,
.td-form__row textarea:focus {
	outline: none;
	border-color: var(--color-fg);
}
.td-form__row textarea { resize: vertical; min-height: 140px; }
.td-form__row--check label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 400;
}
.td-form__row--inline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}
.td-form__row--inline > div { margin-bottom: 0; }
.td-form__note {
	font-size: 13px;
	color: var(--color-fg-mute);
	margin: 8px 0 24px;
}
.td-form__note a { color: var(--color-fg); }
.td-form__actions {
	margin-top: 16px;
}
.td-form__status {
	margin: 16px 0 0;
	font-size: 14px;
	min-height: 20px;
}
.td-form__status.is-loading { color: var(--color-fg-mute); }
.td-form__status.is-ok      { color: #4a7c59; }
.td-form__status.is-err     { color: #c14a4a; }

.td-form--login { max-width: 440px; margin: 32px auto 0; }
.td-login__forgot {
	text-align: center;
	margin: 16px 0 0;
	font-size: 14px;
}
.td-login__forgot a { color: var(--color-fg-mute); }
.td-login__signup {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--color-line);
	text-align: center;
}
.td-login__signup p { font-size: 14px; color: var(--color-fg-mute); margin: 0 0 16px; }

/* Final CTA */
.td-finalcta {
	background: var(--color-fg);
	color: #fff;
	padding: clamp(80px, 12vw, 140px) 0;
	text-align: center;
}
.td-finalcta__inner {
	width: min(720px, 100%);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}
.td-finalcta__title {
	font-size: clamp(25px, 3vw, 37px);
	font-weight: 500;
	line-height: 1.6;
	margin: 0 0 20px;
}
.td-finalcta__sub {
	color: rgba(255,255,255,0.7);
	font-size: 15px;
	line-height: 1.9;
	margin: 0 0 40px;
}
.td-finalcta__cta {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
/* Inside the dark final-CTA strip, .btn keeps its native shape but the
   line/text/arrow flip to white so they read on the dark backdrop. */
.td-finalcta .btn {
	background: transparent;
	color: #fff;
	border-bottom-color: #fff;
}
.td-finalcta .btn::after {
	color: #fff;
	border-color: #fff;
	background: transparent;
}
.td-finalcta .btn--ghost {
	color: rgba(255,255,255,0.85);
	border-bottom-color: rgba(255,255,255,0.4);
}
.td-finalcta .btn--ghost::after {
	color: rgba(255,255,255,0.85);
	border-color: rgba(255,255,255,0.4);
}
.td-finalcta .btn:hover {
	color: #fff;
	border-bottom-color: #fff;
}

/* Locked state (member-gated content) */
.td-locked {
	background: var(--section-bg-card);
	border: 1px solid var(--color-line);
	padding: clamp(48px, 8vw, 88px) clamp(28px, 5vw, 56px);
	text-align: center;
}
.td-locked__icon {
	font-size: 13px;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.td-locked__title {
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 500;
	margin: 0 0 16px;
}
.td-locked__body {
	font-size: 15px;
	line-height: 1.9;
	color: var(--color-fg-soft);
	max-width: 480px;
	margin: 0 auto 32px;
}
.td-locked__body a { color: var(--color-fg); text-decoration: underline; text-underline-offset: 4px; }
.td-locked__cta {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Video / audio embed */
.td-video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	margin-bottom: 32px;
}
.td-video-embed iframe,
.td-video-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.td-video-embed--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.6);
	font-size: 14px;
	background: #1d1916;
}
.td-audio-embed {
	margin-bottom: 32px;
}
.td-audio-embed iframe { width: 100%; min-height: 152px; border: 0; }
.td-audio-native {
	width: 100%;
	margin-bottom: 32px;
}

/* Member profile (single) */
.td-member-profile {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
@media (max-width: 720px) {
	.td-member-profile { grid-template-columns: 1fr; }
}
.td-member-profile__avatar {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--color-line-soft) center/cover no-repeat;
}
.td-member-profile__name {
	font-size: clamp(25px, 3vw, 33px);
	font-weight: 500;
	margin: 8px 0 12px;
}
.td-member-profile__role,
.td-member-profile__loc {
	font-size: 15px;
	color: var(--color-fg-soft);
	margin: 0 0 4px;
}
.td-member-profile__skills {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 16px 0 24px;
	padding: 0;
}
.td-member-profile__skills li {
	font-size: 13px;
	padding: 4px 10px;
	border: 1px solid var(--color-line);
	color: var(--color-fg-soft);
	border-radius: 999px;
}
.td-member-profile__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
}
.td-member-profile__links a {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--color-fg);
	text-decoration: none;
	border-bottom: 1px solid var(--color-fg);
	padding-bottom: 2px;
}
.td-member-bio {
	margin-top: 56px;
	padding-top: 56px;
	border-top: 1px solid var(--color-line);
	max-width: 720px;
}
.td-cta-box {
	margin-top: 56px;
	padding: 36px;
	background: var(--section-bg-soft);
	border: 1px solid var(--color-line);
	text-align: center;
}
.td-cta-box h2 { font-size: 19px; font-weight: 500; margin: 0 0 12px; }
.td-cta-box p  { font-size: 15px; line-height: 1.9; color: var(--color-fg-soft); margin: 0 0 24px; }

/* Mypage */
.td-mypage-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}
.td-mypage-card {
	background: var(--section-bg-card);
	border: 1px solid var(--color-line);
	padding: 28px;
}
.td-mypage-card .td-eyebrow { margin-bottom: 12px; }
.td-mypage-card h3 {
	font-size: 17px;
	font-weight: 500;
	margin: 0 0 10px;
}
.td-mypage-card p {
	font-size: 14px;
	line-height: 1.8;
	color: var(--color-fg-soft);
	margin: 0 0 20px;
}
.td-mypage__logout { text-align: center; }

/* Flash messages */
.td-flash {
	max-width: 720px;
	margin: 0 auto 32px;
	padding: 14px 20px;
	font-size: 15px;
	border: 1px solid var(--color-line);
}
.td-flash--ok  { background: #eef3ee; border-color: #c2d4c4; color: #2f5d3a; }
.td-flash--err { background: #f5e9e9; border-color: #d8b6b6; color: #7a2e2e; }

/* Misc */
.td-pagination { margin-top: 48px; }
.td-pagination .page-numbers {
	font-family: var(--font-en);
	font-size: 14px;
	padding: 8px 14px;
	color: var(--color-fg-mute);
}
.td-pagination .current {
	color: var(--color-fg);
	border-bottom: 1px solid var(--color-fg);
}
.td-empty {
	text-align: center;
	padding: 80px 0;
	color: var(--color-fg-mute);
	font-size: 15px;
}
.td-more { margin-top: 48px; text-align: center; }

/* Checkout buttons row (under plan comparison) */
.td-checkout-row {
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
.td-checkout-card {
	background: var(--section-bg-card);
	border: 1px solid var(--color-line);
	padding: 28px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
}
.td-checkout-card--featured {
	border-color: var(--color-fg);
}
.td-checkout-card .td-plan__name {
	margin: 0;
	font-size: 17px;
}
.td-checkout-card .td-plan__price {
	margin: 0 0 16px;
	font-size: 23px;
}
.td-checkout-card .td-plan__price small {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--color-fg-mute);
	margin-top: 2px;
}
.td-checkout-card button {
	width: 100%;
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.td-checkout-card button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.td-checkout-note {
	margin: 24px auto 0;
	max-width: 640px;
	text-align: center;
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-fg-mute);
}

/* Subscription status panel */
.td-sub-status {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	align-items: center;
	background: var(--section-bg-card);
	border: 1px solid var(--color-line);
	padding: 28px 32px;
}
.td-sub-status__plan {
	font-size: 15px;
	color: var(--color-fg-soft);
	margin: 0;
}
.td-sub-status__plan strong {
	font-size: 19px;
	color: var(--color-fg);
	margin: 0 12px 0 8px;
	font-weight: 500;
}
.td-sub-status__pill {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.12em;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--color-line);
	color: var(--color-fg-mute);
	margin-left: 4px;
	vertical-align: middle;
}
.td-sub-status__pill--active   { background: #eef3ee; border-color: #c2d4c4; color: #2f5d3a; }
.td-sub-status__pill--paused   { background: #f7efe2; border-color: #d8c89a; color: #7a5a1f; }
.td-sub-status__pill--canceled { background: #f5e9e9; border-color: #d8b6b6; color: #7a2e2e; }
.td-sub-status__actions button {
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.td-sub-status__actions button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Member-only event flag on single-event */
.reservation__member-flag {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 32px 0;
	padding: 14px 18px;
	background: var(--section-bg-soft, #f4f1eb);
	border-left: 3px solid var(--color-fg);
	font-size: 14px;
	color: var(--color-fg-soft);
	line-height: 1.7;
}
.reservation__member-flag span {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.16em;
	background: var(--color-fg);
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
	flex-shrink: 0;
}
.reservation--locked { padding: 0; }

/* Chat threads on mypage */
.td-thread-list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	border-top: 1px solid var(--color-line);
}
.td-thread {
	border-bottom: 1px solid var(--color-line);
}
.td-thread > details > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	font-size: 15px;
}
.td-thread > details > summary::-webkit-details-marker { display: none; }
.td-thread > details > summary::before {
	content: "+";
	display: inline-block;
	width: 20px;
	font-family: var(--font-en);
	font-size: 17px;
	color: var(--color-fg-mute);
}
.td-thread > details[open] > summary::before {
	content: "−";
}
.td-thread__title {
	flex: 1;
	font-weight: 500;
	color: var(--color-fg);
}
.td-thread__date {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--color-fg-mute);
}
.td-thread__messages {
	padding: 12px 0 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.td-chat-msg {
	background: var(--section-bg-card);
	border: 1px solid var(--color-line);
	padding: 14px 18px;
	font-size: 15px;
	line-height: 1.85;
	max-width: 540px;
}
.td-chat-msg--admin {
	align-self: flex-start;
	background: #f3f5f1;
	border-color: #cdd5cd;
}
.td-chat-msg--member {
	align-self: flex-end;
	background: var(--color-fg);
	color: #fff;
	border-color: var(--color-fg);
}
.td-chat-msg--member small,
.td-chat-msg--member strong { color: rgba(255,255,255,0.85); }
.td-chat-msg__head {
	font-size: 13px;
	margin-bottom: 8px;
}
.td-chat-msg__head strong { font-weight: 500; }
.td-chat-msg__head small {
	margin-left: 8px;
	color: var(--color-fg-mute);
	font-size: 12px;
	letter-spacing: 0.06em;
	font-family: var(--font-en);
}
.td-chat-msg__body p:last-child { margin-bottom: 0; }
.td-thread__reply {
	margin: 16px 0 24px 28px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: start;
}
.td-thread__reply textarea {
	grid-column: 1 / -1;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-line);
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	resize: vertical;
	min-height: 90px;
}
.td-thread__reply textarea:focus { outline: none; border-color: var(--color-fg); }
.td-thread__reply button {
	border: none;
	cursor: pointer;
	font-family: inherit;
	justify-self: end;
	grid-column: 2;
}
.td-thread__reply .td-form__status {
	grid-column: 1 / -1;
	margin: 0;
}

/* Mypage notification pill */
.td-notify {
	position: absolute;
	top: clamp(20px, 4vw, 40px);
	right: var(--container-pad);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--color-fg);
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.04em;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	transition: transform 0.3s var(--ease-out), background 0.3s;
}
.td-notify:hover { transform: translateY(-2px); }
.td-notify__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #ff8a5c;
	box-shadow: 0 0 0 4px rgba(255,138,92,0.18);
	animation: tdNotifyPulse 2.4s infinite ease-out;
}
@keyframes tdNotifyPulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(255,138,92,0.18); }
	50%      { box-shadow: 0 0 0 8px rgba(255,138,92,0.0); }
}
.td-notify__text strong {
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 15px;
	margin: 0 2px;
}
.td-notify__arrow {
	font-family: var(--font-en);
	font-size: 15px;
	opacity: 0.8;
}
.td-page__hero { position: relative; }

/* Resume toast on video page */
.td-resume-toast {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 16px 0 24px;
	padding: 10px 16px;
	font-size: 14px;
	color: var(--color-fg);
	background: var(--section-bg-soft);
	border-left: 3px solid var(--color-fg);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.td-resume-toast.is-fade { opacity: 0.45; }
.td-resume-toast button {
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	color: var(--color-fg-mute);
	text-decoration: underline;
	text-underline-offset: 4px;
	padding: 0;
}
.td-resume-toast button:hover { color: var(--color-fg); }

/* Member matching form */
.td-match {
	margin-top: 64px;
	padding: clamp(36px, 5vw, 56px);
	background: var(--section-bg-soft);
	border: 1px solid var(--color-line);
}
.td-match__head h2 {
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 500;
	margin: 8px 0 12px;
}
.td-match__head p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--color-fg-soft);
	margin: 0 0 32px;
}
.td-match__form { margin-top: 0; }

/* Video description block */
.td-video-desc {
	margin: 56px 0;
}
.td-video-desc__title {
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 500;
	margin: 8px 0 24px;
}

/* Video downloadable resources */
.td-resources {
	margin: 56px 0;
	padding: clamp(28px, 4vw, 48px);
	background: var(--section-bg-soft);
	border: 1px solid var(--color-line);
}
.td-resources__title {
	font-size: clamp(19px, 2vw, 23px);
	font-weight: 500;
	margin: 8px 0 8px;
}
.td-resources__sub {
	font-size: 14px;
	color: var(--color-fg-soft);
	margin: 0 0 24px;
}
.td-resources__list { list-style: none; padding: 0; margin: 0; }
.td-resource {
	border-top: 1px solid var(--color-line);
}
.td-resource:last-child { border-bottom: 1px solid var(--color-line); }
.td-resource a {
	display: grid;
	grid-template-columns: 100px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 18px 4px;
	color: inherit;
	text-decoration: none;
	transition: padding 0.3s var(--ease-out);
}
.td-resource a:hover { padding-left: 16px; }
.td-resource__kind {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--color-fg-mute);
	border: 1px solid var(--color-line);
	padding: 4px 10px;
	text-align: center;
	border-radius: 999px;
	background: #fff;
}
.td-resource__title {
	font-size: 16px;
	font-weight: 500;
}
.td-resource__icon {
	font-size: 17px;
	color: var(--color-fg-mute);
}

/* tone design sidebar shell */
.td-shell {
	display: grid;
	grid-template-columns: 240px 1fr;
	min-height: 80vh;
	background: var(--color-bg);
	padding-top: var(--header-h);
}
.td-shell__body {
	padding-top: 0;
	min-width: 0;
}
.td-side {
	border-right: 1px solid var(--color-line);
	background: var(--section-bg-soft);
}
.td-side__inner {
	position: sticky;
	top: var(--header-h);
	padding: 40px 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: calc(100vh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
/* Hide scrollbar visually but keep functional */
.td-side__inner::-webkit-scrollbar { width: 6px; }
.td-side__inner::-webkit-scrollbar-thumb {
	background: rgba(53,53,53,0.18);
	border-radius: 3px;
}
.td-side__inner::-webkit-scrollbar-thumb:hover {
	background: rgba(53,53,53,0.32);
}
.td-side__back {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--color-fg-mute);
	text-decoration: none;
	display: inline-flex;
	gap: 6px;
}
.td-side__back:hover { color: var(--color-fg); }
.td-side__brand {
	display: block;
	text-decoration: none;
	color: var(--color-fg);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-line);
}
.td-side__brand-en {
	display: block;
	font-family: var(--font-en);
	font-size: 18px;
	letter-spacing: 0.04em;
	font-weight: 500;
	margin-bottom: 4px;
}
.td-side__brand-ja {
	display: block;
	font-size: 12px;
	color: var(--color-fg-mute);
	letter-spacing: 0.04em;
}
.td-side__nav ul { list-style: none; margin: 0; padding: 0; }
.td-side__item {
	border-bottom: 1px solid var(--color-line-soft);
}
.td-side__item:last-child { border-bottom: 0; }
.td-side__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	font-size: 14px;
	color: var(--color-fg-soft);
	text-decoration: none;
	transition: padding 0.3s var(--ease-out), color 0.3s;
}
.td-side__item a:hover { padding-left: 6px; color: var(--color-fg); }
.td-side__item.is-active a {
	color: var(--color-fg);
	font-weight: 500;
}
.td-side__item.is-active a::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-fg);
	margin-right: 8px;
}
.td-side__badge {
	font-style: normal;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: 999px;
	background: #ff8a5c;
	color: #fff;
}
.td-side__cta {
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px solid var(--color-line);
}
.td-side__cta-link {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--color-fg);
	text-decoration: none;
	border-bottom: 1px solid var(--color-fg);
	padding-bottom: 2px;
}

/* Sidebar mini login form */
.td-side__login {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--color-line);
	padding: 18px 16px;
}
.td-side__login .td-eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
}
.td-side__login label {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.td-side__login label > span {
	font-size: 12px;
	color: var(--color-fg-mute);
}
.td-side__login input {
	width: 100%;
	padding: 8px 10px;
	font-size: 14px;
	border: 1px solid var(--color-line);
	background: #fff;
	color: var(--color-fg);
	font-family: inherit;
}
.td-side__login input:focus {
	outline: none;
	border-color: var(--td-accent, var(--color-fg));
}
.td-side__login-submit {
	margin-top: 4px;
	padding: 9px 14px;
	background: var(--td-accent, var(--color-fg));
	color: #fff;
	border: none;
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: opacity 0.2s;
}
.td-side__login-submit:hover { opacity: 0.85; }
.td-side__login-status {
	font-size: 12px;
	min-height: 14px;
	margin: 4px 0 0;
	color: var(--color-fg-mute);
}
.td-side__login-status.is-loading { color: var(--color-fg-mute); }
.td-side__login-status.is-err     { color: #c14a4a; }
.td-side__login-foot {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--color-fg-mute);
	display: flex;
	gap: 6px;
	justify-content: space-between;
	align-items: center;
}
.td-side__login-foot a {
	color: var(--color-fg-mute);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.td-side__login-foot a:hover { color: var(--color-fg); }
.td-side__login-foot span { color: var(--color-line); }

@media (max-width: 1024px) {
	.td-side__login { width: 100%; }
}

/* 特定商取引法 table */
.td-tokushoho {
	width: 100%;
	border-collapse: collapse;
	margin: 32px 0 0;
	font-size: 15px;
	line-height: 1.9;
	color: var(--color-fg-soft);
}
.td-tokushoho th,
.td-tokushoho td {
	padding: 18px 20px;
	border-bottom: 1px solid var(--color-line);
	text-align: left;
	vertical-align: top;
}
.td-tokushoho th {
	width: 200px;
	font-weight: 500;
	color: var(--color-fg);
	background: var(--section-bg-soft);
}
.td-tokushoho td p:first-child { margin-top: 0; }
.td-tokushoho td p:last-child { margin-bottom: 0; }
.td-tokushoho td a {
	color: var(--td-accent, var(--color-fg));
	text-decoration: underline;
	text-underline-offset: 4px;
}
.td-tokushoho__note {
	margin-top: 24px;
	font-size: 13px;
	color: var(--color-fg-mute);
	text-align: right;
}
@media (max-width: 720px) {
	.td-tokushoho th, .td-tokushoho td { display: block; padding: 14px 16px; }
	.td-tokushoho th { width: auto; border-bottom: 0; }
}

/* Cancel page */
.td-cancel-cta {
	margin-top: 40px;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--color-line);
	text-align: center;
}
.td-cancel-cta button {
	border: none;
	cursor: pointer;
	font-family: inherit;
}

/* Studio journal */
.td-articles {
	list-style: none; margin: 32px 0 0; padding: 0;
	display: grid; gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.td-article-card a { display: block; color: inherit; text-decoration: none; }
.td-article-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-line-soft) center/cover no-repeat;
	margin-bottom: 14px;
}
.td-article-card__cat {
	display: inline-block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--td-accent, var(--color-fg));
	margin-bottom: 6px;
}
.td-article-card__title {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.7;
	margin: 0 0 6px;
}
.td-article-card__date {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--color-fg-mute);
	margin: 0;
}
.td-prose--teaser {
	mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.td-journal-single__thumb {
	margin: 0 0 32px;
}
.td-journal-single__thumb img {
	width: 100%;
	height: auto;
	display: block;
}
.td-journal-single__foot {
	margin-top: 56px;
	padding: 28px;
	background: var(--section-bg-soft);
	border: 1px solid var(--color-line);
	font-size: 15px;
	color: var(--color-fg-soft);
}
.td-journal-single__nav {
	margin-top: 56px;
	text-align: center;
}

/* Session page */
.td-session-list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	border-top: 1px solid var(--color-line);
}
.td-session-list li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 16px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--color-line);
	font-size: 15px;
}
.td-session-list__date { font-weight: 500; }
.td-session-list__time { color: var(--color-fg-soft); font-family: var(--font-en); font-size: 14px; }
.td-session-list__status {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.12em;
	padding: 4px 10px;
	border-radius: 999px;
	background: #eef3ee;
	color: #2f5d3a;
}
.td-session-list--past li { color: var(--color-fg-mute); }
.td-session-list__note {
	margin-top: 16px;
	font-size: 13px;
	color: var(--color-fg-mute);
}
.td-session-list__note a { color: var(--color-fg); text-decoration: underline; text-underline-offset: 4px; }

.td-session-reservation {
	margin-top: 32px;
	background: var(--section-bg-card);
	border: 1px solid var(--color-line);
	padding: clamp(28px, 4vw, 48px);
}

@media (max-width: 1024px) {
	.td-shell { grid-template-columns: 1fr; }
	.td-side {
		border-right: 0;
		border-bottom: 1px solid var(--color-line);
	}
	.td-side__inner {
		position: static;
		min-height: 0;
		height: auto;
		max-height: none;
		padding: 24px var(--container-pad);
		flex-direction: row;
		align-items: center;
		gap: 24px;
		flex-wrap: wrap;
		overflow: visible;
	}
	.td-side__brand { padding-bottom: 0; border: 0; flex-shrink: 0; }
	.td-side__nav { flex: 1 1 100%; }
	.td-side__nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 24px;
	}
	.td-side__item { border: 0; }
	.td-side__item a { padding: 8px 0; }
	.td-side__cta { margin-top: 0; padding-top: 0; border: 0; flex: 1 1 100%; }
	/* Hide the inline login form on mobile — dedicated /login page handles it */
	.td-side__login { display: none; }
	.td-side__cta-link { display: inline-block; }
}


/* ============================================================
 * 45-cf7-overrides
 * ============================================================ */

/* -----------------------------
   Contact Form 7 — skin to match the existing .contact-form design.

   The CF7 form template (saved in WP-Admin) places our existing class names
   on inputs (`class:contact-form__input` etc.), so most styling falls
   through automatically. This file fixes the bits CF7 wraps with its own
   markup: the `<span class="wpcf7-form-control-wrap">` wrappers, validation
   tips, response message, list items for radio/checkbox, acceptance and
   submit.
----------------------------- */

/* CF7 wraps every form-tag in a span that defaults to inline. Force block
   so the inputs inside fill the row width that .contact-form expects. */
.contact-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Inline validation tip below an invalid field */
.contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: #c0392b;
}

/* Global response message (success / mail-sent / validation summary) */
.contact-form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 18px 22px;
	border: 1px solid var(--color-line);
	background: #faf8f3;
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--color-fg);
}
.contact-form .wpcf7 form.sent .wpcf7-response-output {
	border-color: #aac4a4;
	background: #f1f6ee;
}
.contact-form .wpcf7 form.invalid .wpcf7-response-output,
.contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form .wpcf7 form.spam .wpcf7-response-output,
.contact-form .wpcf7 form.failed .wpcf7-response-output {
	border-color: #d8b3a9;
	background: #fbf3f0;
}

/* Spinner — center it next to the submit */
.contact-form .wpcf7-spinner {
	margin: 0 0 0 16px;
	vertical-align: middle;
}

/* --- Radios -----------------------------------------------------------
   CF7 outputs:
     .wpcf7-form-control-wrap > span.wpcf7-form-control.wpcf7-radio
       > span.wpcf7-list-item > label > input + .wpcf7-list-item-label
   We re-flow it to look like the existing .contact-form__radios layout. */
.contact-form .wpcf7-radio,
.contact-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
}
.contact-form .wpcf7-list-item {
	margin: 0;
}
.contact-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 15px;
	letter-spacing: 0.04em;
}
.contact-form .wpcf7-list-item input[type="radio"],
.contact-form .wpcf7-list-item input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--color-fg);
	cursor: pointer;
	margin: 0;
}

/* --- Acceptance (privacy consent) ------------------------------------ */
.contact-form__row--accept {
	flex-direction: row !important;
	align-items: center;
	gap: 8px !important;
	margin-top: -8px;
}
.contact-form .wpcf7-acceptance {
	display: inline-flex;
	align-items: center;
}
.contact-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.contact-form .wpcf7-acceptance label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
}
.contact-form .wpcf7-acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--color-fg);
	cursor: pointer;
	margin: 0;
}
.contact-form__row--accept a {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--color-fg);
}

/* --- Submit button -----------------------------------------------------
   Pseudo-elements (::before/::after) don't work on <input>, so the form
   template wraps [submit] inside a <span class="btn"> and renders a hidden
   absolute-positioned <input type="submit"> on top. The visible label is
   `.contact-form__submit-text`; clicks hit the invisible input and submit. */
.contact-form__submit {
	margin-top: 8px;
}
.contact-form__submit-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
.contact-form__submit-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 0;
	color: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	z-index: 1;
}
.contact-form__submit-input:focus-visible + .contact-form__submit-text,
.contact-form__submit-btn:has(.contact-form__submit-input:focus-visible) {
	outline: 2px solid var(--color-fg);
	outline-offset: 4px;
}

/* --- Tweaks for the wrappers around existing inputs ------------------- */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
	font-family: inherit;
}

/* CF7 prepends ` ` before/after radios in some locales — strip leading
   space inside list items so the gap above is the only space. */
.contact-form .wpcf7-list-item-label::before,
.contact-form .wpcf7-list-item-label::after { content: none; }

/* --- Spinner / hide AJAX loading frames -------------------------------
   CF7's spinner is fine, but center vertically with the submit button. */
.contact-form .wpcf7-spinner {
	background-color: var(--color-fg);
	opacity: 0.4;
}


/* ============================================================
 * 46-snw-tabs
 * ============================================================ */

/* -----------------------------
   SEMINAR & WORKSHOP — front-page tabbed grid.
   Tab UI sits between the section heading and the cards. Active tab is
   underlined by a thin baseline rule that matches the journal/archive tone.
----------------------------- */
.snw-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 32px;
	border-bottom: 1px solid var(--color-line);
}
.snw-tab {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	padding: 14px 22px;
	margin: 0;
	font-family: inherit;
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--color-fg-mute);
	cursor: pointer;
	position: relative;
	transition: color 0.25s var(--ease-out);
}
.snw-tab:hover {
	color: var(--color-fg);
}
.snw-tab.is-active {
	color: var(--color-fg);
	font-weight: 500;
}
.snw-tab.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--color-fg);
}
.snw-tab__count {
	margin-left: 6px;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--color-fg-mute);
}
.snw-tab.is-active .snw-tab__count {
	color: var(--color-fg-soft);
}

.snw-panel {
	display: none;
}
.snw-panel.is-active {
	display: block;
}
.snw-empty {
	padding: 48px 0;
	text-align: center;
	color: var(--color-fg-mute);
	font-size: 15px;
	letter-spacing: 0.04em;
}

@media (max-width: 600px) {
	/* タブは折り返さず1行・横スクロールに。スクロールバーは表示（マウス環境でも操作可） */
	.snw-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		touch-action: pan-x;
		-webkit-overflow-scrolling: touch;
	}
	.snw-tab {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 12px 14px;
		font-size: 14px;
	}
}

/* -----------------------------
   Service detail page — embedded event grid for
   single-training / single-workshop / extra-training pages.
   Reuses .events-grid + .event-card classes; this just frames the section.
----------------------------- */
.srv-main__events {
	margin: 56px 0 24px;
}
.srv-main__events-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-line);
}
.srv-main__events-head h2 {
	font-size: 19px;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	margin: 0;
}
.srv-main__events-head .srv-main__events-en {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	text-transform: capitalize;
}
.srv-main__events .events-grid {
	margin: 0;
}
@media (max-width: 900px) {
	.srv-main__events-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* -----------------------------
   Event archive filter — top tabs
----------------------------- */
.event-archive-filter {
	padding: 8px 0 0;
	border-bottom: 1px solid var(--color-line);
	background: transparent;
}
.event-archive-filter__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
}
.event-archive-filter__tab {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 14px 22px;
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--color-fg-mute);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.event-archive-filter__tab:hover { color: var(--color-fg); }
.event-archive-filter__tab.is-active {
	color: var(--color-fg);
	border-bottom-color: var(--color-fg);
	font-weight: 500;
}
.event-archive-filter__tab small {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--color-fg-mute);
}
.event-archive-filter__tab.is-active small {
	color: var(--color-fg-soft);
}

@media (max-width: 600px) {
	.event-archive-filter__tab { padding: 12px 14px; font-size: 14px; }
}

/* ============================================================
 * 47-front-dark
 *   Dark charcoal band (hero → service) with a faint animated
 *   geometric backdrop, solest-style. Plus the SERVICE Quality
 *   layout (left sticky title + right line-headline list).
 * ============================================================ */
:root {
	--tfd-dark: #24211e;
}

/* --- Dark band wrapper + sticky geometric backdrop --- */
.front-dark {
	position: relative;
	background: var(--tfd-dark);
	color: rgba(255, 255, 255, 0.9);
}
.front-dark > section {
	position: relative;
	z-index: 1;
	background: transparent;
}
.geo-bg {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	margin-bottom: -100vh;
	margin-bottom: -100svh;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	color: #fff;
	opacity: 1;
	transition: opacity 0.9s var(--ease-out);
}
/* The warm-cream rhythm sections must not flash light on dark pages */
body.theme-dark .section--vmv,
body.theme-dark .section--entry,
body.theme-dark .section--contact-cta {
	background: transparent;
}

/* Fixed variant — page-wide backdrop on the dark About pages.
   z-index:-1 sits behind all content but in front of the body background,
   so transparent sections reveal the ripple and opaque ones (footer/CTA) cover it. */
.geo-bg--fixed {
	position: fixed;
	inset: 0;
	height: 100vh;
	height: 100svh;
	margin-bottom: 0;
	z-index: -1;
}
/* Water-ripple backdrop: radial lines converge to the centre, form a circle,
   then ripples expand outward like a falling water droplet — on a loop. */
.geo-bg__ripple {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(160vh, 160vw);
	height: min(160vh, 160vw);
	transform: translate(-50%, -50%);
	color: #fff;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	transition: left 1.2s var(--ease-out);
}
/* From the Service section onward (Service / SEMINAR & WORKSHOP / Why), fade the
   ripple out entirely. The toggle is driven by JS (initGeoShift) and stays on
   for every section below Service, returning only when scrolled back up above it. */
.geo-bg.is-geo-left {
	opacity: 0;
}
/* Ripple still drifts aside underneath the fade (kept for graceful motion). */
.geo-bg.is-geo-left .geo-bg__ripple {
	left: 12%;
}
@media (max-width: 768px) {
	.geo-bg.is-geo-left .geo-bg__ripple { left: 4%; }
}
.geo-bg__lines {
	transform-box: view-box;
	transform-origin: center;
	opacity: 0;
	animation: geo-converge 6s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
.geo-bg__lines line { vector-effect: non-scaling-stroke; }
.geo-bg__ring {
	transform-box: view-box;
	transform-origin: center;
	opacity: 0;
	vector-effect: non-scaling-stroke;
	animation: geo-ripple 6s cubic-bezier(0.16, 0.7, 0.3, 1) infinite;
}
.geo-bg__ring--2 { animation-delay: 0.5s; }
.geo-bg__ring--3 { animation-delay: 1s; }

/* Lines sweep in from outside and shrink to a point at the centre */
@keyframes geo-converge {
	0%   { transform: scale(1.55); opacity: 0; }
	12%  { opacity: 0.18; }
	32%  { transform: scale(0.04); opacity: 0.2; }
	40%  { transform: scale(0.04); opacity: 0; }
	100% { transform: scale(0.04); opacity: 0; }
}
/* The formed circle expands and fades like a ripple */
@keyframes geo-ripple {
	0%, 34%  { transform: scale(0.16); opacity: 0; }
	40%      { opacity: 0.17; }
	100%     { transform: scale(2.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.geo-bg__lines,
	.geo-bg__ring {
		animation: none;
		opacity: 0.08;
		transform: none;
	}
}

/* --- Text/element colour flips inside the dark band --- */
.front-dark .section-heading__label { color: rgba(255, 255, 255, 0.6); }
.front-dark .section-heading__title { color: #fff; }
.front-dark .section-lead { color: rgba(255, 255, 255, 0.78); }
.front-dark .hero--video .hero__label { color: rgba(255, 255, 255, 0.7); }
/* Concept outro sits inside the dark band now */
.front-dark .cstack__outro { background: transparent; }
.front-dark .cstack__outro-text { color: rgba(255, 255, 255, 0.92); }
.front-dark .cstack__outro-text strong { border-bottom-color: rgba(255, 255, 255, 0.5); }
.front-dark .cstack__outro-cta .btn { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.front-dark .cstack__outro-cta .btn::after { background: #fff; }
/* Concept outro statement — enlarged per client review (front #concept strong).
   Client asked for 80px / line-height 110px on BOTH PC and SP. */
#concept .cstack__outro-text strong {
	font-size: 81px;
	line-height: 110px;
	color: #807a72;
	border-bottom: none;
}
/* Concept outro button tinted to match the statement colour (#807a72). */
#concept .cstack__outro-cta .btn {
	color: #807a72;
	border-bottom-color: #807a72;
}
#concept .cstack__outro-cta .btn::after {
	border-color: #807a72;
	color: #807a72;
	background: transparent;
}
#concept .cstack__outro-cta .btn:hover::after {
	background: #807a72;
	color: #fff;
}
.front-dark .cstack__outro-cta .btn:hover { color: var(--tfd-dark); }
.front-dark .cstack__outro-cta .btn:hover::after { background: #fff; }
/* Ghost buttons + "more" links */
.front-dark .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.front-dark .btn--ghost:hover { background: #fff; color: var(--tfd-dark); border-color: #fff; }
.front-dark .btn::after { background: #fff; }

/* --- Events (SEMINAR & WORKSHOP) dark overrides --- */
.front-dark .snw-tab { color: rgba(255, 255, 255, 0.6); }
.front-dark .snw-tab.is-active { color: #fff; }
.front-dark .snw-tabs { border-color: rgba(255, 255, 255, 0.16); }
.front-dark .snw-tab::after { background: #fff; }
.front-dark .event-card__cat { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.3); }
.front-dark .event-card__schedule { color: rgba(255, 255, 255, 0.6); }
.front-dark .event-card__title { color: #fff; }
.front-dark .event-card__excerpt { color: rgba(255, 255, 255, 0.7); }
.front-dark .event-card__link { color: #fff; border-color: #fff; }
.front-dark .event-card__link:hover { background: #fff; color: var(--tfd-dark); }
.front-dark .event-card__link--reserve { background: #fff; color: var(--tfd-dark); border-color: #fff; }
.front-dark .event-card__link--reserve:hover { background: transparent; color: #fff; }
.front-dark .snw-empty { color: rgba(255, 255, 255, 0.6); }

/* --- SERVICE: Quality layout (left sticky title + right list) --- */
.srv-q {
	padding-block: clamp(80px, 12vh, 150px) clamp(96px, 16vh, 200px);
}
.srv-q__inner {
	display: flex;
	gap: clamp(40px, 6vw, 96px);
	align-items: stretch;
}
.srv-q__title { flex: 1; min-width: 0; }
.srv-q__title-sticky {
	position: sticky;
	top: calc(var(--header-h) + clamp(24px, 5vh, 56px));
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.srv-q__label {
	font-family: var(--font-en);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.4em;
	color: rgba(255, 255, 255, 0.6);
}
.srv-q__heading {
	font-size: clamp(20px, 2.2vw, 31px);
	font-weight: 400;
	letter-spacing: 0.2em;
	line-height: 1.9;
	color: #fff;
	margin: 0;
}
.srv-q__lead {
	font-size: clamp(13.5px, 1vw, 15px);
	letter-spacing: 0.12em;
	line-height: 2.2;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
	max-width: 28em;
}
.srv-q__content {
	width: min(56%, 720px);
	display: flex;
	flex-direction: column;
	gap: clamp(52px, 8vh, 88px);
}
.srv-q__item {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.srv-q__item-headline {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.85);
}
.srv-q__item-headline::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.28);
}
.srv-q__item-num { color: rgba(255, 255, 255, 0.55); }
.srv-q__item-title {
	font-size: clamp(19px, 1.9vw, 27px);
	font-weight: 400;
	letter-spacing: 0.2em;
	line-height: 1.7;
	color: #fff;
	margin: 0;
}
.srv-q__item-desc {
	font-size: clamp(14px, 1vw, 15px);
	letter-spacing: 0.1em;
	line-height: 2.2;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}
.srv-q__item-list {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 22px;
}
.srv-q__item-list a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color 0.3s var(--ease-out);
}
.srv-q__item-list a::before {
	content: "";
	width: 14px;
	height: 1px;
	background: rgba(255, 255, 255, 0.4);
	flex-shrink: 0;
	transition: width 0.3s var(--ease-out);
}
.srv-q__item-list a:hover { color: #fff; }
.srv-q__item-list a:hover::before { width: 24px; }
.srv-q__item-more {
	display: inline-block;
	align-self: flex-start;
	margin-top: 4px;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.25em;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 4px;
	transition: opacity 0.3s var(--ease-out);
}
.srv-q__item-more:hover { opacity: 0.7; }
.front-dark .srv-q .section__more { margin-top: clamp(56px, 8vh, 96px); display: flex; justify-content: center; }

@media (max-width: 900px) {
	.srv-q__inner { flex-direction: column; gap: clamp(40px, 7vh, 72px); }
	.srv-q__title-sticky { position: static; }
	.srv-q__content { width: 100%; }
}

/* ============================================================
 * スマホ：フロント各セクションの上下余白を youtube 基準（上 var(--space-section)・下0）に統一。
 * service の突出した余白、および「下余白80＋次セクション上余白80＝二重ギャップ160px」を解消し、
 * セクション間ギャップを一定にする。元の .srv-q / .journal-block 等より後に置くことで確実に上書き。
 * ============================================================ */
@media (max-width: 768px) {
	.srv-q { padding-block: var(--space-section) 0; }
	.section--events,
	.section--works,
	.journal-block,
	.section--youtube { padding-bottom: 0; }
}

/* PC専用の改行（PC=≥901px でのみ改行。スマホ/タブレットでは無効化＝自然折り返し）。
   編集画面のコンテンツ側で <br class="br-pc"> として使う。 */
.br-pc { display: none; }
@media (min-width: 901px) {
	.br-pc { display: inline; }
}

/* ============================================================
 * 代表プロフィール page ( /about/profile/ ) — 2-col with sticky side TOC.
 * 目次は initArticleToc() が h2/h3 から自動生成。
 * ============================================================ */
.profile-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(40px, 5vw, 80px);
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(32px, 5vw, 64px) var(--container-pad) var(--space-section);
	box-sizing: border-box;
	align-items: start;
}
/* TOC 列を行の全高に伸ばすことで、中の sticky が可動域を得てスクロール追従する。
   （align-items:start だと列が中身の高さに縮み、sticky が動かない＝追従しない罠） */
.profile-toc {
	align-self: stretch;
	height: 100%;
}
.profile-toc__inner {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	max-height: calc(100vh - var(--header-h) - 48px);
	overflow-y: auto;
}
.profile-toc.is-empty { display: none; }
/* 本文側は .page-content__body のタイポグラフィを継承。見出しは追従ヘッダー分のオフセット */
.profile-body { margin: 0; }
.profile-body h2,
.profile-body h3 { scroll-margin-top: calc(var(--header-h) + 24px); }
.profile-body h2:first-child,
.profile-body > h2:first-of-type { margin-top: 0; }

@media (max-width: 900px) {
	.profile-layout {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-top: 28px;
	}
	/* スマホ/タブレットでは目次を本文上にブロック表示（追従は解除） */
	.profile-toc__inner {
		position: static;
		max-height: none;
		overflow: visible;
		background: #ffffff;               /* #f3efe8 → #fff（ID 2634） */
		border-left: 2px solid var(--color-fg);
		padding: 35px;                     /* 24 28 → 35（ID 2638） */
	}
	/* SPでは TOC 列のstretch指定を解除（本文上のブロックに戻す） */
	.profile-toc { align-self: start; height: auto; }
	/* /about/profile/ は暗テーマ（--color-fg-soft/mute が明色）。白背景の目次上で
	   文字・番号・ダッシュが白く溶けるため、SPのみ暗色に固定。.profile-toc 配下に限定し
	   journal 単記事の目次には波及させない。 */
	.profile-toc__inner .article-side__heading { font-size: 17px; }                       /* 10→16px（ID 2637） */
	.profile-toc .article-toc__list > li > a { font-size: 16px; color: #24211e; }         /* 13→15px / 色（ID 2635） */
	.profile-toc .article-toc__list > li > a::before { color: #8a8278; }                  /* 連番を視認可能な暗色に */
	.profile-toc .article-toc__list ol li > a { font-size: 14px; color: #24211e; }        /* 12→13px / 色（ID 2636） */
	.profile-toc .article-toc__list ol li > a::before { background: #8a8278; }             /* ダッシュを視認可能に */
}

/* #2115 イベントアーカイブ（/event/）のヒーロー下線を削除。
   .page-hero は全ページ共通のため event アーカイブのみにスコープ。 */
.post-type-archive-event .page-hero { border-bottom: 0; }

/* #2116 /flow/ 1つ目の flow-section の下線を削除。
   #flow-note・CTA(.flow-section--last) を削除したことで末尾になるセクションの
   下線も消し、フッター手前の余白を確保する。 */
.flow-content .flow-section:first-child { border-bottom: 0; }
.flow-content .flow-section:last-child { border-bottom: 0; margin-bottom: clamp(96px, 14vh, 160px); }

/* #2132 /journal/（ジャーナル一覧）の見出し下マージンを広げる。
   .section-heading は全ページ共通のため journal アーカイブのみにスコープ。 */
.post-type-archive-journal .section-heading { margin-bottom: 100px; }

/* === SPフロント微調整（client review 2026-06-20 / websupport #59 SP表示） ===
   ヒーロー巨大フォントのSP縮小ほか。これまでSP巨大のまま保留だった指摘を反映。 */
.u-sp-br { display: none; }
@media (max-width: 768px) {
	/* hero__title（ID 2475→2531）: 90→40px / lh 110→60px / letter-spacing 16.2→4px / margin-bottom 40→30px */
	.hero--dark .hero__title { font-size: 41px; line-height: 60px; letter-spacing: 4px; margin-bottom: 30px; }
	/* hero__label（ID 2476→2529）: lh 32→24px / letter-spacing 6→3px */
	.hero--dark .hero__label { line-height: 24px; letter-spacing: 3px; }
	/* hero__sub（ID 2477→2530）: 18→14px / lh 36→28px */
	.hero--dark .hero__sub { font-size: 15px; line-height: 28px; }
	/* concept outro strong（ID 2480）: 80→26px / lh 110→44px */
	#concept .cstack__outro-text strong { font-size: 27px; line-height: 44px; }
	/* concept outro strong の改行をSPのみ追加（ID 2481）: 「人が育つ組織を｜デザインします。」 */
	.u-sp-br { display: inline; }
	/* srv-q__heading（ID 2482→2499/2501）: 19→24px */
	.srv-q__heading { font-size: 25px; }
}

/* === SPフロント微調整 第2弾（client review 2026-06-20 / websupport #59 SP表示） === */
/* journal の section-lead を PC/SP 両方で非表示（ID 2510, DB非編集・可逆） */
#journal .section-lead { display: none; }
@media (max-width: 768px) {
	/* hero セクション下paddingを縮小（ID 2495）: 80→40px */
	.hero--dark { padding-bottom: 40px; }
	/* concept カードのリード文 SP改行（ID 2496/2497/2498）は u-sp-br で対応（上で inline 化済み） */
	/* service 見出し（ID 2500→2534）: srv-q__item-title 18→20px */
	.srv-q__item-title { font-size: 21px; }
	/* service 説明文（ID 2535）: srv-q__item-desc 13→14px / lh 28.6→26px */
	.srv-q__item-desc { font-size: 15px; line-height: 26px; }
	/* service リンク（ID 2536）: srv-q__item-list a 13→14px */
	.srv-q__item-list a { font-size: 15px; }
	/* service コンテンツ間隔（ID 2502）: gap 59.9→80px */
	.srv-q__content { gap: 80px; }
	/* events セクション上padding（ID 2503）: 80→100px */
	#events { padding: 100px 0 0; }
	/* events カード cat-row 下padding（ID 2504）: 12→15px */
	#events .event-card__cat-row { padding: 0 0 15px; }
	/* events コンテナ下margin（ID 2505）: 0→100px */
	#events > .container { margin-bottom: 100px; }
	/* works カード名（ID 2506）: 15→18px / lh 24.8→32px */
	#works .works-grid__name { font-size: 18px; line-height: 32px; }
	/* works グリッド gap（ID 2507→2539）: 24/16→60px */
	#works .works-grid { gap: 60px; }
	/* works ケースCTA（ID 2508）: 11→12px / margin-top 4→10px */
	#works .works-grid__case-cta { font-size: 13px; margin-top: 10px; }
	/* journal セクション上padding（ID 2509）: 80→100px */
	#journal { padding: 100px 0 0; }
	/* journal posts gap（ID 2511）: 20→30px */
	#journal .journal-block__posts { gap: 30px; }
	/* journal タイトル行間（ID 2512）: 21.7→26px */
	#journal .journal-row__title { line-height: 26px; }
	/* journal more 上margin（ID 2513）: 48→30px */
	#journal .journal-block__more { margin-top: 30px; }
	/* youtube セクション上padding（ID 2514）: 80→100px */
	#youtube { padding: 100px 0 0; }
	/* youtube グリッド gap（ID 2515→2541）: 24/16→60px */
	#youtube .yt-grid { gap: 60px; }
	/* youtube カードタイトル（ID 2516）: 16→18px / lh 27.2→34px */
	#youtube .yt-card__title { font-size: 19px; line-height: 34px; }
	/* youtube カード抜粋（ID 2517）: 13→14px */
	#youtube .yt-card__excerpt { font-size: 15px; }
	/* youtube/news more 上margin（ID 2518/2520）: 48→30px */
	#youtube .section__more,
	#news .section__more { margin-top: 30px; }
	/* news セクション上下padding（ID 2519/2521）: 80 0 80 → 100 0 100 */
	#news { padding: 100px 0 100px; }
}

/* === SPフロント微調整 第3弾（client review 2026-06-20 / websupport #59 SP表示） ===
   concept/why の cstack カード文字を拡大、service アイテム文字、journalサムネ拡大。
   cstack は #concept と #why で line-height が異なるためセクション別にスコープ。 */
@media (max-width: 768px) {
	/* concept カードのリード/本文（ID 2532/2533）: lead 18→22px・lh34→38 / body 12.5→14px・lh→26 */
	#concept .cstack__item-lead { font-size: 23px; line-height: 38px; }
	#concept .cstack__item-body { font-size: 15px; line-height: 26px; }
	/* why カードのリード/本文（ID 2537/2538）: lead 18→22px・lh34→40 / body 12.5→14px・lh→28 */
	#why .cstack__item-lead { font-size: 23px; line-height: 40px; }
	#why .cstack__item-body { font-size: 15px; line-height: 28px; }
	/* journal サムネイルを1.3倍に（ID 2540）: SPのサムネ列 96→125px */
	#journal .journal-row__link { grid-template-columns: 125px 1fr; }
	/* /about/ の #philosophy は cstack 再利用（ID 2618/2619）:
	   lead 18→22px・lh34→28 / body 12.5→14px。#philosophy 内に cstack を持つのは /about/ のみ */
	#philosophy .cstack__item-lead { font-size: 23px; line-height: 28px; }
	#philosophy .cstack__item-body { font-size: 15px; }
	/* /about/ #philosophy カード2のリード（ID 2625）: lh 28→40px / 下margin 0→15px */
	#philosophy article:nth-of-type(2) .cstack__item-lead { line-height: 40px; margin-bottom: 15px; }
	/* /about/ #philosophy セクション下padding（ID 2626）: 80→0px。page-id-4=Aboutに限定 */
	.page-id-4 #philosophy { padding-bottom: 0; }
	/* /about/ 代表写真（#profile内）を80%・中央表示（ID 2633）。page-id-4限定 */
	.page-id-4 #profile figure img { width: 80%; margin-left: auto; margin-right: auto; display: block; }
}

/* === コンセプトページ SP微調整（client review 2026-06-20 / websupport #59） ===
   /about/concept/ のSP表示。このページのmobileレイアウト切替（860px）に合わせる。 */
@media (max-width: 860px) {
	/* サイドバー カテゴリ（ID 2557→2650）: 10→12px / 下margin 8→10px（両方=10に統一） */
	.concept-sidebar__cat { font-size: 13px; margin-bottom: 10px; }
	/* サイドバー タイトル（ID 2558）: 20→28px / 行間 20→40px */
	.concept-sidebar__title { font-size: 29px; line-height: 40px; }
	/* ラッパー上padding（ID 2559）: 180→80px */
	.concept-wrap { padding-top: 80px; }
	/* ステートメント見出し（ID 2560）: 行間 43.5→50px / 字間 -0.6→3px */
	.concept-statement { line-height: 50px; letter-spacing: 3px; }
	/* 特集画像の下余白（ID 2561）: 0→40px */
	.concept-feat-img { margin-bottom: 40px; }
	/* lead セクションの下線を消す（ID 2562） */
	#lead { border-bottom: 0; }
	/* 署名（ID 2563→2585）: 10→14px */
	.concept-sig { font-size: 15px !important; }
	/* concept-content の上線を消す（ID 2574） */
	.concept-content { border-top: 0; }
	/* philosophy / background セクションの下線を消す（ID 2575/2576） */
	#philosophy, #background { border-bottom: 0; }
	/* セクション見出し ja の下margin（ID 2577）: 5→10px */
	.concept-section__ja { margin-bottom: 10px; }
	/* セクション見出し en（ID 2578）: 10→12px */
	.concept-section__en { font-size: 13px; }
	/* philosophy 下padding（ID 2579）: 72→80px。#philosophy は /about/ にも存在するため
	   コンセプトページ（page-id-52）に限定し、/about/ へ漏れないようにする。 */
	.page-id-52 #philosophy { padding-bottom: 80px; }
	/* profile 各種フォント（ID 2580/2581/2582） */
	.concept-profile__role { font-size: 13px; }
	.concept-profile__name-en { font-size: 14px; }
	.concept-profile__name { font-size: 25px; }
	/* profile 下padding 100px ＋ 下線削除（ID 2583） */
	#profile { padding-bottom: 100px; border-bottom: 0; }
	/* message 下padding 0（ID 2586, この要素のみ） */
	#message { padding-bottom: 0; }
	/* closing 上線削除＋サイズ（ID 2584/2587）: 15→14px / lh 28.5→28px / 上margin削除（ID 2628）: 40→0 */
	.concept-closing { border-top: 0; font-size: 15px !important; line-height: 28px !important; margin-top: 0 !important; }
	/* profile 本文（ID 2591）: 13→14px / lh 29.9→28px */
	.concept-profile__text p { font-size: 15px; line-height: 28px; }
	/* 代表プロフィール写真を中央に（ID 2627）。単一列化(≤600)で max-width:220px のfigを中央寄せ */
	.concept-profile__fig { margin-left: auto; margin-right: auto; }
}

/* === staff ページ SP微調整（client review 2026-06-20 / websupport #59） ===
   /about/staff/ のSP表示。staff系クラスはこのページ専用。
   page-hero はサブページ共通だが「他ページも同様に」の指示によりSP全体に適用。
   このページのmobile切替（760px）に合わせる。 */
@media (max-width: 760px) {
	/* page-hero 見出し（ID 2592, 他ページ共通）: 44→30px / lh 70.4→50px / 下margin 24→40px */
	.page-hero__title { font-size: 31px; line-height: 50px; margin-bottom: 40px; }
	/* page-hero リード（ID 2593）: 15→14px / lh 34.5→28px */
	.page-hero__lead { font-size: 15px; line-height: 28px; }
	/* staff-lead 本文（ID 2630, 3段落共通）: 15→14px / lh 34.5→28px */
	.staff-lead p { font-size: 15px; line-height: 28px; }
	/* page-hero 下線を消す（ID 2594） */
	.page-hero { border-bottom: 0; }
	/* staff カード各種（ID 2595〜2600, 全カード共通） */
	/* role: 下margin/padding 16→20px（ID 2631, 全カード共通） */
	.staff-card__role { font-size: 14px; margin-bottom: 20px; padding-bottom: 20px; }
	.staff-card__en { font-size: 14px; }
	.staff-card__name { font-size: 23px; font-weight: 400; }
	.staff-card__domains li { font-size: 13px; }
	.staff-card__intro { font-size: 15px; }
	.staff-card__more { font-size: 14px; }
	/* staff グリッド gap（ID 2601）: 56→80px */
	.staff-grid { gap: 80px; }
	/* スタッフ写真を中央に（ID 2602/2616, 両プロフィール共通） */
	.staff-profile__fig { margin-left: auto; margin-right: auto; }
	/* 資格/執筆テーマ ラベル（ID 2603/2604, 両プロフィール共通）: 10→16px */
	.staff-qualifications__label,
	.staff-topics__label { font-size: 17px; }
	/* 資格ラベルのみ（ID 2632, 両プロフィール共通）: 16→18px / 400→600 / 字間3.5→2px */
	.staff-qualifications__label { font-size: 19px; font-weight: 600; letter-spacing: 2px; }
	/* 資格リスト li（ID 2605）: 12→14px */
	.staff-qualifications__list li { font-size: 15px; }
	/* 執筆テーマ li（ID 2606）: 11→12px */
	.staff-topics__list li { font-size: 13px; }
	/* 記事一覧リンク span（ID 2607）: 13→14px */
	.staff-profile__article-link span { font-size: 15px; }
	/* nakamura 下padding（ID 2608）: 80→100px */
	#nakamura { padding-bottom: 100px; }
	/* natsuki 上下padding（ID 2609/2615）: 80→100px */
	#natsuki { padding-top: 100px; padding-bottom: 100px; }
}

/* SP: スクロール前（overlayヘッダー）の白い3本線が、ヒーロー動画ロード前や
   明るい背景に溶けて見えなくなる問題の改善。無地ボタンの見た目は保ったまま、
   白線にドロップシャドウで縁取りして暗・明どちらの背景でも視認できるようにする。 */
@media (max-width: 900px) {
	body.has-overlay-header .nav-trigger__btn span {
		filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55));
	}
}

/* === SP微調整 第4弾（client review 2026-06-21 / websupport #59 SP表示） ===
   concept 写真中央・closing余白／staff lead・カード役割・資格ラベル／about 代表写真／
   profile 目次（SP白背景化に伴う文字色・サイズ・余白）。 */

/* concept /about/concept/（mobile切替860px。写真max-widthは600px帯で効く） */
@media (max-width: 860px) {
	/* 代表プロフィール写真をSPで中央寄せ（ID 2627） */
	.concept-profile__fig { margin-inline: auto; }
	/* closing の上余白を詰める（ID 2628）: margin-top 40→0 */
	.concept-closing { margin-top: 0 !important; }
}

/* staff /about/staff/（mobile切替760px） */
@media (max-width: 760px) {
	/* リード文（ID 2630, .staff-lead p）: 15→14px / lh 34.5→28px */
	.staff-lead p { font-size: 15px; line-height: 28px; }
	/* カード役割（ID 2631）: 下 margin/padding 16→20px */
	.staff-card__role { margin-bottom: 20px; padding-bottom: 20px; }
	/* 資格ラベル（ID 2632, 両プロフィール共通）: 16→18px / 400→600 / 字間 3.5→2px */
	.staff-qualifications__label { font-size: 19px; font-weight: 600; letter-spacing: 2px; }
}

/* about /about/（768px帯で founder が1列化） */
@media (max-width: 768px) {
	/* 代表写真を80%・中央表示（ID 2633）。page-id-4=About に限定 */
	.page-id-4 #profile .founder__portrait { width: 80%; margin-inline: auto; }
}

/* profile /about/profile/（目次が本文上ブロック化する900px帯）。
   暗テーマでvar文字色が明色＝白背景化で読めなくなるため、文字色も本文色に固定。 */
@media (max-width: 900px) {
	/* 目次ボックス（ID 2634/2638）: 背景 #f3efe8→#fff / padding 24 28→35 */
	.profile-toc__inner { background: #ffffff; padding: 35px; }
	/* 見出し（ID 2637）: 10→16px。白背景で読めるよう文字色も本文色へ */
	.profile-toc .article-side__heading { font-size: 17px; color: #24211e; }
	/* 目次リンク 上位（ID 2635）: 13→15px / 白→#24211e */
	.profile-toc .article-toc__list > li > a { font-size: 16px; color: #24211e; }
	/* 目次リンク 入れ子（ID 2636）: 12→13px / 白→#24211e */
	.profile-toc .article-toc__list ol li > a { font-size: 14px; color: #24211e; }
}

/* === concept ページ各セクションの余白・下線（client review 2026-06-21 / #59・PC/SP両方） ===
   #lead/#philosophy/#background/#profile は concept/about/staff 等で id を再利用するため
   page-id-52（コンセプトページ）に限定。下padding 72→80px・下線(border-bottom)削除（ID 2640〜2645）。 */
.page-id-52 #lead,
.page-id-52 #philosophy,
.page-id-52 #background,
.page-id-52 #profile { padding-bottom: 80px; border-bottom: 0; }


/* === /about/company/（page-id-54）＋ /about/profile/（page-id-3156） PC/SP両方 / websupport #59 2657-2666 === */
/* company: セクション下線削除＋下padding（ID 2657/2658/2659/2660） */
.page-id-54 #lead { padding-bottom: 100px; border-bottom: 0; }
.page-id-54 #vision { padding-bottom: 100px; border-bottom: 0; }
.page-id-54 #mission { border-bottom: 0; }
/* company: vision/mission の本文を大見出し化（ID 2661/2662）: 14->40px / 600 / lh60 / 白 */
.page-id-54 #vision .concept-text p,
.page-id-54 #mission .concept-text p { font-size: 41px; font-weight: 600; line-height: 60px; color: #1a1a1a; }
/* profile: page-hero 下線削除（ID 2663） */
.page-id-3156 .page-hero { border-bottom: 0; }
/* profile: 目次の文字サイズ（色は各文脈のまま。SPの暗色固定=並行ルールを尊重 / ID 2664/2665/2666） */
.page-id-3156 .profile-toc .article-side__heading { font-size: 15px; }
.page-id-3156 .profile-toc .article-toc__list > li > a { font-size: 16px; line-height: 28px; }
.page-id-3156 .profile-toc .article-toc__list ol li > a { font-size: 15px; }


/* === /about/company/（page-id-54）追加調整 / websupport #59 2667-2674 === */
/* PC専用改行ユーティリティ（company concept-wrap は <=860 で単列化＝PCのみ改行） */
.u-pc-br { display: inline; }
@media (max-width: 860px) { .u-pc-br { display: none; } }
/* サイドバー見出し VISION & MISSION（ID 2670, PC/SP両方）: 24->28px / lh 24->34px */
.page-id-54 .concept-sidebar__title { font-size: 29px; line-height: 34px; }
@media (max-width: 860px) {
	/* セクション見出し ja（ID 2672, SP）: 28->24px */
	.page-id-54 .concept-section__ja { font-size: 25px; }
	/* concept-content 下padding（ID 2673, SP）: 120->20px */
	.page-id-54 .concept-content { padding-bottom: 20px; }
	/* 会社概要セクション 下padding（ID 2674, SP）: 80->100px */
	.page-id-54 #company { padding-bottom: 100px; }
}


/* === /service/（page-id-5）SP・nav調整 / websupport #59 2680-2691 === */
/* まずは体験(entry)のカテゴリnavリンクを一旦非表示（ID 2681, PC/SP）。#entryセクション自体は残す */
.page-id-5 .srv-nav__list li:first-child { display: none; }
@media (max-width: 768px) {
	/* サービスカード（ID 2682-2685, 全カード共通・page-id-5限定） */
	.page-id-5 .srv-card__title { font-size: 19px; line-height: 32px; }
	.page-id-5 .srv-card__lead { font-size: 15px; line-height: 24px; }
	.page-id-5 .srv-card__price { font-size: 14px; }
	.page-id-5 .srv-card__en { font-size: 13px; }
	/* 各サービスセクションの上下padding（ID 2687-2691）: 60->100px */
	.page-id-5 .srv-section { padding-block: 100px; }
}


/* === /service/（page-id-5）PC版 srv-card / websupport #59 2692-2695 === */
@media (min-width: 769px) {
	.page-id-5 .srv-card__en { font-size: 13px; }                       /* 11->12 */
	.page-id-5 .srv-card__title { font-size: 19px; line-height: 32px; } /* 17->18 / lh 28.9->32 */
	.page-id-5 .srv-card__lead { font-size: 14px; line-height: 24px; } /* 12->13 / lh 22.8->24 */
	.page-id-5 .srv-card__price { font-size: 14px; }                   /* 12->13 */
}


/* === /service/（page-id-5）まずは体験セクションを一旦非表示（ID 2700, PC/SP両方・可逆） === */
.page-id-5 #entry { display: none; }


/* === サービス詳細ページ: カテゴリ(サイドバー)をコンテンツの下へ（ID 2702, 全サービス共通・SP） === */
@media (max-width: 900px) {
	.srv-layout .srv-main { order: 1; }
	.srv-layout .srv-side { order: 2; }
}


/* === /service/personal/(LP) ＋ サービス詳細(single-service) SP調整 / #59 2706-2714 === */
@media (max-width: 900px) {
	/* LP: サービス行タイトル（ID 2706, 他も同様）: 32->24px / lh 46->40px */
	.lp-svc-row__title { font-size: 23px; line-height: 36px; }
	/* 詳細: 見出し（ID 2707）: 24->28px / lh 36->42px */
	.srv-main__title { font-size: 29px; line-height: 42px; margin-bottom: 30px; }
	/* 詳細: 本文（ID 2708）: 15->14px / lh 31.5->28px */
	.srv-main__body p { font-size: 15px; line-height: 28px; }
	/* 詳細: 料金ボックス（ID 2709）: 下margin 64->80px / 下padding 48->60px */
	.srv-main__pricebox { margin-bottom: 80px; padding-bottom: 60px; }
	/* 詳細: FAQ dt（ID 2710）: 18->16px / lh 30.6->28px */
	.srv-main__faq dt { font-size: 17px; line-height: 28px; }
	/* 詳細: FAQ dd（ID 2711）: 15->14px / lh 30->26px */
	.srv-main__faq dd { font-size: 15px; line-height: 28px; }
	/* 詳細: main 下padding（ID 2712）: 80->40px */
	.srv-main { padding-bottom: 40px; }
	/* 詳細: 下部へ移したカテゴリnavを見やすく再構成（ID 2713）＋下余白100px（ID 2714） */
	.srv-layout .srv-side { border-bottom: 0; border-top: 1px solid var(--color-line); }
	.srv-side__inner { padding-top: 40px; margin-bottom: 100px; }
	/* 詳細: extras リスト（ID 2721）: 15->14px */
	.srv-main__extra li { font-size: 15px; }
	/* 詳細: サイドバー見出しEN（ID 2723）: 22->28px */
	.srv-side__heading-en { font-size: 29px; }
}

/* === サービス詳細: サブ項目リンクの下線削除（ID 2734, SP） === */
@media (max-width: 900px) {
	.srv-side__sub-item a { border-bottom: 0; }
}


/* === SP一括: service詳細/LP/tone-design/gallery / websupport #59 2746-2794 === */
@media (max-width: 900px) {
	/* 直接指示: サービス詳細 concerns リスト 14px */
	.srv-main__concerns li { font-size: 15px; }
	/* event-card title 行間（ID 2760, 詳細内のみ）: 25.6->30 */
	.srv-main .event-card__title { line-height: 30px; }
	/* srv-main__price 行間（ID 2762）: 50.4->44 */
	.srv-main__price { line-height: 44px; }
	/* feature-link 下margin（ID 2773/2775, 全詳細共通）: 32->80 */
	.srv-main__feature-link { margin-bottom: 80px; }
	/* photo gallery グリッド gap（ID 2778）: 0 8 -> 0 40 */
	.photo-gallery__grid { gap: 0 40px; }
	/* design-branding LP hero（page-id-95 / ID 2765/2766/2767） */
	.page-id-95 .lp-hero__lead { font-weight: 700; margin-bottom: 40px; }
	.page-id-95 .lp-hero__body { font-size: 15px; line-height: 28px; color: #2c2e2f; }
	/* tone-design（page-id-3108） */
	.page-id-3108 .td-hero__title { font-size: 29px; font-weight: 700; line-height: 44px; margin-bottom: 40px; } /* 2781 */
	.page-id-3108 .td-hero__sub { font-size: 15px; }                                                            /* 2782 */
	.page-id-3108 .td-h2 { font-weight: 700; }                                                                  /* 2783 */
	.page-id-3108 .td-lead { font-size: 15px; line-height: 28px; }                                              /* 2788 */
	.page-id-3108 article > section:nth-of-type(2) > div > div:nth-of-type(2) p { font-size: 15px; line-height: 26px; } /* 2784 */
	.page-id-3108 article > section:nth-of-type(2) { padding: 40px 0 100px; }       /* 2785 */
	.page-id-3108 article > section:nth-of-type(3) { padding: 100px 0; }            /* 2786 */
	.page-id-3108 article > section:nth-of-type(5) { font-size: 15px; padding: 40px; } /* 2790 */
	.page-id-3108 article > section:nth-of-type(6) { padding: 100px 0; }            /* 2791 */
	.page-id-3108 article > section:nth-of-type(7) { padding: 100px 40px; }         /* 2792 */
}

/* === /service/ ナビをリンクと分かるよう下線（ID 2746, SP） === */
@media (max-width: 900px) {
	.page-id-5 .srv-nav__list a { text-decoration: underline; text-underline-offset: 4px; }
}


/* === /service/tone-design/（page-id-3108）SP追加調整 / websupport #59 2881-2897 === */
@media (max-width: 900px) {
	/* td-side__brand 削除（ID 2882） */
	.page-id-3108 .td-side__brand { display: none; }
	/* サイドナビを1行・横スクロール（ID 2881） */
	.page-id-3108 .td-side__nav ul { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; }
	.page-id-3108 .td-side__nav ul li { flex: 0 0 auto; }
	.page-id-3108 .td-side__nav ul li a span { white-space: nowrap; }
	/* hero CTA gap（ID 2884）: 16->20 */
	.page-id-3108 .td-hero__cta { gap: 20px; }
	/* section2 inner gap（ID 2885）: 32->15 */
	.page-id-3108 article > section:nth-of-type(2) > .td-section__inner { gap: 15px; }
	/* section2 td-h2 下margin（ID 2886）: 28->15 */
	.page-id-3108 article > section:nth-of-type(2) .td-h2 { margin-bottom: 15px; }
	/* section3 eyebrow 中央（ID 2887） */
	.page-id-3108 article > section:nth-of-type(3) .td-eyebrow { text-align: center; }
	/* benefit num 下margin（ID 2889）: 16->10 */
	.page-id-3108 .td-benefit__num { margin-bottom: 10px; }
	/* section4 padding（ID 2890）: 0 0 100 0 */
	.page-id-3108 article > section:nth-of-type(4) { padding: 0 0 100px; }
	/* section5 padding（ID 2891→2893 後勝ち）: 40 40 100 40 */
	.page-id-3108 article > section:nth-of-type(5) { padding: 40px 40px 100px; }
	/* section5 td-h2 下margin（ID 2892）: 28->15 */
	.page-id-3108 article > section:nth-of-type(5) .td-h2 { margin-bottom: 15px; }
	/* section6 eyebrow 中央（ID 2894） */
	.page-id-3108 article > section:nth-of-type(6) .td-eyebrow { text-align: center; }
	/* section6 plans gap（ID 2895）: 16->40 */
	.page-id-3108 article > section:nth-of-type(6) .td-plans { gap: 40px; }
	/* section7 inner 横padding 0（ID 2896） */
	.page-id-3108 article > section:nth-of-type(7) > .td-section__inner { padding: 0; }
	/* section8 finalcta padding（ID 2897）: 100 0 100 0 */
	.page-id-3108 .td-finalcta { padding: 100px 0; }
}


/* === tone-design 横はみ出し修正（2881のnowrapナビでグリッド列が膨張） === */
@media (max-width: 1024px) {
	.page-id-3108 .td-side { min-width: 0; }
	.page-id-3108 .td-side__nav { min-width: 0; }
	.page-id-3108 .td-side__nav ul { max-width: 100%; }
}


/* === /service/tone-design/ SP 追補 / websupport #59 2910-2916 === */
@media (max-width: 1024px) {
	/* ナビ項目の間隔を広げる（ID 2910）。2881で8pxに詰まりすぎたのを修正 */
	.page-id-3108 .td-side__nav ul { gap: 20px; }
	/* td-side__inner 下padding（ID 2911）: 24->5px */
	.page-id-3108 .td-side__inner { padding-bottom: 5px; }
}
@media (max-width: 900px) {
	/* 見出し太さ700（ID 2912/2913）。body.theme-tone の font-weight:500 に勝つ詳細度で上書き */
	body.theme-tone .td-hero__title { font-weight: 700; }
	body.theme-tone .td-h2 { font-weight: 700; }
	/* eyebrow 中央寄せ（ID 2914/2916）。inline-block は自身text-alignでは中央化しないため block+auto余白 */
	.page-id-3108 article > section:nth-of-type(3) .td-eyebrow,
	.page-id-3108 article > section:nth-of-type(6) .td-eyebrow { display: block; width: fit-content; margin-left: auto; margin-right: auto; text-align: center; }
	/* section5 inner 横padding 0（ID 2915） */
	.page-id-3108 article > section:nth-of-type(5) > .td-section__inner { padding: 0; }
}


/* === tone-design 本体(3108) / join(3109) SP追補 / websupport #59 2929-2933 === */
@media (max-width: 900px) {
	/* 本体 section5 inner 上margin（ID 2929）: 0->60px（padding:0は2915で適用済） */
	.page-id-3108 article > section:nth-of-type(5) > .td-section__inner { margin-top: 60px; }
	/* join: ステップ番号ボックスの列幅を狭く（ID 2930）: 80px->40px */
	.page-id-3109 .td-steps__item { grid-template-columns: 40px 1fr; gap: 16px; }
	/* join: section2 下padding（ID 2931）: 80->100px */
	.page-id-3109 article > section:nth-of-type(2) { padding: 80px 0 100px; }
	/* join: #apply eyebrow 下margin（ID 2932）: 16->5px */
	.page-id-3109 #apply .td-eyebrow { margin-bottom: 5px; }
	/* join: パンくず 下margin（ID 2933）: 0->40px */
	.page-id-3109 .td-bread { margin-bottom: 40px; }
}


/* === tone-design join(3109) / flow(11) SP追補 / websupport #59 2940-2946 === */
@media (max-width: 900px) {
	/* join: ステップ番号 上margin（ID 2940）: 0->-5px */
	.page-id-3109 .td-steps__num { margin-top: -5px; }
	/* join: eyebrow 下margin（ID 2941/2942, 全eyebrow）: 16->5px */
	.page-id-3109 .td-eyebrow { margin-bottom: 5px; }
	/* flow: page-hero 下padding（ID 2943）: 74.9->0 */
	.page-id-11 .page-hero { padding-bottom: 0; }
	/* flow: 各ステップ 上下padding（ID 2944, 一覧統一）: 36->60px */
	.page-id-11 .flow-step { padding: 60px 0; }
	/* flow: ステップ見出し（ID 2945, 一覧統一）: 16->20px / lh 24->36px */
	.page-id-11 .flow-step__title { font-size: 21px; line-height: 36px; }
	/* flow: flow-consult 下margin（ID 2946）: 104.9->80px */
	.page-id-11 #flow-consult { margin-bottom: 80px; }
}


/* === /faq/（page-id-55）検索/カテゴリ/相談の視認性・調整 / websupport #59 2952-2962 === */
/* PC/SP両方: 検索ボックス・カテゴリchipを白背景＋濃色文字に（薄色で読めない対策） */
.page-id-55 .faq-search__box { color: #1a1a1a; background: #ffffff; border-color: #ececec; }
.page-id-55 .faq-search__btn { font-size: 13px; padding: 0; }
.page-id-55 .faq-cat { color: #1a1a1a; background: #ffffff; border-color: #ffffff; font-size: 14px; }
.page-id-55 .faq-cats { gap: 15px; }
@media (max-width: 900px) {
	/* 相談セクション 本文（ID 2955）: 15->14px */
	.page-id-55 #faq-consultation p { font-size: 15px; }
	/* 相談セクション ボタンラベル（ID 2956）: 太さ700 */
	.page-id-55 #faq-consultation button span { font-weight: 700; font-size: 17px; }
}

/* === /works/ 一覧＋事例詳細 SP / websupport #59 2977-2988 === */
@media (max-width: 900px) {
	/* 一覧（post-type-archive-works） */
	.post-type-archive-works .case-archive { padding-top: 150px; }                 /* 2977 */
	.post-type-archive-works .works-filter { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 2978 */
	.post-type-archive-works .works-filter__btn { flex: 0 0 auto; }
	.post-type-archive-works .works-filter__name { white-space: nowrap; }
	.post-type-archive-works .case-grid { gap: 60px 16px; }                        /* 2979 */
	/* 事例詳細（single-works） */
	.single-works .case-single__breadcrumb .breadcrumb-list { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 2980 */
	.single-works .case-single__breadcrumb .breadcrumb-list li { flex: 0 0 auto; white-space: nowrap; }
	.single-works .case-info__label { font-size: 13px; }                           /* 2981 */
	.single-works .case-info__list dt { font-size: 17px; }                         /* 2982 / #3123 12->16 */
	.single-works .case-info__list dd { font-size: 15px; line-height: 28px; }      /* 2983 / #3122 15->14 */
	.single-works .case-single__inner { column-gap: 60px; }                        /* 2984 */
	.single-works .case-single__head { margin-bottom: 60px; }                      /* 2985 */
	.single-works .case-single__content h2 { font-size: 19px; font-weight: 700; }  /* 2986 */
	.single-works .case-nav { margin-bottom: 100px; padding: 40px 0 0; }           /* 2988 */
}
/* 2987 (PC/SP両方): case-mockup 背景 #f3efe8->#fff */
.single-works .case-mockup { background: #ffffff; }

/* === works事例/portfolio詳細・一覧/journal一覧 SP / websupport #59 2989-3000 === */
/* 2992 (PC/SP両方): portfolio詳細のサイト訪問リンク削除 */
.single-portfolio .case-info__visit { display: none; }
@media (max-width: 900px) {
	.single-works .case-info { margin-bottom: 60px; }                                  /* 2989 */
	.single-portfolio .case-info { margin-bottom: 60px; }                              /* 2993 */
	.single-portfolio .case-nav { margin-bottom: 100px; }                              /* 2994 */
	.single-portfolio .case-single__content p { margin-bottom: 40px; }                 /* 2995 */
	.post-type-archive-portfolio .works-archive__filter-summary { flex-direction: column; align-items: flex-start; } /* 2996 */
	.post-type-archive-portfolio .works-archive__cta { display: none; }                /* 2997 */
	.post-type-archive-portfolio .works-archive__grid-wrap { padding-bottom: 100px; }  /* 2998 */
	.post-type-archive-journal .journal-grid { gap: 60px; }                            /* 2999 */
	.post-type-archive-journal .journal-card__title { font-size: 17px; line-height: 30px; } /* 3000 */
}

/* === journal一覧セレクトボックス(3001) / portfolio絞り込みトグル全幅(3019) === */
.journal-filter-select { display: none; }
@media (max-width: 900px) {
	.journal-filter { display: none; }
	.journal-filter-select { display: block; margin-bottom: 24px; }
	.journal-filter-select select { width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--color-line); background: #fff; color: var(--color-fg); border-radius: 0; }
	.post-type-archive-portfolio .works-archive__filter-toggle { width: 100%; }
}

/* === portfolio詳細 SP / websupport #59 3020/3021 === */
@media (max-width: 900px) {
	.single-portfolio .case-single__content img.alignnone { margin: 0 0 20px; }  /* 3020 / #3126 60->20 */
	.single-portfolio .case-single__title { margin-bottom: 40px; }               /* 3021 */
}

/* === portfolio一覧 フィルター見出し SP / websupport #59 3022 === */
@media (max-width: 900px) {
	.post-type-archive-portfolio .works-archive__filter-heading { font-size: 19px; gap: 8px; margin: 4px 0 20px; }
}

/* === portfolio詳細 SP / websupport #59 3023/3025/3026（3024=2992で対応済） === */
@media (max-width: 900px) {
	/* パンくず 1行横スクロール（3023） */
	.single-portfolio .case-single__breadcrumb .breadcrumb-list { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.single-portfolio .case-single__breadcrumb .breadcrumb-list li { flex: 0 0 auto; white-space: nowrap; }
	/* 本文見出し add_ttl（3025/3026）: 18px / 700 / 上margin60 */
	.single-portfolio .case-single__content .add_ttl { font-size: 19px; font-weight: 700; margin-top: 60px; }
}

/* === websupport #59 2026-06-22 / 3121-3133 ============================ */

/* #3124 (sp): works事例詳細 .case-single__cat 12->14px */
@media (max-width: 900px) {
	.single-works .case-single__cat { font-size: 15px; }                            /* #3124 */
}

/* #3127 (sp): portfolio詳細 前後ナビのサムネを半分サイズに（200/140 -> 半分） */
@media (max-width: 900px) {
	.single-portfolio .case-nav__thumb { max-width: 100px; }                        /* #3127 200->100(半分) */
}
@media (max-width: 640px) {
	.single-portfolio .case-nav__thumb { max-width: 70px; }                         /* #3127 140->70(半分) */
}

/* #3121 (sp): /flow/ ハンバーガー常時=白丸+黒線+menu。
   ★第15R（社長口頭指示）で全ページSP共通化（main.css 5b節 body:not(.menu-open) .nav-trigger）に
   吸収＝この page-id-11 限定ブロックは削除（冗長排除）。 */

/* #3129 (sp): journal一覧 カテゴリselect の下marginを60pxに */
@media (max-width: 900px) {
	.post-type-archive-journal .journal-filter-select { margin-bottom: 60px; }      /* #3129 0->60 */
}

/* journal記事詳細（single-journal）SP。JSで toc/cats を移動した後のレイアウト前提。 */
@media (max-width: 900px) {
	/* #3130: 移動した CATEGORY ブロックをフッター直前（最下部）へ。
	   JS移動後は .article-layout 直下の素の .article-side__group が CATEGORY。
	   flex の order 未指定だと上方に出るため order:3 で末尾固定。 */
	.article-layout--3col > .article-side__group { order: 3; margin: 40px 0 0; }     /* #3130 */

	/* #3131: パンくず(article-bread / クライアント言うところのタグnav)を1行横スクロール */
	.article-main .article-bread {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.article-main .article-bread > * { flex: 0 0 auto; }                             /* #3131 */

	/* #3132: 本文 p の文字サイズ16->14・行間32.8(2.05)->28px */
	.article-single__body { font-size: 15px; line-height: 28px; }                    /* #3132 */

	/* #3133: 筆者カード(article-author-card)を 背景なし・上下borderのみ */
	.article-author-card { background: transparent; border: 0; }                     /* #3133 */
	.article-author-card__inner {
		background: transparent;
		border-top: 1px solid var(--color-line);
		border-bottom: 1px solid var(--color-line);
	}
	.article-author-card__inner:hover { background: transparent; }
}

/* === websupport #59 2026-06-22 / 3165-3169 ============================ */
/* journal記事詳細（single-journal）SP。JSで toc/cats/author-intro を移動した後のレイアウト前提。 */
@media (max-width: 900px) {
	/* #3165: 左サイド .article-side__inner（CONTENTS/CATEGORY は移動済 → 残るのは「Journal一覧」backリンクのみ）
	   をこの要素ごと削除（非表示）。左カラム自体が空になるので border も消す。 */
	.article-layout--3col .article-side--left .article-side__inner { display: none; }    /* #3165 */
	.article-layout--3col .article-side--left { border: 0; }

	/* #3166: 移動した CONTENTS ブロック（article 直下・thumb直後の .article-side__group[data-article-toc]）
	   の padding を 0 → 0 25px（左右25px）。 */
	.article-main .article-single > .article-side__group[data-article-toc] {
		padding: 0 25px 0 25px;                                                         /* #3166 */
	}

	/* #3168: 上記 CONTENTS ブロックの見出し h4.article-side__heading 10px → 12px。 */
	.article-main .article-single > .article-side__group[data-article-toc] .article-side__heading {
		font-size: 13px;                                                                /* #3168 */
	}

	/* #3167(やり直し): 著者紹介セクションを丸ごと（.article-author-card 全体）JSで目次(TOC)の直下へ移動。
	   旧版は紹介文p単体だけを移動していたが、見出し/アイコン/名前/紹介文を含むカード全体を移す方式に変更。
	   移動後は TOC ブロック直後・.article-single 直下の素のカードとして出るので、左右paddingを CONTENTS と合わせる。
	   ※背景なし・上下borderのみは既存 #3133（.article-author-card / __inner）が全SPで担保。 */
	.article-main .article-single > .article-author-card {
		margin: 16px 0 24px;
		padding: 0 25px;                                                                /* #3167 */
	}
}

/* #3169 (sp): 関連記事 section.related-posts（--in-article）の margin/背景をリセット。
   margin 60 0 0 0 → 80px 0 0 0／背景色 #f4f4f4 → #fff（外枠も無し）。
   padding は下記 #3273 で上書き（0 0 60 0 → 60 20 60 20）。 */
@media (max-width: 900px) {
	.article-main .related-posts--in-article {
		margin: 80px 0 0 0;
		padding: 60px 20px 60px 20px;       /* #3273（#3169 の 0 0 60 0 を上書き）上右下左 */
		background: #ffffff;
		border: 0;                                                                      /* #3169 */
	}
}

/* === websupport #59 2026-06-22 / 3274-3276（journal記事 single SP・第3R） ============== */
@media (max-width: 900px) {
	/* #3274: 右サイド（aside:nth-of-type(2)=.article-side--right / NEW POSTS・POPULAR POSTS）の
	   .article-side__inner padding 32 24 32 24 → 100 40 100 40。
	   ※左サイド(--left)の inner は #3165 で display:none。本ルールは --right にスコープして表示前提で当てる。 */
	.article-layout--3col .article-side--right .article-side__inner {
		padding: 100px 40px 100px 40px;                                                 /* #3274 上右下左 */
	}

	/* #3275: 右サイドの記事サムネ（.article-side__pop-media / NEW POSTS・POPULAR POSTS 全li）を
	   横幅150px・アスペクト比4:3 に。figure は grid 左列に収まるので列幅も150pxへ広げる。 */
	.article-layout--3col .article-side--right .article-side__popular > li > a {
		grid-template-columns: 150px 1fr;                                               /* サムネ列を150pxへ */
	}
	.article-layout--3col .article-side--right .article-side__pop-media {
		width: 150px;
		aspect-ratio: 4 / 3;                                                            /* #3275 */
	}
	.article-layout--3col .article-side--right .article-side__pop-media img {
		width: 150px;
		height: 100%;
		object-fit: cover;                                                              /* #3275 */
	}

	/* #3276: 本文カラムが左に寄っている → JS移動後 .article-layout 直下に来る CATEGORY ブロック
	   （.article-layout--3col > .article-side__group / #3130 で order:3・末尾固定）が横padding無しで
	   左端ベタ付き＝左偏り。本文/TOC/著者カードと同じ左右余白(0 25px)を与えて中央寄せに整える。 */
	.article-layout--3col > .article-side__group {
		padding-left: 25px;
		padding-right: 25px;                                                            /* #3276 */
	}
}

/* === websupport #59 / 社長口頭 2026-06-24（journal記事 single SP・第4R） ============== */
/* 同一 journal 記事「競合を見すぎている会社は…」テンプレ（single-journal.php）SP(≤900px)。
   今回は websupport コメント由来ではなく社長口頭指示。 */
@media (max-width: 900px) {
	/* (1) byline「written by 中村 弘樹」(.article-single__author) を SPで非表示。
	   著者紹介カード(.article-author-card)本体は残す。PCでは従来どおり表示。 */
	.article-single__author { display: none; }

	/* (2) 並び順「著者紹介セクション → 目次」へ反転（DOM移動は single-journal.php の matchMedia script）。
	   JS移動で著者カード・TOC とも記事ヘッダー直後（.article-single 直下）に来る。
	   ※著者カードの背景なし上下border(#3133)、TOCの見出し12px(#3168) は従前どおり有効。 */

	/* (3) article-side__group を画面幅いっぱいに（SP）。
	   前ラウンドで付けた左右padding（TOC=#3166 の 0 25px / CATEGORY=#3276 の 25px）を 0 にして full-bleed。
	   著者カード(#3167 の 0 25px)も合わせて全幅化し、3要素の左右余白を揃える。 */
	.article-main .article-single > .article-side__group[data-article-toc] {
		padding-left: 0;
		padding-right: 0;                                                               /* 第4R: 全幅優先で #3166 を上書き */
	}
	.article-layout--3col > .article-side__group {
		padding-left: 0;
		padding-right: 0;                                                               /* 第4R: 全幅優先で #3276 を上書き */
	}
	.article-main .article-single > .article-author-card {
		padding-left: 0;
		padding-right: 0;                                                               /* 第4R: 著者カードも全幅 */
	}

	/* (4) 右サイドの記事サムネ .article-side__pop-media を 150px → 100px（#3275 を上書き）。
	   4:3・object-fit:cover は維持。grid 左列も 100px に合わせる。 */
	.article-layout--3col .article-side--right .article-side__popular > li > a {
		grid-template-columns: 100px 1fr;                                               /* 第4R: サムネ列 150->100 */
	}
	.article-layout--3col .article-side--right .article-side__pop-media {
		width: 100px;                                                                   /* 第4R: 150->100 */
		aspect-ratio: 4 / 3;
	}
	.article-layout--3col .article-side--right .article-side__pop-media img {
		width: 100px;                                                                   /* 第4R: 150->100 */
		height: 100%;
		object-fit: cover;
	}
}

/* === websupport #59 2026-06-25 / 3417-3422（journal記事 single SP・第5R） ============== */
/* 同一 journal 記事「競合を見すぎている会社は…」テンプレ（single-journal.php）SP(≤900px)。
   ★article-side__group は複数箇所で使い回し（目次ラッパ / CATEGORY群 / 右サイド aside(2)群）。
     #3418=目次ラッパ(TOC) / #3422=CATEGORYブロック / #3421=右aside群 を「別インスタンス」として
     ピン位置（祖先）でスコープを切り分ける。border/文字サイズ系(#3417/#3419/#3420)はクラス全件で安全。 */
@media (max-width: 900px) {
	/* #3417: a.article-author-card__inner の border-width 1 0 1 0 → 1px 0 0 0（上線のみ）。
	   既存 #3133 は上下borderだったが、下線を削除して「上線のみ」に。クラス全件・全ページ適用（衝突なし）。 */
	.article-author-card__inner {
		border-top: 1px solid var(--color-line);
		border-bottom: 0;                                                               /* #3417 下線削除 */
	}

	/* #3418: 目次ラッパ（JS移動後 .article-single 直下に来る .article-side__group[data-article-toc]）に
	   padding 30px 全方向＋背景白。★この目次ラッパ・インスタンスにスコープ。
	   第4R で同セレクタを左右padding:0（全幅化）にしていたが、今回指示を優先して上書き。
	   ※「全ページ適用」注記は他用途のgroup（CATEGORY/右aside）と矛盾するため、目次ラッパ相当に限定。
	   ※暗テーマ(theme-dark/mocha/sage/tone)では --color-fg が明色反転 → 白背景の上で文字が読めなくなるので
	     文字色を濃色固定（見出し/リンク）。 */
	.article-main .article-single > .article-side__group[data-article-toc] {
		padding: 30px 30px 30px 30px;                                                   /* #3418 0→30（第4Rの左右0を上書き） */
		background-color: #ffffff;                                                      /* #3418 背景白 */
	}
	.article-main .article-single > .article-side__group[data-article-toc] .article-side__heading,
	.article-main .article-single > .article-side__group[data-article-toc] .article-toc__list,
	.article-main .article-single > .article-side__group[data-article-toc] .article-toc__list a {
		color: #24211e;                                                                 /* #3418 白背景上で読めるよう濃色固定（暗テーマ対策） */
	}

	/* #3419: 関連記事タイトル h3.related-posts__name 14→16px・line-height 23.8→28px。
	   クラス全件・全ページ適用（衝突なし）。 */
	.related-posts__name {
		font-size: 17px;                                                                /* #3419 14->16 */
		line-height: 28px;                                                              /* #3419 23.8->28 */
	}

	/* #3420: 右サイド見出し h4.article-side__heading 10→14px。クラス全件・全ページ適用。
	   ※前ラウンド #3168 はTOC見出しを12pxにしていたが、本指示で全件14pxに上書き。
	     ただし #3418 の白背景TOC見出しの色固定（上記）は別プロパティなので共存。 */
	.article-side__heading {
		font-size: 15px;                                                                /* #3420 10->14（#3168 の12px上書き） */
	}

	/* #3421: 右サイド aside(2) 内の group（NEW POSTS / POPULAR POSTS 群）の margin 0 0 40 0 → 0 0 60px 0。
	   ★右aside群インスタンスにスコープ（CATEGORY/目次ラッパとは別物）。 */
	.article-layout--3col .article-side--right .article-side__inner > .article-side__group {
		margin: 0 0 60px 0;                                                             /* #3421 下40->60 */
	}

	/* #3422: JS移動後 .article-layout 直下の素の .article-side__group（=CATEGORYブロック）を
	   1カラムで画面幅いっぱいに広げる。★このCATEGORYインスタンスにスコープ（#3418 目次ラッパとは別物）。
	   第4R で既に padding 左右0（全幅）化済 → ここで width:auto・block を明示し1カラムを担保。
	   #3130 の order:3（末尾固定）は維持。
	   ※第6R(#3428) で margin を 40 0 0 0 → 40px 40px 80px 40px（上右下左）に変更したため、
	     左右40pxの margin と整合させる。width:100% のままだと margin 分だけ右へはみ出すので width:auto に。 */
	/* #3474（2026-06-26 第9R・社長指示で方針変更）: [/journal/designer-after-ai/] のCATEGORYブロックを
	   「全部の同じ要素も変更して」→ 範囲確認の結果『CATEGORYブロックのみ・全記事に適用』で確定。
	   前ラウンド(5l)は「既に全幅」と据え置いたが、★全 journal 記事で確実に 1カラム/幅100%（margin内コンテンツ100%）
	   になるよう、この CATEGORY インスタンス専用ルールを明示・一般化する（据え置き→全記事全幅化へ方針変更）。
	   ・このセレクタ `.article-layout--3col > .article-side__group` は single-journal.php 共通テンプレ＋JS appendChild(cats)
	     により全 journal 記事で CATEGORY インスタンスのみを確実に捕まえる（目次ラッパ[data-article-toc]・右aside[--right]は対象外）。
	   ・≤900px で親 .article-layout--3col は display:flex/column。flex item を確実に列幅いっぱいへ → align-self:stretch を明示。
	   ・width:auto + box-sizing:border-box で、#3428 の左右40px margin と二重にならず右はみ出しさせない（素の width:100%＋margin40px は不可）。 */
	.article-layout--3col > .article-side__group {
		display: block;
		box-sizing: border-box;                                                         /* #3474 はみ出し防止（margin と width を二重計上させない） */
		align-self: stretch;                                                            /* #3474 flex column 内で列幅いっぱいへ（全記事で確実に全幅） */
		width: auto;                                                                    /* #3422/#3428/#3474 1カラム全幅（margin で内側に収める） */
		max-width: none;
		padding-left: 0;
		padding-right: 0;                                                               /* #3422 padding は0（左右余白は #3428 の margin で表現） */
	}

	/* #3428: CATEGORYブロックの margin 40 0 0 0 → 40px 40px 80px 40px（上右下左）。
	   ★CATEGORYインスタンスにスコープ（#3130 の素の margin を上書き）。目次ラッパ(#3418)・右aside(#3421)とは別物。
	   左右40pxは「全幅ベタ付けをやめて意図的な左右余白を持たせる」指示＝上記 width:auto と両立。 */
	.article-layout--3col > .article-side__group {
		margin: 40px 40px 80px 40px;                                                    /* #3428 上右下左 */
	}
}

/* === websupport #59 2026-06-25 / 3434-3438（journal記事 single SP・第7R） ============== */
/* 同一 journal 記事「競合を見すぎている会社は…」テンプレ（single-journal.php）SP(≤900px)。
   ★time / span は素のHTMLタグ。ウィジェットが「同一クラス全ページ適用」と自動付記するが、bare time/span を
     全サイトに当てると無関係な日付/テキストを全部壊す。→ 各ピンが乗るコンポーネントのクラスにスコープする：
       #3436=右サイド pop-media項目内 time → .article-side__pop-meta time
       #3437=右サイド pop-media項目内 span → .article-side__pop-meta span
       #3438=本文下 related-posts項目内 time → .related-posts__meta time
     #3436 と #3438 は同じ time でも別コンポーネント＝別ルール（値も異なる）としてスコープ分離。 */
@media (max-width: 900px) {
	/* #3434: 右サイド aside(2) の .article-side__inner padding 100 40 100 40 → 100 40 40 40（下を100→40）。
	   ★この要素だけ（注記「他の同クラスには反映しない」）。#3274 を上書き。
	     #3274 は元から --right にスコープ済（--left inner は #3165 で display:none）＝右asideの単一インスタンス。
	     他の .article-side__inner（--left＝SP非表示）には触れない。 */
	.article-layout--3col .article-side--right .article-side__inner {
		padding: 100px 40px 40px 40px;                                                  /* #3434 下 100->40（#3274 を上書き） */
	}

	/* #3435: 右サイド人気記事タイトル h5.article-side__pop-title 12→14px・line-height 18.6→26px。
	   pop-title は右サイドコンポーネント専用クラス＝同一クラス全件適用OK（衝突なし）。 */
	.article-side__pop-title {
		font-size: 15px;                                                                /* #3435 12->14 */
		line-height: 26px;                                                              /* #3435 18.6->26 */
	}

	/* #3436: 右サイド pop-media項目内の time（投稿日）10→12px。
	   ★pop-media項目コンポーネント（.article-side__pop-meta）にスコープ＝bare time 禁止。
	     同コンポーネント内の NEW/POPULAR 全項目の time に適用。 */
	.article-side__pop-meta time {
		font-size: 13px;                                                                /* #3436 10->12 */
	}

	/* #3437: 右サイド pop-media項目内の span（カテゴリ）9→12px。
	   ★同じく .article-side__pop-meta span にスコープ＝bare span 禁止。 */
	.article-side__pop-meta span {
		font-size: 13px;                                                                /* #3437 9->12 */
	}

	/* #3438: 本文下 section.related-posts 項目内の time 11→12px・padding 0→3px 0 0 0。
	   ★related-posts項目コンポーネント（.related-posts__meta）にスコープ＝bare time 禁止。
	     #3436 とは別コンポーネント＝別ルール（time でも値が違う＝スコープ分離が必須）。
	     time は base で .related-posts__meta から font-size:12px を継承（time個別ルールは無し）。 */
	.related-posts__meta time {
		font-size: 13px;                                                                /* #3438 11->12 */
		padding: 3px 0 0 0;                                                             /* #3438 上右下左 */
		display: inline-block;                                                          /* padding-top を効かせるため inline->inline-block */
	}
}

/* === websupport #59 2026-06-25 / 3439-3440（journal記事 single SP・第8R） ============== */
/* 同一 journal 記事「競合を見すぎている会社は…」テンプレ（single-journal.php）SP(≤900px)。 */
@media (max-width: 900px) {
	/* #3439: 前後記事ナビ見出し h4.article-pn__title の line-height 20.8px(=13px×1.6) → 24px。
	   pn__title はこの前後記事ナビ（article > footer > nav）専用クラス＝同一クラス全件適用OK（衝突なし）。 */
	.article-pn__title {
		line-height: 24px;                                                              /* #3439 20.8->24 */
	}

	/* #3440: 目次ラッパ（JS移動後 .article-single 直下の .article-side__group[data-article-toc]）の
	   margin 0 0 40 0 → 0 0 60px 0（下余白40→60）。
	   ★この目次ラッパ・インスタンスにスコープ（HANDOFF 5h #3418 の切り分け踏襲）。
	     ピン `> article > div:nth-of-type(1)` ＝ 目次ラッパ。CATEGORY(#3422/#3428)・右aside(#3421) とは別インスタンス。
	   ※「全ページ・同一クラス適用」注記は他用途group（CATEGORY/右aside）と衝突するため目次ラッパに限定。
	     #3418 は同セレクタに padding 30px/背景白を当て済 → ここは margin（別プロパティ）を追加で共存。 */
	.article-main .article-single > .article-side__group[data-article-toc] {
		margin: 0 0 60px 0;                                                             /* #3440 下 40->60 */
	}
}

/* === websupport #59 2026-06-26 / 3495,3497,3498,3500,3501,3503,3502,3504（event一覧/詳細・journal-categoryアーカイブ SP・第10R） ============== */
/* SP(≤900px)限定。対象＝/event/（archive-event）・/event/<slug>/（single-event）・/journal-category/<slug>/（taxonomy-journal_category＝archive-journalレイアウト）。
   ★スコープ判断（注意2）：
     - section.section / section.container.archive / .container は超汎用レイアウトクラス＝サイト全ページで使用（front各節・index・各archive・service等）。
       → bare 素当て禁止。当該ページ種（.single-event / .post-type-archive-event / .tax-journal_category）に body class スコープで限定適用した。全ページ共通仕様変更ではない。
     - page-hero__label / nav.navigation / reservation__title / event-detail__nav は専用/部品クラス＝注記どおりクラス適用（page-hero__label は全ページ共通ヒーロー部品なので全ページのラベルに反映される前提。
       nav.navigation は全archive共通だが /event/ への指摘＝event archive にスコープして他archiveのページャに波及させない安全側を採用）。
   ★#3501/#3503 衝突解消：両者とも single-event の section.section（#main>section:nth-of-type(2)）padding 指定だが値が矛盾
     （#3501=0 0 80 0／#3503=80 0 100 0）。後発 #3503 を採用＝上80px・下100px。#3501 は superseded として fixed 化のみ（CSSには #3503 値のみ反映）。 */
@media (max-width: 900px) {

	/* ---- /event/ イベント一覧アーカイブ（.post-type-archive-event 限定） ---- */

	/* #3497 (sp): イベントカード並びを「1行で横スクロール」表示。
	   ★実DOM＝section1:.page-hero / section2:.event-archive-filter / section3:.section（カードグリッド）。
	     ピン `section:nth-of-type(2)>div` はフィルタ section に当たっていたが、コメント本文＝カード並びの横スクロール化が意図。
	     カードの実体は ul.events-grid.events-grid--archive。
	   ★base の `@media(max-width:900px) .events-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap;...}` が
	     既に全 .events-grid を1行横スクロール化済（front /event/ 共通）→ archive でも既に1行スクロールで表示される。
	     ここでは archive 固有に container 右padを0にしてスライダーが右端まで届くよう補強（front の .section--events .container と同等）。
	     bare .container 素当て禁止＝.post-type-archive-event スコープ。 */
	.post-type-archive-event .section > .container {
		padding-right: 0;                                                              /* #3497 スライダーが右端まで伸びるよう（base の横スクロールを補強） */
	}
	.post-type-archive-event .events-grid--archive {
		padding-right: var(--container-pad);                                           /* #3497 グリッド側に右余白を戻し最終カード後ろに余白 */
	}

	/* #3498 (sp): ページネーション nav.navigation margin 48 0 0 0 → 20px 0 100px 0。
	   ★the_posts_pagination() 出力＝nav.navigation.pagination（中に .nav-links）。現値48pxは .nav-links の margin-top:var(--space-48) 由来。
	     指摘対象は nav 要素＝nav 自体に margin を当て、内側 .nav-links の上margin を0にして二重化を防ぐ。
	     nav.navigation は全archive共通クラスだが /event/ への指摘＝event archive にスコープ（他archiveのページャに波及させない）。 */
	.post-type-archive-event nav.navigation {
		margin: 20px 0 100px 0;                                                        /* #3498 48 0 0 0 → 20 0 100 0 */
	}
	.post-type-archive-event nav.navigation .nav-links {
		margin-top: 0;                                                                 /* #3498 nav側marginと二重化しないよう内側の上margin解除 */
	}

	/* ---- /event/<slug>/ イベント詳細（.single-event 限定） ---- */

	/* #3500 (sp): ヒーローのラベル span.page-hero__label 文字 11→12px・margin 0 0 32 0 → 0 0 15px 0。
	   ★page-hero__label は全ページ共通ヒーロー部品＝注記どおりクラス全適用（他ページのヒーローラベルにも反映される前提・spec了承済）。 */
	.page-hero__label {
		font-size: 13px;                                                               /* #3500 11->12 */
		margin-bottom: 15px;                                                           /* #3500 32->15 */
	}

	/* #3501+#3503 (sp): イベント詳細 本体 section.section（#main>section:nth-of-type(2)）padding → 80px 0 100px 0（#3503採用・上80/下100）。
	   ★section.section は超汎用＝.single-event スコープで限定（全ページ共通変更にしない／注意2）。
	     base は .section{padding-block:var(--space-section)} ＝上下対称。ここで上80・下100・左右0に上書き（左右は内側 .container で取る）。 */
	.single-event .section {
		padding: 80px 0 100px 0;                                                       /* #3503採用（#3501 superseded） */
	}

	/* #3502 (sp): 予約セクション見出し h2.reservation__title 文字 22→20px・line-height 30.8→36px。
	   ★reservation__title 専用クラス＝注記どおり適用（reservation は event詳細にのみ出現）。
	     base font-size は clamp(22px,2.4vw,28px) ＝SPで下限22px。20pxに固定。 */
	.reservation__title {
		font-size: 21px;                                                               /* #3502 22->20 */
		line-height: 36px;                                                             /* #3502 30.8->36 */
	}

	/* #3504 (sp): div.event-detail__nav（一覧へ戻るボタン枠）margin 60 0 0 0 → 40px 0 0 0。
	   ★event-detail__nav はイベント詳細専用クラス＝クラス適用。
	     base は margin-top:var(--space-section-sm)（SPで60px相当）→ 40pxに。 */
	.event-detail__nav {
		margin: 40px 0 0 0;                                                            /* #3504 60->40 */
	}

	/* ---- /journal-category/<slug>/ journalカテゴリアーカイブ（.tax-journal_category 限定） ---- */

	/* #3495 (sp): トップ section（実体＝<section class="container section archive">＝archive-journ.php由来）
	     padding 80 24.8 80 24.8 → 80px 24.8px 100px 24.8px（下80→100のみ変更）。
	   ★この section は .container（左右pad=var(--container-pad)）＋.section（上下pad=var(--space-section)）の合成＝超汎用。
	     journal一覧本体アーカイブ(/journal/)と同テンプレ共有だが、ピンは /journal-category/ ＝tax archive への指摘。
	     → .tax-journal_category にスコープし /journal/（post-type-archive-journal）や他ページへ波及させない（注意2）。
	     左右24.8px(=var(--container-pad)のSP下限相当)は維持、下のみ100pxに。 */
	.tax-journal_category .container.section.archive {
		padding-bottom: 100px;                                                         /* #3495 下 80->100（左右・上は据え置き） */
	}
}

/* === websupport #59 2026-06-26 / 3572-3576（think-web コメント反映 第11R）=== */
/* 対象: /event/（一覧アーカイブ archive-event.php）と /news/詳細（single-news.php）・全SP。
   専用クラス（event-archive-filter__tabs / events-grid / single-news__body / single-news__title）は
   注記どおりクラス適用。汎用 article.container は news詳細にスコープ（.single-news.container）。 */
@media (max-width: 900px) {

	/* #3572 (sp): nav.event-archive-filter__tabs（フィルタタブ）を1行表示・横スクロール化。
	   ★event-archive-filter__tabs は event一覧専用クラス＝クラス適用OK（archive-event.php のみ）。
	     base は flex-wrap:wrap で2行以上に折返す → nowrap 1行＋overflow-x:auto。
	     各タブが潰れないよう flex-shrink:0、スクロールバーは隠す。 */
	.event-archive-filter__tabs {
		flex-wrap: nowrap;                                                             /* #3572 折返し禁止＝1行 */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.event-archive-filter__tabs::-webkit-scrollbar { display: none; }
	.event-archive-filter__tab { flex: 0 0 auto; white-space: nowrap; }                /* タブを潰さず横へ流す */

	/* #3573 (sp): ul.events-grid の gap 16→40px。
	   ★events-grid 専用クラス＝注記どおり全 events-grid に適用（front /event/ 共通）。
	     既存 @900 ブロック（L3490-）で .events-grid は flex-nowrap 横スクロール＋gap:16px 化済 →
	     その gap を 40px に上書き（source順で後勝ち）。 */
	.events-grid {
		gap: 40px;                                                                     /* #3573 16->40 */
	}

	/* #3574 (sp): div.single-news__body 文字 16→14px・line-height 32→28px。
	   ★single-news__body 専用クラス＝注記どおりクラス適用（news詳細本文のみ）。
	     base は font-size 未指定(=16px body 継承)・line-height:2(=32px相当)。 */
	.single-news__body {
		font-size: 15px;                                                               /* #3574 16->14 */
		line-height: 28px;                                                             /* #3574 32->28 */
	}

	/* #3575 (sp): article.container（news詳細記事枠）padding 124 24.8 80 24.8 → 下80→100。
	   ⚠ article.container は汎用 .container 系＝サイト他所でも使う → news詳細にスコープ。
	     実体は <article class="container section single-news">（single-news.php）＝記事自身に single-news クラス有。
	     bare .container 全適用は禁止（#3495 と同方針）。下paddingのみ100pxに（上124/左右24.8は据え置き）。 */
	.single-news.container {
		padding-bottom: 100px;                                                         /* #3575 下 80->100 */
	}

	/* #3576 (sp): h1.single-news__title 文字 24→22px・line-height 36→38px。
	   ★single-news__title 専用クラス＝注記どおりクラス適用（news詳細タイトルのみ）。
	     base は clamp(24px,3vw,36px)＝SPで下限24px・line-height:1.5(=36px相当)。 */
	.single-news__title {
		font-size: 23px;                                                               /* #3576 24->22 */
		line-height: 38px;                                                             /* #3576 36->38 */
	}
}

/* === websupport #59 2026-06-26 / 3598-3599（think-web コメント反映 第12R）=== */
/* 対象: /event/（一覧アーカイブ archive-event.php・body.post-type-archive-event）・全SP。 */
@media (max-width: 900px) {

	/* #3598 (sp): フィルタナビのコンテナ（section.event-archive-filter > div.container）が
	   スマホで横スクロール時に「上下に動く」→ 縦方向の揺れをロック。横スクロールは維持。
	   第11R #3572 で nav.event-archive-filter__tabs を nowrap+overflow-x:auto 横スクロール化済。
	   その横スクロール時に縦方向のオーバースクロール/慣性で上下にブレるのを止める:
	     - overflow-y:hidden（縦スクロール禁止＝横のみ）
	     - touch-action:pan-x（指のパンは横方向のみ受け付ける＝縦パンを無効化）
	     - overscroll-behavior:contain（端での親への伝播・バウンスを抑制）
	   横スクロール挙動（#3572）は overflow-x:auto を維持して壊さない。
	   ★スコープ＝event一覧専用クラス（archive-event.php のみ）。前R #3572/#3573 と同要素群。 */
	.event-archive-filter__tabs {
		overflow-y: hidden;                                                            /* #3598 縦スクロール禁止 */
		touch-action: pan-x;                                                           /* #3598 指パンは横のみ＝縦の揺れを無効化 */
		overscroll-behavior: contain;                                                  /* #3598 端でのバウンス/伝播抑制（x/y両方） */
		align-items: center;                                                           /* #3598 タブ高さ違いでの縦ジャンプを防ぐ */
	}
	/* コンテナ（div.container）側にも縦オーバースクロールの伝播ガードを当てる
	   （ピンは div.container だが横スクロールは内側の tabs が担う＝container自体は揺らさない）。 */
	.post-type-archive-event .event-archive-filter > .container {
		overscroll-behavior-y: contain;                                                /* #3598 縦の慣性スクロール伝播を止める */
	}

	/* #3599 (sp): /event/ ハンバーガー＝白背景+黒3本線。
	   ★第15R（社長口頭指示）で全ページSP共通化（5b節 body:not(.menu-open) .nav-trigger）に
	   吸収＝この post-type-archive-event 限定ブロックは削除（冗長排除）。共通ルールでは
	   白丸+黒線に加えて menu ラベルと bottom-right フロートも常時付くため、event 一覧も
	   他ページと完全に同一の追従ハンバーガーになる。 */
}

/* === websupport #59 2026-06-27 / 3601-3610（think-web コメント反映 第13R）=== */
/* 対象: /contact/（DB本文 page-id-12・CF7 form id=3126 埋め込み）と
        /event/training-strength/（single-event・postid-3128）。主にSP（#3602のみPC/SP両方）。
   ★スコープ方針（HANDOFF 5h/5n 踏襲）:
     - 専用部品クラス（page-hero__title / contact-intro / contact-notice / page-hero__lead）は注記どおり適用。
     - 汎用 section.section / bare p は「全ページ適用」注記でも従わず、各ページに body class でスコープ:
         contact = body.page-id-12 / training-strength = body.postid-3128。
     - .single-event 一律にすると extra-strength(postid-3135・第10R #3503=.single-event .section padding 80 0 100 0)
       と training-strength(#3610) が衝突するため postid 個別スコープ必須。
   ★#3601(lead 改行外し)・#3602(contact-intro 削除) は DB本文（ID12）を直接編集済（CSSではなくマークアップ側）。
     #3601 は lead の <br> を <br class="u-pc-br">（PC inline / SP=@860 非表示）に置換＝SPで改行を外し PC維持。
     #3602 は .contact-intro div を要素ごと削除。バックアップ VPS:/tmp/contact_12_backup.html。 */

/* #3606 (sp): h1.page-hero__title 文字 30→24px・line-height 50→40px。
   ★page-hero__title は全ページ共通ヒーロー部品＝注記どおり全ページ適用OK（#3500 page-hero__label と同系）。
     既存 SP値（30px/50px・staffセクション @760 由来 line14419）を上書き。≤900で当て narrow 全域を一貫化。 */
@media (max-width: 900px) {
	.page-hero__title {
		font-size: 25px;                                                               /* #3606 30->24 */
		line-height: 40px;                                                             /* #3606 50->40 */
	}

	/* ---- /contact/（body.page-id-12・DB本文＋CF7 form id=3126） ---- */

	/* #3605→#3654 上書き (sp): #main>section:nth-of-type(2)＝2番目の <section class="section">（CF7埋め込みブロック）
	   ★第16R(#3654)で上書き：第13R #3605 は padding:80 0 100 0 だったが、後発 #3654（margin:0 0 100 0・padding:80 0 0 0）採用。
	     さらに第16R #3646（padding 0 0 100 0）も #3654 で上書き（superseded・CSS反映せず）。
	   ★section.section は超汎用＝contactページに限定（注記「この要素だけ」・全section.sectionに当てない）。 */
	body.page-id-12 .section {
		margin: 0 0 0 0;                                                               /* #3664 下margin 100→0（第16R/17R #3654 の下100をSPで0に上書き） */
		padding: 0 0 0 0;                                                              /* #3682 上80→0（SP・section(2)＝唯一の.section。#3654 を上書き） */
	}

	/* #3689 (sp): contact section(2) の .container--narrow（#main>section(2)>div）下padding 0→100。
	   ★「この要素だけ」＝contactのsection(2)内 .container--narrow に限定（他ページのcontainerに波及させない）。 */
	body.page-id-12 .section > .container--narrow {
		padding-bottom: 100px;
	}

	/* #3603 (sp): CF7フォーム最初の行（.contact-form__row--split）の最初の列の <p>（お名前フィールド）
	   margin 0 0 0 0 → 0 0 30px 0。
	   ★「この要素だけ」＝CF7フォーム1行目・1列目の p に限定。他の行・列の p（メール/電話/相談区分…）に波及させない。
	     構造ベース: form 直下1番目の contact-form__row > 1番目の div > p（お名前）。contact に scope。 */
	body.page-id-12 .contact-form__row:first-of-type > div:first-child > p {
		margin: 0 0 40px 0;                                                            /* #3666 下30→40（第13R #3603 を上書き　1行目1列目p＝お名前） */
	}

	/* #3665 (sp): お名前ラッパ div（form>div(1)>div(1)）height 144→134px。「この要素だけ」。 */
	body.page-id-12 .contact-form__row:first-of-type > div:first-child {
		height: 134px;                                                                 /* #3665 144→134（お名前ラッパのみ） */
	}

	/* #3604 (sp): div.contact-notice（フォーム末尾の注記ブロック・form > div:nth-of-type(7)）
	   margin 8 0 0 0 → 30px 0 30px 0。
	   ★contact-notice は専用クラス（単一インスタンス）＝注記「この要素だけ」。念のため contact に scope。 */
	body.page-id-12 .contact-notice {
		margin: 30px 0 30px 0;                                                         /* #3604 上8/下0 → 上30/下30 */
	}

	/* ---- /event/training-strength/（body.postid-3128・single-event） ---- */

	/* #3607+#3610 衝突（同一要素 #main>section:nth-of-type(2)＝<section class="section">）→ 後発 #3610 採用。
	     #3607=padding 0 0 100 0 / #3610=margin 0 0 100 0 ＋ padding 80 0 0 0。
	     #3607 は superseded（CSS反映せず fixed のみ）。#3610 を反映＝margin 下100・padding 上80。
	   ★section.section は超汎用。さらに .single-event 一律（第10R #3503=.single-event .section padding 80 0 100 0）に
	     当てると extra-strength(postid-3135)等 他イベント詳細と衝突する。→ training-strength の postid-3128 に限定。
	     #3503 の .single-event .section（0,2,0）より body.postid-3128 .section（0,2,1＋後勝ち）で確実に上書き。 */
	body.postid-3128 .section {
		margin: 0 0 100px 0;                                                           /* #3610 下margin 100（#3607 superseded） */
		padding: 80px 0 0 0;                                                           /* #3610 上80・下0（#3503の下100をtraining-strengthのみ解除） */
	}

	/* #3609 (sp): イベント本文の特定 p（.event-detail__body の2番目の段落）margin 0 0 24 0 → 0 0 60px 0。
	   ★bare p の「全ページ適用」注記は厳禁（注意3）→ event詳細本文コンポーネント .event-detail__body の
	     2番目の段落に限定＋training-strength postid スコープ。本文 the_content() 由来の素 <p> 全体には当てない。
	     ピン path #main>section(2)>div>div:nth-of-type(1)>p:nth-of-type(2)
	       = .section > .container--narrow > .event-detail__body（figure を除く最初の div）> p(2)。 */
	body.postid-3128 .event-detail__body > p:nth-of-type(2) {
		margin: 0 0 60px 0;                                                            /* #3609 下24->60（本文2段落目のみ） */
	}
}

/* === 第14R（社長口頭指示・websupport外）2026-06-27 / イベント配下 page-hero 下padding 0 === */
/* イベント一覧（.post-type-archive-event）＋イベント詳細（.single-event）の section.page-hero のみ
   padding-bottom:0。base の padding-bottom は clamp(60px,10vh,120px) の単一値＝PC/SP共通のため、
   base レベルでスコープ上書き＝PC/SP 両 viewport とも下0。他ページのヒーロー余白には触れない。
   padding-top/左右は据え置き。 */
.post-type-archive-event .page-hero,
.single-event .page-hero {
	padding-bottom: 0;
}

/* === websupport #59 2026-06-27 / 3646-3655（think-web コメント反映 第16R）=== */
/* 対象: /contact/（DB本文 page-id-12・CF7 form id=3126 埋め込み）・全件SP(≤900px)。
   ★スコープ方針（HANDOFF 5h/5n/5p 踏襲）:
     - 全件 body.page-id-12（contact）にスコープ。bare #main / p / input / span を全ページ適用しない。
     - 専用部品クラス（contact-notice__title / contact-notice__list）は注記どおり contact 内で適用。
   ★衝突・切り分け（この回の肝）:
     - #3646 vs #3654（同一要素 #main>section:nth-of-type(2)＝<section class="section">）→ 後発 #3654 採用。
         #3646=padding 0 0 100 0 / #3654=margin 0 0 100 0 ＋ padding 80 0 0 0。
         #3646 は superseded（CSS反映せず fixed のみ）。さらに第13R #3605（padding 80 0 100 0）も #3654 で上書き済
         （上の #3605→#3654 ブロックで body.page-id-12 .section を margin:0 0 100 0; padding:80 0 0 0 に変更）。
     - #3650 と #3651 は同じ span（ラジオ群 .wpcf7-radio）だが別プロパティ＝両方適用（衝突なし）。
     - #3647/#3648 の bare p「全ページ適用」注記は厳禁→CF7該当行（contact内の特定 row > p）に限定（注意3）。
     - #3655 input は送信ボタンのみ＝送信 row 内 input に限定。全 input.wpcf7-form-control に当てない（注意4）。 */
@media (max-width: 900px) {

	/* #3647 (sp): CF7フォーム1行目（.contact-form__row--split＝お名前/会社名）2列目の <p>（会社名・屋号フィールド）
	   margin 0 → 0 0 30px 0。ピン form>div(1)>div(2)>p。
	   ★bare p 全適用禁止→該当フィールド（1行目・2列目）の p に限定。#3603(13R)で同行1列目pは済＝こちらは2列目。 */
	body.page-id-12 .contact-form__row:first-of-type > div:nth-of-type(2) > p {
		margin: 0 0 40px 0;                                                            /* #3667 下30→40（第16R #3647 を上書き　1行目2列目p＝会社名） */
	}

	/* #3668 (sp): 2行目1列目p（メール）margin 0→0 0 40px 0。bare p 全適用禁止→row2 1列目pに限定。 */
	body.page-id-12 .contact-form__row:nth-of-type(2) > div:nth-of-type(1) > p {
		margin: 0 0 40px 0;                                                            /* #3668 0->下40（2行目1列目p＝メール） */
	}

	/* #3669 (sp): 2行目2列目p（電話）margin 0→0 0 40px 0。bare p 全適用禁止→row2 2列目pに限定。 */
	body.page-id-12 .contact-form__row:nth-of-type(2) > div:nth-of-type(2) > p {
		margin: 0 0 40px 0;                                                            /* #3669 0->下40（2行目2列目p＝電話） */
	}

	/* #3648 (sp): CF7フォーム3番目の row（.contact-form__row＝ご相談区分 select）の直下 <p>。
	   margin 0 → 0 0 30px 0。ピン form>div(3)>p。
	   ★bare p 全適用禁止→form 直下3番目の contact-form__row の p に限定（相談区分フィールド）。 */
	body.page-id-12 .contact-form__row:nth-of-type(3) > p {
		margin: 0 0 40px 0;                                                            /* #3670+#3671 下30→40（第16R #3648 を上書き・相談区分行のp。#3670/#3671 同一セレクタ同一値で統合） */
	}

	/* #3690/#3691 (sp・全ページ): textarea#cf-message。#3649/#3672 を上書き。
	   ★「全ページ適用」指示＝page-id-12 スコープを外し #cf-message（ID・単一）で全ページ共通化。 */
	#cf-message {
		margin: 0 0 0 0;                                                               /* #3691 下40→0 */
		font-size: 15px;                                                              /* #3690 15→14 */
		line-height: 26px;                                                            /* #3690 27→26 */
	}

	/* #3650+#3651 (sp): ご希望の連絡方法のラジオ群 span.wpcf7-form-control.wpcf7-radio（div(5)>div>p>span>span）。
	   #3650=margin 0 → 0 0 40px 0（下40）／#3651=gap 12 32 → 15px（行/列gap両方15px）。
	   ★同一 span だが別プロパティ＝両方適用（衝突なし）。base .contact-form .wpcf7-radio は既に
	     display:flex; flex-wrap:wrap; gap:12px 32px（line13583-）→ gap を 15px に・margin-bottom 40px を追加。
	   ★「この要素だけ」＝この設問のコントロール群（.contact-form__radios 内）に限定。 */
	body.page-id-12 .contact-form__radios .wpcf7-radio {
		margin: 0 0 40px 0;                                                            /* #3650 下40 */
		gap: 15px;                                                                     /* #3651 12 32 → 15（行列とも15px） */
	}

	/* #3652 (sp): h3.contact-notice__title（注記ブロック見出し）文字 11→13px・text-align left→center。
	   ★「この要素だけ」＝contact-notice__title（専用クラス・単一）。contact に scope。 */
	body.page-id-12 .contact-notice__title {
		font-size: 14px;                                                               /* #3652 11->13 */
		text-align: center;                                                            /* #3652 left->center */
	}

	/* #3653 (sp): ul.contact-notice__list（注記の箇条書き）padding 0 0 0 18.2 → 0（左インデント解除）。
	   ★「この要素だけ」＝contact-notice__list（専用クラス）。contact に scope。 */
	body.page-id-12 .contact-notice__list {
		padding: 0;                                                                    /* #3653 左18.2->0（インデント解除） */
	}

	/* #3655 (sp): 送信ボタン input（form>div(8)>p>span>input＝.contact-form__submit 内 .wpcf7-submit）
	   width 392px → 300px。
	   ★「この要素だけ」＝送信ボタンのみ。全 input.wpcf7-form-control に当てず .contact-form__submit 内 input に限定
	     （注意4・他のテキスト入力を巻き込まない）。 */
	body.page-id-12 .contact-form__submit .wpcf7-submit {
		width: 300px;                                                                  /* #3655 392->300（送信ボタンのみ） */
	}

	/* (口頭指示 2026-06-27) split行（お名前/会社名・メール/電話）SP下余白0。
	   ★複合 .contact-form__row.contact-form__row--split（特異度0,3,1）で
	     メディアクエリ外の body.page-id-12 .contact-form__row{margin-bottom:60px}（0,2,1）を確実に上書き。 */
	body.page-id-12 .contact-form__row.contact-form__row--split {
		margin-bottom: 0;
	}
}

/* === websupport #59 2026-06-27 / 3658-3663（think-web コメント反映 第17R）=== */
/* 全件 PC/SP両方。body.page-id-12 スコープ。
   ★60px二重化を 1ルールに統合（#3658/#3659/#3661/#3660）:
     base .contact-form は flex column gap:32px（rowは自前 margin/padding 無し）。gapは marginと加算される。
     → .contact-form gapを0にし .contact-form__row に margin-bottom:60px を1回だけ付与（row間ちょうど60px）。
     #3659 の padding指定も margin60 に畳む。#3660（div(4) wrap）は row60 で充足済→wrapに別途付与しない（二重化回避）。
   ★スコープ限定2件:
     #3662 div(6)=.contact-form__row--accept のみ padding-bottom:20px（row margin60 はそのまま・この行固有の追加）。accept の margin-top:-8px とは別軸で衝突せず。
     #3663 div(7)=.contact-notice margin 8 0 0 0 → 8 0 40 0。第16R #3604（SP margin 30 0 30 0）を PC/SPとも上書き統合（メディアクエリ外・source後方で勝つ）。 */
body.page-id-12 .contact-form {
	gap: 0;                                                                            /* 親 flex gap 32→0：row間隔を margin60 一本に統合（二重化回避） */
}
body.page-id-12 .contact-form__row {
	margin-bottom: 60px;                                                               /* #3658/#3659/#3661 統合：全 row 下60pxを1回だけ（PC/SP両方） */
}
body.page-id-12 .contact-form__row--accept {
	padding-bottom: 20px;                                                              /* #3662 同意行のみ 下padding20（row margin60 はそのまま） */
}
body.page-id-12 .contact-notice {
	margin: 8px 0 40px 0;                                                              /* #3663 上8/下40（#3604 の SP 30/30 を PC/SP とも上書き統合） */
}
/* #3660 は wrap に別途付与しない＝div(4)行は上の row margin60 で下60px済（row60+wrap60 の二重化回避）。 */


/* ============================================================ */
/* 会社概要(page-id-54) VISION/MISSION：英字を mina で大きく -10°、見出し末尾字に重ねる */
/* ============================================================ */
.page-id-54 #vision .concept-section__head,
.page-id-54 #mission .concept-section__head {
	position: static;
	display: block;
}
.page-id-54 #vision .concept-section__ja,
.page-id-54 #mission .concept-section__ja {
	display: block;
	margin-bottom: 0;
	position: relative;
	z-index: 1;
}
.page-id-54 #vision .concept-section__en,
.page-id-54 #mission .concept-section__en {
	position: static;
	display: block;
	transform: rotate(-10deg);
	transform-origin: left center;
	margin: 0.5em 0 0;
	font-family: "mina", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 57px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	color: var(--color-fg-mute);
	white-space: nowrap;
	z-index: 2;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.1s var(--ease-out);
	pointer-events: none;
}
@media (max-width: 860px) {
	.page-id-54 #vision .concept-section__en,
	.page-id-54 #mission .concept-section__en {
		font-size: 43px;
		transform: rotate(-10deg);
	}
}


/* ============================================================ */
/* concept/staff/company ヒーロー: 中央寄せ mina英字 + 日本語 / 筆記体は左→右に出現 */
/* ============================================================ */
.page-hero--mina {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 46vh;
	padding: calc(var(--header-h) + 64px) 24px 64px;
	gap: 10px;
}
.page-hero__mina-en {
	font-family: "mina", serif;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(73px, 20vw, 141px);
	line-height: 1;
	color: #dedede;
	text-transform: lowercase;
	transform: rotate(-7deg);
	clip-path: inset(0 105% 0 0);
	animation: mina-write 0.8s var(--ease-out) 0.15s forwards; /* client 2026-07-11: 筆記体を速く */
}
.page-hero__mina-ja {
	font-size: 19px;
	letter-spacing: 0.14em;
	color: var(--color-fg-soft);
}
@keyframes mina-write { to { clip-path: inset(0 0 0 0); } }

/* VISION/MISSION 筆記体 スクロールイン時に左→右で出現 */
.page-id-54 #vision .concept-section__head.is-visible .concept-section__en,
.page-id-54 #mission .concept-section__head.is-visible .concept-section__en {
	clip-path: inset(0 0 0 0);
}

/* staff: 旧ヒーローの導入文（mina ヒーロー直下に保持） */
.staff-intro { padding: 8px 0 0; }
.staff-intro__title { font-size: 29px; font-weight: 700; text-align: center; margin: 0 0 24px; }
.staff-intro .staff-lead { max-width: 760px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
	.page-hero__mina-en { animation: none; clip-path: none; }
	.page-id-54 #vision .concept-section__en,
	.page-id-54 #mission .concept-section__en,
	.page-id-52 .concept-section__en { transition: none; clip-path: none; }
}


/* ============================================================ */
/* コンセプト(page-id-52) 各セクション英字も VISION と同じ mina 筆記体（小文字・-10°・左→右） */
/* ============================================================ */
.page-id-52 .concept-section__head {
	position: static;
	display: block;
}
.page-id-52 .concept-section__ja {
	display: block;
	margin-bottom: 0;
	position: relative;
	z-index: 1;
}
.page-id-52 .concept-section__en {
	position: static;
	display: block;
	transform: rotate(-10deg);
	transform-origin: left center;
	margin: 0.5em 0 0;
	font-family: "mina", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 57px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	color: var(--color-fg-mute);
	white-space: nowrap;
	z-index: 2;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.1s var(--ease-out);
	pointer-events: none;
}
@media (max-width: 860px) {
	.page-id-52 .concept-section__en { font-size: 43px; }
}
.page-id-52 .concept-section__head.is-visible .concept-section__en {
	clip-path: inset(0 0 0 0);
}


/* company VISION/MISSION: 中央寄せ＋見出しと筆記体の余白を詰める（添付指示） */
.page-id-54 #vision,
.page-id-54 #mission { text-align: center; }
.page-id-54 #vision .concept-section__en,
.page-id-54 #mission .concept-section__en {
	display: inline-block;
	transform-origin: center;
	margin-top: 0.15em;
}

/* ============================================================ */
/* Front hero: 全面写真 + もやもや(geo-bg)透過レイヤー + 中央コピー */
/* ============================================================ */
.hero--full {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: calc(var(--header-h) + 40px) 24px 84px;
}
.hero-full__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.hero-full__moya {
	position: absolute !important;
	inset: 0 !important;
	height: 100% !important;
	margin: 0 !important;
	opacity: 0.72;
	z-index: 1;
	/* 中心を透明にした放射マスク。is-revealed でマスクを拡大＝中心から四方へ晴れる。 */
	-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, #000 34%);
	mask-image: radial-gradient(circle at 50% 50%, transparent 0%, #000 34%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transition: opacity 3s var(--ease-out),
		-webkit-mask-size 3s var(--ease-out),
		mask-size 3s var(--ease-out);
}
.hero--full.is-revealed .hero-full__moya {
	opacity: 0;
	-webkit-mask-size: 420% 420%;
	mask-size: 420% 420%;
}
.hero-full__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(66% 58% at 50% 50%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.14) 60%, rgba(0,0,0,0) 100%);
}
.hero-full__inner {
	position: relative;
	z-index: 3;
	max-width: 880px;
}
.hero-full__title {
	font-size: clamp(27px, 3.2vw, 33px);
	font-weight: 700;
	line-height: 1.56;
	letter-spacing: 0.04em;
	color: #1a1a1a;
	margin: 0 0 clamp(20px, 3vh, 32px);
}
.hero-full__lead {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 2.1;
	color: #1a1a1a;
	margin: 0 0 18px;
	letter-spacing: 0.03em;
}
.hero-full__en {
	font-family: var(--font-en);
	font-size: 13px;
	line-height: 1.9;
	letter-spacing: 0.08em;
	color: rgba(26, 26, 26, 0.72);
	margin: 0;
}
.hero--full .hero__scroll { color: rgba(255,255,255,0.82); z-index: 3; }
.hero--full .hero__scroll-line { background: rgba(255,255,255,0.4); }
.hero--full .hero__scroll-line::after { background: #fff; }
/* mina hero: about/concept と同じ筆記体を全面写真上に。文字は白系。 */
.hero-full__inner--mina {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	max-width: min(1100px, 92vw);
}
.hero-full__mina-en {
	font-family: "mina", serif;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(41px, 7vw, 97px);
	line-height: 0.92;
	color: #f7f7f7;
	text-transform: none;
	transform: rotate(-7deg);
	clip-path: inset(0 105% 0 0);          /* 3秒間は隠れている */
}
.hero--full.is-revealed .hero-full__mina-en {
	animation: mina-write 0.8s var(--ease-out) 0.2s forwards; /* client 2026-07-11: 筆記体を速く */
}
.hero-full__mina-ja {
	font-size: clamp(16px, 1.4vw, 20px);
	letter-spacing: 0.16em;
	color: rgba(255,255,255,0.92);
	margin-top: 40px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.hero--full.is-revealed .hero-full__mina-ja {
	opacity: 1;
	transform: none;
	transition-delay: 0.9s;                /* 筆記体が書き終わる頃に現れる */
}
@media (prefers-reduced-motion: reduce) {
	.hero-full__mina-en { animation: none; clip-path: none; }
	.hero-full__mina-ja { opacity: 1; transform: none; transition: none; }
}
/* コンセプト節の見出し（ヒーローから移設） */
.concept2__head { text-align: left; margin-bottom: clamp(22px, 3vh, 38px); }
.concept2__heading {
	font-size: clamp(25px, 3vw, 37px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: #1a1a1a;
	margin: 0 0 18px;
}
.concept2__sub {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 2.05;
	letter-spacing: 0.04em;
	color: #1a1a1a;
	margin: 0;
}
@keyframes soine-breathe {
	0%, 100% { transform: rotate(10deg) scale(1); border-radius: 58% 42% 55% 45% / 52% 55% 45% 48%; }
	50% { transform: rotate(10deg) scale(1.09); border-radius: 46% 54% 48% 52% / 56% 46% 54% 44%; }
}
@media (max-width: 900px) {
	.hero-full__title { font-size: clamp(25px, 6vw, 31px); }
}

/* ============================================================ */
/* Front Concept 刷新: 左=思想の文章+CONCEPTリンク / 右=グラデーション面(グリッド) */
/* ============================================================ */
.concept2 {
	padding: clamp(72px, 11vh, 150px) 0;
	position: relative;
	z-index: 1;
}
.concept2__inner {
	display: grid;
	grid-template-columns: 1fr 1.12fr;
	gap: clamp(32px, 5vw, 88px);
	align-items: center;
}
.concept2__body { max-width: 540px; }
.concept2__text p {
	font-size: clamp(15px, 1.02vw, 17px);
	line-height: 2.25;
	letter-spacing: 0.03em;
	color: #1a1a1a;
	margin: 0 0 1.5em;
}
.concept2__text p:last-child { margin-bottom: 0; }
.concept2__link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	margin-top: clamp(28px, 4vh, 52px);
	text-decoration: none;
	color: #1a1a1a;
}
.concept2__link-label {
	font-family: var(--font-en);
	font-size: 15px;
	letter-spacing: 0.2em;
	font-weight: 500;
}
.concept2__link-line {
	width: 88px;
	height: 1px;
	background: #1a1a1a;
	transition: width .4s var(--ease-out);
}
.concept2__link-circle {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #efefef;
	display: grid;
	place-items: center;
	font-size: 16px;
	color: #1a1a1a;
	margin-left: -6px;
	transition: background .3s ease, transform .3s ease;
}
.concept2__link:hover .concept2__link-line { width: 72px; }
.concept2__link:hover .concept2__link-circle { background: #1a1a1a; color: #fff; transform: translateX(4px); }

.concept2__media {
	display: grid;
	grid-template-columns: 1.42fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 14px;
	aspect-ratio: 3 / 2.15;
}
.concept2__cell {
	border-radius: 3px;
	background: radial-gradient(130% 130% at 30% 18%, #fcfcfc 0%, #edeff1 55%, #dee0e3 100%);
}
.concept2__cell--main {
	grid-row: 1 / 3;
	background: radial-gradient(120% 145% at 26% 22%, #fdfdfd 0%, #e9ebee 58%, #dbdde0 100%);
}
.concept2__cell--a { background: linear-gradient(148deg, #fcfcfc 0%, #e5e7ea 100%); }
.concept2__cell--b { background: linear-gradient(205deg, #f3f4f6 0%, #dfe1e4 100%); }

@media (max-width: 900px) {
	.concept2__inner { grid-template-columns: 1fr; gap: 40px; }
	.concept2__body { max-width: none; }
	.concept2__media { aspect-ratio: 3 / 2.4; }
}


/* ============================================================ */
/* Front Service 刷新: 4つの支援カード（写真+EN+縦書き和文+View More+キャプション） */
/* ============================================================ */
.srv-cards { padding: clamp(72px, 11vh, 150px) 0; position: relative; z-index: 1; }
/* Front service(#service): 旧 .srv-cards カルーセルCSSから隔離（page-serviceの旧版には触れない） */
#service.srv-cards { display: block; overflow: visible; gap: 0; }
#service .srv-card { flex: none; width: auto; display: block; padding: 10px; border: none; background: none; color: inherit; }
@media (max-width: 900px) { #service .srv-card { width: auto; } }
.srv-cards__head { margin-bottom: 60px; text-align: center; } /* client #5084 */
.srv-cards__label {
	display: block; font-family: var(--font-en); font-size: clamp(35px, 4.6vw, 61px);
	font-weight: 700; line-height: 1.05; letter-spacing: 0.06em; color: #1a1a1a; margin-bottom: 12px;
}
.srv-cards__heading { font-size: 16px; font-weight: 500; color: rgba(26,26,26,0.6); letter-spacing: 0.08em; margin: 0; }
.srv-cards__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.2vw, 20px);
}
.srv-card { margin: 0; }
.srv-card__link {
	position: relative; display: block; border-radius: 6px; overflow: hidden;
	aspect-ratio: 3 / 4.35; text-decoration: none;
}
.srv-card__media { margin: 0; width: 100%; height: 100%; }
.srv-card__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .8s var(--ease-out);
}
.srv-card__link:hover .srv-card__media img { transform: scale(1.05); }
.srv-card__link::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.04) 34%, rgba(0,0,0,0.40) 100%);
}
.srv-card__en {
	position: absolute; top: 18px; left: 18px; z-index: 2;
	font-family: var(--font-en); font-size: 13px; letter-spacing: 0.18em; color: #fff; font-weight: 500;
}
.srv-card__ja {
	position: absolute; top: 18px; right: 15px; z-index: 2;
	writing-mode: vertical-rl; font-size: 19px; font-weight: 700; /* client #5085 */
	color: #fff; letter-spacing: 0.12em; text-shadow: 0 1px 10px rgba(0,0,0,0.28);
}
.srv-card__more {
	position: absolute; bottom: 16px; right: 16px; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-en); font-size: 13px; letter-spacing: 0.05em; color: #fff;
}
.srv-card__more i { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: block; }
.srv-card__caption {
	display: flex; align-items: center; gap: 12px;
	margin: 15px 0 0; font-size: 15px; line-height: 26px; color: #1a1a1a; letter-spacing: 0.02em; /* client #5086 */
}
.srv-card__caption-line { width: 24px; height: 1px; background: #d3944a; flex: none; }
@media (max-width: 900px) {
	.srv-cards__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
}


/* Concept 右カラム: グラデ面 → 楕円写真(脈動・傾き・写真正立) */
.concept2__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: auto;
}
.concept2__oval-wrap { line-height: 0; }
.concept2__oval {
	width: clamp(260px, 30vw, 430px);
	aspect-ratio: 3 / 4;
	border-radius: 58% 42% 55% 45% / 52% 55% 45% 48%;
	overflow: hidden;
	margin: 0;
	transform: rotate(10deg);
	will-change: transform, border-radius;
	animation: soine-breathe 5.5s ease-in-out infinite;
}
.concept2__oval img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 34% 50%;
	display: block;
	transform: rotate(-10deg) scale(1.4);
	transform-origin: 34% 50%;
}
@media (prefers-reduced-motion: reduce) {
	.concept2__oval { animation: none; }
}

/* ============================================================ */
/* Front Service 新IA: メイン物語導線 .srv-main-lead ＋ 5カードグリッド */
/* front/service.php 専用の追加。既存 .srv-cards / .srv-card は流用。   */
/* 戻すには front/service.php を旧版へ戻し、この節を削除するだけ。       */
/* ============================================================ */
.srv-main-lead {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: clamp(24px, 3vw, 48px);
	margin: 0 0 clamp(40px, 5vw, 64px);
	text-decoration: none;
	color: inherit;
}
.srv-main-lead__media {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 16 / 10;
}
.srv-main-lead__media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .8s var(--ease-out);
}
.srv-main-lead:hover .srv-main-lead__media img { transform: scale(1.04); }
.srv-main-lead__body { display: flex; flex-direction: column; justify-content: center; }
.srv-main-lead__en {
	font-family: var(--font-en); font-size: 13px; letter-spacing: 0.16em;
	color: rgba(26,26,26,0.5); margin: 0 0 14px;
}
.srv-main-lead__title {
	font-size: clamp(24px, 3.3vw, 42px); font-weight: 700; line-height: 1.43;
	letter-spacing: 0.03em; color: #1a1a1a; margin: 0 0 30px;
}
.srv-main-lead__text {
	font-size: 17px; line-height: 2.05; letter-spacing: 0.02em;
	color: rgba(26,26,26,0.72); margin: 0 0 22px;
}
.srv-main-lead__more {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: #1a1a1a;
}
.srv-main-lead__more i { width: 6px; height: 6px; border-radius: 50%; background: #d3944a; display: block; }
@media (max-width: 820px) {
	.srv-main-lead { grid-template-columns: 1fr; gap: 20px; }
}

/* 5カードグリッド（2列目→3列で自然に折り返す。5枚目も欠けない） */
.srv-cards__grid--5 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .srv-cards__grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .srv-cards__grid--5 { grid-template-columns: repeat(2, 1fr); } }

/* Front: Philosophy section (2026-07-11) -------------------- */
.section--philosophy .phil {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(32px, 5vw, 88px);
	align-items: start;
	margin-top: clamp(28px, 4vw, 48px);
}
.phil__lead {
	margin: 0;
	font-size: clamp(25px, 3vw, 41px);
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0.06em;
	color: var(--color-fg);
}
.phil__body p {
	margin: 0;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 2.15;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
.phil__body p + p { margin-top: 1.5em; }
.phil__closing {
	margin: clamp(40px, 5vw, 64px) 0 0;
	font-size: clamp(18px, 1.6vw, 23px);
	line-height: 1.9;
	letter-spacing: 0.06em;
	color: var(--color-fg);
}
.phil__closing strong { font-weight: 700; }
@media (max-width: 900px) {
	.section--philosophy .phil { grid-template-columns: 1fr; gap: 20px; }
}

/* About: INTRODUCTION feature -- centered head + image with overlapping white panel (2026-07-11) */
.about-intro__head { text-align: center; padding-inline: clamp(20px, 5vw, 40px); }
.about-intro__en {
	display: block;
	font-family: var(--font-en);
	font-size: clamp(19px, 2.6vw, 33px);
	font-weight: 700;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	color: var(--color-fg);
}
.about-intro__ja {
	margin: 16px 0 0;
	font-size: clamp(14px, 1.15vw, 16px);
	font-weight: 500;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	color: var(--color-fg-soft);
}
.about-intro__rule {
	display: block;
	width: 34px;
	height: 1px;
	margin: 22px auto 0;
	background: var(--color-fg-mute);
}
.about-intro__feature {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(46%, 600px);
	align-items: center;
	margin-top: 0;
}
.about-intro__media { margin: 0; grid-column: 1; }
.about-intro__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}
.about-intro__panel {
	grid-column: 2;
	position: relative;
	z-index: 2;
	align-self: center;
	background: #fff;
	padding: clamp(36px, 4vw, 60px);
	margin-left: clamp(-160px, -8vw, -48px);
	margin-right: clamp(24px, 6vw, 100px);
}
.about-intro__panel p {
	margin: 0;
	font-size: clamp(15px, 1.05vw, 16px);
	line-height: 2.1;
	letter-spacing: 0.05em;
	color: var(--color-fg-soft);
}
.about-intro__panel p + p { margin-top: 1.4em; }
@media (max-width: 900px) {
	.about-intro__feature { grid-template-columns: 1fr; margin-top: clamp(28px, 6vw, 40px); }
	.about-intro__media img { aspect-ratio: 4 / 3; }
	.about-intro__panel { margin: -44px 20px 0; padding: 32px 24px; }
}

/* About: COMPANY overview -- photo left + info table right (2026-07-11) */
.about-company__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.about-company__media { margin: 0; }
.about-company__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}
.about-company__panel { padding-top: clamp(4px, 1vw, 14px); }
.about-company__eyebrow {
	display: block;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.18em;
	color: var(--color-fg);
	margin-bottom: clamp(24px, 3vw, 40px);
}
.about-company__list { margin: 0; }
.about-company__row {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 16px;
	padding: 13px 0;
	font-size: 15px;
	line-height: 1.95;
	letter-spacing: 0.04em;
}
.about-company__row dt { color: var(--color-fg); font-weight: 500; }
.about-company__row dd { margin: 0; color: var(--color-fg-soft); }
.about-company__row dd a { color: var(--color-fg-soft); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.about-company__row dd a:hover { color: var(--color-fg); }
.about-company__news {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(30px, 4vw, 48px);
	padding-top: clamp(18px, 2vw, 24px);
	border-top: 1px solid var(--color-fg);
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--color-fg);
}
.about-company__news-label { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.14em; color: var(--color-fg-mute); }
.about-company__news-arrow {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	font-size: 14px;
	transition: transform 0.3s var(--ease-out);
}
.about-company__news:hover .about-company__news-arrow { transform: translateX(4px); }
@media (max-width: 900px) {
	.about-company__grid { grid-template-columns: 1fr; gap: 28px; }
	.about-company__row { grid-template-columns: 88px 1fr; }
}

/* ===== Header buttons 角丸ボタン化（鹿島ノ森風・色/フォントは既存）2026-07-11 ===== */
.site-header__cta { height: 46px; padding: 0 28px; border-radius: 7px; font-size: 14px; letter-spacing: 0.14em; text-transform: none; }
.site-header .nav-trigger,
body.has-overlay-header .nav-trigger,
body.has-dark-header .nav-trigger,
body.home:not(.is-scrolled) .nav-trigger {
	width: auto;
	height: 46px;
	border-radius: 7px;
	background-color: #fff;
	box-shadow: 0 4px 16px rgba(28, 22, 18, 0.12);
	margin-left: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0 20px;
}
@media (min-width: 901px) {
	.nav-trigger { width: auto; height: 46px; border-radius: 7px; background-color: #fff; box-shadow: 0 4px 16px rgba(28,22,18,0.12); padding: 0 20px; gap: 12px; display: inline-flex; align-items: center; }
}
.nav-trigger__label { font-family: var(--font-jp); font-size: 16px; letter-spacing: 0.04em; color: var(--color-fg); line-height: 1; }
.nav-trigger__label--close { display: none; }
.nav-trigger[aria-expanded="true"] .nav-trigger__label--open { display: none; }
.nav-trigger[aria-expanded="true"] .nav-trigger__label--close { display: inline; }
html body .site-header .nav-trigger .nav-trigger__btn span { background: var(--color-fg) !important; }

/* ============================================================
 * /service/ レイアウト改修（2026-07-11）
 *   .srv-editorial = 冒頭「人こそ」＝左に見出し＋リード、右にフルブリード3枚帯
 *   .srv-svc       = 5つの取り組み＝縦組み Service ラベル＋写真行
 * 新規クラスのみ＝他ページ非影響。写真は既存写真で仮置き（後で差し替え）。
 * ============================================================ */

/* --- 冒頭エディトリアル（人こそ） --- */
.srv-editorial {
	position: relative;
	padding-top: clamp(64px, 9vw, 120px);
	overflow: hidden;
}
.srv-editorial__inner {
	position: relative;
	z-index: 2;
}
.srv-editorial__text {
	max-width: 620px;
}
.srv-editorial__h {
	font-family: var(--font-jp);
	font-weight: 600;
	font-size: clamp(25px, 3.4vw, 41px);
	line-height: 1.55;
	letter-spacing: 0.04em;
	color: var(--color-fg);
}
.srv-editorial__lead {
	margin-top: clamp(28px, 4vw, 48px);
}
.srv-editorial__lead p {
	font-size: 17px;
	line-height: 2.1;
	color: var(--color-fg-soft);
}
.srv-editorial__lead p + p {
	margin-top: 1.5em;
}
.srv-editorial__band {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(4px, 0.6vw, 10px);
	margin-top: clamp(48px, 8vw, 120px);
	margin-left: clamp(160px, 34vw, 680px);
}
.srv-editorial__fig {
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--color-line-soft);
}
.srv-editorial__fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.srv-editorial__text { max-width: none; }
	.srv-editorial__band {
		margin-left: 0;
		margin-top: clamp(32px, 7vw, 56px);
		gap: 3px;
	}
}

/* --- 5つの取り組み＝縦組み Service ラベル＋写真行 --- */
.srv-svc {
	display: grid;
	grid-template-columns: minmax(96px, 168px) 1fr;
	gap: clamp(24px, 4vw, 72px);
	align-items: start;
}
.srv-svc__label {
	position: sticky;
	top: calc(var(--header-h) + 32px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}
.srv-svc__label-en {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
}
.srv-svc__label-ja {
	writing-mode: vertical-rl;
	font-family: var(--font-jp);
	font-weight: 600;
	font-size: clamp(21px, 2vw, 30px);
	letter-spacing: 0.35em;
	color: var(--color-fg);
}
.srv-svc__rows {
	display: flex;
	flex-direction: column;
	gap: clamp(56px, 8vw, 110px);
}
.srv-svc__intro {
	font-size: 17px;
	line-height: 2;
	color: var(--color-fg-soft);
	max-width: 720px;
	margin: 0 0 clamp(4px, 1.5vw, 16px);
}
.srv-svc__row {
	display: grid;
	grid-template-columns: minmax(0, 44%) 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
.srv-svc__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-line-soft);
}
.srv-svc__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.srv-svc__en {
	display: block;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 2px;
	color: var(--color-fg-mute);
}
.srv-svc__title {
	font-family: var(--font-jp);
	font-weight: 600;
	font-size: clamp(21px, 2.4vw, 28px);
	line-height: 1.5;
	color: var(--color-fg);
	margin-top: 14px;
}
.srv-svc__text {
	font-size: 16px;
	line-height: 2;
	color: var(--color-fg-soft);
	margin-top: clamp(18px, 2vw, 26px);
}
.srv-svc__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 360px;
	margin-top: clamp(24px, 3vw, 36px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-fg);
	color: var(--color-fg);
	font-size: 15px;
	letter-spacing: 0.04em;
	transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.srv-svc__more-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-fg);
	flex-shrink: 0;
	transition: transform 0.3s var(--ease-out);
}
.srv-svc__more:hover {
	color: var(--color-fg-mute);
	opacity: 1;
}
.srv-svc__more:hover .srv-svc__more-dot {
	transform: translateX(4px);
}

@media (max-width: 900px) {
	.srv-svc {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.srv-svc__label {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}
	.srv-svc__label-ja {
		writing-mode: horizontal-tb;
		letter-spacing: 0.2em;
		font-size: 23px;
	}
	.srv-svc__rows {
		gap: clamp(48px, 12vw, 72px);
	}
	.srv-svc__row {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.srv-svc__media {
		aspect-ratio: 3 / 2;
	}
	.srv-svc__more {
		max-width: none;
	}
}

/* ============================================================
 * ヘッダーボタン刷新＋フルスクリーンメニュー v2（2026-07-11 / kajimanomori風）
 *   .site-header__cta = 角丸長方形（色/フォントは従来通り）
 *   .menu-btn         = 白い角丸「Menu ●●●」ボタン
 *   .menu-panel--v2   = 左写真パネル＋右(上部バー＋2カラムnav＋フッター)
 * 旧 .nav-trigger* / .menu-panel__container* ルールは対象要素が無くなり自然に不活性。
 * 新メニューは menu-panel--v2 で名前空間化し旧 .menu-panel__* を確実に上書き。
 * ============================================================ */

/* --- CTA：ピル→角丸長方形（色・フォントは据え置き） --- */
.site-header__cta {
	border-radius: 10px;
	height: 44px;
}

/* --- Menu ボタン（白い角丸＋Menu＋3点） --- */
.menu-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 44px;
	padding: 0 18px;
	background: #ffffff;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgba(28, 22, 18, 0.06), 0 4px 14px rgba(28, 22, 18, 0.07);
	transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.menu-btn:hover {
	box-shadow: 0 2px 6px rgba(28, 22, 18, 0.10), 0 8px 22px rgba(28, 22, 18, 0.10);
}
.menu-btn__label {
	font-family: var(--font-en);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.10em;
	color: #1d1916;
	line-height: 1;
}
.menu-btn__dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.menu-btn__dots i {
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #1d1916;
}
/* メニューを開いている間はヘッダーの Menu ボタンを隠す（パネル内の close で閉じる） */
body.menu-open .menu-btn {
	visibility: hidden;
}
/* 開いている間はヘッダー帯のクリックを透過させ、パネル内 close を押せるようにする */
body.menu-open .site-header {
	pointer-events: none;
}
body.menu-open .menu-panel {
	pointer-events: auto;
}

/* --- フルスクリーンメニュー v2 --- */
.menu-panel--v2 {
	overflow: hidden;
}
.menu-panel--v2 .menu-panel__grid {
	display: grid;
	grid-template-columns: 40% 60%;
	height: 100%;
	width: 100%;
}
/* 左：写真パネル */
.menu-panel--v2 .menu-panel__visual {
	position: relative;
	overflow: hidden;
	height: 100%;
	background: var(--color-line-soft);
}
.menu-panel--v2 .menu-panel__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.menu-panel--v2 .menu-panel__visual-logo {
	position: absolute;
	top: 28px;
	left: 32px;
	width: 148px;
	height: auto;
}
.menu-panel--v2 .menu-panel__visual-logo svg {
	width: 100%;
	height: auto;
}
.menu-panel--v2 .menu-panel__visual-logo svg path,
.menu-panel--v2 .menu-panel__visual-logo svg text,
.menu-panel--v2 .menu-panel__visual-logo svg .cls-1 {
	fill: #ffffff;
}
/* 右：本体 */
.menu-panel--v2 .menu-panel__body {
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: clamp(22px, 3vw, 38px) clamp(28px, 4vw, 60px) clamp(36px, 5vh, 60px);
	display: flex;
	flex-direction: column;
}
/* 上部バー */
.menu-panel--v2 .menu-panel__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: clamp(20px, 3.5vh, 40px);
}
.menu-panel--v2 .menu-panel__social {
	display: flex;
	align-items: center;
	gap: 16px;
}
.menu-panel--v2 .menu-panel__social-label {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.14em;
	color: var(--color-fg-soft);
}
.menu-panel--v2 .menu-panel__social-link {
	display: inline-flex;
	color: var(--color-fg);
	transition: opacity 0.2s var(--ease-out);
}
.menu-panel--v2 .menu-panel__social-note {
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.10em;
	color: var(--color-fg);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.menu-panel--v2 .menu-panel__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}
.menu-panel--v2 .menu-panel__cta {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 22px;
	background: var(--color-fg);
	color: var(--color-bg);
	border-radius: 10px;
	font-size: 14px;
	letter-spacing: 0.08em;
	transition: opacity 0.2s var(--ease-out);
}
.menu-panel--v2 .menu-panel__close {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 16px;
	background: #ffffff;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	color: #1d1916;
	font-family: var(--font-en);
	font-size: 14px;
	letter-spacing: 0.12em;
	box-shadow: 0 1px 3px rgba(28, 22, 18, 0.06), 0 4px 14px rgba(28, 22, 18, 0.07);
	transition: box-shadow 0.25s var(--ease-out);
}
.menu-panel--v2 .menu-panel__close:hover {
	box-shadow: 0 2px 6px rgba(28, 22, 18, 0.10), 0 8px 22px rgba(28, 22, 18, 0.10);
}
.menu-panel--v2 .menu-panel__close-x {
	position: relative;
	width: 15px;
	height: 15px;
	display: inline-block;
}
.menu-panel--v2 .menu-panel__close-x i {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}
.menu-panel--v2 .menu-panel__close-x i:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.menu-panel--v2 .menu-panel__close-x i:nth-child(2) { transform: translateY(-50%) rotate(-45deg); }

/* nav（2カラム＝column-major） */
.menu-panel--v2 .menu-panel__nav {
	flex: 1 0 auto;
	padding: clamp(8px, 2vh, 20px) 0;
}
.menu-panel--v2 .menu-panel__list {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: clamp(24px, 4vw, 60px);
	border-top: 0;
}
.menu-panel--v2 .menu-panel__item {
	break-inside: avoid;
	border-top: 1px solid var(--color-line);
	border-bottom: 0;
	transform: none;
}
.menu-panel--v2 .menu-panel__link {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "en marker" "ja marker";
	align-items: center;
	column-gap: 12px;
	padding: clamp(15px, 2vh, 20px) 4px;
	transition: padding-left 0.3s var(--ease-out);
}
.menu-panel--v2 .menu-panel__link:hover {
	padding-left: 10px;
	opacity: 1;
}
.menu-panel--v2 .menu-panel__en {
	grid-area: en;
	font-family: var(--font-en);
	font-weight: 500;
	font-size: clamp(20px, 1.9vw, 26px);
	letter-spacing: 0.06em;
	color: var(--color-fg);
	line-height: 1.2;
}
.menu-panel--v2 .menu-panel__ja {
	grid-area: ja;
	font-size: 13px;
	letter-spacing: 0.14em;
	color: var(--color-fg-mute);
	margin-top: 4px;
}
.menu-panel--v2 .menu-panel__marker {
	grid-area: marker;
	position: relative;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.menu-panel--v2 .menu-panel__marker.is-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-fg);
	transform: translate(-50%, -50%);
}
.menu-panel--v2 .menu-panel__marker.is-plus::before,
.menu-panel--v2 .menu-panel__marker.is-plus::after {
	content: '';
	position: absolute;
	background: var(--color-fg);
}
.menu-panel--v2 .menu-panel__marker.is-plus::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	transform: translateY(-50%);
}
.menu-panel--v2 .menu-panel__marker.is-plus::after {
	left: 50%;
	top: 0;
	width: 1.5px;
	height: 100%;
	transform: translateX(-50%);
}
.menu-panel--v2 .menu-panel__sub {
	list-style: none;
	margin: 0;
	padding: 0 4px 30px; /* #6324 下16->30 */
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}
.menu-panel--v2 .menu-panel__sub a {
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
	transition: color 0.2s var(--ease-out);
}
.menu-panel--v2 .menu-panel__sub a::before {
	content: '−';
	margin-right: 6px;
	color: var(--color-fg-mute);
}
.menu-panel--v2 .menu-panel__sub a:hover {
	color: var(--color-fg);
	opacity: 1;
}
/* フッターリンク */
.menu-panel--v2 .menu-panel__lower {
	list-style: none;
	display: flex;
	gap: 24px 32px;
	flex-wrap: wrap;
	align-items: center;
	margin: clamp(24px, 4vh, 40px) 0 0;
	padding: clamp(20px, 3vh, 28px) 0 0;
	border-top: 1px solid var(--color-line);
	transform: none;
	opacity: 1;
}
.menu-panel--v2 .menu-panel__lower a {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.14em;
	color: var(--color-fg-soft);
	transition: color 0.2s var(--ease-out);
}
.menu-panel--v2 .menu-panel__lower a:hover {
	color: var(--color-fg);
	opacity: 1;
}

/* SP：写真パネルを隠し1カラムに */
@media (max-width: 900px) {
	.menu-panel--v2 .menu-panel__grid {
		grid-template-columns: 1fr;
	}
	.menu-panel--v2 .menu-panel__visual {
		display: none;
	}
	.menu-panel--v2 .menu-panel__body {
		padding-top: clamp(72px, 12vh, 96px);
	}
	.menu-panel--v2 .menu-panel__list {
		columns: 1;
	}
	.menu-panel--v2 .menu-panel__cta {
		display: none;
	}
	.menu-panel--v2 .menu-panel__en {
		font-size: clamp(21px, 6vw, 27px);
	}
}

/* ============================================================
 * /service/ 本文の続き4ブロック＝縦ラベル｜画像左｜EN見出し＋本文右（2026-07-11）
 * 縦に積む。新規クラスのみ＝他ページ非影響。写真は既存写真で仮置き。
 * ============================================================ */
.srv-story2 {
	display: flex;
	flex-direction: column;
	gap: clamp(72px, 10vw, 140px);
}
.srv-story2__row {
	display: grid;
	grid-template-columns: 42px minmax(0, 46%) 1fr;
	column-gap: clamp(20px, 3vw, 56px);
	align-items: start;
}
.srv-story2__label {
	writing-mode: vertical-rl;
	font-family: var(--font-jp);
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--color-fg-mute);
	align-self: start;
	margin-top: 6px;
	white-space: nowrap;
}
.srv-story2__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-line-soft);
}
.srv-story2__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.srv-story2__body {
	padding-top: clamp(12px, 3vw, 48px);
}
.srv-story2__en {
	display: block;
	font-family: var(--font-en);
	font-weight: 700;
	font-size: clamp(18px, 1.5vw, 22px);
	letter-spacing: 0.12em;
	text-transform: capitalize;
	color: var(--color-fg);
}
.srv-story2__h {
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.6;
	color: var(--color-fg);
	margin-top: 16px;
}
.srv-story2__text {
	margin-top: clamp(20px, 2.5vw, 32px);
}
.srv-story2__text p {
	font-size: 17px;
	line-height: 2.1;
	color: var(--color-fg-soft);
}
.srv-story2__text p + p {
	margin-top: 1.6em;
}
.srv-story2__diag {
	margin-top: clamp(64px, 9vw, 120px);
}

@media (max-width: 900px) {
	.srv-story2 {
		gap: clamp(56px, 14vw, 88px);
	}
	.srv-story2__row {
		grid-template-columns: 1fr;
		row-gap: 18px;
	}
	.srv-story2__label {
		writing-mode: horizontal-tb;
		margin-top: 0;
	}
	.srv-story2__body {
		padding-top: 0;
	}
	.srv-story2__media {
		aspect-ratio: 3 / 2;
	}
}

/* ============================================================
 * /service/ websupport コメント反映（Site#59 / 2026-07-11）
 * #4941-4945：srv-story2 / srv-editorial の字サイズ・行間・太さ調整。
 * 対象クラスに限定（"全pに適用"は危険なので該当セクションのpのみ）。
 * ============================================================ */
/* #4941 縦ラベル 12→14px */
.srv-story2__label { font-size: 15px; color: #1a1a1a; } /* client 2026-07-11 #5025: 色 #8a8a8a->#1a1a1a */
/* #4942 EN見出し 21→16px・700→500 */
.srv-story2__en { font-size: 15px; font-weight: 500; }
/* client 2026-07-11 #5026: EN見出しの下に短い横線（20px/2px・全同要素） */
.srv-story2__en { position: relative; }
.srv-story2__en::after { content: ""; display: block; width: 20px; height: 2px; background: #1a1a1a; margin-top: 12px; }
/* client 2026-07-11 #5030: works 写真は上揃え（他の写真も） */
.srv-svc__media img { object-position: top; }
/* #4943 JA見出し 20→24px・行間32→40px */
.srv-story2__h { font-size: 30px; line-height: 1.8; }
/* #4944 本文p 16→15px・行間33.6→30px */
.srv-story2__text p { font-size: 16px; line-height: 2; }
/* #4945 冒頭リードp 16→15px・行間33.6→30px */
.srv-editorial__lead p { font-size: 16px; line-height: 2; }

/* ============================================================
 * /service/ 冒頭エディトリアルを2カラム化＋右にページ内インデックス（追従なし）
 * 2026-07-11。新規クラスのみ＋アンカーoffset。
 * ============================================================ */
.srv-editorial__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(32px, 5vw, 88px);
	align-items: start;
}
.srv-editorial__index {
	border-left: 1px solid var(--color-line);
	padding-left: clamp(18px, 2vw, 32px);
	min-width: 350px; /* client 2026-07-11 #5024: 209->350px */
}
.srv-editorial__index-label {
	display: block;
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--color-fg-mute);
	margin-bottom: 16px;
}
.srv-editorial__index ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.4vw, 18px);
}
.srv-editorial__index a {
	display: inline-block;
	font-size: 16px;
	letter-spacing: 0.04em;
	color: var(--color-fg-soft);
	transition: color 0.2s var(--ease-out);
}
.srv-editorial__index a:hover {
	color: var(--color-fg);
	opacity: 1;
}
/* 固定ヘッダー分のアンカーオフセット */
#srv-story, #srv-timeline, #srv-forms, #works, #srv-cta {
	scroll-margin-top: calc(var(--header-h) + 24px);
}
@media (max-width: 900px) {
	.srv-editorial__inner { grid-template-columns: 1fr; }
	.srv-editorial__index {
		border-left: 0;
		border-top: 1px solid var(--color-line);
		padding-left: 0;
		padding-top: 22px;
		margin-top: 10px;
		min-width: 0;
	}
	.srv-editorial__index ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px 22px;
	}
}

/* ============================================================
 * /service/ コメント反映 #4988-4990 ＋ 研修一覧カード v2（2026-07-11）
 * ============================================================ */
/* #4988 srv-story2 gap 140→100 */
.srv-story2 { gap: clamp(56px, 8vw, 100px); }
/* #4989 #works 上padding 160→0 */
#works { padding-top: 0; }
/* #4990 srv-svc__rows gap 110→100 */
.srv-svc__rows { gap: clamp(56px, 8vw, 100px); }

/* --- 研修一覧カード v2：写真を上に＋pill＋View More（緑ドット） --- */
.event-card.event-card--v2 {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(28, 22, 18, 0.05);
	padding: 0;
}
.event-card--v2 .event-card__media {
	display: block;
	margin: 0;
}
.event-card--v2 .event-card__media figure {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.event-card--v2 .event-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.event-card--v2 .event-card__body {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1 1 auto;
	padding: clamp(18px, 1.8vw, 26px);
}
.event-card--v2 .event-card__meta {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.event-card--v2 .event-card__cat {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--color-fg-soft);
	background: var(--color-line-soft);
	border-radius: 999px;
	padding: 5px 12px;
}
.event-card--v2 .event-card__excerpt { margin: 8px 0 0; flex: none; font-size: 14px; line-height: 1.85; color: var(--color-fg-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* client #5082/5099-5101: v2カードのリード文 */
.event-card--v2 .event-card__title {
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 700;
	line-height: 1.9;
	color: var(--color-fg);
	margin: 20px 0 5px;
}
.event-card--v2 .event-card__schedule {
	font-size: 15px;
	line-height: 1.9;
	color: var(--color-fg-soft);
	margin: 0;
}
.event-card--v2 .event-card__more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 14px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--color-fg);
	font-family: var(--font-en);
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--color-fg);
	transition: color 0.2s var(--ease-out);
}
.event-card--v2 .event-card__more-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2f6b53;
	flex-shrink: 0;
	transition: transform 0.3s var(--ease-out);
}
.event-card--v2 .event-card__more:hover { color: var(--color-fg-mute); }
.event-card--v2 .event-card__more:hover .event-card__more-dot { transform: translateX(4px); }

/* ============================================================
 * 研修一覧カード v2 調整（2026-07-11）：写真を全幅16:9・View More幅40%
 * ============================================================ */
/* 写真を横幅いっぱい・16:9トリミング（高さを抑える） */
.event-card--v2 .event-card__media figure { aspect-ratio: 16 / 9; }
/* View More ボタンをカード幅の約40%に */
.event-card--v2 .event-card__more { width: 40%; min-width: 150px; }

/* ============================================================
 * WHAT WE DO(training) 中央化＋研修一覧アンカーボタン（2026-07-11）
 * ============================================================ */
/* training は4枚 → 4列（右の空列をなくし中央バランスに） */
.lp-oc--provide-training .lp-oc__cards { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .lp-oc--provide-training .lp-oc__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .lp-oc--provide-training .lp-oc__cards { grid-template-columns: 1fr; } }

/* 研修一覧：リード下のアンカーボタン */
.lp-oc-events__anchors {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: clamp(24px, 3vw, 40px) 0 0;
}
.lp-oc-events__anchor {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 26px;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--color-fg);
	background: #ffffff;
	transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.lp-oc-events__anchor:hover {
	background: var(--color-fg);
	color: var(--color-bg);
	border-color: var(--color-fg);
	opacity: 1;
}
.lp-oc-events__anchor i { font-style: normal; }
.lp-oc-events__group[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ============================================================
   client 2026-07-18 design-branding 実績ショーケース（lp-showcase）
   支援の進め方の上に最新の制作実績3件＋「他の実績も見る」
   ============================================================ */
.lp-showcase__grid {
	list-style: none;
	margin: clamp(32px, 4vw, 56px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 32px);
}
.lp-showcase__link { display: flex; flex-direction: column; text-decoration: none; }
.lp-showcase__thumb {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: #f0f0f0;
}
.lp-showcase__thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .6s var(--ease-out);
}
.lp-showcase__link:hover .lp-showcase__thumb img { transform: scale(1.04); }
.lp-showcase__svc {
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 1px;
	color: var(--color-fg-mute);
	margin-top: 14px;
}
.lp-showcase__title {
	font-size: 18px; /* #6357 15->18 */
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: 0.04em;
	color: var(--color-fg);
	margin: 6px 0 0;
}
.lp-showcase__more { text-align: center; margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 900px) {
	.lp-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.lp-showcase__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   client 2026-07-18 #6338 事例詳細（/project/）関連実績3件
   ============================================================ */
.case-related { padding: clamp(60px, 8vw, 100px) 0; }
.case-related__grid {
	list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px);
}
.case-related__link { display: flex; flex-direction: column; text-decoration: none; }
.case-related__thumb { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: #f0f0f0; }
.case-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.case-related__link:hover .case-related__thumb img { transform: scale(1.04); }
.case-related__cat { font-family: var(--font-en); font-size: 12px; letter-spacing: 1px; color: var(--color-fg-mute); margin-top: 14px; text-transform: capitalize; }
.case-related__name { font-size: 15px; font-weight: 700; line-height: 1.65; letter-spacing: 0.04em; color: var(--color-fg); margin: 6px 0 0; }
@media (max-width: 900px) { .case-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .case-related__grid { grid-template-columns: 1fr; gap: 24px; } }


/* #6356 実績ショーケースの直後の「支援の進め方」上padding 160->0（design-branding限定＝隣接） */
.lp-showcase + .lp-steps { padding-top: 0; }


/* client 2026-07-18 PROJECT(works) 一旦非公開時の空表示 */
.works-grid__empty { grid-column: 1 / -1; text-align: center; padding: 40px 0; }

/* client 2026-07-18 tone-design 申込フォーム 準備中表示（会員サイト未構築） */
.td-form__prep { text-align: center; padding: clamp(32px, 5vw, 56px) 0; }
.td-form__prep-badge { display: inline-block; font-family: var(--font-en); font-size: 13px; letter-spacing: 2px; color: #8a6a3a; background: #f3efe8; border-radius: 999px; padding: 8px 22px; }
.td-form__prep-text { margin-top: 16px; font-size: 15px; line-height: 1.9; color: var(--color-fg-soft); }