@charset "UTF-8";
/* =====
 * PROPERTY DETAIL（物件詳細：mansion／house／land／tenant／rent 共用。種別色は .block[data-category] の --cat）
=================================================================== */
/* ===== ALL ===== */
#Billboard {background-image: url("../img/property/bg_billboard.webp");}

#Main .block-property-detail-01 {padding: 1.6875em 0 4.5625em;background: var(--green-pale);--cat: var(--green);}
#Main .block-property-detail-01[data-category="mansion"] {--cat: #2468a8;}
#Main .block-property-detail-01[data-category="house"] {--cat: #d7a01c;}
#Main .block-property-detail-01[data-category="land"] {--cat: #21a893;}
#Main .block-property-detail-01[data-category="tenant"] {--cat: #765b9a;}
#Main .block-property-detail-01[data-category="rent"] {--cat: #cc5231;}
#Main .block-property-detail-01 article {padding: 2.75em 3.125em 3.625em;border-radius: .5em;background: #fff;}

/* 見出し行：バッジ＋物件名、主要項目 */
#Main .block-property-detail-01 .head h1 {display: flex;align-items: center;gap: .625em;padding-bottom: .9em;border-bottom: 2.5px solid var(--cat);font-size: 143.75%;letter-spacing: .1em;line-height: 1.2;}
#Main .block-property-detail-01 .head h1 .category {display: inline-flex;flex: none;align-items: center;justify-content: center;min-width: 8.4167em;height: 2.2083em;padding: 0 1em;border-radius: 100em;background: var(--cat);color: #fff;font-size: 52.17%;letter-spacing: .1em;line-height: 1;}
#Main .block-property-detail-01 .head h1 .new {display: inline-flex;flex: none;align-items: center;justify-content: center;min-width: 5.8em;height: 2.2083em;padding: 0 1em;border-radius: 100em;background: var(--new);color: #fff;font-family: var(--font-en);font-size: 52.17%;font-weight: 700;letter-spacing: .1em;line-height: 1;}   /* NEWマーク（公開日から30日。種別バッジと同じ形。2026-10-08） */
#Main .block-property-detail-01 .head dl {display: flex;margin: 0;padding: .9375em 0;border-bottom: 1.5px solid rgba(66, 64, 64, .5);}
#Main .block-property-detail-01 .head dl > div {display: flex;flex: 1;align-items: center;justify-content: center;gap: .35em;font-size: 87.5%;letter-spacing: .08em;line-height: 1.4;text-align: center;}
#Main .block-property-detail-01 .head dl > div + div {border-left: 1px solid rgba(66, 64, 64, .7);}
#Main .block-property-detail-01 .head dl dt {font-weight: 700;white-space: nowrap;}
#Main .block-property-detail-01 .head dl dt::after {content: " :";}
#Main .block-property-detail-01 .head dl dd {margin: 0;font-weight: 500;}
#Main .block-property-detail-01 .head dl dd strong {margin-right: .1em;color: var(--cat);font-family: var(--font-en);font-size: 200%;font-weight: 700;letter-spacing: .01em;line-height: 1;}   /* 価格の数字だけ強調（一覧 .price strong と同ルール） */

/* ギャラリー：side＝左に間取り・右にスライダー／stack＝スライダー全幅、下に図面 */
#Main .block-property-detail-01 .gallery {margin-top: 2.375em;}
#Main .block-property-detail-01 .gallery[data-layout="side"] {display: flex;gap: 1.25em;}
#Main .block-property-detail-01 .gallery[data-layout="side"] .plan {flex: none;width: 17.9em;}
#Main .block-property-detail-01 .gallery[data-layout="side"] .slider {flex: 1;}
#Main .block-property-detail-01 .gallery .plan {position: relative;display: flex;align-items: center;justify-content: center;gap: 2em;margin: 0;padding: 1em 1em 3em;border: 1.5px solid #ececec;background: #fff;}
#Main .block-property-detail-01 .gallery[data-layout="side"] .plan {min-height: 32.9em;padding: 1.5em .2em 3em;}
#Main .block-property-detail-01 .gallery[data-layout="stack"] .plan {min-height: 32.9em;margin-top: 2.5625em;}
#Main .block-property-detail-01 .gallery .plan img {width: auto;max-width: 100%;max-height: 25.3em;object-fit: contain;}
#Main .block-property-detail-01 .gallery .plan:has(img + img) img {max-width: calc((100% - 2em) / 2);}   /* 図面2枚（戸建）：高さ上限だけだと2枚の幅の合計が枠を超える（1196px で横はみ出し）ため、幅も gap を引いた半分に制限 */
#Main .block-property-detail-01 .gallery[data-layout="stack"] .plan img {max-height: 26.6em;}
#Main .block-property-detail-01 .gallery .plan button {position: absolute;right: 0;bottom: 0;display: block;width: 2.375em;height: 2.375em;border: 0;background: var(--ink);cursor: pointer;}
#Main .block-property-detail-01 .gallery .plan button::before {content: "";position: absolute;inset: 0;background: url("../img/common/icon_search.svg") no-repeat center / 1.15em auto;filter: var(--filter-white);}
#Main .block-property-detail-01 .gallery .plan button span {position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%);}
#Main .block-property-detail-01 .gallery .slider {min-width: 0;background: var(--ink);}
#Main .block-property-detail-01 .gallery .swiper ul {margin: 0;}
#Main .block-property-detail-01 .gallery .swiper li {margin: 0;}
#Main .block-property-detail-01 .gallery .main {aspect-ratio: 702 / 451.5;}
#Main .block-property-detail-01 .gallery[data-layout="stack"] .main {aspect-ratio: 1008 / 551;}
#Main .block-property-detail-01 .gallery .main .swiper-slide {display: flex;align-items: center;justify-content: center;background: var(--ink);}
#Main .block-property-detail-01 .gallery .main .swiper-slide img {width: 100%;height: 100%;object-fit: cover;}
#Main .block-property-detail-01 .gallery .main .swiper-button-prev,
#Main .block-property-detail-01 .gallery .main .swiper-button-next {top: 50%;width: 2.28125em;height: 2.28125em;margin-top: -1.140625em;border: 1.5px solid var(--green);border-radius: 50%;background: #fff;}
#Main .block-property-detail-01 .gallery .main .swiper-button-prev {left: .625em;}
#Main .block-property-detail-01 .gallery .main .swiper-button-next {right: .625em;}
#Main .block-property-detail-01 .gallery .swiper-button-prev::after,
#Main .block-property-detail-01 .gallery .swiper-button-next::after {content: "";width: .55em;height: .55em;font-size: 100%;border-top: 1.5px solid var(--green);border-right: 1.5px solid var(--green);transform: translateX(-.15em) rotate(45deg);}
#Main .block-property-detail-01 .gallery .swiper-button-prev::after {transform: translateX(.15em) rotate(-135deg);}
#Main .block-property-detail-01 .gallery .thumbs {height: 4.78125em;padding: .3125em 1.25em;}
#Main .block-property-detail-01 .gallery .thumbs .swiper-slide {width: 6.34375em;height: 100%;background: #ececec;cursor: pointer;opacity: .55;}
#Main .block-property-detail-01 .gallery .thumbs .swiper-slide-thumb-active {opacity: 1;}
#Main .block-property-detail-01 .gallery .thumbs .swiper-slide img {height: 100%;object-fit: cover;}
#Main .block-property-detail-01 .gallery .thumbs .swiper-button-prev,
#Main .block-property-detail-01 .gallery .thumbs .swiper-button-next {top: 0;width: 1.25em;height: 100%;margin: 0;}
#Main .block-property-detail-01 .gallery .thumbs .swiper-button-prev {left: 0;}
#Main .block-property-detail-01 .gallery .thumbs .swiper-button-next {right: 0;}
#Main .block-property-detail-01 .gallery .thumbs .swiper-button-prev::after,
#Main .block-property-detail-01 .gallery .thumbs .swiper-button-next::after {border-color: #fff;}
#Main .block-property-detail-01 .gallery .swiper-button-disabled {opacity: .35;}
#Main .block-property-detail-01 .vr {margin-top: 1.25em;}
#Main .block-property-detail-01 .vr iframe {display: block;width: 100%;aspect-ratio: 16 / 9;border: 0;}

/* おすすめコメント */
#Main .block-property-detail-01 .comment {margin-top: 2.6875em;padding-bottom: 1.625em;border-bottom: 1.5px solid rgba(66, 64, 64, .5);}
#Main .block-property-detail-01 .comment h2 {margin-bottom: 1.1em;color: var(--green);font-size: 118.75%;letter-spacing: .08em;line-height: 1;}
#Main .block-property-detail-01 .comment p {margin: 0;font-weight: 500;letter-spacing: .05em;line-height: 1.5;}
#Main .block-property-detail-01 .gallery + .comment {margin-top: 2.6875em;}
#Main .block-property-detail-01 .head + .comment {margin-top: .75em;padding-bottom: 0;border-bottom: 0;}
#Main .block-property-detail-01 .head + .comment + .gallery {margin-top: 1.5em;}

/* お問い合わせ／一覧へ戻る */
#Main .block-property-detail-01 .btn-area {margin: 1.125em 0 0;}
#Main .block-property-detail-01 .btn-area .btn {gap: .75em;height: 3.65625em;padding: 0 1.8125em 0 1.8125em;border-radius: .375em;font-weight: 700;letter-spacing: .01em;}
#Main .block-property-detail-01 .btn-area .btn::after {content: "";width: .5em;height: .5em;margin: 0;border-top: 1.5px solid #fff;border-right: 1.5px solid #fff;background: none;filter: none;transform: rotate(45deg);}
#Main .block-property-detail-01 .outline + .btn-area {margin-top: 1.875em;}
#Main .block-property-detail-01 .btn-area.back {margin-top: 2.1875em;}
#Main .block-property-detail-01 .btn-area.back a[data-icon="more"] {width: 14.875em;height: 2.875em;padding: 0 2em 0 3em;font-family: var(--font-jp);font-size: 100%;font-weight: 700;letter-spacing: .01em;}

/* 物件概要テーブル */
#Main .block-property-detail-01 .outline {margin-top: 3.25em;}
#Main .block-property-detail-01 .outline dl {margin: 0;border: 1.5px solid #ddd;}
#Main .block-property-detail-01 .outline .row {display: flex;min-height: 3.5625em;}   /* dt 固定幅＋dd 残り幅。dt dd dt dd の2列行は dd 同士が flex: 1 で等分 */
#Main .block-property-detail-01 .outline .row + .row {border-top: 1.5px solid rgba(66, 64, 64, .5);}
#Main .block-property-detail-01 .outline .row dt {display: flex;flex: none;align-items: center;justify-content: center;width: 11.96875em;padding: .5em;background: #f5f8f5;font-size: 87.5%;font-weight: 700;letter-spacing: .08em;line-height: 1.4;text-align: center;}
#Main .block-property-detail-01 .outline .row dd {display: flex;flex: 1;align-items: center;min-width: 0;margin: 0;padding: .75em 1.9375em;font-size: 87.5%;font-weight: 500;letter-spacing: .08em;line-height: 1.5;}
#Main .block-property-detail-01 .outline .row dd strong {color: var(--cat);font-weight: 700;}
#Main .block-property-detail-01 .outline .row dd .map {display: inline-flex;align-items: center;justify-content: center;min-width: 7.9643em;height: 2.3929em;padding: 0 1em;border-radius: .25em;background: var(--ink);color: #fff;font-weight: 700;letter-spacing: .08em;line-height: 1;}
#Main .block-property-detail-01 .outline .row.points dd {display: block;padding: 1.5em 1.9375em;}
#Main .block-property-detail-01 .outline .row.points ul {display: flex;flex-wrap: wrap;gap: .75em;margin: 0;}   /* C-12：flex＋gap。6列等分は幅から算出（固定幅 6 列の grid は dd 幅より広くなり横はみ出ししていた） */
#Main .block-property-detail-01 .outline .row.points li {display: flex;flex-direction: column;align-items: center;justify-content: flex-end;width: calc((100% - .75em * 5) / 6);aspect-ratio: 1;margin: 0;padding: 1.5em .25em .9em;border: 1.5px solid var(--ink);border-radius: .25em;background: #f7f7f7;text-align: center;}
#Main .block-property-detail-01 .outline .row.points li img {width: auto;height: 3.857em;margin-bottom: auto;}
#Main .block-property-detail-01 .outline .row.points li span {display: block;width: 100%;margin-top: .5em;font-size: 85.71%;font-weight: 700;letter-spacing: .02em;line-height: 1.25;overflow-wrap: anywhere;}
#Main .block-property-detail-01 .outline .row.points li[data-state="off"] {opacity: .3;}
#Main .block-property-detail-01 .outline .row.other dd {padding: 1.5em 1.9375em;}
#Main .block-property-detail-01 .notfound {text-align: center;}
#Main .block-property-detail-01 .notfound h1 {font-size: 143.75%;letter-spacing: .1em;}
#Main .block-property-detail-01 .notfound p {margin-top: 1.5em;}

/* 拡大表示（間取り図など） */
#Zoom {max-width: min(90vw, 75em);max-height: 90vh;padding: 3em 1em 1em;border: 0;border-radius: .5em;background: #fff;}
#Zoom::backdrop {background: rgba(0, 0, 0, .6);}
#Zoom img {width: auto;max-width: 100%;max-height: calc(90vh - 5em);margin: 0 auto;object-fit: contain;}
#Zoom button {position: absolute;top: .75em;right: .75em;padding: .375em 1em;border: 1px solid var(--green);border-radius: 100em;background: #fff;color: var(--green);font-size: 75%;font-weight: 700;letter-spacing: .1em;cursor: pointer;}

@media (769px <= width <= 1380px) {
  #Main .block-property-detail-01 .head dl > div {flex-direction: column;}
  #Main .block-property-detail-01 .head dl dt::after {content: "";}
  #Main .block-property-detail-01 .outline .row.points li {width: calc((100% - .75em * 3) / 4);aspect-ratio: auto;}
}

/* ===== SP ===== */
@media (width < 769px) {
  #Main .block-property-detail-01 {padding: 1em 0 3em;}
  #Main .block-property-detail-01 article {padding: 1.5em 1em 2em;}
  #Main .block-property-detail-01 .head h1 {flex-wrap: wrap;font-size: 135%;word-break: normal;overflow-wrap: anywhere;}   /* 物件名は長い一続きの語のため auto-phrase では折り返せず横はみ出しする → 文字単位で折り返す */
  #Main .block-property-detail-01 .head dl {flex-wrap: wrap;gap: .5em 0;}
  #Main .block-property-detail-01 .head dl dd {font-weight: 600;}
  #Main .block-property-detail-01 .head dl > div {flex: none;justify-content: flex-start;width: 100%;text-align: left;}
  #Main .block-property-detail-01 .head dl > div + div {border-left: 0;}
  #Main .block-property-detail-01 .head dl > div:nth-child(even) {padding-left: 0;border-left: 0;}
  #Main .block-property-detail-01 .gallery {margin-top: 1.25em;}
  #Main .block-property-detail-01 .gallery[data-layout="side"] {display: flex;flex-direction: column;}
  #Main .block-property-detail-01 .gallery[data-layout="side"] .plan,
  #Main .block-property-detail-01 .gallery[data-layout="stack"] .plan {flex-wrap: wrap;min-height: 0;margin-top: 1em;padding: 1em 1em 3em;}
  #Main .block-property-detail-01 .gallery[data-layout="side"] .plan {order: 2;width: auto;}
  #Main .block-property-detail-01 .gallery .plan img,
  #Main .block-property-detail-01 .gallery .plan:has(img + img) img {max-width: 100%;max-height: 22em;}   /* SP は2枚を縦積み */
  #Main .block-property-detail-01 .gallery .main,
  #Main .block-property-detail-01 .gallery[data-layout="stack"] .main {aspect-ratio: 4 / 3;}
  #Main .block-property-detail-01 .gallery .thumbs {height: 3.75em;padding: .25em 1em;}
  #Main .block-property-detail-01 .gallery .thumbs .swiper-slide {width: 4.75em;}
  #Main .block-property-detail-01 .comment {margin-top: 1.5em;padding-bottom: 1.25em;}
  #Main .block-property-detail-01 .comment p {font-size: 100%;}
  #Main .block-property-detail-01 .btn-area .btn {width: 100%;justify-content: center;height: 3.5em;font-size: 100%;}
  #Main .block-property-detail-01 .btn-area.back {margin-top: 1.25em;}
  #Main .block-property-detail-01 .outline {margin-top: 2em;}
  #Main .block-property-detail-01 .outline .row {flex-direction: column;min-height: 0;}
  #Main .block-property-detail-01 .outline .row dt {justify-content: flex-start;width: auto;padding: .5em .875em;text-align: left;}
  #Main .block-property-detail-01 .outline .row dd {padding: .75em .875em;}
  #Main .block-property-detail-01 .outline .row dd + dt {border-top: 1px solid rgba(66, 64, 64, .3);}
  #Main .block-property-detail-01 .outline .row.points dd,
  #Main .block-property-detail-01 .outline .row.other dd {padding: 1em .875em;}
  #Main .block-property-detail-01 .outline .row.points ul {gap: .5em;}
  #Main .block-property-detail-01 .outline .row.points li {width: calc((100% - .5em * 2) / 3);}
  #Main .block-property-detail-01 .outline .row.points li img {height: 3em;}
  #Main .block-property-detail-01 .outline .row.points li span {font-size: 78.57%;}
}