/* Owner Property タブUI（owner-property_tabs_mock.html 由来・自動変換）。全ルール #hrp スコープ。 */ /* 不足変数の保険（owner-immersive.css がグローバル定義するが念のため）＋ 予約バー full-bleed 用に .main padding を追従 */ #hrp{--hri-gold:#b89455;--hri-gold-soft:#d8c39a;--hri-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;--mpad:32px;--mpadb:28px} @media(max-width:880px){#hrp{--mpad:20px;--mpadb:20px}} @media(max-width:720px){#hrp{--mpad:16px;--mpadb:16px}} #hrp .serif{font-family:var(--hri-serif);font-weight:400} #hrp .phero{position:relative;margin-top:16px;background:#0d0f14;aspect-ratio:16/7;overflow:hidden;cursor:pointer} #hrp .phero .ph{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .4s} #hrp .phero .ph.on{opacity:1} #hrp .phero-count{position:absolute;right:14px;bottom:12px;z-index:3;background:rgba(0,0,0,.55);color:#fff;font-size:16px;padding:4px 10px;font-variant-numeric:tabular-nums;letter-spacing:.04em} #hrp .phero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border:none;background:rgba(0,0,0,.38);color:#fff;font-size:24px;display:grid;place-items:center} #hrp .phero-arrow.prev{left:12px} #hrp .phero-arrow.next{right:12px} #hrp .phero-dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:6px} #hrp .phero-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)} #hrp .phero-dots i.on{background:var(--hri-gold);width:20px;border-radius:4px} #hrp .phero-zoom{position:absolute;top:12px;right:14px;z-index:3;background:rgba(0,0,0,.4);color:#fff;font-size:15px;padding:5px 9px;display:inline-flex;gap:5px;align-items:center;pointer-events:none} #hrp .ptitle{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 2px 4px;border-bottom:1px solid var(--border)} #hrp .ptitle .ey{font-size:14.5px;letter-spacing:.2em;color:var(--hri-gold);text-transform:uppercase;font-weight:700} #hrp .ptitle .nm{font-family:var(--hri-serif);font-size:30px;line-height:1.25;margin-top:4px} #hrp .ptitle .meta{font-size:16.5px;color:var(--muted-foreground);margin-top:5px;display:flex;align-items:center;gap:6px} #hrp .ptitle .meta svg{width:14px;height:14px} #hrp .ptitle .rankchip{border:1px solid var(--border-strong);color:var(--muted-foreground);font-size:15px;padding:3px 10px;letter-spacing:.06em;white-space:nowrap} #hrp .ttl-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap} #hrp .statusbadge{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:700;padding:3px 10px 3px 8px;letter-spacing:.04em} #hrp .statusbadge svg{width:13px;height:13px} #hrp .sb-own{background:var(--hri-gold);color:#1a1d24} #hrp .sb-mut{background:#fff;border:1px solid var(--info);color:var(--info)} #hrp .ptitle.mut .ey{color:var(--info)} #hrp .xbanner{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:16.5px;margin-top:14px;line-height:1.5} #hrp .xbanner svg{width:16px;height:16px;flex-shrink:0} #hrp .xbanner b{font-weight:700} #hrp .xbanner.own{background:var(--warning-soft);border:1px solid #e7d6ad;color:#7a6528} #hrp .xbanner.own svg{color:var(--hri-gold)} #hrp .xbanner.mut{background:var(--info-soft);border:1px solid #cbdae6;color:#3c576f} #hrp .xbanner.mut svg{color:var(--info)} #hrp .mtab-nav{display:flex;gap:0;border-bottom:1px solid var(--border);margin-top:2px} #hrp .mtab{flex:0 0 auto;padding:15px 26px;font-size:17px;color:var(--muted-foreground);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;flex-direction:column;align-items:center;gap:7px;font-weight:400;background:transparent;border-left:none;border-right:none;border-top:none} #hrp .mtab svg{width:20px;height:20px} #hrp .mtab:hover{color:var(--foreground)} #hrp .mtab.active{color:var(--foreground);font-weight:500;border-bottom-color:var(--foreground)} #hrp .mtab-body{padding:22px 2px 0} #hrp .mpanel{display:none} #hrp .mpanel.show{display:block} #hrp .subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} #hrp .subtab{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;font-size:17px;border:1px solid var(--border-strong);background:#fff;color:var(--muted-foreground)} #hrp .subtab.active{background:var(--foreground);color:#fff;border-color:var(--foreground)} #hrp .subpanel{display:none} #hrp .subpanel.show{display:block} #hrp .slideshow{position:relative;background:#0d0f14;height:420px;overflow:hidden;cursor:pointer} #hrp .slideshow .ph{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .4s} #hrp .slideshow .ph.on{opacity:1} #hrp .ss-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border:none;background:rgba(0,0,0,.38);color:#fff;font-size:24px;display:grid;place-items:center} #hrp .ss-arrow.prev{left:12px} #hrp .ss-arrow.next{right:12px} #hrp .ss-count{position:absolute;right:14px;bottom:12px;z-index:3;background:rgba(0,0,0,.55);color:#fff;font-size:16px;padding:4px 10px;font-variant-numeric:tabular-nums} #hrp .ss-cap{position:absolute;left:14px;bottom:12px;z-index:3;background:rgba(0,0,0,.6);color:#fff;font-size:17px;padding:6px 13px;letter-spacing:.02em} #hrp .ss-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px} #hrp .ss-thumbs img{width:132px;height:88px;object-fit:cover;flex-shrink:0;opacity:.55;cursor:pointer;border:2px solid transparent} #hrp .ss-thumbs img.on{opacity:1;border-color:var(--hri-gold)} #hrp .fp-wrap{display:grid;grid-template-columns:2.5fr 1fr;gap:20px;align-items:start} #hrp .fp-figure{border:1px solid var(--border);background:#fff;padding:20px} #hrp .fp-figure svg{width:100%;height:auto} #hrp .fp-side .fp-title{font-family:var(--hri-serif);font-size:22px;margin-bottom:12px} #hrp .fp-rooms{display:flex;flex-direction:column;gap:0} #hrp .fp-room{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid var(--border);font-size:17px} #hrp .fp-room:last-child{border-bottom:none} #hrp .fp-room .rn{color:var(--muted-foreground)} #hrp .fp-room .rv{font-weight:600} #hrp .info-sec{background:var(--card);border:1px solid var(--border);margin-bottom:18px} #hrp .info-sec-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);font-size:18px;font-weight:700} #hrp .info-sec-head svg{width:18px;height:18px;color:var(--hri-gold)} #hrp .kv{display:grid;grid-template-columns:max-content 1fr;column-gap:20px;row-gap:0;font-size:17px} #hrp .kv.pad{padding:6px 18px 14px} #hrp .kv dt{color:var(--muted-foreground);font-size:16.5px;padding:11px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px} #hrp .kv dt svg{width:15px;height:15px;color:var(--subtle)} #hrp .kv dd{text-align:right;padding:11px 0;border-bottom:1px solid var(--border);font-weight:500} #hrp .kv dt:last-of-type, #hrp .kv dd:last-of-type{border-bottom:none} #hrp .info-two{display:grid;grid-template-columns:1fr;gap:22px} #hrp .info-col{min-width:0} #hrp .info-flat{margin-top:22px} #hrp .info-cat{background:var(--muted);padding:11px 14px;font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px;letter-spacing:.02em;margin-bottom:2px} #hrp .info-cat svg{width:17px;height:17px;color:var(--hri-gold);flex-shrink:0} #hrp .info-row{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:baseline;padding:12px 4px;border-bottom:1px solid var(--border);font-size:17.5px} #hrp .info-row .k{color:var(--muted-foreground);font-size:16.5px} #hrp .info-row .v{font-weight:400;text-align:left} #hrp .info-row:last-child{border-bottom:none} #hrp .info-subcat{font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--subtle);padding:18px 4px 4px} #hrp .ins-row{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--border);flex-wrap:wrap} #hrp .ins-row:last-child{border-bottom:none} #hrp .ins-type{font-size:15px;font-weight:700;padding:4px 11px;border:1px solid var(--border-strong);white-space:nowrap} #hrp .ins-type.fire{color:#a44;border-color:#d8b8b8} #hrp .ins-type.eq{color:#6a4;border-color:#c5d4b3} #hrp .ins-type.liability{color:#357;border-color:#b6c5d4} #hrp .ins-name{font-weight:600;font-size:17.5px;flex:1;min-width:150px} #hrp .ins-name small{display:block;font-size:15px;color:var(--muted-foreground);font-weight:400;margin-top:2px} #hrp .ins-period{font-size:16px;color:var(--muted-foreground);font-variant-numeric:tabular-nums;white-space:nowrap} #hrp .mt-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border);font-size:17px} #hrp .mt-row:last-child{border-bottom:none} #hrp .mt-date{font-variant-numeric:tabular-nums;color:var(--muted-foreground);white-space:nowrap;font-size:16.5px} #hrp .mt-title{flex:1;font-weight:600} #hrp .mt-cat{font-size:14px;font-weight:700;padding:2px 8px;background:var(--muted);color:var(--muted-foreground);white-space:nowrap} #hrp .info-note{font-size:15.5px;color:var(--subtle);padding:11px 18px;background:var(--muted)} #hrp .opt-vendor-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 14px} #hrp .opt-vendor-chip{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;background:#fff;border:1px solid var(--border);flex:0 0 auto;min-width:210px;text-align:left} #hrp .opt-vendor-chip:hover{border-color:var(--border-strong)} #hrp .opt-vendor-chip.is-on{border-color:var(--foreground);background:var(--muted)} #hrp .opt-vendor-chip .th{width:44px;height:44px;flex-shrink:0;object-fit:cover;background:#d8d4ca} #hrp .opt-vendor-chip .nm{font-size:17px;font-weight:700} #hrp .opt-vendor-chip .ct{font-size:14.5px;color:var(--muted-foreground)} #hrp .opt-panel{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:20px;padding:18px;background:#fafaf7;border:1px solid var(--border)} #hrp .opt-gal{position:relative;aspect-ratio:4/3;background:#d8d4ca;overflow:hidden} #hrp .opt-gal .ph{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .35s} #hrp .opt-gal .ph.on{opacity:1} #hrp .opt-gal .nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);border:none;font-size:20px;font-weight:700;display:grid;place-items:center} #hrp .opt-gal .nav.prev{left:8px} #hrp .opt-gal .nav.next{right:8px} #hrp .opt-vname{font-family:var(--hri-serif);font-size:23px;margin-bottom:6px} #hrp .opt-vmeta{display:flex;flex-wrap:wrap;gap:8px;font-size:15.5px;color:var(--muted-foreground);margin-bottom:11px} #hrp .opt-cat-badge{padding:2px 9px;background:#fff;border:1px solid var(--border);font-size:14.5px;font-weight:700;color:var(--foreground)} #hrp .opt-vdesc{font-size:17px;line-height:1.65;color:#333;margin-bottom:14px} #hrp .opt-mhead{font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--muted-foreground);text-transform:uppercase;margin-bottom:8px} #hrp .opt-menu{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:11px 14px;background:#fff;border:1px solid var(--border);border-top:none} #hrp .opt-menu:first-of-type{border-top:1px solid var(--border)} #hrp .opt-menu .mn{font-weight:600;font-size:17.5px} #hrp .opt-menu .md{font-size:15.5px;color:var(--muted-foreground);margin-top:2px} #hrp .opt-menu .mp{color:var(--hri-gold);font-weight:700;font-size:18px;white-space:nowrap} #hrp .opt-menu .mp small{color:var(--muted-foreground);font-weight:400;font-size:14px;margin-left:2px} #hrp .map-wrap{border:1px solid var(--border);background:#fff} #hrp .map-frame{width:100%;height:440px;border:none;display:block;background:var(--muted)} #hrp .map-addr{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;border-top:1px solid var(--border)} #hrp .map-addr svg{width:17px;height:17px;color:var(--hri-gold);flex-shrink:0;margin-top:2px} #hrp .ma-addr{font-size:17.5px} #hrp .ma-acc{font-size:16.5px;color:var(--muted-foreground);margin-top:4px} #hrp .nb-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px} #hrp .nb-toolbar .lbl{font-size:15.5px;color:var(--subtle);font-weight:700;letter-spacing:.04em} #hrp .nb-seg{display:flex;border:1px solid var(--border-strong);background:#fff} #hrp .nb-seg button{border:none;background:transparent;padding:8px 15px;font-size:16.5px;color:var(--muted-foreground);border-right:1px solid var(--border)} #hrp .nb-seg button:last-child{border-right:none} #hrp .nb-seg button.active{background:var(--foreground);color:#fff} #hrp .nb-list{display:grid;grid-template-columns:1fr 1fr;gap:0 26px} #hrp .nb-li{display:flex;align-items:center;gap:11px;padding:13px 4px;border-bottom:1px solid var(--border);font-size:18px} #hrp .nb-li svg{width:17px;height:17px;color:var(--hri-gold);flex-shrink:0} #hrp .nb-li .cat{margin-left:auto;font-size:14.5px;color:var(--muted-foreground);background:var(--muted);padding:2px 9px} #hrp .nb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} #hrp .nb-card{border:1px solid var(--border);background:#fff;overflow:hidden} #hrp .nb-card .im{height:150px;background-size:cover;background-position:center;position:relative} #hrp .nb-card .im .cat{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);color:#fff;font-size:14.5px;padding:3px 9px} #hrp .nb-card .bd{padding:12px 14px} #hrp .nb-card .nm{font-family:var(--hri-serif);font-size:19px} #hrp .nb-card .ds{font-size:16px;color:var(--muted-foreground);margin-top:5px;line-height:1.6} #hrp .nb-card .mt{display:flex;gap:12px;align-items:center;margin-top:8px;font-size:14px;color:var(--muted-foreground)} #hrp .nb-card .mt a{color:var(--hri-gold);text-decoration:underline} #hrp .bkbar{margin:30px calc(-1*var(--mpad)) calc(-1*var(--mpadb));display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:24px var(--mpad)} #hrp .bkbar.dark{background:#1d1d1b;color:#fff} #hrp .bkbar.light{background:#fff;color:var(--foreground);border:1px solid var(--border-strong)} #hrp .bk-main{display:flex;flex-direction:column;gap:4px;min-width:180px} #hrp .bk-ey{font-size:14.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600} #hrp .bkbar.dark .bk-ey{color:var(--hri-gold-soft)} #hrp .bkbar.light .bk-ey{color:var(--hri-gold)} #hrp .bk-nm{font-family:var(--hri-serif);font-size:24px;display:flex;align-items:center;gap:10px} #hrp .bk-rk{font-family:var(--font-sans);font-size:15px;font-weight:500;border:1px solid;padding:2px 9px;letter-spacing:.04em} #hrp .bkbar.dark .bk-rk{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.72)} #hrp .bkbar.light .bk-rk{border-color:var(--border-strong);color:var(--muted-foreground)} #hrp .bk-stats{display:flex;gap:26px;flex-wrap:wrap} #hrp .bk-stat{display:flex;flex-direction:column;gap:4px} #hrp .bk-stat .l{font-size:14.5px;letter-spacing:.06em} #hrp .bkbar.dark .bk-stat .l{color:rgba(255,255,255,.55)} #hrp .bkbar.light .bk-stat .l{color:var(--subtle)} #hrp .bk-stat .v{font-size:22px;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.15} #hrp .bk-stat .v small{font-size:15px;font-weight:400;margin-left:2px} #hrp .bkbar.dark .bk-stat .v small{color:rgba(255,255,255,.55)} #hrp .bkbar.light .bk-stat .v small{color:var(--muted-foreground)} #hrp .bk-stat .v2{font-size:18px;font-weight:400;line-height:1.3} #hrp .bk-free{font-size:19px;font-weight:400} #hrp .bk-selwrap{position:relative;display:inline-block} #hrp .bk-select{font-family:inherit;font-size:19px;font-weight:400;padding:4px 26px 4px 10px;background:transparent;border:1px solid;-webkit-appearance:none;appearance:none;cursor:pointer;line-height:1.4} #hrp .bk-select:focus{outline:none} #hrp .bk-selchev{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:14px} #hrp .bkbar.dark .bk-select{color:#fff;border-color:rgba(255,255,255,.4)} #hrp .bkbar.dark .bk-select option{color:#1d1d1b} #hrp .bkbar.dark .bk-selchev{color:rgba(255,255,255,.7)} #hrp .bkbar.light .bk-select{color:var(--foreground);border-color:var(--border-strong)} #hrp .bkbar.light .bk-selchev{color:var(--muted-foreground)} #hrp .bk-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px} #hrp .bk-cta{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:18px;padding:12px 24px;white-space:nowrap;background:var(--hri-gold);color:#1a1d24} #hrp .bk-float{display:none} #hrp .bkbar.dark .bk-cta, #hrp .bkbar.light .bk-cta{background:var(--hri-gold);color:#1a1d24} #hrp .bk-note{font-size:15px;max-width:300px;text-align:right;line-height:1.5} #hrp .bkbar.dark .bk-note{color:rgba(255,255,255,.42)} #hrp .bkbar.light .bk-note{color:var(--subtle)} #hrp .vw-back{position:fixed;inset:0;z-index:400;background:rgba(8,9,12,.95);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s ease} #hrp .vw-back.show{opacity:1;visibility:visible} #hrp .vw-top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;color:#fff;flex-shrink:0} #hrp .vw-counter{font-size:16px;letter-spacing:.08em;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums} #hrp .vw-close{background:rgba(255,255,255,.12);border:none;color:#fff;width:40px;height:40px;font-size:24px} #hrp .vw-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 76px} #hrp .vw-img{max-width:100%;max-height:100%;object-fit:contain;transform:scale(.955);transition:transform .5s cubic-bezier(.22,.61,.36,1)} #hrp .vw-back.show .vw-img{transform:scale(1)} #hrp .vw-arrow{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:28px} #hrp .vw-arrow.prev{left:16px} #hrp .vw-arrow.next{right:16px} #hrp .vp-sp .header{padding:0 14px} #hrp .vp-sp .header .page-title{display:none} #hrp .vp-sp .layout{grid-template-columns:1fr} #hrp .vp-sp .sidebar{display:none} #hrp .vp-sp .main{padding:14px 12px 30px} #hrp .vp-sp .psel{flex-direction:column;align-items:stretch;gap:10px} #hrp .vp-sp .psel-trigger{min-width:0} #hrp .vp-sp .psel-panel{left:12px;width:calc(100% - 24px);max-width:none} #hrp .vp-sp .phero{aspect-ratio:4/3} #hrp .vp-sp .ptitle .nm{font-size:24px} #hrp .vp-sp .mtab-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap} #hrp .vp-sp .mtab-nav::-webkit-scrollbar{display:none} #hrp .vp-sp .mtab{flex:1 0 auto;padding:11px 16px;font-size:15px} #hrp .vp-sp .subtabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;align-items:center;overscroll-behavior-x:contain;scrollbar-width:none} #hrp .vp-sp .subtabs::-webkit-scrollbar{display:none} #hrp .vp-sp .subtab{flex:0 0 auto} #hrp .vp-sp .fp-wrap{grid-template-columns:1fr;gap:14px} #hrp .vp-sp .info-two{grid-template-columns:1fr} #hrp .vp-sp .info-row{grid-template-columns:118px 1fr;gap:12px} #hrp .vp-sp .opt-panel{grid-template-columns:1fr} #hrp .vp-sp .map-frame{height:300px} #hrp .vp-sp .nb-list{grid-template-columns:1fr} #hrp .vp-sp .nb-grid{grid-template-columns:1fr} #hrp .vp-sp .bkbar{flex-direction:column;align-items:stretch;gap:16px;margin:22px -12px -30px;padding:20px 16px} #hrp .vp-sp .bk-stats{gap:16px 22px} #hrp .vp-sp .bk-right{margin-left:0;align-items:stretch} #hrp .vp-sp .bk-cta{justify-content:center} #hrp .vp-sp .bk-note{text-align:left;max-width:none} #hrp .vp-sp .vw-stage{padding:0 10px} #hrp .vp-sp .vw-arrow{width:40px;height:40px;font-size:24px} @media(max-width:768px){ #hrp .phero{aspect-ratio:4/3;margin-top:0} #hrp .ptitle .nm{font-size:24px} #hrp .mtab-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap} #hrp .mtab-nav::-webkit-scrollbar{display:none} #hrp .mtab{flex:1 0 auto;padding:11px 10px;font-size:13px} /* 15px だと4タブで382px必要になり「周辺情報」が切れる */ /* 横スクロール時に上下へ動いていた（HR-NEW-101）。 overflow-x:auto を書くと overflow-y は仕様上 auto になり、中身が3pxはみ出していたぶん 縦にもスクロールできていた。高さは変えず（HR-REV-V3 で44px化はしないと決定済み）、 縦のスクロールだけを止める。align-items で高さの揃え方も固定する。 */ #hrp .subtabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;align-items:center;overscroll-behavior-x:contain;scrollbar-width:none} #hrp .subtabs::-webkit-scrollbar{display:none} #hrp .subtab{flex:0 0 auto;font-size:14px;padding:8px 12px} /* PCの17pxのままだと5つ目「基本情報」が画面外に出る */ #hrp .fp-wrap{grid-template-columns:1fr;gap:14px} #hrp .info-two{grid-template-columns:1fr} #hrp .info-row{grid-template-columns:118px 1fr;gap:12px} #hrp .opt-panel{grid-template-columns:1fr} #hrp .map-frame{height:300px} #hrp .nb-list{grid-template-columns:1fr} #hrp .nb-grid{grid-template-columns:1fr} #hrp .bkbar{flex-direction:column;align-items:stretch;gap:16px} #hrp .bk-stats{gap:16px 22px} #hrp .bk-right{margin-left:0;align-items:stretch} #hrp .bk-cta{justify-content:center} #hrp .bk-note{text-align:left;max-width:none} #hrp .slideshow{height:auto;aspect-ratio:4/3} #hrp .ss-thumbs img{width:104px;height:70px} #hrp .ss-cap{font-size:15px;padding:4px 9px} #hrp .ss-count{font-size:15px;padding:4px 9px} #hrp .bkbar{padding-bottom:78px} #hrp .bkbar .bk-right .bk-cta{display:none} /* 「この物件を予約する」（HR-NEW-102） ★重なり順：サイドメニュー(45)・その背面の暗幕(40) より下げる。 以前は 200 で、メニューを開いてもこのボタンだけが上に残っていた。 上げるのではなく下げるのが筋（メニューは画面全体を覆うもの）。 20 は表内の見出しの sticky なので、それより上の 30 にする。 ★見た目：黒地に金の文字＋金の枠（2026-08-18 ユーザー指示）。 Design 7章「黒は本物のボタンだけ」に沿う。これは押せるボタンなので黒でよい。 以前は金地の帯で、枠が無く「押せるもの」に見えなかった。 */ #hrp .bk-float{display:flex;align-items:center;justify-content:center;gap:8px;position:fixed;left:14px;right:14px;bottom:14px;z-index:30;background:var(--foreground);color:var(--hri-gold);border:1px solid var(--hri-gold);font-weight:600;font-size:19px;padding:14px 18px;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.28)} #hrp .vw-stage{padding:0 10px} #hrp .vw-arrow{width:40px;height:40px;font-size:24px} } /* 注記バナーのアイコンを上端に揃える（複数行のとき中央に浮いていた / 2026-08-09） */ #hrp .xbanner { align-items: flex-start; } #hrp .xbanner > svg:first-child { margin-top: 3px; } /* ===== 設備・アメニティ（旧「設備」タブ）===== モック owner-property_amenity_mock.html ver 1.3 より移植。 羅列は見出し直下に「・」区切りで1行流し、その下にピックアップ紹介カードを並べる。 */ /* ===== 設備・アメニティ：見出し直下に横一列で流す ===== */ #hrp .amn-group{margin-bottom:20px} #hrp .amn-grouphead{background:var(--muted);padding:9px 14px;font-size:16.5px;font-weight:700; letter-spacing:.02em} #hrp .amn-items{padding:13px 14px 2px;font-size:15px;line-height:1.85;color:var(--text)} #hrp .amn-item{display:inline} #hrp .amn-sep{color:#b9b3a5;margin:0 .1em} #hrp .amn-note{font-size:13.5px;color:#7d7970} #hrp .amn-note-top{margin:0 0 9px;padding:0 2px} #hrp .amn-note-pk{margin:11px 0 0} /* ===== ピックアップ紹介 ===== */ #hrp .amn-pickup{margin-top:44px;padding-top:36px;border-top:1px solid var(--border)} #hrp .amn-pk-head{text-align:center;margin-bottom:32px} #hrp .amn-pk-en{display:block;font-family:"Raleway","Noto Serif JP",serif;font-size:13px; letter-spacing:.18em;text-transform:uppercase;color:#a99a72} #hrp .amn-pk-ttl{margin:8px 0 0;font-size:23px;font-weight:600;letter-spacing:.04em} #hrp .amn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px} #hrp .amn-card-photo{aspect-ratio:4/3;overflow:hidden;background:#f2f0ea} #hrp .amn-card-photo img{width:100%;height:100%;object-fit:cover;display:block} #hrp .amn-card-body{padding-top:13px} #hrp .amn-card-brand{font-family:"Raleway","Noto Serif JP",serif;font-size:12.5px; letter-spacing:.1em;color:#a99a72;margin-bottom:5px} #hrp .amn-card-ttl{margin:0 0 7px;font-size:17.5px;font-weight:700;letter-spacing:.02em} #hrp .amn-card-txt{margin:0;font-size:15px;line-height:1.85;color:var(--text)} /* 写真なし版 */ #hrp .amn-pickup.is-nophoto .amn-cards{grid-template-columns:repeat(2,1fr);gap:0} #hrp .amn-pickup.is-nophoto .amn-card{padding:18px 20px;border-top:1px solid var(--border)} #hrp .amn-pickup.is-nophoto .amn-card-body{padding-top:0} /* SP（テーマの折り返し点に合わせる。ルール6：上書きしたクラスは同じ @media で書き直す） */ @media(max-width:820px){ #hrp .amn-cards{grid-template-columns:repeat(2,1fr);gap:28px 20px} } @media(max-width:640px){ #hrp .amn-items{padding:12px 12px 2px} #hrp .amn-grouphead{font-size:15.5px;padding:8px 12px} #hrp .amn-pickup{margin-top:34px;padding-top:28px} #hrp .amn-pk-ttl{font-size:20px} #hrp .amn-cards{grid-template-columns:1fr;gap:46px} #hrp .amn-card-body{padding-top:11px} #hrp .amn-pickup.is-nophoto .amn-cards{grid-template-columns:1fr} } #hrp .vp-sp .amn-cards{grid-template-columns:1fr} /* ★ここにあった「ゲストには隠す」指定（#hrp.hrp-guest の3行）は削除しました。 HR-NEW-108（2026-08-22）で「隠す」から「出力しない」へ戻したためです。 隠していたのは3つ：予約バー（.bkbar）／札（#hrp-badge）／説明（#hrp-banner）。 いずれもオーナーの立場の話で、ゲストには意味が通じません。 **CSSで隠すだけだと、ゲストのHTMLには文言が残ったままでした** （実測：「相互利用物件」「ご所有枠を使い」「クロスユース」「相互利用でご予約」 「ランク差額」「利用可能な所有枠がありません」の6種類）。 HR-NEW-93 で決めた「隠すのではなく出力しない」の例外になっていた状態です。 いまの出し分けは2か所だけです。CSSで隠す必要はありません。 1. template-parts/property/tabs-app.php … 要素そのものを出すか（is_owner / show_book_cta） 2. assets/js/owner-property-tabs.js … 要素が無ければ触らない（null 対策） ★ここに display:none を足し戻さないこと。足すと、また文言がHTMLに残ります。 */ /* ===== 透過画像の下に白を敷く（2026-09-01 小田さん指示） ===== 間取り図は背景が透過のPNGで来る。暗い背景（スライドショーの #0d0f14、 拡大表示の黒）の上に置くと線が読めなくなるため、画像そのものに白地を持たせる。 写真（不透過）に白を敷いても見た目は変わらないので、物件情報ページの画像は一律で敷く。 */ #hrp img { background:#fff; } #hrp .slideshow .ph { background-color:#fff; } #hrp .vw-img { background:#fff; } /* 間取り図のスライドショー（複数枚）は、切り取らずに全体を出す。 写真用の cover のままだと図面の端が切れる */ #hrp .fp-figure .slideshow { background:#fff; height:auto; aspect-ratio:4/3; } #hrp .fp-figure .slideshow .ph { background-size:contain; background-repeat:no-repeat; background-color:#fff; }