@charset "UTF-8";

/* ------------------------------------------------------------
  PCスタイル
 ------------------------------------------------------------ */
@media screen and (min-width: 768px) {
	/* ページヘッダー */
	.ll_ttl {
		padding: 22px 48px;
	}
	.llTtl_fig {
		width: 308px;
		height: 250px;
		position: absolute;
		left: -315px;
		bottom: -103px;
	}
	.ll_lead {
		margin-top: 70px;
		text-align: center;
	}

	/* コンテンツh4 */
	.ll_h4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50px;
		font-size: 25px;
		font-weight: 500;
		line-height: 1.0;
	}
	.ll_h4:before, .ll_h4:after {
		content: "";
		display: inline-block;
		width: 25px;
		height: 25px;
	}
	.ll_h4:before {
		background: url('../img/business/fig_h3_arrowL.svg') no-repeat center center / contain;
	}
	.ll_h4:after {
		background: url('../img/business/fig_h3_arrowR.svg') no-repeat center center / contain;
	}

	/* 相談例と流れ */
	.consul_example {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 20px 0 0;
	}
	.consul_example li {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 300px;
		padding: 1rem 0;
		border: 1px solid #000;
		border-radius: 50px;
		background: #fffdf3;
		font-weight: 500;
	}
	.consul_example li:not(:last-child) {
		margin-bottom: 10px;
	}
	.consul_flow {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 800px;
		padding: 0 50px !important;
		margin: 20px 0 0;
	}
	.consul_flow li {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 160px;
		font-weight: 500;
	}
	.consul_flow li img {
		margin-bottom: 10px;
	}

	/* 管理委託について */
	.ll_consgt {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: 150px;
		padding-bottom: 250px;
		border-radius: 100px 100px 0 0;
		background: #f4f4f4;
		position: relative;
		z-index: 1;
	}
	.ll_consgtTtl {
		padding: 0;
		margin-top: -25px;
		line-height: 1.1;
	}
	.ll_consgtTtl:after {
		content: "";
		display: block;
		width: calc( 2.5rem * 5.5 );
		height: 2.5rem;
		background: url('../img/company/fig_ttlunder_4char.svg') no-repeat left bottom / contain;
		position: absolute;
		left: -10px;
		bottom: -16px;
	}
	p.ll_h4 {
		margin-top: 100px;
		position: relative;
		z-index: 5;
	}

	/* 委託管理のメリット */
	.merits {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 0 2rem;
		align-items: flex-start;
		width: 1000px;
		padding: 43px 70px 50px 70px;
		margin-top: -10px;
		border-radius: 20px;
		background: #fff;
	}
	.merit_item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.merit_item dt {
		text-align: center;
	}
	.merit_item dt:before {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		margin: 0 auto 10px;
		border: 1px solid #000;
		border-radius: 20px;
		background: #ecf3ee;
		font-size: 1.125rem;
		font-weight: 500;
	}
	.merit_item:first-child dt:before {
		content: "1";
	}
	.merit_item:nth-child(2) dt:before {
		content: "2";
	}
	.merit_item:nth-child(3) dt:before {
		content: "3";
	}
	.merit_item:nth-child(4) dt:before {
		content: "4";
	}
	.merit_item dt span {
		display: inline-block;
		background: url('../img/landlord/fig_underline_merit.png') no-repeat left bottom;
		font-size: 16px; /* 18px */
		font-weight: 500;
		line-height: 1.2;
	}
	.merit_item dd {
		margin-top: 10px;
		font-size: 14px;
		text-align: justify;
	}

	/* 相談の流れ */
	.consulExam_wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 1000px;
		padding: 0 0 40px;
		margin-top: 70px;
		border-radius: 20px;
		background: #fff;
	}
	.consulExam_wrap h4,
	.consulFlow_wrap h4 {
		margin-top: -14px;
	}
	.consulExam_wrap ul {
		padding-top: 20px;
	}

	.consulFlow_wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 1000px;
		padding-bottom: 40px;
		margin-top: 70px;
		border-radius: 20px;
		background: #fff;
	}
	.consulFlow_wrap ol {
		margin-top: 30px;
		background: url('../img/landlord/fig_underline_step5.svg') no-repeat center top 32px / contain;
	}


	/* オーナーの声 */
	.ll_voice {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding-top: 100px;
		margin-top: -100px;
		border-radius: 100px 100px 0 0;
		background: #fff;
		position: relative;
		z-index: 300;
	}
	.ll_voiceTtl {
		padding: 0;
	}
	.ll_voiceTtl:after {
		content: "";
		display: block;
		width: calc( 2.5rem * 8.5 );
		height: 3rem;
		background: url('../img/landlord/fig_ttlunder_7char.svg') no-repeat left bottom / contain;
		position: absolute;
		left: -10px;
		bottom: -10px;
	}
	ul.ll_ownersList {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 850px;
		margin-top: 70px;
	}
	li.ll_ownerVoice {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 250px;
		height: 250px;
		overflow: hidden;
		position: relative;
	}
	li.ll_ownerVoice:hover .owner_header:after {
		filter: brightness(1.2);
	}
	li.ll_ownerVoice:hover .owner_voice:after {
		filter: brightness(0.8);
	}
	li.ll_ownerVoice:nth-child(n+4) {
		margin-top: 50px;
	}
	li.ll_ownerVoice article {
		width: 250px;
		height: 500px;
		position: absolute;
		top: 0;
		left: 0;
		transition: .1s;
	}
	.voice_active {
		transform: translateY(-250px);
		transition: .1s;
	}
	.owner_header {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 250px;
		background: #eef3ee;
		position:relative
	}

	.owner_header:after {
		content: "";
		display: block;
		width: 60px;
		height: 60px;
		background: url('../img/landlord/fig_plus.svg') no-repeat right bottom / contain;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.owner_header h4 {
		margin-top: 20px;
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
	}
	.owner_info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.owner_info img {
		margin: 10px 0;
	}
	.owner_voice {
		box-sizing: border-box;
		width: 100%;
		height: 250px;
		padding: 40px 25px;
		background: #1aad6b;
		font-weight: 500;
		color: #fff;
		position: relative;
	}
	.owner_voice:after {
		content: "";
		display: block;
		width: 60px;
		height: 60px;
		background: url('../img/landlord/fig_minus.svg') no-repeat right bottom;
		position: absolute;
		bottom: 0;
		right: 0;
	}


	/* リンクボタン */
	.ll_links_container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 92%;
		padding: 50px 0;
		border-radius:  20px;
		background: #eef3ee;
	}
	.ll_links_container h4,
	.ll_links_container ul {
		width: 68%;
	}
}


/* ------------------------------------------------------------
  SPスタイル
 ------------------------------------------------------------ */
@media screen and (max-width: 767px) {

	/* ページヘッダー・イラスト */
	.llTtl_fig {
		width: 246px;
		height: 200px;
		position: absolute;
		right: 0;
		bottom: -150px;
		left: 0;
		margin: 0 auto;
	}
	.ll_lead {
		padding: 0 24px;
		margin-top: 35px;
		text-align: justify;
	}

	/* セクション共通 */
	.ll_sec {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.ll_ttl {
		line-height: 1;
	}
	.ll_h4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50px;
		font-size: 1.5625rem; /* 25px */
		font-weight: 500;
		line-height: 1.0;
	}
	.ll_h4:before, .ll_h4:after {
		content: "";
		display: inline-block;
		width: 25px;
		height: 25px;
	}
	.ll_h4:before {
		background: url('../img/landlord/fig_h3_arrowL.svg') no-repeat center center / contain;
	}
	.ll_h4:after {
		background: url('../img/landlord/fig_h3_arrowR.svg') no-repeat center center / contain;
	}

	/* 管理委託について */
	.ll_consgt {
		padding: 50px 24px 100px;
		margin-top: 50px;
		border-radius: 50px 50px 0 0;
		background: #F4F4F4;
		position: relative;
		z-index: 0;
	}
	.ll_consgtTtl {
		position: relative;
		z-index: 10;
	}
	.ll_consgtTtl:after {
		content: "";
		display: block;
		width: calc( 2.375rem * 4.8 );
		height: 2.5rem;
		background: url('../img/landlord/fig_ttlunder_4char.svg') no-repeat left bottom / contain;
		position: absolute;
		left: -10px;
		bottom: -14px;
	}

	/* 委託管理のメリット */
	.ll_consgt p {
		position: relative;
		z-index: 10;
	}
	.merits {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		padding: 40px 24px;
		margin-top: -10px;
		border-radius: 20px;
		background: #fff;
		position: relative;
		z-index: 1;
	}
	.merit_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 32px;
	}
	.merit_item dt {
		text-align: center;
	}
	.merit_item dt:before {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		margin: 0 auto 10px;
		border: 1px solid #000;
		border-radius: 20px;
		background: #ecf3ee;
		font-size: 1.125rem;
		font-weight: 500;
	}
	.merit_item:first-child dt:before {
		content: "1";
	}
	.merit_item:nth-child(2) dt:before {
		content: "2";
	}
	.merit_item:nth-child(3) dt:before {
		content: "3";
	}
	.merit_item:nth-child(4) dt:before {
		content: "4";
	}
	.merit_item dt span {
		display: inline-block;
		background: url('../img/landlord/fig_underline_merit.png') no-repeat left bottom;
		font-size: 1.125rem;
		font-weight: 500;
		line-height: 1.2;
	}
	.merit_item dd {
		margin-top: 10px;
		font-size: 14px;
		text-align: justify;
	}
	.consulExam_wrap, .consulFlow_wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* ご相談の例 */
	.consulExam_wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		padding: 0 20px 30px;
		margin-top: 50px;
		border-radius: 20px;
		background: #fff;
	}
	.consulExam_wrap h4 {
		margin-top: -10px;
	}
	.consul_example {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 98%;
		/* padding: 0 px !important; */
		margin: 20px 0 0;
	}
	.consul_example li {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 14px 1rem;
		border: 1px solid #000;
		border-radius: 50px;
		background: #fffdf3;
		font-size: 0.875rem;
		font-weight: 500;
	}
	.consul_example li:not(:last-child) {
		margin-bottom: 10px;
	}
	

	/* ご相談からの流れ */
	.consulFlow_wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		padding: 0 0 30px;
		margin-top: 50px;
		border-radius: 20px;
		background: #fff;
	}
	.consulFlow_wrap h4 {
		margin-top: -10px;
	}
	.consul_flow {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 90%;
		padding: 52px 0 43px !important;
		margin: 20px 0 0;
		background: url('../img/landlord/fig_flowline_step5-sp.svg') no-repeat left 32px center / contain;
	}
	.consul_flow li {
		display: grid;
		grid-template-columns: 70px 1fr;
		gap: 0 20px;
		align-items: center;
		margin-bottom: 26px;
	}

	/* オーナー様の声 */
	.ll_voice {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding-top: 50px;
		margin-top: -50px;
		border-radius: 50px 50px 0 0;
		background: #fff;
		position: relative;
		z-index: 11;
	}
	.ll_voiceTtl {
		padding: 0;
	}
	.ll_voiceTtl:after {
		content: "";
		display: block;
		width: calc( 2.5rem * 7 );
		height: 2.5rem;
		background: url('../img/landlord/fig_ttlunder_7char.svg') no-repeat left bottom / contain;
		position: absolute;
		left: -10px;
		bottom: -14px;
	}
	ul.ll_ownersList {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		margin: 50px 0 0;
	}
	ul.ll_ownersList li:first-child {
		margin: 0;
	}
	li.ll_ownerVoice {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 250px;
		height: 250px;
		margin-top: 30px;
		overflow: hidden;
		position: relative;
	}

	li.ll_ownerVoice article {
		width: 250px;
		height: 500px;
		position: absolute;
		top: 0;
		left: 0;
		transition: .1s;
	}
	.voice_active {
		transform: translateY(-250px);
		transition: .1s;
	}
	.owner_header {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 250px;
		background: #eef3ee;
		position:relative
	}

	.owner_header:after {
		content: "";
		display: block;
		width: 60px;
		height: 60px;
		background: url('../img/landlord/fig_plus.svg') no-repeat right bottom / contain;
		position: absolute;
		right: 0;
		bottom: 0;
	}
	.owner_header h4 {
		margin-top: 20px;
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
	}
	.owner_info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.owner_info img {
		margin: 10px 0;
	}
	.owner_voice {
		box-sizing: border-box;
		width: 100%;
		height: 250px;
		padding: 40px 25px;
		background: #1aad6b;
		font-weight: 500;
		color: #fff;
		position: relative;
	}
	.owner_voice:after {
		content: "";
		display: block;
		width: 60px;
		height: 60px;
		background: url('../img/landlord/fig_minus.svg') no-repeat right bottom;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	/* リンクボタン */
	.contact_links {
		padding: 70px 0;
		margin-top: 50px;
		background: #F4F4F4;
	}

}