@charset "UTF-8";

/*----------------------------------------------------
	フォント
----------------------------------------------------*/
#contentBlock {
	color: #334455;
}

.mypage_howto_wrap{
 color: #0d0d0d;
}

.f-size_12{
	font-size: 12px;
	letter-spacing: 2px;
	line-height: 1.8;
}

.f-size_14{
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 1.8;
}


.f-size_16{
	font-size: 16px;
	letter-spacing: 2px;
	line-height: 1.8;
}

.f-size_18{
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 1.8;
}

.f-size_20{
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 1.8;
}

.f-size_22{
	font-size: 22px;
	letter-spacing: 2px;
	line-height: 1.5;
}

.f-size_24{
	font-size: 24px;
	letter-spacing: 2px;
	line-height: 1.5;
}

.f-size_26{
	font-size: 26px;
	letter-spacing: 2px;
	line-height: 1.8;
}

.f-size_28{
	font-size: 28px;
	letter-spacing: 2px;
	line-height: 1.8;
}

.f-size_30{
	font-size: 30px;
	letter-spacing: 2px;
	line-height: 1.8;
}

.f-size_36{
	font-size: 36px;
	letter-spacing: 2px;
	line-height: 1.8;
}

.f-size_42{
	font-size: 42px;
	letter-spacing: 2px;
	line-height: 1.8;
}

.f-size_48{
	font-size: 48px;
	letter-spacing: 2px;
	line-height: 1.3;
}

.f-size_52{
	font-size: 52px;
	letter-spacing: 2px;
	line-height: 1.8;
}

.f_center{
	text-align: center;
}

.f_left{
	text-align: left;
}

.f_right{
	text-align: right;
}

.f_sp{
	display: none;
}

.f_num{
	font-family: 'Quicksand','Barlow', sans-serif;
}

/*----------------------------------------------------
	フォント色
----------------------------------------------------*/
.f_orange{
	color: #ffeac7;
}

.f_yellow{
	color: #f7b52c;
}

.f_blue{
	color: #568db6;
}

.f_red{
	color: #d00;
}

.f_pink{
	color: #e9546b;
}

.f_green{
	color: #2cb39c;
}

/*----------------------------------------------------
	フォント装飾
----------------------------------------------------*/
.f_dotted{
	display: inline-block;
	background-image: radial-gradient(.1em .1em ,#f39e00 100%,transparent,transparent);
	background-repeat: repeat-x;
	background-size: 1.05em 0.3em;
	padding-top: .1em;
	font-size: 28px;
}

/*----------------------------------------------------
	ライン
----------------------------------------------------*/
.line_green, .line_yellow{
	background-size: 0 30%;/*幅をゼロにしておく*/
	background-position: 0 95%;
	background-repeat: no-repeat;
	padding: 0 5px;
	transition: .8s;
}

.line_green{
	background-image: linear-gradient(#ceeae4, #ceeae4);
}

.line_yellow{
	background-image: linear-gradient(#ffeac7, #ffeac7);
}

.line_green.active, .line_yellow.active{
	background-size: 100% 30%;
}

.line_stripe{
	background-image: repeating-linear-gradient(-45deg, #f4973b 0, #f4973b 1px, transparent 2px, transparent 4px);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100% 0.2em;
}

/*----------------------------------------------------
	マージン
----------------------------------------------------*/
.mb-10{
	margin-bottom: 10px;
}

.mb-20{
	margin-bottom: 20px;
}

.mb-30{
	margin-bottom: 30px;
}

.mb-40{
	margin-bottom: 40px;
}

.mb-50{
	margin-bottom: 50px;
}

.mb-60{
	margin-bottom: 60px;
}

.mb-70{
	margin-bottom: 70px;
}

.mb-80{
	margin-bottom: 80px;
}

.mt-10{
	margin-top: 10px;
}

.mt-20{
	margin-top: 20px;
}

.mt-40{
	margin-top: 40px;
}

.mt-50{
	margin-top: 50px;
}

.mt-80{
	margin-top: 80px;
}

.ml-20{
	margin-left: 20px;
}

.ml-80{
	margin-left: 80px;
}

/* padding */
.pb-10{
	padding-bottom: 10px;
}

.pb-20{
	padding-bottom: 20px;
}

/*----------------------------------------------------
	MV
----------------------------------------------------*/
/* MV */
.mypage_howto_mv {
	height: 640px;
	background-color: #f4f7fd;
	position: relative;
}

.mypage_howto_mv::after{
	content: "";
	display: block;
	height: 100%;
	width: 30%;
	background-color: #448eba;
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 0;
}

.mypage_howto_block{
	display: block;
	width: calc(100% / 1 - 0px);
	max-width: 1180px;
	margin-inline: auto;
	position: relative;
}

.mypage_howto_block::before{
	content: "";
	width: 672px;
	height: 640px;
	display: block;
	background: url(../images/mv_img-bg.png) right top;
	background-repeat: no-repeat;
	position: absolute;
	right: 0px;
	top: -29px;
	z-index: 1;
}

.mypage_howto_contents{
	display: block;
	width: 100%;
	max-width: 520px;
	position: relative;
	top: 50px;
	opacity: 0;
	transition: 1s;
	z-index: 1;
}

.mypage_howto_contents img{
	display: block;
	max-width: 100%;
	text-align: center;
}

.mypage_howto_contents.fade{
	opacity: 1;
}

.mypage_howto_mv .mv_ttl-sub{
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	position: relative;
	top: 60px;
	font-size: 30px;
	text-align: center;
}

.mv_ttl-sub::after{
	content: "";
	display: block;
	height: 23px;
	width: 488px;
	background: url(../images/mv_ttl-sub.png) center top;
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	z-index: 2;
}

.mv_ttl-txt {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	margin-block: 20px;
	position: relative;
	color: #1e7fb8;
	font-size: 22px;
	text-align: center;
}

.mv_ttl-txt::after {
	content: "";
	display: block;
	height: 202px;
	width: 150px;
	background: url(../images/mv_ttl-img.png) center top;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	bottom: -100px;
	right: -80px;
	z-index: -1;
}

/*----------------------------------------------------
	MV下リード文ブロック
----------------------------------------------------*/
.mypage_howto_lead_block{
 display: block;
 margin-inline: auto;
 text-align: center;
}

/*----------------------------------------------------
	今すぐ無料で試してみるブロック&ボタン
----------------------------------------------------*/
.lead_register_block{
	margin-block: 0px 130px;
	margin-inline: auto;
	padding-block: 250px 100px;
	background-color: #e4eef8;
	position: relative;
	text-align: center;
}

.lead_register_block::before{
	content: "";
	height: 160px;
	width: 100%;
	background-color: #fff;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	position: absolute;
	left: 0;
	top: 0;
}

.register_block{
	margin-block: 0px 0px;
	margin-inline: auto;
	background-color: #fff;
	position: relative;
	text-align: center;
}

.lead_register_block h2{
	margin-block: 0 50px;
	position: relative;
	z-index: 1;
	font-size: 36px;
}

.cv-entry_lead{
	margin-bottom: 10px;
	color: #33495f;
	font-size: clamp(12px, 3.1vw, 14px);
	font-weight: 600;
	letter-spacing: normal;
}

.cv-entry_lead::before {
	content: '\f00c';
	margin-right: 6px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

.cv-entry_btn {
	display: inline-block;
	height: 70px;
	width: 780px;
	margin: 0 auto 10px;
	position: relative;

}

.cv-entry_btn .copy {
	display: block;
	height: 100px;
	width: 100px;
	background: #fff;
	box-sizing: border-box;
	padding: 10px 0;
	position: absolute;
	left: 30px;
	top: -17px;
	transition: 0.1s;
	z-index: 2;
	color: #35ac94;
	font-size: 16px;
	line-height: 1.2;
	border: 3px solid #35ac94;
	border-radius: 50%;
}

.cv-entry_btn .copy em {
	font-size: clamp(30px, 5vw, 36px);
	font-style: normal;
}

.letterSpace-S{
	font-feature-settings: "palt";
}

.cv-entry_btn .btnFrame {
	position: relative;
	width: 780px;
	height: 70px;
	overflow: hidden;
	background: #35ac94;
	border-radius: 10px;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	transition: 1s;
	z-index: 1;
}

/* ホバー時の背景色 */
.register_block .cv-entry_btn:hover .copy{
	color: #f7b52c;
	border-color: #f7b52c;
	overflow: visible;
}

.register_block .cv-entry_btn .btnFrame::before {
	content: "";
	height: 50%;
	width: 100%;
	background: #f7b52c;
	position: absolute;
	left: 0;
	top: -50%;
	transition: all 0.2s ease-out;
	z-index: 0;
}

.register_block .cv-entry_btn:hover .btnFrame::before {
	top: 0;
}

.register_block .cv-entry_btn .btnFrame::after {
	content: "";
	height: 50%;
	width: 100%;
	background: #f7b52c;
	position: absolute;
	bottom: -50%;
	left: 0;
	transition: all 0.2s ease-out;
	z-index: 0;
}

.cv-entry_btn:hover .btnFrame::after {
	bottom: 0;
}
/* ホバー時の背景色 ここまで */


.cv-entry_btn .btnFrame .btnText {
	z-index: 2;
	display: inline-block;
	width: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	text-align: center;
}

.cv-entry_supp {
	color: #33495f;
	font-size: 11px;
}

/* 各項目に飛ぶためのボタン */
.howto_btn_block{
	display: inline-flex;
	column-gap: 20px;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.howto_sell_btn,
.howto_buy_btn{
	display: block;
	width: 340px;
	padding: 6px 0;
	position: relative;
	overflow: hidden;
	transition: 1s;
	z-index: 1;
	color: #fff;
	font-size: 24px;
	text-align: center;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

a.howto_sell_btn:link,
a.howto_buy_btn:link{
	color: #fff;
}

.howto_sell_btn:hover,
.howto_buy_btn:hover{
	opacity: .8;
}

.howto_sell_btn{
	background-color: #1e7fb8;
}

.howto_buy_btn{
	background-color: #5598c1;
}

.howto_sell_btn::after,
.howto_buy_btn::after{
	content: "\f107";
	padding-block: 5px 0;
	position: absolute;
	font-family: "Font Awesome 5 Free";
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transition: 0.2s;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}


/*----------------------------------------------------
	物件所有時・売却時の使い方
----------------------------------------------------*/
.howto_sell_block{
	margin-block: 100px 50px;
	display: block;
	width: 100%;
	max-width: 1240px;
	background-color: #deebf6;
	margin-inline: auto;
	padding-block: 0 80px;
	position: relative;
	text-align: center;
	border-radius: 5px;
}

.howto_sell_ttl{
	display: block;
	width: 580px;
	margin-inline: auto;
	padding: 6px 0;
	color: #fff;
	background-color: #1e7fb8;
	position: relative;
	top: -40px;
	transition: 1s;
	z-index: 1;
	font-size: 34px;
	text-align: center;
	border-radius: 5px;
}

.howto_sell_ttl::after{
	content: "";
	display: block;
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%) rotate(90deg);
	-webkit-transform: translateX(-50%) rotate(90deg);
	border-color: transparent transparent transparent #1e7fb8;
	border-style: solid;
	border-width: 35px 0 35px 35px;
}

.howto_sell_block img{
	box-shadow: 3px 3px 0px 0px rgba(193, 214, 237, 1);
}

/*----------------------------------------------------
	マイページにご所有物件を登録することでわかること 物件所有時・売却時
----------------------------------------------------*/
/* ブロック */
.howto_sell_check_block{
	background-color: #f4f7fd;
	margin-block: 0px 100px;
	margin-inline: auto;
	padding-block: 250px 0px;
	position: relative;
	text-align: center;
}

.howto_sell_check_block::before{
	content: "";
	height: 160px;
	width: 100%;
	background-color: #fff;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	position: absolute;
	left: 0;
	top: 0;
}

.howto_sell_check_block h2{
	display: block;
	width: 100%;
	max-width: 900px;
	margin-block: 0 60px;
	margin-inline: auto;
	position: relative;
}

.howto_sell_check_block h2::after{
	content: "";
	display: block;
	height: 140px;
	width: 144px;
	background: url(../images/icon_sell.png) center top;
	background-repeat: no-repeat;
	position: absolute;
	bottom: -30px;
	right: 0px;
	z-index: 2;
}

/* マイページにご所有物件を登録することでわかること リスト */
.howto_sell_check_contents{
	background-color: #deebf6;
	padding-block: 80px;
}

.check_en{
	width: 100%;
	max-width: 80px;
	color: #1e7fb8;
	font-size: 18px;
	font-weight: 500;
	line-height: 0.85;
	text-align: start;
	border-right: solid 1px #1e7fb8;;
}

.check_num{
	font-size: 52px;
	font-weight: 100;
	line-height: 50px;
	letter-spacing: 2px;
}

.howto_sell_check_ul{
	width: 954px;
	margin-inline: auto;
	margin-block: 30px 80px
	position: relative;
}

.howto_sell_check_ul li{
	display: flex;
	align-items: center;
	column-gap: 20px;
	background-color: #fff;
	box-shadow: 3px 3px 0px 0px rgba(193, 214, 237, .5);
	margin-block: 0 25px;
	padding-inline: 18px;
	padding-block: 15px 10px;
	font-size: 20px;
	border-radius: 5px;
}
/* マイページにご所有物件を登録することでわかること リスト ここまで*/


.sell_check_block{
	display: block;
	width: 100%;
	max-width: 1160px;
	background-color: #fff;
	box-shadow: 3px 3px 0px 0px rgba(193, 214, 237, 1);
	margin-inline: auto;
	margin-block: 0px 50px;
	padding: 30px 40px;
	border-radius: 5px;
}


.sell_check_block h3{
	display: flex;
	align-items: center;
	column-gap: 20px;
	border-radius: 5px;
	margin-block: 0 10px;
	padding-block: 15px 10px;
	font-size: 30px;
}

.sell_check_txt{
	margin-block: 0 30px;
	margin-inline: 100px 40px;
	font-size: 16px;
	text-align: left;
}

.sell_check_txt_bg{
	max-width: 1080px;
	background-color: #f4f7fd;
	margin-inline: auto;
	padding-block: 20px;
	font-size: 20px;
	text-align: center;
}

.howto_sell_check_img{
	background-color: #deebf6;
	margin-block: 0px 30px;
	padding: 20px;
}


/*----------------------------------------------------
	物件購入時の使い方
----------------------------------------------------*/
.howto_buy_block{
	display: block;
	width: 100%;
	max-width: 1240px;
	margin-block: 120px 50px;
	margin-inline: auto;
	padding-block: 0 80px;
	background-color: #f6f8fe;
	position: relative;
	text-align: center;
	border-radius: 5px;
}

.howto_buy_ttl{
	display: block;
	width: 580px;
	background-color: #5598c1;
	margin-inline: auto;
	padding: 6px 0;
	position: relative;
	top: -40px;
	transition: 1s;
	z-index: 1;
	color: #fff;
	font-size: 34px;
	text-align: center;
	border-radius: 5px;
}

.howto_buy_ttl::after{
	content: "";
	display: block;
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%) rotate(90deg);
	-webkit-transform: translateX(-50%) rotate(90deg);
	border-style: solid;
	border-width: 35px 0 35px 35px;
	border-color: transparent transparent transparent #5598c1;
}

.howto_buy_block img{
	box-shadow: 3px 3px 0px 0px rgba(193, 214, 237, .8);
}

/*----------------------------------------------------
	マイページに購入検討中物件・物件希望条件を登録することでわかること 物件購入時
----------------------------------------------------*/
/* ブロック */
.howto_buy_check_block{
	background-color: #deebf6;
	margin-block: 0px 100px;
	margin-inline: auto;
	padding-block: 250px 0px;
	position: relative;
	text-align: center;
}

.howto_buy_check_block::before{
	content: "";
	height: 160px;
	width: 100%;
	background-color: #fff;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	position: absolute;
	left: 0;
	top: -1px;
}

.howto_buy_check_block h2{
	display: block;
	width: 100%;
	max-width: 900px;
	margin-block: 0 60px;
	margin-inline: auto;
	position: relative;
}

.howto_buy_check_block h2::after{
	content: "";
	display: block;
	height: 150px;
	width: 154px;
	background: url(../images/icon_buy.png) center top;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0px;
	right: 30px;
	z-index: 2;
}

.howto_buy_check_block h2::after{
	content: "";
	display: block;
	width: 154px;
	height: 150px;
	background: url(../images/icon_buy.png) center top;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0px;
	right: 30px;
	z-index: 2;
}

/* マイページに登録することでわかること登録することでわかること リスト */
.howto_buy_check_contents{
	background-color: #fff;
	padding-block: 80px 0;
}

.howto_buy_check_ul{
	width: 954px;
	margin-inline: auto;
	margin-block: 30px 80px
	position: relative;
}

.howto_buy_check_ul li{
	display: flex;
	align-items: center;
	background-color: #fff;
	box-shadow: 3px 3px 0px 0px rgba(193, 214, 237, .5);
	padding-inline: 18px;
	padding-block: 15px 10px;
	margin-block: 0 25px;
	column-gap: 20px;
	font-size: 20px;
	border-radius: 5px;
}
/* マイページにご所有物件を登録することでわかること リスト ここまで*/


.buy_check_block{
	display: block;
	width: 100%;
	max-width: 1160px;
	background-color: #fff;
	box-shadow: 3px 3px 0px 0px rgba(193, 214, 237, .5);
	margin-block: 0px 50px;
	margin-inline: auto;
	padding: 30px 40px;
	border: solid 2px #deebf6;
	border-radius: 5px;
}

.buy_check_block h3{
	display: flex;
	align-items: center;
	column-gap: 20px;
	margin-block: 0 10px;
	padding-block: 15px 10px;
	font-size: 30px;
	border-radius: 5px;
}

.buy_check_txt{
	margin-block: 0 30px;
	margin-inline: 100px 40px;
	font-size: 16px;
	text-align: left;
}

.howto_buy_check_img{
	margin-block: 0px 30px;
	background-color: #deebf6;
	padding: 20px;

}


/*----------------------------------------------------
	最後の部分のリード文
----------------------------------------------------*/
.mypage_lead_block{
	background-color: #f4f7fd;
	margin-block: 0px 80px;
	margin-inline: auto;
	padding-block: 250px 60px;
	position: relative;
	text-align: center;
}

.mypage_lead_block::before{
	content: "";
	height: 160px;
	width: 100%;
	background-color: #fff;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	position: absolute;
	left: 0;
	top: 0;
}

.mypage_lead_block p{
	display: block;
	width: 100%;
	max-width: 1240px;
	margin-block: 0 50px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
	font-size: 20px;
}

.mypage_lead_block p::before{
	content: "";
	display: block;
	width: 288px;
	height: 274px;
	background: url(../images/img_mypage_mansion.png) center top;
	background-repeat: no-repeat;
	position: absolute;
	bottom: -60px;
	left: 0%;
	z-index: 2;
}

.mypage_lead_block p::after{
	content: "";
	display: block;
	height: 272px;
	width: 216px;
	background: url(../images/img_mypage_user.png) center top;
	background-repeat: no-repeat;
	position: absolute;
	bottom: -60px;
	right: 50px;
	z-index: 2;
}