@charset "UTF-8"; /* CSS Document */ /* 基本-モバイルファースト ======================================================================================================== */ #search { border-top: solid 1px #ddd; } #search section { padding: 5vw 0; border-bottom: solid 1px #ddd; } #search section h3 { font-size: 5vw; font-weight: bold; margin-bottom: 5vw; } #search section .btn { padding: 0 5vw; display: flex; flex-wrap: wrap; justify-content: space-between; } #search section .btn li { width: calc(50% - 5px); margin-bottom: 10px; } #search section .btn li:last-child { margin-bottom: 10px; } #search #type_search .btn li.type_house { width: 100%; } #search section .btn li a { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f3f3f3; text-decoration: none; text-align: center; padding: 20px; box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.2); position: relative; } #search section .btn li a::before { content: ""; display: block; background-color: #b3203a; width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); -webkit-transform: translateY(-50%); margin: auto 0; } #search section .btn li a::after { content: ""; display: block; width: 5px; height: 5px; border-top: solid 2px #fff; border-right: solid 2px #fff; position: absolute; top: 50%; right: 18px; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-50%) rotate(45deg); margin: auto 0; } #search section .btn li .icon img { height: 30px; margin-bottom: 5px; } #search section .btn li h4 { font-weight: bold; height: auto; } #search section .btn li.type_house { display: grid; grid-template-columns: 1fr 1fr; } #search section .btn li.type_house a.allhouse { grid-area: 1 / 1 / 3 / 2; } #search section .btn li.type_house a.newhouse { grid-area: 1 / 2 / 2 / 3; } #search section .btn li.type_house a.usehouse { grid-area: 2 / 2 / 3 / 3; } #search section .btn li.type_house a.small { border-left: solid 1px #fff; border-bottom: solid 1px #fff; padding-right: 40px; } #search section .btn li.type_house a.small:last-child { border-bottom: none; } #search section .btn li a.small { flex-direction: row; } #search section .btn li a.small h4 { font-size: 12px; } #search section .btn li a.small .icon img { height: 20px; margin-bottom: 0px; margin-right: 5px; } #search section .btn li.small h4 { font-size: 12px; } #map_search { padding-bottom: 0 !important ; } #map_search .text { background-color: #b3203a; color: #fff; padding: 5vw; text-align: left; } #map_search .text dt { font-size: 18px; line-height: 1; margin-bottom: 20px; } #map_search .text dt span { font-size: 30px; font-weight: bold; margin-right: 0.5em; } #map_search .text dd { padding-bottom: 20px; margin-bottom: 20px; border-bottom: solid 1px #fff; } #map_search .text dd ul { display: flex; justify-content: space-between; } #map_search .text dd li { width: 33%; margin-bottom: 10px; } #map_search .text dd li:last-child { margin-bottom: 0px; } #map_search .text dd li label { display: block; font-size: 12px; padding: 10px 0px 10px 10px; } #map_search .text dd li.tochi label { background-color: #696b29; } #map_search .text dd li.kodate label { background-color: #d95d6a; } #map_search .text dd li.mansion label { background-color: #d95e1d; } #map_search .text dd li label:hover { cursor: pointer; } #map_search .text dd li input[type="checkbox"] { -webkit-appearance: none; background-color: #fff; background-image: url(../images/checkbox_bg_off.svg); background-repeat: no-repeat; background-position: center center; width: 20px; height: 20px; margin: 0 5px 0 0; padding: 0; display: inline-block; vertical-align: middle; box-sizing: border-box; } #map_search .text dd li input[type="checkbox"]:checked { background-image: url(../images/checkbox_bg_on.svg); border: none; } #map_search .canvas { height: 300px; background-color: #eee; } #shop_search { padding-bottom: 0 !important ; } #shop_search .pin { text-align: left; } #shop_search .pin li a { display: block; } #shop_search .pin li a::before { content: ""; display: inline-block; vertical-align: middle; background-image: url(../shop/images/map_pin.svg); background-repeat: no-repeat; background-position: left top; background-size: 100%; color: #fff; font-size: 10px; line-height: 18px; font-weight: bold; text-align: center; width: 14px; height: 20px; box-sizing: border-box; } #shop_search .pin li:nth-child(1) a::before { content: "1"; } #shop_search .pin li:nth-child(2) a::before { content: "2"; } #shop_search .pin li:nth-child(3) a::before { content: "3"; } #shop_search .pin li:nth-child(4) a::before { content: "4"; } #shop_search .pin li:nth-child(5) a::before { content: "5"; } #shop_search .pin li:nth-child(6) a::before { content: "6"; } #shop_search .pin li:nth-child(7) a::before { content: "7"; } #shop_search .pin li:nth-child(8) a::before { content: "8"; } #shop_search .pin li a p { display: inline-block; vertical-align: middle; font-weight: bold; } #shop_search .map { position: relative; } #shop_search .map .pin li { position: absolute; z-index: 100; } #shop_search .map .pin li:nth-child(1) { bottom: 6%; left: 72.8%; } #shop_search .map .pin li:nth-child(2) { bottom: 19%; left: 53.8%; } #shop_search .map .pin li:nth-child(3) { bottom: 47%; left: 74.3%; } #shop_search .map .pin li:nth-child(4) { bottom: 54%; left: 74.3%; } #shop_search .map .pin li:nth-child(5) { bottom: 82%; left: 49.5%; } #shop_search .map .pin li:nth-child(6) { bottom: 59.5%; left: 46.5%; } #shop_search .map .pin li:nth-child(7) { bottom: 89.5%; left: 24.5%; } /* #shop_search .map .pin li:nth-child(8){ bottom: 89.5%; left: 24.5%; } */ #shop_search .map .pin li a p { display: none; } #shop_search .text { padding: 5vw; } #shop_search .text .pin { display: flex; flex-wrap: wrap; } #shop_search .text .pin li { width: 50%; margin-top: 1em; } #shop_search .text .pin li:nth-child(-n + 2) { margin-top: 0; } #shop_search .text .pin li a p { margin-left: 5px; } #shop_search .text .pin li a p span { display: none; } #voice { background-color: #eff7fa; padding-top: 5vw; padding-bottom: 5vw; position: relative; } #voice .sub_title::after { background-color: #5eaccd; } #voice .sub_title + p { text-align: center; } /* PCのみ======================================================================================================== */ @media print and (min-width: 751px), screen and (min-width: 751px) { #search { display: flex; flex-wrap: wrap; } #search section { width: 100%; padding: 2vw 0; } #search section#type_search, #search section#kodawari_search { width: 50%; } #search section#type_search { border-right: solid 1px #ddd; } #search section h3 { font-size: 30px; margin-bottom: 2vw; } #search section .btn li a:hover { background-color: #f0d2d8; } #search section#type_search .btn li a { height: 160px; } #search section#type_search .btn li a.newhouse, #search section#type_search .btn li a.usehouse { height: 80px; } #search section#kodawari_search .btn li a { height: 120px; } #search section#kodawari_search .btn li.small a { height: 60px; } #search section .btn li .icon img { height: 50px; margin-bottom: 10px; } #search section#kodawari_search .btn li .icon img { height: 40px; } #search section .btn li h4 { font-size: 20px; font-size: min(2vw, 20px); } #search section .btn li a.small h4 { font-size: min(1.4vw, 16px); } #search section .btn li a.small .icon img { height: 25px; } #search section .btn li.small h4 { font-size: 16px; font-size: min(1.4vw, 16px); } #map_search_inner { display: flex; } #map_search .text { width: 30%; padding: 0 5vw; display: grid; place-items: center; } #map_search .text dt { font-size: 18px; line-height: 1; margin-bottom: 20px; } #map_search .text dd ul { display: block; } #map_search .text dd li { width: 100%; } #map_search .text dd li label { font-size: 16px; padding: 20px; } #map_search .canvas { width: 70%; height: 500px; } #shop_search .inner { display: flex; } #shop_search .pin li a::before { font-size: 20px; line-height: 30px; width: 28px; height: 40px; } #shop_search .map { width: 800px; } #shop_search .map .pin li a::before { transition: all 0.2s ease; } #shop_search .map .pin li a:hover::before, #shop_search .map .pin li.hover a::before { transform: scale(1.3); transform-origin: bottom; } #shop_search .text { padding: 3vw; } #shop_search .text .pin { display: block; } #shop_search .text .pin li { width: 100%; font-size: 24px; margin-top: 1em; } #shop_search .text .pin li:nth-child(2) { margin-top: 1em; } #shop_search .text .pin li a { } #shop_search .text .pin li a:hover, #shop_search .text .pin li.hover a { transform: scale(1.1); color: #b3203a; } #shop_search .text .pin li a p { margin-left: 10px; } #shop_search .text .pin li a p span { display: inline; } #voice_list li { width: 23%; margin-left: 2.6% !important; } #voice_list li:nth-child(4n-3) { margin-left: 0 !important; } } /* 2026/04/02 追記*/ /* 全体 */ #kodawari_search .btn li { position: relative; } /* 既存の赤丸矢印はそのまま使う */ #search section .btn li a { position: relative; } /* 新着物件・値下げ物件のh4に上余白を追加 */ #kodawari_search .btn li:nth-child(3) h4, #kodawari_search .btn li:nth-child(4) h4 { position: relative; padding-top: 15px; } /* 共通バッジ */ #kodawari_search .btn li:nth-child(3) h4::before, #kodawari_search .btn li:nth-child(4) h4::before { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 74px; height: 21px; padding: 0 12px; border-radius: 9999px; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; box-sizing: border-box; } /* 新着物件 */ #kodawari_search .btn li:nth-child(3) h4::before { content: "NEW"; background: #e53935; } /* 値下げ物件 */ #kodawari_search .btn li:nth-child(4) h4::before { content: "値下げ"; background: #e53935; } @media print and (min-width: 751px), screen and (min-width: 751px) { #kodawari_search .btn li:nth-child(3) h4, #kodawari_search .btn li:nth-child(4) h4 { padding-top: 28px; } /* 共通バッジ */ #kodawari_search .btn li:nth-child(3) h4::before, #kodawari_search .btn li:nth-child(4) h4::before { top: 6px; } }