/* =============================================================
 * UNIONEST Rental — Theme CSS
 * ----------------------------------------------------------------
 *  1. Design tokens (custom properties)
 *  2. Reset / base
 *  3. Typography helpers
 *  4. Layout primitives
 *  5. Components
 *      - Header / Nav
 *      - Hero
 *      - News
 *      - Service (Selling Points)
 *      - Image gallery
 *      - Access
 *      - CTA
 *      - Footer
 *      - Buttons
 *      - News archive / single
 *      - 404 / search
 *  6. Responsive (≤960 / ≤640)
 * ============================================================= */

/* ----------------------------------------------------------------
 * 1. Design tokens
 * ---------------------------------------------------------------- */
:root {
	--c-brand:        #5b96b4;
	--c-brand-soft:   #d9eff8;
	--c-bg-soft:      #e1eaee;
	--c-text:         #4a4a5a;
	--c-text-soft:    #6b6b78;
	--c-line:         #4a4a5a;
	--c-line-soft:    #e0e0dc;
	--c-white:        #ffffff;
	--c-black:        #000000;
	--c-overlay:      rgba(255, 255, 255, 0.9);
	--c-cta-overlay:  rgba(214, 241, 253, 0.86);

	--ff-en:          'Cormorant SC', 'Noto Serif JP', serif;
	--ff-jp:          'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
	--ff-jp-serif:    'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
	--ff-num:         'DM Sans', 'Roboto', system-ui, sans-serif;
	--ff-roboto:      'Roboto', system-ui, sans-serif;

	--container-max:  1440px;
	--container-pad:  60px;

	--ease:           cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--dur-fast:       180ms;
	--dur-base:       260ms;
	--dur-reveal:     1100ms;
	--dur-hero:       1300ms;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--ff-jp);
	font-size: 16px;
	line-height: 1.7;
	color: var(--c-text);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "palt";
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

a:hover {
	opacity: 0.7;
}

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

p {
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 500;
}

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

/* Skip link */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto !important;
	display: block;
	background: var(--c-white);
	color: var(--c-brand);
	padding: 12px 16px;
	font-weight: 700;
	z-index: 100;
	position: absolute;
	top: 8px;
	left: 8px;
}

/* ----------------------------------------------------------------
 * 3. Typography helpers
 * ---------------------------------------------------------------- */
.t-en {
	font-family: var(--ff-en);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.t-num {
	font-family: var(--ff-num);
	font-weight: 400;
	font-feature-settings: "tnum";
}

/* Section heading shared by NEWS / OUR SERVICE / ACCESS / CONTACT */
.section-heading {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--c-text);
}

.section-heading--center {
	align-items: center;
	text-align: center;
}

.section-heading__en {
	font-family: var(--ff-en);
	font-size: 50px;
	letter-spacing: 0.04em;
	line-height: 1;
}

.section-heading__jp {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.0625em;
	line-height: 1;
}

/* ----------------------------------------------------------------
 * 4. Layout primitives
 *
 * Pattern: full-bleed section + constrained inner.
 *   <section class="...-section">
 *     <div class="...-section__inner"> ... </div>
 *   </section>
 * Each section is full-width (so backgrounds bleed edge-to-edge),
 * while the inner caps content at --container-max and adds gutters.
 * ---------------------------------------------------------------- */
.l-inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.l-section {
	width: 100%;
}

/* ----------------------------------------------------------------
 * 5a. Header / Nav
 * ---------------------------------------------------------------- */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 30;
	background: var(--c-overlay);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 24px var(--container-pad);
}

.site-logo,
.site-logo a {
	display: inline-flex;
	align-items: center;
}

.site-logo img {
	height: 40px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 40px;
}

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: 40px;
}

.site-nav__menu a {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.0714em;
	color: var(--c-brand);
	white-space: nowrap;
}

.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-brand);
	color: var(--c-white);
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.0769em;
	padding: 12px 28px;
	height: 40px;
	white-space: nowrap;
	transition: background-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.btn-cta:hover {
	background: #4986a4;
	opacity: 1;
}

.site-nav__toggle {
	display: none;
}

/* ----------------------------------------------------------------
 * 5b. Hero
 * ---------------------------------------------------------------- */
.hero {
	position: relative;
	width: 100%;
	height: 880px;
	max-height: 100vh;
	overflow: hidden;
	color: var(--c-white);
	isolation: isolate;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero__overlay {
	position: absolute;
	inset: 88px 0 0 0;
	z-index: -1;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0.1) 60%,
		rgba(0, 0, 0, 0) 100%
	);
}

.hero__inner {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

.hero__content {
	position: absolute;
	left: 85px;
	bottom: 220px;
	max-width: 680px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.6);
}

.hero__sub {
	font-family: var(--ff-roboto);
	font-weight: 500;
	font-size: 17px;
	letter-spacing: 0.286em;
}

.hero__title {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 48px;
	letter-spacing: 0.32em;
	line-height: 1.4;
	margin: 4px 0 0;
}

.hero__desc {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.9;
}

/* ----------------------------------------------------------------
 * 5c. News (front-page)
 * ---------------------------------------------------------------- */
.news-section {
	background: var(--c-white);
	padding-block: 100px;
	/*
	 * Asymmetric padding: left edge aligns with the centered --container-max,
	 * right edge bleeds to the viewport so cards run off-screen as in Figma.
	 */
	padding-inline-start: max( var(--container-pad), calc( (100% - var(--container-max)) / 2 + var(--container-pad) ) );
	padding-inline-end: 0;
}

.news-section__inner {
	display: flex;
	gap: 154px;
	align-items: flex-start;
	overflow: hidden;
	width: 100%;
}

.news-section__header {
	flex-shrink: 0;
	width: 145px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 292px;
}

.news-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 145px;
	padding: 0 5px 7px;
	border-bottom: 1px solid var(--c-brand);
	color: var(--c-brand);
	font-family: var(--ff-en);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 0.0556em;
}

.news-link__arrow {
	font-size: 20px;
}

.news-list {
	display: flex;
	gap: 45px;
	flex-wrap: nowrap;
	overflow: hidden;
	flex: 1;
}

.news-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 235px;
	flex-shrink: 0;
	padding-bottom: 22px;
	color: var(--c-text);
}

.news-card > a {
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: inherit;
}

.news-card > a:hover {
	opacity: 1;
}

.news-card:hover {
	opacity: 1;
}

.news-card:hover .news-card__title {
	color: var(--c-brand);
}

.news-card__thumb {
	width: 100%;
	height: 155px;
	overflow: hidden;
	background: var(--c-bg-soft);
}

.news-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-base) var(--ease);
}

.news-card:hover .news-card__thumb img {
	transform: scale(1.04);
}

.news-card__body {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.news-card__meta {
	display: flex;
	align-items: center;
	gap: 13px;
}

.news-card__date {
	font-family: var(--ff-num);
	font-size: 14px;
	color: var(--c-text);
}

.news-card__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 27px;
	min-width: 100px;
	padding: 4px 12px;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 13px;
	color: var(--c-text);
	border-left: 1px solid var(--c-text);
	border-right: 1px solid var(--c-text);
}

.news-card__title {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: var(--c-text);
	transition: color var(--dur-fast) var(--ease);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ----------------------------------------------------------------
 * 5d. Service (Selling Points)
 * ---------------------------------------------------------------- */
.service-section {
	background: var(--c-bg-soft);
	padding: 100px 0;
}

.service-section__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

.service-section__header {
	padding: 0 var(--container-pad) 30px;
	display: flex;
	justify-content: center;
	margin-bottom: 110px;
}

.sp-block {
	position: relative;
	width: 100%;
	height: 624px;
	margin-bottom: 120px;
}

.sp-block:last-child {
	margin-bottom: 0;
}

.sp-block__image {
	position: absolute;
	top: 0;
	width: 825px;
	height: 624px;
	overflow: hidden;
}

.sp-block__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-block--right .sp-block__image { right: 0; }
.sp-block--left .sp-block__image { left: 0; }

.sp-block__card {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--c-white);
	padding: 60px;
	width: 623px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	z-index: 1;
}

.sp-block--right .sp-block__card { left: var(--container-pad); }
.sp-block--left .sp-block__card { right: var(--container-pad); }

.sp-block__head {
	position: relative;
	min-height: 103px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sp-block__en {
	font-family: var(--ff-en);
	font-weight: 400;
	font-size: 50px;
	color: var(--c-text);
	line-height: 1;
}

.sp-block__catch {
	font-family: var(--ff-jp);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.6;
	color: var(--c-brand);
}

.sp-block__divider {
	width: 63px;
	height: 2px;
	background: var(--c-brand);
	margin-top: 4px;
}

.sp-block__title {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 33px;
	line-height: 1.5;
	color: var(--c-text);
}

.sp-block__desc {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.9;
	color: var(--c-text);
}

.sp-block__num {
	position: absolute;
	right: 40px;
	top: 0;
	font-family: var(--ff-en);
	font-weight: 300;
	font-size: 189px;
	line-height: 1;
	color: var(--c-bg-soft);
	pointer-events: none;
	user-select: none;
	/*
	 * Trim Cormorant SC's intrinsic leading so the visible cap-top
	 * sits flush with the box top (Chrome 133+, Safari 18.2+).
	 * Firefox falls back gracefully to the line-height:1 behavior.
	 */
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.sp-block__more {
	width: 145px;
}

.price-card {
	display: flex;
	gap: 16px;
	background: var(--c-bg-soft);
	padding: 25px;
	margin-top: 0;
}

.price-card__label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding-right: 16px;
	border-right: 1px solid var(--c-text);
	flex-shrink: 0;
}

.price-card__label-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.price-card__label-text {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 16px;
}

.price-card__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-text);
	color: var(--c-white);
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 12px;
	padding: 5px 12px;
}

.price-card__main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
}

.price-card__amount-row {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.price-card__amount {
	font-family: var(--ff-jp-serif);
	font-weight: 500;
	font-size: 56px;
	letter-spacing: -0.036em;
	line-height: 1;
	color: var(--c-text);
}

.price-card__yen {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 20px;
	color: var(--c-text);
}

.price-card__tax {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 14px;
	color: var(--c-text);
}

.price-card__note {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 14px;
	color: var(--c-text);
}

/* Reusable "詳細を見る →" / "VIEW ALL →" link */
.text-link {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 145px;
	padding: 0 5px 7px;
	border-bottom: 1px solid var(--c-brand);
	color: var(--c-brand);
	font-family: var(--ff-en);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.0625em;
}

.text-link__arrow {
	font-size: 20px;
}

/* ----------------------------------------------------------------
 * 5e. Image gallery
 * ---------------------------------------------------------------- */
.gallery-section {
	background: var(--c-white);
	padding: 120px 0 0;
	--gallery-duration: 80s;
	--gallery-item-w:   480px;
	--gallery-item-h:   322px;
}

/*
 * Marquee: track is twice the visible content width and animates from
 * 0 → -50% so the duplicate set seamlessly takes over each cycle.
 */
.gallery-marquee {
	width: 100%;
	overflow: hidden;
}

.gallery-marquee__track {
	display: flex;
	width: max-content;
	animation: gallery-scroll var(--gallery-duration) linear infinite;
}

.gallery-marquee:hover .gallery-marquee__track,
.gallery-marquee:focus-within .gallery-marquee__track {
	animation-play-state: paused;
}

.gallery-marquee__item {
	flex: 0 0 auto;
	width: var(--gallery-item-w);
	height: var(--gallery-item-h);
	overflow: hidden;
}

.gallery-marquee__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@keyframes gallery-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ----------------------------------------------------------------
 * 5f. Access
 * ---------------------------------------------------------------- */
.access-section {
	background: var(--c-white);
	padding: 100px 0;
}

.access-section__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

.access-section__header {
	border-top: 1px solid var(--c-black);
	padding: 100px var(--container-pad) 50px;
	display: flex;
	justify-content: center;
}

.access-body {
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 100%;
	padding-inline: var(--container-pad);
}

.access-map {
	background: #f0f0ec;
	border: 1px solid var(--c-line-soft);
	border-radius: 4px;
	height: 450px;
	overflow: hidden;
	width: 100%;
}

.access-map img,
.access-map iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

.access-info {
	display: flex;
	gap: 56px;
	justify-content: center;
	align-items: stretch;
}

.access-info__company {
	width: 256px;
	padding-right: 56px;
	border-right: 1px solid var(--c-black);
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 20px;
	color: var(--c-text);
}

.access-info__list {
	width: 498px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 12px 0;
	color: var(--c-text);
	font-size: 16px;
}

.access-info__row {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.access-info__label {
	width: 80px;
	flex-shrink: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
}

.access-info__value {
	font-family: var(--ff-jp);
	font-weight: 400;
	line-height: 1.8;
	flex: 1;
}

.access-info__row--tel .access-info__value {
	font-family: var(--ff-num);
}

/* ----------------------------------------------------------------
 * 5g. CTA
 * ---------------------------------------------------------------- */
.cta-section {
	position: relative;
	padding: 80px 0;
	overflow: hidden;
	isolation: isolate;
}

.cta-section__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 47px;
}

.cta-section__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.cta-section__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.73;
}

.cta-section__overlay {
	position: absolute;
	inset: 0;
	background: var(--c-cta-overlay);
	z-index: -1;
}

.cta-section__en {
	font-family: var(--ff-en);
	font-weight: 400;
	font-size: 50px;
	color: var(--c-brand);
	line-height: 1;
}

.cta-section__title {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 33px;
	color: var(--c-text);
	text-align: center;
	line-height: 1.3;
}

.cta-section__desc {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	color: var(--c-text);
	text-align: center;
	line-height: 1.9;
	max-width: 500px;
}

.cta-buttons {
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 381px;
	height: 78px;
	padding: 0 48px;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 0.0556em;
	transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.cta-button__arrow {
	font-family: var(--ff-num);
	font-size: 16px;
}

.cta-button--primary {
	background: var(--c-brand);
	color: var(--c-white);
}

.cta-button--secondary {
	background: var(--c-brand-soft);
	color: var(--c-text);
	border: 1px solid var(--c-text);
	font-weight: 500;
	font-size: 16px;
}

.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	opacity: 1;
}

/* ----------------------------------------------------------------
 * 5h. Footer
 * ---------------------------------------------------------------- */
.site-footer {
	background: var(--c-white);
	padding: 60px 0 40px;
}

.site-footer__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.site-footer__main {
	display: flex;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-footer__logo img {
	height: 40px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

.site-footer__tagline {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 14px;
	color: var(--c-text);
}

.site-footer__nav {
	display: flex;
	gap: 64px;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-footer__col li,
.site-footer__col p {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 14px;
	color: var(--c-text);
}

.site-footer__col a:hover {
	color: var(--c-brand);
	opacity: 1;
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	gap: 24px;
	flex-wrap: wrap;
}

.site-footer__copy {
	font-family: var(--ff-num);
	color: var(--c-text);
}

.site-footer__utility {
	display: flex;
	gap: 24px;
}

.site-footer__utility a {
	font-family: var(--ff-jp);
	color: var(--c-text);
	font-size: 11px;
}

/* ----------------------------------------------------------------
 * 5i. News archive / single
 * ---------------------------------------------------------------- */
.page-header {
	padding: 168px 0 60px;
	background: var(--c-white);
}

.page-header > * {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.archive-list {
	padding: 0 var(--container-pad) 100px;
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 45px;
}

.archive-list .news-card {
	width: 100%;
}

.archive-list .news-card__thumb {
	height: 0;
	padding-bottom: 65.96%;
	position: relative;
}

.archive-list .news-card__thumb img {
	position: absolute;
	inset: 0;
}

.pagination {
	padding: 0 var(--container-pad) 100px;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--c-line-soft);
	color: var(--c-text);
	font-family: var(--ff-num);
	font-size: 14px;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--c-brand);
	color: var(--c-white);
	border-color: var(--c-brand);
	opacity: 1;
}

.single-article {
	padding: 168px var(--container-pad) 100px;
	max-width: 880px;
	margin: 0 auto;
}

.single-article__meta {
	display: flex;
	gap: 13px;
	align-items: center;
	margin-bottom: 16px;
	color: var(--c-text);
}

.single-article__date {
	font-family: var(--ff-num);
	font-size: 14px;
}

.single-article__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 27px;
	min-width: 100px;
	padding: 4px 12px;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 13px;
	border-left: 1px solid var(--c-text);
	border-right: 1px solid var(--c-text);
}

.single-article__title {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.5;
	color: var(--c-text);
	margin-bottom: 32px;
}

.single-article__thumb {
	margin: 0 0 40px;
}

.single-article__thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.single-article__body {
	font-family: var(--ff-jp);
	font-size: 16px;
	line-height: 1.9;
	color: var(--c-text);
}

.single-article__body h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 48px 0 16px;
	padding-left: 16px;
	border-left: 4px solid var(--c-brand);
}

.single-article__body h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 40px 0 12px;
}

.single-article__body p {
	margin-bottom: 1.5em;
}

.single-article__body a {
	color: var(--c-brand);
	text-decoration: underline;
}

.single-article__back {
	margin-top: 60px;
	display: flex;
	justify-content: center;
}

/* ----------------------------------------------------------------
 * 5j. 404 / search
 * ---------------------------------------------------------------- */
.error-404,
.search-results-page,
.page-template-default .single-article {
	padding-top: 168px;
	padding-bottom: 100px;
}

.error-404 {
	text-align: center;
	padding-inline: var(--container-pad);
}

.error-404__code {
	font-family: var(--ff-en);
	font-size: 120px;
	line-height: 1;
	color: var(--c-brand);
}

.error-404__msg {
	font-family: var(--ff-jp);
	font-size: 18px;
	color: var(--c-text);
	margin: 24px 0 40px;
}

.search-form {
	display: flex;
	gap: 8px;
	max-width: 520px;
	margin: 0 auto 60px;
}

.search-form input[type="search"] {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--c-line-soft);
	font: inherit;
	font-size: 15px;
	color: var(--c-text);
}

.search-form button {
	background: var(--c-brand);
	color: var(--c-white);
	padding: 12px 24px;
	font-weight: 500;
	font-size: 14px;
}

.search-results-list {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 var(--container-pad);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.search-result {
	padding: 24px 0;
	border-bottom: 1px solid var(--c-line-soft);
}

.search-result__title {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 18px;
	margin-bottom: 8px;
}

.search-result__title a:hover {
	color: var(--c-brand);
	opacity: 1;
}

.search-result__type {
	font-family: var(--ff-num);
	font-size: 12px;
	color: var(--c-text-soft);
	margin-bottom: 4px;
}

.search-result__excerpt {
	font-size: 14px;
	line-height: 1.7;
	color: var(--c-text);
}

/* ----------------------------------------------------------------
 * 5k. Work / 管理業務内容 page
 * ----------------------------------------------------------------
 *  Static page based on Figma node 105:587. Two-column definition list:
 *  category label (left, bordered right) | description body (right).
 *  The first row (入居者管理) has a nested sub-list with bottom-bordered
 *  items for the 24/7 trouble types.
 *
 *  Border-block on the section is intentional (matches Figma) — separates
 *  the static info page visually from the absolute-positioned site-header
 *  above and the footer below.
 * ---------------------------------------------------------------- */
.work-section {
	background: var(--c-white);
	border-block: 1px solid var(--c-line);
	margin-top: 88px; /* clear the absolute site-header (88px tall) */
	padding: 124px 0 120px;
}

.work-section__head {
	display: flex;
	justify-content: center;
	margin-bottom: 135px;
	padding-inline: var(--container-pad);
}

/* Figma infoList: w-[1132px] centered inside px-[120] container —
   compute max so the inner content area is exactly 1132 at desktop. */
.work-list {
	max-width: calc(1132px + 2 * var(--container-pad));
	margin: 0 auto;
	padding-inline: var(--container-pad);
	display: flex;
	flex-direction: column;
	gap: 47px;
}

.work-row {
	display: flex;
	gap: 21px;
	align-items: stretch;
}

/* The 21px between label and value is the row's flex gap (Figma).
   No internal padding-right on the label cell. */
.work-row__label {
	flex-shrink: 0;
	width: 200px;
	border-right: 1px solid var(--c-text);
	margin: 0;
}

.work-row__label-text {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.8;
	color: var(--c-text);
	white-space: nowrap;
}

.work-row__body {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.9;
	color: var(--c-text);
}

.work-row__body p {
	margin: 0;
}

.work-trouble-list {
	margin-top: 17px;
	padding-left: 38px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
}

.work-trouble-list__item {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--c-text);
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
	color: var(--c-text);
}

.work-trouble-list__item:last-child {
	border-bottom: 0;
}

/* ----------------------------------------------------------------
 * 5l. Plan / 賃貸管理プラン page
 * ----------------------------------------------------------------
 *  Static page based on Figma node 81:311 ("UNIONEST_01PLAN").
 *  All sizes match the Figma frame (1440px-wide artboard) verbatim.
 *
 *    plan-hero     full-bleed photo + 0.8-opacity white panel.
 *                  The bg image is positioned with the exact Figma
 *                  crop offsets (214.33% h, -70.27% top, etc.) so
 *                  the visible window matches the design.
 *    plan-content  white body wrapping the rest of the page.
 *    plan-lead     centered brand catchcopy with a 2px brand
 *                  bottom rule directly below the text.
 *    plan-fee      white card (padding 70, gap 53) with a mixed-
 *                  size title (33/28/56/28/22 px) and a 953-wide
 *                  desc + notes block.
 *    plan-reasons  dedicated header (25 + 33 px, moji colour) +
 *                  3 rows: text col 373 (number pinned bottom-right
 *                  with mixed 26 + 45 px brand-blue serif type) |
 *                  placeholder media 792×487 #d9d9d9.
 *  Reason media are intentional grey placeholders — the Figma
 *  design ships them empty (real photos not yet supplied).
 * ---------------------------------------------------------------- */
.plan-hero {
	position: relative;
	width: 100%;
	height: 480px;
	margin-top: 88px; /* clear the absolute site-header (88px tall) */
	overflow: hidden;
	isolation: isolate;
}

.plan-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
}

/* Cover-fill the hero, keeping the photo's aspect ratio. The
   object-position approximates Figma's crop (balcony interior,
   focus slightly below centre) but survives any viewport shape. */
.plan-hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 56%;
}

.plan-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.plan-hero__panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 50px 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
	background: rgba(255, 255, 255, 0.8);
	text-align: center;
	white-space: nowrap;
}

.plan-hero__en {
	font-family: var(--ff-en);
	font-size: 70px;
	line-height: 1;
	color: var(--c-text);
}

.plan-hero__jp {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 30px;
	letter-spacing: 2px;
	line-height: 1;
	color: var(--c-text);
}

/* Body wrapper — kept as a hook even though it currently has no
   background of its own; section backgrounds are white per Figma. */
.plan-content {
	background: var(--c-bg-soft); /* #E1EAEE — matches Figma page background */
}

/* ---- Lead catchcopy ---- */
.plan-lead {
	display: flex;
	justify-content: center;
	padding: 90px var(--container-pad) 0;
}

.plan-lead__text {
	margin: 0;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--c-brand);
	font-family: var(--ff-jp);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.6;
	color: var(--c-brand);
	text-align: center;
}

/* ---- Fee statement ---- */
.plan-fee {
	padding: 88px var(--container-pad) 0;
}

.plan-fee__card {
	max-width: 1093px;
	margin-inline: auto;
	padding: 70px;
	background: var(--c-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 53px;
	text-align: center;
	color: var(--c-text);
}

.plan-fee__title {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 33px;
	line-height: 1.5;
}

.plan-fee__amount {
	margin: 8px 0 0;
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0;
	color: var(--c-text);
	line-height: 1.5;
}

.plan-fee__amount-lead {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 28px;
}

.plan-fee__amount-num {
	font-family: var(--ff-jp-serif);
	font-weight: 500;
	font-size: 56px;
	line-height: 1.5;
	margin: 0 2px;
}

.plan-fee__amount-yen {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 28px;
}

.plan-fee__amount-tax {
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 22px;
}

/*
 * Title and amount sit together as one block (gap collapsed); the
 * 53px Figma gap is between the title block and the desc/notes
 * block below — reset the desc top margin since the flex gap on
 * .plan-fee__card handles it.
 */
.plan-fee__title + .plan-fee__amount {
	margin-top: 0; /* baseline-aligned via line-height 1.5 like Figma */
}

.plan-fee__desc {
	width: 100%;
	max-width: 953px;
	margin: 0;
	text-align: left;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.9;
	color: var(--c-text);
}

.plan-fee__notes {
	width: 100%;
	max-width: 953px;
	margin: -28px 0 0; /* tighten 53px gap to ~25px between desc and notes */
	text-align: left;
}

.plan-fee__notes p {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.9;
	color: var(--c-text);
}

/* ---- Reasons ---- */
.plan-reasons {
	padding: 117px 0 150px;
}

.plan-reasons__head {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--container-pad);
	color: var(--c-text);
}

.plan-reasons__head-en {
	margin: 0;
	font-family: var(--ff-en);
	font-size: 25px;
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.plan-reasons__head-jp {
	margin: 11px 0 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 33px;
	line-height: 1.5;
}

.plan-reasons__list {
	max-width: 1240px;
	margin: 70px auto 0;
	padding-inline: var(--container-pad);
}

.plan-reason {
	position: relative;
	display: flex;
	gap: 75px;
	align-items: flex-start;
	border-top: 1px solid var(--c-line);
	padding-top: 70px;
	padding-bottom: 0;
}

.plan-reason + .plan-reason {
	margin-top: 70px;
}

.plan-reason__text {
	flex: none;
	width: 373px;
	min-height: 487px;
	display: flex;
	flex-direction: column;
}

.plan-reason__title {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.7;
	color: var(--c-brand);
}

.plan-reason__desc {
	margin: 22px 0 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.9;
	color: var(--c-text);
}

/* Number: right-aligned within the 373px text column, pinned to
   the bottom of the 487px media height. "REASON " 26px + "01" 45px,
   baseline-aligned, leading trimmed (Figma uses text-box-trim). */
.plan-reason__num {
	margin: auto 0 0;
	align-self: flex-end;
	padding-top: 24px;
	display: inline-flex;
	align-items: baseline;
	color: var(--c-brand);
	font-family: var(--ff-en);
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	white-space: nowrap;
}

.plan-reason__num-label {
	font-size: 26px;
}

.plan-reason__num-digit {
	font-size: 45px;
}

.plan-reason__media {
	flex: 1;
	min-width: 0;
}

.plan-reason__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Shown until the exported diagram PNG is dropped into assets/images/. */
.plan-reason__media--placeholder {
	height: 487px;
	background: #d9d9d9;
}

/* Reason diagrams rebuilt from Figma as scalable inline SVG (node 81:543 et al). */
.reason-figure {
	margin: 0;
	width: 100%;
	max-width: 743px;
}

.reason-figure__svg {
	display: block;
	width: 100%;
	height: auto;
}

.reason-figure__labels text {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 18px;
	fill: var(--c-brand);
}

/* Reason diagrams delivered as exported transparent PNGs (.plan-reason__media img
   already sets the responsive block/width rules above). */
.plan-reason__media--img {
	max-width: 743px;
}

/* REASON 02 ships as two stacked diagrams (電子契約 / 入金管理) cut from one
   Figma frame; the lower one is narrower, so scale it down to keep a single
   shared px-per-unit (1354 / 1450 of the upper image's width). */
.plan-reason__media--stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
}

.plan-reason__media--stack img:nth-child(2) {
	width: 93.4%;
}

/* First reason: hold so the REASONS heading lands first. */
.plan-reasons__list > .plan-reason[data-reveal]:first-child {
	transition-delay: 700ms;
}

/* ----------------------------------------------------------------
 * 5m. Leasing / リーシング page
 * ----------------------------------------------------------------
 *  Static page based on Figma node 102:208 ("UNIONEST_02LEASING").
 *  Shares the title-hero + lead-catchcopy pattern with the plan
 *  page; the body diverges:
 *
 *    leasing-hero    full-bleed photo + 0.8-opacity white panel
 *                    ("LEASING" 70px / 高入居率 30px).
 *    leasing-lead    centered brand catchcopy + 2px brand rule.
 *    leasing-sections   max-1240 stack of bottom-bordered sections.
 *    leasing-section    head (33px moji title + 18px desc) above body.
 *                       padding-block 70/70, border-bottom 1px moji.
 *    leasing-card    white sub-card (padding 70, gap 50): brand-blue
 *                    25px bold title + 18px desc + a .doc-download
 *                    card for the 相場表 / コンペア式査定表 preview.
 *    leasing-gallery 3 × 420×300 photo row inside a 1240 clipped
 *                    viewport, arrow buttons either side.
 *    (レポーティング preview also uses a shared .doc-download card.)
 *    leasing-more    145-wide brand-bottom-ruled "管理物件写真 →" link.
 * ---------------------------------------------------------------- */
.leasing-hero {
	position: relative;
	width: 100%;
	height: 480px;
	margin-top: 88px; /* clear the 88px absolute site-header */
	overflow: hidden;
	isolation: isolate;
}

.leasing-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

/* Aspect-preserving cover fill (Figma showed a tight crop of the
   room interior; object-position keeps roughly the same focal area). */
.leasing-hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 54%;
}

.leasing-hero__panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 50px 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
	background: rgba(255, 255, 255, 0.8);
	text-align: center;
	white-space: nowrap;
}

.leasing-hero__en {
	font-family: var(--ff-en);
	font-size: 70px;
	line-height: 1;
	color: var(--c-text);
}

.leasing-hero__jp {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 30px;
	letter-spacing: 2px;
	line-height: 1;
	color: var(--c-text);
}

/* Body wrapper: light-blue page band so white cards (& the lead rule)
   read distinctly against it, matching the Figma render. */
.leasing-content {
	background: var(--c-bg-soft);
}

/* ---- Lead catchcopy (shared pattern with plan-lead) ---- */
.leasing-lead {
	display: flex;
	justify-content: center;
	padding: 90px var(--container-pad) 0;
}

.leasing-lead__text {
	margin: 0;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--c-brand);
	font-family: var(--ff-jp);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.6;
	color: var(--c-brand);
	text-align: center;
}

/* ---- Sections wrapper ---- */
.leasing-sections {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.leasing-section {
	display: flex;
	flex-direction: column;
	gap: 65px;
	padding-block: 70px;
	border-bottom: 1px solid var(--c-line);
}

/* Figma 賃貸条件査定 has padding-bottom only (the catchcopy gap
   above supplies the breathing room). */
.leasing-section--first {
	padding-top: 0;
	margin-top: 89px; /* catchcopy bottom → first section top */
}

/* Extra breathing room before the footer — the plain 70px felt
   abrupt with no border to close the section. */
.leasing-section--last {
	border-bottom: 0;
	padding-bottom: 140px;
}

.leasing-section__head {
	display: flex;
	flex-direction: column;
	gap: 25px;
	color: var(--c-text);
}

.leasing-section__title {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 33px;
	line-height: 1.5;
	color: var(--c-text);
}

.leasing-section__desc,
.leasing-section__desc p {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.9;
	color: var(--c-text);
}

.leasing-section__desc > * + * {
	margin-top: 0; /* paragraphs are flush — Figma's leading 1.9 carries them */
}

.leasing-section__body {
	width: 100%;
}

/* ---- Sub-cards (賃貸条件査定) ---- */
.leasing-cards {
	display: flex;
	flex-direction: column;
	gap: 63px;
}

.leasing-card {
	width: 100%;
	background: var(--c-white);
	padding: 70px;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.leasing-card--center {
	align-items: center;
}

.leasing-card--start {
	align-items: flex-start;
}

.leasing-card__head {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.leasing-card__title {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.7;
	color: var(--c-brand);
}

.leasing-card__desc {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.9;
	color: var(--c-text);
}

/* The 相場表 / コンペア式査定表 previews are rendered as shared
   .doc-download cards (see section 5p) — no dedicated media box. */

/* ---- Gallery (写真撮影) ---- */
.leasing-gallery {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
}

.leasing-gallery__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.leasing-gallery__track {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.leasing-gallery__track::-webkit-scrollbar { display: none; }

.leasing-gallery__item {
	flex: 0 0 420px;
	width: 420px;
	height: 300px;
	scroll-snap-align: start;
	overflow: hidden;
}

.leasing-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Figma: a 37×37 box — 1px moji border over a 70%-white fill —
   with the weui chevron centered inside. */
.leasing-gallery__nav {
	flex: none;
	width: 37px;
	height: 37px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--c-line);
	padding: 0;
	color: var(--c-text);
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

.leasing-gallery__nav:hover {
	background: var(--c-white);
	border-color: var(--c-brand);
	color: var(--c-brand);
}

.leasing-gallery__nav:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* weui:arrow-outlined — thin, sharp chevron (10×19 vector). */
.leasing-gallery__nav-icon {
	display: block;
}

/* Sit close to the photo strip (Figma places the arrows right at
   the carousel edges). */
.leasing-gallery__nav--prev { margin-right: 8px; }
.leasing-gallery__nav--next { margin-left: 8px; }

/* ---- "管理物件写真 →" link (centered under the gallery) ---- */
.leasing-more {
	margin: 59px auto 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 145px;
	padding: 0 5px 7px;
	border-bottom: 1px solid var(--c-brand);
	color: var(--c-brand);
	text-decoration: none;
	transition: opacity var(--dur-fast) var(--ease);
}

.leasing-more:hover { opacity: 0.7; }

.leasing-more__label {
	font-family: var(--ff-en);
	font-weight: 500;
	font-size: 17px;
	letter-spacing: 1px;
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.leasing-more__arrow {
	font-family: var(--ff-num);
	font-size: 16px;
	line-height: 1.375; /* matches Figma h=22 / fs=16 */
}

/* The レポーティング preview is rendered as a shared .doc-download
   card (see section 5p). */

/* First section: hold so the lead catchcopy lands first. */
.leasing-sections > .leasing-section[data-reveal]:first-child {
	transition-delay: 700ms;
}

/* ----------------------------------------------------------------
 * 5n. Value Up / バリューアップ page
 * ----------------------------------------------------------------
 *  Static page based on Figma node 121:824 ("UNIONEST_03Value Up").
 *
 *    valueup-hero      full-bleed photo + 0.8 white panel
 *                      ("VALUE UP" 70px / 収益最大化提案 30px).
 *    valueup-lead      1240×350 callout: bg photo + 0.7 white overlay
 *                      + 3-line message (33px) with brand-accent spans
 *                      + 795px brand divider line at top:204.
 *    valueup-section   shares the leasing-section layout principle:
 *                      header (33px moji title + 18px desc) + body,
 *                      padding-block 70/70, border-bottom 1px moji.
 *                      --compact halves the head-body gap (25 vs 65).
 *    valueup-ba        BEFORE/AFTER pair: two 579-wide columns with
 *                      28.9px Cormorant SC tags (moji / brand bottom
 *                      border) and a 33px right-pointing arrow column.
 *    valueup-cases     white card (p 70, gap 50) wrapping a 6-card
 *                      3-column grid (340 wide cards w/ image, moji
 *                      bottom rule, 18px black caption) + brand "もっと
 *                      見る →" link, right-aligned.
 *    (運用提案・建物管理費削減提案の資料プレビューは shared .doc-download カード)
 * ---------------------------------------------------------------- */
.valueup-hero {
	position: relative;
	width: 100%;
	height: 480px;
	margin-top: 88px; /* clear the 88px absolute site-header */
	overflow: hidden;
	isolation: isolate;
}

.valueup-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

/* Aspect-preserving cover fill (Figma framed a tight interior crop;
   object-position keeps roughly the same focal area at any viewport). */
.valueup-hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 53% 54%;
}

.valueup-hero__panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 50px 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
	background: rgba(255, 255, 255, 0.8);
	text-align: center;
	white-space: nowrap;
}

.valueup-hero__en {
	font-family: var(--ff-en);
	font-size: 70px;
	line-height: 1;
	color: var(--c-text);
}

.valueup-hero__jp {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 30px;
	letter-spacing: 2px;
	line-height: 1;
	color: var(--c-text);
}

/* Figma Frame 121:850 — full page band (#e1eaee) behind hero gap + sections. */
.valueup-band {
	background: var(--c-bg-soft);
}

/* Body band — light blue (#e1eaee). Top padding is the Figma 109px gap
   below the hero; use padding (not lead margin-top) so the band paints blue
   instead of collapsing into white body background above .valueup-content. */
.valueup-content {
	background: transparent;
	padding-top: 109px;
}

/* ---- Lead callout (Figma 162:959 — 1240×350) ---- */
.valueup-lead {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	height: 350px;
	overflow: hidden;
	isolation: isolate;
}

.valueup-lead__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.valueup-lead__bg img {
	position: absolute;
	width: 108.72%;
	height: 288.89%;
	max-width: none;
	left: -4.36%;
	top: -94.52%;
}

.valueup-lead__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(255, 255, 255, 0.7);
}

/* 795px brand divider line, centered. Figma node 162:957 — y=204
   within the 1240×350 callout, between line 2 and line 3 of the message. */
.valueup-lead__line {
	position: absolute;
	top: 204px;
	left: 208px;
	transform: none;
	width: 795px;
	max-width: calc(100% - 80px);
	height: 1px;
	background: var(--c-brand);
	z-index: 3;
}

.valueup-lead__body {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 73px 40px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--c-text);
}

.valueup-lead__text {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 33px;
	line-height: 2.06;
}

.valueup-lead__accent {
	color: var(--c-brand);
	font-weight: 500;
}

/* ---- Sections wrapper ---- */
.valueup-sections {
	max-width: 1240px;
	margin: 49px auto 0;
	padding: 0 var(--container-pad);
}

.valueup-section {
	display: flex;
	flex-direction: column;
	gap: 65px;
	padding-block: 70px;
	border-bottom: 1px solid var(--c-line);
}

.valueup-section--last {
	border-bottom: 0;
}

.valueup-section--compact {
	gap: 25px;
}

.valueup-section__head {
	display: flex;
	flex-direction: column;
	gap: 25px;
	color: var(--c-text);
}

.valueup-section__title {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 33px;
	line-height: 1.5;
	color: var(--c-text);
}

.valueup-section__desc,
.valueup-section__desc p {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.9;
	color: var(--c-text);
}

.valueup-section__body {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 63px;
}

/* ---- BEFORE / AFTER pair ---- */
.valueup-ba {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 24px;
}

.valueup-ba__col {
	flex: 1 1 0;
	min-width: 0;
	max-width: 579.5px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 25px;
}

.valueup-ba__tag {
	margin: 0;
	padding: 0 0 12.5px;
	font-family: var(--ff-en);
	font-weight: 500;
	font-size: 28.918px;
	line-height: 1;
	text-align: center;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.valueup-ba__tag--before {
	color: var(--c-text);
	border-bottom: 1px solid var(--c-text); /* Figma 0.964px → round to 1 */
}

.valueup-ba__tag--after {
	color: var(--c-brand);
	border-bottom: 1px solid var(--c-brand);
}

.valueup-ba__media {
	width: 100%;
	height: 400px;
	overflow: hidden;
}

.valueup-ba__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.valueup-ba__arrow {
	flex: none;
	width: 33px;
	height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text);
}

.valueup-ba__arrow svg {
	display: block;
}

/* ---- リフォーム事例 white card ---- */
.valueup-cases {
	width: 100%;
	background: var(--c-white);
	padding: 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

.valueup-cases__title {
	margin: 0;
	width: 100%;
	font-family: var(--ff-jp);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.7;
	color: var(--c-brand);
	text-align: left;
}

.valueup-cases__grid {
	width: 100%;
	max-width: 1100px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 63px 40px;
}

.valueup-case {
	margin: 0;
	width: 100%;
	max-width: 340px;
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 27px;
	padding-bottom: 27px;
	border-bottom: 1px solid var(--c-text);
	background: var(--c-white);
}

.valueup-case__media {
	width: 100%;
	aspect-ratio: 456 / 349;
	overflow: hidden;
}

.valueup-case__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.valueup-case__media--placeholder {
	background: #c4c4c4;
}

.valueup-case__caption {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.7;
	color: var(--c-black);
	text-align: center;
}

.valueup-cases__more {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	padding-top: 28px;
}

.valueup-more {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 145px;
	padding: 0 5px 7px;
	border-bottom: 1px solid var(--c-brand);
	color: var(--c-brand);
	text-decoration: none;
	transition: opacity var(--dur-fast) var(--ease);
}

.valueup-more:hover { opacity: 0.7; }

.valueup-more__label {
	font-family: var(--ff-en);
	font-weight: 500;
	font-size: 17px;
	letter-spacing: 1px;
	line-height: 1;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.valueup-more__arrow {
	font-family: var(--ff-num);
	font-size: 16px;
	line-height: 1.375;
}

/* 運用提案・建物管理費削減提案の資料プレビューは shared .doc-download
   カード（section 5p）を使用。 */

/* ----------------------------------------------------------------
 * Reform examples archive (/category/reform/).
 * Reuses .valueup-cases__grid / .valueup-case cards.
 * ---------------------------------------------------------------- */
.reform-archive {
	background: var(--c-white);
	padding: 80px 0 120px;
}

.reform-archive__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.reform-grid {
	margin-inline: auto;
}

.reform-card {
	text-decoration: none;
	color: inherit;
	transition: opacity var(--dur-base) var(--ease);
}

.reform-card:hover {
	opacity: 0.82;
}

.reform-archive__empty {
	padding: 60px 0;
	text-align: center;
	font-family: var(--ff-jp);
	font-size: 16px;
	line-height: 1.9;
	color: var(--c-text);
}

.reform-archive__empty-link {
	color: var(--c-brand);
	text-decoration: none;
	border-bottom: 1px solid var(--c-brand);
}

.reform-archive__empty-link:hover {
	opacity: 0.7;
}

/* First section: hold so the lead callout lands first. */
.valueup-sections > .valueup-section[data-reveal]:first-child {
	transition-delay: 700ms;
}

/* ----------------------------------------------------------------
 * 5o. Contact / お問合せ page
 * ----------------------------------------------------------------
 *  Static page based on Figma node 79:2 ("UNIONEST_inquiry").
 *  Built around Contact Form 7 — the form template lives in CF7
 *  admin (see comment at bottom of page-contact.php), pasted into
 *  the page body as `[contact-form-7 id="…"]`. This stylesheet
 *  targets both our row wrappers (.contact-form__*) and the CF7
 *  output classes (.wpcf7-form-control, .wpcf7-list-item, etc.)
 *  so it works without any plugin modification.
 *
 *    contact-hero    full-width #e1eaee band; building photo masked
 *                    at top with a soft fade-out into the bg.
 *                    Centered CONTACT US (50px brand) + title (33px)
 *                    + 2-line desc (18px).
 *    contact-body    same bg, wraps the form card.
 *    contact-card    centered white card 925×auto, padding 50, gap 40
 *                    between rows. Renders the_content().
 *    contact-form__row   825-wide row, label flex (text + 必須 badge
 *                        16px Noto Medium #6a593f / brown #a68b62)
 *                        + field column 600 wide (140 for file).
 *    contact-form__input  bg #f4f4f5, border 1px #e1e1e1, h52, px14.
 *    contact-form__radios brand-circled radios, gap 24, labels 16px.
 *    contact-form__file   file-selector-button styled as 140×52 dark
 *                         charcoal #4a4a5a button "ファイルを選択".
 *    contact-form__submit 248-wide brand #5b96b4 button (28×95) with
 *                         white "送信 →" 18px.
 * ---------------------------------------------------------------- */
.contact-hero {
	position: relative;
	margin-top: 88px; /* clear the 88px absolute site-header */
	padding: 110px var(--container-pad) 70px;
	background: var(--c-bg-soft);
	overflow: hidden;
	isolation: isolate;
}

.contact-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Top photo fading out — approximates Figma's SVG mask + gradient
   stack with a CSS mask so the building photo dissolves into the
   page bg around 60% of the hero height. */
.contact-hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 35%; /* favor the upper portion (building tops) */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* Cyan-tinted veil over the photo, matching Figma:
   rgba(214,241,253,0.86) at 36% → #e1eaee at 100%. */
.contact-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom,
			rgba(214, 241, 253, 0.86) 0%,
			rgba(214, 241, 253, 0.86) 36%,
			var(--c-bg-soft) 100%);
}

.contact-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	color: var(--c-text);
}

.contact-hero__en {
	margin: 0;
	font-family: var(--ff-en);
	font-size: 50px;
	line-height: 1;
	color: var(--c-brand);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.contact-hero__title {
	margin: 66px 0 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 33px;
	line-height: 1.4;
	color: var(--c-text);
}

.contact-hero__desc {
	margin: 22px 0 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.9;
	color: var(--c-text);
}

/* ---- Body wrapper + form card ---- */
.contact-body {
	background: var(--c-bg-soft);
	padding: 0 var(--container-pad) 88px;
}

.contact-card {
	max-width: 925px;
	margin: 0 auto;
	padding: 50px;
	background: var(--c-white);
}

/* Strip wpautop's empty <p> wrappers that can appear around the
   CF7 shortcode in the_content(). */
.contact-card > p:empty { display: none; }

/* CF7's outer form: remove default margins; rows control spacing. */
.contact-card .wpcf7-form {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.contact-card .wpcf7-form > p { margin: 0; } /* fallback if autop sneaks back */

/* ---- Form rows ---- */
.contact-form__row {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 825px;
	margin: 0 auto;
}

.contact-form__row--textarea { align-items: flex-start; }
.contact-form__row--file     { gap: 112px; }

.contact-form__label {
	flex: none;
	width: 225px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.contact-form__label-text {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.75;
	color: #6a593f;
}

.contact-form__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 5px;
	background: #a68b62;
	color: var(--c-white);
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
}

.contact-form__field {
	flex: 1;
	min-width: 0;
	max-width: 600px;
}

.contact-form__row--file .contact-form__field { max-width: 140px; }

/* ---- Inputs (text / email / tel) ---- */
.contact-form__input,
.contact-card .wpcf7-form-control.contact-form__input {
	display: block;
	width: 100%;
	height: 52px;
	padding: 0 14px;
	background: #f4f4f5;
	border: 1px solid #e1e1e1;
	border-radius: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.9;
	color: var(--c-text);
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.contact-form__input::placeholder { color: #a8a8a8; }
.contact-form__input:focus {
	outline: none;
	border-color: var(--c-brand);
	background: var(--c-white);
}

/* ---- Textarea ---- */
.contact-form__textarea,
.contact-card .wpcf7-form-control.contact-form__textarea {
	display: block;
	width: 100%;
	height: 236px;
	padding: 12px 14px;
	background: #f4f4f5;
	border: 1px solid #e1e1e1;
	border-radius: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.9;
	color: var(--c-text);
	resize: vertical;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.contact-form__textarea:focus {
	outline: none;
	border-color: var(--c-brand);
	background: var(--c-white);
}

/* ---- Radios (CF7 wraps each option in <span.wpcf7-list-item><label>) ---- */
.contact-card .wpcf7-form-control.contact-form__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.contact-card .wpcf7-list-item {
	margin: 0;
}

.contact-card .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.9;
	color: var(--c-text);
}

.contact-card .wpcf7-list-item input[type="radio"] {
	flex: none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--c-text);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	transition: border-color var(--dur-fast) var(--ease);
}

.contact-card .wpcf7-list-item input[type="radio"]::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-brand);
	transform: scale(0);
	transition: transform var(--dur-fast) var(--ease);
}

.contact-card .wpcf7-list-item input[type="radio"]:checked {
	border-color: var(--c-brand);
}

.contact-card .wpcf7-list-item input[type="radio"]:checked::before {
	transform: scale(1);
}

/* ---- File upload ---- */
.contact-form__file,
.contact-card .wpcf7-form-control.contact-form__file {
	display: block;
	width: 100%;
	font-family: var(--ff-jp);
	font-size: 0; /* hide the "No file chosen" text since the design omits it */
	color: transparent;
}

.contact-form__file::-webkit-file-selector-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 52px;
	padding: 0 14px;
	background: #4a4a5a;
	border: 0;
	color: var(--c-white);
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.9;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease);
}

.contact-form__file::file-selector-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 52px;
	padding: 0 14px;
	background: #4a4a5a;
	border: 0;
	color: var(--c-white);
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.9;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease);
}

.contact-form__file::-webkit-file-selector-button:hover { background: #6a6a78; }
.contact-form__file::file-selector-button:hover         { background: #6a6a78; }

/* The selected file name — show beside the button when a file is
   chosen. Use a sibling pseudo via attribute? Browsers don't support
   that; native :file-selector + filename is a single control. We
   re-enable text colour just for the filename region using a small
   trick: set the input's font-size back via padding-inline. */
.contact-form__file {
	padding-left: 0;
}

/* ---- Submit button ---- */
.contact-form__submit {
	display: flex;
	justify-content: center;
	margin-top: 50px;
}

.contact-form__submit-btn,
.contact-card .wpcf7-form-control.contact-form__submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 248px;
	padding: 28px 40px;
	background: var(--c-brand);
	border: 0;
	border-radius: 0;
	color: var(--c-white);
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	transition: background-color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease);
}

.contact-form__submit-btn:hover { background: #4e85a0; }
.contact-form__submit-btn:active { transform: translateY(1px); }

/* CF7 ajax spinner — place to the right of the button. */
.contact-card .wpcf7-spinner {
	margin: 0 0 0 16px;
}

/* CF7 validation messages (per-field). */
.contact-card .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #d63638;
	font-size: 13px;
}

/* CF7 response panel (success/error summary after submit). */
.contact-card .wpcf7-response-output {
	margin: 24px auto 0;
	padding: 12px 16px;
	border: 1px solid var(--c-text);
	font-family: var(--ff-jp);
	font-size: 14px;
	line-height: 1.7;
	color: var(--c-text);
	background: var(--c-white);
	text-align: center;
}

.contact-card form.invalid .wpcf7-response-output,
.contact-card form.unaccepted .wpcf7-response-output { border-color: #d63638; color: #d63638; }
.contact-card form.sent      .wpcf7-response-output { border-color: var(--c-brand); color: var(--c-brand); }

/* ----------------------------------------------------------------
 * 5p. Document download card (shared)
 * ----------------------------------------------------------------
 *  Used by the leasing tables (相場表 / コンペア式査定表 / レポート)
 *  and the value-up cost table. Renders a shrunken, shadowed preview
 *  of a table/document image above a brand-blue download button; the
 *  whole card is one <a download> link to the PDF.
 *  Markup: template-parts/doc-download.php
 * ---------------------------------------------------------------- */
/* Block-level + margin-inline:auto so the card centers in every
   context (left-aligned cards, section bodies, flex columns alike). */
.doc-download {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	width: 100%;
	max-width: 460px;
	margin-inline: auto;
	text-decoration: none;
	color: inherit;
}

.doc-download__thumb {
	position: relative;
	display: block;
	background: var(--c-white);
	border: 1px solid var(--c-line-soft);
	box-shadow: 0 10px 30px rgba(74, 74, 90, 0.16);
	transition:
		box-shadow var(--dur-base) var(--ease),
		transform var(--dur-base) var(--ease);
}

.doc-download__thumb img {
	display: block;
	max-width: 100%;
	max-height: 560px;
	width: auto;
	height: auto;
}

/* Zoom badge over the thumbnail — the click-to-enlarge affordance. */
.doc-download__zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(91, 150, 180, 0.92);
	color: var(--c-white);
	opacity: 0;
	transform: scale(0.9);
	transition:
		opacity var(--dur-base) var(--ease),
		transform var(--dur-base) var(--ease);
}

.doc-download__hint {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--c-brand);
}

/* Hover: lift the preview, deepen the shadow, reveal the zoom badge. */
.doc-download:hover .doc-download__thumb,
.doc-download:focus-visible .doc-download__thumb {
	box-shadow: 0 18px 44px rgba(74, 74, 90, 0.26);
	transform: translateY(-4px);
}

.doc-download:hover .doc-download__zoom,
.doc-download:focus-visible .doc-download__zoom {
	opacity: 1;
	transform: scale(1);
}

.doc-download:hover .doc-download__hint {
	opacity: 0.7;
}

.doc-download:focus-visible {
	outline: 2px solid var(--c-brand);
	outline-offset: 4px;
}

/* ----------------------------------------------------------------
 * Leasing — clickable figure (営業活動 broker-sales diagram).
 * Full-bleed image that opens its full-size file in a new tab.
 * ---------------------------------------------------------------- */
.leasing-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	text-decoration: none;
	color: var(--c-brand);
}

.leasing-figure__media {
	position: relative;
	display: block;
	width: 100%;
	max-width: 900px;
}

.leasing-figure__media img {
	display: block;
	width: 100%;
	height: auto;
}

.leasing-figure__zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(91, 150, 180, 0.92);
	color: var(--c-white);
	opacity: 0;
	transform: scale(0.9);
	transition:
		opacity var(--dur-base) var(--ease),
		transform var(--dur-base) var(--ease);
}

.leasing-figure__hint {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--c-brand);
}

.leasing-figure:hover .leasing-figure__zoom,
.leasing-figure:focus-visible .leasing-figure__zoom {
	opacity: 1;
	transform: scale(1);
}

.leasing-figure:hover .leasing-figure__hint {
	opacity: 0.7;
}

.leasing-figure:focus-visible {
	outline: 2px solid var(--c-brand);
	outline-offset: 4px;
}

/* ----------------------------------------------------------------
 * 5q. News archive page (archive-news.php)
 * ----------------------------------------------------------------
 *  Editorial-style archive: a soft-blue NEWS hero band on top, a
 *  centered row of category chips, and the existing 4-up
 *  .archive-list grid on white below. Also covers term archives
 *  (news_category / news_tag).
 * ---------------------------------------------------------------- */
.news-hero {
	margin-top: 88px; /* clear absolute site-header */
	padding: 88px var(--container-pad) 64px;
	background: var(--c-bg-soft);
}

.news-hero__inner {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
	color: var(--c-text);
}

.news-hero__en {
	margin: 0;
	font-family: var(--ff-en);
	font-size: 50px;
	line-height: 1;
	color: var(--c-brand);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.news-hero__jp {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 0.0625em;
	line-height: 1.5;
	color: var(--c-text);
}

.news-hero__back {
	margin: 6px 0 0;
}

.news-hero__back a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	font-family: var(--ff-jp);
	font-size: 13px;
	color: var(--c-brand);
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease);
}

.news-hero__back a:hover { border-bottom-color: var(--c-brand); }

.news-hero__back-arrow { font-family: var(--ff-num); }

.news-archive { background: var(--c-white); }

/* ---- Category filter chips ---- */
.news-filters {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 56px var(--container-pad) 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 12px;
}

.news-filters__chip {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 20px;
	background: var(--c-white);
	border: 1px solid var(--c-line-soft);
	color: var(--c-text);
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	transition:
		background var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

.news-filters__chip:hover {
	background: var(--c-bg-soft);
	border-color: var(--c-brand);
	color: var(--c-brand);
}

.news-filters__chip.is-active {
	background: var(--c-brand);
	border-color: var(--c-brand);
	color: var(--c-white);
}

/* Space between filter row and the grid. */
.news-archive .archive-list { margin-top: 48px; }

/* ---- External-link badge on the thumb (archive only) ---- */
.news-card__external {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--c-line-soft);
	color: var(--c-text);
	transition:
		background var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease);
}

.news-card:hover .news-card__external {
	background: var(--c-brand);
	border-color: var(--c-brand);
	color: var(--c-white);
}

/* ---- Empty state ---- */
.news-archive__empty {
	max-width: 720px;
	margin: 0 auto;
	padding: 80px var(--container-pad) 120px;
	text-align: center;
}

.news-archive__empty-text {
	margin: 0 0 16px;
	font-family: var(--ff-jp);
	font-size: 16px;
	line-height: 1.8;
	color: var(--c-text);
}

.news-archive__empty-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--c-brand);
	font-family: var(--ff-jp);
	font-size: 14px;
	color: var(--c-brand);
	text-decoration: none;
}

/* ----------------------------------------------------------------
 * 6. Responsive
 * ---------------------------------------------------------------- */
@media (max-width: 1280px) {
	.news-section__inner { gap: 80px; }

	.sp-block__image { width: 60%; }
	.sp-block__card { width: 55%; padding: 40px; }
	.sp-block--right .sp-block__card { left: 40px; }
	.sp-block--left .sp-block__card { right: 40px; }
	.sp-block__num { font-size: 140px; right: 40px; }
}

@media (max-width: 960px) {
	:root { --container-pad: 24px; }

	/* Header */
	.site-header__inner { padding: 16px 24px; }
	.site-nav__menu { display: none; }
	.site-nav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		color: var(--c-brand);
	}
	.site-nav.is-open .site-nav__menu {
		display: flex;
		flex-direction: column;
		gap: 24px;
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		background: var(--c-white);
		padding: 24px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	}

	/* Hero */
	.hero { height: 560px; }
	.hero__content { left: 24px; right: 24px; bottom: 80px; }
	.hero__title { font-size: 28px; letter-spacing: 0.18em; }

	/* News */
	.news-section { padding-block: 60px; }
	.news-section__inner { flex-direction: column; gap: 32px; }
	.news-section__header { width: 100%; min-height: auto; flex-direction: row; justify-content: space-between; }
	.news-list { flex-wrap: nowrap; overflow-x: auto; gap: 24px; padding-bottom: 16px; -webkit-overflow-scrolling: touch; }
	.news-card { width: 240px; }

	/* Service */
	.service-section { padding: 60px 0; }
	.service-section__header { padding-bottom: 24px; margin-bottom: 56px; }
	.sp-block { height: auto; margin-bottom: 72px; }
	.sp-block__image { position: relative; width: 100%; height: 220px; }
	.sp-block__card,
	.sp-block--right .sp-block__card,
	.sp-block--left .sp-block__card {
		position: relative;
		top: auto;
		left: 24px;
		right: 24px;
		transform: none;
		width: auto;
		margin-top: -32px;
		padding: 32px 24px;
	}
	.sp-block__num { font-size: 100px; right: 16px; top: 8px; }
	.sp-block__en { font-size: 36px; }
	.sp-block__title { font-size: 22px; }
	.sp-block__desc { font-size: 15px; }
	.section-heading__en { font-size: 36px; }
	.price-card { flex-direction: column; gap: 12px; padding: 16px; }
	.price-card__label { padding-right: 0; padding-bottom: 12px; border-right: 0; border-bottom: 1px solid var(--c-text); }
	.price-card__amount { font-size: 40px; }

	/* Gallery */
	.gallery-section {
		--gallery-item-w: 320px;
		--gallery-item-h: 220px;
		--gallery-duration: 60s;
	}

	/* Access */
	.access-section { padding: 60px 0; }
	.access-section__header { padding: 60px var(--container-pad) 32px; }
	.access-map { height: 280px; }
	.access-body { gap: 32px; }
	.access-info { flex-direction: column; align-items: stretch; gap: 24px; }
	.access-info__company { width: auto; padding-right: 0; padding-bottom: 24px; border-right: 0; border-bottom: 1px solid var(--c-black); }
	.access-info__list { width: 100%; }

	/* CTA */
	.cta-section { padding: 60px 0; }
	.cta-section__inner { gap: 24px; }
	.cta-section__en { font-size: 36px; }
	.cta-section__title { font-size: 22px; }
	.cta-section__desc { font-size: 15px; }
	.cta-buttons { flex-direction: column; width: 100%; }
	.cta-button { min-width: 0; width: 100%; height: 60px; font-size: 15px; padding: 0 24px; }

	/* Footer */
	.site-footer { padding: 40px 0 24px; }
	.site-footer__main { flex-direction: column; }
	.site-footer__nav { flex-wrap: wrap; gap: 32px; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }

	/* Archive */
	.archive-list { grid-template-columns: repeat(2, 1fr); gap: 32px; padding-bottom: 60px; }
	.page-header { padding: 120px 0 40px; }
	.single-article { padding: 120px var(--container-pad) 60px; }
	.single-article__title { font-size: 22px; }

	/* Work / 管理業務内容 */
	.work-section { margin-top: 72px; padding: 80px 0 80px; }
	.work-section__head { margin-bottom: 64px; }
	.work-list { gap: 32px; }
	.work-row { flex-direction: column; gap: 12px; }
	.work-row__label {
		width: auto;
		border-right: 0;
		border-bottom: 1px solid var(--c-text);
		padding-bottom: 8px;
	}
	.work-row__label-text { white-space: normal; }
	.work-row__body { font-size: 16px; }
	.work-trouble-list { padding-left: 16px; margin-top: 8px; }
	.work-trouble-list__item { font-size: 14px; padding-bottom: 10px; }

	/* Plan / 賃貸管理プラン */
	.plan-hero { height: 360px; margin-top: 72px; }
	/* On narrow viewports the Figma percentage crop falls apart;
	   fall back to object-fit cover focused on the same area. */
	.plan-hero__bg img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 60%;
		left: auto; top: auto;
	}
	.plan-hero__panel { padding: 36px 40px; gap: 12px; }
	.plan-hero__en { font-size: 50px; }
	.plan-hero__jp { font-size: 22px; letter-spacing: 1.5px; }

	.plan-lead { padding-top: 64px; }
	.plan-lead__text { font-size: 26px; padding-bottom: 14px; }

	.plan-fee { padding-top: 56px; }
	.plan-fee__card { padding: 40px 24px; gap: 32px; }
	.plan-fee__title { font-size: 21px; }
	.plan-fee__amount-lead { font-size: 18px; }
	.plan-fee__amount-num { font-size: 44px; }
	.plan-fee__amount-yen { font-size: 20px; }
	.plan-fee__amount-tax { font-size: 16px; }
	.plan-fee__desc { font-size: 16px; }
	.plan-fee__notes { margin-top: -16px; }
	.plan-fee__notes p { font-size: 13px; line-height: 1.85; }

	.plan-reasons { padding: 80px 0; }
	.plan-reasons__head-en { font-size: 22px; }
	.plan-reasons__head-jp { font-size: 24px; margin-top: 10px; }
	.plan-reasons__list { margin-top: 40px; }
	.plan-reason {
		flex-direction: column;
		gap: 24px;
		padding-top: 40px;
	}
	.plan-reason + .plan-reason { margin-top: 40px; }
	.plan-reason__text { width: auto; min-height: 0; }
	.plan-reason__title { font-size: 18px; }
	.plan-reason__desc { font-size: 15px; }
	.plan-reason__num { align-self: flex-start; padding-top: 12px; }
	.plan-reason__num-label { font-size: 20px; }
	.plan-reason__num-digit { font-size: 32px; }
	.plan-reason__media--placeholder { width: 100%; height: auto; aspect-ratio: 792 / 487; }

	/* Leasing / リーシング */
	.leasing-hero { height: 360px; margin-top: 72px; }
	.leasing-hero__bg img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 60%;
		left: auto; top: auto;
	}
	.leasing-hero__panel { padding: 36px 40px; gap: 12px; }
	.leasing-hero__en { font-size: 50px; }
	.leasing-hero__jp { font-size: 22px; letter-spacing: 1.5px; }

	.leasing-lead { padding-top: 64px; }
	.leasing-lead__text { font-size: 26px; padding-bottom: 14px; }

	.leasing-section { gap: 36px; padding-block: 48px; }
	.leasing-section--last { padding-bottom: 90px; }
	.leasing-section--first { margin-top: 56px; padding-top: 0; }
	.leasing-section__head { gap: 16px; }
	.leasing-section__title { font-size: 24px; line-height: 1.4; }
	.leasing-section__desc,
	.leasing-section__desc p { font-size: 15px; line-height: 1.85; }

	.leasing-cards { gap: 32px; }
	.leasing-card { padding: 32px 24px; gap: 28px; }
	.leasing-card__head { gap: 8px; }
	.leasing-card__title { font-size: 19px; }
	.leasing-card__desc { font-size: 15px; }

	.leasing-gallery__item { flex: 0 0 280px; width: 280px; height: 200px; }
	.leasing-more { margin-top: 32px; }

	/* Value Up / バリューアップ */
	.valueup-hero { height: 360px; margin-top: 72px; }
	.valueup-hero__bg img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 55%;
		left: auto; top: auto;
	}
	.valueup-hero__panel { padding: 36px 40px; gap: 12px; }
	.valueup-hero__en { font-size: 50px; }
	.valueup-hero__jp { font-size: 22px; letter-spacing: 1.5px; }

	/* Lead callout: variable height; Figma gap below hero → content padding-top. */
	.valueup-content {
		padding-top: 64px;
	}

	.valueup-lead {
		margin: 0 var(--container-pad);
		height: auto;
	}
	.valueup-lead__body {
		position: relative;
		inset: auto;
		padding: 48px 24px;
	}
	.valueup-lead__bg,
	.valueup-lead__overlay { /* still cover the box edges */ }
	.valueup-lead__text { font-size: 18px; line-height: 1.95; }
	.valueup-lead__line {
		position: relative;
		top: auto;
		margin: 0 auto;
		transform: none;
		left: auto;
		width: min(795px, calc(100% - 80px));
		max-width: calc(100% - 80px);
	}

	.valueup-sections { margin-top: 0; }
	.valueup-section { gap: 36px; padding-block: 48px; }
	.valueup-section--compact { gap: 20px; }
	.valueup-section__head { gap: 16px; }
	.valueup-section__title { font-size: 24px; line-height: 1.4; }
	.valueup-section__desc,
	.valueup-section__desc p { font-size: 15px; line-height: 1.85; }
	.valueup-section__body { gap: 32px; }

	.valueup-ba { flex-direction: column; align-items: stretch; gap: 28px; }
	.valueup-ba__col { max-width: none; gap: 16px; }
	.valueup-ba__tag { font-size: 22px; padding-bottom: 8px; }
	.valueup-ba__media { height: auto; aspect-ratio: 579 / 400; }
	.valueup-ba__arrow {
		width: 100%;
		height: 28px;
		transform: rotate(90deg);
		transform-origin: center;
	}

	.valueup-cases { padding: 32px 24px; gap: 32px; }
	.valueup-cases__title { font-size: 19px; }
	.valueup-cases__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
	.valueup-case { gap: 16px; padding-bottom: 16px; }
	.valueup-case__caption { font-size: 15px; }
	.valueup-cases__more { padding-top: 8px; }

	/* News archive */
	.news-hero { margin-top: 72px; padding: 56px var(--container-pad) 40px; }
	.news-hero__inner { gap: 12px; }
	.news-hero__en { font-size: 36px; }
	.news-hero__jp { font-size: 16px; }

	.news-filters { padding-top: 36px; gap: 8px; }
	.news-filters__chip { height: 32px; padding: 0 14px; font-size: 12px; }

	.news-archive .archive-list { margin-top: 28px; }

	.news-archive__empty { padding: 56px var(--container-pad) 80px; }

	/* Contact / お問合せ */
	.contact-hero { margin-top: 72px; padding: 60px var(--container-pad) 48px; }
	.contact-hero__en { font-size: 38px; }
	.contact-hero__title { margin-top: 36px; font-size: 22px; }
	.contact-hero__desc { font-size: 15px; }

	.contact-body { padding: 0 var(--container-pad) 56px; }
	.contact-card { padding: 32px 24px; }
	.contact-card .wpcf7-form { gap: 28px; }

	.contact-form__row { flex-direction: column; align-items: stretch; gap: 8px; }
	.contact-form__row--file { gap: 8px; }
	.contact-form__label { width: auto; }
	.contact-form__field, .contact-form__row--file .contact-form__field { max-width: none; }

	.contact-form__submit { margin-top: 32px; }
	.contact-form__submit-btn { width: 100%; min-width: 0; padding: 22px 24px; font-size: 16px; }
}

@media (max-width: 640px) {
	.archive-list { grid-template-columns: 1fr; }
	.hero__title { font-size: 22px; }
	.section-heading__en { font-size: 32px; }
	.cta-section__en { font-size: 28px; }
	.gallery-section {
		--gallery-item-w: 260px;
		--gallery-item-h: 180px;
	}

	.doc-download { gap: 16px; }
	.doc-download__thumb img { max-height: 420px; }
	.doc-download__label { padding: 12px 22px; font-size: 14px; }
	.plan-hero__en { font-size: 42px; }
	.plan-hero__jp { font-size: 18px; }
	.plan-hero__panel { padding: 28px 24px; }
	.plan-lead__text { font-size: 20px; }
	.plan-fee__title { font-size: 18px; }
	.plan-fee__amount-num { font-size: 36px; }

	.leasing-hero__en { font-size: 42px; }
	.leasing-hero__jp { font-size: 18px; }
	.leasing-hero__panel { padding: 28px 24px; }
	.leasing-lead__text { font-size: 20px; }
	.leasing-section__title { font-size: 21px; }
	.leasing-gallery__item { flex: 0 0 240px; width: 240px; height: 170px; }

	.valueup-hero__en { font-size: 42px; }
	.valueup-hero__jp { font-size: 18px; }
	.valueup-hero__panel { padding: 28px 24px; }
	.valueup-lead__text { font-size: 15px; line-height: 1.9; }
	.valueup-section__title { font-size: 21px; }
	.valueup-cases__grid { grid-template-columns: 1fr; }

	.contact-hero__en { font-size: 32px; }
	.contact-hero__title { font-size: 20px; }
	.contact-card { padding: 24px 16px; }

	.news-hero__en { font-size: 30px; }
	.news-filters__chip { height: 30px; padding: 0 12px; font-size: 11px; }
}

/* ----------------------------------------------------------------
 * 7. Motion / Reveal
 * ----------------------------------------------------------------
 *  Aesthetic direction: "Architectural Reveal" — slow, restrained,
 *  considered. Inspired by Japanese hospitality and editorial layouts.
 *  - Ease:    --ease-out-expo (dramatic finish, soft landing)
 *  - Range:   small translateY (16–24px), no scale-in jumpiness
 *  - Stagger: 100ms cascade between siblings
 *  - Hero:    plays on load (above the fold)
 *  - Sections: triggered by IntersectionObserver via .is-revealed
 * ---------------------------------------------------------------- */

/* Hero on-page-load: subtle Ken Burns + staggered text rise. */
@keyframes hero-kenburns {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

@keyframes hero-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hero__bg img {
	animation: hero-kenburns 8000ms var(--ease-out-quart) both;
}

.hero__sub,
.hero__title,
.hero__desc {
	opacity: 0;
	animation: hero-rise var(--dur-hero) var(--ease-out-expo) forwards;
}

.hero__sub   { animation-delay: 280ms; }
.hero__title { animation-delay: 520ms; }
.hero__desc  { animation-delay: 820ms; }

/* Header slides down once on load. */
@keyframes header-drop {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.site-header {
	animation: header-drop 900ms var(--ease-out-expo) 100ms both;
}

/* ---------------- Reveal pattern (single element) ---------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity var(--dur-reveal) var(--ease-out-expo),
		transform var(--dur-reveal) var(--ease-out-expo);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* ---------------- Reveal pattern (staggered children) ---------------- */
[data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity var(--dur-reveal) var(--ease-out-expo),
		transform var(--dur-reveal) var(--ease-out-expo);
	will-change: opacity, transform;
}

[data-reveal-stagger].is-revealed > * {
	opacity: 1;
	transform: none;
}

[data-reveal-stagger] > *:nth-child(1) { transition-delay:   0ms; }
[data-reveal-stagger] > *:nth-child(2) { transition-delay: 100ms; }
[data-reveal-stagger] > *:nth-child(3) { transition-delay: 200ms; }
[data-reveal-stagger] > *:nth-child(4) { transition-delay: 300ms; }
[data-reveal-stagger] > *:nth-child(5) { transition-delay: 400ms; }
[data-reveal-stagger] > *:nth-child(6) { transition-delay: 500ms; }
[data-reveal-stagger] > *:nth-child(7) { transition-delay: 600ms; }

/* ---------------- Section-specific motion refinements ---------------- */

/* Section heading: stagger EN label and JP label. */
.section-heading[data-reveal] .section-heading__en,
.section-heading[data-reveal] .section-heading__jp {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 1000ms var(--ease-out-expo),
		transform 1000ms var(--ease-out-expo);
}

.section-heading[data-reveal] .section-heading__jp { transition-delay: 180ms; }

.section-heading[data-reveal].is-revealed .section-heading__en,
.section-heading[data-reveal].is-revealed .section-heading__jp {
	opacity: 1;
	transform: none;
}

/* Section heading wrapper itself doesn't translate when its children do. */
.section-heading[data-reveal] {
	opacity: 1;
	transform: none;
}

/*
 * Page-hero frosted panels: layout transform `translate(-50%, -50%)`
 * is what centers them. The generic [data-reveal] rules above wipe
 * that out (translateY(22px) → none), so we override here to keep
 * centering across both states — and add a subtle slide-up so the
 * reveal still has motion.
 */
.plan-hero__panel[data-reveal],
.leasing-hero__panel[data-reveal],
.valueup-hero__panel[data-reveal] {
	opacity: 0;
	transform: translate(-50%, calc(-50% + 16px));
}

.plan-hero__panel[data-reveal].is-revealed,
.leasing-hero__panel[data-reveal].is-revealed,
.valueup-hero__panel[data-reveal].is-revealed {
	opacity: 1;
	transform: translate(-50%, -50%);
}

/*
 * Service block reveal:
 *   - image: slide in from left/right
 *   - num:   drop in from above
 *   - card:  fade only (its own translateY(-50%) is layout-critical for
 *            vertical centering on desktop, so we never touch transform)
 */
.sp-block[data-reveal] .sp-block__image,
.sp-block[data-reveal] .sp-block__num {
	opacity: 0;
	transition:
		opacity 1200ms var(--ease-out-expo),
		transform 1200ms var(--ease-out-expo);
}

.sp-block[data-reveal] .sp-block__image {
	transform: translateX(20px);
}

.sp-block--left[data-reveal] .sp-block__image {
	transform: translateX(-20px);
}

.sp-block[data-reveal] .sp-block__num {
	transform: translateY(-12px);
	transition-delay: 380ms;
	transition-duration: 1400ms;
}

.sp-block[data-reveal] .sp-block__card {
	opacity: 0;
	transition: opacity 1200ms var(--ease-out-expo);
	transition-delay: 220ms;
}

/*
 * First sp-block: hold the reveal so the OUR SERVICE heading lands
 * before the giant 01 number and PLAN card start animating. Subsequent
 * blocks (02 / 03) reveal on their own viewport entry so they don't
 * need this offset.
 */
.sp-block[data-reveal]:first-of-type .sp-block__image {
	transition-delay: 700ms;
}

.sp-block[data-reveal]:first-of-type .sp-block__card {
	transition-delay: 920ms;
}

.sp-block[data-reveal]:first-of-type .sp-block__num {
	transition-delay: 1080ms;
}

.sp-block[data-reveal] {
	opacity: 1;
	transform: none;
}

.sp-block[data-reveal].is-revealed .sp-block__image,
.sp-block[data-reveal].is-revealed .sp-block__num {
	opacity: 1;
	transform: none;
}

.sp-block[data-reveal].is-revealed .sp-block__card {
	opacity: 1;
}

/* News list: stagger left header column then each card. */
.news-section[data-reveal-stagger] > .news-section__inner > * {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity var(--dur-reveal) var(--ease-out-expo),
		transform var(--dur-reveal) var(--ease-out-expo);
}

.news-section[data-reveal-stagger].is-revealed > .news-section__inner > * {
	opacity: 1;
	transform: none;
}

.news-section[data-reveal-stagger] > .news-section__inner > .news-section__header {
	transition-delay: 0ms;
}

.news-section[data-reveal-stagger] .news-list .news-card {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity var(--dur-reveal) var(--ease-out-expo),
		transform var(--dur-reveal) var(--ease-out-expo);
}

.news-section[data-reveal-stagger].is-revealed .news-list .news-card {
	opacity: 1;
	transform: none;
}

.news-section[data-reveal-stagger] .news-list .news-card:nth-child(1) { transition-delay: 200ms; }
.news-section[data-reveal-stagger] .news-list .news-card:nth-child(2) { transition-delay: 320ms; }
.news-section[data-reveal-stagger] .news-list .news-card:nth-child(3) { transition-delay: 440ms; }
.news-section[data-reveal-stagger] .news-list .news-card:nth-child(4) { transition-delay: 560ms; }

/* Disable the default first-level rule for news-list itself (it's the parent of cards). */
.news-section[data-reveal-stagger] > .news-section__inner > .news-list {
	opacity: 1;
	transform: none;
}

/* Gallery marquee: section reveals with a fade; track auto-scrolls. */
.gallery-marquee[data-reveal] {
	opacity: 0;
	transition: opacity var(--dur-reveal) var(--ease-out-expo);
}

.gallery-marquee[data-reveal].is-revealed {
	opacity: 1;
}

/* CTA: subtle background scale-in once visible. */
.cta-section[data-reveal] .cta-section__bg img {
	transform: scale(1.08);
	transition: transform 2400ms var(--ease-out-quart);
}

.cta-section[data-reveal].is-revealed .cta-section__bg img {
	transform: scale(1);
}

/* CTA inner: it carries [data-reveal-stagger] so children cascade. */

/* ---------------- Hover micro-interactions ---------------- */

/* News card thumb: existing scale effect kept; add brightness tweak. */
.news-card a:hover .news-card__thumb img {
	filter: brightness(1.04);
}

/* Service "詳細を見る" arrow slide on hover. */
.text-link__arrow {
	display: inline-block;
	transition: transform var(--dur-base) var(--ease-out-expo);
}

.text-link:hover .text-link__arrow {
	transform: translateX(4px);
}

/* News VIEW ALL arrow same. */
.news-link__arrow {
	display: inline-block;
	transition: transform var(--dur-base) var(--ease-out-expo);
}

.news-link:hover .news-link__arrow {
	transform: translateX(4px);
}

/* CTA arrow. */
.cta-button__arrow {
	display: inline-block;
	transition: transform var(--dur-base) var(--ease-out-expo);
}

.cta-button:hover .cta-button__arrow {
	transform: translateX(4px);
}

/* Header CTA refined. */
.btn-cta {
	transition:
		background-color var(--dur-base) var(--ease-out-expo),
		transform var(--dur-base) var(--ease-out-expo),
		letter-spacing var(--dur-base) var(--ease-out-expo);
}

.btn-cta:hover {
	letter-spacing: 0.12em;
}

/* Nav link: animated underline. */
.site-nav__menu a {
	position: relative;
	padding-bottom: 4px;
}

.site-nav__menu a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-base) var(--ease-out-expo);
}

.site-nav__menu a:hover {
	opacity: 1;
}

.site-nav__menu a:hover::after {
	transform: scaleX(1);
}

/* Footer column links: animated underline. */
.site-footer__col a {
	position: relative;
	display: inline-block;
}

.site-footer__col a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--c-brand);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-base) var(--ease-out-expo);
}

.site-footer__col a:hover::after {
	transform: scaleX(1);
}

/* Pagination hover smoother. */
.pagination .page-numbers {
	transition:
		background var(--dur-base) var(--ease-out-expo),
		color var(--dur-base) var(--ease-out-expo),
		border-color var(--dur-base) var(--ease-out-expo);
}

/* ---------------- Reduced motion: kill everything ---------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0ms !important;
		transition-delay: 0ms !important;
	}

	/* Show everything immediately. */
	[data-reveal],
	[data-reveal-stagger],
	[data-reveal-stagger] > *,
	.section-heading[data-reveal] .section-heading__en,
	.section-heading[data-reveal] .section-heading__jp,
	.sp-block[data-reveal] .sp-block__image,
	.sp-block[data-reveal] .sp-block__card,
	.sp-block[data-reveal] .sp-block__num,
	.news-section[data-reveal-stagger] .news-list .news-card,
	.hero__sub, .hero__title, .hero__desc,
	.hero__bg img,
	.site-header {
		opacity: 1 !important;
		animation: none !important;
	}

	/*
	 * Reset transforms only where the transform was animation-only.
	 * Excludes .sp-block__card because its translateY(-50%) is layout-critical
	 * (vertical centering on desktop).
	 */
	[data-reveal],
	[data-reveal-stagger],
	[data-reveal-stagger] > *,
	.section-heading[data-reveal] .section-heading__en,
	.section-heading[data-reveal] .section-heading__jp,
	.sp-block[data-reveal] .sp-block__image,
	.sp-block[data-reveal] .sp-block__num,
	.news-section[data-reveal-stagger] .news-list .news-card,
	.hero__sub, .hero__title, .hero__desc,
	.hero__bg img,
	.site-header {
		transform: none !important;
	}

	/* Marquee: stop scrolling and reset to 0 (duplicates remain harmless). */
	.gallery-marquee__track {
		animation: none !important;
		transform: none !important;
	}
}


/* ----------------------------------------------------------------
 * 6. 2026-07 content update additions
 * ----------------------------------------------------------------
 *  - .page-toc            leasing / valueup の目次（リード直下）
 *  - .work-section__intro 管理サービス内容ページの説明文
 *  - .work-section__notes 管理サービス内容ページ下部の注記
 *  - .contact-dest        お問合せフォーム下のお問合せ先
 *  - .share-figure__*     LOW FEES REASON03 専門家委託共同化の図（SVG）
 * ---------------------------------------------------------------- */

/* Anchor targets: keep headings clear of the viewport top on jump. */
.leasing-section__title,
.valueup-section__title {
	scroll-margin-top: 110px;
}

.page-toc {
	max-width: 900px;
	margin: 40px auto 0;
	padding: 0 20px;
}

.page-toc__list {
	list-style: none;
	margin: 0;
	padding: 28px 36px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--c-bg-soft, #e1eaee);
	border-radius: 6px;
}

.page-toc__link {
	position: relative;
	display: inline-block;
	padding-left: 20px;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.04em;
	color: var(--c-text);
	text-decoration: none;
	transition: color var(--dur-base, 0.3s) var(--ease, ease);
}

.page-toc__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c-brand);
}

.page-toc__link:hover {
	color: var(--c-brand);
}

.work-section__intro {
	max-width: 800px;
	margin: 28px auto 0;
	padding: 0 20px;
	font-family: var(--ff-jp);
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.04em;
	color: var(--c-text);
	text-align: center;
}

.work-section__notes {
	max-width: 1000px;
	margin: 48px auto 0;
	padding: 0 20px;
}

.work-section__notes p {
	margin: 0 0 6px;
	font-family: var(--ff-jp);
	font-size: 13px;
	line-height: 1.9;
	letter-spacing: 0.03em;
	color: var(--c-text-soft, #6b6b78);
}

.contact-dest {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--c-line-soft, #d8dee2);
	text-align: center;
	font-family: var(--ff-jp);
	color: var(--c-text);
}

.contact-dest p {
	margin: 0;
}

.contact-dest__label {
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--c-text-soft, #6b6b78);
	margin-bottom: 8px;
}

.contact-dest__name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.contact-dest__tel {
	margin-top: 4px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.contact-dest__tel a {
	color: var(--c-brand);
	text-decoration: none;
}

/* REASON03 share diagram (inline SVG) */
figure.leasing-figure,
figure.reason-figure {
	margin: 0;
}

.share-figure__companies text {
	font-family: var(--ff-jp);
	font-weight: 700;
	font-size: 22px;
	fill: #ffffff;
	text-anchor: middle;
	dominant-baseline: central;
}

.share-figure__specs text {
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: 18px;
	fill: var(--c-text);
	text-anchor: middle;
	dominant-baseline: central;
}

@media (max-width: 768px) {
	.page-toc__list {
		padding: 22px 24px;
	}

	.page-toc__link {
		font-size: 15px;
	}

	.work-section__intro {
		text-align: left;
	}
}