@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,1,-50..200&icon_names=pause');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,1,-50..200&icon_names=play_arrow');

body {
	background: var(--green);
}

/* =========================== */
/* メインビジュアル */
/* min-width: 375px～546px～764px～920px～1264px～max-width: 1800px */
/* =========================== */
section#main-visual {
	margin-top: -100px;
	height: 80svh;
	min-height: 548px;
	background: url('./assets/img/common/bg.png') repeat;
	background-size: 200px;
	background-color: var(--white);
	& .section-wrapper {
		width: 100%;
		height: 100%;
		position: relative;
	}
	& .em-wrapper {
		position: absolute;
		top: 168px;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 24px);
		z-index: 20;
	}
	& .em-wrapper em {
		padding: 4px;
		font-family: var(--line);
		font-size: 24px;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 52px;
		color: var(--orange);
		font-style: normal;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
}
section#main-visual .hand-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	right: 0;
	bottom: 0;
	& .family,
	& .hand {
		position: absolute;
	}
	& .family {
		width: 60px;
		right: 52px;
		z-index: 4;
	}
	& .family {
		right: 45px;
		bottom: 36px;
		width: 132px;
	}
	& .hand {
		right: 0;
		bottom: -180px;
		width: 320px;
		height: 400px;
		z-index: 3;
	}
	& .hand img {
		height: 100%;
		object-fit: cover;
		object-position: left 50%;
	}
}
section#main-visual .city {
	position: absolute;
	height: 65%;
	bottom: -16px;
	z-index: 0;
	& img {
		height: 100%;
		object-fit: cover;
		object-position: 10% 50%;
	}
}
.wf-active section#main-visual,
.wf-inactive section#main-visual {
	& .em-wrapper em {
		/* background: linear-gradient(to right, #fff 50%, transparent 50%); */
		background-size: 200% 100%;
		animation-duration: 1s;
		animation-name: back;
		animation-timing-function: linear;
	}
}
/* 白座布団アニメーション */
@keyframes back {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: 0% 0;
	}
}

@media print, screen and (min-width: 546px) {
	section#main-visual {
		height: 70svh;
		& .em-wrapper {
			width: auto;
			top: 40%;
			left: 35%;
		}
	}
	section#main-visual .hand-wrapper {
		& .family {
			right: 92px;
		}
		& .hand {
			width: 380px;
		}
	}
}
@media print, screen and (min-width: 764px) {
	section#main-visual {
		height: 65svh;
		& .em-wrapper em {
			font-size: 32px;
			line-height: 2;
		}
	}
	section#main-visual .hand-wrapper {
		& .family {
			right: 96px;
		}
	}
	section#main-visual .city {
		height: 60%;
	}
}
@media print, screen and (min-width: 920px) {
	section#main-visual {
		height: 60svh;
	}
	section#main-visual .hand-wrapper {
		& .family {
			right: 192px;
		}
		& .hand {
			width: 460px;
		}
	}
	section#main-visual .city {
		height: 75%;
	}
}
@media print, screen and (min-width: 1264px) {
	section#main-visual {
		height: 70svh;
	}
	section#main-visual {
		& .em-wrapper {
			width: auto;
			top: 50%;
			left: 10%;
			transform: translateY(-50%);
		}
	}
	section#main-visual .hand-wrapper {
		& .hand {
			bottom: -220px;
			width: 680px;
			height: 560px;
		}
		& .family {
			bottom: 84px;
			right: 288px;
			width: 180px;
		}
	}
	section#main-visual .city {
		height: 100%;
		bottom: -4px;
		& img {
			object-position: inherit;
		}
	}
}

/* ======================================= */
/* 株式会社物件ハートは～不動産会社です。 */
/* ======================================= */
section#top-company {
	background: var(--green);
	position: relative;
	& span.bg-wave {
		position: absolute;
		display: block;
		bottom: calc(100% - 1px);
		width: 100%;
		height: 10px;
		background: url("./assets/img/common/bg-wave-green.svg") repeat-x center;
		background-size: 100px;
		color-scheme: light normal;
	}
}
section#top-company .section-wrapper > div.flex {
	flex-flow: column;
	margin: 0 auto;
	padding: 60px 0;
	width: 95%;
}
section#top-company .text-wrapper {
	margin-bottom: 32px;
	& h2 {
		display: inline;
		padding: 2px 0;
		font-family: var(--line);
		font-weight: 700;
		font-size: 1.3em;
		line-height: 32px;
		word-break: keep-all;
		/* background: linear-gradient(transparent 0%, #fff 0%); */
	}
	& h2 span {
		font-family: var(--line);
		font-size: 1em;
		font-weight: 700;
		line-height: 32px;
		color: #d34e19;
	}
	& p {
		margin-top: 24px;
		line-height: 2;
		font-weight: 500;
		/* font-feature-settings: "palt"; */
	}
	& p span {
		/* margin: 0 2px; */
		/* padding-top: 1px; */
		color: #d34e19;
		font-weight: 600;
		/* background: linear-gradient(transparent 0%, #fff 0%); */
	}
}
section#top-company .section-wrapper > div.flex .img-wrapper {
	width: 220px;
	height: auto;
	& img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

@media print, screen and (min-width: 764px) {
	section#top-company {
		& span.bg-wave {
			height: 15px;
			background-size: 138px;
		}
	}
	section#top-company .section-wrapper {
		width: 80%;
		margin: 0 auto;
	}
	section#top-company .section-wrapper > div.flex {
		flex-flow: row;
		justify-content: space-between;
	}
	section#top-company .section-wrapper > div.flex .text-wrapper {
		width: 62%;
	}
	section#top-company .section-wrapper > div.flex .img-wrapper {
		width: 35%;
		max-width: 260px;
	}
}


/* ======================================= */
/* 物件に関するご相談は物件ハートにおまかせください！ */
/* ======================================= */
section#top-slick {
	background: var(--white);
}
section#top-slick .section-wrapper {
	padding: 52px 0;
	background: var(--white);
	overflow: hidden;
	& h2 {
		width: calc(100% - 48px);
		margin: 0 auto;
		font-family: var(--line);
		font-weight: 700;
		font-size: 1.3em;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
}
section#top-slick .top-slick {
	margin: 0 auto;
	margin-top: 40px;
	position: relative;
	& .slick-list {
		overflow: visible;
	}
	& .slick-arrow {
		position: absolute;
		width: 64px;
		height: 64px;
		top: 75%;
		background: var(--black);
		z-index: 1;
		border-radius: 50%;
		transition: all .2s;
	}
	& .slick-arrow::before {
		position: absolute;
		content: '\e5e0';
		align-content: center;
		text-align: center;
		width: 100%;
		height: 100%;
		color: var(--white);
		top: 50%;
		font-family: 'material symbols outlined';
		font-size: 24px;
		opacity: 1;
	}
	& .slick-arrow.slick-prev {
		left: 6px;
	}
	& .slick-arrow.slick-prev::before {
		left: 6%;
		transform: translateY(-50%);
	}
	& .slick-arrow.slick-next {
		right: 6px;
	}
	& .slick-arrow.slick-next::before {
		right: 6%;
		transform: translateY(-50%) scale(-1, 1);
	}
	& .slick-slide {
		margin: 0 12px;
		padding: 12px;
		background: var(--green);
		border-radius: 25px;
		position: relative;
	}
}
section#top-slick .top-slick .list-wrapper {
	flex-flow: column;
	justify-content: space-between;
	height: 348px;
	background: var(--white);
	border-radius: 16px;
	position: relative;
	& .text-wrapper {
		padding: 12px;
		padding-top: 28px;
		position: relative;
	}
	& .text-wrapper p.hukidashi {
		position: absolute;
		display: inline-block;
		bottom: calc(100% - 1em);
		left: 0;
		margin-top: 0;
		padding: 6px 12px;
		padding-top: 8px;
		max-width: 100%;
		background: var(--orange);
		color: #fff;
		border-radius: 6px;
		font-weight: 500;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	& .text-wrapper p.hukidashi::after {
		position: absolute;
		content: '';
		width: 16px;
		height: 8px;
		top: calc(100% - 1px);
		left: 24px;
		background: var(--orange);
		clip-path: polygon(0 0, 50% 100%, 100% 0);
	}
	& .text-wrapper h3 {
		font-family: var(--line);
		font-size: 1.3em;
		font-weight: 700;
	}
	& .text-wrapper p {
		margin-top: 12px;
	}
	& .img-wrapper {
		width: 120px;
		margin-bottom: 36px;
	}
}
section#top-slick .slick-control {
	margin-top: 20px;
	height: 40px;
	& .slick-toggle {
		width: 40px;
		height: 40px;
		margin-right: 18px;
		background: var(--green);
		border-radius: 50%;
		position: relative;
	}
	& .slick-toggle::before {
		position: absolute;
		content: '\e034';
		align-content: center;
		text-align: center;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		height: 100%;
		color: var(--black);
		font-family: 'material symbols outlined';
		font-size: 28px;
	}
	& .slick-toggle.is-paused::before {
		content: '\e037';
	}
	& .slick-dots {
		position: inherit;
		display: flex;
		bottom: inherit;
		width: inherit;
		height: 40px;
		gap: 12px;
	}
	& .slick-dots li {
		width: inherit;
		height: inherit;
		margin: inherit;
	}
	& .slick-dots li button {
		width: inherit;
		height: inherit;
	}
	& .slick-dots li button:before {
		content: '';
		top: 50%;
		transform: translateY(-50%);
		width: 12px;
		height: 12px;
		border-radius: 50%;
		opacity: 1;
		background: #C8C8C8;
		transition: background .3s;
	}
	& .slick-dots li.slick-active button:before {
		opacity: 1;
		background: var(--black);
	}
}
/* ホバー時 */
@media (hover: hover) and (pointer: fine) {
	section#top-slick .top-slick {
		& .slick-arrow:hover {
			background: #505050;
		}
	}
	section#top-slick .slick-control {
		& .slick-dots li button:hover::before {
			background: var(--black);
		}
	}
}

@media print, screen and (min-width: 764px) {
	section#top-slick {
		background: var(--green);
		overflow: hidden;
	}
	section#top-slick .section-wrapper {
		width: 90%;
		margin: 0 auto;
		background: var(--white);
		border-radius: 35px;
		overflow: visible;
		& h2 {
			text-align: center;
		}
	}
	section#top-slick .top-slick {
		max-width: 1000px;
		& .slick-slide {
			margin: 0 35px;
			padding: 50px 52px 34px 52px;
			border: 4px solid var(--white);
		}
		& .slick-arrow {
			width: 80px;
			height: 80px;
			top: 50%;
		}
		& .slick-arrow.slick-prev {
			left: 40px;
		}
		& .slick-arrow.slick-next {
			right: 40px;
		}
	}
	section#top-slick .top-slick .list-wrapper {
		flex-flow: row;
		height: 280px;
		& .text-wrapper {
			width: 70%;
			height: 100%;
			padding: 20px;
			padding-top: 32px;
		}
		& .text-wrapper p.hukidashi {
			width: max-content;
			width: -webkit-max-content;
			max-width: calc(10 / 7 * 100%);
			padding: 8px 20px;
			padding-top: 12px;
		}
		& .img-wrapper {
			width: 25%;
			padding-right: 20px;
			margin-bottom: inherit;
		}
	}
}

@media print, screen and (min-width: 860px) {
	section#top-slick .top-slick .list-wrapper {
		height: 240px;
	}
}