/**
 * Property plugin front-end styles.
 */

.property-single,
.property-single *,
.property-listing-page,
.property-listing-page * {
	box-sizing: border-box;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.property-single {
	--property-color-surface: #fff;
	--property-color-border: #d9dee7;
	--property-color-text: #1a2332;
	--property-color-text-muted: #4a5568;
	--property-color-accent: #2b6cb0;
	--property-color-cta: #1a2332;
	--property-color-line: #06c755;
	--property-radius-sm: 4px;
	--property-radius-pill: 999px;
	--property-shadow-soft: 0 2px 8px rgba( 26, 35, 50, 0.08 );
	--property-ease-out: cubic-bezier( 0.22, 1, 0.36, 1 );
	--property-duration-hover: 0.25s;
	--property-sidebar-width: 286px;
	--property-thumb-fade: #f7fafc;
	--property-sticky-header-offset: 0px;
	--property-focus-ring: 0 0 0 2px #fff, 0 0 0 4px var( --property-color-accent );
	max-width: 1140px;
	margin: 0 auto;
	padding: 2rem 1rem 5rem;
}

.property-detail {
	display: flex;
	align-items: flex-start;
	gap: clamp( 16px, 2.5vw, 30px );
	min-width: 0;
	max-width: 100%;
}

.property-detail__main {
	flex: 1 1 824px;
	min-width: 0;
}

.property-inquiry-sidebar {
	flex: 0 0 var( --property-sidebar-width );
	width: var( --property-sidebar-width );
	max-width: min( 100%, var( --property-sidebar-width ) );
	min-width: 0;
	position: sticky;
	top: calc( 1rem + var( --property-sticky-header-offset, 0px ) );
	align-self: flex-start;
	border: 1px solid var( --property-color-border );
	border-radius: var( --property-radius-sm );
	background: var( --property-color-surface );
	padding: 1rem;
	font-size: 0.9rem;
	line-height: 1.6;
}

.property-inquiry-sidebar > * {
	max-width: 100%;
	min-width: 0;
}

.property-inquiry-sidebar__form {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}

.property-inquiry-sidebar__property {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #e8ecf1;
}

.property-inquiry-sidebar__thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: 3px;
	background: #edf2f7;
}

.property-inquiry-sidebar__title {
	margin: 0;
	min-width: 0;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.5;
	color: var( --property-color-text );
	overflow-wrap: anywhere;
}

.property-inquiry-sidebar__lead {
	margin: 0 0 0.75rem;
	font-size: 0.92rem;
	font-weight: 700;
	text-align: center;
	color: #1a2332;
	overflow-wrap: anywhere;
}

.property-inquiry-sidebar__intent {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-bottom: 0.75rem;
	padding: 0.5rem 1.75rem 0.5rem 0.65rem;
	border: 1px solid var( --property-color-border );
	border-radius: 3px;
	font-size: 0.8rem;
	background-color: var( --property-color-surface );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a5568' d='M1.4.6 6 5.2 10.6.6 12 2l-6 6-6-6z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.65rem center;
	background-size: 0.65rem auto;
	color: #2d3748;
	appearance: none;
	-webkit-appearance: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.property-inquiry-sidebar__button {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-bottom: 0.65rem;
	padding: 0.68rem 0.55rem;
	border: none;
	border-radius: var( --property-radius-pill );
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	white-space: normal;
	overflow-wrap: anywhere;
	transition:
		background-color var( --property-duration-hover ) var( --property-ease-out ),
		box-shadow var( --property-duration-hover ) var( --property-ease-out );
}

.property-inquiry-sidebar__button:hover {
	box-shadow: var( --property-shadow-soft );
}

.property-inquiry-sidebar__button:active {
	opacity: 0.92;
}

.property-inquiry-sidebar__button:focus-visible,
.property-inquiry-bar__button:focus-visible,
.property-gallery__nav:focus-visible,
.property-gallery__thumb:focus-visible {
	outline: none;
	box-shadow: var( --property-focus-ring );
}

.property-inquiry-sidebar__button--line {
	background: var( --property-color-line );
	color: #fff;
}

.property-inquiry-sidebar__button--inquiry {
	background: var( --property-color-cta );
	color: #fff;
}

.property-inquiry-sidebar__company {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #e8ecf1;
	text-align: center;
}

.property-inquiry-sidebar__company-name {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.property-inquiry-sidebar__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	max-width: 100%;
	margin: 0 0 0.35rem;
	font-size: clamp( 1.05rem, 4.5vw, 1.35rem );
	font-weight: 700;
	color: var( --property-color-text );
	text-decoration: none;
	word-break: break-all;
}

.property-inquiry-sidebar__hours,
.property-inquiry-sidebar__holiday {
	margin: 0;
	font-size: 0.82rem;
	color: #4a5568;
}

.property-inquiry-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	width: 100%;
	max-width: 100vw;
	align-items: stretch;
	gap: 0.5rem;
	padding: 0.65rem 0.75rem calc( 0.65rem + env( safe-area-inset-bottom, 0px ) );
	background: rgba( 255, 255, 255, 0.98 );
	border-top: 1px solid var( --property-color-border );
	box-shadow: 0 -4px 16px rgba( 26, 35, 50, 0.08 );
}

.property-inquiry-bar__button {
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
	padding: 0.72rem 0.35rem;
	border: none;
	border-radius: var( --property-radius-pill );
	font-size: clamp( 0.72rem, 2.6vw, 0.86rem );
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
	transition:
		background-color var( --property-duration-hover ) var( --property-ease-out ),
		box-shadow var( --property-duration-hover ) var( --property-ease-out );
}

.property-inquiry-bar__button:hover {
	box-shadow: var( --property-shadow-soft );
}

.property-inquiry-bar__button:active {
	opacity: 0.92;
}

.property-inquiry-bar__button--inquiry {
	background: var( --property-color-cta );
	color: #fff;
}

.property-inquiry-bar__button--line {
	background: var( --property-color-line );
	color: #fff;
}

.property-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

.property-table th,
.property-table td {
	border: 1px solid #d9dee7;
	padding: 0.75rem 1rem;
	vertical-align: top;
	text-align: left;
}

.property-table th {
	width: 28%;
	background: #f4f6f9;
	font-weight: 600;
	color: #1a2332;
	white-space: nowrap;
}

.property-table td {
	background: #fff;
	color: #2c3440;
}

.property-hero__title {
	font-size: 1.5rem;
	margin: 0 0 1rem;
	font-weight: 700;
	color: #1a2332;
	line-height: 1.45;
}

.property-hero--header {
	margin-bottom: 1.25rem;
}

.property-hero--summary {
	margin-bottom: 0;
}

.property-hero__access-list {
	margin: 0;
	padding-left: 1.1rem;
}

.property-hero__access-list li {
	margin-bottom: 0.25rem;
}

.property-land-detail__heading,
.property-editorial__heading,
.property-features__heading {
	font-size: 1.25rem;
	margin: 2rem 0 1rem;
	font-weight: 700;
	color: #1a2332;
	border-bottom: 2px solid #2b6cb0;
	padding-bottom: 0.35rem;
}

.property-gallery__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 1rem;
	margin-bottom: 2rem;
}

.property-gallery--slider {
	margin-bottom: 2rem;
}

.property-gallery__stage {
	position: relative;
	margin-bottom: 0.75rem;
}

.property-gallery__figure {
	position: relative;
	margin: 0;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.property-gallery--slider .property-gallery__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #edf2f7;
}

.property-gallery__counter {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	padding: 0.25rem 0.55rem;
	border-radius: 3px;
	background: rgba( 26, 35, 50, 0.72 );
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.4;
}

.property-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 2.25rem;
	height: 2.25rem;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	color: #1a2332;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 26, 35, 50, 0.15 );
}

.property-gallery__nav--prev {
	left: 0.65rem;
}

.property-gallery__nav--next {
	right: 0.65rem;
}

.property-gallery--slider .property-gallery__caption {
	margin: 0.65rem 0 0;
	padding: 0;
	font-size: 0.88rem;
	color: #4a5568;
	background: transparent;
}

.property-gallery__thumbs-wrap {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.15rem;
}

.property-gallery__thumbs-viewport {
	position: relative;
	min-width: 0;
}

.property-gallery__thumbs-fade {
	position: absolute;
	top: 0;
	bottom: 0.25rem;
	width: 2.75rem;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.property-gallery__thumbs-wrap.is-scrollable-start .property-gallery__thumbs-fade--start {
	opacity: 1;
}

.property-gallery__thumbs-wrap.is-scrollable-end .property-gallery__thumbs-fade--end {
	opacity: 1;
}

.property-gallery__thumbs-fade--start {
	left: 0;
	background: linear-gradient(
		90deg,
		var( --property-thumb-fade, #f7fafc ) 0%,
		rgba( 247, 250, 252, 0 ) 100%
	);
}

.property-gallery__thumbs-fade--end {
	right: 0;
	background: linear-gradient(
		270deg,
		var( --property-thumb-fade, #f7fafc ) 0%,
		rgba( 247, 250, 252, 0 ) 100%
	);
}

.property-gallery__thumbs-nav {
	flex: 0 0 auto;
	width: 1.85rem;
	height: 1.85rem;
	padding: 0;
	border: 1px solid #d9dee7;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.96 );
	color: #1a2332;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba( 26, 35, 50, 0.08 );
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.2s ease,
		background-color var( --property-duration-hover ) var( --property-ease-out ),
		box-shadow var( --property-duration-hover ) var( --property-ease-out );
}

.property-gallery__thumbs-wrap.is-scrollable-start .property-gallery__thumbs-nav--prev,
.property-gallery__thumbs-wrap.is-scrollable-end .property-gallery__thumbs-nav--next {
	opacity: 1;
	pointer-events: auto;
}

.property-gallery__thumbs-nav:hover {
	background: #fff;
	box-shadow: var( --property-shadow-soft );
}

.property-gallery__thumbs-nav:focus-visible {
	outline: none;
	box-shadow: var( --property-focus-ring );
}

.property-gallery__thumbs-meta {
	margin: 0.35rem 0 0;
	font-size: 0.78rem;
	color: #718096;
	text-align: right;
}

.property-gallery__thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0 0 0.25rem;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e0 transparent;
}

.property-gallery__thumbs::-webkit-scrollbar {
	height: 6px;
}

.property-gallery__thumbs::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: #cbd5e0;
}

.property-gallery__thumbs > li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.property-gallery__thumb {
	display: block;
	flex-shrink: 0;
	width: 4.5rem;
	height: 3.375rem;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	overflow: hidden;
	cursor: pointer;
	background: #edf2f7;
}

.property-gallery__thumb.is-active {
	border-color: #2b6cb0;
}

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

.property-editorial {
	margin-top: 0;
}

.property-editorial__body {
	padding: 0;
}

.property-editorial__body p {
	margin: 0;
	line-height: 1.8;
	color: #2d3748;
}

.property-gallery__item {
	margin: 0;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.property-gallery__image {
	display: block;
	width: 100%;
	height: auto;
}

.property-gallery__caption {
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	color: #4a5568;
	background: #f7fafc;
}

.property-gallery--empty {
	padding: 2rem;
	text-align: center;
	color: #718096;
	background: #f7fafc;
	border: 1px dashed #cbd5e0;
	margin-bottom: 2rem;
}

.property-features {
	margin-top: 2rem;
}

.property-features__category {
	margin-bottom: 1.25rem;
}

.property-features__category-title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: #2d3748;
}

.property-features__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.property-features__item {
	background: #ebf4ff;
	color: #2b6cb0;
	padding: 0.25rem 0.65rem;
	border-radius: 3px;
	font-size: 0.85rem;
}

.property-features__empty {
	color: #718096;
	margin: 0;
}

@media (max-width: 720px) {
	.property-detail {
		display: block;
	}

	.property-inquiry-sidebar {
		display: none;
	}

	.property-inquiry-bar {
		display: flex;
	}

	.property-single {
		padding-bottom: calc( 5rem + env( safe-area-inset-bottom, 0px ) );
	}

	.property-gallery__nav {
		width: 2rem;
		height: 2rem;
		font-size: 1.1rem;
	}

	.property-gallery__nav--prev {
		left: 0.4rem;
	}

	.property-gallery__nav--next {
		right: 0.4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.property-inquiry-sidebar__button,
	.property-inquiry-bar__button {
		transition: none;
	}
}

@media (max-width: 640px) {
	.property-table th,
	.property-table td {
		display: block;
		width: 100%;
	}

	.property-table th {
		border-bottom: none;
		padding-bottom: 0.35rem;
	}

	.property-table td {
		border-top: none;
		padding-top: 0;
	}
}

/* property/listing block */

.property-listing-page {
	max-width: 960px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

.property-listing-page__title {
	font-size: 1.75rem;
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: #1a2332;
}

.property-listing-page__lead {
	margin: 0 0 2rem;
	color: #4a5568;
	line-height: 1.7;
}

.property-listing__count {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	color: #1a2332;
}

.property-listing__empty {
	margin: 0 0 2rem;
	padding: 2rem 1.25rem;
	text-align: center;
	color: #4a5568;
	background: #f7fafc;
	border: 1px dashed #cbd5e0;
	border-radius: 4px;
}

.property-listing__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2rem;
}

.property-listing-card {
	border: 1px solid #d9dee7;
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
	--listing-table-label-width: 11.25rem;
	--listing-table-cell-v: 0.9375rem;
	--listing-table-cell-h: 1.125rem;
	--listing-table-gap: 1rem;
	--listing-table-border: #e8ecf1;
}

.property-listing-card__upper {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.25rem;
}

.property-listing-card__media {
	margin: 0;
}

.property-listing-card__image {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 4px;
	background: #edf2f7;
}

.property-listing-card__body {
	min-width: 0;
}

.property-listing-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.45;
}

.property-listing-card__title a {
	color: #1a2332;
	text-decoration: none;
}

.property-listing-card__title a:hover {
	color: #2b6cb0;
	text-decoration: underline;
}

.property-listing-card__area {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	color: #4a5568;
}

.property-listing-card__price {
	margin: 0 0 0.35rem;
	font-size: 1.35rem;
	font-weight: 700;
	color: #c53030;
}

.property-listing-card__size {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	color: #2d3748;
}

.property-listing-card__access {
	margin: 0 0 0.75rem;
	padding-left: 1.1rem;
	font-size: 0.92rem;
	color: #2d3748;
}

.property-listing-card__access li {
	margin-bottom: 0.2rem;
}

.property-listing-card__comment {
	margin: 0 0 0.75rem;
	font-size: 0.92rem;
	line-height: 1.75;
	color: #2d3748;
}

.property-listing-card__detail-link {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 600;
	color: #2b6cb0;
	text-decoration: none;
}

.property-listing-card__detail-link:hover {
	text-decoration: underline;
}

.property-listing-card__table-wrap {
	border-top: 1px solid #d9dee7;
	overflow-x: auto;
}

.property-listing-card__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.88rem;
}

.property-listing-card__table th,
.property-listing-card__table td {
	border: 1px solid #d9dee7;
	padding: 0.65rem 0.75rem;
	text-align: center;
	vertical-align: middle;
}

.property-listing-card__table th {
	background: #f4f6f9;
	font-weight: 600;
	color: #1a2332;
	white-space: nowrap;
}

.property-listing-card__table td {
	background: #fff;
	color: #2d3748;
}

.property-listing-card__table a {
	color: #2b6cb0;
	font-weight: 600;
	text-decoration: none;
}

.property-listing-card__table a:hover {
	text-decoration: underline;
}

.property-listing__pagination {
	display: flex;
	justify-content: center;
	gap: 0.35rem;
	margin-top: 2rem;
}

.property-listing__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border: 1px solid #d9dee7;
	border-radius: 3px;
	background: #fff;
	color: #2d3748;
	text-decoration: none;
	font-size: 0.9rem;
}

.property-listing__pagination .page-numbers.current {
	background: #2b6cb0;
	border-color: #2b6cb0;
	color: #fff;
}

@media (max-width: 720px) {
	.property-listing-card {
		--listing-table-cell-v: 0.75rem;
	}

	.property-listing-card__upper {
		grid-template-columns: 1fr;
	}

	.property-listing-card__image {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.property-listing-card__table-wrap {
		overflow-x: visible;
		background: #fafbfc;
	}

	.property-listing-card__table {
		font-size: 0.9375rem;
		line-height: 1.55;
	}

	.property-listing-card__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.property-listing-card__table,
	.property-listing-card__table tbody,
	.property-listing-card__table tr {
		display: block;
		width: 100%;
	}

	.property-listing-card__table td {
		display: flex;
		align-items: center;
		gap: var(--listing-table-gap);
		min-height: 2.875rem;
		padding: var(--listing-table-cell-v) var(--listing-table-cell-h) var(--listing-table-cell-v) 0;
		text-align: left;
		border-color: var(--listing-table-border);
		border-left: none;
		border-right: none;
	}

	.property-listing-card__table td::before {
		flex: 0 0 var(--listing-table-label-width);
		align-self: stretch;
		display: flex;
		align-items: center;
		padding: var(--listing-table-cell-v) var(--listing-table-cell-h);
		margin: calc(var(--listing-table-cell-v) * -1) 0 calc(var(--listing-table-cell-v) * -1) 0;
		background: #f4f6f9;
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: 0.02em;
		color: #374151;
		border-right: 1px solid var(--listing-table-border);
	}

	.property-listing-card__table td:nth-child(1)::before {
		content: "価格";
	}

	.property-listing-card__table td:nth-child(2)::before {
		content: "坪単価";
	}

	.property-listing-card__table td:nth-child(3)::before {
		content: "面積";
	}

	.property-listing-card__table td:nth-child(4)::before {
		content: "建ぺい率・容積率";
		line-height: 1.45;
	}

	.property-listing-card__table td:nth-child(5) {
		min-height: 3rem;
	}

	.property-listing-card__table td:nth-child(5)::before {
		content: "詳細";
	}

	.property-listing-card__table td a {
		display: inline-flex;
		align-items: center;
		min-height: 2.375rem;
		padding: 0;
		word-break: keep-all;
	}
}
