@charset "UTF-8";


/* ロゴ
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay099 {
max-width: 1600px;
margin: 0 auto;
position: relative;
}
.lay099 p {
position: fixed;
z-index: 9999;
width: 130px;
height: 130px;
top: 0px;
}

		@media screen and (max-width:743px) {
		.lay099 p {
		width: 85px;
		}
		/*smp end*/}




/* ファーストビュー
ーーーーーーーーーーーーーーーーーーーーーーーー*/

.lay100 {
width: 1200px;
height: 870px;
margin: 0 auto;
position: relative;
overflow: hidden;
}



.lay100 h1 {
position: absolute;
z-index: 2;
top: 90px;
left: calc(50% - 425px);
}
.lay100 p:last-child {
position: absolute;
z-index: 1;
top: -60px;
left: calc(52% - 565px);
}

		@media screen and (max-width:743px) {
		.lay100 {
		width: auto;
		height: 490px;
		}
		.lay100 h1 {
		top: 90px;
		left: 15px;
		}
		.lay100 p:last-child {
		top: -15px;
		left: 0;
		text-align: center;
		width: 100%;
		}
		.lay100 p:last-child img {
		width: 489px;
		max-width: initial;
		margin-left: -45px;
		}
		/*smp end*/}





/* 好きな空間で、暮らしをもっと心地よく。
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay101 {
text-align: center;
position: relative;
width: 900px;
height: calc(200px + 100px);
margin:60px auto 0px;
}
.lay101::before {
content: "";
display: inline-block;
background: url(/promotion/myfavoritespace/common/img/lead_img01@3x.png) no-repeat center center / cover;
width: 105px;
height: 91px;
position: absolute;
z-index: 1;
top: -30px;
right: 0px;
}
.lay101::after {
content: "";
display: inline-block;
background: url(/promotion/myfavoritespace/common/img/lead_img02@3x.png) no-repeat center center / cover;
width: 460px;
height:343px;
position: absolute;
z-index: 1;
bottom: -200px;
left: -330px;
}
.lay101 p:last-child {
margin-top: 30px;
position: relative;
z-index: 2;
font-size: 17px;
font-weight: 600;
}

		@media screen and (max-width:743px) {
		.lay101 {
		width: auto;
		height: auto;
		margin:10px auto 0px;
		padding-bottom: 100px;
		}
		.lay101::before {
		content: none;
		}
		.lay101::after {
		background: url(/promotion/myfavoritespace/common/img/lead_img02_smp@3x.png) no-repeat center center / cover;
		width: 89px;
		height: 80px;
		bottom: 0px;
		left: 20px;
		}
		.lay101 p:last-child {
		margin-top: 20px;
		font-size: 13px;
		line-height: 2;
		}
		/*smp end*/}



/* 自分らしさを叶える空間がいろいろ
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay102 {
position: relative;
}

.lay102 .secb {
width: 720px;
margin: 100px auto 0px;
position: relative;
}

.lay102 h2 {
background: url(/promotion/myfavoritespace/common/img/space_ttl_bg@2x.png) no-repeat center center / cover;
font-size: 24px;
font-weight: 600;
color: #fff;
width: 456px;
height: 183px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
z-index: 1;
top: -130px;
right: 0px;
}


		@media screen and (max-width:743px) {
		.lay102 {
		padding-top: 40px;
		margin-top: -40px;
		}
		.lay102 .secb {
		width: auto;
		margin: 0px auto 0px;
		position: relative;
		top: -40px;
		}
		.lay102 h2 {
		font-size: 16px;
		width: 235px;
		height: 95px;
		top: 0px;
		right: 20px;
		}
		/*smp end*/}


/* 自分らしさを叶える空間がいろいろ
スライダー部分
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay102 .seca {
position: relative;
z-index: 2;
margin-top: 40px;
}

.lay102 .boxa {
width: 650px;
padding-bottom: 2px;
display: flex;
}
.lay102 .boxa p {
position: relative;
}
.lay102 .boxa p:first-child {
z-index: 1;
}
.lay102 .boxa p:nth-child(2) {
z-index: 2;
background: var(--bg-grablue);
color: #fff;
font-size: 22px;
font-weight: 600;
padding: 5px;
width: 280px;
border-radius: 100px;
text-align: center;
margin: -15px auto -10px;
}
.lay102 .boxa p:last-child {
position: relative;
background: #fff;
border-radius: 30px;
padding: 5% 5% 4%;
box-sizing: border-box;
width: 83.6%;
margin-right: auto;
margin-left: auto;
}
.lay102 .boxa p:last-child::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--bg-grablue); 
border-radius: 32px; /* 外枠の角丸（30px + 2px） */
z-index: -1;
}


		@media screen and (max-width:743px) {
		.lay102 .seca {
		position: relative;
		z-index: 2;
		margin-top: 40px;
		}
		.lay102 .boxa {
		width: auto;
		}
		.lay102 .boxa p:nth-child(2) {
		font-size: 15px;
		width: 180px;
		margin: -10px auto -5px;
		}
		.lay102 .boxa p:last-child {
		border-radius: 20px;
		padding: 7% 7% 5%;
		width: 90%;
		}
	.lay102 .boxa p:last-child::before {
		border-radius: 22px; /* 外枠の角丸（30px + 2px） */
		}

		/*smp end*/}





/* 「好き」が詰まった、自分だけの自由空間
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay103 {
background: url(/promotion/myfavoritespace/common/img/like_bg@3x.png) no-repeat left top / 54% auto;
width: 1200px;
min-height: calc(820px + 30px);
margin: 70px auto 0px;
position: relative;
}
.lay103 .boxa {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.lay103 .boxa .wrpa {
width: 490px;
padding-left: 50px;
padding-top: calc(175px + 60px);
}
.lay103 .boxa .wrpa h2 + p {
margin-top: 40px;
}
.lay103 .boxa .wrpa p {
padding-left: 20px;
letter-spacing: -.5px;
line-height: 2;
}
.lay103 .boxa .wrpb {
padding-top: 100px;
position: relative;
}
.lay103 .boxa .wrpb span {
display: block;
font-size: 12px;
position: absolute;
bottom: 110px;
left: 10px;
}

.lay103 .boxb {
background: rgba(255, 255, 255, 0.5);
padding: 20px;
width: 320px;
position: absolute;
right: 330px;
bottom: 0px;
}
.lay103 .boxb h3,
.lay103 .boxb p {
color: #FE6783;
}
.lay103 .boxb h3 {
font-weight: 600;
}
.lay103 .boxb h3 + p {
margin-top: 10px;
}


		@media screen and (max-width:743px) {
		.lay103 {
		background: url(/promotion/myfavoritespace/common/img/like_bg_smp@3x.png) no-repeat -150px 0px  / 170% auto;
		width: auto;
		min-height: 654px;
		margin: 50px auto 0px;
		}
		.lay103 .boxa {
		display: block;
		}
		.lay103 .boxa .wrpa {
		width: auto;
		padding-left: 0px;
		padding-top: calc(95px + 25px);
		}
		.lay103 .boxa .wrpa h2,
		.lay103 .boxa .wrpa p {
		padding-left: 20px;
		padding-right: 2px;
		}
		.lay103 .boxa .wrpa h2 + p {
		margin-top: 30px;
		}
		.lay103 .boxa .wrpa p {
		letter-spacing: -.5px;
		}
		.lay103 .boxa .wrpb {
		padding-top: 50px;
		margin-right: 20px;
		margin-left: 20px;
		}
		.lay103 .boxa .wrpb span {
		font-size: 11px;
		bottom: 55px;
		left: 10px;
		}
		.lay103 .boxb {
		width: 280px;
		margin: 20px auto 0px;
		position: relative;
		right: initial;
		bottom: initial;
		}
		/*smp end*/}



/* デザインと暮らしやすさを両立するすまい
お気に入りのカラーで自分らしい空間に
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay104 {
width: 1100px;
margin: 110px auto 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.lay104 .boxa {
padding: 30px 30px 50px;
margin-bottom: 50px;
border-radius: 30px;
position: relative;
}
.lay104 .boxa .wrpa {
position: relative;
z-index: 2;
}

.lay104 .boxa h2,
.lay104 .boxa p {
text-align: center;
color: #fff;
}
.lay104 .boxa h2 {
font-size: 24px;
font-weight: 600;
}
.lay104 .boxa h2 + p {
margin-top: 20px;
}
.lay104 .boxa p:nth-child(3) {
font-size: 18px;
margin-top: 20px;
}
.lay104 .boxa p:last-child {
position: absolute;
bottom: -80px;
left: calc(50% - 85.5px);
}

/* 背景の雲模様 共通設定 */
.lay104 .boxa::after {
content: "";
display: inline-block;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: absolute;
z-index: 1;
}


/* 個別設定　ブルー */
.lay104 .boxa:first-child {
background: linear-gradient(to right, #af96fe 5%, #98aaf4 50%, #6ac7e9 95%);
margin-top: 50px;
}
.lay104 .boxa:first-child::after {
width: 500px;
height: 460px;
background-image: url(/promotion/myfavoritespace/common/img/design_bg_blue@2x.png);
left: calc(50% - 250px);
bottom: -50px;
}


/* 個別設定オレンジ */
.lay104 .boxa:last-child {
background: linear-gradient(to right, #f7ce8c 5%, #f49889 50%, #f579cf 95%);
}
.lay104 .boxa:last-child p:last-child {
bottom: -80px;
}
.lay104 .boxa:last-child::after {
width: 500px;
height: 331px;
background-image: url(/promotion/myfavoritespace/common/img/design_bg_orange@2x.png);
left: calc(50% - 250px);
bottom: -30px;
}

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

		.lay104 {
		width: auto;
		margin: 35px 0px 0px;
		padding: 0px 10px;
		display: block;
		background: url(/promotion/myfavoritespace/common/img/style_bg@2x.png) no-repeat right -200px top 230px / 420px auto;
		}
		.lay104 .boxa {
		padding: 15px;
		border-radius: 20px;
		margin-bottom: 100px;
		}
		.lay104 .boxa h2 {
		font-size: 17px;
		}
		.lay104 .boxa h2 + p {
		margin-top: 10px;
		}
		.lay104 .boxa p:nth-child(3) {
		font-size: 14px;
		margin-top: 15px;
		}
		.lay104 .boxa p:last-child {
		bottom: -60px;
		left: calc(50% - 65px);
		width: 130px;
		}

		/* 個別設定　ブルー */
		.lay104 .boxa:first-child {
		margin-top: 30px;
		}
		.lay104 .boxa:first-child::after {
		width: 320px;
		height: 296px;
		left: 20px;
		bottom: -60px;
		}

		/* 個別設定オレンジ */
		.lay104 .boxa:last-child p:last-child {
		bottom: -60px;
		}
		.lay104 .boxa:last-child::after {
		width: 320px;
		height: 211px;
		left: 20px;
		bottom: -60px;
		}
		/*smp end*/}




/* 自分らしいスタイルで暮らすなら、ブルーミングガーデン
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay105 {
text-align: center;
position: relative;
margin-top: 50px;
}
.lay105::after {
content: "";
display: inline-block;
width: 420px;
height: 313px;
background: url(/promotion/myfavoritespace/common/img/style_bg@2x.png) no-repeat left center / 420px auto;
position: absolute;
z-index: 1;
top: 0px;
right: 5px;
}

.lay105 .boxa {
position: relative;
z-index: 2;
width: 1200px;
margin: 50px auto 0px;
}
.lay105 p {
margin-top: 30px;
font-size: 17px;
line-height: 2;
}
@media screen and (min-width:1600px) {
.lay105 {
width: 1200px;
margin-right: auto;
margin-left: auto;
}
.lay105::after {
width: 420px;
right: initial;
left: calc(1200px - 210px);
}
/*pc end*/}

		@media screen and (max-width:743px) {
		.lay105 {
		margin-top: 50px;
		}
		.lay105::after {
		content: none;
		}

		.lay105 .boxa {
		width: auto;
		margin: 0px 20px;
		}
		.lay105 p {
		margin-top: 20px;
		font-size: 14px;
		line-height: 2;
		}
		/*smp end*/}




/* 購入者様紹介
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay106 {
background: url(/promotion/myfavoritespace/common/img/buy_bg@2x.png) no-repeat center top 100px / 60% auto;
min-height: 823px;
margin: 100px auto 0px;
width: 1200px;
position: relative;
}
.lay106 h2 {
background: url(/promotion/myfavoritespace/common/img/buy_ttl_bg@2x.png) no-repeat center center / cover;
width: 241px;
height: 132px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: 600;
color: #fff;
position: absolute;
top: 0px;
left: 48%;
}
.lay106 h3 {
text-align: center;
padding-top: calc(130px + 50px);
}

		@media screen and (max-width:743px) {
		.lay106 {
		background: url(/promotion/myfavoritespace/common/img/buy_bg_smp@2x.png ) no-repeat center top 40px / 100% auto;
		min-height: 638px;
		margin: 110px auto 0px;
		width: auto;
		position: relative;
		}
		.lay106 h2 {
		background: url(/promotion/myfavoritespace/common/img/buy_ttl_bg@2x.png) no-repeat center center / cover;
		width: 166px;
		height: 90px;
		font-size: 17.5px;
		left: initial;
		right: 30px;
		}
		.lay106 h3 {
		text-align: center;
		padding-top: calc(90px + 30px);
		}
		/*smp end*/}



/* 購入者様紹介 スライダー
ーーーーーーーーーーーーーーーーーーーーーーーー */
.lay106 .seca {
margin-top: 40px;
}

.lay106 .boxa {
background: linear-gradient(to bottom, #af96fe 5%, #98aaf4 50%, #6ac7e9 95%);
width: 315px !important;
box-sizing: border-box;
border-radius: 30px;
padding: 140px 15px 15px;
margin-top:130px;
margin-right: 26px;
margin-left: 48px;
position: relative;
}
.lay106 .boxa p:first-child {
width: calc(315px + 30%);
position: absolute;
top: -130px;
left: 50%;
transform: translateX(-50%);
}
.lay106 .boxa p:nth-child(2) {
position: absolute;
top: 90px;
right: -10px;
}
.lay106 .boxa p:nth-child(2) a {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px;
background: url(/promotion/myfavoritespace/common/img/btn_arrow@2x.png) no-repeat center center / 100% auto;
width: 158px;
height: 61px;
box-sizing: border-box;
padding: 0px 50px 0px 20px;
font-size: 14px;
font-weight: 600;
}

		@media screen and (max-width:743px) {
		.lay106 .seca {
		margin-top: 30px;
		}
		.lay106 .boxa {
		background: linear-gradient(to bottom, #af96fe 5%, #98aaf4 50%, #6ac7e9 95%);
		width: 90% !important;
		padding: 95px 12px 12px;
		margin-top:130px;
		margin-right: 0px;
		margin-left: 0px;
		position: relative;
		right: -15px;
		}
		.lay106 .boxa p:first-child {
		width: calc(78% + 30%);
		position: absolute;
		top: -130px;
		left: 50%;
		transform: translateX(-50%);
		}
		.lay106 .boxa p:nth-child(2) {
		top: 55px;
		right: -10px;
		}
		.lay106 .boxa p:nth-child(2) a {
		width: 123px;
		height: 49px;
		box-sizing: border-box;
		padding: 0px 45px 0px 15px;
		font-size: 12px;
		}
		/*smp end*/}





/* つくるなら、こんな家。
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay107 {
position: relative;
background: #e8f2fe;
border-radius: 30px;
width: 840px;
padding: 20px;
margin: 100px auto 0px;
}
.lay107::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--bg-grapink); 
border-radius: 32px; /* 外枠の角丸（30px + 2px） */
z-index: -1;
}


.lay107 h2 {
background: url(/promotion/myfavoritespace/common/img/house_ttl_bg@2x.png) no-repeat center center / cover;
width: 218px;
height: 179px;
font-size: 24px;
font-weight: 600;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
z-index: 2;
top: -120px;
right: 0px;
}

.lay107 .seca {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.lay107 .boxa {
width: 430px;
box-sizing: border-box;
margin: 30px 0px;
background: var(--bg-grapink);
position: relative;
z-index: 1;
left: -40px;
}
.lay107 .boxa img {
position: relative;
top: -10px;
left: -10px;
}

.lay107 .boxb {
width: 400px;
box-sizing: border-box;
}

.lay107 .boxb p:first-child {
color: #FE6783;
font-size: 24px;
line-height: 1.4;
}
.lay107 .boxb p:nth-child(2) {
font-size: 30px;
font-weight: 600;
position: relative;
left: -17px;
margin: 10px 0px;
}


.lay107 > p:last-child {
position: absolute;
bottom: -5px;
right: -5px;
}

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

		.lay107 {
		border-radius: 20px;
		width: auto;
		margin: 320px 20px 0px;
		padding: 45px 20px 60px;
		}
		.lay107::before {
		border-radius: 22px; /* 外枠の角丸（30px + 2px） */
		}
		.lay107 h2 {
		width: 148px;
		height: 130px;
		font-size: 17.5px;
		padding-left: 10px;
		z-index: 2;
		top: -280px;
		right: initial;
		left:0px;
		}
		.lay107 .seca {
		display: block;
		}
		.lay107 .boxa {
		width: 90%;
		margin: 30px auto;
		left: initial;
		position: absolute;
		top: -210px;
		}
		.lay107 .boxa img {
		top: -7px;
		left: -7px;
		}
		.lay107 .boxb {
		width: auto;
		}
		.lay107 .boxb p:first-child {
		font-size: 17.5px;
		}
		.lay107 .boxb p:nth-child(2) {
		font-size: 23px;
		left: -13px;
		}
		.lay107 > p:last-child {
		width: 130px;
		}

		/*smp end*/}


/* ブルーミングガーデンを探す
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay108 {
width: 377px;
margin: 130px auto 0px;
text-align: center;
}
.lay108 h2 {
font-size: 22px;
color: #fff;
background: var(--bg-grapink);
padding:5px 15px;
display: inline-block;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
line-height: 1.8;
}
.lay108 p:last-child {
background: var(--bg-grapink);
padding: 0px;
border-radius: 20px;
}
.lay108 p:last-child a {
position: relative;
display: block;
}
.lay108 p:last-child a span {
position: absolute;
display: inline-block;
top: 12px;
left: 88px;
z-index: 2;
color: #fff;
font-size: 33px;
letter-spacing: 1px;
}
.lay108 p:last-child img {
position: relative;
top: -8px;
left: -6px;
z-index: 1;
}


		@media screen and (max-width:743px) {
		.lay108 {
		width: 250px;
		margin: 75px auto 0px;
		}
		.lay108 h2 {
		font-size: 14px;
		padding:10px 15px;
		border-top-right-radius: 4px;
		border-top-left-radius: 4px;
		}
		.lay108 p:last-child {
		border-radius: 10px;
		}
		.lay108 p:last-child a span {
		left: 55px;
		font-size: 22px;
		}
		.lay108 p:last-child img {
		position: relative;
		top: -6px;
		left: -4px;
		}
		/*smp end*/}



/* フッターバナー
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay109 {
margin-top: 130px;
position: relative;
}
.lay109::before {
content: "";
display: inline-block;
width: 420px;
height: 313px;
background: url(/promotion/myfavoritespace/common/img/footer_bg@2x.png) no-repeat center center / cover;
position: absolute;
z-index: -1;
left: 10px;
top: -350px;
}
		@media screen and (max-width:743px) {
		.lay109 {
		margin-top: 65px;
		position: relative;
		}
		.lay109::before {
		content: none;
		}
		/*smp end*/}





/* コピーライト
ーーーーーーーーーーーーーーーーーーーーーーーー */

.lay110 {
text-align: center;
margin-top: 130px;
margin-bottom: 40px;
}

.lay110 p:first-child {
width: 130px;
margin:0 auto;
}
.lay110 p:last-child {
margin-top: 20px;
}

		@media screen and (max-width:743px) {
		.lay110 {
		text-align: center;
		margin-top: 50px;
		margin-bottom: 15px;
		}

		.lay110 p:first-child {
		width: 110px;
		margin:0 auto;
		}
		.lay110 p:last-child {
		margin-top: 20px;
		font-size: 12px;
		}
		/*smp end*/}