@charset "UTF-8";

/* 
    index.css（トップページ用css）
*/

/* フロントページのヘッダー差分 */
.hero-header {
	display: block;
	width: auto;
	height: 472px;
}

.siteTitle-wrap {
	width: 1080px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 35px;
	text-align: left;
}

.siteTitle-wrap > .siteTitle {
	z-index: 1;
	width: auto;
	padding: 20px 30px 20px 0;
}

.open-info {
	display: block;
	width: 1080px;
	margin: 144px auto 0;
	padding-left: 0;
}

.open-info::after {
	content: none;
}

.open-info_wrap + .open-info_wrap {
	margin-top: 12px;
	margin-left: 0;
}

.heroImages-wrap > .heroImages {
	position: relative;
	bottom: 428px;
	left: 175px;
	height: 440px;
}

.header-menu {
	margin-top: -32px;
}

.header-menu_wrap::before {
	content: none;
}

.dropDown-menu {
	top: inherit;
	bottom: 100%;
	box-sizing: border-box;
	border-bottom: none;
}

/* end フロントページのヘッダー差分 */

/* メインコンテンツ */
.front-body > section {
	margin-top: 40px;
}

/* 主要バナー */
.primary-bnrs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.primary-bnrs a,.secondary-bnrs a {
	height: auto;
}

.secondary-bnrs {	
	margin: 10px 0 40px;
}
.secondary-bnrs .bnr  {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.secondary-bnrs .bnr a {
    display: flex;
    align-content: center;
    width: 530px;
    height: 299px;
    overflow: hidden;
    box-sizing: border-box;
}
.secondary-bnrs .bnr a img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.award_bnr > small {
	display: block;
	font-size: 1.2rem;
	text-align: right;
}

.corona {
	margin: 20px auto -20px;
	border: 5px solid #beaf87;
	line-height: 3.4;
	text-align: center;
}

/* お知らせとバナー */
.news-award {
	display: flex;
	margin-top: 40px;
}

/* お知らせ */
.news-info {
	display: flex;
	height: 128px;
}

.news-info_heading {
	position: relative;
	flex: 0 0 auto;
}

.news-info_heading > .btn {
	position: absolute;
	right: 0;
	bottom: 14px;
	left: 0;
	width: 131px;
	height: 24px;
	margin: 0 auto;
}

.news-info_heading > .btn > a {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid currentColor;
	color: #beaf87;
	font-size: 1.4rem;
}

.news-info_heading > .btn > a:hover {
	border-color: #fff;
	background-color: #fff;
	color: #414042;
}

.news-info_article {
	width: 100%;
	padding: 10px 20px;
	overflow-y: scroll;
	border: 1px solid #beaf87;
	border-left: none;
}

.news-post {
	display: flex;
	padding-bottom: 8px;
	border-bottom: 1px #aaa dotted;
	font-size: 1.4rem;
}

.news-post time {
	display: block;
	margin-right: 30px;
}

.news-post .link > a::after {
	width: 100%;
	opacity: 0;
}

.news-post .link > a:hover::after {
	opacity: 0.5;
}

.news-post + .news-post {
	margin-top: 7px;
}

/* 公式sns */
.sns-sect {
	display: flex;
	justify-content: center;
}

.sns-sect_title {
	margin-right: auto;
	margin-left: auto;
	font-size: 1.8rem;
	line-height: 1.25;
}

.sns-sect_title.visually-hidden {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	white-space: nowrap;
	clip-path: inset(50%);
}

.sns-sect_title > span {
	display: block;
	font-size: 2.8rem;
}

/* エリア物件を探す */
.area-search {
	position: relative;
	background-color: #beaf87;
}

.area-search::after {
	content: '';
	position: absolute;
	top: -18px;
	right: 21px;
	width: 152px;
	height: 146px;
	background: url(/images/index/area-search_chara.png) no-repeat;
}

.area-search > p {
	position: absolute;
	top: 36px;
	left: 774px;
	color: #fff;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
}

.area-search > p > span {
	margin-right: 8px;
	color: #414042;
	font-size: 3.8rem;
	font-weight: bold;
	line-height: 1;
}

.area-search_inner {
	padding: 0 20px 20px;
}

.search-tabs {
	display: flex;
}

.search-tabs > li {
	width: 188px;
	height: 40px;
	transition: 0.25s;
	background-color: #414042;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
}

.search-tabs > li:hover,
.search-tabs > li.is-active {
	background-color: #fff;
	color: #414042;
}

.search-tabs > li + li {
	margin-left: 7px;
}

#search-form {
	display: flex;
	position: relative;
	padding: 30px 25px 25px;
	background-color: #fff;
}

#search-form input[type='submit'] {
	position: absolute;
	right: 177px;
	bottom: 25px;
	width: 164px;
	height: 48px;
	padding: 0;
	transition: 0.25s;
	border: none;
	background-color: #414042;
	color: #fff;
	font-size: 1.6rem;
	line-height: 48px;
	text-align: center;
	cursor: pointer;
}

#search-form input[type='submit']:hover {
	background-color: #beaf87;
	color: #414042;
}

.jyoken {
	width: 214px;
	margin-left: 33px;
}

.jyoken.-main {
	display: none;
	width: 494px;
	margin-left: 0;
}

.jyoken.-main.is-active {
	display: block;
}

.jyoken.-main .contents {
	height: 289px;
}

.jyoken.-sub {
	position: relative;
}

.jyoken.-sub::before {
	content: '+';
	position: absolute;
	top: 0;
	left: -28px;
	color: #848484;
	font-size: 4rem;
	line-height: 264px;
}

.jyoken .heading {
	background-color: #beaf87;
	color: #fff;
	font-size: 2rem;
	line-height: 44px;
	text-align: center;
}

.jyoken .contents {
	position: relative;
	height: 220px;
	padding: 15px;
	border: 1px solid #beaf87;
	border-top: none;
}

.jyoken .contents label,
.jyoken .contents input {
	cursor: pointer;
}

.jyoken .contents.-map label,
.jyoken .contents.-station label,
.jyoken .contents.-school label {
	position: absolute;
	font-size: 1.3rem;
}

.jyoken .contents.-map {
	padding: 0;
	background: url(/images/index/search_bg-area.png) no-repeat;
}

.jyoken .contents.-map label {
	display: flex;
	flex-flow: column;
	font-size: 1.4rem;
	font-weight: bold;
}

.jyoken .contents.-map input {
	margin: 3px auto 0;
}

.jyoken .contents.-station {
	padding: 0;
	background: url(/images/index/search_bg-station.png) no-repeat;
}

.jyoken .contents.-station label {
	display: flex;
	align-items: center;
	line-height: 1.25;
}

.jyoken .contents.-station .name {
	font-size: 1.3rem;
	font-weight: bold;
}

.jyoken .contents.-school {
	padding: 0;
	background: url(/images/index/search_bg-area.png) no-repeat;
	font-size: 1.5rem;
}

.jyoken .contents.-school .school-area {
	position: absolute;
	width: 60px;
}

.jyoken .contents.-school p {
	font-weight: bold;
	text-align: center;
}

.jyoken .contents.-school label {
	display: block;
	position: static;
	padding: 6px;
	transition: 0.25s;
	border: 1px solid #777;
	background-color: #fff;
	font-size: 1.5rem;
	line-height: 1;
}

.jyoken .contents.-school label:hover {
	background-color: #414042;
	color: #fff;
}

.jyoken .contents.-school .primary {
	margin-top: 1px;
}

.jyoken .contents.-school input {
	display: none;
}

.jyoken .contents.step2 {
	display: none;
	position: absolute;
	top: 74px;
	left: 26px;
	width: 492px;
	height: 288px;
	padding: 0 0 0 15px;
	background-color: rgb(0 0 0 / 65%);
	color: #fff;
}

.jyoken .contents.step2 .title {
	padding-top: 30px;
	padding-bottom: 20px;
	font-size: 1.8rem;
	line-height: 1;
}

.jyoken .contents.step2 ul {
	display: flex;
	flex-wrap: wrap;
	max-height: 194px;
	overflow-y: auto;
}

.jyoken .contents.step2 li {
	flex: 1 1 auto;
	width: 50%;
}

.jyoken .contents.step2 label {
	font-size: 1.4rem;
}

.jyoken .contents.step2 input {
	margin-right: 8px;
	margin-left: 0;
}

.jyoken .contents.step2 .close-btn {
	display: flex;
	position: absolute;
	top: 15px;
	right: 20px;
	align-items: center;
	font-size: 1.3rem;
	cursor: pointer;
}

.jyoken .contents.step2 .fa-times {
	margin-right: 6px;
	color: rgb(255 255 255 / 75%);
	font-size: 2.2rem;
}

.jyoken .contents.-type > p,
.jyoken .contents.-price > p {
	margin-bottom: 5px;
}

.jyoken .contents.-type > label,
.jyoken .contents.-price > label {
	display: block;
	line-height: 30px;
}

.jyoken .contents.-type > select,
.jyoken .contents.-price > select {
	display: block;
	width: 100%;
	height: 30px;
	border: 1px solid #beaf87;
	background-color: #fff;
}

.jyoken .contents.-type > select:disabled,
.jyoken .contents.-price > select:disabled {
	background-color: #d8cfb7;
}

.jyoken .contents.-price select + p {
	margin-top: 15px;
}

.jyoken .contents.-price .note {
	margin-top: 20px;
	margin-bottom: 0;
	font-size: 1rem;
	line-height: 1.4;
}

/* MAP・エリアから探す */
.tamaku {
	top: 75px;
	left: 250px;
}

.miyamaeku {
	top: 160px;
	left: 320px;
}

.takatsuku {
	top: 130px;
	left: 390px;
}

.asaoku {
	top: 140px;
	left: 160px;
}

.komaeshi {
	top: 30px;
	left: 315px;
}

.inagishi {
	top: 35px;
	left: 135px;
}

.machidashi {
	top: 180px;
	left: 40px;
}

/* 沿線から探す */

/* 小田急線 */
.odakyu {
	top: 160px;
	flex-direction: column;
}

.odakyu > .name {
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.odakyu.reverse {
	top: inherit;
	bottom: 109px;
	flex-direction: column-reverse;
}

.odakyu.reverse .name {
	order: 3;
}

.tsurukawa {
	left: 3px;
}

.kakio {
	left: 48px;
}

.shin-yurigaoka {
	left: 96px;
}

.yurigaoka {
	left: 140px;
}

.yomiuriland-mae {
	left: 185px;
}

.ikuta {
	left: 230px;
}

.mukougaoka-yuuen {
	left: 275px;
}

.mukougaoka-yuuen > .name {
	margin-top: -3px;
	margin-bottom: -3px;
	transform: scale(1, 0.9);
}

.noborito {
	left: 329px;
}

.noborito > .name,
.noborito > .number {
	position: relative;
	left: -17px;
}

.izumi-tamagawa {
	left: 363px;
}

.komae {
	left: 409px;
}

.kitami {
	left: 453px;
}

/* 小田急多摩線 */
.tama .name {
	margin-left: 3px;
}

.haruhino {
	top: 54px;
	left: 67px;
}

.haruhino .name {
	display: block;
}

.haruhino .number {
	margin-left: 3px;
}

.kurokawa {
	top: 87px;
	left: 75px;
}

.kurihira {
	top: 111px;
	left: 83px;
}

.satsukidai {
	top: 135px;
	left: 91px;
}

/* JR南武線 */
.nanbu .number {
	margin-left: 3px;
}

.nanbu.reverse {
	left: inherit;
}

.nanbu.reverse input {
	order: 3;
}

.nanbu.reverse .number {
	margin-right: 3px;
}

.minamitama {
	top: 6px;
	left: 279px;
}

.inaginaganuma {
	top: 33px;
	left: 288px;
}

.yanokuchi {
	top: 59px;
	left: 296px;
}

.inadadutsumi {
	top: 106px;
	right: 160px;
}

.nakanoshima {
	top: 132px;
	right: 152px;
}

.syukugawara {
	top: 183px;
	left: 337px;
}

.kuji {
	top: 209px;
	left: 345px;
}

.tsudayama {
	top: 235px;
	left: 354px;
}

.musashi-mizonoguchi {
	top: 261px;
	left: 362px;
}

/* 京王線 */
.keio {
	bottom: 187px;
	flex-direction: column;
}

.keio > input {
	order: 3;
}

.keio > .name {
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.inagi {
	left: 180px;
}

.keio-yomiuriland {
	left: 208px;
}

.keio-yomiuriland > input {
	position: relative;
	left: 9px;
}

.keio-yomiuriland > .name {
	font-size: 1.1rem !important;
}

.keio-inadadutsumi {
	left: 252px;
}

.keio-inadadutsumi > input {
	position: relative;
	left: 15px;
}

/* 学区から探す */
.school-tamaku {
	bottom: 147px;
	left: 270px;
}

.school-miyamaeku {
	bottom: 61px;
	left: 323px;
}

.school-takatsuku {
	bottom: 82px;
	left: 406px;
}

.school-asaoku {
	bottom: 94px;
	left: 170px;
}

.school-komaeshi {
	display: flex;
	right: 55px;
	bottom: 209px;
	align-items: center;
	width: auto !important;
}

.school-komaeshi > p {
	margin-right: 3px;
}

.school-inagishi {
	bottom: 189px;
	left: 138px;
}

.school-machidashi {
	bottom: 50px;
	left: 36px;
}

/* 会員登録誘導バナー */
.joinFree-sect {
	position: relative;
}

.joinFree-sect::after {
	content: '';
	position: absolute;
	top: 0;
	left: 100%;
	width: 100vw;
	height: 100%;
	background-color: #e6e7e8;
}

.joinFree-bnrs {
	display: flex;
	align-items: center;
	background-color: #e6e7e8;
}

/* おすすめ物件, お客様の声 */
.recommend-sect_contents,
.customers-voice_contents {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.recommend-sect_contents > .title,
.customers-voice_contents > .title {
	order: 1;
	font-weight: normal;
	letter-spacing: 0.15em;
	line-height: 58px;
}

.recommend-sect_contents > .list,
.customers-voice_contents > .list {
	order: 3;
	width: 100%;
}

.recommend-sect_contents > .btn,
.customers-voice_contents > .btn {
	order: 2;
	width: 120px;
	height: 32px;
}

.recommend-sect_contents > .btn > a,
.customers-voice_contents > .btn > a {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	background-color: #414042;
	color: #fff;
	font-size: 1.4rem;
}

.recommend-sect_contents > .btn > a:hover,
.customers-voice_contents > .btn > a:hover {
	background-color: #beaf87;
	color: #414042;
}

.recommend-sect_contents > .btn > a::after,
.customers-voice_contents > .btn > a::after {
	content: '\f0da';
	position: absolute;
	right: 11px;
	transition: inherit;
	color: #b1b1b1;
	font-weight: 900;
}

.recommend-sect_contents > .btn > a:hover::after,
.customers-voice_contents > .btn > a:hover::after {
	color: #585555;
}

.recommend-sect_contents iframe {
	max-height: 600px;
}

/* お客様の声 */
.customers-voice_contents > .list {
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
}

.customers-voice_contents .voice-post {
	width: 196px;
}

.customers-voice_contents .voice-post figure {
	text-align: center;
}

.customers-voice_contents .voice-post figure > img {
	width: auto;
	height: 130px;
}

.customers-voice_contents .voice-post .title {
	margin-top: 3px;
	overflow: hidden;
	color: #beaf87;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.customers-voice_contents .voice-post p {
	display: flex;
	align-items: center;
	font-size: 1.4rem;
}

.customers-voice_contents .voice-post .satisfaction {
	margin-top: 7px;
}

.customers-voice_contents .voice-post .satisfaction > span {
	vertical-align: middle;
}

.customers-voice_contents .voice-post .satisfaction > img {
	width: 70%;
	vertical-align: middle;
}

/* 今すぐ見られる物件特集 */
.rightnow-sect_contents {
	position: relative;
	width: 540px;
	height: 345px;
	padding: 32px 40px 0;
	background-color: #e6e7e8;
}

.rightnow-sect_contents::after {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 100%;
	width: 50vw;
	height: 100%;
	background: #fff url(/images/index/rightnow-bg_01.jpg) no-repeat;
}

.rightnow-sect_contents > .title {
	font-size: 2.4rem;
}

.rightnow-sect_contents > .text {
	margin-top: 12px;
	line-height: 1.75;
}

.rightnow-btns {
	display: flex;
	margin-top: 30px;
}

.rightnow-btns > .btn {
	position: relative;
	flex: 0 0 auto;
}

.rightnow-btns > .btn + .btn {
	margin-left: 20px;
}

.rightnow-btns > .btn > a {
	background-color: #fff;
}

.rightnow-baloon {
	position: absolute;
	top: -12px;
	left: 10px;
	width: 110px;
	height: 22px;
	background-color: #beaf87;
	font-size: 1.2rem;
	line-height: 22px;
	text-align: center;
}

.rightnow-baloon::after {
	content: '';
	position: absolute;
	bottom: -12px;
	left: 18px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top-color: #beaf87;
}

.update-info {
	display: flex;
}

.update-info > .title {
	flex: 0 0 auto;
}

.update-info_article {
	position: relative;
	width: 100%;
	padding: 10px 20px;
	background-color: #ded7c3;
}

.update-info_article::after {
	content: '';
	position: absolute;
	top: 0;
	left: 100%;
	width: calc((100vw - 1080px) / 2);
	height: 100%;
	background-color: inherit;
}

.update-info_wrap {
	height: 60px;
	overflow-y: scroll;
}

/* 初めての住まい探しセミナー */
.seminar-sect {
	display: flex;
}

.seminar-sect > figure {
	flex: 0 0 auto;
}

.seminar-sect_contents {
	position: relative;
	padding-top: 32px;
	padding-left: 30px;
	background-color: #414042;
}

.seminar-sect_contents::after {
	content: '';
	position: absolute;
	top: 0;
	left: 100%;
	width: calc((100vw - 1080px) / 2);
	height: 100%;
	background-color: inherit;
}

.seminar-sect_contents > .title {
	color: #beaf87;
	font-size: 2.4rem;
}

.seminar-sect_contents > .text {
	width: 560px;
	margin-top: 12px;
	color: #fff;
	line-height: 1.75;
}

.seminar-sect_contents > .btn {
	display: inline-block;
	height: 58px;
	margin-top: 32px;
}

.seminar-sect_contents > .btn > a {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	padding-right: 50px;
	padding-left: 40px;
	background-color: #beaf87;
	color: #414042;
	font-size: 1.8rem;
	font-weight: bold;
}

.seminar-sect_contents > .btn > a:hover {
	background-color: #fff;
}

.seminar-sect_contents > .btn > a::after {
	content: '\f0da';
	position: absolute;
	right: 14px;
	transition: inherit;
	font-weight: 900;
}

/* フェアバナー */
.campaignbnr {
	margin-top: 20px;
	margin-bottom: -20px;
	text-align: center;
}