@charset "UTF-8";

/* ==================================================
 * 
 * 		Reset and Default Style
 * 
 * ================================================== */
:where(html) {
	min-block-size: 100dvb;
	-webkit-text-size-adjust: 100%;
}

:where(body) {
	margin: unset;
}

:where(p) {
	margin-block-start: unset;
	margin-block-end: unset;
}

:where(blockquote, figure) {
	margin-block-start: unset;
	margin-block-end: unset;
	margin-inline-start: unset;
	margin-inline-end: unset;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin-block-start: unset;
	margin-block-end: unset;
	margin-inline-start: unset;
	margin-inline-end: unset;
}

:where(table) {
	border-collapse: collapse;
}

:where(ul) {
	margin-block-start: unset;
	margin-block-end: unset;
	padding-inline-start: unset;
}

:where(ol) {
	margin-block-start: unset;
	margin-block-end: unset;
	padding-inline-start: unset;
}

:where(dd) {
	margin-inline-start: unset;
}

:where(dl) {
	margin-block-start: unset;
	margin-block-end: unset;
}

:where(fieldset) {
	margin-inline: unset;
	padding-block: unset;
	padding-inline: unset;
	border: unset;
}

:where(legend) {
	padding-inline: unset;
}

:where(input, select, textarea, button) {
	margin: unset;
	padding: unset;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
	background-color: inherit;
	border: none;
	outline: none;
	appearance: none;
}

:where(:any-link, button, [type="button"], [type="reset"], [type="submit"], label[for], select, summary, [role="tab"], [role="button"]) {
	cursor: pointer;
}

:where(button, [type="button"], [type="reset"], [type="submit"]) {
	touch-action: manipulation;
}

:where(i, cite, em, var, address, dfn) {
	font-style: unset;
}

:where(pre) {
	margin-block: unset;
}

:where(small) {
	font-size: unset;
}

/* ==================================================
 * 
 * 		Variable
 * 
 * ================================================== */
:root {
	box-sizing: border-box;
	/* ---------- font ---------- */
	--font-size-base: max(16px, 1em);
	--font-family-base: "Hiragino Sans", Inter, "Noto Sans JP", sans-serif;
	--font-family-icon: "Material Icons Outlined";
	/* ---------- leading ---------- */
	--leading-base: 1.5;
	--leading: calc(1lh - 1em);
	--leading-half: calc(var(--leading) / 2);
	/* ---------- color ---------- */
	--color-black: #242628;
	--color-white: #f9fbfc;
	--color-gray: #7c8187;
	--color-red: #f41f1a;
	--color-blue: #4ba3f2;
	--color-yellow: #fffacd;
	--color-orange: #f39800;
	--color-deep-orange: #311e00;
	--color-green: #8ec31f;
	--color-deep-green: #2e5a00;
	/* ---------- property label ---------- */
	--color-land: var(--color-green);
	--color-house: #005bf3;
	--color-condo: var(--color-orange);
	--color-investment: #c900f3;
	/* ---------- black palette ---------- */
	--color-black-10: rgb(from var(--color-black) r g b / 0.1);
	--color-black-20: rgb(from var(--color-black) r g b / 0.2);
	--color-black-30: rgb(from var(--color-black) r g b / 0.3);
	--color-black-40: rgb(from var(--color-black) r g b / 0.4);
	--color-black-50: rgb(from var(--color-black) r g b / 0.5);
	--color-black-60: rgb(from var(--color-black) r g b / 0.6);
	--color-black-70: rgb(from var(--color-black) r g b / 0.7);
	--color-black-80: rgb(from var(--color-black) r g b / 0.8);
	--color-black-90: rgb(from var(--color-black) r g b / 0.9);
	/* ---------- white palette ---------- */
	--color-white-10: rgb(from var(--color-white) r g b / 0.1);
	--color-white-20: rgb(from var(--color-white) r g b / 0.2);
	--color-white-30: rgb(from var(--color-white) r g b / 0.3);
	--color-white-40: rgb(from var(--color-white) r g b / 0.4);
	--color-white-50: rgb(from var(--color-white) r g b / 0.5);
	--color-white-60: rgb(from var(--color-white) r g b / 0.6);
	--color-white-70: rgb(from var(--color-white) r g b / 0.7);
	--color-white-80: rgb(from var(--color-white) r g b / 0.8);
	--color-white-90: rgb(from var(--color-white) r g b / 0.9);
	/* ---------- gray palette ---------- */
	--color-gray-10: rgb(from var(--color-gray) r g b / 0.1);
	--color-gray-20: rgb(from var(--color-gray) r g b / 0.2);
	--color-gray-30: rgb(from var(--color-gray) r g b / 0.3);
	--color-gray-40: rgb(from var(--color-gray) r g b / 0.4);
	--color-gray-50: rgb(from var(--color-gray) r g b / 0.5);
	--color-gray-60: rgb(from var(--color-gray) r g b / 0.6);
	--color-gray-70: rgb(from var(--color-gray) r g b / 0.7);
	--color-gray-80: rgb(from var(--color-gray) r g b / 0.8);
	--color-gray-90: rgb(from var(--color-gray) r g b / 0.9);
	/* ---------- background ---------- */
	--background-base: var(--color-gray-10);
	/* ---------- border ---------- */
	--border-base: 1px solid var(--color-gray-30);
	/* ---------- border-radius ---------- */
	--radius-small: 4px;
	--radius-base: 12px;
	--radius-full: calc(1px / 0);
	/* ---------- box-shadow ---------- */
	--box-shadow-base: 0 2px 6px var(--color-gray-20);
	/* ---------- duration ---------- */
	--duration-200: 0.2s;
	--duration-300: 0.3s;
	--duration-400: 0.4s;
	/* ---------- space block ---------- */
	--space-block-025: 0.25em;
	--space-block-05: 0.5em;
	--space-block-075: 0.75em;
	--space-block-1: 1em;
	--space-block-125: 1.25em;
	--space-block-15: 1.5em;
	--space-block-175: 1.75em;
	--space-block-2: 2em;
	--space-block-25: 2.5em;
	--space-block-3: 3em;
	--space-block-35: 3.5em;
	--space-block-4: 4em;
	/* ---------- space inline ---------- */
	--space-inline-025: 0.25ic;
	--space-inline-05: 0.5ic;
	--space-inline-075: 0.75ic;
	--space-inline-1: 1ic;
	--space-inline-125: 1.25ic;
	--space-inline-15: 1.5ic;
	--space-inline-175: 1.75ic;
	--space-inline-2: 2ic;
}

/* ==================================================
 * 
 *      Base
 * 
 * ================================================== */
:is(html, body) {
    color: var(--color-black);
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    line-height: var(--leading-base);
    background-color: var(--color-white);
	font-variant-numeric: tabular-nums;
}

/* ---------- img ---------- */
img {
    max-inline-size: 100%;
    block-size: auto;
    vertical-align: bottom;
}

/* ---------- input, select, textarea ---------- */
input:is([type="text"], [type="email"], [type="tel"], [type="number"]),
select,
textarea {
	margin-block-end: 0;
    padding-block: var(--space-block-05);
    padding-inline: var(--space-inline-05);
    inline-size: 100%;
	color: var(--color-black);
    font-size: 0.875rem;
    border: 2px solid var(--color-gray-30);
    border-radius: 0;
	&[disabled] {
		background-color: var(--background-base);
		cursor: not-allowed;
	}
	&[readonly] {
		color: var(--color-gray-80);
		background-color: var(--background-base);
		border: 2px dotted var(--color-gray-30);
		&:focus {
			background-color: var(--background-base);
		}
	}
	&::placeholder {
		color: var(--color-gray-80);
		font-style: italic;
	}
	&:focus {
		background-color: rgb(from var(--color-yellow) r g b / 0.6);
		border: 2px solid var(--color-blue);
	}
}

@container main (inline-size >= 358px) {
	input:is([type="text"], [type="email"], [type="tel"], [type="number"]),
	select,
	textarea {
		padding-block: var(--space-block-075);
		padding-inline: var(--space-inline-075);
		font-size: 1rem;
	}
}

/* ---------- textarea ---------- */
textarea {
	block-size: 10lh;
	vertical-align: bottom;
	resize: block;
}

@container main (inline-size >= 992px) {
	textarea {
		block-size: 15lh;
	}
}

/* ---------- input, select, textarea ---------- */
input:is([type="text"], [type="email"], [type="tel"], [type="number"]),
select,
textarea {
	margin-block-end: 0; /* for Lightning */
	padding-block: var(--space-block-05);
	padding-inline: var(--space-inline-05);
	inline-size: 100%;
	color: var(--color-black); /* for Lightning */
	font-size: 0.875rem;
	border: 2px solid var(--color-gray-30);
	border-radius: 0; /* for Lightning */
	&[disabled] {
		background-color: var(--background-base);
		cursor: not-allowed;
	}
	&[readonly] {
		color: var(--color-gray-80);
		background-color: var(--background-base);
		border: 2px dotted var(--color-gray-30);
		&:focus {
			background-color: var(--background-base);
		}
	}
	&::placeholder {
		color: var(--color-gray-80);
		font-style: italic;
	}
	&:focus {
		background-color: rgb(from var(--color-yellow) r g b / 0.6);
		border: 2px solid var(--color-blue);
	}
}

@container main (inline-size >= 358px) {
	input:is([type="text"], [type="email"], [type="tel"], [type="number"]),
	select,
	textarea {
		padding-block: var(--space-block-075);
		padding-inline: var(--space-inline-075);
		font-size: 1rem;
	}
}

/* ---------- textarea ---------- */
textarea {
	block-size: 10lh;
	vertical-align: bottom;
	resize: block;
}

@container main (inline-size >= 992px) {
	textarea {
		block-size: 15lh;
	}
}

/* ---------- input[type="radio"], input[type="checkbox"] ---------- */
input:is([type="radio"], [type="checkbox"]) {
	--selector-size: 1lh;
	--selector-color: #fff;
	display: grid;
	place-items: center;
	inline-size: var(--selector-size);
	block-size: var(--selector-size);
	font-size: 0.875rem;
	background-color: var(--selector-color);
	border: 2px solid var(--color-gray-30);
	transition-property: border;
	transition-duration: var(--duration-200);
	cursor: pointer;
	&::before {
		content: "";
		display: block;
		scale: 0;
		transition-property: scale;
		transition-duration: var(--duration-200);
	}
	&:checked {
		&::before {
			scale: 1;
		}
	}
	&:focus-visible {
		outline: 2px solid var(--color-blue);
	}
}

@container main (inline-size >= 358px) {
	input:is([type="radio"], [type="checkbox"]) {
		font-size: 1rem;
	}
}

/* ---------- input[type="radio"] ---------- */
input[type="radio"] {
	border-radius: var(--radius-full);
	&::before {
		inline-size: calc(var(--selector-size) / 2);
		block-size: calc(var(--selector-size) / 2);
		background-color: var(--color-orange);
		border-radius: var(--radius-full);
	}
	&:checked {
		border: 2px solid var(--color-orange);
	}
}

/* ---------- input[type="checkbox"] ---------- */
input[type="checkbox"] {
	&::before {
		inline-size: 100%;
		block-size: 100%;
		box-shadow: 0 0 0 1rem var(--color-green) inset;
		clip-path: polygon(
			calc(100% * 3 / 16) calc(100% * 7 / 16),
			calc(100% * 6 / 16) calc(100% * 10 / 16),
			calc(100% * 13 / 16) calc(100% * 3 / 16),
			calc(100% * 15 / 16) calc(100% * 5 / 16),
			calc(100% * 6 / 16) calc(100% * 14 / 16),
			calc(100% * 1 / 16) calc(100% * 9 / 16)
		);
	}
	&:checked {
		border: 2px solid var(--color-green);
	}
}

/* ---------- input[type="submit"] ---------- */
input[type="submit"] {
	padding-block: var(--space-block-05);
	inline-size: min(100%, 35rem);
	color: var(--color-white);
	font-size: 0.875rem;
	font-weight: 600;
	background-color: var(--color-orange);
	border: none; /* for Lightning */
	border-radius: var(--radius-small);
	transition-property: background-color;
	transition-duration: var(--duration-200);
	&[disabled] {
		background-color: rgb(from var(--color-green) r g b / 0.6);
		cursor: not-allowed;
		@media (any-hover: hover) {
			&:hover {
				background-color: rgb(from var(--color-green) r g b / 0.6);
			}
		}
	}
	&:focus-visible {
		background-color: var(--color-green);
		outline: 2px solid var(--color-blue);
	}
	@media (any-hover: hover) {
		&:hover {
			background-color: var(--color-green);
		}
	}
}

@container main (inline-size >= 358px) {
	input[type="submit"] {
		padding-block: var(--space-block-075);
		font-size: 1rem;
	}
}

/* for Lightning */
input[type="submit"] {
	&:not(:disabled) {
		@media (any-hover: hover) {
			&:hover {
				background-color: var(--color-green);
			}
		}
	}
}

/* ---------- wpcf7-radio, wpcf7-checkbox, wpcf7-acceptance ---------- */
:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) {
	--selector-row-gap: var(--space-block-05);
	display: grid;
	row-gap: var(--selector-row-gap);
	& label {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: var(--space-inline-05);
		inline-size: fit-content;
		cursor: pointer;
	}
	.wpcf7-list-item {
		margin-inline-start: 0; /* for Lightning */
	}
	.wpcf7-list-item-label {
		font-size: 0.875rem;
	}
	.has-free-text {
		display: grid;
		row-gap: var(--selector-row-gap);
	}
}

@container main (inline-size >= 358px) {
	:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) {
		--selector-row-gap: var(--space-block-075);
		.wpcf7-list-item-label {
			font-size: 1rem;
		}
	}
}

/* ---------- wpcf7-select ---------- */
.wpcf7-form-control-wrap {
	&:has(.wpcf7-select) {
		position: relative;
		&::after {
			content: "";
			position: absolute;
			inset-block-start: 50%;
			inset-inline-end: 1rem;
			translate: 0 -50%;
			display: inline-block;
			inline-size: 1rem;
			block-size: 1rem;
			box-shadow: 0 0 0 1rem var(--color-black) inset;
			clip-path: polygon(
				calc(100% * 3 / 16) calc(100% * 5 / 16),
				calc(100% * 8 / 16) calc(100% * 10 / 16),
				calc(100% * 13 / 16) calc(100% * 5 / 16),
				calc(100% * 14 / 16) calc(100% * 6 / 16),
				calc(100% * 8 / 16) calc(100% * 12 / 16),
				calc(100% * 2 / 16) calc(100% * 6 / 16)
			);
			pointer-events: none;
		}
	}
}

/* ---------- SmartPhoto ---------- */
.smartphoto {
	z-index: 999999 !important;
}

.smartphoto-overlay {
	z-index: 999998 !important;
}

.admin-bar .smartphoto {
	top: 0 !important;
}

:is(.smartphoto-list, .smartphoto-arrows, .smartphoto-nav) {
	& li {
		padding-inline-start: 0;
		&::before {
			content: none;
		}
	}
}

.smartphoto-caption {
	font-size: 0.875rem;
}

/* ---------- visually hidden ---------- */
.visually_hidden {
	position: absolute;
	margin: -1px;
	padding: 0;
	inline-size: 1px;
	block-size: 1px;
	border: none;
	white-space: nowrap;
	clip-path: inset(50%);
	overflow: hidden;
}

/* ==================================================
 * 
 *      全体のレイアウト
 * 
 * ================================================== */
body {
    container: body / inline-size;
}

.container {
    padding-inline: 1rem;
}

@container body (inline-size >= 744px) {
    .container {
        max-inline-size: 100%;
    }
}

@container body (inline-size >= 1200px) {
    .container {
        max-inline-size: 1152px;
    }
	.site-header-container {
		max-inline-size: 1280px;
	}
}

.main-section {
    container: main / inline-size;
}

.site-body {
	padding-block: var(--space-block-2);
}

@container body (inline-size >= 390px) {
	.site-body {
		padding-block: var(--space-block-25);
	}
}

@container body (inline-size >= 744px) {
	.site-body {
		padding-block: var(--space-block-3);
	}
}

@container body (inline-size >= 1024px) {
	.site-body {
		padding-block: var(--space-block-35);
	}
}

/* ==================================================
 * 
 *      固定ページのヘッダー画像
 * 
 * ================================================== */
.page-header {
    background-image: url(https://homelink-fukuoka.com/wp-content/uploads/image_header_2560_320.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    block-size: 24svb;
    &::before {
        position: absolute;
        inset: 0;
        content: "";
        background-color: rgb(from var(--color-black) r g b / 0.2);
    }
}

/* ==================================================
 * 
 *      物件一覧ページ
 * 
 * ================================================== */
.vk_post {
    &.media {
        flex-direction: column;
        gap: 15px;
    }
    .media-img {
        inline-size: 100%;
        aspect-ratio: 4 / 3;
    }
    .media-body {
        inline-size: 100%;
    }
}

@container main (inline-size >= 712px) {
    .vk_post {
        &.media {
            flex-direction: row;
            gap: 0;
        }
        .media-img {
            inline-size: 35%;
        }
    }
}

/* ---------- property listing ---------- */
.property_listing {
    display: grid;
    grid-template-columns: 28% minmax(0, 1fr);
    margin-block-end: 0; /* for Lightning */
    font-size: 0.875rem;
    border: var(--border-base);
    border-block-end: none;
    :is(dt, dd) {
        padding-block: var(--space-block-025);
        padding-inline: var(--space-inline-05);
        border-block-end: var(--border-base);
    }
    & dt {
        display: grid;
        place-items: center;
        margin-block-end: 0; /* for Lightning */
        background-color: var(--background-base);
        border-inline-end: var(--border-base);
    }
    & dd {
        &:first-of-type {
            color: var(--color-red);
            font-weight: 600;
        }
    }
}

@container main (inline-size >= 992px) {
    .property_listing {
        grid-template-columns: 24% minmax(0, 1fr);
        font-size: 1rem;
        :is(dt, dd) {
            padding-block: var(--space-block-05);
            padding-inline: var(--space-inline-1);
        }
    }
}

/* ==================================================
 * 
 *      物件詳細ページ
 * 
 * ================================================== */
.single-property {
    :is(.entry-footer, .vk_posts.next-prev) {
        display: none;
    }
    .entry-body > * {
		margin-block-start: var(--space-block-2);
		@container main (inline-size >= 358px) {
			margin-block-start: var(--space-block-25);
		}
		@container main (inline-size >= 712px) {
			margin-block-start: var(--space-block-3);
		}
		@container main (inline-size >= 992px) {
			margin-block-start: var(--space-block-35);
		}
    }
}

/* ---------- entry header ---------- */
.single-property {
	.entry-header {
		display: grid;
		row-gap: var(--space-block-05);
		margin-block-end: 0; /* for Lightning */
		line-height: 1;
		@container main (inline-size >= 358px) {
			grid-template:
				"title title"
				"summary price"
				/ max-content minmax(0, 1fr);
			align-items: center;
			row-gap: var(--space-block-075);
		}
		@container main (inline-size >= 712px) {
			grid-template:
				"title summary price"
				/ max-content max-content minmax(0, 1fr);
			column-gap: var(--space-inline-1);
		}
	}
}

/* ----- property title ----- */
.property_title {
	margin-block-end: 0; /* for Lightning */
    font-size: 1.375rem;
    line-height: unset; /* for Lightning */
	@container main (inline-size >= 358px) {
		grid-area: title;
		font-size: 1.5rem;
	}
	@container main (inline-size >= 712px) {
		font-size: 1.75rem;
	}
	@container main (inline-size >= 992px) {
		font-size: 2rem;
	}
}

/* ----- property summary ----- */
.property_summary {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: var(--space-inline-025);
	color: var(--color-gray);
	font-size: 0.875rem;
	@container main (inline-size >= 358px) {
		grid-area: summary;
		font-size: 1rem;
	}
	@container main (inline-size >= 992px) {
		font-size: 1.125rem;
	}
}

.property_floor_plan {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: var(--space-inline-025);
	&::after {
		content: "/";
	}
}

/* ----- property price ----- */
.property_price {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: baseline;
	column-gap: var(--space-inline-025);
	font-weight: 600;
	@container main (inline-size >= 358px) {
		grid-area: price;
		justify-self: end;
	}
}

.property_price_value {
	color: var(--color-red);
	font-size: 1.5rem;
	@container main (inline-size >= 358px) {
		font-size: 1.625rem;
	}
	@container main (inline-size >= 712px) {
		font-size: 1.875rem;
	}
	@container main (inline-size >= 992px) {
		font-size: 2.125rem;
	}
}

.property_price_unit {
	font-size: 0.875rem;
	translate: 0 -1px;
	@container main (inline-size >= 358px) {
		font-size: 1rem;
	}
	@container main (inline-size >= 992px) {
		font-size: 1.125rem;
	}
}

/* ---------- property photos ---------- */

/* ----- main slide container ----- */
.main_slide_container {
	--main-caption-padding: var(--space-block-075);
	--main-caption-size: 0.875rem;
	--main-prev-next-button-size: 2.75rem;
	--main-prev-next-button-border: 3px solid var(--color-white-60);
	display: grid;
	row-gap: var(--space-block-1);
	margin-inline: calc(50% - 50vi);
	inline-size: 100vi;
	@container main (inline-size >= 358px) {
		--main-caption-padding: var(--space-block-1);
		--main-caption-size: 1rem;
		--main-prev-next-button-size: 3rem;
		row-gap: var(--space-block-15);
	}
	@container main (inline-size >= 712px) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--space-inline-1);
		margin-inline: auto;
		inline-size: 100%;
	}
	@container main (inline-size >= 992px) {
		column-gap: var(--space-inline-2);
	}
}

/* ----- main slide ----- */
.main_slide {
	inline-size: 100%;
}

.main_slide_caption {
	padding-block-start: var(--main-caption-padding);
	inline-size: 100%;
	font-size: var(--main-caption-size);
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

/* ----- main prev / next button ----- */
:is(.main_prev_button, .main_next_button) {
	position: absolute;
	inset-block-start: 50%;
	translate: 0 calc(-50% - ((var(--main-caption-size) + var(--main-caption-padding) / 2)));
	z-index: 10;
	display: grid;
	place-content: center;
	inline-size: var(--main-prev-next-button-size);
	aspect-ratio: 1;
	background-color: var(--color-black-40);
	transition-property: background-color;
	transition-duration: var(--duration-200);
	&::before {
		content: "";
		display: inline-block;
		inline-size: calc(var(--main-prev-next-button-size) / 2);
		aspect-ratio: 1;
		border-block-end: var(--main-prev-next-button-border);
		transition-property: border-color;
		transition-duration: var(--duration-200);
	}
	&:where(.main_prev_button) {
		inset-inline-start: 0;
		&::before {
			border-inline-start: var(--main-prev-next-button-border);
			rotate: 45deg;
			translate: 4px;
		}
	}
	&:where(.main_next_button) {
		inset-inline-end: 0;
		&::before {
			border-inline-end: var(--main-prev-next-button-border);
			rotate: -45deg;
			translate: -4px;
		}
	}
	@media (any-hover: hover) {
		&:hover {
			background-color: var(--color-black-60);
			&::before {
				border-color: var(--color-white);
			}
		}
	}
}


/* ----- main pagination ----- */
.main_pagination {
	--swiper-pagination-top: 0;
	--swiper-pagination-bottom: auto;
	position: absolute;
	z-index: 10;
	padding-block: var(--space-block-05);
	padding-inline: var(--space-inline-1);
	inline-size: fit-content;
	font-size: 0.875rem;
	line-height: 1;
	background-color: var(--color-white);
	@container main (inline-size >= 358px) {
		font-size: 1rem;
	}
}

/* ----- featured image ----- */
.property_plan_caption {
	padding-block-start: var(--main-caption-padding);
	inline-size: 100%;
	font-size: var(--main-caption-size);
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

/* ----- thumb slide container ----- */
.thumb_slide_container {
	block-size: 0;
	visibility: hidden;
}

@container main (inline-size >= 712px) {
	.thumb_slide_container {
		margin-block-start: var(--space-block-15);
		block-size: 100%;
		visibility: visible;
	}
	.thumb_slide {
		inline-size: 100%;
	}
	.thumb_slide_image {
		border: 2px solid transparent;
		transition-property: border;
		transition-duration: var(--duration-200);
		cursor: pointer;
		& img {
			opacity: 0.6;
			teansition-property: opacity;
			transition-duration: var(--duration-200);
		}
	}
	.swiper-slide-thumb-active {
		.thumb_slide_image {
			border: 2px solid var(--color-red);
			& img {
				opacity: 1;
			}
		}
	}
	:is(.thumb_prev_button, .thumb_next_button) {
		--thumb-prev-next-button-size: 2.75rem;
		--thumb-prev-next-button-border: 3px solid var(--color-white-60);
		position: absolute;
		inset-block-start: 50%;
		translate: 0 -50%;
		z-index: 10;
		display: grid;
		place-content: center;
		inline-size: var(--thumb-prev-next-button-size);
		aspect-ratio: 1;
		background-color: var(--color-black-40);
		transition-property: background-color, opacity;
		transition-duration: var(--duration-200);
		&::before {
			content: "";
			display: inline-block;
			inline-size: calc(var(--thumb-prev-next-button-size) / 2);
			aspect-ratio: 1;
			border-block-end: var(--thumb-prev-next-button-border);
			transition-property: border-color;
			transition-duration: var(--duration-200);
		}
		&:where(.thumb_prev_button) {
			inset-inline-start: 2px;
			&::before {
				border-inline-start: var(--thumb-prev-next-button-border);
				rotate: 45deg;
				translate: 4px;
			}
		}
		&:where(.thumb_next_button) {
			inset-inline-end: 2px;
			&::before {
				border-inline-end: var(--thumb-prev-next-button-border);
				rotate: -45deg;
				translate: -4px;
			}
		}
		@media (any-hover: hover) {
			&:hover {
				background-color: var(--color-black-60);
				&::before {
					border-color: var(--color-white);
				}
			}
		}
		&.swiper-button-disabled {
			opacity: 0;
			pointer-events: none;
		}
	}
}

/* ---------- property heading ---------- */
.property_heading {
    margin-block: 0; /* for Lightning */
	padding-block: 0; /* for Lightning */
    padding-inline-start: var(--space-inline-05);
    font-size: 1.125rem;
    border-block: none; /* for Lightning */
    border-inline-start: 3px solid var(--color-green);
	+ * {
		margin-block-start: var(--space-block-1);
	}
}

@container main (inline-size >= 358px) {
	.property_heading {
		font-size: 1.25rem;
	}
}

@container main (inline-size >= 712px) {
	.property_heading {
		font-size: 1.5rem;
	}
}

@container main (inline-size >= 992px) {
	.property_heading {
		font-size: 1.75rem;
	}
}

/* ---------- property overview ---------- */

/* ----- overview list ----- */
.overview_list {
	display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    font-size: 0.875rem;
    margin-block-end: 0; /* for Lightning */
    border-block-start: var(--border-base);
}

@container main (inline-size >= 358px) {
	.overview_list {
		font-size: 1rem;
	}
}

@container main (inline-size >= 712px) {
	.overview_list {
		grid-template-columns: repeat(2, max-content minmax(0, 1fr));
	}
}

@container main (inline-size >= 992px) {
	.overview_list {
		grid-template-columns: repeat(3, max-content minmax(0, 1fr));
	}
}

.overview_label {
	display: grid;
	align-items: center;
	margin-block-end: 0; /* for Lightning */
	padding-block: var(--space-block-1);
	border-block-end: var(--border-base);
}

.overview_label_text {
	padding-block: var(--space-block-025);
	padding-inline: var(--space-inline-075);
	color: var(--color-deep-green);
	text-align: center;
	background-color: var(--color-green);
	border-radius: var(--radius-small);
}

.overview_value {
	display: grid;
	align-items: center;
	padding-block: var(--space-block-1);
	padding-inline: var(--space-inline-075);
	border-block-end: var(--border-base);
	&:has(.unit) {
		grid-template-columns: auto auto minmax(0, 1fr);
		align-items: baseline;
		column-gap: var(--space-inline-025);
	}
}

.emphasis {
	color: var(--color-red);
	font-size: 1.25rem;
	font-weight: 600;
}

@container main (inline-size >= 358px) {
	.emphasis {
		font-size: 1.375rem;
	}
}

@container main (inline-size >= 712px) {
	.emphasis {
		font-size: 1.625rem;
	}
}

@container main (inline-size >= 992px) {
	.emphasis {
		font-size: 1.875rem;
	}
}

.unit {
	font-size: 0.875rem;
	font-weight: 600;
	translate: 0 -1px;
}

@container main (inline-size >= 358px) {
	.unit {
		font-size: 1rem;
	}
}

/* ---------- comment ---------- */
.comments_content {
    padding-block: var(--space-block-1);
    padding-inline: var(--space-inline-05);
    font-size: 0.875rem;
    border: 2px solid var(--color-orange);
    border-radius: var(--radius-base);
    & p {
        margin-block-end: 0; /* for Lightning */
    }
}

@container main (inline-size >= 712px) {
    .comments_content {
        padding-inline: var(--space-inline-1);
        font-size: 1rem;
    }
}

@container main (inline-size >= 992px) {
    .comments_content {
        padding-block: var(--space-block-1);
        padding-inline: var(--space-inline-15);
        font-size: 1.125rem;
    }
}

/* ---------- property details ---------- */
.details_list {
	margin-block-end: 0; /* for Lightning */
	font-size: 0.875rem;
	border: var(--border-base);
	border-block-end: none;
	&.facilities {
		& ul {
			display: flex;
            flex-wrap: wrap;
            column-gap: var(--space-inline-05);
            row-gap: var(--space-block-05);
            margin-block-end: 0; /* for Lightning */
            padding-inline-start: 0; /* for Lightning */
			& li {
				display: inline-block;
				margin-block: 0; /* for Lightning */
				padding-block: var(--space-block-0125);
				padding-inline: var(--space-inline-05);
				font-size: 0.75rem;
				font-weight: 600;
				background-color: var(--background-base);
				border: var(--border-base);
				border-radius: var(--radius-small);
				&::before {
					content: none;
				}
			}
		}
	}
}

@container main (inline-size >= 358px) {
	.details_list {
		display: grid;
		grid-template-columns: repeat(1, 36% minmax(0, 1fr));
		&:is(.facilities, .notes, .nearby) {
			grid-template-columns: minmax(0, 1fr);
			.details_label {
				place-items: revert;
				padding-inline: var(--space-inline-1);
			}
		}
	}
}

@container main (inline-size >= 712px) {
	.details_list {
		grid-template-columns: repeat(2, 20% minmax(0, 1fr));
		border-inline-end: none;
		&:is(.facilities, .notes, .nearby) {
			grid-template-columns: 24% minmax(0, 1fr);
			.details_label {
				place-items: center;
			}
		}
		&.facilities {
			& ul {
				& li {
					font-size: 0.875rem;
				}
			}
		}
	}
}

@container main (inline-size >= 992px) {
	.details_list {
		font-size: 1rem;
		&:is(.facilities, .notes, .nearby) {
			grid-template-columns: 20% minmax(0, 1fr);
		}
		&.facilities {
			& ul {
				& li {
					font-size: 1rem;
					font-weight: normal;
				}
			}
		}
	}
}

/* ---------- details label / value ---------- */
:is(.details_label, .details_value) {
	padding-block: var(--space-block-1);
	padding-inline: var(--space-inline-05);
	border-block-end: var(--border-base);
}

@container main (inline-size >= 992px) {
	:is(.details_label, .details_value) {
		padding-block: var(--space-block-15);
		padding-inline: var(--space-inline-15);
	}
}

/* ---------- details label ---------- */
.details_label {
    margin-block-end: 0; /* for Lightning */
	font-weight: 600;
	background-color: var(--background-base);
}

@container main (inline-size >= 358px) {
	.details_label {
		display: grid;
		place-items: center;
		border-inline-end: var(--border-base);
	}
}

/* ---------- details value ---------- */
.details_value {
	display: grid;
	align-items: center;
	&:has(.details_value_text) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}
}

@container main (inline-size >= 712px) {
	.details_value {
		border-inline-end: var(--border-base);
		&.col_span {
			grid-column: 2 / -1;
		}
	}
}

.pre_line {
	white-space: pre-line;
}

/* ---------- property map ---------- */
.google_map {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    border: var(--border-base);
}

@container main (inline-size >= 992px) {
    .google_map {
        aspect-ratio: 16 / 9;
    }
}

/* ==================================================
 * 
 *      お問い合わせフォーム
 * 
 * ================================================== */
.property_inquiry_header {
	display: grid;
	justify-items: center;
	row-gap: var(--space-block-05);
	+ * {
		margin-block-start: var(--space-block-2);
	}
}

.property_inquiry_heading {
	display: grid;
    justify-items: center;
    margin-block-end: 0;
    padding-block: 0;
    line-height: var(--leading-base);
    border-block: none;
}

.property_inquiry_heading_text {
	font-size: 1.375rem;
}

@container main (inline-size >= 358px) {
	.property_inquiry_heading_text {
		font-size: 1.5rem;
	}
}

@container main (inline-size >= 712px) {
	.property_inquiry_heading_text {
		font-size: 1.625rem;
	}
}

@container main (inline-size >= 992px) {
	.property_inquiry_heading_text {
		font-size: 1.75rem;
	}
}

.property_inquiry_heading_subtext {
	order: -1;
	color: var(--color-blue);
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
}

.property_inquiry_header_description {
    margin-block-end: 0;
	color: var(--color-gray);
	font-size: 0.875rem;
	text-align: center;
}

@container main (inline-size >= 358px) {
	.property_inquiry_header_description {
		font-size: 1rem;
	}
}

@container main (inline-size >= 712px) {
	.property_inquiry_header_description {
		inline-size: 34ic;
	}
}

/* ---------- inquiry form ---------- */
fieldset {
	&:nth-of-type(n + 3) {
		margin-block-start: var(--space-block-2);
	}
}

@container main (inline-size >= 712px) {
	fieldset {
		&:nth-of-type(n + 3) {
			margin-block-start: var(--space-block-3);
		}
	}
}

@container main (inline-size >= 992px) {
	fieldset {
		&:nth-of-type(n + 3) {
			margin-block-start: var(--space-block-4);
		}
	}
}

/* ---------- inquiry heading ---------- */
.inquiry_heading {
	padding-inline-start: var(--space-inline-05);
	font-size: 1.125rem;
	font-weight: 600;
	border-inline-start: 3px solid var(--color-green);
}

@container main (inline-size >= 358px) {
	.inquiry_heading {
		font-size: 1.25rem;
	}
}

@container main (inline-size >= 712px) {
	.inquiry_heading {
		font-size: 1.375rem;
	}
}

@container main (inline-size >= 992px) {
	.inquiry_heading {
		font-size: 1.5rem;
	}
}

/* ---------- inquiry sub heading ---------- */
.inquiry_sub_heading {
	padding-inline-start: var(--space-inline-05);
	font-weight: 600;
	border-inline-start: 2px solid var(--color-orange);
}

@container main (inline-size >= 358px) {
	.inquiry_sub_heading {
		font-size: 1.125rem;
	}
}

@container main (inline-size >= 712px) {
	.inquiry_sub_heading {
		font-size: 1.25rem;
	}
}

@container main (inline-size >= 992px) {
	.inquiry_sub_heading {
		font-size: 1.375rem;
	}
}

/* ---------- inquiry list ---------- */
.inquiry_list {
	margin-block-start: var(--space-block-1);
    margin-block-end: 0;
	border: var(--border-base);
	border-block-end: none;
}

@container main (inline-size >= 712px) {
	.inquiry_list {
		display: grid;
		grid-template-columns: 32% minmax(0, 1fr);
	}
}

@container main (inline-size >= 992px) {
	.inquiry_list {
		grid-template-columns: 28% minmax(0, 1fr);
	}
}

/* ---------- inquiry label / value ---------- */
:is(.inquiry_label, .inquiry_value) {
    margin-block-end: 0;
	padding-block: var(--space-block-1);
	padding-inline: var(--space-inline-05);
	border-block-end: var(--border-base);
}

@container main (inline-size >= 992px) {
	:is(.inquiry_label, .inquiry_value) {
		padding-block: var(--space-block-15);
	}
}

/* ---------- inquiry label ---------- */
.inquiry_label {
	background-color: var(--background-base);
	& label {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: var(--space-inline-05);
		inline-size: fit-content;
	}
}

@container main (inline-size >= 712px) {
	.inquiry_label {
		border-inline-end: var(--border-base);
	}
}

@container main (inline-size >= 992px) {
	.inquiry_label {
		padding-inline: var(--space-inline-1);
		& label {
			column-gap: 0;
			inline-size: auto;
		}
	}
}

.inquiry_label_text {
	font-weight: 600;
	line-height: 1;
}

.inquiry_label_icon {
	order: -1;
	padding-block: var(--space-block-025);
	padding-inline: var(--space-inline-05);
	color: var(--color-white);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--radius-small);
	&.required {
		background-color: var(--color-orange);
	}
	&.optional {
		background-color: var(--color-green);
	}
}

@container main (inline-size >= 992px) {
	.inquiry_label_icon {
		order: 0;
		justify-self: end;
	}
}

/* ---------- inquiry value ---------- */
.inquiry_value {
	display: grid;
	row-gap: var(--space-block-05);
	&:has(.inquiry_item) {
		row-gap: var(--space-block-1);
	}
	&:has([name="land_area"], [name="building_area"], [name="loan_balance"], [name="price"]) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		column-gap: var(--space-inline-05);
		.wpcf7-radio {
			grid-template-columns: max-content minmax(0, 1fr);
			column-gap: var(--space-inline-05);
		}
		.unit {
			font-size: 0.875rem;
			font-weight: 600;
		}
		.inquiry_note {
			grid-column: 1 / -1;
		}
	}
}

@container main (inline-size >= 358px) {
	.inquiry_value {
		&:has([name="zip"], [name="zip2"]) {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			column-gap: var(--space-inline-05);
			.inquiry_item {
				&:is(:first-of-type, :nth-of-type(4), :last-of-type) {
					grid-column: 1 / -1;
				}
			}
		}
		&:has([name="number_of_rooms"]) {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			column-gap: var(--space-inline-05);
			.inquiry_note {
				grid-column: 1 / -1;
			}
		}
		&:has([name="your_contact_date[]"]) {
			grid-template-columns: auto minmax(0, 1fr);
			align-items: start;
			column-gap: var(--space-inline-2);
		}
	}
	.wpcf7-form-control-wrap {
		&:has([name="building_age"]) {
			inline-size: calc((100% - var(--space-inline-05)) / 2);
		}
	}
}

@container main (inline-size >= 712px) {
	.inquiry_value {
		padding-inline: var(--space-inline-1);
		&:has([name="zip"], [name="zip2"]) {
			column-gap: var(--space-inline-1);
		}
		&:has([name="land_area"], [name="building_area"], [name="loan_balance"], [name="price"]) {
			column-gap: var(--space-inline-1);
			.wpcf7-radio {
				column-gap: var(--space-inline-1);
			}
			.unit {
				font-size: 1rem;
			}
		}
		&:has([name="number_of_rooms"]) {
			column-gap: var(--space-inline-1);
		}
		&:has([name="your_contact_date[]"]) {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			column-gap: var(--space-inline-1);
		}
		.wpcf7-form-control-wrap {
			&:has([name="building_age"]) {
				inline-size: calc((100% - var(--space-inline-1)) / 2);
			}
		}
	}
}

/* ---------- inquiry item ---------- */
.inquiry_item {
	display: grid;
	row-gap: var(--space-block-05);
}

@container main (inline-size >= 358px) {
	.inquiry_item {
		&:has(.flatpickr) {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			column-gap: var(--space-inline-05);
			.inquiry_item_label {
				grid-column: 1 / -1;
			}
		}
	}
}

@container main (inline-size >= 712px) {
	.inquiry_item {
		&:has(.flatpickr) {
			column-gap: var(--space-inline-1);
		}
	}
}

.inquiry_item_label {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	inline-size: fit-content;
}

/* ---------- inquiry note ---------- */
.inquiry_note {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: var(--space-inline-025);
	color: var(--color-gray);
	font-size: 0.875rem;
	line-height: 1;
	&.example {
		&::before {
			content: "例）";
		}
	}
	&.asterisk {
		&::before {
			content: "※";
		}
	}
}

[data-name="assessment_method"] {
	+ .inquiry_note {
		line-height: var(--leading-base);
	}
}

@container main (inline-size >= 358px) {
	[data-name="assessment_method"] {
		+ .inquiry_note {
			&::before {
				text-indent: 1em;
			}
		}
	}
}

/* ---------- Flatpickr ---------- */
input[type="text"] {
	&.flatpickr {
		cursor: pointer;
		&::placeholder {
			color: var(--color-black);
			font-style: normal;
		}
	}
}

/* ---------- Zipaddr ---------- */
#autozip {
	display: none !important;
}

:is(input[name="zip"], input[name="zip2"]) {
	inline-size: calc((100% - var(--space-inline-05)) / 2);
	&::placeholder {
		color: transparent;
	}
}

@container main (inline-size >= 712px) {
	:is(input[name="zip"], input[name="zip2"]) {
		inline-size: calc((100% - var(--space-inline-1)) / 2);
	}
}

/* ---------- inquiry footer ---------- */
.inquiry_footer {
	display: grid;
	justify-items: center;
	row-gap: var(--space-block-1);
}

.wpcf7-spinner {
	display: none !important;
}

/* ---------- エラーメッセージ ---------- */
.wpcf7-form-control-wrap {
	&:has(.wpcf7-not-valid) {
		display: grid;
		row-gap: var(--space-block-05);
	}
}

input:is([type="text"], [type="email"], [type="tel"], [type="number"]),
select,
textarea {
	&.wpcf7-not-valid {
		background-color: rgb(from var(--color-red) r g b / 0.1);
		border: 2px solid var(--color-red);
	}
}

.wpcf7-not-valid-tip {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--space-inline-025);
    color: var(--color-red) !important;
	font-size: 0.875rem !important;
    font-weight: 600 !important;
	line-height: 1;
	&::before {
		content: "※";
	}
}

@container main (inline-size >= 358px) {
	.wpcf7-not-valid-tip {
		font-size: 1rem !important;
	}
}

/* ---------- レスポンスメッセージ ---------- */
.wpcf7 form.wpcf7-form .wpcf7-response-output {
    display: grid;
    place-items: center;
    margin-block-start: 3rem;
    margin-inline: auto;
    padding-block: var(--space-block-1);
    padding-inline: var(--space-inline-1);
    inline-size: min(100%, 35rem);
}

/* ==================================================
 * 
 *      無効・非表示
 * 
 * ================================================== */
/* Lightningのクレジット表記 */
.site-footer-copyright p:nth-child(2) {
    display: none;
}

/* ---------- blog card ---------- */
.blogcard_inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	align-items: center;
	border: var(--border-base);
	border-radius: var(--radius-base);
	overflow: hidden;
}

.blogcard_thumbnail {
	inline-size: 120px;
	border-inline-start: var(--border-base);
	& img {
		aspect-ratio: 1;
		object-fit: cover;
	}
}

.blogcard_content {
	order: -1;
	padding: 0.75rem;
}

.blogcard_title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--color-fg-base);
	font-weight: 600;
}

.blogcard_excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	color: var(--color-gray);
	font-size: 0.875rem;
}

.blogcard_link_text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	color: var(--color-gray-60);
	font-size: 0.75rem;
}