.vt-property-header {
    font-family: inherit;
    color: #222;
}

.vt-property-header-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ddd;
    position: relative;
}

.vt-property-header-title::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 40px;
    height: 4px;
    background: #2271b1;
}

.vt-property-header-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.vt-property-header-tag {
    font-size: 13px;
    padding: 6px 16px;
    border: 1px solid #ccc;
    border-radius: 20px;
    color: #444;
}

.vt-property-header-body {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.vt-property-header-thumb {
    flex: 0 0 auto;
    width: 280px;
    max-width: 100%;
}

.vt-property-header-thumb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.vt-property-header-desc {
    flex: 1 1 280px;
    font-size: 14px;
    line-height: 1.9;
    color: #444;
}

.vt-property-header-desc p {
    margin: 0 0 1em;
}

.vt-property-header-date {
    text-align: right;
    font-size: 12px;
    color: #999;
    margin: 10px 0 0;
}

.vt-property-vr-heading {
    font-size: 18px;
    font-weight: bold;
    margin: 28px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.vt-viewer-wrap {
    position: relative;
    width: 100%;
    height: 60vh;
    max-height: 600px;
    min-height: 300px;
    background: #000;
}

.vt-viewer {
    width: 100%;
    height: 100%;
}

.vt-zoom-controls {
    position: absolute;
    top: auto;
    bottom: 179px;
    right: 8px;
    left: auto;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: bottom .25s ease;
}

.vt-zoom-controls.is-collapsed {
    bottom: 42px;
}

.vt-viewer-header {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.vt-viewer-title {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    max-width: 70vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-viewer-title-icon {
    flex: 0 0 auto;
}

.vt-viewer-inquiry-btn {
    background: #fff;
    color: #111;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
}

.vt-viewer-inquiry-btn:hover {
    background: #f0f0f0;
    color: #111;
}

.vt-scene-carousel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
    padding: 10px 10px 12px;
    transition: max-height .25s ease, opacity .25s ease, padding .25s ease;
    max-height: 200px;
    opacity: 1;
}

.vt-scene-carousel.is-hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.vt-scene-carousel-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.vt-scene-carousel-item {
    position: relative;
    flex: 0 0 calc((100% - 50px) / 6);
    aspect-ratio: 4 / 3;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: #000;
}

.vt-carousel-toggle {
    position: absolute;
    left: 8px;
    bottom: 145px;
    z-index: 5;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
    transition: bottom .25s ease;
}

.vt-carousel-toggle svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Pannellum標準の全画面ボタン（デフォルトは左上）を、＋／－ズームボタンの真下（右下）へ移動する */
.vt-viewer-wrap .pnlm-controls-container {
    top: auto;
    left: auto;
    right: 8px;
    bottom: 145px;
    z-index: 5;
    transition: bottom .25s ease;
}

.vt-viewer-wrap .pnlm-controls-container.is-collapsed {
    bottom: 8px;
}

.vt-carousel-toggle.is-collapsed {
    bottom: 8px;
}

/* Pannellum標準の全画面ボタンは白い箱＋スプライト画像なので、背景を消してSVGアイコン＋シャドウに差し替える */
.vt-viewer-wrap .pnlm-fullscreen-toggle-button {
    background-color: transparent;
    border: none;
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5'/%3E%3Cpath d='M15 4h5v5'/%3E%3Cpath d='M20 15v5h-5'/%3E%3Cpath d='M9 20H4v-5'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}

.vt-viewer-wrap .pnlm-fullscreen-toggle-button:hover {
    background-color: transparent;
}

.vt-viewer-wrap .pnlm-fullscreen-toggle-button.pnlm-fullscreen-toggle-button-active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4'/%3E%3Cpath d='M15 4v5h5'/%3E%3Cpath d='M20 15h-5v5'/%3E%3Cpath d='M4 15h5v5'/%3E%3C/svg%3E");
}

.vt-scene-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter .15s ease;
}

.vt-scene-carousel-item:hover img {
    filter: brightness(.7);
}

.vt-scene-carousel-item:hover {
    border-color: rgba(255, 255, 255, .8);
}

.vt-scene-carousel-item.is-active {
    border-color: #ffb800;
}

.vt-scene-carousel-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 6px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-zoom-btn {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}

.vt-zoom-btn svg {
    width: 100%;
    height: 100%;
    display: block;
}

.vt-zoom-btn:hover {
    opacity: .8;
}

.vt-viewer-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: #fff;
    font-size: 14px;
    z-index: 2;
    opacity: .7;
    transition: opacity .3s ease;
}

.vt-viewer-loading.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.vt-viewer-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    margin-right: 10px;
    animation: vt-spin .8s linear infinite;
}

@keyframes vt-spin {
    to { transform: rotate(360deg); }
}


/* Pannellumが標準ホットスポット用に付与する .pnlm-hotspot（width/height:26px固定）が
   同じ要素にかかるため、中の内容がflexの縮小計算で26pxの箱へ押し縮められてしまう。
   ここでコンテナを可変サイズに戻し、アイコン／ラベルにも flex-shrink:0 を指定して
   意図したサイズのまま表示されるようにする。同時に、Pannellumがデフォルトで
   付けるスプライト背景（左上に「＋」の欠片が見えてしまうバグ）も打ち消す。 */
.vt-scene-hotspot {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: auto;
    height: auto;
    background: none;
}

.vt-scene-hotspot-icon {
    flex-shrink: 0;
    width: 63px;
    height: 63px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7));
}

.vt-scene-hotspot-label {
    flex-shrink: 0;
    margin-top: 6px;
    max-width: 220px;
    padding: 4px 12px;
    line-height: 1.4;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 13px;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-scene-label {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .6);
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 5;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
    white-space: nowrap;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-scene-label.is-visible {
    opacity: 1;
}

/* 初期状態は右上に小さく表示し、クリックすると右上を起点に正方形のまま
   縦90%まで拡大する（モーダルではなく、ビューワー内で伸び縮みするパネル）。 */
.vt-floorplan-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    width: 76px;
    height: 76px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    transition: width .3s ease, height .3s ease, border-radius .3s ease;
}

.vt-floorplan-panel.is-expanded {
    width: auto;
    height: 90%;
    aspect-ratio: 1;
    border-radius: 16px;
    cursor: default;
}

.vt-floorplan-panel-canvas {
    position: relative;
    width: 100%;
    height: 100%;
}

.vt-floorplan-panel-canvas img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top left;
    display: block;
    background: #fff;
}

.vt-floorplan-panel-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    display: none;
}

.vt-floorplan-panel-close svg {
    width: 100%;
    height: 100%;
    display: block;
}

.vt-floorplan-panel.is-expanded .vt-floorplan-panel-close {
    display: block;
}

.vt-floorplan-pin {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: -10px 0 0 -10px;
    padding: 0;
    border-radius: 50%;
    background: #e0342a;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.vt-floorplan-pin-tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .75);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.vt-floorplan-pin:hover .vt-floorplan-pin-tooltip {
    opacity: 1;
}

/* 現在地・現在向いている方向を示す矢印。ピンと同じ位置に重ねて表示し、向きに合わせて回転させる。 */
.vt-floorplan-current-arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: 0;
    pointer-events: none;
    z-index: 3;
    display: none;
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition: width .3s ease, height .3s ease;
}

/* 縮小表示（右上の小さいミニマップ）の時は、他の要素と同じ縮尺で矢印も小さくする */
.vt-floorplan-panel:not(.is-expanded) .vt-floorplan-current-arrow {
    width: 16px;
    height: 16px;
}

.vt-floorplan-current-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}