/* ========================= View Mode Switch (page/embed/ig) - HTML側で を付ける想定 - 例: ?mode=embed / ?mode=ig ========================= */ html[data-areamap-view] body { margin: 0; } /* ===== Map Wrapper / Base ===== */ html[data-areamap-view] #map-wrapper { position: relative; width: 100%; background: #f8f8f8; overflow: hidden; /* デフォルト（page） */ height: 100vh; /* height: 40vh; */ /* max-height: 600px; */ max-height: 100vh; } html[data-areamap-view] .map-image-container { position: relative; width: 100%; height: 100%; } html[data-areamap-view] .map-image-container img { width: 100%; height: 100%; object-fit: cover; /* object-fit: contain; にしたい場合はここを変更 */ display: block; } /* ===== embed（iframe用：地図だけ） ===== */ html[data-areamap-view="embed"] #map-wrapper { height: 100%; max-height: none; } html[data-areamap-view="embed"] .areamap-cta, html[data-areamap-view="embed"] .areamap-footer { display: none !important; } /* ===== ig（Instagram用：フルスクリーン） ===== */ html[data-areamap-view="ig"] #map-wrapper { height: 100dvh; max-height: none; background: #000; /* 余白が出た時の白を消す */ } html[data-areamap-view="ig"] .areamap-footer { display: none !important; } /* ===== モーダル（map-wrapper上に重ねる） ===== */ html[data-areamap-view] .img-modal { position: absolute; inset: 10px; z-index: 2000; display: none; border-radius: 14px; overflow: hidden; height: auto; /* ← 固定40vhをやめて、insetに任せる */ } html[data-areamap-view] .img-modal.is-open { display: block; } html[data-areamap-view] .img-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); } html[data-areamap-view] .img-modal__content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 720px); max-height: 90%; background: #fff; border-radius: 14px; overflow: hidden; } html[data-areamap-view] .img-modal__content img { width: 100%; height: auto; display: block; } html[data-areamap-view] .img-modal__close { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff; font-size: 20px; line-height: 36px; cursor: pointer; } /* ===== ホットスポット共通（アイコン前提） ===== */ html[data-areamap-view] .hotspot { position: absolute; width: 40px; height: 40px; /* 下端固定（IG/モバイル安全域対応） */ bottom: calc(16px + env(safe-area-inset-bottom)); top: auto; transform: none; background-repeat: no-repeat; background-position: center; background-size: 60% 60%; /* タップ最適化 */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } html[data-areamap-view] .hotspot:hover { background-color: rgba(255, 255, 255, 0.7); } /* ラベルは不要（テキスト表示しない） */ html[data-areamap-view] .hotspot::after { content: none; } /* 駐車場（アイコン + 位置） */ html[data-areamap-view] .hotspot-parking { right: 76px; background-image: url("../img/parking-sign.svg"); } /* メニュー（アイコン + 位置） */ html[data-areamap-view] .hotspot-menu { right: 16px; background-image: url("../img/yen-sign.svg"); } /* 任意：リーダー線 */ html[data-areamap-view] .hotspot.has-leader::before { content: ""; position: absolute; width: 40px; height: 2px; background: rgba(255,255,255,0.9); left: -36px; top: 50%; transform: translateY(-50%) rotate(-20deg); border-radius: 2px; border: none; } /* ===== CTA ===== */ html[data-areamap-view] .areamap-cta { position: absolute; left: 10px; z-index: 10; width: 140px; height: 30px; background-color: rgba(255,255,255,0.7); padding: 5px; /* 下端固定（IG/モバイル安全域対応） */ bottom: calc(10px + env(safe-area-inset-bottom)); } html[data-areamap-view] .areamap-cta a { text-decoration: none; color: black; } /* ===== Route panel toggle button (on map) ===== */ .route-panel-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 650; /* chips(600)より上 */ border: 0; border-radius: 999px; padding: 12px 14px; font-size: 13px; font-weight: 900; cursor: pointer; background: rgba(17,24,39,0.92); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,0.18); } /* ===== Panel on map ===== */ .areamap-panel { position: absolute; left: 10px; right: 10px; bottom: 64px; /* ボタンの上に出す */ z-index: 640; margin-top: 0; /* 地図下のレイアウト用だったので無効化 */ max-height: 70vh; /* 地図内で暴れないように */ overflow: scroll; } /* パネル内スクロール */ .areamap-panel__body { overflow: scroll; -webkit-overflow-scrolling: touch; } /* 初期は閉じる（非表示） */ .areamap-panel.is-collapsed { display: none; } /* モバイルで地図が全画面なので、角丸が邪魔ならここで調整してもOK */ @media (max-width: 480px) { .areamap-panel { border-radius: 16px; max-height: 62vh; } } /* ===== Help toggle button ===== */ .areamap-help-btn{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 0; background: transparent; cursor: pointer; font-weight: 900; font-size: 14px; text-align: left; } .areamap-help-btn__icon{ display: inline-block; transition: transform 160ms ease; opacity: 0.75; } .areamap-help-btn[aria-expanded="true"] .areamap-help-btn__icon{ transform: rotate(180deg); } .areamap-help-body{ padding: 0 14px 12px; } .areamap-help-body.is-collapsed{ display: none; }