@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

.owner-mainvisual {
	img {
		width: 100%;
		max-width: none;
	}
}

.owner-reason {
	padding: 64px 0 120px;
	font-family: var(--font_min);
	font-weight: 500;
	color: #64605b;
	@media (width < 810px) {
		padding: 32px 0 80px;
	}
}
.owner-reason__intro {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: calc((80 / 1600) * 100cqw);
	@media (width < 810px) {
		flex-wrap: wrap;
		align-items: center;
		gap: 32px calc((40 / 375) * 100cqw);
	}
}
.owner-reason__intro-left {
	width: calc((105 / 1600) * 100cqw);
	@media (width < 810px) {
		width: calc((80 / 375) * 100cqw);
		max-width: 80px;
		order: 1;
	}
	img {
		width: 100%;
		max-width: none;
	}
}
.owner-reason__intro-right {
	width: calc((145 / 1600) * 100cqw);
	@media (width < 810px) {
		width: calc((105 / 375) * 100cqw);
		max-width: 105px;
		order: 2;
	}
	img {
		width: 100%;
		max-width: none;
	}
}
.owner-reason__intro-block {
	padding-bottom: calc((72 / 1600) * 100cqw);
	@media (width < 810px) {
		width: 100%;
		padding-bottom: 0;
	}
}
.owner-reason__intro-ttl {
	word-break: keep-all;
	font-size: clamp(20px, 4.727px + 1.705vw, 32px);/*32~20(1600~810)*/
	font-weight: 600;
	line-height: 1.6;
}
.owner-reason__intro-txt {
	word-break: keep-all;
	font-size: clamp(1rem, 0.4873rem + 1.0127vw, 1.5rem);/*24~18(1600~810)*/
	line-height: 1.8;
	margin-top: 32px;
	@media (width < 810px) {
		margin-top: 24px;
	}
}
.owner-reason__graph {
	padding: 0 16px 16px;
	border: 4px solid #bbb5b2;
	background: #fff;
	margin-top: 64px;
	@media (width < 810px) {
		border-width: 3px;
	}
	+.owner-reason__graph {
		margin-top: 100px;
		@media (width < 810px) {
			margin-top: 64px;
		}
	}
}
.owner-reason__graph-ttl {
	width: calc(100% - 20px);
	max-width: 680px;
	margin-inline: auto;
	translate: 0 -50%;
	font-size: clamp(22px, 5.595px + 2.025vw, 38px);/*38~22(1600~810)*/
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	padding: 0.3em 0.8em;
	border-radius: 9999px;
	background: #bbb5b2;
	word-break: keep-all;
}
.owner-reason__graph-img {
	width: calc(100% - 44px);
	max-width: 1200px;
	margin-inline: auto;
	margin-top: 40px;
	@media (width < 810px) {
		width: 100%;
		margin-top: 12px;
	}
}
.owner-reason__note {
	margin: 40px 0 0 auto;
	inline-size: fit-content;
	font-size: clamp(0.75rem, 0.6218rem + 0.2532vw, 0.875rem);/*14~12(1600~810)*/
	@media (width < 810px) {
		margin-top: 24px;
	}
}


.owner-voice {
	padding: 64px 0 48px;
	background: color-mix(in srgb, #dfddc5 33%, #fff);
	font-family: var(--font_min);
	font-weight: 500;
	color: #64605b;
}
.owner-voice__intro {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: calc((64 / 1600) * 100cqw);
	@media (width < 810px) {
		flex-wrap: wrap;
		align-items: center;
		gap: 32px calc((40 / 375) * 100cqw);
	}
}
.owner-voice__intro-en {
	img {
		@media (width < 810px) {
			width: calc(165px * 0.7);
		}
	}
}
.owner-voice__intro-left {
	width: calc((147 / 1600) * 100cqw);
	@media (width < 810px) {
		width: calc((110 / 375) * 100cqw);
		max-width: 110px;
		order: 1;
	}
	img {
		width: 100%;
		max-width: none;
	}
}
.owner-voice__intro-right {
	width: calc((138 / 1600) * 100cqw);
	@media (width < 810px) {
		width: calc((105 / 375) * 100cqw);
		max-width: 105px;
		order: 2;
	}
	img {
		width: 100%;
		max-width: none;
	}
}
.owner-voice__intro-inner {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc((24 / 1600) * 100cqw);
	@media (width < 810px) {
		width: 100%;
		gap: calc((16 / 375) * 100cqw);
	}
	&::before, &::after {
		flex-shrink: 0;
		content: "";
		display: block;
		width: calc((98 / 1600) * 100cqw);
		height: calc((115 / 1600) * 100cqw);
		background: url("../../images/owner-voice/fukidashi_left.svg") center center / 100% auto no-repeat;
		@media (width < 810px) {
			width: calc((98 / 1000) * 100cqw);
			height: calc((115 / 1000) * 100cqw);
		}
	}
	&::after {
		background-image: url("../../images/owner-voice/fukidashi_right.svg");
	}
}
.owner-voice__intro-catch {
	word-break: keep-all;
	font-size: clamp(20px, 4.727px + 1.705vw, 32px);/*32~20(1600~810)*/
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin-top: 0.8em;
}
.owner-voice__intro-ttl {
	display: inline-block;
	word-break: keep-all;
	font-size: clamp(24px, 7.595px + 2.025vw, 40px);/*40~24(1600~810)*/
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	padding: 0.4em 0.2em 0;
	border-top: 1px dashed #64605b;
	margin-top: 0.2em;
}
.owner-voice__intro-txt {
	word-break: keep-all;
	font-size: clamp(1rem, 0.7437rem + 0.5063vw, 1.25rem);/*20~16(1600~810)*/
	margin-top: 1.2em;
}
.owner-voice__inner {
	margin-top: 48px;
	@media (width < 810px) {
		margin-top: 40px;
	}
}
.owner-voice__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 56px calc((72 / 1600) * 100cqw);
	@media (width < 1200px) {
		gap: 40px calc((48 / 1600) * 100cqw);
	}
	@media (width < 810px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 20px;
	}
	@media (width < 480px) {
		gap: 20px 12px;
	}
}
.owner-voice__item {
	img {
		width: 100%;
		max-width: none;
	}
}
.owner-voice__note {
	text-align: left;
	font-size: clamp(0.8125rem, 0.6843rem + 0.2532vw, 0.9375rem);/*15~13(1600~810)*/
	margin-top: 56px;
	@media (width < 810px) {
		margin-top: 40px;
	}
}

/* owner-voice modal
*****************************************************************/
.owner-voice-modal {
	position: relative;
	display: flex;
	justify-content: center;
	width: calc(100% - 40px);
	max-width: 900px;
	max-height: calc(100dvh - 96px);
	padding-inline: 56px;
	overflow: visible;
	@media (width < 810px) {
		width: calc(100% - 16px);
		max-height: calc(100dvh - 80px);
		padding-inline: 40px;
	}
}
.owner-voice-modal__img {
	display: flex;
	justify-content: center;
	align-items: center;
}
.owner-voice-modal__img img {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - 96px);
	width: auto;
	height: auto;
	@media (width < 810px) {
		max-height: calc(100dvh - 80px);
	}
}
.owner-voice-modal__close {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	border-radius: 0;
	width: 32px;
	height: 32px;
	position: absolute;
	top: -48px;
	right: 0;
	z-index: 50;
	cursor: pointer;
	&::before, &::after {
		content: "";
		display: block;
		width: 32px;
		height: 3px;
		border-radius: 9999px;
		background: #fff;
		position: absolute;
		top: 50%;
		left: 0;
	}
	&::before { transform: translateY(-50%) rotate(45deg); }
	&::after { transform: translateY(-50%) rotate(-45deg); }
	@media (width < 810px) {
		width: 24px;
		height: 24px;
		top: -36px;
		&::before, &::after {
			width: 24px;
			height: 2px;
		}
	}
}
.owner-voice-modal__arrow {
	background: rgba(255, 255, 255, 0.85);
	border: none;
	padding: 0;
	margin: 0;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	cursor: pointer;
	z-index: 50;
	&::before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 12px;
		height: 12px;
		border-top: 3px solid #64605b;
		border-right: 3px solid #64605b;
	}
	@media (width < 810px) {
		width: 28px;
		height: 28px;
		&::before {
			width: 8px;
			height: 8px;
			border-width: 2px;
		}
	}
}
.owner-voice-modal__arrow--prev {
	left: 0;
	&::before {
		translate: -30% -50%;
		rotate: -135deg;
	}
}
.owner-voice-modal__arrow--next {
	right: -0;
	&::before {
		translate: -70% -50%;
		rotate: 45deg;
	}
}