@charset "UTF-8";
/* =====
 * PROPERTY（物件一覧）
=================================================================== */
/* ===== ALL ===== */
#Billboard {background-image: url("../img/property/bg_billboard.webp");}

/* block-property-01：SEARCH（検索条件＋検索結果バー）
 * 2026-09-25 改修：見出し header を削除。form.search は初期状態で h3 のバーだけ表示し、h3 > button でアコーディオン展開（#SearchBody）。
 * 閉：緑のバー（白文字・オレンジの虫眼鏡・＋）／開：白パネル（墨文字・緑の虫眼鏡・−）。パネルの余白は開閉で変えず色だけ切り替える（開閉時にレイアウトが跳ねないように）
 * form.search が #Result（検索・並び替え・ページ送り後の着地先。条件付きで直接来たときも property.js がここへスクロール） */
#Main .block-property-01 {padding: 3.0625em 0 0;background: var(--green-pale);}
#Main .block-property-01 form.search {border: 1.5px solid var(--green);border-radius: .875em;background: #fff;overflow: hidden;scroll-margin-top: 3.0625em;}   /* scroll-margin は #GlobalHeader（fixed, top: 3.0625em）の上端と揃える */
#Main .block-property-01 form.search h3 {margin: 0;}
#Main .block-property-01 form.search h3 button {display: flex;align-items: center;gap: 1.25em;width: 100%;height: 5.0625em;padding: 0 2.25em 0 3.1875em;border: 0;background: var(--green);color: #fff;text-align: left;cursor: pointer;transition: background-color .35s ease, color .35s ease;}
#Main .block-property-01 form.search h3 button::before {content: "";flex: none;width: 2.0625em;height: 2.0625em;background: var(--orange);-webkit-mask: url("../img/common/icon_search.svg") center / contain no-repeat;mask: url("../img/common/icon_search.svg") center / contain no-repeat;transition: background-color .35s ease;}
#Main .block-property-01 form.search h3 button span {font-size: 143.75%;letter-spacing: .1em;line-height: 1;}
#Main .block-property-01 form.search h3 button::after {content: "+";margin-left: auto;font-size: 212.5%;font-weight: 400;line-height: 1;}
#Main .block-property-01 form.search.is-open h3 button,
html:not(.js) #Main .block-property-01 form.search h3 button {background: #fff;color: var(--ink);}
#Main .block-property-01 form.search.is-open h3 button::before,
html:not(.js) #Main .block-property-01 form.search h3 button::before {background: var(--green);}
#Main .block-property-01 form.search.is-open h3 button::after {content: "−";color: var(--green);}
html:not(.js) #Main .block-property-01 form.search h3 button::after {content: none;}
/* 開閉する中身。閉じている間は visibility で Tab 移動の対象からも外す */
#Main .block-property-01 form.search #SearchBody {height: 0;overflow: hidden;visibility: hidden;transition: height .35s ease, visibility 0s linear .35s;}
#Main .block-property-01 form.search.is-open #SearchBody {visibility: visible;transition: height .35s ease, visibility 0s;}
html:not(.js) #Main .block-property-01 form.search #SearchBody {height: auto;visibility: visible;}
#Main .block-property-01 form.search #SearchBody .inner {padding: .5em 3.125em 2em 3.1875em;}   /* 上の .5em は種別タイルの hover（float）が切れないための逃げ */
#Main .block-property-01 form.search legend {position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%);}
#Main .block-property-01 form.search input[type="checkbox"] {position: absolute;inset: 0;width: 100%;height: 100%;margin: 0;opacity: 0;cursor: pointer;}
#Main .block-property-01 form.search label:has(:focus-visible) {outline: 2px solid var(--orange);outline-offset: 2px;}
/* 物件種別タイル（トップの SEARCH と同型） */
#Main .block-property-01 form.search .types {display: flex;gap: 2.0625em;margin-bottom: 1.5em;}
#Main .block-property-01 form.search .types label {position: relative;display: flex;flex-direction: column;align-items: center;width: calc((100% - 2.0625em * 3) / 4);height: 11em;padding-top: 1.625em;border: 1.5px solid var(--ink);border-radius: .375em;background: #fff;color: var(--green);cursor: pointer;}
#Main .block-property-01 form.search .types label img {width: auto;height: 4.625em;}
#Main .block-property-01 form.search .types label span {margin-top: 1.0625em;font-size: 131.25%;font-weight: 700;letter-spacing: .1em;line-height: 1;}
#Main .block-property-01 form.search .types label:has(:checked) {border-color: var(--green);background: var(--green);color: #fff;}
#Main .block-property-01 form.search .types label:has(:checked) img {filter: var(--filter-white);}
/* エリアで絞り込む：枠の中に「見出し＋那覇市＋那覇市以外」を1行で並べる */
#Main .block-property-01 form.search .area {display: flex;align-items: center;gap: 2em;padding: .75em 1.25em .75em 1.75em;border: 1.5px solid var(--green);border-radius: .375em;}
#Main .block-property-01 form.search .area p {display: flex;align-items: center;gap: .8125em;margin: 0 auto 0 0;}
#Main .block-property-01 form.search .area p img {width: 1.09375em;}
#Main .block-property-01 form.search .area p span {font-size: 117.1875%;font-weight: 700;letter-spacing: .1em;line-height: 1;}
#Main .block-property-01 form.search .area label {position: relative;display: flex;flex: none;align-items: center;justify-content: space-between;width: 15em;height: 4.125em;padding: 0 1.5em 0 1.75em;border: 1.5px solid var(--green);border-radius: .375em;background: #fff;cursor: pointer;}
#Main .block-property-01 form.search .area label span {font-size: 118.75%;font-weight: 700;letter-spacing: .1em;line-height: 1;}
#Main .block-property-01 form.search .area label::after {content: "";flex: none;width: 1.375em;height: 1.375em;border: 1.5px solid var(--ink);border-radius: .125em;background: #fff no-repeat center / 70%;}
#Main .block-property-01 form.search .area label:has(:checked) {border-color: var(--green);background: var(--green);color: #fff;}
#Main .block-property-01 form.search .area label:has(:checked)::after {border-color: #fff;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23386046' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E");}
#Main .block-property-01 form.search .btn-area {margin: 1.5em 0 0;}
.js #Main .block-property-01 form.search .btn-area {display: none;}   /* JS 有効時は条件変更で自動送信するためボタン不要（PSD どおり非表示） */
/* 検索結果バー */
#Main .block-property-01 .result {display: flex;align-items: center;justify-content: space-between;gap: 1em;height: 5.0625em;margin-top: 1.25em;padding: 0 3.125em 0 3.25em;border: 1.5px solid var(--green);border-radius: .5em;background: #fff;}
#Main .block-property-01 .result > p {display: flex;align-items: baseline;margin: 0;font-size: 118.75%;font-weight: 700;letter-spacing: .05em;line-height: 1;}
#Main .block-property-01 .result > p strong {margin: 0 .15em 0 .5em;color: var(--orange);font-family: var(--font-en);font-size: 178.95%;font-weight: 700;letter-spacing: .05em;}
#Main .block-property-01 .result form {display: flex;align-items: center;gap: .6875em;}
#Main .block-property-01 .result form label {font-size: 87.5%;font-weight: 500;letter-spacing: .1em;line-height: 1;}
#Main .block-property-01 .result form select {width: 10.25em;height: 2.2143em;padding: 0 .9em;border: 0;border-radius: 0;background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right .8em center / .6em auto;color: #fff;font-family: inherit;font-size: 87.5%;font-weight: 500;letter-spacing: .1em;appearance: none;cursor: pointer;}
#Main .block-property-01 .result form button {padding: .4em .8em;border: 1.5px solid var(--ink);border-radius: .25em;background: #fff;font-size: 75%;font-weight: 500;letter-spacing: .1em;cursor: pointer;}
.js #Main .block-property-01 .result form button {display: none;}

/* block-property-02：物件カード一覧＋ページ送り */
#Main .block-property-02 {padding: 1.25em 0 5em;background: var(--green-pale);}
#Main .block-property-02 .container > ul {display: flex;flex-direction: column;gap: 2.1875em;margin: 0;}
#Main .block-property-02 .container > ul > li {margin: 0;--cat: var(--green);}
#Main .block-property-02 .container > ul > li[data-category="mansion"] {--cat: #2468a8;}
#Main .block-property-02 .container > ul > li[data-category="house"] {--cat: #d7a01c;}
#Main .block-property-02 .container > ul > li[data-category="land"] {--cat: #21a893;}
#Main .block-property-02 .container > ul > li[data-category="tenant"] {--cat: #765b9a;}
#Main .block-property-02 .container > ul > li[data-category="rent"] {--cat: #cc5231;}
#Main .block-property-02 article {position: relative;display: flex;min-height: 22.9em;border: 1.5px solid var(--ink);border-radius: .5em;background: #fff;box-shadow: 0 .25em .75em rgba(0, 0, 0, .06);overflow: hidden;}
#Main .block-property-02 article figure {position: relative;flex: none;width: 50%;margin: 0;background: #7986a1;overflow: hidden;}
#Main .block-property-02 article figure a img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;transition: transform ease 450ms;}
#Main .block-property-02 article figure a:hover img {transform: scale(1.05) rotate(-0.1deg);}
#Main .block-property-02 article > div {flex: 1;min-width: 0;padding: 1.9375em 3.0625em 3.75em 1.875em;}
#Main .block-property-02 article .category {margin: 0;line-height: 1;}
#Main .block-property-02 article .category span.new {min-width: 6em;margin-right: .9em;background: var(--new);font-family: var(--font-en);}   /* NEWマーク（公開日から30日。2026-10-08） */
#Main .block-property-02 article .category span {display: inline-flex;align-items: center;justify-content: center;min-width: 10.125em;height: 2.25em;padding: 0 1em;border-radius: 100em;background: var(--cat);color: #fff;font-size: 75%;font-weight: 700;letter-spacing: .1em;}
#Main .block-property-02 article h2 {margin: .95em 0 0;padding-bottom: .7em;border-bottom: 1px solid rgba(66, 64, 64, .5);font-size: 118.75%;letter-spacing: .08em;line-height: 1.3;}
#Main .block-property-02 article .price {display: flex;align-items: baseline;gap: .125em;margin: 0;padding: 1.4em 0 1.1em;border-bottom: 1px solid rgba(66, 64, 64, .5);font-size: 87.5%;font-weight: 700;letter-spacing: .08em;line-height: 1;}
#Main .block-property-02 article .price strong {color: var(--cat);font-family: var(--font-en);font-size: 200%;font-weight: 700;letter-spacing: .01em;}
#Main .block-property-02 article .address {margin: 0;padding: 1.1em 0 1em;border-bottom: 1px solid rgba(66, 64, 64, .5);font-size: 87.5%;font-weight: 500;letter-spacing: .08em;line-height: 1.8;}
#Main .block-property-02 article .spec {display: flex;flex-wrap: wrap;margin: 1.3em 0 0;font-size: 81.25%;font-weight: 500;letter-spacing: .05em;line-height: 1.5;}
#Main .block-property-02 article .spec li {margin: 0;}
#Main .block-property-02 article .spec li + li::before {content: "｜";margin: 0 .35em;opacity: .6;}
#Main .block-property-02 article .btn-area {position: absolute;right: 0;bottom: 0;left: 50%;display: flex;margin: 0;}
#Main .block-property-02 article .btn-area a {display: flex;flex: 1;align-items: center;justify-content: center;height: 2.875em;font-size: 87.5%;font-weight: 500;letter-spacing: .2em;line-height: 1;}
#Main .block-property-02 article .btn-area a[data-icon="contact"] {background: var(--green);color: #fff;}
#Main .block-property-02 article .btn-area a[data-icon="detail"] {background: #ececec;color: var(--ink);}
#Main .block-property-02 .pagination {margin-top: 3em;}
#Main .block-property-02 .pagination ul {display: flex;align-items: center;justify-content: center;gap: .5em;margin: 0;}
#Main .block-property-02 .pagination ul li {margin: 0;}
#Main .block-property-02 .pagination ul li a,
#Main .block-property-02 .pagination ul li > span,
#Main .block-property-02 .pagination ul li em {display: inline-flex;align-items: center;justify-content: center;width: 2.25em;height: 2.25em;border: 1.5px solid var(--green);border-radius: 50%;background: #fff;color: var(--green);font-family: var(--font-en);font-size: 100%;font-style: normal;font-weight: 500;line-height: 1;}   /* 2026-09-24 ひと回り大きく（21px→36px） */
#Main .block-property-02 .pagination ul li em {background: var(--green);color: #fff;}
#Main .block-property-02 .pagination ul li > span[aria-disabled] {opacity: .4;}
#Main .block-property-02 .pagination ul li [data-icon] {margin: 0 .75em;border: 0;background: none;}   /* 矢印は円形の枠なし（クライアント指示） */
#Main .block-property-02 .pagination ul li [data-icon] span {position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%);}
#Main .block-property-02 .pagination ul li [data-icon]::before {content: "";width: .75em;height: .75em;border-top: 1.5px solid var(--green);border-right: 1.5px solid var(--green);transform: translateX(-.15em) rotate(45deg);}
#Main .block-property-02 .pagination ul li [data-icon="prev"]::before {transform: translateX(.15em) rotate(-135deg);}
#Main .block-property-02 .empty {padding: 3em 0;font-weight: 500;letter-spacing: .08em;text-align: center;}
#Main .block-property-02 .empty a {color: var(--green);text-decoration: underline;}   /* 新着0件時の一覧へのリンク（2026-10-08） */

/* ===== SP ===== */
@media (width < 769px) {
  #Main .block-property-01 {padding-top: 1.5em;}
  #Main .block-property-01 form.search {scroll-margin-top: 1em;}   /* SP はサイドバーが固定でないので余白だけ */
  #Main .block-property-01 form.search h3 button {gap: .75em;height: 3.5em;padding: 0 1em 0 1.25em;}
  #Main .block-property-01 form.search h3 button::before {width: 1.5em;height: 1.5em;}
  #Main .block-property-01 form.search h3 button span {font-size: 112.5%;}
  #Main .block-property-01 form.search h3 button::after {font-size: 175%;}
  #Main .block-property-01 form.search #SearchBody .inner {padding: .5em 1.25em 1.25em;}
  #Main .block-property-01 form.search .types {flex-wrap: wrap;gap: .857em 1.14em;margin-bottom: 1em;}
  #Main .block-property-01 form.search .types label {width: calc((100% - 1.14em) / 2);height: 6.43em;padding-top: .857em;}   /* トップの種別タイルと同寸 */
  #Main .block-property-01 form.search .types label img {height: 2.57em;}
  #Main .block-property-01 form.search .types label span {margin-top: .71em;font-size: 100%;}
  #Main .block-property-01 form.search .area {flex-wrap: wrap;gap: .75em;padding: 1em;}   /* SP：見出しを1段目、チェック2つを2段目に並べる */
  #Main .block-property-01 form.search .area p {width: 100%;margin: 0;}
  #Main .block-property-01 form.search .area p span {font-size: 100%;}
  #Main .block-property-01 form.search .area label {width: calc((100% - .75em) / 2);height: 3.5em;padding: 0 .875em 0 1em;}
  #Main .block-property-01 form.search .area label span {font-size: 100%;}
  #Main .block-property-01 .result {flex-wrap: wrap;height: auto;padding: 1em 1.25em;}
  #Main .block-property-01 .result > p {font-size: 106.25%;}
  #Main .block-property-01 .result form {width: 100%;}
  #Main .block-property-01 .result form select {flex: 1;}
  #Main .block-property-02 {padding: 2em 0 3em;}
  #Main .block-property-02 .container > ul {gap: 1.25em;}
  #Main .block-property-02 article {display: block;min-height: 0;}
  #Main .block-property-02 article figure {width: 100%;aspect-ratio: 553 / 364;}
  #Main .block-property-02 article > div {padding: 1.43em 1.43em 1.43em;}
  #Main .block-property-02 article .btn-area {position: static;}
  #Main .block-property-02 article .btn-area a {height: 3.5em;}
  #Main .block-property-02 .pagination {margin-top: 2em;}
  #Main .block-property-02 .pagination ul li a,
  #Main .block-property-02 .pagination ul li > span,
  #Main .block-property-02 .pagination ul li em {width: 2.5em;height: 2.5em;font-size: 100%;}
}