/* ===================================================================
CSS
 file name  :  lp202410.css
=================================================================== */
body{
	position: relative;
	padding: 0;
	font-family: "Noto Sans JP", serif;
    font-style: normal;
	letter-spacing: 0.05em;
    font-size: 16px;
    font-weight: 400;
	line-height: 2;
}
@media screen and (max-width: 768px) {
	body{
		font-size: 12px;
	}
}
img{
	max-width: 100%;
	height: auto;
	width: auto;
}
a{
	color: #416C13;
	text-decoration: underline;
}
a:hover{
	color: #81B846;
}
a.contact_btn{
    display: block;
    background: #E78331;
    border-radius: 100px;
    padding: 0.7em;
    color: #FFF;
    text-align: center;
    font-weight: 600;
    font-size: 26px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
}
@media screen and (max-width: 768px) {
    a.contact_btn{
        font-size: 18px;
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4);
    }
}
@media print, screen and (min-width: 769px) {
	.main_wrap .main_box .contact_btn:hover{
		transform: translateY(-3px);
		opacity: 0.9;
	}
}
.btn_arrow span{
	position: relative;
	display: inline-block;
	padding: 0 1em 0 0;
	text-decoration: none;
}
.btn_arrow span::before{
	content: '';
	position: absolute;
	bottom: calc(50% - 6px);
	right: 0;  
	width: 11px;
	height: 2px;
	background: #FFF;
	transform: rotate(-45deg);
	transition: all .3s;
}
.btn_arrow span::after{
	content: '';
	position: absolute;
	bottom: calc(50% + 1px);
	right: 0;
	width: 11px;
	height:2px;
	background: #FFF;
	transform: rotate(45deg);
	transition: all .3s;
}
@media print, screen and (max-width: 768px) {
    .btn_arrow span::before{
        bottom: calc(50% - 5px);
        width: 10px;
        height: 2px;
    }
    .btn_arrow span::after{
        bottom: calc(50% + 1px);
        width: 10px;
        height:2px;
    }
}
.bg_green{
	background: #FAFAF4;
}
@media print, screen and (min-width: 769px) {
	.pc_none{
		display:none;
	}
}
@media screen and (max-width: 768px) {
	.sp_none{
		display:none;
	}
}
/* =====================================
ヘッダー（メイン）
======================================== */
.header_logo{
    background: #81B846;
    padding: 10px 50px;
}
.header_logo img{
    max-width: 232px;
}
.main_wrap{
	background-color: #DFEDD3;
	background-image: url("../images/lp202410/bg_main_pc.png");
	background-repeat: no-repeat;
    background-position: center bottom;
	background-size: auto 324px;
	padding: 60px 50px 100px 50px;
}
@media print, screen and (min-width: 1360px){
    .main_wrap{
        background-size: 1360px auto;
    }
}
.main_wrap .main_box{
	max-width: 648px;
	margin: auto;
}
.main_wrap .main_box .contact_btn_wrap{
	margin: 60px auto auto;
	max-width: 560px;
}
@media screen and (max-width: 768px) {
    .header_logo{
        padding: 5px 20px;
    }
    .header_logo img{
        max-width: 156px;
    }
    .main_wrap{
        background-image: url("../images/lp202410/bg_main_sp.png");
        background-size: 640px auto;
        padding: 50px 20px 160px 20px;
    }
    .main_wrap .main_box{
        max-width: 480px;
    }
    .main_wrap .main_box .contact_btn_wrap{
        margin: 50px auto auto;
        max-width: 480px;
    }
}
@media screen and (max-width: 480px) {
    .main_wrap{
        background-size: 480px auto;
        padding: 50px 20px 130px 20px;
    }
    .main_wrap .main_box{
        max-width: 335px;
    }
    .main_wrap .main_box .contact_btn_wrap{
        margin: 40px auto auto;
        max-width: 300px;
    }
}
/* =====================================
コンテンツ共通
======================================== */
.contents_wrap{
	padding: 100px 50px;
	max-width: 1180px;
	margin: auto;
}
.contents_wrap.wide{
	max-width: 1300px;
}
h2.subtitle{
	text-align: center;
	font-size: 26px;
	font-weight: 600;
    line-height: 1.6;
}
@media print, screen and (min-width: 769px){
    h2.subtitle{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    h2.subtitle:before, h2.subtitle:after {
        content: "";
        border-top: 5px solid #81B846;
        width: 4em;
    }
    h2.subtitle:before {
        margin-right: 1.5em;
    }
    h2.subtitle:after {
        margin-left: 1.5em;
    }
}
h2.subtitle span.title_strong{
	color: #DB5C68;
	font-size: 32px;
}
.explanation{
	display: block;
	color: #333;
	font-weight: normal;
	margin-top: 1em;
	font-size: 14px;
	text-align: center;
}
.lead_text{
	margin-top: 2em;
	text-align: center;
}
span.underline{
	background: linear-gradient(transparent 65%, #FBE972 45%);
	padding-bottom: 0.1em;
}
@media screen and (max-width: 768px) {
	.contents_wrap{
		padding: 50px 20px;
	}
	h2.subtitle{
		font-size: 14px;
        position: relative;
        padding-bottom: 1em;
	}
    h2.subtitle::before{
        position: absolute;
        bottom: 0;
        left: calc(50% - 35px);
        content: '';
        width: 70px;
        border-bottom: 3px solid #81B846;
    }
	h2.subtitle span.title_strong{
		font-size: 16px;
	}
	.explanation{
		font-size:10px;
	}
}
/* =====================================
会員登録をすると
======================================== */
ul.member_list{
	max-width: 860px;
	margin: 50px auto auto;
}
ul.member_list li{
	margin-top: 30px;
	background: #FFF;
	border: 1px solid #EAEAEA;
	padding: 1em 1em 1em 130px;
	box-shadow: 0px 3px 0px 0px #DBDBDB;
    position: relative;
}
ul.member_list li .number{
    position: absolute;
    top: -10px;
    left: 30px;
	width: 60px;
}
ul.member_list li p span{
	font-weight: 700;
	color: #DB5C68;
	font-size: 18px;
}
@media screen and (max-width: 768px) {
    ul.member_list{
        margin: 20px auto auto;
    }
    ul.member_list li{
        margin-top: 20px;
        padding: 1em 1em 1em 60px;
    }
    ul.member_list li .number{
        position: absolute;
        top: -10px;
        left: 5px;
        width: 35px;
    }
    ul.member_list li p span{
        font-size: 14px;
    }
}
/* =====================================
物件速報
======================================== */
.property_number_list{
	width: 100%;
	max-width: 860px;
	margin: 50px auto auto;
}
.pnl_head,
.pnl_body{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #777777;
}
.pnl_head .head_kind,
.pnl_head .head_published,
.pnl_head .head_unpublished,
.pnl_body .body_kind,
.pnl_body .body_published,
.pnl_body .body_unpublished{
	width: 31%;
	text-align: center;
	padding: 10px 0;
}
.pnl_head .head_arrow,
.pnl_body .body_arrow{
	width: 7%;
	text-align: center;
}
.pnl_body .body_arrow img{
	max-width: 12px;
}
.pnl_head .head_kind,
.pnl_head .head_published
.pnl_body .body_kind,
.pnl_body .body_published{
	padding-right: 2%;
}
.pnl_head .head_unpublished,
.pnl_body .body_unpublished{
	padding-left: 2%;
}
.pnl_head .head_kind .tub_kind,
.pnl_head .head_published .tub_published,
.pnl_head .head_unpublished .tub_unpublished{
	color: #FFF;
	padding: 1em 0.5em;
	border-radius: 5px 5px 0 0;
	font-weight: 600;
}
.pnl_head .head_kind .tub_kind{
	background: #77915A;
}
.pnl_head .head_kind .tub_kind.price{
	background: #333;
}
.pnl_head .head_published .tub_published{
	background: #81B846;
}
.pnl_head .head_unpublished .tub_unpublished{
	color: #FBE972;
	background: #C37878;
}
.pnl_body .body_kind{
	color: #416C13;
	font-weight: 600;
    font-size: 18px;
}
.pnl_body .body_kind.price{
	color: #416C13;
    font-size: 18px;
}
.pnl_body .body_published span{
	font-size: 24px;
	font-weight: 700;
}
.pnl_body .body_unpublished span{
	font-size: 32px;
	font-weight: 700;
	color: #E20000;
}
@media screen and (max-width: 768px) {
	.property_number_list{
		max-width: 480px;
		margin: 20px auto auto;
	}
	.pnl_head .head_kind,
	.pnl_head .head_published,
	.pnl_head .head_unpublished,
	.pnl_body .body_kind{
		letter-spacing: 0.1em;
	}
	.pnl_head .head_kind,
	.pnl_body .body_kind{
		width: 31%;
	}
	.pnl_head .head_published,
	.pnl_body .body_published{
		width: 31%;
		text-align: center;
		padding: 5px 0;
	}
	.pnl_head .head_unpublished,
	.pnl_body .body_unpublished{
		width: 32%;
		text-align: center;
		padding: 5px 0;
	}
	.pnl_head .head_arrow,
	.pnl_body .body_arrow{
		width: 6%;
		text-align: center;
	}
	.pnl_body .body_arrow img{
		max-width: 7px;
	}
    .pnl_body .body_kind{
        font-size: 12px;
    }
    .pnl_body .body_kind.price{
        font-size: 12px;
    }
	.pnl_body .body_published span{
		font-size: 14px;
	}
	.pnl_body .body_unpublished span{
		font-size: 18px;
	}
}
/* =====================================
SUUMOに物件がなぜ載っていないの？
======================================== */
.title_know{
    margin: auto auto 10px auto;
    width: 243px;
}
@media print, screen and (min-width: 769px){
    ul.not_list{
        padding-top: 20px;
    }
    ul.not_list > li{
        margin-top: 30px;
        background: #E9EFE3;
        padding: 20px 30px;
        display: flex;
        justify-content: space-between;
    }
    ul.not_list > li .number{
        width: 60px;
    }
    ul.not_list > li .text{
        width: calc( 100% - 90px);
    }
    ul.not_list > li p{
        font-weight: 700;
        font-size: 18px;
        margin-top: 10px;
    }
    ul.not_list > li ul.ng_list{
        padding-top: 10px;
    }
    ul.not_list > li ul.ng_list li{
        margin-top: 5px;
        padding-left: 60px;
        background: url("/assets/images/lp202410/icon_ng.png") no-repeat top 3px left;
        background-size: 46px auto;
    }
    ul.not_list > li ul.ng_list.harf{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    ul.not_list > li ul.ng_list.harf li{
        width: 48%;
    }
}
.img_not_list{
    margin-top: 50px;
}
@media screen and (max-width: 768px) {
    .title_know{
        margin: auto auto 5px auto;
        width: 122px;
    }
    ul.not_list > li{
        margin-top: 20px;
        background: #E9EFE3;
        padding: 20px;
        position: relative;
    }
    ul.not_list > li .number{
        position: absolute;
        width: 34px;
        top: 10px;
        left: 10px;
    }
    ul.not_list > li p{
        font-weight: 700;
        padding-left: 40px;
    }
    ul.not_list > li ul.ng_list{
        padding-top: 5px;
    }
    ul.not_list > li ul.ng_list li{
        margin-top: 5px;
        padding-left: 45px;
        background: url("/assets/images/lp202410/icon_ng.png") no-repeat top 3px left;
        background-size: 32px auto;
    }
    .img_not_list{
        margin: 20px auto auto;
    }
}
@media screen and (max-width: 640px) {
    .img_not_list{
        width: 200px;
    }
}
/* =====================================
購入者のほとんどがSUUMOを見ている現実？！
======================================== */
.title_data{
    margin-top: 50px;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
}
.img_data_buy,
.graph_data_buy{
    margin-top: 20px;
}
.data_buy_attention{
    margin-top: 30px;
    text-align: right;
    font-size: 14px;
}
.data_buy_text{
    margin-top: 30px;
    font-size: 22px;
    text-align: center;
    font-weight: 700;
}
.data_buy_reason_wrap{
    text-align: center;
}
ul.data_buy_reason{
    padding-top: 20px;
    display: inline-block;
}
ul.data_buy_reason li{
    text-align: left;
    margin-top: 0.5em;
    background: url("/assets/images/lp202410/icon_circle.png") no-repeat top 7px left;
    background-size: 20px auto;
    padding-left: 35px;
}
@media screen and (max-width: 768px) {
    .title_data{
        margin-top: 30px;
        font-size: 12px;
    }
    .graph_data_buy{
        margin: 20px auto auto;
        max-width: 300px;
    }
    .data_buy_attention{
        margin-top: 10px;
        font-size: 10px;
    }
    .data_buy_text{
        margin-top: 20px;
        font-size: 14px;
    }
    .img_data_buy{
        margin: 20px auto auto;
        max-width: 335px;
    }
    ul.data_buy_reason{
        padding-top: 10px;
    }
ul.data_buy_reason li{
    background: url("/assets/images/lp202410/icon_circle.png") no-repeat top 5px left;
    background-size: 14px auto;
    padding-left: 25px;
}
}

/* =====================================
ポータル評価が高い
======================================== */
@media print, screen and (min-width: 769px) {
	.portal_box{
		margin-top: 70px;
		display: flex;
	}
	.portal_box .p_logo{
		width: 50%;
		padding-right: 60px;
	}
	.portal_box .p_text{
		width: 50%;
	}
}
.portal_box .p_text .navy{
	color: #102F69;
	font-size: 18px;
	font-weight: 600;
}
.portal_box .p_text .navy span.num{
	font-size: 26px;
	line-height: 1.4;
}
.portal_box .p_text .sub_text{
	font-size: 14px;
	margin-top: 0.5em;
}
.homes_box{
	margin-top: 70px;
}
.homes_box p{
	margin-top: 1em;
}
@media screen and (max-width: 768px) {
	.portal_box{
		margin: 30px auto auto;
		max-width: 480px;
	}
	.portal_box .p_text{
		margin-top: 1em;
	}
	.portal_box .p_text .navy{
		font-size: 14px;
	}
	.portal_box .p_text .navy span.num{
		font-size: 18px;
	}
	.portal_box .p_text .sub_text{
		font-size: 12px;
	}
	.homes_box{
		margin-top: 30px;
	}
}
/* =====================================
売買仲介実績
======================================== */
.result_text{
	max-width: 980px;
	margin: 50px auto auto;
}
@media print, screen and (min-width: 769px) {
	.result_list{
		margin: 40px auto auto;
		max-width: 980px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.result_list > div{
		width: 30%;
	}
}
.zoom_img a{
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.zoom_img a:after{
 	content: "";
	display: block;
	background: url("../images/results_icon_zoom.png") no-repeat center center;
	background-size: cover;
	width: 25px;
	height: 26px;
	opacity: 0.7;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.zoom_img a:hover:after{
	opacity: 1.0;
}
.zoom_img a img{
	-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
	transform: translate3d(0, 0, 0) scale(1, 1);
	transition: -webkit-transform .3s ease-out;
	transition: transform .3s ease-out;
	transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}
.zoom_img a:hover img{
	-webkit-transform: translate3d(0, 0, 0) scale(1.05, 1.05);
	transform: translate3d(0, 0, 0) scale(1.05, 1.05);
	opacity: .7;
}
h3.group_sub{
	margin-top: 70px;
	text-align: center;
	color: #013369;
	font-size: 20px;
	font-weight: 500;
}
@media print, screen and (min-width: 769px) {
	ul.award_list{
		margin-top: 50px;
		display: flex;
		justify-content: space-between;
	}
	ul.award_list li{
		width: 23%;
	}
}
@media screen and (max-width: 768px) {
	.result_text{
		margin: 20px auto auto;
		max-width: 680px;
	}
	.result_list{
		margin: 20px auto auto;
		max-width: 480px;
	}
	.result_list > div{
		margin-top: 20px;
	}
	h3.roup_sub{
		margin-top: 30px;
		font-size: 14px;
	}
	ul.award_list{
		margin: auto;
		padding-top: 10px;
		max-width: 240px
	}
	ul.award_list li{
		margin-top: 20px;
	}
}
/* =====================================
お客様の声
======================================== */
ul.voice_list{
	display: flex;
	flex-wrap: wrap;
	margin: auto;
}
ul.voice_list li{
	margin-top: 50px;
	width: 25%;
	padding: 0 1%;
}
ul.voice_list li a{
	text-decoration: none;
	color: #333;
}
ul.voice_list li .box{
	background: #FFF;
	box-shadow: 0 3px 10px 0 rgba(0,0,0,0.3);
}
ul.voice_list li .box .photo{
	text-align: center;
	overflow: hidden;
}
ul.voice_list li .box .photo img{
	object-fit: cover;
	transition: all 0.3s;
	width: 100%;
	height: 200px;
}
ul.voice_list li a:hover .box .photo img{
	transform: scale(1.1, 1.1);
}
ul.voice_list li .box .text{
	padding: 15px 20px;
	font-size: 14px;
}
ul.voice_list li .box .text .voice_kind{
	background: #F4F4F5;
	padding: 0 0.5em;
	margin-right: 1em;
	font-weight: 500;
}
ul.voice_list li .box .text .name{
	font-size: 16px;
	font-weight: 600;
}
ul.voice_list li .box .text .comment{
	margin-top: 0.7em;
	min-height: 110px;
}
ul.voice_list li .box .text .link_text{
	margin-top: 0.7em;
	border-top: 1px solid #CCC;
	padding-top: 0.7em;
	text-align: right;
}
.voice_feature{
	text-align: center;
}
.voice_feature .feature_text .underline{
	font-size: 22px;
	font-weight: 700;
}
.voice_feature h3{
	margin-top: 70px;
	color: #81B846;
	font-weight: 700;
	font-size: 26px;
}
ul.buy_example{
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
ul.buy_example li{
	padding: 0 2%;
}
ul.buy_example li .box{
	background: #FFF;
	box-shadow: 0 3px 10px 0 rgba(0,0,0,0.3);
	border-radius: 5px;
	padding: 1em 0;
	width: 200px;
}
.buy_kind_example{
	background: #FFF;
	box-shadow: 0 3px 10px 0 rgba(0,0,0,0.3);
	border-radius: 5px;
	padding: 1em 0;
	width: 680px;
	margin: 40px auto auto;
}
ul.buy_example li .box .subtitle,
.buy_kind_example .subtitle{
	color: #416C13;
	letter-spacing: 0.1em
}
ul.buy_example li .box .data,
.buy_kind_example .data{
	font-weight: 600;
}
ul.buy_example li .box .data span,
.buy_kind_example .data span{
	font-size: 24px
}
@media screen and (max-width: 768px) {
	ul.voice_list{
		max-width: 480px;
	}
	ul.voice_list li{
		margin-top: 20px;
		width: 50%;
		padding: 0;
	}
	ul.voice_list li:nth-child(odd){
		padding-right: 2%;
	}
	ul.voice_list li:nth-child(even){
		padding-left: 2%;
	}
	ul.voice_list li .box .photo img{
		height: 160px;
	}
	ul.voice_list li .box .text{
		padding: 10px;
		font-size: 10px;
	}
	ul.voice_list li .box .text .name{
		font-size: 12px;
	}
	ul.voice_list li .box .text .comment{
		min-height: 60px;
	}
	.voice_feature .feature_text .underline{
		font-size: 12px;
	}
	.voice_feature h3{
		margin-top: 30px;
		font-size: 14px;
	}
	ul.buy_example{
		margin-top: 10px;
	}
	ul.buy_example li{
		padding: 0 2%;
	}
	ul.buy_example li .box{
		padding: 1em 0;
		width: 140px;
	}
	.buy_kind_example{
		max-width: 480px;
		margin: 20px auto auto;
	}
	ul.buy_example li .box .subtitle,
	.buy_kind_example .subtitle{
		line-height: 1.6
	}
	ul.buy_example li .box .data span,
	.buy_kind_example .data span{
		font-size: 16px;
	}
}
@media screen and (max-width: 480px) {
	ul.buy_example li .box{
		width: 100px;
	}
	.buy_kind_example{
		max-width: 340px;
	}
	ul.voice_list li .box .photo img{
		height: 125px;
	}
	ul.buy_example li .box .data{
		letter-spacing: 0.05em;
	}
}

/* =====================================
問い合わせ
======================================== */
.member_comment{
	margin: 50px auto auto;
	text-align: center;
	font-weight: 500;
	font-size: 22px;
}
.contact_box{
	margin: 50px auto auto;
    border: 3px solid #81B846;
    border-radius: 10px;
    padding: 40px 30px 60px 30px;
    background-color: #FFF;
    background-image: url("../images/lp202410/bg_contact.png");
    background-repeat: no-repeat;
    background-position: center bottom;
	background-size: 834px auto;
}
.contact_box p{
    font-weight: 600;
    font-size: 20px;
    text-align: center;
}
.contact_box .contact_btn_wrap{
    margin: 20px auto auto;
    max-width: 560px;
}
@media screen and (max-width: 768px) {
	.member_comment{
		margin: 30px auto auto;
		font-size: 14px;
	}
    .contact_box{
        margin: 30px auto auto;
        padding: 20px 20px 30px 20px;
        background-size: auto 38px;
    }
    .contact_box p{
        font-size: 12px;
    }
    .contact_box .contact_btn_wrap{
        margin: 10px auto auto;
        max-width: 480px;
    }
}
@media screen and (max-width: 480px) {
    .contact_box .contact_btn_wrap{
        max-width: 275px;
    }
}
/* =====================================
フッター
======================================== */
footer{
	text-align: center;
	padding: 70px 50px;
	border-top: 1px solid #81B846;
}
@media print, screen and (min-width: 769px) {
	footer .footer_link ul{
		display: flex;
		justify-content: center;
	}
	.footer_link ul li{
		margin: 0 1.5em;
	}
	.copy{
		margin-top: 40px;
		font-size: 14px;
	}
}
@media screen and (max-width: 768px) {
	footer{
		padding: 50px 20px;
	}
	.footer_link li{
		margin: 0 auto 1.5em auto;
	}
	.copy{
		margin-top: 30px;
		font-size: 10px;
	}
}