.hero{padding:24px 0}.hero h1{font-size:24px;font-weight:bold;line-height:1.4;margin-bottom:8px}.hero-meta{color:#717171;font-size:14px;margin-bottom:20px}.layout-chips{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}.layout-chip{display:inline-block;border:1px solid #E61E4D;border-radius:12px;padding:16px;text-align:center;color:#E61E4D;font-size:14px;font-weight:600;text-decoration:none;background:#fff;min-width:80px;transition:background 0.2s ease,color 0.2s ease}.layout-chip:hover,.layout-chip:focus{background:#E61E4D;color:#fff}.layout-chip-active{background:#E61E4D;color:#fff;cursor:default;pointer-events:none}@media screen and (max-width:767px){.layout-chips{gap:8px;margin-bottom:16px}.layout-chip{padding:12px;min-width:64px;font-size:14px}}.gallery-hero{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:8px;border-radius:12px;overflow:hidden;margin-bottom:20px;cursor:pointer;position:relative}.gallery-hero:hover .show-all-btn{opacity:1}.gallery-main{grid-row:span 2}.gallery-main img,.gallery-item img{width:100%;height:100%;object-fit:cover}.gallery-main,.gallery-item{background:#ddd;display:flex;align-items:center;justify-content:center;color:#999}.show-all-btn{position:absolute;bottom:20px;right:20px;background:#fff;border:1px solid #222;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;opacity:0.9;transition:opacity 0.2s}.show-all-btn:hover{background:#f7f7f7}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:1000;overflow-y:auto}.modal.active{display:block}.modal-header{position:sticky;top:0;background:#fff;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;z-index:10;border-bottom:1px solid #eee}.modal-close{background:none;border:none;font-size:16px;cursor:pointer;padding:8px 16px;border-radius:8px;display:flex;align-items:center;gap:8px}.modal-close:hover{background:#f7f7f7}.photo-tour-nav{position:sticky;top:60px;background:#fff;z-index:9;border-bottom:1px solid #eee;padding:0 20px}.photo-tour-nav-inner{max-width:1000px;margin:0 auto;display:flex;gap:8px;overflow-x:auto;padding:15px 0;-webkit-overflow-scrolling:touch}.photo-tour-nav-inner::-webkit-scrollbar{display:none}.nav-item{flex-shrink:0;padding:8px 16px;border-radius:20px;font-size:14px;cursor:pointer;transition:all 0.2s;border:1px solid #ddd;background:#fff;white-space:nowrap}.nav-item:hover{background:#f7f7f7}.nav-item.active{background:#222;color:#fff;border-color:#222}.photo-tour-content{max-width:1000px;margin:0 auto;padding:20px}.photo-category{margin-bottom:40px;scroll-margin-top:130px}.photo-category h3{font-size:22px;font-weight:600;margin-bottom:16px;padding-bottom:8px}.photo-category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.photo-category-grid img,.photo-category-grid .photo-placeholder{width:100%;height:250px;object-fit:cover;border-radius:8px;cursor:pointer;transition:opacity 0.2s}.photo-category-grid img:hover,.photo-category-grid .photo-placeholder:hover{opacity:0.9}.photo-placeholder{background:#ddd;display:flex;align-items:center;justify-content:center;color:#999}.lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:2000;align-items:center;justify-content:center}.lightbox.active{display:flex}.lightbox-close{position:absolute;top:20px;left:20px;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:10px;z-index:10}.lightbox-img{max-width:90%;max-height:90%;object-fit:contain}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.9);border:none;width:50px;height:50px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}.lightbox-nav:hover{background:#fff}.lightbox-prev{left:20px}.lightbox-next{right:20px}.lightbox-caption{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;font-weight:600;background:rgba(0,0,0,0.55);padding:5px 14px;border-radius:20px;white-space:nowrap;max-width:80vw;overflow:hidden;text-overflow:ellipsis}.lightbox-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px}.main-content{display:grid;grid-template-columns:1fr 380px;gap:40px;padding:40px 0}.section{padding:24px 0;border-bottom:1px solid #eee}.section-title{font-size:20px;font-weight:bold;margin-bottom:16px}.room-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:16px}.room-card{border:1px solid #ddd;border-radius:12px;padding:16px;text-align:center}a.room-card{border-color:#E61E4D}.room-card h4{font-size:16px;margin-bottom:8px;color:#E61E4D}.room-card p{font-size:14px;color:#666}.amenity-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.amenity-item{display:flex;align-items:center;gap:10px;padding:8px 0}.amenity-icon{font-size:20px}.price-section{margin-top:20px}.price-table{width:100%;border-collapse:collapse;margin:15px 0;font-size:14px}.price-table th,.price-table td{border:1px solid #ddd;padding:12px;text-align:center}.price-table th{background:#f8f8f8;font-weight:600}.price-table .plan-title{background:#E61E4D;color:#fff;font-size:15px}.price-note{font-size:14px;color:#666;margin-top:10px}.booking-card{border:1px solid #ddd;border-radius:12px;padding:24px;box-shadow:0 6px 16px rgba(0,0,0,0.12);position:sticky;top:90px;background:#fff}.booking-card .price{font-size:24px;font-weight:bold}.booking-card .period{font-size:14px;color:#666}.date-picker{border:1px solid #ddd;border-radius:8px;margin:16px 0}.date-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #ddd}.date-input{padding:12px;border-right:1px solid #ddd}.date-input:last-child{border-right:none}.date-input label{display:block;font-size:14px;font-weight:600;text-transform:uppercase}.date-input span{font-size:14px;color:#666}.guests-input{padding:12px}.guests-input label{display:block;font-size:14px;font-weight:600;text-transform:uppercase}.guests-input span{font-size:14px;color:#666}.reserve-btn{width:100%;padding:14px;background:linear-gradient(to right,#E61E4D,#D70466);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:16px}.reserve-btn:hover{opacity:0.9}.booking-note{text-align:center;font-size:14px;color:#666;margin-top:12px}.photo-section{padding:25px 0;border-bottom:1px solid #eee}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.photo-grid img,.photo-grid .photo-placeholder{width:100%;height:150px;object-fit:cover;border-radius:8px;cursor:pointer;transition:opacity 0.2s;background:#ddd;display:flex;align-items:center;justify-content:center;color:#999}.photo-grid img:hover,.photo-grid .photo-placeholder:hover{opacity:0.85}.host-section{padding:40px 0;border-top:1px solid #eee}.host-card{display:flex;gap:24px;align-items:flex-start}.host-avatar{width:64px;height:64px;border-radius:50%;background:#ddd}.host-info h3{font-size:18px;margin-bottom:4px}.host-info p{font-size:14px;color:#666}.area-info{margin-top:20px}.area-item{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid #eee}.area-item:last-child{border-bottom:none}.area-icon{font-size:24px}.area-text h4{font-size:15px;margin-bottom:4px}.area-text p{font-size:14px;color:#666}@media (max-width:900px){.main-content{grid-template-columns:1fr}}@media (max-width:768px){.hero h1{font-size:18px}.gallery-hero{grid-template-columns:1fr;grid-template-rows:250px}.gallery-item{display:none}}.map-container{border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.1)}.map-container iframe{display:block}.price-type-link{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:inherit;transition:color 0.2s}.price-type-link:hover{color:#E61E4D}.price-type-arrow{font-size:14px;color:#E61E4D;transition:transform 0.2s}.price-type-link:hover .price-type-arrow{transform:translateX(3px)}.floorplan-grid{margin:16px 0 0;max-width:350px;display:flex;gap:8px}.floorplan-card{flex:1;min-width:0;background:#f8f8f8;border-radius:12px;padding:10px;text-align:center;cursor:zoom-in;transition:transform 0.2s,box-shadow 0.2s}.floorplan-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,0.08)}.floorplan-card img{display:block;width:100%;height:auto;max-width:100%;border-radius:8px;background:#fff;margin:0 auto}.floorplan-grid>.floorplan-card:only-child img{width:auto;max-height:400px}.floorplan-label{margin:12px 0 0;font-size:14px;font-weight:600;color:#222}.floorplan-modal{position:fixed;inset:0;background:rgba(0,0,0,0.88);display:none;align-items:center;justify-content:center;z-index:10000;padding:40px 20px;cursor:zoom-out;animation:fpFadeIn 0.2s ease-out}.floorplan-modal.active{display:flex}@keyframes fpFadeIn{from{opacity:0}to{opacity:1}}.floorplan-modal-img{max-width:min(95vw,1200px);max-height:85vh;width:auto;height:auto;border-radius:8px;background:#fff;cursor:default;box-shadow:0 20px 60px rgba(0,0,0,0.4)}.floorplan-modal-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,0.12);color:#fff;font-size:22px;cursor:pointer;transition:background 0.2s;z-index:2}.floorplan-modal-close:hover{background:rgba(255,255,255,0.25)}.floorplan-modal-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,0.12);color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:background 0.2s;z-index:2;display:flex;align-items:center;justify-content:center}.floorplan-modal-nav:hover{background:rgba(255,255,255,0.25)}.floorplan-modal-nav:disabled{opacity:0.2;cursor:not-allowed}.floorplan-modal-prev{left:20px}.floorplan-modal-next{right:20px}.floorplan-modal-caption{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;font-weight:600;background:rgba(0,0,0,0.5);padding:6px 16px;border-radius:20px;letter-spacing:0.02em}@media(max-width:600px){.floorplan-modal-close{top:12px;right:12px}.floorplan-modal-prev{left:6px}.floorplan-modal-next{right:6px}.floorplan-modal-nav{width:40px;height:40px;font-size:24px}}

/* ===== 物件詳細・部屋タイプ詳細ページ（body.page-detail）レイアウト =====
   ブレークポイント（物件詳細のみ。既存の @media (max-width:900px) は他ページ用に残し、詳細度で上書きする）
     〜767px      : 1カラム（スマホ・現状のまま）
     768〜1024px  : タブレット2カラム（右300px / 768〜820pxのみ280px）
     1025px〜     : PC 2カラム（右380px・既存のまま）
   sticky（追従）は 768px 以上。 */

/* ---- モーダル表示中のスクロールロック（property.js の lockPageScroll が html に .modal-open を付ける） ----
   html が overflow-x:hidden のため body の overflow:hidden ではビューポートがロックされない。html 自体を overflow:hidden にする。
   モーダルの端での連鎖スクロールも overscroll-behavior で抑える */
html.modal-open{overflow:hidden}
.modal,.floorplan-modal{overscroll-behavior:contain}
/* ロック中はスクロールバーが消えて html に padding-right を足す。position:fixed の固定CTAも同じ分だけ内側に寄せて、幅が広がらないようにする */
html.modal-open .fixed-cta{right:var(--sbw,0px)}

/* ---- 固定幅要素の保険（全幅・物件詳細のみ）: iframe（Googleマップ等）が親幅を超えてグリッドを押し広げないようにする ---- */
body.page-detail .main-content iframe{max-width:100%}

/* ---- タブレット（768〜1024px）/ PC（1025px〜）のカラム・固定CTA ----
   ★並び順を守ること（小さい min-width から順に書く）。
   方式: セレクタはすべて body.page-detail（同じ詳細度）にそろえ、min-width の下限を小さい順に並べて
   「後に書いたものが上書き」する。max-width の上限を使わないので、820.5px のような小数幅でも隙間ができない
   （範囲構文を使わないので Safari 15 でも有効）。新しい境界を足すときも、該当する位置に挿入すること。
   右カラム: 768〜820px=280px / 821〜1024px=300px / 1025px〜=380px（gapは 24px / 24px / 40px）
   固定CTA : 文言が収まれば1行、収まらなければ折り返す。幅の上限は左カラム幅まで（右カラム＋gapに重ならない）。
             100% は .fixed-cta の左右padding(20px)を除いた幅（＝左カラム＋gap＋右カラム）。
             折り返して2〜3行（約110〜140px）になっても隠れないよう、body の下余白を広げる（〜1199px）。
             1200px〜は従来どおり（CTA幅25%・下余白80px）。 */
@media (min-width:768px) {
  body.page-detail .main-content{grid-template-columns:minmax(0,1fr) 280px;gap:24px}
  body.page-detail .fixed-cta-inner{width:max-content;max-width:calc(100% - 280px - 24px)}
  body.page-detail.has-fixed-cta{padding-bottom:150px}
}
@media (min-width:821px) {
  body.page-detail .main-content{grid-template-columns:minmax(0,1fr) 300px}
  body.page-detail .fixed-cta-inner{max-width:calc(100% - 300px - 24px)}
}
@media (min-width:1025px) {
  body.page-detail .main-content{grid-template-columns:minmax(0,1fr) 380px;gap:40px}
  body.page-detail .fixed-cta-inner{max-width:calc(100% - 380px - 40px)}
}
@media (min-width:1140px) {
  /* .container が最大幅1100pxで固定される幅。左カラムは 1100-40-380-40=640px で一定なので、CTAの上限も固定値にする */
  body.page-detail .fixed-cta-inner{max-width:640px}
}
@media (min-width:1200px) {
  /* 1200px〜は固定CTA・下余白とも従来（origin/main）と同じ */
  body.page-detail .fixed-cta-inner{width:auto;max-width:25%}
  body.page-detail.has-fixed-cta{padding-bottom:80px}
}

/* 右カラムが空のページ（restructureLayout が no-right を付与）は全幅で1カラムに戻す。
   詳細度 (0,3,1) が上の @media 内の body.page-detail .main-content (0,2,1) より高いので、書き順に依存しない */
body.page-detail .main-content.no-right{grid-template-columns:minmax(0,1fr)}

/* ---- タブレット（768px ちょうど）: 既存の @media (max-width:768px)（スマホ用）を物件詳細のみ打ち消し、769px以上と同じ表示にそろえる ----
   対象: .hero h1 の文字サイズ / .gallery-hero のグリッド / .gallery-item の表示。767px以下は変更しない。
   既存ルールは max-width:768px なので、768.5px 等の小数幅では既存ルール自体が当たらず、隙間は生じない */
@media (min-width:768px) and (max-width:768px) {
  body.page-detail .hero h1{font-size:24px}
  body.page-detail .gallery-hero{grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px}
  body.page-detail .gallery-item{display:flex}
}

/* ---- 右カラム追従（sticky）: 768px以上 ----
   html と body の両方が overflow-x:hidden だと body がスクロールコンテナ化し sticky が効かない。
   overflow-x:clip はスクロールコンテナにならず横はみ出しは同様に隠れるが、Safari 16未満は非対応。
   非対応ブラウザでは、追従に関わる指定（body の clip・.header の relative・max-height/overflow）ごと無効にし、
   2カラム化だけを適用する（追従しないが、右カラムが切れる等の悪化は起こさない）。 */
@supports (overflow-x: clip) {
  @media (min-width:768px) {
    body.page-detail{overflow-x:clip}
    /* ヘッダー（ハンバーガーメニュー入り）を画面上部に残す。従来は body の overflow で sticky が効かず、スクロールで流れて消えていた。
       clip 非対応ブラウザ（この @supports の外）は従来どおり流れる表示のまま。
       ヘッダー高さ(--header-h)は property.js が実測して設定する（未設定時のフォールバックは 102px） */
    body.page-detail .header{position:sticky;top:0}
    /* アンカー（#price 等）の直接リンクで飛んだ先の見出しが固定ヘッダーの下に隠れないようにする。
       html の scroll-padding-top は使わない: 固定ヘッダー内のボタンへの focus / scrollIntoView まで「隠れている」と判定され、
       ページが勝手にスクロールしてメニュー開閉でスクロール位置がずれる原因になったため。:target（飛び先）と :focus（キーボード操作で上へ戻ったときの対象）の scroll-margin-top で指定する（ヘッダー自身とその内側は除外。WCAG 2.4.11 対応）。
       common.css の .section 等の scroll-margin-top:80px（固定ヘッダーなし前提）より詳細度が高いので、上書きされる */
    body.page-detail :is(:target, :focus):not(.header, .header *, .modal-header, .modal-header *){scroll-margin-top:calc(var(--header-h, 102px) + 16px)}
    /* メニューを開くと common.js が body を position:fixed（top:-スクロール量）にするため、sticky のヘッダーごと画面外へ押し上げられ、
       閉じるボタンが押せなくなる。開いている間だけヘッダーを画面上端に固定し、抜けた高さ分は body の上余白で補う（見た目の位置は不変） */
    body.page-detail.nav-open .header{position:fixed;top:0;left:0;right:0}
    body.page-detail.nav-open{padding-top:var(--header-h, 102px)}
    body.page-detail .main-content > .content-right{
      position:-webkit-sticky;
      position:sticky;
      top:calc(var(--header-h, 102px) + 16px);
      align-self:start;
      box-sizing:border-box;
      max-height:calc(100vh - var(--header-h, 102px) - 32px);
      max-height:calc(100dvh - var(--header-h, 102px) - 32px);
      overflow-y:auto;
      /* overflow で切れる booking-card の影・hover演出用の余白。負マージンで見た目の位置は不変 */
      padding:8px 16px 24px;
      margin:-8px -16px -24px;
    }
    /* 右カラム内の旧 sticky（top:90px）は二重に効かないよう無効化 */
    body.page-detail .main-content > .content-right .booking-card{position:static}
  }
}