@charset "utf-8";
/*----------------------------------------------------------------------------------------

	index.css

----------------------------------------------------------------------------------------*/

.wrapper {
	padding-bottom: 60px;
	background-color: #f5f5f5;
}
.wrapper p {
	font-size: 14px;
}

/* トップニュース特設バナー*/
#topnews{padding-top: 5rem;}

/* トップページのコーナータイトル ///
---------------------------------------------- */
.toptitle {
	margin-bottom: 22px;
	display: flex;
	font-size: 24px;
	line-height: 1;align-items: self-end;
}
.toptitle h2 i {
	margin-right: 9px;
	display: inline-block;
}
.toptitle .more {margin-left: auto;}
.toptitle .more a {
	padding-right: 3px;font-size: 16px;
	font-weight: 700;
}
.toptitle .more a:hover {opacity: 0.8;}
.toptitle .more a::after {
	margin-left: 10px;
	color: #beaf87;
}

/* トップページのスライド ///
---------------------------------------------- */
body .top-slide, #mainSlider {transition: opacity 0.4s;}
body .top-slide:not(.slick-initialized), #mainSlider:not(.slick-initialized) {
	overflow: hidden;
	opacity: 0;
}
body .top-slide .slick-track {left: calc((100% - 1080px) / 2);}
body .top-slide .slick-slide {
	margin: 0 10px;
	display: flex;
}
body .top-slide .slick-arrow {
	width: calc((100% - 1080px) / 2);
	background-color: rgba(245, 245, 245, 0.7);
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	cursor: pointer;
}
body .top-slide .slick-arrow i {
	margin: auto;
	width: 50px;
	height: 50px;
	background-color: #beaf87;
	position: absolute;
	top: 0;
	bottom: 0;
	color: #fff;
	font-size: 20px;
	font-weight: 700;line-height: 50px;
	text-align: center;
}
body .top-slide .slick-arrow.prev {left: 0;}
body .top-slide .slick-arrow.next i {left: 16px;}
body .top-slide .slick-arrow.next {right: 0;}
.top-slide .slick-arrow.prev i {
	right: 16px;
	transform: scale(-1, 1);
}

/* ヘッダー //
////////////////////////////////////////////////////////////////////*/

#body_header {background-color: #fff;}
#body_header > .hdarea   {
	height: 660px;
	/* height: 569px; */
	/* height: 0; */
	/* padding-bottom:650px; */
	/* min-width: 100%;
	max-width: 100%; */
	overflow: hidden;
	
	/* padding-bottom:54.16666666666667%;画像の高さ650÷1000×100 */
}
/* .webp #body_header > .hdarea {background: url(/images/index/shd_bg.webp) no-repeat 50% bottom /  100% 650px , #0297ff;} */

/*  */
/* .webp #body_header > .hdarea {background: url(/images/index/shd_bg_650.webp) no-repeat 50% bottom / contain , #0297ff;} */
.webp #body_header > .hdarea {background: url(/images/index/shd_bg.webp) no-repeat center bottom / cover , #0297ff;}
.no-webp #body_header > .hdarea {background: url(/images/index/shd_bg.jpg) no-repeat 50% 95% / cover, #0297ff;}

#body_header .topline > div {
	height: 30px;
	display: flex;
	color: #5d5d60;
	font-size: 12px;
	align-items: center;
}
#body_header .topline h1 {
	width: 700px;
	white-space: nowrap;
	overflow: hidden;
	color: #fff;
	font-weight: 400;
	text-overflow: ellipsis;
	font-feature-settings: 'palt';
}
#body_header .topline .links {
	margin-left: auto;
	display: flex;
}
#body_header .topline .links > p:not(:last-child) {
	margin-right: 3px;
}
#body_header .topline .links a {
	display: block;
	color: #fff;
	color: #fff;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}
#body_header .topline .login a {
	width: 180px;
	background-color: #b20;
	font-size: 14px;
}
#body_header .topline .b_btn a {
	width: 122px;
	background-color: #414042;
	font-size: 14px;
}
#body_header .topline .b_btn a::after {
	margin-left: 3px;
	content: "\f35d";
}
#body_header .hedtitle {
	margin: 20px auto 0;
	display: flex;
	align-items: center;
	color: #252526;
}
#body_header .hedtitle h2 {
	margin-right: auto;
}
#body_header .hedtitle .tel {
	margin-right: 22px;
	font-size: 14px;
	line-height: 1;
}
#body_header .hedtitle .tel i {
	margin-left: -3px;
}
#body_header .hedtitle .tel em {
	margin-top: 2px;
	padding-left: 44px;
	background: url(/images/common/free_tel.png) no-repeat top 3px left;
	display: block;
	font-size: 25px;
	font-weight: 400;
	font-family: BEBAS;
}
#body_header .hedtitle .raiten {
	margin-top: 2px;
}
#body_header .hedtitle .raiten a {
	width: 240px;
	background-color: #beaf87;
	border-radius: 4px;
	display: block;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 40px;
	text-align: center;
}
#body_header a i img {
	margin-right: 8px;
	position: relative;
	top: -2px;
	vertical-align: middle;
}

/* サブヘッダー //
////////////////////////////////////////////////////////////////////*/

#subheader > div {
	padding-right: 400px;
	position: relative;
}
#subheader .title {
	padding-top: 80px;
	font-weight: 700;
	font-size: 20px;
}
#subheader .title p {
	margin-top: 16px;
	color: #252526;
	font-size: 20px;
}

/* メインのスライド ///
---------------------------------------------- */
#mainSlider {
	width: 400px;
	height: 350px;
	position: absolute;
	top: 63px;
	right: 20px;
	bottom: 0;
}
#mainSlider .slick-list {
	padding: 15px 0 !important;
	height: auto !important;
}
#mainSlider .slide {
	margin: 0 20px;
	padding: 0 18px;
	width: 360px;
	height: 320px;
	background-color: #fff;
	border: none;border-radius: 10px;
	box-shadow: 0 0 10px rgb(0 0 0 / 30%);
	overflow: hidden;
	font-feature-settings: 'palt';
}
#mainSlider .slide .img-fit {
	margin: 0 -18px 12px;
	height: 222px;
	display: block;
}
#mainSlider .slide h3 {
	margin-bottom: 6px;
	color: #beaf87;
	font-size: 16px;
	font-weight: 900;
}
#mainSlider .slide p {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
}
#mainSlider .slick-arrow {
	margin: auto;
	width: 1em;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	color: #fff;
	font-size: 50px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
}
#mainSlider .slick-arrow.prev {
	background-image: url(/images/index/prev.png);
	background-position-x: left;
	left: -20px;
}
#mainSlider .slick-arrow.next {
	background-image: url(/images/index/next.png);
	background-position-x: right;
	right: -20px;
}
#mainSlider .slick-dots {
	margin-top: 5px;
	display: flex;
	justify-content: center;
	top: 0;
	right: 14px;
	bottom: 0;
}
#mainSlider .slick-dots button {
	margin: 0 5px;
	width: 10px;
	height: 10px;
	background-color: #fff;
	border: none;
	border-radius: 50%;
	outline: none;
	overflow: hidden;
	text-indent: -1000%;
	cursor: pointer;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 20%);
}
#mainSlider .slick-active button {background-color: #252526;}

/* 売却相場は？買い手はいるの？ //
////////////////////////////////////////////////////////////////////*/

#mypage {padding: 25px 0 43px;}
#mypage h2 img {
	width: 1080px;
	height: 180px;
}
#mypage > p {
	margin-top: 10px;
	color: #252526;
	font-size: 14px;
	line-height: 1;
	text-align: right;
}
#mypage > p i {margin-right: 5px;}
#mypage form {position: relative;}
#mypage form > div {
	display: flex;
	position: absolute;
	right: 180px;
	bottom: 30px;
}
#mypage button {
	width: 90px;
	height: 94px;
	background: linear-gradient(127deg, #d9ccab, #beaf87);
	border: none;
	border-bottom: 4px solid #78705d;
	border-radius: 6px;
	box-shadow: 0 0 14px 2px rgb(0 0 0 / 20%);
	display: block;
	cursor: pointer;
	position: relative;color: #414042;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}
#mypage button::after {
	width: 100%;
	background-color: #fff;
	border-radius: 6px;
	opacity: 0;
	position: absolute;
	top: 0;
	bottom: -4px;
	left: 0;
	transition: opacity 0.1s;
	content: "";
}
#mypage button:hover::after {opacity: 0.2;}
#mypage button + button {margin-left: 10px;}
#mypage button i {
	margin-bottom: 9px;
	display: block;
}

/* お知らせ //
////////////////////////////////////////////////////////////////////*/

#info {
	margin-bottom: 60px;
	display: flex;
	justify-content: space-between;
}
#info > section {width: 100%;}
#info > section + section {margin-left: 40px;}
#info h2 {
	margin-left: 1px;color: #414042;
	font-size: 24px;
}
#info li {position: relative;}
#info li:not(:last-child) {margin-bottom: 10px;}
#info li > a {
	width: 100%;
	height: 55px;
	background-color: #fff;
	box-shadow: 0 0 6px 0 rgb(0 0 0 / 10%);
	border-radius: 8px;
	overflow: hidden;
	display: table;
	font-size: 14px;
	line-height: 1.3;
}
#info li > a::after {
	position: absolute;right: 20px;
	color: #beaf87;
}
#info li > a > * {
	display: table-cell;
	vertical-align: middle;
	transition: 0.1s;
}
#info li time {
	width: 110px;
	background-color: #beaf87;
	color: #fff;
	text-align: center;
}
#info li span {
	padding-right: 54px;
	padding-left: 14px;
}
#info li > a:hover time {opacity: 0.9;}
#info li > a:hover span {
	background-color: #f7f5ee;
	color: #beaf87;
}

/* 最適な売却手法を提案 //
////////////////////////////////////////////////////////////////////*/

#teian {
	margin-bottom: 144px;
	padding: 43px 0 60px;
	background-color: #414042;
	position: relative;
	z-index: 1;
}
#teian::after {
	width: 100%;
	height: 230px;
	background: url(/images/index/teian_bg.png);
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: "";
}
#teian h2 {
	margin-bottom: 40px;
	padding-left: 3px;
	color: #beaf87;
	font-size: 24px;
	line-height: 1;
}
#teian h2 i {margin-right: 14px;}
#teian ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	counter-reset: num 0;
}
#teian .box {
	background-color: #fff;
	position: relative;
	z-index: 1;
}
#teian .box::before {
	width: 50px;
	height: 50px;
	background-color: #fff;
	position: absolute;
	top: -10px;
	left: 0;
	content: "";
}
#teian .box:nth-child(n+4) {margin-top: 25px;}
#teian .box a {
	padding-top: 164px;
	width: 350px;
	min-height: 300px;display: block;
	position: relative;
}
#teian .box a > i {
	width: 25px;
	height: 25px;
	background-color: #beaf87;
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: #fff;
	font-weight: 700;
	line-height: 25px;
	text-align: center;
}
#teian .box .img-fit {
	width: 100%;
	height: 180px;
	background-color: #f4f4f4;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
#teian .box h3 {
	margin-right: 10px;
	padding: 10px 14px 0;
	height: 70px;background-color: #beaf87;
	color: #fff;
	font-size: 24px;
	line-height: 1.25;
	font-feature-settings: 'palt';
}
#teian .box > a::before {
	width: 50px;
	background-color: #beaf87;
	position: absolute;
	top: -10px;
	left: 0;
	color: #414042;
	font-size: 24px;
	font-weight: 700;
	line-height: 50px;
	text-align: center;
	counter-increment: num 1;
	content: "0" counter(num);
}
#teian .box h3 em {
	display: block;
	color: #414042;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
}
#teian .box a > p {
	padding: 10px 50px 0 14px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	font-feature-settings: 'palt';
}
#teian .box:nth-child(4) h3 {
	font-size: 23px;
	letter-spacing: -0.03em;
}

/* お客様の声 //
////////////////////////////////////////////////////////////////////*/

#voice {margin-bottom: 80px;}
#voice .toptitle {margin-bottom: 30px;}
#voice .toptitle h2 i {margin: 0 12px 0 3px;}
#voice-list:not(.slick-initialized) {height: 320px;}
#voice .swiper-slide {
	padding: 0 10px;
	height: auto;
	display: flex;
}

/* 購入希望者一覧 //
////////////////////////////////////////////////////////////////////*/

#kibou {margin-bottom: 56px;}
#kibou .toptitle {margin-bottom: 28px;}
#kibou-list {margin-top: 18px;}

/* お預かり物件 //
////////////////////////////////////////////////////////////////////*/

#oazukari {padding-bottom: 117px;}
#oazukari .tksn.loading {height: 488px;}
#oazukari .des76 .slick-track {left: calc((100% - 1080px) / 2);}
#oazukari .des76 .des76-ul {margin-top: 17px;}
#oazukari .des76 .slick-slide {margin: 0 15px;}
#oazukari .des76 .des76-li {overflow: hidden;}
#oazukari .des76 .des76-box {
	margin-right: 0;
	width: 340px;
	float: left;
}
#oazukari .des76 .des76-box:not(:last-child) {margin-right: 30px;}
#oazukari .des76 .slick-dots {
	width: 100%;
	display: flex;
	position: absolute;
	bottom: -56px;
	left: 0;
	line-height: 1;
	justify-content: center;
}
#oazukari .des76 .slick-dots button {
	width: 14px;
	height: 14px;
	background-color: #fff;
	border: none;
	border-radius: 50%;
	outline: none;
	overflow: hidden;
	text-indent: -200%;
	line-height: 1;
	cursor: pointer;
}
#oazukari .des76 .slick-dots .slick-active button {background-color: #252526;}
#oazukari .des76 .slick-dots li:not(:last-child) {margin-right: 13px;}

/* 成約事例 //
////////////////////////////////////////////////////////////////////*/

#jirei {
	padding: 60px 0 84px;
	color: #fff;
}
.webp #jirei{background: url(/images/index/jirei_bg.webp) top / cover, #433f40;}
.no-webp #jirei{background: url(/images/index/jirei_bg.jpg) top / cover, #433f40;}

#jirei > div > div {
	margin-top: 30px;
	display: flex;
}
#jirei h2, #jirei .toptitle .more a {color: #beaf87;}
#jirei .toptitle h2 i {
	margin-right: 15px;
	margin-left: 2px;
	position: relative;
	top: 3px;
}
#jirei .toptitle {margin-bottom: 30px;}
#jirei .box {
	width: 378px;
	min-height: 244px;
}
#jirei .box:not(:last-child) {margin-right: 18px;}
#jirei .box > a {
	padding: 20px 23px 50px;
	height: 100%;border: 1px solid #a1a0a2;
	display: block;
	position: relative;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	transition: 0.1s;
}
#jirei .box > a:hover {background-color: rgba(255,255,255,0.1);}
#jirei .box .title {
	margin-bottom: 16px;
	padding-left: 65px;
	min-height: 66px;position: relative;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}
#jirei .box .title .hd i {position: absolute;}
#jirei .box .title .hd i.tochi {
	top: 3px;
	left: 5px;
}
#jirei .box .title .hd i.kodate {
	top: 6px;
	left: 4px;
}
#jirei .box .title .hd i.mansion {
	top: 8px;
	left: -5px;
}
#jirei .box .shd {
	margin-bottom: 10px;
	color: #beaf87;
}
#jirei .box .txt {
	max-height: 40px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
#jirei .box .more {
	width: 134px;
	background-color: #beaf87;
	position: absolute;
	right: 0;
	bottom: 0;
	line-height: 31px;
	text-align: center;
}
#jirei .box .more::after {margin-left: 25px;}

/* 不動産を高く売却する５つの方法 //
////////////////////////////////////////////////////////////////////*/

#method {padding: 53px 0 60px;}
#method ol {
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
}
#method .box {width: 200px;position: relative;}
#method .box > a {
	padding: 0 20px 70px;
	height: 100%;background-color: #fff;
	display: block;
	position: relative;
	font-size: 14px;
}
#method .box .img-fit {
	margin: 0 -20px 29px;
	display: block;
}
#method .box h3 {margin-bottom: 8px;height: 40px;}
#method .box h3 i {
	margin: auto;
	width: 34px;
	height: 34px;
	background-color: #beaf87;
	position: absolute;
	top: 103px;
	right: 0;
	left: 0;
	color: #fff;
	line-height: 34px;
	text-align: center;
}
#method .box .more {
	width: 132px;
	background-color: #beaf87;
	position: absolute;
	right: 0;
	bottom: 0;
	color: #fff;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
}
#method .box .more::after {margin-left: 10px;}
#method .box::after {
    background-color: #c6b997;
	line-height: 34px;
	height: 34px;
	width: 34px;
	text-align: center;
	color: #fff;
    display: block;
    position: absolute;
    left: 83px;
    top: 130px;
    z-index: 999;
    font-size: 16px;
}
#method .box:nth-of-type(1)::after {content: "1";}
#method .box:nth-of-type(2)::after {content: "2";}
#method .box:nth-of-type(3)::after {content: "3";}
#method .box:nth-of-type(4)::after {content: "4";}
#method .box:nth-of-type(5)::after {content: "5";}