.page-fv__wrapper{

}

.page-concept__img{
	margin:6.25rem auto 0;
	@media screen and (max-width: 767px) {
		margin-top: 1.25rem;
	}
	max-width:56.625rem;
	width: 100%;
	height: auto;
	object-fit: contain;
	img{
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}

/* セルフ内覧：課題（styles.css のベース活用・枠は self-tour のみ追記） */
/* SP: Figma 3363-107591 */
.self-tour-challenges--pain {
	margin-top: 1.25rem;
	margin-bottom: 2.5rem;

	@media screen and (max-width: 767px) {
		margin-top: 1rem;
	}

	.self-tour-challenges__body {
		box-sizing: border-box;
	}

	.page-feature__resolutions {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: space-between;
		column-gap: 1.25rem;
		max-width: 60rem;
		width: 100%;
		margin: 0 auto;

		@media screen and (max-width: 767px) {
			display: block;
			max-width: 19.25rem;
			width: 100%;
			margin-left: auto;
			margin-right: auto;
		}
	}

	.page-feature__resolution {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
		margin-left: 0;
		margin-right: 0;

		@media screen and (max-width: 767px) {
			flex: none;
			width: 100%;
			max-width: 19.25rem;
			min-width: auto;
			margin-left: auto;
			margin-right: auto;
			border-radius: 0.25rem;
		}
	}

	.page-feature__resolution:not(:first-child) {
		margin-top: 0;

		@media screen and (max-width: 767px) {
			margin-top: 1rem;
		}
	}

	.page-feature__resolution h4 {
		@media screen and (max-width: 767px) {
			font-size: 1.25rem;
			line-height: 1.6;
			letter-spacing: 0.08em;
			text-align: center;
		}
	}

	.page-feature__resolution figure.page-feature__image {
		width: 10rem;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;

		@media screen and (max-width: 767px) {
			width: 10rem;
			margin-top: 1rem;
		}

		img {
			width: 100%;
			height: auto;

			@media screen and (max-width: 767px) {
				width: 100%;
				height: auto;
				object-fit: cover;
			}
		}
	}

	.page-feature__resolution ul {
		@media screen and (max-width: 767px) {
			margin-top: 1.25rem;
		}
	}

	.page-feature__resolution ul li {
		@media screen and (max-width: 767px) {
			font-size: 0.875rem;
			font-weight: 500;
			line-height: 1.6;
		}
	}
}

/*
 * 予約〜当日の流れ（リスト2カラム／画像 max-width）
 */
/* SP: Figma 3363-107610 */
.self-tour-flow--steps {
	margin-top: 1.25rem;
	margin-bottom: 2.5rem;

	@media screen and (max-width: 767px) {
		margin-top: 1rem;
	}

	.self-tour-flow__body {
		box-sizing: border-box;
		padding: 1.25rem 0;
		background-color: #fff;

		@media screen and (max-width: 767px) {
			padding: 0;
		}
	}

	.page-feature__resolutions {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		column-gap: 4%;
		margin-top: 0;
		padding: 1.25rem;
		background-color: #fff;

		max-width:60rem;
		width: 100%;
		margin: 0 auto;

		@media screen and (max-width: 767px) {
			display: block;
			max-width: 20.9375rem;
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			padding: 1.25rem 0.625rem;
			border-radius: 0.25rem;
		}
	}

	.page-feature__resolution {
		flex: 0 0 47%;
		max-width: 47%;
		width: 47%;
		padding: 0;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
		p{
			min-height: 5rem;
		}

		@media screen and (max-width: 767px) {
			flex: none;
			width: 100%;
			max-width: 100%;
			padding: 0;
			background: transparent;
		}

		p {
			@media screen and (max-width: 767px) {
				min-height: 0;
				max-width: 19.6875rem;
				margin-left: auto;
				margin-right: auto;
				padding-left: 0.625rem;
				padding-right: 0.625rem;
				font-size: 0.875rem;
				font-weight: 500;
				line-height: 1.6;
				letter-spacing: 0.1em;
			}
		}
	}

	.page-feature__resolution:not(:first-child) {
		margin-top: 0;

		@media screen and (max-width: 767px) {
			margin-top: 1rem;
		}
	}

	.page-feature__resolution.page-feature__resolution-no2 {
		h4 {
			@media screen and (max-width: 767px) {
				max-width: 20.9375rem;
				margin-left: auto;
				margin-right: auto;
				font-size: 1rem;
				line-height: 2.25rem;
				letter-spacing: 0.1em;
				padding-left: 0.875rem;
			}
		}

		figure.page-feature__image {
			display: block;
			width: 100%;
			max-width: 18.75rem;
			flex-shrink: 0;
			margin-left: auto;
			margin-right: auto;

			@media screen and (max-width: 767px) {
				width: 15rem;
				max-width: 15rem;
			}

			img {
				width: 100%;
				height: auto;
				display: block;

				@media screen and (max-width: 767px) {
					width: 100%;
					height: auto;
					object-fit: contain;
				}
			}
		}

		&:nth-child(1) figure.page-feature__image {
			max-width: 14.5rem;

			@media screen and (max-width: 767px) {
				max-width: 15rem;
			}
		}

		&:nth-child(2) figure.page-feature__image {
			max-width: 15rem;

			@media screen and (max-width: 767px) {
				max-width: 15rem;
			}
		}

		figure.page-feature__image-mr {
			margin-top: 2.5rem;

			@media screen and (max-width: 767px) {
				margin-top: 0.625rem;
			}
		}

		&:nth-child(1) {
			p {
				@media screen and (max-width: 767px) {
					margin-top: 0.625rem;
				}
			}

			figure.page-feature__image {
				@media screen and (max-width: 767px) {
					margin-top: 0.625rem;
				}
			}
		}

		&:nth-child(2) {
			p {
				@media screen and (max-width: 767px) {
					margin-top: 1rem;
				}
			}

			figure.page-feature__image {
				@media screen and (max-width: 767px) {
					margin-top: 1rem;
				}
			}
		}
	}
}


@media screen and (min-width: 768px) {
	.top-products__items--3items {
		grid-template-columns: repeat(3, 1fr);
		max-width: 60rem;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Figma 3363-108126：アイオプトのセルフ内覧の流れ（見出し〜動画 gap 40px、動画 max 640px） */
.self-tour-flow-video {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.self-tour-flow-video h3 {
	width: 100%;
	box-sizing: border-box;
}

.self-tour-flow-video__media {
	margin-top: 2.5rem;
	width: 100%;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;

	video {
		width: 100%;
		height: auto;
		display: block;
	}
}

/* Figma 3363-108133：連携可能な機種 */
/* SP: Figma 3363-107703 */
.self-tour-compatible__body {
	margin-top: 2.5rem;
	width: 100%;
	max-width: 56.9375rem;
	margin-left: auto;
	margin-right: auto;

	@media screen and (max-width: 767px) {
		margin-top: 1rem;
		max-width: 20.9375rem;
	}
}

.self-tour-compatible__group + .self-tour-compatible__group {
	margin-top: 3.5625rem;

	@media screen and (max-width: 767px) {
		margin-top: 2.5rem;
	}
}

.self-tour-compatible__subheading {
	position: relative;
	padding-left: 1.25rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 2.25rem;
	letter-spacing: 0.1em;
	color: #6d6d6d;

	@media screen and (max-width: 767px) {
		padding-left: 0.875rem;
		font-size: 1rem;
		line-height: 2.25rem;
		letter-spacing: 0.1em;
	}

	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.125rem;
		width: 0.25rem;
		height: 2rem;
		background: #00b0ca;

		@media screen and (max-width: 767px) {
			top: 0.125rem;
			width: 0.1875rem;
			height: 2rem;
		}
	}
}

.self-tour-compatible__cards {
	list-style: none;
	margin: 0;
	padding: 0;
}

.self-tour-compatible__cards--2col {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;

	@media screen and (max-width: 767px) {
		align-items: stretch;
		margin-top: 1.125rem;
		gap: 1.5625rem;
	}
}

@media screen and (min-width: 768px) {
	.self-tour-compatible__cards--2col {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		gap: 3.6875rem;
	}
}

.self-tour-compatible__card {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 100%;
	max-width: 26.625rem;

	@media screen and (max-width: 767px) {
		max-width: 100%;
		gap: 1rem;
	}
}

.self-tour-compatible__figure {
	margin: 0;
	/* background: #f1e4d2; */
	border-radius: 0.625rem;
	aspect-ratio: 426 / 243;
	display: flex;
	align-items: center;
	/* justify-content: center; */
	overflow: hidden;

	@media screen and (max-width: 767px) {
		aspect-ratio: 335 / 208.87;
		width: 100%;
		/* background: #f1e4d2; */
		justify-content: center;
	}

	img {
		width: 100%;
		height: auto;
		object-fit: contain;

		@media screen and (max-width: 767px) {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
}

.self-tour-compatible__figure--delivery {
	aspect-ratio: 426 / 318;
	background: #fff;
	border: 1px solid #797878;

	@media screen and (max-width: 767px) {
		aspect-ratio: 335 / 208.87;
	}

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

.self-tour-compatible__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.1rem;
	color: #6d6d6d;

	@media screen and (max-width: 767px) {
		font-size: 1rem;
		line-height: 1.6;
		letter-spacing: 0.1rem;
	}
}

.self-tour-compatible__btn {
	width: fit-content;

	@media screen and (max-width: 767px) {
		width: 100%;

		.common-btn.common-btn--product {
			width: 100%;
			max-width: 100%;
		}
	}
}

.self-tour-compatible__cards--delivery {
	margin-top: 2rem;

	@media screen and (max-width: 767px) {
		margin-top: 1.125rem;
	}
}

.self-tour-compatible__card--delivery {
	max-width: 26.625rem;
	margin-left: auto;
	margin-right: auto;

	@media screen and (max-width: 767px) {
		flex-direction: column;
		align-items: stretch;
		max-width: 100%;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		gap: 1rem;

		.self-tour-compatible__figure--delivery {
			flex: none;
			max-width: 100%;
		}

		.self-tour-compatible__card-body {
			flex: none;
			min-width: 0;
		}
	}
}

.self-tour-compatible__card-body {
	display: flex;
	flex-direction: column;
	gap: 2rem;

	@media screen and (max-width: 767px) {
		gap: 1rem;
		width: 100%;
	}
}

@media screen and (min-width: 768px) {
	.self-tour-compatible__card--delivery {
		flex-direction: row;
		align-items: center;
		max-width: none;
		width: 100%;
		gap: 3.9375rem;
	}

	.self-tour-compatible__card--delivery .self-tour-compatible__figure--delivery {
		flex: 0 0 26.625rem;
		max-width: 26.625rem;
	}

	.self-tour-compatible__card--delivery .self-tour-compatible__card-body {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Figma 3363-108175：賃貸物件の付加価値向上サービス */
/* SP: Figma 3363-107754 */
.self-tour-value {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	width: 100%;

	@media screen and (max-width: 767px) {
		align-items: stretch;
		gap: 0;
		max-width: 20.9375rem;
		margin-left: auto;
		margin-right: auto;
	}
}

.self-tour-value__intro {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	width: 100%;

	@media screen and (max-width: 767px) {
		gap: 1rem;
	}
}

.self-tour-value__intro h3 {
	width: 100%;
	box-sizing: border-box;
}

.self-tour-value__lead {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.1em;
	color: #6d6d6d;

	@media screen and (max-width: 767px) {
		font-size: 0.875rem;
		line-height: 1.6;
		letter-spacing: 0.1em;
	}
}

.self-tour-value__body {
	width: 100%;
	max-width: 56.9375rem;
	margin-left: auto;
	margin-right: auto;

	@media screen and (max-width: 767px) {
		max-width: 100%;
	}
}

.self-tour-value .self-tour-compatible__cards--delivery {
	margin-top: 0;

	@media screen and (max-width: 767px) {
		margin-top: 1.125rem;
	}
}

.self-tour-value .self-tour-compatible__card--delivery {
	@media screen and (max-width: 767px) {
		margin-left: 0;
		margin-right: 0;
	}
}

/* モーダル（Figma 3385-108493） */
.modal__image--with-caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

#modal-13 .modal__image--with-caption img {
	width: auto;
	max-width: 12rem;
	max-height: 17.3125rem;
	height: auto;
	object-fit: contain;
}

.modal__image-caption {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
	color: #a7a7a7;
}

.modal__image--link-lock-s {
	width: 100%;
	min-width: 0;
}

.modal__image-gallery {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0.75rem;
	width: 100%;
}

.modal__image-gallery-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	flex: 0 1 auto;
}

.modal__image-gallery-item img {
	width: auto;
	max-height: 8rem;
	height: auto;
	object-fit: contain;
}

.modal__image-gallery-item:last-child img {
	max-height: 6.5rem;
}

.modal__detail-link {
	margin: 1rem 0 0;
	text-align: right;
}

.modal__detail-link a {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: #6d6d6d;
	text-decoration: underline;
}

.modal__note {
	margin: 0.75rem 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: #6d6d6d;
	font-weight: 700;
	@media screen and (max-width: 767px) {
		font-size: 0.8125rem;
		line-height: 1.6;
	}
}

@media screen and (min-width: 768px) {
	.modal__image-gallery-item img {
		max-height: 10rem;
	}

	.modal__image-gallery-item:last-child img {
		max-height: 7.875rem;
	}
}