@charset "utf-8";


@media screen and (max-width: 768px) {
	#solo-living .underttl-area .deco-img img {
        max-width: 70px;
    }
}


/* -------------------------------------------------------------
    メッセージ
-------------------------------------------------------------- */
.top-message-area {
	text-align: center;
	margin-bottom: 80px;
}

@media screen and (max-width: 768px) {
	.top-message-area {
		margin-bottom: 40px;
	}
	
	.top-message-area .txt {
		text-align: left;
	}

}
	


/* -------------------------------------------------------------
    画像スライド
-------------------------------------------------------------- */
/*スライド*/
.sololiving-slider {
    width: 100%;
    height: 283px;
    position: relative;
    background: url("../img/sololiving-img-slide.png") repeat-x top left / auto 283px;
    animation: bg-slider 40s linear infinite;
    padding: 0;
	margin-bottom: 80px;
}
@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -2066px 0; } /* 使用した背景画像の長さ */
}

@media screen and (max-width: 768px) {
	.sololiving-slider {
		width: 100%;
		height: 150px;
		position: relative;
		background: url("../img/sololiving-img-slide.png") repeat-x top left / auto 150px;
		animation: bg-slider 40s linear infinite;
		padding: 0;
		margin-bottom: 40px;
	}
}

/* -----------------------------------------------------------
    安心の理由
-------------------------------------------------------------- */
.solo-living-reason-area {
	margin: 80px 0 ;
	position: relative;
}

.solo-living-reason-area .ttl-area {
	text-align: center;
	margin-bottom: 40px;
}

.solo-living-reason-area .deco {
	position: absolute;
	right: 10%;
	top: 3%
}

.solo-living-reason-area .merit-box {
	display: flex;
	align-items: center;
	gap: 50px;
}

.solo-living-reason-area .merit-img {
	width: 50%;
	flex-shrink: 0;
	height: 490px;
}

.solo-living-reason-area .merit-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.solo-living-reason-area .reverse {
	flex-direction: row-reverse;
}

.solo-living-reason-area .merit-textbox {
	width: 562px;
}

.solo-living-reason-area .merit-text {
	line-height: 2;
	letter-spacing: .05em;
}

.solo-living-reason-area .merit-title {
	font-size: 2.9rem;
	letter-spacing: .07em;
	margin: 0 0 30px 0;
	line-height: 1.4;
}

.solo-living-reason-area .merit-num {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: .05em;
	padding: 6.5px 20px;
	border-radius: 20px;
	margin: 0 0 15px;
	text-align: center;
	background-color: #C2B59B;
	width: fit-content;
}

.solo-living-reason-area .merit-item-area {
	max-width: 1540px;
	padding: 0 20px;
	margin: 87px auto 68px;
	display: flex;
	gap: 30px;
}

.solo-living-reason-area .merit-item-box {
	width: calc((100% - 60px) / 3);
}

.solo-living-reason-area .merit-item-img img {
	width: 100%;
}

.solo-living-reason-area .merit-item-title {
	font-size: 2.9rem;
	text-align: center;
	line-height: 1;
	margin: 20px 0;
}

.solo-living-reason-area .merit-item-text {
	line-height: 1.75;
	letter-spacing: .05em;
}

@media screen and (max-width: 768px) {
	.solo-living-reason-area {
		margin: 40px 0 0;
	}
	
	.solo-living-reason-area .ttl-area {
		margin-bottom: 20px;
	}
	
	.solo-living-reason-area .deco {
		right: 5%;
		top: 3%
	}

	.solo-living-reason-area .deco img {
		width: 70px;
	}
	
	.solo-living-reason-area .titlebox {
		margin-bottom: 30px;
	}

	.solo-living-reason-area .merit-item-box {
		width: 100%;
	}

	.solo-living-reason-area .merit-box {
		flex-direction: column;
		gap: 0;
	}
	
	.solo-living-reason-area .merit-box:first-of-type {
		margin-top: 25px;
	}

	.solo-living-reason-area .merit-img {
		width: 100%;
		height: auto;
	}
	
	.solo-living-reason-area .merit-img img {
		width: 100%;
		height: auto;
		object-fit: unset;
	}

	.solo-living-reason-area .merit-textbox {
		padding: 25px 20px 35px;
		width: 100%;
	}

	.solo-living-reason-area .merit-text {
		line-height: 2;
	}

	.solo-living-reason-area .merit-title {
		font-size: 2.1rem;
		margin-bottom: 18px;
	}

	.solo-living-reason-area .merit-num {
		padding: 5px 20px;
	}

	.solo-living-reason-area .merit-note {
		width: 100%;
		margin: 25px 0;
		padding: 0 20px;
		text-align: right;
	}

	.solo-living-reason-area .merit-item-area {
		margin: 20px 0 0;
		flex-direction: column;
		gap: 0;
	}

	.solo-living-reason-area .merit-item-img img {
		width: 100%;
		height: 230px;
		object-fit: cover;
	}

	.solo-living-reason-area .merit-item-title {
		font-size: 2.1rem;
		text-align: center;
		line-height: 1;
		margin: 0 0 8px 0;
	}

	.solo-living-reason-area .merit-item-textbox {
		padding: 15px 0 30px;
	}
}


/* -----------------------------------------------------------
　　新着情報
-------------------------------------------------------------- */
.top-new-listings-area {
	margin: 80px 0 0 0;
	padding: 80px 0 65px;
	background-color: #EFF4FA;
	border-radius: 0 105px 105px 0;
	position: relative;
	z-index: 0;
}

.top-new-listings-area .new-txt {
	display: flex;
	margin-bottom: 20px;
    align-items: center;
    gap: 30px;
	font-size: 2rem;
	font-weight: 700;
}

/*イラスト・テキストデコレーション*/
.top-new-listings-area .deco-txt {
	position: absolute;
	right: 2%;
	top: 15%;
}

.top-new-listings-area .deco-img {
	position: absolute;
	right: 80px;
	top: -200px;
	z-index: 10;
}

.top-new-listings-area .cmn-scroll {
	overflow-x: visible;
}

/*借りたい・買いたい*/
.property-list-area {
	position: relative;
	padding: 80px 0 30px;
	margin-top: 50px;
}

.property-list-area::before {
	position: absolute;
	content: "";
	background-color: #fff;
	z-index: -1;
	width: 87%;
	height: 65%;
	top: 0;
	border-radius: 0 100px 100px 0;
}

/*タイトル*/
.top-new-listings-area .ttl-area {
	margin-bottom: 40px;
	position: relative;
}

.top-new-listings-area .ttl-area img {
	width: 62px;
	height: 62px;
	margin-right: 20px;
}
.top-new-listings-area .ttl-area span {
	position: absolute;
	top: -20px;
	left: 8px;
	font-size: 1.6rem;
}
.top-new-listings-area .ttl-area span::before,
.top-new-listings-area .ttl-area span::after {
    content: "";
    position: absolute;
    bottom: 2px;
    width: 1px;
    height: 1.5rem;
    background: #0F75BC;
}
.top-new-listings-area .ttl-area span::before {
    transform: rotate(-30deg);
    left: -8px;
}
.top-new-listings-area .ttl-area span::after {
    transform: rotate(30deg);
    right: -5px;
}
.top-new-listings-area .buy-area .ttl-area span {
	left: 13px;
}


.top-new-listings-area .btn-wrap {
	display: flex;
	justify-content: center;
    gap: 30px;
}

.top-new-listings-area .btn-wrap .button {
	position: relative;
}
.top-new-listings-area .rent-area .btn-wrap .button {
	margin-top: 80px;
}

.top-new-listings-area .btn-wrap .button .s-txt {
	position: absolute;
	top: -35px;
	left: 52px;
	color: #0E70B5;
	font-weight: 700;
}

.top-new-listings-area .btn-wrap .button .s-txt::before, 
.top-new-listings-area .btn-wrap .button .s-txt::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 2rem;
    background: #0E70B5;
}
.top-new-listings-area .btn-wrap .button .s-txt::before {
    transform: rotate(-30deg);
    left: -15px;
}
.top-new-listings-area .btn-wrap .button .s-txt::after {
    transform: rotate(30deg);
    right: -15px;
}


@media screen and (max-width: 768px) {
	.top-new-listings-area {
		margin: 0px 0 0 0;
		padding: 40px 0 0;
		border-radius: 0 50px 50px 0;
		position: relative;
	}
	
	.top-new-listings-area .new-txt {
		display: block;
		margin-bottom: 20px;
		font-size: 1.7rem;
	}
	.top-new-listings-area .new-txt img {
		width: 69px;
		margin-right: 10px;
	}
	
	.top-new-listings-area .ttl-area {
		margin-bottom: 0px;
	}
	
	.top-new-listings-area .ttl-area .ja {
		font-size: 3rem;
	}

	/*イラスト・テキストデコレーション*/
	.top-new-listings-area .deco-txt {
		position: absolute;
		right: 2%;
		top: 15%;
	}

	.top-new-listings-area .deco-img {
		position: absolute;
		right: 80px;
		top: -200px;
		z-index: 10;
	}
	
	.top-new-listings-area .deco-img img {
		width: 100px;
	}
	
	
	/*借りたい・買いたい*/
	.property-list-area {
		position: relative;
		padding: 35px 0 40px;
		margin-top: 0px;
	}

	.property-list-area::before {
		position: absolute;
		content: "";
		background-color: #fff;
		z-index: -1;
		width: 90%;
		height: 50%;
		top: 0;
		border-radius: 0 50px 50px 0;
	}
	
	/*タイトル*/
	.top-new-listings-area .ttl-area {
		margin-bottom: 20px;
	}

	.top-new-listings-area .ttl-area img {
		width: 32px;
		height: 32px;
		margin-right: 20px;
	}
	.top-new-listings-area .ttl-area span {
		position: absolute;
		top: -10px;
		left: 17px;
		font-size: 1.2rem;
	}
	.top-new-listings-area .ttl-area span::before,
	.top-new-listings-area .ttl-area span::after {
		content: "";
		position: absolute;
		bottom: 2px;
		width: 1px;
		height: 1rem;
		background: #0F75BC;
	}
	.top-new-listings-area .ttl-area span::before {
		transform: rotate(-30deg);
		left: -7px;
	}
	.top-new-listings-area .ttl-area span::after {
		transform: rotate(30deg);
		right: -9px;
	}
	.top-new-listings-area .buy-area .ttl-area span {
		left: 21px;
	}

	.top-new-listings-area .cmn-scroll {
		margin: 20px 0 0 0;
		padding: 0 0 30px 35px;
	}

	.top-new-listings-area .btn-wrap {
		display: flex;
		justify-content: center;
        gap: 10px;
        flex-direction: column;
        align-items: center;
	}
	.top-new-listings-area .rent-area .btn-wrap {
		margin-top: 60px;
	}
	.top-new-listings-area .buy-area .btn-wrap {
		margin-top: 20px;
	}

	.top-new-listings-area .btn-wrap .button {
		position: relative;
		margin-top: 0;
	}
	.top-new-listings-area .rent-area .btn-wrap .button {
		margin-top: 0px;
	}

	.top-new-listings-area .btn-wrap .button .s-txt {
		position: absolute;
		top: -35px;
		left: 52px;
		color: #0E70B5;
		font-weight: 700;
	}

	.top-new-listings-area .btn-wrap .button .s-txt::before, 
	.top-new-listings-area .btn-wrap .button .s-txt::after {
		content: "";
		position: absolute;
		bottom: 0;
		width: 1px;
		height: 2rem;
		background: #0E70B5;
	}
	.top-new-listings-area .btn-wrap .button .s-txt::before {
		transform: rotate(-30deg);
		left: -15px;
	}
	.top-new-listings-area .btn-wrap .button .s-txt::after {
		transform: rotate(30deg);
		right: -15px;
	}

	/*買いたい*/
	.top-new-listings-area .buy-area .btn-wrap .button a.btn01:first-child {
		width: 330px;
	}
	
	
	/*スクロール・レイアウト調整*/
	.top-new-listings-area .ttl-area.style02 {
		display: flex;
		padding: 0 0 0 20px;
		align-items: center;
	}

	.top-new-listings-area .cmn-scroll {
		margin: 20px 0 0 0;
		padding: 0 0 10px 0px;
		overflow-x: scroll;
		width: 100%;
	}
	
	.top-new-listings-area .cmn-listings {
		display: flex;
		padding: 0 20px 0px;
		flex-direction: column;
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	
	.top-new-listings-area .cmn-listings-item {
		width: 265px;
		padding: 0px;
		margin-bottom: 10px;
		flex-shrink: 0;
	}
	
	.top-new-listings-area .cmn-listings-item:nth-child(n+8) {
		display: none
	}

	.top-new-listings-area .cmn-listings-link {
		margin: 0 0px 0 0;
		width: 100%;
		padding: 0px;
	}
	
	.cmn-listings-link::before {
		width: 35px;
		height: 5px;
		left: 15px;
	}
	
	.top-new-listings-area .cmn-private-wrap .cmn-listings-link {
		padding: 15px;
	}
	
	.top-new-listings-area .cmn-listings-contents .name {
		font-size: 1.4rem;
		margin: 7px 0 0 0;
		padding: 0 0 0 18px;
	}
	
	.top-new-listings-area .cmn-listings-contents .name::before {
		font-size: 1.4rem;
	}
	
	.cmn-listings-contents .catch {
		font-size: 2rem;
		font-weight: bold;
		line-height: 1.5;
		margin: 15px 0 20px;
		padding: 25px 15px 20px;
		border-bottom: solid 1px #A8835A;
	}
	
	.cmn-listings-contents .status {
		margin: 15px 0 0 0;
		padding: 0;
		display: flex;
    	flex-wrap: wrap;
		gap: 15px 10px;
	}
	
	.cmn-listings-contents .status dl {
		min-width: 130px;
		margin-bottom: 0;
	}
	
	.cmn-listings-contents .status dt {
		margin-right: 5px;
	}
}






/* -------------------------------------------------------------
    マルサポ24
-------------------------------------------------------------- */
.marusapo-area {
	padding-bottom: 80px;
	margin: 80px auto;
	background: linear-gradient(180deg, #fff 0%, #fff 40%, #ECE7DC 40%, #ECE7DC 100%);
}

.txt-area.cnt {
	text-align: center;
}


/**/
.marusapo-area .marusapo-list {
    display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

.marusapo-area .marusapo-list li {
    width: 445px;
	background-color: #fff;
	border-radius: 30px;
	position: relative;
}

.marusapo-area .marusapo-list li .img-wrap {
    height: 325px;
	width: 100%;
	border-radius: 30px 30px 0 0;
	overflow: hidden;
	margin-bottom: 25px;
}

.marusapo-area .marusapo-list li .img-wrap img {
    height: 100%;
	width: 100%;
	object-fit: cover;
}

.marusapo-area .marusapo-list li .deco-img {
    position: absolute;
	right: -22px;
	bottom: -25px;
}

.marusapo-area .marusapo-list li .deco-img img {
    height: 130px;
}

/*テキスト*/
.marusapo-area .marusapo-list li .txt-area {
    padding: 10px 20px 30px;
}

.marusapo-area .marusapo-list li .txt-area .ja {
    color: #333;
	font-size: 3rem;
	margin-bottom: 15px;
}

.marusapo-area .marusapo-list li .txt-area .catch {
	font-size: 2rem;
}

.marusapo-area .marusapo-list li .txt {
	text-align: left;
}


@media screen and (max-width: 1400px) {
	.marusapo-area .marusapo-list li {
		width: 380px;
	}
}


@media screen and (max-width: 768px) {
	.marusapo-area {
		padding-bottom: 40px;
		margin: 40px auto;
		background: linear-gradient(180deg, #fff 0%, #fff 20%, #EFF4FA 20%, #EFF4FA 100%);
	}

	.txt-area.cnt {
		text-align: center;
	}

	/**/
	.marusapo-area .marusapo-list {
		flex-direction: column;
		margin-top: 20px;
		gap: 20px;
	}

	.marusapo-area .marusapo-list li {
		width: 100%;
		border-radius: 30px;
	}

	.marusapo-area .marusapo-list li .img-wrap {
		height: 250px;
		width: 100%;
		border-radius: 30px 30px 0 0;
		overflow: hidden;
		margin-bottom: 10px;
	}
	
	.marusapo-area .marusapo-list li .deco-img {
		position: absolute;
		right: 13px;
		bottom: auto;
		top: 30%;
	}
	.marusapo-area .marusapo-list li .deco-img img {
		height: 100px;
	}
	
	
	/*テキスト*/
	.marusapo-area .marusapo-list li .txt-area {
		padding: 10px 20px 20px;
	}

	.marusapo-area .marusapo-list li .txt-area .ja {
		font-size: 2.5rem;
		margin-bottom: 15px;
	}
}


/* -------------------------------------------------------------
    流れ
-------------------------------------------------------------- */
.flow-area .flow-list {
	margin-top: 40px;
	position: relative;
}

@media screen and (max-width: 768px) {
	
	.flow-area .flow-list {
		margin-top: 20px;
	}

}

/* -------------------------------------------------------------
    質問
-------------------------------------------------------------- */

.faq-area {
    background-color: #fff;
    border: solid 2px #0F75BC;
    border-radius: 40px;
    padding: 60px 60px 0;
    margin: 0 auto 80px;
}

@media screen and (max-width: 1400px) {
	
	
}


@media screen and (max-width: 768px) {
	.faq-area {
		border-radius: 30px;
		padding: 30px 20px 0;
		margin: 0 auto 40px;
	}
	
}